/* ========================================================================== Tangent Technologies — design system Light, monochrome, editorial-technical. The brand is black on white. Colour is therefore reserved, not decorative: the only hues in the system are the reserved status scale (risk, phase) and the single gold used by the acquisition notice. Emphasis everywhere else is carried by weight, scale and letter-spacing. ========================================================================== */ /* --- tokens --------------------------------------------------------------- Light is the default: pages ship with data-theme="light" on , so the dark block below only applies when a visitor asks for it. -------------------------------------------------------------------------- */ :root { /* --- surfaces */ --bg: #E7E8EA; /* a grey ground, not white — panels sit on it */ --bg-elev: #F5F6F7; --bg-elev-2: #EDEEF0; --bg-inset: #E0E2E5; --line: rgba(17, 19, 21, 0.13); --line-strong: rgba(17, 19, 21, 0.26); /* Smoked glass: panels are translucent over the grey ground and carry a faint dark cast, so surfaces read as tinted glass rather than as paper. */ --glass: rgba(252, 253, 253, 0.62); --glass-tint: rgba(17, 19, 21, 0.045); --glass-blur: blur(14px) saturate(115%); /* --- ink */ --fg: #111315; /* 18.1:1 on white */ --fg-muted: #55595E; /* 7.6:1 */ --fg-dim: #82878C; /* 3.6:1 — large / non-essential only */ /* --- brand: graphite. Accent is pure black so emphasis reads as weight. */ --accent: #000000; /* 21:1 on white */ --accent-2: #2B2F33; --accent-soft: rgba(17, 19, 21, 0.055); --gold: #7A5A10; /* 6.8:1 on white — acquisition notice only */ --accent-line: rgba(17, 19, 21, 0.24); /* --- data marks: validated trio (OKLab CVD ΔE 10.6 worst pair, all-pairs) */ --d-live: #0E8A63; /* operational */ --d-build: #A85B12; /* in construction */ --d-plan: #5B5FD6; /* planning */ /* --- status: reserved scale, always shipped with a label + severity bars */ --ok: #0E8A63; --warn: #8A6410; --danger: #C33A30; --btn-fg: #FFFFFF; --btn-bg: #111315; --btn-alt-fg: #FFFFFF; --btn-alt-bg: #111315; --glow: radial-gradient(60% 60% at 70% 30%, rgba(17, 19, 21, 0.075), transparent 70%); --grid-line: rgba(17, 19, 21, 0.07); --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 28px rgba(0,0,0,.07); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --maxw: 1400px; --pad: 40px; --nav-h: 66px; --bar-h: 36px; --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", "SFMono-Regular", ui-monospace, "Menlo", monospace; --ease: cubic-bezier(.16,.84,.44,1); color-scheme: light; } /* --- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; } body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color .35s var(--ease), color .35s var(--ease); } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } /* Accent is pure black in this palette, so a solid accent fill would paint black text on a black band. A wash keeps the ink readable everywhere, including over card photography. */ ::selection { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--fg); } ::-moz-selection { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--fg); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* --- layout primitives ---------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .section { position: relative; padding-block: 128px; border-top: 1px solid var(--line); } .section--flush { border-top: 0; } .section--tight { padding-block: 88px; } /* reads as a continuation of the block above rather than a new slab */ .section--attached { border-top: 0; padding-block-start: 20px; } .rule { height: 1px; background: var(--line); border: 0; } /* --- type ----------------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.03; } .display { font-size: clamp(2.85rem, 6.4vw, 5rem); letter-spacing: -0.042em; line-height: 0.98; } .h2 { font-size: clamp(2.1rem, 4.1vw, 3.4rem); letter-spacing: -0.038em; line-height: 1.02; } .h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.028em; } .accent { background: linear-gradient(96deg, var(--accent) 8%, var(--accent-2) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lede { font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--fg-muted); line-height: 1.62; max-width: 62ch; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 20px; } .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); } .eyebrow--plain::before { display: none; } .mono { font-family: var(--mono); font-feature-settings: "tnum" 1; } .dim { color: var(--fg-dim); } .muted { color: var(--fg-muted); } .section-head { max-width: 780px; margin-bottom: 56px; } .section-head .lede { margin-top: 22px; } /* eyebrow only — no heading to hang the 56px gap off */ .section-head--bare { margin-bottom: 28px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } .section-head--center .lede { margin-inline: auto; } /* --- badges / pills ------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg-elev) 80%, transparent); font-size: 13px; color: var(--fg-muted); backdrop-filter: blur(8px); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 2.4s var(--ease) infinite; } .badge--accent { border-color: var(--accent-line); color: var(--accent-2); background: var(--accent-soft); } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-elev); font-size: 13.5px; color: var(--fg-muted); transition: border-color .2s, color .2s, background-color .2s, transform .2s; } .chip:hover { border-color: var(--line-strong); color: var(--fg); transform: translateY(-1px); } .chip svg { width: 13px; height: 13px; color: var(--accent); flex: none; } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(6px); color: var(--fg); /* Long category names ("AI Infrastructure") were wrapping to two lines and dragging the risk label with them, so one card sat taller than its row. */ white-space: nowrap; } /* Risk keeps its full width; the category truncates first if space runs out. */ .pcard__tags > .tag { flex: none; } .pcard__tagset > .tag:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-block; } /* Card pills run a touch tighter than elsewhere: three of them (New + a long category + risk) have to share one row over the photo without truncating. */ .pcard__tags .tag { font-size: 10px; padding: 4px 8px; letter-spacing: .05em; } .pcard__tags { gap: 6px; } .pcard__tagset { gap: 6px; } /* Risk is an ordinal status scale. Colour alone never carries it: every tag ships the word AND a three-step severity meter, so it survives CVD and mono. */ .tag--low { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); } .tag--medium { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, transparent); background: color-mix(in srgb, var(--warn) 14%, transparent); } .tag--high { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, transparent); background: color-mix(in srgb, var(--danger) 14%, transparent); } /* newest listings — the accent pill is the only solid fill on the card */ .pcard__tagset { display: flex; align-items: center; gap: 7px; min-width: 0; } .tag--new { background: var(--accent); border-color: transparent; color: var(--btn-fg); font-weight: 600; letter-spacing: .12em; flex: none; } .meter { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; flex: none; } .meter i { width: 2.5px; border-radius: 1px; background: currentColor; opacity: .28; } .meter i:nth-child(1) { height: 4px; } .meter i:nth-child(2) { height: 6.5px; } .meter i:nth-child(3) { height: 9px; } .meter[data-level="1"] i:nth-child(-n+1), .meter[data-level="2"] i:nth-child(-n+2), .meter[data-level="3"] i:nth-child(-n+3) { opacity: 1; } /* --- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding-inline: 22px; border-radius: 10px; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; border: 1px solid transparent; transition: transform .18s var(--ease), background-color .2s, border-color .2s, opacity .2s; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn svg { width: 15px; height: 15px; flex: none; } .btn--primary { background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; } .btn--primary:hover { opacity: .88; } .btn--ghost { border-color: var(--line-strong); color: var(--fg); background: color-mix(in srgb, var(--bg-elev) 70%, transparent); } .btn--ghost:hover { border-color: var(--fg-dim); background: var(--bg-elev-2); } .btn--bare { color: var(--fg-muted); padding-inline: 6px; } .btn--bare:hover { color: var(--fg); } /* only shown once this button is promoted to primary on mobile */ .cta-early__arw { display: none; } .btn--sm { height: 38px; padding-inline: 15px; font-size: 13.5px; border-radius: 9px; } .btn--primary .arw, .btn--ghost .arw { transition: transform .22s var(--ease); } .btn:hover .arw { transform: translateX(3px); } /* --- cards ---------------------------------------------------------------- */ .card { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); /* Tinted glass over the ground rather than a flat panel. The tint sits on top of the translucent fill so the cast survives whatever is behind it. */ background: linear-gradient(var(--glass-tint), var(--glass-tint)), var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: border-color .25s, background-color .25s, transform .25s var(--ease); } .card:hover { border-color: var(--line-strong); } .card--pad { padding: 26px; } .card--inset { background: var(--bg-inset); } /* --- backgrounds ---------------------------------------------------------- */ .bg-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); } .bg-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--glow); } /* --- stars and stripes field (token hero) -------------------------------- Two stacked layers, because on a real flag the canton covers the stripes rather than letting them run behind the stars. ::before draws 13 bands across the whole section; ::after draws the canton over them on an opaque ground, so the stripes stop where the star field begins. All of it is brand orange at low alpha, faded out at the bottom. Background and mask only. */ .bg-flag { position: absolute; inset: 0; pointer-events: none; z-index: 0; /* Ink on a light ground reads harder than the old ember on black, so the layer is held back — but far enough forward that the flag is legible. The scrim below is what keeps it off the words. */ opacity: .52; mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.42) 84%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.42) 84%, transparent 100%); } .bg-flag::before, .bg-flag::after { content: ""; position: absolute; } /* 13 bands — sized to 2/13 of the box, so the count holds at any height */ .bg-flag::before { inset: 0; background-image: repeating-linear-gradient( 180deg, color-mix(in srgb, var(--accent) 15%, transparent) 0 7.6923%, transparent 7.6923% 15.3846% ); } /* the canton sits on the page's own ground, which is what hides the stripes */ .bg-flag::after { left: 0; top: 0; width: 38%; aspect-ratio: 494 / 353; background-color: var(--bg); background-image: url("data:image/svg+xml,"); background-size: 100% 100%; background-repeat: no-repeat; } /* The flag runs edge to edge, so the type needs its own ground: a soft ellipse of the page colour painted back over the field, centred on the headline. The flag survives as a frame; the words never sit on a star. */ .bg-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( ellipse 62% 46% at 50% 33%, var(--bg) 0%, color-mix(in srgb, var(--bg) 94%, transparent) 42%, color-mix(in srgb, var(--bg) 58%, transparent) 66%, transparent 84% ); } @media (max-width: 720px) { /* a phone hero is far taller than a flag, so the canton widens to stay in proportion with the stacked headline, and the whole field eases back */ .bg-flag { opacity: .44; } .bg-flag::after { width: 52%; } } .section > .wrap { position: relative; z-index: 1; } /* ========================================================================== Announcement bar ========================================================================== */ .announce { position: relative; z-index: 60; height: var(--bar-h); display: flex; align-items: center; justify-content: center; gap: 16px; background: var(--bg-elev-2); border-bottom: 1px solid var(--line); font-size: 13px; overflow: hidden; } .announce__inner { display: flex; align-items: center; gap: 14px; max-width: 100%; padding-inline: 16px; } .announce__txt { color: var(--fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .announce svg { width: 14px; height: 14px; color: var(--accent); } .announce__sep { color: var(--line-strong); } #countdown { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); letter-spacing: .06em; } #countdown b { color: var(--fg-muted); font-weight: 400; } /* ========================================================================== Nav ========================================================================== */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); transition: border-color .3s, background-color .3s; } .nav.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); } .nav__inner { height: 100%; display: flex; align-items: center; gap: 22px; min-width: 0; } /* The Tangent lockup: the T set solid in the ink colour, no tile behind it, and the wordmark tracked wide in caps the way the supplied logo sets it. */ .brand { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; color: var(--fg); } .brand__mark { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: var(--fg); } .brand__mark svg { width: 24px; height: auto; display: block; } .brand__w { font-weight: 500; font-size: 16px; letter-spacing: .22em; text-transform: uppercase; /* the tracking adds a trailing gap; pull it back so the lockup sits centred */ margin-right: -.22em; } .nav__links { display: flex; align-items: center; gap: 2px; flex: none; } .nav__link { position: relative; white-space: nowrap; padding: 8px 10px; border-radius: 8px; font-size: 14.5px; color: var(--fg-muted); transition: color .2s, background-color .2s; } .nav__link:hover { color: var(--fg); background: var(--bg-elev); } .nav__link.is-active { color: var(--fg); } .nav__link.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -19px; height: 2px; background: var(--fg); border-radius: 2px; } .nav__spacer { flex: 1; min-width: 8px; } .nav__ctx { font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; color: var(--fg-dim); text-transform: uppercase; } .nav__div { width: 1px; height: 20px; background: var(--line); } .search { display: flex; align-items: center; gap: 9px; flex: none; height: 38px; padding: 0 8px 0 13px; width: 196px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); color: var(--fg-dim); font-size: 13.5px; transition: border-color .2s, background-color .2s; } .search:hover { border-color: var(--line-strong); background: var(--bg-elev-2); } .search svg { width: 14px; height: 14px; } .search span { flex: 1; text-align: left; } .search kbd { font-family: var(--mono); font-size: 10.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-elev-2); color: var(--fg-dim); } .icon-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); color: var(--fg-muted); transition: color .2s, border-color .2s, background-color .2s; } .icon-btn:hover { color: var(--fg); border-color: var(--line-strong); background: var(--bg-elev-2); } .icon-btn svg { width: 16px; height: 16px; } .nav__burger { display: none; } /* mobile nav sheet */ .sheet { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(14px); padding: 24px var(--pad); display: none; flex-direction: column; gap: 6px; } .sheet.is-open { display: flex; } .sheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .sheet a { padding: 14px 4px; font-size: 22px; letter-spacing: -0.03em; border-bottom: 1px solid var(--line); } /* ========================================================================== Command palette ========================================================================== */ .palette { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-start; justify-content: center; padding-top: 14vh; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); } .palette.is-open { display: flex; } .palette__box { width: min(600px, 92vw); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: var(--shadow); overflow: hidden; animation: rise .22s var(--ease); } @keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.985); } } .palette__field { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .palette__field svg { width: 16px; height: 16px; color: var(--fg-dim); } .palette__field input { flex: 1; font-size: 15.5px; outline: none; } .palette__field input::placeholder { color: var(--fg-dim); } .palette__list { max-height: 350px; overflow-y: auto; padding: 8px; } .palette__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 9px; text-align: left; font-size: 14.5px; color: var(--fg-muted); } .palette__item:hover, .palette__item.is-sel { background: var(--bg-elev-2); color: var(--fg); } .palette__item .k { font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); margin-left: auto; letter-spacing: .1em; text-transform: uppercase; } .palette__empty { padding: 26px; text-align: center; color: var(--fg-dim); font-size: 14px; } /* ========================================================================== Hero ========================================================================== */ /* The hero centres in the space below the nav rather than inheriting .section's padding — otherwise the two stack and the headline sits low. */ .hero { position: relative; overflow: hidden; border-top: 0; padding-block: 0; display: flex; align-items: center; min-height: clamp(540px, calc(100svh - var(--nav-h) - var(--bar-h)), 800px); } .hero > .wrap { width: 100%; } /* asymmetric padding biases the block above true centre — optical, not maths */ .hero__inner { position: relative; z-index: 4; max-width: 720px; padding-block: clamp(20px, 2.4vw, 34px) clamp(52px, 6.5vw, 104px); } .hero .display { margin-top: 26px; } .hero .lede { margin-top: 28px; } .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; } .hero__orb { position: absolute; z-index: 3; right: -4%; top: 50%; transform: translateY(-50%); width: min(660px, 52vw, 86vh); aspect-ratio: 1; } .hero__orb canvas { width: 100%; height: 100%; outline: none; display: block; } .hero__orb canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; } /* The circuit field is a rectangle, not an orb, and it fades at the edges so it reads as a fragment of a much larger board rather than a placed graphic. */ .hero__orb.circuit { aspect-ratio: 1 / .82; width: min(760px, 56vw, 88vh); right: -6%; /* dissolve toward the headline so the board has no visible left edge */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%), radial-gradient(120% 115% at 66% 50%, #000 46%, transparent 92%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%), radial-gradient(120% 115% at 66% 50%, #000 46%, transparent 92%); -webkit-mask-composite: source-in; mask-composite: intersect; } .hero__orb.circuit canvas { cursor: crosshair; } .globe__tip { position: absolute; z-index: 4; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 16px)); min-width: 196px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); /* solid, not glass: it sits directly over dense traces and any bleed-through makes the numbers hard to read */ background: var(--bg-elev); box-shadow: var(--shadow); transition: opacity .14s; } .globe__tip.is-on { opacity: 1; } /* flipped under the pad when there is no room above it */ .globe__tip.is-below { transform: translate(-50%, 18px); } .globe__tipPhase { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; } .globe__tip h4 { font-size: 14px; letter-spacing: -0.022em; margin-top: 5px; } .globe__tip .loc { font-size: 12px; color: var(--fg-dim); margin-top: 2px; } .globe__tip dl { display: grid; grid-template-columns: auto auto; gap: 4px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; } .globe__tip dt { color: var(--fg-dim); } .globe__tip dd { text-align: right; } .globe__strip { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; width: max-content; max-width: 96%; } .globe__hint { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-elev) 78%, transparent); backdrop-filter: blur(8px); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); animation: hintIn .6s var(--ease) 1.4s both; } .globe__hint.is-gone { opacity: 0; transform: translateY(8px); } .globe__hintIcon { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--accent-line); position: relative; } .globe__hintIcon::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s var(--ease) infinite; } @keyframes hintIn { from { opacity: 0; transform: translateY(8px); } } .globe__key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 11.5px; color: var(--fg-dim); } .globe__key span { display: inline-flex; align-items: center; gap: 7px; } .globe__key i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; } /* ========================================================================== Stat band ========================================================================== */ .statband { padding-block: 0 96px; border-top: 0; } .statband__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; } .statband__note { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); } .statband__note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); animation: pulse 2.4s var(--ease) infinite; } .statband__upd { font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elev); } .stat { padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; } .stat:nth-child(4n) { border-right: 0; } .stat:nth-last-child(-n+4) { border-bottom: 0; } .stat__v { font-family: var(--mono); font-size: clamp(1.5rem, 2.3vw, 1.9rem); font-weight: 500; letter-spacing: -0.03em; } .stat__l { font-size: 13px; color: var(--fg-dim); margin-top: 5px; } .stat__d { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 11px; color: var(--ok); } /* ========================================================================== Split / compare ========================================================================== */ .split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 34px; align-items: center; } .split__arrow { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-2); } .split__arrow svg { width: 18px; height: 18px; } .panel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; background: var(--bg-elev); } .panel--unified { background: linear-gradient(155deg, var(--accent-soft), transparent 62%), var(--bg-elev); border-color: var(--accent-line); } .panel__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 20px; } .panel--unified .panel__label { color: var(--accent-2); } .frag { display: flex; flex-direction: column; gap: 8px; } .frag__row { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-radius: 9px; border: 1px dashed var(--line-strong); color: var(--fg-muted); font-size: 14px; } .frag__row::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-dim); } .unified { border: 1px solid var(--line); border-radius: var(--r-md); padding: 46px 30px; text-align: center; background: color-mix(in srgb, var(--bg) 40%, transparent); } .unified__icon { width: 54px; height: 54px; margin: 0 auto 20px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-elev-2); border: 1px solid var(--line-strong); color: var(--accent-2); } .unified__icon svg { width: 24px; height: 24px; } .unified p { color: var(--fg-muted); font-size: 14.5px; margin-top: 12px; max-width: 46ch; margin-inline: auto; } /* ========================================================================== Project cards ========================================================================== */ .projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pcard { overflow: hidden; display: flex; flex-direction: column; } .pcard:hover { transform: translateY(-3px); } .pcard__media { position: relative; aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--line); } .pcard__art { position: absolute; inset: 0; } .pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .pcard:hover .pcard__img { transform: scale(1.035); } /* real photography gets graded toward the brand before the tint lands on it */ /* The photo grade used to be warm, to sit with an ember palette. The brand is monochrome now, so the grade is neutral: desaturated toward grey, no sepia. */ .pcard__media.has-photo .pcard__img { filter: saturate(.42) contrast(1.04) brightness(.94); } .pcard__scrim { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--bg-elev) 92%, transparent), transparent 62%); } .pcard__tags { position: absolute; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; gap: 8px; } /* watermark on cards still waiting on real photography */ .pcard__soon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 244, 232, 0.16); background: rgba(10, 7, 5, 0.34); backdrop-filter: blur(2px); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237, 234, 230, 0.62); white-space: nowrap; pointer-events: none; } :root[data-theme="light"] .pcard__soon { border-color: rgba(20, 16, 11, 0.14); background: rgba(255, 255, 255, 0.42); color: rgba(20, 16, 11, 0.55); } .pcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .pcard__title { display: flex; align-items: start; justify-content: space-between; gap: 12px; } .pcard__title h3 { font-size: 16.5px; letter-spacing: -0.025em; } .pcard__title .arw { color: var(--fg-dim); transition: color .2s, transform .2s; width: 15px; height: 15px; flex: none; margin-top: 2px; } .pcard:hover .arw { color: var(--fg); transform: translate(2px, -2px); } .pcard__loc { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-dim); margin-top: 4px; } .pcard__loc svg { width: 12px; height: 12px; } .fund__top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 8px; } .fund__top b { color: var(--fg); font-weight: 500; } .fund__track { height: 4px; border-radius: 3px; background: var(--bg-elev-2); border: 1px solid var(--line); overflow: hidden; } .fund__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; transition: width 1.1s var(--ease); } .pmeta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); margin-top: auto; } .pmeta__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); } .pmeta__v { font-family: var(--mono); font-size: 12px; line-height: 1.3; margin-top: 5px; display: flex; align-items: center; gap: 5px; white-space: nowrap; } .pmeta__v svg { width: 12px; height: 12px; color: var(--accent); } /* ========================================================================== Category grid ========================================================================== */ .cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cat { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-md); } .cat:hover { transform: translateY(-2px); } .cat__icon { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--fg-muted); transition: color .2s, border-color .2s; } .cat:hover .cat__icon { color: var(--accent-2); border-color: var(--accent-line); } .cat__icon svg { width: 17px; height: 17px; } .cat__n { font-size: 14.5px; font-weight: 500; letter-spacing: -0.015em; } .cat__c { font-size: 12.5px; color: var(--fg-dim); margin-top: 2px; font-family: var(--mono); } /* ========================================================================== Feature / two-col ========================================================================== */ .two { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .two--top { align-items: start; } .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tile { padding: 20px; border-radius: var(--r-md); } .tile__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-2); margin-bottom: 14px; } .tile__icon svg { width: 16px; height: 16px; } .tile h4 { font-size: 14.5px; font-weight: 500; } .tile p { font-size: 13px; color: var(--fg-dim); margin-top: 5px; } .listrows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .listrow { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-elev); font-size: 13.5px; color: var(--fg-muted); } .listrow svg { width: 14px; height: 14px; color: var(--accent); flex: none; } .note { display: flex; gap: 12px; padding: 17px 19px; margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev); font-size: 13.5px; color: var(--fg-dim); line-height: 1.6; } .note b { color: var(--fg); font-weight: 600; } .note svg { width: 15px; height: 15px; color: var(--fg-muted); flex: none; margin-top: 2px; } /* --- signal cloud --------------------------------------------------------- */ .cloud { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 900px; margin-inline: auto; } .cloud--left { justify-content: flex-start; } .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 620px; margin: 52px auto 0; text-align: center; } .trio__v { font-family: var(--mono); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; letter-spacing: -0.03em; } .trio__l { font-size: 12.5px; color: var(--fg-dim); margin-top: 4px; } /* --- flywheel ------------------------------------------------------------- */ .flywheel { display: flex; flex-direction: column; gap: 0; } .fw { display: flex; align-items: center; gap: 16px; padding: 17px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev); transition: border-color .3s, background-color .3s, transform .3s var(--ease); } .fw.is-hot { border-color: var(--accent-line); background: linear-gradient(90deg, var(--accent-soft), transparent 70%), var(--bg-elev); transform: translateX(6px); } .fw__n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--line-strong); color: var(--fg-dim); transition: color .3s, border-color .3s, background-color .3s; } .fw.is-hot .fw__n { color: #fff; background: var(--accent); border-color: var(--accent); } :root[data-theme="light"] .fw.is-hot .fw__n { color: #fff; } .fw__t { font-size: 15px; font-weight: 500; flex: 1; } .fw__v { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; } .fw.is-hot .fw__v { color: var(--accent-2); border-color: var(--accent-line); } .fw__link { height: 18px; width: 1px; background: var(--line); margin-left: 33px; } /* --- question cards ------------------------------------------------------- */ .qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .q { padding: 26px; border-radius: var(--r-lg); } .q__n { font-family: var(--mono); font-size: 11.5px; color: var(--accent); letter-spacing: .1em; } .q h3 { font-size: 17.5px; margin-top: 14px; line-height: 1.3; letter-spacing: -0.025em; } .q__proc { display: flex; align-items: center; gap: 11px; margin-top: 24px; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--fg-dim); } .q__proc::before, .q__proc::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); } /* --- trajectory ----------------------------------------------------------- */ .traj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .traj__c { padding: 26px; border-radius: var(--r-lg); min-height: 250px; display: flex; flex-direction: column; } .traj__c--now { background: linear-gradient(160deg, var(--accent-soft), transparent 55%), var(--bg-elev); border-color: var(--accent-line); } .traj__hd { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 22px; } .traj__c--now .traj__hd { color: var(--accent-2); } .traj__c h3 { font-size: 22px; } .traj__bar { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); margin: 16px 0 10px; width: 72%; } .traj__list { display: flex; flex-direction: column; gap: 9px; } .traj__list li { list-style: none; display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--fg-muted); } .traj__list li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: none; } .traj__inf { font-size: 44px; line-height: 1; color: var(--accent-2); } /* --- numbered model grid -------------------------------------------------- */ .models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elev); } .model { padding: 30px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .25s; } .model:hover { background: var(--bg-elev-2); } .model:nth-child(3n) { border-right: 0; } .model:nth-last-child(-n+3) { border-bottom: 0; } .model__n { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); letter-spacing: .12em; } .model h3 { font-size: 18px; margin-top: 16px; } .model p { font-size: 13.5px; color: var(--fg-dim); margin-top: 9px; line-height: 1.55; } .model__kind { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); padding: 3px 8px; border: 1px solid var(--accent-line); border-radius: 5px; background: var(--accent-soft); } /* --- fit bars ------------------------------------------------------------- */ .fits { display: flex; flex-direction: column; gap: 14px; } .fit { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 18px; } .fit__n { font-size: 14.5px; color: var(--fg-muted); } .fit__track { height: 6px; border-radius: 4px; background: var(--bg-elev-2); border: 1px solid var(--line); overflow: hidden; } .fit__fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; transition: width 1.2s var(--ease); } .fit__v { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); min-width: 44px; text-align: right; } .fit__scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); margin-top: 8px; } /* --- final CTA ------------------------------------------------------------ */ .finale { text-align: center; position: relative; overflow: hidden; } .finale .lede { margin: 26px auto 0; } .finale__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; } .finale__foot { margin-top: 26px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); } /* ========================================================================== Footer ========================================================================== */ .footer { border-top: 1px solid var(--line); padding-block: 68px 40px; background: var(--bg-elev); } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 48px; } .footer__about p { font-size: 13.5px; color: var(--fg-dim); margin-top: 16px; max-width: 34ch; line-height: 1.6; } .footer__mail { display: inline-block; margin-top: 16px; font-size: 13.5px; color: var(--fg-muted); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; } .footer__mail:hover { color: var(--fg); } .footer__soc { display: flex; gap: 9px; margin-top: 22px; } .footer__soc a { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--fg-dim); transition: color .2s, border-color .2s; } .footer__soc a:hover { color: var(--fg); border-color: var(--line-strong); } .footer__soc svg { width: 15px; height: 15px; } .footer h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); font-weight: 400; margin-bottom: 18px; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; } .footer ul a { font-size: 13.5px; color: var(--fg-muted); transition: color .2s; } .footer ul a:hover { color: var(--fg); } .footer__base { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-dim); } .footer__disc { max-width: 620px; line-height: 1.6; } /* ========================================================================== Sub-page: page header ========================================================================== */ .phead { padding-block: 60px 46px; position: relative; overflow: hidden; } .phead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .phead h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); letter-spacing: -0.04em; margin-top: 10px; } .phead .lede { margin-top: 16px; } .phead__stats { display: flex; gap: 34px; } .phead__stat .v { font-family: var(--mono); font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 500; letter-spacing: -0.03em; } .phead__stat .l { font-size: 12px; color: var(--fg-dim); margin-top: 3px; } /* ========================================================================== Marketplace ========================================================================== */ .mk { display: grid; grid-template-columns: 268px 1fr; gap: 32px; align-items: start; padding-block: 40px 110px; } .mk__side { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding-right: 4px; } .mk__side::-webkit-scrollbar { width: 6px; } .mk__side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } .mk__side::-webkit-scrollbar-track { background: transparent; } .field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev); transition: border-color .2s; } .field:focus-within { border-color: var(--line-strong); } .field svg { width: 15px; height: 15px; color: var(--fg-dim); flex: none; } .field input { flex: 1; font-size: 14px; outline: none; min-width: 0; } .field input::placeholder { color: var(--fg-dim); } .filters { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); padding: 18px; } .filters__hd { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; } .filters__hd svg { width: 15px; height: 15px; color: var(--fg-muted); } .filters__hd #reset { margin-left: auto; font-size: 12px; color: var(--fg-dim); } .filters__hd #reset:hover { color: var(--fg); } /* the header doubles as a disclosure control once the sidebar stacks */ .filters__tog { display: flex; align-items: center; gap: 9px; font: inherit; color: inherit; text-align: left; padding: 0; cursor: default; } .filters__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--btn-fg); font-family: var(--mono); font-size: 10.5px; font-weight: 600; } .filters__n[hidden] { display: none; } /* class display would otherwise beat [hidden] */ .filters__chev { display: none; transition: transform .25s var(--ease); } .fgroup + .fgroup { margin-top: 22px; } /* --- collapsible filters (stacked layout only) --------------------------- */ @media (max-width: 980px) { .filters__tog { flex: 1; cursor: pointer; } .filters__chev { display: block; margin-left: auto; color: var(--fg-dim); } .filters.is-open .filters__chev { transform: rotate(180deg); } /* 0fr -> 1fr animates a collapse without hard-coding a height */ .filters__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); } .filters__inner { overflow: hidden; min-height: 0; } .filters.is-open .filters__body { grid-template-rows: 1fr; } /* closed, the panel is just its own header — no rule hanging under it */ .filters__hd { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; transition: padding-bottom .25s var(--ease), margin-bottom .25s var(--ease); } .filters.is-open .filters__hd { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .filters__body, .filters__hd, .filters__chev { transition: none; } } .fgroup__t { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 10px; } .fopt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--fg-muted); text-align: left; transition: background-color .18s, color .18s; } .fopt:hover { background: var(--bg-elev-2); color: var(--fg); } .fopt.is-on { background: var(--bg-elev-2); color: var(--fg); } .fopt svg { width: 14px; height: 14px; flex: none; opacity: .75; } .fopt .n { flex: 1; } .fopt .c { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); } .fopt .swatch { width: 7px; height: 7px; border-radius: 50%; flex: none; } .mk__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .mk__count { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--fg-dim); } .mk__count b { font-family: var(--mono); color: var(--fg); font-weight: 500; } .mk__count svg { width: 15px; height: 15px; } .select { height: 40px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); font-size: 13.5px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 14px; } .select:hover { border-color: var(--line-strong); } .mk .projects { grid-template-columns: repeat(3, 1fr); } .empty { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 70px 24px; text-align: center; color: var(--fg-dim); } .empty h3 { font-size: 17px; color: var(--fg); margin-bottom: 8px; } .chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .chips-row .chip { cursor: pointer; } .chips-row .chip.is-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-2); } /* ========================================================================== Map page ========================================================================== */ .mapwrap { display: grid; grid-template-columns: 268px 1fr; gap: 32px; align-items: start; padding-block: 40px 110px; } .mapstage { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); overflow: hidden; } .mapstage svg { width: 100%; height: auto; display: block; } .map-dot-bg { fill: var(--line-strong); } .map-outline { fill: none; stroke: var(--line-strong); stroke-width: 1.1; } .map-mesh { fill: none; stroke: var(--line); stroke-width: .7; } .marker { cursor: pointer; transition: r .18s var(--ease); } .marker__halo { opacity: .18; } .marker.is-dim { opacity: .16; } .maptip { position: absolute; z-index: 5; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 14px)); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow); padding: 13px 15px; min-width: 214px; transition: opacity .15s; } .maptip.is-on { opacity: 1; } .maptip h4 { font-size: 14px; letter-spacing: -0.02em; } .maptip .loc { font-size: 12px; color: var(--fg-dim); margin-top: 2px; } .maptip dl { display: grid; grid-template-columns: auto auto; gap: 5px 14px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; } .maptip dt { color: var(--fg-dim); } .maptip dd { text-align: right; } .maplegend { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-muted); } .maplegend span { display: inline-flex; align-items: center; gap: 8px; } .maplegend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .statelist { display: flex; flex-direction: column; gap: 2px; } .staterow { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--fg-muted); } .staterow:hover { background: var(--bg-elev-2); color: var(--fg); } .staterow .n { flex: 1; } .staterow .bar { width: 54px; height: 4px; border-radius: 3px; background: var(--bg-elev-2); overflow: hidden; } .staterow .bar i { display: block; height: 100%; background: var(--accent); } .staterow .c { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); min-width: 20px; text-align: right; } /* ========================================================================== Token page ========================================================================== */ .tokenhero { position: relative; overflow: hidden; text-align: center; padding-block: 84px 96px; } .tokenhero .display { margin-top: 14px; } /* quiet italic line where the badge used to sit */ .sovereign { font-style: italic; font-size: 15.5px; letter-spacing: 0.005em; color: var(--fg-muted); } .tokenhero .lede { margin: 24px auto 0; } /* --- hero countdown ------------------------------------------------------ */ .cd { display: flex; justify-content: center; gap: 11px; margin-top: 36px; } .cd__u { display: grid; gap: 6px; justify-items: center; min-width: 96px; padding: 17px 12px 14px; border: 1px solid var(--accent-line); border-radius: 14px; background: linear-gradient(180deg, var(--accent-soft), transparent 78%), color-mix(in srgb, var(--bg-elev) 72%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 6%, transparent); backdrop-filter: blur(6px); } .cd__n { font-family: var(--mono); font-feature-settings: "tnum" 1; font-size: 35px; line-height: 1; letter-spacing: -0.02em; color: var(--fg); } .cd__l { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-dim); } .cd__live { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-live); } .cd__cap { margin-top: 14px; font-size: 12.5px; color: var(--fg-dim); } @media (max-width: 460px) { .cd { gap: 8px; } .cd__u { min-width: 0; flex: 1; padding: 15px 4px 12px; border-radius: 13px; } .cd__n { font-size: 29px; } .cd__l { font-size: 9px; letter-spacing: .14em; } } .tokenhero .buys { margin-top: 28px; } .ca:hover { border-color: var(--accent); background: var(--accent-soft); } .ca__k { color: var(--accent); flex: none; } .ca__v { overflow-wrap: anywhere; text-align: left; } /* the confirmation replaces the pill's contents instead of adding chrome */ .ca__done { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: inherit; background: var(--bg); color: var(--d-live); } .ca.is-done { border-color: color-mix(in srgb, var(--d-live) 50%, transparent); } .ca.is-done .ca__done { display: flex; } /* --- buy-on-wallet buttons ------------------------------------------------ */ .buys { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .tokenhero .buys { justify-content: center; } .buy { display: inline-flex; align-items: center; gap: 15px; height: 68px; padding: 0 42px; border: 1px solid transparent; border-radius: 14px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); } .buy:hover { transform: translateY(-1px); } .buy:active { transform: translateY(0); } .buy svg { width: 31px; height: 31px; flex: none; } /* brand marks knock out to the button fill, so the mark colour is the button colour */ .buy--coinbase { background: #204EEE; color: #FFFFFF; } .buy--coinbase svg { color: #FFFFFF; } /* A green halo lifts the button off the page. On the light ground it needs far less of it — the same glow that reads as a lift on black reads as a smudge on white — so the default is restrained and the dark theme keeps the full bloom. */ .buy--coinbase { box-shadow: 0 0 0 1.5px rgba(28, 176, 122, .48), 0 0 10px rgba(32, 186, 130, .22), 0 8px 26px rgba(32, 78, 238, .18); } .buy--coinbase:hover { background: #365FF1; box-shadow: 0 0 0 1.5px rgba(28, 176, 122, .70), 0 0 14px rgba(32, 186, 130, .34), 0 10px 32px rgba(32, 78, 238, .24); } /* --- persistent buy bar -------------------------------------------------- Appears only once the page's own buy button has scrolled away, so the two are never on screen together. Glass over the page, hairline edge, no drop shadow theatrics — it should read as chrome, not as an ad. */ .sbuy { position: fixed; z-index: 60; display: flex; align-items: center; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity .28s var(--ease), transform .28s var(--ease); } .sbuy.is-on { opacity: 1; pointer-events: auto; transform: none; } .sbuy__btn { height: 44px; padding: 0 20px; font-size: 15px; gap: 10px; border-radius: 12px; } .sbuy__btn svg { width: 20px; height: 20px; } /* desktop: a quiet pill clear of the reading column */ @media (min-width: 721px) { .sbuy { right: 24px; bottom: 24px; transform: translateY(10px); } } /* mobile: a full bar, since these pages have no other buy path here */ @media (max-width: 720px) { .sbuy { left: 0; right: 0; bottom: 0; transform: translateY(100%); padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px) saturate(140%); } .sbuy__btn { flex: 1 1 auto; justify-content: center; } /* reserve the bar's height so it never covers the last line of the footer */ body { padding-bottom: 74px; } } @media (prefers-reduced-motion: reduce) { .sbuy { transition: opacity .01s; transform: none; } } @media (max-width: 460px) { .buys { flex-direction: column; align-items: stretch; } .buy { justify-content: center; } } /* ========================================================================== Endorsements page ========================================================================== */ .logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .logos--duo { grid-template-columns: repeat(2, 1fr); gap: 22px; } .logos--duo .logo { padding: 34px; gap: 18px; } .logos--duo .logo p { font-size: 14.5px; } /* real brand marks: shown as supplied, never restyled beyond scale */ .logo__mark { width: 56px; height: 56px; flex: none; display: grid; place-items: center; } .logo__mark img { width: 100%; height: 100%; object-fit: contain; display: block; } .logo__mark--invert img { filter: invert(1); } :root[data-theme="light"] .logo__mark--invert img { filter: none; } /* --- visionary leaders ---------------------------------------------------- */ .vls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .vl { padding: 34px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 20px; } .vl:hover { transform: translateY(-3px); } .vl__top { display: flex; align-items: center; gap: 18px; } .vl__ph { width: 62px; height: 62px; border-radius: 15px; overflow: hidden; flex: none; background: var(--bg-elev-2); } .vl__ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .vl__n { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; } .vl__r { display: block; margin-top: 5px; font-size: 14px; color: var(--accent); letter-spacing: -0.01em; } .vl p { font-size: 14.5px; color: var(--fg-muted); line-height: 1.65; } @media (max-width: 860px) { .vls, .logos--duo { grid-template-columns: 1fr; } } .logo { padding: 28px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 16px; } .logo:hover { transform: translateY(-3px); } .logo__top { display: flex; align-items: center; gap: 13px; } .logo__mk { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 16px; letter-spacing: -0.04em; color: #fff; flex: none; } .logo__n { font-size: 16.5px; font-weight: 600; letter-spacing: -0.025em; } .logo__c { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin-top: 2px; } .logo p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.6; } .logo__take { font-size: 13px; color: var(--fg-dim); padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.55; } .logo__take b { color: var(--accent-2); font-weight: 500; } .quote { padding: 46px; border-radius: var(--r-xl); background: linear-gradient(150deg, var(--accent-soft), transparent 60%), var(--bg-elev); border: 1px solid var(--accent-line); } .quote p { font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.32; } .quote footer { margin-top: 24px; font-size: 13.5px; color: var(--fg-dim); font-family: var(--mono); letter-spacing: .06em; } /* ========================================================================== Reveal animation ========================================================================== */ .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .rv.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } .rv { opacity: 1; transform: none; } } /* ========================================================================== Responsive ========================================================================== */ /* The tracked TANGENT wordmark is ~50px wider than a short one, so the section label has to leave the bar earlier than it used to. */ @media (max-width: 1520px) { .nav__ctx, .nav__div { display: none; } } @media (max-width: 1240px) { .brand__w { font-size: 14.5px; letter-spacing: .16em; margin-right: -.16em; } .brand__mark { width: 23px; height: 23px; } .brand__mark svg { width: 21px; } .nav__inner { gap: 16px; } } @media (max-width: 1280px) { .search { width: 150px; } .search span { display: none; } } /* --------------------------------------------------------------------------- Acquisition notice — the one thing on the site allowed to arrive on its own. Gold, not ember, so it never competes with the buy button; bottom-LEFT so it never overlaps the sticky buy pill on the right. Shown once per visitor. --------------------------------------------------------------------------- */ .ntf { position: fixed; z-index: 70; left: 24px; bottom: 24px; width: min(370px, calc(100vw - 48px)); display: flex; align-items: flex-start; gap: 4px; padding: 14px 12px 14px 16px; border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent); border-radius: var(--r-lg); /* Solid, not translucent: it lands over dense body copy on phones and any bleed-through reads as a rendering fault rather than as depth. */ background: var(--bg-elev); box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 18px 48px rgba(0,0,0,.5), 0 0 26px color-mix(in srgb, var(--gold) 13%, transparent); opacity: 0; transform: translateY(12px) scale(.985); pointer-events: none; transition: opacity .42s var(--ease), transform .42s var(--ease); } .ntf.is-on { opacity: 1; transform: none; pointer-events: auto; } .ntf__link { display: flex; align-items: flex-start; gap: 11px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; } .ntf__dot { flex: none; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); } .ntf__tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ntf__t { font-size: 13.5px; font-weight: 600; color: var(--gold); line-height: 1.3; } .ntf__s { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--fg-dim); line-height: 1.45; } .ntf__go { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); } .ntf__go svg { width: 13px; height: 13px; } .ntf__link:hover .ntf__go { color: var(--gold); } .ntf__x { flex: none; width: 26px; height: 26px; margin: -3px -2px 0 0; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; cursor: pointer; color: var(--fg-dim); font-size: 17px; line-height: 1; } .ntf__x:hover { background: var(--bg); color: var(--fg); } /* On phones the bottom belongs to the buy bar, so the notice drops in from the top instead — under the nav, clear of the hero's call to action. */ @media (max-width: 720px) { .ntf { left: var(--pad); right: var(--pad); width: auto; /* The announcement bar scrolls, the nav sticks. The notice appears on arrival, so it clears both at their unscrolled heights. */ bottom: auto; top: calc(var(--bar-h) + var(--nav-h) + 10px); transform: translateY(-12px) scale(.985); } } @media (prefers-reduced-motion: reduce) { .ntf { transition: opacity .2s linear; transform: none; } } /* --------------------------------------------------------------------------- Recently acquired — a single quiet row under the hero. Deliberately has no fill, no accent bar and no motion: it should read as a footnote to the page, not as a banner competing with the buy button above it. --------------------------------------------------------------------------- */ .lt { display: flex; align-items: center; gap: 28px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); } .lt__lab { flex: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); } .lt__items { display: flex; align-items: center; gap: 26px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; } .lt__i { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; min-width: 0; } .lt__th { flex: none; width: 52px; height: 34px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); } .lt__th img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.92); } .lt__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lt__n { font-size: 13.5px; font-weight: 600; color: var(--fg); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt__m { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt__i:hover .lt__n { color: var(--accent); } .lt__i:hover .lt__th { border-color: var(--line-strong); } .lt__all { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--fg-dim); text-decoration: none; } .lt__all:hover { color: var(--fg); } .lt__all .arw { width: 14px; height: 14px; } @media (max-width: 860px) { .lt { flex-direction: column; align-items: flex-start; gap: 14px; padding: 15px 16px; } .lt__items { gap: 14px; flex-direction: column; align-items: flex-start; width: 100%; } .lt__i { width: 100%; } .lt__all { align-self: flex-start; } } /* The marketplace loses ~365px to the filter rail, so three columns here get narrower than three columns anywhere else. Below this the card is too tight for New + a long category + risk on one row, so drop to two early. */ @media (max-width: 1360px) { .mk .projects { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1180px) { :root { --pad: 28px; } .projects, .mk .projects, .qs, .traj, .models, .logos { grid-template-columns: repeat(2, 1fr); } .model:nth-child(3n) { border-right: 1px solid var(--line); } .model:nth-child(2n) { border-right: 0; } .model:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .model:nth-last-child(-n+2) { border-bottom: 0; } .cats { grid-template-columns: repeat(3, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .step:nth-child(2n) { border-right: 0; } .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .hero__orb { opacity: .55; right: -20%; } .globe__key { display: none; } } @media (max-width: 980px) { .nav__links { display: none; } .nav__burger { display: grid; } .two { grid-template-columns: 1fr; gap: 40px; } .split { grid-template-columns: 1fr; gap: 20px; } .split__arrow { transform: rotate(90deg); margin-inline: auto; } .mk, .mapwrap { grid-template-columns: 1fr; } .mk__side { position: static; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; } .spec { grid-template-columns: 1fr; gap: 6px; } .fit { grid-template-columns: 130px 1fr auto; gap: 12px; } } @media (max-width: 720px) { :root { --pad: 20px; } .section { padding-block: 82px; } .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(4n) { border-right: 1px solid var(--line); } .stat:nth-child(2n) { border-right: 0; } .stat:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); } .stat:nth-last-child(-n+2) { border-bottom: 0; } .projects, .mk .projects, .qs, .traj, .logos, .cats, .tiles, .steps { grid-template-columns: 1fr; } .models { grid-template-columns: 1fr; } .model { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; } .model:last-child { border-bottom: 0 !important; } .step { border-right: 0 !important; border-bottom: 1px solid var(--line); } .step:last-child { border-bottom: 0; } .hero__orb { display: none; } .announce__txt { font-size: 12px; } #countdown { display: none; } .search span, .search kbd { display: none; } .search { min-width: 0; width: 38px; padding: 0; justify-content: center; } .nav .btn--primary { display: none; } .nav__inner { gap: 10px; } /* The nav's Join Early Access is hidden at this width, so the hero carries it: it becomes the primary action and Explore marketplace drops to the bottom. */ .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; } .hero__cta .btn { width: 100%; height: 52px; justify-content: center; } .hero__cta .cta-early { order: 1; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; padding-inline: 22px; } .hero__cta .cta-early:hover { opacity: .88; } .cta-early__arw { display: block; } .hero__cta .cta-map { order: 2; } .hero__cta .cta-market { order: 3; background: color-mix(in srgb, var(--bg-elev) 70%, transparent); border-color: var(--line-strong); color: var(--fg); font-weight: 500; } .hero__cta .cta-market:hover { border-color: var(--fg-dim); background: var(--bg-elev-2); opacity: 1; } .announce svg { display: none; } .footer__grid { grid-template-columns: 1fr; } .phead__stats { gap: 22px; } .quote { padding: 28px; } .trio { gap: 10px; } } /* ========================================================================== Restored: FAQ accordion, lifecycle steps, spec table and the filter header button. These rules had gone missing from the stylesheet, which left the FAQ toggles rendering as full-size plus glyphs and the steps and spec list unstyled. Colours come from the tokens, so they pick up the monochrome palette without change. ========================================================================== */ .filters__hd button { margin-left: auto; font-size: 12px; color: var(--fg-dim); } .filters__hd button:hover { color: var(--fg); } .step__n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; background: var(--bg-elev-2); border: 1px solid var(--line-strong); color: var(--accent-2); margin-bottom: 18px; } .step h3 { font-size: 16.5px; } .step p { font-size: 13.5px; color: var(--fg-dim); margin-top: 8px; line-height: 1.55; } .specs { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elev); } .spec { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 18px 24px; border-bottom: 1px solid var(--line); font-size: 14px; } .spec:last-child { border-bottom: 0; } .spec dt { color: var(--fg-dim); font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; } .spec dd { color: var(--fg); } .faq { border-top: 1px solid var(--line); } .faq__i { border-bottom: 1px solid var(--line); } .faq__q { display: flex; align-items: center; gap: 18px; width: 100%; padding: 24px 4px; text-align: left; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; } .faq__q svg { width: 17px; height: 17px; color: var(--fg-dim); margin-left: auto; flex: none; transition: transform .25s var(--ease); } .faq__i.is-open .faq__q svg { transform: rotate(45deg); color: var(--accent-2); } .faq__a { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); } .faq__a p { padding: 0 4px 24px; color: var(--fg-muted); font-size: 14.5px; line-height: 1.65; max-width: 78ch; } /* ========================================================================== Launch dialog Centred, everything on the centre line. Monochrome: the mark, the rule and the button are ink, so the only thing that carries weight is scale — the reference used gold, which this palette does not have. ========================================================================== */ .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .modal.is-on { opacity: 1; pointer-events: auto; } .modal__scrim { position: absolute; inset: 0; background: rgba(8, 9, 10, .52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal__panel { position: relative; width: min(470px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 40px 38px 34px; text-align: center; border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: linear-gradient(var(--glass-tint), var(--glass-tint)), var(--bg-elev); box-shadow: 0 24px 80px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .10); transform: translateY(14px) scale(.97); transition: transform .34s var(--ease); } .modal.is-on .modal__panel { transform: none; } .modal__x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; cursor: pointer; color: var(--fg-dim); } .modal__x svg { width: 18px; height: 18px; } .modal__x:hover { background: var(--bg-elev-2); color: var(--fg); } .modal__mark { display: block; margin: 0 auto 22px; color: var(--fg); } .modal__mark svg { width: 58px; height: auto; display: block; margin: 0 auto; } .modal__eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 14px; } .modal__t { font-size: clamp(28px, 4.4vw, 34px); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; color: var(--fg); } .modal__t .accent { color: var(--accent); } .modal__p { margin: 14px auto 26px; max-width: 34ch; font-size: 14.5px; line-height: 1.6; color: var(--fg-muted); } /* The same Coinbase button as the page hero, sized to the panel and with the green halo removed — inside a dialog it has nothing to lift off. */ .modal__cta { display: flex; width: 100%; height: 60px; padding: 0 24px; justify-content: center; font-size: 18px; } .modal__cta.buy--coinbase, .modal__cta.buy--coinbase:hover { box-shadow: none; } .modal__cta svg { width: 27px; height: 27px; } .modal__ca { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 12px; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: transparent; cursor: pointer; font-family: var(--mono); font-size: 12px; transition: border-color .2s, background-color .2s; } .modal__ca:hover { border-color: var(--fg-dim); background: var(--bg-elev-2); } .modal__ca-k { color: var(--fg-dim); letter-spacing: .16em; } .modal__ca-v { color: var(--fg); } .modal__ca-a { color: var(--fg-dim); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; } @media (max-width: 480px) { .modal { padding: 16px; } .modal__panel { padding: 34px 22px 26px; border-radius: var(--r-lg); } .modal__mark svg { width: 48px; } .modal__ca { flex-wrap: wrap; gap: 6px 10px; } } @media (prefers-reduced-motion: reduce) { .modal, .modal__panel { transition: opacity .2s linear; } .modal__panel { transform: none; } } /* The panel is only focusable so the dialog announces itself; it is not a control, so it should not paint a focus ring. Focus for keyboard users is still visible on the buttons inside it. */ .modal__panel:focus { outline: none; } .modal__panel:focus-visible { outline: none; }