/* ========================= Base variables + Themes ========================= */ :root{ /* Accent (default dark) */ --gold:#b08d57; --gold-2:#d7c39a; /* Borders / surfaces (default dark) */ --border-soft: rgba(255,255,255,.08); --page-bg:#0b0c0f; --text:#e9ecef; --muted: rgba(233,236,239,.72); --surface: rgba(255,255,255,.03); /* card */ --surface-2: rgba(255,255,255,.03); /* section-alt */ --shadow: 0 .25rem 1rem rgba(0,0,0,.25); --nav-bg:#121316; --footer-bg:#121316; /* Hero background as variable, so themes can override it */ --hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(176,141,87,.22), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(215,195,154,.10), transparent 60%), linear-gradient(180deg, #0b0c0f 0%, #0b0c0f 60%, rgba(255,255,255,.03) 100%); } /* ========================= Theme: CANAPA (light) Attiva con ========================= */ body.theme-canapa{ /* Palette */ --canapa:#d3ccc1; --caramello:#c5ab91; --cumino:#8e6d52; --pino:#465443; /* Accent */ --gold: var(--cumino); --gold-2: var(--caramello); /* Base */ --page-bg:#f3eee6; --text:#1f2621; --muted: rgba(31,38,33,.70); /* Surfaces */ --border-soft: rgba(70,84,67,.18); --surface: rgba(255,255,255,.74); --surface-2: rgba(70,84,67,.06); --shadow: 0 .25rem 1rem rgba(0,0,0,.12); --nav-bg: var(--pino); --footer-bg: var(--pino); /* Hero */ --hero-bg: radial-gradient(1200px 600px at 12% 12%, rgba(142,109,82,.18), transparent 60%), radial-gradient(900px 500px at 85% 18%, rgba(197,171,145,.24), transparent 60%), linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg) 60%, rgba(255,255,255,.45) 100%); } /* ========================= Global ========================= */ body{ background: var(--page-bg); color: var(--text); } .section{ padding: 4.25rem 0; } .section-alt{ background: var(--surface-2); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .section-title{ font-weight: 700; letter-spacing: -0.02em; } .text-gold{ color: var(--gold) !important; } .text-body-secondary{ color: var(--muted) !important; } .letter-spaced{ letter-spacing: .18em; } .brand-mark{ display:inline-block; width: 12px; height: 12px; border-radius: 999px; background: linear-gradient(135deg, var(--gold), var(--gold-2)); vertical-align: middle; } /* Navbar / Footer override (anche se usi bg-dark) */ #mainNav{ background-color: var(--nav-bg) !important; } footer{ background-color: var(--footer-bg) !important; } /* ========================= Hero ========================= */ .hero{ background: var(--hero-bg); } .hero .lead{ max-width: 52ch; } .hero-card{ border:1px solid var(--border-soft); background: var(--surface); border-radius: 1.25rem; backdrop-filter: blur(6px); box-shadow: var(--shadow); } /* ========================= Cards / badges ========================= */ .card-soft{ background: var(--surface); border:1px solid var(--border-soft); border-radius: 1rem; box-shadow: var(--shadow); } .icon-badge{ width: 40px; height: 40px; border-radius: 999px; display:grid; place-items:center; background: rgba(176,141,87,.15); border:1px solid rgba(176,141,87,.25); color: var(--gold-2); } /* ========================= Buttons ========================= */ .btn-gold{ --bs-btn-color: #111; --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold); --bs-btn-hover-color: #111; --bs-btn-hover-bg: var(--gold-2); --bs-btn-hover-border-color: var(--gold-2); --bs-btn-active-color: #111; --bs-btn-active-bg: var(--gold-2); --bs-btn-active-border-color: var(--gold-2); } /* In tema chiaro, i bottoni outline-light sul hero diventano poco visibili */ body.theme-canapa .btn-outline-light{ --bs-btn-color: var(--pino); --bs-btn-border-color: rgba(70,84,67,.55); --bs-btn-hover-bg: rgba(70,84,67,.10); --bs-btn-hover-border-color: rgba(70,84,67,.70); --bs-btn-hover-color: var(--pino); } /* ========================= Gallery tiles ========================= */ .gallery-tile{ position:relative; display:block; border-radius: 1rem; overflow:hidden; border:1px solid var(--border-soft); box-shadow: 0 .25rem 1rem rgba(0,0,0,.25); text-decoration:none; transform: translateZ(0); } .gallery-tile img{ width:100%; height: 240px; object-fit: cover; display:block; filter: saturate(1.05) contrast(1.05); transition: transform .35s ease; } .gallery-tile:hover img{ transform: scale(1.03); } .gallery-caption{ position:absolute; left:.75rem; bottom:.75rem; padding:.35rem .6rem; border-radius: 999px; background: rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.15); color:#fff; font-size: .85rem; } /* ========================= PDF tiles ========================= */ .pdf-tile{ display:block; text-decoration:none; padding: 1rem; border-radius: 1rem; background: var(--surface); border:1px solid var(--border-soft); box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease, background .2s ease; height: 100%; } .pdf-tile:hover{ transform: translateY(-2px); border-color: rgba(176,141,87,.35); background: color-mix(in srgb, var(--surface) 92%, white 8%); } .pdf-icon{ width: 52px; height: 52px; border-radius: 14px; display:grid; place-items:center; background: rgba(176,141,87,.15); border:1px solid rgba(176,141,87,.25); color: var(--gold-2); font-size: 1.6rem; margin-bottom: .75rem; } .pdf-title{ font-weight: 650; color: var(--text); line-height: 1.2; } .pdf-subtitle{ margin-top: .25rem; font-size: .9rem; color: var(--muted); } /* ========================= Certification tiles ========================= */ .cert-tile{ display:block; text-decoration:none; padding: .9rem .9rem .8rem; border-radius: 1rem; background: var(--surface); border:1px solid var(--border-soft); box-shadow: var(--shadow); height: 100%; text-align:center; transition: transform .2s ease, border-color .2s ease, background .2s ease; position: relative; } .cert-tile:hover{ transform: translateY(-2px); border-color: rgba(176,141,87,.35); background: color-mix(in srgb, var(--surface) 92%, white 8%); } .cert-logo{ width: 100%; max-width: 140px; height: 70px; object-fit: contain; display:block; margin: 0 auto .6rem; filter: saturate(1.05); } .cert-name{ font-weight: 700; color: var(--text); line-height: 1.1; } .cert-sub{ margin-top: .2rem; font-size: .85rem; color: var(--muted); line-height: 1.2; } .cert-badge{ position: absolute; top: -8px; left: -8px; width: 56px; height: 56px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; color: var(--page-bg); font-size: 1.8rem; box-shadow: 0 2px 8px rgba(176,141,87,.3); } .cookie-banner{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080; padding: 1rem 0; } .cookie-card{ display:flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem; border-radius: 1rem; background: var(--surface); border: 1px solid var(--border-soft); box-shadow: var(--shadow); } .cookie-text{ font-size: .9rem; color: var(--text); } .cookie-text a{ color: var(--gold); text-decoration: underline; } .cookie-actions{ display:flex; gap: .5rem; flex-wrap: wrap; } @media (max-width: 576px){ .cookie-card{ flex-direction: column; align-items: stretch; } .cookie-actions{ justify-content: stretch; } .cookie-actions .btn{ width: 100%; } } .hero-logo{ height: 44px; width: auto; opacity: .9; filter: brightness(0); /* nero su tema chiaro */ } body:not(.theme-canapa) .hero-logo{ filter: brightness(0) invert(1); /* bianco su tema scuro */ } @media (max-width: 576px){ .hero-logo{ height: 34px; } }