/* ==========================================================================
CertVerify — Global Stylesheet
Design language: institutional trust. A deep-ink serif for identity,
a plain-spoken sans for interface, a mono face for reference numbers —
the same trio you'd find on a bank note or a notarized document.
========================================================================== */
/* Fonts are loaded via +
in each page's rather than @import here — @import blocks the
CSS parser and delays font discovery until this file is fully parsed. */
/* --------------------------------------------------------------------------
1. Design Tokens
-------------------------------------------------------------------------- */
:root {
/* Color — white + blue, weighted toward ink navy rather than "tech" blue */
--color-surface: #FFFFFF;
--color-surface-sunken: #F5F8FC;
--color-surface-raised: #FFFFFF;
--color-border: #E1E7F0;
--color-border-strong: #C7D2E3;
--color-navy-950: #0A1F3D;
--color-navy-900: #0F2C54;
--color-navy-800: #16386B;
--color-navy-700: #1D4C8C;
--color-blue-600: #2160C4;
--color-blue-500: #2E72E0;
--color-blue-100: #E7EFFC;
--color-blue-50: #F2F6FD;
--color-text-primary: #10233F;
--color-text-secondary: #4C5A72;
--color-text-muted: #66738C; /* darkened from #7C8AA0 — original failed WCAG AA contrast on white */
--color-text-on-navy: #F4F8FF;
--color-success-700: #0B6B4F;
--color-success-600: #0E8A65;
--color-success-100: #E1F5EC;
--color-success-border: #A9DFC6;
--color-error-700: #9A2A2A;
--color-error-600: #C43D3D;
--color-error-100: #FBEAEA;
--color-error-border: #E9B9B9;
--color-warning-700: #8A5A0B;
--color-warning-600: #B4790F;
--color-warning-100: #FCF1DE;
--color-warning-border: #EFD3A0;
/* Typography */
--font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
--font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
--fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
--fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
--fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
--fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-xs: 0.75rem;
/* Spacing scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4.5rem;
/* Layout */
--container-max: 1120px;
--container-narrow: 720px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-pill: 999px;
/* Elevation — soft, cool-toned shadows rather than generic black */
--shadow-sm: 0 1px 2px rgba(15, 44, 84, 0.06), 0 1px 1px rgba(15, 44, 84, 0.04);
--shadow-md: 0 8px 24px rgba(15, 44, 84, 0.08), 0 2px 6px rgba(15, 44, 84, 0.05);
--shadow-lg: 0 24px 60px rgba(15, 44, 84, 0.14), 0 6px 16px rgba(15, 44, 84, 0.06);
/* Motion */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--duration-fast: 150ms;
--duration-base: 240ms;
--duration-slow: 420ms;
}
/* --------------------------------------------------------------------------
2. Reset
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--color-text-primary);
background-color: var(--color-surface-sunken);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a {
color: var(--color-blue-600);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--color-navy-800); }
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--color-navy-950);
margin: 0 0 var(--space-3);
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.01em;
}
p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
button {
font-family: inherit;
cursor: pointer;
}
input {
font-family: inherit;
font-size: inherit;
}
dl { margin: 0; }
dt, dd { margin: 0; }
/* BUGFIX: several components below set an explicit `display` value
(.state-panel, .btn-primary, .btn-secondary). Author rules beat the
browser's built-in `[hidden]{display:none}` rule at equal specificity,
so JS toggling `.hidden = true` on those elements silently failed to
hide them. This restores native [hidden] behavior everywhere. */
[hidden] {
display: none !important;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
3. Utility Classes
-------------------------------------------------------------------------- */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-5);
}
/* Skip link — hidden off-screen until it receives keyboard focus,
so keyboard/screen-reader users can bypass the nav on every page. */
.skip-link {
position: absolute;
top: -48px;
left: var(--space-4);
z-index: 100;
background-color: var(--color-navy-950);
color: var(--color-text-on-navy);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-sm);
font-weight: 600;
font-size: var(--fs-small);
transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus {
top: var(--space-3);
color: var(--color-text-on-navy);
}
/* Visible keyboard focus, consistent across all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid var(--color-blue-500);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* --------------------------------------------------------------------------
4. Header / Navigation
-------------------------------------------------------------------------- */
.site-header {
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 50;
}
.navbar {
max-width: var(--container-max);
margin-inline: auto;
padding: var(--space-4) var(--space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.logo {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--color-navy-950);
}
.logo img {
height: 32px;
width: 32px;
object-fit: contain;
}
.logo span {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.25rem;
letter-spacing: -0.01em;
}
.logo:hover { color: var(--color-navy-950); }
.nav-links {
display: flex;
align-items: center;
gap: var(--space-6);
}
.nav-links a {
color: var(--color-text-secondary);
font-weight: 500;
font-size: var(--fs-small);
position: relative;
padding-block: var(--space-2);
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: var(--color-blue-500);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--duration-base) var(--ease-out);
}
.nav-links a:hover {
color: var(--color-navy-950);
}
.nav-links a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* --------------------------------------------------------------------------
5. Hero
-------------------------------------------------------------------------- */
.hero {
padding: var(--space-8) var(--space-5) var(--space-7);
background:
radial-gradient(circle at 82% 12%, var(--color-blue-100) 0%, transparent 55%),
linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-sunken) 100%);
border-bottom: 1px solid var(--color-border);
}
.hero-content {
max-width: var(--container-narrow);
margin-inline: auto;
text-align: center;
}
.hero-content h1 {
font-size: var(--fs-h1);
}
.hero-subtext {
font-size: var(--fs-body-lg);
color: var(--color-text-secondary);
max-width: 46ch;
margin-inline: auto;
margin-bottom: var(--space-6);
}
/* --------------------------------------------------------------------------
6. Search Form
-------------------------------------------------------------------------- */
.search-form {
max-width: 560px;
margin-inline: auto;
}
.form-group {
display: flex;
gap: var(--space-3);
background-color: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
padding: var(--space-2);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard);
}
.form-group:focus-within {
border-color: var(--color-blue-500);
box-shadow: 0 0 0 4px var(--color-blue-100), var(--shadow-sm);
}
.form-group input {
flex: 1;
border: none;
background: transparent;
padding: var(--space-3) var(--space-4);
font-size: var(--fs-body-lg);
font-family: var(--font-mono);
color: var(--color-text-primary);
min-width: 0;
}
.form-group input:focus { outline: none; }
.form-group input::placeholder {
color: var(--color-text-muted);
font-family: var(--font-body);
}
.form-hint {
margin-top: var(--space-3);
font-size: var(--fs-small);
color: var(--color-text-muted);
}
.form-error {
max-width: 560px;
margin: var(--space-3) auto 0;
padding: var(--space-3) var(--space-4);
background-color: var(--color-error-100);
border: 1px solid var(--color-error-border);
color: var(--color-error-700);
border-radius: var(--radius-sm);
font-size: var(--fs-small);
font-weight: 500;
animation: fade-slide-in var(--duration-base) var(--ease-out);
}
/* --------------------------------------------------------------------------
7. Buttons
-------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-size: var(--fs-body);
font-weight: 600;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-sm);
border: 1px solid transparent;
white-space: nowrap;
transition: background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
.btn-primary {
background-color: var(--color-navy-900);
color: var(--color-text-on-navy);
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background-color: var(--color-navy-800);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
color: var(--color-text-on-navy);
}
.btn-primary:active {
transform: translateY(0);
background-color: var(--color-navy-950);
}
.btn-secondary {
background-color: var(--color-surface);
color: var(--color-navy-900);
border-color: var(--color-border-strong);
}
.btn-secondary:hover {
border-color: var(--color-navy-700);
color: var(--color-navy-950);
background-color: var(--color-blue-50);
}
.btn-primary:disabled,
.btn-secondary:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-primary.is-loading {
position: relative;
}
/* --------------------------------------------------------------------------
8. How It Works / Step Cards
-------------------------------------------------------------------------- */
.how-it-works {
max-width: var(--container-max);
margin-inline: auto;
padding: var(--space-8) var(--space-5);
text-align: center;
}
.how-it-works h2 {
margin-bottom: var(--space-6);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
text-align: left;
}
.step-card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-5);
transition: transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.step-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
}
.step-card h3 {
font-size: var(--fs-h3);
color: var(--color-navy-900);
margin-bottom: var(--space-2);
}
.step-card p {
font-size: var(--fs-small);
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
9. Verify Section Shell
-------------------------------------------------------------------------- */
.verify-section {
max-width: var(--container-narrow);
margin-inline: auto;
padding: var(--space-7) var(--space-5) var(--space-8);
}
/* --------------------------------------------------------------------------
10. Loading State
-------------------------------------------------------------------------- */
.state-panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-8) var(--space-5);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
text-align: center;
}
.state-panel::before {
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid var(--color-blue-100);
border-top-color: var(--color-navy-800);
animation: spin 0.8s linear infinite;
}
.state-panel p {
color: var(--color-text-secondary);
font-weight: 500;
margin-bottom: 0;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* --------------------------------------------------------------------------
11. Certificate Result Card
-------------------------------------------------------------------------- */
.certificate-card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-7) var(--space-6);
animation: fade-slide-in var(--duration-slow) var(--ease-out);
}
/* Status badge — the seal. A layered ring motif that reads as an
embossed stamp; color and label switch with data-status. */
.status-badge {
display: flex;
align-items: center;
gap: var(--space-3);
width: fit-content;
padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
border-radius: var(--radius-pill);
background-color: var(--color-success-100);
border: 1px solid var(--color-success-border);
margin-bottom: var(--space-6);
transition: background-color var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard);
}
.status-badge img {
width: 28px;
height: 28px;
}
.status-badge span {
font-weight: 600;
font-size: var(--fs-small);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-success-700);
}
/* Modifier states, toggled via JS by adding a class or data attribute */
.status-badge.is-valid {
background-color: var(--color-success-100);
border-color: var(--color-success-border);
}
.status-badge.is-valid span { color: var(--color-success-700); }
.status-badge.is-revoked,
.status-badge.is-invalid {
background-color: var(--color-error-100);
border-color: var(--color-error-border);
}
.status-badge.is-revoked span,
.status-badge.is-invalid span { color: var(--color-error-700); }
.status-badge.is-expired {
background-color: var(--color-warning-100);
border-color: var(--color-warning-border);
}
.status-badge.is-expired span { color: var(--color-warning-700); }
.certificate-card__header {
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--space-5);
margin-bottom: var(--space-5);
}
.certificate-card__header h2 {
font-size: var(--fs-h2);
margin-bottom: var(--space-1);
overflow-wrap: anywhere;
}
.certificate-card__header p {
font-size: var(--fs-body-lg);
color: var(--color-text-secondary);
margin-bottom: 0;
}
.certificate-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5) var(--space-6);
margin-bottom: var(--space-6);
}
.detail-row {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-bottom: var(--space-3);
border-bottom: 1px dashed var(--color-border);
min-width: 0;
}
.detail-row dt {
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.detail-row dd {
font-size: var(--fs-body-lg);
font-weight: 500;
color: var(--color-text-primary);
overflow-wrap: anywhere;
}
.detail-row:has(#cert-id) dd {
font-family: var(--font-mono);
letter-spacing: 0.01em;
}
.certificate-card__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
/* --------------------------------------------------------------------------
12. Not Found / Error Card
-------------------------------------------------------------------------- */
.not-found-card {
background-color: var(--color-surface);
border: 1px solid var(--color-error-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-8) var(--space-6);
text-align: center;
animation: fade-slide-in var(--duration-slow) var(--ease-out);
}
.not-found-icon {
width: 56px;
height: 56px;
margin-inline: auto;
margin-bottom: var(--space-4);
}
.not-found-card h2 {
color: var(--color-error-700);
margin-bottom: var(--space-3);
}
.not-found-card p {
max-width: 40ch;
margin-inline: auto;
margin-bottom: var(--space-6);
}
/* --------------------------------------------------------------------------
13. Footer
-------------------------------------------------------------------------- */
.site-footer {
padding: var(--space-6) var(--space-5);
text-align: center;
border-top: 1px solid var(--color-border);
background-color: var(--color-surface);
}
.site-footer p {
font-size: var(--fs-small);
color: var(--color-text-muted);
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
14. Shared Animations
-------------------------------------------------------------------------- */
@keyframes fade-slide-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --------------------------------------------------------------------------
15. Responsive Rules
-------------------------------------------------------------------------- */
/* Tablet: 480px – 768px */
@media (max-width: 768px) {
.container,
.how-it-works,
.verify-section {
padding-inline: var(--space-4);
}
.steps-grid {
grid-template-columns: 1fr;
}
.certificate-details {
grid-template-columns: 1fr;
}
.nav-links {
gap: var(--space-4);
}
.certificate-card,
.not-found-card {
padding: var(--space-6) var(--space-4);
}
}
/* Mobile: below 480px */
@media (max-width: 480px) {
.hero {
padding: var(--space-6) var(--space-4) var(--space-6);
}
.navbar {
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
text-align: center;
}
.nav-links {
gap: var(--space-3);
font-size: var(--fs-xs);
}
.form-group {
flex-direction: column;
align-items: stretch;
}
.form-group input {
padding: var(--space-3);
}
.btn-primary,
.btn-secondary {
width: 100%;
padding: var(--space-3) var(--space-5);
min-height: 44px;
}
.certificate-card__actions {
flex-direction: column;
}
.certificate-card__actions .btn-primary,
.certificate-card__actions .btn-secondary {
width: 100%;
}
.status-badge {
width: 100%;
justify-content: center;
}
}
/* --------------------------------------------------------------------------
16. Print (used by the "Print Result" action on verify.html)
-------------------------------------------------------------------------- */
@media print {
.site-header,
.site-footer,
.certificate-card__actions {
display: none !important;
}
body {
background: var(--color-surface);
}
.certificate-card {
box-shadow: none;
border: 1px solid var(--color-text-muted);
}
}