/* ========================================================================= LEVANTE STREET FOOD — Colors & Type Identidad de Marca · 2025 ========================================================================= */ /* Google Fonts — the three brand families. All three are on Google Fonts under the exact names specified, so these are 1:1 matches. • Ubuntu Sans — Logo / Headlines / Display • Noto Sans — Body / UI / functional text • Noto Serif — Editorial detail, pull-quotes, italic emotional accents */ @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap'); :root { /* ----------------------------------------------------------------------- COLOR — Paleta de marca ----------------------------------------------------------------------- */ /* Color principal (the hero color — logo, CTAs, headlines, headers) */ --verde-levante: #009070; /* Pantone 3268 C */ --verde-levante-dark: #00765B; /* hover / pressed */ --verde-levante-darker: #005C47; --verde-levante-tint: #E5F3EF; /* very light wash */ /* Colores secundarios */ --negro-canos: #1A1A1A; /* body text, dark surfaces */ --negro-canos-soft: #2A2A2A; --crema-brisa: #F5EDD8; /* neutral warm canvas */ --crema-brisa-deep: #ECE2C5; --arena-mediterranea: #C4A87C; /* details, labels, tags */ --arena-soft: #D9C5A1; /* Color de acento */ --terracota-atardecer: #C4593A; /* sunset accent — special offers, secondary CTA */ --terracota-dark: #A6442A; /* Pure */ --blanco: #FFFFFF; /* ----------------------------------------------------------------------- SEMANTIC TOKENS ----------------------------------------------------------------------- */ /* Backgrounds */ --bg-canvas: var(--crema-brisa); /* default page bg */ --bg-surface: var(--blanco); /* cards, modals */ --bg-inverse: var(--negro-canos); /* dark sections, footer */ --bg-hero: var(--verde-levante); --bg-subtle: var(--crema-brisa-deep); /* Foreground / text */ --fg-1: var(--negro-canos); /* primary text */ --fg-2: #4A4A4A; /* secondary text */ --fg-3: #7A7368; /* muted, captions */ --fg-on-dark: var(--crema-brisa); /* text on dark bg */ --fg-on-green: var(--blanco); /* text on Verde */ --fg-brand: var(--verde-levante); /* links, brand-emphatic */ --fg-accent: var(--terracota-atardecer); /* warm highlights */ /* Borders / dividers */ --border-subtle: rgba(26, 26, 26, 0.10); --border-strong: rgba(26, 26, 26, 0.25); --border-brand: var(--verde-levante); --border-on-dark: rgba(245, 237, 216, 0.18); /* States */ --hover-overlay-dark: rgba(26, 26, 26, 0.06); --hover-overlay-light: rgba(255, 255, 255, 0.10); --press-shrink: 0.97; /* Shadows — soft, warm, low elevation. Levante is print-warm, not floaty. */ --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06), 0 1px 3px rgba(26, 26, 26, 0.04); --shadow-md: 0 2px 4px rgba(26, 26, 26, 0.06), 0 6px 14px rgba(26, 26, 26, 0.08); --shadow-lg: 0 4px 8px rgba(26, 26, 26, 0.08), 0 16px 32px rgba(26, 26, 26, 0.12); --shadow-warm: 0 8px 24px rgba(196, 89, 58, 0.18); /* terracota glow */ /* ----------------------------------------------------------------------- TYPOGRAPHY — Sistema Tipográfico ----------------------------------------------------------------------- */ /* Familias — brand type system • display → Ubuntu Sans (logo, headlines, display) • body / ui → Noto Sans (UI, body, functional text) • editorial → Noto Serif (detail, pull-quotes, emotional italic accents) */ --font-display: 'Ubuntu Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-editorial: 'Noto Serif', 'Georgia', 'Times New Roman', serif; --font-ui: var(--font-body); --font-script: var(--font-editorial); /* back-compat alias — the script role is now Noto Serif italic */ /* Scale — based on 16px root, generous for an editorial / restaurant feel */ --text-xs: 0.75rem; /* 12px — micro labels */ --text-sm: 0.875rem; /* 14px — captions */ --text-base: 1rem; /* 16px — body */ --text-md: 1.125rem; /* 18px — large body */ --text-lg: 1.375rem; /* 22px — small heading */ --text-xl: 1.75rem; /* 28px — h3 */ --text-2xl: 2.25rem; /* 36px — h2 */ --text-3xl: 3rem; /* 48px — h1 */ --text-4xl: 4rem; /* 64px — hero */ --text-5xl: 5.5rem; /* 88px — display */ /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Tracking */ --track-tight: -0.02em; --track-normal: 0; --track-wide: 0.08em; --track-wider: 0.18em; /* the all-caps spaced labels in the manual */ --track-widest: 0.28em; /* "L I B R O D E I M A G E N" treatment */ /* ----------------------------------------------------------------------- SPACING — 4px base ----------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ----------------------------------------------------------------------- RADII ----------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; --radius-card: 18px; /* default for cards in the system */ /* ----------------------------------------------------------------------- MOTION ----------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ========================================================================= SEMANTIC ELEMENT STYLES Apply these to bare elements so prototypes inherit Levante styling. ========================================================================= */ html, body { background: var(--bg-canvas); color: var(--fg-1); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-normal); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display & headings — Ubuntu Sans, the editorial spine of the brand. Lean on weight contrast (300 ↔ 700) and tight tracking for headline impact. */ .display, .lvnt-display { font-family: var(--font-display); font-weight: var(--weight-bold); /* Ubuntu Sans wants weight to feel "display" */ font-size: var(--text-5xl); line-height: var(--lh-tight); letter-spacing: var(--track-tight); } h1, .h1 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-3xl); line-height: var(--lh-tight); letter-spacing: var(--track-tight); margin: 0 0 var(--space-4); } h2, .h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: var(--track-tight); margin: 0 0 var(--space-3); } h3, .h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xl); line-height: var(--lh-snug); margin: 0 0 var(--space-2); } h4, .h4 { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-lg); line-height: var(--lh-snug); letter-spacing: var(--track-normal); margin: 0 0 var(--space-2); } p { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0 0 var(--space-4); text-wrap: pretty; } /* Spaced caps "eyebrow" label — used heavily in the manual: "C O M I D A H O N E S T A" */ .eyebrow, .lvnt-eyebrow { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-xs); letter-spacing: var(--track-widest); text-transform: uppercase; color: var(--fg-2); } /* Editorial accent — Noto Serif italic. Use sparingly for emotional moments ("Hecho con pasión", "Atardecer en Caños", "Te esperamos") and pull-quotes. This replaces the old Dancing Script role; the brand voice now leans on warm italic serif rather than a faux-handwritten script. */ .script, .lvnt-script, .editorial, .lvnt-editorial { font-family: var(--font-editorial); font-style: italic; font-weight: var(--weight-medium); font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--fg-accent); } /* Body roles */ .body-lg { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--fg-1); } .body { font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--fg-2); } .caption { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg-3); } .micro { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--fg-3); } /* Editorial pull-quote — Noto Serif italic, large */ blockquote, .pullquote { font-family: var(--font-editorial); font-style: italic; font-weight: var(--weight-regular); font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--fg-1); border-left: 3px solid var(--verde-levante); padding: var(--space-3) 0 var(--space-3) var(--space-6); margin: var(--space-6) 0; } a { color: var(--fg-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--verde-levante-dark); } code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.92em; } /* Utility — selection */ ::selection { background: var(--verde-levante); color: var(--blanco); }