/* Cherokee landing-page design tokens (2026-05-27). * * Shared by all 5 landing templates (landing, smart_home_landing, * trades_landing, bigdog_landing, build). Each template picks ONE * --accent-* variable for its hero / CTAs / pill accents; everything * else is uniform across products so the whole site reads as one brand. * * IMPORTANT: this file is the source of truth for landing-page color + * type. Do NOT hardcode hex values inline in landing templates anymore. * If you need a color that isn't here, add it here first. */ :root { /* ── canvas ──────────────────────────────────────────────────────── */ --bg: #040406; /* page background */ --bg-2: #080810; /* slightly raised */ --surface: #0c0c14; /* card body */ --surface-2: #13131e; /* nested card */ --border: #1a1a28; /* hairline */ --border-2: #2a2a3a; /* emphasis hairline */ /* ── text ────────────────────────────────────────────────────────── */ --t-1: #ffffff; /* primary text */ --t-2: #8a8a9e; /* secondary text */ --t-3: #5a5d68; /* tertiary / mono labels */ /* ── product accents (one per landing) ──────────────────────────── */ --accent-solutions: #c8ff00; /* cyan · Cherokee AI Solutions · / */ --accent-home: #c8ff00; /* magenta · Cherokee AI Home · /smart-home */ --accent-trades: #ffaa00; /* amber · Cherokee Trades · /trades */ --accent-bigdog: #44ff88; /* green · BigDog Uptime · /bigdog */ --accent-lab: #c8a8ff; /* violet · XRPL & future lab work · /xrpl, in-the-lab */ /* The current page picks one via local override: * .page-trades { --accent: var(--accent-trades); } * Then every gradient / pill / hover uses var(--accent) and nothing * else. Single source of truth per page. */ --accent: var(--accent-solutions); /* default if nothing overrides */ /* ── type ────────────────────────────────────────────────────────── */ --font-body: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Editorial italic for the founder voice moment — Inter Tight italic * is sufficient; if you ever want a proper serif here, swap in * Crimson Pro or IBM Plex Serif. */ --font-editorial: 'Inter Tight', Georgia, serif; /* ── rhythm ──────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius: 12px; --radius-lg: 18px; /* ── motion ──────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Reduced-motion: kill every transition the landings rely on. The * topographic-line backdrop also stops animating. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── topographic contour-line motif ────────────────────────────────── * A subtle layered SVG-via-CSS pattern that evokes USGS contour lines. * Apply with `class="topo-bg"` on any section or by referencing the * background in your own CSS. Costs ~0KB beyond what's here. */ .topo-bg { background-image: radial-gradient( circle at 50% 50%, transparent 0 18%, color-mix(in srgb, var(--accent) 6%, transparent) 18% 18.5%, transparent 18.5% 30%, color-mix(in srgb, var(--accent) 5%, transparent) 30% 30.5%, transparent 30.5% 42%, color-mix(in srgb, var(--accent) 4%, transparent) 42% 42.5%, transparent 42.5% 54%, color-mix(in srgb, var(--accent) 3%, transparent) 54% 54.5%, transparent 54.5% ); background-size: 600px 600px; background-position: center; background-repeat: no-repeat; } /* ── eyebrow label (canonical) ────────────────────────────────────── * The `/ what we build` label style used across all sections. */ .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } /* ─── Shared clear-glass cards across ALL landings (2026-05-28) ─────── Cherokee's canonical card look: dark frosted glass, thin light border, subtle sheen, layered depth shadow. Applied to the primary content-card classes on every landing so the whole site reads as one material. The dark tint (~70-78%) keeps text readable regardless of whether the card sits over a bright or dark region of the mountain photo behind it. */ .shl-tile, .shl-card, .shl-wedge-tile, .tr-feat, .tr-launch-card, .tr-trust-card, .tr-form-card, .ab-shelf-card, .bd-watch-item, .bd-step, .bd-price-card, .bd-alert{ position: relative; background: rgba(6, 8, 14, 0.26) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 28px 56px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.30); overflow: hidden; } /* Diagonal sheen on shared cards */ .shl-tile::after, .shl-card::after, .shl-wedge-tile::after, .tr-feat::after, .tr-launch-card::after, .tr-trust-card::after, .tr-form-card::after, .ab-shelf-card::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 18%, transparent 42%); mix-blend-mode: screen; opacity: 0.8; } /* Keep card content above the sheen */ .shl-tile > *, .shl-card > *, .shl-wedge-tile > *, .tr-feat > *, .tr-launch-card > *, .tr-trust-card > *, .tr-form-card > *, .ab-shelf-card > *{ position: relative; z-index: 1; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .shl-tile, .shl-card, .shl-wedge-tile, .tr-feat, .tr-launch-card, .tr-trust-card, .tr-form-card, .ab-shelf-card, .bd-watch-item, .bd-step, .bd-price-card, .bd-alert{ background: rgba(8, 10, 16, 0.9) !important; } }