/* ===================================================================== VIDYUTT – shared site stylesheet Covers: header, footer, and the hover/interaction layer. Page-specific responsive rules live inline in each page's . ===================================================================== */ *{box-sizing:border-box;} /* ===================================================================== FLUID TYPE SCALE All font sizes and layout widths across the site are authored in rem, so the whole design keys off this single root value. The scale is continuous (no step jumps) and every multiplier flows through --vd-type-scale, so presentation mode is one factor rather than a parallel set of breakpoints. <=480px 16px -> 14.75px (eases down so tight layouts stop crowding) 480-1500 16px (the original tuned design, untouched) >=1500px 16px -> 18.5px @1920 -> 22.4px @2560 -> 30px @3840 (ceiling) ===================================================================== */ :root{--vd-type-scale:1;} html{font-size:calc(16px * var(--vd-type-scale));} /* Small screens: ease the scale down so long words / dense rows stop encroaching. Joins 16px exactly at 480px, floors at 14.75px. */ @media (max-width:480px){ html{font-size:clamp(calc(14.75px * var(--vd-type-scale)), calc((0.952vw + 11.43px) * var(--vd-type-scale)), calc(16px * var(--vd-type-scale)));} } /* Large screens / TVs / projectors: continuous growth. Joins 16px exactly at 1500px, so there is no jump at the breakpoint, and tops out at 30px. */ @media (min-width:1500px){ html{font-size:clamp(calc(16px * var(--vd-type-scale)), calc((0.6vw + 7px) * var(--vd-type-scale)), calc(30px * var(--vd-type-scale)));} } /* Presentation mode: ?present=1 (or class="vd-present") multiplies the whole scale for projecting to a room. Works at every width. */ html.vd-present{--vd-type-scale:1.25;} /* ---------- include loader: avoid flash before partials inject ---------- */ [data-include]:empty{min-height:1px;} /* ===================================================================== HEADER ===================================================================== */ .vd-header{position:sticky;top:0;z-index:50;background:rgba(21,31,54,0.90);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(59,130,246,0.16);font-family:'Inter',ui-sans-serif,system-ui,sans-serif;} /* Canonical content width. Authored in rem so it grows with the fluid type scale above — header, main, footer and page sections stay aligned at every width instead of the chrome outgrowing a frozen px column. */ :root{--vd-content:83.75rem;} /* = 1340px at the 16px root */ .vd-header-inner{max-width:var(--vd-content);margin:0 auto;padding:0 28px;height:86px;display:flex;align-items:center;justify-content:space-between;gap:18px;} .vd-logo{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;} .vd-logo-mark{height:50px;width:auto;display:block;} .vd-logo-word{display:flex;flex-direction:column;line-height:1;} .vd-logo-name{font-family:'Sora',sans-serif;font-weight:700;font-size:1.375rem;letter-spacing:.06em;color:#fff;} .vd-logo-sub{font-size:0.5625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7fb0ff;margin-top:4px;} .vd-logo-tag{font-size:0.53125rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#9aa8bd;margin-top:4px;} @media (max-width:420px){.vd-logo-sub,.vd-logo-tag{display:none;}.vd-logo-name{font-size:1.25rem;}.vd-logo-mark{height:44px;}} .vd-nav{display:flex;align-items:center;gap:2px;} .vd-navlink{position:relative;display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-size:0.875rem;font-weight:500;letter-spacing:.005em;padding:9px 13px;border-radius:9px;white-space:nowrap;color:#cbd5e1;cursor:pointer;background:transparent;border:none;font-family:inherit;transition:color .18s,background .18s;} .vd-navlink:hover{color:#fff;background:rgba(59,130,246,0.12);} .vd-navlink.vd-active{color:#60a5fa;} .vd-navlink.vd-active::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:#3b82f6;} /* Flagship nav item (VACS) */ .vd-navlink.vd-nav-flagship{color:#eaf2ff;font-weight:600;background:linear-gradient(180deg,rgba(59,130,246,0.22),rgba(59,130,246,0.09));box-shadow:inset 0 0 0 1px rgba(96,165,250,0.45),0 0 16px -5px rgba(59,130,246,0.7);} .vd-navlink.vd-nav-flagship::before{content:"\2605";font-size:0.5625rem;color:#fbbf24;margin-right:5px;position:relative;top:-1px;} .vd-navlink.vd-nav-flagship:hover{color:#fff;background:linear-gradient(180deg,rgba(59,130,246,0.34),rgba(59,130,246,0.16));} .vd-mob-link.vd-nav-flagship{color:#7fb0ff;font-weight:600;} .vd-mob-link.vd-nav-flagship::before{content:"\2605";font-size:0.625rem;color:#fbbf24;margin-right:7px;} .vd-group{position:relative;display:flex;} .vd-grp-pop{position:absolute;top:100%;left:0;min-width:248px;padding:14px 8px 8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60;} .vd-group:hover .vd-grp-pop{opacity:1;visibility:visible;transform:none;} .vd-grp-inner{background:rgba(10,15,28,0.98);border:1px solid rgba(59,130,246,0.2);border-radius:13px;padding:8px;display:flex;flex-direction:column;gap:2px;box-shadow:0 22px 48px -18px rgba(0,0,0,0.75);} .vd-grp-pop a{display:block;padding:11px 13px;border-radius:9px;color:#cbd5e1;font-size:0.875rem;font-weight:500;text-decoration:none;transition:color .16s,background .16s;} .vd-grp-pop a:hover{background:rgba(59,130,246,0.16);color:#fff;} .vd-grp-pop a.vd-active{color:#60a5fa;background:rgba(59,130,246,0.1);} .vd-grp-sub{display:block;font-size:0.71875rem;color:#7f8ba0;margin-top:2px;font-weight:400;} .vd-desktop-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;background:#2563eb;color:#fff;font-size:0.875rem;font-weight:600;text-decoration:none;padding:12px 18px;border-radius:11px;box-shadow:0 6px 18px -6px rgba(37,99,235,0.7);transition:background .2s,transform .2s;} .vd-desktop-cta:hover{background:#1d4ed8;transform:translateY(-1px);} .vd-burger{display:none;background:transparent;border:1px solid rgba(148,163,184,0.4);border-radius:9px;padding:9px;cursor:pointer;color:#fff;} .vd-mobile-nav{border-top:1px solid rgba(59,130,246,0.14);background:rgba(8,12,24,0.99);padding:14px 28px 24px;} .vd-mob-link{display:block;text-decoration:none;font-size:0.96875rem;font-weight:500;padding:13px 6px;border-bottom:1px solid rgba(148,163,184,0.12);color:#e2e8f0;} .vd-mob-link.vd-active{color:#60a5fa;font-weight:600;} .vd-mob-head{padding:14px 6px 4px;font-size:0.71875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9aa8bd;} .vd-mob-sub{display:block;text-decoration:none;font-size:0.9375rem;font-weight:500;padding:11px 14px;border-bottom:1px solid rgba(148,163,184,0.1);color:#cbd5e1;} .vd-mob-sub.vd-active{color:#60a5fa;font-weight:600;} .vd-mob-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:#2563eb;color:#fff;font-size:0.9375rem;font-weight:600;text-decoration:none;padding:14px;border-radius:11px;margin-top:18px;} @media (max-width:1240px){ .vd-desktop-nav{display:none !important;} .vd-desktop-cta{display:none !important;} .vd-burger{display:inline-flex !important;} } /* ===================================================================== FOOTER ===================================================================== */ .vd-footer{background:#131c30;color:#cbd5e1;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;position:relative;overflow:hidden;} .vd-foot-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.20;pointer-events:none;} .vd-foot-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,28,48,0.46),rgba(19,28,48,0.66));pointer-events:none;} .vd-foot-glow{position:absolute;inset:0;background-image:radial-gradient(circle at 18% 0%,rgba(37,99,235,0.16),transparent 42%);pointer-events:none;} .vd-foot-wrap{position:relative;max-width:var(--vd-content);margin:0 auto;padding:64px 28px 26px;} .vd-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr;gap:40px;} .vd-foot-logo{display:inline-flex;align-items:center;gap:13px;text-decoration:none;margin-bottom:20px;} .vd-foot-mark{height:58px;width:auto;display:block;} .vd-foot-word{display:flex;flex-direction:column;line-height:1;} .vd-foot-name{font-family:'Sora',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:.06em;color:#fff;} .vd-foot-sub{font-size:0.59375rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7fb0ff;margin-top:5px;} .vd-foot-tag{font-size:0.5625rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#9aa8bd;margin-top:5px;} .vd-foot-blurb{font-size:0.875rem;line-height:1.65;color:#aab8cc;max-width:19.375rem;margin:0 0 22px;} .vd-foot-socials{display:flex;gap:10px;} .vd-soc{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;border:1px solid rgba(148,163,184,0.22);color:#cbd5e1;text-decoration:none;transition:all .2s;} .vd-soc:hover{background:#2563eb;border-color:#2563eb;color:#fff;} .vd-foot-h{font-family:'Sora',sans-serif;font-size:0.875rem;font-weight:600;color:#fff;letter-spacing:.04em;text-transform:uppercase;margin:0 0 18px;} .vd-foot-link{display:block;font-size:0.875rem;color:#aab8cc;text-decoration:none;margin-bottom:12px;transition:color .18s;} .vd-foot-link:hover{color:#fff;} .vd-news{display:flex;flex-direction:column;gap:10px;} .vd-news input{background:rgba(255,255,255,0.04);border:1px solid rgba(148,163,184,0.24);border-radius:9px;padding:12px 14px;color:#fff;font-size:0.875rem;font-family:inherit;outline:none;} .vd-news input:focus{border-color:rgba(96,165,250,0.6);} .vd-news button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#2563eb;color:#fff;font-size:0.875rem;font-weight:600;border:none;cursor:pointer;padding:12px;border-radius:9px;transition:background .2s;} .vd-news button:hover{background:#1d4ed8;} .vd-foot-bottom{margin-top:52px;border-top:1px solid rgba(148,163,184,0.14);padding:22px 0 14px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;} .vd-foot-bottom p{font-size:0.8125rem;color:#9aa8bd;margin:0;} .vd-foot-credit{display:inline-flex;align-items:center;gap:11px;text-decoration:none;} .vd-foot-credit span{font-size:0.78125rem;color:#9aa8bd;letter-spacing:.01em;} .vd-foot-credit img{height:40px;width:auto;display:block;} #vd-top{position:fixed;right:22px;bottom:24px;z-index:90;width:54px;height:54px;padding:0;border:1px solid rgba(96,165,250,0.5);border-radius:14px;cursor:pointer;background:linear-gradient(150deg,#0b1326,#070b16);box-shadow:0 0 0 1px rgba(8,12,24,0.6),0 10px 28px -8px rgba(37,99,235,0.6),inset 0 1px 0 rgba(255,255,255,0.06);opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility .3s,box-shadow .2s,border-color .2s;} #vd-top.vd-show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} #vd-top:hover{border-color:#7cb0ff;box-shadow:0 0 0 1px rgba(8,12,24,0.6),0 14px 34px -6px rgba(37,99,235,0.9),inset 0 1px 0 rgba(255,255,255,0.1);transform:translateY(0) scale(1.07);} @media (max-width:980px){.vd-foot-grid{grid-template-columns:1fr 1fr !important;gap:32px !important;}} @media (max-width:560px){.vd-foot-grid{grid-template-columns:1fr !important;}#vd-top{right:14px !important;bottom:16px !important;width:46px !important;height:46px !important;}} /* ===================================================================== HOVER / INTERACTION LAYER These restore the React onMouseEnter/onMouseLeave style swaps that were flattened away. Class hooks are added to each page at build time. !important is required to override the elements' inline base styles. ===================================================================== */ /* Carousel tech cards (homepage) – also covered structurally */ #vd-tech-row{cursor:grab;} #vd-tech-row > div{cursor:default;} #vd-tech-row > div:hover, .vd-card:hover{ transform:translateY(-4px) !important; box-shadow:0 18px 36px -18px rgba(15,27,45,0.4) !important; border-color:#c3d6fb !important; } /* Dark IP / feature tiles */ .vd-ip:hover{ transform:translateY(-4px) !important; box-shadow:0 18px 36px -16px rgba(47,123,246,0.5) !important; } /* Solid blue buttons */ .vd-btn-blue:hover{background:#1d4ed8 !important;} /* White / light "lift" buttons */ .vd-btn-lift:hover{ transform:translateY(-2px) !important; box-shadow:0 14px 30px -12px rgba(0,0,0,0.6) !important; } /* Ghost / outline buttons on dark */ .vd-btn-ghost:hover{ background:rgba(255,255,255,0.09) !important; border-color:rgba(148,170,210,0.7) !important; } /* Pill / outline links */ .vd-pill:hover{border-color:#2f7bf6 !important;color:#2563eb !important;} /* Generic hover-lift fallback for any other transitioned card-like element */ .vd-lift:hover{transform:translateY(-3px) !important;box-shadow:0 16px 32px -18px rgba(15,27,45,0.3) !important;} /* Scroll-reveal initial state (js/site.js animates to visible) */ [data-reveal].vd-reveal-init{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;} [data-reveal].vd-reveal-in{opacity:1 !important;transform:none !important;} /* ============================================================ Decorative side gutters (wide screens only). js/site.js injects
= a stretched gradient backdrop + two animated circuit rails. On wide viewports
is centred into a column so the rails fill the space on either side. Purely decorative; ignores input. ============================================================ */ .vd-decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none;} .vd-decor-backdrop{position:absolute;inset:0;background:#0a1020 url('../assets/gradient-bg.jpg') center/cover no-repeat;} .vd-decor-rail{position:absolute;top:0;bottom:0;width:calc((100vw - var(--vd-content)) / 2);max-width:28.75rem;overflow:hidden;} .vd-decor-rail.left{left:0;--rail1:#38bdf8;--rail2:#60a5fa;} .vd-decor-rail.right{right:0;--rail1:#38bdf8;--rail2:#60a5fa;} .vd-rail-svg{position:absolute;top:0;left:0;width:100%;height:100%;display:block;} /* Chip / hex glyphs – gently breathing (drift + fade) */ .vd-rail-glyph{fill:none;stroke:var(--rail1);stroke-width:1.4;opacity:.3; animation-name:vd-rail-float;animation-timing-function:ease-in-out;animation-iteration-count:infinite;} .vd-rail-glyph line{stroke:var(--rail1);} .vd-rail-glyph-core{fill:var(--rail2);stroke:none;opacity:.5;} /* Subtle drifting particles */ .vd-rail-particle{fill:var(--rail1);animation-name:vd-rail-particle;animation-timing-function:linear;animation-iteration-count:infinite;} @keyframes vd-rail-float{0%,100%{opacity:.16;transform:translateY(0);}50%{opacity:.42;transform:translateY(-8px);}} @keyframes vd-rail-particle{0%{transform:translateY(0);opacity:0;}18%{opacity:var(--pop,.45);}82%{opacity:var(--pop,.45);}100%{transform:translateY(calc(-1 * var(--drift,180px)));opacity:0;}} /* Frame the content + reveal the decorated gutters only where there's room */ @media (min-width:1560px){ .vd-decor{display:block;} body::before{display:none !important;} main{max-width:var(--vd-content) !important;margin-left:auto !important;margin-right:auto !important; background:#e6eaf1 !important; box-shadow:0 0 0 1px rgba(130,170,255,.16), 0 40px 130px -40px rgba(0,0,0,.75), 0 0 90px -24px rgba(48,96,200,.3) !important;} } @media (prefers-reduced-motion: reduce){ .vd-rail-glyph,.vd-rail-particle{animation:none !important;} } /* ============================================================ Auto-hiding header: hide on scroll down, reveal on scroll up. The [data-include] wrapper is unwrapped so position:sticky sticks to the viewport for the whole page (js/site.js toggles .vd-header--hidden based on scroll direction). ============================================================ */ [data-include]{display:contents;} .vd-header{transition:transform .35s cubic-bezier(.16,.84,.44,1);will-change:transform;} .vd-header.vd-header--hidden{transform:translateY(-100%);} @media (prefers-reduced-motion: reduce){.vd-header{transition:none;}} /* ===================================================================== RESPONSIVE LAYER (shared; replaces the per-page duplicates) ===================================================================== */ /* --- Header fit ----------------------------------------------------- .vd-header-inner shares --vd-content with main/footer, and that token is in rem, so the header column grows in step with the fluid type scale instead of being pinned to a wider px value (which knocked the header out of alignment with the content below it on >=1500px screens). The CTA still only appears once the header genuinely has room. */ @media (max-width:1499px){ .vd-desktop-cta{display:none !important;} } @media (min-width:1241px) and (max-width:1400px){ .vd-navlink{padding:9px 10px;} } /* --- Grid cascade --------------------------------------------------- Inline grids authored as repeat(N,1fr) step down 4 -> 3 -> 2 -> 1 so columns are never crushed at in-between widths. */ @media (max-width:1200px){ [style*="repeat(7,"],[style*="repeat(6,"],[style*="repeat(5,"] {grid-template-columns:repeat(4,1fr) !important;} } @media (max-width:980px){ [style*="repeat(7,"],[style*="repeat(6,"],[style*="repeat(5,"],[style*="repeat(4,"] {grid-template-columns:repeat(3,1fr) !important;} } @media (max-width:780px){ [style*="repeat(7,"],[style*="repeat(6,"],[style*="repeat(5,"],[style*="repeat(4,"],[style*="repeat(3,"] {grid-template-columns:repeat(2,1fr) !important;} } @media (max-width:620px){ [style*="grid-template-columns"]{grid-template-columns:1fr !important;} } /* --- Section gutters ------------------------------------------------ */ @media (max-width:900px){section>div{padding-left:24px !important;padding-right:24px !important;}} @media (max-width:680px){section>div{padding-left:18px !important;padding-right:18px !important;}} @media (max-width:440px){section>div{padding-left:14px !important;padding-right:14px !important;}} /* --- Media never pushes the page sideways --------------------------- */ img,video,canvas{max-width:100%;} .vd-decor img,.vd-decor svg,.vd-decor canvas{max-width:none;} table{max-width:100%;} /* --- Flex strips wrap instead of squeezing -------------------------- */ @media (max-width:900px){ .vd-stat-strip,.vd-stat,.pa-bottom,.kc-bottom,.vacs-feat{flex-wrap:wrap !important;} } /* --- Dropdown panels must not inflate the header's scroll width ------ .vd-grp-pop is visibility:hidden when closed but still occupies layout. Anchored at left:0 it overhung the header's right edge (worse once the CTA was hidden and the nav sat flush right), forcing a horizontal scrollbar. Anchor it to the group's right edge instead. */ .vd-grp-pop{left:auto;right:0;} /* --- Flex strip cells must be allowed to shrink --------------------- Flex items default to min-width:auto, so long labels push past their cell instead of wrapping. */ .pa-bottom>div,.kc-bottom>div,.vd-stat-strip>div,.vd-stat>div,.vacs-feat>div{min-width:0;} .pa-bottom>div>div,.kc-bottom>div>div,.vacs-feat>div>div,.vd-stat>div>span{min-width:0;} /* --- Footer grid ---------------------------------------------------- Five columns only fit on wide screens: at ~1024px the 1.6fr logo cell was narrower than the logo lockup, so it ran into the "Company" column. Step it down earlier and let cells shrink. */ @media (max-width:1240px){.vd-foot-grid{grid-template-columns:1.5fr 1fr 1fr !important;gap:30px 26px !important;}} @media (max-width:900px){.vd-foot-grid{grid-template-columns:1fr 1fr !important;gap:30px 24px !important;}} @media (max-width:560px){.vd-foot-grid{grid-template-columns:1fr !important;}} .vd-foot-grid>div,.vd-foot-word{min-width:0;} /* --- Compact header CTA (1241-1499px) ------------------------------- The full header (logo + 7-item nav + CTA) needs ~1490px. Rather than drop the contact path entirely on ~1366px laptops, show a compact CTA and trim the logo sub-lines in that band. */ .vd-cta-mini{display:none;} @media (min-width:1241px) and (max-width:1499px){ .vd-desktop-cta{display:inline-flex !important;padding:10px 14px;} .vd-cta-full{display:none;} .vd-cta-mini{display:inline;} .vd-logo-sub,.vd-logo-tag{display:none;} }