/* vietnamese */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300; font-display: swap; src: url(/_next/static/media/630e0b819503bca7-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300; font-display: swap; src: url(/_next/static/media/6eed223b32d97b82-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300; font-display: swap; src: url(/_next/static/media/793968fa3513f5d6-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/630e0b819503bca7-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/6eed223b32d97b82-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/793968fa3513f5d6-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url(/_next/static/media/630e0b819503bca7-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url(/_next/static/media/6eed223b32d97b82-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url(/_next/static/media/793968fa3513f5d6-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url(/_next/static/media/630e0b819503bca7-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url(/_next/static/media/6eed223b32d97b82-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url(/_next/static/media/793968fa3513f5d6-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/630e0b819503bca7-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/6eed223b32d97b82-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/793968fa3513f5d6-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face {font-family: 'Lexend Fallback';src: local("Arial");ascent-override: 90.98%;descent-override: 22.74%;line-gap-override: 0.00%;size-adjust: 109.91% }.__className_f75355 {font-family: 'Lexend', 'Lexend Fallback';font-style: normal }.__variable_f75355 {--font-lexend: 'Lexend', 'Lexend Fallback' } /* latin-ext */ @font-face { font-family: 'Sansita'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/1a890d50b8940616-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Sansita'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/63d9ff05d351b9b9-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Sansita'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/7f0240321a3eff5d-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Sansita'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/2e26256c9954d9e9-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face {font-family: 'Sansita Fallback';src: local("Arial");ascent-override: 113.40%;descent-override: 20.01%;line-gap-override: 0.00%;size-adjust: 89.95% }.__className_61cc21 {font-family: 'Sansita', 'Sansita Fallback';font-style: normal }.__variable_61cc21 {--font-sansita: 'Sansita', 'Sansita Fallback' } @font-face { font-family: 'sansitaOne'; src: url(/_next/static/media/85cf42c072b238c8-s.p.ttf) format('truetype'); font-display: swap; font-weight: 400; }@font-face {font-family: 'sansitaOne Fallback';src: local("Arial");ascent-override: 82.38%;descent-override: 23.43%;line-gap-override: 0.00%;size-adjust: 110.11% }.__className_039049 {font-family: 'sansitaOne', 'sansitaOne Fallback';font-weight: 400 }.__variable_039049 {--font-sansita-one: 'sansitaOne', 'sansitaOne Fallback' } /* ========================================================================== * TIER 1 — PRIMITIVES * -------------------------------------------------------------------------- * Raw palettes. These are the ONLY values a theme overrides. * * Nothing in the app should read a primitive directly — components read the * TIER 2 semantic tokens in semantic.css, which map roles onto these. That * indirection is what lets a theme file be ~20 lines instead of ~170. * * To author a theme: override a handful of these in a themes/.css block * and everything downstream follows. See src/theme/registry.ts. * ========================================================================== */ :root { /* ── Accent ────────────────────────────────────────────────────────── * The brand accent (historically "neon"). 500 is the base step. * --am-accent-rgb carries the same colour as a bare channel triple, * because color-mix() cannot produce the rgba(R, G, B, a) form that * glow/shadow rules need. Keep the two in sync. */ --am-accent-50: #fffff6; --am-accent-100: #ffffdb; --am-accent-200: #ffffc1; --am-accent-300: #ffffa8; --am-accent-400: #ffff8f; --am-accent-500: #f1fb76; --am-accent-600: #d6e15d; --am-accent-700: #bcc845; --am-accent-800: #a3b02b; --am-accent-900: #899807; --am-accent-950: #5d6800; --am-accent-rgb: 241, 251, 118; /* ── Neutral ───────────────────────────────────────────────────────── * 950 doubles as the brand black. */ --am-neutral-50: #fafafa; --am-neutral-100: #f2f2f2; --am-neutral-200: #e5e5e5; --am-neutral-300: #d4d4d4; --am-neutral-400: #a3a3a3; --am-neutral-500: #737373; --am-neutral-600: #525252; --am-neutral-700: #404040; --am-neutral-800: #262626; --am-neutral-900: #171717; --am-neutral-950: #040404; /* ── Action (links / CTAs) ───────────────────────────────────────── */ --am-action-500: rgba(30, 94, 241, 1); } /* ========================================================================== * TIER 2 — SEMANTIC TOKENS * -------------------------------------------------------------------------- * Roles mapped onto TIER 1 primitives. This is the layer components are meant * to read. Themes should rarely need to touch it — override primitives instead. * * The LEGACY ALIASES block at the bottom keeps every pre-existing token name * working while call sites migrate. Each alias resolves to a primitive, so the * old names follow a theme exactly like the new ones. Delete an alias once * `grep -rn -- '' src/` returns nothing. * ========================================================================== */ :root { /* ── Component-agnostic roles ─────────────────────────────────────── * Canonical naming for the centralized theme. Values previously hardcoded * in tailwind.config.ts live here so a theme can move them. Keys whose * value already matched an existing token point at that token instead of * being duplicated here. * * NOTE: --am-color-text-body (#303534) and --colors-automint-text-primary * (#1c1c1c) are two different "primary text" values reachable via the * near-identical classes `text-text-automint-text` and `text-automint-text`. * Both are preserved verbatim for now; reconciling them changes pixels on * 48 / 275 call sites respectively and is deliberately not done here. */ --am-color-surface: #ffffff; --am-color-surface-inverse: #191919; --am-color-text-body: #303534; --am-color-text-secondary: #616161; --am-color-text-muted: #6a7282; --am-color-text-disabled: #959595; --am-color-border: #c4c4c4; --am-color-border-subtle: #c9c9c9; --am-color-divider: #ededed; --am-color-success: #00a63e; --am-color-success-text: #008236; --am-color-success-bg: #f0fdf4; --am-color-success-bg-strong: #dcfce7; --am-color-danger-bg: #fef2f2; --am-color-warning: #a65f00; --am-color-warning-bg: #fefce8; --am-color-warning-border: #f1e7dc; --am-color-pending: #ff907a; /* Gradients lifted out of tailwind.config.ts backgroundImage */ --am-gradient-gray: linear-gradient( 121deg, #fafafa 7.01%, rgba(229, 229, 229, 0.7) 27.43%, #fafafa 48.64%, rgba(229, 229, 229, 0.7) 69.46%, #fafafa 90.28% ); --am-gradient-heading: linear-gradient( 305deg, rgba(4, 4, 4, 0.25) -17.92%, #040404 73.26% ); --am-gradient-buyback-card: linear-gradient( 121deg, #fafafa 7.01%, #ededed 31.47%, rgba(229, 229, 229, 0.95) 38.81%, #fff 46.7%, #e5e5e5 79.74%, rgba(239, 239, 239, 0.9) 81.67%, #fafafa 90.28% ); } /* ========================================================================== * LEGACY ALIASES — delete as call sites migrate * -------------------------------------------------------------------------- * These names predate the --am-* convention and are still referenced widely. * They are defined FROM the primitives, so they follow a theme. Migration is * monotonic: `grep -c -- '--colors-automint-' src/` only ever goes down. * ========================================================================== */ :root { /* Brand primitives */ --automint-black: var(--am-neutral-950); --automint-neon: var(--am-accent-500); --automint-neon-rgb: var(--am-accent-rgb); --cta: var(--am-action-500); /* Accent ramp */ --colors-automint-neon-50: var(--am-accent-50); --colors-automint-neon-100: var(--am-accent-100); --colors-automint-neon-200: var(--am-accent-200); --colors-automint-neon-400: var(--am-accent-400); --colors-automint-neon-500: var(--am-accent-500); --colors-automint-neon-600: var(--am-accent-600); --colors-automint-neon-700: var(--am-accent-700); --colors-automint-neon-800: var(--am-accent-800); --colors-automint-neon-900: var(--am-accent-900); --colors-automint-neon-950: var(--am-accent-950); /* Neutral ramp */ --colors-automint-neutral-50: var(--am-neutral-50); --colors-automint-neutral-100: var(--am-neutral-100); --colors-automint-neutral-200: var(--am-neutral-200); --colors-automint-neutral-300: var(--am-neutral-300); --colors-automint-neutral-400: var(--am-neutral-400); --colors-automint-neutral-500: var(--am-neutral-500); --colors-automint-neutral-600: var(--am-neutral-600); --colors-automint-neutral-700: var(--am-neutral-700); --colors-automint-neutral-800: var(--am-neutral-800); --colors-automint-neutral-900: var(--am-neutral-900); --colors-automint-neutral-950: var(--am-neutral-950); } /* ========================================================================== * Remaining legacy tokens, moved out of globals.css * -------------------------------------------------------------------------- * These must live in an imported layer, not in globals.css. @import places * imported rules at the import position — i.e. BEFORE globals.css's own * rules — so a `:root` block in globals.css would out-order the theme files * and silently win on equal specificity. That is exactly how the campaign's * badge/bar gradients reverted to neon once the theme moved to . * ========================================================================== */ :root { --background: #ffffff; --foreground: hsl(0, 0%, 100%); --ineligibility: hsla(35, 100%, 91%, 1); --border-radius: 16px; --border-color: hsl(0, 0%, 77%); --heading: hsla(0, 0%, 20%, 1); --disabled: hsla(0, 0%, 68%, 1); --unsigned: hsla(27, 69%, 49%, 1); --signed: hsla(156, 92%, 28%, 1); --return-window-border: #d08700; --return-window-header-bg: #fff8c4; --control-active-bg: #303030; --divider-fade: #e2e2e2; --banner-pill-bg: rgba(255, 255, 255, 0.1); --banner-pill-text: rgba(255, 255, 255, 0.5); --banner-card-bg: linear-gradient(121deg, #040404 41.59%, #515151 113.83%), #040404; --header-gray: #848484; --footer-text-gray: #6a6a6a; --footer-text-white: #fff; --testimonials-heading: #979797; --featured-card-border: #e9e9e9; --automint-dark-navy: #0a1628; --save-bar-text: #0a7838; --save-bar-bg: #f1fef5; --save-bar-bg-hover: #defce8; --assured-bar-bg: #f8ffa8; --assured-bar-bg-hover: #ffff8f; --automint-onboarding-bg: #f5f5f5; --icon-bg-savings: #e1ea6a; --automint-error: hsla(358, 100%, 38%, 1); --automint-savings: #14ab00; --component-border-radius: 16px; --button-width: 350px; --button-height: 64px; --button-padding-x: 150px; --button-padding-x-icon: 24px; --button-padding-y: 16px; --button-gap: 8px; --button-bg-primary: var(--automint-black); --button-bg-primary-hover: color-mix( in srgb, var(--automint-black) 85%, white ); --button-bg-primary-active: color-mix( in srgb, var(--automint-black) 70%, black ); --button-text-primary: var(--automint-neon); --button-focus-ring: color-mix(in srgb, var(--automint-neon) 65%, white 35%); --button-bg-secondary: color-mix(in srgb, var(--cta) 15%, white 85%); --button-bg-secondary-hover: color-mix(in srgb, var(--cta) 20%, white 80%); --button-bg-secondary-active: color-mix(in srgb, var(--cta) 25%, white 75%); --button-text-secondary: color-mix(in srgb, var(--cta) 70%, white 30%); --button-border-secondary: color-mix(in srgb, var(--cta) 45%, white 55%); --button-bg-tertiary: color-mix(in srgb, var(--cta) 25%, white 75%); --button-bg-tertiary-hover: color-mix(in srgb, var(--cta) 30%, white 70%); --button-bg-tertiary-active: color-mix(in srgb, var(--cta) 35%, white 65%); --button-text-tertiary: color-mix(in srgb, var(--cta) 80%, white 20%); --button-border-tertiary: color-mix(in srgb, var(--cta) 60%, white 40%); --button-bg-ghost: color-mix(in srgb, transparent 85%, var(--cta) 15%); --button-bg-ghost-hover: color-mix(in srgb, transparent 70%, var(--cta) 30%); --button-bg-ghost-active: color-mix(in srgb, transparent 60%, var(--cta) 40%); --button-text-ghost: color-mix(in srgb, var(--cta) 85%, white 15%); --button-bg-destructive: color-mix(in srgb, var(--cta) 45%, black 55%); --button-bg-destructive-hover: color-mix(in srgb, var(--cta) 40%, black 60%); --button-bg-destructive-active: color-mix(in srgb, var(--cta) 35%, black 65%); --button-text-destructive: color-mix(in srgb, white 95%, var(--cta) 5%); --button-text-outline: color-mix(in srgb, var(--cta) 75%, white 25%); --button-border-outline: color-mix(in srgb, var(--cta) 55%, white 45%); --button-border-outline-hover: color-mix(in srgb, var(--cta) 60%, white 40%); --button-border-outline-active: color-mix(in srgb, var(--cta) 65%, white 35%); --button-text-link: var(--automint-black); --button-text-link-hover: color-mix( in srgb, var(--automint-black) 85%, var(--automint-neon) 15% ); --automint-font-family-body: var( --typography-family-body, var(--font-lexend), Lexend, sans-serif ); --automint-font-size-sm: var(--typography-size-14, 14px); --automint-font-line-height-sm: 150%; --automint-font-weight-regular: 400; /* Automint Text Colors */ --colors-automint-text-primary: #1c1c1c; /* Onboarding specific */ --automint-onboarding-subtitle-dark: #a8a29e; --automint-onboarding-placeholder-dark: #6b6b6b; --automint-onboarding-sso-bg-dark: #1c1917; --automint-onboarding-sso-border-dark: #292524; --automint-onboarding-focus-border-dark: #57534e; --automint-onboarding-disabled-bg: #3f3f46; --automint-onboarding-disabled-text: #71717a; --automint-onboarding-listbox-hover-light: #f5f5f4; --automint-onboarding-dotted-line: #e7e5e4; --automint-onboarding-consent-text-dark: #d6d3d1; /* Semantic error/success */ --automint-error-text-light: #dc2626; --automint-error-text-dark: #f87171; --automint-error-bg-dark: #7f1d1d; --automint-success-text-light: #15803d; --automint-success-bg-light: #f0fdf4; --automint-success-text-dark: #86efac; --automint-success-bg-dark: #14532d; --automint-success-cell-bg: #c4ffbc; --automint-bar-gradient: linear-gradient( 67deg, #f1fb76 18.97%, #44c6fa 286.33% ); --automint-perk-card-bg: linear-gradient( 121deg, #121212 44.45%, #515151 122.67% ); --automint-perk-box-bg: #878787; --automint-perk-strikethrough: #878787; --automint-muted-gray: #a1a1a1; --automint-perk-ribbon-bg: #ff0000; --automint-perk-ribbon-strip-bg: #e62020; --automint-perk-ribbon-gradient: linear-gradient( 90deg, #fb2c36 10.66%, #951a20 108.72% ); --automint-badge-new-gradient: linear-gradient( 90deg, #fb2c36 0%, #951a20 100% ); --automint-badge-offer-gradient: linear-gradient( 107deg, #f1fb76 60.46%, #44c6fa 131.9% ); --automint-perk-box-bg-gradient: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 92.11% ); --automint-perk-box-bg-gradient-inverse: linear-gradient( 0deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 92.11% ); } /* ========================================================================== * TIER 3 — COMPONENT CLASSES * -------------------------------------------------------------------------- * Stable, theme-agnostic class names for surfaces whose appearance differs * per theme. These declare the DEFAULT (automint) look; each theme file * overrides them under its own `[data-theme]` selector. * * This is what replaces the old compile-time `lt(on, off)` class swapping: * the markup now always carries one class and CSS decides what it means, so * a theme change needs no rebuild and no component edit. * ========================================================================== */ /* Header / bottom-nav ground. */ .am-chrome { background-color: var(--am-neutral-950); } /* Footer: an outer ground (visible outside the rounded top corners) and the * rounded card itself. */ .am-footer-outer { background-color: var(--am-neutral-950); } .am-footer-ground { background-color: var(--am-neutral-950); } /* Accent-outlined control (header login pill, profile avatar). */ .am-accent-outline { background-color: var(--am-neutral-950); border: 1.5px solid var(--am-accent-500); } /* Text in the accent colour. */ .am-accent-text { color: var(--am-accent-500); } /* Solid accent fill (active nav pill, banner CTAs, popup body). */ .am-accent-fill { background-color: var(--am-accent-500); } /* Highlighter sweep behind display text. */ .am-highlight { background-image: linear-gradient( transparent 60%, var(--am-accent-500) 60%, var(--am-accent-500) 95%, transparent 95% ); } /* A full-bleed band on the page ground. Themes that paint their own hero * wash make this transparent so the wash shows through. */ .am-band { background-color: var(--am-color-surface); } /* Hero bloom host. The wash itself is a theme concern, so the default is * nothing; a theme adds it via ::before. The element only needs to be a * positioning context. */ .am-hero-bloom { position: relative; } /* Category tiles and certification badges ship artwork with a background * baked in. Themes whose ground is not plain white/black blend it away. */ .am-category-icon { /* no blending needed on the default white ground */ } .am-cert-badge { /* no blending needed on the default black ground */ } /* Decorations that only some themes draw. Kept in the markup unconditionally * and hidden by default, so no component needs to know the active theme. */ .am-chrome-hairline, .am-footer-edge, .am-footer-bloom { display: none; } /* Corner glows on the promo banner slides. Present in every theme, so these * carry a real default rather than being hidden. */ .am-slide-glow-br { background: radial-gradient( ellipse at bottom right, rgba(var(--am-accent-rgb), 0.18), rgba(var(--am-accent-rgb), 0.07) 40%, transparent 70% ); } .am-slide-glow-tl { background: radial-gradient( ellipse at top left, rgba(var(--am-accent-rgb), 0.18), rgba(var(--am-accent-rgb), 0.07) 40%, transparent 70% ); } /* ========================================================================== * THEME — launch (iPhone 18 campaign) * -------------------------------------------------------------------------- * Activated by [data-theme="launch"] on , set from src/theme/registry.ts. * * The override block only touches TIER 1 primitives plus a few tier-3 * component tokens. Everything else follows automatically through the * semantic layer, which is why this file is short. * ========================================================================== */ :root { --launch-gradient: linear-gradient( 128deg, #a85a70 6.7%, #ddbcc5 51.61%, #f3ecec 98.37% ); --launch-gradient-reverse: linear-gradient( 308deg, #a85a70 6.7%, #ddbcc5 51.61%, #f3ecec 98.37% ); /* The brand sweep taken down to chrome darkness. Runs at 308deg — the * mirror of the 128deg brand angle — so the saturated end lands on the * right. Dark enough for white body text, saturated enough to read as * the launch palette rather than as black. */ --launch-gradient-dark: linear-gradient( 308deg, #5c2334 6.7%, #402530 51.61%, #1e1618 98.37% ); /* Same sweep as above but lifted — the header carries the bolder, more * visible read; the footer stays the quieter ground beneath the page. */ --launch-gradient-dark-bold: linear-gradient( 308deg, #7a2e44 6.7%, #55303e 51.61%, #2c2025 98.37% ); --launch-rose-deep: #a85a70; --launch-rose: #ddbcc5; --launch-blush: #f3ecec; /* Sits on top of the gradient — the blush end is too light for white text */ --launch-ink: #2d1218; } [data-theme="launch"] { --am-accent-rgb: 221, 188, 197; --am-accent-950: #43181f; --am-accent-900: #5f2530; --am-accent-800: #7e3746; --am-accent-700: #a85a70; --am-accent-600: #c58d9c; --am-accent-500: #ddbcc5; --am-accent-400: #e8cfd5; --am-accent-200: #f3ecec; --am-accent-100: #f9f4f4; --am-accent-50: #fdfafa; --footer-text-gray: #9d888e; /* Header controls (toggle pill, eligibility trigger, back button) read as * neutral-grey boxes against the wine ground — warm them to match. */ --am-neutral-800: #3a262d; --assured-bar-bg: #f7ecef; --assured-bar-bg-hover: #efdbe1; --icon-bg-savings: var(--launch-rose); --button-text-primary: var(--launch-blush); --button-focus-ring: color-mix(in srgb, var(--launch-rose) 65%, white 35%); /* Composite gradients that hard-code the neon yellow get relaid too */ --automint-bar-gradient: var(--launch-gradient); /* Kept in the light half of the ramp — this badge carries black label text */ --automint-badge-offer-gradient: linear-gradient( 107deg, #ddbcc5 35%, #f3ecec 100% ); } /* Fills — the gradient itself, for surfaces large enough to show the sweep */ .bg-launch-gradient { background-image: var(--launch-gradient); color: var(--launch-ink); } .bg-launch-gradient-reverse { background-image: var(--launch-gradient-reverse); color: var(--launch-ink); } /* Darkened sweep — the footer ground */ .bg-launch-dark { background-color: #1e1618; background-image: var(--launch-gradient-dark); } /* Bolder darkened sweep — the header/nav chrome */ .bg-launch-dark-bold { background-color: #2c2025; background-image: var(--launch-gradient-dark-bold); } /* Text clipped to the gradient — only readable at display sizes on dark */ .text-launch-gradient { background-image: var(--launch-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 1.5px gradient ring with a transparent interior, so whatever ground the * element sits on shows through unchanged — no colour to keep in sync when * the chrome gradient is retuned. Same mask trick as .launch-edge. */ .launch-ring { position: relative; } .launch-ring::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--launch-gradient); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* Highlighter sweep behind display text — replaces the flat neon marker */ .launch-highlight { background-image: var(--launch-gradient); background-repeat: no-repeat; background-size: 100% 38%; background-position: 0 92%; padding-inline: 0.12em; } /* Hairline that separates the black chrome from the page */ .launch-hairline { background-image: var(--launch-gradient); height: 2px; } /* Card surface tuned for the launch bloom. Pure #fff with a neutral grey * hairline punches a hole in the rose ground; this is a warm off-white with a * rose-tinted border and a shadow carrying the same hue, so panels read as * sitting on the wash rather than pasted over it. * * Deliberately scoped under .launch-theme, and it supplies its own border * width: the cards that carry this class (Details, SelectionSummary) are also * rendered on unthemed routes like /subscribe, which must keep their plain * white-on-white treatment. */ [data-theme="launch"] .launch-card { /* Translucent rather than opaque: the bloom reads straight through, so the * panel is tonally the same material as the page instead of a white block * laid on top of it. * * Do NOT reintroduce a backdrop blur here. It opens a stacking context, * which traps the variant selector's `z-50` dropdown inside the card and * lets the accessories section paint over it. The translucent background * alone produces the intended look; the blur added nothing visible over a * smooth gradient. */ background-color: rgba(255, 255, 255, 0.38); border: 1px solid rgba(168, 90, 112, 0.18); box-shadow: 0 1px 2px rgba(74, 28, 40, 0.03), 0 14px 36px -16px rgba(74, 28, 40, 0.18); } /* Layout wrappers that merely happen to paint white — they are not cards, so * inside the theme they drop back to the page ground entirely. */ .launch-theme .launch-plain, [data-theme="launch"] .launch-card-well { background-color: transparent; } /* Soft bloom of launch colour bleeding down from the top of the page. Two * layers: a rose glow centred under the header, over a blush wash that * resolves to fully transparent so it meets the white page without a seam. */ .launch-bloom { background: radial-gradient( 110% 105% at 50% 0%, rgba(168, 90, 112, 0.42) 0%, rgba(214, 140, 163, 0.28) 38%, rgba(221, 188, 197, 0) 82% ), linear-gradient( to bottom, rgba(228, 166, 184, 0.62) 0%, rgba(236, 196, 208, 0.3) 46%, rgba(243, 236, 236, 0) 92% ); } /* Gradient outline that respects border-radius — mask out the inner box so * only the ring is painted. Used on the footer's rounded top edge. */ .launch-edge { padding: 2px; background: var(--launch-gradient); opacity: 0.55; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* Footer wordmark — the stroke carries the launch sweep diagonally while this * mask keeps the old behaviour of dissolving into the black floor. */ .launch-wordmark { -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0.18) 100% ); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0.18) 100% ); } /* ========================================================================== * >>> LAUNCH THEME END <<< * ========================================================================== */ /* ========================================================================== * Component-layer overrides (tier 3) * -------------------------------------------------------------------------- * The stable classes in components.css declare the default look; these restate * them for the campaign. Markup carries one class either way — no compile-time * class swapping, so switching themes needs no rebuild. * ========================================================================== */ [data-theme="launch"] .am-chrome { background-color: #2c2025; background-image: var(--launch-gradient-dark-bold); } [data-theme="launch"] .am-footer-outer { background-color: var(--am-color-surface); } [data-theme="launch"] .am-footer-ground { background-color: #1e1618; background-image: var(--launch-gradient-dark); } /* Gradient ring with a transparent interior, so whatever ground the element * sits on shows through. */ [data-theme="launch"] .am-accent-outline { position: relative; background-color: transparent; border: 0; } [data-theme="launch"] .am-accent-outline::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--launch-gradient); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* Text clipped to the gradient — only legible at display sizes on dark. */ [data-theme="launch"] .am-accent-text { background-image: var(--launch-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="launch"] .am-accent-fill { background-color: transparent; background-image: var(--launch-gradient); color: var(--launch-ink); } [data-theme="launch"] .am-highlight { background-image: var(--launch-gradient); background-repeat: no-repeat; background-size: 100% 38%; background-position: 0 92%; padding-inline: 0.12em; } /* Artwork with a baked-in background: multiply drops white into the rose * ground, screen drops black into the wine footer. */ [data-theme="launch"] .am-category-icon { mix-blend-mode: multiply; } [data-theme="launch"] .am-cert-badge { mix-blend-mode: screen; } /* Decorations this theme draws (hidden by default in components.css). */ [data-theme="launch"] .am-chrome-hairline { display: block; background-image: var(--launch-gradient); height: 2px; } [data-theme="launch"] .am-footer-edge { display: block; padding: 2px; background: var(--launch-gradient); opacity: 0.55; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } [data-theme="launch"] .am-footer-bloom { display: block; background: radial-gradient( 90% 100% at 50% 0%, rgba(221, 188, 197, 0.16) 0%, rgba(168, 90, 112, 0.1) 45%, rgba(4, 4, 4, 0) 85% ); } /* Corner glows: the campaign uses a deeper rose than a flat accent tint. */ [data-theme="launch"] .am-slide-glow-br { background: radial-gradient( ellipse at bottom right, rgba(221, 188, 197, 0.22), rgba(168, 90, 112, 0.09) 40%, transparent 70% ); } [data-theme="launch"] .am-slide-glow-tl { background: radial-gradient( ellipse at top left, rgba(221, 188, 197, 0.22), rgba(168, 90, 112, 0.09) 40%, transparent 70% ); } /* ========================================================================== * THEME — diwali (ANNOTATED REFERENCE — copy this file to start a theme) * ========================================================================== * * HOW THIS WORKS, IN ONE SENTENCE: * you set a handful of raw colours here, and every button, badge, border and * background in the app re-colours itself, because nothing in the app hardcodes * a colour any more — it all points back at these. * * YOU ONLY EVER CHANGE COLOURS IN THIS FILE. Never edit a component. * * The "usages" counts below are real — measured across the codebase — so you * can see which colours are load-bearing and which barely matter. * ========================================================================== */ [data-theme="diwali"] { /* ── 1. THE BRAND COLOUR ────────────────────────────────────────────── * By far the most visible thing you control. ~182 places. * * You see it on: the highlight behind "40% on devices", the Login button * outline and text, the active tab pill in the bottom nav, the "Check your * eligibility" popup, the "4 OFFER" badge, banner CTA buttons, and the text * on every black button. * * 500 is the real brand colour. The others are lighter/darker versions of * it — 50 is nearly white, 950 is nearly black. If you only have one brand * colour, pick 500 first and shade the rest around it. */ --am-accent-50: #fff8e6; /* faintest tint — subtle backgrounds */ --am-accent-100: #ffeec2; --am-accent-200: #ffe199; /* pale pills, soft badges */ --am-accent-300: #ffd470; --am-accent-400: #ffc347; --am-accent-500: #ffb020; /* ★ THE brand colour */ --am-accent-600: #e2930f; --am-accent-700: #b87407; --am-accent-800: #8c5704; --am-accent-900: #5e3a02; --am-accent-950: #2f1d01; /* deepest shade */ /* Same colour as 500, written as plain numbers. Needed for soft glows and * shadows, which have to mix in transparency. If you change 500, change * this to match or glows will still be the old colour. */ --am-accent-rgb: 255, 176, 32; /* ── 2. THE DARK / GROUND COLOUR ────────────────────────────────────── * The single most-used colour in the app. ~430 places. * * You see it on: the header bar, the footer, the mobile bottom nav, every * black button, and most dark text. * * This is what makes a theme feel different at a glance. Ours is near-black; * here it is a deep aubergine. */ --am-neutral-950: #1a0f2e; /* header / footer / nav / dark buttons */ --am-neutral-900: #2a1a45; /* slightly lifted dark surfaces */ --am-neutral-800: #3b2760; /* inset controls: the Devices/Cars toggle pill, * the eligibility chip in the header */ /* ── 3. GREYS ───────────────────────────────────────────────────────── * Mostly theme-neutral. Leave them out unless your theme is tinted and * plain grey looks wrong against it (ours warms 800 for that reason). * 600 (~16 uses) mid-grey text * 500 (~102 uses) secondary / muted body text * 200 (~41 uses) borders, dividers, light fills * 50 (~1 use) barely used * ------------------------------------------------------------------- */ /* ── 4. LINK / ACTION COLOUR ────────────────────────────────────────── * Links and non-brand call-to-action accents (~8 places). Small reach, but * it clashes badly if you leave it blue under a warm theme. */ --am-action-500: #c2410c; /* ── 5. PAGE BACKGROUND ─────────────────────────────────────────────── * The ground behind every page. Default is white. Uncomment to tint it — * be careful, product photos are shot on white and will show edges. * --am-color-surface: #fffaf2; * ------------------------------------------------------------------- */ } /* ========================================================================== * OPTIONAL — special effects * -------------------------------------------------------------------------- * Everything above is just colours. If your campaign wants gradients, glows or * a tinted hero wash like the iPhone 18 one, those are extra rules. Copy the * "Component-layer overrides" section at the bottom of themes/launch.css and * adapt it. You do not need any of this for a working theme. * ========================================================================== */ /* ========================================================================== * THEME — qa-garish (VERIFICATION ONLY, never ship as a default) * -------------------------------------------------------------------------- * Overrides ONLY tier-1 primitives, to deliberately wrong values. * * The assertion this enables: under this theme, no brand colour may appear on * screen. Any surviving neon (#F1FB76) or brand black (#040404) pixel is, by * construction, either an un-tokenized literal or an asset with colour baked * in — and crucially it is *visible*, which catches things no grep can see: * raster assets, CMS artwork, third-party widgets. * * Expect failures. The list of what still shows through is the prioritized * backlog for finishing the migration. * ========================================================================== */ [data-theme="qa-garish"] { --am-accent-50: #ffe6ff; --am-accent-100: #ffccff; --am-accent-200: #ffb3ff; --am-accent-300: #ff99ff; --am-accent-400: #ff66ff; --am-accent-500: #ff00ff; --am-accent-600: #d600d6; --am-accent-700: #ad00ad; --am-accent-800: #850085; --am-accent-900: #5c005c; --am-accent-950: #330033; --am-accent-rgb: 255, 0, 255; --am-neutral-50: #e6ffe6; --am-neutral-100: #ccffcc; --am-neutral-200: #99ff99; --am-neutral-300: #66ff66; --am-neutral-400: #33cc33; --am-neutral-500: #00aa00; --am-neutral-600: #008800; --am-neutral-700: #006600; --am-neutral-800: #004400; --am-neutral-900: #002200; --am-neutral-950: #001a00; --am-action-500: #ff6600; --am-color-surface: #fff0f5; } /*# sourceMappingURL=1cccfc01f813c9ff.css.map*/