/* ============================================================ GENERATED — do not hand-edit. Composed by scripts/sync-design.mjs from: clients/next-level/theme.css (the look - this IS the brand) system/core.css (the structure) Edit those, then re-run: node scripts/sync-design.mjs ============================================================ */ /* ============================================================ NEXT LEVEL TRAINING ACADEMY - layer 3 of the cascade (loads LAST, wins). brand:"custom" - this file IS their brand. Round 3 (Zoran: "this is ugly, resize the logo, font still way off, use ALL the portal assets, more premium, more modern animation"): - Two-tier type system now, not one font doing both jobs. Electrolize (round 2's pick, matched against the real logo) is real but THIN - fine for small technical labels, but it read weak blown up to a 120px+ hero headline, which is very likely what "still way off" meant once the full site was live rather than a small comparison snippet. Split the job: --font-display is now Archivo Black (one weight, 900, genuinely heavy) for hero/section headlines where impact matters. Electrolize is kept as --font-tech, wired via overrides below into eyebrows/nav/pills/stat-labels - the small-detail layer, which is exactly where a thin technical face reads as premium/futuristic instead of flimsy. - Real wordmark (logo-nlta.png, pulled from the portal's own asset storage) is now properly sized in nav/footer - see site.css. - Real facility photos (the "website-import" storage folder) are now used across every page, not just three - hero swapped to the shot that shows the actual wall-mounted NXT LVL branding. - Accent color: red, Zoran's round-1 correction over the scraped yellow/blue guess. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Electrolize&family=Barlow+Semi+Condensed:wght@400;500;600;700&display=swap'); :root { /* ----- BASE COLOR PALETTE ----- */ --red: #E2342A; /* athletic red - the only accent, per Zoran's correction */ --red-lift: #EB4B41; /* hover / raised state */ --red-soft: #F27A73; /* link hover, soft accent text */ --red-glow: rgba(226,52,42,0.32); --red-line: rgba(226,52,42,0.20); --ink: #0A0A0B; /* deepest page surface - matches the logo's black */ --ink-raised: #0D0D0F; /* raised panel surface */ --ink-lift: #151517; /* cards */ --ink-line: #232326; /* hairlines / borders */ --paper: #F6F5F1; /* primary text on dark - matches the logo's white */ --paper-bright: #FFFFFF; --paper-muted: #C9C7C2; /* body copy */ --paper-dim: #98968F; /* secondary copy */ --paper-subtle: #6F6D68; /* captions, placeholders */ /* ----- SEMANTIC ALIASES ----- */ --bg: var(--ink); --bg-deep: #050506; --bg-raised: var(--ink-raised); --surface: var(--ink-lift); --accent: var(--red); --accent-hover: var(--red-lift); --on-accent: var(--paper-bright); /* light text on the red accent - red is too mid-tone for dark text to read clean */ --fg: var(--paper); --fg-muted: var(--paper-muted); --fg-subtle: var(--paper-subtle); --border: var(--ink-line); --border-neutral:var(--ink-line); --border-accent: var(--red-line); /* ----- TYPE ----- */ --font-display: 'Archivo Black', 'Arial Black', sans-serif; --font-tech: 'Electrolize', 'Archivo Narrow', 'Arial Narrow', sans-serif; --font-body: 'Barlow Semi Condensed', -apple-system, 'Helvetica Neue', Helvetica, sans-serif; /* ----- RHYTHM ----- */ --ls-display: -0.01em; --ls-eyebrow: 0.16em; --ls-eyebrow-xl: 0.22em; --radius: 3px; /* ----- SHADOWS ----- */ --shadow-card: 0 24px 60px rgba(0,0,0,0.55); --shadow-cta: 0 8px 26px var(--red-glow); } /* The technical-accent layer: small labels read as premium/futuristic in a thin geometric face; a 120px headline in the same face reads as weak. This is the split - core.css routes .ds-eyebrow through --font-body, so it's overridden here rather than hijacking the body-copy token globally. */ .ds-eyebrow, .nav__link, .pill, .tier__name, .footer__col h4, .card .card__icon, .field label, .ft-day__dow, .ft-slots__head { font-family: var(--font-tech); } /* ============================================================ SYSTEM CORE — structure only, ZERO brand decisions. Layer 1 of the cascade every site is built from: 1. system/core.css structure (this file) 2. brands//theme.css the look (colors, fonts, radius) 3. clients//theme.css local overrides (loads last, wins) Nothing in here names a color, a font family, or a corner radius — those are brand tokens this file CONSUMES via var(). A BAM site and a fully custom academy share every rule below. Edit this + the brand theme, then run: node scripts/sync-design.mjs (regenerate mirrors) node scripts/sync-design.mjs --check (CI guard: fails on drift) ============================================================ */ :root { /* ----- TYPE SCALE (fluid) ----- */ --t-hero: clamp(56px, 9vw, 168px); /* hero display */ --t-display: clamp(48px, 7vw, 120px); /* section display titles */ --t-h1: clamp(40px, 6vw, 86px); --t-h2: clamp(32px, 4vw, 56px); --t-h3: clamp(24px, 2.6vw, 42px); --t-stat: clamp(56px, 8vw, 120px); /* stat numerals */ --t-stat-xl: clamp(120px, 22vw, 360px);/* stats-as-typography */ --t-lede: clamp(17px, 1.4vw, 22px); --t-body: 17px; --t-small: 15px; --t-eyebrow: 12px; /* ----- SPACING / LAYOUT ----- */ --container: 1320px; --container-wide: 1600px; --gutter: clamp(20px, 4vw, 56px); --section-pad: clamp(120px, 18vh, 200px); /* ----- MOTION ----- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --reveal-y: 14px; /* scroll-fade rise distance */ } /* ============================================================ SEMANTIC ELEMENT STYLES — structure of the type system. Every value that carries brand (family, color, spacing feel) resolves from the brand theme's tokens. ============================================================ */ .ds-h1, .ds-h2, .ds-h3, .ds-display, .ds-hero { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.92; letter-spacing: var(--ls-display); color: var(--fg); margin: 0; } .ds-hero { font-size: var(--t-hero); line-height: 0.88; } .ds-display { font-size: var(--t-display); } .ds-h1 { font-size: var(--t-h1); } .ds-h2 { font-size: var(--t-h2); } .ds-h3 { font-size: var(--t-h3); } /* Accent emphasis inside headlines — the signature treatment */ .ds-h1 em, .ds-h2 em, .ds-h3 em, .ds-display em, .ds-hero em { font-family: var(--font-display); font-style: normal; font-weight: 400; color: var(--accent); } .ds-eyebrow { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; } .ds-eyebrow--rule::before { content: ''; width: 32px; height: 1px; background: var(--accent); } /* Blackletter eyebrow (a brand may point --font-blackletter anywhere) */ .ds-eyebrow-adapt { font-family: var(--font-blackletter); font-size: clamp(28px, 3.2vw, 44px); font-weight: 400; color: var(--accent); line-height: 1.1; } .ds-body { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; color: var(--fg-muted); } .ds-lede { font-family: var(--font-body); font-size: var(--t-lede); line-height: 1.6; color: var(--fg-muted); } .ds-stat { font-family: var(--font-display); font-size: var(--t-stat); line-height: 0.9; color: var(--accent); letter-spacing: var(--ls-display); } .ds-label { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); }