/* GENERATED by Toqi Aura scripts-charms-export.py from the Aura tokens and parts. Do not edit. */ /* Toqi Charms — the home laid out as Figma 719:11193, at web scale, built ONLY from Aura: colours from tokens/aura.semantic.json, type from the roles in tokens/aura.type.json, and every control drawn to its component spec (Button, IconButton, SearchField, TabList/Tab, Badge, the card on elevation 1). The generator writes the variables; this stylesheet reads nothing else. */ @font-face{font-family:Rethink;src:url(/charms/a/a82e527aa5f3.ttf);font-weight:400;font-display:block}@font-face{font-family:Rethink;src:url(/charms/a/409608207317.ttf);font-weight:500;font-display:block}@font-face{font-family:Rethink;src:url(/charms/a/eae898c2d039.ttf);font-weight:600;font-display:block}@font-face{font-family:Onest;src:url(/charms/a/5de6de9a54ca.ttf);font-weight:500 600;font-display:block} :root{--page:#FDF8F5;--white:#FFFFFF;--surface2:rgba(255,255,255,0.8);--inset:#EFE4DD;--hover:rgba(0,0,0,0.08);--ink:#0C1A22;--secondary:#394750;--tertiary:#637078;--line:#D9D4D1;--line-interactive:#77838A;--rim:#FFFFFF;--action:#0C1A22;--action-hover:#041017;--action-pressed:#00070E;--on-action:#E9F0F4;--secondary-border:#0C1A22;--toqi:#7B4DFD;--verified:#1366C6;--bubble:#E8E3E0;--l2:#F0EFF8;--l4:#E3E2FD;--l5:#D9D8FE;--l6:#CDCAFF;--l7:#B9B3FF;--l8:#7C56FF;--l10:#684AD4;--l11:#38227C;--halo:rgba(255,255,255,0.6);--kind-art:168px;--kind-w-phone:280px;--k-bars-h:104px;--k-arc-w:200px;--k-arc-h:112px;--k-apps-w:304px;--toqi-core:#8060FF;--toqi-edge:#AFA9F6;--el1:0px 2px 8px rgba(51,35,30,0.05);--el2:0px 2px 12px rgba(51,35,30,0.12);--el3:0px 8px 32px rgba(51,35,30,0.14),0px 2px 8px rgba(51,35,30,0.06);--el4:0px -8px 48px rgba(51,35,30,0.16);--scrim:rgba(12,26,34,0.16);--code-bg:#EFF4F6;--detail-w:640px;--dlg-img-min:96px;--badge-md-h:28px;--badge-md-px:12px;--badge-neutral:#E4E9EB;--dlg-r:32px;--sheet-r:24px;--ease:cubic-bezier(.16,.84,.28,1);--press:0.96;--h-md:40px;--rd-md:16px;--pl-md:20px;--h-sm:32px;--h-lg:48px;--rd-sm:12px;--btn-px-sm:12px;--btn-px:16px;--btn-gap:8px;--sf-pl:12px;--sf-pr:12px;--sf-gap:8px;--sf-edge:#D9D4D1;--sf-edge-hover:#77838A;--sf-focus:#684AD4;--sf-halo:#CDCAFF;--sf-halo-w:4px;--badge-h:20px;--badge-px:8px;--frame:1440px;--frame-bottom:160px;--gutter:64px;--gutter-phone:24px;--banner-w:560px;--search-w:720px;--card-img-h:120px;--eyes-w:8.6px;--demo-w:400px;--demo-h:168px;--demo-h-phone:216px;--demo-card-w:320px;--user-bubble:#E3E2FD;--toqi-bubble:#FFFFFF;--bubble-r:20px;--bubble-tail:8px;--bubble-py:12px;--bubble-px:20px;--bubble-gutter:48px;--composer-r:24px;--composer-p:12px;--composer-gap:8px;--dot:8px;--dot-gap:4px;--dot-rise:4px;--dot-cycle:1200ms;--dot-stagger:160ms;--press-in:480ms cubic-bezier(.05,.9,.3,1);--press-out:320ms cubic-bezier(.22,1,.36,1);--pg-gap:4px;--pg-idle:#394750;--pg-idle-w:500;--pg-cur-w:600;--pg-ellipsis:#637078;--pg-glyph:12px;--pressed:rgba(0,0,0,0.16);--hover-inv:rgba(255,255,255,0.08);--pressed-inv:rgba(255,255,255,0.16);--page-hover:#F7ECE5;--line-white:#E4E9EB;--ghost-label:#223139;--edge-white:#E4E9EB;--edge-white-hover:#8A959B;--hover-in:192ms cubic-bezier(.2,.8,.2,1);--hover-out:400ms cubic-bezier(.4,0,.2,1);--btn-px-icon-sm:8px;--toast-bg:#EAE9FB;--toast-px:16px;--toast-py:8px;--toast-r:16px;--toast-max:400px;--success:#477900;--critical-bg:#FCE5E6;--critical-icon:#D40043;--text-disabled:#8A959B;--disabled-bg:#E4E9EB;--disabled-label:#9CA5AB;--disabled-border:#E4E9EB;--enter:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.4,.5,1);--ease-io:cubic-bezier(.4,0,.2,1);--settle:linear(0 0%, 0.0153 2%, 0.0542 5%, 0.1083 8%, 0.1712 10%, 0.2385 12%, 0.3068 15%, 0.3739 18%, 0.4382 20%, 0.4986 22%, 0.5548 25%, 0.6063 28%, 0.6532 30%, 0.6955 32%, 0.7334 35%, 0.7672 38%, 0.7972 40%, 0.8238 42%, 0.8471 45%, 0.8677 48%, 0.8856 50%, 0.9013 52%, 0.9149 55%, 0.9268 58%, 0.9371 60%, 0.946 62%, 0.9537 65%, 0.9603 68%, 0.966 70%, 0.9709 72%, 0.9752 75%, 0.9788 78%, 0.9819 80%, 0.9846 82%, 0.9869 85%, 0.9888 88%, 0.9905 90%, 0.9919 92%, 0.9931 95%, 0.9942 98%, 1 100%);--settle-ms:600ms;--mark:24px;--mark-gap:8px;--accent-solid:#7B4DFD;--on-accent:#FFFFFF;--aura-a:color-mix(in srgb, #8060FF 28%, transparent);--aura-b:color-mix(in srgb, #89B8F6 28%, transparent);--aura-c:color-mix(in srgb, #E1579D 28%, transparent);--s-2:2px;--s-4:4px;--s-6:6px;--s-8:8px;--s-12:12px;--s-16:16px;--s-20:20px;--s-24:24px;--s-32:32px;--s-48:48px;--s-64:64px;--r-2:2px;--r-4:4px;--r-6:6px;--r-8:8px;--r-12:12px;--r-16:16px;--r-20:20px;--r-24:24px;--r-32:32px;--r-pill:999px;--f-displayXl:500 64px/76px Onest, Rethink, system-ui, sans-serif;--tr-displayXl:-1px;--f-displayLg:500 56px/68px Onest, Rethink, system-ui, sans-serif;--tr-displayLg:-1px;--f-displayMd:500 48px/56px Onest, Rethink, system-ui, sans-serif;--tr-displayMd:-1px;--f-display:500 40px/48px Onest, Rethink, system-ui, sans-serif;--tr-display:-1px;--f-headline:500 32px/40px Onest, Rethink, system-ui, sans-serif;--tr-headline:-1px;--f-subheading:500 28px/32px Onest, Rethink, system-ui, sans-serif;--tr-subheading:-1px;--f-titleSm:500 20px/24px Onest, Rethink, system-ui, sans-serif;--tr-titleSm:0px;--f-title:500 24px/28px Onest, Rethink, system-ui, sans-serif;--tr-title:0px;--f-subtitle:500 16px/20px Onest, Rethink, system-ui, sans-serif;--tr-subtitle:0px;--f-body:400 16px/24px Rethink, system-ui, sans-serif;--tr-body:0px;--f-supporting:400 14px/20px Rethink, system-ui, sans-serif;--tr-supporting:0px;--f-overline:600 12px/16px Rethink, system-ui, sans-serif;--tr-overline:1px;--f-caption:400 12px/16px Rethink, system-ui, sans-serif;--tr-caption:0px;--f-label-display:500 16px/24px Onest, Rethink, system-ui, sans-serif;--f-banner-sub:400 18px/28px Rethink, system-ui, sans-serif;--f-lede:400 16px/20px Rethink, system-ui, sans-serif;--sel-off:8px;--placeholder:url("data:image/png;base64,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")} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} button,input{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0} button{cursor:pointer} a{color:inherit;text-decoration:none} /* no browser tap flash: a tap on a phone painted a translucent box over the card ('brilho no fundo dos cards quando eu clico'). Every control carries its own pressed state instead */ html{-webkit-tap-highlight-color:transparent} :focus-visible{outline:2px solid var(--ink);outline-offset:2px} p{margin:0} .frame{position:relative;max-width:var(--frame);margin:0 auto;overflow:clip;padding-bottom:var(--frame-bottom)} /* clip, not hidden: hidden would make the frame a scroller and the header could not stick */ /* THE AURA behind the page — the docs home banner's: three aura colours mixed into the cream, out of focus, drifting very slowly (aura.site.json charms.auraMix) */ .glow{position:absolute;pointer-events:none;z-index:0;filter:blur(var(--s-48));animation:aura 24s ease-in-out infinite alternate} /* WHERE THE LIGHT SITS: not a blob but the page's own light ('parte da página, não um elemento solto') — a wide wash that pours in from the TOP edge, its colour strongest at the edge and in the open room between the title and the scene, fading to the cream well before the cards; and the same light rising from the BOTTOM edge at the foot. The header is clear at the top, so nothing cuts it */ .glow--top{left:-10%;right:-10%;top:calc(-1 * var(--s-64) * 6);height:880px; background:radial-gradient(34% 52% at 52% 46%,var(--aura-a),transparent 72%), radial-gradient(30% 44% at 76% 50%,var(--aura-b),transparent 72%), radial-gradient(26% 40% at 28% 40%,var(--aura-c),transparent 72%)} .glow--foot{left:-10%;right:-10%;bottom:calc(-1 * var(--s-64) * 6);height:880px;animation-direction:alternate-reverse; background:radial-gradient(34% 52% at 48% 54%,var(--aura-a),transparent 72%), radial-gradient(30% 44% at 24% 50%,var(--aura-b),transparent 72%), radial-gradient(26% 40% at 72% 60%,var(--aura-c),transparent 72%)} @keyframes aura{to{translate:3% -2%;rotate:6deg;scale:1.06}} .frame>*:not(.glow){position:relative;z-index:1} /* ---------- HEADER ---------- */ /* THE HEADER STAYS, as on the docs site: no divider — the page colour fading to transparent over a backdrop blur, so the page scrolls UNDER it and softens through its bottom edge */ .hd{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--s-32);padding:calc(var(--s-24) - var(--s-12) * var(--shrink,0)) var(--gutter);margin-bottom:calc(var(--s-24) * var(--shrink,0))} /* ON SCROLL IT TIGHTENS, THEN HOLDS: 24 above and below become 12 and the name steps down a size. The margin gives back what the padding loses, so the page under it never moves while it shrinks */ /* the fade and blur only once the page moves under it: at the top the header is clear, so the aura behind the title runs up to the edge with no band ('essa quebra com o header não ficou legal') */ .hd::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--page) 55%,transparent);-webkit-backdrop-filter:blur(var(--s-12)) saturate(1.1);backdrop-filter:blur(var(--s-12)) saturate(1.1);opacity:0;transition:opacity 240ms var(--ease);pointer-events:none} .hd.is-stuck::before{opacity:1} .frame>.hd{position:sticky;z-index:5} /* beats the frame's own `>*` rule, which sets every child relative */ .brand{flex:none;font:var(--f-subtitle);letter-spacing:var(--tr-subtitle);color:var(--ink);white-space:nowrap;transform-origin:0 50%;transform:scale(calc(1 - .125 * var(--shrink,0)))} .brand span{color:var(--tertiary)} /* SearchField md (the redesigned spec): 40 high, rounded 16, padding 12, gap 8, glyph 20, on surface/1; the edge is border/subtle at rest, border/interactive on hover, and on focus the accent edge with its 4 halo */ .search{flex:1 1 0;max-width:var(--search-w);margin:0 auto;min-width:0;display:flex;align-items:center;gap:var(--sf-gap);height:var(--h-md);padding:0 var(--sf-pr) 0 var(--sf-pl);border-radius:var(--rd-md);background:var(--white);box-shadow:inset 0 0 0 1px var(--sf-edge);transition:box-shadow 160ms var(--ease)} .search:hover{box-shadow:inset 0 0 0 1px var(--sf-edge-hover)} .search svg{flex:none;color:var(--tertiary)} .search input{flex:1;min-width:0;font:var(--f-supporting);color:var(--ink);outline:none} .search input::placeholder{color:var(--tertiary)} .search:focus-within{box-shadow:inset 0 0 0 1px var(--sf-focus),0 0 0 var(--sf-halo-w) var(--sf-halo)} .search:focus-within svg{color:var(--sf-focus)} .right{flex:none;display:flex;align-items:center;gap:var(--s-24)} .lang{display:flex;gap:var(--s-8);font:var(--f-supporting)} .lang button{position:relative;color:var(--tertiary);font-weight:500} .lang button::after{content:"";position:absolute;inset:calc(-1 * var(--s-12)) calc(-1 * var(--s-4))} /* a finger-sized target (the word is 13–16 wide): 44 tall, meeting its neighbour across the 8 gap, the row unchanged */ .lang button[aria-pressed="true"]{color:var(--ink);font-weight:600} /* Button: md 40, rounded 16 (pill 20), padding 16, label supporting at 600 */ /* Button (the DS component): label at 500; hover quick in, slow out (ui.hover); the primary takes the INVERTED veil over its ink, the secondary drops its outline on hover and takes the cream a step deeper */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);height:var(--h-md);padding:0 var(--btn-px);border-radius:var(--rd-md);font:var(--f-supporting);font-weight:500;white-space:nowrap;transition:background-image var(--hover-out),background-color var(--hover-out),box-shadow var(--hover-out),transform var(--press-out)} .btn:hover{transition:background-image var(--hover-in),background-color var(--hover-in),box-shadow var(--hover-in),transform var(--press-out)} .btn:active{transform:scale(var(--press))} .btn--primary{background-color:var(--action);color:var(--on-action)} .btn--primary:hover{background-image:linear-gradient(var(--hover-inv),var(--hover-inv))} .btn--primary:active{background-image:linear-gradient(var(--pressed-inv),var(--pressed-inv))} .btn--secondary{box-shadow:inset 0 0 0 1px var(--secondary-border);color:var(--ink)} .btn--secondary:hover{background-color:var(--page-hover);box-shadow:inset 0 0 0 1px transparent} .btn--secondary:active{background-color:var(--page-hover);background-image:linear-gradient(var(--hover),var(--hover));box-shadow:inset 0 0 0 1px transparent} .btn:disabled,.btn:disabled:hover{background:var(--disabled-bg);color:var(--disabled-label);box-shadow:none;transform:none;cursor:default} .btn--pill{border-radius:var(--pl-md)} /* ---------- PAGE CONTENT ---------- */ .content{display:flex;flex-direction:column;gap:var(--s-48)} .banner{padding:var(--s-48) var(--gutter) 0} .banner__in{max-width:var(--banner-w);display:flex;flex-direction:column;gap:var(--s-24)} .banner__txt{display:flex;flex-direction:column;gap:var(--s-12)} .banner h1{margin:0;font:var(--f-display);letter-spacing:var(--tr-display);color:var(--ink)} .banner h1 .tq{font-style:normal;color:var(--toqi-core)} /* the name as the brand writes it: lowercase, in Toqi's own colour */ .banner p{max-width:32em;font:var(--f-banner-sub);color:var(--secondary);text-wrap:balance} /* 18/28, between body and subtitle ('aumenta um pouco'); balanced lines, so no word is left alone on the last one */ .banner__cta{display:flex;flex-wrap:wrap;gap:var(--s-12)} /* THE STEP-BY-STEP — the banner's right side plays the subtitle's three steps with the real parts: a charm card is tapped, its prompt lands in the Composer, one detail is changed, it is sent, Toqi thinks (their goo mark beside the typing bubble) and answers — their face takes the mark's place. No frame around it: the scene floats on Toqi's light. Transform, opacity and blur only; every curve is a motion token (enter, spring, settle, arrive). Nothing moves in a straight line at one speed except the progress bars. */ /* the scene takes the text's own height and no more: the steps line up with the title, the stage ends on the buttons' bottom edge, and the cards below keep the same breath they have on the left */ .banner{display:grid;grid-template-columns:minmax(0,var(--banner-w)) var(--demo-w);justify-content:space-between;align-items:stretch;column-gap:var(--s-48)} .demo{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-8)} /* steps 44 + 8 + stage 168 = the text's 220 */ .demo__stage{position:relative;height:var(--demo-h)} .demo.reset *,.demo.reset *::before,.demo.reset *::after{transition:none!important;animation:none!important} /* scene 1 · the charm card, a small twin of the list's card; it rises on the spring, its lines follow */ .d-card{position:absolute;left:50%;top:50%;width:var(--demo-card-w);display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-20);border-radius:var(--r-24);background:var(--white);box-shadow:inset 0 0 0 1px var(--rim),var(--el2);opacity:0;transform:translate(-50%,-50%) translateY(var(--s-24)) scale(.94);transition:opacity 320ms var(--enter),transform 640ms var(--spring)} .d-card>*{opacity:0;transform:translateY(var(--s-6));transition:opacity 360ms var(--enter),transform 480ms var(--enter);transition-delay:calc(120ms + var(--i) * 60ms)} .d-card b{font:var(--f-label-display);color:var(--ink)} .d-card p{font:var(--f-supporting);color:var(--secondary)} .d-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-16)} /* two groups: the title with its line (4 apart), then the action (20 below) */ .d-try{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;height:var(--h-sm);padding:0 var(--btn-px-sm);border-radius:var(--r-pill);background:var(--action);color:var(--on-action);font:var(--f-supporting);font-weight:600;transition:transform 360ms var(--spring),background-color 192ms var(--enter)} .d-try.hov{background:var(--action-hover)} /* THE TAP, made visible without a finger: the press sinks deeper than a real one (a scene has to read from across the room), a sheen of light crosses the pill, and on release it springs past its size and back. The button keeps its colour and its words (no colour or label change) */ .d-try::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,var(--halo) 50%,transparent 70%);transform:translateX(-120%)} .d-try.lit::after{animation:sheen 640ms var(--enter) 80ms} @keyframes sheen{to{transform:translateX(120%)}} /* and the whole card gives under the tap, a soft glow beneath it */ .demo.card-in.card-press .d-card{transform:translate(-50%,-50%) scale(.97);box-shadow:inset 0 0 0 1px var(--l5),var(--el2);transition:transform 360ms var(--spring),box-shadow 360ms var(--enter)} .demo.card-in .d-card{opacity:1;transform:translate(-50%,-50%)} .demo.card-in .d-card>*{opacity:1;transform:none} /* tapped, the card hands its prompt down: it sinks toward the composer and dissolves */ .demo.card-out .d-card{opacity:0;transform:translate(-50%,-50%) translateY(var(--s-32)) scale(.92);filter:blur(var(--s-4));transition:opacity 280ms var(--enter),transform 420ms var(--enter),filter 420ms var(--enter)} .demo.card-out .d-card>*{transition-delay:0ms} /* scene 2 · the Composer: it settles in with weight, and the prompt lands in it word by word */ .d-composer{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:var(--composer-gap);padding:var(--composer-p) var(--composer-p) var(--composer-p) var(--s-16);border-radius:var(--composer-r);background:var(--white);box-shadow:inset 0 0 0 1px var(--rim),var(--el2);opacity:0;transform:translateY(var(--s-32));transition:opacity 320ms var(--enter),transform var(--settle-ms) var(--settle)} .d-field{flex:1;min-width:0;padding:var(--s-6) 0;font:var(--f-supporting);color:var(--ink)} .d-field .wd{display:inline-block;white-space:pre;opacity:0;filter:blur(var(--s-4));transform:translateY(var(--s-6))} .demo.comp-in .d-field .wd{opacity:1;filter:none;transform:none;transition:opacity 320ms var(--enter),filter 420ms var(--enter),transform 480ms var(--spring);transition-delay:calc(200ms + var(--i) * 22ms)} .d-send{position:relative;flex:none;display:grid;place-items:center;overflow:hidden;width:var(--h-sm);height:var(--h-sm);border-radius:var(--r-pill);background:var(--action);color:var(--on-action);transition:transform 360ms var(--spring),background-color 240ms var(--enter)} .d-send svg{width:var(--s-16);height:var(--s-16)} /* SEND, made visible: the button sinks, the arrow hops — a little up and out, a fresh one up from just below — and a sheen crosses it */ .d-send.go svg{animation:fly 480ms var(--enter)} @keyframes fly{0%{transform:none}35%{transform:translateY(-45%);opacity:0}36%{transform:translateY(45%);opacity:0}100%{transform:none;opacity:1}} /* a short hop, not a launch ('mais sutil') */ /* the same sheen as the card's button crosses it as it is pressed */ .d-send::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,var(--halo) 50%,transparent 70%);transform:translateX(-120%)} .d-send.go::after{animation:sheen 640ms var(--enter) 80ms} /* and the MESSAGE visibly leaves: the words lift out of the field, one after another, blurring as they go up — the same words that, a moment later, arrive as the sent bubble */ .demo.sending .d-field .wd{opacity:0;transform:translateY(calc(-1 * var(--s-16)));filter:blur(var(--s-2));transition:opacity 240ms var(--enter),transform 360ms var(--enter),filter 360ms var(--enter);transition-delay:calc(var(--i) * 14ms)} .demo.comp-in .d-composer{opacity:1;transform:none} .demo.comp-out .d-composer{opacity:0;transform:translateY(var(--s-24)) scale(.98);transition:opacity 240ms var(--enter),transform 360ms var(--enter)} /* the composer carries the SAME light as the tapped card ('pra padronizar'): a lavender rim and a soft glow of their colour beneath it */ .demo.comp-in .d-composer{box-shadow:inset 0 0 0 1px var(--l5),var(--el2)} /* THE AURA is Toqi's — it belongs to their ANSWER: a turning conic of their lavender, blurred behind the result as a glow, and cut to a 1.5 ring that travels round its edge (2 · .75: the ring's declared hairline). The glow is its own layer in the answer's grid cell, so it takes the answer's box */ @property --turn{syntax:'';initial-value:0deg;inherits:true} .d-aura,.d-answer::before,.d-steps em::after,.ask__box::before{--ring:conic-gradient(from var(--turn),transparent 0deg,var(--l7) 50deg,var(--toqi-core) 100deg,var(--toqi-edge) 150deg,transparent 210deg,var(--l6) 280deg,transparent 330deg)} .d-aura{justify-self:stretch;align-self:stretch;border-radius:var(--bubble-r) var(--bubble-r) var(--bubble-r) var(--bubble-tail);background:var(--ring);filter:blur(var(--s-16));opacity:0;transform:scale(.92);transform-origin:0 100%;transition:opacity 640ms var(--enter) 200ms,transform 560ms var(--spring);animation:turn 4s linear infinite;pointer-events:none} .d-answer::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:calc(var(--s-2) * .75);background:var(--ring);animation:turn 4s linear infinite;opacity:0;transition:opacity 640ms var(--enter) 200ms;pointer-events:none; -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0)} @keyframes turn{to{--turn:360deg}} .demo.reply .d-aura{opacity:.55;transform:none} .demo.reply .d-answer::before{opacity:1} .demo.out .d-aura{opacity:0;transition:opacity 360ms var(--enter)} /* the detail: selected the way text is selected (the tint sweeps in from the left), then typed over — each letter pops in, and the fresh word keeps a tint that dissolves slowly */ .w{position:relative;display:inline-block;white-space:pre} .w .hl{position:absolute;inset:0 calc(-1 * var(--s-2));border-radius:var(--r-4);background:var(--l4);transform:scaleX(0);transform-origin:0 50%;transition:transform 280ms var(--enter),opacity 960ms var(--enter)} .w .old,.w .new{position:relative} .w .new i{font-style:normal;display:inline-block;animation:ch 200ms var(--spring) both} @keyframes ch{from{opacity:0;transform:translateY(var(--s-4)) scale(.8)}} .demo.sel .w .hl,.demo.typing .w .hl{transform:none} .demo.fresh .w .hl{transform:none;opacity:0;background:var(--l2)} .caret{display:none;position:relative;width:1px;height:var(--s-16);margin-left:1px;vertical-align:text-bottom;background:var(--l8)} .demo.typing .caret{display:inline-block;animation:caret 1s steps(1) infinite} @keyframes caret{50%{opacity:0}} /* scene 3 · the conversation. The sent bubble rises out of where the composer was, then glides up as Toqi's row arrives under it; Toqi thinks (the goo mark + the typing dots), then their face takes the mark's place and the answer writes itself in, word by word, the chip popping last */ .d-chat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-16);pointer-events:none} /* each voice has its face: the user's on the right of their bubble, Toqi's on the left of theirs */ .d-av{flex:none;display:block;width:var(--h-sm);height:var(--h-sm);border-radius:var(--r-pill)} .d-me{align-self:flex-end;display:flex;flex-direction:row-reverse;align-items:flex-end;gap:var(--mark-gap);max-width:calc(100% - var(--bubble-gutter));transform-origin:100% 100%;opacity:0;transform:translateY(calc(var(--lift) + var(--s-16))) scale(.9);transition:opacity 320ms var(--enter),transform 560ms var(--spring)} .d-user{padding:var(--bubble-py) var(--bubble-px);border-radius:var(--bubble-r) var(--bubble-r) var(--bubble-tail) var(--bubble-r);background:var(--user-bubble);font:var(--f-supporting);color:var(--ink)} .demo.sent .d-me{opacity:1;transform:translateY(var(--lift))} .demo.think .d-me{transform:none;transition:opacity 320ms var(--enter),transform var(--settle-ms) var(--settle)} .demo.clear .d-me{opacity:0;transform:translateY(calc(-1 * var(--s-24)));transition:opacity 240ms var(--enter),transform 320ms var(--enter)} .d-toqi{display:flex;align-items:flex-end;gap:var(--mark-gap);max-width:calc(100% - var(--bubble-gutter))} .d-slot{position:relative;flex:none;display:grid;place-items:center;width:var(--h-sm);height:var(--h-sm)} .d-mark{grid-area:1/1;width:var(--mark);height:var(--mark);overflow:visible;opacity:0;transform:scale(.4);transition:opacity 240ms var(--enter),transform 480ms var(--spring)} .d-mark circle{fill:var(--accent-solid)} .d-face{grid-area:1/1;opacity:0;transform:scale(.5);transition:opacity 280ms var(--enter),transform 560ms var(--spring)} .demo.reply .d-face{opacity:1;transform:none;animation:breathe 4s var(--enter) 600ms infinite} /* TOQI, ALIVE — not only the outside: inside their circle their light rises as they arrive and then drifts on its own; their eyes open a beat after they land (squeezed shut, then a little overshoot) and blink now and then. The mark collapses as they bloom in its place */ .d-tq svg{display:block;width:100%;height:100%} .d-tq .tq-glow,.d-tq .tq-eyes{transform-box:fill-box;transform-origin:50% 50%} .demo.reply .d-tq .tq-glow{animation:tqrise 900ms var(--enter) both,tqdrift 6s ease-in-out 900ms infinite alternate} @keyframes tqrise{from{transform:translateY(40%);opacity:0}} @keyframes tqdrift{from{transform:none}to{transform:translate(-10%,-8%)}} .demo.reply .d-tq .tq-eyes{animation:tqopen 560ms var(--spring) 220ms both,tqblink 4.4s ease-in-out 2.2s infinite} @keyframes tqopen{from{transform:scaleY(.1)}} @keyframes tqblink{0%,90%,100%{transform:none}94%{transform:scaleY(.12)}} /* THE USER, ALIVE — three layers, each with its own job, so nothing moves stiffly: 1 · the circle lands with squash and stretch (wide and low, then tall, then round) on the spring; 2 · the face inside arrives a beat later, tilted and a touch large, and settles — then keeps a small living bob, never still; 3 · when Toqi starts thinking, the face TURNS TO LOOK at them (a tilt toward them, about its own centre), the way you watch someone answer you */ .d-uw{position:relative;flex:none;width:var(--h-sm);height:var(--h-sm)} .d-uav{display:block;width:100%;height:100%;border-radius:var(--r-pill);overflow:hidden;transform:scale(.4);transform-origin:50% 100%} .d-look{display:block;width:100%;height:100%;transition:transform 720ms var(--spring)} .d-uav img{display:block;width:100%;height:100%} .demo.sent .d-uav{transform:none;animation:usquash 640ms var(--enter) both} @keyframes usquash{0%{transform:scale(.4)}45%{transform:scale(1.1,.9)}70%{transform:scale(.95,1.06)}100%{transform:none}} .demo.sent .d-uav img{animation:uarrive 760ms var(--spring) 160ms both,ubob 2.6s ease-in-out 1s infinite} @keyframes uarrive{from{transform:rotate(-14deg) scale(1.14)}} @keyframes ubob{0%,100%{transform:none}30%{transform:rotate(4deg)}65%{transform:rotate(-3deg)}} .demo.think .d-look{transform:rotate(-10deg)} /* about its own centre: the face stays centred in the circle */ /* both faces LEAVE on a scale too: the user's shrinks away as the chat scrolls, Toqi's as the scene ends */ .demo.clear .d-uav{animation:faceout 320ms var(--enter) both} .demo.out .d-face{animation:faceout 360ms var(--enter) both} @keyframes faceout{from{transform:none;opacity:1}to{transform:scale(.4);opacity:0}} @keyframes breathe{50%{transform:scale(1.05)}} .d-card .author .d-av{width:var(--s-20);height:var(--s-20)} .d-stack{position:relative;flex:1;min-width:0;display:grid;align-items:end;justify-items:start} .d-stack>*{grid-area:1/1} .d-typing,.d-answer{padding:var(--bubble-py) var(--bubble-px);border-radius:var(--bubble-r) var(--bubble-r) var(--bubble-r) var(--bubble-tail);background:var(--toqi-bubble);box-shadow:var(--el2);transform-origin:0 100%} .d-typing{display:flex;gap:var(--dot-gap);opacity:0;transform:translateY(var(--s-8)) scale(.85);transition:opacity 240ms var(--enter),transform 480ms var(--spring)} .d-typing i{width:var(--dot);height:var(--dot);border-radius:var(--r-pill);background:var(--tertiary);margin:var(--s-6) 0;animation:dot var(--dot-cycle) var(--ease) infinite} .d-typing i:nth-child(2){animation-delay:var(--dot-stagger)}.d-typing i:nth-child(3){animation-delay:calc(2 * var(--dot-stagger))} @keyframes dot{0%,40%,100%{transform:none;opacity:.5}20%{transform:translateY(calc(-1 * var(--dot-rise)));opacity:1}} /* THE RESULT — not a line of text: what Toqi made. Their one line, the week's first dinners on a pale panel (each day in its own tag), and the foot: the repeat chip and the list, ready. Until it arrives it takes no room, so the typing bubble sits right under the sent one */ .d-answer{position:absolute;left:0;bottom:0;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-8);font:var(--f-supporting);color:var(--ink);opacity:0;transform:scale(.92);transition:opacity 240ms var(--enter),transform 560ms var(--spring)} .demo.reply .d-answer{position:relative} .d-plan{align-self:stretch;display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-8);border-radius:var(--r-12);background:var(--l2)} .d-row{display:flex;align-items:center;gap:var(--s-8);min-width:0} .d-row b{flex:none;display:grid;place-items:center;min-width:var(--s-32);height:var(--s-20);padding:0 var(--s-6);border-radius:var(--r-6);background:var(--white);font:var(--f-caption);font-weight:600;color:var(--l10)} .d-row span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .d-foot{align-self:stretch;display:flex;align-items:center;gap:var(--s-8);min-width:0} .d-note{display:inline-flex;align-items:center;gap:var(--s-4);min-width:0;font:var(--f-caption);color:var(--secondary);white-space:nowrap} .d-note svg{flex:none;width:var(--s-12);height:var(--s-12);color:var(--l8)} .demo.reply .d-plan{animation:panel 520ms var(--spring) 240ms both} @keyframes panel{from{opacity:0;transform:translateY(var(--s-8)) scale(.96)}} .demo.reply .d-row{animation:row 520ms var(--spring) both;animation-delay:calc(420ms + var(--i) * 140ms)} @keyframes row{from{opacity:0;transform:translateX(calc(-1 * var(--s-12)))}} .demo.reply .d-row b{animation:pop 480ms var(--spring) both;animation-delay:calc(480ms + var(--i) * 140ms)} .demo.reply .d-note{animation:word 480ms var(--enter) 1040ms both} .d-answer .wd{display:inline-block;white-space:pre} .d-answer .k-chip{box-shadow:none;background:var(--l4)} /* two steps over the white bubble (step 2 read as the bubble itself), one over the plan panel */ .demo.think .d-mark{opacity:1;transform:none} .demo.think .d-typing{opacity:1;transform:none} .demo.reply .d-mark{opacity:0;transform:scale(.4);transition:opacity 200ms var(--enter),transform 280ms var(--enter)} .demo.reply .d-typing{opacity:0;transform:scale(.9);transition:opacity 160ms var(--enter),transform 240ms var(--enter)} .demo.reply .d-answer{opacity:1;transform:none;transition-delay:80ms} .demo.reply .d-answer .wd{animation:word 480ms var(--enter) both;animation-delay:calc(160ms + var(--i) * 48ms)} @keyframes word{from{opacity:0;filter:blur(var(--s-4));transform:translateY(var(--s-4))}} .demo.reply .d-answer .k-chip{animation:pop 560ms var(--spring) 920ms both} @keyframes pop{from{opacity:0;transform:scale(.7)}} .demo.out .d-chat>*{opacity:0;transform:translateY(calc(-1 * var(--s-12)));filter:blur(var(--s-2));transition:opacity 480ms var(--enter),transform 600ms var(--enter),filter 600ms var(--enter)} .is-press{transform:scale(calc(var(--press) - .08));transition:transform var(--press-in)!important} /* the scene's press: deeper than the app's .96, so it reads at a glance */ /* the three steps over the scene — the subtitle, told in order; the bar fills while its step plays */ .d-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-12);margin:0;padding:0;list-style:none} .d-steps li{display:flex;flex-direction:column;gap:var(--s-4);font:var(--f-supporting);font-weight:500;color:var(--tertiary);transition:color 480ms var(--enter)} .d-steps i{display:block;height:var(--s-2);border-radius:var(--r-pill);background:var(--l4);overflow:hidden} /* 2: a hairline track, the declared exception */ .d-steps b{display:block;height:100%;background:var(--l8);transform:scaleX(0);transform-origin:0 50%} /* the number leads each bar ('coloca um 1 2 3'), a stepper: a small round tag, Toqi's colour once its step is reached; the label keeps the column's full width under it, so it stays on one line */ .d-steps .d-track{display:flex;align-items:center;gap:var(--s-8)} .d-steps .d-track i{flex:1} .d-steps em{position:relative;isolation:isolate;flex:none;display:grid;place-items:center;width:var(--s-20);height:var(--s-20);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--l5);font:var(--f-caption);font-style:normal;font-weight:600;color:var(--tertiary);transition:color 240ms var(--enter) 120ms,box-shadow 240ms var(--enter)} /* the tag says where the scene is: ahead, an outlined number; NOW, the number on Toqi's colour (a quiet fade); DONE, the tick is DRAWN. The number lifts away (up 4, into a blur, out in 200ms) while the tick's own stroke is drawn on — short leg, then long — as a pen would (dash offset 1 → 0, 320ms ease-in-out, from 60ms); the round gives under the mark (.88 back to 1 on the spring). The tick is the family's LINE glyph at a heavier pen than the system's 1.5, on the designer's call ('o stroke do check pode engrossar'): 2 real px in a 12 box = 4 viewBox units — the one declared exception, kept here */ .d-steps em{transition:background-color 320ms var(--enter),box-shadow 320ms var(--enter),color 320ms var(--enter)} .d-steps li.now em,.d-steps li.done em{background:var(--toqi-core);box-shadow:none;color:var(--white)} .d-steps em span{grid-area:1/1;display:grid;place-items:center} .d-steps em span:first-child{transition:opacity 200ms var(--enter),transform 240ms var(--enter),filter 240ms var(--enter)} .d-steps em svg{width:var(--s-12);height:var(--s-12)} .d-steps em svg path{stroke-width:calc(var(--s-2) * 2);stroke-dasharray:1;stroke-dashoffset:1} .d-steps li.done em{animation:give 480ms var(--spring)} @keyframes give{from{transform:scale(.88)}} .d-steps li.done em span:first-child{opacity:0;transform:translateY(calc(-1 * var(--s-4)));filter:blur(var(--s-2))} .d-steps li.done em svg path{stroke-dashoffset:0;transition:stroke-dashoffset 320ms cubic-bezier(.65,0,.35,1) 60ms} /* THE STEP IN PROGRESS wears Toqi's aura, the same one their answer wears: a tiny turning ring of their lavender travels round the tag (just outside it, 2 off) with their glow under it — the scene is working on this one. As the step starts, its number RISES into the tag out of a blur; when it is done the ring lets go and the tick is drawn */ .d-steps em::after{content:"";position:absolute;inset:calc(-1 * var(--s-2));border-radius:var(--r-pill);padding:calc(var(--s-2) * .75);background:var(--ring);animation:turn 2.4s linear infinite;opacity:0;transform:scale(.7);transition:opacity 400ms var(--enter),transform 560ms var(--spring);pointer-events:none; -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0)} .d-steps li.now em{box-shadow:0 0 var(--s-12) var(--l6)} .d-steps li.now em::after{opacity:1;transform:none} .d-steps li.now em span:first-child{animation:rise 520ms var(--spring) 80ms both} @keyframes rise{from{opacity:0;transform:translateY(70%);filter:blur(var(--s-2))}} .d-steps li.now{color:var(--ink)} .d-steps li.done{color:var(--secondary)} .d-steps li.done b{transform:none} .section{display:flex;flex-direction:column;gap:var(--s-20)} .section__hd{display:flex;flex-direction:column;gap:var(--s-12);padding:0 var(--gutter)} .section__hd h2{margin:0;font:var(--f-subheading);letter-spacing:var(--tr-subheading);color:var(--ink)} /* THE FOUR KINDS: a full-bleed picture — one colour (Toqi's lavender scale), a soft gradient from its pale step into white, a faint dot grid, and UI fragments in that colour (translucent and solid) — then a short name and one line. surface/1 on elevation 1, radius 24, no box inside. */ .kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-16);padding:0 var(--gutter)} .kind{position:relative;display:flex;flex-direction:column;border-radius:var(--r-24);background:var(--white);box-shadow:inset 0 0 0 1px var(--rim),var(--el1);text-align:left;overflow:hidden; transform:translateY(var(--ty,0px));transition:transform 320ms var(--ease-io),box-shadow 320ms var(--ease-io)} /* only the lift — no tilt: following the pointer restarted the transition on every move and read as stiff */ /* THE HOVER, alive: the card lifts softly (ease in and out, one elevation step), a soft light follows the pointer across it, and it takes the tapped card's glow. Inside, the picture rises a touch and its own fragment PLAYS — the bars grow, the day hops and the repeat turns, the apps lean out from Toqi, the price line draws itself in. Off a fine pointer it simply lifts */ .kind:hover{--ty:calc(-1 * var(--s-4));box-shadow:inset 0 0 0 1px var(--rim),var(--el2)} /* a soft lift: the system's next elevation step, quick and eased in and out ('muito duro') */ .kind__art>:not(.k-abs){transition:transform 320ms var(--ease-io)} .kind:hover .kind__art>:not(.k-abs){transform:translateY(calc(-1 * var(--s-4))) scale(1.03)} .k-bars i{transform-origin:50% 100%} .kind:hover .k-bars i{animation:barup 720ms var(--spring) both} .kind:hover .k-bars i:nth-child(2){animation-delay:60ms}.kind:hover .k-bars i:nth-child(3){animation-delay:120ms} .kind:hover .k-bars i:nth-child(4){animation-delay:180ms}.kind:hover .k-bars i:nth-child(5){animation-delay:240ms} @keyframes barup{from{transform:scaleY(.55)}} .kind:hover .k-days span.on{animation:hop 640ms var(--spring) 120ms} @keyframes hop{35%{transform:translateY(calc(-1 * var(--s-6)))}} .k-week .k-chip svg{transition:transform 900ms var(--spring)} .kind:hover .k-week .k-chip svg{transform:rotate(360deg)} /* with your apps: the apps CHECK IN, one after another round the arc, left to right — each gives a small pop — while a light runs along the outer band with them; when the last one is in, the Toqi pill answers with its own pop and glow: everything connected */ .kind:hover .k-apps .tile{animation:checkin 520ms var(--spring) both;animation-delay:calc(var(--j) * 110ms)} @keyframes checkin{40%{scale:1.16}} .k-apps .flow{fill:none;stroke:var(--toqi-core);stroke-width:6;stroke-linecap:round;stroke-dasharray:.16 .84;stroke-dashoffset:.16;opacity:0} .kind:hover .k-apps .flow{animation:flow 760ms cubic-bezier(.45,0,.25,1) both} @keyframes flow{0%{opacity:0;stroke-dashoffset:.16}15%{opacity:.7}85%{opacity:.7}100%{opacity:0;stroke-dashoffset:-.84}} /* their colour, so it reads on the pale ground */ .k-apps .k-hub{transition:box-shadow 400ms var(--enter) 440ms} .kind:hover .k-apps .k-hub{animation:checkin 560ms var(--spring) 440ms both;box-shadow:0 0 0 var(--s-4) var(--halo),0 0 var(--s-32) var(--toqi-core)} .kind:hover .k-watch .line{animation:draw 1100ms cubic-bezier(.65,0,.35,1) both} .kind:hover .k-watch .area{animation:fadein 900ms var(--enter) 300ms both} .kind:hover .k-watch .k-chip{animation:pop 560ms var(--spring) 700ms both} @keyframes draw{from{stroke-dashoffset:1}} @keyframes fadein{from{opacity:0}} .k-watch .line{stroke-dasharray:1} .kind__art{position:relative;height:var(--kind-art);display:grid;place-items:center;overflow:hidden; background:var(--l2)} /* FLAT, the palest lavender ('muito gradiente… flat mesmo'); only its last 48 melt into the card, below */ .kind__art>*{position:relative} .kind__art>.k-abs{position:absolute} /* the picture melts into the card: its last 48 fade into the card's white, so there is no edge between picture and text ('não é pra ter essa quebra imagem card') */ .kind__art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--s-48);background:linear-gradient(180deg,transparent,var(--white));pointer-events:none;z-index:1} .kind__txt{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-16) var(--s-20) var(--s-20)} .kind__txt b{font:var(--f-label-display);color:var(--ink)} .kind__txt span{font:var(--f-supporting);color:var(--secondary)} /* THE PICTURES speak Toqi's identity (after the Figma, 179:47048) on the first pale gradient: frosted shapes behind, their colour only where something glows (no blurred blot at the base), and only the information in focus — the chips, the apps — sharp and white. Depth comes from blur, not lines. No eyes here: the style, not the character. Blur radii are space steps (2 · 4 · 16). */ .k-frost{border-radius:var(--r-16);background:linear-gradient(180deg,var(--l4),var(--white));filter:blur(var(--s-2));opacity:.9} /* fragments in focus: a white chip on elevation 2 */ .k-chip{display:inline-flex;align-items:center;gap:var(--s-6);height:var(--s-24);padding:0 var(--s-8);border-radius:var(--r-pill);background:var(--white);box-shadow:var(--el2);font:var(--f-caption);font-weight:500;color:var(--l11);white-space:nowrap} .k-chip svg{width:var(--s-12);height:var(--s-12);color:var(--l8)} /* 1 · trending: frosted bars, the top one glowing in their colour, its label in focus above */ .k-bars{display:flex;align-items:flex-end;gap:var(--s-8);height:var(--k-bars-h);margin-top:var(--s-24)} .k-bars i{position:relative;width:var(--s-20)} .k-bars i::before{content:"";position:absolute;inset:0;border-radius:var(--r-6) var(--r-6) 0 0;background:linear-gradient(180deg,var(--l6),var(--l4) 60%,transparent);filter:blur(var(--s-2))} .k-bars i.on::before{background:linear-gradient(180deg,var(--toqi-core),var(--l7) 70%,transparent)} .k-bars i.on .k-chip{position:absolute;bottom:calc(100% + var(--s-8));left:50%;transform:translateX(-50%)} /* 2 · on repeat: the week on a frosted strip, one day glowing every week */ .k-week{display:flex;flex-direction:column;align-items:center;gap:var(--s-12)} .k-days{position:relative;display:flex;gap:var(--s-6);padding:var(--s-8)} .k-days::before{content:"";position:absolute;inset:0;border-radius:var(--r-pill);background:var(--white);box-shadow:var(--el1);filter:blur(var(--s-2))} .k-days span{position:relative;display:grid;place-items:center;width:var(--s-24);height:var(--s-24);border-radius:var(--r-pill);font:var(--f-caption);font-weight:500;color:var(--l10)} .k-days span.on{background:var(--toqi-core);color:var(--white);box-shadow:0 0 var(--s-16) var(--toqi-core)} /* 3 · with your apps: soft white bands of light, the apps in focus on them, Toqi glowing at the centre */ .k-apps{position:absolute;inset:0;overflow:hidden} .k-apps .stage{position:absolute;left:50%;bottom:0;width:var(--k-apps-w);height:var(--kind-art);transform:translateX(-50%)} .k-apps svg{position:absolute;inset:0;width:100%;height:100%;filter:blur(var(--s-4))} .k-apps .band{fill:none;stroke:var(--l6);opacity:.7} .k-apps .tile{position:absolute;display:grid;place-items:center;width:var(--h-md);height:var(--h-md);transform:translate(-50%,-50%);border-radius:50%;background:var(--white);box-shadow:var(--el2)} /* the logos are balanced by what is DRAWN, not by the file's box: Gmail, Calendar and WhatsApp carry their own margin (the mark fills ~2/3 of the file), Notion is drawn edge to edge. 24 and 16 both land every mark at ~16 visible */ .k-apps .tile img{width:var(--s-24);height:var(--s-24)} .k-apps .tile img.bleed{width:var(--s-16);height:var(--s-16)} .k-apps .hub{position:absolute;left:50%;transform:translate(-50%,-50%)} .k-hub{display:inline-flex;align-items:center;height:var(--s-24);padding:0 var(--s-12);border-radius:var(--r-pill);background:var(--toqi-core);color:var(--white);font:var(--f-caption);font-weight:600;box-shadow:0 0 0 var(--s-4) var(--halo),0 0 var(--s-24) var(--toqi-core)} /* 4 · keep an eye: the price on a frosted sheet, coming down to its target */ .k-watch{position:relative;width:var(--k-arc-w);height:var(--k-bars-h);margin-top:var(--s-16)} .k-watch>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--toqi-core)} .k-watch .area{fill:url(#kfade)} .k-watch .line{fill:none;stroke:var(--toqi-core);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .k-watch .target{stroke:var(--l8);stroke-width:1;stroke-dasharray:3 3;opacity:.6} .k-watch .dot{fill:var(--white);stroke:var(--toqi-core);stroke-width:2} .k-watch .k-chip{position:absolute;right:0;top:calc(-1 * var(--s-8))} #list{scroll-margin-top:calc(var(--s-64) + var(--s-16))} /* a jump to the list lands under the held header, not behind it */ .tab[hidden]{display:none} /* A KIND'S PAGE: the banner's place and voice (display title, 18/28 line), a way back above it, the count below; then its charms. No picture (the kind's drawing alone on the page did not work) */ .kpage{padding:var(--s-48) var(--gutter) 0} .kpage__txt{display:flex;flex-direction:column;align-items:flex-start} .kpage__back{margin:0 0 var(--s-24) calc(-1 * var(--btn-px-icon-sm))} .kpage__back:hover{background:var(--page-hover)} /* on the cream: the cream a step deeper */ .kpage h1{margin:0;font:var(--f-display);letter-spacing:var(--tr-display);color:var(--ink)} .kpage p{max-width:36em;margin-top:var(--s-12);font:var(--f-banner-sub);color:var(--secondary);text-wrap:balance} /* Trending's two rows (the top three, the rest): a small head, then the cards */ .ksec{display:flex;flex-direction:column;gap:var(--s-20)} .ksec__hd{display:flex;align-items:center;gap:var(--s-12);padding:0 var(--gutter)} .ksec__hd h2{margin:0;font:var(--f-title);letter-spacing:var(--tr-title);color:var(--ink)} /* the way on: the other three kinds, a row of three */ .kinds--3{grid-template-columns:repeat(3,minmax(0,1fr))} /* THE FILTERS are a row of select buttons, as drawn (not tabs): Button sm — 32 high, rounded 12, padding 12, label supporting ('menor'). The chosen one is filled with the primary ink (button/primary/*, as a ToggleButton in its ink tone); the others are bare tertiary labels that take the hover veil. */ .tabs{display:flex;flex-wrap:wrap;gap:var(--s-8)} /* THE FILTERS ROW: the tags, and at its end the ORDER — a ghost Button sm (the tags' idle look) with the Selector's chevron, opening the Try menu's popover with one choice ticked */ .filters{display:flex;align-items:flex-start;gap:var(--s-16)} .filters .tabs{flex:1;min-width:0} .sort{flex:none;display:inline-flex;align-items:center;gap:var(--s-4);height:var(--h-sm);padding:0 var(--s-8) 0 var(--btn-px-sm);border-radius:var(--rd-sm);font:var(--f-supporting);font-weight:500;color:var(--secondary);transition:background-color var(--hover-out),color var(--hover-out),transform var(--press-out)} .sort:hover,.sort[aria-expanded="true"]{background-color:var(--page-hover);color:var(--ink);transition:background-color var(--hover-in),color var(--hover-in),transform var(--press-out)} .sort:active{transform:scale(var(--press));transition:background-color var(--hover-in),color var(--hover-in),transform var(--press-in)} .sort svg{width:var(--s-16);height:var(--s-16);transition:transform 200ms var(--enter)} .sort[aria-expanded="true"] svg{transform:rotate(180deg)} /* The filter row: ToggleButton sm, ink tone, chosen = the ink fill with its label at 600 (the 600 width is reserved by the ::after ghost, so choosing never nudges the row). Unchosen it is plain text, NO outline (2026-10-04: the outlined rest read as a row of buttons) — the cream deepens under the pointer */ .tab{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:var(--h-sm);padding:0 var(--btn-px-sm);border-radius:var(--rd-sm);font:var(--f-supporting);font-weight:500;color:var(--tertiary);transition:background-color var(--hover-out),color var(--hover-out),transform var(--press-out)} .tab::after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:600} .tab:hover{background-color:var(--page-hover);color:var(--ink);transition:background-color var(--hover-in),color var(--hover-in),transform var(--press-out)} .tab:active{transform:scale(var(--press))} .tab[aria-pressed="true"]{background-color:var(--action);color:var(--on-action);font-weight:600} .tab[aria-pressed="true"]:hover{background-image:linear-gradient(var(--hover-inv),var(--hover-inv))} .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-16);padding:0 var(--gutter)} .grid{position:relative} .grid__none{grid-column:1/-1;margin:0;padding:var(--s-24) 0;font:var(--f-body);color:var(--secondary);text-align:center} .card.is-leaving{position:absolute;margin:0;z-index:0;pointer-events:none} /* a card that no longer fits, fading where it stood */ /* THE PAGER is the Pagination component (pages variant, sm): page buttons the Button sm box (32, rounded 12), at least as wide as tall, 4 apart; idle ghost in text/secondary 500 with the system veil on hover and press; previous / next the family's chevrons, text/disabled at the ends; the ellipsis text/tertiary. ONE LOCAL CALL: the current page is WHITE on elevation 1 (on Charms: 'usar a cor branca no selected'), not the component's ink fill — on the cream page the white tile reads as the cards do */ .pager{display:flex;justify-content:center;align-items:center;gap:var(--pg-gap);padding:var(--s-24) var(--gutter) 0} .pg{display:grid;place-items:center;min-width:var(--h-sm);height:var(--h-sm);padding:0;border-radius:var(--rd-sm);font:var(--f-supporting);font-weight:var(--pg-idle-w);font-variant-numeric:tabular-nums;color:var(--pg-idle);transition:background-color 160ms var(--ease),color 160ms var(--ease)} .pg:hover{background:var(--page-hover)} /* on the cream: the cream a step deeper, not the veil */ .pg:active{background:var(--page-hover);background-image:linear-gradient(var(--hover),var(--hover))} .pg svg{width:var(--pg-glyph);height:var(--pg-glyph)} .pg[aria-current="page"]{background:var(--white);color:var(--ink);font-weight:var(--pg-cur-w);box-shadow:inset 0 0 0 1px var(--rim),var(--el1)} .pg:disabled{cursor:default;background:none;color:var(--text-disabled)} .pg-gap{min-width:var(--h-sm);text-align:center;font:var(--f-supporting);color:var(--pg-ellipsis)} /* LOOKING FOR SOMETHING ELSE — the answer is 'more are coming, be first': a beta list. One field and one Button, in the box the scene's composer wears (with the tapped card's light); while it has focus, Toqi's aura travels round its edge. Joined, the box gives way to one line that says so */ .ask{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-12);padding:var(--s-48) var(--gutter) 0} .ask h2{margin:0;font:var(--f-subheading);letter-spacing:var(--tr-subheading);color:var(--ink)} .ask>p{font:var(--f-body);color:var(--secondary);text-wrap:balance} .ask__box{position:relative;width:100%;max-width:var(--banner-w);margin-top:var(--s-12);display:flex;align-items:center;gap:var(--composer-gap);padding:var(--composer-p) var(--composer-p) var(--composer-p) var(--s-20);border-radius:var(--composer-r);background:var(--white);box-shadow:inset 0 0 0 1px var(--l5),0 var(--s-8) var(--s-32) var(--l6)} .ask__box[hidden],.ask>p[hidden]{display:none} .ask__box::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:calc(var(--s-2) * .75);background:var(--ring);animation:turn 4s linear infinite;opacity:0;transition:opacity 400ms var(--enter);pointer-events:none; -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0)} .ask__box:focus-within::before{opacity:1} .ask__box input{flex:1;min-width:0;border:0;outline:0;background:none;font:var(--f-body);color:var(--ink)} .ask__box input::placeholder{color:var(--tertiary)} /* the browser's autofill paints its own blue behind a saved address: keep the field white and the ink ink */ .ask__box input:-webkit-autofill,.ask__box input:-webkit-autofill:hover,.ask__box input:-webkit-autofill:focus,.search input:-webkit-autofill{-webkit-box-shadow:0 0 0 var(--s-48) var(--white) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 0s 600000s} .search input,.ask__box input{caret-color:var(--sf-focus)} .ask__send{flex:none} .ask__send:disabled{cursor:default;background:var(--disabled-bg);color:var(--disabled-label)} .ask>.ask__note{display:block;max-width:var(--banner-w);font:var(--f-caption);color:var(--tertiary);text-align:center;text-wrap:balance} /* one centred block, the lock on the first line: as a flex row the text spanned the width and the lock sat apart at the edge */ .ask__note a{color:var(--secondary);text-decoration:underline;text-underline-offset:var(--s-2)} .ask__note svg{display:inline-block;vertical-align:-.125em;margin-right:var(--s-4)} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* the honeypot: off-screen, out of the tab order */ /* the small print: caption (12, the smallest role) — `.ask>` so the section's body line no longer overrides it — with a lock: the address is kept safe */ .ask__note svg{flex:none;width:var(--s-12);height:var(--s-12)} .ask__done{display:inline-flex;align-items:center;gap:var(--s-8);margin-top:var(--s-12);font:var(--f-body);font-weight:500;color:var(--ink);animation:word 480ms var(--enter) both} .ask__done svg{width:var(--s-16);height:var(--s-16);color:var(--toqi-core)} .card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-24);background:var(--surface2);box-shadow:inset 0 0 0 1px var(--rim),var(--el1)} .card[hidden]{display:none} .card__img{position:relative;height:var(--card-img-h);overflow:hidden;background:var(--inset) var(--placeholder) center/cover no-repeat} /* THE PICTURE fills its band (cover, no extension — 'só recorta'), held a little below centre where the scenes sit; on hover it eases in a touch, slowly, while the card lifts */ .card__pic{position:absolute;inset:0;background:center 53%/cover no-repeat;transition:transform 900ms var(--ease)} .card:hover .card__pic{transform:scale(1.06)} .card__icons,.card__tags{z-index:1} .card__icons{position:absolute;top:0;right:0;display:flex;gap:var(--s-8);padding:var(--s-8)} /* IconButton md, white variant on elevation 2 (floating over content): 40, a pill, glyph 16 */ .icon-btn{width:var(--h-md);height:var(--h-md);display:grid;place-items:center;border-radius:var(--r-pill);background:var(--white);box-shadow:var(--el2);color:var(--ink);transition:transform 360ms var(--spring),box-shadow 240ms var(--enter)} /* HOVER: the button rises one step on the system's elevation (2 → 3, no colour), and its glyph acts out its verb — SHARE sends its arrow up and out to the corner and back; COPY gives a quick double nudge, one copy landing on the other. Press stays the system's .96 */ .icon-btn:hover{transform:translateY(calc(-1 * var(--s-2)));box-shadow:var(--el3)} .icon-btn:active{transform:scale(var(--press))} .icon-btn svg{transition:transform 360ms var(--spring)} .icon-btn[data-share]:hover svg{animation:sendout 640ms var(--spring)} @keyframes sendout{40%{transform:translate(var(--s-2),calc(-1 * var(--s-2))) scale(1.08)}} .icon-btn[data-copy]:hover svg{animation:dupe 560ms var(--spring)} @keyframes dupe{30%{transform:translate(calc(-1 * var(--s-2)),calc(-1 * var(--s-2)))}60%{transform:translate(var(--s-2),var(--s-2)) scale(.94)}} @media (prefers-reduced-motion:reduce){.icon-btn svg{animation:none!important}} /* TRENDING: the three most liked carry the chip the Trending card draws ('#1 this week') at the picture's top left, centred on the share and copy buttons across from it: Toqi's lavender at its pale step 5, the label at step 11, a 1px edge at step 6, flat. Not white, so it never reads as one of the buttons; the lavender is the flag's alone — no tag wears it (charms.cases.json tagTones) */ /* the flag of a kind page (how often it runs, the apps it reads): the neutral light Badge md — ink step 0, the ink label — a pill 28 high, its glyph at 16; the apps as their marks, 4 apart */ .card__flag{position:absolute;top:calc(var(--s-8) + (var(--h-md) - var(--badge-md-h)) / 2);left:var(--s-8);z-index:1;display:inline-flex;align-items:center;gap:var(--s-4);height:var(--badge-md-h);padding:0 var(--s-12) 0 var(--s-8);border-radius:var(--r-pill);background:var(--badge-neutral);color:var(--ink);font:var(--f-supporting);font-weight:600;white-space:nowrap} .card__flag svg{width:var(--s-16);height:var(--s-16);color:var(--secondary)} .card__flag--apps{padding:0 var(--s-6);background:var(--white);box-shadow:inset 0 0 0 1px var(--line-white)} /* the app files are drawn on white: the pill is white too, flat with the ink-ramp edge, so it never reads as one of the floating buttons */ .card__flag--apps img{width:var(--s-20);height:var(--s-20)} /* the app files carry their own margin (the mark fills ~2/3): 20 draws each mark at ~14 */ .card__flag--apps b{font-weight:600} .card__hot{position:absolute;top:calc(var(--s-8) + (var(--h-md) - var(--badge-md-h)) / 2);left:var(--s-8);z-index:1;height:var(--badge-md-h);padding:0 var(--badge-md-px);background:var(--l5);box-shadow:inset 0 0 0 1px var(--l6);color:var(--l11);font:var(--f-supporting);font-weight:600} /* the Badge md box (28 high, padding 12 — aura.semantic.json badge.md), flat — no elevation — with a 1px edge one step above its fill (5 → 6) */ .card__tags{position:absolute;left:0;bottom:0;display:flex;gap:var(--s-6);padding:var(--s-8)} /* Badge, light tint of a colour: 20 high, 8 at the sides, caption at 500 — rounded 6 (the corner of a 20pt control), not a pill (2026-10-03) */ .badge{display:inline-flex;align-items:center;height:var(--badge-h);padding:0 var(--badge-px);border-radius:var(--r-6);font:var(--f-caption);font-weight:500;line-height:var(--badge-h);background:var(--b-fill);color:var(--b-label)} .card__body{display:flex;flex-direction:column;gap:var(--s-16);padding:var(--s-16) var(--s-20) var(--s-20)} .card__txt{display:flex;flex-direction:column;gap:var(--s-6)} .card h3{margin:0;font:var(--f-subtitle);letter-spacing:var(--tr-subtitle);color:var(--ink)} .card__desc{font:var(--f-supporting);color:var(--secondary);text-wrap:pretty} /* no word left alone on the last line */ .card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)} /* the whole card opens its detail; the title is the keyboard's way in */ #grid .card{cursor:pointer} .card__open{font:inherit;color:inherit;text-align:left;cursor:pointer} .card__open:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-4)} /* THE DETAIL — a Dialog over the page (dialog token: radius 32, elevation 3), widened to the site's detailWidth for the prompt; on a phone the Bottom Sheet (radius 24 on top, elevation 4, up to 92% tall, a grip). The page behind stays put under the scrim (surface/scrim). Arrives on the enter curve; leaves faster. */ html{scrollbar-gutter:stable} /* locking the scroll does not make the page jump sideways */ html.is-locked,html.is-locked body{overflow:hidden} .dlg{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:var(--s-32) var(--s-16)} .dlg__scrim{position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(var(--s-8));backdrop-filter:blur(var(--s-8));opacity:0;transition:opacity 320ms var(--ease-io)} /* light: the page stays present behind */ /* opened from a card, the panel grows out of it: the script sets where it starts (--from) and lets it settle */ .dlg.is-grow .dlg__panel{transform-origin:0 0;clip-path:inset(0 round var(--dlg-r));transition:transform 520ms var(--ease-io),clip-path 520ms var(--ease-io),opacity 160ms var(--ease-io)} /* ONE OBJECT, OPEN AND CLOSE ('como se fosse o mesmo carro'): the panel never turns see-through. It carries a copy of the card (the ghost) at the card's exact size; the card's face and the detail's face swap INSIDE the opaque panel while it travels — out of the card on the way up, back into it on the way down — so it lands as the card itself and the real one takes over with no step */ .dlg.is-grow .dlg__body,.dlg.is-grow .dlg__foot{transition:opacity 280ms var(--ease-io) 120ms} .dlg.is-grow:not(.is-open) .dlg__body,.dlg.is-grow:not(.is-open) .dlg__foot{opacity:0} .dlg__ghost{position:absolute;top:0;left:0;z-index:4;transform-origin:0 0;pointer-events:none;opacity:1;transition:opacity 240ms var(--ease-io)} .dlg.is-open .dlg__ghost{opacity:0} .dlg.is-grow.is-closing .dlg__body,.dlg.is-grow.is-closing .dlg__foot{transition:opacity 240ms var(--ease-io) 120ms} .dlg.is-grow.is-closing .dlg__ghost{transition:opacity 240ms var(--ease-io) 160ms} .dlg.is-grow.is-closing .dlg__panel{transition:transform 520ms var(--ease-io),clip-path 520ms var(--ease-io),box-shadow 520ms var(--ease-io)} .dlg__panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:var(--detail-w);max-height:100%;overflow:hidden; border-radius:var(--dlg-r);background:var(--white);box-shadow:var(--el3);opacity:0;transform:translateY(var(--s-24)) scale(.98); transition:opacity 280ms var(--enter),transform 420ms var(--enter)} .dlg.is-open .dlg__scrim{opacity:1} .dlg.is-open .dlg__panel{opacity:1;transform:none} .dlg.is-closing .dlg__scrim,.dlg.is-closing .dlg__panel{transition-duration:200ms} .dlg__grip{display:none} /* THE PICTURE IS THE DETAIL'S HEADER, and it tightens on scroll before it holds: it lies over the top of the content (the body is padded by its full height), and gives up height 1:1 with the scroll (--img-cut, set by the script) down to dlg-img-min, then stays as a band the rest scrolls under. Its full height (--img-h) is set on open to the source card's picture proportion, so the morph lands picture on picture */ .dlg__img{position:absolute;top:0;left:0;right:0;z-index:2;height:calc(var(--img-h,calc(var(--card-img-h) * 2)) - var(--img-cut,0px));overflow:hidden;background:var(--inset)} .dlg__img .card__pic{transition:none} .dlg__x{position:absolute;top:var(--s-8);right:var(--s-8);z-index:1} /* the dialog's over-photo close: IconButton md, inset 8 */ .dlg__x svg{width:var(--s-16);height:var(--s-16)} /* the reading order, on the spacing scale's jobs: 32 between the head and the content and between groups, 20 from a label onto its content, 12 between peers, 4 a label onto its value */ .dlg__body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;padding:calc(var(--img-h,calc(var(--card-img-h) * 2)) + var(--s-32)) var(--s-32) var(--s-32)} /* one rhythm: every group the same distance apart (32; 24 on a phone) — 'padroniza os espaçamentos' */ .dlg__body>*+*{margin-top:var(--s-32)} .dlg__head{display:flex;flex-direction:column;gap:var(--s-8);max-width:32em} /* the name onto its line: close, one block */ .dlg h2{margin:0;font:var(--f-title);letter-spacing:var(--tr-title);color:var(--ink)} .dlg__lede{font:var(--f-body);color:var(--secondary);text-wrap:pretty} /* the facts: one quiet row under a hairline (wraps on a narrow phone), labels small and tertiary, values in body */ .dlg__meta{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-16) var(--s-32);margin-bottom:0;padding-top:var(--s-24);border-top:1px solid var(--line-white)} /* margin-top comes from the body's rhythm: a margin:0 here cancelled it on desktop */ .dlg__meta>div{display:flex;flex-direction:column;gap:var(--s-6)} .dlg__meta dt{font:var(--f-caption);font-weight:500;color:var(--tertiary)} .dlg__meta dd{margin:0;font:var(--f-supporting);color:var(--ink)} .dlg__tags{display:flex;flex-wrap:wrap;gap:var(--s-6)} .dlg__sec{display:flex;flex-direction:column;gap:var(--s-12)} .dlg__sec h3{margin:0;font:var(--f-label-display);color:var(--ink)} /* a section's name: Onest 16, the content's own voice is body */ .dlg__sec>p{font:var(--f-body);color:var(--ink)} /* what Toqi does: numbered steps joined by a hairline, like the Stepper */ .dlg__steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column} .dlg__steps li{position:relative;display:flex;align-items:flex-start;gap:var(--s-12);padding-bottom:var(--s-12);font:var(--f-body);color:var(--ink)} .dlg__steps li:last-child{padding-bottom:0} .dlg__steps li:not(:last-child)::before{content:"";position:absolute;left:calc(var(--s-12) - 1px);top:var(--s-24);bottom:0;width:var(--s-2);border-radius:var(--r-pill);background:var(--l4)} .dlg__n{flex:none;display:grid;place-items:center;width:var(--s-24);height:var(--s-24);border-radius:var(--r-pill);background:var(--l2);font:var(--f-caption);font-weight:600;color:var(--l11)} /* works with: one row per app (its logo on a white tile, its name, what Toqi uses it for), on the panel's white, neutrals from the ink ramp */ .dlg__rows{display:flex;flex-direction:column;gap:var(--s-16)} /* the sheet row recipe: 16 apart, tile 40 rounded 16, name 600, detail secondary */ .dlg__row{display:flex;align-items:center;gap:var(--s-12)} /* no box: the tile carries the row */ .dlg__tile{flex:none;display:grid;place-items:center;width:var(--h-md);height:var(--h-md);border-radius:var(--r-16);background:var(--code-bg);font:var(--f-supporting);font-weight:600;color:var(--secondary)} .dlg__tile img{width:var(--s-24);height:var(--s-24)} .dlg__rowtxt{display:flex;flex-direction:column;min-width:0} .dlg__rowtxt b{font:var(--f-body);font-weight:600;color:var(--ink)} .dlg__rowtxt span{font:var(--f-supporting);color:var(--secondary)} .dlg__none{font:var(--f-body);color:var(--tertiary)} /* the full prompt, folded behind one row; open, the plain text and a Copy */ .dlg__prompt{display:block} /* no box: a plain row, like the section labels.
wraps its content in a slot, so gap never reaches the p and the button: the spacing is set on them */ .dlg__prompt summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);list-style:none;cursor:pointer;font:var(--f-label-display);color:var(--ink)} /* the same size as the other section names */ .dlg__prompt summary::-webkit-details-marker{display:none} .dlg__prompt summary:hover svg{color:var(--ink)} .dlg__prompt summary svg{flex:none;width:var(--s-16);height:var(--s-16);color:var(--tertiary);transition:transform 240ms var(--ease-io)} .dlg__prompt[open] summary svg{transform:rotate(180deg)} .dlg__prompt p{margin:var(--s-12) 0 0;font:var(--f-supporting);color:var(--secondary)} /* 12: the same name-to-content step as every section */ .dlg__prompt .dlg__copy{margin:var(--s-12) 0 0 calc(-1 * var(--btn-px-icon-sm))} /* the label lines up with the text; the fill sits 12 below it */ /* Button ghost sm with a leading icon (the DS component): 8 on the icon side, 12 on the other, 8 gap, the ghost label; the veil on hover (quick in, slow out) and on press, and the press scale */ .dlg__copy,.ghost{display:inline-flex;align-items:center;gap:var(--btn-gap);height:var(--h-sm);padding:0 var(--btn-px-sm) 0 var(--btn-px-icon-sm);border-radius:var(--rd-sm);box-shadow:none;font:var(--f-supporting);font-weight:500;color:var(--ghost-label);transition:background-color var(--hover-out),transform var(--press-out)} .dlg__copy:hover,.ghost:hover{transition:background-color var(--hover-in),transform var(--press-out)} .dlg__copy:active,.ghost:active{background:var(--pressed);transform:scale(var(--press))} .dlg__copy:hover,.ghost:hover{background:var(--hover)} /* Show all and Copy: the same quiet button */ .dlg__copy svg,.ghost svg{width:var(--s-16);height:var(--s-16)} .dlg__apps{display:flex;flex-wrap:wrap;gap:var(--s-8)} .dlg__foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);padding:var(--s-16) var(--s-24);border-top:1px solid var(--line-white)} /* Divider on white: the ink ramp */ .dlg__foot .card__meta{gap:var(--s-4)} .dlg__foot .like{margin:0} /* heart and share: the same ghost button, side by side */ .card{transition:box-shadow 600ms var(--enter)} .author{display:flex;align-items:center;gap:var(--s-6)} /* the author, then the charm's likes: a small ghost toggle (the system veil on hover). Liked, the heart fills in ink — neutral carries the signal — and pops (the system's `pop`: .9 → 1.08 → 1 on the spring) */ .card__meta{display:flex;align-items:center;gap:var(--s-12);min-width:0} /* Button ghost sm (like, share): 8 on the icon side, 12 on the label side, 8 gap, the ghost label; with no label (a like nobody has given yet) it is a 32 square, 8 all round */ .like{display:inline-flex;align-items:center;gap:var(--btn-gap);height:var(--h-sm);padding:0 var(--btn-px-sm) 0 var(--btn-px-icon-sm);margin-left:calc(-1 * var(--s-4));border-radius:var(--rd-sm);font:var(--f-supporting);font-weight:500;font-variant-numeric:tabular-nums;color:var(--ghost-label);transition:background-color var(--hover-out),color var(--hover-out),transform var(--press-out)} .like:has(.like__n:empty){padding:0 var(--btn-px-icon-sm)} .like:hover{transition:background-color var(--hover-in),color var(--hover-in),transform var(--press-out)} .like:hover{background:var(--hover);color:var(--ink)} .like:active{background:var(--pressed);transform:scale(var(--press))} .like__glyph{display:grid;place-items:center} .like__n:empty{display:none} /* no number yet: no gap either, so the heart sits centred in its square fill */ .like svg{width:var(--s-16);height:var(--s-16)} .like.is-on{color:var(--ink)} .like.pop .like__glyph{animation:likepop 340ms var(--spring)} @keyframes likepop{0%{transform:scale(1)}30%{transform:scale(.9)}70%{transform:scale(1.08)}} .avatar{position:relative;width:var(--s-20);height:var(--s-20);border-radius:var(--r-pill);background:radial-gradient(circle at 50% 42%,var(--toqi-edge) 0%,var(--toqi-core) 78%)} /* Toqi's own aura — their lavender core, lit at the centre where their ink eyes sit, so they read */ .avatar img{position:absolute;left:50%;top:50%;width:var(--eyes-w);height:auto;transform:translate(-50%,-50%)} .author b{display:flex;align-items:center;gap:var(--s-4);font:var(--f-supporting);font-weight:500;color:var(--ink)} .author svg{color:var(--verified)} /* a person's byline: their initial on the palest lavender, the avatar's size — and no check */ .initials{display:grid;place-items:center;width:var(--s-20);height:var(--s-20);border-radius:var(--r-pill);background:var(--l4);font:var(--f-caption);font-weight:600;color:var(--l11)} /* Toast, neutral (the DS component): the accent's surface/2 with ink text, 8/16 padding, 16 radius, 400 at most */ .trymenu{position:fixed;z-index:30;display:flex;flex-direction:column;gap:var(--s-8);width:max-content;max-width:calc(100vw - 2 * var(--s-16)); padding:var(--s-16) var(--s-20) var(--s-16) var(--s-16);border-radius:var(--r-20);background:var(--white);box-shadow:var(--el3); opacity:0;transform:translateY(calc(-1 * var(--s-4)));transition:opacity 160ms var(--enter),transform 160ms var(--enter)} .trymenu.is-up{transform:translateY(var(--s-4))} .trymenu.is-open{opacity:1;transform:none} .trymenu__opt{position:relative;display:flex;align-items:center;gap:var(--s-12);padding:0;border:0;background:none;color:var(--ink);font:var(--f-supporting);text-align:left;cursor:pointer} .trymenu__opt::before{content:"";position:absolute;inset:calc(-1 * var(--s-4)) calc(-1 * var(--s-8));border-radius:var(--r-12);background:var(--hover);opacity:0;transition:opacity 120ms var(--enter)} .trymenu__opt:hover::before,.trymenu__opt:focus-visible::before{opacity:1} .trymenu__opt:focus-visible{outline:none} .trymenu__opt img{position:relative;width:var(--s-24);height:var(--s-24);flex:none;border-radius:var(--r-8)} /* a 24 tile: r8, the radius scale's step for 24pt */ .trymenu__opt span{position:relative} .trymenu__opt--pick{min-width:calc(2 * var(--s-64) + var(--s-32));justify-content:space-between} .trymenu__opt--pick svg{position:relative;flex:none;width:var(--s-16);height:var(--s-16);color:var(--ink)} @media (prefers-reduced-motion: reduce){.trymenu,.trymenu__opt::before{transition:none}} .toast{position:fixed;left:50%;bottom:var(--s-32);transform:translate(-50%,var(--s-16));width:max-content;max-width:min(var(--toast-max),calc(100% - var(--s-32)));padding:var(--toast-py) var(--toast-px);border-radius:var(--toast-r);background:var(--toast-bg);color:var(--ink);font:var(--f-supporting);opacity:0;pointer-events:none;transition:opacity 200ms var(--ease),transform 240ms var(--ease);z-index:9} .toast.is-on{opacity:1;transform:translate(-50%,0)} @media (max-width:1199px){ .banner{display:flex;flex-direction:column;gap:var(--s-32)}.demo{order:-1;width:100%;max-width:var(--demo-w)} /* beside the text where both fit; below that, on top of everything */ .demo__stage{height:var(--demo-h-phone)} .d-stack{grid-template-columns:minmax(0,1fr)} /* the column never grows past the stage: the answer stayed its content's width and ran off the screen */ .d-foot{flex-wrap:wrap} /* the list drops under the chip when the stage is narrow */ .d-toqi{max-width:100%} /* the result card takes the stage's width: with the chat's 48 gutter it grew tall enough to cover the steps */ } @media (max-width:1100px){ .kinds{grid-template-columns:repeat(2,minmax(0,1fr))} .grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:719px){ /* the detail becomes a Bottom Sheet: from the bottom edge, up to 92% of the screen, a grip on top */ .dlg{place-items:end stretch;padding:0} .dlg__panel{max-width:none;max-height:92vh;border-radius:var(--sheet-r) var(--sheet-r) 0 0;box-shadow:var(--el4);transform:translateY(100%);transition:opacity 200ms var(--enter),transform 420ms var(--enter)} .dlg.is-grow .dlg__panel{clip-path:inset(0 round var(--sheet-r) var(--sheet-r) 0 0)} /* grown from a card, it comes to rest as a SHEET: rounded on top, square at the base (the dialog's clip rounded all four) */ .dlg__grip{display:block;position:absolute;top:var(--s-12);left:50%;z-index:3;width:calc(var(--s-32) + var(--s-4));height:var(--s-4);margin-left:calc(-1 * (var(--s-16) + var(--s-2)));border-radius:var(--r-pill);background:var(--halo)} .dlg__body{padding:calc(var(--img-h,calc(var(--card-img-h) * 1.5)) + var(--s-24)) var(--gutter-phone) var(--s-32)} .dlg__img{height:calc(var(--img-h,calc(var(--card-img-h) * 1.5)) - var(--img-cut,0px))} .dlg__body>*+*{margin-top:var(--s-24)} .dlg__foot{padding:var(--s-12) var(--gutter-phone) calc(var(--s-12) + env(safe-area-inset-bottom))} .hd{flex-wrap:wrap;gap:var(--s-16);padding:calc(var(--s-24) - var(--s-12) * var(--shrink,0)) var(--gutter-phone) calc(var(--s-16) - var(--s-8) * var(--shrink,0));margin-bottom:calc((var(--s-12) + var(--s-8)) * var(--shrink,0))} .brand{order:1}.right{order:2;margin-left:auto;gap:var(--s-16)} .hd .btn{height:var(--h-sm);padding:0 var(--btn-px-sm);border-radius:var(--rd-sm)} /* the download stays on a phone: Button sm */ .search{order:3;flex-basis:100%;max-width:none;margin:0} .banner{padding:var(--s-32) var(--gutter-phone) 0} .banner h1{font:var(--f-headline);letter-spacing:var(--tr-headline)} .banner h1{text-wrap:balance}.banner h1 .br{display:none} /* on a phone the title wraps itself */ .banner p{font:var(--f-body)} .section__hd,.kinds,.grid{padding:0 var(--gutter-phone)} .kpage{padding:var(--s-32) var(--gutter-phone) 0} .kpage h1{font:var(--f-headline);letter-spacing:var(--tr-headline)} .kpage p{font:var(--f-body)} .ksec__hd{padding:0 var(--gutter-phone)} .ksec__hd h2{font:var(--f-subtitle);letter-spacing:var(--tr-subtitle)} #list{scroll-margin-top:calc(var(--s-64) + var(--s-64))} /* the phone's header holds two rows */ .pager{padding:var(--s-24) var(--gutter-phone) 0} .ask{padding:var(--s-48) var(--gutter-phone) 0} .ask h2{font:var(--f-title);letter-spacing:var(--tr-title)} .section__hd h2{font:var(--f-title);letter-spacing:var(--tr-title)} /* the four kinds become a rail that scrolls sideways, so the charms are not four cards away */ .kinds{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter-phone);scrollbar-width:none;padding-bottom:var(--s-8)} .kinds::-webkit-scrollbar{display:none} .kind{flex:0 0 var(--kind-w-phone);scroll-snap-align:start} .grid{grid-template-columns:1fr} .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter-phone));padding:0 var(--gutter-phone)} /* on a phone the order moves up to the title's line, on the right, and the tags get the whole width to scroll */ .section__hd:has(.filters){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--s-8)} .section__hd:has(.filters)>h2{grid-column:1} .filters{display:contents} .filters .tabs{grid-column:1 / -1;grid-row:2} .filters .sort{grid-column:2;grid-row:1;margin-right:calc(-1 * var(--s-8))} /* its label lines up with the gutter, the hover fill runs past it */ .tabs::-webkit-scrollbar{display:none} .tab{flex:none} } /* THE ENTRANCE (see cadence() in the script): opacity, a 16 rise and a 2 blur, on the `translate` property so it never fights an element's own transform (the kinds' tilt, the header's stick) */ .rv,.rv-s{opacity:0;translate:0 var(--s-16);filter:blur(var(--s-2))} body.go .rv,.rv-s.in{opacity:1;translate:none;filter:none;transition:opacity 640ms var(--enter) var(--d,0ms),translate 800ms var(--ease) var(--d,0ms),filter 640ms var(--enter) var(--d,0ms)} .banner h1 .ln{display:inline-block} @media (max-width:719px){.banner h1 .ln{display:inline}} /* a phone wraps the title itself: the lines fade as one */ @media (prefers-reduced-motion:reduce){.rv,.rv-s{opacity:1;translate:none;filter:none}} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.d-steps b{transform:none}.m-watch .price{stroke-dashoffset:0}.m-watch .hit,.m-watch text{opacity:1}} /* THE PRESS, the system's pair (motion ui.press): every pressable sinks on the IN curve — fast at first, still sinking while held — and its release eases back on the OUT curve (each control's own transition). A CSS transition runs on the style it is going TO, so the IN pair lives here, on :active */ .btn:active,.tab:active,.dlg__copy:active,.ghost:active,.like:active{transition:background-color var(--hover-in),background-image var(--hover-in),box-shadow var(--hover-in),color var(--hover-in),transform var(--press-in)} .icon-btn:active{transition:box-shadow 240ms var(--enter),transform var(--press-in)}