/* ============================================================ TEAM DREAM SISTAS — Brand Stylesheet Option C: Athletic direction, water-blue canvas ============================================================ HOW TO USE THIS FILE -------------------- Option 1 — Paste into Squarespace Custom CSS Design → Custom CSS → paste the entire contents below This applies site-wide. Good for building out more pages later. Option 2 — Link from an HTML page Save this file as 'team-dream.css' in the same folder as your HTML, then in add: Option 3 — Inline in a single Squarespace Code Block Wrap the entire contents in and paste at the top of a Code Block on any page. ============================================================ CONTENTS ---------- 1. Design tokens (colors, fonts, spacing) 2. Reset & base 3. Utilities (.container, .btn) 4. Navigation 5. Hero (headline + trailer + CTAs) 6. Stats block 7. Seasons grid 8. Film section (Cannes) 9. Footer 10. Responsive breakpoints ============================================================ */ /* ============================================================ 1. DESIGN TOKENS All colors measured from the official Team Dream logo file. Edit these to change the entire site's palette at once. ============================================================ */ :root { /* BRAND COLORS */ --flame-red: #D93025; /* Primary CTA, urgency, action */ --flame-red-deep: #9B1F17; /* Flame-red hover state */ --wave-blue: #6BB8DC; /* Page canvas, primary background */ --wave-blue-deep: #4596BD; /* Darker band (nav, stats) */ --wave-blue-darker:#2D7499; /* Accent on white cards */ --shield-dark: #0E2936; /* Structural dark, NOT navy blue */ --cream: #F5D888; /* Warm accent, hovers, hierarchy */ --cream-soft: #F5E8C9; /* Optional lighter cream */ /* NEUTRALS */ --paper-white: #FFFFFF; --ink: #0E2936; /* Body text on white surfaces */ /* TYPOGRAPHY */ --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Cormorant Garamond', Georgia, serif; /* LAYOUT */ --gutter: 40px; } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: 14px; line-height: 1.65; color: white; background: var(--wave-blue); font-weight: 400; -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } input { font-family: inherit; } /* ============================================================ 3. UTILITIES ============================================================ */ .container { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1280px; margin: 0 auto; } /* Buttons */ .btn { padding: 11px 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 2px; transition: all 0.25s ease; display: inline-flex; align-items: center; justify-content: center; } .btn-red { background: var(--flame-red); color: white; } .btn-red:hover { background: var(--flame-red-deep); transform: translateY(-1px); } .btn-outline-light { background: transparent; color: white; border: 0.5px solid white; } .btn-outline-light:hover { background: white; color: var(--ink); } .btn-hero { padding: 16px 32px; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; } /* ============================================================ 4. NAVIGATION ============================================================ */ .nav { padding: 18px 0; border-bottom: 0.5px solid rgba(255, 255, 255, 0.22); background: var(--wave-blue-deep); position: sticky; top: 0; z-index: 100; } .nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: flex; align-items: center; gap: 10px; } .logo-roundel { background: white; padding: 4px 6px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; } .logo-name { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .nav-links { display: flex; gap: 26px; font-size: 11px; letter-spacing: 0.2em; font-weight: 500; text-transform: uppercase; } .nav-links a { transition: color 0.2s ease; } .nav-links a:hover { color: var(--cream); } .nav-toggle { display: none; width: 32px; height: 32px; flex-direction: column; justify-content: center; gap: 5px; } .nav-toggle span { display: block; width: 20px; height: 1px; background: white; } /* ============================================================ 5. HERO Headline on the left, Vimeo trailer on the right ============================================================ */ .hero { padding: 100px 0 80px; position: relative; overflow: hidden; } .hero .container { position: relative; z-index: 2; } .hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; overflow: hidden; pointer-events: none; } .hero-photo img { /* NOTE: filter: saturate(0.9) was removed because Squarespace's Less preprocessor conflicts with the native CSS saturate() function. If you want the desaturation back AND your CSS is being served as raw CSS (not through Less), add: filter: saturate(0.9); */ } /* Left-edge fade so the headline stays readable over the video */ .hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #6BB8DC 0%, rgba(107, 184, 220, 0.5) 25%, rgba(107, 184, 220, 0) 60%); pointer-events: none; } /* "Watch trailer" pill sits over the video, clickable */ .hero-trailer-link { position: absolute; bottom: 24px; right: 24px; z-index: 3; pointer-events: auto; display: inline-flex; align-items: center; padding: 10px 16px; background: rgba(14, 41, 54, 0.6); color: white; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; border-radius: 2px; backdrop-filter: blur(6px); border: 0.5px solid rgba(255, 255, 255, 0.3); transition: background 0.25s ease, border-color 0.25s ease; } .hero-trailer-link:hover { background: var(--flame-red); border-color: var(--flame-red); } .hero-watermark { position: absolute; top: 0; right: 0; opacity: 0.22; pointer-events: none; width: 40%; max-width: 500px; aspect-ratio: 1; z-index: 1; } .hero-watermark line { stroke: white; stroke-linecap: round; } .hero-kicker { font-size: 11px; color: var(--cream); letter-spacing: 0.3em; font-weight: 600; text-transform: uppercase; margin-bottom: 22px; } .hero h1 { font-size: clamp(64px, 10vw, 120px); font-weight: 500; line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; color: white; margin-bottom: 28px; } .hero .lede { font-size: 16px; color: rgba(255, 255, 255, 0.92); max-width: 500px; margin-bottom: 40px; line-height: 1.75; font-weight: 400; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } /* ============================================================ 6. STATS Four-number credibility band ============================================================ */ .stats { background: var(--wave-blue-deep); border-top: 0.5px solid rgba(255, 255, 255, 0.25); border-bottom: 0.5px solid rgba(255, 255, 255, 0.25); padding: 48px 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding-right: 24px; border-right: 0.5px solid rgba(255, 255, 255, 0.25); } .stat:nth-child(2), .stat:nth-child(3) { padding-left: 24px; } .stat:last-child { padding-left: 24px; padding-right: 0; border-right: none; } .stat-number { font-size: clamp(42px, 5vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; } .stat-red { color: var(--flame-red); } .stat-cream { color: var(--cream); } .stat-label { font-size: 11px; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; margin-top: 10px; } /* ============================================================ 7. SEASONS Three-card registration block, middle card is the Signature ============================================================ */ .seasons { padding: 56px 0; } .seasons-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; gap: 20px; flex-wrap: wrap; } .seasons-kicker { font-size: 11px; color: white; letter-spacing: 0.3em; font-weight: 600; text-transform: uppercase; } .seasons-link { font-size: 11px; color: white; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; transition: color 0.2s ease; } .seasons-link:hover { color: var(--cream); } .seasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .season-card { background: white; border-radius: 2px; padding: 24px; color: var(--ink); position: relative; transition: transform 0.25s ease; } .season-card:hover { transform: translateY(-3px); } .season-card.signature { box-shadow: 0 0 0 3px var(--shield-dark); } .season-badge { position: absolute; top: -11px; left: 18px; background: var(--shield-dark); color: white; font-size: 10px; letter-spacing: 0.25em; padding: 4px 10px; font-weight: 600; text-transform: uppercase; } .season-no { font-size: 10px; color: var(--flame-red); letter-spacing: 0.3em; font-weight: 600; margin-bottom: 14px; text-transform: uppercase; } .season-no.blue { color: var(--wave-blue-darker); } .season-name { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1; margin-bottom: 8px; } .season-dates { font-size: 11px; color: #666; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; } .season-foot { display: flex; justify-content: space-between; align-items: baseline; border-top: 0.5px solid rgba(14, 41, 54, 0.12); padding-top: 16px; } .season-price { font-size: 26px; font-weight: 500; } .season-seats { font-size: 11px; color: var(--flame-red); letter-spacing: 0.12em; font-weight: 600; text-transform: uppercase; } .season-seats.waitlist { color: #666; } /* ============================================================ 8. FILM — Cannes selection / the documentary ============================================================ */ .film { background: var(--shield-dark); padding: 80px 0; } .film-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; } .laurels { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; } .laurels-text { text-align: center; } .laurels-text .selection { font-size: 11px; color: white; letter-spacing: 0.3em; font-weight: 600; text-transform: uppercase; } .laurels-text .festival { font-size: 11px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.22em; margin-top: 4px; text-transform: uppercase; } .film h2 { font-family: var(--font-serif); font-size: clamp(38px, 5vw, 56px); font-weight: 400; font-style: italic; line-height: 1.02; letter-spacing: -0.02em; color: white; margin-bottom: 20px; } .film .synopsis { font-size: 15px; color: rgba(255, 255, 255, 0.85); line-height: 1.75; max-width: 460px; margin-bottom: 16px; } .film .featuring { font-size: 11px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.18em; margin-bottom: 30px; text-transform: uppercase; } .film-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .film-still { position: relative; aspect-ratio: 16 / 10; border-radius: 2px; overflow: hidden; background: linear-gradient(180deg, #1a3a5c 0%, #0a1828 100%); cursor: pointer; transition: transform 0.4s ease; } .film-still:hover { transform: translateY(-2px); } .film-still .cap-red { position: absolute; top: 40%; left: 38%; width: 24px; height: 16px; border-radius: 50%; background: var(--flame-red); opacity: 0.85; } .film-still .cap-blue { position: absolute; top: 56%; left: 68%; width: 22px; height: 14px; border-radius: 50%; background: var(--wave-blue); opacity: 0.75; } .play-button { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .play-button-inner { width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: 0.5px solid rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; } .film-still:hover .play-button-inner { background: rgba(255, 255, 255, 0.25); transform: scale(1.05); } .film-still .caption { position: absolute; bottom: 16px; left: 18px; font-size: 11px; color: rgba(255, 255, 255, 0.88); letter-spacing: 0.18em; } /* ============================================================ 9. FOOTER ============================================================ */ .footer { background: var(--shield-dark); color: white; border-top: 0.5px solid rgba(255, 255, 255, 0.1); padding: 32px 0; } .footer .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .footer .family { font-size: 11px; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.16em; text-transform: uppercase; } .footer .family span { color: var(--cream); font-weight: 600; letter-spacing: 0.22em; margin-right: 10px; } /* ============================================================ 10. RESPONSIVE ============================================================ */ @media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px 0; } .stat:nth-child(2) { border-right: none; padding-right: 0; padding-left: 24px; } .stat:nth-child(3) { padding-left: 0; padding-right: 24px; border-right: 0.5px solid rgba(255, 255, 255, 0.25); } .seasons-grid { grid-template-columns: 1fr; } .film-grid { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 680px) { :root { --gutter: 22px; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--wave-blue-deep); flex-direction: column; padding: 20px var(--gutter); gap: 16px; border-bottom: 0.5px solid rgba(255, 255, 255, 0.2); } .nav-links.open { display: flex; } .nav-toggle { display: flex; } .stats-grid { grid-template-columns: 1fr 1fr; } .stat { border-right: none !important; padding: 0 !important; } .hero { padding: 60px 0 48px; } .hero-photo { display: none; } .film { padding: 56px 0; } } /* ============================================================ 11. SHARED FOOTER ADDITIONS The Cannes note in the footer + active nav state ============================================================ */ .nav-links a.active { color: var(--cream); } .cannes-note { font-size: 11px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.18em; text-transform: uppercase; } .cannes-note a { color: var(--cream); border-bottom: 0.5px solid rgba(245, 216, 136, 0.4); padding-bottom: 1px; transition: border-color 0.2s ease; } .cannes-note a:hover { border-bottom-color: var(--cream); } /* ============================================================ 12. TRAINING SECTION (homepage + train page) Four pillars on the shield-dark band ============================================================ */ .training { background: var(--shield-dark); color: white; padding: 88px 0; } .training-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 44px; gap: 20px; flex-wrap: wrap; } .training-kicker { font-size: 11px; color: var(--cream); letter-spacing: 0.3em; font-weight: 600; text-transform: uppercase; } .training-intro { font-family: var(--font-serif); font-style: italic; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; color: white; max-width: 540px; font-weight: 400; } .training-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 0.5px solid rgba(255, 255, 255, 0.18); } .pillar { padding: 32px 24px 0 0; border-right: 0.5px solid rgba(255, 255, 255, 0.18); } .pillar:nth-child(2), .pillar:nth-child(3) { padding-left: 24px; padding-right: 24px; } .pillar:last-child { padding-left: 24px; padding-right: 0; border-right: none; } .pillar-icon { width: 28px; height: 28px; color: var(--flame-red); margin-bottom: 20px; } .pillar-name { font-size: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; } .pillar-body { font-size: 13px; color: rgba(255, 255, 255, 0.78); line-height: 1.75; } /* ============================================================ 13. TRAIN PAGE ============================================================ */ .train-hero { padding: 100px 0 80px; background: var(--wave-blue); } .train-hero h1 { font-family: var(--font-serif); font-style: italic; font-size: clamp(50px, 7vw, 80px); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: white; margin-bottom: 24px; } .train-hero .lede { font-size: 17px; color: rgba(255, 255, 255, 0.92); max-width: 640px; line-height: 1.7; } /* Sample week */ .sample-week { background: var(--wave-blue-deep); padding: 64px 0; border-top: 0.5px solid rgba(255, 255, 255, 0.18); } .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 24px; } .day-card { background: rgba(255, 255, 255, 0.06); border: 0.5px solid rgba(255, 255, 255, 0.15); padding: 20px 16px; border-radius: 2px; } .day-card.off { background: transparent; border-style: dashed; } .day-label { font-size: 11px; color: var(--cream); letter-spacing: 0.3em; font-weight: 600; margin-bottom: 12px; } .day-title { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: white; line-height: 1.2; margin-bottom: 6px; } .day-meta { font-size: 11px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.08em; margin-bottom: 12px; } .day-body { font-size: 12px; color: rgba(255, 255, 255, 0.85); line-height: 1.6; } /* Pillars deep (train page) */ .pillars-deep { background: var(--shield-dark); color: white; padding: 88px 0; } .pillar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 72px; } .pillar-row:last-child { margin-bottom: 0; } .pillar-row.reverse { direction: rtl; } .pillar-row.reverse > * { direction: ltr; } .pillar-text h2 { font-family: var(--font-serif); font-style: italic; font-size: clamp(32px, 4vw, 44px); font-weight: 400; line-height: 1.05; margin: 14px 0 18px; color: white; } .pillar-text p { font-size: 15px; color: rgba(255, 255, 255, 0.82); line-height: 1.75; margin-bottom: 12px; } .pillar-text strong { color: var(--cream); font-weight: 600; } .pillar-image { aspect-ratio: 4 / 5; border-radius: 2px; position: relative; } .pillar-image-blue { background: linear-gradient(180deg, #0a1828 0%, #1a3a5c 60%, #2D7499 100%); } .pillar-image-pool { background: repeating-linear-gradient(0deg, #6BB8DC 0px, #6BB8DC 38px, rgba(255,255,255,0.3) 38px, rgba(255,255,255,0.3) 40px); } .pillar-image-lake { background: linear-gradient(180deg, #D4C9B5 0%, #A8CAE0 25%, #6BB8DC 30%, #2D7499 100%); } .pillar-image-warm { background: linear-gradient(180deg, #D9C6A5 0%, #E8D8C0 50%, #F0E4CC 100%); } /* Coaches */ .coaches { background: var(--wave-blue); padding: 72px 0; } .coaches-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; } .coach-card { background: white; padding: 0 0 24px; border-radius: 2px; overflow: hidden; } .coach-portrait { aspect-ratio: 1 / 1; margin-bottom: 20px; } .coach-portrait-1 { background: linear-gradient(135deg, #6BB8DC 0%, #2D7499 100%); } .coach-portrait-2 { background: linear-gradient(135deg, #F5D888 0%, #D93025 100%); } .coach-portrait-3 { background: linear-gradient(135deg, #2D7499 0%, #0E2936 100%); } .coach-name { font-size: 14px; font-weight: 600; letter-spacing: 0.15em; color: var(--ink); padding: 0 24px; margin-bottom: 4px; } .coach-role { font-size: 11px; color: var(--flame-red); letter-spacing: 0.22em; font-weight: 600; padding: 0 24px; margin-bottom: 14px; } .coach-bio { font-size: 13px; line-height: 1.7; color: var(--ink); padding: 0 24px; } /* FAQ */ .faq { background: var(--wave-blue); padding: 64px 0; border-top: 0.5px solid rgba(255, 255, 255, 0.18); } .faq-list { margin-top: 24px; max-width: 800px; } .faq-item { border-top: 0.5px solid rgba(255, 255, 255, 0.25); padding: 18px 0; color: white; } .faq-item:last-child { border-bottom: 0.5px solid rgba(255, 255, 255, 0.25); } .faq-item summary { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: white; cursor: pointer; list-style: none; position: relative; padding-right: 32px; transition: color 0.2s ease; } .faq-item summary:hover { color: var(--cream); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-style: normal; font-family: var(--font-sans); } .faq-item[open] summary::after { content: '−'; } .faq-item p { font-size: 15px; color: rgba(255, 255, 255, 0.85); line-height: 1.75; margin-top: 14px; max-width: 680px; } /* ============================================================ 14. SEASONS PAGE ============================================================ */ .seasons-hero { padding: 100px 0 64px; background: var(--wave-blue); } .seasons-hero h1 { font-family: var(--font-serif); font-style: italic; font-size: clamp(50px, 7vw, 80px); font-weight: 400; line-height: 1; color: white; margin-bottom: 24px; } .seasons-hero .lede { font-size: 17px; color: rgba(255, 255, 255, 0.92); max-width: 580px; line-height: 1.7; } /* Comparison table */ .seasons-table-section { background: var(--wave-blue-deep); padding: 64px 0; border-top: 0.5px solid rgba(255, 255, 255, 0.18); } .seasons-table-wrap { margin-top: 24px; overflow-x: auto; } .seasons-table { width: 100%; border-collapse: collapse; color: white; min-width: 700px; } .seasons-table thead th { text-align: left; font-size: 10px; letter-spacing: 0.25em; font-weight: 600; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); padding: 14px 18px; border-bottom: 0.5px solid rgba(255, 255, 255, 0.3); } .seasons-table tbody td { padding: 22px 18px; border-bottom: 0.5px solid rgba(255, 255, 255, 0.15); vertical-align: top; } .row-season-no { font-size: 10px; color: var(--cream); letter-spacing: 0.25em; font-weight: 600; margin-bottom: 4px; } .row-name { font-size: 18px; font-weight: 500; letter-spacing: 0.04em; color: white; text-transform: uppercase; } .row-name:hover { color: var(--cream); } .row-badge { display: inline-block; margin-left: 8px; font-size: 9px; background: var(--cream); color: var(--shield-dark); padding: 2px 8px; letter-spacing: 0.22em; font-weight: 600; } .row-dates { font-size: 13px; color: white; letter-spacing: 0.08em; margin-bottom: 4px; } .row-weeks { font-size: 11px; color: rgba(255, 255, 255, 0.6); } .row-focus { font-size: 13px; color: rgba(255, 255, 255, 0.85); line-height: 1.5; max-width: 220px; } .row-price { font-size: 20px; font-weight: 500; color: white; } .row-seats { font-size: 11px; color: var(--flame-red); letter-spacing: 0.15em; font-weight: 600; background: white; padding: 4px 10px; border-radius: 2px; } .row-seats.waitlist { color: rgba(255, 255, 255, 0.85); background: transparent; border: 0.5px solid rgba(255, 255, 255, 0.4); } /* Season detail blocks */ .seasons-detail { background: var(--wave-blue); padding: 64px 0; } .season-block { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; background: white; border-radius: 2px; padding: 48px; margin-bottom: 28px; color: var(--ink); } .season-block.featured { box-shadow: 0 0 0 3px var(--shield-dark); } .season-no-big { font-size: 11px; color: var(--flame-red); letter-spacing: 0.3em; font-weight: 600; margin-bottom: 12px; } .season-h { font-family: var(--font-serif); font-style: italic; font-size: clamp(38px, 5vw, 56px); font-weight: 400; line-height: 1; color: var(--shield-dark); margin-bottom: 28px; } .season-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 32px; padding-bottom: 28px; border-bottom: 0.5px solid rgba(14, 41, 54, 0.15); } .season-meta > div { font-size: 14px; color: var(--ink); } .season-meta span { display: block; font-size: 10px; letter-spacing: 0.25em; font-weight: 600; color: var(--flame-red); margin-bottom: 4px; } .season-included { margin-bottom: 28px; } .season-included ul { list-style: none; padding: 0; } .season-included li { font-size: 14px; line-height: 1.75; padding-left: 24px; position: relative; margin-bottom: 6px; } .season-included li::before { content: ''; position: absolute; left: 0; top: 10px; width: 12px; height: 1px; background: var(--flame-red); } .season-best-for p { font-size: 14px; line-height: 1.7; color: var(--ink); font-style: italic; } .season-action { background: var(--wave-blue); color: white; padding: 28px; border-radius: 2px; text-align: center; position: sticky; top: 80px; } .season-badge-big { background: var(--shield-dark); color: white; font-size: 10px; letter-spacing: 0.25em; padding: 4px 12px; display: inline-block; font-weight: 600; margin-bottom: 12px; } .season-price-big { font-size: 56px; font-weight: 500; line-height: 1; color: white; margin: 4px 0 8px; letter-spacing: -0.03em; } .season-seats-big { font-size: 11px; color: var(--cream); letter-spacing: 0.18em; font-weight: 600; } .season-seats-big.waitlist { color: rgba(255, 255, 255, 0.7); } .season-note { font-size: 11px; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin-top: 14px; } .btn-outline-dark { background: transparent; color: white; border: 0.5px solid rgba(255, 255, 255, 0.5); } .btn-outline-dark:hover { background: rgba(255, 255, 255, 0.1); } /* Year Circle */ .year-circle { background: var(--shield-dark); color: white; padding: 80px 0; } .year-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; } .year-circle h2 { font-family: var(--font-serif); font-style: italic; font-size: clamp(38px, 5vw, 56px); font-weight: 400; line-height: 1; color: white; margin: 14px 0 22px; } .year-pitch { font-size: 16px; color: rgba(255, 255, 255, 0.85); line-height: 1.75; max-width: 540px; margin-bottom: 24px; } .year-includes { border-top: 0.5px solid rgba(255, 255, 255, 0.18); padding-top: 18px; } .year-includes p { font-size: 13px; color: white; line-height: 1.7; } .year-action { background: rgba(107, 184, 220, 0.12); border: 0.5px solid rgba(107, 184, 220, 0.4); padding: 32px; text-align: center; } .year-price { font-size: 64px; font-weight: 500; line-height: 1; color: white; letter-spacing: -0.03em; margin-bottom: 8px; } .year-savings { font-size: 11px; color: var(--cream); letter-spacing: 0.2em; font-weight: 600; } /* ============================================================ 15. ABOUT PAGE ============================================================ */ .about-hero { padding: 100px 0 64px; background: var(--wave-blue); } .about-hero h1 { font-family: var(--font-serif); font-style: italic; font-size: clamp(50px, 7vw, 80px); font-weight: 400; line-height: 1; color: white; margin-bottom: 24px; max-width: 800px; } .about-hero .lede { font-size: 17px; color: rgba(255, 255, 255, 0.92); max-width: 640px; line-height: 1.7; } .letter { background: #FAF7F2; padding: 88px 0; color: var(--ink); } .letter-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; max-width: 1000px; } .letter-kicker { font-size: 11px; color: var(--flame-red); letter-spacing: 0.3em; font-weight: 600; text-transform: uppercase; margin-bottom: 14px; } .letter h2 { font-family: var(--font-serif); font-style: italic; font-size: clamp(32px, 4vw, 44px); font-weight: 400; line-height: 1.05; color: var(--shield-dark); margin-bottom: 8px; } .letter-signed { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--flame-red); margin-top: 14px; } .letter-body p { font-size: 16px; line-height: 1.85; color: var(--ink); margin-bottom: 18px; } .letter-body p:first-child::first-letter { font-family: var(--font-serif); font-style: italic; font-size: 60px; float: left; line-height: 0.9; margin-right: 8px; margin-top: 6px; color: var(--flame-red); } .mission { background: var(--shield-dark); color: white; padding: 88px 0; } .mission-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; } .mission h2 { font-family: var(--font-serif); font-style: italic; font-size: clamp(36px, 5vw, 52px); font-weight: 400; line-height: 1.05; color: white; margin-bottom: 18px; } .mission p { font-size: 16px; color: rgba(255, 255, 255, 0.85); line-height: 1.8; margin-bottom: 16px; } .mission strong { color: var(--cream); font-weight: 600; } .mission-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; margin-top: 36px; padding-top: 32px; border-top: 0.5px solid rgba(255, 255, 255, 0.2); } .mission-stat-num { font-family: var(--font-serif); font-style: italic; font-size: 48px; color: var(--cream); line-height: 1; margin-bottom: 6px; } .mission-stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.12em; line-height: 1.5; } .family-section { background: var(--wave-blue); padding: 72px 0; } .family-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; } .family-card { background: rgba(255, 255, 255, 0.08); border: 0.5px solid rgba(255, 255, 255, 0.18); padding: 24px; border-radius: 2px; color: white; } .family-name { font-family: var(--font-serif); font-style: italic; font-size: 22px; margin-bottom: 6px; } .family-tag { font-size: 10px; color: var(--cream); letter-spacing: 0.25em; font-weight: 600; margin-bottom: 12px; } .family-card p { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); } .film-about { background: #FAF7F2; color: var(--ink); padding: 88px 0; } .film-about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; } .film-about-laurels { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .film-about-laurels .selection { font-size: 11px; letter-spacing: 0.3em; font-weight: 600; color: var(--shield-dark); } .film-about-laurels .festival { font-size: 11px; letter-spacing: 0.22em; color: var(--flame-red); margin-top: 4px; } .film-about h2 { font-family: var(--font-serif); font-style: italic; font-size: clamp(36px, 5vw, 56px); font-weight: 400; line-height: 1; color: var(--shield-dark); margin-bottom: 18px; } .film-about p { font-size: 15px; line-height: 1.8; color: var(--ink); margin-bottom: 14px; } .film-about .featuring { font-size: 11px; color: var(--flame-red); letter-spacing: 0.18em; margin-bottom: 24px; } .film-about-embed { aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; background: var(--shield-dark); } .film-about-embed iframe { width: 100%; height: 100%; border: 0; } /* ============================================================ 16. SHOP PAGE ============================================================ */ .shop-hero { padding: 100px 0 80px; background: var(--wave-blue); text-align: center; } .shop-hero h1 { font-family: var(--font-serif); font-style: italic; font-size: clamp(54px, 8vw, 90px); font-weight: 400; line-height: 1; color: white; margin: 0 auto 24px; max-width: 700px; } .shop-hero .lede { font-size: 17px; color: rgba(255, 255, 255, 0.92); max-width: 540px; margin: 0 auto 36px; line-height: 1.7; } .shop-signup { display: flex; gap: 0; max-width: 440px; margin: 0 auto; } .shop-signup input { flex: 1; background: white; border: none; padding: 14px 18px; font-size: 14px; color: var(--ink); border-radius: 2px 0 0 2px; font-family: var(--font-sans); } .shop-signup input::placeholder { color: rgba(14, 41, 54, 0.5); } .shop-signup button { background: var(--flame-red); color: white; border: none; padding: 14px 22px; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; border-radius: 0 2px 2px 0; cursor: pointer; } .shop-signup button:hover { background: var(--flame-red-deep); } .coming-soon { background: var(--shield-dark); color: white; padding: 88px 0; } .coming-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; } .coming-card { background: rgba(255, 255, 255, 0.05); border: 0.5px solid rgba(255, 255, 255, 0.15); padding: 0; border-radius: 2px; overflow: hidden; } .coming-image { aspect-ratio: 4 / 3; } .coming-image-1 { background: linear-gradient(135deg, #D93025 0%, #9B1F17 100%); } .coming-image-2 { background: linear-gradient(135deg, #F5D888 0%, #D39F29 100%); } .coming-image-3 { background: linear-gradient(135deg, #6BB8DC 0%, #2D7499 100%); } .coming-body { padding: 24px; } .coming-tag { font-size: 10px; color: var(--cream); letter-spacing: 0.25em; font-weight: 600; margin-bottom: 10px; } .coming-name { font-family: var(--font-serif); font-style: italic; font-size: 22px; margin-bottom: 10px; } .coming-card p { font-size: 13px; color: rgba(255, 255, 255, 0.78); line-height: 1.7; } /* ============================================================ 17. RESPONSIVE OVERRIDES FOR NEW PAGES ============================================================ */ @media (max-width: 1000px) { .week-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .training-grid { grid-template-columns: 1fr 1fr; } .pillar { padding: 32px 0 0 0 !important; border-right: none; border-top: 0.5px solid rgba(255, 255, 255, 0.18); } .pillar:nth-child(odd) { padding-right: 16px !important; } .pillar:nth-child(even) { padding-left: 16px !important; } } @media (max-width: 800px) { .pillar-row { grid-template-columns: 1fr; gap: 24px; } .pillar-row.reverse { direction: ltr; } .pillar-image { aspect-ratio: 16 / 10; order: -1; } .coaches-grid { grid-template-columns: 1fr; } .season-block { grid-template-columns: 1fr; padding: 32px; gap: 28px; } .season-action { position: relative; top: auto; } .season-meta { grid-template-columns: 1fr; } .year-grid { grid-template-columns: 1fr; gap: 32px; } .letter-grid { grid-template-columns: 1fr; gap: 24px; } .mission-grid { grid-template-columns: 1fr; gap: 24px; } .film-about-grid { grid-template-columns: 1fr; gap: 32px; } .family-grid { grid-template-columns: 1fr; } .coming-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .training-grid { grid-template-columns: 1fr; } .pillar { padding: 32px 0 0 0 !important; border-right: none; } .training { padding: 56px 0; } .week-grid { grid-template-columns: 1fr; } .mission-stats { grid-template-columns: 1fr; } .shop-signup { flex-direction: column; } .shop-signup input { border-radius: 2px; } .shop-signup button { border-radius: 2px; margin-top: 10px; } }