/* ========================================================================== Austar India — design system Industrial dark surfaces, brand blue structure, amber conversion accents. ========================================================================== */ /* ---------------------------------------------------------------- tokens */ :root { /* ink scale — dark surfaces */ --ink: #080B0F; --ink-1: #0D1218; --ink-2: #141A22; --ink-3: #1C242E; --ink-4: #26303C; /* paper scale — light surfaces */ --paper: #FFFFFF; --paper-1: #F5F7FA; --paper-2: #EBEFF5; --paper-3: #DDE3EC; /* brand */ --blue: #2E5AA8; --blue-lt: #4C82D8; --blue-dk: #1E3D75; --amber: #F5A623; --amber-lt: #FFC15E; --amber-dk: #C97F0C; /* type */ --on-dark: #EDF1F7; --on-dark-mu: #8D9AAB; --on-dark-dim:#5D6A7B; --on-light: #0E141C; --on-light-mu:#54626F; --line-dark: rgba(255,255,255,.09); --line-dark-2:rgba(255,255,255,.16); --line-light: rgba(10,20,30,.10); --line-light-2:rgba(10,20,30,.18); --f-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --f-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; --wrap: 1280px; --wrap-n: 1060px; --rad: 4px; --rad-lg: 8px; --sp-sec: clamp(56px, 7vw, 104px); --sh-1: 0 1px 2px rgba(8,11,15,.08), 0 4px 16px rgba(8,11,15,.06); --sh-2: 0 2px 6px rgba(8,11,15,.10), 0 18px 44px rgba(8,11,15,.14); --sh-3: 0 30px 80px rgba(8,11,15,.30); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.65; color: var(--on-light); background: var(--paper); -webkit-font-smoothing: antialiased; /* This is here to stop wide mega menus from widening the page. But overflow-x on one axis forces the other to compute to auto, which makes a scroll container — and then every position:sticky descendant sticks to a box that never scrolls, so nothing sticks at all. `clip` cuts exactly the same overflow without creating that scroll container. Kept `hidden` as the fallback for browsers that do not know `clip` (Safari below 16). */ overflow-x: hidden; } @supports (overflow-x: clip) { body { overflow-x: clip; } } body.is-locked { overflow: hidden; } img, svg, video { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--amber); color: #12161C; } .ic { width: 1.15em; height: 1.15em; flex: none; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; } .wrap--n { max-width: var(--wrap-n); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------------------------------------------------------------- sections */ .sec { padding-block: var(--sp-sec); position: relative; } .sec--tight { padding-block: clamp(40px, 5vw, 68px); } .sec--dark { background: var(--ink-1); color: var(--on-dark); } .sec--ink { background: var(--ink); color: var(--on-dark); } .sec--paper { background: var(--paper-1); } .sec--white { background: var(--paper); } /* Plain links in a dark section go amber on hover. Components that fill their own background on hover are excluded — a .pill turns amber behind the text, so letting this rule also colour the text amber made it vanish. Any future component with its own hover fill belongs in this list too. */ .sec--dark a:not(.btn):not(.pill):hover, .sec--ink a:not(.btn):not(.pill):hover { color: var(--amber); } /* grid noise for dark sections */ .sec--dark::before, .sec--ink::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%); } .sec--dark > *, .sec--ink > * { position: relative; z-index: 1; } /* ---------------------------------------------------------------- typography */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; } .eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--amber); flex: none; } .eyebrow--light { color: var(--amber-lt); } .sec--dark .eyebrow, .sec--ink .eyebrow { color: var(--amber); } .sec-title { font-family: var(--f-display); font-size: clamp(30px, 4.2vw, 52px); font-weight: 600; line-height: 1.04; letter-spacing: .004em; text-transform: uppercase; } .sec-title em { font-style: normal; color: var(--blue); } .sec--dark .sec-title em, .sec--ink .sec-title em { color: var(--amber); } .sec-lead { margin-top: 16px; max-width: 66ch; font-size: 17px; color: var(--on-light-mu); } .sec--dark .sec-lead, .sec--ink .sec-lead { color: var(--on-dark-mu); } .sec-head { margin-bottom: clamp(30px, 4vw, 52px); max-width: 860px; } .sec-head--center { margin-inline: auto; text-align: center; } .sec-head--center .eyebrow::before { display: none; } .sec-head--center .sec-lead { margin-inline: auto; } .h3 { font-family: var(--f-display); font-size: clamp(21px, 2.2vw, 28px); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; } .lead { font-size: 18px; color: var(--on-light-mu); } .rich p { margin-bottom: 1.1em; } .rich h3 { font-family: var(--f-display); text-transform: uppercase; font-size: 24px; margin: 1.8em 0 .5em; letter-spacing: .01em; } .rich h3:first-child { margin-top: 0; } .rich ul { margin: 0 0 1.2em; } .rich ul li { position: relative; padding-left: 26px; margin-bottom: 9px; } .rich ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--amber); transform: rotate(45deg); } /* ---------------------------------------------------------------- buttons */ .btn { /* `background: transparent` and `appearance: none` matter: without them a