/* * ============================================================ * THEME — Arsbot * Dark grey / Teal * ============================================================ * */ :root { /* ── 1. TIPOGRAFIA ───────────────────────────────────────── */ --body-font-family: "DM Sans", sans-serif; --heading-font-family: "DM Sans", sans-serif; --cursive-font-family: Georgia, "Times New Roman", Times, serif; --icon-font-family: "Font Awesome 6 Free", FontAwesome; --body-font-size: 18px; --line-height: 1.5; --body-font-weight: 300; --heading-letter-spacing: .02em; /* Barlow Condensed respira meglio con tracking lieve */ --heading-font-weight: 600; /* ── 2. LAYOUT BASE ──────────────────────────────────────── */ --margin-bottom-base: 1rem; --padding-base: 1rem; --slide-padding: 4rem; --header-height: 160px; /* ── 3. COLORI DI BASE ───────────────────────────────────── */ --body-bg: #ffffff; --body-color: #000000; --body-color-light: #a7a7a7; /* ── 4. PALETTE GREZZA (riferimento interno) ─────────────── */ /* * Usare queste solo per costruire le variabili semantiche * qui sotto. Nel CSS dei componenti usare sempre le * variabili semantiche. */ --palette-teal: #0bd1c0; --palette-teal-dark: #019482; /* hover / pressed */ --palette-teal-pale: #d6f7f4; /* tint utile per bg highlight */ --palette-teal-deep: #015c52; /* testo su sfondo chiaro (WCAG AA) */ --palette-gray-900: #000000; /* testo principale */ --palette-gray-700: #333333; /* testo secondario */ --palette-gray-600: #666666; /* caption, label */ --palette-gray-400: #999999; /* placeholder, disabilitato */ --palette-gray-300: #cccccc; /* bordi, divisori */ --palette-gray-100: #e4e4e4; /* bg sezioni alternate */ --palette-gray-50: #f8f8f8; /* bg chiaro alternativo */ --palette-dark: #000000; /* footer / sezioni scure */ --palette-anthracite: #2e2e2e; /* bg card scura, header dark */ --palette-red: #e8000d; /* evidenza — rosso secco, non morbido — INVARIATO */ --palette-red-dark: #b80009; /* hover evidenza — INVARIATO */ --palette-white: #ffffff; --palette-black: #000000; /* ── 5. BLOCCHI COLORE TEMA ──────────────────────────────── */ /* * color1 → teal brand (CTA, badge, highlight accent) * color2 → nero (footer, sezioni dark) * color3 → bianco (sezioni principali, hero light) * color4 → grigio chiaro (sezioni secondarie, card bg) */ /* — Blocco 1: teal brand / accent — */ --theme-color1-bg: var(--palette-teal); /* #0bd1c0 */ --theme-color1-bg-alt: var(--palette-teal-dark); /* #019482 hover/pressed */ --theme-color1-txt: var(--palette-gray-900); /* testo nero su teal */ --theme-color1-border: var(--palette-teal-dark); /* — Blocco 2: scuro / footer / sezioni dark — */ --theme-color2-bg: var(--palette-dark); /* #000000 */ --theme-color2-bg-alt: var(--palette-anthracite); /* #262626 variante più chiara */ --theme-color2-txt: var(--palette-white); --theme-color2-border: var(--palette-anthracite); /* — Blocco 3: bianco / sfondo chiaro — */ --theme-color3-bg: var(--palette-white); --theme-color3-bg-alt: var(--palette-gray-50); /* #f8f8f8 variante appena grigia */ --theme-color3-txt: var(--palette-gray-900); --theme-color3-border: var(--palette-gray-300); /* — Blocco 4: grigio chiaro (sezioni secondarie) — */ --theme-color4-bg: var(--palette-gray-100); /* #f2f2f2 */ --theme-color4-bg-alt: var(--palette-gray-300); /* #cccccc variante più scura */ --theme-color4-txt: var(--palette-gray-900); --theme-color4-border: var(--palette-gray-300); /* — Evidenza (rosso secco, grintoso) — INVARIATA — */ --theme-evidence-bg: var(--palette-red); /* #e8000d */ --theme-evidence-bg-alt:var(--palette-red-dark); /* #b80009 variante più scura */ --theme-evidence-txt: var(--palette-white); --theme-evidence-border:var(--palette-red-dark); /* ── 6. GRADIENTE DECORATIVO ─────────────────────────────── */ /* * Agenzia web: nero → grigio antracite con lampo teal * al centro. Tecnico, direzionale, non decorativo. */ --gradient-angle: 135deg; --gradient: linear-gradient( var(--gradient-angle), var(--palette-dark) 0%, /* #000000 nero */ var(--palette-anthracite) 35%, /* #262626 antracite */ var(--palette-gray-700) 60%, /* #333333 grigio medio-scuro */ var(--palette-anthracite) 85%, /* #262626 ritorno */ var(--palette-dark) 100% /* #000000 chiusura */ ); /* variante con accento teal — per hero o banner speciali */ --gradient-accent: linear-gradient( var(--gradient-angle), var(--palette-dark) 0%, var(--palette-anthracite) 40%, var(--palette-teal) 60%, var(--palette-teal-dark) 75%, var(--palette-dark) 100% ); /* variante sottile per bg di sezioni chiare */ --gradient-light: linear-gradient( 180deg, var(--palette-white) 0%, var(--palette-gray-50) 50%, var(--palette-gray-100) 100% ); /* ── 7. COLORI BOOTSTRAP / SEMANTICI ────────────────────── */ --theme-primary: var(--palette-teal); /* #0bd1c0 */ --theme-primary-dark: var(--palette-teal-dark); /* #019482 */ --theme-primary-txt: var(--palette-gray-100); /* testo su teal */ --theme-success: #28a745; --theme-success-txt: var(--palette-white); --theme-warning: #ffa726; --theme-warning-txt: var(--palette-gray-900); --theme-danger: var(--palette-red); /* #e8000d — INVARIATO */ --theme-danger-txt: var(--palette-white); --theme-info: #567181; /* blu ardesia, neutro e desaturato */ --theme-info-dark: #415967; --theme-info-txt: var(--palette-white); --theme-info-txt-emphasis: #2d414c; --theme-info-bg-subtle: #e5eaed; --theme-info-border-subtle: #b8c5cc; /* alias Bootstrap */ --bs-primary: var(--theme-primary); --bs-info: var(--theme-info); --bs-info-rgb: 86, 113, 129; --bs-info-text-emphasis: var(--theme-info-txt-emphasis); --bs-info-bg-subtle: var(--theme-info-bg-subtle); --bs-info-border-subtle: var(--theme-info-border-subtle); --bs-border-color: var(--palette-gray-300); /* ── 8. UTILITY GENERICHE ────────────────────────────────── */ --bg-light: var(--palette-gray-50); /* #f2f2f2 */ --bg-medium: var(--palette-gray-300); /* #cccccc */ --bg-dark: var(--palette-anthracite); /* #262626 */ --bg-dark-txt: var(--palette-gray-100); /* bianco */ --border-radius: .4rem; --border-radius-lg: .65rem; --border-color: var(--palette-gray-100); --border-color-dark: var(--palette-gray-400); /* #999999 */ --box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .07); --box-shadow-md: 0 .2rem .55rem rgba(0, 0, 0, .12); --box-shadow-lg: 0 .5rem 1.5rem rgba(0, 0, 0, .15); /* ombra con tono brand — per card CTA o elementi in evidenza */ --box-shadow-accent: 0 .25rem .75rem rgba(11, 209, 192, .25); --text-shadow: 1px 1px 1px rgba(0, 0, 0, .7); --text-shadow2: 1px 1px 2px rgba(0, 0, 0, .75); /* ── 9. COLORI PARTI SPECIFICHE SITO ────────────────────── */ /* highlight testo (es. o classe .highlight) */ --highlight-bg: var(--palette-teal-pale); /* #d6f7f4 */ --highlight-txt: var(--palette-gray-900); /* testo teal leggibile su sfondi bianchi/chiari (WCAG AA) */ --accent-txt-on-light: var(--palette-teal-deep); /* #015c52 */ /* bordo accent — linea decorativa, underline titoli */ --accent-border: var(--palette-teal); /* #0bd1c0 */ --accent-border-thick: 3px; /* colore delle parti tecniche — ALDER — INVARIATO */ --alder-bg: #ffcc00; --alder-txt: black; }