/** * Raven — long-form article layout (case studies, insights). * Linked from: case-studies/*.html (and future insights/*.html). * Load after: assets/css/colors_and_type.css, assets/css/theme-monochrome.css. * * Reuses the design tokens declared in colors_and_type.css and the global * primitives (.btn, .nav, footer) from page-monochromatic.css. This file * adds only the article-specific composition: hero header, prose, figures, * timeline, and the related-cases footer. */ /* ── Accent model ───────────────────────────────────────────────────────── */ /* Mirrors the Raven app: the surface stays neutral and color appears only at glyph scale. theme-monochrome.css collapses every hue in the palette to a single blue, which is right for the landing page but turns links, rails, numbers, and chips blue everywhere else. This file loads last on the long-form pages, so the accents are re-sorted here. The rule is that color marks status or identity, never structure. What it marks depends on the page, and the two cases never appear together: capability page which capability --cap-accent (product palette) editorial page which item leads --brand-accent (Raven blue) Links, rails, section numbers, quote bars, and active chips are structure, so they stay white no matter what page they are on. --cap-accent is set by a data-capability attribute, so it can scope to a whole page (on ) or to a single card in a grid of capabilities. */ :root{ --cap-accent:rgba(255,255,255,0.92); --cap-accent-wash:rgba(255,255,255,0.12); --cap-accent-line:rgba(255,255,255,0.38); --brand-accent:rgb(24, 81, 255); --brand-accent-wash:rgba(24, 81, 255, 0.16); --brand-accent-line:rgba(24, 81, 255, 0.5); } /* Hues below are the app's own per-mode iconColor values, taken from the SearchModeSelector mode table so a capability reads the same colour here as it does in the product. Find Property has no marketing page yet. */ [data-capability="find-region"]{ --cap-accent:rgb(52, 168, 83); --cap-accent-wash:rgba(52, 168, 83, 0.14); --cap-accent-line:rgba(52, 168, 83, 0.45); } [data-capability="find-street"]{ --cap-accent:rgb(124, 110, 240); --cap-accent-wash:rgba(124, 110, 240, 0.16); --cap-accent-line:rgba(124, 110, 240, 0.5); } [data-capability="find-property"]{ --cap-accent:rgb(13, 148, 136); --cap-accent-wash:rgba(13, 148, 136, 0.16); --cap-accent-line:rgba(13, 148, 136, 0.5); } [data-capability="identify-car"]{ --cap-accent:rgb(224, 112, 48); --cap-accent-wash:rgba(224, 112, 48, 0.16); --cap-accent-line:rgba(224, 112, 48, 0.5); } [data-capability="verify-image"]{ --cap-accent:rgb(91, 141, 239); --cap-accent-wash:rgba(91, 141, 239, 0.18); --cap-accent-line:rgba(91, 141, 239, 0.55); } /* Capability identity. One hue, one element per page: the tile on a detail page, the dot on a card in a list. Everything else stays neutral, which is what keeps four accents from reading as four brands. */ .cap-glyph{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px; margin-bottom:20px; border-radius:9px; border:1px solid var(--cap-accent-line); background:var(--cap-accent-wash); color:var(--cap-accent); } /* Lucide ships at 24x24 with a 2px stroke, which is heavy next to the hairline rules and thin type here. Normalizing in CSS rather than editing the markup means an icon can be pasted straight from the pack. */ .cap-glyph svg{display:block;width:20px;height:20px;stroke-width:1.5} .cap-dot{ display:inline-block;vertical-align:middle; width:6px;height:6px;border-radius:50%; background:var(--cap-accent); margin-right:9px;position:relative;top:-1px; } /* Primitives shared with the landing page carry its blue in through page-monochromatic.css. The landing page keeps it; these pages don't. */ .footer-parent-link:hover{border-color:rgba(255,255,255,0.7)} .section-eyebrow{color:rgba(255,255,255,0.78)} .er-eyebrow-tick, .platform-tag-dot{background:rgba(255,255,255,0.9);box-shadow:none} .case-foot .time{color:rgba(255,255,255,0.85)} .case-status.closed{background:rgba(255,255,255,0.14);color:#fff;border:1px solid rgba(255,255,255,0.4)} .case-status.located{background:rgba(255,255,255,0.14);color:#fff;border:1px solid rgba(255,255,255,0.4)} .cases-more-link:hover{color:#fff;border-color:rgba(255,255,255,0.7)} /* ── Article shell ──────────────────────────────────────────────────────── */ .article{ position:relative; padding:140px 44px 120px; max-width:1280px; margin:0 auto; } @media (max-width:780px){ .article{padding:96px 22px 72px} } /* Backlink to listing */ .article-back{ display:inline-flex;align-items:center;gap:8px; font:500 11px/1 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:28px; transition:color 160ms ease; } .article-back:hover{color:#fff} .article-back .arr{ width:18px;height:1px;background:currentColor;display:inline-block;position:relative; } .article-back .arr::before{ content:"";position:absolute;left:0;top:-3px;width:6px;height:6px; border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg); } /* ── Hero header ────────────────────────────────────────────────────────── */ .article-hero{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:64px; align-items:end; } @media (max-width:980px){ .article-hero{grid-template-columns:1fr;gap:36px} } /* Neutral per the monochromatic rule in page-monochromatic.css: blue is reserved for live/active status, not decorative labels. */ .article-eyebrow{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; font:500 11px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.78); margin-bottom:22px; } .article-eyebrow .sym{color:rgba(255,255,255,0.55);font-weight:400} .article-eyebrow .num{color:rgba(255,255,255,0.95);margin-right:4px;font-weight:500} .article-eyebrow .slash{color:rgba(255,255,255,0.45);font-weight:400} .article-status{ display:inline-flex;align-items:center;gap:8px; padding:6px 10px;border-radius:4px; font:500 10px/1 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; } .article-status::before{ content:"";width:6px;height:6px;border-radius:50%;background:currentColor; } .article-status.closed{background:rgba(255,255,255,0.10);color:#fff;border:1px solid rgba(255,255,255,0.4)} .article-status.located{background:rgba(255,255,255,0.10);color:#fff;border:1px solid rgba(255,255,255,0.4)} .article-status.recovered{background:rgba(255,255,255,0.10);color:var(--gs-amber);border:1px solid rgba(255,255,255,0.4)} .article-h1{ font:300 clamp(38px, 5vw, 68px)/1.02 var(--font-sans); letter-spacing:-0.04em;color:#fff; text-wrap:balance;max-width:22ch; } .article-lede{ margin-top:24px;max-width:54ch; font:300 20px/1.42 var(--font-serif); color:rgba(255,255,255,0.78); text-wrap:pretty; } /* Right column: case dossier card */ .article-meta{ background:var(--gs-chrome); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:24px 26px; display:flex;flex-direction:column;gap:18px; } .article-meta-row{ display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:start; padding-bottom:14px;border-bottom:1px dashed rgba(255,255,255,0.08); } .article-meta-row:last-child{border-bottom:none;padding-bottom:0} .article-meta-k{ font:500 10px/1.4 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.42); } .article-meta-v{ font:500 13px/1.45 var(--font-sans);color:#fff;letter-spacing:-0.005em; } .article-meta-v .meta-sub{ display:block;margin-top:2px; font:400 12px/1.4 var(--font-mono);color:rgba(255,255,255,0.52);letter-spacing:0.04em; } /* ── KPI strip (under hero) ─────────────────────────────────────────────── */ .article-kpis{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:80px; } @media (max-width:780px){ .article-kpis{grid-template-columns:repeat(2,1fr)} } .article-kpi{ padding:28px 24px; border-right:1px solid rgba(255,255,255,0.08); display:flex;flex-direction:column;gap:8px; } .article-kpi:last-child{border-right:none} @media (max-width:780px){ .article-kpi:nth-child(2){border-right:none} .article-kpi:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,0.08)} } .article-kpi-k{ font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.42); } .article-kpi-v{ font:500 30px/1 var(--font-sans);color:#fff;letter-spacing:-0.02em; } .article-kpi-v .u{font:500 13px/1 var(--font-mono);color:rgba(255,255,255,0.55);margin-left:6px;letter-spacing:0.04em;text-transform:uppercase} .article-kpi-cap{ font:400 13px/1.4 var(--font-sans);color:rgba(255,255,255,0.55); } .article-kpi-v.is-jade{color:#fff} /* ── Capabilities overview ────────────────────────────────────────────────── Everything from here to the .sr-only rule belongs to capabilities/index.html alone. The page is built as one product experience: the hero opens a window onto the app's mode selector, and the section below reuses that selector as the navigation for the capability content, so a visitor meets the same five modes twice rather than a list and then an unrelated card grid. Names are the app's public ones — Find Region, Find Street, Find Property, Identify Car, Verify Image. The model names beside them (Worldwide, Superbolt, Interior, CarID, Deepfake) are secondary labels and never titles, so a reader always knows which mode they are looking at. Badges keep the app's wording but not its amber, because status colour next to five capability hues is one accent too many. Only the capability icons carry colour, which is the rule set at the top of this file. Four sizes below the headings, and no others: 10px mono for labels and badges, 12px for secondary lines, 13.5px for anything meant to be read, and 15px for a selector row's name. Sizes between those read as noise rather than hierarchy. The hero's jump link is the one exception, at the 11px the shared .article-eyebrow above it already uses. */ .sec-eyebrow{ font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.42); margin-bottom:16px; } .cap-badge{ padding:3px 6px; border:1px solid rgba(255,255,255,0.18); border-radius:3px; background:rgba(255,255,255,0.06); font:500 10px/1 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase; color:rgba(255,255,255,0.62); white-space:nowrap; } /* ── Hero ─────────────────────────────────────────────────────────────────── Two columns so the product window lands inside the first viewport on a laptop. The old single-column hero pushed everything below the fold. */ .cap-hero{ max-width:1280px;margin:0 auto; padding:112px 44px 64px; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,528px); gap:56px;align-items:center; } .cap-hero .article-eyebrow{margin-bottom:20px} .cap-hero-h{ margin:0; font:300 clamp(38px,4.4vw,58px)/1.02 var(--font-sans); letter-spacing:-0.04em;color:#fff;text-wrap:balance;max-width:13ch; } .cap-hero-p{ margin-top:20px;max-width:48ch; font:300 18px/1.45 var(--font-serif); color:rgba(255,255,255,0.74);text-wrap:pretty; } .cap-hero-ctas{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px} .cap-hero-jump{ display:inline-flex;align-items:center;gap:8px; font:500 11px/1 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.55); transition:color 160ms ease; } .cap-hero-jump:hover{color:#fff} .cap-hero-jump .jump-chev{ width:14px;height:14px; transition:transform 160ms ease; } .cap-hero-jump:hover .jump-chev{transform:translateY(2px)} /* minmax(0,1fr) rather than 1fr throughout: a bare 1fr takes its minimum from the content, and a 1024px-wide screenshot then pushes the page wider than the viewport. */ @media (max-width:1080px){ .cap-hero{grid-template-columns:minmax(0,1fr);gap:40px;padding:104px 44px 48px} .cap-hero-h{max-width:20ch} } @media (max-width:780px){ .cap-hero{padding:92px 22px 40px;gap:32px} } /* ── Product window ───────────────────────────────────────────────────────── A working replica of the app's mode selector: real icons, names, badges and model names, and the same two states the product has — list open, or a mode chosen with Change to go back. Nothing here uploads or searches; picking a mode is the whole interaction. */ .appwin-frame{ border:1px solid rgba(255,255,255,0.1); border-radius:14px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015)); box-shadow:0 40px 90px rgba(0,0,0,0.6); } .appwin-chrome{ display:flex;align-items:center;gap:9px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.07); font:500 10px/1 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.38); } .appwin-chrome .dot{ width:6px;height:6px;border-radius:50%; background:rgba(255,255,255,0.22); } /* The frame is height-locked to its open state in script, so the chosen state centres itself in what is left rather than leaving the box half empty. */ .appwin-frame{display:flex;flex-direction:column;transition:min-height 0.2s ease} .appwin-inner{flex:1;display:flex;flex-direction:column;padding:14px;background:var(--gs-ink)} .appmode-bar{ display:flex;align-items:center;gap:12px;width:100%; padding:12px 14px; border:1px solid rgba(255,255,255,0.09); border-radius:12px 12px 0 0; background:rgba(255,255,255,0.05); font-family:inherit;text-align:left;color:inherit; cursor:pointer; transition:background 0.15s ease; } .appmode-bar:hover{background:rgba(255,255,255,0.075)} .appmode-bar:focus-visible{outline:2px solid rgba(255,255,255,0.6);outline-offset:-2px} /* Collapsed: the dashed placeholder becomes the chosen capability's icon. */ .appmode-bar[aria-expanded="false"]{border-radius:12px} .appmode-bar.is-picked .appmode-wand{ border:1px solid var(--cap-accent-line); background:var(--cap-accent-wash); color:var(--cap-accent); } /* The bar and the chosen panel both swap parts in and out. */ .appwin [hidden]{display:none} .appmode-change{ margin-left:auto;flex-shrink:0; font:400 12px/1 var(--font-sans);color:rgba(255,255,255,0.55); } .appmode-wand{ width:38px;height:38px;flex-shrink:0;border-radius:8px; display:inline-flex;align-items:center;justify-content:center; border:1.5px dashed rgba(255,255,255,0.26); color:rgba(255,255,255,0.5); } .appmode-wand svg{display:block;width:20px;height:20px} .appmode-bar-t{display:flex;flex-direction:column;gap:2px;min-width:0} .appmode-bar-t b{ display:flex;align-items:center;gap:8px; font:500 15px/1.25 var(--font-sans);color:#fff; } .appmode-bar-t i{font:400 12px/1.3 var(--font-sans);font-style:normal;color:rgba(255,255,255,0.45)} /* The app tints this chip iris; theme-monochrome maps iris to Raven blue, which is the one non-capability accent this page allows. */ .appmode-req{ margin-left:auto;flex-shrink:0; padding:3px 7px;border-radius:3px; background:var(--gs-iris-bg);color:var(--gs-iris-fg); font:500 10px/1 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase; } .appmode-chev{width:15px;height:15px;flex-shrink:0;color:rgba(255,255,255,0.35)} .appmode-list{ padding:4px; border:1px solid rgba(255,255,255,0.09);border-top:none; border-radius:0 0 12px 12px; background:var(--gs-black); } .appmode-row{ display:grid;grid-template-columns:32px minmax(0,1fr) auto; align-items:center;gap:10px;width:100%; padding:9px 10px;border-radius:6px; border:none;background:none;font-family:inherit;text-align:left; color:inherit;text-decoration:none;cursor:pointer; transition:background 0.15s ease; } .appmode-row:hover{background:rgba(255,255,255,0.05)} .appmode-row.is-picked{background:rgba(255,255,255,0.07)} .appmode-row:focus-visible{outline:2px solid rgba(255,255,255,0.6);outline-offset:-2px} .appmode-ico{ width:32px;height:32px;border-radius:6px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--cap-accent-line); background:var(--cap-accent-wash); color:var(--cap-accent); } .appmode-ico svg{display:block;width:17px;height:17px;stroke-width:1.6} .appmode-t{min-width:0} .appmode-t b{display:flex;align-items:center;gap:7px;font:500 13.5px/1.3 var(--font-sans);color:#fff} .appmode-t i{ display:block;margin-top:2px; font:400 12px/1.35 var(--font-sans);font-style:normal;color:rgba(255,255,255,0.44); } .appmode-model{ font:500 10px/1 var(--font-mono);letter-spacing:0.06em; color:rgba(255,255,255,0.34);white-space:nowrap; } .appmode-sep{height:1px;background:rgba(255,255,255,0.07);margin:5px 10px} /* The chosen state. What the app would show here is the upload area, which is the one thing this replica will not fake, so it answers the question the mode exists to answer and offers the way down to the full capability. */ .appmode-picked{ flex:1;display:flex;flex-direction:column;justify-content:center; padding:20px 2px; } .appmode-q{ margin:0;display:flex;flex-direction:column;gap:7px; } .appmode-q span{ font:500 10px/1 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.38); } .appmode-q b{ font:300 22px/1.25 var(--font-serif);font-weight:400; color:#fff;letter-spacing:-0.01em; } .appmode-sub{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:16px;padding:9px 11px; border:1px solid rgba(255,255,255,0.07);border-radius:9px; font:400 11.5px/1 var(--font-sans);color:rgba(255,255,255,0.3); } .appmode-sub i{font-style:normal} .appmode-sub b{font-weight:400;margin-left:8px;color:rgba(255,255,255,0.42)} .appmode-open{ align-self:flex-start; display:inline-flex;align-items:center;gap:8px;margin-top:18px; font:500 13px/1 var(--font-sans);color:#fff; border-bottom:1px solid rgba(255,255,255,0.25);padding-bottom:5px; transition:border-color 0.15s ease; } .appmode-open:hover{border-color:#fff} .appmode-open .chev{width:14px;height:14px;color:rgba(255,255,255,0.65)} .appmode-open:hover .chev{color:#fff;transform:translateX(3px)} @media (max-width:560px){ .appwin-inner{padding:10px} .appmode-t i{display:none} .appmode-model{display:none} } /* ── Explore: sticky selector, stacked sections ───────────────────────────── The rail on the left is navigation over the sections on the right: clicking a row scrolls to its capability, and scrolling the sections moves the rail. Nothing here is hover-driven — hover only acknowledges the target. The two groups say how the modes relate: LOCATE runs widest to narrowest with a caret between each step, ANALYZE is two independent reads of one frame. */ .explore{ max-width:1280px;margin:0 auto; padding:0 44px 96px; } .explore-head{ border-top:1px solid rgba(255,255,255,0.08); padding-top:30px;margin-bottom:34px; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:56px;align-items:end; } .explore-h{ margin:0; font:300 clamp(28px,3vw,40px)/1.06 var(--font-sans); letter-spacing:-0.03em;color:#fff;text-wrap:balance;max-width:18ch; } .explore-sub{ margin:0; font:300 17px/1.5 var(--font-serif);color:rgba(255,255,255,0.68);text-wrap:pretty; } .explore-body{ display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:32px;align-items:start; } .explore-rail{ position:sticky;top:100px; display:flex;flex-direction:column;gap:26px; } .rail-title{ font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.42); padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:-6px; } .rail-k{ display:flex;align-items:baseline;gap:10px; font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.55); } .rail-k .rail-count{color:rgba(255,255,255,0.3);letter-spacing:0.1em} .rail-note{ margin:9px 0 14px; font:400 12px/1.45 var(--font-sans);color:rgba(255,255,255,0.45); } .rail-rows{position:relative} /* A caret in each gap of the location workflow: region, then street, then property. Nothing between the ANALYZE rows — they do not run in sequence. */ .rail-group[data-flow="linear"] .rail-row + .rail-row::before{ content:"";position:absolute;left:26px;top:-9px; width:5px;height:5px; border-right:1px solid rgba(255,255,255,0.5); border-bottom:1px solid rgba(255,255,255,0.5); transform:rotate(45deg); } /* Every row is a link, and reads like one at rest: its own border and fill, a pointer, and a chevron parked at the same right edge all the way down. */ .rail-row{ position:relative; display:grid;grid-template-columns:32px minmax(0,1fr) 16px; align-items:center;gap:12px; width:100%;padding:11px 14px; border:1px solid rgba(255,255,255,0.09);border-radius:10px; background:rgba(255,255,255,0.022); color:inherit;text-decoration:none;text-align:left; cursor:pointer; transition:background 0.15s ease, border-color 0.15s ease; } .rail-row + .rail-row{margin-top:10px} .rail-row:hover{background:rgba(255,255,255,0.055);border-color:rgba(255,255,255,0.18)} .rail-row.is-active{ background:var(--cap-accent-wash); border-color:var(--cap-accent-line); } .rail-row:focus-visible{outline:2px solid rgba(255,255,255,0.6);outline-offset:2px} /* Colour is the selection signal, so it has to be spent on one row at a time. Every tile carries its capability's hue, but only the active one is allowed to show it — the rest sit desaturated. That is why there is no marker bar on the leading edge: a row that lights up in its own colour does not need one, and adding one back means the colour has stopped doing its job. */ .rail-ico{ width:32px;height:32px;border-radius:8px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--cap-accent-line); background:var(--cap-accent-wash); color:var(--cap-accent); filter:grayscale(1); opacity:0.55; transition:opacity 0.18s ease, filter 0.18s ease; } .rail-row:hover .rail-ico{opacity:0.8;filter:grayscale(0.6)} .rail-row.is-active .rail-ico{ opacity:1;filter:none; border-color:var(--cap-accent); } .rail-ico svg{display:block;width:17px;height:17px;stroke-width:1.6} .rail-text{min-width:0} .rail-name{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; font:400 15px/1.3 var(--font-sans);color:rgba(255,255,255,0.82); transition:color 0.15s ease; } .rail-row:hover .rail-name, .rail-row.is-active .rail-name{color:#fff} .rail-desc{ display:block;margin-top:2px; font:400 12px/1.4 var(--font-sans);color:rgba(255,255,255,0.5); } /* One chevron everywhere on this page: rail rows and panel links alike. */ .chev{ width:16px;height:16px;flex-shrink:0; transition:color 0.15s ease, transform 0.15s ease; } .rail-row .chev{color:rgba(255,255,255,0.34)} .rail-row:hover .chev{color:rgba(255,255,255,0.72);transform:translateX(3px)} .rail-row.is-active .chev{color:#fff} /* Stage. The sections are what the rail navigates, so they all stand in the page and scroll past; the scroll offset clears the fixed site header. */ .explore-stage{display:flex;flex-direction:column;gap:34px} .exp-item{min-width:0;scroll-margin-top:112px} .exp-panel{ position:relative;overflow:hidden; border:1px solid rgba(255,255,255,0.1); border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012)); } .exp-shot{ position:relative;overflow:hidden;margin:0; aspect-ratio:16/9; background:var(--gs-black); border-bottom:1px solid rgba(255,255,255,0.08); } .exp-shot img{ display:block;width:100%;height:100%; object-fit:cover;object-position:var(--shot-pos,50% 50%); transform:scale(var(--shot-zoom,1)); transform-origin:var(--shot-origin,50% 50%); /* The raw captures are dark enough that a large panel reads as a black rectangle; a light lift keeps the result text legible. */ filter:brightness(1.07) contrast(1.03); } /* Crops, per capture. The workspace shots are zoomed off their left edge to drop the app's icon rail and hold the map and the results list; the two photographs are only nudged onto their subject. */ .exp-item[data-capability="find-region"] .exp-shot img{--shot-zoom:1.14;--shot-origin:100% 10%} .exp-item[data-capability="find-street"] .exp-shot img{--shot-zoom:1.14;--shot-origin:100% 6%} .exp-item[data-capability="find-property"] .exp-shot img{--shot-zoom:1.11;--shot-origin:100% 44%} .exp-item[data-capability="identify-car"] .exp-shot img{--shot-zoom:1.05;--shot-origin:100% 18%} /* Portrait frame in a landscape panel: hold the band with the subject in it. */ .exp-item[data-capability="verify-image"] .exp-shot img{--shot-pos:50% 58%} /* The one small line worth keeping: it says what the screenshot proves. */ .exp-shot figcaption{ position:absolute;left:0;right:0;bottom:0; padding:38px 20px 15px; background:linear-gradient(180deg,transparent,rgba(0,0,0,0.9)); font:400 13.5px/1.45 var(--font-sans);color:rgba(255,255,255,0.76); } .exp-shot figcaption b{color:#fff;font-weight:500} .exp-body{padding:24px 26px 26px} .exp-title{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; font:400 24px/1.2 var(--font-sans);letter-spacing:-0.02em;color:#fff; margin:0; } .exp-model{ font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.42); } .exp-outcome{ margin:14px 0 0;max-width:60ch; font:300 18px/1.45 var(--font-serif);color:rgba(255,255,255,0.8);text-wrap:pretty; } .exp-facts{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;margin-top:24px; border-top:1px solid rgba(255,255,255,0.08); } /* One line per column. The second line these used to carry — the coordinate and score breakdowns — is what the capability pages are for. */ .exp-fact{ padding:15px 20px 0 0; border-right:1px solid rgba(255,255,255,0.08); } .exp-fact:last-child{border-right:none} .exp-fact + .exp-fact{padding-left:20px} .exp-k{ font:500 10px/1 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.42); } .exp-v{ margin-top:7px; font:400 13.5px/1.45 var(--font-sans);color:#fff; } .exp-link{ display:inline-flex;align-items:center;gap:9px;margin-top:22px; font:500 13.5px/1 var(--font-sans);color:#fff; border-bottom:1px solid rgba(255,255,255,0.25);padding-bottom:5px; transition:border-color 0.15s ease; } .exp-link:hover{border-color:#fff} .exp-link .chev{width:14px;height:14px;color:rgba(255,255,255,0.65)} .exp-link:hover .chev{color:#fff;transform:translateX(3px)} @media (max-width:1080px){ .explore-head{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start} .explore-body{grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:24px} .exp-outcome{font-size:17px} } /* Below the rail's working width it stops being sticky and sits at the top of the section as an index: same rows, same click, same scroll-spy. */ @media (max-width:900px){ .explore{padding:0 22px 72px} .explore-body{grid-template-columns:minmax(0,1fr);gap:32px} .explore-rail{position:static;gap:22px} .explore-stage{gap:26px} .exp-item{border-top:1px solid rgba(255,255,255,0.08);padding-top:26px} .exp-item:first-child{border-top:none;padding-top:0} .exp-panel{ border:none;border-radius:0;background:none; } .exp-panel::before,.exp-panel::after{display:none} .exp-shot{border:1px solid rgba(255,255,255,0.1);border-radius:12px} .exp-body{padding:20px 0 0} .exp-title{font-size:20px} .exp-facts{grid-template-columns:minmax(0,1fr);margin-top:18px} .exp-fact{border-right:none;padding:14px 0 0} .exp-fact + .exp-fact{padding-left:0;border-top:1px solid rgba(255,255,255,0.08)} } @media (prefers-reduced-motion:reduce){ .rail-row,.rail-ico,.rail-name,.chev,.exp-link,.appmode-row,.appmode-bar, .appwin-frame,.appmode-open,.cap-hero-jump .jump-chev{transition:none} } .sr-only{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ══ Score ring ═════════════════════════════════════════════════════════════ A ring beside a score, matching the rings the product draws beside its own similarity values. It is a ranking device and nothing more. It had tier colours once — jade above 75, amber above 50, red below — which silently claimed the score was a calibrated confidence with meaningful thresholds. It is not, so the ring now takes the capability accent at every value. Do not reintroduce tiers without a product owner confirming what the thresholds mean, and never put a ring next to a number where lower is the better answer: Verify Image's face-manipulation reading is one of those, and a tiered ring there would paint good news red. */ .conf-donut{display:inline-flex;flex-shrink:0;vertical-align:middle} /* One geometry at every size: the viewBox is fixed and only the rendered box changes, so a single circumference constant (2πr, r=6) drives the maths. */ .conf-donut svg{ display:block; width:var(--size,14px);height:var(--size,14px); transform:rotate(-90deg); } .conf-donut .track{stroke:rgba(255,255,255,0.12)} .conf-donut .arc{ stroke:var(--conf,var(--cap-accent)); stroke-dasharray:37.699; stroke-dashoffset:calc(37.699px * (1 - var(--pct) / 100)); animation:conf-fill 0.5s ease both; } @keyframes conf-fill{ from{stroke-dashoffset:37.699px} to{stroke-dashoffset:calc(37.699px * (1 - var(--pct) / 100))} } @media (prefers-reduced-motion:reduce){ .conf-donut .arc{animation:none} } /* Beside a 30px KPI figure the ring needs to sit on the number's optical centre, not its baseline. */ .article-kpi-v .conf-donut{--size:18px;margin-left:11px;position:relative;top:-2px} /* ── Ranked candidate list ────────────────────────────────────────────────── The product's result rail in this page's register: hairlines instead of a filled card, no radius, no shadow, and the site's own Diatype and DM Mono rather than the app's Geist. The contents are read off the verified result screenshot on this page and must keep matching it — a candidate that is not in that screenshot does not belong in this list. Rows carry only what the screenshot shows, which is why one row has coordinates, three carry the street-precision tag, and the last has no score at all. */ .capres{ margin:28px 0 0; border-top:1px solid rgba(255,255,255,0.08); } .capres-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:20px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.08); } .capres-rank{ font:500 10px/1.7 var(--font-mono); letter-spacing:0.22em; color:rgba(255,255,255,0.42); font-variant-numeric:tabular-nums; } .capres-place{font:400 16px/1.3 var(--font-sans);color:#fff} .capres-where{font:400 13px/1.4 var(--font-sans);color:rgba(255,255,255,0.55)} .capres-coords{ margin-top:6px; font:400 11px/1 var(--font-mono); letter-spacing:0.04em; color:rgba(255,255,255,0.34); font-variant-numeric:tabular-nums; transition:color 0.15s ease; } .capres-tag{ margin-top:7px; font:500 9px/1 var(--font-mono);letter-spacing:0.14em;text-transform:uppercase; color:var(--cap-accent);opacity:0.85; } .capres-na{color:rgba(255,255,255,0.3)} .capres-score{ display:flex; align-items:center; gap:8px; padding-top:2px; font:500 12px/1 var(--font-mono); letter-spacing:0.04em; color:rgba(255,255,255,0.72); font-variant-numeric:tabular-nums; white-space:nowrap; } .capres-row:hover .capres-coords{color:rgba(255,255,255,0.6)} @media (prefers-reduced-motion:reduce){ .capres-coords{transition:none} } @media (max-width:560px){ .capres-row{grid-template-columns:auto minmax(0,1fr);gap:14px} .capres-tag{ margin-top:7px; font:500 9px/1 var(--font-mono);letter-spacing:0.14em;text-transform:uppercase; color:var(--cap-accent);opacity:0.85; } .capres-na{color:rgba(255,255,255,0.3)} .capres-score{grid-column:2;padding-top:8px} } /* ── Body grid: prose + sidenote rail ───────────────────────────────────── */ .article-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,720px) minmax(0,1fr); column-gap:48px; row-gap:0; } @media (max-width:980px){ .article-body{grid-template-columns:1fr} } .article-body > *{grid-column:2} .article-body > .article-bleed{grid-column:1 / -1} /* A plain-text reading pointer at the end of a capability page, kept quieter than the related-cards rail so it does not read as a fifth section. */ .cap-further{ border-top:1px solid rgba(255,255,255,0.06); padding-top:32px;margin-top:8px; font:400 15px/1.6 var(--font-sans);color:rgba(255,255,255,0.6); } .cap-further a{ color:#fff;border-bottom:1px solid rgba(255,255,255,0.4); transition:border-color 160ms ease; } .cap-further a:hover{border-color:#fff} .cap-further a:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:3px;border-radius:2px} /* ── Section ───────────────────────────────────────────────────────────── */ .article-section{padding:0 0 56px} .article-section + .article-section{border-top:1px solid rgba(255,255,255,0.06);padding-top:56px} .article-section-eyebrow{ display:inline-flex;align-items:center;gap:10px; font:500 11px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.78); margin-bottom:18px; } .article-section-eyebrow .num{color:rgba(255,255,255,0.95);font-weight:500} .article-h2{ font:400 clamp(26px, 2.6vw, 36px)/1.12 var(--font-sans); letter-spacing:-0.02em;color:#fff; text-wrap:balance;max-width:24ch; margin-bottom:20px; } .article-h3{ font:500 16px/1.3 var(--font-sans);color:#fff;letter-spacing:-0.005em; margin:28px 0 8px; } /* ── Prose ─────────────────────────────────────────────────────────────── */ .article-prose{ font:400 17px/1.62 var(--font-sans);color:rgba(255,255,255,0.82); text-wrap:pretty; } .article-prose > * + *{margin-top:18px} .article-prose p{max-width:62ch} .article-prose strong{color:#fff;font-weight:500} .article-prose em{font-style:italic;color:rgba(255,255,255,0.92)} .article-prose a{ color:#fff; border-bottom:1px solid rgba(255,255,255,0.38); transition:border-color 160ms ease; } .article-prose a:hover{border-color:#fff} .article-prose ul, .article-prose ol{padding-left:1.4em;max-width:62ch} .article-prose li + li{margin-top:8px} .article-prose li::marker{color:rgba(255,255,255,0.4)} /* ── Figures ───────────────────────────────────────────────────────────── */ .article-figure{ margin:36px 0 8px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:var(--gs-chrome); overflow:hidden; } .article-figure img{width:100%;height:auto;display:block} .article-figure figcaption{ padding:14px 18px; border-top:1px solid rgba(255,255,255,0.08); font:400 12px/1.5 var(--font-mono);letter-spacing:0.04em; color:rgba(255,255,255,0.55); } .article-figure figcaption b{color:rgba(255,255,255,0.85);font-weight:500} /* ── Pipeline rail ────────────────────────────────────────────────────────── The five steps of a search, sized to sit inside the 720px prose column, so each step gets a title and nothing more — detail belongs in the figcaption rather than in five cramped paragraphs. Step 02 is deliberately the odd one out. Every other step has a line icon because every other step is a concrete thing an operator hands over or gets back; the analysis is a soft bloom because the page does not describe what happens there. If someone later swaps that bloom for a tidy diagram of boxes and arrows, the figure starts making architectural claims again. */ .flow{ margin:32px 0 8px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:var(--gs-chrome); overflow:hidden; } .flow-steps{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(5,1fr); } .flow-step{ padding:20px 16px 18px; border-right:1px solid rgba(255,255,255,0.08); } .flow-step:last-child{border-right:none} .flow-step.is-analysis{background:rgba(255,255,255,0.022)} .flow-mark{color:var(--cap-accent);margin-bottom:13px} .flow-mark svg{display:block;width:22px;height:22px;overflow:visible} .flow-n{ font:500 9px/1 var(--font-mono);letter-spacing:0.22em; color:rgba(255,255,255,0.34);margin-bottom:7px; } .flow-h{font:400 13px/1.35 var(--font-sans);color:#fff} .flow-tag{ display:inline-block;margin-top:9px;padding:3px 6px;border-radius:4px; border:1px solid rgba(255,255,255,0.14); font:500 8px/1 var(--font-mono);letter-spacing:0.14em;text-transform:uppercase; color:rgba(255,255,255,0.45); } .flow figcaption{ padding:14px 18px; border-top:1px solid rgba(255,255,255,0.08); font:400 12px/1.5 var(--font-mono);letter-spacing:0.04em; color:rgba(255,255,255,0.55); } .flow figcaption b{color:rgba(255,255,255,0.85);font-weight:500} @media (max-width:720px){ .flow-steps{grid-template-columns:1fr} .flow-step{border-right:none;border-bottom:1px solid rgba(255,255,255,0.08)} .flow-step:last-child{border-bottom:none} } /* ── Two-panel explanatory diagram ────────────────────────────────────────── Abstract, no product imagery: sets a classified grid against a continuous estimate. Panels share a hairline divider rather than sitting in cards, so it reads as part of the prose rather than a pasted illustration. */ .diptych{ margin:32px 0 8px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:var(--gs-chrome); overflow:hidden; } .diptych-panes{display:grid;grid-template-columns:1fr 1fr} .diptych-pane{padding:22px 22px 18px;border-right:1px solid rgba(255,255,255,0.08)} .diptych-pane:last-child{border-right:none} .diptych-k{ font:500 10px/1 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.42); margin-bottom:4px; } .diptych-h{font:400 15px/1.3 var(--font-sans);color:#fff;margin-bottom:16px} .diptych svg{display:block;width:100%;height:auto} /* Without this the two markers are just dots and the dashed line between them has no meaning. */ .diptych-legend{ display:flex;gap:16px;margin-top:14px; font:500 9px/1 var(--font-mono);letter-spacing:0.14em;text-transform:uppercase; color:rgba(255,255,255,0.45); } .diptych-legend span{display:inline-flex;align-items:center;gap:6px} .diptych-legend i{width:7px;height:7px;border-radius:50%;flex-shrink:0} .diptych-legend .solid{background:rgba(255,255,255,0.85)} .diptych-legend .ring{border:1.5px solid var(--cap-accent)} .diptych-note{ margin-top:12px; font:400 12px/1.5 var(--font-sans);color:rgba(255,255,255,0.55); } .diptych figcaption{ padding:14px 18px; border-top:1px solid rgba(255,255,255,0.08); font:400 12px/1.5 var(--font-mono);letter-spacing:0.04em; color:rgba(255,255,255,0.55); } .diptych figcaption b{color:rgba(255,255,255,0.85);font-weight:500} @media (max-width:640px){ .diptych-panes{grid-template-columns:1fr} .diptych-pane{border-right:none;border-bottom:1px solid rgba(255,255,255,0.08)} .diptych-pane:last-child{border-bottom:none} } /* Photograph panes for the diptych. The argument these make is carried by the difference between four discrete pins and one flat wash, so the wash must stay perfectly even — the moment it has hotspots it is claiming to show where the model looked, which is not something the product can tell you. */ .dip-frame{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#111} .dip-frame img{display:block;width:100%;height:100%;object-fit:cover} .dip-frame.whole{box-shadow:inset 0 0 0 1.5px var(--cap-accent)} .dip-wash{position:absolute;inset:0;background:var(--cap-accent);opacity:0.13} .dip-pin{ position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px; border-radius:50%; border:1.5px solid var(--cap-accent); background:rgba(0,0,0,0.42); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); display:grid;place-items:center; font:500 9px/1 var(--font-mono);color:#fff; } .dip-cues{ display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px; font:500 9px/1.4 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase; color:rgba(255,255,255,0.45); } .dip-cues span{display:inline-flex;gap:6px} .dip-cues b{color:var(--cap-accent);font-weight:500} .dip-cats span::before{ content:"";width:4px;height:4px;border-radius:50%;flex-shrink:0; background:var(--cap-accent);align-self:center; } /* ── Interior / exterior match composition ────────────────────────────────── Both tabs sit on one real search: an interior frame that resolved to an address, and that same confirmed property photographed from the street. The candidate strip restates what the app returned rather than screenshotting it, so the numbers stay legible at any width. Nothing in here is a mock-up, and nothing should be turned into one — the moment a pane shows an input that never produced the result beside it, the figure is a claim the product has not made. */ .match{ margin:32px 0 8px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:var(--gs-chrome); overflow:hidden; } .match-tabs{ display:flex;align-items:center;gap:8px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,0.08); } .match-tab{ appearance:none;-webkit-appearance:none;cursor:pointer; padding:8px 14px;border-radius:7px; border:1px solid rgba(255,255,255,0.12); background:transparent; font:500 10px/1 var(--font-mono);letter-spacing:0.16em;text-transform:uppercase; color:rgba(255,255,255,0.55); transition:color 160ms ease,border-color 160ms ease,background-color 160ms ease; } .match-tab:hover{color:rgba(255,255,255,0.88);border-color:rgba(255,255,255,0.26)} .match-tab[aria-selected="true"]{ color:#fff; border-color:var(--cap-accent-line); background:var(--cap-accent-wash); } .match-tab:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:2px} /* Says the panes are one real case, not an illustration of one. */ .match-live{ margin-left:auto;display:inline-flex;align-items:center;gap:7px; font:500 9px/1 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.45); } .match-live i{width:5px;height:5px;border-radius:50%;background:var(--cap-accent);flex-shrink:0} /* Both the panes and the cue row set a display value, which would otherwise win against the hidden attribute the tabs toggle. */ .match [hidden]{display:none} .match-panes{display:grid;grid-template-columns:1fr 1fr} .match-pane{ padding:18px 18px 20px;min-width:0; border-right:1px solid rgba(255,255,255,0.08); display:flex;flex-direction:column; } .match-pane:last-child{border-right:none} .match-k{ display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; font:500 10px/1.3 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.45);margin-bottom:12px; } .match-k em{font-style:normal;letter-spacing:0.04em;text-transform:none;color:rgba(255,255,255,0.34)} .match-frame{ position:relative;aspect-ratio:4/3;overflow:hidden; border-radius:8px;background:#111; } .match-frame img{display:block;width:100%;height:100%;object-fit:cover} /* The source pane is letterboxed rather than cropped, the way the app shows it: cropping an input frame in a figure about matching invites the question of what was cropped out. */ .match-frame.is-source img{object-fit:contain} .match-pin{ position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px; border-radius:50%; border:1.5px solid var(--cap-accent); background:rgba(0,0,0,0.46); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); display:grid;place-items:center; font:500 10px/1 var(--font-mono);color:#fff; } .match-p{ margin-top:12px; font:400 12.5px/1.5 var(--font-sans);color:rgba(255,255,255,0.55); } /* Sits on the floor of the pane so the two notes line up even when one pane holds a photograph and the other a list. */ .match-pane > .match-p:last-child{margin-top:auto;padding-top:12px} /* Unnumbered on purpose: the pins on the photograph beside it are numbered, and two numbering systems in one panel read as a cross-reference that isn't there. */ .match-list{list-style:none;margin:0;padding:0} .match-list li{ display:flex;gap:11px;align-items:baseline; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.06); font:400 13px/1.45 var(--font-sans);color:rgba(255,255,255,0.72); } .match-list li:last-child{border-bottom:none} .match-list li::before{ content:"";flex-shrink:0; width:4px;height:4px;border-radius:50%; background:var(--cap-accent); transform:translateY(-3px); } .match-cues{ display:flex;flex-wrap:wrap;gap:9px 20px; padding:14px 18px; border-top:1px solid rgba(255,255,255,0.08); font:500 9px/1.4 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase; color:rgba(255,255,255,0.5); } .match-cues span{display:inline-flex;align-items:center;gap:7px} .match-cues b{color:var(--cap-accent);font-weight:500} .match-cand{ display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px; padding:15px 18px; border-top:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.022); } .match-rank{ flex-shrink:0;padding:4px 7px;border-radius:4px; border:1px solid rgba(255,255,255,0.16); font:500 9px/1 var(--font-mono);letter-spacing:0.1em; color:rgba(255,255,255,0.75); } .match-addr{font:400 13.5px/1.35 var(--font-sans);color:#fff} .match-addr span{color:rgba(255,255,255,0.5)} /* Always its own row: the address line already fills the strip at the widths this figure is drawn at. */ .match-coord{ flex-basis:100%; font:400 11.5px/1 var(--font-mono);letter-spacing:0.03em; color:rgba(255,255,255,0.5);font-variant-numeric:tabular-nums; } .match-score{ margin-left:auto; font:500 10px/1 var(--font-mono);letter-spacing:0.14em;text-transform:uppercase; color:rgba(255,255,255,0.62); } .match-state{ display:inline-flex;align-items:center;gap:6px; padding:5px 9px;border-radius:5px; border:1px solid rgba(41,163,131,0.42); background:rgba(41,163,131,0.12); font:500 9px/1 var(--font-mono);letter-spacing:0.16em;text-transform:uppercase; color:#4cc9a6; } .match-state i{width:5px;height:5px;border-radius:50%;background:#29a383;flex-shrink:0} .match figcaption{ padding:14px 18px; border-top:1px solid rgba(255,255,255,0.08); font:400 12px/1.5 var(--font-mono);letter-spacing:0.04em; color:rgba(255,255,255,0.55); } .match figcaption b{color:rgba(255,255,255,0.85);font-weight:500} @media (max-width:640px){ .match-panes{grid-template-columns:1fr} .match-pane{border-right:none;border-bottom:1px solid rgba(255,255,255,0.08)} .match-pane:last-child{border-bottom:none} .match-score{margin-left:0} } /* ── Raw interface, folded away ───────────────────────────────────────────── The full workspace capture is evidence rather than explanation, so it opens on request instead of taking a screenful from the argument above it. */ .ui-reveal{ margin:26px 0 8px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:var(--gs-chrome); overflow:hidden; } .ui-reveal > summary{ list-style:none;cursor:pointer; display:flex;align-items:center;gap:10px; padding:15px 18px; font:500 11px/1 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.62); transition:color 160ms ease; } .ui-reveal > summary::-webkit-details-marker{display:none} .ui-reveal > summary:hover{color:#fff} .ui-reveal > summary:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:-3px} .ui-reveal[open] > summary{color:#fff;border-bottom:1px solid rgba(255,255,255,0.08)} .ui-reveal summary .chev{width:14px;height:14px;color:rgba(255,255,255,0.5)} .ui-reveal[open] summary .chev{transform:rotate(90deg);color:#fff} .ui-reveal img{display:block;width:100%;height:auto} .ui-reveal figcaption{ padding:13px 18px; border-top:1px solid rgba(255,255,255,0.08); font:400 12px/1.5 var(--font-mono);letter-spacing:0.04em; color:rgba(255,255,255,0.55); } .ui-reveal figcaption b{color:rgba(255,255,255,0.85);font-weight:500} /* ── Glass callout over figure media ──────────────────────────────────────── The one spot where translucency earns its keep: floating over map imagery, which gives the blur something worth seeing through. Borrows the product's floating-overlay treatment; the type, hairlines, and neutral ramp stay this page's. It restates the figcaption verbatim, so it is hidden from assistive tech rather than read out twice. */ .figure-media{position:relative} .figure-glass{ position:absolute;left:16px;bottom:16px; max-width:min(300px,calc(100% - 32px)); padding:13px 15px; border-radius:11px; border:1px solid rgba(255,255,255,0.16); background:rgba(8,8,8,0.52); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 10px 34px rgba(0,0,0,0.5); } /* Without backdrop-filter the panel would sit on raw map detail and the text would be unreadable, so it falls back to near-opaque. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .figure-glass{background:rgba(8,8,8,0.92)} } .figure-glass-k{ font:500 9px/1 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.55); } .figure-glass-v{margin-top:7px;font:400 16px/1.25 var(--font-sans);color:#fff} .figure-glass-c{ margin-top:5px; font:400 11px/1 var(--font-mono);letter-spacing:0.04em; color:rgba(255,255,255,0.5);font-variant-numeric:tabular-nums; } .figure-glass-f{ display:flex;align-items:center;gap:8px; margin-top:11px;padding-top:10px; border-top:1px solid rgba(255,255,255,0.12); font:500 10px/1 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase; color:rgba(255,255,255,0.72); } .figure-glass-f .dot{width:6px;height:6px;border-radius:50%;background:#29a383;flex-shrink:0} .figure-glass-f .rank{margin-left:auto;color:rgba(255,255,255,0.45);font-variant-numeric:tabular-nums} /* On a phone the card would cover most of the map, and restacking it above the figcaption just prints the same sentence twice. The caption already carries the text, so the decorative copy drops out. */ @media (max-width:560px){ .figure-glass{display:none} } .article-figure.is-bleed{ margin-left:0;margin-right:0; } /* Side-by-side comparison */ .article-compare{ display:grid;grid-template-columns:1fr 1fr;gap:14px; margin:36px 0 8px; } @media (max-width:780px){ .article-compare{grid-template-columns:1fr} } .article-compare figure{ margin:0;border:1px solid rgba(255,255,255,0.08);border-radius:14px; background:var(--gs-chrome);overflow:hidden; } .article-compare figure img{width:100%;height:auto;display:block} .article-compare figcaption{ padding:12px 16px;border-top:1px solid rgba(255,255,255,0.08); font:500 10px/1.4 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.6); } .article-compare figcaption .v{ display:block;margin-top:4px;font:400 13px/1.45 var(--font-sans);color:rgba(255,255,255,0.85); letter-spacing:0;text-transform:none; } /* ── Timeline ──────────────────────────────────────────────────────────── */ .article-timeline{ margin:24px 0 8px; display:flex;flex-direction:column;gap:0; border-left:1px dashed rgba(255,255,255,0.18); padding-left:28px; position:relative; } .article-timeline-step{ position:relative; padding:14px 0 22px; } .article-timeline-step::before{ content:"";position:absolute;left:-34px;top:18px; width:11px;height:11px;border-radius:50%; background:#0a0a0a;border:1px solid rgba(255,255,255,0.45); } .article-timeline-step.is-resolve::before{ background:#fff;border-color:#fff; box-shadow:0 0 10px rgba(255,255,255,0.35); } .article-timeline-t{ font:500 11px/1 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.95);margin-bottom:6px; } .article-timeline-h{ font:500 16px/1.3 var(--font-sans);color:#fff;letter-spacing:-0.005em;margin-bottom:6px; } .article-timeline-p{ font:400 14px/1.55 var(--font-sans);color:rgba(255,255,255,0.6);max-width:58ch; } /* ── Quote ─────────────────────────────────────────────────────────────── */ .article-quote{ margin:36px 0; border:1px solid rgba(255,255,255,0.08); border-left:3px solid rgba(255,255,255,0.32); background:var(--gs-chrome); padding:28px 32px; border-radius:0 14px 14px 0; } .article-quote-k{ font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.42);margin-bottom:14px; } .article-quote blockquote{ font:300 22px/1.38 var(--font-serif);color:#fff;letter-spacing:-0.005em; text-wrap:pretty;max-width:48ch; } .article-quote blockquote em{font-style:italic;color:#fff} .article-quote-attr{ margin-top:16px; font:400 12px/1.5 var(--font-mono);letter-spacing:0.04em;color:rgba(255,255,255,0.6); } .article-quote-attr b{color:rgba(255,255,255,0.92);font-weight:500} /* ── Disclosure box (MOU note) ─────────────────────────────────────────── */ .article-disclosure{ margin:32px 0 0; padding:16px 18px; border:1px dashed rgba(255,255,255,0.18); border-radius:10px; font:400 12px/1.55 var(--font-mono);letter-spacing:0.02em; color:rgba(255,255,255,0.55); max-width:62ch; } .article-disclosure b{color:rgba(255,255,255,0.85);font-weight:500} /* ── Related cases ─────────────────────────────────────────────────────── */ .article-related{ margin-top:96px; padding-top:56px; border-top:1px solid rgba(255,255,255,0.08); } .article-related .section-eyebrow, .article-related-eyebrow{ font:500 11px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.78);margin-bottom:14px; } .article-related-h{ font:300 clamp(28px, 3vw, 40px)/1.05 var(--font-sans); letter-spacing:-0.02em;color:#fff;margin-bottom:36px;text-wrap:balance;max-width:24ch; } /* ── CTA strip ─────────────────────────────────────────────────────────── */ .article-cta{ margin-top:96px; padding:44px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:var(--gs-chrome); display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center; } @media (max-width:780px){ .article-cta{grid-template-columns:1fr;padding:28px} } .article-cta-h{ font:300 clamp(22px, 2.4vw, 32px)/1.15 var(--font-sans); letter-spacing:-0.02em;color:#fff;text-wrap:balance;max-width:34ch; } .article-cta-p{ margin-top:8px; font:400 14px/1.5 var(--font-sans);color:rgba(255,255,255,0.6);max-width:48ch; } .article-cta-row{display:flex;gap:10px;flex-wrap:wrap} /* Inline link inside .section-sub copy, which carries no link styling of its own. */ .gs-inline-link{ color:#fff; border-bottom:1px solid rgba(255,255,255,0.38); transition:border-color 160ms ease; } .gs-inline-link:hover{border-color:#fff} /* ── FAQ accordion (native details/summary, keyboard accessible) ───────── */ .faq{ margin-top:36px;max-width:820px; border-top:1px solid rgba(255,255,255,0.08); } .faq-item{border-bottom:1px solid rgba(255,255,255,0.08)} .faq-q{ list-style:none;cursor:pointer; display:flex;align-items:flex-start;justify-content:space-between;gap:24px; padding:22px 0; } .faq-q::-webkit-details-marker{display:none} .faq-q:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:3px} .faq-q h3{ margin:0;text-wrap:pretty; font:500 17px/1.4 var(--font-sans);letter-spacing:-0.005em; color:rgba(255,255,255,0.86); transition:color 160ms ease; } .faq-q:hover h3, .faq-item[open] .faq-q h3{color:#fff} /* Plus that loses its vertical stroke when the panel opens. */ .faq-ico{ position:relative;flex-shrink:0;width:13px;height:13px;margin-top:5px; color:rgba(255,255,255,0.45);transition:color 160ms ease; } .faq-ico::before, .faq-ico::after{content:"";position:absolute;background:currentColor} .faq-ico::before{left:0;top:6px;width:13px;height:1px} .faq-ico::after{left:6px;top:0;width:1px;height:13px;transition:opacity 180ms ease} .faq-item[open] .faq-ico{color:#fff} .faq-item[open] .faq-ico::after{opacity:0} .faq-a{ padding:0 37px 24px 0;max-width:64ch;text-wrap:pretty; font:400 15px/1.6 var(--font-sans);color:rgba(255,255,255,0.62); } .faq-a a{color:#fff;border-bottom:1px solid rgba(255,255,255,0.38);transition:border-color 160ms ease} .faq-a a:hover{border-color:#fff} .faq-a > * + *{margin-top:12px} .faq-a strong{color:rgba(255,255,255,0.9);font-weight:500} .faq-a ul{padding-left:1.2em} .faq-a li + li{margin-top:6px} .faq-a li::marker{color:rgba(255,255,255,0.35)} /* ── Beta chip ─────────────────────────────────────────────────────────── */ .gs-beta{ display:inline-block;vertical-align:middle; padding:4px 8px;border-radius:3px; border:1px solid rgba(255,255,255,0.16); font:500 9px/1 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.7); } /* ── Capability 2×2 (four related cards, never an orphaned third column) ── */ .cap2{ display:grid;grid-template-columns:1fr 1fr;gap:16px; margin-top:48px; } @media (max-width:820px){ .cap2{grid-template-columns:1fr} } .cap2-item{ display:flex;flex-direction:column; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:var(--gs-chrome); overflow:hidden; transition:border-color 160ms ease; } a.cap2-item:hover{border-color:rgba(255,255,255,0.22)} a.cap2-item:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:3px} /* Fixed ratio well: the source frames are a mix of landscape and portrait, so the crop is what keeps the four cards on a shared baseline. */ .cap2-img{aspect-ratio:16/9;background:#0a0a0a;overflow:hidden} .cap2-img img{width:100%;height:100%;object-fit:cover;filter:saturate(0.85) brightness(0.75)} .cap2-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1} .cap2-k{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.38); } .cap2-k .num{color:var(--cap-accent)} .cap2-h{font:500 19px/1.25 var(--font-sans);color:#fff;letter-spacing:-0.01em;text-wrap:balance} .cap2-p{font:400 14px/1.55 var(--font-sans);color:rgba(255,255,255,0.58);text-wrap:pretty} .cap2-foot{ margin-top:auto;padding-top:16px; border-top:1px solid rgba(255,255,255,0.06); display:flex;align-items:center;justify-content:space-between;gap:12px; font:400 11px/1 var(--font-mono);letter-spacing:0.14em;text-transform:uppercase; color:rgba(255,255,255,0.5); } a.cap2-item:hover .cap2-foot{color:rgba(255,255,255,0.8)} /* ── FAQ page (faq.html) ───────────────────────────────────────────────── */ /* Anchor offset for the sticky nav bar declared in page-monochromatic.css. */ .faqp-cat, .faqp .faq-item{scroll-margin-top:112px} .faqp{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); column-gap:72px; max-width:1280px;margin:0 auto; padding:16px 44px 40px; } @media (max-width:980px){ .faqp{grid-template-columns:1fr;row-gap:36px;padding:8px 22px 32px} } /* Left rail: sticky index on desktop, chip row on small screens. */ .faqp-rail{position:sticky;top:112px;align-self:start} @media (max-width:980px){ .faqp-rail{ position:static;top:auto; padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,0.08); } } .faqp-rail-k{ font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.42); } .faqp-rail-list{ list-style:none;margin:16px 0 0;padding:0; display:flex;flex-direction:column; border-left:1px solid rgba(255,255,255,0.1); } .faqp-rail-list a{ display:block;padding:9px 0 9px 16px;margin-left:-1px; border-left:1px solid transparent; font:400 13px/1.35 var(--font-sans);color:rgba(255,255,255,0.55); transition:color 160ms ease, border-color 160ms ease; } .faqp-rail-list a:hover{color:#fff} .faqp-rail-list a.is-current{color:#fff;border-left-color:#fff} .faqp-rail-list a:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:2px} @media (max-width:980px){ .faqp-rail-list{ flex-direction:row;flex-wrap:wrap;gap:8px; border-left:none;margin-top:14px; } .faqp-rail-list a{ padding:8px 14px;margin-left:0;border-radius:999px; border:1px solid rgba(255,255,255,0.14); font:500 11px/1 var(--font-mono);letter-spacing:0.14em;text-transform:uppercase; } .faqp-rail-list a.is-current{border-color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.10)} } /* Category blocks. The accordion above already closes on a hairline, so the separation here is whitespace rather than a second rule. */ .faqp-cat + .faqp-cat{margin-top:96px} @media (max-width:780px){ .faqp-cat + .faqp-cat{margin-top:72px} } .faqp-cat-k{ display:flex;align-items:center;gap:10px; font:500 11px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.78);margin-bottom:16px; } .faqp-cat-k .num{color:rgba(255,255,255,0.95);font-weight:500} .faqp-cat-h{ font:400 clamp(25px, 2.6vw, 34px)/1.14 var(--font-sans); letter-spacing:-0.02em;color:#fff;text-wrap:balance;max-width:26ch; } .faqp-cat-sub{ margin-top:12px;max-width:60ch; font:400 15px/1.55 var(--font-sans);color:rgba(255,255,255,0.55);text-wrap:pretty; } .faqp-cat .faq{margin-top:20px;max-width:none} /* Inline CTA between categories — same shell as .article-cta, tighter margin. */ .article-cta.is-inline{margin-top:56px} /* ── Listing page (case-studies/index.html) ─────────────────────────────── */ .cases-page-hero{ padding:140px 44px 56px; max-width:1280px; margin:0 auto; } @media (max-width:780px){ .cases-page-hero{padding:96px 22px 32px} } .cases-page-hero .article-eyebrow{margin-bottom:24px} .cases-page-h{ font:300 clamp(40px, 5.4vw, 76px)/1.0 var(--font-sans); letter-spacing:-0.04em;color:#fff;text-wrap:balance;max-width:18ch; } .cases-page-sub{ margin-top:20px;max-width:62ch; font:300 20px/1.32 var(--font-serif);color:rgba(255,255,255,0.74);text-wrap:pretty; } .cases-page-filter{ display:flex;gap:8px;flex-wrap:wrap; margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.08); } .cases-page-chip{ display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border-radius:999px; border:1px solid rgba(255,255,255,0.14); background:transparent; color:rgba(255,255,255,0.7); font:500 11px/1 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; cursor:pointer; transition:border-color 160ms ease, color 160ms ease, background 160ms ease; } .cases-page-chip:hover{border-color:rgba(255,255,255,0.32);color:#fff} .cases-page-chip.is-active{ border-color:rgba(255,255,255,0.55);color:#fff;background:rgba(255,255,255,0.10); } .cases-page-chip .count{ color:rgba(255,255,255,0.42);font-weight:400; } .cases-page-chip.is-active .count{color:rgba(255,255,255,0.85)} .cases-page-grid{ padding:24px 44px 120px; max-width:1280px; margin:0 auto; } @media (max-width:780px){ .cases-page-grid{padding:16px 22px 80px} } .cases-page-grid .cases{margin-top:0} /* Echoes the model name shown against the same mode in the list above, so the two views of the same five capabilities visibly line up. It never wraps, so the descriptor on the left is what gives way when a card is narrow. */ .cases-page-grid .case-foot{gap:12px} .case-model{color:rgba(255,255,255,0.34);white-space:nowrap;flex-shrink:0} /* hide cards filtered out */ .cases-page-grid[data-filter="closed"] .case:not([data-status="closed"]), .cases-page-grid[data-filter="located"] .case:not([data-status="located"]), .cases-page-grid[data-filter="recovered"] .case:not([data-status="recovered"]){ display:none; } /* ══════════════════════════════════════════════════════════════════════════ ARTICLES · /articles and /articles/ Generated by scripts/build-articles.mjs. Everything below reuses the tokens and the eyebrow/hairline/panel language already established above; the only new idea is a reading measure narrow enough for long-form prose. ══════════════════════════════════════════════════════════════════════════ */ /* ── Article shell ──────────────────────────────────────────────────────── */ .art{ --art-rail:220px; /* table-of-contents gutter */ --art-gap:72px; --art-measure:720px; /* ~68 characters at the prose size below */ --art-indent:calc(var(--art-rail) + var(--art-gap)); max-width:1280px; margin:0 auto; padding:132px 44px 120px; } /* Everything hangs off the prose column so the h1, dek, and body share an edge. */ .art > *{max-width:var(--art-measure);margin-left:var(--art-indent)} /* The closing modules reclaim the gutter rather than leaving it empty. */ .art > .art-related, .art > .article-cta{ margin-left:0; max-width:calc(var(--art-indent) + var(--art-measure)); } @media (max-width:1180px){ .art{--art-rail:0px;--art-gap:0px} } @media (max-width:780px){ .art{padding:96px 22px 72px} } .art-crumb{margin-bottom:24px} .art-crumb .article-back{margin-bottom:0} .article-back:focus-visible, .is-articles .nav-links > a:focus-visible, .is-articles .nav-mobile-link:focus-visible, .is-articles .footer-legal a:focus-visible, .is-articles .btn:focus-visible{ outline:1px solid rgba(255,255,255,0.6);outline-offset:3px; } .is-articles .nav-links > a.is-current{color:#fff} /* ── Article header ─────────────────────────────────────────────────────── */ .art-head{padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.08)} /* Shared kicker: category, date, reading time. Also used on the index cards. */ .art-k{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; font:500 11px/1.4 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:22px; } .art-k-cat{color:#fff} .art-k-sep{color:rgba(255,255,255,0.28)} .art-h1{ font:300 clamp(34px, 4.4vw, 56px)/1.04 var(--font-sans); letter-spacing:-0.035em;color:#fff;text-wrap:balance; } .art-dek{ margin-top:22px; font:300 21px/1.42 var(--font-serif);color:rgba(255,255,255,0.76);text-wrap:pretty; } @media (max-width:780px){ .art-dek{font-size:19px} } .art-byline{ margin-top:28px; display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; } .art-byline-name{font:500 14px/1.4 var(--font-sans);color:#fff;letter-spacing:-0.005em} .art-byline-role{ font:400 11px/1.4 var(--font-mono);letter-spacing:0.14em;text-transform:uppercase; color:rgba(255,255,255,0.45); } .art-byline-role::before{content:"/ ";color:rgba(255,255,255,0.28)} /* ── Hero ───────────────────────────────────────────────────────────────── */ /* Optional. The layout is designed to read correctly with nothing here. */ .art-hero{ margin-top:44px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:var(--gs-chrome); overflow:hidden; } .art-hero > img{width:100%;height:auto;display:block} .art-hero figcaption{ padding:14px 18px;border-top:1px solid rgba(255,255,255,0.08); font:400 12px/1.5 var(--font-mono);letter-spacing:0.02em; color:rgba(255,255,255,0.5); } /* Text-led hero: the two approved wordmarks on the dossier grid, no stock art. */ .art-hero-lockup .art-lockup{ display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:28px; padding:52px 40px; background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 60%), repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 44px), #0a0a0a; } .art-lockup-col{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;width:100%} .art-lockup-label{ font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.38); } .art-lockup-past, .art-lockup-now{width:100%;max-width:200px;height:auto} .art-lockup-past{opacity:0.42} .art-lockup-arrow{ font:400 18px/1 var(--font-mono);color:rgba(255,255,255,0.35); padding-top:26px; } @media (max-width:600px){ .art-hero-lockup .art-lockup{ grid-template-columns:1fr; justify-items:center; padding:32px 20px;gap:10px; } .art-lockup-arrow{padding-top:0;transform:rotate(90deg)} } /* ── Body: sticky contents rail + prose ─────────────────────────────────── */ .art-body{ max-width:none;margin-left:0; margin-top:52px; display:grid; grid-template-columns:var(--art-rail) minmax(0,var(--art-measure)); column-gap:var(--art-gap); } .art-body:not(:has(.art-toc)){ margin-left:var(--art-indent); grid-template-columns:minmax(0,var(--art-measure)); } @media (max-width:1180px){ .art-body{grid-template-columns:minmax(0,var(--art-measure))} .art-body:not(:has(.art-toc)){margin-left:0} } .art-toc{position:sticky;top:112px;align-self:start} @media (max-width:1180px){ .art-toc{display:none} } .art-toc-k{ font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.42); } .art-toc-list{ list-style:none;margin:16px 0 0;padding:0; display:flex;flex-direction:column; border-left:1px solid rgba(255,255,255,0.1); counter-reset:art-toc; } .art-toc-list a{ display:block;padding:9px 0 9px 16px;margin-left:-1px; border-left:1px solid transparent; font:400 13px/1.35 var(--font-sans);color:rgba(255,255,255,0.5); text-wrap:pretty; transition:color 160ms ease, border-color 160ms ease; } .art-toc-list a:hover{color:#fff} .art-toc-list a:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:2px} /* ── Prose ──────────────────────────────────────────────────────────────── */ .art-prose{ font:400 18px/1.68 var(--font-sans); color:rgba(255,255,255,0.78); text-wrap:pretty; } @media (max-width:780px){ .art-prose{font-size:17px;line-height:1.62} } .art-prose > * + *{margin-top:22px} .art-prose strong{color:#fff;font-weight:500} .art-prose em{font-style:italic;color:rgba(255,255,255,0.92)} .art-prose a{ color:#fff; border-bottom:1px solid rgba(255,255,255,0.4); transition:border-color 160ms ease, color 160ms ease; } .art-prose a:hover{border-color:#fff} .art-prose a:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:3px;border-radius:2px} .art-prose .article-figure{margin:36px 0 8px} .art-prose .article-figure picture{display:block} /* Anchor offset for the sticky nav, so contents links do not land under it. */ .art-h2, .art-h3{scroll-margin-top:112px} .art-h2{ margin-top:56px; font:400 clamp(24px, 2.4vw, 30px)/1.18 var(--font-sans); letter-spacing:-0.022em;color:#fff;text-wrap:balance; } .art-prose > .art-h2 + *{margin-top:18px} .art-h3{ margin-top:36px; font:500 17px/1.35 var(--font-sans);letter-spacing:-0.005em;color:#fff; } .art-prose > .art-h3 + *{margin-top:12px} .art-prose ul, .art-prose ol{padding-left:1.3em} .art-prose li + li{margin-top:12px} .art-prose li::marker{color:rgba(255,255,255,0.35)} .art-quote{ margin:40px 0;padding:4px 0 4px 28px; border-left:2px solid rgba(255,255,255,0.32); } .art-quote p{ font:300 22px/1.42 var(--font-serif);color:#fff;letter-spacing:-0.005em; } .art-quote p + p{margin-top:14px} .art-prose code{ font:400 0.88em/1.5 var(--font-mono); padding:2px 6px;border-radius:4px; background:rgba(255,255,255,0.07);color:#fff; } .art-rule{ border:0;border-top:1px solid rgba(255,255,255,0.1); margin:48px 0; } /* ── Comparison table ────────────────────────────────────────────────────── One restrained table per piece: mono column heads, hairline rows, no zebra striping or boxed cells. */ .art-table{ width:100%;border-collapse:collapse; font:400 15px/1.55 var(--font-sans);color:rgba(255,255,255,0.72); } .art-table caption{ text-align:left;padding-bottom:14px; font:500 10px/1.4 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.42); } .art-table th,.art-table td{ padding:13px 20px 13px 0; border-top:1px solid rgba(255,255,255,0.08); text-align:left;vertical-align:top; } .art-table thead th{ border-top:none; font:500 10px/1.4 var(--font-mono);letter-spacing:0.16em;text-transform:uppercase; color:rgba(255,255,255,0.5); } .art-table tbody th{font-weight:500;color:#fff;white-space:nowrap} @media (max-width:640px){ .art-table{font-size:14px} .art-table tbody th{white-space:normal} } /* Brand film, embedded mid-article. Player styles live in page-monochromatic. */ .art-prose .art-film{margin:44px 0} .art-prose .art-film .demo-video-frame{border-radius:14px} /* ── Related links ──────────────────────────────────────────────────────── */ .art-related{margin-top:96px;padding-top:56px;border-top:1px solid rgba(255,255,255,0.08)} .art-links{ display:grid;grid-template-columns:1fr 1fr;gap:14px; } @media (max-width:780px){ .art-links{grid-template-columns:1fr} } .art-link{ position:relative; display:flex;flex-direction:column;gap:8px; padding:22px 48px 22px 24px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:var(--gs-chrome); transition:border-color 160ms ease; } .art-link:hover{border-color:rgba(255,255,255,0.22)} .art-link:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:3px} .art-link-k{ font:500 10px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.38); } .art-link-h{font:500 17px/1.3 var(--font-sans);color:#fff;letter-spacing:-0.01em} .art-link-p{font:400 14px/1.5 var(--font-sans);color:rgba(255,255,255,0.55);text-wrap:pretty} .art-link-go{ position:absolute;top:22px;right:22px; font:400 14px/1 var(--font-mono);color:rgba(255,255,255,0.3); transition:color 160ms ease, transform 160ms ease; } .art-link:hover .art-link-go{color:#fff;transform:translateX(3px)} /* ── Back to index ──────────────────────────────────────────────────────── */ .art-allback{margin-top:56px} .art-allback a{ display:inline-flex;align-items:center;gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.18); font:500 11px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase; color:rgba(255,255,255,0.7); transition:color 160ms ease, border-color 160ms ease; } .art-allback a:hover{color:#fff;border-color:#fff} .art-allback a:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:3px} /* ══════════════════════════════════════════════════════════════════════════ ARTICLES INDEX · /articles ══════════════════════════════════════════════════════════════════════════ */ .art-index{ max-width:1280px;margin:0 auto; padding:24px 44px 0; } @media (max-width:780px){ .art-index{padding:16px 22px 0} } /* Category chips. Emitted only once a second category exists. */ .art-filter{ display:flex;gap:8px;flex-wrap:wrap; margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.08); } .art-chip{ display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border-radius:999px; border:1px solid rgba(255,255,255,0.14); background:transparent;color:rgba(255,255,255,0.7); font:500 11px/1 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; cursor:pointer; transition:border-color 160ms ease, color 160ms ease, background 160ms ease; } .art-chip:hover{border-color:rgba(255,255,255,0.32);color:#fff} .art-chip:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:3px} .art-chip.is-active{border-color:rgba(255,255,255,0.55);color:#fff;background:rgba(255,255,255,0.10)} .art-chip .count{color:rgba(255,255,255,0.42);font-weight:400} .art-chip.is-active .count{color:rgba(255,255,255,0.85)} /* ── Lead article ───────────────────────────────────────────────────────── */ .art-lead{ display:block; padding:44px 48px 40px; border:1px solid rgba(255,255,255,0.1); border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(0,0,0,0) 55%), var(--gs-chrome); transition:border-color 160ms ease; } .art-lead:hover{border-color:rgba(255,255,255,0.24)} .art-lead:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:3px} .art-lead-media{ margin:-44px -48px 28px; border-radius:14px 14px 0 0; overflow:hidden; aspect-ratio:1200 / 630; background:#0a0a0a; } .art-lead-media img{display:block;width:100%;height:100%;object-fit:cover} @media (max-width:780px){ .art-lead{padding:28px 24px 26px} .art-lead-media{margin:-28px -24px 22px} } .art-lead-k{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; font:500 11px/1.4 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:24px; } /* The one editorial status on the index, and so the one place Raven blue is spent here. The kicker beside it stays neutral so the flag reads first. */ .art-lead-flag{ display:inline-flex;align-items:center;gap:8px; padding:5px 10px;border-radius:4px; border:1px solid var(--brand-accent-line);background:var(--brand-accent-wash); color:#fff;font-size:10px;letter-spacing:0.2em; } .art-lead-h{ font:300 clamp(28px, 3.4vw, 44px)/1.06 var(--font-sans); letter-spacing:-0.032em;color:#fff;text-wrap:balance;max-width:20ch; } .art-lead-p{ margin-top:18px;max-width:58ch; font:300 19px/1.42 var(--font-serif);color:rgba(255,255,255,0.72);text-wrap:pretty; } .art-lead-foot{ margin-top:32px;padding-top:20px; border-top:1px solid rgba(255,255,255,0.08); display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; } .art-lead-by{font:500 13px/1.4 var(--font-sans);color:rgba(255,255,255,0.85)} .art-lead-role{ display:block;margin-top:3px; font:400 10px/1.4 var(--font-mono);letter-spacing:0.16em;text-transform:uppercase; color:rgba(255,255,255,0.42); } .art-lead-more, .art-card-foot{ display:inline-flex;align-items:center;gap:10px; font:500 11px/1 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.6); transition:color 160ms ease; } .art-lead:hover .art-lead-more, .art-card:hover .art-card-foot{color:#fff} /* ── Secondary cards ────────────────────────────────────────────────────── */ .art-grid-wrap{margin-top:16px} .art-grid{ display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:16px; } .art-card{ display:flex;flex-direction:column;gap:12px; padding:26px 28px 24px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:var(--gs-chrome); transition:border-color 160ms ease; } .art-card-media{ margin:-26px -28px 4px; border-radius:14px 14px 0 0; overflow:hidden; aspect-ratio:1200 / 630; background:#0a0a0a; } .art-card-media img{display:block;width:100%;height:100%;object-fit:cover} .art-card:hover{border-color:rgba(255,255,255,0.22)} .art-card:focus-visible{outline:1px solid rgba(255,255,255,0.6);outline-offset:3px} .art-card .art-k{margin-bottom:0} .art-card-h{font:500 20px/1.24 var(--font-sans);color:#fff;letter-spacing:-0.015em;text-wrap:balance} .art-card-p{font:400 14px/1.55 var(--font-sans);color:rgba(255,255,255,0.56);text-wrap:pretty} .art-card-foot{ margin-top:auto;padding-top:18px; border-top:1px solid rgba(255,255,255,0.06); justify-content:space-between; } /* Category filtering hides cards with the `hidden` attribute, which needs to out-specify the display declarations above. */ .art-index [hidden]{display:none} .art-index-cta{ max-width:1280px;margin:0 auto; padding:0 44px 120px; } .art-index-cta .article-cta{margin-top:56px} @media (max-width:780px){ .art-index-cta{padding:0 22px 80px} } /* ── Company page (`/company`) — editorial story, not a prose column ───── */ .co-page{ --co-fg:rgba(255,255,255,0.74); --co-fg-k:rgba(255,255,255,0.5); overflow-x:clip; } .co-kicker{ margin:0 0 22px; font:500 11px/1 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:var(--co-fg-k); } .co-kicker .sep{margin:0 0.55em;color:rgba(255,255,255,0.28)} .co-go{ display:inline-block; font:500 12px/1 var(--font-mono);letter-spacing:0.14em;text-transform:uppercase; color:rgba(255,255,255,0.78);text-decoration:none;white-space:nowrap; border-bottom:1px solid rgba(255,255,255,0.32);padding-bottom:4px; transition:color 160ms ease,border-color 160ms ease; } .co-go:hover{color:#fff;border-color:#fff} .co-go-quiet{color:rgba(255,255,255,0.55);border-bottom-color:rgba(255,255,255,0.2)} .co-chapter-copy a{ color:#fff;border-bottom:1px solid rgba(255,255,255,0.32);text-decoration:none; } .co-chapter-copy a:hover{border-bottom-color:#fff} .co-reveal{ opacity:1;transform:none; } @media (prefers-reduced-motion: no-preference){ .co-reveal{ opacity:0;transform:translateY(18px); transition:opacity 520ms ease, transform 520ms ease; } .co-reveal.is-in{opacity:1;transform:none} .co-lede-frame,.co-specimen-frame{ clip-path:inset(6% 6% 6% 6%); transition:clip-path 720ms cubic-bezier(.2,.7,.2,1); } .co-reveal.is-in .co-lede-frame, .co-reveal.is-in .co-specimen-frame{clip-path:inset(0)} } .co-hero{padding:172px 44px 112px} .co-hero-inner{max-width:1240px;margin:0 auto} .co-hero-eyebrow{ margin:0 0 40px;padding-top:22px; border-top:1px solid rgba(255,255,255,0.12); } .co-hero-grid{ display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:48px 72px;align-items:end; } .co-hero-h{ margin:0;max-width:12ch; font:300 clamp(48px, 7.4vw, 108px)/0.98 var(--font-sans); letter-spacing:-0.045em;color:#fff;text-wrap:balance; } .co-hero-p{ margin:0 0 0.15em;max-width:34em; font:400 clamp(18px, 1.45vw, 21px)/1.55 var(--font-sans); color:var(--co-fg);text-wrap:pretty; } /* Lede photograph under the hero: a street, not a product. Wide crop, single place label — the frontline as a place before it is a case. */ .co-lede{ max-width:1440px;margin:0 auto;padding:0 44px 40px; border-top:1px solid rgba(255,255,255,0.1); } .co-lede-frame{ margin-top:32px; aspect-ratio:21/9;overflow:hidden;background:#000; border:1px solid rgba(255,255,255,0.12);border-radius:8px; } .co-lede-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block} .co-lede-k{ display:block;margin:14px 0 0; font:500 10px/1 var(--font-mono);letter-spacing:0.2em;text-transform:uppercase; color:var(--co-fg-k); } .co-lede-k .sep{margin:0 0.5em;color:rgba(255,255,255,0.28)} .co-mission{ padding:120px 44px; border-top:1px solid rgba(255,255,255,0.1); } .co-mission-inner{ max-width:1240px;margin:0 auto; display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px 72px;align-items:end; } .co-mission-lead .co-kicker{ display:flex;align-items:center;gap:16px;max-width:22em; } .co-mission-lead .co-kicker::after{ content:"";flex:1;height:1px;background:rgba(255,255,255,0.16); } .co-mission-h{ margin:0;max-width:14ch; font:300 clamp(40px, 5vw, 76px)/1.04 var(--font-serif); letter-spacing:-0.015em;color:#fff;text-wrap:balance; } .co-mission-p{ margin:0 0 0.2em;max-width:34em; font:400 clamp(16px, 1.25vw, 19px)/1.6 var(--font-sans); color:var(--co-fg);text-wrap:pretty; } .co-chapter{padding:136px 44px;border-top:1px solid rgba(255,255,255,0.1)} .co-chapter-inner{max-width:1240px;margin:0 auto} .co-chapter--statement .co-chapter-inner{ display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:48px 80px;align-items:end; } .co-chapter--media-left .co-chapter-inner, .co-chapter--media-right .co-chapter-inner{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px 64px;align-items:center; } .co-chapter-h{ margin:0 0 28px;max-width:16ch; font:300 clamp(32px, 3.6vw, 52px)/1.08 var(--font-serif); letter-spacing:-0.02em;color:#fff;text-wrap:balance; } .co-chapter--statement .co-chapter-h{margin-bottom:0;max-width:12ch;font-size:clamp(36px, 4.2vw, 64px)} .co-chapter-copy p{ margin:0;max-width:36em; font:400 clamp(17px, 1.35vw, 21px)/1.58 var(--font-sans); color:var(--co-fg);text-wrap:pretty; } .co-chapter-copy p + p{margin-top:18px} .co-chapter-ctas{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:28px !important} .co-specimen{margin:0;min-width:0} .co-specimen-frame{ overflow:hidden;background:#070708; border:1px solid rgba(255,255,255,0.12);border-radius:8px; } .co-specimen-frame:not(.co-specimen-frame--shot){ aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:10%; } .co-specimen-frame:not(.co-specimen-frame--shot) img{ width:82%;height:auto;max-height:48%;object-fit:contain;display:block; } .co-specimen-frame--shot{aspect-ratio:16/10} .co-specimen-frame--shot img{width:100%;height:100%;object-fit:cover;display:block} .co-specimen figcaption{ margin:14px 0 0; font:400 13px/1.4 var(--font-sans);color:rgba(255,255,255,0.5); } .co-fund{padding:120px 44px;border-top:1px solid rgba(255,255,255,0.12);border-bottom:1px solid rgba(255,255,255,0.12)} .co-fund-inner{max-width:1240px;margin:0 auto} .co-fund-grid{ display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px 64px;align-items:end; } .co-fund-fig{ margin:0; font:300 clamp(72px, 11vw, 152px)/0.88 var(--font-serif); letter-spacing:-0.04em;color:#fff; } .co-fund-h{ margin:0 0 16px;max-width:16ch; font:300 clamp(26px, 2.6vw, 36px)/1.12 var(--font-serif); letter-spacing:-0.015em;color:#fff;text-wrap:balance; } .co-fund-copy p{ margin:0 0 24px;max-width:34em; font:400 18px/1.55 var(--font-sans);color:var(--co-fg);text-wrap:pretty; } .co-fund-backers{ list-style:none;margin:48px 0 0;padding:22px 0 0; display:flex;flex-wrap:wrap;gap:12px 32px; border-top:1px solid rgba(255,255,255,0.1); } .co-fund-backers li{ font:500 14px/1.3 var(--font-sans);letter-spacing:-0.01em;color:rgba(255,255,255,0.7); } .co-fund-backers li span{ margin-left:8px; font:500 9px/1 var(--font-mono);letter-spacing:0.16em;text-transform:uppercase; color:rgba(255,255,255,0.42); } .co-commit{padding:128px 44px 40px} .co-commit-head{max-width:1240px;margin:0 auto 40px} .co-commit-h{ margin:0;max-width:18ch; font:300 clamp(32px, 3.4vw, 48px)/1.1 var(--font-serif); letter-spacing:-0.015em;color:#fff;text-wrap:balance; } .co-commit-grid{ list-style:none;margin:0 auto;padding:0;max-width:1240px; display:grid;grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,0.12);border-left:1px solid rgba(255,255,255,0.12); } .co-commit-grid li{ position:relative;display:flex;flex-direction:column;gap:16px; min-width:0;padding:40px 36px 48px; border-right:1px solid rgba(255,255,255,0.12); border-bottom:1px solid rgba(255,255,255,0.12); } .co-commit-grid li::after{ content:"";position:absolute;left:36px;bottom:28px; width:20px;height:1px;background:rgba(255,255,255,0.28); transition:width 200ms ease; } .co-commit-grid li:hover::after{width:48px} .co-commit-n{ font:400 28px/1 var(--font-serif);letter-spacing:0.04em;color:rgba(255,255,255,0.38); } .co-commit-name{ font:300 clamp(26px, 2.2vw, 34px)/1.12 var(--font-serif); letter-spacing:-0.015em;color:#fff;text-wrap:balance; } .co-commit-p{ max-width:32em; font:400 16px/1.55 var(--font-sans);color:var(--co-fg);text-wrap:pretty; } .co-close{padding:96px 44px 128px} .co-close-inner{ max-width:1240px;margin:0 auto;padding-top:36px; border-top:1px solid rgba(255,255,255,0.12); } .co-close-h{ margin:0 0 20px; font:300 clamp(40px, 5vw, 72px)/1.02 var(--font-sans); letter-spacing:-0.035em;color:#fff; } .co-close-p{ margin:0;max-width:34em; font:400 clamp(17px, 1.3vw, 20px)/1.55 var(--font-sans);color:var(--co-fg);text-wrap:pretty; } .co-close-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} @media (prefers-reduced-motion: reduce){ .co-commit-grid li::after{transition:none} .co-lede-frame,.co-specimen-frame{clip-path:none;transition:none} } @media (max-width: 1100px){ .co-hero,.co-chapter,.co-fund,.co-commit,.co-close,.co-mission{padding-left:24px;padding-right:24px} .co-lede{padding:0 24px 32px} .co-hero-grid,.co-chapter--statement .co-chapter-inner, .co-chapter--media-left .co-chapter-inner, .co-chapter--media-right .co-chapter-inner, .co-fund-grid,.co-mission-inner{grid-template-columns:1fr;gap:28px} .co-hero-h{max-width:14ch} .co-chapter--media-right .co-chapter-copy{order:1} .co-chapter--media-right .co-specimen{order:2} } @media (max-width: 700px){ .co-hero{padding:108px 24px 72px} .co-chapter{padding:88px 24px} .co-mission{padding:88px 24px} .co-fund{padding:80px 24px} .co-commit{padding:80px 24px 24px} .co-close{padding:72px 24px 96px} .co-lede-frame{margin-top:24px;aspect-ratio:4/5} .co-commit-grid{grid-template-columns:1fr} .co-commit-grid li{padding:32px 0 40px;border-right:0} .co-commit-grid li::after{left:0} .co-hero-p,.co-chapter-copy p,.co-fund-copy p,.co-close-p,.co-mission-p{font-size:18px} .co-commit-name{font-size:28px} }