/* ========================================================================== Davidov & Cohen Law — dcnyclaw.com Design tokens + component styles ========================================================================== */ :root { /* Surfaces */ --cream: #faf9f6; --white: #fff; --line: #e5e1d8; --line-soft: #d9d5ca; /* Ink */ --ink: #232823; --ink-head: #14211b; --ink-body: #4c534d; --ink-muted: #5a6058; --ink-faint: #8a8f88; /* Green */ --green: #1e5c40; --green-mid: #2e7d54; --green-dark: #15442f; --green-darker: #143f2c; --green-deep: #14211b; --green-light: #9fc7ad; --green-hover: #7fc49d; /* Gold */ --gold: #a8863c; --gold-light: #c9a54c; --gold-bright: #e8c979; --gold-dark: #8a6a1a; --star: #f5b301; /* Gradients */ --grad-green: linear-gradient(135deg, var(--green-mid), var(--green-dark)); --grad-gold: linear-gradient(90deg, var(--gold-light), var(--gold-dark)); /* Type */ --serif: 'Source Serif 4', Georgia, serif; --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Layout */ --wrap: 1200px; --wrap-wide: 1280px; --gutter: clamp(20px, 3.5vw, 48px); --header-h: 83px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--cream); font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; } a { color: var(--green); text-decoration: none; } a:hover { color: var(--green-darker); } img, video { max-width: 100%; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink-head); } section { position: relative; overflow: hidden; } .wrap { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .wrap--wide { max-width: var(--wrap-wide); } /* Once the viewport is wide enough that max-width alone leaves a comfortable margin, drop the gutter so sections get their full content width back. Below these thresholds the gutter is what keeps text off the screen edge. */ @media (min-width: 1296px) { .wrap { padding-left: 0; padding-right: 0; } .wrap--wide { padding-left: var(--gutter); padding-right: var(--gutter); } } @media (min-width: 1376px) { .wrap--wide { padding-left: 0; padding-right: 0; } } /* The 1200px cap was drawn for a ~1280px screen. On anything larger it stops being a max-width and starts being dead margin — 240px a side at 1680px. Let the container grow with the viewport instead, still bounded so it never sprawls on an ultrawide. */ @media (min-width: 1400px) { :root { --wrap: min(1600px, 88vw); --wrap-wide: min(1680px, 92vw); } } /* Set by the inline script in , cleared the moment the hero timeline is built (or by its own failsafe). Hiding these in the stylesheet rather than from deferred JS is what stops the copy painting once before it animates. */ .anim-pending .hero .kicker, .anim-pending .hero h1, .anim-pending .hero-copy p, .anim-pending .hero-actions a, .anim-pending #practice-title, .anim-pending .practice-head p { opacity: 0; } .anim-pending .practice-head .rule { transform: scaleX(0); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Decorative halftone dot field used across sections */ .dots { position: absolute; inset: 0; pointer-events: none; } /* ---------- Shared type ---------- */ .kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .kicker--light { color: var(--gold-light); } .kicker--bright { color: var(--gold-bright); } .kicker--green { color: var(--green); font-size: 13px; letter-spacing: .14em; } .rule { width: 44px; height: 3px; background: var(--grad-gold); } .rule--green { background: var(--grad-green); } .section-title { font-size: clamp(32px, 4vw, 48px); line-height: 1.12; margin: 0 0 16px; text-wrap: balance; } .section-lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-body); margin: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-weight: 600; border-radius: 6px; white-space: nowrap; font-family: inherit; cursor: pointer; border: none; transition: box-shadow .3s ease, background .25s ease, color .25s ease; } .btn--primary { background: var(--grad-green); color: var(--white); box-shadow: 0 3px 12px rgba(30, 92, 64, .3); } .btn--primary:hover { color: var(--white); box-shadow: 0 6px 18px rgba(30, 92, 64, .45); } .btn--solid { background: var(--green-dark); color: var(--white); border-radius: 8px; } .btn--solid:hover { background: var(--green); color: var(--white); } .btn--ghost { border: 1.5px solid var(--green); color: var(--green); background: transparent; } .btn--ghost:hover { background: var(--green); color: var(--white); } .btn--outline { border: 1.5px solid #c9c4b8; color: var(--ink-head); font-weight: 700; } .btn--outline:hover { border-color: var(--green); color: var(--green); } .btn--white { background: var(--white); color: var(--green-dark); font-weight: 700; border-radius: 8px; } .btn--white:hover { background: #f0ede4; color: var(--green-dark); } .btn--lg { font-size: 16px; padding: 16px 32px; } .btn--md { font-size: 15px; padding: 14px 28px; } .btn--sm { font-size: 14.5px; padding: 12px 26px; } .link-arrow { font-weight: 600; font-size: 15px; } /* ========================================================================== Header ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(250, 249, 246, .94); /* Safari did not ship unprefixed backdrop-filter until 18. Without the -webkit- pair the header does not frost on iOS 16/17 — the 94% opaque background keeps it legible either way, but the frost is the intended look and the codebase already pairs them on the figcaption. */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: none; transition: box-shadow .35s ease; } .site-header.is-scrolled { box-shadow: 0 12px 40px rgba(20, 33, 27, .14); } .header-inner { max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: clamp(12px, 1.6vw, 32px); } /* The wordmark carries a fine-serif tagline that turns to mush below ~48px, so the logo gets first claim on the header's width. */ .header-logo { flex: none; } /* Only the preferred and maximum values grow. The 46px floor is load-bearing: the mark is 4.5:1, so every pixel of height costs 4.5 of width, and at 375px the row has about 15px to spare once the phone glyph and the toggle are in. 4.8vw does not pass 46px until ~958px, which is above the point the nav collapses to the toggle, so nothing below desktop changes at all. */ .header-logo img { height: clamp(52px, 4.8vw, 60px); width: auto; display: block; } /* Bare phone glyph — replaces the spelled-out number where space is tight. No chrome, so the box stays only as a 44px touch target. */ .header-call { display: none; flex: none; width: 44px; height: 44px; background: none; border: 0; color: var(--green); align-items: center; justify-content: center; } .header-call:hover { color: var(--green-mid); } .nav { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 24px); flex: 1; justify-content: center; font-size: 14.5px; font-weight: 500; white-space: nowrap; } /* :not(.menu-cta) so this doesn't outrank .btn--white on the menu's CTA */ .nav > a:not(.menu-cta), .nav-trigger { color: var(--ink); } .nav > a:not(.menu-cta):hover, .nav-trigger:hover { color: var(--green); } /* Both live inside the mobile menu only — the desktop bar has its own CTA and already shows the phone number as text */ .menu-cta, .menu-call { display: none; } .header-phone { font-weight: 700; font-size: 15px; color: var(--green-dark); white-space: nowrap; padding: 8px 10px; border-radius: 6px; flex: none; } .header-cta { font-size: 14px; padding: 11px 20px; flex: none; box-shadow: 0 2px 8px rgba(30, 92, 64, .25); } /* Between the mobile breakpoint and full desktop there isn't room for both calls to action — the phone number wins, since it converts directly. */ @media (max-width: 1120px) and (min-width: 901px) { .header-cta { display: none; } } /* Practice-areas mega menu */ .nav-drop { position: relative; } .nav-trigger { display: inline-block; } .mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px rgba(20, 33, 27, .16); padding: 22px 26px; width: 640px; z-index: 60; } .nav-drop:hover .mega, .nav-drop:focus-within .mega, .mega.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .mega-title { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 20px; font-size: 13.5px; } .mega-grid a { color: #3e453f; padding: 5px 0; } .mega-grid a:hover { color: var(--green); } /* Mobile nav toggle */ /* Bare rule lines — the 44px box is only there as a touch target */ .nav-toggle { display: none; flex: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; align-items: center; justify-content: center; color: var(--green); } .nav-toggle:hover { color: var(--green-mid); } .nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; position: relative; } .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } /* ========================================================================== Hero ========================================================================== */ .hero { background: var(--cream); } .hero-media { position: absolute; left: 0; right: 0; top: var(--header-h); bottom: 0; } .hero-media video { width: 100%; height: 100%; object-fit: cover; /* Anchoring to the top wasted 9.8% of the frame on empty facade above their heads while cutting the bottom 35%. Nudging down trades that headroom for more of the attorneys; 22% keeps ~2% clearance above the hair. */ object-position: center 22%; display: block; } .hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(250, 249, 246, .88) 0%, rgba(250, 249, 246, .55) 34%, rgba(250, 249, 246, 0) 52%); } .hero-grid { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; } .hero-copy { padding: 170px 0; } .hero-spacer { min-height: 600px; } /* Taller hero = less of the clip cropped away vertically, so more of the attorneys shows without pushing their heads toward the header. Desktop only: the mobile hero sizes its clip by aspect-ratio and a floor here would just add empty space under the buttons. */ @media (min-width: 901px) { /* align-items on .hero-grid defaults to end, which would dump every pixel of that min-height above the copy — centring splits it instead. */ .hero-grid { min-height: min(84vh, 820px); align-items: center; } .hero-copy { padding: 140px 0; } } .hero h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.12; margin: 0 0 22px; text-wrap: balance; } .hero p { font-size: 18px; line-height: 1.65; color: var(--ink-body); margin: 0 0 34px; max-width: 52ch; } .hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } /* ========================================================================== Practice areas ========================================================================== */ #practice { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } #practice .dots { background: repeating-radial-gradient(circle at 118% -30%, transparent 0 34px, rgba(30, 92, 64, .10) 34px 36px), repeating-radial-gradient(circle at -18% 112%, transparent 0 42px, rgba(30, 92, 64, .08) 42px 44px); -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 44%, transparent 60%, #000 100%); mask-image: linear-gradient(120deg, #000 0%, transparent 44%, transparent 60%, #000 100%); } /* Vertical only — these sit on the same element as .wrap, so using the padding shorthand here would wipe out its horizontal gutter. */ .section-pad { padding-top: 88px; padding-bottom: 96px; } .section-pad--lg { padding-top: 96px; padding-bottom: 92px; } .practice-head { max-width: 640px; margin: 0 auto 40px; text-align: center; } .practice-head .rule { margin: 0 auto 20px; transform: scaleX(0); } /* Alternating video + copy rows */ .pillar { display: grid; align-items: center; gap: 40px; margin: 0 0 64px; } .pillar--media-left { grid-template-columns: 1.45fr 1fr; } .pillar--media-right { grid-template-columns: 1.25fr 1.2fr; } .pillar:first-of-type { margin-top: 8px; } .pillar:last-of-type { margin-bottom: 0; } .pillar video { width: 100%; display: block; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 68% 64% at 50% 52%, #000 55%, transparent 88%); mask-image: radial-gradient(ellipse 68% 64% at 50% 52%, #000 55%, transparent 88%); } /* The white key is baked into practice-crash.mp4 now. It used to be an SVG filter: url(#whitekey), which Safari does not reliably apply to a