/* ============================================================
base.css — VidForge AI Global Reset & Typography
Load order: tokens.css → base.css → layout.css → ...
Rule: Zero raw hex values. All values via var(--...) tokens.
============================================================ */
/* ─── GOOGLE FONTS IMPORT NOTE ───────────────────────────────
Add these tags inside BEFORE the CSS stylesheets:
─────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════
1. BOX MODEL RESET
════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ════════════════════════════════════════════════════════════
2. ROOT / HTML
════════════════════════════════════════════════════════════ */
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
tab-size: 4;
}
/* ════════════════════════════════════════════════════════════
3. BODY — Global Surface + Mesh Gradient (GFD §3.5)
════════════════════════════════════════════════════════════ */
body {
font-family: var(--primitive-font-body);
font-size: var(--text-body-lg);
font-weight: 400;
line-height: 1.65;
letter-spacing: 0;
color: var(--text-primary);
background-color: var(--bg-base);
min-height: 100vh;
overflow-x: hidden;
/* Ambient mesh glow — anchored to viewport edges (GFD §3.5) */
background-image:
radial-gradient(ellipse 70% 60% at 10% -10%, rgba(240, 82, 20, 0.08), transparent),
radial-gradient(ellipse 50% 50% at 90% 110%, rgba(80, 80, 80, 0.12), transparent);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ════════════════════════════════════════════════════════════
4. HEADING HIERARCHY (GFD §2.5 Weight Pairing Rules)
════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
color: var(--text-primary);
}
h1 {
font-family: var(--primitive-font-display);
font-size: var(--text-h1);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.1;
}
h2 {
font-family: var(--primitive-font-display);
font-size: var(--text-h2);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.2;
}
h3 {
font-family: var(--primitive-font-display);
font-size: var(--text-h3);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
}
h4 {
font-family: var(--primitive-font-body);
font-size: var(--text-h4);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.4;
}
h5 {
font-family: var(--primitive-font-body);
font-size: var(--text-body-xl);
font-weight: 600;
line-height: 1.5;
}
h6 {
font-family: var(--primitive-font-body);
font-size: var(--text-body-lg);
font-weight: 600;
line-height: 1.5;
}
/* ════════════════════════════════════════════════════════════
5. TYPOGRAPHY UTILITIES
════════════════════════════════════════════════════════════ */
/* Eyebrow label — GFD §2.6 */
.eyebrow {
display: block;
font-family: var(--primitive-font-body);
font-size: var(--text-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent-primary);
margin-bottom: var(--primitive-space-3);
}
/* Section sub-heading — used beneath h2 in landing sections */
.section-sub {
font-size: var(--text-body-xl);
color: var(--text-secondary);
line-height: 1.65;
max-width: 56ch;
margin-top: var(--primitive-space-3);
}
/* Mono utility */
.text-mono {
font-family: var(--primitive-font-mono);
font-size: var(--text-body-sm);
}
/* ════════════════════════════════════════════════════════════
6. LINKS
════════════════════════════════════════════════════════════ */
a {
color: var(--accent-primary);
text-decoration: none;
transition: var(--transition-fast);
}
a:hover {
color: var(--accent-primary-hover);
}
/* ════════════════════════════════════════════════════════════
7. FOCUS RING — Accessibility (GFD §17)
:focus-visible ensures rings appear for keyboard, not mouse.
════════════════════════════════════════════════════════════ */
:focus {
outline: none;
}
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--primitive-radius-sm);
}
/* ════════════════════════════════════════════════════════════
8. LISTS
════════════════════════════════════════════════════════════ */
ul,
ol {
list-style: none;
}
/* ════════════════════════════════════════════════════════════
9. MEDIA ELEMENTS
════════════════════════════════════════════════════════════ */
img,
video,
svg {
display: block;
max-width: 100%;
height: auto;
}
img {
font-size: var(--text-body-sm);
color: var(--text-tertiary);
}
/* ════════════════════════════════════════════════════════════
10. FORM ELEMENT RESETS
════════════════════════════════════════════════════════════ */
button,
input,
textarea,
select {
font: inherit;
color: inherit;
background: none;
border: none;
}
button {
cursor: pointer;
line-height: inherit;
}
textarea {
resize: vertical;
}
select {
appearance: none;
-webkit-appearance: none;
}
/* ════════════════════════════════════════════════════════════
11. TABLE RESET
════════════════════════════════════════════════════════════ */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ════════════════════════════════════════════════════════════
12. CUSTOM SCROLLBAR
════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
background: var(--bg-hover);
border-radius: var(--primitive-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
background: var(--bg-active);
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--bg-hover) var(--bg-base);
}
/* ════════════════════════════════════════════════════════════
13. TEXT SELECTION
════════════════════════════════════════════════════════════ */
::selection {
background-color: var(--accent-primary-muted);
color: var(--text-primary);
}
/* ════════════════════════════════════════════════════════════
14. ACCESSIBILITY UTILITY
════════════════════════════════════════════════════════════ */
/* Screen-reader-only — visually hidden but accessible to assistive tech */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ════════════════════════════════════════════════════════════
15. FLASK FLASH MESSAGES
════════════════════════════════════════════════════════════ */
.flash-container {
position: fixed;
top: calc(var(--nav-height) + var(--primitive-space-4));
left: 50%;
transform: translateX(-50%);
z-index: 1800;
display: flex;
flex-direction: column;
gap: var(--primitive-space-3);
width: min(520px, calc(100vw - var(--primitive-space-8)));
pointer-events: none;
}
.flash {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--primitive-space-4);
padding: var(--primitive-space-4) var(--primitive-space-5);
border-radius: var(--primitive-radius-lg);
font-size: var(--text-body-md);
font-weight: 500;
box-shadow: var(--shadow-3);
pointer-events: all;
animation: toast-in var(--primitive-duration-base) var(--primitive-ease-spring) forwards;
/* Default (info) */
background: var(--bg-overlay);
border: 1px solid var(--border-default);
color: var(--text-primary);
}
.flash--success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.flash--error { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); }
.flash--warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.flash--info { background: var(--color-info-bg); border-color: var(--color-info); color: var(--color-info); }
.flash-message { flex: 1; }
.flash-close {
background: none; border: none; cursor: pointer;
color: inherit; opacity: 0.6; font-size: var(--text-body-lg);
padding: 0; line-height: 1; flex-shrink: 0;
transition: opacity var(--primitive-duration-fast) var(--primitive-ease-standard);
}
.flash-close:hover { opacity: 1; }