html,body{overflow-x:clip}
/* the design's full-bleed seam clouds are positioned against the viewport, so they escape body's
clip and let the page scroll sideways. Clipping their real parent (the dc render host) contains
them; position:relative makes it their containing block, overflow-x:clip keeps sticky/parallax intact */
.sc-host{position:relative;overflow-x:clip}
body{margin:0;background:#0b0e2c}
@keyframes koa-sway { 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} }
@keyframes koa-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@keyframes koa-glide { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-70px)} }
@keyframes koa-spin-ccw { from{transform:rotate(0deg)} to{transform:rotate(-360deg)} }
@keyframes koa-plane-pass { from{transform:translateX(0)} to{transform:translateX(-165vw)} }
/* left-to-right variant: scaleX(-1) flips the sprite to face right, held constant while it travels right */
@keyframes koa-plane-pass-ltr { from{transform:translateX(0) scaleX(-1)} to{transform:translateX(165vw) scaleX(-1)} }
@keyframes koa-gummy-drop { from{transform:translateY(-380px) rotate(-50deg);opacity:0} 12%{opacity:1} to{transform:translateY(0) rotate(0deg);opacity:1} }
@keyframes koa-sway-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes koa-cloud-bounce { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-40px)} }
@keyframes koa-x-wiggle { 0%,100%{transform:translateX(0)} 50%{transform:translateX(18px)} }
@keyframes koa-drift { 0%,100%{transform:translate(0,0)} 33%{transform:translate(10px,-8px)} 66%{transform:translate(-8px,6px)} }
.koa-h1{font-family:'Kelly Slab',Georgia,serif;font-weight:400;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.45);margin:0}
.koa-h2{font-family:'Kelly Slab',Georgia,serif;font-weight:400;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.4);margin:0}
.koa-p{font-family:'Kelly Slab',Georgia,serif;font-weight:400;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);margin:0;line-height:1.5}
.koa-accent{font-family:'Niconne',cursive;font-weight:400;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.4);margin:0}
.koa-cta{display:inline-block;margin-top:26px;padding:11px 26px;border:2px solid rgba(255,255,255,.9);border-radius:3px;font-family:'Questrial',sans-serif;font-size:15px;letter-spacing:.04em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.koa-textbox{padding:28px 34px}
/* scroll-reveal: text blocks fade in and lift as they enter view (JS adds .koa-reveal, then .koa-in) */
.koa-reveal{opacity:0;transform:translateY(70px) scale(.94);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.koa-reveal.koa-in{opacity:1;transform:none}
.koa-dark .koa-h1,.koa-dark .koa-h2,.koa-dark .koa-p,.koa-dark .koa-accent,.koa-dark .koa-cta{color:#333;text-shadow:none}
.koa-dark .koa-cta{border-color:rgba(51,51,51,.55)}
/* Convenience scroller: the two sweeping panels are cut-out jungle trees, not
solid colour wipes. The dc script still sets their box (800px x 100%) and drives
the translateX sweep; these rules just paint the art inside it. !important is
needed because that inline `background:` shorthand would otherwise win — and it
also clears background-image, so every longhand has to be restated here.
bottom-anchored + contain keeps each tree standing on the ground at any height. */
.koa-wipe{
background-color:transparent !important;
background-repeat:no-repeat !important;
background-position:bottom center !important;
background-size:contain !important;
}
.koa-wipe-1{background-image:url("../img/5/5_Tree_1.webp") !important}
.koa-wipe-2{background-image:url("../img/5/5_Tree_2.webp") !important}
/* floating planets in the hero. The remaining gradient placeholder keeps the
circle + box-shadow treatment; real cut-out art drops both, because a circular
box-shadow would draw outside a non-round sprite (Saturn's rings especially).
The glow instead comes from drop-shadow(), which follows the alpha channel. */
.koa-planet{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.koa-planet-art{
border-radius:0;
width:var(--w); /* --w is set inline per planet */
height:auto; /* art keeps its own aspect */
background:none;
box-shadow:none;
display:block;
filter:drop-shadow(0 0 18px rgba(150,175,255,.28));
}
/* the rocket + comet ride inside the existing scroll-driven wrappers, which size
them with font-size (11vw / 10vw / 9vw), so em keeps that responsive sizing and
preserves the relative scale between the three. 2em = twice the original 1em.
translate(-50%,-50%) centres each sprite on its wrapper's anchor point, so
growing them expands around the flight path instead of pushing down-right. */
.koa-sprite{width:2em;height:auto;display:block;
transform:translate(-50%,-50%);
filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
/* the art points up; the flight path runs up-and-right, so lean it into the climb */
.koa-sprite-rocket{transform:translate(-50%,-50%) rotate(34deg)}
/* the panel-2 sloth-on-a-joint is already drawn at ~29 degrees; its path climbs at
~42, so it only needs a small nudge rather than the hero rocket's 34 */
.koa-sprite-rocket2{transform:translate(-50%,-50%) rotate(-12deg)}
@keyframes koa-float-a{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-26px)}}
@keyframes koa-float-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,18px)}}
@keyframes koa-float-c{0%,100%{transform:translate(0,0)}33%{transform:translate(20px,14px)}66%{transform:translate(-14px,-18px)}}
a{color:inherit;text-decoration:none}
/* ============================================================
MOBILE (<=860px)
The desktop composition parks copy in a 42-48% column beside the
artwork and positions decorative plates at absolute pixel offsets.
Neither survives a phone, so on small screens the copy becomes a
single full-width column with a scrim, and the oversized plates are
scaled back. Everything here is scoped to the media query, so the
desktop layout is untouched.
============================================================ */
@media (max-width: 860px) {
/* ---- header: logo on its own row, links wrap centered beneath ---- */
.sc-host nav:not(.koa-footer-nav),
body > nav {
flex-direction: column !important;
gap: 10px !important;
padding: 12px 4vw !important;
background: rgba(13,16,48,.94) !important;
box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
}
.sc-host nav:not(.koa-footer-nav) img, body > nav img { height: 26px !important; }
.sc-host nav:not(.koa-footer-nav) > div, body > nav > div {
gap: 6px 16px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.sc-host nav:not(.koa-footer-nav) a, body > nav a { font-size: 13px !important; }
/* the link type is small by design; grow the touch target, not the layout */
.sc-host nav:not(.koa-footer-nav) a, body > nav a { position: relative; }
.sc-host nav:not(.koa-footer-nav) a::after, body > nav a::after {
content: ""; position: absolute; left: -9px; right: -9px; top: -13px; bottom: -13px;
}
/* ---- copy blocks ----
Desktop parks the copy in a column beside the artwork. On a phone it becomes a
single centred card pinned near the TOP of the panel, so the subject below it
(sloth, mountain, tin) stays fully visible instead of sitting behind the type.
The card is painted an opaque colour sampled from that panel's own plate
(--koa-box-bg, set per panel in the markup) and lifted with a drop shadow. */
.koa-copy {
position: absolute !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
/* clears the fixed header, which is ~75px tall on a phone */
top: 88px !important;
transform: translateX(-50%) !important;
width: 90% !important;
max-width: 460px !important;
padding: 0 !important;
z-index: 40 !important;
display: block !important;
}
.koa-copy .koa-textbox {
padding: 20px 18px !important;
text-align: center !important;
background: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* flat type: no halo, no drop shadow anywhere in the copy blocks */
.koa-copy .koa-h1,
.koa-copy .koa-h2,
.koa-copy .koa-p,
.koa-copy .koa-accent,
.koa-copy .koa-cta,
.koa-copy .koa-textbox { text-shadow: none !important; }
.koa-copy .koa-cta { box-shadow: none !important; }
/* The Convenience slider cross-fades three blurbs stacked on a shared wrapper.
They differ in height, so painting each one opaque shows a second card edge
behind the first mid-fade — paint the wrapper instead and let the blurbs
fade over it. Only that section nests a div between .koa-copy and .koa-textbox. */
.koa-copy > div:not(.koa-textbox) {
/* organic cloud plate rather than a flat panel. The rectangular radius and
box-shadow are dropped: both would draw on the element's box rather than
the shape's silhouette. */
background-color: transparent !important;
background-image: none !important;
border-radius: 0;
box-shadow: none;
position: relative;
}
/* The plate lives on a pseudo-element rather than as this box's background,
so it can be larger than the text it sits behind — a background is clipped
to its own box, so background-size:120% would have cropped the cloud instead
of growing it. Insets: 10% wider each side, and 18%/2% top/bottom, which is
20% taller overall while sitting slightly higher than the copy.
No z-index — as the first positioned child it paints under the blurbs. */
.koa-copy > div:not(.koa-textbox)::before {
content: "";
position: absolute;
left: -10%; right: -10%;
top: -18%; bottom: -2%;
background: url("../img/5/5_Textbox.webp") center / 100% 100% no-repeat;
pointer-events: none;
}
.koa-copy > div:not(.koa-textbox) > .koa-textbox {
background: transparent !important;
box-shadow: none !important;
}
/* light plates (snowy, convenience, tan, coral) need dark ink on the matching card */
.koa-copy-light .koa-h1,
.koa-copy-light .koa-h2,
.koa-copy-light .koa-p,
.koa-copy-light .koa-accent,
.koa-copy-light .koa-cta { color: #33291c !important; text-shadow: none !important; }
/* type: hold a readable floor now that the column is full width */
.koa-copy .koa-h1 { font-size: 30px !important; line-height: 1.08 !important; }
.koa-copy .koa-h2 { font-size: 26px !important; }
.koa-copy .koa-accent { font-size: 22px !important; }
.koa-copy .koa-p { font-size: 16px !important; line-height: 1.55 !important; }
.koa-copy .koa-p + .koa-p { margin-top: 12px !important; }
/* the CTA is inline-block, so centring the box centres the button too.
Solid fill rather than an outline; the label flips to that panel's own
colour (--koa-box-bg, sampled from its plate) so it reads against the fill. */
.koa-copy .koa-cta {
margin-top: 18px !important;
padding: 12px 24px !important;
font-size: 14px !important;
background: #fff !important;
color: var(--koa-box-bg, #0b0e2c) !important;
border-color: #fff !important;
}
/* light plates run dark ink, so the button inverts the other way — one shared
light tan label rather than each panel's own colour */
.koa-copy-light .koa-cta,
.koa-copy .koa-textbox.koa-dark .koa-cta {
background: #33291c !important;
color: #f4e7cd !important;
border-color: #33291c !important;
}
/* reveal travel is tuned for a tall desktop viewport; shorten it on phones */
.koa-reveal { transform: translateY(34px) scale(.97); }
/* The scroll pass rewrites transform/opacity on these big plates every update;
without their own compositor layers each write repaints a large texture, which
is the visible stutter on phone GPUs. Promoting just these (~15 elements at
phone sizes) turns those writes into cheap compositor moves. Scoped to this
block on purpose - desktop is smooth already and extra layers cost memory. */
.koa-subject, .koa-mountain, .koa-seam-band, .koa-seam-cloud, .koa-seam-cloud-4,
.koa-wipe, .koa-hand, .koa-sloth-space, .koa-reveal { will-change: transform, opacity; }
/* ---- Find Us panel: plain blue, nothing but the locator card ----
The wave/kelp plate, the sloth and the drifting fish all come off, so there is
no waterline left to sit under — the card just centres on the empty panel. */
.koa-water-plate,
.koa-sloth-findus,
.koa-fish { display: none !important; }
.koa-copy.koa-copy-water {
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* ---- subjects ----
The pop-up sloths are sized as a % of a wide desktop panel, which leaves them
~110-155px on a phone and buried under the 300px-tall seam clouds (z-index 100).
Centre them, scale them up, lift them clear of the cloud and put them in front.
Only left/width/bottom/z-index are touched — transform stays free for the
scroll-in animation that opacity and translate() drive. */
.koa-subject {
left: 50% !important;
/* size by height so a tall sloth and a wide mountain both land in the lower
third, below the card (whose deepest bottom across the panels is ~367px) */
width: auto !important;
height: auto !important;
max-width: 60% !important;
max-height: 31% !important;
bottom: 8% !important;
z-index: 101 !important;
}
/* The mountain range rises on scroll. Its z-index:1 lifts it above the NEXT
panel (which is z-index:auto), so its base showed hanging over the seam while
it travelled. At z-index 0 the next panel covers the spill and the seam cloud
(z 100) hides what is left, so it now rises from behind the clouds. */
.koa-mountain { z-index: 0 !important; }
/* panel 6's sloth should emerge from behind its snowbank (z-index 1), not stand
on top of it — z-index 0 still paints it above the base plate beneath */
.koa-subject[src*="6_Subject"] { z-index: 0 !important; }
/* The page-anchored seam clouds are authored `width:140vw; height:300px` — the
width scales but the height does not, so on a phone they stretch ~3.4x and
swallow whatever is meant to peek over them. Restore the authored ratio
(140vw * 300/1792) and shift them back down with margin-top so they still
straddle their seam: their `top` is calc(Nvh - 200px), and +156px lands the
band centred on Nvh. Shifted via margin, not transform, because koa-glide
owns transform on these plates. */
.koa-seam-band {
height: 23.4vw !important;
margin-top: 156px !important;
}
.koa-seam-band[src*="8_Foreground_2"] { margin-top: 96px !important; } /* its top is -140px */
/* the two MEGA GUMMY sloths: drop them so their band crosses the body, and sit
them behind it rather than in front */
.koa-subject[src*="4_Subject"] { z-index: 99 !important; bottom: -2% !important; }
.koa-subject[src*="10_Subject"] { z-index: 3 !important; bottom: -2% !important; }
/* the moving hand belongs in front of the copy card */
.koa-hand { z-index: 50 !important; }
/* second MEGA GUMMY panel: drop the spinning gummies and the plane */
.koa-gummies-d, .koa-plane-d { display: none !important; }
/* two sloths are hand-placed at fixed desktop pixel offsets */
/* Drop him so the seam clouds (z-index 100) cross his body, and sit him at
z-index 0 so he emerges from BEHIND the next panel exactly like the mountain
range does. At z-index 99 his lower body painted over the next panel and
showed through the wispy gaps in the cloud plates against its cream sky. */
.koa-sloth-space {
left: 50% !important;
top: 76% !important;
width: 105vw !important;
height: auto !important;
z-index: 0 !important;
}
.koa-sloth-findus {
left: 50% !important;
top: 56px !important;
width: 60vw !important;
transform: translateX(-50%) !important;
z-index: 101 !important;
}
.koa-sloth-findus img { width: 100% !important; height: auto !important; }
/* the tropical-coast plates are authored at ~1200px; scale the stack to the screen */
/* its children are absolutely placed in px, so the wrapper must keep its authored
box — scale the whole stack down instead of resizing it */
/* Anchored to the panel floor so the foliage bottom meets the purple seam band
- parked mid-panel it left a strip of bare base plate showing underneath and
read as a pasted-on rectangle. -6% absorbs the children's parallax travel;
the panel is overflow:hidden, so the centred bleed clips cleanly. */
.koa-coast {
top: auto !important;
bottom: -6% !important;
left: 50% !important;
transform: translateX(-50%) scale(.55) !important;
transform-origin: 50% 100% !important;
}
/* The cloud over the Space -> mountains seam is authored at a fixed 2129x310,
which on a phone is 5.7x the screen and spills ~180px into the next panel,
burying its card. Size it to the viewport and sit it astride the seam. */
.koa-seam-cloud {
left: 50% !important;
transform: translateX(-50%) !important;
width: 150vw !important;
height: auto !important;
top: auto !important;
bottom: -42px !important;
}
/* Same problem at the snowy -> Convenience seam: 2022px wide, hanging 98px past
the seam and clipping that card. Centred with `left` rather than a transform,
because this plate's koa-glide animation owns transform. */
.koa-seam-cloud-4 {
left: calc(50% - 70vw) !important;
width: 140vw !important;
/* the plate is drawn squashed (2022x298), so auto height would restore its much
taller natural aspect — keep the authored ratio: 140vw * 298/2022 */
height: 20.6vw !important;
top: calc(334vh - 40px) !important;
}
/* The placeholder wipe blocks are 800px wide but travel in vw
(translateX: 105vw -> -125vw). At 1280px wide, -125vw = -1600px, so an 800px
block clears the screen. On a phone -125vw is only -469px, so the block parks
with 331px still covering the viewport and the wipe appears to stall.
Constraining the width to 100vw (<= the 125vw of travel) lets it exit fully
while still covering the whole frame mid-wipe. Width only — transform is
driven by the scroller. */
.koa-wipe { width: 115vw !important; } /* < the 125vw of travel, so it still exits */
/* ---- Convenience scroller: drop the three tin stickers on the right ---- */
.koa-tin-sticker { display: none !important; }
/* ---- store-locator iframe in the Find Us panel ---- */
.koa-copy iframe {
width: 100% !important;
/* svh = viewport with the browser chrome showing, so the panel still fits before
the URL bar collapses; vh stays as the fallback for engines without svh */
height: 52vh !important;
height: 52svh !important;
max-height: none !important;
margin: 14px auto 4px !important;
}
/* ---- decorative plates: pull the oversized ones back toward the viewport ---- */
/* the koa-float-* animations own transform, so a scale() here would never win —
shrink the real art through its width instead */
.koa-planet { transform: scale(.62); }
.koa-planet-art { width: calc(var(--w) * .58); }
/* rocket + comet run 3x their original size on a phone (2em -> 3em) */
.koa-sprite { width: 3em; }
.koa-shrink { transform-origin: 50% 50%; }
}
/* ---- tablet portrait (601-860px) ----
The phone rules above are tuned around a ~375px frame. At this width their
vw-sized plates roughly double while the px offsets that place them stay put,
so every seam cloud rides down over the copy card below it. Re-derive each
offset from the plate's own height rather than hard-coding it, and give the
card room on a panel that is now ~920px tall instead of ~630px.
Phones (<=600px) and desktop (>=861px) are deliberately untouched. */
@media (min-width: 601px) and (max-width: 860px) {
/* centre each band on its seam: its top is calc(Nvh - 200px) and the band is
23.4vw tall, so 200px minus half that height straddles the seam at any width */
.koa-seam-band { margin-top: calc(200px - 11.7vw) !important; }
.koa-seam-band[src*="8_Foreground_2"] { margin-top: calc(140px - 11.7vw) !important; }
/* half of 150vw * 310/2129 */
.koa-seam-cloud { bottom: -10.92vw !important; }
/* half of 140vw * 298/2022 */
.koa-seam-cloud-4 { top: calc(334vh - 10.3vw) !important; }
/* the phone nav sizes read small on a screen this wide */
.sc-host nav:not(.koa-footer-nav) a, body > nav a { font-size: 16px !important; }
.sc-host nav:not(.koa-footer-nav) img, body > nav img { height: 32px !important; }
.sc-host nav:not(.koa-footer-nav) > div, body > nav > div { gap: 8px 22px !important; }
/* pinned 88px down, the card left a large empty middle on the taller panel */
.koa-copy { top: 20% !important; }
/* The type sizes above are phone floors read at arm's length. On a tablet held
further away in a much wider card they read small, so step them roughly a
third up - still well under the desktop clamps, which top out at 44px/20px.
The card widens with them so the longer lines do not wrap any harder. */
.koa-copy { max-width: 620px !important; }
.koa-copy .koa-textbox { padding: 24px 22px !important; }
.koa-copy .koa-h1 { font-size: 40px !important; line-height: 1.08 !important; }
.koa-copy .koa-h2 { font-size: 34px !important; }
.koa-copy .koa-accent { font-size: 28px !important; }
.koa-copy .koa-p { font-size: 20px !important; line-height: 1.55 !important; }
.koa-copy .koa-p + .koa-p { margin-top: 14px !important; }
.koa-copy .koa-cta { font-size: 16px !important; padding: 14px 30px !important; }
/* the coast stack is authored 1137px wide; .33 filled a phone but covered less
than half of this frame, leaving the panel empty to the right */
.koa-coast { transform: scale(.78) !important; top: 44% !important; }
/* 105vw is 861px here, so he sprawled across the card in the panel below */
.koa-sloth-space { width: 70vw !important; }
/* The Convenience slider's cloud plate is drawn on the wrapper, whose height
comes from slide 1 alone - the other two are absolutely positioned on top and
run ~25px taller. On a phone the plate's 20% overhang swallows that; at this
width the wrapper is shorter, so the overhang is smaller than the overrun and
the last line of slides 2 and 3 spills past the cloud. Deepen the plate. */
.koa-copy > div:not(.koa-textbox)::before { bottom: -28% !important; }
}
/* ---- large tablets in portrait (>=861px wide and taller than wide) ----
These are on the desktop rules, but several plates are hand-placed at fixed px
offsets inside panels that are sized in vh. On a 900px-tall desktop the numbers
line up; on a 1366px-tall iPad Pro the panels grow to 1065px and the plates stay
put, so they no longer reach the seam they were drawn to hide.
Landscape is excluded, so a normal desktop window cannot match this. */
@media (min-width: 861px) and (orientation: portrait) {
/* The Space -> mountains cloud sits at top:501px in a 78vh panel. At 900px tall
that lands its base 109px past the panel edge, straddling the seam; at 1366px
tall it stops 254px short and the join shows as a hard horizontal line.
Anchoring it to the panel's bottom holds that same 109px overhang at any height. */
.koa-seam-cloud { top: auto !important; bottom: -109px !important; }
/* The tropical-coast stack is authored 1137x634 at top:72px, so it ends 706px
down. On a 1065px-tall panel that leaves a 359px band of bare sky plate below
it, reading as a hard-edged cream stripe across the panel. Sit the stack on the
panel floor instead: the art keeps its authored size and crop, and the leftover
space moves above it, where the base plate's sky belongs anyway. */
.koa-coast { top: auto !important; bottom: 0 !important; }
/* The astronaut sloth (and the cloud he sits in — one 771x395 block) is placed
at top:341px, which on a 702px desktop panel sinks him 235px into the seam
cloud below. On a 1065px portrait panel he ends 128px above it and floats
loose. Anchoring his bottom at the desktop overhang (-34px) restores the
nestled-in-the-cloud composition at any panel height. */
.koa-sloth-space { top: auto !important; bottom: -34px !important; }
}
/* very small phones: trim the header further so it doesn't eat the hero */
@media (max-width: 400px) {
.sc-host nav:not(.koa-footer-nav) a, body > nav a { font-size: 12px !important; }
.sc-host nav:not(.koa-footer-nav) > div, body > nav > div { gap: 5px 12px !important; }
.koa-copy .koa-textbox { padding: 16px 16px !important; }
.koa-copy .koa-h1 { font-size: 27px !important; }
}
/* coarse pointers can't hover, so hover-only affordances get a resting state */
@media (hover: none) {
.koa-cta { border-color: rgba(255,255,255,.95); }
}