/* =========================================================== Hexalon Technologies — shared stylesheet =========================================================== */ /* Font loading moved to a in on every page — @import here would make the browser discover and fetch the Google Fonts CSS only after parsing this file, serialized behind it instead of in parallel, and would make the preconnect hint in pointless. */ :root{ /* Core neutrals */ --navy-950:#050914; --navy-900:#0a1224; --navy-850:#0d1730; --navy-800:#101c38; --navy-700:#152549; --navy-600:#1c3160; --line-dark:#22335a; --slate-50:#f7f9fc; --slate-100:#eef2f8; --slate-200:#dfe6f0; --slate-300:#c3cddc; --slate-400:#8f9cb5; --slate-500:#67748f; --slate-600:#4a5570; --slate-700:#333c54; --slate-900:#131a2c; --white:#ffffff; /* Brand */ --blue-600:#2f5eea; --blue-500:#4573f5; --blue-400:#6d93ff; --blue-glow:#3b6bff; /* Product accents */ --aether-teal:#2fd4c8; --aether-cyan:#3fb8e8; --hawk-blue:#3f8cff; --hawk-red:#ef4a5f; --hawk-amber:#f5a938; --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:28px; --shadow-sm:0 1px 2px rgba(9,14,29,.06), 0 1px 1px rgba(9,14,29,.04); --shadow-md:0 8px 24px rgba(9,14,29,.08); --shadow-lg:0 24px 60px rgba(9,14,29,.14); --shadow-glow:0 0 0 1px rgba(63,140,255,.16), 0 20px 60px rgba(47,94,234,.18); --container:1240px; --gutter:28px; --header-h:72px; --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; --hex-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='120'%3E%3Cg fill='none' stroke='rgba(20,40,80,0.09)' stroke-width='1.2'%3E%3Cpolygon points='34.64,0 69.28,20 69.28,60 34.64,80 0,60 0,20'/%3E%3Cpolygon points='0,60 34.64,80 34.64,120 0,140 -34.64,120 -34.64,80'/%3E%3Cpolygon points='69.28,60 103.92,80 103.92,120 69.28,140 34.64,120 34.64,80'/%3E%3C/g%3E%3C/svg%3E"); --hex-pattern-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='120'%3E%3Cg fill='none' stroke='rgba(20,40,80,0.055)' stroke-width='1.2'%3E%3Cpolygon points='34.64,0 69.28,20 69.28,60 34.64,80 0,60 0,20'/%3E%3Cpolygon points='0,60 34.64,80 34.64,120 0,140 -34.64,120 -34.64,80'/%3E%3Cpolygon points='69.28,60 103.92,80 103.92,120 69.28,140 34.64,120 34.64,80'/%3E%3C/g%3E%3C/svg%3E"); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* The sticky header must not cover the target of an in-page #anchor jump. */ [id]{scroll-margin-top:calc(var(--header-h) + 16px);} body{ font-family:var(--font-sans); color:var(--slate-700); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-wrap:break-word; } /* Locked while the mobile nav panel is open. */ body.nav-open{overflow:hidden;} img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ul{list-style:none;} button{font-family:inherit;cursor:pointer;} .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); } section{position:relative;} h1,h2,h3,h4{ font-weight:800; color:var(--navy-900); letter-spacing:-0.02em; line-height:1.15; } h1{font-size:clamp(1.85rem,5.6vw,3.6rem);} h2{font-size:clamp(1.45rem,4.2vw,2.5rem);} h3{font-size:clamp(1.1rem,2.4vw,1.25rem);} h4{font-size:clamp(1rem,2vw,1.05rem);} p{color:var(--slate-600);} .lede{font-size:clamp(1rem,2.4vw,1.15rem);color:var(--slate-500);line-height:1.7;} /* ---------- utility ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--blue-500); } .eyebrow::before{ content:"";width:20px;height:2px;background:var(--blue-500);display:inline-block;border-radius:2px; } .eyebrow.on-dark{color:var(--blue-600);} .eyebrow.hawk{color:#1f5fd6;} .eyebrow.hawk::before{background:var(--hawk-blue);} .eyebrow.aether::before{background:var(--aether-teal);} .eyebrow.aether{color:#0d8f83;} .section-head{max-width:680px;margin-bottom:44px;} .section-head.center{margin-left:auto;margin-right:auto;text-align:center;} .section-head p{margin-top:14px;} .pad{padding:96px 0;} .pad-sm{padding:64px 0;} .pad-lg{padding:120px 0;} @media (max-width:780px){ .pad{padding:64px 0;} .pad-lg{padding:80px 0;} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 26px;border-radius:999px;font-weight:600;font-size:.95rem; border:1px solid transparent;transition:all .18s ease;white-space:nowrap; } .btn-primary{ background:linear-gradient(135deg,var(--blue-600),var(--blue-glow)); color:#fff;box-shadow:0 10px 24px rgba(47,94,234,.28); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(47,94,234,.36);} .btn-ghost{ background:transparent;border-color:var(--slate-300);color:var(--navy-900); } .btn-ghost:hover{background:var(--slate-100);border-color:var(--slate-400);} .btn-outline{ background:transparent;border-color:var(--slate-300);color:var(--navy-900); } .btn-outline:hover{border-color:var(--blue-500);color:var(--blue-600);} .btn-sm{padding:9px 18px;font-size:.85rem;} .btn svg{width:16px;height:16px;} /* ---------- badges / chips ---------- */ .chip-row{display:flex;flex-wrap:wrap;gap:10px;} .chip{ display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border-radius:999px;font-size:.82rem;font-weight:600; background:var(--slate-100);border:1px solid var(--slate-200);color:var(--slate-700); } .chip.light{background:var(--slate-100);border-color:var(--slate-200);color:var(--slate-700);} .chip .dot{width:6px;height:6px;border-radius:50%;background:var(--aether-teal);} /* =========================================================== Header / Nav =========================================================== */ .site-header{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,.85); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--slate-200); } .nav{ display:flex;align-items:center;justify-content:space-between; padding:16px var(--gutter);max-width:var(--container);margin:0 auto;gap:12px; } .brand{display:flex;align-items:center;gap:10px;color:var(--navy-900);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;} .brand .mark{width:32px;height:38px;flex-shrink:0;} .brand small{display:block;font-weight:500;font-size:.62rem;letter-spacing:.12em;color:var(--slate-500);text-transform:uppercase;} .nav-links{display:flex;align-items:center;gap:6px;} .nav-links > li{position:relative;} .nav-links a.nav-link{ display:inline-flex;align-items:center;gap:5px; padding:10px 14px;border-radius:8px;color:var(--slate-600);font-weight:500;font-size:.92rem; transition:color .15s ease,background .15s ease; } .nav-links a.nav-link:hover,.nav-links a.nav-link.active{color:var(--navy-900);background:var(--slate-100);} .nav-links a.nav-link svg{width:14px;height:14px;opacity:.7;} .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1;visibility:visible;transform:translateY(0); } .dropdown{ position:absolute;top:calc(100% + 8px);left:0;min-width:300px; background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-md); padding:8px;box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(6px);transition:all .18s ease; } .dropdown a{ display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;transition:background .15s ease; } .dropdown a:hover{background:var(--slate-100);} .dropdown .dd-icon{ width:34px;height:34px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:var(--slate-100); } .dropdown .dd-icon svg{width:18px;height:18px;} .dropdown strong{display:block;color:var(--navy-900);font-size:.9rem;font-weight:700;} .dropdown span{display:block;color:var(--slate-500);font-size:.78rem;margin-top:2px;line-height:1.4;} .nav-cta{display:flex;align-items:center;gap:10px;} .nav-toggle{ display:none;background:none;border:none;color:var(--navy-900); width:44px;height:44px;align-items:center;justify-content:center;flex-shrink:0; } .nav-toggle svg{width:24px;height:24px;} /* The long sales@ address goes first: below this the links plus both buttons no longer fit on one line. Threshold raised from 1140 to 1200 to make room for the 5th nav-links item (Resources). */ @media (max-width:1200px){ .nav-cta .btn-ghost{display:none;} } @media (max-width:960px){ .nav-links{ /* NOT position:fixed. .site-header sets backdrop-filter, which makes it the containing block for fixed descendants — a fixed panel would be sized against the 65px header instead of the viewport. Absolute against the sticky header gives the same result without that trap. */ position:absolute;left:0;right:0;top:100%;background:#fff; /* 100% == the header's padding-box height, i.e. exactly the offset this panel already sits at, so the panel ends flush with the viewport bottom. dvh keeps it right when mobile browser chrome collapses. */ height:calc(100vh - 100%); height:calc(100dvh - 100%); /* display:none while closed. A panel parked at translateX(100%) is only hidden by body{overflow-x:hidden} — it still inflates scrollWidth (iOS rubber-bands) and keeps its links in the tab order. */ display:none; flex-direction:column;align-items:stretch;gap:2px;padding:18px; padding-bottom:calc(24px + env(safe-area-inset-bottom)); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; } .nav-links.open{ display:flex; animation:nav-panel-in .25s cubic-bezier(.22,.68,.35,1) both; } .nav-cta .btn{min-height:44px;} .nav-links > li{width:100%;} .nav-links a.nav-link{width:100%;padding:14px;font-size:1rem;} .nav-links a.nav-link::after{display:none;} .dropdown{ position:static;opacity:1;visibility:visible;transform:none;box-shadow:none; display:none;margin-top:4px;min-width:0;width:100%; } .has-dropdown.open .dropdown{display:block;} .nav-toggle{display:flex;} } /* Phone: the brand lock-up and the CTA have to share ~320px. */ @media (max-width:520px){ .nav{padding:10px var(--gutter);} .brand{font-size:.95rem;gap:8px;} .brand .mark{width:26px;height:31px;} /* "Technologies Pvt. Ltd." wraps to three lines at this width and doubles the header height — the wordmark alone carries the brand here. */ .brand small{display:none;} .brand br{display:none;} .nav-cta{gap:4px;} .nav-cta .btn-primary{padding:9px 13px;font-size:.8rem;} } @media (max-width:370px){ .nav-cta .btn-primary{display:none;} } /* =========================================================== Hero sections (dark) =========================================================== */ .hero{ position:relative;color:var(--navy-900);overflow:hidden; background: radial-gradient(ellipse 800px 500px at 15% -10%, rgba(47,94,234,.10), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 0%, rgba(63,184,232,.10), transparent 55%), linear-gradient(180deg,#ffffff,var(--slate-50) 75%); padding:clamp(48px,8vw,96px) 0 clamp(44px,7.5vw,90px); border-bottom:1px solid var(--slate-200); } .hero.hawk{ background: radial-gradient(ellipse 800px 500px at 10% -10%, rgba(63,140,255,.10), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(239,74,95,.07), transparent 55%), linear-gradient(180deg,#ffffff,var(--slate-50) 75%); } .hero-grid-overlay{ position:absolute;inset:0; background-image:var(--hex-pattern); background-size:69px 120px; mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 80%); pointer-events:none; } .hero .container{position:relative;z-index:1;} .hero-inner{max-width:760px;} .hero p.lede{color:var(--slate-600);margin:20px 0 30px;} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;} .hero .chip-row{margin-top:36px;} /* =========================================================== Cards =========================================================== */ .card{ background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg); padding:clamp(20px,3vw,30px);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent;} .icon-tile{ width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0; } .icon-tile svg{width:18px;height:18px;stroke-width:1.6;} .card h3{margin-bottom:8px;font-size:1.08rem;} .card p{font-size:.92rem;} .icon-tile.blue{background:rgba(47,94,234,.1);color:var(--blue-600);} .icon-tile.teal{background:rgba(47,212,200,.12);color:#0d8f83;} .icon-tile.hawk{background:rgba(63,140,255,.1);color:var(--hawk-blue);} .icon-tile.red{background:rgba(239,74,95,.1);color:var(--hawk-red);} .icon-tile.amber{background:rgba(245,169,56,.14);color:#c17c11;} /* Feature card variant used to nest inside the tinted product-showcase panels */ .card-dark{ background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg); padding:clamp(20px,2.8vw,28px);color:var(--slate-600);box-shadow:var(--shadow-sm); } .card-dark h3,.card-dark h4{color:var(--navy-900);} .card-dark p{color:var(--slate-600);} /* Grid helpers */ .grid{display:grid;gap:24px;} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} /* Laptop: four across gets cramped well before the tablet breakpoint. */ @media (max-width:1180px){ .grid-4{grid-template-columns:repeat(3,1fr);} } @media (max-width:960px){ .grid{gap:20px;} .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .grid{gap:16px;} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} } /* =========================================================== Product showcase (home) =========================================================== */ .product-showcase{ border-radius:var(--radius-xl); padding:clamp(20px,4vw,44px); position:relative;overflow:hidden; border:1px solid var(--slate-200); box-shadow:var(--shadow-md); } .product-showcase.aether{ background-color:#eef8fb; background-image:var(--hex-pattern-soft), linear-gradient(160deg,#f3fbfa,#eef8fb); background-size:69px 120px, auto; color:var(--navy-900); } .product-showcase.hawk{ background-color:#eef3fc; background-image:var(--hex-pattern-soft), linear-gradient(160deg,#f4f7fd,#eef3fc); background-size:69px 120px, auto; color:var(--navy-900); } .product-showcase .ps-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px;} .product-showcase .ps-logo{display:flex;align-items:center;gap:12px;} .product-showcase .ps-logo .mark{width:44px;height:44px;} .product-showcase .ps-logo strong{font-size:1.3rem;font-weight:800;color:var(--navy-900);} .product-showcase .ps-logo span{display:block;font-size:.76rem;color:var(--slate-500);letter-spacing:.06em;text-transform:uppercase;} .product-showcase p.lede{color:var(--slate-600);font-size:1rem;margin:0 0 22px;max-width:560px;} .product-showcase .stat-row{display:flex;gap:28px;flex-wrap:wrap;margin:26px 0;} .product-showcase .stat-row div{min-width:90px;} .product-showcase .stat-row strong{display:block;font-size:1.6rem;font-weight:800;color:var(--navy-900);} .product-showcase .stat-row span{font-size:.76rem;color:var(--slate-500);text-transform:uppercase;letter-spacing:.06em;} .product-showcase.aether .stat-row strong{color:#0d8f83;} .product-showcase.hawk .stat-row strong{color:#1f5fd6;} /* =========================================================== Stats band =========================================================== */ .stats-band{ background-color:var(--slate-50); background-image:var(--hex-pattern-soft); background-size:69px 120px; color:var(--navy-900);padding:56px 0; border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200); } .stats-band .grid-4{gap:0;} /* the stats band opts out of the global grid-4 breakpoints — it has its own */ .stats-band .grid-4{grid-template-columns:repeat(4,1fr);} .stat-item{text-align:center;padding:14px;border-left:1px solid var(--slate-200);} .stat-item:first-child{border-left:none;} .stat-item strong{display:block;font-size:clamp(1.6rem,4.4vw,2.1rem);font-weight:800;background:linear-gradient(135deg,var(--navy-900),var(--blue-600));-webkit-background-clip:text;background-clip:text;color:transparent;} .stat-item span{font-size:clamp(.74rem,1.7vw,.82rem);color:var(--slate-500);} @media (max-width:780px){ /* two per row: the divider resets on every odd item, not just the first */ .stats-band{padding:36px 0;} .stats-band .grid-4{grid-template-columns:repeat(2,1fr);} .stat-item{padding:16px 10px;} .stat-item:nth-child(odd){border-left:none;} .stat-item:nth-child(n+3){border-top:1px solid var(--slate-200);} } @media (max-width:400px){ .stats-band .grid-4{grid-template-columns:1fr;} .stat-item{border-left:none;} .stat-item + .stat-item{border-top:1px solid var(--slate-200);} } /* =========================================================== Feature list (icon + text row) =========================================================== */ .feature-row{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--slate-200);} .feature-row:first-child{border-top:none;} .feature-row .icon-tile{flex-shrink:0;margin-bottom:0;} .feature-row h4{margin-bottom:4px;} .feature-row p{font-size:.92rem;} /* =========================================================== Architecture diagram (AetherVirt) =========================================================== */ .diagram{ background:var(--navy-950);border-radius:var(--radius-lg); padding:clamp(20px,4vw,44px);color:#fff; border:1px solid rgba(255,255,255,.08); } .diagram-flow{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap;justify-content:center;} .diagram-node{ background:var(--navy-850);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md); padding:18px;min-width:160px;text-align:center; } .diagram-node strong{display:block;font-size:.92rem;color:#fff;margin-bottom:2px;} .diagram-node span{display:block;font-size:.74rem;color:var(--slate-400);} .diagram-node.control{border-color:rgba(47,212,200,.5);box-shadow:0 0 0 1px rgba(47,212,200,.15),0 0 30px rgba(47,212,200,.08);} .diagram-arrow{display:flex;align-items:center;justify-content:center;color:var(--slate-500);font-size:1.4rem;} .diagram-node.control{min-width:220px;} .diagram-branch{min-width:320px;} .diagram-cluster{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px; } .diagram-cluster .diagram-node{padding:12px;min-width:0;} .diagram-cluster .diagram-node strong{font-size:.8rem;} .diagram-caption{margin-top:26px;color:var(--slate-400);font-size:.88rem;text-align:center;max-width:640px;margin-left:auto;margin-right:auto;} @media (max-width:900px){ .diagram-flow{flex-direction:column;align-items:stretch;} .diagram-arrow{transform:rotate(90deg);} .diagram-node,.diagram-node.control,.diagram-branch{min-width:0;width:100%;} } @media (max-width:560px){ .diagram-cluster{grid-template-columns:repeat(2,1fr);} } @media (max-width:360px){ .diagram-cluster{grid-template-columns:1fr;} } /* =========================================================== Mock dashboard panel =========================================================== */ .mock-panel{ background:var(--navy-950);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg); overflow:hidden;box-shadow:var(--shadow-lg); } .mock-panel .mp-bar{ display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08); } .mock-panel .mp-bar .dot{width:9px;height:9px;border-radius:50%;} .mock-panel .mp-bar .dot:nth-child(1){background:#ef4a5f;} .mock-panel .mp-bar .dot:nth-child(2){background:#f5a938;} .mock-panel .mp-bar .dot:nth-child(3){background:#2fd4c8;} .mock-panel .mp-body{padding:clamp(16px,2.4vw,22px);} .mock-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:14px;} .mock-stat{background:var(--navy-850);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px;} .mock-stat span{display:block;font-size:.68rem;color:var(--slate-500);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;} .mock-stat strong{font-size:1.3rem;color:#fff;font-family:var(--font-mono);} /* =========================================================== Table =========================================================== */ .table-wrap{ overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--slate-200); -webkit-overflow-scrolling:touch; } table.glance{width:100%;border-collapse:collapse;min-width:560px;} table.glance th{ background:var(--navy-950);color:#fff;text-align:left;padding:16px 20px;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em; } table.glance td{padding:15px 20px;border-top:1px solid var(--slate-200);font-size:.92rem;} @media (max-width:640px){ table.glance{min-width:460px;} table.glance th{padding:12px 14px;font-size:.72rem;} table.glance td{padding:12px 14px;font-size:.86rem;} } table.glance tr:nth-child(even) td{background:var(--slate-50);} table.glance td:first-child{font-weight:600;color:var(--navy-900);} .spec-table{width:100%;border-collapse:collapse;} .spec-table tr{border-top:1px solid var(--slate-200);} .spec-table tr:first-child{border-top:none;} .spec-table th,.spec-table td{padding:16px 4px;text-align:left;vertical-align:top;font-size:.92rem;} .spec-table th{width:210px;color:var(--navy-900);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;} /* =========================================================== CTA band =========================================================== */ .cta-band{ background-color:#eef2fb; background-image:var(--hex-pattern), linear-gradient(160deg,#f3f6fd,#eef2fb); background-size:69px 120px, auto; border:1px solid var(--slate-200); color:var(--navy-900);border-radius:var(--radius-xl); padding:clamp(32px,6vw,64px) clamp(20px,5vw,64px);text-align:center; position:relative;overflow:hidden;box-shadow:var(--shadow-md); } .cta-band::before{ content:"";position:absolute;inset:0; background:radial-gradient(ellipse 500px 300px at 50% 0%, rgba(63,140,255,.14), transparent 70%); } .cta-band > *{position:relative;z-index:1;} .cta-band h2{color:var(--navy-900);} .cta-band p{color:var(--slate-600);max-width:520px;margin:14px auto 30px;} .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} /* =========================================================== Footer =========================================================== */ .site-footer{background:var(--slate-50);color:var(--slate-500);padding:64px 0 28px;border-top:1px solid var(--slate-200);} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--slate-200);} .footer-brand .brand{margin-bottom:14px;} .footer-brand p{color:var(--slate-500);font-size:.9rem;max-width:280px;} .footer-col h4{color:var(--navy-900);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;} .footer-col li{margin-bottom:10px;} .footer-col a{color:var(--slate-500);font-size:.9rem;transition:color .15s ease;} .footer-col a:hover{color:var(--blue-600);} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px;font-size:.82rem;} @media (max-width:1024px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;} } @media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;gap:32px;} .footer-brand{grid-column:1 / -1;} .footer-brand p{max-width:none;} } @media (max-width:520px){ .footer-grid{grid-template-columns:1fr;gap:26px;} .footer-bottom{flex-direction:column;align-items:flex-start;} } /* =========================================================== Breadcrumbs =========================================================== */ .crumb-bar{background:var(--slate-50);border-bottom:1px solid var(--slate-200);} .crumb-list{ display:flex;flex-wrap:wrap;align-items:center;gap:6px; padding:12px 0;font-size:.8rem;color:var(--slate-500); } .crumb-list li{display:flex;align-items:center;gap:6px;} .crumb-list li:not(:last-child)::after{content:"/";color:var(--slate-300);} .crumb-list a{color:var(--slate-500);transition:color .15s ease;} .crumb-list a:hover{color:var(--blue-600);} .crumb-list li[aria-current="page"]{color:var(--navy-900);font-weight:600;} /* =========================================================== FAQ accordion =========================================================== */ .faq-list{max-width:820px;} .faq-item{border-top:1px solid var(--slate-200);padding:18px 0;} .faq-item:first-child{border-top:none;} .faq-item summary{ cursor:pointer;list-style:none; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:10px 0;margin:-10px 0;min-height:44px; font-weight:700;font-size:1rem;color:var(--navy-900); } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{ content:"+";flex-shrink:0;font-size:1.3rem;font-weight:400;color:var(--slate-400); transition:transform .2s ease; } .faq-item[open] summary::after{transform:rotate(45deg);} .faq-item p{margin-top:10px;font-size:.92rem;} /* =========================================================== Article / blog post =========================================================== */ .article-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;font-size:.82rem;color:var(--slate-500);} .article-meta .chip{font-size:.72rem;padding:5px 11px;} .article-body{max-width:700px;margin:0 auto;} .article-body h2{margin-top:42px;margin-bottom:14px;font-size:clamp(1.25rem,2.6vw,1.5rem);} .article-body h3{margin-top:30px;margin-bottom:10px;} .article-body p{margin-bottom:16px;font-size:1rem;} .article-body ul{margin:0 0 18px 20px;color:var(--slate-600);} .article-body li{margin-bottom:8px;list-style:disc;font-size:.96rem;} .article-body > p:first-child{font-size:1.1rem;color:var(--slate-600);} .article-cta{ max-width:700px;margin:44px auto 0;padding:24px 28px;border-radius:var(--radius-lg); background:var(--slate-50);border:1px solid var(--slate-200); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px; } .article-cta p{margin:0;font-weight:600;color:var(--navy-900);} .related-reading{max-width:700px;margin:36px auto 0;padding-top:24px;border-top:1px solid var(--slate-200);} .related-reading h4{margin-bottom:12px;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500);} .related-reading ul{display:flex;flex-direction:column;gap:8px;} .related-reading a{color:var(--blue-600);font-weight:600;font-size:.94rem;} /* =========================================================== Page hero (secondary pages: company/contact) =========================================================== */ .page-hero{ background:linear-gradient(180deg,var(--navy-950),var(--navy-850)); color:#fff;padding:74px 0 64px; } .page-hero h1{color:#fff;font-size:clamp(2rem,4vw,2.8rem);} .page-hero p{color:var(--slate-300);max-width:620px;margin-top:16px;} .breadcrumb{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--slate-500);margin-bottom:18px;} .breadcrumb a{color:var(--slate-400);} .breadcrumb a:hover{color:#fff;} /* =========================================================== Contact page =========================================================== */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start;} @media (max-width:860px){.contact-grid{grid-template-columns:1fr;}} .contact-card{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:26px;margin-bottom:16px;} .contact-card h4{margin-bottom:6px;} .contact-card a{color:var(--blue-600);font-weight:600;} .form-field{margin-bottom:18px;} .form-field label{display:block;font-size:.85rem;font-weight:600;color:var(--navy-900);margin-bottom:8px;} .form-field input,.form-field select,.form-field textarea{ width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--slate-200);background:#fff; font-family:inherit;font-size:.95rem;color:var(--navy-900);transition:border-color .15s ease,box-shadow .15s ease; } .form-field input:focus,.form-field select:focus,.form-field textarea:focus{ outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(47,94,234,.14); } @media (max-width:640px){ .form-field input,.form-field select,.form-field textarea{font-size:16px;} } .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @media (max-width:520px){.form-row{grid-template-columns:1fr;}} .form-note{font-size:.8rem;color:var(--slate-500);margin-top:10px;} /* =========================================================== Misc: logos section, industries, values =========================================================== */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} @media (max-width:860px){.split{grid-template-columns:1fr;gap:36px;}} .check-list li{display:flex;gap:12px;padding:9px 0;font-size:.95rem;color:var(--slate-600);align-items:flex-start;} .check-list svg{width:18px;height:18px;color:var(--blue-600);flex-shrink:0;margin-top:2px;} .category-tag{ display:inline-block;padding:5px 12px;border-radius:999px;font-size:.7rem;font-weight:700; text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px; } .category-tag.hawk-tag{background:rgba(63,140,255,.12);color:var(--hawk-blue);} /* reveal on scroll */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;} .reveal.in{opacity:1;transform:translateY(0);} /* back to top */ .back-top{ position:fixed;right:16px;width:44px;height:44px;border-radius:50%; bottom:calc(16px + env(safe-area-inset-bottom)); background:var(--navy-950);color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .2s ease;z-index:60; } .back-top.show{opacity:1;visibility:visible;transform:translateY(0);} .back-top svg{width:18px;height:18px;} /* =========================================================== Skip to content (keyboard / screen-reader accessibility) =========================================================== */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:2000; background:var(--blue-600);color:#fff;padding:12px 20px; border-radius:0 0 var(--radius-sm) 0;font-weight:600;font-size:.9rem; } .skip-link:focus{left:0;} /* =========================================================== Technical summary — key-feature emphasis (AetherVirt) =========================================================== */ .spec-table td strong, #summary .section-head p strong{ color:var(--navy-900); font-weight:700; } /* =========================================================== Motion layer All of this is disabled under prefers-reduced-motion (bottom of file) =========================================================== */ /* ---------- hero entrance ---------- */ @keyframes hex-rise{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} } .hero-inner > *, .page-hero .container > *{ opacity:0; animation:hex-rise .7s cubic-bezier(.22,.68,.35,1) forwards; } .hero-inner > *:nth-child(1),.page-hero .container > *:nth-child(1){animation-delay:.05s;} .hero-inner > *:nth-child(2),.page-hero .container > *:nth-child(2){animation-delay:.14s;} .hero-inner > *:nth-child(3),.page-hero .container > *:nth-child(3){animation-delay:.23s;} .hero-inner > *:nth-child(4),.page-hero .container > *:nth-child(4){animation-delay:.32s;} .hero-inner > *:nth-child(5),.page-hero .container > *:nth-child(5){animation-delay:.41s;} .hero-inner > *:nth-child(6){animation-delay:.50s;} /* slow drift on the hex pattern behind the hero */ @keyframes hex-drift{ from{background-position:0 0;} to{background-position:69px 120px;} } .hero-grid-overlay{animation:hex-drift 70s linear infinite;} /* ---------- staggered reveal for grids ---------- */ /* a reveal element that staggers its children does not also animate itself */ .reveal.stagger{opacity:1;transform:none;} .stagger > *{ opacity:0;transform:translateY(16px); transition:opacity .55s ease,transform .55s ease; } .stagger.in > *{opacity:1;transform:translateY(0);} .stagger.in > *:nth-child(1){transition-delay:.04s;} .stagger.in > *:nth-child(2){transition-delay:.12s;} .stagger.in > *:nth-child(3){transition-delay:.20s;} .stagger.in > *:nth-child(4){transition-delay:.28s;} .stagger.in > *:nth-child(5){transition-delay:.36s;} .stagger.in > *:nth-child(6){transition-delay:.44s;} .stagger.in > *:nth-child(7){transition-delay:.52s;} .stagger.in > *:nth-child(8){transition-delay:.60s;} /* ---------- card micro-interactions ---------- */ .card .icon-tile, .card-dark .icon-tile{transition:transform .28s cubic-bezier(.34,1.56,.64,1),background .2s ease;} .card:hover .icon-tile, .card-dark:hover .icon-tile{transform:translateY(-2px) scale(1.08);} .card h3,.card-dark h3{transition:color .2s ease;} .card:hover h3{color:var(--blue-600);} /* ---------- primary button sheen ---------- */ .btn-primary{position:relative;overflow:hidden;} .btn-primary::after{ content:"";position:absolute;top:0;left:-140%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent); transform:skewX(-18deg);transition:left .55s ease; } .btn-primary:hover::after{left:140%;} /* ---------- nav underline ---------- */ .nav-links a.nav-link{position:relative;} .nav-links a.nav-link::after{ content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px; background:var(--blue-600);border-radius:2px; transform:scaleX(0);transform-origin:left;transition:transform .25s ease; } .nav-links a.nav-link:hover::after, .nav-links a.nav-link.active::after{transform:scaleX(1);} /* ---------- chips ---------- */ .chip{transition:transform .2s ease,border-color .2s ease,background .2s ease;} .chip:hover{transform:translateY(-2px);border-color:var(--slate-300);} /* live pulse on status dots — the site monitors things, so they should look alive */ @keyframes hex-pulse{ 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.4);opacity:.6;} } .chip .dot{animation:hex-pulse 2.4s ease-out infinite;} .chip:nth-child(2) .dot{animation-delay:.5s;} .chip:nth-child(3) .dot{animation-delay:1s;} /* ---------- brand mark ---------- */ .brand .mark{transition:transform .35s cubic-bezier(.34,1.56,.64,1);} .brand:hover .mark{transform:rotate(-6deg) scale(1.06);} /* ---------- architecture diagram flow ---------- */ @keyframes hex-flow{ 0%,100%{opacity:.45;transform:translateX(0);} 50%{opacity:1;transform:translateX(4px);} } .diagram-arrow{animation:hex-flow 2.6s ease-in-out infinite;} .diagram-arrow:nth-of-type(2){animation-delay:.5s;} .diagram-node{transition:border-color .25s ease,transform .25s ease;} .diagram-node:hover{border-color:rgba(90,168,230,.55);transform:translateY(-3px);} /* ---------- scroll progress bar (element injected by main.js) ---------- */ .scroll-progress{ position:fixed;top:0;left:0;height:3px;width:0;z-index:200; background:linear-gradient(90deg,var(--blue-600),var(--aether-teal)); transition:width .1s linear;pointer-events:none; } /* ---------- table rows ---------- */ table.glance tbody tr,table.glance tr{transition:background .18s ease;} table.glance tr:hover td{background:var(--slate-100);} /* ---------- respect the user's motion preference ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .hero-inner > *,.page-hero .container > *,.stagger > *{ opacity:1 !important;transform:none !important; } } /* =========================================================== Responsive layer Breakpoint ladder, widest first: >=1600 large desktop — wider container <=1400 laptop — gutter tightens <=1180 small laptop — grid-4 drops to 3 (see grid helpers) <=1140 nav — long sales@ button hidden <=960 tablet — hamburger nav, grids halve <=780 tablet portrait — section padding, stats band <=640 phone — single column everywhere <=480 small phone — stacked buttons, tightest padding =========================================================== */ /* ---------- large desktop: use the extra width ---------- */ @media (min-width:1600px){ :root{--container:1360px;--gutter:32px;} .hero-inner{max-width:820px;} } /* ---------- laptop ---------- */ @media (max-width:1400px){ :root{--gutter:24px;} } /* ---------- tablet ---------- */ @media (max-width:960px){ .section-head{margin-bottom:32px;} .product-showcase .stat-row{gap:20px;margin:22px 0;} .product-showcase p.lede{max-width:none;} .split{gap:32px;} .feature-row{padding:16px 0;} } /* ---------- phone ---------- */ @media (max-width:640px){ :root{--gutter:18px;} /* Long CTA labels ("See all 28 eHAWK DDoS capabilities") are wider than a 320px screen; wrapping beats overflowing. The header buttons are short and must stay on one line so the header keeps its height. */ .btn{white-space:normal;text-align:center;max-width:100%;} .nav-cta .btn{white-space:nowrap;} .section-head{margin-bottom:26px;} .pad-sm{padding:44px 0;} /* full-bleed-ish surfaces read better than a card with 18px of margin */ .product-showcase,.cta-band{border-radius:var(--radius-lg);} .product-showcase .ps-top{gap:14px;margin-bottom:16px;} .product-showcase .ps-logo .mark, .product-showcase .ps-logo img{width:36px;height:36px;} .product-showcase .ps-logo strong{font-size:1.12rem;} .product-showcase .stat-row{gap:16px 22px;margin:20px 0;} .product-showcase .stat-row div{min-width:80px;} .product-showcase .stat-row strong{font-size:1.35rem;} .chip{font-size:.78rem;padding:7px 12px;} .chip-row{gap:8px;} .mock-stat-grid{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;} .mock-stat{padding:12px;} .mock-stat strong{font-size:1.15rem;} .diagram-caption{font-size:.82rem;margin-top:20px;} .feature-row{gap:12px;} .check-list li{font-size:.9rem;} /* Stack the spec table: a 210px label column leaves nothing for the value. */ .spec-table,.spec-table tbody,.spec-table tr,.spec-table th,.spec-table td{ display:block;width:auto; } .spec-table tr{padding:14px 2px;} .spec-table th,.spec-table td{padding:0 !important;} .spec-table th{margin-bottom:6px;} } /* ---------- small phone ---------- */ @media (max-width:480px){ .hero-actions,.cta-actions{flex-direction:column;align-items:stretch;} .hero-actions .btn,.cta-actions .btn{width:100%;white-space:normal;} .product-showcase .ps-top .btn, .product-showcase > div > .btn{width:100%;white-space:normal;} .btn{padding:13px 20px;} .back-top{width:42px;height:42px;right:12px;} } /* ---------- eHAWK feature catalogue (page-local classes) ---------- */ @media (max-width:640px){ .feat-category{margin-bottom:36px;} .feat-category-head{flex-wrap:wrap;gap:4px 12px;align-items:baseline;} .feat-category-head h3{font-size:1.12rem;} .feat-card{padding:18px;} } /* ---------- touch devices ---------- */ /* Hover transforms stick after a tap on touch screens, so scope them to pointers that can actually hover. */ @media (hover:none){ .card:hover,.chip:hover,.btn-primary:hover,.diagram-node:hover{transform:none;} .card:hover{box-shadow:none;border-color:var(--slate-200);} .card:hover .icon-tile,.card-dark:hover .icon-tile{transform:none;} .brand:hover .mark{transform:none;} /* Dropdowns open on tap (handled in main.js), never on hover. */ .has-dropdown:hover .dropdown{opacity:0;visibility:hidden;} .has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown{opacity:1;visibility:visible;} } /* ---------- short landscape viewports (phone held sideways) ---------- */ @media (max-width:960px) and (max-height:480px) and (orientation:landscape){ .hero{padding:36px 0 32px;} .nav-links a.nav-link{padding:10px 14px;} } /* off-canvas nav panel entrance (see the <=960px nav rules above) */ @keyframes nav-panel-in{ from{transform:translateX(100%);} to{transform:translateX(0);} } /* ---------- stacked architecture diagram: arrows point down ---------- hex-flow animates transform, which wipes the rotate(90deg) the <=900px rule applies — so the stacked layout needs its own vertical keyframe. */ @media (max-width:900px){ .diagram-arrow{animation-name:hex-flow-down;} } @keyframes hex-flow-down{ 0%,100%{opacity:.45;transform:rotate(90deg) translateX(0);} 50%{opacity:1;transform:rotate(90deg) translateX(4px);} }