/* =====================================================================
DIALED IN — DESIGN TOKENS
colors_and_type.css
Two surfaces, one identity:
- dialinai.com: DARK MODE (plum-black)
- everything else: LIGHT MODE (cream)
Import this file at the top of any HTML / kit file:
===================================================================== */
/* ---------------------------------------------------------------------
FONTS
--------------------------------------------------------------------- */
@font-face {
font-family: "DialedIn Handwriting";
src: url("fonts/DialedIn-Handwriting-Regular.otf") format("opentype"),
url("fonts/DialedIn-Handwriting-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Webfonts pulled from Google. Replace with self-hosted in production. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* ---------------------------------------------------------------------
PALETTE — locked. Do not invent new hex codes.
--------------------------------------------------------------------- */
:root {
/* Core */
--cream: #FAF7F2; /* light surface bg + text on dark */
--plum-black: #0E0814; /* dark surface bg (NOT pure black) */
--elevated: #1A1320; /* cards/inputs on dark */
--black: #000000; /* text on light */
/* Accents */
--lilac: #C8A8E9; /* THE accent color */
--lilac-soft: #E0CFF3; /* hover/wash, dotted patterns */
--plum: #3D1B5E; /* anchor / gradient bottom */
--plum-deep: #2A1242; /* pressed accent */
/* Hairlines */
--hairline-dark: rgba(250, 247, 242, 0.10); /* on plum-black */
--hairline-light: rgba(14, 8, 20, 0.08); /* on cream */
/* Text muted (use sparingly — never mid-grey) */
--ink-dim-on-dark: rgba(250, 247, 242, 0.65);
--ink-dim-on-light: rgba(14, 8, 20, 0.62);
/* Signature gradient — for 4px strips & hero washes ONLY. Never on text. */
--signature-gradient: linear-gradient(90deg, var(--lilac) 0%, var(--plum) 100%);
/* Subtle dotted-grid in lavender (for corners, low opacity) */
--dot-pattern-dark: radial-gradient(rgba(200, 168, 233, 0.18) 1px, transparent 1px);
--dot-pattern-light: radial-gradient(rgba(61, 27, 94, 0.10) 1px, transparent 1px);
--dot-size: 18px 18px;
}
/* ---------------------------------------------------------------------
SEMANTIC SURFACES
Default file inherits LIGHT (most assets are light). Use [data-surface="dark"]
on or any container to flip to the dark agency-site treatment.
--------------------------------------------------------------------- */
:root {
/* Light surface (default) */
--bg: var(--cream);
--bg-elev: #FFFFFF;
--fg: var(--black);
--fg-dim: var(--ink-dim-on-light);
--hairline: var(--hairline-light);
--card-shadow: 0 1px 2px rgba(14, 8, 20, 0.04), 0 1px 1px rgba(14, 8, 20, 0.03);
--dot-pattern: var(--dot-pattern-light);
--accent-text: var(--plum); /* lilac fails AA on cream — use plum for accent text */
}
[data-surface="dark"] {
--bg: var(--plum-black);
--bg-elev: var(--elevated);
--fg: var(--cream);
--fg-dim: var(--ink-dim-on-dark);
--hairline: var(--hairline-dark);
--card-shadow: none; /* dark uses hairlines, not shadow */
--dot-pattern: var(--dot-pattern-dark);
--accent-text: var(--lilac); /* lilac is fine on plum-black */
}
/* ---------------------------------------------------------------------
TYPE FAMILIES
--------------------------------------------------------------------- */
:root {
--font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--font-sig: "DialedIn Handwriting", "Caveat", "Bradley Hand", cursive;
}
/* ---------------------------------------------------------------------
TYPE SCALE — fluid, editorial.
Use the ROLE classes (.t-display, .t-h1, etc) so direct edits stay coherent.
--------------------------------------------------------------------- */
:root {
--fs-display: clamp(48px, 6.5vw, 96px);
--fs-h1: clamp(36px, 4.6vw, 64px);
--fs-h2: clamp(28px, 3.4vw, 44px);
--fs-h3: 24px;
--fs-body-lg: 18px;
--fs-body: 16px;
--fs-small: 14px;
--fs-kicker: 12px;
--fs-tag: 11px;
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-body: 1.55;
--tracking-kicker: 0.14em;
--tracking-tag: 0.08em;
}
/* ---------------------------------------------------------------------
SPACING / RADIUS / MOTION
--------------------------------------------------------------------- */
:root {
/* 4px base */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
/* Radius */
--r-card: 8px; /* default card */
--r-pill: 999px; /* CTA pills */
--r-cta: 12px; /* CTA "pill" actually has a 12px radius per spec */
--r-chip: 6px;
--r-input: 8px;
/* Motion */
--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
--ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
/* Container widths */
--container: 1200px;
--container-sm: 720px;
}
/* ---------------------------------------------------------------------
GLOBAL DEFAULTS
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection {
background: var(--lilac);
color: var(--black);
}
/* ---------------------------------------------------------------------
ROLE CLASSES — apply directly, or use :where wrapper.
--------------------------------------------------------------------- */
/* DISPLAY / HEADLINES — Playfair, italic emphasis on ONE word */
.t-display, h1.display {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: -0.02em;
margin: 0;
}
.t-h1, h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h1);
line-height: var(--lh-tight);
letter-spacing: -0.015em;
margin: 0;
}
.t-h2, h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: -0.01em;
margin: 0;
}
.t-h3, h3 {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-h3);
line-height: var(--lh-snug);
margin: 0;
}
/* The italic-one-word emphasis pattern. Wrap a single word in . */
em, .t-emph {
font-style: italic;
font-weight: inherit;
}
/* BODY */
.t-body-lg, p.lead {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
line-height: 1.55;
color: var(--fg);
margin: 0;
}
.t-body, p {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg);
margin: 0;
}
.t-small, small {
font-family: var(--font-body);
font-size: var(--fs-small);
line-height: 1.5;
color: var(--fg-dim);
}
/* MONO KICKER — caps, tracked, prefixed `//`. Use .t-kicker. */
.t-kicker {
font-family: var(--font-mono);
font-size: var(--fs-kicker);
font-weight: 500;
letter-spacing: var(--tracking-kicker);
text-transform: uppercase;
color: var(--accent-text);
margin: 0;
}
/* CHIP/BADGE — lowercase mono with `//` prefix. Use .t-chip on a span. */
.t-chip {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: var(--fs-tag);
font-weight: 500;
letter-spacing: var(--tracking-tag);
text-transform: lowercase;
color: var(--fg-dim);
padding: 4px 8px;
border: 1px solid var(--hairline);
border-radius: var(--r-chip);
background: transparent;
}
/* SIGNATURE — for personal/founder moments. Min 24px. Never body. */
.t-signature {
font-family: var(--font-sig);
font-weight: 400;
font-size: 32px;
line-height: 1;
color: var(--fg);
}
/* CODE / INLINE MONO */
code, .t-code {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--bg-elev);
border: 1px solid var(--hairline);
border-radius: 4px;
padding: 1px 6px;
}
/* ---------------------------------------------------------------------
PRIMITIVES — buttons, chips, dividers, dot-grid corner
--------------------------------------------------------------------- */
/* CTA: lavender pill, black text, 12px radius, no shadow. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
line-height: 1;
white-space: nowrap;
padding: 12px 20px;
border-radius: var(--r-cta);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--dur-base) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
}
.btn-primary {
background: var(--lilac);
color: var(--black);
}
.btn-primary:hover { background: var(--lilac-soft); }
.btn-primary:active { transform: translateY(1px); background: #B894DC; }
.btn-ghost {
background: transparent;
color: var(--fg);
border-color: var(--hairline);
}
.btn-ghost:hover {
border-color: var(--fg);
}
[data-surface="dark"] .btn-ghost:hover {
border-color: var(--cream);
}
/* Metric chip — three-up under hero CTA */
.metric {
border: 1px solid var(--hairline);
border-radius: var(--r-card);
padding: 16px 20px;
}
.metric .t-kicker { margin-bottom: 6px; display: block; }
.metric .value {
font-family: var(--font-display);
font-style: italic;
font-size: 22px;
line-height: 1.2;
color: var(--fg);
}
/* 4px lavender→plum gradient strip — section divider */
.gradient-strip {
height: 4px;
width: 100%;
background: var(--signature-gradient);
border: 0;
}
/* Dotted-grid corner accent */
.dot-grid {
background-image: var(--dot-pattern);
background-size: var(--dot-size);
}
/* Card */
.card {
background: var(--bg-elev);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
box-shadow: var(--card-shadow);
}