/* ============================================================ TMG SECURITY — 4D EDITION Design system: dark bento + HUD. 4th dimension = a real tesseract (4D hypercube) whose W-axis rotation is driven by scroll. Components adapted from 21st.dev: · SpotlightCard (@berkcangumusisik) → .spot · CyberpunkTerminalHero(@dhileepkumargm) → .hero grid/scanline/glitch ============================================================ */ :root{ /* --- surfaces --- */ --void:#04060C; --deep:#080C18; --panel:#0D1424; --panel2:#121B30; --line:rgba(140,165,225,0.12); --line2:rgba(140,165,225,0.22); --line3:rgba(140,165,225,0.34); /* --- brand --- */ --cyan:#4FD8EA; --violet:#7C5CFA; /* the W axis — the 4th dimension gets its own colour */ --hyper:#FF4FD8; --ice:#CBD6FF; --fog:#7F8AAE; --white:#F2F6FF; /* --- semantic --- */ --crit:#FF5A6E; --warn:#F5B44E; --ok:#3FE0B0; /* --- type --- */ --display:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --hud:'Orbitron',var(--display); /* --- space scale (density 6/10) --- */ --s1:6px; --s2:12px; --s3:18px; --s4:26px; --s5:38px; --s6:56px; --s7:80px; --s8:112px; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --ease:cubic-bezier(.22,.9,.28,1); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--void); color:var(--white); font-family:var(--body); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } img,svg,canvas{ display:block; max-width:100%; } /* clones inherit from the *use element's* context, not from the sprite's parent — so the stroke style has to be declared here or icons render as solid black fills. */ use{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } button{ font-family:var(--body); cursor:pointer; } ::selection{ background:var(--cyan); color:var(--void); } :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; } .wrap{ max-width:1320px; margin:0 auto; padding:0 var(--s4); } section{ position:relative; z-index:1; } .pad{ padding:var(--s8) 0; } .divider{ border-top:1px solid var(--line); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ============================================================ AMBIENT FIELD — grid + cursor-reactive glow (adapted from 21st.dev CyberpunkTerminalHero background) ============================================================ */ .field{ position:fixed; inset:0; z-index:0; pointer-events:none; } .field-grid{ position:absolute; inset:0; background-image: linear-gradient(to right, rgba(140,165,225,0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(140,165,225,0.055) 1px, transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse 78% 60% at 50% 0%, #000 5%, transparent 72%); -webkit-mask-image:radial-gradient(ellipse 78% 60% at 50% 0%, #000 5%, transparent 72%); } /* the glow chases the pointer — set via --mx/--my on */ .field-cursor{ position:absolute; inset:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,20%), rgba(79,216,234,0.10), transparent 60%); transition:background .18s linear; } .field-blob{ position:absolute; border-radius:50%; filter:blur(140px); } .blob-a{ width:620px; height:620px; top:-240px; left:-180px; background:var(--violet); opacity:.20; } .blob-b{ width:560px; height:560px; top:60px; right:-220px; background:var(--cyan); opacity:.13; } .blob-c{ width:520px; height:520px; top:52%; left:38%; background:var(--hyper); opacity:.05; } /* scanlines — subtle, never over body copy */ .scanlines{ position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.5; background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px); mix-blend-mode:multiply; } /* ============================================================ HUD CHROME — scroll progress + W-axis readout ============================================================ */ .scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0%; z-index:400; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--hyper)); box-shadow:0 0 12px rgba(79,216,234,.6); } .wreadout{ position:fixed; right:18px; bottom:18px; z-index:300; font-family:var(--mono); font-size:10px; letter-spacing:1.4px; color:var(--fog); background:rgba(8,12,24,.72); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 13px; display:flex; flex-direction:column; gap:5px; min-width:150px; opacity:0; transform:translateY(10px); transition:opacity .4s, transform .4s; pointer-events:none; /* floating chrome must never intercept a real control */ } .wreadout.on{ opacity:1; transform:translateY(0); } .wreadout .wrow{ display:flex; justify-content:space-between; gap:14px; } .wreadout b{ color:var(--cyan); font-weight:500; } .wreadout .wbar{ height:2px; background:var(--line2); border-radius:2px; overflow:hidden; } .wreadout .wbar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--hyper)); } /* below this there isn't enough gutter for it to sit clear of content */ @media (max-width:1200px){ .wreadout{ display:none; } } /* ============================================================ HEADER ============================================================ */ header{ position:sticky; top:0; z-index:200; background:rgba(4,6,12,.72); backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--line); } .nav{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:var(--s3); } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--hud); font-weight:700; font-size:16px; letter-spacing:1.2px; flex:none; } .brand .mark{ width:28px; height:28px; } nav.links{ display:flex; align-items:center; gap:2px; } .nav-item{ position:relative; } .nav-btn{ background:none; border:none; color:var(--ice); font-size:13.5px; font-weight:500; padding:10px 13px; border-radius:var(--r-sm); display:flex; align-items:center; gap:6px; transition:color .2s, background .2s; } .nav-btn:hover{ color:var(--white); background:rgba(140,165,225,.08); } .caret{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .25s var(--ease); margin-top:-3px; } .nav-item.open .caret{ transform:rotate(225deg); margin-top:2px; } .mega{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-10px) scale(.985); background:linear-gradient(180deg,var(--deep),#070A14); border:1px solid var(--line2); border-radius:var(--r-lg); padding:24px; box-shadow:0 40px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04); opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .22s var(--ease); } .nav-item.open .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); } .mega-services{ width:840px; display:grid; grid-template-columns:repeat(3,1fr); gap:2px 24px; } .mega-eco{ width:640px; display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; } .mega-col-title{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; color:var(--cyan); margin:16px 0 8px; grid-column:1/-1; } .mega-col-title:first-child{ margin-top:0; } .mega a.mega-link{ display:block; padding:8px 10px; border-radius:var(--r-sm); font-size:12.8px; color:var(--ice); transition:background .15s, color .15s, transform .15s; } .mega a.mega-link:hover{ background:rgba(79,216,234,.08); color:var(--white); transform:translateX(3px); } .mega-blueprint-cta{ grid-column:1/-1; display:flex; flex-direction:column; gap:2px; margin-top:16px; padding:14px 16px; border-radius:var(--r-md); background:linear-gradient(120deg, rgba(79,216,234,.10), rgba(124,92,250,.13), rgba(255,79,216,.08)); border:1px solid rgba(79,216,234,.3); transition:border-color .2s, transform .2s; } .mega-blueprint-cta:hover{ border-color:var(--cyan); transform:translateY(-2px); } .mega-blueprint-cta b{ font-family:var(--display); font-size:13.5px; color:var(--white); } .mega-blueprint-cta span{ font-size:11px; color:var(--fog); } .mega-card{ display:flex; gap:12px; padding:12px; border-radius:var(--r-md); transition:background .15s, transform .15s; } .mega-card:hover{ background:rgba(124,92,250,.09); transform:translateX(3px); } .mega-card .ic{ width:36px; height:36px; flex:none; border-radius:11px; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--cyan); } .mega-card .mt{ font-size:13.5px; font-weight:600; } .mega-card .md{ font-size:11px; color:var(--fog); margin-top:2px; } /* buttons */ .cta-btn{ position:relative; font-weight:600; font-size:13.5px; padding:11px 20px; border-radius:10px; background:linear-gradient(120deg,var(--cyan),var(--violet)); color:#04060C; border:none; transition:box-shadow .28s var(--ease), transform .2s var(--ease); overflow:hidden; white-space:nowrap; } .cta-btn::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:translateX(-120%); transition:transform .6s var(--ease); } .cta-btn:hover{ box-shadow:0 10px 30px rgba(79,216,234,.32); transform:translateY(-2px); } .cta-btn:hover::after{ transform:translateX(120%); } .cta-ghost{ font-weight:600; font-size:13.5px; padding:11px 20px; border-radius:10px; background:transparent; color:var(--white); border:1px solid var(--line2); transition:border-color .2s, background .2s, transform .2s; white-space:nowrap; } .cta-ghost:hover{ border-color:var(--cyan); background:rgba(79,216,234,.07); transform:translateY(-2px); } .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; position:relative; z-index:250; } .burger span{ width:22px; height:2px; background:var(--white); transition:transform .25s var(--ease), opacity .25s; } .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger.open span:nth-child(2){ opacity:0; } .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .mobile-nav{ position:fixed; top:76px; left:0; right:0; bottom:0; background:var(--void); z-index:220; display:flex; flex-direction:column; padding:26px 24px; gap:26px; transform:translateX(100%); transition:transform .38s var(--ease); overflow-y:auto; } .mobile-nav.open{ transform:translateX(0); } .mnav-links{ display:flex; flex-direction:column; } .mnav-link{ font-family:var(--display); font-size:21px; font-weight:600; padding:15px 4px; border-bottom:1px solid var(--line); } .mnav-cta{ width:100%; padding:16px; font-size:15px; } body.nav-locked{ overflow:hidden; } @media (min-width:1081px){ .mobile-nav{ display:none; } } /* ============================================================ TYPE / SECTION HEADS ============================================================ */ .eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:3px; color:var(--cyan); display:inline-flex; align-items:center; gap:9px; } .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:pulse 1.9s infinite; } @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.28;} } .sec-head{ max-width:700px; margin-bottom:var(--s6); } .sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .sec-eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:2.6px; color:var(--cyan); margin-bottom:14px; } h2.sec-h{ font-family:var(--display); font-size:clamp(27px,3.4vw,40px); font-weight:700; letter-spacing:-.6px; line-height:1.12; margin-bottom:14px; } .sec-sub{ color:var(--fog); font-size:15.5px; } h1.hero-h{ font-family:var(--display); font-size:clamp(38px,6.4vw,70px); line-height:1.02; font-weight:700; letter-spacing:-2px; margin-bottom:22px; } .accent{ background:linear-gradient(115deg,var(--cyan) 10%,var(--violet) 55%,var(--hyper) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* glitch (adapted from 21st.dev CyberpunkTerminalHero) The base text keeps its gradient (background-clip:text). The two glitch layers opt OUT of that clipping with their own text-fill-color and carry no box background, so they can never paint a rectangle over the headline. Visibility is driven by opacity — clip-path alone is too easy to get wrong. */ .glitch{ position:relative; display:inline-block; } .glitch::before,.glitch::after{ content:attr(data-text); position:absolute; left:0; top:0; width:100%; background:none; -webkit-background-clip:border-box; background-clip:border-box; pointer-events:none; opacity:0; will-change:opacity,transform; } .glitch::before{ color:var(--cyan); -webkit-text-fill-color:var(--cyan); animation:glitchA 3.6s infinite; } .glitch::after { color:var(--hyper); -webkit-text-fill-color:var(--hyper); animation:glitchB 2.9s infinite; } @keyframes glitchA{ 0%,91.5%,98.5%,100%{ opacity:0; transform:none; } 92%{ opacity:.9; transform:translateX(-3px); clip-path:inset(10% 0 62% 0); } 94%{ opacity:.9; transform:translateX(3px); clip-path:inset(46% 0 24% 0); } 96%{ opacity:.9; transform:translateX(-2px); clip-path:inset(74% 0 8% 0); } 98%{ opacity:.9; transform:translateX(1px); clip-path:inset(30% 0 48% 0); } } @keyframes glitchB{ 0%,89.5%,97.5%,100%{ opacity:0; transform:none; } 90%{ opacity:.85; transform:translateX(3px); clip-path:inset(64% 0 14% 0); } 93%{ opacity:.85; transform:translateX(-3px); clip-path:inset(22% 0 54% 0); } 95%{ opacity:.85; transform:translateX(2px); clip-path:inset(4% 0 80% 0); } 97%{ opacity:.85; transform:translateX(-1px); clip-path:inset(52% 0 30% 0); } } @media (prefers-reduced-motion:reduce){ .glitch::before,.glitch::after{ display:none; } } /* ============================================================ REVEAL ============================================================ */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } .stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease), transform .55s var(--ease); } .stagger.in > *{ opacity:1; transform:none; } /* ============================================================ SPOTLIGHT CARD (port of 21st.dev @berkcangumusisik/spotlight-card) Mouse-following radial gradient, driven by --sx/--sy/--so. ============================================================ */ .spot{ position:relative; overflow:hidden; border-radius:var(--r-md); border:1px solid var(--line); background:var(--deep); transition:border-color .25s, transform .25s var(--ease), background .25s; } .spot::before{ content:''; position:absolute; inset:-1px; pointer-events:none; z-index:0; opacity:var(--so,0); transition:opacity .3s; background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), var(--spot-color, rgba(79,216,234,.16)), transparent 42%); } .spot > *{ position:relative; z-index:1; } .spot:hover{ border-color:var(--line3); transform:translateY(-4px); background:var(--panel); } /* ============================================================ HERO + TESSERACT ============================================================ */ .hero{ padding:var(--s6) 0 var(--s4); } .hero-inner{ text-align:center; max-width:880px; margin:0 auto; } .hero-sub{ font-size:17px; color:var(--fog); max-width:585px; margin:0 auto var(--s4); } .hero-ctas{ display:flex; gap:13px; justify-content:center; margin-bottom:var(--s3); flex-wrap:wrap; } .trust-line{ font-family:var(--mono); font-size:10.5px; color:var(--fog); letter-spacing:1.6px; } /* the tesseract stage */ .tess-stage{ position:relative; width:100%; max-width:1000px; margin:var(--s3) auto 0; height:clamp(300px, 44vh, 440px); } #tessCanvas{ width:100%; height:100%; display:block; } .tess-hud{ position:absolute; left:0; top:0; font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--fog); line-height:1.9; pointer-events:none; } .tess-hud b{ color:var(--cyan); font-weight:500; } .tess-hint{ position:absolute; right:0; bottom:0; font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--fog); pointer-events:none; text-align:right; line-height:1.9; } .tess-hint em{ color:var(--hyper); font-style:normal; } @media (max-width:700px){ .tess-hud,.tess-hint{ font-size:8.5px; } } /* corner brackets — HUD framing */ .brackets::before,.brackets::after{ content:''; position:absolute; width:22px; height:22px; border:1px solid var(--line3); } .brackets::before{ top:0; left:0; border-right:0; border-bottom:0; } .brackets::after{ bottom:0; right:0; border-left:0; border-top:0; } /* ============================================================ TRUST STRIP ============================================================ */ .trust-strip{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .trust-pill{ font-family:var(--mono); font-size:11.5px; color:var(--ice); border:1px solid var(--line); padding:10px 17px; border-radius:24px; display:flex; align-items:center; gap:8px; background:rgba(13,20,36,.5); transition:border-color .25s, transform .25s; } .trust-pill:hover{ border-color:rgba(79,216,234,.45); transform:translateY(-2px); } .trust-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); } /* ============================================================ ECOSYSTEM — 8 cells of the tesseract ============================================================ */ .eco-layout{ display:grid; grid-template-columns:1fr 1.05fr; gap:var(--s6); align-items:center; } .eco-cells{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .eco-cell{ display:flex; gap:12px; align-items:flex-start; padding:15px 16px; cursor:pointer; text-align:left; border-radius:var(--r-md); border:1px solid var(--line); background:var(--deep); color:var(--white); transition:border-color .25s, background .25s, transform .25s var(--ease); } .eco-cell:hover,.eco-cell.active{ border-color:var(--cell-color,var(--cyan)); background:var(--panel); transform:translateY(-3px); } .eco-cell .ci{ width:30px; height:30px; flex:none; border-radius:9px; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--cell-color,var(--cyan)); } .eco-cell .ct{ display:block; font-family:var(--display); font-size:13px; font-weight:600; } .eco-cell .cd{ display:block; font-size:11px; color:var(--fog); margin-top:2px; line-height:1.45; } .eco-stage{ position:relative; aspect-ratio:1/1; max-width:520px; margin:0 auto; width:100%; } #ecoCanvas{ width:100%; height:100%; } .eco-caption{ position:absolute; left:50%; bottom:4px; transform:translateX(-50%); font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--fog); text-align:center; white-space:nowrap; } .eco-caption b{ color:var(--cyan); font-weight:500; } @media (max-width:1000px){ .eco-layout{ grid-template-columns:1fr; gap:var(--s5); } .eco-stage{ order:-1; max-width:400px; } } @media (max-width:520px){ .eco-cells{ grid-template-columns:1fr; } } /* ============================================================ GENERIC GRIDS + CARDS ============================================================ */ .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .card{ padding:24px 22px; } .card-ic{ width:42px; height:42px; border-radius:12px; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--cyan); margin-bottom:16px; } .card h3{ font-family:var(--display); font-size:15.5px; font-weight:600; margin-bottom:8px; } .card p{ font-size:12.8px; color:var(--fog); line-height:1.55; } /* attack path reveal */ .attack-card{ cursor:pointer; } .attack-card .chev{ position:absolute; top:22px; right:20px; color:var(--fog); transition:transform .3s var(--ease), color .25s; } .attack-card.open .chev{ transform:rotate(180deg); color:var(--cyan); } .attack-path{ margin-top:0; max-height:0; overflow:hidden; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-family:var(--mono); font-size:9.5px; color:var(--cyan); transition:max-height .45s var(--ease), margin-top .45s var(--ease), padding-top .45s var(--ease); border-top:1px solid transparent; } .attack-card.open .attack-path{ max-height:200px; margin-top:14px; padding-top:14px; border-top-color:var(--line); } .attack-path .sep{ color:var(--fog); } .attack-path .stage{ opacity:.25; transition:opacity .35s, text-shadow .35s; } .attack-path .stage.lit{ opacity:1; text-shadow:0 0 9px rgba(79,216,234,.6); } .attack-telemetry{ font-family:var(--mono); font-size:9.5px; color:var(--fog); min-height:0; overflow:hidden; transition:min-height .4s, margin-top .4s; } .attack-card.open .attack-telemetry{ min-height:15px; margin-top:9px; } .attack-telemetry .tok{ color:var(--ok); } /* ============================================================ DEFENSIVE / TERMINAL ============================================================ */ .soc-grid{ display:grid; grid-template-columns:1fr 1.18fr; gap:var(--s4); align-items:start; } .soc-list-wrap{ display:flex; flex-direction:column; gap:14px; } .soc-item{ display:flex; gap:14px; align-items:flex-start; padding:15px 16px; border-radius:var(--r-md); border:1px solid transparent; transition:border-color .25s, background .25s; } .soc-item:hover{ border-color:var(--line); background:var(--deep); } .soc-ic{ width:36px; height:36px; border-radius:10px; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--cyan); flex:none; } .soc-item h4{ font-family:var(--display); font-size:14.5px; font-weight:600; margin-bottom:4px; } .soc-item p{ font-size:12.5px; color:var(--fog); } .terminal,.soc-panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5); } .term-bar,.soc-bar{ display:flex; align-items:center; gap:8px; padding:12px 17px; border-bottom:1px solid var(--line); background:var(--panel2); } .dotb{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.14); } .term-title,.soc-bar .lbl,.term-lbl{ font-family:var(--mono); font-size:10.5px; color:var(--fog); margin-left:6px; } .term-live,.soc-bar .live{ margin-left:auto; font-family:var(--mono); font-size:9.5px; color:var(--crit); display:flex; align-items:center; gap:5px; } .term-live::before,.soc-bar .live::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--crit); animation:pulse 1.4s infinite; } .term-body{ font-family:var(--mono); font-size:11.5px; line-height:1.85; padding:16px 17px; height:214px; overflow:hidden; color:var(--ice); } .term-body .tl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .term-body .ts{ color:var(--fog); } .term-body .tok{ color:var(--ok); } .term-body .tcrit{ color:var(--crit); } .term-body .twarn{ color:var(--warn); } .term-body .tcy{ color:var(--cyan); } .term-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); } .term-stat{ padding:12px 14px; border-right:1px solid var(--line); } .term-stat:last-child{ border-right:none; } .ts-lbl{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.4px; color:var(--fog); margin-bottom:4px; } .ts-val{ font-family:var(--hud); font-size:17px; font-weight:700; color:var(--cyan); } .ts-val.crit{ color:var(--crit); } .ts-val.ok{ color:var(--ok); font-size:12px; letter-spacing:.5px; } .alert-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 17px; border-bottom:1px solid var(--line); transition:background .2s; } .alert-row:last-child{ border-bottom:none; } .alert-row:hover{ background:var(--panel2); } .alert-left{ display:flex; align-items:center; gap:12px; min-width:0; } .sev{ font-family:var(--mono); font-size:8.5px; letter-spacing:1px; padding:4px 8px; border-radius:5px; font-weight:600; flex:none; } .sev-crit{ background:rgba(255,90,110,.14); color:var(--crit); } .sev-high{ background:rgba(245,180,78,.14); color:var(--warn); } .sev-med{ background:rgba(79,216,234,.13); color:var(--cyan); } .alert-t{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .alert-time{ font-family:var(--mono); font-size:10.5px; color:var(--fog); flex:none; } @media (max-width:900px){ .soc-grid{ grid-template-columns:1fr; } /* Grid items default to min-width:auto, so an unshrinkable child (the terminal's nowrap log lines) widens the track past the viewport. With overflow-x hidden on body that clips content instead of scrolling it, so the track has to be allowed to shrink. */ .soc-grid > *{ min-width:0; } .soc-item{ min-width:0; } .soc-item p,.soc-item h4{ min-width:0; overflow-wrap:anywhere; } } /* ============================================================ AI — THE NEW ATTACK SURFACE (signature section) Two planes: the traditional environment, and the AI layer that plugs into it. Connectors are MEASURED from the live DOM, so the diagram survives every breakpoint instead of being hand-placed. The flow animation is pure CSS (stroke-dashoffset) and is paused whenever the section is off-screen — no rAF loop here at all. ============================================================ */ .ais-intro{ display:grid; grid-template-columns:1.25fr .75fr; gap:var(--s6); align-items:end; margin-bottom:var(--s6); } .ais-metrics{ display:flex; gap:var(--s4); flex-wrap:wrap; } .ais-metric .m-v{ font-family:var(--hud); font-size:25px; font-weight:700; line-height:1; } .ais-metric .m-l{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--fog); margin-top:7px; } .ais-metric.trad .m-v{ color:var(--ice); } .ais-metric.ai .m-v{ background:linear-gradient(120deg,var(--cyan),var(--hyper)); -webkit-background-clip:text; background-clip:text; color:transparent; } .ais-metric.risk .m-v{ color:var(--warn); } .ais-stage{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg, rgba(13,20,36,.62), rgba(6,9,17,.62)); padding:var(--s5) var(--s4) var(--s4); overflow:hidden; } .ais-stage::before{ /* faint scan sweep — reads as "surface being mapped" */ content:''; position:absolute; left:0; right:0; top:0; height:150px; pointer-events:none; opacity:0; background:linear-gradient(180deg, rgba(79,216,234,.10), transparent); } .ais-stage.on::before{ animation:aisScan 7s var(--ease) infinite; } @keyframes aisScan{ 0%{ opacity:0; transform:translateY(-40%); } 12%{ opacity:1; } 60%,100%{ opacity:0; transform:translateY(420%); } } .ais-links{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible; } .ais-link{ fill:none; stroke:rgba(140,165,225,.5); stroke-width:1.2; } /* the cross-plane links carry the whole argument, so they read loudest */ .ais-link.cross{ stroke:rgba(124,92,250,.75); stroke-width:1.4; } .ais-stage.on .ais-link.flow{ stroke-dasharray:5 8; animation:aisFlow 1.4s linear infinite; } @keyframes aisFlow{ to{ stroke-dashoffset:-13; } } .ais-link.hit{ stroke:var(--hyper); stroke-width:2.2; stroke-dasharray:none; animation:none; filter:drop-shadow(0 0 6px rgba(255,79,216,.7)); } .ais-plane{ position:relative; z-index:2; } .ais-plane-hd{ display:flex; align-items:center; gap:11px; margin-bottom:15px; } .ais-plane-hd .pt{ font-family:var(--mono); font-size:9.5px; letter-spacing:2px; } .ais-plane-hd .pr{ flex:1; height:1px; background:var(--line); } .ais-plane.ai .pt{ color:var(--hyper); } .ais-plane.trad .pt{ color:var(--fog); } .ais-plane-hd .pc{ font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--fog); } .ais-row{ display:flex; gap:22px; flex-wrap:wrap; } .ais-node{ position:relative; flex:1 1 0; min-width:104px; text-align:center; cursor:default; font-family:var(--mono); font-size:10px; letter-spacing:1.1px; line-height:1.35; padding:13px 8px; border-radius:11px; border:1px solid var(--line); background:var(--deep); color:var(--ice); transition:border-color .28s, background .28s, color .28s, transform .28s var(--ease), box-shadow .28s; } .ais-plane.ai .ais-node{ border-color:rgba(124,92,250,.28); background:linear-gradient(160deg, rgba(124,92,250,.09), rgba(13,20,36,.85)); } .ais-node .nn{ display:block; font-size:7.5px; letter-spacing:1.4px; color:var(--fog); margin-bottom:5px; } .ais-node.hit{ border-color:var(--hyper); color:var(--white); transform:translateY(-3px); box-shadow:0 0 24px rgba(255,79,216,.24); background:linear-gradient(160deg, rgba(255,79,216,.14), rgba(13,20,36,.9)); } .ais-node.hit .nn{ color:var(--hyper); } .ais-node.dim{ opacity:.32; } /* the join between the two planes */ .ais-bridge{ position:relative; z-index:2; height:104px; display:flex; align-items:center; justify-content:center; } .ais-bridge span{ font-family:var(--mono); font-size:8.5px; letter-spacing:2.2px; color:var(--fog); padding:5px 13px; border-radius:14px; border:1px dashed var(--line2); background:var(--void); } .ais-bridge b{ color:var(--hyper); font-weight:500; } /* the connectors are the desktop story; on mobile the joins are spelled out */ .ais-joins{ display:none; } /* risk chips */ .ais-risks{ margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line); position:relative; z-index:2; } .ais-risks-hd{ font-family:var(--mono); font-size:9.5px; letter-spacing:2px; color:var(--warn); margin-bottom:14px; } .ais-risk-row{ display:flex; flex-wrap:wrap; gap:8px; } .ais-risk{ font-family:var(--mono); font-size:10px; letter-spacing:.8px; padding:8px 14px; border-radius:18px; border:1px solid var(--line2); background:var(--deep); color:var(--ice); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all .25s var(--ease); } .ais-risk::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--warn); flex:none; } .ais-risk:hover,.ais-risk.on{ border-color:var(--hyper); color:var(--white); background:rgba(255,79,216,.10); transform:translateY(-2px); } .ais-risk.on::before{ background:var(--hyper); box-shadow:0 0 8px var(--hyper); } .ais-risk-hint{ font-size:11.5px; color:var(--fog); margin-top:13px; min-height:18px; } .ais-risk-hint b{ color:var(--ice); font-weight:500; } .ais-close{ display:grid; grid-template-columns:1fr auto; gap:var(--s4); align-items:center; margin-top:var(--s5); } .ais-close p{ font-family:var(--display); font-size:17px; font-weight:600; line-height:1.4; } .ais-close p em{ font-style:normal; color:var(--cyan); } .ai-vectors{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .vec-item{ padding:18px; } .vec-item .vt{ font-family:var(--display); font-size:13.5px; font-weight:600; margin-bottom:5px; } .vec-item .vd{ font-size:12px; color:var(--fog); line-height:1.5; } @media (max-width:1000px){ .ais-intro{ grid-template-columns:1fr; gap:var(--s4); align-items:start; } } @media (max-width:760px){ /* recomposed for mobile — not a shrunk desktop diagram. Connectors are dropped and the plug-in points are stated in words. */ .ais-links{ display:none; } .ais-row{ display:grid; grid-template-columns:1fr 1fr; gap:7px; } .ais-node{ min-width:0; text-align:left; padding:11px 12px; } .ais-bridge{ height:auto; padding:var(--s3) 0; } .ais-bridge span{ text-align:center; line-height:1.7; } .ais-joins{ display:block; font-style:normal; margin-top:9px; padding-top:9px; border-top:1px solid var(--line); color:var(--fog); letter-spacing:1.2px; line-height:2; } .ais-close{ grid-template-columns:1fr; } .ais-stage{ padding:var(--s4) var(--s3); } } /* ============================================================ GRC ============================================================ */ .grc-flow{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:var(--s4) 0 var(--s5); } .flow-chip{ font-family:var(--mono); font-size:11px; padding:9px 14px; border-radius:20px; background:var(--panel2); border:1px solid var(--line); color:var(--ice); transition:all .35s var(--ease); } .flow-chip.active{ background:rgba(79,216,234,.15); border-color:var(--cyan); color:var(--white); box-shadow:0 0 18px rgba(79,216,234,.25); transform:translateY(-2px); } .flow-sep{ color:var(--fog); } .wheel-outer{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); } .wheel-wrap{ position:relative; width:min(90vw,420px); aspect-ratio:1/1; } .wheel-svg{ position:absolute; inset:0; width:100%; height:100%; } #wheelRing{ position:absolute; inset:0; } .wheel-connector{ stroke:rgba(79,216,234,.55); stroke-width:1; } .wheel-pulse-dot{ fill:var(--cyan); filter:drop-shadow(0 0 6px var(--cyan)); } .wheel-node{ position:absolute; transform:translate(-50%,-50%); font-family:var(--mono); font-size:10px; letter-spacing:1px; padding:8px 13px; border-radius:20px; border:1px solid var(--line); background:var(--deep); color:var(--ice); white-space:nowrap; transition:all .35s var(--ease); } .wheel-node.on{ border-color:var(--cyan); color:var(--white); box-shadow:0 0 20px rgba(79,216,234,.28); } .wheel-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:132px; height:132px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(124,92,250,.4), rgba(8,12,24,.94) 70%); display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; border:1px solid var(--line2); box-shadow:0 0 48px rgba(79,216,234,.12); } .wheel-center-text{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--ice); line-height:1.6; } .wheel-footer{ font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--fog); text-align:center; } /* ============================================================ SECURITY BLUEPRINT WIZARD ============================================================ */ .bp-shell{ border:1px solid var(--line2); border-radius:var(--r-xl); background:linear-gradient(180deg,var(--deep),#060911); overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.5); } .bp-progress{ display:flex; align-items:center; gap:8px; padding:20px 26px; border-bottom:1px solid var(--line); background:rgba(18,27,48,.4); } .bp-step{ display:flex; align-items:center; gap:9px; flex:none; opacity:.42; transition:opacity .35s; } .bp-step.active,.bp-step.done{ opacity:1; } .bp-dot{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; color:var(--fog); transition:all .35s; } .bp-step.active .bp-dot{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 16px rgba(79,216,234,.3); } .bp-step.done .bp-dot{ background:var(--cyan); border-color:var(--cyan); color:var(--void); } .bp-steplabel{ font-family:var(--mono); font-size:10.5px; letter-spacing:1.4px; color:var(--ice); } .bp-pline{ flex:1; height:1px; background:var(--line2); min-width:14px; } .bp-pline i{ display:block; height:100%; width:0%; background:var(--cyan); transition:width .6s var(--ease); } .bp-body{ padding:var(--s5) 26px; } .bp-panel{ display:none; } .bp-panel.active{ display:block; animation:bpIn .45s var(--ease); } @keyframes bpIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } .bp-q{ font-family:var(--display); font-size:20px; font-weight:600; margin-bottom:var(--s4); } .bp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; } .bp-card{ position:relative; text-align:left; padding:17px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--deep); color:var(--white); transition:all .25s var(--ease); } .bp-card:hover{ border-color:var(--line3); transform:translateY(-2px); } .bp-card.selected{ border-color:var(--cyan); background:linear-gradient(120deg, rgba(79,216,234,.08), rgba(124,92,250,.08)); box-shadow:0 0 22px rgba(79,216,234,.16); } .bpc-check{ position:absolute; top:12px; right:12px; width:19px; height:19px; border-radius:50%; background:var(--cyan); color:var(--void); font-size:11px; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.5); transition:all .25s var(--ease); } .bp-card.selected .bpc-check{ opacity:1; transform:scale(1); } .bpc-ic{ color:var(--cyan); margin-bottom:11px; display:flex; } .bpc-t{ font-family:var(--display); font-size:13.5px; font-weight:600; } .bpc-d{ font-size:11.5px; color:var(--fog); margin-top:4px; line-height:1.45; } .bp-surface-title{ font-family:var(--mono); font-size:9.5px; letter-spacing:2px; color:var(--cyan); margin-bottom:16px; } .bp-nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:var(--s5); } .bp-btn-next{ font-weight:600; font-size:13.5px; padding:12px 22px; border-radius:10px; background:linear-gradient(120deg,var(--cyan),var(--violet)); color:var(--void); border:none; transition:all .25s var(--ease); } .bp-btn-next:hover:not(:disabled){ box-shadow:0 10px 30px rgba(79,216,234,.3); transform:translateY(-2px); } .bp-btn-next:disabled{ opacity:.34; cursor:not-allowed; } .bp-btn-back{ font-size:13px; padding:11px 18px; border-radius:10px; background:transparent; border:1px solid var(--line2); color:var(--ice); transition:all .25s; } .bp-btn-back:hover{ border-color:var(--cyan); color:var(--white); } .bp-processing{ display:flex; flex-direction:column; align-items:center; gap:var(--s4); padding:var(--s6) 0; } .bp-proc-ring{ width:76px; height:76px; border-radius:50%; border:2px solid var(--line2); border-top-color:var(--cyan); border-right-color:var(--hyper); animation:spin 1s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .bp-proc-lines{ font-family:var(--mono); font-size:11.5px; color:var(--fog); line-height:2; text-align:center; min-height:120px; } .bp-proc-lines .ok{ color:var(--ok); } .bp-result-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3); flex-wrap:wrap; } .bp-result-id{ font-family:var(--mono); font-size:10px; letter-spacing:1.6px; color:var(--fog); margin-bottom:8px; } .bp-result-id b{ color:var(--cyan); font-weight:500; } .bp-result-title{ font-family:var(--display); font-size:24px; font-weight:700; } .bp-profile-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .bp-profile-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.9px; padding:4px 10px; border-radius:12px; border:1px solid var(--line2); color:var(--ice); } .bp-disclaimer{ font-size:11.5px; color:var(--fog); font-style:italic; margin-bottom:var(--s3); } .bp-rec-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; } .bp-rec-card{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep); padding:18px; animation:bpIn .5s var(--ease) backwards; } .bp-rec-cat{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--cyan); margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line); } .bp-rec-card ul li{ font-size:12.5px; color:var(--ice); padding:5px 0 5px 16px; position:relative; } .bp-rec-card ul li::before{ content:''; position:absolute; left:2px; top:12px; width:5px; height:5px; border-radius:50%; background:var(--cyan); } .bp-priority{ margin-top:var(--s5); border-top:1px solid var(--line); padding-top:var(--s5); } .bp-priority-row{ display:flex; align-items:center; gap:14px; margin-bottom:13px; } .bp-priority-label{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px; color:var(--fog); width:130px; flex:none; } .bp-priority-track{ flex:1; height:5px; border-radius:3px; background:var(--panel2); overflow:hidden; } .bp-priority-fill{ height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width 1.1s var(--ease); } .bp-priority-val{ font-family:var(--mono); font-size:9.5px; letter-spacing:1px; width:78px; text-align:right; flex:none; } .bp-priority-val.CRITICAL{ color:var(--crit); } .bp-priority-val.HIGH{ color:var(--warn); } .bp-priority-val.MEDIUM{ color:var(--cyan); } .bp-priority-val.LOW{ color:var(--fog); } .bp-arch{ margin-top:var(--s5); border:1px solid var(--line); border-radius:var(--r-md); padding:24px; text-align:center; background:var(--deep); } .bp-arch-ring{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .bp-arch-chip{ font-family:var(--mono); font-size:10px; letter-spacing:1.2px; padding:7px 13px; border-radius:16px; border:1px solid var(--line2); color:var(--ice); } .bp-arch-chip.verb{ border-color:rgba(124,92,250,.45); color:#B79CFF; } .bp-final-msg{ margin-top:var(--s5); text-align:center; padding:var(--s5) var(--s3); border-top:1px solid var(--line); } .bp-final-msg h4{ font-family:var(--display); font-size:21px; font-weight:700; margin-bottom:10px; } .bp-final-msg p{ color:var(--fog); font-size:14px; max-width:620px; margin:0 auto var(--s4); } .bp-final-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } /* --- layout: questionnaire left, live profile right --- */ .bp-main{ display:grid; grid-template-columns:1fr; } .bp-main.with-profile{ grid-template-columns:1fr minmax(268px,300px); } .bp-profile{ display:none; border-left:1px solid var(--line); background:rgba(18,27,48,.3); padding:var(--s5) 22px; } .bp-main.with-profile .bp-profile{ display:block; } .bp-profile-inner{ position:sticky; top:96px; } .bp-pf-hd{ font-family:var(--mono); font-size:9.5px; letter-spacing:2px; color:var(--cyan); margin-bottom:16px; display:flex; align-items:center; gap:8px; } .bp-pf-hd::after{ content:''; flex:1; height:1px; background:var(--line); } .bp-pf-viz{ position:relative; aspect-ratio:1/1; max-width:168px; margin:0 auto var(--s3); } #bpSurfaceCanvas{ position:absolute; inset:0; width:100%; height:100%; } .bp-pf-group{ margin-bottom:var(--s3); } .bp-pf-label{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.5px; color:var(--fog); margin-bottom:8px; } .bp-pf-chips{ display:flex; flex-wrap:wrap; gap:5px; } .bp-pf-chip{ font-family:var(--mono); font-size:8.5px; letter-spacing:.9px; padding:4px 9px; border-radius:11px; border:1px solid rgba(79,216,234,.34); color:var(--cyan); background:rgba(79,216,234,.07); animation:bpIn .3s var(--ease); } .bp-pf-chip.obj{ border-color:rgba(124,92,250,.4); color:#B79CFF; background:rgba(124,92,250,.07); } .bp-pf-empty{ font-family:var(--mono); font-size:8.5px; letter-spacing:1px; color:var(--line3); } .bp-meter{ display:flex; gap:3px; margin-bottom:6px; } .bp-meter i{ flex:1; height:7px; border-radius:2px; background:var(--panel2); border:1px solid var(--line); transition:background .35s var(--ease), border-color .35s, box-shadow .35s; } .bp-meter i.on{ background:linear-gradient(180deg,var(--cyan),var(--violet)); border-color:transparent; box-shadow:0 0 8px rgba(79,216,234,.35); } .bp-meter-val{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.2px; color:var(--fog); } /* --- lead gate: the last step of generating the document --- */ .bp-gate{ max-width:520px; } .bp-gate-eyebrow{ font-family:var(--mono); font-size:9.5px; letter-spacing:2px; color:var(--cyan); margin-bottom:14px; } .bp-gate h4{ font-family:var(--display); font-size:23px; font-weight:700; margin-bottom:10px; } .bp-gate > p{ font-size:13.5px; color:var(--fog); margin-bottom:var(--s4); } .bp-gate-ready{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:1.4px; color:var(--ok); margin-bottom:var(--s4); padding:11px 14px; border:1px solid rgba(63,224,176,.3); border-radius:var(--r-md); background:rgba(63,224,176,.05); } .bp-form{ display:flex; flex-direction:column; gap:15px; } .bp-field{ display:flex; flex-direction:column; gap:6px; } .bp-field label{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--fog); } .bp-field input{ font-family:var(--body); font-size:14px; padding:12px 14px; border-radius:10px; min-height:46px; background:var(--void); border:1px solid var(--line2); color:var(--white); transition:border-color .2s; } .bp-field input:focus{ outline:none; border-color:var(--cyan); } .bp-field input::placeholder{ color:var(--line3); } .bp-field .err{ font-size:11.5px; color:var(--crit); min-height:0; overflow:hidden; transition:min-height .2s; } .bp-field.invalid input{ border-color:var(--crit); } .bp-field.invalid .err{ min-height:16px; } .bp-form-note{ font-size:11.5px; color:var(--fog); } .bp-submit{ align-self:flex-start; } .bp-submit[data-busy]{ opacity:.6; pointer-events:none; } /* --- result --- */ .bp-sub-hd{ font-family:var(--display); font-size:16px; font-weight:600; margin-bottom:4px; } .bp-steps{ display:flex; flex-direction:column; } .bp-step-row{ display:flex; gap:16px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line); } .bp-step-row:last-child{ border-bottom:none; } .bp-step-row .sn{ font-family:var(--mono); font-size:10.5px; letter-spacing:1px; color:var(--cyan); width:28px; flex:none; } .bp-step-row .st{ font-size:13.5px; color:var(--ice); } @media (max-width:1080px){ .bp-main.with-profile{ grid-template-columns:1fr; } .bp-profile{ border-left:none; border-top:1px solid var(--line); } .bp-profile-inner{ position:static; } .bp-pf-viz{ display:none; } .bp-profile-inner{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) var(--s4); } .bp-pf-hd{ grid-column:1/-1; margin-bottom:4px; } } @media (max-width:820px){ .bp-progress{ overflow-x:auto; } } @media (max-width:560px){ .bp-profile-inner{ grid-template-columns:1fr; } } /* ============================================================ ECOSYSTEM SECTIONS (University / Academy / Corporate / Labs) ============================================================ */ .eco-section{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .eco-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:2px; padding:6px 13px; border-radius:20px; margin-bottom:18px; } .badge-university{ color:#B79CFF; border:1px solid rgba(124,92,250,.4); } .badge-academy{ color:var(--cyan); border:1px solid rgba(79,216,234,.4); } .badge-corp{ color:#8FD9C4; border:1px solid rgba(79,216,180,.35); } .badge-labs{ color:var(--warn); border:1px solid rgba(245,180,78,.35); } .split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center; } .pillar-list{ display:flex; flex-direction:column; gap:15px; margin:var(--s4) 0 var(--s4); } .pillar-item{ display:flex; gap:13px; align-items:flex-start; } .pillar-item .pn{ font-family:var(--mono); font-size:10.5px; color:var(--cyan); margin-top:3px; flex:none; } .pillar-item h5{ font-family:var(--display); font-size:14.5px; font-weight:600; margin-bottom:3px; } .pillar-item p{ font-size:12.5px; color:var(--fog); } /* stacked depth cards — W-axis parallax */ .depth-wrap{ position:relative; } .depth-card{ position:absolute; inset:0; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--deep); } .depth-2{ transform:translate(22px,22px) scale(.96); opacity:.32; } .depth-1{ transform:translate(11px,11px) scale(.98); opacity:.55; } .uni-visual{ position:relative; background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); } .uni-screen-body{ padding:24px; } .uni-screen-title{ font-family:var(--display); font-size:18px; font-weight:700; margin-bottom:3px; } .uni-screen-sub{ font-size:11.5px; color:var(--fog); margin-bottom:var(--s4); } .uni-progress-lbl{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px; color:var(--fog); margin-bottom:7px; } .uni-progress-track{ height:5px; border-radius:3px; background:var(--panel2); overflow:hidden; margin-bottom:var(--s4); } .uni-progress-fill{ height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,#B79CFF,var(--cyan)); transition:width 1.4s var(--ease); } .uni-modules{ display:flex; flex-direction:column; gap:8px; margin-bottom:var(--s3); } .uni-mod{ display:flex; align-items:center; gap:10px; font-size:12.5px; padding:10px 13px; border-radius:10px; border:1px solid var(--line); } .uni-mod .mk{ font-family:var(--mono); font-size:11px; } .uni-mod.done{ color:var(--fog); } .uni-mod.done .mk{ color:var(--ok); } .uni-mod.active{ color:var(--white); border-color:rgba(79,216,234,.4); background:rgba(79,216,234,.06); } .uni-mod.active .mk{ color:var(--cyan); } .uni-mod.todo{ color:var(--fog); opacity:.65; } .uni-lab-status{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; letter-spacing:1.4px; padding-top:14px; border-top:1px solid var(--line); } .uni-lab-status .ll{ color:var(--fog); } .uni-lab-status .lv{ color:var(--ok); } .course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .course-card{ overflow:hidden; } .course-top{ height:4px; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--hyper)); } .course-body{ padding:22px; } .course-level{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--cyan); margin-bottom:10px; } .course-card h3{ font-family:var(--display); font-size:15.5px; font-weight:600; margin-bottom:8px; } .course-card p{ font-size:12.5px; color:var(--fog); margin-bottom:16px; } .course-meta{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--fog); border-top:1px solid var(--line); padding-top:13px; } .corp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; } .corp-item{ padding:19px; } .corp-item .ic{ color:#8FD9C4; margin-bottom:12px; display:flex; } .corp-item h4{ font-family:var(--display); font-size:13.5px; font-weight:600; margin-bottom:6px; } .corp-item p{ font-size:11.8px; color:var(--fog); line-height:1.5; } .corp-dash{ margin-top:var(--s5); border:1px solid var(--line); border-radius:var(--r-md); padding:24px; background:var(--deep); } .corp-metric{ margin-bottom:16px; } .corp-metric:last-child{ margin-bottom:0; } .corp-metric-lbl{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:7px; } .corp-metric-lbl b{ font-weight:500; } .corp-metric-lbl .pctval{ font-family:var(--mono); color:var(--cyan); } .corp-metric-track{ height:5px; border-radius:3px; background:var(--panel2); overflow:hidden; } .corp-metric-fill{ height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,#8FD9C4,var(--cyan)); transition:width 1.5s var(--ease); } .labs-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:var(--s5); } .labs-tag{ font-family:var(--mono); font-size:10.5px; padding:8px 15px; border-radius:20px; border:1px solid var(--line); color:var(--fog); transition:all .25s; } .labs-tag:hover{ border-color:var(--warn); color:var(--warn); } .research-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .research-card{ position:relative; overflow:hidden; } .preview-tag{ position:absolute; top:12px; right:12px; z-index:4; font-family:var(--mono); font-size:8px; letter-spacing:1.2px; color:var(--warn); border:1px solid rgba(245,180,78,.4); padding:3px 8px; border-radius:10px; background:rgba(4,6,12,.8); } .term-buffer{ font-family:var(--mono); font-size:10px; line-height:1.9; padding:14px 16px; height:104px; overflow:hidden; color:var(--fog); border-bottom:1px solid var(--line); } .term-buffer .tok{ color:var(--ok); } .term-buffer .tcy{ color:var(--cyan); } .term-buffer .twarn{ color:var(--warn); } .research-content{ padding:20px; } .research-cat{ font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--warn); margin-bottom:11px; } .research-card h4{ font-family:var(--display); font-size:14.5px; font-weight:600; margin-bottom:9px; line-height:1.35; } .rdesc{ font-size:12px; color:var(--fog); margin-bottom:16px; line-height:1.5; } .adv-sev{ font-family:var(--mono); font-size:8.5px; letter-spacing:1px; padding:3px 7px; border-radius:4px; } .research-meta-row{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; letter-spacing:1px; color:var(--fog); border-top:1px solid var(--line); padding-top:12px; } .research-cta{ color:var(--cyan); } .research-disclaimer{ font-size:11.5px; color:var(--fog); font-style:italic; text-align:center; margin-top:var(--s4); } .future-card{ display:flex; align-items:center; gap:var(--s3); padding:22px 24px; border-radius:var(--r-md); border:1px dashed var(--line2); background:linear-gradient(120deg, rgba(124,92,250,.06), rgba(255,79,216,.04)); } .future-card .fic{ width:44px; height:44px; flex:none; border-radius:12px; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--hyper); } .future-card h4{ font-family:var(--display); font-size:15px; font-weight:600; margin-bottom:4px; } .future-card p{ font-size:12.5px; color:var(--fog); } .future-tag{ margin-left:auto; flex:none; font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--hyper); border:1px solid rgba(255,79,216,.4); padding:5px 11px; border-radius:14px; } /* ============================================================ INDUSTRIES / PROCESS / INSIGHTS / CTA ============================================================ */ .ind-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s4); } .ind-tab{ font-family:var(--mono); font-size:11.5px; letter-spacing:1px; padding:10px 18px; border-radius:22px; border:1px solid var(--line); background:transparent; color:var(--fog); cursor:pointer; transition:all .25s var(--ease); } .ind-tab:hover{ color:var(--ice); border-color:var(--line3); } .ind-tab.active{ background:rgba(79,216,234,.12); border-color:var(--cyan); color:var(--white); } .ind-panel{ display:none; grid-template-columns:repeat(3,1fr); gap:var(--s4); padding:var(--s4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep); } .ind-panel.active{ display:grid; animation:bpIn .4s var(--ease); } .ind-col h5{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; color:var(--cyan); margin-bottom:11px; } .ind-col p{ font-size:13px; color:var(--fog); line-height:1.6; } .ind-col ul li{ font-size:12.5px; color:var(--ice); padding:5px 0 5px 15px; position:relative; } .ind-col ul li::before{ content:''; position:absolute; left:2px; top:12px; width:4px; height:4px; border-radius:50%; background:var(--cyan); } @media (max-width:820px){ .ind-panel.active{ grid-template-columns:1fr; } } .steps-wrap{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s3); } .steps-line{ position:absolute; top:19px; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--line3),var(--line3),transparent); } .step-item{ text-align:center; position:relative; z-index:2; } .step-dot{ width:38px; height:38px; margin:0 auto 14px; border-radius:50%; border:1px solid var(--line2); background:var(--void); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10.5px; color:var(--cyan); transition:all .35s var(--ease); } .step-item:hover .step-dot{ border-color:var(--cyan); box-shadow:0 0 20px rgba(79,216,234,.3); transform:scale(1.08); } .step-item h5{ font-family:var(--display); font-size:14px; font-weight:600; margin-bottom:5px; } .step-item p{ font-size:11.8px; color:var(--fog); } @media (max-width:760px){ .steps-wrap{ grid-template-columns:1fr 1fr; gap:var(--s4); } .steps-line{ display:none; } } .honesty-card{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:28px; border-radius:var(--r-md); border:1px dashed var(--line2); background:var(--deep); } .honesty-card p{ font-size:14px; color:var(--fog); max-width:720px; } .engage-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .engage-list span{ font-family:var(--mono); font-size:10px; letter-spacing:.9px; padding:7px 13px; border-radius:16px; border:1px solid var(--line); color:var(--ice); } /* --- cloud: the headline says "every layer", so show the layers --- */ .cloud-split{ display:grid; grid-template-columns:.95fr 1.05fr; gap:var(--s6); align-items:center; } .layerstack{ display:flex; flex-direction:column; gap:7px; position:relative; } .layer{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep); transition:border-color .25s, transform .25s var(--ease), background .25s; } .layer:hover{ border-color:rgba(79,216,234,.45); background:var(--panel); transform:translateX(5px); } .layer .lz{ font-family:var(--mono); font-size:9px; letter-spacing:1.2px; color:var(--cyan); width:20px; flex:none; } .layer .ln{ font-family:var(--display); font-size:13.5px; font-weight:600; } .layer .ld{ font-size:11.5px; color:var(--fog); margin-top:2px; line-height:1.45; } .layer-cap{ font-family:var(--mono); font-size:9px; letter-spacing:1.6px; color:var(--fog); margin-bottom:12px; } @media (max-width:1000px){ .cloud-split{ grid-template-columns:1fr; gap:var(--s5); } } .insight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .insight-card{ padding:24px; display:flex; flex-direction:column; } .insight-cat{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--cyan); margin-bottom:14px; } .insight-card h4{ font-family:var(--display); font-size:15.5px; font-weight:600; margin-bottom:9px; } .insight-card p{ font-size:12.8px; color:var(--fog); line-height:1.55; margin-bottom:18px; } .insight-meta{ margin-top:auto; padding-top:13px; border-top:1px solid var(--line); } .insight-meta span{ font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--warn); } .ctaband{ position:relative; overflow:hidden; text-align:center; padding:var(--s8) var(--s4); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(120deg, rgba(79,216,234,.07), rgba(124,92,250,.09), rgba(255,79,216,.05)); } .ctaband h2{ font-family:var(--display); font-size:clamp(26px,4vw,42px); font-weight:700; letter-spacing:-1px; margin-bottom:14px; } .ctaband p{ color:var(--fog); font-size:15.5px; max-width:540px; margin:0 auto var(--s4); } .cta-row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; } /* ============================================================ FOOTER ============================================================ */ footer{ padding:var(--s7) 0 var(--s4); border-top:1px solid var(--line); background:linear-gradient(180deg,transparent,rgba(8,12,24,.7)); } .foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:var(--s4); margin-bottom:var(--s6); } .foot-brand p{ font-size:12.8px; color:var(--fog); margin:14px 0 18px; max-width:300px; line-height:1.6; } .foot-social{ display:flex; gap:9px; } .foot-social a{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10.5px; color:var(--fog); transition:all .25s; } .foot-social a:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); } .foot-col h5{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; color:var(--cyan); margin-bottom:16px; } .foot-col ul li{ margin-bottom:10px; } .foot-col ul li a{ font-size:12.8px; color:var(--fog); transition:color .2s; } .foot-col ul li a:hover{ color:var(--white); } .foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:var(--s3); flex-wrap:wrap; padding-top:var(--s4); border-top:1px solid var(--line); font-size:12px; color:var(--fog); } .foot-legal{ display:flex; gap:var(--s3); } .foot-legal a:hover{ color:var(--white); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ nav.links{ display:none; } .burger{ display:flex; } header .cta-btn{ display:none; } .grid-4,.corp-grid{ grid-template-columns:repeat(2,1fr); } .grid-3,.course-grid,.research-grid,.insight-grid,.ai-vectors{ grid-template-columns:repeat(2,1fr); } .split-grid{ grid-template-columns:1fr; gap:var(--s5); } .foot-grid{ grid-template-columns:1fr 1fr 1fr; } .foot-brand{ grid-column:1/-1; } } @media (max-width:680px){ :root{ --s7:56px; --s8:68px; } .wrap{ padding:0 var(--s3); } .grid-4,.grid-3,.grid-2,.corp-grid,.course-grid,.research-grid,.insight-grid,.ai-vectors{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr 1fr; } .term-stats{ grid-template-columns:1fr 1fr; } .term-stat:nth-child(2){ border-right:none; } .term-stat:nth-child(-n+2){ border-bottom:1px solid var(--line); } .bp-body{ padding:var(--s4) var(--s3); } .depth-card{ display:none; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .reveal,.stagger > *{ opacity:1 !important; transform:none !important; } .scanlines,.field-cursor{ display:none; } } /* "All Offensive Security" tail link in the Services mega menu. Declared in every page bundle because the header renders on every page. */ .mega-link-all{ color:var(--cyan) !important; font-family:var(--mono); font-size:11px !important; letter-spacing:1.2px; margin-top:6px; border-top:1px solid var(--line); padding-top:12px !important; } /* ============================================================ FINAL POLISH — footer, socials, mega-menu descriptions ============================================================ */ /* Pages that genuinely do not exist yet. A dead link that looks live is worse than plainly-unavailable text, so these are not anchors at all until there is somewhere real to point them. */ .foot-pending{ font-size:12.8px; color:var(--line3); cursor:default; border-bottom:1px dashed var(--line); padding-bottom:1px; } .foot-col ul li .foot-pending{ display:inline-block; } /* Social profiles: the component stays visually correct, but no invented URLs. Rendered as marks rather than links until real profile URLs are supplied. */ .foot-social-ph{ width:34px; height:34px; border-radius:10px; border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10.5px; color:var(--line3); cursor:default; } /* One-line orientation under each mega-menu column title. */ .mega-col-desc{ display:block; font-family:var(--body); font-size:11px; letter-spacing:0; color:var(--fog); text-transform:none; margin-top:5px; font-weight:400; } .mega-col-title{ line-height:1.25; } /* Focus visibility on the new interactive surfaces. */ .tform-topic:focus-visible,.tpanel-close:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; } .foot-pending:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; } /* The future-product card is a flex row with a pinned tag; below ~380px the tag no longer fits beside the copy and pushes past the viewport. Let the row wrap instead of forcing it to stay on one line. */ @media (max-width:420px){ .future-card{ flex-wrap:wrap; } .future-tag{ margin-left:0; } .future-card .fic{ margin-bottom:4px; } } /* ============================================================ ADAPTIVE VISUAL COST — TOUCH / SMALL VIEWPORTS The visual language is preserved; only the GPU cost is scaled. A 140px blur radius is one of the most expensive things a mobile GPU can be asked to composite, and at phone size the difference between 140px and 48px is not perceptible. ============================================================ */ @media (hover:none), (max-width:820px){ .hero-glow, .field-blob, .glow, .bp-glow{ filter:blur(48px) !important; } /* fewer simultaneous large shadows */ .spot:hover{ box-shadow:none; } /* backdrop-filter forces an extra compositing pass per element */ .nav, header, .mega, .mobile-nav{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } } /* Anything still animating forever should stop when the tab is not visible. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; } } /* ============================================================ HOMEPAGE — PARTNER ECOSYSTEM BAND A compact credibility band, deliberately lighter than the University / Academy / Labs sections. Uses the existing .reveal observer for entrance, so it adds no JavaScript. Partner logos are third-party brand assets: never recoloured, cropped or filtered. Each sits on a neutral plate. ============================================================ */ .pband{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-xl); background:linear-gradient(150deg, rgba(18,27,48,.6), rgba(6,9,17,.88)); padding:var(--s5); } .pband::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: linear-gradient(rgba(79,216,234,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(79,216,234,.05) 1px, transparent 1px); background-size:54px 54px; mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 72%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 72%); } .pband > *{ position:relative; z-index:1; } .pband-head{ text-align:center; max-width:720px; margin:0 auto var(--s5); } .pband-h{ font-family:var(--display); font-size:clamp(22px,2.8vw,31px); font-weight:700; letter-spacing:-.8px; line-height:1.2; margin:14px 0 12px; text-wrap:balance; } .pband-p{ font-size:14.5px; color:var(--fog); line-height:1.75; } /* --- logo strip --- */ .pband-logos{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:var(--s5); } .pband-logo{ position:relative; height:76px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line2); display:grid; place-items:center; padding:13px 15px; overflow:hidden; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; /* staggered entrance, driven by the existing .reveal class */ opacity:0; transform:translateY(14px); } .reveal.in .pband-logo, .reveal.visible .pband-logo{ opacity:1; transform:none; transition:opacity .55s var(--ease) var(--d,0s), transform .55s var(--ease) var(--d,0s), border-color .3s, box-shadow .3s; } .pband-logo.dark{ background:linear-gradient(180deg,#111a2e,#080c18); } .pband-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; } .pband-logo:hover, .pband-logo:focus-visible{ transform:translateY(-4px); border-color:rgba(79,216,234,.55); box-shadow:0 0 26px rgba(79,216,234,.22); } /* Name is present in the DOM for assistive tech, revealed on hover/tap. */ .pband-logo .nm{ position:absolute; left:0; right:0; bottom:0; padding:5px 6px; font-family:var(--mono); font-size:6.5px; letter-spacing:.9px; text-align:center; color:#0b0f1a; background:rgba(255,255,255,.9); opacity:0; transform:translateY(100%); transition:opacity .28s, transform .28s var(--ease); } .pband-logo.dark .nm{ color:var(--ice); background:rgba(8,12,24,.92); } .pband-logo:hover .nm, .pband-logo:focus-visible .nm{ opacity:1; transform:none; } /* --- stat + CTA --- */ .pband-foot{ display:flex; align-items:center; justify-content:center; gap:var(--s5); flex-wrap:wrap; text-align:center; } .pband-stat{ display:flex; flex-direction:column; gap:4px; } .pband-stat b{ font-family:var(--display); font-size:clamp(28px,3.6vw,42px); font-weight:900; letter-spacing:-1.4px; background:linear-gradient(96deg, var(--cyan), var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; } .pband-stat span{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.8px; color:var(--fog); } .pband-cats{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; } .pband-cats li{ list-style:none; font-family:var(--mono); font-size:8px; letter-spacing:1.2px; color:var(--fog); border:1px solid var(--line2); border-radius:8px; padding:6px 10px; } .pband-cta{ display:flex; flex-direction:column; align-items:center; gap:9px; } .pband-note{ font-family:var(--mono); font-size:8px; letter-spacing:1.2px; color:var(--fog); line-height:1.7; } @media (max-width:1000px){ .pband-logos{ grid-template-columns:repeat(3,1fr); } } @media (max-width:560px){ /* Keep the band a band on mobile: six logos in two columns is three rows, so the surrounding spacing has to come down or it reads as a full section. */ .pband{ padding:var(--s4) var(--s3); } .pband-head{ margin-bottom:var(--s4); } .pband-h{ font-size:21px; margin:10px 0 9px; } .pband-p{ font-size:13.5px; line-height:1.65; } .pband-logos{ grid-template-columns:repeat(2,1fr); gap:7px; margin-bottom:var(--s4); } .pband-logo{ height:54px; padding:8px 10px; } .pband-foot{ gap:var(--s3); } .pband-cats li{ font-size:7.5px; padding:5px 8px; } .pband-cta{ gap:7px; } .pband-cta .cta-btn{ width:100%; } .pband-note{ font-size:7.5px; } } @media (hover:none){ .pband-logo .nm{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .pband-logo{ opacity:1; transform:none; } .pband-logo:hover{ transform:none; } } /* ============================================================ GLOBAL FOOTER — OFFICES, SOCIAL, COPYRIGHT Additive only. The existing .foot-grid, .foot-col and .foot-bottom rules are untouched. ============================================================ */ /* Slim two-up address band between the link grid and the legal row. Deliberately typographic rather than a card, so it reads as company information and never competes with the navigation above it. */ .foot-offices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3) var(--s5); margin:0 0 var(--s4); padding-top:var(--s4); border-top:1px solid var(--line); } .foot-office h6{ font-family:var(--mono); font-size:9px; letter-spacing:1.8px; color:var(--cyan); font-weight:400; margin-bottom:8px; } .foot-office address{ font-style:normal; font-size:12.8px; color:var(--fog); line-height:1.75; max-width:34ch; } /* Real profile links now that URLs exist. Sizing and hover come from the pre-existing .foot-social a rule, so the component looks unchanged. */ .foot-social a svg{ width:16px; height:16px; } /* Absolute bottom of the footer. */ .foot-copy{ margin-top:var(--s3); font-size:12px; color:var(--fog); line-height:1.7; text-align:center; text-wrap:pretty; } .foot-copy span{ color:var(--line3); margin:0 4px; } @media (max-width:680px){ .foot-offices{ grid-template-columns:1fr; gap:var(--s3); } .foot-office address{ max-width:none; } .foot-copy{ text-align:left; } } /* ============================================================ HOMEPAGE — PARTNER PROGRAM TRAILER A small teaser only. The full experience lives on partner-program.html; this must stay light, so the visual is five CSS-positioned nodes and five SVG lines, no JS. ============================================================ */ .ptr{ position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:var(--s5); align-items:center; overflow:hidden; border:1px solid var(--line2); border-radius:var(--r-xl); padding:var(--s6) var(--s5); background: radial-gradient(110% 130% at 88% 20%, rgba(124,92,250,.13), transparent 62%), linear-gradient(180deg,rgba(13,20,36,.9),rgba(8,12,24,.9)); backdrop-filter:blur(9px); transition:border-color .35s var(--ease), box-shadow .35s var(--ease); } .ptr:hover{ border-color:rgba(79,216,234,.3); box-shadow:0 26px 64px rgba(0,0,0,.45); } .ptr-h{ font-family:var(--display); font-size:clamp(21px,2.9vw,32px); font-weight:700; letter-spacing:-.9px; line-height:1.16; margin:var(--s2) 0 14px; max-width:22ch; } .ptr-p{ font-size:14.5px; color:var(--fog); line-height:1.75; max-width:56ch; margin-bottom:var(--s4); } .ptr-cta{ display:inline-flex; } /* --- the small network --- */ .ptr-viz{ position:relative; width:100%; max-width:280px; margin-inline:auto; aspect-ratio:1.1/1; perspective:800px; } .ptr-rig{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(9deg) rotateY(-8deg); transition:transform .55s var(--ease); } .ptr:hover .ptr-rig{ transform:rotateX(4deg) rotateY(-3deg) translateZ(16px); } .ptr-viz svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .ptr-edge{ fill:none; stroke:rgba(79,216,234,.34); stroke-width:1.1; stroke-dasharray:150; stroke-dashoffset:150; transition:stroke-dashoffset 1.1s var(--ease), stroke .3s; } .reveal.in .ptr-edge, .ptr.in .ptr-edge{ stroke-dashoffset:0; } .ptr:hover .ptr-edge{ stroke:rgba(79,216,234,.62); } .ptr-node{ position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; transform:translateZ(14px); display:flex; align-items:center; gap:5px; white-space:nowrap; font-family:var(--mono); font-size:7.5px; letter-spacing:1.1px; color:var(--ice); padding:5px 9px; border-radius:100px; background:rgba(9,14,26,.9); border:1px solid var(--line2); transition:border-color .3s, color .3s; } .ptr-node i{ width:4px; height:4px; border-radius:50%; background:var(--fog); flex:none; transition:background .3s; } .ptr:hover .ptr-node{ border-color:rgba(79,216,234,.32); color:var(--white); } .ptr:hover .ptr-node i{ background:var(--cyan); box-shadow:0 0 7px var(--cyan); } .ptr-core{ position:absolute; left:50%; top:50%; translate:-50% -50%; transform:translateZ(34px); width:78px; height:78px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at 50% 30%, rgba(79,216,234,.2), rgba(9,14,26,.96) 66%); border:1px solid rgba(79,216,234,.34); box-shadow:0 0 42px rgba(79,216,234,.22); } .ptr-core b{ font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:-.3px; } .ptr-core span{ font-family:var(--mono); font-size:6.5px; letter-spacing:1.2px; color:var(--cyan); margin-top:1px; } @media (max-width:900px){ .ptr{ grid-template-columns:1fr; gap:var(--s4); padding:var(--s5) var(--s4); } .ptr-viz{ order:-1; max-width:240px; } .ptr-h{ max-width:none; } } @media (max-width:430px){ .ptr{ padding:var(--s4) var(--s3); } .ptr-viz{ max-width:206px; } .ptr-node{ font-size:6.5px; padding:4px 7px; } } @media (prefers-reduced-motion:reduce){ .ptr-rig{ transform:none !important; } .ptr-edge{ stroke-dashoffset:0 !important; transition:none !important; } } /* ============================================================ BRAND LOGO tmg-logo.png is a straight-alpha transparent PNG, cropped to the artwork itself. There is no plate behind it, no blend mode and no container background — the page background shows through the logo's own transparency, including the circuit detail inside the shield. ============================================================ */ .brand-logo{ display:block; width:auto; max-width:none; height:40px; } .brand-logo.foot-logo{ height:34px; } @media (max-width:680px){ .brand-logo{ height:34px; } .brand-logo.foot-logo{ height:30px; } } @media (max-width:380px){ .brand-logo{ height:30px; } } /* ============================================================ TOUCH TARGETS (mobile / tablet only — desktop is untouched) Measured before this block, at 375px: 17x footer column links 15px tall 3x footer legal links 19px tall 8x .ais-risk chips 31px tall 2x .brand logo links 30px tall All below the ~44px comfortable-tap threshold. These rules give each control a real hit area without changing any type size, colour or desktop layout. ============================================================ */ @media (max-width:820px){ .foot-col ul li{ margin-bottom:0; } .foot-col ul li a, .foot-col ul li .foot-pending{ display:flex; align-items:center; min-height:44px; } .foot-legal{ flex-wrap:wrap; gap:0 var(--s3); } .foot-legal a{ display:inline-flex; align-items:center; min-height:44px; } .foot-social a{ width:42px; height:42px; } .brand{ display:inline-flex; align-items:center; min-height:44px; } .ais-risk{ min-height:44px; } /* the footer grows taller on mobile once links are tappable; pull the block spacing in a little so it does not read as dead space */ .foot-grid{ margin-bottom:var(--s4); gap:var(--s3) var(--s4); } } @media (max-width:820px){ /* Breadcrumb links measured 15px tall. Inline links inside prose are deliberately left alone (WCAG 2.5.8 exempts links in a sentence), but a breadcrumb is standalone navigation and should be tappable. */ .crumbs ol li a{ display:inline-flex; align-items:center; min-height:44px; } .crumbs ol li span[aria-current]{ display:inline-flex; align-items:center; min-height:44px; } } /* ============================================================ HEADER — SINGLE-LINE NAVIGATION The imported menu briefly rendered page SEO titles as labels ("Cybersecurity Solutions & TMG-Aegis"), which wrapped the header onto three lines. Labels are short again; these rules make wrapping impossible regardless of label length. Additive only — no size, colour or spacing is redefined. ============================================================ */ .nav-btn{ white-space:nowrap; } nav.links{ flex-wrap:nowrap; } /* The brand is a fixed-aspect lockup: shield + wordmark. Never let flex shrink it into a squashed or icon-only mark. */ .brand{ flex:none; min-width:0; } .brand-logo{ width:auto; max-width:none; object-fit:contain; } /* The ecosystem panel is a two-column grid. With an odd number of cards the last one would sit beside an empty cell, so it spans the row instead. Layout, spacing and styling are unchanged. */ .mega-eco > .mega-card:last-child:nth-child(odd){ grid-column:1 / -1; }