/* ======================= SCR — Nav pulita - logo + scritta inline a sinistra - rover più grande a destra - menu orizzontale sotto, hover viola - senza background sui link - + barra opaca SOLO su mobile nelle pagine dei progetti (body.is-project) ======================= */ :root{ --nav-h: 200px; --brand-h: 180px; /* grandezza brand (logo + wordmark) */ --gap-x: 24px; --panel-bg: rgba(0,0,0,.92); --panel-bd: rgba(255,255,255,.08); --accent: #a064ff; } /* Barra principale */ .scr-nav{ position: fixed; top:0; left:0; right:0; height: var(--nav-h); z-index: 100000; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gap-x); background: transparent; } .scr-nav.is-opaque{ background: rgba(0,0,0,.86); backdrop-filter: blur(8px); } .scr-nav-spacer{ height: var(--nav-h); } .scr-nav-spacer.is-index{ height: 0 !important; } /* Logo + scritta inline */ .scr-logo{ display: flex; align-items: center; gap: 14px; min-height: var(--brand-h); } .scr-logo img{ height: var(--brand-h); /* logo leggermente più grande */ width:auto; display:block; } .scr-wordmark{ font-weight: 800; font-size: clamp(20px,2.2vw,26px); text-transform: uppercase; letter-spacing:.03em; line-height:1.05; color:#fff; } /* Rover a destra */ .scr-3d-btn{ position: relative; width: var(--brand-h); height: var(--brand-h); margin-inline-start: auto; background: transparent; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 100001; } .scr-3d-btn model-viewer{ width: 100%; height: 100%; --poster-color: transparent; background: transparent !important; pointer-events: none; } /* Overlay */ .scr-overlay{ position: fixed; inset: 0; z-index: 99997; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .scr-overlay.is-active{ opacity: 1; pointer-events: auto; } /* Dropdown orizzontale */ .scr-drop{ position: fixed; top: var(--nav-h); left:0; right:0; padding: 12px var(--gap-x); background: var(--panel-bg); border-top: 1px solid var(--panel-bd); box-shadow: 0 16px 48px rgba(0,0,0,.45); transform: translateY(-10px) scaleY(.98); transform-origin: top center; opacity: 0; transition: transform .28s ease, opacity .28s ease; z-index: 99998; } .scr-drop.is-open{ transform: translateY(0) scaleY(1); opacity: 1; } .scr-drop[hidden]{ display:none !important; } /* Lista principale */ .scr-drop-list{ margin:0; padding:0; list-style:none; display:flex; align-items:center; gap: clamp(16px,3vw,36px); justify-content:flex-end; } .scr-drop-list > li > a, .scr-drop-list > li > button.scr-acc-btn{ color:#fff; font-weight:800; font-size: clamp(16px,1.4vw,20px); letter-spacing:.02em; background:transparent; border:0; cursor:pointer; padding:6px 10px; transition: color .2s; } /* Hover viola */ .scr-drop-list > li > a:hover, .scr-drop-list > li > button.scr-acc-btn:hover{ color: var(--accent); } /* Projects con tendina verticale */ .scr-acc{ position: relative; } .scr-acc-panel{ position: absolute; top: calc(100% + 10px); right:0; min-width: 220px; background: var(--panel-bg); border: 1px solid var(--panel-bd); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.45); padding: 10px 12px; list-style: none; margin:0; display: flex; flex-direction: column; gap:10px; } /* stato base: chiuso */ .scr-acc .scr-acc-panel{ display:none; } /* apri su hover e su focus/tap (accessibile e mobile-friendly) */ .scr-acc:hover .scr-acc-panel, .scr-acc:focus-within .scr-acc-panel{ display:flex; } /* Evita doppio nav */ [data-scr="nav"] + [data-scr="nav"]{ display:none !important; } /* ======================= SOLO MOBILE, SOLO PAGINE PROGETTI: barra opaca fissa (anche senza scroll) Aggiungi class="is-project" al delle pagine in /works/ ======================= */ @media (max-width: 768px){ body.is-project .scr-nav{ background: rgba(0,0,0,.92) !important; backdrop-filter: blur(8px); } body.is-project .scr-nav-spacer{ height: var(--nav-h) !important; } } /* Responsive */ @media(max-width:1200px){ :root{ --nav-h:84px; --brand-h:120px; --gap-x:20px; } } @media(max-width:992px){ :root{ --nav-h:78px; --brand-h:110px; --gap-x:18px; } .scr-drop-list{ gap: clamp(14px,2.5vw,22px); } } @media(max-width:768px){ :root{ --nav-h:70px; --brand-h:106px; --gap-x:14px; } .scr-drop{ padding:10px var(--gap-x); } .scr-drop-list{ gap:14px; flex-wrap:wrap; justify-content:space-between; } .scr-acc-panel{ right:0; min-width:200px; } } @media(max-width:520px){ :root{ --nav-h:136px; --brand-h:98px; --gap-x:12px; } .scr-wordmark{ font-size:15px; } } @media (max-width: 768px){ body.is-project .scr-nav, body.is-about .scr-nav { background: rgba(0,0,0,.92) !important; backdrop-filter: blur(8px); } }