/* ══ Reset ═══════════════════════════════════════════════════════════ * The app gets this from Tailwind's Preflight; standalone it has to be * spelled out. Only the parts the compositions actually depend on — * notably headings and paragraphs losing their UA margins, and * `border-style: solid` by default so a bare `border-width` still * paints. */ *, *::before, *::after { box-sizing: border-box; border: 0 solid; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd, pre, hr { margin: 0; } ul, ol, menu { margin: 0; padding: 0; list-style: none; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 1em; } small { font-size: 80%; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { margin: 0; padding: 0; font: inherit; color: inherit; background: transparent; } summary { cursor: pointer; } summary::-webkit-details-marker { display: none; } /* ══ Tokens ══════════════════════════════════════════════════════════ * The subset of the app's design tokens this page actually reads. */ :root { --font-general: "General Sans", system-ui, sans-serif; --font-onest: "Onest", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; --lk-serif: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif; --lk-script: "Snell Roundhand", "Savoye LET", "Bradley Hand", "Segoe Script", cursive; --radius-pill: 999px; /* The page ground, and what the composition's openings reveal. Here * the hero clip sits fixed in .lk-bg and shows through every * translucent panel; black is only what paints before it decodes. */ --lk-asset: #000; /* The sticky nav's height, kept current by app.js so the hero fills * the rest of the first screen and section anchors land below it. */ --nav-h: 73px; /* ── The design unit ────────────────────────────────────────── * The pixel. This look is cut 1:1 against its Figma frame — 1920 x * 1080 — so every length below is the frame's own number, and the * page adapts through media queries rather than through a scaling * root font size. */ } html { /* Fixed, so a `rem` in the shared primitives is a known 16px and the * composition's own px are the only thing that matters. */ font-size: 16px; background: var(--lk-asset); overflow-x: clip; /* Smooth scrolling is applied by app.js to in-page clicks only, so a * hash in the URL lands instantly on load instead of animating. */ } body { margin: 0; min-height: 100svh; overflow-x: clip; background: var(--lk-asset); font-family: var(--font-onest), system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Full bleed. Black is the page's ground colour, not a frame around * it — the composition runs edge to edge like any real site. The stage * is now the whole scrolling page; the hero is its first screen. */ .lk-stage { position: relative; width: 100%; min-height: 100svh; background: var(--lk-asset); } /* The composition layer: nav, hero, then the sections, in normal flow. */ .uip-layer { position: relative; z-index: 1; } /* ── Entry state ────────────────────────────────────────────────── * Elements that cascade in start hidden so nothing flashes before the * script takes over. The script itself sets `.lk-js` on , so * with JS off the rule never matches and the page renders fully — no * blank composition. * * `will-change` deliberately does NOT live here: it would create a * permanent stacking context on every cascading element, trapping the * `z-index` of anything inside. The script sets it inline for the * flight and clears it on settle. */ html.lk-js [data-rise] { opacity: 0; } /* ══ The asset ═══════════════════════════════════════════════════════ * The hero clip, behind the first screen only — the nav and the hero — * and it scrolls away with them. Everything below sits on plain black. * The poster is painted twice on purpose: as the element's own * `poster`, which the browser holds until the first frame decodes, and * as the container's background, which covers the instant before the * poster itself has arrived. app.js picks the rendition for the * viewport. */ .lk-bg { position: absolute; top: 0; left: 0; right: 0; height: 100svh; z-index: 0; overflow: hidden; background: var(--lk-asset) center / cover no-repeat; } .lk-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: transparent; } /* ══ Look-library primitives ═════════════════════════════════════════ * The shared `.lk*` vocabulary every look composes from — pills, chips, * inputs, the Onda lockup, page scrims, asset windows, and the `.lkx-*` * inner set (nav, copy, headline, CTA row). Verbatim from globals.css; * the scope below overrides it at equal specificity by coming later. */ .lk { color: rgba(255, 255, 255, 0.94); } .lk-brand { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 650; letter-spacing: -0.01em; } .lk-mark { width: 0.62rem; height: 0.62rem; flex: none; border: 2px solid currentColor; border-radius: 50%; } .lk-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: fit-content; padding: 0.34rem 0.8rem; border-radius: var(--radius-pill); font-size: 0.66rem; font-weight: 550; white-space: nowrap; } .lk-pill-lg { padding: 0.55rem 1.1rem; font-size: 0.76rem; } .lk-pill-solid { background: rgba(255, 255, 255, 0.95); color: #0d0d0d; font-weight: 600; } .lk-pill-dark { background: rgba(13, 13, 13, 0.92); color: rgba(255, 255, 255, 0.95); font-weight: 600; } .lk-pill-ghost { border: 1px solid color-mix(in srgb, currentColor 40%, transparent); } .lk-pill-glass { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.95); } .lk-pill-blue { background: #7c7c7c; color: rgba(255, 255, 255, 0.97); font-weight: 600; } .lk-pill-lime { background: #c8c8c8; color: #202020; font-weight: 600; } .lk-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); font-size: 0.58rem; white-space: nowrap; } .lk-mono { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.05em; } .lk-input { display: inline-flex; align-items: center; padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.62); font-size: 0.64rem; white-space: nowrap; } .lk-scrim { position: absolute; inset: 0; z-index: 0; background: var(--lk-page); } .lk-win { position: absolute; z-index: 1; border-radius: var(--lk-win-r, 1rem); box-shadow: 0 0 0 300rem var(--lk-page); } /* Shared inner vocabulary — every look restyles these in its scope. */ .lk .lkx-nav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.2rem; font-size: 0.66rem; } .lk .lkx-links { display: flex; align-items: center; gap: 0.85rem; font-size: 0.64rem; opacity: 0.88; white-space: nowrap; } .lk .lkx-navstart, .lk .lkx-navend { display: flex; align-items: center; gap: 0.6rem; } .lk .lkx-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.8rem; padding: 0 1.2rem; margin-top: 1.6rem; } .lk .lkx-h1 { font-family: var(--font-general), system-ui, sans-serif; font-size: 2.1rem; font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; } .lk .lkx-sub { font-size: 0.7rem; line-height: 1.5; opacity: 0.78; } .lk .lkx-para { font-size: 0.6rem; line-height: 1.55; opacity: 0.8; } .lk .lkx-cta { display: flex; align-items: center; gap: 0.6rem; } .lk .lkx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .lk .lkx-textlink { font-size: 0.66rem; font-weight: 600; white-space: nowrap; } .lk .lkx-wordmark { font-family: var(--font-general), system-ui, sans-serif; font-weight: 700; letter-spacing: 0.01em; } .lk .lkx-orb { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: #0d0d0d; font-size: 0.6rem; font-style: normal; } .lk .lkx-orb-dark { background: #0d0d0d; color: rgba(255, 255, 255, 0.95); } .lk .lkx-avatars { display: inline-flex; } .lk .lkx-avatars i { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); background: linear-gradient(140deg, #888888, #a1a1a1); } .lk .lkx-avatars i + i { margin-left: -0.35rem; background: linear-gradient(140deg, #b7b7b7, #7c7c7c); } .lk .lkx-avatars i + i + i { background: linear-gradient(140deg, #bbbbbb, #6f6f6f); } /* Interactive chrome — mock controls accept the pointer and answer * with instant hover/press feedback (state swaps only; motion stays * spring-only). */ .lk .lk-pill, .lk .lk-chip, .lk .lk-input, .lk .lkx-textlink, .lk .lkx-links span { pointer-events: auto; cursor: pointer; } .lk .lk-input { cursor: text; } .lk .lk-pill:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent); } .lk .lk-pill:active { filter: brightness(0.92); } .lk .lk-chip:hover { background: color-mix(in srgb, currentColor 14%, transparent); } .lk .lk-input:hover { border-color: color-mix(in srgb, currentColor 45%, transparent); } .lk .lkx-links span:hover, .lk .lkx-textlink:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.25em; } /* ══ Split lab — the composition ════════════════════════════════════════════ * Everything specific to `.lk-divide`. This is the block to work in. * * Source: Figma "Frame 5" (node 2089:776), a 1920 × 1080 frame. The * numbers below are that frame's numbers, in px: * * nav 72px tall, 30% white over the asset, hairline-divided * into five 237.5px cells (four left, Contact far right) * left 950 of the 1920 — an opaque white panel, full height * right the asset itself * * The `--d-*` set is the whole responsive story: the RESPONSIVE block * at the end restates it per breakpoint and changes nothing else until * the columns stack. */ .lk-divide { /* Nav */ --d-nav-fs: 24px; --d-nav-py: 24px; --d-nav-px: 10px; --d-mark: 18px; --d-brand-gap: 8px; /* Headline group — the 82px star, then three 72px/1.2 lines */ --d-star: 82px; --d-head-gap: 24px; --d-h1: 72px; /* Footer group — the two-line paragraph and the button row */ --d-sub: 24px; /* The paragraph carries its own line break, so on the desktop * reading it needs no measure — the two lines ARE the 512px the * frame gives it. Only the stacked layout, where the break comes * out, sets a real one. */ --d-sub-max: none; --d-btn-fs: 24px; --d-btn-px: 48px; --d-btn-py: 20px; --d-btn-gap: 16px; /* The white panel's own frame: 51px each side (950 − 848), 30px * under the buttons, and the 40px between paragraph and buttons * (946 → 986). */ --d-pad-x: 51px; --d-pad-b: 30px; --d-foot-gap: 40px; /* The frame's ring box — kept for the side card's width. */ --d-ring: 606px; /* The split — 950 of the frame's 1920. The nav's cells, the white * panel and the Contact cell (a quarter of it) all read this. */ --d-split: 49.48%; /* The one hairline the whole chrome is drawn with. */ --d-line: rgba(255, 255, 255, 0.28); /* ── The launchpad's own numbers ────────────────────────────── * The sections under the hero are cut on the same frame and step * down through the same breakpoints. */ --d-h2: 48px; --d-body: 18px; --d-mono: 14px; --d-labelw: 150px; --d-rowpad: 14px; --d-fgap: 28px; --d-fpad-t: 40px; --d-cell-pad: 24px; --d-cardgap: 14px; --d-card-img: 72px; --d-cols: 4; /* ── Dark theme palette ─────────────────────────────────────────── * The split is the whole composition: chrome over the asset on one * side, an opaque panel on the other. Only the panel inverts — the * nav keeps riding the asset, it just stops being light glass. The * pill pair swaps roles with it: against a dark panel the filled * pill has to be the light one to stay the primary. */ /* Glass, not paint. The panel keeps its 8px backdrop blur and lets * the asset through instead of covering it, which is the whole point * of the split. */ --d-panel: rgba(16, 16, 16, 0.62); --d-panel-ink: #f2f2f2; --d-panel-dim: rgba(242, 242, 242, 0.45); --d-navbg: rgba(10, 10, 10, 0.42); --d-cta: #f2f2f2; --d-cta-ink: #0c0c0c; --d-cta-hover: #ffffff; color: var(--d-panel-ink); font-family: var(--font-general), system-ui, sans-serif; } /* ── Nav ───────────────────────────────────────────────────────────── * Five cells over the asset, not a bar with links in it: the dividers * are cell borders, so the one at 950px lines up with the edge of the * white panel below it. Sticky, so the section links stay in reach. */ .lk-divide .lkx-nav { position: sticky; top: 0; align-items: stretch; gap: 0; padding: 0; background: var(--d-navbg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--d-line); color: #fff; font-size: var(--d-nav-fs); font-weight: 400; line-height: 1; } .lk-divide .lkx-navmain { display: flex; align-items: stretch; width: var(--d-split); } .lk-divide .lkx-navcell { display: flex; flex: 1 0 0; min-width: 0; align-items: center; justify-content: center; padding: var(--d-nav-py) var(--d-nav-px); border-right: 1px solid var(--d-line); white-space: nowrap; pointer-events: auto; cursor: pointer; color: inherit; text-decoration: none; } /* Contact sits at the far right, a quarter of the split wide, and * carries the divider on its left instead. Here there are two of them — * Twitter and the CA — side by side. */ .lk-divide .lkx-navside { display: flex; align-items: stretch; flex: none; width: calc(var(--d-split) / 2); margin-left: auto; } .lk-divide .lkx-navcontact { flex: 1 0 0; width: auto; border-right: 0; border-left: 1px solid var(--d-line); } /* Long labels have a short twin for the smallest phones. */ .lk-divide .lkx-short { display: none; } .lk-divide .lkx-navcell:hover, .lk-divide .lkx-navcell[aria-current="page"] { background: rgba(255, 255, 255, 0.16); } .lk-divide .lkx-navcell:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } .lk-divide .lkx-navcell[aria-disabled="true"] { cursor: default; color: rgba(255, 255, 255, 0.5); } .lk-divide .lkx-navcell[aria-disabled="true"]:hover { background: transparent; } .lk-divide .lk-brand { gap: var(--d-brand-gap); font-size: inherit; font-weight: 400; letter-spacing: 0; } .lk-divide .lk-mark { width: var(--d-mark); height: var(--d-mark); border-width: 1px; border-color: #fff; } /* The CA cell: a label and the address, mono, click to copy. */ .lk-divide .lkx-ca { gap: var(--d-brand-gap); font-family: var(--font-mono); font-size: calc(var(--d-nav-fs) * 0.72); letter-spacing: 0.04em; } .lk-divide .lkx-calabel { opacity: 0.5; } .lk-divide .lkx-ca.is-copied .lkx-caval { color: #fff; } .lk-divide .lkx-ca.is-soon { cursor: default; } .lk-divide .lkx-ca.is-soon:hover { background: transparent; } /* ── The sections ──────────────────────────────────────────────────── * Everything under the hero. Each one starts with the same hairline * strip the nav is made of, and anchors land under the sticky nav. * There is no clip down here: the ground is plain black, the boxes are * black with white hairlines, the type is white. Nothing is glass. */ .lk-divide .lkx-section { position: relative; z-index: 2; scroll-margin-top: var(--nav-h); background: var(--lk-asset); } .lk-divide .lkx-section .lkx-lhead, .lk-divide .lkx-section .lkx-more, .lk-divide .lkx-section .lkx-sbody, .lk-divide .lkx-section .lkx-card, .lk-divide .lkx-section .lkx-lstate, .lk-divide .lkx-section .lkx-sidecard, .lk-divide .lkx-launch .lkx-colcopy, .lk-divide .lkx-footer { background: var(--lk-asset); -webkit-backdrop-filter: none; backdrop-filter: none; } .lk-divide .lkx-section .lkx-lhead { color: #fff; } .lk-divide .lkx-section .lkx-lrefresh:hover, .lk-divide .lkx-section .lkx-more:hover, .lk-divide a.lkx-fcell:hover { background: rgba(255, 255, 255, 0.1); } .lk-divide .lkx-hero { scroll-margin-top: var(--nav-h); } /* The last section fills the screen so its anchor can land under the nav * even when its content is short; the rest is black, like the page. */ .lk-divide .lkx-proof { min-height: calc(100svh - var(--nav-h)); } /* `hidden` always wins, even on things the look gives a display of their * own (pills are inline-flex, strips are flex). */ .lk-divide [hidden] { display: none !important; } /* Focus rings for everything interactive, in the chrome's own white. */ .lk-divide :is(a, button, input, summary):focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ── The two columns ────────────────────────────────────────────── */ .lk-divide .lkx-cols { display: flex; flex: 1; min-height: 0; position: relative; z-index: 2; } /* The hero is the first screen: whatever the nav leaves of it. */ .lk-divide .lkx-hero { min-height: calc(100svh - var(--nav-h)); } .lk-divide .lkx-colcopy { display: flex; flex-direction: column; align-items: center; flex: none; width: var(--d-split); padding: 0 var(--d-pad-x) var(--d-pad-b); background: var(--d-panel); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: center; overflow: hidden; } /* The panel's two gaps — the air above the star and the air between * headline and paragraph. On the 1080-tall frame they are 263px and * 189px, so the panel's free height splits 58 : 42 between them. * Distributing that RATIO rather than those two numbers is what keeps * the panel reading the same in a window that is not 1080 tall; the * `min-height` only comes into play once the columns stack and there * is no free height left to split. */ .lk-divide .lkx-gap { display: block; width: 100%; } .lk-divide .lkx-gap-a { flex: 58 1 0; min-height: var(--d-gap-a, 0px); } .lk-divide .lkx-gap-b { flex: 42 1 0; min-height: var(--d-gap-b, 0px); } .lk-divide .lkx-head { display: flex; flex: none; flex-direction: column; align-items: center; gap: var(--d-head-gap); width: 100%; } /* The star's box is 82px; the glyph inside it is 69.04px, which the * viewBox's negative origin holds in place at every size. */ .lk-divide .lkx-star { width: var(--d-star); height: var(--d-star); flex: none; } /* The mark: the lunch bag from the pfp, transparent, sitting in the star's box. */ .lk-divide .lkx-logo { display: block; object-fit: contain; object-position: left bottom; } .lk-divide .lkx-h1 { font-family: var(--font-general), system-ui, sans-serif; font-size: var(--d-h1); font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: uppercase; color: var(--d-panel-ink); } /* "lunches" and "go to" drop back to half the panel ink. */ .lk-divide .lkx-h1 em { font-style: normal; color: var(--d-panel-dim); } .lk-divide .lkx-foot { display: flex; flex: none; flex-direction: column; align-items: center; gap: var(--d-foot-gap); width: 100%; } .lk-divide .lkx-sub { max-width: var(--d-sub-max); font-size: var(--d-sub); line-height: 1.2; color: var(--d-panel-ink); opacity: 1; } .lk-divide .lkx-cta { gap: var(--d-btn-gap); } .lk-divide .lk-pill { padding: var(--d-btn-py) var(--d-btn-px); border-radius: 32px; font-size: var(--d-btn-fs); font-weight: 400; line-height: 1; text-decoration: none; } .lk-divide .lk-pill-dark { background: var(--d-cta); color: var(--d-cta-ink); } .lk-divide .lk-pill-ghost { border: 1px solid rgba(242, 242, 242, 0.5); color: var(--d-panel-ink); } /* The shared pill hover is a brightness filter, which does nothing to * black and nothing to a transparent ghost — both get a real state. */ .lk-divide .lk-pill:hover { filter: none; box-shadow: none; } .lk-divide .lk-pill-dark:hover { background: var(--d-cta-hover); } .lk-divide .lk-pill-ghost:hover { background: rgba(255, 255, 255, 0.08); } .lk-divide .lk-pill:active { filter: brightness(0.94); } .lk-divide .lk-pill:disabled, .lk-divide .lk-pill[disabled] { cursor: default; opacity: 0.45; } .lk-divide .lk-pill:disabled:hover { background: var(--d-cta); } .lk-divide .lk-pill-ghost:disabled:hover { background: transparent; } /* A smaller pill for inline actions — copy, explorer, trade. */ .lk-divide .lkx-minipill { padding: calc(var(--d-btn-py) * 0.45) calc(var(--d-btn-px) * 0.4); font-size: var(--d-mono); letter-spacing: 0.04em; } .lk-divide .lkx-minipill[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } /* The right column of a split section. In the hero it is the clip, * uncovered; in the launch section it holds the side card. */ .lk-divide .lkx-colviz { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; } /* ══ Launch — the form in the panel ═════════════════════════════════ * The same panel as the hero, read left-aligned: a heading, then * hairline-divided rows, the button pair and the log. */ .lk-divide .lkx-colform { align-items: stretch; justify-content: flex-start; gap: var(--d-fgap); padding-top: var(--d-fpad-t); text-align: left; overflow: visible; } .lk-divide .lkx-h2 { font-family: var(--font-general), system-ui, sans-serif; font-size: var(--d-h2); font-weight: 400; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; color: var(--d-panel-ink); } .lk-divide .lkx-fsub { margin-top: 10px; max-width: 36em; font-size: var(--d-body); line-height: 1.4; color: var(--d-panel-dim); } .lk-divide .lkx-form { display: flex; flex: none; flex-direction: column; border-top: 1px solid var(--d-line); } .lk-divide .lkx-row { display: grid; grid-template-columns: var(--d-labelw) minmax(0, 1fr); align-items: center; gap: 16px; padding: var(--d-rowpad) 0; border-bottom: 1px solid var(--d-line); cursor: text; } .lk-divide .lkx-k { font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-panel-dim); white-space: nowrap; } .lk-divide .lkx-row input:not([type="checkbox"]) { width: 100%; min-width: 0; font-family: var(--font-general), system-ui, sans-serif; font-size: var(--d-body); line-height: 1.2; color: var(--d-panel-ink); background: transparent; border: 0; outline: 0; padding: 0; -moz-appearance: textfield; } .lk-divide .lkx-row input::-webkit-outer-spin-button, .lk-divide .lkx-row input::-webkit-inner-spin-button { -webkit-appearance: none; } .lk-divide .lkx-row input::placeholder { color: rgba(242, 242, 242, 0.3); } .lk-divide .lkx-row:focus-within { border-bottom-color: rgba(255, 255, 255, 0.75); } .lk-divide .lkx-row input[aria-invalid="true"] { color: #ffb4b4; } .lk-divide .lkx-row.is-invalid { border-bottom-color: rgba(255, 180, 180, 0.8); } /* ── The launch form, boxed ────────────────────────────────────────── * Labels above hairline-boxed inputs, two to a row; the optional parts * fold away; the image is a drop zone; one card states the reward. */ .lk-divide .lkx-form2 { display: flex; flex: none; flex-direction: column; gap: var(--d-fgap); } .lk-divide .lkx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--d-cardgap) var(--d-cell-pad); } .lk-divide .lkx-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; cursor: text; } .lk-divide .lkx-field-wide { grid-column: 1 / -1; } .lk-divide .lkx-label { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-panel-ink); } .lk-divide .lkx-label em, .lk-divide .lkx-fold > summary em { font-style: normal; letter-spacing: 0.02em; text-transform: none; color: var(--d-panel-dim); } .lk-divide .lkx-input { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--d-line); background: rgba(255, 255, 255, 0.03); font-family: var(--font-general), system-ui, sans-serif; font-size: var(--d-body); line-height: 1.3; color: var(--d-panel-ink); outline: 0; -webkit-appearance: none; -moz-appearance: textfield; } .lk-divide .lkx-input::placeholder { color: rgba(242, 242, 242, 0.35); } .lk-divide .lkx-input:focus { border-color: #fff; } .lk-divide .lkx-input-fixed { color: var(--d-panel-dim); background: transparent; border-style: dashed; cursor: default; user-select: all; } .lk-divide .lkx-input[aria-invalid="true"] { border-color: #ffb4b4; } .lk-divide .lkx-input::-webkit-outer-spin-button, .lk-divide .lkx-input::-webkit-inner-spin-button { -webkit-appearance: none; } .lk-divide textarea.lkx-input { resize: vertical; min-height: 88px; } .lk-divide .lkx-fold { border: 1px solid var(--d-line); } .lk-divide .lkx-fold > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 14px; font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-panel-ink); list-style: none; } .lk-divide .lkx-fold > summary > span { flex: 1; } .lk-divide .lkx-fold > summary::after { content: "+"; color: var(--d-panel-dim); } .lk-divide .lkx-fold[open] > summary::after { content: "−"; } .lk-divide .lkx-fold-body { padding: 4px 14px 14px; } .lk-divide .lkx-checkline { flex-direction: row; align-items: center; gap: 12px; cursor: pointer; font-size: var(--d-body); line-height: 1.3; color: var(--d-panel-ink); } .lk-divide .lkx-checkline input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 14px; height: 14px; border: 1px solid rgba(242, 242, 242, 0.6); background: transparent; cursor: pointer; } .lk-divide .lkx-checkline input[type="checkbox"]:checked { background: var(--d-panel-ink); box-shadow: inset 0 0 0 3px rgba(16, 16, 16, 0.9); } /* The drop zone. */ .lk-divide .lkx-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; padding: var(--d-fpad-t) var(--d-cell-pad); border: 1px dashed var(--d-line); text-align: center; cursor: pointer; } .lk-divide .lkx-drop.is-over { border-color: #fff; background: rgba(255, 255, 255, 0.04); } .lk-divide .lkx-drop.is-invalid { border-color: #ffb4b4; } .lk-divide .lkx-drop-idle, .lk-divide .lkx-drop-done { display: flex; flex-direction: column; align-items: center; gap: 10px; } .lk-divide .lkx-drop-ico { width: 40px; height: 40px; color: rgba(255, 255, 255, 0.7); } .lk-divide .lkx-drop-h { font-size: var(--d-body); line-height: 1.2; color: #fff; overflow-wrap: anywhere; } .lk-divide .lkx-drop-s { font-family: var(--font-mono); font-size: var(--d-mono); color: var(--d-panel-dim); } .lk-divide .lkx-drop-img { width: 120px; height: 120px; object-fit: cover; border: 1px solid var(--d-line); background: #0d0d0d; } .lk-divide .lkx-drop-actions { display: flex; gap: 8px; } .lk-divide .lkx-drop .lkx-minipill { margin-top: 6px; } .lk-divide .lkx-hints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--d-cell-pad); margin-top: calc(var(--d-fgap) * -0.5); font-family: var(--font-mono); font-size: var(--d-mono); line-height: 1.5; color: var(--d-panel-dim); } .lk-divide .lkx-hints b { margin-right: 8px; font-weight: 400; color: var(--d-panel-ink); } .lk-divide .lkx-note { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--d-line); } .lk-divide .lkx-note-h { font-size: var(--d-body); line-height: 1.2; color: #fff; } .lk-divide .lkx-note-t { font-family: var(--font-mono); font-size: var(--d-mono); line-height: 1.5; color: var(--d-panel-dim); } .lk-divide .lkx-note-t a { color: var(--d-panel-ink); text-decoration: underline; text-underline-offset: 0.2em; } .lk-divide .lkx-logfold .lkx-log { min-height: 0; max-height: 220px; padding: 0 14px 14px; border-top: 0; } /* A read-only row — the creator reward, the recipient, the keeper. */ .lk-divide .lkx-row-static { cursor: default; } .lk-divide .lkx-static { min-width: 0; font-family: var(--font-general), system-ui, sans-serif; font-size: var(--d-body); line-height: 1.3; color: var(--d-panel-ink); text-align: left; } .lk-divide .lkx-dim { color: var(--d-panel-dim); } .lk-divide .lkx-static a, .lk-divide .lkx-link { color: var(--d-panel-ink); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } .lk-divide .lkx-link, .lk-divide button.lkx-static { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk-divide .lkx-fcta { flex: none; flex-wrap: wrap; } .lk-divide .lkx-log { flex: none; max-height: 260px; min-height: 96px; overflow: auto; padding-top: 12px; border-top: 1px solid var(--d-line); font-family: var(--font-mono); font-size: var(--d-mono); line-height: 1.55; color: var(--d-panel-dim); white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; } .lk-divide .lkx-log .ok { color: #ffffff; } .lk-divide .lkx-log .key { color: var(--d-panel-ink); } .lk-divide .lkx-log .warn { color: rgba(242, 242, 242, 0.75); font-style: italic; } .lk-divide .lkx-log .err { color: #ffb4b4; } .lk-divide .lkx-log a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; } /* ── The side card ─────────────────────────────────────────────────── * The launch section's right column: the token preview, the terms, * the wallet readout, the review before signing, and the result. A * glass card at the frame's ring width, centred where the ring was. */ .lk-divide .lkx-side { display: flex; flex: 1; min-width: 0; align-items: flex-start; justify-content: center; padding: var(--d-fpad-t) var(--d-cell-pad) var(--d-pad-b); } .lk-divide .lkx-sidecard { display: flex; flex-direction: column; gap: var(--d-cardgap); width: min(100%, var(--d-ring)); padding: var(--d-cell-pad); border: 1px solid var(--d-line); background: var(--d-panel); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--d-panel-ink); position: sticky; top: calc(var(--nav-h) + var(--d-cell-pad)); } .lk-divide .lkx-readout2 { display: flex; flex-direction: column; gap: 6px; padding-top: var(--d-cardgap); border-top: 1px solid var(--d-line); font-family: var(--font-mono); } .lk-divide .lkx-rstate { font-size: var(--d-body); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; } .lk-divide .lkx-rline { font-size: var(--d-mono); letter-spacing: 0.05em; line-height: 1.4; color: rgba(255, 255, 255, 0.6); overflow-wrap: anywhere; } .lk-divide .lkx-rmint a { color: #fff; text-decoration: underline; text-underline-offset: 0.25em; } .lk-divide .lkx-review, .lk-divide .lkx-success { display: flex; flex-direction: column; gap: var(--d-cardgap); padding-top: var(--d-cardgap); border-top: 1px solid var(--d-line); } .lk-divide .lkx-review[hidden], .lk-divide .lkx-success[hidden] { display: none; } .lk-divide .lkx-review .lkx-cta, .lk-divide .lkx-success .lkx-cta { flex-wrap: wrap; } /* The phase of a launch shows in the state line's colour. */ .lk-divide .lkx-launch[data-phase="busy"] .lkx-rstate { color: rgba(255, 255, 255, 0.7); } .lk-divide .lkx-launch[data-phase="error"] .lkx-rstate { color: #ffb4b4; } .lk-divide .lkx-launch[data-phase="live"] .lkx-rstate { color: #fff; } /* ══ Section header strips and glass bodies ══════════════════════════ * A hairline strip like the nav: the first cell the nav's own * quarter-split width so its divider falls under the nav's, a wide * middle cell, a right cell that is an action. */ .lk-divide .lkx-lhead { display: flex; flex: none; align-items: stretch; background: var(--d-navbg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); color: #fff; font-size: var(--d-nav-fs); line-height: 1; } .lk-divide .lkx-lcell { display: flex; align-items: center; min-width: 0; padding: var(--d-nav-py) calc(var(--d-nav-px) + 14px); border-right: 1px solid var(--d-line); white-space: nowrap; color: inherit; text-decoration: none; } .lk-divide .lkx-ltitle { flex: none; width: calc(var(--d-split) / 4); justify-content: center; padding-inline: var(--d-nav-px); } .lk-divide .lkx-sh { font-family: var(--font-general), system-ui, sans-serif; font-size: inherit; font-weight: 400; white-space: nowrap; } .lk-divide .lkx-lcount { margin-left: 0.5em; font-family: var(--font-mono); font-size: 0.7em; opacity: 0.55; } .lk-divide .lkx-ldesc { flex: 1; font-size: calc(var(--d-nav-fs) * 0.7); line-height: 1.3; white-space: normal; color: rgba(255, 255, 255, 0.75); } .lk-divide .lkx-lsearchcell { flex: 1; cursor: text; } .lk-divide .lkx-srlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lk-divide .lkx-lsearch { width: 100%; min-width: 0; font-family: var(--font-general), system-ui, sans-serif; font-size: calc(var(--d-nav-fs) * 0.8); color: #fff; background: transparent; border: 0; outline: 0; -webkit-appearance: none; } .lk-divide .lkx-lsearch::placeholder { color: rgba(255, 255, 255, 0.4); } .lk-divide .lkx-lsearch::-webkit-search-cancel-button { -webkit-appearance: none; } .lk-divide .lkx-lcluster { flex: none; font-family: var(--font-mono); font-size: calc(var(--d-nav-fs) * 0.66); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; } .lk-divide .lkx-lrefresh { flex: none; width: calc(var(--d-split) / 4); justify-content: center; margin-left: auto; padding-inline: var(--d-nav-px); border-right: 0; border-left: 1px solid var(--d-line); cursor: pointer; } .lk-divide .lkx-lrefresh:hover { background: rgba(255, 255, 255, 0.16); } .lk-divide .lkx-lrefresh.is-busy { opacity: 0.5; cursor: default; } /* A glass body for the sections that are mostly text. */ .lk-divide .lkx-sbody { display: flex; flex-direction: column; gap: var(--d-fgap); padding: var(--d-fpad-t) var(--d-pad-x) calc(var(--d-fpad-t) + var(--d-pad-b)); background: var(--d-panel); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ══ Launches — the directory ════════════════════════════════════════ * A full-bleed grid of glass cards over the clip, newest first, with a * hairline "load more" cell under it. */ .lk-divide .lkx-lbody { position: relative; display: flex; flex-direction: column; } .lk-divide .lkx-lgrid { display: grid; grid-template-columns: repeat(var(--d-cols), minmax(0, 1fr)); border-left: 1px solid var(--d-line); } .lk-divide .lkx-lgrid:empty { border-left: 0; } .lk-divide .lkx-card { display: flex; flex-direction: column; gap: var(--d-cardgap); min-width: 0; padding: var(--d-cell-pad); border-right: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); background: var(--d-panel); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--d-panel-ink); } .lk-divide .lkx-card.is-new { outline: 1px solid rgba(255, 255, 255, 0.7); outline-offset: -1px; } .lk-divide .lkx-cardtop { display: flex; align-items: center; gap: 16px; min-width: 0; } .lk-divide .lkx-cardimg, .lk-divide .lkx-cardimg-fallback { flex: none; width: var(--d-card-img); height: var(--d-card-img); border: 1px solid var(--d-line); background: rgba(13, 13, 13, 0.9); object-fit: cover; } .lk-divide .lkx-cardimg[hidden] { display: none; } .lk-divide .lkx-cardimg-fallback { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: calc(var(--d-card-img) * 0.3); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.75); } .lk-divide .lkx-cardimg-fallback[hidden] { display: none; } .lk-divide .lkx-cardid { min-width: 0; } .lk-divide .lkx-cardname { font-size: var(--d-body); line-height: 1.15; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk-divide .lkx-cardsym { margin-top: 4px; font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.08em; color: var(--d-panel-dim); } .lk-divide .lkx-cardrows { display: flex; flex-direction: column; } .lk-divide .lkx-cardrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--d-line); font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.03em; min-width: 0; } .lk-divide .lkx-cardrow .lkx-v { color: var(--d-panel-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; } .lk-divide .lkx-mint { cursor: pointer; color: var(--d-panel-ink); font: inherit; letter-spacing: inherit; } .lk-divide .lkx-mint:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 0.25em; } .lk-divide .lkx-mint.is-copied { color: #fff; } .lk-divide .lkx-mint:disabled { cursor: default; color: var(--d-panel-dim); } /* A copy button sitting in a text row keeps the row's type, not the card's. */ .lk-divide .lkx-mint.lkx-static { font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.03em; text-align: left; } .lk-divide .lkx-cardlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .lk-divide .lkx-cardlinks .lk-pill { padding: calc(var(--d-btn-py) * 0.45) calc(var(--d-btn-px) * 0.4); font-size: var(--d-mono); letter-spacing: 0.04em; } .lk-divide .lkx-chip { display: inline-flex; align-items: center; align-self: flex-start; padding: 3px 7px; border: 1px solid rgba(255, 255, 255, 0.4); font-family: var(--font-mono); font-size: calc(var(--d-mono) * 0.8); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); } /* Loading, empty and error, in one hairline glass cell. */ .lk-divide .lkx-lstate { display: flex; flex-direction: column; align-items: center; gap: var(--d-foot-gap); padding: calc(var(--d-fpad-t) * 2) var(--d-pad-x); border-bottom: 1px solid var(--d-line); background: var(--d-panel); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: center; } .lk-divide .lkx-lstate[hidden] { display: none; } .lk-divide .lkx-lstate-h { font-size: var(--d-h2); line-height: 1.1; text-transform: uppercase; color: #fff; } .lk-divide .lkx-lstate.is-quiet .lkx-lstate-h { font-family: var(--font-mono); font-size: var(--d-body); letter-spacing: 0.12em; color: var(--d-panel-dim); } .lk-divide .lkx-more { display: block; width: 100%; padding: var(--d-nav-py) var(--d-nav-px); border-bottom: 1px solid var(--d-line); background: var(--d-navbg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--d-nav-fs); line-height: 1; color: #fff; text-align: center; cursor: pointer; } .lk-divide .lkx-more:hover { background: rgba(255, 255, 255, 0.16); } .lk-divide .lkx-more:disabled { opacity: 0.5; cursor: default; } .lk-divide .lkx-more[hidden] { display: none; } /* ══ How it works ════════════════════════════════════════════════════ * Three steps as hairline cells; the technical detail folded away. The * container draws the top and left edges, each cell its right and * bottom, so any column count closes cleanly. */ .lk-divide .lkx-steps { display: grid; flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--d-line); border-left: 1px solid var(--d-line); } .lk-divide .lkx-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lk-divide .lkx-step { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--d-cell-pad); border-right: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); } .lk-divide .lkx-stepn { font-family: var(--font-general), system-ui, sans-serif; font-size: var(--d-body); line-height: 1.15; text-transform: uppercase; color: var(--d-panel-ink); } .lk-divide .lkx-stepk { font-family: var(--font-mono); font-size: calc(var(--d-mono) * 0.85); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242, 242, 242, 0.7); } .lk-divide .lkx-stept { font-family: var(--font-mono); font-size: calc(var(--d-mono) * 0.92); line-height: 1.5; color: var(--d-panel-dim); } .lk-divide .lkx-details { border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); } .lk-divide .lkx-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--d-rowpad) 0; font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-panel-ink); list-style: none; } .lk-divide .lkx-details > summary::after { content: "+"; color: var(--d-panel-dim); } .lk-divide .lkx-details[open] > summary::after { content: "−"; } .lk-divide .lkx-details-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--d-fgap) var(--d-cell-pad); padding: 0 0 var(--d-fgap); } .lk-divide .lkx-dblock { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .lk-divide .lkx-dblock .lkx-static { max-width: 40em; } /* ══ Proof of impact ═════════════════════════════════════════════════ * Three counters kept apart, the recipient rows, the donation history * as a hairline table, the receipts. */ .lk-divide .lkx-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--d-line); border-left: 1px solid var(--d-line); } .lk-divide .lkx-counter { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--d-cell-pad); border-right: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); } .lk-divide .lkx-big { font-family: var(--font-general), system-ui, sans-serif; font-size: var(--d-h2); line-height: 1; color: #fff; overflow-wrap: anywhere; } .lk-divide .lkx-big small { font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-panel-dim); margin-left: 0.4em; } .lk-divide .lkx-charity { flex: none; } /* One bordered box, no rules inside: a heading line, then its content. */ .lk-divide .lkx-box { display: flex; flex-direction: column; gap: 12px; padding: var(--d-cell-pad); border: 1px solid var(--d-line); } .lk-divide .lkx-box-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; } .lk-divide .lkx-box-hv { display: flex; align-items: baseline; gap: 10px; min-width: 0; text-align: right; flex-wrap: wrap; justify-content: flex-end; } .lk-divide .lkx-box-sub { margin-top: 12px; } .lk-divide .lkx-addrwrap { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; } .lk-divide .lkx-addr { min-width: 0; font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.03em; color: var(--d-panel-ink); overflow-wrap: anywhere; } .lk-divide .lkx-addr.is-copied { color: #fff; } .lk-divide .lkx-addrbtns { display: inline-flex; gap: 8px; flex: none; } .lk-divide .lkx-table { display: flex; flex-direction: column; } .lk-divide .lkx-tr { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 110px minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 7px 0; font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.03em; color: var(--d-panel-ink); } /* The one rule the table keeps: under its header. */ .lk-divide .lkx-tr.lkx-thead { border-bottom: 1px solid var(--d-line); } .lk-divide .lkx-tr > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk-divide .lkx-th { color: var(--d-panel-dim); text-transform: uppercase; letter-spacing: 0.08em; } .lk-divide .lkx-tr .lkx-when { color: var(--d-panel-dim); } .lk-divide .lkx-tr .lkx-status-held { color: var(--d-panel-dim); font-style: italic; } .lk-divide .lkx-tr .lkx-status-sent { color: #fff; } .lk-divide .lkx-tr a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; } .lk-divide .lkx-tr .lkx-txs { display: flex; gap: 10px; } /* The label a cell carries once the table stacks on a phone. */ .lk-divide .lkx-tr > [data-col]::before { content: attr(data-col) " "; display: none; color: var(--d-panel-dim); text-transform: uppercase; letter-spacing: 0.08em; } .lk-divide .lkx-ledgerempty { font-family: var(--font-mono); font-size: var(--d-mono); line-height: 1.5; color: var(--d-panel-dim); } .lk-divide .lkx-histcta { align-items: center; flex-wrap: wrap; gap: 16px; } .lk-divide .lkx-rawlink { font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.04em; color: var(--d-panel-dim); } .lk-divide .lkx-receipt { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; padding: 6px 0; font-family: var(--font-mono); font-size: var(--d-mono); line-height: 1.5; color: var(--d-panel-ink); } .lk-divide .lkx-receipt a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; } /* ══ Footer ══════════════════════════════════════════════════════════ */ .lk-divide .lkx-footer { position: relative; z-index: 2; display: flex; align-items: stretch; flex-wrap: wrap; border-top: 1px solid var(--d-line); background: var(--d-navbg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-family: var(--font-mono); font-size: var(--d-mono); letter-spacing: 0.06em; line-height: 1; } .lk-divide .lkx-fcell { display: flex; align-items: center; gap: 12px; padding: var(--d-nav-py) calc(var(--d-nav-px) + 14px); border-right: 1px solid var(--d-line); color: inherit; text-decoration: none; white-space: nowrap; } .lk-divide a.lkx-fcell:hover { background: rgba(255, 255, 255, 0.16); } .lk-divide .lkx-fbrand { font-family: var(--font-general), system-ui, sans-serif; letter-spacing: 0; font-size: var(--d-body); } .lk-divide .lkx-fbrand .lk-brand { font-size: inherit; } .lk-divide .lkx-fca { margin-left: auto; border-right: 0; border-left: 1px solid var(--d-line); } /* ══ RESPONSIVE ══════════════════════════════════════════════════════ * The composition is cut in pixels against a 1920 × 1080 frame, so * every step down is a media query. There are only two kinds of rule * in here: * * 1. the `--d-*` numbers. A width breakpoint is nothing but a * shorter list of them — type, spacing and the ring diagram come * down together, and the layout does not move. Each band is sized * for its NARROWEST width, so the headline's hard line breaks * hold everywhere inside it and never wrap a second time. * * 2. the layout switch at 860px, where the two hairline-divided * columns stop being side by side and stack: the white panel on * top, the ring diagram on the asset under it. * * Height gets its own guards at the end. A wide but shallow window — a * laptop with a shallow viewport, a phone on its side — runs out of * vertical room long before it runs out of horizontal, so those come * last and win. */ @media (max-width: 1900px) { .lk-divide { --d-nav-fs: 21px; --d-nav-py: 21px; --d-mark: 16px; --d-brand-gap: 7px; --d-star: 73px; --d-head-gap: 21px; --d-h1: 64px; --d-sub: 21px; --d-btn-fs: 21px; --d-btn-px: 43px; --d-btn-py: 18px; --d-btn-gap: 14px; --d-pad-x: 46px; --d-pad-b: 27px; --d-foot-gap: 36px; --d-ring: 539px; --d-h2: 44px; --d-body: 17px; --d-mono: 13px; --d-labelw: 140px; --d-rowpad: 13px; --d-fgap: 25px; --d-fpad-t: 36px; --d-cell-pad: 22px; --d-cardgap: 13px; --d-card-img: 66px; --d-cols: 4; } } @media (max-width: 1700px) { .lk-divide { --d-nav-fs: 19px; --d-nav-py: 19px; --d-mark: 14px; --d-brand-gap: 6px; --d-star: 64px; --d-head-gap: 19px; --d-h1: 56px; --d-sub: 19px; --d-btn-fs: 19px; --d-btn-px: 38px; --d-btn-py: 16px; --d-btn-gap: 12px; --d-pad-x: 42px; --d-pad-b: 24px; --d-foot-gap: 32px; --d-ring: 471px; --d-h2: 40px; --d-body: 16px; --d-mono: 13px; --d-labelw: 130px; --d-rowpad: 12px; --d-fgap: 22px; --d-fpad-t: 32px; --d-cell-pad: 20px; --d-cardgap: 12px; --d-card-img: 60px; --d-cols: 4; } } @media (max-width: 1500px) { .lk-divide { --d-nav-fs: 17px; --d-nav-py: 17px; --d-mark: 13px; --d-brand-gap: 6px; --d-star: 57px; --d-head-gap: 17px; --d-h1: 50px; --d-sub: 17px; --d-btn-fs: 17px; --d-btn-px: 33px; --d-btn-py: 14px; --d-btn-gap: 11px; --d-pad-x: 38px; --d-pad-b: 22px; --d-foot-gap: 28px; --d-ring: 422px; --d-h2: 36px; --d-body: 15px; --d-mono: 12px; --d-labelw: 120px; --d-rowpad: 11px; --d-fgap: 20px; --d-fpad-t: 28px; --d-cell-pad: 18px; --d-cardgap: 11px; --d-card-img: 56px; --d-cols: 4; } } @media (max-width: 1340px) { .lk-divide { --d-nav-fs: 16px; --d-nav-py: 15px; --d-mark: 12px; --d-brand-gap: 5px; --d-star: 50px; --d-head-gap: 15px; --d-h1: 44px; --d-sub: 16px; --d-btn-fs: 16px; --d-btn-px: 30px; --d-btn-py: 13px; --d-btn-gap: 10px; --d-pad-x: 34px; --d-pad-b: 20px; --d-foot-gap: 25px; --d-ring: 373px; --d-h2: 32px; --d-body: 14px; --d-mono: 12px; --d-labelw: 110px; --d-rowpad: 10px; --d-fgap: 18px; --d-fpad-t: 26px; --d-cell-pad: 17px; --d-cardgap: 10px; --d-card-img: 52px; --d-cols: 3; } } @media (max-width: 1200px) { .lk-divide { --d-nav-fs: 15px; --d-nav-py: 14px; --d-mark: 11px; --d-brand-gap: 5px; --d-star: 46px; --d-head-gap: 14px; --d-h1: 40px; --d-sub: 15px; --d-btn-fs: 15px; --d-btn-px: 27px; --d-btn-py: 12px; --d-btn-gap: 9px; --d-pad-x: 30px; --d-pad-b: 18px; --d-foot-gap: 23px; --d-ring: 338px; --d-h2: 30px; --d-body: 14px; --d-mono: 11px; --d-labelw: 104px; --d-rowpad: 10px; --d-fgap: 17px; --d-fpad-t: 24px; --d-cell-pad: 16px; --d-cardgap: 10px; --d-card-img: 48px; --d-cols: 3; } .lk-divide .lkx-tr { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 90px minmax(0, 1fr); } } @media (max-width: 1080px) { .lk-divide { --d-nav-fs: 14px; --d-nav-py: 13px; --d-mark: 10px; --d-brand-gap: 5px; --d-star: 41px; --d-head-gap: 12px; --d-h1: 36px; --d-sub: 14px; --d-btn-fs: 14px; --d-btn-px: 24px; --d-btn-py: 11px; --d-btn-gap: 8px; --d-pad-x: 26px; --d-pad-b: 17px; --d-foot-gap: 21px; --d-ring: 304px; --d-h2: 28px; --d-body: 13px; --d-mono: 11px; --d-labelw: 96px; --d-rowpad: 9px; --d-fgap: 16px; --d-fpad-t: 22px; --d-cell-pad: 15px; --d-cardgap: 9px; --d-card-img: 44px; --d-cols: 3; } } @media (max-width: 960px) { .lk-divide { --d-nav-fs: 13px; --d-nav-py: 12px; --d-mark: 10px; --d-brand-gap: 4px; --d-star: 36px; --d-head-gap: 11px; --d-h1: 32px; --d-sub: 13px; --d-btn-fs: 13px; --d-btn-px: 22px; --d-btn-py: 10px; --d-btn-gap: 8px; --d-pad-x: 22px; --d-pad-b: 16px; --d-foot-gap: 19px; --d-ring: 270px; --d-h2: 26px; --d-body: 13px; --d-mono: 11px; --d-labelw: 90px; --d-rowpad: 9px; --d-fgap: 15px; --d-fpad-t: 20px; --d-cell-pad: 14px; --d-cardgap: 9px; --d-card-img: 40px; --d-cols: 3; } .lk-divide .lkx-details-body { grid-template-columns: 1fr; } } /* ── Split lab on a phone ──────────────────────────────────────────── * Below 860 the split stops paying: half of 860 is not a column, it is * a gutter. The columns stack instead — the white panel takes what its * content needs, the clip takes the rest of the screen — and the nav's * cells spread across the full width rather than crowding into the left * half. The design's own line breaks stay in the headline; only the * paragraph's come out. */ @media (max-width: 860px) { .lk-divide { --d-nav-fs: 15px; --d-nav-py: 13px; --d-mark: 12px; --d-brand-gap: 5px; --d-star: 46px; --d-head-gap: 14px; --d-h1: 40px; --d-sub: 16px; --d-sub-max: 430px; --d-btn-fs: 16px; --d-btn-px: 30px; --d-btn-py: 13px; --d-btn-gap: 10px; --d-pad-x: 32px; --d-pad-b: 32px; --d-foot-gap: 24px; /* Stacked, the panel is only as tall as its content — there is no * free height left to split 58 : 42, so the two gaps become the * numbers they were standing in for. */ --d-gap-a: 48px; --d-gap-b: 36px; --d-ring: 392px; --d-h2: 30px; --d-body: 14px; --d-mono: 12px; --d-labelw: 100px; --d-rowpad: 10px; --d-fgap: 18px; --d-fpad-t: 24px; --d-cell-pad: 16px; --d-cardgap: 10px; --d-card-img: 48px; --d-cols: 2; } .lk-divide .lkx-navmain { flex: 1; width: auto; } .lk-divide .lkx-navside { width: auto; } .lk-divide .lkx-navcontact { flex: none; width: auto; padding-inline: calc(var(--d-nav-px) + 6px); } .lk-divide .lkx-cols { flex-direction: column; } .lk-divide .lkx-colcopy { width: 100%; flex: none; } .lk-divide .lkx-colviz { width: 100%; flex: 1 1 auto; min-height: 160px; } .lk-divide .lkx-sub br { display: none; } /* Stacked, the side card follows the form. */ .lk-divide .lkx-side { padding: var(--d-cell-pad); } .lk-divide .lkx-sidecard { position: static; width: 100%; } /* Section strips: the fixed-width end cells give way. */ .lk-divide .lkx-ltitle, .lk-divide .lkx-lrefresh { width: auto; padding-inline: calc(var(--d-nav-px) + 10px); } .lk-divide .lkx-lhead { flex-wrap: wrap; } .lk-divide .lkx-ldesc { flex-basis: 100%; order: 3; border-top: 1px solid var(--d-line); border-right: 0; } /* The history table stacks into labelled rows. */ .lk-divide .lkx-tr { grid-template-columns: 1fr 1fr; gap: 6px 16px; } .lk-divide .lkx-tr.lkx-thead { display: none; } .lk-divide .lkx-tr > * { white-space: normal; overflow-wrap: anywhere; } .lk-divide .lkx-tr > [data-col]::before { display: inline; } .lk-divide .lkx-receipt { grid-template-columns: 1fr; gap: 4px; } } @media (max-width: 600px) { .lk-divide { --d-nav-fs: 13px; --d-nav-py: 12px; --d-nav-px: 6px; --d-mark: 11px; --d-brand-gap: 4px; --d-star: 40px; --d-head-gap: 12px; --d-h1: 32px; --d-sub: 14px; --d-sub-max: 330px; --d-btn-fs: 14px; --d-btn-px: 24px; --d-btn-py: 12px; --d-btn-gap: 9px; --d-pad-x: 24px; --d-pad-b: 28px; --d-foot-gap: 20px; --d-gap-a: 36px; --d-gap-b: 30px; --d-ring: 294px; --d-h2: 26px; --d-body: 13px; --d-mono: 11px; --d-labelw: 90px; --d-rowpad: 9px; --d-fgap: 16px; --d-fpad-t: 20px; --d-cell-pad: 14px; --d-cardgap: 9px; --d-card-img: 44px; --d-cols: 2; } .lk-divide .lkx-fields, .lk-divide .lkx-hints { grid-template-columns: 1fr; } .lk-divide .lkx-steps, .lk-divide .lkx-steps-3, .lk-divide .lkx-counters { grid-template-columns: 1fr; } .lk-divide .lkx-lsearchcell { flex-basis: 100%; order: 2; border-top: 1px solid var(--d-line); } .lk-divide .lkx-lcluster { display: none; } } @media (max-width: 480px) { .lk-divide { --d-nav-fs: 11px; --d-nav-py: 11px; --d-nav-px: 4px; --d-mark: 9px; --d-brand-gap: 4px; --d-star: 34px; --d-head-gap: 11px; --d-h1: 26px; --d-sub: 13px; --d-sub-max: 280px; --d-btn-fs: 13px; --d-btn-px: 20px; --d-btn-py: 11px; --d-btn-gap: 8px; --d-pad-x: 16px; --d-pad-b: 24px; --d-foot-gap: 16px; --d-gap-a: 30px; --d-gap-b: 26px; --d-ring: 226px; --d-h2: 22px; --d-body: 12px; --d-mono: 10px; --d-labelw: 80px; --d-rowpad: 8px; --d-fgap: 14px; --d-fpad-t: 18px; --d-cell-pad: 12px; --d-cardgap: 8px; --d-card-img: 40px; --d-cols: 1; } .lk-divide .lkx-full { display: none; } .lk-divide .lkx-short { display: inline; } .lk-divide .lkx-row { grid-template-columns: 1fr; gap: 4px; } .lk-divide .lkx-fcell { flex: 1 1 auto; justify-content: center; } .lk-divide .lkx-fca { margin-left: 0; border-left: 0; } } /* The last band is for the 320–360 phones, where the headline's three * hard line breaks are the binding constraint and nothing else is. */ @media (max-width: 360px) { .lk-divide { --d-nav-fs: 10px; --d-nav-py: 10px; --d-nav-px: 3px; --d-mark: 8px; --d-brand-gap: 3px; --d-star: 30px; --d-head-gap: 10px; --d-h1: 22px; --d-sub: 12px; --d-sub-max: 240px; --d-btn-fs: 12px; --d-btn-px: 18px; --d-btn-py: 10px; --d-btn-gap: 8px; --d-pad-x: 14px; --d-pad-b: 20px; --d-foot-gap: 14px; --d-gap-a: 22px; --d-gap-b: 20px; --d-ring: 206px; --d-h2: 20px; --d-body: 12px; --d-mono: 10px; --d-labelw: 72px; --d-rowpad: 8px; --d-fgap: 12px; --d-fpad-t: 16px; --d-cell-pad: 12px; --d-cardgap: 8px; --d-card-img: 36px; --d-cols: 1; } } /* ── Short windows ───────────────────────────────────────────── * Width says nothing about height. These come after the width bands so * they win, and they only touch what costs vertical room. * * Each one is also floored by a `min-width`, because a guard that wins * must only ever make the headline SMALLER — a size cut for a short * 1440 would be an increase at 900 wide, and the three hard line * breaks would give way. */ @media (min-width: 1081px) and (max-height: 760px) { .lk-divide { --d-star: 44px; --d-head-gap: 13px; --d-h1: 38px; --d-sub: 15px; --d-btn-fs: 15px; --d-btn-py: 11px; --d-foot-gap: 22px; --d-pad-b: 18px; --d-ring: 333px; } } @media (min-width: 861px) and (max-width: 1080px) and (max-height: 760px) { .lk-divide { --d-star: 34px; --d-head-gap: 11px; --d-h1: 30px; --d-sub: 13px; --d-btn-fs: 13px; --d-btn-px: 22px; --d-btn-py: 10px; --d-foot-gap: 18px; --d-pad-b: 16px; --d-ring: 255px; } } @media (min-width: 861px) and (max-height: 600px) { .lk-divide { --d-star: 30px; --d-head-gap: 10px; --d-h1: 28px; --d-sub: 13px; --d-btn-fs: 13px; --d-btn-px: 22px; --d-btn-py: 9px; --d-foot-gap: 16px; --d-pad-b: 14px; --d-ring: 226px; } } /* Stacked and short — a phone on its side. */ @media (max-width: 860px) and (max-height: 620px) { .lk-divide { --d-star: 30px; --d-head-gap: 10px; --d-h1: 24px; --d-sub: 13px; --d-btn-fs: 13px; --d-btn-py: 10px; --d-foot-gap: 14px; --d-pad-b: 16px; --d-gap-a: 18px; --d-gap-b: 18px; --d-ring: 206px; } } @media (prefers-reduced-motion: reduce) { html.lk-js [data-rise] { opacity: 1; } }