/* ========================================================================== TraceNet Technologies — "Complete IT Solutions" Display : Clash Display Body : Archivo Labels : JetBrains Mono Palette : electric cobalt + hot orange on crisp white. Bold, sharp, editorial. No teal/green, no beige, no soft grey, no rounded cards. ========================================================================== */ @font-face { font-family:'Clash Display'; src:url('fonts/clash-display-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Clash Display'; src:url('fonts/clash-display-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Clash Display'; src:url('fonts/clash-display-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Archivo'; src:url('fonts/archivo-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Archivo'; src:url('fonts/archivo-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Archivo'; src:url('fonts/archivo-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'JetBrains Mono'; src:url('fonts/jbmono-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'JetBrains Mono'; src:url('fonts/jbmono-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } /* ---------- tokens ---------- */ :root { --paper: #FFFFFF; /* crisp white base */ --band: #E7F0FF; /* soft light blue (no grey anywhere) */ --ink: #1B1E2B; /* dark slate — text + rules (never pure black) */ --muted: #4B5162; /* secondary text */ --faint: #5C6274; /* tertiary / labels (AA on white + band) */ /* neon fills */ --blue: #2EA4FF; /* electric sky blue — primary */ --blue-2: #7CC4FF; --lime: #A4FF2E; /* chartreuse */ --lime2: #C4FF2E; --yellow: #FFF52E; /* acid yellow */ --orange: #FF2EA4; /* hot magenta (secondary pop) */ /* readable text variants of the neons (AA on white/band) */ --blue-ink: #1466C2; --orange-ink: #C21774; --line: rgba(27,30,43,0.14); --line-2: rgba(27,30,43,0.08); /* Titles use Archivo (clean grotesque). Clash Display is kept ONLY for the locked home hero. Archivo tops out at 600, so heading rules must not request 700 (avoids faux-bold). */ --display:'Archivo','Segoe UI',system-ui,sans-serif; --display-hero:'Clash Display','Arial Narrow',system-ui,sans-serif; --body:'Archivo','Segoe UI',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace; --s0:1.0625rem; --s1:1.1875rem; --s2:clamp(1.28rem, 1.05rem + 0.9vw, 1.7rem); --h3:clamp(1.5rem, 1.2rem + 1vw, 2rem); --h2:clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); --h1:clamp(2.4rem, 1.3rem + 4.2vw, 4.9rem); --wrap-w:1260px; --pad:clamp(20px,5vw,72px); --sec-y:clamp(54px,6vh,96px); color-scheme: light; } /* ========================================================================== LARGE-SCREEN SCALING — fill big monitors without oversizing. Type, spacing, and text-width caps are rem/ch-based, so nudging the root font-size scales the whole design together; the container widens a little too. Below 1600px NOTHING changes (laptops, tablets, phones keep their exact current layout). Kept moderate so it never re-clips the one-screen sections, even on a wide-but-short display like 2560x1080. Verified across widths. ========================================================================== */ @media (min-width:1600px){ :root{ font-size:104%; --wrap-w:1360px; } } @media (min-width:1920px){ :root{ font-size:110%; --wrap-w:1500px; } } @media (min-width:2560px){ :root{ font-size:117%; --wrap-w:1680px; } } :root[data-theme='dark'], :root[data-theme='light'] { color-scheme: light; } /* ---------- reset ---------- */ *,*::before,*::after { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:var(--s0); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg { display:block; max-width:100%; } h1,h2,h3 { margin:0; text-wrap:balance; } p,ol,ul { margin:0; } ol,ul { list-style:none; padding:0; } a { color:inherit; } button,input,select,textarea { font:inherit; color:inherit; } :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline:3px solid var(--orange); outline-offset:2px; } .skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:#fff; padding:12px 18px; font-family:var(--mono); font-weight:500; font-size:.8rem; } .skip:focus { left:0; top:0; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } } /* ---------- layout ---------- */ .wrap { width:min(100% - (2 * var(--pad)), var(--wrap-w)); margin-inline:auto; position:relative; z-index:1; } .hero__grid>*,.proj__grid>*,.about__grid>*,.contact__grid>*, .sec__head--split>*,.lanes>*,.rows>*,.proj__list>*,.foot__grid>*,.field { min-width:0; } .h2,.hero__h1,.row__h,.proj__list h3 { overflow-wrap:break-word; } /* ---------- shared type ---------- */ .eyebrow { display:block; font-family:var(--mono); font-weight:700; font-size:.94rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.5; color:var(--blue-ink); margin-bottom:1.4rem; } .eyebrow::before { content:''; display:inline-block; width:22px; height:2px; margin-right:12px; vertical-align:4px; background:var(--eb, var(--orange)); } .eyebrow__sep { color:var(--faint); } .h2 { font-family:var(--display); font-weight:600; font-size:var(--h2); line-height:1.08; letter-spacing:-.005em; color:var(--ink); } .sec__intro { font-size:var(--s2); line-height:1.42; color:var(--muted); max-width:38ch; } /* ---------- sections & grounds ---------- */ .sec { position:relative; padding-block:var(--sec-y); } .sec--paper { background:var(--paper); } .sec--band { background:var(--band); } .sec--orange{ background:var(--orange); color:var(--ink); } /* the loud moment */ /* thick ink rule between every section — an editorial device, not a card border */ .sec + .sec { border-top:2px solid var(--ink); } /* ---------- buttons — sharp, solid, colour-shift on hover (no pill, no glow) ---------- */ .btn { --bg:var(--ink); --fg:#fff; --bd:var(--ink); display:inline-flex; align-items:center; gap:.7em; min-height:52px; padding:0 1.5em; border:2px solid var(--bd); border-radius:11px; background:var(--bg); color:var(--fg); font-family:var(--mono); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer; box-shadow:0 9px 16px -9px rgba(14,46,78,.45); transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .btn__arw { font-family:var(--body); font-weight:700; } .btn:hover { transform:translate(0,-3px); box-shadow:0 15px 22px -10px rgba(14,46,78,.5); } .btn--sm { min-height:40px; padding:0 1.05em; font-size:.72rem; } .btn--solid { --bg:var(--blue); --bd:var(--blue); --fg:var(--ink); } .btn--solid:hover { --bg:var(--orange); --bd:var(--orange); --fg:var(--ink); } .btn--ghost { --bg:transparent; --fg:var(--ink); --bd:var(--ink); } .btn--ghost:hover { --bg:var(--blue); --fg:var(--ink); --bd:var(--blue); } .btn--on-orange { --bg:var(--ink); --fg:#fff; --bd:var(--ink); } .btn--on-orange:hover { --bg:#fff; --fg:var(--ink); --bd:#fff; } /* ---------- reveal ---------- */ .reveal { opacity:0; transform:translateY(16px); } .reveal.is-in { opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); } @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;} } /* ========================================================================== NAV ========================================================================== */ .nav { position:fixed; inset:0 0 auto 0; z-index:50; padding-block:15px; transition:background .3s, box-shadow .3s, padding .3s; } .nav.is-stuck { background:var(--paper); box-shadow:0 2px 0 var(--ink); padding-block:10px; } .nav__inner { width:min(100% - (2 * var(--pad)), var(--wrap-w)); margin-inline:auto; display:flex; align-items:center; gap:24px; } .lockup { display:flex; align-items:center; gap:13px; text-decoration:none; margin-right:auto; } .lockup__mark { width:42px; height:42px; flex:none; filter:drop-shadow(0 2px 2px rgba(14,46,78,.28)); } .lockup__type { display:flex; flex-direction:column; line-height:1; } .lockup__name { font-family:var(--mono); font-weight:700; font-size:1.06rem; letter-spacing:-.03em; color:#1478D6; } .lockup__name b { color:#1478D6; font-weight:700; } .lockup__sub { font-family:var(--mono); font-size:.56rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; margin-top:6px; color:var(--faint); text-align:center; } .nav__links { display:flex; gap:28px; } .nav__links a { font-family:var(--mono); font-size:.76rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; color:var(--ink); padding:6px 0; position:relative; } .nav__links a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:0 50%; transition:transform .25s cubic-bezier(.16,1,.3,1); } .nav__links a:hover::after,.nav__links a:focus-visible::after { transform:scaleX(1); } .burger { display:none; width:48px; height:48px; border:1.5px solid rgba(20,102,194,.28); border-radius:13px; background:#fff; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--ink); box-shadow:0 8px 20px -12px rgba(14,46,78,.4); transition:border-color .2s ease, box-shadow .2s ease; } .burger:active { border-color:rgba(20,102,194,.55); box-shadow:0 4px 12px -8px rgba(14,46,78,.5); } .burger span { width:18px; height:2px; background:currentColor; transition:transform .3s; } .burger[aria-expanded='true'] span:first-child { transform:translateY(3.5px) rotate(45deg); } .burger[aria-expanded='true'] span:last-child { transform:translateY(-3.5px) rotate(-45deg); } .menu { position:fixed; inset:0; z-index:45; background:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:92px var(--pad) 36px; overflow-y:auto; } .menu[hidden]{ display:none; } /* soft, tappable button-cards that match the site (white, rounded, subtle border + cast shadow) */ .menu__links { display:flex; flex-direction:column; gap:12px; } .menu__links a { display:flex; align-items:center; justify-content:space-between; gap:14px; font-family:var(--display); font-weight:600; font-size:clamp(1.28rem,5.2vw,1.62rem); letter-spacing:-.01em; line-height:1.15; text-decoration:none; color:var(--ink); background:#fff; border:1.5px solid rgba(20,102,194,.16); border-radius:16px; padding:18px 22px; box-shadow:0 12px 26px -18px rgba(14,46,78,.4); transition:transform .2s ease, border-color .2s ease, color .2s ease; } .menu__links a::after { content:'\2197'; font-size:.82em; color:var(--blue); opacity:.7; } .menu__links a:hover, .menu__links a:active { color:var(--blue-ink); border-color:rgba(20,102,194,.45); transform:translateY(-2px); } .menu__cta { margin-top:16px; width:100%; justify-content:center; padding:19px 24px; font-size:1.04rem; border-radius:16px; } .menu__foot { margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--mono); font-size:.95rem; } .menu__foot a { color:var(--blue-ink); text-decoration:none; } body.is-locked { overflow:hidden; } @media (max-width:900px){ .nav__links,.nav__cta{ display:none; } .burger{ display:flex; } } /* ========================================================================== HERO ========================================================================== */ .hero { padding-block:clamp(72px,8.5vh,104px) clamp(16px,2.4vh,34px); overflow:hidden; } .hero__grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(40px,5vw,72px); align-items:center; padding-top:clamp(0px,.5vw,10px); } .hero__copy { max-width:660px; pointer-events:auto; } /* let clicks pass through the empty part of the container to the honeycomb below */ .hero > .wrap { pointer-events:none; } @keyframes ebcycle { 0%,100% { color:#1466C2; } 33% { color:#C21774; } 66% { color:#227A00; } } .hero__eyebrow { font-size:1.02rem; font-weight:600; letter-spacing:.08em; margin-bottom:clamp(.9rem,1.8vh,1.4rem); color:#1466C2; } @media (prefers-reduced-motion:reduce){ .hero__eyebrow, .svc-title { animation:none; } } /* appears a beat after the rest of the hero */ .hero__eyebrow.reveal.is-in { transition-delay:.9s; } .hero__eyebrow::before { width:26px; height:3px; vertical-align:5px; } .hero__h1 { font-family:var(--display); font-weight:600; font-size:clamp(2.1rem,1.25rem + 3vw,3.7rem); line-height:1.04; letter-spacing:-.01em; color:#1E70C8; } .hero__h1 em { font-style:normal; color:inherit; } .lead { margin-top:clamp(14px,1.9vh,26px); font-size:var(--s2); line-height:1.44; color:#2A3040; max-width:44ch; } .hero__actions { margin-top:clamp(20px,2.6vh,34px); display:flex; flex-wrap:wrap; gap:14px; } .hero__offer { margin-top:26px; display:flex; align-items:center; gap:11px; font-family:var(--mono); font-size:.8rem; color:var(--faint); } .hero__offer::before { content:''; width:10px; height:10px; background:var(--lime); flex:none; } .hero__particles { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; } /* calm, static honeycomb: no entrance pop, no mouse parallax, no click interaction. Every cell shows at full color (no faded/blurred back layer); depth comes only from the cast shadows. Sits lower and further right so the top green cell is never clipped and it aligns with the paragraph. */ /* anchored to the content (50vw), not the viewport edge, so it keeps a steady ~100px gap from the copy at every width instead of drifting far right on wide/ultrawide screens */ .hero__combs { position:absolute; top:clamp(140px,18vh,190px); right:max(24px, calc(50vw - 525px)); width:min(27vw,318px); pointer-events:none; overflow:visible; } .hero__combs--far { z-index:0; filter:drop-shadow(0 8px 12px rgba(14,46,78,.18)); opacity:1; } .hero__combs--near { z-index:1; filter:drop-shadow(0 16px 22px rgba(14,46,78,.26)); } .hero__combs polygon { transform-box:fill-box; transform-origin:center; opacity:1; } /* below ~1260px there isn't room for the copy and the (content-anchored) honeycomb side by side, so the copy goes full width and the honeycomb hides */ @media (max-width:1260px){ .hero__combs{ display:none; } } /* on phones the hero (no honeycomb) was only ~0.7 of the screen, so the next section peeked in under it. Make it own a full screen so one section fills the frame at a time. */ @media (max-width:900px){ .hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(92px,14vh,120px) clamp(28px,5vh,46px); } } /* the overnight log — sharp panel, bold cobalt header */ .log { position:relative; z-index:1; background:var(--paper); border:2px solid var(--ink); border-radius:0; overflow:hidden; } .log__bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; background:var(--blue); color:#fff; font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; } .log__title { color:rgba(255,255,255,.82); } .log__pill { color:var(--ink); background:var(--yellow); padding:4px 10px; font-weight:700; letter-spacing:.06em; white-space:nowrap; flex:none; } .log__rows { font-family:var(--mono); font-size:.78rem; line-height:1.4; } .log__rows li { display:grid; grid-template-columns:3.6em 5.4em 1fr auto; gap:12px; align-items:baseline; padding:13px 18px; border-bottom:1px solid var(--line); } .log__t { color:var(--blue-ink); font-weight:500; font-variant-numeric:tabular-nums; } .log__n { color:var(--faint); } .log__d { color:var(--ink); } .log__s { font-size:.63rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); } .log__s--auto { color:var(--orange-ink); font-weight:700; } .log__end { background:var(--band); } .log__end .log__d { color:var(--ink); font-weight:600; } .log__cap { padding:13px 18px; font-family:var(--mono); font-size:.65rem; line-height:1.5; color:var(--faint); } @media (max-width:980px){ .hero__grid{ grid-template-columns:minmax(0,1fr); gap:44px; } .log__rows li{ grid-template-columns:3.4em 1fr auto; } .log__n{ display:none; } } @media (max-width:430px){ .log__bar{ flex-direction:column; align-items:flex-start; gap:9px; } } /* ========================================================================== SECTION HEADS ========================================================================== */ .sec__head { max-width:920px; margin-bottom:clamp(40px,5vw,68px); } .sec__head .h2 { max-width:18ch; } .sec__head .sec__intro { margin-top:20px; max-width:50ch; } .sec__head--split { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,68px); align-items:end; max-width:none; } .sec__head--split .sec__intro { margin-top:0; max-width:42ch; } @media (max-width:860px){ .sec__head--split{ grid-template-columns:1fr; align-items:start; } } /* ========================================================================== SERVICES — honeycomb-cell tiles ========================================================================== */ #services { padding-block:clamp(40px,5vw,76px); position:relative; } .svc-particles { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.4; pointer-events:none; } /* the services section fills one screen and centers, so it never needs scrolling at 100% zoom (padding-top clears the fixed nav; cards are sized against viewport HEIGHT so they compress) */ #services { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(90px,11vh,128px) clamp(30px,6vh,64px); box-sizing:border-box; } .svc-title { position:relative; z-index:1; text-align:center; font-family:var(--display); font-weight:600; font-size:clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem); letter-spacing:-.005em; color:#1E70C8; margin:0 auto clamp(16px,2.6vh,36px); } .svc-list { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vh,40px) clamp(24px,3vw,48px); max-width:1040px; margin-inline:auto; text-align:center; } /* no card boxes (skill: same-size icon+heading+text boxes are the lazy container); clean editorial grid */ .svc { display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.4vh,13px); } .svc__head { display:inline-flex; flex-direction:column; align-items:center; gap:clamp(11px,1.5vh,15px); text-decoration:none; } /* logo mark spins on hover, DESKTOP ONLY. Gated to hover-capable + fine-pointer devices so it never runs on touch, where a stuck :hover kept the mark spinning over the heading on phones. No scale, so the rotating mark stays inside its own lane and never touches the text. */ @keyframes svcspin { from { transform:rotate(0); } to { transform:rotate(360deg); } } .svc__ico { width:38px; height:42px; filter:drop-shadow(0 4px 5px rgba(14,46,78,.26)); transition:transform .5s cubic-bezier(.16,1,.3,1); } @media (hover:hover) and (pointer:fine){ .svc:hover .svc__ico { animation:svcspin 1.6s linear infinite; } } .svc__h { font-family:var(--display); font-weight:600; font-size:clamp(1.14rem, .95rem + .6vw, 1.5rem); letter-spacing:-.005em; color:#1E70C8; transition:opacity .18s; } .svc:hover .svc__h { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; } .svc p { color:#2A3040; font-size:clamp(.95rem, .9rem + .2vw, 1.08rem); line-height:1.45; max-width:34ch; margin-inline:auto; } @media (max-width:820px){ #services{ min-height:0; } } @media (max-width:900px){ .svc-list{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:680px; } .svc__h::after{ content:'\00a0\2197'; color:var(--blue); font-weight:600; font-size:.82em; } } @media (max-width:560px){ .svc-list{ grid-template-columns:1fr; max-width:360px; } } /* ========================================================================== CYBERSECURITY — vertical, interactive, serif (deliberately different type) ========================================================================== */ #security { position:relative; overflow:hidden; background:var(--paper); min-height:100vh; display:flex; align-items:center; padding-block:clamp(44px,6vh,80px); --sf:Constantia, Georgia, 'Times New Roman', serif; } .cyber__particles { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.28; pointer-events:none; } .cyber__inner { position:relative; z-index:1; max-width:560px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; } /* brand marks: two flank the title, slow continuous spin (opposite ways), grow on hover */ .cyber__emblem { display:inline-block; transition:transform .3s ease; } .cyber__emblem:hover { transform:scale(1.1); } .cyber__emblem img { width:52px; height:auto; filter:drop-shadow(0 6px 10px rgba(14,46,78,.26)); animation:spinslow 16s linear infinite; } .cyber__head .cyber__emblem:last-child img { animation-direction:reverse; } @keyframes spinslow { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ .cyber__emblem img { animation:none; } } .cyber__head { display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,32px); } .cyber__title { font-family:var(--sf); font-weight:700; font-size:clamp(2rem,1.4rem + 2vw,2.9rem); line-height:1; letter-spacing:.01em; color:#1E70C8; } .cyber__sub { font-family:var(--sf); font-style:italic; font-size:1.05rem; line-height:1.5; color:#2A3040; max-width:34ch; margin-top:16px; } /* interactive flip cards: click a container and it turns to reveal its explanation */ .cyber__cards { margin-top:clamp(28px,4vw,46px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,26px); width:100%; } .fcard { position:relative; display:block; cursor:pointer; perspective:1200px; transition:transform .2s ease; } .fcard:hover { transform:translateY(-4px); } .fcard:nth-child(1){ --c:#1E70C8; } .fcard:nth-child(2){ --c:#C21774; } .fcard:nth-child(3){ --c:#227A00; } .fcard:nth-child(4){ --c:#1466C2; } .fcard__cb { position:absolute; width:1px; height:1px; opacity:0; } .fcard__inner { position:relative; display:block; width:100%; min-height:clamp(150px,20vw,176px); transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .fcard__cb:checked ~ .fcard__inner { transform:rotateY(180deg); } .fcard__cb:focus-visible ~ .fcard__inner { outline:3px solid var(--orange); outline-offset:4px; border-radius:18px; } .fcard__face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; border-radius:18px; backface-visibility:hidden; -webkit-backface-visibility:hidden; text-align:center; } .fcard__front { background:var(--paper); border:2px solid var(--c); box-shadow:0 14px 26px -18px rgba(14,46,78,.45); transition:box-shadow .2s ease; } .fcard:hover .fcard__front { box-shadow:0 22px 32px -18px rgba(14,46,78,.5); } .fcard__back { background:var(--c); transform:rotateY(180deg); } .fcard__word { font-family:var(--sf); font-weight:700; font-size:clamp(1.4rem,1.1rem + .8vw,1.85rem); color:var(--c); } .fcard__hint { font-family:var(--sf); font-style:italic; font-size:.82rem; color:var(--c); opacity:.72; } .fcard__back span { font-family:var(--sf); font-size:1.03rem; line-height:1.46; color:#fff; max-width:24ch; } .cyber__inner .btn { margin-top:clamp(28px,4vw,46px); } @media (max-width:720px){ #security{ min-height:0; } } @media (max-width:460px){ .cyber__cards{ grid-template-columns:1fr; } } /* ========================================================================== ROWS — editorial index (unused; kept for reference) ========================================================================== */ .rows { border-top:2px solid var(--ink); } .row { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,11fr) auto; gap:clamp(16px,3vw,48px); align-items:baseline; padding:clamp(22px,2.6vw,34px) 8px; border-bottom:2px solid var(--ink); position:relative; transition:background .2s ease, padding-left .2s ease; } .row:hover { background:var(--band); padding-left:20px; } .row__h { font-family:var(--display); font-weight:600; font-size:var(--h3); line-height:1.02; letter-spacing:-.01em; color:var(--ink); } .row__h span { color:var(--eb, var(--blue)); } .row__d { color:var(--muted); font-size:var(--s1); line-height:1.5; max-width:52ch; } .row__arw { font-family:var(--display); font-weight:600; font-size:1.6rem; color:var(--orange); opacity:0; transform:translateX(-8px); transition:opacity .2s, transform .2s; } .row:hover .row__arw { opacity:1; transform:none; } @media (max-width:760px){ .row { grid-template-columns:1fr; gap:8px; } .row__arw { display:none; } } /* ========================================================================== PROJECTS — bold bordered grid (sharp, hairline-divided, no floating cards) ========================================================================== */ .proj__grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(36px,5vw,72px); align-items:start; } .proj__lead .h2 { max-width:13ch; } .proj__lead .sec__intro { margin-top:20px; } .proj__lead .btn { margin-top:30px; } .proj__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:2px solid var(--ink); border-width:2px 0 0 2px; } .proj__list li { border:2px solid var(--ink); border-width:0 2px 2px 0; padding:clamp(20px,2vw,28px); display:flex; flex-direction:column; gap:10px; transition:background .2s; } .proj__list li:hover { background:var(--band); } .proj__list h3 { font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:-.01em; line-height:1.1; color:var(--ink); padding-left:16px; border-left:4px solid var(--tile,var(--blue)); } .proj__list li:nth-child(1){ --tile:var(--blue); } .proj__list li:nth-child(2){ --tile:var(--orange); } .proj__list li:nth-child(3){ --tile:var(--blue-2); } .proj__list li:nth-child(4){ --tile:var(--yellow); } .proj__list li:nth-child(5){ --tile:var(--orange); } /* an odd trailing tile spans the full width so the bordered grid stays a clean rectangle */ .proj__list li:last-child:nth-child(odd){ grid-column:1 / -1; } .proj__list p { font-size:.95rem; line-height:1.5; color:var(--muted); } @media (max-width:1000px){ .proj__grid{ grid-template-columns:1fr; } } @media (max-width:520px){ .proj__list{ grid-template-columns:1fr; } } /* ========================================================================== METHOD — two sharp panels ========================================================================== */ .lanes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.2vw,28px); } .lane { border:2px solid var(--ink); border-radius:0; padding:clamp(22px,2.2vw,32px); background:var(--paper); } .lane--us { background:var(--band); border-width:2px; box-shadow:8px 8px 0 var(--blue); } .lane__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-bottom:16px; margin-bottom:6px; border-bottom:2px solid var(--line); } .lane__tag { font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; } .lane__tag--them { background:var(--ink); color:#fff; } .lane__tag--us { background:var(--blue); color:var(--ink); } .lane__cost { font-family:var(--mono); font-size:.72rem; color:var(--faint); font-variant-numeric:tabular-nums; } .lane__steps { display:flex; flex-direction:column; } .lane__steps li { display:grid; grid-template-columns:4.6em 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); } .lane__steps li:last-child { border-bottom:0; padding-bottom:0; } .lane__steps time { font-family:var(--mono); font-size:.8rem; font-weight:500; font-variant-numeric:tabular-nums; color:var(--faint); padding-top:2px; } .lane--us .lane__steps time { color:var(--blue-ink); } .lane__steps p { font-size:.97rem; line-height:1.48; color:var(--muted); } .lane__fail time { color:var(--orange-ink); } .lane__fail p { color:var(--ink); font-weight:600; } .lane__win time { color:var(--blue-ink); } .lane__win p { color:var(--ink); font-weight:600; } .lanes__note { margin-top:clamp(30px,3.4vw,50px); max-width:62ch; font-size:var(--s1); line-height:1.56; color:var(--muted); padding-left:clamp(0px,2vw,22px); border-left:4px solid var(--orange); } @media (max-width:900px){ .lanes{ grid-template-columns:1fr; } .lanes__note{ border-left:0; padding-left:0; padding-top:18px; border-top:4px solid var(--orange); } } @media (max-width:560px){ .lane__steps li{ grid-template-columns:1fr; gap:3px; } .lane__steps time{ padding-top:0; } } /* ========================================================================== MANIFESTO — loud orange band ========================================================================== */ /* ========================================================================== ABOUT ========================================================================== */ /* About: a contained, centered block; title centered, then copy with the headshot to its side. Photo-to-the-side keeps it compact enough to fit one screen; the block stays narrow so it never spreads wide. A clearly-visible logo watermark + blue emphasis add brand engagement. */ #about { position:relative; overflow:hidden; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(70px,8vh,100px) clamp(26px,4vh,48px); box-sizing:border-box; } .about__wrap { max-width:960px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:clamp(22px,3.4vh,44px); position:relative; z-index:1; } .about__wrap .eyebrow { margin:0; } .about__h { margin:0; text-align:center; white-space:nowrap; color:#1E70C8; font-size:clamp(1.35rem,2.7vw,2.25rem); } .about__body { width:100%; display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,30vw,338px); gap:clamp(38px,4.6vw,72px); align-items:center; margin-top:0; } .about__copy>p { color:#2A3040; line-height:1.62; font-size:clamp(1rem,.95rem + .28vw,1.13rem); text-align:left; max-width:60ch; } .about__copy>p+p { margin-top:1.1em; } /* the photo blends into the white page: matching white background, only a whisper of shadow so it doesn't read as a hard floating box */ .about__card { margin:0; display:flex; flex-direction:column; gap:14px; } .about__photo { position:relative; width:100%; aspect-ratio:1/1; border-radius:18px; overflow:hidden; box-shadow:0 18px 40px -32px rgba(14,46,78,.18); } .about__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 8%; } .about__quote { margin:0; text-align:left; font-family:var(--display); font-weight:500; font-size:clamp(1rem,.94rem + .35vw,1.16rem); line-height:1.38; letter-spacing:-.01em; color:#1E70C8; } .about__by { margin:0; text-align:left; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); } .about__by strong { font-weight:700; color:var(--blue-ink); } @media (max-width:760px){ #about{ min-height:0; } .about__body{ grid-template-columns:1fr; justify-items:center; } .about__card{ max-width:320px; } } @media (max-width:600px){ .about__h{ white-space:normal; } } .cv { position:sticky; top:104px; border:2px solid var(--ink); padding:24px; background:var(--paper); } .cv__label { font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:18px; } .cv__list { display:flex; flex-direction:column; } .cv__list li { display:flex; flex-direction:column; gap:3px; padding:15px 0 15px 22px; border-bottom:1px solid var(--line); position:relative; } .cv__list li:last-child { border-bottom:0; padding-bottom:0; } .cv__list li::before { content:''; position:absolute; left:0; top:20px; width:9px; height:9px; background:var(--faint); } .cv__list li::after { content:''; position:absolute; left:4px; top:31px; width:1px; bottom:-1px; background:var(--line); } .cv__list li:last-child::after { display:none; } .cv__list li.cv__now::before { background:var(--orange); } .cv__role { font-family:var(--display); font-weight:600; font-size:1.02rem; line-height:1.2; color:var(--ink); } .cv__org { font-size:.94rem; color:var(--muted); } .cv__note { font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--faint); margin-top:3px; } @media (max-width:1000px){ .about__grid{ grid-template-columns:1fr; } .cv{ position:static; } } @media (max-width:520px){ .about__card{ flex-direction:column; align-items:flex-start; } } /* ========================================================================== WHY CHOOSE US — the free path in. Three interactive steps (hexagon badges, honeycomb motif), one lime accent on the payoff. Centered, fits one screen. ========================================================================== */ #choose { position:relative; overflow:hidden; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(72px,8vh,110px) clamp(30px,5vh,56px); box-sizing:border-box; } .choose__deco { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; pointer-events:none; z-index:0; } .choose__wrap { max-width:1080px; margin-inline:auto; position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; } .choose__h { color:#1E70C8; margin:0; max-width:22ch; } .choose__lede { margin:clamp(16px,2.6vh,30px) auto 0; max-width:56ch; color:#2A3040; font-size:clamp(1.06rem,1rem + .4vw,1.24rem); line-height:1.6; } .choose__steps { list-style:none; margin:clamp(34px,5vh,62px) 0 0; padding:0; width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,3vw,52px); text-align:left; } .choose__step { display:flex; flex-direction:column; gap:clamp(12px,1.6vh,17px); } /* soft cue: a short accent rule + a sequence word. No badges, no boxes, no hexagons. */ .choose__cue { display:flex; flex-direction:column; gap:14px; font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.01em; color:var(--blue-ink); } .choose__cue::before { content:''; width:34px; height:3px; border-radius:2px; background:currentColor; transition:width .4s cubic-bezier(.16,1,.3,1); } .choose__step:hover .choose__cue::before { width:54px; } .choose__sh { font-family:var(--display); font-weight:600; letter-spacing:-.005em; font-size:clamp(1.18rem,1rem + .55vw,1.48rem); color:#1E70C8; margin:0; line-height:1.14; } .choose__step p { margin:0; color:#2A3040; font-size:clamp(.98rem,.93rem + .25vw,1.1rem); line-height:1.6; } /* the payoff step carries the single soft green accent (cue + title), so the reward stands out */ .choose__step--pay .choose__cue { color:#4C9A00; } .choose__step--pay .choose__sh { color:#4C9A00; } .choose__foot { margin-top:clamp(30px,4.4vh,54px); display:flex; flex-direction:column; align-items:center; gap:clamp(12px,1.8vh,18px); } .choose__note { position:relative; margin:0; padding-left:20px; font-family:var(--mono); font-size:.9rem; font-weight:500; color:#2A3040; } .choose__note::before { content:''; position:absolute; left:0; top:.35em; width:10px; height:10px; border-radius:50%; background:var(--lime); animation:pulseDot 2.4s ease-out infinite; } @media (prefers-reduced-motion:reduce){ .choose__note::before{ animation:none; } } @media (max-width:820px){ #choose{ min-height:0; } .choose__steps{ grid-template-columns:1fr; gap:clamp(24px,4vh,34px); max-width:460px; margin-inline:auto; } } /* ========================================================================== WHY IT MATTERS (#why-it) — an understated editorial band that makes an owner FEEL why IT matters (not a repeat of what we do). Two columns: eyebrow + big headline (left), body + closing line (right). No graphics, no cards, no hex, no dash. White. A thin hairline separates it from the hero. Not full-height. ========================================================================== */ /* APPLE-STYLE (client-approved direction): big tightly-tracked centered headline, short lighter subhead, lots of air, all on ONE screen (min-height:100svh, centered - fixes the earlier cut-off). Kept on brand blue (authentic Apple uses near-black #1d1d1f, which the client dislikes). */ #why-it { position:relative; background:#FFFFFF; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(92px,12vh,140px) clamp(40px,6vh,80px); box-sizing:border-box; } .backbone__wrap { max-width:900px; margin-inline:auto; text-align:center; } .backbone__eyebrow { margin:0 0 clamp(16px,2.4vh,26px); font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:#1E70C8; } .backbone__head { margin:0 auto; max-width:21ch; color:#1E70C8; font-family:var(--display); font-weight:600; letter-spacing:-.026em; line-height:1.08; font-size:clamp(2rem,1.35rem + 2.4vw,2.95rem); } .backbone__sub { margin:clamp(24px,3.6vh,42px) auto 0; max-width:46ch; color:#2A3040; font-weight:400; font-size:clamp(1.18rem,1.05rem + .6vw,1.5rem); line-height:1.5; letter-spacing:-.011em; } .backbone__close { margin:clamp(18px,2.4vh,28px) auto 0; max-width:44ch; color:#1E70C8; font-family:var(--display); font-weight:500; font-size:clamp(1.14rem,1.02rem + .48vw,1.38rem); line-height:1.45; letter-spacing:-.014em; } /* keep it a full screen on mobile too (client: a section should fill the phone, not show 3 at once); bigger type for readability + bottom-heavy padding so the content sits a little higher (less empty space up top). Mobile only. */ @media (max-width:600px){ #why-it { padding-block: clamp(76px,9.5vh,98px) clamp(104px,16vh,150px); } .backbone__eyebrow { font-size:.9rem; margin:0 0 clamp(20px,3.2vh,30px); } .backbone__head { max-width:none; font-size:clamp(2.1rem,8vw,2.55rem); line-height:1.1; } .backbone__sub { max-width:none; font-size:clamp(1.34rem,5.6vw,1.55rem); line-height:1.52; margin-top:clamp(28px,4.4vh,40px); } .backbone__close { max-width:none; font-size:clamp(1.3rem,5.3vw,1.5rem); line-height:1.46; margin-top:clamp(24px,3.6vh,34px); } } /* ========================================================================== INDUSTRIES (#industries) — names who we serve as soft, tappable cards with a tailored one-liner each; staggered reveal + hover lift. White, honeycomb deco. ========================================================================== */ #industries { position:relative; overflow:hidden; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(72px,8vh,110px) clamp(30px,5vh,56px); box-sizing:border-box; } .industries__wrap { max-width:1080px; margin-inline:auto; position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; } /* Apple-style header (matches #why-it): small overline, big tightly-tracked headline, lighter subhead */ .industries__eyebrow { margin:0 0 clamp(14px,2vh,22px); font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:#1E70C8; } .industries__h { color:#1E70C8; margin:0; max-width:none; font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,1.25rem + 2.1vw,2.75rem); line-height:1.08; letter-spacing:-.024em; } .industries__lede { margin:clamp(18px,2.8vh,32px) auto 0; max-width:48ch; color:#2A3040; font-weight:400; font-size:clamp(1.12rem,1.02rem + .5vw,1.42rem); line-height:1.5; letter-spacing:-.008em; } .industries__grid { list-style:none; margin:clamp(32px,4.6vh,56px) 0 0; padding:0; width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.5vw,20px); } .industry { display:flex; flex-direction:column; gap:9px; text-align:left; text-decoration:none; color:inherit; background:#fff; border-radius:20px; padding:clamp(22px,2vw,30px); box-shadow:0 24px 50px -30px rgba(14,46,78,.4); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; } .industry:hover { transform:translateY(-6px); box-shadow:0 36px 64px -30px rgba(14,46,78,.5); } .industry__name { font-family:var(--display); font-weight:600; font-size:clamp(1rem,.92rem + .3vw,1.16rem); color:var(--ink); letter-spacing:-.01em; line-height:1.16; } /* the tailored line was replaced by a hover cue: hidden until hover (reserves its own row, so the card never resizes), shown always on touch since there is no hover there */ .industry__cue { font-family:var(--mono); font-weight:500; font-size:clamp(.72rem,.68rem + .15vw,.82rem); color:var(--blue-ink); letter-spacing:.02em; opacity:0; transition:opacity .25s ease; } .industry:hover .industry__cue { opacity:1; } @media (hover:none){ .industry__cue { opacity:1; } } .industries__foot { margin:clamp(28px,4vh,48px) auto 0; max-width:48ch; font-family:var(--display); font-weight:500; font-size:clamp(1.02rem,.97rem + .3vw,1.18rem); color:#1E70C8; line-height:1.5; } @media (max-width:900px){ #industries{ min-height:0; } .industries__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:440px){ .industries__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .industry{ padding:16px; border-radius:16px; } .industry__name{ font-size:.98rem; } } /* ========================================================================== CONTACT ========================================================================== */ #contact { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(96px,12vh,140px) clamp(28px,5vh,52px); overflow:hidden; } .assess { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.98fr); gap:clamp(30px,4vw,62px); align-items:center; } /* ambient honeycomb energy behind the whole section */ .assess__deco { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.3; pointer-events:none; z-index:0; } /* left: persuasion + honeycomb brand cluster */ .assess__pitch { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(28px,4.6vh,50px); } .assess__h { margin:0; color:#1E70C8; white-space:nowrap; line-height:1.02; font-size:clamp(1.5rem,1.02rem + 1.7vw,2.5rem); } .assess__lede { margin:0; color:#2A3040; font-size:clamp(1.04rem,.98rem + .38vw,1.2rem); line-height:1.6; max-width:44ch; } .assess__contact { display:flex; flex-direction:column; gap:clamp(16px,2.2vh,24px); } .assess__cline { display:flex; flex-direction:column; gap:5px; } .assess__clabel { font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .assess__link { font-family:var(--mono); font-size:1.02rem; font-weight:500; color:var(--blue-ink); text-decoration:none; width:fit-content; border-bottom:2px solid rgba(46,164,255,.4); transition:color .18s, border-color .18s; } .assess__link:hover { color:var(--orange-ink); border-bottom-color:var(--orange); } .assess__ctext { font-family:var(--mono); font-size:.98rem; line-height:1.5; color:#2A3040; max-width:34ch; } /* right: bold deep-blue form panel (color + depth) */ .assess__form { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vh,34px) clamp(20px,2.4vw,32px); background:var(--blue-ink); border-radius:22px; box-shadow:0 44px 74px -34px rgba(14,46,78,.6); padding:clamp(26px,3.4vh,44px) clamp(24px,2.6vw,40px); align-content:center; } .ff { position:relative; min-width:0; } .ff--full { grid-column:span 2; } .ff input,.ff select,.ff textarea { width:100%; border:0; border-bottom:2px solid rgba(255,255,255,.34); border-radius:0; background:transparent; padding:20px 0 8px; color:#fff; font-size:1rem; font-family:inherit; transition:border-color .18s; } .ff textarea { resize:vertical; line-height:1.5; } .ff select { appearance:none; cursor:pointer; padding-top:22px; padding-right:28px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 2px center; } .ff select option { color:#1B1E2B; } .ff label { position:absolute; left:0; top:19px; color:rgba(255,255,255,.82); font-family:var(--mono); font-size:.92rem; letter-spacing:.01em; pointer-events:none; transition:top .18s, font-size .18s, color .18s, letter-spacing .18s; } .ff input:focus ~ label, .ff textarea:focus ~ label, .ff input:not(:placeholder-shown) ~ label, .ff textarea:not(:placeholder-shown) ~ label, .ff--select label { top:-3px; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#fff; } .ff input:focus,.ff textarea:focus,.ff select:focus { outline:none; border-bottom-color:#fff; } .ff input[aria-invalid='true'] { border-bottom-color:var(--yellow); } .assess__send { grid-column:span 2; display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; margin-top:6px; } .assess__send .btn--solid { background:#fff; color:var(--blue-ink); padding:14px 26px; font-size:1.02rem; box-shadow:0 10px 22px -10px rgba(0,0,0,.4); transition:transform .18s, box-shadow .18s, background .18s; } .assess__send .btn--solid:hover { transform:translateY(-3px); background:#EAF3FF; box-shadow:0 16px 30px -12px rgba(0,0,0,.5); } .assess__send .btn--solid .btn__arw { transition:transform .18s; } .assess__send .btn--solid:hover .btn__arw { transform:translate(3px,-3px); } .form__note { position:relative; font-family:var(--mono); font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.92); font-weight:500; max-width:26ch; margin:0; padding-left:18px; } .form__note::before { content:''; position:absolute; left:0; top:.4em; width:9px; height:9px; border-radius:50%; background:var(--lime); animation:pulseDot 2.4s ease-out infinite; } @keyframes pulseDot { 0%{ box-shadow:0 0 0 0 rgba(164,255,46,.6); } 70%{ box-shadow:0 0 0 8px rgba(164,255,46,0); } 100%{ box-shadow:0 0 0 0 rgba(164,255,46,0); } } @media (prefers-reduced-motion:reduce){ .form__note::before{ animation:none; } } .form__note[data-state='error']{ color:var(--yellow); } .form__note[data-state='ok']{ color:#fff; } @media (max-width:900px){ #contact{ min-height:0; } .assess{ grid-template-columns:1fr; gap:clamp(28px,5vh,44px); } .assess__h{ white-space:normal; } .assess__comb{ align-self:center; } } @media (max-width:520px){ .assess__form{ grid-template-columns:1fr; } .ff--full,.assess__send{ grid-column:span 1; } } /* ========================================================================== GENERIC CONTENT PAGES (404 now; service + service-area pages next phases) ========================================================================== */ .page--center { min-height:72vh; display:flex; align-items:center; text-align:center; } .page__narrow { max-width:640px; margin-inline:auto; } .page--center .eyebrow::before { display:none; } .page--center h1 { color:#1E70C8; margin-bottom:10px; } .page__actions { margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .cyber__emblem--static { margin-bottom:6px; } .cyber__emblem--static img { animation:none; } /* breadcrumbs (service + location pages) */ .crumbs { font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--blue-ink); display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .crumbs a { color:var(--blue-ink); text-decoration:none; } .crumbs a:hover { text-decoration:underline; } .crumbs span { color:var(--blue); } /* page header for service + service-area pages */ .phero { padding-block:clamp(112px,13vh,156px) clamp(40px,5vw,66px); position:relative; overflow:hidden; text-align:center; } .phero__wrap { max-width:760px; margin-inline:auto; } .phero .crumbs { justify-content:center; margin-bottom:22px; } .phero__h1 { font-family:var(--display); font-weight:600; font-size:clamp(2rem,1.4rem + 2.2vw,3.05rem); line-height:1.06; letter-spacing:-.006em; color:#1E70C8; } .phero__h1 em { font-style:normal; color:inherit; } .phero__lead { margin-inline:auto; max-width:50ch; color:#2A3040; } .phero .hero__actions { justify-content:center; } /* honeycomb explainer — the logo rosette. Each outer cell is a topic; clicking one flips the rosette into a single big hexagon holding that explanation. Pure CSS (hidden radios), and all the copy stays in the HTML so search engines still read every word. */ .hexui { position:relative; margin-top:clamp(22px,3vw,34px); } .hexui__eyebrow, .hexui__h2 { text-align:center; } .hexui__h2 { max-width:none; text-shadow:0 3px 8px rgba(14,46,78,.20); } .hexui__r { position:absolute; width:1px; height:1px; opacity:0; } /* the whole block sits on exactly one screen. Everything below is capped against viewport HEIGHT as well as width, so a wide-but-short window can never push it out of frame. */ .hexsec { min-height:100vh; display:flex; align-items:center; padding-block:clamp(28px,4vh,52px); } .hexui__stage { position:relative; display:grid; place-items:center; perspective:1400px; min-height:clamp(280px,48vh,470px); margin-top:clamp(12px,1.6vw,20px); } .hexui__glow, .hexui__rosette, .hexui__panels { grid-area:1/1; } /* depth behind the mark: ONE soft blue tone, no colour wheel */ .hexui__glow { width:min(430px,84vw,50vh); height:min(430px,84vw,50vh); border-radius:50%; pointer-events:none; background:radial-gradient(circle at 50% 50%, rgba(46,164,255,.16), transparent 68%); filter:blur(18px); } /* geometry + colours taken straight from assets/logo-mark.svg (7-hex rosette, gaps included) */ .hexui__rosette { --w:min(112px,12vw,13.5vh); --h:calc(var(--w) * 0.8662); position:relative; width:calc(var(--w) * 2.7); height:calc(var(--w) * 2.8); transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .3s ease; } /* Each cell is a real 3d object: a front face and a back face, with a cast shadow that stays on the ground while the hexagon turns over. Same depth language as the hero honeycomb. */ .hexcell { position:absolute; left:50%; top:50%; width:var(--w); height:var(--h); margin-left:calc(var(--w) / -2); margin-top:calc(var(--h) / -2); cursor:pointer; perspective:760px; transform:translate(var(--tx,0),var(--ty,0)); } .hexcell__shadow { position:absolute; inset:0; z-index:0; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:rgba(14,46,78,.55); filter:blur(12px); opacity:.5; transform:translateY(16px) scale(.93); transition:transform .3s ease, opacity .3s ease; } .hexcell:hover .hexcell__shadow { transform:translateY(26px) scale(.86); opacity:.68; } .hexcell__inner { position:relative; z-index:1; display:block; width:100%; height:100%; transform-style:preserve-3d; } .hexcell__face { position:absolute; inset:0; display:grid; place-items:center; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:var(--c); backface-visibility:hidden; -webkit-backface-visibility:hidden; } /* the reverse side of the same hexagon: a touch darker (overlay, not a filter, so the preview text stays crisp) and it carries a short preview of the explanation */ .hexcell__back { transform:rotateY(180deg); background-image:linear-gradient(rgba(10,70,82,.20), rgba(10,70,82,.20)); } /* small labels stay crisp: a shadow blurs text this size, so only the white-on-blue cell (which needs the separation) keeps one, via the per-cell --ts variable. Dark labels get none. */ .hexcell__front > span { font-family:var(--display); font-weight:600; font-size:clamp(.66rem,1.55vh,.84rem); line-height:1.1; color:var(--tc,#fff); text-align:center; padding:0 11%; text-shadow:var(--ts,none); } .hexcell__back > span { font-family:var(--body); font-weight:600; font-size:clamp(.5rem,1.15vh,.64rem); line-height:1.24; color:var(--tc,#fff); text-align:center; padding:0 10%; text-shadow:var(--ts,none); } /* hover: it pulses AND turns over, so it reads as a 3d object inviting a click */ @keyframes hexpulse { 0%,100% { transform:translate(var(--tx,0),var(--ty,0)) scale(1.04); } 50% { transform:translate(var(--tx,0),var(--ty,0)) scale(1.11); } } @keyframes hexflip { 0% { transform:rotateY(0); } 100% { transform:rotateY(360deg); } } .hexcell:hover { animation:hexpulse 2s ease-in-out infinite; z-index:3; } .hexcell:hover .hexcell__inner { animation:hexflip 2s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ .hexcell:hover { animation:none; transform:translate(var(--tx,0),var(--ty,0)) scale(1.06); } .hexcell:hover .hexcell__inner { animation:none; } } .hexcell--core { --c:#2EA4FF; cursor:default; } .hexcell--core:hover { animation:none; transform:translate(0,0); } .hexcell--core:hover .hexcell__inner { animation:none; } .hexcell--core:hover .hexcell__shadow { transform:translateY(16px) scale(.93); opacity:.5; } .hexcell--1 { --tx:0; --ty:calc(var(--w) * -.939); --c:#1478D6; --tc:#fff; --ts:0 2px 5px rgba(4,34,42,.55); } .hexcell--2 { --tx:calc(var(--w) * .8108); --ty:calc(var(--w) * -.4662); --c:#A4FF2E; --tc:#04222A; } .hexcell--3 { --tx:calc(var(--w) * .8108); --ty:calc(var(--w) * .4662); --c:#2EA4FF; --tc:#04222A; } .hexcell--4 { --tx:0; --ty:calc(var(--w) * .939); --c:#7CC4FF; --tc:#04222A; } .hexcell--5 { --tx:calc(var(--w) * -.8108); --ty:calc(var(--w) * .4662); --c:#FF2EA4; --tc:#04222A; } .hexcell--6 { --tx:calc(var(--w) * -.8108); --ty:calc(var(--w) * -.4662); --c:#2EA4FF; --tc:#04222A; } .hexui__panels { display:grid; place-items:center; } .hexpanel { grid-area:1/1; width:min(600px,88vw,60vh); height:calc(min(600px,88vw,60vh) * 0.8662); clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:var(--c); display:grid; place-items:center; text-align:center; filter:drop-shadow(0 26px 26px rgba(14,46,78,.36)); opacity:0; transform:rotateY(-180deg); pointer-events:none; transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .3s ease; } /* a hexagon tapers at top and bottom, so the copy is held inside the largest rectangle that genuinely fits within the shape (about 72% of its width, half its height). No more spill. */ .hexpanel__in { max-width:72%; max-height:52%; } .hexpanel h3 { font-family:var(--display); font-weight:600; font-size:clamp(1.25rem,3vh,1.75rem); line-height:1.15; color:var(--tc,#fff); } /* readability first: no blur under the body copy, and it scales with the height of the screen */ .hexpanel p { margin-top:10px; color:var(--tc,#fff); font-size:clamp(.92rem,2.1vh,1.12rem); line-height:1.5; font-weight:500; } /* one shared Back control, sitting BELOW the hexagon so it never eats space inside the shape */ .hexback { display:none; margin:18px auto 0; cursor:pointer; font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-ink); border:2px solid var(--blue-ink); border-radius:999px; padding:9px 20px; width:fit-content; transition:background .18s ease, color .18s ease; } .hexback:hover { background:var(--blue-ink); color:#fff; } #mit-1:checked ~ .hexback, #mit-2:checked ~ .hexback, #mit-3:checked ~ .hexback, #mit-4:checked ~ .hexback, #mit-5:checked ~ .hexback, #mit-6:checked ~ .hexback { display:block; } .hexpanel--1 { --c:#1478D6; --tc:#fff; } .hexpanel--2 { --c:#A4FF2E; --tc:#04222A; } .hexpanel--3 { --c:#2EA4FF; --tc:#04222A; } .hexpanel--4 { --c:#7CC4FF; --tc:#04222A; } .hexpanel--5 { --c:#FF2EA4; --tc:#04222A; } .hexpanel--6 { --c:#2EA4FF; --tc:#04222A; } #mit-1:checked ~ .hexui__stage .hexui__rosette, #mit-2:checked ~ .hexui__stage .hexui__rosette, #mit-3:checked ~ .hexui__stage .hexui__rosette, #mit-4:checked ~ .hexui__stage .hexui__rosette, #mit-5:checked ~ .hexui__stage .hexui__rosette, #mit-6:checked ~ .hexui__stage .hexui__rosette { transform:rotateY(180deg); opacity:0; pointer-events:none; } #mit-1:checked ~ .hexui__stage .hexpanel--1, #mit-2:checked ~ .hexui__stage .hexpanel--2, #mit-3:checked ~ .hexui__stage .hexpanel--3, #mit-4:checked ~ .hexui__stage .hexpanel--4, #mit-5:checked ~ .hexui__stage .hexpanel--5, #mit-6:checked ~ .hexui__stage .hexpanel--6 { transform:rotateY(0); opacity:1; pointer-events:auto; } .hexui__hint { text-align:center; margin-top:8px; font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-ink); transition:opacity .3s ease; } #mit-1:checked ~ .hexui__hint, #mit-2:checked ~ .hexui__hint, #mit-3:checked ~ .hexui__hint, #mit-4:checked ~ .hexui__hint, #mit-5:checked ~ .hexui__hint, #mit-6:checked ~ .hexui__hint { opacity:0; } /* keyboard focus ring sits tight on the hexagon itself, never as a box around the whole stage */ #mit-1:focus-visible ~ .hexui__stage .hexcell--1 .hexcell__front, #mit-2:focus-visible ~ .hexui__stage .hexcell--2 .hexcell__front, #mit-3:focus-visible ~ .hexui__stage .hexcell--3 .hexcell__front, #mit-4:focus-visible ~ .hexui__stage .hexcell--4 .hexcell__front, #mit-5:focus-visible ~ .hexui__stage .hexcell--5 .hexcell__front, #mit-6:focus-visible ~ .hexui__stage .hexcell--6 .hexcell__front { box-shadow:inset 0 0 0 3px #04222A; } @media (max-width:620px){ .hexpanel { clip-path:none; border-radius:26px; width:min(94vw,430px); height:auto; min-height:290px; padding:34px 26px; } .hexpanel__in { max-width:100%; } } /* numbered steps */ .steps { margin-top:clamp(26px,3vw,38px); display:flex; flex-direction:column; gap:clamp(16px,2vw,24px); counter-reset:step; max-width:620px; } .steps li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; } .steps li::before { counter-increment:step; content:counter(step); font-family:var(--mono); font-weight:700; font-size:.82rem; color:#fff; background:var(--blue-ink); width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; } .steps h3 { font-family:var(--display); font-weight:600; font-size:1.16rem; letter-spacing:-.01em; color:#1E70C8; } .steps p { color:#2A3040; font-size:1rem; line-height:1.5; margin-top:4px; max-width:46ch; } /* "Getting started": how a business becomes a client so TraceNet can support them. Split like the contact section the client loves — pitch on the left, the three onboarding steps on a white floating card on the right. Fills one screen and the full width; depth from the card's cast shadow, one blue accent, no per-step boxes, no connector line, no numbers. */ .startsec { position:relative; overflow:hidden; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(96px,12vh,140px) clamp(28px,5vh,52px); box-sizing:border-box; } .startsec .wrap { position:relative; z-index:1; } .start { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(30px,4vw,64px); align-items:center; } /* left: the pitch. Archivo headings, open spacing, and generous room between every block so nothing reads as squished. The free-months offer is pulled out as the persuasive focal point. */ .start__pitch { display:flex; flex-direction:column; align-items:flex-start; gap:clamp(24px,3.6vh,40px); } .start__h { margin:0; color:#1E70C8; font-family:var(--body); font-weight:600; line-height:1.12; letter-spacing:0; font-size:clamp(1.8rem,1.2rem + 2vw,2.7rem); } .start__lede { margin:0; color:#2A3040; font-size:clamp(1.04rem,.98rem + .38vw,1.2rem); line-height:1.7; max-width:40ch; } .start__offer { display:flex; flex-direction:column; gap:clamp(8px,1.4vh,14px); } .start__offer-h { margin:0; font-family:var(--body); font-weight:700; color:#101828; line-height:1.2; font-size:clamp(1.35rem,1.05rem + 1.1vw,1.85rem); } .start__offer-p { margin:0; color:#2A3040; font-size:clamp(1rem,.95rem + .3vw,1.14rem); line-height:1.7; max-width:42ch; } .start__cta { padding:17px 34px; font-size:1.05rem; } /* right: the three onboarding steps on the deep-blue panel, matching the home contact form — white titles, mint-green cues, real cast-shadow depth. Wide gaps so the card breathes. */ .start__steps { position:relative; list-style:none; margin:0; padding:clamp(34px,4.6vh,58px) clamp(32px,3vw,52px); background:var(--blue-ink); border-radius:24px; box-shadow:0 44px 74px -34px rgba(14,46,78,.6); display:flex; flex-direction:column; gap:clamp(28px,4.6vh,52px); } .start__step { position:relative; display:flex; flex-direction:column; gap:7px; transition:transform .22s ease; } .start__step:hover { transform:translateX(5px); } .start__cue { font-family:var(--body); font-weight:700; font-size:.9rem; letter-spacing:.03em; color:var(--lime); } .start__stitle { margin:0 0 2px; font-family:var(--body); font-weight:600; letter-spacing:0; color:#fff; font-size:clamp(1.16rem,1rem + .55vw,1.5rem); line-height:1.15; } .start__step:hover .start__stitle { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; } .start__step p { margin:0; color:rgba(255,255,255,.9); font-size:clamp(.98rem,.93rem + .25vw,1.1rem); line-height:1.66; max-width:44ch; } @media (max-width:900px){ .startsec{ min-height:0; } .start{ grid-template-columns:1fr; gap:clamp(30px,5vh,48px); } } /* "What our support desk handles": editorial master-detail. Vertical index of topics on the left, the chosen topic's detail on the right. No cards, no shadows, no icons. Pure CSS radios. */ .deskui__h2 { text-align:center; } .deskui__r { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .deskui__grid { margin:clamp(30px,5vh,54px) auto 0; max-width:940px; display:grid; grid-template-columns:minmax(210px,1fr) minmax(0,1.55fr); gap:clamp(26px,4vw,60px); align-items:start; } .deskui__list { list-style:none; margin:0; padding:0; align-self:start; } .deskui__list label { position:relative; display:block; cursor:pointer; padding:14px 24px 14px 32px; font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,1rem + .7vw,1.46rem); color:#2A3040; line-height:1.15; transition:color .2s ease; } /* the active marker is the real logo mark, spinning into place */ .deskui__list label::before { content:''; position:absolute; left:0; top:50%; width:21px; height:21px; background:url(/assets/logo-mark.svg) center/contain no-repeat; transform:translateY(-50%) scale(0) rotate(-45deg); opacity:0; transition:transform .34s cubic-bezier(.2,.7,.2,1), opacity .24s ease; } .deskui__list label:hover { color:#1E70C8; } /* the detail floats on a white card above the blue ground; depth is a real cast shadow */ .deskui__detail { position:relative; overflow:hidden; background:#fff; border-radius:20px; padding:clamp(30px,4.2vh,48px) clamp(28px,3.6vw,52px); box-shadow:0 34px 64px -34px rgba(14,46,78,.45); } /* keep the writing out of the honeycomb's corner */ @media (min-width:721px){ .deskui__detail { padding-right:132px; } } /* mobile keeps the watermark too; the mobile block below reserves bottom space so text never covers it */ .deskui__mark { position:absolute; right:12px; bottom:12px; width:112px; height:auto; pointer-events:none; filter:drop-shadow(0 12px 14px rgba(14,46,78,.20)); transform:perspective(620px) rotateX(8deg) rotateZ(-4deg); transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .45s ease; } /* each honeycomb cell breathes on its own, like live monitoring activity */ .deskui__mark polygon { opacity:.34; transform-box:fill-box; transform-origin:center; animation:cellpulse 3.4s ease-in-out infinite; } .deskui__mark polygon:nth-child(1){ animation-delay:0s } .deskui__mark polygon:nth-child(2){ animation-delay:.24s } .deskui__mark polygon:nth-child(3){ animation-delay:.48s } .deskui__mark polygon:nth-child(4){ animation-delay:.72s } .deskui__mark polygon:nth-child(5){ animation-delay:.96s } .deskui__mark polygon:nth-child(6){ animation-delay:1.2s } .deskui__mark polygon:nth-child(7){ animation-delay:1.44s } /* reactive like the hero: on the card, the honeycomb straightens, lifts in 3D and its cells fire faster */ .deskui__detail:hover .deskui__mark { transform:perspective(620px) rotateX(0deg) rotateZ(0deg) scale(1.14) translateY(-6px); filter:drop-shadow(0 22px 24px rgba(14,46,78,.34)); } .deskui__detail:hover .deskui__mark polygon { animation-duration:1.5s; } @keyframes cellpulse { 0%,100%{ opacity:.3 } 50%{ opacity:.62 } } @media (prefers-reduced-motion:reduce){ .deskui__mark { transform:none } .deskui__mark polygon { animation:none; opacity:.45 } } .deskui__panels { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; } .deskui__panel { grid-area:1 / 1; min-width:0; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; } .deskui__panel h3 { position:relative; display:inline-block; font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem); letter-spacing:-.02em; color:var(--ac,#1E70C8); margin-bottom:.5em; padding-bottom:9px; } /* accent underline draws in when a topic is selected */ .deskui__panel h3::after { content:''; position:absolute; left:0; bottom:0; width:100%; height:3px; border-radius:2px; background:var(--ac,#1E70C8); transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.2,.7,.2,1) .12s; } .deskui__panels .deskui__panel { --ac:#1E70C8; } .deskui__panel p { font-family:var(--body); font-size:clamp(1.04rem,.9rem + .5vw,1.24rem); line-height:1.62; color:#2A3040; max-width:100%; margin:0; } .deskui__panel a { color:var(--blue-ink); font-weight:600; text-decoration:none; border-bottom:2px solid rgba(46,164,255,.4); transition:color .18s, border-color .18s; } .deskui__panel a:hover { color:var(--orange-ink); border-bottom-color:var(--orange); } #desk-1:checked ~ .deskui__grid .deskui__list li:nth-child(1) label, #desk-2:checked ~ .deskui__grid .deskui__list li:nth-child(2) label, #desk-3:checked ~ .deskui__grid .deskui__list li:nth-child(3) label, #desk-4:checked ~ .deskui__grid .deskui__list li:nth-child(4) label, #desk-5:checked ~ .deskui__grid .deskui__list li:nth-child(5) label, #desk-6:checked ~ .deskui__grid .deskui__list li:nth-child(6) label { color:#1E70C8; font-weight:700; } #desk-1:checked ~ .deskui__grid .deskui__list li:nth-child(1) label::before, #desk-2:checked ~ .deskui__grid .deskui__list li:nth-child(2) label::before, #desk-3:checked ~ .deskui__grid .deskui__list li:nth-child(3) label::before, #desk-4:checked ~ .deskui__grid .deskui__list li:nth-child(4) label::before, #desk-5:checked ~ .deskui__grid .deskui__list li:nth-child(5) label::before, #desk-6:checked ~ .deskui__grid .deskui__list li:nth-child(6) label::before { transform:translateY(-50%) scale(1) rotate(0deg); opacity:1; } #desk-1:checked ~ .deskui__grid .deskui__panel:nth-child(1), #desk-2:checked ~ .deskui__grid .deskui__panel:nth-child(2), #desk-3:checked ~ .deskui__grid .deskui__panel:nth-child(3), #desk-4:checked ~ .deskui__grid .deskui__panel:nth-child(4), #desk-5:checked ~ .deskui__grid .deskui__panel:nth-child(5), #desk-6:checked ~ .deskui__grid .deskui__panel:nth-child(6) { opacity:1; visibility:visible; transform:none; } #desk-1:checked ~ .deskui__grid .deskui__panel:nth-child(1) h3::after, #desk-2:checked ~ .deskui__grid .deskui__panel:nth-child(2) h3::after, #desk-3:checked ~ .deskui__grid .deskui__panel:nth-child(3) h3::after, #desk-4:checked ~ .deskui__grid .deskui__panel:nth-child(4) h3::after, #desk-5:checked ~ .deskui__grid .deskui__panel:nth-child(5) h3::after, #desk-6:checked ~ .deskui__grid .deskui__panel:nth-child(6) h3::after { transform:scaleX(1); } #desk-1:focus-visible ~ .deskui__grid .deskui__list li:nth-child(1) label, #desk-2:focus-visible ~ .deskui__grid .deskui__list li:nth-child(2) label, #desk-3:focus-visible ~ .deskui__grid .deskui__list li:nth-child(3) label, #desk-4:focus-visible ~ .deskui__grid .deskui__list li:nth-child(4) label, #desk-5:focus-visible ~ .deskui__grid .deskui__list li:nth-child(5) label, #desk-6:focus-visible ~ .deskui__grid .deskui__list li:nth-child(6) label { outline:2px solid #1E70C8; outline-offset:4px; border-radius:3px; } @media (max-width:720px){ .deskui__grid { grid-template-columns:1fr; gap:18px; } .deskui__list { border-right:none; border-bottom:1px solid rgba(4,34,42,.14); padding-bottom:6px; } .deskui__list label { padding:11px 0 11px 32px; } /* keep the marker's lane so it never covers the label */ .deskui__detail { padding-bottom:118px; } /* reserve room so text never covers the corner watermark */ .deskui__mark { width:86px; right:16px; bottom:16px; } } @media (prefers-reduced-motion:reduce){ .deskui__panel, .deskui__list label { transition:none; } } /* faint logo-mark watermark echoing the detail card, in the FAQ corner */ .faqsec { position:relative; overflow:hidden; } .faqsec::before { content:''; position:absolute; right:-46px; top:-38px; width:200px; height:200px; background:url(/assets/logo-mark.svg) center/contain no-repeat; opacity:.05; pointer-events:none; } .faqsec .wrap { position:relative; z-index:1; } /* FAQ accordion (also feeds FAQPage schema). Centered, white cards lifted by a soft cast shadow (no gray border), generous spacing. One blue accent. */ .faqsec .h2 { text-align:center; } .faq { margin:clamp(30px,4.5vh,56px) auto 0; max-width:760px; display:flex; flex-direction:column; gap:clamp(14px,1.9vh,20px); } .faq details { background:#fff; border:0; border-radius:18px; padding:0 clamp(22px,2.4vw,32px); box-shadow:0 12px 28px -20px rgba(14,46,78,.42); transition:box-shadow .22s ease, transform .22s ease; } .faq details:hover { box-shadow:0 18px 34px -20px rgba(14,46,78,.5); transform:translateY(-2px); } .faq details[open] { box-shadow:0 24px 46px -24px rgba(14,46,78,.55); transform:none; } .faq summary { list-style:none; cursor:pointer; padding:clamp(19px,2.3vh,25px) 0; font-family:var(--display); font-weight:600; font-size:clamp(1.02rem,.97rem + .3vw,1.18rem); letter-spacing:-.005em; color:#1E70C8; display:flex; justify-content:space-between; align-items:center; gap:20px; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:'+'; font-family:var(--mono); font-weight:700; font-size:1.4rem; line-height:1; color:var(--blue); flex:none; transition:transform .28s ease; } .faq details[open] summary::after { transform:rotate(45deg); } .faq details p { padding:0 0 clamp(20px,2.4vh,26px); margin:0; color:#2A3040; line-height:1.66; max-width:64ch; } /* service-areas hub: clean directory, white, no eyebrows. Areas grouped by state + a services list. */ .hub__h { text-align:center; margin:0 auto clamp(28px,4vh,48px); } .hub__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,60px); max-width:940px; margin:0 auto; background:#fff; border-radius:24px; box-shadow:0 34px 64px -34px rgba(14,46,78,.42); padding:clamp(34px,5vh,60px) clamp(32px,4vw,64px); } .hub__col h3 { margin:0 0 clamp(12px,1.6vh,18px); font-family:var(--display); font-weight:600; font-size:clamp(1.16rem,1rem + .5vw,1.5rem); letter-spacing:-.005em; } .hub__state { color:#1E70C8; text-decoration:none; border-bottom:2px solid transparent; transition:border-color .18s; } .hub__state:hover { border-bottom-color:rgba(46,164,255,.5); } .hub__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(9px,1.3vh,14px); } .hub__col li a { color:#2A3040; text-decoration:none; border-bottom:2px solid rgba(46,164,255,.35); transition:color .18s, border-color .18s; font-size:clamp(1rem,.95rem + .2vw,1.12rem); } .hub__col li a:hover { color:var(--orange-ink); border-bottom-color:var(--orange); } .hub__note { text-align:center; max-width:52ch; margin:clamp(30px,4vh,52px) auto 0; color:#2A3040; font-size:clamp(1rem,.95rem + .25vw,1.14rem); line-height:1.6; } .hub__services { list-style:none; margin:0 auto; padding:0; max-width:820px; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.6vw,20px); } .hub__services a { display:inline-block; font-family:var(--display); font-weight:600; color:#1E70C8; text-decoration:none; font-size:clamp(1rem,.95rem + .3vw,1.18rem); padding:10px 18px; border-radius:12px; box-shadow:0 12px 26px -18px rgba(14,46,78,.4); transition:transform .18s, box-shadow .18s; } .hub__services a:hover { transform:translateY(-3px); box-shadow:0 18px 32px -18px rgba(14,46,78,.5); } @media (max-width:700px){ .hub__grid{ grid-template-columns:1fr; max-width:320px; gap:clamp(24px,4vh,36px); } } /* location pages: centered local intro */ .loc__h { text-align:center; margin:0 auto clamp(20px,3vh,34px); } .loc__body { max-width:60ch; margin:0 auto; color:#2A3040; font-size:clamp(1.04rem,.98rem + .35vw,1.2rem); line-height:1.72; text-align:center; } .loc__body p + p { margin-top:clamp(14px,1.8vh,22px); } .loc__services-h { text-align:center; margin:0 auto clamp(26px,3.6vh,44px); } /* areas served line (internal linking) */ .areas__wrap { text-align:center; max-width:720px; margin-inline:auto; } .areas__line { margin-top:18px; font-size:var(--s1); line-height:1.7; color:#2A3040; } .areas__line a { color:var(--blue-ink); text-decoration:none; border-bottom:2px solid rgba(46,164,255,.45); } .areas__line a:hover { color:var(--orange-ink); border-bottom-color:var(--orange); } .areas__wrap .btn { margin-top:30px; } /* ========================================================================== FOOTER ========================================================================== */ .foot { background:var(--band); color:var(--muted); padding-block:clamp(52px,6vw,82px) 26px; border-top:2px solid var(--ink); } .foot__grid { display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,3vw,48px); } .foot__nap { margin-top:12px; font-family:var(--mono); font-size:.78rem; font-weight:500; letter-spacing:.03em; color:var(--blue-ink); } .foot__nap span { color:var(--blue); padding:0 4px; } .foot__line { margin-top:18px; max-width:34ch; font-size:.92rem; line-height:1.55; } .foot__col { display:flex; flex-direction:column; gap:9px; } .foot__col h2 { font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-ink); margin-bottom:5px; } .foot__col a { text-decoration:none; font-size:.94rem; color:var(--muted); width:fit-content; padding-block:3px; transition:color .18s; } .foot__col a:hover { color:var(--ink); } .foot__base { margin-top:clamp(44px,5vw,72px); padding-top:20px; border-top:2px solid var(--ink); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--faint); } .foot__sig { color:var(--orange-ink); } @media (pointer:coarse),(max-width:900px){ .foot__col{ gap:2px; } .foot__col a{ padding-block:9px; } } @media (max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } } /* ========================================================================== Cybersecurity page: soft 3D flip cards (replaces the honeycomb explainer here; the honeycomb build is kept at site/pages/_cybersecurity-hexui.backup.html), plus a page-scoped effects layer: subtle brand edge-glow and floating hexagons. Everything below is scoped to .fxpage / the flip section so other pages are untouched. ========================================================================== */ /* the interactive section only: small hexagons that fade in and out (the same particle SVG the hero above uses). Nothing page-wide, no edge gradient. */ .flipsec { overflow:hidden; } .flipsec__particles { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.7; pointer-events:none; } /* the "Six ways" section is centered and reads top-to-bottom (serif is the cybersecurity accent) */ .flipsec { --sf:Constantia, Georgia, 'Times New Roman', serif; padding-block:clamp(46px,6vh,80px); } .flipsec__eyebrow, .flipsec__h2 { text-align:center; } /* keep the headline on ONE line and scale it to fit; only wrap on very small phones */ .flipsec__h2 { max-width:none; white-space:nowrap; color:#1E70C8; font-size:clamp(1.55rem, 0.5rem + 3vw, 3rem); } @media (max-width:700px){ .flipsec__h2 { white-space:normal; font-size:var(--h2); } } .flipsec__cue { margin-top:10px; text-align:center; font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-ink); } /* small, soft, 3d buttons in a centered vertical stack; each grows open on click to hold its copy */ .grow { margin:clamp(40px,6vh,68px) auto 0; display:grid; justify-content:center; grid-template-columns:repeat(2, minmax(0,250px)); gap:clamp(13px,1.9vh,18px) clamp(16px,2vw,22px); align-items:start; position:relative; z-index:1; } @media (max-width:540px){ .grow{ grid-template-columns:minmax(0,300px); } } .gcard { position:relative; display:flex; flex-direction:column; align-items:center; width:100%; } /* opening a card grows it to span the full width, so it clearly gets bigger while the rest stay 2-up */ .gcard:has(.gcard__cb:checked) { grid-column:1 / -1; } .gcard__cb { position:absolute; width:1px; height:1px; opacity:0; } .gcard__panel { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; width:100%; padding:12px 22px; border-radius:16px; background:#fff; border:2px solid var(--c); border-bottom-width:4px; box-shadow:0 16px 24px -14px rgba(14,46,78,.5), inset 0 1px 0 rgba(255,255,255,.95); transition:padding .42s cubic-bezier(.2,.7,.2,1), transform .28s ease, box-shadow .3s ease; } /* a separate cast shadow underneath for real depth (not shading painted on the shape) */ .gcard__panel::after { content:''; position:absolute; left:10%; right:10%; bottom:-9px; height:14px; border-radius:50%; background:rgba(14,46,78,.3); filter:blur(9px); z-index:-1; opacity:.55; transition:opacity .28s ease, transform .28s ease; } .gcard__panel:hover { transform:translateY(-3px); box-shadow:0 20px 28px -14px rgba(14,46,78,.55), inset 0 1px 0 rgba(255,255,255,.9); } .gcard__panel:hover::after { opacity:.75; transform:translateY(3px) scaleX(1.04); } .gcard__cb:focus-visible ~ .gcard__panel { outline:3px solid var(--c); outline-offset:4px; } /* topic row: the real logo mark flanks the word on both sides, slow spin in opposite directions */ .gcard__head { display:flex; align-items:center; justify-content:center; gap:8px; } .gcard__mark { width:20px; height:auto; flex:none; filter:drop-shadow(0 4px 7px rgba(14,46,78,.24)); animation:spinslow 12s linear infinite; } .gcard__panel:hover .gcard__mark { animation-duration:5s; } @media (prefers-reduced-motion:reduce){ .gcard__mark { animation:none; } } .gcard__word { font-family:var(--sf); font-weight:700; font-size:clamp(1.05rem,1rem + .4vw,1.3rem); color:var(--c); white-space:nowrap; } .gcard__cue { font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c); opacity:.64; } .gcard__body { width:100%; max-height:0; overflow:hidden; opacity:0; transition:max-height .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease, margin-top .3s ease; } .gcard__p { display:block; font-family:var(--body); font-size:clamp(.9rem,1.9vh,1.02rem); line-height:1.5; color:#2A3040; text-align:center; max-width:42ch; margin-inline:auto; } /* open: the button grows to compensate, the copy fades in inside it, the cue hides */ .gcard__cb:checked ~ .gcard__panel { padding:22px 34px 20px; box-shadow:0 26px 40px -18px rgba(14,46,78,.55), inset 0 1px 0 rgba(255,255,255,.95); } .gcard__cb:checked ~ .gcard__panel .gcard__cue { display:none; } .gcard__cb:checked ~ .gcard__panel .gcard__body { max-height:260px; opacity:1; margin-top:11px; } @media (prefers-reduced-motion:reduce){ .gcard__panel, .gcard__body { transition:none; } } /* contact form spam honeypot (never visible; bots that fill it are dropped) */ .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}