/* HealthViber storefront * * The look is healthviber.com's: navy text on white and a pale blue-grey, one * strong blue for anything you can press, cyan for the few figures the page * wants you to notice, serif headings, Lato for everything else, and cards * drawn with a hairline rather than a shadow. * * The class names are the ones every template on this store already uses, so a * page restyles by this file alone. The old token names are kept too, mapped to * the new palette, because templates carry a fair number of inline styles that * refer to them — `color:var(--teal-900)` still means "the heading colour" and * now resolves to navy. New code should use the plain names in the first block. * * Two rules are enforced here rather than left to discipline: * * - Every multi-column grid uses repeat(auto-fit, minmax(...)) or an explicit * breakpoint, NEVER a bare repeat(N, 1fr). Plain 1fr tracks inherit * min-width:auto, refuse to shrink below their content and push past the * container, which is a real horizontal-overflow bug on a phone. * - The focus ring is 3px solid blue at 2px offset and is never removed. */ :root { /* healthviber.com's palette */ --navy:#415479; /* headings and body text */ --navy-deep:#34446a; /* dark surfaces */ --blue:#197ed0; /* buttons, links, eyebrows, the footer */ --blue-dark:#1468ad; --cyan:#01cce3; /* the figures that are meant to stand out */ --sky:#ebf6ff; /* pale blue fills */ --sky-line:#d5ecff; --mist:#f1f3f8; /* alternate section ground */ --hair:#c6cfe1; /* every border */ --muted:#5d6e8e; /* secondary text: 5.0:1 on white, 4.6:1 on --mist */ --coral:#d14d4d; /* "the usual way", and anything that went wrong */ --coral-soft:#fdeeee; --mint-ok:#1f9e78; /* "the HealthViber way" */ --white:#fff; /* The names the templates already use, mapped onto the palette above. */ --teal-900:var(--navy); --teal-800:var(--navy-deep); --teal-700:var(--blue); --teal-600:var(--blue); --teal-100:var(--sky-line); --teal-050:var(--mist); --ink:var(--navy); --soft:var(--muted); --line:var(--hair); --amber:var(--cyan); --amber-dark:var(--blue); --amber-soft:var(--sky); --kraft:var(--mist); --kraft-light:#f8f9fd; --rose:var(--coral); --rose-soft:var(--coral-soft); --paper:var(--white); --mint:#d5e6f7; --mint-dim:#aebfdc; --fd:'Source Serif 4', Georgia, 'Times New Roman', serif; /* headings */ --fb:'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; --fm:var(--fb); /* labels and figures: Lato too, the site has no monospace */ --wrap:1344px; --wrap-prose:1344px; --wrap-faq:1244px; --r:20px; --shadow-card:none; --shadow-lift:0 30px 60px -30px rgba(65,84,121,.28); --dash:1px solid var(--hair); } *,*::before,*::after { margin:0; padding:0; box-sizing:border-box } /* scroll-padding-top is what keeps an anchor from landing underneath the header, which is sticky and carries the nav with it. Generous rather than exact: landing slightly low is unnoticeable, landing under the header is not. */ html { scroll-behavior:smooth; scroll-padding-top:150px; -webkit-text-size-adjust:100% } @media (max-width:900px) { html { scroll-padding-top:120px } } body { font-family:var(--fb); background:var(--white); color:var(--navy); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased } img { max-width:100%; display:block } a { color:var(--blue); text-decoration:none } a:hover { color:var(--blue-dark) } button,input,select,textarea { font-family:inherit; font-size:inherit; color:inherit } button { cursor:pointer; border:none; background:none } p, li, h1, h2, h3 { text-wrap:pretty } /* Never remove this. It has to be visible everywhere. */ :focus-visible { outline:3px solid var(--blue); outline-offset:2px; border-radius:4px } /* On the blue and navy surfaces the blue ring would vanish into the ground. */ .util :focus-visible, .ft :focus-visible, .tile--dark :focus-visible, .found :focus-visible, .receipt__h :focus-visible, .finder__h :focus-visible { outline-color:#fff } /* The browser's own [hidden] rule is display:none at specificity (0,1,0), and so * is every class below that sets display — .pcard, .crow, .empty. Author styles * win ties against the UA sheet, so without this those elements ignore [hidden] * and every filter, search and empty state renders as if nothing were hidden. * !important is the correct tool: [hidden] is not a style, it is a statement * that the element is not part of the page. */ [hidden] { display:none !important } .visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap } .wrap { max-width:var(--wrap); margin:0 auto; padding-left:24px; padding-right:24px } .wrap-prose { max-width:var(--wrap-prose); margin:0 auto; padding-left:24px; padding-right:24px } .sec { padding:110px 0 } .sec--tint, .sec--kraft { background:var(--mist) } .sec--dark, .sec--darker { background:var(--navy); color:#fff } .sec--amber { background:var(--mist) } .sec--flush-top { padding-top:20px } .mono { font-family:var(--fm) } .eyebrow { font-family:var(--fb); font-size:.8rem; font-weight:700; letter-spacing:.01em; text-transform:uppercase; color:var(--blue); display:inline-block } .sec--dark .eyebrow, .sec--darker .eyebrow { color:var(--cyan) } h1,h2,h3,h4 { font-family:var(--fd); font-weight:700; line-height:1.18; color:var(--navy); font-optical-sizing:auto; letter-spacing:-.005em } h2 { font-size:clamp(1.9rem,3.2vw,3rem) } .sec--dark h2, .sec--darker h2, .sec--dark h3, .sec--darker h3 { color:#fff } /* The collection page titles itself with an h1 — it is that page's subject. */ .sec-head h1 { font-size:clamp(1.9rem,3.2vw,3rem) } .sec--dark .sec-head h1, .sec--darker .sec-head h1 { color:#fff } .sec-head { margin-bottom:48px; max-width:780px } .sec-head .eyebrow { margin-bottom:14px } .dek { color:var(--navy); margin-top:18px; font-size:1.06rem } .sec--dark .dek, .sec--darker .dek { color:var(--mint) } /* Most of healthviber.com's section heads sit centred over their content. */ .sec-head--center { margin-left:auto; margin-right:auto; text-align:center; max-width:760px } /* ── buttons ───────────────────────────────────────────────────────────────── * One shape: a pill, with an arrow after the label. The arrow is drawn by CSS * rather than typed into each label, so a button that is a