/*
* QuantumFlex SmartForms — Design System
* Copyright (c) 2025-2026 QuantumFlex AI Inc.
* All rights reserved. PROPRIETARY SOFTWARE - NOT FOR DISTRIBUTION
*
* Design language: "industrial precision, digital craft."
* Type pair: Fraunces (display) + Geist (UI) + Geist Mono (technical).
* Used by the auth-funnel + dashboard refresh starting 2026-05-10.
*
* Add new design-system primitives here. Keep common.css for utility
* classes (qf-hidden, spacing, etc.); this file defines tokens and
* larger components (buttons, cards, sections, form inputs).
*/
/* =============================================================
* 1. Tokens
* ============================================================= */
:root {
/* Brand */
--qf-primary: #0ea5e9;
--qf-primary-deep: #0c4a6e;
--qf-primary-glow: #38bdf8;
--qf-primary-soft: #e0f2fe;
--qf-primary-edge: #bae6fd;
/* Ink and surfaces */
--qf-ink: #0f172a;
--qf-ink-muted: #334155;
--qf-ink-soft: #475569;
--qf-ink-faint: #64748b;
--qf-ink-ghost: #94a3b8;
--qf-paper: #ffffff;
--qf-paper-warm: #fafbfc;
--qf-paper-tint: #f5f7fa;
--qf-paper-deep: #eef1f5;
--qf-hairline: #e7eaee;
--qf-hairline-soft: #eef1f5;
/* Dark surfaces */
--qf-steel: #0b1220;
--qf-steel-soft: #131b2c;
--qf-steel-hairline: #1f2a3d;
/* Accents */
--qf-amber: #f59e0b;
--qf-amber-soft: #fef3c7;
--qf-amber-deep: #92400e;
--qf-mint: #10b981;
--qf-mint-soft: #d1fae5;
--qf-rose: #f43f5e;
--qf-rose-soft: #ffe4e6;
/* Type */
--qf-font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
--qf-font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--qf-font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
/* Radii */
--qf-radius-xs: 4px;
--qf-radius-sm: 6px;
--qf-radius-md: 10px;
--qf-radius-lg: 16px;
--qf-radius-xl: 24px;
--qf-radius-pill: 9999px;
/* Shadows */
--qf-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--qf-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--qf-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
--qf-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
--qf-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);
--qf-shadow-glow: 0 0 0 4px rgba(14, 165, 233, 0.16);
--qf-shadow-press: inset 0 1px 0 rgba(255, 255, 255, 0.16);
/* Motion */
--qf-ease: cubic-bezier(0.22, 1, 0.36, 1);
--qf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--qf-dur-fast: 160ms;
--qf-dur: 260ms;
--qf-dur-slow: 420ms;
/* Layout */
--qf-container: 72rem; /* 1152px */
--qf-container-narrow: 44rem; /* 704px */
--qf-container-wide: 80rem; /* 1280px */
}
/* =============================================================
* 2. Base reset additions (page-level only; keep light)
* ============================================================= */
/* Universal border-box. Without this, defaults to content-box
* and inputs+buttons in the same form render at different effective
* widths (input-padding ≠ button-padding) even when both declare
* width: 100%. Scoped to .qf-doc descendants so the rule only
* touches templates that opted in via . */
.qf-doc, .qf-doc *, .qf-doc *::before, .qf-doc *::after {
box-sizing: border-box;
}
.qf-doc {
font-family: var(--qf-font-ui);
color: var(--qf-ink);
background: var(--qf-paper-warm);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "ss02", "cv11";
text-rendering: optimizeLegibility;
}
/* =============================================================
* 3. Typography
* ============================================================= */
.qf-display {
font-family: var(--qf-font-display);
font-weight: 500;
font-style: normal;
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
letter-spacing: -0.022em;
line-height: 1.04;
color: var(--qf-ink);
}
.qf-display em {
font-family: var(--qf-font-display);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
color: var(--qf-primary);
}
.qf-eyebrow {
font-family: var(--qf-font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--qf-ink-faint);
display: inline-flex;
align-items: center;
gap: 0.625rem;
}
.qf-eyebrow::before {
content: "";
width: 1.25rem;
height: 1px;
background: currentColor;
opacity: 0.5;
}
.qf-lede {
font-size: 1.1875rem;
line-height: 1.55;
color: var(--qf-ink-soft);
max-width: 38rem;
}
.qf-h2 {
font-family: var(--qf-font-display);
font-weight: 500;
font-variation-settings: "opsz" 96, "SOFT" 20;
font-size: clamp(1.875rem, 3vw, 2.5rem);
letter-spacing: -0.018em;
line-height: 1.1;
color: var(--qf-ink);
}
.qf-h3 {
font-family: var(--qf-font-ui);
font-weight: 600;
font-size: 1.0625rem;
letter-spacing: -0.005em;
color: var(--qf-ink);
}
.qf-mono {
font-family: var(--qf-font-mono);
font-feature-settings: "ss01", "ss02";
font-variant-numeric: tabular-nums;
}
/* =============================================================
* 4. Chips (mono spec labels — "PRO", "v2.1.3", "FREE", "01 / PROBLEM")
* ============================================================= */
.qf-chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-family: var(--qf-font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.3125rem 0.625rem;
border-radius: var(--qf-radius-sm);
background: var(--qf-paper-tint);
color: var(--qf-ink-soft);
border: 1px solid var(--qf-hairline);
line-height: 1;
}
.qf-chip-primary {
background: var(--qf-primary-soft);
color: var(--qf-primary-deep);
border-color: var(--qf-primary-edge);
}
.qf-chip-glow {
background: var(--qf-primary);
color: white;
border-color: transparent;
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18);
}
.qf-chip-amber {
background: var(--qf-amber-soft);
color: var(--qf-amber-deep);
border-color: rgba(245, 158, 11, 0.3);
}
.qf-chip-mint {
background: var(--qf-mint-soft);
color: #065f46;
border-color: rgba(16, 185, 129, 0.25);
}
.qf-chip-dot::before {
content: "";
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: var(--qf-mint);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
/* =============================================================
* 5. Buttons
* ============================================================= */
.qf-btn {
--btn-bg: var(--qf-paper);
--btn-fg: var(--qf-ink);
--btn-bd: var(--qf-hairline);
--btn-bg-hover: var(--qf-paper-tint);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--qf-font-ui);
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1;
padding: 0.75rem 1.125rem;
border-radius: var(--qf-radius-md);
background: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--btn-bd);
cursor: pointer;
text-decoration: none;
transition: background var(--qf-dur-fast) var(--qf-ease),
border-color var(--qf-dur-fast) var(--qf-ease),
transform var(--qf-dur-fast) var(--qf-ease),
box-shadow var(--qf-dur-fast) var(--qf-ease),
color var(--qf-dur-fast) var(--qf-ease);
box-shadow: var(--qf-shadow-xs);
position: relative;
isolation: isolate;
white-space: nowrap;
}
.qf-btn:hover {
background: var(--btn-bg-hover);
border-color: var(--qf-ink-ghost);
transform: translateY(-1px);
box-shadow: var(--qf-shadow-sm);
}
.qf-btn:active {
transform: translateY(0);
box-shadow: var(--qf-shadow-xs);
}
.qf-btn:focus-visible {
outline: none;
box-shadow: var(--qf-shadow-glow);
}
.qf-btn-primary {
--btn-bg: var(--qf-primary);
--btn-fg: #ffffff;
--btn-bd: transparent;
--btn-bg-hover: var(--qf-primary-deep);
box-shadow: var(--qf-shadow-press), 0 1px 2px rgba(2, 132, 199, 0.4),
0 4px 12px rgba(14, 165, 233, 0.28);
}
.qf-btn-primary:hover {
border-color: transparent;
box-shadow: var(--qf-shadow-press), 0 2px 4px rgba(2, 132, 199, 0.5),
0 8px 20px rgba(14, 165, 233, 0.35);
}
.qf-btn-ghost {
--btn-bg: transparent;
--btn-bd: transparent;
--btn-bg-hover: var(--qf-paper-tint);
box-shadow: none;
}
.qf-btn-ghost:hover { box-shadow: none; }
.qf-btn-on-dark {
--btn-bg: rgba(255, 255, 255, 0.06);
--btn-fg: #ffffff;
--btn-bd: rgba(255, 255, 255, 0.18);
--btn-bg-hover: rgba(255, 255, 255, 0.12);
}
.qf-btn-on-dark:hover { border-color: rgba(255, 255, 255, 0.32); }
.qf-btn-lg {
font-size: 1rem;
padding: 0.9375rem 1.5rem;
border-radius: var(--qf-radius-md);
}
.qf-btn-sm {
font-size: 0.8125rem;
padding: 0.5rem 0.875rem;
}
.qf-btn-block {
width: 100%;
}
.qf-btn-arrow::after {
content: "→";
font-size: 1.05em;
transition: transform var(--qf-dur-fast) var(--qf-ease);
}
.qf-btn-arrow:hover::after {
transform: translateX(3px);
}
/* =============================================================
* 6. Links — animated underline
* ============================================================= */
.qf-link {
color: var(--qf-primary-deep);
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size var(--qf-dur) var(--qf-ease),
color var(--qf-dur-fast) var(--qf-ease);
padding-bottom: 1px;
}
.qf-link:hover {
background-size: 100% 1px;
color: var(--qf-primary);
}
.qf-link-on-dark {
color: #ffffff;
}
/* =============================================================
* 7. Cards
* ============================================================= */
.qf-card {
background: var(--qf-paper);
border: 1px solid var(--qf-hairline);
border-radius: var(--qf-radius-lg);
padding: 1.75rem;
box-shadow: var(--qf-shadow-sm);
transition: transform var(--qf-dur) var(--qf-ease),
box-shadow var(--qf-dur) var(--qf-ease),
border-color var(--qf-dur) var(--qf-ease);
position: relative;
overflow: hidden;
}
.qf-card-interactive:hover {
transform: translateY(-4px);
border-color: var(--qf-primary-edge);
box-shadow: var(--qf-shadow-lg);
}
.qf-card-interactive::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--qf-primary), transparent);
opacity: 0;
transition: opacity var(--qf-dur) var(--qf-ease);
}
.qf-card-interactive:hover::after { opacity: 1; }
.qf-card-icon {
width: 2.75rem;
height: 2.75rem;
border-radius: var(--qf-radius-md);
background: linear-gradient(135deg, var(--qf-primary-soft), white);
border: 1px solid var(--qf-primary-edge);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--qf-primary-deep);
font-size: 1.375rem;
margin-bottom: 1.25rem;
}
/* =============================================================
* 8. Form inputs
* ============================================================= */
.qf-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.qf-label {
font-family: var(--qf-font-ui);
font-size: 0.8125rem;
font-weight: 500;
color: var(--qf-ink-muted);
letter-spacing: 0.005em;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.qf-label-hint {
font-family: var(--qf-font-mono);
font-size: 0.6875rem;
color: var(--qf-ink-faint);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.qf-input {
font-family: var(--qf-font-ui);
font-size: 0.9375rem;
color: var(--qf-ink);
background: var(--qf-paper);
border: 1px solid var(--qf-hairline);
border-radius: var(--qf-radius-md);
padding: 0.75rem 0.875rem;
width: 100%;
transition: border-color var(--qf-dur-fast) var(--qf-ease),
box-shadow var(--qf-dur-fast) var(--qf-ease),
background var(--qf-dur-fast) var(--qf-ease);
box-shadow: var(--qf-shadow-xs);
}
.qf-input::placeholder {
color: var(--qf-ink-ghost);
}
.qf-input:hover {
border-color: var(--qf-ink-ghost);
}
.qf-input:focus {
outline: none;
border-color: var(--qf-primary);
box-shadow: var(--qf-shadow-glow);
background: var(--qf-paper);
}
.qf-input-with-affix {
position: relative;
}
.qf-input-affix {
position: absolute;
right: 0.875rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--qf-ink-faint);
cursor: pointer;
padding: 0.25rem;
border-radius: var(--qf-radius-xs);
transition: color var(--qf-dur-fast) var(--qf-ease);
}
.qf-input-affix:hover {
color: var(--qf-primary);
}
.qf-message {
border-radius: var(--qf-radius-md);
padding: 0.75rem 0.875rem;
font-size: 0.875rem;
line-height: 1.45;
border: 1px solid transparent;
}
.qf-message-error {
background: var(--qf-rose-soft);
color: #9f1239;
border-color: rgba(244, 63, 94, 0.25);
}
.qf-message-success {
background: var(--qf-mint-soft);
color: #065f46;
border-color: rgba(16, 185, 129, 0.25);
}
/* =============================================================
* 9. Layout primitives
* ============================================================= */
.qf-container {
width: 100%;
max-width: var(--qf-container);
margin-inline: auto;
padding-inline: 1.5rem;
}
.qf-container-narrow {
width: 100%;
max-width: var(--qf-container-narrow);
margin-inline: auto;
padding-inline: 1.5rem;
}
.qf-container-wide {
width: 100%;
max-width: var(--qf-container-wide);
margin-inline: auto;
padding-inline: 1.5rem;
}
.qf-section {
padding-block: clamp(4rem, 8vw, 7rem);
position: relative;
}
.qf-section-tight {
padding-block: clamp(2.5rem, 5vw, 4rem);
}
.qf-grid {
display: grid;
gap: 1.5rem;
}
.qf-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.qf-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px) {
.qf-grid-3 { grid-template-columns: 1fr; }
.qf-grid-2 { grid-template-columns: 1fr; }
}
/* Blueprint grid background — extremely subtle. */
.qf-blueprint {
background-image:
linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
background-size: 32px 32px;
background-position: -1px -1px;
}
/* Soft cyan gradient mesh for hero halos */
.qf-mesh {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.qf-mesh::before,
.qf-mesh::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.55;
}
.qf-mesh::before {
width: 520px;
height: 520px;
top: -160px;
left: -120px;
background: radial-gradient(circle, var(--qf-primary-glow), transparent 60%);
}
.qf-mesh::after {
width: 440px;
height: 440px;
bottom: -180px;
right: -100px;
background: radial-gradient(circle, #818cf8, transparent 60%);
opacity: 0.4;
}
/* Hairline divider between sections */
.qf-rule {
height: 1px;
background: var(--qf-hairline);
border: none;
margin: 0;
}
/* =============================================================
* 10. Marketing nav (top of public pages)
* ============================================================= */
.qf-nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--qf-hairline-soft);
}
.qf-nav-inner {
max-width: var(--qf-container);
margin-inline: auto;
padding: 0.875rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.qf-brand {
display: inline-flex;
align-items: center;
gap: 0.625rem;
font-family: var(--qf-font-ui);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: -0.005em;
color: var(--qf-ink);
text-decoration: none;
}
.qf-brand-mark {
width: 1.625rem;
height: 1.625rem;
border-radius: 0.4375rem;
background: linear-gradient(135deg, var(--qf-primary) 0%, var(--qf-primary-deep) 100%);
display: inline-grid;
place-items: center;
color: white;
font-family: var(--qf-font-mono);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0;
box-shadow: var(--qf-shadow-press), 0 2px 6px rgba(14, 165, 233, 0.45);
}
.qf-nav-links {
display: flex;
align-items: center;
gap: 1.75rem;
}
.qf-nav-link {
font-size: 0.875rem;
color: var(--qf-ink-soft);
text-decoration: none;
font-weight: 500;
transition: color var(--qf-dur-fast) var(--qf-ease);
}
.qf-nav-link:hover { color: var(--qf-ink); }
@media (max-width: 720px) {
.qf-nav-links .qf-nav-link { display: none; }
}
/* =============================================================
* 11. Hero (public pages)
* ============================================================= */
.qf-hero {
position: relative;
overflow: hidden;
padding-top: clamp(4rem, 9vw, 7rem);
padding-bottom: clamp(4rem, 8vw, 6rem);
background:
radial-gradient(60% 60% at 50% 0%, rgba(14, 165, 233, 0.08), transparent 70%),
var(--qf-paper-warm);
}
.qf-hero-inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 52rem;
margin-inline: auto;
}
.qf-hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
margin-block: 1.25rem 1.5rem;
}
.qf-hero-actions {
display: inline-flex;
gap: 0.625rem;
flex-wrap: wrap;
justify-content: center;
margin-top: 0.5rem;
}
.qf-hero-meta {
margin-top: 2rem;
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--qf-font-mono);
font-size: 0.75rem;
color: var(--qf-ink-faint);
letter-spacing: 0.04em;
}
/* =============================================================
* 12. Section heading block
* ============================================================= */
.qf-section-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
margin-bottom: 3rem;
max-width: 38rem;
}
.qf-section-head-center {
align-items: center;
text-align: center;
margin-inline: auto;
}
/* =============================================================
* 13. Pricing
* ============================================================= */
.qf-price {
display: flex;
align-items: baseline;
gap: 0.375rem;
font-family: var(--qf-font-display);
font-weight: 500;
font-variation-settings: "opsz" 96, "SOFT" 0;
color: var(--qf-ink);
}
.qf-price-amount {
font-size: 3rem;
line-height: 1;
letter-spacing: -0.03em;
}
.qf-price-cadence {
font-family: var(--qf-font-mono);
font-size: 0.75rem;
color: var(--qf-ink-faint);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.qf-feature-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.qf-feature-list li {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-size: 0.9375rem;
color: var(--qf-ink-soft);
line-height: 1.45;
}
.qf-feature-list li::before {
content: "";
flex-shrink: 0;
width: 1.125rem;
height: 1.125rem;
border-radius: 50%;
margin-top: 0.1875rem;
background:
url("data:image/svg+xml;utf8,") center/0.75rem no-repeat,
var(--qf-mint-soft);
}
.qf-pricing-card {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.qf-pricing-card-featured {
border-color: var(--qf-primary-edge);
background:
radial-gradient(120% 60% at 100% 0%, rgba(14, 165, 233, 0.10), transparent 60%),
var(--qf-paper);
box-shadow: var(--qf-shadow-md), 0 0 0 1px var(--qf-primary-edge);
}
/* =============================================================
* 14. Footer (public)
* ============================================================= */
.qf-footer {
background: var(--qf-steel);
color: var(--qf-ink-ghost);
padding-block: 4rem 2rem;
position: relative;
}
.qf-footer-grid {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 3rem;
margin-bottom: 3rem;
}
@media (max-width: 800px) {
.qf-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.qf-footer h4 {
font-family: var(--qf-font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--qf-ink-ghost);
margin-bottom: 1.25rem;
}
.qf-footer-link {
display: block;
color: #cbd5e1;
text-decoration: none;
font-size: 0.9375rem;
margin-bottom: 0.625rem;
transition: color var(--qf-dur-fast) var(--qf-ease);
}
.qf-footer-link:hover { color: white; }
.qf-footer .qf-brand { color: white; }
.qf-footer-meta {
border-top: 1px solid var(--qf-steel-hairline);
padding-top: 1.5rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
font-family: var(--qf-font-mono);
font-size: 0.75rem;
color: var(--qf-ink-faint);
}
/* =============================================================
* 15. Auth-card (login / signup / reset shells)
* ============================================================= */
.qf-auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
position: relative;
overflow: hidden;
background:
radial-gradient(50% 50% at 100% 0%, rgba(14, 165, 233, 0.10), transparent 70%),
radial-gradient(40% 50% at 0% 100%, rgba(99, 102, 241, 0.08), transparent 70%),
var(--qf-paper-warm);
}
.qf-auth-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 26rem;
background: var(--qf-paper);
border: 1px solid var(--qf-hairline);
border-radius: var(--qf-radius-lg);
padding: 2.5rem;
box-shadow: var(--qf-shadow-lg);
}
.qf-auth-head {
margin-bottom: 1.75rem;
text-align: center;
}
.qf-auth-head h1 {
/* Geist sans (not Fraunces) on auth cards — Stripe/Linear/Vercel
* pattern. The serif Fraunces was visually editorial-heavy on a
* small auth card; sans-serif reads as "professional product" and
* sits better with the Geist brand lockup directly above it. */
font-family: var(--qf-font-ui);
font-weight: 600;
font-size: 1.25rem;
letter-spacing: -0.012em;
line-height: 1.2;
color: var(--qf-ink);
margin-block: 0.875rem 0.25rem;
}
.qf-auth-sub {
color: var(--qf-ink-faint);
font-size: 0.9375rem;
line-height: 1.5;
}
.qf-auth-form {
display: flex;
flex-direction: column;
gap: 1.125rem;
}
.qf-auth-foot {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--qf-hairline-soft);
text-align: center;
color: var(--qf-ink-faint);
font-size: 0.875rem;
}
.qf-auth-back {
position: absolute;
top: 1.5rem;
left: 1.5rem;
z-index: 2;
color: var(--qf-ink-faint);
text-decoration: none;
font-size: 0.8125rem;
display: inline-flex;
align-items: center;
gap: 0.375rem;
transition: color var(--qf-dur-fast) var(--qf-ease);
}
.qf-auth-back:hover { color: var(--qf-ink); }
.qf-recaptcha-notice {
text-align: center;
font-size: 0.6875rem;
color: var(--qf-ink-faint);
margin-top: 0.25rem;
line-height: 1.5;
}
.qf-recaptcha-notice a {
color: var(--qf-ink-soft);
text-decoration: underline;
text-decoration-color: var(--qf-hairline);
text-underline-offset: 2px;
}
.qf-divider {
display: flex;
align-items: center;
gap: 0.875rem;
color: var(--qf-ink-ghost);
font-family: var(--qf-font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-block: 1.25rem;
}
.qf-divider::before,
.qf-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--qf-hairline);
}
/* =============================================================
* 16. Page-load reveal animations
* ============================================================= */
@media (prefers-reduced-motion: no-preference) {
.qf-reveal {
opacity: 0;
transform: translateY(12px);
animation: qf-reveal-up var(--qf-dur-slow) var(--qf-ease) forwards;
}
.qf-reveal-1 { animation-delay: 60ms; }
.qf-reveal-2 { animation-delay: 140ms; }
.qf-reveal-3 { animation-delay: 220ms; }
.qf-reveal-4 { animation-delay: 300ms; }
.qf-reveal-5 { animation-delay: 380ms; }
.qf-reveal-6 { animation-delay: 460ms; }
@keyframes qf-reveal-up {
to {
opacity: 1;
transform: translateY(0);
}
}
}
@media (prefers-reduced-motion: reduce) {
.qf-reveal { opacity: 1; }
.qf-btn:hover, .qf-card-interactive:hover { transform: none; }
}
/* =============================================================
* 17. Quotation block
* ============================================================= */
.qf-quote {
border-left: 3px solid var(--qf-amber);
background: linear-gradient(90deg, rgba(245, 158, 11, 0.06), transparent 60%);
padding: 1.25rem 1.5rem;
border-radius: 0 var(--qf-radius-md) var(--qf-radius-md) 0;
font-family: var(--qf-font-display);
font-style: italic;
font-variation-settings: "opsz" 96, "SOFT" 60;
font-size: 1.0625rem;
color: var(--qf-ink-muted);
line-height: 1.5;
}
.qf-quote-attr {
display: block;
margin-top: 0.625rem;
font-family: var(--qf-font-mono);
font-size: 0.6875rem;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--qf-ink-faint);
}
/* =============================================================
* 18. Skip-link refresh (accessibility)
* ============================================================= */
.qf-skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--qf-primary-deep);
color: white;
padding: 8px 16px;
z-index: 10001;
font-size: 0.875rem;
text-decoration: none;
border-radius: 0 0 var(--qf-radius-sm) 0;
}
.qf-skip-link:focus { top: 0; }
*:focus-visible {
outline: 2px solid var(--qf-primary);
outline-offset: 2px;
}