/* =============================================================================
wwh-darkmode.css — Dark-mode reframe + AWAL-style grain + polish overrides.
Loaded LAST so it overrides anything earlier. Addresses WELI 2026-06-05:
- "really hard to read with the glitchy effect" — pull mosaic from text
sections; keep only on splash heroes.
- "Can instead green that page be grey with the colours sprinkled on top
of it, like the awal site reference" — flip body to dark grey base,
add subtle high-frequency film-grain (AWAL style).
- "create sections with background colour changing, so it is not boring" —
alternate section surfaces (void / void-soft / forest-deep / forest /
savanna) so sections breathe.
- "What we evolved for: write it entirely in capital letters."
- "Below the showreel.. those 2 boxes need to be centralised in the page."
- "The yellow numbers with the green background does not work" — swap to
magenta (high-contrast on every palette surface).
========================================================================== */
/* ---------- 1. Body: flip to dark + sage-light ink (AWAL canvas) ---------- */
body.wwh-awal {
background: var(--wwh-void-soft); /* #19191D */
color: var(--wwh-sage-light); /* #C5DFC3 */
}
/* =============================================================================
0. SPLASH CLEAN-OUT — WELI 2026-06-05 (after 1557e88 restore):
'behind that there is some old green + southern cross stars and an old
wildwoohoo art work and stuff - can you clean that out first?'
The default splash CSS in wwh-archive.css paints two legacy layers that
stack OVER the body universe and read as the old aesthetic:
- .wwh-splash background loads /brand-kit/starfield.svg (the Southern
Cross) + a black-to-shadow gradient.
- .wwh-splash-bg::after paints a 'full-spectrum diffused bloom' radial
gradient (sage / yellow / magenta / sage / savanna stops) that reads
as the pink-yellow halo centred behind the wordmark.
Both off. Splash now transparent so the body universe (starfield + TV
filter + magenta + ghost band + NO SIGNAL chip) is the ONLY thing the
wordmark sits on.
========================================================================== */
body.wwh-awal .wwh-splash {
background: transparent !important;
/* WELI 2026-06-05: 'make the galaxy big again covering the whole top
part of the page all the way to the top under the header menu.'
Splash now 88vh tall so the universe canvas behind it covers the
full top viewport. */
min-height: clamp(620px, 88vh, 920px) !important;
}
body.wwh-awal .wwh-splash-bg {
background: transparent !important;
}
body.wwh-awal .wwh-splash-bg::after {
display: none !important;
background: transparent !important;
}
/* Also strip any legacy starfield SVG from the .wwh-splash-bg::before if
it crops up. The body universe is the single source of starfield now. */
body.wwh-awal .wwh-splash-bg::before {
background: transparent !important;
}
/* WELI 2026-06-05: photo of the splash after clicking the wordmark showed
a giant white DM-Serif 'WILDWO...' text behind the cyan SVG wordmark.
That's the .name span ('WildWooHoo') still rendering visually - either
before brand-effects.js upgradeSplashLogo() runs, or if it fails. The
span is needed in the DOM (brand-effects.js queries it as the upgrade
trigger; screen readers read it as the accessible name) but it must
not PAINT visually. Make it sr-only. */
body.wwh-awal .wwh-splash-logo .name {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
font-size: 0 !important;
color: transparent !important;
}
body.wwh-awal .wwh-splash-logo .mark {
display: none !important;
}
/* =============================================================================
WORDMARK SLOW ZOOM — WELI 2026-06-05.
Two phases composed:
1. Intro zoom-in (3s, ease-out, once on load): scale 0.92 -> 1.
Wordmark fades into full size when the splash mounts.
2. Breathing loop (10s, ease-in-out, infinite, starts after intro):
gentle scale 1 <-> 1.025 so the wordmark stays alive without
becoming distracting.
transform-origin centered so the scale pulses from the middle.
========================================================================== */
body.wwh-awal .wwh-wordmark {
transform-origin: center center;
animation:
wwh-wordmark-intro 3s cubic-bezier(.22, 1, .36, 1) both,
wwh-wordmark-breathe 10s ease-in-out 3s infinite;
}
@keyframes wwh-wordmark-intro {
0% { transform: scale(0.92); }
100% { transform: scale(1); }
}
@keyframes wwh-wordmark-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
body.wwh-awal .wwh-wordmark { animation: none; }
}
/* ---------- 2. Kill the body-wide palette-mosaic overlay (it was making
text hard to read). Replace with a near-invisible SVG film grain that
sits at 7% opacity on top — like AWAL's quiet grain. ---------- */
body.wwh-awal::after {
opacity: 0.10;
background-image:
url("data:image/svg+xml;utf8, and , those static-flow elements sit at z:auto - and
per CSS painting rules, positioned z:0 PAINTS ABOVE static z:auto in
the same stacking context. Result: galaxy was covering every section
(manifesto, flagship video, wings tile, founder bridge, footer, etc.)
except the ones with their own inline position:relative/z:1 (like
.wwh-stats). WELI saw a 'totally blank page with just corner labels'.
Force main + footer + every section above the canvas. */
body.wwh-awal main,
body.wwh-awal > footer,
body.wwh-awal .wwh-footer {
position: relative;
z-index: 2;
}
body.wwh-awal main > section,
body.wwh-awal .wwh-chapter {
position: relative;
z-index: 2;
}
/* Each chapter section gets a small magenta monospace label rendered in
the top-right corner via ::before reading from data-chapter="NN / NAME".
Pure CSS, no extra HTML. */
body.wwh-awal .wwh-chapter {
position: relative;
}
body.wwh-awal .wwh-chapter::before {
content: "[ " attr(data-chapter) " ]";
position: absolute;
top: 22px;
right: 28px;
z-index: 5;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
/* WELI 2026-06-06: 'I do not want too much of a girly look. magenta only
to break the green a bit.' Chapter chips were saturated magenta which
read too pink across the page. Pulled to muted sage-cream as the
resting state; magenta only flickers in on the bass-beat layer. */
color: rgba(197, 223, 195, 0.55);
text-shadow: 0 0 6px rgba(197, 223, 195, 0.22);
pointer-events: none;
/* On the splash chapter the existing TRANSMITTING chip lives at
top:84px right:22px; pull the WELCOME label to the left so they don't
stack. */
}
body.wwh-awal .wwh-splash.wwh-chapter::before {
right: auto;
left: 28px;
top: 84px;
}
@media (max-width: 720px) {
body.wwh-awal .wwh-chapter::before {
top: 14px;
right: 16px;
font-size: 9px;
letter-spacing: 0.18em;
}
body.wwh-awal .wwh-splash.wwh-chapter::before {
left: 16px;
top: 70px;
}
}
/* Wordmark size: pulled back from 76vw down to 58vw so the galaxy has
more negative space around the anchor (dghez_LAB principle — the form
is the focal point but never crowds the field). Mobile clamp also
trimmed. */
body.wwh-awal .wwh-wordmark {
width: clamp(280px, 58vw, 780px) !important;
max-width: 88vw;
}
@media (max-width: 800px) {
body.wwh-awal .wwh-wordmark {
width: clamp(240px, 72vw, 460px) !important;
}
}
/* =============================================================================
FIXED HERO + FLOWING CONTENT — WELI 2026-06-06 (revised):
'break the sectional structure. bring the below text one after the
other without them needing to be attached to a page section structure.
first frame locked unmoving.. what moves is the content (it moves up,
trigger is scroll down).'
The splash becomes a position:fixed full-viewport scene that never
leaves the screen. Everything below sits in normal flow but starts at
margin-top:100vh so it begins below the fixed hero. Scroll = content
rises over the locked hero. The chapter labels + 90vh chapter heights
are removed - content flows fluidly.
========================================================================== */
/* Splash hero: FIXED to viewport, locked forever. Galaxy still drifts
behind it (galaxy is z:0, splash is z:1). Content overlay is z:2 and
scrolls UP over this. */
body.wwh-awal .wwh-splash {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100vh !important;
min-height: 100vh !important;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* iOS safe-area handling so the wordmark doesn't clip behind the
notch when the URL bar collapses */
padding-top: env(safe-area-inset-top, 0);
}
/* Main + footer: relative-positioned, sit at z:2 ABOVE the fixed hero.
margin-top on main pushes the first scrolling content BELOW the
viewport initially - the first scroll gesture pulls it up over the
hero. */
body.wwh-awal main {
position: relative;
z-index: 2;
margin-top: 100vh;
}
body.wwh-awal > footer,
body.wwh-awal .wwh-footer {
position: relative;
z-index: 2;
}
/* WELI 2026-06-06 (revised): legacy drift tracks no longer mount on the
home page - replaced by the hard-cut leap sequence below. The
.track-a / .track-b CSS overrides are kept for other pages that still
use the drifting showreel (M&E, R&E, etc.).
On home, the .wwh-leap-sequence element sits inside .wwh-splash-bg and
fills it. Each frame is a full-bleed image, only one visible at a time,
with a fast cut transition on the beat. */
body.wwh-awal .wwh-splash.wwh-chapter > .wwh-splash-content {
margin-top: -4vh;
}
/* =============================================================================
LEAP SEQUENCE — WELI 2026-06-06 (revised).
'we still need the 3D outer space in that frame.. use these images smaller.
currently you cover entirely the 3D galaxy which was giving the high-tech
messaging to the site.. now it looks like a wildlife site.'
The leap sequence is now a SMALL framed TECH MONITOR floating in the
upper-third of the splash, not a full-bleed background. Galaxy reads
through everywhere around it. The cinematic glitch transitions happen
INSIDE this contained viewport, which makes them feel like a real HUD
readout switching transmissions, not a screen takeover.
Corner brackets (cyan) + sage hairline + subtle outer glow + tech label
complete the sci-fi monitor read.
========================================================================== */
/* WELI 2026-06-06: lowercase Caveat wordmark with yellow-marker highlight.
Replaces the SVG outline build on the home page (brand-effects.js skips
the upgrade when data-wordmark-mode="text"). The Caveat handwritten
brush + Kangaroo Time-style highlighter band BEHIND the word reads as
the studio's signature look in the splash itself. */
body.wwh-awal .wwh-splash-logo[data-wordmark-mode="text"] {
display: inline-block;
cursor: pointer;
user-select: none;
position: relative;
z-index: 5;
/* Override any inherited fixed widths from the SVG wordmark rules above */
width: auto !important;
max-width: 92vw;
}
body.wwh-awal .wwh-splash-logo[data-wordmark-mode="text"] .name {
display: inline-block;
font-family: 'Caveat', 'Comic Sans MS', cursive;
font-size: clamp(72px, 14vw, 220px);
font-weight: 700;
color: var(--wwh-sage-light);
text-transform: lowercase;
line-height: 1;
letter-spacing: -0.01em;
position: relative;
padding: 0 0.24em;
white-space: nowrap;
/* Yellow marker highlight behind text - the Kangaroo Time signature look */
background: linear-gradient(180deg,
transparent 0%,
transparent 48%,
rgba(240, 229, 114, 0.62) 50%,
rgba(240, 229, 114, 0.82) 72%,
rgba(240, 229, 114, 0.32) 92%,
transparent 100%);
/* Glow halo around the cream text */
text-shadow:
0 0 14px rgba(197, 223, 195, 0.55),
0 0 32px rgba(240, 229, 114, 0.35),
0 0 60px rgba(240, 229, 114, 0.18);
transition: transform 0.42s cubic-bezier(.22, 1, .36, 1);
}
body.wwh-awal .wwh-splash-logo[data-wordmark-mode="text"]:hover .name {
transform: scale(1.02);
}
/* When the text swaps to 'what we evolved for' the font size drops so the
longer phrase fits the same visual footprint. */
body.wwh-awal .wwh-splash-logo[data-wordmark-mode="text"].is-question .name {
font-size: clamp(40px, 7.5vw, 110px);
letter-spacing: 0.005em;
}
/* Glitch swap animation - runs on each blink toggle */
body.wwh-awal .wwh-splash-logo[data-wordmark-mode="text"].is-blinking .name {
animation: wwh-wordmark-glitch-swap 360ms cubic-bezier(.18, .8, .25, 1);
}
@keyframes wwh-wordmark-glitch-swap {
0% {
transform: translateX(-3px) skewX(0.5deg);
text-shadow:
-4px 0 0 rgba(220, 60, 173, 0.88),
4px 0 0 rgba(93, 223, 230, 0.88),
0 0 28px rgba(197, 223, 195, 0.62);
filter: blur(0.5px);
}
18% {
transform: translateX(2px) skewX(-0.3deg);
text-shadow:
-3px 1px 0 rgba(220, 60, 173, 0.75),
3px -1px 0 rgba(93, 223, 230, 0.75),
0 2px 0 rgba(240, 229, 114, 0.55);
filter: blur(0);
}
46% {
transform: translateX(-1px);
text-shadow:
-1px 0 0 rgba(220, 60, 173, 0.32),
1px 0 0 rgba(93, 223, 230, 0.32),
0 0 18px rgba(197, 223, 195, 0.45);
}
100% {
transform: translateX(0);
text-shadow:
0 0 14px rgba(197, 223, 195, 0.55),
0 0 32px rgba(240, 229, 114, 0.35),
0 0 60px rgba(240, 229, 114, 0.18);
filter: blur(0);
}
}
/* .wwh-awal-nav-about CSS removed 2026-06-06: About moved to the
floating .wwh-about-corner top-left element instead of being a nav link. */
/* WELI 2026-06-06 (final): 'I loved the first version more.. photos in
the full page.' Restored to FULL-BLEED so the leap photos become the
immersive backdrop of the home page. Galaxy moves to /studio/. Corner
brackets + sage frame + mono SUBJECT label all dropped - the photos
speak for themselves at full size. */
body.wwh-awal .wwh-leap-sequence {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
/* Cyan corner brackets removed - full bleed needs no frame */
body.wwh-awal .wwh-leap-sequence::before {
content: none;
}
/* Mono SUBJECT label - kept but repositioned bottom-centre so it reads
as a footer caption on the full-bleed photo, not a frame label. */
body.wwh-awal .wwh-leap-label {
position: fixed;
bottom: clamp(140px, 16vh, 200px);
left: 50%;
transform: translateX(-50%);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(197, 223, 195, 0.72);
text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
white-space: nowrap;
pointer-events: none;
z-index: 3;
transition: color 0.18s ease, text-shadow 0.18s ease;
}
body.wwh-awal .wwh-leap-label.is-cutting {
/* Mono label flickers on cut - matches the monitor's glitch beat */
animation: wwh-leap-label-glitch 320ms ease-out;
}
@keyframes wwh-leap-label-glitch {
0% { color: rgba(93, 223, 230, 1); text-shadow: -3px 0 0 rgba(220,60,173,0.8), 3px 0 0 rgba(93,223,230,0.8); }
18% { color: rgba(220, 60, 173, 0.95); text-shadow: -2px 0 0 rgba(93,223,230,0.65), 2px 0 0 rgba(240,229,114,0.65); }
55% { color: rgba(197, 223, 195, 0.88); text-shadow: 0 0 6px rgba(197,223,195,0.4); }
100% { color: rgba(197, 223, 195, 0.72); text-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
}
@media (max-width: 720px) {
body.wwh-awal .wwh-leap-label {
top: calc(20vh + 70vw * 9 / 16);
font-size: 9px;
letter-spacing: 0.22em;
}
}
body.wwh-awal .wwh-leap-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
/* Cinematic grade applied to every frame - kills the warm-golden-hour
Pinterest read. Slight desaturation + lifted contrast + cool
midtones. */
filter: saturate(0.62) contrast(1.18) brightness(0.88);
/* Subtle scale so the held frame breathes (not static) */
transform: scale(1.03);
transition:
opacity 0.18s cubic-bezier(.4, 0, .2, 1),
transform 2.6s ease-out,
filter 0.32s ease-out;
/* Slight chromatic edge tint at corners - inherits the universe CRT
language without overwhelming the photo */
-webkit-mask-image: radial-gradient(ellipse 95% 88% at center,
black 62%, rgba(0,0,0,0.86) 88%, rgba(0,0,0,0.62) 100%);
mask-image: radial-gradient(ellipse 95% 88% at center,
black 62%, rgba(0,0,0,0.86) 88%, rgba(0,0,0,0.62) 100%);
}
body.wwh-awal .wwh-leap-frame.is-active {
/* Full-bleed backdrop - reduced opacity so the wordmark + welcome
prompt + WHAT WE EVOLVED FOR all read cleanly over the photo. */
opacity: 0.74;
transform: scale(1);
}
/* WELI 2026-06-06: 'add high tech transition - alien superpower spaceship
stuff.. a bit of chromatic aberration.. black and white glitching..
use brand colours in the glitch.'
Cut transition is now a 320ms 5-phase glitch sequence:
0% - frame slams in, fully desaturated, max chromatic split
(cyan left -6px / magenta right +6px), brightness 2x
12% - chromatic split holds wide, slight skew, scanlines peak
28% - colour begins to bleed back, split narrows to -3/+3px,
yellow chrominance enters at the bottom edge
58% - chromatic split down to 1px, saturation returning, scan-roll exits
100% - settled at 0.62 opacity + cinematic grade hold state
Reads as an alien-tech CRT switching transmissions, with the brand
palette (cyan / magenta / yellow / sage) bleeding through the split. */
body.wwh-awal .wwh-leap-frame.is-active.is-flash {
animation: wwh-leap-glitch 320ms cubic-bezier(.18, .8, .25, 1) forwards;
}
@keyframes wwh-leap-glitch {
0% {
opacity: 0;
filter:
saturate(0)
contrast(2.1)
brightness(2.0)
drop-shadow(-7px 0 0 rgba(93, 223, 230, 1.0))
drop-shadow( 7px 0 0 rgba(220, 60, 173, 1.0))
drop-shadow( 0 3px 0 rgba(240, 229, 114, 0.85));
transform: scale(1.045) translateX(3px) skewX(0.6deg);
}
12% {
opacity: 1;
filter:
saturate(0)
contrast(1.7)
brightness(1.55)
drop-shadow(-6px 1px 0 rgba(93, 223, 230, 0.92))
drop-shadow( 6px -1px 0 rgba(220, 60, 173, 0.92))
drop-shadow( 0 2px 0 rgba(240, 229, 114, 0.70))
drop-shadow( 0 0 22px rgba(197, 223, 195, 0.32));
transform: scale(1.022) translateX(-2px) skewX(-0.45deg);
}
28% {
opacity: 0.88;
filter:
saturate(0.15)
contrast(1.45)
brightness(1.22)
drop-shadow(-4px 0 0 rgba(93, 223, 230, 0.62))
drop-shadow( 4px 0 0 rgba(220, 60, 173, 0.62))
drop-shadow( 0 1.5px 0 rgba(240, 229, 114, 0.40));
transform: scale(1.008) skewX(0.2deg);
}
58% {
opacity: 0.78;
filter:
saturate(0.45)
contrast(1.26)
brightness(1.05)
drop-shadow(-1px 0 0 rgba(93, 223, 230, 0.22))
drop-shadow( 1px 0 0 rgba(220, 60, 173, 0.22));
transform: scale(1);
}
100% {
opacity: 0.62;
filter: saturate(0.62) contrast(1.18) brightness(0.88);
transform: scale(1);
}
}
/* Scanline overlay - the entire .wwh-leap-sequence carries a scanline
pseudo that flashes during a cut. Rolls vertically + horizontal sage
hairlines for that VHS / interference read. Sits on top of the photo
stack at z:10. */
body.wwh-awal .wwh-leap-sequence::after {
content: "";
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
opacity: 0;
background:
/* Fine bright scanlines */
repeating-linear-gradient(0deg,
transparent 0 2px,
rgba(255, 255, 255, 0.12) 2px 3px),
/* Wider colour scanlines - magenta + cyan interference bands */
repeating-linear-gradient(0deg,
transparent 0 8px,
rgba(220, 60, 173, 0.05) 8px 9px,
transparent 9px 16px,
rgba(93, 223, 230, 0.05) 16px 17px);
mix-blend-mode: screen;
transition: opacity 0.32s ease;
}
body.wwh-awal .wwh-leap-sequence.is-cutting::after {
animation: wwh-leap-scan-roll 320ms ease-out forwards;
}
@keyframes wwh-leap-scan-roll {
0% { opacity: 0.95; transform: translateY(-40%) scaleY(1.1); }
18% { opacity: 1; transform: translateY(-10%) scaleY(1.05); }
55% { opacity: 0.42; transform: translateY( 18%) scaleY(1); }
100% { opacity: 0; transform: translateY( 40%) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
body.wwh-awal .wwh-leap-frame,
body.wwh-awal .wwh-leap-frame.is-active,
body.wwh-awal .wwh-leap-frame.is-active.is-flash {
animation: none !important;
transition: opacity 0.3s ease, filter 0.3s ease;
transform: scale(1);
filter: saturate(0.62) contrast(1.18) brightness(0.88);
}
body.wwh-awal .wwh-leap-sequence.is-cutting::after {
animation: none;
opacity: 0;
}
}
/* =============================================================================
DARK SCRIM ON SCROLLING CONTENT SECTIONS — WELI 2026-06-06:
'when we scroll up the text we need to add a darker overlay with some
transparency to the frames image so we can still read the text.'
Each section in gets a semi-transparent dark backdrop with a
subtle backdrop blur so text reads cleanly when it scrolls over the
fixed splash (which has the kangaroo/WELI photo monitor + wordmark +
galaxy underneath). Galaxy still bleeds through via 38% alpha.
========================================================================== */
body.wwh-awal main > section,
body.wwh-awal .wwh-footer {
background-color: rgba(2, 2, 4, 0.62);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* The splash stays transparent - it's the fixed backdrop, no scrim needed. */
body.wwh-awal main > section.wwh-splash {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* =============================================================================
WELCOME PROMPT — first-load popup directing visitors to press the music
button. WELI 2026-06-06: 'have a message popping up suggesting to click
the music to start and wait. order them to do that. that is the coolest
thing ever.'
The prompt is a small mono-tech banner pinned bottom-left, near the
music button, with an arrow pointing TO the button. Dismissible by
click anywhere (or auto-dismisses after 14s).
========================================================================== */
/* WELI 2026-06-06 (revised): 'we need a better pop up message.. something
like put your headphones on, press play, and sit back. and put there
right in the middle of the page to start with, somewhere easy to see,
like the main prerequirement of the page is to press play.'
The welcome prompt is now CENTER OF VIEWPORT, 3 lines of mono command
text with a glowing cyan PRESS PLAY button. Sits above the wordmark
and dominates the first-load view. Click anywhere on it = press play +
dismiss. Auto-dismiss after 22s if ignored. */
body.wwh-awal .wwh-music-prompt {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9998;
width: clamp(280px, 60vw, 520px);
padding: 32px 28px 30px;
background:
linear-gradient(140deg,
rgba(2, 2, 4, 0.88) 0%,
rgba(14, 10, 20, 0.88) 100%);
border: 1px solid rgba(93, 223, 230, 0.55);
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
color: var(--wwh-sage-light);
text-align: center;
box-shadow:
0 0 0 1px rgba(93, 223, 230, 0.22),
0 32px 80px rgba(0, 0, 0, 0.62),
0 0 60px rgba(93, 223, 230, 0.18);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
pointer-events: auto;
cursor: pointer;
animation:
wwh-music-prompt-in 0.72s cubic-bezier(.22, 1, .36, 1) 0.6s both,
wwh-music-prompt-pulse 3.0s ease-in-out 1.6s infinite;
transition: opacity 0.42s ease, transform 0.42s ease;
}
body.wwh-awal .wwh-music-prompt.is-dismissed {
opacity: 0;
transform: translate(-50%, -42%) scale(0.94);
pointer-events: none;
}
/* WELI 2026-06-06: 'if you do it a bit darker when the music is on, you
can actually leave it in the page too.' When music plays the prompt
STAYS visible but darkens (deeper outer shadow + dim opacity) so it
reads as an ambient aesthetic element, not a foreground call to action.
Pointer-events stay auto so clicking it still toggles music. */
body.wwh-awal.is-music-playing .wwh-music-prompt:not(.is-dismissed) {
opacity: 0.42;
background:
linear-gradient(140deg,
rgba(2, 2, 4, 0.55) 0%,
rgba(10, 6, 14, 0.55) 100%);
border-color: rgba(93, 223, 230, 0.32);
box-shadow:
0 0 0 1px rgba(93, 223, 230, 0.12),
0 38px 90px rgba(0, 0, 0, 0.88),
0 0 80px rgba(0, 0, 0, 0.62),
0 0 36px rgba(93, 223, 230, 0.18);
animation: none;
}
body.wwh-awal.is-music-playing .wwh-music-prompt:not(.is-dismissed):hover {
opacity: 0.92;
border-color: rgba(93, 223, 230, 0.55);
}
/* Subtle inner-state change: when playing the CTA shows the now-playing
state (cyan pulse) without changing the text content */
body.wwh-awal.is-music-playing .wwh-music-prompt:not(.is-dismissed) .wwh-prompt-cta {
background: rgba(93, 223, 230, 0.16);
border-color: rgba(93, 223, 230, 0.45);
}
body.wwh-awal .wwh-music-prompt .wwh-prompt-pre,
body.wwh-awal .wwh-music-prompt .wwh-prompt-post {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(197, 223, 195, 0.75);
margin: 0;
}
body.wwh-awal .wwh-music-prompt .wwh-prompt-pre { margin-bottom: 18px; }
body.wwh-awal .wwh-music-prompt .wwh-prompt-post { margin-top: 18px; }
body.wwh-awal .wwh-music-prompt .wwh-prompt-cta {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 28px;
background: rgba(93, 223, 230, 0.08);
border: 1.5px solid rgba(93, 223, 230, 0.78);
border-radius: 999px;
color: rgba(93, 223, 230, 1);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.42em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
body.wwh-awal .wwh-music-prompt:hover .wwh-prompt-cta {
background: rgba(93, 223, 230, 0.22);
box-shadow: 0 0 24px rgba(93, 223, 230, 0.45);
transform: scale(1.02);
}
body.wwh-awal .wwh-music-prompt .wwh-prompt-icon {
font-size: 20px;
}
@keyframes wwh-music-prompt-in {
0% { opacity: 0; transform: translate(-50%, -42%) scale(0.92); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes wwh-music-prompt-pulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(93, 223, 230, 0.22), 0 32px 80px rgba(0, 0, 0, 0.62), 0 0 60px rgba(93, 223, 230, 0.18); }
50% { box-shadow: 0 0 0 1px rgba(93, 223, 230, 0.55), 0 32px 90px rgba(0, 0, 0, 0.7), 0 0 100px rgba(93, 223, 230, 0.42); }
}
@media (max-width: 720px) {
body.wwh-awal .wwh-music-prompt {
width: clamp(260px, 84vw, 360px);
padding: 24px 20px 22px;
}
body.wwh-awal .wwh-music-prompt .wwh-prompt-cta {
font-size: 14px;
padding: 12px 22px;
}
}
/* =============================================================================
FLOATING [ ABOUT ] (top-left, dghez_LAB style) — WELI 2026-06-06.
No panel, no background. Just the mono [ABOUT] label top-left as a click
trigger, and a brief 1-paragraph manifesto that fades in below it directly
over the showreel. Strong dark text glow so it reads on any photo.
========================================================================== */
body.wwh-awal .wwh-about-corner {
position: fixed;
top: 92px;
left: 28px;
z-index: 250;
max-width: 360px;
pointer-events: none;
}
body.wwh-awal .wwh-about-trigger {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--wwh-sage-light);
text-shadow:
0 1px 4px rgba(0, 0, 0, 0.85),
0 0 16px rgba(0, 0, 0, 0.72);
background: transparent;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
pointer-events: auto;
transition: color 0.22s ease, text-shadow 0.22s ease;
}
body.wwh-awal .wwh-about-trigger:hover,
body.wwh-awal .wwh-about-trigger:focus-visible {
color: rgba(93, 223, 230, 1);
text-shadow:
0 1px 4px rgba(0, 0, 0, 0.85),
0 0 20px rgba(93, 223, 230, 0.4);
outline: none;
}
body.wwh-awal .wwh-about-corner[data-open="true"] .wwh-about-trigger,
body.wwh-awal .wwh-about-trigger[aria-expanded="true"] {
color: rgba(93, 223, 230, 1);
}
body.wwh-awal .wwh-about-body {
margin: 14px 0 0;
font-family: var(--wwh-sans);
font-size: 14px;
line-height: 1.6;
color: var(--wwh-sage-light);
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.88),
0 0 14px rgba(0, 0, 0, 0.68);
max-width: 360px;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 0.42s cubic-bezier(.22, 1, .36, 1), transform 0.42s cubic-bezier(.22, 1, .36, 1);
}
body.wwh-awal .wwh-about-body em {
font-style: italic;
font-family: var(--wwh-italic), 'Instrument Serif', serif;
color: rgba(240, 229, 114, 0.95);
}
body.wwh-awal .wwh-about-corner[data-open="true"] .wwh-about-body,
body.wwh-awal .wwh-about-trigger[aria-expanded="true"] ~ .wwh-about-body {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
@media (max-width: 720px) {
body.wwh-awal .wwh-about-corner {
top: 78px;
left: 16px;
max-width: calc(100vw - 32px);
}
body.wwh-awal .wwh-about-trigger { font-size: 10px; letter-spacing: 0.24em; }
body.wwh-awal .wwh-about-body { font-size: 13px; }
}
/* WELI 2026-06-06 (revised): the 90vh-per-section forced-chapter layout
was REMOVED to let content flow continuously. Sections still exist
semantically (good for accessibility) but they no longer claim a full
viewport each. They just stack naturally one after the other under the
fixed hero. */
body.wwh-awal main > section.wwh-chapter:not(.wwh-splash) {
min-height: 0;
display: block;
}
/* Same for the chapter corner chips: remove them entirely. The fluid
content flow doesn't need section-system labels. */
body.wwh-awal .wwh-chapter:not(.wwh-splash)::before {
display: none !important;
content: none !important;
}
/* On the splash itself we keep the WELCOME label removed too - the
TRANSMITTING chip on the universe is the only system chip the hero
needs now. */
body.wwh-awal .wwh-splash.wwh-chapter::before {
display: none !important;
content: none !important;
}
/* Promoted scroll cue: monospace "SCROLL" label + animated double-chevron
+ thin progress line. Reads as a HUD prompt, not a decorative arrow. */
body.wwh-awal .wwh-splash.wwh-chapter::after {
content: "SCROLL";
position: absolute;
left: 50%;
bottom: 36px;
transform: translateX(-50%);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.42em;
color: rgba(197, 223, 195, 0.78);
text-shadow: 0 0 12px rgba(197, 223, 195, 0.42);
padding-bottom: 38px;
/* Two animated chevrons + a thin progress line beneath, rendered with
background-image so we don't need an extra DOM element. The vertical
line + chevrons stack via SVG data-URI. */
background:
url("data:image/svg+xml;utf8,. */
body.wwh-awal .wwh-services-headline em {
text-transform: none;
font-style: italic;
color: var(--wwh-sage-bright);
}
/* ---------- 7. Centre the two wing cards on the page. ---------- */
body.wwh-awal .wwh-pillars-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(280px, 1fr));
gap: 24px;
justify-content: center;
padding: 0 28px;
}
@media (max-width: 760px) {
body.wwh-awal .wwh-pillars-inner {
grid-template-columns: 1fr;
max-width: 480px;
}
}
/* ---------- 8. Make the meet-weli photo + bio more compact. WELI:
"I do not like my face big like that — make it smaller." ---------- */
body.wwh-awal .wwh-meet-photo,
body.wwh-awal .wwh-meet-photo img {
max-width: 220px;
border-radius: 50%;
overflow: hidden;
}
body.wwh-awal .wwh-meet-inner {
grid-template-columns: 220px 1fr;
gap: 32px;
align-items: start;
}
body.wwh-awal .wwh-meet-text {
font-size: 0.95rem;
line-height: 1.55;
}
body.wwh-awal .wwh-meet-text h2,
body.wwh-awal .wwh-meet-text h3 {
font-size: 1.4rem;
}
@media (max-width: 760px) {
body.wwh-awal .wwh-meet-inner {
grid-template-columns: 1fr;
text-align: center;
}
body.wwh-awal .wwh-meet-photo,
body.wwh-awal .wwh-meet-photo img {
margin: 0 auto;
max-width: 160px;
}
}
/* ---------- 9. Header: FREE-FLOATING text on the showreel. WELI 2026-06-06:
'no top bar effects. text free on top of the showreel.'
Background / blur / border / scrim all removed. Header is just transparent
chrome over the photos. Each nav link picks up a strong text-shadow so
it reads on any busy photo backdrop. The header AUTO-HIDES when music
plays (slides up off-screen). Returns when cursor enters the top zone,
when the cursor moves anywhere (briefly), or when music pauses.
See JS in wwh-effects.js for the hide/show logic. ---------- */
body.wwh-awal #header,
body.wwh-awal .wwh-awal-header {
position: sticky !important;
top: 0 !important;
z-index: 300 !important;
background: transparent !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
box-shadow: none !important;
color: var(--wwh-sage-light);
transition:
transform 0.55s cubic-bezier(.22, 1, .36, 1),
opacity 0.45s ease;
}
/* Strong dark glow around every header element so the text/logo reads
over any photo backdrop without needing a bar behind it. */
body.wwh-awal .wwh-awal-nav a,
body.wwh-awal .wwh-awal-nav-about,
body.wwh-awal .wwh-awal-brand .wwh-brand-text,
body.wwh-awal .wwh-awal-header-cta {
text-shadow:
0 1px 4px rgba(0, 0, 0, 0.85),
0 0 18px rgba(0, 0, 0, 0.75),
0 0 36px rgba(0, 0, 0, 0.5);
}
body.wwh-awal .wwh-awal-brand .wwh-mono-fallback {
/* Drop shadow under the chip too so it lifts off busy photos */
filter:
drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85))
drop-shadow(0 0 16px rgba(0, 0, 0, 0.7));
}
/* Header auto-hide state when music plays - slides up off-screen */
body.wwh-awal.is-header-hidden #header,
body.wwh-awal.is-header-hidden .wwh-awal-header {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
body.wwh-awal .wwh-awal-nav a {
color: var(--wwh-sage-light);
text-shadow: 0 0 12px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.55);
}
body.wwh-awal .wwh-awal-brand .wwh-brand-text {
text-shadow: 0 0 12px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}
body.wwh-awal .wwh-awal-nav a.active {
color: var(--wwh-magenta);
border-bottom-color: var(--wwh-magenta);
}
body.wwh-awal .wwh-awal-header-cta {
color: var(--wwh-void);
background: var(--wwh-sage-light);
box-shadow: 0 0 16px rgba(197, 223, 195, 0.15);
}
/* =============================================================================
CHIP GLOW v3 — WELI 2026-06-05 (third pass):
'much better.. still looks like there is some glow on top of that image..
also can you crop that square border out?'
The drop-shadow filter approach in v2 was following the chip image's
RECTANGULAR CANVAS bounds, not the rounded pebble silhouette, because
the 180x180 PNG has anti-aliased / near-transparent pixels in the
corners that drop-shadow still treats as 'present'. Result: visible
square boundary around the chip.
v3 strategy:
- Remove drop-shadow filter from the IMG entirely.
- Use ::before pseudo-element on .wwh-awal-brand as a RADIAL GRADIENT
(perfectly round, no rectangle).
- z-index discipline: ::before at 0, chip + brand text at 1 - glow
sits BEHIND, not on top.
- Single subtle sage-green tone.
- Gentle opacity breathe only (no scale, no transform).
========================================================================== */
body.wwh-awal .wwh-awal-brand {
position: relative;
}
body.wwh-awal .wwh-awal-brand .wwh-mono-fallback {
width: 56px !important;
height: 56px !important;
position: relative;
z-index: 1;
filter: none !important;
transition: transform 0.55s cubic-bezier(.22, 1, .36, 1);
/* WELI 2026-06-05 (later): 'cut only with normal square - you used round
borders square clipping and that cut the borders of the logo as well.'
The 8% inset amount is right; the corner-rounding (round 30%) and the
radial mask were eating into the rounded-pebble edges of the chip art
itself. Now: plain square inset crop, no rounding, no radial fade. */
border-radius: 0;
background: transparent !important;
border: 0 !important;
outline: none !important;
clip-path: inset(8%);
-webkit-mask-image: none;
mask-image: none;
}
body.wwh-awal .wwh-awal-brand .wwh-brand-text {
position: relative;
z-index: 1;
}
body.wwh-awal .wwh-awal-brand::before {
content: "";
position: absolute;
left: 28px;
top: 50%;
width: 110px;
height: 110px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(130, 188, 151, 0.28) 0%,
rgba(130, 188, 151, 0.16) 32%,
rgba( 67, 112, 85, 0.10) 60%,
transparent 100%);
z-index: 0;
pointer-events: none;
animation: wwh-chip-pulse 9s ease-in-out infinite;
}
body.wwh-awal .wwh-awal-brand:hover::before {
background: radial-gradient(circle,
rgba(130, 188, 151, 0.42) 0%,
rgba(130, 188, 151, 0.24) 32%,
rgba( 67, 112, 85, 0.14) 60%,
transparent 100%);
}
body.wwh-awal .wwh-awal-brand:hover .wwh-mono-fallback {
transform: scale(1.04);
}
@keyframes wwh-chip-pulse {
0%, 100% { opacity: 0.65; }
50% { opacity: 0.95; }
}
@media (max-width: 760px) {
body.wwh-awal .wwh-awal-brand .wwh-mono-fallback {
width: 44px !important;
height: 44px !important;
}
body.wwh-awal .wwh-awal-brand::before {
left: 22px;
width: 86px;
height: 86px;
}
}
@media (prefers-reduced-motion: reduce) {
body.wwh-awal .wwh-awal-brand::before { animation: none; opacity: 0.75; }
}
/* ---------- 10. Cursor: kill the backdrop-blur that was making text fuzzy.
WELI 2026-06-05: 'the cursor when it goes on top of text it makes the
text blurry. Id prefer if it maximized the text instead.'
Removed: backdrop-filter blur(1px). Text now stays sharp under the
cursor. (A magnify-text-on-hover would need a JS lens; not in this
push - sharp text is the priority.) ---------- */
body.wwh-awal .wwh-cur {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ---------- 10. The wing-card numbers (01, 02). ---------- */
body.wwh-awal .wwh-pillar-num {
color: var(--wwh-magenta);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.85rem;
letter-spacing: 0.2em;
display: block;
margin-bottom: 14px;
}
body.wwh-awal .wwh-pillar-name {
font-family: 'Comfortaa', ui-rounded, sans-serif;
font-weight: 700;
font-size: clamp(1.4rem, 2vw, 1.8rem);
color: var(--wwh-sage-light);
display: block;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
body.wwh-awal .wwh-pillar-sub {
color: var(--wwh-moss);
font-size: 0.92rem;
line-height: 1.55;
}
/* ---------- 11. Selection + focus colours on dark. ---------- */
body.wwh-awal ::selection {
background: var(--wwh-magenta);
color: var(--wwh-sage-light);
}
body.wwh-awal :focus-visible {
outline: 2px solid var(--wwh-cyan);
outline-offset: 3px;
}
/* =============================================================================
TECH-EDGE ACCENTS — WELI: "by removing the old TV screen entirely we lost
the technology aspect which is what sets us apart." Bringing it back as
STRUCTURAL DECORATION, not over text.
========================================================================== */
/* 12. Scan-line dividers between sections.
A 14px-tall band of green pixel dashes + magenta hairline overlaid at the
junction between consecutive sections. Reads as a circuit-board trace, not
a glitch. Doesn't sit on any text. */
body.wwh-awal main > section { position: relative; }
body.wwh-awal main > section + section::before {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 14px;
background:
repeating-linear-gradient(90deg,
transparent 0 2px,
rgba(130,188,151,0.32) 2px 3px,
transparent 3px 6px),
repeating-linear-gradient(90deg,
rgba(220,60,173,0.18) 0 1px,
transparent 1px 11px),
linear-gradient(180deg,
rgba(93,223,230,0.12) 0%,
transparent 100%);
pointer-events: none;
z-index: 4;
mix-blend-mode: screen;
}
/* 13. Section microtext label — section ID printed faintly in the corner,
like a data-chip part number. Uses the section's id="...". */
body.wwh-awal main > section[id]::after {
content: "[ " attr(id) " ]";
position: absolute;
top: 18px;
right: 26px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
letter-spacing: 0.22em;
color: rgba(130,188,151,0.42);
text-transform: uppercase;
pointer-events: none;
z-index: 4;
}
@media (max-width: 760px) {
body.wwh-awal main > section[id]::after { right: 16px; top: 14px; font-size: 8px; }
}
/* 14. Magenta blinking caret at the end of major headlines — terminal feel,
tiny tech wink. Doesn't shift the headline width (inline-block, 0.5em). */
body.wwh-awal .wwh-services-headline::after,
body.wwh-awal .wwh-page-h::after,
body.wwh-awal section h2.wwh-load-rule::after {
content: "";
display: inline-block;
width: 0.5em;
height: 0.85em;
margin-left: 0.18em;
background: var(--wwh-magenta);
animation: wwh-caret-blink 1.15s steps(2) infinite;
vertical-align: -0.08em;
border-radius: 1px;
}
@keyframes wwh-caret-blink {
50% { opacity: 0.18; }
}
@media (prefers-reduced-motion: reduce) {
body.wwh-awal .wwh-services-headline::after,
body.wwh-awal .wwh-page-h::after { animation: none; opacity: 0.6; }
}
/* 15. Tiny pixelated dither chip in the bottom-right corner of wing cards
and media containers. Reads as a "device serial number" chip. */
body.wwh-awal .wwh-pillar .wwh-pillar-sub::after,
body.wwh-awal .wwh-feature-video .wwh-feature-video-caption::before {
content: "▮ ▯ ▮▮ ▯ ▮";
display: inline-block;
margin-left: 12px;
font-size: 8px;
letter-spacing: 0.15em;
color: var(--wwh-cyan);
opacity: 0.6;
vertical-align: middle;
}
/* 16. A subtle scan-line overlay on the page background that sits BEHIND
text (below z-index of section content) but lifts the "tech screen" read.
Only ~3% opacity so it never harms readability. */
body.wwh-awal {
background-image:
repeating-linear-gradient(0deg,
transparent 0px,
transparent 2px,
rgba(93,223,230,0.03) 3px,
transparent 4px);
}
/* =============================================================================
17. MANIFESTO POPUP — sage-light surface, dark text. The body-level
sage-light color was making popup text invisible (sage on sage).
========================================================================== */
body.wwh-awal .wwh-splash-popup-content,
body.wwh-awal .wwh-splash-popup-content p,
body.wwh-awal .wwh-splash-popup-content em,
body.wwh-awal .wwh-splash-popup-content strong,
body.wwh-awal .wwh-splash-popup-content a {
color: var(--wwh-void);
}
body.wwh-awal .wwh-splash-popup-content {
background: var(--wwh-sage-light);
border: 1px solid rgba(2,2,4,0.10);
}
body.wwh-awal .wwh-splash-popup-content a {
color: var(--wwh-magenta);
border-bottom: 1px solid currentColor;
}
body.wwh-awal .wwh-splash-popup-close {
color: var(--wwh-void);
background: transparent;
border: 1px solid var(--wwh-void);
}
/* 18. STARFIELD UNIVERSE — backdrop layer that wwh-hero-universe.js mounts
into. CSS just sets the stage; JS does the per-frame paint. */
.wwh-starfield-mount {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
/* =============================================================================
20. PAGE TIGHTENING — WELI 2026-06-05:
'make these boxes a lot smaller. We need to reduce the length of the
main page. Reduce image sizes, text size to readable (14px enough).
Bring sections closer together. The Kangaroo Time project is too big.
Below the top showreel, most elements should occupy the centre of
the page. More breathability and discipline.'
============================================================================= */
/* Wing cards (.wwh-pillar) - smaller, tighter padding */
body.wwh-awal .wwh-pillars-inner {
max-width: 880px !important;
margin: 0 auto !important;
padding: 0 20px !important;
gap: 18px !important;
}
body.wwh-awal .wwh-pillar {
padding: 22px 24px !important;
min-height: 0 !important;
}
body.wwh-awal .wwh-pillar-num {
font-size: 11px !important;
margin-bottom: 10px !important;
}
body.wwh-awal .wwh-pillar-name {
font-size: clamp(18px, 1.7vw, 22px) !important;
margin-bottom: 8px !important;
line-height: 1.2 !important;
}
body.wwh-awal .wwh-pillar-sub {
font-size: 13px !important;
line-height: 1.5 !important;
}
/* Section padding-block tightened site-wide */
body.wwh-awal main > section {
padding-block: clamp(40px, 5vw, 72px) !important;
}
body.wwh-awal main > section.wwh-pillars {
padding-block: clamp(28px, 3.5vw, 52px) !important;
}
/* Section content centred + capped (EXCLUDES .wwh-splash because the
showreel needs the full-width drifting track + .wwh-splash-bg full
absolute positioning; broke the showreel in the previous push). */
body.wwh-awal main > section:not(.wwh-splash) > div:not(.wwh-pillars-inner):not(.wwh-feature-video-inner):not(.wwh-splash-bg):not(.wwh-splash-content) {
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}
/* Headlines lighter */
body.wwh-awal .wwh-services-headline {
font-size: clamp(34px, 4.8vw, 62px) !important;
line-height: 1.04 !important;
margin-bottom: clamp(20px, 2.6vw, 36px) !important;
}
body.wwh-awal .wwh-page-band h1 {
font-size: clamp(32px, 4.5vw, 58px) !important;
}
/* Body p / li / services-list */
body.wwh-awal main p,
body.wwh-awal main li {
font-size: 14px !important;
line-height: 1.55 !important;
}
body.wwh-awal .wwh-services-list li {
padding: 12px 0 !important;
font-size: 14px !important;
}
body.wwh-awal .wwh-page-lede {
font-size: 15px !important;
line-height: 1.55 !important;
}
/* Flagship video (Kangaroo Time) - cap size */
body.wwh-awal .wwh-feature-video-inner {
max-width: 760px !important;
margin: 0 auto !important;
}
body.wwh-awal .wwh-feature-video-frame {
max-width: 720px !important;
margin: 0 auto !important;
}
body.wwh-awal .wwh-feature-video-head h2 {
font-size: clamp(28px, 3.8vw, 44px) !important;
margin-bottom: 12px !important;
}
body.wwh-awal .wwh-feature-video-head p {
font-size: 14px !important;
max-width: 640px;
margin: 0 auto;
}
/* Highlight cards / project media - smaller */
body.wwh-awal .wwh-highlight-inner,
body.wwh-awal .wwh-trending-inner,
body.wwh-awal .wwh-roster-slider {
max-width: 1080px !important;
margin: 0 auto !important;
}
body.wwh-awal .wwh-highlight-card,
body.wwh-awal .wwh-trend-item {
padding: 16px !important;
}
body.wwh-awal .wwh-highlight-card img,
body.wwh-awal .wwh-trend-item img,
body.wwh-awal .wwh-project-media img {
max-height: 280px;
object-fit: cover;
}
/* Meet WELI block tightening (already done earlier but reinforced) */
body.wwh-awal .wwh-meet-inner {
max-width: 760px !important;
grid-template-columns: 180px 1fr !important;
gap: 28px !important;
}
body.wwh-awal .wwh-meet-photo img {
max-width: 180px;
}
body.wwh-awal .wwh-meet-text p {
font-size: 14px !important;
}
/* Footer also lighter */
body.wwh-awal .wwh-footer p,
body.wwh-awal .wwh-footer a,
body.wwh-awal .wwh-footer span {
font-size: 13px !important;
}
body.wwh-awal .wwh-footer-fine,
body.wwh-awal .wwh-footer-ack {
font-size: 12px !important;
}
/* =============================================================================
PHOTO NATURAL COLOUR + HOVER VIBRANCE — WELI 2026-06-05:
'I love the images natural colour.. you added a low saturation filter..
start with the image normal colour, and increase clarity or vibrance
when we go with the cursor over them.'
Override the wwh-archive.css rest-state saturate(.78) contrast(1.03)
that was muting the photos. Now: rest = natural full colour. Hover =
clarity boost (saturate + contrast + brightness).
========================================================================== */
body.wwh-awal .wwh-roster-slide-img img,
body.wwh-awal .wwh-highlight-card img,
body.wwh-awal .wwh-trend-item > img,
body.wwh-awal .wwh-project-media img,
body.wwh-awal .wwh-meet-photo img,
body.wwh-awal .wwh-feature-video img {
filter: none !important;
transition: filter .35s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
body.wwh-awal .wwh-roster-slide:hover .wwh-roster-slide-img img,
body.wwh-awal .wwh-highlight-card:hover img,
body.wwh-awal .wwh-trend-item:hover > img,
body.wwh-awal .wwh-project-media:hover img,
body.wwh-awal .wwh-meet-photo:hover img,
body.wwh-awal .wwh-feature-video:hover img {
filter:
saturate(1.18)
contrast(1.06)
brightness(1.04) !important;
}
/* 19. BIGGER WORDMARK + ALWAYS-ON GLOW + UNIVERSE BROADCAST STRIPS.
- 'make wildwoohoo bigger in the center'
- 'can this start with some of that glow from the beginning so it is
always illuminated and beautiful' (WELI 2026-06-05)
- 'add the galaxy more times in the page when necessary'
Baseline glow uses the SAME 5-stop spectrum as the hover/burst, but
at ~55% intensity so the wordmark is always lit. A slow chromatic
breathe (8s) lerps between two intensity states. Hover/burst still
bumps to full intensity. */
body.wwh-awal .wwh-wordmark {
width: clamp(380px, 76vw, 1020px) !important;
max-width: 92vw;
filter:
drop-shadow(0 0 5px rgba(197, 223, 195, 0.42))
drop-shadow(0 0 14px rgba(240, 229, 114, 0.30))
drop-shadow(0 0 28px rgba(220, 60, 173, 0.20))
drop-shadow(0 0 48px rgba(130, 188, 151, 0.16))
drop-shadow(0 0 80px rgba( 67, 112, 85, 0.12));
animation:
wwh-wordmark-intro 3s cubic-bezier(.22, 1, .36, 1) both,
wwh-wordmark-breathe 10s ease-in-out 3s infinite,
wwh-wordmark-glow 8s ease-in-out infinite;
}
@keyframes wwh-wordmark-glow {
0%, 100% {
filter:
drop-shadow(0 0 4px rgba(197, 223, 195, 0.36))
drop-shadow(0 0 12px rgba(240, 229, 114, 0.24))
drop-shadow(0 0 24px rgba(220, 60, 173, 0.16))
drop-shadow(0 0 42px rgba(130, 188, 151, 0.12))
drop-shadow(0 0 72px rgba( 67, 112, 85, 0.10));
}
50% {
filter:
drop-shadow(0 0 6px rgba(197, 223, 195, 0.55))
drop-shadow(0 0 18px rgba(240, 229, 114, 0.40))
drop-shadow(0 0 36px rgba(220, 60, 173, 0.28))
drop-shadow(0 0 60px rgba(130, 188, 151, 0.22))
drop-shadow(0 0 100px rgba( 67, 112, 85, 0.16));
}
}
@media (prefers-reduced-motion: reduce) {
body.wwh-awal .wwh-wordmark { animation: none; }
}
@media (max-width: 800px) {
body.wwh-awal .wwh-wordmark {
width: clamp(280px, 84vw, 560px) !important;
}
}
/* WELI 2026-06-05: 'you need to bring the text down here.. the top text is
overlaying the parallel bars.' The .wwh-stats section's content (WINNER
chip + Dance Your PhD line + stat numbers) was rendering RIGHT after the
110px broadcast-strip ::before, sitting visually on top of it. Bumping
padding-top so content sits well clear of the strip. */
body.wwh-awal main > section.wwh-stats {
padding-top: clamp(72px, 9vw, 132px) !important;
}
/* Universe broadcast strip between major sections - 110px tall band with
the palette mosaic + magenta noise + scan-lines + sage hairlines. */
body.wwh-awal main > section.wwh-splash + section::before,
body.wwh-awal main > section.wwh-feature-video + section::before,
body.wwh-awal main > section.wwh-stats + section::before {
content: "";
display: block;
width: 100%;
height: 110px;
margin: 0 auto;
background:
repeating-linear-gradient(0deg,
transparent 0px, transparent 2px,
rgba(220, 60, 173, 0.20) 3px, transparent 4px),
url('/palette-mosaic.png?v=20260605-tech') repeat;
background-size: 100% 100%, 14px 14px;
image-rendering: pixelated;
image-rendering: crisp-edges;
opacity: 0.42;
border-top: 1px solid rgba(130, 188, 151, 0.18);
border-bottom: 1px solid rgba(130, 188, 151, 0.18);
pointer-events: none;
}