/* Mindria's colours, taken from the game (SceneTheme, Palette): the violet field, the gold of the stars, the lavender of the secondary text. */ :root{--gold:#fcc73d;--gold-soft:#ffd976;--ink:#fff7e6;--muted:#bab0e6;--lav:#a894ff; --panel:rgba(255,255,255,.055);--line:rgba(168,148,255,.30);--field-top:#211c66;--field-mid:#1c1757;--field-bottom:#171247; --deep:#120e3a;--contour:#1a0d45;color-scheme:dark} *{box-sizing:border-box}html,body{margin:0} /* Safari paints the strip under the status bar and the overscroll with the root's colour: without one it was black above the hero (iPhone, 18 October). */ html{background-color:var(--field-top);-webkit-text-size-adjust:100%;text-size-adjust:100%} /* The home's first row is the darkened decor, not the field. */ html:has(body.home){background-color:#1e1a4b} /* The page never scrolls sideways, whatever sticks out: Morgan saw it slide in Safari on the Mac (18 October 2026), which no width, language or engine reproduced here, from 320 to 2 560 points. clip, not hidden: it makes no scroll container. */ html,body{overflow-x:clip} body{font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;background-color:var(--field-mid); background:linear-gradient(180deg,var(--field-top),rgba(33,28,102,0) 140px), radial-gradient(1100px 560px at 50% -12%,rgba(168,148,255,.30),transparent 60%), linear-gradient(170deg,var(--field-top) 0%,var(--field-mid) 50%,var(--field-bottom) 100%)} /* The field scrolls with the page: fixed to the window, its halo was repainted at every frame of a scroll, which jerked (Morgan, 18 October). */ a{color:var(--gold-soft);text-decoration:none}a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px} img{max-width:100%} .inner{max-width:1120px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))} .doc{max-width:780px;margin:0 auto;padding:12px 16px 40px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* -- The bar -------------------------------------------------------------- */ header.top .inner{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:22px} body.home header.top{position:absolute;inset:0 0 auto 0;z-index:4} .brand{display:flex;align-items:center;gap:10px;color:inherit} .brand:hover{text-decoration:none} .brand .name{font-size:19px;font-weight:800;color:var(--gold);letter-spacing:.2px} /* On the home page the logo says the name just below: the bar keeps the icon, the name stays for screen readers. */ body.home .brand .name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .markicon{display:inline-block} /* The language menu: plain links, so every language is one tap and crawlable without the script. */ .langs{position:relative} .langs summary{list-style:none;cursor:pointer;background:rgba(10,6,40,.45);color:var(--ink);border:1px solid var(--line); border-radius:999px;padding:6px 32px 6px 14px;font-size:13px;white-space:nowrap; max-width:calc(100vw - 160px);overflow:hidden;text-overflow:ellipsis; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 12px center} .langs summary::-webkit-details-marker{display:none} .langs ul{position:absolute;z-index:5;inset-inline-end:0;top:calc(100% + 8px);margin:0;padding:8px;list-style:none; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;width:max-content;max-width:calc(100vw - 32px); background:#1d1860;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(6,3,28,.6)} .langs li{margin:0} .langs li a{display:block;padding:7px 12px;border-radius:10px;color:var(--ink);font-size:14px} .langs li a:hover{background:rgba(168,148,255,.14);text-decoration:none} .langs li a[aria-current]{color:var(--gold);font-weight:700} [dir="rtl"] .langs summary{padding:6px 14px 6px 32px;background-position:left 12px center} /* The offer of the visitor's own language, on the English pages only. */ .offer{display:flex;width:fit-content;align-items:center;gap:10px;max-width:100%;margin:22px 0 0;padding-block:6px; padding-inline:16px 6px;border:1px solid var(--line);border-radius:999px;background:rgba(20,14,70,.72);font-size:13.5px} .offer[hidden]{display:none} .offer a{font-weight:700} .offer button{flex:none;width:26px;height:26px;border-radius:999px;border:1px solid var(--line);background:transparent; color:var(--muted);font-size:15px;line-height:1;cursor:pointer} /* -- The game's name as a solid (LogoTitle): a lit face, white to lavender, a front wall in shade, a dark contour round both, a soft ground shadow. -- */ /* Its own layer (will-change): 25 shadows are the costliest text to draw, and they are drawn once, not again when Safari rebuilds the hero. */ .logo{position:relative;display:inline-block;margin:0;font-weight:900;line-height:1.05;letter-spacing:.01em; font-size:clamp(58px,10vw,112px);padding-bottom:.14em;will-change:transform} .logo .face{position:relative;z-index:1;color:#fffcff;background:linear-gradient(180deg,#fffcff 18%,#ccbdff 88%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* The copy under the face is pale: dark, it showed as a grey ring at the face's antialiased edges in Safari. The wall steps every .0075em, or WebKit draws seven visible bands. */ .logo .shade{position:absolute;inset:0;z-index:0;color:#e4dbff;pointer-events:none; text-shadow:0 -.018em 0 rgba(255,255,255,.9), 0 .0075em 0 #8a6eea,0 .015em 0 #8569e6,0 .0225em 0 #7f63df,0 .03em 0 #7a5fd9,0 .0375em 0 #7358d0,0 .045em 0 #6c52c8, 0 .0525em 0 #644bbd,0 .06em 0 #5d45b2,0 .0675em 0 #553ea7,0 .075em 0 #4e389c,0 .0825em 0 #483394,0 .09em 0 #432f8c, 0 .1em 0 #402d8c,0 .11em 0 #3d2b8c, .035em 0 0 var(--contour),-.035em 0 0 var(--contour),0 -.035em 0 var(--contour), .025em -.025em 0 var(--contour),-.025em -.025em 0 var(--contour), .035em .11em 0 var(--contour),-.035em .11em 0 var(--contour),0 .145em 0 var(--contour), .025em .135em 0 var(--contour),-.025em .135em 0 var(--contour), 0 .24em .16em rgba(5,0,20,.6)} .logo.small{font-size:clamp(42px,6vw,64px)} /* -- Sections ---------------------------------------------------------------- */ .band{padding:clamp(56px,7vw,84px) 0} .band.more{padding-top:clamp(40px,5vw,60px)} .band h2,.hero h1{margin:0} .band h2{color:var(--gold);font-size:clamp(26px,3.4vw,38px);font-weight:900;line-height:1.15} .intro{max-width:620px;margin:0 auto 40px;text-align:center} .intro p{color:var(--muted);font-size:17px;margin:.7em 0 0} .tag,.band h2,.soon,.card h3,.screen-strip figcaption,.shape-grid span{text-wrap:balance} .phrase{display:inline-block} .lede,.intro p,.card p,.sub,.faq p,.contact p,.panel p{text-wrap:pretty} /* Korean is written in words: they were cut mid-word. Japanese in Safari (no auto-phrase) at least never starts a line with a small kana. */ :lang(ko){word-break:keep-all;overflow-wrap:break-word} :lang(ja){line-break:strict} :is(:lang(ja),:lang(zh)) :is(.card p,.panel p,.faq p,.contact p,.sub){text-wrap:wrap} :lang(ja) :is(.lede,.intro p,.card p,.tag,.shape-grid span,.screen-strip figcaption){word-break:auto-phrase} /* Arabic letters read two sizes smaller than Latin ones at the same size: each size is its Latin one times 1.12 (as 1.12em of its parent, every one came out at 17.9 and the hierarchy flattened). */ html:lang(ar) .lede{font-size:clamp(18px,1.8vw,20.5px);line-height:1.85} html:lang(ar) .intro p{font-size:19px;line-height:1.85} html:lang(ar) .card h3{font-size:19.5px} html:lang(ar) .card p{font-size:16.8px;line-height:1.85} html:lang(ar) .faq p{font-size:16.2px;line-height:1.85} html:lang(ar) .panel{font-size:17.9px;line-height:1.85} html:lang(ar) .sub{font-size:15px} html:lang(ar) .note{font-size:14.5px} html:lang(ar) footer{font-size:14.5px} html:lang(ar) .chip{font-size:14px} html:lang(ar) .screen-strip figcaption{font-size:16.2px} html:lang(ar) :is(.shape-grid span,.ladder li){font-size:16px} html:lang(ar) .soon{font-size:clamp(14px,1.25vw,17px)} html:lang(ar) .tag{font-size:clamp(22px,2.7vw,30px)} html:lang(ar) .finale .tag{font-size:clamp(17px,2.1vw,30px)} /* Devanagari and Thai read a size smaller and denser than Latin at the same size, and tracking spreads their letters apart. */ html:is(:lang(hi),:lang(th)) .lede{font-size:clamp(17.5px,1.75vw,20px);line-height:1.75} html:is(:lang(hi),:lang(th)) .intro p{font-size:18.5px;line-height:1.75} html:is(:lang(hi),:lang(th)) .card p{font-size:16.5px;line-height:1.75} html:is(:lang(hi),:lang(th)) .faq p{font-size:16px} html:is(:lang(hi),:lang(th)) .panel{font-size:17.5px;line-height:1.8} html:is(:lang(hi),:lang(th)) .screen-strip figcaption{letter-spacing:0;font-size:14px} html:lang(ar) .doc h2{font-size:21px} /* The first screen: the campaign's scene, the copy, the phone at play. */ /* Clipped sideways only: on a phone the phone's shadow reaches below the hero, and a full clip cut it straight. */ .hero{position:relative;overflow:hidden;overflow:clip visible;min-height:min(900px,100vh);display:flex;align-items:center;padding:110px 0 70px} /* The decor covers its section as object-fit: cover would, but on a stage of the picture's own proportions, so the layers that move on it (fx.css, from the app's manifests) stay on the waterfalls they belong to at any window's size: --py places it as object-position's height did. */ .bg{position:absolute;inset:0;z-index:0;container-type:size;overflow:hidden} .stage{--ar:1.3335;--py:.3;position:absolute;aspect-ratio:var(--ar);width:max(100cqw,100cqh * var(--ar)); left:calc((100cqw - max(100cqw,100cqh * var(--ar))) / 2); top:calc((100cqh - max(100cqw,100cqh * var(--ar)) / var(--ar)) * var(--py))} .finale .stage{--py:1} .stage img{position:absolute;inset:0;width:100%;height:100%;display:block} .fx-tall{display:none} @media(max-width:700px){.stage{--ar:.4609}.fx-wide{display:none}.fx-tall{display:block}} /* Off screen nothing plays (Reduce Motion: fx.css). The three falls behind the hero's phone are not drawn on a wide screen: 36 layers no one sees. */ .still .fx *,.still .fx *::before{animation-play-state:paused} @media(min-width:861px){.cwf2,.cwf10,.cwf11{display:none}} /* The decors fade into the page by a mask rather than a colour: no single colour matches the page's gradient at every height (a line showed where the closing scene began). */ .hero .bg{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)} .finale .bg{-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 94%,transparent); mask-image:linear-gradient(180deg,transparent,#000 16%,#000 94%,transparent)} .hero .bg::after,.finale .bg::after{content:"";position:absolute;inset:0} .hero .bg::after{background:linear-gradient(180deg,rgba(18,14,58,.55) 0%,rgba(18,14,58,.15) 35%,rgba(18,14,58,.35) 100%), linear-gradient(90deg,rgba(18,14,58,.72) 0%,rgba(18,14,58,.2) 55%,rgba(18,14,58,0) 100%)} [dir="rtl"] .hero .bg::after{background:linear-gradient(180deg,rgba(18,14,58,.55) 0%,rgba(18,14,58,.15) 35%,rgba(18,14,58,.35) 100%), linear-gradient(270deg,rgba(18,14,58,.72) 0%,rgba(18,14,58,.2) 55%,rgba(18,14,58,0) 100%)} .hero .inner{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center} .tag{color:var(--gold);font-size:clamp(20px,2.4vw,27px);font-weight:900;margin:.25em 0 .6em;line-height:1.25; text-shadow:0 2px 0 var(--contour),0 6px 18px rgba(5,0,20,.5)} .lede{font-size:clamp(16px,1.6vw,18.5px);max-width:540px;margin:0 0 1.6em;text-shadow:0 1px 10px rgba(5,0,20,.6)} /* A soft shade under the copy on wide windows, where the decor grows and the castle stands behind the lede's last lines (Morgan, 19 October 2026: « est assez lisible avec le background derrière ? »; lowest 5 % of the pixels under the glyphs at 5.7:1 at 1920). */ @media(min-width:861px){ .hero-copy{position:relative;isolation:isolate} .hero-copy::before{content:"";position:absolute;inset:-48px -72px;z-index:-1;pointer-events:none; background:radial-gradient(closest-side,rgba(18,14,58,.5),rgba(18,14,58,.28) 60%,rgba(18,14,58,0))} } .hero-phone{display:flex;justify-content:center} @media(max-width:860px){ .hero{min-height:0;padding-top:96px;padding-bottom:36px;text-align:center} .hero-copy{position:relative;isolation:isolate} .offer{margin-inline:auto} .lede{text-wrap:balance} .hero-copy::before{content:"";position:absolute;inset:-24px -16px;z-index:-1; background:radial-gradient(closest-side,rgba(18,14,58,.6),transparent)} .hero .inner{grid-template-columns:1fr;gap:36px} .hero .bg::after,[dir="rtl"] .hero .bg::after{background:linear-gradient(180deg,rgba(18,14,58,.62) 0%,rgba(18,14,58,.4) 45%,rgba(18,14,58,.5) 100%)} .lede{margin-inline:auto} /* On a phone the first screen showed the logo and seven lines of text, the game only after a scroll: the phone comes right under the tag. After the 860 block, which it overrides. */ @media(max-width:560px){ .hero .inner{display:flex;flex-direction:column;align-items:center;gap:0} .hero-copy{display:contents} .hero-copy::before{content:none} .logo{order:1}.tag{order:2} .offer{order:6;margin:20px auto 0} .hero .tag{margin:.2em 0 0} .hero-phone{order:3;margin:24px 0 28px} .lede{order:4;font-size:15.5px;line-height:1.55;text-shadow:0 1px 12px rgba(5,0,20,.85),0 0 2px rgba(5,0,20,.6)} .hero .lede{margin:0 auto 16px} html:lang(ar) .lede{font-size:17.4px} html:is(:lang(hi),:lang(th)) .lede{font-size:17px} .hero .badges,.hero .soon{order:5} .phone{width:min(250px,64vw)} } } /* A phone, the game in it. The screen has the loop's own proportions and the frame wraps it: a frame of the loop's proportions left a screen narrower than the loop, and cover cut its sides, the app's keys against the edge (Morgan, 19 October 2026). Corners as an iPhone screen's, in proportion: 55 points on 393. */ .phone{position:relative;width:min(300px,70vw);padding:3.2%;border-radius:17%/7.8%; background:linear-gradient(160deg,#4a41a8,#1d1858 60%); box-shadow:inset 0 0 0 1.5px rgba(196,182,255,.55),0 34px 70px rgba(6,3,28,.65),0 0 90px rgba(168,148,255,.28)} /* On a laptop the phone fits the window's height (its consoles fell below the fold at 1366 x 657): 240 to 300 points, at the loop's proportions. */ @media(min-width:861px){.phone{width:clamp(240px,calc((100svh - 200px) * .4613),300px)}} .phone video,.phone img{width:100%;height:auto;aspect-ratio:750/1626;border-radius:14%/6.46%;display:block;background:var(--field-mid)} .badges{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px} .hero .badges,.finale .badges{justify-content:flex-start} @media(max-width:860px){.hero .badges{justify-content:center}} .finale .badges{justify-content:center} .badge{display:inline-block;line-height:0} .badge img{height:54px;width:auto;display:block} .badge:hover{text-decoration:none} /* Google Play: the clear space is inside the PNG, so the image is taller for the same 54-point visible badge as the App Store's. */ .badge.play img{height:70px} .badge.play.legacy img{height:80px} @media(max-width:420px){.badge img{height:46px}.badge.play img{height:60px}.badge.play.legacy img{height:68px}} /* A status, not a key: a capsule with a gold rim read as a button that did nothing. A line of text behind a gold dot. */ .soon{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:15px;font-weight:800} .soon::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(252,199,61,.18)} @media(max-width:560px){.soon{font-size:13.5px}} .badges+.soon{display:block;border:0;background:none;box-shadow:none;padding:0;margin-top:12px;color:var(--muted);font-size:13.5px;font-weight:400} /* The ten pieces, the studio's renders at one shared scale, swaying a little each in its own time. */ /* Two rows of five on a wide screen (the ten widths add up to about 1 840 points, the gaps to 224). */ .piece-row{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:20px 28px;max-width:1100px} /* Each picture carries its own shadow (render_shapes.py): a CSS filter cost a pass at every frame of the sway, and Safari once cut it straight under each piece (Morgan, 18 October 2026). The room left around it for the shadow is taken back here, so the row is laid out on the pieces. */ .piece-row img{display:block;height:auto;margin:-45px -27px;max-width:none} .piece-row.still li{animation-play-state:paused} /* Two columns below an iPad in portrait: at 600 points the row of five ran its pieces' shadow margins past the screen's edges. */ @media(max-width:767px){.piece-row{display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:12px 8px}.piece-row img{zoom:.75}} @media(max-width:560px){.piece-row img{zoom:.6}} @media(max-width:360px){.piece-row img{zoom:.5}} @media(min-width:768px) and (max-width:1080px){.piece-row{column-gap:20px}.piece-row img{zoom:.7}} @media(prefers-reduced-motion:no-preference){ .piece-row li{animation:sway 6s ease-in-out infinite} .piece-row li:nth-child(2n){animation-duration:7s;animation-delay:-2s} .piece-row li:nth-child(3n){animation-duration:6.5s;animation-delay:-4s} .piece-row li:nth-child(5n){animation-duration:7.5s;animation-delay:-1s} } @keyframes sway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-1.5deg)}} /* The silhouettes, each solved by its first level. */ .shapes{background:radial-gradient(900px 460px at 50% 42%,rgba(168,148,255,.13),transparent 70%)} .shape-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px} /* No box: fifteen cards were the most template-looking grid of the page; the silhouettes float on the field as the pieces do. */ .shape-grid li{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 4px 0} /* Every silhouette at the scale of its triangles (they all have 72 cells): build.py gives each picture its share of the widest silhouette. */ .shape-grid .art{display:flex;align-items:flex-end;justify-content:center;width:100%;max-width:150px;aspect-ratio:1} .shape-grid img{display:block;height:auto;max-width:100%;filter:drop-shadow(0 10px 12px rgba(6,3,28,.45))} .shape-grid img.fit-50{width:50%}.shape-grid img.fit-55{width:55%}.shape-grid img.fit-60{width:60%} .shape-grid img.fit-65{width:65%}.shape-grid img.fit-70{width:70%}.shape-grid img.fit-75{width:75%} .shape-grid img.fit-80{width:80%}.shape-grid img.fit-85{width:85%}.shape-grid img.fit-90{width:90%} .shape-grid img.fit-95{width:95%}.shape-grid img.fit-100{width:100%} /* Names whole: at each width below every name of the twenty languages fits its tile (measured); a word is only broken as a last resort. */ .shape-grid span{font-weight:700;font-size:15px;color:var(--muted);text-align:center;max-width:100%;overflow-wrap:anywhere} /* Safari ignores auto-phrase and broke « ロットワ/イラー ». */ :is(:lang(ja),:lang(ko),:lang(zh)) .shape-grid span{word-break:keep-all} @media(min-width:900px){.shape-grid .art{max-width:180px}} /* Five across down to an iPad in portrait, three on a phone, two under 360 points with the fifteenth centred. */ @media(max-width:799px){.shape-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:520px){.shape-grid{gap:14px 8px}.shape-grid li{padding:4px 2px 0} .shape-grid span{font-size:12.5px;line-height:1.2}html:is(:lang(ar),:lang(hi),:lang(th)) .shape-grid span{font-size:14px}} @media(max-width:360px){.shape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shape-grid span{font-size:14px} .shape-grid li:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 4px)}} /* The five tiers, a staircase that climbs to gold: each step's name on its crest under the app's gauge of five triangles, the steps on one floor (a lip at their foot made them read as buttons). */ .ladder{position:relative;list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,1fr); gap:12px;align-items:end;max-width:880px} .ladder::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(196,180,255,.35) 18%,rgba(196,180,255,.35) 82%,transparent)} .ladder li{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start; gap:9px;padding:16px 8px;border-radius:18px 18px 6px 6px;font-weight:900;font-size:15px;line-height:1.2;text-align:center; color:var(--ink);border:1px solid var(--line);border-bottom:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px rgba(8,4,30,.38)} .ladder li::before{content:"";position:absolute;inset:0 0 auto;height:46px;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0))} .ladder li:nth-child(1){height:84px;background:linear-gradient(180deg,#5b4cc4,#2f2678)} .ladder li:nth-child(2){height:114px;background:linear-gradient(180deg,#6a50d6,#3a2b88)} .ladder li:nth-child(3){height:144px;background:linear-gradient(180deg,#8457e0,#472e94)} .ladder li:nth-child(4){height:174px;background:linear-gradient(180deg,#b06fd8,#5f3698)} .ladder li:nth-child(5){height:204px;color:#3b2205;background:linear-gradient(180deg,#ffe08a,#f0a419 70%,#d98b0c); border-color:rgba(255,224,138,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 30px rgba(8,4,30,.38), 0 0 44px rgba(252,199,61,.22)} .gauge{display:flex;gap:2px} .gauge i{display:block;width:9px;height:8px;clip-path:polygon(50% 0,100% 100%,0 100%);background:rgba(220,210,255,.3)} .ladder li:nth-child(1) .gauge i:nth-child(-n+1),.ladder li:nth-child(2) .gauge i:nth-child(-n+2), .ladder li:nth-child(3) .gauge i:nth-child(-n+3),.ladder li:nth-child(4) .gauge i:nth-child(-n+4){background:var(--gold)} .ladder li:nth-child(5) .gauge i{background:#5a3508} /* Up to 720 points five columns cut the names (« Découve-rte ») or came out of unequal widths (« Размышление »): a mountain of bars instead. */ @media(max-width:720px){ /* Built from the base: Discovery the widest step at the foot, Virtuoso the gold peak, as the campaign's mountain (read in order still). The gauge before the name, as the app's chip has it. */ .ladder{display:flex;flex-direction:column-reverse;align-items:center;gap:0;max-width:440px} .ladder::after{display:none} .ladder li:nth-child(n){height:auto;min-height:46px;flex-direction:row;align-items:center;justify-content:center;gap:10px; padding:12px 16px;font-size:15px;border-radius:12px 12px 0 0;border-bottom:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)} .ladder li:nth-child(n)::before{height:50%} .ladder li:nth-child(1){width:100%;border-bottom:1px solid var(--line);border-radius:12px 12px 14px 14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 18px rgba(8,4,30,.35)} .ladder li:nth-child(2){width:90%}.ladder li:nth-child(3){width:80%}.ladder li:nth-child(4){width:70%} .ladder li:nth-child(5){width:60%;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 28px rgba(252,199,61,.25)} } /* The album: its cover beside its name and the stores' keys, gold for the first as the app's card has it. */ .album .inner{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4.5vw,56px)} .album .cover{flex:none;width:260px;height:auto;border-radius:14px; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 44px rgba(8,4,30,.55)} .album h2{margin:0 0 .35em} .album p{margin:0;color:var(--muted)} .listen{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .listen a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-weight:800; font-size:15px;color:var(--ink);background:linear-gradient(180deg,#6a50d6,#45339c);border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px rgba(8,4,30,.35)} .listen a.first{color:#3b2205;background:linear-gradient(180deg,#ffe08a,#f2a91d);border-color:rgba(255,224,138,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px rgba(8,4,30,.35)} .listen a:hover{text-decoration:none;filter:brightness(1.08)} .album .all{display:inline-block;margin-top:14px;font-size:14.5px;font-weight:700} @media(max-width:700px){ .album .inner{flex-direction:column;text-align:center;gap:22px} .album .cover{width:200px} .listen{justify-content:center} } /* The game's screens, cut as on the store, with the store's lines. */ .screens{background:linear-gradient(180deg,transparent,rgba(10,6,40,.35) 40%,transparent)} .screens h2{text-align:center;margin-bottom:36px} .screens .inner{max-width:1120px} .screen-strip{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 18px) / 5); gap:18px} /* On a wide screen the six fit and nothing scrolls: a scroller clips both ways and cut the pictures' shadows straight. On a narrow one the strip scrolls, with room inside for the shadows, and fades at the screen's edges; the fade is on a wrapper that does not scroll, so it is drawn once rather than at every step of a swipe. */ @media(max-width:1100px){ .strip-fade{margin-inline:-16px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 48px),transparent)} [dir="rtl"] .strip-fade{-webkit-mask-image:linear-gradient(270deg,transparent,#000 16px,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(270deg,transparent,#000 16px,#000 calc(100% - 48px),transparent)} .screen-strip{grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding:18px 16px 44px;margin-block:-14px -28px;scroll-padding-inline:16px} .screen-strip::-webkit-scrollbar{display:none} } @media(min-width:901px) and (max-width:1100px){.screen-strip{grid-auto-columns:28%}} /* On a wide screen the five rise in a gentle arc to the middle one. */ @media(min-width:1101px){.screen-strip li:nth-child(3){transform:translateY(-14px)} .screen-strip li:nth-child(2),.screen-strip li:nth-child(4){transform:translateY(-6px)}} @media(max-width:520px){.screen-strip{grid-auto-columns:64%}} .screen-strip figure{margin:0;scroll-snap-align:center} .screen-strip img{display:block;width:100%;height:auto;border-radius:20px; border:1px solid var(--line);box-shadow:0 14px 30px rgba(6,3,28,.5);background:var(--field-mid)} .screen-strip figcaption{margin-top:14px;text-align:center;font-weight:800;font-size:12.5px;line-height:1.35;color:var(--ink); opacity:.85;letter-spacing:.07em} /* What else, in cards. */ /* Cards three by three, a short last row centred. */ .grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px} .grid .card{flex:0 1 calc((100% - 32px) / 3)} @media(max-width:900px){.grid .card{flex-basis:calc((100% - 16px) / 2)}} @media(max-width:560px){.grid .card{flex-basis:100%}} /* The features read as text under a hairline: five boxes of unequal fill looked like a web template. */ .more .grid{gap:34px 40px;max-width:1040px;margin:0 auto} .more .card{flex-basis:calc((100% - 80px) / 3);background:none;border:0;box-shadow:none;border-radius:0; border-top:1px solid rgba(168,148,255,.22);padding:18px 2px 0} @media(min-width:901px){.more .card:nth-child(n+4){flex-basis:calc((100% - 40px) / 2)}} @media(max-width:900px){.more .card{flex-basis:calc((100% - 40px) / 2)}} @media(min-width:561px) and (max-width:900px){.more .card:last-child{flex-basis:100%}} @media(max-width:560px){.more .grid{gap:26px}.more .card{flex-basis:100%}} .panel,.contact,.faq,.card{background:var(--panel);border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 26px rgba(8,4,30,.35)} .card{border-radius:20px;padding:20px} .card h3{color:var(--ink);font-weight:800;margin:.1em 0 .35em;font-size:17.5px} .card p{margin:0;color:var(--muted);font-size:15px} .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:34px 0 0} .chip{border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600} /* The home's own scene to close: the Cat solved, on its stage, the name and the line on the stage's front face, dark and plain, like a plaque. The picture is anchored on its foot, so the face stays under the words at any width. */ .finale{position:relative;overflow:hidden;width:100%;aspect-ratio:2731/2048;max-height:1000px;text-align:center} @media(max-width:700px){.finale{aspect-ratio:944/2048;max-height:680px}} .finale .bg::after{background:linear-gradient(180deg,rgba(28,23,87,0) 70%,rgba(23,18,71,.55) 100%)} /* Beside the stage the clouds end on a straight line over a greyish band: a deeper shade there, which also darkens the plaque under the words. */ @media(min-width:701px){.finale .bg::after{background:linear-gradient(180deg,rgba(28,23,87,0) 68%,rgba(23,18,71,.8) 100%)}} .finale .inner{position:absolute;left:0;right:0;bottom:3%;z-index:1} /* The stage's face grows with the width: the words grow with it, so they stay on it from a phone to a wide screen (between 820 and 1 180 points the name sat on the stage's rim). */ .finale .logo.small{font-size:clamp(34px,4vw,56px)} .finale .tag{margin:.05em 0 .5em;font-size:clamp(15px,1.9vw,27px)} .finale .soon{font-size:clamp(12.5px,1.1vw,15px);color:var(--muted);font-weight:700} @media(max-width:700px){.finale .inner{bottom:5%}.finale .logo.small{font-size:42px}.finale .tag{font-size:18px}.finale .soon{font-size:13.5px}} body.home footer .inner::before{display:none} /* -- Documents (privacy, terms, support, legal) ------------------------------ */ h1{color:var(--gold);font-size:clamp(30px,4vw,42px);font-weight:900;line-height:1.2;margin:.1em 0 .1em} .doc h2{color:var(--gold-soft);font-size:19px;font-weight:800;margin:1.7em 0 .45em} .sub{color:var(--muted);font-size:13.5px;margin:.5em 0 2em} .note{color:var(--muted);font-size:13px;margin:-1.2em 0 1.4em;padding:10px 14px;border-inline-start:3px solid var(--lav); background:rgba(168,148,255,.08);border-radius:8px} .panel{border-radius:20px;padding:22px 24px} /* Addresses in the texts (policies.google.com/technologies/ads) are one long word: on a 320-point screen the privacy page ran wider than the screen. */ .panel,.faq,.card{overflow-wrap:anywhere} .panel h2:first-child{margin-top:.2em} /* A 3 900-point card was the box the home page left behind: the texts sit on the field, their sections under a hairline; the contact stays a card. */ .panel,.faq{background:none;border:0;box-shadow:none;padding:0;border-radius:0} .doc h2{border-top:1px solid rgba(168,148,255,.22);padding-top:1.1em} .panel h2:first-child{border-top:0;padding-top:0} .panel :is(p,ul){max-width:68ch} .more .card:last-child p{max-width:62ch} p{margin:.7em 0}ul{padding-inline-start:1.15em;margin:.5em 0}li{margin:.35em 0} .band ul li,.band ol li{margin:0} dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 18px;margin:.6em 0 1em} dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere} @media(max-width:520px){dl{grid-template-columns:1fr;gap:0}dd{margin-bottom:8px}} .contact{border-radius:20px;padding:22px 24px;margin-bottom:22px} .contact .mail{font-size:22px;font-weight:800;color:var(--gold);word-break:break-all} .contact p{margin:.4em 0 0;color:var(--muted);font-size:14px} .faq{margin-top:6px} .faq details{border-bottom:1px solid rgba(255,255,255,.08);padding:14px 0} .faq details:last-child{border-bottom:0} .faq summary{cursor:pointer;color:var(--ink);font-weight:700;list-style:none;display:flex;gap:10px} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"+";color:var(--gold);font-weight:800;flex:none;width:.8em} .faq details[open] summary::before{content:"\2013"} .faq p{margin:.6em 0 .2em;color:var(--muted);font-size:14.5px} .lost{text-align:center;padding:40px 16px 10vh;display:flex;flex-direction:column;justify-content:center;align-items:center} body.lost-page .brand .name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .lost p:last-child a{display:inline-block;padding:10px 22px;border:1px solid var(--line);border-radius:999px;background:rgba(10,6,40,.45)} .lost p:last-child a:hover{text-decoration:none;border-color:rgba(252,199,61,.6)} .lost .piece-row{display:flex;justify-content:center;margin:10px auto 18px} body.doc-page{display:flex;flex-direction:column} body.doc-page main{flex:1 0 auto;width:100%} footer{color:var(--muted);font-size:13px} footer .inner{position:relative;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding-top:22px;padding-bottom:40px} footer .inner::before{content:"";position:absolute;top:0;inset-inline:16px;border-top:1px solid rgba(255,255,255,.08)} body.doc-page footer .inner,body.doc-page header.top .inner{max-width:780px} footer nav{display:flex;flex-wrap:wrap;gap:16px}footer a{color:var(--muted)} @media(max-width:560px){footer .inner{flex-direction:column;gap:14px}footer nav{gap:10px 20px} footer .inner>span{order:2;font-size:12px}}