/* ───────────────────────────────────────────────────────────── otto-topbar.css — bara de sus canonică OTTO (topbar telefoane + nav + meniul mobil), o SINGURĂ sursă de adevăr. Copiată 1:1 din fronturi-nettfront.html (referința aleasă de Yosua), cu tokenii transformați în valori LITERALE ca să arate identic pe orice pagină, indiferent ce variabile CSS își definește pagina. Legată ULTIMA în pe toate paginile (via _unify-topbar.mjs) → câștigă la egalitate de specificitate. Structura (topbar fix 38px + nav fix la 38px + body.has-topbar cu padding-top 38px) există DEJA identic pe toate grupurile de pagini, deci fișierul normalizează doar aspectul, fără să miște layout-ul. ───────────────────────────────────────────────────────────── */ body.has-topbar { padding-top: 38px; } /* ── Bara cu telefoane ── */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 99; background: #2A2520; color: rgba(255,255,255,0.85); height: 38px; padding: 0 clamp(1rem, 4vw, 4rem); display: flex; align-items: center; justify-content: center; gap: 1.5rem; font-size: 13px; letter-spacing: 0.05em; white-space: nowrap; } .topbar-phone { color: rgba(255,255,255,0.85); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.25s; } .topbar-phone:hover { color: #FFA033; } .topbar-phone:focus-visible { outline: 2px solid #FFA033; outline-offset: 3px; border-radius: 6px; } .topbar-phone-label { color: #FF8800; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; } /* ── Nav ── */ nav.site-nav { position: fixed; top: 38px; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem clamp(1rem, 4vw, 4rem); background: rgba(245,242,236,0.95); backdrop-filter: blur(14px); border-bottom: 1px solid #EFE3D2; transition: padding 0.35s cubic-bezier(.2,.85,.3,1), background 0.4s cubic-bezier(.2,.85,.3,1), box-shadow 0.35s; } nav.site-nav.scrolled { padding: 0.55rem clamp(1rem, 4vw, 4rem); background: #FFFFFF; box-shadow: 0 10px 30px -14px rgba(120,90,40,.30); } .nav-logo { text-decoration: none; display: flex; align-items: center; } .nav-logo-img { height: 62px; width: auto; transition: height 0.35s; } nav.site-nav.scrolled .nav-logo-img { height: 50px; } .nav-links { display: flex; gap: 1.7rem; list-style: none; align-items: center; margin: 0; padding: 0; } .nav-links a { font-size: 0.92rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: #5A524A; text-decoration: none; transition: color 0.3s; position: relative; padding: 0.3rem 0; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #FF8800; border-radius: 8px; transition: width 0.4s cubic-bezier(.2,.85,.3,1); } .nav-links a:hover, .nav-links a.active { color: #E67500; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a:focus-visible { outline: 2px solid #FF8800; outline-offset: 4px; border-radius: 8px; } .nav-cta { font-size: 0.88rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: #fff; background: #FF8800; padding: 0.7rem 1.5rem; text-decoration: none; transition: background 0.3s, transform 0.2s cubic-bezier(.2,.85,.3,1), box-shadow 0.3s; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(255,136,0,.55); } .nav-cta:hover { background: #E67500; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(230,117,0,.75); } .nav-cta:active { transform: translateY(0) scale(0.98); } .nav-cta:focus-visible { outline: 2px solid #E67500; outline-offset: 3px; } .menu-toggle { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: none; background: none; cursor: pointer; border-radius: 14px; transition: background 0.25s; } .menu-toggle:hover { background: #FFEAD2; } .menu-toggle span { display: block; width: 24px; height: 2px; background: #FF8800; border-radius: 8px; transition: transform 0.35s cubic-bezier(.2,.85,.3,1), opacity 0.25s; } .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Meniul mobil ── */ .mobile-menu { position: fixed; inset: 0; background: rgba(252,246,236,0.98); backdrop-filter: blur(20px); z-index: 100; padding: 6rem 2rem 2rem; display: none; flex-direction: column; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 0.35s; } .mobile-menu.active { opacity: 1; pointer-events: auto; } .mobile-menu a { display: block; padding: 1.2rem 0; border-bottom: 1px solid #EFE3D2; font-size: 1.5rem; font-family: 'Cormorant Garamond', Georgia, serif; color: #2A2520; text-decoration: none; transition: color 0.25s, padding-left 0.25s cubic-bezier(.2,.85,.3,1); } .mobile-menu a:hover, .mobile-menu a.active { color: #FF8800; padding-left: 0.5rem; } .mobile-menu-close { position: absolute; top: 1.2rem; right: 1.2rem; width: 44px; height: 44px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #2A2520; border-radius: 14px; transition: color 0.25s, background 0.25s; } .mobile-menu-close:hover { color: #FF8800; background: #FFEAD2; } .mobile-menu-close svg { width: 24px; height: 24px; } .mobile-menu-cta { margin-top: 2rem; text-align: center; padding: 1rem 2rem !important; background: #FF8800; color: #fff !important; border-bottom: none !important; font-size: 0.95rem !important; font-family: 'DM Sans', system-ui, sans-serif !important; font-weight: 600; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(255,136,0,.55); } .mobile-menu-contact { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #EFE3D2; } .mobile-menu-contact-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0; font-size: 15px; color: #5A524A; text-decoration: none; } .mobile-menu-contact-item:hover { color: #FF8800; } .mobile-menu-contact-item svg { width: 16px; height: 16px; stroke: #FF8800; fill: none; flex-shrink: 0; } @media (max-width: 900px) { .nav-links, .nav-cta { display: none; } .menu-toggle { display: flex; } .mobile-menu { display: flex; } nav.site-nav { padding: 0.6rem 1.2rem; } .nav-logo-img { height: 46px; } } /* Specificitate ridicată intenționat: unele pagini (ex. parteneri/*) au un