/* ============================================================= Modernize — progressive enhancements layered over existing styles ============================================================= */ /* ---- Smooth scroll ---- */ html { scroll-behavior: smooth; } /* ---- Reading progress bar ---- */ #reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: #E92327; z-index: 9999; transition: width 0.1s linear; pointer-events: none; border-radius: 0 2px 2px 0; } /* ---- Focus-visible accessibility ring ---- */ *:focus-visible { outline: 2px solid #E92327; outline-offset: 3px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } /* ---- Header nav item hover underline animation ---- */ .header-items li a { position: relative; text-decoration: none !important; } .header-items li a::after { content: ''; position: absolute; bottom: -2px; left: 50%; right: 50%; height: 2px; background: #E92327; transition: left 0.25s ease, right 0.25s ease; } .header-items li a:hover::after, .header-items li.active a::after { left: 0; right: 0; } /* ---- Newsletter input: floating label feel ---- */ #newsletterForm .form-control { border-radius: 4px 0 0 4px; border: 1px solid #DEDEDE; transition: border-color 0.2s ease, box-shadow 0.2s ease; padding: 10px 14px; font-size: 14px; } #newsletterForm .form-control:focus { border-color: #E92327; box-shadow: 0 0 0 3px rgba(233, 35, 39, 0.12); outline: none; } #newsletterForm .btn-inverse { border-radius: 0 4px 4px 0; padding: 10px 18px; } /* ---- Search input modernization ---- */ .header .form-control { transition: border-color 0.2s ease, box-shadow 0.2s ease; } .header .form-control:focus { border-color: #E92327; box-shadow: 0 0 0 3px rgba(233, 35, 39, 0.12); outline: none; } /* ---- Social icon hover ---- */ .social-icons a { transition: transform 0.2s ease, opacity 0.2s ease; display: inline-block; } .social-icons a:hover { transform: scale(1.15); opacity: 0.8; } /* ---- Category tag pill hover ---- */ .text-tag { transition: background 0.2s ease, color 0.2s ease; } .text-tag:hover { background: #E92327 !important; color: #fff !important; } /* ---- Lazy-loaded image fade-in ---- */ img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; } img[loading="lazy"].loaded, img[loading="lazy"].lazyloaded { opacity: 1; } /* ---- Infinite scroll loader smoothing ---- */ .infinite-scroll-status .scroller-status { text-align: center; padding: 1.5rem 0; color: #909090; } /* Dark mode — opt-in only, not automatic. To enable later: add class="dark" to and swap @media (prefers-color-scheme: dark) for html.dark */