/* /web — the page that rebuilds itself (docs/public-site.md › Web). One living page, pinned while the scroll rebuilds it. web.js writes continuous variables on (and a few on the elements they belong to); every property here is an interpolation between the generic template the page starts as and the finished Corvernn page. Nothing important switches on a class: layout changes are FLIP-interpolated by the script, copy is rewritten in place by a sweep, colour and type evolve in steps of their own. --pw-k container --h-* hierarchy (head, lead, cta, quiet) --blue template blue (1 → 0) --track type tightening --card template cards (0 → 1 gone) --dark background (0 → 1) --ink text inversion (a short window at mid-grey, where both inks keep ~4.5:1) --orbit, --rline, --rfill, --r3d the Raven forming: paths, outline, fill, then the solid The defaults are the finished page: without JavaScript, with reduced motion or on a short screen (no .wl-on) the page simply is the final version. */ @property --ink-s { syntax: ""; inherits: true; initial-value: 1; } :root { --pw-k: 1; --h-head: 1; --h-lead: 1; --h-cta: 1; --h-quiet: 1; --blue: 0; --track: 1; --card: 1; --dark: 1; --ink: 1; --orbit: 1; --rline: 1; --rfill: 1; --r3d: 0; --gd: 0; --fm: 1; --dna: 1; } html.wl-on { --pw-k: 0; --h-head: 0; --h-lead: 0; --h-cta: 0; --h-quiet: 0; --blue: 1; --track: 0; --card: 0; --dark: 0; --ink: 0; --orbit: 0; --rline: 0; --rfill: 0; --r3d: 0; --gd: 1; --fm: 0; --dna: 0; } /* ── Palette: finished by default; in the story, template values blend into it ───────────────────────────────── */ :root { --wl-bg: var(--surface-base); --wl-ink: var(--text-primary); --wl-muted: var(--text-secondary); --wl-meta: var(--text-meta); --wl-line: var(--border-subtle); --wl-edge: var(--border); --wl-action: var(--action-bg); --wl-action-ink: var(--action-text); --wl-action-hover: var(--action-hover); } html.wl-on { --wl-bg: color-mix(in oklab, #050505 calc(var(--dark) * 100%), #F4F6F9); --wl-ink: color-mix(in srgb, #F3F4F6 calc(var(--ink) * 100%), #1F2328); /* Secondary inks flip in the same step as the action (they cannot hold contrast on a mid-grey ground). */ --wl-muted: color-mix(in srgb, #B5B8BF calc(var(--ink-s) * 100%), #535A64); --wl-meta: color-mix(in srgb, #8A8E97 calc(var(--ink-s) * 100%), #666D77); --wl-line: color-mix(in oklab, #1F2125 calc(var(--dark) * 100%), #E1E4E8); --wl-edge: color-mix(in oklab, #2A2C31 calc(var(--dark) * 100%), #D0D4DA); /* The action: template blue drains into a neutral that inverts with the page (near-black on light, white on dark). */ /* The action inverts in one step (--ink-s, with a short time-based crossfade) instead of passing through grey with the page: at every scroll position it is either a dark button with white text or a white one with dark text. */ --wl-neutral: color-mix(in srgb, #FFFFFF calc(var(--ink-s) * 100%), #16181C); --wl-action: color-mix(in srgb, #2F6FDE calc(var(--blue) * 100%), var(--wl-neutral)); --wl-action-ink: color-mix(in srgb, #050505 calc(var(--ink-s) * 100%), #FFFFFF); --wl-action-hover: color-mix(in srgb, #2459B8 calc(var(--blue) * 100%), color-mix(in srgb, #E8E9EB calc(var(--ink-s) * 100%), #2B2E34)); --ink-s: 0; transition: --ink-s 240ms var(--ease-state); background: var(--wl-bg); } html.wl-on body { background: var(--wl-bg); } /* The shared header (header.css) takes the page's palette, whatever state the story is in. */ :root { --hd-ink: var(--wl-ink); --hd-muted: var(--wl-muted); --hd-meta: var(--wl-meta); --hd-line: var(--wl-line); --hd-edge: var(--wl-edge); --hd-bg: var(--wl-bg); --hd-action: var(--wl-action); --hd-action-ink: var(--wl-action-ink); --hd-action-hover: var(--wl-action-hover); } /* ── Type: the template sets everything in Arial; a sweep re-sets each unit in Inter / Inter Tight ─────────────── */ html.wl-on .wl-u { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } html.wl-on .wl-u.is-set { font-family: var(--font-body); } html.wl-on .wl-u.is-set :is(h1, h2, h3), html.wl-on .wl-u.is-set .wordmark { font-family: var(--font-display); } /* ── Track and pinned view ────────────────────────────────────────────────────────────────────────────────── */ .wl { position: relative; } .wl-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; } html.wl-on .wl { height: calc(13.2 * (100svh - var(--header-h))); } /* refined by web.js to the exact story length */ .wl-view { position: relative; background: var(--wl-bg); color: var(--wl-ink); } html.wl-on .wl-view { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden; } /* ── The page ─────────────────────────────────────────────────────────────────────────────────────────────── */ .wl-page { container: wlpage / inline-size; --pw-generic: min(100% - 2 * var(--gutter), 64rem); --pw-final: min(100% - 2 * var(--gutter), var(--container)); --pw: calc(var(--pw-generic) + (var(--pw-final) - var(--pw-generic)) * var(--pw-k)); /* --nw / --nl: the screens chapter's width and left edge, in px (web.js). */ width: min(var(--pw), var(--nw, 100%)); margin-left: var(--nl, auto); margin-right: auto; padding-inline: var(--npad, 0px); padding-block: clamp(1.25rem, 4svh, 3rem) 1.5rem; display: flex; flex-direction: column; gap: calc(1.25rem + .75rem * var(--pw-k)); } html.wl-on .wl-page { height: 100%; } .wl-page { position: relative; } /* What stays of the rebuild (--dna, from "resolved" on; always in the finished page): the column grid's ticks along the top of the page and an anchor at each of its corners — the structure, still there, quiet. */ .wl-page::before, .wl-page::after { content: ""; position: absolute; pointer-events: none; --dna-c: color-mix(in srgb, var(--wl-ink) calc(var(--dna) * 16%), transparent); } .wl-page::before { left: var(--npad, 0px); right: var(--npad, 0px); top: 0; height: 6px; background: linear-gradient(to right, var(--dna-c) 0 1px, transparent 1px) 0 0 / calc((100% + 24px) / 12) 100% repeat-x; } .wl-page::after { left: calc(var(--npad, 0px) - 4px); right: calc(var(--npad, 0px) - 4px); top: -4px; height: 9px; background: linear-gradient(var(--dna-c), var(--dna-c)) left 4px top 0 / 1px 9px no-repeat, linear-gradient(var(--dna-c), var(--dna-c)) left 0 top 4px / 9px 1px no-repeat, linear-gradient(var(--dna-c), var(--dna-c)) right 4px top 0 / 1px 9px no-repeat, linear-gradient(var(--dna-c), var(--dna-c)) right 0 top 4px / 9px 1px no-repeat; } /* Every screen: the page keeps its own ground and gets a screen's edges; around it, a desk (--vp, web.js). */ html.wl-on { --vp: 0; --wl-desk: color-mix(in oklab, #0B0C0E calc(var(--dark) * 100%), #E3E6EB); } html.wl-screens .wl-view { background: color-mix(in oklab, var(--wl-desk) calc(var(--vp) * 100%), var(--wl-bg)); } html.wl-screens .wl-page { background: var(--wl-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--wl-edge) calc(var(--vp) * 100%), transparent), 0 40px 80px -40px rgb(20 30 50 / calc(.22 * var(--vp))); } .wl-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: calc(1.5rem + 3rem * var(--pw-k)); flex: 1 0 auto; } .wl-copy { display: flex; flex-direction: column; min-width: 0; } /* Structure: each unit floats off the grid in the template and settles into it (--sk per element, web.js). */ html.wl-on .wl-copy { translate: calc(26px * (1 - var(--sk, 1))) calc(-8px * (1 - var(--sk, 1))); } /* ── The headline slot: the page's headline and the narrator share one place; copy is rewritten in place ─────── */ .wl-slot { display: grid; align-items: start; position: relative; } .wl-slot > .wl-intro, .wl-slot > .wl-notes, .wl-notes ol, .wl-notes li { min-width: 0; } html.wl-on .wl-slot > * { grid-area: 1 / 1; } html.wl-on .wl-notes ol { display: grid; } html.wl-on .wl-notes li { grid-area: 1 / 1; } .wl-notes ol { margin: 0; padding: 0; list-style: none; } .wl-notes-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html.wl-on .wl-item { visibility: hidden; } html.wl-on .wl-item.is-shown { visibility: visible; } .wl-caret { display: none; } html.wl-on .wl-caret { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: var(--wl-ink); opacity: 0; pointer-events: none; } /* Fluid type on the page's own width (container units): as the page narrows, the headline scales with it instead of ballooning to five lines — one formula for every width, so there is no step at the breakpoint. */ .wl-page { --h1-final: min(clamp(2rem, 1.2rem + 4.2cqi, 4.25rem), 8.2svh); } .wl-h1, .wl-note-h { margin: 0; color: var(--wl-ink); font-size: calc(2rem + (var(--h1-final) - 2rem) * var(--h-head)); font-weight: calc(700 - 100 * var(--h-head)); line-height: calc(1.25 - .23 * var(--h-head)); letter-spacing: calc(-.018em * var(--h-head) - .017em * var(--track)); text-wrap: balance; } .wl-soft { color: color-mix(in srgb, var(--wl-meta) calc(var(--h-head) * 100%), var(--wl-ink)); } .wl-lead, .wl-note-p { margin: calc(.375rem + .875rem * var(--pw-k)) 0 0; max-width: 34rem; font-size: calc(1.1875rem + (1.0625rem - 1.1875rem) * var(--h-lead)); font-weight: calc(500 - 100 * var(--h-lead)); line-height: calc(1.45 + .1 * var(--h-lead)); color: color-mix(in srgb, var(--wl-muted) calc(var(--h-lead) * 100%), var(--wl-ink)); } /* ── Rewritten copy: the old words are erased and the new ones typed in the same box, left to right ─────────── */ .wl-swap { display: grid; } .wl-swap > .wl-gen, .wl-swap > .wl-fin { grid-area: 1 / 1; min-width: 0; } .wl-gen { display: none; } html.wl-on .wl-swap > .wl-gen { display: block; clip-path: inset(0 0 0 calc(var(--q, 0) * 100%)); } html.wl-on .wl-swap > .wl-fin { clip-path: inset(0 calc((1 - var(--q, 0)) * 100%) 0 0); } html.wl-on .wl-btn.wl-swap > span { display: block; } /* ── Actions: two equal outlined buttons in the template → one action and a quiet link ─────────────────────── */ .wl-actions { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: calc(.75rem + .5rem * var(--h-cta)); margin-top: calc(1.75rem - .25rem * var(--pw-k)); } .wl-btn { display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: start; gap: .5rem; min-height: calc(2.375rem + .75rem * var(--h-cta)); padding: 0 calc(1rem + .375rem * var(--h-cta)); border: 1px solid transparent; border-radius: calc(4px + 4px * var(--card)); font-size: .9375rem; font-weight: 600; line-height: 1.2; letter-spacing: calc(-.005em * var(--track)); text-decoration: none; white-space: nowrap; cursor: pointer; } .wl-btn > span { grid-row: 1; grid-column: 1; } .wl-btn .i { grid-row: 1; grid-column: 2; width: calc(16px * var(--h-cta)); opacity: var(--h-cta); } .wl-btn--main { background: var(--wl-action); border-color: var(--wl-action); color: var(--wl-action-ink); } /* In the story the outlined template button becomes the filled action in one sweep, with its new label: the fill and the rewrite share one edge (--qpx, web.js), so each label always sits on its own ground — the old one in the action colour on the empty part, the new one in the action's ink on the filled part. Never a translucent, disabled-looking mix. */ html.wl-on .wl-btn--main { background: transparent; } html.wl-on .wl-btn--main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--wl-action); clip-path: inset(0 calc(100% - var(--qpx, 0px)) 0 0); } html.wl-on .wl-btn--main.wl-swap > .wl-gen { color: var(--wl-action); clip-path: inset(0 0 0 max(0px, calc(var(--qpx, 0px) - var(--pl, 0px)))); } html.wl-on .wl-btn--main.wl-swap > .wl-fin { color: var(--wl-action-ink); clip-path: inset(0 max(0px, calc(100% - var(--qpx, 0px) + var(--pl, 0px))) 0 0); } html.wl-on .wl-btn--main .i { color: var(--wl-action-ink); } html.wl-behaves .wl-btn--main:is(:hover, .is-hover)::before { background: var(--wl-action-hover); } .wl-btn--quiet { background: transparent; color: color-mix(in srgb, var(--wl-ink) calc(var(--h-quiet) * 100%), var(--wl-action)); border-color: color-mix(in srgb, transparent calc(var(--h-quiet) * 100%), var(--wl-action)); padding-inline: calc(1rem - 1rem * var(--h-quiet)); font-weight: calc(600 - 100 * var(--h-quiet)); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--wl-edge) calc(var(--h-quiet) * 100%), transparent); text-underline-offset: .3em; } /* ── Behaviour: the template's controls are dead; from the behaviour chapter on they answer — for real ───────── Every state the story's pointer shows is the real state (:hover, :active, :focus-visible); the demo only sets the same classes while no one is using the page. One idea per control, all in the page's own ink: · action — the label settles a pixel back, the arrow steps forward, a light passes once across the surface, a press sinks and springs back, and the label leans a little toward the pointer (--mx/--my, web.js) · quiet link — its underline is traced from the left in ink · navigation — one indicator slides to the link under the pointer or focus, and rests under the current section · cards — a baseline is traced along the top edge to an anchor point; nothing lifts or moves */ .wl-btn { position: relative; isolation: isolate; } :is(html:not(.wl-on), html.wl-behaves) .wl-btn { overflow: hidden; touch-action: manipulation; transition: background-color 180ms var(--ease-state), border-color 180ms var(--ease-state), scale 420ms cubic-bezier(.2, 1.6, .4, 1); } :is(html:not(.wl-on), html.wl-behaves) .wl-btn > :is(span, .i) { transition: translate 360ms var(--ease-enter); } :is(html:not(.wl-on), html.wl-behaves) .wl-btn--main::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; translate: -110% 0; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--wl-action-ink) 14%, transparent) 50%, transparent 70%); } :is(html:not(.wl-on), html.wl-behaves) .wl-btn--main:is(:hover, .is-hover) { background: var(--wl-action-hover); border-color: var(--wl-action-hover); } :is(html:not(.wl-on), html.wl-behaves) .wl-btn--main:is(:hover, .is-hover)::after { translate: 110% 0; transition: translate 760ms var(--ease-enter); } :is(html:not(.wl-on), html.wl-behaves) .wl-btn--main:is(:hover, .is-hover, :focus-visible, .is-focus) > span { translate: calc(-1px + var(--mx, 0px)) var(--my, 0px); } :is(html:not(.wl-on), html.wl-behaves) .wl-btn--main:is(:hover, .is-hover, :focus-visible, .is-focus) .i { translate: calc(4px + var(--mx, 0px)) var(--my, 0px); } :is(html:not(.wl-on), html.wl-behaves) .wl-btn:is(:active, .is-press, .is-touch) { scale: .97; transition-duration: 180ms, 180ms, 90ms; } :is(html:not(.wl-on), html.wl-behaves) .wl-btn--main:is(:active, .is-press, .is-touch) .i { translate: 1px 0; } :is(html:not(.wl-on), html.wl-behaves) .wl-btn:is(:focus-visible, .is-focus) { outline: 2px solid var(--wl-ink); outline-offset: 3px; } :is(html:not(.wl-on), html.wl-behaves) .wl-btn--quiet { background-image: linear-gradient(var(--wl-ink), var(--wl-ink)); background-repeat: no-repeat; background-position: calc(1rem - 1rem * var(--h-quiet)) calc(50% + .72em); background-size: 0 1px; transition: background-size 420ms var(--ease-enter), color 180ms var(--ease-state); } :is(html:not(.wl-on), html.wl-behaves) .wl-btn--quiet:is(:hover, .is-hover, :focus-visible) { background-size: calc(100% - 2rem + 2rem * var(--h-quiet)) 1px; color: var(--wl-ink); } @media (prefers-reduced-motion: reduce) { .wl-btn, .wl-btn > *, .wl-btn::after { transition-duration: 1ms !important; } } /* Proof: the strip above the headline — placeholder logos in the template → three facts (trust), in place. */ .wl-proof { margin: 0 0 calc(.875rem + .375rem * var(--pw-k)); font-size: .8125rem; color: var(--wl-meta); } .wl-proof p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; } .wl-proof p i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; } html.wl-on .wl-swap > .wl-logos { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; } .wl-logos svg { height: 1.25rem; width: auto; fill: var(--wl-meta); } .wl-logos svg:nth-child(1) { aspect-ratio: 104 / 24; } .wl-logos svg:nth-child(2) { aspect-ratio: 92 / 24; } .wl-logos svg:nth-child(3) { aspect-ratio: 80 / 24; } .wl-logos svg:nth-child(4) { aspect-ratio: 88 / 24; } .wl-logos text { font: 700 15px/1 Arial, Helvetica, sans-serif; letter-spacing: -.02em; } .wl-logos .lg-cut { fill: var(--wl-bg); } .wl-logos .lg-soft { fill: color-mix(in srgb, var(--wl-meta) 55%, transparent); } /* ── The Raven stage: one box for the stock picture, the orbit paths, the 2D silhouette and the 3D solid ─────── */ .wl-visual { position: relative; align-self: stretch; min-height: 0; max-height: 62svh; } html.wl-on .wl-visual { translate: calc(-14px * (1 - var(--sk, 1))) calc(30px * (1 - var(--sk, 1))); } .wl-visual > * { position: absolute; } /* The stock picture → the Raven's orbit. --gd (1 → 0): its details leave, front to back. --fm (0 → 1): the frame loses the card (fill, shadow, corners) and its edge loosens into the first orbit ellipse — the same size, place and angle the orbit is drawn at (orbit viewBox 600: rx 286, ry 112, −24°; cqmin of this square-fitted stage). */ .wl-visual { container-type: size; } .wl-photo { left: 50%; top: 50%; translate: -50% -50%; rotate: calc(-24deg * var(--fm)); width: calc(100% + (95.33cqmin - 100%) * var(--fm)); height: calc(100% + (37.33cqmin - 100%) * var(--fm)); border-radius: calc(10px * (1 - var(--fm)) + 50% * var(--fm)); overflow: hidden; background: color-mix(in srgb, #E8EDF5 calc((1 - var(--fm)) * 100%), transparent); border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--wl-ink) 30%, transparent) calc(var(--fm) * 100%), transparent); box-shadow: 0 12px 32px rgb(20 30 50 / calc(.1 * (1 - var(--fm)))); } .wl-scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: clamp(0, var(--gd) * 4, 1); } .sc { transform-box: view-box; transform-origin: 50% 55%; transition: translate 600ms var(--ease-enter); } /* Details leave front to back, each drawing in a little as it goes (so the frame empties, it does not blink). */ .sc-front { opacity: clamp(0, var(--gd) * 3 - 2, 1); scale: calc(.94 + .06 * clamp(0, var(--gd) * 3 - 2, 1)); } .sc-plant, .sc-person { opacity: clamp(0, var(--gd) * 3 - 1, 1); scale: calc(.96 + .04 * clamp(0, var(--gd) * 3 - 1, 1)); } .sc-laptop, .sc-desk { opacity: clamp(0, var(--gd) * 3, 1); } /* The pointer: layers at three depths (--vx/--vy, −1…1, from web.js while the page is alive). */ .sc-back { translate: calc(var(--vx, 0) * -3px) calc(var(--vy, 0) * -2px); } .sc-desk, .sc-laptop, .sc-person, .sc-plant { translate: calc(var(--vx, 0) * 3px) calc(var(--vy, 0) * 2px); } .sc-front { translate: calc(var(--vx, 0) * 9px) calc(var(--vy, 0) * 6px); } .sc-blob { fill: #D6E2F5; } .sc-soft { fill: #DDE6F4; } .sc-floor { fill: #CCD6E6; } .sc-wood { fill: #A9B4C6; } .sc-leg { fill: #B9C2D1; } .sc-screen { fill: #2B3446; } .sc-ui { fill: #6C7890; } .sc-ui--soft { fill: #4A5468; } .sc-bar { fill: color-mix(in srgb, #2F6FDE calc(var(--blue) * 100%), #8C95A3); } .sc-bar--soft { fill: #8FB2EE; } .sc-base { fill: #C3CCDA; } .sc-hinge { fill: #D5DCE6; } .sc-chair { fill: #59637A; } .sc-legs { fill: none; stroke: #39425A; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; } .sc-shirt { fill: color-mix(in srgb, #2F6FDE calc(var(--blue) * 100%), #7D8796); } .sc-arm { fill: none; stroke: color-mix(in srgb, #2F6FDE calc(var(--blue) * 100%), #7D8796); stroke-width: 12; stroke-linecap: round; } .sc-skin { fill: #EFC3A4; } .sc-hair { fill: #2C3040; } .sc-leaf { fill: #58B283; } .sc-leaf--dark { fill: #3F9468; } .sc-pot { fill: #E4906A; } .sc-card { fill: #FFFFFF; } .sc-card-shade { fill: #D2DBE9; } .sc-accent { fill: color-mix(in srgb, #2F6FDE calc(var(--blue) * 100%), #7D8796); } .sc-check { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .sc-pie { fill: #DCE6F8; } .sc-line { fill: #C6CFDD; } .sc-line--soft { fill: #DEE4EC; } .sc-spark { fill: #9FB9E8; } .wl-orbit { inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--wl-ink); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .3; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--orbit)); } .wl-orbit ellipse:first-child { display: none; } /* drawn by the frame itself (.wl-photo) */ /* The 2D silhouette sits on the mark's own bounding box (viewBox set by web.js), K = 72 % of the stage height, centred: exactly where and how big the 3D solid is drawn. It forms (outline), fills, then hands over to the solid. */ .wl-raven2d { left: 50%; top: 50%; height: 72%; width: auto; aspect-ratio: var(--r-aspect, 1); transform: translate(-50%, -50%); overflow: visible; color: rgb(243 244 246 / var(--rfill)); stroke: var(--wl-ink); stroke-width: calc(4 * (1 - var(--rfill))); stroke-dasharray: var(--r-len, 4000); stroke-dashoffset: calc(var(--r-len, 4000) * (1 - var(--rline))); opacity: calc(clamp(0, var(--rline) * 4, 1) * (1 - var(--r3d))); } .wl-raven3d { inset: 0; width: 100%; height: 100%; opacity: var(--r3d); pointer-events: none; } /* ── The four blocks: template cards → four services → the four service rows ─────────────────────────────── */ .wl-blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(1rem + 1rem * var(--pw-k)); margin: 0; padding: 0; list-style: none; } .wl-block { --lift: 0px; padding: calc(1.125rem * (1 - var(--card))) calc(1.125rem * (1 - var(--card))) calc(1.125rem - .25rem * var(--card)); padding-top: calc(1.125rem - .125rem * var(--card)); border-top: 1px solid color-mix(in srgb, var(--wl-line) calc(var(--card) * 100%), transparent); border-radius: calc(6px * (1 - var(--card))); background: color-mix(in srgb, transparent calc(var(--card) * 100%), #FFFFFF); box-shadow: 0 6px 18px color-mix(in srgb, transparent calc(var(--card) * 100%), rgba(20, 30, 50, .08)); } html.wl-on .wl-block:nth-child(2) { translate: 0 calc(14px * (1 - var(--sk, 1))); } html.wl-on .wl-block:nth-child(3) { translate: 0 calc(-8px * (1 - var(--sk, 1))); } html.wl-on .wl-block:nth-child(4) { translate: 0 calc(9px * (1 - var(--sk, 1))); } .wl-block { position: relative; } .wl-block::before, .wl-block::after { content: ""; position: absolute; top: -1px; pointer-events: none; opacity: 0; } .wl-block::before { left: 0; right: 0; height: 1.5px; background: var(--wl-ink); transform: scaleX(0); transform-origin: left; } .wl-block::after { left: 0; width: 5px; height: 5px; margin: -1.75px 0 0 -2.5px; border-radius: 50%; background: var(--wl-ink); } :is(html:not(.wl-on), html.wl-behaves) .wl-block::before { opacity: 1; transition: transform 520ms var(--ease-enter); } :is(html:not(.wl-on), html.wl-behaves) .wl-block::after { transition: left 520ms var(--ease-enter), opacity 160ms linear; } @media (hover: hover) { :is(html:not(.wl-on), html.wl-behaves) .wl-block:hover::before { transform: scaleX(1); } :is(html:not(.wl-on), html.wl-behaves) .wl-block:hover::after { left: 100%; opacity: 1; } } :is(html:not(.wl-on), html.wl-behaves) .wl-block:is(.is-hover, :focus-within)::before { transform: scaleX(1); } :is(html:not(.wl-on), html.wl-behaves) .wl-block:is(.is-hover, :focus-within)::after { left: 100%; opacity: 1; } .wl-block h3 { margin: 0; font-size: calc(1.375rem + (1.0625rem - 1.375rem) * var(--h-head)); font-weight: calc(700 - 100 * var(--h-head)); line-height: 1.3; letter-spacing: calc(-.01em * var(--track)); color: var(--wl-ink); } .wl-block .wl-n { margin-right: .625rem; font-size: .75rem; font-weight: 500; letter-spacing: 0; color: var(--wl-meta); font-variant-numeric: tabular-nums; } .wl-block p { margin: calc(.375rem * var(--desc)) 0 0; font-size: .875rem; line-height: 1.5; color: var(--wl-muted); opacity: var(--desc); max-height: calc(var(--desc) * 9em); overflow: hidden; } /* --desc: the cards' descriptions (1 shown; a phone's cards show only their names, 0). */ .wl-page { --desc: 1; } .wl-page.is-narrow .wl-blocks:not(.is-rows) { --desc: 0; } .wl-more { display: none; } .wl-more dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; } .wl-more dt { font-size: .75rem; color: var(--wl-meta); } .wl-more dd { margin: .25rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--wl-muted); } /* Cards → services, in steps (trust chapter, web.js): the claim's copy weakens (--weak); the claim's title is rewritten as the number and the service's name (--qh); then the service's line is typed under it (--qp). */ html.wl-on .wl-block-head.wl-swap > :is(.wl-gen, .wl-fin) { clip-path: none; } html.wl-on .wl-block-head > .wl-gen h3 { clip-path: inset(0 0 0 calc(var(--qh, 0) * 100%)); } html.wl-on .wl-block-head > .wl-fin h3 { clip-path: inset(0 calc((1 - var(--qh, 0)) * 100%) 0 0); } html.wl-on .wl-block-head > .wl-gen p { clip-path: inset(0 0 0 calc(var(--qp, 0) * 100%)); opacity: calc(var(--desc) * (1 - .55 * var(--weak, 0))); } html.wl-on .wl-block-head > .wl-fin p { clip-path: inset(0 calc((1 - var(--qp, 0)) * 100%) 0 0); } /* Rows: the same four blocks, opened (services chapter; always in the finished page without motion). */ :is(.wl-blocks.is-rows, html:not(.wl-on) .wl-blocks) { grid-template-columns: minmax(0, 1fr); gap: 0; } :is(.wl-blocks.is-rows, html:not(.wl-on) .wl-blocks) .wl-block { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2rem; padding: 1.125rem 0; } :is(.wl-blocks.is-rows, html:not(.wl-on) .wl-blocks) .wl-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: start; opacity: var(--more, 1); } .wl-svc-head { display: none; } html:not(.wl-on) .wl-svc-head { display: block; margin-top: var(--space-block); } html.wl-on .wl-svc-head { display: block; position: absolute; left: 0; top: 0; width: var(--slot-w, 30rem); visibility: hidden; } html.wl-on .wl-svc-head.is-shown { visibility: visible; } html.wl-on .wl-page.is-svc :is(.wl-actions, .wl-proof) { display: none; } html.wl-on .wl-page.is-svc .wl-hero { grid-template-columns: minmax(0, 1fr); position: relative; flex: 0 0 auto; } /* The Raven, its part played, recedes rather than flying off: it stays on its side, drops back in depth (--recede: smaller, fainter, a little higher) and becomes the section's signature behind the details. */ html.wl-on .wl-page.is-svc .wl-visual { position: absolute; top: -1.5rem; right: 0; width: 42%; height: min(58svh, 32rem); max-height: none; z-index: 0; } html.wl-on .wl-page.is-narrow.is-svc .wl-visual { top: 0; width: 4.5rem; height: 4.5rem; } html.wl-on .wl-visual { opacity: calc(1 - .88 * var(--recede, 0)); } html.wl-on .wl-page.is-narrow .wl-visual { opacity: calc(1 - .5 * var(--recede, 0)); } html.wl-on .wl-visual > * { scale: calc(1 - .16 * var(--recede, 0)); } html.wl-on .wl-page.is-svc .wl-blocks { gap: 0; position: relative; z-index: 1; } /* ── Four ways in, wide: the four services as a list (the choice), the active one's details beside it (the answer). The active service follows a real pointer, focus or tap (web.js, .is-active); at rest it is the first. Each detail link stays focusable: tabbing onto it makes its service the active one. */ html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block { position: static; translate: none; display: block; width: 46%; padding: 1.25rem 0 1.375rem; } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block::before, html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block::after { display: none; } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block-head { position: relative; } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block-head::before, html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block-head::after { content: ""; position: absolute; top: calc(-1.25rem - 1px); pointer-events: none; } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block-head::before { left: 0; right: 0; height: 1.5px; background: var(--wl-ink); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-enter); } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block-head::after { left: 0; width: 5px; height: 5px; margin: -1.75px 0 0 -2.5px; border-radius: 50%; background: var(--wl-ink); opacity: 0; transition: left 520ms var(--ease-enter), opacity 160ms linear; } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block.is-active .wl-block-head::before { transform: scaleX(1); } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block.is-active .wl-block-head::after { left: 100%; opacity: 1; } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block h3 { transition: color 240ms var(--ease-state); } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block:not(.is-active) h3 { color: var(--wl-muted); } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block:not(.is-active) .wl-block-head p { color: var(--wl-meta); } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-more { position: absolute; top: .25rem; left: calc(46% + clamp(2rem, 6cqi, 6rem)); right: 0; display: block; opacity: 0; translate: 0 8px; pointer-events: none; transition: opacity 240ms var(--ease-state), translate 420ms var(--ease-enter); } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-block.is-active .wl-more { opacity: var(--more, 1); translate: 0 0; pointer-events: auto; } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-more dl { grid-template-columns: minmax(0, 1fr); gap: 1.125rem; max-width: 34rem; } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-more dd { font-size: 1.0625rem; color: var(--wl-ink); } html.wl-on .wl-page:not(.is-narrow) .wl-blocks.is-rows .wl-more .link { display: inline-flex; margin-top: 1.5rem; font-size: 1rem; } /* The rows' names grow into headings as the cards open (--rowk, web.js); the labels read as labels. */ .wl-blocks.is-rows .wl-block h3, html:not(.wl-on) .wl-blocks .wl-block h3 { font-size: calc(1.0625rem + .3125rem * var(--rowk, 1)); } .wl-more dt { letter-spacing: .04em; text-transform: uppercase; font-size: .6875rem; } /* While the script measures a layout, nothing is offset or interpolated. */ html.wl-measure .wl-view *, html.wl-measure .wl-view { translate: none !important; transform: none !important; } /* ── The next step: a shouting banner in the template → one sentence and four ways to start ────────────────── */ .wl-next { padding: calc(.875rem + .25rem * var(--card)) calc(1rem * (1 - var(--card))) calc(.875rem * (1 - var(--card))); border-top: 1px solid color-mix(in srgb, var(--wl-line) calc(var(--card) * 100%), transparent); border-radius: calc(6px * (1 - var(--card))); background: color-mix(in srgb, transparent calc(var(--card) * 100%), color-mix(in srgb, #E6EEFC calc(var(--blue) * 100%), #E9EBEE)); } .wl-next .wl-gen { margin: 0; color: color-mix(in srgb, #2F6FDE calc(var(--blue) * 100%), var(--wl-ink)); font-weight: 700; } .wl-next .wl-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; } .wl-next .wl-fin > p { margin: 0; color: var(--wl-ink); font-size: .9375rem; } .wl-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; } .wl-chips a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .875rem; border: 1px solid var(--wl-edge); border-radius: var(--radius-sm); color: var(--wl-ink); font-size: .875rem; text-decoration: none; transition: border-color var(--motion-feedback) var(--ease-state), background-color var(--motion-feedback) var(--ease-state); } .wl-chips a:hover { border-color: var(--border-hover); background: rgba(255, 255, 255, .04); } /* ── Narrow: a phone, or this page at a phone's width (class set by web.js; container query without JS) ──── */ .wl-page.is-narrow .wl-hero { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.25rem; flex: 0 0 auto; position: relative; } .wl-page.is-narrow .wl-visual { position: absolute; top: 0; right: 0; width: 4.5rem; height: 4.5rem; max-height: none; } .wl-page.is-narrow .wl-slot { padding-right: calc(5rem * var(--nar, 1)); } .wl-page.is-narrow .wl-lead, .wl-page.is-narrow .wl-note-p { font-size: calc(1.0625rem - .0625rem * var(--h-lead)); } .wl-page.is-narrow .wl-blocks:not(.is-rows) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; } .wl-page.is-narrow .wl-blocks.is-rows .wl-block { grid-template-columns: minmax(0, 1fr); gap: .375rem; padding: .875rem 0; } .wl-page.is-narrow .wl-blocks.is-rows .wl-more { grid-template-columns: minmax(0, 1fr); gap: .875rem; overflow: hidden; } .wl-page.is-narrow .wl-more dl { grid-template-columns: minmax(0, 1fr); gap: .625rem; } .wl-page.is-narrow .wl-more dd { font-size: .9375rem; color: var(--wl-ink); } .wl-page.is-narrow .wl-more .link { min-height: 2.75rem; display: inline-flex; align-items: center; } .wl-page.is-narrow .wl-chips a { min-height: 2.75rem; } /* A phone before the page learns to be fluid: the desktop layout squeezed (template behaviour). */ html.wl-on .wl-page.is-squeezed .wl-blocks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; } html.wl-on .wl-page.is-squeezed .wl-block { padding: .5rem; } html.wl-on .wl-page.is-squeezed .wl-block h3 { font-size: .8125rem; } html.wl-on .wl-page.is-squeezed .wl-block p { display: none; } html.wl-on .wl-page.is-squeezed .wl-hero { gap: .75rem; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } html.wl-on .wl-page.is-squeezed :is(.wl-h1, .wl-note-h) { font-size: calc(1.5rem + (var(--h1-final) - 1.5rem) * var(--h-head)); overflow-wrap: anywhere; } html.wl-on .wl-page.is-squeezed :is(.wl-visual, .wl-copy) { translate: none; } /* no room on a phone for the template's float */ /* While the blocks travel into rows, their one-line descriptions wait (a half-width card would wrap onto the next row). */ .wl-blocks.is-travelling .wl-block-head p { visibility: hidden; } html.wl-on .wl-page.is-squeezed .wl-btn { white-space: normal; padding-block: .375rem; } html.wl-on .wl-page.is-squeezed .wl-visual { max-height: 40svh; } @container wlpage (max-width: 700px) { html:not(.wl-on) .wl-hero { grid-template-columns: minmax(0, 1fr); position: relative; } html:not(.wl-on) .wl-visual { position: absolute; top: 0; right: 0; width: 4.5rem; height: 4.5rem; max-height: none; } html:not(.wl-on) .wl-intro { padding-right: 5rem; } html:not(.wl-on) .wl-blocks .wl-block, html:not(.wl-on) .wl-more, html:not(.wl-on) .wl-more dl { grid-template-columns: minmax(0, 1fr); gap: .5rem; } } /* ── The header takes part: a template bar that becomes the Corvernn header ─────────────────────────────── */ html.wl-on .site-header, html.wl-on .site-header.is-scrolled { background: color-mix(in oklab, rgba(5, 5, 5, .94) calc(var(--dark) * 100%), #FFFFFF); border-bottom-color: color-mix(in oklab, rgba(255, 255, 255, .06) calc(var(--dark) * 100%), #E1E4E8); } html.wl-on .site-header .brand { color: var(--wl-ink); } html.wl-on .site-header .brand .mark { width: calc(1.75rem * var(--rline)); opacity: var(--rline); } html.wl-on .site-header .nav-link, html.wl-on .site-header .lang-btn, html.wl-on .site-header .menu-toggle { color: var(--wl-muted); } html.wl-on .site-header .menu-toggle { border-color: var(--wl-edge); } html.wl-on .site-header .nav-link { font-weight: calc(700 - 300 * var(--h-quiet)); } html.wl-on .site-header .header-cta { background: var(--wl-action); color: var(--wl-action-ink); border-radius: calc(4px + 4px * var(--card)); } .site-header .nav { position: relative; } /* Navigation: dead in the template; alive, one indicator slides between the links (web.js places it). */ html.wl-on:not(.wl-behaves) .site-header .nav-link:hover { color: var(--wl-muted); background: transparent; } :is(html:not(.wl-on), html.wl-behaves) .site-header .nav-link:is(:hover, :focus-visible, .is-hover, [aria-expanded="true"]) { color: var(--wl-ink); background: transparent; } .site-header .nav-link:focus-visible { outline: 2px solid var(--wl-ink); outline-offset: -2px; } .wl-navpill { position: absolute; left: 0; bottom: 4px; height: 1.5px; width: var(--pill-w, 0px); border-radius: 1px; background: var(--wl-ink); transform: translateX(var(--pill-x, 0px)); opacity: 0; pointer-events: none; transition: transform 340ms var(--ease-enter), width 340ms var(--ease-enter), opacity 220ms var(--ease-state); } .wl-navpill.is-on { opacity: 1; } .wl-navpill.is-rest { opacity: calc(.4 * var(--fo-1)); } .wl-navpill.is-demo { transition: opacity 220ms var(--ease-state); } /* The Services panel takes the page's colours too (it opens over the template as well as the finished page). */ html.wl-on .site-header .menu-panel { background: var(--wl-bg); border-color: var(--wl-edge); color: var(--wl-ink); box-shadow: 0 16px 40px rgb(0 0 0 / calc(.12 + .3 * var(--dark))); } html.wl-on .site-header .menu-panel .menu-text span { color: var(--wl-muted); } html.wl-on .site-header .menu-panel a:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--wl-ink) 6%, transparent); } html.wl-on .site-header .menu-panel a[aria-current] .menu-text b::after { background: var(--wl-ink); } /* In "Every screen" the page's width drives the fold frame by frame (no time-based easing on top of the scroll). */ html.wl-screens .site-header, html.wl-screens .site-header :is(.nav, .lang, .menu-toggle, .header-cta) { transition: none; } /* Screens: the header narrows with the page (web.js places its row on the page's column and cuts the bar to it). */ html.wl-screens .site-header { clip-path: inset(0 var(--hc-r, 0px) 0 var(--hc-l, 0px)); } /* ── The quick nav: tokens that follow the page's own light → dark ─────────────────────────────────────── */ html.wl-on .thread { --th-track: color-mix(in oklab, #2A2C31 calc(var(--ink-s) * 100%), #C3C8CF); --th-fill: color-mix(in oklab, #F3F4F6 calc(var(--ink-s) * 100%), #3A3F47); --th-dot: color-mix(in oklab, #4A4E55 calc(var(--ink-s) * 100%), #8E959E); --th-past: color-mix(in oklab, #6A6E76 calc(var(--ink-s) * 100%), #555C66); --th-active: color-mix(in oklab, #FFFFFF calc(var(--ink-s) * 100%), #111317); --th-label: color-mix(in srgb, #B5B8BF calc(var(--ink-s) * 100%), #3A3F47); } html.wl-on .thread .thread-line { background: var(--th-track); } html.wl-on .thread .thread-line i { background: var(--th-fill); } html.wl-on .thread a { color: var(--th-label); } html.wl-on .thread a i { background: var(--wl-bg); border-color: var(--th-dot); transition: transform var(--motion-state) var(--ease-story); } /* colours follow the page exactly */ html.wl-on .thread a.is-past i { background: var(--th-past); border-color: var(--th-past); } html.wl-on .thread a[aria-current] i { background: var(--th-active); border-color: var(--th-active); } /* Where the thread does not fit (below 1360 px), the story keeps its orientation on the header's edge: a hairline that fills with the story, with a notch at each chapter (web.js). */ .wl-progress { display: none; } @media (max-width: 1359px) { html.wl-on .wl-progress { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; background: color-mix(in srgb, var(--wl-ink) 8%, transparent); } html.wl-on .wl-progress i { position: absolute; inset: 0; background: var(--wl-ink); opacity: .55; transform-origin: 0 50%; transform: scaleX(var(--wl-p, 0)); } html.wl-on .wl-progress b { position: absolute; top: -2px; width: 1px; height: 6px; background: color-mix(in srgb, var(--wl-ink) 35%, transparent); } } /* ── Marks: the template's faults, and the grid the structure settles on (wide screens) ─────────────────── */ .wl-marks { display: none; } html.wl-on .wl-marks { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; } .wl-m { position: absolute; left: 0; top: 0; opacity: 0; font: 500 .75rem/1.2 var(--font-body); white-space: nowrap; --red: #D64550; } .wl-flag { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem .25rem .25rem; border: 1px solid var(--red); border-radius: 6px; background: color-mix(in srgb, var(--wl-bg) 88%, transparent); color: var(--red); } .wl-flag b { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 4px; background: var(--red); color: #FFFFFF; font-size: .6875rem; } .wl-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .wl-cols i { border-inline: 1px solid color-mix(in srgb, var(--wl-ink) 16%, transparent); background: color-mix(in srgb, var(--wl-ink) 3%, transparent); /* --ge: the guides' energy — they draw down column by column, and retract the same way. */ transform-origin: 50% 0; scale: 1 clamp(0, var(--ge, 1) * 1.55 - var(--k, 0) * .05, 1); } .wl-cursor--fixed { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0; } html:not(.wl-on) .wl-cursor--fixed { display: none; } .wl-cursor svg { width: 16px; height: 22px; fill: #111214; stroke: #FFFFFF; stroke-width: 1.2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); } /* ── Without motion: the finished page, the steps as a list, the four blocks as rows ─────────────────────── */ html:not(.wl-on) .wl-view { padding-bottom: var(--space-block); } html:not(.wl-on) .wl-copy { display: grid; } html:not(.wl-on) .wl-slot { display: contents; } html:not(.wl-on) .wl-caret { display: none; } html:not(.wl-on) .wl-notes { order: 9; margin-top: var(--space-block); padding-top: 1.5rem; border-top: 1px solid var(--wl-line); } html:not(.wl-on) .wl-notes-title { position: static; width: auto; height: auto; clip-path: none; margin: 0 0 1rem; font: 600 1rem/1.4 var(--font-display); color: var(--text-primary); } html:not(.wl-on) .wl-notes ol { display: grid; gap: 1rem; } html:not(.wl-on) .wl-notes .wl-note-h { font-size: 1.0625rem; line-height: 1.35; } html:not(.wl-on) .wl-notes .wl-note-p { margin-top: .25rem; font-size: .9375rem; } @container wlpage (min-width: 701px) { html:not(.wl-on) .wl-visual { min-height: 18rem; } } html:not(.wl-on) .wl-svc-head .wl-note-h { font-size: var(--t-h2); } /* After the story the page is the finished one: the brief and the footer never take the story's colours (a reload or a link straight to #brief would otherwise show them in the template's light for a frame). */ .wl-brief, html.wl-on .site-footer { background: var(--surface-base); } .wl-brief { border-top: 1px solid var(--border-subtle); }