/* ========================================================================= EPYK — Colors & Type tokens Mobile-native AI comic streaming. Cinematic dark surfaces, electric accent, chunky display type that echoes the wordmark. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;600&display=swap'); :root { /* ---------- CORE SURFACES (dark-first) ------------------------------- */ --epyk-ink: #070709; /* the brand black — logo backdrop, OS chrome */ --epyk-coal: #0E0E14; /* primary app background */ --epyk-graphite: #16161F; /* elevated surface 1 — cards, sheets */ --epyk-slate: #20202C; /* elevated surface 2 — modals, top app bar */ --epyk-fog: #2C2C3A; /* hairline / divider over coal */ --epyk-mist: #3A3A4B; /* disabled chrome, subtle stroke */ /* ---------- TEXT ----------------------------------------------------- */ --epyk-paper: #FAFAFB; /* primary text on dark */ --epyk-paper-dim: #C9C9D4; /* secondary text */ --epyk-paper-mute: #8A8A9A; /* tertiary / metadata / captions */ --epyk-paper-ghost:#5A5A6B; /* disabled labels */ /* ---------- BRAND ACCENT — "Spark" ----------------------------------- The platform's signal color. Crimson red for AI / streaming / creator energy. Used sparingly, never as a flat background. */ --epyk-spark-50: #FDEEEF; --epyk-spark-100: #FACDD0; --epyk-spark-200: #F19BA0; --epyk-spark-300: #E76872; --epyk-spark-400: #E5424F; --epyk-spark-500: #DE2E3F; /* primary brand spark */ --epyk-spark-600: #B81F2C; --epyk-spark-700: #831420; --epyk-spark: var(--epyk-spark-500); /* ---------- SECONDARY — "Ember" -------------------------------------- Used for warning, "hot", trending, premium pings. */ --epyk-ember-300: #FFA77A; --epyk-ember-500: #F55F15; /* vibrant orange — trending / live badge */ --epyk-ember-700: #B23A00; /* ---------- TERTIARY — "Aurora" -------------------------------------- Mint/cyan glow. Used for "AI-generated" markers, success states. */ --epyk-aurora-300: #93FFE3; --epyk-aurora-500: #2BE5BD; /* signature AI tag */ --epyk-aurora-700: #0C9A78; /* ---------- QUATERNARY — "Gold" -------------------------------------- Premium tier, awards, creator-of-the-week. */ --epyk-gold-300: #FFE3A1; --epyk-gold-500: #FFC04A; --epyk-gold-700: #B07A00; /* ---------- SEMANTIC ------------------------------------------------- */ --epyk-success: var(--epyk-aurora-500); --epyk-warn: var(--epyk-gold-500); --epyk-danger: #FF4D4D; --epyk-info: var(--epyk-spark-300); /* ---------- SCRIM / OVERLAY ----------------------------------------- */ --epyk-scrim-soft: rgba(7, 7, 9, 0.40); --epyk-scrim: rgba(7, 7, 9, 0.66); --epyk-scrim-hard: rgba(7, 7, 9, 0.86); --epyk-glass: rgba(255, 255, 255, 0.06); --epyk-glass-edge: rgba(255, 255, 255, 0.10); /* ---------- BACKDROPS / GRADIENTS ------------------------------------ */ --epyk-bleed-spark: radial-gradient(120% 60% at 50% 0%, rgba(222, 46, 63, 0.42) 0%, transparent 70%); --epyk-bleed-ember: radial-gradient(110% 60% at 50% 100%, rgba(245, 95, 21, 0.32) 0%, transparent 70%); --epyk-cover-fade: linear-gradient(180deg, transparent 35%, rgba(7, 7, 9, 0.55) 65%, rgba(7, 7, 9, 0.95) 100%); --epyk-vignette: radial-gradient(120% 100% at 50% 50%, transparent 50%, rgba(7,7,9,0.55) 100%); /* ---------- SEMANTIC ROLE ALIASES ------------------------------------ */ --bg: var(--epyk-coal); --bg-elev-1: var(--epyk-graphite); --bg-elev-2: var(--epyk-slate); --bg-ink: var(--epyk-ink); --fg: var(--epyk-paper); --fg-2: var(--epyk-paper-dim); --fg-3: var(--epyk-paper-mute); --fg-disabled: var(--epyk-paper-ghost); --line: var(--epyk-fog); --line-strong: var(--epyk-mist); --accent: var(--epyk-spark); --accent-on: #FFFFFF; /* text color sitting on --accent */ --accent-soft: rgba(222, 46, 63, 0.18); /* ---------- TYPE FAMILIES ------------------------------------------- */ /* Display: a modern geometric grotesk for marquee titles + section openers. The brand wordmark itself is NEVER set in a font — use the image asset. */ --font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* ---------- TYPE SCALE — mobile-first -------------------------------- Display is reserved for the wordmark and marquee comic titles. Body sizes follow an iOS-like rhythm. */ --t-display-xl: 72px; /* hero wordmark, splash */ --t-display: 48px; /* section openers, big titles */ --t-display-sm: 32px; --t-h1: 28px; /* screen title */ --t-h2: 22px; /* section header */ --t-h3: 18px; /* row title, card title */ --t-body: 15px; /* default */ --t-body-sm: 13px; /* secondary, meta */ --t-caption: 11px; /* badges, tags */ --t-mono: 12px; --lh-tight: 1.05; --lh-snug: 1.20; --lh-base: 1.45; --lh-loose: 1.65; --ls-display: -0.01em; --ls-tight: -0.015em; --ls-body: 0em; --ls-caps: 0.08em; /* ---------- SPACING — 4-pt scale ------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; /* ---------- RADIUS --------------------------------------------------- */ --r-xs: 4px; /* small chips, tag inner stroke */ --r-sm: 8px; /* secondary buttons */ --r-md: 12px; /* form fields, list items */ --r-lg: 16px; /* primary cards */ --r-xl: 22px; /* hero cards, featured carousel */ --r-2xl: 28px; /* bottom sheets */ --r-pill: 999px; /* CTAs, genre chips */ /* ---------- ELEVATION ------------------------------------------------ */ --shadow-1: 0 1px 2px rgba(0,0,0,0.50); --shadow-2: 0 4px 14px rgba(0,0,0,0.45); --shadow-3: 0 14px 40px rgba(0,0,0,0.55); --shadow-spark: 0 10px 36px rgba(222, 46, 63, 0.45); /* CTA hover halo */ --shadow-ember: 0 8px 28px rgba(245, 95, 21, 0.40); /* ---------- MOTION --------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); --d-quick: 140ms; --d-base: 220ms; --d-slow: 420ms; /* ---------- COMPONENT TOKENS ---------------------------------------- */ --hit-min: 44px; /* min tap target */ --safe-bottom: env(safe-area-inset-bottom, 0px); --tabbar-h: 64px; --appbar-h: 56px; } /* ========================================================================= SEMANTIC TYPE — apply directly to elements ========================================================================= */ .epyk-display-xl, .epyk-wordmark { font-family: var(--font-display); font-size: var(--t-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--fg); } .epyk-display { font-family: var(--font-display); font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } .epyk-display-sm { font-family: var(--font-display); font-size: var(--t-display-sm); line-height: var(--lh-snug); } .epyk-h1 { font: 700 var(--t-h1)/var(--lh-snug) var(--font-body); letter-spacing: var(--ls-tight); } .epyk-h2 { font: 700 var(--t-h2)/var(--lh-snug) var(--font-body); letter-spacing: var(--ls-tight); } .epyk-h3 { font: 600 var(--t-h3)/var(--lh-snug) var(--font-body); } .epyk-body { font: 400 var(--t-body)/var(--lh-base) var(--font-body); color: var(--fg); } .epyk-body-em { font: 600 var(--t-body)/var(--lh-base) var(--font-body); color: var(--fg); } .epyk-body-sm { font: 400 var(--t-body-sm)/var(--lh-base) var(--font-body); color: var(--fg-2); } .epyk-caption { font: 500 var(--t-caption)/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-3); } .epyk-mono { font: 400 var(--t-mono)/1.4 var(--font-mono); } /* Base reset for previews */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }