/* ========================================================================== Candor AI — Global Stylesheet Aesthetic: Editorial / civic / community-warm. "Boring beautiful." Author: Candor AI LLC | May 2026 ========================================================================== */ /* ---- Fonts (loaded from Google Fonts in HTML ) ---- */ /* Fraunces — display serif, variable, expressive */ /* Manrope — humanist sans, body */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { /* Brand colors — straight from the logo system */ --color-green: #2D5016; /* Forest green — primary, weight */ --color-green-light: #EBF2E4; /* Light green — subtle section bg */ --color-amber: #C8751A; /* Amber — accent, CTAs (sparing) */ --color-warm-white: #F9F7F4; /* Warm white — ground */ --color-tan: #E2D9CC; /* Tan — hairline dividers */ --color-ink: #1C1C1A; /* Near black — body text */ --color-gray: #8A8A84; /* Gray — quiet text, eyebrows */ --color-gray-soft: #B8B5AC; /* Even quieter */ /* Typography */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; /* Layout */ --content-max: 1200px; --measure-prose: 62ch; /* Optimal reading width */ --measure-narrow: 44ch; --measure-wide: 76ch; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 200ms; --duration-base: 400ms; } /* ========================================================================== 2. RESET + BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background-color: var(--color-warm-white); color: var(--color-ink); font-family: var(--font-body); font-size: 1.0625rem; /* 17px — slightly larger than default */ line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--color-green); line-height: 1.1; letter-spacing: -0.01em; } /* Display headline — hero level */ .display { font-family: var(--font-display); font-weight: 400; font-variation-settings: 'SOFT' 50, 'opsz' 144; font-size: clamp(2.5rem, 6vw + 0.5rem, 5rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--color-green); } h1 { font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem); font-variation-settings: 'opsz' 144; } h2 { font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem); margin-top: var(--space-8); margin-bottom: var(--space-5); font-variation-settings: 'opsz' 96; } h3 { font-size: 1.5rem; margin-top: var(--space-7); margin-bottom: var(--space-3); font-variation-settings: 'opsz' 24; } h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--color-ink); margin-top: var(--space-5); margin-bottom: var(--space-2); } p { max-width: var(--measure-prose); margin-bottom: var(--space-5); } .lead { font-size: 1.25rem; line-height: 1.55; color: var(--color-ink); max-width: var(--measure-wide); font-weight: 400; } strong { font-weight: 600; color: var(--color-green); } em { font-style: italic; font-family: var(--font-display); } /* Eyebrow label — tracked uppercase Manrope, echoes brand SVG */ .eyebrow { display: inline-block; font-family: var(--font-body); font-size: 0.6875rem; /* 11px */ font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-amber); margin-bottom: var(--space-4); } .eyebrow--quiet { color: var(--color-gray); } /* Pull quote / interstitial editorial style */ .pull { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem); line-height: 1.25; color: var(--color-green); max-width: var(--measure-wide); padding-left: var(--space-5); border-left: 2px solid var(--color-amber); margin: var(--space-8) 0; } /* ========================================================================== 4. LAYOUT ========================================================================== */ .container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-5); } @media (min-width: 768px) { .container { padding: 0 var(--space-7); } } .section { padding: var(--space-9) 0; } @media (min-width: 768px) { .section { padding: var(--space-10) 0; } } .section--tight { padding: var(--space-7) 0; } .section--green { background: var(--color-green-light); } .section--ink { background: var(--color-green); color: var(--color-warm-white); } .section--ink h1, .section--ink h2, .section--ink h3 { color: var(--color-warm-white); } /* Hairline divider — echoes the SVG label rules */ .rule { border: 0; border-top: 1px solid var(--color-tan); margin: var(--space-7) 0; } .rule--amber { border-top-color: var(--color-amber); border-top-width: 1.5px; max-width: 48px; margin: var(--space-5) 0; } /* Two-column editorial layout */ .editorial { display: grid; grid-template-columns: 1fr; gap: var(--space-7); } @media (min-width: 900px) { .editorial { grid-template-columns: 1fr 1.4fr; gap: var(--space-9); } } .editorial--reverse { grid-template-columns: 1fr; } @media (min-width: 900px) { .editorial--reverse { grid-template-columns: 1.4fr 1fr; } } /* ========================================================================== 5. NAVIGATION ========================================================================== */ .site-header { border-bottom: 1px solid var(--color-tan); background: var(--color-warm-white); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background-color: rgba(249, 247, 244, 0.92); } .nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; min-height: 72px; } .nav__logo { display: block; width: 200px; max-width: 60vw; } @media (min-width: 768px) { .nav__logo { width: 240px; } } .nav__links { display: none; list-style: none; gap: var(--space-6); align-items: center; } @media (min-width: 768px) { .nav__links { display: flex; } } .nav__links a { font-size: 0.9375rem; font-weight: 500; color: var(--color-ink); letter-spacing: 0.01em; padding: var(--space-2) 0; border-bottom: 1px solid transparent; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .nav__links a:hover, .nav__links a:focus-visible { color: var(--color-green); border-bottom-color: var(--color-amber); } .nav__toggle { display: block; background: none; border: 0; cursor: pointer; padding: var(--space-2); color: var(--color-green); } @media (min-width: 768px) { .nav__toggle { display: none; } } .nav__toggle svg { width: 24px; height: 24px; } /* Mobile menu (opens via JS) */ .nav__mobile { display: none; border-top: 1px solid var(--color-tan); padding: var(--space-4) 0 var(--space-6); } .nav__mobile.is-open { display: block; } .nav__mobile ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); } .nav__mobile a { display: block; font-size: 1.125rem; font-weight: 500; color: var(--color-ink); padding: var(--space-2) 0; } /* ========================================================================== 6. HERO ========================================================================== */ .hero { padding: var(--space-9) 0 var(--space-10); position: relative; overflow: hidden; } @media (min-width: 768px) { .hero { padding: var(--space-10) 0 var(--space-11); } } .hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; } @media (min-width: 900px) { .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); } } .hero__meta { display: flex; flex-direction: column; gap: var(--space-3); } .hero__location { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-amber); font-weight: 600; } .hero__sub { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.55; color: var(--color-ink); max-width: var(--measure-prose); margin-top: var(--space-5); } .hero__cta { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } @media (min-width: 600px) { .hero__cta { flex-direction: row; gap: var(--space-6); align-items: center; } } /* ========================================================================== 7. BUTTONS + LINKS ========================================================================== */ /* Primary CTA — editorial style, not chunky */ .btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-warm-white); background: var(--color-green); border: 1px solid var(--color-green); border-radius: 2px; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .btn:hover, .btn:focus-visible { background: var(--color-ink); border-color: var(--color-ink); } .btn--ghost { background: transparent; color: var(--color-green); border-color: var(--color-green); } .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--color-green); color: var(--color-warm-white); } /* Quiet text link with amber underline — editorial pattern */ .link-arrow { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--color-green); border-bottom: 1.5px solid var(--color-amber); padding-bottom: 2px; display: inline-flex; align-items: center; gap: var(--space-2); transition: gap var(--duration-fast) var(--ease-out); } .link-arrow:hover, .link-arrow:focus-visible { gap: var(--space-3); color: var(--color-amber); } .link-arrow::after { content: "→"; font-family: var(--font-body); transition: transform var(--duration-fast) var(--ease-out); } .link-arrow:hover::after { transform: translateX(2px); } /* ========================================================================== 8. CONTENT BLOCKS ========================================================================== */ /* Numbered list of principles / stages (editorial style) */ .numbered { list-style: none; counter-reset: numbered; display: flex; flex-direction: column; gap: var(--space-7); margin: var(--space-7) 0; } .numbered li { counter-increment: numbered; display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; padding-top: var(--space-5); border-top: 1px solid var(--color-tan); } .numbered li::before { content: counter(numbered, decimal-leading-zero); font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; font-style: italic; color: var(--color-amber); line-height: 1; } .numbered li h3 { margin-top: 0; margin-bottom: var(--space-2); font-size: 1.375rem; } .numbered li p { margin-bottom: 0; color: var(--color-ink); } /* Stat / fact callout (small, editorial) */ .fact { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gray); font-variation-settings: 'opsz' 8; } /* Card grid — restrained, no rounded boxes */ .cards { display: grid; grid-template-columns: 1fr; gap: var(--space-7); margin: var(--space-7) 0; } @media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); } } @media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card { padding-top: var(--space-5); border-top: 1.5px solid var(--color-amber); } .card h3 { margin-top: 0; margin-bottom: var(--space-3); font-size: 1.25rem; } .card p { font-size: 0.9375rem; line-height: 1.55; margin-bottom: 0; } /* ========================================================================== 9. FOOTER ========================================================================== */ .site-footer { background: var(--color-green); color: var(--color-warm-white); padding: var(--space-9) 0 var(--space-6); margin-top: var(--space-10); } .site-footer .container { padding-bottom: var(--space-6); } .footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); margin-bottom: var(--space-7); } @media (min-width: 700px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } } .footer__logo { width: 280px; max-width: 100%; margin-bottom: var(--space-4); } .footer__tag { font-size: 0.9375rem; color: var(--color-green-light); max-width: 36ch; line-height: 1.55; } .footer__col h4 { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-amber); font-weight: 600; margin-bottom: var(--space-4); } .footer__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .footer__col a { color: var(--color-green-light); font-size: 0.9375rem; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color var(--duration-fast) var(--ease-out); } .footer__col a:hover, .footer__col a:focus-visible { border-bottom-color: var(--color-amber); } .footer__bottom { border-top: 1px solid rgba(235, 242, 228, 0.18); padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.8125rem; color: var(--color-green-light); opacity: 0.85; } @media (min-width: 700px) { .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } } .footer__bottom .legal-note { max-width: 56ch; line-height: 1.55; } /* ========================================================================== 10. PAGE HEADERS (non-home pages) ========================================================================== */ .page-header { padding: var(--space-8) 0 var(--space-7); border-bottom: 1px solid var(--color-tan); } .page-header__eyebrow { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-amber); font-weight: 600; margin-bottom: var(--space-4); display: block; } .page-header h1 { margin-bottom: var(--space-4); max-width: 20ch; } .page-header .lead { max-width: var(--measure-wide); } /* ========================================================================== 11. UTILITIES ========================================================================== */ .text-amber { color: var(--color-amber); } .text-green { color: var(--color-green); } .text-gray { color: var(--color-gray); } .serif { font-family: var(--font-display); } .italic { font-style: italic; } .center { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-0 { margin-bottom: 0 !important; } .mt-0 { margin-top: 0 !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================== 12. MOTION ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .fade-in { opacity: 0; transform: translateY(8px); animation: fadeIn var(--duration-base) var(--ease-out) forwards; } .fade-in--1 { animation-delay: 0ms; } .fade-in--2 { animation-delay: 80ms; } .fade-in--3 { animation-delay: 160ms; } .fade-in--4 { animation-delay: 240ms; } .fade-in--5 { animation-delay: 320ms; } } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } /* ========================================================================== 13. SELECTION + FOCUS ========================================================================== */ ::selection { background: var(--color-amber); color: var(--color-warm-white); } :focus-visible { outline: 2px solid var(--color-amber); outline-offset: 3px; } /* ========================================================================== 14. PRINT ========================================================================== */ @media print { .site-header, .site-footer, .nav, .hero__cta { display: none; } body { font-size: 11pt; color: #000; background: #fff; } }