/* components.css -- the look of everything the six v2 landing pages SHARE (header, footer, buttons, booking card + sheet, FAQ, stories, app promo, timings, photo, action bar, section heading). Shared owner: backend-migrations #1 (per-file grant). Load order (base.html): fonts/fonts.css, tokens.css (backend-api: the tokens, the accents, and the hidden / visible STATES motion.js toggles), THIS file, then the kind stylesheet (-.css) which only adds its own sections. Rules: no @import, no web font, no url() to another host (CSP: same origin). Classes with the prefix v- belong to a shared partial and are not restyled by kind CSS; the short names (wrap, sec, btn, ic, eyebrow, ph, tt, fld, inp, status) are the shared vocabulary every kind page may use. Variant A (Classic) is the base; variant B (Modern) only overrides through html[data-variant="b"]. Tokens: ONLY the names tokens.css defines (--ink --body --muted --line --soft --accent --accent-ink --accent-soft --accent-2 --accent-2-ink --wa --wa-ink --r1..3 --sh1..3 --f-head --f-body --f-serif --ease --header-h --header-h-c --z-*). base.html sets --accent / --accent-ink / --accent-soft on from v.theme. State classes (tokens.css + motion.js own the hidden / visible STATES; this file only draws them): [data-header].is-condensed [data-actionbar].is-shown (hidden by tokens.css under html.js until then) #v-mnav.is-open [data-sheet].is-open + [data-sheet-overlay].is-open .v-nav a.is-active (data-spy) tr[data-today].is-today [data-snap] controls + dots .v-steps li.is-on / .is-done and .v-toast.is-shown (booking.js) The page is complete and usable when none of them ever appears. Reveal / stagger ([data-reveal]) is tokens.css's: nothing here hides content. */ /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } html.rm { scroll-behavior: auto; } body { margin: 0; font: 400 16px/1.6 var(--f-body); color: var(--body); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } button { font: inherit; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .2s; } .skip:focus { top: 12px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ic.sm { width: 18px; height: 18px; } .ic.lg { width: 32px; height: 32px; } .chip-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; border: 1px solid rgb(15 23 42 / .05); } .chip-ic .ic { width: 22px; height: 22px; } /* ---------- layout + section heading ---------- */ .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; } .sec { padding: 56px 0; } .band-soft { background: var(--soft); } .band-tint { background: var(--accent-soft); } .eyebrow { font: 700 12.5px/1.2 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2-ink); } .sec-t { font: 600 28px/1.15 var(--f-serif); color: var(--ink); letter-spacing: -.005em; } .sec-head { text-align: center; max-width: 640px; margin: 0 auto 32px; } .sec-head .eyebrow { margin-bottom: 12px; } .sec-lede { margin-top: 12px; color: var(--muted); } .sec-head .sec-t::after { content: ""; display: block; width: 48px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); margin: 14px auto 0; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 14px; font: 700 15.5px/1 var(--f-head); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s; white-space: nowrap; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgb(15 23 42 / .14); } .btn-primary:hover { background: var(--accent-ink); } .btn-ghost { background: #fff; color: var(--accent-ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--accent); } .btn-wa { background: var(--wa); color: #fff; } .btn-wa:hover { background: var(--wa-ink); } .btn-block { width: 100%; } .btn .ic.lg { width: 28px; height: 28px; } .btn-wa > span { display: flex; flex-direction: column; gap: 3px; text-align: left; } .btn-wa > span b { font: 800 16px/1 var(--f-head); } .link { display: inline-flex; align-items: center; gap: 8px; font: 700 15.5px var(--f-head); color: var(--accent-ink); text-decoration: none; min-height: 44px; } .link:hover { text-decoration: underline; } /* ---------- open-now pill ---------- */ .status { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px 7px 12px; box-shadow: var(--sh1); font: 700 13.5px/1 var(--f-head); color: var(--ink); } .dot { width: 9px; height: 9px; border-radius: 50%; background: #94A3B8; flex: none; } .status.open .dot { background: #16A34A; box-shadow: 0 0 0 4px rgb(22 163 74 / .18); } .status.open b { color: #166534; } /* ---------- photo + its designed fallback ---------- */ .ph { position: relative; display: block; overflow: hidden; background: linear-gradient(150deg, var(--accent-soft), #fff 78%); } .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; } .ph > .ph-ic { position: absolute; left: 50%; top: 50%; width: 30%; height: auto; max-width: 96px; aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--accent); opacity: .35; stroke-width: 1.25; } .ph[data-ratio="1/1"] { aspect-ratio: 1/1; } .ph[data-ratio="4/5"] { aspect-ratio: 4/5; } .ph[data-ratio="5/4"] { aspect-ratio: 5/4; } .ph[data-ratio="3/4"] { aspect-ratio: 3/4; } .ph[data-ratio="4/3"] { aspect-ratio: 4/3; } .ph[data-ratio="3/2"] { aspect-ratio: 3/2; } .ph[data-ratio="16/9"] { aspect-ratio: 16/9; } .ph[data-ratio="2/1"] { aspect-ratio: 2/1; } /* ---------- header ---------- */ .v-hd { position: sticky; top: 0; z-index: var(--z-header, 50); background: rgb(255 255 255 / .92); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s, background .25s; } .v-hd.is-condensed { border-color: var(--line); box-shadow: 0 6px 20px rgb(15 23 42 / .06); background: rgb(255 255 255 / .97); } .v-hd-in { display: flex; align-items: center; gap: 8px; height: var(--header-h, 72px); transition: height .25s; } .v-hd.is-condensed .v-hd-in { height: var(--header-h-c, 60px); } .v-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; flex: 1; } .v-logo { width: 40px; height: 40px; border-radius: 12px; flex: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: grid; place-items: center; object-fit: cover; transition: width .25s, height .25s; } .v-logo .ic { width: 22px; height: 22px; } img.v-logo { background: #fff; border: 1px solid var(--line); } .v-hd.is-condensed .v-logo { width: 34px; height: 34px; } .v-bt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .v-bt b { font: 800 16.5px/1.2 var(--f-head); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-bt .deg { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-nav { display: none; } .v-hd-cta { display: flex; align-items: center; gap: 6px; flex: none; } .v-hd-call, .v-hd-wa, .v-hd-wa span, .v-hd-book .lg { display: none; } .v-hd-wa { min-width: 44px; min-height: 44px; padding: 0 12px; } .v-hd-book { min-height: 44px; padding: 0 14px; font-size: 14.5px; } .v-menu-btn { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; } .v-menu-btn .x, .v-menu-btn[aria-expanded="true"] .m { display: none; } .v-menu-btn[aria-expanded="true"] .x { display: block; } .v-mnav { border-top: 1px solid var(--line); background: #fff; padding: 6px 20px 14px; box-shadow: var(--sh2); } .v-mnav a { display: flex; align-items: center; gap: 10px; min-height: 48px; font: 600 16px var(--f-body); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } .v-mnav a:last-child { border: 0; color: var(--accent-ink); } .js .v-mnav:not(.is-open) { display: none; } html:not(.js) .v-menu-btn { display: none; } /* no script: no button; the links are simply listed under the bar */ html:not(.js) .v-mnav { display: flex; flex-wrap: wrap; gap: 0 20px; padding: 2px 20px; box-shadow: none; } html:not(.js) .v-mnav a { border: 0; min-height: 40px; } /* the provider's login (shared/_login_link.html; the footer keeps its small link): a quiet ghost button at the right of the bar from 1100 px up (icon alone to 1279 px, icon + words from there), the last row of the phone menu under that. Always lighter than Book (and than Call / WhatsApp): smaller, unfilled, the neutral border and the body ink. Without script the menu is a plain list and the row is one more link in it. */ .v-login-hd { display: none; } .v-mnav a:has(+ .v-login-mn) { color: var(--accent-ink); border: 0; } /* the row above it (Call) stays the accent row it was when it came last */ .v-mnav a.v-login-mn { color: var(--body); } .js .v-mnav a.v-login-mn { margin-top: 12px; justify-content: center; min-height: 46px; border: 1.5px solid var(--line); border-radius: 12px; font: 600 15px var(--f-body); } .v-login-mn .ic { color: var(--muted); } /* ---------- the booking card, the sheet and the form inside both ---------- The margins of the paragraphs and the list in the form (.v-steps, .v-fee, .v-slot-note, .v-pick, .v-bk-err) are scoped to .v-bk-form: a kind stylesheet resets margins inside its own wrapper (the doctor's `.dr :where(h1,h2,h3,p,ul,ol){margin:0}`) with ONE class, the same specificity as a bare `.v-steps`, and it loads later -- so it won and the step row touched the first label (QA D4) and the fee box touched the button. Two classes outrank it whatever the file order; test_v2_templates checks both the selectors and the real kind stylesheets. */ .v-bk-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--sh3); padding: 16px 18px 14px; position: relative; overflow: hidden; } .v-bk-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .v-bk-head { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; } .v-bk-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; } .v-bk-head h2 { font: 800 20px/1.15 var(--f-head); color: var(--ink); } .v-bk-head p { margin-top: 1px; font-size: 13px; line-height: 1.3; color: var(--muted); } .v-bk-form .v-steps { display: flex; gap: 6px; margin: 0 0 16px; } .v-steps li { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--f-body); color: var(--muted); white-space: nowrap; } .v-steps i { width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--muted); display: grid; place-items: center; font: 700 11px/1 var(--f-head); font-style: normal; flex: none; transition: background .25s, color .25s; } .v-steps li.is-on { color: var(--accent-ink); } .v-steps li.is-on i { background: var(--accent); color: #fff; } .v-steps li.is-done { color: var(--accent-2-ink); } .v-steps li.is-done i { background: var(--accent-2-ink); color: #fff; } .fld { display: block; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; } .lbl { display: block; font: 600 13px/1.2 var(--f-body); color: var(--ink); margin-bottom: 6px; padding: 0; } .lbl small { color: var(--muted); font-weight: 500; } .inp { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted); transition: border-color .2s, box-shadow .2s; } .inp:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } .inp.bad { border-color: #DC2626; } .inp input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px/1.2 var(--f-body); color: var(--ink); height: 44px; } .inp input::placeholder { color: #5B6B82; } .cc { font: 600 15px var(--f-body); color: var(--ink); padding-right: 8px; border-right: 1px solid var(--line); } .err { display: block; color: #B91C1C; font-size: 12.5px; margin-top: 4px; } .err:empty { display: none; } .v-bk-form { container-type: inline-size; } .v-two { display: grid; gap: 0 12px; } .v-radios { display: flex; flex-wrap: wrap; gap: 8px; } .v-radios label { position: relative; } .v-radios input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .v-radios span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: 600 14px var(--f-body); color: var(--ink); } .v-radios input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; } .v-radios input:focus-visible + span { outline: 3px solid var(--accent-2); outline-offset: 2px; } .v-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: thin; scroll-snap-type: x proximity; } .v-chip { position: relative; flex: none; scroll-snap-align: start; } .v-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .v-dchip { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px 8px 8px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; } .v-dchip .ph { width: 36px; height: 36px; border-radius: 50%; flex: none; } .v-dchip-t { display: flex; flex-direction: column; line-height: 1.25; } .v-dchip-t b { font: 700 14px var(--f-head); color: var(--ink); white-space: nowrap; } .v-dchip-t small { font-size: 12px; color: var(--muted); white-space: nowrap; } .v-chip input:checked + .v-dchip { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .v-chip input:focus-visible + .v-dchip { outline: 3px solid var(--accent-2); outline-offset: 2px; } .v-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: thin; scroll-snap-type: x proximity; } .v-day { flex: 1 0 58px; min-height: 68px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; scroll-snap-align: start; color: var(--body); padding: 6px 0; font-family: var(--f-body); } .v-day small { font-size: 11.5px; font-weight: 600; color: var(--muted); } .v-day b { font: 800 19px/1 var(--f-head); color: var(--ink); } .v-day[aria-checked="true"] { background: var(--accent); border-color: var(--accent); } .v-day[aria-checked="true"] * { color: #fff; } .v-day:disabled { opacity: .55; cursor: not-allowed; background: var(--soft); } .v-seg { display: inline-flex; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin-bottom: 10px; gap: 2px; } .v-seg button { border: 0; background: transparent; border-radius: 9px; min-height: 44px; padding: 0 16px; font: 600 13.5px var(--f-body); color: var(--muted); cursor: pointer; } .v-seg button[aria-selected="true"] { background: #fff; color: var(--accent-ink); box-shadow: var(--sh1); } .v-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .v-slot { min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: 600 13px var(--f-body); color: var(--ink); cursor: pointer; padding: 0 2px; transition: background .15s, border-color .15s; } .v-slot:hover:not(:disabled) { border-color: var(--accent); } .v-slot[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } .v-slot:disabled { text-decoration: line-through; color: #94A3B8; background: var(--soft); cursor: not-allowed; } .v-bk-form .v-slot-note { font-size: 13px; color: var(--muted); margin-top: 8px; } .v-slot-note:empty { display: none; } .v-bk-form .v-slot-note.bad { color: #B91C1C; } .v-bk-form .v-pick { font-size: 13.5px; font-weight: 600; color: var(--accent-ink); margin-top: 8px; } .v-pick:empty { display: none; } .v-bk-form .v-fee { display: flex; gap: 10px; align-items: flex-start; background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; margin: 6px 0 14px; color: var(--body); } .v-fee .ic { color: var(--accent); margin-top: 1px; } .v-fee b { color: var(--ink); } .v-reason { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, #fff); border-radius: 12px; padding: 8px 6px 8px 14px; margin: 0 0 14px; } .v-reason-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .v-reason-t small { font-size: 12px; color: var(--muted); font-weight: 600; } .v-reason-t b { font: 700 14.5px/1.25 var(--f-head); color: var(--ink); overflow-wrap: anywhere; } .v-reason-x { width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: var(--accent-ink); border-radius: 10px; display: grid; place-items: center; cursor: pointer; } .v-reason-x:hover { background: #fff; } .v-bk-form .v-bk-err { color: #B91C1C; font-size: 13.5px; margin: 0 0 10px; } .v-bk-err:empty { display: none; } .v-booked { margin-top: 14px; padding: 16px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); } .v-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; font: 600 11.5px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .v-or::before, .v-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* the stepped card: ONE step at a time (20 Oct 2026). _booking_form.html prints the inline card as three panels (1 Your details, 2 Day & time, 3 Confirm) and serves data-step="1" on its form; booking.js marks the form [data-stepped] (enableSteps), moves data-step (1|2|3) and puts `inert` on the panels that are not open. The step layout is keyed on html.js AND [data-stepped] -- never on the served data-step alone (security F2): a page whose booking.js never runs (a 404, a content blocker, no ES modules) shows the flat one-page form, every field and the fee line, as it always did; without html.js (no script, or motion.js failed) and in the sheet (no data-step) it is the flat form too. For the first moments the flat form is clamped to about the height of the stepped card, so the page does not jump when booking.js arrives; a CSS-only timer (a zero-length animation after 3 s) lifts the clamp for good. The panels share ONE grid cell, so the card is as high as its tallest step and does not jump when the step changes. The margins on the stepper, the fee line and the slot note keep two classes (a kind stylesheet's `margin: 0` reset outranks one: test_v2_templates). FIT (21 Oct 2026, review rb_zpoipfyz p1: "make the card hight litle bit small so that it fit with the leptop window"): the card was 608 px, so on a 1366x768 / 1280x720 screen (about 630 px of page under the browser bar, the card starts at 113 under the 73 px top bar) its WhatsApp button was below the fold. It is now 497 px on every step, 517 with the three error lines of an empty step 1, so the whole card and its Next button are in view (tools/v2_card_fit.mjs measures it in a real Chrome). By tightening, not cutting: card padding, header, stepper, the gaps between fields, fields 44 px (a 40 px input in a 44 px box), the gender chips share ONE row with the age box (from a 290 px form), a day tile 46 px and the day strip fits 7 days of a 364 px form, the summary rows, the divider and the WhatsApp button. Every tap target stays 44 px or more, except the laptop's time tabs (36) and times (40): a screen under 1024 px and a coarse pointer get 44 back (the touch block below). The form is 416 px tall, which is the clamp's 26rem. */ html.js .v-bk-form[data-step]:not([data-stepped]) { max-height: 26rem; overflow: hidden; animation: v-unclamp 0s linear 3s forwards; } @keyframes v-unclamp { to { max-height: none; overflow: visible; } } html.js .v-bk-form[data-stepped] .v-panels { display: grid; } html.js .v-bk-form[data-stepped] .v-panel { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; visibility: hidden; opacity: 0; transform: translateX(12px); pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; } html.js .v-bk-form[data-stepped][data-step="1"] .v-panel[data-step-panel="1"], html.js .v-bk-form[data-stepped][data-step="2"] .v-panel[data-step-panel="2"], html.js .v-bk-form[data-stepped][data-step="3"] .v-panel[data-step-panel="3"] { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .2s var(--ease), transform .2s var(--ease); } html.js .v-bk-form[data-stepped] .v-panel:focus { outline: none; } html.js .v-bk-form[data-stepped] .v-bk-nav { display: flex; gap: 10px; margin-top: auto; padding-top: 2px; min-height: 48px; } /* the buttons are served hidden and shown by the script: their room (2 + a 46 px .btn) is kept, the card does not grow when booking.js arrives */ html.js .v-bk-form[data-stepped] .v-bk-nav .btn { flex: 1 1 0; min-width: 0; min-height: 46px; } html.js .v-bk-form[data-stepped] .v-bk-nav .btn-ghost { flex: 0 0 auto; padding: 0 18px; } html.js .v-bk-form[data-stepped] .v-steps { position: relative; padding-bottom: 8px; margin-bottom: 8px; } html.js .v-bk-form[data-stepped] .v-steps i { width: 20px; height: 20px; } html.js .v-bk-form[data-stepped] .v-steps::before, html.js .v-bk-form[data-stepped] .v-steps::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; } html.js .v-bk-form[data-stepped] .v-steps::before { right: 0; background: var(--line); } html.js .v-bk-form[data-stepped] .v-steps::after { width: 33.333%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s var(--ease); } html.js .v-bk-form[data-stepped][data-step="2"] .v-steps::after { width: 66.667%; } html.js .v-bk-form[data-stepped][data-step="3"] .v-steps::after { width: 100%; } html.js .v-bk-form[data-stepped] .fld { margin-bottom: 10px; } html.js .v-bk-form[data-stepped] .lbl { margin-bottom: 4px; } html.js .v-bk-form[data-stepped] .inp { min-height: 44px; } html.js .v-bk-form[data-stepped] .inp input { height: 40px; } html.js .v-bk-form[data-stepped] .err { margin-top: 3px; font-size: 13px; line-height: 1.2; } html.js .v-bk-form[data-stepped] .v-radios { flex-wrap: nowrap; gap: 6px; } html.js .v-bk-form[data-stepped] .v-radios label { flex: 1 1 0; min-width: 0; } html.js .v-bk-form[data-stepped] .v-radios span { display: flex; justify-content: center; padding: 0 4px; font-size: 13.5px; } html.js .v-bk-form[data-stepped] .v-reason { margin: 0 0 10px; padding: 0 2px 0 12px; border-radius: 10px; } html.js .v-bk-form[data-stepped] .v-reason-t { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding: 6px 0; } html.js .v-bk-form[data-stepped] .v-reason-x { width: 36px; height: 36px; } html.js .v-bk-form[data-stepped] .v-days { min-height: 50px; gap: 6px; padding-bottom: 2px; } /* the day strip is filled by the script: its room is kept, so the card does not grow when the times arrive */ html.js .v-bk-form[data-stepped] .v-day { flex-basis: 44px; min-height: 46px; padding: 4px 0; } html.js .v-bk-form[data-stepped] .v-timefld { margin-bottom: 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; } html.js .v-bk-form[data-stepped] .v-timefld .lbl { margin: 0; } html.js .v-bk-form[data-stepped] .v-timefld .v-seg { margin: 0; } html.js .v-bk-form[data-stepped] .v-timefld .v-slots, html.js .v-bk-form[data-stepped] .v-timefld .v-slot-note { grid-column: 1 / -1; } html.js .v-bk-form[data-stepped] .v-timefld .v-slots { grid-row: 2; } html.js .v-bk-form[data-stepped] .v-slots { margin: 6px -2px 0; padding: 2px; height: 108px; overflow-y: auto; align-content: start; overscroll-behavior: contain; scrollbar-width: thin; } /* a fixed window, two rows and the top edge of the third (it says "scroll", no cut text): the card is as high with 3 times as with 30 */ html.js .v-bk-form[data-stepped] .v-timefld .v-slots:empty + .v-slot-note { grid-row: 2; align-self: start; } /* no times (loading, none, error): the sentence sits in the empty window, the card does not shrink */ html.js .v-bk-form[data-stepped] .v-fee { margin: 0 0 10px; padding: 10px 12px; line-height: 1.4; } html.js .v-bk-form[data-stepped] .v-sum { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; margin: 0 0 10px; background: #fff; } html.js .v-bk-form[data-stepped] .v-sum-r { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); } html.js .v-bk-form[data-stepped] .v-sum-r:last-child { border-bottom: 0; } html.js .v-bk-form[data-stepped] .v-sum-r b { color: var(--ink); font: 700 14.5px/1.3 var(--f-head); text-align: right; overflow-wrap: anywhere; } html.js .v-bk-form[data-stepped] .v-or { margin: 9px 0 8px; } html.js .v-bk-form[data-stepped] .btn-wa { min-height: 44px; } html.js .v-bk-form[data-stepped] .v-seg button { min-height: 36px; } html.js .v-bk-form[data-stepped] .v-slot { min-height: 40px; } @media (max-width: 1023px), (pointer: coarse) { /* the time tabs and the times are 36 / 40 px so the card fits a 630 px laptop window; a phone, a tablet and a touch screen keep every tap target at 44 px */ html.js .v-bk-form[data-stepped] .v-seg button { min-height: 44px; } html.js .v-bk-form[data-stepped] .v-slot { min-height: 44px; } html.js .v-bk-form[data-stepped] .v-slots { height: 112px; } } @container (min-width: 290px) and (max-width: 519px) { /* the laptop card and the phone: the three gender chips and the age box share ONE row (a 320 px phone, under 290 px, and a card of 520 px and more keep their own layout) */ html.js .v-bk-form[data-stepped] .v-two + .v-two { grid-template-columns: minmax(0, 1fr) 92px; column-gap: 10px; } } @container (min-width: 520px) { html.js .v-bk-form[data-stepped] .v-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.js .v-bk-form[data-stepped] .v-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* the sheet: a bottom sheet under 900px, a centred modal from 900px. motion.js owns open / closed (.is-open, inert, visibility, focus, scroll lock); the closed look and its transition live on the BASE selector so the slide-out plays. Without JS tokens.css removes the sheet and its overlay. */ .v-ov { position: fixed; inset: 0; z-index: var(--z-overlay, 80); background: rgb(15 23 42 / .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .3s var(--ease); } .v-sheet { position: fixed; z-index: var(--z-sheet, 90); left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -16px 48px rgb(15 23 42 / .22); padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); opacity: 0; transition: transform .32s var(--ease), opacity .32s var(--ease); } .v-sheet.is-open { transform: none; opacity: 1; } .v-sheet:focus { outline: none; } .v-grab { width: 44px; height: 5px; border-radius: 99px; background: var(--line); margin: 4px auto 10px; } .v-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .v-sheet-h h2 { font: 800 22px/1.15 var(--f-head); color: var(--ink); } .v-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); display: grid; place-items: center; cursor: pointer; } .v-x:hover { background: var(--line); } .v-toast { position: absolute; left: 20px; right: 20px; bottom: 12px; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; font: 500 14px/1.4 var(--f-body); opacity: 0; pointer-events: none; transition: opacity .3s; } .v-toast.is-shown { opacity: 1; } /* ---------- timings ---------- */ .v-tm-open { margin: 0 0 12px; } .tt { width: 100%; border-collapse: separate; border-spacing: 0 4px; } .tt th, .tt td { padding: 11px 12px; text-align: left; font-size: 15px; vertical-align: middle; } .tt th { font: 700 15px var(--f-head); color: var(--ink); width: 42%; } .tt td span { display: block; } .tt td small { color: var(--muted); font-weight: 500; } .tt .off { color: var(--muted); } .tt tr.is-today th, .tt tr.is-today td { background: var(--accent-soft); } .tt tr.is-today th { border-radius: 12px 0 0 12px; box-shadow: inset 4px 0 0 var(--accent); } .tt tr.is-today td { border-radius: 0 12px 12px 0; color: var(--ink); font-weight: 600; } .v-tm-short { display: none; } .v-tm-compact .v-tm-sum li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; } .v-tm-compact .v-tm-sum b { color: var(--ink); font-weight: 600; text-align: right; } .v-tm-compact .v-tm-sum b.off { color: var(--muted); font-weight: 500; } /* ---------- FAQ ---------- */ .v-faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); margin-bottom: 12px; overflow: hidden; transition: box-shadow .25s, border-color .25s; } .v-faq details[open] { box-shadow: var(--sh2); border-color: var(--accent); } .v-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 18px; font: 700 16.5px/1.3 var(--f-head); color: var(--ink); } .v-faq summary::-webkit-details-marker { display: none; } .v-faq summary .ic { color: var(--accent); transition: transform .3s; } .v-faq details[open] summary .ic { transform: rotate(45deg); } .v-faq details p { padding: 0 18px 18px; color: var(--body); } /* ---------- stories (reviews carousel) ---------- */ .v-rv { position: relative; } .v-rv-nav { display: flex; gap: 8px; justify-content: flex-end; margin: -8px 0 14px; } .v-rv-nav:not(:has(button:not([hidden]))) { display: none; } .v-rv-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; } .v-rv-nav button:hover { border-color: var(--accent); background: var(--accent-soft); } .v-rv-track { display: flex; gap: 16px; padding: 4px 2px 12px; } .v-story { flex: 0 0 86%; background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: 24px; box-shadow: var(--sh1); display: flex; flex-direction: column; gap: 14px; } .v-story .q { width: 34px; height: 34px; color: var(--accent); opacity: .25; fill: currentColor; stroke: none; } .stars { display: flex; gap: 2px; color: #D97706; } .stars .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; } .stars .ic.off { color: #CBD5E1; } .v-story blockquote { flex: 1; } .v-story p { font-size: 16px; line-height: 1.6; color: var(--ink); } .v-story .who { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); } .v-story .who i { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font: 800 14px var(--f-head); font-style: normal; } .v-dots { display: flex; justify-content: center; gap: 4px; margin-top: 6px; } .v-dots:empty { display: none; } .v-dots button { width: 44px; height: 28px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; } .v-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: #CBD5E1; transition: width .25s, background .25s; } .v-dots button[aria-current="true"]::before { width: 24px; background: var(--accent); } /* ---------- app promo ---------- */ .v-app { display: grid; gap: 24px; background: linear-gradient(135deg, var(--accent-soft), #fff 75%); border: 1px solid var(--line); border-radius: var(--r3); padding: 24px 20px; overflow: hidden; } /* the app screen as a card: no device frame, no tilt, the tokens' radius and a soft shadow */ .v-phone { width: 236px; margin: 0 auto; border-radius: var(--r3); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh2); overflow: hidden; } .v-scr { background: #fff; padding-bottom: 4px; } .v-scr-top { background: linear-gradient(160deg, var(--accent), var(--accent-ink)); color: #fff; padding: 12px 14px 10px; font: 800 15px var(--f-head); display: flex; align-items: center; gap: 8px; } .v-scr-top .ic { width: 22px; height: 22px; } .v-scr-top small { display: block; font: 500 11px var(--f-body); opacity: .9; } .v-rx { background: #fff; margin: 8px 12px; border-radius: 12px; padding: 8px 12px; border: 1px solid var(--line); font-size: 11px; color: var(--muted); line-height: 1.35; } .v-rx b { display: block; font: 700 12.5px var(--f-head); color: var(--ink); } .v-rx i { display: inline-block; margin-top: 4px; font-style: normal; font-weight: 600; font-size: 10px; background: var(--accent-soft); color: var(--accent-ink); padding: 2px 8px; border-radius: 99px; } .v-app-body .sec-t { font-size: 26px; margin: 10px 0 10px; } .v-app .v-app-feats { display: grid; gap: 12px; margin: 20px 0; } /* scoped like the form's margins: a kind reset of ul must not close the gap */ .v-app-feats li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); } .v-badges { display: flex; flex-wrap: wrap; gap: 12px; } .badge { display: inline-flex; align-items: center; gap: 8px; background: #0F172A; color: #fff; border-radius: 12px; padding: 8px 12px 8px 10px; min-height: 48px; text-decoration: none; border: 1px solid #334155; } .badge svg { width: 24px; height: 24px; fill: #fff; } .badge small { display: block; font: 500 10px/1 var(--f-body); letter-spacing: .04em; } .badge b { display: block; font: 700 15.5px/1.1 var(--f-head); } /* ---------- footer ---------- */ .v-ft { background: var(--accent-ink); color: #E2E8F0; padding: 48px 0 84px; } .v-ft-grid { display: grid; gap: 28px; } .v-ft-col { display: flex; gap: 14px; } .v-ft-ic { width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; display: grid; place-items: center; flex: none; } .v-ft h3 { font: 800 15px var(--f-head); color: #fff; margin-bottom: 6px; } .v-ft p, .v-ft a { font-size: 14.5px; line-height: 1.55; color: rgb(255 255 255 / .86); } .v-ft a { text-decoration: none; display: block; } .v-ft a:hover { text-decoration: underline; color: #fff; } .v-ft .v-ft-note { color: rgb(255 255 255 / .7); font-size: 13.5px; } .v-ft-social { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; } .v-ft-social a { display: inline; text-decoration: underline; } .v-sos { font-size: 13px; color: rgb(255 255 255 / .8); margin-top: 24px; } .v-sos + .v-sos { margin-top: 6px; } .v-ft-bar { margin-top: 28px; border-top: 1px solid rgb(255 255 255 / .16); padding: 16px 0; display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; justify-content: space-between; font-size: 13px; color: rgb(255 255 255 / .8); } .v-ft-bar a { display: inline; font-size: 13px; padding: 12px 0; text-decoration: underline; } .v-ft-bar b { color: #fff; } /* ---------- the sticky action bar (mobile): tokens.css keeps [data-actionbar] off screen under html.js until motion.js adds .is-shown ---------- */ .v-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar, 60); display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgb(15 23 42 / .08); } .v-bar .btn { flex: 1 1 0; min-height: 48px; padding: 0 8px; font-size: 14.5px; gap: 6px; } .v-bar .btn-ghost { flex: .8 1 0; } /* ---------- variant B (Modern): the same markup, a lighter hand ---------- */ html[data-variant="b"] .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--f-body); letter-spacing: .08em; color: var(--accent); } html[data-variant="b"] .eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--accent-2); } html[data-variant="b"] .sec-head { text-align: left; margin-left: 0; max-width: 720px; } html[data-variant="b"] .sec-head .sec-t::after { display: none; } html[data-variant="b"] .v-hd { background: rgb(255 255 255 / .78); } html[data-variant="b"] .v-hd.is-condensed { background: rgb(255 255 255 / .9); } html[data-variant="b"] .btn:hover { transform: translateY(-2px); } html[data-variant="b"] .btn-primary { box-shadow: 0 8px 20px -6px var(--accent); } html[data-variant="b"] .btn-wa { box-shadow: 0 8px 20px -8px var(--wa); } html[data-variant="b"] .v-bk-card { border-radius: 28px; } html[data-variant="b"] .v-bk-card::before { display: none; } html[data-variant="b"] .v-story { border-radius: var(--r2); } /* ---------- widths ---------- */ @media (min-width: 700px) { .wrap { padding: 0 28px; } .v-hd-wa { display: inline-flex; } .v-story { flex-basis: 46%; } .v-ft-grid { grid-template-columns: 1fr 1fr; } .v-hd-call { display: inline-flex; } } @media (min-width: 800px) { .v-app { grid-template-columns: 260px 1fr; padding: 32px 48px; align-items: center; gap: 40px; } .v-app-body .sec-t { font-size: 28px; } .tt td span { display: inline; } .tt td span + span::before { content: " \00b7 "; } .tt th { width: 30%; } .v-ft-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 900px) { .sec { padding: 96px 0; } .wrap { padding: 0 32px; } .sec-t { font-size: 40px; } .sec-head { margin-bottom: 48px; } .v-bar { display: none; } .v-ft { padding-bottom: 0; } .v-story { flex-basis: calc((100% - 32px) / 3); } .v-sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(600px, calc(100vw - 48px)); max-height: 90vh; border-radius: 24px; padding: 20px 28px 28px; transform: translate(-50%, -46%) scale(.98); } .v-sheet.is-open { transform: translate(-50%, -50%); } .v-grab { display: none; } } @media (min-width: 1100px) { .v-nav { display: flex; gap: 2px; margin: 0 auto; } .v-nav a { padding: 10px 10px; border-radius: 10px; font: 600 15px var(--f-body); color: var(--body); text-decoration: none; } .v-nav a:hover, .v-nav a.is-active { background: var(--accent-soft); color: var(--accent-ink); } .v-hd-in { gap: 14px; } .v-hd-book { padding: 0 20px; font-size: 15px; } .v-hd-wa span, .v-hd-book .lg { display: inline; } .v-menu-btn, .v-mnav, html:not(.js) .v-mnav { display: none; } .v-login-hd { display: inline-flex; width: 40px; min-height: 40px; padding: 0; margin-right: 6px; border-radius: 12px; background: transparent; color: var(--body); font: 600 14px/1 var(--f-body); } .v-login-hd span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the words stay for a screen reader */ .v-login-hd .ic { width: 18px; height: 18px; color: var(--muted); } .v-login-hd:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); } .v-login-hd:hover .ic { color: var(--accent-ink); } html[data-kind="doctor"] .v-hd-wa { display: none; } /* the doctor header keeps Call + Book; WhatsApp lives in the hero and the card */ html:not([data-kind="doctor"]) .v-hd-call { display: none; } /* clinic and pharmacy lead with WhatsApp */ } @media (min-width: 1280px) { .v-login-hd { width: auto; padding: 0 14px; gap: 7px; } .v-login-hd span { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .v-login-hd .ic { width: 16px; height: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .v-sheet, .v-ov, .v-toast { transition: none; } html.js .v-bk-form[data-stepped] .v-panel, html.js .v-bk-form[data-stepped] .v-steps::after { transition: none; } html.js .v-bk-form[data-step]:not([data-stepped]) { max-height: none; overflow: visible; } /* no clamp here: doctor-a / doctor-b / clinic-b switch every animation off in this mode, so the 3 s timer could never lift it */ } /* ========================================================================== T4 (20 Oct 2026, backend-migrations#4): the legal lines of the footer, the PCPNDT notice, the medical disclaimer, and the doctor's blog (list + post). APPEND to api/site_assets/v2/components.css (t4-components.css.patch is this as `diff -u` against d3570f8's file). Additive: no existing rule is touched. Markup: shared/_legal.html (id="legal"), _pcpndt_notice.html, _disclaimer.html, _blog_card.html and doctor/blog_post.html + blog_index.html. The blog pages sit inside
and load doctor-a.css / doctor-b.css, so --dr-* are in scope there; nothing below reads --dr-* outside .bp / .bpi. The app card (Q2) needs no rule here: components.css already draws it flat (.v-phone / .v-scr / .v-rx); only its mock-up rows' text changed. ========================================================================== */ /* ---------- the legal lines at the end of the footer (shared/_legal.html) ---------- */ .v-legal { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .16); max-width: 960px; display: grid; gap: 14px; } .v-ft .v-legal p { margin: 0; font-size: 13.5px; line-height: 1.65; color: rgb(255 255 255 / .82); } .v-legal b, .v-legal h4 { color: #fff; } .v-legal-grid { display: grid; gap: 20px; } .v-legal-grid h4 { margin: 0 0 6px; font: 800 12.5px/1.3 var(--f-head); letter-spacing: .08em; text-transform: uppercase; } .v-legal-grid > div > .v-notice { margin: 0; } /* the medical disclaimer: in the dark footer (a doctor's page) and in the light article of a blog post */ .v-disc { display: flex; gap: 10px; align-items: flex-start; } .v-disc svg.ic { flex: none; width: 18px; height: 18px; margin-top: 3px; } .v-ft .v-disc svg.ic { color: rgb(255 255 255 / .9); } .v-disc p { margin: 0; } /* the notice of the PCPNDT Act: English and Hindi, the reason first. Indic scripts read larger than Latin at the same size, so they get a little more line height */ .v-notice { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid rgb(255 255 255 / .22); border-radius: 12px; background: rgb(255 255 255 / .07); } .v-notice-t { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 12.5px/1.3 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: #fff; } .v-notice-t svg.ic { width: 18px; height: 18px; } .v-ft .v-notice p { font-size: 13.5px; line-height: 1.6; } .v-ft .v-notice .v-notice-why { font-weight: 600; color: #fff; } .v-notice [lang="hi"] { line-height: 1.8; } /* the one English line inside a block (compact): on a light page */ p.v-notice-line { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; line-height: 1.55; } /* ---------- the doctor's blog: a reading column, a quiet side rail, no promotion inside the article ---------- */ .bp-head { padding: 12px 0 20px; background: radial-gradient(900px 420px at 88% -10%, var(--dr-tint), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--dr-tint) 40%, #fff), #fff 96%); } .bp-hd { max-width: 820px; } .bp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 13.5px; line-height: 1.4; color: var(--dr-muted); } .bp-crumbs li { display: flex; align-items: center; min-height: 44px; min-width: 0; } .bp-crumbs li + li::before { content: "\203A"; margin-right: 8px; color: var(--dr-muted); } .bp-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dr-muted); text-decoration: none; } .bp-crumbs a:hover { color: var(--dr-ink2); text-decoration: underline; } .bp-crumbs [aria-current] { color: var(--dr-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; } .bp-hd h1 { margin: 16px 0 0; font: 800 32px/1.12 var(--dr-head); letter-spacing: -.028em; color: var(--dr-ink); text-wrap: balance; overflow-wrap: anywhere; } .bp-hd .bp-stand { margin: 16px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--dr-body); } .bp-hd .bp-reg { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--dr-muted); } .bp-by { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--dr-line); border-bottom: 1px solid var(--dr-line); } .bp-av { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, var(--dr-sh1); background: var(--dr-tint); } .bp-av .ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; } .bp-av .ph > img { object-position: 50% 14%; } .bp-by-t { min-width: 0; } .bp-by-t .bp-by-l { display: block; font: 700 11.5px/1.2 var(--dr-head); letter-spacing: .08em; text-transform: uppercase; color: var(--dr-muted); } .bp-by-t p.byline { margin: 4px 0 0; font: 600 15px/1.5 var(--dr-head); color: var(--dr-ink); overflow-wrap: anywhere; } .bp-hd .bp-dates { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 14px; font-size: 13.5px; color: var(--dr-muted); } .bp-hd .bp-dates time { color: var(--dr-ink); font-weight: 600; } .bp-hd .bp-ai { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; max-width: 60ch; font-size: 13.5px; line-height: 1.55; color: var(--dr-muted); } .bp-hd .bp-ai svg.ic { flex: none; width: 18px; height: 18px; margin-top: 2px; } .bp-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); padding-top: 28px; padding-bottom: 64px; } .bp-main { min-width: 0; max-width: 720px; } .bp-body { font-size: 17px; line-height: 1.75; color: var(--dr-body); overflow-wrap: anywhere; } .bp-body > p, .bp-body li { max-width: 68ch; } .bp-body p { margin: 0 0 1.1em; } .bp-body > p:first-child { font-size: 18.5px; line-height: 1.7; color: var(--dr-ink); } .bp-body h2 { margin: 2em 0 .55em; font: 600 26px/1.2 var(--dr-serif); letter-spacing: -.005em; color: var(--dr-ink); text-wrap: balance; } .bp-body > h2:first-child { margin-top: 0; } .bp-body h3 { margin: 1.6em 0 .5em; font: 700 19px/1.3 var(--dr-head); letter-spacing: -.005em; color: var(--dr-ink); text-wrap: balance; } .bp-body ul, .bp-body ol { margin: 0 0 1.2em; padding: 0; list-style: none; } .bp-body li { position: relative; margin: 0 0 .6em; padding-left: 30px; } .bp-body ul > li::before { content: ""; position: absolute; left: 8px; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--dr-acc); } .bp-body ol { counter-reset: bp-step; } .bp-body ol > li { counter-increment: bp-step; } .bp-body ol > li::before { content: counter(bp-step); position: absolute; left: 0; top: .28em; width: 22px; height: 22px; border-radius: 50%; background: var(--dr-tint); color: var(--dr-ink2); font: 800 12px/22px var(--dr-head); text-align: center; } .bp-fig { margin: 8px 0 24px; } .bp-fig img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: var(--dr-r3); border: 1px solid var(--dr-line); background: var(--dr-soft); } .bp-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--dr-muted); } .bp-refs { margin-top: 2.2em; padding-top: 1.2em; border-top: 1px solid var(--dr-line); } .bp-refs h2 { margin: 0 0 .6em; font: 600 20px/1.2 var(--dr-serif); color: var(--dr-ink); } .bp-refs ol { margin: 0; padding: 0 0 0 1.4em; list-style: decimal; } .bp-refs li { margin: 0 0 .5em; font-size: 14px; line-height: 1.6; color: var(--dr-muted); overflow-wrap: anywhere; } .bp-refs a { color: var(--dr-ink2); font-weight: 500; } .bp-main .v-disc { margin-top: 28px; padding: 16px 18px; border-radius: 14px; background: var(--dr-soft); border: 1px solid var(--dr-line); font-size: 13.5px; line-height: 1.6; color: var(--dr-muted); } .bp-main .v-disc b { color: var(--dr-ink); } .bp-aside { display: grid; gap: 16px; align-content: start; } .bp-author { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--dr-line); border-radius: var(--dr-r3); background: #fff; box-shadow: var(--dr-sh1); } .bp-author .bp-av { width: 64px; height: 64px; } .bp-author b { display: block; font: 800 16px/1.25 var(--dr-head); color: var(--dr-ink); } .bp-author span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--dr-muted); } .bp-author a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; font: 700 14px/1.2 var(--dr-head); color: var(--dr-ink2); text-decoration: none; } .bp-author a:hover { text-decoration: underline; } .bp-author a svg.ic { width: 16px; height: 16px; } /* the list of posts: one card a post */ .bpi .bp-hd h1 { margin-top: 12px; } .bp-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); padding: 28px 0 8px; } .bp-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: #fff; border: 1px solid var(--dr-line); border-radius: var(--dr-r2); box-shadow: var(--dr-sh1); transition: translate .25s, box-shadow .25s, border-color .25s; } .bp-card:hover { translate: 0 -3px; box-shadow: var(--dr-sh2); border-color: var(--dr-acc); } .bp-card .bp-card-t { margin: 0; font: 700 19px/1.3 var(--dr-head); letter-spacing: -.005em; color: var(--dr-ink); overflow-wrap: anywhere; } .bp-card .bp-card-t a { color: inherit; text-decoration: none; } .bp-card .bp-card-t a::after { content: ""; position: absolute; inset: 0; } .bp-card .bp-card-s { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dr-body); overflow-wrap: anywhere; } .bp-card .bp-meta { margin: auto 0 0; padding-top: 6px; font-size: 13px; line-height: 1.5; color: var(--dr-muted); } .bp-pager { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin: 12px 0 8px; } .bp-pager a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--dr-line); border-radius: 14px; background: #fff; font: 700 15px/1 var(--dr-head); color: var(--dr-ink2); text-decoration: none; } .bp-pager a:hover { border-color: var(--dr-acc); background: var(--dr-tint); } .bp-pager a[rel="next"] { margin-left: auto; } .bpi .v-disc { margin: 20px 0 64px; padding: 16px 18px; border-radius: 14px; background: var(--dr-soft); border: 1px solid var(--dr-line); font-size: 13.5px; line-height: 1.6; color: var(--dr-muted); max-width: 820px; } .bpi .v-disc b { color: var(--dr-ink); } /* Modern (B): the same markup, softer corners and a left-aligned head */ html[data-variant="b"] .bp-card { border-radius: 20px; } html[data-variant="b"] .bp-body h2 { font: 800 24px/1.2 var(--dr-head); letter-spacing: -.02em; } html[data-variant="b"] .bp-refs h2 { font: 800 19px/1.2 var(--dr-head); } html[data-variant="b"] .bp-fig img { border-radius: 20px; } /* a phone: the crumbs are "Home > Blog" on one row -- the title is the h1 right below */ @media (max-width: 639px) { .bp .bp-crumbs li[aria-current] { display: none; } } @media (min-width: 640px) { .bp-hd h1 { font-size: 40px; } .bp-hd .bp-stand { font-size: 19px; } .bp-body { font-size: 17.5px; } .bp-body h2 { font-size: 28px; } html[data-variant="b"] .bp-body h2 { font-size: 26px; } .bp-av { width: 60px; height: 60px; } } @media (min-width: 760px) { .bp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .v-legal-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } } @media (min-width: 900px) { .bp-head { padding-top: 32px; } .bp-hd h1 { font-size: clamp(40px, 3.8vw, 48px); } .bp-grid { padding-top: 32px; padding-bottom: 96px; } } @media (min-width: 1100px) { .bp-grid { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; gap: 72px; align-items: start; } .bp-aside { position: sticky; top: 92px; } } /* ========================================================================== PHARMACY (content pass of 20 Oct 2026): two gaps of the shared shell, scoped to the pharmacy so the doctor and clinic looks do not move (making either global is one selector). ========================================================================== */ /* from 1100 px up the header hides Call (`html:not([data-kind="doctor"]) .v-hd-call`): a pharmacy with no WhatsApp number then had NO header action. Show Call when there is no WhatsApp button. */ @media (min-width: 1100px) { html[data-kind="pharmacy"] .v-hd-cta:not(:has(.v-hd-wa)) .v-hd-call { display: inline-flex; } } /* the footer contact links were 22 px tall (a 44 px tap target is the rule): full-height touch rows */ html[data-kind="pharmacy"] .v-ft-col a { display: flex; align-items: center; min-height: 44px; } /* ========================================================================================================================================================== THE DOCTOR'S FOOTER (owner review rb_3rnpu4wu p9, 21 Oct 2026: "make the footer more beutiful, also show here our arogo app and user to download it from the playstore"). shared/_footer.html draws it for v.kind == "doctor" only (the same