/** * @license * Copyright (c) 2026 Elson Lleshi * All Rights Reserved. Unauthorized use prohibited. * SPDX-License-Identifier: UNLICENSED */ @import url('./base.css'); @import url('./navigation.css'); @import url('./hero.css'); @import url('./buttons.css'); @import url('./footer.css'); @import url('./layout.css'); @import url('./sections.css'); @import url('./responsive.css'); @import url('../print.css'); /* Calculator: active-promo banner */ .calc-promo-banner { margin-top: 16px; background: linear-gradient(90deg, #f97316, #ea580c); color: #fff; padding: 10px 16px; border-radius: 8px; display: inline-flex; gap: 10px; align-items: center; font-size: 0.95rem; box-shadow: 0 2px 10px rgba(249, 115, 22, 0.25); } .calc-promo-banner i { color: #fff; } /* Calculator: builder UI */ .calc-builder { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 8px; } .calc-field label { display: block; font-weight: 600; color: #444; margin-bottom: 6px; font-size: 0.9rem; } .calc-field select { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 0.95rem; } .calc-result { text-align: center; padding: 20px 16px; background: #fafafa; border-radius: 10px; margin-bottom: 16px; } .calc-result-name { font-weight: 600; color: #555; margin-bottom: 8px; } .calc-result-price { font-size: 1.8rem; color: #222; } .calc-result-price .calc-base { color: #999; font-size: 1.1rem; margin-right: 8px; } .calc-result-price .calc-adj { color: #e67e22; } .calc-result-price .calc-contact { color: #f97316; font-size: 1.1rem; font-style: italic; } .calc-result-note { margin-top: 10px; font-size: 0.85rem; color: #888; } /* Single source of truth for the fixed navbar height. Hero and page-banner reference --navbar-height for their top padding so they always sit below the navbar regardless of the logo size at each breakpoint. Update both the variable and the matching responsive.css block together. */ :root { --navbar-height: 96px; } @media (max-width: 768px) { :root { --navbar-height: 80px; } } @media (max-width: 480px) { :root { --navbar-height: 68px; } } /* Site-wide campaign banner (above the header). Fixed at top; the navbar gets shifted down by --site-banner-height set on by JS. Pages with hero sections / dashboard layouts keep their own spacing relative to the navbar, so we only need to push the navbar itself, not every page's top padding. */ .site-campaign-banner { background: linear-gradient(90deg, #f97316, #ea580c); color: #fff; font-size: 0.9rem; z-index: 110; /* above the navbar (z-index 100) */ position: fixed; top: 0; left: 0; right: 0; } /* Push the navbar down by the banner height so they don't overlap. */ body.has-site-banner .navbar { top: var(--site-banner-height, 44px); } /* Push every page's content down by the same amount. Pages that already reserve space for the fixed navbar (.hero with padding-top:80px, .page-banner with padding:140px...) will now have their content start below both. */ body.has-site-banner { padding-top: var(--site-banner-height, 44px); } .site-banner-inner { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .site-banner-inner i { font-size: 1rem; flex-shrink: 0; } .site-banner-title { flex: 1; font-weight: 600; min-width: 0; color: #fff; text-decoration: none; } .site-banner-title:hover { text-decoration: underline; } .site-banner-cta { color: #fff; background: rgba(255, 255, 255, 0.18); padding: 4px 10px; border-radius: 4px; text-decoration: none; font-weight: 700; font-size: 0.85rem; white-space: nowrap; } .site-banner-cta:hover { background: rgba(255, 255, 255, 0.3); } .site-banner-close { border: none; background: transparent; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 0 4px; } .site-banner-close:hover { opacity: 0.7; } /* Mobile: force the banner onto a single tight row so it doesn't eat screen space. Long titles get ellipsised; CTA stays visible at a smaller size. */ @media (max-width: 600px) { .site-banner-inner { flex-wrap: nowrap; padding: 6px 10px; gap: 8px; } .site-banner-inner > i { font-size: 0.9rem; } .site-banner-title { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .site-banner-cta { font-size: 0.72rem; padding: 3px 8px; flex-shrink: 0; } .site-banner-close { font-size: 1.1rem; padding: 0 2px; flex-shrink: 0; } }