/*
Global stylesheet — single source of truth for the site.
Structure:
1) Reset and base
2) Design tokens (:root) — palette and typography are owned by the
`brand-guidelines` skill. Spacing, radii, shadows, motion, and layout
tokens are owned here.
3) Layout primitives
4) Components (site-wide reusable primitives only — page-specific
styles live with their page builds, not here)
5) Utilities
*/
/* ===== 1) Reset and base ===== */
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 800; /* Barlow Condensed — explicit weight required */
line-height: 1.2;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
}
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ===== 2) Design tokens ===== */
/* Palette and typography are written by the `brand-guidelines` skill from
`build-assets/0-the-brand/tokens.json`. Spacing, radii, shadows, and
transitions are owned here. */
:root {
/* Palette (brand-guidelines) */
--color-bg: #0d0d0d;
--color-surface: #1a1a1a;
--color-surface-soft: #252525;
--color-text: #ffffff;
--color-text-soft: #8a8a8a;
--color-primary: #f5c200;
--color-primary-dark: #d4a800;
--color-primary-light: #3a2f00;
--color-accent: #ff4d6d;
--color-focus: #f5c200;
/* Typography (brand-guidelines) */
--font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
--font-body: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
/* Radii */
--radius-sm: 0.5rem;
--radius-md: 0.875rem;
--radius-lg: 1.25rem;
--radius-pill: 999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(60, 64, 67, 0.12);
--shadow-md: 0 4px 14px rgba(17, 24, 39, 0.08);
--shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);
/* Motion */
--transition-fast: 180ms ease;
--transition-base: 260ms ease;
--transition-slow: 420ms ease;
--easing-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring — pop-in, badges */
--easing-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* material ease-out — reveals, cards */
/* Layout */
--container-max: 72rem;
/* Aesthetic dials — set by `design-system` for Shark Dates.
Direction: sharp / flat / editorial — zero radius, no shadow, strong borders. */
--logo-height: 2.5rem;
--btn-radius: 0;
--card-radius: 0;
--card-shadow: none;
--card-border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
--chip-radius: var(--radius-pill);
}
/* ===== 2b) Keyframes ===== */
/* All durations obey prefers-reduced-motion (collapsed to 0.001ms above). */
@keyframes sd-fade-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes sd-pop-in {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
/* Clip-path wipe — use on headings for an editorial "print reveal" effect */
@keyframes sd-reveal {
from { clip-path: inset(0 100% 0 0); opacity: 0; }
to { clip-path: inset(0 0% 0 0); opacity: 1; }
}
/* Subtle pulsing outline on primary CTAs to draw first-visit attention */
@keyframes sd-cta-pulse {
0%, 100% { outline: 3px solid transparent; outline-offset: 3px; }
50% { outline: 3px solid color-mix(in srgb, var(--color-primary) 50%, transparent); outline-offset: 5px; }
}
/* ===== 3) Layout primitives ===== */
.container {
width: min(100% - 2rem, var(--container-max));
margin-inline: auto;
}
.section {
padding: var(--space-10) 0;
}
.grid {
display: grid;
gap: var(--space-4);
}
.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 600px) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ===== 4) Components ===== */
/* Site header */
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--color-surface);
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.site-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
}
.site-logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* The header logo is an 
— size the image; don't style text.
Adjust --logo-height per brand (logos vary in aspect ratio). */
.site-logo img {
height: var(--logo-height);
width: auto;
}
.site-nav {
display: inline-flex;
align-items: center;
gap: var(--space-4);
}
.site-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* CMS-rendered menus — `{{menu.navigation}}` and `{{menu.footer}}` expand to