/* ============================================================ THRIVE - BROCHURE MATCH PATCH v2 · 2026-07-23 Aligns the website to the Thrive_Hyperbaric brochure system. Append to the END of thrive.css. Also add to BEFORE thrive.css: Changes: Fraunces out / Inter Black in · all radius to zero · curves removed · gold gradient to flat lion · remaining eyebrows removed · dotted rules as the divider device. ============================================================ */ /* --- TYPE ------------------------------------------------------ Brochure headlines are heavy, sentence case, tight leading. Second-clause emphasis is lighter weight, not italic ("Hyperbaric Oxygen Chambers." black / "Specified." light). ---------------------------------------------------------------- */ :root{ --serif:'Inter',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif; --data:'Inter',system-ui,sans-serif; --lion-bright:#D2B99C; /* buttons - 9.49:1 on navy, up from 7.34:1 */ --lion-panel:#BFA181; /* large fields, as per brochure */ } .hero h1, .header-band h1, h1,h2,h3, .panel h3, .logo{ font-family:'Inter',system-ui,sans-serif; font-weight:900; letter-spacing:-.02em; line-height:1.0; } .hero h1{line-height:.98} /* lighter second clause, replacing the Fraunces italic */ .hero h1 em, .header-band h1 em, h2 em{ font-style:normal; font-weight:300; color:#fff; } .header-band.on-sand h1 em{color:var(--navy)} body,p,.sub{font-family:'Inter',system-ui,sans-serif} .sub,p{line-height:1.55} /* --- RADIUS ---------------------------------------------------- The brochure has no rounded corners anywhere. Zero throughout, including the previous curve masks, which are removed. ---------------------------------------------------------------- */ .hero, .hero.hero-split .img, .hero.hero-split .img::before, .panel, .panel::after, .sheet, .slot, .tile, .bento .tile.feature, .photo, .why .photo, .lb img, .hpo .mark, .slot .tag, .btn, .quote{border-radius:0} /* --- LION AS A FIELD, NOT A HAIRLINE --------------------------- Flat lion replaces the gold gradient. Buttons become solid panels with navy text, matching the brochure's block treatment. ---------------------------------------------------------------- */ .btn.gold, .quote{ background:var(--lion-bright); background-image:none; color:var(--navy) !important; font-weight:700; letter-spacing:.01em; } .btn.gold:hover, .quote:hover{background:#C2A88A} /* the gold gradient rule beside hero and band copy is not a brochure device - removed */ .block::before, .header-band .block::before{display:none} .block{padding-left:0} /* --- EYEBROWS -------------------------------------------------- All remaining label-above-heading devices removed, including the panel index numbers and the vertical hero label. The brochure places its small uppercase line BELOW the title, never above. ---------------------------------------------------------------- */ .sec-eyebrow, .router .eyebrow, .sci .eyebrow, .panel .pix, .vlabel{display:none !important} .hero .eyebrow, .header-band .eyebrow{ font-family:'Inter',system-ui,sans-serif; text-transform:none; letter-spacing:0; font-weight:500; font-size:15px; margin-bottom:14px; opacity:.8; } .hero .eyebrow::before, .header-band .eyebrow::before{content:none !important} /* --- SPEC LABELS ----------------------------------------------- Brochure spec style is a bold label and a regular value on one line ("Model: Zeugma"), not tracked-out uppercase. ---------------------------------------------------------------- */ .cell .k, .tile .cap, .sheet .herofig .k, .sheet .herofig .unit{ font-family:'Inter',system-ui,sans-serif; text-transform:none; letter-spacing:0; font-weight:700; font-size:13px; } .cell .v, .sheet .herofig .big{ font-family:'Inter',system-ui,sans-serif; font-weight:900; letter-spacing:-.01em; } /* --- DOTTED RULES ---------------------------------------------- The brochure's divider is a dotted hairline, used between columns and between stacked items. ---------------------------------------------------------------- */ .cell + .cell::before{ background:none; border-left:1px dotted rgba(255,255,255,.4); width:0; } .sheet .r{border-bottom-style:dotted;border-bottom-color:#33415C} .sheet .sh{border-bottom-style:dotted;border-bottom-color:#33415C} /* reusable, for new sections built to match the brochure */ .rule-dot{border:0;border-top:1px dotted rgba(15,23,42,.45);margin:22px 0} .rule-dot.on-dark{border-top-color:rgba(255,255,255,.45)} /* --- ARROWHEADS ------------------------------------------------ Kept from v1: drawn chevron, no shafted arrow glyph. ---------------------------------------------------------------- */ .txtlink::after, .arrowlink::after, .sci .ln::after, .panel .go::after{ content:""; width:.4em; height:.4em; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); display:inline-block; margin-left:.2em; vertical-align:.02em; } .txtlink::after, .panel .go::after{border-color:var(--gold)} .txtlink:hover::after, .arrowlink:hover::after, .sci .ln:hover::after{transform:rotate(45deg) translate(3px,-3px)} .panel:hover .go::after{transform:rotate(45deg) translate(4px,-4px)} /* ============================================================ BROCHURE COMPONENTS Devices lifted from the printed piece that the site does not currently have: the inset block, white dotted dividers, the white photo frame, and the sub-line that sits below a title. ============================================================ */ /* --- INSET BLOCK ----------------------------------------------- A lion or smoke panel floating inside a navy field with an even margin all round. The brochure never runs these edge to edge - the surrounding navy is part of the device. ---------------------------------------------------------------- */ .field-navy{background:var(--navy);padding:44px} .inset{padding:52px 56px 56px} .inset-lion{background:var(--lion-panel);color:#fff} .inset-smoke{background:var(--smoke);color:var(--navy)} .inset h2{color:#fff;max-width:16ch;margin-bottom:26px} .inset-smoke h2{color:var(--navy)} @media(max-width:760px){ .field-navy{padding:16px} .inset{padding:30px 24px 34px} } /* --- WHITE DOTTED DIVIDERS ------------------------------------- Horizontal beneath the heading, vertical between columns. ---------------------------------------------------------------- */ .rule-dot{border:0;border-top:1px dotted rgba(255,255,255,.75);margin:0 0 26px} .inset-smoke .rule-dot{border-top-color:rgba(15,23,42,.45)} .cols-dot{display:grid;grid-template-columns:1fr 1fr;gap:0} .cols-dot > *{padding-right:34px} .cols-dot > * + *{ padding-right:0;padding-left:34px; border-left:1px dotted rgba(255,255,255,.75); } .inset-smoke .cols-dot > * + *{border-left-color:rgba(15,23,42,.45)} .cols-dot h3{font-weight:700;font-size:19px;letter-spacing:0;margin-bottom:10px} .cols-dot p{font-size:15.5px;line-height:1.62;margin:0;color:rgba(255,255,255,.94)} .inset-smoke .cols-dot p{color:var(--ink)} @media(max-width:760px){ .cols-dot{grid-template-columns:1fr} .cols-dot > *{padding:0} .cols-dot > * + *{padding:24px 0 0;border-left:0;border-top:1px dotted rgba(255,255,255,.75);margin-top:24px} } /* --- WHITE PHOTO FRAME ----------------------------------------- A second image overlapping the first, carrying a white keyline and breaking the parent edge. ---------------------------------------------------------------- */ .stack{position:relative} .stack .framed{ position:absolute;left:0;bottom:0;transform:translate(-3%,22%); width:46%;border:5px solid #fff;display:block; } .stack .framed img{display:block;width:100%} @media(max-width:760px){ .stack .framed{position:static;transform:none;width:100%;margin-top:14px;border-width:4px} } /* --- SUB-LINE BELOW A TITLE ------------------------------------ The brochure's only uppercase device, and it always sits under the heading, never above it. ---------------------------------------------------------------- */ .subline{ font-family:'Inter',system-ui,sans-serif; font-weight:400;font-size:15px;letter-spacing:.04em; text-transform:uppercase;margin-top:8px;opacity:.92; } /* --- RIGHT-ALIGNED MODEL BLOCK --------------------------------- Used on the Zeugma and Atlantis spreads. ---------------------------------------------------------------- */ .model-right{text-align:right;margin-left:auto;max-width:46ch} .model-right p{margin-left:auto} @media(max-width:760px){.model-right{text-align:left}} /* --- SPEC PAIRS ------------------------------------------------- "Model: Zeugma" - bold label, regular value, on one line. ---------------------------------------------------------------- */ .specpair{margin:0 0 3px;font-size:15.5px} .specpair b{font-weight:700} /* ============================================================ CONTRAST, SAND GRADIENT, TWO-SIDED PHOTO FRAME v3 ============================================================ */ /* --- CONTRAST --------------------------------------------------- White on #BFA181 measures 2.43:1 - below the 4.5:1 body-text threshold and below 3:1 for large text, so it fails for headings too. Default lion panels now carry navy text at 7.34:1, which keeps the bright brochure tan. Where white text is wanted, use .inset-lion-deep: a darker tan at 5.36:1 against white. ---------------------------------------------------------------- */ .inset-lion{ background:linear-gradient(160deg,#CBB294 0%, var(--lion-panel) 62%, #B79979 100%); color:var(--navy); } .inset-lion h2, .inset-lion h3{color:var(--navy)} .inset-lion p, .inset-lion .cols-dot p{color:#2A2116} .inset-lion .rule-dot{border-top-color:rgba(15,23,42,.5)} .inset-lion .cols-dot > * + *{border-left-color:rgba(15,23,42,.5)} @media(max-width:760px){ .inset-lion .cols-dot > * + *{border-left:0;border-top-color:rgba(15,23,42,.5)} } /* deep variant, for white text on tan */ .inset-lion-deep{ background:linear-gradient(160deg,#8A7154 0%, #7E6748 60%, #6F5A3E 100%); color:#fff; } .inset-lion-deep h2, .inset-lion-deep h3{color:#fff} .inset-lion-deep p{color:rgba(255,255,255,.95)} .inset-lion-deep .rule-dot, .inset-lion-deep .cols-dot > * + *{border-color:rgba(255,255,255,.75)} /* NOTE: an earlier build forced .why p to a pale blue for contrast on navy. The original #9FB0C7 already measures 8.08:1 on navy, and the override broke Sport, where .why sits on white. Reverted. */ /* --- SAND GRADIENT ---------------------------------------------- Light sections get a soft sand wash rather than a flat fill. Both ends clear 12:1 with navy text. ---------------------------------------------------------------- */ .bj, .header-band.on-sand{ background:linear-gradient(180deg,#F8F4ED 0%, #F1E9DB 55%, #E7DAC6 100%); } .irl{background:linear-gradient(180deg,#FFFFFF 0%, #FBF8F3 100%)} /* --- TWO-SIDED PHOTO FRAME -------------------------------------- Images sitting on a dark field take a 10px white border on two adjacent sides, as the printed piece does. Top and left is the default; .frame-tr / .frame-bl / .frame-br cover the other corners so the frame can open away from the copy. ---------------------------------------------------------------- */ .frame-tl,.frame-tr,.frame-bl,.frame-br{ border-style:solid;border-color:#fff;border-width:0; } .frame-tl{border-top-width:10px;border-left-width:10px} .frame-tr{border-top-width:10px;border-right-width:10px} .frame-bl{border-bottom-width:10px;border-left-width:10px} .frame-br{border-bottom-width:10px;border-right-width:10px} /* homepage 'clinic owner' section: David sits on navy, frame opens top-left, away from the copy on the right */ .why .photo, .why .slot{ border-style:solid;border-color:#fff; border-width:10px 0 0 10px; box-shadow:none; } /* science band photography sits on navy too */ .sci .photo, .sci .slot{ border-style:solid;border-color:#fff; border-width:10px 10px 0 0; box-shadow:none; } @media(max-width:760px){ .frame-tl,.frame-tr,.frame-bl,.frame-br, .why .photo,.why .slot,.sci .photo,.sci .slot{border-width:6px 0 0 6px} } /* ============================================================ HEADING WEIGHT - PAGE-LEVEL OVERRIDES Several pages carry their own hero and section rules that out-specify a bare h1/h2/h3 selector, so they are named here. Verified against every page in the site. ============================================================ */ .m-hero h1, .bg-hero h1, .sport-hero h1, .cats h2, .certs h2, .comf h2, .dose h2, .needs h2, .oxy h2, .safe h2, .support h2, .fclose h2, .beats .bhead h2, .mech-head h2, .nobel-band h2, .pathway h2, .exp h2, .herd h2, .models h2, .stam h2, .why h2, .legal h2, .scard h3, .mcard h3, .citem h3, .vcard h3, .beat h3, .rail .step h3, .form-done h3, .legal h3{ font-family:'Inter',system-ui,sans-serif; font-weight:900; letter-spacing:-.02em; } /* sub-heads within cards read better a step down from Black */ .scard h3,.mcard h3,.citem h3,.vcard h3,.beat h3, .rail .step h3,.form-done h3,.legal h3{font-weight:700;letter-spacing:-.01em} /* the lighter second clause, restated at matching specificity */ .m-hero h1 em,.bg-hero h1 em,.sport-hero h1 em{font-style:normal;font-weight:300} /* ============================================================ v4 · GLOBAL SWEEPS Enumerating selectors let page-level rules slip through, so the three global rules below are set with !important and then the deliberate exceptions are re-stated after them. ============================================================ */ /* --- HEAVY TITLES, EVERYWHERE ----------------------------------- */ h1,h2,h3, .hero h1,.header-band h1{ font-family:'Inter',system-ui,sans-serif !important; font-weight:900 !important; letter-spacing:-.02em !important; } /* deliberate exceptions, stated after the sweep */ h1 em,h2 em,h3 em{font-weight:300 !important;font-style:normal !important} .scard h3,.mcard h3,.citem h3,.vcard h3,.beat h3, .rail .step h3,.form-done h3,.legal h3, .cols-dot h3,.panel h3{font-weight:700 !important;letter-spacing:-.01em !important} /* --- NO RADIUS, ANYWHERE ---------------------------------------- */ *,*::before,*::after{border-radius:0 !important} /* --- BUTTON GRADIENT -------------------------------------------- */ .btn.gold, .quote{ background:linear-gradient(135deg,#E4CFB2 0%,#D2B99C 52%,#C6AB8C 100%) !important; color:var(--navy) !important; font-weight:700; border:0; } .btn.gold:hover, .quote:hover{ background:linear-gradient(135deg,#DBC3A0 0%,#C6AB8C 52%,#B99B78 100%) !important; } /* --- IMAGE FRAME, FADING TO ZERO AT THE ENDS -------------------- A CSS border cannot fade, so the two arms are drawn as gradient pseudo-elements instead. Solid at the corner, out to nothing at the far end of each arm. ---------------------------------------------------------------- */ .why .photo,.why .slot, .sci .photo,.sci .slot, .frame-tl,.frame-tr,.frame-bl,.frame-br{ border-width:0 !important; position:relative; } .why .photo::before,.why .slot::before, .sci .photo::before,.sci .slot::before, .frame-tl::before,.frame-tr::before, .frame-bl::before,.frame-br::before, .why .photo::after,.why .slot::after, .sci .photo::after,.sci .slot::after, .frame-tl::after,.frame-tr::after, .frame-bl::after,.frame-br::after{ content:"";position:absolute;z-index:6;pointer-events:none; } /* horizontal arm */ .why .photo::before,.why .slot::before, .sci .photo::before,.sci .slot::before, .frame-tl::before,.frame-tr::before, .frame-bl::before,.frame-br::before{ left:0;right:0;height:10px; } /* vertical arm */ .why .photo::after,.why .slot::after, .sci .photo::after,.sci .slot::after, .frame-tl::after,.frame-tr::after, .frame-bl::after,.frame-br::after{ top:0;bottom:0;width:10px; } /* top-left corner: arms run right and down, fading out */ .why .photo::before,.why .slot::before,.frame-tl::before{ top:0;background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } .why .photo::after,.why .slot::after,.frame-tl::after{ left:0;background:linear-gradient(180deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } /* top-right corner */ .sci .photo::before,.sci .slot::before,.frame-tr::before{ top:0;background:linear-gradient(270deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } .sci .photo::after,.sci .slot::after,.frame-tr::after{ right:0;background:linear-gradient(180deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } /* bottom-left */ .frame-bl::before{bottom:0;background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%)} .frame-bl::after{left:0;background:linear-gradient(0deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%)} /* bottom-right */ .frame-br::before{bottom:0;background:linear-gradient(270deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%)} .frame-br::after{right:0;background:linear-gradient(0deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%)} @media(max-width:760px){ .why .photo::before,.why .slot::before,.sci .photo::before,.sci .slot::before, .frame-tl::before,.frame-tr::before,.frame-bl::before,.frame-br::before{height:6px} .why .photo::after,.why .slot::after,.sci .photo::after,.sci .slot::after, .frame-tl::after,.frame-tr::after,.frame-bl::after,.frame-br::after{width:6px} } /* ============================================================ v5 · NAV CTA + FRAME PLACEMENT ============================================================ */ /* --- MAIN CTA --------------------------------------------------- Lion on navy reads flat at button size. The moodboard assigns the Thrive red to calls to action, so the primary CTA takes it. #CE4348 rather than #DB5256 - white text needs 4.5:1 and the brand red gives 3.92:1. This gives 4.65:1 and is imperceptibly different alongside the logo. ---------------------------------------------------------------- */ .quote, .btn.red, .btn.prim{ background:linear-gradient(135deg,#DB5256 0%,#CE4348 55%,#C13B40 100%) !important; color:#fff !important; font-weight:700 !important; border:0 !important; box-shadow:0 1px 0 rgba(0,0,0,.18); } .quote:hover, .btn.red:hover, .btn.prim:hover{ background:linear-gradient(135deg,#CE4348 0%,#C13B40 55%,#A82F35 100%) !important; } /* lion stays on the secondary in-page buttons */ .btn.gold{ background:linear-gradient(135deg,#E4CFB2 0%,#D2B99C 52%,#C6AB8C 100%) !important; color:var(--navy) !important; } /* --- FRAME PLACEMENT -------------------------------------------- Used sparingly: one framed image per page, and the corner is chosen so the frame opens away from the copy beside it. Homepage + Home Use : top-left (copy sits right) About + Commercial : bottom-left Science : top-right (copy sits left) Models + Sport : no frame - those pages are already image-dense and it would read as clutter. ---------------------------------------------------------------- */ /* clear the blanket application from v4 */ .sci .photo::before,.sci .slot::before, .sci .photo::after,.sci .slot::after{content:none} /* about + commercial: bottom-left, opening down and away */ .maker .photo::before, .support .photo::before, .why-c .photo::before{ content:"";position:absolute;left:0;right:0;bottom:0;height:10px;z-index:6;pointer-events:none; background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } .maker .photo::after, .support .photo::after, .why-c .photo::after{ content:"";position:absolute;left:0;top:0;bottom:0;width:10px;z-index:6;pointer-events:none; background:linear-gradient(0deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } .maker .photo, .support .photo, .why-c .photo{position:relative} /* science band image: top-right */ .hero-split .img::before{ content:"";position:absolute;left:0;right:0;top:0;height:10px;z-index:6;pointer-events:none; background:linear-gradient(270deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } .hero-split .img::after{ content:"";position:absolute;right:0;top:0;bottom:0;width:10px;z-index:6;pointer-events:none; background:linear-gradient(180deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } .hero-split .img{position:relative;overflow:hidden} /* hero-split frame only where the page is image-led; others opt out */ .home-use .hero-split .img::before,.home-use .hero-split .img::after, .commercial .hero-split .img::before,.commercial .hero-split .img::after{content:none} /* ============================================================ v5 · NAV CTA, REMAINING EYEBROWS, ALTERNATING FRAMES ============================================================ */ /* --- NAV CTA --------------------------------------------------- Same treatment as every other button. */ /* --- REMAINING EYEBROWS ---------------------------------------- Every page carries its own .ey label above a heading. Removed. ---------------------------------------------------------------- */ .ey, .bg-hero .ey,.bhead .ey,.certs .ey,.comf .ey,.dose .ey,.exp .ey, .m-hero .ey,.models .ey,.oxy .ey,.safe .ey,.sport-hero .ey, .stam .ey,.why .ey,.needs .ey,.cats .ey,.support .ey,.herd .ey, .mech-head .ey{display:none !important} /* sub-labels that carry meaning stay, but lose the tracked-out caps */ .custom .fk,.direct .dk,.upgrade .plabels,.fcard .flabel, .fsec .slabel,.scard .lab,.mcard .cap,.citem .ct,.ocard .k, .cat .tier,.club .reg,.thumb .phlbl,.certs .cl{ text-transform:none !important; letter-spacing:0 !important; font-weight:700 !important; font-size:14px !important; } /* --- ALTERNATING TWO-SIDED FRAMES ------------------------------- Kept sparse: five instances across the whole site, alternating corner so it reads as a rhythm rather than a border style. On light sections the frame is navy, since white would vanish. ---------------------------------------------------------------- */ /* About - factory photo sits on sand, so the frame is navy, bottom-right */ .about-build .img,.about-build .photo{position:relative} .about-build .img::before,.about-build .photo::before{ content:"";position:absolute;bottom:0;left:0;right:0;height:10px;z-index:6; background:linear-gradient(270deg,var(--navy) 0%,var(--navy) 34%,rgba(15,23,42,0) 100%); } .about-build .img::after,.about-build .photo::after{ content:"";position:absolute;top:0;bottom:0;right:0;width:10px;z-index:6; background:linear-gradient(0deg,var(--navy) 0%,var(--navy) 34%,rgba(15,23,42,0) 100%); } /* Home Use - hero image, bottom-left, white on dark */ .home-hero .img::before,.hero.hero-split .img::before{ content:"";position:absolute;bottom:0;left:0;right:0;height:10px;z-index:6; background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } .home-hero .img::after,.hero.hero-split .img::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:10px;z-index:6; background:linear-gradient(0deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } /* Models - lead shot, top-right */ .shot.main{position:relative} .shot.main::before{ content:"";position:absolute;top:0;left:0;right:0;height:10px;z-index:6; background:linear-gradient(270deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } .shot.main::after{ content:"";position:absolute;top:0;bottom:0;right:0;width:10px;z-index:6; background:linear-gradient(180deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } @media(max-width:760px){ .about-build .img::before,.about-build .photo::before, .home-hero .img::before,.hero.hero-split .img::before,.shot.main::before{height:6px} .about-build .img::after,.about-build .photo::after, .home-hero .img::after,.hero.hero-split .img::after,.shot.main::after{width:6px} } /* --- REMAINING TRACKED CAPS ------------------------------------- Link labels and spec keys still ran as tracked-out uppercase, which is the same eyebrow device in a smaller size. Set in sentence case at 700 instead. Short codes (CE, PED, ASME, ATA) are unaffected because they are capitalised in the markup. ---------------------------------------------------------------- */ .lbl,.ln,.k,.cspec,.mspec,.ft,.sk,.zoomcue,.go,.arrowlink,.cite, .t,h4,.flabel,.slabel,.plabels,.fk,.dk,.lab,.tier,.reg,.phlbl,.cl{ text-transform:none !important; letter-spacing:0 !important; font-weight:700 !important; } .go,.arrowlink,.txtlink{font-size:15px !important} /* ============================================================ v7 · CORRECTIONS ============================================================ */ /* nav CTA matches the in-page buttons exactly */ .quote{ background:linear-gradient(135deg,#E4CFB2 0%,#D2B99C 52%,#C6AB8C 100%) !important; color:var(--navy) !important; font-weight:700; } .quote:hover{background:linear-gradient(135deg,#DBC3A0 0%,#C6AB8C 52%,#B99B78 100%) !important} /* hero images carry no frame - the device is for in-page photography only */ .hero .img::before,.hero .img::after, .hero.hero-split .img::before,.hero.hero-split .img::after, .home-hero .img::before,.home-hero .img::after, .hero .bg::before,.hero .bg::after{ content:none !important; } /* SVG diagrams: zero the rounded rects to match the rest of the site */ svg rect{rx:0 !important;ry:0 !important} /* ============================================================ v8 · DIAGRAM REPAIRS Two faults introduced by earlier sweeps, corrected here. ============================================================ */ /* 1. .k is a data label, not an eyebrow. On the Science page it carries "Dissolved O2 in plasma", "Delivered pressure", "Flow rate" and so on. It must stay visible. */ .pathway .k,.nobel-band .k,.sci .k,svg .k{ display:block !important; text-transform:none !important; letter-spacing:0 !important; font-weight:700 !important; } /* 2. Square the rects only. Nothing in CSS may touch ellipse or circle geometry: rx:revert computes to auto, and an ellipse with rx and ry both auto resolves to zero and disappears. Leave them alone and the presentation attributes in the markup apply. */ svg rect{rx:0 !important;ry:0 !important} /* --- Bryan Johnson section (Home Use) --------------------------- */ .bj-section{background:linear-gradient(180deg,#F8F4ED 0%,#F1E9DB 100%)} .bj-section .photo{min-height:460px;background-size:cover;background-position:center} .bj-section .bj-spec{ margin-top:22px;padding-top:16px; border-top:1px dotted rgba(15,23,42,.45); font-size:15px; } .bj-section .bj-spec b{font-weight:700} /* frame is navy here because the section is light */ .bj-section .photo.frame-tr::before{ background:linear-gradient(270deg,var(--navy) 0%,var(--navy) 34%,rgba(15,23,42,0) 100%) !important; } .bj-section .photo.frame-tr::after{ background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 34%,rgba(15,23,42,0) 100%) !important; } @media(max-width:900px){.bj-section .photo{min-height:280px}} /* caption under the Bryan Johnson photo */ .bj-section .bj-cap{ margin:12px 0 0;font-size:14px;font-weight:500; color:#5B4A34;max-width:none; } .bj-section .arrowlink{display:inline-flex;margin-top:18px;color:var(--gold-ink)} /* ============================================================ FINISH WHEEL · models page, one per chamber A motif rather than a spec chart. The disc echoes the chamber door; the note beside it carries the actual information. ============================================================ */ .finrow{ display:flex;align-items:center;gap:22px; margin:18px 0 20px; } .finrow .fnote{ flex:1 1 auto;margin:0; font-size:13.5px;line-height:1.55; color:var(--ink-soft);max-width:46ch; } .fwheel{ flex:0 0 auto;width:92px;height:92px; /* the one deliberate exception to the zero-radius rule */ border-radius:50% !important; box-shadow:0 2px 14px rgba(15,23,42,.14); } .fwheel path{transition:opacity .2s ease} .finrow:hover .fwheel path{opacity:.55} .finrow:hover .fwheel path:hover{opacity:1} /* on dark bands */ .dark .finrow .fnote,.sci .finrow .fnote,.why .finrow .fnote{color:#C3D0E0} @media(max-width:600px){ .finrow{gap:16px} .fwheel{width:72px;height:72px} .finrow .fnote{font-size:13px} } /* ============================================================ SPECIALIST BAND · homepage, above the three settings ============================================================ */ .spec-band{ background:linear-gradient(180deg,#F8F4ED 0%,#F1E9DB 100%); padding:84px 0; } .spec-grid{ display:grid;grid-template-columns:0.92fr 1.08fr;gap:56px;align-items:center; } .spec-photo{ min-height:400px;background-size:cover;background-position:center; position:relative; } /* navy frame, bottom-left - the section is light */ .spec-photo.frame-bl::before{ background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 34%,rgba(15,23,42,0) 100%) !important; } .spec-photo.frame-bl::after{ background:linear-gradient(0deg,var(--navy) 0%,var(--navy) 34%,rgba(15,23,42,0) 100%) !important; } .spec-copy h2{max-width:18ch;margin-bottom:16px} .spec-lede{font-size:18px;line-height:1.55;max-width:52ch;margin-bottom:24px} .spec-list{list-style:none;margin:0 0 28px;padding:0} .spec-list li{ position:relative;padding:12px 0 12px 26px; border-top:1px dotted rgba(15,23,42,.42); font-size:16px;line-height:1.5; } .spec-list li:last-child{border-bottom:1px dotted rgba(15,23,42,.42)} .spec-list li::before{ content:"";position:absolute;left:2px;top:20px; width:9px;height:9px;background:var(--gold); } .spec-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap} @media(max-width:900px){ .spec-band{padding:56px 0} .spec-grid{grid-template-columns:1fr;gap:28px} .spec-photo{min-height:260px} } /* ============================================================ v9 · SPECIALIST BAND CORRECTIONS ============================================================ */ /* .pad only carries padding when scoped to .router, so the band was running full-bleed. Match the site's standard gutter and width. */ .spec-band .pad{padding:0 46px} /* .txtlink is white by default - invisible on the sand band */ .spec-band .txtlink{color:var(--navy);opacity:1} .spec-band .txtlink::after{border-color:var(--gold-ink) !important} .spec-band .txtlink:hover{color:var(--gold-ink)} /* the SFDA strip now stands alone, so it needs its own band padding */ .gccband{padding:0 0 76px} @media(max-width:900px){ .spec-band .pad{padding:0 22px} } /* the club chips are now data carriers only - the CSS for .clubs sets display, which overrides the hidden attribute */ .trusted .clubs[hidden]{display:none !important} /* ============================================================ REGION PROOF BAND · home use Copy on the left, a fixed-width image block on the right. No full-bleed background, no gradient over the photograph. ============================================================ */ .trusted-full{padding:64px 0 34px;background:linear-gradient(180deg,#F8F4ED 0%,#F1E9DB 100%)} .tfull{ text-align:left; display:grid; grid-template-columns:1fr 620px; gap:56px;align-items:center; max-width:1500px;margin:0 auto 26px; padding:0 46px; } .tfull-img{ width:620px;height:420px; background-size:cover;background-position:center; background-repeat:no-repeat; background-color:#E9E2D6; } .tfull-head{ font-family:'Inter',system-ui,sans-serif; font-weight:900;letter-spacing:-.02em; font-size:clamp(28px,3.4vw,42px);line-height:1.02; color:var(--navy);margin:0 0 18px;max-width:14ch; } .tfull-reg{font-size:13.5px;font-weight:700;color:var(--gold-ink);margin:0 0 2px} .tfull-name{ font-family:'Inter',system-ui,sans-serif; font-weight:700;font-size:19px;line-height:1.2; color:var(--navy);margin:0; } .trusted-full .inner{max-width:1500px;padding:0 46px;text-align:left} .trusted-full .subnote{max-width:70ch;margin:0 0 8px;font-size:15px} .trusted-full .crossroute{margin:0} @media(max-width:1100px){ .tfull{grid-template-columns:1fr 460px;gap:36px} .tfull-img{width:460px;height:340px} } @media(max-width:820px){ .trusted-full{padding:40px 0 28px} .tfull{grid-template-columns:1fr;gap:24px;padding:0 22px} .tfull-img{width:100%;height:280px} .trusted-full .inner{padding:0 22px} } /* .trusted sets text-align:center; the band sits outside .inner so it was inheriting it */ .tfull,.tfull-copy,.tfull-head,.tfull-reg,.tfull-name{text-align:left} /* David sits high in the frame - anchor the crop near the top so the portrait section does not cut his head off */ .spec-photo{background-position:center 16%} @media(max-width:900px){.spec-photo{background-position:center 12%}} /* --- specialist / no-extra-cost note ---------------------------- Sits under the closing call to action on each page. ---------------------------------------------------------------- */ .spec-note{ margin:18px 0 0; padding-top:14px; border-top:1px dotted rgba(15,23,42,.42); font-size:14.5px;line-height:1.55; max-width:62ch; color:var(--ink-soft); } .spec-note strong,.spec-note b{font-weight:700;color:var(--navy)} /* on navy bands */ .cta-band .spec-note,.sci .spec-note,.dark .spec-note, .why .spec-note,.certb .spec-note,.header-band .spec-note{ color:#C3D0E0;border-top-color:rgba(255,255,255,.42); } @media(max-width:760px){.spec-note{font-size:14px}} /* Sport: the two club rows are now one block of six */ .herd .herd-row{grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:900px){.herd .herd-row{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.herd .herd-row{grid-template-columns:1fr}} /* ============================================================ HOME USE · installs gallery leads with the visitor's region The page already sets html.us / .gcc / .eu / .uk from the browser timezone. The feature tile (top-left 2x2) swaps grid area with the matching city so the first photo is local. Base case, including UK and anything undetected, is London. ============================================================ */ @media(min-width:761px){ /* default and UK - London leads */ .installs .gal .lond{grid-area:mich} .installs .gal .mich{grid-area:lond} /* US - Michigan leads */ html.us .installs .gal .mich{grid-area:mich} html.us .installs .gal .lond{grid-area:lond} /* Gulf - Dubai leads */ html.gcc .installs .gal .dubai{grid-area:mich} html.gcc .installs .gal .mich{grid-area:dubai} html.gcc .installs .gal .lond{grid-area:lond} /* Europe - Uppsala leads */ html.eu .installs .gal .upps{grid-area:mich} html.eu .installs .gal .mich{grid-area:upps} html.eu .installs .gal .lond{grid-area:lond} } /* Mobile keeps auto-placement, so reorder by source instead. The local tile also spans the row so it reads as the feature, which is what the original layout gave Michigan and Dubai. */ @media(max-width:760px){ .installs .gal .tile{grid-area:auto;grid-column:auto;aspect-ratio:4/3} /* default and UK */ .installs .gal .lond{order:-1;grid-column:1/-1;aspect-ratio:16/10} html.us .installs .gal .lond{order:0;grid-column:auto;aspect-ratio:4/3} html.us .installs .gal .mich{order:-1;grid-column:1/-1;aspect-ratio:16/10} html.gcc .installs .gal .lond{order:0;grid-column:auto;aspect-ratio:4/3} html.gcc .installs .gal .dubai{order:-1;grid-column:1/-1;aspect-ratio:16/10} html.eu .installs .gal .lond{order:0;grid-column:auto;aspect-ratio:4/3} html.eu .installs .gal .upps{order:-1;grid-column:1/-1;aspect-ratio:16/10} } /* ============================================================ MODELS PROMO · homepage ============================================================ */ .mpromo{background:#fff;padding:84px 0} .mpromo .pad{padding:0 46px} .mpromo-head{max-width:none;margin-bottom:38px} .mpromo-head h2{max-width:22ch;margin-bottom:14px} .mpromo-head p{font-size:17px;line-height:1.6;max-width:66ch;color:var(--ink-soft)} .mpromo-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px; border-top:1px dotted rgba(15,23,42,.42);padding-top:26px; } .mpromo-card{ display:block;text-decoration:none;color:inherit; transition:transform .18s ease; } .mpromo-card:hover{transform:translateY(-3px)} .mpromo-img{ aspect-ratio:4/3;background-size:cover;background-position:center; background-color:#EDE7DD;margin-bottom:14px; } .mpromo-card:hover .mpromo-img{box-shadow:0 6px 22px rgba(15,23,42,.16)} .mpromo-body h3{font-size:24px;margin-bottom:4px} .mpromo-spec{ font-size:13.5px;font-weight:700;color:var(--gold-ink); margin-bottom:8px; } .mpromo-body p{font-size:15.5px;line-height:1.55;color:var(--ink-soft);margin:0} .mpromo-cta{margin-top:34px} @media(max-width:900px){ .mpromo{padding:56px 0} .mpromo .pad{padding:0 22px} .mpromo-grid{grid-template-columns:1fr;gap:28px} } /* ============================================================ BUYING GUIDE PROMO · homepage and Home Use ============================================================ */ .bgpromo{ background:linear-gradient(180deg,#0F172A 0%,#0B1220 100%); padding:82px 0; } .bgpromo .pad{padding:0 46px} .bgpromo-grid{ display:grid;grid-template-columns:1fr 520px;gap:56px;align-items:center; } .bgpromo h2{color:#fff;max-width:17ch;margin-bottom:20px} .bgpromo-lede{ color:#C3D0E0;font-size:17px;line-height:1.65;max-width:60ch;margin-bottom:30px; } .bgpromo-cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .bgpromo-img{ width:520px;height:390px; background-image:url(images/buying-guide-hero.webp); background-size:cover;background-position:center; position:relative; } /* two-sided white frame, opening away from the copy */ .bgpromo-img::before{ content:"";position:absolute;top:0;left:0;right:0;height:10px;z-index:6; background:linear-gradient(270deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } .bgpromo-img::after{ content:"";position:absolute;top:0;bottom:0;right:0;width:10px;z-index:6; background:linear-gradient(180deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } @media(max-width:1100px){ .bgpromo-grid{grid-template-columns:1fr 420px;gap:38px} .bgpromo-img{width:420px;height:320px} } @media(max-width:900px){ .bgpromo{padding:56px 0} .bgpromo .pad{padding:0 22px} .bgpromo-grid{grid-template-columns:1fr;gap:28px} .bgpromo h2{max-width:none} .bgpromo-img{width:100%;height:260px} .bgpromo-img::before,.bgpromo-img::after{height:6px} .bgpromo-img::after{width:6px;height:auto} } /* ============================================================ BUYING GUIDE PROMO · homepage and Home Use Sand ground, image left, copy right - so it alternates against the navy David section above it on Home Use. ============================================================ */ .bgpromo{ background:linear-gradient(180deg,#F8F4ED 0%,#F1E9DB 100%); padding:84px 0; } .bgpromo .pad{padding:0 46px} .bgpromo-grid{ display:grid;grid-template-columns:0.92fr 1.08fr;gap:56px;align-items:center; } .bgpromo-img{ min-height:430px; background-size:cover;background-position:center; background-color:#E9E2D6; position:relative; } /* navy two-sided frame, opening bottom-left */ .bgpromo-img::before{ content:"";position:absolute;bottom:0;left:0;right:0;height:10px;z-index:6; background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 34%,rgba(15,23,42,0) 100%); } .bgpromo-img::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:10px;z-index:6; background:linear-gradient(0deg,var(--navy) 0%,var(--navy) 34%,rgba(15,23,42,0) 100%); } .bgpromo h2{color:var(--navy);max-width:17ch;margin-bottom:14px} .bgpromo-lede{ color:var(--ink);font-size:17px;line-height:1.6;max-width:52ch;margin-bottom:22px; } .bgpromo-list{ list-style:none;margin:0 0 26px;padding:0; border-top:1px dotted rgba(15,23,42,.42); } .bgpromo-list li{ position:relative;padding:12px 0 12px 28px; border-bottom:1px dotted rgba(15,23,42,.42); color:var(--ink-soft);font-size:15.5px;line-height:1.5; } .bgpromo-list li::before{ content:"";position:absolute;left:2px;top:19px; width:9px;height:9px;background:var(--gold); } .bgpromo-cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap} @media(max-width:900px){ .bgpromo{padding:56px 0} .bgpromo .pad{padding:0 22px} .bgpromo-grid{grid-template-columns:1fr;gap:26px} .bgpromo-img{min-height:260px} .bgpromo-img::before{height:6px} .bgpromo-img::after{width:6px} .bgpromo h2{max-width:none} } /* .irl lost its heading block, which carried a bottom margin - even the padding up so the grid is not sitting low in the section */ .irl > .maxw > .bento{margin-top:0} .irl{padding-top:104px} .irl .pad.bento{margin-top:0} /* the two portrait clips are 4:5 - hold them to a sensible width so they do not tower over the spec table beside them */ .mvcap{ margin:10px 0 0;font-size:14px;font-weight:700; color:var(--ink-soft); } @media(max-width:760px){ } /* ============================================================ SPECIFIERS PAGE ============================================================ */ .specnums{background:#fff;padding:84px 0} .specnums .pad,.around .pad,.through .pad,.sprocess .pad,.sproof .pad{padding:0 46px} .specnums h2{max-width:20ch;margin-bottom:16px} .specnums .intro{font-size:17px;line-height:1.6;max-width:66ch;color:var(--ink-soft);margin-bottom:34px} /* dimensions table */ .dimtable{border-top:1px dotted rgba(15,23,42,.42)} .dimrow{ display:grid;grid-template-columns:1.15fr .45fr 1.75fr .7fr .7fr .8fr;gap:16px; padding:15px 0;border-bottom:1px dotted rgba(15,23,42,.42); font-size:16px;line-height:1.4; } .dimrow.dimhead{ font-size:13px;font-weight:700;letter-spacing:0;color:var(--gold-ink); padding:12px 0; } .dimrow b{font-weight:700} .spec2{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-top:38px} .spec2 h3{font-size:19px;margin-bottom:9px} .spec2 p{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0} /* design around */ .around{background:linear-gradient(180deg,#F8F4ED 0%,#F1E9DB 100%);padding:80px 0} .around h2{max-width:24ch;margin-bottom:30px} .around-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px dotted rgba(15,23,42,.45); } .around-grid > *{padding:24px 30px 0 0} .around-grid > * + *{padding-left:30px;border-left:1px dotted rgba(15,23,42,.45)} .around-grid > *:last-child{padding-right:0} .around-grid h3{font-size:19px;margin-bottom:8px} .around-grid p{font-size:15.5px;line-height:1.55;color:var(--ink-soft);margin:0} .around-note{ margin:30px 0 0;padding-top:20px; border-top:1px dotted rgba(15,23,42,.45); font-size:15.5px;line-height:1.6;max-width:74ch;color:var(--ink-soft); } /* work through you */ .through{background:linear-gradient(180deg,#0F172A 0%,#0B1220 100%);padding:84px 0} .through-grid{display:grid;grid-template-columns:1fr 520px;gap:56px;align-items:center} .through h2{color:#fff;max-width:18ch;margin-bottom:18px} .through-lede{color:#C3D0E0;font-size:17px;line-height:1.6;max-width:56ch;margin-bottom:26px} .through-list{list-style:none;margin:0 0 30px;padding:0;border-top:1px dotted rgba(255,255,255,.42)} .through-list li{ position:relative;padding:14px 0 14px 30px; border-bottom:1px dotted rgba(255,255,255,.42); color:#D7E0EC;font-size:16px;line-height:1.5; } .through-list li::before{ content:"";position:absolute;left:2px;top:22px;width:9px;height:9px;background:var(--gold); } .through-img{ width:520px;height:430px;background-size:cover;background-position:center;position:relative; } .through-img.frame-tr::before{ content:"";position:absolute;top:0;left:0;right:0;height:10px;z-index:6; background:linear-gradient(270deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } .through-img.frame-tr::after{ content:"";position:absolute;top:0;bottom:0;right:0;width:10px;z-index:6; background:linear-gradient(180deg,#fff 0%,#fff 34%,rgba(255,255,255,0) 100%); } /* process */ .sprocess{background:#fff;padding:82px 0} .sprocess h2{max-width:22ch;margin-bottom:30px} .sprocess .steps{ list-style:none;counter-reset:s;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px dotted rgba(15,23,42,.42); } .sprocess .steps li{ counter-increment:s;position:relative; padding:26px 30px 26px 0; border-bottom:1px dotted rgba(15,23,42,.42); } .sprocess .steps li:nth-child(3n+2), .sprocess .steps li:nth-child(3n){ padding-left:30px;border-left:1px dotted rgba(15,23,42,.42); } .sprocess .steps li::before{ content:counter(s); display:block;font-weight:900;font-size:13px;color:var(--gold-ink);margin-bottom:6px; } .sprocess .steps h3{font-size:18px;margin-bottom:7px} .sprocess .steps p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0} /* proof */ .sproof{background:linear-gradient(180deg,#FFFFFF 0%,#FBF8F3 100%);padding:80px 0} .sproof h2{margin-bottom:14px} .sproof .intro{font-size:17px;line-height:1.6;max-width:70ch;color:var(--ink-soft);margin-bottom:32px} .sgal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .sgal .tile{ position:relative;aspect-ratio:3/4;background-size:cover;background-position:center; } .sgal .cap{ position:absolute;left:14px;bottom:12px;z-index:3; color:#fff;font-size:14px;font-weight:700; text-shadow:0 1px 10px rgba(0,0,0,.7); } .sgal .tile::after{ content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(6,9,16,.6) 0%,rgba(6,9,16,0) 45%); } @media(max-width:1100px){ .through-grid{grid-template-columns:1fr 420px;gap:38px} .through-img{width:420px;height:360px} } @media(max-width:900px){ .specnums,.around,.through,.sprocess,.sproof{padding:56px 0} .specnums .pad,.around .pad,.through .pad,.sprocess .pad,.sproof .pad{padding:0 22px} .dimrow{grid-template-columns:1fr 1fr;gap:4px 16px;font-size:15px;padding:16px 0} .dimrow.dimhead{display:none} .dimrow span:nth-child(3){grid-column:1/-1;color:var(--ink-soft);font-size:14px} .dimrow span:nth-child(4)::before{content:"Chamber ";font-weight:700;color:var(--ink-soft)} .dimrow span:nth-child(5)::before{content:"Ancillary ";font-weight:700;color:var(--ink-soft)} .dimrow span:nth-child(6)::before{content:"Installed ";font-weight:700;color:var(--ink-soft)} .dimrow span:nth-child(4),.dimrow span:nth-child(5),.dimrow span:nth-child(6){font-size:14px} .spec2{grid-template-columns:1fr;gap:26px} .around-grid,.sprocess .steps{grid-template-columns:1fr} .around-grid > *,.sprocess .steps li{padding:22px 0 0} .around-grid > * + *{padding-left:0;border-left:0;border-top:1px dotted rgba(15,23,42,.45);margin-top:22px} .sprocess .steps li:nth-child(3n+2), .sprocess .steps li:nth-child(3n){padding-left:0;border-left:0} .sprocess .steps li{padding-bottom:22px} .through-grid{grid-template-columns:1fr;gap:28px} .through-img{width:100%;height:280px} .sgal{grid-template-columns:1fr 1fr} } /* note under the dimensions table */ .dimnote{ margin:18px 0 0;font-size:14.5px;line-height:1.6; max-width:78ch;color:var(--ink-soft); } /* ============================================================ MODEL VIDEO ROW · models page The .mrow / .mvid / .vplay markup shipped without any CSS, so the poster image rendered at its intrinsic width (up to 900px) and broke the layout on anything narrower than desktop. Posters are mixed portrait and landscape, so a fixed aspect ratio with object-fit normalises all three. ============================================================ */ .model .mrow{ display:grid; grid-template-columns:392px minmax(0,1fr); gap:44px; align-items:start; /* the gallery above sits flush to the row - the text column gets 22px from .mmeta, the poster had nothing */ margin-top:26px; } .model .mvid{ -webkit-appearance:none;appearance:none; display:block;position:relative; width:100%;margin:0;padding:0;border:0; background:#0B1220;cursor:pointer; overflow:hidden; aspect-ratio:4/3; } .model .mvid img{ display:block;width:100%;height:100%; object-fit:cover;object-position:center; } /* play control */ .model .vplay{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; pointer-events:none; } .model .vplay svg{width:62px;height:62px;display:block} .model .vplay circle{fill:rgba(11,18,32,.55);stroke:#fff;stroke-width:3} .model .vplay path{fill:#fff} .model .mvid:hover .vplay circle{fill:rgba(11,18,32,.78)} .model .mvid:focus-visible{outline:3px solid var(--gold);outline-offset:3px} @media(max-width:1000px){ .model .mrow{grid-template-columns:300px minmax(0,1fr);gap:28px;margin-top:22px} .model .vplay svg{width:52px;height:52px} } @media(max-width:760px){ .model .mrow{grid-template-columns:1fr;gap:20px;margin-top:20px} .model .mvid{aspect-ratio:16/10} }