/* * ═══════════════════════════════════════════════════════════════════ * Green Edge Technologies — Component Styles * File: css/components.css * * Contains ONLY styles for the 5 global components: * 1. CSS Design Tokens (required by all components) * 2. Back-to-Top / Progress Ring * 3. Navbar (desktop + mega-menus + dark-mode toggle) * 4. Mobile Sidebar + Hamburger * 5. Footer * 6. Custom Cursor + Noise Overlay (global page fixtures) * * Shared utilities (buttons, .container, etc.) are included * because the navbar and footer depend on them. * * In WordPress: enqueue this file from functions.php. * ═══════════════════════════════════════════════════════════════════ */ /* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */ :root { --bg:#0A0F1C; --bg-2:#121826; --bg-3:#0d1220; --surface:#1A2235; --surface-2:#202c42; --border:rgba(255,255,255,.07); --border-g:rgba(0,200,83,.22); --text:#FFFFFF; --text-muted:#B0B8C5; --text-faint:#6F7A8A; --green:#00C853; --green-dark:#006837; --green-glow:rgba(0,200,83,.30); --green-subtle:rgba(0,200,83,.08); --ai-blue:#00A8FF; --tech-purple:#6C63FF; --orange:#FF6B00; --grad-text:linear-gradient(120deg,#00C853 0%,#00A8FF 50%,#6C63FF 100%); --grad-btn:linear-gradient(135deg,#00C853,#006837); --font-d:'Manrope',sans-serif; --font-b:'Inter',sans-serif; --mono:'JetBrains Mono',monospace; --radius:14px; --radius-lg:22px; --ease:cubic-bezier(.16,1,.3,1); --nav-h:72px } /* Light mode overrides */ body.light { --bg:#F5F7FA; --bg-2:#EBEEF3; --bg-3:#E0E5EE; --surface:#FFFFFF; --surface-2:#F0F3F8; --border:rgba(0,0,0,.08); --border-g:rgba(0,200,83,.30); --text:#0A0F1C; --text-muted:#4A5568; --text-faint:#9AA5B4; --green-subtle:rgba(0,200,83,.10) } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 } /* overflow-x must NOT be on — it creates a scroll container that traps position:fixed children. Only body gets it; fixed elements still use the viewport. */ html { scroll-behavior:smooth } body { background:var(--bg); color:var(--text); font-family:var(--font-b); font-size:16px; line-height:1.7; overflow-x:hidden; transition:background .4s,color .4s; cursor:default !important } a { color:inherit; text-decoration:none } ul { list-style:none } button { border:none; background:none; font-family:inherit } input,select,textarea { font-family:inherit; font-size:inherit; outline:none } /* ── 2. NOISE OVERLAY (global page fixture) ──────────────────── */ .noise-overlay { position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:150px } body.light .noise-overlay { opacity:.015 } /* ── 3. CUSTOM CURSOR — mouse/trackpad only ──────────────────── */ /* ── 4. UTILITY: CONTAINER & BUTTONS ─────────────────────────── */ .container { max-width: 1240px; width: 100%; margin:0 auto; padding:0 28px } .btn { display:inline-flex; align-items:center; gap:9px; padding:12px 26px; border-radius:9px; font-family:var(--font-d); font-weight:700; font-size:.9rem; letter-spacing:.01em; transition:all .3s var(--ease); position:relative; overflow:hidden; cursor:pointer } .btn::after { content:''; position:absolute; inset:0; opacity:0; background:rgba(255,255,255,.1); border-radius:inherit; transition:opacity .25s } .btn:hover::after { opacity:1 } .btn-primary { background:var(--grad-btn); color:#fff; box-shadow:0 4px 22px var(--green-glow) } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 40px var(--green-glow),0 0 0 1px rgba(0,200,83,.35) } .btn-ghost { border:1.5px solid var(--green); color:var(--green); background:var(--green-subtle) } .btn-ghost:hover { background:rgba(0,200,83,.16); transform:translateY(-2px); box-shadow:0 6px 26px var(--green-glow) } .btn-lg { padding:15px 34px; font-size:1rem; border-radius:11px } .btn-xl { padding:17px 42px; font-size:1.05rem; border-radius:12px } .btn-sm { padding:9px 18px; font-size:.82rem } .btn-pulse { animation:btnPulse 3s ease-in-out infinite } .btn-pulse:hover { animation:none } @keyframes btnPulse { 0%,100% { box-shadow:0 4px 22px var(--green-glow) } 50% { box-shadow:0 4px 44px rgba(0,200,83,.6),0 0 0 7px rgba(0,200,83,.07) } } /* ── 5. BACK-TO-TOP / PROGRESS RING ─────────────────────────── */ .progress-ring-wrap { position:fixed; bottom:2rem; right:2rem; z-index:9100; width:52px; height:52px; border-radius:50%; background:var(--surface); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:opacity .35s,visibility .35s,transform .35s var(--ease); box-shadow:0 4px 24px rgba(0,0,0,.4) } .progress-ring-wrap.visible { opacity:1; visibility:visible; transform:translateY(0) scale(1) } .progress-ring-wrap:hover { transform:translateY(-3px) scale(1.06) } .progress-ring { position:absolute; inset:0; transform:rotate(-90deg) } .progress-ring__track { fill:none; stroke:rgba(255,255,255,.08); stroke-width:2.5 } .progress-ring__fill { fill:none; stroke:var(--green); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:125.66; stroke-dashoffset:125.66; transition:stroke-dashoffset .1s linear } .progress-ring__icon { position:relative; z-index:1; color:var(--green) } /* ── 6. NAVBAR ───────────────────────────────────────────────── */ .nav { position:fixed; top:0; left:0; right:0; z-index:9200; height:var(--nav-h); display:flex; align-items:center; background:rgba(10,15,28,.75); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border-bottom:1px solid rgba(255,255,255,.06); transition:background .4s,box-shadow .4s,border-color .4s } .nav.scrolled { background:rgba(10,15,28,.92); backdrop-filter:blur(32px) saturate(160%); -webkit-backdrop-filter:blur(32px) saturate(160%); border-color:rgba(255,255,255,.08); box-shadow:0 1px 48px rgba(0,0,0,.6) } body.light .nav { background:rgba(245,247,250,.82); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border-bottom:1px solid rgba(0,0,0,.07) } body.light .nav.scrolled { background:rgba(245,247,250,.96); box-shadow:0 1px 24px rgba(0,0,0,.1); border-color:rgba(0,0,0,.09) } .nav-inner { display:flex; align-items:center; width:100%; max-width: 1240px; width: 100%; margin:0 auto; padding:0 24px; gap:8px } .nav-logo { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; transition:opacity .2s; margin-right:12px } .nav-logo:hover { opacity:.8 } /* ── Logo Tagline — sits right of logo, before nav-links ─────────────── */ .nav-logo-tagline { display:inline-flex; align-items:center; flex-shrink:0; font-family:var(--font-d); font-size:.72rem; font-weight:600; letter-spacing:.03em; color:var(--text-muted); white-space:nowrap; /* Vertical separator bar on the left */ padding-left:14px; margin-left:2px; border-left:1.5px solid rgba(255,255,255,.15); line-height:1; /* subtle green accent on the text */ background:linear-gradient(90deg, var(--green) 0%, #00cfff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; /* smooth theme transitions */ transition:opacity .25s; } body.light .nav-logo-tagline { border-left-color:rgba(0,0,0,.15); } .nav-logo-tagline:empty { display:none } /* Tablet — slightly smaller */ @media(max-width:960px) { .nav-logo-tagline { font-size:.67rem; padding-left:10px; margin-left:0; } } /* Mobile — hide tagline to save space (logo + hamburger only) */ @media(max-width:640px) { .nav-logo-tagline { display:none } } .footer-logo { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; transition:opacity .2s; margin-bottom:1.25rem; text-decoration:none } .footer-logo:hover { opacity:.8 } .logo-mark { width:36px; height:36px; background:var(--grad-btn); border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-weight:800; font-size:1.1rem; color:#fff; flex-shrink:0; box-shadow:0 0 18px var(--green-glow) } .logo-text { font-family:var(--font-d); font-weight:800; font-size:1.1rem; letter-spacing:-.02em; color:var(--text) } /* ── WordPress custom logo image — nav, mobile sidebar, footer ─────── */ /* All sizing driven by CSS vars output by greenedge_logo_inline_css() */ /* Customizer: Appearance → Customize → Logo & Branding */ /* Wrapper links */ .nav-logo .custom-logo-link, .mobile-logo .custom-logo-link, .footer-logo .custom-logo-link { display:inline-flex; align-items:center; line-height:0; text-decoration:none } /* The itself */ .nav-logo .custom-logo, .mobile-logo .custom-logo, .footer-logo .custom-logo { height:var(--logo-height, 38px) !important; width:auto !important; max-width:var(--logo-max-width, 200px) !important; object-fit:contain; display:block; /* never let WordPress's own width/height attrs constrain it */ flex-shrink:0; transition:height .25s ease, max-width .25s ease, filter .25s ease } /* Light-mode filter — controlled via Customizer dropdown */ body.light .nav-logo .custom-logo, body.light .mobile-logo .custom-logo, body.light .footer-logo .custom-logo { filter:var(--logo-light-filter, none) } /* Mobile breakpoint uses its own height var */ @media(max-width:480px) { .nav-logo .custom-logo, .mobile-logo .custom-logo, .footer-logo .custom-logo { height:var(--logo-height-mobile, 32px) !important; max-width:var(--logo-max-width, 200px) !important } } /* Tablet breakpoint uses its own height var */ @media(min-width:481px) and (max-width:960px) { .nav-logo .custom-logo, .mobile-logo .custom-logo, .footer-logo .custom-logo { height:var(--logo-height-tablet, 34px) !important; max-width:var(--logo-max-width, 200px) !important } } .nav-links { display:flex; align-items:center; justify-content:center; flex:1; gap:2px } .nav-link { font-family:var(--font-d); font-size:.8rem; font-weight:600; color:var(--text-muted); padding:7px 9px; border-radius:7px; display:flex; align-items:center; gap:4px; transition:color .2s,background .2s; white-space:nowrap } .nav-link:hover,.nav-link.active,.has-mega.open > .nav-link { color:var(--green); background:var(--green-subtle) } .chevron { flex-shrink:0; transition:transform .3s var(--ease); color:var(--text-faint) } .has-mega.open .chevron { transform:rotate(180deg); color:var(--green) } .has-mega { position:relative } /* ── MEGA MENUS ─────────────────────────────────────────────── */ .mega-menu { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(10px); background:rgba(18,24,38,.97); backdrop-filter:blur(28px) saturate(150%); -webkit-backdrop-filter:blur(28px) saturate(150%); border:1px solid rgba(0,200,83,.18); border-radius:18px; padding:1.25rem; min-width: 340px; width: 100%; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s; box-shadow:0 24px 64px rgba(0,0,0,.65) } .mega-menu--wide { min-width:580px } body.light .mega-menu { background:rgba(255,255,255,.97); border-color:rgba(0,200,83,.2); box-shadow:0 24px 64px rgba(0,0,0,.15) } .has-mega.open .mega-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) } .mega-header { font-family:var(--font-d); font-size:.65rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--text-faint); padding:0 8px 10px; border-bottom:1px solid var(--border); margin-bottom:8px } .mega-grid { display:grid; gap:4px } .mega-grid--2 { grid-template-columns:repeat(2,1fr) } .mega-grid--3 { grid-template-columns:repeat(3,1fr) } .mega-item { display:flex; align-items:flex-start; gap:10px; padding:11px 10px; border-radius:11px; transition:background .2s,transform .2s; cursor:pointer; text-decoration:none; outline:none } .mega-item:hover { background:rgba(0,200,83,.08); transform:translateX(2px) } .mega-item:focus-visible { background:rgba(0,200,83,.1); outline:2px solid var(--green); outline-offset:2px } .mega-item--cta { border:1px solid var(--border-g) } .mega-item--cta:hover { background:rgba(0,200,83,.12); border-color:var(--green) } .mega-icon-wrap { width:34px; height:34px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--green-subtle); border:1px solid var(--border-g); color:var(--green) } .mega-label { display:block; font-family:var(--font-d); font-size:.84rem; font-weight:700; color:var(--text); margin-bottom:1px } .mega-sub { display:block; font-size:.74rem; color:var(--text-faint) } /* ── DESKTOP RIGHT CONTROLS ──────────────────────────────────── */ .nav-ctas { display:flex; flex-direction:row; align-items:center; gap:8px; flex-shrink:0; margin-left:auto } /* ── DARK MODE TOGGLE (shared desktop + mobile) ─────────────── */ /* legacy .theme-toggle kept for any custom inclusions */ .theme-toggle { width:36px; height:36px; border-radius:9px; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:row; align-items:center; justify-content:center; color:var(--text-muted); transition:all .2s; cursor:pointer; flex-shrink:0 } .theme-toggle:hover { background:var(--green-subtle); color:var(--green); border-color:var(--border-g) } body.light .theme-toggle .icon-moon { display:none } body:not(.light) .theme-toggle .icon-sun { display:none } /* ── STICKY SIDE DARK-MODE TOGGLE ───────────────────────────── */ .side-theme-toggle { /* force visibility — overflow-x:clip on html/body was clipping this */ position:fixed !important; top:50% !important; right:0 !important; transform:translateY(-50%) !important; z-index:99999 !important; display:flex !important; visibility:visible !important; opacity:1 !important; flex-direction:column; align-items:center; gap:7px; padding:12px 9px 14px; background:#1e2d45; border:1.5px solid rgba(0,200,83,.45); border-right:none; border-radius:12px 0 0 12px; color:#B0B8C5; cursor:pointer; transition:background .2s, color .2s, border-color .2s, box-shadow .2s; box-shadow:-4px 0 22px rgba(0,0,0,.55), -1px 0 0 rgba(0,200,83,.15); user-select:none; } .side-theme-toggle:hover { background:#223a28; color:var(--green); border-color:rgba(0,200,83,.75); box-shadow:-4px 0 28px rgba(0,200,83,.22); } body.light .side-theme-toggle { background:#ffffff; border-color:rgba(0,200,83,.4); color:#4A5568; box-shadow:-4px 0 22px rgba(0,0,0,.12), -1px 0 0 rgba(0,200,83,.2); } body.light .side-theme-toggle:hover { background:#f0faf4; color:var(--green); border-color:rgba(0,200,83,.7); box-shadow:-4px 0 28px rgba(0,200,83,.18); } .side-toggle__icon { flex-shrink:0; transition:color .2s } /* Dark mode → show sun (click to go light); light mode → show moon */ body.light .side-theme-toggle .icon-sun { display:none } body:not(.light) .side-theme-toggle .icon-moon { display:none } /* Make the visible icon pop with green tint */ body:not(.light) .side-theme-toggle .icon-sun { color:#FFC107 } body.light .side-theme-toggle .icon-moon { color:#6C63FF } .side-toggle__label { writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg); font-family:var(--font-d); font-size:.58rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; line-height:1; color:var(--green); } /* label text toggle */ body.light .side-toggle__label .label-dark { display:none } body.light .side-toggle__label .label-light { display:inline } body:not(.light) .side-toggle__label .label-dark { display:inline } body:not(.light) .side-toggle__label .label-light { display:none } /* ── CONTROLS: hamburger wrapper — always on the right ── */ .nav-mobile-controls { display:flex; flex-direction:row; align-items:center; gap:4px; flex-shrink:0; margin-left:auto } /* Final responsive visibility guard for mobile controls */ @media(min-width:961px) { .nav-mobile-controls { display:none !important; } } @media(max-width:960px) { .nav-mobile-controls { display:flex !important; } } /* ── CALL BUTTON — tablet & mobile only ─────────────────── */ /* nav-call-btn styles live in click-fix.css (loads after main.css where --green is defined) */ /* ── HAMBURGER — hidden on desktop, shown on mobile ─────────── */ .hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; padding:8px; border-radius:8px; flex-shrink:0; transition:background .2s; cursor:pointer } .hamburger:hover { background:var(--green-subtle) } .hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .4s var(--ease),opacity .25s,width .3s; transform-origin:center } .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) } .hamburger.open span:nth-child(2) { opacity:0; width:0 } .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) } /* ── 7. MOBILE SIDEBAR ───────────────────────────────────────── */ .mobile-backdrop { position:fixed; inset:0; z-index:9300; background:rgba(5,8,18,.7); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s } .mobile-backdrop.open { opacity:1; visibility:visible } .mobile-overlay { position:fixed; top:0; right:0; bottom:0; z-index:9400; width:min(380px,92vw); background:rgba(12,18,30,.98); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px); border-left:1px solid rgba(0,200,83,.15); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .45s var(--ease); box-shadow:-20px 0 80px rgba(0,0,0,.6); overflow-y:auto } .mobile-overlay.open { transform:translateX(0) } body.light .mobile-overlay { background:rgba(245,247,250,.98); border-color:rgba(0,200,83,.2) } .mobile-close { position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all .2s; cursor:pointer; z-index:2 } .mobile-close:hover { background:var(--green-subtle); color:var(--green); border-color:var(--border-g) } .mobile-nav-content { display:flex; flex-direction:column; height:100%; padding:80px 28px 36px } .mobile-logo { display:flex; align-items:center; gap:10px; margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border) } .mobile-nav-list { display:flex; flex-direction:column; gap:4px; flex:1 } .mobile-nav-item { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-radius:11px; cursor:pointer; opacity:0; transform:translateX(28px); transition:background .2s,color .2s,opacity .4s var(--ease),transform .4s var(--ease); transition-delay:calc(var(--mi,0)*.045s) } .mobile-overlay.open .mobile-nav-item { opacity:1; transform:translateX(0) } .mobile-nav-item:hover { background:var(--green-subtle) } .mobile-nav-item--active { background:var(--green-subtle) } .mobile-nav-label { font-family:var(--font-d); font-size:1.05rem; font-weight:700; color:var(--text-muted) } .mobile-nav-item:hover .mobile-nav-label,.mobile-nav-item--active .mobile-nav-label { color:var(--green) } .mobile-nav-item svg { color:var(--text-faint); transition:transform .2s,color .2s } .mobile-nav-item:hover svg { transform:translateX(4px); color:var(--green) } .mobile-footer { display:flex; flex-direction:column; gap:1.5rem; padding-top:2rem; border-top:1px solid var(--border); margin-top:2rem; opacity:0; transform:translateY(12px); transition:opacity .4s var(--ease) .5s,transform .4s var(--ease) .5s } .mobile-overlay.open .mobile-footer { opacity:1; transform:translateY(0) } .mobile-footer .btn { justify-content:center } .mobile-social { display:flex; gap:10px; justify-content:center } .mobile-social-link { width:38px; height:38px; border-radius:9px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all .2s; cursor:pointer } .mobile-social-link:hover { background:var(--green-subtle); color:var(--green); border-color:var(--border-g) } /* ── 8. FOOTER ───────────────────────────────────────────────── */ .footer { background:var(--bg-3); border-top:1px solid var(--border) } .footer-top-bar { background:rgba(0,200,83,.05); border-bottom:1px solid var(--border-g); padding:13px 0 } .footer-top-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--text-muted); font-family:var(--font-d); font-weight:600 } .footer-socials { display:flex; gap:8px } .social-link { width:32px; height:32px; border-radius:8px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-faint); transition:all .2s; cursor:pointer } .social-link:hover { background:var(--green-subtle); color:var(--green); border-color:var(--border-g) } .footer-main { padding:60px 0 44px } .footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1fr; gap:3rem } .footer-brand p { font-size:.875rem; color:var(--text-muted); line-height:1.75; margin-bottom:2rem; max-width:280px } .newsletter-wrap { margin-top:1.5rem } .newsletter-label { font-family:var(--font-d); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:.75rem } .newsletter-form { display:flex; gap:.5rem } .newsletter-form input { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:.7rem 1rem; color:var(--text); font-size:.85rem; min-width:0 } .newsletter-form input:focus { border-color:var(--border-g); box-shadow:0 0 0 3px rgba(0,200,83,.1) } .footer-col h5 { font-family:var(--font-d); font-size:.73rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.25rem } .footer-col ul { display:flex; flex-direction:column; gap:9px } .footer-col a { font-size:.875rem; color:var(--text-muted); transition:color .2s; cursor:pointer } .footer-col a:hover { color:var(--green) } .footer-bottom { border-top:1px solid var(--border); padding:22px 0 } .footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.79rem; color:var(--text-faint) } .footer-legal { display:flex; gap:1.5rem } .footer-legal a { color:var(--text-faint); transition:color .2s; cursor:pointer } .footer-legal a:hover { color:var(--green) } /* ── 9. RESPONSIVE ───────────────────────────────────────────── */ @media(max-width:1100px) { .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem } .footer-brand { grid-column:span 2 } } @media(min-width:961px) { /* Desktop: nav links + CTAs visible, mobile controls hidden */ .hamburger { display:none !important } .nav-links { display:flex } .nav-ctas { display:flex } } @media(max-width:960px) { .nav-inner { padding:0 16px } .nav-links { display:none } .nav-ctas { display:none } .hamburger { display:flex !important; cursor:pointer !important } } @media(max-width:480px) { .nav-inner { padding:0 12px } .footer-grid { grid-template-columns:1fr } .footer-brand { grid-column:span 1 } .footer-bottom-inner { flex-direction:column; text-align:center } .footer-legal { justify-content:center; flex-wrap:wrap } } @media(max-width:360px) { .footer-top-inner { flex-direction:column; text-align:center } } img{max-width:100%;height:auto;} img { max-width: 100%; height: auto; } /* ═══════════════════════════════════════════════════════════════════ * CURSOR OVERRIDE — loaded globally, ensures system cursor is always * visible. !important guarantees it beats any other CSS rule. * ═══════════════════════════════════════════════════════════════════ */ html, body { cursor: default !important; } a, button, [role="button"], label, .btn, .svc-card, .tcard, .blog-card, .proj-card, .social-link, .mega-item, .mobile-nav-item, .tag-chip, .cat-btn, .faq-btn, .carousel-btn, .carousel-dot, .tcar-btn, .tcar-dot, .bcv-tab, .hvdt, .nav-item, .footer-col a, .footer-legal a, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], select, summary { cursor: pointer !important; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], textarea, .qinput, .qselect, .qtextarea { cursor: text !important; }