/* ============================================================================ /stamp — recordation page ---------------------------------------------------------------------------- The layout, the palette and the component shapes are transferred from /preview-b-final/stamp.html, which was written as a transfer candidate: its markup already binds every id and name script.js needs, so the certify flow itself is untouched by this file. SCOPING: every rule is prefixed `body.stamp-v2`. Names like .field, .btn, .faq-item, .section and .dropzone already exist in the global styles.css for other pages, and the modals deliberately keep their production class names (.agreement-modal-content, .payment-modal-content, …) so script.js and the old rules still find them. The body-class prefix outranks all of those (0,2,x vs 0,1,x) without editing a single shared rule. ROOT SIZE: the preview's rems are drawn against an 18px root, so `html` is set to 112.5% below — unscoped on purpose, exactly as home.css does it, because this file is linked by /stamp alone and cannot reach another page. Production rules that also use rem therefore render ~12.5% larger here, which is the same trade the homepage already makes. navbar.css is px-based and unaffected. ========================================================================== */ html { font-size: 112.5%; } /* 16px -> 18px, see note above */ /* ============================================================ StampR — "The Lit Vitrine" design system (see /DESIGN.md) Vitrine Teal field · Signal Coral accent · Montserrat ExtraBold display ============================================================ */ body.stamp-v2 { --ink: #16140f; /* warm near-black, body text on light */ --teal: #0d5c63; /* Vitrine Teal — framing color for dark fields */ --teal-deep: #0a4a50; /* teal hover fill */ --teal-dark: #073338; /* deepest section ground */ --coral: #ff7a59; /* Signal Coral — the single accent */ --coral-deep: #f2613f; /* coral hover/pressed */ /* Signal Coral measures 2.99:1 as text on the teal field, a hair under the 3:1 large-text bar, so coral TEXT on a dark field uses this one step lighter (3.45:1 on teal, 6.8:1 on ink). Coral FILLS still use --coral: contrast there is carried by the ink text sitting on top of it. */ --coral-light:#ff8f70; --cream: #f1ede3; /* reading color on dark fields */ --paper: #f7f5f0; /* light-field background + card surface */ --paper-line: rgba(22,20,15,.10); --dim-on-dark:rgba(244,241,232,.78); --dim: #6d6452; /* state colors — feedback only, never decorative (per DESIGN.md). These were declared as `--cancel: var(--cancel)`, which is a self-reference: the spec makes such a declaration invalid at computed-value time, so every `color: var(--cancel)` in this sheet fell back to `inherit` and every `background: var(--validate)` to transparent. Error text across the preview (upload failures, verify verdicts, the account danger zone) rendered in plain ink and read as ordinary copy. Literal values, per DESIGN.md. */ --cancel: #8a2a1f; /* invalid / error / destructive */ --validate: #2f5d3d; /* verified / success */ /* Lit-vitrine type system: one sans, three jobs -- Montserrat ExtraBold/Bold for display, the same face at 500/600 for body, mono for artifact strings. */ --display: 'Montserrat', system-ui, -apple-system, sans-serif; --sans: 'Montserrat', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); --col: clamp(20rem, 92vw, 74rem); /* measured heights of the two fixed bands above the fold, so the hero can size itself to "hero + trust strip = one viewport" without magic numbers */ --nav: 77px; --strip: 134px; --trust-gutter: clamp(26px, 3vw, 44px); /* spacing scale from DESIGN.md — section furniture uses these, never ad-hoc px */ --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 28px; --s-xl: 44px; --s-2xl: 76px; --s-3xl: 96px; } body.stamp-v2 *, body.stamp-v2 *::before, body.stamp-v2 *::after { box-sizing: border-box; } /* Zero the inherited body padding from styles.css, but NOT padding-top: navbar.css owns that (`html body { padding-top: var(--navbar-h) }`) and it is what clears the fixed 77px bar. A `padding: 0` shorthand here outranks it and the certify panel slides under the navbar. */ body.stamp-v2 { margin: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } /* Overscroll (rubber-band) color: when scrolling past the top or bottom, the browser exposes the html background behind the fixed nav / footer. A fixed two-stop gradient — teal (nav) on the top half, ink (footer) on the bottom half — makes that exposed strip match the adjacent element instead of white. body keeps its own --paper surface so page content is unaffected. */ body.stamp-v2 { background: linear-gradient(var(--teal) 0 50%, var(--ink) 50% 100%) fixed; /* Kill the stray horizontal scrollbar (the thin white line at the viewport bottom). Use `clip`, not `hidden`: `hidden` turns html/body into the scroll container, which breaks `position: sticky` on the navbar (it scrolls away). `clip` still hides horizontal overflow but keeps the viewport as the scroll root, so the sticky nav stays pinned to the top. */ overflow-x: clip; } /* Global scale: root em bumped so the page renders at the density that previously required ~120% browser zoom. rem-based type/spacing scale with it; content column tightened so wide screens don't feel sprawling. */ body.stamp-v2 { font-size: 112.5%; } /* 16px -> 18px */ body.stamp-v2 { overflow-x: clip; font-family: var(--sans); /* The pages carry lang="bg", which switches Montserrat's Cyrillic to the Bulgarian locl forms: d -> g-shape, i -> u, p -> n, t -> m, sh -> u-shape. Those are the typographically correct Bulgarian shapes, but at display sizes they read as handwriting rather than as a printed record, which is the wrong voice for a certificate. Force the upright forms site-wide. Keep lang="bg" -- it still drives hyphenation, spellcheck and SEO. */ font-feature-settings: 'locl' 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Paper finish: a barely-there fractal grain over the light field so the white surfaces read as textured stock rather than flat #fff. Fixed so it stays put while content scrolls; pointer-events:none so it never intercepts clicks. */ body.stamp-v2::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .035; mix-blend-mode: multiply; } /* keep real content above the grain layer. Everything that pins itself to the viewport is excluded: this rule outranks the overlays' own selectors (`.cmodal` is 0,2,1 against this rule's 0,3,1) and was dropping them out of `position: fixed` into the flow at the bottom of the document — the authorship declaration, the guest/payment modals and the toasts all rendered below the footer instead of over the page. They each carry their own z-index, so they never needed the lift. */ body.stamp-v2 > *:not(.top-promo-banner):not(.cookie-banner):not(.cookie-modal):not(.cmodal):not(.custom-modal):not(.toast-container) { position: relative; z-index: 1; } body.stamp-v2 img, body.stamp-v2 svg, body.stamp-v2 iframe { display: block; max-width: 100%; } body.stamp-v2 a { color: inherit; text-decoration: none; } body.stamp-v2 button { font: inherit; color: inherit; cursor: pointer; } body.stamp-v2 [hidden] { display: none !important; } body.stamp-v2:where(a, body.stamp-v2 button, body.stamp-v2 summary, body.stamp-v2 [tabindex]):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13,92,99,.45); border-radius: 4px; } @media (prefers-reduced-motion: reduce) { body.stamp-v2 *, body.stamp-v2 *::before, body.stamp-v2 *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body.stamp-v2 .col { width: var(--col); margin-inline: auto; padding-inline: 28px; } body.stamp-v2 .section { padding: clamp(56px, 7vh, 96px) 0; } body.stamp-v2 .eyebrow { font-family: var(--sans); font-weight: 600; font-size: .9rem; letter-spacing: .01em; color: var(--teal); display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--s-md); } body.stamp-v2 .eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--teal); } /* ---- buttons ---- */ body.stamp-v2 .btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .95rem; border-radius: 11px; border: 0; transition: transform .18s var(--ease), background .18s var(--ease); } body.stamp-v2 .btn-lime { background: var(--coral); color: var(--ink); padding: 16px 30px; } body.stamp-v2 .btn-lime:hover { transform: translateY(-2px); background: var(--coral-deep); } body.stamp-v2 .btn-outline { border: 1.5px solid rgba(22,20,15,.22); color: var(--ink); padding: 15px 24px; background: transparent; } body.stamp-v2 .btn-outline:hover { background: rgba(22,20,15,.05); } body.stamp-v2 .btn-outline-light { border: 1.5px solid rgba(255,255,255,.32); color: var(--cream); padding: 15px 24px; background: transparent; } body.stamp-v2 .btn-outline-light:hover { background: rgba(255,255,255,.08); } @keyframes doc-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } } @keyframes sheen { 0% { transform: rotate(8deg) translateX(-40%); opacity: 0; } 8% { opacity: 1; } 22% { transform: rotate(8deg) translateX(420%); opacity: 0; } 100% { transform: rotate(8deg) translateX(420%); opacity: 0; } } @keyframes seal-in { from { opacity: 0; transform: rotate(-8deg) translateZ(70px) scale(.4); } to { opacity: 1; transform: rotate(-8deg) translateZ(70px) scale(1); } } @keyframes aud-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ 7 · LEGAL ============================================================ */ body.stamp-v2 .legal { background: var(--cream); } body.stamp-v2 .legal-inner { display: grid; grid-template-columns: auto 1fr; gap: var(--s-xl); align-items: center; max-width: 980px; margin-inline: auto; } @media (max-width: 700px) { body.stamp-v2 .legal-inner { grid-template-columns: 1fr; gap: var(--s-md); } } body.stamp-v2 .legal-glyph { font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 9vw, 7rem); color: var(--teal); line-height: 1; } body.stamp-v2 .legal-text { font-size: 1.28rem; line-height: 1.62; color: var(--ink); margin: 0; text-wrap: pretty; } body.stamp-v2 .legal-text a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } /* ============================================================ 8 · FAQ ============================================================ */ body.stamp-v2 .faq-list { max-width: 980px; margin-top: 28px; } body.stamp-v2 .faq-item { border-top: 1px solid var(--paper-line); } body.stamp-v2 .faq-item:last-child { border-bottom: 1px solid var(--paper-line); } body.stamp-v2 .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 26px 0; font-weight: 600; font-size: 1.32rem; line-height: 1.3; } body.stamp-v2 .faq-item summary::-webkit-details-marker { display: none; } body.stamp-v2 .faq-chev { flex: none; width: 20px; height: 20px; position: relative; } body.stamp-v2 .faq-chev::before, body.stamp-v2 .faq-chev::after { content: ''; position: absolute; background: var(--teal); transition: transform .24s var(--ease), opacity .24s var(--ease); } body.stamp-v2 .faq-chev::before { top: 9px; left: 0; width: 20px; height: 2px; } body.stamp-v2 .faq-chev::after { left: 9px; top: 0; width: 2px; height: 20px; } body.stamp-v2 .faq-item[open] .faq-chev::after { transform: scaleY(0); opacity: 0; } body.stamp-v2 .faq-answer { padding: 0 0 28px; color: var(--dim); max-width: 70ch; font-size: 1.12rem; line-height: 1.6; } body.stamp-v2 .faq-answer p { margin: 0 0 12px; } body.stamp-v2 .faq-answer p:last-child { margin-bottom: 0; } body.stamp-v2 .faq-answer ul { margin: 0 0 12px; padding-left: 1.2em; } body.stamp-v2 .faq-answer li { margin: 4px 0; } body.stamp-v2 .faq-answer a { color: var(--teal); text-decoration: underline; } @keyframes ticker-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes ticker-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,122,89,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,122,89,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,89,0); } } @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } } /* ---- broader small-screen tuning ---- */ @media (max-width: 600px) { /* never let the column floor (20rem) exceed a narrow viewport — that horizontal overflow was pushing the fixed mobile sheet out of bounds */ body.stamp-v2 { --col: 100%; } body.stamp-v2 .col { padding-inline: 20px; } body.stamp-v2 .faq-item summary { font-size: 1.12rem; padding: 22px 0; } body.stamp-v2 .faq-answer { font-size: 1.02rem; } body.stamp-v2 .legal-text { font-size: 1.12rem; } } /* ============================================================ STAMP (certify flow — split hero: the counter + the artifact) ============================================================ */ /* The hero is a cobalt field, like the index. Left = the act of certifying. Right = the real certificate, flat and sharp, bleeding off the edge. */ body.stamp-v2 .certify-hero { position: relative; color: var(--cream); overflow: hidden; background: radial-gradient(115% 90% at 88% -12%, rgba(255,122,89,.22), transparent 50%), radial-gradient(90% 85% at -6% 112%, rgba(7,51,56,.55), transparent 60%), linear-gradient(158deg, var(--teal) 0%, var(--teal-deep) 58%, var(--teal-dark) 100%); } body.stamp-v2 .certify-hero::before { /* faint lime wash from the lower-right, depth */ content: ''; position: absolute; right: -10%; bottom: -40%; width: 60%; height: 130%; background: radial-gradient(ellipse at center, rgba(255,122,89,.12), transparent 64%); pointer-events: none; } body.stamp-v2 .certify-hero::after { /* fine film grain, matches the homepage hero */ content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .42; mix-blend-mode: overlay; background-image: var(--grain); background-size: 200px 200px; } body.stamp-v2 .certify-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; padding-block: clamp(24px, 3vh, 48px) clamp(40px, 6vh, 80px); } @media (min-width: 940px) { body.stamp-v2 .certify-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } } /* Wide: the panel takes the larger share. It has to hold a two-column form and its ledger inside one screen height, and the lede beside it is reference copy that can run on. The act owns the fold (PRODUCT.md: the dropzone is the hero). */ @media (min-width: 1280px) { body.stamp-v2 .certify-hero__grid { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: clamp(30px, 3.2vw, 46px); } } /* left column: the info column (what it certifies / what you get), like the main page */ body.stamp-v2 .certify-lede { max-width: none; } body.stamp-v2 .certify-lede .kicker { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin: 0 0 20px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255,122,89,.1); border: 1px solid rgba(255,122,89,.28); } body.stamp-v2 .certify-lede .kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255,122,89,.22); } /* dynamic, easier-to-read headline: tighter measure, more air between lines, the accent word carries an underline stroke so the eye lands on it */ body.stamp-v2 .certify-lede h1 { font-family: var(--display); font-weight: 700; color: var(--cream); font-size: clamp(2.05rem, 3.9vw, 3.05rem); line-height: 1.12; letter-spacing: -.012em; margin: 0; text-wrap: balance; max-width: 20ch; } body.stamp-v2 .certify-lede h1 em { position: relative; font-style: normal; color: var(--coral); white-space: nowrap; } body.stamp-v2 .certify-lede h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: .04em; height: .1em; background: linear-gradient(90deg, var(--coral), rgba(255,122,89,.35)); border-radius: 2px; transform-origin: left; transform: scaleX(0); animation: emrule 1s var(--ease) .35s forwards; } @keyframes emrule { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { body.stamp-v2 .certify-lede h1 em::after { transform: scaleX(1); animation: none; } } body.stamp-v2 .certify-lede__sub { margin: 18px 0 0; font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.6; color: var(--dim-on-dark); max-width: 52ch; } /* Placed after the base rules on purpose: at 1180px+ the lede column narrows to make room for the form, and a 55px display face in a 390px column breaks into eight ragged lines. Scale the headline to the column it actually occupies. */ @media (min-width: 1280px) { body.stamp-v2 .certify-lede h1 { font-size: clamp(1.7rem, 2.5vw, 2.2rem); line-height: 1.16; max-width: none; } body.stamp-v2 .certify-lede__sub { margin-top: 14px; font-size: 1rem; } body.stamp-v2 .certify-lede .kicker { margin-bottom: 16px; } } /* info accordion (left column, on the cobalt field) */ body.stamp-v2 .info-accordion { margin-top: clamp(26px, 3vw, 34px); display: grid; gap: 12px; } body.stamp-v2 .info-card { border: 1px solid rgba(244,241,232,.2); border-radius: 14px; background: rgba(255,255,255,.05); overflow: hidden; } body.stamp-v2 .info-card__toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; cursor: pointer; padding: 16px 18px; } body.stamp-v2 .info-card__toggle::-webkit-details-marker { display: none; } body.stamp-v2 .info-card__title { font-family: var(--display); font-weight: 800; font-size: 1.08rem; color: var(--cream); } body.stamp-v2 .info-card__chev { position: relative; width: 16px; height: 16px; flex: none; } body.stamp-v2 .info-card__chev::before, body.stamp-v2 .info-card__chev::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--coral); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .24s var(--ease), opacity .24s var(--ease); } body.stamp-v2 .info-card__chev::after { transform: translate(-50%, -50%) rotate(90deg); } body.stamp-v2 .info-card[open] .info-card__chev::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; } body.stamp-v2 .info-list { margin: 0; padding: 0 18px 18px 18px; list-style: none; display: grid; gap: 10px; } body.stamp-v2 .info-list li { position: relative; padding-left: 22px; font-size: .96rem; line-height: 1.5; color: var(--dim-on-dark); } body.stamp-v2 .info-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); } /* ---- the recordation panel ---------------------------------------------- One sheet, two fields (DESIGN.md, the Two-Field Rule): paper carries the declaration being filled in, ink carries the issuance ledger. A form that commits someone to a legal declaration should look like an instrument, not like a signup box, and the density is where that reading comes from. The panel clips its own corners so the ink field can run to the edge. */ body.stamp-v2 .certify-form-col { min-width: 0; } body.stamp-v2 .certify-panel { position: relative; overflow: hidden; /* The panel is a hero-grid child, so its width tracks the column ratio rather than the viewport: a 900px viewport gives it ~770px and a 1000px one gives it ~480px. Its internal breakpoints have to read the panel, not the screen. */ container-type: inline-size; container-name: cpanel; --cp-pad: clamp(20px, 2vw, 26px); background: linear-gradient(180deg, #fbfaf6 0%, var(--paper) 120px); border-radius: 20px; box-shadow: var(--el-4), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(7,51,56,.05); } /* a hairline coral seam along the very top — the counter has an edge of light */ body.stamp-v2 .certify-panel::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; z-index: 2; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, rgba(255,122,89,.55), transparent); } /* masthead: the form has a name and a standard it is issued under, the way a real declaration form carries a title and a reference */ body.stamp-v2 .cpanel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 18px; padding: clamp(11px, 1.3vw, 12px) var(--cp-pad); border-bottom: 1px solid var(--paper-line); } body.stamp-v2 .cpanel-head__title { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; font-size: clamp(1.3rem, 1.95vw, 1.58rem); line-height: 1.15; color: var(--ink); margin: 0; } body.stamp-v2 .cpanel-head__std { margin: 0; font-family: var(--mono); font-size: .65rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } body.stamp-v2 .cpanel-body { min-width: 0; } /* Two columns of declaration: the work on the left, who it is issued to and how public it is on the right. Stacked, the open options put the button three screens down; side by side the whole form fits one. */ body.stamp-v2 .cpanel-main { padding: var(--cp-pad); min-width: 0; display: grid; gap: 17px; } body.stamp-v2 .cpanel-col { min-width: 0; display: grid; gap: 14px; align-content: start; } @container cpanel (min-width: 660px) { body.stamp-v2 .cpanel-main { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: 0; } body.stamp-v2 .cpanel-col { padding-right: clamp(22px, 3cqi, 30px); } body.stamp-v2 .cpanel-col + .cpanel-col { padding: 0 0 0 clamp(22px, 3cqi, 30px); border-left: 1px solid var(--paper-line); } /* notices sit under both columns */ body.stamp-v2 .cpanel-main > .unverified-form-warning { grid-column: 1 / -1; } } /* dropzone — the hero act (dominant element of the panel), now an inset crafted surface */ body.stamp-v2 .dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; background: radial-gradient(120% 80% at 50% 0%, rgba(13,92,99,.07), transparent 70%), linear-gradient(180deg, rgba(13,92,99,.045), rgba(13,92,99,.02)); border: 1.5px dashed rgba(13,92,99,.4); border-radius: 16px; padding: clamp(20px, 2.4cqi, 28px) 22px; cursor: pointer; box-shadow: inset 0 2px 6px rgba(7,51,56,.06), inset 0 -1px 0 rgba(255,255,255,.6); transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } body.stamp-v2 .dropzone:hover, body.stamp-v2 .dropzone.is-over { border-color: var(--teal); box-shadow: inset 0 2px 6px rgba(7,51,56,.07), 0 12px 28px rgba(7,51,56,.14); transform: translateY(-2px); } body.stamp-v2 .dropzone.is-over { animation: dz-pulse .6s var(--ease) 1; } @keyframes dz-pulse { 0% { box-shadow: 0 0 0 0 rgba(13,92,99,.0); } 40% { box-shadow: 0 0 0 6px rgba(13,92,99,.16); } 100% { box-shadow: 0 0 0 0 rgba(13,92,99,0); } } body.stamp-v2 .dropzone:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13,92,99,.45); } body.stamp-v2 .dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* the icon sits on a raised cobalt pad so it reads as a 3D affordance, not flat */ body.stamp-v2 .dropzone__icon { color: var(--teal); padding: 11px; border-radius: 12px; box-sizing: content-box; background: linear-gradient(180deg, #ffffff, #f3f1ea); box-shadow: 0 6px 16px rgba(7,51,56,.14), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(7,51,56,.06); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } body.stamp-v2 .dropzone:hover .dropzone__icon, body.stamp-v2 .dropzone.is-over .dropzone__icon { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(7,51,56,.2), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(7,51,56,.06); } body.stamp-v2 .dropzone__title { font-family: var(--display); font-weight: 800; font-size: 1.24rem; line-height: 1.18; color: var(--ink); margin: 5px 0 0; } body.stamp-v2 .dropzone__hint { font-size: .84rem; line-height: 1.45; color: var(--dim); margin: 0; max-width: 40ch; } body.stamp-v2 .dropzone__none { font-family: var(--mono); font-size: .8rem; color: var(--dim); margin-top: 4px; } body.stamp-v2 .dropzone.has-file .dropzone__none { display: none; } /* Wide panel: the target lies down. Stacked, this one block was 263px of a panel that has to fit a screen; on its side it is ~110px and still the largest, most obvious thing in the column. "Няма избран" goes with it: the filled state below already says which file is loaded. */ @container cpanel (min-width: 660px) { body.stamp-v2 .dropzone { display: grid; grid-template-columns: auto 1fr; align-items: center; text-align: left; gap: 2px 15px; padding: 14px 18px; } body.stamp-v2 .dropzone__icon { grid-row: span 2; align-self: center; } body.stamp-v2 .dropzone__title { margin: 0; font-size: 1.12rem; } body.stamp-v2 .dropzone__hint { max-width: none; } body.stamp-v2 .dropzone__none { display: none; } body.stamp-v2 .dropzone.has-file .dropzone__filled { grid-column: 1 / -1; } } /* filled state: filename + size in mono, the artifact voice */ body.stamp-v2 .dropzone.has-file { border-style: solid; border-color: var(--teal); background: rgba(13,92,99,.05); } body.stamp-v2 .dropzone.has-file .dropzone__icon, body.stamp-v2 .dropzone.has-file .dropzone__hint { display: none; } body.stamp-v2 .dropzone.has-file .dropzone__title { display: none; } body.stamp-v2 .dropzone__filled { display: none; width: 100%; } body.stamp-v2 .dropzone.has-file .dropzone__filled { display: flex; align-items: center; gap: 12px; justify-content: flex-start; text-align: left; } body.stamp-v2 .dropzone__filled .doc { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--teal); color: var(--coral); } body.stamp-v2 .dropzone__filled .meta { min-width: 0; display: grid; } body.stamp-v2 .dropzone__name { display: block; font-family: var(--mono); font-weight: 600; font-size: .92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.stamp-v2 .dropzone__size { display: block; font-family: var(--mono); font-size: .78rem; color: var(--dim); } body.stamp-v2 .dropzone__change { margin-left: auto; padding-left: 10px; font-size: .8rem; font-weight: 700; color: var(--teal); flex: none; } /* form fields */ body.stamp-v2 .form-grid { display: grid; gap: 13px; margin-top: 24px; } body.stamp-v2 .cpanel-col .form-grid { margin-top: 0; } body.stamp-v2 .field { display: grid; gap: 6px; } body.stamp-v2 .field > label { font-weight: 600; font-size: .88rem; color: var(--ink); } body.stamp-v2 .field input, body.stamp-v2 .field textarea, body.stamp-v2 .field select { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid rgba(22,20,15,.16); border-radius: 10px; padding: 11px 13px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } body.stamp-v2 .field input:focus, body.stamp-v2 .field textarea:focus, body.stamp-v2 .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,92,99,.16); } body.stamp-v2 .field textarea { resize: vertical; min-height: 66px; } body.stamp-v2 .field__hint { font-size: .76rem; line-height: 1.4; color: var(--dim); margin: 0; } body.stamp-v2 .field-row { display: grid; gap: 16px; } @media (min-width: 560px) { body.stamp-v2 .field-row { grid-template-columns: 1fr 1fr; } } body.stamp-v2 .declare-row { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: .92rem; line-height: 1.45; color: var(--ink); cursor: pointer; } body.stamp-v2 .declare-row input { margin-top: 3px; width: auto; accent-color: var(--teal); } body.stamp-v2 .declare-row a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; } /* ---- the ledger: the ink field of the sheet ---- What this issuance costs and what covers it on one side, the terms and the act on the other, divided by a hairline. It used to be a terms line, a price and a button, which said nothing about credits, packs or promos even when they were the whole story of the price. */ body.stamp-v2 .certify-action { background: var(--ink); color: var(--cream); padding: clamp(14px, 1.6vw, 16px) var(--cp-pad); box-shadow: inset 0 1px 0 rgba(244,241,232,.1); } body.stamp-v2 .cpanel-ledger__inner { display: grid; gap: 11px; } /* min-width:0 is load-bearing: a grid item's automatic minimum is its min-content, and the promo input carries an intrinsic size=20 width. Without it the ledger column sized itself to ~366px inside a 314px panel on mobile. */ body.stamp-v2 .ledger-money, body.stamp-v2 .ledger-act { display: grid; gap: 11px; align-content: start; min-width: 0; } body.stamp-v2 .cpanel-ledger__inner > *, body.stamp-v2 .ledger-money > *, body.stamp-v2 .ledger-act > * { min-width: 0; } @container cpanel (min-width: 600px) { body.stamp-v2 .cpanel-ledger__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; } body.stamp-v2 .ledger-money { padding-right: clamp(20px, 3cqi, 30px); } body.stamp-v2 .ledger-act { padding-left: clamp(20px, 3cqi, 30px); border-left: 1px solid rgba(244,241,232,.16); } /* Contextual notices about the whole issuance, not about either column. Full width also keeps the pack line to one row instead of three. */ body.stamp-v2 .credit-row, body.stamp-v2 .pack-upsell { grid-column: 1 / -1; } } body.stamp-v2 .certify-action .declare-row { color: var(--cream); } body.stamp-v2 .certify-action .declare-row input { accent-color: var(--coral); } body.stamp-v2 .certify-action .declare-row a { color: var(--coral-light); } /* the amount, set as a figure on a receipt: label above, serif numeral below */ body.stamp-v2 .ledger-price { display: grid; gap: 4px; } body.stamp-v2 .ledger-price__label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-on-dark); } body.stamp-v2 .price-tag { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; } body.stamp-v2 .price-tag__amount { font-family: var(--display); font-weight: 700; font-size: 1.9rem; color: var(--cream); line-height: 1.05; } /* discount / grant markers on the price. Chips, per DESIGN.md: hairline and text, no fill, so they never compete with the coral button below. */ body.stamp-v2 .ledger-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } /* both badges ship hidden; don't reserve a row for them until one shows */ body.stamp-v2 .ledger-badges:not(:has(.pbadge:not(.hidden))) { display: none; } body.stamp-v2 .pbadge { display: inline-flex; align-items: center; border-radius: 100px; padding: 5px 12px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; } body.stamp-v2 .pbadge--promo { color: var(--coral-light); border: 1px solid rgba(255,122,89,.45); } body.stamp-v2 .pbadge--count { color: var(--dim-on-dark); border: 1px solid rgba(244,241,232,.24); } /* half-width column, six languages: give the label the room and let the arrow drop to a second line rather than overflow the button */ body.stamp-v2 .ledger-cta { width: 100%; justify-content: center; flex-wrap: wrap; padding-inline: 18px; margin-top: 2px; } /* Short screens (1366x768, 1280x800 and the like). The panel is meant to be worked without scrolling, so on a short viewport the vertical rhythm tightens instead of the form shedding fields. Nothing here changes what is on the page. */ @media (max-height: 880px) { body.stamp-v2 .certify-hero__grid { padding-block: 20px 34px; } body.stamp-v2 .certify-panel { --cp-pad: 18px; } body.stamp-v2 .cpanel-head { padding-block: 11px; } body.stamp-v2 .dropzone { padding: 13px 16px; } body.stamp-v2 .dropzone__title { font-size: 1.04rem; } body.stamp-v2 .dropzone__icon { padding: 9px; } body.stamp-v2 .field input, body.stamp-v2 .field textarea { padding: 9px 12px; } body.stamp-v2 .field textarea { min-height: 56px; } body.stamp-v2 .cpanel-main { gap: 16px; } body.stamp-v2 .cpanel-col { gap: 13px; } body.stamp-v2 .form-grid { gap: 11px; } body.stamp-v2 .opt-section { padding-top: 14px; } body.stamp-v2 .opt-section__label { margin-bottom: 9px; } body.stamp-v2 .opt-group { gap: 9px; } body.stamp-v2 .seg__opt { padding: 8px 6px; } body.stamp-v2 .certify-action { padding-block: 14px; } body.stamp-v2 .cpanel-ledger__inner { gap: 14px; } body.stamp-v2 .ledger-money, body.stamp-v2 .ledger-act { gap: 9px; } body.stamp-v2 .price-tag__amount { font-size: 1.7rem; } body.stamp-v2 .ledger-cta { padding-block: 12px; } body.stamp-v2 .promo input, body.stamp-v2 .promo .btn-outline-light { padding-block: 9px; } /* the small print steps down one notch with everything else */ body.stamp-v2 .field > label, body.stamp-v2 .issuer-field legend { font-size: .84rem; } body.stamp-v2 .field__hint { font-size: .72rem; } body.stamp-v2 .dropzone__hint { font-size: .8rem; } body.stamp-v2 .opt__text { font-size: .85rem; } body.stamp-v2 .opt__hint { font-size: .74rem; line-height: 1.3; } body.stamp-v2 .declare-row { font-size: .86rem; } body.stamp-v2 .certify-note { font-size: .71rem; } } /* ---- the 3-step "what happens" band ---- */ body.stamp-v2 .flow-band { background: var(--ink); color: var(--cream); } body.stamp-v2 .flow-band__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); align-items: center; padding-block: clamp(44px, 6vh, 72px); } @media (min-width: 820px) { body.stamp-v2 .flow-band__grid { grid-template-columns: auto 1fr; gap: clamp(40px, 6vw, 80px); } } body.stamp-v2 .flow-band__photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 360px; } body.stamp-v2 .flow-band__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.02); } body.stamp-v2 .flow-band__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(22,20,15,.45)); } body.stamp-v2 .flow-steps { display: grid; gap: 4px; counter-reset: fstep; } body.stamp-v2 .flow-steps__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1; margin: 0 0 18px; color: var(--cream); } body.stamp-v2 .flow-step { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(244,241,232,.14); } body.stamp-v2 .flow-step:last-child { border-bottom: 1px solid rgba(244,241,232,.14); } body.stamp-v2 .flow-step__n { font-family: var(--mono); font-size: .82rem; font-weight: 600; color: var(--coral); letter-spacing: .04em; } body.stamp-v2 .flow-step__h { font-weight: 600; font-size: 1.08rem; color: var(--cream); margin: 0; } body.stamp-v2 .flow-step__p { grid-column: 2; margin: 4px 0 0; font-size: .96rem; line-height: 1.5; color: var(--dim-on-dark); } /* page-load reveal (respects reduced-motion globally via the * rule above) */ body.stamp-v2 .reveal { opacity: 0; transform: translateY(14px); animation: reveal .7s var(--ease) forwards; } body.stamp-v2 .reveal--1 { animation-delay: .05s; } body.stamp-v2 .reveal--2 { animation-delay: .15s; } @keyframes reveal { to { opacity: 1; transform: none; } } /* ============================================================ CERTIFY FORM — extended fields (full live-site parity) ============================================================ */ body.stamp-v2 .field .req { color: var(--teal); margin-left: 2px; } /* issuer-type segmented control */ body.stamp-v2 .issuer-field { border: 0; padding: 0; margin: 0; min-width: 0; } body.stamp-v2 .issuer-field legend { padding: 0; font-weight: 600; font-size: .84rem; color: var(--ink); margin-bottom: 7px; } /* The default answer takes the full row; the two exceptions split the one below, so the shape of the control matches how the choice is actually made. It also solves the sizing problem: "Съавторство" and "Организация" are single words that cannot wrap, and three forced across a ~350px column spilled outside their buttons at every readable size. At half width each they fit at full size. */ body.stamp-v2 .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body.stamp-v2 .seg__opt:first-of-type { grid-column: 1 / -1; } body.stamp-v2 .seg__opt { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 8px; border: 1.5px solid rgba(22,20,15,.16); border-radius: 10px; background: var(--paper); font-weight: 600; font-size: .84rem; color: var(--dim); cursor: pointer; min-width: 0; overflow-wrap: break-word; transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); } body.stamp-v2 .seg__opt input { position: absolute; opacity: 0; pointer-events: none; } body.stamp-v2 .seg__opt:hover { border-color: rgba(13,92,99,.4); } body.stamp-v2 .seg__opt:has(input:checked) { border-color: var(--teal); background: rgba(13,92,99,.06); color: var(--ink); } body.stamp-v2 .seg__opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(13,92,99,.3); } body.stamp-v2 .issuer-extra[hidden] { display: none; } /* Additional options. These were behind a disclosure; folded away, the panel read as three fields and a button. They are choices about publicity and identity, which is most of what the declaration actually decides, so they sit open under a rule. */ body.stamp-v2 .opt-section { margin: 0; padding-top: 15px; border-top: 1px solid var(--paper-line); } body.stamp-v2 .opt-section__label { margin: 0 0 12px; } body.stamp-v2 .opt-group { display: grid; gap: 11px; } body.stamp-v2 .opt { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; cursor: pointer; } body.stamp-v2 .opt input { margin-top: 3px; width: auto; accent-color: var(--teal); } body.stamp-v2 .opt__text { font-weight: 600; font-size: .88rem; color: var(--ink); line-height: 1.35; } body.stamp-v2 .opt__hint { display: block; font-weight: 400; font-size: .78rem; color: var(--dim); margin-top: 2px; line-height: 1.35; } body.stamp-v2 .opt-nested { display: grid; gap: 12px; margin-left: 24px; padding-left: 14px; border-left: 1px solid var(--paper-line); } body.stamp-v2 .opt-nested[hidden] { display: none; } /* Locked for guests. A `disabled` input and a `title` attribute were the whole signal: measured opacity stayed 1 on both box and label, so three of the four options looked identical to the live one beside them, and on touch the title never appears at all. The reason is now text on the page. */ body.stamp-v2 .opt--locked { cursor: not-allowed; } body.stamp-v2 .opt--locked .opt__text { opacity: .55; } body.stamp-v2 .opt--locked input { opacity: .55; } body.stamp-v2 .opt__lock { display: block; margin-top: 3px; font-weight: 600; font-size: .74rem; letter-spacing: .02em; color: var(--dim); opacity: 1; } /* promo row — lives on the ink ledger, so the field is a well in the dark */ body.stamp-v2 .promo { display: flex; gap: 8px; } body.stamp-v2 .promo input { flex: 1 1 0; width: 0; min-width: 0; font: inherit; font-size: .92rem; color: var(--cream); background: rgba(244,241,232,.07); border: 1px solid rgba(244,241,232,.2); border-radius: 10px; padding: 11px 13px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } body.stamp-v2 .promo input::placeholder { color: rgba(244,241,232,.5); } body.stamp-v2 .promo input:focus { outline: none; border-color: var(--coral); background: rgba(244,241,232,.1); box-shadow: 0 0 0 3px rgba(255,122,89,.2); } body.stamp-v2 .promo .btn-outline-light { flex: none; padding: 11px 18px; font-size: .88rem; border-width: 1px; } body.stamp-v2 .promo__msg { margin: 8px 0 0; font-size: .82rem; font-weight: 600; color: var(--dim-on-dark); } /* script.js writes .success / .error / .info onto this element */ body.stamp-v2 .promo__msg.success, body.stamp-v2 .promo__msg.is-ok { color: #a8d5b8; } body.stamp-v2 .promo__msg.error, body.stamp-v2 .promo__msg.is-err { color: #ffb3a6; } body.stamp-v2 .promo__msg.info { color: var(--cream); } /* price note, on the dark action bar (grid gap owns the spacing) */ body.stamp-v2 .certify-note { margin: 0; font-size: .74rem; line-height: 1.4; color: var(--dim-on-dark); } /* ============================================================ PRIVACY BAND ============================================================ */ body.stamp-v2 .privacy-band { background: var(--cream); } body.stamp-v2 .privacy-inner { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; max-width: 880px; } @media (max-width: 600px) { body.stamp-v2 .privacy-inner { grid-template-columns: 1fr; gap: 16px; } } body.stamp-v2 .privacy-glyph { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 14px; background: rgba(13,92,99,.08); color: var(--teal); } body.stamp-v2 .privacy-h { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; color: var(--ink); margin: 0 0 8px; } body.stamp-v2 .privacy-text { margin: 0; font-size: 1.06rem; line-height: 1.6; color: var(--dim); } body.stamp-v2 .privacy-text a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } /* ============================================================ FAQ (details/summary list — cobalt chevron) ============================================================ */ body.stamp-v2 .faq .faq-list { max-width: 820px; } body.stamp-v2 .faq-item { border-top: 1px solid var(--paper-line); } body.stamp-v2 .faq-item:last-child { border-bottom: 1px solid var(--paper-line); } body.stamp-v2 .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.25; color: var(--ink); padding: 22px 0; } body.stamp-v2 .faq-q::-webkit-details-marker { display: none; } body.stamp-v2 .faq-chev { position: relative; width: 18px; height: 18px; flex: none; } body.stamp-v2 .faq-chev::before, body.stamp-v2 .faq-chev::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: var(--teal); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .24s var(--ease), opacity .24s var(--ease); } body.stamp-v2 .faq-chev::after { transform: translate(-50%, -50%) rotate(90deg); } body.stamp-v2 .faq-item[open] .faq-chev::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; } body.stamp-v2 .faq-answer { padding: 0 0 24px; } body.stamp-v2 .faq-answer p { margin: 0; font-size: 1.02rem; line-height: 1.62; color: var(--dim); max-width: 70ch; } body.stamp-v2 .faq-answer strong { color: var(--ink); } body.stamp-v2 .faq-answer a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ MODALS (cmodal — agreement / guest / payment) ============================================================ */ body.stamp-v2 .cmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; } body.stamp-v2 .cmodal[hidden] { display: none; } body.stamp-v2 .cmodal__scrim { position: absolute; inset: 0; background: oklch(0.13 0.02 195 / 0.55); animation: cmodal-fade .2s var(--ease); } body.stamp-v2 .cmodal__box { position: relative; width: min(640px, 100%); max-height: 88vh; overflow-y: auto; background: var(--paper); border-radius: 18px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 40px 90px rgba(6,40,43,.4); animation: cmodal-rise .26s var(--ease); } body.stamp-v2 .cmodal__box--narrow { width: min(460px, 100%); } body.stamp-v2 .cmodal__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; color: var(--ink); margin: 0 0 6px; } body.stamp-v2 .cmodal__intro { margin: 0 0 18px; color: var(--dim); } body.stamp-v2 .cmodal__box p { margin: 0 0 14px; font-size: .98rem; line-height: 1.55; color: var(--ink); } body.stamp-v2 .cmodal__body { border-top: 1px solid var(--paper-line); padding-top: 18px; margin-top: 4px; } body.stamp-v2 .cmodal__h { font-family: var(--display); font-weight: 800; font-size: 1.02rem; color: var(--teal); margin: 18px 0 4px; } body.stamp-v2 .cmodal__h:first-child { margin-top: 0; } body.stamp-v2 .cmodal__check { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--paper-line); } body.stamp-v2 .cmodal__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 24px; } body.stamp-v2 .cmodal__actions .btn { padding: 13px 24px; } body.stamp-v2 .pay-price { font-size: 1.05rem !important; } body.stamp-v2 .pay-price strong { font-family: var(--display); color: var(--teal); } @keyframes cmodal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cmodal-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ---- page-specific small-screen tuning ---- */ @media (max-width: 600px) { body.stamp-v2 .cmodal__actions { flex-direction: column-reverse; } body.stamp-v2 .cmodal__actions .btn { width: 100%; justify-content: center; } } /* text selection tinted to brand */ body.stamp-v2::selection { background: rgba(255,122,89,.28); } /* Per-field validation — signup.js fills #_error and adds .error to the input. None of these were ported to the preview, so inline validation was invisible. */ body.stamp-v2 .field-error { margin-top: 6px; font-size: .8rem; line-height: 1.4; color: #a3341f; } body.stamp-v2 .field-error:empty { display: none; } body.stamp-v2 .field input.error, body.stamp-v2 .field textarea.error, body.stamp-v2 .field select.error { border-color: var(--coral-deep); box-shadow: 0 0 0 3px rgba(242,97,63,.15); } /* ============================================================ POLISH LAYER v61 — depth, light, motion, finer detail Same teal/coral tokens. Levels up every page globally. ============================================================ */ /* --- Elevation system: layered, ink-tinted, not flat gray --- */ body.stamp-v2 { --sh-1: 0 1px 2px rgba(7,51,56,.06), 0 2px 6px rgba(7,51,56,.05); --sh-2: 0 2px 4px rgba(7,51,56,.05), 0 8px 22px rgba(7,51,56,.08); --sh-3: 0 6px 14px rgba(7,51,56,.08), 0 22px 48px rgba(7,51,56,.12); --ring: 0 0 0 3px rgba(13,92,99,.18); } /* --- Buttons: give them weight + a light sweep on hover --- */ body.stamp-v2 .btn-lime, body.stamp-v2 .btn-cobalt { box-shadow: var(--sh-1); position: relative; overflow: hidden; } body.stamp-v2 .btn-lime:hover, body.stamp-v2 .btn-cobalt:hover { box-shadow: var(--sh-2); } body.stamp-v2 .btn-lime::after, body.stamp-v2 .btn-cobalt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); pointer-events: none; } body.stamp-v2 .btn-lime:hover::after, body.stamp-v2 .btn-cobalt:hover::after { transform: translateX(120%); } body.stamp-v2 .btn-outline { transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); } body.stamp-v2 .btn-outline:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--sh-1); } /* --- Focus rings everywhere (a11y + crispness) --- */ body.stamp-v2 .btn:focus-visible, body.stamp-v2 .goal-btn:focus-visible, body.stamp-v2 .region-tab:focus-visible, body.stamp-v2 input:focus-visible, body.stamp-v2 select:focus-visible, body.stamp-v2 textarea:focus-visible, body.stamp-v2 .copy-btn:focus-visible, body.stamp-v2 summary:focus-visible { outline: none; box-shadow: var(--ring); } /* --- Field upgrade: softer, with focus glow --- */ body.stamp-v2 .field input, body.stamp-v2 .field textarea, body.stamp-v2 .acct-filters input, body.stamp-v2 .acct-filters select { transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } body.stamp-v2 .field input:focus, body.stamp-v2 .field textarea:focus { box-shadow: var(--ring); } /* --- Section rhythm: hairline gradient dividers between bands --- */ body.stamp-v2 .section + .section { position: relative; } /* --- Global scroll-reveal (opt-in via data-reveal) --- */ body.stamp-v2 [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } body.stamp-v2 [data-reveal][data-reveal-d="1"] { transition-delay: .08s; } body.stamp-v2 [data-reveal][data-reveal-d="2"] { transition-delay: .16s; } body.stamp-v2 [data-reveal][data-reveal-d="3"] { transition-delay: .24s; } body.stamp-v2 [data-reveal][data-reveal-d="4"] { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { body.stamp-v2 [data-reveal] { opacity: 1; transform: none; transition: none; } } /* --- Eyebrow: small accent tick before the label for detail --- */ body.stamp-v2 .section .eyebrow, body.stamp-v2 .head-split .eyebrow { display: inline-flex; align-items: center; gap: 10px; } @keyframes sealspin { to { transform: rotate(360deg); } } @keyframes ribbon { to { transform: translateX(-100%); } } /* ============================================================ GRAIN + PREMIUM DEPTH (v65) - --grain: fine SVG film-noise, replaces the line texture - elevation: layered shadows + top highlight edge so surfaces feel raised and lit (not 2D) ============================================================ */ body.stamp-v2 { /* fractal noise, ~tiny tile, used as overlay on dark fields */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* premium elevation: paired shadow (cast) + ambient, ink-tinted */ --el-1: 0 1px 2px rgba(7,51,56,.07), 0 3px 8px rgba(7,51,56,.06); --el-2: 0 4px 8px rgba(7,51,56,.07), 0 12px 28px rgba(7,51,56,.11); --el-3: 0 10px 20px rgba(7,51,56,.10), 0 28px 60px rgba(7,51,56,.16); --el-4: 0 18px 40px rgba(7,51,56,.14), 0 50px 100px rgba(7,51,56,.22); /* top highlight edge (light catching the upper rim) */ --hl: inset 0 1px 0 rgba(255,255,255,.75); --hl-dark: inset 0 1px 0 rgba(244,241,232,.14); } /* The coral controls mostly sit on the dark teal field, where the ink-tinted elevation shadows and the cream inset highlight are both invisible — they read as flat orange slabs pasted on the background. One finish, defined once and worn by every orange control on the site (hero CTAs, nav CTA, the injected mobile-sheet CTA): a lit top edge, a shaded bottom edge, and a coral-tinted ground shadow that carries on the dark field the way --el-1 carries on paper. */ body.stamp-v2 { --coral-face: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%, rgba(140,44,20,.16)); --coral-face-hi: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 55%, rgba(140,44,20,.16)); --coral-edge: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(120,38,18,.24); --coral-lift: 0 1px 2px rgba(22,20,15,.2), 0 8px 18px -6px rgba(191,64,36,.55); --coral-lift-hi: 0 2px 4px rgba(22,20,15,.22), 0 14px 26px -8px rgba(191,64,36,.6); --coral-press: inset 0 1px 3px rgba(120,38,18,.32), 0 1px 2px rgba(22,20,15,.2); } body.stamp-v2 .btn-lime, body.stamp-v2 .nav-cta { background-image: var(--coral-face); box-shadow: var(--coral-edge), var(--coral-lift); transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .22s var(--ease); } /* both base :hover rules use the `background` shorthand, which resets the gradient — restate it here so the lit edge survives the hover state */ body.stamp-v2 .btn-lime:hover, body.stamp-v2 .nav-cta:hover { background-color: var(--coral-deep); background-image: var(--coral-face-hi); box-shadow: var(--coral-edge), var(--coral-lift-hi); } body.stamp-v2 .btn-lime:active, body.stamp-v2 .nav-cta:active { transform: translateY(1px); box-shadow: var(--coral-press); } /* Subtle grain on the page itself for warmth (very faint, light surface) */ body.stamp-v2::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: var(--grain); background-size: 200px 200px; opacity: .025; mix-blend-mode: multiply; } /* .hidden utility — live script.js/hash_search.js toggle this class to show/hide issuer fields, nested options, modals, result cards, warnings. The preview originally used the [hidden] attribute; the live JS uses the class, so we need both to mean "not displayed". */ body.stamp-v2 .hidden { display: none !important; } /* ============================================================ CERTIFY FEEDBACK — status strip, toasts, issuing overlay ------------------------------------------------------------ The live script.js reports every upload failure through two channels at once: it writes into #status (setting className to "notification ") and it builds a .toast element it appends to . Neither had a single rule in this sheet, so a rejected file, a server error or a declined payment printed as unstyled body text at the very bottom of the page, four sections below the form. The user saw nothing happen. These rules give both channels a surface. ============================================================ */ /* idle / cleared state: clearStatus() restores class="status-info" and empties the node, so the strip must take no space until there is something to say */ body.stamp-v2 .status-info:empty, body.stamp-v2 .notification:empty { display: none; } body.stamp-v2 .notification, body.stamp-v2 .status-info { display: block; margin: 18px 0 0; padding: 13px 16px; border-radius: 11px; border: 1px solid transparent; font-size: .92rem; font-weight: 600; line-height: 1.45; animation: status-in .28s var(--ease) both; } @keyframes status-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } body.stamp-v2 .notification.error { background: rgba(138,42,31,.1); border-color: rgba(138,42,31,.28); color: var(--cancel); } body.stamp-v2 .notification.success { background: rgba(47,93,61,.12); border-color: rgba(47,93,61,.3); color: var(--validate); } body.stamp-v2 .notification.info, body.stamp-v2 .notification.loading { background: rgba(13,92,99,.08); border-color: rgba(13,92,99,.22); color: var(--teal); } /* the strip lives inside the ink action bar on /stamp, where the tinted light-field colors would disappear; restate for that ground */ body.stamp-v2 .certify-action .notification.error { background: rgba(255,143,122,.14); border-color: rgba(255,143,122,.4); color: #ffb3a6; } body.stamp-v2 .certify-action .notification.success { background: rgba(154,207,170,.14); border-color: rgba(154,207,170,.36); color: #a8d5b8; } body.stamp-v2 .certify-action .notification.info, body.stamp-v2 .certify-action .notification.loading { background: rgba(244,241,232,.1); border-color: rgba(244,241,232,.24); color: var(--cream); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } /* ---- result card ---- Reached on the "this file is already certified" path (the success path now navigates to /certificate-issued instead). script.js reveals it by removing .hidden and scrolls it into view. */ body.stamp-v2 .result-card { margin-top: 22px; padding: clamp(20px, 3vw, 28px); background: var(--paper); border: 1px solid var(--paper-line); border-radius: 18px; box-shadow: var(--el-2), inset 0 1px 0 rgba(255,255,255,.75); } body.stamp-v2 .result-card h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 0 0 6px; } body.stamp-v2 .result-card > p { margin: 0 0 18px; color: var(--dim); font-size: .95rem; } body.stamp-v2 .result-row { display: grid; gap: 3px; padding: 12px 0; border-top: 1px solid var(--paper-line); } body.stamp-v2 .result-row label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } body.stamp-v2 .result-value { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .82rem; word-break: break-all; } body.stamp-v2 .result-card form { margin-top: 20px; } /* The result section now sits directly under the certify form, so the "this file is already certified" card lands where the user is looking instead of below the FAQ, four screens down. It deliberately does NOT carry the .section class: the card is hidden on every other path, and a padded band would open a permanent gap between the form and the flow band. The spacing rides on the card, so it collapses with it — and flow-root keeps those margins inside the section instead of letting them collapse out and land lopsided between the two dark bands. */ body.stamp-v2 #stamp-result-section .col { display: flow-root; } body.stamp-v2 #stamp-result-section .result-card { margin-top: clamp(32px, 5vh, 56px); margin-bottom: clamp(32px, 5vh, 56px); } body.stamp-v2 .copy-btn { flex: none; width: 30px; height: 30px; border: 1px solid var(--paper-line); border-radius: 8px; background: transparent; font-size: .8rem; line-height: 1; display: grid; place-items: center; transition: border-color .16s var(--ease), background .16s var(--ease); } body.stamp-v2 .copy-btn:hover { border-color: var(--teal); background: rgba(13,92,99,.06); } /* ============================================================ PREPAID CREDITS — the certify panel in credit mode ------------------------------------------------------------ With a credit balance the issuance costs no money: script.js swaps the price tag to "1 / N credits", hides #promoCodeSection and skips the card-payment modal entirely. Without the row below, the panel still promised a payment step that never comes. ============================================================ */ body.stamp-v2 .credit-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border-radius: 11px; background: rgba(244,241,232,.08); border: 1px solid rgba(244,241,232,.16); } body.stamp-v2 .credit-row__mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,122,89,.16); color: var(--coral-light); } body.stamp-v2 .credit-row__text { margin: 0; font-size: .86rem; line-height: 1.45; font-weight: 600; color: var(--cream); } body.stamp-v2 .credit-row__sub { display: block; color: var(--dim-on-dark); font-weight: 400; } /* the 1-2 remaining nudge, inside the row it qualifies */ body.stamp-v2 .credit-row__low { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(244,241,232,.16); font-weight: 400; color: var(--dim-on-dark); } body.stamp-v2 .credit-row__low a { color: var(--coral-light); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } /* Prepaid pack suggestion. Reaches a repeat card payer holding no credits, so it has to read as an offer worth a glance and not as an alert: quieter fill than the credit row, no glyph, one coral link doing the asking. */ body.stamp-v2 .pack-upsell { margin: 0; padding: 9px 13px; border-radius: 10px; font-size: .72rem; line-height: 1.45; color: var(--dim-on-dark); background: rgba(244,241,232,.045); border: 1px solid rgba(244,241,232,.14); } body.stamp-v2 .pack-upsell__link { font-weight: 700; color: var(--coral-light); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; transition: color .18s var(--ease); } body.stamp-v2 .pack-upsell__link:hover { color: var(--coral); } /* Account-state notices in the declaration column. Neither had any styling at all, so a warning about an unverified account rendered as loose body copy. */ body.stamp-v2 .unverified-form-warning { display: flex; align-items: flex-start; gap: 11px; margin-top: 20px; padding: 13px 15px; border-radius: 11px; background: rgba(138,42,31,.08); border: 1px solid rgba(138,42,31,.26); } body.stamp-v2 .unverified-form-warning p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink); } body.stamp-v2 .unverified-form-warning .warning-icon { flex: none; font-size: 1rem; line-height: 1.45; } body.stamp-v2 .unverified-form-warning--success { background: rgba(47,93,61,.1); border-color: rgba(47,93,61,.3); } /* A disabled .btn had no treatment at all, so #agreeButton (disabled until the declaration is accepted) looked live and simply refused to respond. */ body.stamp-v2 .btn:disabled { opacity: .45; cursor: not-allowed; } body.stamp-v2 .btn:disabled:hover { transform: none; } body.stamp-v2 .btn-lime:disabled:hover { background-color: var(--coral); background-image: var(--coral-face); box-shadow: var(--coral-edge), var(--coral-lift); } /* Invalid required field: the tone is the state color, and the message sits under the field where the label put the expectation. */ body.stamp-v2 .field input.is-invalid, body.stamp-v2 .field textarea.is-invalid { border-color: var(--cancel); box-shadow: 0 0 0 3px rgba(138,42,31,.14); } body.stamp-v2 .field-error { margin: 6px 0 0; font-size: .82rem; font-weight: 600; color: var(--cancel); } /* The balance display: the serif numeral keeps the weight the euro amount had, the unit sits beside it in the body face so "3" reads as a count of things rather than a quantity of money. */ body.stamp-v2 .price-tag__unit { font-family: var(--sans); font-weight: 600; font-size: .84rem; color: var(--dim-on-dark); letter-spacing: .01em; } @keyframes issued-spin { to { transform: rotate(360deg); } } @keyframes seal-press { from { opacity: 0; transform: rotate(-8deg) scale(1.5); } to { opacity: 1; transform: rotate(-8deg) scale(1); } } body.stamp-v2 .copy-btn svg { width: 15px; height: 15px; } @media (prefers-reduced-motion: reduce) { body.stamp-v2 .issued-doc, body.stamp-v2 .issued-seal, body.stamp-v2 .notification, body.stamp-v2 .toast { animation: none; opacity: 1; } } /* ── Transfer additions ───────────────────────────────────────────────────── The third info card carries a paragraph rather than a list (the legal and technical basis), which the preview's two-card version never needed. */ body.stamp-v2 .info-card__text { margin: 0; padding: 0 var(--s-md) var(--s-md); font-size: .92rem; line-height: 1.6; color: var(--dim-on-dark); } /* The result card's copy buttons come from styles.css; only their placement inside the new rows needs saying. */ body.stamp-v2 .copy-wrap { display: inline-flex; align-items: center; gap: 8px; } /* ── Production id rules that outrank this file ───────────────────────────── styles.css styles four of this page's elements by id, at (1,0,0) — higher than any `body.stamp-v2 .class` here. #uploadButton alone carries nine rules and was repainting the declare button in production teal over the coral the design calls for. Restate the design at id specificity rather than editing shared rules other pages still depend on. */ body.stamp-v2 #uploadButton { border: 0; border-radius: 11px; background: var(--coral); background-image: var(--coral-face); color: var(--ink); font-weight: 700; font-size: .95rem; min-height: 0; padding: 16px 30px; letter-spacing: 0; box-shadow: var(--coral-edge), var(--coral-lift); } body.stamp-v2 #uploadButton:hover:not(:disabled) { background-color: var(--coral-deep); background-image: var(--coral-face-hi); box-shadow: var(--coral-edge), var(--coral-lift-hi); transform: translateY(-2px); } body.stamp-v2 #uploadButton:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--coral-press); } body.stamp-v2 #uploadButton:disabled { opacity: .55; cursor: not-allowed; transform: none; } body.stamp-v2 #agreeButton { background: var(--coral); background-image: var(--coral-face); color: var(--ink); box-shadow: var(--coral-edge), var(--coral-lift); } /* ── Undoing production's rules for the class names this page reuses ──────── styles.css styles many of these names for OTHER pages — .info-card is a tall flex card there, .faq-item a rounded filled panel, .result-card an animated element that starts at opacity 0. Everything the transferred design DOES set already wins (`body.stamp-v2 .x` is 0,2,0 against their 0,1,0); what leaks is only what the design never mentions, because the preview page loads no production stylesheet at all and never had to mention it. None of this was written by eye. Both pages were rendered and every class on them compared property by property; an entry exists here only where the two disagreed and styles.css actually declares that property for that class. tests/stamp_design_parity_test.js re-runs that comparison. */ /* .result-card is revealed by script.js on the "this file is already certified" path. Production fades it in from opacity 0 via an animation this page does not load, so without this the result would be revealed invisible. */ body.stamp-v2 .result-card { opacity: 1; width: auto; max-width: none; } body.stamp-v2 .info-card { display: block; position: static; padding: 0; /* styles.css gives .info-card `aspect-ratio: 1/1` (and 9/8 at one breakpoint) for the square cards on /about. Here it forced every accordion card to the height of its own width — three 499px boxes holding ~100px of content, and the closed ones rendering their body because the box had room for it. */ aspect-ratio: auto; min-height: auto; box-shadow: none; font-size: 1.0625rem; line-height: 1.6; } body.stamp-v2 .info-list { color: var(--cream); border-top-color: var(--cream); } body.stamp-v2 .dropzone, body.stamp-v2 .warning-icon { color: var(--cream); } body.stamp-v2 .dropzone__input { display: block; } /* styles.css sets `a[href] { font-size: 1rem }` globally, which outranks any single-class rule and blew the small print up to body size. */ body.stamp-v2 .pack-upsell__link, body.stamp-v2 .pack-upsell__link[href] { font-size: .72rem; line-height: 1.45; } /* styles.css caps #stamp-faq's column at 600px for the old narrow page; the design's own width is the 820px .faq-list, so restore that rather than uncapping and letting the questions run the full 1268px column. */ body.stamp-v2 #stamp-faq .faq-list { max-width: 820px; } body.stamp-v2 #stamp-faq .faq-item { max-width: none; } body.stamp-v2 .faq-item, body.stamp-v2 .faq-answer { background: none; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; box-shadow: none; overflow: visible; } /* styles.css still styles the OLD FAQ, a