/* vk-chrome.css — the one header and the one footer, for every page. * * WHY THIS FILE EXISTS. * Census 2026-08-02 over 29,498 pages: 92 distinct header structures, 19 * footer structures, 10 logo assets, and 27,037 pages carrying no footer at * all. 28,839 of those pages (97.8%) ship a text-only stub header -- the * biggest family is 257 bytes reading "Vedika" and "Get API Key", with no * logo image anywhere in it. The homepage meanwhile ships a 30,680-byte * mega-menu. That spread is what reads as "every page has its own theme". * * The previous attempt at this re-dressed whatever header a page already had, * which left all 92 in place and broke them. This replaces the markup instead, * so there is one header, one footer, one logo and one type set, and a future * change is one edit here. * * Deliberately independent of vedika-standard.css and of the adoption engine. * Chrome must not be able to break again when a component pass changes. * * SIZE MATTERS HERE. This ships on 29,498 pages, so the markup it styles is * kept near 1.2KB. A 30KB mega-menu on every page would add ~885MB to the * site; links stay real HTML rather than JS-injected because those pages are * the programmatic SEO surface and JS-only nav would strand their link graph. */ :root { --vkc-bar-h: 60px; --vkc-ink: #16161C; --vkc-ink-mute: #5B6274; --vkc-violet: #6D4FC4; --vkc-violet-soft: #8B6FD4; --vkc-line: rgba(22,22,28,.10); --vkc-surface: rgba(255,255,255,.82); --vkc-display: 'Newsreader', Georgia, serif; --vkc-body: 'DM Sans', system-ui, -apple-system, sans-serif; } /* ── BAR ───────────────────────────────────────────────────────────────── * Sticky, 60px, translucent over whatever the page's own ground is. It does * NOT paint an opaque slab, because several pages open on a dark hero and a * white bar on top of that was one of the mismatches being reported. */ .vkc-nav { position: sticky; top: 0; z-index: 900; height: var(--vkc-bar-h); display: flex; align-items: center; gap: 28px; padding: 0 clamp(16px, 4vw, 40px); font-family: var(--vkc-body); background: var(--vkc-surface); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--vkc-line); } /* A FLEX-CENTRED CAPTURES THE CHROME. * * apply-chrome.py splices the bar in as a direct child of , and four * pages make a centring flex container: * kapiljidemo.html:16, ganeshaspeaksdemo.html:18, vedicastroapidemo.html:18 * payment-failed.html:60 (Tailwind: flex items-center justify-center) * The 60px bar then becomes a flex ITEM: align-items:center pushes it to * y=537 against a 100vh body, and row direction plus justify-content:center * splits the overflow both ways, giving x=-567. Measured on all four. * * The bar and the footer are page furniture, not content to be centred, so * they opt out of the parent's flex sizing and span the row. This does not * change the page's own layout for its own children. */ .vkc-nav, .vkc-foot { flex: 0 0 auto; align-self: stretch; width: 100%; max-width: 100%; order: -1; } .vkc-foot { order: 1; } /* Where the page centres its body, the chrome needs a column so the bar sits * above the content rather than beside it. Scoped by :has() to bodies that * actually carry our chrome, so no other page is touched. */ body:has(> .vkc-nav) { flex-direction: column; } .vkc-nav__brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; } .vkc-nav__brand img { width: 30px; height: 30px; display: block; } .vkc-nav__brand b { font-family: var(--vkc-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--vkc-ink); } .vkc-nav__links { display: flex; align-items: center; gap: 26px; margin: 0 auto 0 8px; padding: 0; list-style: none; } .vkc-nav__links a { font-size: 14.5px; color: var(--vkc-ink-mute); text-decoration: none; white-space: nowrap; transition: color .14s ease; } .vkc-nav__links a:hover, .vkc-nav__links a[aria-current="page"] { color: var(--vkc-ink); } .vkc-nav__links a[aria-current="page"] { font-weight: 500; } .vkc-nav__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } .vkc-nav__ghost { font-size: 14.5px; color: var(--vkc-ink-mute); text-decoration: none; transition: color .14s ease; } .vkc-nav__ghost:hover { color: var(--vkc-ink); } /* The CTA is 34px, not a slab. "that big button on nav" was the complaint; * a nav action should read as a control, not as a hero button. */ .vkc-nav__cta { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; letter-spacing: .005em; color: #fff; text-decoration: none; background: linear-gradient(180deg, var(--vkc-violet-soft), var(--vkc-violet)); box-shadow: 0 1px 2px rgba(22,22,28,.18), 0 4px 10px rgba(109,79,196,.24), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.16); transition: transform .12s ease, box-shadow .12s ease; } .vkc-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(22,22,28,.20), 0 8px 18px rgba(109,79,196,.30), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.18); } .vkc-nav__cta:active { transform: translateY(0); } /* ── MOBILE ────────────────────────────────────────────────────────────── * A checkbox, not a script. 29,498 pages load different JS bundles and * several load none at all; a nav that needs JS to open is a nav that is * broken on some unknown fraction of them. */ .vkc-nav__toggle { display: none; } .vkc-nav__burger { display: none; } @media (max-width: 900px) { .vkc-nav { gap: 0; justify-content: space-between; } .vkc-nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: auto; border-radius: 9px; cursor: pointer; border: 1px solid var(--vkc-line); background: rgba(255,255,255,.5); } .vkc-nav__burger span { display: block; width: 17px; height: 1.5px; border-radius: 2px; background: var(--vkc-ink); position: relative; } .vkc-nav__burger span::before, .vkc-nav__burger span::after { content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; border-radius: 2px; background: var(--vkc-ink); } .vkc-nav__burger span::before { top: -5.5px; } .vkc-nav__burger span::after { top: 5.5px; } /* Links and actions drop into one sheet below the bar. */ .vkc-nav__links, .vkc-nav__actions { position: absolute; top: var(--vkc-bar-h); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 0; background: #fff; border-bottom: 1px solid var(--vkc-line); box-shadow: 0 16px 34px rgba(22,22,28,.13); } .vkc-nav__actions { top: auto; box-shadow: none; padding: 10px 18px 18px; } .vkc-nav__links a, .vkc-nav__ghost { padding: 13px 20px; font-size: 16px; color: var(--vkc-ink); border-bottom: 1px solid rgba(22,22,28,.05); } .vkc-nav__cta { height: 42px; justify-content: center; font-size: 15px; } .vkc-nav__toggle:checked ~ .vkc-nav__links, .vkc-nav__toggle:checked ~ .vkc-nav__actions { display: flex; } .vkc-nav__toggle:checked ~ .vkc-nav__actions { top: auto; position: static; } } /* The sheet is absolutely positioned against the bar, so the bar has to be * the containing block on mobile and cannot clip it. */ @media (max-width: 900px) { .vkc-nav { position: sticky; overflow: visible; } } /* ── FOOTER ────────────────────────────────────────────────────────────── * NOT a black band. That was asked for twice and shipped black twice. It is a * quiet light band that belongs to the same page as the content above it. */ /* ALWAYS LIGHT, AND IT HAS TO WIN. * * Two separate faults produced the dark footer that has now been reported * three times. Measured at 390px: index.html and pricing.html computed * background rgba(0,0,0,0) -- a page rule reset `footer` to transparent, so * the band vanished and the dark page showed straight through it. docs.html * computed rgba(255,255,255,.03), which was my own dark variant doing exactly * what it was written to do. * * The footer is not chrome that should follow the page. It is the one surface * that ends every page the same way, so it keeps its own light ground on a * dark page and on a light one. !important here buys nothing structural -- it * is a colour, it cannot move a box -- and it is the only way to beat 92 * private stylesheets without editing all of them. */ /* Reveal-on-scroll scripts stamp `opacity: 0` inline and rely on an observer * to bring the element back. On index.html that observer never fires for the * footer, so it sat permanently invisible and the dark page showed through -- * which is the "footer dark bg" reported three times. The footer is not a * reveal target; it is the band that ends the page. */ .vkc-foot { font-family: var(--vkc-body); opacity: 1 !important; transform: none !important; visibility: visible !important; /* Longhands, not the shorthand. The dark band was a background-IMAGE: * linear-gradient(104deg, #14102f, #2a1e6e, #3a2a8e) declared !important * inside a media query, and a shorthand of equal specificity does not beat * a later longhand. Setting background-image explicitly is what actually * removes it. */ background-color: #F6F5F9 !important; background-image: none !important; border-top: 1px solid rgba(22,22,28,.10) !important; color: #5B6274 !important; padding: 44px clamp(16px, 4vw, 40px) 34px; } .vkc-foot h4 { color: #16161C !important; } .vkc-foot a { color: #5B6274 !important; } .vkc-foot a:hover { color: #6D4FC4 !important; } .vkc-foot__brand b { color: #16161C !important; } .vkc-foot__grid { max-width: 1180px; margin: 0 auto; display: grid; gap: 30px 44px; grid-template-columns: 1.4fr repeat(3, 1fr); } @media (max-width: 780px) { .vkc-foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .vkc-foot__grid { grid-template-columns: 1fr; } } .vkc-foot__brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .vkc-foot__brand img { width: 28px; height: 28px; } .vkc-foot__brand b { font-family: var(--vkc-display); font-size: 20px; font-weight: 600; color: var(--vkc-ink); } .vkc-foot__note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; max-width: 32ch; } .vkc-foot h4 { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: var(--vkc-ink); } .vkc-foot ul { margin: 0; padding: 0; list-style: none; } .vkc-foot li + li { margin-top: 9px; } .vkc-foot a { font-size: 14px; color: var(--vkc-ink-mute); text-decoration: none; } .vkc-foot a:hover { color: var(--vkc-violet); } /* Six social profiles plus the Postman workspace lived in the old footer and * my first canonical footer dropped every one of them -- caught by comparing * tracking and outbound-link counts against the pre-chrome commit, not by * looking at the page. */ .vkc-foot__social { max-width: 1180px; margin: 26px auto 0; padding-top: 18px; border-top: 1px solid var(--vkc-line); display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 13px; } .vkc-foot__social a { color: var(--vkc-ink-mute); text-decoration: none; } .vkc-foot__social a:hover { color: var(--vkc-violet); } .vkc-foot__base { max-width: 1180px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--vkc-line); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 13px; } .vkc-foot__base span { margin-right: auto; } /* Second base row: legal entity and address. Quieter than the copyright line * above it, and without its own rule, so the two read as one block. */ .vkc-foot__legal { margin-top: 0; padding-top: 10px; border-top: 0; font-size: 12.5px; opacity: .82; } .vkc-foot__note a { color: var(--vkc-ink); text-decoration: none; border-bottom: 1px solid var(--vkc-line); } .vkc-foot__note a:hover { color: var(--vkc-violet); } /* Dashboard and admin are application shells. A marketing footer at the * bottom of a signed-in dashboard was reported as wrong, and it is -- the * page scrolls its own panels and the footer has nothing to do with them. */ .vkc-app .vkc-foot, [data-vk-app] .vkc-foot { display: none; } /* ── DARK PAGES ────────────────────────────────────────────────────────── * Chrome follows the page it sits on. A light bar over a dark hero, and a * light footer under dark content, was the "half in black or white" mismatch * -- the same chrome on every page is only correct if it reads the ground. * * Which page is dark cannot be decided from the source: 28,919 of 29,498 * pages declare no background in a body{} rule at all, yet pages like * /docs/transit-api render dark from a class or a wrapper. So the theme is * measured at runtime by the probe in the header partial, which reads the * computed background once and stamps data-vkc-theme on . */ [data-vkc-theme="dark"] { --vkc-ink: #FFFFFF; --vkc-ink-mute: rgba(255,255,255,.72); --vkc-line: rgba(255,255,255,.12); --vkc-surface: rgba(14,14,20,.72); } [data-vkc-theme="dark"] .vkc-nav__burger { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); } @media (max-width: 900px) { [data-vkc-theme="dark"] .vkc-nav__links, [data-vkc-theme="dark"] .vkc-nav__actions { background: #101018; border-bottom-color: rgba(255,255,255,.12); box-shadow: 0 16px 34px rgba(0,0,0,.5); } [data-vkc-theme="dark"] .vkc-nav__links a, [data-vkc-theme="dark"] .vkc-nav__ghost { border-bottom-color: rgba(255,255,255,.07); } } /* LAST WORD ON THE FOOTER BAND. * * .vkc-foot with !important still lost: a page rule sets background-color * !important at equal specificity and later in the cascade, so order decided * it. Measured on index.html and pricing.html, both computing rgba(0,0,0,0) * while the only matching .vkc-foot rule said #F6F5F9. * * html body footer.vkc-foot is 0,1,3 against their 0,1,0, so this settles it * without another round of guessing. Colour only -- no geometry, so it still * cannot move a box. */ html body footer.vkc-foot { background-color: #F6F5F9 !important; background-image: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; color: #5B6274 !important; } html body footer.vkc-foot h4, html body footer.vkc-foot .vkc-foot__brand b { color: #16161C !important; } html body footer.vkc-foot a { color: #5B6274 !important; } html body footer.vkc-foot a:hover { color: #6D4FC4 !important; }