/* ---------------------------------------------------------------------------
* Digilyt Forms — design tokens (Batch 3).
*
* Copied from digilyt-site-redesign/app/globals.css. The redesign ships to
* production BEFORE the portal launches — the visual continuity target is
* redesign → portal, not current-site → portal. If the redesign slips, the
* portal slips (see docs/pre-launch-gates.md).
*
* Why copy instead of import: the redesign is Next.js + Tailwind v4. This
* repo is vanilla static HTML on Cloudflare Pages with no build step. The
* two have no shared runtime. When the redesign's tokens change, sync them
* here manually — diff against redesign/app/globals.css is the source of
* truth.
*
* Fonts are loaded directly from Google Fonts in each HTML page (Fraunces
* variable + Geist variable, matching redesign/app/fonts.ts). Use a to fonts.gstatic.com and at the top of .
* --------------------------------------------------------------------------- */
:root {
/* Colors — warm-cream palette + terracotta accent + dark-card companion */
--color-bg: #efebe1;
--color-surface: #f3efe6;
--color-surface-raised: #f8f4eb;
--color-surface-inverse: #141413;
--color-border-hairline: #e0dccf;
--color-text-primary: #191919;
--color-text-secondary: #3b3b3a;
--color-text-tertiary: #7a7872;
--color-text-on-dark: #f3efe6;
--color-text-on-dark-muted: rgba(243, 239, 230, 0.62);
--color-accent: #c85a3a;
--color-accent-hover: #a94829;
--color-accent-on-dark: #e8876a;
/* Semantic states */
--color-error: #a94829;
--color-success: #3d6b4a;
/* Font families — composed fallback chain. Fraunces (variable) for display
serif. Geist (variable) for body + UI sans. Both loaded from Google
Fonts CDN; the next/font var names from the redesign aren't available
in a no-build environment, so we reference the actual family names. */
--font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
--font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
/* Font sizes — clamp() pairs mobile → desktop per redesign SYSTEM.md §3. */
--text-display-1: clamp(3.5rem, 2.5rem + 4.5vw, 6rem);
--text-display-2: clamp(2.75rem, 2rem + 3.25vw, 4.5rem);
--text-h1: clamp(2.5rem, 2rem + 2vw, 3.5rem);
--text-h2: clamp(2rem, 1.75rem + 1vw, 2.5rem);
--text-h3: clamp(1.5rem, 1.375rem + 0.5vw, 1.75rem);
--text-body-lg: clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem);
--text-body: clamp(1rem, 0.975rem + 0.1vw, 1.0625rem);
--text-caption: 0.875rem;
--text-eyebrow: 0.8125rem;
/* Line heights */
--leading-display: 1.05;
--leading-heading: 1.15;
--leading-body: 1.5;
/* Letter spacing — editorial tracking contrast */
--tracking-display: -0.03em;
--tracking-heading: -0.02em;
--tracking-body: 0em;
--tracking-eyebrow: 0.06em;
/* Font weights */
--font-weight-display: 400;
--font-weight-heading: 500;
--font-weight-body: 400;
--font-weight-body-emphasis: 500;
/* Radius — no rounded-full for primary CTAs */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
/* Shadow — two on purpose, not a scale */
--shadow-hairline: inset 0 0 0 1px var(--color-border-hairline);
--shadow-ambient: 0 24px 48px -16px rgba(20, 20, 19, 0.08);
/* Motion */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
--ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-instant: 80ms;
--duration-fast: 180ms;
--duration-base: 260ms;
--duration-slow: 400ms;
/* Spacing rhythm */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* Containers */
--container-page: 1120px;
--container-narrow: 720px;
--gutter-desktop: 32px;
--gutter-mobile: 24px;
}
/* ---------------------------------------------------------------------------
* Base element styles — warm-cream canvas, grotesque body, serif display.
* --------------------------------------------------------------------------- */
html {
background: var(--color-bg);
color: var(--color-text-primary);
font-family: var(--font-body);
font-size: 17px;
line-height: var(--leading-body);
letter-spacing: var(--tracking-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
min-height: 100vh;
font-feature-settings: "ss01", "ss02", "cv11";
}
::selection {
background: var(--color-accent);
color: #ffffff;
}
/* ---------------------------------------------------------------------------
* Layout shell — editorial single-column with generous whitespace. Portal
* pages use this wrapper; mobile-first (375px), relaxes to 720px reading
* column on tablets + up.
* --------------------------------------------------------------------------- */
.page-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-main {
flex: 1;
width: 100%;
max-width: var(--container-narrow);
margin: 0 auto;
padding: var(--space-16) var(--gutter-mobile) var(--space-12);
box-sizing: border-box;
}
@media (min-width: 768px) {
.page-main {
padding: var(--space-24) var(--gutter-desktop) var(--space-20);
}
}
.page-header {
padding: var(--space-6) var(--gutter-mobile);
border-bottom: 1px solid var(--color-border-hairline);
}
.page-header a.wordmark {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: var(--font-weight-heading);
color: var(--color-text-primary);
text-decoration: none;
letter-spacing: var(--tracking-heading);
}
.page-footer {
border-top: 1px solid var(--color-border-hairline);
padding: var(--space-8) var(--gutter-mobile);
font-size: var(--text-caption);
color: var(--color-text-tertiary);
line-height: 1.6;
}
.page-footer a {
color: var(--color-text-secondary);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--duration-fast) var(--ease-premium);
}
.page-footer a:hover,
.page-footer a:focus-visible { border-bottom-color: var(--color-accent); }
/* ---------------------------------------------------------------------------
* Typography — display serif headings via Fraunces, body in Geist.
* --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: var(--font-weight-heading);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
color: var(--color-text-primary);
margin: 0 0 var(--space-4);
}
h1 {
font-size: var(--text-display-2);
line-height: var(--leading-display);
letter-spacing: var(--tracking-display);
font-weight: var(--font-weight-display);
margin-bottom: var(--space-6);
}
h2 { font-size: var(--text-h2); margin-top: var(--space-12); }
h3 { font-size: var(--text-h3); margin-top: var(--space-8); }
p {
margin: 0 0 var(--space-4);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-text-secondary);
}
.eyebrow {
font-family: var(--font-body);
font-size: var(--text-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-text-tertiary);
margin: 0 0 var(--space-3);
display: block;
}
a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--color-accent-hover); }
/* ---------------------------------------------------------------------------
* Hero underline accent — the ONE motion allowance, mirrored from redesign.
* Draw-in once; rest at full length. Respects prefers-reduced-motion.
* --------------------------------------------------------------------------- */
.hero-underline path {
stroke-dasharray: 220;
stroke-dashoffset: 220;
animation: hero-underline-draw var(--duration-slow) var(--ease-premium) 450ms forwards;
}
@keyframes hero-underline-draw {
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-underline path { animation: none; stroke-dashoffset: 0; }
}
/* ---------------------------------------------------------------------------
* Form primitives — used by /start, /verify, /waitlist. Mobile-first,
* accessible defaults (label + input + error region; focus outline uses
* terracotta accent).
* --------------------------------------------------------------------------- */
.field { display: block; margin: 0 0 var(--space-6); }
.field > label {
display: block;
font-size: var(--text-caption);
font-weight: 500;
color: var(--color-text-secondary);
margin-bottom: var(--space-2);
}
.field > input[type="email"],
.field > input[type="text"],
.field > input[type="tel"] {
width: 100%;
padding: var(--space-4) var(--space-4);
font: inherit;
font-family: var(--font-body);
font-size: 1rem;
background: var(--color-surface-raised);
color: var(--color-text-primary);
border: 1px solid var(--color-border-hairline);
border-radius: var(--radius-md);
box-sizing: border-box;
transition:
border-color var(--duration-fast) var(--ease-premium),
box-shadow var(--duration-fast) var(--ease-premium);
}
.field > input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(200, 90, 58, 0.18);
}
.field-error {
display: block;
font-size: var(--text-caption);
color: var(--color-error);
margin-top: var(--space-2);
min-height: 1.2em;
}
/* Primary CTA — terracotta, subtle hover lift */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-8);
font: inherit;
font-family: var(--font-body);
font-weight: 500;
font-size: 1rem;
background: var(--color-accent);
color: #ffffff;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-premium),
transform var(--duration-fast) var(--ease-premium);
text-decoration: none;
min-height: 48px; /* accessible tap target */
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: var(--color-accent-hover);
transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
background: var(--color-text-tertiary);
cursor: not-allowed;
transform: none;
}
.btn-primary:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
/* ---------------------------------------------------------------------------
* Consent block — DPDP §7 consent notice used on /start. Prominent inline
* panel, not a buried link. Style distinct from surrounding copy so users
* register that they're consenting.
* --------------------------------------------------------------------------- */
.consent-block {
background: var(--color-surface);
border: 1px solid var(--color-border-hairline);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin: var(--space-8) 0;
}
.consent-block h3 {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
margin: 0 0 var(--space-3);
color: var(--color-text-primary);
}
.consent-block ul {
margin: 0 0 var(--space-4);
padding-left: var(--space-6);
color: var(--color-text-secondary);
font-size: var(--text-caption);
line-height: 1.6;
}
.consent-block li + li { margin-top: var(--space-2); }
.consent-block label {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-caption);
color: var(--color-text-secondary);
cursor: pointer;
line-height: 1.5;
}
.consent-block input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 2px 0 0;
accent-color: var(--color-accent);
flex-shrink: 0;
}
/* ---------------------------------------------------------------------------
* OTP tile grid — /verify page. Six individual tiles with auto-advance +
* paste support. Mobile keyboard opens a numeric pad via inputmode.
* --------------------------------------------------------------------------- */
.otp-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-2);
max-width: 360px;
margin: var(--space-6) 0;
}
.otp-tile {
width: 100%;
aspect-ratio: 1;
max-width: 52px;
padding: 0;
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 500;
text-align: center;
background: var(--color-surface-raised);
color: var(--color-text-primary);
border: 1px solid var(--color-border-hairline);
border-radius: var(--radius-md);
box-sizing: border-box;
transition:
border-color var(--duration-fast) var(--ease-premium),
box-shadow var(--duration-fast) var(--ease-premium);
}
.otp-tile:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(200, 90, 58, 0.18);
}
.otp-tile.filled {
background: var(--color-surface);
}
@media (max-width: 400px) {
.otp-grid { gap: 6px; }
.otp-tile { font-size: 1.5rem; }
}
/* ---------------------------------------------------------------------------
* Thank-you / status block — used on /verify success, /waitlist success.
* --------------------------------------------------------------------------- */
.status-card {
background: var(--color-surface);
border: 1px solid var(--color-border-hairline);
border-radius: var(--radius-lg);
padding: var(--space-8);
text-align: center;
}
.status-card h2 {
margin-top: 0;
font-size: var(--text-h3);
}
/* ---------------------------------------------------------------------------
* Legal / prose pages — /privacy/in, /terms. Narrow reading column with
* editorial rhythm. Matches redesign's .supporting-prose.
* --------------------------------------------------------------------------- */
.prose {
max-width: 640px;
}
.prose > p {
font-family: var(--font-body);
font-size: var(--text-body-lg);
line-height: 1.6;
color: var(--color-text-secondary);
}
.prose > p + p { margin-top: 1.25rem; }
.prose h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-h2);
letter-spacing: var(--tracking-heading);
line-height: var(--leading-heading);
color: var(--color-text-primary);
margin-top: 3rem;
}
.prose h2 + p { margin-top: 1rem; }
.prose h3 {
font-family: var(--font-body);
font-weight: 600;
font-size: 1.125rem;
color: var(--color-text-primary);
margin-top: 2rem;
}
.prose ul, .prose ol {
color: var(--color-text-secondary);
padding-left: var(--space-6);
line-height: 1.6;
}
.prose li + li { margin-top: var(--space-2); }
/* Accessible skip-to-main-content anchor */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--color-accent);
color: #ffffff;
padding: var(--space-2) var(--space-4);
text-decoration: none;
z-index: 1000;
}
.skip-link:focus { top: 0; }