/* ============================================================ docv-page.css — scoped overrides for /technology/document-verification/ Loaded AFTER document-verification.css (Layout pageCss array), so equal- specificity rules here win. Kept in a separate sheet so the base page sheet's rules stay untouched. All selectors scoped under .p-document-verification; tokens only. Two fixes (Nacim review 2026-08-01): · G12 — Smart-capture sibling cards must show visuals of the SAME size. The card copies wrap to different line counts across widths, so each .dv-cap__viz started at a different Y. Pin the copy slot to one height at the 5-up breakpoint → every viz starts at the same Y and shares an identical height (grid stretch + viz flex:1 do the rest). · G13 — one illustration language. The framing/auto viewfinder mocks were near-black tiles among light sibling illustrations. Recolor the .dv-vf mock to the light Workflow-Builder language: light camera surface, white document skeleton with a soft shadow, one blue photo accent, blue capture guides, and the existing discreet green status chip. ============================================================ */ /* ---------- G12 · equal viz across the capture row ---------- */ /* At the 5-up breakpoint the cards sit in one row; pinning the copy slot to a single height makes all five .dv-cap__viz panels start at the same Y. The value clears the worst-case 4-line copy at both 1440 and 1280 (measured 190–193px); no copy exceeds 4 lines at these widths. */ @media (min-width: 1120px) { .p-document-verification .dv-cap__copy { min-height: 196px; } } /* ---------- G13 · light-language viewfinder (framing + auto) ---------- */ /* the camera surface — light, not near-black; matches the blue-100 viz field the OCR / barcode / NFC siblings sit on */ .p-document-verification .dv-vf { background: radial-gradient(120% 120% at 50% 8%, color-mix(in oklab, var(--color-blue-100) 72%, var(--color-white)), var(--color-white) 82%); box-shadow: inset 0 0 0 1px var(--color-border-light); } /* the framed document → white skeleton card with a soft lift (like .dv-ocr) */ .p-document-verification .dv-vf__id { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-border-light); } /* the portrait photo → the one blue accent, mirroring .dv-ocr__photo */ .p-document-verification .dv-vf__id::before { background: linear-gradient(150deg, var(--color-blue-200), var(--color-blue-100)); } /* the text rows → grey skeleton lines that read on white */ .p-document-verification .dv-vf__id::after { background: color-mix(in oklab, var(--color-blue-500) 22%, var(--color-blue-100)); box-shadow: none; } /* capture guides read crisply on the light surface */ .p-document-verification .dv-vf__corner { border-color: var(--color-blue-500); } .p-document-verification .dv-vf__scan { background: linear-gradient(90deg, transparent, var(--color-blue-500), transparent); box-shadow: none; } /* auto-detect variant accents */ .p-document-verification .dv-vf__detect { border-color: color-mix(in oklab, var(--color-blue-500) 70%, transparent); } .p-document-verification .dv-vf__shutter { border-color: var(--color-blue-500); } /* ============================================================ Podium-ref polish pass (Sofia, 2026-08-06) — interactions and texture only; content and team visuals untouched. ============================================================ */ /* ---------- the invisible phone (shared HowItWorks) ---------- solution.css parks .sol-how__stage at opacity:0 until the traveling phone sets .is-how-near — standalone walks never get it (same bug and fix as face-recognition.css). Three classes out-rank solution.css regardless of sheet order. */ .p-document-verification .p-solution .sol-flow-wrap.is-float .sol-how__stage, .p-document-verification .p-solution .sol-how__stage { opacity: 1; transform: translateY(24px); } /* ---------- capture cards answer the pointer ---------- */ .p-document-verification .dv-cap { transition: transform 0.35s var(--ease-out-expo); } .p-document-verification .dv-cap:hover { transform: translateY(-4px); } .p-document-verification .dv-cap__arrow { transition: color 0.25s, transform 0.25s; } .p-document-verification .dv-cap:hover .dv-cap__arrow { color: var(--color-blue); transform: translate(2px, -2px); } /* ---------- home-language unification (Sofia, 2026-08-06) ---------- The coverage numbers and the proof strip take the HOME statbar recipe (hairline rail, caps, hover lift); the client wall takes the home logo-wall tile recipe. One stat/logo language across both pages. */ /* global coverage: the two numbers anchor on a hairline rail and tie to the map with a bottom hairline — no more floating in the whitespace */ .p-document-verification .dv-global__big { gap: 0; padding-bottom: 24px; border-bottom: 1px solid var(--color-border-light); /* tighter seat so the map rides higher (Sofia, 2026-08-06) */ margin-bottom: 16px; } .p-document-verification .dv-global__bigstat { border-left: 1px solid var(--color-border-light); padding-left: 32px; padding-right: 64px; transition: transform 0.3s var(--ease-out-expo); } .p-document-verification .dv-global__bigstat:hover { transform: translateY(-4px); } .p-document-verification .dv-global__bigcap { margin-top: 8px; transition: color 0.25s ease; } .p-document-verification .dv-global__bigstat:hover .dv-global__bigcap { color: var(--color-foreground); } /* proof logo wall: the rounded-tile recipe moved INTO the shared sheet (document-verification.css) — one wall on every technology page (Sofia 2026-08-13); no override needed here anymore */ /* proof strip = the home statbar items: 22px figures, caps under, hover lift with the figure taking the brand blue */ .p-document-verification .dv-proof2__cell { transition: transform 0.3s var(--ease-out-expo); } .p-document-verification .dv-proof2__cell:hover { transform: translateY(-4px); } .p-document-verification .dv-proof2__cell-value { font-size: 22px; letter-spacing: var(--track-tight); transition: color 0.25s ease; } .p-document-verification .dv-proof2__cell:hover .dv-proof2__cell-value { color: var(--color-blue); } .p-document-verification .dv-proof2__cell-cap { margin-top: 8px; transition: color 0.25s ease; } .p-document-verification .dv-proof2__cell:hover .dv-proof2__cell-cap { color: var(--color-foreground); } /* smart-capture plate + .cap__screen live in document-verification.css (shared by this page and /technology/ocr) */ /* ---------- map tour (docv-map.js) ---------- .is-lit mirrors the hover state so the sweeping pin shows its flag + country; the lit core rings a step brighter. */ .p-document-verification .dv-global__pin.is-lit { z-index: 2; } .p-document-verification .dv-global__pin.is-lit .dv-global__pin-label { opacity: 1; transform: translate(-50%, 0); } .p-document-verification .dv-global__pin.is-lit::before { box-shadow: 0 0 0 5px color-mix(in oklab, var(--color-blue-500) 38%, transparent); } /* canonical flag asset (design-system rule: never emoji, never recolor; sized by width — 14px, the country-pill size) */ /* the __label ancestor out-ranks .dv-global__map img { width:100% } */ .p-document-verification .dv-global__pin-label .dv-global__pin-flag { display: inline-block; /* the global img{display:block} would break the line */ width: 14px; height: auto; margin-right: 4px; vertical-align: -1px; border-radius: 2px; /* the map's img dim treatment (invert + 0.3) must NOT touch the flag */ filter: none; opacity: 1; } /* ---------- map exploration pass (Sofia, 2026-08-06) ---------- The labels were shrink-to-fit against the 12px pin (the containing block), cropping names mid-word: width max-content ends that for good. Everything scales up so the tour and hovers read as REAL interactions: bigger pills, bigger flags, and a 34px invisible hit pad around every pin so exploring stops feeling like needlework. */ .p-document-verification .dv-global__pin { /* transparent padding = generous hit target; the visible core and the ping live in the 14px content box */ width: 14px; height: 14px; padding: 10px; background-clip: content-box; cursor: pointer; } .p-document-verification .dv-global__pin::before, .p-document-verification .dv-global__pin::after { inset: 10px; } .p-document-verification .dv-global__pin-label { width: max-content; bottom: calc(100% - 4px); padding: 9px 14px; font-size: 15px; font-weight: 500; border-radius: 12px; } .p-document-verification .dv-global__pin-label .dv-global__pin-flag { width: 19px; margin-right: 7px; vertical-align: -2px; }