/* ═══════════════════════════════════════════════════════════════════ LEGUM LEX — EDITORIAL LANDING DESIGN LANGUAGE ─────────────────────────────────────────────────────────────────── The 2026 homepage restructure. Palette and type are the existing Lexcore system, unchanged: warm-paper oklch, ink navy, claret accent, Source Serif 4 / IBM Plex Sans / IBM Plex Mono. Flat only — hairline borders and dark bands carry the depth, never shadows or gradients. What is new is the structure: a 12-column editorial grid, mono-coded section eyebrows, zero-padded numbering and bracket links. EVERY class is prefixed `lxe-`. The page also loads the Lexcore landing primitives and the BizLink `.bzl-scope` token remap, both of which define generic names like .btn and .h2 — unprefixed classes here would collide with them. Motion start states are gated behind `html.lxe-motion`, a class the JS adds itself. If the animation library fails to load, nothing is hidden and the page renders plain. ═══════════════════════════════════════════════════════════════════ */ :root { --lxe-paper: oklch(98.5% 0.004 80); --lxe-paper-2: oklch(96.5% 0.005 80); --lxe-paper-3: oklch(94.5% 0.005 80); --lxe-ink: oklch(18% 0.015 260); --lxe-ink-deep: oklch(16% 0.012 260); /* Secondary/tertiary sit at 36%/48%. At the 40%/58% they started from, 10px mono labels measured ~3.2:1 on paper — under AA. */ --lxe-ink-2: oklch(36% 0.013 260); --lxe-ink-3: oklch(48% 0.010 260); --lxe-claret: oklch(45% 0.09 25); --lxe-claret-lo: oklch(94% 0.04 25); --lxe-claret-hi: oklch(72% 0.09 25); --lxe-verdant: oklch(48% 0.10 155); --lxe-amber: oklch(52% 0.14 68); --lxe-rule: oklch(88% 0.006 80); --lxe-rule-soft: oklch(92% 0.005 80); --lxe-rule-dark: rgba(255, 255, 255, 0.13); --lxe-serif: 'Source Serif 4', Georgia, serif; --lxe-sans: 'IBM Plex Sans', system-ui, sans-serif; --lxe-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --lxe-gut: clamp(1.25rem, 4vw, 4rem); --lxe-band: clamp(3.5rem, 7vw, 6.5rem); --lxe-ease: cubic-bezier(.16, 1, .3, 1); } /* ── Lenis required stylesheet ──────────────────────────────────── Lenis ships these rules and does not work correctly without them. The critical one is `scroll-behavior: auto`: this page's has class="scroll-smooth", which sets scroll-behavior:smooth, and native CSS smooth scrolling fights Lenis's rAF-driven scrolling. The result was a ~600ms dead zone before the page moved at all and roughly a quarter of the requested distance travelled after 1.2s. `lenis-stopped { overflow: hidden }` is what actually holds the page still behind an open modal — with Lenis running, body{overflow:hidden} alone no longer does it. ──────────────────────────────────────── */ html.lenis, html.lenis body { height: auto; } /* Not scoped to .lenis-smooth: this build only stamps `lenis` on , so the .lenis-smooth form Lenis documents never matched here. */ html.lenis { scroll-behavior: auto !important; } html.lenis.lenis-smooth { scroll-behavior: auto !important; } html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } html.lenis.lenis-stopped { overflow: hidden; } html.lenis.lenis-smooth iframe { pointer-events: none; } /* ── Grid ────────────────────────────────────────────────────────── */ .lxe-wrap { padding-inline: var(--lxe-gut); } .lxe-g12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); } @media (max-width: 900px) { .lxe-g12 { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 600px) { .lxe-g12 { grid-template-columns: repeat(2, 1fr); } } /* Column spans. These MUST be classes, not inline styles: an inline grid-column beats every media query, so a `1/7` written inline stays `1/7` even once the grid has collapsed to 6 or 2 tracks — which left headings crushed into a narrow column while their lede sat off-grid. */ .lxe-cl { grid-column: 1 / 7; } .lxe-cr { grid-column: 8 / 13; } .lxe-cl8 { grid-column: 1 / 8; } .lxe-cr10 { grid-column: 10 / 13; } .lxe-cfull{ grid-column: 1 / -1; } @media (max-width: 900px) { .lxe-cl, .lxe-cr, .lxe-cl8, .lxe-cr10 { grid-column: 1 / -1; } } /* Safety net: anything dropped into the grid without a span class goes full width once the grid is narrow, rather than spilling. */ @media (max-width: 600px) { .lxe-g12 > * { grid-column: 1 / -1; } } /* Grid tracks default to min-width:auto, so a single unshrinkable child — a nowrap bracket link, a button — pushes the whole track wider than its container and the page gains a few pixels of horizontal scroll. */ .lxe-g12 > *, .lxe-in > *, .lxe-pm > *, .lxe-bf > *, .lxe-me > *, .lxe-jx > *, .lxe-mo > * { min-width: 0; } /* Bracket links are nowrap by design so the brackets never orphan, but on a phone a long one is wider than the screen. Let those wrap. */ @media (max-width: 600px) { .lxe-blink { white-space: normal; } .lxe-blink .lxe-blink-t { white-space: normal; } } /* ── Header ─────────────────────────────────────────────────────── Two tiers over the hero, after lexitgroup.com: a slim utility strip, then the main bar. Deliberately NOT fixed — it scrolls away with the page, the way the reference does. Once it has gone the nav re-forms as a floating capsule pinned top-right (see .lxe-navpill). */ .lxe-hdr { position: relative; z-index: 40; } .lxe-hdr-util { background: var(--lxe-paper-2); border-bottom: 1px solid var(--lxe-rule); } .lxe-hdr-util-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 40px; padding-inline: var(--lxe-gut); } .lxe-hdr-util a, .lxe-hdr-util span { font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--lxe-ink-2); text-decoration: none; } .lxe-hdr-util a:hover { color: var(--lxe-claret); } .lxe-hdr-util-r { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); } /* Material Symbols. The policy and practice pages request the webfont in their head but nothing on them declares the class that switches it on — only the landing carried that rule, via lexcore. Now that this sheet ships site-wide it is the right place for it: without it the header's icons render as the literal words "lock", "how_to_reg". Scoped to the header rather than declared globally: pages that already define it keep their own rule everywhere else on the page. */ .lxe-hdr .material-symbols-outlined, .lxe-index .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; display: inline-block; vertical-align: middle; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* Back-office entry, staff only. Claret so it reads as the one link in the strip that leaves the public site. */ .lxe-hdr-util a.lxe-util-dash { color: var(--lxe-claret); } .lxe-hdr-util a.lxe-util-dash:hover { color: var(--lxe-ink); } .lxe-hdr-main { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1rem, 2vw, 1.5rem) var(--lxe-gut); } .lxe-hdr-mark { text-decoration: none; flex: none; display: inline-flex; align-items: center; gap: clamp(.6rem, 1.2vw, .9rem); } /* Black monogram on transparent. Sized by HEIGHT, not width: the asset is 253x207, so a square box or aspect-ratio:1 would distort it. */ .lxe-hdr-logo { height: clamp(30px, 2.6vw, 38px); width: auto; display: block; flex: none; } .lxe-hdr-mark-t { display: block; } .lxe-hdr-mark-t b { display: block; font-family: var(--lxe-serif); font-weight: 500; font-size: clamp(1.1rem, 1.7vw, 1.4rem); letter-spacing: .01em; color: var(--lxe-ink); line-height: 1; } /* Bilingual tag. Tracking is far tighter than the old one-word "ADVOCATES" could carry — at .32em a four-word line ran wider than the wordmark. */ .lxe-hdr-tag { display: block; font-family: var(--lxe-mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lxe-claret); margin-top: 5px; line-height: 1.2; } .lxe-hdr-tag-pa { display: block; font-family: 'Noto Sans Gurmukhi', var(--lxe-sans); font-size: 11px; font-weight: 400; letter-spacing: .01em; color: var(--lxe-ink-2); line-height: 1.35; margin-top: 2px; } @media (max-width: 520px) { .lxe-hdr-mark-t b { font-size: 1.05rem; } .lxe-hdr-tag, .lxe-hdr-tag-pa { font-size: 8px; letter-spacing: .1em; } .lxe-hdr-tag-pa { font-size: 10px; } } /* On a phone the masthead is the monogram alone — no wordmark, no strapline. The logo already carries the firm, and the 191px of set text beside it was the reason the bar ran over the viewport at 320px once Connect kept its label. Below 520px the bar is: mark, menu, Connect. The link keeps its accessible name from the logo's alt text, so hiding the text costs nothing to a screen reader. Everything returns above 520px. */ @media (max-width: 520px) { .lxe-hdr-mark-t { display: none; } .lxe-hdr-logo { height: 34px; } } /* Centre nav. Sentence case, semibold, tight negative tracking — the reference's treatment, not our uppercase mono. */ .lxe-hdr-nav { display: flex; align-items: center; gap: clamp(.25rem, 1vw, .75rem); } .lxe-navlink { display: inline-flex; align-items: center; gap: .45em; font-family: var(--lxe-sans); font-size: clamp(14px, 1.15vw, 17px); font-weight: 600; letter-spacing: -.02em; color: var(--lxe-ink); text-decoration: none; white-space: nowrap; padding: .55em .85em; border-radius: 999px; position: relative; transition: color .25s; } /* Soft pill fills in behind the item on hover. */ .lxe-navlink::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--lxe-paper-3); transform: scale(.85); opacity: 0; z-index: -1; transition: transform .35s var(--lxe-ease), opacity .25s; } .lxe-navlink { isolation: isolate; } .lxe-navlink:hover::before, .lxe-navlink:focus-visible::before, .lxe-navlink.is-current::before { transform: scale(1); opacity: 1; } .lxe-navlink.is-current { color: var(--lxe-claret); } .lxe-chev { color: var(--lxe-claret); font-weight: 700; font-size: .9em; line-height: 1; transition: transform .3s var(--lxe-ease); } .lxe-navlink:hover .lxe-chev { transform: translateX(3px); } /* CTA pill with the circular chevron badge. */ .lxe-cta { display: inline-flex; align-items: center; gap: .6em; flex: none; font-family: var(--lxe-sans); font-size: 14px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; cursor: pointer; color: var(--lxe-paper); background: var(--lxe-claret); border: 1px solid var(--lxe-claret); border-radius: 999px; padding: .6em 1.5em; transition: background .25s, border-color .25s; } .lxe-cta:hover { background: var(--lxe-ink); border-color: var(--lxe-ink); color: var(--lxe-paper); } /* The mark is an envelope, not a chevron: the button opens an enquiry that an advocate reads and replies to, it does not go anywhere. Sized in em so it tracks the CTA's own font-size in the capsule and the index. */ .lxe-cta-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; flex: none; background: rgba(255,255,255,.22); padding: .34em; transition: transform .3s var(--lxe-ease), background .25s; } .lxe-cta-badge svg { display: block; overflow: visible; } /* An envelope does not travel, so the hover lifts it rather than sliding it. */ .lxe-cta:hover .lxe-cta-badge { transform: translateY(-1px); background: rgba(255,255,255,.32); } .lxe-hdr-right { display: flex; align-items: center; gap: clamp(.5rem, 1.5vw, 1rem); } /* Menu toggle. Used in the header below 1100px and inside the floating capsule at the same widths; opens the full-screen index. */ /* flex:none, like the CTA beside it. Without it the min-width:0 further down lets the row squash the toggle to 16px — a button too narrow to hit. */ .lxe-navtoggle { display: none; align-items: center; gap: .6em; cursor: pointer; flex: none; font-family: var(--lxe-sans); font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--lxe-ink); background: transparent; border: 1px solid var(--lxe-rule); border-radius: 999px; padding: .6em 1.15em; } .lxe-navtoggle:hover { border-color: var(--lxe-claret); color: var(--lxe-claret); } .lxe-navtoggle .lxe-menubtn-glyph { display: inline-flex; color: var(--lxe-claret); width: 1.15em; height: 1.15em; flex: none; } .lxe-menubtn-glyph svg { display: block; } /* Three rules that fold into a cross. The label is hidden on a phone, so the glyph has to carry the whole meaning on its own — a bare "+" did not. */ .lxe-menubtn-glyph path { transition: transform .35s var(--lxe-ease), opacity .2s ease; transform-origin: center; transform-box: fill-box; } .lxe-navtoggle[aria-expanded="true"] .lxe-mb-t { transform: translateY(3.5px) rotate(45deg); } .lxe-navtoggle[aria-expanded="true"] .lxe-mb-m { opacity: 0; } .lxe-navtoggle[aria-expanded="true"] .lxe-mb-b { transform: translateY(-3.5px) rotate(-45deg); } @media (max-width: 1100px) { .lxe-hdr-nav { display: none; } .lxe-navtoggle { display: inline-flex; } } /* ── Floating nav capsule ───────────────────────────────────────── What the reference actually does on scroll: the header leaves and the nav re-forms as a frosted, fully-rounded capsule pinned top-right, with the CTA tucked inside its end (hence the asymmetric padding — 8px on the CTA side, a full gutter on the text side). Reference values: height 56, radius 1000px, gap 32px, padding 0 8px 0 16px, background rgba(255,255,255,.7). */ .lxe-navpill { position: fixed; top: 14px; right: clamp(.75rem, 1.5vw, 1.25rem); z-index: 70; display: inline-flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.4rem); height: 56px; padding: 0 8px 0 20px; border-radius: 1000px; background: oklch(98.5% .004 80 / .82); -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px); border: 1px solid var(--lxe-rule); opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .35s, transform .45s var(--lxe-ease), visibility .35s; } .lxe-navpill.is-in { opacity: 1; visibility: visible; transform: none; } .lxe-navpill .lxe-navlink { font-size: clamp(13px, .95vw, 15px); padding: .5em .7em; } .lxe-navpill .lxe-cta { padding: .55em 1.25em; font-size: 13px; } /* The capsule carries the whole nav on wide screens; below that it collapses to the Menu toggle, which opens the full-screen index. */ .lxe-navpill .lxe-navtoggle { border-color: transparent; } @media (max-width: 1100px) { .lxe-navpill { gap: .5rem; padding: 0 8px 0 8px; height: 52px; } .lxe-navpill .lxe-navlink { display: none; } } /* Below 520px the room goes to Connect, not to Menu. It used to be the other way round — the CTA collapsed to a bare glyph while Menu kept its word — which spent the label on the control nobody needs told. A hamburger is understood without being named; "Connect" is the one thing on the bar a first-time visitor has to be able to read, and an envelope on its own could be a contact page, a newsletter or a mail app. */ @media (max-width: 520px) { .lxe-menubtn-label { display: none; } .lxe-navtoggle { padding: .55em; width: 42px; height: 42px; justify-content: center; gap: 0; } .lxe-navpill .lxe-navtoggle { width: 38px; height: 38px; } .lxe-cta { padding: .55em .95em; font-size: 13px; gap: .5em; } } /* The narrowest phones: keep the word, tighten everything around it. */ @media (max-width: 360px) { .lxe-cta { padding: .5em .8em; font-size: 12.5px; } .lxe-cta-badge { width: 1.35em; height: 1.35em; padding: .3em; } .lxe-navtoggle { width: 38px; height: 38px; } } /* Nothing in the bar may force it wider than the viewport. */ .lxe-hdr-main > *, .lxe-hdr-right > * { min-width: 0; } .lxe-hdr-mark { min-width: 0; } /* ── Full-screen index ────────────────────────────────────────────── */ .lxe-index { position: fixed; inset: 0; z-index: 69; background: var(--lxe-paper); display: flex; flex-direction: column; padding: var(--lxe-gut); padding-top: clamp(4.5rem, 9vw, 6.5rem); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; overflow-y: auto; } .lxe-index.is-open { opacity: 1; visibility: visible; } .lxe-index-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--lxe-rule); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .lxe-index-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } @media (max-width: 820px) { .lxe-index-grid { grid-template-columns: 1fr; } } .lxe-index-list { margin: 0; padding: 0; list-style: none; } .lxe-index-list li { border-bottom: 1px solid var(--lxe-rule-soft); } .lxe-index-link { display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2rem); text-decoration: none; color: var(--lxe-ink); padding: clamp(.5rem, 1.2vw, .85rem) 0; transition: color .25s; } .lxe-index-link:hover { color: var(--lxe-claret); } .lxe-index-num { font-family: var(--lxe-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--lxe-claret); font-variant-numeric: tabular-nums; flex: none; } .lxe-index-name { font-family: var(--lxe-serif); font-weight: 400; letter-spacing: -.028em; font-size: clamp(1.6rem, 4.2vw, 3rem); line-height: 1.06; } .lxe-index-link.is-current .lxe-index-name { font-style: italic; color: var(--lxe-claret); } html.lxe-motion .lxe-index-name-mask { overflow: hidden; display: block; } html.lxe-motion .lxe-index .lxe-index-name { transform: translateY(105%); } .lxe-index-aside dt { font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--lxe-claret); margin: 0 0 .5rem; } .lxe-index-aside dd { margin: 0 0 1.5rem; font-size: 14px; line-height: 1.6; color: var(--lxe-ink-2); } .lxe-index-aside dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--lxe-rule); } .lxe-index-aside dd a:hover { color: var(--lxe-claret); border-bottom-color: var(--lxe-claret); } /* ── Bands ───────────────────────────────────────────────────────── */ .lxe-band { padding-block: var(--lxe-band); border-bottom: 1px solid var(--lxe-rule); position: relative; } .lxe-dark { background: var(--lxe-ink-deep); color: oklch(92% 0.004 80); border-bottom-color: var(--lxe-ink-deep); } .lxe-dark .lxe-eyebrow { color: oklch(72% 0.05 25); } .lxe-dark .lxe-idx { color: rgba(255,255,255,.34); border-color: var(--lxe-rule-dark); } .lxe-dark .lxe-lede { color: oklch(78% 0.006 80); } .lxe-dark .lxe-em { color: var(--lxe-claret-hi); } .lxe-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); position: relative; } /* A real element, not a pseudo — GSAP cannot tween ::after. */ .lxe-rule-el { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--lxe-rule); transform-origin: left; display: block; } .lxe-dark .lxe-rule-el { background: var(--lxe-rule-dark); } .lxe-eyebrow { font-family: var(--lxe-mono); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--lxe-claret); margin: 0; } .lxe-idx { font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .12em; color: var(--lxe-ink-3); border: 1px solid var(--lxe-rule); padding: 3px 9px; white-space: nowrap; } /* ── Type ────────────────────────────────────────────────────────── */ .lxe-display { font-family: var(--lxe-serif); font-weight: 400; letter-spacing: -.032em; line-height: .94; font-size: clamp(2.5rem, 7.5vw, 6rem); margin: 0; text-wrap: balance; color: var(--lxe-ink); } /* Geographic sub-line. Deliberately a step down from the display: the claret italic at full display size dominated the whole hero. */ .lxe-display-geo { display: block; margin-top: .35em; font-size: .42em; line-height: 1.15; letter-spacing: -.02em; color: var(--lxe-ink-2); font-weight: 400; } .lxe-display-geo .lxe-em { font-size: 1em; } .lxe-dark .lxe-display { color: oklch(94% 0.004 80); } .lxe-h2 { font-family: var(--lxe-serif); font-weight: 400; letter-spacing: -.028em; line-height: 1.04; font-size: clamp(1.85rem, 4.2vw, 3.25rem); margin: 0; text-wrap: balance; } .lxe-h3 { font-family: var(--lxe-serif); font-weight: 500; letter-spacing: -.018em; line-height: 1.15; font-size: clamp(1.1rem, 1.6vw, 1.4rem); margin: 0; } .lxe-em { font-style: italic; color: var(--lxe-claret); } .lxe-lede { font-size: clamp(.98rem, 1.2vw, 1.1rem); line-height: 1.62; color: var(--lxe-ink-2); max-width: 56ch; margin: 0; } .lxe-fine { font-family: var(--lxe-mono); font-size: 11px; letter-spacing: .04em; color: var(--lxe-ink-3); margin: 0; } .lxe-num { font-family: var(--lxe-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--lxe-claret); font-variant-numeric: tabular-nums; } .lxe-dark .lxe-num { color: var(--lxe-claret-hi); } .lxe-count { font-variant-numeric: tabular-nums; } /* ── Bracket link ────────────────────────────────────────────────── */ .lxe-blink { font-family: var(--lxe-mono); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--lxe-claret); text-decoration: none; display: inline-flex; gap: .45em; align-items: center; white-space: nowrap; position: relative; } .lxe-blink::before { content: '['; transition: transform .32s var(--lxe-ease); } .lxe-blink::after { content: ']'; transition: transform .32s var(--lxe-ease); } .lxe-blink:hover::before { transform: translateX(-3px); } .lxe-blink:hover::after { transform: translateX(3px); } .lxe-blink-t { position: relative; overflow: hidden; display: inline-block; } .lxe-blink-t::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: translateY(101%) scaleX(.5); transform-origin: center bottom; transition: transform .5s var(--lxe-ease); } .lxe-blink:hover .lxe-blink-t::after { transform: translateY(0) scaleX(1); } .lxe-dark .lxe-blink { color: oklch(75% 0.08 25); } /* ── Buttons ─────────────────────────────────────────────────────── */ .lxe-btn { font-family: var(--lxe-sans); font-size: 13px; font-weight: 500; letter-spacing: .01em; padding: 13px 22px; border: 1px solid var(--lxe-ink); background: transparent; color: var(--lxe-paper); border-radius: 2px; text-decoration: none; display: inline-flex; align-items: center; gap: .6em; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; } .lxe-btn::before { content: ''; position: absolute; inset: 0; background: var(--lxe-ink); z-index: -1; transition: transform .48s var(--lxe-ease); transform-origin: center bottom; } .lxe-btn::after { content: ''; position: absolute; inset: 0; background: var(--lxe-claret); z-index: -1; transform: translateY(101%); transition: transform .48s var(--lxe-ease); transform-origin: center bottom; } .lxe-btn:hover::after { transform: translateY(0); } .lxe-btn:hover, .lxe-btn:focus-visible { color: var(--lxe-paper); } .lxe-arrow { display: inline-block; transition: transform .4s var(--lxe-ease); } .lxe-btn:hover .lxe-arrow { transform: translateX(4px); } .lxe-btn-ghost { color: var(--lxe-ink); } .lxe-btn-ghost::before { transform: translateY(101%); } .lxe-btn-ghost:hover { color: var(--lxe-paper); } .lxe-btn-ghost:hover::before { transform: translateY(0); } .lxe-dark .lxe-btn { border-color: var(--lxe-paper); color: var(--lxe-ink); } .lxe-dark .lxe-btn::before { background: var(--lxe-paper); } .lxe-dark .lxe-btn::after { background: var(--lxe-claret-hi); } .lxe-dark .lxe-btn:hover { color: var(--lxe-paper); } .lxe-dark .lxe-btn-ghost { border-color: var(--lxe-rule-dark); color: oklch(92% 0.004 80); } .lxe-dark .lxe-btn-ghost:hover { color: var(--lxe-ink); } /* ── Status pip ──────────────────────────────────────────────────── */ .lxe-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--lxe-verdant); flex: none; position: relative; display: inline-block; } .lxe-pip-live::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--lxe-verdant); animation: lxeRing 2.4s ease-out infinite; } @keyframes lxeRing { 0% { transform: scale(.7); opacity: .9 } 100% { transform: scale(2.6); opacity: 0 } } /* ── Motion start states — gated on the JS-applied class ─────────── */ html.lxe-motion [data-rise], html.lxe-motion [data-fade] { opacity: 0; } html.lxe-motion [data-rise], html.lxe-motion [data-fade], html.lxe-motion .lxe-line { will-change: transform, opacity; } .lxe-mask { overflow: hidden; display: block; } html.lxe-motion .lxe-line { display: block; transform: translateY(105%); } html.lxe-motion .lxe-rule-el { transform: scaleX(0); } html.lxe-motion .lxe-draw { stroke-dashoffset: var(--lxe-len, 1000); } /* ── Marquee ─────────────────────────────────────────────────────── */ .lxe-marq { overflow: hidden; border-block: 1px solid var(--lxe-rule); background: var(--lxe-paper-2); padding-block: .85rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .lxe-marq-track { display: flex; width: max-content; } .lxe-marq-track span { font-family: var(--lxe-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lxe-ink-2); padding-inline: 1.6rem; display: inline-flex; align-items: center; gap: 1.6rem; white-space: nowrap; } .lxe-marq-track span::after { content: ''; width: 4px; height: 4px; background: var(--lxe-claret); border-radius: 50%; display: inline-block; } /* ═══════════ SECTION: HERO ═══════════ */ .lxe-hero { position: relative; overflow: hidden; padding-top: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--lxe-rule); } .lxe-hero-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); padding-inline: var(--lxe-gut); pointer-events: none; z-index: 0; } .lxe-hero-grid i { display: block; border-left: 1px solid var(--lxe-rule-soft); height: 100%; } .lxe-hero-grid i:last-child { border-right: 1px solid var(--lxe-rule-soft); } @media (max-width: 900px) { .lxe-hero-grid { grid-template-columns: repeat(6, 1fr); } } .lxe-hero > * { position: relative; z-index: 1; } .lxe-hero-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--lxe-rule-soft); } .lxe-hero-body { padding-block: clamp(2.25rem, 4.5vw, 4rem); align-items: end; } .lxe-hero-claim { grid-column: 1 / 9; } .lxe-hero-side { grid-column: 10 / 13; display: flex; flex-direction: column; gap: 1.4rem; } @media (max-width: 900px) { .lxe-hero-claim { grid-column: 1 / -1; } .lxe-hero-side { grid-column: 1 / -1; margin-top: 2.25rem; } } .lxe-hero-cta { margin-top: 1.75rem; display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; } .lxe-stat { border-top: 1px solid var(--lxe-rule); padding-top: .9rem; } /* Direct child only. A bare `span` here also catches the .lxe-count span inside the , shrinking a 1.9rem serif figure to a 10px mono label. */ .lxe-stat > b { display: block; font-family: var(--lxe-serif); font-size: 1.9rem; font-weight: 400; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lxe-ink); } .lxe-stat > span { font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--lxe-ink-3); display: block; margin-top: .5rem; } .lxe-geo { border-top: 1px solid var(--lxe-rule); display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; padding-block: .9rem; margin: 0; } .lxe-geo dt { font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--lxe-claret); margin: 0; } .lxe-geo dd { margin: 0; font-family: var(--lxe-mono); font-size: 11px; letter-spacing: .05em; color: var(--lxe-ink-2); } .lxe-geo dd::after { content: '·'; margin-left: 1.4rem; color: var(--lxe-ink-3); } .lxe-geo dd:last-child::after { content: ''; } /* ═══════════ SECTION: PRACTICE MATRIX ═══════════ */ .lxe-pm { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--lxe-rule); border-left: 1px solid var(--lxe-rule); } @media (max-width: 960px) { .lxe-pm { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .lxe-pm { grid-template-columns: 1fr; } } .lxe-pm-cell { border-right: 1px solid var(--lxe-rule); border-bottom: 1px solid var(--lxe-rule); padding: clamp(1.4rem, 2.3vw, 1.9rem); display: flex; flex-direction: column; gap: .8rem; text-decoration: none; color: inherit; min-height: 236px; position: relative; overflow: hidden; isolation: isolate; } .lxe-pm-cell::before { content: ''; position: absolute; inset: 0; background: var(--lxe-ink-deep); z-index: -1; transform: translateY(101%); transition: transform .55s var(--lxe-ease); } .lxe-pm-cell:hover::before, .lxe-pm-cell:focus-visible::before { transform: translateY(0); } .lxe-pm-cell:hover, .lxe-pm-cell:focus-visible { color: oklch(93% 0.004 80); } .lxe-pm-cell:hover .lxe-pm-desc { color: oklch(76% 0.006 80); } .lxe-pm-cell:hover .lxe-num, .lxe-pm-cell:hover .lxe-pm-go { color: var(--lxe-claret-hi); } .lxe-pm-cell:hover .lxe-fine { color: oklch(65% 0.006 80); } .lxe-pm-cell:hover .lxe-pm-go { opacity: 1; } .lxe-pm-cell:hover .lxe-pm-ico { opacity: 1; transform: none; stroke: var(--lxe-claret-hi); } .lxe-pm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .lxe-pm-desc { font-size: 13.5px; line-height: 1.6; color: var(--lxe-ink-2); margin: 0; flex: 1; transition: color .4s; } .lxe-pm-go { font-family: var(--lxe-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--lxe-claret); opacity: .6; transition: opacity .4s, color .4s; } .lxe-pm-go::before { content: '[ '; } .lxe-pm-go::after { content: ' ]'; } .lxe-pm-ico { position: absolute; right: 1.1rem; bottom: 1.1rem; width: 54px; height: 54px; fill: none; stroke: var(--lxe-claret); stroke-width: 1; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .5s, transform .5s, stroke .4s; } .lxe-pm-fill { background: var(--lxe-paper-2); } /* ═══════════ SECTION: JURISDICTION ═══════════ */ .lxe-jx-copy { grid-column: 1 / 6; } .lxe-jx-fig { grid-column: 7 / 13; margin: 0; } @media (max-width: 900px) { .lxe-jx-copy, .lxe-jx-fig { grid-column: 1 / -1; } } .lxe-jx-svg { width: 100%; height: auto; overflow: visible; } .lxe-jx-svg .lxe-ring { fill: none; stroke: var(--lxe-rule-dark); stroke-width: 1; } .lxe-jx-svg .lxe-spoke { stroke: rgba(255,255,255,.08); stroke-width: 1; } .lxe-jx-svg .lxe-node { fill: var(--lxe-ink-deep); stroke: var(--lxe-claret-hi); stroke-width: 1.25; } .lxe-jx-svg .lxe-core { fill: var(--lxe-claret-hi); stroke: none; } .lxe-jx-svg .lxe-lbl { font-family: var(--lxe-mono); font-size: 7.4px; letter-spacing: .1em; text-transform: uppercase; fill: oklch(78% 0.006 80); } .lxe-jx-svg .lxe-lbl-core { fill: oklch(85% 0.09 25); font-size: 8px; } html.lxe-motion .lxe-jx-svg .lxe-node, html.lxe-motion .lxe-jx-svg .lxe-lbl { opacity: 0; } .lxe-jx { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--lxe-rule-dark); margin-top: clamp(2.5rem, 5vw, 4rem); } @media (max-width: 900px) { .lxe-jx { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .lxe-jx { grid-template-columns: 1fr; } } .lxe-jx-cell { padding: 1.6rem clamp(1.25rem, 2vw, 1.75rem); border-right: 1px solid var(--lxe-rule-dark); border-bottom: 1px solid var(--lxe-rule-dark); } .lxe-jx-cell:nth-child(4n) { border-right: 0; } @media (max-width: 900px) { .lxe-jx-cell:nth-child(2n) { border-right: 0; } } .lxe-jx-cell h4 { margin: .5rem 0; font-family: var(--lxe-sans); font-size: 13.5px; font-weight: 500; color: oklch(94% 0.004 80); } .lxe-jx-cell p { margin: 0; font-family: var(--lxe-mono); font-size: 10.5px; letter-spacing: .05em; line-height: 1.7; color: oklch(72% 0.006 80); } /* ═══════════ SECTION: NRI ═══════════ */ .lxe-nri-claim { grid-column: 1 / 7; } .lxe-nri-fig { grid-column: 8 / 13; } @media (max-width: 900px) { .lxe-nri-claim, .lxe-nri-fig { grid-column: 1 / -1; } } .lxe-nri-list { margin: 1.75rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--lxe-rule-dark); } .lxe-nri-list li { display: flex; gap: 1.25rem; align-items: baseline; padding: .9rem 0; border-bottom: 1px solid var(--lxe-rule-dark); } .lxe-nri-list li > span:last-child { font-size: 13.5px; color: oklch(88% 0.006 80); } .lxe-flags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; } .lxe-flags b { font-family: var(--lxe-mono); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: oklch(80% 0.006 80); border: 1px solid var(--lxe-rule-dark); padding: 5px 11px; border-radius: 999px; transition: border-color .3s, color .3s; } .lxe-flags b:hover { border-color: var(--lxe-claret-hi); color: oklch(85% 0.09 25); } .lxe-flags b { display: inline-flex; align-items: center; gap: 8px; } .lxe-flag { width: 20px; height: 14px; flex: none; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); display: block; } /* ── Gated control ─────────────────────────────────────────────── A button that is only live while the chamber is open. Shut, it stays in the tab order and explains itself on click rather than looking broken or silently doing nothing. */ .lxe-gated { position: relative; } .lxe-gated.is-shut { opacity: .42; cursor: not-allowed; } .lxe-gated.is-shut::before, .lxe-gated.is-shut::after { transition: none; } .lxe-gated.is-shut:hover::after { transform: translateY(101%); } /* kill the hover wipe */ .lxe-gated .lxe-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; min-width: 15rem; max-width: 20rem; padding: 10px 12px; z-index: 5; background: var(--lxe-paper); color: var(--lxe-ink); border: 1px solid var(--lxe-rule); border-radius: 2px; font-family: var(--lxe-sans); font-size: 12px; line-height: 1.5; font-weight: 400; text-align: left; white-space: normal; letter-spacing: 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .22s, transform .22s, visibility .22s; } .lxe-gated.show-tip .lxe-tip { opacity: 1; visibility: visible; transform: none; } .lxe-gated .lxe-tip::after { /* little pointer */ content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--lxe-rule); } .lxe-nri-svg { width: 100%; height: auto; overflow: visible; } .lxe-nri-svg .lxe-arc { fill: none; stroke: oklch(60% 0.09 25); stroke-width: 1; opacity: .75; } .lxe-nri-svg .lxe-base { stroke: var(--lxe-rule-dark); stroke-width: 1; fill: none; } .lxe-nri-svg .lxe-dot { fill: var(--lxe-claret-hi); } .lxe-nri-svg .lxe-hub { fill: none; stroke: var(--lxe-claret-hi); stroke-width: 1.5; } .lxe-nri-svg .lxe-ctry { font-family: var(--lxe-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; fill: oklch(76% 0.006 80); } html.lxe-motion .lxe-nri-svg .lxe-dot, html.lxe-motion .lxe-nri-svg .lxe-ctry { opacity: 0; } /* ═══════════ SECTION: CHAMBER (digital office) ═══════════ */ .lxe-ch-claim { grid-column: 1 / 8; } .lxe-ch-plate { grid-column: 9 / 13; border: 1px solid var(--lxe-rule-dark); background: rgba(255,255,255,.035); } @media (max-width: 900px) { .lxe-ch-claim, .lxe-ch-plate { grid-column: 1 / -1; } } .lxe-ch-plate > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--lxe-rule-dark); } .lxe-ch-plate > div:last-child { border-bottom: 0; } .lxe-ch-plate dt { margin: 0; font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: oklch(64% 0.006 80); } .lxe-ch-plate dd { margin: 0; font-size: 13px; font-weight: 500; color: oklch(95% 0.004 80); text-align: right; } .lxe-ch-status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: oklch(78% 0.09 155); } .lxe-ch-status .do-status-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--lxe-verdant); flex: none; display: inline-block; } /* The four motions. Keeps .do-flow-tile / .lxc-tile / [data-step] because the auto-advance script cycles `is-active` across exactly those nodes. */ .lxe-mo { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--lxe-rule-dark); margin-top: clamp(2.5rem, 5vw, 3.5rem); } @media (max-width: 960px) { .lxe-mo { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .lxe-mo { grid-template-columns: 1fr; } } .lxe-mo .do-flow-tile { padding: 1.75rem clamp(1.1rem, 2vw, 1.6rem); border-right: 1px solid var(--lxe-rule-dark); border-bottom: 1px solid var(--lxe-rule-dark); position: relative; overflow: hidden; background: transparent; } .lxe-mo .do-flow-tile:nth-child(4n) { border-right: 0; } @media (max-width: 960px) { .lxe-mo .do-flow-tile:nth-child(2n) { border-right: 0; } } .lxe-mo .do-flow-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--lxe-claret-hi); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--lxe-ease); } .lxe-mo .do-flow-tile:hover::before, .lxe-mo .do-flow-tile.is-active::before { transform: scaleY(1); } .lxe-mo .lxe-mo-roman { font-family: var(--lxe-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--lxe-claret-hi); } .lxe-mo .lxe-mo-title { margin: .75rem 0 .5rem; font-family: var(--lxe-serif); font-size: 1.1rem; font-weight: 500; letter-spacing: -.015em; color: oklch(95% 0.004 80); } .lxe-mo .lxe-mo-desc { margin: 0; font-size: 12.5px; line-height: 1.6; color: oklch(72% 0.006 80); } .lxe-ch-door { margin-top: clamp(2rem, 4vw, 3rem); } .lxe-ch-door > div { background: var(--lxe-paper); color: var(--lxe-ink); border: 1px solid var(--lxe-rule-dark); position: relative; } /* ═══════════ SECTION: INSTRUMENTS (services) ═══════════ */ .lxe-in { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--lxe-rule); } @media (max-width: 880px) { .lxe-in { grid-template-columns: 1fr; } } .lxe-in-cell { padding: clamp(1.75rem, 3vw, 2.5rem); border-right: 1px solid var(--lxe-rule); } .lxe-in-cell:last-child { border-right: 0; } @media (max-width: 880px) { .lxe-in-cell { border-right: 0; border-bottom: 1px solid var(--lxe-rule); } .lxe-in-cell:last-child { border-bottom: 0; } } .lxe-in-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .lxe-price { font-family: var(--lxe-serif); font-size: 1.6rem; font-weight: 400; letter-spacing: -.02em; color: var(--lxe-claret); font-variant-numeric: tabular-nums; } .lxe-drop { margin-top: 1.5rem; border: 1px dashed oklch(78% 0.008 260); border-radius: 2px; padding: 1.75rem 1.25rem; text-align: center; background: var(--lxe-paper-2); cursor: pointer; width: 100%; display: block; transition: border-color .3s, background .3s; } .lxe-drop:hover { border-color: var(--lxe-claret); background: var(--lxe-claret-lo); } .lxe-drop:hover .lxe-drop-ico { transform: translateY(-4px); } .lxe-drop-ico { width: 30px; height: 30px; fill: none; stroke: var(--lxe-claret); stroke-width: 1.2; transition: transform .45s var(--lxe-ease); margin-bottom: .6rem; } .lxe-drop > b { display: block; font-size: 13px; font-weight: 500; color: var(--lxe-ink); } .lxe-steps { margin: 1.25rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; } .lxe-steps li { font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lxe-ink-3); } .lxe-steps li::before { content: attr(data-n) ' '; color: var(--lxe-claret); font-weight: 500; } .lxe-field { display: flex; gap: .5rem; margin-top: 1.5rem; } .lxe-field input { flex: 1; min-width: 0; font-family: var(--lxe-mono); font-size: 13px; letter-spacing: .03em; color: var(--lxe-ink); background: var(--lxe-paper); border: 1px solid oklch(72% 0.008 260); border-radius: 2px; padding: 0 12px; height: 44px; transition: border-color .3s, box-shadow .3s; } .lxe-field input:focus { outline: 0; border-color: var(--lxe-claret); box-shadow: 0 0 0 3px oklch(45% 0.09 25 / .15); } .lxe-tl { margin-top: 1.25rem; border: 1px solid var(--lxe-rule); background: var(--lxe-paper-2); } .lxe-tl-hd { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--lxe-rule); } .lxe-tl-body { padding: .85rem .9rem; display: flex; flex-direction: column; gap: .5rem; } .lxe-tl-row { display: flex; justify-content: space-between; gap: 1rem; } .lxe-tl-steps { display: flex; flex-direction: column; gap: .6rem; padding: .85rem .9rem; border-top: 1px solid var(--lxe-rule); } /* ═══════════ SECTION: METHOD (process) ═══════════ */ .lxe-me-shell { position: relative; } .lxe-me-rail { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--lxe-paper-3); overflow: hidden; } .lxe-me-progress { position: absolute; inset: 0; background: var(--lxe-claret); transform-origin: left; display: block; } html.lxe-motion .lxe-me-progress { transform: scaleX(0); } .lxe-me { display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 960px) { .lxe-me { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .lxe-me { grid-template-columns: 1fr; } } .lxe-me-cell { padding: 1.9rem clamp(1.1rem, 2vw, 1.6rem) 2rem; border-right: 1px solid var(--lxe-rule); border-bottom: 1px solid var(--lxe-rule); position: relative; } .lxe-me-cell:nth-child(4n) { border-right: 0; } @media (max-width: 960px) { .lxe-me-cell:nth-child(2n) { border-right: 0; } } .lxe-me-cell::before { content: ''; position: absolute; top: -5px; left: clamp(1.1rem, 2vw, 1.6rem); width: 8px; height: 8px; border-radius: 50%; background: var(--lxe-paper); border: 1.5px solid var(--lxe-rule); transition: border-color .4s, background .4s; } .lxe-me-cell.is-on::before { border-color: var(--lxe-claret); background: var(--lxe-claret); } .lxe-me-cell h4 { margin: .9rem 0 .55rem; font-family: var(--lxe-serif); font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; color: var(--lxe-ink); } .lxe-me-cell p { margin: 0; font-size: 13px; line-height: 1.62; color: var(--lxe-ink-2); } /* ═══════════ SECTION: REVIEWS ═══════════ */ .lxe-rv-quote { grid-column: 1 / 9; margin: 0; } .lxe-rv-meta { grid-column: 10 / 13; } @media (max-width: 900px) { .lxe-rv-quote, .lxe-rv-meta { grid-column: 1 / -1; } } .lxe-rv-q { font-family: var(--lxe-serif); font-weight: 300; font-size: clamp(1.3rem, 2.7vw, 2rem); line-height: 1.32; letter-spacing: -.02em; margin: 0; text-wrap: balance; } .lxe-rv-q::before { content: '\201C'; color: var(--lxe-claret); } .lxe-rv-q::after { content: '\201D'; color: var(--lxe-claret); } .lxe-rv-attr { margin-top: 1.5rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; } .lxe-rv-name { font-size: 13px; font-weight: 500; } .lxe-rv-role { font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--lxe-ink-3); } .lxe-rv-nav { display: flex; align-items: center; gap: 1rem; margin-top: 2.25rem; } .lxe-rv-count { font-family: var(--lxe-mono); font-size: 11px; letter-spacing: .14em; color: var(--lxe-ink-3); font-variant-numeric: tabular-nums; margin-left: .5rem; } .lxe-rv-cur { color: var(--lxe-claret); font-weight: 500; } .lxe-rv-arrow { width: 42px; height: 42px; border: 1px solid var(--lxe-rule); background: transparent; border-radius: 2px; cursor: pointer; color: var(--lxe-ink); position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; isolation: isolate; } .lxe-rv-arrow::before { content: ''; position: absolute; inset: 0; background: var(--lxe-ink); z-index: -1; transform: scale(0); transition: transform .45s var(--lxe-ease); } .lxe-rv-arrow:hover::before, .lxe-rv-arrow:focus-visible::before { transform: scale(1); } .lxe-rv-arrow:hover, .lxe-rv-arrow:focus-visible { color: var(--lxe-paper); border-color: var(--lxe-ink); } .lxe-rv-arrow span { display: block; transition: transform .4s var(--lxe-ease); } .lxe-rv-prev:hover span { transform: translateX(-3px); } .lxe-rv-next:hover span { transform: translateX(3px); } .lxe-rv-score { border: 1px solid var(--lxe-rule); padding: 1.5rem; } .lxe-rv-score > b { display: block; font-family: var(--lxe-serif); font-size: 3rem; font-weight: 400; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .lxe-rv-stars { display: flex; gap: 4px; margin-top: .7rem; } .lxe-rv-stars svg { width: 14px; height: 14px; fill: var(--lxe-claret); } html.lxe-motion .lxe-rv-stars svg { opacity: 0; transform: scale(.4); } .lxe-rv-src { margin-top: 1rem; border-top: 1px solid var(--lxe-rule); padding-top: 1rem; display: flex; flex-direction: column; gap: .5rem; } .lxe-rv-src div { display: flex; justify-content: space-between; gap: 1rem; } .lxe-rv-src em { font-style: normal; font-family: var(--lxe-mono); font-size: 10px; color: var(--lxe-ink); font-variant-numeric: tabular-nums; } /* ═══════════ SECTION: BRIEFINGS ═══════════ */ .lxe-bf { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--lxe-rule); border-left: 1px solid var(--lxe-rule); } @media (max-width: 1000px) { .lxe-bf { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .lxe-bf { grid-template-columns: 1fr; } } .lxe-bf-cell { border-right: 1px solid var(--lxe-rule); border-bottom: 1px solid var(--lxe-rule); padding: 1.5rem clamp(1.1rem, 2vw, 1.5rem); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .75rem; min-height: 210px; position: relative; overflow: hidden; isolation: isolate; } .lxe-bf-cell::before { content: ''; position: absolute; inset: 0; background: var(--lxe-paper-2); z-index: -1; transform: translateY(101%); transition: transform .5s var(--lxe-ease); } .lxe-bf-cell:hover::before, .lxe-bf-cell:focus-visible::before { transform: translateY(0); } .lxe-bf-top { display: flex; align-items: center; gap: .75rem; } .lxe-bf-tag { font-family: var(--lxe-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--lxe-claret); border: 1px solid var(--lxe-claret-lo); background: var(--lxe-claret-lo); padding: 3px 8px; } .lxe-bf-date { font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .08em; color: var(--lxe-ink-3); } .lxe-bf-cell h4 { margin: 0; font-family: var(--lxe-serif); font-size: 1.02rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; flex: 1; } /* ═══════════ SECTION: CONTACT / NAP ═══════════ */ .lxe-ct-claim { grid-column: 1 / 7; } .lxe-ct-nap { grid-column: 8 / 13; margin: 0; border-top: 1px solid var(--lxe-rule-dark); } @media (max-width: 900px) { .lxe-ct-claim, .lxe-ct-nap { grid-column: 1 / -1; } } .lxe-ct-nap > div { display: grid; grid-template-columns: 34% 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--lxe-rule-dark); } .lxe-ct-nap dt { margin: 0; font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: oklch(64% 0.006 80); } .lxe-ct-nap dd { margin: 0; font-size: 13.5px; color: oklch(93% 0.004 80); line-height: 1.55; } .lxe-ct-nap dd a { color: inherit; text-decoration: none; position: relative; display: inline-block; overflow: hidden; padding-bottom: 2px; } .lxe-ct-nap dd a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: oklch(75% 0.09 25); transform: translateY(101%) scaleX(.5); transform-origin: center bottom; transition: transform .5s var(--lxe-ease); } .lxe-ct-nap dd a:hover { color: oklch(85% 0.09 25); } .lxe-ct-nap dd a:hover::after { transform: translateY(0) scaleX(1); } .lxe-ct-actions { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; } .lxe-locus { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.5rem; font-family: var(--lxe-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: oklch(76% 0.09 25); } /* ── Focus visibility, everywhere ────────────────────────────────── */ .lxe-btn:focus-visible, .lxe-blink:focus-visible, .lxe-pm-cell:focus-visible, .lxe-bf-cell:focus-visible, .lxe-rv-arrow:focus-visible { outline: 2px solid var(--lxe-claret); outline-offset: 3px; } .lxe-dark .lxe-btn:focus-visible, .lxe-dark .lxe-blink:focus-visible { outline-color: var(--lxe-claret-hi); } /* ── Reduced motion: show everything, move nothing ───────────────── */ @media (prefers-reduced-motion: reduce) { html.lxe-motion [data-rise], html.lxe-motion [data-fade], html.lxe-motion .lxe-jx-svg .lxe-node, html.lxe-motion .lxe-jx-svg .lxe-lbl, html.lxe-motion .lxe-nri-svg .lxe-dot, html.lxe-motion .lxe-nri-svg .lxe-ctry, html.lxe-motion .lxe-rv-stars svg { opacity: 1 !important; transform: none !important; } html.lxe-motion .lxe-line { transform: none !important; } html.lxe-motion .lxe-rule-el { transform: scaleX(1) !important; } html.lxe-motion .lxe-draw { stroke-dashoffset: 0 !important; } .lxe-pip-live::after { animation: none; } }