@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); @import 'tokens.css'; /* Dark mode — scoped to this site only, not part of firm branding data (tokens.css's colors come from PracticeOS's branding API; these do not, they're a fixed design decision for this site same as spacing/ motion tokens are). Toggled via [data-theme] on , set by the inline script in templates/base.html and persisted to localStorage. Same evergreen/brass motif, inverted for a dark background rather than a different palette — "ledger at night," not a different site. */ html[data-theme="dark"] { --color-ink: #ECEDEE; --color-evergreen: #4A9B82; --color-evergreen-deep: #0B1512; --color-paper: #17181A; --color-paper-raised: #202226; --color-brass: #D4A76A; --color-line: #2E3033; --color-line-strong: #45474B; --color-muted: #9AA0A6; } /* Design refresh (2026-07-30) — derived depth tokens computed FROM the branding colors above, not part of the branding-data contract itself (tokens.css's own comment reserves colors/fonts for PracticeOS's branding API - these are a static design decision for how those colors get USED, same category as the spacing/motion tokens already in tokens.css). Colored, low-opacity shadows read as more deliberate than default black ones; the tints/gradient give flat fills a bit of depth without introducing any new brand color. */ :root { --shadow-soft: 0 1px 2px rgba(18, 36, 31, 0.07), 0 10px 28px -14px rgba(18, 36, 31, 0.22); --shadow-lift: 0 6px 14px -4px rgba(18, 36, 31, 0.16), 0 24px 48px -20px rgba(18, 36, 31, 0.32); --evergreen-wash: linear-gradient(160deg, var(--color-evergreen) 0%, var(--color-evergreen-deep) 100%); --brass-tint: color-mix(in srgb, var(--color-brass) 16%, transparent); } html[data-theme="dark"] { --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.55); --shadow-lift: 0 6px 14px -4px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.65); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); border: 1px solid var(--color-line-strong); background: transparent; color: var(--color-ink); cursor: pointer; font-size: 1rem; line-height: 1; transition: border-color var(--duration-fast) var(--ease); } .theme-toggle:hover { border-color: var(--color-evergreen); } .site-header__actions { display: flex; align-items: center; gap: var(--space-2); } /* Form inputs — no rules existed for these at all before; text and placeholder color were pure browser defaults, which assume a light background. Fine in light mode by accident, unreadable in dark mode since the default placeholder gray reads as near-invisible against a dark input background. Both need an explicit, theme-reactive color. */ input, textarea, select { color: var(--color-ink); font-family: var(--font-body); } input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; /* Firefox lowers placeholder opacity by default; pin it so --color-muted's own contrast is what controls legibility, not a second opacity on top of it. */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; color: var(--color-ink); background: var(--color-paper); -webkit-font-smoothing: antialiased; } a { color: inherit; } :focus-visible { outline: 2px solid var(--color-brass); outline-offset: 3px; } .wrap { max-width: var(--content-width); margin-inline: auto; padding-inline: var(--space-3); } /* ---------- Ledger-line signature: section headers with a right-aligned monospace label, like a balance column in a book. This is the one consistent structural device across the whole site. ---------- */ .ledger-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); border-top: 1px solid var(--color-line-strong); padding-top: var(--space-1); margin-bottom: var(--space-4); } .ledger-line__label { font-family: var(--font-mono); font-size: var(--text-mono-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .ledger-line__meta { font-family: var(--font-mono); font-size: var(--text-mono-label); color: var(--color-muted); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--color-paper); border-bottom: 1px solid var(--color-line); } .site-header__row { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2); } .wordmark { display: inline-flex; align-items: center; text-decoration: none; } .wordmark span { color: var(--color-brass); } .wordmark-logo { height: 44px; width: auto; display: block; } /* Header wordmark swaps by theme: colored logo on the light (cream) header, white/evergreen logo on the dark header. Footer always uses the dark-mode logo directly (see base.html) since the footer surface is --color-evergreen-deep in both themes. */ .wordmark-logo--dark { display: none; } html[data-theme="dark"] .wordmark-logo--light { display: none; } html[data-theme="dark"] .wordmark-logo--dark { display: block; } .nav-links { display: flex; gap: var(--space-3); list-style: none; font-size: 0.9375rem; } .nav-links a { text-decoration: none; } .nav-links a:hover { color: var(--color-evergreen); } .btn { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; text-decoration: none; padding: 0.7em 1.3em; border-radius: var(--radius); transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); border: 1px solid transparent; } .btn--primary { background: var(--evergreen-wash); color: var(--color-on-dark); box-shadow: var(--shadow-soft); } .btn--primary:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); } .btn--ghost { border-color: var(--color-line-strong); color: var(--color-ink); } .btn--ghost:hover { border-color: var(--color-evergreen); } .btn--primary, .btn--ghost { transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); } /* Editorial italic accent — one or two words per headline, never a whole sentence (see home.html's "good shape"). */ em { font-style: italic; color: var(--color-brass); font-weight: inherit; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: var(--space-6) var(--space-5); } /* Faint ledger-paper grid, faded out toward the edges - the same graph-paper idea as a real accounting ledger, not a generic decorative pattern. Sits behind the chart illustration, very low opacity so it never competes with the actual copy. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(var(--color-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-line) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.5; -webkit-mask-image: radial-gradient(560px 380px at 88% 15%, #000 0%, transparent 70%); mask-image: radial-gradient(560px 380px at 88% 15%, #000 0%, transparent 70%); pointer-events: none; } .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: end; } .hero__chart { position: absolute; z-index: 0; top: 8%; right: -2%; width: min(440px, 40vw); opacity: 0.92; pointer-events: none; } @media (max-width: 900px) { .hero__chart { display: none; } } .hero__eyebrow { font-family: var(--font-mono); font-size: var(--text-mono-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brass); margin-bottom: var(--space-2); } .hero h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-hero); line-height: 1.04; letter-spacing: -0.015em; max-width: 15ch; } .hero__sub { margin-top: var(--space-3); max-width: 42ch; color: var(--color-muted); font-size: 1.125rem; } .hero__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); } /* ---------- Section rhythm ---------- */ section { padding-block: var(--space-5); } section + section { border-top: 1px solid var(--color-line); } /* ---------- Services grid ---------- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); } .service-card { position: relative; background: var(--color-paper-raised); padding: var(--space-3); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--space-1); transition: background var(--duration-fast) var(--ease), transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease); } .service-card:hover { background: var(--color-paper); transform: translateY(-3px); box-shadow: var(--shadow-lift); z-index: 1; } .service-card__icon { /* inline-flex, not the bare default `inline` - width/height on a plain inline element are ignored per spec. On the homepage grid this class happens to sit inside `.service-card` (display: flex), which blockifies it and masks the bug there; the service-detail page hero uses this same class standalone with no flex parent, so the 30x30 size was silently dropped and the child svg (100% width/ height, see below) expanded to fill the whole content column instead - rendering at over 1000px. inline-flex fixes both call sites the same way. */ display: inline-flex; width: 30px; height: 30px; color: var(--color-brass); margin-bottom: var(--space-1); } .service-card__icon svg { width: 100%; height: 100%; } .service-card__category { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); } .service-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; margin-top: 0.15em; } .service-card p { color: var(--color-muted); font-size: 0.9375rem; } .service-card__go { margin-top: auto; font-family: var(--font-mono); font-size: var(--text-mono-label); color: var(--color-brass); transition: transform var(--duration-fast) var(--ease); } .service-card:hover .service-card__go { transform: translateX(3px); } /* ---------- How it works — genuinely sequential, so numbering earns its place ---------- */ .steps { display: grid; gap: var(--space-3); } .step { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--space-2); align-items: start; } .step__index { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--brass-tint); font-family: var(--font-mono); font-size: 1.0625rem; color: var(--color-brass); } .step h3 { font-size: 1.0625rem; margin-bottom: 0.25em; } .step p { color: var(--color-muted); font-size: 0.9375rem; } /* ---------- Trust strip ---------- */ .trust-strip { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline; } .trust-stat { display: flex; flex-direction: column; gap: 0.3em; } .trust-stat strong { display: block; font-family: var(--font-mono); font-size: 1.75rem; font-weight: 500; } .trust-stat span { font-size: var(--text-small); color: var(--color-muted); } .trust-stat__spark { width: 60px; height: 18px; color: var(--color-brass); opacity: 0.85; } /* ---------- Footer ---------- */ .site-footer { background: var(--color-evergreen-deep); color: var(--color-on-dark); padding-block: var(--space-5) var(--space-4); } .site-footer .wrap { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-4); } .site-footer h4 { font-family: var(--font-mono); font-size: var(--text-mono-label); letter-spacing: 0.08em; text-transform: uppercase; color: #9FB0A7; margin-bottom: var(--space-2); } .site-footer ul { list-style: none; display: grid; gap: 0.6em; font-size: 0.9375rem; } .site-footer a { text-decoration: none; opacity: 0.9; } .site-footer a:hover { opacity: 1; text-decoration: underline; } .footer-link-button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; padding: 0; text-align: left; cursor: pointer; opacity: 0.9; } .footer-link-button:hover { opacity: 1; text-decoration: underline; } .site-footer__legal { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.12); font-family: var(--font-mono); font-size: var(--text-mono-label); color: #9FB0A7; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); } /* ---------- Mobile nav toggle ---------- Hidden at desktop widths - .nav-links is the always-visible header row there. Below 800px (see the @media block further down), .nav-links becomes a hidden dropdown and this button is what opens it - previously .nav-links just vanished at that width with nothing to replace it, taking FAQ/Send a File with it (the only two nav items with no fallback link anywhere else on the page). */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); border: 1px solid var(--color-line-strong); background: transparent; color: var(--color-ink); cursor: pointer; font-size: 1rem; line-height: 1; transition: border-color var(--duration-fast) var(--ease); } .nav-toggle:hover { border-color: var(--color-evergreen); } /* ---------- Legal page body (rendered HTML from tenant_site_content) ---------- */ .legal-body { color: var(--color-muted); font-size: 1rem; line-height: 1.7; } .legal-body h2 { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--color-ink); margin-top: var(--space-4); margin-bottom: var(--space-1); } .legal-body h2:first-of-type { margin-top: 0; } .legal-body p { margin-bottom: var(--space-2); } .legal-body strong { color: var(--color-ink); } .legal-body a { color: var(--color-evergreen); } .legal-body ul { margin: 0 0 var(--space-2) var(--space-3); padding-left: var(--space-2); } .legal-body li { margin-bottom: 0.3em; } /* ---------- Cookie consent (banner + preferences panel) ---------- Added 2026-07-31 alongside the real Cookie Policy content, which makes a factual claim ("manage non-essential cookies through the Cookie Preferences control in the website footer") that had no actual control behind it before this - see cookie-consent.js. */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: none; gap: var(--space-2); flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); background: var(--color-paper-raised); border-top: 1px solid var(--color-line-strong); box-shadow: var(--shadow-lift); } .cookie-banner.is-visible { display: flex; } .cookie-banner__text { font-size: var(--text-small); color: var(--color-muted); max-width: 60ch; flex: 1 1 320px; } .cookie-banner__actions { display: flex; gap: 0.6em; flex-wrap: wrap; } .cookie-banner__actions button { font-family: var(--font-body); font-weight: 500; font-size: 0.875rem; padding: 0.55em 1.1em; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--color-line-strong); background: transparent; color: var(--color-ink); } .cookie-banner__actions button.primary { background: var(--evergreen-wash); color: var(--color-on-dark); border-color: transparent; } .cookie-prefs-overlay { position: fixed; inset: 0; z-index: 101; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); padding: var(--space-3); } .cookie-prefs-overlay.is-visible { display: flex; } .cookie-prefs-panel { background: var(--color-paper-raised); border: 1px solid var(--color-line-strong); border-radius: var(--radius); padding: var(--space-3); max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto; } .cookie-prefs-panel h2 { font-size: 1.0625rem; margin-bottom: var(--space-2); } .cookie-prefs-category { display: flex; justify-content: space-between; gap: var(--space-2); padding: 0.7em 0; border-top: 1px solid var(--color-line); } .cookie-prefs-category:first-of-type { border-top: none; } .cookie-prefs-category__label { font-weight: 600; font-size: 0.9375rem; } .cookie-prefs-category__desc { font-size: var(--text-small); color: var(--color-muted); margin-top: 0.2em; } .cookie-prefs-panel__actions { display: flex; gap: 0.6em; flex-wrap: wrap; margin-top: var(--space-3); } /* ---------- Responsive ---------- */ @media (max-width: 800px) { .nav-toggle { display: inline-flex; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: var(--space-2); background: var(--color-paper); border-bottom: 1px solid var(--color-line); padding: var(--space-2) var(--space-3) var(--space-3); } .nav-links.is-open { display: flex; } .site-footer .wrap { grid-template-columns: 1fr 1fr; } }