/* Spalvų kiemas: shared website and demo foundation. Figma file 50N7lTttWIhXtYJizrDZw0. */ @font-face{ font-family:'Geist'; src:url('/assets/fonts/geist-variable.woff2') format('woff2'); font-style:normal;font-weight:100 900;font-display:swap; } :root{ --paper:#FCF8ED;--muted:#66625D;--orange:#F96943;--blue:#284BE8;--yellow:#FFE16B; --soft-blue:#E7ECFF;--soft-orange:#FFE4D8;--soft-yellow:#FFF2BF; --radius-control:14px;--radius-panel:18px;--radius-pill:999px; --duration-press:90ms;--duration-state:160ms;--duration-success:400ms; /* ground + ink */ --ground:#FCF8ED; /* popierius — the same paper as the app */ --ground-2:#F5EFDF; /* one step down: bands, wells */ --night:#252528; /* inverted polarity, used once */ --ink:#252528; /* anglies rašalas — 15:1 on --ground */ --ink-2:#66625D; /* 6.2:1 — secondary prose */ --ink-3:#66625D; /* 4.5:1 — the quiet tier */ --rule:#D6D0C4; /* one accent hue, two roles only: the day marker and its rule */ --paint:#F96943; /* dažai — fills, rules, never body text */ --paint-ink:#AE332C; /* 4.9:1 — the beat numerals and the wordmark */ /* interaction */ --action:#284BE8; /* kombinezonas — links, buttons, focus (the app's teal) */ --action-hover:#1F3CC0; --action-ink:#FFFFFF; --sun:#FFE16B; /* megztinis — used once, as a whole field */ --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif; --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); /* Spring curves converted from the referenced sources (see work/2026-09-07-website-rebuild/motion-references.md §7). Each one reproduces the source spring's displacement, overshoot included. */ --ease-island:linear(0, 0.0464, 0.1562, 0.2953, 0.4403, 0.5765, 0.6956, 0.7942, 0.8718, 0.93, 0.9714, 0.999, 1.016, 1.0249, 1.0282, 1.0278, 1.0252, 1.0214, 1.0173, 1.0133, 1.0097, 1.0067, 1.0043, 1); /* Cult UI island, 380ms */ --ease-track:linear(0, 0.038, 0.1279, 0.2424, 0.3634, 0.4798, 0.5854, 0.6771, 0.7542, 0.8171, 0.8673, 0.9064, 0.9362, 0.9584, 0.9744, 0.9858, 0.9935, 0.9985, 1.0016, 1.0034, 1.0042, 1.0043, 1.0041, 1); /* Animate UI tabs, 400ms */ --ease-indicator:linear(0, 0.0373, 0.1252, 0.2371, 0.3555, 0.4695, 0.5732, 0.6637, 0.7402, 0.8031, 0.8538, 0.8937, 0.9246, 0.948, 0.9654, 0.978, 0.987, 0.9932, 0.9973, 0.9999, 1.0015, 1.0023, 1.0026, 1); /* Animate UI indicator, 485ms */ --ease-list-in:linear(0, 0.044, 0.1409, 0.256, 0.371, 0.477, 0.5701, 0.6496, 0.7162, 0.7711, 0.8161, 0.8527, 0.8822, 0.9059, 0.925, 0.9402, 0.9524, 0.9621, 0.9699, 0.976, 0.981, 0.9849, 0.988, 1); /* Magic UI list, 410ms */ /* iPhone frame widths (outer body, not screen) */ --device-sm:clamp(146px,16vw,206px); --device-md:clamp(166px,18.5vw,242px); --device-lg:clamp(196px,21vw,288px); --gutter:clamp(28px,5vw,88px); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:124px;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ground); color:var(--ink); font:400 17px/1.55 var(--sans); letter-spacing:-.006em; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4,p,ol,ul,dl,figure,blockquote{margin:0} ol,ul{padding-left:1.1em} img{display:block;max-width:100%;height:auto} a{color:inherit;text-underline-offset:5px} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} a,button{-webkit-tap-highlight-color:transparent} [hidden]{display:none} ::selection{background:var(--sun);color:var(--ink)} a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--action);outline-offset:4px;border-radius:2px; } /* ---- type roles: tracking is set per size, never inherited ---- */ .display,h1{font-weight:900;line-height:.98;letter-spacing:-.04em;text-wrap:balance} h2{font-weight:900;line-height:1.03;letter-spacing:-.035em;font-size:clamp(29px,3.6vw,50px);text-wrap:balance} h3{font-weight:800;line-height:1.14;letter-spacing:-.026em;font-size:clamp(22px,2.1vw,30px);text-wrap:balance} p{text-wrap:pretty} .eyebrow{ font-size:13px;line-height:1.4;font-weight:650;letter-spacing:0; text-transform:none;color:var(--ink-2);margin:0; } .lead{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-2);letter-spacing:-.008em} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .skip-link{position:fixed;top:8px;left:8px;z-index:100;background:var(--ground);padding:14px;transform:translateY(-200%)} .skip-link:focus{transform:none} .ic:not(.felt){width:24px;height:24px;flex:none} .brand{display:inline-flex;align-items:center;gap:12px;font-size:26px;font-weight:900;line-height:.9;letter-spacing:-.04em;text-decoration:none;white-space:nowrap} .brand span{font-weight:900;color:var(--ink)} .brand .brand-logo{display:block;width:180px;height:auto;max-width:none;flex:none} /* ---- actions ---- */ .action{ display:inline-flex;align-items:center;gap:14px;min-height:52px; padding:13px 22px;background:var(--paint);color:var(--ink);border-radius:var(--radius-control); text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.01em; transition:transform 160ms var(--ease-out),background-color 140ms ease; } .action:active{transform:scale(.97)} .action--quiet{ background:none;color:var(--ink);padding:13px 0;min-height:48px; text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px; transition:transform 160ms var(--ease-out),text-decoration-color 140ms ease; } @media(hover:hover) and (pointer:fine){ .action:hover{background:#ED5E3A} .action--quiet:hover{background:none;text-decoration-color:var(--action)} } .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px} .notice{ font-size:15px;line-height:1.65;padding:16px 18px; background:var(--ground-2);border-left:3px solid var(--paint); } /* ---- the iPhone ------------------------------------------------------------ Both supported capture sizes (1206x2622 and 1320x2868) share the same 2.174:1 screen, so one geometry covers either file. Every measure below is a ratio of --device-w, the outer body width, so the frame scales cleanly. */ .device{--device-w:var(--device-md);width:var(--device-w);margin:0;position:relative} .device--sm{--device-w:var(--device-sm)} .device--md{--device-w:var(--device-md)} .device--lg{--device-w:var(--device-lg)} .device-body{ padding:calc(var(--device-w)*.026); border-radius:calc(var(--device-w)*.159); background:#3A2C22; box-shadow: 0 1px 0 rgba(255,244,226,.22) inset, 0 26px 44px -22px rgba(58,36,20,.45), 0 6px 14px -8px rgba(58,36,20,.28); } .device-glass{ position:relative;overflow:hidden;background:#fff; border-radius:calc(var(--device-w)*.133); } .device-glass img{width:100%;height:auto} /* ---- the arriving notification -------------------------------------------- The capture already contains the real black Dynamic Island. Rather than redraw it, the page lands a Kartu augam push banner across it: the island disappears behind the card and the visitor sees the one feature a static screenshot cannot show — that the app tells you when something happened. It deliberately overhangs the bezel by ~4.5% each side so the text stays readable at mockup scale instead of shrinking to texture. */ .device-notice{ position:absolute;z-index:2;pointer-events:none; left:calc(var(--device-w) * -.045);width:calc(var(--device-w) * 1.09); top:calc(var(--device-w) * .05); display:grid;column-gap:calc(var(--device-w) * .038);row-gap:calc(var(--device-w) * .012); grid-template-columns:auto 1fr auto; grid-template-areas:"icon app time" "icon title title" "icon body body"; align-items:center; padding:calc(var(--device-w) * .045) calc(var(--device-w) * .052); border-radius:calc(var(--device-w) * .09); background:rgba(253,249,242,.94); -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 0 0 1px rgba(43,29,20,.06), 0 calc(var(--device-w) * .055) calc(var(--device-w) * .1) calc(var(--device-w) * -.055) rgba(36,24,18,.5); } .device-notice img{grid-area:icon;width:calc(var(--device-w) * .13);height:auto;border-radius:calc(var(--device-w) * .032)} .device-notice b{ grid-area:app;align-self:end;font-size:calc(var(--device-w) * .036);font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3); } .device-notice time{grid-area:time;align-self:end;font-size:calc(var(--device-w) * .036);color:var(--ink-3)} .device-notice strong{grid-area:title;font-size:calc(var(--device-w) * .053);font-weight:650;line-height:1.2} .device-notice span{ grid-area:body;font-size:calc(var(--device-w) * .046);line-height:1.3;color:var(--ink-2); display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; } /* At the smallest frame the third line would be under 7px: drop it rather than ship unreadable text. */ .device--sm .device-notice span{display:none} /* It arrives after the phone has landed, the way a real notification does: spring settle from above (Cult UI DynamicIsland k=400 c=30 -> 380ms, 2.8% overshoot), with Sonner's -100% start and a short blur burn-off. */ .device-notice{ opacity:0;transform:translateY(-150%) scale(.94);filter:blur(5px); transition:opacity 380ms var(--ease-island),transform 380ms var(--ease-island),filter 260ms linear; transition-delay:220ms; } .device-notice.is-in{opacity:1;transform:none;filter:none} /* No JavaScript, or motion turned down: the banner is simply already there. Reduced motion removes the movement, never the information. */ @media(scripting:none){.device-notice{opacity:1;transform:none;filter:none}} @media(prefers-reduced-motion:reduce){.device-notice{opacity:1;transform:none;filter:none;transition-delay:0s}} .device figcaption{ margin-top:16px;font-size:13px;line-height:1.55;color:var(--ink-2); letter-spacing:-.002em;max-width:34ch; } .device-provisional{ display:block;margin-top:12px;font-size:10px;font-weight:650; letter-spacing:.14em;text-transform:uppercase;color:var(--paint-ink); } /* ---- scroll reveal: one purpose only, keeps a long narrative from popping --- */ [data-reveal]{opacity:1;transform:none} [data-reveal].will-enter{transform:translateY(10px);transition:transform 400ms var(--ease-out)} [data-reveal].is-in{opacity:1;transform:none} /* Belt and braces with the