/* =========================================================================
Riveros | Torres & Cía. — Design Tokens
--------------------------------------------------------------------------
Warm-editorial system. Near-white surfaces, warm near-black ink, restrained
bordeaux accent. Fraunces (display) + Bricolage Grotesque (UI/body).
Variable fonts via Google Fonts. No additional .ttf files ship with this
system.
Type choice (state-it-up-front, per house rules):
display = Fraunces — variable, opsz auto, weights 300–500
ui/body = Bricolage Grotesque — variable, weights 400/500/600
========================================================================= */
/* Local brand fonts.
The user supplied the full Fraunces variable font (axes: opsz, wght, SOFT,
WONK) plus its italic companion. We use those exclusively for display.
Bricolage Grotesque is still pulled from Google Fonts — drop in :
*/
@font-face {
font-family: "Fraunces";
src: url("./fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations"),
url("./fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fraunces";
src: url("./fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations"),
url("./fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
:root {
/* ---------------------------------------------------------------------
COLOR — raw tokens
Pick these from the catalogue. Do not improvise hex values mid-design.
--------------------------------------------------------------------- */
/* Surfaces */
--bg-base: #FAFAF7; /* near-white — primary surface, ~80% of every view */
--bg-elevated: #F1EFE9; /* slightly warm off-white — quoted blocks, alt rows */
--bg-deep: #1A1414; /* near-black with a bordeaux undertone — the one dark moment per page */
/* Ink */
--ink: #1A1A1A; /* primary text on near-white */
--ink-muted: #5F5755; /* secondary text, warm gray */
--ink-subtle: #8F8785; /* tertiary, captions, hairline labels */
--ink-inverse: #FAFAF7; /* near-white text on --bg-deep */
/* Lines */
--line: #DDD8D2; /* hairline borders — the only border weight */
--line-deep: #2D2222; /* hairline on dark surfaces */
/* Accent — restrained bordeaux, the signature */
--accent: #6B1F2E;
--accent-deep: #4E1320; /* hover only */
--accent-tint: rgba(107, 31, 46, 0.08); /* subtle highlight bg, sparingly */
/* Functional (rare in this product) */
--danger: #8E2C2C;
--success: #3B6B43;
/* ---------------------------------------------------------------------
SEMANTIC — name-by-role aliases. Prefer these in components.
--------------------------------------------------------------------- */
--fg-1: var(--ink); /* primary text */
--fg-2: var(--ink-muted); /* secondary text */
--fg-3: var(--ink-subtle); /* tertiary text */
--fg-inverse: var(--ink-inverse);
--link: var(--ink);
--link-hover-underline: var(--accent);
/* ---------------------------------------------------------------------
TYPE FAMILIES
--------------------------------------------------------------------- */
--font-display: "Fraunces", "Times New Roman", Georgia, serif;
--font-ui: "Bricolage Grotesque", ui-sans-serif, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* ---------------------------------------------------------------------
TYPE SCALE — clamp()-driven, extreme contrast
--------------------------------------------------------------------- */
--fs-hero: clamp(3rem, 7vw, 6.5rem); /* 48 → 104 */
--fs-section: clamp(2rem, 4vw, 3.25rem); /* 32 → 52 */
--fs-subsection: clamp(1.375rem, 2.2vw, 1.875rem); /* 22 → 30 */
--fs-pullquote: clamp(1.25rem, 2vw, 1.625rem);/* 20 → 26 */
--fs-body: 1.0625rem; /* 17 */
--fs-body-lg: 1.1875rem; /* 19 */
--fs-caption: 0.8125rem; /* 13 */
--fs-eyebrow: 0.875rem; /* 14 */
--fs-button: 0.9375rem; /* 15 */
/* Tracking */
--tr-hero: -0.02em;
--tr-section: -0.015em;
--tr-tight: -0.01em;
--tr-normal: 0;
--tr-caption: 0.02em;
--tr-eyebrow: 0.15em;
/* Line heights */
--lh-display: 1.05;
--lh-section: 1.1;
--lh-snug: 1.3;
--lh-body: 1.65;
--lh-tight: 1.2;
/* ---------------------------------------------------------------------
LAYOUT
--------------------------------------------------------------------- */
--container-max: 1240px;
--container-pad: clamp(1.25rem, 5vw, 3rem);
--section-gap: clamp(6rem, 12vh, 10rem);
/* Spacing (rare — prefer Tailwind utilities or ad-hoc values per layout) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-8: 3rem;
--space-10: 4.5rem;
--space-12: 6rem;
--space-16: 10rem;
/* Radii */
--r-none: 0;
--r-sm: 2px;
--r-md: 4px; /* buttons, inputs — max for any rectangular element */
--r-pill: 999px; /* used ONLY for the WhatsApp affordance */
/* Hairline — the only shadow that exists */
--hairline: 0 1px 0 var(--line);
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-std: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 180ms;
--dur-base: 250ms;
--dur-reveal: 700ms;
}
/* =========================================================================
GLOBAL — base typography + surface
========================================================================= */
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-ui);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
color: var(--fg-1);
background: var(--bg-base);
font-feature-settings: "ss01", "kern";
}
/* Paper-grain overlay — the only background ornament. */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.03;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
}
/* =========================================================================
SEMANTIC TYPE — apply via class OR via element if you opt in globally
========================================================================= */
.t-hero, h1.t-hero {
font-family: var(--font-display);
font-size: var(--fs-hero);
font-weight: 300;
font-variation-settings: "opsz" 144;
letter-spacing: var(--tr-hero);
line-height: var(--lh-display);
color: var(--fg-1);
}
.t-section {
font-family: var(--font-display);
font-size: var(--fs-section);
font-weight: 400;
font-variation-settings: "opsz" 96;
letter-spacing: var(--tr-section);
line-height: var(--lh-section);
}
.t-subsection {
font-family: var(--font-display);
font-size: var(--fs-subsection);
font-weight: 400;
font-variation-settings: "opsz" 48;
letter-spacing: var(--tr-tight);
line-height: var(--lh-snug);
}
.t-pullquote {
font-family: var(--font-display);
font-size: var(--fs-pullquote);
font-style: italic;
font-weight: 400;
letter-spacing: var(--tr-tight);
line-height: 1.35;
color: var(--fg-1);
}
.t-eyebrow {
font-family: var(--font-ui);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
color: var(--fg-2);
}
.t-body {
font-family: var(--font-ui);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
color: var(--fg-1);
}
.t-body-lg {
font-family: var(--font-ui);
font-size: var(--fs-body-lg);
font-weight: 400;
line-height: 1.55;
color: var(--fg-1);
}
.t-caption {
font-family: var(--font-ui);
font-size: var(--fs-caption);
font-weight: 400;
letter-spacing: var(--tr-caption);
color: var(--fg-3);
}
.t-button {
font-family: var(--font-ui);
font-size: var(--fs-button);
font-weight: 500;
letter-spacing: 0.01em;
}
/* =========================================================================
PRIMITIVES — opt-in component classes (used in preview cards + UI kit)
========================================================================= */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 12px 22px;
background: var(--accent);
color: var(--ink-inverse);
border: 1px solid var(--accent);
border-radius: var(--r-md);
font-family: var(--font-ui);
font-size: var(--fs-button);
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
transition: background var(--dur-base) var(--ease-std),
border-color var(--dur-base) var(--ease-std);
cursor: pointer;
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-secondary {
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
color: var(--fg-1);
text-decoration: none;
border-bottom: 1px solid var(--line);
padding-bottom: 2px;
font-family: var(--font-ui);
font-size: var(--fs-button);
font-weight: 500;
}
.btn-secondary .arrow {
display: inline-block;
transition: transform var(--dur-base) var(--ease-std);
}
.btn-secondary:hover { border-bottom-color: var(--accent); color: var(--accent); }
.btn-secondary:hover .arrow { transform: translateX(2px); }
.input-line {
width: 100%;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
padding: 10px 0;
font-family: var(--font-ui);
font-size: var(--fs-body);
color: var(--fg-1);
outline: none;
transition: border-color var(--dur-base) var(--ease-std);
}
.input-line:focus { border-bottom-width: 2px; border-bottom-color: var(--accent); padding-bottom: 9px; }
.input-line::placeholder { color: var(--fg-3); }
a.link-prose {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--line);
text-underline-offset: 0.18em;
transition: text-decoration-color var(--dur-base) var(--ease-std);
}
a.link-prose:hover { text-decoration-color: var(--accent); }
/* Focus ring — always visible */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* =========================================================================
MOTION — pure CSS reveal sequence
Add .reveal to elements; chain delays with --d (in ms).
========================================================================= */
@keyframes reveal-rise {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal {
opacity: 0;
animation: reveal-rise var(--dur-reveal) var(--ease-out) forwards;
animation-delay: calc(var(--d, 0) * 1ms);
}