/* * ============================================================ * THEME — Fotografia Neonati & Bambini * Studio fotografico / ritratti famiglia * ============================================================ * * PALETTE DI RIFERIMENTO * ────────────────────── * Oro antico (primary / accent) #CCA145 * Oro scuro hover #B8883A * Oro pallido (tint bg highlight) #FDF3DC * Oro testo su chiaro (WCAG AA) #8A6520 * Terracotta (secondary) #9F704F * Terracotta scura hover #7A5238 * Rosa cipria (bg-light) #F8F0EA * Rosa medio (bordi / divisori) #E8D5C4 * Bianco caldo #FFFFFF * Cacao scuro (footer / dark) #3D2B1F * Cacao medio (card dark / header) #4F3828 * Nero testo #1A1A1A * Grigio testo secondario #4A4040 * Grigio caldo caption #7A6E6E * Grigio caldo placeholder #B0A09A * Rosa antico (evidenza delicata) #C2706A * Rosa antico scuro hover #A5524C * * FONT TITOLI CONSIGLIATO * ────────────────────── * "Instrument Serif" Italic weight 100 — elegante, editoriale, * evoca cura artigianale. Da Google Fonts. * Alternativa display: "Cormorant Garamond" Italic per tono * ancora più raffinato e antico. * * SCHEMA DI NOMINA VARIABILI TEMA * ────────────────────────────────────────────────────────── * --theme-color{N}-bg sfondo del blocco colore N * --theme-color{N}-bg-alt variante più chiara/scura dello stesso blocco * --theme-color{N}-txt testo leggibile su quel blocco * --theme-color{N}-border bordo coerente con il blocco N * --theme-evidence-* colore di forte evidenza (rosa antico) * --gradient gradiente decorativo del sito * * ============================================================ */ :root { /* ── 1. TIPOGRAFIA ───────────────────────────────────────── */ --body-font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --heading-font-family: "Instrument Serif", "Cormorant Garamond", Georgia, serif; --cursive-font-family: "Instrument Serif", Georgia, "Times New Roman", serif; --icon-font-family: "Font Awesome 6 Free", FontAwesome; --body-font-size: 17px; --line-height: 1.6; --heading-letter-spacing: .01em; /* Instrument Serif respira con tracking minimo */ --heading-font-weight: 100; /* Italic 100 come da brief */ --heading-font-style: italic; /* ── 2. LAYOUT BASE ──────────────────────────────────────── */ --margin-bottom-base: 3rem; --padding-base: 1rem; --slide-padding: 4rem; --header-height: 80px; /* ── 3. COLORI DI BASE ───────────────────────────────────── */ --body-bg: #ffffff; --body-color: #1a1a1a; --body-color-light: #7a6e6e; /* ── 4. PALETTE GREZZA (riferimento interno) ─────────────── */ /* * Usare queste solo per costruire le variabili semantiche * qui sotto. Nel CSS dei componenti usare sempre le * variabili semantiche. */ /* — Oro primary — */ --palette-gold: #CCA145; --palette-gold-dark: #B8883A; /* hover / pressed */ --palette-gold-pale: #FDF3DC; /* tint utile per bg highlight */ --palette-gold-deep: #8A6520; /* testo su sfondo chiaro (WCAG AA) */ /* — Terracotta secondary — */ --palette-terra: #9F704F; --palette-terra-dark: #7A5238; /* hover / pressed */ --palette-terra-pale: #F0E0D0; /* tint per bg sottile */ /* — Cipria / rosa caldo — */ /*--palette-blush: #F8F0EA; bg-light sezioni */ --palette-blush: #f8f0ea; /* bg-light sezioni */ --palette-blush-mid: #E8D5C4; /* bordi, divisori */ --palette-blush-deep: #D4B9A8; /* bordo più marcato */ /* — Neutri caldi — */ --palette-ink: #1A1A1A; /* testo principale */ --palette-ink-700: #4A4040; /* testo secondario */ --palette-ink-500: #7A6E6E; /* caption, label */ --palette-ink-300: #B0A09A; /* placeholder, disabilitato */ --palette-ink-100: #EDE5DF; /* bg sezioni alternate */ --palette-ink-50: #F8F0EA; /* bg chiaro alternativo = blush */ /* — Cacao scuro — */ --palette-cacao: #3D2B1F; /* footer / sezioni scure */ --palette-cacao-mid: #4F3828; /* bg card scura, header dark */ /* — Rosa antico evidenza — */ --palette-rose: #C2706A; /* evidenza — tono caldo, non aggressivo */ --palette-rose-dark: #A5524C; /* hover evidenza */ --palette-white: #ffffff; --palette-black: #000000; /* ── 5. BLOCCHI COLORE TEMA ──────────────────────────────── */ /* * color1 → bianco caldo (sezioni principali, hero light) * color2 → cacao scuro (footer, sezioni dark) * color3 → oro primary (CTA, badge, highlight accent) * color4 → cipria / rosa chiaro (sezioni secondarie, card bg) * color5 → terracotta (sezioni ponte, testimonial, callout) */ /* — Blocco 1: bianco / sfondo principale — */ --theme-color1-bg: var(--palette-white); --theme-color1-bg-alt: var(--palette-blush); /* #F8F0EA variante cipria */ --theme-color1-txt: var(--palette-ink); --theme-color1-border: var(--palette-blush-mid); /* — Blocco 2: cacao scuro / footer / sezioni dark — */ --theme-color2-bg: var(--palette-cacao); /* #3D2B1F */ --theme-color2-bg-alt: var(--palette-cacao-mid); /* #4F3828 variante più chiara */ --theme-color2-txt: var(--palette-white); --theme-color2-border: var(--palette-cacao-mid); /* — Blocco 3: oro primary / accent / CTA — */ --theme-color3-bg: var(--palette-gold); /* #CCA145 */ --theme-color3-bg-alt: var(--palette-gold-dark); /* #B8883A hover/pressed */ --theme-color3-txt: var(--palette-ink); /* testo nero su oro */ --theme-color3-border: var(--palette-gold-dark); /* — Blocco 4: cipria / sezioni secondarie / card — */ --theme-color4-bg: var(--palette-blush); /* #F8F0EA */ --theme-color4-bg-alt: var(--palette-blush-mid); /* #E8D5C4 variante più marcata */ --theme-color4-txt: var(--palette-ink); --theme-color4-border: var(--palette-blush-mid); /* — Blocco 5: terracotta / sezioni ponte / testimonial — */ --theme-color5-bg: var(--palette-terra); /* #9F704F */ --theme-color5-bg-alt: var(--palette-terra-dark); /* #7A5238 hover/pressed */ --theme-color5-txt: var(--palette-white); --theme-color5-border: var(--palette-terra-dark); /* — Evidenza (rosa antico, caldo, non aggressivo) — */ --theme-evidence-bg: var(--palette-rose); /* #C2706A */ --theme-evidence-bg-alt: var(--palette-rose-dark); /* #A5524C variante più scura */ --theme-evidence-txt: var(--palette-white); --theme-evidence-border: var(--palette-rose-dark); /* ── 6. GRADIENTE DECORATIVO ─────────────────────────────── */ /* * Fotografia neonati: cipria → bianco caldo con velatura oro. * Etereo, morbido, luminoso — evoca luce da finestra. */ --gradient-angle: 150deg; --gradient: linear-gradient( var(--gradient-angle), var(--palette-blush) 0%, /* #F8F0EA cipria */ var(--palette-white) 40%, /* #ffffff bianco */ var(--palette-ink-100) 70%, /* #EDE5DF neutro caldo */ var(--palette-blush) 100% /* #F8F0EA chiusura */ ); /* variante con accento oro — per hero o banner pacchetti */ --gradient-accent: linear-gradient( var(--gradient-angle), var(--palette-blush) 0%, var(--palette-white) 35%, var(--palette-gold-pale) 60%, var(--palette-gold) 80%, var(--palette-terra) 100% ); /* variante sottile per bg di sezioni chiare */ --gradient-light: linear-gradient( 180deg, var(--palette-white) 0%, var(--palette-blush) 50%, var(--palette-ink-100) 100% ); /* ── 7. COLORI BOOTSTRAP / SEMANTICI ────────────────────── */ --theme-primary: var(--palette-gold); /* #CCA145 */ --theme-primary-dark: var(--palette-gold-dark); /* #B8883A */ --theme-primary-txt: var(--palette-ink); /* testo su oro */ --theme-secondary: var(--palette-terra); /* #9F704F */ --theme-secondary-dark: var(--palette-terra-dark); /* #7A5238 */ --theme-secondary-txt: var(--palette-white); --theme-success: #5A9E6F; --theme-success-txt: var(--palette-white); --theme-warning: var(--palette-gold); /* riutilizza oro */ --theme-warning-txt: var(--palette-ink); --theme-danger: var(--palette-rose); /* #C2706A */ --theme-danger-txt: var(--palette-white); --theme-info: #7AACCF; --theme-info-txt: var(--palette-white); /* alias Bootstrap */ --bs-primary: var(--theme-primary); --bs-border-color: var(--palette-blush-mid); /* ── 8. UTILITY GENERICHE ────────────────────────────────── */ --bg-light: var(--palette-blush); /* #F8F0EA */ --bg-medium: var(--palette-blush-mid); /* #E8D5C4 */ --bg-dark: var(--palette-cacao); /* #3D2B1F */ --bg-dark-txt: var(--palette-white); --border-radius: .4rem; --border-radius-lg: .75rem; --border-color: var(--palette-blush-mid); /* #E8D5C4 */ --border-color-dark: var(--palette-blush-deep); /* #D4B9A8 */ --box-shadow: 0 .125rem .25rem rgba(63, 43, 31, .06); --box-shadow-md: 0 .25rem .75rem rgba(63, 43, 31, .10); --box-shadow-lg: 0 .5rem 1.5rem rgba(63, 43, 31, .14); /* ombra con tono brand — per card CTA o elementi in evidenza */ --box-shadow-accent: 0 .25rem .75rem rgba(204, 161, 69, .28); --text-shadow: 1px 1px 1px rgba(0, 0, 0, .5); --text-shadow2: 1px 1px 2px rgba(0, 0, 0, .55); /* ── 9. COLORI PARTI SPECIFICHE SITO ────────────────────── */ /* highlight testo (es. o classe .highlight) */ --highlight-bg: var(--palette-gold-pale); /* #FDF3DC */ --highlight-txt: var(--palette-ink); /* testo oro leggibile su sfondi bianchi/chiari (WCAG AA) */ --accent-txt-on-light: var(--palette-gold-deep); /* #8A6520 */ /* bordo accent — linea decorativa, underline titoli */ --accent-border: var(--palette-gold); /* #CCA145 */ --accent-border-thick: 2px; /* più sottile, più raffinato */ /* ── 10. COLORI PARTI TECNICHE (alder) ───────────────────── */ --alder-bg: #ffcc00; --alder-txt: var(--palette-black); }