/* * DIVSA OS — chrome layer (v4.9.47, Phase 4A). * * Header, footer and the mobile bottom navigation. Every rule is scoped to a * `.tap-chrome-*` / `.tap-bottomnav` class — nothing here selects a bare tag, * so it cannot reach into a theme or a WooCommerce template it does not own. * That scoping is the whole reason this plugin can be installed on a live shop. */ /* ── Header ─────────────────────────────────────────────────────────────── * v7.33.6: every visible header colour is a scoped token supplied by * TAP_Chrome::header_style_vars(). No tenant colour is hardcoded here. */ .tap-chrome-header { position: relative; background: var(--tap-header-bg, #fff); border-bottom: 1px solid var(--tap-header-border, var(--tap-line)); color: var(--tap-header-text, var(--tap-ink)); font-family: var(--tap-header-font, var(--tap-font-body)); z-index: var(--tap-layer-header); box-shadow: var(--tap-header-shadow, 0 8px 24px rgba(24,14,32,.06)); } .tap-chrome-header.is-sticky { position: sticky; top: 0; } body.admin-bar .tap-chrome-header.is-sticky { top: 32px; } /* WordPress switches the front-end admin bar to 46px at 782px, not 768px. */ @media (max-width: 782px) { body.admin-bar .tap-chrome-header.is-sticky { top: 46px; } } /* Optional premium floating-card surface. Full-width bar remains the default. */ .tap-hsurface-card { background: transparent; border-bottom: 0; box-shadow: none; padding-block: 6px; } .tap-hsurface-card .tap-chrome-header-in { width: calc(100% - (2 * var(--tap-header-outer-gutter, 12px))); background: var(--tap-header-bg, #fff); border: 1px solid var(--tap-header-border, var(--tap-line)); border-radius: var(--tap-header-radius, 18px); box-shadow: var(--tap-header-shadow, 0 8px 24px rgba(24,14,32,.06)); } .tap-hsurface-card .tap-chrome-mobile-panel { width: calc(100% - (2 * var(--tap-header-outer-gutter, 12px))); max-width: var(--tap-header-content-width, 1120px); margin: 0 auto 6px; border: 1px solid var(--tap-header-border, var(--tap-line)); border-radius: var(--tap-header-radius, 18px); box-shadow: var(--tap-header-shadow, 0 8px 24px rgba(24,14,32,.06)); overflow: hidden; } .tap-chrome-header-in { display: flex; align-items: center; gap: 18px; min-height: var(--tap-header-height, 64px); max-width: var(--tap-header-content-width, 1120px); margin-inline: auto; padding-inline: var(--tap-header-side-padding, 16px); box-sizing: border-box; } .tap-chrome-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; color: var(--tap-header-text, var(--tap-ink)); flex-shrink: 0; min-width: 0; } .tap-chrome-logo { max-height: var(--tap-header-logo-height, 40px); width: auto; height: auto; display:block; } .tap-chrome-om { font-size: 20px; color: var(--tap-header-active, var(--tap-purple)); } .tap-chrome-name { font-size: 17px; letter-spacing: -.01em; } .tap-chrome-menu { display: flex; align-items: center; gap: var(--tap-header-menu-gap, 4px); min-width: 0; flex: 1 1 auto; justify-content: var(--tap-header-menu-align, flex-start); } .tap-chrome-menu a, .tap-chrome-mobile-links a { text-decoration: none; color: var(--tap-header-text, var(--tap-ink)); font-weight: var(--tap-header-menu-weight, 600); font-size: var(--tap-header-menu-size, 14px); border-radius: var(--tap-r-xs, 7px); } .tap-chrome-menu a { padding-block:9px; padding-inline:clamp(6px,.6vw,10px); white-space: nowrap; } .tap-chrome-menu a:hover, .tap-chrome-menu a:focus-visible { color: var(--tap-header-hover, var(--tap-purple)); background: color-mix(in srgb, var(--tap-header-hover, var(--tap-primary)) 8%, transparent); } .tap-chrome-menu a.is-active, .tap-chrome-menu a[aria-current="page"], .tap-chrome-mobile-links a.is-active, .tap-chrome-mobile-links a[aria-current="page"] { color: var(--tap-header-active, var(--tap-purple)); font-weight: 800; } .tap-chrome-menu a.is-active, .tap-chrome-menu a[aria-current="page"] { background: color-mix(in srgb, var(--tap-header-active, var(--tap-primary)) 10%, transparent); } .tap-chrome-search input, .tap-chrome-mobile-search input { border: 1px solid var(--tap-header-border, var(--tap-line)); background: var(--tap-header-bg, #fff); color: var(--tap-header-text, var(--tap-ink)); border-radius: var(--tap-r-full, 999px); font-size: 13px; } .tap-chrome-search input { padding: 9px 14px; width: 180px; } .tap-chrome-search input::placeholder, .tap-chrome-mobile-search input::placeholder { color: color-mix(in srgb, var(--tap-header-text, var(--tap-ink)) 58%, transparent); } .tap-chrome-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; } .tap-chrome-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--tap-btn-radius, 12px); background: var(--tap-header-cta-bg, var(--tap-cta)); color: var(--tap-header-cta-text, var(--tap-cta-text)); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 20px -12px rgba(0,0,0,.35); transition: transform .16s ease, filter .16s ease; } .tap-chrome-cta:hover, .tap-chrome-cta:focus-visible { filter: saturate(1.06) brightness(.98); transform: translateY(-1px); color: var(--tap-header-cta-text, var(--tap-cta-text)); } .tap-chrome-cta:active { transform: translateY(0); } .tap-chrome-acct { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--tap-header-profile-bg, var(--tap-primary-soft)); color: var(--tap-header-profile-icon, var(--tap-purple)); text-decoration: none; flex: 0 0 auto; } .tap-chrome-acct svg { color: inherit; } .tap-chrome-menu a:focus-visible, .tap-chrome-brand:focus-visible, .tap-chrome-cta:focus-visible, .tap-chrome-acct:focus-visible, .tap-chrome-menu-toggle:focus-visible, .tap-chrome-mobile-links a:focus-visible, .tap-chrome-mobile-search input:focus-visible { outline: 3px solid var(--tap-header-active, var(--tap-purple)); outline-offset: 2px; } /* Desktop layout variants. */ .tap-h-logo_right .tap-chrome-actions { order: 1; margin-left: 0; } .tap-h-logo_right .tap-chrome-menu { order: 2; margin-left: auto; } .tap-h-logo_right .tap-chrome-brand { order: 3; } .tap-h-centered .tap-chrome-header-in { flex-wrap: wrap; justify-content: center; gap: 8px 14px; padding-block: 8px; } .tap-h-centered .tap-chrome-brand { order: 1; } .tap-h-centered .tap-chrome-actions { order: 2; margin-left: 0; } .tap-h-centered .tap-chrome-menu { order: 3; flex-basis: 100%; justify-content: center; } .tap-h-minimal .tap-chrome-header-in { justify-content: center; } /* Mobile menu button/drawer; hidden on desktop. */ .tap-chrome-menu-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--tap-header-text, var(--tap-ink)); padding: 0; cursor: pointer; } .tap-chrome-menu-bars { width: 20px; display:grid; gap:4px; } .tap-chrome-menu-bars i { display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .18s ease, opacity .18s ease; } .tap-chrome-menu-toggle[aria-expanded="true"] .tap-chrome-menu-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)} .tap-chrome-menu-toggle[aria-expanded="true"] .tap-chrome-menu-bars i:nth-child(2){opacity:0} .tap-chrome-menu-toggle[aria-expanded="true"] .tap-chrome-menu-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .tap-chrome-mobile-panel[hidden] { display: none !important; } .tap-chrome-mobile-panel { display:none; background:var(--tap-header-bg,#fff); border-top:1px solid var(--tap-header-border,var(--tap-line)); box-shadow:0 14px 30px rgba(0,0,0,.08); } .tap-chrome-mobile-panel-in { padding-block: 12px 16px; } .tap-chrome-mobile-links { display:grid; gap:2px; } .tap-chrome-mobile-links a { display:flex; align-items:center; min-height:44px; padding:9px 12px; } .tap-chrome-mobile-links a:hover, .tap-chrome-mobile-links a:focus-visible { color:var(--tap-header-hover,var(--tap-purple)); background:color-mix(in srgb,var(--tap-header-hover,var(--tap-primary)) 8%,transparent); } .tap-chrome-mobile-search { margin:0 0 10px; } .tap-chrome-mobile-search input { width:100%; min-height:44px; padding:10px 14px; } .tap-chrome-mobile-cta { width:100%; margin-top:10px; } /* Tablet band — progressive disclosure, not a cliff. MEASURED on the live header: logo 289 + menu 273 + search 180 + CTA 157 + account 44 + gaps 72 = 1015px of intrinsic width, but the mobile collapse below only fired under 768px. Every viewport from 768px to ~1015px — i.e. every tablet in portrait and most in landscape — therefore rendered a desktop header wider than the screen and pushed the whole PAGE into horizontal scroll (187px measured at 834px on the native store). Rather than move the hamburger cliff up to 1024px and hide a nav that still fits, drop the two widest optional controls in order: the inline search first, then the "Talk to Astrologer" CTA. Both remain reachable — search from the store's own search box and the mobile panel, the CTA from the nav itself — so nothing becomes unreachable at any width. */ @media (max-width: 1109.98px) { .tap-chrome-search { display:none; } } @media (min-width: 768px) and (max-width: 1023.98px) { .tap-chrome-actions > .tap-chrome-cta { display:none; } /* The menu keeps flex:1 1 auto and min-width:0, so it shrinks first; this only stops a long menu clipping its last item at the narrow end. */ .tap-chrome-menu { overflow-x:auto; scrollbar-width:none; } .tap-chrome-menu::-webkit-scrollbar { display:none; } } @media (max-width: 767.98px) { .tap-chrome-header-in { min-height: min(var(--tap-header-height,64px), 68px); gap:8px; position:relative; } .tap-chrome-menu, .tap-chrome-search, .tap-chrome-actions > .tap-chrome-cta { display:none; } .tap-chrome-menu-toggle { display:grid; place-items:center; flex:0 0 auto; } .tap-chrome-actions { display:flex; margin-left:0; } .tap-chrome-actions:empty { display:none; } .tap-chrome-mobile-panel { display:block; } .tap-chrome-mobile-cta { display:flex; } .tap-chrome-logo { max-height:min(var(--tap-header-logo-height,40px), 40px); max-width:min(46vw,180px); } .tap-chrome-name { font-size:16px; max-width:45vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tap-hm-menu_left_logo_center .tap-chrome-menu-toggle { order:1; } .tap-hm-menu_left_logo_center .tap-chrome-brand { order:2; position:absolute; left:50%; transform:translateX(-50%); } .tap-hm-menu_left_logo_center .tap-chrome-actions { order:3; margin-left:auto; } .tap-hm-logo_left_actions_right .tap-chrome-brand { order:1; } .tap-hm-logo_left_actions_right .tap-chrome-actions { order:2; margin-left:auto; } .tap-hm-logo_left_actions_right .tap-chrome-menu-toggle { order:3; } .tap-hm-logo_center_menu_right .tap-chrome-actions { order:1; } .tap-hm-logo_center_menu_right .tap-chrome-brand { order:2; position:absolute; left:50%; transform:translateX(-50%); } .tap-hm-logo_center_menu_right .tap-chrome-menu-toggle { order:3; margin-left:auto; } .tap-h-minimal .tap-chrome-brand { position:static; transform:none; margin:auto; } } @media (max-width: 782px) and (min-width: 768px) { body.admin-bar .tap-chrome-header.is-sticky { top: 46px; } } @media (prefers-reduced-motion: reduce) { .tap-chrome-cta, .tap-chrome-menu-bars i { transition:none; } } /* ── Footer ─────────────────────────────────────────────────────────────── */ .tap-chrome-footer { position: relative; background: var(--tap-footer-bg, var(--tap-ink)); color: var(--tap-footer-text, var(--tap-card)); margin-top: var(--tap-footer-top-margin, 40px); padding: var(--tap-footer-padding-top, 34px) 0 var(--tap-footer-padding-bottom, 18px); font-family: var(--tap-font-body); overflow: hidden; } .tap-chrome-footer::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad-sacred);pointer-events:none} .tap-chrome-footer-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 26px; max-width: var(--tap-footer-content-width, 1120px); margin-inline: auto; box-sizing: border-box; } .tap-chrome-fbrand { font-weight: 800; color: var(--tap-footer-heading,#fff); font-size: calc(var(--tap-footer-link-size,13px) + 3px); margin-bottom: 8px; } .tap-chrome-fabout p { font-size: var(--tap-footer-link-size,13px); line-height: 1.65; color: var(--tap-footer-muted,var(--tap-card)); margin: 0 0 12px; } .tap-chrome-fcol { display: flex; flex-direction: column; gap: 8px; } .tap-chrome-fcol a { color: var(--tap-footer-text,var(--tap-card)); text-decoration: none; font-size: var(--tap-footer-link-size,13px); } .tap-chrome-fcol a:hover { color: var(--tap-footer-accent, var(--tap-marigold)); } .tap-chrome-fsocial { display: flex; gap: 10px; } .tap-chrome-fsocial a { background: color-mix(in srgb, var(--tap-footer-text,var(--tap-card)) 10%, transparent); border-radius: 999px; padding: 5px 12px; font-size: 12px; } .tap-chrome-fbar { display: flex; max-width: var(--tap-footer-content-width, 1120px); margin-left: auto; margin-right: auto; box-sizing: border-box; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--tap-footer-text,var(--tap-card)) 18%, transparent); font-size: 12px; color: var(--tap-footer-muted,var(--tap-card)); } @media (max-width: 767.98px) { .tap-chrome-footer-in { grid-template-columns: 1fr 1fr; } .tap-chrome-fabout { grid-column: 1 / -1; } } @media (min-width: 768px) and (max-width: 1023.98px) { .tap-chrome-footer-in { grid-template-columns: 1fr 1fr; } .tap-chrome-fabout { grid-column: 1 / -1; } } /* ── Bottom navigation (native-app feel on mobile) ─────────────────────── * * Rendered server-side, so it is on screen at first paint. Bodies get * `tap-has-bottomnav`, which reserves the space at the bottom of the page — * without that reservation the last row of content sits underneath the bar and * nobody can tap it. */ .tap-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--tap-layer-bottomnav); display: none; align-items: flex-end; justify-content: space-around; background: color-mix(in srgb, var(--tap-card) 96%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--tap-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px color-mix(in srgb, var(--tap-ink) 7%, transparent); } .tap-nav-mobile .tap-bottomnav { display: flex; } .tap-nav-always .tap-bottomnav { display: flex; } @media (min-width: 768px) { .tap-nav-mobile .tap-bottomnav { display: none; } } .tap-bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; text-decoration: none; color: var(--tap-muted); font-size:12px; font-weight: 600; min-height: 48px; /* a real tap target, not a decorative one */ justify-content: center; } .tap-bn-ic { font-size: 19px; line-height: 1; } .tap-bn-item.is-active { color: var(--tap-purple); } .tap-bn-item.is-active .tap-bn-ic { transform: translateY(-1px); } /* The centre item is the app's primary action — raised, filled, unmissable. v7.5.25: the second gradient stop was a hardcoded #9b3ff0 — a purple left over from when the product's own brand was purple. On any tenant whose brand is not purple it blended the brand colour into a foreign hue, so the most prominent control in the app was the one that did not match the theme. It now ramps between the contrast-safe brand shade and the raw brand, which stays a gradient (this control is meant to lift off the bar) while remaining entirely within the operator's own colour. */ .tap-bn-item.is-center .tap-bn-ic { background: linear-gradient(135deg, var(--tap-ink-accent, var(--tap-purple)), var(--tap-purple)); color: var(--tap-cta-text); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin-top: -20px; box-shadow: 0 8px 18px rgba(97, 9, 190, .34); font-size: 21px; } .tap-bn-item.is-center { color: var(--tap-purple); } @media (prefers-reduced-motion: no-preference) { .tap-bn-item { transition: color .18s ease; } } /* Phase 9: generic card-rail geometry lives in components/tap-cards.css. * Chrome owns only header/footer/bottom-navigation surfaces. */ /* v8 Visual Studio component builder ----------------------------------- */ .tap-builder-row{width:100%;border-bottom:1px solid color-mix(in srgb,var(--tap-header-border,var(--tap-line)) 65%,transparent)} .tap-builder-row:last-child{border-bottom:0}.tap-builder-row-in{display:flex;align-items:center;min-height:var(--tap-header-height,64px);gap:clamp(10px,1.6vw,24px);padding-inline:var(--tap-header-side-padding,16px)} .tap-builder-row-start .tap-builder-row-in{justify-content:flex-start}.tap-builder-row-center .tap-builder-row-in{justify-content:center}.tap-builder-row-end .tap-builder-row-in{justify-content:flex-end}.tap-builder-row-between .tap-builder-row-in{justify-content:space-between} .tap-builder-item{display:flex;align-items:center;min-width:0}.tap-builder-item.is-grow{flex:1 1 auto}.tap-builder-align-center{justify-content:center}.tap-builder-align-end{justify-content:flex-end}.tap-builder-spacer{display:block;min-width:12px;flex:1 1 auto}.tap-builder-divider{display:block;width:var(--tap-divider-thickness,1px);height:var(--tap-divider-length,28px);margin-inline:var(--tap-divider-margin,0);opacity:var(--tap-divider-opacity,1);border-left:var(--tap-divider-thickness,1px) var(--tap-divider-style,solid) var(--tap-divider-color,var(--tap-header-border,var(--tap-line)));background:transparent;box-sizing:border-box}.tap-builder-text{color:var(--tap-header-text,var(--tap-ink));font:500 .9rem/1.4 var(--tap-header-font,inherit)} .tap-chrome-wp-menu{display:flex;align-items:center;gap:var(--tap-header-menu-gap,16px);list-style:none;margin:0;padding:0}.tap-chrome-wp-menu a{text-decoration:none}.tap-chrome-footer--builder .tap-builder-row{border-color:color-mix(in srgb,var(--tap-footer-text,#fff) 15%,transparent)}.tap-chrome-footer--builder .tap-builder-row-in{min-height:auto;padding-block:20px}.tap-chrome-footer--builder .tap-builder-text,.tap-chrome-footer--builder .tap-builder-copyright{color:var(--tap-footer-text);line-height:1.6}.tap-chrome-footer--builder .tap-chrome-wp-menu{flex-wrap:wrap}.tap-chrome-footer--builder .tap-chrome-wp-menu a{color:var(--tap-footer-text)} .tap-builder-mobile-toggle{display:none} @media(max-width:767px){.tap-builder-vis-desktop{display:none!important}.tap-builder-row-in{min-height:56px;gap:10px}.tap-builder-item.tap-builder-menu{display:none}.tap-builder-mobile-toggle{display:flex;position:absolute;inset-inline-start:12px;top:10px;z-index:3}.tap-chrome-header--builder .tap-builder-logo{margin-inline:auto}.tap-chrome-footer--builder .tap-builder-row-in{align-items:flex-start;flex-direction:column}.tap-chrome-footer--builder .tap-builder-item{width:100%;justify-content:flex-start}.tap-chrome-footer--builder .tap-chrome-wp-menu{flex-direction:column;align-items:flex-start}} @media(min-width:768px){.tap-builder-vis-mobile{display:none!important}} /* v8.6.3 — "Launching soon" marker on a navigation link whose module the tenant has not opened to the public yet. Derived from the module launch state, never typed into the label, so it cannot disagree with the rest of the site. */ .tap-chrome-menu a.is-soon, .tap-chrome-mobile-links a.is-soon{display:inline-flex;align-items:center;gap:6px} .tap-chrome-menu-soon{ display:inline-flex;align-items:center; padding:2px 6px;border-radius:999px; font-size:9.5px;font-weight:700;line-height:1.5; letter-spacing:.07em;text-transform:uppercase;white-space:nowrap; color:var(--tap-header-soon-fg,currentColor); background:var(--tap-header-soon-bg,color-mix(in srgb,currentColor 14%,transparent)); border:1px solid color-mix(in srgb,currentColor 26%,transparent); opacity:.86; } /* v8.6.3 — In canvas mode DIVSA draws the whole shell, so it must also own the page background. It did not: the theme's body colour stayed underneath, and anywhere DIVSA's own root did not reach — above the header, below the footer, beside a narrower container — the visitor saw a strip of the theme's palette against the brand's. Follows the brand token, so it stays correct for any tenant. Inherit mode is untouched: there the theme legitimately owns this. */ body.tap-mode-canvas{background-color:var(--tap-bg,#ffffff)} /* v8.6.3 — A navigation that is one item too wide must shrink itself, never widen the page. The menu is a flex child with `white-space:nowrap` links; at its content width it pushed past the viewport and the whole document grew a horizontal scrollbar — visible on every page, caused by the header. Tighten the link padding as space runs out, and keep a scroll of last resort inside the nav so the failure can never escape the header again. */ .tap-chrome-menu{min-inline-size:0} @media (min-width:1024px){ .tap-chrome-menu{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .tap-chrome-menu::-webkit-scrollbar{display:none} } /* v8.6.10 — Logo optical nudge. Flexbox centres the logo FILE; whether that reads as centred depends on how the artwork sits inside its own canvas. Operator-set, so it corrects the tenant's file rather than assuming one. */ .tap-chrome-header .tap-builder-logo img, .tap-chrome-header .tap-builder-logo .tap-chrome-logo{ transform:translateY(var(--tap-header-logo-offset,0px)); } /* v8.6.10 — The account entry point was a bare 22px glyph: the smallest, lowest-contrast thing in a header that also holds a filled CTA, and well under the 44px minimum for a touch target. It is the only way back to a booking, so it gets a real button. */ .tap-chrome-acct{ display:inline-flex;align-items:center;justify-content:center; inline-size:42px;block-size:42px;border-radius:999px; color:var(--tap-header-text,var(--tap-ink)); background:color-mix(in srgb,currentColor 6%,transparent); border:1px solid color-mix(in srgb,currentColor 16%,transparent); text-decoration:none; transition:background-color 160ms var(--tap-ease-standard,ease), border-color 160ms var(--tap-ease-standard,ease), color 160ms var(--tap-ease-standard,ease), transform 160ms var(--tap-ease-standard,ease); } .tap-chrome-acct:hover{ color:var(--tap-primary); background:color-mix(in srgb,var(--tap-primary) 10%,transparent); border-color:color-mix(in srgb,var(--tap-primary) 26%,transparent); transform:translateY(-1px); } .tap-chrome-acct:focus-visible{ outline:3px solid var(--tap-primary);outline-offset:2px; } .tap-chrome-acct svg{inline-size:21px;block-size:21px;stroke-width:1.9} @media (prefers-reduced-motion:reduce){ .tap-chrome-acct:hover{transform:none} } /* Footer links are explicitly owned by DIVSA brand tokens. */ .tap-chrome-footer--builder a, .tap-chrome-footer--builder .tap-builder-link, .tap-chrome-footer--builder .tap-chrome-menu a, .tap-chrome-footer--builder .tap-chrome-wp-menu a{ color:var(--tap-footer-text,#fff); text-decoration:none; transition:color 160ms var(--tap-ease-standard,ease); } .tap-chrome-footer--builder a:hover, .tap-chrome-footer--builder .tap-chrome-menu a:hover, .tap-chrome-footer--builder .tap-chrome-wp-menu a:hover{ color:var(--tap-footer-accent,var(--tap-saffron)); } .tap-chrome-footer--builder a:focus-visible{ outline:2px solid var(--tap-footer-accent,var(--tap-saffron));outline-offset:3px; } /* The active item is emphasis, not a different palette. */ .tap-chrome-footer--builder .tap-chrome-menu a.is-active, .tap-chrome-footer--builder .tap-chrome-wp-menu a.is-active{ color:var(--tap-footer-accent,var(--tap-saffron));background:transparent;font-weight:600; } /* v8.6.11 — Header CTA carries the brand gradient. The gradient must not run all the way to the raw accent: white on #F99000 is about 2.2:1 and fails AA, and this button is the header's primary action. It therefore ends on a purple-weighted blend of the two brand colours, which still reads as the brand gradient and keeps white text above 4.5:1. Re-check the end stop if either brand colour changes. */ .tap-chrome-header .tap-chrome-cta{ background-image:linear-gradient(96deg, var(--tap-primary) 0%, color-mix(in srgb,var(--tap-primary) 62%,var(--tap-saffron)) 62%, color-mix(in srgb,var(--tap-primary) 44%,var(--tap-saffron)) 100%); background-color:var(--tap-primary); color:#fff; border:0; box-shadow:0 8px 22px color-mix(in srgb,var(--tap-primary) 30%,transparent); } .tap-chrome-header .tap-chrome-cta:hover{ filter:saturate(1.04) brightness(1.04); box-shadow:0 10px 26px color-mix(in srgb,var(--tap-primary) 38%,transparent); } .tap-chrome-header .tap-chrome-cta:focus-visible{ color:#fff;outline:3px solid var(--tap-primary);outline-offset:2px; } /* Profile control, one step larger. */ .tap-chrome-acct{inline-size:46px;block-size:46px} .tap-chrome-acct svg{inline-size:23px;block-size:23px} /* ========================================================================== v8.6.19 — Builder header, mobile and tablet. The drawer switch in tap-home-experience.css (@media max-width:1023.98px) was written against the NATIVE chrome shell: .tap-chrome-header-in, .tap-chrome-menu, .tap-chrome-actions > .tap-chrome-cta, .tap-chrome-mobile-cta. A tenant running the Visual Studio BUILDER header (.tap-chrome-header--builder) matches only one selector in that block — .tap-chrome-menu-toggle — so the hamburger was switched on while none of the builder's own mobile geometry came with it. Two failures followed, both reproduced on a live tenant: 768–1023px the toggle is a sibling of .tap-builder-row, so with no positioning it laid out in normal flow as a second row beneath the bar, flush to the viewport edge at x=0. The header grew from 76px to 121px. <=767px the builder's own rule positions the toggle absolutely at inset-inline-start:12px while .tap-builder-logo carries margin-inline:auto. The centred logo lands underneath the toggle, and because the logo is capped at min(46vw,180px) — wider than the space left once the CTA and account control are laid out — the CTA paints over the wordmark as well. The toggle cannot be moved into the row by CSS: it is a DOM sibling of .tap-builder-row, not a child of it. So it stays absolute, and the row instead reserves a lane for it. The logo becomes the only flexible item, so it absorbs every shortfall rather than the row overflowing. Everything here is scoped to .tap-chrome-header--builder and confined to max-width:1023.98px: the native shell and all desktop widths are untouched. ========================================================================== */ @media (max-width:1023.98px){ /* Out of flow at every width in the band — this is what stops the 768–1023px second row. Centred against the header rather than pinned to a magic top offset, so it stays centred as the row height changes. */ .tap-chrome-header--builder .tap-builder-mobile-toggle{ display:grid!important; position:absolute!important; inset-inline-start:6px; inset-block-start:50%; transform:translateY(-50%); inline-size:44px; block-size:44px; place-items:center; z-index:3; } /* The lane the toggle occupies (6 + 44) plus a gap, reserved as padding so no row item can be laid out underneath it. The end padding is tightened from the tenant's desktop --tap-header-side-padding, which is generous gutter on a 390px row that the wordmark needs more than the edge does. */ .tap-chrome-header--builder .tap-builder-row-in{ padding-inline:56px 14px; gap:6px; flex-wrap:nowrap; } /* The primary nav lives in the drawer across the whole band. Below 767px the builder already hid it; 768–1023px left it as a zero-height flex spacer, which is harmless but leaves two competing spacers once the logo gains margin-inline-end:auto. */ .tap-chrome-header--builder .tap-builder-item.tap-builder-menu{display:none} /* The CTA is the tenant's conversion action and the account control is a fixed-size affordance: neither may shrink or wrap. */ .tap-chrome-header--builder .tap-builder-button, .tap-chrome-header--builder .tap-builder-account{flex:0 0 auto} .tap-chrome-header--builder .tap-builder-button .tap-chrome-cta{white-space:nowrap} /* The logo is the only flexible item, so it absorbs the whole shortfall rather than the row overflowing. It hugs the toggle lane (never centred into it) and its auto end-margin pushes the actions right. min-inline-size is 0 deliberately: a floor here would trade a small wordmark for a horizontally scrolling page, which is the worse failure. */ .tap-chrome-header--builder .tap-builder-logo{ margin-inline:0 auto!important; flex:0 1 auto; min-inline-size:0; overflow:hidden; } .tap-chrome-header--builder .tap-builder-logo .tap-chrome-brand{ display:block; flex:0 1 auto; min-inline-size:0; max-inline-size:100%; } /* The 100% term is what lets the image follow the flex item down; the 46vw and 180px terms restate the tenant's own ceiling from tap-home-experience, so the logo never renders LARGER than it did before this fix. auto block-size keeps the aspect ratio, so no cap is ever a squash. */ .tap-chrome-header--builder .tap-builder-logo .tap-chrome-logo{ display:block; inline-size:auto; max-inline-size:min(100%,46vw,180px); block-size:auto; max-block-size:min(var(--tap-header-logo-height,40px),34px); object-fit:contain; object-position:left center; } } /* Phones: the CTA label is the widest fixed element in the row, so it gives up its optical padding before the logo gives up any more width. */ /* 360px and below (iPhone SE 1st gen, Galaxy S8 class). Four controls plus a 6.6:1 wordmark genuinely do not fit here, so the gutters and the CTA's optical padding are spent down to their last usable values before the wordmark is allowed to shrink any further. */ /* ========================================================================== v8.6.20 — Phone header is brand + wayfinding only. v8.6.19 made all four controls FIT on a phone by spending the wordmark's width and the CTA's optical padding down to their last usable values. It fit, but the row still carried a 6.6:1 wordmark clamped to 34px tall next to a filled CTA, and at 360px the CTA was down to an 11px label — a primary action rendered at a size that reads as fine print. The operator's decision is that the phone header is ☰ | wordmark | account, and "Talk to Astrologer" is reached from the drawer and the bottom nav's Astrology tab (same /astrology/ destination), which are both already on screen. Removing it is not a downgrade of the conversion path; it is the removal of a third copy of it from the most space-starved row in the product. Tablet (768–1023px) keeps the CTA: the drawer is already active there and the row has the width for a full-size label. ========================================================================== */ @media (max-width:767.98px){ .tap-chrome-header--builder .tap-builder-item.tap-builder-button{display:none!important} /* With the CTA gone the row is toggle-lane + wordmark + account, so the wordmark stops being the item that absorbs every shortfall. The caps below are the tenant's own ceiling again (v8.6.19 restated it at 34px only because the CTA was competing for the same pixels). */ .tap-chrome-header--builder .tap-builder-logo .tap-chrome-logo{ max-inline-size:min(100%,52vw,180px); max-block-size:min(var(--tap-header-logo-height,40px),40px); } /* The 360px tier existed to buy width for the CTA. Nothing is competing for it now, so the gutters return to the same values every other phone gets and the wordmark keeps its full ceiling. */ .tap-chrome-header--builder .tap-builder-row-in{padding-inline:56px 14px} .tap-chrome-header--builder .tap-builder-mobile-toggle{inset-inline-start:6px} } /* ========================================================================== v8.6.20 — Bottom nav: one active state at a time. .is-center is a POSITION (the raised centre slot), not a state. It was painted with the brand gradient and given the brand label colour unconditionally, so on /pujas/ the bar showed Pujas brand-coloured AND the raised Chadhava circle brand-coloured — two items reading as current. The raised treatment stays; only its COLOUR now follows .is-active. An inactive centre item is a raised neutral disc: still the most prominent affordance in the bar, no longer a false "you are here". ========================================================================== */ .tap-bn-item.is-center .tap-bn-ic{ background:var(--tap-card,#fff); color:var(--tap-muted); border:1px solid color-mix(in srgb,var(--tap-ink) 12%,transparent); box-shadow:0 6px 16px color-mix(in srgb,var(--tap-ink) 14%,transparent); } /* The label follows the same rule as every other item: muted until current. */ .tap-bn-item.is-center{color:var(--tap-muted)} /* Current page: the centre slot returns to the filled brand disc. */ .tap-bn-item.is-center.is-active .tap-bn-ic{ background:linear-gradient(135deg,var(--tap-ink-accent,var(--tap-purple)),var(--tap-purple)); color:var(--tap-cta-text); border-color:transparent; box-shadow:0 8px 18px color-mix(in srgb,var(--tap-purple) 34%,transparent); } .tap-bn-item.is-center.is-active{color:var(--tap-purple)} /* Phase 7: support FAB size follows chrome; vertical placement is owned by the canonical fixed-surface contract in tap-shell.css. */ @media (max-width:767.98px){ #tap-wa-float{inline-size:46px;block-size:46px;inset-inline-end:max(12px,var(--tap-safe-right))} } /* ========================================================================== v8.6.21 — Footer, mobile. Two faults, both from the same ≤767px block near the top of this file. 1. `.tap-builder-item.tap-builder-menu{display:none}` is UNSCOPED. It was written to take the primary nav out of the HEADER so the drawer could own it, but it matches the footer's menu item too — so the footer's entire seven-link navigation (Home, Pooja, Chadhava, Personal Pooja, Astrology, Healing, TA Store) was invisible on every phone, while desktop showed it. A footer losing its navigation on the majority device is content loss, not a responsive decision. 2. `.tap-chrome-footer--builder .tap-builder-row-in{flex-direction:column}` plus `.tap-builder-item{width:100%}` gives every item its own full-width line. Five one-word links ("Pujas", "Chadhava", "TA Store"…) then cost 213px of column — each link a 358px-wide row holding a 40px word. The row now wraps instead of stacking: things that are genuinely full-width (logo, tagline, copyright) stay full-width, and short links pair up two per line. The menu comes back as a two-column grid. ========================================================================== */ @media (max-width:767.98px){ .tap-chrome-footer--builder .tap-builder-row-in{ flex-direction:row!important; flex-wrap:wrap!important; align-items:flex-start!important; gap:10px 16px; } /* Default: size to content rather than claiming the whole line. */ .tap-chrome-footer--builder .tap-builder-item{width:auto!important} /* These three are full-width by nature, not by accident. */ .tap-chrome-footer--builder .tap-builder-item.tap-builder-logo, .tap-chrome-footer--builder .tap-builder-item.tap-builder-text, .tap-chrome-footer--builder .tap-builder-item.tap-builder-copyright{ width:100%!important; } /* Short links pair up. calc() rather than 50% so the row gap is respected and a long label wraps inside its own half instead of forcing one-up. */ .tap-chrome-footer--builder .tap-builder-item.tap-builder-link{ width:calc(50% - 8px)!important; } /* The menu returns, in the same two-column rhythm as the links. */ .tap-chrome-footer--builder .tap-builder-item.tap-builder-menu{ display:flex!important; width:100%!important; } .tap-chrome-footer--builder .tap-chrome-menu, .tap-chrome-footer--builder .tap-chrome-wp-menu{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; width:100%; flex-direction:unset!important; } /* 32px keeps these comfortably tappable without turning the footer back into a column of 44px rows. */ .tap-chrome-footer--builder .tap-chrome-menu a, .tap-chrome-footer--builder .tap-chrome-wp-menu a{ display:flex;align-items:center; min-height:32px; padding:0; } } /* ========================================================================== v8.6.26 — the builder footer is desktop-only. On a phone the app shell already carries a fixed bottom navigation, so the footer repeated the same seven destinations directly above it and then ran on for another two rows. Every destination it held now lives in the mobile menu panel: the header carries a second, visibility:mobile menu item whose WP menu ("Mobile Extra Links") adds Book a Puja, My Bookings, Privacy Policy, Refund & Returns and Data Deletion. That item renders at display:none in the desktop header — TAP_Chrome collects menu ids for the panel from every header item regardless of visibility — so the desktop header and the desktop footer are both untouched. ========================================================================== */ @media (max-width: 767.98px) { .tap-chrome-footer { display: none; } } /* ========================================================================== v8.6.26 — a real WP menu inside the mobile panel. .tap-chrome-mobile-links was written for the fallback menu, which prints bare children straight into the grid. A header item that points at an actual WP menu prints