/* ========================================================================== OMG Big Boobs — Design Tokens Derived from Bojan Sandic's Figma package (1512px canvas, 2x exports). Colours sampled directly from the PNG exports and icon SVG sources. Values marked PROVISIONAL are measured from the exports rather than supplied by the designer. Reconcile against Bojan's token export when it arrives, then delete the marker. ========================================================================== */ :root { /* ---------- Surfaces ------------------------------------------------- Near-black with a red cast. Not neutral grey — do not substitute #000 or #111 anywhere, the warm tint is what makes the pink sit right. */ --omg-bg: #0E0207; /* page background */ --omg-bg-card: #110409; /* card + panel base */ --omg-bg-footer: #1A050E; /* footer band */ --omg-surface-1: #281119; /* raised panel / input fill */ --omg-surface-2: #352128; /* hover state on raised panels */ --omg-surface-3: #4E232F; /* active / selected */ /* ---------- Brand pink ----------------------------------------------- */ --omg-pink: #FF419E; /* primary */ --omg-pink-hover: #E82486; --omg-pink-active: #C90943; --omg-pink-light: #E04FA0; /* gradient light stop */ --omg-pink-deep: #872654; /* banner gradient mid */ --omg-pink-shadow: #6B2647; /* banner gradient dark */ --omg-gold: #E9A608; /* stars, crown, premium marks */ /* ---------- Text ------------------------------------------------------ */ --omg-text: #FEFFFC; --omg-text-muted: #A39E97; --omg-text-dim: #655A5A; --omg-text-on-pink: #FFFFFF; /* ---------- Borders --------------------------------------------------- */ --omg-border: rgba(255, 255, 255, 0.10); --omg-border-strong: rgba(255, 255, 255, 0.18); --omg-border-pink: rgba(255, 65, 158, 0.40); /* ---------- Gradients ------------------------------------------------- The pink appears at several values across the exports because it is used as gradients, not as flat fills. */ --omg-grad-button: linear-gradient(90deg, var(--omg-pink) 0%, var(--omg-pink-light) 100%); --omg-grad-banner: linear-gradient(180deg, var(--omg-pink-deep) 0%, var(--omg-pink-shadow) 100%); --omg-grad-header: linear-gradient(180deg, rgba(135,38,84,0.92) 0%, rgba(107,38,71,0.78) 100%); --omg-grad-fade: linear-gradient(180deg, rgba(14,2,7,0) 0%, rgba(14,2,7,0.92) 100%); /* CHANGE 2026-09-15: exact section gradients from Figma panels */ --omg-grad-topsection: linear-gradient(180deg, #91265A 0%, #6D1C43 55%, #0E0207 100%); --omg-grad-member: linear-gradient(180deg, #2F0318 0%, #2F0419 50%, #0E0207 100%); --omg-grad-heaven: linear-gradient(90deg, #511633 0%, #91265A 100%); --omg-grad-button-fig: linear-gradient(180deg, #FF419E 0%, #C90943 100%); /* ---------- Typography ------------------------------------------------ Funnel Display, variable weight axis 300–800, OFL licensed, self-hosted. Single family across the whole site. */ --omg-font: 'Funnel Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --omg-w-light: 300; --omg-w-regular: 400; --omg-w-medium: 500; --omg-w-semibold: 600; --omg-w-bold: 700; --omg-w-extrabold: 800; /* Type scale — CHANGE 2026-09-15: exact values from Ihor's Figma Fonts/Desktop frame (was provisional, measured off exports). H1 56/64 H2 48/56 H3 20/32 SemiBold H4 20/32 Medium body 18|16|14 all lh 24, buttons 16 SemiBold lh 24. Mobile overrides at the end of this file. */ --omg-fs-hero: 56px; /* H1 — BECOME A MEMBER */ --omg-fs-section: 48px; /* H2 — ALL VIDEOS, NEW UPDATES */ --omg-fs-h3: 20px; /* SemiBold per spec */ --omg-fs-h4: 20px; /* Medium per spec */ --omg-fs-body-lg: 18px; --omg-fs-body: 16px; --omg-fs-button: 16px; /* SemiBold, lh 24 */ --omg-lh-h1: 64px; --omg-lh-h2: 56px; --omg-lh-h34: 32px; --omg-lh-text: 24px; --omg-fs-card: 16px; /* card title. CHANGE 2026-10-06: 15 -> 16 per Figma panel */ --omg-fs-meta: 13px; /* date, views, like % */ --omg-fs-small: 12px; --omg-fs-badge: 11px; --omg-lh-tight: 1.15; --omg-lh-snug: 1.35; --omg-lh-body: 1.6; --omg-track-heading: 0.01em; --omg-track-badge: 0.06em; --omg-track-button: 0.04em; /* ---------- Layout ---------------------------------------------------- Container and grid derived from the 4-column video grid in the All-videos export: 4 x 334 + 3 x 16 = 1384. */ --omg-container: 1384px; --omg-gutter: 64px; --omg-grid-gap: 16px; --omg-card-w: 334px; /* reference only — grid is fluid */ --omg-header-h: 80px; /* ---------- Spacing scale — PROVISIONAL ------------------------------- */ --omg-space-1: 4px; --omg-space-2: 8px; --omg-space-3: 12px; --omg-space-4: 16px; --omg-space-5: 24px; --omg-space-6: 32px; --omg-space-7: 48px; --omg-space-8: 64px; --omg-space-9: 96px; /* between major sections */ /* ---------- Radii ------------------------------------------------------ */ /* CHANGE 2026-09-15: glass recipe from Figma - $0.33 banner is #FFFFFF 8% fill, 1px #FFFFFF 24% border, radius 16. */ --omg-glass-fill: rgba(255, 255, 255, 0.08); --omg-glass-border: rgba(255, 255, 255, 0.24); --omg-radius-sm: 6px; --omg-radius: 10px; /* cards, inputs */ --omg-radius-lg: 16px; /* panels, pricing cards */ --omg-radius-xl: 24px; /* CHANGE 2026-09-15: section panels per Figma */ --omg-radius-pill: 999px; /* buttons, badges, filter chips (Figma: 100px) */ /* ---------- Icon sizes — from the SVG viewBox tally -------------------- */ --omg-icon-sm: 16px; --omg-icon-md: 24px; --omg-icon-lg: 32px; --omg-icon-xl: 40px; /* play overlay on cards */ /* ---------- Motion ----------------------------------------------------- */ --omg-ease: cubic-bezier(0.4, 0, 0.2, 1); --omg-dur-fast: 120ms; --omg-dur: 200ms; --omg-dur-slow: 320ms; /* ---------- Elevation --------------------------------------------------- */ --omg-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45); --omg-shadow-pink: 0 4px 20px rgba(255, 65, 158, 0.30); --omg-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.60); /* ---------- Z-index ----------------------------------------------------- */ --omg-z-header: 100; /* CHANGE 2026-09-23: joinbar rendered on top of the open mega menu (HB screenshot). Values swapped: menu now above joinbar. */ --omg-z-menu: 300; --omg-z-joinbar: 200; --omg-z-modal: 400; } /* CHANGE 2026-09-15: mobile type scale from Ihor's Fonts/Mobile frame. H1 40/48, H2 32/40, H3/H4 unchanged at 20/32. */ @media (max-width: 768px) { :root { --omg-fs-hero: 40px; --omg-fs-section: 32px; --omg-lh-h1: 48px; --omg-lh-h2: 40px; } } /* Breakpoints are documented here for reference; CSS custom properties cannot be used in media queries, so the literal values are repeated in the stylesheets. PROVISIONAL until Bojan confirms. --bp-sm: 480px 1 column --bp-md: 768px 2 columns --bp-lg: 1024px 3 columns --bp-xl: 1400px 4 columns, container caps at 1384 */