/** * Stili globali * * @package Martina */ /* ======================================== VARIABILI COLORE - Palette Pantone 13-2801 TCX ======================================== */ :root { /* Colore base - #F6CFDD */ --color-primary: #F6CFDD; --color-primary-rgb: 246, 207, 221; /* Varianti del colore principale */ --color-primary-light: #FBE3ED; --color-primary-lighter: #FDF3F7; --color-primary-dark: #E6B4C8; --color-primary-darker: #D29BB9; /* Colori neutri */ --color-white: #FFFFFF; --color-black: #000000; --color-gray-50: #FAFAFA; --color-gray-100: #F5F5F5; --color-gray-200: #EEEEEE; --color-gray-300: #E0E0E0; --color-gray-400: #BDBDBD; --color-gray-500: #9E9E9E; --color-gray-600: #757575; --color-gray-700: #616161; --color-gray-800: #424242; --color-gray-900: #212121; /* Colori funzionali - Testo */ --color-text-primary: #212121; --color-text-secondary: #616161; --color-text-muted: #9E9E9E; --color-text-light: #FFFFFF; --color-text-on-primary: #212121; /* Colori funzionali - Sfondi */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #FAFAFA; --color-bg-muted: #FDF3F7; --color-bg-overlay: rgba(246, 207, 221, 0.1); /* Colori funzionali - Link e interazioni */ --color-link: #D29BB9; --color-link-hover: #C27A9D; --color-link-active: #B25981; /* Colori funzionali - Bordi */ --color-border-light: #F5E4EB; --color-border: #E6B4C8; --color-border-dark: #D29BB9; /* Colori funzionali - Stati */ --color-success: #4CAF50; --color-warning: #FF9800; --color-error: #F44336; --color-info: #2196F3; /* Colori complementari e accent */ --color-accent: #CDF7E9; --color-accent-dark: #A4ECDC; --color-accent-light: #E0FEFB; /* Tonalità analoghe */ --color-analogous-1: #F8CCF1; --color-analogous-2: #F8D3CC; --color-analogous-3: #F8E9CC; /* Ombre e effetti */ --shadow-sm: 0 1px 2px rgba(210, 155, 185, 0.1); --shadow-md: 0 4px 6px rgba(210, 155, 185, 0.15); --shadow-lg: 0 10px 15px rgba(210, 155, 185, 0.2); --shadow-xl: 0 20px 25px rgba(210, 155, 185, 0.25); /* ======================================== THEME TOKENS (per switch “tema colore”) ======================================== */ --theme-bg: var(--color-bg-primary); --theme-text: var(--color-text-primary); --theme-muted: var(--color-text-secondary); --theme-link: var(--color-link); --theme-border: var(--color-border-light); /* ======================================== TYPOGRAPHY ======================================== */ --font-heading: 'Newsreader', serif; --font-body: 'Inter', sans-serif; } /* ======================================== RESET E BASE ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); font-weight: 400; line-height: 1.6; color: var(--theme-text); background-color: var(--theme-bg); transition: background-color 600ms ease, color 600ms ease; padding-top: 80px; /* Compensa header fixed */ } h1, h2, h3, h4, h5, h6, .site-title, .entry-title, .entry-subtitle { font-family: var(--font-heading); font-weight: 600; /* Newsreader ha pesi variabili, 600 è un bel semi-bold */ } /* Su mobile, l'header potrebbe essere più basso */ @media (max-width: 768px) { body { padding-top: 70px; /* Header più compatto su mobile */ } } /* Switch tema: Pink (usalo con via JS) */ body[data-theme="pink"] { --theme-bg: var(--color-primary); --theme-text: var(--color-text-primary); --theme-muted: var(--color-text-secondary); --theme-link: var(--color-link-active); --theme-border: var(--color-border); } /* Accessibilità: riduci animazioni se richiesto */ @media (prefers-reduced-motion: reduce) { body { transition: none; } } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Utility classes */ .text-center { text-align: center; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } /* Note: Stili per Header e Footer sono in file dedicati: - assets/css/header.css - assets/css/footer.css */