/* =========================================================
SUNAMU - UNICO CSS GLOBALE
File: out/css/style.css
- Mantiene la navbar Bootstrap "perfetta" (subset CSS incluso)
- Non richiede altri CSS (niente bootstrap.css separato)
- Carousel (oltreilblocco): frecce + dots corretti
- Footer: niente buchi bianchi
========================================================= */
:root{
--sunamu-black:#000;
--sunamu-dark:#212529; /* bg-dark bootstrap */
--sunamu-yellow:#f8b14d;
--sunamu-text:#222;
--sunamu-bg:#fff;
--sunamu-muted:#595959; /* WCAG 2.1 AA: ratio 7.0:1 su sfondo bianco */
--sunamu-border:#ddd;
--nav-h: 64px;
}
*{ box-sizing:border-box; }
html, body{
height:100%;
margin:0;
padding:0;
}
body{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height:1.6;
background:#000;
color:#fbf5f5;
}
a{ text-decoration:none; color:inherit; }
a:hover{ opacity:.9; }
.text-yellow{ color:var(--sunamu-yellow)!important; }
/* =========================================================
SUBSET BOOTSTRAP ESSENZIALE (NAVBAR + CONTAINER + UTIL)
Serve a NON cambiare la tua navbar "perfetta"
========================================================= */
/* Container Bootstrap-like */
.container{
width:100%;
padding-right:calc(1.5rem * .5);
padding-left:calc(1.5rem * .5);
margin-right:auto;
margin-left:auto;
}
@media (min-width:576px){ .container{ max-width:540px; } }
@media (min-width:768px){ .container{ max-width:720px; } }
@media (min-width:992px){ .container{ max-width:960px; } }
@media (min-width:1200px){ .container{ max-width:1140px; } }
@media (min-width:1400px){ .container{ max-width:1320px; } }
/* Utility */
.ms-auto{ margin-left:auto!important; }
/* Navbar core */
.navbar{
position:relative;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
padding:.5rem 0;
}
.navbar > .container{
display:flex;
flex-wrap:inherit;
align-items:center;
justify-content:space-between;
}
.navbar-brand{
padding-top:.3125rem;
padding-bottom:.3125rem;
margin-right:1rem;
font-size:1.25rem;
font-weight:700;
white-space:nowrap;
}
.navbar-nav{
display:flex;
flex-direction:column;
padding-left:0;
margin:0;
list-style:none;
}
.navbar-nav .nav-link{
display:block;
padding:.5rem 0;
}
.navbar-nav .nav-item{ margin:0; padding:0; }
/* Dark theme */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link{
color:rgba(248,177,77,1);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus{
color:rgba(248,177,77,.85);
}
.bg-dark{ background-color:var(--sunamu-dark)!important; }
/* Collapse */
.collapse:not(.show){ display:none; }
.navbar-collapse{
flex-basis:100%;
flex-grow:1;
align-items:center;
}
/* Toggler */
.navbar-toggler{
padding:.25rem .75rem;
font-size:1.25rem;
line-height:1;
background-color:transparent;
border:1px solid rgba(255,255,255,.25);
border-radius:.375rem;
color:rgba(255,255,255,.55);
}
.navbar-toggler:hover{ opacity:.9; cursor:pointer; }
.navbar-toggler:focus{ outline:0; box-shadow:0 0 0 .2rem rgba(248,177,77,.25); }
.navbar-toggler-icon{
display:inline-block;
width:1.5em;
height:1.5em;
vertical-align:middle;
background-repeat:no-repeat;
background-position:center;
background-size:100%;
/* icona identica bootstrap (bianca) */
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Navbar expand lg (>=992px) */
@media (min-width:992px){
.navbar-expand-lg{
flex-wrap:nowrap;
justify-content:flex-start;
}
.navbar-expand-lg .navbar-nav{
flex-direction:row;
}
.navbar-expand-lg .navbar-nav .nav-link{
padding-right:.5rem;
padding-left:.5rem;
}
.navbar-expand-lg .navbar-collapse{
display:flex!important;
flex-basis:auto;
}
.navbar-expand-lg .navbar-toggler{
display:none;
}
}
/* =========================================================
SEZIONI (padding standard) - NON toccare hero
========================================================= */
section{
padding-top:60px;
padding-bottom:60px;
}
.hero{ padding-top:0; padding-bottom:0; margin-top: var(--nav-h); }
.hero .overlay{ background:rgba(0,0,0,.6); z-index:1; }
.hero video{ z-index:0; object-fit:cover; }
.hero .content{ z-index:2; }
.page-title{
color:var(--sunamu-yellow);
text-align:center;
font-weight:700;
font-size:2.5rem;
padding:4rem 1rem 2rem 1rem;
}
/* =========================================================
HERO STATICO (tutte le pagine NON-carousel)
url relativo a /css/style.css -> /assets/images/hero-bg.jpg
========================================================= */
.hero:not(.hero-carousel){
background:url('../assets/images/hero-bg.jpg') no-repeat center center/cover;
min-height:60vh;
display:flex;
align-items:center;
justify-content:center;
text-shadow:1px 1px 4px #000;
}
/* =========================================================
HERO CAROUSEL (oltreilblocco)
Fix: dots MAI sotto freccia, z-index coerenti
========================================================= */
.hero.hero-carousel{
position:relative;
min-height:60vh;
overflow:hidden;
background:#000;
display:block;
text-shadow:none;
}
/* overlay per leggibilità */
.hero.hero-carousel::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.60));
z-index:1;
pointer-events:none;
}
/* immagini */
.hero.hero-carousel .slides{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:0;
}
.hero.hero-carousel img.slide{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
opacity:0;
visibility:hidden;
transition:opacity .6s ease;
}
.hero.hero-carousel img.slide.active{
opacity:1;
visibility:visible;
}
/* contenuto sopra overlay */
.hero.hero-carousel .container.hero-content{
position:relative;
z-index:2;
text-align:center;
color:#fff;
padding:60px 16px;
}
.hero.hero-carousel .hero-content h2{
margin:14px 0 0 0;
color:var(--sunamu-yellow);
text-shadow:1px 1px 4px rgba(0,0,0,.7);
}
.hero.hero-carousel .hero-content p{
margin:0 0 14px 0;
text-shadow:1px 1px 4px rgba(0,0,0,.7);
}
/* frecce */
.hero.hero-carousel .caro-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:5; /* sopra dots */
width:46px;
height:46px;
border:0;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.35);
color:#fff;
font-size:28px;
cursor:pointer;
}
.hero.hero-carousel .caro-nav.prev{ left:14px; right:auto; }
.hero.hero-carousel .caro-nav.next{ right:14px; left:auto; }
/* dots: sempre centrati + zona di sicurezza per non finire sotto le frecce */
.hero.hero-carousel .caro-dots{
position:absolute!important;
left:50%!important;
right:auto!important;
bottom:14px!important;
transform:translateX(-50%)!important;
z-index:4!important;
display:flex!important;
justify-content:center!important;
gap:10px!important;
padding:0 80px!important; /* evita l'area delle frecce */
}
.hero.hero-carousel .caro-dots button{
width:10px;
height:10px;
border-radius:999px;
border:0;
background:rgba(255,255,255,.4);
cursor:pointer;
}
.hero.hero-carousel .caro-dots button.active{
background:rgba(255,255,255,.95);
}
@media (max-width:720px){
.hero.hero-carousel{ min-height:420px; }
.hero.hero-carousel .caro-nav{
width:40px;
height:40px;
font-size:24px;
}
.hero.hero-carousel .caro-nav.prev{ left:10px; }
.hero.hero-carousel .caro-nav.next{ right:10px; }
.hero.hero-carousel .caro-dots{ padding:0 64px!important; }
}
/* =========================================================
GALLERY (oltreilblocco)
========================================================= */
.container.gallery{
display:block;
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 16px;
}
.gallery-grid{
display:grid;
width:100%;
grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
gap:18px;
align-items:stretch;
}
.gallery-item{ margin:0; cursor:pointer; outline:none; }
.gallery-item img{
width:100%;
height:220px;
object-fit:cover;
border-radius:16px;
display:block;
}
/* =========================================================
LIGHTBOX
========================================================= */
#lightbox-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
display:none;
}
#lightbox-overlay img{
max-width:90%;
max-height:90%;
border:4px solid #fff;
border-radius:10px;
box-shadow:0 0 20px #000;
transition:all .3s ease-in-out;
cursor:zoom-out;
}
/* =========================================================
FORM BASE
========================================================= */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 18px;
border-radius:10px;
border:0;
background:var(--sunamu-yellow);
color:#111;
font-weight:700;
cursor:pointer;
}
.btn:hover{ opacity:.92; }
.field{ margin:0 0 14px 0; }
.label{ display:block; font-weight:700; margin:0 0 6px 0; }
input[type="text"], input[type="email"], input[type="url"], textarea{
width:100%;
padding:10px 12px;
border:1px solid var(--sunamu-border);
border-radius:10px;
outline:none;
color:var(--sunamu-text);
background:#fff;
}
textarea{ min-height:120px; resize:vertical; }
.form-text{
color:var(--sunamu-muted);
font-size:.92rem;
margin-top:6px;
}
.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
@media (max-width:820px){
.grid-2{ grid-template-columns:1fr; }
}
form label{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:0.5rem;
}
form input[type="checkbox"]{
margin:0;
transform:scale(1.2);
}
/* =========================================================
IMMAGINI UTILI
========================================================= */
.artist-img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
}
.img-fixed{
aspect-ratio:4/5;
object-fit:cover;
width:100%;
display:block;
border-radius:6px;
}
/* =========================================================
FOOTER: niente buchi bianchi, NON altera layout interno
========================================================= */
footer, #footer-placeholder{
background:#000!important;
color:var(--sunamu-yellow)!important;
width:100%;
margin:0;
padding:0;
}
footer a, #footer-placeholder a{
color:var(--sunamu-yellow)!important;
text-decoration:none!important;
}
footer a:hover, #footer-placeholder a:hover{ opacity:.85; }
/* evita spazi bianchi causati da ![]()
inline con baseline o wrapper */
footer img, #footer-placeholder img{
height:auto;
max-height:110px;
vertical-align:middle;
}
/* =========================================================
FIX FOOTER FORMATTazione (senza toccare HTML)
========================================================= */
/* sfondo pieno e niente buchi bianchi */
#footer-placeholder,
#footer-placeholder footer,
footer{
background: #000 !important;
color: #f8b14d !important;
}
/* il “buco” bianco spesso è margin/padding ereditato o wrapper non nero */
#footer-placeholder{
width: 100% !important;
margin: 0 !important;
padding: 28px 16px !important;
}
/* se dentro c'è un