/* ========================================================================== McMENOMY LAW — “The Way Through” Design system · Familiar Ground: steady · local · generous Palette, mark rules and header spec: HANDOFF §4 / §4a. Layout, motion and component architecture carried from the July build; every brand value replaced. ========================================================================== */ /* Fonts are linked separately (assets/fonts/fonts.css) to avoid an @import chain. */ /* ---------- Tokens ---------- */ :root { /* palette — exact (HANDOFF §4) */ --sierra: #35485A; /* primary anchor — Sierra dusk */ --juniper: #64788A; /* working mid-tone */ --bone: #EFEAE0; /* ground — never white */ --charcoal: #3E3A34; /* text — never black */ --pinyon: #5C6B54; /* secondary */ --sage: #9CA88F; /* secondary */ --clay: #B08968; /* secondary — the warm note */ /* derived, plain hex (InStatic keeps literals only) */ --sierra-deep: #2A3A49; /* footer ground, scrim ends */ --bone-deep: #E4DED2; /* tinted bands */ --bone-light: #F6F2EA; /* cards on bone */ --ink-soft: #65615A; /* charcoal 78% on bone · 6.4:1 */ --clay-deep: #7A5B40; /* clay for small text on bone · 5.1:1 */ --pinyon-deep: #44503E; /* pinyon for small text on bone · 7.1:1 */ --sage-deep: #5E6A53; /* sage for small text on bone · 4.8:1 */ --bone-soft: #C9C5BE; /* bone 78% on sierra · 5.1:1 */ /* roles */ --paper: var(--bone); --paper-deep: var(--bone-deep); --paper-warm: var(--bone-light); --white: var(--bone-light); --ink: var(--charcoal); --ink-2: var(--sierra); --dark: var(--sierra); --accent: var(--clay); --accent-deep: var(--clay-deep); --accent-soft: #D9BFA6; /* clay lifted for dark grounds · 5.8:1 on sierra */ --line: #D3CEC4; /* charcoal 16% on bone */ --line-soft: #DFDAD1; /* charcoal 9% on bone */ --line-paper: #5E6C77; /* bone 22% on sierra */ --line-paper-soft: #495A69; /* bone 11% on sierra */ /* pattern — the Northern Nevada line field, applied as a mask so colour is a token */ --pattern: url("/assets/brand/web/Northern-Nevada-Pattern-Wide-NoBG.svg"); --pattern-tall: url("/assets/brand/web/Northern-Nevada-Pattern-NoBG.svg"); /* type */ --serif: "Marcellus", "Cinzel", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --italic: "EB Garamond", "Iowan Old Style", Georgia, serif; --sans: "Instrument Sans", "Avenir Next", "Helvetica Neue", sans-serif; --caps: "Cinzel", "Marcellus", Georgia, serif; --fs-900: clamp(2.6rem, 1.1rem + 6.2vw, 5.6rem); --fs-800: clamp(2.15rem, 1.2rem + 3.9vw, 3.9rem); --fs-700: clamp(1.8rem, 1.2rem + 2.4vw, 2.85rem); --fs-600: clamp(1.4rem, 1.12rem + 1.3vw, 1.95rem); --fs-500: clamp(1.17rem, 1.06rem + 0.5vw, 1.4rem); --fs-400: 1.0625rem; --fs-300: 0.9375rem; --fs-200: 0.8125rem; --fs-100: 0.75rem; /* space & shape */ --gutter: clamp(1.25rem, 4.5vw, 4rem); --section: clamp(4.5rem, 11vw, 9.5rem); --section-sm: clamp(3rem, 7vw, 6rem); --container: 84rem; --r-lg: 20px; --r-md: 14px; --r-sm: 8px; --arch: 999px 999px var(--r-md) var(--r-md); --header-h: 92px; /* motion */ --ease-out: cubic-bezier(0.22, 0.61, 0.21, 1); --ease-spring: cubic-bezier(0.34, 1.18, 0.44, 1); --t-fast: 220ms; --t-med: 480ms; --t-slow: 800ms; --shadow-soft: 0 22px 55px -28px rgba(53, 72, 90, 0.35); --shadow-lift: 0 30px 70px -30px rgba(53, 72, 90, 0.45); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--fs-400); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; min-height: 100svh; } img, picture, video, svg { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4 { overflow-wrap: break-word; } p { text-wrap: pretty; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } a { color: inherit; } ::selection { background: var(--sierra); color: var(--bone); } [hidden] { display: none !important; } /* ---------- Cross-document view transitions ---------- */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: vt-out 300ms var(--ease-out) both; } ::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; } } @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } } .site-header { view-transition-name: site-header; } /* ---------- Focus & a11y ---------- */ :focus-visible { outline: 2px solid var(--sierra); outline-offset: 3px; border-radius: 4px; } .on-dark :focus-visible, .hero :focus-visible { outline-color: var(--bone); } .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 10000; background: var(--sierra); color: var(--bone); padding: 0.7rem 1.2rem; border-radius: 0 0 12px 12px; font-weight: 600; text-decoration: none; transition: top var(--t-fast) var(--ease-out); } .skip-link:focus { top: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Typography ---------- */ .font-serif { font-family: var(--serif); } h1, h2, h3, .h1, .h2, .h3 { font-family: var(--serif); font-weight: 400; line-height: 1.06; letter-spacing: 0.005em; color: var(--ink); text-wrap: balance; } h1, .h1 { font-size: var(--fs-900); line-height: 1.02; } h2, .h2 { font-size: var(--fs-800); } h3, .h3 { font-size: var(--fs-600); line-height: 1.18; } h4, .h4 { font-family: var(--sans); font-size: var(--fs-400); font-weight: 600; } .on-dark h1, .on-dark h2, .on-dark h3, .hero h1 { color: var(--bone); } /* the accent word — Garamond italic, warmer and a half-step lighter. Never amber. */ .serif-italic, .accent-word { font-family: var(--italic); font-style: italic; font-weight: 400; letter-spacing: 0; } .accent-word { color: var(--juniper); } .on-dark .accent-word, .hero .accent-word { color: var(--accent-soft); } .lede { font-size: var(--fs-500); line-height: 1.55; color: var(--ink-soft); max-width: 34em; } .on-dark .lede { color: var(--bone-soft); } /* eyebrow — certificate register: tracked small caps with a short rule. Never mono. */ .folio, .eyebrow { font-family: var(--caps); font-size: var(--fs-100); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sierra); display: inline-flex; align-items: center; gap: 0.8em; } .folio::before, .eyebrow::before { content: ""; width: 2.2em; height: 1px; background: var(--clay); flex: none; } .folio--bare::before, .eyebrow--bare::before { display: none; } .on-dark .folio, .on-dark .eyebrow, .hero .folio { color: var(--bone-soft); } .on-dark .folio::before, .hero .folio::before { background: var(--sage); } /* ---------- Layout ---------- */ .container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; } .container--narrow { max-width: 50rem; } .container--wide { max-width: 96rem; } .section { padding-block: var(--section); position: relative; } .section--sm { padding-block: var(--section-sm); } .section--flush-top { padding-top: 0; } .section--tint { background: var(--paper-deep); } /* running head: hairline + eyebrow left, quiet note right */ .rule-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; margin-bottom: clamp(2.2rem, 5vw, 4rem); } .rule-head .folio::before { display: none; } .rule-head__right { font-family: var(--sans); font-size: var(--fs-200); letter-spacing: 0.02em; color: var(--ink-soft); } .on-dark .rule-head { border-color: var(--line-paper-soft); } .on-dark .rule-head__right { color: var(--bone-soft); } /* dark Sierra-dusk sections */ .on-dark { background: var(--sierra); color: var(--bone); } .on-dark--2 { background: var(--sierra-deep); } /* the Northern Nevada field: large or cropped, texture density, never captioned */ .field, .topo { position: relative; isolation: isolate; } .field::before, .topo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--field-ink, var(--bone)); opacity: var(--field-opacity, 0.07); -webkit-mask-image: var(--pattern); mask-image: var(--pattern); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: var(--field-size, 180%); mask-size: var(--field-size, 180%); -webkit-mask-position: var(--field-pos, 40% 30%); mask-position: var(--field-pos, 40% 30%); } .field--light::before, .topo--light::before { --field-ink: var(--juniper); --field-opacity: 0.09; } /* ---------- Buttons & links ---------- */ .btn { --btn-bg: var(--sierra); --btn-fg: var(--bone); display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: var(--fs-300); letter-spacing: 0.01em; text-decoration: none; border: 1px solid transparent; border-radius: 999px; padding: 0.95em 1.9em; cursor: pointer; position: relative; white-space: nowrap; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .btn:hover { --btn-bg: var(--charcoal); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(62, 58, 52, 0.5); } .btn:active { transform: translateY(0); } .btn--clay { --btn-bg: var(--clay); --btn-fg: var(--charcoal); } .btn--clay:hover { --btn-bg: var(--bone); --btn-fg: var(--charcoal); } .btn--bone { --btn-bg: var(--bone); --btn-fg: var(--sierra); } .btn--bone:hover { --btn-bg: var(--accent-soft); --btn-fg: var(--charcoal); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); } .btn--ghost:hover { --btn-bg: var(--sierra); --btn-fg: var(--bone); border-color: var(--sierra); box-shadow: var(--shadow-soft); } .on-dark .btn { --btn-bg: var(--bone); --btn-fg: var(--sierra); } .on-dark .btn:hover { --btn-bg: var(--accent-soft); --btn-fg: var(--charcoal); } .on-dark .btn--ghost { --btn-bg: transparent; --btn-fg: var(--bone); border-color: var(--line-paper); } .on-dark .btn--ghost:hover { --btn-bg: var(--bone); --btn-fg: var(--sierra); border-color: var(--bone); } .btn .btn-arrow { transition: transform var(--t-fast) var(--ease-spring); } .btn:hover .btn-arrow { transform: translateX(4px); } .btn--phone { font-family: var(--serif); font-size: var(--fs-400); letter-spacing: 0.02em; padding-block: 0.8em; } .cta-pair { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; } /* drawn underline link */ .link-quiet { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: var(--fs-300); text-decoration: none; color: var(--sierra); background-image: linear-gradient(var(--clay), var(--clay)); background-repeat: no-repeat; background-size: 0% 1.5px; background-position: 0 100%; padding-bottom: 3px; transition: background-size var(--t-med) var(--ease-out), color var(--t-fast); } .link-quiet:hover { background-size: 100% 1.5px; color: var(--charcoal); } .on-dark .link-quiet { color: var(--bone); } .on-dark .link-quiet:hover { color: var(--accent-soft); } .link-quiet svg { transition: transform var(--t-fast) var(--ease-spring); } .link-quiet:hover svg { transform: translateX(4px); } /* ---------- Header (HANDOFF §4a: two-line lockup at rest, mark alone when condensed) ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; border-bottom: 1px solid transparent; transition: background-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); } .site-header.is-scrolled { background: rgba(239, 234, 224, 0.88); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); border-color: var(--line-soft); } .site-header.is-hidden { transform: translateY(-100%); } html.nav-open .site-header, html.nav-open .site-header.header-on-dark:not(.is-scrolled) { z-index: 300; color: var(--ink); background: var(--paper); /* the menu scrolls under it once Practice Areas is open */ -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; transform: none; } html.nav-open .site-header .brand, html.nav-open .site-header .site-nav__link, html.nav-open .site-header .header-phone { text-shadow: none !important; } /* ---------- practice areas submenu ---------- Opens on hover and on keyboard focus, so it is reachable without a pointer. The parent link still goes to the hub, so nothing is trapped behind a hover. */ .site-nav__list .has-submenu { position: relative; } /* One panel, three columns: each area's page as the column head and its pages beneath, so every practice page is one hover away (Denver 2026-09-23). */ .submenu { position: absolute; top: 100%; left: 50%; translate: -50% 0; margin: 0; padding: 1.3rem 1.6rem 1.1rem; list-style: none; display: grid; grid-template-columns: repeat(3, max-content); gap: 0 2.4rem; background: var(--bone-light); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast); z-index: 10; text-align: left; color: var(--ink); } .has-submenu:hover > .submenu, .has-submenu:focus-within:not(.is-dismissed) > .submenu { opacity: 1; visibility: visible; transform: translateY(0); } .submenu__col ul { list-style: none; margin: 0; padding: 0; } .submenu__head, .submenu__col ul a, .submenu__all { display: block; text-decoration: none; transition: color var(--t-fast); } .submenu__head { font-family: var(--serif); font-size: var(--fs-400); color: var(--ink); padding: 0.2rem 0 0.5rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 0.5rem; white-space: nowrap; } .submenu__col ul a { font-size: var(--fs-200); color: var(--ink-soft); padding: 0.3rem 0; white-space: nowrap; } .submenu__head:hover, .submenu__col ul a:hover, .submenu__head:focus-visible, .submenu__col ul a:focus-visible { color: var(--sierra); text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; } .submenu__all { grid-column: 1 / -1; margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line-soft); font-size: var(--fs-200); color: var(--ink-soft); } .submenu__all:hover, .submenu__all:focus-visible { color: var(--sierra); } /* the gap between link and panel would drop the hover, so bridge it */ .has-submenu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.75rem; } /* Up to 1410px the centred panel reaches left under the lockup, so it opens 1.2rem lower to clear it, and the hover bridge grows to span the drop. From 1406px up it clears as it is. */ @media (max-width: 88.125rem) { .submenu { top: calc(100% + 1.2rem); } .has-submenu::after { height: 1.4rem; } } .header-phone { text-shadow: none !important; } .header-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); transition: height var(--t-med) var(--ease-out); } .is-scrolled .header-bar { height: 68px; } .brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; height: 100%; flex: none; } .brand img { max-width: none; } .brand__lockup, .brand__lockup-dark { height: 54px; width: 210px; background: url("/assets/brand/web/mcmenomy-law-lockup-horizontal-color-light.svg") no-repeat left center / contain; } .brand__lockup-dark { background-image: url("/assets/brand/web/mcmenomy-law-lockup-horizontal-color-dark.svg"); } .brand__mark, .brand__mark-dark { height: 40px; width: 29px; display: none; background: url("/assets/brand/web/mcmenomy-law-mark-light.svg") no-repeat center / contain; } .brand__mark-dark { background-image: url("/assets/brand/web/mcmenomy-law-mark-dark.svg"); } /* on the hero, the header sits on imagery: use the bone (dark-ground) lockup */ .brand__lockup-dark, .brand__mark-dark { display: none; } .header-on-dark:not(.is-scrolled) .brand__lockup { display: none; } .header-on-dark:not(.is-scrolled) .brand__lockup-dark { display: block; } /* the full lockup stays for the whole scroll; it only shrinks to fit the 68px scrolled bar. The mark alone is the small-screen state, not the scrolled one. */ .is-scrolled .brand__lockup, .is-scrolled .brand__lockup-dark { height: 44px; width: 171px; } .is-scrolled .brand__mark { display: none; } html.nav-open .brand__lockup-dark, html.nav-open .brand__mark-dark { display: none !important; } html.nav-open .brand__lockup { display: block !important; } html.nav-open .is-scrolled .brand__lockup { display: block; } .header-on-dark:not(.is-scrolled) { color: var(--bone); } .site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); } .site-nav__list { display: flex; gap: clamp(1rem, 2.2vw, 2rem); list-style: none; padding: 0; margin: 0; } .site-nav__link { font-size: var(--fs-300); font-weight: 600; text-decoration: none; white-space: nowrap; opacity: 0.88; background-image: linear-gradient(var(--clay), var(--clay)); background-repeat: no-repeat; background-size: 0% 1.5px; background-position: 0 100%; padding-bottom: 4px; transition: opacity var(--t-fast), background-size var(--t-med) var(--ease-out); } .site-nav__link:hover, .site-nav__link[aria-current="page"] { opacity: 1; background-size: 100% 1.5px; } .header-phone { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--serif); font-size: var(--fs-300); letter-spacing: 0.03em; text-decoration: none; white-space: nowrap; opacity: 0.92; transition: opacity var(--t-fast), color var(--t-fast); } .header-phone:hover { opacity: 1; color: var(--clay-deep); } .header-on-dark:not(.is-scrolled) .header-phone:hover { color: var(--accent-soft); } .header-cta { padding: 0.72em 1.5em; } .header-on-dark:not(.is-scrolled) .header-cta { --btn-bg: var(--bone); --btn-fg: var(--sierra); } .header-on-dark:not(.is-scrolled) .header-cta:hover { --btn-bg: var(--accent-soft); --btn-fg: var(--charcoal); } .header-on-dark:not(.is-scrolled) .site-nav__link, .header-on-dark:not(.is-scrolled) .header-phone { text-shadow: 0 1px 14px rgba(42, 58, 73, 0.5); } /* mobile nav toggle */ .nav-toggle { display: none; background: none; border: 0; padding: 0.6rem; cursor: pointer; z-index: 310; position: relative; color: inherit; } .nav-toggle__box { display: block; width: 26px; height: 16px; position: relative; } .nav-toggle__box span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t-med) var(--ease-spring), top var(--t-med) var(--ease-out), opacity var(--t-fast); } .nav-toggle__box span:nth-child(1) { top: 0; } .nav-toggle__box span:nth-child(2) { top: 7px; } .nav-toggle__box span:nth-child(3) { top: 14px; } .nav-open .nav-toggle__box span:nth-child(1) { top: 7px; transform: rotate(45deg); } .nav-open .nav-toggle__box span:nth-child(2) { opacity: 0; } .nav-open .nav-toggle__box span:nth-child(3) { top: 7px; transform: rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); display: grid; grid-template-rows: auto 1fr auto auto; padding: 6.5rem var(--gutter) calc(4.4rem + 1.25rem); transform: translateY(-102%); visibility: hidden; /* slides down to open and back up to close; visibility waits for the slide (Denver 2026-09-23) */ transition: transform 520ms var(--ease-out), visibility 0s linear 520ms; isolation: isolate; } /* the tall pattern, not the wide one: the wide sheet mirrors its horns inside a phone's width (Denver 2026-09-23). Fitted to the height, centred. */ .mobile-menu::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--juniper); opacity: 0.08; -webkit-mask-image: var(--pattern-tall); mask-image: var(--pattern-tall); -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-position: 50% 0; mask-position: 50% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .mobile-menu:focus { outline: none; } .nav-open .mobile-menu { transform: translateY(0); visibility: visible; transition: transform 560ms var(--ease-out), visibility 0s; } .mobile-menu__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; align-content: center; } .mobile-menu__link { font-family: var(--serif); font-size: clamp(2rem, 8vw, 3.2rem); text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.8rem; padding-block: 0.35rem; opacity: 0; transform: translateY(24px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-fast); } .mobile-menu__link:hover { color: var(--clay-deep); } .nav-open .mobile-menu__link { opacity: 1; transform: translateY(0); } /* Practice Areas opens a list of its pages in place (Denver 2026-09-23) */ .mobile-menu__row { display: flex; align-items: center; gap: 0.9rem; } .mobile-menu__more { background: none; border: 1px solid var(--ink); border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); cursor: pointer; padding: 0; transition: transform var(--t-med) var(--ease-spring), background var(--t-fast); } .mobile-menu__more[aria-expanded="true"] { transform: rotate(180deg); background: var(--bone-deep); } .mobile-menu__sub { display: grid; gap: 1.1rem; padding: 0.6rem 0 1rem; } .mobile-menu__sub[hidden] { display: none; } .mobile-menu__area ul { list-style: none; margin: 0; padding: 0; } .mobile-menu__area-head, .mobile-menu__area li a { display: block; text-decoration: none; } .mobile-menu__area-head { font-family: var(--serif); font-size: var(--fs-500); color: var(--sierra); padding-bottom: 0.4rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--line); } .mobile-menu__area li a { font-size: var(--fs-300); color: var(--ink-soft); padding: 0.35rem 0; } /* social buttons above the foot rule (Denver 2026-09-23). The accounts are not linked yet: the office has not said which exist, so the buttons carry no href and are pinned in the Notes layer until the URLs arrive. */ .mobile-menu__social { align-self: end; display: flex; gap: 0.7rem; padding-bottom: 1.2rem; } .social-btn { width: 44px; height: 44px; border-radius: 50%; background: none; border: 1px solid var(--ink); color: var(--ink); display: grid; place-items: center; text-decoration: none; transition: background var(--t-fast), transform var(--t-fast) var(--ease-spring); } .social-btn:hover { background: var(--bone-deep); transform: translateY(-1px); } .mobile-menu__foot { align-self: end; border-top: 1px solid var(--line); padding-top: 1.4rem; display: grid; gap: 0.6rem; font-size: var(--fs-300); color: var(--ink-soft); } /* persistent tap-to-call bar on phones (wireframe 01, note 4) */ .call-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--sierra); color: var(--bone); padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-paper); box-shadow: 0 -12px 30px -18px rgba(42, 58, 73, 0.6); } .call-bar a { display: flex; align-items: center; justify-content: center; gap: 0.6em; text-decoration: none; color: inherit; font-family: var(--serif); font-size: var(--fs-500); letter-spacing: 0.02em; } .call-bar svg { color: var(--accent-soft); } /* Where the opening section already has a call button, main.js holds the bar back until that point has scrolled away (Home: the end of the awards band). Without JS it simply stays. */ .call-bar { transition: transform var(--t-med) var(--ease-out), visibility 0s; } .call-bar.is-held { transform: translateY(100%); visibility: hidden; transition: transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med); } @media (prefers-reduced-motion: reduce) { .call-bar, .call-bar.is-held { transition: none; } } /* ---------- Hero (home) ---------- */ .hero { position: relative; min-height: min(100svh, 1800px); display: grid; align-items: end; color: var(--bone); isolation: isolate; overflow: clip; } .hero__media, .hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero__media img, .hero__media video { animation: hero-drift 28s var(--ease-out) both; } @keyframes hero-drift { from { transform: scale(1.08); } to { transform: scale(1); } } /* dusk grade: the warm image is pulled into the Sierra-dusk palette from the top and bottom */ /* pause for the moving background (WCAG 2.2.2); autoplay is skipped under reduced motion */ .hero__pause { position: absolute; left: var(--gutter); bottom: calc(4.4rem + 1.6rem); z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(42,58,73,0.45); color: var(--bone); border: 1px solid rgba(239,234,224,0.45); padding: 0; cursor: pointer; opacity: 0.6; transition: opacity var(--t-fast), background var(--t-fast); } .hero__pause:hover, .hero__pause:focus-visible { opacity: 1; background: var(--sierra-deep); } .hero__pause-icon--play, .hero__pause[aria-pressed="true"] .hero__pause-icon--pause { display: none; } .hero__pause[aria-pressed="true"] .hero__pause-icon--play { display: block; } @media (prefers-reduced-motion: reduce) { .hero__media img, .hero__media video { animation: none; } } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,58,73,0.62) 0%, rgba(42,58,73,0.18) 32%, rgba(42,58,73,0.12) 55%, rgba(42,58,73,0.86) 100%), linear-gradient(90deg, rgba(42,58,73,0.35) 0%, rgba(42,58,73,0) 60%); } .hero__inner { padding-block: 9rem clamp(7rem, 13vh, 10rem); display: grid; gap: 1.6rem; max-width: 62rem; } .hero__eyebrow { color: var(--bone); opacity: 0.92; } .hero h1 { text-wrap: balance; max-width: 13.5em; font-size: clamp(2.5rem, 1rem + 5.1vw, 4.9rem); } .hero h1 .accent-word { font-size: 1.04em; } .hero .lede { color: var(--bone-soft); max-width: 36em; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.6rem; align-items: center; } .hero .btn--ghost { --btn-fg: var(--bone); border-color: rgba(239,234,224,0.45); background: rgba(42,58,73,0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hero .btn--ghost:hover { --btn-bg: var(--bone); --btn-fg: var(--sierra); border-color: var(--bone); } .hero .btn--bone { --btn-bg: var(--bone); --btn-fg: var(--sierra); } .hero .btn--bone:hover { --btn-bg: var(--accent-soft); --btn-fg: var(--charcoal); } /* the mark, ghosted into the hero sky: static — a canyon is founded on ground */ .hero__mark { position: absolute; top: clamp(7rem, 15vh, 10rem); right: clamp(1.5rem, 6vw, 6rem); width: clamp(90px, 10vw, 150px); z-index: 0; pointer-events: none; opacity: 0.32; } @media (max-width: 48rem) { .hero__mark { display: none; } } /* line-mask reveal for the headline */ /* room below the baseline for descenders (g, y, and the larger italic accent line), taken back with a negative margin so the headline's spacing is unchanged */ .line-mask { display: block; overflow: hidden; padding-block: 0.06em 0.24em; margin-bottom: -0.18em; } .line-mask > span { display: block; } .js .line-mask > span { animation: line-rise 950ms var(--ease-out) backwards; animation-delay: var(--d, 0ms); } @keyframes line-rise { from { transform: translateY(135%); } } /* clears the deeper mask, so each line still starts fully hidden */ .js .fade-up { animation: fade-rise 900ms var(--ease-out) backwards; animation-delay: var(--d, 0ms); } @keyframes fade-rise { from { opacity: 0; transform: translateY(16px); } } /* trust strip pinned at the hero's foot — every item verifiable (wireframe 01, note 5) */ .hero__ledger { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line-paper); background: rgba(42, 58, 73, 0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .hero__ledger-row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding-block: 1rem; font-size: var(--fs-200); letter-spacing: 0.02em; color: rgba(239,234,224,0.92); } .hero__ledger-row .stars { color: var(--accent-soft); letter-spacing: 0.2em; } .hero__ledger-item { display: inline-flex; align-items: center; gap: 0.7em; white-space: nowrap; } .hero__ledger-item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(239,234,224,0.4); } .scroll-cue { position: absolute; right: var(--gutter); bottom: 5.8rem; display: grid; justify-items: center; gap: 0.8rem; color: var(--bone); opacity: 0.85; } .scroll-cue__label { font-family: var(--caps); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; writing-mode: vertical-rl; } .scroll-cue__line { width: 1px; height: 54px; background: linear-gradient(var(--bone), transparent); position: relative; overflow: hidden; } .scroll-cue__line::after { content: ""; position: absolute; top: -40%; left: 0; width: 100%; height: 40%; background: var(--accent-soft); animation: cue-fall 2.2s var(--ease-out) infinite; } @keyframes cue-fall { to { top: 120%; } } /* ---------- Awards band — immediately beneath the hero, beside the primary CTA ---------- */ .awards-band { background: var(--paper-deep); border-bottom: 1px solid var(--line-soft); padding-block: clamp(1.6rem, 3.5vw, 2.6rem); } /* Seven awards: the heading sits above them so four columns get the full width (2026-10-02). */ .awards-band__row { display: grid; grid-template-columns: 1fr; gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .awards-band__lead { display: grid; gap: 0.2rem; } .awards-band__lead .folio::before { display: none; } .awards-band__lead strong { font-family: var(--serif); font-size: var(--fs-600); font-weight: 400; color: var(--sierra); line-height: 1.15; } .badge-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem clamp(1rem, 2vw, 1.8rem); align-items: center; } .badge { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; min-width: 0; } .badge__art { width: 54px; height: 54px; flex: none; color: var(--sierra); } .badge__text { display: grid; line-height: 1.22; min-width: 0; overflow-wrap: anywhere; } .badge__title { font-family: var(--serif); font-size: var(--fs-300); color: var(--charcoal); } .badge__sub { font-size: var(--fs-100); letter-spacing: 0.02em; color: var(--ink-soft); max-width: 16em; } .badge--embargo { padding-left: clamp(0.5rem, 1.5vw, 1.2rem); border-left: 1px solid var(--line); } .badge--embargo .badge__art { color: var(--juniper); opacity: 0.75; } .badge--embargo .badge__title { color: var(--ink-soft); font-family: var(--italic); font-style: italic; font-size: var(--fs-400); } /* ---------- Reveal-on-scroll ---------- */ [data-reveal] { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js [data-reveal] { opacity: 0; transform: translateY(22px); } .js [data-reveal].is-in { opacity: 1; transform: none; } .reveal-instant [data-reveal], .reveal-instant [data-reveal] .img-window img, .reveal-instant [data-reveal].img-window img { transition: none !important; } .js [data-reveal="fade"] { transform: none; } .js [data-reveal="left"] { transform: translateX(-28px); } .js [data-reveal="right"] { transform: translateX(28px); } /* sideways reveals widen the page on phones before they fire, so they rise instead */ @media (max-width: 760px) { .js [data-reveal="left"], .js [data-reveal="right"] { transform: translateY(22px); } } /* image window w/ zoom-settle reveal */ .img-window { overflow: clip; border-radius: var(--r-md); position: relative; background: var(--paper-deep); } .img-window img { width: 100%; height: 100%; object-fit: cover; } [data-reveal].img-window img, [data-reveal] .img-window img { transform: scale(1.08); transition: transform 1200ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-in.img-window img, [data-reveal].is-in .img-window img { transform: scale(1); } /* arch window — the mark's arch, carried into layout */ .img-window--arch { border-radius: var(--arch); } /* dusk grade for warm imagery: a whisper of Sierra dusk laid over every photograph */ .img-window::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(53,72,90,0.06), rgba(53,72,90,0.16)); mix-blend-mode: multiply; } /* ---------- Cards ---------- */ .card { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.2rem); position: relative; transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med); } a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: rgba(156, 168, 143, 0.6); } /* practice cards — the three doors */ .chapter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); } .chapter { /* slack sits below the list, not inside the body copy: an equal-height card used to stretch its paragraph row and leave a hole above the bullets */ position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 1.1rem; text-decoration: none; color: inherit; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.3rem, 2.6vw, 2rem); --chapter-px: clamp(1.3rem, 2.6vw, 2rem); --chapter-py: clamp(1.3rem, 2.6vw, 2rem); overflow: clip; transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med); } a.chapter:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(156, 168, 143, 0.7); } .chapter::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--clay); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-med) var(--ease-out); } a.chapter:hover::before { transform: scaleX(1); } .chapter__folio { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--caps); font-size: var(--fs-100); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sierra); border-bottom: 1px solid var(--line-soft); padding-bottom: 0.9rem; } .chapter__num { font-family: var(--serif); font-size: 1.4rem; color: var(--clay); letter-spacing: 0; } .chapter h3, .chapter h2 { font-size: var(--fs-600); } /* h2 where no section h2 precedes (heading order, v2.43) */ .chapter__body { color: var(--ink-soft); font-size: var(--fs-300); } .chapter__list { list-style: none; padding: 0; margin: 0.3rem 0 0; display: grid; align-content: start; gap: 0.45rem; font-size: var(--fs-300); color: var(--ink); } .chapter__list li { display: flex; gap: 0.7em; align-items: baseline; } .chapter__list li::before { content: ""; width: 0.9em; height: 1px; background: var(--clay); flex: none; transform: translateY(-0.35em); } .chapter__media { margin-inline: calc(-1 * var(--chapter-px)); margin-bottom: calc(-1 * var(--chapter-py)); margin-top: 0.4rem; aspect-ratio: 16 / 9; } .chapter__media .img-window { border-radius: 0; height: 100%; } .chapter__media--top { margin: calc(-1 * var(--chapter-py)) calc(-1 * var(--chapter-px)) 0.4rem; } .chapter__cta { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: var(--fs-300); color: var(--sierra); } .chapter__cta svg { transition: transform var(--t-fast) var(--ease-spring); } a.chapter:hover .chapter__cta svg { transform: translateX(5px); } a.chapter:hover .chapter__cta { color: var(--clay-deep); } .chapter .img-window img { transition: transform 900ms var(--ease-out); } a.chapter:hover .img-window img { transform: scale(1.04) !important; } /* the ridge-and-river line — one line from the pattern, laid behind a section for the second look */ .ridge-line { position: absolute; z-index: 0; pointer-events: none; color: var(--juniper); opacity: 0.2; } .ridge-line svg { width: 100%; height: 100%; overflow: visible; } .section-wm--ridge .ridge-line { top: -4%; right: -4vw; height: 92%; aspect-ratio: 513 / 999; } .section-wm--ridge::before { display: none; } .section-wm--ridge > .container { position: relative; z-index: 1; } /* icon disc for promise cards */ .icon-disc { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(156, 168, 143, 0.22); color: var(--sierra); margin-bottom: 1.2rem; } .icon-disc svg { width: 26px; height: 26px; } .card .card-index { position: absolute; top: 1.3rem; right: 1.5rem; font-family: var(--serif); font-size: 1rem; letter-spacing: 0.08em; color: var(--clay); opacity: 0.8; } /* ---------- Stats (verifiable figures only) ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-paper-soft); border-block: 1px solid var(--line-paper-soft); } .stat { background: var(--sierra); padding: clamp(1.6rem, 3.4vw, 2.8rem) clamp(1rem, 2.4vw, 2rem); display: grid; gap: 0.5rem; align-content: start; } .stat__num { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; } .stat__num .suffix { color: var(--accent-soft); } .stat__label { font-size: var(--fs-300); color: var(--bone-soft); } .stat--link { text-decoration: none; color: inherit; transition: background var(--t-fast); } .stat--link:hover, .stat--link:focus-visible { background: var(--sierra-deep); } .stat--link .stat__label { text-decoration: underline; text-decoration-color: var(--line-paper); text-underline-offset: 3px; } .stat__arrow { display: inline-block; vertical-align: -1px; margin-left: 0.3em; transition: transform var(--t-fast) var(--ease-spring); } .stat--link:hover .stat__arrow { transform: translateX(3px); } .stat__note { font-size: var(--fs-200); color: var(--bone-soft); opacity: 0.8; } /* on paper (Reviews): light cells on the tint band read as a box, so the strip is rounded like the cards below it and ruled on all four sides */ .stat-grid--light { background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: clip; } .stat-grid--light .stat { background: var(--bone-light); } .stat-grid--light .stat__num { color: var(--sierra); } .stat-grid--light .stat__label { color: var(--ink-soft); } /* ---------- Testimonials ---------- */ .testimonial-stage { position: relative; min-height: 17rem; } .testimonial-stage::before { content: "\201C"; position: absolute; top: -0.22em; left: -0.06em; font-family: var(--italic); font-style: italic; font-size: clamp(9rem, 18vw, 15rem); line-height: 1; color: var(--clay); opacity: 0.16; pointer-events: none; z-index: 0; } .testimonial { position: absolute; inset: 0; display: grid; gap: 1.6rem; align-content: start; opacity: 0; transform: translateY(12px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); pointer-events: none; z-index: 1; } .testimonial.is-active { opacity: 1; transform: none; pointer-events: auto; position: relative; transition: opacity 560ms var(--ease-out) 240ms, transform 560ms var(--ease-out) 240ms; } .testimonial blockquote { font-family: var(--serif); font-size: var(--fs-700); line-height: 1.25; text-wrap: balance; max-width: 26em; color: var(--charcoal); } .testimonial blockquote em { font-family: var(--italic); font-style: italic; color: var(--juniper); font-size: 1.06em; } .testimonial__meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .testimonial__stars { color: var(--clay); letter-spacing: 0.18em; font-size: var(--fs-300); } .testimonial__name { font-family: var(--caps); font-size: var(--fs-100); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .testimonial-nav { display: flex; gap: 0.6rem; margin-top: 2rem; align-items: center; } .testimonial-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-spring); } .testimonial-nav button:hover { background: var(--sierra); color: var(--bone); border-color: var(--sierra); transform: translateY(-2px); } .testimonial-dots { display: inline-flex; gap: 0.55rem; margin-left: 1.2rem; align-items: center; } /* 24px targets (WCAG 2.5.8); the dot is drawn inside */ .testimonial-dots button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; } .testimonial-dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--juniper); transition: background var(--t-fast), transform var(--t-fast) var(--ease-spring), border-color var(--t-fast); } .testimonial-dots button.is-active::before { background: var(--clay); border-color: var(--clay); transform: scale(1.25); } .testimonial-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2.5rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--fs-300); } /* ---------- Team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2.2vw, 2rem); } /* three of five: centred rather than left-justified, so the row reads as a balanced group instead of a four-column grid with a hole in it */ .team-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 64rem; margin-inline: auto; } .person { text-decoration: none; color: inherit; display: grid; gap: 1rem; align-content: start; } .person .img-window--arch { aspect-ratio: 3 / 3.6; } .person .img-window--arch img { transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out); } a.person:hover .img-window--arch img { transform: scale(1.045); } .person__name { font-family: var(--serif); font-size: var(--fs-500); line-height: 1.2; display: inline-block; background-image: linear-gradient(var(--clay), var(--clay)); background-repeat: no-repeat; background-size: 0% 1.5px; background-position: 0 100%; padding-bottom: 3px; transition: background-size var(--t-med) var(--ease-out); } a.person:hover .person__name { background-size: 100% 1.5px; } .person__role { font-size: var(--fs-200); letter-spacing: 0.02em; color: var(--ink-soft); margin-top: 0.35em; } .person__bio { color: var(--ink-soft); font-size: var(--fs-300); } /* ---------- practice colourways (review 2 §9) ---------- One hue family per practice, carried on the eyebrow, the short rule, the list ticks, the button and a large cropped pattern panel. Sage is not used here: darkened enough to carry small text it lands within 9 degrees of pinyon, so the two practices would read as one green. Sierra anchors probate on purpose. Text uses the deep variants, the full-chroma hue carries the panel. */ .practice { --practice: var(--sierra); --practice-deep: var(--sierra); } .practice--estate-planning { --practice: var(--clay); --practice-deep: var(--clay-deep); } .practice--probate { --practice: var(--sierra); --practice-deep: var(--sierra); } .practice--real-estate { --practice: var(--pinyon); --practice-deep: var(--pinyon-deep); } /* Practice colour lives on bone only. The dark surfaces inside a practice page, the pre-footer CTA band (.on-dark) and the in-prose callout (.prose-cta), are global chrome: they look exactly as they do on Home, on every page. Every rule here excludes them. (Denver, 2026-09-23 — the colour had been bleeding into the CTA band and the callout on the door pages.) */ .practice :is(.folio, .eyebrow):not(:is(.on-dark, .prose-cta) *) { color: var(--practice-deep); } .practice :is(.folio, .eyebrow):not(:is(.on-dark, .prose-cta) *)::before { background: var(--practice); } .practice .chapter__list li:not(:is(.on-dark, .prose-cta) *)::before { background: var(--practice); } .practice .page-hero__meta span::before { background: var(--practice); } .practice .btn:not(:is(.on-dark, .prose-cta) *) { --btn-bg: var(--practice-deep); --btn-fg: var(--bone); } .practice .btn:not(:is(.on-dark, .prose-cta) *):hover { --btn-bg: var(--charcoal); } .practice .btn--ghost:not(:is(.on-dark, .prose-cta) *) { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--practice); } .practice .btn--ghost:not(:is(.on-dark, .prose-cta) *):hover { --btn-bg: var(--practice-deep); --btn-fg: var(--bone); } /* Probate sits in a flat band of sierra so the site's default eyebrow colour still reads as a deliberate choice rather than an absence (Denver 2026-09-21). No pattern inside it: the composed panel is a picture, not a texture, and at block scale it read as scenery, which is the wrong way round for this brand (HANDOFF §4). Cut on 2026-09-21 after review: the pattern mats behind the arches and the page-length channel line. Both were §9 asks, both read as distractions on the page. The pattern now appears only in full-section fields. Don't reintroduce either without a reference from Denver. */ /* The room is the block's own padding box, so it never reaches into the blocks around it: the block's padding is the room's inner margin and the neighbours' padding is the gap outside it, which puts the room's edge where the hairline between blocks would sit (so the hairlines either side of it go). It overhangs the container by part of the gutter, so its text still lines up with the blocks above and below and a margin of parchment always shows round it. Boxed sections are rounded at --r-lg, the radius of the cards and the hero image (Denver 2026-09-23). On phones the tint runs edge to edge as a band, like the site's other tinted sections, so there are no corners to round. */ .practice__room { position: relative; isolation: isolate; } .practice__room::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 calc(-0.6 * var(--gutter)); background-color: var(--practice, var(--sierra)); opacity: var(--field-tint, 0.11); border-radius: var(--r-lg); } .feature-row + .feature-row.practice__room, .feature-row.practice__room + .feature-row { border-top: 0; } @media (max-width: 40rem) { .practice__room::before { inset: 0 calc(-1 * var(--gutter)); border-radius: 0; } } /* ---------- practice blocks: same motif, three scales (review 2 §9) ---------- Selectors are qualified with .feature-row on purpose: the base .feature-row rule is defined later in this file, so an unqualified .arch--* would lose the cascade to it on source order. */ .practice-block { position: relative; } /* 01 — large, bleeding off the edge. body has overflow-x: clip, so 100vw is safe. */ .feature-row.arch--bleed .feature-row__media { margin-inline-end: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)); } .feature-row.arch--bleed .feature-row__media .img-window--arch { aspect-ratio: 4 / 3.4; } /* 02 — in the image column like the other two, inside the room (Denver 2026-09-23; it was floated small into the text, which left the room's right half empty). */ .feature-row.arch--column .feature-row__media .img-window--arch { aspect-ratio: 4 / 3.6; } /* 03 — full height. */ .feature-row.arch--full { align-items: stretch; } .feature-row.arch--full .feature-row__media { display: grid; } .feature-row.arch--full .feature-row__media .img-window--arch { aspect-ratio: auto; min-height: 32rem; } /* 64rem is where .feature-row stacks (below); the arches take their stacked proportions at the same width, or between 62 and 64rem they stack at desktop size */ @media (max-width: 64rem) { .feature-row.arch--bleed .feature-row__media { margin-inline-end: 0; } .feature-row.arch--bleed .feature-row__media .img-window--arch, .feature-row.arch--column .feature-row__media .img-window--arch, .feature-row.arch--full .feature-row__media .img-window--arch { aspect-ratio: 4 / 3; min-height: 0; } } /* ---------- CTA band ---------- */ /* The band before the footer is one thing sitewide, so its pattern field is set here and never per page. It was tuned inline on Home only, which is why the same section read differently on the practice pages — at the default crop the composed panel landed on empty space and the pattern vanished. The footer below it stays solid, so the two sections read as distinct (review 2 §9). */ .cta-band { text-align: center; } .cta-band.field { --field-size: 260%; --field-pos: 96% 60%; --field-opacity: 0.06; } .cta-band h2 { max-width: 16em; margin-inline: auto; text-wrap: balance; } .cta-band .lede { margin-inline: auto; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin-top: 2.2rem; } .cta-band__phone { font-family: var(--serif); font-size: var(--fs-600); color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--line-paper); transition: color var(--t-fast), border-color var(--t-fast); } .cta-band__phone:hover { color: var(--accent-soft); border-color: var(--accent-soft); } .cta-band__note { margin-top: 1.6rem; font-size: var(--fs-300); color: var(--bone-soft); } /* ---------- FAQ ---------- */ .faq { display: grid; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.35rem 0.2rem; font-family: var(--serif); font-size: var(--fs-500); transition: color var(--t-fast); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--sierra); } .faq summary .faq__icon { flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; position: relative; transition: transform var(--t-med) var(--ease-spring), background var(--t-fast), border-color var(--t-fast); } .faq summary .faq__icon::before, .faq summary .faq__icon::after { content: ""; position: absolute; background: currentColor; transition: transform var(--t-med) var(--ease-out); } .faq summary .faq__icon::before { width: 11px; height: 1.5px; } .faq summary .faq__icon::after { width: 1.5px; height: 11px; } .faq details[open] summary .faq__icon { transform: rotate(45deg); background: var(--sierra); border-color: var(--sierra); color: var(--bone); } .faq__a { padding: 0 0.2rem 1.6rem; color: var(--ink-soft); max-width: 62ch; } .faq__a p + p { margin-top: 0.8em; } /* ---------- Footer ---------- */ .site-footer { font-size: var(--fs-300); background: var(--sierra-deep); color: var(--bone); } .site-footer.field::before { content: none; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(2rem, 4vw, 4rem); padding-block: calc(var(--section-sm) * 0.85) calc(var(--section-sm) * 0.6); } .footer-brand { display: grid; gap: 1.2rem; align-content: start; } .footer-brand__lockup { width: 140px; height: auto; } .footer-brand p { color: var(--bone-soft); max-width: 24em; } /* same three buttons as the phone menu, on the dark ground; unlinked until the office sends the addresses (pinned in the Notes layer) */ .footer-social { display: flex; gap: 0.7rem; margin-top: 1.1rem; } .footer-social .social-btn { width: 38px; height: 38px; background: transparent; color: var(--bone); border: 1px solid rgba(239,234,224,0.35); } .footer-social .social-btn:hover { background: var(--bone); color: var(--sierra); } .footer-col h2 { font-family: var(--caps); font-size: var(--fs-100); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-soft); margin-bottom: 1.1rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .footer-col li { color: var(--bone-soft); } .footer-col a { text-decoration: none; color: var(--bone); opacity: 0.9; transition: opacity var(--t-fast), color var(--t-fast); } .footer-col a:hover { opacity: 1; color: var(--accent-soft); } .footer-areas { border-top: 1px solid var(--line-paper-soft); padding-block: 1.6rem; display: grid; gap: 0.8rem; } .footer-areas h2 { font-family: var(--caps); font-size: var(--fs-100); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-soft); } .area-groups { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 1.2rem clamp(2.5rem, 7vw, 6rem); } .area-group { display: grid; gap: 0.3rem; align-content: start; } .area-group__state { font-family: var(--caps); font-size: var(--fs-100); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-soft); } .area-group__primary { font-family: var(--serif); font-size: var(--fs-500); color: var(--bone); } .area-group__places { color: var(--bone-soft); } .area-group a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-paper); transition: border-color var(--t-fast), color var(--t-fast); } .area-group a:hover { color: var(--accent-soft); border-color: var(--accent-soft); } .footer-trust { border-top: 1px solid var(--line-paper-soft); padding-block: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; color: var(--bone-soft); } .footer-trust__awards { display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .footer-trust__awards svg { width: 26px; height: 26px; color: var(--accent-soft); } .footer-legal { border-top: 1px solid var(--line-paper-soft); padding-block: 1.6rem; display: grid; gap: 1rem; font-size: var(--fs-200); color: var(--bone-soft); } .footer-legal a { color: inherit; } .footer-legal .disclaimers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; } /* One row: copyright left, legal links centred, the credit right (Denver, 2026-09-25). Links are bolder instead of underlined; a clay line grows in on hover, as in the nav. */ .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 0.8rem 2rem; font-family: var(--caps); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; } .footer-bottom > :first-child { justify-self: start; } .footer-bottom > :nth-child(2) { justify-self: center; } .footer-credit { justify-self: end; } .footer-bottom a { color: var(--bone); font-weight: 600; text-decoration: none; background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; padding-bottom: 2px; transition: color var(--t-fast), background-size var(--t-med) var(--ease-out); } .footer-bottom a:hover, .footer-bottom a:focus-visible { color: var(--accent-soft); background-size: 100% 1px; } @media (prefers-reduced-motion: reduce) { .footer-bottom a { transition: none; } } /* The three parts need ~1,040px side by side; narrower, they stack centred. */ @media (max-width: 72rem) { .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.7rem; } .footer-bottom > * { justify-self: center !important; } } /* ---------- Pending — the one placeholder object ---------- A labelled gap, never plausible copy (HANDOFF §6 rule 1). A hairline in juniper, a small-caps "Pending" word, then what is owed and by whom. Never dashed, never a box. */ .pending { display: inline-flex; align-items: baseline; gap: 0.6em; padding-left: 0.85em; border-left: 1px solid var(--juniper); font-family: var(--sans); font-size: var(--fs-200); line-height: 1.45; color: var(--ink-soft); text-align: left; } .pending::before { content: "Pending"; font-family: var(--caps); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sierra); flex: none; } .pending--block { display: flex; padding-block: 0.2em; max-width: 40em; } .on-dark .pending, .site-footer .pending { color: var(--bone-soft); border-color: var(--sage); } .on-dark .pending::before, .site-footer .pending::before { color: var(--bone); } /* ---------- Page hero (interior pages) ---------- */ .page-hero { padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } .page-hero h1 { max-width: 14em; text-wrap: balance; } /* reference pages (Accessibility): a plain title set in the text column, not a headline */ .page-hero--plain { padding-bottom: 0; } .page-hero--plain h1 { max-width: none; margin: 0; } .page-hero--plain + .section--sm { padding-top: clamp(1.5rem, 3vw, 2.2rem); } .page-hero__col { max-width: 42rem; margin-inline: auto; } /* same measure as .prose, without its link styling */ .page-hero--plain + .section--sm .prose > :first-child { margin-top: 0; } .page-hero__lede { margin-top: 1.4rem; } .page-hero__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem; margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); max-width: 46rem; font-size: var(--fs-300); color: var(--ink-soft); } .page-hero__meta span { display: inline-flex; align-items: baseline; gap: 0.6em; } .page-hero__meta span::before { content: ""; width: 0.9em; height: 1px; background: var(--clay); transform: translateY(-0.35em); } .breadcrumbs { font-family: var(--caps); font-size: var(--fs-100); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.6em; margin-bottom: 1.6rem; padding: 0; } .breadcrumbs ol { display: contents; margin: 0; padding: 0; } .breadcrumbs a { text-decoration: none; color: inherit; transition: color var(--t-fast); } .breadcrumbs a:hover { color: var(--clay-deep); } .breadcrumbs li { list-style: none; display: inline-flex; gap: 0.6em; } .breadcrumbs li + li::before { content: "/"; opacity: 0.5; } .hero-band { position: relative; } .hero-band .img-window { aspect-ratio: 21 / 8; border-radius: var(--r-lg); } .hero-band--short .img-window { aspect-ratio: 21 / 6; } /* Column counts that pages used to set inline; inline styles beat the phone rules below. */ .badge-row--3 { grid-template-columns: repeat(3, 1fr); } .post-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 56rem; } .chapter-grid--4 { grid-template-columns: repeat(4, 1fr); } /* ---------- Prose ---------- */ .prose { max-width: 42rem; } .prose > * + * { margin-top: 1.15em; } .prose h2 { font-size: var(--fs-600); margin-top: 2em; } .prose h3 { font-size: var(--fs-500); margin-top: 1.7em; } .prose ul, .prose ol { padding-left: 1.2em; } .prose li + li { margin-top: 0.45em; } .prose a { color: var(--sierra); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(176,137,104,0.6); } .prose a:hover { text-decoration-color: currentColor; } .prose blockquote { border-left: 2px solid var(--clay); padding-left: 1.4em; font-family: var(--italic); font-style: italic; font-size: var(--fs-500); color: var(--sierra); } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); } .prose th, .prose td { text-align: left; padding: 0.75em 0.9em; border-bottom: 1px solid var(--line-soft); } .prose th { font-family: var(--caps); font-size: var(--fs-100); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sierra); } /* comparison tables: stack into labelled blocks on narrow screens */ .prose .table-stack td { vertical-align: top; } .prose .table-stack th[scope="row"] { font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 500; vertical-align: top; } @media (max-width: 640px) { /* the short hero band is a 95px sliver at phone width; give it a real picture */ .hero-band .img-window, .hero-band--short .img-window { aspect-ratio: 3 / 2; } .prose .table-stack thead { display: none; } .prose .table-stack, .prose .table-stack tbody, .prose .table-stack tr, .prose .table-stack th, .prose .table-stack td { display: block; } /* each row is a card: the situation as its heading, the columns as labelled lines under it, so nothing has to be matched across a gap (Denver 2026-09-23) */ .prose .table-stack tbody { display: grid; gap: 0.9rem; } .prose .table-stack tr { padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--bone-light); } .prose .table-stack th[scope="row"] { padding: 0 0 0.6em; margin-bottom: 0.7em; border: 0; border-bottom: 1px solid var(--line-soft); font-family: var(--serif); font-size: var(--fs-500); line-height: 1.2; } .prose .table-stack td { padding: 0; border: 0; } .prose .table-stack td + td { margin-top: 0.8em; } .prose .table-stack td::before { content: attr(data-label); display: block; font-family: var(--caps); font-size: var(--fs-100); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sierra); margin-bottom: 0.25em; } } .prose .drop-cap::first-letter { font-family: var(--serif); font-size: 3.4em; float: left; line-height: 0.82; padding: 0.06em 0.12em 0 0; color: var(--sierra); } .answer-box { background: var(--paper-warm); border: 1px solid var(--line-soft); border-left: 3px solid var(--clay); border-radius: var(--r-lg); padding: 1.3rem 1.5rem; font-size: var(--fs-300); } .answer-box strong { font-family: var(--caps); font-size: var(--fs-100); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sierra); display: block; margin-bottom: 0.5em; } /* ---------- Forms ---------- */ .field { display: grid; gap: 0.5rem; } .field label { font-weight: 600; font-size: var(--fs-300); } .field .hint { font-size: var(--fs-200); color: var(--ink-soft); } .field input, .field textarea, .field select { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 0.85em 1em; transition: border-color var(--t-fast), box-shadow var(--t-fast); width: 100%; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--sierra); box-shadow: 0 0 0 3px rgba(53, 72, 90, 0.16); } .field.has-error input, .field.has-error textarea { border-color: var(--clay-deep); } .field .error-msg { color: var(--clay-deep); font-size: var(--fs-200); font-weight: 600; display: none; } .field.has-error .error-msg { display: block; } .matter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } .matter-chip { position: relative; } .matter-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .matter-chip label { display: flex; align-items: center; gap: 0.8rem; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; cursor: pointer; background: var(--white); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast); font-weight: 600; font-size: var(--fs-300); } .matter-chip label svg { flex: none; color: var(--juniper); transition: color var(--t-fast); } .matter-chip input:hover + label { transform: translateY(-2px); box-shadow: var(--shadow-soft); } .matter-chip input:checked + label { border-color: var(--sierra); background: rgba(53, 72, 90, 0.06); box-shadow: inset 0 0 0 1px var(--sierra); } .matter-chip input:checked + label svg { color: var(--sierra); } .matter-chip input:focus-visible + label { outline: 2px solid var(--sierra); outline-offset: 3px; } .step2-grid { display: grid; gap: 1.2rem; } .field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .step2-grid[hidden] { display: none; } /* ---------- Utility ---------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: start; } .grid-2--center { align-items: center; } .sticky-side { position: sticky; top: 7rem; } .flow > * + * { margin-top: 1.1em; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .tc { text-align: center; } .balance { text-wrap: balance; } .num-tab { font-variant-numeric: tabular-nums; } .eyebrow-gap { margin-bottom: 1.2rem; } .measure { max-width: 46rem; } .center-col { margin-inline: auto; } /* ========================================================================== Interior-page components (carried from July; recoloured) ========================================================================== */ .feature-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.4rem, 5vw, 4.4rem); } .feature-row + .feature-row { border-top: 1px solid var(--line-soft); } .feature-row--flip .feature-row__media { order: 2; } .feature-row__media .img-window { aspect-ratio: 4 / 3; } .feature-row__kicker { margin-bottom: 1rem; } .doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .doc-card { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.4rem 1.5rem; display: grid; gap: 0.5rem; align-content: start; transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med), border-color var(--t-med); } a.doc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: rgba(156,168,143,0.6); } .doc-card h3 { font-size: var(--fs-500); } .doc-card p { font-size: var(--fs-300); color: var(--ink-soft); } .doc-card .folio { margin-bottom: 0.4rem; } a.doc-card { text-decoration: none; } a.doc-card h3 svg { display: inline-block; vertical-align: -0.08em; margin-left: 0.35em; color: var(--sierra); transition: transform var(--t-fast) var(--ease-spring); } a.doc-card:hover h3 svg { transform: translateX(3px); } a.doc-card p:last-child { display: flex; align-items: center; gap: 0.35em; color: var(--sierra); } .steps { display: grid; gap: 0; border-left: 1px solid var(--line); margin-left: 0.6rem; } .step { position: relative; padding: 0 0 2.2rem 2.2rem; } /* a marker on the line, no number: order reads top to bottom (Denver, 2026-09-23) */ .step::before { content: ""; position: absolute; left: -0.4rem; top: 0.42rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--clay); } .step h3 { font-size: var(--fs-500); margin-bottom: 0.4rem; } .step p { color: var(--ink-soft); max-width: 56ch; } .step:last-child { padding-bottom: 0.4rem; } .rail-layout { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .rail { position: sticky; top: 6.5rem; display: grid; gap: 0.15rem; font-size: var(--fs-300); border-left: 1px solid var(--line); } .rail > a { text-decoration: none; color: var(--ink-soft); padding: 0.45rem 0 0.45rem 1.1rem; margin-left: -1px; border-left: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); } .rail > a:hover { color: var(--ink); } .rail > a.is-active { color: var(--sierra); border-color: var(--clay); font-weight: 600; } .rail__cta { margin-top: 1.2rem; padding-left: 1.1rem; display: grid; gap: 0.6rem; } /* The rail's link rules are scoped to its direct links (`.rail > a`), so the two buttons in .rail__cta are plain buttons: full border on all four sides and the button colours. A bare descendant selector used to reach them and zero the ghost button's left border (Denver 2026-09-24). */ .rail__cta .btn { width: 100%; justify-content: center; padding: 0.8em 1em; } .person-row { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: clamp(1.8rem, 4.5vw, 4.5rem); align-items: start; padding-block: clamp(2.4rem, 5vw, 4rem); } .person-row + .person-row { border-top: 1px solid var(--line-soft); } .person-row .img-window--arch { aspect-ratio: 3 / 3.7; position: sticky; top: 6.5rem; } .person-row__creds { display: grid; gap: 0.5rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); font-size: var(--fs-300); color: var(--ink-soft); } .person-row__creds strong { font-family: var(--caps); font-size: var(--fs-100); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sierra); font-weight: 600; } .person-row__fun { font-style: italic; font-family: var(--italic); color: var(--sierra); font-size: var(--fs-500); } .review-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .review-card { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.5rem 1.6rem; display: grid; gap: 0.9rem; align-content: start; break-inside: avoid; } .review-card__stars { color: var(--clay); letter-spacing: 0.18em; font-size: var(--fs-300); } .review-card blockquote { font-size: var(--fs-300); color: var(--charcoal); line-height: 1.6; } .review-card figcaption { font-family: var(--caps); font-size: var(--fs-100); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .article-head { max-width: 46rem; } .article-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.4rem; margin-top: 1.4rem; font-size: var(--fs-200); color: var(--ink-soft); } .article-meta .byline-line { font-size: inherit; } .article-hero { margin-block: clamp(2rem, 5vw, 3.4rem); } .article-hero .img-window { aspect-ratio: 21 / 9; } /* "Reviewed by Jenny McMenomy, Esq." — never an author line. The date is shown only once she has actually reviewed the guide; an empty