/* ============================================================ ALAG Corporativo Jurídico — Design Foundations Colors + Typography + Spacing tokens Restrained black · warm off-white · muted warm gold ============================================================ */ /* ---- Brand webfonts ---- Libre Baskerville — sturdy transitional serif (display / headlines / quotes / wordmark). Upright + italic served from Google Fonts CDN; italic also self-hosted from the uploaded variable file. Source Sans 3 — clean humanist sans (body / UI / eyebrows / labels). Upright + italic served from Google Fonts CDN. */ @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); @font-face { font-family: 'Libre Baskerville'; src: url('LibreBaskerville-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 400 700; font-style: italic; font-display: swap; } :root { /* ============ COLOR — RAW SCALES ============ */ /* Ink — warm near-blacks (never pure #000; carries a trace of brown) */ --ink-900: #0E0C09; /* deepest — hero / footer fields */ --ink-800: #16130D; /* primary dark surface */ --ink-700: #221C14; /* raised dark surface / dark cards */ --ink-600: #322A1F; /* dark hairlines, dark-mode dividers */ /* Paper — warm off-whites */ --paper-0: #FBF9F3; /* page background (light) */ --paper-50: #F5F1E7; /* sunken / alternating section */ --paper-100: #ECE6D8; /* tint blocks, hover wells */ --paper-200: #E1D9C7; /* light borders on paper */ /* Warm neutrals — text & lines */ --warm-300: #C4BBA9; --warm-400: #9C9282; --warm-500: #6F665A; --warm-600: #4C453B; --warm-700: #332E26; /* Gold — muted, warm, NON-glossy (sampled & desaturated from logo) */ --gold-800: #6E5328; /* deepest bronze — text on pale gold */ --gold-700: #8A6D38; /* deep accent / pressed states */ --gold-600: #A37F44; /* hover */ --gold-500: #B8924E; /* PRIMARY gold */ --gold-400: #C9A767; /* lines & strokes on dark */ --gold-300: #DBC59B; /* champagne — soft fills */ --gold-200: #EADCC0; /* palest gold — tint wells */ /* ============ COLOR — SEMANTIC ============ */ --bg: var(--paper-0); --bg-sunken: var(--paper-50); --bg-tint: var(--paper-100); --bg-elevated: #FFFFFF; --bg-ink: var(--ink-900); --bg-ink-soft: var(--ink-800); --fg-1: #19150F; /* primary text on light */ --fg-2: var(--warm-500); /* secondary / supporting text */ --fg-3: var(--warm-400); /* muted / captions / meta */ --on-ink-1: #F3EEE3; /* primary text on dark */ --on-ink-2: #B9AF9C; /* secondary text on dark */ --on-ink-3: #8A8170; /* muted text on dark */ --accent: var(--gold-500); --accent-hover: var(--gold-600); --accent-press: var(--gold-700); --accent-soft: var(--gold-200); --on-accent: #1B1407; /* ink text on gold buttons */ --line: rgba(25, 21, 15, 0.12); /* hairline on light */ --line-strong: rgba(25, 21, 15, 0.22); --line-gold: rgba(184, 146, 78, 0.45); /* gold hairline */ --line-on-ink: rgba(243, 238, 227, 0.14);/* hairline on dark */ --line-on-ink-gold: rgba(201, 167, 103, 0.40); --focus-ring: rgba(184, 146, 78, 0.55); /* ============ TYPE — FAMILIES ============ */ /* Two-family brand system: Libre Baskerville (serif) + Source Sans 3 (sans). --font-caps is Source Sans used UPPERCASE + letterspaced for the institutional label voice. */ --font-display: 'Libre Baskerville', 'Hoefler Text', Georgia, serif; --font-caps: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; --font-sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Libre Baskerville', Georgia, serif; /* alias for pull-quotes */ /* ============ TYPE — SCALE (fluid where useful) ============ */ /* Sized for Libre Baskerville's wider, sturdier metrics. */ --fs-display: clamp(2.75rem, 1.4rem + 5vw, 4.75rem); --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); --fs-h3: clamp(1.4rem, 1.15rem + 1.0vw, 1.85rem); --fs-h4: 1.2rem; --fs-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem); --fs-body: 1.0625rem; /* 17px */ --fs-sm: 0.9375rem; /* 15px */ --fs-xs: 0.8125rem; /* 13px */ --fs-eyebrow: 0.78rem; /* ============ TYPE — DETAILS ============ */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.62; --tracking-eyebrow: 0.26em; --tracking-caps: 0.12em; --tracking-tight: -0.01em; /* ============ SPACING (4px base) ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --container: 1240px; --container-narrow: 760px; --gutter: clamp(20px, 5vw, 64px); /* ============ RADII (restrained — institutional, near-square) ============ */ --radius-xs: 2px; --radius-sm: 3px; --radius: 5px; --radius-lg: 8px; --radius-pill: 999px; /* ============ ELEVATION (low, warm-tinted) ============ */ --shadow-xs: 0 1px 2px rgba(31, 24, 12, 0.06); --shadow-sm: 0 2px 8px rgba(31, 24, 12, 0.07); --shadow-md: 0 10px 30px -12px rgba(31, 24, 12, 0.18); --shadow-lg: 0 30px 70px -28px rgba(20, 15, 7, 0.34); /* ============ MOTION ============ */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms; } /* ============================================================ SEMANTIC TYPOGRAPHY CLASSES ============================================================ */ .t-eyebrow { font-family: var(--font-caps); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-press); line-height: 1; font-weight: 600; } .t-display { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg-1); } .t-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; color: var(--fg-1); } .t-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); letter-spacing: 0; color: var(--fg-1); } .t-lead { font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); } .t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); } .t-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-2); } .t-meta { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); } .t-quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.32; color: var(--fg-1); } /* Rule / hairline used as a recurring motif */ .t-rule { width: 56px; height: 1px; background: var(--accent); border: 0; }