/* CARIBASOL V2-mix — shared by index.html, properties.html, property.html (giro 8). 1 · header menu font (D-120: Inter, variant a — the ?nav review variants were removed in giro 12). 2 · cards (D-104, D-105 giro 9): interactive shadow + drawn border on every card of the site; the whole card tilts, text included, rasterised at 2× while it moves so the text stays sharp, and every card is back to transform: none at rest. Behaviour: js/cards.js. Motion: transform / opacity (+ the registered --edge sweep, paint-only on a 2 px ring); prefers-reduced-motion and touch = static. */ /* ======================= 1 · menu font (D-099 → D-120, giro 12: variant a) ======================= */ /* Inter 500, uppercase, tracked. The review variants b / c and the ?nav switch were removed in giro 12. */ :root { --nav-ff: Inter, system-ui, sans-serif; --nav-fw: 500; --nav-fs: max(12px, calc(13px * var(--ui))); --nav-ls: .12em; --nav-tt: uppercase; --cta-fs: max(12px, calc(12px * var(--ui))); } @media (min-width: 1024px) and (max-width: 1439px) { :root { --nav-fs: max(12px, calc(13px * var(--ui))); } } /* ======================= 2 · cards (D-104 → D-105 giro 9, extends D-086 / D-098) ======================= */ /* Structure: stage .t3d (never transformed: position, hit area, dynamic shadow, tilt variables) > .t3d__card (isolated; ::before = the paper face, ::after = the drawn border) > content. Giro 9 (D-105): the WHOLE card tilts, text included, and stays sharp — see js/cards.js: while tilting the card is perspective · rotate · scale(1/SS) on its own layer (will-change only then) and its content, face and border are scale(SS) around the card centre, so the plane is rasterised at SS× (2× on standard screens) and the projection no longer washes the text out. At rest (and when the pointer rests on a card) .is-tilt and every variable are removed: transform none, native text. Variant: .t3d--ghost (T-RESULTS / Similar: the paper face sits around the photograph-first card; present at rest since giro 11, D-115). */ @property --edge { syntax: ''; inherits: false; initial-value: 0%; } .t3d { position: relative; --face-in: 0px; --face-r: calc(18px * var(--ui)); } /* giro 11 (D-115): the light resting shadow, always present. Small offsets and spreads no larger than a quarter of the radius, so the shadow keeps the card's round corners (giro 10: 0 14px 28px -16px shrank the corner radius from 24 to 8 px → the "square" shadow under the card). Light from the top-left. */ :root { --rest-sh: 0 1px 2px rgba(14, 34, 64, .06), 1px 4px 10px -2px rgba(14, 34, 64, .07), 2px 12px 28px -6px rgba(14, 34, 64, .12); } .t3d__card { position: relative; isolation: isolate; } /* the face: background, hairline and the light resting shadow (D-086) */ .t3d__card::before { content: ''; position: absolute; inset: var(--face-in); z-index: -1; border-radius: var(--face-r); background: var(--face-bg, #FFFFFF); border: 1px solid var(--face-line, rgba(14, 34, 64, .08)); box-shadow: var(--rest-sh); pointer-events: none; } /* the border (D-098): a 2 px ring drawn along the outline, blue → a touch of gold; above the content only at the edge */ .t3d__card::after { content: ''; position: absolute; inset: calc(var(--face-in) - 1px); z-index: 4; border-radius: calc(var(--face-r) + 1px); padding: 2px; pointer-events: none; background: conic-gradient(from 225deg, rgba(13, 83, 161, .95) 0%, rgba(13, 83, 161, .8) calc(var(--edge) * .62), rgba(244, 132, 12, .95) var(--edge), transparent var(--edge)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: --edge .7s cubic-bezier(.65, 0, .35, 1), opacity .25s ease; } /* the dynamic shadow (D-086 → D-115): under the card, on the stage (not tilted), it forms on the side opposite the pointer and grows with the hover. giro 11: a FILLED plane blurred, not a box-shadow. A box-shadow is never painted under its own box: shifted by up to ≈ 21 px, the unshaded box of the giro 5–10 plane slid out from under the card as a pale strip along the bottom / right edge (the "second card"). A blurred fill has no hole, follows the radius and fades out without an edge. Moves with transform / opacity only. */ .t3d::before { content: ''; position: absolute; inset: calc(var(--face-in) + calc(11px * var(--ui))) calc(var(--face-in) + calc(8px * var(--ui))) calc(var(--face-in) + calc(3px * var(--ui))); z-index: 0; border-radius: var(--face-r); pointer-events: none; background: rgba(14, 34, 64, .34); filter: blur(18px); opacity: var(--sho, 0); transform: translate3d(var(--shx, 0px), var(--shy, 0px), 0); } .t3d > .t3d__card { z-index: 1; } /* photograph plane (drifts a little inside its frame while the card tilts — js/cards.js) */ .t3d__ph { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } .t3d__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* tilting (fine pointer, motion allowed — .is-tilt only while the card moves; js/cards.js sets every transform-origin to the card centre) */ .t3d.is-tilt > * { transform: perspective(var(--tp, 1200px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; } .t3d.is-tilt > .t3d__card { transform: perspective(var(--tp, 1200px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ssi, 1)); } .t3d.is-tilt > .t3d__card > *, .t3d.is-tilt > .t3d__card::before, .t3d.is-tilt > .t3d__card::after { scale: var(--ss, 1); } /* the border draws on hover (fine pointer) and on keyboard focus of the card link */ @media (hover: hover) and (pointer: fine) { .depth-on .t3d:hover > .t3d__card::after { --edge: 100%; opacity: 1; } } .t3d:has(a:focus-visible) > .t3d__card::after { --edge: 100%; opacity: 1; } /* touch and reduced motion: static border on focus, static resting shadow, nothing moves */ html:not(.depth-on) .t3d__card::after { transition: none; } /* ghost cards (T-RESULTS, Similar): the paper face sits 12 px around the photograph-first card (8 px below 1024). Giro 11 (D-115): the face and its light shadow are present at rest (giro 8–10: boxless at rest, face on hover only); the results / Similar grid gaps are widened so faces never touch. */ .t3d--ghost { --face-in: calc(-9px * var(--ui)); --face-r: calc(23px * var(--ui)); } @media (max-width: 1023px) { .t3d--ghost { --face-in: calc(-6px * var(--ui)); --face-r: calc(20px * var(--ui)); } } /* 16 px gutters below 1024: the face keeps 8 px from the screen edge */ .t3d--ghost > .t3d__card:focus-visible { outline: none; } /* the drawn border is the focus indicator (2 px, ≥ 3:1 on the page) */ @media (prefers-reduced-motion: reduce) { .t3d__card::after { transition: none; } } /* ======================= 2b · the whole card is ONE link (giro 13, D-125) — every card of the site, present and future ======================= */ /* Pattern "stretched link": the card carries data-card; ONE sits on the title and its ::after covers the card plane (the nearest positioned ancestor = .t3d__card / the card itself — nothing between them may be positioned). No wraps a button. Controls inside the card (heart, gallery arrows, share) carry .card-ctl or are .fav / .lc__fav: positioned above the link, they never navigate. js/shell.js adds the same behaviour as a fallback for the moments the ::after cannot cover the card (while a card tilts, D-105, its children are scaled planes and the link's box shrinks to the text block) and keeps Ctrl / ⌘ / middle click = new tab. Keyboard: one Tab stop for the link, one per control; the focus ring is the card's drawn border (§2) — on the whole card. */ [data-card] { cursor: pointer; } .card-link { color: inherit; text-decoration: none; } .card-link:hover { color: inherit; } .card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .card-link:focus-visible { outline: none; } /* the link's accessible name = title + price + reference (giro 13 critique: two Similar cards can share a title) — a visually hidden suffix inside the link */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [data-card] :is(.fav, .lc__fav, .card-ctl) { z-index: 3; } [data-card] :is(.fav, .lc__fav, .card-ctl):not(.fav):not(.lc__fav) { position: relative; } /* focus on the whole card for cards without the drawn border (the drawn border of §2 is the ring of every .t3d card) */ [data-card]:not(.t3d):has(.card-link:focus-visible) { outline: 2px solid #0D53A1; outline-offset: 3px; border-radius: calc(18px * var(--ui)); } /* ======================= 3 · press feedback on every button (D-117, giro 11 → D-121, giro 12) ======================= */ /* Movement + shadow: js/press.js (Web Animations, composite 'add', reduced motion = none). Here only the pressed label colour, instant on press (no colour transition while held) and eased back by each button's own transition on release. Gold per surface — contrast table GIRO11.md §3. */ .is-press[data-press="dark"], .is-press [data-press="dark"] { --press-ink: #FFD9B3; } /* blue / deep buttons — giro 27: a light sun tint, no gold (≥ 8:1 on the pressed blue) */ .is-press[data-press="light"], .is-press [data-press="light"] { --press-ink: #A84808; } /* light buttons: giro 27: the darkened sun, 5.3:1 (a label on its own chip inside a button takes the chip's tone, js/press.js) */ .is-press[data-press="pale"] { --press-ink: #FFD9B3; } /* over the Hero photograph (Home header) */ /* data-press="keep" (social keys, D-121): no colour change — they keep their colours and the D-094 brand fill, and only sink */ .is-press:not([data-press="keep"]), .is-press:not([data-press="keep"]) * { color: var(--press-ink) !important; transition: none !important; } /* ======================= 4 · footer: moved to css/shell.css §3 in giro 13 (D-127 — one shell on every page) ======================= */ /* ======================= 2c · Journal cards stand still (giro 15, D-143) ======================= */ /* .t3d--still: no tilt, no lift, no moving shadow (js/cards.js skips them). Their only motion: the photograph zooms very slowly inside its frame, 1 → 1.03 in 600 ms with a soft ease; the text and the card stay put. The drawn border on hover stays (it draws, it does not move). Reduced motion / touch: nothing. */ .t3d--still .t3d__ph img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .t3d--still:hover .t3d__ph img, .t3d--still:has(a:focus-visible) .t3d__ph img { transform: scale(1.03); } } /* ======================= 5 · disclosure card: title + "+" (giro 15b, D-150) — a COMMON component, every card that opens ======================= */ /* Markup:

  • Text

    • js/acc.js toggles aria-expanded + .is-open. Closed by default; the text opens under the title inside the same card (the others of the row keep their height: the row's grid aligns to the top). Closed text is visibility: hidden (out of the tab order and of screen readers). Opening = grid-template-rows 0fr → 1fr, 220 ms (instant with prefers-reduced-motion: css/base.css). Without JS the text is simply shown. */ .acc__h { margin: 0; } .acc__btn { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui)); width: 100%; min-height: calc(33px * var(--ui)); margin: 0; padding: 0; border: 0; border-radius: calc(6px * var(--ui)); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .acc__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .acc__ico { position: relative; flex: none; width: calc(21px * var(--ui)); height: calc(21px * var(--ui)); border-radius: 50%; background: rgba(13, 83, 161, .1); color: var(--blue); transition: background-color .18s ease; } .acc__ico::before, .acc__ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(9px * var(--ui)); height: 2px; margin: -1px 0 0 calc(-5px * var(--ui)); border-radius: 1px; background: currentColor; } .acc__ico::after { transform: rotate(90deg); transition: transform .22s var(--ease, ease); } .acc.is-open .acc__ico::after { transform: rotate(0deg); } /* "+" → "−" */ @media (hover: hover) and (pointer: fine) { .acc__btn:hover .acc__ico { background: rgba(13, 83, 161, .18); } } .acc__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .22s var(--ease, ease), visibility 0s linear .22s; } .acc__in { min-height: 0; overflow: hidden; } .acc.is-open > .acc__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; } .no-js .acc__panel { grid-template-rows: 1fr; visibility: visible; } .no-js .acc__ico { display: none; } @media (prefers-reduced-motion: reduce) { .acc__panel, .acc__ico::after { transition: none !important; } } /* the cards of an opening row keep their place: the row is aligned to the top, a card grows downwards only */ .tiles--acc { align-items: start; } /* ======================= 6 · the wide Journal card: "lead" (first story of the index) and "lone" (the only visible story, giro 15b) ======================= */ .jr-card--lone { grid-column: 1 / -1; } @media (min-width: 768px) { :is(.jr-card--lead, .jr-card--lone) .jr-card__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto; column-gap: calc(30px * var(--ui)); align-content: center; padding: calc(12px * var(--ui)) calc(30px * var(--ui)) calc(12px * var(--ui)) calc(12px * var(--ui)); } :is(.jr-card--lead, .jr-card--lone) .jr-card__media { grid-row: 1 / span 6; aspect-ratio: 3 / 2; } :is(.jr-card--lead, .jr-card--lone) :is(.jr-card__cat, h2, h3, p, .jr-card__meta, .jr-card__more, .jr-card__flag) { grid-column: 2; padding: 0; } :is(.jr-card--lead, .jr-card--lone) .jr-card__cat { align-self: end; } :is(.jr-card--lead, .jr-card--lone) :is(h2, h3) { font-size: clamp(calc(20px * var(--ui)), calc(1.95vw * var(--ui)), calc(26px * var(--ui))); } :is(.jr-card--lead, .jr-card--lone) p { -webkit-line-clamp: 5; line-clamp: 5; } :is(.jr-card--lead, .jr-card--lone) .jr-card__more { margin-top: 0; } } /* ======================= property card (27.10.2026, Daniel: "the cards are so weak") — every card of the site: Home Featured + New this week (.lc / .mq), Buy and Similar (.card, js), zone and Journal pages (.card, static from tools/_build-pages-giro14.py). Markup of the figures and the foot: js/cards.js CBCard. Title in the brand face · figures with icons · the foot at the bottom (prices on one line across a row): price large, reference small with a tag · badges in colour: Featured = the office's own listings (sun orange + star), New development (green), Sea views (blue) · photo count with a camera. ======================= */ .cardw { display: flex; } .cardw > .card { display: flex; flex-direction: column; width: 100%; } :is(.card__body, .lc__body, .mq__body) { flex: 1; display: flex; flex-direction: column; } :is(.card__title, .lc__t, .mq__t) { font-family: var(--f-brand); font-size: calc(18px * var(--ui)) !important; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: #0E2240; } .specs { list-style: none; margin: calc(10px * var(--ui)) 0 calc(14px * var(--ui)); padding: 0; display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)) calc(16px * var(--ui)); } .specs li { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); font-family: var(--f-text); font-size: max(14px, calc(15px * var(--ui))); color: #4A5B73; white-space: nowrap; } .specs b { font-weight: 700; color: #0E2240; font-variant-numeric: tabular-nums; } .specs__i { width: calc(19px * var(--ui)); height: calc(19px * var(--ui)); flex: none; fill: none; stroke: var(--c-blue, #0D53A1); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .card__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui)); margin-top: auto; padding-top: calc(12px * var(--ui)); border-top: 1px solid #E3EAF3; } .card__foot .card__price { font-family: var(--f-brand); font-size: calc(22px * var(--ui)); font-weight: 700; line-height: 1.1; letter-spacing: 0; color: #0E2240; font-variant-numeric: tabular-nums; } .card__foot .card__price--range { font-size: calc(18px * var(--ui)); } .card__foot .card__price--por { font-family: var(--f-text); font-size: max(15px, calc(15px * var(--ui))); font-weight: 600; color: #4A5B73; } .card__ref { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); font-family: var(--f-text); font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; color: #6B7A90; font-variant-numeric: tabular-nums; white-space: nowrap; } .card__ref .specs__i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); stroke: #8A98AB; } /* badges on the photo */ :is(.badge, .lc__badge) { display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); height: calc(26px * var(--ui)); padding: 0 calc(10px * var(--ui)); border: 0; border-radius: calc(6px * var(--ui)); font-family: var(--f-text); font-size: max(11px, calc(11.5px * var(--ui))); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1; color: #fff; background: rgba(14, 34, 64, .78); box-shadow: 0 2px 8px rgba(5, 26, 54, .28); } :is(.badge--own, .lc__badge) { background: var(--c-cta, #0D53A1); color: #fff; } /* Featured: the logo blue (was the sun orange) */ .badge--newdev { background: #0E7C66; color: #fff; } .badge--sea { background: rgba(255, 255, 255, .94); color: var(--c-blue, #0D53A1); } /* white chip: tells Sea views apart from the blue Featured */ .badge__i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); flex: none; fill: currentColor; } .badges--summary .badge { box-shadow: none; } /* photo count */ :is(.card__count, .lc__n) { display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); height: calc(24px * var(--ui)); padding: 0 calc(8px * var(--ui)); border-radius: calc(6px * var(--ui)); background: rgba(14, 34, 64, .72); color: #fff; font-family: var(--f-text); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; } .count__i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } /* 2 × 2 figures (beds · baths / m² · reference) and the round arrow of the foot */ .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8px * var(--ui)) calc(12px * var(--ui)); } .specs li { min-width: 0; } .specs__ref span { font-size: max(13px, calc(13px * var(--ui))); color: #6B7A90; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } .card__go { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); border-radius: 50%; background: #EEF3F9; color: var(--c-blue, #0D53A1); transition: background-color .2s ease, color .2s ease, transform .2s ease; } .card__go svg { width: calc(17px * var(--ui)); height: calc(17px * var(--ui)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { :is(.cardw, .lc, .mq__card):hover .card__go { background: var(--c-blue, #0D53A1); color: #fff; transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .card__go { transition: none; } } /* ======================= buttons, one family (27.10.2026, Daniel: "like the one of the Sell page") ======================= ct-btn (pages), btn (Buy / property), btn-light / btn-primary (Home): 48 px, 12 px corners, Caribasol Sans bold. Main action = the blue of --c-cta with a soft shadow and, when it carries no icon of its own, the arrow of the Sell button; secondary = white, a soft border, blue on hover. WhatsApp buttons keep their own green (css/shell.css §6). */ :where(.ct-btn, .btn:not(.btn--ghost):not(.cta-bar__ico), .btn-light, .btn-primary):not([href^="https://wa.me/"]):not([data-share-wa]) { min-height: calc(48px * var(--ui)) !important; height: auto !important; padding: 0 calc(22px * var(--ui)) !important; gap: calc(8px * var(--ui)); border: 1.5px solid #DCE5F0; border-radius: calc(12px * var(--ui)) !important; background: #fff; color: #0E2240 !important; font-family: var(--f-brand) !important; font-size: calc(17px * var(--ui)) !important; font-weight: 700 !important; letter-spacing: 0; line-height: 1.1; text-decoration: none !important; box-shadow: 0 1px 2px rgba(14, 34, 64, .06); transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; } @media (hover: hover) and (pointer: fine) { :where(.ct-btn, .btn:not(.btn--ghost):not(.cta-bar__ico), .btn-light):not(.ct-btn--pri):not(.btn--primary):not([href^="https://wa.me/"]):not([data-share-wa]):hover { border-color: var(--c-blue, #0D53A1); color: var(--c-blue, #0D53A1) !important; transform: translateY(-1px); } } :is(.ct-btn--pri, .btn--primary, .btn-primary):not([href^="https://wa.me/"]):not([data-share-wa]) { background: var(--c-cta, #0D53A1) !important; border-color: var(--c-cta, #0D53A1) !important; color: #fff !important; box-shadow: 0 10px 24px -10px rgba(13, 83, 161, .7); } :is(.ct-btn--pri, .btn--primary, .btn-primary):not(:has(svg))::after { content: '→'; font-family: var(--f-text); font-weight: 400; transition: transform .15s ease; } @media (hover: hover) and (pointer: fine) { :is(.ct-btn--pri, .btn--primary, .btn-primary):hover { background: var(--c-cta-h, #0A4589) !important; border-color: var(--c-cta-h, #0A4589) !important; } :is(.ct-btn--pri, .btn--primary, .btn-primary):hover::after { transform: translateX(3px); } } :is(.ct-btn, .btn, .btn-light, .btn-primary):focus-visible { outline: 2px solid var(--c-blue, #0D53A1); outline-offset: 3px; } .btn--sm { min-height: calc(42px * var(--ui)) !important; padding: 0 calc(16px * var(--ui)) !important; font-size: calc(16px * var(--ui)) !important; } :is(.ct-btn, .btn) svg { width: calc(17px * var(--ui)); height: calc(17px * var(--ui)); } @media (prefers-reduced-motion: reduce) { :is(.ct-btn, .btn, .btn-light, .btn-primary), :is(.ct-btn--pri, .btn--primary, .btn-primary)::after { transition: none; } } /* ======================= legal pages (27.10.2026, tools/build-legal.py): Legal notice · Privacy · Cookies ======================= */ .lg { padding: calc(36px * var(--ui)) var(--gx) calc(80px * var(--ui)); } /* the page column (these pages do not load css/pages.css) */ .lg-i { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); flex: none; fill: none; stroke: var(--c-blue, #0D53A1); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .lg-hero { max-width: calc(760px * var(--ui)); } .lg-hero .kicker { margin: 0; font-size: max(12px, calc(12px * var(--ui))); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-blue, #0D53A1); } .lg-hero h1 { margin: calc(8px * var(--ui)) 0 0; font-family: var(--f-brand); font-size: clamp(calc(34px * var(--ui)), calc(4.4vw * var(--ui)), calc(52px * var(--ui))); line-height: 1.05; color: #0E2240; } .lg-hero .lede { margin: calc(14px * var(--ui)) 0 0; font-size: max(17px, calc(19px * var(--ui))); line-height: 1.5; color: #4A5B73; } .lg-meta { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin: calc(16px * var(--ui)) 0 0; } .lg-meta > span:first-child { display: inline-flex; align-items: center; height: calc(30px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: 999px; background: #EEF3F9; font-size: max(13px, calc(13px * var(--ui))); font-weight: 600; color: #4A5B73; } /* key facts */ .lg-glance { list-style: none; margin: calc(30px * var(--ui)) 0 0; padding: 0; display: grid; gap: calc(14px * var(--ui)); grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(220px * var(--ui))), 1fr)); } .lg-glance li { display: grid; gap: calc(6px * var(--ui)); padding: calc(20px * var(--ui)); border-radius: calc(16px * var(--ui)); background: #fff; box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 0 10px 28px -12px rgba(14, 34, 64, .2); } .lg-glance .lg-i { width: calc(42px * var(--ui)); height: calc(42px * var(--ui)); padding: calc(9px * var(--ui)); box-sizing: border-box; border-radius: calc(12px * var(--ui)); background: #EEF3F9; margin-bottom: calc(6px * var(--ui)); } .lg-glance b { font-family: var(--f-brand); font-size: calc(18px * var(--ui)); color: #0E2240; } .lg-glance span { font-size: max(15px, calc(15px * var(--ui))); line-height: 1.5; color: #4A5B73; } .lg-glance a, .lg-sec a { color: var(--c-blue, #0D53A1); text-decoration: underline; text-underline-offset: 3px; } /* body: contents on the left (desktop, sticky), the numbered sections as cards */ .lg-body { display: grid; gap: calc(24px * var(--ui)); margin-top: calc(40px * var(--ui)); } @media (min-width: 1024px) { .lg-body { grid-template-columns: calc(250px * var(--ui)) minmax(0, 1fr); gap: calc(40px * var(--ui)); align-items: start; } } .lg-toc { display: none; } @media (min-width: 1024px) { .lg-toc { display: block; position: sticky; top: calc(var(--sticky-top, 76px) + 24px); padding: calc(18px * var(--ui)); border-radius: calc(16px * var(--ui)); background: #fff; box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 0 10px 28px -14px rgba(14, 34, 64, .18); } } .lg-toc p { margin: 0 0 calc(10px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6B7A90; } .lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: t; } .lg-toc a { display: flex; gap: calc(8px * var(--ui)); padding: calc(7px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(8px * var(--ui)); font-size: max(14px, calc(14px * var(--ui))); line-height: 1.35; color: #0E2240; text-decoration: none; counter-increment: t; } .lg-toc a::before { content: counter(t, decimal-leading-zero); font-variant-numeric: tabular-nums; color: #8A98AB; } @media (hover: hover) and (pointer: fine) { .lg-toc a:hover { background: #F1F5FA; color: var(--c-blue, #0D53A1); } } .lg-main { display: grid; gap: calc(16px * var(--ui)); min-width: 0; } .lg-sec { padding: calc(24px * var(--ui)) calc(22px * var(--ui)); border-radius: calc(18px * var(--ui)); background: #fff; box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 0 12px 32px -14px rgba(14, 34, 64, .2); scroll-margin-top: calc(var(--sticky-top, 76px) + 20px); } @media (min-width: 768px) { .lg-sec { padding: calc(30px * var(--ui)) calc(34px * var(--ui)); } } .lg-sec h2 { display: flex; align-items: center; gap: calc(12px * var(--ui)); margin: 0 0 calc(12px * var(--ui)); font-family: var(--f-brand); font-size: calc(23px * var(--ui)); line-height: 1.2; color: #0E2240; } .lg-n { display: inline-grid; place-items: center; flex: none; width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); border-radius: 50%; background: #EEF3F9; font-family: var(--f-text); font-size: max(13px, calc(13px * var(--ui))); font-weight: 700; color: var(--c-blue, #0D53A1); font-variant-numeric: tabular-nums; } .lg-sec p, .lg-sec li { font-size: max(16px, calc(16px * var(--ui))); line-height: 1.65; color: #33425A; } .lg-sec p { margin: calc(10px * var(--ui)) 0 0; } .lg-sec h2 + p { margin-top: 0; } .lg-sec ul { margin: calc(10px * var(--ui)) 0 0; padding: 0; list-style: none; display: grid; gap: calc(8px * var(--ui)); } .lg-sec li { position: relative; padding-left: calc(22px * var(--ui)); } .lg-sec li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue, #0D53A1); } .lg-sec b { color: #0E2240; } /* the owner / controller card */ .lg-id { margin: calc(16px * var(--ui)) 0 calc(4px * var(--ui)); padding: calc(4px * var(--ui)) calc(18px * var(--ui)); border-radius: calc(14px * var(--ui)); background: #F6F9FC; box-shadow: inset 0 0 0 1px #E3EAF3; display: grid; } .lg-id > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(12px * var(--ui)); padding: calc(13px * var(--ui)) 0; border-top: 1px solid #E3EAF3; } .lg-id > div:first-child { border-top: 0; } @media (min-width: 640px) { .lg-id > div { grid-template-columns: auto calc(170px * var(--ui)) minmax(0, 1fr); align-items: start; } } .lg-id .lg-i { grid-row: span 2; margin-top: 1px; } @media (min-width: 640px) { .lg-id .lg-i { grid-row: auto; } } .lg-id dt { font-size: max(13px, calc(13px * var(--ui))); font-weight: 700; color: #6B7A90; padding-top: 2px; } .lg-id dd { margin: 0; font-size: max(16px, calc(16px * var(--ui))); line-height: 1.5; color: #0E2240; } .lg-id a { color: var(--c-blue, #0D53A1); } /* cookies: storage table (cards on phones) */ .lg-table { margin-top: calc(14px * var(--ui)); overflow-x: auto; border-radius: calc(12px * var(--ui)); box-shadow: inset 0 0 0 1px #E3EAF3; } .lg-table table { width: 100%; border-collapse: collapse; font-size: max(14px, calc(15px * var(--ui))); } .lg-table th { padding: calc(12px * var(--ui)) calc(14px * var(--ui)); background: #F6F9FC; text-align: left; font-size: max(12px, calc(12px * var(--ui))); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6B7A90; } .lg-table td { padding: calc(13px * var(--ui)) calc(14px * var(--ui)); border-top: 1px solid #E8EEF5; vertical-align: top; line-height: 1.5; color: #33425A; } .lg-table code { font-size: .92em; color: #0E2240; background: #EEF3F9; padding: 2px 6px; border-radius: 6px; white-space: nowrap; } .lg-tag { display: inline-flex; align-items: center; height: calc(24px * var(--ui)); padding: 0 calc(9px * var(--ui)); border-radius: 999px; font-size: max(12px, calc(12px * var(--ui))); font-weight: 700; white-space: nowrap; } .lg-tag--n { background: #EEF3F9; color: #4A5B73; } .lg-tag--p { background: #E6F3EC; color: #146C43; } @media (max-width: 767px) { .lg-table { box-shadow: none; overflow: visible; } .lg-table thead { display: none; } .lg-table tr { display: grid; gap: calc(6px * var(--ui)); padding: calc(14px * var(--ui)); margin-bottom: calc(10px * var(--ui)); border-radius: calc(12px * var(--ui)); box-shadow: inset 0 0 0 1px #E3EAF3; } .lg-table td { display: grid; grid-template-columns: calc(96px * var(--ui)) minmax(0, 1fr); gap: calc(8px * var(--ui)); padding: 0; border: 0; } .lg-table td::before { content: attr(data-l); font-size: max(12px, calc(12px * var(--ui))); font-weight: 700; color: #6B7A90; } } /* cookies: the choice (switches) */ .lg-set { margin-top: calc(24px * var(--ui)); padding: calc(24px * var(--ui)); border-radius: calc(20px * var(--ui)); background: linear-gradient(160deg, #0D53A1 0%, #083A73 100%); color: #fff; } @media (min-width: 768px) { .lg-set { padding: calc(30px * var(--ui)) calc(34px * var(--ui)); } } .lg-set__head { display: flex; gap: calc(14px * var(--ui)); align-items: center; margin-bottom: calc(14px * var(--ui)); } .lg-set__head .lg-i { width: calc(46px * var(--ui)); height: calc(46px * var(--ui)); padding: calc(10px * var(--ui)); box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, .14); stroke: #fff; } .lg-set h2 { margin: 0; font-family: var(--f-brand); font-size: calc(24px * var(--ui)); color: #fff; } .lg-set__head p { margin: 2px 0 0; color: #D6E4F5; font-size: max(15px, calc(15px * var(--ui))); } .lg-set__row { display: flex; align-items: center; justify-content: space-between; gap: calc(16px * var(--ui)); padding: calc(16px * var(--ui)) 0; border-top: 1px solid rgba(255, 255, 255, .18); } .lg-set__row b { display: block; font-family: var(--f-brand); font-size: calc(19px * var(--ui)); } .lg-set__row span { font-size: max(15px, calc(15px * var(--ui))); line-height: 1.5; color: #D6E4F5; } .lg-set__always { flex: none; display: inline-flex; align-items: center; height: calc(30px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: 999px; background: rgba(255, 255, 255, .14); font-weight: 700; color: #fff !important; white-space: nowrap; } .lg-switch { position: relative; flex: none; display: inline-flex; cursor: pointer; } .lg-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .lg-switch span[aria-hidden] { width: 54px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, .25); position: relative; transition: background-color .2s ease; } .lg-switch span[aria-hidden]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(5, 26, 54, .3); transition: transform .2s ease; } .lg-switch input:checked + span[aria-hidden] { background: #25C26E; } .lg-switch input:checked + span[aria-hidden]::after { transform: translateX(24px); } .lg-switch input:focus-visible + span[aria-hidden] { outline: 2px solid #fff; outline-offset: 3px; } .lg-set__status { margin: calc(12px * var(--ui)) 0 0; padding: calc(10px * var(--ui)) calc(14px * var(--ui)); border-radius: calc(10px * var(--ui)); background: rgba(255, 255, 255, .1); font-size: max(14px, calc(14px * var(--ui))); color: #fff; } .lg-set__status:empty { display: none; } @media (prefers-reduced-motion: reduce) { .lg-switch span[aria-hidden], .lg-switch span[aria-hidden]::after { transition: none; } }