/* ============================================================ IL CONSIGLIERE — Base condivisa Tutto quello che ogni pagina del blog eredita. Override per pagina via [data-theme="..."] sul . ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ TOKENS — default: TERRACOTTA (homepage, pagine generiche) ============================================================ */ :root { /* Backgrounds (cream warm) */ --bg: hsl(38, 55%, 96%); --card: hsl(38, 60%, 99%); --paper: hsl(42, 50%, 95%); --muted: hsl(38, 35%, 92%); /* Text */ --fg: hsl(20, 30%, 16%); --fg-soft: hsl(20, 20%, 30%); --muted-fg: hsl(22, 12%, 48%); /* Brand: terracotta */ --primary: hsl(14, 62%, 48%); --primary-dark: hsl(14, 65%, 35%); --primary-deep: hsl(14, 70%, 22%); --primary-fg: hsl(38, 60%, 98%); --accent: hsl(40, 80%, 50%); --accent-dark: hsl(34, 78%, 36%); /* Sub-page identity dots (used on homepage chips) */ --schiena: hsl(168, 50%, 42%); --schiena-dark: hsl(168, 55%, 28%); --libri: hsl(258, 32%, 50%); --libri-dark: hsl(258, 40%, 35%); /* Borders */ --border: hsl(30, 30%, 86%); --border-strong: hsl(30, 30%, 78%); --rule: hsl(30, 25%, 82%); /* Tip / callout */ --tip-bg: hsl(45, 85%, 94%); --tip-border: hsl(45, 60%, 72%); /* Shape & motion */ --radius: 0.75rem; --radius-sm: 0.5rem; --transition: 220ms cubic-bezier(.2, .8, .2, 1); --shadow-card: 0 1px 2px hsl(20 30% 16% / .04), 0 4px 16px -6px hsl(20 30% 16% / .08); --shadow-hover: 0 1px 2px hsl(20 30% 16% / .04), 0 12px 28px -8px hsl(14 70% 18% / .18); } /* ============================================================ THEME: TEAL — schiena (salute, postura, esercizi) ============================================================ */ body[data-theme="teal"] { --primary: hsl(168, 50%, 42%); --primary-dark: hsl(168, 55%, 28%); --primary-deep: hsl(168, 60%, 18%); --primary-fg: hsl(40, 35%, 97%); --accent: hsl(25, 80%, 55%); --accent-dark: hsl(25, 80%, 38%); --bg: hsl(40, 33%, 97%); --card: hsl(40, 30%, 99%); --paper: hsl(42, 45%, 95%); --muted: hsl(40, 20%, 94%); --border: hsl(40, 20%, 88%); --border-strong: hsl(40, 25%, 78%); --rule: hsl(40, 20%, 82%); --tip-bg: hsl(45, 80%, 95%); --tip-border: hsl(45, 60%, 70%); --shadow-hover: 0 1px 2px hsl(220 20% 18% / .04), 0 12px 28px -8px hsl(168 60% 12% / .18); } /* ============================================================ THEME: LAVENDER — libri (nanna, calma, lettura serale) ============================================================ */ body[data-theme="lavender"] { --primary: hsl(258, 32%, 50%); --primary-dark: hsl(258, 40%, 35%); --primary-deep: hsl(258, 50%, 22%); --primary-fg: hsl(38, 35%, 97%); --accent: hsl(45, 78%, 60%); --accent-dark: hsl(38, 75%, 38%); --bg: hsl(38, 35%, 96%); --card: hsl(38, 40%, 99%); --paper: hsl(40, 40%, 95%); --muted: hsl(38, 25%, 93%); --border: hsl(258, 18%, 86%); --border-strong: hsl(258, 20%, 76%); --rule: hsl(258, 15%, 82%); --tip-bg: hsl(258, 35%, 94%); --tip-border: hsl(258, 28%, 78%); --shadow-hover: 0 1px 2px hsl(220 20% 18% / .04), 0 12px 28px -8px hsl(258 50% 18% / .2); } /* ============================================================ BASE — html / body ============================================================ */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: 'Source Sans 3', sans-serif; font-size: 18px; line-height: 1.7; touch-action: manipulation; } /* Paper grain across whole page (subtle) */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .32; background-image: url("data:image/svg+xml;utf8,"); } /* ============================================================ SKIP LINK ============================================================ */ .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--primary-dark); color: var(--primary-fg); padding: .5rem 1.2rem; font-size: .85rem; font-weight: 700; text-decoration: none; border-radius: 0 0 6px 6px; z-index: 9999; transition: top var(--transition); } .skip-link:focus-visible { top: 0; } /* ============================================================ TYPOGRAPHY — base ============================================================ */ h1, h2, h3, h4 { font-family: 'Playfair Display', serif; color: var(--fg); line-height: 1.2; text-wrap: balance; } /* Section heading default (può essere sovrascritto da .conclusione, ecc.) */ section > h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 700; color: var(--fg); margin-bottom: 1rem; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; } /* Prose */ .prose { color: var(--fg-soft); line-height: 1.8; } .prose p + p { margin-top: 1rem; } .prose strong { color: var(--fg); font-weight: 600; } .prose em { font-style: italic; } .lead { font-size: 1.12rem; color: var(--fg); font-weight: 400; margin-bottom: 1.5rem; line-height: 1.65; } /* ============================================================ PULL QUOTE (riusabile across pages) ============================================================ */ .pull-quote { margin: 2.5rem -.5rem; padding: 1.5rem 1.75rem; font-family: 'Caveat', cursive; font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.4; color: var(--primary-dark); text-align: center; font-weight: 500; position: relative; } .pull-quote::before, .pull-quote::after { content: ''; display: block; width: 60px; height: 1px; background: var(--primary); opacity: .45; margin: .75rem auto; } /* ============================================================ AFFILIATE NOTICE (riusabile across pages) ============================================================ */ .aff-notice { margin-top: 1.25rem; font-size: .78rem; color: var(--muted-fg); font-style: italic; line-height: 1.55; text-align: center; } /* ============================================================ DISCLAIMER NOTE (riusabile) ============================================================ */ .disclaimer-note { margin-top: 1.5rem; font-size: .875rem; color: var(--muted-fg); font-style: italic; line-height: 1.6; max-width: 540px; margin-left: auto; margin-right: auto; } /* ============================================================ FOOTER (struttura base condivisa) ============================================================ */ footer { background: var(--muted); border-top: 1px solid var(--rule); padding: 1.75rem 1.5rem; text-align: center; position: relative; z-index: 2; } footer p { color: var(--muted-fg); font-size: .87rem; line-height: 1.7; } footer em { color: var(--muted-fg); font-style: italic; } /* ============================================================ FOCUS — global ============================================================ */ a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }