/* ═══════════════════════════════════════════════════════════════════ Буквограй — «Пластилінова поличка» (Tactile Toybox) One stylesheet. Tokens + critical header/hero live inline in . ═══════════════════════════════════════════════════════════════════ */ /* ── shared atoms ─────────────────────────────────────────────────── */ .ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} #i-play path,#i-filter path,#i-pause rect{fill:currentColor;stroke:none} .h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--track-tight);color:var(--ink-2);max-width:20ch;padding-top:.06em} .sec--violet-light .h2,.sec--final .h2,.wall-violet .h2{color:#fff} /* the largest type on the page after the wordmark — it used to share --fs-h2 with every other section heading, so the page ended on a whisper */ .h2--hero{font-weight:900;color:#fff;text-shadow:var(--extrude-wordmark);max-width:14ch; font-size:clamp(2.25rem,1.4rem + 3.4vw,4rem);line-height:1.05} .lead{font-weight:600;font-size:var(--fs-lead);line-height:1.5;color:var(--ink);max-width:44ch} .lead--wide{max-width:52ch} .sec--violet-light .lead,.sec--final .lead{color:#fff} .block__t{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.015em;color:var(--ink-2);padding-top:.05em} /* two lines reserved so the bodies under a row of cards start on one baseline */ @media (min-width:640px){.blocks--4 .block__t,.world .block__t{min-height:2.5em}} .block__b{font-weight:600;font-size:var(--fs-small);line-height:1.5;color:var(--ink);margin-top:8px} /* overflow-x:clip (not hidden) keeps rotated cards and lifted stickers from widening the document without turning any section into a scroll container. */ .sec{position:relative;padding-block:var(--section-y);scroll-margin-top:var(--anchor-offset);overflow-x:clip} .sec--sky{background:var(--wall-sky)} /* light-to-light seams get 62% of the top pad: with #f0f9ff / #ffffff / #f8fafc / cream all but indistinguishable, a doubled 128px gutter reads as padding, not composition */ .sec--sky + .sec--white,.sec--white + .sec--slate,.sec--slate + .sec--cream, .sec--cream + .sec--white,.sec--white + .sec--sky{padding-block-start:calc(var(--section-y) * .62)} .sec--white{background:var(--wall-white)} .sec--slate{background:var(--wall-slate)} .sec--cream{background:var(--mat-cream)} /* #ab59e6 is the hex the workshop art is generated on, so panel and wall are the same colour and no edge can ever show. White on #ab59e6 is 3.95:1, so every text run in this section is set at ≥19px/700 — large text, where the bar is 3:1. */ .sec--violet-light{background:var(--wall-violet-light);color:#fff} .sec--violet-light .lead{font-weight:700;font-size:clamp(1.1875rem,1rem + .6vw,1.375rem)} .sec--violet-light .checks li{font-size:1.1875rem;font-weight:700;line-height:1.4} .sec--final{background:var(--wall-violet);color:#fff} .sec > .wrap{position:relative;z-index:2} /* the pebble rail is absolutely positioned inside
*/ main{position:relative} .sec__head{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:clamp(32px,4vw,56px)} .sec__head--center{align-items:center;text-align:center} .sec__head--center .h2,.sec__head--center .lead{margin-inline:auto} /* a seven-line centred paragraph with two ragged edges is the «centred everything» tell */ .sec__head--center .lead{max-width:44ch;text-wrap:pretty} /* centred body copy survives at three lines; the games lead runs to six, which is the «centred everything» tell — the chip and the H2 stay centred, the paragraph does not */ @media (min-width:720px){ #games .sec__head--center .lead{text-align:start;max-width:58ch} #games .sec__head{margin-bottom:clamp(20px,2.4vw,32px)} } .sec__head--center .h2{text-wrap:balance} /* flex-end, not center: the chip is a label sitting beside a toy on the same shelf */ .eyebrow{display:flex;align-items:flex-end;gap:12px;margin:0} .eyebrow .chip{margin-bottom:5px} .eyebrow--center{justify-content:center} /* felt / grain texture on the cream mat */ .sec--cream::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")} .skip{display:inline-flex;align-items:center;min-height:48px} .badges--sm .badge{min-height:48px;align-items:center} /* ── plank ────────────────────────────────────────────────────────── */ .plank{position:relative;padding-bottom:calc(var(--shelf-h) + 10px)} .plank::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:var(--shelf-h);border-radius:2px 2px 5px 5px; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 8px 16px rgba(156,51,212,.28)} .sec--sky .plank::after,.sec--white .plank::after,.sec--slate .plank::after,.sec--cream .plank::after{box-shadow:0 8px 16px rgba(56,189,248,.2)} .plank--badges{display:inline-block} /* a centred plank has to hug its badges, not span the whole container */ .plank--center{display:table;margin:clamp(32px,4vw,52px) auto 0} .plank--badges::after{left:-14px;right:-14px} /* ── store badges ─────────────────────────────────────────────────── */ .badges{display:flex;align-items:flex-end;gap:var(--badge-gap);flex-wrap:wrap;justify-content:flex-start} .plank--center .badges{justify-content:center} .badge{display:inline-flex;align-items:flex-end;padding:2px 2px 0;border-radius:10px;text-decoration:none} .badge img{height:var(--badge-h);width:auto} .badges--sm .badge img{height:40px} @media (max-width:339px){.badges{flex-direction:column;align-items:flex-start}} /* ── clay tile ────────────────────────────────────────────────────── */ .tile{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;margin:0;padding:0;border:0; border-radius:var(--r-tile); background-color:var(--shelf-top); background-image:url("/assets/art/tile-blank-teal-256.webp");background-image:image-set(url("/assets/art/tile-blank-teal-256.avif") type("image/avif"),url("/assets/art/tile-blank-teal-256.webp") type("image/webp")); background-size:104% 104%;background-position:center;background-repeat:no-repeat; box-shadow:var(--sh-tile-light); container-type:inline-size; color:var(--glyph-blue); -webkit-tap-highlight-color:transparent;touch-action:manipulation; transition:transform var(--d-press) var(--ease-out),box-shadow var(--d-press) var(--ease-out)} button.tile,.tile[data-audio]{cursor:pointer} /* 46cqi keeps the widest glyphs (Ж Ц Ш Щ Ю М) and every descender inside the rope frame baked into the texture; at 52cqi they crossed it at every tile size */ .tile__g{font-family:var(--font-display);font-weight:900;font-size:46cqi;line-height:var(--lh-glyph);padding:.06em 0 .04em; color:inherit;text-shadow:var(--extrude-blue);user-select:none;-webkit-user-select:none;pointer-events:none; filter:drop-shadow(0 .05em .06em rgba(107,25,173,.28))} .sec--sky .tile__g,.sec--white .tile__g,.sec--slate .tile__g,.sec--cream .tile__g,.ftr__divider .tile__g{filter:drop-shadow(0 .05em .06em rgba(56,189,248,.26))} .wall-violet .tile,.sec--violet-light .tile,.sec--final .tile{box-shadow:var(--sh-tile)} .tile--tex1{background-image:url("/assets/art/tile-blank-teal-256.webp");background-image:image-set(url("/assets/art/tile-blank-teal-256.avif") type("image/avif"),url("/assets/art/tile-blank-teal-256.webp") type("image/webp"))} .tile--tex2{background-image:url("/assets/art/tile-blank-terracotta-256.webp");background-image:image-set(url("/assets/art/tile-blank-terracotta-256.avif") type("image/avif"),url("/assets/art/tile-blank-terracotta-256.webp") type("image/webp"))} .tile--tex3{background-image:url("/assets/art/tile-blank-olive-256.webp");background-image:image-set(url("/assets/art/tile-blank-olive-256.avif") type("image/avif"),url("/assets/art/tile-blank-olive-256.webp") type("image/webp"))} .tile--blue{color:var(--glyph-blue)} .tile--blue .tile__g{text-shadow:var(--extrude-blue)} .tile--coral{color:var(--glyph-coral)} .tile--coral .tile__g{text-shadow:var(--extrude-coral)} .tile--sage{color:var(--glyph-sage)} .tile--sage .tile__g{text-shadow:var(--extrude-sage)} /* colour + texture cycles inside letter rows */ .shelf33 .tile:nth-child(3n+1),.ticker__row .tile:nth-child(3n+1),.ftr__divider .tile:nth-child(3n+1){background-image:linear-gradient(rgba(156,192,192,.20),rgba(156,192,192,.20)),url("/assets/art/tile-blank-teal-256.webp");background-image:linear-gradient(rgba(156,192,192,.20),rgba(156,192,192,.20)),image-set(url("/assets/art/tile-blank-teal-256.avif") type("image/avif"),url("/assets/art/tile-blank-teal-256.webp") type("image/webp"));color:var(--glyph-coral)} .shelf33 .tile:nth-child(3n+2),.ticker__row .tile:nth-child(3n+2),.ftr__divider .tile:nth-child(3n+2){background-image:linear-gradient(rgba(191,90,38,.16),rgba(191,90,38,.16)),url("/assets/art/tile-blank-terracotta-256.webp");background-image:linear-gradient(rgba(191,90,38,.16),rgba(191,90,38,.16)),image-set(url("/assets/art/tile-blank-terracotta-256.avif") type("image/avif"),url("/assets/art/tile-blank-terracotta-256.webp") type("image/webp"));color:var(--glyph-sage)} .shelf33 .tile:nth-child(3n+3),.ticker__row .tile:nth-child(3n+3),.ftr__divider .tile:nth-child(3n+3){background-image:linear-gradient(rgba(100,139,99,.15),rgba(100,139,99,.15)),url("/assets/art/tile-blank-olive-256.webp");background-image:linear-gradient(rgba(100,139,99,.15),rgba(100,139,99,.15)),image-set(url("/assets/art/tile-blank-olive-256.avif") type("image/avif"),url("/assets/art/tile-blank-olive-256.webp") type("image/webp"));color:var(--glyph-blue)} .shelf33 .tile:nth-child(3n+1) .tile__g,.ticker__row .tile:nth-child(3n+1) .tile__g,.ftr__divider .tile:nth-child(3n+1) .tile__g{text-shadow:var(--extrude-coral)} .shelf33 .tile:nth-child(3n+2) .tile__g,.ticker__row .tile:nth-child(3n+2) .tile__g,.ftr__divider .tile:nth-child(3n+2) .tile__g{text-shadow:var(--extrude-sage)} .shelf33 .tile:nth-child(3n+3) .tile__g,.ticker__row .tile:nth-child(3n+3) .tile__g,.ftr__divider .tile:nth-child(3n+3) .tile__g{text-shadow:var(--extrude-blue)} @media (hover:hover) and (pointer:fine){ button.tile:hover,.tile[data-audio]:hover{animation:wobble var(--d-wobble) var(--ease-out) 1;transform:translateY(-4px)} } button.tile:active,.tile[data-audio]:active{transform:translateY(3px);box-shadow:0 calc(var(--edge-tile) - 3px) 0 var(--shelf-lip),0 6px 12px rgba(56,189,248,.14)} /* the tap squash has to outrank the hover wobble (0,2,1): a mouse click always leaves the tile hovered, so at equal specificity the squash only played on pointerleave */ .tile[data-audio].is-pop.is-pop{animation:pop-squash var(--d-pop) var(--ease-back) 1} .tile.is-playing{box-shadow:0 0 0 4px var(--sparkle-gold),var(--sh-tile-light)} .wall-violet .tile.is-playing,.sec--violet-light .tile.is-playing,.sec--final .tile.is-playing{box-shadow:0 0 0 4px var(--sparkle-gold),var(--sh-tile)} .tile--icon{flex:0 0 auto;width:38px;height:38px;aspect-ratio:auto;border-radius:12px;box-shadow:0 4px 0 var(--shelf-lip)} /* the 38px face is too small to read the rope frame baked into the texture, so it takes a modelled clay gradient instead and finally carries a colour */ .tile--icon.ic--blue,.tile--icon.ic--coral,.tile--icon.ic--sage,.tile--icon.ic--teal{background-image:none} .tile--icon.ic--blue{background-color:var(--clay-blue-sh);background-image:linear-gradient(180deg,var(--clay-blue),var(--clay-blue-sh));box-shadow:0 4px 0 var(--glyph-blue-sh);color:#fff} .tile--icon.ic--coral{background-color:var(--clay-coral-sh);background-image:linear-gradient(180deg,var(--clay-coral),var(--clay-coral-sh));box-shadow:0 4px 0 var(--glyph-coral-sh);color:#fff} .tile--icon.ic--sage{background-color:var(--clay-sage-sh);background-image:linear-gradient(180deg,var(--clay-sage),var(--clay-sage-sh));box-shadow:0 4px 0 var(--glyph-sage-sh);color:#fff} .tile--icon.ic--teal{background-color:var(--frame-teal);background-image:linear-gradient(180deg,#bcd6d6,var(--frame-teal));box-shadow:0 4px 0 #7ba3a3;color:var(--ink-2)} .tile--icon .ic{width:20px;height:20px} .tile--chapter{width:52px;height:52px;aspect-ratio:auto;flex:0 0 auto} .tile--chapter .tile__g{font-size:26px} @media (min-width:720px){.tile--chapter{width:60px;height:60px}.tile--chapter .tile__g{font-size:29px}} /* ── header ───────────────────────────────────────────────────────── */ .hdr__nav{display:none} .hdr__cta{display:none} .hdr__burger{width:48px;height:48px;display:grid;place-items:center;background:var(--shelf-top);border:0;border-radius:14px;color:var(--ink);cursor:pointer;flex:0 0 auto; box-shadow:0 4px 0 var(--shelf-lip),0 8px 14px rgba(107,25,173,.35)} .hdr__burger .ic{width:24px;height:24px} .hdr__burger .ic--close{display:none} .hdr.is-solid .hdr__burger{box-shadow:0 4px 0 var(--shelf-lip),0 8px 14px rgba(56,189,248,.24)} .hdr__burger[aria-expanded="true"] .ic--menu{display:none} .hdr__burger[aria-expanded="true"] .ic--close{display:block} /* six links + the pill need ~1090px of the 1104px container, so the six-link bar only switches on at 1200; below that the drawer carries the same six links. The pill, however, comes back at 1024 — that is where the page is already a desktop layout, and the store link has to stay in view once the hero scrolls past. */ @media (min-width:1024px){ /* a three-link nav fills the middle of the bar between 1024 and 1199, where the full six links plus the pill do not fit */ .hdr__nav{display:flex;align-items:center;gap:8px} .hdr__nav a:nth-child(-n+3){display:none} .hdr__nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;height:48px;min-width:48px;padding-inline:6px;font-weight:700;font-size:14.5px;color:#fff;text-decoration:none;white-space:nowrap} .hdr__nav a::after{content:"";position:absolute;left:6px;right:6px;bottom:8px;height:3px;border-radius:2px;background:var(--sparkle-gold);transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-out)} .hdr__nav a:hover::after,.hdr__nav a:focus-visible::after{transform:scaleX(1)} .hdr.is-solid .hdr__nav a{color:var(--ink-2)} .hdr.is-solid .hdr__nav a::after{background:var(--frame-terracotta)} .hdr__cta{display:inline-flex;align-items:center;height:48px;padding:0 16px;margin-left:8px;border-radius:var(--r-pill); background:var(--cta-grad);color:#fff;font-weight:800;font-size:14.5px;text-decoration:none;white-space:nowrap; box-shadow:0 4px 0 var(--violet-deep),0 8px 16px rgba(99,102,241,.35);transition:transform 200ms var(--ease-out)} .hdr__cta:hover{transform:translateY(-2px)} } @media (min-width:1200px){ .hdr__burger{display:none} .hdr__nav{display:flex;align-items:center;gap:8px} .hdr__nav a:nth-child(-n+3){display:inline-flex} /* min-width keeps even the shortest label («Ігри») at a 48×48 hit area */ .hdr__nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;height:48px;min-width:48px;padding-inline:6px;font-weight:700;font-size:14.5px;color:#fff;text-decoration:none;white-space:nowrap} .hdr__nav a::after{content:"";position:absolute;left:6px;right:6px;bottom:8px;height:3px;border-radius:2px;background:var(--sparkle-gold);transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-out)} .hdr__nav a:hover::after,.hdr__nav a:focus-visible::after{transform:scaleX(1)} .hdr.is-solid .hdr__nav a{color:var(--ink-2)} .hdr.is-solid .hdr__nav a::after{background:var(--frame-terracotta)} } /* drawer sheet */ /* the burger doubles as the drawer's close (x) button and the panel already reserves header height as padding, so the header has to sit above the sheet, not under it */ .hdr{z-index:calc(var(--z-sheet) + 1)} .drawer{position:fixed;inset:0;z-index:var(--z-sheet);background:rgba(15,23,42,.42); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .drawer[hidden]{display:none} .drawer__panel{background:var(--wall-white);border-bottom:6px solid var(--shelf-lip);border-radius:0 0 var(--r-panel) var(--r-panel); padding:calc(var(--header-h) + env(safe-area-inset-top) + 12px) var(--gutter) 26px;box-shadow:0 18px 40px rgba(15,23,42,.25); max-height:100dvh;overflow-y:auto;overscroll-behavior:contain; -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent 100%); transform:translateY(-10px);opacity:0;transition:transform 220ms var(--ease-out),opacity 220ms var(--ease-out)} .drawer.is-open .drawer__panel{transform:none;opacity:1} .drawer__nav{display:flex;flex-direction:column;row-gap:8px;margin-bottom:18px} .drawer__nav a{display:flex;align-items:center;min-height:56px;font-weight:700;font-size:17px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--card-edge)} .drawer__nav a:last-child{border-bottom:0} /* ── HERO ─────────────────────────────────────────────────────────── */ .hero__grid{display:grid;gap:var(--sp-5)} .hero__chip{align-self:flex-start} /* the speaking chapter tile leaning on the wordmark; hidden where the line is tight */ /* the h1 owns only the two text spans; the speaking tile is a sibling, so the heading's text and accessible name stay «Буквограй Абетка, що говорить…» */ .hero__wm{position:relative;display:flex;align-items:flex-start;gap:14px} @media (min-width:768px){.hero__wm{padding-left:10px}} .hero__wm > h1{flex:0 1 auto;min-width:0} /* pinned to the h1's top-left corner, a sticker pressed onto the logotype — as a flex sibling it sat after the final «й» and clipped its tail */ .hero__atile{display:none} @media (min-width:768px){ .hero__atile{display:grid;position:absolute;left:max(-34px,calc(-6px - 100%));top:-16px;z-index:3;width:48px;height:48px;aspect-ratio:auto; transform:rotate(-8deg);filter:drop-shadow(0 6px 10px rgba(107,25,173,.55))} .hero__atile .tile__g{font-size:22px} } @media (min-width:1200px){ .hero__atile{left:max(-46px,calc(-8px - 100%));top:-20px;width:56px;height:56px} .hero__atile .tile__g{font-size:26px} } .hero__plank{margin-top:var(--sp-2)} .hero__hint{display:flex;align-items:center;gap:10px;margin-top:var(--sp-2);font-weight:700;font-size:var(--fs-caption);color:var(--on-violet)} .hint__arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff} .hint__arrow .ic{width:16px;height:16px} .hero__art{position:relative;margin-inline:calc(var(--gutter) * -1);width:calc(100% + var(--gutter) * 2);height:252px;overflow:hidden;margin-top:var(--sp-5)} /* 100% keeps the cube standing on the band floor with its contact shadow; 84% cut the base off on a flat line */ .hero__key{width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform:scale(1.06); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 100%)} .hero__sparks{position:absolute;inset:0;pointer-events:none} .hero__sparks svg{width:100%;height:100%} .sp--gold{fill:var(--sparkle-gold)} .sp--cyan{fill:var(--sparkle-cyan)} .sp--pale{fill:var(--sparkle-pale);opacity:.85} .hero__tiles{position:absolute;inset:0;pointer-events:none;z-index:5} .hero__tile{position:absolute;pointer-events:auto;width:58px;height:58px;aspect-ratio:auto} .hero__tile--1{left:5%;top:16%} .hero__tile--2{left:19%;top:56%} .hero__tile--3{right:8%;top:12%} .hero__tile--4{right:22%;bottom:10%} /* the spec puts three crisp tiles on the mobile band; the fourth crowds the strip */ @media (max-width:699px){.hero__tile--4{display:none}} .hero__phone{display:none} /* 560-699: a narrower, taller band — a full-bleed 300px window over the portrait art scaled the cube up and chopped it top and bottom */ @media (min-width:560px) and (max-width:699px){ .hero__art{margin-inline:auto;width:min(100%,460px);height:400px} .hero__tile{width:66px;height:66px} } /* 700-1023 (every iPad in portrait): two columns, so the portrait art gets a portrait band instead of a 300px letterbox with 19% of the image showing */ @media (min-width:700px) and (max-width:1023px){ .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:var(--sp-5)} .hero__text{max-width:none} .hero__art{margin:0;width:auto;height:auto;aspect-ratio:4/5;max-height:66vh;align-self:center} .hero__key{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%); mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%)} .hero__tile{width:72px;height:72px} } @media (min-width:1024px){ .hero__grid{grid-template-columns:repeat(12,1fr);align-items:center;gap:0;min-height:min(78vh,700px)} .hero__text{grid-column:1 / 7;grid-row:1;position:relative;z-index:3;max-width:none;padding-block:clamp(32px,4vw,64px) clamp(40px,6vw,88px)} .hero__chip{order:1} .hero__wm{order:2} .hero__sub{order:3;margin-top:2px} .hero__plank{order:4;margin-top:6px} .hero__note{order:5} .hero__trust{order:6} .hero__hint{order:7;margin-top:14px} .hero__art{grid-column:7 / 13;grid-row:1;margin:0;width:auto;height:auto;aspect-ratio:4/5;max-height:min(78vh,700px);align-self:center} .hero__key{object-position:100% 50%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 100%)} .hero__tile{width:86px;height:86px} .hero__tile--1{left:16%;top:12%} .hero__tile--2{left:2%;top:32%} .hero__tile--3{right:4%;top:20%} .hero__tile--4{right:20%;bottom:10%} .hero__phone{display:block;position:absolute;left:2%;bottom:2%;transform:rotate(-6deg);z-index:2; filter:drop-shadow(-10px 14px 18px rgba(107,25,173,.55))} .hero__phone::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-12px;height:16px;border-radius:50%; background:radial-gradient(ellipse at 50% 50%,rgba(107,25,173,.6),transparent 72%);filter:blur(5px);z-index:-1} .phone--hero{--phone-h:290px} } @media (min-width:1200px){.phone--hero{--phone-h:330px}} @media (max-height:480px) and (orientation:landscape) and (max-width:1023px){ .hero__art{display:none} /* the wordmark span is full-width when the text is centred, so the tile pinned to its box lands in empty violet well left of the glyphs */ .hero__atile{display:none} /* the badges landed 21px above the fold on a 390px-tall viewport */ .hero__in{padding-block:12px 0} .hero__headline{font-size:18px;line-height:1.1} .hero__plank{margin-top:0} /* the art is gone, so the 700-1023 two-track rule has to go with it, or the copy sits in a 47%-wide column and the right half of the screen is empty wall */ .hero__grid{grid-template-columns:1fr} .hero__chip{align-self:center} .wordmark{font-size:36px} .hero__text{align-items:center;text-align:center;margin-inline:auto;max-width:36rem} .hero__wm{justify-content:center} .badges{justify-content:center} .hero__hint{justify-content:center} } /* ── LETTER TICKER ────────────────────────────────────────────────── */ .ticker{position:relative;background:var(--wall-violet);padding-bottom:clamp(24px,3vw,40px)} .ticker__band{position:relative;display:flex;align-items:flex-end;gap:16px;height:104px;padding-inline:clamp(12px,3vw,32px)} .ticker__band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--shelf-h); background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 10px 22px rgba(107,25,173,.4)} /* padding-top is the lever: overflow:hidden is required by the marquee, and with zero headroom it shaved the tiles' 18% top radius and clipped the -4px hover lift */ .ticker__viewport{position:relative;z-index:1;flex:1 1 auto;min-width:0;overflow:hidden;padding:16px 0 var(--shelf-h); /* the tile has to be fully gone before it reaches the pause button, or it shows as a half-faded lilac ghost next to it */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 88%,transparent 100%)} .ticker__track{display:flex;width:max-content;animation:marquee var(--marquee-dur) linear infinite} .ticker__row{display:flex;gap:10px;padding-right:10px} .ticker__row[aria-hidden="true"] .tile{pointer-events:none;cursor:default} .ticker__row .tile{width:52px;height:52px;aspect-ratio:auto;flex:0 0 auto} .ticker__viewport:hover .ticker__track,.ticker__viewport:focus-within .ticker__track, .ticker.is-paused .ticker__track,.ticker.is-held .ticker__track,.ticker.is-offscreen .ticker__track{animation-play-state:paused} .ticker__toggle{position:relative;z-index:2;width:48px;height:48px;margin-bottom:var(--shelf-h);display:grid;place-items:center; border:0;border-radius:50%;background:var(--shelf-top);color:var(--ink);cursor:pointer;box-shadow:0 5px 0 var(--shelf-lip),0 8px 14px rgba(107,25,173,.35);flex:0 0 auto} .ticker__toggle .ic{width:20px;height:20px} .ticker__toggle .ic--play{display:none} .ticker__toggle[data-paused="true"] .ic--pause{display:none} .ticker__toggle[data-paused="true"] .ic--play{display:block} .ticker__cap{margin-top:clamp(14px,1.6vw,20px);font-weight:700;font-size:var(--fs-small);color:var(--on-violet);text-align:center} @media (min-width:720px){ .ticker__band{height:118px} .ticker__row .tile{width:64px;height:64px} } /* ── INTRO SHELF ──────────────────────────────────────────────────── */ .intro__grid{display:flex;flex-direction:column;gap:var(--sp-6);align-items:center} .intro__lead{font-weight:700;font-size:clamp(1.0625rem,1rem + .6vw,1.375rem);line-height:1.5;color:var(--ink-2);max-width:60ch} .pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:var(--sp-5)} /* every row shares one top edge: a centred single-line row sat ~10px lower than its top-aligned multi-line neighbours and the list read as misaligned */ .pills{position:relative;padding-bottom:calc(var(--shelf-h) + 14px)} .pills::after{content:"";position:absolute;left:-14px;right:-14px;bottom:0;height:var(--shelf-h);border-radius:2px 2px 5px 5px; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 6px 12px rgba(214,164,89,.3);pointer-events:none} .pill{display:flex;align-items:flex-start;gap:12px;font-weight:700;font-size:var(--fs-small);line-height:1.35;color:var(--ink-2)} .pill > span:last-child{padding-top:9px} .intro__phone{order:-1;display:flex;justify-content:center} @media (min-width:1024px){ .intro__grid{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;gap:var(--sp-7)} .intro__main{grid-column:1 / 8} .intro__phone{grid-column:9 / 13;order:0} .intro__phone .phone{transform:rotate(-3deg)} .pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} } @media (max-width:359px){.pills{grid-template-columns:1fr}} .stats{position:relative;display:flex;gap:clamp(28px,6vw,72px);justify-content:center;width:max-content;max-width:100%; margin:clamp(36px,5vw,64px) auto;padding-bottom:calc(var(--shelf-h) + 10px)} .stats::after{content:"";position:absolute;left:-28px;right:-28px;bottom:10px;height:var(--shelf-h);border-radius:2px 2px 5px 5px; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 6px 12px rgba(214,164,89,.3)} .stat{display:flex;flex-direction:column;align-items:center;gap:calc(var(--edge-tile) + 8px);margin:0} /* free ochre clay numerals standing on the plank, as specced — the tile frame made «33» overrun the rope baked into the texture and gave the pair two different widths */ .stat__n{display:block;font-weight:900;font-size:var(--fs-stat);line-height:1;color:var(--shelf-top); text-shadow:var(--extrude-blue);font-variant-numeric:tabular-nums; filter:drop-shadow(0 .06em .05em rgba(56,189,248,.3))} .stat--coral .stat__n{text-shadow:var(--extrude-coral)} /* --muted is specced against #f8fafc (4.58:1); these labels sit on the lighter #f0f9ff wall, where it drops to 4.47:1 — under AA for 15px text, so they take ink-2 instead */ .stat__l{font-weight:800;font-size:var(--fs-small);color:var(--ink-2);text-transform:none} /* ── toy blocks grid ──────────────────────────────────────────────── */ .block{position:relative;background:#fff;border-radius:var(--r-block);padding:20px 20px 22px;margin-bottom:var(--edge-block); box-shadow:0 var(--edge-block) 0 var(--shelf-top),var(--sh-light); transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out)} .blocks--cream .block{box-shadow:0 var(--edge-block) 0 var(--shelf-top),0 12px 26px rgba(214,164,89,.28)} .block__ic{margin-bottom:12px} .block--wide{margin-top:var(--sp-5)} @media (hover:hover) and (pointer:fine){ .block:hover{transform:translateY(-8px);box-shadow:0 var(--edge-block-lift) 0 var(--shelf-top),var(--sh-light-lift)} .blocks--cream .block:hover{box-shadow:0 var(--edge-block-lift) 0 var(--shelf-top),0 20px 36px rgba(214,164,89,.34)} } .blocks{display:grid;gap:18px} /* a cool blue-grey lip and a sky-tinted blur under an ochre board read as haze, not as an object meeting a shelf — every block that stands on a plank goes warm */ .blocks--4 > .block,.gcard,.world{box-shadow:0 var(--edge-block) 0 var(--shelf-top),0 10px 22px rgba(214,164,89,.26)} @media (hover:hover) and (pointer:fine){ .blocks--4 > .block:hover,.gcard:hover,.world:hover{box-shadow:0 var(--edge-block-lift) 0 var(--shelf-top),0 18px 32px rgba(214,164,89,.32)} } @media (min-width:560px){ .blocks--2{grid-template-columns:1fr 1fr;--gap:18px;column-gap:var(--gap); row-gap:calc(var(--edge-block) + var(--shelf-h) + 26px)} /* the page's longest section was the only one whose cards stood on nothing; same butting-plank construction as .blocks--4 and .games */ .blocks--2 > .block::after{content:"";position:absolute;left:calc(var(--gap) / -2 - 1px);right:calc(var(--gap) / -2 - 1px); top:calc(100% + var(--edge-block));height:var(--shelf-h);pointer-events:none; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 6px 12px rgba(214,164,89,.3)} } /* Eight feature blocks: a swipeable shelf under 640px (84% cards, neighbour peeks), 2 columns to 1023px, then four per plank. */ .blocks--4{--gap:18px;grid-auto-flow:column;grid-auto-columns:84%;gap:var(--gap); overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter); padding-bottom:calc(var(--edge-block) + var(--shelf-h) + 20px); scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain} .blocks--4::-webkit-scrollbar{display:none} .blocks--4 > .block{scroll-snap-align:start} /* adjacent planks butt together into one continuous shelf under each row */ .blocks--4 > .block::after{content:"";position:absolute;left:calc(var(--gap) / -2 - 1px);right:calc(var(--gap) / -2 - 1px); top:calc(100% + var(--edge-block));height:var(--shelf-h);pointer-events:none; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 6px 12px rgba(214,164,89,.3)} @media (min-width:640px){ .blocks--4{grid-auto-flow:row;grid-template-columns:1fr 1fr;overflow:visible; margin-inline:0;padding-inline:0;row-gap:calc(var(--edge-block) + var(--shelf-h) + 26px);padding-bottom:0} } @media (min-width:1024px){ .blocks--4{--gap:20px;grid-template-columns:repeat(4,1fr)} .blocks--4 .block__t{font-size:16px;line-height:1.18;letter-spacing:-.02em} } /* ── HOW IT WORKS ─────────────────────────────────────────────────── */ .steps{display:grid;gap:clamp(36px,5vw,48px);counter-reset:none;margin:0;padding:0;list-style:none} .step{display:grid;gap:18px;justify-items:center;text-align:center} .step__stage{position:relative;padding-bottom:calc(var(--shelf-h) + 10px)} .step__stage::after{content:"";position:absolute;left:-26px;right:-26px;bottom:10px;height:var(--shelf-h);border-radius:2px 2px 5px 5px; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 8px 16px rgba(56,189,248,.22)} /* far enough out that the tile lands on the bezel, never on the app's own header */ .step__num{position:absolute;left:-34px;top:-30px;z-index:3;width:56px;height:56px;aspect-ratio:auto;transform:rotate(-8deg)} .step__num .tile__g{font-size:32px} .step__t{font-weight:600;font-size:var(--fs-small);line-height:1.5;color:var(--ink);max-width:32ch} .wave{position:absolute;right:-22px;top:38%;z-index:3;display:flex;align-items:center;gap:4px} .wave i{display:block;width:6px;border-radius:99px;background:var(--sparkle-cyan);box-shadow:0 2px 0 rgba(14,165,233,.4)} .wave i:nth-child(1){height:14px}.wave i:nth-child(2){height:26px}.wave i:nth-child(3){height:18px} @media (min-width:900px){ .steps{position:relative;grid-template-columns:repeat(3,1fr);align-items:start} .step{align-content:start} /* one continuous board under all three phones, not a stub per step */ .step__stage::after{display:none} .steps::after{content:"";position:absolute;left:calc(var(--gutter) / -2);right:calc(var(--gutter) / -2); top:var(--phone-h);height:var(--shelf-h);border-radius:2px 2px 5px 5px;pointer-events:none; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 8px 16px rgba(56,189,248,.22)} } /* ── LETTERS & POEMS ──────────────────────────────────────────────── */ .shelf33{--tgap:10px;display:grid;grid-template-columns:repeat(6,1fr);column-gap:var(--tgap); row-gap:calc(var(--edge-tile) + var(--shelf-h) + 26px);margin-bottom:clamp(44px,6vw,72px)} .shelf33 .tile::after{content:"";position:absolute;left:calc(var(--tgap) / -2 - 1px);right:calc(var(--tgap) / -2 - 1px); top:calc(100% + var(--edge-tile));height:var(--shelf-h); background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 6px 12px rgba(214,164,89,.3);pointer-events:none} @media (max-width:479px){.shelf33{--tgap:6px}} @media (max-width:359px){.shelf33{grid-template-columns:repeat(5,1fr)}} /* one continuous board per rung: the per-tile segments stop half a gap short at the row ends, and the last row of three stood on a stub */ /* the alphabet's finale used to land as three tiles hard against the left edge with an empty right half; centring the tail row makes it read as a deliberate short shelf */ @media (min-width:360px) and (max-width:719px){ .shelf33 > :nth-child(31){grid-column-start:2} .shelf33 .tile:nth-child(6n+1)::after{left:0} .shelf33 .tile:nth-child(6n)::after{right:0} /* the tail row holds three tiles: the board is visibly shorter, not a full rung of bare shelf running out to the right */ .shelf33 .tile:last-child::after{right:calc(var(--tgap) / -2 - 1px)} } @media (max-width:359px){ .shelf33 > :nth-child(31){grid-column-start:2} .shelf33 .tile:nth-child(5n+1)::after{left:0} .shelf33 .tile:nth-child(5n)::after{right:0} .shelf33 .tile:last-child::after{right:calc(var(--tgap) / -2 - 1px)} } @media (min-width:720px) and (max-width:1023px){ .shelf33 .tile:nth-child(7n+1)::after{left:0} .shelf33 .tile:nth-child(7n)::after{right:0} .shelf33 .tile:last-child::after{right:calc(var(--tgap) / -2 - 1px)} } @media (min-width:1024px){ .shelf33 .tile:nth-child(11n+1)::after{left:0} .shelf33 .tile:nth-child(11n)::after{right:0} } @media (min-width:720px){.shelf33{grid-template-columns:repeat(7,1fr);--tgap:12px}} @media (min-width:1024px){.shelf33{grid-template-columns:repeat(11,1fr);--tgap:14px}} .letters__lower{display:grid;gap:clamp(32px,4vw,48px)} /* Letter-card gallery: snap carousel with peeking neighbours under 900px. */ .cards3{display:grid;gap:18px;grid-auto-flow:column;grid-auto-columns:78%; overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1);padding:16px var(--gutter) 8px; scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain} .cards3::-webkit-scrollbar{display:none} .cards3 > .lcard{scroll-snap-align:center} .lcard{position:relative;background:#fff;border:4px solid #fff;border-radius:28px;padding:12px 12px 16px; box-shadow:0 8px 0 var(--shelf-top),var(--sh-light);margin-bottom:8px; transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out)} /* height:auto is load-bearing: the width/height attributes on these s map to a presentational height, which would otherwise beat aspect-ratio and stretch the box. */ .lcard__img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:20px;background:var(--wall-sky)} .lcard__tile{position:absolute;left:-10px;top:-14px;z-index:2;width:52px;height:52px;aspect-ratio:auto;transform:rotate(-6deg)} .lcard__tile .tile__g{font-size:30px} .lcard__w{margin-top:12px;font-weight:800;font-size:var(--fs-h3);color:var(--ink-2);text-align:center} .sticker{position:absolute;right:-8px;bottom:14px;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%; background:var(--shelf-top);color:var(--glyph-coral);cursor:pointer;transform:rotate(-8deg); box-shadow:0 4px 0 var(--shelf-lip),0 8px 16px rgba(56,189,248,.24)} .sticker .ic{width:22px;height:22px} .sticker.is-playing{box-shadow:0 0 0 4px var(--sparkle-gold),0 4px 0 var(--shelf-lip),0 8px 16px rgba(56,189,248,.24)} .sticker.is-pop{animation:pop-squash var(--d-pop) var(--ease-back) 1} @media (hover:hover) and (pointer:fine){.lcard:hover{transform:translateY(-8px);box-shadow:0 12px 0 var(--shelf-top),var(--sh-light-lift)}} @media (min-width:900px){ .cards3{position:relative;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);gap:24px; overflow:visible;margin-inline:0;padding:18px 0 calc(var(--shelf-h) + 18px)} /* the gallery owns the shelf metaphor; it has to stand on a board like everything else */ .cards3::after{content:"";position:absolute;left:-18px;right:-18px;bottom:0;height:var(--shelf-h);border-radius:2px 2px 5px 5px; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 6px 12px rgba(214,164,89,.3);pointer-events:none} } .letters__side{display:grid;gap:28px;align-items:start} .checks{display:grid;gap:12px} .checks li{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:var(--fs-small);line-height:1.45;color:var(--ink)} .checks--light li{color:#fff} .checks--2col{margin-top:clamp(28px,4vw,44px)} @media (min-width:720px){.checks--2col{grid-template-columns:1fr 1fr;gap:12px 28px}} .tick{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--shelf-top);color:var(--glyph-sage);box-shadow:0 3px 0 var(--shelf-lip)} .tick .ic{width:17px;height:17px;stroke-width:3.4} .tick--green{color:#0e6f52} /* the violet-on-violet tick was the only non-clay tick on the page */ .tick--light{color:var(--glyph-sage)} .letters__phone{display:flex;justify-content:center} /* the three letter cards are the section's product proof: give them the whole container row instead of 653px shared with a checklist and a phone frame */ @media (min-width:1024px){ .letters__side{grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center} .letters__side .checks{grid-template-columns:1fr 1fr;gap:14px 32px} } /* ── MAJSTERNIA ───────────────────────────────────────────────────── */ .custom__grid{display:grid;gap:var(--sp-6)} .custom__text{display:grid;gap:var(--sp-4);align-content:start} .custom__media{position:relative} /* panel and wall are the same #ab59e6, so only the 14px lip draws the workbench; the 2:1 window is the band the art actually occupies, so no flat slab is ever shown */ .bench{border-radius:var(--r-panel);overflow:hidden;background:var(--wall-violet-light); box-shadow:0 14px 0 var(--violet-deeper),var(--sh-violet)} .bench__img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:50% 84%} .custom__phone{display:flex;justify-content:center;margin-top:-28px} /* leaning on the bench, with the hero's elliptical contact shadow under it */ .custom__phone .phone{transform:rotate(-4deg)} .custom__phone,.avatar__phones{position:relative} .custom__phone::after,.avatar__phones::after{content:"";position:absolute;left:22%;right:22%;bottom:-10px;height:16px; border-radius:50%;filter:blur(5px);z-index:-1;pointer-events:none} .custom__phone::after{background:radial-gradient(ellipse at 50% 50%,rgba(107,25,173,.6),transparent 72%)} .avatar__phones::after{background:radial-gradient(ellipse at 50% 50%,rgba(56,189,248,.45),transparent 72%)} .phone--sm{--phone-h:240px} @media (min-width:1024px){ /* the media column is shorter than the text column; centring it stops the whole lower-right quadrant of the section from reading as one unfinished hole */ .custom__grid{grid-template-columns:repeat(12,1fr);gap:var(--sp-7);align-items:center} .custom__text{grid-column:1 / 7} .custom__media{grid-column:7 / 13} /* the phone leans on the panel's bottom-right corner, on its own contact shadow */ .custom__phone{position:absolute;right:-2%;bottom:-44px;margin:0} .phone--sm{--phone-h:320px} } .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-5)} .tag{display:inline-flex;align-items:center;padding:10px 16px;border-radius:var(--r-pill);font-weight:800;font-size:var(--fs-small); background:var(--shelf-top);color:var(--ink);box-shadow:0 4px 0 var(--shelf-lip)} .tags--violet .tag{background:var(--violet-deep);color:#fff;box-shadow:0 4px 0 var(--violet-deeper)} /* the deeper clay tone carries the fill; the lighter one stays as the 4px lip */ .tag__d{flex:0 0 auto;width:20px;height:20px;margin-right:11px;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)} .tag__d--blue{background:var(--clay-blue)} .tag__d--coral{background:var(--clay-coral)} .tag__d--sage{background:var(--clay-sage)} .tag__d--teal{background:var(--frame-teal)} .tags--grid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin-top:clamp(28px,4vw,44px)} .tags--grid .tag{justify-self:stretch;width:auto;max-width:100%;min-width:0;justify-content:flex-start;align-items:center;min-height:52px;padding:12px 18px;text-align:left;line-height:1.3} @media (min-width:520px){.tags--grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .pots{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .pot{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 10px;border-radius:var(--r-pill); background:var(--violet-deep);color:#fff;font-weight:700;font-size:var(--fs-caption)} .pot__d{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)} .pot__d--1{background:var(--clay-coral)} .pot__d--2{background:var(--blush)} .pot__d--3{background:var(--ink-2)} .pot__d--4{background:var(--shelf-front)} /* ── AVATAR ───────────────────────────────────────────────────────── */ .avatar__grid{display:grid;gap:var(--sp-6)} /* mobile reads text -> image -> phones; art with no context came first before */ @media (max-width:1023px){.avatar__text{order:1}.avatar__media{order:2}} .avatar__text{display:grid;gap:var(--sp-4);align-content:start} .avatar__media{position:relative} .panel{border-radius:var(--r-panel);overflow:hidden;background:var(--wall-sky)} /* mobile shows the whole 3:2 frame (all five animals); desktop crops to 16/9 because the phone frames cover the lower-right corner there */ .panel__img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 64%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} .avatar__phones{display:flex;justify-content:center;gap:14px;margin-top:-34px} .phone--back{--phone-h:220px;transform:rotate(4deg)} .phone--front{--phone-h:240px;transform:rotate(-5deg)} /* spec: «front only under 400px». The front frame is the platformer — the section's only visual proof that the child's avatar becomes the hero */ @media (max-width:399px){.avatar__phones .phone--back{display:none} .avatar__phones{justify-content:center} .phone--front{--phone-h:250px;transform:rotate(-4deg);margin-left:0}} @media (min-width:1024px){ .avatar__grid{grid-template-columns:repeat(12,1fr);gap:var(--sp-7);align-items:start} .avatar__media{grid-column:1 / 7} .avatar__text{grid-column:7 / 13} .panel__img{aspect-ratio:4/3;object-position:50% 58%} /* flush with the media column: any further right and the phone frames clipped the first characters of every line in the body copy next to them */ .avatar__phones{position:absolute;right:-2%;bottom:-134px;margin:0;justify-content:flex-end} .phone--back{--phone-h:262px;transform:rotate(2deg)} .phone--front{--phone-h:292px;margin-left:-26px;transform:rotate(-6deg);z-index:2} /* a plank, not a blurred sky ellipse: the frames have to meet something */ .avatar__phones::after{left:-6%;right:-6%;bottom:-2px;height:var(--shelf-h);border-radius:2px 2px 5px 5px;filter:none;z-index:0; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 6px 12px rgba(56,189,248,.24)} } /* ── GAMES ────────────────────────────────────────────────────────── */ .toybox{position:relative;margin-block:clamp(16px,2vw,26px) clamp(20px,3vw,36px)} /* the toys occupy y 33–90% of the 3:2 frame; 1536/800 at 54% keeps 13.5–88.5%, so the chest lid has headroom and no toy is sliced. The band is capped at 1120px so the spread reads as a composition instead of a wide strip with the toys off to one side. */ .toybox{padding-bottom:calc(var(--shelf-h) + 8px)} .toybox picture{display:block;width:min(100vw,1120px);max-width:none;margin-inline:auto;background:var(--wall-white)} .toybox::after{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:0;height:var(--shelf-h); background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 6px 12px rgba(214,164,89,.3);pointer-events:none} .toybox__img{width:100%;height:auto;aspect-ratio:1536/800;object-fit:cover;object-position:50% 54%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 5%,#000 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 5%,#000 100%); -webkit-mask-composite:source-in;mask-composite:intersect} /* below 480 the band is dropped for weight; an orphan plank would stand on nothing */ @media (max-width:479px){.toybox{display:none}} .games{--gap:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap); row-gap:calc(var(--edge-block) + var(--shelf-h) + 26px)} .gcard{position:relative;background:#fff;border-radius:var(--r-block);padding:14px 14px 18px;margin-bottom:var(--edge-block); box-shadow:0 var(--edge-block) 0 var(--shelf-top),var(--sh-light); transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out)} /* the toys stand on the same furniture as everything else: adjacent planks butt together into one continuous board under each row of game cards */ .gcard::after{content:"";position:absolute;left:calc(var(--gap) / -2 - 1px);right:calc(var(--gap) / -2 - 1px); top:calc(100% + var(--edge-block));height:var(--shelf-h);pointer-events:none; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 6px 12px rgba(214,164,89,.3)} /* same overlapping-sticker convention as .step__num and .lcard__tile: top-left, negative rotation, clear of the screen so it never covers the app's own UI */ .gcard__ic{position:absolute;left:-8px;top:-8px;z-index:3;transform:rotate(-8deg)} .gcard .block__t{margin-top:14px} @media (hover:hover) and (pointer:fine){ .gcard:hover{transform:translateY(-8px);box-shadow:0 var(--edge-block-lift) 0 var(--shelf-top),var(--sh-light-lift)} } .mini{position:relative;border-radius:20px;background:var(--ink-2);padding:7px;box-shadow:0 6px 0 -1px rgba(30,41,59,.28)} .mini__screen{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--wall-sky)} .mini__screen img{width:100%;height:100%;object-fit:cover;object-position:50% var(--crop,32%)} /* whatever the crop lands on, the bottom edge reads as a fade, not a guillotine */ .mini__screen::after{content:"";position:absolute;inset:auto 0 0 0;height:26px;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92))} /* DEVIATION from sections[games].mobile_behavior (2-column compact grid + 3-line clamp): at 375px two columns give each card ~150px, and the clamp then truncated every description mid-word. One column with the frame on the left keeps the copy readable; the section is taller, which is the trade accepted here. */ @media (max-width:479px){ .games{grid-template-columns:1fr} .gcard{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;align-items:start;padding:14px 16px 18px} .gcard .mini{grid-column:1;grid-row:1 / span 2} .gcard .block__t{grid-column:2;grid-row:1;margin-top:2px} .gcard .block__b{grid-column:2;grid-row:2} .games > .gcard:last-child .mini{max-width:none;margin-inline:0} .games > .gcard:last-child .gcard__ic{left:-8px} } /* on the narrowest phones 104px of media leaves 130px of copy: shrink both. Declared after the 479px block so source order, not !important, carries the cascade. */ @media (max-width:359px){ .gcard{grid-template-columns:84px minmax(0,1fr);column-gap:10px;padding:12px 12px 16px} } @media (max-width:639px){ .games > .gcard:last-child{grid-column:1 / -1} .games > .gcard:last-child .mini{max-width:52%;margin-inline:auto} /* the 7th card centres its frame, so the sticker follows the frame, not the card */ .games > .gcard:last-child .gcard__ic{left:calc(24% - 6px)} } @media (min-width:640px){ .games{--gap:18px;grid-template-columns:repeat(6,1fr);column-gap:var(--gap)} .games > .gcard{grid-column:span 2} .games > .gcard:nth-child(7){grid-column:3 / span 2} } @media (min-width:1024px){ .games{--gap:20px;grid-template-columns:repeat(8,1fr);column-gap:var(--gap)} .games > .gcard{grid-column:span 2} .games > .gcard:nth-child(5){grid-column:2 / span 2} .games > .gcard:nth-child(6){grid-column:4 / span 2} .games > .gcard:nth-child(7){grid-column:6 / span 2} } /* ── WORLDS ───────────────────────────────────────────────────────── */ /* the eight islands live in the middle 55% of a 3:2 frame; the band keeps exactly that slice (ratio 1536/570) so no island base is ever sliced off by the bottom edge */ .islands{margin-block:clamp(16px,2vw,28px)} .islands picture{display:block;width:min(100%,1040px);margin-inline:auto;background:var(--wall-slate)} .islands__img{width:100%;height:auto;aspect-ratio:1536/570;object-fit:cover;object-position:50% 50%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} /* on a phone the 1536/570 strip made each island ~40px wide; crop to the main island */ /* let the strip bleed past the container so the islands scale up instead of floating as 30px specks in a mostly empty band */ @media (max-width:719px){ .islands{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)} .islands picture{width:170vw;max-width:none;margin-inline:-35vw} .islands__img{object-position:34% 50%} } .worlds__row{display:grid;gap:var(--sp-6);align-items:start} .worlds{position:relative;min-width:0} .worlds__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px; padding-bottom:var(--sp-4);scrollbar-width:none;-ms-overflow-style:none} .worlds__track::-webkit-scrollbar{display:none} /* a flex column so the progress plank lands on the same baseline in every card, however many lines the body runs to */ .world{flex:0 0 84%;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-block);padding:12px 14px 18px; margin-bottom:var(--edge-block);box-shadow:0 var(--edge-block) 0 var(--shelf-top),var(--sh-light); transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out)} .world__thumb{position:relative;border-radius:18px;overflow:hidden;background:var(--wall-slate);aspect-ratio:16/11} .world__thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 46%} .world__emoji{position:absolute;inset:0;display:none;place-items:center;font-family:var(--font-emoji);font-size:44px} .world__thumb.is-fallback img{display:none} .world__thumb.is-fallback .world__emoji{display:grid} .world .block__t{margin-top:12px} /* a progress plank, not a Bootstrap bar: flat fill with the same top/lip logic */ .prog{display:block;height:12px;margin-top:auto;padding-top:0;border-radius:6px;background:var(--shelf-top);overflow:hidden;box-shadow:inset 0 -3px 0 var(--shelf-lip)} .world .block__b{margin-bottom:14px} .prog i{display:block;height:100%;border-radius:6px 2px 2px 6px;background:var(--focus-light);transform:scaleX(var(--w));transform-origin:left} .carbtn{position:absolute;top:34%;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%; background:var(--shelf-top);color:var(--ink);cursor:pointer;box-shadow:0 5px 0 var(--shelf-lip),0 8px 16px rgba(56,189,248,.24);z-index:4} .carbtn .ic{width:22px;height:22px} .carbtn--prev{left:-22px} .carbtn--next{right:-22px} .carbtn:disabled,.carbtn[aria-disabled="true"]{opacity:.45;box-shadow:0 5px 0 var(--shelf-lip);cursor:default} /* under 480 the row is a native swipe carousel; the buttons only covered card art */ @media (max-width:479px){.carbtn{display:none}} .worlds__phone{display:flex;justify-content:center} /* «everything sits on something»: these three frames used to float on .phone's own untinted slate slab, the one grey shadow on the page */ .intro__phone,.letters__phone,.worlds__phone{position:relative;padding-bottom:calc(var(--shelf-h) + 8px)} .intro__phone::after,.letters__phone::after,.worlds__phone::after{content:"";position:absolute;left:50%;bottom:0; width:min(100%,calc(var(--phone-h) * .62 + 76px));transform:translateX(-50%);height:var(--shelf-h); border-radius:2px 2px 5px 5px;pointer-events:none; background:linear-gradient(180deg,var(--shelf-hi) 0 20%,var(--shelf-top) 20% 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%); box-shadow:0 8px 16px rgba(56,189,248,.22)} @media (hover:hover) and (pointer:fine){.world:hover{transform:translateY(-8px);box-shadow:0 var(--edge-block-lift) 0 var(--shelf-top),var(--sh-light-lift)}} @media (min-width:720px){.world{flex-basis:45%}} @media (min-width:1024px){ .worlds__row{grid-template-columns:minmax(0,1fr) auto;gap:60px} .world{flex-basis:calc((100% - 42px) / 3)} /* desktop cards are shorter, so 34% landed on the title — keep the arrows on the thumbnail */ .carbtn{top:22%} /* and out of the scroll band: over the island art they read as stray stickers */ .carbtn--prev{left:-30px} .carbtn--next{right:-30px} } @media (min-width:1200px){.world{flex-basis:calc((100% - 42px) / 4)} .carbtn--prev{left:-34px} .carbtn--next{right:-34px}} /* ── FOR PARENTS ──────────────────────────────────────────────────── */ .letterbox{position:relative;background:#fff;border-radius:var(--r-panel);padding:clamp(24px,4vw,44px);max-width:980px;margin-inline:auto; box-shadow:0 6px 0 var(--shelf-top),0 18px 40px rgba(214,164,89,.3);border:1px solid rgba(214,164,89,.35)} .letterbox .eyebrow{margin-top:6px} .letterbox .h2{margin-top:14px} .letterbox__body{margin-top:16px;font-weight:600;font-size:clamp(1.0625rem,1rem + .5vw,1.25rem);line-height:1.55;color:var(--ink);max-width:50ch} /* an initial, not a separate tile: the word «Ми» must stay one word in the text run */ .letterbox__body::first-letter{float:left;font-family:var(--font-display);font-weight:900;font-size:2.9em;line-height:.84; margin:.03em .1em 0 0;color:var(--glyph-coral);text-shadow:var(--extrude-coral)} .letterbox__owl{position:relative;float:right;width:130px;margin:0 0 12px 18px} /* the owl is generated on the cream mat; on the white card that ground read as a cut halo, so it gets a cream disc of its own with an ochre contact shadow to stand on */ .letterbox__owl::before{content:"";position:absolute;left:2%;right:2%;top:4%;bottom:4%;border-radius:50%; background:var(--mat-cream);box-shadow:0 10px 20px rgba(214,164,89,.42);z-index:0} .letterbox__owl > picture,.letterbox__owl .owlbub{position:relative;z-index:1} /* under 900 the float ate half the column and the bubble sat on the eyebrow chip */ @media (max-width:899px){.letterbox__owl{float:none;width:120px;margin:0 auto 6px} .letterbox .eyebrow,.letterbox .h2{clear:both} .owlbub{left:auto;right:-14px}} /* a farthest-corner gradient is still ~80% opaque at the straight edges, so the asset's cream ground printed as a hard rectangle on the white card */ .owl{width:100%;height:auto;border-radius:24px; -webkit-mask-image:radial-gradient(closest-side circle at 50% 52%,#000 48%,transparent 82%); mask-image:radial-gradient(closest-side circle at 50% 52%,#000 48%,transparent 82%)} .owlbub{position:absolute;left:-24px;top:0;background:#fff;color:var(--ink-2);font-weight:800;font-size:13px; padding:9px 14px;border-radius:16px;box-shadow:0 4px 0 var(--shelf-lip),0 10px 18px rgba(214,164,89,.35);white-space:nowrap} .owlbub::after{content:"";position:absolute;left:20px;bottom:-8px;width:16px;height:14px;background:#fff; border-radius:0 0 10px 10px;box-shadow:0 3px 0 var(--shelf-lip)} /* the asset is generated on the cream mat, so most of it has to sit on the cream wall where it matches, not inside the white card */ @media (min-width:900px){.letterbox__owl{position:absolute;float:none;right:-26px;top:-46px;width:220px;margin:0} .owlbub{left:-34px;font-size:15px} /* only the two lines the owl actually overlaps reserve its gutter; the paragraph starts below it and runs to its own measure */ .letterbox .eyebrow,.letterbox .h2{padding-right:210px} .letterbox__body{max-width:62ch}} .trust{display:grid;gap:12px;max-width:1100px;margin:clamp(28px,4vw,44px) auto 0} .trust li{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:var(--fs-small);line-height:1.45;color:var(--ink)} .blocks--2{max-width:1100px;margin:clamp(28px,4vw,44px) auto 0} /* ── FAQ ──────────────────────────────────────────────────────────── */ .faq{display:grid;gap:12px;max-width:760px;margin-inline:auto} .qa{background:#fff;border-radius:20px;box-shadow:0 6px 0 var(--shelf-top),0 10px 20px rgba(214,164,89,.24);margin-bottom:6px} .qa > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 16px; cursor:pointer;list-style:none;border-radius:20px;transition:transform 160ms var(--ease-out)} .qa > summary::-webkit-details-marker{display:none} .qa__q{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.015em;color:var(--ink-2);padding-top:.05em} .plus{position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:12px;background-color:var(--shelf-top); background-image:url("/assets/art/tile-blank-terracotta-256.webp"); background-image:image-set(url("/assets/art/tile-blank-terracotta-256.avif") type("image/avif"),url("/assets/art/tile-blank-terracotta-256.webp") type("image/webp")); background-size:104% 104%;background-position:center;background-repeat:no-repeat; box-shadow:0 4px 0 var(--shelf-lip)} .plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--glyph-coral);border-radius:99px;transform:translate(-50%,-50%)} .plus::before{width:16px;height:4px} .plus::after{width:4px;height:16px} .plus::before,.plus::after{transition:transform 300ms var(--ease-back)} .qa[open] .plus::before,.qa[open] .plus::after{transform:translate(-50%,-50%) rotate(45deg)} /* the JS close path keeps [open] for the whole 260ms slide; is-collapsed drives both */ .qa.is-collapsed .plus::before,.qa.is-collapsed .plus::after{transform:translate(-50%,-50%)} .qa__wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows 260ms var(--ease-out)} .qa.is-collapsed .qa__wrap{grid-template-rows:0fr} .qa__a{overflow:hidden;background:#fff;margin-inline:16px;border-top:4px solid var(--shelf-front)} .qa__a p{font-weight:600;font-size:16px;line-height:1.65;color:var(--ink-2);padding-block:14px 18px} @media (hover:hover) and (pointer:fine){.qa > summary:hover{transform:translateY(-2px)}} /* ── FINAL CTA ────────────────────────────────────────────────────── */ /* The finale art is a band at the top of the wall, fading into the flat violet so the headline and badges always sit on clean colour (white on #9029d7 stays ≥6:1). The cube and its glowing А therefore read as the shelf the copy stands on, never behind it. */ .sec--final{overflow:hidden;isolation:isolate; --final-art-w:min(94vw,420px);--final-art-h:calc(var(--final-art-w) / 1.5); padding-top:calc(var(--final-art-h) * .93 + var(--sp-4))} /* the art box matches the image's own 3:2 ratio, so nothing is cropped and its flat #9029d7 edges meet the wall exactly; the mask only softens the last few percent */ /* the finale bookends the hero: the same spot light, mirrored to the top right */ /* z-index 1 puts the wash ABOVE .final__art: at 0 the art box's own violet ground punched a visible rectangle out of the spot light */ .sec--final::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(60vw 60vw at 82% 12%,rgba(171,89,230,.34),transparent 70%)} .final__art{position:absolute;left:50%;top:0;transform:translateX(-50%); width:var(--final-art-w);height:var(--final-art-h);z-index:0;pointer-events:none;background:var(--wall-violet)} /* The source is flat #9129d7 at all four corners, so nothing can seam vertically and the fade only has to soften the last few percent under the cube's contact shadow. The old 46%→76% ramp wiped the cube itself and left a flat purple slab. */ .final__img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform:scale(1.02);transform-origin:50% 50%; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} .final__glow{position:absolute;left:50%;top:34%;width:min(70vw,340px);aspect-ratio:1; margin-left:calc(min(70vw,340px) / -2);margin-top:calc(min(70vw,340px) / -2); background:radial-gradient(circle,rgba(168,97,221,.85),transparent 66%);opacity:.55;pointer-events:none} .final__hit{position:absolute;left:50%;top:6%;width:calc(var(--final-art-w) * .32);height:calc(var(--final-art-h) * .5); transform:translateX(-50%);z-index:2;background:transparent;border:0;border-radius:24px;cursor:pointer} .final__hit.is-playing{box-shadow:0 0 0 4px var(--sparkle-gold)} .final__in{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-4);max-width:720px} .final__body{font-weight:600;font-size:var(--fs-body);line-height:1.5;color:rgba(255,255,255,.94);max-width:42ch} .plank--final{margin-top:var(--sp-3)} .plank--final .badges{align-items:flex-end;justify-content:center} .plank__icon{width:64px;height:64px;border-radius:18px;flex:0 0 auto; outline:4px solid var(--violet-deep);outline-offset:-4px; box-shadow:0 4px 0 var(--violet-deep),0 10px 18px rgba(107,25,173,.4)} .plank--final > .plank__icon{display:none} .finalchips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:var(--sp-2)} @media (min-width:768px){.sec--final{--final-art-w:min(72vw,660px)}} /* the art grows with the wall and the copy rides up into its lower fade, so the finale reads as one composition instead of a 660px plate in a 1440px field of flat violet */ @media (min-width:1024px){ .sec--final{--final-art-w:min(80vw,880px);padding-top:calc(var(--final-art-h) * .90 + var(--sp-5))} .final__glow{top:30%} } @media (min-width:1440px){.sec--final{--final-art-w:min(74vw,1060px)}} @media (min-width:1600px){.sec--final{--final-art-w:min(88vw,1440px)}.final__in{max-width:min(880px,60vw)}} @media (min-width:1024px){ .sec--final{padding-bottom:var(--section-y)} .plank--final{display:flex;align-items:flex-end;gap:16px} .plank--final > .plank__icon{display:block;width:72px;height:72px} } /* ── FOOTER ───────────────────────────────────────────────────────── */ .ftr{background:var(--footer);color:var(--on-footer);border-top:5px solid var(--shelf-front); padding-block:clamp(40px,5vw,64px) calc(clamp(28px,4vw,44px) + env(safe-area-inset-bottom))} .ftr__grid{display:grid;gap:32px;justify-items:center;text-align:center} .ftr__brand{display:grid;justify-items:center;gap:8px} .ftr__logo{width:48px;height:48px;border-radius:14px;box-shadow:0 3px 0 var(--violet-deep)} .ftr__mark{font-weight:900;font-size:22px;color:#fff} .ftr__tag{font-weight:600;font-size:var(--fs-small);color:var(--on-violet)} .ftr__nav{display:flex;flex-direction:column;align-items:center;row-gap:8px} .ftr__nav a{position:relative;display:inline-flex;align-items:center;min-height:48px;font-weight:700;font-size:var(--fs-small);color:#fff;text-decoration:none} .ftr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:var(--sparkle-gold);transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-out)} .ftr__nav a:hover::after,.ftr__nav a:focus-visible::after{transform:scaleX(1)} .plank--ftr::after{background:linear-gradient(180deg,var(--shelf-top) 0 34%,var(--shelf-front) 34% 80%,var(--shelf-lip) 80% 100%);box-shadow:0 8px 16px rgba(0,0,0,.4)} /* the ten tiles must stay on one line at 320px, so the gap shrinks with the viewport */ .ftr__divider{display:flex;justify-content:center;gap:clamp(3px,1.2vw,8px);margin-block:clamp(28px,4vw,40px);opacity:.85;flex-wrap:nowrap} .tile--xs{flex:0 0 auto;width:clamp(24px,7.4vw,36px);height:clamp(24px,7.4vw,36px);aspect-ratio:auto;box-shadow:0 3px 0 var(--shelf-lip)} .tile--xs .tile__g{font-size:clamp(13px,4.6vw,19px)} .ftr__legal{font-weight:500;font-size:var(--fs-legal);line-height:1.6;color:var(--on-footer);text-align:center;max-width:78ch;margin-inline:auto} @media (min-width:900px){ .ftr__grid{grid-template-columns:1.4fr 1fr 1.1fr;align-items:end;justify-items:start;text-align:left;gap:32px} .ftr__brand{justify-items:start} .ftr__nav{align-items:flex-start} .plank--ftr{justify-self:end} } /* ── phone frame ──────────────────────────────────────────────────── */ .phone{position:relative;flex:0 0 auto;height:var(--phone-h);padding:var(--bezel);border-radius:var(--r-phone);background:var(--ink-2); width:calc((var(--phone-h) - 2 * var(--bezel)) * 1170 / 2532 + 2 * var(--bezel)); box-shadow:0 10px 0 -3px rgba(30,41,59,.4),0 18px 34px rgba(56,189,248,.22); transition:transform 220ms var(--ease-out)} .wall-violet .phone,.sec--violet-light .phone,.sec--final .phone{box-shadow:0 10px 0 -3px rgba(30,41,59,.5),0 18px 34px rgba(107,25,173,.45)} .phone__screen{position:relative;height:100%;border-radius:calc(var(--r-phone) - var(--bezel) + 2px);overflow:hidden;background:var(--wall-sky)} .phone__screen img{width:100%;height:100%;object-fit:cover;object-position:50% 0} .phone::after{content:"";position:absolute;top:calc(var(--bezel) + 5px);left:50%;transform:translateX(-50%); width:24%;height:6px;border-radius:99px;background:var(--ink-2);z-index:2} @media (hover:hover) and (pointer:fine){ .intro__phone .phone:hover,.step .phone:hover,.letters__phone .phone:hover,.worlds__phone .phone:hover{transform:translateY(-4px) rotate(-3deg)} } /* ── speech bubble + sparkles ─────────────────────────────────────── */ /* purely decorative: the announcement lives in the always-present #letter-live region. Hidden with visibility, never display:none, so offsetWidth can be measured. */ .bubble{position:fixed;left:0;top:0;z-index:var(--z-bubble);transform:translate(-50%,-100%);background:#fff;color:var(--ink-2); font-weight:800;font-size:15px;padding:10px 16px;border-radius:16px;box-shadow:0 10px 24px rgba(15,23,42,.28); pointer-events:none;white-space:nowrap;visibility:hidden;opacity:0} .bubble.is-on{visibility:visible;opacity:1;animation:bubble-in 240ms var(--ease-back) 1} .bubble::after{content:"";position:absolute;left:calc(50% + var(--tail,0px));bottom:-6px;width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:2px} .bubble--below{transform:translate(-50%,0)} .bubble--below::after{bottom:auto;top:-6px} .bubble--below.is-on{animation:bubble-in-below 240ms var(--ease-back) 1} .burst{position:fixed;z-index:var(--z-bubble);pointer-events:none;width:0;height:0} .burst i{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px; background:var(--sparkle-gold);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); animation:puff 620ms linear forwards} .burst i:nth-child(2n){background:var(--sparkle-cyan)} .burst i:nth-child(3n){background:var(--sparkle-pale)} /* ── pebble rail ──────────────────────────────────────────────────── */ .rail{display:none} @media (min-width:1400px){ /* absolute inside
, so the path is genuinely drawn down the page as you scroll instead of hovering at a fixed spot on every wall in turn */ .rail{display:block;position:absolute;left:calc((100vw - var(--container)) / 2 - 90px);top:0;width:92px;height:100%; z-index:var(--z-path);pointer-events:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))} .rail path{fill:none;stroke-width:8;stroke-linecap:round} .rail__base{stroke:rgba(214,164,89,.34);stroke-dasharray:2 26} .rail__ink{stroke:rgba(214,164,89,.85);stroke-dasharray:2 26; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--p,0) * 100%),transparent calc(var(--p,0) * 100%)); mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--p,0) * 100%),transparent calc(var(--p,0) * 100%))} } /* ── reveals ──────────────────────────────────────────────────────── */ /* The entrance drives the individual `translate` / `rotate` / `scale` properties, not `transform`. The reveal end-state used to own `transform` on the very elements the hover rules style (17 blocks, 7 game cards, 3 letter cards), so every revealed card grew a thicker edge on hover and never actually lifted. */ html.js .reveal{opacity:0;translate:0 24px; transition:opacity var(--d-reveal) var(--ease-out),translate var(--d-reveal) var(--ease-out), rotate var(--d-reveal) var(--ease-out),scale var(--d-reveal) var(--ease-out); transition-delay:calc(var(--i,0) * var(--stagger))} html.js .reveal.is-in{opacity:1;translate:none} html.js .reveal--drop{translate:0 -26px} html.js .reveal--drop.is-in{animation:drop-settle var(--d-drop) var(--ease-land) 1} html.js .reveal--fan{translate:0 20px;rotate:var(--rot,0deg);scale:.96} html.js .reveal--fan.is-in{translate:none;rotate:var(--rot-rest,0deg);scale:1} /* ±2° was imperceptible: the three cards read as a centred row, not as three objects laid down on a shelf */ .cards3 .lcard:nth-child(1){--rot:-7deg;--rot-rest:-4deg} .cards3 .lcard:nth-child(2){--rot:0deg;--rot-rest:0deg} .cards3 .lcard:nth-child(3){--rot:7deg;--rot-rest:4deg} .tile[data-audio].tumble{animation:tumble-in var(--d-tumble) var(--ease-land) backwards;animation-delay:calc(var(--i,0) * var(--stagger-tile))} /* hero load choreography */ .hero__chip,.hero h1,.hero__sub,.hero__plank,.hero__note,.hero__trust,.hero__hint,.hero__art{opacity:1} html.js .hero:not(.is-loaded) .hero__chip, html.js .hero:not(.is-loaded) .hero__sub, html.js .hero:not(.is-loaded) .hero__plank, html.js .hero:not(.is-loaded) .hero__note, html.js .hero:not(.is-loaded) .hero__trust, html.js .hero:not(.is-loaded) .hero__hint, html.js .hero:not(.is-loaded) .hero__headline{opacity:0} .hero.is-loaded .hero__chip{animation:drop-in 300ms var(--ease-land) 250ms backwards} .hero.is-loaded .hero__headline{animation:rise 400ms var(--ease-out) 450ms backwards} .hero.is-loaded .hero__sub{animation:rise 400ms var(--ease-out) 500ms backwards} .hero.is-loaded .hero__plank{animation:rise-16 400ms var(--ease-out) 650ms backwards} .hero.is-loaded .hero__note{animation:rise 400ms var(--ease-out) 700ms backwards} .hero.is-loaded .hero__trust{animation:rise 400ms var(--ease-out) 760ms backwards} .hero.is-loaded .hero__hint{animation:rise 400ms var(--ease-out) 820ms backwards} .hero.is-loaded .hero__art{animation:art-in 380ms var(--ease-out) 300ms backwards} .hero.is-loaded .hero__phone{animation:phone-in 480ms var(--ease-back) 700ms backwards} .wordmark span.wm{display:inline-block;animation:pop 320ms var(--ease-back) backwards;animation-delay:calc(var(--i) * 45ms)} /* the four clay tiles were the only objects in the hero with no entrance at all — they were painted in place with the key art, before the badges had even faded in */ html.js .hero:not(.is-loaded) .hero__tile{opacity:0} .hero.is-loaded .hero__tile{animation:tumble-in var(--d-tumble) var(--ease-land) backwards;animation-delay:calc(300ms + var(--i,0) * 200ms)} .hero__tile--1{--i:0}.hero__tile--2{--i:1}.hero__tile--3{--i:2}.hero__tile--4{--i:3} /* the entrance rule would otherwise own animation-name for the life of the page */ .hero.is-loaded .hero__tile.is-pop{animation:pop-squash var(--d-pop) var(--ease-back) 1} html.js .hero:not(.is-loaded) .hero__atile{opacity:0} .hero.is-loaded .hero__atile{animation:atile-in 520ms var(--ease-land) 480ms backwards} /* the entrance rule would otherwise own animation-name for the life of the page */ .hero.is-loaded .hero__atile.is-pop{animation:pop-squash var(--d-pop) var(--ease-back) 1} @keyframes atile-in{0%{opacity:0;transform:translateY(-120%) rotate(-28deg)}70%{opacity:1;transform:translateY(0) rotate(-8deg)}82%{transform:rotate(-8deg) scale(1.06,.92)}100%{opacity:1;transform:rotate(-8deg)}} .hdr{animation:hdr-in 300ms var(--ease-out) both} .hero.is-loaded .hint__arrow{animation:bob 700ms var(--ease-out) 1s 3} @keyframes hdr-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @keyframes pop{0%{opacity:0;transform:scale(.4) rotate(-6deg)}60%{opacity:1;transform:scale(1.08) rotate(0)}100%{opacity:1;transform:none}} @keyframes drop-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes rise-16{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* transform-only: an image whose first paint is opacity:0 is never an LCP candidate */ @keyframes art-in{from{transform:scale(.96)}to{transform:none}} @keyframes phone-in{from{transform:translateX(40px) rotate(-10deg)}to{transform:rotate(-6deg)}} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes wobble{0%{transform:translateY(-4px) rotate(0)}25%{transform:translateY(-4px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}75%{transform:translateY(-4px) rotate(-2deg)}100%{transform:translateY(-4px) rotate(0)}} @keyframes pop-squash{0%{transform:scale(.92)}45%{transform:scale(1.06,.94)}100%{transform:none}} @keyframes tumble-in{0%{opacity:0;transform:translateY(-140%) rotate(var(--r,-14deg))}70%{opacity:1;transform:translateY(0) rotate(0)}82%{transform:scale(1.06,.92)}100%{opacity:1;transform:none}} @keyframes drop-settle{0%{transform:translateY(-26px)}70%{transform:translateY(0)}84%{transform:translateY(3px) scaleY(.985)}100%{transform:none}} @keyframes bubble-in{from{opacity:0;transform:translate(-50%,-90%) scale(.8)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}} @keyframes bubble-in-below{from{opacity:0;transform:translate(-50%,10%) scale(.8)}to{opacity:1;transform:translate(-50%,0) scale(1)}} @keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}12%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(120deg)}} @keyframes glow-pulse{0%,100%{opacity:.5}50%{opacity:1}} @keyframes wave-pulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.6)}} .final__glow.is-in{animation:glow-pulse var(--d-glow) var(--ease-std) 2} .step.is-in .wave i{animation:wave-pulse 800ms var(--ease-std) 3} .step.is-in .wave i:nth-child(2){animation-delay:120ms} .step.is-in .wave i:nth-child(3){animation-delay:240ms} /* ── perf ─────────────────────────────────────────────────────────── */ /* content-visibility:auto is deliberately NOT used — see README.md, «Рішення та відступи». Weight is controlled with lazy sources instead; the page ships ~250 KB of images on mobile. */ /* ── prefers-reduced-transparency ─────────────────────────────────── */ @media (prefers-reduced-transparency:reduce){ .hdr.is-solid{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none} .pot{background:var(--violet-deep)} .hdr__burger{background:var(--shelf-top)} } /* ── prefers-reduced-motion ───────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important; animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important} html{scroll-behavior:auto} .reveal,.reveal--drop,.reveal--fan{opacity:1 !important;transform:none !important;translate:none !important;rotate:none !important;scale:none !important} .cards3 .lcard{transform:none !important} html.js .hero .hero__chip,html.js .hero .hero__sub,html.js .hero .hero__plank,html.js .hero .hero__note, html.js .hero .hero__trust,html.js .hero .hero__hint,html.js .hero .hero__headline,html.js .hero .hero__art, html.js .hero .hero__phone,html.js .hero .hero__atile,html.js .hero .hero__tile{opacity:1 !important} .hero__phone{transform:rotate(-6deg) !important} .hero__atile{transform:rotate(-8deg) !important} .ticker__track{animation:none !important;transform:none !important} .ticker__viewport{overflow-x:auto;scroll-snap-type:x proximity} .ticker__row:nth-child(2){display:none} .ticker__row .tile{scroll-snap-align:center} /* nothing is moving, so a pause control would be a dead toggle */ .ticker__toggle{display:none} .ticker__viewport{padding-top:16px} .prog i{transform:scaleX(var(--w)) !important} .burst{display:none} } /* ── print ────────────────────────────────────────────────────────── */ @media print{ .hdr,.drawer,.ticker,.rail,.carbtn,.bubble,.hero__sparks,.final__glow{display:none !important} .sec,.hero,.ftr{background:#fff !important;color:#000 !important;padding-block:16px} .plank::after,.shelf33 .tile::after,.step__stage::after,.ticker__band::after{display:none} .block,.gcard,.world,.qa,.letterbox{box-shadow:none;border:1px solid #ccc} .h2,.block__t,.qa__q,.wordmark,.lead,.hero__headline,.hero__sub,.final__body{color:#000 !important;text-shadow:none !important} .qa__wrap{grid-template-rows:1fr !important} .reveal,.reveal--drop,.reveal--fan{opacity:1 !important;transform:none !important;translate:none !important;rotate:none !important;scale:none !important} html.js .hero .hero__chip,html.js .hero .hero__sub,html.js .hero .hero__plank,html.js .hero .hero__note, html.js .hero .hero__trust,html.js .hero .hero__hint,html.js .hero .hero__headline,html.js .hero .hero__art, html.js .hero .hero__atile{opacity:1 !important} }