/* ========================================================================= SPORTS PERFORMANCE CEO — BRAND TOKENS Generated artifact. Source of truth is ./DESIGN.md — do not hand-edit. Business coaching for sports performance gym owners: coach -> CEO across Systems, Marketing, Retention, Profit. ONE accent (#0094ff, sampled from the logo) on TWO equal canvases. Light and dark are both first-class defaults, not a theme and its inverse. USAGE Default is light. For dark, set data-theme="dark" on or any subtree, or let prefers-color-scheme decide (both are wired below). FONTS Norwester, Intro Rust, Avenir are LOCAL files. Working copies live at clients/Sports Performance CEO/projects/scaling-kit/app/fonts/. Cormorant Garamond + JetBrains Mono are self-hosted here (google-latin.css). ========================================================================= */ /* PROJECT-LOCAL COPY. The shared kit at brand-kits/sports-performance-ceo/ still @imports these two families from Google. This deployed copy does not: the faces are self-hosted alongside, so the page makes ZERO third-party requests. Edit the shared kit, not this file, for changes that should reach other pages. */ @import url('./google-latin.css'); /* Adjust these paths to wherever the local faces are mounted. */ @font-face { font-family: 'Norwester'; src: url('./fonts/Norwester.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Intro Rust'; src: url('./fonts/IntroRust-Base.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('./fonts/Avenir-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('./fonts/Avenir-Heavy.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ========================= BRAND PRIMITIVES Sampled from the logo files. #0094ff verified identical across the hexagon, the lockup, and the cover asset. ========================= */ --spc-blue: #0094ff; --spc-black: #000000; --spc-white: #ffffff; --spc-off-white: #f0f1f3; /* ========================= AZURE RAMP. The one accent, in eleven steps. ========================= */ --blue-50: #e6f5ff; --blue-100: #cceaff; --blue-200: #99d5ff; --blue-300: #66bfff; --blue-400: #33aaff; /* accent on dark: one step up for contrast */ --blue-500: #0094ff; /* PRIMARY ACCENT */ --blue-600: #0077db; /* hover */ --blue-700: #005fb0; /* pressed */ --blue-800: #004788; --blue-900: #00305c; --blue-950: #001b33; /* ========================= NEUTRAL RAMP. Cool grays, fourteen steps, serves both canvases. ========================= */ --n-0: #ffffff; --n-50: #f7f8fa; --n-100: #f0f1f3; --n-150: #e7e9ec; --n-200: #d8dbe0; --n-300: #bcc0c8; --n-400: #9094a0; --n-500: #62656b; --n-600: #474a50; --n-700: #2d2f35; --n-800: #1a1c20; --n-850: #121316; --n-900: #08090b; --n-950: #000000; /* ========================= SEMANTIC STATUS. Brand-neutral: status, not identity. ========================= */ --green-600: #0f8a5f; --green-500: #12a06e; --green-100: #d8f3e7; --amber-600: #c47d10; --amber-500: #e8a12b; --amber-100: #fdefce; --red-600: #cc2f37; --red-500: #e5484d; --red-100: #fbe0e1; /* ========================= TYPE FAMILIES. Five faces, one per rank. Never collapse the stack. ========================= */ --font-title: 'Norwester', 'Oswald', sans-serif; --font-heading: 'Intro Rust', 'Archivo', sans-serif; --font-subtitle: 'Cormorant Garamond', Georgia, serif; --font-body: 'Avenir', 'Mulish', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ========================= TYPE SCALE ========================= */ --fs-title: clamp(40px, 6vw, 76px); --fs-heading: clamp(26px, 3.4vw, 40px); --fs-subtitle: 22px; --fs-body: 17px; --fs-mono: 13px; --lh-title: 1.02; --lh-heading: 1.15; --lh-subtitle: 1.35; --lh-body: 1.6; --ls-title: 0.01em; --ls-mono: 0.04em; /* ========================= SPACING + LAYOUT ========================= */ --gutter: clamp(1.25rem, 4vw, 4rem); --section-y: clamp(4rem, 8vw, 8rem); --container-max: 1240px; --container-narrow: 760px; /* the reading column. Long-form brand. */ /* ========================= RADII. Rounded and approachable — deliberately NOT the squared-off athletic look of the gyms this brand's customers run. ========================= */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --bw-base: 1.5px; --bw-strong: 2px; /* ========================= ELEVATION. Blue-tinted, never neutral black. ========================= */ --shadow-sm: 0 1px 3px rgba(0,30,60,0.09), 0 1px 2px rgba(0,30,60,0.06); --shadow-md: 0 6px 16px -4px rgba(0,30,60,0.14), 0 2px 6px -2px rgba(0,30,60,0.09); --shadow-lg: 0 18px 40px -12px rgba(0,25,55,0.22), 0 6px 14px -8px rgba(0,25,55,0.14); --shadow-xl: 0 32px 64px -16px rgba(0,15,35,0.36); --shadow-focus: 0 0 0 3px rgba(0,148,255,0.35); /* identical both polarities */ /* ========================= MOTION ========================= */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* ========================================================================= CANVAS: LIGHT (default) ========================================================================= */ :root, [data-theme='light'] { --bg-page: var(--n-0); --bg-subtle: var(--n-50); --surface-1: #ffffff; --surface-2: var(--n-50); --surface-3: var(--n-100); --surface-inverse: var(--n-950); --border: var(--n-200); --border-strong: var(--n-300); --text-strong: var(--n-900); --text-body: var(--n-700); --text-muted: var(--n-500); --text-inverse:var(--n-0); --text-on-accent: #ffffff; --primary: var(--spc-black); --primary-hover: var(--n-800); --primary-press: var(--n-950); --text-on-primary: var(--spc-white); --accent: var(--blue-500); --accent-hover:var(--blue-600); --accent-press:var(--blue-700); --accent-soft: var(--blue-50); --link: var(--blue-600); --focus-ring: var(--blue-500); --success: var(--green-600); --success-soft: var(--green-100); --warning: var(--amber-600); --warning-soft: var(--amber-100); --danger: var(--red-600); --danger-soft: var(--red-100); --elevation-card: var(--shadow-sm); --elevation-card-hover: var(--shadow-md); } /* ========================================================================= CANVAS: DARK — a first-class default, not an inversion. Matches the marketing treatment: pure black page, white display type, azure accent. Depth comes from the neutral ramp, NOT bigger shadows. ========================================================================= */ [data-theme='dark'] { --bg-page: var(--n-950); /* pure black, as on the cover */ --bg-subtle: var(--n-900); --surface-1: var(--n-850); --surface-2: var(--n-800); --surface-3: var(--n-700); --surface-inverse: var(--n-0); --border: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.24); --text-strong: var(--spc-white); --text-body: var(--spc-off-white); --text-muted: var(--n-400); --text-inverse:var(--n-950); --text-on-accent: #ffffff; /* Primary inverts: white fill, black text. */ --primary: var(--spc-white); --primary-hover: var(--n-100); --primary-press: var(--n-200); --text-on-primary: var(--spc-black); /* Accent steps one rung lighter so small text clears contrast on black. */ --accent: var(--blue-500); --accent-hover:var(--blue-400); --accent-press:var(--blue-600); --accent-soft: var(--blue-950); --link: var(--blue-400); --focus-ring: var(--blue-500); --success: var(--green-500); --success-soft: #0a2e21; --warning: var(--amber-500); --warning-soft: #33260a; --danger: var(--red-500); --danger-soft: #331315; /* Shadows are near-invisible on black. Use tone instead. */ --elevation-card: none; --elevation-card-hover: none; } /* Respect the OS preference unless an explicit data-theme overrides it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg-page: var(--n-950); --bg-subtle: var(--n-900); --surface-1: var(--n-850); --surface-2: var(--n-800); --surface-3: var(--n-700); --surface-inverse: var(--n-0); --border: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.24); --text-strong: var(--spc-white); --text-body: var(--spc-off-white); --text-muted: var(--n-400); --text-inverse: var(--n-950); --primary: var(--spc-white); --primary-hover: var(--n-100); --primary-press: var(--n-200); --text-on-primary: var(--spc-black); --accent-hover: var(--blue-400); --accent-soft: var(--blue-950); --link: var(--blue-400); --elevation-card: none; --elevation-card-hover: none; } } /* ========================================================================= BASE ========================================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* ========================================================================= TYPE. Five faces, one per rank. ========================================================================= */ .spc-title { font-family: var(--font-title); font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); text-transform: uppercase; color: var(--text-strong); } .spc-heading { font-family: var(--font-heading); font-size: var(--fs-heading); line-height: var(--lh-heading); color: var(--text-strong); } /* The one serif moment. At most once per screen. */ .spc-subtitle { font-family: var(--font-subtitle); font-size: var(--fs-subtitle); line-height: var(--lh-subtitle); color: var(--text-muted); } .spc-mono { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--text-muted); } .spc-mono--accent { color: var(--accent); } /* The emphasis word inside a title, as in "FROM COACH TO ". */ .spc-title em, .spc-heading em { color: var(--accent); font-style: normal; } p { max-width: var(--container-narrow); } /* The four pillars: Systems · Marketing · Retention · Profit */ .spc-pillars { font-family: var(--font-title); text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.02em; } .spc-pillars > * + *::before { content: " · "; opacity: 0.6; } /* ========================================================================= COMPONENTS ========================================================================= */ .spc-btn-primary { background: var(--primary); color: var(--text-on-primary); font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 14px 28px; border: none; border-radius: var(--radius-md); cursor: pointer; transition: background var(--dur-base) var(--ease-out); } .spc-btn-primary:hover { background: var(--primary-hover); } /* Reserved for the single most important action on a screen. */ .spc-btn-accent { background: var(--accent); color: var(--text-on-accent); font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 14px 28px; border: none; border-radius: var(--radius-md); cursor: pointer; transition: background var(--dur-base) var(--ease-out); } .spc-btn-accent:hover { background: var(--accent-hover); } .spc-btn-accent:active { background: var(--accent-press); } .spc-card { background: var(--surface-1); color: var(--text-body); border: var(--bw-base) solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--elevation-card); transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .spc-card:hover { box-shadow: var(--elevation-card-hover); border-color: var(--border-strong); } .spc-input { background: var(--surface-1); color: var(--text-strong); border: var(--bw-base) solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--font-body); font-size: var(--fs-body); width: 100%; } .spc-input:focus-visible { border-color: var(--accent); } /* LOGO ON DARK. The logo always keeps its white background — a deliberate brand decision (a vector/reversed version broke the mark, so it was rejected). PREFERRED: use assets/logo/spc-hexagon-plate.png directly. Its white field is already trimmed to a hexagon with transparent corners, so it needs no wrapper and reads as intentional on black. */ .spc-logo-hex { display: inline-block; } .spc-logo-hex img { display: block; height: auto; } /* FALLBACK: for the square-background assets (the lockup), wrap in a plate. */ .spc-logo-plate { background: var(--spc-white); border-radius: var(--radius-lg); padding: 12px; display: inline-flex; } /* ========================================================================= LAYOUT ========================================================================= */ .spc-wrap { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); } .spc-wrap--narrow { max-width: var(--container-narrow); } .spc-section { padding-block: var(--section-y); } /* ========================================================================= ACCESSIBILITY ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .spc-btn-primary, .spc-btn-accent, .spc-card { transition: none; } }