/* ========================================================================== Verification of Licence — verify-site styles Mobile-first, single column, designed to match the myVicRoads verification screens from the reference mockups. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* CRITICAL: ensure the HTML `hidden` attribute actually hides elements even when class-level styles set display:block or display:flex. Without this, the view-switcher in verify.js can't hide the error/loading panels and they leak into the loaded view's scroll. */ [hidden] { display: none !important; } :root { --ink: #1F2C3D; --ink-soft: #4A5A6B; --label: #6C7A87; --bg: #FFFFFF; --divider: #DDE2E7; --section-bg: #EEF1F3; --green: #22B14C; --green-dark: #1E9A40; --red: #D8462F; --red-dark: #B83A26; --mint-bg: #C7DEBF; /* the green watermark backdrop colour */ --mint-bg-dark: #B0CDA7; --safe-top: env(safe-area-inset-top, 0px); --safe-bot: env(safe-area-inset-bottom, 0px); --header-h: 56px; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100%; } body { padding-top: calc(var(--safe-top) + var(--header-h)); padding-bottom: calc(var(--safe-bot) + 24px); } button { font-family: inherit; background: none; border: none; padding: 0; cursor: pointer; color: inherit; } img { display: block; max-width: 100%; } /* Kill iOS Safari's auto-detected data links (addresses → Maps, phone numbers → tel:, dates → calendar). The format-detection meta tag in handles this on most iOS versions, but some still inject wrappers anyway. Strip the styling and disable the tap so the licence card stays static text. */ a[x-apple-data-detectors], a[x-apple-data-detectors="true"] { color: inherit !important; text-decoration: none !important; pointer-events: none !important; -webkit-text-decoration-color: transparent !important; cursor: default !important; } /* ---------- Fixed header ---------- */ .vh-header { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--safe-top) + var(--header-h)); padding-top: var(--safe-top); padding-left: 16px; padding-right: 16px; background: #FFFFFF; display: flex; align-items: center; z-index: 10; } .vh-title { flex: 1; text-align: center; font-size: 18px; font-weight: 600; color: var(--ink); margin: 0; /* Visually balance against the Close button on the right so the title stays optically centered. The right padding leaves room for "Close". */ padding-left: 56px; } .vh-close { font-size: 17px; font-weight: 500; color: var(--ink); padding: 6px 4px; } /* ---------- Body wrapper ---------- */ .vh-body { width: 100%; max-width: 480px; margin: 0 auto; } /* ---------- "Licence Verified" hero ---------- */ .hero { display: flex; flex-direction: column; align-items: center; padding: 36px 0 28px; background: var(--bg); } .hero-check { width: 64px; height: 64px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(34, 177, 76, 0.25); } .hero-title { margin: 18px 0 0; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; } /* ---------- Red banner ---------- */ .banner { background: var(--red); color: #FFFFFF; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .banner-line1 { font-size: 17px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; } .banner-line2 { font-size: 15px; font-weight: 400; opacity: 0.95; margin-top: 2px; } .banner-logo { height: 18px; width: auto; filter: brightness(0) invert(1); /* force the banner logo to white over red */ } /* ---------- Photo block ---------- */ /* The whole panel is a single PNG (verification-of-licence-background.png, 1537×1023) that already includes the green gradient AND the three coat- of-arms watermarks. The light-blue rectangle in the centre of that PNG is the placeholder where the licence photo overlays. We absolutely- position the photo frame on top of it using percentage coordinates so the relationship holds at any viewport width. */ .photo-block { position: relative; width: 100%; aspect-ratio: 1537 / 1023; background-image: url('assets/verification-of-licence-background.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .photo-frame { position: absolute; /* Sized to fully cover (and slightly overlap) the light-blue rectangle baked into verification-of-licence-background.png. The PNG's blue placeholder sits roughly from 27%-73% horizontally and 6%-94% vertically; we extend a couple of percent beyond on every edge so no blue bleeds through at any viewport width. */ left: 24%; top: 4%; width: 52%; height: 92%; border-radius: 8px; overflow: hidden; background: transparent; } /* Hologram coat-of-arms watermarks — 3 placed across the licence photo. Positions and sizes mirror the main PWA's .coa-watermark-1/2/3 rules so the verification view matches the licence card exactly: top-left bleeding past the frame edge, mid-right over the cheek area, bottom- left over the neck/jaw. Opacity is fixed at the main app's "no-tilt" resting value (0.28). On the main app a gyro module ramps this between 0.28 and 0.78 as the user tilts their phone; the verify site has no gyro, so we sit at the lowest opacity always. */ .coa-watermark { position: absolute; height: auto; pointer-events: none; opacity: 0.28; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); z-index: 3; } /* Top-left — overlaps the upper-left of the photo (slight bleed past edge) */ .coa-watermark-1 { top: 3%; left: -3%; width: 38%; } /* Mid-right — sits over the right cheek area, anchored toward the right edge */ .coa-watermark-2 { top: 30%; left: 61%; width: 38%; } /* Bottom-left — sits over the neck/jaw area */ .coa-watermark-3 { top: 50%; left: -3%; width: 36%; } .photo-img { width: 100%; height: 100%; /* `contain` (not `cover`) so the full source photo shows at its natural aspect ratio without being zoomed/cropped to fill the frame. The frame itself is sized to overlap the blue placeholder rectangle, so a slight inset on the sides where the photo's aspect doesn't match the frame's is desirable — that's what makes the photo read as a portrait laid ON TOP of the document rather than stretched edge-to-edge. */ object-fit: contain; display: block; position: relative; z-index: 1; } .photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(199, 217, 232, 0.55); /* faint blue echoing the background rectangle */ } /* ---------- Info blocks ---------- */ .info-block { padding: 24px 24px 8px; background: var(--bg); } .name { margin: 0 0 18px; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: 0.2px; word-spacing: 2px; } .divider { border: none; border-top: 1px solid var(--divider); margin: 0 0 22px; } .field { padding: 10px 0 22px; } .field-label { font-size: 15px; color: var(--label); margin-bottom: 8px; } .field-value { font-size: 18px; font-weight: 700; color: var(--ink); white-space: pre-line; line-height: 1.4; } /* ---------- Section header strip ---------- */ .section-header { background: var(--section-bg); color: var(--ink); font-size: 16px; font-weight: 700; padding: 14px 24px; margin-top: 10px; } /* ---------- Status row ---------- */ .status-row { display: flex; align-items: center; gap: 12px; } .status-chip { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .status-chip--current { background: var(--green); } .status-chip--expired { background: var(--red); } .status-text { font-size: 19px; font-weight: 700; color: var(--ink); } /* ---------- Proficiency row ---------- */ .proficiency-row { display: flex; align-items: center; gap: 12px; } .prof-badge { background: var(--red); color: #FFFFFF; font-weight: 800; font-size: 15px; border-radius: 4px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; } .prof-badge.prof-l { background: #F4A300; /* amber for Learner */ } .prof-text { font-size: 19px; font-weight: 700; color: var(--ink); } /* ---------- Verified footer card ---------- */ .verified-footer { margin: 18px 16px 0; background: var(--section-bg); border-radius: 10px; padding: 18px 20px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; } .vf-label { font-size: 15px; color: var(--ink-soft); margin-bottom: 6px; } .vf-logo { height: 56px; width: auto; margin: 6px 0 12px; } .vf-time { font-size: 15px; color: var(--ink-soft); } /* ---------- Error view ---------- */ .vh-error { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--header-h) - var(--safe-top) - var(--safe-bot)); padding: 24px; } .error-card { text-align: center; max-width: 360px; } .error-icon { display: flex; justify-content: center; margin-bottom: 16px; } .error-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; } .error-text { font-size: 15px; color: var(--ink-soft); line-height: 1.5; } /* ---------- Loading view ---------- */ .vh-loading { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--header-h) - var(--safe-top) - var(--safe-bot)); } .spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(31, 44, 61, 0.15); border-top-color: var(--ink); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Small-screen tweaks ---------- */ @media (max-width: 360px) { .hero-title { font-size: 22px; } .name { font-size: 22px; } .banner-line1 { font-size: 15px; } .banner-line2 { font-size: 13px; } }