/* Faay Tech — shared design system. Every app page sets a theme class (t-) on ; the tokens below are what the components read, so a page only has to pick its world. */ :root{ --font:"Plus Jakarta Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --brand:#2172E0; --brand-2:#0B4FD6; --bg:#F6F8FC; --bg2:#FFFFFF; --ink:#0B1220; --muted:#4B5568; --accent:#2172E0; --on-accent:#FFFFFF; --surface:#FFFFFF; --surface-ink:#0B1220; --line:rgba(11,18,32,.10); --chip:rgba(11,18,32,.06); --shadow:0 1px 2px rgba(11,18,32,.06),0 12px 40px -12px rgba(11,18,32,.22); --shadow-lg:0 2px 4px rgba(11,18,32,.06),0 40px 80px -30px rgba(11,18,32,.40); --r-sm:12px;--r:20px;--r-lg:32px; --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); --container:1200px; --nav-h:68px; } /* ---------- themes: colours lifted from each app's own store art ---------- */ .t-magniko{--bg:#EAF5FF;--bg2:#FFFFFF;--ink:#0E2A5C;--muted:#3D5480;--accent:#1A6FE8;--on-accent:#fff;--surface:#fff;--surface-ink:#0E2A5C;--line:rgba(14,42,92,.12);--chip:rgba(26,111,232,.10);--hero-a:#8CC8FF;--hero-b:#DDF0FF;--grass:#5FB53C} .t-kalendo{--bg:#062520;--bg2:#0A332D;--ink:#EFFFFA;--muted:#A7CDC3;--accent:#5EE6C4;--on-accent:#04201B;--surface:#0E3D35;--surface-ink:#EFFFFA;--line:rgba(127,227,203,.16);--chip:rgba(94,230,196,.12);--hero-a:#041E1A;--hero-b:#0B3B34} .t-valigo{--bg:#EEF6F2;--bg2:#FFFFFF;--ink:#14213D;--muted:#4C5A74;--accent:#14213D;--on-accent:#fff;--surface:#fff;--surface-ink:#14213D;--line:rgba(20,33,61,.10);--chip:rgba(94,208,176,.18);--mint:#5ED0B0;--hero-a:#DDF1E9;--hero-b:#E8E3F6} .t-crosshair{--bg:#0F1923;--bg2:#15222E;--ink:#ECE8E1;--muted:#A9B3BD;--accent:#FF4655;--on-accent:#0F1923;--surface:#1A2734;--surface-ink:#ECE8E1;--line:rgba(236,232,225,.12);--chip:rgba(255,70,85,.16);--hero-a:#F45B69;--hero-b:#E4414F;--coral:#F45B69} .t-wordify{--bg:#F6F3FF;--bg2:#FFFFFF;--ink:#1D2130;--muted:#565C70;--accent:#6D4AE0;--on-accent:#fff;--surface:#fff;--surface-ink:#1D2130;--line:rgba(29,33,48,.10);--chip:rgba(109,74,224,.10);--hero-a:#EEE8FF;--hero-b:#E3F7EC;--wf-green:#3DB76A;--wf-yellow:#F2B72E;--wf-dark:#3A4050} .t-balloon{--bg:#1D4ED8;--bg2:#2563EB;--ink:#FFFFFF;--muted:#DCE7FF;--accent:#FF9F1C;--on-accent:#1A1D23;--surface:#1A1D23;--surface-ink:#fff;--line:rgba(255,255,255,.18);--chip:rgba(255,255,255,.14);--hero-a:#4A8DF8;--hero-b:#1D4ED8} .t-snake{--bg:#FBBA36;--bg2:#FFC957;--ink:#1F2A6E;--muted:#3C477F;--accent:#3F51B5;--on-accent:#fff;--surface:#3F51B5;--surface-ink:#fff;--line:rgba(31,42,110,.18);--chip:rgba(31,42,110,.10);--hero-a:#FBBA36;--hero-b:#F7A928;--indigo:#3F51B5;--navy:#23307C} .t-maze{--bg:#050608;--bg2:#0C0F14;--ink:#FFFFFF;--muted:#B9C6D2;--accent:#049BE0;--on-accent:#fff;--surface:#11161D;--surface-ink:#fff;--line:rgba(4,155,224,.24);--chip:rgba(4,155,224,.16);--hero-a:#049BE0;--hero-b:#0690D2} .t-colors{--bg:#F5F0FF;--bg2:#FFFFFF;--ink:#1F1B2E;--muted:#58516E;--accent:#7B45E8;--on-accent:#fff;--surface:#fff;--surface-ink:#1F1B2E;--line:rgba(31,27,46,.10);--chip:rgba(123,69,232,.10);--hero-a:#EEE5FF;--hero-b:#FFE1EC} .t-countdown{--bg:#EEF3FF;--bg2:#FFFFFF;--ink:#0F1B3D;--muted:#4A5677;--accent:#2962FF;--on-accent:#fff;--surface:#fff;--surface-ink:#0F1B3D;--line:rgba(15,27,61,.10);--chip:rgba(41,98,255,.10);--hero-a:#2962FF;--hero-b:#1E4FE0;--hilite:#FFEB3B} .t-home{--bg:#F6F8FC;--ink:#0B1220;--muted:#4B5568;--accent:#2172E0;--on-accent:#fff} /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)} body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} img,svg,canvas,video{display:block;max-width:100%} img{height:auto} a{color:inherit} button{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:800} p{margin:0} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700} .skip:focus{top:12px} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px} ::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:50;height:var(--nav-h);transition:background .35s var(--ease),box-shadow .35s var(--ease),color .35s} .nav.is-scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--line)} .nav .container{height:100%;display:flex;align-items:center;gap:20px} .nav__logo{display:flex;align-items:center;flex:none} .nav__logo img{height:30px;width:auto} .logo-white{display:none} .is-dark .logo-ink{display:none} .is-dark .logo-white{display:block} .nav__links{display:flex;gap:4px;margin-left:auto;align-items:center} .nav__links a{text-decoration:none;font-weight:600;font-size:15px;padding:8px 12px;border-radius:999px;opacity:.86;transition:opacity .2s,background .2s} .nav__links a:hover{opacity:1;background:var(--chip)} .nav__cta{margin-left:6px;display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent)!important;opacity:1!important;padding:9px 16px!important;font-weight:700!important} .nav__cta img{width:22px;height:22px;border-radius:6px} @media (max-width:640px){ .nav__links .hide-sm{display:none} .nav__logo img{height:26px} } /* ---------- buttons, badges, chips ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;font-weight:700;font-size:16px;text-decoration:none;background:var(--accent);color:var(--on-accent);transition:transform .25s var(--spring),box-shadow .25s,background .2s} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)} .btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)} .btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--ink)} .btn--sm{min-height:40px;padding:0 16px;font-size:14px} .badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .badge{display:inline-block;border-radius:10px;line-height:0;transition:transform .25s var(--spring),box-shadow .25s} .badge:hover{transform:translateY(-3px);box-shadow:0 12px 24px -10px rgba(0,0,0,.5)} .badge img{height:52px;width:auto} .badge--soon{display:inline-flex;align-items:center;height:52px;padding:0 18px;border-radius:10px;border:1.5px dashed color-mix(in srgb,var(--ink) 35%,transparent);font-size:14px;font-weight:600;color:var(--muted);line-height:1.2} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--chip);font-size:14px;font-weight:600;color:var(--ink)} .chip svg{width:16px;height:16px;flex:none} .kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .kicker img{width:28px;height:28px;border-radius:8px} /* ---------- app hero ---------- */ .hero{position:relative;isolation:isolate;margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + 40px) 0 64px;overflow:hidden;min-height:min(900px,100svh)} .hero__world{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,var(--hero-a),var(--hero-b))} .hero__world>img{position:absolute;inset:-4%;width:108%;max-width:none;height:108%;object-fit:cover;will-change:transform;transition:transform .8s var(--ease)} .hero__fade{position:absolute;inset:auto 0 0 0;height:180px;z-index:-1;background:linear-gradient(180deg,transparent,var(--bg))} .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px;align-items:center} .hero__copy{max-width:560px} .hero__copy .kicker{margin-bottom:20px} .hero h1{font-size:clamp(40px,6.2vw,76px);margin-bottom:20px} .hero h1 em{font-style:normal;color:var(--accent)} .hero__lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);margin-bottom:28px;max-width:520px} .hero__meta{margin-top:22px} .hero__stage{position:relative;min-width:0} @media (max-width:960px){ .hero{min-height:0;padding-bottom:40px} .hero__grid{grid-template-columns:1fr;gap:36px} .hero__copy{max-width:none} } /* the interactive demo frame */ .stage{position:relative;border-radius:var(--r-lg);background:var(--surface);color:var(--surface-ink);box-shadow:var(--shadow-lg);overflow:hidden;isolation:isolate} .stage__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(10,14,24,.72);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none;transition:opacity .4s} .stage__hint.is-gone{opacity:0} .stage__hint i{width:8px;height:8px;border-radius:50%;background:#5EE6A0;animation:pulse 1.6s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,230,160,.7)}100%{box-shadow:0 0 0 10px rgba(94,230,160,0)}} .demo-label{display:flex;align-items:center;gap:8px;margin:0 0 12px 6px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .demo-label::before{content:"";width:22px;height:2px;background:currentColor;opacity:.6} /* ---------- sections ---------- */ .section{padding:clamp(64px,9vw,120px) 0;position:relative} .section--tight{padding:clamp(48px,6vw,80px) 0} .section--alt{background:var(--bg2)} .section__head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)} .section__head.center{margin-inline:auto;text-align:center} .section__head .kicker{margin-bottom:14px} .section__head h2{font-size:clamp(32px,4.6vw,56px);margin-bottom:16px} .section__head p{font-size:18px;color:var(--muted)} /* screenshots rail */ .rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 24px 36px;margin:0 -24px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch} .rail::-webkit-scrollbar{display:none} .rail.is-drag{cursor:grabbing;scroll-snap-type:none} .rail__item{flex:none;scroll-snap-align:center;perspective:1000px} .rail__item img{width:min(260px,62vw);height:auto;border-radius:22px;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s;transform-style:preserve-3d;user-select:none;-webkit-user-drag:none;background:var(--surface)} .rail__item--wide img{width:min(520px,86vw)} .rail__item img:hover{box-shadow:var(--shadow-lg)} .rail-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:-8px} .rail-nav button{width:46px;height:46px;border-radius:50%;border:0;background:var(--chip);cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s var(--spring)} .rail-nav button:hover{background:color-mix(in srgb,var(--accent) 22%,transparent);transform:scale(1.06)} .rail-nav svg{width:20px;height:20px} /* features */ .features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .feature{position:relative;padding:28px;border-radius:var(--r);background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s;overflow:hidden} .feature:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),var(--shadow)} .feature::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none} .feature:hover::after{opacity:1} .feature__icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--chip);color:var(--accent);margin-bottom:18px} .feature__icon svg{width:24px;height:24px} .feature h3{font-size:20px;margin-bottom:8px;letter-spacing:-.015em} .feature p{color:color-mix(in srgb,var(--surface-ink) 72%,transparent);font-size:16px} @media (max-width:900px){.features{grid-template-columns:1fr 1fr}} @media (max-width:600px){.features{grid-template-columns:1fr}} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:step} .step{padding:30px 28px;border-radius:var(--r);background:var(--chip);position:relative} .step::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:block;font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--accent);margin-bottom:10px;line-height:1} .step h3{font-size:20px;margin-bottom:8px} .step p{color:var(--muted);font-size:16px} @media (max-width:800px){.steps{grid-template-columns:1fr}} /* faq */ .faq{max-width:820px;margin-inline:auto;display:grid;gap:12px} .faq details{border-radius:var(--r-sm);background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--line);overflow:hidden} .faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 22px;font-weight:700;font-size:17px;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);opacity:.6} .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .faq details p{padding:0 22px 22px;color:color-mix(in srgb,var(--surface-ink) 75%,transparent)} /* download band */ .get{position:relative;overflow:hidden;isolation:isolate} .get__card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center;padding:clamp(32px,5vw,64px);border-radius:var(--r-lg);background:linear-gradient(135deg,var(--hero-a),var(--hero-b));color:var(--ink);box-shadow:var(--shadow-lg);position:relative;overflow:hidden} .get__icon{width:96px;height:96px;border-radius:24px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);margin-bottom:22px} .get h2{font-size:clamp(32px,4.4vw,52px);margin-bottom:12px} .get p{font-size:18px;opacity:.85;margin-bottom:26px;max-width:520px} .get__qr{justify-self:end;text-align:center;background:#fff;color:#0B1220;border-radius:24px;padding:18px 18px 14px;box-shadow:var(--shadow);max-width:220px} .get__qr svg,.get__qr img{width:180px;height:180px;margin:0 auto} .get__qr span{display:block;margin-top:8px;font-size:13px;font-weight:700;opacity:.75} @media (max-width:860px){.get__card{grid-template-columns:1fr}.get__qr{display:none}} /* more apps */ .more{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px} .more a{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;text-decoration:none;background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--line);transition:transform .3s var(--spring),box-shadow .3s} .more a:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 0 0 1px var(--line),var(--shadow)} .more img{width:52px;height:52px;border-radius:14px;flex:none} .more b{display:block;font-size:15px;line-height:1.25} .more small{display:block;font-size:13px;opacity:.7;line-height:1.3;margin-top:2px} /* sticky mobile download bar */ .getbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:none;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:20px;background:rgba(12,16,26,.92);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px -12px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .45s var(--spring)} .getbar.is-on{transform:none} .getbar img{width:44px;height:44px;border-radius:12px} .getbar b{display:block;font-size:15px;line-height:1.2} .getbar small{display:block;font-size:12px;opacity:.7} .getbar .btn{margin-left:auto;min-height:44px;background:#fff;color:#0B1220} @media (max-width:760px){.getbar{display:flex}} /* ---------- footer ---------- */ .footer{padding:64px 0 calc(40px + env(safe-area-inset-bottom));background:#070B16;color:#C9D1E0;font-size:15px} .footer a{color:#E6ECF7;text-decoration:none} .footer a:hover{text-decoration:underline} .footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px} .footer__brand img{height:30px;width:auto;margin-bottom:16px} .footer__brand p{max-width:320px;color:#9AA6BC} .footer h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#7F8BA3;margin-bottom:14px} .footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .footer__bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:#7F8BA3;font-size:14px} @media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}} @media (max-width:760px){.footer{padding-bottom:110px}} /* ---------- reveal ---------- */ [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)} [data-reveal].is-in{opacity:1;transform:none} [data-reveal-delay="1"]{transition-delay:.08s} [data-reveal-delay="2"]{transition-delay:.16s} [data-reveal-delay="3"]{transition-delay:.24s} .no-js [data-reveal]{opacity:1;transform:none} /* =================================================================== HOME =================================================================== */ .home-world{position:fixed;inset:0;z-index:-3;background:var(--w-bg,#070B16);transition:background-color .9s var(--ease)} .home-world::after{content:"";position:absolute;inset:0;background:radial-gradient(900px circle at var(--gx,70%) var(--gy,30%),var(--w-glow,rgba(33,114,224,.45)),transparent 60%);transition:background .9s var(--ease)} body.t-home{background:transparent;color:var(--w-ink,#fff);transition:color .9s var(--ease)} body.t-home .nav.is-scrolled{background:color-mix(in srgb,var(--w-bg,#070B16) 80%,transparent)} .h-hero{position:relative;overflow-x:clip;margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + 56px) 0 80px;min-height:100svh;display:flex;align-items:center} .h-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;width:100%} .h-hero h1{font-size:clamp(46px,7.4vw,104px);letter-spacing:-.045em;line-height:.98;margin:18px 0 26px} .verb{display:inline-block;position:relative;cursor:pointer;text-decoration:none;color:inherit;transition:color .35s,transform .35s var(--spring)} .verb::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.1em;border-radius:99px;background:var(--vc);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)} .verb:hover,.verb.is-on{color:var(--vc)} .verb:hover::after,.verb.is-on::after{transform:scaleX(1)} .h-hero__lead{font-size:clamp(18px,1.7vw,21px);max-width:560px;opacity:.82;margin-bottom:32px} .h-hero .kicker{color:inherit;opacity:.7} .orbit{position:relative;aspect-ratio:1/1;width:100%;max-width:600px;margin-inline:auto;touch-action:pan-y} .orbit__ring{position:absolute;inset:8%;border-radius:50%;border:1px dashed rgba(255,255,255,.14)} .orbit__ring--2{inset:24%} .orbit__core{position:absolute;left:50%;top:50%;width:26%;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;pointer-events:none} .orbit__core img{width:100%;height:auto;filter:drop-shadow(0 20px 40px rgba(33,114,224,.45))} .orbit__label{position:absolute;left:0;top:0;z-index:40;margin:0;padding:8px 14px;border-radius:14px;background:rgba(10,16,30,.92);color:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);text-align:center;white-space:nowrap;font-weight:700;font-size:15px;line-height:1.25;opacity:0;pointer-events:none;transition:opacity .2s} .orbit__label::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;background:inherit;transform:rotate(45deg);border-radius:2px} .orbit__label.is-on{opacity:1} .orbit__label small{display:block;font-weight:500;opacity:.75;font-size:12.5px} .oicon{position:absolute;left:0;top:0;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;border-radius:23%;will-change:transform;transition:filter .3s,box-shadow .3s;box-shadow:0 14px 30px -12px rgba(0,0,0,.6)} .oicon img{width:100%;height:100%;border-radius:23%;pointer-events:none;user-select:none;-webkit-user-drag:none} .oicon:hover,.oicon.is-on{box-shadow:0 0 0 3px #fff,0 22px 40px -12px rgba(0,0,0,.7)} @media (max-width:900px){ .h-hero{min-height:0;padding-bottom:40px} .h-hero__grid{grid-template-columns:1fr} .orbit{max-width:420px} } .chapter{position:relative;overflow-x:clip;padding:clamp(80px,11vw,150px) 0;min-height:90vh;display:flex;align-items:center} .chapter__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;width:100%} .chapter:nth-of-type(even) .chapter__grid{direction:rtl} .chapter:nth-of-type(even) .chapter__grid>*{direction:ltr} .chapter__icon{width:72px;height:72px;border-radius:18px;box-shadow:0 16px 34px -14px rgba(0,0,0,.5);margin-bottom:20px} .chapter h2{font-size:clamp(38px,5.2vw,68px);letter-spacing:-.035em;margin:10px 0 18px} .chapter h2 em{font-style:normal;color:var(--c-accent)} .chapter p.lead{font-size:19px;opacity:.82;max-width:520px;margin-bottom:26px} .chapter .chips{margin-bottom:28px} .chapter .chip{background:color-mix(in srgb,var(--c-accent) 16%,transparent);color:inherit} .chapter__more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px} .chapter__more:hover{gap:12px} .chapter__more svg{width:20px;height:20px} .fan{display:block;position:relative;height:clamp(420px,52vw,640px);perspective:1400px} .fan img{position:absolute;top:50%;left:50%;width:46%;border-radius:26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transition:transform .7s var(--ease)} .fan img:nth-child(1){transform:translate(-118%,-46%) rotate(-9deg)} .fan img:nth-child(2){transform:translate(-50%,-54%);z-index:2} .fan img:nth-child(3){transform:translate(18%,-46%) rotate(9deg)} .fan.is-in img:nth-child(1){transform:translate(-122%,-48%) rotate(-11deg)} .fan.is-in img:nth-child(3){transform:translate(22%,-48%) rotate(11deg)} @media (max-width:900px){ .chapter{min-height:0} .chapter__grid,.chapter:nth-of-type(even) .chapter__grid{grid-template-columns:1fr;direction:ltr;gap:28px} .fan{height:min(110vw,520px)} } .minis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px} .mini{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;text-decoration:none;color:var(--m-ink);background:var(--m-bg);min-height:360px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:transform .45s var(--spring)} .mini:hover{transform:translateY(-8px) rotate(-.6deg)} .mini__art{position:relative;flex:1;min-height:200px;overflow:hidden} .mini__body{padding:18px 18px 20px} .mini__body img{width:44px;height:44px;border-radius:12px;margin-bottom:10px} .mini__body b{display:block;font-size:18px;letter-spacing:-.01em} .mini__body small{display:block;font-size:14px;opacity:.8;line-height:1.35;margin-top:4px} @media (max-width:1100px){.minis{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:700px){.minis{grid-template-columns:1fr 1fr}.mini{min-height:300px}} @media (max-width:420px){.minis{grid-template-columns:1fr}} /* tiny live previews on the homepage cards */ .m-balloon{position:absolute;left:50%;top:18%;width:64px;animation:m-rise 5s ease-in-out infinite} @keyframes m-rise{0%,100%{transform:translate(-50%,24px)}50%{transform:translate(-50%,-6px)}} .m-cloud{position:absolute;height:18px;border-radius:99px;background:rgba(255,255,255,.8);animation:m-cloud 9s linear infinite} @keyframes m-cloud{from{transform:translateX(260px)}to{transform:translateX(-140px)}} .m-snake{position:absolute;inset:0} .m-maze{position:absolute;inset:0} .m-word{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:800;transition:color .3s} .m-word span{padding:18px 22px;border-radius:18px;background:var(--mw-bg,#FFD9E6);box-shadow:0 12px 24px -12px rgba(0,0,0,.35);transition:background .4s,color .4s} .m-count{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;color:#fff;text-align:center} .m-count b{font-size:clamp(20px,2vw,26px);line-height:1.2;padding:0 10px;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .m-count small{opacity:.8;font-weight:600} .studio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center} .studio__card{padding:clamp(28px,4vw,48px);border-radius:var(--r-lg);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .studio h2{font-size:clamp(32px,4.2vw,52px);margin-bottom:16px} .studio p{opacity:.8;font-size:18px;margin-bottom:22px} @media (max-width:860px){.studio{grid-template-columns:1fr}} /* ---------- legal pages ---------- */ body.t-legal{background:#F6F8FC} .legal-hero{background:linear-gradient(135deg,#0B1B3F,#2172E0);color:#fff;margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + 56px) 0 72px} .legal-hero h1{font-size:clamp(36px,5vw,56px);margin-bottom:10px} .legal-hero p{opacity:.8} .legal-body{max-width:820px;margin:-40px auto 80px;padding:0 20px;position:relative} /* ---------- small utilities ---------- */ [hidden]{display:none!important} .show-sm{display:none} @media (max-width:640px){.nav__cta .show-sm{display:inline}} .nav.is-dark{color:#fff} .hero__world::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--hero-b) 78%,transparent) 0%,color-mix(in srgb,var(--hero-b) 30%,transparent) 48%,transparent 70%)} .hero--stack .hero__world::after{background:linear-gradient(180deg,color-mix(in srgb,var(--hero-b) 72%,transparent),color-mix(in srgb,var(--hero-b) 20%,transparent) 55%,transparent)} @media (max-width:960px){.hero__world::after{background:linear-gradient(180deg,color-mix(in srgb,var(--hero-b) 75%,transparent),color-mix(in srgb,var(--hero-b) 35%,transparent) 60%,transparent)}} .t-crosshair .hero__world::after{background:linear-gradient(180deg,rgba(15,25,35,.84),rgba(15,25,35,.6) 55%,rgba(15,25,35,.4))} .t-kalendo .hero__world::after{--hero-b:#041E1A} /* ---------- hero backdrops made of the app's own things ---------- */ .amb{position:absolute;inset:0;overflow:hidden;pointer-events:none} /* Valigo: the paper plane flies the dotted route from home to the island */ .t-valigo .hero__world{background:linear-gradient(135deg,#D8F3E8 0%,#E6F2F6 45%,#E9E2F7 100%)} .amb-valigo img{position:absolute;height:auto;filter:drop-shadow(0 24px 30px rgba(20,33,61,.18))} .a-trail{position:absolute;inset:6% 0 18% 0;width:100%;height:76%} .a-trail path{fill:none;stroke:rgba(20,33,61,.22);stroke-width:3;stroke-dasharray:2 14;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:trail 3s linear infinite} @keyframes trail{to{stroke-dashoffset:-32}} .a-luggage{left:2%;bottom:14%;width:clamp(70px,8vw,120px);animation:bob 6s ease-in-out infinite} .a-island{right:-2%;top:14%;width:clamp(170px,20vw,300px);animation:bob 8s ease-in-out infinite -2s} .a-mountain{right:24%;top:4%;width:clamp(110px,11vw,170px);opacity:.9;animation:bob 9s ease-in-out infinite -4s} .a-house{left:44%;top:2%;width:clamp(80px,8vw,120px);opacity:.85;animation:bob 7s ease-in-out infinite -1s} .a-plane{left:0;top:0;width:clamp(70px,7vw,110px);offset-path:path("M40 520 C 260 380, 380 120, 620 150 S 900 330, 980 120");offset-rotate:auto 8deg;animation:fly 14s cubic-bezier(.45,.05,.35,1) infinite} @supports not (offset-path:path("M0 0")){.a-plane{display:none}} @keyframes fly{0%{offset-distance:0%;opacity:0}6%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @media (max-width:960px){.a-mountain,.a-house,.a-luggage{display:none}.a-island{top:auto;bottom:4%;width:160px;opacity:.55}} /* Story Balloon */ .t-balloon .hero__world{background:linear-gradient(180deg,#2F6FEF,#4A8DF8 60%,#1D4ED8)} .a-cloud{position:absolute;height:34px;border-radius:99px;background:rgba(255,255,255,.85);box-shadow:30px -16px 0 6px rgba(255,255,255,.85),70px 0 0 -2px rgba(255,255,255,.85);animation:drift linear infinite} .a-cloud.c1{top:18%;width:90px;animation-duration:48s} .a-cloud.c2{top:42%;width:70px;animation-duration:64s;animation-delay:-20s;opacity:.7} .a-cloud.c3{top:70%;width:110px;animation-duration:56s;animation-delay:-36s;opacity:.6} .a-cloud.c4{top:8%;width:60px;animation-duration:72s;animation-delay:-50s;opacity:.5} @keyframes drift{from{transform:translateX(110vw)}to{transform:translateX(-260px)}} .a-balloon{position:absolute;right:6%;top:20%;width:clamp(90px,10vw,150px);animation:rise 9s ease-in-out infinite;filter:drop-shadow(0 30px 30px rgba(10,30,90,.35))} @keyframes rise{0%,100%{transform:translateY(30px) rotate(-2deg)}50%{transform:translateY(-30px) rotate(2deg)}} .a-eagle{position:absolute;left:0;top:34%;width:clamp(90px,9vw,140px);animation:swoop 16s linear infinite 3s;opacity:0} @keyframes swoop{0%{transform:translate(110vw,0);opacity:1}45%{transform:translate(30vw,-40px);opacity:1}60%,100%{transform:translate(-30vw,20px);opacity:1}} @media (max-width:960px){.a-balloon{top:auto;bottom:6%;opacity:.5}} /* Snake 2.0: navy walls slide down, the white snake climbs */ .t-snake .hero__world{background:#FBBA36} .a-blocks{position:absolute;left:52%;right:0;top:-400px;bottom:0;opacity:.6;-webkit-mask-image:linear-gradient(180deg,transparent 400px,#000 560px);mask-image:linear-gradient(180deg,transparent 400px,#000 560px);background:url(/assets/img/snake-tile.svg) 0 0/400px 400px;animation:fall 10s linear infinite} .a-blocks--2{left:0;right:72%;opacity:.16;animation-duration:16s} @keyframes fall{from{transform:translateY(0)}to{transform:translateY(400px)}} @media (max-width:960px){.amb-snake{opacity:.35}.a-maze{--maze-o:.45}} /* The Blue Maze: a torch follows the pointer across the maze */ .t-maze .hero__world{background:#030406} .a-maze{position:absolute;inset:0;opacity:var(--maze-o,1);background:#049BE0 url(/assets/img/maze-tile.svg) 0 0/320px 320px;-webkit-mask-image:radial-gradient(240px circle at var(--hx,72%) var(--hy,42%),#000 55%,transparent 100%);mask-image:radial-gradient(240px circle at var(--hx,72%) var(--hy,42%),#000 55%,transparent 100%);transition:-webkit-mask-position .2s} /* Which Color: words that lie about their ink */ .t-colors .hero__world{background:radial-gradient(60% 60% at 15% 20%,#FFE1EC,transparent),radial-gradient(60% 60% at 85% 80%,#DDF7EA,transparent),#F2EBFF} .amb-colors span{position:absolute;left:var(--x);top:var(--y);font-weight:800;font-size:clamp(24px,3.4vw,46px);color:var(--c);opacity:.28;animation:bob 7s ease-in-out infinite var(--d)} /* Countdown */ .t-countdown{--hero-a:#DCE6FF;--hero-b:#EEF3FF} .t-countdown .hero__world{background:linear-gradient(160deg,#D9E4FF,#EEF3FF 60%,#FFF8CC)} .a-ring{position:absolute;right:-6%;top:6%;width:min(46vw,560px);aspect-ratio:1;border-radius:50%;border:18px solid rgba(41,98,255,.12);border-top-color:rgba(41,98,255,.55);animation:spin 60s linear infinite} .a-ring--2{right:6%;top:22%;width:min(26vw,300px);border-width:10px;border-top-color:#FFEB3B;animation-duration:12s} .a-card{position:absolute;left:-40px;bottom:12%;width:220px;height:74px;border-radius:14px;background:#fff;box-shadow:0 20px 40px -20px rgba(15,27,61,.35);transform:rotate(-8deg);opacity:.7} .a-card--y{left:auto;right:30%;bottom:auto;top:8%;background:#FFEB3B;transform:rotate(6deg);width:160px;height:54px} @keyframes spin{to{transform:rotate(360deg)}} @media (max-width:960px){.amb-countdown{opacity:.5}} /* ---------- 404 ---------- */ .nf{position:relative;min-height:calc(100svh - var(--nav-h));display:grid;place-items:center;overflow:hidden;background:#030406;color:#fff;margin-top:calc(-1 * var(--nav-h))} .nf__box{position:relative;text-align:center;padding:120px 24px} .nf h1{font-size:clamp(44px,8vw,96px);margin:10px 0 16px} .nf p{opacity:.8;margin-bottom:28px} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} [data-reveal]{opacity:1;transform:none} }