/* ═══════════════════════════════════════════════════════════════════ 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); } .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; } } /* 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); } .lxe-cta-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: rgba(255,255,255,.22); font-size: .85em; font-weight: 700; transition: transform .3s var(--lxe-ease); } .lxe-cta:hover .lxe-cta-badge { transform: translateX(3px); } .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. */ .lxe-navtoggle { display: none; align-items: center; gap: .6em; cursor: pointer; 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 { color: var(--lxe-claret); font-size: 1.1em; line-height: 1; transition: transform .35s var(--lxe-ease); } .lxe-navtoggle[aria-expanded="true"] .lxe-menubtn-glyph { transform: 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 CTA everywhere reduces to its chevron badge. The label has to sit in a span to be hidden — as a bare text node it cannot be targeted, which is how the header CTA kept overflowing on a phone. */ @media (max-width: 520px) { .lxe-cta span:not(.lxe-cta-badge) { display: none; } .lxe-cta { padding: .55em .75em; } } /* 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; } }