/* ========================================================================== Venable Law Group PLLC — stylesheet Fidelitas · Veritas · Integritas ========================================================================== Palette sampled directly from the firm crest: the "VLG" lettering is #003380. Everything keys off that so the site matches the mark instead of competing with it. Gold is the traditional legal counterpoint to navy. ========================================================================== */ :root { --navy: #003380; /* exact brand blue, sampled from the crest */ --navy-dark: #002357; --navy-deep: #001838; --steel: #3f6fa8; --gold: #c8a44d; /* fills / accents on dark or as a button plate */ --gold-ink: #7d6119; /* the ONLY gold for small text on light bg (AA) */ --ink: #16202e; --body: #454f5c; --muted: #6b7686; --paper: #ffffff; --paper-warm: #f4f6fa; --line: #dde2ea; /* legacy aliases so any stray rule still resolves to the new palette */ --forest: #003380; --forest-dark: #002357; --serif: "Georgia", "Iowan Old Style", "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wrap: 1140px; --radius: 3px; --shadow: 0 2px 14px rgba(16, 32, 56, .09); --shadow-lg: 0 10px 40px rgba(16, 32, 56, .14); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Rev 40: 124 -> 180px. The centred masthead stacks motto / crest + name / nav, so the sticky header is taller (~164px) and an in-page anchor landing at the old offset would be parked underneath it. Three files encode this height — see check_header_centred.py, which pins them to each other. */ html { scroll-behavior: smooth; scroll-padding-top: 180px; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.68; color: var(--body); background: var(--paper); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; height: auto; } a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Browsers draw a dotted underline under . Kills the "dots under PLLC" everywhere while keeping the accessible expansion on hover. */ abbr[title] { text-decoration: none; border-bottom: 0; cursor: inherit; } h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); line-height: 1.22; margin: 0 0 .55em; font-weight: 600; } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); } h3 { font-size: 1.32rem; } /* rev 44: inquiry.html and thank-you.html had NO

at all -- they opened at

, which is an accessibility defect (screen readers build the document outline from h1) and a minor SEO one. The tags are now

; this rule pins them to the h2 size so the change is invisible. These two values are a COPY of the h2 rule on the line above -- if you ever retune h2, retune this too or the two pages drift apart. */ #inquiry-heading, #thanks-heading { font-size: clamp(1.75rem, 3.4vw, 2.5rem); } /* rev 44: 'What happens next' moved h3 -> h2 to close an h1->h3 outline skip. It keeps the 1.32rem h3 size so the page looks identical. */ .thanks .thanks-next h2, .thanks h2:not(#thanks-heading) { font-size: 1.32rem; } p { margin: 0 0 1.15em; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .center { text-align: center; } /* ---------- skip link (accessibility) ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy); color: #fff; padding: 12px 20px; } .skip-link:focus { left: 0; } /* ---------- top utility bar ---------- */ .topbar { background: var(--navy-dark); color: #ccd8ea; font-size: .86rem; letter-spacing: .02em; } /* Rev 40: the motto moved out of this bar and up into the masthead, so the strip has ONE child left. space-between with one child pins it hard left against a 1140px column of empty navy, which looks like a rendering fault. Centre it — and it now matches the centred masthead below. */ .topbar .wrap { display: flex; justify-content: center; align-items: center; gap: 16px; min-height: 40px; flex-wrap: wrap; } .topbar a { color: #fff; text-decoration: none; font-weight: 600; } .topbar a:hover { text-decoration: underline; } /* ---------- header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line); } /* Rev 40 — CENTRED MASTHEAD. Nick, 2026-08-23: "the navigation panel is off centre ... can we centre the logo and business name." Rev 35-38 were all attempts to make a SIDE-BY-SIDE header (brand hard left, nav hard right, justify-content: space-between) survive a narrowing viewport. Every one of those bugs — the Home link under the wordmark, the 238px-wordmark-in-188px squeeze, the clipped firm name, the one-word-per- line tower — is a symptom of two rigid boxes competing for ONE row. Stacking them deletes the competition outright. The brand gets the full 1140px on its own row and the nav gets the full 1140px on its own row, so there is no width at which either can squeeze the other. This is the centred layout Nick asked for AND the structural end of the collision saga; the defensive rules below are kept as belt-and-braces, not because any of them can still fire. Cost: a taller sticky header (~148px vs ~112px), paid for by stepping the crest 96 -> 82px here and by the tightened scroll-padding-top above. */ .site-header .wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; /* Rev 40b: gap 6 -> 5 and padding 12/8 -> 8/8. The motto joining the stack added a fourth row; trimming 9px back out keeps the sticky header at ~166px instead of ~175px. */ gap: 5px; min-height: 0; padding-top: 8px; padding-bottom: 8px; /* Rev 38 — last-resort behaviour, and it should never fire. Retained in the column layout only so a future editor cannot "tidy" it away and silently restore a single-row header's failure mode along with it. */ flex-wrap: wrap; } /* Centre the wordmark under nothing in particular — the crest and the text stay side by side as one unit, and it is the UNIT that is centred. */ .site-header .brand { justify-content: center; } .site-header .nav { align-self: center; } /* Rev 40b — the motto, relocated from the topbar to sit OVER the crest. Nick, 2026-08-23: "the Fidelitas · Veritas · Integritas needs to be moved so that its over the logo." Typographic reasoning, since there are now two small gold-ish lines in the lockup and they must not read as a pair of competing taglines: motto -> serif, ITALIC, mixed case, loose-ish tracking (a ribbon) .brand-tag -> sans, UPPERCASE, heavy, wide tracking (a locality) Different family, different case, different weight — so the eye reads them as motto / name / place rather than as three equal lines of small text. nowrap for the same reason .brand-tag has it: the middot is a SEPARATOR, meaningful only between two things on one line. If the motto wrapped, a dot would lead or trail a line and read as a rendering fault. At 480px the line is ~200px, so it fits a 320px phone with room to spare. */ .masthead-motto { font-family: var(--serif); font-style: italic; font-size: .84rem; letter-spacing: .05em; color: var(--gold-ink); white-space: nowrap; line-height: 1.2; } /* Rev 35 — header collision fix. The header .wrap is a flex row (brand | nav). By default BOTH children are allowed to shrink (flex-shrink defaults to 1). As the viewport narrows the nav's box was shrinking below the width of the eight links inside it, and because .nav ul is a nowrap flex row its contents overflowed that box and drifted left — landing the "Home" link underneath the wordmark. Reported from a real browser drag-resize, 2026-08-22. The rule that makes overlap structurally impossible is `.nav { flex: 0 0 auto }` below: the nav is now the rigid item, so ALL of the shortfall is absorbed by the brand, which degrades gracefully (the wordmark wraps). `min-width: 0` on .brand is required because a flex item's default min-width is `auto` — without it the brand refuses to shrink past its content and the squeeze lands back on the nav. The media queries at 1140px / 1000px then keep the brand from ever being squeezed hard enough for that graceful degradation to look bad. */ .brand { display: flex; align-items: center; gap: 18px; text-decoration: none; min-width: 0; } /* Crest is nearly square (779x704). NOTE: the original vlg-logo.svg was a 779x704 canvas with the artwork placed in a 70x63 box - ~9% of the width - so any CSS height drew the mark at about a twelfth of its intended size. We now reference the extracted raster (vlg-logo.png) instead. */ /* Rev 40: 96 -> 82px. The crest now sits on its own row above the nav, so it no longer needs to hold its own against a link row beside it — and 96px twice-stacked made the sticky header ~168px tall, which is a third of a laptop's fold. */ .brand img { height: 82px; width: auto; } .brand-text { display: flex; flex-direction: column; line-height: 1.18; } .brand-name { font-family: var(--serif); font-size: 1.42rem; font-weight: 600; color: var(--ink); letter-spacing: .01em; } /* Rev 37 — controlled wrapping of the wordmark. Rev 35 made the brand the flex item that absorbs ALL header shortfall, and called the resulting wrap "graceful degradation". It was not: four loose words wrapped one per line into a tower. The fix is not to stop the wrap — we still need the brand to shrink — but to control WHERE it happens. Each .bn is a nowrap unit, so the single space BETWEEN them is the only legal break in the whole wordmark. Two possible renderings, both correct: Venable Law Group PLLC | Venable Law | Group PLLC Nick, 2026-08-22, on seeing the tower: he would rather tolerate the old Home-button overlap than this. Noted — but we do not have to trade: the nav stays rigid AND the wordmark now degrades the way it was supposed to. */ .brand-name .bn { white-space: nowrap; } .brand-tag { font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; margin-top: 3px; /* Rev 37 — the locality line is a single typographic unit and must never fragment. When it was allowed to wrap, the middot separator flipped between trailing "Kitsap County" and leading "Washington" as the window moved, which reads as a rendering fault rather than a design. It is a separator: it is only meaningful BETWEEN two things on one line, so if it cannot have one line it should not be broken across two. Held by nowrap here and by   in the markup — either alone would do it; both means a future copy edit cannot silently reintroduce the flop. */ white-space: nowrap; } /* Rev 38 — the clipping wall is GONE. Rev 37 put `overflow: hidden` here as a "safety net" for the case where a nowrap child could not shrink. That was not a safety net, it was a paper bag: Nick reported the header rendering as Venable La / Group PLl / Kitsap County · with the ends of three separate lines sliced off. An invisible wall, in his words. He was right, and the diagnosis is worth keeping: CLIPPING IS NOT A FALLBACK. It converts one visible bug (overlap) into a worse invisible one (silently truncated words), and a truncated firm name on a law firm's masthead is not a graceful degradation of anything. The actual defect was upstream and had been there since rev 35: the brand was allowed to be squeezed at all. We were writing rule after rule to make a squeeze look acceptable instead of removing the squeeze. Rev 38 removes it — see the header breakpoint note further down. The nav now collapses to a menu BEFORE the brand can ever be compressed, so no clip, no overlap, no one-word-per-line tower, and no dead-zone query. Nothing left to hide. */ .nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; cursor: pointer; font-size: 1.15rem; color: var(--ink); line-height: 1; } /* Rev 35: rigid. Never shrink the nav — see the note on .brand above. */ .nav { flex: 0 0 auto; } .nav ul { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; } .nav a { display: block; padding: 9px 13px; text-decoration: none; /* Rev 19: was var(--body) #454f5c at 600, which read as washed out against the white header - the nav is primary navigation on a law firm site and was quieter than the body copy beneath it. var(--ink) #16202e at 700 gives it the weight it should have had. Contrast on white goes from ~8.2:1 to ~15.8:1, so this is an accessibility gain as well. */ color: var(--ink); font-weight: 700; font-size: .93rem; border-radius: var(--radius); transition: color .15s, background .15s; } .nav a:hover, .nav a:focus-visible { color: var(--navy); background: var(--paper-warm); } /* ---------- buttons ---------- */ .btn { display: inline-block; padding: 14px 30px; font-family: var(--sans); font-weight: 700; font-size: .93rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: transform .12s, background .18s, color .18s, box-shadow .18s; } .btn:hover { transform: translateY(-2px); } /* Solid fills only. Ghost/outline buttons over photography were unreadable — every button now carries its own opaque background. */ .btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--shadow); } .btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; } .btn-outline { background: #fff; color: var(--navy); border-color: var(--navy); font-weight: 800; } .btn-outline:hover { background: var(--navy); color: #fff; } /* Used on dark photo backgrounds: solid white plate, navy text. */ .btn-light { background: #fff; color: var(--navy); border-color: #fff; } .btn-light:hover { background: var(--gold); color: #16202e; border-color: var(--gold); } /* Gold CTA — the highest-contrast option against navy. */ .btn-gold { background: var(--gold); color: #16202e; border-color: var(--gold); font-weight: 800; } .btn-gold:hover { background: #dcb85f; border-color: #dcb85f; color: #16202e; } .btn-sm { padding: 11px 22px; font-size: .85rem; } /* ---------- header CTA ---------- Scoped as ".nav .nav-cta" (0,2,0) so it outranks ".nav a" (0,1,1) on colour AND padding. This is the fix for the grey-text-in-an-undersized-box bug: the button previously inherited the nav link styling because every .btn* selector was one class weaker than the nav's descendant selector. Sizing: padding is set in em so the plate grows WITH the text rather than being a fixed box the text has to sit inside -- that was the "text doesn't fill the box" complaint. Gold on navy is the highest-contrast pair in the palette (roughly 8:1) and matches the main CTA band further down the page, so the primary action looks like the same action in both places. */ .nav .nav-cta { display: inline-flex; align-items: center; justify-content: center; padding: .85em 1.6em; margin-left: 8px; background: var(--gold); color: #16202e; border: 2px solid var(--gold); border-radius: var(--radius); font-family: var(--sans); font-weight: 800; font-size: .84rem; line-height: 1; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 10px rgba(16, 32, 56, .16); transition: background .18s, border-color .18s, transform .12s, box-shadow .18s; } .nav .nav-cta:hover, .nav .nav-cta:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ---------- hero ---------- */ .hero { position: relative; color: #fff; background: linear-gradient(rgba(0, 22, 56, .82), rgba(0, 30, 74, .74)), url("../img/hero-hands-negotiation.jpg") center 38% / cover no-repeat; } .hero .wrap { padding-top: 108px; padding-bottom: 108px; max-width: 900px; text-align: center; } .hero h1 { color: #fff; margin-bottom: .35em; } .hero .motto-latin { font-family: var(--serif); font-style: italic; font-size: 1.28rem; color: #bcd2ee; margin-bottom: .15em; } .hero .motto-en { font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; color: #8fabd0; margin-bottom: 2rem; } .hero .lede { font-size: 1.1rem; color: #e6edf7; max-width: 720px; margin: 0 auto 2.2rem; } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- hero practice banners ---------- Two pills, deliberately the SAME size and weight. The page used to open with one estate planning pill, which at a glance said "estate planning firm" and left family law invisible above the fold. Equal treatment is the whole point - estate planning still comes first in reading order, which is where the emphasis belongs, but neither practice is presented as the other one's footnote. Colour note: the gold pill's text is dark ink, not white. Gold-on-white text fails contrast at this size (.72rem, 800 weight, wide tracking is exactly the case where it matters); #16202e on --gold clears AA comfortably. The second pill is a transparent plate with a white rule, so it reads as a peer of the gold one rather than a secondary button. */ .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 1.7rem; } .badge-new { display: inline-block; background: var(--gold); color: #16202e; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 8px 17px; border-radius: 100px; text-decoration: none; line-height: 1.35; } a.badge-new { transition: background .18s, color .18s, border-color .18s; } a.badge-new:hover, a.badge-new:focus-visible { background: #fff; color: var(--navy); } .badge-new.badge-alt { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .72); padding: 6px 15px; } .badge-new.badge-alt:hover, .badge-new.badge-alt:focus-visible { background: #fff; color: var(--navy); border-color: #fff; } /* ---------- scope callout ---------- Used for the military divorce intake boundary. Styled as a bordered inset with a gold rule rather than a warning box: this is a statement of what the firm does, not an apology or a disclaimer, and it should not look like fine print. Set apart enough that it cannot be skimmed past, because its job is to stop the wrong inquiry before it becomes a consult. */ .scope-note { background: var(--paper-warm); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 20px 24px; margin: 26px 0 28px; } .scope-note .scope-head { font-family: var(--serif); font-size: 1.04rem; font-weight: 700; color: var(--ink); margin: 0 0 .55rem; } .scope-note p { font-size: .95rem; margin-bottom: .6rem; } .scope-note ul { list-style: none; margin: 0 0 .5rem; padding: 0; } .scope-note li { position: relative; padding-left: 20px; margin-bottom: .5rem; font-size: .95rem; color: var(--body); line-height: 1.6; } .scope-note li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .scope-note .scope-tail { margin: 0; font-size: .89rem; color: var(--muted); padding-top: .55rem; border-top: 1px solid var(--line); } /* ---------- sections ---------- */ section { padding: 86px 0; } .section-warm { background: var(--paper-warm); } .section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; } .eyebrow { font-size: .76rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .9rem; } .section-head p { color: var(--muted); font-size: 1.06rem; margin-bottom: 0; } /* ---------- split feature rows ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; margin-bottom: 34px; } .split.reverse .split-media { order: 2; } .split-media { min-height: 340px; background-size: cover; background-position: center; } .split-body { padding: 52px 46px; display: flex; flex-direction: column; justify-content: center; } .split-body h3 { font-size: 1.6rem; } .split-body .btn { align-self: flex-start; margin-top: .6rem; } /* ---------- cards ---------- */ /* rev 25: was repeat(3, 1fr). A fourth practice-area card was added, which under a hard 3-column grid left one orphan card alone on a second row. auto-fit lets the row hold 4 at full width (1092px content - 3x26px gaps = 253px per card) and reflow to 3 / 2 / 1 as space runs out, so adding a fifth card later does not require touching this rule again. */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* rev 25: media 210 -> 190 and body padding tightened, because four cards across are ~253px wide rather than three at ~344px. */ .card-media { height: 190px; background-size: cover; background-position: center; } .card-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; } .card-body p { font-size: .94rem; } /* margin-top:auto absorbs the free space ABOVE the button, so the button and any .card-read beneath it sit flush to the card bottom and all cards in the row line their CTAs up regardless of body length. */ .card-body .btn { align-self: flex-start; margin-top: auto; } /* Secondary "read the article" link under a card's primary CTA. Deliberately NOT a second button: two buttons of equal weight makes the visitor choose, and the primary action is still the consult. This is a quieter offer for the reader who wants to understand before they contact anyone. */ .card-read { display: inline-block; margin-top: 14px; font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .01em; color: var(--navy); text-decoration: none; align-self: flex-start; border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; } .card-read:hover { color: var(--navy-dark); border-bottom-color: var(--gold); } /* ---------- link list (collaborative resources) ---------- */ .linklist { list-style: none; margin: 0 0 1.4rem; padding: 0; } .linklist li { border-bottom: 1px solid var(--line); } .linklist li:first-child { border-top: 1px solid var(--line); } .linklist a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 2px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .98rem; transition: color .15s, padding .15s; } .linklist a:hover { color: var(--navy); padding-left: 8px; } /* Downward arrow signals "this downloads" rather than "this navigates". */ .linklist a::after { content: "\2193"; color: var(--gold-ink); font-size: 1.1rem; font-weight: 700; } .linklist-intro { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-ink); } /* Small PDF chip. Uses --gold-ink, not --gold: plain gold on a light background measures 2.37:1 and fails WCAG AA for small text. */ .linklist .dl { margin-left: auto; margin-right: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--gold-ink); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; background: var(--paper-warm); } /* ---------- testimonials ---------- */ .testimonials { background: var(--navy-dark); color: #d3dcea; } .testimonials h2 { color: #fff; } .testimonials .eyebrow { color: #a9c3e4; } /* align-items:start stops a short testimonial from being stretched to match a long one beside it — with 4 quotes of very uneven length, stretching leaves large dead space under the short ones. */ .quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; } .quote { background: rgba(255,255,255,.055); border-left: 3px solid var(--gold); padding: 38px 36px; border-radius: var(--radius); } .quote p { font-family: var(--serif); font-size: 1.04rem; font-style: italic; color: #eaf0f9; } .quote cite { display: block; margin-top: 1.1rem; font-style: normal; font-weight: 700; font-size: .83rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .testimonial-disclaimer { margin-top: 34px; font-size: .86rem; color: #93a4bd; text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; } /* ---------- affiliations ---------- */ .affiliations { display: flex; align-items: center; justify-content: center; gap: 56px; flex-wrap: wrap; } /* Membership badges arrive at wildly different aspect ratios, so constrain width as well as height to stop one from dwarfing the others. These are the FALLBACK caps for any badge without its own rule; each of the three current badges is sized explicitly below. */ .affiliations img { max-height: 88px; max-width: 250px; width: auto; opacity: .78; transition: opacity .18s; } /* ROW BALANCE -- rev 25 (Nick: "the WealthCounsel badge dwarfs the others and the Collaborative Law Practice one is tiny and hard to read"). He was right and the previous comment here was wrong. It reasoned about HEIGHT: all three badges landed at 74-83px tall, so the row looked balanced on that one metric. But visual weight is AREA, and the measured spread was 4.51x. Worse, capping width at 230px squeezed the near-square badge to 105px WIDE, which is why its wordmark was illegible -- the badge was not "small", it was narrow. These caps are DERIVED, not eyeballed, by balance_aff.py: h = sqrt(TARGET / ratio^K) TARGET = 17000px^2, K = 0.75 Strict equal area (K=1) over-corrects and makes the 5:1 wordmark look stubby, so K dampens the aspect term: the wide mark stays the widest, because it genuinely is a wide mark, while the square one comes up to a readable size. Result: area spread 1.38x, row 882px of 1092px available. Do NOT hand-tune these numbers. Change TARGET or K in balance_aff.py and re-run -- it re-derives all three together and asserts the row still fits. Adjusting one by hand is what produced the 4.5x imbalance. Full opacity on the WealthCounsel mark at rest: the other two are dimmed to .78 as a set, but a credential the firm actively trades on should not look faded. */ .affiliations img.aff-wealthcounsel { max-width: 359px; max-height: 71px; opacity: 1; } .affiliations img.aff-collab-wa { max-width: 249px; max-height: 88px; } .affiliations img.aff-collab-practice { max-width: 162px; max-height: 115px; } @media (max-width: 560px) { /* One badge per row on a phone; each may use most of the viewport width, with the height caps keeping the aspect ratios honest. */ .affiliations { gap: 34px; } .affiliations img.aff-wealthcounsel { max-width: 82vw; max-height: 90px; } .affiliations img.aff-collab-wa { max-width: 62vw; max-height: 104px; } .affiliations img.aff-collab-practice { max-width: 44vw; max-height: 132px; } } .affiliations img:hover { opacity: 1; } /* ---------- CTA band ---------- */ .cta-band { background: linear-gradient(rgba(0, 27, 66, .90), rgba(0, 27, 66, .90)), url("../img/law-library-books.jpg") center / cover no-repeat; color: #fff; text-align: center; } .cta-band h2 { color: #fff; } .cta-band p { color: #d2dded; max-width: 640px; margin: 0 auto 2rem; font-size: 1.06rem; } .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: start; } .contact-list { list-style: none; margin: 0; padding: 0; } .contact-list li { display: flex; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); } .contact-list .ico { color: var(--gold-ink); font-size: 1.15rem; line-height: 1.5; flex-shrink: 0; } .contact-list .lbl { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 3px; } .contact-list a { font-weight: 600; text-decoration: none; } .contact-list a:hover { text-decoration: underline; } /* Rev 19: the mailing address is the only contact row that is not a link, so it inherited body grey at normal weight and sat visually below the email and phone - it looked like a footnote to them rather than a third way to reach the firm. Match the anchors' colour and weight exactly. Deliberately NOT an : a PO Box has no useful link target, and a fake link that does nothing on tap is worse than plain text. No hover underline, so nothing invites a click that will not happen. */ .contact-list .addr { color: var(--navy); font-weight: 600; } /* Service areas: two practice areas, presented as equals. Previously estate planning was with the coverage note inline and family law was plain text after a
, which made family law look like a footnote to estate planning instead of a separate offering. Same weight, same structure, same spacing for both; estate planning simply comes first, which is where the emphasis should live. */ .contact-list .area { display: block; margin-top: 9px; } .contact-list .area:first-of-type { margin-top: 2px; } .contact-list .area strong { display: block; color: var(--ink); font-weight: 700; font-size: .97rem; } .contact-list .area em { display: block; color: var(--muted); font-style: normal; font-size: .88rem; margin-top: 1px; } /* Rev 37 — prose inside the contact list. .addr is navy/600 because a postal address is a short scannable block that wants to stand out. Reusing it for a paragraph was the actual reason the "How We Meet" item read as heavy — not the word count alone. Prose gets normal weight and body colour, so the runs inside it ("Port Orchard, Washington", "virtually over Microsoft Teams") can do the emphasising. When everything is bold, nothing is. */ .contact-list .meet { display: block; color: var(--body); font-weight: 400; line-height: 1.6; } .contact-list .meet strong { color: var(--navy); font-weight: 600; } /* Rev 37 — the AI-notes disclosure. Deliberately quieter than the copy above it: this is a courtesy notice, not a selling point, and Nick asked for it "in smaller text". .87rem matches the sitewide disclaimer and .intake-note, so it is a size the site already uses rather than a new one — but it is still comfortably above the 14px floor, because fine print a client cannot read is not a disclosure. */ .contact-list .fineprint { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .87rem; line-height: 1.55; color: var(--muted); font-weight: 400; } .intake-panel { background: var(--paper-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 42px 40px; } .intake-panel h3 { margin-bottom: .4em; } .intake-panel .btn { display: block; width: 100%; text-align: center; margin-bottom: 12px; } .intake-note { font-size: .87rem; color: var(--muted); margin: 18px 0 0; } /* ---------- disclaimer ---------- */ .disclaimer { background: var(--paper-warm); border-top: 1px solid var(--line); padding: 42px 0; font-size: .87rem; color: var(--muted); } .disclaimer strong { color: var(--body); } .disclaimer p { margin-bottom: .9em; } .disclaimer p:last-child { margin-bottom: 0; } /* ---------- footer ---------- */ /* rev 25: padding trimmed 62/30 -> 44/26 and the grid's bottom margin 42 -> 32, on top of the ~104px saved by putting the crest BESIDE the firm details instead of above them. Net footer height is down roughly 135px. */ .site-footer { background: var(--navy-dark); color: #b4c0d2; padding: 44px 0 26px; font-size: .93rem; } /* rev 29: was `1.9fr 1fr 1fr` with a 40px gap. `fr` units are greedy -- they stretch every column to fill the 1140px wrap whether the content needs it or not, which spread 252px of dead space through the row. The worst offender was the Firm column: allocated 272px to hold 93px of links, so 179px of nothing sat at the right edge and the footer read as thin and spread out. Sizing to content (`auto`) and centring the group closes it. Widths measured by footer_columns.py -- re-run it before touching these. */ .footer-grid { display: grid; grid-template-columns: auto auto auto; justify-content: center; gap: 56px; max-width: 940px; margin: 0 auto 32px; } .site-footer h2 { color: #fff; font-family: var(--sans); font-size: .76rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.1em; } .site-footer a { color: #d8e2f0; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 10px; } /* Footer crest uses a purpose-built variant (vlg-logo-light.png) generated from the full-colour vlg-logo.png by apply_footer_logo.py. Do NOT apply a CSS invert() filter here -- that turns the whole mark into a white rectangle, because the source PNG has an opaque white background. Height reduced from 150px: at that size it was ~10x the footer text and read as the loudest element on the page rather than a sign-off. rev 19 (Nick, 2026-08-22): the flat solid-white silhouette used since rev 12 read as "white washed". Now two-tone -- VLG letters #5589d0, courthouse structure #c9d2e0. The letters are the DARKEST blue that still separates from the --navy-dark #002357 footer ground (4.3:1); a literally dark blue measures 1.3-1.8:1 there and disappears. Opacity raised .95 -> 1 so the two tones are not muddied back together. rev 25 (Nick): moved beside the contact block rather than above it, and given the Latin motto underneath, so crest + motto read as one mark. SIZING NOTE: the motto is the WIDER of the two elements even at .58rem (~160px vs the crest's ~86px), so the motto -- not the logo -- sets the column width. The crest is centred over it. Height is tuned so the whole mark (78 + 6 + ~12 = ~96px) sits close to the four contact lines (~110px), which is what makes the pairing look proportional rather than like a logo with a caption. Change one, re-check the other. */ /* rev 28 (Nick): top-aligned, not centre-aligned, so the top of the crest sits on the same line as the "Practice Areas" / "Firm" headings across the row. Centring made the mark float against its neighbours. */ .footer-identity { display: flex; align-items: flex-start; gap: 20px; } .footer-mark { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; } .footer-logo { height: 78px; width: auto; display: block; margin: 0; } /* rev 28 (Nick): the motto was 2.42x the crest's width and was blowing the column out. Derived in footer_motto_size.py, not eyeballed. It CANNOT be fixed by type size alone: 31 characters on one line only reach ~1.25x the crest at about a 6px font, which is unreadable. So the fix is line COUNT, not just size -- wrapping to two lines cuts the widest run from 31 chars to 19 and lands at 1.19x with the type still legible. The crest stays at 78px because Nick liked its size and placement. The
in the markup is load-bearing: remove it and the motto goes back to being the widest thing in the footer. */ .footer-motto { font-family: var(--sans); font-size: .52rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; color: #8fa0ba; line-height: 1.45; text-align: center; } /* rev 28 (Nick): the firm name/address/phone/email "just looked shit out there" -- it was body-weight #b4c0d2, the faintest text in the footer, despite being the firm's actual identification. Now bolder and brighter, but deliberately NOT the h2 treatment: 600 vs 800, and #cfd9e8 vs #fff, so it reads as pronounced without competing with the column headings. RPC note: this block is the firm-identification line, so if it is ever restyled it must stay legible, not decorative. */ .footer-contact { margin: 0; font-weight: 600; color: #cfd9e8; } .footer-contact a { color: inherit; } .footer-contact a:hover { color: #fff; } /* Shares the 940px inner width with .footer-grid so the hairline rule lines up with the centred group above it. Leave these two the same number -- if the rule spans the full wrap the footer reads as left-aligned again. */ .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: #8b98ad; max-width: 940px; margin: 0 auto; } /* ---------- responsive ---------- */ @media (max-width: 940px) { .cards, .quote-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; } /* Once the columns stack, the desktop centring works against us: `auto` columns would shrink-wrap each block and `justify-content:center` would centre-align the stack. Return to a full-width single column so the stacked blocks stay flush-left and readable. */ .footer-grid { justify-content: stretch; max-width: none; gap: 32px; } .split { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } .split-media { min-height: 250px; } .split-body { padding: 40px 30px; } } /* ---------- rev 35: header squeeze, stage 1 ---------- Between 1000px and 1140px the eight-item nav and the wordmark are close to touching. Rather than collapse to a hamburger this early — which would cost desktop users their visible navigation — tighten the nav's own spacing. This recovers roughly 80-100px of row width: 7 links x ~8px of horizontal padding, plus the inter-item gap, plus a small type step-down. The links stay legible (.87rem is still above our 14px floor) and the CTA plate keeps its shape. Below 1000px stage 2 takes over and the nav becomes a menu. */ /* Rev 38: raised 1140 -> 1240 and reduced to nav rules only. This band now sits entirely ABOVE the menu breakpoint, so its job is simply to buy the nav row some slack in the last stretch before it collapses. The brand size steps moved down into the menu block, where they belong. */ @media (max-width: 1240px) { .nav a { padding: 9px 9px; font-size: .87rem; } .nav ul { gap: 2px; } .nav .nav-cta { padding: .8em 1.15em; margin-left: 4px; font-size: .8rem; letter-spacing: .05em; } } /* ---------- rev 38: ONE header breakpoint, and it is generous ---------- History, because this is the fourth attempt and the pattern matters: rev 35 moved the menu threshold 780 -> 1000 to stop the Home link landing under the wordmark. rev 37 found that between 1001 and 1190 the brand still had only ~188px for a wordmark whose tagline needed ~237px, and hid the tagline in that band. rev 37 also added overflow:hidden, which clipped the FIRM NAME. Three revs of rules describing how a squeeze should look. The squeeze itself was never the requirement — it was an accident of geometry that we kept decorating. Rev 38 deletes the geometry instead. THE ARITHMETIC, at the moment the desktop nav still exists (1181px): header inner width 1181 - 48 padding = 1133px brand 96 crest + 18 gap + 250 wordmark = 364px nav eight items, tightened by the 1240px block = ~600px wrap gap = 20px total = ~984px ~149px of headroom, and it only improves as the viewport grows, because .wrap caps at 1140px while the nav stops changing. At the top of the range (>=1240px, nav untightened, ~709px) it is 1093 of 1140 — still 47px clear. The brand is therefore NEVER compressed while the nav is visible, which is the whole point: no clip, no overlap, no tower. Below 1181px the nav becomes a menu button (~46px) and the brand is left roughly 1066px to use. There is no width at which the header is tight. Cost of the fix: laptops between 1000 and 1180px now see the menu button instead of the link row. That is a real cost and it is worth it — those users get a header that is correct rather than a link row that is one font-metric away from slicing the firm's name in half. */ @media (max-width: 1180px) { /* Rev 40 — the centred masthead changes where this button belongs. In a column layout an in-flow toggle lands centred on a third row, which reads as a stray button rather than a menu control. Pin it to the right edge instead, vertically centred on the brand row: the brand stays optically centred in the full header width, and the hamburger sits where every user expects it. It is positioned against .site-header (position: sticky IS a positioned ancestor), NOT against .wrap — .wrap must stay static so the .nav dropdown below keeps spanning the full viewport width instead of being inset to the 1140px column. */ .nav-toggle { display: block; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); } /* Below the menu breakpoint the nav is a dropdown, so the header loses its link row (~44px). Pull the anchor offset in with it. */ html { scroll-padding-top: 130px; } /* Brand size step. Below the menu breakpoint the brand has room to spare, so this is purely about the crest not looming over a narrower page. */ .brand img { height: 78px; } .brand { gap: 14px; } .brand-name { font-size: 1.3rem; } .nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none; } .nav.open { display: block; } .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 20px; } .nav a { padding: 14px 8px; font-size: .93rem; border-bottom: 1px solid var(--line); border-radius: 0; } /* In the stacked mobile menu the CTA should be a full-width plate, not a pill floating in a list row. */ .nav .nav-cta { display: flex; width: 100%; margin: 12px 0 4px; padding: 1em 1.2em; border-radius: var(--radius); } } @media (max-width: 780px) { /* Rev 40: `.topbar .motto { display: none }` was deleted here — the motto no longer lives in the topbar, so the rule was targeting nothing. It was hidden on small screens because it competed with the contact block for one row; in the masthead it has a row of its own and stays visible. */ section { padding: 62px 0; } .hero .wrap { padding-top: 76px; padding-bottom: 76px; } /* Stack the two practice pills on narrow screens so neither is truncated and neither ends up visually subordinate to the other. */ .hero-badges { flex-direction: column; align-items: stretch; } .badge-new { text-align: center; letter-spacing: .08em; } .scope-note { padding: 17px 18px; } /* Scale the crest back on small screens so it doesn't crowd the hamburger. Rev 40: min-height dropped — the column header is sized by its padding and content now, and a floor here would only add dead space. */ .brand img { height: 66px; } .brand { gap: 12px; } .brand-name { font-size: 1.1rem; } .brand-tag { font-size: .64rem; letter-spacing: .13em; } .footer-logo { height: 66px; } /* Below 560px the crest + motto (~103px since rev 28) and the contact block (the email alone is ~285px) cannot sit side by side on a 360px phone. Stack and centre, rather than let the email overflow. This deliberately overrides the flex-start alignment used on desktop. */ .footer-identity { flex-direction: column; align-items: center; text-align: center; gap: 14px; } .footer-contact { word-break: break-word; } html { scroll-padding-top: 118px; } } @media (max-width: 480px) { /* Below this width the wordmark and the crest fight for space — keep the crest, drop the "Kitsap County · Washington" line. */ .brand-tag { display: none; } /* Rev 40: step the motto down with the crest. It is nowrap by design, so on a 320px phone it has to fit in ~272px of usable width — at .74rem the line measures ~178px. */ .masthead-motto { font-size: .74rem; letter-spacing: .03em; } .brand img { height: 56px; } .brand-name { font-size: 1rem; } } /* ---------- print ---------- */ @media print { .site-header, .topbar, .hero-actions, .cta-band, .nav-toggle { display: none; } body { color: #000; font-size: 12pt; } } /* ---------- motion preference ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .btn:hover, .card:hover { transform: none; } } /* ---------- build stamp (REMOVE BEFORE PRODUCTION LAUNCH) ---------- Temporary version marker in the footer so a stale download is immediately identifiable during design iteration. */ .build-stamp { display: inline-block; margin-left: 10px; padding: 2px 8px; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; } /* ---------- estate planning checklist ---------- */ .checklist { list-style: none; margin: 0 0 1.5rem; padding: 0; } .checklist li { position: relative; padding: 8px 0 8px 30px; color: var(--body); font-size: .97rem; line-height: 1.5; } /* Navy checkmark rather than a bullet — reads as "we handle this", which suits a services list better than a plain list marker. */ .checklist li::before { content: "\2713"; position: absolute; left: 0; top: 7px; color: var(--navy); font-weight: 700; font-size: 1.05rem; } /* ---------- attorney credentials timeline ---------- A dated list rather than prose. Credentials read as verifiable record when they carry a year and sit in a fixed column; the same facts buried in a paragraph read as self-description. The year column is gold-ink (the only gold that passes AA on light backgrounds) so the eye can scan the dates without the text losing contrast. */ .lede-sm { font-family: var(--serif); font-size: 1.02rem; font-style: italic; color: var(--gold-ink); margin: -.4rem 0 1.1rem; } .creds { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; } .creds li { display: flex; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); } .creds li:first-child { border-top: 1px solid var(--line); } .creds-yr { flex: 0 0 52px; font-family: var(--serif); font-weight: 700; font-size: .95rem; color: var(--gold-ink); letter-spacing: .02em; } .creds-txt { color: var(--body); font-size: .95rem; line-height: 1.5; } .creds-txt em { color: var(--muted); font-style: italic; } @media (max-width: 560px) { /* Stack rather than shrink the year column - a wrapped two-line entry beside a 52px gutter looks broken on a phone. */ .creds li { flex-direction: column; gap: 2px; } .creds-yr { flex: none; } } /* ================================================================ REV 14 -- INSIGHTS ---------- insights ---------- Article + article-index styling. Appended; overrides nothing. ================================================================ */ /* current page marker in the nav */ .nav a.is-current{ color:var(--navy); font-weight:600; box-shadow:inset 0 -2px 0 var(--gold); } /* generic interpunct separator used in meta lines */ .dot{ color:var(--line); padding:0 .15rem; } /* ---------- breadcrumbs ---------- */ .crumbs{ font-size:.78rem; letter-spacing:.02em; color:var(--muted); margin-bottom:1.35rem; } .crumbs a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; } .crumbs a:hover{ color:var(--navy); border-bottom-color:var(--gold); } .crumbs span[aria-hidden]{ padding:0 .4rem; color:var(--line); } .crumbs [aria-current]{ color:var(--body); } /* ---------- page hero (insights index) ---------- */ .page-hero{ background:var(--navy-dark); color:#fff; padding:2.6rem 0 3.2rem; } .page-hero .crumbs, .page-hero .crumbs a, .page-hero .crumbs [aria-current]{ color:rgba(255,255,255,.62); } .page-hero .crumbs a:hover{ color:#fff; } .page-hero h1{ font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.1rem,4.6vw,3.1rem); line-height:1.12; color:#fff; margin:.75rem 0 .9rem; } .page-hero .lede{ color:rgba(255,255,255,.85); max-width:62ch; font-size:1.03rem; line-height:1.75; } /* ---------- article hero ---------- */ .article-hero{ background:var(--paper-warm); border-bottom:1px solid var(--line); padding:2.4rem 0 2.6rem; } .article-cat{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); /* only gold that clears AA at this size */ border-left:3px solid var(--gold); padding-left:.6rem; } .article-hero h1{ font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.95rem,4.3vw,2.95rem); line-height:1.14; color:var(--ink); margin:.8rem 0 0; max-width:22ch; } .article-deck{ font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.05rem,2vw,1.28rem); line-height:1.6; color:var(--body); max-width:58ch; margin:1rem 0 1.4rem; } .article-meta{ font-size:.83rem; color:var(--muted); padding-top:1.05rem; border-top:1px solid var(--line); margin:0; } .article-meta a{ color:var(--navy); text-decoration:none; border-bottom:1px solid var(--gold); } .article-meta a:hover{ color:var(--navy-deep); } /* ---------- article layout ---------- */ .article-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:3.4rem; align-items:start; padding-top:3rem; padding-bottom:3.4rem; } /* Measure is capped at 68ch. Long-form legal prose at full container width is unreadable -- the eye loses the line on the return sweep. */ .article-body{ max-width:68ch; } .article-figure{ margin:0 0 2.2rem; } .article-figure img{ width:100%; height:auto; display:block; border-radius:var(--radius); border:1px solid var(--line); } .article-body h2{ font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.4rem,2.6vw,1.78rem); line-height:1.25; color:var(--navy-deep); margin:2.6rem 0 .85rem; padding-top:1.5rem; border-top:1px solid var(--line); } .article-body h2:first-of-type{ border-top:0; padding-top:0; margin-top:0; } .article-body h3{ font-size:1.06rem; font-weight:700; color:var(--ink); margin:1.9rem 0 .5rem; letter-spacing:.005em; } .article-body p{ font-size:1.02rem; line-height:1.78; color:var(--body); margin:0 0 1.15rem; } .article-body strong{ color:var(--ink); } .article-body em{ font-style:italic; } .article-body a{ color:var(--navy); border-bottom:1px solid var(--gold); text-decoration:none; } .article-body a:hover{ color:var(--navy-deep); background:rgba(200,164,77,.12); } .article-body .checklist{ margin:0 0 1.35rem; } .article-body .checklist li{ font-size:1.01rem; line-height:1.7; color:var(--body); margin-bottom:.55rem; } /* ---------- table of contents ---------- */ .toc{ background:var(--paper-warm); border:1px solid var(--line); border-left:3px solid var(--navy); border-radius:var(--radius); padding:1.15rem 1.4rem 1.25rem; margin:0 0 2.4rem; } .toc-head{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); margin:0 0 .6rem; } .toc ol{ margin:0; padding-left:1.15rem; } .toc li{ font-size:.93rem; line-height:1.55; margin-bottom:.34rem; color:var(--body); } .toc a{ color:var(--body); text-decoration:none; border-bottom:1px solid transparent; } .toc a:hover{ color:var(--navy); border-bottom-color:var(--gold); } /* Anchored headings must not hide under the sticky header when the TOC jumps to them. */ .article-body h2[id]{ scroll-margin-top:96px; } /* ---------- callout ---------- */ .callout{ background:#fffdf6; border:1px solid rgba(200,164,77,.5); border-left:4px solid var(--gold); border-radius:var(--radius); padding:1.25rem 1.5rem .4rem; margin:1.9rem 0 2.1rem; } .callout-head{ font-family:Georgia,'Times New Roman',serif; font-size:1.06rem !important; font-weight:700; color:var(--navy-deep) !important; margin-bottom:.55rem !important; } .callout p{ font-size:.97rem !important; } /* ---------- article table ---------- */ .table-scroll{ overflow-x:auto; margin:1.5rem 0 2rem; } /* Secondary line inside a table cell -- used in the Egelhoff division-order table to carry example plan names (401(k), FERS, TSP...) under the sector name without competing with it. Added rev 20 for Darcy's review. */ .muted-cell{ color:var(--muted); font-size:.88em; } .article-table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:520px; border:1px solid var(--line); } .article-table th{ background:var(--navy); color:#fff; text-align:left; font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.75rem .9rem; vertical-align:bottom; } .article-table td{ padding:.8rem .9rem; border-top:1px solid var(--line); color:var(--body); line-height:1.55; vertical-align:top; } .article-table tbody tr:nth-child(even){ background:var(--paper-warm); } .article-table strong{ color:var(--navy-deep); } /* ---------- article closing blocks ---------- */ .article-cta{ background:var(--navy-dark); border-radius:var(--radius); padding:2rem 2.1rem; margin:3rem 0 1.8rem; } .article-cta h2{ border:0; padding:0; margin:0 0 .7rem; color:#fff; font-size:1.42rem; } .article-cta p{ color:rgba(255,255,255,.85); font-size:.98rem; margin-bottom:1.35rem; } .article-cta .cta-actions{ display:flex; flex-wrap:wrap; gap:.7rem; } .article-disclaimer{ border-top:1px solid var(--line); padding-top:1.3rem; margin-top:2rem; } .article-disclaimer p{ font-size:.8rem !important; line-height:1.65; color:var(--muted); margin-bottom:.7rem; } /* Jurisdiction disclosure under the article disclaimer. */ .article-disclaimer .jurisdiction-line{ font-size:.72rem !important; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0; } /* ---------- article sidebar ---------- */ .article-aside{ position:sticky; top:92px; } .aside-card{ background:var(--paper-warm); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:var(--radius); padding:1.3rem 1.35rem; margin-bottom:1.2rem; } .aside-card.aside-quiet{ border-top-color:var(--navy); } .aside-head{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); margin:0 0 .6rem; } .aside-card p{ font-size:.9rem; line-height:1.6; color:var(--body); margin:0 0 .95rem; } .aside-note{ font-size:.76rem !important; color:var(--muted); margin:.9rem 0 0 !important; } .btn-block{ display:block; width:100%; text-align:center; } /* ---------- insights index grid ---------- */ .insight-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.9rem; margin-bottom:3rem; } .insight-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .18s ease, transform .18s ease; } .insight-card:hover{ box-shadow:0 10px 28px rgba(0,24,56,.11); transform:translateY(-2px); } .insight-media{ display:block; aspect-ratio:3/2; overflow:hidden; background:var(--paper-warm); } .insight-media img{ width:100%; height:100%; object-fit:cover; display:block; } .insight-body{ padding:1.25rem 1.35rem 1.4rem; display:flex; flex-direction:column; flex:1; } .insight-cat{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:.5rem; } .insight-body h3{ font-family:Georgia,'Times New Roman',serif; font-size:1.24rem; line-height:1.3; margin:0 0 .6rem; } .insight-body h3 a{ color:var(--navy-deep); text-decoration:none; } .insight-body h3 a:hover{ color:var(--navy); text-decoration:underline; text-decoration-color:var(--gold); } .insight-body p{ font-size:.93rem; line-height:1.65; color:var(--body); margin:0 0 1rem; } .insight-meta{ font-size:.76rem !important; color:var(--muted); margin:auto 0 0 !important; padding-top:.85rem; border-top:1px solid var(--line); } /* ---------- editorial queue ---------- */ .planned{ background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.7rem 1.6rem; margin-bottom:.5rem; } .planned-head{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); margin:0 0 .9rem; } .planned ul{ list-style:none; margin:0 0 1.1rem; padding:0; } .planned li{ font-size:.94rem; line-height:1.5; color:var(--body); padding:.5rem 0; border-top:1px solid var(--line); } .planned li:first-child{ border-top:0; } .plan-cat{ display:inline-block; min-width:9.6rem; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink); } .planned-note{ font-size:.82rem; color:var(--muted); margin:0; } .planned-note a{ color:var(--navy); border-bottom:1px solid var(--gold); text-decoration:none; } /* ---------- responsive ---------- */ @media (max-width:900px){ .article-wrap{ grid-template-columns:1fr; gap:2.2rem; } .article-aside{ position:static; } .article-body{ max-width:none; } } @media (max-width:640px){ .article-hero h1{ max-width:none; } .article-cta{ padding:1.5rem 1.35rem; } .article-cta .cta-actions .btn{ width:100%; text-align:center; } .plan-cat{ display:block; min-width:0; margin-bottom:.15rem; } .insight-grid{ grid-template-columns:1fr; gap:1.5rem; } .toc{ padding:1rem 1.1rem 1.1rem; } } /* ---------- rev 16: related reading + steps ---------- */ .related{ margin:3rem 0 0; padding:1.5rem 1.6rem; background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--radius); } .related-head{ margin:0 0 .9rem; font-family:Georgia,'Times New Roman',serif; font-size:1.02rem; color:var(--navy); font-weight:700; letter-spacing:.01em; } .related ul{ list-style:none; margin:0; padding:0; } .related li{ padding:.7rem 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem; } .related li:first-child{ border-top:0; padding-top:0; } .rel-cat{ flex:0 0 auto; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--gold-ink); /* only gold that clears AA on light */ background:#fff; border:1px solid var(--line); border-radius:2px; padding:.18rem .45rem; } .related a{ flex:1 1 16rem; font-family:Georgia,'Times New Roman',serif; font-size:1.04rem; line-height:1.35; color:var(--navy); text-decoration:none; border-bottom:1px solid transparent; } .related a:hover, .related a:focus{ border-bottom-color:var(--steel); } .rel-meta{ flex:0 0 auto; font-size:.8rem; color:var(--muted); white-space:nowrap; } /* Numbered action list. Counter-driven rather than native ol markers so the number can sit in the navy disc without depending on ::marker support. */ .steps{ list-style:none; counter-reset:step; margin:1.4rem 0 1.6rem; padding:0; } .steps > li{ counter-increment:step; position:relative; padding:0 0 1.05rem 2.9rem; line-height:1.62; } .steps > li::before{ content:counter(step); position:absolute; left:0; top:.08em; width:1.85rem; height:1.85rem; border-radius:50%; background:var(--navy); color:#fff; font-family:Georgia,'Times New Roman',serif; font-size:.92rem; font-weight:700; display:flex; align-items:center; justify-content:center; } .steps > li:last-child{ padding-bottom:0; } @media (max-width:640px){ .related{ padding:1.15rem 1.1rem; } .related li{ gap:.4rem; } .rel-meta{ flex:1 0 100%; } .steps > li{ padding-left:2.5rem; } } /* =================================================================== FAQ (rev 24) Answer engines extract the RENDERED text, not just the JSON-LD, so these questions are real on-page content -- and they are also the part of the page an anxious reader scans first.
gives us keyboard accessibility and native find-in-page for free. NOTE: open by default would be better for crawling, but a wall of open answers buries the CTA; search engines read closed
content fine, so closed is the right trade. =================================================================== */ .article-faq{ margin:2.6rem 0 0; padding:1.6rem 1.5rem .4rem; background:var(--paper-warm); border:1px solid var(--line); border-radius:10px; } .article-faq > h2{ margin:0 0 1rem; font-size:1.32rem; color:var(--navy-dark); } .faq-item{ border-bottom:1px solid var(--line); padding:.15rem 0; } .faq-item:last-of-type{ border-bottom:0; } .faq-item > summary{ cursor:pointer; list-style:none; padding:.85rem 2rem .85rem 0; position:relative; font-weight:650; color:var(--navy-dark); line-height:1.45; } .faq-item > summary::-webkit-details-marker{ display:none; } .faq-item > summary::after{ content:"+"; position:absolute; right:.25rem; top:.7rem; font-size:1.35rem; font-weight:400; color:var(--gold); transition:transform .18s ease; } .faq-item[open] > summary::after{ content:"\2013"; } .faq-item > summary:hover{ color:var(--navy); } .faq-item > summary:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:4px; } .faq-answer{ padding:0 0 1rem; } .faq-answer p{ margin:0; color:var(--body); font-size:.97rem; line-height:1.7; } @media (max-width:640px){ .article-faq{ padding:1.2rem 1.05rem .3rem; } .faq-item > summary{ font-size:.98rem; } } /* ================================================================ REV 36 -- INQUIRY FORM ---------------------------------------------------------------- The site had ZERO form styling before this block: a word-boundary grep of this file for input|textarea|select|label|fieldset|legend returned nothing. Every rule here is new, and without it the form renders as raw browser defaults -- 13px Times inputs that would look nothing like the rest of the page. Seeded from the starter rules delivered with the form, then reworked: the delivered version carried its own --navy:#1e3a5f, which is NOT our navy (#003380). Copying it verbatim would have recoloured the page. Tokens are referenced WITHOUT fallbacks here on purpose -- this file defines them all at :root, so a fallback would only hide a typo. ================================================================ */ /* Narrower measure for the form. Long single-column forms read badly at the full 1140px wrap: the eye loses the label-to-field pairing across that much white space. */ .wrap-narrow{ max-width:720px; } /* Tinted band so the form reads as a distinct destination, not just more page. Matches the paper-warm treatment used elsewhere. */ .inquiry{ background:var(--paper-warm); } .inquiry-lede{ color:var(--body); font-size:1.02rem; line-height:1.6; margin:-.6rem 0 1.9rem; max-width:60ch; } /* Honeypot. Deliberately NOT display:none -- some bots skip fields that are display:none, which defeats the whole trap. Offscreen keeps it fillable-by-bot and invisible-to-human. */ .inquiry-form .hp{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; } .inquiry-form fieldset{ border:0; padding:0; margin:0 0 1.9rem; } .inquiry-form legend{ font-family:var(--serif); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; /* gold-ink is the ONLY gold that clears WCAG AA on light ground. Plain --gold here would be a contrast failure, not a style choice. */ color:var(--gold-ink); margin-bottom:.85rem; padding:0; } .inquiry-form .field{ margin-bottom:1.15rem; min-width:0; } /* Two-up rows. min-width:0 on .field above is load-bearing: a grid item defaults to min-width:auto, so a long option label in a