/* ========================================================================== Taplix Games - one stylesheet for every page. The site commits to one look on purpose: the night-blue ground the brand already uses (theme-color #0B0E1C) and the four glossy balls from the logo. Each game page borrows one accent from its own icon through --game. Adding a game: copy drazzle.html, change the text, the icon and --game on , add a shelf row on index.html and a line in _redirects/sitemap.xml. app-ads.txt already covers every app on the AdMob account. ========================================================================== */ :root{ --night:#0B0E1C; --night-2:#0f1328; --panel:#141937; --line:#252c55; --ink:#eef0ff; --dim:#a0a7cf; --faint:#6f77a6; --red:#FF2D55; --blue:#2F7BFF; --green:#00E06A; --pink:#FF4FA3; --game:#8fb3ff; --display:"Unbounded","Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif; --body:"Onest","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; --r-sm:10px; --r-md:16px; --r-lg:26px; --max:1080px; color-scheme:dark; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .tilt,.shot.deep img,.cast li,.gallery figure{transition:none!important;transform:none!important} } body{ margin:0;background:var(--night);color:var(--ink); font-family:var(--body);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; padding-inline:clamp(16px,4vw,32px); } img{max-width:100%;display:block;height:auto} a{color:var(--game)} a:hover{color:var(--ink)} :focus-visible{outline:3px solid var(--game);outline-offset:3px;border-radius:6px} .wrap{max-width:var(--max);margin-inline:auto} .prose{max-width:68ch} p{margin:0 0 14px} h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em} h1{font-weight:800;font-size:clamp(2.3rem,6.2vw,4.1rem);letter-spacing:-.025em} h2{font-weight:700;font-size:clamp(1.55rem,3.6vw,2.2rem)} h3{font-weight:600;font-size:1.08rem} .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .lede{font-size:clamp(1.05rem,2.2vw,1.2rem);color:var(--dim);max-width:52ch} .skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--night);padding:8px 12px;border-radius:8px;z-index:50} .skip:focus{left:12px} /* ---- header ---------------------------------------------------------- */ .site-head{position:sticky;top:0;z-index:30;margin-inline:calc(-1*clamp(16px,4vw,32px));padding-inline:clamp(16px,4vw,32px); background:rgba(11,14,28,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(37,44,85,.7)} .site-head .wrap{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.01em} .brand svg{width:28px;height:28px} .site-head nav{display:flex;gap:4px;flex-wrap:wrap} .site-head nav a{color:var(--dim);text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:99px} .site-head nav a:hover,.site-head nav a[aria-current="page"]{color:var(--ink);background:var(--panel)} @media (max-width:560px){ .site-head .wrap{gap:4px;padding-block:8px} .site-head nav{width:100%;justify-content:space-between} .site-head nav a{padding:6px 8px;font-size:14px} } /* ---- buttons ---------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:16px;line-height:1; padding:15px 22px;border-radius:99px;border:0;cursor:pointer;transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease} .btn:active{transform:translateY(1px)} .btn-play{background:var(--ink);color:var(--night)} .btn-play:hover{color:var(--night);box-shadow:0 0 0 4px color-mix(in srgb,var(--game) 45%,transparent)} .btn-play svg{width:18px;height:18px} .btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)} .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--dim)} .btn-soon{background:transparent;color:var(--dim);box-shadow:inset 0 0 0 1.5px var(--line);cursor:default} .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .pill{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:5px 11px;border-radius:99px;white-space:nowrap} .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .pill.out{color:#6ff0a8;background:rgba(0,224,106,.1)} .pill.soon{color:#ffd27a;background:rgba(255,193,60,.1)} /* ---- home hero -------------------------------------------------------- */ .hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(40px,8vw,96px) clamp(32px,6vw,72px)} .hero h1{margin:14px 0 18px} .hero .actions{margin-top:28px} @media (max-width:760px){.hero{grid-template-columns:minmax(0,1fr)}.balls{max-width:280px;margin-inline:auto;order:-1}} .balls{position:relative;aspect-ratio:1;max-width:380px;width:100%;justify-self:end} .balls-grid{display:grid;grid-template-columns:1fr 1fr;gap:6%;width:100%;height:100%;padding:4%} .ball{appearance:none;border:0;padding:0;border-radius:50%;cursor:pointer;position:relative; background:radial-gradient(circle at 34% 30%,#fff 0 5%,color-mix(in srgb,var(--c) 70%,#fff) 14%,var(--c) 46%,color-mix(in srgb,var(--c) 55%,#000) 100%); box-shadow:0 18px 30px -12px color-mix(in srgb,var(--c) 70%,transparent),inset 0 -8px 18px rgba(0,0,0,.25); transition:transform .35s cubic-bezier(.3,1.6,.5,1)} .ball:hover{transform:translateY(-4px) scale(1.03)} .ball.pop{animation:pop .5s cubic-bezier(.3,1.5,.5,1)} .ball::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 var(--c);opacity:0} .ball.pop::after{animation:ring .6s ease-out} @keyframes pop{0%{transform:scale(1)}30%{transform:scale(.82,.9)}60%{transform:scale(1.08)}100%{transform:scale(1)}} @keyframes ring{0%{opacity:.8;box-shadow:0 0 0 0 var(--c)}100%{opacity:0;box-shadow:0 0 0 26px var(--c)}} .balls-note{position:absolute;right:0;bottom:-26px;font-size:13px;color:var(--faint)} @media (prefers-reduced-motion: reduce){.ball,.ball.pop,.ball.pop::after{animation:none;transition:none}} /* ---- sections --------------------------------------------------------- */ .section{padding-block:clamp(48px,8vw,88px)} .section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:28px} .section-head p{color:var(--dim);margin:0} /* the shelf: one row per game, icon on the left, the game's own glow behind it */ .shelf{display:grid;gap:18px} .shelf-row{--game:#8fb3ff;position:relative;display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:22px 28px;align-items:center; padding:26px 28px;border-radius:var(--r-lg);background: radial-gradient(420px 220px at 60px 50%,color-mix(in srgb,var(--game) 22%,transparent),transparent 70%),var(--night-2); border:1px solid var(--line)} .shelf-row .icon{width:112px;height:112px;border-radius:26px;box-shadow:0 14px 30px -14px rgba(0,0,0,.8)} .shelf-row h3{font-size:clamp(1.35rem,2.6vw,1.7rem);font-weight:700;margin:8px 0 6px} .shelf-row p{color:var(--dim);margin:0 0 12px;max-width:58ch} .shelf-row .actions{flex-direction:column;align-items:stretch} .shelf-row .actions .btn{justify-content:center} .facts{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--faint)} .facts b{color:var(--ink);font-family:var(--display);font-weight:600;font-size:15px;margin-right:5px;font-variant-numeric:tabular-nums} @media (max-width:820px){ .shelf-row{grid-template-columns:76px minmax(0,1fr);padding:20px} .shelf-row .icon{width:76px;height:76px;border-radius:18px} .shelf-row .actions{grid-column:1 / -1;flex-direction:row} } @media (max-width:420px){.shelf-row .actions .btn{flex:1}} /* principles */ .rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0;padding:0;list-style:none} .rules li{padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:14px 1fr;gap:4px 16px} .rules li::before{content:"";width:12px;height:12px;border-radius:50%;margin-top:6px;grid-row:span 2; background:radial-gradient(circle at 35% 30%,#fff 0 8%,var(--c) 45%,color-mix(in srgb,var(--c) 60%,#000))} .rules li:nth-child(4n+1){--c:var(--red)} .rules li:nth-child(4n+2){--c:var(--blue)} .rules li:nth-child(4n+3){--c:var(--green)} .rules li:nth-child(4n){--c:var(--pink)} .rules h3{font-size:1.02rem} .rules p{color:var(--dim);margin:0;font-size:15.5px} @media (max-width:700px){.rules{grid-template-columns:minmax(0,1fr)}} .support{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding:clamp(24px,4vw,40px); border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(255,79,163,.1),rgba(47,123,255,.08));border:1px solid var(--line)} .support p{color:var(--dim);margin:10px 0 0;max-width:60ch} @media (max-width:700px){.support{grid-template-columns:minmax(0,1fr)}} /* ---- game pages ------------------------------------------------------- */ .game-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(28px,6vw,80px);align-items:center;padding-block:clamp(36px,7vw,80px) clamp(24px,5vw,56px)} .game-hero .icon{width:88px;height:88px;border-radius:22px;margin-bottom:22px;box-shadow:0 0 0 1px var(--line),0 20px 40px -18px color-mix(in srgb,var(--game) 60%,transparent)} .game-hero h1{margin:12px 0 14px} .game-hero .actions{margin-top:26px} .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:34px 0 0;padding:0;list-style:none;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .stats li{background:var(--night-2);padding:14px 16px} .stats b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.8vw,1.6rem);color:var(--game);font-variant-numeric:tabular-nums;line-height:1.2} .stats span{font-size:13.5px;color:var(--dim)} @media (max-width:520px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:760px){.game-hero{grid-template-columns:minmax(0,1fr)}} .shot{position:relative;justify-self:center;width:min(100%,360px)} .shot img{border-radius:28px;border:6px solid #1b2046;box-shadow:0 40px 80px -30px color-mix(in srgb,var(--game) 45%,transparent),0 0 0 1px var(--line)} .shot figcaption{font-size:13px;color:var(--faint);text-align:center;margin-top:12px} .showcase{justify-self:center;width:min(100%,320px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle,color-mix(in srgb,var(--game) 30%,transparent),transparent 68%)} .showcase img{width:62%;border-radius:22%;box-shadow:0 30px 60px -24px rgba(0,0,0,.9)} .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none;counter-reset:s} .steps li{counter-increment:s;padding:22px;border-radius:var(--r-md);background:var(--night-2);border:1px solid var(--line)} .steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-bottom:14px; font-family:var(--display);font-weight:700;font-size:15px;color:var(--night);background:var(--game)} .steps h3{margin-bottom:6px} .steps p{color:var(--dim);margin:0;font-size:15.5px} @media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:clamp(28px,6vw,72px);align-items:start} .split .shot{position:sticky;top:90px} @media (max-width:760px){.split{grid-template-columns:minmax(0,1fr)}.split .shot{position:static}} .features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0} .features.one{grid-template-columns:minmax(0,1fr)} .features div{padding:18px 0;border-top:1px solid var(--line)} .features dt{font-family:var(--display);font-weight:600;font-size:1.02rem;margin-bottom:4px} .features dd{margin:0;color:var(--dim);font-size:15.5px} @media (max-width:700px){.features{grid-template-columns:minmax(0,1fr)}} .cta{text-align:center;padding:clamp(32px,6vw,56px) clamp(20px,4vw,40px);border-radius:var(--r-lg);border:1px solid var(--line); background:radial-gradient(600px 240px at 50% 0%,color-mix(in srgb,var(--game) 20%,transparent),transparent 75%),var(--night-2)} .cta p{color:var(--dim);margin:12px auto 24px;max-width:48ch} .cta .actions{justify-content:center} .cta small{display:block;margin-top:18px;color:var(--faint);font-size:14px} /* ---- 3D: perspektiiv, kallutus, sygavus -------------------------------- Kaks reeglit hoiavad selle maitsekana: nurgad on vaeikesed (alla 8 kraadi) ja koik liikumine kaeib ainult hiire/sormega, mitte iseenesest. Liikumise vahendaja lylitab koik valja. */ .tilt{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.3,1)} .stage3d{perspective:1200px} .shot.deep img{transform:rotateY(-7deg) rotateX(2deg) translateZ(0); transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .5s ease; box-shadow:34px 44px 90px -38px rgba(0,0,0,.95),0 0 0 1px var(--line), -10px 0 40px -28px color-mix(in srgb,var(--game) 70%,transparent)} .shot.deep:hover img{transform:rotateY(-2deg) rotateX(0) translateZ(12px)} .shot.deep::after{content:"";position:absolute;left:8%;right:8%;bottom:-18px;height:26px;border-radius:50%; background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(6px);z-index:-1} /* ---- cast: 3D-tegelased ------------------------------------------------- */ .cast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none} @media (max-width:640px){.cast{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:380px){.cast{grid-template-columns:repeat(2,minmax(0,1fr))}} .cast li{display:grid;justify-items:center;gap:6px;padding:14px 8px 12px;border-radius:var(--r-md); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)); border:1px solid var(--line);transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s ease} .cast li:hover{transform:translateY(-6px) rotateX(6deg);border-color:color-mix(in srgb,var(--game) 55%,var(--line))} .cast img{width:min(110px,70%);filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))} .cast b{font-family:var(--display);font-weight:600;font-size:14px} .cast span{font-size:12.5px;color:var(--faint);text-align:center;line-height:1.35} /* ---- screenshot gallery ------------------------------------------------ Kuus pilti, kerimisriba telefonis ja vorgustik laual. Pildid on mangu enda joonistusest, mitte makett. */ .gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(214px,1fr);gap:16px; overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin:0; scrollbar-color:var(--line) transparent} .gallery figure{margin:0;scroll-snap-align:start;transition:transform .32s cubic-bezier(.2,.8,.3,1)} .gallery figure:hover{transform:translateY(-8px) rotateX(5deg) scale(1.015)} .gallery img{border-radius:20px;border:5px solid #1b2046;box-shadow:0 26px 50px -26px rgba(0,0,0,.9),0 0 0 1px var(--line)} .gallery figcaption{font-size:13.5px;color:var(--dim);margin-top:10px;line-height:1.45} .gallery figcaption b{display:block;color:var(--ink);font-family:var(--display);font-weight:600;font-size:14.5px;margin-bottom:2px} @media (min-width:900px){ .gallery{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible} } /* ---- faq --------------------------------------------------------------- */ .faq{display:grid;gap:10px} .faq details{background:var(--night-2);border:1px solid var(--line);border-radius:var(--r-md);padding:0 20px} .faq summary{cursor:pointer;padding:16px 0;font-family:var(--display);font-weight:600;font-size:1rem;list-style-position:inside} .faq summary::marker{color:var(--game)} .faq details[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px} .faq p{color:var(--dim);font-size:15.5px} .faq p:last-child{margin-bottom:16px} /* ---- text pages ------------------------------------------------------- */ .doc{padding-block:clamp(36px,7vw,72px) 24px} .doc h1{font-size:clamp(2rem,5vw,3rem)} .doc .updated{color:var(--faint);font-size:14.5px;margin:10px 0 28px} .doc h2{font-size:clamp(1.25rem,2.6vw,1.5rem);margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--line)} .doc h3{margin:26px 0 8px;color:var(--ink)} .doc p,.doc li{color:#cfd3ee} .doc ul{padding-left:22px} .doc strong{color:#fff} .box{background:var(--night-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;margin:20px 0} .box p:last-child{margin:0} .toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none} .toc a{display:inline-block;font-size:14px;text-decoration:none;color:var(--dim);border:1px solid var(--line);padding:6px 12px;border-radius:99px} .toc a:hover{color:var(--ink);border-color:var(--dim)} /* ---- footer ----------------------------------------------------------- */ .site-foot{margin-top:clamp(40px,8vw,80px);border-top:1px solid var(--line);padding-block:28px 40px;color:var(--faint);font-size:14.5px} .site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center} .site-foot nav{display:flex;flex-wrap:wrap;gap:6px 20px} .site-foot a{color:var(--dim);text-decoration:none} .site-foot a:hover{color:var(--ink)}