/* ========================================================================== Sharp#Soft design system — sharpandsoft.org ========================================================================== Single source of truth for the whole site. Documented in /website/DESIGN.md. Brand palette per assets/STYLE-GUIDE.md (green #64832C primary, blue #3C5796 secondary, purple #791142 security accent, near-black background). Structure of this file: 1. Tokens (dark default + light theme via [data-theme="light"]) 2. Base / reset 3. Layout primitives (.container, main, .split, .section) 4. Site chrome (header, nav, footer) 5. Components (hero, buttons, cards, pillars, badges, CTA band, callout, plan card, toc, icon) 6. Prose + generated-content classes (article pages, .article-list — THESE CLASS NAMES ARE PART OF THE RENDER CONTRACT, do not rename) 7. Forms (shared with /assets/forms.css consumers) 8. Utilities + media queries Constraints (see website/DESIGN.md): - NO JavaScript anywhere (CSP: default-src 'none', no script-src) - No external fonts/assets (CSP allows self + data: images only) - Everything must degrade gracefully on old browsers ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { color-scheme: dark; /* Brand anchors — fixed, never theme-switched */ --brand-green: #64832C; --brand-blue: #3C5796; --brand-purple: #791142; --brand-gray: #C0C0C0; --brand-black: #000100; /* Surfaces */ --bg: #000100; --bg-raise: #0B0D09; /* cards */ --bg-raise-2:#111409; /* hover / emphasized cards */ --bg-inset: #060705; /* code blocks, wells */ /* Text */ --text: #ECEEE8; --text-2: #B9BDB2; /* secondary copy */ --text-3: #83887C; /* meta, captions */ /* Lines */ --line: #23271D; --line-strong: #39402C; /* Accents (readable-on-bg variants of the brand anchors) */ --green: #64832C; /* fills, borders */ --green-bright: #9CC24E; /* link text, icons on dark */ --green-soft: rgba(100, 131, 44, 0.14); --blue: #3C5796; --blue-bright: #8CA5DE; --blue-soft: rgba(60, 87, 150, 0.16); --purple: #791142; --purple-bright:#C75E8F; --purple-soft: rgba(121, 17, 66, 0.18); /* Type scale (fluid) */ --fs-display: clamp(2.3rem, 5.5vw, 3.6rem); --fs-h1: clamp(1.9rem, 4vw, 2.5rem); --fs-h2: clamp(1.35rem, 2.5vw, 1.65rem); --fs-h3: 1.12rem; --fs-body: 1rem; /* html font-size handles the rest */ --fs-small: 0.92rem; --fs-meta: 0.82rem; /* Spacing scale */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2.5rem; --s-6: 4rem; --s-7: 6rem; /* Radius + shadows */ --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-2: 0 8px 30px rgba(0, 0, 0, 0.45); --glow-green: 0 0 40px rgba(100, 131, 44, 0.25); --glow-purple: 0 0 40px rgba(121, 17, 66, 0.28); /* Widths */ --max-w: min(92vw, 820px); /* prose measure */ --max-w-wide: min(94vw, 1140px); /* home, indexes, section pages */ } /* Light theme — opt-in via . The brand default is dark; this token set exists so a future session can ship a light variant (or a per-page exception) by flipping one attribute. Not auto-applied. */ [data-theme="light"] { color-scheme: light; --bg: #F7F8F4; --bg-raise: #FFFFFF; --bg-raise-2:#F1F3EA; --bg-inset: #EEF0E8; --text: #191C14; --text-2: #43483A; --text-3: #6C7261; --line: #DDE0D3; --line-strong: #C4C9B4; --green-bright: #4E6822; --blue-bright: #34518F; --purple-bright:#8A2653; --green-soft: rgba(100, 131, 44, 0.12); --blue-soft: rgba(60, 87, 150, 0.10); --purple-soft: rgba(121, 17, 66, 0.08); --shadow-1: 0 1px 2px rgba(25, 28, 20, 0.10); --shadow-2: 0 8px 30px rgba(25, 28, 20, 0.12); --glow-green: 0 0 40px rgba(100, 131, 44, 0.15); --glow-purple: 0 0 40px rgba(121, 17, 66, 0.12); } [data-theme="light"] .hero-title .accent { background: linear-gradient(100deg, #3E5519, #64832C); -webkit-background-clip: text; background-clip: text; } /* Legacy aliases — older hand-authored pages reference these. Keep. */ :root, [data-theme="light"] { --c-bg: var(--bg); --c-green: var(--green); --c-blue: var(--blue); --c-purple: var(--purple); --c-gray: var(--text-2); --c-text: var(--text); --c-muted: var(--text-3); --c-rule: var(--line); --c-card: var(--bg-raise); } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 18px; line-height: 1.65; -webkit-text-size-adjust: 100%; } /* Ambient brand atmosphere: two faint radial glows + nothing else. Restrained per STYLE-GUIDE ("prefer subtle gradients and glows"). */ body { background-image: radial-gradient(1100px 520px at 12% -8%, rgba(100, 131, 44, 0.10), transparent 60%), radial-gradient(900px 480px at 95% 12%, rgba(60, 87, 150, 0.08), transparent 60%); background-repeat: no-repeat; } a { color: var(--green-bright); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease, color 120ms ease; } a:hover, a:focus-visible { border-bottom-color: var(--green-bright); } :focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--green); color: #fff; } img { max-width: 100%; height: auto; } h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.01em; color: var(--text); } /* Skip link (accessibility) */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--bg-raise); color: var(--text); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-1); z-index: 100; } .skip-link:focus { left: var(--s-3); } /* -------------------------------------------------------------------------- 3. LAYOUT -------------------------------------------------------------------------- */ main { max-width: var(--max-w); margin: 0 auto; padding: 2.5rem 1.5rem 3rem; } main.wide { max-width: var(--max-w-wide); } .section { margin: var(--s-6) 0 0; } .section:first-child { margin-top: 0; } .section-head { text-align: center; margin: 0 0 0.3rem; font-size: var(--fs-h2); } .section-sub { text-align: center; margin: 0 auto var(--s-4); color: var(--text-3); max-width: 44rem; } .section-head.left, .section-sub.left { text-align: left; margin-left: 0; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } /* -------------------------------------------------------------------------- 4. SITE CHROME -------------------------------------------------------------------------- */ header.site { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } @supports not (backdrop-filter: blur(10px)) { header.site { background: var(--bg); } } .site-inner { max-width: var(--max-w-wide); margin: 0 auto; padding: 0.95rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .brand { font-weight: 700; font-size: 1.15rem; color: var(--text); border-bottom: none; letter-spacing: -0.01em; white-space: nowrap; } .brand .mark { color: var(--green-bright); } .site nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.15rem; align-items: center; } .site nav a { margin: 0; color: var(--text-2); font-size: 0.93rem; border-bottom: none; padding: 0.15rem 0; border-bottom: 2px solid transparent; } .site nav a:hover, .site nav a:focus-visible { color: var(--text); border-bottom-color: var(--green); } .site nav a[aria-current="page"] { color: var(--green-bright); border-bottom-color: var(--green); } .site nav a.nav-cta { color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0.28rem 0.95rem; } .site nav a.nav-cta:hover, .site nav a.nav-cta:focus-visible { border-color: var(--green); background: var(--green-soft); } footer.site { border-top: 1px solid var(--line); margin-top: var(--s-6); background: var(--bg); } footer.site .site-inner { color: var(--text-3); font-size: 0.88rem; padding: 1.4rem 1.5rem; justify-content: space-between; } footer.site a { color: var(--text-2); } footer.site nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; } /* -------------------------------------------------------------------------- 5. COMPONENTS -------------------------------------------------------------------------- */ /* ---- Buttons ---- */ .btn { display: inline-block; font-weight: 600; font-size: 0.98rem; padding: 0.68rem 1.5rem; border-radius: var(--r-2); border: 1px solid transparent; cursor: pointer; text-align: center; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .btn:hover { transform: translateY(-1px); border-bottom-color: transparent; } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(180deg, #77993A, var(--green)); color: #FDFEF9; box-shadow: var(--shadow-1), var(--glow-green); } .btn-primary:hover, .btn-primary:focus-visible { background: linear-gradient(180deg, #86AB45, #6E9032); color: #fff; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); } .btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--green); background: var(--green-soft); color: var(--text); } .btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; } .btn-row.center { justify-content: center; } /* ---- Pills + badges ---- */ .pill { display: inline-block; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--green-bright); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0.25rem 0.9rem; background: var(--bg-raise); } .pill .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); margin-right: 0.45rem; box-shadow: 0 0 6px var(--green-bright); vertical-align: 1px; } .badge { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.14rem 0.55rem; border-radius: var(--r-1); border: 1px solid var(--line-strong); color: var(--text-3); white-space: nowrap; } .badge.live { color: var(--green-bright); border-color: var(--green); background: var(--green-soft); } .badge.launch { color: var(--blue-bright); border-color: var(--blue); background: var(--blue-soft); } .badge.roadmap { color: var(--purple-bright); border-color: var(--purple); background: var(--purple-soft); } /* ---- Hero ---- */ .hero { padding: var(--s-6) 0 var(--s-4); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5); align-items: center; } .hero.center { grid-template-columns: 1fr; text-align: center; } .hero.center .hero-copy { margin: 0 auto; max-width: 46rem; } .hero.center .btn-row { justify-content: center; } .hero-copy .pill { margin-bottom: var(--s-4); } .hero-title { font-size: var(--fs-display); line-height: 1.08; margin: 0 0 var(--s-3); letter-spacing: -0.022em; font-weight: 800; } .hero-title .accent { background: linear-gradient(100deg, var(--green-bright), #C9E087); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lead { font-size: 1.15rem; color: var(--text-2); margin: 0 0 var(--s-4); max-width: 38rem; } .hero-lead strong { color: var(--text); } .hero-note { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-3); } .hero-art { display: flex; justify-content: center; } .hero-art svg { width: 100%; max-width: 380px; height: auto; filter: drop-shadow(0 0 34px rgba(100, 131, 44, 0.22)); } /* ---- Cards ---- */ .card { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); box-shadow: var(--shadow-1); } .card h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h3); } .card p { margin: 0; font-size: 0.95rem; color: var(--text-2); } a.card { display: block; color: var(--text); transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; } a.card:hover, a.card:focus-visible { border-color: var(--green); background: var(--bg-raise-2); transform: translateY(-2px); } /* ---- Pillars (3-up value props with icons) ---- */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin: var(--s-5) 0 0; } .pillar { background: linear-gradient(180deg, var(--bg-raise), var(--bg)); border: 1px solid var(--line); border-top: 2px solid var(--green); border-radius: var(--r-2); padding: var(--s-4); } .pillar.blue { border-top-color: var(--blue); } .pillar.purple { border-top-color: var(--purple); } .pillar h3 { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-h3); } .pillar p { margin: 0; font-size: 0.95rem; color: var(--text-2); } /* ---- Icon chip (inline SVG holder) ---- */ .icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-2); background: var(--green-soft); border: 1px solid var(--line-strong); color: var(--green-bright); } .icon.blue { background: var(--blue-soft); color: var(--blue-bright); } .icon.purple { background: var(--purple-soft); color: var(--purple-bright); } .icon svg { width: 24px; height: 24px; } /* ---- Feature cards (product showcase) ---- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } .feature-card { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); transition: border-color 140ms ease, transform 140ms ease; } .feature-card:hover { border-color: var(--line-strong); transform: translateY(-2px); } .feature-card .feature-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-1); } .feature-card h3 { margin: 0; font-size: 1.05rem; } .feature-card p { margin: 0; font-size: 0.93rem; color: var(--text-2); } /* ---- Contrast rows (policy vs architecture) ---- */ .contrast { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .contrast .card.bad { border-left: 3px solid var(--text-3); } .contrast .card.good { border-left: 3px solid var(--green); box-shadow: var(--shadow-1), var(--glow-green); } .contrast .tagline { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin: 0 0 var(--s-2); } .contrast .card.good .tagline { color: var(--green-bright); } /* ---- Checklist / cross-list ---- */ ul.checks, ul.crosses { list-style: none; padding: 0; margin: var(--s-3) 0 0; } ul.checks li, ul.crosses li { padding-left: 1.7rem; position: relative; margin-bottom: 0.55rem; color: var(--text-2); font-size: 0.96rem; } ul.checks li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 0.95rem; height: 0.95rem; background: var(--green-soft); border: 1px solid var(--green); border-radius: 50%; } ul.checks li::after { content: ""; position: absolute; left: 0.26rem; top: 0.53em; width: 0.42rem; height: 0.24rem; border-left: 2px solid var(--green-bright); border-bottom: 2px solid var(--green-bright); transform: rotate(-45deg); } ul.crosses li::before { content: "—"; position: absolute; left: 0.1rem; top: 0; color: var(--text-3); font-weight: 700; } /* ---- CTA band ---- */ .cta-band { margin: var(--s-6) 0 0; padding: var(--s-5) var(--s-4); text-align: center; border: 1px solid var(--line-strong); border-radius: var(--r-3); background: radial-gradient(600px 240px at 50% -40%, rgba(100, 131, 44, 0.22), transparent 70%), var(--bg-raise); } .cta-band h2 { margin: 0 0 var(--s-2); font-size: var(--fs-h2); } .cta-band p { margin: 0 auto var(--s-4); color: var(--text-2); max-width: 40rem; } /* ---- Callout ---- */ .callout { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); background: var(--bg-raise); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--r-1); color: var(--text-2); font-size: 0.96rem; } .callout.purple { border-left-color: var(--purple); } .callout.blue { border-left-color: var(--blue); } .callout strong { color: var(--text); } .callout p { margin: 0 0 0.6rem; } .callout p:last-child { margin-bottom: 0; } /* ---- Plan card (pricing) ---- */ .plan { max-width: 30rem; margin: 0 auto; background: var(--bg-raise); border: 1px solid var(--green); border-radius: var(--r-3); padding: var(--s-5) var(--s-4); text-align: center; box-shadow: var(--shadow-2), var(--glow-green); } .plan .plan-name { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.1em; color: var(--green-bright); margin: 0 0 var(--s-2); } .plan .plan-price { font-size: 2rem; font-weight: 800; margin: 0 0 var(--s-1); } .plan .plan-price small { display: block; font-size: 0.9rem; font-weight: 400; color: var(--text-3); margin-top: 0.3rem; } .plan ul.checks { text-align: left; margin: var(--s-4) auto; max-width: 22rem; } /* ---- Table of contents / numbered list (whitepaper) ---- */ ol.toc { list-style: none; counter-reset: toc; padding: 0; margin: var(--s-3) 0 0; } ol.toc li { counter-increment: toc; padding: 0.7rem 0 0.7rem 3rem; border-bottom: 1px solid var(--line); position: relative; color: var(--text-2); } ol.toc li:last-child { border-bottom: none; } ol.toc li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0.2rem; top: 0.75rem; font-size: 0.85rem; font-weight: 700; color: var(--green-bright); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } ol.toc li strong { color: var(--text); display: block; } /* ---- Stat strip ---- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); text-align: center; } .stat .stat-value { font-size: 1.8rem; font-weight: 800; color: var(--green-bright); } .stat .stat-label { font-size: var(--fs-small); color: var(--text-3); } /* -------------------------------------------------------------------------- 6. PROSE + GENERATED CONTENT — RENDER CONTRACT, do not rename classes. Used by: answers/_template.html, articles/_template.html, and the list markup emitted by publish_answer.py / publish_article.py between the ANSWERS_LIST / ARTICLES_LIST markers. -------------------------------------------------------------------------- */ article header.piece { margin-bottom: 2.5rem; } article header.piece .meta, main > header.piece .meta { color: var(--text-3); font-size: var(--fs-meta); letter-spacing: 0.05em; margin-bottom: 0.6rem; text-transform: uppercase; } article header.piece .meta .type { color: var(--green-bright); } article header.piece h1, main > header.piece h1 { font-size: var(--fs-h1); line-height: 1.15; margin: 0 0 0.6rem; font-weight: 800; letter-spacing: -0.015em; } article header.piece .subtitle, main > header.piece .subtitle { color: var(--text-2); font-size: 1.15rem; margin: 0; } main > header.piece { margin-bottom: 2.2rem; } blockquote.question { margin: 1.4rem 0 0; padding: 0.9rem 1.2rem; border-left: 3px solid var(--purple); background: var(--purple-soft); border-radius: 0 var(--r-1) var(--r-1) 0; color: var(--text-2); } article .body h2 { margin-top: 2.5rem; margin-bottom: 0.8rem; font-size: 1.45rem; } article .body h2::before { content: ""; display: block; width: 2.2rem; height: 2px; background: linear-gradient(90deg, var(--green), transparent); margin-bottom: 0.7rem; } article .body h3 { margin-top: 2rem; margin-bottom: 0.6rem; font-size: 1.15rem; color: var(--text-2); } article .body p { margin: 0 0 1.1rem; } article .body blockquote { margin: 1.5rem 0; padding: 0.2rem 1.2rem; border-left: 3px solid var(--purple); color: var(--text-2); } article .body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg-inset); border: 1px solid var(--line); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.92em; } article .body pre { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-1); padding: 1rem 1.2rem; overflow-x: auto; line-height: 1.5; font-size: 0.92rem; } article .body pre code { background: none; border: none; padding: 0; } article .body img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; border-radius: var(--r-1); } article .body ul, article .body ol { padding-left: 1.4rem; } article .body li { margin-bottom: 0.35rem; } article .body hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; } article .body table { border-collapse: collapse; width: 100%; font-size: 0.94rem; } article .body th, article .body td { border: 1px solid var(--line); padding: 0.5rem 0.7rem; text-align: left; } article .body th { background: var(--bg-raise); } .related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .related h3 { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin: 0 0 0.8rem; } .related ul { list-style: none; padding: 0; margin: 0; } .related li { margin-bottom: 0.3rem; } .subscribe-block { margin-top: 3rem; padding: 1.8rem 1.5rem; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--r-2); } .subscribe-block h3 { margin: 0 0 0.4rem; font-size: 1.1rem; } .subscribe-block p { color: var(--text-2); margin: 0 0 1rem; font-size: 0.95rem; } .subscribe-block p:last-child { margin-bottom: 0; } footer.piece-end { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--text-3); font-size: 0.9rem; } /* Generated index lists (publish scripts emit exactly these classes) */ .article-list { list-style: none; padding: 0; margin: 0; } .article-list li { position: relative; /* anchor for the whole-row click overlay below */ padding: 1.4rem 1.4rem; margin: 0 -1.4rem; border-bottom: 1px solid var(--line); border-radius: var(--r-2); transition: background 140ms ease; } .article-list li:hover, .article-list li:focus-within { background: var(--bg-raise); } .article-list li:last-child { border-bottom: none; } /* Make the entire row clickable: stretch the title link over the row. Pure CSS — the generated markup stays exactly as the scripts emit it. */ .article-list h2 a::after { content: ""; position: absolute; inset: 0; } .article-list .item-meta { color: var(--text-3); font-size: var(--fs-meta); letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 0.35rem; } .article-list .item-meta > span:first-child { color: var(--green-bright); } .article-list h2 { font-size: 1.35rem; margin: 0 0 0.4rem; font-weight: 700; } .article-list h2 a { color: var(--text); border-bottom: none; } .article-list h2 a:hover, .article-list h2 a:focus-visible { color: var(--green-bright); } .article-list .item-summary { color: var(--text-2); margin: 0 0 0.5rem; font-size: 0.98rem; } .tag { display: inline-block; font-size: 0.78rem; color: var(--text-2); background: var(--bg-raise); border: 1px solid var(--line); padding: 0.1rem 0.5rem; border-radius: var(--r-1); margin-right: 0.3rem; } .article-list li:hover .tag { background: var(--bg); } /* -------------------------------------------------------------------------- 7. FORMS (shared token-based styling; forms.css layers intake specifics) -------------------------------------------------------------------------- */ input, select, textarea, button { font: inherit; color: inherit; } form.intake input[type="text"], form.intake input[type="email"], form.intake select, form.intake textarea { background: var(--bg-inset); border: 1px solid var(--line-strong); border-radius: var(--r-1); color: var(--text); } form.intake input:focus, form.intake select:focus, form.intake textarea:focus { outline: 2px solid var(--green-bright); outline-offset: 1px; border-color: var(--green); } form.intake button { background: linear-gradient(180deg, #77993A, var(--green)); color: #FDFEF9; border: 0; border-radius: var(--r-2); font-weight: 600; cursor: pointer; } form.intake button:hover { background: linear-gradient(180deg, #86AB45, #6E9032); } /* -------------------------------------------------------------------------- 8. UTILITIES + MEDIA QUERIES -------------------------------------------------------------------------- */ .muted { color: var(--text-3); } .small { font-size: var(--fs-small); } .center { text-align: center; } .mt-0 { margin-top: 0; } .measure { max-width: 44rem; } .measure.center { margin-left: auto; margin-right: auto; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-art { order: -1; } .hero-art svg { max-width: 260px; } .pillars, .features, .grid-3, .stats { grid-template-columns: 1fr 1fr; } .split { grid-template-columns: 1fr; gap: var(--s-4); } } @media (max-width: 640px) { body { font-size: 17px; } main { padding: 1.8rem 1.2rem 2.5rem; } .site-inner { padding: 0.85rem 1.2rem; } .site nav { gap: 0.15rem 0.85rem; } .site nav a { font-size: 0.88rem; } .pillars, .features, .grid-2, .grid-3, .contrast, .stats { grid-template-columns: 1fr; } .hero { padding-top: var(--s-4); gap: var(--s-4); } .hero-art svg { max-width: 170px; } .article-list li { margin: 0; padding: 1.4rem 0; border-radius: 0; } .article-list li:hover { background: transparent; } article header.piece h1 { font-size: 1.7rem; } article .body h2 { font-size: 1.3rem; } .cta-band { padding: var(--s-4) var(--s-3); } } /* Large screens: wider measure, slightly larger type. */ @media (min-width: 1280px) { body { font-size: 19px; } :root { --max-w: min(90vw, 880px); --max-w-wide: min(92vw, 1240px); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media print { header.site, footer.site, .subscribe-block, .cta-band, .btn { display: none; } body { background: #fff; color: #000; } }