/* ══════════════════════════════════════════════════════════════════════ ZYRN — SYS.01 Doctrine: silence is the luxury · metadata as ornament · one Pulse per surface · the shear belongs to the logo only ══════════════════════════════════════════════════════════════════════ */ :root{ /* palette */ --obsidian:#0E0F12; --vapor:#F2F3F5; --pulse:#6E56F8; --pulse-hi:#7d67f9; --steel:#767E8C; --hair:rgba(242,243,245,0.08); --hair-strong:rgba(242,243,245,0.15); --grid-line:rgba(242,243,245,0.04); /* type */ --font-sans:'Space Grotesk',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace; /* rhythm */ --gutter:clamp(20px,4vw,48px); --pad-top:110px; --pad-bottom:56px; /* glass — obsidian-tinted, not white chips. The doctrine's objection was to generic frosted glassmorphism; this is a dark instrument housing: a cold tint, a specular top edge, and a float shadow that lifts it off the video. */ --glass-tint:linear-gradient(157deg, rgba(242,243,245,0.055) 0%, rgba(242,243,245,0.018) 38%, rgba(110,86,248,0.020) 72%, rgba(14,15,18,0.060) 100%); --glass-blur:blur(18px) saturate(135%); --glass-edge:rgba(242,243,245,0.13); --glass-spec:rgba(242,243,245,0.34); --glass-lift: 0 28px 64px -26px rgba(0,0,0,0.85), 0 4px 14px -6px rgba(0,0,0,0.55); --glass-inner:inset 0 1px 0 0 rgba(242,243,245,0.055); /* motion */ --ease-reveal:cubic-bezier(0.22,1,0.36,1); --ease-shear:cubic-bezier(0.83,0,0.17,1); --t-reveal:700ms; --t-shear:650ms; --t-ui:300ms; } /* The .dc.html renders under Claude Design's runtime, which injects no reset — so there it inherits content-box, and the access card's full-width button spills into the card's padding. The spec's declared stack is Tailwind, whose preflight sets border-box globally; `max-w-xs` = 320px total, not 320 + padding. Border-box is the intended model and the one the measurements in docs/build-spec.md assume. */ *{box-sizing:border-box} /* MUST stay `auto`. Lenis writes a new scroll position every frame, and with `scroll-behavior:smooth` the browser puts its OWN easing on each of those writes — the two animate against each other and the page stops responding to the wheel for stretches at a time. Smooth anchor jumps are handled by lenis.scrollTo() in field.js instead. */ html{scroll-behavior:auto} /* clip, not hidden, and on html rather than body: `overflow-x:hidden` on an element computes the other axis to `auto`, which turned into a second scroll container nested inside the document scroller. */ html{overflow-x:clip} .section{scroll-margin-top:76px} body{ margin:0; min-height:100vh; background:var(--obsidian); color:var(--vapor); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; } ::selection{background:rgba(110,86,248,0.25)} a{color:var(--vapor);text-decoration:none} /* text over video — nothing heavier than this */ .veil{text-shadow:0 1px 12px rgba(14,15,18,0.6)} .mono{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--steel); } .rule{height:1px;background:var(--hair);margin:16px 0} /* ── SYS.00 · video bed ─────────────────────────────────────────────── */ /* layout+paint containment only — size containment (contain:strict) is one more thing mobile browsers can get wrong on a fixed full-viewport layer */ .bed{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint} .bed__treat{position:absolute;inset:0;filter:saturate(0.65) contrast(1.05)} .bed__treat video, .bed__treat canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .bed__treat canvas{opacity:0;transition:opacity 500ms} /* obsidian veil — cools the footage toward the palette */ .bed__veil{position:absolute;inset:0;background:rgba(14,15,18,0.35)} /* the video emerges from darkness and returns to it */ .bed__fade{ position:absolute;inset:0;opacity:0.6; background:linear-gradient(to bottom, var(--obsidian) 0%, rgba(14,15,18,0) 30%, rgba(14,15,18,0) 70%, var(--obsidian) 100%); } /* ── hairline grid ──────────────────────────────────────────────────── */ .grid{position:fixed;inset:0;z-index:1;pointer-events:none} .grid__line{position:absolute;top:0;bottom:0;width:1px;background:var(--grid-line)} .grid__line--a{left:33.333%} .grid__line--b{left:66.666%} /* ── scroll readout ─────────────────────────────────────────────────── */ .readout{ position:fixed;right:20px;top:50%;transform:translateY(-50%); z-index:40;pointer-events:none; display:flex;flex-direction:column;align-items:center;gap:14px; } .readout__label{ writing-mode:vertical-rl; font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;color:var(--steel); } .readout__track{position:relative;display:block;width:1px;height:96px;background:var(--hair)} .readout__fill{ position:absolute;left:0;top:0;display:block;width:1px;height:100%; background:var(--pulse); transform:scaleY(0);transform-origin:top; opacity:0;transition:opacity var(--t-ui); will-change:transform; } /* ── the shear · signature ──────────────────────────────────────────── */ .shear{ position:relative;display:inline-block; font-weight:500;font-size:var(--shear-size,20px); letter-spacing:0.06em;line-height:1;color:var(--vapor); } .shear__half{display:block} .shear__half--top{clip-path:inset(0 0 50% 0)} .shear__half--bot{clip-path:inset(50% 0 0 0);margin-top:-1em} .shear__seam{ position:absolute;left:-12px;right:-12px;top:50%;margin-top:-1px; display:block;height:2px;background:var(--pulse); transform:scaleX(0);opacity:0; } /* auto variant — self-shears 300ms after load, then stays sheared */ .shear--auto .shear__half, .shear--auto .shear__seam{ transition:transform var(--t-shear) var(--ease-shear), opacity var(--t-shear) var(--ease-shear); } .shear--auto.is-sheared .shear__half--top{transform:translateX(-0.1em)} .shear--auto.is-sheared .shear__half--bot{transform:translateX(0.1em)} .shear--auto.is-sheared .shear__seam{transform:scaleX(1);opacity:1} /* hero variant — scroll-bound, seam draws left to right. These three move every frame during the shear — promote them so the scrub's canvas work never forces them through layout/paint. */ .shear--hero .shear__half, .shear--hero .shear__seam{will-change:transform} .shear--hero .shear__seam{transform-origin:left} /* ── the glitch ───────────────────────────────────────────────────── Applied to the WRAPPER, never the halves — the halves carry the shear (JS-driven on the hero, class-driven in the nav), and the latch must survive untouched. The glitch is a transmission artefact on a signal that is already sheared; it does not un-shear anything. ui.js adds .is-glitching at irregular intervals — a fixed CSS interval reads as a metronome, which is the opposite of a glitch. */ .glitch{position:relative;display:inline-block} .glitch.is-glitching{animation:glitch-jolt 260ms steps(1,end) both} @keyframes glitch-jolt{ 0% {transform:translate3d(0,0,0) skewX(0deg)} 14% {transform:translate3d(-2.5px,0.5px,0) skewX(-0.6deg)} 28% {transform:translate3d(2px,-0.5px,0) skewX(0.4deg)} 42% {transform:translate3d(-1px,0,0) skewX(0deg)} 56% {transform:translate3d(2.5px,0.5px,0) skewX(0.5deg)} 70% {transform:translate3d(-1.5px,0,0) skewX(-0.3deg)} 100%{transform:translate3d(0,0,0) skewX(0deg)} } /* a Pulse scan slice that cuts across the mark for a few frames. No mix-blend-mode: screen-blending a purple line over the bright placeholder footage washes it to nothing. A solid slice with a Pulse glow reads on obsidian and on video alike. */ .glitch::after{ content:'';position:absolute;left:-14px;right:-14px; top:38%;height:2px; background:var(--pulse); box-shadow:0 0 10px rgba(110,86,248,0.95),0 0 3px rgba(110,86,248,1); opacity:0;pointer-events:none; } .glitch.is-glitching::after{animation:glitch-scan 260ms steps(1,end) both} @keyframes glitch-scan{ 0%,100%{opacity:0;top:38%} 18%{opacity:1;top:24%} 34%{opacity:0;top:24%} 52%{opacity:0.85;top:66%} 66%{opacity:0;top:66%} 84%{opacity:0.6;top:44%} } /* the seam stutters with it, but only in brightness — never position */ .glitch.is-glitching .shear__seam{animation:glitch-seam 260ms steps(1,end) both} @keyframes glitch-seam{ 0%,100%{filter:none} 22%{filter:brightness(2.2)} 40%{filter:none} 60%{filter:brightness(0.4)} 78%{filter:brightness(1.8)} } /* Z monogram */ .mark{position:relative;display:inline-block;width:14px;height:14px} .mark__half{position:absolute;left:0;top:0;width:14px;height:14px} .mark__half path{fill:none;stroke:var(--vapor);stroke-width:2;stroke-linecap:square} .mark__half--top{clip-path:inset(0 0 50% 0);transform:translateX(-1px)} .mark__half--bot{clip-path:inset(50% 0 0 0);transform:translateX(1px)} .mark__seam{position:absolute;left:-3px;right:-3px;top:50%;display:block;height:1px;background:var(--pulse)} /* ── buttons ────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; border-radius:4px;cursor:pointer; font-family:var(--font-sans);font-size:13px; transition:background var(--t-ui),color var(--t-ui); } .btn--hairline{ border:1px solid var(--hair-strong);background:transparent;color:var(--vapor); padding:8px 20px; } .btn--hairline:hover{background:rgba(242,243,245,0.05)} .btn--vapor{ border:none;background:var(--vapor);color:var(--obsidian); padding:10px 16px;font-size:12px;font-weight:500; } .btn--vapor:hover{background:rgba(242,243,245,0.85)} /* section two's single Pulse */ .btn--pulse{ border:none;background:var(--pulse);color:#FFFFFF; padding:10px 20px;font-weight:500; } .btn--pulse:hover{background:var(--pulse-hi)} .arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square} .arrow--16{width:16px;height:16px} /* ── shell / nav ────────────────────────────────────────────────────── */ .shell{position:relative;z-index:10} .nav{ position:fixed;top:0;left:0;right:0;z-index:50; border-bottom:1px solid var(--hair); background:rgba(14,15,18,0.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .nav__row{ display:flex;align-items:center;justify-content:space-between; padding:16px var(--gutter); } .nav__links{display:flex;align-items:center;gap:40px} .nav__link{font-size:14px;color:rgba(242,243,245,0.85);transition:color var(--t-ui)} .nav__link:hover{color:var(--vapor)} .nav__sup{font-family:var(--font-mono);font-size:10px;color:var(--steel);margin-left:3px} .nav__end{display:flex;align-items:center;gap:24px} .nav__coords{text-transform:none} /* ── sections ───────────────────────────────────────────────────────── */ .section{ min-height:100vh; min-height:100svh; display:flex;flex-direction:column;justify-content:space-between; padding:var(--pad-top) var(--gutter) var(--pad-bottom); } .row{display:flex;gap:32px;flex-wrap:wrap} .row--top{justify-content:space-between;align-items:flex-start} .row--bottom{justify-content:space-between;align-items:flex-end;gap:48px} .row--cap{gap:clamp(48px,4vw,64px);margin-top:48px} /* section two carries 64px of bottom pad against the hero's 56px */ .section--cap{padding-bottom:64px} /* Beat between scenes — a stretch where only the field is on screen. Do not remove; do not inflate either. At the spec's 80vh + 3x55vh these four spacers were 1973px of a 6204px page: a third of the site was blank scrolling, which reads as a broken page rather than as pacing. 30/18vh keeps the beat and gives the formation morph room to land. */ .runway{height:30vh} .runway--short{height:18vh} .index{display:flex;flex-direction:column;gap:8px} .index__item{font-size:12px;color:rgba(242,243,245,0.9)} .lede{ margin:0;max-width:320px;text-align:right; font-size:clamp(18px,1.4vw,20px);line-height:1.65;color:var(--vapor); } .lede--wide{max-width:384px} .badge{ display:inline-block;align-self:flex-start; border-left:2px solid var(--vapor); padding:6px 0 6px 12px; color:rgba(242,243,245,0.8); } .lockup{margin-top:24px} .lockup__sub{ margin-top:20px; font-weight:400;font-size:clamp(20px,1.8vw,24px); letter-spacing:-0.01em;color:rgba(242,243,245,0.85); } .display{ margin:0; font-size:clamp(48px,6.5vw,72px);font-weight:400; line-height:1.05;letter-spacing:-0.01em;color:var(--vapor); } .body{ margin:24px 0 0;max-width:448px; font-size:15px;line-height:1.65;color:rgba(242,243,245,0.7); } .cta-row{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px} /* ── panels · obsidian veil + hairline, never frosted glass ─────────── */ .panel{ position:relative; width:100%; border-radius:10px; border:1px solid var(--glass-edge); background: var(--glass-tint), rgba(14,15,18,0.52); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-lift),var(--glass-inner); isolation:isolate; } /* specular edge — a 1px highlight that fades toward the corners, the way light catches the top lip of a machined housing */ .panel::before{ content:'';position:absolute;left:12px;right:12px;top:-1px;height:1px; background:linear-gradient(90deg, transparent, var(--glass-spec) 22%, var(--glass-spec) 78%, transparent); opacity:0.55;pointer-events:none; } /* idle float — panels sit slightly off the surface and drift. Durations are deliberately coprime so no two panels ever sync up. */ @keyframes floaty{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-7px,0)} } .panel{animation:floaty 11s ease-in-out infinite} .panel:nth-of-type(2){animation-duration:13s;animation-delay:-4s} .panel:nth-of-type(3){animation-duration:9s;animation-delay:-7s} .card,.cap,.specs{will-change:transform} /* hover lift — the panel rises and its edge brightens */ .panel{transition:box-shadow 500ms var(--ease-reveal),border-color 500ms var(--ease-reveal)} .panel:hover{ border-color:rgba(242,243,245,0.2); box-shadow: 0 36px 78px -26px rgba(0,0,0,0.9), 0 6px 18px -6px rgba(0,0,0,0.6), var(--glass-inner); } /* access card */ .card{max-width:320px;padding:20px} .card__head{display:flex;justify-content:space-between} .card__value{color:var(--vapor)} .card__seats{display:flex;align-items:center;gap:10px} .card__cta{margin-top:16px;width:100%} .seats{display:flex;gap:4px} .seats__dot{display:block;width:6px;height:6px;border-radius:1px;background:rgba(242,243,245,0.25)} /* at rest the live seat is Vapor — it turns Pulse only on card hover, so the hero's single Pulse stays the wordmark seam */ .seats__dot--live{background:var(--vapor);animation:seatpulse 2s infinite} .card:hover .seats__dot--live{background:var(--pulse)} @keyframes seatpulse{0%,100%{opacity:1}50%{opacity:0.35}} /* capability panel */ .cap{max-width:448px;padding:0 24px} .cap__copy{max-width:576px} .cap__row{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--hair)} .cap__row:last-child{border-bottom:none} .cap__idx{min-width:56px;padding-top:4px} .cap__title{ display:flex;align-items:center;gap:8px; font-size:17px;font-weight:500;color:var(--vapor); } .cap__arrow{ display:inline-flex;color:rgba(242,243,245,0.4); transition:transform var(--t-ui),color var(--t-ui); } .cap__row:hover .cap__arrow{transform:translate(2px,-2px);color:var(--vapor)} .cap__body{ display:block;margin-top:6px; font-size:14px;line-height:1.6;color:rgba(242,243,245,0.6); } /* ── SYS.03 · service lines ───────────────────────────────────────── An index, not a menu — the four lines named in the hero, made real. No Pulse here: mid-scroll the readout rail is the viewport's accent. */ .lines{ display:flex;flex-direction:column; border-top:1px solid rgba(242,243,245,0.14); margin-top:48px; } .line{ display:grid; grid-template-columns:56px minmax(0,1fr) minmax(0,260px); gap:clamp(20px,3vw,48px); align-items:start; padding:clamp(20px,2.2vw,28px) 0; border-bottom:1px solid rgba(242,243,245,0.14); } /* Steel is a panel colour. Over open video it disappears — so mono metadata sitting directly on the footage takes Vapor at reduced alpha instead, the same call the hero's service index already makes. */ .line,.ladder,.ladder__note{text-shadow:0 1px 12px rgba(14,15,18,0.6)} /* the lines are links now — each opens its dedicated service page */ .line{ transition:background 450ms var(--ease-reveal),padding 450ms var(--ease-reveal); position:relative; } .line:hover{background:rgba(242,243,245,0.035)} .line::after{ content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0; background:var(--pulse);opacity:0.7; transition:width 600ms var(--ease-reveal); } .line:hover::after{width:100%} .line:hover .line__title{color:#fff} .line__title{transition:color 300ms} .line__idx{padding-top:6px;color:rgba(242,243,245,0.9)} .line__title{ margin:0; font-size:clamp(22px,2.4vw,30px);font-weight:400; letter-spacing:-0.01em;color:var(--vapor); } .line__lede{ margin:8px 0 0;max-width:52ch; font-size:15px;line-height:1.65;color:rgba(242,243,245,0.72); } .line__meta{ padding-top:10px;text-align:right;line-height:1.7; color:rgba(242,243,245,0.62); } /* ── SYS.04 · readiness index ─────────────────────────────────────── Five steps on one hairline. The tick sits ON the rule, so the row reads as a measuring scale rather than a set of cards. */ .ladder{position:relative;margin-top:clamp(40px,5vw,64px)} .ladder__rule{ position:absolute;left:0;right:0;top:0; height:1px;background:rgba(242,243,245,0.14); } .ladder__steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(16px,2.5vw,32px); margin:0;padding:0;list-style:none; } .step{position:relative;padding-top:24px} /* the tick — a 12px riser standing on the rule */ .step::before{ content:'';position:absolute;left:0;top:0; width:1px;height:12px;background:rgba(242,243,245,0.5); } .step__idx{display:block;color:rgba(242,243,245,0.9)} .step__title{ margin:10px 0 0; font-size:17px;font-weight:500;color:var(--vapor); } .step__body{ margin:6px 0 0; font-size:14px;line-height:1.6;color:rgba(242,243,245,0.68); } .ladder__note{ margin:clamp(32px,4vw,48px) 0 0; color:rgba(242,243,245,0.6);line-height:1.8; } /* ── SYS.05 · access ──────────────────────────────────────────────── The page's last Pulse lives here, on the primary CTA. */ .specs{max-width:448px;padding:4px 24px} .spec{ display:flex;justify-content:space-between;align-items:baseline;gap:20px; padding:14px 0;border-bottom:1px solid var(--hair); } .spec:last-child{border-bottom:none} .spec dt{color:var(--steel)} .spec__v{margin:0;color:var(--vapor);text-align:right} /* ── service tabs ─────────────────────────────────────────────────── The four lines as a persistent switcher. Glass housing, one active channel — reads as instrument channel-select, not website navigation. */ .tabs{ position:relative; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;margin-top:40px; border-radius:10px; border:1px solid var(--glass-edge); background:var(--glass-tint),rgba(14,15,18,0.5); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-lift),var(--glass-inner); overflow:hidden; } .tab{ display:flex;flex-direction:column;gap:8px; padding:18px 20px 20px; border-right:1px solid rgba(242,243,245,0.07); transition:background 400ms var(--ease-reveal),color 300ms; } .tab:last-child{border-right:none} .tab:hover{background:rgba(242,243,245,0.035)} .tab__idx{color:rgba(242,243,245,0.55)} .tab__name{font-size:15px;color:rgba(242,243,245,0.8);transition:color 300ms} .tab:hover .tab__name{color:var(--vapor)} .tab.is-active{background:rgba(242,243,245,0.055)} .tab.is-active .tab__name{color:var(--vapor);font-weight:500} .tab.is-active .tab__idx{color:var(--vapor)} /* the active channel is marked by the section's single Pulse */ .tab.is-active::before{ content:'';position:absolute;top:0;height:2px;background:var(--pulse); width:25%; transition:transform 500ms var(--ease-reveal); } .tabs[data-active="0"] .tab.is-active::before{left:0;transform:translateX(0)} .tabs[data-active="1"] .tab.is-active::before{left:0;transform:translateX(100%)} .tabs[data-active="2"] .tab.is-active::before{left:0;transform:translateX(200%)} .tabs[data-active="3"] .tab.is-active::before{left:0;transform:translateX(300%)} /* ── page transition veil ─────────────────────────────────────────── Cross-page continuity: the obsidian ground stays put while the content swaps under it, so moving between service pages reads as one surface. */ .veil-swap{ position:fixed;inset:0;z-index:9999; background:var(--obsidian); opacity:0;pointer-events:none; transition:opacity 420ms var(--ease-reveal); } .is-leaving .veil-swap{opacity:1;pointer-events:auto} .page-in{animation:page-in 700ms var(--ease-reveal) both} @keyframes page-in{ from{opacity:0;transform:translate3d(0,14px,0)} to{opacity:1;transform:none} } /* ── footer ─────────────────────────────────────────────────────────── */ .footer{ display:flex;justify-content:space-between;align-items:center; border-top:1px solid var(--hair); padding:20px var(--gutter); font-size:10px;text-transform:none; } .footer__stamp{display:inline-flex;align-items:center;gap:10px} /* ── reveal ─────────────────────────────────────────────────────────── */ [data-reveal]{ opacity:0; transform:translateY(24px); clip-path:inset(0 0 18% 0); will-change:transform; transition:transform var(--t-reveal) var(--ease-reveal), opacity var(--t-reveal) var(--ease-reveal), clip-path var(--t-reveal) var(--ease-reveal); } [data-reveal].is-in{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)} /* ── responsive ─────────────────────────────────────────────────────── */ @media (max-width:1279px){ .nav__coords{display:none} } @media (max-width:1023px){ .readout{display:none} } /* the ladder reads as a scale across 5 columns; below lg it becomes a vertical list with the tick riser turned into a left-hand rule */ @media (max-width:1023px){ .ladder__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px} .ladder__rule{display:none} .step{padding-top:0;padding-left:16px} .step::before{width:1px;height:100%;top:0} } @media (max-width:767px){ .grid{display:none} .nav__links{display:none} .footer__coords{display:none} .lede{text-align:left;max-width:none} .row--bottom{align-items:flex-start} .cap{padding:0 20px} .line{grid-template-columns:40px minmax(0,1fr);gap:16px} .line__meta{grid-column:2;text-align:left;padding-top:12px} .ladder__steps{grid-template-columns:minmax(0,1fr);gap:22px} .specs{padding:4px 20px} } /* ── reduced motion ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} [data-reveal]{opacity:1;transform:none;clip-path:none;transition:none} .shear--auto .shear__half, .shear--auto .shear__seam{transition:none} .seats__dot--live{animation:none} .bed__treat canvas{transition:none} /* every added effect is motion — all of it opts out together */ .panel{animation:none} .glitch.is-glitching, .glitch.is-glitching::after, .glitch.is-glitching .shear__seam{animation:none} .glitch::after{display:none} .page-in{animation:none} .veil-swap{transition:none} }