/* ============================================================================================================ site-shell.css — the global Shubh Muhrat shell (PM "Global Header, Navigation, Footer & Responsive UX Redesign", 2026-10-18) ------------------------------------------------------------------------------------------------------------ ONE grid for the header, the product row, the page and the footer: max 1400 px of content, 32 px gutters on desktop, 24 on tablet, 16 on phones (brand.css --sm-maxw / --sm-gutter / --sm-sheet-pad hold the same numbers for page content). Header 64 px (60 on phones): logo + a hairline divider + the products as plain text, Blog + Sign in on the right. Only the current product is marked — a blush chip with a light border, wine text and a heavier weight (never colour alone). The product row is 44 px, plain text, the current section underlined in wine — a second level, never a second header. No heavy shadows: a 1 px bottom line. Who loads it: backend/site_shell.py links it in of every page with the shared header and draws the header markup on the server (so the bar is there at first paint); site-header.js adds the link itself on any page that missed it. The selectors carry .vh-shell (set on the mount) so they win over the older rules site-header.js still injects for menus, sheets and fit levels. ============================================================================================================ */ #vivah-site-header.vh-shell { --vh-pad: max(32px, calc((100% - 1400px) / 2)); --vh-bar-h: 64px; --vh-row-h: 44px; --vh-tint: #F5E9E3; --vh-tint-line: #EBD3CB; display: block; font-family: "Outfit", "SM Sans Fallback", "Segoe UI", system-ui, -apple-system, sans-serif; } @media (max-width: 1024px) { #vivah-site-header.vh-shell { --vh-pad: 24px; } } @media (max-width: 767px) { #vivah-site-header.vh-shell { --vh-pad: 16px; --vh-bar-h: 60px; } } /* ── the bar ── */ #vivah-site-header.vh-shell .vh-bar { position: sticky; top: 0; z-index: 500; box-sizing: border-box; display: flex; align-items: center; gap: 0; height: var(--vh-bar-h); padding: 0 var(--vh-pad); margin: 0; background: #FBF7F2; border-bottom: 1px solid #EADBD4; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #3A2A2F; overflow: hidden; } #vivah-site-header.vh-shell .vh-bar.vh-scrolled { box-shadow: none; } /* logo + divider (the existing lattice mark + wordmark, never redesigned) */ #vivah-site-header.vh-shell .vh-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; position: relative; height: 40px; padding-right: 24px; margin-right: 24px; text-decoration: none; white-space: nowrap; } #vivah-site-header.vh-shell .vh-brand::after { content: ""; position: absolute; right: 0; top: 6px; bottom: 6px; width: 1px; background: #EADBD4; margin: 0; height: auto; } #vivah-site-header.vh-shell .vh-brand .vh-emblem { width: 38px; height: 38px; flex: none; } #vivah-site-header.vh-shell .vh-brand .vh-word { display: flex; flex-direction: column; line-height: 1; } #vivah-site-header.vh-shell .vh-brand .vh-w { font: 600 24px/1 "Cormorant Garamond", "SM Serif Fallback", Georgia, serif; color: #7D2E3E; letter-spacing: .005em; } #vivah-site-header.vh-shell .vh-brand .vh-w i { font-style: italic; font-weight: 500; margin-left: .18em; } #vivah-site-header.vh-shell .vh-brand .vh-tag { display: none; } /* primary navigation: plain text, 26 px between labels (13 px padding each side), never wrapping */ #vivah-site-header.vh-shell .vh-nav { display: flex; align-items: center; gap: 0; margin: 0; flex: 1 1 auto; min-width: 0; white-space: nowrap; } #vivah-site-header.vh-shell .vh-nav > a, #vivah-site-header.vh-shell .vh-blog { display: inline-flex; align-items: center; height: 36px; box-sizing: border-box; padding: 0 13px; margin: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; box-shadow: none; font: 500 14.5px/1 "Outfit", "SM Sans Fallback", system-ui, sans-serif; color: #4A383D; text-decoration: none; white-space: nowrap; transition: color .18s, background-color .18s, border-color .18s; } #vivah-site-header.vh-shell .vh-nav > a:first-child { margin-left: -13px; } /* the first label's text lines up with the divider gap */ #vivah-site-header.vh-shell .vh-nav > a::after, #vivah-site-header.vh-shell .vh-blog::after, #vivah-site-header.vh-shell .vh-nav > a.vh-active::before { content: none; display: none; } #vivah-site-header.vh-shell .vh-nav > a:hover, #vivah-site-header.vh-shell .vh-blog:hover { color: #7D2E3E; background: #FAF1EC; } #vivah-site-header.vh-shell .vh-nav > a.vh-active, #vivah-site-header.vh-shell .vh-blog.vh-active { background: var(--vh-tint); border-color: var(--vh-tint-line); color: #7D2E3E; font-weight: 600; box-shadow: none; } /* right side: Blog (text) + Sign in (the one burgundy button) / the account chip */ #vivah-site-header.vh-shell .vh-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; } #vivah-site-header.vh-shell .vh-right .vh-blog { margin: 0; } #vivah-site-header.vh-shell .vh-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 42px; min-height: 42px; box-sizing: border-box; padding: 0 20px; border: 0; border-radius: 22px; background: #7D2E3E; color: #fff; box-shadow: none; font: 500 15px/1 "Outfit", "SM Sans Fallback", system-ui, sans-serif; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background-color .18s; } #vivah-site-header.vh-shell .vh-cta::before { content: none; display: none; } #vivah-site-header.vh-shell .vh-cta:hover { background: #66202F; color: #fff; } #vivah-site-header.vh-shell .vh-acct-btn { display: flex; align-items: center; gap: 8px; height: 42px; min-height: 42px; box-sizing: border-box; padding: 0 14px 0 6px; border: 1px solid #EADBD4; border-radius: 22px; background: #FFFDFB; color: #3A2A2F; cursor: pointer; font: 500 14px/1 "Outfit", "SM Sans Fallback", system-ui, sans-serif; white-space: nowrap; flex-shrink: 0; } #vivah-site-header.vh-shell .vh-acct-btn:hover { border-color: #D9A49B; } #vivah-site-header.vh-shell .vh-acct-av { width: 30px; height: 30px; border-radius: 50%; background: #7D2E3E; color: #fff; display: flex; align-items: center; justify-content: center; font: 600 12.5px/1 "Outfit", system-ui, sans-serif; flex-shrink: 0; } #vivah-site-header.vh-shell :focus-visible { outline: 2px solid #7D2E3E; outline-offset: 2px; } /* the Menu button (≤1024 px) */ #vivah-site-header.vh-shell .vh-burger { display: none; align-items: center; gap: 9px; height: 42px; min-height: 42px; box-sizing: border-box; padding: 0 16px 0 13px; margin-left: auto; border: 1px solid #E3C9C0; border-radius: 22px; background: #FFFDFB; color: #7D2E3E; cursor: pointer; font: 500 15px/1 "Outfit", "SM Sans Fallback", system-ui, sans-serif; flex-shrink: 0; } #vivah-site-header.vh-shell .vh-burger::before { content: ""; width: 16px; height: 11px; flex-shrink: 0; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1.6px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 70% 1.6px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 1.6px no-repeat; } /* ── the product row (only on products that need one: Biodata · Matchmaker · Kundli · Shubh Bazaar) ── */ #vivah-site-header.vh-shell .vh-subheader-bar { display: flex; align-items: stretch; justify-content: flex-start; box-sizing: border-box; height: var(--vh-row-h); padding: 0 var(--vh-pad); margin: 0; background: #FFFDFB; border-bottom: 1px solid #EADBD4; box-shadow: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--vh-pad); } #vivah-site-header.vh-shell .vh-subheader-bar::-webkit-scrollbar { display: none; } #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav { display: flex; align-items: stretch; gap: 28px; width: auto; min-width: max-content; height: 100%; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; flex-wrap: nowrap; } #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav > a, #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav > button { display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 0; box-sizing: border-box; padding: 0; margin: 0; border: 0; border-bottom: 2px solid transparent; border-top: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; font: 500 14px/1 "Outfit", "SM Sans Fallback", system-ui, sans-serif; color: #6B5A5D; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .18s, border-color .18s; } #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav > a:hover, #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav > button:hover { color: #7D2E3E; background: none; } #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav > .active, #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav > [aria-current="page"] { color: #7D2E3E; font-weight: 600; border-bottom-color: #7D2E3E; background: none; box-shadow: none; } #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav .tab-ico { display: none; } /* no icons in navigation (brief §7) */ #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav .tab-x { display: inline; } /* full labels: "Build Profile", "Share & Export" */ /* ── tablet + phone: logo + Menu; the products live in the Menu sheet ── */ @media (max-width: 1024px) { #vivah-site-header.vh-shell .vh-nav { display: none; } #vivah-site-header.vh-shell .vh-burger { display: inline-flex; margin-left: 0; } #vivah-site-header.vh-shell .vh-bar { justify-content: space-between; gap: 8px; } #vivah-site-header.vh-shell .vh-brand { padding-right: 0; margin-right: auto; } #vivah-site-header.vh-shell .vh-brand::after { display: none; } #vivah-site-header.vh-shell .vh-right { margin-left: auto; gap: 8px; } #vivah-site-header.vh-shell .vh-right .vh-acct, #vivah-site-header.vh-shell .vh-right .vh-cta, #vivah-site-header.vh-shell .vh-right .vh-blog { display: none; } #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav { gap: 24px; } } @media (max-width: 767px) { #vivah-site-header.vh-shell .vh-brand .vh-emblem { width: 34px; height: 34px; } #vivah-site-header.vh-shell .vh-brand .vh-w { font-size: 22px; } #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav { gap: 22px; } #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav > a, #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav > button { font-size: 14px; min-width: 44px; justify-content: center; } #vivah-site-header.vh-shell .vh-subheader-bar #vh-custom-nav .tab-x { display: none; } /* phones: "Profile", "Share" (the short labels) */ } @media (max-width: 360px) { #vivah-site-header.vh-shell .vh-brand .vh-w { font-size: 20px; } #vivah-site-header.vh-shell .vh-burger { padding: 0 13px 0 11px; } } @media (prefers-reduced-motion: reduce) { #vivah-site-header.vh-shell * { transition: none; } } /* ── the Menu sheet's plain rows under the product groups: Blog · Careers · About us · Contact us (brief §10) ── */ #vivah-site-header.vh-shell .vh-mflat { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 10px 0 4px; padding: 12px 0 0; border-top: 1px solid #EADBD4; } #vivah-site-header.vh-shell .vh-mflat-a { display: flex; align-items: center; min-height: 48px; box-sizing: border-box; padding: 0 12px; margin: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; font: 500 16px/1.2 "Outfit", "SM Sans Fallback", system-ui, sans-serif; color: #3A2A2F; text-decoration: none; } #vivah-site-header.vh-shell .vh-mflat-a:hover { background: #FAF1EC; color: #7D2E3E; } #vivah-site-header.vh-shell .vh-mflat-a.vh-active { background: var(--vh-tint); color: #7D2E3E; font-weight: 600; }