/* ============================================================ The Nugent Foundation — landing page styles Editorial institutional: warm paper, deep conifer ink, ember Ported from the design handoff `styles.css`. Deviations from the handoff are marked [A11Y] or [PROD] and listed in README.md. ============================================================ */ /* @font-face rules live in /fonts.css, linked ahead of this file in so the two stylesheets download in parallel rather than as a waterfall. */ :root { --paper: oklch(0.97 0.008 85); --paper-2: oklch(0.94 0.012 85); --paper-3: oklch(0.90 0.015 85); --ink: oklch(0.24 0.02 155); /* deep conifer */ --ink-2: oklch(0.38 0.02 155); /* [A11Y] handoff value was oklch(0.55 0.015 150) — 4.42:1 on --paper, 4.04 on --paper-2, 3.57 on --paper-3. Darkened toward --ink-2 exactly as the handoff checklist instructs. Now 5.70 / 5.21 / 4.61. */ --ink-3: oklch(0.49 0.015 150); /* muted */ --rule: oklch(0.85 0.012 85); --ember: oklch(0.58 0.14 45); /* muted rust accent */ /* [A11Y] --ember is 4.15:1 on --paper — fine for large display type and decorative glyphs, short of 4.5 for the small mono numerals. This is the same accent one step deeper, used only where ember carries small text. */ --ember-text: oklch(0.51 0.14 45); --ember-ink: oklch(0.32 0.10 45); --cream-on-ink: oklch(0.92 0.01 85); --display: "Newsreader", "Lora", Georgia, serif; --sans: "Geist", "Söhne", -apple-system, system-ui, sans-serif; --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --maxw: 1280px; --gutter: clamp(20px, 4vw, 48px); } * { box-sizing: border-box; } /* A class-level `display` beats the UA sheet's [hidden] rule, and several blocks here are flex. Make `hidden` win everywhere. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } /* [PROD] anchor navigation without scrollIntoView */ html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } body.is-locked { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; } /* [A11Y] visible keyboard focus on everything interactive */ :focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; } .section--impact :focus-visible, .give-cta :focus-visible, .hero--bleed :focus-visible { outline-color: var(--paper); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--gutter); top: 0; z-index: 100; transform: translateY(-120%); background: var(--ink); color: var(--paper); padding: 12px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transition: transform 140ms ease; } .skip-link:focus { transform: translateY(0); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* =========== typography ============ */ .display { font-family: var(--display); font-weight: 400; font-style: normal; font-variation-settings: "opsz" 144; font-size: clamp(40px, 6.2vw, 88px); line-height: 0.98; letter-spacing: -0.02em; margin: 0; color: inherit; text-wrap: balance; } .display--xl { font-size: clamp(52px, 8vw, 124px); line-height: 0.94; letter-spacing: -0.025em; } .display em { font-style: italic; color: var(--ember); } .eyebrow { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); margin-bottom: 28px; } .eyebrow--light { color: oklch(0.85 0.01 85 / 0.85); } .lede { font-family: var(--display); font-weight: 300; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.45; max-width: 58ch; color: var(--ink-2); margin: 28px 0 36px; text-wrap: pretty; } .lede--light { color: oklch(0.92 0.01 85 / 0.92); } /* =========== nav ============ */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(12px); background: color-mix(in oklch, var(--paper) 78%, transparent); border-bottom: 1px solid var(--rule); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; gap: 24px; } .nav-brand { display: flex; align-items: center; gap: 12px; } .nav-wordmark { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; font-weight: 500; white-space: nowrap; } .nav-links { display: flex; gap: 22px; font-size: 14px; color: var(--ink-2); font-weight: 500; white-space: nowrap; } .nav-links a:hover { color: var(--ember-text); } .nav-actions { display: flex; align-items: center; gap: 12px; } /* [PROD] mobile navigation — not present in the prototype */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); cursor: pointer; transition: background 140ms ease, border-color 140ms ease; } .nav-toggle:hover { background: var(--paper-3); border-color: var(--ink-3); } .nav-toggle .bars { display: block; position: relative; width: 16px; height: 1px; background: currentColor; transition: background 140ms ease; } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor; transition: transform 140ms ease; } .nav-toggle .bars::before { top: -5px; } .nav-toggle .bars::after { top: 5px; } .nav-toggle[aria-expanded="true"] .bars { background: transparent; } .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); } .nav-mobile { display: none; border-top: 1px solid var(--rule); background: var(--paper); } .nav-mobile[data-open="true"] { display: block; } .nav-mobile ul { list-style: none; margin: 0; padding: 0; } .nav-mobile li + li { border-top: 1px solid var(--rule); } /* Scoped to the list: an unscoped `.nav-mobile a` outranks .btn--primary and would paint the Give button's label ink-on-ink. */ .nav-mobile ul a { display: flex; align-items: baseline; gap: 14px; padding: 20px 0; font-family: var(--display); font-size: 26px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); } .nav-mobile ul a:hover { color: var(--ember-text); } .nav-mobile .nm-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ember-text); } .nav-mobile .nav-mobile-cta { padding: 24px 0 32px; border-top: 1px solid var(--rule); } .nav-mobile .btn { width: 100%; justify-content: center; } /* =========== mark / logo ============ */ .mark { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; position: relative; flex: none; box-shadow: inset 0 0 0 1px oklch(0.35 0.02 155); } .mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid oklch(0.85 0.01 85 / 0.35); } .mark-glyph { position: relative; z-index: 1; transform: translateY(-1px); } .mark--sm { width: 32px; height: 32px; font-size: 17px; } /* =========== buttons ============ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background 140ms ease, color 140ms ease, transform 140ms ease, border-color 140ms ease; white-space: nowrap; } .btn--sm { padding: 10px 18px; font-size: 13px; } .btn--lg { padding: 18px 28px; font-size: 15px; } .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--primary:hover { background: var(--ember-ink); border-color: var(--ember-ink); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn--light { color: var(--paper); border-color: oklch(0.95 0 0 / 0.5); } .btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn[disabled] { opacity: 0.55; cursor: progress; } .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } /* =========== HERO: full-bleed ============ */ .hero--bleed { position: relative; min-height: 86vh; color: var(--paper); display: flex; flex-direction: column; isolation: isolate; overflow: hidden; } .hero-bleed-img { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 30% 40%, oklch(0.45 0.04 155) 0%, transparent 60%), radial-gradient(ellipse at 75% 85%, oklch(0.28 0.05 45 / 0.45) 0%, transparent 60%), linear-gradient(180deg, oklch(0.28 0.03 155) 0%, oklch(0.20 0.02 155) 100%); } .hero-bleed-img .tint { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.15 0.02 155 / 0.55) 0%, oklch(0.15 0.02 155 / 0.2) 40%, oklch(0.12 0.02 155 / 0.75) 100%); } .hero-bleed-img .grain { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, oklch(1 0 0 / 0.012) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, oklch(0 0 0 / 0.025) 0 2px, transparent 2px 4px); mix-blend-mode: overlay; opacity: 0.6; pointer-events: none; } .hero-bleed-inner { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--gutter) clamp(80px, 12vh, 140px); flex: 1; display: flex; flex-direction: column; justify-content: center; } .hero-bleed-inner .lede { max-width: 54ch; } .hero-ticker { border-top: 1px solid oklch(0.9 0 0 / 0.18); border-bottom: 1px solid oklch(0.9 0 0 / 0.18); overflow: hidden; padding: 14px 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: oklch(0.92 0.01 85 / 0.78); background: oklch(0.12 0.02 155 / 0.45); } .ticker-track { display: flex; gap: 40px; white-space: nowrap; animation: ticker 45s linear infinite; width: max-content; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* =========== section shell ============ */ .section { padding: clamp(72px, 10vw, 140px) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 80px; /* [PROD] clears the sticky nav on anchor jumps */ } .section-head { margin-bottom: clamp(32px, 4vw, 64px); max-width: 40ch; } .section-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 18px; } .section-num--light { color: oklch(0.85 0.01 85 / 0.7); } .section-title { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; color: var(--ink); text-wrap: balance; } .section-title--light { color: var(--cream-on-ink); } /* =========== mission ============ */ .section--mission { background: var(--paper); } .mission-body { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2vw, 30px); line-height: 1.4; color: var(--ink); max-width: 62ch; margin: 0; text-wrap: pretty; } .mission-rule { width: 64px; height: 1px; background: var(--ember); margin: 56px 0 40px; } .mission-tenets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .mission-tenets li { background: var(--paper); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; } .mission-tenets .tenet-num { font-family: var(--display); font-style: italic; font-size: 22px; color: var(--ember-text); } .mission-tenets p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); } /* =========== mechanism ============ */ .section--mech { background: var(--paper-2); } .mech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 64px; } .mech-step { background: var(--paper); padding: 36px 28px 40px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; } .step-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .step-num { color: var(--ember-text); font-weight: 600; } .step-tag { color: var(--ink-3); } .mech-step h3 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.08; letter-spacing: -0.01em; margin: 8px 0 4px; color: var(--ink); } .mech-step p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; } .mech-diagram { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; gap: 18px; align-items: stretch; padding: 40px 32px; background: var(--paper); border: 1px solid var(--rule); } .dia-arrow { align-self: center; font-family: var(--display); font-size: 40px; color: var(--ember); font-weight: 300; } .dia-col { display: flex; } .dia-node { width: 100%; padding: 22px 22px 24px; border: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; gap: 10px; } .dia-node--core { background: var(--ink); border-color: var(--ink); color: var(--paper); } .dia-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .dia-node--core .dia-label { color: oklch(0.85 0.01 85 / 0.75); } .dia-val { font-family: var(--display); font-size: 22px; letter-spacing: -0.01em; color: var(--ink); } .dia-node--core .dia-val { color: var(--paper); } .dia-meter { height: 4px; background: oklch(0.35 0.02 155); border-radius: 2px; overflow: hidden; } .dia-node--core .meter-fill { height: 100%; width: 100%; background: var(--ember); } .dia-foot { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.85 0.01 85 / 0.7); } .dia-breakdown { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: 14px; color: var(--ink-2); } .dia-breakdown > div { display: flex; align-items: center; gap: 10px; } .bd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); display: inline-block; flex: none; } /* =========== impact (dark) ============ */ .section--impact { background: var(--ink); color: var(--cream-on-ink); border-bottom: 1px solid var(--ink); } .impact-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 24px; } .impact-card { background: oklch(0.28 0.02 155); border: 1px solid oklch(0.32 0.02 155); padding: 36px 30px; display: flex; flex-direction: column; gap: 12px; min-height: 320px; } .impact-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.85 0.01 85 / 0.7); } .impact-stat { font-family: var(--display); font-size: clamp(40px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.02em; color: var(--paper); margin-top: 4px; } .impact-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.85 0.01 85 / 0.75); max-width: 24ch; } .impact-card p { margin-top: auto; font-size: 15px; color: oklch(0.88 0.01 85 / 0.85); line-height: 1.55; } .impact-card--quote { background: transparent; border: 1px solid oklch(0.45 0.02 155); position: relative; } .impact-card--quote::before { content: "\201C"; position: absolute; top: -16px; left: 20px; font-family: var(--display); font-size: 96px; line-height: 1; color: var(--ember); opacity: 0.9; } .impact-card--quote blockquote { margin: 0; padding-top: 48px; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; } .impact-card--quote blockquote p { font-family: var(--display); font-size: 24px; line-height: 1.3; font-weight: 300; color: var(--paper); margin: 0; text-wrap: pretty; } .impact-card--quote footer { margin-top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.85 0.01 85 / 0.7); } /* =========== for colleges ============ */ .section--colleges { background: var(--paper); } .colleges-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .colleges-intro { position: sticky; top: 88px; } .colleges-lede { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.4; color: var(--ink); margin: 0 0 20px; text-wrap: pretty; } .colleges-lede strong { font-weight: 500; color: var(--ember-ink); font-style: italic; } .colleges-intro p { color: var(--ink-2); margin: 0 0 28px; max-width: 42ch; } .colleges-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .colleges-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: start; } .colleges-steps .cs-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ember-text); padding-top: 4px; } .colleges-steps h3 { font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); } .colleges-steps p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 52ch; } /* =========== questions ============ */ /* Same hairline-cell pattern as the mission tenets and give cards: gap:1px on a --rule background, so the gap itself is the divider. --paper background matches the colleges section above it, which is the rhythm the founder's note used. */ .section--faq { background: var(--paper); } .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .faq-item { background: var(--paper); padding: 32px 30px 34px; display: flex; flex-direction: column; gap: 12px; } .faq-item h3 { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--ink); text-wrap: balance; } .faq-item p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 46ch; text-wrap: pretty; } /* =========== give ============ */ .section--give { background: var(--paper-2); } .give-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 56px; } .give-card { background: var(--paper); padding: 32px 26px 30px; display: flex; flex-direction: column; gap: 12px; min-height: 260px; transition: background 180ms ease, transform 180ms ease; position: relative; /* [PROD] some cards are