/* Shell shared by the four pre-launch pages: the holding page, the privacy note, and the two confirmation stops in the subscribe flow. Deliberately not site.css — none of the site's components (topbar, cards, footer) exist here. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;min-height:100svh;display:grid;place-items:center; padding:var(--space-8) var(--space-5); background:var(--vatra-graphite);color:var(--vatra-ivory); font-family:var(--font-body);line-height:var(--lh-normal); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; position:relative} img,svg{display:block;max-width:100%} a{color:var(--color-accent-on-dark)} a:focus-visible,input:focus-visible,button:focus-visible{ outline:2px solid var(--color-accent-on-dark);outline-offset:3px} /* Trypillian sign field. A fixed layer, not absolute boxes on : the marks bleed past every edge on purpose, and only fixed boxes can do that without widening the document and handing the visitor a horizontal scrollbar. (overflow:hidden on would not help — root overflow propagates to the viewport, and it would block vertical scrolling when the page is zoomed.) Ivory at 3.5–5%: texture, never accent — the ember rule still holds. */ .bg{position:fixed;inset:0;z-index:0;pointer-events:none} .bg i{position:absolute;display:block;aspect-ratio:var(--ar); background:var(--vatra-ivory); -webkit-mask:var(--s) center/contain no-repeat;mask:var(--s) center/contain no-repeat} .bg .s1{--s:url(../symbols/чорні/Vector-5.svg);--ar:1000/1048; width:min(52vw,560px);top:-9%;right:-10%;opacity:.05} .bg .s2{--s:url(../symbols/чорні/path1524.svg);--ar:1000/1282; width:min(30vw,344px);bottom:-5%;left:-3%;opacity:.045} .bg .s3{--s:url(../symbols/чорні/path1718.svg);--ar:1000/476; width:min(40vw,460px);top:8%;left:-7%;opacity:.035} .bg .s4{--s:url(../symbols/чорні/Vector-6.svg);--ar:1000/952; width:min(28vw,310px);bottom:7%;right:5%;opacity:.04} /* Two marks are a field; four on a phone are clutter. Keep the diagonal pair. */ @media (max-width:640px){ .bg .s3,.bg .s4{display:none} .bg .s1{width:74vw;top:-4%;right:-16%} .bg .s2{width:56vw;bottom:-6%;left:-14%} } .soon{position:relative;z-index:1;max-width:34rem;text-align:center} .logo{width:clamp(148px,24vw,208px);margin:0 auto var(--space-8);height:auto} h1{font-family:var(--font-display);font-weight:900;line-height:var(--lh-tight); font-size:var(--text-display);margin:0;text-wrap:balance} /* Quiet descriptor under the promise: the headline says when, this says what. Small and muted on purpose — it must not take the drama back from the h1. */ .tagline{margin:var(--space-4) 0 0;font-size:var(--text-small); color:var(--color-ink-on-dark-muted);letter-spacing:.02em;text-wrap:balance} /* Motif frieze — the site's section divider, reused here to close the block. */ .frieze{height:20px;opacity:.45;background:var(--vatra-sand); margin:var(--space-8) auto 0;max-width:280px; -webkit-mask:url(../motifs/wave.svg) center/auto 100% repeat-x; mask:url(../motifs/wave.svg) center/auto 100% repeat-x} @media (min-width:600px){h1{letter-spacing:-.01em}} /* ── Notify form ─────────────────────────────────────────────────────────── */ .notify{margin-top:var(--space-8)} .notify-lede{margin:0 0 var(--space-4);color:var(--color-ink-on-dark); font-size:var(--text-body)} .row{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap} .row input[type=email]{flex:1 1 15rem;min-width:0;max-width:20rem; padding:13px var(--space-4);font:inherit;font-size:var(--text-body); color:var(--vatra-ivory);background:rgba(246,243,237,.06); border:1px solid rgba(246,243,237,.22);border-radius:var(--radius); transition:border-color var(--dur) var(--ease)} .row input[type=email]::placeholder{color:var(--color-placeholder)} .row input[type=email]:hover{border-color:rgba(246,243,237,.4)} /* Chrome paints its own pale background on autofilled inputs, which on this dark page turns the field white. background-color is ignored for autofill, so an inset shadow is the only way to hold the surface. */ .row input[type=email]:-webkit-autofill, .row input[type=email]:-webkit-autofill:hover, .row input[type=email]:-webkit-autofill:focus{ -webkit-text-fill-color:var(--vatra-ivory); -webkit-box-shadow:0 0 0 1000px #1b1917 inset; caret-color:var(--vatra-ivory); transition:background-color 9999s ease-in-out 0s} .row button{padding:13px var(--space-5);font:inherit;font-weight:600; color:var(--color-accent-ink);background:var(--vatra-terracotta); border:0;border-radius:var(--radius);cursor:pointer;min-height:46px; transition:background var(--dur) var(--ease)} .row button:hover{background:var(--terracotta-600)} .row button[disabled]{opacity:.55;cursor:default} .consent{display:flex;gap:10px;align-items:flex-start;justify-content:center; margin-top:var(--space-4);text-align:left;max-width:26rem;margin-inline:auto; font-size:var(--text-small);color:var(--color-ink-on-dark-muted);cursor:pointer} .consent input{margin:2px 0 0;width:17px;height:17px;flex:0 0 auto; accent-color:var(--vatra-terracotta)} /* Honeypot: off-screen, untabbable, and hidden from assistive tech, so only a bot filling every field will touch it. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .status{margin:var(--space-4) 0 0;min-height:1.4em;font-size:var(--text-small)} /* The confirmation stands where the form stood — same weight in the layout, so the block does not jump when it swaps. */ .done{margin:var(--space-8) auto 0;max-width:26rem; font-size:var(--text-sub);line-height:var(--lh-normal); color:var(--color-ink-on-dark)} .done::before{content:"";display:block;width:26px;height:2px;margin:0 auto var(--space-4); background:var(--vatra-terracotta)} @media (max-width:640px){.done{margin-top:var(--space-6)}} .status.ok{color:var(--color-ink-on-dark)} .status.bad{color:#E8A08C} /* On a phone the whole point of the page — the field — was landing below the fold: at 320px the consent line sat at 727px, past a 667px viewport. The desktop rhythm is simply too airy for a short screen, so tighten the four vertical gaps that stack up above the form. */ @media (max-width:640px){ body{padding:var(--space-6) var(--space-5)} .logo{margin-bottom:var(--space-6)} .frieze{margin-top:var(--space-6)} .notify{margin-top:var(--space-6)} .notify-lede{margin-bottom:var(--space-3)} } /* ── Prose pages (privacy, thank-you, confirmed) ─────────────────────────── */ .prose{max-width:38rem;text-align:left} .prose .logo{margin-bottom:var(--space-6)} .prose h1{font-size:var(--text-h1);text-align:center} .prose h2{font-family:var(--font-display);font-weight:900;font-size:var(--text-h3); margin:var(--space-6) 0 var(--space-2)} .prose p,.prose li{color:var(--color-ink-on-dark);font-size:var(--text-body);margin:0 0 var(--space-3)} .prose ul{margin:0 0 var(--space-3);padding-left:1.2em} .prose .meta{color:var(--color-ink-on-dark-muted);font-size:var(--text-small)} .prose .back{display:inline-block;margin-top:var(--space-6);font-weight:600} /* One quiet entrance: the mark and the promise settle in. Nothing loops. */ @media (prefers-reduced-motion:no-preference){ .soon > *{animation:rise 640ms var(--ease) both} .logo{animation-delay:60ms} h1{animation-delay:200ms} .tagline{animation-delay:280ms} .frieze{animation-delay:340ms} .notify{animation-delay:440ms} @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} }