:root{
--navy:#0A3D62;
--navy-900:#061B2B;
--green:#1DD1A1;
--green-700:#14B8A6;
--gray:#6B7280;
--gray-100:#F3F4F6;
--gray-200:#E5E7EB;
--text:#0B1220;
--white:#ffffff;
--radius:18px;
--shadow: 0 10px 30px rgba(2, 6, 23, .12);
--max: 1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--text); background:var(--white); line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.topbar{
background:linear-gradient(90deg, var(--navy-900), var(--navy));
color:#8fbb22;
font-size:14px;
}
.topbar .container{display:flex; gap:14px; align-items:center; justify-content:space-between; padding:10px 20px}
.badge{
display:inline-flex; align-items:center; gap:8px;
padding:6px 10px; border:1px solid rgba(255,255,255,.18);
border-radius:999px; background:rgba(255,255,255,.06)
}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.toplinks{display:flex; gap:14px; align-items:center; opacity:.95}
.toplinks a{opacity:.95}
.toplinks a:hover{opacity:1}
.header{
position:sticky; top:0; z-index:50;
background:rgba(255,255,255,.9);
backdrop-filter: blur(10px);
border-bottom:1px solid var(--gray-200);
}
.header .container{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:72px;height:72px}
.brand strong{display:block; font-size:16px; letter-spacing:.2px}
.brand span{display:block; font-size:13px; color:var(--gray)}
.nav{display:flex; gap:18px; align-items:center}
.nav a{padding:10px 10px; border-radius:12px; color:rgba(11,18,32,.88)}
.nav a:hover{background:var(--gray-100)}
.nav .cta{
background:linear-gradient(135deg, var(--navy), var(--green-700));
color:white; padding:10px 14px; border-radius:14px;
box-shadow: 0 10px 22px rgba(20,184,166,.18);
}
.menu-btn{display:none; border:1px solid var(--gray-200); background:#8fbb22; padding:10px 12px; border-radius:14px}
.hero{
position:relative; overflow:hidden;
background: url("assets/hero-bg.svg") center/cover no-repeat;
color:white;
padding:78px 0 64px;
}
.hero::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(90deg, rgba(6,27,43,.85), rgba(6,27,43,.2));
}
.hero .container{position:relative; z-index:1; display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center}
.hero h1{font-size:44px; line-height:1.1; margin:0 0 14px}
.hero p{margin:0 0 18px; color:rgba(255,255,255,.88); font-size:18px}
.hero .pillrow{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 26px}
.pill{
padding:8px 12px; border-radius:999px;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
font-size:14px
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap:10px; padding:12px 16px; border-radius:14px; border:1px solid transparent;
font-weight:600; cursor:pointer
}
.btn.primary{background:linear-gradient(135deg, var(--green), var(--green-700)); color:#8fbb22}
.btn.ghost{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.18)}
.hero-card{
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
border-radius:var(--radius); padding:18px; box-shadow: 0 16px 40px rgba(0,0,0,.18)
}
.hero-card .logo{width:110px; margin:0 auto 12px}
.hero-card small{display:block; text-align:center; color:rgba(255,255,255,.85)}
.hero-card .meta{display:grid; gap:10px; margin-top:14px}
.meta-row{display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,.9); font-size:14px}
.meta-row svg{flex:0 0 18px; margin-top:2px; color:var(--green)}
.section{padding:64px 0}
.section.gray{background:linear-gradient(180deg, #fff, var(--gray-100))}
.kicker{color:var(--gray); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:12px}
.h2{font-size:30px; margin:10px 0 10px}
.lead{color:var(--gray); margin:0 0 24px}
.grid{display:grid; gap:18px}
.grid.cards{grid-template-columns: repeat(4, minmax(0,1fr))}
.card{
background:#fff; border:1px solid var(--gray-200);
border-radius:var(--radius); padding:18px; box-shadow: var(--shadow);
}
.card .icon{
width:56px; height:56px; border-radius:16px;
background:linear-gradient(135deg, rgba(10,61,98,.10), rgba(29,209,161,.12));
display:flex; align-items:center; justify-content:center;
color:var(--navy);
margin-bottom:12px
}
.card h3{margin:0 0 8px; font-size:18px}
.card ul{margin:10px 0 0; padding-left:18px; color:var(--gray)}
.card p{margin:0; color:var(--gray)}
.card a.more{display:inline-flex; gap:8px; align-items:center; margin-top:12px; color:var(--navy); font-weight:700}
.card a.more:hover{color:var(--green-700)}
.split{display:grid; grid-template-columns: 1fr 1fr; gap:22px; align-items:start}
.panel{
background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
padding:22px; box-shadow: var(--shadow);
}
.panel h3{margin-top:0}
.list-check{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.list-check li{display:flex; gap:10px; align-items:flex-start; color:var(--gray)}
.check{
width:18px; height:18px; border-radius:6px;
background:rgba(29,209,161,.15);
display:inline-flex; align-items:center; justify-content:center; color:var(--green-700); flex:0 0 18px; margin-top:3px
}
.divider{margin:22px 0; height:1px; background:var(--gray-200)}
.footer{
background:linear-gradient(180deg, var(--navy-900), #040A12);
color:rgba(255,255,255,.9);
padding:44px 0 26px;
}
.footer .container{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px}
.footer .brandline{display:flex; align-items:center; gap:12px; justify-content:center}
.footer .brandline > div{text-align:center}
.footer .footer-note{text-align:center}
.footer img{width:44px;height:44px}
.footer a{opacity:.92}
.footer a:hover{opacity:1}
.footer .cols{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px}
.footer h4{margin:0 0 10px; color:white}
.footer ul{margin:0; padding:0; list-style:none; display:grid; gap:8px; color:rgba(255,255,255,.82)}
.footer .bottom{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.14); margin-top:22px; padding-top:16px; font-size:13px; color:rgba(255,255,255,.72); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.pagehead{
padding:54px 0 26px;
background:linear-gradient(135deg, rgba(10,61,98,.10), rgba(29,209,161,.10));
border-bottom:1px solid var(--gray-200);
}
.pagehead h1{margin:0 0 8px; font-size:34px}
.pagehead p{margin:0; color:var(--gray)}
.form{
display:grid; gap:12px; margin-top:10px
}
.input, textarea{
width:100%; padding:12px 12px; border-radius:14px; border:1px solid var(--gray-200);
font:inherit; background:#fff
}
textarea{min-height:130px; resize:vertical}
.form .row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.note{color:var(--gray); font-size:13px}
@media (max-width: 980px){
.grid.cards{grid-template-columns: repeat(2, minmax(0,1fr))}
.hero .container{grid-template-columns: 1fr; }
}
@media (max-width: 720px){
.nav{display:none}
.mobile-menu-btn{display:inline-flex}
.nav.open{
display:flex;
position:static;
margin-top:10px;
width:100%;
flex-direction:column;
background:#fff;
border:1px solid var(--gray-200);
border-radius:18px;
padding:12px;
box-shadow: var(--shadow);
}
.hero h1{font-size:36px}
.split{grid-template-columns: 1fr}
.footer .container{grid-template-columns: 1fr}
.footer .cols{grid-template-columns: 1fr}
.form .row{grid-template-columns: 1fr}
}
.btn.small{padding:10px 14px;font-size:14px}
/* RSS ticker */
.rss-ticker{
background: linear-gradient(90deg, rgba(10,61,98,.08), rgba(120,130,140,.14));
border-bottom: 1px solid rgba(120,130,140,.25);
}
.rss-ticker .container{
display:flex; align-items:center; gap:14px;
padding:10px 0;
}
.rss-label{
font-weight:800;
color:var(--navy);
white-space:nowrap;
font-size:13px;
letter-spacing:.02em;
background: rgba(255,255,255,.6);
border:1px solid rgba(120,130,140,.25);
padding:6px 10px;
border-radius:999px;
}
/* === v55: Footer text formatting polish === */
.footer-note{
margin-top:14px;
color:rgba(255,255,255,.78);
font-size:14px;
}
/* Make the footer contact block consistent even when generated inline */
.footer .muted{ margin:0; color:rgba(255,255,255,.82); }
.footer a{ text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
.footer strong{ color:#fff; }
.footer div[style*="display:grid"][style*="gap:6px"]{
margin-top:10px !important;
gap:10px !important;
font-size:14px !important;
}
.footer div[style*="display:grid"][style*="gap:6px"] > div,
.footer div[style*="display:grid"][style*="gap:6px"] > p{
margin:0;
padding:10px 12px;
border:1px solid rgba(255,255,255,.14);
border-radius:14px;
background:rgba(255,255,255,.04);
}
/* === v55: Mobile navigation – single fixed Menu button with an off-canvas drawer === */
.mobile-menu-btn{
display:none;
border:1px solid rgba(10,61,98,.18);
background: rgba(255,255,255,.92);
color: #0a3d62;
font-weight: 900;
padding: 12px 14px;
border-radius: 999px;
box-shadow: 0 14px 30px rgba(2, 6, 23, .18);
}
@media (max-width: 820px){
/* Keep the Menu button visible while scrolling */
.mobile-menu-btn{
display: inline-flex !important;
position: fixed;
right: 18px;
bottom: 18px;
z-index: 1002;
}
/* Off-canvas nav drawer */
header.header nav.nav{
position: fixed !important;
top: 0;
left: 0;
bottom: 0;
right: auto;
width: min(82vw, 360px);
z-index: 1001;
padding: calc(env(safe-area-inset-top) + 12px) 18px 20px !important;
margin: 0 !important;
/* Mobile drawer uses a dark background so nav text can be white */
background: linear-gradient(180deg, rgba(10,61,98,.98), rgba(7,35,56,.98)) !important;
border: 0 !important;
box-shadow: none !important;
overflow-y: auto;
overflow-x: hidden;
transform: translateX(-110%);
transition: transform .24s ease;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
header.header nav.nav.open{ transform: translateX(0); }
body.menu-open{ overflow: hidden; }
/* Mobile-only nav text color */
header.header nav.nav a,
header.header nav.nav button.nav-dropbtn,
header.header nav.nav a.nav-support{
width: 100% !important;
justify-content: flex-start !important;
text-align: left !important;
color: rgba(255,255,255,.95) !important;
}
header.header nav.nav a:hover,
header.header nav.nav a:focus,
header.header nav.nav button.nav-dropbtn:hover,
header.header nav.nav a.nav-support:hover{
background: rgba(255,255,255,.10) !important;
}
/* Show ALL dropdown links for easy navigation */
header.header nav.nav button.nav-dropbtn{
background: transparent !important;
border: 0 !important;
padding: 12px 6px !important;
font-weight: 900 !important;
pointer-events: none;
}
header.header nav.nav .nav-dropmenu{
position: static !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
min-width: 100% !important;
box-shadow: none !important;
border: 0 !important;
background: transparent !important;
padding: 0 0 8px 10px !important;
margin: 0 0 10px 0 !important;
}
/* Optional: soften spacing between sections */
header.header nav.nav .nav-dropdown{
padding: 6px 8px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 16px;
background: rgba(255,255,255,.06);
}
header.header nav.nav .nav-dropmenu a{
color: rgba(255,255,255,.92) !important;
}
header.header nav.nav .nav-dropdivider{
background: rgba(255,255,255,.18) !important;
}
/* Mobile-only: add a subtle white glow behind the brand text for contrast */
header.header .brand strong,
header.header .brand span{
text-shadow:
0 1px 2px rgba(255,255,255,.90),
0 0 12px rgba(255,255,255,.55);
}
}
.rss-window{
overflow:hidden;
flex:1;
position:relative;
border-radius:999px;
background: rgba(255,255,255,.55);
border:1px solid rgba(120,130,140,.20);
}
.rss-track{
display:inline-flex;
gap:26px;
padding:8px 14px;
white-space:nowrap;
will-change: transform;
animation: rssScroll var(--rss-scroll-duration, 48s) linear infinite;
}
.rss-track a{ color:var(--navy-900); text-decoration:none; font-weight:600; }
.rss-track a:hover{ text-decoration:underline; }
@keyframes rssScroll{
0%{ transform: translateX(0); }
100%{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
.rss-track{ animation:none; }
}
.rss-window:hover .rss-track{animation-play-state:paused;}
/* All Cities dropdown */
.nav-dropdown{ position:relative; display:inline-block; }
.nav-dropbtn{ background:transparent; border:0; font:inherit; color:var(--text); padding:10px 12px; border-radius:10px; cursor:pointer; }
.nav-dropbtn:hover{ background:rgba(0,0,0,.04); }
.nav-dropmenu{ position:absolute; top:100%; left:0; min-width:220px; background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 10px 30px rgba(0,0,0,.12); border-radius:14px; padding:8px; display:none; z-index:50; }
.nav-dropmenu a{ display:block; padding:10px 12px; border-radius:10px; color:var(--text); text-decoration:none; white-space:nowrap; }
.nav-dropmenu a:hover{ background:rgba(0,0,0,.05); }
.nav-dropdown:hover .nav-dropmenu{ display:block; }
.nav-dropmenu.open{ display:block; }
@media (max-width: 860px){
.nav-dropdown{ width:100%; }
.nav-dropmenu{ position:static; box-shadow:none; border:none; display:none; padding:0; }
.nav-dropmenu a{ padding-left:18px; }
.nav-dropdown:hover .nav-dropmenu{ display:none; }
.nav-dropmenu.open{ display:block; }
}
/* City highlights */
.city-highlights{ background:linear-gradient(180deg, #f7f7f9, #ffffff); border-top:1px solid rgba(0,0,0,.06); }
.city-rotator{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.city-pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background:#fff; text-decoration:none; color:var(--text); font-weight:600; }
.city-pill.active{ border-color: var(--brand); box-shadow:0 8px 18px rgba(0,0,0,.10); }
.city-pill::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--brand-accent); display:inline-block; }
/* Landing page tweaks */
.page-landing .hero-logo{ max-width:360px; width:100%; height:auto; filter: drop-shadow(0 14px 24px rgba(0,0,0,.15)); }
/* Logo size override for readability */
.brand img{height:72px; width:auto;}
@media (max-width:860px){.brand img{height:64px;}}
.icon-inline{width:64px; height:64px; display:block;}
/* Scale brand text for readability */
.brand strong{ font-size: 1.25rem; letter-spacing: .2px; }
.brand span{ font-size: .95rem; opacity: .9; }
@media (min-width: 861px){
.brand strong{ font-size: 1.45rem; }
.brand span{ font-size: 1.05rem; }
}
/* Brand subtitle: keep on one line and slightly smaller */
.brand span{ font-size: .85rem; white-space: nowrap; }
@media (min-width: 861px){
.brand span{ font-size: .9rem; }
}
/* Larger cropped logo */
.brand img{ height: 86px; width: auto; }
@media (max-width: 860px){
.brand img{ height: 72px; }
}
.nav-dropdivider{ height:1px; background:rgba(0,0,0,.08); margin:6px 6px; border-radius:1px; }
/* Header CTA: keep readable on hover + fit on one line */
a.cta{
font-size: .9rem;
padding: 10px 14px;
white-space: nowrap;
}
a.cta:hover{
filter: brightness(0.95);
box-shadow: 0 10px 22px rgba(0,0,0,.14);
}
/* Increase logo size by 150% (from previous sizes) */
.brand img{ height: 129px; width:auto; }
@media (max-width: 860px){
.brand img{ height: 108px; }
}
/* Slow RSS ticker movement slightly */
.rss-track{
animation-duration: 55s;
}
.btn.primary:hover{ filter: brightness(0.95); }
/* Header phone link */
.nav-phone{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 12px;
border-radius:10px;
text-decoration:none;
font-weight:700;
color:var(--text);
white-space:nowrap;
border:1px solid rgba(0,0,0,.10);
background:rgba(255,255,255,.65);
}
.nav-phone:hover{ background:#fff; box-shadow:0 10px 22px rgba(0,0,0,.10); }
/* Cyber-themed nav button backdrop */
.nav a, .nav button.nav-dropbtn, a.cta{
position: relative;
}
.nav a::before, .nav button.nav-dropbtn::before, a.cta::before{
content:"";
position:absolute;
inset:-2px -2px;
border-radius:12px;
background:
radial-gradient(circle at 15% 30%, rgba(29,209,161,.28), transparent 42%),
radial-gradient(circle at 85% 70%, rgba(10,61,98,.22), transparent 48%),
linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
opacity:.0;
transform: translateY(1px);
transition: opacity .2s ease, transform .2s ease;
pointer-events:none;
}
.nav a:hover::before, .nav button.nav-dropbtn:hover::before{
opacity:1;
transform: translateY(0);
}
/* Add subtle "circuit" underline effect */
.nav a, .nav button.nav-dropbtn{
background-image:
linear-gradient(90deg, rgba(10,61,98,.22) 0%, rgba(29,209,161,.18) 60%, rgba(10,61,98,.12) 100%);
background-size: 0% 2px;
background-repeat:no-repeat;
background-position: 12px calc(100% - 6px);
transition: background-size .25s ease;
}
.nav a:hover, .nav button.nav-dropbtn:hover{
background-size: calc(100% - 24px) 2px;
}
/* Get Support hover: dark gray */
a.cta:hover{
background: #2f2f2f !important;
color: #fff !important;
border-color: #2f2f2f !important;
}
/* Contact list styling */
.contact-list{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.contact-list a{ font-weight:700; }
/* Ensure city rotator always visible */
.city-highlights{ display:block; }
/* Tap-to-call button */
.tap-call{ background:linear-gradient(135deg, rgba(10,61,98,.06), rgba(29,209,161,.08)); }
.btn.call-now{
display:inline-block;
margin-top:12px;
padding:14px 28px;
border-radius:14px;
background:#0a3d62;
color:#fff;
font-size:1.1rem;
font-weight:800;
letter-spacing:.3px;
text-decoration:none;
box-shadow:0 14px 28px rgba(0,0,0,.18);
}
.btn.call-now:hover{ background:#2f2f2f; }
/* Topbar */
.topbar{ background: #8fbb22; border-bottom:1px solid rgba(0,0,0,.08); }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.topbar-loc{ font-weight:800; color:var(--navy); letter-spacing:.2px; }
.topbar-cta{ text-decoration:none; font-weight:800; padding:8px 12px; border-radius:12px; background:var(--brand); color:#8fbb22; white-space:nowrap; }
.topbar-cta:hover{ background:#8fbb22; }
/* Nav cyber background behind buttons */
.nav a, .nav button.nav-dropbtn{ border-radius:12px; }
.nav a:hover, .nav button.nav-dropbtn:hover{ background: rgba(10,61,98,.06); }
/* Hero illustration */
.hero-illustration{ width:100%; max-width:420px; height:auto; border-radius:18px; box-shadow:0 18px 34px rgba(0,0,0,.18); }
/* Services aside replacement */
.cyber-aside{ background: linear-gradient(135deg, rgba(10,61,98,.92), rgba(29,209,161,.42)); color:#8fbb22; border:none; }
.cyber-aside h3{ margin:0 0 10px; font-size:1.15rem; }
.aside-grid{ display:grid; grid-template-columns: 160px 1fr; gap:16px; align-items:center; }
.aside-illustration{ width:160px; height:auto; border-radius:16px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.aside-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.aside-list strong{ color:#fff; }
@media(max-width:860px){
.aside-grid{ grid-template-columns: 1fr; }
.aside-illustration{ width:100%; max-width:360px; }
}
.topbar{ background: var(--brand); color:#8fbb22; border-bottom:none; }
.topbar-loc{ color:#8fbb22; }
.topbar-cta{ background:#8fbb22; color:var(--brand); }
.topbar-cta:hover{ background:#8fbb22; color:#8fbb22; }
.topbar::after{ opacity:.06; }
/* Topbar matches the 'Latest security news' pill styling */
.topbar .container{ position: relative; z-index: 2; }
.topbar-cta{
background: var(--navy);
color:#8fbb22;
}
.topbar-cta:hover{
background:#8fbb22;
color:#8fbb22;
}
/* Visible cyber scanline + glow animation (subtle) */
.topbar::before{
content:"";
position:absolute;
inset:-40% -60%;
background:
radial-gradient(circle at 30% 30%, rgba(29,209,161,.30), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(10,61,98,.22), transparent 60%),
linear-gradient(90deg, transparent 0%, rgba(29,209,161,.22) 46%, rgba(255,255,255,.18) 50%, rgba(29,209,161,.22) 54%, transparent 100%);
transform: translateX(-40%);
opacity:.90;
z-index: 1;
pointer-events:none;
}
.topbar::after{
content:"";
position:absolute;
inset:0;
background:
repeating-linear-gradient(180deg, rgba(10,61,98,.08) 0px, rgba(10,61,98,.08) 1px, transparent 2px, transparent 6px);
opacity:.18;
z-index: 1;
pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
.topbar::before{ opacity:.90; }
.topbar::after{ opacity:.10; }
}
/* Disable topbar + nav animations (per request) */
.topbar::before,
.topbar::after,
.nav::before,
.nav::after,
nav.nav::before,
nav.nav::after,
header.header::before,
header.header::after{
animation: none !important;
transition: none !important;
}
.topbar::before,
.topbar::after{
content:none !important;
}
.nav a,
.nav button.nav-dropbtn,
.nav a::before,
.nav a::after,
.nav button.nav-dropbtn::before,
.nav button.nav-dropbtn::after{
animation: none !important;
transition: none !important;
}
/* HARD OVERRIDE v2: Topbar background matches the TEXT color of "Latest security news" */
.topbar{
background: var(--navy) !important;
color:#8fbb22 !important;
border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.topbar a, .topbar span, .topbar div{
color:#8fbb22 !important;
}
/* Navigation spacing tightened */
nav.nav{
gap:8px !important;
}
nav.nav a, nav.nav button.nav-dropbtn{
padding:8px 10px !important;
margin:0 !important;
}
/* Cyber digital art background behind navigation */
header.header{
position:sticky;
}
header.header .container{
position:relative;
}
header.header::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:120px;
background-image:url("assets/nav-cyber-bg.svg");
background-repeat:repeat-x;
background-size:800px 120px;
opacity:.45;
pointer-events:none;
}
/* Ensure nav and logo sit above background art */
.brand, nav.nav, .header-inner{
position:relative;
z-index:2;
}
/* Add cyber hero image behind navigation */
header.header::after{
z-index:1;
}
.header-inner, .brand, nav.nav{
position:relative;
z-index:2;
}
/* Realistic light cyber hero background behind navigation (scaled to show full image) */
/* Ensure content stays readable */
.header-inner, .brand, nav.nav{
position:relative;
z-index:2;
}
/* Slightly darker nav text for contrast on light bg */
nav.nav a, nav.nav button.nav-dropbtn{
color:#0a3d62 !important;
}
/* Realistic cyber hero background ONLY behind navigation (not top bar) */
.header-inner{
position:relative;
}
.header-inner::before{
content:"";
position:absolute;
left:0; right:0; top:0;
height:180px;
background-image:
linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.5)),
url("assets/nav-cyber-hero-bg-realistic.png");
background-repeat:no-repeat;
background-size:contain;
background-position:center right;
pointer-events:none;
z-index:0;
}
.brand, nav.nav, .header-cta{
position:relative;
z-index:2;
}
/* --- Header background visibility fix (nav area only) --- */
header.header{ position: relative; }
.header-inner{
position: relative;
min-height: 120px;
padding-top: 10px;
padding-bottom: 10px;
}
.header-inner::before{
/* ensure it actually renders and is visible */
opacity: 1 !important;
display:block;
}
/* Keep topbar clean */
.topbar{ position: relative; z-index: 3; }
header.header .topbar + .container{ position: relative; z-index: 2; }
/* Request Support button in nav */
.nav-support{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:12px;
font-weight:900;
white-space:nowrap;
border:1px solid rgba(255,255,255,.18);
background: linear-gradient(180deg, rgba(143,187,34ự,1) 0%, rgba(242,183,5,1) 100%);
}
.nav-support{ color:#8fbb22 !important; }
.nav-support:hover{ background:#2f2f2f !important; color:#fff !important; border-color:#2f2f2f !important; }
/* Tighter, cleaner nav alignment */
nav.nav{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:8px;
}
.brand{ flex: 0 0 auto; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.header-inner nav.nav{ flex: 1 1 auto; }
/* --- Mobile optimization --- */
@media (max-width: 860px){
.header-inner{
flex-direction:column;
align-items:flex-start;
gap:10px;
min-height: 0;
}
.brand img{ height:64px; }
nav.nav{
width:100%;
justify-content:flex-start;
gap:6px;
}
nav.nav a, nav.nav button.nav-dropbtn, .nav-support{
font-size: .92rem;
padding:8px 10px;
}
.nav-dropmenu{
position: static;
min-width: 100%;
margin-top: 8px;
}
.rss-ticker{ padding:8px 0; }
.hero-grid, .cards.two{ grid-template-columns: 1fr; }
.strip-items{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
nav.nav{ gap:6px; }
.strip-items{ grid-template-columns: 1fr; }
.hero{ padding-top: 18px; }
.container{ width: min(1120px, 94vw); }
}
/* --- Thin page hero / blue banner areas site-wide --- */
.page-hero,
.page-header,
.section-hero,
.hero-banner,
.service-hero{
padding-top: 26px !important;
padding-bottom: 26px !important;
min-height: auto !important;
}
.page-hero h1,
.page-header h1,
.section-hero h1,
.hero-banner h1,
.service-hero h1{
margin-bottom: 6px !important;
}
.page-hero p,
.page-header p,
.section-hero p,
.hero-banner p,
.service-hero p{
margin-top: 4px !important;
margin-bottom: 0 !important;
}
/* ===== Compact Page Headers (thin blue area) ===== */
.pagehead{
padding: 18px 0 14px !important;
background: linear-gradient(180deg, rgba(10,61,98,.16), rgba(10,61,98,.06)) !important;
}
.pagehead h1{
margin: 6px 0 4px !important;
}
/* Decorative divider line under page heads */
.pagehead::after{
content:"";
display:block;
height:3px;
margin-top:12px;
background: linear-gradient(90deg, transparent, rgba(242,183,5,.75), rgba(29,209,161,.55), transparent);
border-radius: 99px;
opacity:.9;
}
/* Breadcrumb-style bar */
.breadcrumbs{
display:flex;
align-items:center;
gap:8px;
font-weight:800;
font-size: .88rem;
color: rgba(255,255,255,.78);
margin-bottom: 6px;
}
.breadcrumbs a{
color: rgba(255,255,255,.92);
}
.breadcrumbs a:hover{ color: var(--accent); }
.crumb-sep{ opacity:.55; }
.crumb-current{ opacity:.92; }
/* Collapsible subtitle: expanded on desktop, collapsible on mobile */
.pagehead-details{
margin: 6px 0 0;
}
.pagehead-details summary{
display:none;
}
.pagehead-details p{
margin: 0 !important;
color: rgba(255,255,255,.80);
font-weight:700;
max-width: 70ch;
}
/* On mobile, collapse the subtitle by default and show a small toggle */
@media (max-width: 640px){
.pagehead{ padding: 14px 0 10px !important; }
.pagehead-details summary{
display:inline-flex;
cursor:pointer;
font-weight:900;
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
padding:8px 10px;
border-radius: 12px;
margin-bottom: 8px;
list-style:none;
}
.pagehead-details[open] summary{ background: rgba(255,255,255,.10); }
}
/* ===== FINAL: Make cyber guy background visible behind navigation ===== */
.header-inner{
min-height: 170px !important;
overflow: visible !important;
}
.header-inner::before{
height: 190px !important;
background-image:
linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.22)),
url("assets/nav-cyber-hero-bg-realistic.png") !important;
background-size: cover !important; /* show subject clearly */
background-position: right center !important;
opacity: 1 !important;
}
/* keep nav readable on lighter image */
nav.nav a, nav.nav button.nav-dropbtn{
background: rgba(255,255,255,.55);
border: 1px solid rgba(10,61,98,.18);
border-radius: 12px;
}
nav.nav a:hover, nav.nav button.nav-dropbtn:hover{
background: rgba(255,255,255,.72);
}
/* ===== Topbar: falling 1s and 0s (matrix) effect ONLY in topbar ===== */
.topbar{
position: relative;
overflow: hidden;
}
.topbar::before{
content:"";
position:absolute;
inset:-40px 0 -40px 0;
background-image: url("assets/matrix-ones-zeros.svg");
background-repeat: repeat;
background-size: 520px 160px;
opacity: .90;
pointer-events:none;
animation: matrixFall 7.5s linear infinite;
z-index: 0;
mix-blend-mode: multiply;
}
.topbar .container{ position: relative; z-index: 2; }
@keyframes matrixFall{
0%{ background-position: 0 -220px; }
100%{ background-position: 0 220px; }
}
@media (prefers-reduced-motion: reduce){
.topbar::before{ animation:none; opacity:.90; }
}
/* ===== FIX: Nav background was targeting .header-inner (not present in v15). Apply to header > .container instead ===== */
header.header{ position: relative; }
header.header > .container{
position: relative;
overflow: hidden;
}
/* Background image ONLY behind the main header row (not the topbar) */
header.header > .container::before{
content:"" !important;
position:absolute;
left:0; right:0; top:0;
height:190px;
background-image:
linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.24)),
url("assets/nav-cyber-hero-bg-realistic.png");
background-repeat:no-repeat;
background-size: cover;
background-position: right center;
opacity: 1;
pointer-events:none;
z-index: 0;
}
/* Keep header elements above */
header.header > .container > *{
position: relative;
z-index: 2;
}
/* Make nav items readable over the image */
header.header > .container nav.nav a,
header.header > .container nav.nav button.nav-dropbtn{
background: rgba(255,255,255,.58);
border: 1px solid rgba(10,61,98,.18);
border-radius: 12px;
}
header.header > .container nav.nav a:hover,
header.header > .container nav.nav button.nav-dropbtn:hover{
background: rgba(255,255,255,.75);
}
/* ===== FIX: Re-enable topbar matrix layer (previous build disabled topbar pseudo-elements) ===== */
.topbar{
position: relative !important;
overflow: hidden !important;
}
.topbar::before{
content:"" !important; /* overrides content:none */
position:absolute !important;
inset:-40px 0 -40px 0 !important;
background-image: url("assets/matrix-ones-zeros.svg") !important;
background-repeat: repeat !important;
background-size: 520px 160px !important;
opacity: .55 !important;
pointer-events:none !important;
animation: matrixFall 7.5s linear infinite !important;
z-index: 0 !important;
mix-blend-mode: multiply !important;
}
.topbar::after{
content:none !important;
}
.topbar .container{
position: relative !important;
z-index: 2 !important;
}
@keyframes matrixFall{
0%{ background-position: 0 -220px; }
100%{ background-position: 0 220px; }
}
@media (prefers-reduced-motion: reduce){
.topbar::before{ animation:none !important; opacity:.25 !important; }
}
/* === Nav background updated to realistic photo === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.30)),
url("assets/nav-cyber-hero-bg-photo.png") !important;
background-repeat:no-repeat !important;
background-size: cover !important;
background-position: right 35% center !important;
}
/* === Nav background: zoomed out (show full person) + trendy subtle motion === */
header.header > .container::before{
height: 240px !important;
background-image:
linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.34)),
url("assets/nav-cyber-hero-bg-photo.png") !important;
background-repeat: no-repeat !important;
background-size: contain !important; /* show full subject */
background-position: right center !important;
transform-origin: center right;
will-change: transform, background-position;
animation:none !important;
}
@media (prefers-reduced-motion: reduce){
header.header > .container::before{ animation:none !important; transform:none !important; }
}
/* === Brand/tagline colors match logo palette === */
.brand strong{
color: #8fbb22 !important; /* logo blue */
letter-spacing: .2px;
}
.brand span{
color: #8fbb22 !important; /* logo green */
font-weight: 900 !important;
}
/* If there is any small subtext under nav, harmonize */
header.header nav.nav a, header.header nav.nav button.nav-dropbtn{
color: #0a3d62 !important;
}
/* ===== Nav background v5: static image, fully zoomed out, more visible, animated overlay inside image ===== */
header.header > .container{
position: relative;
overflow: hidden;
}
/* Static photo background (no movement) */
header.header > .container::before{
content:"" !important;
position:absolute;
left:0; right:0; top:0;
height: 170px !important; /* thinner bar height */
background-image:
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10)), /* less transparency (more visible photo) */
url("assets/nav-cyber-hero-bg-photo.png") !important;
background-repeat:no-repeat !important;
background-size: contain !important; /* show entire person */
background-position: right 10px center !important;
opacity: 1 !important;
transform: none !important;
filter: saturate(1.08) contrast(1.06) brightness(1.02);
animation: none !important; /* static */
pointer-events:none;
z-index: 0;
}
/* Animated cyber overlay INSIDE the image area (scanlines + soft shimmer) */
header.header > .container::after{
content:"" !important;
position:absolute;
left:0; right:0; top:0;
height: 170px !important;
background:
repeating-linear-gradient(180deg,
rgba(0,0,0,.08) 0px,
rgba(0,0,0,.08) 1px,
transparent 2px,
transparent 7px),
linear-gradient(90deg, transparent 0%, rgba(29,209,161,.18) 45%, rgba(255,255,255,.10) 50%, rgba(29,209,161,.18) 55%, transparent 100%);
background-size: auto, 380px 100%;
background-repeat: repeat, no-repeat;
background-position: 0 0, -420px 0;
mix-blend-mode: multiply;
opacity: .55;
pointer-events:none;
z-index: 1;
animation: navOverlaySweep 7.5s linear infinite;
}
@keyframes navOverlaySweep{
0%{ background-position: 0 0, -420px 0; }
100%{ background-position: 0 0, calc(100% + 420px) 0; }
}
header.header > .container > *{
position: relative;
z-index: 2;
}
@media (prefers-reduced-motion: reduce){
header.header > .container::after{ animation:none !important; opacity:.35 !important; }
}
/* ===== v6 regenerated nav background image (fit to bar) + 75% transparency ===== */
header.header > .container::before{
height: 170px !important;
background-image:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)),
url("assets/nav-cyber-hero-bg-photo-v6.png") !important;
background-repeat:no-repeat !important;
background-size: cover !important;
background-position: right center !important;
opacity: .75 !important; /* 75% transparency */
}
/* ===== Dropdown fix: allow menus to extend and appear above backgrounds ===== */
header.header > .container{
overflow: visible !important; /* prevents clipping */
}
.nav-dropmenu{
z-index: 9999 !important;
position: absolute !important;
}
header.header > .container::before,
header.header > .container::after{
z-index: 0 !important;
}
header.header > .container > *{
position: relative;
z-index: 2 !important;
}
/* ===== Nav background full-width to cover all navigation buttons ===== */
header.header{
position: relative;
}
/* Make the main header container span full viewport width */
header.header > .container{
max-width: 100% !important;
width: 100% !important;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
/* Stretch background layer edge-to-edge */
header.header > .container::before,
header.header > .container::after{
left: 0 !important;
right: 0 !important;
width: 100% !important;
}
/* Keep inner content constrained for readability */
.header-inner,
header.header nav.nav,
header.header .brand,
header.header .header-cta{
max-width: 1320px;
margin-left: auto;
margin-right: auto;
}
/* === v8 nav background with logo on laptop screen === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)),
url("assets/nav-cyber-hero-bg-photo-v8.png") !important;
}
/* === Nav background opacity set to 95% === */
header.header > .container::before{
opacity: .95 !important;
}
/* === v10: Nav background regenerated w/ logo on laptop screen + full width coverage === */
header.header > .container{
max-width: 100% !important;
width: 100% !important;
}
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)),
url("assets/nav-cyber-hero-bg-photo-v10.png") !important;
background-repeat: no-repeat !important;
background-size: cover !important; /* cover behind all nav buttons */
background-position: center right !important;
opacity: .95 !important;
}
/* keep dropdowns above background */
.nav-dropmenu{ z-index: 9999 !important; }
header.header > .container::before, header.header > .container::after{ z-index: 0 !important; }
header.header > .container > *{ position: relative; z-index: 2 !important; }
/* === v11: Nav background image covers 60% of nav width from right === */
header.header > .container::before{
background-size: 60% auto !important; /* 60% width of nav area */
background-position: right center !important;
background-repeat: no-repeat !important;
opacity: .95 !important;
}
/* === v12: Nav background fills full height and spans right 60% of nav bar === */
header.header{
position: relative;
}
/* Ensure header row has a defined height for the background to fill */
header.header > .container{
min-height: 170px !important;
position: relative;
}
/* Background layer */
header.header > .container::before{
content:"" !important;
position:absolute;
top:0; bottom:0; /* fill full nav height */
right:0;
width:60% !important; /* exactly 60% of nav width */
background-image:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)),
url("assets/nav-cyber-hero-bg-photo-v10.png") !important;
background-repeat:no-repeat !important;
background-size: cover !important; /* fill full height */
background-position: center right !important;
opacity:.95 !important;
pointer-events:none;
z-index:0;
}
/* Keep nav content above background */
header.header > .container > *{
position: relative;
z-index:2;
}
/* Ensure dropdowns are not hidden */
.nav-dropmenu{
z-index:9999 !important;
}
/* === v13: Nav background image spans to far right edge, no logos/text inside image === */
header.header > .container::before{
right:0 !important;
left:auto !important;
width:60% !important; /* keep 60% area but ensure it reaches far right edge */
background-image:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)),
url("assets/nav-cyber-hero-bg-photo-v13.png") !important;
background-repeat:no-repeat !important;
background-size: cover !important;
background-position: right center !important;
opacity:.95 !important;
}
/* === v14: keep image subject position, but extend canvas to right edge === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)),
url("assets/nav-cyber-hero-bg-photo-v14.png") !important;
background-position: right center !important;
background-size: cover !important;
}
/* === v15: unique dark nav background blended w/ logo colors, spans right 60% and fills height === */
header.header > .container{
min-height: 170px !important;
position: relative;
}
header.header > .container::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
right:0 !important;
width:60% !important;
background-image:
linear-gradient(180deg, rgba(7,16,32,.18), rgba(7,16,32,.08)),
url("assets/nav-cyber-hero-bg-unique-dark-v15.png") !important;
background-repeat:no-repeat !important;
background-size: cover !important;
background-position: center center !important;
opacity: .95 !important;
pointer-events:none !important;
z-index:0 !important;
}
header.header > .container > *{ position: relative; z-index: 2 !important; }
.nav-dropmenu{ z-index: 9999 !important; }
/* === v16: brighter nav background image for readability === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(7,16,32,.10), rgba(7,16,32,.04)),
url("assets/nav-cyber-hero-bg-unique-light-v16.png") !important;
}
/* === v16: bold animated cyber overlay confined to the 60% background panel === */
header.header > .container::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
right:0 !important;
width:60% !important;
pointer-events:none !important;
z-index:1 !important;
background:
repeating-linear-gradient(180deg,
rgba(255,255,255,.14) 0px,
rgba(255,255,255,.14) 1px,
transparent 2px,
transparent 8px),
linear-gradient(90deg,
rgba(143,187,34,0) 0%,
rgba(143,187,34,.22) 42%,
rgba(242,183,5,.28) 50%,
rgba(10,61,98,.22) 58%,
rgba(10,61,98,0) 100%);
background-size: auto, 520px 100%;
background-repeat: repeat, no-repeat;
mix-blend-mode: screen;
opacity: .90;
animation: cyberSweepPanel 2.8s linear infinite, cyberFlicker 5.2s steps(2,end) infinite;
}
@keyframes cyberSweepPanel {
0% { background-position: 0 0, -560px 0; }
100% { background-position: 0 0, calc(100% + 560px) 0; }
}
@keyframes cyberFlicker {
0%, 92% { opacity: .90; }
93% { opacity: .45; }
94% { opacity: .95; }
96% { opacity: .65; }
100% { opacity: .90; }
}
@media (prefers-reduced-motion: reduce){
header.header > .container::after{
animation: none !important;
opacity: .55 !important;
}
}
/* === v17: Nav background image recolored to match site palette === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(7,16,32,.22), rgba(7,16,32,.10)),
url("assets/nav-cyber-hero-bg-site-v17.png") !important;
}
/* v17: Replace prior bold sweep/flicker with a cleaner "digital shimmer" animation */
header.header > .container::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
right:0 !important;
width:60% !important;
pointer-events:none !important;
z-index:1 !important;
background:
radial-gradient(circle at 10% 40%, rgba(255,255,255,.18), transparent 55%),
radial-gradient(circle at 80% 30%, rgba(10,61,98,.22), transparent 60%),
linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 45%, rgba(255,255,255,0) 100%),
repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0px, rgba(255,255,255,.10) 1px, transparent 2px, transparent 10px);
background-size: 100% 100%, 100% 100%, 420px 100%, auto;
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
mix-blend-mode: screen;
opacity: .75;
animation: shimmerPass 4.5s ease-in-out infinite;
}
@keyframes shimmerPass{
0% { background-position: 0 0, 0 0, -520px 0, 0 0; filter: saturate(1) contrast(1); }
50% { background-position: 0 0, 0 0, calc(100% + 520px) 0, 0 0; filter: saturate(1.05) contrast(1.06); }
100% { background-position: 0 0, 0 0, -520px 0, 0 0; filter: saturate(1) contrast(1); }
}
@media (prefers-reduced-motion: reduce){
header.header > .container::after{ animation:none !important; opacity:.45 !important; }
}
/* === v17: Header brand text styling to match logo vibe (bold, tight, navy) === */
.brand strong{
color: #8fbb22 !important;
font-weight: 900 !important;
letter-spacing: .6px !important;
text-transform: none;
}
.brand span{
color: #8fbb22 !important;
font-weight: 900 !important;
letter-spacing: .3px !important;
}
/* === v17: Nav button colors -> lighter gray like RSS section === */
header.header nav.nav a,
header.header nav.nav button.nav-dropbtn,
header.header nav.nav a.nav-support{
background: rgba(255,255,255,.65) !important;
border: 1px solid rgba(10,61,98,.14) !important;
color: #0a3d62 !important;
}
header.header nav.nav a:hover,
header.header nav.nav button.nav-dropbtn:hover,
header.header nav.nav a.nav-support:hover{
background: rgba(255,255,255,.80) !important; /* same hover feel as others */
border-color: rgba(10,61,98,.22) !important;
}
/* === v17: Match request support hover to others (no dark gray override) === */
.nav-support:hover{ color:#0a3d62 !important; }
/* === v17: Mobile + tablet rewrite (responsive header/nav) === */
.mobile-nav-toggle{
display:none;
border:1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.14);
color:#fff;
font-weight:900;
padding:10px 12px;
border-radius:12px;
}
/* Tablets */
@media (max-width: 1024px){
header.header > .container{ padding-left: 16px !important; padding-right: 16px !important; }
.brand img{ height: 56px; }
nav.nav{ gap:6px; }
}
/* Phones + small tablets */
@media (max-width: 820px){
.mobile-nav-toggle{ display:inline-flex; align-items:center; gap:8px; }
header.header nav.nav{
width:100%;
justify-content:flex-start;
flex-direction: column;
align-items: stretch;
gap:8px;
margin-top: 10px;
display: none; /* toggled by JS */
}
header.header nav.nav.is-open{ display:flex; }
header.header nav.nav a,
header.header nav.nav button.nav-dropbtn,
header.header nav.nav a.nav-support{
width:100%;
justify-content:center;
text-align:center;
padding:12px 12px;
}
.nav-dropmenu{
position: static !important;
min-width: 100% !important;
box-shadow: none !important;
margin-top: 8px;
}
.nav-drop{
width: 100%;
}
}
/* Very small phones */
@media (max-width: 480px){
.brand img{ height: 52px; }
header.header > .container::before,
header.header > .container::after{ width: 100% !important; } /* on small screens, bg spans full width */
}
/* === v18: Force updated nav background asset (site palette) === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(7,16,32,.22), rgba(7,16,32,.10)),
url("assets/nav-cyber-hero-bg-site-v18.png") !important;
}
/* Nav button base colors (lighter gray like RSS) */
header.header nav.nav a,
header.header nav.nav button.nav-dropbtn{
background: rgba(255,255,255,.72) !important;
border: 1px solid rgba(10,61,98,.14) !important;
color: #0a3d62 !important;
}
/* Request Support button = logo green */
header.header nav.nav a.nav-support{
background: #8fbb22 !important;
border-color: rgba(10,61,98,.10) !important;
color: #061026 !important;
}
/* Hover for ALL nav buttons = logo green */
header.header nav.nav a:hover,
header.header nav.nav button.nav-dropbtn:hover,
header.header nav.nav a.nav-support:hover{
background: #8fbb22 !important;
border-color: rgba(10,61,98,.22) !important;
color: #061026 !important;
}
/* Mobile static navigation (no hamburger, always visible) */
@media (max-width: 820px){
.mobile-nav-toggle{ display:none !important; }
header.header nav.nav{
display:flex !important;
width:100% !important;
flex-direction: column !important;
align-items: stretch !important;
gap:10px !important;
margin-top: 10px !important;
}
.nav-drop{ width:100% !important; }
.nav-dropmenu{
position: static !important;
display:block !important;
min-width: 100% !important;
box-shadow: none !important;
margin-top: 8px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
.nav-dropmenu a{
background: rgba(255,255,255,.72) !important;
margin-top: 6px;
}
/* Brand colors same as desktop */
.brand strong{ color:#0a3d62 !important; }
.brand span{ color:#8fbb22 !important; }
}
/* === v19: Topbar background matches footer === */
.topbar{
background: linear-gradient(180deg, var(--navy-900), #8fbb22) !important;
}
/* === v19: Prevent horizontal overflow / page cut-off === */
html, body{
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
img, svg, video, canvas{
max-width: 100%;
height: auto;
}
/* Avoid accidental wide elements */
*{
box-sizing: border-box;
}
/* Make containers respect viewport */
.container{
max-width: 1320px;
width: 100%;
}
/* === v19: Contact page spacing between Contact Details and Get Support === */
.contact-grid{
gap: 22px !important;
}
.contact-details{
margin-bottom: 14px !important;
}
.get-support, .contact-support, .support-card{
margin-top: 6px !important;
}
@media (max-width: 820px){
.contact-grid{ gap: 16px !important; }
.contact-details{ margin-bottom: 10px !important; }
}
/* === v21: Use new nav background image (logo colors) and remove nav animation === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(6,16,38,.18), rgba(6,16,38,.08)),
url("assets/nav-bg-logo-colors-v21.png") !important;
}
header.header > .container::after{
content: none !important; /* removes nav animation overlay */
animation: none !important;
}
/* === v21: RSS ticker speed (slower, consistent across all pages) === */
:root{ --rss-scroll-duration: 75s; }
.rss-track{ animation: rssScroll var(--rss-scroll-duration) linear infinite !important; }
/* === v22: realistic cyber nav background + no animation === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(6,16,38,.20), rgba(6,16,38,.10)),
url("assets/nav-bg-realistic-cyber-v22.png") !important;
}
header.header > .container::after{
content: none !important;
animation: none !important;
}
/* === v23: Navigation background replaced with homepage header-style image (no logo/text/buttons) === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(6,16,38,.18), rgba(6,16,38,.10)),
url("assets/nav-bg-header-style-v23.png") !important;
}
header.header > .container::after{
content: none !important;
animation: none !important;
}
/* === v24: Trimmed nav background (no black borders) and fitted to nav bar === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(6,16,38,.18), rgba(6,16,38,.10)),
url("assets/nav-bg-header-style-v24.png") !important;
background-size: cover !important;
background-position: center center !important;
}
/* === v25: Nav background uses aspect-ratio-correct image; cover handles cropping (no stretch) === */
header.header > .container::before{
background-image:
linear-gradient(180deg, rgba(6,16,38,.18), rgba(6,16,38,.10)),
url("assets/nav-bg-header-style-v25.png") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* Ensure header container has consistent height so cover works predictably */
header.header > .container{
min-height: 170px !important;
}
/* === v25: Move navigation buttons down toward bottom and slightly left === */
header.header nav.nav{
align-self: flex-end !important;
margin-top: 0 !important;
margin-bottom: 8px !important;
transform: translateX(-14px) !important;
}
/* If container is flex, ensure bottom alignment */
header.header > .container{
align-items: flex-end !important;
}
/* Keep brand from dropping too low */
.brand{
margin-bottom: 10px !important;
}
@media (max-width: 820px){
header.header nav.nav{
transform: none !important;
margin-bottom: 0 !important;
}
}
/* === v28: Pricing page layout (About-style) === */
.pricing-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 16px;
}
.price-card{
background: rgba(255,255,255,.82);
border: 1px solid rgba(10,61,98,.12);
border-radius: 16px;
padding: 16px 16px 14px;
box-shadow: 0 10px 24px rgba(6,16,38,.06);
}
.price-card__head{
display:flex;
align-items:center;
gap: 12px;
margin-bottom: 10px;
}
.price-icon{
width: 44px;
height: 44px;
flex: 0 0 44px;
}
.price-tag{
margin-left:auto;
font-weight: 900;
color: #8fbb22;
font-size: 18px;
white-space: nowrap;
}
.price-tag span{ font-weight: 700; opacity:.75; font-size: 14px; }
.mt{ margin-top: 26px; }
.muted{ color: rgba(6,16,38,.70); }
.plans{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 14px;
}
.plan{
border-radius: 18px;
padding: 16px;
border: 1px solid rgba(10,61,98,.14);
background: rgba(255,255,255,.86);
}
.plan__title{ display:flex; gap:10px; align-items:center; }
.plan-icon{ width: 40px; height: 40px; }
.plan__price{
font-weight: 900;
color: #0a3d62;
margin: 10px 0 10px;
font-size: 18px;
}
.plan__price span{ font-weight:700; opacity:.75; font-size: 14px; }
.check{ list-style:none; padding-left:0; margin: 10px 0 0; }
.check li{
position: relative;
padding-left: 26px;
margin: 8px 0;
}
.check li::before{
content: "✓";
position:absolute;
left:0;
top:0;
color: #8fbb22;
font-weight: 900;
}
.table-wrap{ overflow-x:auto; border-radius: 14px; }
.pricing-table{
width:100%;
border-collapse: collapse;
background: rgba(255,255,255,.90);
border: 1px solid rgba(10,61,98,.14);
border-radius: 14px;
overflow:hidden;
}
.pricing-table th, .pricing-table td{
padding: 12px 12px;
border-bottom: 1px solid rgba(10,61,98,.10);
}
.pricing-table th{
text-align:left;
background: rgba(10,61,98,.08);
color: #0a3d62;
}
.why{
background: linear-gradient(180deg, rgba(10,61,98,.10), rgba(143,187,34,.06));
border: 1px solid rgba(10,61,98,.12);
border-radius: 18px;
padding: 16px;
}
.why-list{ columns: 2; column-gap: 22px; }
.cta-row{ margin-top: 12px; }
@media (max-width: 1024px){
.plans{ grid-template-columns: 1fr; }
.pricing-grid{ grid-template-columns: 1fr; }
.why-list{ columns: 1; }
}
/* === v30: Matrix digits only are logo-green (do not tint other UI) === */
:root{ --matrix-color: #8fbb22; }
/* If matrix is canvas-based inside topbar */
.topbar canvas, .topbar .matrix-canvas{ filter: none !important; }
.topbar .matrix-layer, .topbar .binary-layer, .topbar .matrix-overlay{ mix-blend-mode: normal !important; }
/* Ensure topbar/nav text keeps site theme colors (not matrix green) */
.topbar, .topbar *{ color: inherit; }
header.header nav.nav a, header.header nav.nav button{ color: inherit; }
/* === v32: Topbar is not green; only matrix digits are logo-green === */
:root{ --matrix-color: #8fbb22; }
.topbar{
background: #0a3d62 !important;
border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
/* remove any green glow/highlight effects */
.topbar::before, .topbar::after{
box-shadow: none !important;
filter: none !important;
}
.topbar .matrix-layer, .topbar .binary-layer, .topbar .matrix-overlay, .topbar canvas, .topbar .matrix-canvas{
color: var(--matrix-color) !important;
}
/* Ensure non-matrix text/icons in topbar are not green */
.topbar a, .topbar span, .topbar strong, .topbar small{
color: rgba(255,255,255,.92) !important;
}
/* === v32: Brand text in nav matches logo colors === */
.brand strong{ color: #0a3d62 !important; }
.brand span{ color: #8fbb22 !important; }
/* === v32: Revert green button text across site === */
.btn, a.btn{
color: #ffffff !important;
}
.btn.primary{
color: #ffffff !important;
}
/* If any buttons are light background, keep text dark */
.btn.light, .btn.gray, .btn.rss-btn{
color: #061026 !important;
}
/* Keep Request Support/Support buttons readable */
.nav-support, a.nav-support, .btn.nav-support{
color: #061026 !important;
}
.cards.cards-tight{gap:16px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card.highlight{border:1px solid rgba(143,187,34,.55);box-shadow:0 0 0 2px rgba(143,187,34,.12) inset}
.section-gap{margin-top:24px;margin-bottom:24px}
.pagehead{margin-bottom:16px}
.page-hero{margin-top:0}
.pagehead{margin-bottom:12px}
main{margin-top:0}
.cards{gap:24px}
.card{margin:0}
.section p{margin:12px 0}
.cards.cards-gap{gap:24px}
.card-link{color:inherit;text-decoration:none}
.card-link:hover{text-decoration:underline}
/* Footer stability fix */
footer{position:static;clear:both}
body{overflow-x:hidden}
.read-article-topbar{
color: var(--topbar-color, #4b5563);
}
.read-article-topbar:hover{
opacity:.85;
}
.cards.cards-gap{gap:24px}
/* Resources: Read Article button match top bar color */
.resources-page a.btn.btn-secondary{background:linear-gradient(90deg, var(--navy-900), var(--navy)); border-color:linear-gradient(90deg, var(--navy-900), var(--navy)); color:#fff}
.resources-page a.btn.btn-secondary:hover{filter:brightness(0.92)}
/* Footer stability / prevent scroll flicker */
html, body{overflow-x:hidden}
.footer{position:relative; transform:none; will-change:auto}
/* ===== Pricing page (compact, no images) ===== */
.pricing-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-top:12px;
}
@media (max-width: 900px){
.pricing-grid{grid-template-columns:1fr}
}
.pricing-card-compact{
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.02);
border-radius:14px;
padding:14px 16px;
}
.pricing-card-compact .pricing-top{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px
}
.pricing-card-compact h3{margin:0;font-size:20px}
.pricing-card-compact .price{margin:6px 0 8px;font-size:16px}
.pricing-card-compact .price strong{font-size:20px}
.pricing-card-compact ul{margin:6px 0 0;padding-left:18px}
.pricing-card-compact li{margin:4px 0}
.pricing-section{margin:18px 0}
/* Pricing spacing refinements */
.pricing-section{margin:14px 0}
.pricing-section h2{margin-top:0}
.pricing-grid{margin-top:10px}
.pricing-tight-top{margin-top:8px}
/* Contact card spacing ensured */
main .cards.cards-gap{gap:24px !important}
/* Contact page card layout */
.contact-page main .cards.cards-gap{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:24px !important;
align-items:stretch;
}
@media (max-width: 900px){
.contact-page main .cards.cards-gap{
grid-template-columns:1fr !important;
}
}
/* ================= MOBILE & TABLET OPTIMIZATION ================= */
html, body { max-width:100%; overflow-x:hidden; }
.container { padding-left:16px; padding-right:16px; }
.nav { flex-wrap:wrap; }
.nav ul { flex-wrap:wrap; gap:12px; justify-content:center; }
.nav a { padding:12px 14px; font-size:15px; }
.button, .btn { min-height:44px; padding:12px 18px; font-size:16px; }
.cards, .grid { grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:900px){
.cards, .grid { grid-template-columns:1fr; }
.topbar { font-size:14px; padding:8px 12px; }
header.header { padding:16px 0; }
.pagehead { padding:20px 0; }
.pagehead h1 { font-size:28px; }
.rss-ticker { font-size:14px; padding:8px 12px; }
}
.pricing-grid { grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .pricing-grid { grid-template-columns:1fr; } }
footer { padding:24px 16px; text-align:center; }
nav li > ul { position:static; width:100%; box-shadow:none; }
p, li { font-size:16px; line-height:1.6; }
.hero, .hero-section { padding:24px 0; }
/* =============================
v57 fixes
1) Ensure matrix 1s/0s layer is visible
2) Unify key CTA button colors to logo green
3) Mobile nav: static dropdown list (no overlays)
============================= */
/* 1) Topbar matrix layer: make sure it renders above the gradient */
.topbar::before{
/* the SVG now has a transparent background; this makes the digits readable */
opacity: .35 !important;
mix-blend-mode: screen !important;
}
/* 2) Use the logo green (#8fbb22) for primary CTAs */
.btn.primary,
a.btn.primary,
button.btn.primary{
background: #8fbb22 !important;
color: #0A3D62 !important;
border: 1px solid rgba(0,0,0,.10) !important;
box-shadow: 0 12px 26px rgba(143,187,34,.20) !important;
}
.btn.primary:hover,
a.btn.primary:hover,
button.btn.primary:hover{
filter: brightness(0.95) !important;
}
/* Topbar "Make a Payment" */
.topbar-payment-link{
background: #8fbb22 !important;
color: #0A3D62 !important;
border-radius: 12px !important;
border: 1px solid rgba(255,255,255,.18) !important;
}
.topbar-payment-link:hover{
background: #7fa91f !important;
}
/* Header "Request Support" */
header.header nav.nav a.nav-support,
.nav-support,
a.nav-support{
background: #8fbb22 !important;
color: #0A3D62 !important;
border: 1px solid rgba(0,0,0,.10) !important;
box-shadow: 0 12px 26px rgba(143,187,34,.18) !important;
}
header.header nav.nav a.nav-support:hover,
.nav-support:hover,
a.nav-support:hover{
background: #7fa91f !important;
color: #0A3D62 !important;
}
/* 3) Mobile nav: static dropdown list (prevents covering page text) */
@media (max-width: 820px){
/* Menu button stays in the header row (not fixed over content) */
.mobile-menu-btn{
position: static !important;
right: auto !important;
bottom: auto !important;
z-index: auto !important;
margin-left: auto;
}
/* Allow header to wrap and place the nav on its own row */
.header .container{ flex-wrap: wrap !important; }
/* Nav becomes an in-flow dropdown list */
header.header nav.nav{
position: static !important;
inset: auto !important;
width: 100% !important;
padding: 12px 0 16px !important;
margin: 0 !important;
background: transparent !important;
transform: none !important;
transition: none !important;
overflow: visible !important;
display: none !important;
}
header.header nav.nav.open{ display: grid !important; gap: 10px !important; }
/* Don’t lock scrolling anymore */
body.menu-open{ overflow: auto !important; }
/* Full-width links */
header.header nav.nav a,
header.header nav.nav button.nav-dropbtn,
header.header nav.nav a.nav-support{
width: 100% !important;
justify-content: flex-start !important;
text-align: left !important;
}
/* Always show the dropdown menus (static list) */
header.header nav.nav button.nav-dropbtn{ pointer-events: none !important; }
header.header nav.nav .nav-dropmenu{
position: static !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 0 0 12px !important;
margin: 0 !important;
}
}
/* Topbar Make a Payment link */
.topbar .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.topbar-payment-link{
margin-left:auto;
padding:8px 14px;
border-radius:12px;
background:#8fbb22; /* logo green */
color:#0A3D62;
font-weight:600;
text-decoration:none;
transition:background .2s ease, transform .1s ease;
}
.topbar-payment-link:hover{
background:#7fa91f;
transform:translateY(-1px);
}
@media(max-width:700px){
.topbar-payment-link{
padding:6px 10px;
font-size:14px;
}
}
/* Pause RSS ticker on hover */
.rss-ticker:hover /* Ensure matrix animation spans full top bar width */
.topbar {
position: relative;
overflow: hidden;
}
.topbar::before {
content: "";
position: absolute;
inset: 0;
background: url("assets/img/matrix-ones-zeros.svg") repeat-x;
background-size: cover;
opacity: 0.18;
pointer-events: none;
}
/* Force Request Support nav button text to white */
.nav-cta, .btn.request-support {
color: #ffffff !important;
}
/* RSS ticker: enforced speed + pause behavior */
.rss-track{
animation: rssScroll var(--rss-scroll-duration, 75s) linear infinite !important;
}
/* Pause on hover (desktop) + focus (keyboard) + active (touch press) */
.rss-window:hover .rss-track,
.rss-ticker:hover .rss-track,
.rss-window:focus-within .rss-track,
.rss-window:active .rss-track{
animation-play-state: paused !important;
}
/* Force Request Support button text to white everywhere */
a.nav-cta, .nav-cta, .btn.request-support {
color: #ffffff !important;
}
a.nav-cta:hover, .nav-cta:hover, .btn.request-support:hover {
color: #ffffff !important;
}
@media (max-width: 860px){
nav.nav { display:none; }
nav.nav.open { display:block; }
}
/* Request Support button in nav: white text (override) */
nav.nav a.nav-support{ color:#ffffff !important; }
nav.nav a.nav-support:hover{ color:#ffffff !important; }
@media (max-width: 820px) {
.nav-links a,
.nav-links .dropdown-menu a {
color: #0077cc !important;
}
}
/* Mobile: unify ALL nav link colors (including dropdown items) */
@media (max-width: 860px){
header.header nav.nav a,
header.header nav.nav .nav-dropmenu a,
header.header nav.nav .nav-dropdown > button{
color: #0077cc !important;
}
/* If any inline styles set color (e.g., Home link), this keeps it consistent */
header.header nav.nav a[style]{
color: #0077cc !important;
}
}
/* === Added by ChatGPT: mobile bottom bar + tables + schema helpers === */
@media (max-width: 820px) {
/* Reserve space for sticky bottom bar */
body { padding-bottom: 64px; }
/* Sticky mobile call bottom bar */
.mobile-bottom-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
background: rgba(255,255,255,0.98);
border-top: 1px solid rgba(0,0,0,0.12);
backdrop-filter: blur(8px);
}
.mobile-bottom-bar a.mobile-call-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 520px;
padding: 12px 16px;
border-radius: 12px;
font-weight: 700;
text-decoration: none;
background: #0077cc;
color: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.mobile-bottom-bar a.mobile-call-btn:active { transform: translateY(1px); }
/* Service comparison table (mobile-friendly) */
.comparison-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.comparison-table {
width: 100%;
border-collapse: collapse;
min-width: 640px;
}
table.comparison-table th, table.comparison-table td {
border: 1px solid rgba(0,0,0,0.12);
padding: 12px 10px;
text-align: center;
vertical-align: middle;
}
table.comparison-table th {
background: rgba(0,0,0,0.04);
text-align: center;
}
table.comparison-table td:first-child, table.comparison-table th:first-child {
text-align: left;
font-weight: 600;
}
.comparison-yes { font-weight: 700; }
.comparison-no { opacity: 0.75; }
}
/* Desktop/tablet styles for comparison table */
.comparison-wrap { overflow-x: auto; }
table.comparison-table {
width: 100%;
border-collapse: collapse;
}
table.comparison-table th, table.comparison-table td {
border: 1px solid rgba(0,0,0,0.12);
padding: 12px 10px;
text-align: center;
vertical-align: middle;
}
table.comparison-table th {
background: rgba(0,0,0,0.04);
}
table.comparison-table td:first-child, table.comparison-table th:first-child {
text-align: left;
font-weight: 600;
width: 38%;
}
.comparison-yes { font-weight: 700; color: #0a7a2f; }
.comparison-no { color: #9b1c1c; }
/* =============================================
Mockup #2 Navigation + Buttons (Glass / Neon)
Applied site-wide
============================================= */
:root{
--cb-neon: #00ffa6;
--cb-cyan: #00c8ff;
--cb-glass: rgba(6, 27, 43, 0.78);
--cb-glass-2: rgba(6, 27, 43, 0.92);
--cb-border: rgba(0, 255, 200, 0.18);
--cb-border-2: rgba(255,255,255,0.14);
}
/* Topbar: darker + cleaner */
.topbar{
background: linear-gradient(90deg, rgba(4,10,18,0.95), rgba(6,27,43,0.92)) !important;
color: rgba(255,255,255,0.85) !important;
border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.topbar .badge{ background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.14) !important; }
.topbar .badge-dot{ background: var(--cb-neon) !important; }
.toplinks a, .topbar a{ color: rgba(255,255,255,0.88) !important; }
.toplinks a:hover, .topbar a:hover{ color: #fff !important; }
/* Header: glass + glow line */
.header{
background: var(--cb-glass) !important;
backdrop-filter: blur(14px) saturate(140%) !important;
-webkit-backdrop-filter: blur(14px) saturate(140%) !important;
border-bottom: 1px solid var(--cb-border) !important;
box-shadow: 0 18px 60px rgba(0,0,0,0.45) !important;
}
.header::after{
content:"";
position:absolute;
left:0; right:0; bottom:-1px;
height:2px;
background: linear-gradient(90deg, rgba(0,255,166,0), rgba(0,255,166,0.75), rgba(0,200,255,0.75), rgba(0,255,166,0));
filter: blur(0.2px);
}
.header .container{ padding: 14px 20px !important; }
/* Brand block */
.brand strong{ color:#fff !important; letter-spacing: .3px; }
.brand span{ color: rgba(255,255,255,0.78) !important; }
.brand img{
height: 64px !important;
width: auto !important;
filter: drop-shadow(0 0 14px rgba(0,255,200,0.30));
}
@media (max-width: 860px){
.brand img{ height: 56px !important; }
}
/* Nav links */
.nav{ gap: 10px !important; }
.header .nav a,
.header .nav button.nav-dropbtn{
color: rgba(255,255,255,0.90) !important;
background: transparent !important;
border: 0 !important;
padding: 10px 12px !important;
border-radius: 14px !important;
font-weight: 650 !important;
letter-spacing: .15px;
position: relative;
transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.header .nav a:hover,
.header .nav button.nav-dropbtn:hover{
background: rgba(255,255,255,0.08) !important;
color: #fff !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
/* Neon underline on hover */
.header .nav a::after,
.header .nav button.nav-dropbtn::after{
content:"";
position:absolute;
left:14px; right:14px; bottom:6px;
height:2px;
background: linear-gradient(90deg, rgba(0,255,166,0), rgba(0,255,166,0.9), rgba(0,200,255,0.9), rgba(0,255,166,0));
opacity:0;
transform: translateY(4px);
transition: opacity .18s ease, transform .18s ease;
border-radius: 999px;
}
.header .nav a:hover::after,
.header .nav button.nav-dropbtn:hover::after{
opacity: 1;
transform: translateY(0);
}
/* Dropdown menu: glass */
.nav-dropdown{ position: relative; }
.nav-dropmenu{
background: var(--cb-glass-2) !important;
border: 1px solid var(--cb-border) !important;
box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,255,200,0.10) inset !important;
backdrop-filter: blur(14px) saturate(140%) !important;
-webkit-backdrop-filter: blur(14px) saturate(140%) !important;
border-radius: 18px !important;
padding: 10px !important;
}
.nav-dropmenu a{
color: rgba(255,255,255,0.90) !important;
border-radius: 14px !important;
}
.nav-dropmenu a:hover{
background: rgba(255,255,255,0.10) !important;
}
.nav-dropdivider{ background: rgba(255,255,255,0.14) !important; }
/* CTA: Request Support pill */
.nav a.nav-support{
margin-left: 8px !important;
background: linear-gradient(135deg, var(--cb-neon), var(--cb-cyan)) !important;
color: #06212f !important;
font-weight: 800 !important;
padding: 11px 16px !important;
border-radius: 999px !important;
box-shadow: 0 18px 50px rgba(0,255,200,0.30) !important;
}
.nav a.nav-support:hover{
transform: translateY(-1px);
box-shadow: 0 22px 70px rgba(0,255,200,0.42) !important;
}
.nav a.nav-support::after{ display:none !important; }
/* Mobile menu button */
.mobile-menu-btn{
display: none !important;
background: rgba(255,255,255,0.08) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.14) !important;
border-radius: 14px !important;
}
/* Mobile nav panel */
@media (max-width: 720px){
.mobile-menu-btn{ display: inline-flex !important; }
.nav.open{
background: rgba(6,27,43,0.90) !important;
border: 1px solid rgba(0,255,200,0.16) !important;
box-shadow: 0 18px 60px rgba(0,0,0,0.55) !important;
}
.nav-dropmenu{ background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.10) !important; }
}
/* Buttons (site-wide) */
.btn, .button, button.button, a.button{
border-radius: 16px !important;
}
.btn.primary, .button.primary, a.button.primary{
background: linear-gradient(135deg, var(--cb-neon), var(--cb-cyan)) !important;
color: #06212f !important;
box-shadow: 0 18px 55px rgba(0,255,200,0.28) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
}
.btn.primary:hover, .button.primary:hover, a.button.primary:hover{
transform: translateY(-2px);
box-shadow: 0 26px 80px rgba(0,255,200,0.40) !important;
filter: brightness(1.02);
}
.btn.ghost, .button.ghost, a.button.ghost{
background: rgba(255,255,255,0.08) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.16) !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
}
.btn.ghost:hover, .button.ghost:hover, a.button.ghost:hover{
background: rgba(255,255,255,0.12) !important;
transform: translateY(-2px);
}
/* Make sure hero primary text remains readable */
.hero .btn.primary{ color:#06212f !important; }
.hero .btn.ghost{ color:#fff !important; }
/* === Mockup #2 Header/Navigation Background (remove gray + remove images) === */
header.header{
background: rgba(5,14,28,0.72) !important;
backdrop-filter: blur(14px) !important;
border-bottom: 1px solid rgba(0,255,200,0.16) !important;
box-shadow: 0 16px 60px rgba(0,0,0,0.55) !important;
}
/* Remove any previously-added header background images/strips */
header.header::after{ content: none !important; background: none !important; }
.header-inner::before{ content: none !important; background: none !important; }
/* Subtle digital texture + glow line like the mockup */
header.header::before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(1200px 140px at 30% 50%, rgba(0,255,200,0.16), transparent 60%),
radial-gradient(900px 120px at 80% 50%, rgba(0,200,255,0.14), transparent 65%),
repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 46px),
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.00) 70%);
opacity: 0.85;
z-index: 0;
}
/* Keep header contents above the texture layer */
header.header .container,
.header-inner,
.brand,
nav.nav,
.header-cta{
position: relative;
z-index: 2;
}
/* Mockup #2 nav link styling (white text + neon underline on hover) */
nav.nav a,
nav.nav button.nav-dropbtn{
color: rgba(255,255,255,0.92) !important;
background: transparent !important;
}
/* Re-enable transitions (older overrides disabled them) */
nav.nav a,
nav.nav button.nav-dropbtn,
a.nav-support,
.nav-support{
transition: color 0.20s ease, transform 0.20s ease, box-shadow 0.20s ease !important;
}
nav.nav a,
nav.nav button.nav-dropbtn{ position: relative; }
nav.nav a::after,
nav.nav button.nav-dropbtn::after{
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: 6px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(0,255,200,0.0), rgba(0,255,200,0.85), rgba(0,200,255,0.85), rgba(0,200,255,0.0));
opacity: 0;
}
nav.nav a:hover,
nav.nav button.nav-dropbtn:hover{
color: var(--cb-neon) !important;
}
nav.nav a:hover::after,
nav.nav button.nav-dropbtn:hover::after{ opacity: 1; }
/* Glass dropdowns to match the header */
.nav-dropmenu{
background: rgba(5,14,28,0.92) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
box-shadow: 0 18px 60px rgba(0,0,0,0.60) !important;
}
.nav-dropmenu a{ color: rgba(255,255,255,0.92) !important; }
.nav-dropmenu a:hover{ background: rgba(255,255,255,0.08) !important; }
.nav-dropdivider{ background: rgba(255,255,255,0.10) !important; }
/* CTA pill like the mockup */
.nav-support,
a.nav-support{
background: linear-gradient(135deg, var(--cb-neon), var(--cb-cyan)) !important;
color: #06212f !important;
border-radius: 999px !important;
padding: 10px 16px !important;
box-shadow: 0 18px 55px rgba(0,255,200,0.30) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
}
.nav-support:hover,
a.nav-support:hover{
transform: translateY(-2px);
box-shadow: 0 26px 80px rgba(0,255,200,0.42) !important;
}
/* ===== Mockup #2: Large Header Logo + Branded Text (FORCED) ===== */
header.header > .container{
min-height:110px !important;
padding-top:10px !important;
padding-bottom:10px !important;
align-items:center !important;
}
header.header a.brand{ gap:14px !important; }
header.header a.brand > img,
header.header a.brand img{
height:92px !important;
width:auto !important;
max-height:96px !important;
object-fit:contain !important;
filter: drop-shadow(0 0 14px rgba(0,255,180,0.60)) !important;
}
header.header a.brand strong{
font-size:30px !important;
font-weight:850 !important;
line-height:1.05 !important;
letter-spacing:.6px !important;
background: linear-gradient(135deg,#00ffa6,#00c8ff) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color: transparent !important;
text-shadow: 0 0 20px rgba(0,255,200,0.40) !important;
}
header.header a.brand span{
font-size:15px !important;
font-weight:650 !important;
letter-spacing:.2px !important;
color: rgba(0,255,200,0.92) !important;
text-shadow: 0 0 16px rgba(0,255,200,0.20) !important;
}
@media (max-width:860px){
header.header > .container{ min-height:92px !important; }
header.header a.brand img{ height:72px !important; max-height:72px !important; }
header.header a.brand strong{ font-size:22px !important; }
header.header a.brand span{ font-size:13px !important; }
}
/* =====================================================================
FIXES (Jan 2026)
1) Match nav bar left/right margins to the top bar (do not change top bar)
2) Mobile: prevent phone number from being clipped and improve readability
===================================================================== */
/* 1) Nav bar margins: match the top bar container padding and max-width */
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Keep the header background layers edge-to-edge even with constrained content */
header.header > .container::before,
header.header > .container::after{
left: 50% !important;
right: auto !important;
width: 100vw !important;
transform: translateX(-50%) !important;
}
/* 2) Mobile topbar phone: add safe-area padding and improve readability */
@media (max-width: 720px){
.topbar .container{
padding-top: calc(10px + env(safe-area-inset-top));
padding-bottom: 10px;
gap: 10px;
flex-wrap: wrap;
}
.toplinks{
flex-wrap: wrap;
gap: 10px;
}
a.topbar-phone{
font-size: 16px;
font-weight: 900;
letter-spacing: .02em;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.22);
}
}
@media (max-width: 420px){
.toplinks{ width: 100%; }
.topbar-actions{ width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
}
/* Pricing Navigator + Cards */
.pricing-navigator .lead{max-width: 62ch;}
.pricing-nav-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.pricing-nav-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);text-decoration:none;color:inherit;position:relative;overflow:hidden}
.pricing-nav-card:hover{transform:translateY(-1px)}
.pricing-nav-card .nav-icon{width:28px;height:28px;flex:0 0 auto;opacity:.95}
.pricing-nav-card .nav-title{font-weight:900;margin-bottom:4px}
.pricing-nav-card .nav-desc{font-size:14px;line-height:1.35;color:rgba(255,255,255,.75)}
.pricing-nav-card .nav-cta{margin-top:10px;font-size:13px;font-weight:800;color:rgba(255,255,255,.86)}
.pricing-how{margin-top:16px;}
.pricing-how-title{margin:18px 0 10px;font-weight:900}
.pricing-how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pricing-how-step{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.pricing-how-step .step-dot{width:24px;height:24px;flex:0 0 auto;border-radius:999px;display:grid;place-items:center;font-weight:900;font-size:13px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18)}
.pricing-how-step .step-text{font-size:14px;line-height:1.35;color:rgba(255,255,255,.82)}
/* Card readability improvements */
.pricing-top{display:flex;align-items:center;gap:10px}
.pricing-top .plan-icon{width:22px;height:22px;flex:0 0 auto;opacity:.95}
.plan-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 8px}
.plan-chip{font-size:12px;font-weight:800;letter-spacing:.01em;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(255,255,255,.86)}
.include-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 10px}
.include-item{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.include-item svg{width:16px;height:16px;flex:0 0 auto;opacity:.9}
.include-item span{font-size:12px;font-weight:800;color:rgba(255,255,255,.82)}
.pricing-details{margin-top:8px}
.pricing-details summary{cursor:pointer;font-weight:900;color:rgba(255,255,255,.9)}
.pricing-details summary::-webkit-details-marker{display:none}
.pricing-details summary:after{content:'+';float:right;opacity:.8}
.pricing-details[open] summary:after{content:'–'}
.pricing-details .list-check{margin-top:10px}
/* Managed plan comparison */
.plan-compare{margin:18px 0 10px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);overflow:hidden}
.plan-compare header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.10)}
.plan-compare header .compare-icon{width:20px;height:20px;opacity:.95}
.plan-compare header .compare-title{font-weight:900}
.plan-compare table{width:100%;border-collapse:collapse}
.plan-compare th,.plan-compare td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.plan-compare th{font-size:13px;color:rgba(255,255,255,.75);text-align:left}
.plan-compare td{font-size:13px;color:rgba(255,255,255,.82)}
.plan-compare .ok{font-weight:900}
.plan-compare .muted{color:rgba(255,255,255,.65)}
.plan-compare .rowgroup{background:rgba(255,255,255,.04);font-weight:900;color:rgba(255,255,255,.86)}
@media (max-width: 900px){
.pricing-nav-grid{grid-template-columns:1fr;}
.pricing-how-steps{grid-template-columns:1fr;}
.include-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
.plan-compare{overflow-x:auto;}
.plan-compare table{min-width:680px;}
}
/* Plan compare markup alignment */
.plan-compare-title{margin:0;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.10);font-weight:900}
.plan-compare-scroll{overflow-x:auto;}
.plan-compare-table{width:100%;border-collapse:collapse;}
.plan-compare-table th,.plan-compare-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.plan-compare-table th{font-size:13px;color:rgba(255,255,255,.75);text-align:left}
.plan-compare-table td{font-size:13px;color:rgba(255,255,255,.82)}
.plan-chips .chip{font-size:12px;font-weight:800;letter-spacing:.01em;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(255,255,255,.86)}
/* =========================================================
v35 NAV LAYOUT + STICKY SHRINK + OFFCANVAS + REVEALS
========================================================= */
/* Keep header row aligned to topbar margins */
header.header > .container{
max-width: var(--max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:16px !important;
}
/* Brand block: black bar behind logo + text for readability */
header.header .brand{
background:#000 !important;
padding:10px 14px !important;
border-radius:14px !important;
box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
header.header .brand .brand-title,
header.header .brand .brand-sub,
header.header .brand .brand-services{
color:#fff !important;
}
header.header .brand img{ filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
/* Ensure nav is pushed to the right margin */
header.header nav.nav{ margin-left:auto !important; }
/* Constrain the nav background image ("laptop" / hero background) to the same margins */
header.header > .container::before,
header.header > .container::after{
left: 20px !important;
right: 20px !important;
width: auto !important;
border-radius: 18px !important;
}
/* Sticky header with scroll shrink */
header.header{
position: sticky;
top: 0;
z-index: 10000;
transition: box-shadow .25s ease, transform .25s ease;
}
header.header.is-sticky{
box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
header.header.is-shrink .topbar{
display:none;
}
header.header.is-shrink > .container{
padding-top: 10px !important;
padding-bottom: 10px !important;
}
header.header.is-shrink .brand img{ height: 56px !important; }
header.header.is-shrink .brand .brand-services{ display:none !important; }
/* Mobile slide-in menu (off-canvas) */
@media (max-width: 860px){
/* keep the header row as-is */
header.header > .container{
flex-wrap: nowrap !important;
}
/* Offcanvas nav */
header.header nav.nav{
position: fixed !important;
top: 0;
right: 0;
height: 100vh;
width: min(86vw, 360px);
padding: 84px 16px 18px;
display: flex !important;
flex-direction: column;
gap: 10px;
background: rgba(11,18,32,.98);
border-left: 1px solid rgba(255,255,255,.10);
transform: translateX(110%);
transition: transform .28s ease;
overflow-y: auto;
z-index: 10001;
}
header.header nav.nav.open{
transform: translateX(0);
}
/* Mobile links readability */
header.header nav.nav a,
header.header nav.nav button.nav-dropbtn{
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.10) !important;
color: #fff !important;
border-radius: 14px !important;
padding: 12px 14px !important;
text-align: left;
}
header.header nav.nav a:hover,
header.header nav.nav button.nav-dropbtn:hover{
background: rgba(255,255,255,.14) !important;
}
/* Backdrop overlay when menu open */
body.menu-open::before{
content:"";
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
backdrop-filter: blur(2px);
z-index: 10000;
}
body.menu-open{ overflow:hidden; }
}
/* Animated CTA buttons */
.btn.primary, a.cta, .nav-support{
transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn.primary:hover, a.cta:hover, .nav-support:hover{
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(0,0,0,.14);
}
.btn.primary:active, a.cta:active, .nav-support:active{
transform: translateY(0);
box-shadow: 0 8px 16px rgba(0,0,0,.12);
}
@keyframes ctaPulse{
0%{ transform: translateY(0) scale(1); }
50%{ transform: translateY(-1px) scale(1.02); }
100%{ transform: translateY(0) scale(1); }
}
.btn.primary.cta-pulse{ animation: ctaPulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
.btn.primary.cta-pulse{ animation:none !important; }
}
/* Scroll reveal effects */
.reveal-item{
opacity: 0;
transform: translateY(14px);
transition: opacity .55s ease, transform .55s ease;
will-change: opacity, transform;
}
.reveal-item.is-visible{
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
.reveal-item{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* === v36: NAV MARGINS MATCH TOPBAR (DO NOT CHANGE TOPBAR) === */
/* Topbar uses .container padding: 0 20px (and .topbar .container padding: 10px 20px).
Force the nav/header container to use the SAME side padding and max width. */
header.header > .container{
max-width: var(--max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Ensure the "laptop" background image never bleeds beyond the container margins */
header.header > .container::before,
header.header > .container::after{
width: 100% !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
}
/* Keep nav row content aligned to the container edges */
header.header > .container{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* v38 defensive: ensure nav stays transparent */
header.header nav.nav{background:transparent;}
/* === v47: TOPBAR SECOND BUTTON === */
.topbar-actions{
display:flex;
gap:10px;
align-items:center;
}
.topbar-support-link{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.10);
color:#fff;
font-weight:900;
}
.topbar-support-link:hover{
background:rgba(255,255,255,.16);
}
/* === v48: TOPBAR BUTTONS (3 total, smaller, consistent) === */
.topbar-actions{
display:flex;
gap:10px;
align-items:center;
}
.topbar-actions .topbar-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px; /* smaller */
border-radius:999px;
font-size:13px; /* smaller */
font-weight:900;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.10);
color:#fff;
}
.topbar-actions .topbar-btn:hover{
background:rgba(255,255,255,.16);
}
/* === v49: TOPBAR BUTTONS ALL GREEN (MATCH MAKE A PAYMENT) === */
.topbar-actions .topbar-btn{
background: linear-gradient(135deg, var(--green), var(--green-700)) !important;
border: 1px solid rgba(0,0,0,.10) !important;
color: #0b1220 !important;
}
.topbar-actions .topbar-btn:hover{
filter: brightness(1.04);
}
/* === v50: BUTTONS MATCH TOPBAR GREEN === */
.btn-topbar{
background: linear-gradient(135deg, var(--green), var(--green-700)) !important;
border: 1px solid rgba(0,0,0,.10) !important;
color: #0b1220 !important;
}
.btn-topbar:hover{ filter: brightness(1.04); }
/* === v51: TOPBAR PILLS (BLACK @ 75% FOR ALL THREE) === */
.topbar .badge,
.topbar .top-pill{
background: rgba(0,0,0,.75) !important;
border: 1px solid rgba(255,255,255,.18) !important;
color: #fff !important;
padding: 6px 10px !important;
border-radius: 999px !important;
}
.topbar .top-pill{
display: inline-flex;
align-items: center;
gap: 8px;
}
.topbar .top-pill:hover{ opacity: 1; }
/* Footer Call Now button spacing */
.footer-call-link{
margin-top: 10px;
display: inline-flex;
}
/* === v52: TOPBAR BUTTONS SMALLER (FIT TEXT) === */
.topbar-actions .topbar-btn{
padding: 7px 10px !important;
font-size: 12px !important;
line-height: 1 !important;
white-space: nowrap;
}
/* === v52: FOOTER CALL NOW BUTTON (BELOW LINK) === */
.footer-call-wrap{ display:block; margin-top:10px; }
.footer-call-link{
display: inline-flex !important;
text-decoration: none !important;
}
/* === v53: TOPBAR PILL ALIGNMENT + TYPOGRAPHY MATCH === */
.topbar .topbar-links{
display:flex;
gap:10px;
align-items:center;
}
.topbar .badge,
.topbar .top-pill{
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.3px;
}
/* === v53: TOPBAR BUTTONS SLIGHTLY BIGGER (TEXT STILL FITS) === */
.topbar-actions .topbar-btn{
padding:9px 14px !important;
font-size:13px !important;
}
/* === v53: REMOTE ACCESS BUTTON RED === */
.topbar-actions .topbar-remote-link{
background: linear-gradient(135deg, #ff4b4b, #cc1f1f) !important;
border-color:#b51616 !important;
color:#fff !important;
}
.topbar-actions .topbar-remote-link:hover{
filter:brightness(1.05);
}
/* === v55: Remote Access icon + hover glow === */
.topbar-actions .topbar-remote-link{
position: relative;
box-shadow: 0 0 0 rgba(255,75,75,0);
transition: box-shadow .25s ease, transform .15s ease;
}
.topbar-actions .topbar-remote-link:hover{
box-shadow:
0 0 12px rgba(255,75,75,.55),
0 0 28px rgba(255,75,75,.35),
inset 0 0 12px rgba(255,255,255,.15);
transform: translateY(-1px);
}
/* === v57: Remote Access idle pulse + tooltip + icon fallback === */
@keyframes raPulse{
0%, 100% { box-shadow: 0 0 0 rgba(255,75,75,0); }
50% {
box-shadow:
0 0 10px rgba(255,75,75,.28),
0 0 22px rgba(255,75,75,.18);
}
}
.topbar-actions .topbar-remote-link{
animation: raPulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
.topbar-actions .topbar-remote-link{
animation: none !important;
transition: none !important;
}
}
/* Tooltip via title attribute is native; also add a nicer custom tooltip */
.topbar-actions .topbar-remote-link[title]{
position: relative;
}
.topbar-actions .topbar-remote-link[title]::after{
content: attr(title);
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%);
background: rgba(0,0,0,.85);
color: #fff;
padding: 7px 10px;
border-radius: 10px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
transform: translateX(-50%) translateY(4px);
z-index: 99999;
}
.topbar-actions .topbar-remote-link[title]::before{
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(0,0,0,.85);
opacity: 0;
transition: opacity .15s ease;
pointer-events: none;
z-index: 99999;
}
.topbar-actions .topbar-remote-link[title]:hover::after,
.topbar-actions .topbar-remote-link[title]:hover::before{
opacity: 1;
}
.topbar-actions .topbar-remote-link .ra-fallback{
margin-right: 6px;
font-size: 1.0em;
line-height: 1;
opacity: .85;
}
/* === v58: Topbar matrix layer fills FULL width === */
.topbar{ position: relative; overflow: hidden; }
#topbar-matrix{
position: absolute;
inset: -40px 0 -40px 0;
width: 100%;
background-image: url("assets/matrix-ones-zeros.svg");
background-repeat: repeat;
background-size: 520px 160px;
opacity: .55;
pointer-events: none;
animation: matrixFall 7.5s linear infinite;
z-index: 0;
mix-blend-mode: multiply;
}
.topbar .container{ position: relative; z-index: 2; }
/* Ensure any previous "content:none" disables don't affect the div-based layer */
.topbar::before, .topbar::after{ content: none !important; }
/* === v58: Make .topbar-btn green everywhere (footer matches topbar) === */
.topbar-btn{
background: linear-gradient(135deg, var(--green), var(--green-700)) !important;
border: 1px solid rgba(0,0,0,.10) !important;
color: #0b1220 !important;
}
.topbar-btn:hover{ filter: brightness(1.04); }
/* === v60: Remote Access tooltip positioned BELOW button to avoid clipping === */
.topbar-actions .topbar-remote-link[title]::after{
top: calc(100% + 10px);
bottom: auto;
transform: translateX(-50%) translateY(-4px);
}
.topbar-actions .topbar-remote-link[title]::before{
top: calc(100% + 4px);
bottom: auto;
border: 6px solid transparent;
border-bottom-color: rgba(0,0,0,.85);
border-top-color: transparent;
}
/* === v61: Tooltip fade/slide + ensure it is NOT clipped/hidden under nav === */
/* The topbar previously used overflow:hidden for the matrix layer; that clips tooltips.
Allow overflow, and keep the matrix confined by sizing it to the topbar box. */
.topbar{ overflow: visible !important; }
#topbar-matrix{ inset: 0 !important; }
/* Create a stronger stacking context for topbar content/tooltip over the header/nav */
.topbar .container{ position: relative; z-index: 50000 !important; }
.topbar-actions{ position: relative; z-index: 50010 !important; }
/* Smooth fade/slide animation for tooltip below the button */
.topbar-actions .topbar-remote-link[title]::after{
opacity: 0;
transform: translateX(-50%) translateY(-6px);
transition: opacity .18s ease, transform .18s ease;
z-index: 60000;
}
.topbar-actions .topbar-remote-link[title]::before{
opacity: 0;
transition: opacity .18s ease, transform .18s ease;
z-index: 60000;
}
.topbar-actions .topbar-remote-link[title]:hover::after{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.topbar-actions .topbar-remote-link[title]:hover::before{
opacity: 1;
}
/* === v62: Keep topbar matrix confined to topbar (no bleed into nav) === */
/* Create an isolated stacking context so blend/opacity from the matrix can't affect elements below. */
.topbar{
isolation: isolate !important;
}
/* Constrain the matrix layer to the topbar box and prevent blending into the nav */
#topbar-matrix{
inset: 0 !important;
height: 100% !important;
clip-path: inset(0) !important;
mix-blend-mode: normal !important;
}
/* === v63: Topbar matrix fits within site margins (matches container) === */
.topbar{ position: relative; }
#topbar-matrix{
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: min(100%, var(--max)) !important;
/* clip 20px on both sides to match the container padding */
clip-path: inset(0 20px 0 20px) !important;
}
/* === v63: City pill hover animation (Service area towns) === */
a.pill{
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
text-decoration: none;
}
a.pill:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.20);
filter: brightness(1.06);
}
a.pill:focus-visible{
outline: 2px solid rgba(0,255,200,.55);
outline-offset: 3px;
}
/* === v64: Topbar matrix strictly inside container margins === */
/* Align matrix layer to the same visual edges as .topbar .container content:
centered max-width var(--max) with 20px side padding. */
#topbar-matrix{
left: max(20px, calc((100% - var(--max)) / 2 + 20px)) !important;
right: max(20px, calc((100% - var(--max)) / 2 + 20px)) !important;
width: auto !important;
transform: none !important;
clip-path: inset(0) !important;
}
/* === v65: Topbar matrix constrained within container margins (guaranteed) === */
/* Place matrix inside .topbar .container so it can never exceed the site's content margins */
.topbar{ overflow: visible !important; isolation: isolate !important; }
.topbar .container{ position: relative; }
#topbar-matrix{
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
transform: none !important;
clip-path: none !important;
pointer-events: none;
z-index: 0;
mix-blend-mode: normal !important;
}
/* Keep topbar text/buttons above the matrix */
.topbar .container > *:not(#topbar-matrix){
position: relative;
z-index: 2;
}
/* === v66: Navigation bar container matches site margins exactly === */
header.header{
width: 100%;
}
header.header > .container{
max-width: var(--max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
header.header nav.nav{
width: 100%;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
header.header .nav-inner,
header.header .nav-row,
header.header .nav-wrap{
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: none !important;
}
/* === v72: Dropdown usability (doesn't disappear while moving to menu) === */
@media (min-width: 821px){
.nav-dropdown{
position: relative;
}
/* Invisible bridge so cursor can move from button to menu without leaving hover */
.nav-dropdown::after{
content:"";
position:absolute;
left:0;
right:0;
top:100%;
height:10px;
}
.nav-dropmenu{
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 20000;
display: block;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
pointer-events: none;
transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.nav-dropdown:hover .nav-dropmenu,
.nav-dropdown:focus-within .nav-dropmenu{
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
}
/* === v74: Site buttons match topbar green (excluding topbar + navigation) === */
:root{
/* fallback if vars not defined */
--topbar-green: var(--green);
--topbar-green-2: var(--green-700);
}
/* Apply to primary/ghost buttons in content areas (main + footer), but NOT in topbar or header nav */
main .btn,
footer .btn,
main a.btn,
footer a.btn{
background: linear-gradient(135deg, var(--topbar-green), var(--topbar-green-2)) !important;
border: 1px solid rgba(0,0,0,.10) !important;
color: #0b1220 !important;
}
main .btn:hover,
footer .btn:hover,
main a.btn:hover,
footer a.btn:hover{
filter: brightness(1.04);
}
/* Keep topbar/nav buttons as-is */
.topbar .btn,
.topbar .topbar-btn,
header.header nav.nav .btn,
header.header nav.nav .topbar-btn{
/* no override */
}
/* === v74: Force desktop nav link sizing (strong override) === */
@media (min-width: 821px){
header.header nav.nav a{
font-size: 12px !important;
padding: 10px 8px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
header.header nav.nav{
gap: 10px !important;
}
header.header nav.nav .nav-links{
gap: 10px !important;
}
header.header nav.nav .nav-ctas .topbar-btn{
font-size: 12px !important;
padding: 8px 10px !important;
line-height: 1 !important;
}
}
/* === v75: Force dropdown trigger button sizing (Services/Resources) === */
@media (min-width: 821px){
header.header nav.nav .nav-dropdown > button{
font-size: 12px !important;
padding: 10px 8px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
}
/* === v75: Only TOPBAR stays locked while scrolling (desktop + mobile) === */
.topbar{
position: sticky !important;
top: 0 !important;
z-index: 99999 !important;
}
/* Ensure header/nav is NOT sticky/fixed */
header.header{
position: relative !important;
top: auto !important;
z-index: 1000 !important;
}
header.header.is-sticky,
header.header.sticky,
header.header.fixed,
header.header.shrink{
position: relative !important;
top: auto !important;
}
/* Neutralize any sticky nav helpers so only the topbar sticks */
.sticky-nav,
.nav-sticky,
body.sticky-nav header.header{
position: relative !important;
}
/* === v76: Align nav buttons to bottom of brandbar box (desktop) === */
@media (min-width: 821px){
header.header > .container{
align-items: flex-end !important;
padding-bottom: 10px !important;
}
header.header nav.nav{
align-items: flex-end !important;
}
header.header nav.nav .nav-links a,
header.header nav.nav .nav-dropdown > button,
header.header nav.nav .nav-ctas .topbar-btn{
margin-top: 8px !important;
}
}
/* === v76: Topbar sticky fix (ensure it stays on scroll) === */
.topbar{
position: sticky !important;
top: 0 !important;
z-index: 99999 !important;
}
/* Sticky can break if an ancestor clips overflow */
header.header{ overflow: visible !important; }
/* Fallback for edge cases */
@supports not (position: sticky){
.topbar{ position: fixed !important; left: 0; right: 0; top: 0; }
body{ padding-top: 56px; }
}
/* === v76: More spacing between the two body cards on service detail pages === */
.service-detail-page .grid,
.service-detail-page .cards,
.service-detail-page .two-col,
.service-detail-page .content-grid{
gap: 34px !important;
}
/* === v76: Content buttons match topbar green (excluding topbar + nav) === */
main .btn,
footer .btn,
main a.btn,
footer a.btn{
background: linear-gradient(135deg, var(--green), var(--green-700)) !important;
border: 1px solid rgba(0,0,0,.10) !important;
color: #0b1220 !important;
}
main .btn:hover,
footer .btn:hover,
main a.btn:hover,
footer a.btn:hover{
filter: brightness(1.04);
}
/* === v76: Reduce top whitespace on About page after removing heading === */
.about-page main.main{ padding-top: 24px !important; }
/* === v78: Fix desktop nav (prevent mobile drawer styles from affecting desktop) === */
@media (min-width: 821px){
header.header nav.nav{
position: relative !important;
inset: auto !important;
transform: none !important;
background: transparent !important;
padding: 0 !important;
overflow: visible !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
box-shadow: none !important;
}
header.header nav.nav.is-open,
header.header nav.nav.open{
transform: none !important;
}
}
/* === v78: One segmented nav bar with dividers (desktop only, safe) === */
@media (min-width: 821px){
header.header nav.nav .nav-links{
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(0,0,0,.28) !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 14px !important;
overflow: hidden !important;
}
header.header nav.nav .nav-links > li,
header.header nav.nav .nav-links > div,
header.header nav.nav .nav-links > *{
display: flex !important;
}
header.header nav.nav .nav-links > * + *{
border-left: 1px solid rgba(255,255,255,.12) !important;
}
header.header nav.nav .nav-links a,
header.header nav.nav .nav-links .nav-dropdown > button{
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 38px !important;
padding: 0 10px !important;
font-size: 12px !important;
line-height: 1 !important;
white-space: nowrap !important;
background: transparent !important;
border: 0 !important;
margin: 0 !important;
}
header.header nav.nav .nav-links a:hover,
header.header nav.nav .nav-links .nav-dropdown > button:hover{
background: rgba(255,255,255,.10) !important;
}
}
/* === v78: Topbar stays on desktop (robust fixed) === */
@media (min-width: 821px){
.topbar{
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 99999 !important;
}
header.header{ transform: none !important; }
body{ padding-top: 56px !important; }
}
/* === v78: Service detail pages - increase gap between the two cards reliably === */
.service-detail-page .cards.two{
gap: 44px !important;
}
/* === v78: About page - remove duplicate body heading + reduce whitespace === */
.about-page .pagehead{ padding-top: 18px !important; padding-bottom: 18px !important; }
.about-page main.main{ padding-top: 22px !important; }
/* ===== v82: Desktop nav height fix (force-visible) ===== */
@media (min-width: 700px){
header.header{ overflow: visible !important; }
header.header > .container{ overflow: visible !important; align-items: center !important; }
header.header nav.nav{
overflow: visible !important;
height: auto !important;
min-height: 84px !important;
padding: 16px 20px !important;
align-items: center !important;
flex-wrap: wrap !important;
}
header.header nav.nav > a,
header.header nav.nav > .nav-dropdown{
display: inline-flex !important;
align-items: center !important;
min-height: 48px !important;
}
header.header nav.nav > a{
padding: 12px 16px !important;
line-height: 1.35 !important;
}
header.header nav.nav .nav-dropbtn{
padding: 12px 16px !important;
line-height: 1.35 !important;
}
}
/* ===== BEGIN styles.mockup2.v25.css ===== */
/* ===== Mockup2 v24: targeted fixes (nav margins, topbar matrix opacity, brand text) ===== */
/*
IMPORTANT:
- Do NOT change body or topbar margins.
- Match the NAV row inset to whatever the TOPBAR is using.
- Keep changes minimal to avoid breaking other layout rules in styles.css.
*/
/* 1) NAV margins: match TOPBAR (topbar .container uses side padding: 0 in styles.css) */
header.header > .container{
/* styles.css forces 16px side padding on the header container; remove it */
padding-left: 20px !important;
padding-right: 20px !important;
/* Ensure header background art cannot bleed below the header row */
overflow: hidden !important;
}
/* Keep the header background layers clipped to the header row */
header.header > .container::before,
header.header > .container::after{
top: 0 !important;
bottom: 0 !important;
height: auto !important;
}
/* 2) Topbar 1s/0s matrix: keep aligned to topbar content inset + 90% transparency */
.topbar .container{
position: relative !important;
}
#topbar-matrix{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 0 !important;
opacity: 1 !important; /* 90% transparent */
}
#topbar-matrix canvas{
width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
/* Ensure topbar content sits above the animation */
.topbar .container > *:not(#topbar-matrix){
position: relative !important;
z-index: 2 !important;
}
/* 3) Brand text: match the logo's typography + ensure it's above services line */
header.header .brand-text{
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
line-height: 1.05 !important;
}
/* CORNBELT */
header.header .brand-title{
order: 0 !important;
text-transform: uppercase !important;
font-style: italic !important;
font-weight: 900 !important;
letter-spacing: 0.02em !important;
color: #ffffff !important;
text-shadow: 0 2px 18px rgba(0,0,0,0.45) !important;
}
/* IT SERVICES */
header.header .brand-sub{
order: 1 !important;
text-transform: uppercase !important;
font-weight: 800 !important;
letter-spacing: 0.22em !important;
color: rgba(255,255,255,0.92) !important;
text-shadow: 0 2px 16px rgba(0,0,0,0.35) !important;
}
/* Services line must remain below */
header.header .brand-services{
order: 2 !important;
margin-top: 4px !important;
color: rgba(255,255,255,0.86) !important;
}
/* Responsive sizing to keep it logo-like without overflowing */
header.header .brand-title{ font-size: 32px !important; }
header.header .brand-sub{ font-size: 16px !important; }
header.header .brand-services{ font-size: 13px !important; }
@media (max-width: 860px){
header.header .brand-title{ font-size: 22px !important; }
header.header .brand-sub{ font-size: 13px !important; letter-spacing: 0.18em !important; }
header.header .brand-services{ font-size: 12px !important; }
}
/* ===== v25: requested fixes ONLY ===== */
/* 1) Navigation bar margins: match the top bar (topbar container has 0 left/right padding) */
header.header > .container{
padding-left: 20px !important;
padding-right: 20px !important;
}
/* 2) Ones/zeros animation: keep it inside the topbar container and make it 90% transparent */
.topbar .container{ position: relative !important; overflow: hidden !important; }
#topbar-matrix{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 0 !important;
opacity: 1 !important; /* 90% transparent */
}
#topbar-matrix canvas{ width: 100% !important; height: 100% !important; display: flex !important;
flex-direction: column !important;
gap: 10px !important; }
.topbar .container > *:not(#topbar-matrix){ position: relative !important; z-index: 2 !important; }
/* v15 targeted fixes: nav margins match topbar; matrix aligned + 90% transparent; topbar button spacing */
/* 1) Nav margins match topbar (topbar container has 0 horizontal padding) */
header.header > .container{
padding-left: 20px !important;
padding-right: 20px !important;
}
/* 2) Matrix aligned to topbar container, 90% transparent */
/* Disable any full-bleed pseudo overlays that ignore container margins */
.topbar::before,
.topbar::after{
content: none !important;
background: none !important;
animation: none !important;
}
/* Ensure the matrix canvas layer is clipped to the topbar container and aligned */
.topbar .container{
position: relative !important;
overflow: hidden !important;
}
#topbar-matrix{
position: absolute !important;
inset: 0 !important; /* fill the .container, not the viewport */
pointer-events: none !important;
z-index: 0 !important;
opacity: 1 !important; /* 90% transparent */
}
#topbar-matrix canvas{
width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
/* Keep topbar content above the matrix */
.topbar .container > *:not(#topbar-matrix){
position: relative !important;
z-index: 2 !important;
}
/* 3) Space between topbar buttons */
.topbar-actions{
display: flex !important;
gap: 12px !important;
align-items: center;
}
/* --- v16 fixes: dropdown + matrix speed/opacity (do not change margins) --- */
/* Allow nav dropdowns to overflow outside header (previous overflow:hidden clipped them) */
header.header > .container{
overflow: visible !important;
}
/* Ensure header/nav stack above the page content */
header.header,
header.header nav.nav{
position: relative !important;
z-index: 5000 !important;
}
/* Ensure dropdown menu renders above everything and isn't clipped */
.nav-dropmenu{
position: absolute !important;
z-index: 99999 !important;
}
/* --- v18: keep topbar intact; enforce white 90% matrix via canvas alpha only --- */
#topbar-matrix{ opacity: 1 !important; }
/* v25 matrix canvas transparent */
#topbar-matrix, #topbar-matrix canvas{ background: transparent !important; }
/* v26: thin readability bar behind topbar text/buttons (keeps margins/layout) */
.topbar .container{
position: relative;
z-index: 1; /* ensure content above matrix */
}
.topbar .container::after{
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 34px; /* thin bar */
background: rgba(0,0,0,0.50);
border-radius: 999px;
z-index: -1; /* behind text/buttons */
pointer-events: none;
}
/* keep the matrix canvas behind everything */
#topbar-matrix{ z-index: 0 !important; }
/* v28: readability bar 80% transparent */
.topbar .container::after{
background: rgba(0,0,0,0.20) !important;
}
/* v30: nav text larger + bold for readability */
header.header a,
header.header .nav-link,
header.header .navlinks a,
header.header .navlinks li a{
font-size: 17px !important;
font-weight: 700 !important;
}
/* v31: prevent nav flash without altering header/hero backgrounds */
header.header nav.nav{
background-color: #0b0f16;
}
/* keep matrix canvas transparent */
#topbar-matrix, #topbar-matrix canvas{ background: transparent !important; }
/* v31: topbar badge text larger + bold (Veteran-owned • Security-first) */
.topbar .badge span{
font-size: 14px;
font-weight: 700;
letter-spacing: .2px;
}
/* === v37: NAV CONTAINER MARGINS MATCH TOPBAR (DO NOT CHANGE TOPBAR) === */
/* Topbar content is inside .topbar .container, which uses .container {max-width:var(--max); padding:0 20px}.
Ensure the header's direct child .container uses the SAME sizing/padding. */
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Keep the laptop/nav background image clipped to the container (between margins). */
header.header > .container::before,
header.header > .container::after{
left: 0 !important;
right: 0 !important;
width: 100% !important;
transform: none !important;
}
/* Ensure nav row content spans container and aligns edges */
header.header > .container{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap: 14px !important;
}
header.header > .container > .brand{ flex: 0 0 auto; }
header.header > .container > nav.nav{ margin-left:auto !important; }
/* === v38: PERFECT ALIGNMENT + REMOVE BLACK BAR BEHIND NAV BUTTONS === */
/* Match TOPBAR inset exactly: .container padding is 0 20px (do NOT change topbar). */
header.header > .container{
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Remove the black bar that was sitting behind the nav buttons */
header.header nav.nav{
background-color: transparent !important;
background: transparent !important;
}
/* Constrain the laptop/header background layers BETWEEN the same margins */
header.header > .container::before,
header.header > .container::after{
left: 20px !important;
right: 20px !important;
width: auto !important;
transform: none !important;
border-radius: 18px !important;
}
/* Keep logo itself flush to the left margin (black bar remains behind brand, not behind nav) */
header.header .brand{
padding-left: 0 !important;
}
/* === v39: NAV MARGINS MATCH TOPBAR ONLY (no other changes) === */
/* Topbar uses .container { max-width: var(--max); padding: 0 20px } */
header.header > .container{
padding-left: 20px !important;
padding-right: 20px !important;
}
/* === v40: NAV MARGINS MATCH TOPBAR (FIX DOUBLE-INSET) + DROPDOWN LINK SPACING === */
/* 1) Header row uses the SAME left/right inset as topbar content (20px). */
header.header > .container{
padding-left: 20px !important;
padding-right: 20px !important;
}
/* 2) The laptop/header background layers must span the header container (NOT inset again),
otherwise margins appear "slightly off" (double 20px inset). */
header.header > .container::before,
header.header > .container::after{
left: 0 !important;
right: 0 !important;
width: 100% !important;
}
/* 3) Add a little breathing room between dropdown links */
.nav-dropmenu a + a{
margin-top: 4px !important;
}
/* === v42: FIX NAV HORIZONTAL MISALIGNMENT (REMOVE LEFT SHIFT) === */
/* A prior rule in styles.css shifts the nav left: transform: translateX(-14px).
Remove that shift so nav aligns with the same container margins as the topbar. */
header.header nav.nav{
transform: none !important;
}
/* === v44: NAV VISUAL EDGES MATCH TOPBAR CONTENT MARGINS ===
The topbar content starts at 20px inset (container padding).
Constrain the header/laptop background layers to the SAME inset so the nav "bar"
aligns visually with the topbar margins. (No topbar changes.) */
header.header > .container::before,
header.header > .container::after{
left: 20px !important;
right: 20px !important;
width: auto !important;
}
/* === v45: FORCE HEADER CONTAINER TO MATCH TOPBAR CONTAINER EXACTLY + BRAND BAR 75% === */
/* Match the exact .container geometry used by topbar content (max-width var(--max), side padding 20px). */
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Constrain the nav/laptop background layers to the SAME 20px inset (visual edges match topbar content). */
header.header > .container::before,
header.header > .container::after{
left: 20px !important;
right: 20px !important;
width: auto !important;
transform: none !important;
}
/* Brand bar behind logo/text at 75% opacity for readability without being too heavy */
header.header .brand{
background: rgba(0,0,0,.75) !important;
}
/* === v46: NAV MARGINS + MOBILE MENU BAR === */
/* Ensure header container uses the exact same horizontal inset as topbar content */
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
transform: none !important;
}
/* Remove any horizontal shifting on the nav itself */
header.header nav.nav{
transform: none !important;
}
/* Constrain the laptop/nav background artwork to the same inset (between margins) */
header.header > .container::before,
header.header > .container::after{
left: 20px !important;
right: 20px !important;
width: auto !important;
transform: none !important;
}
/* Mobile: make the Menu button a sticky full-width bar at the top of the page area */
@media (max-width: 820px){
header.header > .container{
flex-wrap: wrap !important;
gap: 10px !important;
}
.mobile-menu-btn{
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: 100% !important;
justify-content: center !important;
border-radius: 12px !important;
margin: 0 !important;
padding: 14px 16px !important;
}
}
/* === v47: DESKTOP NAV MARGINS MATCH TOPBAR (CONTENT EDGES) === */
@media (min-width: 821px){
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* Remove any left/right nudges that can cause perceived margin mismatch */
header.header .brand{ margin-left: 0 !important; }
header.header nav.nav{ margin-right: 0 !important; transform: none !important; }
/* Keep the laptop/header background constrained exactly to the same inset */
header.header > .container::before,
header.header > .container::after{
left: 20px !important;
right: 20px !important;
width: auto !important;
transform: none !important;
}
}
/* === v47: MOBILE MENU FLOATING BUTTON AT TOP (LIKE CALL NOW) === */
@media (max-width: 820px){
.mobile-menu-btn{
position: fixed !important;
top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
right: 18px !important;
bottom: auto !important;
left: auto !important;
width: auto !important;
justify-content: center !important;
z-index: 10050 !important;
}
}
/* === v48: DESKTOP NAV MARGINS (REMOVE 100vw SCROLLBAR SHIFT) === */
@media (min-width: 821px){
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
margin: 0 auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* The laptop/nav background used 100vw (includes scrollbar), causing slight left/right mismatch.
Force it to 100% of the header container instead. */
header.header > .container::before,
header.header > .container::after{
left: 0 !important;
right: 0 !important;
width: 100% !important;
transform: none !important;
}
header.header nav.nav{ transform: none !important; }
}
/* === v48: MOBILE MENU BUTTON (FLOATING LIKE CALL NOW, BUT TOP) === */
@media (max-width: 820px){
.mobile-menu-btn{
display: inline-flex !important;
position: fixed !important;
top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
right: 18px !important;
bottom: auto !important;
left: auto !important;
z-index: 10050 !important;
}
}
/* === v49: FINAL NAV ALIGNMENT + MOBILE MENU OVER TOPBAR === */
@media (min-width: 821px){
/* Make header container identical to topbar .container geometry */
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
margin: 0 auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* Ensure the laptop/nav background rectangle spans EXACTLY the header container width
(no double-inset, no 100vw scrollbar shift). */
header.header > .container::before,
header.header > .container::after{
left: 0 !important;
right: 0 !important;
width: 100% !important;
transform: none !important;
}
header.header nav.nav{ transform: none !important; }
}
/* Mobile: Menu button pinned to very top and above the topbar */
@media (max-width: 820px){
.mobile-menu-btn{
display: inline-flex !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: 100% !important;
justify-content: center !important;
z-index: 20000 !important; /* above topbar and header */
border-radius: 0 !important;
padding: 14px 16px !important;
margin: 0 !important;
}
/* Keep offcanvas nav below the menu bar */
header.header nav.nav{
padding-top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
}
}
/* === v50: NAV BAR ALIGNMENT (match .container used by topbar/body/rss) === */
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
align-items: center !important; /* undo any flex-end tweaks */
}
/* Remove any horizontal nudges on nav */
header.header nav.nav{
transform: none !important;
margin-right: 0 !important;
align-self: center !important;
}
/* Keep header background art clipped to the same content width (no 100vw/scrollbar mismatch) */
header.header > .container::before,
header.header > .container::after{
left: 0 !important;
right: 0 !important;
width: 100% !important;
transform: none !important;
}
/* === v50: MOBILE MENU REWRITE (single source of truth) === */
@media (max-width: 820px){
/* Always show Menu button */
.mobile-menu-btn{
display: inline-flex !important;
position: fixed !important;
top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
right: 10px !important;
left: auto !important;
bottom: auto !important;
z-index: 25000 !important; /* above topbar */
border-radius: 999px !important;
padding: 10px 14px !important;
font-weight: 900 !important;
}
/* Off-canvas drawer */
header.header nav.nav{
position: fixed !important;
top: 0 !important;
right: 0 !important;
height: 100vh !important;
width: min(86vw, 340px) !important;
max-width: 92vw !important;
padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 18px !important;
background: rgba(6,27,43,0.98) !important;
border-left: 1px solid rgba(0,255,200,0.16) !important;
box-shadow: -18px 0 60px rgba(0,0,0,0.55) !important;
transform: translateX(110%) !important;
transition: transform .24s ease !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
z-index: 24000 !important;
}
header.header nav.nav.open{ transform: translateX(0) !important; }
/* Ensure links are readable */
header.header nav.nav a,
header.header nav.nav button.nav-dropbtn{
color: #fff !important;
}
/* Backdrop overlay (created by JS) */
.menu-backdrop{
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
z-index: 23000;
}
body.menu-open{ overflow: hidden; }
}
/* === v52: NAV BAR WIDTH MATCHES TOPBAR/RSS (.container) === */
@media (min-width: 821px){
header.header > .container{
max-width: var(--max) !important;
margin: 0 auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
}
/* === v63: Desktop nav bar width/margins MATCH topbar/rss/body (.container) === */
@media (min-width: 821px){
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
transform: none !important;
}
/* Ensure nav row itself is not offset */
header.header nav.nav{
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Constrain the laptop/nav background artwork to the same margins */
header.header > .container::before,
header.header > .container::after{
left: 0 !important;
right: 0 !important;
width: 100% !important;
transform: none !important;
clip-path: inset(0 20px 0 20px) !important;
}
}
/* === v66: Enforce nav margins to match container === */
@media (min-width: 821px){
header.header > .container{
max-width: var(--max) !important;
margin: 0 auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* === v66: NAV BAR BACKGROUND REACHES SITE MARGINS (DESKTOP) ===
The header/nav "bar" and laptop artwork are painted with header.header > .container::before/::after.
Earlier overrides clipped/inset these layers, leaving extra space. This resets them so they span
the full header container width (which already matches the site margins). */
@media (min-width: 821px){
/* Ensure the header container matches the site's container geometry */
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* Make the nav/laptop background layers span the FULL container width (no extra inset/clip) */
header.header > .container::before,
header.header > .container::after{
left: 0 !important;
right: 0 !important;
width: 100% !important;
clip-path: none !important;
border-radius: 0 !important;
transform: none !important;
}
}
/* === v67: REWRITE NAV BACKGROUND TO FULL WIDTH, CONTENT STAYS IN MARGINS ===
Goal: nav "bar"/laptop image spans same full-width background behavior as topbar,
while the logo/nav items remain aligned to the shared .container margins. */
@media (min-width: 821px){
/* Ensure header itself is the painting surface */
header.header{
position: relative !important;
overflow: hidden !important;
}
/* Disable the old container-painted backgrounds (they were narrowing the visible bar) */
header.header > .container::before,
header.header > .container::after{
content: none !important;
}
/* Paint the cyber/laptop background across the FULL viewport width */
header.header::before{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:0 !important;
height:190px !important;
background-image:
linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.24)),
url("assets/nav-cyber-hero-bg-realistic.png") !important;
background-repeat:no-repeat !important;
background-size:cover !important;
background-position:center top !important;
pointer-events:none !important;
z-index:0 !important;
}
/* Keep existing bottom cyber strip also full width */
header.header::after{
left:0 !important;
right:0 !important;
}
/* Keep the header row content aligned to the shared margins */
header.header > .container{
max-width: var(--max) !important;
margin: 0 auto !important;
padding: 0 20px !important;
position: relative !important;
z-index: 2 !important;
}
}
/* === v68: NAV BAR MARGINS + DROPDOWN STACKING (DESKTOP) ===
Rebuild desktop header layout so logo/nav/CTAs sit on the same container margins as topbar/RSS/body,
and dropdowns render ABOVE the RSS feed. */
@media (min-width: 821px){
header.header{
position: relative !important;
z-index: 4000 !important;
overflow: visible !important;
}
/* Use the existing container background (within margins) */
header.header::before{ content: none !important; }
header.header > .container{
max-width: var(--max) !important;
margin: 0 auto !important;
padding: 0 20px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
overflow: visible !important;
}
/* Ensure the laptop/nav background spans the full container width (no extra inset/clip) */
header.header > .container::before,
header.header > .container::after{
left: 0 !important;
right: 0 !important;
width: 100% !important;
clip-path: none !important;
transform: none !important;
}
/* Brand flush to the left container edge */
header.header .brand{
margin: 0 !important;
flex: 0 0 auto !important;
}
/* Nav occupies remaining space and pushes CTAs to the far right */
header.header nav.nav{
flex: 1 1 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: flex-end !important;
position: relative !important;
z-index: 4100 !important;
overflow: visible !important;
}
header.header nav.nav .nav-inner{
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
header.header nav.nav .nav-links{
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Dropdowns above everything (including RSS feed) */
header.header .nav-dropdown,
header.header .nav-dropmenu,
header.header .dropdown-menu{
position: relative !important;
z-index: 9000 !important;
}
header.header .nav-dropmenu,
header.header .dropdown-menu{
z-index: 12000 !important;
}
/* Ensure any RSS bar cannot overlay dropdowns */
.rss-feed, .rss-bar, .rss, .rss-ticker{
position: relative;
z-index: 1 !important;
}
}
/* === v69: RESTORE NAV IMAGE + TRUE MARGINS + ABSOLUTE DROPDOWNS (DESKTOP) === */
@media (min-width: 821px){
/* 1) Restore the laptop/cyber image layer (v67 disabled it with content:none) */
header.header > .container::before{ content:"" !important; }
header.header > .container::after{ content:"" !important; }
/* 2) Make the logo + nav align exactly to the shared margins */
header.header > .container{
max-width: var(--max) !important;
margin: 0 auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
header.header .brand{
margin: 0 !important;
padding: 0 !important;
}
header.header nav.nav,
header.header nav.nav .nav-inner,
header.header nav.nav .nav-links,
header.header nav.nav .nav-ctas{
margin: 0 !important;
padding: 0 !important;
}
/* 3) Dropdowns should NOT expand the nav bar; force them to be absolutely positioned overlays */
header.header .nav-dropdown{ position: relative !important; }
header.header .nav-dropmenu{
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
right: auto !important;
z-index: 20000 !important;
}
/* Ensure RSS sits below dropdown overlays */
.rss-feed, .rss-bar, .rss, .rss-ticker{ z-index: 1 !important; }
}
/* === v71: DESKTOP NAV TRUE MARGINS (LOGO LEFT EDGE, NAV RIGHT EDGE) + DROPDOWN OVERLAY === */
@media (min-width: 821px){
/* The nav row container is header.header > .container (topbar container is NOT a direct child) */
header.header > .container{
max-width: var(--max) !important;
width: 100% !important;
margin: 0 auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
overflow: visible !important;
}
/* Brand flush to left margin */
header.header > .container > a.brand{
margin: 0 !important;
padding: 0 !important;
}
/* Nav flush to right margin */
header.header > .container > nav.nav{
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 12px !important;
overflow: visible !important;
position: relative !important;
z-index: 9000 !important;
}
/* Dropdown menus must not expand header; overlay and sit above RSS */
header.header > .container > nav.nav .nav-dropdown{ position: relative !important; }
header.header > .container > nav.nav .nav-dropmenu{
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
right: auto !important;
z-index: 20000 !important;
}
.rss-ticker, .rss-feed, .rss-bar, .rss, .rss-ticker{
position: relative !important;
z-index: 1 !important;
}
}
/* v72: RSS sits below dropdown overlays */
.rss-ticker, .rss-feed, .rss-bar, .rss{ position: relative; z-index: 1 !important; }
/* === v73: Desktop nav buttons smaller so everything fits on the nav bar === */
@media (min-width: 821px){
header.header nav.nav .nav-links a{
font-size: 12px !important;
padding: 10px 8px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
header.header nav.nav .nav-inner{
gap: 10px !important;
}
header.header nav.nav .nav-links{
gap: 10px !important;
}
header.header nav.nav .nav-ctas .topbar-btn{
font-size: 12px !important;
padding: 8px 10px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
}
/* ===== v79: Remove stray top gap + redesigned desktop navigation bar ===== */
/* 1) Ensure nothing creates a white strip above the fixed topbar */
html, body{
margin: 0 !important;
padding-top: 0 !important;
}
/* NOTE: Do NOT add body padding for the topbar.
The site uses a sticky topbar in normal flow; body padding creates a visible strip above it. */
.topbar{
top: 0 !important;
margin-top: 0 !important;
}
/* ===== v80: Fix remaining top white strip + make desktop nav taller/readable ===== */
/* 1) Absolutely remove any padding/margin that could push the sticky topbar downward */
html, body{
margin: 0 !important;
padding: 0 !important;
}
body{ padding-top: 0 !important; }
/* Ensure topbar is pinned to the very top */
.topbar{ top: 0 !important; }
/* 2) Desktop nav: increase height + contrast so links are clearly visible */
@media (min-width: 821px){
/* Undo the earlier "flex-end" alignment which can visually clip the bar */
header.header > .container{ align-items: center !important; }
header.header nav.nav{
min-height: 56px !important;
padding: 10px 14px !important;
background: rgba(15, 23, 42, .58) !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 999px !important;
box-shadow: 0 16px 40px rgba(0,0,0,.28) !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important; /* allow wrap instead of disappearing/cropping */
gap: 0 !important;
}
header.header nav.nav > a,
header.header nav.nav > .nav-dropdown{
height: auto !important;
min-height: 40px !important;
display: flex !important;
align-items: center !important;
}
header.header nav.nav > a,
header.header nav.nav .nav-dropbtn{
font-size: 15px !important;
padding: 10px 12px !important;
line-height: 1.1 !important;
color: rgba(255,255,255,.96) !important;
text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
}
/* Minimal dividers (keep them subtle) */
header.header nav.nav > * + *{
border-left: 1px solid rgba(255,255,255,.16) !important;
margin-left: 10px !important;
padding-left: 10px !important;
}
}
/* 2) Desktop nav: long bar style w/ minimal dividers (keeps existing logo + text) */
@media (min-width: 821px){
header.header nav.nav{
/* Override legacy desktop nav styling */
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 999px !important;
padding: 6px 10px !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
box-shadow: 0 14px 32px rgba(0,0,0,.22) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Treat each top-level nav item like a segment */
header.header nav.nav > a,
header.header nav.nav > .nav-dropdown{
display: flex !important;
align-items: center !important;
height: 40px !important;
}
/* Minimal dividers between segments */
header.header nav.nav > * + *{
border-left: 1px solid rgba(255,255,255,.14) !important;
margin-left: 8px !important;
padding-left: 8px !important;
}
/* Link + dropdown button styling */
header.header nav.nav > a,
header.header nav.nav .nav-dropbtn{
color: rgba(255,255,255,.92) !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: .01em !important;
padding: 0 10px !important;
border-radius: 10px !important;
background: transparent !important;
border: 0 !important;
line-height: 1 !important;
white-space: nowrap !important;
cursor: pointer;
}
header.header nav.nav > a:hover,
header.header nav.nav .nav-dropbtn:hover{
background: rgba(255,255,255,.10) !important;
}
/* Dropdown menus: keep the new theme */
header.header nav.nav .nav-dropmenu{
background: rgba(15, 23, 42, .98) !important;
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: 16px !important;
box-shadow: 0 20px 50px rgba(0,0,0,.35) !important;
overflow: hidden !important;
}
header.header nav.nav .nav-dropmenu a{
color: rgba(255,255,255,.92) !important;
padding: 10px 14px !important;
font-size: 13px !important;
}
header.header nav.nav .nav-dropmenu a:hover{
background: rgba(255,255,255,.08) !important;
}
header.header nav.nav .nav-dropdivider{
background: rgba(255,255,255,.12) !important;
}
}
/* ===== v81: Final overrides (must be AFTER v79 rules) ===== */
/* Remove any strip above the sticky topbar */
html, body{ margin: 0 !important; padding: 0 !important; }
body{ padding-top: 0 !important; }
.topbar{ top: 0 !important; margin-top: 0 !important; }
@media (min-width: 821px){
/* Ensure the header row doesn't clip the taller nav bar */
header.header > .container{ align-items: center !important; }
/* Make the desktop nav bar tall enough + increase contrast so links are readable */
header.header nav.nav{
min-height: 60px !important;
padding: 12px 16px !important;
background: rgba(15, 23, 42, .62) !important;
border: 1px solid rgba(255,255,255,.20) !important;
border-radius: 999px !important;
box-shadow: 0 18px 44px rgba(0,0,0,.30) !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important; /* prevents links from vanishing on narrower desktops */
gap: 0 !important;
}
header.header nav.nav > a,
header.header nav.nav > .nav-dropdown{
min-height: 44px !important;
display: flex !important;
align-items: center !important;
}
header.header nav.nav > a,
header.header nav.nav .nav-dropbtn{
font-size: 15px !important;
padding: 10px 12px !important;
line-height: 1.1 !important;
color: rgba(255,255,255,.96) !important;
text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
}
header.header nav.nav > * + *{
border-left: 1px solid rgba(255,255,255,.18) !important;
margin-left: 10px !important;
padding-left: 10px !important;
}
}
/* ===== v82: Desktop nav height fix (force-visible) ===== */
@media (min-width: 700px){
header.header{ overflow: visible !important; }
header.header > .container{ overflow: visible !important; align-items: center !important; }
header.header nav.nav{
overflow: visible !important;
height: auto !important;
min-height: 84px !important;
padding: 16px 20px !important;
align-items: center !important;
flex-wrap: wrap !important;
}
header.header nav.nav > a,
header.header nav.nav > .nav-dropdown{
display: inline-flex !important;
align-items: center !important;
min-height: 48px !important;
}
header.header nav.nav > a{
padding: 12px 16px !important;
line-height: 1.35 !important;
}
header.header nav.nav .nav-dropbtn{
padding: 12px 16px !important;
line-height: 1.35 !important;
}
}
/* ===== v84: Desktop header/nav layout adjustments ===== */
@media (min-width: 821px){
/* Treat the 2nd header row as the "navigation bar" and make it match container boundaries */
header.header > .container{
position: relative !important;
height: 120px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
align-items: stretch !important;
}
/* Logo touches top & bottom of the navigation bar */
header.header a.brand{
height: 100% !important;
align-items: stretch !important;
}
header.header a.brand img{
height: 100% !important;
width: auto !important;
object-fit: contain !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
/* Brand text centered vertically within the nav bar */
header.header .brand-text{
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 100% !important;
}
/* Rebuild the nav as a thin line at the bottom of the navigation bar */
header.header nav.nav{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 0 8px 0 !important;
margin: 0 !important;
background: transparent !important;
border-radius: 0 !important;
display: flex !important;
align-items: flex-end !important;
justify-content: flex-end !important;
gap: 0 !important;
overflow: visible !important;
/* the "thin line" */
border-top: 1px solid rgba(255,255,255,.22) !important;
}
/* Links sit on the bottom edge */
header.header nav.nav > a,
header.header nav.nav > .nav-dropdown{
margin: 0 !important;
padding: 0 !important;
align-self: flex-end !important;
}
header.header nav.nav > a,
header.header nav.nav .nav-dropbtn{
height: auto !important;
min-height: 0 !important;
padding: 10px 16px 0 16px !important; /* bottom aligned look */
line-height: 1.2 !important;
border-radius: 0 !important;
background: transparent !important;
}
/* Minimal dividers between items */
header.header nav.nav > a + a,
header.header nav.nav > a + .nav-dropdown,
header.header nav.nav > .nav-dropdown + a,
header.header nav.nav > .nav-dropdown + .nav-dropdown{
border-left: 1px solid rgba(255,255,255,.18) !important;
}
header.header nav.nav > .nav-dropdown{
padding-left: 0 !important;
}
header.header nav.nav > .nav-dropdown .nav-dropbtn{
border-left: 0 !important;
}
/* Keep dropdown menus usable with the new bottom-anchored bar */
header.header nav.nav .nav-dropmenu{
top: auto !important;
bottom: 46px !important;
}
}
/* === V85 DESKTOP NAV: HEIGHT, ALIGNMENT, DROPDOWN CONSISTENCY === */
@media (min-width: 900px){
/* Make the "navigation bar" (brand + nav) tall enough and unclipped */
header.header > .container{
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: 1fr auto !important;
align-items: stretch !important;
min-height: 120px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
}
/* Brand: logo touches top/bottom; text centered vertically */
header.header > .container > a.brand{
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
height: 100% !important;
align-self: stretch !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: stretch !important;
gap: 14px !important;
}
header.header > .container > a.brand img{
height: 100% !important;
width: auto !important;
object-fit: contain !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
header.header > .container > a.brand .brand-text{
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* Nav boundaries match container; place links at bottom on a thin line */
header.header > .container > nav.nav{
grid-column: 1 / -1 !important;
grid-row: 2 / 3 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border-top: 1px solid rgba(255,255,255,.22) !important; /* thin line */
border-radius: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-end !important; /* links sit at the bottom */
justify-content: flex-end !important;
min-height: 52px !important; /* ensures nothing clips */
overflow: visible !important;
}
/* Each nav item wrapper aligns like a link */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav > .nav-dropdown{
display: flex !important;
align-items: flex-end !important;
height: 100% !important;
margin: 0 !important;
}
/* Links + dropdown buttons: same sizing + typography */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav .nav-dropbtn{
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
padding: 18px 16px 12px 16px !important; /* pushes text toward bottom */
min-height: 52px !important; /* matches nav min-height */
height: auto !important;
display: inline-flex !important;
align-items: flex-end !important;
white-space: nowrap !important;
}
/* Minimal dividers between items (works for and .nav-dropdown wrappers) */
header.header > .container > nav.nav > a:not(:first-child),
header.header > .container > nav.nav > .nav-dropdown:not(:first-child){
border-left: 1px solid rgba(255,255,255,.16) !important;
}
/* Ensure dropdown menus open fully and don't get clipped */
header.header nav.nav .nav-dropmenu{
top: auto !important;
bottom: 56px !important; /* opens upward from the bottom link bar */
overflow: visible !important;
}
}
/* === V86 DESKTOP NAV: STOP OVERLAP WITH RSS, INCREASE HEIGHT, MATCH DROPDOWN COLORS === */
@media (min-width: 900px){
/* Give the whole header enough vertical space so nav never spills over the RSS ticker */
header.header{
overflow: visible !important;
}
header.header > .container{
/* override any fixed/too-small heights */
height: auto !important;
min-height: 170px !important; /* bigger nav area */
padding-top: 0 !important;
padding-bottom: 0 !important;
/* keep our 2-row layout */
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto auto !important;
align-items: stretch !important;
/* prevent content from painting outside unexpectedly */
overflow: visible !important;
}
/* Brand row takes full available height of row 1 */
header.header > .container > a.brand{
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
height: 100% !important;
align-self: stretch !important;
}
header.header > .container > a.brand img{
height: 100% !important;
max-height: 120px !important; /* keeps logo from forcing row 1 too tall */
width: auto !important;
object-fit: contain !important;
}
/* Put the nav in row 2 and make it taller */
header.header > .container > nav.nav{
grid-column: 1 / -1 !important;
grid-row: 2 / 3 !important;
min-height: 72px !important; /* was too small */
padding-top: 0 !important;
padding-bottom: 0 !important;
/* thin bottom-line bar */
border-top: 1px solid rgba(255,255,255,.22) !important;
align-items: flex-end !important;
overflow: visible !important;
}
/* Links + dropdown buttons: increase vertical room and FORCE matching color */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav .nav-dropbtn{
color: #fff !important; /* match all links */
font-size: 15px !important;
line-height: 1 !important;
min-height: 72px !important; /* match nav height */
padding: 34px 16px 14px 16px !important; /* pushes text to bottom with more space */
display: inline-flex !important;
align-items: flex-end !important;
}
/* Wrappers (dropdown containers) match link height so nothing clips */
header.header > .container > nav.nav > .nav-dropdown{
height: auto !important;
min-height: 72px !important;
display: flex !important;
align-items: flex-end !important;
}
/* Ensure the RSS ticker sits BELOW header with no overlap */
.rss-ticker{
position: relative !important;
z-index: 1 !important;
margin-top: 0 !important;
}
}
/* === V87 DESKTOP NAV: START BAR AT HOME, BRAND TOUCHES BOTTOM, DROPDOWN COLOR + STICKY HOVER === */
@media (min-width: 900px){
/* 1) Layout: brand in col 1 spanning both rows, nav in col 2 (so the link bar starts at Home) */
header.header > .container{
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto auto !important;
column-gap: 18px !important;
min-height: 190px !important; /* taller so nothing clips */
height: auto !important;
align-items: stretch !important;
overflow: visible !important;
}
/* Brand spans both rows and sits on the bottom edge (touch bottom of nav bar) */
header.header > .container > a.brand{
grid-column: 1 / 2 !important;
grid-row: 1 / 3 !important; /* span both rows */
align-self: stretch !important;
height: 100% !important;
display: flex !important;
align-items: flex-end !important; /* bottom align */
padding: 0 !important;
margin: 0 !important;
gap: 14px !important;
}
header.header > .container > a.brand img{
/* Logo touches bottom of the header (and thus bottom of nav bar) */
height: 160px !important;
max-height: 100% !important;
width: auto !important;
object-fit: contain !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
header.header > .container > a.brand .brand-text{
height: 160px !important; /* match logo height */
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* text centered vertically within brand block */
}
/* Nav only occupies column 2, row 2 so the thin bar begins just before "Home" */
header.header > .container > nav.nav{
grid-column: 2 / 3 !important;
grid-row: 2 / 3 !important;
width: 100% !important;
margin: 0 !important;
background: transparent !important;
border-top: 1px solid rgba(255,255,255,.22) !important;
min-height: 80px !important; /* 2) increase height of link area */
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
align-items: flex-end !important;
overflow: visible !important;
}
header.header > .container > nav.nav > a,
header.header > .container > nav.nav .nav-dropbtn{
min-height: 80px !important;
padding: 40px 16px 16px 16px !important; /* links sit at bottom with more room */
line-height: 1 !important;
color: #fff !important;
display: inline-flex !important;
align-items: flex-end !important;
background: transparent !important;
border-radius: 0 !important;
}
/* Dividers */
header.header > .container > nav.nav > a:not(:first-child),
header.header > .container > nav.nav > .nav-dropdown:not(:first-child){
border-left: 1px solid rgba(255,255,255,.16) !important;
}
/* 3) Dropdown: dark blue like hero, and stays open while moving to links */
header.header nav.nav .nav-dropdown{
position: relative !important;
}
header.header nav.nav .nav-dropmenu{
position: absolute !important;
left: 0 !important;
top: 100% !important; /* open DOWNWARD so there's no gap */
bottom: auto !important;
margin-top: 0 !important; /* no gap that would break hover */
padding: 10px 0 !important;
background: #0b2a5b !important; /* dark blue */
border: 1px solid rgba(255,255,255,.14) !important;
z-index: 99999 !important;
min-width: 240px !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(0) !important;
pointer-events: none !important;
}
/* Show menu on hover OR keyboard focus */
header.header nav.nav .nav-dropdown:hover .nav-dropmenu,
header.header nav.nav .nav-dropdown:focus-within .nav-dropmenu{
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Dropdown links styling */
header.header nav.nav .nav-dropmenu a{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 10px 14px !important;
color: #ffffff !important;
text-decoration: none !important;
background: transparent !important;
}
header.header nav.nav .nav-dropmenu a:hover,
header.header nav.nav .nav-dropmenu a:focus{
background: rgba(255,255,255,.10) !important;
}
/* Ensure RSS ticker never overlaps: header stays in normal flow and on top */
header.header{ z-index: 10 !important; }
.rss-ticker{ z-index: 1 !important; }
}
/* === V88: BRAND (LOGO) TOUCHES TOP+BOTTOM OF NAV BAR, LINKS FIT === */
@media (min-width: 900px){
/* Keep 2-column layout (brand left, nav right) */
header.header > .container{
grid-template-columns: auto 1fr !important;
grid-template-rows: auto auto !important;
min-height: 170px !important;
}
/* Put brand in the SAME ROW as the nav bar so it shares the bar height */
header.header > .container > a.brand{
grid-column: 1 / 2 !important;
grid-row: 2 / 3 !important; /* was spanning both rows */
align-self: stretch !important;
/* Match the nav bar row height */
min-height: 80px !important;
height: 80px !important;
/* Logo should touch top & bottom of the bar */
align-items: stretch !important;
gap: 12px !important;
}
header.header > .container > a.brand img{
height: 100% !important; /* touches top+bottom */
max-height: none !important;
width: auto !important;
object-fit: contain !important;
}
header.header > .container > a.brand .brand-text{
height: 100% !important;
justify-content: center !important; /* centered vertically */
}
/* Nav bar height to match brand bar */
header.header > .container > nav.nav{
min-height: 80px !important;
}
/* Tighten link spacing so everything fits */
header.header > .container > nav.nav{
flex-wrap: nowrap !important; /* keep on one line on desktop */
gap: 0 !important;
}
header.header > .container > nav.nav > a,
header.header > .container > nav.nav .nav-dropbtn{
font-size: 14px !important;
padding: 40px 10px 16px 10px !important; /* narrower left/right */
min-height: 80px !important;
white-space: nowrap !important;
}
/* Slightly thinner dividers */
header.header > .container > nav.nav > a:not(:first-child),
header.header > .container > nav.nav > .nav-dropdown:not(:first-child){
border-left: 1px solid rgba(255,255,255,.12) !important;
}
/* If the viewport is a bit narrower, allow gentle wrap instead of clipping */
@media (max-width: 1180px){
header.header > .container > nav.nav{
flex-wrap: wrap !important;
row-gap: 0 !important;
}
}
}
/* === V89: SHORTER NAV LINK BAR (EVEN TOP/BOTTOM SPACING), STARTS AT HOME, LOGO TOUCHES BAR === */
@media (min-width: 900px){
/* Define a single bar height shared by brand + nav */
:root{ --deskNavBarH: 64px; }
/* Brand row = nav bar row */
header.header > .container > a.brand{
grid-row: 2 / 3 !important;
height: var(--deskNavBarH) !important;
min-height: var(--deskNavBarH) !important;
align-items: stretch !important; /* so logo can touch top/bottom */
}
header.header > .container > a.brand img{
height: 100% !important; /* touch top+bottom of the bar */
width: auto !important;
object-fit: contain !important;
}
header.header > .container > a.brand .brand-text{
height: 100% !important;
justify-content: center !important;
}
/* Nav bar begins at its own column (right before Home) */
header.header > .container > nav.nav{
grid-column: 2 / 3 !important;
grid-row: 2 / 3 !important;
min-height: var(--deskNavBarH) !important;
height: var(--deskNavBarH) !important;
/* Make the bar behind links shorter with equal padding */
padding: 6px 0 !important; /* small, even top/bottom spacing */
margin: 0 !important;
display: flex !important;
align-items: center !important; /* center vertically within bar */
justify-content: flex-end !important;
background: rgba(11,15,22,.65) !important; /* subtle bar behind links */
border-top: 0 !important;
border-radius: 10px !important;
overflow: visible !important;
}
/* Ensure the bar visually starts right before Home (no left padding) */
header.header > .container > nav.nav{
padding-left: 0 !important;
}
/* Links/buttons: equal top/bottom spacing, tighter so all fit */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav .nav-dropbtn{
min-height: calc(var(--deskNavBarH) - 12px) !important; /* bar minus padding */
height: calc(var(--deskNavBarH) - 12px) !important;
padding: 0 10px !important; /* equal top/bottom by using flex centering */
display: inline-flex !important;
align-items: center !important;
font-size: 14px !important;
line-height: 1 !important;
color: #fff !important;
background: transparent !important;
border-radius: 0 !important;
}
/* Dividers between items inside the bar */
header.header > .container > nav.nav > a:not(:first-child),
header.header > .container > nav.nav > .nav-dropdown:not(:first-child){
border-left: 1px solid rgba(255,255,255,.14) !important;
}
/* Keep dropdown behavior from v87 */
header.header nav.nav .nav-dropmenu{
top: 100% !important;
bottom: auto !important;
}
}
/* === V90: BIGGER LOGO TOUCHING BAR, CENTERED TEXT, BAR STARTS AT HOME === */
@media (min-width: 900px){
/* Define nav bar height */
:root{ --deskNavBarH: 72px; }
/* Ensure 2-column layout (brand | nav) */
header.header > .container{
grid-template-columns: auto 1fr !important;
grid-template-rows: auto auto !important;
min-height: 180px !important;
}
/* Brand shares the nav bar row */
header.header > .container > a.brand{
grid-column: 1 / 2 !important;
grid-row: 2 / 3 !important;
height: var(--deskNavBarH) !important;
min-height: var(--deskNavBarH) !important;
display: flex !important;
align-items: stretch !important; /* let logo touch top/bottom */
gap: 14px !important;
padding: 0 !important;
margin: 0 !important;
}
/* Bigger logo touching top and bottom of the bar */
header.header > .container > a.brand img{
height: 100% !important; /* touches top + bottom */
width: auto !important;
max-height: none !important;
object-fit: contain !important;
}
/* Brand text centered vertically within the bar */
header.header > .container > a.brand .brand-text{
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* centered between top & bottom of bar */
}
/* Nav bar starts at column 2 (right before Home) */
header.header > .container > nav.nav{
grid-column: 2 / 3 !important;
grid-row: 2 / 3 !important;
height: var(--deskNavBarH) !important;
min-height: var(--deskNavBarH) !important;
/* Shorter bar behind links */
padding: 6px 0 !important; /* small even top/bottom spacing */
padding-left: 0 !important; /* start right before Home */
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
background: rgba(11,15,22,.6) !important;
border-radius: 10px !important;
border-top: 0 !important;
overflow: visible !important;
}
/* Links fit inside the shorter bar */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav .nav-dropbtn{
height: calc(var(--deskNavBarH) - 12px) !important; /* bar minus padding */
min-height: calc(var(--deskNavBarH) - 12px) !important;
padding: 0 10px !important; /* equal vertical spacing via flex */
display: inline-flex !important;
align-items: center !important;
font-size: 14px !important;
line-height: 1 !important;
color: #fff !important;
background: transparent !important;
}
/* Dividers */
header.header > .container > nav.nav > a:not(:first-child),
header.header > .container > nav.nav > .nav-dropdown:not(:first-child){
border-left: 1px solid rgba(255,255,255,.14) !important;
}
}
/* === V91: NAV POLISH (HOVER GLOW, DROPDOWN ANIMATIONS, MOBILE SPACING) === */
/* 1) Subtle hover glow + underline for desktop nav links */
@media (min-width: 900px){
header.header > .container > nav.nav > a,
header.header > .container > nav.nav .nav-dropbtn{
position: relative !important;
transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
header.header > .container > nav.nav > a::after,
header.header > .container > nav.nav .nav-dropbtn::after{
content: "" !important;
position: absolute !important;
left: 10px !important;
right: 10px !important;
bottom: 8px !important;
height: 2px !important;
border-radius: 2px !important;
background: rgba(255,255,255,.0) !important;
transform: scaleX(.6) !important;
transform-origin: center !important;
transition: background .18s ease, transform .18s ease !important;
}
header.header > .container > nav.nav > a:hover,
header.header > .container > nav.nav .nav-dropbtn:hover{
box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.22) !important;
background: rgba(255,255,255,.06) !important;
transform: translateY(-1px) !important;
}
header.header > .container > nav.nav > a:hover::after,
header.header > .container > nav.nav .nav-dropbtn:hover::after{
background: rgba(255,255,255,.55) !important;
transform: scaleX(1) !important;
}
/* 2) Dropdown animation (fade + slide) */
header.header nav.nav .nav-dropmenu{
transform: translateY(-6px) !important;
transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}
header.header nav.nav .nav-dropdown:hover .nav-dropmenu,
header.header nav.nav .nav-dropdown:focus-within .nav-dropmenu{
transform: translateY(0) !important;
}
/* Dropdown item hover polish */
header.header nav.nav .nav-dropmenu a{
transition: background-color .16s ease, transform .16s ease !important;
}
header.header nav.nav .nav-dropmenu a:hover,
header.header nav.nav .nav-dropmenu a:focus{
transform: translateX(2px) !important;
}
}
/* 3) Mobile nav spacing improvements */
@media (max-width: 820px){
/* Make mobile nav panel roomy and readable */
nav.nav{
padding: 10px 12px !important;
}
nav.nav > a,
nav.nav .nav-dropbtn{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 14px !important;
min-height: 50px !important;
border-radius: 12px !important;
margin: 6px 0 !important;
}
/* Mobile dropdown menu items */
nav.nav .nav-dropmenu{
padding: 6px 0 !important;
margin: 6px 0 10px 0 !important;
border-radius: 12px !important;
overflow: hidden !important;
}
nav.nav .nav-dropmenu a{
padding: 12px 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
/* Slightly larger tap target for the mobile menu button */
.mobile-menu-btn, .mobile-nav-toggle{
min-height: 44px !important;
}
}
/* === V92: SHRINK NAV BAR BG TO LINKS, LOGO TOUCHES BAR, LINKS AT BOTTOM, DROPDOWN COLOR TUNED === */
@media (min-width: 900px){
:root{ --deskNavBarH: 76px; }
/* Header row height */
header.header > .container{
min-height: 190px !important;
}
/* Brand (logo+text) shares the nav bar row and touches top+bottom */
header.header > .container > a.brand{
grid-row: 2 / 3 !important;
height: var(--deskNavBarH) !important;
min-height: var(--deskNavBarH) !important;
align-items: stretch !important;
}
header.header > .container > a.brand img{
height: 100% !important;
width: auto !important;
object-fit: contain !important;
}
/* Move the text down a bit (still nicely aligned) */
header.header > .container > a.brand .brand-text{
height: 100% !important;
justify-content: flex-end !important;
padding-bottom: 10px !important;
}
/* NAV: make the pill/bar only as wide as the links */
header.header > .container > nav.nav{
grid-column: 2 / 3 !important;
grid-row: 2 / 3 !important;
/* shrink to content */
width: fit-content !important;
max-width: 100% !important;
justify-self: end !important;
height: var(--deskNavBarH) !important;
min-height: var(--deskNavBarH) !important;
/* links sit at the bottom of the nav bar */
align-items: flex-end !important;
/* background only behind links (because nav is fit-content) */
background: rgba(11,15,22,.62) !important;
border-radius: 10px !important;
/* small, even padding inside bar */
padding: 6px 0 !important;
overflow: visible !important;
flex-wrap: nowrap !important;
}
/* Links: bottom aligned */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav .nav-dropbtn{
height: calc(var(--deskNavBarH) - 12px) !important;
min-height: calc(var(--deskNavBarH) - 12px) !important;
display: inline-flex !important;
align-items: flex-end !important;
/* put the label at the bottom of the bar */
padding: 0 10px 10px 10px !important;
font-size: 14px !important;
line-height: 1 !important;
color: #fff !important;
}
/* Make dropdown buttons match other links exactly */
header.header > .container > nav.nav .nav-dropbtn{
color: #fff !important;
background: transparent !important;
}
/* Divider inside the bar */
header.header > .container > nav.nav > a:not(:first-child),
header.header > .container > nav.nav > .nav-dropdown:not(:first-child){
border-left: 1px solid rgba(255,255,255,.14) !important;
}
/* Dropdown menu color tuned to the site's dark navy palette */
header.header nav.nav .nav-dropmenu{
background: #0e2236 !important; /* deep navy */
border: 1px solid rgba(255,255,255,.12) !important;
}
header.header nav.nav .nav-dropmenu a:hover,
header.header nav.nav .nav-dropmenu a:focus{
background: rgba(255,255,255,.10) !important;
}
/* If viewport is narrow, allow wrapping so bar doesn't overflow */
@media (max-width: 1100px){
header.header > .container > nav.nav{
flex-wrap: wrap !important;
}
}
}
/* === V93: SHORTER LINK BAR, LOGO TOP/BOTTOM, BRAND TEXT CENTERED === */
@media (min-width: 900px){
/* Make the bar behind links shorter */
:root{ --deskNavBarH: 64px; }
/* Brand row height matches nav bar */
header.header > .container > a.brand{
height: var(--deskNavBarH) !important;
min-height: var(--deskNavBarH) !important;
align-items: stretch !important;
}
/* Logo touches top+bottom of the navigation bar */
header.header > .container > a.brand img{
height: 100% !important;
max-height: none !important;
width: auto !important;
object-fit: contain !important;
}
/* Text centered vertically (middle of bar next to logo) */
header.header > .container > a.brand .brand-text{
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding-bottom: 0 !important;
transform: translateY(2px) !important; /* slight nudge down for optical centering */
}
/* Nav pill only as wide as links, and shorter */
header.header > .container > nav.nav{
height: var(--deskNavBarH) !important;
min-height: var(--deskNavBarH) !important;
width: fit-content !important;
justify-self: end !important;
/* less vertical padding makes bar shorter visually */
padding: 4px 0 !important;
align-items: flex-end !important;
border-radius: 10px !important;
}
/* Links sit at the bottom with tighter bottom padding */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav .nav-dropbtn{
height: calc(var(--deskNavBarH) - 8px) !important;
min-height: calc(var(--deskNavBarH) - 8px) !important;
padding: 0 10px 8px 10px !important;
display: inline-flex !important;
align-items: flex-end !important;
font-size: 14px !important;
line-height: 1 !important;
}
}
/* === V94: HARD OVERRIDE (VERY SPECIFIC) === */
@media (min-width: 900px){
/* BAR HEIGHT: shorter */
header.header > .container{
/* don't let earlier rules force extra height */
height: auto !important;
overflow: visible !important;
}
/* Use a single shared bar height */
header.header > .container{ --deskNavBarH: 56px; }
/* BRAND: no padding/margins, logo touches top+bottom */
header.header > .container > a.brand{
grid-column: 1 / 2 !important;
grid-row: 2 / 3 !important;
height: var(--deskNavBarH) !important;
min-height: var(--deskNavBarH) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: stretch !important; /* critical */
gap: 10px !important;
}
header.header > .container > a.brand > img{
height: 100% !important; /* touches top+bottom */
width: auto !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
}
header.header > .container > a.brand > .brand-text{
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* centered in middle */
align-items: flex-start !important;
transform: translateY(4px) !important; /* nudge down a bit */
}
/* NAV PILL: only as wide as links, and SHORT */
header.header > .container > nav.nav{
grid-column: 2 / 3 !important;
grid-row: 2 / 3 !important;
width: fit-content !important;
max-width: 100% !important;
justify-self: end !important;
height: var(--deskNavBarH) !important;
min-height: var(--deskNavBarH) !important;
padding: 3px 0 !important; /* shorter bar */
margin: 0 !important;
display: flex !important;
align-items: flex-end !important; /* links at bottom */
justify-content: flex-end !important;
background: rgba(11,15,22,.55) !important;
border-radius: 10px !important;
}
/* LINKS: sit at bottom, compact */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav > .nav-dropdown > button.nav-dropbtn{
height: calc(var(--deskNavBarH) - 6px) !important;
min-height: calc(var(--deskNavBarH) - 6px) !important;
padding: 0 10px 6px 10px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: flex-end !important;
font-size: 14px !important;
line-height: 1 !important;
color: #fff !important;
background: transparent !important;
}
/* DIVIDERS */
header.header > .container > nav.nav > a:not(:first-child),
header.header > .container > nav.nav > .nav-dropdown:not(:first-child){
border-left: 1px solid rgba(255,255,255,.14) !important;
}
}
/* === V95: LOGO FULL HEIGHT, BRAND TEXT LOWER + BACKPLATE, LINKS LOWER, NAV PILL SHORT TO TOP OF TEXT === */
@media (min-width: 900px){
/* Slightly taller shared bar so logo can truly fill */
header.header > .container{ --desks: 74px; }
/* BRAND BAR */
header.header > .container > a.brand{
height: var(--s) !important;
min-height: var(--s) !important;
align-items: stretch !important;
}
/* Make sure nothing caps the logo height anywhere */
header.header > .container > a.brand > img,
header.header .brand img{
height: 100% !important;
max-height: none !important;
min-height: 100% !important;
width: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
object-fit: cover !important;
}
/* Move brand text DOWN and add a black backplate that covers ALL text */
header.header > .container > a.brand > .brand-text{
height: 100% !important;
justify-content: center !important;
transform: translateY(10px) !important; /* move down more */
}
header.header > .container > a.brand > .brand-text .brand-title,
header.header > .container > a.brand > .brand-text .brand-sub,
header.header > .container > a.brand > .brand-text .brand-services{
background: rgba(0,0,0,.58) !important;
padding: 2px 8px !important;
border-radius: 8px !important;
width: fit-content !important;
}
header.header > .container > a.brand > .brand-text{
gap: 4px !important;
}
/* NAV PILL: shorten so it ends at top of link text */
header.header > .container > nav.nav{
height: var(--s) !important;
min-height: var(--s) !important;
padding-top: 0 !important; /* no extra space above */
padding-bottom: 2px !important;/* tiny bottom breathing room */
padding-left: 0 !important;
padding-right: 0 !important;
align-items: flex-end !important;
}
/* LINKS: move DOWN more (bigger bottom padding) and remove top padding */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav > .nav-dropdown > button.nav-dropbtn{
height: auto !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
padding-bottom: 10px !important; /* moves text down */
align-items: flex-end !important;
}
/* Make the pill visually "short" by matching its background to only behind items */
header.header > .container > nav.nav{
background: rgba(11,15,22,.50) !important;
}
}
/* === V96: SCALE LOGO + NAV BAR BACK TO PROPER SIZE === */
@media (min-width: 900px){
/* Reduce shared nav bar height */
header.header > .container{ --desks: 58px; }
/* Brand bar height */
header.header > .container > a.brand{
height: var(--desks) !important;
min-height: var(--desks) !important;
align-items: stretch !important;
}
/* Logo fits bar without being oversized */
header.header > .container > a.brand > img{
height: 100% !important;
max-height: 100% !important;
width: auto !important;
object-fit: contain !important;
}
/* Brand text centered again (no giant shift) */
header.header > .container > a.brand > .brand-text{
height: 100% !important;
justify-content: center !important;
transform: translateY(0) !important;
}
/* Nav bar height matches brand */
header.header > .container > nav.nav{
height: var(--desks) !important;
min-height: var(--desks) !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
align-items: flex-end !important;
}
/* Links normal spacing */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav > .nav-dropdown > button.nav-dropbtn{
padding-bottom: 6px !important;
padding-top: 0 !important;
font-size: 14px !important;
}
}
/* === V97: LOGO TOP/BOTTOM, BIGGER BRAND TEXT BACKPLATE, SHORTER LINK PILL + LINKS LOWER === */
@media (min-width: 900px){
/* Keep the compact bar height, but remove any vertical padding that prevents logo touching */
header.header > .container{ --navH: 58px; }
header.header > .container > a.brand{
height: var(--navH) !important;
min-height: var(--navH) !important;
padding: 0 !important;
margin: 0 !important;
align-items: stretch !important; /* so img can truly touch top/bottom */
}
header.header > .container > a.brand > img{
height: 100% !important;
max-height: none !important;
min-height: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
}
/* Bigger black bar behind ALL brand text */
header.header > .container > a.brand > .brand-text{
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
background: rgba(0,0,0,.55) !important;
padding: 6px 12px !important; /* bigger backplate */
border-radius: 10px !important;
align-self: center !important;
width: fit-content !important;
transform: translateY(4px) !important; /* move text down slightly */
}
/* NAV: make the background pill shorter, but links lower */
header.header > .container > nav.nav{
height: var(--navH) !important;
min-height: var(--navH) !important;
padding: 0 !important; /* remove padding that inflates bar */
background: transparent !important; /* we draw a shorter pill with ::before */
position: relative !important;
align-items: flex-end !important;
}
/* Shorter pill behind links (only up to the top of the link text area) */
header.header > .container > nav.nav::before{
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 34px !important; /* shorter than full bar */
background: rgba(11,15,22,.55) !important;
border-radius: 10px !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* Links lower: increase bottom padding and keep them at bottom */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav > .nav-dropdown > button.nav-dropbtn{
position: relative !important;
z-index: 1 !important;
padding: 0 10px 10px 10px !important; /* pushes links down */
height: 34px !important; /* matches pill height */
min-height: 34px !important;
display: inline-flex !important;
align-items: flex-end !important;
}
/* Keep dividers visible over the pill */
header.header > .container > nav.nav > a:not(:first-child),
header.header > .container > nav.nav > .nav-dropdown:not(:first-child){
position: relative !important;
z-index: 1 !important;
border-left: 1px solid rgba(255,255,255,.14) !important;
}
}
/* === V98: FORCE LOGO FULL BAR HEIGHT, BRAND TEXT LOWER, LINKS NEAR BOTTOM === */
@media (min-width: 900px){
/* Define the nav bar height explicitly (logo will fill this) */
header.header > .container{ --navBarH: 58px; }
/* BRAND: stretch to bar height and remove anything that prevents full-height logo */
header.header > .container > a.brand{
height: var(--navBarH) !important;
min-height: var(--navBarH) !important;
padding: 0 !important;
margin: 0 !important;
align-items: stretch !important;
overflow: visible !important;
}
/* Logo must fill top-to-bottom of the bar */
header.header > .container > a.brand > img,
header.header > .container > a.brand img{
height: 100% !important;
max-height: none !important;
min-height: 100% !important;
width: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
object-fit: contain !important;
}
/* Move the words next to logo DOWN toward bottom of the bar */
header.header > .container > a.brand > .brand-text,
header.header > .container > a.brand .brand-text{
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important; /* bottom */
padding-bottom: 8px !important; /* nudge lower */
transform: none !important;
}
/* NAV: keep the pill short, but push links down near bottom of overall bar */
header.header > .container > nav.nav{
height: var(--navBarH) !important;
min-height: var(--navBarH) !important;
align-items: flex-end !important; /* bottom */
}
/* Short pill stays at bottom */
header.header > .container > nav.nav::before{
height: 30px !important; /* slightly shorter */
bottom: 0 !important;
}
/* Links DOWN toward bottom */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav > .nav-dropdown > button.nav-dropbtn{
height: 30px !important;
min-height: 30px !important;
padding: 0 10px 8px 10px !important; /* lower in the pill */
align-items: flex-end !important;
}
}
/* === V99: BRAND TEXT CENTERED, LOGO FULL HEIGHT, LINKS AT BOTTOM === */
@media (min-width: 900px){
header.header > .container{ --navBarH: 58px; }
/* Logo: full height */
header.header > .container > a.brand{
height: var(--navBarH) !important;
min-height: var(--navBarH) !important;
align-items: stretch !important;
padding: 0 !important;
margin: 0 !important;
}
header.header > .container > a.brand img{
height: 100% !important;
min-height: 100% !important;
max-height: none !important;
width: auto !important;
object-fit: contain !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
/* Brand text: CENTER between top and bottom of the nav bar */
header.header > .container > a.brand .brand-text{
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding-bottom: 0 !important;
transform: none !important;
}
/* Nav + links: push to BOTTOM of nav bar */
header.header > .container > nav.nav{
height: var(--navBarH) !important;
min-height: var(--navBarH) !important;
align-items: flex-end !important;
}
/* Keep the short pill at the bottom */
header.header > .container > nav.nav::before{
bottom: 0 !important;
height: 30px !important;
}
/* Links sit at the bottom edge */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav > .nav-dropdown > button.nav-dropbtn{
height: 30px !important;
min-height: 30px !important;
padding: 0 10px 8px 10px !important;
display: inline-flex !important;
align-items: flex-end !important;
}
}
/* === V100: FORCE ROW HEIGHT (LOGO FULL BAR), LINKS BOTTOM-ALIGNED === */
@media (min-width: 900px){
/* Single source of truth for the nav bar row height */
header.header > .container{
--navBarH: 58px;
/* Hard-force the second row (brand + nav) height */
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto var(--navBarH) !important;
align-items: stretch !important;
overflow: visible !important;
}
/* Brand sits in row 2 and stretches to fill it */
header.header > .container > a.brand{
grid-column: 1 / 2 !important;
grid-row: 2 / 3 !important;
height: var(--navBarH) !important;
min-height: var(--navBarH) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: stretch !important; /* critical for full-height logo */
gap: 12px !important;
line-height: 0 !important;
}
/* Logo: absolutely no caps; fill row height */
header.header > .container > a.brand img{
height: 100% !important;
min-height: 100% !important;
max-height: none !important;
width: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
}
/* Brand text: centered vertically (between top/bottom of bar) */
header.header > .container > a.brand .brand-text{
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
line-height: 1.05 !important;
}
/* Nav sits in row 2, col 2 and stretches to bar height */
header.header > .container > nav.nav{
grid-column: 2 / 3 !important;
grid-row: 2 / 3 !important;
height: var(--navBarH) !important;
min-height: var(--navBarH) !important;
width: fit-content !important;
max-width: 100% !important;
justify-self: end !important;
position: relative !important;
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-end !important;
/* Push everything to the bottom of the bar */
align-items: flex-end !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
overflow: visible !important;
}
/* Short pill behind links, anchored to the bottom */
header.header > .container > nav.nav::before{
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 30px !important; /* pill shorter than bar */
background: rgba(11,15,22,.55) !important;
border-radius: 10px !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* Nav items: occupy full bar height, but text sits at bottom */
header.header > .container > nav.nav > a,
header.header > .container > nav.nav > .nav-dropdown{
height: var(--navBarH) !important;
display: flex !important;
align-items: flex-end !important;
position: relative !important;
z-index: 1 !important;
}
header.header > .container > nav.nav > a,
header.header > .container > nav.nav .nav-dropbtn{
/* keep the clickable area full height, but visually sit on bottom */
height: 30px !important; /* match pill height */
min-height: 30px !important;
margin-bottom: 0 !important;
padding: 0 10px 8px 10px !important; /* pushes label to bottom */
display: inline-flex !important;
align-items: flex-end !important;
font-size: 14px !important;
line-height: 1 !important;
color: #fff !important;
background: transparent !important;
}
/* Dividers on top of pill */
header.header > .container > nav.nav > a:not(:first-child),
header.header > .container > nav.nav > .nav-dropdown:not(:first-child){
border-left: 1px solid rgba(255,255,255,.14) !important;
}
/* If needed on slightly narrower screens, allow wrap instead of clipping */
@media (max-width: 1100px){
header.header > .container > nav.nav{ flex-wrap: wrap !important; }
}
}
/* === V101: LOGO TOUCHES TOP/BOTTOM, BRAND TEXT PERFECTLY CENTERED === */
@media (min-width: 900px){
/* Define nav bar row height */
header.header > .container{
--navBarH: 58px;
grid-template-rows: auto var(--navBarH) !important;
}
/* Brand fills nav bar row */
header.header > .container > a.brand{
grid-row: 2 / 3 !important;
height: var(--navBarH) !important;
min-height: var(--navBarH) !important;
display: flex !important;
align-items: stretch !important;
padding: 0 !important;
margin: 0 !important;
gap: 12px !important;
}
/* Logo touches top and bottom */
header.header > .container > a.brand img{
height: 100% !important;
min-height: 100% !important;
max-height: none !important;
width: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
}
/* Text perfectly centered between top and bottom of bar */
header.header > .container > a.brand .brand-text{
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
line-height: 1.1 !important;
padding: 0 !important;
margin: 0 !important;
}
}
/* === V102: ULTRA-SPECIFIC BRAND ALIGN (APPLIES AT 821px+) === */
@media (min-width: 821px){
/* Force the header container into a 2-row grid with a fixed nav row */
header.header > .container{
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto 58px !important; /* nav bar row */
align-items: stretch !important;
}
/* Brand in nav row */
header.header > .container > a.brand,
header.header > .container > a.brand.brand{
grid-column: 1 / 2 !important;
grid-row: 2 / 3 !important;
height: 58px !important;
min-height: 58px !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: stretch !important;
gap: 12px !important;
line-height: 0 !important; /* kill inline image descenders */
}
/* Make the logo physically fill the bar (no intrinsic whitespace constraints) */
header.header > .container > a.brand > img,
header.header > .container > a.brand img{
height: 58px !important;
min-height: 58px !important;
max-height: 58px !important;
width: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
object-fit: cover !important; /* ensures it visually touches */
align-self: stretch !important;
}
/* Center the text block vertically */
header.header > .container > a.brand > .brand-text,
header.header > .container > a.brand .brand-text{
height: 58px !important;
min-height: 58px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1.1 !important;
}
}
/* === V103 FINAL (CACHE-BUST FILE): BRAND LOGO FULL HEIGHT + TEXT CENTERED === */
@media (min-width: 821px){
header.header > .container{
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto 58px !important;
align-items: stretch !important;
overflow: visible !important;
}
header.header > .container > a.brand{
grid-column: 1 / 2 !important;
grid-row: 2 / 3 !important;
height: 58px !important;
min-height: 58px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
gap: 12px !important;
align-items: stretch !important;
}
header.header > .container > a.brand > img{
height: 58px !important;
width: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
}
header.header > .container > a.brand .brand-text{
height: 58px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.1 !important;
}
/* Keep nav in row 2 col 2 */
header.header > .container > nav.nav{
grid-column: 2 / 3 !important;
grid-row: 2 / 3 !important;
height: 58px !important;
min-height: 58px !important;
}
}
/* === V110: HARD OVERRIDE (no CSS vars): keep navbar visible, logo full-height, brand text centered, align with sections === */
/* This block intentionally avoids var(--navH/--navBarH) so it still works even if those vars were broken earlier. */
header.header > .container{
/* align with other sections */
max-width: var(--max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
/* make navbar a real, non-collapsing bar */
height: 76px !important;
min-height: 76px !important;
box-sizing: border-box !important;
/* force a simple, stable layout */
display: flex !important;
align-items: center !important;
gap: 18px !important;
}
/* brand: full bar height, contents centered vertically */
header.header > .container > a.brand{
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
display: flex !important;
align-items: center !important; /* vertical centering */
gap: 14px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important; /* never stick out */
line-height: 1 !important;
flex: 0 0 auto !important;
}
/* logo: touches top/bottom of bar */
header.header > .container > a.brand > img,
header.header > .container > a.brand img{
height: 100% !important;
max-height: 100% !important;
width: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important; /* fills height without cropping */
}
/* brand text: centered between top/bottom of bar */
header.header > .container > a.brand > .brand-text,
header.header > .container > a.brand .brand-text{
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* vertical centering */
align-items: flex-start !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* menu button: same height as bar */
header.header > .container > button[data-menu]{
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
align-self: stretch !important;
margin-left: auto !important; /* push nav/menu to the right */
}
/* nav: keep inside bar */
header.header > .container > nav.nav{
height: 100% !important;
min-height: 100% !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
header.header > .container > nav.nav > a,
header.header > .container > nav.nav > .nav-dropdown > button.nav-dropbtn{
height: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
padding: 0 12px !important;
}
/* Desktop: ensure dropdown menus still position correctly */
@media (min-width: 900px){
header.header > .container{ height: 86px !important; min-height: 86px !important; }
header.header > .container > button[data-menu]{ display:none !important; margin-left: 0 !important; }
header.header > .container > nav.nav{ margin-left: auto !important; }
}
/* ===== END styles.mockup2.v25.css ===== */
/* === BUNDLED HEADER FIX (Jan 2026): Make navbar tall, logo full-height, and brand text vertically centered ===
Goal:
1) Logo fills the full height of the navbar (touches top/bottom)
2) Brand text is centered vertically within the navbar
3) Header/nav aligns with the rest of the site's container width/padding
Notes:
- Uses explicit pixel heights to avoid any CSS custom-property cycles collapsing the bar.
- Only targets header/nav elements.
*/
/* Navbar height (mobile first) */
header.header{
--_navBarH: 110px;
}
@media (min-width: 900px){
header.header{ --_navBarH: 120px; }
}
/* Keep the header content aligned with other sections */
header.header > .container{
max-width: var(--max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Ensure the "brand row" is exactly navbar height (prevents tall grid row overflow) */
header.header > .container{
/* Many earlier rules flip this container between flex/grid; this is safe either way */
}
@media (min-width: 900px){
header.header > .container{
grid-template-rows: auto var(--_navBarH) !important;
}
}
/* Brand block is exactly navbar height and centers its contents */
header.header > .container > a.brand{
height: var(--_navBarH) !important;
min-height: var(--_navBarH) !important;
max-height: var(--_navBarH) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important; /* vertical center */
overflow: hidden !important; /* nothing can stick out */
gap: 12px !important;
line-height: 0 !important;
}
/* Logo touches top/bottom of navbar */
header.header > .container > a.brand > img,
header.header > .container > a.brand img{
height: 100% !important;
max-height: 100% !important;
width: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important; /* visually touches */
align-self: stretch !important;
}
/* Brand text centered vertically in the navbar */
header.header > .container > a.brand > .brand-text,
header.header > .container > a.brand .brand-text{
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* vertical centering */
align-items: flex-start !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* Menu button matches navbar height and centers */
header.header > .container > button[data-menu]{
height: var(--_navBarH) !important;
min-height: var(--_navBarH) !important;
max-height: var(--_navBarH) !important;
align-self: center !important;
}
/* Nav row matches the navbar height on desktop layouts that place nav in row 2 */
@media (min-width: 900px){
header.header > .container > nav.nav{
min-height: var(--_navBarH) !important;
}
}
/* === v30 NAVBAR WRAPPER: fixed tall bar, centered brand/logo/text === */
header.header .navbar{
display:flex !important;
align-items:center !important;
gap: 16px !important;
height: 120px !important; /* default */
min-height: 120px !important;
padding: 0 !important;
}
@media (max-width: 899px){
header.header .navbar{
height: 110px !important;
min-height: 110px !important;
}
}
/* keep wrapper aligned like other sections */
header.header > .container{
max-width: var(--max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* brand fills wrapper height */
header.header .navbar > a.brand{
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
display:flex !important;
align-items:center !important;
overflow:hidden !important;
padding:0 !important;
margin:0 !important;
gap:12px !important;
}
/* logo touches top/bottom (within bar) */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
height: 100% !important;
max-height: 100% !important;
width:auto !important;
display:block !important;
object-fit: cover !important;
align-self: stretch !important;
}
/* brand text vertically centered */
header.header .navbar > a.brand .brand-text{
height: 100% !important;
display:flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
margin:0 !important;
padding:0 !important;
line-height: 1.1 !important;
}
/* menu button centered and same height feel */
header.header .navbar > button[data-menu]{
height: 52px !important;
align-self: center !important;
}
/* nav sits on right and stays visible */
header.header .navbar > nav.nav{
margin-left: auto !important;
height: auto !important;
min-height: 0 !important;
align-self: center !important;
overflow: visible !important;
z-index: 5 !important;
}
/* === v31 HARD RESET: prevent header container height collapse; lock navbar layout === */
header.header > .container{
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
}
/* Navbar wrapper: explicit height and visible area */
header.header .navbar{
height: 120px !important;
min-height: 120px !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important; /* nothing can stick out */
}
@media (max-width: 899px){
header.header .navbar{
height: 110px !important;
min-height: 110px !important;
}
}
/* Put nav links on the right on desktop, keep them vertically centered */
header.header .navbar > nav.nav{
position: static !important;
margin-left: auto !important;
height: 100% !important;
min-height: 100% !important;
display: flex !important;
align-items: center !important;
padding: 0 !important;
}
/* Ensure menu button sits between brand and nav and is centered */
header.header .navbar > button[data-menu]{
position: static !important;
height: 100% !important;
min-height: 100% !important;
display: inline-flex !important;
align-items: center !important;
margin-left: auto !important;
}
/* If both menu button + nav show at the same time (some breakpoints), keep order stable */
header.header .navbar > a.brand{ order: 0 !important; }
header.header .navbar > button[data-menu]{ order: 1 !important; }
header.header .navbar > nav.nav{ order: 2 !important; }
/* === v32: Double-height navbar and bottom-align nav buttons === */
/* Double the navbar height */
header.header .navbar{
height: 240px !important; /* desktop */
min-height: 240px !important;
align-items: flex-start !important; /* allow bottom alignment for nav */
}
@media (max-width: 899px){
header.header .navbar{
height: 220px !important; /* mobile */
min-height: 220px !important;
}
}
/* Keep brand filling full bar height */
header.header .navbar > a.brand{
height: 100% !important;
min-height: 100% !important;
align-items: center !important; /* keep logo/text centered vertically */
}
/* Move navigation buttons to bottom of navbar */
header.header .navbar > nav.nav{
margin-top: auto !important; /* push to bottom */
height: auto !important;
min-height: 0 !important;
align-items: center !important;
padding-bottom: 16px !important; /* breathing room from bottom edge */
}
/* Menu button follows nav to bottom as well */
header.header .navbar > button[data-menu]{
margin-top: auto !important;
align-self: flex-end !important;
height: auto !important;
min-height: 0 !important;
padding-bottom: 16px !important;
}
/* === v33: Logo fits to top, brand text centered, desktop menu hidden, nav links one-row consistent === */
/* Keep navbar as tall bar; ensure internal layout supports bottom-aligned nav row */
header.header .navbar{
align-items: stretch !important; /* allow children to control vertical placement */
}
/* BRAND: pin to top, prevent logo cropping */
header.header .navbar > a.brand{
align-items: flex-start !important; /* pin children to top */
overflow: visible !important; /* do not crop logo */
}
/* Logo: fit inside bar without cropping, pinned to top */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
object-fit: contain !important; /* never crop */
align-self: flex-start !important; /* top of bar */
height: 100% !important;
max-height: 100% !important;
margin-top: 0 !important;
}
/* Brand text: vertically centered within the navbar, nudged down slightly */
header.header .navbar > a.brand .brand-text{
height: 100% !important;
align-self: stretch !important;
justify-content: center !important;
padding-top: 14px !important; /* slight nudge down so it feels centered */
padding-bottom: 0 !important;
}
/* Hide menu button on desktop; keep on mobile */
@media (min-width: 900px){
header.header .navbar > button[data-menu]{
display: none !important;
}
}
/* NAV: bottom-aligned, single row, consistent formatting */
header.header .navbar > nav.nav{
margin-top: auto !important; /* stays at bottom */
padding-bottom: 16px !important;
width: auto !important;
flex-wrap: nowrap !important; /* one row */
white-space: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 14px !important;
}
/* Make all nav items match (links + dropdown buttons) */
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 12px !important;
border-radius: 10px !important;
line-height: 1 !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
white-space: nowrap !important;
}
/* Normalize dropdown button appearance to look like links */
header.header .navbar > nav.nav .nav-dropdown > button{
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
}
/* Ensure dropdown menus still overlay correctly */
header.header .navbar > nav.nav .nav-dropmenu{
top: 100% !important;
}
/* === v34: Fix logo top alignment, match widths with topbar/rss containers, unify nav link color === */
/* Ensure navbar wrapper spans full container width and doesn't inherit strange margins */
header.header .navbar{
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important; /* allow logo top to align without being clipped */
}
/* Match header container padding exactly to .container (topbar/rss use this) */
header.header > .container{
max-width: var(--max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Brand pinned to top of navbar */
header.header .navbar > a.brand{
align-items: flex-start !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Logo: align top edge with top of navbar and prevent cropping */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
align-self: flex-start !important;
margin-top: 0 !important;
padding-top: 0 !important;
transform: none !important;
height: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* no cropping */
}
/* Text: centered vertically within full navbar height (slight nudge down) */
header.header .navbar > a.brand .brand-text{
height: 100% !important;
justify-content: center !important;
padding-top: 18px !important; /* adjust centering in tall bar */
}
/* Make all nav links and dropdown buttons the same color as Home */
header.header .navbar > nav.nav{
color: rgba(255,255,255,.95) !important;
}
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
color: inherit !important;
}
header.header .navbar > nav.nav .nav-dropmenu a{
color: inherit !important;
}
/* === v35: Fix logo top clipping, align navbar left with site container, prevent nav overflow === */
/* Some earlier rules clip header content; ensure header container doesn't clip the navbar/logo */
header.header > .container{
overflow: visible !important;
}
/* Ensure navbar aligns to the SAME left/right inset as the rest of the site (.container padding is 20px here)
and only affect the navbar block (not the topbar) */
header.header .navbar{
box-sizing: border-box !important;
width: calc(100% + 0px) !important;
margin-left: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Brand: guarantee the logo starts at the very top edge of the navbar */
header.header .navbar > a.brand{
align-items: flex-start !important;
padding-top: 0 !important;
margin-top: 0 !important;
height: 100% !important;
min-height: 100% !important;
}
/* If the logo is being pushed up by transforms/filters elsewhere, kill them */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-self: flex-start !important;
margin-top: 0 !important;
padding-top: 0 !important;
transform: none !important;
top: 0 !important;
object-fit: contain !important;
}
/* Prevent navigation buttons from overflowing past the right margin */
@media (min-width: 900px){
header.header .navbar{
gap: 12px !important;
}
header.header .navbar > nav.nav{
flex: 1 1 auto !important; /* take remaining space */
max-width: 100% !important;
box-sizing: border-box !important;
flex-wrap: wrap !important; /* allow wrapping instead of overflowing */
row-gap: 8px !important;
column-gap: 12px !important;
overflow: hidden !important;
}
/* Slightly tighten item padding so a full row fits more often */
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
padding: 8px 10px !important;
font-size: 14px !important;
}
}
/* === v36: Make NAVBAR bar edges align with TOPBAR edges (do not move topbar) ===
We make only the .navbar "full-bleed" inside the header container by canceling the
header container's 20px side padding with negative margins, then re-applying 20px
padding inside the navbar so its *content* stays aligned with the topbar content.
*/
header.header > .container{ padding-left: 20px !important; padding-right: 20px !important; }
header.header .navbar{
box-sizing: border-box !important;
width: calc(100% + 40px) !important; /* extend to container outer edge */
margin-left: -20px !important; /* move left to match topbar edge */
margin-right: -20px !important; /* extend right to match topbar edge */
padding-left: 20px !important; /* keep inner content aligned */
padding-right: 20px !important;
}
/* === v37: Align logo left edge with the 1's/0's matrix edge (do not move animation) ===
The matrix (#topbar-matrix) is absolutely positioned with inset:0 inside .topbar .container,
so its left edge is the container edge. Our navbar content has 20px padding; pull only the brand
left by 20px so the logo aligns to that edge.
*/
header.header .navbar > a.brand{
margin-left: -20px !important; /* move logo block to the very left edge */
padding-left: 0 !important;
}
/* === v38: Align logo with visible matrix/content edge (no topbar movement) ===
The topbar content sits inside .topbar .container padding (20px). Align the logo/image
to that same edge by removing the extra negative shift on the brand.
*/
header.header .navbar > a.brand{
margin-left: 0 !important; /* align with topbar content edge */
}
/* If you still see a slight mismatch due to logo image intrinsic whitespace,
nudge the image itself a bit left/right by changing this value. */
header.header .navbar > a.brand > img{
position: relative !important;
left: 0 !important;
}
/* === v39: Align logo to matrix edge (left), and extend header "computer" background to matrix right edge === */
/* The header background layers were being inset (left/right:20px). Make them full-bleed to match matrix. */
header.header > .container::before,
header.header > .container::after{
left: 0 !important;
right: 0 !important;
width: auto !important;
border-radius: 0 !important;
}
/* Logo/brand: align its left edge with the matrix edge by canceling navbar inner padding */
header.header .navbar > a.brand{
margin-left: -20px !important; /* pull to the bar edge */
}
/* Also ensure the image itself isn't shifted by any transforms */
header.header .navbar > a.brand > img{
transform: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* === v40: Move logo further left (~40px more) and extend right background further right; normalize nav link vertical alignment === */
/* Move logo/brand further left by an additional 40px (total shift = 60px) */
header.header .navbar > a.brand{
margin-left: -60px !important;
}
/* Extend the header background layers slightly past the container edges (~40px each way) */
header.header > .container::before,
header.header > .container::after{
left: -40px !important;
right: -40px !important;
}
/* Normalize nav link/button vertical alignment */
header.header .navbar > nav.nav{
align-items: center !important;
}
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
height: 44px !important; /* consistent hit area */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
vertical-align: middle !important;
}
/* Ensure caret/icons inside dropdown buttons don't change baseline */
header.header .navbar > nav.nav .nav-dropdown > button *{
line-height: 1 !important;
}
/* === v41: shift logo/bg ~40px more, unify nav item vertical alignment, and start nav pill at Home link === */
/* Shift logo/brand 40px more left (was -60px) */
header.header .navbar > a.brand{
margin-left: -100px !important;
}
/* Extend header background 40px more each side (was -40px) */
header.header > .container::before,
header.header > .container::after{
left: -80px !important;
right: -80px !important;
}
/* Start the nav background "pill/box" exactly at the Home link */
header.header .navbar > nav.nav{
padding-left: 0 !important;
padding-right: 0 !important;
gap: 0 !important; /* rely on per-link padding for spacing */
}
/* Strong vertical alignment normalization for ALL top-level nav items */
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
height: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 44px !important; /* hard baseline */
padding-top: 0 !important;
padding-bottom: 0 !important;
transform: none !important;
top: auto !important;
position: relative !important;
}
/* Ensure internal spans/icons don't shift baseline */
header.header .navbar > nav.nav a *,
header.header .navbar > nav.nav button *{
line-height: 1 !important;
vertical-align: middle !important;
}
/* === v42: shift logo/bg ~25px more and right-align nav to the image edge === */
/* Move logo/brand another ~25px left (was -100px) */
header.header .navbar > a.brand{
margin-left: -125px !important;
}
/* Extend header background another ~25px each side (was -80px) */
header.header > .container::before,
header.header > .container::after{
left: -105px !important;
right: -105px !important;
}
/* Align navigation links to the right side of the header image */
@media (min-width: 900px){
header.header .navbar{
justify-content: space-between !important; /* brand left, nav right */
}
header.header .navbar > nav.nav{
margin-left: auto !important; /* push nav to the far right */
justify-content: flex-end !important;
text-align: right !important;
}
}
/* === v43: tweak shifts (-5px), right-align nav to image edge, dropdowns above RSS, logo -25% === */
/* 1) Pull back each way by 5px */
header.header .navbar > a.brand{ margin-left: -120px !important; } /* was -125 */
header.header > .container::before,
header.header > .container::after{ left: -100px !important; right: -100px !important; } /* was -105 */
/* 2) Align nav buttons to the right edge of the header image.
The header image/background is extended to the container edge via ::before/::after.
Cancel the navbar's inner right padding so nav can sit on that edge.
*/
@media (min-width: 900px){
header.header .navbar{ padding-right: 0 !important; }
header.header .navbar > nav.nav{
margin-right: -20px !important; /* cancel the container's 20px inset so buttons hit the edge */
justify-content: flex-end !important;
}
}
/* Fix dropdowns going behind RSS/feed: ensure stacking + overflow are correct */
header.header{ z-index: 30000 !important; }
header.header > .container,
header.header .navbar,
header.header .navbar > nav.nav{ overflow: visible !important; }
header.header .nav-dropmenu{
z-index: 40000 !important;
position: absolute !important;
}
/* 3) Reduce logo size by ~25% while keeping it aligned to the top of navbar */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
height: 75% !important;
max-height: 75% !important;
width: auto !important;
object-fit: contain !important;
align-self: flex-start !important; /* keep top aligned */
}
/* === v44: dropdown links left-aligned, force logo scale 75%, shift nav +30px, nav pill starts at Home, center items in pill === */
/* 1) Dropdown links left aligned */
header.header .nav-dropmenu,
header.header .nav-dropmenu a{
text-align: left !important;
justify-content: flex-start !important;
}
/* 2) Force logo image size reduction by 25% using transform (beats height conflicts) */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
transform: scale(0.75) !important;
transform-origin: top left !important;
}
/* 3) Shift navigation links to the right by 30px */
@media (min-width: 900px){
header.header .navbar > nav.nav{
margin-right: -20px !important; /* keep hitting image edge */
padding-left: 30px !important; /* shift right */
}
}
/* 4) Start the bar behind navigation links at Home link (remove nav padding that creates left inset) */
header.header .navbar > nav.nav{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 5) Center-align all nav items within the pill/box */
header.header .navbar > nav.nav{
display: flex !important;
align-items: center !important;
}
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* === v45 HARD: logo touches top/bottom; nav shifted right 30px; nav pill starts at Home; nav items centered; brand text left 20px + centered stack === */
/* 1) Logo touches top and bottom of navbar (kill any scaling, force stretch) */
header.header .navbar > a.brand{
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
align-items: stretch !important;
overflow: hidden !important;
}
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
transform: none !important; /* override prior scale */
height: 100% !important;
max-height: 100% !important;
width: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
object-fit: cover !important; /* visually touches top/bottom */
align-self: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
/* 5) Shift the text block left 20px AND center Cornbelt/IT Services over the services line */
header.header .navbar > a.brand .brand-text{
position: relative !important;
left: -20px !important; /* shift left */
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important; /* center stack */
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
}
header.header .navbar > a.brand .brand-title,
header.header .navbar > a.brand .brand-sub,
header.header .navbar > a.brand .brand-services{
width: 100% !important;
text-align: center !important;
}
/* 2) Shift the nav (links + pill) right by 30px on desktop without adding left inset inside the pill */
@media (min-width: 900px){
header.header .navbar > nav.nav{
position: relative !important;
left: 30px !important; /* shift right */
}
}
/* 3) Start the bar behind the navigation links right at Home link (remove any nav padding/inset) */
header.header .navbar > nav.nav{
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: auto !important;
box-sizing: border-box !important;
}
/* 4) Center-align all nav items within the pill/box and normalize vertical alignment */
header.header .navbar > nav.nav{
display: flex !important;
align-items: center !important;
}
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
height: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
line-height: 44px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
vertical-align: middle !important;
}
/* === v46 HARDER: logo 25% smaller (width only) but full-height; nav pill fits links only; shift nav +15px; equal bottom alignment; brand text down 20px === */
/* 1) Logo 25% smaller but still touches top/bottom:
shrink WIDTH by 25% while keeping HEIGHT at 100% */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
height: 100% !important;
max-height: 100% !important;
width: auto !important;
transform: scaleX(0.75) !important;
transform-origin: top left !important;
}
/* 5) Move the text next to the logo DOWN by 20px (keep centered stack) */
header.header .navbar > a.brand .brand-text{
transform: translateY(20px) !important;
}
/* 2) Bar behind navigation links only as wide as the links (pill wraps content) */
@media (min-width: 900px){
header.header .navbar > nav.nav{
display: inline-flex !important;
width: fit-content !important;
flex: 0 0 auto !important;
}
}
/* 3) Shift navigation links to the right by 15px */
@media (min-width: 900px){
header.header .navbar > nav.nav{
position: relative !important;
left: 15px !important;
}
}
/* 4) Make all nav text the same distance from the bottom of the navbar */
@media (min-width: 900px){
header.header .navbar{
align-items: stretch !important; /* allow bottom alignment */
}
header.header .navbar > nav.nav{
align-self: flex-end !important;
margin-top: 0 !important;
padding-bottom: 18px !important; /* consistent distance from bottom */
}
}
/* Normalize nav item heights/baselines so none sit higher/lower */
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
height: 44px !important;
line-height: 44px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
align-items: center !important;
justify-content: center !important;
}
/* === v47: logo top aligned to navbar, brand text -5px, nav +10px and centered in pill, animated glow strike through 'Cornbelt' === */
/* 1) Logo: align its TOP edge with the TOP of the navbar */
header.header .navbar > a.brand{
align-items: flex-start !important;
padding-top: 0 !important;
}
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
position: relative !important;
top: 0 !important; /* ensure no upward shift */
margin-top: 0 !important;
align-self: flex-start !important; /* pin to top */
object-fit: contain !important; /* avoid cropping */
height: 100% !important;
max-height: 100% !important;
}
/* 2) Shift the text next to the logo LEFT by 5px (relative to current) */
header.header .navbar > a.brand .brand-text{
left: -25px !important; /* was -20px */
}
/* 3) Nav: move RIGHT by +10px (relative to current), and center items inside the pill */
@media (min-width: 900px){
header.header .navbar > nav.nav{
left: 25px !important; /* was 15px */
justify-content: center !important;
padding-left: 12px !important; /* give pill symmetric breathing room */
padding-right: 12px !important;
gap: 12px !important;
}
}
/* Keep all nav items perfectly centered vertically */
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
align-items: center !important;
justify-content: center !important;
}
/* 4) Animated glow strike through the word 'Cornbelt' using logo-ish colors */
header.header .brand-title{
position: relative !important;
display: inline-block !important;
}
/* strike line */
header.header .brand-title::after{
content: "" !important;
position: absolute !important;
left: -6% !important;
right: -6% !important;
top: 58% !important; /* strikes through the word */
height: 3px !important;
border-radius: 999px !important;
background: linear-gradient(90deg,
rgba(0,255,166,0),
rgba(0,255,166,0.95),
rgba(0,200,255,0.95),
rgba(0,255,166,0.95),
rgba(0,255,166,0)
) !important;
background-size: 220% 100% !important;
filter: drop-shadow(0 0 10px rgba(0,255,166,0.75)) drop-shadow(0 0 14px rgba(0,200,255,0.55)) !important;
animation: cornbeltGlowSweep 2.6s linear infinite !important;
opacity: 0.95 !important;
pointer-events: none !important;
}
@keyframes cornbeltGlowSweep{
0% { background-position: 0% 50%; opacity: .35; transform: scaleX(.92); }
30% { opacity: .95; transform: scaleX(1.02); }
100% { background-position: 200% 50%; opacity: .55; transform: scaleX(.92); }
}
/* === v48: logo down, subtle yellow glow, nav baseline fix, nav +20px === */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
transform: translateY(6px) scaleX(0.75) !important;
transform-origin: top left !important;
height: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
/* subtle corn-yellow strike */
header.header .brand-title::after{
height: 2px !important;
top: 60% !important;
background: linear-gradient(90deg,
rgba(245,197,66,0),
rgba(245,197,66,0.55),
rgba(245,197,66,0.85),
rgba(245,197,66,0.55),
rgba(245,197,66,0)
) !important;
background-size: 220% 100% !important;
filter: drop-shadow(0 0 6px rgba(245,197,66,0.35)) !important;
opacity: 0.55 !important;
animation: cornbeltGlowSweepSubtle 3.8s ease-in-out infinite !important;
}
@keyframes cornbeltGlowSweepSubtle{
0% { background-position: 0% 50%; opacity: .25; transform: scaleX(.96); }
45% { opacity: .60; transform: scaleX(1.00); }
100% { background-position: 200% 50%; opacity: .30; transform: scaleX(.96); }
}
/* move nav right +20px (was 25px) */
@media (min-width: 900px){
header.header .navbar > nav.nav{ left: 45px !important; }
}
/* nav baseline normalization */
header.header .navbar > nav.nav{ align-items: center !important; }
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
height: 44px !important;
min-height: 44px !important;
padding: 0 12px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
vertical-align: middle !important;
position: relative !important;
top: 0 !important;
transform: none !important;
font: inherit !important;
}
header.header .navbar > nav.nav .nav-dropdown > button{
appearance: none !important;
-webkit-appearance: none !important;
}
/* === v49 HARD: stop logo top cropping + absolute nav text alignment === */
/* Logo: remove any clipping from ancestors and pin image top within the bar */
header.header .navbar{ overflow: visible !important; }
header.header .navbar > a.brand{
overflow: visible !important; /* stop cropping */
align-items: flex-start !important;
}
/* Force logo image to NOT be cropped and to start at top edge */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
transform: scaleX(0.75) !important; /* keep 25% width reduction */
transform-origin: top left !important;
position: relative !important;
top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
height: 100% !important;
max-height: 100% !important;
width: auto !important;
object-fit: contain !important; /* never crop */
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-self: flex-start !important;
filter: none !important; /* avoid glow clipping */
}
/* Nav: eliminate baseline drift by forcing identical typography + box metrics */
header.header .navbar > nav.nav{
align-items: center !important;
}
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
height: 46px !important;
min-height: 46px !important;
line-height: 46px !important; /* hard baseline */
padding: 0 12px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
vertical-align: middle !important;
position: relative !important;
top: 0 !important;
transform: none !important;
}
/* Dropdown buttons: remove default button quirks that shift text */
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
border: 0 !important;
background: transparent !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* Any inner spans/icons shouldn't alter baseline */
header.header .navbar > nav.nav a *,
header.header .navbar > nav.nav button *{
line-height: 1 !important;
vertical-align: middle !important;
}
/* === v50 HARDER: ensure logo not clipped (nudge down) + restore divider lines for ALL nav items (links + dropdowns) === */
/* Logo: nudge down a few px so the top isn't clipped */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
top: 4px !important;
height: calc(100% - 4px) !important;
max-height: calc(100% - 4px) !important;
}
/* Dividers: apply to every direct child after the first (covers and .nav-dropdown wrappers) */
header.header .navbar > nav.nav{
gap: 0 !important;
}
header.header .navbar > nav.nav > *{
display: inline-flex !important;
align-items: center !important;
}
header.header .navbar > nav.nav > *:not(:first-child){
border-left: 1px solid rgba(255,255,255,.22) !important;
}
/* Padding so divider doesn't collide with text */
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav > .nav-dropdown,
header.header .navbar > nav.nav .nav-dropdown > button{
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Remove any inconsistent per-item left borders */
header.header .navbar > nav.nav > a{ border-left: 0 !important; }
header.header .navbar > nav.nav .nav-dropdown > button{ border-left: 0 !important; }
/* === v51: move nav links down 5px, fix logo (top touches bar, no overflow), move cyber/laptop image down === */
/* 1) Move all navigation links down by 5px (top-level items) */
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav > .nav-dropdown,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
position: relative !important;
top: 5px !important;
}
/* 2) Logo: top edge touches navbar top; prevent overflow; keep 25% narrower */
header.header .navbar > a.brand{
overflow: hidden !important; /* keep inside navbar */
align-items: flex-start !important; /* pin to top */
padding-top: 0 !important;
margin-top: 0 !important;
}
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
height: 100% !important;
max-height: 100% !important;
width: auto !important;
object-fit: contain !important; /* no cropping */
align-self: flex-start !important; /* top touch */
transform: scaleX(0.75) !important; /* width -25% */
transform-origin: top left !important;
}
/* 3) Move the cyber/laptop header image down so more of the top is visible */
header.header > .container::before{
height: 240px !important; /* match tall header area */
background-position: right 40px !important; /* push image DOWN */
}
/* === v52: bottom-align nav text, move nav pill down 5px, move cyber image down 10px, force logo down 20px === */
/* 1) Ensure nav items sit the same distance from the bottom of the navbar */
@media (min-width: 900px){
header.header .navbar{
align-items: stretch !important;
}
header.header .navbar > nav.nav{
align-self: flex-end !important;
margin-top: 0 !important;
padding-bottom: 18px !important; /* consistent bottom gap */
align-items: center !important;
}
}
/* Remove any prior per-item vertical offsets so all items align perfectly */
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav > .nav-dropdown,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
top: 0 !important;
transform: none !important;
}
/* 2) Move the BOX (pill) behind the link text down by 5px (move the nav container, not each link) */
@media (min-width: 900px){
header.header .navbar > nav.nav{
position: relative !important;
top: 5px !important;
}
}
/* Keep link text centered inside each button box */
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
height: 46px !important;
min-height: 46px !important;
line-height: 46px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 12px !important;
}
/* 3) Move the cyber/laptop header image down another 10px */
header.header > .container::before{
background-position: right 50px !important; /* was 40px */
}
/* 4) Logo: force a visible DOWN shift by 20px (and keep within navbar) */
header.header .navbar > a.brand{
overflow: hidden !important;
}
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
transform: translateY(20px) scaleX(0.75) !important;
transform-origin: top left !important;
height: calc(100% - 20px) !important;
max-height: calc(100% - 20px) !important;
object-fit: contain !important;
}
/* === v53: reduce logo by 20% and keep nav pill fully inside navbar === */
/* 1) Reduce logo size by 20% (scale to 80%) but keep it aligned */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
transform: translateY(20px) scaleX(0.8) !important;
transform-origin: top left !important;
}
/* 2) Ensure nav pill never drops below navbar */
header.header .navbar{
overflow: hidden !important;
}
header.header .navbar > nav.nav{
position: relative !important;
top: 0 !important; /* remove downward offset */
padding-bottom: 12px !important;
margin-bottom: 0 !important;
align-self: center !important; /* vertically center pill inside bar */
}
/* === v54: move cyber/laptop header image down by 15px more === */
header.header > .container::before{
/* previously set to right 50px; push down 15px more */
background-position: right 65px !important;
}
/* === v55 HARD RESET: fix logo clipping + enforce 20% smaller logo; restore nav bottom alignment; stop right-side cut-off === */
/* Stop clipping that was chopping the logo/nav */
header.header .navbar{
overflow: visible !important;
}
/* Cancel accumulated left shifts that can clip the logo */
header.header .navbar > a.brand{
margin-left: 0 !important;
padding-left: 0 !important;
overflow: visible !important;
align-items: center !important;
}
/* Logo: make it fully visible and 20% smaller */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
transform: none !important; /* remove scale/translate from earlier patches */
height: 80% !important; /* 20% smaller */
max-height: 80% !important;
width: auto !important;
object-fit: contain !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* Keep navbar content aligned and prevent nav from being cut off on the right */
@media (min-width: 900px){
header.header .navbar{
padding-right: 20px !important;
padding-left: 20px !important;
box-sizing: border-box !important;
}
/* Remove prior horizontal shifting hacks */
header.header .navbar > nav.nav{
left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: fit-content !important;
max-width: 100% !important;
overflow: visible !important;
}
}
/* Nav links: align to bottom edge of navbar consistently */
header.header .navbar{
align-items: stretch !important;
}
header.header .navbar > nav.nav{
align-self: flex-end !important;
margin-top: 0 !important;
padding-bottom: 12px !important;
position: relative !important;
top: 0 !important;
}
header.header .navbar > nav.nav > a,
header.header .navbar > nav.nav .nav-dropdown > button,
header.header .navbar > nav.nav button.nav-dropbtn{
top: 0 !important;
}
/* Make sure the nav group sits at the far right, without overflowing */
header.header .navbar > nav.nav{
margin-left: auto !important;
justify-content: flex-end !important;
}
/* === v56: Force logo 20% smaller AND align brand/logo to the LEFT EDGE of the navbar === */
/* Keep navbar content padding for everything else, but pull ONLY the brand to the bar's left edge */
@media (min-width: 900px){
header.header .navbar > a.brand{
margin-left: -20px !important; /* cancel navbar inner padding so logo hits bar edge */
}
}
@media (max-width: 899px){
header.header .navbar > a.brand{
margin-left: -20px !important;
}
}
/* Logo: hard-force 20% smaller (height) and prevent any other rules from re-expanding it */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
height: 80% !important;
max-height: 80% !important;
min-height: 80% !important;
width: auto !important;
transform: none !important; /* kill any scaling overrides */
object-fit: contain !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
/* Ensure brand aligns to the left within navbar flex layout */
header.header .navbar{
justify-content: flex-start !important;
}
header.header .navbar > nav.nav{
margin-left: auto !important; /* keep nav pushed to the right */
}
/* === v57: Veteran Owned badge overlay + logo bottom-left in navbar === */
/* Badge overlay in the top-right of the navbar */
header.header .navbar{
position: relative !important;
}
/* Responsive sizing for badge */
@media (max-width: 899px){
}
/* Move brand/logo to bottom-left corner of navbar */
header.header .navbar{
align-items: stretch !important;
}
header.header .navbar > a.brand{
align-self: flex-end !important;
align-items: flex-end !important;
height: 100% !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Ensure logo is 20% smaller and touches bottom, not clipped */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
height: 80% !important;
max-height: 80% !important;
width: auto !important;
object-fit: contain !important;
align-self: flex-end !important;
margin: 0 !important;
padding: 0 !important;
}
/* === v36: smaller veteran badge, move down 25px, 25% transparency; logo left 40px; nav right 35px === */
/* 1) Veteran badge: 25% smaller, 25% transparency, move down 25px */
/* Mobile size adjustment */
@media (max-width: 899px){
}
/* 2) Move logo left by 40px */
header.header .navbar > a.brand{
margin-left: -40px !important;
}
/* 3) Move navigation links right by 35px */
@media (min-width: 900px){
header.header .navbar > nav.nav{
position: relative !important;
left: 35px !important;
}
}
/* === v37: regenerated veteran badge spacing + shifts requested === */
/* 1) Badge: shift 50px to the right without changing anchor logic */
/* 2) Nav links: move right another 50px (was 35px) */
@media (min-width: 900px){
header.header .navbar > nav.nav{
left: 85px !important;
}
}
/* 3) Logo: move left another 50px (was -40px) */
header.header .navbar > a.brand{
margin-left: -90px !important;
}
/* === v38: fix double scrollbars, cyber image up 10px, logo left +15, nav right +15, badge down 20px & right 30px === */
/* 1) Eliminate horizontal scrollbar (common cause of double scrollbars) */
html, body{
overflow-x: hidden !important;
}
/* Also ensure any full-bleed header background layers don't force horizontal scroll */
header.header > .container::before,
header.header > .container::after{
max-width: 100vw !important;
}
/* 2) Cyber/laptop image up by 10px (was right 65px) */
header.header > .container::before{
background-position: right 55px !important;
}
/* 3) Logo left another 15px (was -90px) */
header.header .navbar > a.brand{
margin-left: -105px !important;
}
/* 4) Nav links right another 15px (was 85px) */
@media (min-width: 900px){
header.header .navbar > nav.nav{
left: 100px !important;
}
}
/* 5) Veteran badge down 20px and right 30px (relative to current) */
/* === v40: Desktop double-scrollbar fix without disturbing navbar layout ===
Likely cause: mobile-drawer styles (fixed/inset/overflow:auto) leaking or a scroll-lock class.
We hard-reset nav drawer behavior on desktop only.
*/
/* Ensure the page itself scrolls normally on desktop */
@media (min-width: 900px){
html, body{
overflow-y: auto !important;
}
body{
height: auto !important;
position: static !important;
}
/* If any menu-open scroll-lock is accidentally applied, neutralize it on desktop */
body.menu-open{
overflow: auto !important;
}
/* Hard-reset any mobile drawer styles that might leak onto desktop nav */
header.header nav.nav{
position: static !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
height: auto !important;
max-height: none !important;
width: auto !important;
max-width: none !important;
overflow: visible !important;
transform: none !important;
box-shadow: none !important;
}
/* If a full-screen overlay element exists, keep it from capturing scroll on desktop */
header.header nav.nav.open{
position: static !important;
overflow: visible !important;
}
}
/* === v41: logo left +15px, cyber image up 4px, new smaller RWB badge +10px right, IT Services yellow === */
/* 1) Logo left another 15px */
header.header .navbar > a.brand{
margin-left: -130px !important; /* was -115px */
}
/* 2) Cyber image up 4px (was right 55px) */
header.header > .container::before{
background-position: right 51px !important;
}
/* 3) Veteran badge: already 25% smaller via new SVG, move right another 10px */
/* 4) Change only "IT Services" text color to logo yellow */
header.header .brand-sub,
header.header .brand-sub span{
color: #f5c542 !important; /* corn yellow */
}
/* === v42: micro shifts + badge glow + IT Services yellow === */
/* 1) Logo right by 5px (reduce negative margin) */
header.header .navbar > a.brand{
margin-left: -125px !important; /* was -130px */
}
/* 2) Nav links right by 10px */
@media (min-width: 900px){
header.header .navbar > nav.nav{
left: 110px !important; /* was 100px */
}
}
/* 3) Veteran badge right by 5px + faint yellow glow */
/* 4) Ensure ONLY 'IT Services' uses logo yellow */
header.header .brand-sub,
header.header .brand-sub span{
color: #f5c542 !important; /* corn yellow */
}
/* Custom navbar adjustments */
/* Restore brand (logo + text) spacing to the last known-good state */
header.header .navbar > a.brand{
gap: 32px !important;
}
header.header .navbar > a.brand > img{
margin-right: 20px !important;
position: relative;
left: 5px;
}
/* Keep IT Services yellow */
header.header .navbar > a.brand .brand-sub,
header.header .navbar > a.brand .brand-sub span{
color: #F8F030 !important;
}
/* Remote Access button: solid dark-red fill (only this button) */
header.header .topbar-actions a.topbar-btn.topbar-remote-link{
background: #9c1616 !important;
background-image: none !important;
background-color: #9c1616 !important;
border-color: #7f1010 !important;
color: #ffffff !important;
}
header.header .topbar-actions a.topbar-btn.topbar-remote-link:hover{
background: #b32424 !important;
background-image: none !important;
background-color: #b32424 !important;
border-color: #9c1616 !important;
}
/* === vMobile: rebuilt mobile styles === */
/* IMPORTANT: All rules are inside mobile media queries so desktop styling is unchanged. */
@media (max-width: 899px){
/* Global spacing + typography */
:root{
--mobile-pad: 16px;
}
body{
font-size: 16px;
line-height: 1.55;
}
.container{
padding-left: var(--mobile-pad) !important;
padding-right: var(--mobile-pad) !important;
}
/* Topbar becomes stacked and scroll-safe */
header.header .topbar{
position: relative !important;
}
header.header .topbar .container{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
padding: 10px var(--mobile-pad) !important;
}
header.header .topbar-links{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
header.header .toplinks{
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
header.header .topbar-actions{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
width: 100% !important;
}
header.header .topbar-actions .topbar-btn{
width: 100% !important;
text-align: center !important;
justify-content: center !important;
padding: 10px 12px !important;
border-radius: 14px !important;
}
/* Navbar layout */
header.header > .container{
position: relative !important;
}
header.header .navbar{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
height: auto !important;
min-height: 0 !important;
padding: 10px 0 !important;
}
/* Brand (logo + text) */
header.header .navbar > a.brand{
margin-left: 0 !important; /* neutralize desktop negative offsets */
gap: 12px !important;
max-width: calc(100% - 110px) !important; /* leave room for menu button */
}
header.header .navbar > a.brand > img{
width: 56px !important;
height: 56px !important;
margin-right: 0 !important;
left: 0 !important;
}
header.header .brand-text{
gap: 2px !important;
transform: none !important;
}
header.header .brand-title{
font-size: 22px !important;
letter-spacing: 0.02em !important;
}
header.header .brand-sub{
font-size: 16px !important;
}
header.header .brand-services{
font-size: 12px !important;
opacity: 0.92 !important;
}
/* Mobile menu button */
header.header .mobile-menu-btn{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 12px !important;
border-radius: 14px !important;
white-space: nowrap !important;
}
/* Nav drawer */
header.header nav.nav{
position: fixed !important;
top: 0 !important;
right: 0 !important;
height: 100vh !important;
width: min(86vw, 360px) !important;
max-width: 360px !important;
padding: 18px 16px !important;
background: rgba(10, 14, 24, 0.96) !important;
backdrop-filter: blur(10px) !important;
transform: translateX(110%) !important;
transition: transform .25s ease !important;
z-index: 9999 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
overflow-y: auto !important;
border-left: 1px solid rgba(255,255,255,0.08) !important;
}
header.header nav.nav.open{
transform: translateX(0) !important;
}
body.menu-open{
overflow: hidden !important;
}
/* Nav links */
header.header nav.nav a,
header.header nav.nav .nav-dropbtn{
color: rgba(255,255,255,0.92) !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 14px !important;
padding: 12px 12px !important;
text-align: left !important;
}
header.header nav.nav a:hover,
header.header nav.nav .nav-dropbtn:hover{
background: rgba(255,255,255,0.10) !important;
}
/* Dropdown menu in drawer */
header.header nav.nav .nav-dropdown{
width: 100% !important;
}
header.header nav.nav .nav-dropmenu{
position: static !important;
transform: none !important;
box-shadow: none !important;
background: transparent !important;
border: none !important;
padding: 8px 0 0 0 !important;
display: none !important;
}
header.header nav.nav .nav-dropdown:focus-within .nav-dropmenu,
header.header nav.nav .nav-dropdown .nav-dropbtn[aria-expanded="true"] + .nav-dropmenu{
display: grid !important;
gap: 8px !important;
}
header.header nav.nav .nav-dropmenu a{
background: rgba(255,255,255,0.05) !important;
}
header.header nav.nav .nav-dropdivider{
display: none !important;
}
/* RSS ticker */
.rss-ticker .container{
padding-left: var(--mobile-pad) !important;
padding-right: var(--mobile-pad) !important;
}
.rss-label{
font-size: 12px !important;
white-space: nowrap !important;
}
/* Sections: single column by default */
section, .section{
padding-left: 0 !important;
padding-right: 0 !important;
}
.grid, .cols, .row, .features-grid, .services-grid, .cards, .card-grid{
grid-template-columns: 1fr !important;
display: grid !important;
gap: 14px !important;
}
/* Hero */
.hero{
padding: 26px 0 !important;
}
.hero h1{
font-size: 30px !important;
line-height: 1.1 !important;
}
.hero h2, .hero .subhead{
font-size: 16px !important;
}
.hero .btn, .hero a.btn, .hero button{
width: 100% !important;
text-align: center !important;
}
/* Tables: swipe */
table{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Footer */
footer .container{
padding-left: var(--mobile-pad) !important;
padding-right: var(--mobile-pad) !important;
}
}
/* Small phones */
@media (max-width: 420px){
header.header .topbar-actions{
grid-template-columns: 1fr !important;
}
header.header .brand-title{
font-size: 20px !important;
}
.hero h1{
font-size: 28px !important;
}
}
/* === VFINAL: SINGLE VERTICAL SCROLL ROOT (DESKTOP) ===
Fixes double vertical scrollbars caused by both and scrolling. */
@media (min-width: 821px){
html{
height: 100% !important;
overflow-y: hidden !important; /* html NEVER scrolls */
overflow-x: hidden !important;
}
body{
height: 100% !important;
overflow-y: auto !important; /* body is the ONLY scroller */
overflow-x: hidden !important;
}
}
/* === V302: Ensure mobile dropdown buttons are clickable === */
@media (max-width: 820px){
header.header nav.nav button.nav-dropbtn{ pointer-events: auto !important; cursor: pointer !important; }
}
/* === V311: Mobile menu - ensure drawer is not display:none and is clickable === */
@media (max-width: 820px){
header.header nav.nav{
display: flex !important; /* overrides any .nav{display:none} rules */
flex-direction: column !important;
pointer-events: none !important; /* closed drawer shouldn't capture taps */
}
header.header nav.nav.open{
pointer-events: auto !important;
}
}
/* === V320: Mobile topbar - keep action links, hide only left info pills === */
@media (max-width: 820px){
.topbar{ display: flex !important;
flex-direction: column !important;
gap: 10px !important; }
.topbar > .container{
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
padding: 10px 16px !important;
}
.topbar .topbar-links{ display: none !important; }
.topbar .topbar-actions{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
width: 100% !important;
}
.topbar .topbar-actions .topbar-btn{
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
}
/* === V321: Mobile header - remove laptop image AND the background box behind it === */
@media (max-width: 820px){
header.header > .container::before,
header.header > .container::after{
content: none !important;
display: none !important;
background: none !important;
}
}
/* === V322: Mobile menu button - ensure it is clickable above overlays === */
@media (max-width: 820px){
header.header .mobile-menu-btn{
position: relative !important;
z-index: 10001 !important;
pointer-events: auto !important;
}
}
/* === V323: Mobile nav drawer - ensure it can appear even if older rules set display:none === */
@media (max-width: 820px){
header.header nav.nav{
display: flex !important;
}
header.header nav.nav.open{
display: flex !important;
transform: translateX(0) !important;
pointer-events: auto !important;
}
}
/* === V400: MOBILE TOPBAR - hide left text only, keep action links === */
@media (max-width: 820px){
header.header .topbar .topbar-links{ display:none !important; }
header.header .topbar .topbar-actions{
width: 100% !important;
justify-content: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
header.header .topbar .topbar-actions a{
white-space: nowrap !important;
}
}
/* === V400: MOBILE HEADER - remove laptop image + backing box === */
@media (max-width: 820px){
header.header > .container::before,
header.header > .container::after{
content: none !important;
display: none !important;
background: none !important;
}
}
/* === V400: MOBILE NAVBAR - shrink to brand size, enlarge logo, fix black box coverage === */
@media (max-width: 820px){
header.header .navbar{
height: auto !important;
min-height: 0 !important;
padding: 10px 0 !important;
align-items: center !important;
}
/* Brand should size to content */
header.header .navbar > a.brand{
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
padding: 10px 14px !important; /* ensure black box covers full text */
}
/* Make logo ~75% bigger */
header.header .navbar > a.brand > img,
header.header .navbar > a.brand img{
height: 78px !important; /* explicit height so it doesn't depend on navbar height */
max-height: none !important;
transform: none !important;
object-fit: contain !important;
align-self: center !important;
}
/* Remove the extra service line to keep header compact */
header.header .navbar > a.brand .brand-services{
display: none !important;
}
/* Prevent text clipping and ensure the black box wraps all text */
header.header .navbar > a.brand .brand-text{
height: auto !important;
line-height: 1.05 !important;
padding-bottom: 2px !important;
}
}
/* === V500: Mobile navbar height + menu button placement + restore services line === */
@media (max-width: 820px){
/* Ensure header can show the menu button positioned above brand */
header.header{ overflow: visible !important; }
/* Remove decorative laptop/box layers on mobile */
header.header > .container::before,
header.header > .container::after{
content: none !important;
display: none !important;
}
/* Navbar should wrap tightly to the brand content */
header.header .navbar{
position: relative !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
align-items: flex-start !important;
}
/* Brand block: content-driven height */
header.header .navbar > a.brand{
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 14px !important;
margin: 0 !important;
height: auto !important;
}
/* Logo: 75% bigger on mobile */
header.header .navbar > a.brand > img{
height: 112px !important; /* ~64px * 1.75 */
width: auto !important;
}
/* Restore the services line under "IT Services" on mobile */
header.header .navbar > a.brand .brand-services{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
opacity: .92;
font-size: 12px;
line-height: 1.15;
margin-top: 3px;
white-space: normal;
}
/* If header shrink behavior hides it, override on mobile */
header.header.is-shrink .brand .brand-services{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
/* Menu button: top-left above the logo (doesn't add height) */
header.header .navbar > button.mobile-menu-btn,
header.header .navbar > button[aria-controls="site-nav"]{
position: absolute !important;
left: 12px !important;
top: -12px !important;
right: auto !important;
bottom: auto !important;
z-index: 3000 !important;
}
/* Off-canvas nav: avoid intercepting taps while closed */
header.header nav.nav{
pointer-events: none !important;
visibility: hidden !important;
}
header.header nav.nav.open{
pointer-events: auto !important;
visibility: visible !important;
}
}
/* === V600: Mobile header spacing - prevent logo/text overlap + reduce navbar height === */
@media (max-width: 820px){
/* Reduce overall navbar vertical footprint by ~50% */
header.header .navbar{
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
}
header.header .navbar > a.brand{
gap: 12px !important;
padding: 2px 8px !important;
align-items: center !important;
}
/* Logo: halve previous size (was 112px) */
header.header .navbar > a.brand > img{
height: 112px !important;
width: auto !important;
}
/* Move text block to the right a bit so it doesn't touch the logo */
header.header .navbar > a.brand .brand-text{
transform: translateX(15%) !important;
max-width: calc(100% - 140px) !important;
}
/* Tighten type a bit so the shorter bar doesn't wrap awkwardly */
header.header .navbar > a.brand .brand-name{
font-size: 16px !important;
line-height: 1.05 !important;
}
header.header .navbar > a.brand .brand-services{
font-size: 10px !important;
line-height: 1.1 !important;
margin-top: 2px !important;
}
/* Menu button: keep it above-left but closer so it doesn't increase header height */
header.header .navbar > button.mobile-menu-btn,
header.header .navbar > button[aria-controls="site-nav"]{
top: -6px !important;
}
}
/* === V900: MOBILE left drawer + 2x brand (base v700) === */
@media (max-width: 860px){
/* Force off-canvas menu to open from LEFT (override later right-drawer rules) */
header.header nav.nav{
left: 0 !important;
right: auto !important;
top: 0 !important;
bottom: 0 !important;
height: 100vh !important;
width: min(86vw, 360px) !important;
transform: translateX(-110%) !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
header.header nav.nav.open{
transform: translateX(0) !important;
}
/* Brand sizing: logo + text 2x */
header.header a.brand{
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
header.header a.brand img{
height: 128px !important; /* ~2x the common 64px mobile value */
width: auto !important;
max-height: none !important;
}
header.header a.brand .brand-text{
transform: none !important;
}
header.header a.brand .brand-title{
font-size: 34px !important;
line-height: 1.05 !important;
}
header.header a.brand .brand-sub{
font-size: 22px !important;
line-height: 1.05 !important;
}
header.header a.brand .brand-services{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
font-size: 14px !important;
line-height: 1.2 !important;
margin-top: 4px !important;
opacity: .95 !important;
}
}
/* === V901: Mobile header + left drawer fixes (Jan 2026) === */
@media (max-width: 860px){
/* 1) FORCE the off-canvas menu to live on the LEFT and stay there.
(Multiple earlier blocks set right:0 + translateX(110%). This is the final override.) */
header.header nav.nav,
nav.nav,
.nav,
#site-nav{
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
width: min(86vw, 360px) !important;
max-width: 92vw !important;
height: 100vh !important;
transform: translate3d(-105%, 0, 0) !important; /* closed: off-screen left */
transition: transform .28s ease !important;
will-change: transform !important;
overflow-y: auto !important;
overflow-x: hidden !important;
display: flex !important;
flex-direction: column !important;
z-index: 10001 !important;
animation: none !important;
}
header.header nav.nav.open,
nav.nav.open,
.nav.open,
#site-nav.open{
transform: translate3d(0, 0, 0) !important; /* open: flush left */
}
/* Prevent the closed drawer from intercepting taps */
header.header nav.nav:not(.open),
nav.nav:not(.open),
.nav:not(.open),
#site-nav:not(.open){
pointer-events: none !important;
}
header.header nav.nav.open,
nav.nav.open,
.nav.open,
#site-nav.open{
pointer-events: auto !important;
}
/* 2) Mobile brand "black box" behind text: make it one unified pill and extend 25% to the right */
header.header a.brand .brand-text{
background: rgba(0,0,0,.58) !important;
border-radius: 10px !important;
padding: 6px 14px 6px 10px !important;
/* Extend the pill and also reserve space for the menu button so it can sit on the right end of the pill */
padding-right: calc(14px + 92px + 25%) !important;
display: inline-block !important;
}
/* Remove per-line boxes so it looks like one clean block */
header.header a.brand .brand-title,
header.header a.brand .brand-sub,
header.header a.brand .brand-services{
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
width: auto !important;
}
/* 3) Reduce mobile navigation bar height by ~60%:
tighten vertical padding and reduce logo/text sizes to match */
header.header{
padding-top: 6px !important;
padding-bottom: 6px !important;
}
header.header > .container{
padding-top: 6px !important;
padding-bottom: 6px !important;
gap: 10px !important;
}
header.header a.brand img{
height: 64px !important;
width: auto !important;
}
header.header a.brand .brand-title{
font-size: 20px !important;
line-height: 1.05 !important;
}
header.header a.brand .brand-sub{
font-size: 13px !important;
line-height: 1.05 !important;
}
header.header a.brand .brand-services{
font-size: 11px !important;
line-height: 1.15 !important;
margin-top: 2px !important;
}
/* 4) Mobile menu button: place it on the right side of the brand-text pill
by using the reserved padding space above. */
header.header .navbar{
display: flex !important;
align-items: center !important;
gap: 0 !important;
}
header.header .navbar > a.brand{
flex: 0 1 auto !important;
min-width: 0 !important;
}
header.header .navbar > button.mobile-menu-btn{
margin-left: -92px !important; /* pull into the reserved pill space */
align-self: center !important;
position: relative !important;
z-index: 10002 !important;
padding: 8px 10px !important;
border-radius: 10px !important;
background: transparent !important;
color: #fff !important;
font-weight: 700 !important;
}
header.header .navbar > button.mobile-menu-btn::before{
content: "\2630\00A0" !important; /* ☰ */
font-weight: 900 !important;
}
}
button[aria-controls="site-nav"]{
margin-left: -168px !important;
margin-right: 28px !important;
width: fit-content !important;
white-space: nowrap !important;
}
}
}
header.header > .container > a.brand{
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
header.header > .container > button[aria-controls="site-nav"]{
position: relative !important;
margin: 0 !important;
padding: 6px 10px !important;
width: fit-content !important;
white-space: nowrap !important;
border: 2px solid red !important;
border-radius: 6px !important;
background: transparent !important;
flex: 0 0 auto !important;
}
}
/* Clean flex layout for brand + menu button */
header.header > .container{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
header.header > .container > a.brand{
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Menu button sizing + red border */
button[aria-controls="site-nav"]{
position: relative !important;
margin: 0 !important;
padding: 8px 12px !important;
width: fit-content !important;
white-space: nowrap !important;
border: 2px solid #e11d2e !important; /* red */
border-radius: 8px !important;
background: rgba(0,0,0,0) !important;
color: inherit !important;
flex: 0 0 auto !important;
transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
-webkit-tap-highlight-color: transparent !important;
touch-action: manipulation !important;
}
/* Animated icon */
button[aria-controls="site-nav"]::before{
content: "☰ " !important;
display: inline-block !important;
margin-right: 6px !important;
line-height: 1 !important;
transform-origin: 50% 50% !important;
transition: transform 180ms ease !important;
}
body.menu-open button[aria-controls="site-nav"]::before{
content: "✕ " !important;
transform: rotate(90deg) !important;
}
/* Hover/tap feedback */
button[aria-controls="site-nav"]:hover{
background: rgba(225, 29, 46, .10) !important;
box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
}
button[aria-controls="site-nav"]:active{
transform: scale(.97) !important;
background: rgba(225, 29, 46, .16) !important;
}
button[aria-controls="site-nav"]:focus-visible{
outline: 2px solid rgba(225, 29, 46, .55) !important;
outline-offset: 2px !important;
}
/* Defensive: prevent old rules from hiding nav on mobile */
header.header nav.nav{
display: flex !important;
}
}
/* === V1100 MOBILE HEADER + MENU BUTTON ENHANCEMENTS (MOBILE ONLY) ===
Fixes:
- Ensures styles apply on modern phones (up to 900px CSS width)
- Sticky header + visible menu button
- Red border + tap feedback
- Animated icon ☰ -> ✕ when menu is open
*/
@media (max-width: 900px){
/* Sticky header so Menu stays visible while scrolling */
header.header{
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
}
/* Clean flex layout for brand + menu button (no negative margins) */
header.header > .container > .navbar{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
header.header > .container > .navbar > a.brand{
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Menu button: tight box around "☰ Menu" with RED border */
header.header .mobile-menu-btn{
position: relative !important;
margin: 0 !important;
padding: 8px 12px !important;
width: fit-content !important;
white-space: nowrap !important;
border: 2px solid #e11d2e !important; /* red */
border-radius: 8px !important;
background: transparent !important;
color: inherit !important;
flex: 0 0 auto !important;
z-index: 10000 !important;
transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease !important;
-webkit-tap-highlight-color: transparent !important;
touch-action: manipulation !important;
}
/* Icon: default hamburger */
header.header .mobile-menu-btn::before{
content: "☰ " !important;
display: inline-block !important;
margin-right: 6px !important;
line-height: 1 !important;
transform-origin: 50% 50% !important;
transition: transform 180ms ease !important;
}
/* Icon: X when open */
body.menu-open header.header .mobile-menu-btn::before{
content: "✕ " !important;
transform: rotate(90deg) !important;
}
/* Tap/hover feedback */
header.header .mobile-menu-btn:hover{
background: rgba(225, 29, 46, .10) !important;
box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
}
header.header .mobile-menu-btn:active{
transform: scale(.97) !important;
background: rgba(225, 29, 46, .16) !important;
}
header.header .mobile-menu-btn:focus-visible{
outline: 2px solid rgba(225, 29, 46, .55) !important;
outline-offset: 2px !important;
}
/* Defensive: prevent legacy rules from hiding nav entirely on mobile */
header.header nav.nav{
display: flex !important;
}
}
/* === V1200 MOBILE MENU DRAWER: FORCE LEFT + NO CUTOFF (MOBILE ONLY) === */
@media (max-width: 900px){
/* Ensure the off-canvas menu is a LEFT drawer and never renders off-screen to the right */
header.header nav.nav{
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
height: 100vh !important;
width: min(86vw, 360px) !important;
max-width: 92vw !important;
overflow-y: auto !important;
overflow-x: hidden !important;
transform: translate3d(-105%, 0, 0) !important; /* closed */
transition: transform 260ms ease !important;
z-index: 9998 !important;
will-change: transform !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
}
header.header nav.nav.open{
transform: translate3d(0, 0, 0) !important; /* open */
}
/* Backdrop should cover full screen */
.menu-backdrop{
position: fixed !important;
inset: 0 !important;
z-index: 9997 !important;
}
/* Prevent any legacy right-drawer transforms from winning */
body.menu-open header.header nav.nav{
left: 0 !important;
right: auto !important;
}
}
/* === V1300 MOBILE: Place Menu button next to brand (left-side) === */
@media (max-width: 900px){
/* Make navbar pack items on the left so the menu button sits next to the brand box */
header.header > .container > .navbar{
justify-content: flex-start !important;
}
/* Brand should not stretch and push the menu button off-screen */
header.header > .container > .navbar > a.brand{
flex: 0 1 auto !important;
min-width: 0 !important;
}
/* Menu button sits immediately to the right of the brand (black box) */
header.header .mobile-menu-btn{
flex: 0 0 auto !important;
margin-left: 10px !important;
}
}
/* === V1400 MOBILE: Ensure Menu button is to the RIGHT of brand box (not overlapping) === */
@media (max-width: 900px){
header.header > .container > .navbar{
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important; /* physical separation */
}
header.header > .container > .navbar > a.brand{
flex: 0 0 auto !important;
max-width: calc(100% - 140px) !important; /* reserve space for Menu button */
}
header.header .mobile-menu-btn{
flex: 0 0 auto !important;
margin-left: 0 !important;
align-self: center !important;
}
}
/* === V1600 MOBILE: Fix Menu button placement + sticky + remove top gap in drawer === */
@media (max-width: 900px){
/* Sticky header (sticky can fail if a parent clips; ensure visible) */
header.header{
position: sticky !important;
top: 0 !important;
z-index: 10005 !important;
overflow: visible !important;
}
header.header > .container{
overflow: visible !important;
}
/* Ensure navbar is a single row: brand box on left, Menu button on right of it */
header.header > .container > .navbar{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important;
}
header.header > .container > .navbar > a.brand{
flex: 0 1 auto !important;
min-width: 0 !important;
max-width: calc(100% - 130px) !important; /* reserve space for button */
}
/* Force the menu button into the same row (NOT absolute / not stacked) */
header.header .mobile-menu-btn{
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
align-self: center !important;
/* keep the red border */
border: 2px solid #e11d2e !important;
}
/* Drawer: remove huge blank space before first link */
header.header nav.nav{
padding-top: 18px !important;
margin-top: 0 !important;
}
header.header nav.nav > a:first-child{
margin-top: 0 !important;
}
}
/* === V1800 MOBILE HARD OVERRIDE (device-targeted) ===
Applies on touch devices OR narrow viewports to avoid "rules not applying" issues.
Fixes:
- Menu button inline to the RIGHT of brand box (same row, no overlap)
- Header/menu button stays visible on scroll (sticky)
- Remove large blank space at top of opened drawer
*/
@media (pointer: coarse), (hover: none), (max-width: 900px){
header.header{
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 10050 !important;
overflow: visible !important;
}
header.header > .container,
header.header > .container > .navbar{
overflow: visible !important;
}
header.header > .container > .navbar{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
header.header > .container > .navbar > a.brand{
flex: 0 1 auto !important;
min-width: 0 !important;
max-width: calc(100% - 130px) !important;
}
header.header > .container > .navbar > button.mobile-menu-btn[aria-controls="site-nav"]{
order: 3 !important;
position: relative !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 8px 12px !important;
width: fit-content !important;
white-space: nowrap !important;
border: 2px solid #e11d2e !important;
border-radius: 8px !important;
background: transparent !important;
z-index: 10060 !important;
}
header.header > .container > .navbar > button.mobile-menu-btn::before{
content: "☰ " !important;
margin-right: 6px !important;
}
body.menu-open header.header > .container > .navbar > button.mobile-menu-btn::before{
content: "✕ " !important;
}
/* Drawer: eliminate "huge black space" before first link */
header.header nav.nav{
padding-top: 16px !important;
margin-top: 0 !important;
}
header.header nav.nav::before,
header.header nav.nav::after{
content: none !important;
display: none !important;
}
header.header nav.nav > a:first-child{
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* === V1900 MOBILE: Sticky navbar + remove excessive top gap in drawer === */
@media (pointer: coarse), (hover: none), (max-width: 900px){
/* Keep ONLY the navbar (logo + menu button) sticky while scrolling */
header.header{
position: relative !important; /* avoid sticky/fixed on entire header */
}
header.header > .container > .navbar{
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 10080 !important;
background: rgba(7,10,16,.96) !important; /* ensure it looks solid when stuck */
backdrop-filter: blur(6px) !important;
}
/* Ensure sticky isn't defeated by clipping */
header.header,
header.header > .container,
header.header > .container > .navbar{
overflow: visible !important;
}
/* Drawer: remove any reserved header space/padding that creates a big black gap */
header.header nav.nav{
top: 0 !important;
padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
margin-top: 0 !important;
}
/* Kill decorative/padding pseudo elements that can create empty black area */
header.header nav.nav::before,
header.header nav.nav::after,
header.header nav.nav > *::before,
header.header nav.nav > *::after{
content: none !important;
}
/* First link should start immediately */
header.header nav.nav > a:first-child{
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* === V1400 FIX: MOBILE NAV DRAWER - REMOVE TOP BLACK GAP ABOVE FIRST LINK === */
@media (max-width: 900px){
/* The off-canvas drawer had large top padding (e.g., 84px/92px/56px) which created empty space.
Force minimal safe-area padding so the first link starts immediately. */
header.header nav.nav,
nav.nav,
.nav,
#site-nav{
padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
margin-top: 0 !important;
}
/* Remove any spacer pseudo-elements that can create blank area */
header.header nav.nav::before,
header.header nav.nav::after,
nav.nav::before,
nav.nav::after,
#site-nav::before,
#site-nav::after{
content: none !important;
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensure first clickable item isn't pushed down */
header.header nav.nav > a:first-child,
header.header nav.nav > .nav-dropdown:first-child,
#site-nav > a:first-child,
#site-nav > .nav-dropdown:first-child{
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* === V12 MOBILE MENU: REMOVE TOP BLACK GAP ABOVE FIRST LINK === */
@media (max-width: 820px){
header.header nav.nav{
padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
}
/* Remove any decorative bars that can occupy space inside the drawer */
header.header nav.nav::before,
header.header nav.nav::after{
content: none !important;
display: none !important;
}
}
/* === Mobile-only: remove any residual top gap in the off-canvas menu === */
@media (max-width: 820px){
header.header nav.nav{
padding-top: calc(env(safe-area-inset-top) + 12px) !important;
}
header.header nav.nav > a:first-child{
margin-top: 0 !important;
}
header.header nav.nav::before,
header.header nav.nav::after{
content: none !important;
display: none !important;
height: 0 !important;
}
}
/* === FIX: Mobile menu drawer should start at top (remove bottom-push gap) === */
@media (max-width: 820px){
/* Some layout rules push nav to the bottom of the header bar via margin-top:auto.
When nav becomes the off-canvas drawer, that creates a large blank area above links.
Override it ONLY on mobile. */
body.menu-open header.header .navbar > nav.nav,
header.header .navbar > nav.nav#site-nav{
margin-top: 0 !important;
padding-top: calc(env(safe-area-inset-top) + 12px) !important;
align-self: stretch !important;
}
/* Ensure drawer content stacks from the top */
body.menu-open header.header nav.nav{
justify-content: flex-start !important;
}
/* If any spacer pseudo-elements exist, disable them */
body.menu-open header.header nav.nav::before,
body.menu-open header.header nav.nav::after{
content: none !important;
display: none !important;
height: 0 !important;
}
/* Remove any accidental auto margins on first items */
body.menu-open header.header nav.nav > a:first-child,
body.menu-open header.header nav.nav > .nav-dropdown:first-child{
margin-top: 0 !important;
}
}
/* v15: MOBILE MENU – REMOVE EXTRA BOTTOM SPACE UNDER LAST LINK */
@media (max-width: 820px){
/* Ensure the off-canvas drawer doesn't force extra vertical space */
header.header nav.nav{
min-height: 0 !important;
height: auto !important;
max-height: calc(100vh - 12px) !important;
overflow-y: auto !important;
padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
}
/* Prevent flex layouts from pushing items to the bottom */
header.header .navbar > nav.nav{
justify-content: flex-start !important;
align-content: flex-start !important;
}
header.header nav.nav > *{
flex: 0 0 auto !important;
}
/* Remove extra spacing on the list itself */
header.header nav.nav ul,
header.header nav.nav .navlinks,
header.header nav.nav .nav-links,
header.header nav.nav .menu,
header.header nav.nav .menu-links{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
/* v15: MOBILE MENU – REMOVE EXTRA BOTTOM SPACE UNDER LAST LINK */
@media (max-width: 820px){
/* Ensure the off-canvas drawer doesn't force extra vertical space */
header.header nav.nav{
min-height: 0 !important;
height: auto !important;
max-height: calc(100vh - 12px) !important;
overflow-y: auto !important;
padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
}
/* Prevent flex layouts from pushing items to the bottom */
header.header .navbar > nav.nav{
justify-content: flex-start !important;
align-content: flex-start !important;
}
header.header nav.nav > *{
flex: 0 0 auto !important;
}
/* Remove extra spacing on the list itself */
header.header nav.nav ul,
header.header nav.nav .navlinks,
header.header nav.nav .nav-links,
header.header nav.nav .menu,
header.header nav.nav .menu-links{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
/* === MOBILE MENU FINAL FIX: REMOVE BOTTOM EMPTY SPACE === */
@media (max-width: 820px){
header.header nav.nav{
height: auto !important;
min-height: 0 !important;
max-height: calc(100vh - env(safe-area-inset-top)) !important;
overflow-y: auto !important;
justify-content: flex-start !important;
align-content: flex-start !important;
}
header.header nav.nav > ul,
header.header nav.nav .nav-inner,
header.header nav.nav .menu,
header.header nav.nav .menu-list{
flex-grow: 0 !important;
height: auto !important;
min-height: 0 !important;
padding-bottom: 12px !important;
}
header.header nav.nav::before,
header.header nav.nav::after{
content: none !important;
display: none !important;
}
}
/* === MOBILE MENU ENHANCEMENTS (MOBILE ONLY) ===
- Auto-size drawer to content (no bottom empty space)
- Native-like open/close (max-height + opacity)
- Subtle top/bottom fade dividers that respond to scroll
*/
@media (max-width: 820px){
/* Off-canvas drawer should NOT be pinned to bottom; let it size to content */
header.header nav.nav{
bottom: auto !important; /* critical: removes forced full-height */
height: auto !important;
min-height: 0 !important;
max-height: 0px; /* closed state; JS sets open height */
overflow: hidden !important; /* prevents scroll when closed */
opacity: 0;
pointer-events: none;
transform: translateX(-110%);
transition:
transform .24s ease,
max-height .28s ease,
opacity .18s ease;
will-change: transform, max-height, opacity;
}
header.header nav.nav.open{
opacity: 1;
pointer-events: auto;
transform: translateX(0);
overflow-y: auto !important; /* scroll only when open (if needed) */
overflow-x: hidden !important;
}
/* Fades (only visible when .can-scroll is present) */
header.header nav.nav::before,
header.header nav.nav::after{
content: "" !important;
position: sticky;
left: 0;
right: 0;
height: 18px;
display: block;
pointer-events: none;
opacity: 0;
transition: opacity .15s ease;
z-index: 2;
}
header.header nav.nav::before{
top: 0;
margin-top: calc(-1 * (env(safe-area-inset-top) + 12px));
background: linear-gradient(to bottom, rgba(7,35,56,.95), rgba(7,35,56,0));
}
header.header nav.nav::after{
bottom: 0;
margin-bottom: -12px;
background: linear-gradient(to top, rgba(7,35,56,.95), rgba(7,35,56,0));
}
/* Show fades only when scrollable and not at the edge */
header.header nav.nav.can-scroll:not(.at-top)::before{ opacity: .85; }
header.header nav.nav.can-scroll:not(.at-bottom)::after{ opacity: .85; }
}