@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap");
/* =====================================================================
TERRAZZA UNICO IBIZA — Design System
colors_and_type.css
---------------------------------------------------------------------
Foundational tokens derived from the printed PDF menu (13-5-2026).
Aesthetic: warm parchment paper, elegant high-contrast serif type,
a single botanical accent (bougainvillea magenta). Monochrome black
emblem. Bilingual / multilingual, mobile-first.
Fonts are loaded from Google Fonts (nearest matches — see README,
flagged for replacement if exact brand fonts exist):
Cormorant Garamond -> display / dish names / section titles
Jost -> UI labels, translations, captions, numerals
Add to :
===================================================================== */
:root {
/* ---------- BRAND PALETTE ---------- */
/* Parchment — the paper. Warm, hand-textured cream. */
--parchment-100: #FCF6EC; /* lightest — raised cards, sheets */
--parchment-200: #F9EFDF; /* default page tint */
--parchment-300: #F6E7D7; /* base page background */
--parchment-400: #EFDDC9; /* sunken wells, hairline fills */
--parchment-500: #EAD9C4; /* edges, borders, shadow tone */
--parchment-600: #DBC6AC; /* strong divider / disabled */
/* Ink — warm near-black, matches the black emblem. */
--ink-900: #1E1A17; /* primary text, dish names, prices */
--ink-700: #4A423B; /* secondary text, descriptions */
--ink-500: #8A7F73; /* tertiary — captions, translations, meta */
--ink-300: #B7AC9C; /* faint — placeholders, disabled text */
/* Bougainvillea — the single accent. Mediterranean magenta. */
--bougie-bright: #B43BA8; /* hover / highlight */
--bougie: #9E2397; /* PRIMARY accent — active, links, marks */
--bougie-deep: #6F1A63; /* press / deep emphasis */
--bougie-tint: #F2E0EF; /* 8% wash — active pills on parchment */
/* ---------- SEMANTIC SURFACES ---------- */
--bg: var(--parchment-300);
--bg-raised: var(--parchment-100);
--bg-sunken: var(--parchment-400);
--surface-line: var(--parchment-500);
--divider: rgba(30, 26, 23, 0.12);
--divider-soft: rgba(30, 26, 23, 0.07);
/* ---------- SEMANTIC TEXT ---------- */
--fg: var(--ink-900); /* default */
--fg-secondary: var(--ink-700);
--fg-muted: var(--ink-500);
--fg-faint: var(--ink-300);
--fg-accent: var(--bougie);
--fg-on-accent: #FCF6EC;
/* ---------- INTERACTION ---------- */
--accent: var(--bougie);
--accent-hover: var(--bougie-bright);
--accent-press: var(--bougie-deep);
--focus-ring: rgba(158, 35, 151, 0.40);
/* ---------- TYPE FAMILIES ---------- */
--font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
--font-sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
/* ---------- TYPE SCALE (mobile-first, rem @ 16px root) ---------- */
--text-hero: clamp(2.75rem, 11vw, 4rem); /* hero wordmark line */
--text-2xl: 2rem; /* 32 — page / category title (ES) */
--text-xl: 1.5rem; /* 24 — sub-category */
--text-lg: 1.3125rem; /* 21 — dish name */
--text-md: 1.0625rem; /* 17 — body / description */
--text-sm: 0.9375rem; /* 15 — secondary description */
--text-xs: 0.8125rem; /* 13 — translation / caption */
--text-2xs: 0.6875rem; /* 11 — eyebrow label (uppercase) */
/* ---------- WEIGHTS ---------- */
--w-light: 300; /* @kind font */
--w-regular: 400; /* @kind font */
--w-medium: 500; /* @kind font */
--w-semibold: 600; /* @kind font */
--w-bold: 700; /* @kind font */
/* ---------- TRACKING ---------- */
--track-tight: -0.01em; /* @kind font */
--track-normal: 0; /* @kind font */
--track-wide: 0.08em; /* @kind font */
--track-eyebrow: 0.22em; /* @kind font */ /* uppercase section eyebrows */
--track-caps: 0.16em; /* @kind font */
/* ---------- LINE HEIGHT ---------- */
--leading-tight: 1.1; /* @kind font */
--leading-snug: 1.25; /* @kind font */
--leading-body: 1.5; /* @kind font */
/* ---------- RADII ---------- */
--r-xs: 4px;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-pill: 999px;
/* ---------- SPACING (4pt base) ---------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
/* ---------- ELEVATION (warm, soft — paper shadows) ---------- */
--shadow-sm: 0 1px 2px rgba(74, 50, 30, 0.08);
--shadow-md: 0 6px 18px rgba(74, 50, 30, 0.12);
--shadow-lg: 0 18px 48px rgba(74, 50, 30, 0.18);
--shadow-pop: 0 24px 64px rgba(50, 28, 12, 0.28);
/* ---------- MOTION ---------- */
--ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--dur-fast: 160ms; /* @kind other */
--dur-med: 280ms; /* @kind other */
--dur-slow: 520ms; /* @kind other */
/* ---------- LAYOUT ---------- */
--content-max: 480px; /* @kind spacing */ /* mobile menu column cap */
--gutter: 22px; /* @kind spacing */
}
/* =====================================================================
SEMANTIC TYPOGRAPHY CLASSES
===================================================================== */
.t-hero {
font-family: var(--font-display);
font-weight: var(--w-medium);
font-size: var(--text-hero);
line-height: 0.95;
letter-spacing: var(--track-tight);
color: var(--fg);
}
/* Category title — the Spanish (primary) line, e.g. RECOMENDACIONES */
.t-category {
font-family: var(--font-display);
font-weight: var(--w-semibold);
font-size: var(--text-2xl);
line-height: var(--leading-tight);
letter-spacing: 0.02em;
color: var(--fg);
}
/* English (or 2nd-language) sub-line under a category — letterspaced caps */
.t-category-sub {
font-family: var(--font-sans);
font-weight: var(--w-regular);
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: var(--track-eyebrow);
color: var(--fg-muted);
}
.t-eyebrow {
font-family: var(--font-sans);
font-weight: var(--w-medium);
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: var(--track-eyebrow);
color: var(--fg-accent);
}
/* Dish name */
.t-dish {
font-family: var(--font-display);
font-weight: var(--w-semibold);
font-size: var(--text-lg);
line-height: var(--leading-snug);
letter-spacing: var(--track-tight);
color: var(--fg);
}
/* Dish description (active language) */
.t-desc {
font-family: var(--font-sans);
font-weight: var(--w-light);
font-size: var(--text-sm);
line-height: var(--leading-body);
color: var(--fg-secondary);
}
/* Secondary translation line (printed-menu style — italic serif) */
.t-translation {
font-family: var(--font-display);
font-style: italic;
font-weight: var(--w-regular);
font-size: var(--text-md);
line-height: var(--leading-snug);
color: var(--fg-muted);
}
/* Price */
.t-price {
font-family: var(--font-display);
font-weight: var(--w-medium);
font-size: var(--text-lg);
font-feature-settings: "lnum" 1;
letter-spacing: 0.01em;
color: var(--fg);
}
.t-body {
font-family: var(--font-sans);
font-weight: var(--w-regular);
font-size: var(--text-md);
line-height: var(--leading-body);
color: var(--fg-secondary);
}
.t-caption {
font-family: var(--font-sans);
font-weight: var(--w-regular);
font-size: var(--text-xs);
letter-spacing: var(--track-wide);
color: var(--fg-muted);
}
/* UI label (buttons, toggles, nav) */
.t-label {
font-family: var(--font-sans);
font-weight: var(--w-medium);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--track-caps);
color: var(--fg);
}
::selection { background: var(--bougie); color: var(--fg-on-accent); }