/* ========================================================================= AMARAKOSHA — GLOBAL base layer (ak-base.css) Loaded site-wide (in 00_BaseTemplate.html) AFTER the legacy stylesheets. Holds only the shared chrome that every page uses: design tokens, the glassy header/nav, and the brand-blue footer. Page-specific theming lives in ak-theme.css and is still loaded per page during the staged rollout. ========================================================================= */ :root { --ak-bg: #f3f7fd; /* page canvas — near-white, blue tint */ --ak-bg-2: #e7eef9; /* alt band (light blue) */ --ak-panel: #ffffff; /* card / panel surface */ --ak-panel-2: #eef3fb; /* raised / inset surface */ --ak-line: rgba(38,86,164,0.14); --ak-line-2: rgba(47,120,230,0.34); --ak-blue: #1f6fe0; /* primary signal (deep enough for white) */ --ak-blue-hi: #1559b8; --ak-cyan: #1499d8; /* accent (teal-blue, reads on white) */ --ak-ink: #14233f; /* headings / strong text */ --ak-text: #14233f; --ak-muted: #4b5c79; /* body text */ --ak-dim: #74859f; /* secondary text */ --ak-glow: 0 22px 48px -24px rgba(31,111,224,.45); --ak-display: 'Chakra Petch', 'Poppins', sans-serif; --ak-body: 'Poppins', sans-serif; } /* ========================================================================= GLOBAL FOUNDATION — canvas, typography, buttons, section titles. Promoted from ak-theme.css so EVERY page (not just home/about) is on-brand. Dark-mode canvas lives further down under html[data-theme="dark"]. ========================================================================= */ html { zoom: 0.9; } body { background-color: var(--ak-bg); color: var(--ak-muted); font-family: var(--ak-body); background-image: radial-gradient(900px 540px at 80% -10%, rgba(31,111,224,.10), transparent 60%), radial-gradient(760px 480px at -8% 12%, rgba(20,153,216,.08), transparent 55%), linear-gradient(180deg, #eef4fc 0%, #f4f8fd 46%, #e9f1fc 100%), linear-gradient(var(--ak-line) 1px, transparent 1px), linear-gradient(90deg, var(--ak-line) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 100% 100%, 46px 46px, 46px 46px; background-attachment: fixed, fixed, fixed, fixed; background-position: center top; } /* normalize.css forces `html, body { height: 100% }`, which capped to the viewport and made it a SECOND scroll container — the page then got "stuck" before the bottom (content split between the window scroller and body's own). Let the body grow with its content so the window is the only scroller. */ html, body { height: auto; } body { min-height: 100vh; } /* base template puts bare
tags around the content block — tame them */ body > br { display: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--ak-display); color: var(--ak-ink); } p { color: var(--ak-muted); } a { color: var(--ak-blue); } ::selection { background: rgba(31,111,224,.22); color: var(--ak-ink); } /* ---- Buttons -------------------------------------------------------- */ .btn { background: linear-gradient(135deg, #2f7be6, var(--ak-blue)); color: #fff; font-family: var(--ak-display); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 2px; padding: 14px 30px; box-shadow: 0 14px 30px -14px rgba(31,111,224,.7); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } .btn:before { background: linear-gradient(135deg, var(--ak-cyan), var(--ak-blue)); border-radius: 2px; } .btn:hover { color: #fff; box-shadow: 0 18px 40px -12px rgba(31,111,224,.55); } .btn.primary { background: #fff; color: var(--ak-blue); box-shadow: inset 0 0 0 1.5px var(--ak-line-2); } .btn.primary:before { background: linear-gradient(135deg, #2f7be6, var(--ak-blue)); } .btn.primary:hover { color: #fff; } /* ---- Section titles (shared across pages) --------------------------- */ .section-title h2 { color: var(--ak-ink); font-size: 38px; font-weight: 700; letter-spacing: -.01em; } .section-title h2:after, .section-title h2:before { background: var(--ak-blue) !important; } .section-title p { color: var(--ak-muted); font-size: 15.5px; } /* ---- Global responsive baseline ------------------------------------- */ @media (max-width: 991px) { html { zoom: 1; } /* drop the desktop shrink on small screens */ .section-title h2 { font-size: 30px; } } /* Windows 150% display scaling on a 1080p screen yields a ~1280px CSS viewport, where the fixed 1140px content nearly fills the screen and reads oversized at 100% browser zoom. Stack an extra 0.9 (via body — html zoom is left alone so it can't perturb media-query widths) so this band renders at ~0.81 total, matching what 90% browser zoom looked like. ≥1367px (125% scaling / large monitors) keeps the existing 0.9; ≤991px (mobile) keeps zoom 1. */ @media (min-width: 992px) and (max-width: 1300px) { body { zoom: 0.9; } } @media (max-width: 575px) { .section-title h2 { font-size: 25px; } } /* ========================================================================= HEADER / NAV ========================================================================= */ /* legacy sets .header to solid #fff; the glassy .header-inner sits on top, so the white parent peeked out as a band (invisible on light, grey on dark). Make it transparent so the page canvas shows through the glass in both modes. */ .header { background: transparent !important; } .header .header-inner { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(236,243,252,.34)), radial-gradient(120% 180% at 12% -40%, rgba(31,111,224,.10), transparent 60%); -webkit-backdrop-filter: blur(22px) saturate(155%); backdrop-filter: blur(22px) saturate(155%); border-bottom: 1px solid rgba(255,255,255,.45); box-shadow: 0 10px 30px -18px rgba(20,40,90,.26); } /* When sticky, .header-inner becomes position:fixed and leaves the flow, collapsing the .header wrapper to 0. On short pages (e.g. Careers) that shrank the document by the header height each time you scrolled past the sticky threshold, clamping the scroll so the bottom was unreachable. Reserve the header height to keep the document height constant. */ .header.sticky { min-height: 99px; } /* a touch more opaque once stuck, so the nav stays legible over busy sections */ .header.sticky .header-inner { background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(236,243,252,.60)), radial-gradient(120% 180% at 12% -40%, rgba(31,111,224,.12), transparent 60%); box-shadow: 0 14px 38px -20px rgba(20,40,90,.34); } /* glassy light edge along the top */ .header .header-inner:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); } /* signal line under the bar */ .header .header-inner:after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(31,111,224,.5) 35%, rgba(20,153,216,.5) 65%, transparent); } /* Logo — use the white-knockout (transparent) version so there's no white box; on the light bar the navy wordmark + blue mark read natively (no filter). */ .logo { padding: 14px 0; } .header .logo a { display: inline-block; line-height: 0; background: url('../images/ak_logo_dark.png') left center / contain no-repeat; } .header .logo a img { opacity: 0; } /* Header layout (≥992px): logo left · nav centered in the bar · action icons pinned to the right edge. The text nav is centered across the full container width; the account + dark-mode icons are lifted out of the centered flow and anchored to the bar's right edge. .inner is the container-width positioning context — its positioned descendants (Bootstrap col, legacy nav/menu) are neutralised so the centered menu measures against the full container. */ @media (min-width: 992px) { .header .inner { position: relative; } .header .col-lg-9, .header .main-menu, .header .navigation { position: static; } .header .nav.menu { position: absolute; left: 0; right: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; /* legacy .menu sets wrap → would drop the last link to a 2nd line */ gap: 30px; margin: 0; /* reserve the logo zone (left, ≈ the logo column width) and the icon zone (right, the two pinned circles) so the centered links clear both and stay centered in the open span. Percentage left-reserve tracks the logo as the container narrows; the icon reserve is a fixed pixel zone. */ padding: 0 96px 0 24%; } .header .nav.menu > li { float: none; margin: 0; } /* lift the two action icons out of the centered group → pin to the right edge. (absolutely-positioned children are not flex items, so the `gap` above and the centering ignore them — the text links stay perfectly centered.) */ .header .nav li.user-menu, .header .nav li.theme-toggle { position: absolute; top: 0; height: 100%; display: flex; align-items: center; margin: 0; z-index: 6; } .header .nav li.theme-toggle { right: 6px; } .header .nav li.user-menu { right: 56px; } } /* Narrow desktop (992–1199px): the container drops to 960px, so the wide logo + six links + icons no longer leave room to truly centre the nav. Tighten the link gap and left reserve so everything stays on one line, clear of the logo and icons (the group lands just right-of-centre — acceptable in this range). */ @media (min-width: 992px) and (max-width: 1199px) { .header .nav.menu { gap: 16px; padding: 0 84px 0 23%; } .header .nav.menu > li > a { font-size: 11.5px; letter-spacing: .02em; } } .header .nav li a { color: var(--ak-ink); font-family: var(--ak-display); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; font-size: 13px; padding-top: 8px; /* legacy 25px pushed the underline far below the text */ padding-bottom: 8px; } .header .nav li a:before { background: var(--ak-blue) !important; height: 2px; } .header .nav li:hover > a, .header .nav li.active > a { color: var(--ak-blue); } /* Dropdown / mega panels */ .header .nav li .dropdown, .header .nav li .dropdown .submenu { background: rgba(255,255,255,.98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--ak-line); border-top: 2px solid var(--ak-blue); box-shadow: 0 30px 60px -22px rgba(20,40,90,.35); border-radius: 0 0 4px 4px; width: auto; /* was a fixed 220px → long items wrapped */ min-width: 210px; max-width: 360px; } .header .nav li .dropdown li a, .header .nav li .dropdown li.has-submenu > a { color: var(--ak-muted) !important; /* beats inline style="color:grey" */ border-bottom: 1px solid var(--ak-line); font-family: var(--ak-display); text-transform: none; letter-spacing: .02em; white-space: nowrap; /* keep each item on one line */ transition: all .25s ease; } .header .nav li .dropdown li a:hover { color: var(--ak-blue) !important; background: linear-gradient(90deg, rgba(31,111,224,.10), transparent); padding-left: 26px !important; } .header .nav li .dropdown li a:before { background: var(--ak-blue) !important; } /* Account / user menu */ .header .nav li.user-menu > a.user-icon { width: 36px !important; height: 36px !important; } /* match theme-toggle */ .header .nav li.user-menu .user-icon { color: var(--ak-muted); font-size: 18px; } .header .nav li.user-menu:hover .user-icon { color: var(--ak-blue); } .header .nav li.user-menu .user-name { color: var(--ak-blue); padding: 8px 18px; display:block; font-weight:600; } /* ========================================================================= MOBILE NAV — slide-in SIDE DRAWER (≤991px) slicknav builds the cloned menu; inline JS in 00_BaseTemplate then relocates .slicknav_nav to (the header's backdrop-filter would otherwise trap a position:fixed child inside the bar) and toggles body.ak-nav-open. The visual open/close is the CSS transform below — slicknav's own slide is set to 0ms. ========================================================================= */ @media (max-width: 991px) { .slicknav_nav { position: fixed !important; top: 0; left: 0; bottom: 0; width: 82%; max-width: 322px; height: 100% !important; margin: 0 !important; padding: 88px 10px 28px !important; overflow-y: auto !important; display: block !important; background: var(--ak-bg-2); border-right: 1px solid var(--ak-line); box-shadow: 22px 0 60px -24px rgba(20,40,90,.55); transform: translateX(-102%); transition: transform .34s cubic-bezier(.4, 0, .2, 1); visibility: hidden; z-index: 100000; } body.ak-nav-open .slicknav_nav { transform: translateX(0); visibility: visible; } /* nested submenus: legacy/bootstrap paint them #f8f9fa with a hard shadow, which goes invisible in dark mode — make them theme-aware and override the inline color:grey on the deep links so every level stays legible. */ .slicknav_nav .dropdown, .slicknav_nav .submenu { background: transparent !important; box-shadow: none !important; border: 0 !important; margin: 2px 0 6px !important; } .slicknav_nav .dropdown li a, .slicknav_nav .submenu li a { color: var(--ak-muted) !important; padding-left: 22px !important; } .slicknav_nav .submenu li a { padding-left: 38px !important; font-size: .92em; } .slicknav_nav .dropdown li a:hover, .slicknav_nav .submenu li a:hover { color: var(--ak-blue) !important; } /* Dropdown parents (allowParentLinks): tap the LABEL to open that page, tap this chevron to expand the submenu. slicknav's bare 8px ► was too small to hit, so the sub-pages felt unreachable — give it a real tap target. */ .slicknav_nav .slicknav_row { display: flex !important; align-items: stretch; } .slicknav_nav .slicknav_row > a { flex: 0 1 auto; } .slicknav_nav .slicknav_arrow { margin: 0 0 0 auto !important; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 0 18px; font-size: 15px; color: var(--ak-blue); border-left: 1px solid var(--ak-line); } /* dim + blur the page behind the drawer; tap to close */ .ak-nav-backdrop { position: fixed; inset: 0; background: rgba(8, 16, 32, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .34s ease, visibility .34s ease; z-index: 99999; } body.ak-nav-open .ak-nav-backdrop { opacity: 1; visibility: visible; } body.ak-nav-open { overflow: hidden; } /* explicit ✕ inside the drawer (the hamburger sits under the drawer once open) */ .ak-nav-close { position: fixed; top: 20px; left: calc(min(82vw, 322px) - 58px); right: auto; width: 40px; height: 40px; padding: 0; line-height: 1; display: none; align-items: center; justify-content: center; font-size: 30px; font-family: var(--ak-body); color: var(--ak-ink); background: rgba(31,111,224,.10); border: 1px solid var(--ak-line-2); border-radius: 50%; cursor: pointer; z-index: 100002; transition: background .25s ease, transform .25s ease; } body.ak-nav-open .ak-nav-close { display: inline-flex; } .ak-nav-close:hover { background: var(--ak-blue); color: #fff; transform: rotate(90deg); } } @media (min-width: 992px) { .ak-nav-backdrop, .ak-nav-close { display: none !important; } body > .slicknav_nav { display: none !important; } /* relocated clone — hide on desktop */ } /* Mobile slicknav */ .slicknav_menu { background: var(--ak-bg-2); } .slicknav_nav, .slicknav_nav a { color: var(--ak-ink); } /* Hamburger button — a simple three-line menu icon. The legacy slicknav/responsive CSS left muddy box-shadows under each bar and uneven em-based gaps; this resets it to three clean, evenly-spaced, theme-aware lines with no background box. */ .slicknav_btn { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 38px; padding: 0; float: right; background: transparent !important; border: 0 !important; border-radius: 8px; box-shadow: none !important; text-shadow: none !important; transition: opacity .2s ease; } .slicknav_btn:hover { opacity: .7; } .slicknav_menu .slicknav_menutxt { display: none; } .slicknav_menu .slicknav_icon { float: none; margin: 0; width: 26px; height: 18px; display: flex; flex-direction: column; justify-content: space-between; } .slicknav_menu .slicknav_icon:before { display: none; } .slicknav_menu .slicknav_icon-bar { width: 26px; height: 3px; margin: 0 !important; background-color: var(--ak-ink) !important; border-radius: 2px; box-shadow: none !important; } /* legacy responsive.css hard-codes these to #2C2D3F at higher specificity — re-point them at the token so the menu text stays legible in dark mode */ .slicknav_nav li a, .slicknav_nav .slicknav_arrow, .slicknav_nav li .dropdown li a { color: var(--ak-ink); } .slicknav_nav li:hover > a, .slicknav_nav li .dropdown li a:hover { color: var(--ak-blue); } /* slicknav clones the desktop