/* ════════════════════════════════════════════════════════════════════ shared.css — navbar and footer styles common to every page of the site. Page-specific colors come from CSS custom properties declared in a small :root block in each page's own (search for "--nav-" or "--footer-" in that page to find/change its colors). index.html (the language-selector splash) has no navbar/footer and does not use this file. ════════════════════════════════════════════════════════════════════ */ /* ── Navbar ── */ .navbar { background-color: var(--nav-bg); font-family: 'Ysabeau', sans-serif; font-size: 1rem; box-shadow: var(--nav-shadow); transition: background-color 0.3s ease; } .navbar-brand { font-size: 1rem; font-family: 'Ysabeau', sans-serif; } .navbar-toggler { border: none; padding: 0.25rem 0.4rem; } /* just the three bars, no surrounding box */ .navbar-toggler:focus { box-shadow: none; } .navbar .nav-link { color: rgba(255,255,255,0.85) !important; transition: color 0.2s; } .navbar .nav-link:hover, .navbar .nav-link.active { color: #fff !important; } .dropdown-menu { background-color: var(--nav-dropdown-bg); border: none; border-radius: 6px; box-shadow: var(--nav-dropdown-shadow); padding: 0.3rem 0; min-width: 160px; } .dropdown-item { font-family: 'Ysabeau', sans-serif; color: var(--nav-dropdown-item-color); font-size: 0.95em; padding: 0.45rem 1.1rem; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--nav-dropdown-hover-bg); color: var(--nav-dropdown-hover-color); } .dropdown-item.disabled { color: #aaa; pointer-events: none; } .dropdown-divider { border-color: rgba(255,255,255,0.15); margin: 0.2rem 0; } /* ── In-page language switcher — shows only the current language, boxed like a small button in line with the other nav items; the other two languages appear in a dropdown, tap-to-open everywhere (reuses the same Bootstrap dropdown as "Progetti") and hover-to-open on devices with a real pointer, with a lingering delay before it closes so the pointer can travel from the button down into the menu. ── */ .lang-switch { margin-left: 0.6rem; margin-right: 1rem; } /* .navbar .nav-link (in this same file) sets color with !important at higher specificity (two classes) — .navbar .nav-link.lang-current matches it so this override actually wins instead of being silently overridden. */ .navbar .nav-link.lang-current { font-family: 'Ysabeau', sans-serif !important; font-size: 0.68em; letter-spacing: 0.02em; text-transform: lowercase; color: rgba(255,255,255,0.4) !important; border: 1px solid rgba(255,255,255,0.2); border-radius: 3px; line-height: 1.3; padding: 0.15rem 0.45rem !important; } .lang-current::after { display: none; } /* hide Bootstrap's caret: text-only */ .navbar .nav-link.lang-current:hover, .navbar .lang-switch:hover .nav-link.lang-current, .navbar .nav-link.lang-current[aria-expanded="true"] { color: rgba(255,255,255,0.75) !important; border-color: rgba(255,255,255,0.45); } .lang-menu { min-width: 0; padding: 0.2rem 0; } .lang-menu .dropdown-item { font-size: 0.75em; text-transform: lowercase; padding: 0.3rem 0.8rem; } @media (hover: hover) { /* Bootstrap's .dropdown-menu defaults to display:none, which can't be delayed/transitioned — switch it to an opacity/visibility fade so the closing half of the transition can carry a delay. */ .lang-menu { display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0s linear 0.5s; } .lang-switch:hover .lang-menu { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } } /* ── Compact footer ── */ .site-footer { background-color: var(--footer-bg); padding: 0.8rem 2rem; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; max-width: 1140px; margin: 0 auto; font-family: 'Ysabeau', sans-serif; font-size: 0.8em; color: var(--footer-text); } .footer-copy { opacity: var(--footer-copy-opacity); } .footer-social a { color: var(--footer-social); margin-right: 0.55rem; font-size: 1.05em; transition: color 0.2s; } .footer-social a:hover { color: var(--footer-social-hover); } .footer-contact-link { color: var(--footer-contact); text-decoration: none; border-bottom: 1px dotted var(--footer-contact-border); } .footer-contact-link:hover { color: var(--footer-contact-hover); } @media (max-width: 576px) { .footer-inner { justify-content: center; text-align: center; } }