/* ========================================================================= A Square Technosolutions — shared stylesheet Used by index.html (loads navbar.html + footer.html as partials). Depends on Tailwind CDN + Google Fonts being linked in first. ========================================================================= */ :root{ /* Palette pulled directly from the logo: charcoal/black + logo orange. */ --navy:#1A1A1A; --navy-2:#262626; --navy-3:#0D0D0D; --amber:#E8752A; --amber-2:#F4954F; --steel:#6B6B6B; --ink:#1A1A1A; --paper:#F7F6F4; } html{ scroll-behavior:smooth; scroll-padding-top:96px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ font-family:'Inter',sans-serif; } .font-display{ font-family:'Space Grotesk',sans-serif; } /* ============ navbar ============ */ .nav-link{ position:relative; } .nav-link::after{ content:""; position:absolute; left:0; bottom:-6px; width:0%; height:2px; background:var(--amber); border-radius:2px; transition:width .25s ease; } .nav-link:hover::after, .nav-link.active::after{ width:100%; } .dropdown-panel{ opacity:0; visibility:hidden; transform:translateY(8px) scale(.98); transition:opacity .2s ease, transform .2s ease, visibility .2s; } .dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); } .diag-btn{ clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } #mobileDrawer{ transition: transform .35s cubic-bezier(.4,0,.2,1); } #mobileDrawer.closed{ transform: translateX(100%); } #drawerOverlay{ transition: opacity .3s ease; } .marquee-dot{ background: var(--amber); } .mobile-acc-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; } .mobile-acc-btn.open + .mobile-acc-panel{ max-height:420px; } .mobile-acc-btn.open svg{ transform:rotate(90deg); } /* utility bar hide/show */ #utilityBar{ will-change: max-height, opacity; } #siteHeader .main-nav-bar{ transition: box-shadow .35s ease, background-color .35s ease; } #siteHeader.scrolled .main-nav-bar{ box-shadow: 0 14px 34px -18px rgba(11,27,63,.35); } /* premium button shine sweep */ .btn-shine{ position:relative; overflow:hidden; } .btn-shine::before{ content:""; position:absolute; top:0; left:-60%; width:35%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); transition:left .55s ease; pointer-events:none; } .btn-shine:hover::before{ left:130%; } .btn-shine:active{ transform:translateY(1px); } /* photo tiles: real images with brand-tinted overlay so everything feels cohesive */ .photo-tile{ position:relative; overflow:hidden; background:var(--navy); } .photo-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; } .photo-tile:hover img{ transform:scale(1.07); } .photo-tile.tint-dark::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,27,63,.05) 40%, rgba(11,27,63,.75) 100%); } .photo-tile.tint-navy::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,27,63,.35), rgba(11,27,63,.55)); mix-blend-mode:multiply; } .photo-tile.tint-light::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,27,63,0) 55%, rgba(11,27,63,.55) 100%); } /* footer bits */ .grid-lines{ background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 44px 44px; } .footer-link{ position:relative; transition: color .2s ease, padding-left .2s ease; } .footer-link:hover{ color:var(--amber-2); padding-left:6px; } .footer-link::before{ content:"›"; position:absolute; left:-14px; opacity:0; transition:opacity .2s ease; color:var(--amber); } .footer-link:hover::before{ opacity:1; } #toTop{ transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease; } #toTop:hover{ transform: translateY(-4px); } /* homepage bits */ .hero-bg{ background: radial-gradient(1200px 500px at 85% -10%, rgba(245,165,36,.18), transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); } .hero-slide{ transition: opacity .5s ease; } .device-panel{ background: linear-gradient(155deg,#262626,#111111); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); } .key{ background:#333333; border:1px solid rgba(255,255,255,.06); transition:background-color .25s ease; } .key.amber{ background: var(--amber); } .section-eyebrow{ color: var(--amber); } .card-hover{ position:relative; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease; } .card-hover:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px -18px rgba(11,27,63,.25); border-color: var(--amber); } .card-hover::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px 3px 0 0; background:linear-gradient(90deg, var(--amber), var(--amber-2)); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; } .card-hover:hover::before{ transform:scaleX(1); } .logo-tile{ filter: grayscale(1) opacity(.6); transition: filter .3s ease, transform .3s ease; } .logo-tile:hover{ filter: grayscale(0) opacity(1); transform: translateY(-3px); } .ref-slide{ transition: opacity .4s ease; } .quality-bg{ background: linear-gradient(180deg, rgba(7,18,48,.92), rgba(7,18,48,.96)), repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 24px); } /* trust strip */ .trust-strip{ background: linear-gradient(180deg, #ffffff, var(--paper)); } .trust-item{ position:relative; } .trust-item + .trust-item::before{ content:""; position:absolute; left:0; top:10%; height:80%; width:1px; background: linear-gradient(180deg, transparent, rgba(11,27,63,.12), transparent); } /* floating decorative blobs */ .blob{ position:absolute; border-radius:9999px; filter:blur(70px); opacity:.28; pointer-events:none; animation:float 11s ease-in-out infinite; } @keyframes float{ 0%,100%{ transform:translateY(0) translateX(0); } 50%{ transform:translateY(-26px) translateX(16px); } } @media (prefers-reduced-motion: reduce){ .blob{ animation:none; } } /* scroll-reveal */ .reveal, .reveal-scale, .reveal-stagger > *{ opacity:0; } .reveal{ transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .reveal.in{ opacity:1; transform:translateY(0); } .reveal-scale{ transform:scale(.94); transition:opacity .6s ease, transform .6s ease; } .reveal-scale.in{ opacity:1; transform:scale(1); } .reveal-stagger > *{ transform:translateY(22px); transition:opacity .55s ease, transform .55s ease; } .reveal-stagger.in > *{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal, .reveal-scale, .reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; } }