/* ============================================================================ InfoComuni — Design System · colors_and_type.css "Civic Editorial" restyle of infocomuni.it Portale informativo dei 257 comuni della Puglia ---------------------------------------------------------------------------- Single source of truth for color + type. Import this first, then layer component CSS on top. Fonts loaded via Google Fonts (see @import below or link the families in your ). ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ------------------------------------------------------------------ */ /* 1. BRAND CORE — institutional navy + Puglia gold */ /* ------------------------------------------------------------------ */ --ic-navy-900: #09223A; /* deepest — hero grounds, footers */ --ic-navy-800: #0B2340; /* PRIMARY brand navy — wordmark, headers */ --ic-navy-700: #0E2F4A; /* raised navy surfaces */ --ic-navy-600: #14466B; /* navy on navy, hovers */ --ic-navy-500: #2A6CA6; /* the lighter blue in the "i"/"C" mark */ --ic-navy-400: #5E93C4; /* tints, links on dark */ --ic-gold-600: #1A72B8; /* AGID deep blue — text on light (AA 5.8:1) */ --ic-gold-500: #3A8FCC; /* AGID mid blue — accent, borders, focus */ --ic-gold-400: #5BC4FF; /* AGID bright — highlights on navy */ --ic-gold-100: #E8F3FF; /* AGID pale wash */ /* ------------------------------------------------------------------ */ /* 2. PAPER & NEUTRALS — cool grey AGID-style */ /* ------------------------------------------------------------------ */ --ic-paper: #F3F9FF; /* azzurro tenue — wash quasi-bianco */ --ic-paper-2: #E5F2FF; /* recessed pale blue */ --ic-bg: #FFFFFF; /* default page white */ --ic-surface: #F5FAFF; /* cool app surface (cards on white) */ --ic-surface-2: #EBF4FF; /* recessed blue surface */ --ic-ink: #0F1A30; /* primary text — 15.8:1 on white */ --ic-ink-2: #334155; /* secondary body — 9.5:1 */ --ic-ink-3: #5A6B82; /* muted / captions — 4.9:1 */ --ic-line: #E2E8F0; /* hairline on paper (cool) */ --ic-line-cool: #D3DCE6; /* hairline on white/cool */ --ic-line-strong:#A9B7C7; /* ------------------------------------------------------------------ */ /* 3. CIVIC ACCENTS — earthy Mediterranean set (from the icon system) */ /* Used to color-code the 16 service categories. */ /* ------------------------------------------------------------------ */ --ic-terracotta: #C2492A; /* eventi, emergenze, luoghi */ --ic-olive: #3F8A5A; /* servizi, sanità, ambiente */ --ic-ochre: #C8A046; /* bandi, pagamenti, biblioteche */ --ic-teal: #2E8FA6; /* trasporti, trasparenza, mare */ --ic-plum: #7A4CA0; /* sociale, faq */ --ic-azure: #3B6FB0; /* scuole, news */ --ic-amber: #3BAFF0; /* contatti, meteo — light blue */ /* ------------------------------------------------------------------ */ /* 4. SEMANTIC STATES — WCAG AA verified on white */ /* ------------------------------------------------------------------ */ --ic-success: #0E7A4D; --ic-warning: #B5650A; --ic-danger: #C42B1C; --ic-info: #1366A6; --ic-link: #0A3A8A; /* 8.9:1 */ --ic-link-visited: #5A2B8A; /* ------------------------------------------------------------------ */ /* 5. TYPE FAMILIES */ /* Display → Oswald (condensed broadcast/newsroom headlines) */ /* Body → Titillium Web (the Italian Public Administration */ /* typeface — institutional, legible, on-brand for PA) */ /* Mono → JetBrains Mono (eyebrows, data, kicker labels) */ /* ------------------------------------------------------------------ */ --ic-font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif; --ic-font-body: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', sans-serif; --ic-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ------------------------------------------------------------------ */ /* 6. TYPE SCALE (1.250 major-third, fluid where useful) */ /* ------------------------------------------------------------------ */ --ic-text-xs: 12px; --ic-text-sm: 14px; --ic-text-base: 16px; --ic-text-md: 18px; --ic-text-lg: 22px; --ic-text-xl: 28px; --ic-text-2xl: 36px; --ic-text-3xl: 48px; --ic-text-4xl: clamp(44px, 6vw, 76px); /* hero display */ --ic-leading-tight: 1.08; --ic-leading-snug: 1.28; --ic-leading-normal:1.55; --ic-leading-loose: 1.7; --ic-tracking-kicker: 0.16em; /* mono eyebrow labels */ --ic-tracking-tight: -0.01em; /* ------------------------------------------------------------------ */ /* 7. SPACING — 4px base scale */ /* ------------------------------------------------------------------ */ --ic-sp-1: 4px; --ic-sp-2: 8px; --ic-sp-3: 12px; --ic-sp-4: 16px; --ic-sp-5: 24px; --ic-sp-6: 32px; --ic-sp-7: 48px; --ic-sp-8: 64px; --ic-sp-9: 96px; --ic-sp-10:128px; /* ------------------------------------------------------------------ */ /* 8. RADII — restrained; institutional, not bubbly */ /* ------------------------------------------------------------------ */ --ic-r-sm: 4px; --ic-r-md: 8px; --ic-r-lg: 14px; --ic-r-xl: 20px; --ic-r-pill: 999px; /* ------------------------------------------------------------------ */ /* 9. SHADOWS — soft navy-tinted elevation */ /* ------------------------------------------------------------------ */ --ic-shadow-sm: 0 1px 2px rgba(9,34,58,.07); --ic-shadow-md: 0 4px 14px rgba(9,34,58,.10); --ic-shadow-lg: 0 14px 38px rgba(9,34,58,.16); --ic-shadow-gold: 0 6px 20px rgba(58,143,204,.35); /* ------------------------------------------------------------------ */ /* 10. LAYOUT */ /* ------------------------------------------------------------------ */ --ic-container: 1200px; --ic-container-narrow: 760px; --ic-header-h: 68px; --ic-focus: 0 0 0 3px rgba(58,143,204,.55); /* gold focus ring */ --ic-transition: 180ms cubic-bezier(.2,.6,.2,1); /* @kind other */ } /* =========================================================================== SEMANTIC ELEMENT STYLES — apply the system to real tags =========================================================================== */ .ic-root, body.ic { font-family: var(--ic-font-body); font-size: var(--ic-text-base); line-height: var(--ic-leading-normal); color: var(--ic-ink); background: var(--ic-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Kicker / eyebrow — the signature newsroom label */ .ic-kicker { font-family: var(--ic-font-mono); font-size: var(--ic-text-xs); font-weight: 600; letter-spacing: var(--ic-tracking-kicker); text-transform: uppercase; color: var(--ic-gold-600); } /* Display headings — Oswald, tight, uppercase optional */ .ic-display { font-family: var(--ic-font-display); font-weight: 700; font-size: var(--ic-text-4xl); line-height: var(--ic-leading-tight); letter-spacing: var(--ic-tracking-tight); color: var(--ic-ink); text-wrap: balance; } .ic-h1 { font-family: var(--ic-font-display); font-weight: 700; font-size: var(--ic-text-3xl); line-height: var(--ic-leading-tight); letter-spacing: var(--ic-tracking-tight); text-wrap: balance; } .ic-h2 { font-family: var(--ic-font-display); font-weight: 600; font-size: var(--ic-text-2xl); line-height: var(--ic-leading-tight); text-wrap: balance; } .ic-h3 { font-family: var(--ic-font-display); font-weight: 600; font-size: var(--ic-text-xl); line-height: var(--ic-leading-snug); } .ic-h4 { font-family: var(--ic-font-body); font-weight: 700; font-size: var(--ic-text-lg); line-height: var(--ic-leading-snug); } .ic-lead { font-size: var(--ic-text-md); line-height: var(--ic-leading-loose); color: var(--ic-ink-2); } .ic-body { font-size: var(--ic-text-base); line-height: var(--ic-leading-normal); color: var(--ic-ink-2); } .ic-small { font-size: var(--ic-text-sm); color: var(--ic-ink-3); } .ic-data { font-family: var(--ic-font-mono); font-variant-numeric: tabular-nums; } a { color: var(--ic-link); text-underline-offset: 2px; } a:visited { color: var(--ic-link-visited); } :focus-visible { outline: none; box-shadow: var(--ic-focus); border-radius: var(--ic-r-sm); }