/* ============================================================================ VDUT-AI — Base: reset, typography, nav, footer, shared components Depends on tokens.css. Shared by every page. ========================================================================== */ /* ---------------------------------------------------------------- reset --- */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } /* Smooth scroll only when motion is welcome */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } html { scroll-padding-top: 96px; } /* fixed nav clearance for #anchors */ body { background: var(--ink); color: var(--bone); font-family: var(--sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--brass-select); } /* height:auto is load-bearing: the width/height attributes on every reserve space so text does not jump as photographs arrive (layout shift). Without this, any image narrowed by max-width would keep its attribute height and stretch. Every rule that sets a real height is a class selector and still wins. */ img, svg { display:block; max-width:100%; height:auto; } /* ------------------------------------------------------------ a11y ------- */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; } .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path: inset(50%); white-space:nowrap; border:0; } .skip-link { position:absolute; top:-100%; left:var(--gutter); z-index:100; background: var(--panel); color: var(--bone); border:1px solid var(--brass); padding:12px 20px; border-radius: var(--radius); font-family: var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; } .skip-link:focus { top:12px; } /* ------------------------------------------------- ambient contours ------ */ /* Ambient terrain. Tall viewBox so narrow viewports don't crop the paths away. */ .contours { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; will-change: transform; } .contours svg { width:100%; height:100%; } @media (prefers-reduced-motion: no-preference) { .contours { animation: drift 90s linear infinite alternate; } } @keyframes drift { from { transform: translate3d(0,0,0) scale(1.02); } to { transform: translate3d(-40px,-24px,0) scale(1.06); } } /* When JS parallax is active it owns the transform; the CSS drift moves to an inner layer so the two never fight over the same property. */ .contours[data-parallax] { animation:none; } .contours[data-parallax] .contours__inner { animation: drift 90s linear infinite alternate; } @media (prefers-reduced-motion: reduce) { .contours[data-parallax] .contours__inner { animation:none; } } /* ---------------------------------------------------------------- nav ---- */ .nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding: 22px var(--gutter); border-bottom:1px solid transparent; transition: background .4s ease, border-color .4s ease, padding .4s ease; } /* Pages whose hero is a dark band carry `has-hero-image` on . The nav is otherwise transparent until scrolled, and over a dark hero two things break: the nav links are Navy on navy, and the logo carries a white plate behind its sphere that only disappears on a white ground. Do not remove it. */ .has-hero-image .nav { background: var(--ink); border-bottom-color: var(--line); } .nav.is-scrolled { background: rgba(10,14,19,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); padding-top:14px; padding-bottom:14px; } .wordmark { display:inline-block; text-decoration:none; line-height:0; } /* The logo, as drawn. No filter, no mask, nothing recolouring it — the PNG's transparency does all the work. Several monochrome treatments were tried and rejected by eye. If you are tempted to add one back for contrast: measured against --ink, 52% of the artwork sits below a 3:1 ratio — but that is a TEXT legibility metric and the wrong test for a mark. Dark strokes settling into a dark ground is depth, not damage. This was Akhil's call. Judge it by eye, not by the number. */ /* Sized up on Maj Gen Indrabalan's instruction, 2026-08-06. The lockup is a wide mark with "VDUT-AI" set inside the artwork, so at the old 34px the wordmark rendered about 7px high and was effectively unreadable. This is the header/footer mark only — the homepage title sequence is unaffected. */ .brand { display:block; height:50px; width:auto; } .brand--footer { height:46px; } @media (max-width: 860px) { .brand { height:42px; } .brand--footer { height:40px; } } .nav__links { display:flex; gap: clamp(20px,3.5vw,44px); align-items:center; } .nav__links a { font-family: var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color: var(--muted); text-decoration:none; transition: color .3s; } .nav__links a:hover, .nav__links a:focus-visible { color: var(--bone); } .nav__links a[aria-current="page"] { color: var(--bone); } .nav__links a.cta { color: var(--brass-bright); border:1px solid var(--brass-edge); padding:10px 18px; border-radius: var(--radius); transition: background .3s, color .3s, border-color .3s; } .nav__links a.cta:hover, .nav__links a.cta:focus-visible { background: var(--brass); color: var(--ink); border-color: var(--brass); } /* Hamburger — hidden at desktop, real disclosure button at mobile. */ .nav__toggle { display:none; background:none; border:1px solid var(--line-strong); border-radius: var(--radius); width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center; transition: border-color .3s; } .nav__toggle:hover { border-color: var(--brass); } .nav__toggle-bars, .nav__toggle-bars::before, .nav__toggle-bars::after { display:block; width:16px; height:1px; background: var(--bone); transition: transform .35s var(--ease), opacity .2s; } .nav__toggle-bars::before, .nav__toggle-bars::after { content:""; position:absolute; } .nav__toggle-bars::before { transform: translateY(-5px); } .nav__toggle-bars::after { transform: translateY(5px); } .nav__toggle[aria-expanded="true"] .nav__toggle-bars { background:transparent; } .nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { transform: rotate(-45deg); } @media (max-width: 860px) { .nav__toggle { display:flex; } /* The open panel is position:fixed from the top of the viewport, so without these it paints over the brand and — worse — over the button you tap to close it. Raising both above the panel keeps them visible and hittable. */ .wordmark, .nav__toggle { position:relative; z-index:2; } .nav__links { position:fixed; inset:0 0 auto 0; top:0; padding: 112px var(--gutter) 40px; z-index:1; background: rgba(10,14,19,.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:0; /* Closed by default. visibility+opacity so it is genuinely non-focusable when shut, not just visually gone. */ opacity:0; visibility:hidden; transform: translateY(-8px); transition: opacity .3s ease, transform .35s var(--ease), visibility .3s; } .nav__links[data-open="true"] { opacity:1; visibility:visible; transform:translateY(0); } .nav__links a { width:100%; padding:20px 0; border-bottom:1px solid var(--line); font-size:12px; } .nav__links a.cta { border:1px solid var(--brass-edge); margin-top:24px; padding:16px 18px; text-align:center; } } /* ------------------------------------------------------------ layout ----- */ main { position:relative; z-index:1; } section { position:relative; z-index:1; } .wrap { max-width: var(--maxw); margin:0 auto; padding: var(--section) var(--gutter); } .eyebrow { font-family: var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color: var(--brass); display:flex; align-items:center; gap:14px; } .eyebrow::before { content:""; display:block; width:36px; height:1px; background: var(--brass); opacity:.7; flex:none; } h1, h2, h3 { font-family: var(--serif); font-weight:400; } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height:1.15; } .section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:64px; flex-wrap:wrap; } .section-head p { max-width:44ch; color: var(--muted); font-size:1rem; } /* --------------------------------------------------------- components --- */ .btn-primary { display:inline-block; font-family: var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color: var(--bone); text-decoration:none; border:1px solid var(--line-strong); border-radius: var(--radius); padding:16px 28px; transition: border-color var(--dur-hover), background var(--dur-hover), color var(--dur-hover); } .btn-primary:hover, .btn-primary:focus-visible { border-color: var(--brass); background: var(--brass-wash); } button.btn-primary { appearance:none; background:transparent; cursor:pointer; } button.btn-primary:hover, button.btn-primary:focus-visible { background: var(--brass-wash); } /* Brass underline sweep on headings inside hovered cards/links. */ .sweep { position:relative; display:inline-block; padding-bottom:6px; background-image: linear-gradient(var(--brass), var(--brass)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--dur-sweep) var(--ease); } :is(a, .card):is(:hover, :focus-visible) .sweep { background-size: 100% 1px; } /* --------------------------------------------------- reveal machinery ---- */ /* The hidden state is gated behind .js, set by an inline script in . Without JS the class never lands, nothing is hidden, and the page renders as static content. */ .js .reveal { opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .js .reveal.is-visible { opacity:1; transform:none; } /* Staggered load-in, ~90ms increments. Held until fonts settle so it isn't played over a fallback-font reflow. js/site.js adds .fonts-ready. */ .js .rise { opacity:0; transform: translateY(26px); } .js.fonts-ready .rise { animation: rise var(--dur-rise) var(--ease) forwards; } .js .d1 { animation-delay: .08s; } .js .d2 { animation-delay: .20s; } .js .d3 { animation-delay: .34s; } .js .d4 { animation-delay: .50s; } .js .d5 { animation-delay: .70s; } @keyframes rise { to { opacity:1; transform:none; } } /* ------------------------------------------------------------ footer ----- */ footer { border-top:1px solid var(--line); position:relative; z-index:1; } .footer-inner { max-width: var(--maxw); margin:0 auto; padding: 64px var(--gutter) 40px; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; } .footer-col { font-size:.85rem; color: var(--muted); line-height:1.9; } .footer-col a { color: var(--muted); text-decoration:none; transition: color .3s; } .footer-col a:hover, .footer-col a:focus-visible { color: var(--bone); } .footer-legal { max-width: var(--maxw); margin:0 auto; padding: 0 var(--gutter) 36px; font-family: var(--mono); font-size:9.5px; letter-spacing:.14em; color: var(--faint); text-transform:uppercase; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } /* ---------------------------------------------------- reduced motion ----- */ /* Everything off, nothing left mid-transform. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js .rise, .js .reveal, .js .reveal.is-visible { opacity:1 !important; transform:none !important; } }