/* ============================================================ PassVision site styles: layout chrome on top of the design system (passvision-ds.css). Header, footer, hero, diagrams, responsive grids, reveal. Uses only --pv-* tokens. ============================================================ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Skip link */ .pv-skip { position: fixed; left: 16px; top: -60px; z-index: 1001; background: var(--pv-white); color: var(--pv-ink); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: var(--pv-radius-md); text-decoration: none; transition: top var(--pv-dur-fast) var(--pv-ease); } .pv-skip:focus { top: 16px; } /* ---------------- HEADER / NAV ---------------- */ /* #site-header is a plain wrapper the JS fills; display:contents removes its box so the sticky .site-nav sticks relative to , not the wrapper. */ #site-header { display: contents; } .site-nav { position: sticky; top: 0; z-index: var(--pv-z-nav); background: var(--pv-midnight); color: var(--pv-white); border-bottom: 1px solid var(--pv-d-border); } .site-nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; } .site-nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .site-nav__brand span { color: var(--pv-white); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; } /* The door-reveal motif: the mark's corner piece slides into place once on load (design brief §7). Killed by the reduced-motion guard in the DS. */ @keyframes pvCornerOpen { from { transform: translate(9px, -11px); } to { transform: translate(0, 0); } } .site-nav__brand svg g rect:nth-of-type(3) { animation: pvCornerOpen 600ms var(--pv-ease) 150ms backwards; } .site-nav__links { display: flex; align-items: center; gap: 8px; margin-left: 16px; } .nav-link, .nav-dd__btn { font-family: var(--pv-font-sans); color: rgba(255,255,255,0.78); font-size: 15px; font-weight: 500; text-decoration: none; padding: 10px 12px; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color var(--pv-dur) var(--pv-ease); } .nav-link:hover, .nav-dd__btn:hover, .nav-link.is-active { color: var(--pv-white); } .nav-dd { position: relative; } .nav-dd__chev { transition: transform var(--pv-dur) var(--pv-ease); } .nav-dd.is-open .nav-dd__chev { transform: rotate(180deg); } .nav-dd__panel { position: absolute; top: 100%; left: 0; padding-top: 6px; display: none; z-index: var(--pv-z-dropdown); } .nav-dd.is-open .nav-dd__panel { display: block; } .nav-dd__inner { background: var(--pv-d-card); border: 1px solid var(--pv-d-border); border-radius: var(--pv-radius-md); padding: 8px; min-width: 272px; display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(0,0,0,0.35); } .nav-dd__inner a { padding: 10px 12px; color: rgba(255,255,255,0.85); font-size: 14px; text-decoration: none; border-radius: var(--pv-radius-sm); transition: background var(--pv-dur) var(--pv-ease), color var(--pv-dur) var(--pv-ease); } .nav-dd__inner a:hover, .nav-dd__inner a.is-active { background: rgba(255,255,255,0.06); color: var(--pv-white); } .site-nav__cta { margin-left: auto; display: flex; gap: 12px; align-items: center; } .site-nav__burger { display: none; margin-left: auto; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--pv-d-border); border-radius: var(--pv-radius-md); color: var(--pv-white); cursor: pointer; } /* Mobile menu */ .site-mobile { display: none; position: fixed; inset: 0; z-index: var(--pv-z-modal); background: var(--pv-midnight); flex-direction: column; padding: 24px; overflow-y: auto; } .site-mobile.is-open { display: flex; } .site-mobile__top { display: flex; align-items: center; justify-content: space-between; } .site-mobile__brand { display: flex; align-items: center; gap: 10px; color: var(--pv-white); font-weight: 600; font-size: 18px; } .site-mobile__close { width: 44px; height: 44px; background: none; border: 1px solid var(--pv-d-border); border-radius: var(--pv-radius-md); color: var(--pv-white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .site-mobile__links { display: flex; flex-direction: column; gap: 4px; margin-top: 40px; } .site-mobile__links a { color: var(--pv-white); font-size: 22px; font-weight: 500; text-decoration: none; padding: 12px 0; } .site-mobile__cta { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } @media (max-width: 1280px) { .site-nav__links, .site-nav__cta { display: none; } .site-nav__burger { display: inline-flex; } } /* ---------------- HERO ---------------- */ .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--pv-space-6); align-items: center; } .hero-glow { position: absolute; inset: -48px -64px; background: radial-gradient(closest-side, rgba(33,56,107,0.5), transparent 72%); } @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: var(--pv-space-5); } .hero-visual { display: none; } } /* Product / report panel (used on Home + Free Auditor) */ .pv-panel { border-radius: var(--pv-radius-lg); overflow: hidden; } .pv-panel--dark { background: var(--pv-d-card); border: 1px solid var(--pv-d-border); } .pv-panel--light { background: var(--pv-white); border: 1px solid var(--pv-l-border); box-shadow: var(--pv-shadow-md); } .pv-panel__head { font-family: var(--pv-font-mono); font-size: var(--pv-text-2xs); letter-spacing: 0.04em; padding: 12px 18px; display: flex; justify-content: space-between; gap: 12px; } .pv-panel__row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; } .pv-panel--dark .pv-panel__head, .pv-panel--dark .pv-panel__row { border-bottom: 1px solid var(--pv-d-border); color: var(--pv-d-muted); } .pv-panel--light .pv-panel__head, .pv-panel--light .pv-panel__row { border-bottom: 1px solid var(--pv-l-border); color: var(--pv-l-text-secondary); } .pv-mono { font-family: var(--pv-font-mono); font-size: var(--pv-text-2xs); letter-spacing: 0.04em; } /* ---------------- SPLIT / DIAGRAM GRIDS ---------------- */ .split-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--pv-space-6); align-items: start; } .audit-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--pv-space-6); align-items: center; } .how-diagram { display: grid; grid-template-columns: 300px 1fr; gap: var(--pv-space-4); } @media (max-width: 920px) { .split-grid, .audit-grid, .how-diagram { grid-template-columns: 1fr; gap: var(--pv-space-5); } } /* ---------------- FOOTER ---------------- */ .site-footer { padding-block: var(--pv-space-6); border-top: 1px solid var(--pv-d-border); } .site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1fr; gap: var(--pv-space-4); } .site-footer__col { display: flex; flex-direction: column; gap: 10px; } .site-footer__col a { color: var(--pv-d-muted); font-size: 14px; text-decoration: none; transition: color var(--pv-dur) var(--pv-ease); } .site-footer__col a:hover { color: var(--pv-white); } .site-footer__h { font-family: var(--pv-font-mono); font-size: var(--pv-text-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.85); margin-bottom: 6px; } .site-footer__bottom { margin-top: var(--pv-space-5); padding-top: var(--pv-space-3); border-top: 1px solid var(--pv-d-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } @media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } } /* ---------------- HELPERS ---------------- */ .pv-link { color: var(--pv-ink); font-weight: 600; font-size: var(--pv-text-sm); text-decoration: none; transition: color var(--pv-dur) var(--pv-ease); } .pv-link:hover { color: var(--pv-signal); } .pv-section--dark .pv-link { color: var(--pv-white); } .pv-section--dark .pv-link:hover { color: var(--pv-neutral-300); } .pv-cardlink { text-decoration: none; color: inherit; display: flex; flex-direction: column; } .stack-sm > * + * { margin-top: var(--pv-space-2); } .pv-checkline { display: flex; gap: 12px; align-items: flex-start; } .pv-check { color: var(--pv-success); flex-shrink: 0; font-weight: 700; } .pv-x { color: var(--pv-danger); flex-shrink: 0; font-weight: 700; } .eq-cards { align-items: stretch; } .eq-cards > * { height: 100%; } /* Reveal (progressive enhancement; JS sets initial hidden state) */ [data-reveal] { will-change: opacity, transform; } /* ---------------- PRINT ---------------- */ /* Legal/trust pages get printed by procurement reviewers: drop the dark chrome, print black on white, hide navigation and CTA bands. */ @media print { .site-nav, .site-mobile, .site-footer, #site-footer, .pv-skip, #cta, .hero-glow, .site-nav__burger { display: none !important; } .pv-section, .pv-section--dark, .pv-section--paper, .pv-section--white { background: #FFFFFF !important; color: #000000 !important; padding-block: 20px !important; } .pv-section--dark :where(h1, h2, h3, p, span, div, a, li) { color: #000000 !important; } .pv-eyebrow, .pv-lede, .pv-muted, .pv-label { color: #333333 !important; } a { color: #000000 !important; text-decoration: underline; } .pv-card { box-shadow: none !important; border: 1px solid #CCCCCC !important; } }