/* ==========================================================================
ONE CLAP — oneclap-ui.css
Shared tokens + components for Phase 0 (honest states, delete-account,
admin studio grant, cookie bar). CSP-safe: classes only, no runtime styles.
Prefix: .oc-* — never collides with legacy page CSS.
Load AFTER page CSS and mobile-responsive.css:
Fonts (Google Fonts, allowed by style-src/font-src):
Anton, Inter 400-800, Noto Sans Telugu 400-700, Space Mono 400/700
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS
Contrast ratios are WCAG 2.x, computed against the named surface.
-------------------------------------------------------------------------- */
:root {
color-scheme: dark;
/* Background layers (darkest → lightest) */
--oc-bg-0: #000000; /* page canvas (watch/index/privacy) */
--oc-bg-1: #080808; /* section band, sidebar */
--oc-surface-1: #111111; /* card / panel (= watch --black-card) */
--oc-surface-2: #181818; /* raised / hover (= watch --black-card-hover) */
--oc-surface-3: #222222; /* input fill, skeleton base */
--oc-scrim: rgba(0, 0, 0, 0.72); /* dialog backdrop */
--oc-reel-scrim: rgba(0, 0, 0, 0.55); /* caption gradient end on video */
/* Borders */
--oc-border: rgba(255, 255, 255, 0.10); /* hairline, = --border-line */
--oc-border-strong: rgba(255, 255, 255, 0.20); /* inputs, secondary buttons */
--oc-border-gold: rgba(212, 175, 55, 0.30); /* = --gold-border */
--oc-border-gold-strong: rgba(212, 175, 55, 0.55);
/* Gold scale (brand) */
--oc-gold-200: #F5D78E; /* index --gold-bright. on surface-1: 13.48:1 */
--oc-gold-300: #F5D060; /* watch --gold-bright. on surface-1: 12.66:1 */
--oc-gold-500: #D4AF37; /* brand --gold. on surface-1: 8.98:1 */
--oc-gold-700: #8B7330; /* --gold-dim. 4.13:1 on surface-1 → borders/icons ONLY, never text */
--oc-gold-tint: rgba(212, 175, 55, 0.10);
--oc-gold-tint-strong: rgba(212, 175, 55, 0.18);
--oc-on-gold: #0A0A0A; /* text on gold fills: 9.42:1 on gold-500, 13.27:1 on gold-300 */
/* Text */
--oc-text: #F0EDE6; /* primary. surface-1 16.15 · surface-3 13.61 · bg-0 17.96 */
--oc-text-2: #B9B4A8; /* secondary. surface-1 9.13 · surface-3 7.69 · bg-0 10.16 */
--oc-text-muted: #8F8A80; /* muted/meta. surface-1 5.50 · surface-2 5.17 · surface-3 4.63 (AA ≥4.5 everywhere) */
--oc-text-disabled: #5E5A53; /* disabled control text only (exempt from AA); never for information */
/* Status (each passes AA as text on its own *-bg and on surface-1) */
--oc-danger: #FF7A6B; --oc-danger-bg: #2A1210; --oc-danger-border: rgba(255, 122, 107, 0.40); /* 7.42 on surface-1, 6.92 on danger-bg */
--oc-success: #5FD08A; --oc-success-bg: #0F2418; --oc-success-border: rgba(95, 208, 138, 0.38); /* 9.78 on surface-1 */
--oc-warning: #F2B544; --oc-warning-bg: #2A1F08; --oc-warning-border: rgba(242, 181, 68, 0.40); /* 10.31 on surface-1 */
--oc-info: #8AB4F8; --oc-info-bg: #0E1A2E; --oc-info-border: rgba(138, 180, 248, 0.38); /* 8.96 on surface-1 */
/* Type families */
--oc-font-display: 'Anton', 'Noto Sans Telugu', 'Arial Narrow', sans-serif;
--oc-font-sans: 'Inter', 'Noto Sans Telugu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--oc-font-te: 'Noto Sans Telugu', 'Inter', system-ui, sans-serif;
--oc-font-mono: 'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* codes/ids ONLY */
/* Type scale (px; nothing below 12) */
--oc-fs-label: 12px; /* uppercase labels, pills, meta. Floor. */
--oc-fs-sm: 14px; /* secondary body, buttons-sm, toasts. Body floor on phone. */
--oc-fs-body: 16px; /* body, inputs (prevents iOS zoom) */
--oc-fs-lg: 18px; /* lead text, empty-state title on phone */
--oc-fs-h4: 20px;
--oc-fs-h3: 24px;
--oc-fs-h2: clamp(28px, 2.2vw + 18px, 40px);
--oc-fs-h1: clamp(32px, 3.4vw + 18px, 56px);
--oc-fw-regular: 400;
--oc-fw-medium: 500;
--oc-fw-semibold: 600;
--oc-fw-bold: 700;
--oc-fw-heavy: 800;
/* Line heights. Telugu glyphs have tall vowel signs + deep conjuncts:
never set Telugu below 1.45 or it clips inside pills/buttons. */
--oc-lh-display: 1.08; /* Anton, Latin only */
--oc-lh-tight: 1.25; /* Latin headings */
--oc-lh-snug: 1.4; /* Latin UI labels / buttons */
--oc-lh-body: 1.55; /* Latin body */
--oc-lh-te-tight: 1.5; /* Telugu headings, buttons, pills */
--oc-lh-te-body: 1.75; /* Telugu body */
--oc-track-display: 0.02em;
--oc-track-label: 0.06em; /* uppercase 12px labels */
--oc-measure: 68ch;
/* Spacing (4-pt) */
--oc-space-1: 4px;
--oc-space-2: 8px;
--oc-space-3: 12px;
--oc-space-4: 16px;
--oc-space-5: 20px;
--oc-space-6: 24px;
--oc-space-8: 32px;
--oc-space-10: 40px;
--oc-space-12: 48px;
--oc-space-16: 64px;
--oc-gutter: 16px; /* phone side gutter; 24 tablet; 32 desktop */
/* Radii (matches existing 8/12/999 usage in watch.html) */
--oc-radius-xs: 4px;
--oc-radius-sm: 8px;
--oc-radius-md: 12px;
--oc-radius-lg: 16px;
--oc-radius-xl: 24px;
--oc-radius-pill: 999px;
/* Elevation (offset + soft blur; gold glow reserved for primary CTA + FAB) */
--oc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.35);
--oc-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.6);
--oc-shadow-3: 0 18px 48px rgba(0, 0, 0, 0.75);
--oc-shadow-gold: 0 4px 18px rgba(212, 175, 55, 0.32); /* camera FAB only (matches existing nav) */
--oc-focus-ring: 0 0 0 2px var(--oc-bg-0), 0 0 0 4px var(--oc-gold-300);
/* Z-index scale. Sits inside the legacy ranges so it composes with
existing pages (bottom nav 10000, theater 100050, legacy toast 999999). */
--oc-z-base: 0;
--oc-z-raised: 10;
--oc-z-sticky: 100;
--oc-z-header: 1000;
--oc-z-bottom-nav: 10000; /* = existing .mobile-bottom-nav */
--oc-z-fab: 10010; /* camera FAB; hidden while cookie bar is open */
--oc-z-cookie: 10020; /* ABOVE bottom nav + FAB */
--oc-z-sheet: 20000; /* bottom sheets (comments) */
--oc-z-dialog: 100100; /* above legacy theater 100050 */
--oc-z-toast: 100200; /* above dialogs, so dialog results are visible */
/* Layout constants */
--oc-sab: env(safe-area-inset-bottom, 0px);
--oc-bottom-nav-h: calc(56px + var(--oc-sab));
--oc-tap: 44px;
--oc-header-h: 64px;
/* Motion */
--oc-dur-instant: 100ms;
--oc-dur-fast: 160ms;
--oc-dur-base: 240ms;
--oc-dur-slow: 360ms;
--oc-dur-shimmer: 1400ms;
--oc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* = fullpage-redesign --oc-ease */
--oc-ease-in: cubic-bezier(0.4, 0, 1, 1);
--oc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}
/* --------------------------------------------------------------------------
2. BASE HELPERS (scoped; do not reset legacy pages)
-------------------------------------------------------------------------- */
[class^="oc-"], [class*=" oc-"],
[class^="oc-"]::before, [class*=" oc-"]::before,
[class^="oc-"]::after, [class*=" oc-"]::after { box-sizing: border-box; }
.oc-root {
background: var(--oc-bg-0);
color: var(--oc-text);
font-family: var(--oc-font-sans);
font-size: var(--oc-fs-body);
line-height: var(--oc-lh-body);
-webkit-font-smoothing: antialiased;
}
.oc-root ::selection { background: var(--oc-gold-500); color: var(--oc-on-gold); }
.oc-root a:not([class*="oc-btn"]) { color: var(--oc-gold-200); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.oc-root a:not([class*="oc-btn"]):hover { color: var(--oc-gold-300); }
:lang(te), .oc-te {
font-family: var(--oc-font-te);
line-height: var(--oc-lh-te-body);
letter-spacing: 0; /* never track Telugu */
text-transform: none;
}
.oc-te { display: block; color: var(--oc-text-2); font-size: var(--oc-fs-sm); margin-top: var(--oc-space-1); }
.oc-visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.oc-num { font-variant-numeric: tabular-nums; }
.oc-code { font-family: var(--oc-font-mono); font-size: var(--oc-fs-sm); letter-spacing: 0.02em; }
/* Universal focus treatment for every .oc-* interactive element */
.oc-btn:focus-visible, .oc-iconbtn:focus-visible, .oc-rail-btn:focus-visible,
.oc-input:focus-visible, .oc-check input:focus-visible + .oc-check__box,
.oc-link:focus-visible, .oc-cookie a:focus-visible {
outline: none;
box-shadow: var(--oc-focus-ring);
}
.oc-h1, .oc-h2 { font-family: var(--oc-font-display); font-weight: 400; letter-spacing: var(--oc-track-display); line-height: var(--oc-lh-display); text-transform: uppercase; }
.oc-h1 { font-size: var(--oc-fs-h1); }
.oc-h2 { font-size: var(--oc-fs-h2); }
.oc-h3 { font-size: var(--oc-fs-h3); font-weight: var(--oc-fw-bold); line-height: var(--oc-lh-tight); }
.oc-h4 { font-size: var(--oc-fs-h4); font-weight: var(--oc-fw-semibold); line-height: var(--oc-lh-tight); }
.oc-label {
font-size: var(--oc-fs-label); font-weight: var(--oc-fw-semibold);
letter-spacing: var(--oc-track-label); text-transform: uppercase; color: var(--oc-text-2);
}
.oc-meta { font-size: var(--oc-fs-sm); color: var(--oc-text-muted); }
/* --------------------------------------------------------------------------
3. BUTTON
Anatomy:
States: :hover, :active, :focus-visible, [disabled], [aria-disabled="true"]
(focusable, explains itself on click), .is-loading (+ aria-busy="true")
-------------------------------------------------------------------------- */
.oc-btn {
--_bg: var(--oc-surface-2);
--_fg: var(--oc-text);
--_bd: var(--oc-border-strong);
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: var(--oc-space-2);
min-height: var(--oc-tap); min-width: var(--oc-tap);
padding: 0 var(--oc-space-5);
border: 1px solid var(--_bd); border-radius: var(--oc-radius-pill);
background: var(--_bg); color: var(--_fg);
font: var(--oc-fw-semibold) var(--oc-fs-sm)/var(--oc-lh-snug) var(--oc-font-sans);
text-decoration: none; white-space: nowrap; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--oc-dur-fast) var(--oc-ease-standard),
border-color var(--oc-dur-fast) var(--oc-ease-standard),
color var(--oc-dur-fast) var(--oc-ease-standard),
transform var(--oc-dur-instant) var(--oc-ease-standard);
}
.oc-btn:lang(te), .oc-btn .oc-te-inline { line-height: var(--oc-lh-te-tight); }
.oc-btn:hover { --_bg: var(--oc-surface-3); --_bd: rgba(255, 255, 255, 0.32); }
.oc-btn:active { transform: translateY(1px); }
.oc-btn__icon { width: 18px; height: 18px; flex: none; }
.oc-btn--primary {
--_bg: var(--oc-gold-500); --_fg: var(--oc-on-gold); --_bd: transparent;
font-weight: var(--oc-fw-bold);
box-shadow: var(--oc-shadow-1); /* neutral; gold glow is reserved for the camera FAB */
}
.oc-btn--primary:hover { --_bg: var(--oc-gold-300); --_bd: transparent; }
.oc-btn--secondary { --_bg: transparent; --_fg: var(--oc-gold-200); --_bd: var(--oc-border-gold-strong); }
.oc-btn--secondary:hover { --_bg: var(--oc-gold-tint); --_bd: var(--oc-gold-500); }
.oc-btn--ghost { --_bg: transparent; --_fg: var(--oc-text-2); --_bd: transparent; }
.oc-btn--ghost:hover { --_bg: rgba(255, 255, 255, 0.06); --_fg: var(--oc-text); --_bd: transparent; }
.oc-btn--danger { --_bg: #C2392B; --_fg: #FFFFFF; --_bd: transparent; font-weight: var(--oc-fw-bold); } /* #FFF on #C2392B = 5.27:1 */
.oc-btn--danger:hover { --_bg: #D84433; --_bd: transparent; } /* 4.53:1 */
.oc-btn--sm { min-height: 36px; padding: 0 var(--oc-space-4); font-size: var(--oc-fs-label); }
/* sm keeps a 44px hit area on touch via pseudo-element */
.oc-btn--sm::after { content: ""; position: absolute; inset: -4px 0; }
.oc-btn--lg { min-height: 52px; padding: 0 var(--oc-space-6); font-size: var(--oc-fs-body); }
.oc-btn--block { display: flex; width: 100%; }
.oc-btn[disabled],
.oc-btn[aria-disabled="true"] {
--_bg: var(--oc-surface-2); --_fg: var(--oc-text-disabled); --_bd: var(--oc-border);
box-shadow: none; cursor: not-allowed; transform: none;
}
.oc-btn[disabled] { pointer-events: none; }
.oc-btn__spinner {
display: none; width: 16px; height: 16px; border-radius: 50%;
border: 2px solid currentColor; border-right-color: transparent;
animation: oc-spin 0.8s linear infinite;
}
.oc-btn.is-loading { cursor: progress; }
.oc-btn.is-loading .oc-btn__icon { display: none; }
.oc-btn.is-loading .oc-btn__spinner { display: inline-block; }
/* Icon button (header, theater) */
.oc-iconbtn {
display: inline-grid; place-items: center;
width: var(--oc-tap); height: var(--oc-tap);
border-radius: 50%; border: 1px solid var(--oc-border); background: var(--oc-surface-1);
color: var(--oc-text); cursor: pointer;
transition: background-color var(--oc-dur-fast) var(--oc-ease-standard);
}
.oc-iconbtn:hover { background: var(--oc-surface-2); }
.oc-iconbtn svg { width: 20px; height: 20px; }
/* --------------------------------------------------------------------------
4. PILL / BADGE
New
Variants: --new (gold outline), --verified (gold fill tint + check),
--soon (neutral), --locked (warning), --danger, --success
-------------------------------------------------------------------------- */
.oc-pill {
display: inline-flex; align-items: center; gap: var(--oc-space-1);
min-height: 22px; padding: 2px var(--oc-space-2);
border-radius: var(--oc-radius-pill); border: 1px solid var(--oc-border-strong);
background: var(--oc-surface-2); color: var(--oc-text-2);
font: var(--oc-fw-bold) var(--oc-fs-label)/1.4 var(--oc-font-sans);
letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
vertical-align: middle;
}
.oc-pill:lang(te) { text-transform: none; letter-spacing: 0; line-height: var(--oc-lh-te-tight); }
.oc-pill svg { width: 12px; height: 12px; }
.oc-pill--new { border-color: var(--oc-border-gold-strong); background: var(--oc-gold-tint); color: var(--oc-gold-200); }
.oc-pill--verified { border-color: transparent; background: var(--oc-gold-tint-strong); color: var(--oc-gold-200); }
.oc-pill--soon { border-color: var(--oc-border-strong); background: transparent; color: var(--oc-text-2); }
.oc-pill--locked { border-color: var(--oc-warning-border); background: var(--oc-warning-bg); color: var(--oc-warning); }
.oc-pill--danger { border-color: var(--oc-danger-border); background: var(--oc-danger-bg); color: var(--oc-danger); }
.oc-pill--success { border-color: var(--oc-success-border); background: var(--oc-success-bg); color: var(--oc-success); }
/* --------------------------------------------------------------------------
5. COUNT (honest counters)
1.5K
When formatCount(n) === "New": render the pill on meta lines,
and the VERB label on action buttons (see 02-design.md §3.1).
-------------------------------------------------------------------------- */
.oc-count { font-variant-numeric: tabular-nums; font-weight: var(--oc-fw-semibold); }
/* Social action row (watch) + rail (shorts) */
.oc-actions { display: flex; flex-wrap: wrap; gap: var(--oc-space-2); }
.oc-action {
display: inline-flex; align-items: center; gap: var(--oc-space-2);
min-height: var(--oc-tap); padding: 0 var(--oc-space-4);
border-radius: var(--oc-radius-pill); border: 1px solid var(--oc-border);
background: var(--oc-surface-1); color: var(--oc-text);
font: var(--oc-fw-semibold) var(--oc-fs-sm)/1 var(--oc-font-sans); cursor: pointer;
}
.oc-action svg { width: 18px; height: 18px; }
.oc-action:hover { background: var(--oc-surface-2); }
.oc-action:focus-visible { outline: none; box-shadow: var(--oc-focus-ring); }
.oc-action[aria-disabled="true"] { color: var(--oc-text-2); cursor: help; }
.oc-action[aria-disabled="true"] svg { opacity: 0.6; }
.oc-action__soon {
font-size: var(--oc-fs-label); font-weight: var(--oc-fw-semibold);
color: var(--oc-text-muted); padding-left: var(--oc-space-2); border-left: 1px solid var(--oc-border);
}
.oc-rail { display: flex; flex-direction: column; align-items: center; gap: var(--oc-space-4); }
.oc-rail-btn {
display: flex; flex-direction: column; align-items: center; gap: var(--oc-space-1);
background: none; border: 0; padding: 0; color: var(--oc-text); cursor: pointer;
font: var(--oc-fw-semibold) var(--oc-fs-label)/1.3 var(--oc-font-sans);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
border-radius: var(--oc-radius-md);
}
.oc-rail-btn__disc {
display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
background: rgba(17, 17, 17, 0.72); border: 1px solid var(--oc-border-strong);
}
.oc-rail-btn__disc svg { width: 22px; height: 22px; }
.oc-rail-btn[aria-disabled="true"] .oc-rail-btn__disc svg { opacity: 0.6; }
/* --------------------------------------------------------------------------
6. TOAST
Region (once per page, before ):