/* =============================================================
INCENSION PORTAL — BRAND DESIGN TOKENS
=============================================================
Single source of truth for every color, font, and spacing value.
Import this at the top of every page in the webapp.
Usage:
Brand: Incension · The Surrender Portal
Voice: ethereal, grounded, anti-guru
Mood: spacious, still, exhale
============================================================= */
:root {
/* ---------- COLORS: BACKGROUNDS ---------- */
--color-sky-blue: #c8dff0; /* gradient start, hero bg */
--color-light-wash: #daedf8; /* gradient mid */
--color-ice: #eef7fd; /* alternate sections */
--color-near-white: #f8fcff; /* page bg */
--color-white: #ffffff; /* cards, form fields */
/* ---------- COLORS: BRAND ACCENTS ---------- */
--color-steel-blue: #4a8fb5; /* italics, labels, borders, accent words */
--color-mid-blue: #6aadd0; /* dividers, subtle elements */
--color-deep-navy: #2a6080; /* primary CTAs, emphasis */
--color-dark-navy: #1e4f68; /* button hover, deep bands */
/* ---------- COLORS: TEXT ---------- */
--color-text-primary: #1a2830; /* H1, H2, H3 */
--color-text-body: #3d5a6b; /* paragraphs, body copy */
--color-text-caption: #7a9aaa; /* captions, small print */
--color-text-on-dark: rgba(232,244,252,0.92); /* text on dark navy */
--color-text-on-dark-muted: rgba(200,225,245,0.75); /* secondary on dark */
/* ---------- COLORS: BORDERS & DIVIDERS ---------- */
--border-soft: rgba(74,143,181,0.15);
--border-default: rgba(74,143,181,0.22);
--border-focus: rgba(74,143,181,0.45);
/* ---------- GRADIENTS ---------- */
--gradient-hero: linear-gradient(135deg,
#c8dff0 0%,
#daedf8 25%,
#eef7fd 55%,
#f8fcff 80%,
#ffffff 100%);
--gradient-dark-band: linear-gradient(135deg, #2a6080, #1e4f68);
/* ---------- TYPOGRAPHY: FONT FAMILIES ---------- */
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
/* ---------- TYPOGRAPHY: WEIGHTS ---------- */
/* CRITICAL RULE: never exceed 400 weight in body copy.
Playfair uses 300 for thin headline look, italic 400 for accents. */
--weight-thin: 300;
--weight-regular: 400;
/* ---------- TYPOGRAPHY: LABEL STYLE (eyebrows, section labels) ---------- */
--label-size: 10px;
--label-letter-spacing: 0.25em;
--label-transform: uppercase;
--label-color: #6aadd0;
/* ---------- SPACING SCALE ---------- */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 80px;
/* ---------- LAYOUT CONSTRAINTS ---------- */
--max-content-width: 820px; /* never exceed for any content container */
--max-body-width: 600px; /* body paragraph line length */
--max-card-width: 440px; /* form cards, benefit cards */
/* ---------- BORDERS & RADII ---------- */
/* CRITICAL RULE: border-radius is ALWAYS 0 for this brand.
No rounded corners on buttons, cards, inputs, ever. */
--radius: 0;
/* ---------- SHADOWS ---------- */
/* CRITICAL RULE: shadows are restrained. Only on form cards and primary CTAs. */
--shadow-card: 0 6px 40px rgba(42,96,128,0.10);
--shadow-cta: 0 6px 20px rgba(42,96,128,0.22);
--shadow-cta-hover: 0 8px 24px rgba(42,96,128,0.28);
/* ---------- TRANSITIONS ---------- */
--transition-fast: 0.15s ease;
--transition-medium: 0.3s ease;
--transition-slow: 0.6s ease;
}
/* =============================================================
GOOGLE FONTS IMPORT
Paste this in your before linking this CSS:
============================================================= */
/* =============================================================
GLOBAL RESET + BASE
============================================================= */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-family: var(--font-body);
font-weight: var(--weight-thin);
color: var(--color-text-body);
background: var(--color-near-white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* =============================================================
TYPOGRAPHY — the signature move
============================================================= */
/* H1 — Hero headlines */
h1 {
font-family: var(--font-display);
font-weight: var(--weight-thin);
font-size: clamp(38px, 6vw, 72px);
line-height: 1.1;
color: var(--color-text-primary);
letter-spacing: -0.01em;
}
/* H2 — Section headlines */
h2 {
font-family: var(--font-display);
font-weight: var(--weight-thin);
font-size: clamp(30px, 4.5vw, 52px);
line-height: 1.1;
color: var(--color-text-primary);
}
/* H3 — Card titles */
h3 {
font-family: var(--font-display);
font-weight: var(--weight-regular);
font-size: clamp(20px, 2.8vw, 28px);
line-height: 1.2;
color: var(--color-text-primary);
}
/* ITALIC ACCENT — the brand's signature move.
Inside any headline, wrap key words in to get the italic steel-blue accent. */
h1 em, h2 em, h3 em {
font-style: italic;
font-weight: var(--weight-thin);
color: var(--color-steel-blue);
}
/* Body copy */
p {
font-size: 16px;
line-height: 1.85;
color: var(--color-text-body);
max-width: var(--max-body-width);
}
/* Section label / eyebrow */
.eyebrow,
.label {
font-family: var(--font-body);
font-size: var(--label-size);
font-weight: var(--weight-regular);
letter-spacing: var(--label-letter-spacing);
text-transform: var(--label-transform);
color: var(--label-color);
}
/* Subtitle */
.subtitle {
font-size: 17px;
font-weight: var(--weight-thin);
color: var(--color-text-body);
line-height: 1.6;
max-width: 520px;
}
/* =============================================================
END — all component-level styles should extend these tokens.
Never hardcode colors or font sizes. Always reference --color-X.
============================================================= */