/* ============================================================ work.css — project case-study pages Namespaced .w-* so nothing collides with main.css utilities. ============================================================ */ .w-page { background: var(--bg); /* per-project accent — override inline on */ --accent: var(--blue); --accent-2: var(--violet); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-line: color-mix(in srgb, var(--accent) 42%, transparent); } /* ---------- shared bar under the header ---------- */ .w-bar { position: sticky; top: var(--header-block-size); z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: var(--space-0); padding-block: var(--space-s1); background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block-end: 1px solid rgba(255, 255, 255, 0.1); } .w-bar__actions { display: flex; gap: var(--space-1); align-items: center; } /* scroll progress */ .w-progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 1000; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } /* ---------- film: first thing on the page, full width ---------- */ .w-film { position: relative; background: #050505; border-block-end: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; } .w-film__inner { position: relative; aspect-ratio: 16 / 9; max-block-size: 78vh; } .w-film video, .w-film img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .w-film__glow { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 40%; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); } @media (min-width: 1000px) { .w-film__inner { aspect-ratio: 21 / 9; } } /* ---------- hero text block ---------- */ .w-hero { position: relative; padding-block: var(--space-3); border-block-end: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; } .w-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(50% 120% at 12% 0%, var(--accent-soft), transparent 70%); pointer-events: none; } .w-hero__grid { position: relative; z-index: 1; } @media (min-width: 1000px) { .w-hero { padding-block: var(--space-3) var(--space-3); } .w-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3); align-items: end; } } .w-eyebrow { display: flex; flex-wrap: wrap; gap: var(--space-s2) var(--space-1); color: var(--gray-50); margin-block-end: var(--space-1); } .w-title { font: 200 clamp(3.4rem, 1rem + 7vw, 6.4rem) / 0.88 var(--ff-p); letter-spacing: -0.055em; margin-block-end: var(--space-1); } .w-title .italic { font-family: var(--ff-h); font-weight: 400; letter-spacing: -0.02em; } .w-title .dot { color: var(--accent); } .w-tagline { font: 300 clamp(1.05rem, 0.6rem + 1vw, 1.45rem) / 1.45 var(--ff-p); letter-spacing: -0.03em; max-inline-size: 40ch; color: #d6d2ce; } /* meta chips */ .w-chips { display: flex; flex-wrap: wrap; gap: var(--space-s2); margin-block-start: var(--space-2); } .w-chip { font: 450 var(--font-s2) / 1 var(--ff-p); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.55em 0.85em; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; color: var(--fg); white-space: nowrap; } .w-chip[data-accent] { border-color: var(--accent-line); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* ---------- section scaffolding ---------- */ .w-section { padding-block: clamp(var(--space-3), 8vw, var(--space-4)); } .w-section + .w-section { border-block-start: 1px solid rgba(255,255,255,0.08); } .w-head { display: grid; grid-template-columns: 1fr; gap: var(--space-s2); margin-block-end: var(--space-2); } .w-num { color: var(--accent); font: 450 var(--font-s1)/1 var(--ff-p); letter-spacing: 0.06em; } .w-h2 { font: 200 var(--h2) / 1.02 var(--ff-p); letter-spacing: -0.045em; } .w-h2 .italic { font-family: var(--ff-h); font-weight: 400; } .w-prose { max-inline-size: 66ch; } .w-prose p { color: #d6d2ce; margin-block-end: var(--space-0); } .w-prose p:last-child { margin-block-end: 0; } .w-prose strong { font-weight: 500; color: var(--text); } .w-lede p { font: 300 clamp(1.05rem, 0.55rem + 1vw, 1.5rem)/1.5 var(--ff-p); letter-spacing: -0.025em; color: var(--fg); } /* ---------- stats strip ---------- */ .w-stats { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); } .w-stat { background: var(--bg); padding: var(--space-1); transition: background 0.4s ease; } .w-stat:hover { background: color-mix(in srgb, var(--accent) 7%, var(--bg)); } .w-stat__n { display: block; font: 200 clamp(1.9rem, 1rem + 2.4vw, 3.1rem)/1 var(--ff-p); letter-spacing: -0.05em; } .w-stat__l { display: block; margin-block-start: var(--space-s2); color: var(--gray-50); font: 450 var(--font-s2)/1.4 var(--ff-p); text-transform: uppercase; letter-spacing: 0.05em; } /* ---------- hard parts ---------- */ .w-parts { display: grid; gap: var(--space-3); } .w-part { display: grid; gap: var(--space-1); grid-template-columns: 1fr; } @media (min-width: 900px) { .w-part { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3); align-items: start; } .w-head { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-1); } } .w-part__k { font: 450 var(--font-s1)/1.5 var(--ff-p); text-transform: uppercase; letter-spacing: -0.01em; margin-block-end: var(--space-s2); } .w-part__k::before { content: attr(data-n); color: var(--accent); margin-inline-end: 0.75em; } /* code / schema slab */ .w-code { border: 1px solid rgba(255,255,255,0.14); background: #070707; padding: var(--space-1); overflow-x: auto; font: 400 0.78rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; color: #cfcbc7; white-space: pre; -webkit-overflow-scrolling: touch; } .w-code .c { color: #6f6a66; } .w-code .k { color: var(--accent); font-weight: 500; } .w-code { border-inline-start: 2px solid var(--accent-line); } .w-note { border-inline-start: 2px solid var(--accent-line); padding-inline-start: var(--space-0); color: #b8b4b0; } /* ---------- diagram ---------- */ .w-figure { margin-block-start: var(--space-2); } .w-figure svg { inline-size: 100%; block-size: auto; display: block; } .w-figure figcaption { margin-block-start: var(--space-0); color: var(--gray-50); font: 450 var(--font-s1)/1.5 var(--ff-p); } .w-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------- stack grid ---------- */ .w-stack-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .w-stack-col h3 { font: 450 var(--font-s1)/1.5 var(--ff-p); text-transform: uppercase; color: var(--gray-50); padding-block-end: var(--space-s2); border-block-end: 1px solid var(--accent-line); margin-block-end: var(--space-s1); } .w-stack-col ul { list-style: none; display: grid; gap: 0.35rem; } .w-stack-col li { color: #d6d2ce; } /* ---------- pull quote ---------- */ .w-pull { border-inline-start: 2px solid var(--accent); padding-inline-start: var(--space-1); font: 400 clamp(1.4rem, 0.8rem + 2vw, 2.6rem)/1.2 var(--ff-h); letter-spacing: -0.02em; max-inline-size: 22ch; color: var(--text); } /* ---------- next project ---------- */ .w-next { border-block-start: 1px solid rgba(255,255,255,0.1); } .w-next a { display: grid; gap: var(--space-s2); padding-block: var(--space-3); transition: opacity 0.3s ease; } .w-next a:hover { opacity: 1; } .w-next a:hover .w-next__t { color: var(--accent); } .w-next__t { transition: color 0.35s ease; } .w-next__l { color: var(--gray-50); font: 450 var(--font-s1)/1 var(--ff-p); text-transform: uppercase; } .w-next__t { font: 200 var(--h2)/1 var(--ff-p); letter-spacing: -0.045em; } /* ---------- reveal ---------- */ [data-w-reveal] { opacity: 0; transform: translateY(38px); } [data-w-reveal][data-shown] { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(0.2,1,0.57,0.95), transform 0.9s cubic-bezier(0.2,1,0.57,0.95); } @media (prefers-reduced-motion: reduce) { [data-w-reveal] { opacity: 1; transform: none; } .w-progress { display: none; } } /* ---------- footer ---------- */ .w-footer { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; justify-content: space-between; padding-block: var(--space-2); border-block-start: 1px solid rgba(255,255,255,0.1); } /* ---------- app mockups: same fidelity as the product landings ---------- */ /* full-bleed product band: mockup one side, the explanation the other */ .w-band { position: relative; border-block: 1px solid rgba(255, 255, 255, 0.1); background: var(--band-bg, #060608); padding-block: clamp(var(--space-2), 6vw, var(--space-4)); overflow: hidden; } .w-band__grid { display: grid; gap: var(--space-2); align-items: center; } @media (min-width: 1000px) { .w-band__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(var(--space-2), 5vw, var(--space-4)); } .w-band--flip .w-band__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .w-band--flip .w-band__visual { order: 2; } .w-band--flip .w-band__copy { order: 1; } } .w-band__num { display: flex; align-items: center; gap: 0.8rem; margin-block-end: var(--space-1); color: var(--gray-50); font: 450 var(--font-s2)/1 var(--ff-p); text-transform: uppercase; letter-spacing: 0.16em; } .w-band__num::after { content: ""; inline-size: 40px; block-size: 1px; background: rgba(255,255,255,0.28); } .w-band__h { font: 200 clamp(1.9rem, 1rem + 2.4vw, 3rem)/1.05 var(--ff-p); letter-spacing: -0.045em; margin-block-end: var(--space-1); } .w-band__h em { font: 400 1em/1 var(--ff-h); font-style: italic; color: var(--accent); } .w-band__copy p { color: #cfcbc7; max-inline-size: 46ch; } .w-checks { list-style: none; margin-block-start: var(--space-1); display: grid; gap: 0.7rem; } .w-checks li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; color: #d6d2ce; } .w-checks li::before { content: ""; margin-block-start: 0.42em; inline-size: 14px; block-size: 8px; border-inline-start: 1.5px solid var(--accent); border-block-end: 1.5px solid var(--accent); transform: rotate(-45deg); } .w-app { inline-size: 100%; --a-bg: #ffffff; --a-page: #f5f7fa; --a-fg: #0b1220; --a-muted: #5b6878; --a-line: #e6ebf2; --a-accent: var(--accent-2); --a-ok: #16a34a; background: var(--a-page); padding: clamp(0.9rem, 2.2vw, 1.6rem); border: 1px solid rgba(255,255,255,0.12); } .w-app--warm { --a-bg: #fffdfa; --a-page: #f5f1eb; --a-fg: #332d28; --a-muted: #908a83; --a-line: #e7e1d8; --a-accent: #c2410c; } .w-app--night { --a-bg: #12121a; --a-page: #0a0a0f; --a-fg: #f2f0ee; --a-muted: #8b8794; --a-line: #23232e; --a-accent: var(--accent); } .w-card { background: var(--a-bg); color: var(--a-fg); border: 1px solid var(--a-line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(11,18,32,0.04), 0 12px 32px -12px rgba(11,18,32,0.12); font: 400 0.86rem/1.5 var(--ff-p); letter-spacing: -0.01em; } .w-app--night .w-card { box-shadow: 0 12px 40px -16px rgba(0,0,0,0.8); } .w-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 0.95rem; } .w-card__eyebrow { display: block; margin-block-end: 0.3rem; font: 450 0.6rem/1 var(--ff-p); text-transform: uppercase; letter-spacing: 0.16em; color: var(--a-muted); } .w-card__title { font-weight: 500; font-size: 1.02rem; letter-spacing: -0.025em; } .w-pill { font: 450 0.66rem/1 var(--ff-p); letter-spacing: -0.005em; padding: 0.42em 0.7em; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--a-accent) 12%, transparent); color: var(--a-accent); } .w-card__rows { padding: 0 1.25rem; display: grid; gap: 0.55rem; } .w-item { display: grid; gap: 0.75rem; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; padding: 0.7rem 0.85rem; border: 1px solid var(--a-line); border-radius: 10px; } .w-item__ico { inline-size: 34px; block-size: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--a-accent) 10%, transparent); color: var(--a-accent); } .w-item__ico svg { inline-size: 17px; block-size: 17px; } .w-item__name { font-weight: 500; letter-spacing: -0.02em; } .w-item__sub { font: 400 0.7rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--a-muted); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .w-item__right { display: flex; align-items: center; gap: 0.7rem; } .w-amt { font: 500 0.86rem/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; } /* segmented control, like the real sale screen */ .w-seg { display: inline-flex; align-items: center; border: 1px solid var(--a-line); border-radius: 8px; overflow: hidden; background: var(--a-bg); } .w-seg span { padding: 0.42em 0.7em; font: 450 0.68rem/1 var(--ff-p); color: var(--a-muted); white-space: nowrap; } .w-seg span[data-on] { background: var(--a-ok); color: #fff; } .w-seg span[data-on="accent"] { background: var(--a-accent); color: #fff; } .w-card__foot { margin-block-start: 1.1rem; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.75rem; padding: 1rem 1.25rem; border-block-start: 1px solid var(--a-line); } .w-card__foot dt { font: 450 0.6rem/1 var(--ff-p); text-transform: uppercase; letter-spacing: 0.14em; color: var(--a-muted); margin-block-end: 0.35rem; } .w-card__foot dd { font-weight: 500; letter-spacing: -0.02em; } .w-card__foot dd.num { font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; } .w-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; padding: 0.9rem 1.25rem 1.15rem; border-block-start: 1px solid var(--a-line); } .w-btn { font: 450 0.8rem/1 var(--ff-p); letter-spacing: -0.015em; padding: 0.72em 1.15em; border-radius: 9px; } .w-btn--ghost { color: var(--a-muted); } .w-btn--solid { background: var(--a-accent); color: #fff; } /* progress meter inside a row (FIFO draw) */ .w-meter { grid-column: 1 / -1; block-size: 4px; border-radius: 2px; background: var(--a-line); position: relative; } .w-meter span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 2px; background: var(--a-accent); } /* key/value readout */ .w-read { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.1rem; padding: 0 1.25rem 0.25rem; } .w-read dt { font: 450 0.6rem/1.6 var(--ff-p); text-transform: uppercase; letter-spacing: 0.14em; color: var(--a-muted); } .w-read dd { font: 500 0.82rem/1.6 ui-monospace, Menlo, monospace; letter-spacing: -0.01em; } .w-read dd em { font-style: normal; font-family: var(--ff-p); font-weight: 450; font-size: 0.72rem; color: var(--a-accent); } .w-cap { margin-block-start: var(--space-0); max-inline-size: 68ch; color: var(--gray-50); font: 400 0.92rem/1.6 var(--ff-p); letter-spacing: -0.015em; text-transform: none; } /* ---------- product shots & coded UI replicas ---------- */ .w-shot { border: 1px solid rgba(255, 255, 255, 0.14); background: #060606; overflow: hidden; margin-block-start: var(--space-2); } .w-shot__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.65rem 0.85rem; border-block-end: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255,255,255,0.03); } .w-shot__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: rgba(255,255,255,0.22); } .w-shot__name { margin-inline-start: auto; font: 450 var(--font-s2)/1 var(--ff-p); text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-50); } .w-shot video, .w-shot img { inline-size: 100%; block-size: auto; display: block; } .w-shot__body { padding: clamp(1rem, 3vw, 1.75rem); } /* a light "app surface" that borrows the real product's palette */ .w-ui { --ui-bg: #f5f1eb; --ui-fg: #332d28; --ui-muted: #908a83; --ui-line: rgba(0,0,0,0.1); --ui-accent: var(--accent); background: var(--ui-bg); color: var(--ui-fg); padding: clamp(1rem, 3vw, 1.6rem); font: 400 0.85rem/1.5 var(--ff-p); } .w-ui--dark { --ui-bg: #0b0b0f; --ui-fg: #f2f0ee; --ui-muted: #8a8580; --ui-line: rgba(255,255,255,0.12); } .w-ui--cool { --ui-bg: #f7f9fc; --ui-fg: #0b1220; --ui-muted: #5b6878; --ui-line: rgba(11,18,32,0.12); } .w-ui__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block-end: 0.7rem; margin-block-end: 0.7rem; border-block-end: 1px solid var(--ui-line); } .w-ui__title { font-weight: 500; letter-spacing: -0.02em; } .w-ui__meta { color: var(--ui-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } .w-ui__row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.6rem 1rem; align-items: center; padding-block: 0.55rem; border-block-end: 1px solid var(--ui-line); } .w-ui__row:last-child { border-block-end: 0; } .w-ui__row code { font: 400 0.78rem ui-monospace, Menlo, monospace; color: var(--ui-muted); } .w-ui__qty { font-variant-numeric: tabular-nums; font-weight: 500; } .w-ui__tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.28em 0.6em; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; } .w-ui__tag--take { color: var(--ui-accent); } .w-ui__tag--rest { color: var(--ui-muted); } .w-ui__bar { grid-column: 1 / -1; block-size: 4px; background: var(--ui-line); position: relative; border-radius: 2px; } .w-ui__bar span { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--ui-accent); border-radius: 2px; } .w-ui__foot { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: 0.9rem; padding-block-start: 0.7rem; border-block-start: 1px solid var(--ui-line); color: var(--ui-muted); font-size: 0.75rem; } .w-ui__foot strong { color: var(--ui-fg); } /* key-value readout (scan result) */ .w-kv { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1.1rem; } .w-kv dt { color: var(--ui-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } .w-kv dd { font: 500 0.86rem ui-monospace, Menlo, monospace; letter-spacing: -0.01em; } .w-kv dd em { font-style: normal; color: var(--ui-accent); } /* evidence block inside a failed job row */ .w-evidence { grid-column: 1 / -1; display: grid; gap: 0.4rem; margin-block-start: 0.55rem; padding-block-start: 0.6rem; border-block-start: 1px dashed var(--a-line); } .w-evidence__log { font: 400 0.72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #dc2626; } .w-evidence__shot { display: flex; align-items: center; gap: 0.5rem; font: 400 0.72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--a-muted); } .w-evidence__thumb { inline-size: 34px; block-size: 22px; border-radius: 3px; flex: none; border: 1px solid var(--a-line); background: linear-gradient(115deg, transparent 46%, rgba(220,38,38,.5) 46%, rgba(220,38,38,.5) 54%, transparent 54%), repeating-linear-gradient(180deg, #eef1f6 0 3px, #f7f9fc 3px 6px); } /* natural-language line above a discovery result */ .w-chatline { display: grid; gap: 0.55rem; margin-block-end: var(--space-1); padding: 0.95rem 1.1rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; background: rgba(255,255,255,0.03); } .w-chatline__you { font: 300 1.02rem/1.4 var(--ff-p); letter-spacing: -0.025em; color: var(--text); } .w-chatline__parsed { font: 400 0.72rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); word-break: break-word; } /* ---------- lilac surface: rawly.io's own light palette ---------- */ .w-app--lilac { --a-bg: #ffffff; --a-page: #faf8ff; --a-fg: #17141f; --a-muted: #6b6580; --a-line: #ece7f6; --a-accent: #a855f7; --a-ok: #16a34a; } /* ---------- full app shell, rebuilt from the product's own hero ---------- */ .w-shellsec { border-block: 1px solid rgba(255,255,255,0.1); background: var(--band-bg, #060608); padding-block: clamp(var(--space-2), 6vw, var(--space-4)); overflow: hidden; } .w-shell { margin-block-start: var(--space-2); border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 60px 140px -50px color-mix(in srgb, var(--accent) 70%, transparent); color: #17141f; font: 400 0.82rem/1.5 var(--ff-p); letter-spacing: -0.015em; } .w-shell__chrome { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.9rem; border-block-end: 1px solid #f0edf7; background: #fbfaff; } .w-shell__chrome i { inline-size: 9px; block-size: 9px; border-radius: 50%; display: block; } .w-shell__url { margin-inline: auto; font: 400 0.7rem/1 ui-monospace, Menlo, monospace; color: #8b849c; background: #fff; border: 1px solid #f0edf7; border-radius: 6px; padding: 0.4em 0.9em; } .w-shell__body { display: grid; grid-template-columns: 1fr; } @media (min-width: 800px) { .w-shell__body { grid-template-columns: 208px 1fr; } } .w-shell__side { border-inline-end: 1px solid #f0edf7; padding: 0.9rem 0.7rem; display: grid; align-content: start; gap: 0.15rem; background: #fdfcff; } .w-shell__brand { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.4rem 0.9rem; font-weight: 600; letter-spacing: -0.03em; font-size: 0.95rem; } .w-shell__mark { inline-size: 22px; block-size: 22px; border-radius: 6px; flex: none; background: linear-gradient(140deg, #a855f7, #0055ff); } .w-shell__grp { padding: 0.9rem 0.45rem 0.25rem; font: 500 0.6rem/1 var(--ff-p); letter-spacing: 0.06em; color: #9a94a8; } .w-nav { display: flex; align-items: center; gap: 0.55rem; padding: 0.46rem 0.5rem; border-radius: 8px; color: #7e7e8c; } .w-nav[data-active] { background: #fff; color: #17141f; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .w-nav__ico { inline-size: 15px; block-size: 15px; flex: none; opacity: .75; } .w-nav[data-active] .w-nav__ico { opacity: 1; } .w-nav__badge { margin-inline-start: auto; min-inline-size: 18px; text-align: center; background: #a855f7; color: #fff; border-radius: 999px; font: 500 0.62rem/1.6 var(--ff-p); } .w-credits { margin-block-start: 1.1rem; padding: 0.7rem; border: 1px solid #f0edf7; border-radius: 10px; background: #fff; } .w-credits__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .w-credits__n { font-weight: 600; font-size: 0.78rem; } .w-credits__s { color: #9a94a8; font-size: 0.68rem; } .w-credits__btn { display: block; text-align: center; margin-block-start: 0.6rem; border: 1px solid #ece7f6; border-radius: 7px; padding: 0.42em; font-size: 0.72rem; font-weight: 500; } .w-shell__main { position: relative; min-block-size: 340px; padding: 1.1rem 1.2rem 1.4rem; display: grid; align-content: start; } .w-shell__aurora { position: absolute; inset: 12% 8% 18%; z-index: 0; pointer-events: none; background: radial-gradient(50% 50% at 45% 45%, rgba(168,85,247,.28), transparent 70%), radial-gradient(40% 45% at 62% 58%, rgba(0,85,255,.18), transparent 70%); filter: blur(26px); } .w-shell__head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .w-shell__h { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.03em; } .w-shell__sub { color: #8b849c; font-size: 0.76rem; } .w-shell__cta { background: #17141f; color: #fff; border-radius: 9px; padding: 0.55em 0.9em; font-size: 0.76rem; font-weight: 500; white-space: nowrap; } .w-shell__bubble { position: relative; z-index: 1; justify-self: end; margin-block-start: 2.2rem; background: #a855f7; color: #fff; border-radius: 999px; padding: 0.5em 1em; font-size: 0.78rem; } .w-shell__inputwrap { position: relative; z-index: 1; margin-block-start: auto; padding-block-start: 2.4rem; } .w-shell__input { display: flex; align-items: center; gap: 0.65rem; background: #fff; border: 1px solid #ece7f6; border-radius: 12px; padding: 0.6rem 0.7rem; box-shadow: 0 8px 30px -14px rgba(23,20,31,.3); } .w-shell__spark { inline-size: 26px; block-size: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #a855f7, #7c3aed); } .w-shell__spark svg { inline-size: 14px; block-size: 14px; } .w-shell__typed { color: #17141f; font-size: 0.82rem; } .w-shell__caret { display: inline-block; inline-size: 1.5px; block-size: 1em; background: #a855f7; vertical-align: -0.15em; margin-inline-start: 1px; animation: w-blink 1.05s steps(1) infinite; } @keyframes w-blink { 50% { opacity: 0 } } .w-shell__send { margin-inline-start: auto; inline-size: 28px; block-size: 28px; border-radius: 8px; display: grid; place-items: center; background: #f4f0fd; color: #a855f7; flex: none; } .w-shell__send svg { inline-size: 14px; block-size: 14px; } @media (prefers-reduced-motion: reduce) { .w-shell__caret { animation: none } } /* ---------- filmstrip: a rendered frame sequence ---------- */ .w-strip { display: grid; gap: 0.7rem; } .w-strip__row { display: flex; gap: 4px; align-items: stretch; } .w-strip__f { flex: 1; aspect-ratio: 3/4; border-radius: 3px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); position: relative; } .w-strip__f[data-on] { border-color: var(--accent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 35%, transparent), rgba(255,255,255,.04)); } .w-strip__f[data-gap] { flex: 0 0 18px; border: 0; background: none; display: grid; place-items: center; color: var(--gray-50); font: 400 .7rem/1 var(--ff-p); } .w-strip__scale { display: flex; justify-content: space-between; color: var(--gray-50); font: 400 .68rem/1 ui-monospace, Menlo, monospace; } .w-strip__bar { block-size: 3px; border-radius: 2px; background: rgba(255,255,255,.14); position: relative; } .w-strip__bar span { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 46%; background: var(--accent); border-radius: 2px; } /* ---------- signal chain ---------- */ .w-chain { display: grid; gap: 0.45rem; margin-block-start: var(--space-1); } .w-chain__s { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; padding: 0.6rem 0.75rem; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(255,255,255,.02); } .w-chain__n { color: var(--accent); font: 500 .68rem/1 ui-monospace, Menlo, monospace; } .w-chain__t { font: 400 .82rem/1.4 var(--ff-p); letter-spacing: -.015em; } .w-chain__t code { font: 400 .76rem ui-monospace, Menlo, monospace; color: #cfcbc7; } .w-chain__m { color: var(--gray-50); font: 400 .68rem/1 ui-monospace, Menlo, monospace; white-space: nowrap; } .w-chain__arrow { justify-self: center; color: var(--gray-50); font-size: .8rem; line-height: 1; } /* ---------- artist / drop frame player (from guju's ArtistHeroAnimation) ---------- */ .w-seq { position: relative; display: grid; place-items: center; } .w-seq__glow { position: absolute; inline-size: 60%; block-size: 60%; background: rgba(255,255,255,.05); filter: blur(80px); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1s ease-in; } .w-seq[data-ready] .w-seq__glow { opacity: .3; } .w-seq__img { position: relative; z-index: 1; inline-size: 100%; block-size: 100%; object-fit: contain; opacity: 0; transition: opacity .5s ease-out; } .w-seq[data-ready] .w-seq__img { opacity: 1; } .w-seq__load { position: absolute; z-index: 2; font: 400 .68rem/1 ui-monospace, Menlo, monospace; color: var(--gray-50); } .w-seq[data-ready] .w-seq__load { display: none; } /* ---------- shop cut: the real product column ---------- */ .w-shop { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); } @media (min-width: 620px) { .w-shop { grid-template-columns: 1fr 1fr; } } .w-shop__col { position: relative; background: #000; color: #fff; min-block-size: 420px; padding: 1.4rem; display: grid; align-content: end; overflow: hidden; } .w-shop__grid { position: absolute; inset: 0; opacity: .03; pointer-events: none; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 40px 40px; } .w-shop__model { position: absolute; inset: 0; display: grid; place-items: center; padding: 3.2rem; opacity: .8; transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .5s ease; } .w-shop__col:hover .w-shop__model { transform: scale(1.1); opacity: 1; } .w-shop__badge { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; padding: 0.5rem 1.4rem; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5); backdrop-filter: blur(10px); opacity: .6; transition: all .5s ease; } .w-shop__col:hover .w-shop__badge { opacity: 1; transform: translate(-50%,-50%) scale(1.1); } .w-shop__badge span { font: 400 .74rem/1 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .3em; color: #fff; animation: w-pulse 2s ease-in-out infinite; } @keyframes w-pulse { 50% { opacity: .45 } } .w-shop__info { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; border-block-start: 1px solid rgba(255,255,255,.1); padding-block-start: 1rem; } .w-shop__name { font: 700 clamp(1.2rem,2.2vw,1.75rem)/1.05 var(--ff-p); text-transform: uppercase; letter-spacing: -.03em; } .w-shop__cat { display: block; margin-block-start: .3rem; font: 400 .66rem/1 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.5); } .w-shop__price { font: 500 1rem/1 var(--ff-p); opacity: .5; white-space: nowrap; } .w-shop__hover { position: absolute; inset: 0; background: rgba(255,255,255,.05); opacity: 0; transition: opacity .5s ease; pointer-events: none; } .w-shop__col:hover .w-shop__hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .w-shop__model, .w-shop__badge { transition: none } .w-shop__badge span { animation: none } } /* inline code inside prose, checks and captions */ .w-prose code, .w-checks code, .w-cap code, .w-band__copy code { font: 400 0.88em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; padding: 0.12em 0.38em; border-radius: 4px; background: rgba(255, 255, 255, 0.07); color: #e6e2dd; white-space: nowrap; } .w-checks li { align-items: baseline; } /* ---------- hero sculpture: partial turn under the title ---------- */ .w-herofig { position: relative; display: grid; place-items: center; padding-block: clamp(var(--space-1), 4vw, var(--space-3)); } .w-herofig .w-seq { inline-size: min(560px, 82vw); aspect-ratio: 1/1; } .w-herofig__cap { margin-block-start: var(--space-s1); color: var(--gray-50); font: 450 var(--font-s2)/1.6 var(--ff-p); text-transform: uppercase; letter-spacing: 0.14em; text-align: center; } @media (min-width: 1000px) { .w-hero__grid--fig { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; } .w-hero__grid--fig .w-chips { align-self: end; } } /* ---------- closing platform slab ---------- */ .w-slab { border-block-start: 1px solid rgba(255,255,255,.1); background: var(--band-bg, #060608); padding-block: clamp(var(--space-3), 8vw, var(--space-4)); } .w-slab__lead { font: 200 clamp(2rem, 1rem + 3.2vw, 3.6rem)/1.03 var(--ff-p); letter-spacing: -.05em; max-inline-size: 18ch; margin-block-end: var(--space-2); } .w-slab__lead em { font: 400 1em/1 var(--ff-h); font-style: italic; color: var(--accent); } .w-pillars { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); } .w-pillar { background: var(--band-bg, #060608); padding: var(--space-1) var(--space-1) var(--space-2); } .w-pillar__n { color: var(--gray-50); font: 450 var(--font-s2)/1 var(--ff-p); letter-spacing: .14em; text-transform: uppercase; } .w-pillar__t { display: block; margin-block: 0.7rem 0.5rem; font: 300 1.28rem/1.15 var(--ff-p); letter-spacing: -.035em; } .w-pillar p { color: #cfcbc7; font-size: 0.92rem; } .w-pillar__meta { display: block; margin-block-start: 0.8rem; color: var(--accent); font: 400 .72rem/1.5 ui-monospace, Menlo, monospace; } /* ---------- technical plate: an authored 3D asset, presented as a drawing ---------- */ .w-plate { position: relative; border-block: 1px solid rgba(255,255,255,.1); background: var(--band-bg, #060608); overflow: hidden; } .w-plate__inner { position: relative; aspect-ratio: 16 / 10; max-block-size: 88vh; margin-inline: auto; /* height cap narrows the box — keep it centred */ display: grid; place-items: center; overflow: hidden; } @media (max-width: 720px) { .w-plate__inner { aspect-ratio: 4 / 5; } } /* blueprint grid, same 40px module the studio site uses */ .w-plate__grid { position: absolute; inset: 0; opacity: .05; pointer-events: none; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 40px 40px; } /* dashed centre crosshair */ .w-plate__cross { position: absolute; inset: 0; pointer-events: none; opacity: .32; } .w-plate__cross::before, .w-plate__cross::after { content: ""; position: absolute; background: none; border-color: rgba(255,255,255,.55); border-style: dashed; } .w-plate__cross::before { inset-inline: 6%; inset-block-start: 50%; border-block-start-width: 1px; } .w-plate__cross::after { inset-block: 8%; inset-inline-start: 50%; border-inline-start-width: 1px; } /* the render itself — scaled in so it reads close */ .w-plate .w-seq { position: relative; z-index: 1; inline-size: min(720px, 88%); aspect-ratio: 1/1; transform: scale(1.34); } @media (max-width: 720px) { .w-plate .w-seq { transform: scale(1.15); inline-size: 96%; } } /* the sculpture sits ~3.6% left of centre inside the source frame (measured across the sequence) — nudge it back so it lands on the crosshair */ .w-plate .w-seq__img { transform: translateX(3.6%); } .w-plate .w-seq__glow { transform: translateX(3.6%); } /* corner brackets */ .w-plate__b { position: absolute; inline-size: 26px; block-size: 26px; border: 0 solid rgba(255,255,255,.5); pointer-events: none; } .w-plate__b[data-c="tl"] { inset-block-start: 22px; inset-inline-start: 22px; border-block-start-width: 1px; border-inline-start-width: 1px; } .w-plate__b[data-c="tr"] { inset-block-start: 22px; inset-inline-end: 22px; border-block-start-width: 1px; border-inline-end-width: 1px; } .w-plate__b[data-c="bl"] { inset-block-end: 22px; inset-inline-start: 22px; border-block-end-width: 1px; border-inline-start-width: 1px; } .w-plate__b[data-c="br"] { inset-block-end: 22px; inset-inline-end: 22px; border-block-end-width: 1px; border-inline-end-width: 1px; } /* annotations */ .w-plate__tag { position: absolute; z-index: 3; pointer-events: none; font: 450 var(--font-s2)/1.5 var(--ff-p); text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.72); } .w-plate__tag b { display: block; color: #fff; font-weight: 500; letter-spacing: .1em; } .w-plate__tag[data-p="tl"] { inset-block-start: 34px; inset-inline-start: 60px; } .w-plate__tag[data-p="tr"] { inset-block-start: 34px; inset-inline-end: 60px; text-align: end; } .w-plate__tag[data-p="bl"] { inset-block-end: 34px; inset-inline-start: 60px; } .w-plate__tag[data-p="br"] { inset-block-end: 34px; inset-inline-end: 60px; text-align: end; } @media (max-width: 720px) { .w-plate__tag { font-size: 0.52rem; letter-spacing: .12em; } .w-plate__tag[data-p="tl"], .w-plate__tag[data-p="bl"] { inset-inline-start: 40px; } .w-plate__tag[data-p="tr"], .w-plate__tag[data-p="br"] { inset-inline-end: 40px; } } /* tick ruler down the left edge */ .w-plate__ticks { position: absolute; inset-block: 12%; inset-inline-start: 34px; inline-size: 12px; z-index: 2; display: grid; align-content: space-between; opacity: .5; pointer-events: none; } .w-plate__ticks span { display: block; block-size: 1px; background: rgba(255,255,255,.6); inline-size: 6px; } .w-plate__ticks span:nth-child(odd) { inline-size: 12px; } /* ---------- claim rail: tracefield's verdict rows ---------- */ .w-claims { display: grid; gap: 0.4rem; } .w-claim { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: baseline; padding: 0.7rem 0.85rem; border: 1px solid var(--a-line, rgba(255,255,255,.14)); border-radius: 9px; background: rgba(255,255,255,.02); } .w-claim__k { font: 400 0.74rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gray-50); } .w-claim__v { font: 500 0.9rem/1.3 var(--ff-p); letter-spacing: -.02em; } .w-claim__badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: .4rem; padding: .38em .7em; border-radius: 999px; white-space: nowrap; font: 450 .66rem/1 var(--ff-p); letter-spacing: .04em; text-transform: uppercase; } .w-claim__badge::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; } .w-claim[data-v="ok"] { border-color: rgba(34,224,143,.32); } .w-claim[data-v="ok"] .w-claim__badge { color: #22e08f; background: rgba(34,224,143,.12); } .w-claim[data-v="bad"] { border-color: rgba(255,92,114,.45); background: rgba(255,92,114,.05); } .w-claim[data-v="bad"] .w-claim__badge { color: #ff5c72; background: rgba(255,92,114,.14); } .w-claim__src { grid-column: 1 / -1; font: 400 .7rem/1.5 ui-monospace, Menlo, monospace; color: var(--gray-50); } .w-claim[data-v="bad"] .w-claim__src { color: #ff8f9f; } /* the page with its highlight boxes */ .w-doc { position: relative; aspect-ratio: 3/4; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: linear-gradient(180deg, #16161a, #0d0d10); overflow: hidden; } .w-doc__line { position: absolute; block-size: 6px; border-radius: 2px; background: rgba(255,255,255,.09); } .w-doc__box { position: absolute; border: 1.5px solid #22e08f; border-radius: 3px; background: rgba(34,224,143,.14); box-shadow: 0 0 0 3px rgba(34,224,143,.08); } .w-doc__miss { position: absolute; inset-inline: 12%; inset-block-end: 8%; border: 1px dashed rgba(255,92,114,.6); border-radius: 5px; padding: .55rem .7rem; text-align: center; font: 400 .68rem/1.4 ui-monospace, Menlo, monospace; color: #ff8f9f; background: rgba(255,92,114,.06); } /* ============================================================ tracefield mocks — rebuilt from the product's own landing ============================================================ */ .w-tf { --tf-ink: #e8e6e1; --tf-faint: #85837f; --tf-rule: rgba(255,255,255,.11); --tf-paper: #0f1010; --tf-raised: #151616; --tf-ok: #22e08f; --tf-ok-soft: rgba(34,224,143,.14); --tf-bad: #ff5c72; --tf-bad-soft: rgba(255,92,114,.12); border: 1px solid var(--tf-rule); border-radius: 12px; background: var(--tf-paper); color: var(--tf-ink); overflow: hidden; } .w-tf__bar { display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; border-block-end: 1px solid var(--tf-rule); } .w-tf__bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: rgba(255,255,255,.18); } .w-tf__url { margin-inline-start: .6rem; padding: .3em .7em; border-radius: 6px; border: 1px solid var(--tf-rule); font: 400 .68rem/1 ui-monospace, Menlo, monospace; color: var(--tf-faint); } .w-tf__body { padding: 1.1rem; display: grid; gap: .65rem; } .w-tf__foot { text-align: center; padding-block-start: .3rem; font: 400 .66rem/1.5 ui-monospace, Menlo, monospace; color: var(--tf-faint); } /* 01 extract — claim cards holding their quote */ .w-tf__claim { border: 1px solid var(--tf-rule); border-radius: 9px; background: var(--tf-raised); padding: .8rem .9rem; } .w-tf__claim-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .w-tf__name { font: 400 .66rem/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; color: var(--tf-faint); } .w-tf__flag { font: 400 .66rem/1 ui-monospace, Menlo, monospace; color: var(--tf-ok); white-space: nowrap; } .w-tf__flag[data-bad] { color: var(--tf-bad); } .w-tf__val { margin-block-start: .35rem; font: 400 1.05rem/1.3 ui-monospace, Menlo, monospace; } .w-tf__quote { display: inline-block; margin-block-start: .55rem; padding: .3em .55em; border-radius: 4px; background: var(--tf-ok-soft); color: var(--tf-ok); font: 400 .68rem/1.4 ui-monospace, Menlo, monospace; } /* document crop with the blank row called out */ .w-tf__crop { position: relative; border-radius: 8px; overflow: hidden; background: #f7f6f3; color: #1a1a18; padding: .9rem 1rem; display: grid; gap: .5rem; font: 400 .8rem/1.5 ui-monospace, Menlo, monospace; } .w-tf__crow { display: flex; justify-content: space-between; gap: 1rem; color: #55534e; } .w-tf__crow b { font-weight: 600; color: #1a1a18; } .w-tf__crow[data-miss] { border: 1.5px dashed var(--tf-bad); border-radius: 5px; background: rgba(255,92,114,.09); padding: .45rem .6rem; margin-block-start: .2rem; } /* the review-agent case file */ .w-tf__hud { margin-block-start: -1.6rem; margin-inline: 1.1rem 0; position: relative; z-index: 2; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: #0c0d0d; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0,0,0,.9); } .w-tf__hud-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .75rem; border-block-end: 1px solid rgba(255,255,255,.09); font: 400 .64rem/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: var(--tf-ok); } .w-tf__hud-top span:last-child { color: var(--tf-faint); letter-spacing: 0; } .w-tf__trace { display: grid; gap: .3rem; padding: .6rem .75rem; } .w-tf__trace div { display: flex; justify-content: space-between; gap: 1rem; font: 400 .68rem/1.5 ui-monospace, Menlo, monospace; } .w-tf__trace i { font-style: normal; color: var(--tf-ok); inline-size: 1rem; flex: none; } .w-tf__trace em { font-style: normal; color: var(--tf-faint); text-align: end; } .w-tf__verdict { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .75rem; background: var(--tf-bad-soft); font: 400 .7rem/1.4 ui-monospace, Menlo, monospace; color: var(--tf-bad); } .w-tf__verdict em { font-style: normal; color: #c9787f; } /* review actions */ .w-tf__why { margin-block-start: .45rem; font: 400 .72rem/1.5 var(--ff-p); color: var(--tf-bad); } .w-tf__acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .7rem; } .w-tf__act { padding: .5em .85em; border-radius: 7px; border: 1px solid var(--tf-rule); font: 450 .74rem/1 var(--ff-p); color: var(--tf-ink); } .w-tf__act[data-primary] { border-color: rgba(255,92,114,.55); color: var(--tf-bad); } .w-tf__claim[data-bad] { border-color: rgba(255,92,114,.45); background: rgba(255,92,114,.05); } /* 04 export table */ .w-tf__table { inline-size: 100%; border-collapse: collapse; font: 400 .74rem/1.6 ui-monospace, Menlo, monospace; } .w-tf__table th { text-align: start; font-weight: 400; letter-spacing: .1em; color: var(--tf-faint); font-size: .62rem; padding: .5rem .6rem; border-block-end: 1px solid var(--tf-rule); } .w-tf__table td { padding: .6rem; border-block-end: 1px solid var(--tf-rule); } .w-tf__table tr:last-child td { border-block-end: 0; } .w-tf__table tr[data-held] td { color: var(--tf-faint); } .w-tf__table .po { color: var(--tf-ok); } /* ---------- surface ledger: what was worked on, and in what ---------- */ .w-surf { display: grid; gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); } .w-surf__r { display: grid; gap: .3rem 1.2rem; align-items: baseline; grid-template-columns: 1fr; padding: .95rem 1.1rem; background: var(--band-bg, #060608); } @media (min-width: 700px) { .w-surf__r { grid-template-columns: 8.5rem 1fr auto; } } .w-surf__k { font: 500 .82rem/1.4 var(--ff-p); letter-spacing: -.02em; } .w-surf__s { font: 400 .74rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gray-50); } .w-surf__n { font: 400 .78rem/1.5 var(--ff-p); color: #cfcbc7; } @media (min-width: 700px) { .w-surf__n { grid-column: 2; } .w-surf__s { grid-column: 3; text-align: end; white-space: nowrap; } }