/* ========================================================================== TIBURO GROUP — shared design system Palette (keyed to the Hammerhead Security Solutions crest: black shield, brass rope, white shark): --abyss #0A0E10 near-black, primary dark background --deep #12181B secondary dark background / panels --steel #263136 borders, mid-tone accents on dark --sonar #C9A667 primary accent — brass / crest rope-gold --beacon #E8CE9B secondary accent — pale brass highlight --signal #46E8B0 tactical accent — phosphor sonar-scope green, used sparingly for "live system" cues (status pills, radar sweep, scanlines, data readouts) so it reads as an operations signal, not a second brand color --foam #F4F0E6 warm off-white text on dark --ink #1B1F1C body text on light --mist #FAF8F3 warm light section background --line #2B3538 hairline on dark Type: Oswald (display, condensed/tactical) + Source Sans 3 (body/UI) + JetBrains Mono (technical/data labels — eyebrows, stat readouts, badges, breadcrumbs — the "instrument panel" layer of the system) ========================================================================== */ /* Fonts are loaded via tags in the page (see build_site.py's page() function), not @import — @import blocks in a serial chain (fetch CSS -> parse -> discover import -> fetch again) while a lets the browser's preloader fetch it in parallel with everything else. See README.md "Performance" section for self-hosting these instead. */ :root{ --abyss:#0A0E10; --deep:#12181B; --steel:#2B3A40; --sonar:#C9A667; /* Darkened from the original #A9854F: at that value this text color was 3.21:1 against --mist, below the WCAG AA 4.5:1 minimum for body/link text -- the light background is where nearly every use of this token actually renders (eyebrows, blog links, testimonial stars, badges; see the .on-dark overrides throughout this file that switch those same components to --signal/--foam/--beacon on dark sections instead). This value is 5.56:1 on --mist. The two components that are dark by a fixed inline background rather than by an .on-dark wrapper (.numbered li::before, .timeline-modern li>b) get an explicit --beacon override below instead of using this token, so they don't lose contrast now that this is tuned for light backgrounds. */ --sonar-dim:#7A6039; --beacon:#E8CE9B; --signal:#46E8B0; --signal-dim:#2FBE8E; --foam:#F4F0E6; --ink:#1B1F1C; --mist:#FAF8F3; --line:#2B3538; --line-light:#E4DFD2; --grid-line:rgba(201,166,103,.07); --max:1180px; /* layered elevation — two shadows per step (a tight contact shadow + a soft diffuse one) reads as real depth instead of the flat single drop-shadow a template tends to reach for */ --shadow-sm:0 1px 2px rgba(7,10,11,.06), 0 6px 14px -8px rgba(7,10,11,.12); --shadow-md:0 2px 4px rgba(7,10,11,.08), 0 16px 32px -14px rgba(7,10,11,.22); --shadow-lg:0 4px 10px rgba(7,10,11,.12), 0 30px 60px -20px rgba(7,10,11,.38); --shadow-glow:0 4px 10px rgba(7,10,11,.3), 0 0 0 1px rgba(70,232,176,.35), 0 0 32px -4px rgba(70,232,176,.45); --font-display:'Oswald',sans-serif; --font-body:'Source Sans 3',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace; } /* Blueprint/HUD grid texture — a faint fixed-size graph pattern dropped behind any dark section via background-image, so instrument-panel surfaces (hero, page-hero, section-dark) share one subtle motif instead of being flat color. Kept as a variable, not a class, since several selectors below layer it alongside their own gradients/photos. */ :root{ --grid-texture: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); /* one size entry per --grid-texture layer (it's 2 gradients) -- every selector that layers var(--grid-texture) alongside other backgrounds must use var(--grid-size) in the matching background-size position, otherwise the background-size list's comma count falls out of sync with the now-longer background-image list and sizes cycle onto the WRONG layer (a real bug caught during redesign QA: it was tiling a 44px square onto the CTA banner's actual gradient instead of the grid). */ --grid-size:44px 44px, 44px 44px; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--font-body); color:var(--ink); background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em; line-height:1.12; margin:0 0 .5em; text-transform:uppercase; } h1{font-size:clamp(2.6rem,5.6vw,4.6rem);font-weight:700;letter-spacing:-.01em;} h2{font-size:clamp(1.7rem,3vw,2.5rem);} h3{font-size:1.25rem;} p{margin:0 0 1em;} .container{max-width:var(--max);margin:0 auto;padding:0 24px;} section{padding:88px 0;} @media (max-width:640px){section{padding:56px 0;}} /* headline glow on dark surfaces — a faint instrument-panel backlight behind the display type, not a full neon effect (kept subtle so body copy stays the readable, unglowing thing on the page) */ .on-dark h1,.on-dark h2{text-shadow:0 0 46px rgba(201,166,103,.28);} .eyebrow{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sonar-dim); display:flex; align-items:center; gap:.6em; margin-bottom:1em; font-weight:600; } .eyebrow::before{ content:""; width:26px;height:2px;background:var(--beacon);display:inline-block; } .on-dark .eyebrow{color:var(--signal);} .on-dark .eyebrow::before{background:var(--signal);box-shadow:0 0 8px rgba(70,232,176,.7);} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.5em; font-family:var(--font-display); font-weight:600; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; padding:.95em 1.7em; border-radius:3px; border:1.5px solid transparent; cursor:pointer; position:relative;overflow:hidden;isolation:isolate; transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } .btn:hover{transform:translateY(-2px);} /* a light sweep that slides through the button on hover -- cheap, purely-CSS "tech UI" affordance instead of a plain color swap */ .btn::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%); transform:translateX(-120%); } .btn:hover::after{transform:translateX(120%);transition:transform .55s ease;} .btn-primary{background:var(--beacon);color:var(--abyss);box-shadow:var(--shadow-md);} .btn-primary:hover{background:#ffbd52;box-shadow:var(--shadow-lg);} .btn-outline{border-color:currentColor;color:inherit;background:transparent;} .on-dark .btn-outline{color:var(--foam);border-color:rgba(244,240,230,.45);} .on-dark .btn-outline:hover{border-color:var(--foam);} .btn-ghost-teal{border-color:var(--sonar);color:var(--sonar-dim);background:transparent;} .btn-ghost-teal:hover{background:var(--sonar);color:var(--abyss);box-shadow:var(--shadow-md);} /* ---------- header / nav ---------- */ .site-header{ position:sticky;top:0;z-index:100; background:rgba(10,14,16,.92); backdrop-filter:blur(10px) saturate(1.1); border-bottom:1px solid var(--line); box-shadow:var(--shadow-md); } /* a thin animated scan-line under the header -- the one place on every page a moving signal is always visible, reinforcing "live system" without living inside the content itself */ .site-header::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,var(--signal),transparent); background-size:200% 100%; animation:headerScan 7s linear infinite; opacity:.6; } @keyframes headerScan{0%{background-position:200% 0;}100%{background-position:-200% 0;}} @media (prefers-reduced-motion: reduce){.site-header::after{animation:none;}} .header-inner{ max-width:var(--max);margin:0 auto;padding:12px 24px; display:flex;align-items:center;justify-content:space-between; min-height:78px; /* min-height (not a fixed height) so a longer brand name that wraps to an extra line — "Bluewater Security Academy", for instance — grows the header to fit instead of spilling past it into .brand-strip below. */ } .brand-lockup{display:flex;align-items:center;gap:12px;color:var(--foam);} .brand-lockup .mark{width:76px;height:76px;flex:none;} .crest-mark{object-fit:cover;box-shadow:0 0 0 1px rgba(244,240,230,.22);} .footer-brand .crest-mark{box-shadow:0 0 0 1px rgba(244,240,230,.28);} .brand-lockup .name{font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;} .brand-lockup .sub{display:block;font-family:var(--font-body);font-size:.68rem;letter-spacing:.12em;color:var(--sonar);text-transform:uppercase;font-weight:600;margin-top:2px;} .main-nav{display:flex;align-items:center;gap:6px;} .main-nav a{ font-family:var(--font-display); font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; color:var(--foam);opacity:.8; padding:10px 14px;border-radius:2px; transition:opacity .15s ease, background .15s ease; } .main-nav a:hover{opacity:1;background:rgba(244,240,230,.06);} .main-nav a.current{opacity:1;color:var(--sonar);} .nav-cta{margin-left:8px;} .nav-toggle{display:none;background:none;border:none;color:var(--foam);font-size:1.6rem;cursor:pointer;} /* ---------- search (Pagefind) ---------- */ .search-trigger{ background:none;border:1px solid rgba(244,240,230,.25);color:var(--foam); width:38px;height:38px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center; cursor:pointer;margin-left:6px;transition:border-color .15s ease, color .15s ease; } .search-trigger:hover{border-color:var(--sonar);color:var(--sonar);} .sound-toggle{ background:none;border:1px solid rgba(244,240,230,.25);color:var(--foam); width:38px;height:38px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center; cursor:pointer;margin-left:6px;transition:border-color .15s ease, color .15s ease;opacity:.55; } .sound-toggle:hover{border-color:var(--sonar);color:var(--sonar);opacity:.85;} .sound-toggle.is-on{opacity:1;border-color:var(--sonar);color:var(--sonar);} .sound-toggle:not(.is-on) .fx-wave{opacity:.25;} .search-modal{ position:fixed;inset:0;background:rgba(10,14,16,.88);z-index:200; display:none;align-items:flex-start;justify-content:center;padding:8vh 20px 20px; backdrop-filter:blur(3px); } .search-modal.open{display:flex;} .search-modal-inner{ background:var(--mist);width:100%;max-width:640px;padding:28px;position:relative; max-height:78vh;overflow-y:auto;border-top:3px solid var(--sonar); } .search-close{ position:absolute;top:14px;right:14px;background:none;border:none;font-size:1.6rem; color:#647883;cursor:pointer;line-height:1;padding:4px 8px; } .search-close:hover{color:var(--abyss);} .cmdk-eyebrow{ font-family:var(--font-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--sonar-dim);margin-bottom:10px; } .cmdk-input{ width:100%;border:none;border-bottom:2px solid var(--line-light);background:transparent; font-family:var(--font-display);font-size:1.3rem;padding:6px 2px 14px;color:var(--abyss); margin-bottom:18px; } .cmdk-input:focus{outline:none;border-color:var(--sonar);} .cmdk-quick-label{ font-family:var(--font-display);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase; color:#647883;margin-bottom:10px; } .cmdk-quick-item{ display:flex;align-items:center;justify-content:space-between;padding:12px 4px; border-bottom:1px solid var(--line-light);color:var(--ink);font-size:.96rem; transition:padding-left .15s ease, color .15s ease; } .cmdk-quick-item:hover{padding-left:10px;color:var(--sonar-dim);} .cmdk-quick-item::after{content:"\2192";opacity:0;transition:opacity .15s ease;} .cmdk-quick-item:hover::after{opacity:1;} .cmdk-quick{margin-bottom:8px;} /* Pagefind UI theme tokens — matches the site's brass/navy palette */ .pagefind-ui{ --pagefind-ui-scale:1; --pagefind-ui-primary:#0A0E10; --pagefind-ui-text:#1B1F1C; --pagefind-ui-background:#FAF8F3; --pagefind-ui-border:#E4DFD2; --pagefind-ui-tag:#C9A667; --pagefind-ui-border-width:1px; --pagefind-ui-border-radius:2px; --pagefind-ui-font:'Source Sans 3',sans-serif; } @media (max-width:920px){ .main-nav{ position:fixed;top:78px;left:0;right:0;bottom:0; height:calc(100vh - 78px); background:var(--abyss); flex-direction:column;align-items:stretch;padding:18px;gap:2px; transform:translateY(-8px);opacity:0;pointer-events:none; transition:opacity .2s ease, transform .2s ease; overflow-y:auto; z-index:99; } .main-nav.open{opacity:1;transform:translateY(0);pointer-events:auto;} .main-nav a{padding:16px 10px;border-bottom:1px solid var(--line);font-size:1rem;} .nav-toggle{display:block;} .nav-cta{margin-left:0;margin-top:8px;} } /* ---------- brand strip (sub-brand switcher) ---------- */ .brand-strip{background:var(--deep);border-bottom:1px solid var(--line);} .brand-strip .container{ display:flex;gap:0;overflow-x:auto; } .brand-strip a{ font-family:var(--font-display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:rgba(244,240,230,.6);padding:10px 18px;white-space:nowrap; border-right:1px solid var(--line); transition:color .15s ease, background .15s ease; } .brand-strip a:first-child{padding-left:0;} .brand-strip a:hover{color:var(--foam);background:rgba(244,240,230,.05);} .brand-strip a.active{color:var(--beacon);} /* ---------- hero ---------- */ .hero{ position:relative; background: radial-gradient(1100px 520px at 82% -10%, rgba(201,166,103,.14), transparent 60%), var(--grid-texture), linear-gradient(180deg,var(--abyss),var(--deep) 130%); background-size:auto,var(--grid-size),auto; color:var(--foam); padding:120px 0 100px; overflow:hidden; } .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:120px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,110 350,10 600,55 C850,100 1050,20 1200,60 L1200,120 L0,120 Z' fill='%2312181B'/%3E%3C/svg%3E") bottom/cover no-repeat; opacity:.55;pointer-events:none; } /* radar sweep — a slowly rotating conic wedge of light behind the hero content, screened so it reads as an ambient signal rather than a spinning graphic fighting for attention. CSS-only (no image asset). */ .hero::before{ content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none; background:conic-gradient(from 0deg, transparent 0deg, rgba(70,232,176,.10) 8deg, transparent 26deg, transparent 360deg); animation:radarSweep 9s linear infinite; mix-blend-mode:screen; } @keyframes radarSweep{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){.hero::before{animation:none;}} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;z-index:1;} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;}} /* hero with a background photo -- same idea as .page-hero.has-photo (a dark scrim keeps text readable over any photo), sized/cropped to fill the taller, richer homepage hero instead of the shorter interior-page one. Photo sits behind the existing gradient via background-blend-mode so the brand glow tint is preserved instead of just going flat. ::before here is the readability scrim, so the rotating radar sweep (also ::before, above) is disabled and replaced with a slower, static- angle glint baked into the same gradient -- depth without fighting the scrim for the one pseudo-element this variant has to spare. */ .hero.has-photo{background-size:cover;background-position:center;background-blend-mode:overlay;} .hero.has-photo::before{ content:"";position:absolute;inset:0;z-index:0;animation:none; background: linear-gradient(115deg, transparent 0%, rgba(70,232,176,.06) 45%, transparent 60%), linear-gradient(115deg, rgba(7,14,20,.95) 0%, rgba(7,14,20,.86) 42%, rgba(7,14,20,.62) 68%, rgba(7,14,20,.38) 100%); } .hero h1{margin-bottom:.35em;} .hero .lede{font-size:1.15rem;color:rgba(244,240,230,.82);max-width:52ch;margin-bottom:1.8em;} .hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;} .hero-stats{display:flex;gap:34px;margin-top:52px;flex-wrap:wrap;} .hero-stats .stat b{display:block;font-family:var(--font-mono);font-weight:700;font-size:1.9rem;color:var(--signal);text-shadow:0 0 18px rgba(70,232,176,.45);} .hero-stats .stat span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,240,230,.6);} .hero-panel{ border:1px solid var(--line); background:linear-gradient(155deg,rgba(244,240,230,.07),rgba(244,240,230,.02)); backdrop-filter:blur(2px); padding:34px;position:relative;z-index:1; box-shadow:0 1px 0 rgba(244,240,230,.08) inset, var(--shadow-lg); } .hero-panel::before{ content:"";position:absolute;top:-1px;left:-1px;width:34px;height:34px; border-top:2px solid var(--signal);border-left:2px solid var(--signal); filter:drop-shadow(0 0 6px rgba(70,232,176,.5)); } .hero-panel::after{ content:"";position:absolute;bottom:-1px;right:-1px;width:34px;height:34px; border-bottom:2px solid var(--beacon);border-right:2px solid var(--beacon); } /* ---------- HUD corner brackets (reusable) ---------- Generalized version of .hero-panel's corner treatment -- targeting frame/reticle marks on any card, screenshot, or photo that should read as "instrument-tracked" rather than a plain bordered box. */ .hud-corners{position:relative;} .hud-corners::before,.hud-corners::after{ content:"";position:absolute;width:22px;height:22px;pointer-events:none;z-index:2; } .hud-corners::before{ top:8px;left:8px;border-top:2px solid var(--signal);border-left:2px solid var(--signal); filter:drop-shadow(0 0 5px rgba(70,232,176,.55)); } .hud-corners::after{ bottom:8px;right:8px;border-bottom:2px solid var(--signal);border-right:2px solid var(--signal); filter:drop-shadow(0 0 5px rgba(70,232,176,.55)); } /* ---------- sonar divider (signature motif) ---------- */ .sonar-divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 14px;width:fit-content;} .sonar-divider span{width:6px;height:6px;border-radius:50%;background:var(--sonar);} .sonar-divider span:nth-child(1){opacity:.35;} .sonar-divider span:nth-child(2){opacity:.65;} .sonar-divider span:nth-child(3){ opacity:1;background:var(--signal); box-shadow:0 0 0 5px rgba(70,232,176,.18); animation:sonarPing 2.6s ease-out infinite; } .sonar-divider span:nth-child(4){opacity:.65;} .sonar-divider span:nth-child(5){opacity:.35;} @keyframes sonarPing{ 0%{box-shadow:0 0 0 0 rgba(70,232,176,.45);} 70%{box-shadow:0 0 0 12px rgba(70,232,176,0);} 100%{box-shadow:0 0 0 0 rgba(70,232,176,0);} } @media (prefers-reduced-motion: reduce){.sonar-divider span:nth-child(3){animation:none;}} /* ---------- section variants ---------- */ .section-dark{ background:var(--grid-texture),var(--abyss); background-size:var(--grid-size),auto; color:var(--foam); } .section-deep{background:var(--deep);color:var(--foam);} .section-mist{background:var(--mist);} .section-mist h2, .section-mist h3{color:var(--abyss);} .section-head{max-width:640px;margin:0 auto 52px;text-align:center;} .section-head p{color:#516875;font-size:1.05rem;} .on-dark .section-head p{color:rgba(244,240,230,.75);} /* ---------- cards ---------- */ .grid{display:grid;gap:26px;} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} @media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}} @media (max-width:640px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}} .card{ background:#fff;border:1px solid var(--line-light);padding:32px 28px; box-shadow:var(--shadow-sm); transform:perspective(900px); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; position:relative; } .card:hover{transform:perspective(900px) translateY(-5px) rotateX(1.5deg);box-shadow:var(--shadow-lg);border-color:var(--sonar);} .card .icon{width:46px;height:46px;margin-bottom:18px;color:var(--sonar-dim);} .card h3{margin-bottom:.5em;color:var(--abyss);text-transform:none;letter-spacing:0;font-size:1.15rem;} .card p{color:#4C606C;font-size:.96rem;margin-bottom:0;} .card-dark{ background:linear-gradient(155deg,#161D20,var(--deep) 60%); border:1px solid var(--line);color:var(--foam); box-shadow:0 1px 0 rgba(244,240,230,.05) inset, var(--shadow-md); } .card-dark:hover{box-shadow:0 1px 0 rgba(244,240,230,.05) inset, var(--shadow-glow);border-color:rgba(70,232,176,.5);} /* full-bleed photo at the top of a padding:36px card -- negative margins pull the image flush to the card's edges instead of sitting inset */ .card-photo{display:block;width:calc(100% + 72px);margin:-36px -36px 22px;height:170px;object-fit:cover;} /* blog index cards use .card's actual padding (32px 28px), not the 36px .card-photo assumes above -- a separate class keeps the negative-margin math correct instead of quietly misaligning the flush edge. */ .blog-card-photo{display:block;width:calc(100% + 56px);margin:-32px -28px 20px;height:168px;object-fit:cover;background:var(--abyss);} .card-dark h3{color:var(--foam);} .card-dark p{color:rgba(244,240,230,.72);} .card-dark .icon{color:var(--sonar);} /* ---------- field photo gallery ---------- */ .photo-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px; } .photo-grid figure{ margin:0;position:relative;overflow:hidden;border:1px solid var(--line); aspect-ratio:4/3;background:var(--deep); } .photo-grid figure.tall{grid-row:span 2;aspect-ratio:4/5.3;} .photo-grid img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .35s ease; } .photo-grid figure:hover img{transform:scale(1.05);} .photo-grid figcaption{ position:absolute;left:0;right:0;bottom:0;padding:10px 14px; background:linear-gradient(to top, rgba(7,27,44,.82), rgba(7,27,44,0)); color:var(--foam);font-size:.82rem;letter-spacing:.02em; } @media (max-width:900px){.photo-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.photo-grid{grid-template-columns:1fr;}.photo-grid figure.tall{grid-row:auto;}} /* compact 3-up variant for smaller teaser strips on non-gallery pages */ .photo-grid.cols-3{grid-template-columns:repeat(3,1fr);} .photo-grid.cols-3 figure.tall{grid-row:auto;aspect-ratio:4/3;} @media (max-width:700px){.photo-grid.cols-3{grid-template-columns:1fr 1fr;}} @media (max-width:460px){.photo-grid.cols-3{grid-template-columns:1fr;}} /* single accent photo -- one distinct field photo paired with copy, used sparingly on non-gallery pages (home, about, academy) so no image repeats across the site */ .photo-feature{ margin:0;position:relative;overflow:hidden;border:1px solid var(--line); border-radius:14px;aspect-ratio:3/4;max-width:380px;background:var(--deep); } .photo-feature img{width:100%;height:100%;object-fit:cover;display:block;} .photo-feature figcaption{ position:absolute;left:0;right:0;bottom:0;padding:12px 16px; background:linear-gradient(to top, rgba(7,27,44,.82), rgba(7,27,44,0)); color:var(--foam);font-size:.82rem;letter-spacing:.02em; } @media (max-width:640px){.photo-feature{max-width:100%;aspect-ratio:4/3;}} /* BluewaterOS product screenshots -- a browser-chrome-style frame around a real UI capture, with a caption naming the feature shown */ .screenshot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} .screenshot-grid.featured{grid-template-columns:1.5fr 1fr;align-items:stretch;} .screenshot-card{ display:flex;flex-direction:column;background:var(--abyss); border:1px solid var(--line-light);border-radius:12px;overflow:hidden; box-shadow:var(--shadow-lg); position:relative; } .screenshot-card::before,.screenshot-card::after{ content:"";position:absolute;width:20px;height:20px;pointer-events:none;z-index:2; filter:drop-shadow(0 0 5px rgba(70,232,176,.55)); } .screenshot-card::before{top:10px;left:10px;border-top:2px solid var(--signal);border-left:2px solid var(--signal);} .screenshot-card::after{bottom:10px;right:10px;border-bottom:2px solid var(--signal);border-right:2px solid var(--signal);} .screenshot-card .chrome{display:flex;gap:6px;padding:10px 14px;background:#0c2338;} .screenshot-card .chrome span{width:9px;height:9px;border-radius:50%;background:rgba(244,240,230,.25);} .screenshot-card img{width:100%;display:block;aspect-ratio:1200/786;object-fit:cover;object-position:top;} .screenshot-card .cap{padding:14px 18px;color:var(--foam);font-size:.92rem;line-height:1.4;} @media (max-width:820px){.screenshot-grid, .screenshot-grid.featured{grid-template-columns:1fr;}} /* brand hub cards on the Hammerhead Security Solutions homepage */ .brand-card{ display:flex;flex-direction:column; background:linear-gradient(155deg,#161D20,var(--deep) 60%); border:1px solid var(--line); padding:40px 34px;position:relative;overflow:hidden;color:var(--foam); box-shadow:0 1px 0 rgba(244,240,230,.05) inset, var(--shadow-md); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .brand-card:hover{border-color:var(--sonar);transform:translateY(-5px);box-shadow:0 1px 0 rgba(244,240,230,.05) inset, var(--shadow-glow);} .brand-card .tag{ font-family:var(--font-display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--beacon);margin-bottom:14px; } .brand-card h3{font-size:1.5rem;margin-bottom:.4em;} .brand-card p{color:rgba(244,240,230,.72);flex:1;} .section-mist .brand-card h3{color:inherit;} .brand-card .go{ margin-top:20px;font-family:var(--font-display);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase; color:var(--sonar);display:inline-flex;align-items:center;gap:8px; } .brand-card .go svg{width:16px;height:16px;transition:transform .18s ease;} .brand-card:hover .go svg{transform:translateX(5px);} /* ---------- lists ---------- */ .check-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;} .check-list li{display:flex;gap:12px;align-items:flex-start;} .check-list svg{flex:none;width:20px;height:20px;color:var(--sonar-dim);margin-top:2px;} /* ---------- stat bar ---------- */ .stat-bar{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .stat-bar .stat{flex:1 1 160px;padding:30px 24px;border-right:1px solid var(--line);transition:background .2s ease;} .stat-bar .stat:last-child{border-right:none;} .stat-bar .stat:hover{background:rgba(70,232,176,.05);} .stat-bar b{display:block;font-family:var(--font-mono);font-weight:700;font-size:2rem;color:var(--signal);text-shadow:0 0 18px rgba(70,232,176,.4);} .stat-bar span{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(244,240,230,.62);} /* ---------- quote / testimonial ---------- */ .quote-block{max-width:760px;margin:0 auto;text-align:center;} .quote-block blockquote{font-family:var(--font-display);font-weight:400;font-size:1.4rem;line-height:1.4;margin:0 0 22px;text-transform:none;letter-spacing:0;} .quote-block cite{font-style:normal;font-size:.9rem;color:var(--sonar);display:block;letter-spacing:.03em;} .quote-block cite span{display:block;color:rgba(244,240,230,.6);font-size:.82rem;margin-top:2px;} /* ---------- CTA banner ---------- */ .cta-banner{ position:relative;overflow:hidden; background:var(--grid-texture),linear-gradient(120deg,var(--abyss),var(--steel)); background-size:var(--grid-size),auto; color:var(--foam);padding:64px 0;text-align:center; border-top:1px solid var(--line); box-shadow:inset 0 3px 0 var(--beacon); } .cta-banner h2{margin-bottom:.3em;} .cta-banner p{color:rgba(244,240,230,.78);max-width:56ch;margin:0 auto 28px;} /* ---------- forms ---------- */ .form-wrap{background:#fff;border:1px solid var(--line-light);padding:40px;box-shadow:var(--shadow-md);} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;} @media (max-width:640px){.form-row{grid-template-columns:1fr;}} .field{margin-bottom:18px;} .field label{display:block;font-family:var(--font-display);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:7px;} .field input,.field select,.field textarea{ width:100%;border:1.5px solid var(--line-light);padding:12px 14px;font-family:var(--font-body);font-size:.98rem; background:var(--mist);color:var(--ink);transition:border-color .15s ease, background .15s ease; } .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sonar);background:#fff;} .field textarea{resize:vertical;min-height:130px;} .form-note{font-size:.85rem;color:#647883;margin-top:8px;} .form-success{display:none;background:var(--deep);color:var(--foam);padding:22px;border:1px solid var(--sonar);margin-top:18px;font-family:var(--font-display);letter-spacing:.02em;} .form-success.show{display:block;} .hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;overflow:hidden;} /* contact info list */ .contact-info{display:grid;gap:22px;} .contact-info .item{display:flex;gap:14px;align-items:flex-start;} .contact-info .item svg{width:22px;height:22px;color:var(--sonar);flex:none;margin-top:3px;} .contact-info .item b{display:block;font-family:var(--font-display);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--beacon);margin-bottom:3px;} /* ---------- footer ---------- */ .site-footer{ background:var(--grid-texture),var(--abyss);background-size:var(--grid-size),auto; color:rgba(244,240,230,.7);padding:64px 0 26px; border-top:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(70,232,176,.18); } .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;} @media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr;}} .footer-grid h4{font-family:var(--font-display);font-size:.78rem;letter-spacing:.1em;color:var(--foam);text-transform:uppercase;margin-bottom:16px;} .footer-grid a{display:block;font-size:.92rem;color:rgba(244,240,230,.65);margin-bottom:10px;transition:color .15s ease;} .footer-grid a:hover{color:var(--sonar);} .footer-brand p{font-size:.9rem;color:rgba(244,240,230,.6);max-width:34ch;} .footer-bottom{ border-top:1px solid var(--line);padding-top:24px; display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; font-size:.82rem;color:rgba(244,240,230,.5); } .footer-bottom a{color:rgba(244,240,230,.5);} .footer-bottom a:hover{color:var(--sonar);} /* ---------- page hero (interior pages) ---------- */ .page-hero{ position:relative;overflow:hidden; background: var(--grid-texture), linear-gradient(180deg,var(--abyss),var(--deep)); background-size:var(--grid-size),auto; color:var(--foam);padding:74px 0 60px; border-bottom:1px solid var(--line); box-shadow:inset 0 -3px 0 var(--beacon), 0 20px 40px -24px rgba(7,10,11,.6); } .page-hero .eyebrow{color:var(--sonar);} .page-hero p{color:rgba(244,240,230,.75);max-width:60ch;font-size:1.05rem;} /* page-hero with a background photo -- a dark scrim keeps the existing white eyebrow/h1/breadcrumb text readable over any photo underneath */ .page-hero.has-photo{position:relative;background-size:cover;background-position:center;overflow:hidden;} .page-hero.has-photo::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(7,14,20,.86), rgba(7,14,20,.72) 55%, rgba(7,14,20,.9)); } .page-hero.has-photo>.container{position:relative;z-index:1;} /* ---------- pin badge row (state coverage, icon-led) ---------- */ .pin-row{display:flex;flex-wrap:wrap;gap:12px;} .pin-badge{ display:flex;align-items:center;gap:8px;padding:9px 16px 9px 12px; border-radius:999px;border:1px solid var(--line-light);background:#fff; font-family:var(--font-display);font-size:.82rem;letter-spacing:.03em;color:var(--abyss); transition:border-color .15s ease,color .15s ease; } .pin-badge svg{width:15px;height:15px;color:var(--steel);flex:none;} .pin-badge.current{border-color:var(--sonar);color:var(--sonar-dim);background:rgba(94,180,180,.08);} .pin-badge.current svg{color:var(--sonar);} a.pin-badge:hover{border-color:var(--sonar);color:var(--sonar-dim);} .on-dark .pin-badge{background:rgba(244,240,230,.06);border-color:rgba(244,240,230,.18);color:var(--foam);} .on-dark .pin-badge svg{color:var(--sonar);} .on-dark .pin-badge.current{border-color:var(--sonar);background:rgba(94,180,180,.14);} /* ---------- simple icon tiles (used where no real photo exists yet -- Academy pathway, camera systems placeholder, coverage graphics) ---------- */ .icon-circle{ width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 32% 28%, rgba(201,166,103,.22), rgba(94,180,180,.1) 70%); border:1px solid rgba(94,180,180,.35);margin-bottom:14px;flex:none; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, var(--shadow-sm); } .icon-circle svg{width:26px;height:26px;color:var(--sonar);} .on-dark .icon-circle{ background:radial-gradient(circle at 32% 28%, rgba(244,240,230,.14), rgba(244,240,230,.04) 70%); border-color:rgba(244,240,230,.22); box-shadow:0 1px 0 rgba(244,240,230,.08) inset, 0 6px 16px -8px rgba(0,0,0,.5); } .on-dark .icon-circle svg{color:var(--sonar);} .breadcrumb{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(244,240,230,.5);margin-bottom:18px;font-family:var(--font-mono);} .breadcrumb a{color:rgba(244,240,230,.7);} .breadcrumb a:hover{color:var(--sonar);} /* ---------- blog post featured illustration ---------- */ .blog-feature-img{margin:0 0 36px;border:1px solid var(--line-light);overflow:hidden;} .blog-feature-img img{display:block;width:100%;height:340px;object-fit:cover;} @media (max-width:640px){.blog-feature-img img{height:220px;}} /* ---------- blog article body (rendered from markdown) ---------- */ .blog-body{font-size:1.06rem;color:#2C3B42;} .blog-body h2{font-size:1.5rem;margin-top:1.6em;color:var(--abyss);} .blog-body h3{font-size:1.2rem;margin-top:1.4em;color:var(--abyss);text-transform:none;letter-spacing:0;} .blog-body p{margin-bottom:1.2em;line-height:1.7;} .blog-body ul,.blog-body ol{margin:0 0 1.2em;padding-left:1.3em;line-height:1.7;} .blog-body li{margin-bottom:.5em;} .blog-body a{color:var(--sonar-dim);text-decoration:underline;text-underline-offset:2px;} .blog-body a:hover{color:var(--abyss);} .blog-body strong{color:var(--abyss);} .blog-body hr{border:none;border-top:1px solid var(--line-light);margin:2.4em 0;} .blog-body blockquote{border-left:3px solid var(--sonar);margin:1.4em 0;padding:.2em 0 .2em 1.2em;color:#516875;font-style:italic;} /* ---------- accessibility ---------- */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:999; background:var(--sonar);color:var(--abyss);padding:14px 22px; font-family:var(--font-display);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em; } .skip-link:focus{left:12px;top:12px;} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--sonar);outline-offset:2px; } /* ---------- FAQ accordion ---------- */ .faq-item{border-bottom:1px solid var(--line-light);} .on-dark .faq-item{border-color:var(--line);} .faq-q{ width:100%;text-align:left;background:none;border:none;cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:20px; padding:22px 4px;font-family:var(--font-display);font-size:1.05rem;color:inherit; } .faq-q .plus{flex:none;width:22px;height:22px;position:relative;} .faq-q .plus::before,.faq-q .plus::after{ content:"";position:absolute;background:var(--sonar-dim);transition:transform .2s ease; } .faq-q .plus::before{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%);} .faq-q .plus::after{top:0;left:50%;width:2px;height:100%;transform:translateX(-50%);} .faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;} .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;} .faq-a p{padding:0 4px 22px;color:#4C606C;font-size:.98rem;line-height:1.65;margin:0;} .on-dark .faq-a p{color:rgba(244,240,230,.72);} /* ---------- testimonial cards ---------- */ .testimonial-card{ background:#fff;border:1px solid var(--line-light);padding:32px;display:flex;flex-direction:column; box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease; } .testimonial-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);} .testimonial-card .stars{color:var(--sonar-dim);letter-spacing:2px;margin-bottom:14px;font-size:.9rem;} .testimonial-card blockquote{margin:0 0 20px;font-size:1.02rem;line-height:1.6;color:var(--ink);flex:1;} .testimonial-card cite{font-style:normal;font-family:var(--font-display);font-size:.82rem;color:var(--abyss);display:block;} .testimonial-card cite span{display:block;color:#647883;font-size:.8rem;font-family:var(--font-body);margin-top:2px;} .testimonial-card.featured{border-color:var(--sonar);grid-column:span 2;} @media (max-width:900px){.testimonial-card.featured{grid-column:span 1;}} /* ---------- multi-step RFP wizard ---------- */ .rfp-wrap{max-width:820px;margin:0 auto;} .rfp-progress{display:flex;justify-content:space-between;margin-bottom:44px;position:relative;} .rfp-progress::before{ content:"";position:absolute;top:15px;left:0;right:0;height:2px;background:var(--line-light);z-index:0; } .rfp-progress .prog-fill{ position:absolute;top:15px;left:0;height:2px;background:var(--sonar);z-index:1; transition:width .3s ease;width:0%; } .rfp-step-dot{ position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1; } .rfp-step-dot .num{ width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--line-light); display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.85rem; color:#647883;transition:all .2s ease; } .rfp-step-dot.active .num{border-color:var(--sonar);color:var(--sonar-dim);background:var(--mist);} .rfp-step-dot.done .num{border-color:var(--sonar);background:var(--sonar);color:#fff;} .rfp-step-dot .label{font-family:var(--font-display);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:#647883;text-align:center;} .rfp-step-dot.active .label{color:var(--abyss);} .rfp-panel{background:#fff;border:1px solid var(--line-light);padding:44px;box-shadow:var(--shadow-md);} .rfp-fieldset{display:none;} .rfp-fieldset.active{display:block;animation:rfpFade .25s ease;} @keyframes rfpFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} .rfp-fieldset h3{margin-bottom:6px;} .rfp-fieldset .step-hint{color:#647883;font-size:.92rem;margin-bottom:26px;} .rfp-nav-row{display:flex;justify-content:space-between;margin-top:32px;padding-top:24px;border-top:1px solid var(--line-light);} .rfp-nav-row .spacer{flex:1;} .checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px;} @media (max-width:640px){.checkbox-grid{grid-template-columns:1fr;}} .checkbox-grid label{ display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:400; text-transform:none;font-size:.92rem;color:var(--ink);background:var(--mist); border:1px solid var(--line-light);padding:11px 14px;cursor:pointer;transition:border-color .15s ease; } .checkbox-grid label:has(input:checked){border-color:var(--sonar);background:#fff;} .checkbox-grid input{width:auto;margin:0;} .rfp-summary{background:var(--mist);border:1px solid var(--line-light);padding:22px;margin-bottom:24px;font-size:.92rem;} .rfp-summary div{padding:6px 0;border-bottom:1px solid var(--line-light);display:flex;justify-content:space-between;gap:16px;} .rfp-summary div:last-child{border-bottom:none;} .rfp-summary b{font-family:var(--font-display);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:#647883;font-weight:600;} .fallback-banner{ background:var(--deep);border:1px solid var(--line);padding:20px 26px; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px; } .fallback-banner p{margin:0;color:rgba(244,240,230,.85);font-size:.95rem;} .fallback-banner .links{display:flex;gap:20px;flex-wrap:wrap;} .fallback-banner a{font-family:var(--font-display);font-size:.88rem;color:var(--sonar);display:inline-flex;align-items:center;gap:8px;} /* ---------- scroll choreography ---------- */ .reveal-on-scroll{ opacity:0;transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); } .reveal-on-scroll.revealed{opacity:1;transform:translateY(0);} .reveal-on-scroll.delay-1{transition-delay:.08s;} .reveal-on-scroll.delay-2{transition-delay:.16s;} .reveal-on-scroll.delay-3{transition-delay:.24s;} @media (prefers-reduced-motion: reduce){ .reveal-on-scroll{opacity:1;transform:none;transition:none;} } /* ---------- count-up stats ---------- */ .stat-live .num-row{display:flex;align-items:baseline;gap:6px;} .stat-live .pulse-dot{ width:7px;height:7px;border-radius:50%;background:var(--sonar);flex:none; box-shadow:0 0 0 0 rgba(201,166,103,.5); animation:statPulse 2.2s ease-out infinite; } @keyframes statPulse{ 0%{box-shadow:0 0 0 0 rgba(201,166,103,.5);} 70%{box-shadow:0 0 0 8px rgba(201,166,103,0);} 100%{box-shadow:0 0 0 0 rgba(201,166,103,0);} } @media (prefers-reduced-motion: reduce){.pulse-dot{animation:none;}} /* ---------- intent / boot modal ---------- */ .boot-modal{ position:fixed;inset:0;background:rgba(10,14,16,.94);z-index:300; display:none;align-items:center;justify-content:center;padding:24px; backdrop-filter:blur(4px); } .boot-modal.open{display:flex;} .boot-inner{max-width:680px;width:100%;text-align:center;} .boot-inner .crest-mark{width:56px;height:56px;margin:0 auto 20px;} .boot-inner h2{color:var(--foam);font-size:1.7rem;margin-bottom:10px;} .boot-inner p{color:rgba(244,240,230,.7);margin-bottom:36px;} .boot-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media (max-width:720px){.boot-options{grid-template-columns:1fr;}} .boot-option{ background:var(--deep);border:1px solid var(--line);padding:28px 20px;cursor:pointer; transition:border-color .18s ease, transform .18s ease;text-align:left;color:var(--foam); } .boot-option:hover{border-color:var(--sonar);transform:translateY(-3px);} .boot-option .icon{width:32px;height:32px;color:var(--sonar);margin-bottom:14px;} .boot-option h3{font-size:1rem;margin-bottom:6px;color:var(--foam);text-transform:none;letter-spacing:0;} .boot-option p{font-size:.85rem;color:rgba(244,240,230,.6);margin:0;} .boot-skip{ margin-top:28px;font-family:var(--font-display);font-size:.8rem;letter-spacing:.06em; color:rgba(244,240,230,.45);text-transform:uppercase;background:none;border:none;cursor:pointer; } .boot-skip:hover{color:rgba(244,240,230,.75);} /* utility */ .text-center{text-align:center;} .mt-0{margin-top:0;} .small{font-size:.85rem;color:#647883;} .tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;} .pill{ font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase; border:1px solid var(--line);color:rgba(244,240,230,.7);padding:6px 12px;border-radius:2px; } .section-mist .pill{border-color:var(--line-light);color:#4C606C;} .card .pill{border-color:var(--line-light);color:#4C606C;} /* ---------- status-live pill (new — tactical "system status" cue) ---------- A small pulsing-dot badge for things that are genuinely live/verified/ tracked (BluewaterOS status, license verification, on-duty counts) -- not decorative, so use it only where the claim is real. */ .status-live{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase; color:var(--signal-dim);border:1px solid rgba(70,232,176,.35);background:rgba(70,232,176,.08); padding:6px 12px 6px 10px;border-radius:999px; } .on-dark .status-live{color:var(--signal);} .status-live .dot{ width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none; box-shadow:0 0 0 0 rgba(70,232,176,.5); animation:statPulse 2.2s ease-out infinite; } @media (prefers-reduced-motion: reduce){.status-live .dot{animation:none;}} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} @media (max-width:860px){.two-col{grid-template-columns:1fr;}} /* .two-col's explicit display:grid otherwise wins over the browser's default [hidden]{display:none} (author CSS beats user-agent CSS by origin, regardless of specificity) -- careers.js toggles #careers-license-fields (class="two-col") via the hidden attribute, so this keeps that actually work. */ .two-col[hidden]{display:none;} .numbered{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:0;} .numbered li{ counter-increment:step;position:relative;padding:26px 0 26px 64px;border-bottom:1px solid var(--line-light); } .numbered li::before{ content:counter(step,decimal-leading-zero); position:absolute;left:0;top:24px;font-family:var(--font-display);font-size:1.3rem;color:var(--sonar-dim);font-weight:600; } .numbered h4{font-family:var(--font-display);text-transform:none;letter-spacing:0;font-size:1.08rem;margin-bottom:.3em;color:var(--abyss);} .on-dark .numbered li::before{color:var(--beacon);} .on-dark .numbered h4{color:var(--foam);} .on-dark .numbered li{border-color:var(--line);} /* course catalog / commerce / account */ .course-card{display:flex;flex-direction:column;height:100%;} .course-card .course-thumb{ width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--deep),var(--abyss)); border:1px solid var(--line-light);display:flex;align-items:center;justify-content:center;margin-bottom:18px; } .course-card .course-thumb svg{width:40px;height:40px;color:var(--sonar);} .course-card h3{font-size:1.2rem;margin-bottom:6px;} .course-card .course-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;} .course-card .course-price{ font-family:var(--font-display);font-size:1.3rem;color:var(--sonar-dim);margin-top:auto;padding-top:16px; } .course-card .course-desc{color:#4C606C;font-size:.92rem;flex-grow:1;} .course-progress{width:100%;} .course-progress .track{height:8px;border-radius:4px;background:var(--line-light);overflow:hidden;margin:8px 0;} .on-dark .course-progress .track{background:var(--line);} .course-progress .fill{height:100%;background:var(--sonar);border-radius:4px;transition:width .3s ease;} .course-progress .pct-label{font-size:.8rem;color:#647883;} .status-badge{ font-family:var(--font-display);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase; padding:4px 10px;border-radius:2px;display:inline-block; } .status-badge.active{background:rgba(201,166,103,.14);color:var(--sonar-dim);} .status-badge.completed{background:rgba(90,168,120,.16);color:#3E8A5E;} .enrollment-card{display:flex;flex-direction:column;gap:10px;} .enrollment-card .row-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;} .auth-form-wrap{max-width:440px;margin:0 auto;} .form-msg{margin-top:14px;font-size:.9rem;padding:12px 14px;border-radius:2px;display:none;} .form-msg.show{display:block;} .form-msg.error{background:rgba(198,80,80,.1);color:#B4453F;border:1px solid rgba(198,80,80,.25);} .form-msg.success{background:rgba(90,168,120,.12);color:#3E8A5E;border:1px solid rgba(90,168,120,.25);} .catalog-empty-state{text-align:center;padding:60px 20px;color:#647883;} /* ======================================================================= HAMMERHEAD SECURITY — FLAGSHIP DIVISION / PREMIER REDESIGN Real field photography is intentionally mixed with an illustrated, cinematic command aesthetic. Security imagery throughout this division is unarmed: no firearms, batons, knives, or other weapons are depicted. ======================================================================= */ .security-premier{ --hh-blue:#0d7fe8; --hh-blue-bright:#28a5ff; --hh-gold:#f6bd3b; --hh-navy:#06111f; --hh-navy-2:#091a2e; --hh-panel:#0c2036; --hh-line:rgba(56,161,255,.22); background:var(--hh-navy); color:#eaf4ff; } .security-premier .eyebrow{color:#48b5ff;} .security-premier .eyebrow::before{background:var(--hh-gold);box-shadow:0 0 12px rgba(246,189,59,.45);} .security-premier .btn-primary{background:linear-gradient(180deg,#ffd25c,#f0ad20);color:#06111f;border-color:#ffd25c;box-shadow:0 10px 28px rgba(246,189,59,.18);} .security-premier .btn-primary:hover{background:#ffd970;} .security-premier .btn-blue{background:linear-gradient(180deg,#158cf0,#086bc5);color:white;border:1px solid rgba(72,181,255,.7);box-shadow:0 10px 30px rgba(8,107,197,.25);} .security-premier .btn-blue:hover{background:#1b99ff;} .security-premier .btn-outline{border-color:rgba(255,255,255,.55);color:white;} .security-premier .btn-outline:hover{border-color:#48b5ff;color:#74c8ff;background:rgba(13,127,232,.08);} .hh-topline{background:#030a12;border-bottom:1px solid rgba(72,181,255,.14);font:600 .72rem/1.2 var(--font-body);letter-spacing:.04em;color:rgba(234,244,255,.8);} .hh-topline .container{display:flex;gap:26px;justify-content:flex-end;align-items:center;padding-top:8px;padding-bottom:8px;} .hh-topline a{color:inherit;} .hh-topline a:hover{color:#48b5ff;} .hh-hero{position:relative;overflow:hidden;background:radial-gradient(900px 500px at 82% 34%,rgba(11,112,205,.25),transparent 62%),linear-gradient(135deg,#07131f 0%,#071827 50%,#06101b 100%);padding:0;min-height:680px;display:flex;align-items:stretch;} .hh-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(72,181,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(72,181,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to right,#000 0 52%,transparent 86%);pointer-events:none;} .hh-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(180deg,transparent,var(--hh-navy));pointer-events:none;} .hh-hero .container{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);gap:56px;align-items:center;width:100%;padding-top:88px;padding-bottom:110px;} .hh-hero-copy{max-width:720px;} .hh-kicker{font:700 .82rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#55bdff;margin-bottom:18px;} .hh-hero h1{font-size:clamp(3.2rem,6.6vw,6.5rem);line-height:.92;letter-spacing:-.03em;text-transform:uppercase;color:white;text-shadow:0 14px 40px rgba(0,0,0,.45);margin-bottom:22px;} .hh-hero h1 .accent{color:#57b9ff;display:block;} .hh-hero .lede{font-size:1.22rem;line-height:1.6;color:rgba(235,245,255,.83);max-width:650px;} .hh-hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px;} .hh-hero-visual{position:relative;align-self:stretch;min-height:530px;display:flex;align-items:center;justify-content:center;} .hh-hero-visual::before{content:"";position:absolute;inset:7% -18% -4% -6%;background:radial-gradient(circle at 48% 46%,rgba(25,140,238,.24),transparent 55%);filter:blur(18px);} .hh-ai-scene{width:100%;height:100%;min-height:530px;object-fit:cover;object-position:center;border-left:1px solid rgba(72,181,255,.16);mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 100%),linear-gradient(to bottom,transparent 0%,#000 8%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect;filter:saturate(.92) contrast(1.06);} .hh-photo-treatment{position:relative;overflow:hidden;background:#071523;} .hh-photo-treatment img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88) contrast(1.08) brightness(.9);transition:transform .45s ease,filter .45s ease;} .hh-photo-treatment::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(135deg,rgba(9,31,53,.32),rgba(19,113,190,.05) 48%,rgba(4,14,25,.38)),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);mix-blend-mode:screen;} .hh-photo-treatment::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(72,181,255,.22),inset 0 -70px 70px rgba(3,10,18,.35);} .hh-photo-treatment:hover img{transform:scale(1.025);filter:saturate(1) contrast(1.06) brightness(.95);} .hh-trustbar{position:relative;z-index:5;margin-top:-44px;padding-bottom:34px;} .hh-trustgrid{display:grid;grid-template-columns:repeat(5,1fr);background:linear-gradient(180deg,rgba(11,31,51,.98),rgba(7,22,37,.98));border:1px solid rgba(72,181,255,.22);box-shadow:0 18px 50px rgba(0,0,0,.28);} .hh-trustitem{padding:23px 18px;display:flex;gap:12px;align-items:center;border-right:1px solid rgba(72,181,255,.15);min-height:90px;} .hh-trustitem:last-child{border-right:0;} .hh-trusticon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#62c1ff;background:rgba(13,127,232,.12);border:1px solid rgba(72,181,255,.28);flex:none;} .hh-trusticon svg{width:22px;height:22px;} .hh-trustitem strong{display:block;color:white;font:600 .96rem/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.02em;} .hh-trustitem span{display:block;color:rgba(234,244,255,.58);font-size:.78rem;margin-top:3px;} .hh-section{padding:88px 0;background:var(--hh-navy);} .hh-section.alt{background:linear-gradient(180deg,#081827,#06121f);} .hh-section.soft{background:#0a1a2a;} .hh-section .section-head h2{color:white;} .hh-section .section-head p{color:rgba(234,244,255,.7);max-width:820px;margin-left:auto;margin-right:auto;} .hh-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:58px;align-items:center;} .hh-copy h2,.hh-copy h3{color:white;} .hh-copy p{color:rgba(234,244,255,.75);font-size:1.03rem;line-height:1.72;} .hh-photo-frame{min-height:420px;border-radius:8px;border:1px solid rgba(72,181,255,.2);box-shadow:0 24px 50px rgba(0,0,0,.25);} .hh-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .hh-service-card{display:flex;flex-direction:column;background:linear-gradient(180deg,#0b2238,#071827);border:1px solid rgba(72,181,255,.2);border-radius:7px;overflow:hidden;min-height:100%;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;} .hh-service-card:hover{transform:translateY(-4px);border-color:rgba(72,181,255,.52);box-shadow:0 16px 40px rgba(0,0,0,.24);} .hh-service-card .hh-card-image{height:180px;} .hh-service-card .hh-card-body{padding:22px;display:flex;flex-direction:column;flex:1;} .hh-service-card h3{font-size:1.05rem;color:white;margin-bottom:10px;} .hh-service-card p{color:rgba(234,244,255,.67);font-size:.92rem;line-height:1.55;} .hh-service-card .go{margin-top:auto;color:#52b8ff;font:600 .77rem/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;} .hh-proof-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:stretch;} .hh-proof-panel{background:#0b2035;border:1px solid rgba(72,181,255,.2);border-radius:8px;padding:34px;} .hh-proof-panel h3{color:white;} .hh-proof-panel p{color:rgba(234,244,255,.7);} .hh-bullets{display:grid;gap:14px;margin-top:22px;} .hh-bullet{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:13px 0;border-top:1px solid rgba(72,181,255,.12);} .hh-bullet:first-child{border-top:0;} .hh-bullet .badge{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(13,127,232,.15);color:#61c2ff;border:1px solid rgba(72,181,255,.28);font-weight:700;} .hh-bullet strong{color:white;display:block;margin-bottom:3px;} .hh-bullet span{color:rgba(234,244,255,.62);font-size:.9rem;line-height:1.5;} .hh-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;} .hh-metric{background:linear-gradient(180deg,#0b2238,#081827);border:1px solid rgba(72,181,255,.18);padding:26px;text-align:center;border-radius:6px;} .hh-metric b{display:block;color:#fff;font:700 2rem/1 var(--font-display);} .hh-metric span{display:block;margin-top:9px;color:rgba(234,244,255,.63);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;} .hh-process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:steps;} .hh-step{counter-increment:steps;background:#0b2035;border:1px solid rgba(72,181,255,.18);padding:28px;border-radius:7px;position:relative;} .hh-step::before{content:"0" counter(steps);display:block;color:#49b4ff;font:700 .82rem/1 var(--font-mono);letter-spacing:.14em;margin-bottom:18px;} .hh-step h3{color:white;font-size:1.05rem;} .hh-step p{color:rgba(234,244,255,.64);font-size:.9rem;} .hh-quote{background:linear-gradient(90deg,#0b3868,#0b2238 58%,#071523);border-top:1px solid rgba(72,181,255,.3);border-bottom:1px solid rgba(72,181,255,.22);} .hh-quote .container{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;padding-top:46px;padding-bottom:46px;} .hh-quote h2{color:white;margin-bottom:7px;} .hh-quote p{color:rgba(234,244,255,.74);margin:0;} .hh-page-hero{position:relative;padding:105px 0 86px;background:linear-gradient(90deg,rgba(4,15,25,.98),rgba(5,18,31,.9) 54%,rgba(6,17,29,.44)),var(--hh-bg) center/cover no-repeat;color:white;overflow:hidden;border-bottom:1px solid rgba(72,181,255,.22);} .hh-page-hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px);pointer-events:none;} .hh-page-hero .container{position:relative;z-index:2;} .hh-page-hero .breadcrumb{color:rgba(234,244,255,.5);} .hh-page-hero .breadcrumb a{color:rgba(234,244,255,.72);} .hh-page-hero h1{max-width:880px;font-size:clamp(2.6rem,5vw,4.7rem);color:white;} .hh-page-hero p{max-width:780px;font-size:1.15rem;line-height:1.65;color:rgba(234,244,255,.77);} .hh-detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:start;} .hh-detail-grid h2,.hh-detail-grid h3{color:white;} .hh-detail-grid p,.hh-detail-grid li{color:rgba(234,244,255,.72);line-height:1.68;} .hh-sidecard{background:#0b2035;border:1px solid rgba(72,181,255,.2);padding:30px;border-radius:8px;position:sticky;top:128px;} .hh-sidecard h3{color:white;} .hh-sidecard .check-list li{color:rgba(234,244,255,.75);} .hh-sidecard .check-list svg{color:#4eb8ff;} .hh-subservice{padding:24px 0;border-top:1px solid rgba(72,181,255,.13);} .hh-subservice:first-child{border-top:0;padding-top:0;} .hh-subservice h3{font-size:1.18rem;} .hh-cta-band{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(6,26,47,.96),rgba(8,61,111,.8)),var(--hh-cta-bg) center/cover no-repeat;border-top:1px solid rgba(72,181,255,.24);} .hh-cta-band .container{padding-top:58px;padding-bottom:58px;display:flex;align-items:center;justify-content:space-between;gap:30px;} .hh-cta-band h2{color:white;margin:0;} .hh-cta-band p{color:rgba(234,244,255,.75);margin:.45rem 0 0;} .hh-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;} @media (max-width:1050px){ .hh-hero .container{grid-template-columns:1fr;gap:26px;padding-top:78px;} .hh-hero-visual{min-height:410px;max-height:520px;} .hh-ai-scene{min-height:410px;} .hh-trustgrid{grid-template-columns:repeat(2,1fr);} .hh-trustitem:nth-child(2n){border-right:0;} .hh-service-grid{grid-template-columns:repeat(2,1fr);} .hh-intro-grid,.hh-proof-grid,.hh-detail-grid{grid-template-columns:1fr;} .hh-sidecard{position:static;} .hh-process{grid-template-columns:repeat(2,1fr);} } @media (max-width:700px){ .hh-topline .container{justify-content:flex-start;overflow-x:auto;white-space:nowrap;gap:18px;} .hh-hero{min-height:auto;} .hh-hero .container{padding-top:58px;padding-bottom:80px;} .hh-hero h1{font-size:clamp(2.8rem,15vw,4.7rem);} .hh-hero-visual{min-height:330px;} .hh-ai-scene{min-height:330px;} .hh-trustbar{margin-top:-20px;} .hh-trustgrid,.hh-service-grid,.hh-process,.hh-metrics{grid-template-columns:1fr;} .hh-trustitem{border-right:0;border-bottom:1px solid rgba(72,181,255,.13);} .hh-trustitem:last-child{border-bottom:0;} .hh-section{padding:62px 0;} .hh-quote .container,.hh-cta-band .container{grid-template-columns:1fr;display:grid;} .hh-cta-band .container{align-items:start;} } /* ======================================================================== Hammerhead Security Stage 3 - conversion, motion, buyer resources ======================================================================== */ .stage3 .modern-card-grid{gap:18px}.stage3 .modern-card{position:relative;display:block;padding:26px;border:1px solid rgba(67,154,255,.22);border-radius:14px;background:linear-gradient(155deg,rgba(9,27,45,.94),rgba(5,16,29,.96));box-shadow:0 16px 46px rgba(0,0,0,.18);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.stage3 a.modern-card:hover,.stage3 .modern-card:hover{transform:translateY(-4px);border-color:rgba(67,154,255,.58);box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 28px rgba(29,112,220,.08)}.stage3 .modern-card h3{margin:0 0 9px}.stage3 .modern-card p{margin:0;color:rgba(234,241,248,.75)} .conversion-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.8fr);gap:48px;align-items:start}.modern-form{display:grid;gap:15px;padding:26px;border:1px solid rgba(72,157,255,.26);border-radius:16px;background:linear-gradient(165deg,rgba(10,31,53,.96),rgba(3,15,28,.98));box-shadow:0 25px 65px rgba(0,0,0,.25)}.modern-form label{display:grid;gap:7px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#b7c9d8}.modern-form input,.modern-form select,.modern-form textarea,.hh-advisor-form input{width:100%;border:1px solid rgba(91,149,194,.35);background:#071625;color:#fff;border-radius:9px;padding:12px 13px;font:inherit}.modern-form input:focus,.modern-form select:focus,.modern-form textarea:focus,.hh-advisor-form input:focus{outline:2px solid rgba(40,151,255,.45);outline-offset:1px}.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important} .timeline-modern{list-style:none;margin:0;padding:0;display:grid;gap:14px}.timeline-modern li{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:22px;border:1px solid rgba(73,147,205,.2);border-radius:14px;background:rgba(6,22,37,.65)}.timeline-modern li>b{font:700 1.8rem var(--font-display);color:var(--beacon)}.timeline-modern h3{margin:0 0 7px}.timeline-modern p{margin:0;color:rgba(234,241,248,.74)} .quote-panel{padding:30px;border-radius:16px;border:1px solid rgba(201,166,103,.28);background:linear-gradient(145deg,rgba(201,166,103,.10),rgba(9,25,42,.96))}.quote-panel blockquote{font-size:1.2rem;line-height:1.6;margin:18px 0;color:#eef5fb}.quote-panel p{color:rgba(234,241,248,.76)} .operating-loop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.operating-loop>div{position:relative;padding:26px 22px 24px;border-radius:14px;border:1px solid rgba(64,145,214,.23);background:linear-gradient(150deg,rgba(9,29,48,.94),rgba(5,17,29,.96));overflow:hidden}.operating-loop span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#168cff,#0062bd);font-weight:800;margin-bottom:28px;box-shadow:0 0 24px rgba(31,137,255,.23)}.operating-loop>div:not(:last-child):after{content:'→';position:absolute;right:-14px;top:28px;color:#3b9eff;font-size:1.4rem;z-index:2}.operating-loop h3{margin:0 0 8px}.operating-loop p{margin:0;color:rgba(234,241,248,.72)} .tech-flow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:25px 0 35px}.tech-flow div{padding:15px 18px;border:1px solid rgba(47,147,235,.35);border-radius:10px;background:#07192a;font-weight:700}.tech-flow span{font-size:1.4rem;color:var(--sonar)}.screenshot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.screenshot-grid figure{margin:0;padding:10px;border:1px solid rgba(82,153,209,.22);border-radius:13px;background:#061523}.screenshot-grid img{width:100%;display:block;border-radius:8px}.screenshot-grid figcaption{font-size:.8rem;color:#9fb5c6;padding:10px 4px 3px} .market-chips{display:flex;flex-wrap:wrap;gap:11px}.market-chip{display:inline-flex;padding:11px 15px;border:1px solid rgba(62,147,222,.28);border-radius:999px;background:#071b2d;color:#dcefff;text-decoration:none;font-weight:700}.market-chip:hover{border-color:#1c8eff;background:#0a2741}.comparison-table{display:grid;border:1px solid rgba(72,149,210,.24);border-radius:14px;overflow:hidden}.comparison-table .row{display:grid;grid-template-columns:1fr 1.2fr 1.2fr}.comparison-table .row>div{padding:16px 18px;border-bottom:1px solid rgba(72,149,210,.13)}.comparison-table .row>div+div{border-left:1px solid rgba(72,149,210,.13)}.comparison-table .row.head{background:#0c2a45;font-weight:800}.comparison-table .row:not(.head):nth-child(even){background:rgba(7,26,43,.52)} .hh-mobile-convert{display:none}.hh-advisor-launch{position:fixed;right:24px;bottom:24px;z-index:1200;border:1px solid rgba(78,164,240,.52);border-radius:999px;background:linear-gradient(135deg,#0d80e8,#0655a4);color:white;padding:13px 17px;font:700 .82rem var(--font-display);letter-spacing:.04em;box-shadow:0 13px 38px rgba(0,56,116,.42);cursor:pointer}.hh-advisor-panel{position:fixed;right:24px;bottom:82px;width:min(390px,calc(100vw - 32px));z-index:1201;border:1px solid rgba(82,164,231,.4);border-radius:16px;background:rgba(4,16,29,.985);box-shadow:0 30px 90px rgba(0,0,0,.55);padding:0;overflow:hidden;transform:translateY(18px) scale(.98);opacity:0;pointer-events:none;transition:.22s ease}.hh-advisor-panel.open{transform:none;opacity:1;pointer-events:auto}.hh-advisor-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 17px;background:linear-gradient(100deg,#0a2f50,#07192c)}.hh-advisor-head strong{display:block}.hh-advisor-head span{display:block;color:#9fb6c9;font-size:.73rem;margin-top:3px}.hh-advisor-close{border:0;background:none;color:#fff;font-size:1.7rem;cursor:pointer}.hh-advisor-log{height:190px;overflow:auto;padding:16px;display:grid;align-content:start;gap:9px}.advisor-msg{max-width:88%;padding:10px 12px;border-radius:12px;font-size:.86rem;line-height:1.45}.advisor-msg.bot{background:#0a2944;color:#e7f4ff}.advisor-msg.user{background:#125da3;color:#fff;margin-left:auto}.hh-advisor-chips{display:flex;gap:7px;overflow:auto;padding:0 14px 12px}.hh-advisor-chips button{white-space:nowrap;border:1px solid rgba(73,153,220,.3);border-radius:999px;background:#071b2c;color:#cfe7fa;padding:8px 10px;font-size:.75rem;cursor:pointer}.hh-advisor-form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 14px;border-top:1px solid rgba(70,146,207,.18)}.hh-advisor-form button{border:0;border-radius:8px;background:#167fd8;color:#fff;font-weight:800;padding:0 14px;cursor:pointer}.hh-advisor-actions{display:flex;gap:8px;padding:0 14px 14px}.hh-advisor-actions .btn{font-size:.72rem;padding:9px 10px;flex:1} .hh-cta-modern{background:radial-gradient(circle at 75% 20%,rgba(24,116,209,.2),transparent 34%),linear-gradient(115deg,#061524,#082843)} .security-premier .hh-page-hero{position:relative}.security-premier .hh-page-hero:after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:28px 28px;mix-blend-mode:screen}.security-premier .hh-page-hero>.container{position:relative;z-index:1}.stage3 .hh-page-hero h1{max-width:850px}.urgent-hero .eyebrow{color:#ffcd66}.urgent-hero .btn-primary{box-shadow:0 0 26px rgba(255,184,45,.18)} @media(max-width:900px){.conversion-split{grid-template-columns:1fr}.operating-loop{grid-template-columns:repeat(2,1fr)}.screenshot-grid{grid-template-columns:1fr}.comparison-table{overflow:auto}.comparison-table .row{min-width:720px}.hh-advisor-launch{bottom:76px}.hh-mobile-convert{position:fixed;left:0;right:0;bottom:0;z-index:1199;display:grid;grid-template-columns:1fr 1.7fr;background:#041321;border-top:1px solid rgba(76,160,228,.34);box-shadow:0 -12px 40px rgba(0,0,0,.3)}.hh-mobile-convert a{padding:14px 10px;text-align:center;text-transform:uppercase;letter-spacing:.05em;font:700 .78rem var(--font-display);color:#ddecf8;text-decoration:none}.hh-mobile-convert a.primary{background:linear-gradient(90deg,#0c6ec8,#118cf1);color:#fff}.site-footer{padding-bottom:62px}} @media(max-width:600px){.operating-loop{grid-template-columns:1fr}.operating-loop>div:after{display:none}.timeline-modern li{grid-template-columns:50px 1fr;padding:17px}.hh-advisor-panel{right:16px;bottom:132px}.hh-advisor-launch{right:16px}.hh-advisor-actions{flex-direction:column}} @media(prefers-reduced-motion:reduce){.modern-card,.hh-advisor-panel{transition:none!important}.modern-card:hover{transform:none!important}} .brand-film{padding:10px;border:1px solid rgba(70,152,218,.25);border-radius:15px;background:#061525;box-shadow:0 20px 60px rgba(0,0,0,.3)}.brand-film video{width:100%;display:block;border-radius:10px;background:#02080e}.brand-film p{padding:8px 5px 2px;margin:0;color:#9db1c2}.coverage-explorer{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.65fr);gap:24px;align-items:center}.coverage-map{width:100%;height:auto;border:1px solid rgba(65,145,210,.23);border-radius:16px;background:radial-gradient(circle at 65% 30%,rgba(17,95,158,.16),transparent 32%),#04111e;padding:18px}.coverage-map a{cursor:pointer}.coverage-map circle{fill:#1687e7;stroke:#8ac9ff;stroke-width:2;transition:.2s}.coverage-map text{fill:#dceefc;font:700 16px 'Source Sans 3',sans-serif;pointer-events:none}.coverage-map a:hover circle{r:17;fill:#c9a667;stroke:#ffe4a6}.coverage-note{padding:26px;border:1px solid rgba(201,166,103,.26);border-radius:16px;background:linear-gradient(145deg,rgba(201,166,103,.08),rgba(6,22,37,.95))}.coverage-note p{color:rgba(234,241,248,.75)} @media(max-width:850px){.coverage-explorer{grid-template-columns:1fr}.coverage-map text{font-size:19px}} /* ======================================================================== STAGE 4.2 — CARTOON REALITY UNIVERSAL SKIN (SITE-WIDE) Applied at the level to every generated page on the site -- Hammerhead Security, Hammerhead Security Cameras, Bluewater Security Academy, BluewaterOS, and the Hammerhead Security Solutions parent/ holding-company pages (home, contact, privacy, account, etc.) -- so legacy, conversion, resource, location, form, and article templates across every division all inherit the same flagship visual language. Real field photography is blended with weapon-free cinematic illustration rather than isolated to one brand's homepage. The ".hh-division" class name predates this being site-wide (Stage 4.1 only covered the Hammerhead Security division) and is kept as-is here to avoid a much larger rename across this file and build_site.py -- it now means "site skin", not "Hammerhead Security division". ======================================================================== */ body.hh-division{ --hh-blue:#0d7fe8;--hh-blue-bright:#4bb8ff;--hh-gold:#f6bd3b; --hh-navy:#06111f;--hh-navy-2:#091a2e;--hh-panel:#0b2035; --hh-copy:#dceaf6;--hh-muted:#9eb5c8;--hh-line:rgba(74,171,255,.24); background:#04101c;color:var(--hh-copy); } body.hh-division main{background:#06111f;color:var(--hh-copy);overflow:hidden;} body.hh-division main h1,body.hh-division main h2,body.hh-division main h3,body.hh-division main h4{color:#fff;} body.hh-division main p,body.hh-division main li{color:rgba(226,240,251,.78);} body.hh-division main a:not(.btn):not(.modern-card):not(.hh-service-card){text-decoration-color:rgba(75,184,255,.45);} body.hh-division .brand-strip{background:#020a12;border-top:1px solid rgba(72,181,255,.1);border-bottom-color:rgba(72,181,255,.18);} body.hh-division .brand-strip a.active{color:#72c9ff;border-bottom-color:var(--hh-gold);} /* Every division's own homepage/landing hero (.hero -- the section used on index.html for the Hammerhead Security Solutions parent site, Hammerhead Security Cameras, Bluewater Security Academy, and BluewaterOS) still carried the site's original pre-cartoon-reality teal/gold "signal" hero design -- a rotating radar-sweep glint and --signal-green stat numbers -- because .hero was never brought into this skin, only .page-hero (interior pages) was. Hammerhead Security's own homepage doesn't hit this gap: it replaced .hero with its own bespoke .security-premier section that already matches this navy/ electric-blue palette by hand. Every other division's homepage still uses plain .hero, so without this block the very first thing a visitor sees on those pages clashed with the rest of the site -- this is what made the skin look like it only covered Hammerhead Security even after the class went universal. :not(.has-photo) mirrors the guard on .page-hero above; no page currently uses .hero.has-photo, but the base .hero.has-photo::before rule (further up this file) already carries its own dedicated photo scrim and must be left free to win if one ever does. The static ambient glow lives directly on .hero's own background (not ::before) on purpose: ::before is where the rotating radar sweep below lives, and rotating an off-center radial-gradient along with it would swing the glow wildly instead of holding still behind the sweep. */ body.hh-division .hero{ background: radial-gradient(1200px 560px at 82% -10%,rgba(72,181,255,.16),transparent 60%), var(--grid-texture), linear-gradient(180deg,#06111f 0%,#0a1c30 130%); background-size:auto,var(--grid-size),auto; } /* Keeps the original .hero radar-sweep motion (see @keyframes radarSweep and .hero::before near the top of this file) rather than dropping it -- just recolored from the old teal/green --signal to this skin's electric blue so the sweep matches the rest of the page instead of clashing with it. mix-blend-mode:screen is what makes it read as a light sweep rather than a visible wedge shape. */ body.hh-division .hero:not(.has-photo)::before{ content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none; background:conic-gradient(from 0deg,transparent 0deg,rgba(72,181,255,.16) 8deg,transparent 26deg,transparent 360deg); animation:radarSweep 9s linear infinite; mix-blend-mode:screen; } @media (prefers-reduced-motion: reduce){ body.hh-division .hero:not(.has-photo)::before{animation:none;} } body.hh-division .hero-stats .stat b{color:#72c9ff;text-shadow:0 0 18px rgba(72,181,255,.45);} body.hh-division .hero-stats .stat span{color:rgba(226,240,251,.6);} body.hh-division .hero .lede{color:rgba(226,240,251,.82);} body.hh-division .hero-panel{border-color:rgba(72,181,255,.24);background:linear-gradient(155deg,rgba(11,32,53,.85),rgba(6,17,29,.9));} body.hh-division .hero-panel::before{border-color:#4bb8ff;filter:drop-shadow(0 0 6px rgba(72,181,255,.5));} body.hh-division .hero-panel::after{border-color:var(--hh-gold);} /* Every old/generic Hammerhead page hero receives the same real-photo + illustrated visual blend used by the flagship homepage. */ body.hh-division .page-hero{ position:relative;isolation:isolate;overflow:hidden;min-height:420px; display:flex;align-items:center;background: linear-gradient(90deg,rgba(4,14,25,.98) 0%,rgba(5,20,35,.94) 43%,rgba(5,20,35,.55) 67%,rgba(4,14,25,.66) 100%), var(--hh-page-real) center/cover no-repeat; border-bottom:1px solid rgba(75,184,255,.18); } /* :not(.has-photo) here is deliberate: a .page-hero.has-photo already has its own dedicated background photo (set inline) and its own protective full-bleed dark scrim (see the base .page-hero.has-photo::before rule above, in the non-hh-division part of this file) that keeps the heading/eyebrow/breadcrumb text readable over that specific photo. This generic ::before is a *different*, right-side-only decorative art panel for pages that DON'T have their own photo (the .page-hero background falls back to the universal --hh-page-art/--hh-page-real backdrop in that case). Without :not(.has-photo), this rule's higher specificity silently wins over the has-photo scrim -- since it doesn't cover the left ~47% of the hero where the heading sits, that left this rule replacing full-bleed darkening with none there, so title text sat directly on an undarkened photo with poor contrast on bluewater-os/pricing.html, bluewater-os/security.html, about/leadership.html, and (already, even before the skin went site-wide) hammerhead-security/licensing.html, testimonials.html, and careers.html. */ body.hh-division .page-hero:not(.has-photo)::before{ content:"";position:absolute;z-index:-1;inset:-4% -3% -4% 47%; background: linear-gradient(90deg,#06111f 0%,rgba(6,17,31,.08) 24%,rgba(6,17,31,.08) 76%,#06111f 100%), linear-gradient(180deg,#06111f 0%,transparent 16%,transparent 82%,#06111f 100%), var(--hh-page-art) center/cover no-repeat; opacity:.78;filter:saturate(.9) contrast(1.08);transform:skewX(-2deg) scale(1.04); mask-image:linear-gradient(to right,transparent 0,#000 17%,#000 100%); } body.hh-division .page-hero::after{ content:"";position:absolute;z-index:-1;inset:0;pointer-events:none; background: repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px), radial-gradient(circle at 79% 48%,rgba(22,139,238,.18),transparent 31%), linear-gradient(rgba(72,181,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(72,181,255,.028) 1px,transparent 1px); background-size:auto,auto,42px 42px,42px 42px; } body.hh-division .page-hero>.container{position:relative;z-index:2;padding-top:72px;padding-bottom:72px;} body.hh-division .page-hero h1{max-width:820px;text-shadow:0 8px 32px rgba(0,0,0,.6);} body.hh-division .page-hero p{max-width:720px;font-size:1.06rem;color:rgba(232,244,253,.84);} body.hh-division .breadcrumb,body.hh-division .breadcrumb a{color:rgba(190,218,239,.7);} body.hh-division .eyebrow{color:#52baff;} body.hh-division .eyebrow::before{background:var(--hh-gold);box-shadow:0 0 12px rgba(246,189,59,.4);} /* Service pages that already have a dedicated image keep it, but receive the same ink/scanline edge treatment so the look does not change page-to-page. */ body.hh-division .hh-page-hero{border-bottom:1px solid rgba(72,181,255,.2);} body.hh-division .hh-page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,14,25,.96),rgba(5,22,38,.74) 48%,rgba(5,19,34,.36)),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);z-index:0;} body.hh-division .hh-page-hero>.container{position:relative;z-index:2;} /* All legacy light sections are converted to the premium dark-blue visual system. This is what keeps contact, RFP, licensing, state, blog, FAQ and careers pages from dropping back into the old white-template theme. */ body.hh-division .section-mist,body.hh-division .section-white, body.hh-division .section-light,body.hh-division .section-soft{ background:linear-gradient(180deg,#081b2c 0%,#061421 100%)!important; color:var(--hh-copy); } body.hh-division .section-dark,body.hh-division .section-deep{ background: linear-gradient(rgba(72,181,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(72,181,255,.025) 1px,transparent 1px), linear-gradient(180deg,#06111f,#04101b)!important; background-size:42px 42px,42px 42px,auto!important; } body.hh-division main>section:not(.page-hero):not(.hh-page-hero):not(.hh-hero):not(.hh-trustbar):not(.cta-banner):not(.hh-cta-band):not(.hh-cta-modern){border-top:1px solid rgba(72,181,255,.07);} /* Generic cards/forms used by older templates */ body.hh-division .card,body.hh-division .form-wrap,body.hh-division .quote-card, body.hh-division .faq-item,body.hh-division .stat-card,body.hh-division .feature-card{ background:linear-gradient(155deg,rgba(11,34,56,.96),rgba(6,22,37,.97))!important; border-color:rgba(75,167,243,.23)!important;color:var(--hh-copy)!important; box-shadow:0 18px 48px rgba(0,0,0,.18); } body.hh-division .card p,body.hh-division .form-wrap p,body.hh-division .small{color:rgba(210,230,244,.72)!important;} body.hh-division .card:hover{border-color:rgba(75,184,255,.52)!important;} body.hh-division .field label{color:#bad1e3;} body.hh-division .field input,body.hh-division .field select,body.hh-division .field textarea, body.hh-division input,body.hh-division select,body.hh-division textarea{ background:#071625;color:#f5fbff;border-color:rgba(91,157,211,.34); } body.hh-division input:focus,body.hh-division select:focus,body.hh-division textarea:focus{outline:2px solid rgba(67,166,255,.45);outline-offset:1px;} body.hh-division select option{background:#071625;color:#fff;} body.hh-division .check-list li{border-color:rgba(72,181,255,.13);} body.hh-division .check-list svg{color:#53baff;} body.hh-division .pin-badge{background:rgba(7,28,47,.82);border-color:rgba(75,166,239,.28);color:#dff1ff;} body.hh-division .pin-badge.current,body.hh-division .pin-badge:hover{background:rgba(13,127,232,.18);border-color:#52baff;color:#fff;} body.hh-division .contact-info .item{border-color:rgba(72,181,255,.14);} body.hh-division .contact-info .item svg{color:#5fbfff;} body.hh-division .contact-info a{color:#dff2ff;} /* Blog/knowledge center: keep long-form reading comfortable while retaining the cinematic world around the article. */ body.hh-division .blog-post,body.hh-division article.blog-post,body.hh-division .article-body{ background:linear-gradient(180deg,#091b2b,#071521);color:var(--hh-copy); } body.hh-division .blog-post-content,body.hh-division .article-content{color:rgba(231,241,249,.84);} body.hh-division .blog-post-content p,body.hh-division .article-content p, body.hh-division .blog-post-content li,body.hh-division .article-content li{color:rgba(231,241,249,.84);} body.hh-division .blog-card-photo{filter:saturate(.84) contrast(1.08);background:#071523;} body.hh-division .blog-card-photo+*{position:relative;} body.hh-division .pill{background:rgba(13,127,232,.12);border-color:rgba(72,181,255,.26);color:#a9dbff;} /* CTAs stay gold/blue and the old generic CTA is pulled into the same world. */ body.hh-division .cta-banner{position:relative;overflow:hidden;background: radial-gradient(circle at 78% 40%,rgba(19,135,235,.22),transparent 38%), linear-gradient(110deg,#061321,#092945)!important;border-top:1px solid rgba(72,181,255,.19);} body.hh-division .cta-banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px);} body.hh-division .cta-banner>.container{position:relative;z-index:1;} body.hh-division .btn-primary{background:linear-gradient(180deg,#ffd25c,#f0ad20);color:#06111f;border-color:#ffd25c;} body.hh-division .btn-primary:hover{background:#ffda76;} body.hh-division .btn-outline{color:#f5fbff;border-color:rgba(245,251,255,.55);} body.hh-division .btn-outline:hover{border-color:#58bdff;color:#75caff;background:rgba(13,127,232,.08);} /* Real-photo treatment can be added to any ordinary image without changing markup. Exclude logos/icons/screenshots where documentary fidelity matters. */ body.hh-division main img:not(.mark):not(.crest-mark):not([src*="screenshots/"]):not([src$=".svg"]){ filter:saturate(.88) contrast(1.06) brightness(.94); } body.hh-division main figure:has(img:not([src$=".svg"])){position:relative;overflow:hidden;border:1px solid rgba(72,181,255,.22);background:#071523;box-shadow:0 20px 50px rgba(0,0,0,.22);} body.hh-division main figure:has(img:not([src$=".svg"]))::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(17,110,185,.08),transparent 45%,rgba(3,12,22,.3)),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);} /* A subtle illustrated watermark in otherwise text-heavy sections keeps the cartoon-reality concept present without sacrificing readability. */ body.hh-division main>section:not(.page-hero):not(.hh-page-hero):not(.hh-hero):not(.cta-banner)::after{ content:"";position:absolute;right:-90px;bottom:-70px;width:420px;height:280px;pointer-events:none;opacity:.035; background:var(--hh-page-art) center/cover no-repeat;filter:grayscale(1) contrast(1.2);mask-image:radial-gradient(ellipse at center,#000,transparent 72%); } body.hh-division main>section:not(.page-hero):not(.hh-page-hero):not(.hh-hero):not(.cta-banner){position:relative;isolation:isolate;} body.hh-division main>section>.container{position:relative;z-index:1;} /* Mobile: preserve the artwork, but prioritize copy and avoid oversized visual layers on narrow screens. */ @media(max-width:850px){ body.hh-division .page-hero{min-height:390px;background:linear-gradient(rgba(4,14,25,.91),rgba(4,14,25,.92)),var(--hh-page-real) center/cover no-repeat;} body.hh-division .page-hero:not(.has-photo)::before{inset:28% -18% -16% 25%;opacity:.35;transform:none;} body.hh-division .page-hero>.container{padding-top:58px;padding-bottom:62px;} body.hh-division main>section:not(.page-hero):not(.hh-page-hero):not(.hh-hero):not(.cta-banner)::after{width:280px;height:190px;opacity:.025;} } @media(prefers-reduced-motion:reduce){body.hh-division *{scroll-behavior:auto!important;}}