/* Foundry public site (foundryconnect.org). Tokens are Foundry Connect's --fc-* system, copied from connect/Foundry Connect.html so the site and Connect read as one product. Light is the default; dark applies when (the toggle, saved as localStorage 'fc-theme' like Connect) or, before any choice, from the OS setting. */ :root, [data-theme="light"] { --fc-page: linear-gradient(180deg, #FFFFFF 0%, #F2ECDE 100%); --fc-surface: #FFFFFF; --fc-rail: #F7F1E6; --fc-ink: #1C1C1F; --fc-soft: #6B6257; --fc-read: #856A57; --fc-faint: #9B9187; --fc-line: rgba(28, 28, 31, .09); --fc-line2: rgba(28, 28, 31, .14); --fc-chip-bg: #FBEEDD; --fc-accent-ink: #B85E14; --fc-spark: #4E7A93; --fc-spark-bg: #E7EFF3; --fc-card: #FFFFFF; --fc-soft-panel: #F7F1E6; --fc-ahead-bg: linear-gradient(150deg, #FBF3E6, #F5E9D6); --fc-ahead-border: rgba(244, 127, 33, .26); /* site-only */ --band: rgba(247, 241, 230, .72); --header-bg: rgba(255, 255, 255, .82); --shadow: 0 18px 50px rgba(24, 33, 40, .16); --shadow-soft: 0 8px 24px rgba(24, 33, 40, .08); --switch-off: #D9D2C6; --err: #C4471B; color-scheme: light; } [data-theme="dark"] { --fc-page: linear-gradient(180deg, #36586C 0%, #1E2C34 60%, #182128 100%); --fc-surface: #212226; --fc-rail: #1B2831; --fc-ink: #F3EFE8; --fc-soft: #B7C4CB; --fc-read: #A1C7DC; --fc-faint: #8593A0; --fc-line: rgba(255, 255, 255, .09); --fc-line2: rgba(255, 255, 255, .16); --fc-chip-bg: rgba(244, 127, 33, .16); --fc-accent-ink: #F89C1C; --fc-spark: #A1C7DC; --fc-spark-bg: rgba(161, 199, 220, .14); --fc-card: #272A2F; --fc-soft-panel: #232D34; --fc-ahead-bg: linear-gradient(150deg, #22343E, #141C22); --fc-ahead-border: rgba(255, 255, 255, .09); --band: rgba(0, 0, 0, .14); --header-bg: rgba(27, 40, 49, .86); --shadow: 0 18px 50px rgba(0, 0, 0, .35); --shadow-soft: 0 8px 24px rgba(0, 0, 0, .22); --switch-off: #4A5560; --err: #FF8F6B; color-scheme: dark; } /* No saved choice yet (and no JS): follow the OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --fc-page: linear-gradient(180deg, #36586C 0%, #1E2C34 60%, #182128 100%); --fc-surface: #212226; --fc-rail: #1B2831; --fc-ink: #F3EFE8; --fc-soft: #B7C4CB; --fc-read: #A1C7DC; --fc-faint: #8593A0; --fc-line: rgba(255, 255, 255, .09); --fc-line2: rgba(255, 255, 255, .16); --fc-chip-bg: rgba(244, 127, 33, .16); --fc-accent-ink: #F89C1C; --fc-spark: #A1C7DC; --fc-spark-bg: rgba(161, 199, 220, .14); --fc-card: #272A2F; --fc-soft-panel: #232D34; --fc-ahead-bg: linear-gradient(150deg, #22343E, #141C22); --fc-ahead-border: rgba(255, 255, 255, .09); --band: rgba(0, 0, 0, .14); --header-bg: rgba(27, 40, 49, .86); --shadow: 0 18px 50px rgba(0, 0, 0, .35); --shadow-soft: 0 8px 24px rgba(0, 0, 0, .22); --switch-off: #4A5560; --err: #FF8F6B; color-scheme: dark; } } /* ---------- base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100vh; background: var(--fc-page); background-color: var(--fc-surface); color: var(--fc-ink); font: 400 17px/1.55 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; transition: background .4s ease; } a { color: var(--fc-accent-ink); text-decoration: none; } a:hover { color: #F47F21; } :focus-visible { outline: 2px solid #F47F21; outline-offset: 3px; border-radius: 4px; } img { max-width: 100%; display: block; } h1, h2, h3, p { margin: 0; } button { font-family: inherit; cursor: pointer; color: inherit; } .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; } .section { padding: 104px 0; } .band { background: var(--band); border-top: 1px solid var(--fc-line); border-bottom: 1px solid var(--fc-line); } .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--fc-surface); padding: 10px 14px; border-radius: 10px; } .skip:focus { left: 12px; } .nowrap { white-space: nowrap; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- type ---------- */ .display { font-family: 'Literata', Georgia, serif; font-weight: 400; letter-spacing: -.01em; color: var(--fc-ink); } h1.display { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.07; } h2.display { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.14; } .lede { font-size: 19px; line-height: 1.6; color: var(--fc-soft); } .muted { color: var(--fc-soft); } .small { font-size: 15px; } /* Connect's section marker: a short orange rule + an uppercase label. */ .mark { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; } .mark::before { content: ""; width: 22px; height: 2px; background: #F47F21; flex: none; } .mark span { font: 800 12px/1.3 'Sofia Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--fc-accent-ink); } .chip { display: inline-flex; align-items: center; font: 600 13px/1 'Sofia Sans', sans-serif; color: var(--fc-accent-ink); background: var(--fc-chip-bg); padding: 8px 13px; border-radius: 20px; } /* ---------- buttons (Connect's primary + pill styles) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: none; border-radius: 12px; font: 800 15px/1 'Sofia Sans', sans-serif; color: #fff; background: #F47F21; transition: background .2s, transform .2s; } .btn:hover { background: #E06E12; color: #fff; } .btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; } .pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font: 600 13.5px/1 'Sofia Sans', sans-serif; color: var(--fc-soft); background: var(--fc-surface); border: 1px solid var(--fc-line2); border-radius: 22px; transition: border-color .2s, color .2s; } .pill:hover { border-color: #F47F21; color: var(--fc-accent-ink); } .link-arrow { font-weight: 700; color: var(--fc-ink); text-decoration: underline; text-decoration-color: #F47F21; text-underline-offset: 5px; text-decoration-thickness: 2px; } .link-arrow:hover { color: var(--fc-accent-ink); } /* ---------- placeholders (content still owed; see site/README.md) ---------- */ .ph { outline: 1.5px dashed var(--fc-faint); outline-offset: 3px; border-radius: 6px; color: var(--fc-faint); font-style: italic; } .ph-box { border: 1.5px dashed var(--fc-line2); border-radius: 14px; padding: 16px 20px; color: var(--fc-soft); font-style: italic; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--fc-line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 11px; } .brand svg { width: 20px; height: 32px; flex: none; } .brand span { font: 400 17px/1 'Sofia Sans', sans-serif; letter-spacing: .15em; text-transform: uppercase; color: var(--fc-accent-ink); } .nav { display: flex; align-items: center; gap: 28px; } .nav a { font-weight: 600; font-size: 15.5px; color: var(--fc-ink); } .nav a:hover { color: var(--fc-accent-ink); } .header-actions { display: flex; align-items: center; gap: 10px; } .header-actions .signin { font-weight: 600; font-size: 15.5px; color: var(--fc-ink); padding: 0 8px; } .menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--fc-line2); border-radius: 12px; background: var(--fc-surface); align-items: center; justify-content: center; } .menu-btn svg { width: 20px; height: 20px; } .mobile-nav { display: none; } /* ---------- hero ---------- */ .hero { padding: 72px 0 0; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: center; } .hero-copy { display: flex; flex-direction: column; gap: 24px; } .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: 4px; } .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; color: var(--fc-soft); } .meta span:not(:last-child)::after { content: "ยท"; margin-left: 14px; color: var(--fc-faint); } .proof { margin-top: 72px; padding: 24px 0; border-top: 1px solid var(--fc-line); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; } .proof-logos { display: flex; align-items: center; gap: 28px; } .proof-logos img { height: 64px; width: auto; } .proof-line { font-size: 16px; font-weight: 600; color: var(--fc-soft); } /* the hero visual: a Connect recap (HTML, themed) with the student's phone in front */ .stage { position: relative; min-height: 580px; } .connect-mock { position: absolute; right: 0; top: 0; width: 63%; background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; } .cm-top { background: linear-gradient(150deg, #36586C 0%, #223642 55%, #182128 100%); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cm-top .brand svg { width: 14px; height: 22px; } .cm-top .brand span { font-size: 12px; color: #F89C1C; white-space: nowrap; } .cm-viewing { font: 600 12px/1 'Sofia Sans', sans-serif; color: #D8E3E9; border: 1px solid rgba(255,255,255,.22); border-radius: 20px; padding: 7px 11px; white-space: nowrap; } .cm-person { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--fc-rail); border-bottom: 1px solid var(--fc-line); } .cm-shared-line { font-size: 12px; color: var(--fc-soft); margin-top: 2px; } .cm-boundary { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fc-faint); padding-top: 2px; } .cm-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--fc-chip-bg); color: var(--fc-accent-ink); font: 700 16px/38px 'Sofia Sans', sans-serif; text-align: center; } .cm-name { font: 400 18px/1.2 'Literata', serif; } .dot-off { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dot-off { border: 1.5px solid var(--fc-faint); } .cm-main { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; } .cm-main .mark { margin: 0; } .cm-main .mark::before { width: 14px; } .cm-main .mark span { font-size: 9.5px; } .cm-portrait { font: 400 14px/1.55 'Literata', serif; color: var(--fc-read); } .cm-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cm-chips .chip { font-size: 11px; padding: 6px 9px; } .cm-trail { background: var(--fc-soft-panel); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; color: var(--fc-soft); } .cm-trail strong { color: var(--fc-ink); font-weight: 700; } .phone { position: relative; border-radius: 38px; padding: 9px; background: #121417; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.06); } .phone img { border-radius: 30px; width: 100%; height: auto; } .stage .phone { position: absolute; left: 0; top: 96px; width: 40%; max-width: 232px; z-index: 1; } .shot-dark { display: none; } [data-theme="dark"] .shot-light { display: none; } [data-theme="dark"] .shot-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .shot-light { display: none; } :root:not([data-theme]) .shot-dark { display: block; } } .stage-tag { position: absolute; right: 0; bottom: 36px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 22px; background: var(--fc-surface); border: 1px solid var(--fc-ahead-border); box-shadow: var(--shadow-soft); font: 700 13.5px/1.2 'Sofia Sans', sans-serif; color: var(--fc-accent-ink); } .stage-tag svg { width: 14px; height: 16px; flex: none; } /* ---------- section heads ---------- */ .head { max-width: 780px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; } .head.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; } .head.center .mark { justify-content: center; } /* ---------- cards ---------- */ .card { background: var(--fc-card); border: 1px solid var(--fc-line); border-radius: 16px; box-shadow: var(--shadow-soft); } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .value { padding: 30px; display: flex; flex-direction: column; gap: 12px; } .value h3 { font-size: 21px; font-weight: 800; line-height: 1.25; } .value p { color: var(--fc-soft); font-size: 16.5px; } .icon { width: 46px; height: 46px; border-radius: 12px; background: var(--fc-chip-bg); color: var(--fc-accent-ink); display: flex; align-items: center; justify-content: center; } .icon svg { width: 22px; height: 22px; } /* ---------- split sections ---------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; } .split.reverse > :first-child { order: 2; } .feature-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; } .feature-list li { display: flex; gap: 16px; align-items: flex-start; } .feature-list .icon { width: 42px; height: 42px; border-radius: 11px; flex: none; } .feature-list .icon svg { width: 20px; height: 20px; } .feature-list h3 { font-size: 18px; font-weight: 800; line-height: 1.3; margin-bottom: 3px; } .feature-list p { color: var(--fc-soft); font-size: 16px; } .after-list { margin-top: 30px; } /* counselor view: a larger Connect mock with the student switcher */ .caseload { padding: 0; overflow: hidden; } .caseload .cm-top { padding: 16px 20px; } .switcher { display: flex; flex-direction: column; } .switcher-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--fc-line); } .switcher-row:last-child { border-bottom: none; } .switcher-row.active { background: var(--fc-soft-panel); } .switcher-row .cm-avatar { width: 34px; height: 34px; font-size: 14px; line-height: 34px; } .switcher-row b { font-weight: 700; } .switcher-row small { display: block; color: var(--fc-soft); font-size: 13.5px; } .switcher-row .chip { margin-left: auto; font-size: 11.5px; padding: 6px 10px; } /* families: Connect on a parent's phone (HTML, themed) */ .family-phone { width: 100%; max-width: 300px; margin: 0 auto; } .phone-ui .pui { border-radius: 30px; overflow: hidden; background: #22343E; min-height: 560px; display: flex; flex-direction: column; } .pui-head { background: linear-gradient(160deg, #36586C 0%, #223642 60%, #1B2A33 100%); padding-top: 10px; } .pui-island { width: 88px; height: 24px; margin: 0 auto; border-radius: 14px; background: #121417; } .phone-ui .cm-top { background: none; } .phone-ui .cm-main { flex: 1; background: var(--fc-surface); } .phone-ui[data-lang="es"] [lang="en"], .phone-ui[data-lang="en"] [lang="es"] { display: none; } .lang-switch { display: flex; justify-content: center; gap: 4px; width: fit-content; margin: 20px auto 0; padding: 4px; border-radius: 24px; background: var(--fc-surface); border: 1px solid var(--fc-line2); } .lang-switch button { min-height: 36px; padding: 0 16px; border: none; border-radius: 20px; background: none; font: 600 14px/1 'Sofia Sans', sans-serif; color: var(--fc-soft); } .lang-switch button:hover { color: var(--fc-accent-ink); } .lang-switch button[aria-pressed="true"] { background: var(--fc-chip-bg); color: var(--fc-accent-ink); font-weight: 800; } .phone-ui .cm-top { padding: 12px 16px 14px; } .phone-ui .cm-portrait { font-size: 15px; } .pui-note { margin-top: 8px; text-align: center; padding: 12px; border-radius: 12px; background: #F47F21; color: #fff; font: 800 13.5px/1 'Sofia Sans', sans-serif; } .es-note { margin-top: 12px; text-align: center; font-size: 14px; color: var(--fc-soft); } /* ---------- trust diagram ---------- */ .flow { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1.5fr) 110px minmax(0, 1fr); align-items: center; } .flow-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; } .flow-card h3 { font-size: 19px; font-weight: 800; } .flow-card p { color: var(--fc-soft); font-size: 15.5px; } .flow-card .icon { width: 44px; height: 44px; } .arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 8px; text-align: center; font: 700 13px/1.3 'Sofia Sans', sans-serif; color: var(--fc-soft); } .arrow svg { width: 88px; height: 16px; color: #F47F21; } .who { padding: 22px 24px; } .who-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .who-head b { font-size: 17px; } .who-head span { font-size: 13px; color: var(--fc-soft); } .who-row { border-top: 1px solid var(--fc-line); padding-top: 12px; margin-top: 12px; } .who-row > div:first-child { font-weight: 700; font-size: 15px; margin-bottom: 10px; } .toggles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .toggle { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; text-align: center; } .toggle i { position: relative; width: 36px; height: 21px; border-radius: 999px; background: #F47F21; display: block; } .toggle i::after { content: ""; position: absolute; top: 3px; left: 18px; width: 15px; height: 15px; border-radius: 50%; background: #fff; } .toggle.off { color: var(--fc-soft); } .toggle.off i { background: var(--switch-off); } .toggle.off i::after { left: 3px; } .return { margin: 22px auto 0; width: fit-content; display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 22px; border: 1.5px dashed #F47F21; color: var(--fc-accent-ink); font-weight: 700; font-size: 14.5px; } .return svg { width: 18px; height: 18px; flex: none; } .promises { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; } .promises h3 { font-size: 19px; font-weight: 800; margin-bottom: 4px; } .promises p { color: var(--fc-soft); font-size: 16.5px; } .district-note { margin-top: 40px; padding: 22px 24px; display: flex; align-items: center; gap: 18px; } .district-note .icon { flex: none; } .district-copy { flex: 1; min-width: 0; } .district-copy h3 { font-size: 18px; font-weight: 800; } .district-copy p { color: var(--fc-soft); font-size: 15.5px; margin-top: 2px; } .district-note .pill { flex: none; } /* ---------- students ---------- */ .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 32px; } .step { padding: 24px; display: flex; flex-direction: column; gap: 8px; } .step-top { display: flex; align-items: center; gap: 12px; } .num { width: 30px; height: 30px; border-radius: 50%; background: #F47F21; color: #fff; font: 800 14px/30px 'Sofia Sans', sans-serif; text-align: center; flex: none; } .step h3 { font-size: 19px; font-weight: 800; line-height: 1.25; } .step p { color: var(--fc-soft); font-size: 16px; } .student-phone { width: 100%; max-width: 300px; margin: 0 auto; } /* ---------- quotes ---------- */ .quote-group + .quote-group { margin-top: 44px; } .group-label { font: 800 12px/1.3 'Sofia Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-faint); margin-bottom: 16px; } .quote { margin: 0; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 230px; } .quote blockquote { margin: 0; font: 400 20px/1.5 'Literata', serif; color: var(--fc-ink); } .quote figcaption { display: flex; align-items: center; gap: 12px; font-size: 15px; } .quote figcaption b { display: block; font-weight: 800; } .quote figcaption small { color: var(--fc-soft); font-size: 14px; } .avatar-ph { width: 44px; height: 44px; border-radius: 50%; border: 1.5px dashed var(--fc-line2); flex: none; } /* ---------- founders ---------- */ .founder { padding: 32px; display: flex; gap: 26px; align-items: flex-start; } .founder-photo { width: 140px; height: 140px; flex: none; border-radius: 16px; border: 1.5px dashed var(--fc-line2); display: flex; align-items: center; justify-content: center; color: var(--fc-faint); font-size: 14px; } img.founder-photo { border: none; object-fit: cover; box-shadow: var(--shadow-soft); } .founder .chip { margin-bottom: 12px; } .founder h3 { font: 400 27px/1.2 'Literata', serif; margin-bottom: 10px; } .founder p { color: var(--fc-soft); } /* ---------- get started (Connect's steel band, both themes) ---------- */ .start { background: linear-gradient(150deg, #36586C 0%, #223642 55%, #182128 100%); color: #F3EFE8; } .start .mark span { color: #F89C1C; } .start h2.display { color: #F3EFE8; } .start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; } .rollout { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; } .rollout li { display: flex; gap: 16px; } .rollout .num { width: 32px; height: 32px; line-height: 32px; } .rollout h3 { font-size: 19px; font-weight: 800; margin-bottom: 3px; } .rollout p, .start-note { color: #B7C4CB; font-size: 16px; } .start-note { margin-top: 28px; } .start-note a, .start a.plain { color: #F89C1C; font-weight: 700; } .start .ph { color: #8593A0; outline-color: #8593A0; } .form { background: var(--fc-surface); color: var(--fc-ink); border-radius: 18px; padding: 34px; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 16px; } .form h3 { font: 400 28px/1.2 'Literata', serif; } .form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font: 800 11px/1 'Sofia Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-faint); } .field input, .field select, .field textarea { width: 100%; font: 400 16px/1.4 'Sofia Sans', sans-serif; color: var(--fc-ink); background: var(--fc-surface); border: 1px solid var(--fc-line2); border-radius: 10px; padding: 13px 15px; outline: none; } .field textarea { resize: vertical; min-height: 90px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: #F47F21; } .form .btn { width: 100%; min-height: 52px; margin-top: 4px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-msg.ok { color: var(--fc-ink); font-weight: 700; } .form[hidden] { display: none; } .form-sent { align-items: flex-start; gap: 14px; padding: 40px 36px; outline: none; } .form-sent h3 { font: 400 30px/1.2 'Literata', serif; } .form-sent p { color: var(--fc-soft); font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; } .sent-icon { width: 52px; height: 52px; border-radius: 50%; background: #F47F21; color: #fff; display: flex; align-items: center; justify-content: center; } .sent-icon svg { width: 26px; height: 26px; } .form-msg { min-height: 1.3em; font-size: 14px; color: var(--fc-soft); text-align: center; } .form-msg.err { color: var(--err); } /* ---------- footer ---------- */ .site-footer { padding: 44px 0 56px; border-top: 1px solid var(--fc-line); } .site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; } .footer-brand { display: flex; flex-direction: column; gap: 8px; } .footer-brand p { color: var(--fc-soft); font-size: 15px; } .footer-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; } .footer-nav a { color: var(--fc-ink); font-weight: 600; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; } .footer-nav a:hover { color: var(--fc-accent-ink); } .legal-line { width: 100%; font-size: 14px; color: var(--fc-faint); } /* ---------- "How we rank" dialog ---------- */ .linkish, .footer-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; } .linkish { font-weight: 700; color: var(--fc-accent-ink); text-decoration: underline; text-underline-offset: 3px; } .linkish:hover { color: #F47F21; } .footer-link { color: var(--fc-ink); font-weight: 600; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; } .footer-link:hover { color: var(--fc-accent-ink); } .modal { width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; margin: auto; border: 1px solid var(--fc-line); border-radius: 18px; background: var(--fc-surface); color: var(--fc-ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); } .modal::backdrop { background: rgba(18, 26, 32, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal[open] { animation: modal-in .2s ease-out; } @keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } } .modal-inner { position: relative; padding: 36px 36px 30px; } .modal-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--fc-line2); background: var(--fc-surface); color: var(--fc-soft); display: flex; align-items: center; justify-content: center; } .modal-close:hover { border-color: #F47F21; color: var(--fc-accent-ink); } .modal-close svg { width: 18px; height: 18px; } .modal h2.display { font-size: clamp(26px, 4vw, 34px); padding-right: 44px; } .modal-lede { margin-top: 12px; color: var(--fc-soft); font-size: 16.5px; } .modal-h { margin: 28px 0 8px; font: 800 12px/1.3 'Sofia Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-faint); } .modal-p { color: var(--fc-soft); font-size: 15.5px; } .pillar-list { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--fc-line); border-radius: 14px; overflow: hidden; } .pillar-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--fc-line); } .pillar-list li:first-child { border-top: none; } .pillar-list b { display: block; font-size: 16px; font-weight: 800; } .pillar-list span { display: block; color: var(--fc-soft); font-size: 14.5px; margin-top: 2px; } .pillar-list em { flex: none; font-style: normal; font: 800 13px/1 'Sofia Sans', sans-serif; color: var(--fc-accent-ink); background: var(--fc-chip-bg); padding: 7px 10px; border-radius: 16px; white-space: nowrap; } .rules { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--fc-soft); font-size: 15.5px; } .rules b { color: var(--fc-ink); } .modal-src { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--fc-line); font-size: 13.5px; color: var(--fc-faint); } @media (max-width: 720px) { .modal-inner { padding: 28px 20px 24px; } } /* ---------- responsive ---------- */ @media (max-width: 1280px) { .stage .cm-viewing { display: none; } } @media (max-width: 1080px) { .nav { gap: 20px; } .nav a { font-size: 15px; } .header-actions .signin { display: none; } } @media (max-width: 960px) { .section { padding: 80px 0; } .nav, .header-actions .signin, .header-actions .btn { display: none; } .menu-btn { display: inline-flex; } .mobile-nav { display: block; border-top: 1px solid var(--fc-line); } .mobile-nav[hidden] { display: none; } .mobile-nav ul { list-style: none; margin: 0; padding: 8px 24px 20px; display: flex; flex-direction: column; } .mobile-nav a { display: flex; align-items: center; min-height: 48px; font-weight: 700; font-size: 17px; color: var(--fc-ink); border-bottom: 1px solid var(--fc-line); } .mobile-nav .btn { margin-top: 16px; color: #fff; border: none; } .hero-grid, .split, .start-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } .split.reverse > :first-child { order: 0; } .stage { min-height: 520px; max-width: 560px; width: 100%; margin: 0 auto; } .grid-3 { grid-template-columns: minmax(0, 1fr); } .flow { grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 520px; margin: 0 auto; } .arrow { flex-direction: row; justify-content: center; padding: 8px 0; } .arrow { gap: 16px; } .arrow svg { width: 40px; height: 14px; margin: 13px -13px; transform: rotate(90deg); } .promises { grid-template-columns: minmax(0, 1fr); gap: 22px; } } @media (max-width: 720px) { .wrap { padding: 0 20px; } .section { padding: 64px 0; } .hero { padding-top: 40px; } .lede { font-size: 17.5px; } .grid-2, .steps { grid-template-columns: minmax(0, 1fr); } .form .row { grid-template-columns: minmax(0, 1fr); } .form { padding: 24px 20px; } .founder { flex-direction: column; padding: 24px; } .founder-photo { width: 96px; height: 96px; } .proof { margin-top: 48px; } .proof-logos img { height: 56px; } .stage { min-height: 470px; } .connect-mock { width: 64%; } .stage .cm-viewing, .stage .cm-trail, .stage .cm-boundary { display: none; } .stage .phone { width: 38%; top: 70px; } .stage-tag { bottom: 12px; font-size: 12.5px; padding: 9px 12px; } .quote-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-right: -20px; padding-right: 20px; padding-bottom: 6px; } .quote-row .quote { flex: 0 0 84%; scroll-snap-align: start; min-height: 220px; } .quote blockquote { font-size: 18.5px; } .toggle { font-size: 11.5px; } .district-note { flex-wrap: wrap; } .district-copy { flex-basis: calc(100% - 64px); } .switcher-row .chip { display: none; } }