/* ═══════════════════════════════════════════════════════════════════════ css/service.css — SERVICE DETAIL · v2 Namespace .fw-svc-* · loaded only by /service.php Design tokens come from css/common.css; everything page-local is scoped under .fw-svc-page so nothing can leak sideways. THE FIVE DECISIONS EVERYTHING ELSE FOLLOWS ────────────────────────────────────────── 1. FULL BLEED. There is no max-width container in this file. Every section is width:100% on a 28px desktop / 14px mobile gutter — the same rail .fw-hdr and .fw-nav already sit on, so the page lines up with the chrome above it at any window size. 2. MEASURE, NOT WIDTH. Body copy is held to ~72 characters by the TEXT element, never by the section. Tables, timelines, charts and callouts break out to the full column. That contrast — measured prose beside full-width exhibits — is what reads as editorial rather than stretched. 3. DEPTH BY LAYERING. Four elevation steps and a hairline ring instead of borders. Real backdrop-filter glass, but only over imagery where there is something behind it worth blurring. 4. COLOUR IS RATIONED. Pink is the accent and appears about six times on the whole page. Blue carries links, mint means verified, and the premium moments are deep ink with a soft brand bloom behind them. No pink→purple gradients anywhere — that pairing is the fastest way to make a page look machine-generated. 5. ONE TYPEFACE. Outfit — the brand face, the same font the homepage sets every heading in. Display sizes get weight 600 and hard negative tracking rather than a second family. A serif in the headings makes the page read as a different template bolted onto the site. There is no serif anywhere in this file or in css/prose.css. SECTIONS ──────── 00 Tokens 01 Primitives — eyebrow, buttons, links, breadcrumb 02 Reading progress 03 §1 Masthead — copy, feature plate, vitals 04 §2 Article grid 05 Contents index 06 The article column 07 FAQ · end matter 08 Companion rail 09 §3 Closing band 10 Reveal-on-scroll 11 Responsive mode switches ═══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS ══════════════════════════════════════════════════════════════ */ .fw-svc-page{ /* The gutter. 28px on large screens, 14px on mobile (see §14). A single value, because every section must sit on the same rail as the header — that alignment is most of what "premium" means here. */ --pad:28px; /* Height of the sticky chrome. custom/js/article.js measures the real thing and overwrites this; the literal is only the pre-JS fallback. */ --article-top:116px; /* Ink. --ink is deeper than common.css's --dk, reserved for the two premium dark surfaces (consult card, closing band). */ --ink:var(--dk-d); --paper:var(--wh); --paper-2:var(--paper); /* Hairlines, never borders */ --line:color-mix(in srgb, var(--dk) 9%, transparent); --line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent); --ring:0 0 0 1px var(--ink-a06); /* Elevation — four steps. Each is two shadows: a tight contact shadow plus a wide soft one, which is what stops a card looking like a box with a drop-shadow filter on it. */ --e1:0 1px 2px color-mix(in srgb, var(--dk) 4%, transparent); --e2:0 2px 4px -1px color-mix(in srgb, var(--dk) 4%, transparent), 0 8px 16px -6px color-mix(in srgb, var(--dk) 7%, transparent); --e3:0 4px 8px -3px color-mix(in srgb, var(--dk) 5%, transparent), 0 18px 36px -12px color-mix(in srgb, var(--dk) 10%, transparent); --e4:0 8px 18px -8px color-mix(in srgb, var(--dk) 7%, transparent), 0 44px 88px -24px color-mix(in srgb, var(--dk) 20%, transparent); /* Space — one 8px-derived scale used everywhere. Consistent gaps are the difference between "designed" and "assembled". */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; /* Rhythm between major sections */ --sec:clamp(40px, 4.6vw, 86px); --r1:8px; --r2:12px; --r3:16px; --r4:22px; --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.16,1,.3,1); --article-progress:0; background:var(--paper); -webkit-text-size-adjust:100%; /* Tabular figures wherever a number sits next to another number */ font-variant-numeric:normal; } /* NO overflow:hidden here, however tempting. `overflow` anything other than visible makes an element the scroll container for every sticky descendant, and a sticky box then positions against a box that does not scroll — so it silently stops sticking. It cost the contents index and the consult prompt their entire travel down a 13,000px article, with no error and nothing visibly wrong in the CSS. Clipping belongs on the section whose decoration needs clipping, and both of those (.fw-svc-hero, .fw-svc-close) carry it themselves. */ .fw-svc{display:block;position:relative} /* Canvas's style.css sets a bottom margin on bare `ul` at specificity (0,0,1), which BEATS common.css's `* { margin: 0 }` at (0,0,0) — so every list on this page carried ~31px of invisible space under it that the global reset never touched. It showed up as a vitals band whose bottom padding looked twice its top. Listed explicitly rather than as `.fw-svc ul`, because that would tie with `.fw-prose ul` on specificity and, loading later, would silently flatten the article's list styling. */ .fw-svc-vitals, .fw-svc-toc__list, .fw-svc-doc__stats, .fw-svc-sim, .fw-svc-res__list, .fw-svc-ql, .fw-svc-close__points{margin:0;padding:0;list-style:none} /* Canvas's style.css carries a bare `em { font-family: var(--cnvs-secondary-font) }` — a serif — which silently reskinned every on this page: the four vitals labels, and the % and + in the stat figures. The markup no longer uses for any of them (they were labels and units, not emphasis), and this rule makes sure a future one cannot reintroduce the serif either. Bootstrap Icons live in , so is deliberately NOT included here. */ .fw-svc em{font-family:var(--ff)} /* The one shared layout primitive. width:100% + gutter. No max-width, no margin-inline:auto — those are the two properties this file is deliberately built without. */ .fw-svc-hero__inner, .fw-svc-body__inner, .fw-svc-close__inner{ position:relative; z-index:1; width:100%; padding-inline:var(--pad); } /* ══════════════════════════════════════════════════════════════ 01 · PRIMITIVES ══════════════════════════════════════════════════════════════ */ /* ── Eyebrow ── */ .fw-svc-eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--ff); font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase; color:var(--pk); } .fw-svc-eyebrow__dot{ width:3px;height:3px;border-radius:50%; background:currentColor;opacity:.55;flex-shrink:0 } .fw-svc-eyebrow--onDark{color:var(--pk-l3)} /* ── Buttons ── One geometry, four skins. 50px tall — comfortably above the 44px touch minimum without looking like a mobile app control on desktop. */ .fw-svc-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:46px;padding:0 20px; border-radius:100px; font-family:var(--ff); font-size:14px;font-weight:600;letter-spacing:-.005em; white-space:nowrap; transition:background .3s var(--ease), color .3s var(--ease), box-shadow .35s var(--ease), transform .3s var(--ease); -webkit-tap-highlight-color:transparent } .fw-svc-btn i{font-size:1.1em;line-height:1;transition:transform .3s var(--ease)} .fw-svc-btn:active{transform:scale(.975)} .fw-svc-btn--full{width:100%} .fw-svc-btn--pk{ color:var(--wh);background:var(--pk); box-shadow:0 1px 2px color-mix(in srgb, var(--pk) 20%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--pk) 55%, transparent) } .fw-svc-btn--pk:hover{ background:var(--pk-d); box-shadow:0 1px 2px color-mix(in srgb, var(--pk) 24%, transparent), 0 16px 34px -10px color-mix(in srgb, var(--pk) 60%, transparent) } .fw-svc-btn--pk:hover i{transform:translateX(3px)} /* Quiet: the secondary action. A ring, not a border — it sits on the page rather than being drawn on top of it. */ .fw-svc-btn--quiet{ color:var(--g8);background:var(--paper); box-shadow:var(--ring), var(--e1) } .fw-svc-btn--quiet i{color:var(--wa);font-size:1.25em} .fw-svc-btn--quiet:hover{box-shadow:0 0 0 1px var(--ink-a12), var(--e2)} /* The two skins used ON a dark surface */ .fw-svc-btn--wh{color:var(--ink);background:var(--wh);box-shadow:0 12px 28px -10px color-mix(in srgb, var(--bk) 50%, transparent)} .fw-svc-btn--wh:hover{transform:translateY(-1px);box-shadow:0 18px 38px -12px color-mix(in srgb, var(--bk) 60%, transparent)} .fw-svc-btn--onDark{ color:color-mix(in srgb, var(--wh) 94%, transparent);background:color-mix(in srgb, var(--wh) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wh) 18%, transparent) } .fw-svc-btn--onDark:hover{background:color-mix(in srgb, var(--wh) 13%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wh) 32%, transparent)} /* ── Text link ── */ .fw-svc-txtlink{ display:inline-flex;align-items:center;gap:7px; min-height:50px; font-size:14.5px;font-weight:500;color:var(--bl); transition:color .25s } .fw-svc-txtlink i{font-size:11px;transition:transform .3s var(--ease)} .fw-svc-txtlink:hover{color:var(--bl-d)} .fw-svc-txtlink:hover i{transform:translateY(2px)} /* ── Breadcrumb ── Quiet by design: it orients, it does not compete with the h1. Scrolls sideways on narrow screens instead of wrapping to three ragged lines. */ /* ══════════════════════════════════════════════════════════════ 02 · READING PROGRESS A 2px hairline on the bottom edge of the sticky chrome. Solid pink, not a gradient — a three-stop rainbow here is the single most recognisable "generated" tell. ══════════════════════════════════════════════════════════════ */ .fw-svc-progress{ position:fixed;left:0;right:0;top:var(--article-top); height:2px;z-index:995;pointer-events:none } .fw-svc-progress>span{ display:block;height:100%; width:calc(var(--article-progress) * 1%); background:var(--pk); box-shadow:0 0 12px color-mix(in srgb, var(--pk) 50%, transparent); transition:width .1s linear } /* ══════════════════════════════════════════════════════════════ 03 · §1 MASTHEAD — full-bleed image, copy inside it Edge to edge and hard against the nav: no gutter on any side, no radius, no shadow, 45vh tall. The only inset is the one the COPY sits on, which is the page gutter so the headline still lines up with everything below it. ══════════════════════════════════════════════════════════════ */ .fw-svc-hero{ position:relative; /* No padding on any edge — the picture starts where the nav ends. */ padding:0; height:60vh; /* A short laptop window would otherwise crush the band below the point where the headline and the lead still sit comfortably at the foot. */ min-height:420px; max-height:760px; overflow:hidden; background:var(--ink) } .fw-svc-hero__media{position:absolute;inset:0;margin:0} .fw-svc-hero__img{ position:absolute;inset:0;display:block; width:100%!important;height:100%!important; max-width:none!important;max-height:none!important; object-fit:cover!important;object-position:center; border-radius:0; /* Lifted rather than dimmed. A clinical photograph shot under strip lighting reads flat and grey straight out of the CMS; a small brightness and saturation push is what makes the band feel like a window instead of a scrim. */ filter:brightness(1.06) saturate(1.1); opacity:0; transform:scale(1.012); transition:opacity .6s var(--ease-soft), filter .7s var(--ease), transform 1.2s var(--ease-soft) } /* The `img.` prefix is load bearing: the base rule has to out-specify the theme's `img.lazy{max-width:100%}`, and vanilla-lazyload KEEPS the .lazy class when it adds .lazy-loaded — so a reveal written with lower specificity loses, and the cover downloads perfectly and then sits at opacity:0 forever with no error anywhere. .lazy-error is included so a 404 reveals the frame too. */ img.fw-svc-hero__img.lazy-loaded, img.fw-svc-hero__img.lazy-error{opacity:1} /* ── The scrim ── Bottom-anchored and deliberately light. The type sits at the foot now, so only the foot needs covering — the middle two thirds of the picture are left completely clear, which is what makes the band read bright rather than tinted. The one exception is a soft cap at the very top: the breadcrumb sits up there in white, and .22 is the least that carries it over a bright cover without greying the picture. Hovering does NOT darken. It lifts the photograph — brightness and saturation up, a whisper of scale — while the scrim stays put. */ .fw-svc-hero__scrim{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb, var(--dk-d) 22%, transparent) 0%, color-mix(in srgb, var(--dk-d) 4%, transparent) 18%, transparent 38%, color-mix(in srgb, var(--dk-d) 34%, transparent) 66%, color-mix(in srgb, var(--dk-d) 72%, transparent) 88%, color-mix(in srgb, var(--dk-d) 82%, transparent) 100%) } /* A wash of brand pink over the foot only — warms the type end so the band belongs to the site rather than to the photograph. */ .fw-svc-hero__scrim::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg, transparent 56%, color-mix(in srgb, var(--pk) 5.5%, transparent) 84%, color-mix(in srgb, var(--pk) 10%, transparent) 100%) } .fw-svc-hero:hover .fw-svc-hero__img{ filter:brightness(1.13) saturate(1.16); transform:scale(1.03) } /* ── Copy ── Breadcrumb pinned to the top, the rest optically centred in what is left. Held to the dark end of the scrim: a headline that runs into the clear right-hand side is unreadable at exactly the width where the picture is doing its work. */ .fw-svc-hero__inner{ position:relative;z-index:2; display:flex;flex-direction:column; height:100%; padding-inline:var(--pad); padding-block:clamp(16px, 2.4vh, 30px) } .fw-svc-hero__copy{ /* Pinned to the foot, where the scrim is. */ margin-top:auto; /* A proportion, not a measure: it keeps the copy off the right edge of the photograph and still grows with the screen. */ max-width:70% } /* Breadcrumb, on dark */ /* ── Breadcrumb, as badges ── Over a photograph a run of plain links has no ground to sit on and its legibility changes with whatever is behind each word. Badges give every crumb its own backing, so the trail reads the same over a bright corner as over a dark one. Solid brand blue, not translucent glass. A frosted pill borrows its colour from whatever happens to be behind it, which means the trail looks different on every service page depending on the cover — and on a pale cover it barely reads at all. A solid fill is the same blue every time, and it puts the brand at the top of the band. */ /* The current page stays white — it is where you ARE, not somewhere you can go, and the colour change says that faster than the missing underline would. */ /* The dash between pills shrinks to a dot — a rule reads as a divider between blocks, a dot as a step in a trail. */ .fw-svc-hero .fw-svc-eyebrow{color:var(--pk-l3)} .fw-svc-hero__title{ margin:clamp(8px, .9vw, 13px) 0 0; font-family:var(--ff); /* Smaller than it was. Sat at the foot of a 60vh photograph the headline no longer has to hold the band on its own — the picture does that — so it can stop shouting. */ font-size:clamp(26px, 1.5vw + 13px, 42px); font-weight:600; line-height:1.06;letter-spacing:-.036em; color:var(--wh); text-wrap:balance } .fw-svc-hero__lead{ margin:clamp(8px, .8vw, 12px) 0 0; /* Wider measure to carry the smaller size: at 13.5px a 60ch column is only ~500px and the sentence broke into five short lines. */ font-size:clamp(12.5px, .16vw + 11.9px, 13.5px); font-weight:400;line-height:1.65;letter-spacing:0; color:color-mix(in srgb, var(--wh) 82%, transparent); text-wrap:pretty } /* ══════════════════════════════════════════════════════════════ 03b · VITALS BAND — under the image, outside it Six figures, each stacked icon → value → label. The band carries the same blurred brand spots the hero used to, so the photograph and the figures read as one masthead rather than a picture with a stats bar bolted underneath. ══════════════════════════════════════════════════════════════ */ .fw-svc-vitalsband{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); border-bottom:1px solid var(--line-soft) } /* ── Ambient colour ── Solid brand circles under filter:blur(), drifting slowly. A gradient wash reads flat; a blurred disc has a centre of mass and reads like light. Each blurred box is its own compositor layer, so there are three and the smallest drops out on phones. */ .fw-svc-vitalsband__fx{position:absolute;inset:0;z-index:0;pointer-events:none} .fw-svc-spot{ position:absolute;display:block; aspect-ratio:1;border-radius:50%; filter:blur(66px) } .fw-svc-spot--p1{ top:-150px;left:4%;width:clamp(220px, 24vw, 400px); background:color-mix(in srgb, var(--pk) 26%, transparent); animation:fwSpotA 21s ease-in-out infinite } .fw-svc-spot--b1{ top:-120px;right:18%;width:clamp(180px, 20vw, 330px); background:color-mix(in srgb, var(--bl) 20%, transparent); animation:fwSpotB 26s ease-in-out infinite } .fw-svc-spot--m1{ bottom:-170px;right:2%;width:clamp(160px, 17vw, 280px); background:color-mix(in srgb, var(--mt) 18%, transparent); animation:fwSpotC 24s ease-in-out infinite } @keyframes fwSpotA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-38px,26px,0) scale(1.12)}} @keyframes fwSpotB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-22px,0) scale(.92)}} @keyframes fwSpotC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-26px,-20px,0) scale(1.14)}} .fw-svc-vitalsband__inner{ position:relative;z-index:1; width:100%; padding-inline:var(--pad); padding-block:clamp(18px, 2vw, 30px) } /* The doctors who medically reviewed the page (.fw-rvw, css/custom.css), under the vitals. */ .fw-svc-reviewed{margin-top:clamp(14px, 1.6vw, 20px);padding-top:clamp(12px, 1.4vw, 18px);border-top:1px solid var(--line)} .fw-svc-vitals{ --vit-gap:clamp(14px, 2vw, 38px); /* Six fixed columns, not auto-fit. Auto-fit lands on four or five tracks at some widths and orphans the remainder onto a row of its own, which reads as a mistake rather than a layout. */ display:grid;grid-template-columns:repeat(6, minmax(0, 1fr)); gap:18px var(--vit-gap) } .fw-svc-vitals li{ position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:11px;row-gap:1px; align-items:center; min-width:0 } .fw-svc-vitals li + li::before{ content:'';position:absolute;left:calc(var(--vit-gap) / -2);top:2px;bottom:2px;width:1px; background:linear-gradient(180deg, transparent, var(--line) 22%, var(--line) 78%, transparent) } /* Icon on the left, spanning both text rows, in a soft brand chip. A bare glyph beside a number reads as a unit; a chip reads as a marker for the pair beside it. */ .fw-svc-vitals > li > i{ grid-column:1;grid-row:1 / span 2; display:flex;align-items:center;justify-content:center; width:clamp(32px, 2.2vw, 38px);aspect-ratio:1; border-radius:11px; font-size:clamp(15px, 1vw, 17px);line-height:1; color:var(--pk); background:var(--pk-l); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pk) 10%, transparent) } .fw-svc-vitals b{grid-column:2;grid-row:1} .fw-svc-vitals span{grid-column:2;grid-row:2} .fw-svc-vitals b{ font-size:clamp(16px, .62vw + 13.5px, 22px);font-weight:600; letter-spacing:-.03em;line-height:1.1;color:var(--ink); white-space:nowrap } /* Care-area names are long and have to be allowed to wrap. */ .fw-svc-vitals__wrap b{white-space:normal;overflow-wrap:anywhere;line-height:1.2} .fw-svc-vitals span{ font-size:9.5px;font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--g5); line-height:1.35 } /* ══════════════════════════════════════════════════════════════ 04 · §2 ARTICLE GRID Three columns from 1024 up. All three are clamp()-fluid, so on a wide monitor the page genuinely uses its width instead of growing margins — which is the whole point of dropping the max-width container. ══════════════════════════════════════════════════════════════ */ .fw-svc-body{ position:relative; padding:var(--sec) 0 0; background:var(--paper) } /* ── Brand aura on a white ground ── The article is ~13,000px tall, so spots anchored to the section would be invisible for most of it. These two bands cover where a reader actually starts and finishes; the middle is carried by the rail's own aura, which travels with the sticky column (§08). Radial gradients, not blurred discs — a filter:blur() over a box this tall is a repaint the page does not need to pay for. */ .fw-svc-body::before, .fw-svc-body::after{content:'';position:absolute;left:0;right:0;pointer-events:none;z-index:0} .fw-svc-body::before{ top:0;height:860px; background: radial-gradient(720px 500px at 88% 3%, color-mix(in srgb, var(--pk) 10%, transparent), transparent 62%), radial-gradient(620px 480px at 5% 18%, color-mix(in srgb, var(--bl) 8.5%, transparent), transparent 60%), radial-gradient(520px 420px at 60% 32%, var(--mt-bg), transparent 64%) } .fw-svc-body::after{ bottom:0;height:700px; background: radial-gradient(640px 460px at 10% 97%, color-mix(in srgb, var(--pk) 7.5%, transparent), transparent 62%), radial-gradient(560px 420px at 92% 86%, color-mix(in srgb, var(--bl) 6.5%, transparent), transparent 60%) } .fw-svc-body__grid{ display:grid; /* Full width. No cap on the article column and no centring — the body sits on the same 28/14 gutter as every other section, so the page is edge-to-edge throughout. The reading measure is kept on the TEXT instead (see §06). Tables, figures and embeds take the whole column, which is where the extra width goes — three tables and two figures in this article, all of them better for it. align-items:start, not stretch: the sticky-sidebar plugin sets the rail's height itself, and a stretched grid item fights it. */ /* OWF's ratio, unchanged: the rail holds three tenths of the row and never drops below 290px, so the article column scales with the viewport without ever running away from it. */ grid-template-columns: minmax(0, 7fr) /* article */ minmax(290px, 3fr); /* rail */ column-gap:clamp(26px, 3.4vw, 58px); align-items:start } .fw-svc-main{grid-column:1;min-width:0} .fw-svc-rail{grid-column:2;min-width:0} /* The plugin measures the wrapper and writes inline styles onto the inner element; it only needs the wrapper not to collapse before it runs. Same line the GG blog sidebar carries. */ .sticky-sidebar-wrap.fw-svc-rail{min-height:1px} /* ══════════════════════════════════════════════════════════════ 05 · CONTENTS INDEX SINGLE MARKUP #2 — one