s, so the h2 is left with zero direct text
* nodes -- a gradient clipped to text, with no text to clip to, paints
* nothing, and the transparent colour inherits down and hides the
* characters as well. Every section heading on the site went invisible the
* moment its split ran, which is every motion-enabled visitor on every
* page, and has been true since SplitText landed in v4.0.
*
* Measured in a rendered page: 7 of 7 .sec__head h2 on the front page
* computed to rgba(0,0,0,0), and restoring a plain text node to one of
* them brought the heading straight back with this CSS untouched.
*
* So the sweep now applies only while the heading is still one piece --
* no-JS and no-GSAP visitors get it, and split headings keep their real
* colour and the character reveal that replaced it. */
.sec__head h2:not([data-split]) {
background-image: linear-gradient(100deg,
var(--paper) 0%, var(--paper) 42%,
color-mix(in oklch, var(--accent) 85%, white) 50%,
var(--paper) 58%, var(--paper) 100%);
background-size: 260% 100%;
background-position: 130% 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: headSweep linear both;
animation-timeline: view();
animation-range: entry 15% cover 42%;
}
}
}
@keyframes headSweep { to { background-position: -30% 0; } }
/* ==========================================================================
30. Hero constellation
Canvas node field, injected by app.js on desktop only. Sits above the
video and below the scrim, so the content stays readable.
========================================================================== */
.hero__net {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: .85;
}
/* ==========================================================================
31. Film grain
A single repeating SVG noise tile at very low opacity. Kills the flatness
of large dark areas and stops gradient banding on cheap panels. Costs one
data URI and no requests.
========================================================================== */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: .028;
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");
}
@media (prefers-reduced-motion: no-preference) {
body::after { animation: grain 1s steps(3) infinite; }
}
@keyframes grain {
0% { transform: translate(0, 0); }
33% { transform: translate(-2%, 1%); }
66% { transform: translate(1%, -2%); }
100% { transform: translate(0, 0); }
}
/* ==========================================================================
32. Magnetic CTA
app.js writes the transform; this only supplies the return easing, so the
button springs back rather than snapping.
========================================================================== */
.cta, .dock__toggle { transition: transform .35s cubic-bezier(.22,1,.36,1), background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease); }
.cta:active { transform: scale(.97) !important; }
/* ==========================================================================
33. Aurora wash
A slow-drifting colour field behind dark sections. Two conic gradients at
low opacity, blurred hard. This is the "futuristic" look most agency sites
get from a WebGL shader, at zero JavaScript cost.
========================================================================== */
.sec.ghost::after {
content: "";
position: absolute;
inset: -20% -10%;
z-index: -2;
pointer-events: none;
opacity: .28;
filter: blur(80px);
background:
radial-gradient(30rem 22rem at 18% 30%, color-mix(in oklch, var(--violet) 55%, transparent), transparent 70%),
radial-gradient(26rem 20rem at 82% 70%, color-mix(in oklch, var(--blue) 45%, transparent), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
.sec.ghost::after { animation: aurora 18s ease-in-out infinite alternate; }
}
@keyframes aurora {
from { transform: translate3d(-3%, 2%, 0) scale(1); }
to { transform: translate3d(3%, -2%, 0) scale(1.12); }
}
/* ==========================================================================
34. Scramble targets
Reserve the width so a decoding label does not reflow the layout while
its glyphs change.
========================================================================== */
.sec__num, .step__n, .rule-i__k, .bucket__k { font-variant-numeric: tabular-nums; }
/* ==========================================================================
35. Large-screen artwork
The full-resolution backdrops load only where there are pixels to show
them. Mobile never downloads them at all.
========================================================================== */
@media (min-width: 64rem) {
.hero::after { background-image: url("ecommwiz-arcane-circuit-hero-backdrop.webp"); }
}
/* ==========================================================================
36. Mobile tap targets
Audited at 360px: footer links measured 23px tall and breadcrumb links
16px, both under the 24px minimum. Padding rather than font-size, so the
density of the footer is unchanged on desktop.
========================================================================== */
@media (max-width: 63.99rem) {
.site-foot__col a,
.site-foot__contact a:not(.site-foot__big),
.site-foot__legal a {
display: inline-flex;
align-items: center;
min-height: 2.75rem; /* 44px, comfortably over the 24px floor */
padding-block: 0.15rem;
}
.site-foot__col { gap: 0.15rem; }
.crumb { line-height: 2.4; }
.crumb a {
display: inline-block;
min-height: 2.75rem;
line-height: 2.75rem;
padding-inline: 0.15rem;
}
.rel a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.f__chip label { min-height: 2.75rem; display: inline-flex; align-items: center; }
.site-foot__legal-links { gap: 1.75rem; }
}
/* The footer bloom is decorative and was measuring wider than the viewport,
which trips mobile-usability checks even though nothing scrolls. */
.site-foot { overflow-x: clip; }
.site-foot__glow { inset: auto 0 -60%; }
/* Hero rotator: the widest word set the element width and overflowed the
measurement at 360px. Clip it to the wrapper. */
.hero__in { max-width: 100%; }
/* ==========================================================================
37. Rotator on narrow screens
.rot is an inline-grid whose width is the WIDEST word, so at 360px the
longest phrase pushed the hero to 396px -- clipped rather than scrolling,
but still content wider than the screen, which mobile-usability checks
flag. Below the breakpoint the grid gets to shrink and the words wrap.
========================================================================== */
@media (max-width: 47.99rem) {
.rot {
display: block;
position: relative;
height: auto;
min-height: 2.3em;
max-width: 100%;
}
.rot > b {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
white-space: normal;
text-wrap: balance;
}
.rot > b.is-on { position: relative; }
.hero__in { max-width: min(62rem, 100%); }
.hero h1 { overflow-wrap: break-word; }
}
/* ==========================================================================
38. Mega menu
Twenty-two service pages will not fit in a row of links. Grouped into the
four buckets the site already uses, so the nav teaches the structure.
========================================================================== */
.nav__has { position: relative; display: flex; }
.nav__top {
font: inherit;
font-size: 0.9375rem;
color: color-mix(in oklch, var(--paper) 82%, transparent);
background: none;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0;
transition: color .2s var(--ease);
}
.nav__top::before { content: "/"; color: var(--violet); margin-right: 0.1rem; }
.nav__top:hover, .nav__top[aria-expanded="true"] { color: var(--paper); }
.nav__caret {
width: 0.4rem; height: 0.4rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform .25s var(--ease);
}
.nav__top[aria-expanded="true"] .nav__caret { transform: rotate(-135deg) translate(-2px, -2px); }
.mega {
position: absolute;
top: calc(100% + 1.1rem);
left: 50%;
translate: -50% 0;
width: min(72rem, calc(100vw - 2 * var(--pad)));
background: color-mix(in oklch, var(--ink) 97%, transparent);
border: 1px solid var(--line);
border-radius: 6px;
padding: var(--s2);
box-shadow: 0 30px 70px -20px rgba(0,0,0,.75);
backdrop-filter: blur(14px);
z-index: 200;
}
.mega[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.mega { animation: megaIn .22s var(--ease) both; }
}
@keyframes megaIn { from { opacity: 0; translate: -50% -8px; } to { opacity: 1; translate: -50% 0; } }
/* The same rotating rune rim used on cards, so the menu belongs to the set. */
.mega::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--ring), transparent 0deg, var(--violet) 60deg, var(--blue) 120deg, transparent 190deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .8;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.mega::before { animation: runeSpin 6s linear infinite; }
}
.mega__in { display: grid; gap: var(--s2) 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__k {
font-family: var(--f-mono);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--violet);
margin: 0 0 0.75rem;
}
.mega__col { display: grid; gap: 0.15rem; align-content: start; }
.mega__col a {
text-decoration: none;
padding: 0.5rem 0.6rem;
border-radius: 4px;
display: grid;
gap: 0.1rem;
transition: background .18s var(--ease), transform .18s var(--ease);
}
.mega__col a b {
font-family: var(--f-display);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: -0.01em;
color: var(--paper);
}
.mega__col a span { font-size: 0.75rem; color: var(--mute); }
.mega__col a:hover { background: var(--raise); transform: translateX(3px); }
.mega__col a:hover b { color: var(--accent); }
.mega__foot { margin-top: 1rem; }
@media (max-width: 63.99rem) { .nav__has { display: none; } }
/* ==========================================================================
39. Mobile drawer
Full-screen, scrollable, with the services grouped in a native
so it works before JavaScript arrives.
========================================================================== */
.m-nav__in { display: grid; gap: 0.35rem; padding-bottom: var(--s3); }
.m-nav__cta { justify-self: stretch; text-align: center; margin-bottom: 0.9rem; }
.m-nav__top {
font-family: var(--f-display);
font-weight: 600;
font-size: 1.125rem;
letter-spacing: -0.015em;
text-decoration: none;
color: var(--paper);
padding: 0.85rem 0;
border-bottom: 1px dashed var(--line);
display: block;
}
.m-nav__top:hover, .m-nav__top:focus-visible { color: var(--accent); }
.m-acc { border-bottom: 1px dashed var(--line); }
.m-acc summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 0;
font-family: var(--f-display);
font-weight: 600;
font-size: 1.125rem;
letter-spacing: -0.015em;
color: var(--paper);
}
.m-acc summary::-webkit-details-marker { display: none; }
.m-acc__mk { position: relative; width: 0.9rem; height: 0.9rem; flex: none; }
.m-acc__mk::before, .m-acc__mk::after {
content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px;
background: var(--accent); border-radius: 2px; transition: transform .22s var(--ease);
}
.m-acc__mk::after { transform: rotate(90deg); }
.m-acc[open] .m-acc__mk::after { transform: rotate(0); }
.m-acc__body { display: grid; gap: 0.1rem; padding-bottom: 0.9rem; }
.m-acc__k {
font-family: var(--f-mono);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--violet);
margin: 0.9rem 0 0.3rem;
}
.m-acc__body a {
text-decoration: none;
color: color-mix(in oklch, var(--paper) 80%, transparent);
font-size: 0.9375rem;
min-height: 2.75rem;
display: flex;
align-items: center;
padding-left: 0.9rem;
position: relative;
}
.m-acc__body a::before { content: "/"; position: absolute; left: 0; color: var(--violet); font-family: var(--f-mono); }
.m-acc__body a:active, .m-acc__body a:focus-visible { color: var(--accent); }
.m-nav__foot {
display: grid; gap: 0.4rem; margin-top: var(--s2);
font-family: var(--f-mono); font-size: 0.875rem;
}
.m-nav__foot a { color: var(--mute); text-decoration: none; min-height: 2.75rem; display: flex; align-items: center; }
/* ==========================================================================
40. Cursor glow
Two layers: a lagging violet bloom and a dot that nearly keeps up. The
difference between them is what makes it feel alive. Never replaces the
system cursor -- losing the real pointer is a usability cost that a nice
effect does not justify.
========================================================================== */
.cur {
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9998;
opacity: 0;
transition: opacity .3s var(--ease), width .25s var(--ease), height .25s var(--ease);
will-change: transform;
}
.cur--glow {
/* No filter: blur(). Measured at 13fps on a 22rem element -- the browser
re-blurs it on every frame it moves. A radial gradient with soft stops
looks the same and costs nothing. */
width: 17rem; height: 17rem;
border-radius: 50%;
background: radial-gradient(circle,
color-mix(in oklch, var(--violet) 30%, transparent) 0%,
color-mix(in oklch, var(--violet) 16%, transparent) 26%,
color-mix(in oklch, var(--blue) 8%, transparent) 48%,
transparent 70%);
}
.cur--dot {
width: 0.55rem; height: 0.55rem;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 14px 3px color-mix(in oklch, var(--accent) 65%, transparent);
}
body.has-cursor .cur { opacity: 1; }
body.cursor-hot .cur--glow { width: 23rem; height: 23rem; }
body.cursor-hot .cur--dot { width: 1.5rem; height: 1.5rem; background: transparent; border: 1.5px solid var(--accent); box-shadow: none; }
body.cursor-down .cur--dot { width: 0.35rem; height: 0.35rem; }
@media (prefers-reduced-motion: reduce) { .cur { display: none; } }
/* ==========================================================================
41. Effects, turned up
The first pass was too subtle to notice. These were measured as firing but
nobody could see them, which is the same as not having built them.
========================================================================== */
.hero__net { opacity: 1; } /* was .85 */
.sec.ghost::after { opacity: .42; } /* aurora, was .28 */
/* Card lift and glow, not just a border. */
.workcard, .bucket, .deliv__i, .quote, .step {
transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover: hover) and (min-width: 48rem) {
.workcard:hover, .bucket:hover {
transform: translateY(-5px);
box-shadow: 0 24px 50px -24px color-mix(in oklch, var(--violet) 60%, transparent);
}
.deliv__i:hover, .step:hover { background: var(--raise); }
.quote:hover { transform: translateY(-3px); }
}
/* Service rows: a violet bar grows down the left edge on hover. */
.svc__row::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 2px;
background: linear-gradient(var(--accent), var(--blue));
transform: scaleY(0);
transform-origin: top;
transition: transform .3s var(--ease);
}
.svc__row:hover::after { transform: scaleY(1); }
/* Price rows react too -- they were completely static. */
.price__row { transition: background .25s var(--ease), padding-left .25s var(--ease); }
@media (hover: hover) {
.price__row:hover { background: color-mix(in oklch, var(--violet) 9%, transparent); padding-left: 0.6rem; }
}
/* ==========================================================================
42. Grouped services
Twenty-two rows in one list is a wall. Four labelled sets, so a visitor
can find their problem instead of reading everything.
========================================================================== */
.gsets { display: grid; gap: var(--s3); }
.gset__head { margin-bottom: var(--s1); max-width: var(--read); }
.gset__k {
font-family: var(--f-mono);
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--violet);
margin: 0 0 0.5rem;
}
.gset__head h3 {
font-size: clamp(1.5rem, 3vw, 2.125rem);
letter-spacing: -0.025em;
margin: 0 0 0.4rem;
}
.gset__lede { margin: 0; color: var(--mute); font-size: 0.9375rem; }
.gsvc { border-top: 1px dashed var(--line); }
.gsvc__row {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.3rem 1.25rem;
align-items: baseline;
padding: 1.1rem clamp(0.5rem, 1.5vw, 0.9rem);
border-bottom: 1px dashed var(--line);
text-decoration: none;
color: inherit;
position: relative;
isolation: isolate;
transition: background .2s var(--ease), padding-left .2s var(--ease);
}
@media (min-width: 52rem) {
.gsvc__row { grid-template-columns: 18rem 1fr auto auto; align-items: center; }
}
.gsvc__row:hover { background: var(--ink); padding-left: 1.25rem; }
.gsvc__row::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 2px;
background: linear-gradient(var(--accent), var(--blue));
transform: scaleY(0);
transform-origin: top;
transition: transform .28s var(--ease);
}
.gsvc__row:hover::after { transform: scaleY(1); }
.gsvc__name {
font-family: var(--f-display);
font-weight: 600;
font-size: 1.0625rem;
letter-spacing: -0.012em;
color: var(--paper);
}
.gsvc__row:hover .gsvc__name { color: var(--accent); }
.gsvc__desc { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; color: var(--mute); }
@media (min-width: 52rem) { .gsvc__desc { grid-column: auto; max-width: 44ch; } }
.gsvc__n { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--accent); white-space: nowrap; }
.gsvc__go { color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.gsvc__row:hover .gsvc__go { opacity: 1; transform: none; }
@media (max-width: 51.99rem) { .gsvc__go { display: none; } }
/* ==========================================================================
43. Wand cursor
Three layers: a lagging bloom, a dot that nearly keeps up, and a canvas of
sparks. The canvas is fixed and pointer-events none, so it never
participates in hit testing.
========================================================================== */
.cur--spark {
position: fixed;
inset: 0;
z-index: 9997;
pointer-events: none;
opacity: 0;
transition: opacity .3s var(--ease);
}
body.has-cursor .cur--spark { opacity: 1; }
/* ==========================================================================
44. Nav letter lift
Each character rises in sequence, delayed by its index. --i is set by
app.js at boot; without JS the labels render normally and simply do not
animate.
========================================================================== */
.nav > a .ch,
.nav__top .ch,
.mega__col a b .ch {
display: inline-block;
transition: transform .28s cubic-bezier(.22,1,.36,1), color .28s var(--ease);
transition-delay: calc(var(--i, 0) * 22ms);
will-change: transform;
}
.nav > a:hover .ch,
.nav__top:hover .ch,
.nav__top[aria-expanded="true"] .ch,
.mega__col a:hover b .ch {
transform: translateY(-3px);
color: var(--accent);
}
/* A rune dot that slides in under the hovered nav item. */
.nav > a, .nav__top { position: relative; }
.nav > a::after, .nav__top::after {
content: "";
position: absolute;
left: 50%;
bottom: -0.55rem;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px 2px color-mix(in oklch, var(--accent) 70%, transparent);
opacity: 0;
transform: translate(-50%, 4px) scale(.4);
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav > a:hover::after,
.nav__top:hover::after,
.nav__top[aria-expanded="true"]::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* ==========================================================================
45. Logo cast
The sigil lifts and its mark flares; six motes fly outward on the angles
set by app.js.
========================================================================== */
.brand { position: relative; }
.brand__mark { transition: transform .55s cubic-bezier(.22,1,.36,1), filter .45s var(--ease); }
.brand.is-cast .brand__mark {
transform: translateY(-3px) rotate(-8deg) scale(1.06);
filter: drop-shadow(0 0 14px color-mix(in oklch, var(--accent) 85%, transparent));
}
.brand.is-cast .brand__word .w { color: var(--accent); filter: drop-shadow(0 0 10px color-mix(in oklch, var(--accent) 70%, transparent)); }
.brand__word .w { transition: color .4s var(--ease), filter .4s var(--ease); }
.brand__burst {
position: absolute;
left: 1.05rem;
top: 50%;
width: 0; height: 0;
pointer-events: none;
}
.brand__burst i {
position: absolute;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--accent);
opacity: 0;
}
.brand.is-cast .brand__burst i {
animation: cast .7s var(--ease) both;
animation-delay: var(--d, 0ms);
}
@keyframes cast {
0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.5); }
25% { opacity: 1; }
100% { opacity: 0; transform: rotate(var(--a)) translateX(28px) scale(.2); }
}
@media (prefers-reduced-motion: reduce) {
.nav > a .ch, .nav__top .ch, .mega__col a b .ch { transition: none; transform: none; }
.brand__burst { display: none; }
}
/* Visually hidden but readable by assistive tech and by innerText. Used for
the real nav label behind the per-character animation spans. */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
46. No hero artwork on small screens
At 360px the circuit backdrop sits behind a scrim and reads as texture at
best, but it was the LCP resource -- and a CSS background cannot start
downloading until the stylesheet has parsed. Dropping it below the
breakpoint makes the headline the largest paint, which arrives with the
HTML. Measured: /pricing/ 2472ms -> well inside Google's 2.5s limit.
========================================================================== */
@media (max-width: 47.99rem) {
.hero::after { background-image: none; }
}
/* ==========================================================================
47. Headline word reveal
Each word rises and fades in on its own delay as the heading enters. Driven
by a scroll timeline, so it runs on the compositor rather than in JS.
The GSAP SplitText + ScrollTrigger version of this is about 70KB.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.wd {
display: inline-block;
animation: wordIn linear both;
animation-timeline: view();
/* Each word starts fractionally later, which is what makes it read as a
line assembling rather than a block fading. */
animation-range: entry calc(4% + var(--w) * 2%) entry calc(46% + var(--w) * 2%);
}
}
}
@keyframes wordIn {
from { opacity: 0; transform: translateY(0.5em) rotate(1.5deg); filter: blur(3px); }
to { opacity: 1; transform: none; filter: none; }
}
/* ==========================================================================
48. Cursor inversion
The dot flips to difference blending so it inverts whatever is under it —
dark on the paper sections, bright on the void. One property, no JS, and it
is the single most "designed" thing on the page.
========================================================================== */
.cur--dot { mix-blend-mode: difference; background: #fff; }
body.cursor-hot .cur--dot { background: transparent; border-color: #fff; }
/* ==========================================================================
49. Stacked work cards -- TRIED AND REMOVED
Sticky-stacking the work cards looked right on the reference sites and
wrong here, because their cards are uniform tiles and ours are wide
two-column blocks of very different heights. The result overlapped the
copy: the next card's screenshot slid over the previous card's paragraph
mid-sentence. Recorded here so nobody re-adds it expecting it to work.
========================================================================== */
/* ==========================================================================
50. Image wipe
Work screenshots reveal under a diagonal clip rather than fading, which
reads as intent rather than a default.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.workcard__media img {
animation: wipeIn linear both;
animation-timeline: view();
animation-range: entry 8% entry 62%;
}
}
}
@keyframes wipeIn {
from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transform: scale(1.06); }
to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; }
}
/* ==========================================================================
51. Standalone (installed) mode
When launched from the home screen there is no browser chrome, so the site
has to supply what the browser was providing: safe-area padding around the
notch and home indicator, and no accidental text selection or tap flash.
========================================================================== */
@media (display-mode: standalone) {
.site-head { padding-top: env(safe-area-inset-top); }
.site-foot { padding-bottom: max(env(safe-area-inset-bottom), 1rem); }
.dock { bottom: max(env(safe-area-inset-bottom), 1rem); }
.m-nav { padding-top: calc(env(safe-area-inset-top) + 1rem); }
/* An installed app should not offer to select its own navigation. */
.site-head, .site-foot, .dock, .m-nav, .nav, .strip, .clients {
-webkit-user-select: none;
user-select: none;
}
}
/* App-like touch behaviour, everywhere on a phone rather than only when
installed -- these are improvements in a browser too. */
@media (hover: none) {
a, button, summary, .cta, .dock__toggle {
-webkit-tap-highlight-color: transparent;
}
/* Stop a scroll inside the mobile menu from dragging the page behind it. */
.m-nav { overscroll-behavior: contain; }
body { overscroll-behavior-y: none; }
}
/* A hairline that fills as you scroll the page. Reads as app chrome, costs
one element and no JavaScript. */
.progress {
position: fixed;
inset: 0 0 auto;
height: 2px;
z-index: 120;
transform-origin: 0 50%;
background: linear-gradient(90deg, var(--violet), var(--blue));
pointer-events: none;
scale: 0 1;
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.progress {
animation: progressGrow linear both;
animation-timeline: scroll(root block);
}
}
}
@keyframes progressGrow { to { scale: 1 1; } }
/* ==========================================================================
52. Mobile drawer — SCROLL FIX
The drawer was position: static and 1840px tall while carried
overflow: clip, so the page could not scroll and neither could the menu.
Everything below "Get found" was unreachable on a phone.
Now it is a fixed pane that scrolls itself.
========================================================================== */
@media (max-width: 63.99rem) {
.m-nav {
position: fixed;
inset: var(--head-h, 4.25rem) 0 0;
z-index: 150;
display: block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain; /* the page behind must not move */
background: var(--void);
padding: var(--s1) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
}
.m-nav[hidden] { display: none; }
/* Reset the huge display type: at 1.75rem the 20 service links could never
fit, which is what made the overflow fatal rather than merely untidy. */
.m-nav a { font-size: 1rem; padding-block: 0; }
.m-nav__top { font-size: 1.0625rem; }
.m-acc summary { font-size: 1.0625rem; }
}
/* ==========================================================================
53. Interactive work index
Hover a name, its screenshot appears and follows the cursor. This is the
signature interaction: the visitor does something and the site answers,
rather than watching motion happen at them.
========================================================================== */
/* ==========================================================================
9. v4 — THE LIVING LAYER
GSAP + Lenis drive the motion; everything here is the costume. Every rule
degrades: with no JS the page is fully visible and static.
========================================================================== */
html.ew-hold { overflow: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* Split-line mask: SplitText wraps heading lines in .ew-line */
.ew-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
/* ---- first-visit veil ---- */
.ew-veil {
position: fixed; inset: 0; z-index: 12000; background: var(--void);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
color: var(--violet-hi); clip-path: inset(0 0 0 0);
}
.ew-veil__sigil { width: clamp(84px, 14vw, 132px); }
.ew-veil__word { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.4rem); color: var(--paper); letter-spacing: -0.01em; }
.ew-veil__word b { color: var(--violet-hi); font-weight: 600; }
/* ---- wand cursor ---- */
.ew-cur, .ew-ring {
position: fixed; top: 0; left: 0; pointer-events: none; z-index: 11000;
border-radius: 50%; transform: translate(-50%, -50%);
}
.ew-cur { width: 7px; height: 7px; background: var(--violet-hi); }
.ew-ring {
width: 34px; height: 34px; border: 1px solid color-mix(in oklch, var(--violet-hi) 60%, transparent);
display: grid; place-items: center;
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--void);
transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1),
background .3s, border-color .3s;
}
.ew-ring span { opacity: 0; transition: opacity .2s; }
.ew-ring.is-link { width: 52px; height: 52px; border-color: var(--violet-hi); }
.ew-ring.is-view { width: 82px; height: 82px; background: var(--violet-hi); border-color: var(--violet-hi); }
.ew-ring.is-view span { opacity: 1; }
@media (pointer: coarse) { .ew-cur, .ew-ring { display: none; } }
/* ---- pointer spotlight (fine pointers only) ---- */
@media (pointer: fine) {
body::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
background: radial-gradient(540px circle at var(--mx, 50vw) var(--my, 38vh),
color-mix(in oklch, var(--violet-hi) 9%, transparent),
color-mix(in oklch, var(--blue) 4%, transparent) 40%, transparent 64%);
}
}
/* ---- header states ---- */
.site-head { transition: transform .5s cubic-bezier(.22,1,.36,1), background .35s, border-color .35s; }
.site-head.is-hidden { transform: translateY(-110%); }
.site-head.is-solid {
background: color-mix(in oklch, var(--void) 78%, transparent);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
/* ---- orb hero (front page) ---- */
.hero--orb { min-height: 100svh; display: flex; align-items: center; text-align: left; overflow: clip; }
.hero--orb .hero__in { max-width: var(--wrap); margin-inline: auto; width: 100%; text-align: left; position: relative; z-index: 1; }
.hero--orb h1 { font-size: clamp(2.6rem, 7vw, 6.6rem); max-width: 14ch; overflow-wrap: anywhere; min-width: 0; }
.hero--orb h1 b { color: var(--violet-hi); font-weight: inherit; }
.hero--orb .hero__lede { margin-inline: 0; max-width: 52ch; text-align: left; }
.hero--orb .ctas { justify-content: flex-start; }
.orb {
position: absolute; top: 50%; right: max(-150px, -11vw); translate: 0 -50%;
width: min(58vw, 640px); aspect-ratio: 1; pointer-events: none; z-index: 0;
}
.orb svg.orb__r1, .orb svg.orb__r2 { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb svg.orb__r2 { inset: 12%; width: 76%; height: 76%; margin: auto; }
.orb text { font-family: var(--f-mono); font-size: 15px; letter-spacing: 6px; fill: var(--violet); }
.orb .orb__r2 text { fill: color-mix(in oklch, var(--violet-hi) 72%, transparent); font-size: 12.5px; }
.orb__core {
position: absolute; inset: 30%; border-radius: 50%;
border: 1px solid color-mix(in oklch, var(--violet) 45%, transparent);
display: grid; place-items: center;
pointer-events: auto;
}
@media (pointer: coarse) { .orb__core { pointer-events: none; } }
.orb__core::before {
content: ""; position: absolute; inset: 12%; border-radius: 50%;
border: 1px dashed color-mix(in oklch, var(--blue) 40%, transparent);
}
/* The sigil and its liquid-metal overlay share one box, so the hover cast
transforms the wrapper once and both layers move together. */
/* The hero copy column is centred in a full-width box, and on the orb hero that
box lies right across the orb. It has no background and no content out there,
but it still took every pointer event aimed at the sigil: measured in a
rendered page, 0 of 25 sample points on .orb__core were reachable, so the
hover cast that ring() has been wiring up since v4.0 -- the tilt, the glow,
the rings spinning to 6x, the sparks -- could never fire on desktop. The five
copy blocks take the pointer back individually, so text selection and the
CTAs are unchanged; only the empty space around them stops intercepting. */
.hero--orb .hero__in { pointer-events: none; }
.hero--orb .hero__in > * { pointer-events: auto; }
.orb__sigil {
position: relative;
display: block;
width: 42%;
aspect-ratio: 1;
line-height: 0;
}
.orb__core svg { width: 100%; color: var(--violet-hi); }
.orb__liquid {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
/* Screen, so the shader can only ADD light to the mark beneath it.
Cross-fading the two instead was measurably worse than doing nothing: a
liquid-metal render is mostly dark bands with a few highlights, so at the
107px this mark actually occupies it came out dimmer and less legible than
the flat sigil it was replacing. Screened over the solid mark, the
silhouette stays exactly as readable as before and the metal reads as a
moving sheen across it -- which is also why the SVG below keeps full
opacity rather than fading out. */
mix-blend-mode: screen;
}
.orb__liquid canvas { display: block; width: 100%; height: 100%; }
/* Scoped to .is-liquid, which only ever appears once the WebGL2 mount has
succeeded -- no-JS, no-WebGL and reduced-motion visitors keep the solid
sigil and its cast animation untouched. */
.is-liquid > .orb__liquid { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.orb__liquid { display: none; }
}
@media (max-width: 900px) {
.hero--orb {
min-height: auto;
align-items: flex-start;
padding-top: calc(var(--head-h, 76px) + 2.25rem);
padding-bottom: 14vh;
}
.statement { padding-block: 8vh; }
.statement p { max-width: none; }
.ley { padding-block: 2.2rem; }
.orb { top: auto; bottom: -10vh; right: -34vw; translate: 0 0; width: 100vw; opacity: .3; pointer-events: none; }
}
/* ---- statement ---- */
.statement { padding: 16vh var(--pad); position: relative; z-index: 2; }
.statement > .statement__in { max-width: var(--wrap); margin-inline: auto; }
.statement p {
font-family: var(--f-display); font-weight: 600; font-style: normal;
font-size: clamp(1.55rem, 3.4vw, 3rem); line-height: 1.24; letter-spacing: -0.01em;
max-width: 24ch; color: var(--paper);
}
.statement p em { font-style: normal; color: var(--violet-hi); }
/* ---- stacked buckets (front page) ---- */
.buckets--stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4vh; }
.buckets--stack .bucket { max-width: none; }
@media (max-width: 900px) {
.buckets--stack.is-stacking .bucket { position: static !important; min-height: 0; }
}
.buckets--stack.is-stacking .bucket {
position: sticky; top: calc(76px + 3vh);
background: linear-gradient(135deg, var(--ink), var(--raise));
border: 1px solid var(--line); border-radius: 20px;
min-height: 46vh; will-change: transform;
}
/* ---- work index: the full component. Directional fill rows; the
screenshot rides the wand, centered in its frame. ---- */
.wx { position: relative; }
.wx__rows { border-top: 1px solid var(--line); }
.wx__row {
position: relative; overflow: hidden;
display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center; gap: 0.35rem 1.25rem;
padding: clamp(1.1rem, 2.6vw, 1.9rem) clamp(0.75rem, 2vw, 1.5rem);
border-bottom: 1px solid var(--line);
text-decoration: none; color: inherit; isolation: isolate;
}
.wx__row::after {
content: ""; position: absolute; inset: 0; z-index: 0;
background: var(--accent); transform: scaleY(0); transform-origin: top;
transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.wx__row.from-bottom::after { transform-origin: bottom; }
.wx__row:hover::after, .wx__row:focus-visible::after { transform: scaleY(1); }
.wx__row > * { position: relative; z-index: 1; }
.wx__n {
font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em;
color: var(--violet); align-self: start; padding-top: 0.4em;
}
.wx__name {
font-family: var(--f-display); font-weight: 700;
font-size: clamp(1.5rem, 4.6vw, 3.25rem); letter-spacing: -0.035em; line-height: 1.02;
color: color-mix(in oklch, var(--paper) 88%, transparent);
transition: transform .5s cubic-bezier(.22,1,.36,1), color .3s;
}
.wx__cat {
grid-column: 2; font-family: var(--f-mono); font-size: 0.75rem;
letter-spacing: 0.08em; color: var(--mute); transition: color .3s;
}
.wx__go {
font-size: 1.5rem; color: var(--accent); opacity: 0; transform: translateX(-10px);
transition: opacity .3s, transform .3s, color .3s;
}
@media (hover: hover) {
.wx__row:hover .wx__name { transform: translateX(1.2vw); }
.wx__row:hover .wx__go { opacity: 1; transform: none; }
.wx__row:hover .wx__name, .wx__row:hover .wx__cat,
.wx__row:hover .wx__n, .wx__row:hover .wx__go { color: var(--void); }
.wx__rows:has(.wx__row:hover) .wx__row:not(:hover) .wx__name {
color: color-mix(in oklch, var(--paper) 30%, transparent);
}
}
.wx__stage {
position: fixed; top: 0; left: 0; width: min(430px, 34vw); aspect-ratio: 8/5;
z-index: 800; pointer-events: none; border-radius: 12px; overflow: hidden;
opacity: 0; border: 1px solid var(--line);
box-shadow: 0 24px 60px color-mix(in oklch, var(--void) 72%, transparent);
}
.wx__pv {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: 0; transform: none; transition: opacity .3s;
}
.wx__pv.on { opacity: 1; }
.wx__thumb {
grid-column: 1 / -1; width: 100%; height: auto; border-radius: 6px;
border: 1px solid var(--line); margin-top: 0.9rem;
}
.wx.is-live .wx__thumb { display: none; }
@media (hover: hover) and (min-width: 48rem) { .wx__thumb { display: none; } }
@media (hover: none), (max-width: 47.99rem) {
.wx__stage { display: none; }
.wx__go { display: none; }
}
/* ---- giant footer word ---- */
.site-foot { overflow: hidden; }
.foot-word {
font-family: var(--f-display); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em;
font-size: clamp(4rem, 16.5vw, 15rem); text-align: center; user-select: none;
color: transparent; -webkit-text-stroke: 1px color-mix(in oklch, var(--paper) 22%, transparent);
padding-top: 3rem; overflow-wrap: anywhere; min-width: 0;
}
.foot-word b { font-weight: 700; -webkit-text-stroke: 1px color-mix(in oklch, var(--violet-hi) 55%, transparent); }
/* footer brand: the exact header lockup, footer-sized */
.site-foot__logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.site-foot__logo .brand__mark { width: 2.4rem; height: 2.4rem; }
.site-foot__logo .brand__word { font-size: 1.45rem; }
/* ---- ley line: the section seam. A turning rune seal; the line draws
outward and lights its star nodes as it enters view. Without JS it
renders complete and lit. ---- */
.ley {
display: flex; align-items: center;
padding: clamp(2.8rem, 6vw, 4.5rem) var(--pad);
}
.ley__line { position: relative; flex: 1; height: 1px;
background: color-mix(in oklch, var(--paper) 10%, transparent); }
.ley__fill { position: absolute; inset: 0;
background: linear-gradient(90deg,
color-mix(in oklch, var(--accent) 0%, transparent),
color-mix(in oklch, var(--accent) 70%, transparent) 30%,
color-mix(in oklch, var(--accent) 70%, transparent) 70%,
color-mix(in oklch, var(--accent) 0%, transparent));
}
.ley__line--l .ley__fill { transform-origin: right center; }
.ley__line--r .ley__fill { transform-origin: left center; }
.ley__node {
position: absolute; top: 50%; width: 7px; height: 7px;
transform: translate(-50%, -50%) rotate(45deg);
background: var(--accent);
box-shadow: 0 0 10px color-mix(in oklch, var(--accent) 60%, transparent);
}
.ley__seal {
position: relative; width: 62px; height: 62px; flex: none;
margin-inline: clamp(0.9rem, 2vw, 1.6rem);
display: grid; place-items: center;
}
.ley__seal::before {
content: ""; position: absolute; inset: 0; border-radius: 50%;
border: 1px dashed color-mix(in oklch, var(--accent) 50%, transparent);
animation: leyspin 26s linear infinite;
}
.ley__seal::after {
content: ""; position: absolute; inset: 9px; border-radius: 50%;
border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
}
.ley__seal svg {
width: 26px; height: 26px; color: var(--accent);
filter: drop-shadow(0 0 8px color-mix(in oklch, var(--accent) 55%, transparent));
}
@keyframes leyspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ley__seal::before { animation: none; } }
/* ---- rune-coin social icons ---- */
.socoins { display: inline-flex; align-items: center; gap: 0.55rem; }
.socoin {
position: relative; width: 40px; height: 40px; flex: none;
display: grid; place-items: center; border-radius: 50%;
color: var(--text-hi, var(--paper)); transform-style: preserve-3d;
border: 1px solid color-mix(in oklch, var(--paper) 16%, transparent);
transition: color .3s, border-color .3s;
}
.socoin__ring {
position: absolute; inset: -4px; border-radius: 50%;
border: 1px dashed color-mix(in oklch, var(--accent) 45%, transparent);
opacity: 0; transition: opacity .3s;
}
.socoin__glyph { width: 17px; height: 17px; }
.socoin:hover { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
.socoin:hover .socoin__ring { opacity: 1; animation: leyspin 8s linear infinite; }
.site-head .socoins { margin-right: 0.9rem; }
@media (max-width: 1180px) { .site-head .socoins { display: none; } }
.m-nav__foot .socoins { margin-top: 0.9rem; }
.m-nav__foot .socoin { width: 44px; height: 44px; }
.site-foot .socoins { margin-top: 1rem; display: flex; }
/* ---- spellbar: scroll progress with a star at its head ---- */
.spellbar {
position: fixed; top: 0; left: 0; height: 2px; width: 100%;
z-index: 10800; pointer-events: none;
background: linear-gradient(90deg, var(--violet-hi), var(--blue));
transform: scaleX(0); transform-origin: left center;
}
.spellbar__star {
position: fixed; top: 1px; left: 0; width: 14px; height: 14px;
z-index: 10801; pointer-events: none; color: var(--violet-hi);
transform: translate(-50%, -50%);
filter: drop-shadow(0 0 6px color-mix(in oklch, var(--violet-hi) 70%, transparent));
}
/* ---- comet border on primary CTAs ---- */
@property --cta-a { syntax: ""; inherits: false; initial-value: 0deg; }
.cta:not(.cta--ghost) { position: relative; }
.cta:not(.cta--ghost)::after {
content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
background: conic-gradient(from var(--cta-a),
transparent 0turn 0.82turn,
color-mix(in oklch, var(--paper) 85%, transparent) 0.9turn,
transparent 0.98turn 1turn);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: ctacomet 3.2s linear infinite; pointer-events: none;
}
@keyframes ctacomet { to { --cta-a: 360deg; } }
/* ---- pointer sheen on cards ---- */
.bucket, .deliv__i, .quote, .price__row, .workcard { position: relative; }
.bucket::after, .deliv__i::after, .quote::after, .price__row::after, .workcard::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(220px circle at var(--lx, 50%) var(--ly, 50%),
color-mix(in oklch, var(--accent) 10%, transparent), transparent 70%);
opacity: 0; transition: opacity .35s;
}
.bucket:hover::after, .deliv__i:hover::after, .quote:hover::after,
.price__row:hover::after, .workcard:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.cta:not(.cta--ghost)::after { animation: none; opacity: 0; }
.spellbar, .spellbar__star { display: none; }
.socoin:hover .socoin__ring { animation: none; }
}
/* ---- the constellation canvas behind the homepage hero ---- */
.ew-const { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ew-const { display: none; } }
/* ---- what-we-build chips under the work heading ---- */
.wtypes {
list-style: none; padding: 0; margin: 1.4rem 0 2.2rem;
display: flex; flex-wrap: wrap; gap: 0.55rem;
}
.wtypes li {
font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.08em;
text-transform: uppercase; color: color-mix(in oklch, var(--paper) 78%, transparent);
border: 1px solid color-mix(in oklch, var(--paper) 16%, transparent);
border-radius: 999px; padding: 0.42rem 0.85rem;
transition: color .3s, border-color .3s, background .3s, transform .3s;
}
.wtypes li:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.wtypes__any {
background: var(--accent); color: var(--void) !important;
border-color: var(--accent) !important;
}
/* ---- the star wizard familiar ---- */
.ew-wiz {
position: fixed; left: 0; top: 0; transform-origin: 50% 50%;
z-index: 101; pointer-events: none;
filter: drop-shadow(0 0 14px color-mix(in oklch, var(--violet) 18%, transparent));
}
@media (prefers-reduced-motion: reduce) { .ew-wiz { display: none; } }
/* ---- the Arcane Web realm behind the Services page ---- */
.realm-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; }
.realm-shade {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(90deg, color-mix(in oklch, var(--void) 78%, transparent) 0%,
color-mix(in oklch, var(--void) 50%, transparent) 46%,
color-mix(in oklch, var(--void) 18%, transparent) 100%),
linear-gradient(180deg, color-mix(in oklch, var(--void) 70%, transparent), transparent 22%, transparent 78%, color-mix(in oklch, var(--void) 70%, transparent));
}
body.has-realm main { position: relative; z-index: 1; }
body.has-realm .site-foot { position: relative; z-index: 1; }
body.has-realm:not(.realm-scoped) .hero--sm { background: transparent; }
body.has-realm:not(.realm-scoped) .hero--sm::before, body.has-realm:not(.realm-scoped) .hero--sm::after { opacity: 0.35; }
body.has-realm .gset, body.has-realm .bucket, body.has-realm .deliv__i {
background: color-mix(in oklch, var(--ink) 74%, transparent);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.has-realm .gset { padding: 1.4rem; border-radius: 14px; border: 1px solid color-mix(in oklch, var(--paper) 8%, transparent); }
@media (min-width: 901px) {
body.has-realm:not(.has-stack) .gsets { max-width: 62%; }
body.has-realm:not(.has-stack) .gsvc__desc { max-width: 26ch; }
}
@media (max-width: 900px) {
.realm-shade { background: linear-gradient(180deg, color-mix(in oklch, var(--void) 70%, transparent), color-mix(in oklch, var(--void) 45%, transparent) 30%, color-mix(in oklch, var(--void) 45%, transparent) 70%, color-mix(in oklch, var(--void) 70%, transparent)); }
}
@media (prefers-reduced-motion: reduce) { .realm-canvas, .realm-shade { display: none; } }
/* ---- services card stack: the four groups line up into the distance and
come forward one by one as you scroll (JS pins the stage and drives --d) ---- */
.stack-stage {
position: relative; height: 100vh; height: 100svh;
perspective: 1400px; perspective-origin: 50% 40%;
display: block; max-width: none;
}
.stack-card {
position: absolute; left: 0; top: 50%; width: min(66%, 860px);
transform: translate3d(0, -50%, 0);
transform-style: preserve-3d; will-change: transform, opacity;
margin: 0;
}
.stack-card.gset { padding: 1.1rem 1.3rem; width: min(70%, 920px); }
.stack-card.gset .gsvc__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) auto; column-gap: 1.2rem; }
.stack-stage--center .stack-card { left: 50%; width: min(86%, 1180px); transform: translate(-50%, -50%); }
/* work cards in a stack: side by side, capped so a card fits one screen */
.stack-card.workcard {
grid-template-columns: 1.25fr 1fr; gap: var(--s2); align-items: center;
background: color-mix(in oklch, var(--ink) 80%, transparent);
border: 1px solid color-mix(in oklch, var(--paper) 8%, transparent);
border-radius: 16px; padding: 1.4rem;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.stack-card.workcard .workcard__media img { max-height: 62vh; object-fit: cover; object-position: top; }
.stack-card.workcard h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.stack-card.workcard > div > p:not(.workcard__k) { font-size: 0.95rem; }
.stack-card.gset .gsvc__desc { max-width: none; font-size: 0.86rem; line-height: 1.35; }
.stack-card.gset .gsvc__row { padding-block: 0.5rem; }
.stack-card.gset .gset__head { margin-bottom: 0.5rem; }
.stack-card.gset .gset__head h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.stack-card.gset .gset__lede { margin: 0.2rem 0 0.4rem; }
/* ==========================================================================
THE REBUILD — the wizard destroys an old website; the new one shows
through. Old site = canvas painted by app.js; new site = the HTML below.
========================================================================== */
.rb { margin-top: var(--s2); }
.rb__frame {
position: relative; max-width: 1120px; margin-inline: auto;
border-radius: 14px; overflow: hidden; background: #070a1f;
border: 1px solid color-mix(in oklch, var(--paper) 12%, transparent);
box-shadow: 0 50px 110px -50px color-mix(in oklch, var(--violet) 70%, transparent);
}
.rb__chrome {
display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.75rem;
background: #d4d0c8; border-bottom: 1px solid #8a8a8a;
font: 500 0.74rem/1 var(--f-mono); color: #333;
transition: background .6s, color .6s, border-color .6s;
}
.rb__dots { display: flex; gap: 0.32rem; flex: none; }
.rb__dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ff5f57; }
.rb__dots i:nth-child(2) { background: #febc2e; }
.rb__dots i:nth-child(3) { background: #28c840; }
.rb__url {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem;
background: #fff; border: 1px solid #9a9a9a; border-radius: 3px; padding: 0.34rem 0.65rem;
white-space: nowrap; overflow: hidden; transition: background .6s, border-color .6s, border-radius .6s;
}
.rb__warn { color: #b3261e; font-weight: 700; flex: none; }
.rb__lock { display: none; flex: none; font-weight: 400; }
.rb__addr { overflow: hidden; text-overflow: ellipsis; }
.rb__addr--new { display: none; }
.rb--secure .rb__chrome { background: #10153a; border-color: #232a5c; color: var(--paper); }
.rb--secure .rb__url { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); border-radius: 999px; }
.rb--secure .rb__warn, .rb--secure .rb__addr--old { display: none; }
.rb--secure .rb__lock, .rb--secure .rb__addr--new { display: inline; }
.rb__screen {
position: relative; aspect-ratio: 16 / 10; overflow: hidden;
container-type: size; touch-action: manipulation; cursor: crosshair;
-webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.rb__old, .rb__fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rb__fx { pointer-events: none; }
.rb__hint {
position: absolute; left: 50%; bottom: 3.5%; transform: translate(-50%, 8px); z-index: 3; margin: 0;
padding: 0.5rem 0.95rem; border-radius: 999px; white-space: nowrap; pointer-events: none;
font: 600 0.74rem/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;
color: var(--void); background: var(--violet-hi); opacity: 0;
box-shadow: 0 10px 30px -8px color-mix(in oklch, var(--violet-hi) 80%, transparent);
transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.rb--hint .rb__hint { opacity: 1; transform: translate(-50%, 0); }
.rb__hint--b { display: none; }
.rb--done .rb__hint--a { display: none; }
.rb--done .rb__hint--b { display: inline; }
.rb__ctrl { display: flex; gap: 0.7rem; justify-content: center; margin-top: 1.2rem; }
.rb__b {
font: 600 0.78rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--paper); background: transparent; cursor: pointer;
border: 1px solid color-mix(in oklch, var(--violet-hi) 55%, transparent);
border-radius: 999px; padding: 0.7rem 1.1rem; min-height: 44px;
transition: background .25s, color .25s, border-color .25s;
}
.rb__b:hover, .rb__b:focus-visible { background: var(--violet-hi); color: var(--void); border-color: var(--violet-hi); }
.rb__b--replay { opacity: .45; }
.rb--done .rb__b--replay { opacity: 1; }
.rb__ctas { justify-content: center; margin-top: 1.4rem; }
.rb--static .rb__old, .rb--static .rb__fx, .rb--static .rb__hint, .rb--static .rb__ctrl { display: none; }
.rb--static .rbn__toast { opacity: 1; transform: none; }
/* ---- the new site (lives under the wreckage) ---- */
.rbn {
position: absolute; inset: 0; overflow: hidden;
font-size: 1.32cqw; color: #f2efff; font-family: var(--f-body);
display: grid; grid-template-rows: auto 1fr auto; gap: 3.5cqh; padding: 3cqh 3.6cqw 4cqh;
background:
radial-gradient(55% 70% at 80% 28%, rgba(119,97,223,.55), transparent 62%),
radial-gradient(45% 60% at 6% 96%, rgba(0,138,252,.32), transparent 62%),
linear-gradient(160deg, #10163d, #070a1f 62%);
}
.rbn__nav { display: flex; align-items: center; gap: 2em; }
.rbn__logo { display: flex; align-items: center; gap: .55em; font: 600 1.25em/1 var(--f-display); letter-spacing: -.01em; }
.rbn__logo i { width: 1.5em; height: 1.5em; border-radius: .45em; background: linear-gradient(135deg, #b47cfd, #008afc); box-shadow: 0 0 1.2em rgba(180,124,253,.6); }
.rbn__links { display: flex; gap: 1.8em; margin-left: auto; color: rgba(242,239,255,.7); font-size: .95em; }
.rbn__btn {
display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
padding: .85em 1.35em; border-radius: 999px; font-weight: 700; font-size: .95em; line-height: 1;
}
.rbn__btn--sm { padding: .65em 1.1em; font-size: .85em; background: #f2efff; color: #0b0f2a; }
.rbn__btn--go { background: linear-gradient(135deg, #b47cfd, #6a8dff 60%, #008afc); color: #fff; box-shadow: 0 .6em 1.8em -.5em rgba(140,110,255,.9); }
.rbn__btn--ghost { border: 1px solid rgba(242,239,255,.35); color: #f2efff; }
.rbn__btn--block { width: 100%; margin-top: .9em; }
.rbn__hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 5%; align-items: center; min-height: 0; position: relative; }
.rbn__pill { display: inline-flex; align-items: center; gap: .55em; padding: .5em .9em; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: .82em; color: rgba(242,239,255,.85); }
.rbn__pill i { width: .55em; height: .55em; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 .8em #3ee08f; }
.rbn__h { font: 600 3.9em/.98 var(--f-display); letter-spacing: -.02em; margin: .38em 0 .32em; }
.rbn__h em { font-style: normal; background: linear-gradient(90deg, #c9a4ff, #6fb6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rbn__p { font-size: 1.12em; color: rgba(242,239,255,.72); margin: 0 0 1.3em; }
.rbn__ctas { display: flex; gap: .8em; }
.rbn__phone {
position: relative; justify-self: center; width: 78%; padding: 1.3em 1.2em;
border-radius: 1.6em; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 2em 4em -1.5em rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
}
.rbn__ph-k { margin: 0 0 .8em; font-weight: 700; font-size: 1em; }
.rbn__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.rbn__slots span { text-align: center; padding: .7em 0; border-radius: .7em; background: rgba(255,255,255,.07); font-size: .9em; }
.rbn__slots .on { background: linear-gradient(135deg, #b47cfd, #008afc); font-weight: 700; }
.rbn__toast {
position: absolute; left: -12%; top: -14%; display: flex; align-items: center; gap: .55em;
padding: .7em 1em; border-radius: .9em; background: #f2efff; color: #0b0f2a; font-weight: 700; font-size: .9em;
box-shadow: 0 1.2em 2.4em -1em rgba(0,0,0,.7); opacity: 0; white-space: nowrap;
}
.rbn__toast i { font-style: normal; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; background: #3ee08f; color: #062a17; }
.rbn__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.rbn__cards div { padding: 1.1em 1.2em; border-radius: 1.1em; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.rbn__cards b { display: block; font: 600 1.05em/1.2 var(--f-display); margin-bottom: .35em; }
.rbn__cards span { font-size: .85em; color: rgba(242,239,255,.65); line-height: 1.35; }
.rbn__sweep {
position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateX(-120%);
background: linear-gradient(100deg, transparent 32%, rgba(210,190,255,.22) 48%, rgba(255,255,255,.35) 50%, rgba(210,190,255,.22) 52%, transparent 68%);
mix-blend-mode: screen;
}
/* tall stage: phones, and the vertical reel */
@media (max-width: 700px) {
.rb .rb__screen { aspect-ratio: 9 / 14; }
.rb .rbn { font-size: 3.35cqw; gap: 2.4cqh; padding: 2.6cqh 5cqw 3cqh; }
.rb .rbn__links { display: none; }
.rb .rbn__btn--sm { margin-left: auto; }
.rb .rbn__hero { grid-template-columns: 1fr; gap: 2.4cqh; align-content: start; }
.rb .rbn__h { font-size: 2.85em; margin: .4em 0 .3em; }
.rb .rbn__p { margin-bottom: 1em; }
.rb .rbn__phone { width: 100%; padding: 1em 1.1em; justify-self: stretch; }
.rb .rbn__ph-k { margin-bottom: .6em; }
.rb .rbn__slots span { padding: .55em 0; }
.rb .rbn__toast { left: auto; right: 4%; top: -1.1em; }
.rb .rbn__cards { grid-template-columns: 1fr 1fr 1fr; gap: .6em; }
.rb .rbn__cards div { padding: .8em .7em; }
.rb .rbn__cards b { font-size: .9em; }
.rb .rbn__cards span { display: none; }
.rb .rb__chrome { font-size: 0.68rem; }
.rb .rb__hint { font-size: 0.66rem; }
}
.rb.rb--tall .rb__screen { aspect-ratio: 9 / 14; }
.rb.rb--tall .rbn { font-size: 3.35cqw; gap: 2.4cqh; padding: 2.6cqh 5cqw 3cqh; }
.rb.rb--tall .rbn__links { display: none; }
.rb.rb--tall .rbn__btn--sm { margin-left: auto; }
.rb.rb--tall .rbn__hero { grid-template-columns: 1fr; gap: 2.4cqh; align-content: start; }
.rb.rb--tall .rbn__h { font-size: 2.85em; margin: .4em 0 .3em; }
.rb.rb--tall .rbn__p { margin-bottom: 1em; }
.rb.rb--tall .rbn__phone { width: 100%; padding: 1em 1.1em; justify-self: stretch; }
.rb.rb--tall .rbn__ph-k { margin-bottom: .6em; }
.rb.rb--tall .rbn__slots span { padding: .55em 0; }
.rb.rb--tall .rbn__toast { left: auto; right: 4%; top: -1.1em; }
.rb.rb--tall .rbn__cards { grid-template-columns: 1fr 1fr 1fr; gap: .6em; }
.rb.rb--tall .rbn__cards div { padding: .8em .7em; }
.rb.rb--tall .rbn__cards b { font-size: .9em; }
.rb.rb--tall .rbn__cards span { display: none; }
.rb.rb--tall .rb__chrome { font-size: 0.68rem; }
.rb.rb--tall .rb__hint { font-size: 0.66rem; }
/* ---- the magic layer ---- */
.ew-magic {
position: fixed; inset: 0; width: 100vw; height: 100vh;
pointer-events: none; z-index: 10500;
}
.ew-mote {
position: absolute; border-radius: 50%;
background: var(--violet-hi); opacity: 0.25;
box-shadow: 0 0 8px 2px color-mix(in oklch, var(--violet-hi) 45%, transparent);
pointer-events: none; z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
.ew-magic { display: none; }
.ew-mote { display: none; }
}
/* ---- motion safety ---- */
@media (prefers-reduced-motion: reduce) {
body::after { display: none; }
.ew-cur, .ew-ring, .ew-veil { display: none; }
.buckets--stack.is-stacking .bucket { position: static; min-height: 0; }
.site-head.is-hidden { transform: none; }
}
/* ==========================================================================
10. v4.1 — PERSONALITY LAYER
Each service page declares a family; the accent shifts with it while
staying inside the brand's three hues. The glyph, spell and twists are
driven from app.js; everything here degrades to a normal static page.
========================================================================== */
:root[data-fam="found"] { --accent: var(--blue); }
:root[data-fam="grow"] { --accent: color-mix(in oklch, var(--violet-hi) 52%, var(--blue)); }
:root[data-fam="run"] { --accent: color-mix(in oklch, var(--violet-hi) 68%, var(--paper)); }
/* the page's sigil: one huge outlined glyph drifting behind the hero */
.hero--svc { overflow: clip; }
.pglyph {
position: absolute; top: 8%; right: max(-40px, -3vw); z-index: 0;
font-family: var(--f-display), sans-serif; font-weight: 700; line-height: 1;
font-size: clamp(11rem, 30vw, 26rem); pointer-events: none; user-select: none;
color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklch, var(--accent) 34%, transparent);
}
.hero--svc .hero__in { position: relative; z-index: 1; }
@media (max-width: 760px) { .pglyph { font-size: 12rem; right: -8vw; opacity: .6; } }
/* services hub rows: directional fill, content inverts */
.svc__row { position: relative; }
.svc__row::after {
content: ""; position: absolute; inset: 0; z-index: 0;
background: var(--accent); transform: scaleY(0); transform-origin: top;
transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.svc__row.from-bottom::after { transform-origin: bottom; }
.svc__row:hover::after, .svc__row:focus-visible::after { transform: scaleY(1); }
.svc__row > * { position: relative; z-index: 1; }
.svc__row:hover { background: transparent; }
.svc__row:hover .svc__k, .svc__row:hover .svc__name, .svc__row:hover .svc__desc,
.svc__row:hover .svc__n, .svc__row:hover .svc__go { color: var(--void); }
.svc__row .svc__name { transition: transform .5s cubic-bezier(.22,1,.36,1), color .3s; }
.svc__row:hover .svc__name { transform: translateX(0.9vw); }
/* pricing rows: quiet until touched, then lit */
.price__row { transition: background .3s, border-color .3s; border-radius: 10px; }
.price__row:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); }
.price__row:hover .price__n b { color: var(--accent); }
/* deliverables / buckets / quotes tilt in 3D — give them a hover surface */
.deliv__i, .quote { will-change: transform; }
/* contact form: the field you are in glows like a charged rune */
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--accent);
box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent),
0 0 24px color-mix(in oklch, var(--accent) 22%, transparent);
transition: box-shadow .25s;
}
@media (prefers-reduced-motion: reduce) {
.pglyph { display: none; }
}
/* ==========================================================================
11. MOBILE RHYTHM — appended last so these overrides always win.
Phones get tighter section breathing and a footer built for thumbs.
========================================================================== */
@media (max-width: 900px) {
:root {
--s4: clamp(3.25rem, 9vw, 4.5rem);
--s3: clamp(2.5rem, 6.5vw, 3.5rem);
}
.statement { padding-block: 7vh; }
.ley { padding-block: 1.6rem; }
.hero--orb { padding-bottom: 11vh; }
/* footer: compact, tappable, no dead air */
.site-foot__in { padding: 2.6rem var(--pad) 1.6rem; gap: 1.9rem; }
.site-foot__cols { gap: 1.5rem 1.25rem; }
.site-foot__col { gap: 0.15rem; }
.site-foot__col .site-foot__h { margin-bottom: 0.35rem; }
.site-foot__col a { font-size: 0.95rem; padding-block: 0.32rem; line-height: 1.35; min-height: 44px; }
.site-foot__big {
display: block; text-align: center;
font-size: 1.15rem; padding: 1rem 1.4rem; border-radius: 999px;
background: var(--accent); color: var(--void);
margin-block: 0.4rem 0.9rem;
}
.site-foot__big span { color: inherit; }
.site-foot .socoins { justify-content: center; width: 100%; margin-top: 0.6rem; }
.site-foot__legal { text-align: center; }
.site-foot__legal-links { justify-content: center; }
.foot-word { font-size: clamp(3.4rem, 17vw, 8rem); padding-top: 1.6rem; }
/* work index on phones: the preview pins under the header and swaps as
rows scroll past — the cursor-follow, translated to the thumb */
.wx--scrollstage .wx__stage {
display: block; position: sticky; top: calc(var(--head-h, 76px) + 8px);
left: auto; width: 100%; aspect-ratio: 8/5; opacity: 1; transform: none;
z-index: 5; margin: 0 0 0.9rem; border-radius: 12px; overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 16px 40px color-mix(in oklch, var(--void) 78%, transparent);
background: var(--ink);
}
.wx--scrollstage .wx__thumb { display: none !important; }
.wx--scrollstage .wx__row { grid-column: auto; }
.wx__row.is-active::after { transform: scaleY(1); }
.wx__row.is-active .wx__name, .wx__row.is-active .wx__cat,
.wx__row.is-active .wx__n { color: var(--void); }
.wx__row.is-active .wx__name { transform: translateX(2vw); }
.wx--scrollstage .wx__row { transition: opacity .35s; }
.wx--scrollstage .wx__row.is-passed { opacity: 0.18; }
body.has-stack .gset { width: 100%; padding: 1rem; }
body.has-stack .gset__head h3 { font-size: 1.45rem; }
body.has-stack .gsvc__row { padding-block: 0.55rem; }
body.has-stack .gsvc__desc { font-size: 0.82rem; line-height: 1.3; }
body.has-stack .gsets { perspective: 900px; }
/* footer fold (mobile accordion; JS builds it, so no-JS keeps links open) */
.ffold .site-foot__h {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; user-select: none;
padding-block: 0.55rem; margin-bottom: 0;
border-bottom: 1px solid color-mix(in oklch, var(--paper) 10%, transparent);
}
.ffold__chev {
font-family: var(--f-mono); font-size: 1rem; line-height: 1;
color: var(--accent); display: inline-block;
}
.ffold .ffold__links { display: none; overflow: hidden; padding-block: 0.4rem 0.5rem; }
.ffold.is-open .ffold__links { display: grid; }
.site-foot__cols:has(.ffold) { gap: 0.4rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
}