/* ============================================================================ Apagha — Colors & Type tokens ---------------------------------------------------------------------------- Foundational + semantic CSS variables for the Apagha design system. FONTS: Display = **Aeonik Pro** (the real brand font), self-hosted from /fonts. Two weights supplied — Thin and Bold — wired via @font-face weight ranges: Thin covers 100–300, Bold covers 400–900, so the display weight (500) and the stamp weight (700) both resolve to the Bold file, while light treatments can call weight 100–300 to get the Thin. Schibsted Grotesk stays a CDN fallback. Body uses **Inter** — now self-hosted from the supplied variable fonts (upright + italic, weight axis 100–900), no longer the CDN copy. --> Add the Regular/Medium weights into /fonts + @font-face for true 500. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&display=swap'); @font-face { font-family: 'Aeonik Pro'; src: url('fonts/Aeonik-Pro-Thin.ttf') format('truetype'); font-weight: 100 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Aeonik Pro'; src: url('fonts/Aeonik-Pro-Bold.ttf') format('truetype'); font-weight: 400 900; /* display 500 + stamp 700 resolve here */ font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* ---- Type families ---------------------------------------------------- */ --font-display: 'Aeonik Pro', 'Schibsted Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* ======================================================================== COLOR — Brand & accent ======================================================================== */ --primary: #494fdf; /* cobalt violet — the one brand stamp */ --primary-bright: #4f55f1; /* bright variant — inline links, accents */ --primary-glow: #6f78ff; /* luminous cobalt — active icons/links, glow */ --primary-deep: #3a40c4; /* pressed/active state of cobalt elements */ --on-primary: #ffffff; /* label color on primary surfaces */ /* ---- Surface ---------------------------------------------------------- */ --canvas-light: #ffffff; /* white "catalogue" mode */ --canvas-dark: #000000; /* true-black storytelling canvas */ --surface-soft: #f4f4f4; /* off-white insets, soft buttons, tiles */ --surface-card: #ffffff; /* white card surface */ --surface-deep: #0a0a0a; /* inset card inside dark regions */ --surface-elevated: #16181a; /* lifted card on the dark canvas */ /* ---- Hairlines / dividers -------------------------------------------- */ --hairline-light: #e2e2e7; --hairline-dark: rgba(255,255,255,0.12); --hairline-strong: #191c1f; --divider-soft: rgba(255,255,255,0.06); /* ---- Text ------------------------------------------------------------- */ --ink: #191c1f; /* primary text on light (warm black) */ --body: #1f2226; /* long-form body */ --charcoal: #3a3d40; /* captions, secondary nav */ --mute: #505a63; /* supporting text */ --ash: #5c5e60; /* tertiary, footer copy */ --stone: #8d969e; /* metadata, subtle captions */ --faint: #c9c9cd; /* disabled foreground, hairline replacement */ --on-dark: #ffffff; /* primary text on dark */ --on-dark-mute: rgba(255,255,255,0.72); /* secondary on dark */ /* ======================================================================== COLOR — Semantic / accent The wide accent palette lives inside illustrations & product UI ONLY, never as marketing button surfaces. EXCEPTION for Apagha: keep/delete are core product semantics and DO surface as action affordances. ======================================================================== */ --keep: #00a87e; /* swipe-right = MANTER (keep). teal-green */ --keep-deep: #008566; --keep-soft: #e6f6f1; --delete: #e23b4a; /* swipe-left = APAGAR (delete). danger red */ --delete-deep: #c22a38; --delete-soft: #fdeaec; --accent-teal: #00a87e; --accent-light-blue: #007bc2; --accent-blue-link: #376cd5; --accent-light-green: #428619; --accent-green-text: #006400; --accent-yellow: #b09000; --accent-warning: #ec7e00; --accent-pink: #e61e49; --accent-danger: #e23b4a; --accent-deep-red: #8b0000; --accent-brown: #936d62; --link: #376cd5; /* ======================================================================== RADII ======================================================================== */ --radius-none: 0px; --radius-sm: 8px; /* inline tags, small chips */ --radius-md: 12px; /* inputs, download tiles */ --radius-lg: 20px; /* feature & plan cards */ --radius-xl: 28px; /* product-mockup / device chrome */ --radius-full: 9999px;/* buttons, pills, badges */ /* ======================================================================== SPACING (base 4px) ======================================================================== */ --space-xxs: 4px; --space-xs: 6px; --space-sm: 8px; --space-md: 14px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 48px; --space-block: 80px; --space-section: 88px; --space-band: 120px; /* ======================================================================== SHADOWS — the system has NO drop-shadow language for cards. Depth = canvas/band switches + surface-luminance shifts. These are reserved for transient, floating UI only (toasts, the swipe card lifting off the deck), never decorative card chrome. ======================================================================== */ --shadow-card-lift: 0 18px 50px -12px rgba(0,0,0,0.45); /* swipe card in motion */ --shadow-toast: 0 8px 30px -6px rgba(0,0,0,0.30); /* ======================================================================== MATERIAL — Metal & Glass (added layer) ------------------------------------------------------------------------ An optional tactile layer over the flat canvas: brushed-metal surfaces, frosted glass for floating chrome, and whisper-soft component sheen. Keep it RESTRAINED — these are top-lit, near-monochrome treatments that read as material, never as decorative color gradients. Cobalt stays the only hue. Use --metal-* for solid cards, --glass-* for floating UI. ======================================================================== */ /* Brushed-metal elevated card on black (replaces flat --surface-elevated) */ --metal-elevated: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0) 42%), linear-gradient(158deg, #1e2125 0%, #141619 52%, #0d0f11 100%); /* @kind color */ --metal-elevated-border: rgba(255,255,255,0.09); /* top-edge highlight + soft seat shadow — the "machined" inset */ --metal-inset: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.45); /* Anodized cobalt — the featured/Pro surface with a top specular sheen */ --metal-cobalt: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 46%), linear-gradient(158deg, #5a60ef 0%, #494fdf 48%, #383ec0 100%); /* @kind color */ --metal-cobalt-inset: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.30); /* Brushed aluminium on the light canvas — for tiles/inputs that want body */ --metal-light: linear-gradient(180deg, #ffffff 0%, #f1f2f4 62%, #e9ebee 100%); /* @kind color */ --metal-light-border: var(--hairline-light); --metal-light-inset: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.04); /* Frosted glass — floating chrome only (nav, toasts, verdict overlay) */ --glass-bg: rgba(20,22,25,0.55); --glass-bg-lt: rgba(255,255,255,0.62); --glass-blur: saturate(150%) blur(22px); /* @kind other */ --glass-border: rgba(255,255,255,0.14); --glass-inset: inset 0 1px 0 rgba(255,255,255,0.14); /* Component sheen — a near-imperceptible top-light to lift pills/badges */ --sheen-light: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 52%); /* @kind color */ --sheen-dark: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 50%); /* @kind color */ /* ======================================================================== AURORA — Revolut-derived ambient depth (added, refines the metal layer) ------------------------------------------------------------------------ Two findings from real Revolut screens: (1) "storytelling" surfaces are NOT pure black but a dark desaturated teal base lit by big, soft, low- opacity colour blooms (a mesh of ambient light); (2) cards on those surfaces are flat frosted panels with a DIFFUSE light-leak — a soft bloom along the top and bottom edge, never a hard specular line. Cobalt stays the lead hue; violet + teal appear only as dim ambient light. ======================================================================== */ --aurora-base: #0c1416; /* dark desaturated teal — base, not #000 */ --aurora-bg: radial-gradient(78% 55% at 14% 6%, rgba(73,79,223,0.20), transparent 60%), radial-gradient(64% 46% at 94% 26%, rgba(150,120,255,0.14), transparent 60%), radial-gradient(90% 60% at 82% 102%, rgba(0,150,180,0.12), transparent 62%), radial-gradient(58% 40% at -4% 92%, rgba(120,96,255,0.10), transparent 60%), var(--aurora-base); --aurora-warm: /* faint bronze accent near top-left chrome */ radial-gradient(36% 22% at 8% 4%, rgba(196,150,110,0.16), transparent 60%); /* @kind color */ /* Frosted panel that floats on the aurora — flat fill + diffuse light-leak */ --frost-fill: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)); --frost-blur: saturate(140%) blur(26px); /* @kind other */ --frost-border: rgba(255,255,255,0.07); /* soft top bloom, a hairline of leaked light at the bottom, gentle seat */ --frost-leak: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(255,255,255,0.05), 0 18px 40px -22px rgba(0,0,0,0.75), 0 6px 30px -8px rgba(150,170,255,0.06); /* @kind shadow */ /* Glassy tinted pill (the "Upgrade" CTA) — translucent colour + thin edge */ --glass-tint-cobalt: rgba(73,79,223,0.20); --glass-tint-teal: rgba(0,150,180,0.20); --glass-tint-border: rgba(255,255,255,0.18); /* ======================================================================== TYPE SCALE — raw tokens (size / weight / line-height / tracking) Display = Aeonik Pro 500. Body = Inter 400/600. ======================================================================== */ --display-xxl: 500 136px/1.0 var(--font-display); --display-xl: 500 80px/1.0 var(--font-display); --display-lg: 500 48px/1.21 var(--font-display); --display-md: 500 40px/1.2 var(--font-display); --heading-lg: 500 32px/1.19 var(--font-display); --heading-md: 500 24px/1.33 var(--font-display); --heading-sm: 500 20px/1.4 var(--font-display); --body-lg: 400 18px/1.56 var(--font-body); --body-md: 400 16px/1.5 var(--font-body); --body-sm: 400 14px/1.43 var(--font-body); --caption: 400 13px/1.4 var(--font-body); } /* ============================================================================ SEMANTIC TYPE — apply directly to elements. Negative tracking scales with size; display line-height clamps to 1.0. ============================================================================ */ .t-display-xxl { font: var(--display-xxl); letter-spacing: -2.72px; } .t-display-xl { font: var(--display-xl); letter-spacing: -0.8px; } .t-display-lg { font: var(--display-lg); letter-spacing: -0.48px; } .t-display-md { font: var(--display-md); letter-spacing: -0.4px; } .t-heading-lg { font: var(--heading-lg); letter-spacing: -0.32px; } .t-heading-md { font: var(--heading-md); letter-spacing: 0; } .t-heading-sm { font: var(--heading-sm); letter-spacing: 0; } .t-body-lg { font: var(--body-lg); letter-spacing: -0.09px; } .t-body-md { font: var(--body-md); letter-spacing: 0.24px; } .t-body-md-bold{ font: 600 16px/1.5 var(--font-body); letter-spacing: 0.16px; } .t-body-sm { font: var(--body-sm); letter-spacing: 0; } .t-caption { font: var(--caption); letter-spacing: 0; } .t-button-lg { font: 500 20px/1.4 var(--font-display); letter-spacing: 0; } .t-button-md { font: 600 16px/1.5 var(--font-body); letter-spacing: 0.24px; } .t-button-sm { font: 600 14px/1.43 var(--font-body); letter-spacing: 0; } .t-link-emph { font: 700 16px/1.5 var(--font-body); letter-spacing: 0.24px; } /* Responsive hero clamp: 136 → 80 → 64 → 48 */ @media (max-width: 1024px){ .t-display-xxl{ font-size: 80px; letter-spacing:-1.6px; } } @media (max-width: 767px) { .t-display-xxl{ font-size: 64px; letter-spacing:-1.28px; } .t-display-xl { font-size: 56px; letter-spacing:-0.56px; } } @media (max-width: 425px) { .t-display-xxl{ font-size: 48px; letter-spacing:-0.96px; } }