/* ============================================================ Empire Vein & Vascular 2026 — theme chrome (header, footer, blog article frame). Everything derives from the design tokens (assets/css/tokens/, enqueued first as design.css). Page-body styling comes from the token layers and, later, the blocks. `.evw-` = WordPress theme chrome, distinct from the design system's `.ev-` classes so the two never collide. ============================================================ */ .evw-wrap { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); } .evw-main { display: block; } /* ── Utility bar ── */ /* The utility bar sits ABOVE the nav row in every mode, not just on desktop. The language dropdown lives in this bar and opens downward across the row below it; .evw-header is position:sticky with z-index:50, so without this the nav row paints over the open panel and the switcher looks dead. */ /* ── Utility bar ────────────────────────────────────────────────────────── Two children, one alignment rule: desktop [ msg · phone · switcher ] phone [ msg · phone switcher ] Same DOM both times — only justify-content differs. The announcement that used to sit on the left is gone, and with it the wrapper, the phone pulse and the three competing justify-content rules that had accumulated around them across four media queries. */ .evw-utility { background: var(--surface-dark); color: var(--text-on-dark); position: relative; z-index: 51; } .evw-utility-row { min-height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; } /* margin-right:auto rather than space-between on the row: the row has three children now and space-between would strand the quick links in the middle instead of grouping them with the switcher on the right. */ .evw-utility-cta { display: inline-flex; align-items: center; text-decoration: none; min-width: 0; margin-right: auto; } .evw-utility-links { display: inline-flex; align-items: center; gap: 18px; flex-shrink: 0; } .evw-utility-link { display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px; line-height: 1.2; font-size: var(--text-sm); font-weight: 500; color: var(--text-on-dark); text-decoration: none; white-space: nowrap; transition: color .18s var(--ease-out); } .evw-utility-link:hover { color: var(--ev-amber-400); text-decoration: none; } .evw-utility-cta:hover { text-decoration: none; } .evw-utility-cta:hover .evw-utility-phone { color: var(--ev-amber-400); } .evw-utility-phone { color: var(--text-on-dark); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; transition: color .18s var(--ease-out); } /* Both phases occupy the same grid cell, so the box is as wide as the wider PAIR and nothing reflows as they swap. justify-items pins them to the side the bar is anchored to, which is what keeps the number from wandering. One keyframe drives both; the second runs at a negative delay of half the cycle, which makes them opposite without a second set of keyframes to keep in sync. */ /* start, not end: the comment above is the rule — the phases pin to the side the bar is anchored to. The CTA moved to the left of the row, so anchoring them right would leave the number drifting as the two phrases swap. */ .evw-utility-msg { display: inline-grid; justify-items: start; min-width: 0; } .evw-utility-phase { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; } .evw-utility-msg > span { grid-area: 1 / 1; /* Sized to the space that is actually left, not to a breakpoint. The number (~102px), the switcher (~50px) and the gaps (16px) are fixed, so the message gets viewport - 200px. At 360px that is 160px and the longer phrase then ("We can check your coverage!") needed 197px at 14px — hence the 11px floor. 3.05vw tracks the leftover as it grows and reaches the 14px ceiling around 460px, above which there is room to spare. The copy is shorter since 2026-09-25 but the dot now takes 14-16px of the row, so the floor stays (see the 400px and 359px rules below). */ font-size: clamp(11px, 3.05vw, var(--text-sm)); color: var(--text-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: evUtilityMsg 13s ease-in-out infinite; } .evw-utility-msg > span:nth-child(2) { animation-delay: -6.5s; } /* A hand-off, not a cross-fade. Each phase is visible for a little under half the cycle and fully out before the other arrives, so the two never overlap at 50% opacity — which on phones, where the phases are anchored left and their numbers sit at different x, would read as two faint phone numbers at once. */ @keyframes evUtilityMsg { 0% { opacity: 0; } 4%, 44% { opacity: 1; } 50%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { /* No cycling: show the first phrase and retire the second, rather than leaving two lines stacked in one cell at full opacity. */ .evw-utility-msg > span { animation: none; } .evw-utility-msg > span:nth-child(2) { display: none; } } /* "We're here" dot (2026-09-25, the practice asked for a little glowing green dot by "Call us…", as if the line were online now). Always on, no schedule: the practice's call. It sits before the two phases, outside the fade, so it never blinks with them. A steady glow, plus a soft halo that swells and fades every 2.8s: transform and opacity on a pseudo-element only, so it runs on the compositor and never moves the text. At 2.2x the halo stays clear of the first letter on phones (2.6x came within 1px of it). Reduced motion keeps the steady glow alone. The green is scoped here rather than added to tokens/colors.css, which would put it in the block editor's palette; --ev-success (#15803d) is too dark to read as a light on the plum bar. Measured 7.5:1 against the bar. */ .evw-utility-cta { gap: 8px; } .evw-utility-live { --evw-live: #22c55e; position: relative; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--evw-live); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22), 0 0 8px 1px rgba(34, 197, 94, 0.6); } .evw-utility-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--evw-live); opacity: 0; animation: evUtilityLive 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; } @keyframes evUtilityLive { 0% { transform: scale(1); opacity: 0.5; } 65%, 100% { transform: scale(2.2); opacity: 0; } } /* Keyboard focus: the ring clears the glow by 4px, and the halo rests so it never tints the ring (it sat flush at the default 2px offset). */ .evw-utility-cta:focus-visible { outline-offset: 4px; } .evw-utility-cta:focus-visible .evw-utility-live::after { animation: none; } @media (prefers-reduced-motion: reduce) { .evw-utility-live::after { animation: none; } } /* Windows High Contrast: forced colours painted the dot the bar's own colour, leaving an empty 16px indent. It keeps a solid dot in the text colour. */ @media (forced-colors: active) { .evw-utility-live { forced-color-adjust: none; background: CanvasText; box-shadow: none; } .evw-utility-live::after { display: none; } } /* A shrink path, so the line can never paint over its neighbours. Each phase is sized to its whole nowrap line, so when room ran out (Spanish at 768-805px once the dot arrived, or text spacing and enlarged text) it overflowed onto the quick links and the switcher instead of truncating. Now the phase is capped at the room it has, the words ellipsize first and the number always stays whole. Where the line fits, nothing changes. */ .evw-utility-phase { max-width: 100%; } .evw-utility-lead { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .evw-utility-phone { flex-shrink: 0; } /* Language switcher — a
dropdown: flag + code in the bar, the full list below it. z-index clears the sticky header (50); the utility bar itself does not stick, so without it the panel would slide under the nav. */ .evw-lang { position: relative; flex-shrink: 0; z-index: 60; } .evw-lang > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; list-style: none; cursor: pointer; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; line-height: 1; color: rgba(255, 255, 255, 0.78); border-radius: var(--radius-full); transition: color .18s var(--ease-out), background .18s var(--ease-out); } /* Both are needed: WebKit draws a ::-webkit-details-marker, everything else uses the list-item display type. */ .evw-lang > summary::-webkit-details-marker { display: none; } .evw-lang > summary::marker { content: ""; } .evw-lang > summary:hover { color: var(--ev-white); background: rgba(255, 255, 255, 0.10); } .evw-lang > summary:focus-visible { outline: 2px solid var(--ev-amber-400); outline-offset: 2px; } .evw-lang[open] > summary { color: var(--ev-white); background: rgba(255, 255, 255, 0.16); } .evw-lang[open] .evw-lang-caret { transform: rotate(180deg); } .evw-lang-caret { transition: transform .18s var(--ease-out); flex-shrink: 0; } .evw-lang-flag { display: block; width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); } /* Explicit, rather than trusting the closed-
default. A closed
hides its non-summary children through a UA slot, and an ABSOLUTELY POSITIONED child is exactly the case engines have historically disagreed on. Measured here it is unpainted and not hit-testable, but it still reports a 210x94 box — near enough to ambiguous that a 94px white panel permanently over the header is not worth risking on one browser's behaviour. */ .evw-lang:not([open]) .evw-lang-menu { display: none; } .evw-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1; min-width: 210px; margin: 0; padding: 6px; list-style: none; background: var(--ev-white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .evw-lang-menu li { margin: 0; } .evw-lang-menu a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; font-size: var(--text-sm); font-weight: 600; line-height: 1.2; color: var(--text-heading); text-decoration: none; border-radius: var(--radius); } .evw-lang-menu a:hover { background: var(--ev-purple-50); text-decoration: none; } /* The current language is marked with a check as well as weight, so it is not colour alone doing the work. */ .evw-lang-menu a[aria-current="true"] { background: var(--ev-purple-50); } .evw-lang-menu a[aria-current="true"]::after { content: ""; width: 12px; height: 7px; margin-left: auto; flex-shrink: 0; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg) translate(1px, -2px); } /* The announcement is hidden exactly where it would ellipsis, and not one pixel sooner. Measured with the switcher and phone in place: the line needs 482px and has 540px at 768 wide, 472px at 700. So 767px is the real cut-off — the first attempt hid it below 1024 and threw away 256px of perfectly good tablet. Below that the bar carries the language switcher and the phone number, which is what it is for on a phone. */ @media (max-width: 767px) { /* msg+phone hard left, switcher hard right. Fitting the longer phrase is the whole problem at this width. Measured at 375px: the row has 343px, and "We can check your coverage!" alone wants 197px at 14px — with the number (110) and the switcher (74) and the gaps, that is 405px, a 62px shortfall, so it was ellipsising to "We can check your co…". Rather than cut the sentence, the bar gives the space back: switcher drops its "EN" label -24px (the flag says it, and the open menu names both in full) message scales fluidly -28px or more number 14px -> 13px -8px gaps 16/8 -> 10/6 -8px That is 68px against a 62px shortfall, so both phrases render whole. */ /* The quick links move into the drawer here; this row is already at its floor fitting the message, the number and the switcher into ~360px. */ .evw-utility-links { display: none; } .evw-utility-row { justify-content: space-between; gap: 10px; } .evw-utility-msg { justify-items: start; } .evw-utility-cta { gap: 6px; } .evw-utility-phone { font-size: 13px; } .evw-lang-code { display: none; } /* Homepage hero tiles: the copy column was being squeezed to ~137px. The tile art is a full-bleed photo behind the text, so the padding only has to clear the subject, not the whole image — 52% of a 343px tile is 178px of padding for 137px of text, and "Relief from varicose veins, spider veins, and heavy, aching legs." broke into four ragged lines. 24% gives the copy ~220px, which is what drops Knee Pain's longer line from four wrapped lines to three. The copy crosses the photo slightly at this width, which the practice signed off on. Both tiles read it. They are MIRRORED — Vein Care has its photo on the left and pads left, Knee Pain has it on the right and pads right — so the one variable is applied to whichever side that tile reserves. Widening only padding-left, as a first pass did, fixed Vein Care and left Knee Pain exactly as cramped as before. */ /* ── Phone geometry, derived from where the ARTWORK actually is ────── Both PNGs are transparent cut-outs, so the image BOX is not the picture. Measured from the files: the legs occupy 8-83% of home-vein-legs.png and the knee 15-99% of home-knee-pain.png, both 512x462. object-fit:cover on a tall box scales by height, so the scaled width is 1.108 x the tile height and the crop is anchored to the far edge. That makes the empty margin beside the subject a function of HEIGHT, not of the image width: 0.188 x height on the vein tile, 0.166 x height on the knee one. The copy only has to clear the subject, not the box, so: padding = image-width - that margin + a small gap At 48% and 300px tall that is calc(48% - 44px) and calc(48% - 42px) — the percentages track the tile so this holds from 320px to 767px rather than at one width. The knee side is 6px deeper on purpose: its subject runs 16 points further into its frame, and the practice asked for that line to be a little narrower. Previously a flat 24%: the copy started 40px INSIDE the legs on a 375px screen, which is the overlap the practice flagged. */ /* The image keeps its DESKTOP width here on purpose. A first pass narrowed it to 38% to stop the copy crossing the artwork. That cleared the overlap and was the wrong fix: object-fit:cover on a tall box crops rather than scales, so a narrower box does not shrink the legs, it slices them. At 38% only the rightmost quarter of the artwork survived and the affected leg was mostly off-frame. Back to 60%, which shows about half of it, and the copy moves right instead. */ /* 48%, chosen by scanning 44-60% and measuring all three things that trade against each other at 375px: img artwork shown copy width tile height 44% 33% 195 (3 ln) 300 48% 38% 182 (3 ln) 300 52% 43% 170 (4 ln) 319 60% 44% 145 (5 ln) 344 Past 52% the artwork stops improving and only the tile grows: narrower copy wraps to more lines, the tile gets taller, and a taller box crops the image harder, which is a loop that costs height without showing more leg. 48% holds both tiles at the 300px floor and still shows half again as much artwork as the 38% this replaced. */ .ev-hero-bigtiles > a { --ev-tile-img: 48%; --ev-tile-h: 300px; } .ev-hero-bigtiles > a > div { --ev-tile-pad: calc(48% - 44px); } .ev-hero-bigtiles > a:nth-child(2) > div { --ev-tile-pad: calc(48% - 42px); } /* 380px -> 300px. The copy needs 174-263px including padding depending on how the line breaks, so 380px was leaving up to 180px of empty tile on every phone, twice over. min-height, so a tile that needs more still takes it — at 320px the longer line pushes it back to ~319px by itself. */ .ev-hero-bigtiles > a, .ev-hero-bigtiles > a > div { min-height: var(--ev-tile-h); } } /* Spanish, 768-819px: the quick links are back at 768, and with the green dot in front (16px) "Llámanos cuando quieras" plus the number ran 5-19px into "Blog de Empire Vein" (measured 2026-09-25; English has 30px to spare). The phone row's economies close it: the switcher shows its flag only, tighter gaps, the number at 13px. Measured room left at 768: 13-20px. */ @media (min-width: 768px) and (max-width: 819px) { html:lang(es) .evw-lang-code { display: none; } html:lang(es) .evw-utility-row { gap: 10px; } html:lang(es) .evw-utility-cta { gap: 6px; } html:lang(es) .evw-utility-phone { font-size: 13px; } } /* Below 360px the bar drops the words and keeps the dot, the number and the switcher, which is all it really owes the reader; a line cut mid-word is worse than none. Measured 2026-09-25 with the dot and the current copy ("Check your insurance" / "Call us anytime", "Checa tu seguro" / "Llámanos cuando quieras"): at 360 the tightest phrase, Spanish phase 2, has 25px to spare (English 45px); at 320 the Spanish no longer fits (-15px). The number, the switcher and the gaps are fixed, so the words get what is left. */ /* 360-400px is the tightest band where the message still fits whole. The last pixels come from the gaps and one point off the number rather than from the text, which is already at its 11px floor. */ @media (max-width: 400px) { .evw-utility-row { gap: 6px; } .evw-utility-phase { gap: 5px; } .evw-utility-phone { font-size: 12px; } } @media (max-width: 359px) { /* Too narrow for any phrase. The number stays — it is the point of the bar — so only the lead-in goes, and the cycle stops on one phase rather than fading the number in and out on its own. */ .evw-utility-lead { display: none; } .evw-utility-msg > span { animation: none; } .evw-utility-msg > span:nth-child(2) { display: none; } } :root { --header-h: 68px; } /* ── Header ── */ .evw-header { background: var(--gradient-nav); position: sticky; top: 0; z-index: 50; box-shadow: 0 10px 30px rgba(16, 4, 28, 0.30); } .evw-header-row { height: 68px; display: flex; align-items: center; gap: 18px; justify-content: space-between; } .evw-logo { display: flex; align-items: center; flex-shrink: 0; } /* The wordmark, at the size the design actually specifies. layout.jsx's Logo component renders `height: size * 1.85`, and the desktop header passes size:34 — so the design is 63px tall, not 34px. The port read the 34 as pixels and shipped the logo at 54% of its intended size, which is why it looked so much smaller here than in the local build. The mobile header passes size:25, i.e. 46px. --evw-logo-h carries it so the header row and this stay in step. */ .evw-logo { --evw-logo-h: 46px; } .evw-logo img { display: block; height: var(--evw-logo-h); width: auto; } /* gap:0 and no wrapping, matching the prototype. The theme had gap:4px and flex-wrap:wrap, which at 1280px pushed "Locations" onto a second row and made the nav 78px tall inside a 68px header row. */ .evw-nav { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; } /* Bar links only — NOT every link in the nav. The menus below are full of , and a bare `.evw-nav a` would paint them white on white and outrank their own class rules. Every bar link carries .evw-nav-link. */ .evw-nav .evw-nav-link { padding: 9px 14px; line-height: 1.2; font-size: var(--text-base); font-weight: 500; color: #fff; text-decoration: none; white-space: nowrap; transition: color .18s var(--ease-out); } .evw-nav .evw-nav-link:hover { color: var(--ev-amber-400); text-decoration: none; } /* ── Mobile drawer ──────────────────────────────────────────────────────── One
: the is the hamburger, the panel slides in from the right, and nested
are the accordion rows. Everything below is presentation — opening, expanding and navigating all work with 27-drawer.js absent. The panel and scrim must be display:block unconditionally. A closed
hides its non-summary children, and a hidden element cannot transition, so the slide is driven by transform + visibility instead. */ .evw-drawer { display: none; } /* desktop: the bar is the menu */ /* THE PANEL HAS TO OUTRANK THE BAR ABOVE IT. The drawer lives inside
, and on phones .evw-header is z-index 50 while .evw-utility is 51 — both inside .evw-chrome. So the panel's z-index 61 is resolved INSIDE the header's stacking context and loses to a bar with a lower number, because that bar is a sibling one level up. The top 40px of the panel therefore rendered under the utility bar, which is exactly where the close X sits. Raising the header while the drawer is open lifts the whole subtree — scrim included, so the scrim dims the utility bar too, which is what a modal should do. :has() keeps it in CSS, so it still holds with the island absent, like the rest of the drawer. */ .evw-header:has(.evw-drawer[open]) { z-index: 60; } .evw-drawer > .evw-drawer-scrim, .evw-drawer > .evw-drawer-panel { display: block; } .evw-drawer summary::-webkit-details-marker { display: none; } .evw-drawer summary { list-style: none; } .evw-drawer-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; cursor: pointer; border-radius: var(--radius-full); -webkit-tap-highlight-color: transparent; } .evw-drawer-bars { display: block; width: 22px; height: 16px; position: relative; } .evw-drawer-bars i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--nav-fg, #fff); transition: transform .26s var(--ease-out), opacity .18s var(--ease-out), top .26s var(--ease-out); } .evw-drawer-bars i:nth-child(1) { top: 0; } .evw-drawer-bars i:nth-child(2) { top: 7px; } .evw-drawer-bars i:nth-child(3) { top: 14px; } /* Open: the hamburger becomes the panel's close button, in place. It is the only control that can shut a
without JavaScript. */ /* The X carries NO chip. The drawer's section rows use a round filled chip for their +/- toggles, so a round filled chip on the close button read as another one of those rather than as "close". The 44px tap target stays; only the background goes. */ /* absolute, NOT fixed. Fixed pinned it to the viewport, so it followed the reader down the menu — the behaviour the practice asked to remove. An absolute child of the scrollport above scrolls with the content and simply leaves the screen, which is what a close button at the top of a long list should do. */ .evw-drawer[open] > .evw-drawer-btn { position: absolute; top: 14px; right: 14px; z-index: 62; background: none; } .evw-drawer[open] .evw-drawer-bars i { background: var(--text-heading); } .evw-drawer[open] .evw-drawer-bars i:nth-child(1) { top: 7px; transform: rotate(45deg); } .evw-drawer[open] .evw-drawer-bars i:nth-child(2) { opacity: 0; } .evw-drawer[open] .evw-drawer-bars i:nth-child(3) { top: 7px; transform: rotate(-45deg); } .evw-drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(28, 10, 42, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .28s var(--ease-out), visibility .28s var(--ease-out); } .evw-drawer[open] > .evw-drawer-scrim { opacity: 1; visibility: visible; } /* The scrollport, when open. Deliberately NO transform here: the scrim is a fixed child, and a transformed ancestor would become its containing block and shrink it from the viewport to this 380px box. The slide stays on the panel, where it cannot do that. */ .evw-drawer[open] { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(88vw, 380px); display: block; overflow-y: auto; overscroll-behavior: contain; } .evw-drawer-panel { /* Fixed while CLOSED so it stays out of the header's flex row; in flow once open, so the box above can scroll it. */ position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(88vw, 380px); /* A wash rather than flat white: the panel is the brand's own surface for the length of the visit, and white read as unfinished beside it. Fixed to the panel, not the content — the default background-attachment on a scroll container keeps the gradient still while the list moves. */ background: linear-gradient(168deg, var(--ev-purple-100) 0%, var(--ev-purple-50) 46%, var(--ev-purple-25) 100%); box-shadow: -18px 0 48px rgba(16, 4, 28, 0.28); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ease-out), visibility .3s var(--ease-out); } .evw-drawer[open] > .evw-drawer-panel { position: relative; top: auto; right: auto; bottom: auto; width: 100%; min-height: 100%; transform: none; visibility: visible; } /* Top padding clears the close X, which is the hamburger pinned at top:14px and 44px tall. There is no panel header any more. */ .evw-drawer-body { padding: 72px 20px 32px; } /* Below the menu, not above it. At the top the button, the free-screening line and the phone number all landed before the reader had seen a single link, which is what made the panel feel busy. */ .evw-drawer-book { display: flex; align-items: center; justify-content: center; margin-top: 26px; height: 50px; border-radius: var(--radius-full); background: var(--primary); color: var(--primary-foreground); font-size: var(--text-base); font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px -10px rgba(73, 19, 111, 0.6); } .evw-drawer-book:hover { text-decoration: none; color: var(--primary-foreground); } /* Sits under the Book button as a reason to press it, not as a heading. */ .evw-drawer-perk { margin: 10px 0 0; text-align: center; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.01em; color: var(--ev-amber-600, var(--ev-amber-500)); } /* Directly under the perk line, as the quieter of the two ways to make contact. Its outline is the one hairline kept in the panel: it is the button's shape, not a divider between items. */ .evw-drawer-phone { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; padding: 13px; border-radius: var(--radius-lg); border: 1px solid var(--ev-purple-200); background: rgba(255, 255, 255, 0.55); color: var(--ev-purple-800); font-size: var(--text-base); font-weight: 700; text-decoration: none; } .evw-drawer-phone svg { color: var(--ev-amber-500); flex-shrink: 0; } .evw-drawer-phone:hover { text-decoration: none; color: var(--ev-purple-800); } .evw-drawer-nav { margin-top: 4px; } /* * NO DIVIDERS. The rows were separated by a hairline under each section; * with eight of them stacked it read as a table. Spacing and the size step * down to the sub-items do the separating instead, which is why the rows * can afford to be smaller without running together. * * Two targets in one row: the label goes to the section, the + opens it. * Both sit inside the , so the + still works with no script — and * the label navigating makes the toggle it also fires irrelevant. * * Sized down from clamp(1.3rem, 5.6vw, 1.6rem). At display size eight rows * plus an open section pushed the actions well below the fold; this is still * comfortably bigger than body copy and reads as the primary navigation. */ .evw-drawer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 2px; cursor: pointer; font-size: clamp(1.05rem, 4.4vw, 1.25rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; color: var(--ev-purple-800); text-decoration: none; } .evw-drawer-row:hover { text-decoration: none; color: var(--ev-purple-800); } /* The label fills the row so the whole left side is the link, not just the glyph-width of the words. */ .evw-drawer-label { flex: 1; min-width: 0; color: inherit; text-decoration: none; padding: 8px 0; } .evw-drawer-label:hover { color: var(--ev-purple-500); text-decoration: none; } /* + that becomes − when the section is open. */ .evw-drawer-plus { position: relative; flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.72); } .evw-drawer-plus i { position: absolute; width: 14px; height: 2px; border-radius: 2px; background: var(--ev-purple-700); transition: transform .22s var(--ease-out), opacity .22s var(--ease-out); } .evw-drawer-plus i:nth-child(2) { transform: rotate(90deg); } .evw-drawer-sec[open] > .evw-drawer-row .evw-drawer-plus i:nth-child(2) { transform: rotate(0deg); opacity: 0; } .evw-drawer-sub { padding: 0 0 12px; } /* * Conditions / Treatments. The drawer lists every page a section owns, and * for the two pillars that have both kinds "Varicose Veins" and "VenaSeal" * are not the same sort of destination — a patient is looking for one or the * other. Set as a quiet label so it organises without competing with the * links it introduces. */ .evw-drawer-grouph { /* Outdented past its links, so the heading reads as the thing they hang off rather than as another item in the same column. */ margin: 14px 0 4px; padding-left: 0; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; /* A muted purple, not the slate grey this replaced: grey was the one non-purple thing left in the panel. Purple-700 mixed most of the way toward the wash — 5.3:1 on the palest end of the gradient, so it stays legible at 11px, and clearly separate from the brighter #8c4cb0 that marks the reader's current page. */ color: #7c5499; } /* A hairline joining a heading to the links beneath it. The general sibling combinator does the scoping for free: headings only exist in the sections the generator split (Vein Care, Vascular Care), so only those links pick up the rule — the flat sections stay plain. */ .evw-drawer-grouph ~ .evw-drawer-item { border-left: 1px solid var(--ev-purple-200); } .evw-drawer-grouph:first-child { margin-top: 2px; } /* Two steps down from the row, which is what lets the hairlines go: the size change is the boundary now. */ .evw-drawer-item { display: flex; align-items: center; min-height: 40px; padding: 4px 2px 4px 14px; line-height: 1.3; text-decoration: none; font-size: 0.95rem; font-weight: 600; color: var(--ev-purple-700); } .evw-drawer-item:hover { color: var(--ev-purple-500); text-decoration: none; } /* * WHERE THE READER IS. Brighter than everything around it rather than * darker, so it reads as lit up instead of as another heading. 4.9:1 on the * palest end of the panel wash, so it stays legible as body-size text. * Server-rendered (drawer.php sets aria-current), so it is correct on first * paint and correct in Spanish, where the slug is the half that does not * change. */ .evw-drawer-item[aria-current="page"], .evw-drawer-label[aria-current="page"], .evw-drawer-row-flat[aria-current="page"] { color: var(--ev-purple-400); font-weight: 800; } .evw-drawer-utility { display: flex; flex-direction: column; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ev-purple-200); } .evw-drawer-utility a { min-height: 40px; display: flex; align-items: center; font-size: var(--text-sm); font-weight: 600; color: var(--ev-purple-600); text-decoration: none; } .evw-drawer-utility a:hover { color: var(--ev-purple-400); text-decoration: none; } @media (prefers-reduced-motion: reduce) { .evw-drawer-panel, .evw-drawer-scrim, .evw-drawer-bars i, .evw-drawer-plus i { transition: none; } } /* ── The header floats ──────────────────────────────────────────────────── Ports layout.jsx's DesktopHeader, which is position:fixed with no background of its own: the hero runs under it, and the plum gradient fades in only once the reader scrolls. THIS IS NOT COSMETIC. tokens/layout.css already adds top padding to the first hero section to clear a floating header. While this header sat in the flow, the page paid for the header TWICE — 108px of chrome plus 116px of clearance — and every page rendered 108px lower than the design. Measured against the prototype at 1440px: h1 at 261px here against 153px there, to the pixel. Below 1025px the header returns to the flow, which is what the prototype's MobileHeader does, and the clearance rule does not apply there either. The at-rest state is the server-rendered one and is legible on every page, so this degrades correctly with 26-chrome.js absent — the announcement stays open and the nav keeps the colour its own hero calls for. */ .evw-chrome { position: relative; z-index: 50; } .evw-chrome-bg { display: none; } /* ── Press page: news-segment player (31-yt.js facade) ───────────────────── A poster with an amber play button; the island swaps it for the iframe on click. The hover lift mirrors the site's other clickable media. */ .ev-yt-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: var(--radius-full); background: var(--ev-amber-500); color: var(--ev-white); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(16, 4, 28, 0.35); transition: transform .18s var(--ease-out), background .18s var(--ease-out); } .ev-yt-play svg { margin-left: 4px; } .ev-yt:hover .ev-yt-play, .ev-yt:focus-visible .ev-yt-play { transform: scale(1.06); background: var(--ev-amber-400); } .ev-yt:focus-visible { outline: 3px solid var(--ev-amber-400); outline-offset: 3px; } .ev-yt.is-playing { background: #000; } @media (prefers-reduced-motion: reduce) { .ev-yt-play { transition: none; } } /* ── Quiz pages: the opening screen at first paint (2026-09-29) ────────── While the quiz island is on its way (html.ev-quiz-pending, set by an inline head script in functions.php), draw exactly what the island's intro render shows: the intro with its Start button, no questions, no consult form, no progress row. The island clears the mark after its first render, so nothing moves when it takes over. Without JavaScript the mark is never set and the full quiz stays readable. !important beats the [hidden] toggles and inline styles the island owns. */ .ev-quiz-pending [data-ev-island="quiz"] [data-ev-part="questions"], .ev-quiz-pending [data-ev-island="quiz"] [data-ev-part="form"], .ev-quiz-pending [data-ev-island="quiz"] [data-ev-part="progress"] { display: none !important; } .ev-quiz-pending [data-ev-island="quiz"] [data-ev-part="start-row"] { display: block !important; } /* ── Insurance page: the benefits-check form in a narrow column ─────────── The band is two halves of one plum panel; below 760px they stack. The form column can be as narrow as ~250px on a phone (section 24px + column 38px padding each side), so the first/last-name pair stacks once the column is too narrow for two fields, and the phone padding tightens so the fields get the width instead (client flag, 2026-09-09). The container query keys the stacking to the column's real width, which is what actually varies (tablet two-up columns are narrow too); the 560px rule is the fallback for engines without container queries. !important beats the block's inline styles. */ .ev-bcb-form { container-type: inline-size; } /* The fields are white on the plum panel (client flag, 2026-09-28): a readable placeholder (--muted-foreground is 5.2:1 on white) and a visible amber focus ring, since the inline style turns the browser outline off. */ .ev-bcb-input::placeholder { color: var(--muted-foreground); opacity: 1; } .ev-bcb-input:focus { border-color: var(--ev-amber-400) !important; box-shadow: 0 0 0 3px rgba(245, 148, 64, 0.55); } @container (max-width: 340px) { .ev-bcb-names { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 560px) { .ev-bcb-col { padding: 28px 22px !important; } .ev-bcb-names { grid-template-columns: minmax(0, 1fr) !important; } .ev-bcb form .ev-btn { width: 100%; padding: 0 18px !important; } } /* ── Knee hub on phones (client flags, 2026-09-06) ──────────────────────── G / A / E: the animated flow arrows only make sense between three columns in a row. Stacked, they landed beside a letter and shoved it off centre. Each step takes the full width so the letter sits dead centre, and the arrows go. Not a carousel: G, A and E must all be readable. Angiogram split: the copy column (heading, explanation) moves above the two figures, so the title introduces the pictures. */ @media (max-width: 767px) { .ev-gae-flow { display: none; } .ev-gae-step { flex: 0 0 100% !important; max-width: none !important; } .ev-aba-copy { order: -1; } } /* ── Vein hub recovery band on phones ────────────────────────────────── The oversized band-aid drifts off the right edge on desktop, clear of the three columns. On a phone the columns become one scroller and the picture landed square on the phase text (client flag, 2026-09-06). Below 768px it moves into the top-right corner, smaller, and the heading steps down so nothing sits under it. !important because the block styles inline. */ @media (max-width: 767px) { .ev-expect-decor { top: -30px !important; right: -18px !important; transform: rotate(-32deg) !important; width: 180px !important; opacity: .9; } .ev-expect-head { margin-top: 30px !important; } } /* ── Phones and tablets: the whole chrome sticks ───────────────────────── Below the floating breakpoint the chrome sits in the flow and only the nav row was sticky — the announcement/phone strip scrolled away. The practice wants that strip AND the nav to stay with the reader on mobile, on every page (2026-09-06). The wrapper is now the sticky element, so the header inside it no longer needs to be; its shadow moves to the wrapper, where a static header's shadow would be painted under the sections that follow. Sticky, not fixed: the chrome still occupies its own height in the flow, so no page gains or loses clearance. */ @media (max-width: 1024px) { .evw-chrome { position: sticky; top: 0; box-shadow: 0 10px 30px rgba(16, 4, 28, 0.30); } /* relative, NOT static: the header must stay a stacking context so the :has() rule above (z-index 60 while the drawer is open) still lifts the drawer and its close X above the announcement strip (z-index 51). Static dropped that context and the strip painted over the X. */ .evw-header { position: relative; box-shadow: none; } /* THE DRAWER MUST NOT LIVE INSIDE A STUCK STICKY BOX. The drawer is a position:fixed child of the header, and on iOS Safari a fixed element inside a sticky ancestor that is currently stuck appears to be sized and placed against that ancestor, not the viewport: the panel ended at its own content instead of the screen bottom, and its close X (top:14px of the drawer box) sat under the announcement strip (diagnosed from a client screenshot, 2026-09-08). While the drawer is open the chrome steps out of sticky — the scrim covers the page, so nothing is lost — and it re-sticks the moment the drawer closes. The panel is also given the viewport as an explicit floor, so it is never shorter than the screen. */ .evw-chrome:has(.evw-drawer[open]) { position: relative; } .evw-drawer[open] > .evw-drawer-panel { min-height: 100vh; min-height: 100dvh; } } /* .evw-logo img above sets display:block at 0,1,1 — a bare .evw-logo-onlight is 0,1,0 and loses to it, which showed BOTH wordmarks stacked. Qualify. */ .evw-logo img.evw-logo-onlight { display: none; } .evw-logo img.evw-logo-ondark { display: block; } @media (min-width: 1025px) { .evw-chrome { position: fixed; top: 0; left: 0; right: 0; /* Over a LIGHT hero the floating nav has to be dark. These are tokens/layout.css's #app-inner values, rehomed onto the theme's own wrapper — the prototype selector never matches in WordPress. */ --nav-fg: var(--text-heading); --nav-open: var(--ev-purple-700); --nav-divider: rgba(40, 20, 60, 0.14); } /* Dark hero, or scrolled onto the plum: flip everything to light. */ .evw-chrome[data-hero-dark], .evw-chrome.is-scrolled { --nav-fg: #fff; --nav-open: var(--ev-amber-400); --nav-divider: rgba(255, 255, 255, 0.20); } .evw-chrome-bg { display: block; position: absolute; inset: 0; background: var(--gradient-nav); opacity: 0; pointer-events: none; transition: opacity .32s var(--ease-out), box-shadow .32s var(--ease-out); } .evw-chrome.is-scrolled .evw-chrome-bg { opacity: 1; box-shadow: 0 10px 30px rgba(16, 4, 28, 0.30); } /* The bar itself carries no background now — .evw-chrome-bg is behind it. */ .evw-header { position: relative; z-index: 1; } /* size:34 * 1.85 = 63px, which very nearly fills the 68px bar — that is how the prototype looks and why the wordmark reads at a glance there. */ .evw-logo { --evw-logo-h: 63px; } /* .evw-utility's z-index is set once, in the base rule above. */ .evw-header { background: none; box-shadow: none; top: auto; } /* The announcement leaves on scroll, so the bar shrinks 108 -> 68. It SLIDES, it is not clipped. The obvious implementation — overflow:hidden plus max-height:0 on .evw-utility — also clips the language dropdown that lives in that bar: the panel rendered 98px below the bar's bottom edge and was not even hit-testable, so the disclosure arrow turned and nothing appeared. Translating the whole fixed header up by the bar's own height produces the identical result and clips nothing. 40px is safe to hardcode: .evw-utility-row is min-height:40px and every string in it is nowrap, so the bar cannot grow a second line. */ .evw-chrome { --evw-utility-h: 40px; transition: transform .32s var(--ease-out); } .evw-chrome.is-scrolled { transform: translateY(calc(var(--evw-utility-h) * -1)); } /* The bar is off screen now, so the availability dot's halo rests. Only at this width: below 1025px the bar stays in view while scrolled, and a paused halo froze there as a static ring (review, 2026-09-25). */ .evw-chrome.is-scrolled .evw-utility-live::after { animation-play-state: paused; } /* The drawer is on screen in the 1025-1279px strip band, and a transformed ancestor is the containing block for its fixed descendants: with the scrolled translateY in place, the open drawer and its scrim were laid out inside the 170px chrome box instead of the viewport (review, 2026-09-08). No transform while the drawer is open — and no transition, because an animating transform is still a transform for .32s. */ .evw-chrome:has(.evw-drawer[open]) { transform: none; transition: none; } /* Nav colours follow the hero. Same specificity as the rule above, so this has to come after it — it does. */ .evw-nav .evw-nav-link { color: var(--nav-fg); } .evw-nav .evw-nav-link:hover { color: var(--nav-open); } .evw-nav-divider { background: var(--nav-divider); } /* The wordmark: purple only while floating, unscrolled, over a light hero. */ .evw-chrome:not(.is-scrolled):not([data-hero-dark]) .evw-logo img.evw-logo-onlight { display: block; } .evw-chrome:not(.is-scrolled):not([data-hero-dark]) .evw-logo img.evw-logo-ondark { display: none; } /* Book button: white on the plum, solid purple against a light hero (layout.jsx picks the same two by its `light` flag). */ .evw-chrome:not(.is-scrolled):not([data-hero-dark]) .evw-book { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 6px 18px rgba(73, 19, 111, 0.28); } /* First-hero clearance, restated in terms of the header that is actually floating. design.css hardcodes 116px, which is right only for the 68px desktop bar; between 1025 and 1279 the bar is the 115px swipe-strip layout and 116px would leave a 1px gap. --header-h already tracks both. :first-of-type, NOT :first-child. WordPress emits an inline