/* ── Color scheme: Lavender (default) ────────────────────────────── * Brand-default scheme. Tracks OS color preference: dark by default, * lavender-light when prefers-color-scheme is light. The homepage hero * keeps a dark background even in light mode (see "Lavender hero stays * dark" block below) — bold opener that anchors the brand. * * The pre-paint script in each page's sets data-scheme="lavender" * for first-time visitors. Repeat visitors who explicitly picked * forest-lime or indigo via the footer toggle keep their choice. */ :root, [data-scheme="lavender"] { --ink: #0F0A1E; --forest: #1A1035; --canopy: #1F0F3D; --moss: #2A1F4A; --lime: #C4B5FD; /* brand accent → electric lavender */ --lime-hover: #B19CFC; /* hover variant — slightly brighter */ --amber: #F5A623; --coral: #FF5C5C; --ice: #F3F0FF; --fog: #9C85C8; --border: rgba(196, 181, 253, 0.12); --ghost: rgba(196, 181, 253, 0.06); --on-cta: var(--ink); --hero-em: var(--lime); --noise-opacity: 0.35; } /* Light variant of lavender — tracks OS preference. Scoped to lavender (and unset = :root) so forest-lime/indigo are unaffected. */ @media (prefers-color-scheme: light) { :root, [data-scheme="lavender"] { --ink: #FAF8FF; /* lavender canvas */ --forest: #F3EFFF; --canopy: #FFFFFF; --moss: #EDE9FE; --lime: #6D28D9; /* deeper purple for AA on lavender */ --lime-hover: #5B21B6; /* deeper purple on hover */ --amber: #B36500; --coral: #C73838; --ice: #1A0F2E; --fog: #5A4F7E; --border: rgba(124, 58, 237, 0.15); --ghost: rgba(124, 58, 237, 0.06); --on-cta: #FFFFFF; /* white text on the deep-purple CTA */ --hero-em: #C4B5FD; --noise-opacity: 0.05; } } /* ── Color scheme: Forest + Lime (legacy) ───────────────────────── * No longer the brand default — kept as an explicit toggle option * for users who prefer the original Climer aesthetic. */ [data-scheme="forest-lime"] { --ink: #0A0F0D; --forest: #0D1F17; --canopy: #142A1E; --moss: #1E3D2C; --lime: #C8F53C; --lime-hover: #d4ff44; --amber: #F5A623; --coral: #FF5C5C; --ice: #E8F4EE; --fog: #8BA898; --border: rgba(232, 244, 238, 0.10); --ghost: rgba(232, 244, 238, 0.06); --on-cta: var(--ink); --hero-em: var(--lime); --noise-opacity: 0.4; } /* ── Color scheme: Indigo + Warm White ─────────────────────────── */ [data-scheme="indigo"] { --ink: #FAF7F0; /* page bg flips to warm white */ --forest: #EFEEFA; /* secondary surface → very light indigo */ --canopy: #FFFFFF; /* card surface → white */ --moss: #E5E5F5; --lime: #4F4FAF; /* "lime" tokens become indigo (text/wordmark) */ --lime-hover: #FFB940; /* hover on the amber CTA — brighter amber */ --amber: #F5A623; /* amber unchanged — used for CTAs + hero accent */ --coral: #C73838; /* darker coral for AA contrast on light bg */ --ice: #1A1B5E; /* primary text */ --fog: #6B70A8; /* muted text */ --border: rgba(26, 27, 94, 0.12); --ghost: rgba(75, 75, 200, 0.06); --on-cta: var(--ink); /* still dark text on the bright CTA */ --hero-em: var(--amber); /* MOUNTAIN word reads amber in indigo scheme */ --noise-opacity: 0.08; } /* Indigo-scheme button polish — CTAs become amber, ghost button picks up indigo. The .btn-lime:hover background is now driven by the --lime-hover token, so no scheme-specific override is needed here. */ [data-scheme="indigo"] .btn-lime { background: var(--amber); color: var(--on-cta); } [data-scheme="indigo"] .btn-ghost { background: var(--ghost); color: var(--ice); border-color: var(--border); } [data-scheme="indigo"] .btn-ghost:hover { border-color: var(--lime); color: var(--lime); } /* Lavender hero glow — purple radial tint instead of the default lime. Applies in both modes since the hero is dark either way. */ :root .hero::before, [data-scheme="lavender"] .hero::before { background: radial-gradient(circle, rgba(196, 181, 253, 0.10) 0%, transparent 70%); } /* The hero "MOUNTAIN" word — uses --hero-em so it can be lime in forest-lime scheme and amber in indigo scheme. */ .hero h1 em { color: var(--hero-em); } .section-title em { color: var(--hero-em); } .final-cta h2 em { color: var(--hero-em); } /* Routes-section gradient is hardcoded — invert in indigo */ [data-scheme="indigo"] .routes-section { background: linear-gradient(180deg, var(--ink) 0%, var(--forest) 100%); } /* Featured route card on indigo: amber bg instead of lime */ [data-scheme="indigo"] .route-card.featured { background: var(--amber); border-color: var(--amber); } /* Decorative hero glow: lime → amber blob */ [data-scheme="indigo"] .hero::before { background: radial-gradient(circle, rgba(245, 166, 35, 0.14) 0%, transparent 70%); } /* Nav backdrop — was always dark rgba; flip for light scheme */ [data-scheme="indigo"] nav { background: rgba(250, 247, 240, 0.85); } /* Final CTA decorative mountain emoji — too dark on white in indigo */ [data-scheme="indigo"] .final-cta::before { opacity: 0.06; } /* Stats strip uses --forest as bg — already overridden above */ /* Scheme picker (in footer) */ .scheme-toggle { display: inline-flex; gap: 4px; padding: 3px; background: var(--ghost); border: 1px solid var(--border); border-radius: 999px; align-items: center; } .scheme-toggle button { background: transparent; border: none; color: var(--fog); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: all 0.15s; } .scheme-toggle button:hover { color: var(--ice); } .scheme-toggle button[aria-pressed="true"] { background: var(--lime); color: var(--on-cta); } .scheme-toggle-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--fog); margin-right: 8px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } /* ── Accessibility (WCAG 2.1 AA) ───────────────────────────────── - Visible focus indicators on every interactive element - Skip-to-content link for keyboard users - prefers-reduced-motion respected - sr-only utility for screen-reader-only labels */ :focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; border-radius: 6px; } button:focus-visible, a:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; } .skip-link { position: absolute; top: -200px; left: 0; background: var(--lime); color: var(--ink); font-weight: 700; padding: 12px 20px; border-radius: 0 0 12px 0; z-index: 1000; transition: top 0.15s; text-decoration: none; } .skip-link:focus { top: 0; outline: 3px solid var(--ice); outline-offset: -3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } @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; } } body { font-family: 'Outfit', system-ui, sans-serif; background: var(--ink); color: var(--ice); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* Noise texture */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; opacity: 0.4; } .display { font-family: 'Fraunces', ui-serif, Georgia, serif; letter-spacing: -1px; line-height: 0.95; } /* Fraunces 700 baseline for all headings/wordmarks. */ .display, .wordmark, .hero h1, .section-title, .stat-val, .card-title, .final-cta h2, .faq-summary { font-weight: 700; } .lime { color: var(--lime); } .fog { color: var(--fog); } .amber { color: var(--amber); } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; } .narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; } /* Nav */ nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(20px); background: rgba(10,15,13,0.7); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1100px; margin: 0 auto; } .wordmark { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: 28px; font-weight: 700; letter-spacing: -1px; color: var(--lime); line-height: 1; } .nav-links { display: flex; align-items: center; gap: 24px; } .nav-links a { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; transition: color .15s; } /* Color scoped to non-button anchors so .btn-lime's dark ink wins on the CTA — the previous unscoped rule overrode the button text to --fog, which on the lavender button bg failed contrast. */ .nav-links a:not(.btn) { color: var(--fog); } .nav-links a:not(.btn):hover { color: var(--lime); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 14px 22px; border-radius: 12px; letter-spacing: 0.3px; transition: all .15s; border: 1px solid transparent; cursor: pointer; } .btn-lime { background: var(--lime); color: var(--ink); } .btn-lime:hover { background: var(--lime-hover); transform: translateY(-1px); } .btn-ghost { background: var(--ghost); color: var(--ice); border-color: var(--border); } .btn-ghost:hover { border-color: var(--lime); color: var(--lime); } .btn-lg { padding: 18px 30px; font-size: 16px; border-radius: 14px; } /* Hero */ .hero { padding: 80px 0 60px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(200,245,60,0.08) 0%, transparent 70%); pointer-events: none; } .hero-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--fog); margin-bottom: 18px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--canopy); } .hero h1 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: clamp(48px, 6vw, 60px); line-height: 0.95; letter-spacing: -1px; margin-bottom: 24px; } .hero h1 em { font-style: normal; color: var(--lime); } .hero-sub { font-size: 18px; color: var(--fog); max-width: 560px; margin-bottom: 32px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; } /* Stats */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--forest); gap: 1px; background-color: var(--border); } .stat { background: var(--forest); padding: 32px 24px; text-align: center; } .stat-val { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: 56px; color: var(--lime); line-height: 1; letter-spacing: -1px; margin-bottom: 8px; } .stat-lbl { font-size: 11px; color: var(--fog); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; } /* Section */ section { padding: 80px 0; position: relative; } .section-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px; color: var(--lime); margin-bottom: 16px; } .section-title { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: clamp(40px, 6vw, 54px); line-height: 0.95; letter-spacing: -1px; margin-bottom: 24px; } .section-title em { font-style: normal; color: var(--lime); } .section-lead { font-size: 18px; color: var(--fog); max-width: 680px; margin-bottom: 56px; } /* Three-up cards */ .three-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .card { background: var(--canopy); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; transition: border-color .2s; } .card:hover { border-color: rgba(200,245,60,0.3); } .card-icon { font-size: 36px; margin-bottom: 16px; line-height: 1; } .card-title { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: 28px; letter-spacing: -1px; margin-bottom: 8px; } .card-meta { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--lime); margin-bottom: 12px; } .card-body { font-size: 15px; color: var(--fog); } /* Routes */ .routes-section { background: linear-gradient(180deg, var(--ink) 0%, var(--forest) 100%); } .route-card { position: relative; overflow: hidden; } .route-card::before { content: attr(data-emoji); position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 88px; opacity: 0.10; pointer-events: none; } .route-card.featured { background: var(--lime); border-color: var(--lime); } .route-card.featured .card-meta { color: rgba(10,15,13,0.7); } .route-card.featured .card-title { color: var(--ink); } .route-card.featured .card-body { color: rgba(10,15,13,0.8); } /* Why now */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } @media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; } } .quote { font-size: 20px; line-height: 1.5; color: var(--ice); border-left: 3px solid var(--lime); padding: 8px 0 8px 20px; margin-bottom: 24px; } .quote-attr { font-size: 13px; color: var(--fog); } .quote-attr strong { color: var(--lime); } /* Audience */ .audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } /* CTA section */ .final-cta { background: var(--canopy); border-radius: 32px; padding: 64px 32px; text-align: center; border: 1px solid var(--border); position: relative; overflow: hidden; } .final-cta::before { content: '⛰'; position: absolute; font-size: 280px; opacity: 0.04; bottom: -60px; right: -40px; pointer-events: none; } .final-cta h2 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: clamp(40px, 6vw, 72px); letter-spacing: -1px; line-height: 0.95; margin-bottom: 16px; position: relative; } .final-cta h2 em { font-style: normal; color: var(--lime); } .final-cta p { font-size: 18px; color: var(--fog); margin-bottom: 32px; max-width: 540px; margin-left: auto; margin-right: auto; position: relative; } /* News + blog cards */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 32px; } .news-card { background: var(--canopy); border: 1px solid var(--border); border-radius: 20px; padding: 24px; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; } .news-card:hover { border-color: rgba(200,245,60,0.3); transform: translateY(-2px); } .news-card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 11px; color: var(--fog); } .news-card-source { display: flex; align-items: center; gap: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; } .news-card-dot { width: 8px; height: 8px; border-radius: 50%; } .news-card-title { font-family: 'Fraunces', ui-serif, Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--ice); margin-bottom: 12px; } .news-card-body { font-size: 14px; color: var(--fog); line-height: 1.6; margin-bottom: 16px; flex: 1; } .news-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; } .news-card-tag { font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 8px; } .tag-opp { background: rgba(200,245,60,0.1); color: var(--lime); } .tag-imp { background: rgba(255,92,92,0.1); color: var(--coral); } .tag-res { background: rgba(129,140,248,0.1); color: #818cf8; } .tag-mkt { background: rgba(245,166,35,0.1); color: var(--amber); } .news-card-link { font-weight: 700; color: var(--lime); display: inline-flex; align-items: center; gap: 4px; } .news-card-link:hover { color: var(--lime-hover); } /* Blog */ .blog-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .blog-list-item { background: var(--canopy); border: 1px solid var(--border); border-radius: 20px; padding: 28px; transition: border-color .15s; display: flex; flex-direction: column; gap: 8px; } .blog-list-item:hover { border-color: rgba(200,245,60,0.3); } .blog-list-meta { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--lime); } .blog-list-title { font-family: 'Fraunces', ui-serif, Georgia, serif; font-weight: 600; font-size: 28px; line-height: 1.15; color: var(--ice); } .blog-list-excerpt { color: var(--fog); font-size: 16px; line-height: 1.6; } /* Article (long-form blog post) */ .article { max-width: 720px; margin: 0 auto; padding: 60px 24px 80px; position: relative; z-index: 2; } .article-meta { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--lime); margin-bottom: 16px; } .article h1 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: clamp(36px, 5vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -1px; color: var(--ice); margin-bottom: 16px; } .article-byline { font-size: 14px; color: var(--fog); margin-bottom: 40px; border-bottom: 1px solid var(--border); padding-bottom: 24px; } .article-byline a { color: var(--lime); } .article p, .article li { font-size: 17px; line-height: 1.65; color: var(--ice); margin-bottom: 18px; } /* color-mix lets us soften the body text 8% without hardcoding a color value that breaks on the indigo (warm-white) scheme. */ .article p { color: color-mix(in srgb, var(--ice) 92%, transparent); } .article h2 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -1px; color: var(--ice); margin: 48px 0 16px; } .article h3 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: 22px; font-weight: 700; letter-spacing: -1px; color: var(--ice); margin: 32px 0 12px; } .article ul, .article ol { padding-left: 24px; margin-bottom: 18px; } .article li { margin-bottom: 8px; } /* Inline article links — scoped to non-button anchors so the .btn-lime CTA keeps its dark ink on the lavender background instead of being recolored to var(--lime) and disappearing into its own background. */ .article a:not(.btn) { color: var(--lime); text-decoration: underline; } .article a:not(.btn):hover { color: var(--lime-hover); } .article strong { color: var(--ice); font-weight: 700; } .article blockquote { border-left: 3px solid var(--lime); padding: 8px 0 8px 20px; margin: 24px 0; font-size: 19px; line-height: 1.5; color: var(--ice); font-style: italic; } .article-cta { background: var(--canopy); border: 1px solid rgba(200,245,60,0.3); border-radius: 16px; padding: 28px; margin: 40px 0; text-align: center; } .article-cta p { font-size: 18px; margin-bottom: 16px; } /* Stronger end-of-article CTA — appears as the closing block on every post. Designed to convert readers into app sign-ups. */ .article-final-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--canopy), var(--moss)); border: 1px solid var(--border); border-radius: 22px; padding: 48px 32px; margin: 64px 0 24px; text-align: center; } .article-final-cta::before { content: '⛰'; position: absolute; bottom: -30px; right: -10px; font-size: 200px; opacity: 0.05; pointer-events: none; line-height: 1; } .article-final-cta h2 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-weight: 700; font-size: clamp(28px, 4vw, 40px); letter-spacing: -1px; line-height: 1.05; color: var(--ice); margin: 0 0 12px; } .article-final-cta h2 em { font-style: normal; color: var(--hero-em, var(--lime)); } .article-final-cta p { color: var(--fog); font-size: 16px; line-height: 1.6; max-width: 460px; margin: 0 auto 24px; } .article-final-cta .meta-row { margin-top: 18px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--fog); } /* FAQ list — used on /contact */ .faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .faq-item { background: var(--canopy); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; transition: border-color .15s; } .faq-item[open] { border-color: rgba(200,245,60,0.3); } .faq-summary { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: 20px; color: var(--ice); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq-summary::-webkit-details-marker { display: none; } .faq-summary::after { content: '+'; font-family: 'Outfit', system-ui, sans-serif; font-weight: 400; font-size: 28px; color: var(--lime); transition: transform .2s; } .faq-item[open] .faq-summary::after { transform: rotate(45deg); } .faq-answer { margin-top: 12px; color: var(--fog); font-size: 16px; line-height: 1.6; } .faq-answer a { color: var(--lime); text-decoration: underline; } /* Contact-specific */ .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; } .contact-card { background: var(--canopy); border: 1px solid var(--border); border-radius: 20px; padding: 24px; } .contact-card h3 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: 22px; font-weight: 600; margin-bottom: 8px; color: var(--ice); } .contact-card p { color: var(--fog); font-size: 15px; } /* Footer */ footer { border-top: 1px solid var(--border); padding: 48px 0 32px; font-size: 13px; color: var(--fog); } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-links { display: flex; gap: 20px; } .footer-links a:hover { color: var(--lime); } /* ── Trust ribbon (under hero) ─────────────────────────────────── */ .trust-bar { background: var(--canopy); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 24px; position: relative; z-index: 2; } .trust-bar-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; font-size: 12px; font-weight: 700; color: var(--fog); text-transform: uppercase; letter-spacing: 1.5px; } .trust-bar-item { display: inline-flex; align-items: center; gap: 8px; } .trust-bar-item::before { content: '✓'; color: var(--lime); font-weight: 800; font-size: 14px; } /* ── Educators section ─────────────────────────────────────────── */ .educators { background: var(--canopy); border: 1px solid var(--border); border-radius: 24px; padding: 56px; } .educators-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .educators .section-lead { margin-bottom: 24px; } .educators ul { list-style: none; padding: 0; margin: 0 0 28px 0; } .educators li { display: flex; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--fog); line-height: 1.55; } .educators li::before { content: '✓'; color: var(--lime); font-weight: 800; flex-shrink: 0; font-size: 16px; line-height: 1.55; } .educators li strong { color: var(--ice); font-weight: 700; } @media (max-width: 768px) { .educators { padding: 32px 24px; border-radius: 16px; } .educators-grid { grid-template-columns: 1fr; gap: 28px; } } /* ── Generic checklist (✓-bulleted list, lavender-tinted) ─────── */ .checklist { list-style: none; padding: 0; margin: 0; } .checklist li { display: flex; gap: 12px; padding: 10px 0; font-size: 16px; color: var(--fog); line-height: 1.55; } .checklist li::before { content: '✓'; color: var(--lime); font-weight: 800; flex-shrink: 0; font-size: 16px; } .checklist li strong { color: var(--ice); font-weight: 700; } .checklist.dont li::before { content: '✗'; color: var(--coral); } /* ── Audience cards: 6-up grid for the homepage routing UI ────── */ .audience-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .audience-card { background: var(--canopy); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 14px; text-decoration: none; transition: border-color .15s, transform .15s; } .audience-card:hover { border-color: var(--lime); transform: translateY(-2px); } .audience-card-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; } .audience-card-label { font-size: 15px; font-weight: 700; color: var(--ice); } .audience-card-arrow { margin-left: auto; color: var(--fog); font-size: 18px; flex-shrink: 0; } /* ── Audience tall cards: 4-up vertical cards with hover-expand ── * Inspired by Vanta's "Proof? We've got proof." gallery — flex * layout with all cards equal width by default, hovered card grows * while siblings shrink. Pure CSS, no JS. */ .audience-tall-cards { display: flex; gap: 14px; /* Row height is locked here — not on the cards. Cards stretch to fill this height. The combo of aspect-ratio + min-height:0 + overflow: hidden makes the row's height a hard cap that no card content can ever push past. 12/5 ≈ four 3:5 cards side-by-side after gaps. */ aspect-ratio: 12 / 5; min-height: 0; overflow: hidden; } .audience-tall-card { flex: 1 1 0; min-width: 0; /* Override flex item's default min-height: auto, which would let a card's content (e.g. revealed voice text) force the row taller. */ min-height: 0; height: 100%; position: relative; background: linear-gradient(170deg, var(--canopy) 0%, var(--ink) 100%); /* fallback if img fails */ border: 1px solid var(--border); border-radius: 22px; padding: 28px 24px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; overflow: hidden; transition: border-color 0.25s ease; } /* Background photo — fills the card, sits below the gradient overlay and the body text. */ .audience-tall-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .audience-tall-card:hover .audience-tall-img { transform: scale(1.05); } /* Dark-bottom gradient so the body text stays readable on any photo */ .audience-tall-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 10, 30, 0.15) 0%, rgba(15, 10, 30, 0.55) 45%, rgba(15, 10, 30, 0.95) 100%); z-index: 1; transition: background 0.35s ease; pointer-events: none; } .audience-tall-card:hover::before { background: linear-gradient(180deg, rgba(15, 10, 30, 0.2) 0%, rgba(15, 10, 30, 0.65) 40%, rgba(15, 10, 30, 0.97) 100%); } /* Hover: in-place feedback — image zooms, border tints. No size change on the card itself, so siblings stay put and the row doesn't reflow. */ .audience-tall-cards .audience-tall-card:hover { border-color: var(--lime); } .audience-tall-body { display: flex; flex-direction: column; gap: 10px; /* Absolute so growing the voice reveal can't push the card past its aspect-ratio and grow the row's height. Offsets match card padding (28px vertical / 24px horizontal). Reset to relative below 520px where the card uses aspect-ratio: auto and sizes to content. */ position: absolute; left: 24px; right: 24px; bottom: 28px; z-index: 2; } .audience-tall-meta { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--fog); } .audience-tall-label { font-family: 'Fraunces', ui-serif, Georgia, serif; font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -0.5px; color: var(--ice); } /* Composite-voice quote — reveals on hover. Eyebrow makes the framing honest: this is "what audiences tend to say," not an attributed testimonial from a real (or fake) person. */ .audience-tall-voice { display: flex; flex-direction: column; gap: 6px; /* Hidden on collapsed cards, revealed when this one is hovered */ max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease 0.05s; } .audience-tall-voice-eyebrow { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--lime); } .audience-tall-voice p { font-family: 'Fraunces', ui-serif, Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.4; color: var(--ice); margin: 0; } .audience-tall-card:hover .audience-tall-voice { max-height: 240px; opacity: 1; } .audience-tall-arrow { display: inline-block; margin-top: 8px; font-size: 22px; color: var(--lime); transition: transform 0.25s ease; } .audience-tall-card:hover .audience-tall-arrow { transform: translateX(6px); } /* Below ~900px: stack 2-up, then 1-up */ @media (max-width: 900px) { .audience-tall-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; /* Desktop locks (aspect-ratio + overflow + min-height) are off here so the grid can size naturally to its cards. */ aspect-ratio: auto; overflow: visible; min-height: 0; } .audience-tall-card { aspect-ratio: 4 / 5; height: auto; min-height: 0; } /* On touch / smaller screens, show the sub copy by default */ .audience-tall-voice { max-height: 240px; opacity: 1; } } @media (max-width: 520px) { .audience-tall-cards { grid-template-columns: 1fr; } .audience-tall-card { aspect-ratio: auto; min-height: 200px; padding: 24px; } /* Card no longer has a fixed aspect-ratio here, so let the body contribute to the card's height again. */ .audience-tall-body { position: relative; left: auto; right: auto; bottom: auto; } } /* ── Trust row on landing pages ──────────────────────────────── */ .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font-size: 13px; font-weight: 700; color: var(--fog); text-transform: uppercase; letter-spacing: 1.5px; padding: 28px 0; } .trust-row span { display: inline-flex; align-items: center; gap: 8px; } .trust-row span::before { content: '✓'; color: var(--lime); font-weight: 800; font-size: 14px; } /* ── Lightweight contact form (used on /for-educators, /partner) ── */ .contact-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; } .contact-form label { font-size: 13px; font-weight: 700; color: var(--ice); } .contact-form input, .contact-form textarea { width: 100%; background: var(--ghost); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--ice); font-family: inherit; font-size: 15px; resize: vertical; } .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--lime); } .contact-form textarea { min-height: 100px; } /* ── Salary calculator table — static for v1 ─────────────────── */ .calc-table { width: 100%; border-collapse: collapse; margin: 20px 0; background: var(--canopy); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .calc-table td, .calc-table th { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: 15px; } .calc-table tr:last-child td { border-bottom: 0; } .calc-table th { color: var(--fog); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; } .calc-table td:last-child { color: var(--lime); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } /* ── Inline timeline (job-seeker credential timeline) ─────────── */ .timeline { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; } .timeline li { position: relative; padding: 18px 0 18px 32px; border-left: 2px solid var(--border); margin-left: 8px; font-size: 15px; color: var(--fog); line-height: 1.55; } .timeline li::before { content: ''; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); } .timeline li strong { color: var(--ice); display: block; font-size: 16px; margin-bottom: 4px; } .timeline li:last-child { border-left-color: transparent; } @media (max-width: 600px) { .nav-links a:not(.btn) { display: none; } .hero { padding: 56px 0 40px; } .stats { grid-template-columns: 1fr; } .stat { padding: 20px; } .stat-val { font-size: 40px; } .trust-bar-inner { gap: 16px; font-size: 11px; letter-spacing: 1px; } } /* ── Lavender hero stays dark in light mode ────────────────────── * Per the brand spec, the homepage hero keeps a dark canvas even * when OS prefers light. The rest of the page (sections, stats, * footer) follows the light variant defined above. The nav, which * sits visually atop the hero, is also flipped to dark — but only * on pages that have a .hero (i.e., the homepage), so privacy/blog/ * contact navs stay lavender-light. body:has() does the page check. * * Applies to lavender (or unset) only — forest-lime and indigo * users keep their existing behavior. */ @media (prefers-color-scheme: light) { :root .hero, [data-scheme="lavender"] .hero { background: #0F0A1E; color: #F3F0FF; } :root .hero .hero-eyebrow, [data-scheme="lavender"] .hero .hero-eyebrow { color: #9C85C8; background: rgba(196, 181, 253, 0.06); border-color: rgba(196, 181, 253, 0.18); } :root .hero h1, [data-scheme="lavender"] .hero h1 { color: #F3F0FF; } :root .hero h1 em, [data-scheme="lavender"] .hero h1 em { color: #C4B5FD; } :root .hero-sub, [data-scheme="lavender"] .hero-sub { color: #9C85C8; } /* Decorative glow tints purple instead of lime */ :root .hero::before, [data-scheme="lavender"] .hero::before { background: radial-gradient(circle, rgba(196, 181, 253, 0.10) 0%, transparent 70%); } /* Ghost CTA on the dark hero needs lighter ink to stay readable */ :root .hero .btn-ghost, [data-scheme="lavender"] .hero .btn-ghost { background: rgba(196, 181, 253, 0.08); color: #F3F0FF; border-color: rgba(196, 181, 253, 0.18); } /* Primary CTA on the dark hero — white text on purple reads cleanly */ :root .hero .btn-lime, [data-scheme="lavender"] .hero .btn-lime { background: #8B5CF6; color: #FFFFFF; } :root .hero .btn-lime:hover, [data-scheme="lavender"] .hero .btn-lime:hover { background: #7C3AED; } /* Nav above the dark hero — only on the homepage */ :root body:has(.hero) nav, [data-scheme="lavender"] body:has(.hero) nav { background: rgba(15, 10, 30, 0.85); border-bottom: 1px solid rgba(196, 181, 253, 0.12); } :root body:has(.hero) .wordmark, [data-scheme="lavender"] body:has(.hero) .wordmark { color: #C4B5FD; } :root body:has(.hero) .nav-links a:not(.btn), [data-scheme="lavender"] body:has(.hero) .nav-links a:not(.btn) { color: #9C85C8; } :root body:has(.hero) .nav-links a:not(.btn):hover, [data-scheme="lavender"] body:has(.hero) .nav-links a:not(.btn):hover { color: #C4B5FD; } /* Trust bar sits directly under the dark hero — matching dark surface */ :root body:has(.hero) .trust-bar, [data-scheme="lavender"] body:has(.hero) .trust-bar { background: #1A1035; border-top-color: rgba(196, 181, 253, 0.12); border-bottom-color: rgba(196, 181, 253, 0.12); } :root body:has(.hero) .trust-bar-inner, [data-scheme="lavender"] body:has(.hero) .trust-bar-inner { color: #9C85C8; } :root body:has(.hero) .trust-bar-item::before, [data-scheme="lavender"] body:has(.hero) .trust-bar-item::before { color: #C4B5FD; } }