/** * ═══════════════════════════════════════════════════════════════ * PORCACCHIA EGIDIO — BRAND DESIGN TOKENS * ═══════════════════════════════════════════════════════════════ * * Template: 4 — Clean Professional / White + Red * Client: Porcacchia Egidio – Tutela Beni Culturali * Agency: Upvolv * Version: 1.0 | April 2026 * * HOW TO USE * ────────── * Import this file first in every HTML page: * (root pages) * (sub-pages) * (nested) * * Then reference tokens via var(--token-name) in any stylesheet. * * ═══════════════════════════════════════════════════════════════ */ :root { /* ── COLOUR PALETTE ────────────────────────────────────────── Zero competing colours. Red is the only accent. ────────────────────────────────────────────────────────── */ /* Primary — Crimson Red */ --clr-red: #C8102E; /* Primary brand, CTAs, accents */ --clr-red-deep: #A50E25; /* Hover / pressed state */ --clr-red-muted: #FCE8EC; /* Tag / chip backgrounds */ --clr-red-border: #F3B8C2; /* Soft red borders */ /* Neutrals */ --clr-white: #FFFFFF; --clr-off-white: #F7F6F4; /* Alternating section backgrounds */ --clr-hairline: #E4E4E0; /* Borders, dividers */ --clr-light-grey: #D0CFC8; /* Disabled states */ /* Dark */ --clr-dark: #101010; /* Near-black — headings, dark sections */ --clr-dark-90: rgba(16,16,16,0.9); --clr-dark-65: rgba(16,16,16,0.65); --clr-dark-45: rgba(16,16,16,0.45); /* Text */ --clr-text-body: #4A4A4A; /* Body copy */ --clr-text-meta: #909090; /* Meta, captions, placeholders */ --clr-text-ghost: #BBBBBB; /* Very subtle text */ /* ── TYPOGRAPHY ────────────────────────────────────────────── Font: Inter — clean, utilitarian, no serifs. Per Figma specification: "Inter. Inter ONLY." ────────────────────────────────────────────────────────── */ --font-primary: 'Inter', 'DM Sans', system-ui, sans-serif; /* Font weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Type scale */ --fs-xs: 10px; --fs-sm: 11px; --fs-base: 13px; --fs-md: 14px; --fs-body: 15px; --fs-lead: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 38px; --fs-5xl: 48px; --fs-6xl: 54px; --fs-hero: clamp(40px, 5.5vw, 72px); /* Line heights */ --lh-tight: 1.04; --lh-heading: 1.1; --lh-body: 1.72; --lh-relaxed: 1.82; /* Letter spacing */ --ls-tight: -0.03em; --ls-heading: -0.025em; --ls-body: -0.01em; --ls-normal: 0; --ls-caps: 0.08em; --ls-wide: 0.1em; --ls-widest: 0.14em; /* ── SPACING SCALE ─────────────────────────────────────────── Base unit: 4px. All spacing is multiples of 4. ────────────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ── LAYOUT ────────────────────────────────────────────────── ────────────────────────────────────────────────────────── */ --max-width: 1320px; /* Content max-width */ --page-padding: 40px; /* Horizontal page padding */ --section-padding: 96px; /* Standard vertical section padding */ --section-tight: 80px; /* Tight section padding */ --nav-height: 64px; /* Fixed nav height */ /* ── GRID ──────────────────────────────────────────────────── ────────────────────────────────────────────────────────── */ --grid-gap: 2px; /* Between cards / grid items */ --card-gap: 28px; /* Between cards with spacing */ /* ── BORDERS & RADIUS ──────────────────────────────────────── Template 4 uses ZERO border-radius — all sharp corners. ────────────────────────────────────────────────────────── */ --radius: 0px; /* Intentionally zero — editorial aesthetic */ --border-width: 1px; /* ── SHADOWS ───────────────────────────────────────────────── ────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 6px rgba(0,0,0,0.06); --shadow-md: 0 4px 24px rgba(0,0,0,0.08); --shadow-lg: 0 12px 48px rgba(0,0,0,0.10); --shadow-xl: 0 24px 80px rgba(0,0,0,0.16); --shadow-dark: 0 24px 80px rgba(0,0,0,0.50); --shadow-red: 0 0 0 16px rgba(200,16,46,0.15); /* ── TRANSITIONS ───────────────────────────────────────────── Cultural heritage aesthetic: slow, deliberate, refined. No bouncy or playful animations. ────────────────────────────────────────────────────────── */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* Elegant decelerate */ --dur-fast: 0.15s; --dur-base: 0.25s; --dur-slow: 0.45s; --dur-reveal: 0.70s; --dur-long: 0.90s; --transition-color: color var(--dur-fast) var(--ease-standard); --transition-bg: background-color var(--dur-fast) var(--ease-standard); --transition-border: border-color var(--dur-base) var(--ease-standard); --transition-all: all var(--dur-base) var(--ease-standard); --transition-lift: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); /* ── ANIMATION REVEAL ──────────────────────────────────────── Scroll-triggered reveal defaults (overridden per section) ────────────────────────────────────────────────────────── */ --reveal-distance: 32px; /* How far elements travel on reveal */ --reveal-duration: 0.70s; /* Reveal animation duration */ --reveal-stagger: 0.10s; /* Stagger between sequential reveals */ /* ── Z-INDEX SCALE ─────────────────────────────────────────── ────────────────────────────────────────────────────────── */ --z-base: 1; --z-dropdown: 100; --z-nav: 200; --z-modal: 300; --z-toast: 400; --z-cursor: 500; /* ── COMPONENT TOKENS ──────────────────────────────────────── ────────────────────────────────────────────────────────── */ /* Buttons */ --btn-padding-y: 14px; --btn-padding-x: 32px; --btn-font-size: var(--fs-base); --btn-font-weight: var(--fw-bold); --btn-letter-spacing: 0.07em; /* Nav */ --nav-link-size: 13px; --nav-link-weight: var(--fw-medium); --nav-link-spacing: -0.01em; /* Stats bar */ --stat-val-size: 20px; --stat-val-weight: var(--fw-extrabold); /* Section labels (eyebrows) */ --eyebrow-size: var(--fs-sm); --eyebrow-weight: var(--fw-bold); --eyebrow-spacing: var(--ls-widest); --eyebrow-line: 28px; /* Width of the red bar before eyebrow text */ /* Cards */ --card-padding: 24px; --card-title-size: var(--fs-md); --card-body-size: var(--fs-base); } /* ═══════════════════════════════════════════════════════════════ GOOGLE FONTS IMPORT (place here so it's loaded once for all pages) ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ═══════════════════════════════════════════════════════════════ BRAND REFERENCE GUIDE (comment block — for developers) ═══════════════════════════════════════════════════════════════ PRIMARY RED #C8102E — CTAs, accents, active states RED HOVER #A50E25 — Hover/pressed on red elements RED MUTED #FCE8EC — Tag backgrounds, subtle red fills WHITE #FFFFFF — Page background, form backgrounds OFF-WHITE #F7F6F4 — Alternating section backgrounds HAIRLINE #E4E4E0 — All borders and dividers DARK #101010 — Headings, dark sections, footer TEXT BODY #4A4A4A — All body copy TEXT META #909090 — Metadata, captions, labels FONT Inter (300, 400, 500, 600, 700, 800) STYLE No serif. No border-radius. Sharp corners. Editorial. Institutional. Premium. LOGO PE monogram SVG — see base.css .logo component TAGLINE "Tutela Beni Culturali · Dal 1970" ═══════════════════════════════════════════════════════════════ */