/* ========================================================================== 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 > .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); } .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; } .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; padding: 6.5rem var(--gutter) calc(4.4rem + 1.25rem); transform: translateY(-102%); transition: transform 560ms var(--ease-out); visibility: hidden; 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; } .nav-open .mobile-menu { transform: translateY(0); visibility: visible; } .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; justify-content: space-between; gap: 1rem; } .mobile-menu__more { background: none; border: 1px solid var(--line); border-radius: 50%; width: 44px; height: 44px; 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-400); color: var(--ink); padding-bottom: 0.3rem; } .mobile-menu__area li a { font-size: var(--fs-300); color: var(--ink-soft); padding: 0.35rem 0; } .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); } /* ---------- 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 */ .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 */ .line-mask { display: block; overflow: hidden; padding-block: 0.06em; } .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(112%); } } .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); } .awards-band__row { display: grid; grid-template-columns: minmax(12rem, auto) 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 { font-size: var(--fs-600); } .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; } .testimonial-dots button { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--juniper); background: transparent; padding: 0; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast) var(--ease-spring), border-color var(--t-fast); } .testimonial-dots button.is-active { 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-soft); 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); } /* portrait-pending arch: the field in bone on Sierra dusk with the person's initials. Designed to be replaced by the portrait session — never an empty frame, never an AI face. */ .arch-mono { position: relative; display: grid; place-items: center; background: var(--sierra); color: var(--bone); isolation: isolate; } .arch-mono::after { display: none; } .arch-mono span { position: relative; z-index: 1; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: 0.06em; color: var(--bone); } .arch-mono small { position: absolute; bottom: 1rem; left: 0; right: 0; z-index: 1; text-align: center; font-family: var(--caps); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone); opacity: 0.85; } /* ---------- 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: var(--section-sm); } .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; } .footer-col h4 { 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 h4 { 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; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; font-family: var(--caps); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; } /* ---------- 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; } .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; } .prose .table-stack tr { padding: 0.9em 0; border-bottom: 1px solid var(--line-soft); } .prose .table-stack th[scope="row"] { padding: 0 0 0.35em; border: 0; font-family: var(--serif); font-size: var(--fs-400); } .prose .table-stack td { padding: 0.3em 0 0; border: 0; } .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.15em; } } .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-sm); 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-md); 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; } /* `.rail a` sets colour and wins over `.btn`, so the rail's call button was drawing ink-soft text on a sierra fill — about 1.6:1. Pre-existing; fixed here because the practice colourways inherit the same path. */ .rail__cta .btn { width: 100%; justify-content: center; padding: 0.8em 1em; border-left: 0; margin-left: 0; color: var(--btn-fg); } .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-md); 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