/* ========================================================================== OIStride — Design System Deep Navy + Indigo, Manrope display / Inter body, 20px radius, "stride path" signature motif running through hero, stats, and section dividers. ========================================================================== */ :root { --navy: #14183B; --navy-soft: #1E2358; --indigo: #223889; --indigo-light: #6F7EB2; --indigo-pale: #E9EBF3; /* Per-track accents — confirmed color-refresh palette (see OIStride_Website_Homepage_Colorful_v3.png / ...ProgramPage_Colorful_v3.png). */ --accent-career: #FFB020; --accent-career-light: #F9C570; --accent-career-pale: #FEF6E9; --accent-career-dark: #C97F0A; --accent-agile: #6C5CE7; --accent-agile-dark: #4B3FA0; --accent-ai: #1FC98E; --accent-ai-light: #77D9D0; --accent-ai-pale: #EAF9F8; --accent-ai-dark: #0E9C6B; --accent-product: #22D3EE; --accent-product-light: #A3AAC2; --accent-product-pale: #F0F1F3; --accent-product-dark: #0E93AC; --accent-ai-product: linear-gradient(135deg, #6C5CE7, #22D3EE); --accent-coral: #FF4D6D; --accent-coral-dark: #D8264A; --paper: #F7F8FC; --bg: #FFFFFF; --bg-soft: #F8F9FE; --ink: #14183B; --grey: #64748B; --grey-light: #A3AAC2; --border: #E6E8F5; --radius: 20px; --radius-sm: 12px; --shadow: 0 20px 60px -20px rgba(20, 24, 59, 0.18); --shadow-sm: 0 8px 24px -8px rgba(20, 24, 59, 0.12); --font-display: 'Manrope', sans-serif; --font-body: 'Inter', sans-serif; --max: 1180px; } /* Track accent scope — set on for a track's own page, or on an individual .program-card when several tracks share one page (homepage program board). Falls back to --indigo everywhere unscoped. */ .track-career { --track-accent: var(--accent-career); --track-accent-light: var(--accent-career-light); --track-accent-pale: var(--accent-career-pale); --track-accent-dark: var(--accent-career-dark); } .track-ai { --track-accent: var(--accent-ai); --track-accent-light: var(--accent-ai-light); --track-accent-pale: var(--accent-ai-pale); --track-accent-dark: var(--accent-ai-dark); } .track-product { --track-accent: var(--accent-product); --track-accent-light: var(--accent-product-light); --track-accent-pale: var(--accent-product-pale); --track-accent-dark: var(--accent-product-dark); } .track-agile { --track-accent: var(--accent-agile); --track-accent-dark: var(--accent-agile-dark); } /* AI Product Management: --track-accent is a gradient, not a flat color. Works directly for `background: var(--track-accent)`; anywhere the codebase needs a flat color (text, border-color) use --track-accent-solid instead, or the .track-ai-product override rules below. */ .track-ai-product { --track-accent: var(--accent-ai-product); --track-accent-solid: #6C5CE7; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.6; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin: 0; } p { margin: 0; } .container { max-width: var(--max); margin: 0 auto; padding: 0 28px; } section { position: relative; } :focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Eyebrow / labels ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--track-accent-solid, var(--track-accent, var(--indigo))); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--track-accent, var(--indigo)); border-radius: 2px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border-radius: var(--radius); font-family: var(--font-body); font-weight: 600; font-size: 15px; border: none; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; white-space: nowrap; } /* .btn-primary is the site's one standard high-intent action color — coral, everywhere, not just a single per-page accent. .btn-bloom is now just an alias kept for any old references. */ .btn-primary, .btn-bloom { background: linear-gradient(120deg, var(--accent-coral), var(--accent-coral-dark)); color: #fff; box-shadow: 0 14px 30px -10px rgba(216,38,74,0.5); } .btn-primary:hover, .btn-bloom:hover { transform: translateY(-2px); } .btn-ghost-dark { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.35); } .btn-ghost-dark:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--border); } .btn-outline:hover { border-color: var(--indigo); color: var(--indigo); } .btn-block { width: 100%; } .btn-sm { padding: 11px 20px; font-size: 13.5px; } .btn:disabled { cursor: not-allowed; } .btn-primary:disabled:hover, .btn-bloom:disabled:hover { transform: none; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav .container { display: flex; align-items: center; justify-content: space-between; height: 78px; } .nav-logo { flex-shrink: 0; } .nav-logo img { height: 30px; width: auto; } .nav-links { display: flex; align-items: center; gap: 34px; } .nav-links a { font-size: 14.5px; font-weight: 500; color: var(--navy); position: relative; padding: 6px 0; } .nav-links a:hover { color: var(--indigo); } .nav-links a.active { color: var(--indigo); font-weight: 700; } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--indigo); border-radius: 2px; } .nav-cta { display: flex; align-items: center; gap: 18px; } .nav-btn-short { display: none; } .nav-signin { font-size: 14.5px; font-weight: 600; color: var(--navy); } .nav-signin:hover { color: var(--indigo); } .user-menu { position: relative; } .user-menu-trigger { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 4px; padding: 6px 0; } .user-menu-trigger:hover { color: var(--indigo); } .user-menu-trigger span { font-size: 11px; } .user-menu-panel { position: absolute; top: 100%; right: 0; margin-top: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; min-width: 140px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.18s ease; } /* Small pointer so the panel reads as anchored to the trigger above it, not a disconnected floating box (Brief #9). */ .user-menu-panel::before { content: ""; position: absolute; top: -5px; right: 14px; width: 10px; height: 10px; background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } .user-menu.open .user-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); } .user-menu-panel button, .user-menu-panel a { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 10px 12px; border-radius: 8px; font-family: var(--font-body); font-size: 13.5px; color: var(--navy); text-decoration: none; box-sizing: border-box; } .user-menu-panel button:hover, .user-menu-panel a:hover { background: var(--bg-soft); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 2px; } /* ========================================================================== HERO — signature "stride path" motif ========================================================================== */ .hero { background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(34,56,137,0.55), transparent 60%), radial-gradient(ellipse 700px 500px at 90% 10%, rgba(111,126,178,0.35), transparent 60%), linear-gradient(180deg, var(--navy) 0%, #191E47 100%); color: #fff; padding: 150px 0 100px; overflow: hidden; position: relative; } .hero-path { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; } .hero-content { position: relative; z-index: 3; max-width: 760px; } .hero h1 { font-size: clamp(38px, 5.4vw, 64px); color: #fff; } .hero h1 em { font-style: normal; color: var(--indigo-light); } .hero p.lead { font-size: 19px; color: rgba(255,255,255,0.78); margin-top: 22px; max-width: 560px; } .hero-actions { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; } /* Hero ambient motion — orbs, grid overlay, cursor glow, floating chips */ /* Crisp, contained blob cluster (no blur) tucked behind the glass panel — replaces the earlier heavily-blurred full-width orb wash. */ .hero-blob { position:absolute; border-radius:50%; pointer-events:none; will-change:transform; } .hero-blob-b1 { width:280px; height:280px; background:var(--accent-ai); opacity:0.18; top:-90px; right:20px; animation: float1 16s ease-in-out infinite; } .hero-blob-b2 { width:150px; height:150px; background:var(--accent-agile); opacity:0.3; top:40px; right:180px; animation: float3 14s ease-in-out infinite; } .hero-blob-b3 { width:90px; height:90px; background:var(--accent-career); opacity:0.5; top:180px; right:0; animation: float2 20s ease-in-out infinite; } .hero-blob-b4 { width:56px; height:56px; background:var(--accent-product); opacity:0.78; top:0; right:220px; animation: float1 18s ease-in-out infinite reverse; } .hero-blob-b5 { width:38px; height:38px; background:var(--accent-coral); opacity:0.85; top:200px; right:140px; animation: float3 12s ease-in-out infinite reverse; } /* Recurring site-wide corner accent — small crisp circles (no blur), 2-4 per section, sized/colored/positioned per instance via inline style. Placed first in the section's markup so normal DOM paint order keeps it behind real content without needing z-index. */ .corner-blob { position: absolute; border-radius: 50%; pointer-events: none; } @keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,40px) scale(1.08); } } @keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(0.95); } } @keyframes float3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,25px) scale(1.05); } } .grid-overlay { position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse 800px 500px at 30% 20%, black, transparent 70%); pointer-events:none; } .cursor-glow { position:absolute; width:500px; height:500px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%); pointer-events:none; transform: translate(-50%,-50%); transition: left 0.15s ease-out, top 0.15s ease-out; } .hero-visual { position:absolute; top:100px; right:6%; width:300px; height:380px; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.16); box-shadow: 0 40px 80px -20px rgba(0,0,0,0.55); z-index:2; transition: transform 0.2s ease-out; background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); backdrop-filter: blur(10px); } .hero-visual::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,24,59,0) 55%, rgba(20,24,59,0.75) 100%); pointer-events:none; } .hero-visual::before { content:""; position:absolute; inset:0; border-radius:20px; padding:1px; background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 40%, transparent 60%, rgba(255,255,255,0.15)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } .hero-visual-caption { position:absolute; left:20px; right:20px; bottom:18px; z-index:2; font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; color:#fff; } .hero-visual-caption span { display:block; font-family:'Inter',sans-serif; font-weight:400; font-size:12px; color:rgba(255,255,255,0.7); margin-top:3px; } .stride-ring { position:absolute; width:340px; height:340px; border-radius:50%; left:50%; top:50%; margin-left:-170px; margin-top:-170px; background: conic-gradient(from 0deg, var(--accent-ai), var(--accent-career), var(--accent-agile), var(--accent-product), var(--accent-ai)); opacity:0.14; filter: blur(2px); animation: spin 22s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .stride-dot { filter: drop-shadow(0 0 8px currentColor); animation: pulse 2.6s ease-in-out infinite; } .sd-1 { animation-delay:0s; } .sd-2 { animation-delay:0.6s; } .sd-3 { animation-delay:1.2s; } .sd-4 { animation-delay:1.8s; } @keyframes pulse { 0%,100% { r:9; opacity:1; } 50% { r:12; opacity:0.75; } } .chip-float { position:absolute; z-index:3; border-radius:12px; padding:10px 16px; font-family:'Manrope',sans-serif; font-weight:800; font-size:12.5px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:#fff; backdrop-filter: blur(6px); display:flex; align-items:center; gap:8px; animation: chipfloat 7s ease-in-out infinite; } .chip-float .dot { width:7px; height:7px; border-radius:50%; } .chip-1 { top:4%; left:58%; animation-delay:0s; } .chip-2 { top:26%; left:56%; animation-delay:1.4s; } .chip-3 { top:48%; left:60%; animation-delay:2.8s; } .chip-4 { top:68%; left:55%; animation-delay:2.1s; } @keyframes chipfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (max-width: 1000px) { .chip-float, .hero-visual { display: none; } } /* Trust bar — waypoints along the stride path */ .trust-bar { position: relative; z-index: 3; margin-top: 86px; } .trust-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; } /* Credibility badges (Brief #19) — short phrases instead of stat placeholders, styled like the eyebrow tags used elsewhere in the hero. */ .trust-badge { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 60px; padding: 14px 16px; line-height: 1.4; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; } /* ========================================================================== Sections ========================================================================== */ .section { padding: 108px 0; } .section-soft { background: var(--bg-soft); } .section-navy { background: var(--navy); color: #fff; } /* Paper background — homepage + program pages only (see .bg-paper on ). Consulting/About/FAQ etc. keep the default white/--bg-soft. */ .bg-paper .section:not(.section-navy) { background: var(--paper); } .section-head { max-width: 620px; margin-bottom: 56px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { font-size: clamp(28px, 3.6vw, 42px); } .section-head p { color: var(--grey); font-size: 17px; margin-top: 16px; } .section-navy .section-head p { color: rgba(255,255,255,0.68); } .section-navy .eyebrow { color: var(--track-accent-light, var(--indigo-light)); } .section-navy .eyebrow::before { background: var(--track-accent-light, var(--indigo-light)); } /* Pillars (What We Do) */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pillar-card { background: linear-gradient(135deg, var(--track-accent, var(--indigo)), var(--track-accent-dark, var(--track-accent, var(--indigo)))); border: none; border-radius: var(--radius); color: #fff; padding: 32px 28px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); } .pillar-icon { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; } .pillar-card h3 { font-size: 18px; margin-bottom: 8px; color: #fff; } .pillar-card p { color: rgba(255,255,255,0.9); font-size: 14.5px; } .pillar-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin-bottom: 10px; display:block;} /* Fit / disqualifier */ .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .fit-card { border-radius: var(--radius); padding: 36px; } .fit-yes { background: var(--indigo-pale); } .fit-no { background: var(--bg-soft); border: 1px dashed var(--border); } .fit-card h4 { font-size: 17px; margin-bottom: 18px; } .fit-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .fit-card li { font-size: 14.5px; color: var(--navy); padding-left: 26px; position: relative; } .fit-yes li::before { content: "✓"; position: absolute; left: 0; color: var(--indigo); font-weight: 700; } .fit-no li::before { content: "✕"; position: absolute; left: 0; color: var(--grey-light); font-weight: 700; } /* Program grid */ .program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .program-card { background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--track-accent-solid, var(--track-accent, var(--indigo))); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; } .program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .program-top { padding: 30px 28px 0; } .program-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--track-accent-solid, var(--track-accent, var(--indigo))); background: var(--track-accent-pale, var(--indigo-pale)); padding: 5px 12px; border-radius: 20px; margin-bottom: 16px; } .program-card h3 { font-size: 20px; margin-bottom: 10px; } .program-card p.desc { color: var(--grey); font-size: 14.5px; } .program-meta { display: flex; gap: 18px; padding: 22px 28px; font-size: 13px; color: var(--grey); border-top: 1px solid var(--border); margin-top: 24px; } .program-meta span { display: flex; align-items: center; gap: 6px; } .program-bottom { padding: 20px 28px 28px; margin-top: auto; } /* Full-color track cards — homepage "Pick your track" + Product School hub (#programs). Career/AI Fluency's own service-grid cards (#services) keep the white-card/colored-border treatment above; they weren't part of this correction's scope. */ #programs .program-card { background: linear-gradient(135deg, var(--track-accent, var(--indigo)), var(--track-accent-dark, var(--track-accent, var(--indigo)))); border: none; color: #fff; } #programs .track-ai-product.program-card { background: var(--track-accent); } #programs .program-badge { background: rgba(255,255,255,0.22); color: #fff; } #programs .program-card h3 { color: #fff; } #programs .program-card p.desc { color: rgba(255,255,255,0.9); } #programs .program-meta { color: rgba(255,255,255,0.85); border-top-color: rgba(255,255,255,0.2); } #programs .program-bottom .btn { background: #fff; color: var(--navy); } #programs .program-bottom .btn:hover { background: rgba(255,255,255,0.9); } /* Featured deep-dive */ .deepdive { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; } .deepdive-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .deepdive-list li { display: flex; gap: 14px; font-size: 15px; } .deepdive-list li .num { font-family: var(--font-display); font-weight: 800; color: var(--indigo-light); font-size: 14px; padding-top: 2px; } .deepdive-card { background: var(--navy); border-radius: var(--radius); padding: 32px; color: #fff; } .fact-row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 14px; } .fact-row:last-child { border-bottom: none; } .fact-row span:first-child { color: rgba(255,255,255,0.6); } .fact-row span:last-child { font-weight: 600; } /* Why grid */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .why-item { text-align: left; } .why-item .idx { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--indigo); letter-spacing: 0.08em; margin-bottom: 14px; } .why-item h3 { font-size: 19px; margin-bottom: 10px; } .why-item p { color: var(--grey); font-size: 14.5px; } /* Pull quote */ .pull-quote { max-width: 780px; margin: 0 auto; padding: 0 20px; text-align: center; } .pull-quote p { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: clamp(22px, 3vw, 30px); line-height: 1.45; } /* Founder */ .founder { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; } .founder-photo { aspect-ratio: 4/5; border-radius: var(--radius); background: linear-gradient(160deg, var(--navy), var(--indigo)); color: rgba(255,255,255,0.7); font-size: 13px; overflow: hidden; box-shadow: var(--shadow-sm); } .founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .founder-badges { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .founder-badge { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 30px; padding: 8px 16px; font-size: 13px; font-weight: 500; } /* Newsletter */ .newsletter { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .newsletter-form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 440px; } .newsletter-form input { flex: 1; padding: 14px 18px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-family: var(--font-body); font-size: 14px; } .newsletter-form input::placeholder { color: rgba(255,255,255,0.5); } /* Below ~480px the input and Subscribe button can't both fit on one row without overflowing (Brief #9) — stack them instead. */ @media (max-width: 480px) { .newsletter-form { flex-direction: column; min-width: 0; width: 100%; max-width: 100%; } .newsletter-form .btn { width: 100%; } } /* Final CTA */ .final-cta { text-align: center; } .final-cta h2 { color: #fff; font-size: clamp(28px, 4vw, 44px); max-width: 700px; margin: 0 auto; } .final-cta p { color: rgba(255,255,255,0.7); margin-top: 18px; } .final-cta .hero-actions { justify-content: center; margin-top: 34px; } /* Footer */ .footer { background: var(--navy); color: rgba(255,255,255,0.7); padding: 70px 0 34px; position: relative; overflow: hidden; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .footer-logo img { height: 26px; margin-bottom: 16px; } .footer h5 { color: #fff; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--font-body); font-weight: 600; } .footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer a { font-size: 14px; } .footer a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 54px; padding-top: 26px; display: flex; justify-content: space-between; font-size: 13px; flex-wrap: wrap; gap: 12px; } /* Badges / small UI */ .badge-soft { background: var(--indigo-pale); color: var(--indigo); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; } /* Divider path (section-to-section signature) */ .stride-divider { height: 64px; position: relative; } .stride-divider svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* ========================================================================== Inner page hero (About, Program, Consulting, etc.) ========================================================================== */ .page-hero { background: linear-gradient(180deg, var(--navy), #1B2050); color: #fff; padding: 130px 0 90px; } /* Program detail pages (see .hero-track-gradient on ) get a hero gradient in their own track color instead of the default navy. */ .hero-track-gradient .page-hero { background: linear-gradient(135deg, var(--track-accent, var(--navy)), var(--track-accent-dark, #1B2050)); } .hero-track-gradient.track-ai-product .page-hero { background: var(--track-accent); } /* The old --track-accent-light eyebrow tint was tuned for a navy background; against the new colored gradient hero it reads too low-contrast (or is undefined for agile/ai-product), so use near-white instead. */ .hero-track-gradient .page-hero .eyebrow { color: rgba(255,255,255,0.85); } .hero-track-gradient .page-hero .eyebrow::before { background: rgba(255,255,255,0.85); } .page-hero .eyebrow { color: var(--track-accent-light, var(--indigo-light)); } .page-hero .eyebrow::before { background: var(--track-accent-light, var(--indigo-light)); } .page-hero h1 { color: #fff; font-size: clamp(32px, 4.6vw, 50px); max-width: 760px; } .page-hero p.lead { color: rgba(255,255,255,0.75); font-size: 17px; margin-top: 18px; max-width: 600px; } .breadcrumb { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 20px; } .breadcrumb a:hover { color: #fff; } /* Format facts table */ .fact-table { width: 100%; border-collapse: collapse; } .fact-table td { padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; } .fact-table td:first-child { color: var(--grey); width: 45%; } .fact-table td:last-child { font-weight: 600; } /* Curriculum module */ .module { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 22px 24px; margin-bottom: 14px; display: flex; gap: 18px; align-items: flex-start; } .module .m-num { font-family: var(--font-display); font-weight: 800; color: var(--indigo); font-size: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--indigo-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero-track-gradient .module .m-num { color: var(--track-accent-solid, var(--track-accent, var(--indigo))); background: var(--track-accent-pale, var(--indigo-pale)); } .module h4 { font-size: 15.5px; margin-bottom: 6px; } .module p { font-size: 13.5px; color: var(--grey); } /* Two-column layout */ .two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; } .sticky-side { position: sticky; top: 100px; } .pricing-card { background: var(--bg-soft); border-radius: var(--radius); padding: 32px; border: 1px solid var(--border); } .hero-track-gradient .pricing-card { border-top: 6px solid var(--track-accent-solid, var(--track-accent, var(--indigo))); } .price-line { font-family: var(--font-display); font-weight: 800; font-size: 28px; } .price-was { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--grey-light); text-decoration: line-through; margin-left: 8px; } .price-sub { font-size: 13px; color: var(--grey); margin-top: 4px; } .pricing-card .btn { margin-top: 22px; } .pricing-features { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pricing-features li { font-size: 13.5px; padding-left: 24px; position: relative; } .pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--indigo); font-weight: 700; } /* Impact stats */ .impact-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; } .impact-stats .num { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--indigo); } .impact-stats .lbl { font-size: 13.5px; color: var(--grey); margin-top: 6px; } /* Timeline */ .timeline { position: relative; padding-left: 8px; } .tl-item { display: flex; gap: 24px; margin-bottom: 36px; } .tl-dot { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: #fff; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; line-height: 1.3; } .tl-dot .yr { font-size: 14px; } .tl-card { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 20px 24px; flex: 1; } .tl-card h4 { font-size: 15px; margin-bottom: 6px; } .tl-card p { font-size: 13.5px; color: var(--grey); line-height: 1.6; } /* Cohort & urgency */ .cohort-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--navy); color: #fff; border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 20px; font-size: 13.5px; } .cohort-bar .label { color: var(--indigo-light); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; } .cohort-bar select { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 6px 10px; font-family: var(--font-body); font-size: 16px; } .slots-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--grey); margin: 10px 0 6px; } .slots-track { height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; } .slots-fill { height: 100%; background: var(--indigo); border-radius: 4px; } /* Price toggle (full vs installment) */ .price-toggle { display: flex; gap: 8px; background: var(--border); border-radius: var(--radius-sm); padding: 4px; margin: 18px 0; } .price-toggle button { flex: 1; padding: 9px 10px; border: none; background: none; border-radius: 8px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--grey); cursor: pointer; } .price-toggle button.active { background: #fff; color: var(--navy); box-shadow: 0 2px 6px rgba(20,24,59,0.08); } .price-detail { display: none; } .price-detail.active { display: block; } .price-note { font-size: 12px; color: var(--grey); margin-top: 4px; } /* Job opportunities grid */ .job-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; } .job-pill { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 13.5px; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 10px; } .job-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); flex-shrink: 0; } /* Certificate proof block */ .cert-block { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; background: var(--bg-soft); border-radius: var(--radius); padding: 40px; margin-top: 24px; } .cert-mock { aspect-ratio: 1.35/1; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; } .cert-mock .lock { width: 40px; height: 40px; border-radius: 50%; background: var(--indigo-pale); display: flex; align-items: center; justify-content: center; color: var(--indigo); font-size: 18px; } .cert-mock .cm-title { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--navy); } .cert-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .cert-list li { padding-left: 26px; position: relative; font-size: 14px; color: var(--navy); } .cert-list li::before { content: "✓"; position: absolute; left: 0; color: #16A34A; font-weight: 700; } /* Tabs */ .tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; } .tabs-nav button { border: none; background: none; padding: 14px 18px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--grey); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs-nav button.active { color: var(--indigo); border-bottom-color: var(--indigo); } .tab-panel { display: none; padding-top: 32px; } .tab-panel.active { display: block; animation: fadein 0.25s ease; } /* Secondary CTA link (soft, non-gating) */ .soft-alt { display: block; text-align: center; font-size: 12.5px; color: var(--grey); margin-top: 14px; } .soft-alt a { color: var(--indigo); font-weight: 600; } /* FAQ accordion */ .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body); font-size: 15.5px; font-weight: 600; color: var(--navy); } .faq-q .plus { font-size: 22px; color: var(--indigo); transition: transform 0.2s ease; font-weight: 300; } .faq-item.open .plus { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .faq-a-inner { padding-bottom: 22px; font-size: 14.5px; color: var(--grey); max-width: 640px; } /* Forms */ .form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; } .form-row { margin-bottom: 20px; } .form-row label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); font-family: var(--font-body); font-size: 16px; background: var(--bg-soft); transition: border-color 0.15s ease; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--indigo); outline: none; background: #fff; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Password show/hide toggle */ .password-field { position: relative; } .password-field input { padding-right: 44px; } .password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--grey-light); border-radius: 8px; padding: 0; } .password-toggle:hover { color: var(--grey); background: var(--border); } .password-toggle svg { width: 19px; height: 19px; } .form-step { display: none; } .form-step.active { display: block; animation: fadein 0.3s ease; } @keyframes fadein { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} } .step-indicator { display: flex; gap: 8px; margin-bottom: 32px; } .step-dot { flex: 1; height: 4px; border-radius: 4px; background: var(--border); } .step-dot.active { background: var(--indigo); } .form-nav { display: flex; justify-content: space-between; margin-top: 28px; } .honeypot { display: none; } /* Auth modal (Sign Up / Sign In / Forgot Password) */ .auth-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20, 24, 59, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } .auth-overlay.open { opacity: 1; visibility: visible; } .auth-modal { position: relative; background: #fff; border-radius: var(--radius); padding: 40px; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); } .auth-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--grey); display: flex; align-items: center; justify-content: center; } .auth-close:hover { background: var(--border); color: var(--navy); } .auth-screen { display: none; } .auth-screen.active { display: block; } .auth-screen h2 { font-size: 22px; padding-right: 20px; } .auth-sub { color: var(--grey); font-size: 14px; margin-top: 8px; margin-bottom: 26px; } .auth-screen form { margin-top: 22px; } .auth-optional { color: var(--grey-light); font-weight: 500; text-transform: none; letter-spacing: normal; } .auth-forgot { text-align: right; margin: -10px 0 20px; } .auth-forgot a { font-size: 13px; color: var(--indigo); font-weight: 600; } .consent-check { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 16px; font-size: 13px; color: var(--grey); cursor: pointer; line-height: 1.5; } .consent-check input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--indigo); cursor: pointer; } .consent-check a { color: var(--indigo); font-weight: 600; } .auth-error { background: #FEF2F2; color: #B91C1C; font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; } .auth-success { background: #F0FDF4; color: #15803D; font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; } .auth-footer { text-align: center; font-size: 13.5px; color: var(--grey); margin-top: 22px; } .auth-footer a { color: var(--indigo); font-weight: 600; } .auth-transition-msg { text-align: center; padding: 30px 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--navy); } @media (max-width: 768px) { .auth-overlay { padding: 0; } .auth-modal { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; display: flex; flex-direction: column; justify-content: center; } } /* Sticky mobile Enroll CTA — program detail pages only, mobile only. Shown by main.js once the hero has scrolled out of view. */ .sticky-mobile-cta { display: none; } @media (max-width: 768px) { body.has-sticky-cta { padding-bottom: 78px; } .sticky-mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: #fff; border-top: 1px solid var(--border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px -8px rgba(20,24,59,0.12); } .sticky-mobile-cta.visible { display: flex; } .sticky-mobile-cta .btn { width: 100%; } } /* Utility */ .text-center { text-align: center; } .mt-0 { margin-top: 0 !important; } .hidden { display: none !important; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: translateY(0); } /* ========================================================================== CATALOG PAGE ========================================================================== */ .cat-hero .cat-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; } .cat-filter-pill { padding: 10px 20px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .cat-filter-pill:hover { background: rgba(255,255,255,0.16); } .cat-filter-pill.active { background: #fff; color: var(--navy); } .cat-group { margin-bottom: 0; } .cat-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--track-accent-solid, var(--track-accent, var(--indigo))); margin-bottom: 24px; } .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cat-card { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .cat-card .top { position: relative; height: 148px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--track-accent, var(--indigo)), var(--track-accent-dark, var(--track-accent, var(--indigo)))); } .cat-card.track-ai-product .top { background: var(--track-accent); } .cat-card .top .dotgrid { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.5) 1.5px, transparent 1.5px); background-size: 16px 16px; } .cat-card .top .blob { position: absolute; border-radius: 50%; pointer-events: none; } .cat-card .top .blob.x1 { width: 90px; height: 90px; top: -30px; right: -30px; background: rgba(255,255,255,0.18); } .cat-card .top .blob.x2 { width: 50px; height: 50px; bottom: -20px; left: -15px; background: rgba(255,255,255,0.18); } .cat-card .top .blob.x3 { width: 30px; height: 30px; bottom: 12px; right: 22px; background: rgba(0,0,0,0.15); } .cat-icon { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 16px; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.32); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 10px 22px -6px rgba(0,0,0,0.35); } .cat-icon svg { width: 26px; height: 26px; } .cat-card .body { padding: 22px 24px 26px; } .cat-card h3 { font-size: 16.5px; margin-bottom: 8px; } .cat-card .body p { color: var(--grey); font-size: 13.5px; line-height: 1.55; } .cat-meta { display: flex; gap: 14px; font-size: 12px; color: var(--grey-light); margin-top: 14px; flex-wrap: wrap; } .cat-link { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 13.5px; color: var(--track-accent-solid, var(--track-accent-dark, var(--indigo))); } .cat-card.track-ai-product .cat-link { color: var(--track-accent-solid, #6C5CE7); } /* ========================================================================== Responsive ========================================================================== */ /* Tablet: 768–1024px — mostly follows the mobile stacking patterns below */ @media (max-width: 1024px) { .pillars, .program-grid, .why-grid, .cat-grid { grid-template-columns: repeat(2, 1fr); } .deepdive, .founder, .two-col { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .trust-track { grid-template-columns: repeat(2, 1fr); row-gap: 12px; } .job-grid { grid-template-columns: repeat(2, 1fr); } .cert-block { grid-template-columns: 1fr; } } /* Mobile: below 768px */ @media (max-width: 768px) { html { -webkit-text-size-adjust: 100%; } body { overflow-x: hidden; } /* Nav: hamburger + full-screen overlay menu. Sign In / logged-in menu stays in the top bar at all times — never buried in the hamburger. */ .nav-links { display: none; } .nav-cta .btn-outline { display: none; } .nav-toggle { display: block; z-index: 210; position: relative; } .nav-toggle span { transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-links.mobile-open { display: flex; flex-direction: column; align-items: stretch; position: fixed; top: 78px; left: 0; right: 0; height: calc(100vh - 78px); z-index: 190; background: #fff; padding: 12px 28px 40px; gap: 2px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-links.mobile-open a { padding: 16px 4px; font-size: 18px; border-bottom: 1px solid var(--border); min-height: 44px; display: flex; align-items: center; } .pillars, .program-grid, .why-grid, .fit-grid, .form-grid-2, .job-grid, .cat-grid { grid-template-columns: 1fr; } .section { padding: 64px 0; } .hero { padding: 116px 0 60px; } .founder-photo { aspect-ratio: 16/10; } .newsletter { flex-direction: column; align-items: flex-start; } .cohort-bar { flex-direction: column; align-items: flex-start; } /* Reflow card meta rows instead of letting them force horizontal scroll */ .program-meta { flex-wrap: wrap; row-gap: 8px; } .job-pill { font-size: 13px; } /* Minimum 44px tap targets on the site's core interactive controls */ .btn, .btn-sm { min-height: 44px; } .nav-signin, .user-menu-trigger { min-height: 44px; display: inline-flex; align-items: center; } .faq-q { min-height: 44px; } } /* True phone widths (Brief #16) — at 768px there's room for the full nav row, but logo + auth slot ("Sign In" or "Hi, Name") + the "Book a Free Consultation" CTA + the hamburger together need more like 440px, which doesn't exist at 360-430px. .nav-logo's flex-shrink:0 above stops the logo itself from being compressed/garbled, but that alone just pushes the overflow onto whatever's next to it — the CTA button needs to actually take up less room, not just be allowed to overflow elsewhere. */ @media (max-width: 480px) { .nav .container { padding: 0 16px; } .nav-cta { gap: 10px; } .nav-cta .btn-primary.btn-sm { padding: 0 12px; font-size: 12.5px; } .nav-cta .btn-primary.btn-sm .nav-btn-full { display: none; } .nav-cta .btn-primary.btn-sm .nav-btn-short { display: inline; } }