/* * Adaptive theme styles for locality types: mare (sea), montagna (mountain), collina (hill). *-------------------------------------------------------------- * ➤ Usage: add the class `localita-mare`, `localita-montagna`, or `localita-collina` * to the tag (or a top‑level wrapper) according to $pagina['localita']['tipo']. * Example (Blade): * *-------------------------------------------------------------- */ /* ---------- Root defaults (fallback) ---------- */ .localita-mare { --background-color: #d5d9db; --primary-color: #7dc4ea; --secondary-color: #003f7f; --accent-color: #00bfff; --background-image: none; --overlay-opacity: 0.45; --bg-color-card: #7dc4ea; } /* ---------- Base styles using CSS variables ---------- */ .localita-mare a, .localita-mare p { color:black } .localita-mare .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; transition: background-color 0.25s ease; } .localita-mare .btn-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); } .localita-mare .text-accent { color: var(--accent-color) !important; } .localita-mare .bg-primary { background-color: var(--primary-color) !important; } .localita-mare .bg-secondary { background-color: var(--secondary-color) !important; } .localita-mare .border-accent { border-color: var(--accent-color) !important; } .localita-mare a:hover { color: gold; } /* ---------- Hero section helper ---------- */ .localita-mare .hero-section { position: relative; background-image: var(--background-image); background-size: cover; background-position: center; } .localita-mare .hero-section::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--overlay-opacity)); } /* 🌊 SEA / MARE --------------------------------------------------- */ .localita-mare { --primary-color: #7dc4ea; --secondary-color: #01579b; --accent-color: #00bcd4; --background-image: url("../assets_portal/immagini-mare/hero.jpg"); } .localita-mare header.navbar-light.header-sticky { background-color: var(--primary-color); backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } .localita-mare .navbar .nav-link { color: #e0f7fa; font-weight: 500; } .localita-mare .navbar .nav-link:hover, .localita-mare .navbar .dropdown-item:hover { color: #ffffff; background-color: rgba(0, 188, 212, 0.2); } .localita-mare .navbar .dropdown-menu { background-color: #0288d1; border: none; border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .localita-mare .navbar .dropdown-item { color: #e0f7fa; } .localita-mare .navbar-brand img { max-height: 45px; transition: transform 0.3s ease; } .localita-mare .navbar-brand img:hover { transform: scale(1.05); } .localita-mare .bg_card_param { background: var(--bg-color-card); color: var(--color-snow); } /* 🏔️ MOUNTAIN / MONTAGNA ----------------------------------------- */ /* ========= VARIABILI DI TEMA ========= */ .localita-montagna { /* Nuovi colori “Alta Quota” */ --color-sky: #5fa3e6; /* azzurro ghiaccio */ --primary-color: #497b64; /* ardesia‑scisto */ --color-forest: #0f5132; /* verde abete fitto */ --color-earth: #9c7b5c; /* sentiero bruno */ --color-snow: #ffffff; /* neve pura */ --color-rock: #2e353a; /* roccia bagnata */ --color-text: #212529; /* testo neutro */ --bg-color-card: #497b64; --background-color: #d5d9db; /* Font */ color: var(--color-text); line-height: 1.6; /* Gradiente rinfrescato */ /* background: linear-gradient( 180deg, var(--color-sky) 0%, var(--color-snow) 350px, var(--color-earth) 100% );*/ } /* ========= BASE ========= */ .localita-montagna *, .localita-montagna *::before, .localita-montagna *::after { box-sizing: border-box; } .localita-montagna h1, .localita-montagna h2, .localita-montagna h3, .localita-montagna h4, .localita-montagna h5, .localita-montagna h6, .localita-montagna p{ font-family: var(--font-heading); color: var(--primary-color); letter-spacing: 1px; margin-top: 0; text-transform: uppercase; } /* ========= NAVBAR ========= */ .localita-montagna .navbar { position: sticky; top: 0; z-index: 10; display: flex; gap: 1rem; padding: 0.75rem 2rem; background:var(--primary-color); backdrop-filter: blur(6px); } .localita-montagna .navbar a { color: var(--color-snow); text-decoration: none; font-weight: 600; transition: color 0.25s; } .localita-montagna .navbar a:hover { color: var(--color-forest); } /* ========= HERO ========= */ .localita-montagna .hero { height: 60vh; background: url('images/mountains_hero.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; } .localita-montagna .hero__title { font-size: clamp(2.5rem, 6vw, 5rem); color: var(--color-snow); text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); margin: 0; } /* ========= LAYOUT ========= */ .localita-montagna .container { width: min(1200px, 90%); margin-inline: auto; } .localita-montagna .section { padding: 4rem 0; background: var(--color-snow); } .localita-montagna .section.alt { background: #f3f7f9; } .localita-montagna .section + .section::before { content: ""; display: block; height: 100px; background: url('images/mountain_divider.svg') center/cover no-repeat; margin-top: -100px; } /* ========= CARD ========= */ .localita-montagna .card:hover { transform: translateY(-6px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); } /* ========= GRIGLIE ========= */ .localita-montagna .grid { display: grid; gap: 2rem; } @media (min-width: 768px) { .localita-montagna .grid-2 { grid-template-columns: repeat(2, 1fr); } .localita-montagna .grid-3 { grid-template-columns: repeat(3, 1fr); } } /* ========= BOTTONI ========= */ .localita-montagna .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 0.5rem; background: var(--color-forest); color: var(--color-snow); font-weight: 600; text-decoration: none; transition: background 0.25s; } .localita-montagna .btn:hover { background: #256b45; } /* ========= FOOTER ========= */ .localita-montagna .footer { background: var(--color-rock); color: var(--color-snow); text-align: center; padding: 2rem 1rem; } /* ========= DARK MODE ========= */ @media (prefers-color-scheme: dark) { .localita-montagna { color: var(--color-snow); background: #1e1e1e; } .localita-montagna .section, .localita-montagna .section.alt { background: #2a2a2a; } .localita-montagna .navbar { background: rgba(0, 0, 0, 0.7); } } .localita-montagna .bg_card_param { background: var(--bg-color-card); color: var(--color-text); } /* 🌄 HILL / COLLINA ---------------------------------------------- */ /* ---------- Root defaults (fallback) ---------- */ .localita-collina { --background-color: #f4f1e8; /* beige chiaro */ --primary-color: #a2b07e; /* verde salvia */ --secondary-color: #6d4c3d; /* marrone terra */ --accent-color: #d9a441; /* giallo ocra */ --background-image: none; --overlay-opacity: 0.35; --bg-color-card: #e3ddc8; /* beige/paglia */ } /* ---------- Base styles using CSS variables ---------- */ .localita-collina a, .localita-collina p { color: black; } .localita-collina .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; transition: background-color 0.25s ease; } .localita-collina .btn-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); } .localita-collina .text-accent { color: var(--accent-color) !important; } .localita-collina .bg-primary { background-color: var(--primary-color) !important; } .localita-collina .bg-secondary { background-color: var(--secondary-color) !important; } .localita-collina .border-accent { border-color: var(--accent-color) !important; } .localita-collina a:hover { color: var(--accent-color); } /* ---------- Hero section helper ---------- */ .localita-collina .hero-section { position: relative; background-image: var(--background-image); background-size: cover; background-position: center; } .localita-collina .hero-section::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--overlay-opacity)); } /* 🌿 COLLINA / CAMPAGNA --------------------------------------------------- */ /*.localita-collina { --primary-color: #a2b07e; --secondary-color: #6d4c3d; --accent-color: #d9a441; --background-image: url("../assets_portal/immagini-collina/hero.jpg"); } */ .localita-collina header.navbar-light.header-sticky { background-color: var(--primary-color); backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } .localita-collina .navbar .nav-link { color: #fefae0; font-weight: 500; } .localita-collina .navbar .nav-link:hover, .localita-collina .navbar .dropdown-item:hover { color: #ffffff; background-color: rgba(217, 164, 65, 0.25); /* ocra trasparente */ } .localita-collina .navbar .dropdown-menu { background-color: #8b6f4e; border: none; border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .localita-collina .navbar .dropdown-item { color: #fefae0; } .localita-collina .navbar-brand img { max-height: 45px; transition: transform 0.3s ease; } .localita-collina .navbar-brand img:hover { transform: scale(1.05); } .localita-collina .bg_card_param { background: var(--bg-color-card); color: #333; } /* ---------- Optional utility to fine‑tune overlay darkness per theme ---------- */ body { font-family: "Inter", system-ui, sans-serif; background-color: var(--background-color)!important; /* background-image: var(--background-image); */ background-size: cover; background-position: center; transition: background 0.3s ease, color 0.3s ease; }