/* ========================= Premium Green Theme Override — Part 1 (Refined + Mobile-Safe) ========================= */ :root{ --primary: #16a34a; --primary-hover: #15803d; --primary-soft: rgba(22,163,74,.18); --primary-rgb: 22,163,74; --link: #22c55e; --link-hover: #15803d; --ink: #0b1220; --white: #ffffff; /* UX */ --ring: rgba(var(--primary-rgb), .22); --ring-strong: rgba(var(--primary-rgb), .35); --nav-h: 90px; /* used for hero min-height */ } /* Links (premium but not annoying) */ a{ color: var(--link); text-decoration: none; text-decoration-thickness: 2px; text-underline-offset: .18em; } a:hover{ color: var(--link-hover); } a:focus-visible{ outline: none; box-shadow: 0 0 0 .22rem var(--ring); border-radius: 8px; } /* Utilities */ .text-primary{ color: var(--primary) !important; } .bg-primary{ background-color: var(--primary) !important; } .border-primary{ border-color: var(--primary) !important; } /* Buttons */ .btn-primary{ background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease !important; } .btn-primary:hover{ background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(var(--primary-rgb), .22); } .btn-primary:focus-visible{ box-shadow: 0 0 0 .22rem var(--ring-strong) !important; } .btn-outline-primary{ color: var(--primary) !important; border-color: rgba(var(--primary-rgb), .70) !important; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease !important; } .btn-outline-primary:hover{ background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(var(--primary-rgb), .18); } .btn-outline-primary:focus-visible{ box-shadow: 0 0 0 .22rem var(--ring-strong) !important; } /* Forms focus */ .form-control:focus{ border-color: rgba(var(--primary-rgb), .60) !important; box-shadow: 0 0 0 .22rem var(--ring) !important; } /* ========================= Premium Play Button (ONE version — no conflicts) ========================= */ button.btn-play{ --play-size: 74px; position: relative !important; width: var(--play-size) !important; height: var(--play-size) !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: var(--primary) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; outline: none !important; box-shadow: 0 14px 32px rgba(var(--primary-rgb), .28) !important; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important; } /* subtle halo + ring (static, premium) */ button.btn-play::before, button.btn-play::after{ content: none !important; display: none !important; animation: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* triangle centered */ button.btn-play > span{ display: block !important; width: 0 !important; height: 0 !important; transform: translateX(2px) !important; border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-left: 14px solid #fff !important; } button.btn-play:hover{ background: var(--primary-hover) !important; transform: translateY(-1px) !important; box-shadow: 0 18px 42px rgba(var(--primary-rgb), .38) !important; } button.btn-play:focus-visible{ box-shadow: 0 18px 42px rgba(var(--primary-rgb), .38), 0 0 0 4px var(--ring) !important; } @media (max-width: 480px){ button.btn-play{ --play-size: 64px; } } /* ========================= NAVBAR — Premium (underline only on hover/focus) — REFINED - Cleaner spacing - Underline only on hover/focus (desktop) - Active = green text only (no underline) - No underline on pill/CTA links (Contact / Get A Quote / Theme Toggle) ========================= */ /* Kill template background states */ .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{ background: transparent !important; } /* Base link */ .navbar-light .navbar-nav .nav-link{ position: relative; font-weight: 800; color: var(--text, #0f172a) !important; padding: 22px 14px !important; line-height: 1.15; transition: color .18s ease, text-shadow .18s ease, transform .18s ease; -webkit-tap-highlight-color: transparent; } /* Slight premium hover lift (desktop feel) */ @media (min-width: 992px){ .navbar-light .navbar-nav .nav-link:hover{ transform: translateY(-1px); } } /* Desktop underline (ONLY hover/focus-visible) */ @media (min-width: 992px){ /* underline pseudo */ .navbar-light .navbar-nav .nav-link::after{ content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, rgba(var(--primary-rgb), .95), rgba(var(--primary-rgb), .65) ); transform: scaleX(.35); transform-origin: left; opacity: 0; transition: transform .22s ease, opacity .22s ease; } /* Hover/focus: green + underline appears */ .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus-visible{ color: var(--primary) !important; text-shadow: 0 0 18px rgba(var(--primary-rgb), .22); } .navbar-light .navbar-nav .nav-link:hover::after, .navbar-light .navbar-nav .nav-link:focus-visible::after{ transform: scaleX(1); opacity: 1; } /* Active page: green text only (NO underline) */ .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show{ color: var(--primary) !important; text-shadow: 0 0 18px rgba(var(--primary-rgb), .14); } .navbar-light .navbar-nav .nav-link.active::after, .navbar-light .navbar-nav .nav-link.show::after{ opacity: 0; transform: scaleX(.35); } /* IMPORTANT: never underline pills/CTAs */ .navbar-light .navbar-nav .nav-link.nav-contact::after, .navbar .d-flex.align-items-center.gap-2 > a.btn::after, #themeToggle.theme-toggle::after{ content: none !important; display: none !important; } } /* Mobile spacing: clean, no underline system */ @media (max-width: 991.98px){ .navbar-light .navbar-nav .nav-link{ padding: 10px 14px !important; transform: none !important; } .navbar-light .navbar-nav .nav-link::after{ content: none !important; display: none !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .navbar-light .navbar-nav .nav-link{ transition: none !important; } .navbar-light .navbar-nav .nav-link::after{ transition: none !important; } } /* ========================= Navbar Dropdown — REFINED (Single Source of Truth) - Premium glass on desktop - Safe static dropdown on mobile ========================= */ .navbar .dropdown-menu{ border: 1px solid rgba(var(--primary-rgb), .18); border-radius: 14px; padding: 10px; margin-top: 12px; background: rgba(255,255,255,.96); background-clip: padding-box; box-shadow: 0 18px 45px rgba(2, 6, 23, .14); z-index: 1100; } /* glass feel (supported browsers only) */ @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){ .navbar .dropdown-menu{ background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .navbar .dropdown-item{ border-radius: 10px; padding: 10px 14px; font-weight: 700; color: #0f172a; white-space: normal; /* ✅ fixes mobile wrapping */ line-height: 1.25; transition: background-color .16s ease, color .16s ease, transform .16s ease; } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus{ background: rgba(var(--primary-rgb), .10); color: #064e2b; transform: translateX(1px); } .navbar .dropdown-item.active, .navbar .dropdown-item:active{ background: rgba(var(--primary-rgb), .14) !important; color: #064e2b !important; font-weight: 800; } .navbar .dropdown-item:focus-visible{ outline: none; box-shadow: 0 0 0 .22rem rgba(var(--primary-rgb), .18); } .navbar .dropdown-divider{ border-top: 1px solid rgba(var(--primary-rgb), .16); margin: 8px 6px; } /* Desktop: allow hover-open only for real mouse/trackpad */ @media (min-width: 992px) and (hover: hover) and (pointer: fine){ .navbar .dropdown:hover > .dropdown-menu{ display: block; } .navbar .dropdown-menu{ margin-top: 10px; } } /* Mobile: dropdown must not float off-screen */ @media (max-width: 991.98px){ .navbar .dropdown-menu{ position: static !important; float: none !important; width: 100% !important; margin-top: 8px; box-shadow: none; background: rgba(255,255,255,.92); } .navbar .dropdown-item{ padding: 10px 12px; transform: none; } } /* ========================= Inner Pages Header (Jumbotron overlay) ========================= */ .jumbotron.jumbotron-fluid{ background: url("../img/header.jpg") center / cover no-repeat !important; position: relative; overflow: hidden; } .jumbotron.jumbotron-fluid::before{ content:""; position:absolute; inset:0; z-index: 0; background: radial-gradient(900px 520px at 12% 30%, rgba(var(--primary-rgb), .22), transparent 60%), linear-gradient(110deg, rgba(8,12,20,.88) 0%, rgba(8,12,20,.58) 45%, rgba(8,12,20,.35) 100%); } .jumbotron.jumbotron-fluid > .container{ position: relative; z-index: 1; } /* Optional: improve readability */ .jumbotron.jumbotron-fluid .display-3, .jumbotron.jumbotron-fluid .text-white{ text-shadow: 0 10px 30px rgba(0,0,0,.35); } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .navbar .dropdown-item{ transition: none !important; } } /* ================================================== THEME ENGINE (Light/Dark) — PREMIUM v2 (Clean + Complete) JS sets: ================================================== */ /* ---------- LIGHT TOKENS (default) ---------- */ :root{ /* surfaces */ --page-bg: #ffffff; --surface: #ffffff; --surface-2: #f6f8fb; /* text */ --text: #0b1220; --text-muted: rgba(11,18,32,.72); --heading: #0b1220; /* links */ --link-color: var(--link); --link-hover: var(--link-hover); /* borders/shadows */ --border: rgba(15,23,42,.12); --shadow: 0 18px 50px rgba(2,6,23,.10); /* topbar */ --topbar-bg: #0b1220; --topbar-text: rgba(255,255,255,.92); /* focus */ --focus-ring: rgba(var(--primary-rgb), .22); } /* ---------- DARK TOKENS ---------- */ html[data-theme="dark"]{ color-scheme: dark; --page-bg: #070b12; --surface: rgba(15,23,42,.92); --surface-2: rgba(255,255,255,.06); --text: rgba(255,255,255,.92); --text-muted: rgba(255,255,255,.70); --heading: #f8fafc; --link-color: rgba(134,239,172,.92); --link-hover: rgba(34,197,94,.98); --border: rgba(148,163,184,.16); --shadow: 0 26px 80px rgba(0,0,0,.55); --topbar-bg: #070b12; --topbar-text: rgba(255,255,255,.90); --focus-ring: rgba(var(--primary-rgb), .28); /* optional: darker dropdown surface for better contrast */ --dropdown-bg: rgba(15,23,42,.96); } /* ---------- GLOBAL BASE ---------- */ body{ background: var(--page-bg) !important; color: var(--text) !important; } /* headings: only in dark mode; don't override explicit text utilities */ html[data-theme="dark"] h1:not(.text-white):not(.text-primary):not(.text-dark), html[data-theme="dark"] h2:not(.text-white):not(.text-primary):not(.text-dark), html[data-theme="dark"] h3:not(.text-white):not(.text-primary):not(.text-dark), html[data-theme="dark"] h4:not(.text-white):not(.text-primary):not(.text-dark), html[data-theme="dark"] h5:not(.text-white):not(.text-primary):not(.text-dark), html[data-theme="dark"] h6:not(.text-white):not(.text-primary):not(.text-dark){ color: var(--heading) !important; } /* links */ a{ color: var(--link-color); } a:hover{ color: var(--link-hover); } /* focus */ :focus-visible{ outline: none; box-shadow: 0 0 0 .22rem var(--focus-ring); border-radius: 10px; } /* ---------- TOPBAR ---------- */ .container-fluid.bg-dark{ background: var(--topbar-bg) !important; } .container-fluid.bg-dark, .container-fluid.bg-dark .text-white, .container-fluid.bg-dark small{ color: var(--topbar-text) !important; } /* ---------- NAVBAR ---------- */ .navbar{ background: var(--surface) !important; } html[data-theme="dark"] .navbar{ border-bottom: 1px solid var(--border); } .navbar-light .navbar-nav .nav-link{ color: var(--text) !important; } html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, html[data-theme="dark"] .navbar-light .navbar-nav .nav-link.active{ color: var(--primary) !important; } /* ✅ dropdown readability in dark mode (fix “Services” items not showing) */ html[data-theme="dark"] .navbar .dropdown-menu{ background: var(--dropdown-bg) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; } html[data-theme="dark"] .navbar .dropdown-item{ color: rgba(255,255,255,.90) !important; } html[data-theme="dark"] .navbar .dropdown-item:hover, html[data-theme="dark"] .navbar .dropdown-item:focus{ background: rgba(var(--primary-rgb), .14) !important; color: #fff !important; } html[data-theme="dark"] .navbar .dropdown-divider{ border-top-color: rgba(148,163,184,.16) !important; } /* ---------- BOOTSTRAP UTILITY FIXES ---------- */ html[data-theme="dark"] .bg-light{ background-color: var(--surface-2) !important; } html[data-theme="dark"] .bg-white{ background-color: var(--surface) !important; } /* ✅ template uses bg-secondary sections (Why Choose Us + testimonial). Make premium dark surface */ html[data-theme="dark"] .bg-secondary{ background: radial-gradient(900px 520px at 15% 15%, rgba(var(--primary-rgb), .10), transparent 55%), linear-gradient(180deg, rgba(15,23,42,.92), rgba(7,11,18,.92)) !important; color: var(--text) !important; border-color: var(--border) !important; } /* text utilities */ html[data-theme="dark"] .text-dark{ color: var(--text) !important; } html[data-theme="dark"] .text-muted{ color: var(--text-muted) !important; } /* borders */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-left, html[data-theme="dark"] .border-right{ border-color: var(--border) !important; } /* ---------- CARDS / PANELS / DROPDOWNS ---------- */ html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content{ background-color: rgba(255,255,255,.06) !important; /* slightly more premium than solid */ color: var(--text) !important; border-color: var(--border) !important; box-shadow: var(--shadow); } /* ---------- FORMS ---------- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select, html[data-theme="dark"] .input-group-text{ background-color: rgba(255,255,255,.06) !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-theme="dark"] .form-control::placeholder{ color: rgba(255,255,255,.55) !important; } /* ---------- TABLES ---------- */ html[data-theme="dark"] .table{ color: var(--text) !important; } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th{ border-color: var(--border) !important; } /* ========================================= ABOUT (Premium) — refined, token-based, no global overrides Uses: --primary, --primary-hover, --primary-rgb --text, --text-muted, --heading --surface, --border, --shadow ========================================= */ .about-premium{ position: relative; } /* ---------- Media card ---------- */ .about-premium__media{ position: relative; border-radius: 18px; overflow: hidden; isolation: isolate; /* keeps overlay effects contained */ transform: translateZ(0); /* prevents jaggy edges on some GPUs */ box-shadow: var(--shadow, 0 22px 60px rgba(2,6,23,.14)); } /* Gloss + soft green bloom (purely decorative) */ .about-premium__media::after{ content:""; position:absolute; inset:0; z-index: 1; pointer-events:none; background: radial-gradient(800px 420px at 18% 10%, rgba(var(--primary-rgb), .14), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.10), transparent 44%); } /* Image */ .about-premium__img{ display: block; width: 100%; height: auto; transform: scale(1.01); } /* ---------- Badge ---------- */ .about-premium__badge{ position:absolute; left: 18px; bottom: 18px; z-index: 2; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.82); border: 1px solid rgba(var(--primary-rgb), .20); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 46px rgba(2,6,23,.18); } .about-premium__badgeTop{ font-weight: 900; font-size: 1.15rem; line-height: 1.1; color: var(--text, #0b1220); } .about-premium__badgeBottom{ margin-top: 2px; font-weight: 800; color: var(--text-muted, rgba(11,18,32,.72)); font-size: .95rem; } /* ---------- Kicker + title ---------- */ .about-premium__kicker{ letter-spacing: .18em; text-transform: uppercase; } .about-premium__title{ letter-spacing: -0.02em; color: var(--heading, var(--text, #0b1220)); } /* ---------- Preview text clamp (demo only) ---------- */ .about-preview__text{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; /* prevents long words from breaking layout */ } /* ---------- CTAs ---------- */ .about-premium__cta, .about-premium__cta2{ border-radius: 999px !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; will-change: transform; } .about-premium__cta:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(var(--primary-rgb), .22); } .about-premium__cta2:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(var(--primary-rgb), .16); } /* Keyboard accessibility */ .about-premium__cta:focus-visible, .about-premium__cta2:focus-visible{ outline: none; box-shadow: 0 18px 40px rgba(var(--primary-rgb), .18), 0 0 0 .22rem rgba(var(--primary-rgb), .22); } /* ---------- Dark mode (only scopes to About) ---------- */ html[data-theme="dark"] .about-premium__badge{ background: rgba(15,23,42,.70); border-color: rgba(148,163,184,.18); } html[data-theme="dark"] .about-premium__badgeTop{ color: rgba(255,255,255,.92); } html[data-theme="dark"] .about-premium__badgeBottom{ color: rgba(255,255,255,.70); } /* ---------- Mobile polish ---------- */ @media (max-width: 991.98px){ .about-premium__media{ border-radius: 16px; } .about-premium__badge{ left: 14px; bottom: 14px; } .about-preview__text{ -webkit-line-clamp: 5; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .about-premium__cta, .about-premium__cta2{ transition: none !important; } } /* ========================================= SERVICES — Ultra Premium Cards (BEST LOOK) Use: .services-premium on the section wrapper ========================================= */ .services-premium .team{ position: relative; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 18px 55px rgba(2,6,23,.10); transition: transform .18s ease, box-shadow .18s ease; } /* IMAGE: premium full-bleed (no letterboxing) */ .services-premium .team .card-img-top{ width: 100%; height: 220px; /* consistent & premium */ object-fit: cover; /* ✅ fills card */ object-position: center top; /* ✅ smarter crop */ display: block; transform: translateZ(0); } /* Premium overlay for depth + consistency */ .services-premium .team::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(900px 360px at 20% 5%, rgba(var(--primary-rgb), .14), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.22) 100%); opacity: .85; z-index: 1; } /* Text area: glass + clean */ .services-premium .team .team-text{ position: relative; z-index: 2; padding: 14px 14px; min-height: 98px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(15,23,42,.08); border-bottom: 4px solid var(--primary); } /* Titles: consistent, premium, no overflow */ .services-premium .team .team-text h5{ font-size: 1.06rem; line-height: 1.22; margin: 0 0 4px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .services-premium .team .team-text span{ font-weight: 600; color: rgba(11,18,32,.70); } /* Desktop hover: lift + tiny zoom */ @media (hover: hover) and (pointer: fine){ .services-premium .team:hover{ transform: translateY(-6px); box-shadow: 0 28px 80px rgba(2,6,23,.16); } .services-premium .team .card-img-top{ transition: transform .35s ease; } .services-premium .team:hover .card-img-top{ transform: scale(1.04); } } /* Dark mode */ html[data-theme="dark"] .services-premium .team{ background: var(--surface); box-shadow: var(--shadow); } html[data-theme="dark"] .services-premium .team .team-text{ background: rgba(15,23,42,.72); border-top-color: rgba(148,163,184,.16); } html[data-theme="dark"] .services-premium .team .team-text h5, html[data-theme="dark"] .services-premium .team .team-text span{ color: var(--text) !important; } /* Mobile: slightly taller images (looks richer on phones) */ @media (max-width: 991.98px){ .services-premium .team .card-img-top{ height: 210px; } } @media (max-width: 575.98px){ .services-premium .team{ border-radius: 18px; } .services-premium .team .card-img-top{ height: 200px; } } /* ========================= BLOG (Premium grid + responsive) ========================= */ .blog-premium .blog-card{ border-radius: 18px; overflow: hidden; background: transparent; box-shadow: 0 18px 55px rgba(2,6,23,.10); transition: transform .18s ease, box-shadow .18s ease; } .blog-premium .blog-card:hover{ transform: translateY(-3px); box-shadow: 0 26px 80px rgba(2,6,23,.14); } .blog-premium .blog-media{ position: relative; overflow: hidden; background: #0b1220; } .blog-premium .blog-img{ width: 100%; height: 230px; /* desktop height */ object-fit: cover; /* best-looking crop */ display: block; transform: scale(1.02); transition: transform .35s ease; } .blog-premium .blog-card:hover .blog-img{ transform: scale(1.06); } .blog-premium .blog-date{ position: absolute; right: 18px; bottom: -22px; width: 62px; height: 62px; border-radius: 999px; background: var(--primary); color: #fff; display: grid; place-items: center; box-shadow: 0 16px 40px rgba(var(--primary-rgb), .25); } .blog-premium .blog-date .day{ font-weight: 900; line-height: 1; font-size: 18px; } .blog-premium .blog-date .mon{ font-weight: 800; letter-spacing: .08em; font-size: 11px; margin-top: -2px; } .blog-premium .blog-body{ padding: 38px 22px 22px; /* extra top padding because date overlaps */ height: calc(100% - 0px); } .blog-premium .blog-avatar{ width: 40px; height: 40px; } .blog-premium .blog-excerpt{ display: -webkit-box; -webkit-line-clamp: 3; /* clean, consistent cards */ -webkit-box-orient: vertical; overflow: hidden; } .blog-premium .blog-readmore{ font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid rgba(var(--primary-rgb), .55); padding-bottom: 2px; } .blog-premium .blog-more-btn{ border-radius: 999px; padding: 12px 22px; box-shadow: 0 16px 44px rgba(var(--primary-rgb), .18); } /* Mobile tuning */ @media (max-width: 991.98px){ .blog-premium .blog-img{ height: 220px; } } @media (max-width: 575.98px){ .blog-premium .blog-img{ height: 200px; } .blog-premium .blog-body{ padding: 36px 18px 18px; } } /* ================================================== TYPOGRAPHY SYSTEM — Maersk-like (Premium + Mobile) Paste near END of theme-overrides.css ================================================== */ :root{ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; /* type rhythm */ --lh-body: 1.65; --lh-head: 1.12; /* Maersk-ish: slightly tight headings */ --track-head: -0.03em; --track-kicker: 0.14em; } /* Base text */ html, body{ font-family: var(--font-sans) !important; font-size: 16px; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headings */ h1,h2,h3,h4,h5,h6{ font-family: var(--font-sans) !important; line-height: var(--lh-head); letter-spacing: var(--track-head); } /* Responsive scale (mobile-first) */ h1{ font-size: clamp(1.9rem, 3.6vw, 3.05rem); font-weight: 800; } h2{ font-size: clamp(1.55rem, 2.8vw, 2.35rem); font-weight: 800; } h3{ font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 800; } h4{ font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 700; } /* Section “kicker” labels like SERVICES / OUR BLOG */ .text-uppercase.text-primary, .section-title h6, h6.text-primary.text-uppercase{ letter-spacing: var(--track-kicker) !important; font-weight: 800 !important; } /* Paragraph polish */ p, .text-muted, small, .lead{ font-weight: 500; } /* Keep long lines readable (desktop), but fluid on mobile */ .container p{ max-width: 70ch; } /* Nav + buttons feel more “enterprise” */ .navbar .navbar-nav .nav-link{ font-weight: 700 !important; letter-spacing: -0.01em; } /* FIX: don’t override icon fonts (Font Awesome) */ .btn{ font-family: var(--font-sans) !important; } /* keep Font Awesome icons using their own fonts */ i.fa, i.fas, i.far, i.fal, i.fad, i.fab, .fa, .fas, .far, .fal, .fad, .fab{ font-family: inherit; /* reset any forced Inter */ } /* If Font Awesome 5 is used (most templates): */ .fas, .fa, .far, .fal, .fad{ font-family: "Font Awesome 5 Free" !important; } .fab{ font-family: "Font Awesome 5 Brands" !important; } /* Mobile readability improvements */ @media (max-width: 575.98px){ body{ font-size: 15.5px; } p{ line-height: 1.7; } .container p{ max-width: 100%; } } /* ========================================= NAVBAR — "Get A Quote" ultra-premium pill (desktop) — FINAL Targets: Get A Quote Paste at END of theme-overrides.css ========================================= */ @media (min-width: 992px){ /* Make parent behave nicely in navbar row */ .navbar .d-flex.align-items-center.gap-2{ align-items: center !important; } .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block{ /* pill geometry */ height: 44px !important; padding: 0 18px !important; border-radius: 999px !important; /* align */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* typography */ font-weight: 900 !important; letter-spacing: .15px !important; line-height: 1 !important; color: #fff !important; white-space: nowrap !important; /* remove template button heaviness */ border: 1px solid transparent !important; text-decoration: none !important; /* premium layered paint: - subtle highlight top-left - rich green gradient body - elegant border gradient */ background: radial-gradient(120% 180% at 18% 18%, rgba(255,255,255,.28), transparent 58% ) padding-box, linear-gradient(180deg, rgba(var(--primary-rgb, 22,163,74), 1) 0%, rgba(var(--primary-rgb, 22,163,74), .86) 55%, rgba(11,18,32,.12) 130% ) padding-box, linear-gradient(135deg, rgba(255,255,255,.45), rgba(var(--primary-rgb, 22,163,74), 1), rgba(255,255,255,.18) ) border-box !important; /* depth */ box-shadow: 0 18px 50px rgba(2, 6, 23, .16), 0 12px 28px rgba(var(--primary-rgb, 22,163,74), .22), inset 0 1px 0 rgba(255,255,255,.22) !important; /* interactions */ position: relative !important; overflow: hidden !important; transform: translateZ(0) !important; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; } /* Kill any underline system pseudo-elements from nav styles (if any) */ .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block::after{ content: none !important; display: none !important; } /* Shine sweep */ .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block::before{ content: "" !important; position: absolute !important; top: -80% !important; left: -55% !important; width: 70% !important; height: 260% !important; border-radius: inherit !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.72), transparent ) !important; transform: rotate(25deg) translateX(-140%) !important; opacity: 0 !important; pointer-events: none !important; } /* Extra “inner glow” for premium feel */ .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block > *{ position: relative; z-index: 1; } .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block:hover{ transform: translateY(-1px) !important; filter: saturate(1.08) brightness(1.02) !important; box-shadow: 0 24px 70px rgba(2, 6, 23, .20), 0 20px 54px rgba(var(--primary-rgb, 22,163,74), .28), inset 0 1px 0 rgba(255,255,255,.24) !important; } .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block:hover::before{ opacity: .65 !important; animation: navQuoteShine .85s ease forwards !important; } .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block:active{ transform: translateY(0px) scale(.99) !important; } .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block:focus-visible{ outline: none !important; box-shadow: 0 24px 70px rgba(2, 6, 23, .20), 0 0 0 4px rgba(var(--primary-rgb, 22,163,74), .22), 0 0 0 10px rgba(var(--primary-rgb, 22,163,74), .12), inset 0 1px 0 rgba(255,255,255,.24) !important; } @keyframes navQuoteShine{ to{ transform: rotate(25deg) translateX(185%) !important; } } } /* ========================= Premium Play Button (ONE version — no conflicts) ========================= */ button.btn-play{ --play-size: 74px; position: relative !important; width: var(--play-size) !important; height: var(--play-size) !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: var(--primary) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; outline: none !important; box-shadow: 0 14px 32px rgba(var(--primary-rgb), .28) !important; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important; } /* subtle halo + ring (static, premium) */ button.btn-play::before, button.btn-play::after{ content: none !important; display: none !important; animation: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* triangle centered */ button.btn-play > span{ display: block !important; width: 0 !important; height: 0 !important; transform: translateX(2px) !important; border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-left: 14px solid #fff !important; } button.btn-play:hover{ background: var(--primary-hover) !important; transform: translateY(-1px) !important; box-shadow: 0 18px 42px rgba(var(--primary-rgb), .38) !important; } button.btn-play:focus-visible{ box-shadow: 0 18px 42px rgba(var(--primary-rgb), .38), 0 0 0 4px var(--ring) !important; } @media (max-width: 480px){ button.btn-play{ --play-size: 64px; } } /* ========================= NAVBAR — Premium (underline only on hover/focus) — REFINED - Cleaner spacing - Underline only on hover/focus (desktop) - Active = green text only (no underline) - No underline on pill/CTA links (Contact / Get A Quote / Theme Toggle) ========================= */ /* Kill template background states */ .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{ background: transparent !important; } /* Base link */ .navbar-light .navbar-nav .nav-link{ position: relative; font-weight: 800; color: var(--text, #0f172a) !important; padding: 22px 14px !important; line-height: 1.15; transition: color .18s ease, text-shadow .18s ease, transform .18s ease; -webkit-tap-highlight-color: transparent; } /* Slight premium hover lift (desktop feel) */ @media (min-width: 992px){ .navbar-light .navbar-nav .nav-link:hover{ transform: translateY(-1px); } } /* Desktop underline (ONLY hover/focus-visible) */ @media (min-width: 992px){ /* underline pseudo */ .navbar-light .navbar-nav .nav-link::after{ content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, rgba(var(--primary-rgb), .95), rgba(var(--primary-rgb), .65) ); transform: scaleX(.35); transform-origin: left; opacity: 0; transition: transform .22s ease, opacity .22s ease; } /* Hover/focus: green + underline appears */ .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus-visible{ color: var(--primary) !important; text-shadow: 0 0 18px rgba(var(--primary-rgb), .22); } .navbar-light .navbar-nav .nav-link:hover::after, .navbar-light .navbar-nav .nav-link:focus-visible::after{ transform: scaleX(1); opacity: 1; } /* Active page: green text only (NO underline) */ .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show{ color: var(--primary) !important; text-shadow: 0 0 18px rgba(var(--primary-rgb), .14); } .navbar-light .navbar-nav .nav-link.active::after, .navbar-light .navbar-nav .nav-link.show::after{ opacity: 0; transform: scaleX(.35); } /* IMPORTANT: never underline pills/CTAs */ .navbar-light .navbar-nav .nav-link.nav-contact::after, .navbar .d-flex.align-items-center.gap-2 > a.btn::after, #themeToggle.theme-toggle::after{ content: none !important; display: none !important; } } /* Mobile spacing: clean, no underline system */ @media (max-width: 991.98px){ .navbar-light .navbar-nav .nav-link{ padding: 10px 14px !important; transform: none !important; } .navbar-light .navbar-nav .nav-link::after{ content: none !important; display: none !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .navbar-light .navbar-nav .nav-link{ transition: none !important; } .navbar-light .navbar-nav .nav-link::after{ transition: none !important; } } /* ========================= Navbar Dropdown — REFINED (Single Source of Truth) - Premium glass on desktop - Safe static dropdown on mobile ========================= */ .navbar .dropdown-menu{ border: 1px solid rgba(var(--primary-rgb), .18); border-radius: 14px; padding: 10px; margin-top: 12px; background: rgba(255,255,255,.96); background-clip: padding-box; box-shadow: 0 18px 45px rgba(2, 6, 23, .14); z-index: 1100; } /* glass feel (supported browsers only) */ @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){ .navbar .dropdown-menu{ background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .navbar .dropdown-item{ border-radius: 10px; padding: 10px 14px; font-weight: 700; color: #0f172a; white-space: normal; /* ✅ fixes mobile wrapping */ line-height: 1.25; transition: background-color .16s ease, color .16s ease, transform .16s ease; } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus{ background: rgba(var(--primary-rgb), .10); color: #064e2b; transform: translateX(1px); } .navbar .dropdown-item.active, .navbar .dropdown-item:active{ background: rgba(var(--primary-rgb), .14) !important; color: #064e2b !important; font-weight: 800; } .navbar .dropdown-item:focus-visible{ outline: none; box-shadow: 0 0 0 .22rem rgba(var(--primary-rgb), .18); } .navbar .dropdown-divider{ border-top: 1px solid rgba(var(--primary-rgb), .16); margin: 8px 6px; } /* Desktop: allow hover-open only for real mouse/trackpad */ @media (min-width: 992px) and (hover: hover) and (pointer: fine){ .navbar .dropdown:hover > .dropdown-menu{ display: block; } .navbar .dropdown-menu{ margin-top: 10px; } } /* Mobile: dropdown must not float off-screen */ @media (max-width: 991.98px){ .navbar .dropdown-menu{ position: static !important; float: none !important; width: 100% !important; margin-top: 8px; box-shadow: none; background: rgba(255,255,255,.92); } .navbar .dropdown-item{ padding: 10px 12px; transform: none; } } /* ========================= Inner Pages Header (Jumbotron overlay) ========================= */ .jumbotron.jumbotron-fluid{ background: url("../img/header.jpg") center / cover no-repeat !important; position: relative; overflow: hidden; } .jumbotron.jumbotron-fluid::before{ content:""; position:absolute; inset:0; z-index: 0; background: radial-gradient(900px 520px at 12% 30%, rgba(var(--primary-rgb), .22), transparent 60%), linear-gradient(110deg, rgba(8,12,20,.88) 0%, rgba(8,12,20,.58) 45%, rgba(8,12,20,.35) 100%); } .jumbotron.jumbotron-fluid > .container{ position: relative; z-index: 1; } /* Optional: improve readability */ .jumbotron.jumbotron-fluid .display-3, .jumbotron.jumbotron-fluid .text-white{ text-shadow: 0 10px 30px rgba(0,0,0,.35); } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .navbar .dropdown-item{ transition: none !important; } } /* ================================================== PREMIUM NAVBAR CTAs (Contact + Theme Toggle) Single-source styles (desktop + mobile) ================================================== */ /* Right side spacing */ .navbar .d-flex.align-items-center.gap-2{ gap: 10px !important; } /* ---------- CONTACT (ultra premium capsule) ---------- */ @media (min-width: 992px){ .navbar .navbar-nav .nav-link.nav-contact{ height: 44px !important; padding: 0 18px !important; margin-left: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; border: 1px solid transparent !important; /* glass + green gradient border */ background: radial-gradient(120% 150% at 25% 15%, rgba(var(--primary-rgb), .18), transparent 55%), linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.76)) padding-box, linear-gradient(135deg, rgba(var(--primary-rgb), 1), rgba(var(--primary-rgb), .35), rgba(var(--primary-rgb), 1) ) border-box !important; color: #0b1220 !important; font-weight: 900 !important; letter-spacing: .25px !important; box-shadow: 0 16px 44px rgba(2, 6, 23, .14), 0 0 0 0 rgba(var(--primary-rgb), 0) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateY(1px); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, color .18s ease !important; /* IMPORTANT: kill underline system for this CTA */ text-shadow: none !important; } /* premium shine sweep */ .navbar .navbar-nav .nav-link.nav-contact::before{ content:"" !important; position:absolute !important; top:-70% !important; left:-45% !important; width:70% !important; height:240% !important; border-radius: inherit !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.70), transparent) !important; transform: rotate(25deg) translateX(-140%) !important; opacity: 0 !important; pointer-events:none !important; } /* remove underline pseudo from your nav system */ .navbar .navbar-nav .nav-link.nav-contact::after{ content: none !important; display: none !important; } .navbar .navbar-nav .nav-link.nav-contact:hover{ transform: translateY(-1px) !important; filter: saturate(1.08) !important; color: var(--primary) !important; box-shadow: 0 22px 58px rgba(2, 6, 23, .18), 0 0 0 9px rgba(var(--primary-rgb), .12) !important; } .navbar .navbar-nav .nav-link.nav-contact:hover::before{ opacity: .65 !important; animation: navCtaShine .9s ease forwards !important; } .navbar .navbar-nav .nav-link.nav-contact:focus-visible{ outline: none !important; box-shadow: 0 22px 58px rgba(2, 6, 23, .18), 0 0 0 4px rgba(var(--primary-rgb), .22), 0 0 0 10px rgba(var(--primary-rgb), .12) !important; } .navbar .navbar-nav .nav-link.nav-contact.active{ color: #064e2b !important; box-shadow: 0 24px 64px rgba(var(--primary-rgb), .22), 0 0 0 11px rgba(var(--primary-rgb), .14) !important; } @keyframes navCtaShine{ to{ transform: rotate(25deg) translateX(170%) !important; } } } /* ---------- THEME TOGGLE (super premium chip) ---------- */ #themeToggle.theme-toggle{ height: 44px; padding: 0 14px 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent; cursor: pointer; /* glass + subtle green border */ background: linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.76)) padding-box, linear-gradient(135deg, rgba(var(--primary-rgb), .85), rgba(var(--primary-rgb), .28), rgba(var(--primary-rgb), .85) ) border-box; color: #0b1220; font-weight: 900; letter-spacing: .2px; box-shadow: 0 16px 44px rgba(2, 6, 23, .12), inset 0 0 0 1px rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; } /* icon chip */ #themeToggle.theme-toggle i{ width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--primary-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .18), 0 10px 22px rgba(2, 6, 23, .10); font-size: .95rem; } /* shine */ #themeToggle.theme-toggle::before{ content:""; position:absolute; top:-70%; left:-45%; width:70%; height:240%; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.70), transparent); transform: rotate(25deg) translateX(-140%); opacity: 0; pointer-events:none; } #themeToggle.theme-toggle:hover{ transform: translateY(-1px); filter: saturate(1.08); box-shadow: 0 22px 58px rgba(2, 6, 23, .16), 0 0 0 9px rgba(var(--primary-rgb), .10), inset 0 0 0 1px rgba(255,255,255,.55); } #themeToggle.theme-toggle:hover::before{ opacity: .65; animation: navCtaShine .9s ease forwards; } #themeToggle.theme-toggle:focus-visible{ outline: none; box-shadow: 0 22px 58px rgba(2, 6, 23, .16), 0 0 0 4px rgba(var(--primary-rgb), .22), 0 0 0 10px rgba(var(--primary-rgb), .10), inset 0 0 0 1px rgba(255,255,255,.55); } /* Toggle in dark theme (button itself looks correct even if site dark styles are still WIP) */ :root[data-theme="dark"] #themeToggle.theme-toggle{ background: linear-gradient(rgba(15,23,42,.78), rgba(15,23,42,.62)) padding-box, linear-gradient(135deg, rgba(var(--primary-rgb), 1), rgba(var(--primary-rgb), .30), rgba(var(--primary-rgb), 1) ) border-box; color: rgba(255,255,255,.92); box-shadow: 0 16px 44px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.10); } :root[data-theme="dark"] #themeToggle.theme-toggle i{ background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: rgba(255,255,255,.92); } /* ---------- Mobile: clean + premium (no giant pills in collapse) ---------- */ @media (max-width: 991.98px){ .navbar .navbar-nav .nav-link.nav-contact{ margin: 10px 0 0 !important; padding: 12px 14px !important; border-radius: 14px !important; background: rgba(var(--primary-rgb), .10) !important; border: 1px solid rgba(var(--primary-rgb), .22) !important; box-shadow: none !important; color: #064e2b !important; font-weight: 900 !important; } .navbar .navbar-nav .nav-link.nav-contact::before, .navbar .navbar-nav .nav-link.nav-contact::after{ content: none !important; display: none !important; } #themeToggle.theme-toggle{ height: 40px; padding: 0 12px 0 10px; } #themeToggle.theme-toggle i{ width: 28px; height: 28px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .navbar .navbar-nav .nav-link.nav-contact, #themeToggle.theme-toggle{ transition: none !important; } .navbar .navbar-nav .nav-link.nav-contact::before, #themeToggle.theme-toggle::before{ animation: none !important; } } /* ========================================= FIX: Contact pill vertical alignment (desktop) ========================================= */ @media (min-width: 992px){ /* make each nav item a flex box so children center perfectly */ .navbar .navbar-nav{ align-items: center !important; } .navbar .navbar-nav .nav-item{ display: flex !important; align-items: center !important; } /* ensure all links (including the pill) center vertically */ .navbar .navbar-nav .nav-link{ display: inline-flex !important; align-items: center !important; } /* remove any tiny offset */ .navbar .navbar-nav .nav-link.nav-contact{ align-self: center !important; transform: none !important; /* kills the 1px drop */ margin-top: 0 !important; margin-bottom: 0 !important; } } /* ========================= Contact Form — Button + Dark/Light polish ========================= */ /* Make inputs readable in both themes (uses your tokens) */ #contactForm .form-control, #contactForm .custom-select{ background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; } #contactForm .form-control::placeholder{ color: var(--text-muted) !important; } #contactForm .form-control:focus, #contactForm .custom-select:focus{ box-shadow: 0 0 0 .22rem var(--focus-ring) !important; } /* Premium quote button (distinct from green primary) */ .btn-quote{ --quote: #f59e0b; /* amber (great contrast) */ --quote-hover: #d97706; background: var(--quote) !important; border: 1px solid rgba(0,0,0,.06) !important; color: #0b1220 !important; /* readable on amber */ font-weight: 900 !important; letter-spacing: .02em; border-radius: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .6rem; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; box-shadow: 0 16px 44px rgba(2,6,23,.14); } .btn-quote:hover{ background: var(--quote-hover) !important; transform: translateY(-1px); box-shadow: 0 22px 60px rgba(2,6,23,.18); } .btn-quote:focus-visible{ outline: none !important; box-shadow: 0 22px 60px rgba(2,6,23,.18), 0 0 0 4px rgba(245,158,11,.30) !important; } /* Dark mode: keep button text crisp */ html[data-theme="dark"] .btn-quote{ color: #0b1220 !important; } /* Mobile: comfy tap target */ @media (max-width: 575.98px){ #contactForm .form-control{ padding: 14px 16px !important; } #contactForm .custom-select{ padding-left: 16px !important; padding-right: 16px !important; } .btn-quote{ border-radius: 16px !important; } } /* ===== Contact Map Fix (prevents blank/disappearing map) ===== */ .map-embed{ border-radius: 14px; overflow: hidden; border: 1px solid var(--border, rgba(15,23,42,.12)); box-shadow: var(--shadow, 0 18px 50px rgba(2,6,23,.10)); background: var(--surface, #fff); } .map-embed iframe{ width: 100%; height: 470px; border: 0; display: block; /* IMPORTANT: prevents weird gaps/blank */ } /* Contact card polish */ .contact-card{ padding: 30px; border-radius: 16px; } @media (max-width: 991.98px){ .map-embed iframe{ height: 360px; } .contact-card{ padding: 22px; } } /* ================================================== THEME ENGINE (Light/Dark) — PREMIUM v2 (Clean + Complete) JS sets: ================================================== */ /* ---------- LIGHT TOKENS (default) ---------- */ :root{ /* surfaces */ --page-bg: #ffffff; --surface: #ffffff; --surface-2: #f6f8fb; /* text */ --text: #0b1220; --text-muted: rgba(11,18,32,.72); --heading: #0b1220; /* links */ --link-color: var(--link); --link-hover: var(--link-hover); /* borders/shadows */ --border: rgba(15,23,42,.12); --shadow: 0 18px 50px rgba(2,6,23,.10); /* topbar */ --topbar-bg: #0b1220; --topbar-text: rgba(255,255,255,.92); /* focus */ --focus-ring: rgba(var(--primary-rgb), .22); } /* ---------- DARK TOKENS ---------- */ html[data-theme="dark"]{ color-scheme: dark; --page-bg: #070b12; --surface: rgba(15,23,42,.92); --surface-2: rgba(255,255,255,.06); --text: rgba(255,255,255,.92); --text-muted: rgba(255,255,255,.70); --heading: #f8fafc; --link-color: rgba(134,239,172,.92); --link-hover: rgba(34,197,94,.98); --border: rgba(148,163,184,.16); --shadow: 0 26px 80px rgba(0,0,0,.55); --topbar-bg: #070b12; --topbar-text: rgba(255,255,255,.90); --focus-ring: rgba(var(--primary-rgb), .28); /* optional: darker dropdown surface for better contrast */ --dropdown-bg: rgba(15,23,42,.96); } /* ---------- GLOBAL BASE ---------- */ body{ background: var(--page-bg) !important; color: var(--text) !important; } /* headings: only in dark mode; don't override explicit text utilities */ html[data-theme="dark"] h1:not(.text-white):not(.text-primary):not(.text-dark), html[data-theme="dark"] h2:not(.text-white):not(.text-primary):not(.text-dark), html[data-theme="dark"] h3:not(.text-white):not(.text-primary):not(.text-dark), html[data-theme="dark"] h4:not(.text-white):not(.text-primary):not(.text-dark), html[data-theme="dark"] h5:not(.text-white):not(.text-primary):not(.text-dark), html[data-theme="dark"] h6:not(.text-white):not(.text-primary):not(.text-dark){ color: var(--heading) !important; } /* links */ a{ color: var(--link-color); } a:hover{ color: var(--link-hover); } /* focus */ :focus-visible{ outline: none; box-shadow: 0 0 0 .22rem var(--focus-ring); border-radius: 10px; } /* ---------- TOPBAR ---------- */ .container-fluid.bg-dark{ background: var(--topbar-bg) !important; } .container-fluid.bg-dark, .container-fluid.bg-dark .text-white, .container-fluid.bg-dark small{ color: var(--topbar-text) !important; } /* ---------- NAVBAR ---------- */ .navbar{ background: var(--surface) !important; } html[data-theme="dark"] .navbar{ border-bottom: 1px solid var(--border); } .navbar-light .navbar-nav .nav-link{ color: var(--text) !important; } html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, html[data-theme="dark"] .navbar-light .navbar-nav .nav-link.active{ color: var(--primary) !important; } /* ✅ dropdown readability in dark mode (fix “Services” items not showing) */ html[data-theme="dark"] .navbar .dropdown-menu{ background: var(--dropdown-bg) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; } html[data-theme="dark"] .navbar .dropdown-item{ color: rgba(255,255,255,.90) !important; } html[data-theme="dark"] .navbar .dropdown-item:hover, html[data-theme="dark"] .navbar .dropdown-item:focus{ background: rgba(var(--primary-rgb), .14) !important; color: #fff !important; } html[data-theme="dark"] .navbar .dropdown-divider{ border-top-color: rgba(148,163,184,.16) !important; } /* ---------- BOOTSTRAP UTILITY FIXES ---------- */ html[data-theme="dark"] .bg-light{ background-color: var(--surface-2) !important; } html[data-theme="dark"] .bg-white{ background-color: var(--surface) !important; } /* ✅ template uses bg-secondary sections (Why Choose Us + testimonial). Make premium dark surface */ html[data-theme="dark"] .bg-secondary{ background: radial-gradient(900px 520px at 15% 15%, rgba(var(--primary-rgb), .10), transparent 55%), linear-gradient(180deg, rgba(15,23,42,.92), rgba(7,11,18,.92)) !important; color: var(--text) !important; border-color: var(--border) !important; } /* text utilities */ html[data-theme="dark"] .text-dark{ color: var(--text) !important; } html[data-theme="dark"] .text-muted{ color: var(--text-muted) !important; } /* borders */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-left, html[data-theme="dark"] .border-right{ border-color: var(--border) !important; } /* ---------- CARDS / PANELS / DROPDOWNS ---------- */ html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content{ background-color: rgba(255,255,255,.06) !important; /* slightly more premium than solid */ color: var(--text) !important; border-color: var(--border) !important; box-shadow: var(--shadow); } /* ---------- FORMS ---------- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select, html[data-theme="dark"] .input-group-text{ background-color: rgba(255,255,255,.06) !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-theme="dark"] .form-control::placeholder{ color: rgba(255,255,255,.55) !important; } /* ---------- TABLES ---------- */ html[data-theme="dark"] .table{ color: var(--text) !important; } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th{ border-color: var(--border) !important; } /* ========================================= ABOUT (Premium) — refined, token-based, no global overrides Uses: --primary, --primary-hover, --primary-rgb --text, --text-muted, --heading --surface, --border, --shadow ========================================= */ .about-premium{ position: relative; } /* ---------- Media card ---------- */ .about-premium__media{ position: relative; border-radius: 18px; overflow: hidden; isolation: isolate; /* keeps overlay effects contained */ transform: translateZ(0); /* prevents jaggy edges on some GPUs */ box-shadow: var(--shadow, 0 22px 60px rgba(2,6,23,.14)); } /* Gloss + soft green bloom (purely decorative) */ .about-premium__media::after{ content:""; position:absolute; inset:0; z-index: 1; pointer-events:none; background: radial-gradient(800px 420px at 18% 10%, rgba(var(--primary-rgb), .14), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.10), transparent 44%); } /* Image */ .about-premium__img{ display: block; width: 100%; height: auto; transform: scale(1.01); } /* ---------- Badge ---------- */ .about-premium__badge{ position:absolute; left: 18px; bottom: 18px; z-index: 2; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.82); border: 1px solid rgba(var(--primary-rgb), .20); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 46px rgba(2,6,23,.18); } .about-premium__badgeTop{ font-weight: 900; font-size: 1.15rem; line-height: 1.1; color: var(--text, #0b1220); } .about-premium__badgeBottom{ margin-top: 2px; font-weight: 800; color: var(--text-muted, rgba(11,18,32,.72)); font-size: .95rem; } /* ---------- Kicker + title ---------- */ .about-premium__kicker{ letter-spacing: .18em; text-transform: uppercase; } .about-premium__title{ letter-spacing: -0.02em; color: var(--heading, var(--text, #0b1220)); } /* ---------- Preview text clamp (demo only) ---------- */ .about-preview__text{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; /* prevents long words from breaking layout */ } /* ---------- CTAs ---------- */ .about-premium__cta, .about-premium__cta2{ border-radius: 999px !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; will-change: transform; } .about-premium__cta:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(var(--primary-rgb), .22); } .about-premium__cta2:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(var(--primary-rgb), .16); } /* Keyboard accessibility */ .about-premium__cta:focus-visible, .about-premium__cta2:focus-visible{ outline: none; box-shadow: 0 18px 40px rgba(var(--primary-rgb), .18), 0 0 0 .22rem rgba(var(--primary-rgb), .22); } /* ---------- Dark mode (only scopes to About) ---------- */ html[data-theme="dark"] .about-premium__badge{ background: rgba(15,23,42,.70); border-color: rgba(148,163,184,.18); } html[data-theme="dark"] .about-premium__badgeTop{ color: rgba(255,255,255,.92); } html[data-theme="dark"] .about-premium__badgeBottom{ color: rgba(255,255,255,.70); } /* ---------- Mobile polish ---------- */ @media (max-width: 991.98px){ .about-premium__media{ border-radius: 16px; } .about-premium__badge{ left: 14px; bottom: 14px; } .about-preview__text{ -webkit-line-clamp: 5; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .about-premium__cta, .about-premium__cta2{ transition: none !important; } } /* ========================================= SERVICES — Ultra Premium Cards (BEST LOOK) Use: .services-premium on the section wrapper ========================================= */ .services-premium .team{ position: relative; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 18px 55px rgba(2,6,23,.10); transition: transform .18s ease, box-shadow .18s ease; } /* IMAGE: premium full-bleed (no letterboxing) */ .services-premium .team .card-img-top{ width: 100%; height: 220px; /* consistent & premium */ object-fit: cover; /* ✅ fills card */ object-position: center top; /* ✅ smarter crop */ display: block; transform: translateZ(0); } /* Premium overlay for depth + consistency */ .services-premium .team::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(900px 360px at 20% 5%, rgba(var(--primary-rgb), .14), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.22) 100%); opacity: .85; z-index: 1; } /* Text area: glass + clean */ .services-premium .team .team-text{ position: relative; z-index: 2; padding: 14px 14px; min-height: 98px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(15,23,42,.08); border-bottom: 4px solid var(--primary); } /* Titles: consistent, premium, no overflow */ .services-premium .team .team-text h5{ font-size: 1.06rem; line-height: 1.22; margin: 0 0 4px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .services-premium .team .team-text span{ font-weight: 600; color: rgba(11,18,32,.70); } /* Desktop hover: lift + tiny zoom */ @media (hover: hover) and (pointer: fine){ .services-premium .team:hover{ transform: translateY(-6px); box-shadow: 0 28px 80px rgba(2,6,23,.16); } .services-premium .team .card-img-top{ transition: transform .35s ease; } .services-premium .team:hover .card-img-top{ transform: scale(1.04); } } /* Dark mode */ html[data-theme="dark"] .services-premium .team{ background: var(--surface); box-shadow: var(--shadow); } html[data-theme="dark"] .services-premium .team .team-text{ background: rgba(15,23,42,.72); border-top-color: rgba(148,163,184,.16); } html[data-theme="dark"] .services-premium .team .team-text h5, html[data-theme="dark"] .services-premium .team .team-text span{ color: var(--text) !important; } /* Mobile: slightly taller images (looks richer on phones) */ @media (max-width: 991.98px){ .services-premium .team .card-img-top{ height: 210px; } } @media (max-width: 575.98px){ .services-premium .team{ border-radius: 18px; } .services-premium .team .card-img-top{ height: 200px; } } /* ========================= BLOG (Premium grid + responsive) ========================= */ .blog-premium .blog-card{ border-radius: 18px; overflow: hidden; background: transparent; box-shadow: 0 18px 55px rgba(2,6,23,.10); transition: transform .18s ease, box-shadow .18s ease; } .blog-premium .blog-card:hover{ transform: translateY(-3px); box-shadow: 0 26px 80px rgba(2,6,23,.14); } .blog-premium .blog-media{ position: relative; overflow: hidden; background: #0b1220; } .blog-premium .blog-img{ width: 100%; height: 230px; /* desktop height */ object-fit: cover; /* best-looking crop */ display: block; transform: scale(1.02); transition: transform .35s ease; } .blog-premium .blog-card:hover .blog-img{ transform: scale(1.06); } .blog-premium .blog-date{ position: absolute; right: 18px; bottom: -22px; width: 62px; height: 62px; border-radius: 999px; background: var(--primary); color: #fff; display: grid; place-items: center; box-shadow: 0 16px 40px rgba(var(--primary-rgb), .25); } .blog-premium .blog-date .day{ font-weight: 900; line-height: 1; font-size: 18px; } .blog-premium .blog-date .mon{ font-weight: 800; letter-spacing: .08em; font-size: 11px; margin-top: -2px; } .blog-premium .blog-body{ padding: 38px 22px 22px; /* extra top padding because date overlaps */ height: calc(100% - 0px); } .blog-premium .blog-avatar{ width: 40px; height: 40px; } .blog-premium .blog-excerpt{ display: -webkit-box; -webkit-line-clamp: 3; /* clean, consistent cards */ -webkit-box-orient: vertical; overflow: hidden; } .blog-premium .blog-readmore{ font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid rgba(var(--primary-rgb), .55); padding-bottom: 2px; } .blog-premium .blog-more-btn{ border-radius: 999px; padding: 12px 22px; box-shadow: 0 16px 44px rgba(var(--primary-rgb), .18); } /* Mobile tuning */ @media (max-width: 991.98px){ .blog-premium .blog-img{ height: 220px; } } @media (max-width: 575.98px){ .blog-premium .blog-img{ height: 200px; } .blog-premium .blog-body{ padding: 36px 18px 18px; } } /* ========================= QUOTE FORM BUTTON (Scoped) — paste at very end ========================= */ /* Light mode */ .quote-btn{ background: #0ea5e9 !important; /* Premium blue */ border-color: #0ea5e9 !important; color: #fff !important; font-weight: 900; border-radius: 14px; letter-spacing: .2px; box-shadow: 0 14px 34px rgba(2,6,23,.14); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .quote-btn:hover{ filter: brightness(.96) saturate(1.05); transform: translateY(-1px); box-shadow: 0 18px 44px rgba(2,6,23,.18); } .quote-btn:focus-visible{ outline: none; box-shadow: 0 0 0 .22rem rgba(14,165,233,.28), 0 18px 44px rgba(2,6,23,.18); } /* Dark mode (pop more) */ html[data-theme="dark"] .quote-btn{ background: #38bdf8 !important; border-color: #38bdf8 !important; box-shadow: 0 18px 50px rgba(0,0,0,.35); } /* Mobile comfort */ @media (max-width: 575.98px){ .quote-btn{ border-radius: 16px; padding-top: 14px !important; padding-bottom: 14px !important; } } /* ================================================== TYPOGRAPHY SYSTEM — Maersk-like (Premium + Mobile) Paste near END of theme-overrides.css ================================================== */ :root{ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; /* type rhythm */ --lh-body: 1.65; --lh-head: 1.12; /* Maersk-ish: slightly tight headings */ --track-head: -0.03em; --track-kicker: 0.14em; } /* Base text */ html, body{ font-family: var(--font-sans) !important; font-size: 16px; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headings */ h1,h2,h3,h4,h5,h6{ font-family: var(--font-sans) !important; line-height: var(--lh-head); letter-spacing: var(--track-head); } /* Responsive scale (mobile-first) */ h1{ font-size: clamp(1.9rem, 3.6vw, 3.05rem); font-weight: 800; } h2{ font-size: clamp(1.55rem, 2.8vw, 2.35rem); font-weight: 800; } h3{ font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 800; } h4{ font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 700; } /* Section “kicker” labels like SERVICES / OUR BLOG */ .text-uppercase.text-primary, .section-title h6, h6.text-primary.text-uppercase{ letter-spacing: var(--track-kicker) !important; font-weight: 800 !important; } /* Paragraph polish */ p, .text-muted, small, .lead{ font-weight: 500; } /* Keep long lines readable (desktop), but fluid on mobile */ .container p{ max-width: 70ch; } /* Nav + buttons feel more “enterprise” */ .navbar .navbar-nav .nav-link{ font-weight: 700 !important; letter-spacing: -0.01em; } /* FIX: don’t override icon fonts (Font Awesome) */ .btn{ font-family: var(--font-sans) !important; } /* keep Font Awesome icons using their own fonts */ i.fa, i.fas, i.far, i.fal, i.fad, i.fab, .fa, .fas, .far, .fal, .fad, .fab{ font-family: inherit; /* reset any forced Inter */ } /* If Font Awesome 5 is used (most templates): */ .fas, .fa, .far, .fal, .fad{ font-family: "Font Awesome 5 Free" !important; } .fab{ font-family: "Font Awesome 5 Brands" !important; } /* Mobile readability improvements */ @media (max-width: 575.98px){ body{ font-size: 15.5px; } p{ line-height: 1.7; } .container p{ max-width: 100%; } } /* ========================================= NAVBAR — "Get A Quote" ultra-premium pill (desktop) — FINAL Targets: Get A Quote Paste at END of theme-overrides.css ========================================= */ @media (min-width: 992px){ /* Make parent behave nicely in navbar row */ .navbar .d-flex.align-items-center.gap-2{ align-items: center !important; } .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block{ /* pill geometry */ height: 44px !important; padding: 0 18px !important; border-radius: 999px !important; /* align */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* typography */ font-weight: 900 !important; letter-spacing: .15px !important; line-height: 1 !important; color: #fff !important; white-space: nowrap !important; /* remove template button heaviness */ border: 1px solid transparent !important; text-decoration: none !important; /* premium layered paint: - subtle highlight top-left - rich green gradient body - elegant border gradient */ background: radial-gradient(120% 180% at 18% 18%, rgba(255,255,255,.28), transparent 58% ) padding-box, linear-gradient(180deg, rgba(var(--primary-rgb, 22,163,74), 1) 0%, rgba(var(--primary-rgb, 22,163,74), .86) 55%, rgba(11,18,32,.12) 130% ) padding-box, linear-gradient(135deg, rgba(255,255,255,.45), rgba(var(--primary-rgb, 22,163,74), 1), rgba(255,255,255,.18) ) border-box !important; /* depth */ box-shadow: 0 18px 50px rgba(2, 6, 23, .16), 0 12px 28px rgba(var(--primary-rgb, 22,163,74), .22), inset 0 1px 0 rgba(255,255,255,.22) !important; /* interactions */ position: relative !important; overflow: hidden !important; transform: translateZ(0) !important; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; } /* Kill any underline system pseudo-elements from nav styles (if any) */ .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block::after{ content: none !important; display: none !important; } /* Shine sweep */ .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block::before{ content: "" !important; position: absolute !important; top: -80% !important; left: -55% !important; width: 70% !important; height: 260% !important; border-radius: inherit !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.72), transparent ) !important; transform: rotate(25deg) translateX(-140%) !important; opacity: 0 !important; pointer-events: none !important; } /* Extra “inner glow” for premium feel */ .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block > *{ position: relative; z-index: 1; } .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block:hover{ transform: translateY(-1px) !important; filter: saturate(1.08) brightness(1.02) !important; box-shadow: 0 24px 70px rgba(2, 6, 23, .20), 0 20px 54px rgba(var(--primary-rgb, 22,163,74), .28), inset 0 1px 0 rgba(255,255,255,.24) !important; } .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block:hover::before{ opacity: .65 !important; animation: navQuoteShine .85s ease forwards !important; } .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block:active{ transform: translateY(0px) scale(.99) !important; } .navbar .d-flex.align-items-center.gap-2 > a.btn.btn-primary.d-none.d-lg-block:focus-visible{ outline: none !important; box-shadow: 0 24px 70px rgba(2, 6, 23, .20), 0 0 0 4px rgba(var(--primary-rgb, 22,163,74), .22), 0 0 0 10px rgba(var(--primary-rgb, 22,163,74), .12), inset 0 1px 0 rgba(255,255,255,.24) !important; } @keyframes navQuoteShine{ to{ transform: rotate(25deg) translateX(185%) !important; } } } /* ========================================= Why choose us section in index.html ========================================= */ /* ===== Why Choose Us (Premium + Compact) ===== */ .features-premium{ overflow:hidden; } .features-premium .features-media{ border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.28); } .features-premium .features-title{ font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; } .features-premium .features-lead{ line-height: 1.65; opacity: .92; max-width: 56ch; } .features-premium .feature-item{ display:flex; align-items:flex-start; gap: .25rem; padding: 8px 0; font-weight: 600; } .features-premium .features-more{ display:inline-flex; align-items:center; font-weight: 700; text-decoration: none; } .features-premium .features-more:hover{ text-decoration: underline; } /* Mobile tightening */ @media (max-width: 991.98px){ .features-premium .features-title{ font-size: 1.75rem; } } /* ========================================================= HERO — BEST OF THE BEST (Single Source of Truth) Target markup:

...

Precise Transport & Secure Storage

...

Explore Services
========================================================= */ .hero.hero--stack, .hero.hero--stack *{ box-sizing: border-box; } .hero.hero--stack{ /* tokens (safe fallbacks) */ --nav-h: 90px; --primary: #16a34a; --primary-rgb: 22,163,74; --hero-amp: #facc15; position: relative; isolation: isolate; color: #fff; /* best mobile viewport behavior (iOS/Android) */ min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; /* keep content under navbar area */ padding-top: calc(var(--nav-h) + clamp(18px, 4vw, 64px)); padding-bottom: clamp(18px, 4vw, 64px); overflow: hidden; /* prevents any bleed */ } /* Background image (no reliance on inline styles) */ .hero.hero--stack::before{ content:""; position: absolute; inset: 0; z-index: 0; background-image: url("../img/header.jpg"), url("./img/header.jpg"), url("img/header.jpg"); background-repeat: no-repeat; background-size: cover; background-position: 50% 62%; transform: scale(1.06); filter: saturate(1.06) contrast(1.06) brightness(.88); } /* Overlay wash (readability) */ .hero.hero--stack > .hero__overlay{ position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6,10,16,.92) 0%, rgba(6,10,16,.70) 28%, rgba(6,10,16,.44) 56%, rgba(6,10,16,.20) 78%, rgba(6,10,16,.12) 100% ), radial-gradient(980px 620px at 12% 22%, rgba(var(--primary-rgb), .20), transparent 62% ); } /* Vignette (cinematic) */ .hero.hero--stack::after{ content:""; position: absolute; inset: -2px; z-index: 2; pointer-events: none; background: radial-gradient(1200px 760px at 50% 45%, transparent 34%, rgba(0,0,0,.58) 100% ); } /* Content always above overlays */ .hero.hero--stack .hero__content{ position: relative; z-index: 3; width: 100%; } .hero.hero--stack .hero__content.container{ width: 100%; max-width: 1280px; padding-left: clamp(16px, 5vw, 92px); padding-right: clamp(16px, 5vw, 92px); } /* Premium glass panel (NO overflow clipping -> fixes button cut) */ .hero.hero--stack .hero__text{ width: 100%; max-width: 880px; padding: clamp(14px, 2vw, 22px) clamp(14px, 2.4vw, 26px); border-radius: 22px; background: rgba(8,12,20,.40); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 22px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: visible; /* ✅ critical: prevents CTA truncation */ } /* Eyebrow */ .hero.hero--stack .hero__eyebrow{ margin: 0 0 10px; font-weight: 650; font-size: .95rem; color: rgba(255,255,255,.84); letter-spacing: .02em; text-shadow: 0 14px 40px rgba(0,0,0,.55); overflow-wrap: anywhere; } /* Headline: SOLID green (error-free, no gradient-clip bugs) */ .hero.hero--stack .hero__kicker{ margin: 0 0 12px; font-weight: 950; letter-spacing: -0.055em; line-height: 1.04; font-size: clamp(2.05rem, 4.8vw, 4.2rem); color: var(--primary) !important; background: none !important; -webkit-text-fill-color: currentColor !important; /* iOS safe */ text-shadow: 0 22px 70px rgba(0,0,0,.70), 0 2px 0 rgba(0,0,0,.30); overflow-wrap: anywhere; } /* & accent */ .hero.hero--stack .hero__kicker .hero__amp{ color: var(--hero-amp) !important; -webkit-text-fill-color: var(--hero-amp) !important; } /* Subtitle */ .hero.hero--stack .hero__title{ margin: 0 0 14px; color: rgba(255,255,255,.92); font-weight: 650; letter-spacing: -0.01em; line-height: 1.65; font-size: clamp(1.05rem, 1.3vw, 1.22rem); text-shadow: 0 14px 40px rgba(0,0,0,.60); position: relative; padding-left: clamp(10px, 2.8vw, 58px); overflow-wrap: anywhere; } /* Divider next to subtitle */ .hero.hero--stack .hero__title::before{ content:""; position: absolute; left: clamp(10px, 2.8vw, 58px); transform: translateX(calc(-100% - 14px)); top: .25em; bottom: .25em; width: 2px; border-radius: 999px; background: linear-gradient( to bottom, rgba(var(--primary-rgb), .82), rgba(255,255,255,.12) ); } /* CTA */ .hero.hero--stack .hero__cta{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-left: clamp(10px, 2.8vw, 58px); width: 100%; } .hero.hero--stack .hero__cta .btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; padding: 12px 18px !important; font-weight: 850; letter-spacing: .01em; /* ✅ fixes “Explore Serv…” clipping */ white-space: normal !important; text-align: center !important; max-width: 100% !important; } /* ---------------- MOBILE ---------------- */ @media (max-width: 991.98px){ .hero.hero--stack::before{ background-position: 50% 80%; transform: scale(1.03); } .hero.hero--stack .hero__content.container{ padding-left: 16px; padding-right: 16px; } .hero.hero--stack .hero__text{ max-width: 100%; padding: 16px; border-radius: 18px; } .hero.hero--stack .hero__kicker{ font-size: clamp(1.95rem, 8.6vw, 3.05rem); } /* remove indent to avoid any overflow risk */ .hero.hero--stack .hero__title{ padding-left: 0; } .hero.hero--stack .hero__title::before{ left: 0; transform: none; top: -10px; bottom: auto; width: 100%; height: 2px; background: linear-gradient(to right, rgba(var(--primary-rgb), .82), rgba(255,255,255,.12) ); } .hero.hero--stack .hero__cta{ padding-left: 0; } /* button full width (never clipped) */ .hero.hero--stack .hero__cta .btn{ width: 100% !important; } } /* Extra small phones */ @media (max-width: 430px){ .hero.hero--stack::before{ background-position: 50% 86%; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .hero.hero--stack::before{ transform: none; } .hero.hero--stack *{ transition: none !important; animation: none !important; } } /* ========================================================= HERO — Premium V3 (Left aligned + Green headline + Smooth reveal + Zoom-out + Parallax) Paste at VERY END of theme-overrides.css (overrides everything above) ========================================================= */ .hero.hero--stack{ /* Use dedicated hero vars (avoid self-referential CSS var cycles) */ --hero-primary: var(--primary, #16a34a); --hero-primary-rgb: var(--primary-rgb, 22,163,74); --hero-amp: #facc15; --hero-ease: cubic-bezier(.2,.8,.2,1); /* Parallax offsets (set by JS) */ --bg-x: 0px; --bg-y: 0px; color: #fff; overflow: hidden !important; text-align: left !important; } /* Left-align panel on desktop */ .hero.hero--stack .hero__content.container{ display: flex !important; align-items: center !important; justify-content: flex-start !important; } .hero.hero--stack .hero__text{ margin: 0 auto 0 0 !important; /* stick to left */ text-align: left !important; } /* Background (parallax + zoom-out on load) */ .hero.hero--stack::before{ /* Keep your multi-path fallback */ background-image: url("../img/header.jpg"), url("./img/header.jpg"), url("img/header.jpg"); background-repeat: no-repeat; background-size: cover; /* Parallax-ready position (defaults to centered) */ background-position: calc(50% + var(--bg-x)) calc(58% + var(--bg-y)); /* Start zoomed-in then zoom-out when ready */ transform: scale(1.16) translateZ(0); filter: saturate(1.06) contrast(1.08) brightness(.86); will-change: transform, filter; transition: transform 1600ms var(--hero-ease), filter 1600ms var(--hero-ease); } /* When page is ready, zoom out smoothly */ .hero.hero--stack.hero--ready::before{ transform: scale(1.06) translateZ(0); filter: saturate(1.08) contrast(1.08) brightness(.90); } /* Optional: overlay fade-in for premium feel */ .hero.hero--stack > .hero__overlay{ opacity: 0; transition: opacity 900ms var(--hero-ease); } .hero.hero--stack.hero--ready > .hero__overlay{ opacity: 1; } /* --- Headline colors (green text, yellow & only) --- */ .hero.hero--stack .hero__kicker{ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--hero-primary) !important; -webkit-text-fill-color: currentColor !important; /* Safari/iOS safe */ } .hero.hero--stack .hero__kicker .hero__amp{ color: var(--hero-amp) !important; -webkit-text-fill-color: var(--hero-amp) !important; } /* --- Premium “reveal” (runs on load / when navigating to Home) --- */ .hero.hero--stack .hero__eyebrow, .hero.hero--stack .hero__kicker, .hero.hero--stack .hero__title, .hero.hero--stack .hero__cta{ opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 800ms var(--hero-ease), transform 900ms var(--hero-ease), filter 900ms var(--hero-ease); } .hero.hero--stack.hero--ready .hero__eyebrow{ opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 120ms; } .hero.hero--stack.hero--ready .hero__kicker{ opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 220ms; } .hero.hero--stack.hero--ready .hero__title{ opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 360ms; } .hero.hero--stack.hero--ready .hero__cta{ opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 520ms; } /* CTA alignment + premium hover */ .hero.hero--stack .hero__cta{ justify-content: flex-start !important; } .hero.hero--stack .hero__cta .btn{ width: auto !important; /* desktop: hug content */ max-width: 100% !important; white-space: nowrap !important; transition: transform 220ms var(--hero-ease), box-shadow 220ms var(--hero-ease); } .hero.hero--stack .hero__cta .btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,.35); } /* --- Mobile: full width panel + keep LEFT alignment --- */ @media (max-width: 991.98px){ .hero.hero--stack::before{ background-position: calc(50% + var(--bg-x)) calc(82% + var(--bg-y)); } .hero.hero--stack .hero__content.container{ padding-left: 16px !important; padding-right: 16px !important; } .hero.hero--stack .hero__text{ width: 100% !important; max-width: 100% !important; margin: 0 !important; /* left */ } .hero.hero--stack .hero__cta .btn{ width: 100% !important; /* mobile: full width */ white-space: normal !important; } } /* Reduced motion: no blur/slide, no parallax/zoom */ @media (prefers-reduced-motion: reduce){ .hero.hero--stack::before{ transition: none !important; transform: none !important; } .hero.hero--stack > .hero__overlay{ transition: none !important; opacity: 1 !important; } .hero.hero--stack .hero__eyebrow, .hero.hero--stack .hero__kicker, .hero.hero--stack .hero__title, .hero.hero--stack .hero__cta{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* ========================================================= HERO — LEFT-ANCHORED PANEL (DESKTOP + MOBILE) — FINAL PATCH Paste at VERY END of theme-overrides.css ========================================================= */ /* Make the hero container span full width so left alignment is visible */ .hero.hero--stack .hero__content.container{ /* override Bootstrap .container centering */ max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; /* keep nice safe paddings */ padding-left: clamp(16px, 5vw, 92px) !important; padding-right: clamp(16px, 5vw, 92px) !important; /* force left alignment (kills any grid-centering from base CSS) */ display: flex !important; align-items: center !important; justify-content: flex-start !important; } /* Keep the glass panel on the left (and slightly narrower so it doesn't look centered) */ .hero.hero--stack .hero__text{ margin: 0 !important; max-width: min(760px, 100%) !important; /* change 760 -> 820 if you want wider */ text-align: left !important; } /* Ensure inner elements stay left aligned */ .hero.hero--stack .hero__eyebrow, .hero.hero--stack .hero__kicker, .hero.hero--stack .hero__title{ text-align: left !important; } .hero.hero--stack .hero__cta{ justify-content: flex-start !important; } /* Keep CTA full width only on mobile */ @media (min-width: 992px){ .hero.hero--stack .hero__cta .btn{ width: auto !important; } } @media (max-width: 991.98px){ .hero.hero--stack .hero__content.container{ padding-left: 16px !important; padding-right: 16px !important; } .hero.hero--stack .hero__text{ max-width: 100% !important; } .hero.hero--stack .hero__cta .btn{ width: 100% !important; } } /* ========================================================= CTA Buttons — Light Mode Visibility FIX Fix: Contact Us / All Services not visible in light mode Paste at VERY END of theme-overrides.css ========================================================= */ html[data-theme="light"] .cta-banner .cta-actions .btn, html[data-theme="light"] .cta-banner .cta-actions a.btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .55rem !important; opacity: 1 !important; visibility: visible !important; color: inherit; } /* Contact Us (btn-primary) */ html[data-theme="light"] .cta-banner .cta-actions .btn.btn-primary, html[data-theme="light"] .cta-banner .cta-actions a.btn.btn-primary{ background: var(--primary, #16a34a) !important; border-color: var(--primary, #16a34a) !important; color: #fff !important; box-shadow: 0 10px 26px rgba(0,0,0,.14) !important; } /* All Services (btn-outline-light) -> premium green outline in light mode */ html[data-theme="light"] .cta-banner .cta-actions .btn.btn-outline-light, html[data-theme="light"] .cta-banner .cta-actions a.btn.btn-outline-light{ background: rgba(var(--primary-rgb, 22,163,74), .12) !important; border-color: rgba(var(--primary-rgb, 22,163,74), .55) !important; color: var(--primary, #16a34a) !important; } /* Icons inside buttons */ html[data-theme="light"] .cta-banner .cta-actions .btn i{ color: currentColor !important; } /* Hover polish */ html[data-theme="light"] .cta-banner .cta-actions .btn.btn-primary:hover{ filter: brightness(.97); } html[data-theme="light"] .cta-banner .cta-actions .btn.btn-outline-light:hover{ background: rgba(var(--primary-rgb, 22,163,74), .18) !important; border-color: rgba(var(--primary-rgb, 22,163,74), .75) !important; } html[data-theme="dark"] .container-fluid.bg-dark select.custom-select option{ background:#fff !important; color:#0b1220 !important; } /* ========================== Premium Top Ribbon (Phone + Email + Open 24/7) FIXED: perfect center + no overflow + premium responsive ========================== */ .status-ribbon--full{ position: relative; z-index: 1032; width: 100%; padding: 10px 16px; color: #fff; background: linear-gradient(110deg, #0b6f2b 0%, #14a34a 35%, #0f8f3a 65%, #0b6f2b 100% ); background-size: 220% 220%; animation: ribbonGradient 10s ease-in-out infinite; border-bottom: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 26px rgba(0,0,0,.20); overflow: hidden; } /* Subtle sheen sweep */ .status-ribbon--full::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.12) 30%, transparent 55% ); transform: translateX(-120%); animation: ribbonSheen 4.8s ease-in-out infinite; pointer-events: none; opacity: .85; } /* ✅ FIXED LAYOUT: left auto, center flexible, right auto */ .status-ribbon__wrap{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; max-width: 1320px; margin: 0 auto; min-width: 0; } /* ✅ critical: allow shrink inside grid to prevent pushing center */ .status-ribbon__left, .status-ribbon__center, .status-ribbon__right{ min-width: 0; } /* Left */ .status-ribbon__left{ display: flex; align-items: center; gap: 10px; min-width: 0; } /* Center */ .status-ribbon__center{ display: flex; justify-content: center; min-width: 0; } /* Right */ .status-ribbon__right{ display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-width: 0; } /* Premium contact chips */ .status-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.10); transition: transform .18s ease, background .18s ease, border-color .18s ease; min-width: 0; max-width: 100%; } .status-chip span{ min-width: 0; /* ✅ lets ellipsis work */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } /* ✅ Prevent long email from pushing the center pill */ .status-chip--email span{ max-width: 260px; } .status-chip:hover{ transform: translateY(-1px); background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.28); } /* Center: Open 24/7 premium glass pill */ .status-live{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10); } .status-live__dot{ width: 10px; height: 10px; border-radius: 999px; background: #ffffff; box-shadow: 0 0 0 6px rgba(255,255,255,.14); animation: ribbonPulse 1.6s ease-in-out infinite; } .status-live__text{ font-weight: 800; letter-spacing: .2px; line-height: 1; font-size: .95rem; white-space: nowrap; } .status-live__text strong{ font-weight: 900; letter-spacing: .35px; } .status-live__text .sep{ opacity: .85; font-weight: 900; margin: 0 6px; } /* Social icons */ .status-social{ width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .18s ease, background .18s ease, border-color .18s ease; } .status-social:hover{ transform: translateY(-1px); background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.28); } /* Animations */ @keyframes ribbonGradient{ 0% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } 100% { background-position: 0% 40%; } } @keyframes ribbonSheen{ 0% { transform: translateX(-140%); } 45% { transform: translateX(140%); } 100% { transform: translateX(140%); } } @keyframes ribbonPulse{ 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .85; } } /* ✅ Responsive (Tablet + Mobile): stack cleanly */ @media (max-width: 991.98px){ .status-ribbon__wrap{ grid-template-columns: 1fr; gap: 10px; text-align: center; } .status-ribbon__left, .status-ribbon__center, .status-ribbon__right{ justify-content: center; } .status-ribbon__left{ flex-wrap: wrap; justify-content: center; } .status-ribbon__right{ justify-content: center; flex-wrap: wrap; } .status-live__text{ white-space: normal; text-align: center; line-height: 1.2; } .status-chip--email span{ max-width: 220px; } } @media (max-width: 575.98px){ .status-ribbon--full{ padding: 10px 12px; } .status-chip{ width: 100%; justify-content: center; } .status-chip--email span{ max-width: 100%; } .status-ribbon__right{ gap: 8px; } } /* Dark mode small upgrade */ body.dark-mode .status-ribbon--full, html[data-theme="dark"] .status-ribbon--full{ border-bottom-color: rgba(255,255,255,.10); box-shadow: 0 14px 34px rgba(0,0,0,.35); } /* =========================== HOME INSIGHTS =========================== */ .blog-premium{ position: relative; overflow: hidden; } /* Subtitle under heading */ .blog-premium-sub{ max-width: 820px; margin: 0 auto; color: rgba(16,24,39,.72); font-weight: 600; line-height: 1.7; } html[data-theme="dark"] .blog-premium-sub, body.dark-mode .blog-premium-sub{ color: rgba(243,247,255,.72); } /* Optional aurora background layer */ .home-blog-aurora{ position: absolute; inset: -30% -15%; pointer-events: none; opacity: .75; filter: blur(40px); background: radial-gradient(520px 260px at 18% 18%, rgba(var(--primary-rgb, 20,163,74), .20) 0%, transparent 60%), radial-gradient(540px 260px at 82% 24%, rgba(0,152,255,.12) 0%, transparent 60%), radial-gradient(520px 260px at 50% 82%, rgba(255,193,7,.08) 0%, transparent 60%); animation: auroraFloat 14s ease-in-out infinite; } @keyframes auroraFloat{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(2.2%, -1.6%, 0) scale(1.03); } } @media (prefers-reduced-motion: reduce){ .home-blog-aurora{ animation: none; } } /* Premium card */ .blog-card-premium{ background: rgba(255,255,255,.92); border: 1px solid rgba(16,24,39,.10); border-radius: 20px; overflow: hidden; box-shadow: 0 18px 50px rgba(16,24,39,.10); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; height: 100%; display: flex; flex-direction: column; cursor: pointer; } html[data-theme="dark"] .blog-card-premium, body.dark-mode .blog-card-premium{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); box-shadow: 0 26px 70px rgba(0,0,0,.45); } .blog-card-premium:hover{ transform: translateY(-4px); box-shadow: 0 26px 70px rgba(16,24,39,.14); border-color: rgba(var(--primary-rgb, 20,163,74), .28); } html[data-theme="dark"] .blog-card-premium:hover, body.dark-mode .blog-card-premium:hover{ box-shadow: 0 32px 80px rgba(0,0,0,.52); } /* Media */ .blog-media-premium{ position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; } .blog-img-premium{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .6s ease; } .blog-card-premium:hover .blog-img-premium{ transform: scale(1.08); } /* Overlay gradient + sheen */ .blog-media-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%), radial-gradient(600px 220px at 30% 0%, rgba(255,255,255,.18), transparent 60%); opacity: .95; pointer-events: none; } /* Date pill */ .blog-date-premium{ position: absolute; left: 14px; top: 14px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.92); border: 1px solid rgba(16,24,39,.10); box-shadow: 0 14px 40px rgba(16,24,39,.12); text-align: center; line-height: 1; } html[data-theme="dark"] .blog-date-premium, body.dark-mode .blog-date-premium{ background: rgba(10,14,22,.72); border-color: rgba(255,255,255,.10); } .blog-date-premium .day{ font-weight: 900; font-size: 1.05rem; color: rgba(16,24,39,.92); } .blog-date-premium .mon{ margin-top: 4px; font-weight: 900; font-size: .78rem; letter-spacing: .10em; color: rgba(var(--primary-rgb, 20,163,74), .95); } html[data-theme="dark"] .blog-date-premium .day, body.dark-mode .blog-date-premium .day{ color: rgba(243,247,255,.92); } /* Body */ .blog-body-premium{ padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; } /* Meta chips */ .blog-meta-premium{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .blog-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; background: rgba(var(--primary-rgb, 20,163,74), .12); border: 1px solid rgba(var(--primary-rgb, 20,163,74), .18); color: rgba(11,111,43,.95); font-weight: 800; font-size: .82rem; line-height: 1; } html[data-theme="dark"] .blog-chip, body.dark-mode .blog-chip{ background: rgba(var(--primary-rgb, 20,163,74), .14); color: rgba(220,255,235,.92); } .blog-time{ margin-left: auto; color: rgba(16,24,39,.60); font-weight: 700; font-size: .86rem; display: inline-flex; align-items: center; gap: 8px; } html[data-theme="dark"] .blog-time, body.dark-mode .blog-time{ color: rgba(243,247,255,.66); } /* Title + excerpt */ .blog-title-premium{ margin: 0; font-weight: 900; letter-spacing: -.2px; line-height: 1.25; } .blog-title-premium a{ color: inherit; text-decoration: none; } .blog-title-premium a:hover{ text-decoration: none; } .blog-excerpt-premium{ margin: 0; color: rgba(16,24,39,.72); line-height: 1.7; font-weight: 600; } html[data-theme="dark"] .blog-excerpt-premium, body.dark-mode .blog-excerpt-premium{ color: rgba(243,247,255,.72); } /* Read more */ .blog-readmore-premium{ margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 900; text-decoration: none; color: rgba(var(--primary-rgb, 20,163,74), 1); } .blog-readmore-premium:hover{ text-decoration: none; opacity: .9; transform: translateX(1px); } /* Focus ring (keyboard premium) */ .blog-card-premium:focus{ outline: none; } .blog-card-premium:focus-visible{ box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 20,163,74), .22), 0 18px 50px rgba(16,24,39,.10); } /* =========================== MOBILE: SWIPE + SNAP =========================== */ @media (max-width: 767.98px){ .blog-row-premium{ flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding: 4px 10px 8px; margin-left: -10px; margin-right: -10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } /* Make columns behave like cards in a horizontal strip */ .blog-row-premium > [class*="col-"]{ flex: 0 0 86%; max-width: 86%; scroll-snap-align: start; padding-left: 0; padding-right: 0; margin-bottom: 0 !important; } /* Hide scrollbar (clean premium) */ .blog-row-premium::-webkit-scrollbar{ height: 0; } .blog-row-premium{ scrollbar-width: none; } /* Slightly bigger tap targets */ .blog-readmore-premium{ padding: 8px 0; } } @media (min-width: 768px) and (max-width: 991.98px){ .blog-title-premium{ font-size: 1.05rem; } } /* ========================================================= Premium theme-based SVG logo swap (light/dark) ========================================================= */ .brand-logo__wrap{ position: relative; display: inline-flex; align-items: center; height: 44px; } .brand-logo__img{ height: 44px; width: auto; display: block; transition: opacity .18s ease; } .brand-logo__img--dark{ position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; } html[data-theme="dark"] .brand-logo__img--light{ opacity: 0; } html[data-theme="dark"] .brand-logo__img--dark{ opacity: 1; } @media (prefers-reduced-motion: reduce){ .brand-logo__img{ transition: none; } } /* ========================================================= Navbar "Contact" pill readability in dark mode ========================================================= */ html[data-theme="dark"] .navbar .navbar-nav .nav-link.nav-contact{ color: rgba(255,255,255,.95) !important; background: rgba(34,197,94,.16) !important; border: 1px solid rgba(34,197,94,.35) !important; } html[data-theme="dark"] .navbar .navbar-nav .nav-link.nav-contact:hover{ background: rgba(34,197,94,.22) !important; }