/** * Solumbra / Websites — sites.solumbra.ai * * The brand system is not re-derived here. Tokens, the graded rim, the type * ladder and the luminous-form ground all come from * SOLUMBRA-OS/brand-assets/brand-strategy/ and mirror * ../solumbra-site/styles/brand.css. If the two ever disagree, brand.css and * the brand-strategy docs win. * * Two rules govern everything: * Visuals carry calm. Copy carries urgency. * Emphasis comes from scale. Weight and colour stay back. * * The one thing this file adds over brand.css is motion. Every animated * property is transform or opacity, never layout, and every one of them is * switched off under prefers-reduced-motion and under automation (see app.js, * which sets data-static on ) so screenshots are deterministic. */ @font-face { font-family: 'Inter'; src: url('fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Dark mode — the four values. */ --void: #07090b; --onyx: #101418; --sheen: #8a9c9c; --ember: #a6631d; /* Text on void is white, not bone. */ --w-95: rgba(255, 255, 255, 0.95); --w-68: rgba(255, 255, 255, 0.68); --w-46: rgba(255, 255, 255, 0.46); --w-22: rgba(255, 255, 255, 0.22); --glass-fill: rgba(255, 255, 255, 0.1); --glass-fill-lo: rgba(255, 255, 255, 0.05); --glass-blur: 20px; /* The graded rim. One light direction for every surface in the build. */ --rim-base: rgba(255, 255, 255, 0.12); --rim-lit: rgba(255, 255, 255, 0.58); --rim-return: rgba(255, 255, 255, 0.26); --radius: 23px; --radius-sm: 14px; --font: 'Inter', 'Inter Variable', 'Helvetica Now Display', 'Helvetica Neue', -apple-system, Arial, sans-serif; --measure: 62ch; --gutter: clamp(20px, 5vw, 64px); --maxw: 1240px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { background: var(--void); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100vh; background: var(--void); color: var(--w-95); font-family: var(--font); font-size: 16px; line-height: 1.6; font-weight: 400; font-variation-settings: 'opsz' 18; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /** * The ground is never a flat fill. One large soft luminous form crosses the * frame, brightest at --sheen, with exactly one --ember buried inside it. It * is fixed, so panes pass across the light/black boundary as the page scrolls * — that contrast is what makes the glass read as a material. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( 68% 52% at 18% 10%, rgba(138, 156, 156, 0.2), rgba(138, 156, 156, 0.055) 42%, transparent 72% ), radial-gradient(30% 24% at 26% 20%, rgba(166, 99, 29, 0.17), transparent 66%), radial-gradient(52% 42% at 92% 88%, rgba(138, 156, 156, 0.06), transparent 72%); } /* Grain. Keeps the ground off a flat value. */ body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Type ───────────────────────────────────────────────────────────── Display sits at 2.5x the body or more with nothing in between. A 24px "medium heading" is the failure mode this ladder exists to prevent. */ .display { font-size: clamp(38px, 5.2vw, 58px); font-weight: 400; font-variation-settings: 'opsz' 32; letter-spacing: -0.024em; line-height: 1.04; color: var(--w-95); margin: 0; } .headline { font-size: clamp(32px, 5vw, 46px); font-weight: 500; font-variation-settings: 'opsz' 32; letter-spacing: -0.02em; line-height: 1.05; color: var(--w-95); margin: 0; } .deck { font-size: 19px; font-weight: 400; font-variation-settings: 'opsz' 20; letter-spacing: -0.005em; line-height: 1.45; color: var(--w-68); max-width: var(--measure); margin: 0; } .body-t { font-size: 16px; line-height: 1.6; color: var(--w-68); max-width: var(--measure); margin: 0; } .caption { font-size: 13px; font-variation-settings: 'opsz' 14; letter-spacing: 0.005em; color: var(--w-68); line-height: 1.5; margin: 0; } /* The brand's signature move. The content must be true. */ .spec { display: block; font-size: 10px; font-weight: 500; font-variation-settings: 'opsz' 14; letter-spacing: 0.18em; text-transform: uppercase; color: var(--w-46); line-height: 1.4; margin: 0; } .tabular { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; font-weight: 500; } /* ── Glass ──────────────────────────────────────────────────────────── The graded rim is two zero-blur inset shadows on opposite diagonals over a base ring. Not mask-composite: Chrome emits that as a soft mask and Quartz composites soft masks as opaque grey rectangles. */ .pane { position: relative; z-index: 1; background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%); backdrop-filter: blur(var(--glass-blur)) saturate(120%); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rim-base), inset 1px 1px 0 0 var(--rim-lit), inset -1px -1px 0 0 var(--rim-return), inset 0 -10px 16px -12px rgba(0, 0, 0, 0.55); } .pane.lo { background: var(--glass-fill-lo); -webkit-backdrop-filter: blur(12px) saturate(115%); backdrop-filter: blur(12px) saturate(115%); } @supports (corner-shape: squircle) { .pane { corner-shape: squircle; } } /* ── Controls ───────────────────────────────────────────────────────── Buttons are glass pills, never a coloured fill. The brand has no brand colour and a filled button would invent one. */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--glass-fill); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--rim-base), inset 1px 1px 0 0 var(--rim-lit), inset -1px -1px 0 0 var(--rim-return); color: var(--w-95); font-family: var(--font); font-size: 14px; font-weight: 500; font-variation-settings: 'opsz' 14; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 180ms var(--ease), transform 180ms var(--ease); } .pill:hover { background: rgba(255, 255, 255, 0.16); } .pill:active { transform: translateY(1px); } .pill.quiet { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--rim-base); color: var(--w-68); } .pill.quiet:hover { background: rgba(255, 255, 255, 0.06); color: var(--w-95); } .pill .arrow { transition: transform 220ms var(--ease); } .pill:hover .arrow { transform: translateX(3px); } :focus-visible { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 3px; border-radius: 4px; } /* ── Layout ───────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; } section { position: relative; z-index: 1; } .band { padding: clamp(84px, 12vh, 148px) 0; } .band-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(40px, 6vw, 64px); max-width: 46ch; } .rule { height: 1px; width: 100%; background: linear-gradient( to right, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) ); border: 0; margin: 0; } /* ── Scroll progress ──────────────────────────────────────────────── */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient( to right, rgba(255, 255, 255, 0.5), rgba(138, 156, 156, 0.85) ); pointer-events: none; } /* ── Nav ──────────────────────────────────────────────────────────── */ .nav { position: fixed; top: 14px; left: 50%; z-index: 50; width: min(calc(100% - 28px), 1180px); transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 9px 9px 18px; border-radius: 999px; transition: transform 380ms var(--ease), opacity 260ms var(--ease), background 300ms var(--ease); } .nav[data-hidden='true'] { transform: translateX(-50%) translateY(-140%); opacity: 0; } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--w-95); } .brand img { width: 30px; height: 30px; object-fit: contain; display: block; } .brand span { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-links a { font-size: 14px; color: var(--w-68); text-decoration: none; transition: color 180ms var(--ease); } .nav-links a:hover { color: var(--w-95); } @media (max-width: 900px) { .nav-links { display: none; } .nav { padding-left: 16px; } } /* ── Hero ─────────────────────────────────────────────────────────── */ .hero { padding: clamp(132px, 20vh, 190px) 0 clamp(70px, 10vh, 110px); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 68px); align-items: center; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } } .hero-copy { display: flex; flex-direction: column; gap: 26px; } .hero .display { max-width: 17ch; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .cta-note { font-size: 13px; color: var(--w-46); max-width: 26ch; line-height: 1.45; } /* The browser that cycles the real work. Proof at the top of the page, before a single claim is made. */ .viewer { position: relative; padding: 12px; border-radius: var(--radius); } .viewer-chrome { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px; } .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); flex: none; } .viewer-url { flex: 1; min-width: 0; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: var(--w-46); letter-spacing: 0.02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .viewer-stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: #0b0d10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); } .viewer-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.04); transition: opacity 900ms var(--ease), transform 1600ms var(--ease); } .viewer-stage img[data-on='true'] { opacity: 1; transform: scale(1); } .viewer-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 4px 2px; } .viewer-tabs { display: flex; gap: 6px; } .viewer-tabs button { width: 26px; height: 3px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.16); cursor: pointer; transition: background 260ms var(--ease); } .viewer-tabs button[aria-selected='true'] { background: rgba(255, 255, 255, 0.72); } /* ── Marquee ──────────────────────────────────────────────────────── */ .marquee { position: relative; overflow: hidden; padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid rgba(255, 255, 255, 0.07); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; width: max-content; gap: 46px; animation: slide 46s linear infinite; } .marquee-track span { font-size: 13px; letter-spacing: 0.02em; color: var(--w-46); white-space: nowrap; display: inline-flex; align-items: center; gap: 46px; } .marquee-track span::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); } @keyframes slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ── Work ─────────────────────────────────────────────────────────── */ .work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 30px); } @media (max-width: 860px) { .work-grid { grid-template-columns: 1fr; } } .work-card { display: block; text-decoration: none; color: inherit; padding: 12px; border-radius: var(--radius); transform-style: preserve-3d; transition: transform 320ms var(--ease); will-change: transform; } .work-shot { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: #0b0d10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); } .work-shot img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; transition: transform 4200ms var(--ease); transform: translate3d(0, 0, 0); } /* On hover the shot scrolls down the page rather than sitting as a still. The captures are a fixed 2:3 and the window is 16:10, so the travel is (imageHeight - windowHeight) expressed against the image's own height: 100% - (0.625 / 1.5) = 58.333%. Both ratios are fixed in this build, so the number is safe to hard code; if either changes, recompute it. */ .work-card:hover .work-shot img, .work-card:focus-visible .work-shot img { transform: translate3d(0, -58.333%, 0); } .work-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(7, 9, 11, 0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--w-68); } .work-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--sheen); display: block; flex: none; } .work-badge.live i { background: #6f9e7a; } .work-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 16px 6px 4px; } .work-foot h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.012em; margin: 0 0 3px; color: var(--w-95); } .work-open { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--w-46); white-space: nowrap; transition: color 200ms var(--ease); } .work-card:hover .work-open { color: var(--w-95); } /* ── Before and after ─────────────────────────────────────────────── */ .compare { position: relative; border-radius: var(--radius); overflow: hidden; padding: 0; touch-action: pan-y; user-select: none; aspect-ratio: 2 / 1; } @media (max-width: 760px) { .compare { aspect-ratio: 3 / 4; } } /* Both sides carry an explicit z-index, and that is load bearing. clip-path makes .compare-after a stacking context, so without a z-index here the before side's .listing (z-index 1) escapes into the parent stacking context and paints on top of the whole after side. The result is both states visible at once, which is what shipped the first time. */ .compare-side { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: clamp(22px, 4vw, 54px); } .compare-after { z-index: 2; clip-path: inset(0 0 0 var(--split, 50%)); } .compare-label { position: absolute; top: 16px; z-index: 4; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--w-46); pointer-events: none; } .compare-label.l { left: 18px; } .compare-label.r { right: 18px; } /* The two labels sit on one line and nearly touch at 390px. Below that they would collide, so the tracking and size come down rather than the text. */ @media (max-width: 430px) { .compare-label { font-size: 9px; letter-spacing: 0.1em; } .compare-label.l { left: 12px; } .compare-label.r { right: 12px; } } .compare-handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 1px; z-index: 5; background: rgba(255, 255, 255, 0.5); pointer-events: none; } .compare-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--rim-base), inset 1px 1px 0 0 var(--rim-lit); } /* The invisible range input is the real control. It sits above everything and carries keyboard support for free. */ .compare input[type='range'] { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; } .compare input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 100%; cursor: ew-resize; } .compare input[type='range']::-moz-range-thumb { width: 56px; height: 100%; border: 0; background: transparent; cursor: ew-resize; } /* The two mock listings inside the comparison. Positioned so they paint above .compare-bg, which is absolute and would otherwise sit on top. */ .listing { position: relative; z-index: 1; width: min(540px, 100%); padding: 24px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .listing-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .listing-avatar { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); flex: none; } .listing-name { font-size: 15px; font-weight: 500; color: var(--w-95); line-height: 1.3; } .listing-sub { font-size: 12px; color: var(--w-46); } .listing-actions { display: flex; gap: 8px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12px; color: var(--w-68); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .chip.dead { color: rgba(255, 255, 255, 0.26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); text-decoration: line-through; } .chip.on { color: var(--w-95); background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px var(--rim-base), inset 1px 1px 0 0 var(--rim-lit); } /* The ground behind the card is the whole point of the comparison: black and empty on the left, lit on the right. It carries the difference so the card itself only has to change one chip. */ .compare-bg { position: absolute; inset: 0; pointer-events: none; } .compare-bg.before { background: #05070a; } .compare-bg.after { background: radial-gradient( 80% 70% at 66% 34%, rgba(138, 156, 156, 0.5), rgba(138, 156, 156, 0.16) 44%, transparent 76% ), radial-gradient(30% 24% at 78% 52%, rgba(166, 99, 29, 0.34), transparent 68%), #05070a; } /* The block under the chips is what makes the difference readable no matter where the handle sits. Both states occupy the same box and the same height, so the two halves still line up across the seam. */ .listing-result { margin-top: 16px; height: 86px; border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 8px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } /* Left aligned, not centred: centred text would sit exactly under the handle at the default split and read as if it were bleeding across the seam. */ .listing-result.empty { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 9px 14px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); } .listing-result.empty span { font-size: 12px; color: rgba(255, 255, 255, 0.26); letter-spacing: 0.02em; } .listing-bar { height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; padding: 0 10px; font-size: 10.5px; color: var(--w-68); letter-spacing: 0.02em; flex: none; } .listing-strip { flex: 1; border-radius: 6px; background: linear-gradient( 115deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08) 46%, rgba(166, 99, 29, 0.22) ); } .compare-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 42px); margin-top: 22px; } @media (max-width: 700px) { .compare-notes { grid-template-columns: 1fr; } } .compare-notes strong { font-weight: 500; color: var(--w-95); } /* ── The eight things ─────────────────────────────────────────────── */ .eight { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(30px, 5vw, 76px); align-items: start; } @media (max-width: 900px) { .eight { grid-template-columns: 1fr; } } .eight-sticky { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 20px; } @media (max-width: 900px) { .eight-sticky { position: static; } } .counter { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; } .counter .now { font-size: 62px; font-weight: 400; font-variation-settings: 'opsz' 32; letter-spacing: -0.03em; line-height: 1; color: var(--w-95); } .counter .of { font-size: 15px; color: var(--w-46); } .eight-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; } .eight-item { padding: 22px 24px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); transition: background 420ms var(--ease), box-shadow 420ms var(--ease), transform 420ms var(--ease); } .eight-item[data-active='true'] { background: rgba(255, 255, 255, 0.075); box-shadow: inset 0 0 0 1px var(--rim-base), inset 1px 1px 0 0 rgba(255, 255, 255, 0.4); } .eight-item .num { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; color: var(--w-46); font-variant-numeric: tabular-nums; } .eight-item h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.012em; margin: 5px 0 7px; color: var(--w-95); } .eight-item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--w-68); } .eight-item .eg { margin-top: 9px; font-size: 13.5px; line-height: 1.5; color: var(--w-46); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 520ms var(--ease), opacity 380ms var(--ease), margin-top 520ms var(--ease); } .eight-item[data-active='true'] .eg { max-height: 140px; opacity: 1; } /* ── Price ────────────────────────────────────────────────────────── */ .price-pane { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px, 4vw, 52px); padding: clamp(30px, 4.4vw, 52px); } @media (max-width: 720px) { .price-pane { grid-template-columns: 1fr; } .price-pane .vrule { display: none; } } .vrule { width: 1px; align-self: stretch; background: linear-gradient( to bottom, transparent, rgba(255, 255, 255, 0.18), transparent ); } .price-fig .big { font-size: clamp(46px, 7vw, 74px); font-weight: 500; font-variation-settings: 'opsz' 32; letter-spacing: -0.028em; line-height: 1.04; font-variant-numeric: tabular-nums; color: var(--w-95); margin: 8px 0 6px; } .price-note { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* ── Plain lists ──────────────────────────────────────────────────── */ .ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; max-width: 60ch; } .ticks li { position: relative; padding-left: 24px; color: var(--w-68); font-size: 15.5px; line-height: 1.55; } .ticks li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); } /* ── Process ──────────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); counter-reset: step; } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } } .step { padding: 26px 24px 28px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.022); } .step h3 { font-size: 16.5px; font-weight: 500; letter-spacing: -0.012em; margin: 14px 0 8px; color: var(--w-95); } .step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--w-68); } /* ── The ladder ───────────────────────────────────────────────────── */ .ladder { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; } .ladder::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) ); } .rung { position: relative; padding-bottom: 34px; } .rung:last-child { padding-bottom: 0; } .rung::before { content: ''; position: absolute; left: -30px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--void); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); } /* The one buried ember on this section, on the rung the reader is on. */ .rung.now::before { background: var(--ember); box-shadow: 0 0 0 4px rgba(166, 99, 29, 0.16); } .rung h3 { font-size: 16.5px; font-weight: 500; letter-spacing: -0.012em; margin: 4px 0 6px; color: var(--w-95); } .rung p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.55; color: var(--w-68); max-width: 56ch; } .rung .basis { color: var(--w-46); font-size: 13.5px; } /* ── Closing call to action ───────────────────────────────────────── */ .close-pane { position: relative; overflow: hidden; padding: clamp(44px, 7vw, 86px) clamp(28px, 5vw, 72px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; } /* The second and last ember on the page, buried behind the pane. */ .close-pane::before { content: ''; position: absolute; left: 50%; top: 120%; width: 80%; height: 150%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( closest-side, rgba(166, 99, 29, 0.2), rgba(166, 99, 29, 0.04) 58%, transparent 100% ); pointer-events: none; } .close-pane > * { position: relative; z-index: 1; } .close-pane .deck { text-align: center; } /* ── Footer ───────────────────────────────────────────────────────── */ /* Vertical only. This element also carries .wrap, and a padding shorthand here would reset the gutter and push the address line off screen. */ .foot { padding-top: 54px; padding-bottom: 46px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } /* The address line is a single unbreakable run at desktop width. Left to a space-between row it overflows the gutter on a phone, so below the break it stacks and is allowed to wrap. */ .foot > * { min-width: 0; max-width: 100%; } @media (max-width: 620px) { .foot { flex-direction: column; align-items: flex-start; gap: 12px; } } .foot a { color: var(--w-68); text-decoration: none; transition: color 180ms var(--ease); } .foot a:hover { color: var(--w-95); } /* ── Reveal on scroll ─────────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 780ms var(--ease), transform 780ms var(--ease); transition-delay: var(--d, 0ms); } [data-reveal][data-shown='true'] { opacity: 1; transform: translate3d(0, 0, 0); } /* ── Motion off ─────────────────────────────────────────────────────── Under prefers-reduced-motion, and under automation where app.js sets data-static on , everything lands in its final state and nothing loops. Screenshots stay deterministic and the page stays usable. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1; transform: none; } .marquee-track { animation: none; } } html[data-static='true'] [data-reveal] { opacity: 1; transform: none; transition: none; } html[data-static='true'] .marquee-track { animation: none; } html[data-static='true'] .work-card { transform: none !important; }