/* ============================================================================= VELAIRE EDITORIAL — the closing band's serif italic and white button. ============================================================================= Loaded by the v2 layout on EVERY route, after velaire.css so it wins. WHY THIS IS ITS OWN FILE AND NOT PART OF velaire.css. `npm run v2:collisions` is a GENERATOR that rewrites velaire.css, and it has deleted a hand-written block there before -- 424 lines on 11-Sep, including an `overflow-x: clip` fix, while reporting "0 rules written". velaire-industry.css was split out for exactly this reason and its header says so. Same rule here: nothing hand-authored belongs in the generated file. WHAT THIS IS. Qasim, 20-Sep: "do the serif italic and white button across all of v2." Both come from the live v1 closing band, which this tree had been approximating with an Urbanist oblique and a gold button. SCOPE, stated because "all of v2" could mean more than this. `` appears in exactly six files in the v2 tree and every one of them is this same closing band, which every route renders -- so one selector genuinely is all of v2. The WHITE BUTTON is scoped to that band on purpose: `.tf-btn` is the primary button everywhere, including on cream pages, and a white pill on cream is invisible and fails contrast. If the intent was every button, that is a different and much larger change. ============================================================================= */ /* ---- the editorial italic -------------------------------------------------- Cormorant Garamond italic 500, the same face and weight src/app/layout.tsx loads for v1's `.closing-cta em`, with v1's own -0.04em tracking. The 1.06em is this file's addition and it is optical, not decorative: Cormorant has a markedly smaller x-height than Urbanist, so at an identical font-size the italic reads a size down from the words either side of it. The bump puts the x-heights level. */ [data-v2-velaire] .v2-closing em { font-family: var(--v2-serif), Cormorant Garamond, Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.06em; letter-spacing: -0.04em; } /* ---- the white button ------------------------------------------------------ Beats `[data-v2-velaire] .tf-btn` and `[data-theme="light"] .tf-btn`, both of which are (0,2,0); this is (0,3,0), so no !important is needed. `background-image: none` is load-bearing. The market-gold rule sets the gradient as a background-IMAGE, so setting only `background-color` leaves the gold painted straight over the white. That is the same longhand-versus-shorthand trap that kept the light-mode button broken. */ [data-v2-velaire] .v2-closing .tf-btn { background: #fdf9f8; background-image: none; color: #4a1f2d; box-shadow: 0 -3px 0 0 rgba(74, 31, 45, 0.14) inset, 0 1px 0 0 rgba(255, 255, 255, 0.9) inset, 0 10px 24px -14px rgba(20, 8, 12, 0.55); } [data-v2-velaire] .v2-closing .tf-btn:hover { background: #ffffff; background-image: none; color: #3a1420; } /* The template's shine sweep is a white gradient — invisible on a white pill, and on hover it reads as a smear. Off for this button only. */ [data-v2-velaire] .v2-closing .animate-btn.tf-btn::after { display: none; } /* THE ITALIC PHRASE STAYS WHOLE. Cormorant sets wider than Urbanist at the same size, so "could be your next / patient." started breaking mid-phrase — the emphasis split across two lines, which is exactly what the emphasis exists to prevent. `nowrap` keeps it together on the wide layout, where the copy column is ~712px and the phrase measures ~380px. Released below 900px, where the band collapses to one column and a phrase that cannot break is a phrase that overflows. */ [data-v2-velaire] .v2-closing em { white-space: nowrap; } @media (max-width: 900px) { [data-v2-velaire] .v2-closing em { white-space: normal; } } /* ============================================================================= THE POST MASTHEAD, THE PROGRESS BAR AND THE RELATED GRID — 25-Sep-2026. Ported from cartgaze.com's post shell (its PR #51 and globals.css, "blog post — template blog-single"), on Velaire's tokens. Renders inside the shell's `.section-page-title` band through BlogPostPage's `hero` slot, so the band's own light-theme colour rules (velaire.css, "LIGHT THEME") already cover the text here: they scope the cream tokens to the band, and everything below reads those tokens rather than a literal. ============================================================================= */ /* ---- the masthead ---------------------------------------------------------- Centred when there is no plate; two columns when there is, copy left and the plate right, so the masthead spends the width the centred layout left empty on both sides. 1.05fr / 0.95fr, cartgaze.com's split, which keeps the h1 a shade wider than the picture. Left-aligned inside the split: a centred headline beside a picture reads as two things that happen to be adjacent. */ [data-v2-velaire] .vh-post-hero { max-width: 62rem; margin: 0 auto; } [data-v2-velaire] .vh-post-hero--art { max-width: none; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.25rem; align-items: center; text-align: left; } [data-v2-velaire] .vh-post-hero--art .page-title { margin-inline: 0; max-width: none; } /* Post titles run 55-70 characters, where the template's flat headline size is a wall. Clamped, they land on two lines at every width. */ [data-v2-velaire] .vh-post-hero .page-title { font-size: clamp(2.05rem, 3.4vw, 3.3rem); line-height: 1.09; letter-spacing: -0.02em; text-wrap: balance; } [data-v2-velaire] .vh-post-hero__lede { margin: 1.1rem 0 0; max-width: 62ch; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.55; color: var(--vh-cream-dim, #ddbdc4); } [data-v2-velaire] .vh-post-hero:not(.vh-post-hero--art) .vh-post-hero__lede { margin-inline: auto; } /* The meta row: author, date, reading time. Mono, small, the same setting the folios and kickers use, so it reads as apparatus and not as a fourth line of copy. Gold icons at 15px, one per item. */ [data-v2-velaire] .vh-post-hero__meta { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; font-family: var(--vh-font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vh-cream-dim, #ddbdc4); } [data-v2-velaire] .vh-post-hero:not(.vh-post-hero--art) .vh-post-hero__meta { justify-content: center; } [data-v2-velaire] .vh-post-hero__meta li { display: inline-flex; align-items: center; gap: 0.5rem; } [data-v2-velaire] .vh-post-hero__meta svg { color: var(--vh-gold-300, #e0bf8a); flex: 0 0 auto; } /* The plate. It paints its own porcelain ground, so on the wine band it is a bright card: rounded, hairlined, and dimmed a step so it sits with the band rather than glaring out of it (cartgaze.com's `.dark .hero-cover-art img` values). `max-width: 100%` is restated because the template resets img widths in more than one place. */ [data-v2-velaire] .vh-post-hero__art { margin: 0; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(232, 201, 141, 0.28); box-shadow: 0 24px 48px -28px rgba(20, 8, 12, 0.7); } [data-v2-velaire] .vh-post-hero__art img { display: block; width: 100%; max-width: 100%; height: auto; filter: brightness(0.94) saturate(0.96); } @media (max-width: 991px) { /* One column below lg: the plate would be too narrow to resolve beside the type. It goes under the copy, capped so a phone does not scroll a screen of diagram before the first paragraph. */ [data-v2-velaire] .vh-post-hero--art { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; } [data-v2-velaire] .vh-post-hero--art .vh-post-hero__lede { margin-inline: auto; } [data-v2-velaire] .vh-post-hero--art .vh-post-hero__meta { justify-content: center; } [data-v2-velaire] .vh-post-hero__art { max-width: 420px; margin: 0 auto; } } /* ---- the reading-progress bar --------------------------------------------- 3px, pinned above the fixed nav, gold. Moves with `transform: scaleX` from a passive scroll listener (reading-progress.tsx), so a scroll never triggers layout. Above the header's z-index, which the template sets at 999. */ [data-v2-velaire] .vh-reading-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1001; pointer-events: none; } [data-v2-velaire] .vh-reading-progress__bar { height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #c9a668, #e8c98d); } @media (prefers-reduced-motion: reduce) { [data-v2-velaire] .vh-reading-progress__bar { transition: none; } } /* ---- the related grid ------------------------------------------------------ Six stacked cards, three across from lg. The plates are 4:3, so the card image keeps that ratio rather than the template's 426x307 crop, and every card in a row lands its title at the same height. */ [data-v2-velaire] .vh-related .article-blog .blog-image img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; } [data-v2-velaire] .vh-related > [class*="col-"] { margin-bottom: 24px; } /* ---- the outline button on paper, in the DARK theme ------------------------- `.tf-btn-2` takes `color: var(--primary)` from the template, and `.blog-white` remaps `--primary` to ink so the article reads on paper. Net effect in the dark theme: ink text on a wine pill, and every "Read more" in the related grid and the guide callout's "Read the guide" drew as an empty pill. The light theme has carried an explicit fix since 16-Sep (velaire.css, "5. THE SECONDARY PILL"); the dark theme never got one, because the callout's single button was easy to miss and the grid that made it six was added 25-Sep. Measured: the computed colour was rgb(32,26,29) in both themes, and only the light rule was rescuing it. Same literal the light rule uses. (0,3,0), so it beats the template's (0,1,0) and this file's own (0,2,0) outline rule. */ [data-v2-velaire] .blog-white .tf-btn-2 { color: #efe3e4; } /* ---- the market that is not open yet ---------------------------------------- Australia in the footer switcher is an with no href since 26-Sep, so it takes the template's pill like its four neighbours (it was a , and the pill is written on `.tf-social-1 a`, so it rendered as a bare badge). Dimmed rather than hidden, the same 0.72 the light theme already used for it; wine keeps 0.55, which was chosen against wine at 0.4 and read as absent in light. No hover colour and no pointer: it is not a link. */ [data-v2-velaire] .tf-social-1 a.v2-market-off { opacity: 0.55; cursor: default; pointer-events: none; } [data-v2-velaire][data-theme="light"] .tf-social-1 a.v2-market-off { opacity: 0.72; } /* ---- keyboard focus --------------------------------------------------------- 27-Sep-2026. No link on v2 showed anything when the keyboard reached it. The template's `a:focus, a:hover { outline: 0 }` (styles.css) is (0,1,1) and beats the site's own `:focus-visible` ring at (0,1,0); buttons fell back to that ring, which is wine #672b3e and vanishes on the wine ground. THE RING IS THE ELEMENT'S OWN TEXT COLOUR. The grounds here run from #201a1d to white, and no one colour clears 3:1 against both ends -- the gold that works on wine is 2.2:1 on cream. Text colour is already held to its ground by v2:contrast, so a ring drawn in it, over that same ground, inherits the result in every band, theme and market without a list of grounds to keep. A PILL TAKES IT INSIDE ITS FACE. A button's label colour is chosen for the pill, not for the band around it: ink on gold is 1.5:1 against wine. Inset, the ring sits on the pill, which is what the label is measured against. Outlines leave box-shadow alone, so the pills keep their bevel. `npm run v2:focus` measures every focusable element in both themes. */ [data-v2-velaire] :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } [data-v2-velaire] .tf-btn:focus-visible, [data-v2-velaire] .tf-btn-2:focus-visible, [data-v2-velaire] .vh-ind-btn:focus-visible { outline-offset: -5px; } /* The header's dropdowns open on hover only, so their links sat in a visibility:hidden panel the keyboard skipped: eleven routes unreachable from the nav. The country switcher already had this rule (velaire.css); every dropdown gets it now. */ [data-v2-velaire] .menu-item.has-child:focus-within .sub-menu { pointer-events: all; transform: translateY(0); opacity: 1; visibility: visible; } /* Where the text colour is not the ground's, and why. Each was found by v2:focus, dark theme; the light theme passed on the rule above alone. - The footer's market pills (cream, ink labels, on wine), the back-to-top button (wine, white icon) and the selected workflow tab (gold, ink) are filled controls, so the ring goes inside, like the buttons. The tab only in the wine theme: the light palette remaps gold-400 to #7b592d, so its face darkens to where ink is 2.4:1, while the outer ring is ink on a white panel. - The assistant's launcher and its Send button (gold, ink) likewise. The preview never renders the assistant, so the cutover rehearsal found them. - A dropdown link spans its panel edge to edge, so a ring drawn outside it hangs off the cream panel over the page. Inside, it stays on the panel. - The logo has no text, so its colour is the link default -- cream, on the cream header pill. Ink, the colour of the nav labels beside it. - The slider arrows keep the template's #f5f5f5 face in both themes, and the wine theme's `--secondary` (#ddbdc4) put their chevrons on it at 1.45:1 -- an icon nobody could see, and so a ring nobody could see. The light theme's muted ink instead, 5.9:1 on the face, and the ring inside it. Hover keeps the template's white on the dark skin, hence :not(:hover). */ [data-v2-velaire] .tf-social-1 a:focus-visible, [data-v2-velaire] .group-btn-slider .nav-prev-swiper:focus-visible, [data-v2-velaire] .group-btn-slider .nav-next-swiper:focus-visible, [data-v2-velaire] #goTop:focus-visible, [data-v2-velaire] .vh-assistant-launcher:focus-visible, [data-v2-velaire] .btn-primary:focus-visible, [data-v2-velaire]:not([data-theme="light"]) .v2-workflow-tabs button[aria-selected="true"]:focus-visible { outline-offset: -5px; } /* The checklist tick is `color: transparent` until a question is asked -- that is how its check mark stays hidden -- so its text colour draws no ring at all. Gold-400 is the theme's accent for text on its own ground: #e0bf8a on wine, #7b592d in the light theme. */ [data-v2-velaire] .v2-checklist-tick:focus-visible { outline-color: var(--vh-gold-400, #e0bf8a); } [data-v2-velaire] .sub-menu a:focus-visible { outline-offset: -2px; border-radius: 6px; /* the panel is rounded; a square ring inside it read as unfinished */ } [data-v2-velaire] .header-inner .logo-site:focus-visible { outline-color: #201a1d; } [data-v2-velaire] .group-btn-slider .nav-prev-swiper:not(:hover), [data-v2-velaire] .group-btn-slider .nav-next-swiper:not(:hover) { color: #6d5a62; } /* The sidebar's recent-post titles are a one-line clamp: `overflow: hidden` on an h3 exactly the size of the link inside it, so the link's ring was clipped away on every side -- the only element of 3,642 measured on 62 routes that showed nothing at all. The h3 draws it instead; an element's overflow never clips its own outline, and its colour is the link's in both themes. */ [data-v2-velaire] .relatest-post-item .title:focus-within { outline: 2px solid currentColor; outline-offset: 3px; } /* ---- the Cal.com skeleton ----------------------------------------------------- 27-Sep-2026. The calendar-shaped placeholder that holds the booking card while Cal.com loads is painted in `--paper-alt`, the live site's card tone, and on the v2 card that is the card itself. So for up to 8 seconds -- 20 when Cal.com is blocked -- every booking band on v2 showed an empty 920x642 slab, which is what the 27-Sep audit saw. Cream at low alpha on the wine card; ink at low alpha on the white card the light theme gives it. */ [data-v2-velaire] .cal-skeleton span, [data-v2-velaire] .cal-skeleton i, [data-v2-velaire] .cal-skeleton-foot { background: rgba(239, 227, 228, 0.1); } [data-v2-velaire][data-theme="light"] .cal-skeleton span, [data-v2-velaire][data-theme="light"] .cal-skeleton i, [data-v2-velaire][data-theme="light"] .cal-skeleton-foot { background: rgba(32, 26, 29, 0.07); } /* The mobile menu's logo is the header's mark since 27-Sep-2026 (the template's icon-font glyph did not exist here and drew at 0x0). 40px, the size the template gave its glyph, so the menu's head row keeps its height. */ [data-v2-velaire] .canvas_head .logo-site img { display: block; width: 40px; height: 40px; } /* The mobile menu's links sit in `li`s with `overflow: hidden` (the collapse groups need it), which clipped an outside ring to its bottom edge: a line, not a ring. Inside the link box, like the desktop dropdown links. Not covered by v2:focus, which measures at 1400px; checked by hand at 390px, both themes. */ [data-v2-velaire] .mb-menu-link:focus-visible, [data-v2-velaire] .sub-nav-link:focus-visible { outline-offset: -2px; border-radius: 6px; } /* ---- the homepage contact card -------------------------------------------------- 27-Sep-2026. The template's form here submitted nowhere; it is a heading, one line and a link to /demo's form now (html-to-jsx.mjs, contactFormToDemoLink). The line takes muted ink explicitly: `.text-secondary` is the wine theme's #ddbdc4, which on this cream card would be 1.4:1. */ [data-v2-velaire] .v2-contact-cta .v2-contact-cta-note { margin: 0 0 28px; color: var(--vh-ink-muted, #6d5a62); } /* The mobile menu's close control is a