/* ========================================================================== Vision Enterprises — Reset, Typography & Utilities Ref #CSG-WEB-2026 Loads after tokens.css. Consumes variables only — declares no new colours or sizes of its own. ========================================================================== */ /* -------------------------------------------------------------------------- Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Anchor targets on the Services page must clear the sticky header. */ scroll-padding-top: calc(var(--header-h-compact) + var(--sp-5)); } body { margin: 0; background: var(--ve-white); color: var(--ve-text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Horizontal overflow is contained on , never on . Setting any non-visible overflow on turns it into a scroll container: viewport propagation stops, window.scrollY freezes at 0, and everything that reads it silently dies — sticky-header compaction, the back-to-top button and smooth anchor scrolling all stop working while looking perfectly fine. `clip` rather than `hidden` because clip does not create a scroll container at all, so position: sticky keeps working inside. */ html { overflow-x: clip; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Images and embeds must never be the source of layout shift. Width and height attributes are set in the markup; this keeps them fluid. */ img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: var(--ve-amber-dk); /* never --ve-amber — 1.93:1 on white fails AA */ text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--ve-charcoal); } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: 1px solid var(--ve-rule); margin: var(--sp-6) 0; } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ /* text-wrap: balance evens out the last line of a heading instead of leaving one word stranded ("…Government of Bihar / departments"). Browsers without it simply wrap as before — nothing depends on it. */ h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-h1); color: var(--ve-charcoal); text-wrap: balance; } h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--ve-charcoal); text-wrap: balance; } h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); color: var(--ve-charcoal); } h4 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); color: var(--ve-charcoal); } p { max-width: 68ch; } small, .text-small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ve-text-muted); } strong, b { font-weight: var(--fw-semibold); color: var(--ve-charcoal); } /* -------------------------------------------------------------------------- Layout utilities -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--measure); } .section { padding-block: var(--section-pad); } .section--tight { padding-block: var(--sp-7); } /* Alternate section bands. Cream gives the page rhythm without introducing a colour that is absent from the logo. */ .section--cream { background: var(--ve-cream); } .section--charcoal { background: var(--ve-charcoal); color: var(--ve-on-dark-muted); } .section--charcoal h1, .section--charcoal h2, .section--charcoal h3, .section--charcoal h4 { color: var(--ve-on-dark); } /* 12 columns desktop, 6 tablet, 4 mobile. minmax(0, 1fr) rather than 1fr — the default min-width:auto lets wide children push a column past the container and break the no-horizontal-scroll gate. */ .grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stack > * + * { margin-top: var(--sp-4); } .stack-lg > * + * { margin-top: var(--sp-6); } .flow > * + * { margin-top: var(--sp-3); } .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } /* margin-inline on .center itself, not only on paragraphs inside it. `p { max-width: 68ch }` applies to

too, so the paragraph that holds a centred button was 68ch wide, sitting hard against the left of a 1200px container — the button inside it centred on the paragraph, roughly a fifth of the page left of where it looked like it belonged. */ .center { text-align: center; margin-inline: auto; } .center p { margin-inline: auto; } /* -------------------------------------------------------------------------- Section heading block -------------------------------------------------------------------------- */ .section-head { max-width: 68ch; margin-bottom: var(--sp-7); } .section-head--center { margin-inline: auto; text-align: center; } /* Heading on the left, the section's own link on the right. Drops the 68ch cap, otherwise the right-hand button sits in the middle of the page. */ .section-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; } @media (max-width: 767px) { .section-head--split { align-items: flex-start; flex-direction: column; } } .eyebrow { display: inline-block; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); letter-spacing: 0.06em; color: var(--ve-amber-dk); margin-bottom: var(--sp-2); } .section--charcoal .eyebrow { color: var(--ve-gold); } .section-head p { margin-top: var(--sp-3); color: var(--ve-text-muted); } .section--charcoal .section-head p { color: var(--ve-on-dark-muted); } /* -------------------------------------------------------------------------- Accessibility -------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Every interactive element must be reachable and operable by keyboard with a visible focus ring. This is a pass/fail gate, so the ring is defined once, globally, and never removed per-component. */ :focus-visible { outline: 3px solid var(--ve-amber-dk); outline-offset: 2px; border-radius: 2px; } .section--charcoal :focus-visible, .site-footer :focus-visible, .topbar :focus-visible { outline-color: var(--ve-gold); } .skip-link { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 999; transform: translateY(-200%); background: var(--ve-charcoal); color: var(--ve-on-dark); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-button); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none; } .skip-link:focus { transform: translateY(0); color: var(--ve-on-dark); } /* -------------------------------------------------------------------------- Scroll reveal — main.js adds .is-visible via IntersectionObserver. The no-JS case is handled below: without the script nothing ever gets .reveal-ready, so content stays fully visible. -------------------------------------------------------------------------- */ .reveal-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); } .reveal-ready .reveal.is-visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Reduced motion — scroll reveal is disabled entirely, not merely shortened, and the hero video is paused by main.js. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal-ready .reveal { opacity: 1 !important; transform: none !important; } } /* -------------------------------------------------------------------------- Print — the Company Profile is routinely printed for tender files, so the page must survive it. Chrome and shell furniture are dropped. -------------------------------------------------------------------------- */ @media print { .topbar, .site-header, .mobile-menu, .fab-stack, .site-footer .footer-social, .no-print { display: none !important; } body { color: #000; font-size: 12pt; line-height: 1.5; } .section { padding-block: 16pt; break-inside: avoid; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; } } /* -------------------------------------------------------------------------- Responsive grid collapse -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }