/* ══════════════════════════════════════════════ NABOB CREATOR MASTERMIND v3 — EDITORIAL Ref: Forbes dark authority × C&C kinetic type × Adweek ghost watermarks Type: Boska (editorial serif) · Cormorant (italic) · Satoshi (body/UI) Palette: Near-black · Gold · Ivory ══════════════════════════════════════════════ */ :root { --black: #0A0F1A; --navy: #0D1520; --navy-mid: #101C2E; --navy-lt: #162238; --gold: #C9A84C; --gold-lt: #DDB95E; --gold-dim: rgba(201,168,76,0.15); --ivory: #F0EAD8; --ivory-dim: rgba(240,234,216,0.6); --muted: rgba(240,234,216,0.45); --white: #FFFFFF; --warm: #FAF6EF; --border: rgba(201,168,76,0.16); --border-lt: rgba(240,234,216,0.08); --fd: 'Boska', 'Georgia', serif; /* display serif */ --fi: 'Cormorant Garamond', serif; /* italic accent */ --fb: 'Satoshi', 'Inter', sans-serif; /* body / UI */ --hero: clamp(4rem, 9vw, 8.5rem); --h1: clamp(2.5rem, 5vw, 4.5rem); --h2: clamp(2rem, 4vw, 3.5rem); --h3: clamp(1.4rem, 2.5vw, 2rem); --xl: 1.25rem; --base: 1rem; --sm: 0.875rem; --xs: 0.75rem; --gap-xs: 0.5rem; --gap-sm: 1rem; --gap: 1.5rem; --gap-lg: 2.5rem; --gap-xl: 4rem; --gap-2x: 6rem; --gap-3x: 9rem; --r: 3px; --rl: 8px; --mw: 1240px; --ease: cubic-bezier(0.4,0,0.2,1); --t: 0.3s var(--ease); } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body { background: var(--black); color: var(--ivory); font-family: var(--fb); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } button { cursor:pointer; font-family:inherit; border:none; background:none; } ul { list-style:none; } input,textarea,select { font-family:var(--fb); } .container { max-width: var(--mw); margin: 0 auto; padding: 0 clamp(1.25rem,4vw,2.5rem); } .section { padding: var(--gap-3x) 0; } /* ── Tags ── */ .section-tag { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--fb); font-size: var(--xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--gap); } .section-tag::before { content: ''; display: block; width: 24px; height: 1px; background: var(--gold); flex-shrink: 0; } .section-tag.light { color: rgba(240,234,216,0.4); } .section-tag.light::before { background: rgba(240,234,216,0.25); } /* ── Section Heading ── */ .section-hed { font-family: var(--fd); font-size: var(--h2); font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; color: var(--white); margin-bottom: var(--gap-lg); } .section-hed em { font-family: var(--fi); font-style: italic; font-weight: 400; color: var(--gold); } /* ── Reveal ── */ /* Default: content always visible. JS enhances with scroll animation. */ .reveal { opacity:1; transform:none; } /* When JS is active it adds .js-reveal-ready to , enabling hidden state */ .js-reveal-ready .reveal { opacity:0; transform:translateY(28px); transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1); transition-delay: var(--reveal-delay, 0s); } .js-reveal-ready .reveal.visible { opacity:1; transform:none; } /* Hero always animates in (CSS-driven, no JS needed) */ .hero .reveal { opacity:0; animation: revealUp 0.85s cubic-bezier(0.22,1,0.36,1) both; } .hero-eyebrow.reveal { animation-delay:0.05s; } .hero-hed.reveal { animation-delay:0.18s; } .hero-deck.reveal { animation-delay:0.45s; } .hero-ctas.reveal { animation-delay:0.6s; } .hero-scroll-hint.reveal { animation-delay:0.75s; } @keyframes revealUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.9em 2.2em; font-family: var(--fb); font-size: var(--xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--r); transition: var(--t); white-space: nowrap; cursor: pointer; } .btn-gold { background:var(--gold); color:var(--black); border:1px solid var(--gold); } .btn-gold:hover { background:var(--gold-lt); border-color:var(--gold-lt); transform:translateY(-2px); } .btn-ghost { background:transparent; color:var(--ivory); border:1px solid rgba(240,234,216,0.22); } .btn-ghost:hover { border-color:var(--ivory); } .btn-outline-gold { background:transparent; color:var(--gold); border:1px solid var(--gold); } .btn-outline-gold:hover { background:var(--gold-dim); } /* ── Form elements ── */ .fg { display:flex; flex-direction:column; gap:0.35rem; } .fg.full { grid-column:1/-1; } .fg label { font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); } .fg input, .fg textarea, .fg select { background: rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--r); padding:0.8rem 1rem; color:var(--ivory); font-size:var(--base); transition:border-color var(--t), background var(--t); outline:none; width:100%; } .fg input:focus, .fg textarea:focus, .fg select:focus { border-color:var(--gold); background:rgba(201,168,76,0.05); } .fg input::placeholder, .fg textarea::placeholder { color:rgba(240,234,216,0.18); } .fg select { appearance:none; cursor:pointer; } .fg select option { background:var(--navy); } .fg textarea { resize:vertical; min-height:100px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); } .contact-form { display:flex; flex-direction:column; gap:var(--gap); } .form-success { font-size:var(--sm); color:var(--gold); font-weight:600; min-height:1.4em; } .form-error { border-color:rgba(220,80,80,0.6) !important; } .checkbox-group { display:flex; flex-wrap:wrap; gap:var(--gap-sm); padding-top:0.25rem; } .cb-label { display:flex; align-items:center; gap:0.4rem; font-size:var(--sm); color:var(--ivory-dim); cursor:pointer; } .cb-label input { width:16px; height:16px; accent-color:var(--gold); flex-shrink:0; } .radio-group { display:flex; gap:var(--gap); padding-top:0.25rem; flex-wrap:wrap; } .rb-label { display:flex; align-items:center; gap:0.4rem; font-size:var(--sm); color:var(--ivory-dim); cursor:pointer; } .rb-label input { accent-color:var(--gold); } .agree-label { font-size:var(--sm); line-height:1.55; } /* ══════════════════════════════════════════════ NAV ══════════════════════════════════════════════ */ .nav { position: fixed; top:0; left:0; right:0; z-index:100; padding: 1rem 0; transition: background var(--t), padding var(--t), border-color var(--t); border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(10,15,26,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color:var(--border); padding:0.65rem 0; } .nav-inner { max-width:var(--mw); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); display:flex; align-items:center; justify-content:space-between; gap:var(--gap-lg); } .nav-logo { display:flex; align-items:center; gap:0.75rem; flex-shrink:0; } .nav-text { display:flex; flex-direction:column; line-height:1.2; } .nav-nabob { font-family:var(--fb); font-size:0.65rem; font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:var(--ivory); } .nav-sub { font-family:var(--fi); font-style:italic; font-size:0.82rem; color:var(--gold); } .nav-powered { font-family:var(--fb); font-size:var(--xs); color:var(--muted); padding-left:var(--gap-sm); border-left:1px solid var(--border-lt); margin-left:var(--gap-xs); } .nav-powered em { font-style:italic; color:var(--gold); } .nav-links { display:flex; align-items:center; gap:var(--gap-lg); list-style:none; } .nav-links a { font-family:var(--fb); font-size:var(--xs); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); transition:color var(--t); } .nav-links a:hover { color:var(--ivory); } .nav-apply { background:var(--gold) !important; color:var(--black) !important; padding:0.45em 1.1em; border-radius:var(--r); font-weight:700 !important; } .nav-apply:hover { background:var(--gold-lt) !important; } .nav-toggle { display:none; flex-direction:column; gap:5px; padding:4px; z-index:110; position:relative; } .nav-toggle span { display:block; width:24px; height:1.5px; background:var(--ivory); transition:var(--t); } /* ══════════════════════════════════════════════ HERO ══════════════════════════════════════════════ */ .hero { position: relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:8rem clamp(1.25rem,4vw,2.5rem) 5rem; } /* Video layer */ .hero-video-wrap { position:absolute; inset:0; z-index:0; overflow:hidden; } .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; /* Animated gradient fallback when no video source present */ background: linear-gradient(135deg, #0A0F1A 0%, #0D1B2A 30%, #102035 60%, #0A0F1A 100%); animation: heroBgPulse 12s ease-in-out infinite alternate; } @keyframes heroBgPulse { 0% { filter: brightness(1) hue-rotate(0deg); } 100% { filter: brightness(1.1) hue-rotate(8deg); } } .hero-video-overlay { position:absolute; inset:0; background: linear-gradient(160deg, rgba(10,15,26,0.75) 0%, rgba(10,15,26,0.55) 50%, rgba(10,15,26,0.85) 100%); } /* Rings */ .hero-rings { position:absolute; right:-8vw; top:50%; transform:translateY(-50%); pointer-events:none; z-index:1; } .ring { position:absolute; border-radius:50%; transform:translate(-50%,-50%); border:1px solid rgba(201,168,76,0.1); animation:ringPulse 8s ease-in-out infinite; } .r1 { width:420px; height:420px; } .r2 { width:660px; height:660px; border-color:rgba(201,168,76,0.06); animation-delay:1.5s; } .r3 { width:940px; height:940px; border-color:rgba(201,168,76,0.03); animation-delay:3s; } @keyframes ringPulse { 0%,100% { opacity:1; transform:translate(-50%,-50%) scale(1); } 50% { opacity:0.6; transform:translate(-50%,-50%) scale(1.03); } } /* Ghost watermark (Adweek style) */ .hero-ghost { position:absolute; bottom:-4%; left:-2%; font-family:var(--fd); font-size:clamp(8rem,18vw,20rem); font-weight:900; letter-spacing:-0.04em; color:rgba(201,168,76,0.04); line-height:1; pointer-events:none; z-index:1; user-select:none; animation: ghostDrift 20s ease-in-out infinite alternate; } @keyframes ghostDrift { 0% { transform:translateX(0) translateY(0); } 100% { transform:translateX(2%) translateY(-1.5%); } } .hero-inner { position:relative; z-index:2; max-width:var(--mw); width:100%; } /* Eyebrow */ .hero-eyebrow { display:flex; align-items:center; gap:var(--gap-sm); font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--gap-lg); } .eyebrow-dot { display:block; width:6px; height:6px; border-radius:50%; background:var(--gold); animation:dotPulse 2s ease-in-out infinite; } @keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(1.5);} } /* Headline — stacked editorial */ .hero-hed { font-family: var(--fd); font-size: var(--hero); font-weight: 700; line-height: 0.92; letter-spacing: -0.03em; color: var(--white); margin-bottom: var(--gap-lg); display:flex; flex-direction:column; } .hed-line { display:block; overflow:hidden; } .hed-line-3 em { font-family:var(--fi); font-style:italic; font-weight:300; color:var(--gold); font-size:1.05em; } .hed-line-4 { color:var(--white); } /* Stagger the reveal animation per line */ .hero-hed .hed-line-1 { animation: lineIn 0.8s var(--ease) 0.3s both; } .hero-hed .hed-line-2 { animation: lineIn 0.8s var(--ease) 0.44s both; } .hero-hed .hed-line-3 { animation: lineIn 0.8s var(--ease) 0.58s both; } .hero-hed .hed-line-4 { animation: lineIn 0.8s var(--ease) 0.72s both; } @keyframes lineIn { from{opacity:0;transform:translateY(40px);} to{opacity:1;transform:none;} } .hero-deck { max-width:580px; font-size:var(--xl); color:var(--ivory-dim); line-height:1.7; margin-bottom:var(--gap-xl); } .hero-ctas { display:flex; gap:var(--gap-sm); flex-wrap:wrap; margin-bottom:var(--gap-2x); } /* Proof bar */ .proof-bar { display:flex; align-items:center; gap:var(--gap-sm); flex-wrap:wrap; font-family:var(--fb); font-size:var(--xs); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); padding-top:var(--gap-lg); border-top:1px solid var(--border); } .proof-dot { color:var(--gold); } /* Scroll hint */ .hero-scroll-hint { position:absolute; bottom:2.5rem; left:clamp(1.25rem,4vw,2.5rem); display:flex; align-items:center; gap:var(--gap-sm); font-family:var(--fb); font-size:var(--xs); letter-spacing:0.15em; text-transform:uppercase; color:rgba(240,234,216,0.25); z-index:2; } .scroll-bar { width:40px; height:1px; background:rgba(201,168,76,0.3); overflow:hidden; position:relative; } .scroll-bar::after { content:''; position:absolute; inset:0; background:var(--gold); animation:scrollSlide 2.4s ease-in-out infinite; } @keyframes scrollSlide { 0%{transform:translateX(-100%);} 50%{transform:translateX(0);} 100%{transform:translateX(100%); }} /* ══════════════════════════════════════════════ TICKER ══════════════════════════════════════════════ */ .ticker-wrap { overflow:hidden; background:var(--gold); padding:0.75rem 0; white-space:nowrap; position:relative; z-index:5; } .ticker-track { display:inline-flex; gap:2.5rem; animation:ticker 36s linear infinite; } .ticker-track span { font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--black); flex-shrink:0; } .t-sep { color:rgba(10,15,26,0.3); font-size:0.65em; } @keyframes ticker { from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ══════════════════════════════════════════════ THE MOMENT ══════════════════════════════════════════════ */ .moment-section { background:var(--navy); border-bottom:1px solid var(--border-lt); } .moment-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:var(--gap-2x); align-items:start; margin-bottom:var(--gap-2x); } .moment-left { position:sticky; top:6rem; } .moment-hed { font-family:var(--fd); font-size:var(--h1); font-weight:700; line-height:1.02; letter-spacing:-0.02em; color:var(--white); } .moment-hed em { font-family:var(--fi); font-style:italic; font-weight:400; color:var(--gold); } .moment-body { font-size:var(--xl); color:var(--ivory-dim); line-height:1.75; margin-bottom:var(--gap); } .moment-body strong { color:var(--ivory); } .moment-cta-line strong { color:var(--gold); font-size:1.1em; } /* Three-stat band with ghost numbers (Adweek style) */ .stat-band { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:0; border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; } .stat-item { padding:var(--gap-xl) var(--gap-lg); display:flex; flex-direction:column; gap:0.5rem; position:relative; overflow:hidden; background:var(--navy-lt); transition:background var(--t); } .stat-item:hover { background:rgba(201,168,76,0.06); } .stat-ghost { position:absolute; bottom:-0.1em; right:-0.05em; font-family:var(--fd); font-size:clamp(5rem,10vw,10rem); font-weight:900; color:rgba(201,168,76,0.05); line-height:1; pointer-events:none; user-select:none; letter-spacing:-0.04em; } .stat-num { font-family:var(--fd); font-size:clamp(2.5rem,5vw,4rem); font-weight:700; color:var(--gold); line-height:1; position:relative; } .stat-label { font-size:var(--base); color:var(--ivory); font-weight:500; position:relative; line-height:1.45; } .stat-src { font-family:var(--fb); font-size:var(--xs); color:var(--muted); letter-spacing:0.06em; position:relative; } .stat-divider { width:1px; background:var(--border); flex-shrink:0; } /* ══════════════════════════════════════════════ DIAGONAL MARQUEE (Create & Cultivate style) ══════════════════════════════════════════════ */ .marquee-break { position:relative; height:120px; overflow:hidden; background:var(--black); display:flex; flex-direction:column; justify-content:center; gap:0; transform:skewY(-2deg); margin:-2px 0; } .marquee-strip { background:var(--gold); overflow:hidden; padding:0.7rem 0; white-space:nowrap; width:100%; } .marquee-strip + .marquee-strip { margin-top:3px; } .marquee-inner { display:inline-flex; gap:3rem; animation:mq 20s linear infinite; } .marquee-rtl { animation-direction:reverse; } .marquee-inner span { font-family:var(--fb); font-size:var(--xs); font-weight:900; letter-spacing:0.22em; text-transform:uppercase; color:var(--black); flex-shrink:0; } .ms { color:rgba(10,15,26,0.3); } @keyframes mq { from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ══════════════════════════════════════════════ THE PROGRAM ══════════════════════════════════════════════ */ .program-section { background:var(--black); } .program-header { max-width:800px; margin-bottom:var(--gap-2x); } .program-intro { font-size:var(--xl); color:var(--ivory-dim); line-height:1.7; } .pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; margin-bottom:var(--gap-2x); } .pillar { background:var(--navy); padding:var(--gap-xl) var(--gap-lg); display:flex; flex-direction:column; gap:var(--gap); position:relative; transition:background var(--t); } .pillar::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 0.45s var(--ease); } .pillar:hover::before { transform:scaleX(1); } .pillar:hover { background:var(--navy-lt); } .pillar-top { display:flex; justify-content:space-between; align-items:flex-start; } .pillar-num { font-family:var(--fb); font-size:var(--xs); font-weight:900; letter-spacing:0.2em; color:var(--gold); } .pillar h3 { font-family:var(--fd); font-size:var(--h3); font-weight:700; color:var(--white); line-height:1.15; } .pillar p { font-size:var(--sm); color:var(--muted); line-height:1.65; } /* Outcomes */ .outcomes { border:1px solid var(--border); border-radius:var(--rl); padding:var(--gap-xl); background:var(--navy); } .outcomes-hed { font-family:var(--fd); font-size:var(--h3); font-weight:700; color:var(--white); margin-bottom:var(--gap-lg); padding-bottom:var(--gap); border-bottom:1px solid var(--border); } .outcomes-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) var(--gap-xl); } .outcome-item { display:flex; gap:var(--gap-sm); align-items:flex-start; } .outcome-check { color:var(--gold); font-size:var(--sm); font-weight:700; flex-shrink:0; margin-top:2px; } .outcome-item strong { color:var(--ivory); } .outcome-item > div { font-size:var(--sm); color:var(--muted); line-height:1.6; } /* ══════════════════════════════════════════════ CREDIBILITY ══════════════════════════════════════════════ */ .credibility-section { background:var(--navy-mid); border-top:1px solid var(--border-lt); } .cred-header { max-width:820px; } .cred-body { max-width:680px; margin-bottom:var(--gap-2x); } .cred-body p { font-size:var(--xl); color:var(--ivory-dim); line-height:1.75; margin-bottom:var(--gap); } .cred-body blockquote { border-left:2px solid var(--gold); padding:var(--gap-sm) var(--gap); font-family:var(--fi); font-size:var(--xl); font-style:italic; color:var(--ivory); line-height:1.5; } /* Ghost-number stat band (Adweek-style) */ .cred-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; margin-bottom:var(--gap-lg); } .cred-stat { background:var(--navy-lt); padding:var(--gap-xl) var(--gap-lg); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:0.4rem; transition:background var(--t); } .cred-stat:hover { background:rgba(201,168,76,0.05); } .cs-ghost { position:absolute; bottom:-0.15em; right:-0.05em; font-family:var(--fd); font-size:clamp(4rem,7vw,8rem); font-weight:900; letter-spacing:-0.04em; color:rgba(201,168,76,0.06); pointer-events:none; user-select:none; line-height:1; } .cs-num { font-family:var(--fd); font-size:clamp(2rem,4vw,3.5rem); font-weight:700; color:var(--gold); line-height:1; position:relative; } .cs-label { font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--ivory); position:relative; } .cs-desc { font-size:var(--xs); color:var(--muted); line-height:1.55; position:relative; } .cred-partnership { font-size:var(--sm); color:var(--muted); padding-top:var(--gap); border-top:1px solid var(--border-lt); } .cred-partnership strong { color:var(--ivory); } /* ══════════════════════════════════════════════ FOR CREATORS ══════════════════════════════════════════════ */ .creators-section { background:var(--black); } .fit-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; margin-bottom:var(--gap-2x); } .fit-col { background:var(--navy); padding:var(--gap-xl); } .fit-header { display:flex; align-items:center; gap:var(--gap); margin-bottom:var(--gap-lg); } .fit-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700; flex-shrink:0; } .fit-icon-yes { background:rgba(201,168,76,0.15); color:var(--gold); } .fit-icon-no { background:rgba(240,234,216,0.06); color:rgba(240,234,216,0.4); } .fit-col h3 { font-family:var(--fd); font-size:var(--h3); font-weight:700; color:var(--white); } .fit-col ul { display:flex; flex-direction:column; gap:var(--gap-sm); } .fit-col li { font-size:var(--sm); color:var(--ivory-dim); padding-left:1.3rem; position:relative; line-height:1.55; } .fit-yes li::before { content:'→'; position:absolute; left:0; color:var(--gold); } .fit-no li::before { content:'—'; position:absolute; left:0; color:rgba(240,234,216,0.25); } .creators-cta { display:flex; align-items:center; gap:var(--gap-lg); flex-wrap:wrap; margin-bottom:var(--gap-2x); } .creators-note { font-size:var(--xs); color:var(--muted); letter-spacing:0.05em; } /* Spotlights */ .spotlights-intro { margin-bottom:var(--gap-lg); } .spotlights-intro h3 { font-family:var(--fd); font-size:var(--h3); font-weight:700; color:var(--white); margin-bottom:0.4rem; } .spotlights-intro p { font-size:var(--sm); color:var(--muted); } .spotlights-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); } .spotlight-card { border:1px solid var(--border-lt); border-radius:var(--rl); overflow:hidden; background:var(--navy); transition:border-color var(--t), transform var(--t); } .spotlight-card:hover { border-color:var(--border); transform:translateY(-4px); } .sp-img-wrap { overflow:hidden; } .sp-img { height:200px; background: repeating-linear-gradient(45deg, rgba(201,168,76,0.04) 0, rgba(201,168,76,0.04) 1px, transparent 1px, transparent 14px), var(--navy-lt); position:relative; display:flex; align-items:center; justify-content:center; transition:transform 0.5s var(--ease); } .spotlight-card:hover .sp-img { transform:scale(1.03); } .sp-img::after { content:'Coming Soon'; font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:rgba(201,168,76,0.3); } .sp-meta { padding:var(--gap-sm) var(--gap); display:flex; flex-direction:column; gap:0.25rem; } .sp-platform { font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); } .sp-name { font-family:var(--fd); font-size:var(--xl); font-weight:700; color:rgba(240,234,216,0.3); } /* ══════════════════════════════════════════════ FOR BRANDS ══════════════════════════════════════════════ */ .brands-section { padding:0; } .brands-dark { background:var(--navy-mid); border-top:1px solid var(--border-lt); border-bottom:1px solid var(--border-lt); padding:var(--gap-3x) 0; } .brands-header { max-width:800px; margin-bottom:var(--gap-2x); } .brands-hed { font-family:var(--fd); font-size:var(--h1); font-weight:700; line-height:1.02; letter-spacing:-0.02em; color:var(--white); margin-bottom:var(--gap-lg); } .brands-hed em { font-family:var(--fi); font-style:italic; font-weight:300; color:var(--gold); } .brands-intro,.brands-sub { font-size:var(--xl); color:var(--ivory-dim); line-height:1.75; margin-bottom:var(--gap); } .brand-values { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; margin-bottom:var(--gap-2x); } .bv-item { background:var(--navy-lt); padding:var(--gap-xl) var(--gap); display:flex; flex-direction:column; gap:var(--gap-sm); transition:background var(--t); } .bv-item:hover { background:rgba(201,168,76,0.06); } .bv-num { font-family:var(--fb); font-size:var(--xs); font-weight:900; letter-spacing:0.2em; color:var(--gold); } .bv-item h4 { font-family:var(--fd); font-size:var(--xl); font-weight:700; color:var(--white); line-height:1.2; } .bv-item p { font-size:var(--xs); color:var(--muted); line-height:1.6; } .partnership-note { text-align:center; padding:var(--gap-lg) 0; font-family:var(--fi); font-size:var(--xl); font-style:italic; color:rgba(240,234,216,0.35); max-width:700px; margin:0 auto var(--gap-2x); } .brand-form-block { background:var(--navy); border:1px solid var(--border); border-radius:var(--rl); padding:var(--gap-xl); max-width:760px; margin:0 auto; } .form-hed { font-family:var(--fd); font-size:var(--h3); font-weight:700; color:var(--white); margin-bottom:0.4rem; } .form-sub-copy { font-size:var(--sm); color:var(--muted); margin-bottom:var(--gap-lg); } /* ══════════════════════════════════════════════ FACILITATORS ══════════════════════════════════════════════ */ .facilitators-section { background:var(--black); border-top:1px solid var(--border-lt); } .fac-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:var(--gap-2x); align-items:start; } .fac-left { position:sticky; top:6rem; } .fac-body { font-size:var(--xl); color:var(--ivory-dim); line-height:1.75; margin-top:var(--gap); } .fac-form { background:var(--navy); border:1px solid var(--border); border-radius:var(--rl); padding:var(--gap-xl); } /* ══════════════════════════════════════════════ TIMELINE ══════════════════════════════════════════════ */ .timeline-section { background:var(--navy-mid); border-top:1px solid var(--border-lt); } .tl-header { margin-bottom:var(--gap-2x); } .timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; } .tl-item { background:var(--navy-lt); padding:var(--gap-xl) var(--gap-lg); display:flex; flex-direction:column; gap:var(--gap-sm); position:relative; overflow:hidden; transition:background var(--t); } .tl-item:hover { background:rgba(201,168,76,0.05); } .tl-gold { background:rgba(201,168,76,0.05) !important; border-left:2px solid var(--gold); } .tl-ghost { position:absolute; bottom:-0.1em; right:-0.05em; font-family:var(--fd); font-size:clamp(4rem,7vw,7rem); font-weight:900; color:rgba(201,168,76,0.06); line-height:1; pointer-events:none; user-select:none; letter-spacing:-0.04em; } .gold-ghost { color:rgba(201,168,76,0.12); } .tl-date-label { font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); position:relative; } .tl-gold-label { color:var(--gold); } .tl-connector { display:none; } .tl-dot { display:none; } .tl-content h4 { font-family:var(--fd); font-size:var(--xl); font-weight:700; color:var(--white); line-height:1.2; position:relative; } .tl-content p { font-size:var(--xs); color:var(--muted); line-height:1.6; position:relative; } /* ══════════════════════════════════════════════ FAQ ══════════════════════════════════════════════ */ .faq-section { background:var(--black); border-top:1px solid var(--border-lt); } .faq-header { margin-bottom:var(--gap-lg); } .faq-tabs { display:inline-flex; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:var(--gap-xl); } .faq-tab { font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); padding:0.65em 1.5em; border-right:1px solid var(--border); transition:background var(--t), color var(--t); } .faq-tab:last-child { border-right:none; } .faq-tab.active { background:var(--gold); color:var(--black); } .faq-tab:not(.active):hover { background:var(--gold-dim); color:var(--ivory); } .faq-panels { max-width:780px; } .faq-panel.hidden { display:none; } .faq-item { border-bottom:1px solid var(--border-lt); } .fq { width:100%; text-align:left; padding:var(--gap) 0; font-family:var(--fb); font-size:var(--base); font-weight:600; color:var(--ivory); display:flex; justify-content:space-between; align-items:center; gap:var(--gap); transition:color var(--t); } .fq:hover { color:var(--gold); } .fq::after { content:'+'; font-size:1.2rem; font-weight:300; color:var(--gold); flex-shrink:0; transition:transform 0.35s var(--ease); } .fq[aria-expanded="true"]::after { transform:rotate(45deg); } .fa { overflow:hidden; max-height:0; transition:max-height 0.4s ease; } .fa.open { max-height:500px; padding-bottom:var(--gap); } .fa p { font-size:var(--sm); color:var(--muted); line-height:1.75; } .fa a { color:var(--gold); text-decoration:underline; } /* ══════════════════════════════════════════════ MULTI-STEP APPLICATION ══════════════════════════════════════════════ */ .apply-section { padding:0; } .apply-light { background:var(--warm); color:var(--black); padding:var(--gap-3x) 0; border-top:3px solid var(--gold); } .apply-header { max-width:700px; margin-bottom:var(--gap-2x); } .apply-header .section-tag { color:var(--gold); } .apply-header .section-tag::before { background:var(--gold); } .apply-hed { font-family:var(--fd); font-size:var(--h1); font-weight:700; line-height:1.05; color:var(--black); margin-bottom:var(--gap-sm); } .apply-hed em { font-family:var(--fi); font-style:italic; color:var(--gold); } .apply-sub { font-size:var(--xl); color:rgba(10,15,26,0.55); margin-bottom:0; } .apply-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:var(--gap-2x); align-items:start; } .apply-info { position:sticky; top:6rem; } .apply-dates { display:flex; align-items:center; gap:var(--gap); margin-bottom:var(--gap-lg); } .ad-block { display:flex; flex-direction:column; gap:3px; } .ad-label { font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:rgba(10,15,26,0.4); } .ad-date { font-family:var(--fd); font-size:var(--h3); font-weight:700; color:var(--black); } .ad-arrow { font-size:var(--h3); color:var(--gold); margin-top:1rem; } .apply-note { font-size:var(--sm); color:rgba(10,15,26,0.5); line-height:1.7; } /* Confirmation preview */ .apply-confirm-preview { background:var(--black); border:1px solid var(--border); border-radius:var(--rl); padding:var(--gap-lg); margin-top:var(--gap-lg); color:var(--ivory); } .confirm-icon { width:48px; height:48px; background:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; color:var(--black); margin-bottom:var(--gap-sm); } .apply-confirm-preview h3 { font-family:var(--fd); font-size:var(--xl); font-weight:700; color:var(--white); margin-bottom:0.4rem; } .apply-confirm-preview p { font-size:var(--sm); color:var(--muted); line-height:1.7; } /* Multi-step form */ .apply-form-wrap { background:var(--black); border-radius:var(--rl); padding:var(--gap-xl); box-shadow:0 40px 100px rgba(10,15,26,0.3); } .progress-bar { display:flex; align-items:center; gap:var(--gap); margin-bottom:var(--gap-lg); } .progress-track { flex:1; height:2px; background:rgba(201,168,76,0.15); border-radius:2px; overflow:hidden; } .progress-fill { height:100%; background:var(--gold); border-radius:2px; transition:width 0.5s var(--ease); width:20%; } .progress-label { font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .form-step { display:none; flex-direction:column; gap:var(--gap); } .form-step.active { display:flex; } .step-hed { font-family:var(--fd); font-size:var(--h3); font-weight:700; color:var(--white); margin-bottom:var(--gap-xs); padding-bottom:var(--gap); border-bottom:1px solid var(--border); } .step-nav { display:flex; gap:var(--gap-sm); padding-top:var(--gap-xs); } /* ══════════════════════════════════════════════ FINAL CTA BAND ══════════════════════════════════════════════ */ .closer-section { padding:0; background:var(--navy-mid); border-top:1px solid var(--border-lt); } .closer-inner { text-align:center; padding:var(--gap-3x) clamp(1.25rem,4vw,2.5rem); max-width:700px; margin:0 auto; } .closer-eyebrow { font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--gap); } .closer-hed { font-family:var(--fd); font-size:var(--h1); font-weight:700; line-height:1.05; color:var(--white); margin-bottom:var(--gap-sm); } .closer-hed em { font-family:var(--fi); font-style:italic; color:var(--gold); } .closer-sub { font-size:var(--xl); color:var(--ivory-dim); margin-bottom:var(--gap-xl); } /* ══════════════════════════════════════════════ NEWSLETTER + FOOTER ══════════════════════════════════════════════ */ .newsletter-band { background:var(--gold); padding:var(--gap-xl) 0; } .nl-inner { display:flex; align-items:center; gap:var(--gap-2x); flex-wrap:wrap; justify-content:space-between; } .nl-copy h3 { font-family:var(--fd); font-size:var(--h3); font-weight:700; color:var(--black); } .nl-copy p { font-size:var(--sm); color:rgba(10,15,26,0.65); margin-top:0.25rem; } .nl-form { display:flex; gap:var(--gap-sm); flex:1; max-width:480px; } .nl-form input { flex:1; padding:0.8rem 1rem; border:1px solid rgba(10,15,26,0.25); border-radius:var(--r); background:rgba(10,15,26,0.08); color:var(--black); font-family:var(--fb); font-size:var(--base); outline:none; } .nl-form input::placeholder { color:rgba(10,15,26,0.4); } .nl-form input:focus { border-color:var(--black); } .nl-form .btn-gold { background:var(--black); color:var(--gold); border-color:var(--black); } .nl-form .btn-gold:hover { background:var(--navy); } #nlSuccess { font-size:var(--sm); color:var(--black); font-weight:600; } .footer { background:var(--navy-mid); border-top:1px solid var(--border-lt); padding:var(--gap-xl) 0 var(--gap-lg); } .footer-top { display:flex; justify-content:space-between; gap:var(--gap-xl); flex-wrap:wrap; margin-bottom:var(--gap-xl); padding-bottom:var(--gap-xl); border-bottom:1px solid var(--border-lt); } .footer-brand { display:flex; align-items:center; gap:var(--gap); } .fn { font-family:var(--fb); font-size:var(--sm); font-weight:700; color:var(--ivory); } .fp { font-size:var(--xs); color:var(--muted); margin-top:2px; line-height:1.5; } .footer-cols { display:flex; gap:var(--gap-2x); flex-wrap:wrap; } .footer-col { display:flex; flex-direction:column; gap:0.5rem; } .footer-col h5 { font-family:var(--fb); font-size:var(--xs); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ivory); margin-bottom:0.25rem; } .footer-col a { font-size:var(--xs); color:var(--muted); transition:color var(--t); } .footer-col a:hover { color:var(--gold); } .footer-bottom { display:flex; flex-direction:column; gap:0.3rem; } .footer-bottom p { font-size:var(--xs); color:rgba(240,234,216,0.3); } .footer-bottom a { color:var(--gold); } /* ══════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════ */ @media (max-width:1100px) { .pillars { grid-template-columns:1fr 1fr; } .brand-values { grid-template-columns:repeat(3,1fr); } .cred-stats { grid-template-columns:repeat(2,1fr); } .timeline { grid-template-columns:repeat(3,1fr); } .stat-band { grid-template-columns:1fr; } .stat-divider { width:100%; height:1px; } .outcomes-grid { grid-template-columns:1fr; } } @media (max-width:900px) { .moment-grid,.fac-grid { grid-template-columns:1fr; gap:var(--gap-xl); } .moment-left,.fac-left { position:static; } .spotlights-grid { grid-template-columns:repeat(2,1fr); } .apply-layout { grid-template-columns:1fr; } .apply-info { position:static; } .fit-grid { grid-template-columns:1fr; } .timeline { grid-template-columns:repeat(2,1fr); } .brand-values { grid-template-columns:repeat(2,1fr); } } @media (max-width:768px) { :root { --gap-3x:5rem; } .nav-links { display:none; position:fixed; inset:0; background:var(--black); flex-direction:column; align-items:center; justify-content:center; gap:var(--gap-xl); z-index:105; list-style:none; } .nav-links.open { display:flex; } .nav-links a { font-size:var(--xl); } .nav-powered { display:none; } .nav-toggle { display:flex; } .form-row { grid-template-columns:1fr; } .pillars { grid-template-columns:1fr; } .cred-stats { grid-template-columns:1fr 1fr; } .timeline { grid-template-columns:1fr; } .brand-values { grid-template-columns:1fr; } .nl-inner { flex-direction:column; gap:var(--gap-lg); } .nl-form { max-width:100%; width:100%; } .footer-top { flex-direction:column; } .spotlights-grid { grid-template-columns:1fr 1fr; } .apply-dates { flex-direction:column; gap:var(--gap-xs); } .ad-arrow { display:none; } .hero-ctas { flex-direction:column; } .hero-ctas .btn { justify-content:center; } } @media (max-width:480px) { .spotlights-grid { grid-template-columns:1fr; } .cred-stats { grid-template-columns:1fr; } }