/* ═══════════════════════════════════════════════════════════ ARCHITECT — Site Design System (Verdigris / Blueprint) Palette: neutral white/bone, black ink, oxidized-green accent only. No black or dark-surface sections anywhere on the site. Type: Instrument Serif (display) · Space Grotesk (labels) · DM Sans (body) Shape: hard squares only — border-radius is always 0. Signature: rough hand-inked borders (SVG turbulence filter, see .rough-frame) + drafting registration marks + faint blueprint grid. Every page that includes this file should also inline the filter defs near the top of : ═══════════════════════════════════════════════════════════ */ :root { /* Neutral surfaces — white/bone only, never dark */ --cream: #FCFCF9; --cream-2: #F1F0E8; --stone: rgba(20,23,17,0.28); --line: rgba(43,90,71,0.30); /* Ink — black, cool undertone */ --ink: #12140F; --ink-soft: #4B4E46; --ink-faint: #888B80; /* Legacy dark-surface aliases — repointed to the light system so older markup using sec-dark / dark-ink / dark-soft keeps working without touching every HTML file's class list. Nothing on this site renders on an actual dark background anymore. */ --dark: var(--cream-2); --dark-2: var(--cream-2); --dark-line: var(--line); --dark-ink: var(--ink); --dark-soft: var(--ink-soft); /* Accent — one hue only: oxidized bronze-green */ --gold: #2B5A47; --gold-lt: #3E7A61; --verdigris: #2B5A47; --verdigris-deep: #17362A; --verdigris-soft: rgba(43,90,71,0.08); --serif: 'Instrument Serif', Georgia, serif; --grotesk: 'Space Grotesk', sans-serif; --sans: 'DM Sans', sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0 !important; } html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; background-image: linear-gradient(rgba(43,90,71,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(43,90,71,0.05) 1px, transparent 1px); background-size: 36px 36px; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; } /* ── Drafting registration marks (signature motif) ─────────── */ .reg { position: fixed; width: 14px; height: 14px; pointer-events: none; z-index: 40; } .reg::before, .reg::after { content: ''; position: absolute; background: var(--stone); } .reg::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-.5px); } .reg::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-.5px); } .reg.tl { top: 16px; left: 16px; } .reg.tr { top: 16px; right: 16px; } .reg.bl { bottom: 16px; left: 16px; } .reg.br { bottom: 16px; right: 16px; } @media (max-width: 640px) { .reg { display: none; } } /* ── Rough hand-inked frame (signature motif) ──────────────── */ .rough-frame { position: relative; } .rough-frame::before { content: ''; position: absolute; inset: -5px; border: 1.5px solid var(--verdigris); filter: url(#rough); pointer-events: none; } .rough-frame.thick::before { border-width: 2px; } /* ── Typography ─────────────────────────────────────────── */ .eyebrow { font-family: var(--grotesk); font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--verdigris); display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--verdigris); } .eyebrow.centered { justify-content: center; } .eyebrow.centered::after { content: ''; width: 24px; height: 1px; background: var(--verdigris); } .h-display { font-family: var(--serif); font-size: clamp(42px, 7vw, 84px); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; } .h-section { font-family: var(--serif); font-size: clamp(32px, 4.5vw, 54px); font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; } .h-display em, .h-section em { font-style: italic; color: var(--verdigris); } .lead { font-size: clamp(17px, 2vw, 19px); color: var(--ink-soft); line-height: 1.7; max-width: 560px; } .body-copy { color: var(--ink-soft); max-width: 640px; } .body-copy p + p { margin-top: 20px; } .body-copy strong { color: var(--ink); font-weight: 500; } .text-link { font-family: var(--grotesk); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--verdigris); padding-bottom: 4px; transition: color .2s; } .text-link:hover { color: var(--verdigris); } /* ── Buttons — squares, green or ink, never filled dark ────── */ .btn { display: inline-block; font-family: var(--grotesk); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; text-align: center; padding: 18px 40px; background: var(--ink); color: var(--cream); border: 1px solid var(--ink); cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .btn:hover { background: var(--verdigris); border-color: var(--verdigris); color: #fff; } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--stone); } .btn-ghost:hover { background: transparent; color: var(--verdigris); border-color: var(--verdigris); } .btn-light { background: var(--verdigris); color: #fff; border-color: var(--verdigris); } .btn-light:hover { background: var(--verdigris-deep); border-color: var(--verdigris-deep); color: #fff; } .btn-sm { padding: 12px 24px; font-size: 10px; } .btn-row { display: flex; gap: 14px; flex-wrap: wrap; } /* ── Header ─────────────────────────────────────────────── */ .site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 300; background: rgba(252,252,249,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .3s; } .site-head.scrolled { border-bottom-color: var(--line); } .head-in { display: flex; align-items: center; justify-content: space-between; height: 72px; } .logo { font-family: var(--grotesk); font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); text-decoration: none; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { font-family: var(--grotesk); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; transition: color .2s; } .nav-links a:hover { color: var(--verdigris); } .nav-links a[aria-current="page"] { color: var(--ink); } .nav-links .nav-signin { color: var(--ink-faint); } .nav-links .btn { color: var(--cream); padding: 12px 24px; font-size: 10px; letter-spacing: .16em; } .nav-links .btn:hover { color: #fff; } .menu-btn { display: none; background: none; border: none; cursor: pointer; width: 32px; height: 32px; position: relative; } .menu-btn span { position: absolute; left: 4px; right: 4px; height: 1.5px; background: var(--ink); transition: transform .25s, top .25s; } .menu-btn span:nth-child(1) { top: 12px; } .menu-btn span:nth-child(2) { top: 19px; } .menu-btn[aria-expanded="true"] span:nth-child(1) { top: 15px; transform: rotate(45deg); } .menu-btn[aria-expanded="true"] span:nth-child(2) { top: 15px; transform: rotate(-45deg); } /* ── Sections ───────────────────────────────────────────── */ main { padding-top: 72px; } .sec { padding: clamp(80px, 12vw, 140px) 0; } .sec-tight { padding: clamp(56px, 8vw, 90px) 0; } .sec-alt { background: var(--cream-2); } /* sec-dark now means "emphasis" — bordered light section, never a dark fill */ .sec-dark { background: var(--cream-2); color: var(--ink); border-top: 1px solid var(--verdigris); border-bottom: 1px solid var(--verdigris); } .sec-dark .h-section { color: var(--ink); } .sec-dark .lead, .sec-dark .body-copy { color: var(--ink-soft); } .sec-dark .body-copy strong { color: var(--ink); } .sec-dark .text-link { color: var(--ink); } .sec-dark .text-link:hover { color: var(--verdigris); } .sec-head { margin-bottom: clamp(48px, 6vw, 72px); } .sec-head.centered { text-align: center; } .sec-head.centered .lead { margin: 20px auto 0; } .sec-head .lead { margin-top: 20px; } /* ── Hero ───────────────────────────────────────────────── */ .hero { padding: clamp(90px, 14vw, 170px) 0 clamp(70px, 10vw, 120px); } .hero .h-display { max-width: 820px; } .hero .lead { margin: 28px 0 40px; } .trust-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); } .trust-item { font-family: var(--grotesk); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); } /* ── Grids & Cards ──────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .card { border: 1px solid var(--line); padding: 36px 30px; background: var(--cream); } .sec-dark .card { border-color: var(--line); background: var(--cream); } .card-num { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--verdigris); margin-bottom: 20px; display: block; } .card-title { font-family: var(--grotesk); font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; } .card-text { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; } .sec-dark .card-text { color: var(--ink-soft); } /* ── Steps ──────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .step { border-top: 1px solid var(--stone); padding-top: 24px; } .sec-dark .step { border-top-color: var(--line); } .step-num { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--verdigris); display: block; margin-bottom: 14px; } .step-title { font-family: var(--grotesk); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; } .step-text { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; } .sec-dark .step-text { color: var(--ink-soft); } /* ── Meta strip (diagnostic stats) ──────────────────────── */ .meta-strip { display: flex; border: 1px solid var(--line); margin: 40px 0; } .meta-cell { flex: 1; padding: 20px 24px; border-right: 1px solid var(--line); } .meta-cell:last-child { border-right: none; } .meta-k { font-family: var(--grotesk); font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; } .meta-v { font-family: var(--grotesk); font-size: 16px; font-weight: 500; color: var(--ink); } .meta-strip.on-light { border-color: var(--line); } .meta-strip.on-light .meta-cell { border-right-color: var(--line); } .meta-strip.on-light .meta-k { color: var(--ink-faint); } .meta-strip.on-light .meta-v { color: var(--ink); } /* ── Contrast lists (reactive vs architect) ─────────────── */ .contrast-col h3 { font-family: var(--grotesk); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 24px; } .contrast-col ul { list-style: none; } .contrast-col li { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .contrast-col.dim h3 { color: var(--ink-faint); } .contrast-col.dim li { color: var(--ink-faint); } .contrast-col.lit h3 { color: var(--verdigris); } .contrast-col.lit li { color: var(--ink); } /* ── Statement band ─────────────────────────────────────── */ .statement { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 38px); line-height: 1.28; letter-spacing: -0.01em; max-width: 880px; margin: 0 auto; text-align: center; } .statement em { font-style: italic; color: var(--verdigris); } /* ── Principles grid ────────────────────────────────────── */ .principles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); } .principle { display: flex; gap: 20px; align-items: baseline; padding: 22px 8px; border-bottom: 1px solid var(--line); } .principle .rn { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--verdigris); min-width: 34px; } .principle .pt { font-family: var(--grotesk); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } /* ── FAQ ────────────────────────────────────────────────── */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { font-family: var(--grotesk); font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--ink); padding: 24px 8px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-family: var(--serif); font-size: 20px; color: var(--verdigris); } .faq details[open] summary::after { content: '\2212'; } .faq .faq-a { padding: 0 8px 26px; color: var(--ink-soft); font-size: 15px; max-width: 620px; } /* ── Photo slot ─────────────────────────────────────────── */ .photo-slot { border: 1px solid var(--line); background: var(--cream-2); aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; } .photo-slot span { font-family: var(--grotesk); font-size: 9px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); } /* ── Program rows ───────────────────────────────────────── */ .program-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 32px; align-items: start; padding: 40px 0; border-bottom: 1px solid var(--line); } .program-row:first-of-type { border-top: 1px solid var(--line); } .program-pillar { font-family: var(--grotesk); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--verdigris); padding-top: 6px; } .program-name { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin-bottom: 10px; } .program-desc { font-size: 14.5px; color: var(--ink-soft); max-width: 520px; } .program-status { font-family: var(--grotesk); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--stone); color: var(--ink-faint); white-space: nowrap; margin-top: 4px; } .program-status.live { border-color: var(--verdigris); color: var(--verdigris); } /* ── CTA band ───────────────────────────────────────────── */ .cta-band { text-align: center; } .cta-band .h-section { margin-bottom: 16px; } .cta-band .lead { margin: 0 auto 40px; } /* ── Footer — light, bordered, never a dark fill ───────────── */ .site-foot { background: var(--cream); color: var(--ink-soft); border-top: 1.5px solid var(--verdigris); padding: 72px 0 40px; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; } .foot-brand .logo { color: var(--ink); } .foot-tag { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-soft); margin-top: 16px; } .foot-col h4 { font-family: var(--grotesk); font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; } .foot-col a { display: block; font-size: 13.5px; color: var(--ink); text-decoration: none; padding: 5px 0; opacity: .8; transition: opacity .2s, color .2s; } .foot-col a:hover { opacity: 1; color: var(--verdigris); } .foot-base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line); } .foot-base p { font-size: 12px; color: var(--ink-faint); } .foot-verse { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--verdigris); } /* ── Reveal ─────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } } /* ── Mobile ─────────────────────────────────────────────── */ @media (max-width: 900px) { .grid-4 { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr; gap: 28px; } .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1020px) { .menu-btn { display: block; } .nav-links { position: fixed; inset: 72px 0 auto 0; background: var(--cream); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 24px 28px; display: none; } .nav-links.open { display: flex; } .nav-links a { padding: 14px 0; font-size: 12px; } .nav-links .btn { margin-top: 12px; width: 100%; padding: 16px; } } @media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-2 { gap: 40px; } .meta-strip { flex-direction: column; } .meta-cell { border-right: none; border-bottom: 1px solid var(--line); } .meta-cell:last-child { border-bottom: none; } .meta-strip.on-light .meta-cell { border-bottom-color: var(--line); } .principles { grid-template-columns: 1fr; } .program-row { grid-template-columns: 1fr; gap: 14px; } .program-status { justify-self: start; } .btn-row .btn { width: 100%; } .trust-row { gap: 16px; } } @media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; gap: 32px; } }