/* ======================================== FILE: header-footer.css DESCRIZIONE: Questo file gestisce lo stile dell'intestazione (header), dei pulsanti di controllo in alto (tema, filtri, ordinamento), delle icone di azione per la condivisione e del footer. Include anche le regole responsive specifiche per questi elementi. ======================================== */ /* --- BLOG HEADER --- */ /* L'intestazione fissa in alto che scompare allo scroll verso il basso */ .blog-header { display: flex; align-items: center; padding: 0 30px; position: fixed; top: 0; left: 0; right: 0; height: 65px; background: var(--bg-color); z-index: 100; transition: transform 0.2s ease-in-out; } /* Classe aggiunta dinamicamente dal JS per nascondere l'header */ .blog-header.header-hidden { transform: translateY(-100%); } .blog-title { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.3px; cursor: pointer; } /* --- CONTROL BUTTONS --- */ /* Il gruppo di bottoni in alto a destra nella visualizzazione feed */ .blog-controls { display: flex; gap: 15px; justify-content: flex-end; padding-top: 120px; padding-right: 40px; padding-bottom: 15px; } /* Stile base per "Theme", "Filter" e "Sort" */ .control-btn { display: flex; align-items: center; gap: 0.5rem; background: transparent; border: none; color: var(--text-primary); padding: 0; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: color 0.2s ease; } .control-btn:hover { color: var(--text-light); } .control-btn svg { width: 18px; height: 18px; } /* --- TOP BAR ACTIONS & ICONS --- */ /* Stili per i bottoni rotondi con icone, usati nella vista del singolo articolo */ .top-bar-actions { display: flex; align-items: center; gap: 5px; } /* Contenitore circolare del bottone */ .icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; color: var(--text-primary); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; margin: 0; padding: 0; } .icon-btn:hover { background-color: var(--hover-bg); color: var(--text-primary); } .icon-btn svg { width: 20px; height: 20px; transition: transform 0.2s ease; stroke-width: 2.2; } .icon-btn .icon-sun { width: 20.5px; height: 20.5px; } .icon-btn .icon-moon { width: 19px; height: 19px; } /* Effetto di compressione al click sulle icone */ .icon-btn:active svg { transform: scale(0.9); } /* --- LOGICA BOTTONE CONDIVISIONE --- */ /* Cambia l'icona e il colore quando il link viene copiato con successo */ .copy-url-wrapper { position: relative; display: flex; align-items: center; } .copy-url-btn.success { color: #10b981; } /* Nasconde la spunta di default, la mostra quando c'è la classe .success */ .copy-url-btn .icon-check { display: none; } .copy-url-btn.success .icon-share { display: none; } .copy-url-btn.success .icon-check { display: block; } /* --- LOGICA BOTTONE TEMA (ARTICOLO) --- */ /* Alterna sole e luna in base al tema globale attivo sul tag */ .theme-toggle-btn .icon-sun { display: none; } .theme-toggle-btn .icon-moon { display: block; } [data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; } [data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; } /* --- FOOTER --- */ footer { text-align: center; padding: 1rem 0; margin-top: 2rem; color: var(--text-lighter); font-size: 0.9rem; border-top: 1px solid var(--border-lighter); } /* ======================================== RESPONSIVE (MOBILE) Adattamenti per schermi più piccoli (sotto i 768px) ======================================== */ @media (max-width: 768px) { /* Header più compatto */ .blog-header { padding: 0 20px; height: 55px; } .blog-title { font-size: 1.3rem; } /* Sposta i controlli per evitare sovrapposizioni e riduce le spaziature */ .blog-controls { padding-top: 100px; padding-right: 30px; gap: 1rem; } .control-btn { font-size: 0.85rem; } .control-btn svg { width: 16px; height: 16px; } /* Rimpicciolisce i bottoni rotondi delle icone */ .top-bar-actions { gap: 5px; } .icon-btn { width: 36px; height: 36px; } .icon-btn svg { width: 18px; } .icon-btn .icon-sun { width: 22px; height: 22px; } footer { font-size: 0.75rem; } }