/* ============================================================
Comporta Dreams — Colors & Type foundations
Coastal organic luxury · sun-washed · editorial
============================================================ */
/* -- Webfonts (Google Fonts, display=swap). Loaded in HTML via:
*/
:root {
/* ---------- BRAND COLORS · the four worlds ---------- */
--green: #43705B; /* Green Nature — Norte · nature, rice fields, reserve */
--navy: #345A7C; /* Ocean Breeze — Oeste · sea, boat, kayak */
--purple: #77576F; /* Wine Flavours — Sul · wine, herdades */
--amber: #D08C54; /* Tipic Tasty — Este · local food */
/* World shade pairs (from the Rosa logo's lit/shadow facets) */
--green-deep: #2A473A;
--navy-deep: #21394F;
--purple-deep: #4C3747;
--amber-deep: #855935;
/* Cultural Stone — the 5th color · 4 diagonal rosa points (barro/clay) */
--stone: #BE8A7A;
--stone-deep: #9A6B5C;
/* ---------- NEUTRALS · sand & ink ---------- */
--ink: #33322E; /* primary text */
--sand: #F5F0E8; /* page background */
--sand-2: #E8E0D0; /* alternating sections, cards */
--white: #FFFFFF; /* rosa core, cards on photos */
/* Ink tints (derived, for secondary text & hairlines) */
--ink-80: rgba(51, 50, 46, 0.80);
--ink-60: rgba(51, 50, 46, 0.60);
--ink-40: rgba(51, 50, 46, 0.40);
--ink-15: rgba(51, 50, 46, 0.15);
--ink-08: rgba(51, 50, 46, 0.08);
/* ---------- VEILS over imagery ---------- */
--veil-ink-45: rgba(51, 50, 46, 0.45); /* hero drone footage */
--veil-ink-65: rgba(51, 50, 46, 0.65); /* text-over-image protection */
/* ---------- TYPE FAMILIES ---------- */
--font-display: "Big Shoulders Display", "Arial Narrow", sans-serif; /* titles, menu */
--font-serif: "Instrument Serif", Georgia, serif; /* body, quotes */
--font-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace; /* labels, prices, tags */
/* ---------- TYPE SCALE (fluid, editorial) ---------- */
/* hero headline */
--t-display: clamp(3.5rem, 9vw, 8rem); /* @kind font */
--t-h1: clamp(2.75rem, 6vw, 5rem); /* @kind font */
--t-h2: clamp(2rem, 4vw, 3.25rem); /* @kind font */
--t-h3: clamp(1.5rem, 2.5vw, 2rem); /* @kind font */
/* serif lead / subhead */
--t-lead: clamp(1.25rem, 2vw, 1.75rem); /* @kind font */
--t-body: clamp(1.0625rem, 1.4vw, 1.25rem); /* @kind font */
/* mono labels, uppercase */
--t-label: 0.8125rem; /* @kind font */
--t-micro: 0.6875rem; /* @kind font */
/* ---------- SPACING (8pt base, generous) ---------- */
--sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem;
--sp-5: 3rem; --sp-6: 4rem; --sp-8: 6rem; --sp-10: 8rem;
/* ---------- RADII (soft, organic — never hard tech) ---------- */
--r-sm: 6px;
--r-md: 14px;
--r-lg: 24px;
--r-pill: 999px;
/* ---------- SHADOWS (low, warm, diffuse — sun-washed) ---------- */
--shadow-sm: 0 2px 8px rgba(51, 50, 46, 0.06);
--shadow-md: 0 12px 32px rgba(51, 50, 46, 0.10);
--shadow-lg: 0 28px 60px rgba(51, 50, 46, 0.16);
--shadow-float: 0 18px 50px rgba(51, 50, 46, 0.22); /* transfers bar */
/* ---------- MOTION (never linear) ---------- */
/* ease-pull = the "pull from the bag"; ease-soft = reveals / hovers */
--ease-pull: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--ease-soft: cubic-bezier(0.33, 0, 0.2, 1); /* @kind other */
--dur-quick: 250ms; /* @kind other */
--dur-base: 450ms; /* @kind other */
--dur-pull: 850ms; /* @kind other */
}
/* ============================================================
SEMANTIC ELEMENT STYLES
============================================================ */
.cd-display {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--t-display);
line-height: 0.92;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ink);
text-wrap: balance;
}
.cd-h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--t-h1);
line-height: 0.96;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--ink);
}
.cd-h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--t-h2);
line-height: 1.0;
text-transform: uppercase;
color: var(--ink);
}
.cd-h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--t-h3);
line-height: 1.05;
text-transform: uppercase;
letter-spacing: 0.01em;
color: var(--ink);
}
.cd-lead {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--t-lead);
line-height: 1.4;
color: var(--ink-80);
text-wrap: pretty;
}
.cd-body {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--t-body);
line-height: 1.55;
color: var(--ink-80);
text-wrap: pretty;
}
.cd-quote {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--t-lead);
line-height: 1.45;
color: var(--ink);
}
/* Mono labels / tags / prices — uppercase, tracked-out */
.cd-label {
font-family: var(--font-mono);
font-weight: 400;
font-size: var(--t-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-60);
}
.cd-price {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--t-body);
letter-spacing: 0.01em;
color: var(--ink);
}