/* Osoji — preview website. * * The design handoff authored every rule as an inline style attribute (a * constraint of the tool it was written in) and asked for them to be lifted into * a stylesheet. This is that stylesheet: the token table, type scale, spacing and * motion rules are the handoff's values verbatim. * * Two rules run through the whole file and are worth knowing before editing: * - border-radius is 0 EVERYWHERE and there are no shadows. Depth comes from * 1px hairlines and the two dark bands. * - every multi-column grid is repeat(auto-fit, minmax(min(100%, Npx), 1fr)). * The min() is load-bearing: a bare minmax(320px, 1fr) does not shrink below * 320px, so it overflows a 320px viewport, and the overflow-x on the page * hides the scrollbar that would have shown you. Verify at 320, not 375. */ :root { --ink: #16262b; --deep: #1e3238; --deep-line: #2e4a52; --brand: #3b5c64; --brand-strong: #2c474e; --brand-hover: #16262b; --clay: #8e5335; --clay-line: #e0c9b8; --clay-dark-bg: #c99c7e; --paper: #f5f2ec; --paper-2: #efebe2; --card: #fff; --field: #fbfaf7; --line: #dedacf; --line-soft: #ede9e0; --line-soft-2: #e4dfd4; --border-2: #c9c2b4; --muted: #56666b; /* The handoff's third tier was #8A9698, described there as "tertiary/meta text (large or non-essential only)". Every place it is actually used carries real information — the unit under each stepper ("por m²"), the detail under each quote line ("5 kg"), "· opcional", "Reseña publicada en Google" — and at 11–14px that is body text, which the same handoff requires to clear 4.5:1. #8A9698 is 2.73:1 on paper and 3.04:1 on white, so nine strings failed WCAG 1.4.3. Darkened to the lightest value that clears 4.5:1 against all three surfaces it appears on (4.64 paper / 5.18 white / 4.97 field), which keeps the tier visibly lighter than --muted rather than collapsing the two. */ --muted-2: #5f7073; --on-dark: #efebe2; --on-dark-muted: #a9bcc0; --on-dark-label: #8fa8ae; --water: #dce6e6; --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); /* NO padding-bottom here, and that is the whole point of this comment. The claim pill sits bottom-left and the chat bubble bottom-right, both injected at deploy, so the page owes them ~96px of clearance or they cover the footer's last row of links. Putting that on reserved the space OUTSIDE the footer, and the body's background is --paper while the footer is --deep — so scrolling to the end showed a 96px strip of pale paper under the dark band, which reads as the page having fallen off its own end. The clearance now lives in the footer's own padding-bottom, where it is covered by the footer's background. See .footer below. */ /* clip, not hidden: hidden on the body turns the whole page into a scroll container and breaks position:sticky on the header. */ overflow-x: clip; } img { display: block; max-width: 100%; } h1, h2, h3, p, ul, ol, figure, table { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: var(--brand-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--clay); } a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; } ::selection { background: var(--brand-strong); color: var(--paper); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Visible to a screen reader, not to the eye. Used to give eleven identical "Cotizar por WhatsApp" links eleven distinguishable accessible names. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link — the page is long and the first landmark is a sticky header. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 40; background: var(--brand-strong); color: var(--paper); padding: 12px 18px; font-size: 15px; } .skip:focus { left: 0; color: var(--paper); } /* ---------------------------------------------------------------- layout --- */ .wrap { max-width: 1160px; margin: 0 auto; padding: 0 18px; } .section { max-width: 1160px; margin: 0 auto; padding: 64px 18px 0; } .band { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 64px; padding: 56px 0 60px; } .band-dark { background: var(--deep); color: var(--on-dark); margin-top: 64px; padding: 60px 0; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: start; } /* ------------------------------------------------------------- typography --- */ .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; } .eyebrow-dark { color: var(--on-dark-label); } .h1 { font-size: clamp(31px, 7.2vw, 52px); line-height: 1.05; letter-spacing: -0.022em; font-weight: 400; margin-bottom: 18px; text-wrap: pretty; } .h2 { font-size: clamp(26px, 5.4vw, 38px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 400; text-wrap: pretty; } .lead { font-size: clamp(16px, 3.6vw, 18px); line-height: 1.62; color: var(--muted); text-wrap: pretty; } .body { font-size: 15.5px; line-height: 1.65; color: var(--muted); } .small { font-size: 13px; line-height: 1.55; color: var(--muted); } .label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); } .num { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; font-size: 16px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; font-family: inherit; cursor: pointer; border-radius: 0; transition: background 0.18s ease, border-color 0.18s ease; } .btn-primary { background: var(--brand-strong); color: var(--paper); border: 1px solid var(--brand-strong); } .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--paper); } .btn-secondary { background: transparent; border: 1px solid var(--border-2); color: var(--brand-strong); font-weight: 400; } .btn-secondary:hover { border-color: var(--brand-strong); background: var(--paper-2); color: var(--brand-strong); } .btn-sm { min-height: 48px; padding: 0 20px; font-size: 15px; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* The commit bar of a mock: full width, and inert on purpose. */ .btn-commit { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 52px; background: var(--brand-strong); color: var(--paper); border: 1px solid var(--brand-strong); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; font-family: inherit; cursor: pointer; transition: background 0.18s ease; } .btn-commit:hover { background: var(--brand-hover); border-color: var(--brand-hover); } .link-caps { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-strong); text-decoration: none; border-bottom: 1px solid var(--border-2); transition: color 0.18s ease, border-color 0.18s ease; } .link-caps:hover { color: var(--clay); border-color: var(--clay); } /* ---------------------------------------------------------------- header --- */ .header { position: sticky; top: 0; z-index: 30; background: rgba(245, 242, 236, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .header-in { max-width: 1160px; margin: 0 auto; padding: 9px 18px; display: flex; align-items: center; gap: 14px; } .header-logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; } .header-logo img { width: 92px; height: auto; } .header-wa { margin-left: auto; min-height: 44px; padding: 0 18px; font-size: 14px; letter-spacing: 0.02em; } /* ------------------------------------------------------------------ hero --- */ .hero { max-width: 1160px; margin: 0 auto; padding: 34px 18px 10px; } .hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 34px; align-items: center; } .hero-logo { width: min(310px, 80%); height: auto; margin-bottom: 26px; } .hero-lead { max-width: 46ch; margin-bottom: 26px; } .hero-btns { margin-bottom: 22px; } .facts { display: flex; flex-wrap: wrap; gap: 9px 18px; align-items: center; font-size: 13.5px; color: var(--muted); } .facts .status { display: flex; align-items: center; gap: 8px; color: var(--brand-strong); font-weight: 500; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; flex: none; } .hero-fig { position: relative; } .hero-fig img { width: 100%; height: auto; border: 1px solid var(--line); } .hero-fig figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(22, 38, 43, 0.9); color: var(--on-dark); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 13px; } /* ----------------------------------------------------------- how it works --- */ .how { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 44px; } .how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: center; } .how-copy { padding: 44px 0 48px; } .steps { display: grid; gap: 26px; max-width: 44ch; } .steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; } .steps .ord { font-size: 12px; letter-spacing: 0.1em; color: var(--clay); padding-top: 4px; } .steps h2 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; } .steps p { font-size: 15px; line-height: 1.6; color: var(--muted); } .how-fig { display: flex; align-items: center; justify-content: center; padding: 10px 0; } .how-fig img { width: 100%; height: auto; /* multiply so the photo's white ground disappears into the white band */ mix-blend-mode: multiply; } /* -------------------------------------------------------------- services --- */ .sec-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; align-items: end; margin-bottom: 38px; } .sec-head p.body { max-width: 42ch; font-size: 15px; } .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 34px; border-top: 1px solid var(--line); } .services li { border-bottom: 1px solid var(--line); padding: 22px 0; display: flex; flex-direction: column; gap: 8px; } .services h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.008em; } .services p { font-size: 14.5px; line-height: 1.58; color: var(--muted); max-width: 38ch; } .services .link-caps { margin-top: 2px; } .pricecard { margin-top: 48px; background: var(--card); border: 1px solid var(--line); /* The table is wide; let it scroll inside the card rather than push the page. */ overflow-x: auto; } .pricecard-head { padding: 26px 22px 8px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; } .pricecard-head h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; } .pending { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); } .pricetable { width: 100%; border-collapse: collapse; font-size: 15px; } .pricetable caption { text-align: left; padding: 6px 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted); } .pricetable th, .pricetable td { /* 12px horizontal, NOT the card's 22px: at 22px this table forces the page to 371px wide and 320px viewports get an unreachable right edge. */ padding: 14px 12px; text-align: left; } .pricetable thead th { padding: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); font-weight: 500; } .pricetable thead th:last-child, .pricetable td:last-child { text-align: right; } .pricetable tbody th { font-weight: 400; border-bottom: 1px solid var(--line-soft); } .pricetable tbody td { border-bottom: 1px solid var(--line-soft); color: var(--muted); } .pricetable tbody td:last-child { color: var(--clay); font-variant-numeric: tabular-nums; } .services-note { margin-top: 26px; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 66ch; text-wrap: pretty; } /* ------------------------------------------------------------- calculator --- */ .quote-intro { max-width: 56ch; margin-bottom: 34px; } .quote-intro .h2 { margin-bottom: 16px; } .card { border: 1px solid var(--line); background: var(--card); padding: 22px; } .card-paper { background: var(--paper); } .card-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px; } .card-head h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; } .demo-badge { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); border: 1px solid var(--clay-line); padding: 6px 9px; } .kg-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .kg-row h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; } .kg-value { font-size: 18px; font-weight: 500; color: var(--brand-strong); font-variant-numeric: tabular-nums; } .range { width: 100%; min-height: 44px; accent-color: var(--brand-strong); background: transparent; } .range-help { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-bottom: 26px; } .label-rule { padding-bottom: 12px; border-bottom: 1px solid var(--line); } .steppers li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line-soft); } .steppers .name { font-size: 15.5px; line-height: 1.4; } .steppers .unit { display: block; font-size: 12.5px; color: var(--muted-2); } .stepper { display: flex; align-items: center; gap: 4px; flex: none; } .stepper button { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--field); color: var(--brand-strong); font-size: 19px; line-height: 1; cursor: pointer; font-family: inherit; } .stepper button:hover { border-color: var(--brand-strong); } .stepper .count { min-width: 34px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; font-size: 14px; font-family: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--field); color: var(--brand-strong); transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease; } .chip:hover { border-color: var(--brand-strong); } .chip[aria-pressed='true'] { border-color: var(--brand-strong); background: var(--brand-strong); color: var(--paper); } .extras-label { margin: 22px 0 10px; } .qlines li { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-soft-2); } .qlines .qlabel { font-size: 15px; line-height: 1.4; } .qlines .qdetail { display: block; font-size: 12.5px; color: var(--muted-2); } .qlines .qamount { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--brand-strong); flex: none; } .qtotal { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; padding: 14px 0; border-bottom: 1.5px solid var(--ink); } .qtotal-label { font-size: 16px; font-weight: 500; } .qtotal-value { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; } .qhint { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 12px 0 22px; } .field-label { display: block; margin-bottom: 9px; } .field-label .opt { text-transform: none; letter-spacing: 0; color: var(--muted-2); } .field { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); background: var(--card); font-size: 15px; color: var(--ink); font-family: inherit; margin-bottom: 14px; border-radius: 0; } .field-on-white { background: var(--field); } .mock-note { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--muted); } .mock-note + .btn { margin-top: 12px; } /* --------------------------------------------------------------- gallery --- */ .gal-head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: baseline; justify-content: space-between; margin-bottom: 32px; } .gal-head p.note { font-size: 14px; color: var(--on-dark-muted); max-width: 34ch; line-height: 1.6; } .gal { display: grid; gap: 16px; } .gal-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; } .gal figure { margin: 0; } .gal .frame { overflow: hidden; border: 1px solid var(--deep-line); background: var(--ink); } .gal .frame img { width: 100%; height: 100%; object-fit: cover; } .ratio-32 { aspect-ratio: 3 / 2; } .ratio-11 { aspect-ratio: 1 / 1; } .gal figcaption { margin-top: 11px; font-size: 13.5px; line-height: 1.55; color: var(--on-dark-muted); } /* ---------------------------------------------------------------- pickup --- */ .pickup-intro { margin-bottom: 34px; max-width: 52ch; } .pickup-intro .h2 { margin-bottom: 16px; } .mapcard { background: var(--card); border: 1px solid var(--line); } .mapcard .map-in { padding: 14px 16px 0; } .mapcard svg { width: 100%; height: auto; display: block; background: var(--paper); } .zonelist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 2px 14px; padding: 18px 16px 20px; font-size: 13.5px; color: var(--muted); } .zonelist li { display: flex; align-items: center; gap: 8px; min-height: 26px; } .zonelist .dot { width: 5px; height: 5px; } .mapnote { border-top: 1px solid var(--line-soft); padding: 14px 16px; font-size: 13px; line-height: 1.55; color: var(--muted); } .group-label { margin-bottom: 10px; } .chips-group { margin-bottom: 22px; } /* --------------------------------------------------------------- reviews --- */ .eyebrow-lg { margin-bottom: 30px; } .review { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 32px; align-items: start; } .stars { font-size: 24px; letter-spacing: 0.14em; color: var(--clay); margin-bottom: 20px; } .pullquote { font-size: clamp(21px, 4.4vw, 30px); line-height: 1.34; letter-spacing: -0.015em; font-weight: 400; text-wrap: pretty; } /* The review is one real Google review, written in Spanish. On the English page the original stays put and the translation is labelled as one — a quotation that has been silently rewritten is no longer a quotation. */ .review-translation { display: block; margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; } .review figcaption { font-size: 15px; line-height: 1.6; color: var(--muted); border-left: 1px solid var(--line); padding-left: 22px; } .review figcaption .who { display: block; color: var(--ink); font-weight: 500; font-size: 16px; margin-bottom: 6px; } .review figcaption .meta { display: block; margin-bottom: 4px; } .review figcaption .src { display: block; color: var(--muted-2); font-size: 14px; margin-bottom: 18px; } /* ------------------------------------------------------- hours / contact --- */ .infocard { background: var(--card); border: 1px solid var(--line); padding: 26px 22px; } .infocard h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 20px; } .hours { font-size: 15.5px; } .hours li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); } .hours li:last-child { border-bottom: 0; } .hours span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); } .hours-status { margin-top: 18px; font-size: 14px; color: var(--brand-strong); } .pay-label { margin: 26px 0 12px; font-weight: 400; } .pay { display: flex; flex-wrap: wrap; gap: 8px; } .pay li { border: 1px solid var(--line); padding: 8px 12px; font-size: 13.5px; color: var(--muted); } .addr { font-style: normal; font-size: 15.5px; line-height: 1.65; color: var(--muted); margin-bottom: 20px; } .where-copy { max-width: 40ch; margin-bottom: 22px; } .contact-copy { max-width: 44ch; margin: 18px 0 26px; } .contact-btns { margin-bottom: 26px; } .card-title { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 18px; } .contact-list li { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; /* 2px here and 44px on the children rather than 13px here: the row keeps its ~48px rhythm, but the phone number and the Facebook link become 44px-tall targets instead of 22px ones. They are standalone links in a list, so the inline-in-a-sentence exemption WCAG 2.5.8 offers does not cover them. */ padding: 2px 0; border-bottom: 1px solid var(--line-soft); font-size: 15.5px; } .contact-list li > * { display: inline-flex; align-items: center; min-height: 44px; } .contact-list li:last-child { border-bottom: 0; } .contact-list .val { text-align: right; color: var(--muted); } .contact-cta { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } .contact-cta p { font-size: 15px; line-height: 1.6; color: var(--muted); margin-bottom: 16px; } .bilingual { font-size: 14px; line-height: 1.6; color: var(--muted-2); max-width: 40ch; } /* ---------------------------------------------------------------- footer --- */ .footer { background: var(--deep); color: var(--on-dark); margin-top: 64px; /* 40px of the footer's own bottom padding, plus the 96px of clearance the claim pill and the chat bubble need. Both are fixed to the bottom corners, so without it they sit on top of the legal row. Keeping it here rather than on means the dark band runs all the way to the end of the document and there is nothing below the footer to scroll into. */ padding: 52px 0 136px; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; padding-bottom: 34px; border-bottom: 1px solid var(--deep-line); } .footer img { width: 180px; height: auto; margin-bottom: 18px; } .footer .blurb { font-size: 14.5px; line-height: 1.65; color: var(--on-dark-muted); max-width: 30ch; } .footer h2 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-label); margin-bottom: 16px; font-weight: 500; } .footer address, .footer .hourlist { font-style: normal; font-size: 14.5px; line-height: 1.7; color: var(--on-dark-muted); } .footer .hourlist { font-variant-numeric: tabular-nums; } .footer-links { display: grid; gap: 4px; } .footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-muted); font-size: 14.5px; } .footer-links a.strong { color: var(--on-dark); } .footer-links a:hover, .footer-legal a:hover { color: var(--clay-dark-bg); } .footer-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 22px; align-items: center; } .footer-legal a, .footer-legal button { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--on-dark-muted); } #cookie-settings { padding: 0; background: none; border: 0; border-bottom: 1px solid #4a6a70; font-family: inherit; cursor: pointer; } #cookie-settings:hover { color: var(--clay-dark-bg); } /* Language menu — the same shape heegstra.io uses: every language named in its own language, the current one shown and marked, never hidden. */ .lang-menu { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; } .lang-menu-label { font-size: 13px; color: var(--on-dark-muted); } .lang-menu a { font-size: 13px; color: var(--on-dark-muted); display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; } .lang-menu a[aria-current='page'] { font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; color: var(--on-dark); } /* Language-suggestion bar — shown only when the browser asks for the other language. No cookie: the choice lives in localStorage and only once made. */ .lang-suggest { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 10px 18px; background: var(--ink); color: var(--on-dark); font-size: 14px; } .lang-suggest[hidden] { display: none; } .lang-suggest p { margin: 0; } .lang-suggest-actions { display: flex; align-items: center; gap: 14px; } .lang-suggest a { color: var(--clay-dark-bg); font-weight: 600; } .lang-suggest a:hover { color: var(--on-dark); } .lang-suggest button { background: none; border: none; padding: 0; color: var(--on-dark-muted); font: inherit; cursor: pointer; } .lang-suggest button:hover { color: var(--on-dark); } /* The claim pill and the chat bubble are fixed; neither belongs on paper. */ @media print { .hsov-pill, .hsov-backdrop, .lang-suggest, .header { display: none !important; } }