/* ========================================================================== TriKdanG — App Header (search + quick actions) An app-style header bar shown once "Enable app header" is checked under Appearance -> Customize -> App Header (Search + Actions). Hamburger + logo on the left, a search bar, and quick-action icons (Randomizer / Saved Hangar) on the right — inspired by the layout of apps like YouTube, restyled with this site's own colors/typography. Only enqueued once the feature is turned on (see trikdang_enqueue_app_header_assets() in functions.php) — like app-nav.css, there's no reason to ship this to every visitor when it's off. When it's on, this bar takes the existing header's place — see the "Hide the original header" rules near the bottom — at whichever breakpoint "Show on" is set to (mobile-only, or desktop + mobile). ========================================================================== */ :root { --trikdang-app-header-height: 56px; /* ---- Semantic theme-switcher aliases ----------------------------- Re-points the 5 generic names the App Shell & Commerce Engine plugin's components are written against onto this theme's real adaptive palette (defined in motif.css, driven by data-theme="light"/"dark" on ). Dark is this theme's default, so --text-primary/--border-color resolve to the "paper" tones by default and only flip when :root[data-theme='light'] is active — same mechanism as every other themed control. Keeping the aliasing here (rather than hard-coding these five names into motif.css) means any component — theme or plugin — can rely on a stable contract without caring which preset var backs it today. */ --bg-primary: var(--wp--preset--color--night-flight, #14151A); --surface-color: var(--wp--preset--color--surface, #1C1D22); --text-primary: var(--wp--preset--color--paper, #F3EFE4); --border-color: var(--wp--preset--color--paper-dim, rgba(243, 239, 228, 0.35)); --accent-color: var(--wp--preset--color--signature-red, #E4002B); } .site-app-header { display: none; /* shown only once enabled, per the "Show on" rules further down */ position: fixed; top: var(--trikdang-admin-bar-offset, 0px); left: 0; right: 0; z-index: 160; /* above the regular .site-header (150), so a drawer/panel opened from here always wins */ background: var(--trikdang-header-bg, var(--wp--preset--color--night-flight, #121316)); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-sizing: border-box; /* Animate "top" rather than "transform" here, same reasoning as .site-header in motif.css: a transform would make this element the containing block for any position:fixed descendant inside it. Nothing inside .site-app-header currently needs that (the drawer and Saved Hangar panel are siblings right after it, not children — see trikdang_render_app_header() in functions.php), but animating "top" costs nothing and keeps this consistent with how the rest of the theme handles the exact same slide-away trick, so a future change that did nest something fixed in here wouldn't silently break. Only ever animates when "Sticky behavior" is set to Dynamic — see app-header-sticky.js, which is the only thing that ever toggles .site-app-header--hidden below. */ transition: box-shadow 0.2s ease, border-color 0.2s ease, top 0.25s ease; } :root[data-theme='light'] .site-app-header { border-bottom-color: rgba(20, 21, 26, 0.12); } /* ---- Dynamic sticky behavior ("Sticky behavior" -> Dynamic) ---- Both classes below are only ever toggled by app-header-sticky.js, and that script no-ops entirely unless body.tk-app-header-sticky-dynamic is present (set from the "Sticky behavior" Customizer control — see trikdang_app_header_body_class() in functions.php). Under the default "Static" setting neither class is ever added, so the bar simply stays fixed and visible exactly as it always has. --trikdang-app-header-actual-height is kept as its own variable, separate from --trikdang-app-header-height above, for the same reason --trikdang-header-actual-height is kept separate from --trikdang-header-height in motif.css: --trikdang-app-header-height also sets .site-app-header__bar's min-height below, which is itself part of what app-header-sticky.js measures. Writing the measured value back into that same variable would feed the measurement into the next one, growing without bound instead of settling — see the comment atop header-sticky.js for the full story. Keeping the JS-measured value in its own variable, used only by things OUTSIDE the bar (the spacer, and the hidden-state offset below), means it never loops back on itself. */ .site-app-header--hidden { /* Same "why not -100%" reasoning as .site-header--hidden in motif.css: percentage "top" resolves against the containing block's height, not this element's own, so the actual measured height is used instead. The extra 24px clears .site-app-header--scrolled's own box-shadow blur so no trailing edge of it is left visible once hidden. */ top: calc(-1 * var(--trikdang-app-header-actual-height, var(--trikdang-app-header-height, 56px)) - 24px); } .site-app-header--scrolled { border-bottom-color: rgba(139, 145, 153, 0.25); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); } :root[data-theme='light'] .site-app-header--scrolled { border-bottom-color: rgba(20, 21, 26, 0.18); } .site-app-header__bar { display: flex; align-items: center; gap: 0.75rem; min-height: var(--trikdang-app-header-height); padding: 0 var(--wp--preset--spacing--20, 1rem); box-sizing: border-box; /* Matches the regular .site-header and .site-footer, which both use a WP "constrained" layout with contentSize:1180px. Those are block markup so WP adds the max-width for us; .site-app-header is plain PHP-rendered HTML, so it never got the same constraint and the bar stretched edge-to-edge on desktop instead of lining up with the footer below it. The outer .site-app-header keeps its full-bleed background; only this inner row is constrained. */ max-width: 1180px; margin-inline: auto; } .site-app-header-spacer { display: none; /* sized + shown only alongside the bar itself, see media query below */ /* Falls back to the fixed Customizer height when nothing has measured the bar yet (Static mode never does — see above), so this is a pure no-op improvement there and only actually varies in Dynamic mode, where the bar's real rendered height can differ from the constant (e.g. the mobile search bar expanding open). */ height: var(--trikdang-app-header-actual-height, var(--trikdang-app-header-height, 56px)); } .site-app-header__left { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; } .site-app-header__icon-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: 0; background: none; padding: 0; color: var(--wp--preset--color--paper, #F3EFE4); cursor: pointer; border-radius: 999px; } .site-app-header__icon-btn:hover, .site-app-header__icon-btn:focus-visible { background: rgba(255, 255, 255, 0.08); } :root[data-theme='light'] .site-app-header__icon-btn:hover, :root[data-theme='light'] .site-app-header__icon-btn:focus-visible { background: rgba(20, 21, 26, 0.06); } .site-app-header__icon-btn svg { width: 22px; height: 22px; } .site-app-header__badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--wp--preset--color--signature-red, #E4002B); color: #fff; font-size: 10px; line-height: 15px; text-align: center; font-family: var(--wp--preset--font-family--body, inherit); } /* * Non-checkout indicator (Saved Hangar). Same dot the count JS already * hides/shows via [hidden] — this only changes how it *looks*, so no * change was needed in app-header.js: a plain accent dot instead of a * number, so it never reads like a paid-cart count. */ .site-app-header__badge--dot { min-width: 0; width: 9px; height: 9px; padding: 0; top: 4px; right: 4px; font-size: 0; line-height: 0; overflow: hidden; } .site-app-header__logo { display: flex; align-items: center; text-decoration: none; color: var(--wp--preset--color--paper, #F3EFE4); } .site-app-header__logo-img { display: block; height: 30px; width: auto; } .site-app-header__logo-text { font-family: var(--wp--preset--font-family--display, inherit); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; white-space: nowrap; } /* ---- Search ---- */ .site-app-header__search { position: relative; /* anchors the suggestions dropdown below it, in every header variant */ flex: 1 1 auto; min-width: 0; } .site-app-header__search-form { display: flex; align-items: center; gap: 0.4rem; } .site-app-header__search-input { flex: 1 1 auto; min-width: 0; height: 38px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--wp--preset--color--paper, #F3EFE4); padding: 0 1rem; font-family: var(--wp--preset--font-family--body, inherit); font-size: 0.9rem; } .site-app-header__search-input::placeholder { color: var(--wp--preset--color--paper-dim, #C9C4B6); } .site-app-header__search-input:focus { outline: none; border-color: var(--wp--preset--color--signature-red, #E4002B); background: rgba(255, 255, 255, 0.1); } :root[data-theme='light'] .site-app-header__search-input { border-color: rgba(20, 21, 26, 0.16); background: rgba(20, 21, 26, 0.04); } :root[data-theme='light'] .site-app-header__search-input:focus { background: rgba(20, 21, 26, 0.06); } .site-app-header__search-submit { display: none; /* icon-only trigger doubles as submit on mobile; shown again on desktop below */ border: 0; background: none; padding: 0; color: var(--wp--preset--color--paper, #F3EFE4); cursor: pointer; } .site-app-header__search-submit svg { width: 20px; height: 20px; } /* Search toggle button holds BOTH a search glyph and a back-arrow glyph; only one shows at a time. Collapsed: search glyph (tap to expand the input). Expanded on mobile (.is-search-open, see the media query further down): back-arrow instead, so tapping it clearly reads as "leave search" rather than showing a second, redundant magnifying-glass icon right next to the submit button at the other end of the expanded bar. */ .site-app-header__search-toggle { position: relative; } .site-app-header__search-toggle-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; } .site-app-header__search-toggle-icon--back { display: none; } body.tk-app-header-enabled .site-app-header__bar.is-search-open .site-app-header__search-toggle-icon--search { display: none; } body.tk-app-header-enabled .site-app-header__bar.is-search-open .site-app-header__search-toggle-icon--back { display: flex; } /* ---- Search suggestions dropdown ---- Curated terms (Appearance -> Customize -> App Header) blended with live post/page matches from wp/v2/search, rendered entirely by assets/js/app-header.js's "Search suggestions" block — this file only styles the box + rows it builds. Anchored to .site-app-header__search (position: relative, set above), so it works unchanged across every header variant and both breakpoints: V1's always-on bar, V2/V3's always-expanded bar, V4's click-to-expand bar, and every version's mobile collapse/expand. */ .site-app-header__search-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--wp--preset--color--night-flight-black, #121316); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 0.35rem; max-height: 320px; overflow-y: auto; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } :root[data-theme='light'] .site-app-header__search-suggestions { background: var(--wp--preset--color--paper, #F3EFE4); border-color: rgba(20, 21, 26, 0.12); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } .site-app-header__search-suggestion { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; border: 0; background: none; color: var(--wp--preset--color--paper, #F3EFE4); text-decoration: none; font-family: var(--wp--preset--font-family--body, inherit); font-size: 0.88rem; padding: 0.55rem 0.7rem; border-radius: 8px; cursor: pointer; } :root[data-theme='light'] .site-app-header__search-suggestion { color: var(--wp--preset--color--night-flight-black, #14151A); } .site-app-header__search-suggestion:hover, .site-app-header__search-suggestion.is-active { background: rgba(255, 255, 255, 0.08); } :root[data-theme='light'] .site-app-header__search-suggestion:hover, :root[data-theme='light'] .site-app-header__search-suggestion.is-active { background: rgba(20, 21, 26, 0.06); } .site-app-header__search-suggestion--empty { cursor: default; opacity: 0.6; } .site-app-header__search-suggestion--empty:hover { background: none; } .site-app-header__search-suggestion-icon { display: flex; flex-shrink: 0; opacity: 0.7; } .site-app-header__search-suggestion-icon svg { width: 15px; height: 15px; } .site-app-header__search-suggestion-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-app-header__search-suggestion-type { flex-shrink: 0; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.55; } .site-app-header__right { display: flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; } /* ---- Slide-out drawer (hamburger) ---- */ .site-app-header__drawer { position: fixed; inset: 0; z-index: 200; } .site-app-header__drawer[hidden] { display: none; } .site-app-header__drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .site-app-header__drawer-panel { position: relative; width: min(84vw, 320px); height: 100%; background: var(--trikdang-header-bg, var(--wp--preset--color--night-flight, #121316)); color: var(--wp--preset--color--paper, #F3EFE4); display: flex; flex-direction: column; box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35); animation: tk-drawer-in 0.2s ease; } @keyframes tk-drawer-in { from { transform: translateX(-12px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } .site-app-header__drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-app-header__drawer-brand { display: flex; align-items: center; text-decoration: none; color: var(--wp--preset--color--paper, #F3EFE4); min-width: 0; } .site-app-header__drawer-brand-img { display: block; height: 28px; width: auto; } .site-app-header__drawer-brand-text { font-family: var(--wp--preset--font-family--display, inherit); font-weight: 700; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-theme='light'] .site-app-header__drawer-brand { color: #16161a; } .site-app-header__drawer-list { list-style: none; margin: 0; padding: 0.5rem 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .site-app-header__drawer-list a { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.1rem; color: var(--wp--preset--color--paper, #F3EFE4); text-decoration: none; font-family: var(--wp--preset--font-family--body, inherit); font-size: 1rem; } .site-app-header__drawer-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--wp--preset--color--paper-dim, #C9C4B6); } .site-app-header__drawer-list a:hover, .site-app-header__drawer-list a:focus-visible { background: rgba(255, 255, 255, 0.06); } :root[data-theme='light'] .site-app-header__drawer-panel { color: #16161a; } :root[data-theme='light'] .site-app-header__drawer-list a { color: #16161a; } :root[data-theme='light'] .site-app-header__drawer-list a:hover, :root[data-theme='light'] .site-app-header__drawer-list a:focus-visible { background: rgba(20, 21, 26, 0.05); } /* ---- Drawer promo block ---- */ .site-app-header__drawer-promo { flex: 0 0 auto; margin: 0.25rem 1.1rem 1rem; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); } :root[data-theme='light'] .site-app-header__drawer-promo { background: rgba(20, 21, 26, 0.04); border-color: rgba(20, 21, 26, 0.1); } .site-app-header__drawer-promo-img { display: block; width: 100%; height: 110px; object-fit: cover; } .site-app-header__drawer-promo-body { padding: 0.85rem 1rem; } .site-app-header__drawer-promo-title { display: block; font-family: var(--wp--preset--font-family--display, inherit); font-size: 0.95rem; margin-bottom: 0.25rem; } .site-app-header__drawer-promo-text { margin: 0 0 0.65rem; font-size: 0.85rem; color: var(--wp--preset--color--paper-dim, #C9C4B6); line-height: 1.4; } .site-app-header__drawer-promo-btn { display: inline-block; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--wp--preset--color--signature-red, #E4002B); color: #fff; text-decoration: none; font-size: 0.82rem; font-weight: 600; } /* ---- Drawer social icon row ---- */ .site-app-header__drawer-social { flex: 0 0 auto; list-style: none; display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.75rem 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } :root[data-theme='light'] .site-app-header__drawer-social { border-top-color: rgba(20, 21, 26, 0.12); } .site-app-header__drawer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: var(--wp--preset--color--paper, #F3EFE4); background: rgba(255, 255, 255, 0.06); } :root[data-theme='light'] .site-app-header__drawer-social a { color: #16161a; background: rgba(20, 21, 26, 0.05); } .site-app-header__drawer-social a:hover, .site-app-header__drawer-social a:focus-visible { background: var(--wp--preset--color--signature-red, #E4002B); color: #fff; } .site-app-header__drawer-social svg { width: 18px; height: 18px; } .site-app-header__drawer-social-letter { font-family: var(--wp--preset--font-family--display, inherit); font-weight: 700; font-size: 0.95rem; line-height: 1; } /* ---- Saved Hangar panel ---- */ .site-app-header__saved-panel { position: fixed; inset: 0; z-index: 200; } .site-app-header__saved-panel[hidden] { display: none; } .site-app-header__saved-panel-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .site-app-header__saved-panel-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 70vh; overflow-y: auto; background: var(--trikdang-header-bg, var(--wp--preset--color--night-flight, #121316)); color: var(--wp--preset--color--paper, #F3EFE4); border-radius: 16px 16px 0 0; padding: 0 0 env(safe-area-inset-bottom, 0px); animation: tk-sheet-in 0.2s ease; } @keyframes tk-sheet-in { from { transform: translateY(12px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } } .site-app-header__saved-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-app-header__saved-list { list-style: none; margin: 0; padding: 0.4rem 0; } .site-app-header__saved-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1.1rem; } .site-app-header__saved-list a { color: var(--wp--preset--color--paper, #F3EFE4); text-decoration: none; font-size: 0.95rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-app-header__saved-item-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .site-app-header__saved-list button { border: 0; background: none; color: var(--wp--preset--color--paper-dim, #C9C4B6); cursor: pointer; font-size: 0.8rem; flex-shrink: 0; } .site-app-header__saved-empty { padding: 0 1.1rem 1.25rem; color: var(--wp--preset--color--paper-dim, #C9C4B6); font-size: 0.9rem; } :root[data-theme='light'] .site-app-header__saved-panel-sheet { color: #16161a; } :root[data-theme='light'] .site-app-header__saved-list a { color: #16161a; } /* ---- Mobile layout (<=860px): compact search icon, not a full bar ---- */ @media (max-width: 860px) { body.tk-app-header-enabled .site-app-header { display: block; } body.tk-app-header-enabled .site-app-header-spacer { display: block; } /* Collapsed by default: the search wrapper shrinks to just its icon button and, together with the right-hand icon group right after it in the markup, gets pushed to the far right edge — so the row reads as "[hamburger + logo] ......... [search][dice][bookmark]", one clustered icon row, instead of the search icon stranding itself right after the logo with a big gap before the other icons. */ body.tk-app-header-enabled .site-app-header__search { flex: 0 0 auto; margin-left: auto; } body.tk-app-header-enabled .site-app-header__search-input, body.tk-app-header-enabled .site-app-header__search-submit { display: none; } /* Tapping the search icon expands the input to fill the whole bar, same as YouTube's mobile header — toggled by assets/js/app-header.js adding "is-search-open" to the bar. */ body.tk-app-header-enabled .site-app-header__bar.is-search-open .site-app-header__left, body.tk-app-header-enabled .site-app-header__bar.is-search-open .site-app-header__right { display: none; } body.tk-app-header-enabled .site-app-header__bar.is-search-open .site-app-header__search { flex: 1 1 auto; margin-left: 0; } body.tk-app-header-enabled .site-app-header__bar.is-search-open .site-app-header__search-form { width: 100%; } body.tk-app-header-enabled .site-app-header__bar.is-search-open .site-app-header__search-input { display: block; width: 100%; } body.tk-app-header-enabled .site-app-header__bar.is-search-open .site-app-header__search-submit { display: flex; } /* v3.1 — V2-only now (was V2+V3): the collapsed search icon sits immediately after the hamburger + logo, on the left, instead of clustering with the right-hand icon group. V3 was requested to match this on desktop but keep the icon on the RIGHT on mobile too (i.e. behave exactly like V1 mobile: clustered with Randomizer + Pilot via the generic `margin-left: auto` rule above) — so V3 is no longer listed here. Higher specificity (3 classes vs. 2) than the generic rule above, so no `!important` needed; V1 mobile is completely untouched either way. */ body.tk-app-header-all.header-v2 .site-app-header__search { margin-left: 0; } body.tk-app-header-all.header-v2 .site-app-header__right { margin-left: auto; } } /* ---- Header V2/V3 desktop inline search bar: reuses the exact same "always-expanded search bar" styling this theme already shipped, just scoped to .header-v2/.header-v3 instead of applying to every "Desktop + Mobile" header (V1's desktop search bar was replaced by the nav+cart layout further down this file — this block is what V2 and V3 use instead). The only difference is which side of the bar the magnifying-glass icon sits on — V2: start; V3: end (the original/default side) — see the variant-specific sub-blocks below the shared one. V4 USED to share this same always-expanded bar, but its desktop header was simplified to a collapsed icon that expands on click (matching the mobile collapse/expand shape instead) — see the dedicated "Header V4 desktop collapsible search" block further down, right after V4's centered nav. V4 is deliberately absent from every selector below now. ---- */ @media (min-width: 861px) { body.tk-app-header-all.header-v2 .site-app-header__search-form, body.tk-app-header-all.header-v3 .site-app-header__search-form { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; } :root[data-theme='light'] body.tk-app-header-all.header-v2 .site-app-header__search-form, :root[data-theme='light'] body.tk-app-header-all.header-v3 .site-app-header__search-form { background: rgba(20, 21, 26, 0.04); border-color: rgba(20, 21, 26, 0.16); } body.tk-app-header-all.header-v2 .site-app-header__search-form:focus-within, body.tk-app-header-all.header-v3 .site-app-header__search-form:focus-within { border-color: var(--wp--preset--color--signature-red, #E4002B); } body.tk-app-header-all.header-v2 .site-app-header__search-toggle, body.tk-app-header-all.header-v3 .site-app-header__search-toggle { display: none; } /* full bar always visible on desktop, no icon-to-expand step */ body.tk-app-header-all.header-v2 .site-app-header__search-input, body.tk-app-header-all.header-v3 .site-app-header__search-input { display: block; height: 42px; border: 0; background: none; padding: 0; } body.tk-app-header-all.header-v2 .site-app-header__search-submit, body.tk-app-header-all.header-v3 .site-app-header__search-submit { display: flex; } /* V2 — icon at the START of the bar. Padding is left-tight/right-roomy to hug the icon on the left while giving the input's placeholder text breathing room before the pill's right edge. */ body.tk-app-header-all.header-v2 .site-app-header__search-form { padding: 0 1rem 0 0.35rem; } body.tk-app-header-all.header-v2 .site-app-header__search-submit { order: -1; } /* V3 — icon at the END of the bar (the original/default side): padding is left-roomy/right-tight instead, and the submit button keeps its natural DOM order (after the input) rather than being reordered. */ body.tk-app-header-all.header-v3 .site-app-header__search-form { padding: 0 0.35rem 0 1rem; } } /* ---- Hide the original header where the app header takes over ---- */ body.tk-app-header-enabled.tk-app-header-mobile .site-header, body.tk-app-header-enabled.tk-app-header-mobile .site-header-spacer { /* Mobile-only mode: leave the existing wide-screen header completely untouched above 860px; only swap it out below that breakpoint. */ } @media (max-width: 860px) { body.tk-app-header-enabled.tk-app-header-mobile .site-header, body.tk-app-header-enabled.tk-app-header-mobile .site-header-spacer { display: none !important; } } body.tk-app-header-enabled.tk-app-header-all .site-header, body.tk-app-header-enabled.tk-app-header-all .site-header-spacer { display: none !important; } @media (min-width: 861px) { body.tk-app-header-enabled.tk-app-header-all .site-app-header { display: block; } body.tk-app-header-enabled.tk-app-header-all .site-app-header-spacer { display: block; } } /* ========================================================================== TriKdanG — App Shell upgrade: desktop nav + cart, Pilot Account drawer, tooltips. Added for the App Shell header upgrade (👤 Pilot Account). Everything above this point is unchanged. This block only adds: 1. A desktop-only center nav + cart icon, and the mobile/desktop-only show/hide rules the new responsive layout needs. 2. Styled hover/focus tooltips (reads the existing `title` attribute — no extra markup needed, works alongside the native browser tooltip / screen-reader text already on every icon). 3. The Pilot Account drawer itself, built from the exact same .site-app-header__drawer / -scrim / -panel classes as the hamburger drawer above, just sliding in from the right with a `--pilot` modifier and its own body/section styles. Reuses every existing color/spacing token (--trikdang-header-bg, --wp--preset--color--*) rather than introducing new ones, and never touches the :root[data-theme] rules further up this file — that selector is this file's whole contract with the (separate) TriKdanG Theme Toggle plugin, and the Pilot drawer's Theme Mode switch simply operates that same switch rather than duplicating it. ========================================================================== */ /* ---- Styled tooltips (progressive enhancement over the native title attribute — desktop hover + keyboard focus both trigger it) ---- */ .site-app-header [title] { position: relative; } .site-app-header [title]::after { content: attr(title); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); background: #16161a; color: #F3EFE4; font-family: var(--wp--preset--font-family--body, inherit); font-size: 0.72rem; line-height: 1.3; white-space: nowrap; padding: 0.35rem 0.6rem; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; z-index: 220; } :root[data-theme='light'] .site-app-header [title]::after { background: #16161a; color: #F3EFE4; } .site-app-header [title]:hover::after, .site-app-header [title]:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Right-edge icons (Pilot, Cart) would otherwise clip their tooltip off the right edge of the viewport — anchor those to the right instead. */ .site-app-header__right [title]::after { left: auto; right: 0; transform: translateY(-4px); } .site-app-header__right [title]:hover::after, .site-app-header__right [title]:focus-visible::after { transform: translateY(0); } /* The drawer scrims cover the whole screen and don't need a tooltip of their own — suppress the generic rule above for them. */ .site-app-header__drawer-scrim[title]::after, .site-app-header__saved-panel-scrim[title]::after { content: none; } /* ---- Desktop-only center nav + mobile/desktop-only utility icons ---- */ .site-app-header__nav { display: none; align-items: center; gap: 1.6rem; flex: 1 1 auto; justify-content: center; } .site-app-header__nav a { color: var(--wp--preset--color--paper-dim, #C9C4B6); text-decoration: none; font-family: var(--wp--preset--font-family--body, inherit); font-size: 0.95rem; white-space: nowrap; } .site-app-header__nav a:hover, .site-app-header__nav a:focus-visible { color: var(--wp--preset--color--paper, #F3EFE4); } :root[data-theme='light'] .site-app-header__nav a { color: rgba(20, 21, 26, 0.7); } :root[data-theme='light'] .site-app-header__nav a:hover, :root[data-theme='light'] .site-app-header__nav a:focus-visible { color: #16161a; } /* Active/current-page link (see trikdang_render_app_header() in functions.php, which marks whichever V4/V3-icons nav link's URL best matches the current page — same "most specific match wins" logic as the App Navigation tab bars and the header's own primary menu). */ .site-app-header__nav a.is-current { color: var(--wp--preset--color--signature-red, #E4002B); font-weight: 600; } .site-app-header__nav a.is-current:hover, .site-app-header__nav a.is-current:focus-visible { color: var(--wp--preset--color--signature-red, #E4002B); } :root[data-theme='light'] .site-app-header__nav a.is-current, :root[data-theme='light'] .site-app-header__nav a.is-current:hover, :root[data-theme='light'] .site-app-header__nav a.is-current:focus-visible { color: var(--wp--preset--color--signature-red, #E4002B); } .site-app-header__icon-btn--desktop-only { display: none; } /* Mobile (<=860px): hamburger, search, dice, Pilot — the required "max 3 icons in the right-hand group" (search, dice, Pilot), since the Saved Hangar trigger is rendered [hidden] (see trikdang_render_app_header() in functions.php) and the cart icon is desktop-only. Nav links stay hidden — they already live in the hamburger drawer. */ @media (max-width: 860px) { .site-app-header__nav { display: none !important; } .site-app-header__icon-btn--desktop-only { display: none !important; } } /* Desktop (>=861px, "Desktop + Mobile" mode only): hamburger, search and dice step aside for the center nav; cart + Pilot take the far right, matching the brief's "Far Left: logo only / Center: nav / Far Right: cart + profile" desktop layout. Version 1 only — Versions 2, 3 and 4 use their own (shared) rules right below instead. */ @media (min-width: 861px) { body.tk-app-header-all:not(.header-v2):not(.header-v3):not(.header-v4) .site-app-header__left [data-tk-drawer-open] { display: none; } body.tk-app-header-all:not(.header-v2):not(.header-v3):not(.header-v4) .site-app-header__search { display: none; } body.tk-app-header-all:not(.header-v2):not(.header-v3):not(.header-v4) .site-app-header__icon-btn--mobile-only { display: none; } body.tk-app-header-all:not(.header-v2):not(.header-v3):not(.header-v4) .site-app-header__nav { display: flex; } body.tk-app-header-all:not(.header-v2):not(.header-v3):not(.header-v4) .site-app-header__icon-btn--desktop-only { display: flex; } } /* ---- Header Menu Variation 2 / 3 / 4 ---- Toggled by the `header-v2` / `header-v3` / `header-v4` body classes (Appearance -> Customize -> App Header -> "Header Menu Variation"). Version 1's own markup, CSS and JS above are completely untouched by this — V2/V3/V4 only ever hide pieces of that same markup and reveal others via these overrides, they never introduce new DOM (V4's small Videos/Games/Templates nav is the one exception — see trikdang_render_app_header() in functions.php and the .site-app-header__nav--v4 rules below). All three variants share every rule in THIS block (this desktop-layout block, i.e. the customizable .site-app-header__nav hidden / search bar shown / icon visibility) — the search icon's actual side (left vs. right, on both mobile and desktop) and V4's extra left-side nav are what differ, and those are handled separately in the "Header V2/V3/V4 desktop inline search bar" block above and the mobile block further up this file. Mobile: logo + hamburger on the left (the hamburger drawer is available here too now — see below) — primary nav isn't in the top bar at all in V2/V3/V4, it lives in the App Navigation bar instead (Appearance -> Customize -> App Navigation); the right group is unchanged from V1 mobile — Search, Randomizer, Pilot Account, exactly 3 icons (V2: search icon on the left, next to the logo; V3 and V4: search icon on the right, clustered with the other two — see the mobile block above). V4's Videos/Games/ Templates links are left off mobile entirely (the App Navigation bottom bar already covers them there). Desktop: logo + hamburger on the left, no customizable nav links; the right group becomes an inline search bar, Randomizer, Cart, and Pilot Account (V2: search icon at the start of the bar; V3 and V4: at the end — see the "Header V2/V3/V4 desktop inline search bar" block). V4 additionally shows Videos/Games/Templates as real links on the left, right after the logo — see .site-app-header__nav--v4 below. v2.1 — the hamburger drawer used to be force-hidden on both mobile and desktop in V2 (`display: none !important` below, now removed). Requested back on both breakpoints: the App Navigation bar covers primary nav, but the hamburger's own drawer also carries the social icons / promo block (Appearance -> Customize -> App Header -> Menu Drawer), which V2 had no other way to reach. The click handler in assets/js/app-header.js was never gated by header-v2 to begin with, so simply no longer hiding the button is enough — no JS changes needed. V3 and V4 (added after V2) inherit the same hamburger-visible behavior automatically, since none of the three variants is ever targeted by the `:not(.header-v2):not(.header-v3):not(.header-v4)` V1-only block above. */ @media (min-width: 861px) { body.tk-app-header-all.header-v2 .site-app-header__nav, /* :not(.site-app-header__nav--v4) on BOTH the v3 and v4 lines below — V3 (with its "show icons" checkbox on) and V4 both reuse the same .site-app-header__nav--v4 element (see functions.php), which must stay visible; this !important hide rule would otherwise beat the non-important `display: flex` set for it in the two blocks above regardless of selector specificity. (V2 never renders that markup at all — $v4_nav_items is only ever populated for 'v4' or 'v3'+show-icons — so it doesn't need the exclusion, but it's harmless either way.) */ body.tk-app-header-all.header-v3 .site-app-header__nav:not(.site-app-header__nav--v4), body.tk-app-header-all.header-v4 .site-app-header__nav:not(.site-app-header__nav--v4) { display: none !important; } body.tk-app-header-all.header-v2 .site-app-header__search, body.tk-app-header-all.header-v3 .site-app-header__search, body.tk-app-header-all.header-v4 .site-app-header__search { display: block; } body.tk-app-header-all.header-v2 .site-app-header__icon-btn--mobile-only, body.tk-app-header-all.header-v3 .site-app-header__icon-btn--mobile-only, body.tk-app-header-all.header-v4 .site-app-header__icon-btn--mobile-only { display: flex; } /* Randomizer also shown on V2/V3/V4 desktop */ body.tk-app-header-all.header-v2 .site-app-header__icon-btn--desktop-only, body.tk-app-header-all.header-v3 .site-app-header__icon-btn--desktop-only, body.tk-app-header-all.header-v4 .site-app-header__icon-btn--desktop-only { display: flex; } /* Cart + (already-visible) Pilot */ } /* ---- Header Menu Variation 4's centered nav ---- .site-app-header__nav--v4 shares the base `.site-app-header__nav` class (so its links pick up the exact same color/hover/font rules already defined for that class above), but needs its own "show" rule since the base class defaults to `display: none`. V4 now reuses V1's own centered shape instead of overriding it away — `flex: 1 1 auto; justify-content: center` fills whatever space is left between the logo (left group) and the collapsed search icon + Randomizer/Cart/Pilot (right group), and centers itself there. (It used to hug the left edge, right after the logo, with fixed margins — moved to true centering per request.) Hidden on mobile is already the base class's default (nothing to override there); the unscoped `@media (max-width: 860px) { .site-app-header__nav { display: none !important; } }` mobile rule further up this file catches it too, for good measure. */ @media (min-width: 861px) { body.tk-app-header-all.header-v4 .site-app-header__nav--v4 { display: flex; flex: 1 1 auto; justify-content: center; gap: 3rem; } } /* Icon + label per link, matching the App Navigation tab bar's own icon treatment (trikdang_app_nav_icon_svg() output, currentColor strokes so it always matches the link's own text color/hover state — see .site-app-header__nav a above for that). Not scoped to a min-width query since the links themselves are already hidden on mobile by the base `.site-app-header__nav` rules — nothing extra needed here to keep the icons out of the way there too. */ .site-app-header__nav--v4 a { display: inline-flex; align-items: center; gap: 0.4rem; } .site-app-header__nav--v4 a svg { width: 18px; height: 18px; flex-shrink: 0; } /* ---- Header Menu Variation 3's optional icons — the OLD Version 4 shape ---- This is the original V4 desktop layout, brought back and reattached to V3 instead: a small, non-growing Videos/Games/Templates block hugging the left edge right after the logo, with V3's own always-expanded search bar (icon at the END, untouched — see the "Header V2/V3 desktop inline search bar" block above) filling the rest of the row exactly as it always has. Reuses the exact same .site-app-header__nav--v4 markup/element as (new) V4 — see trikdang_render_app_header() in functions.php, which now renders that markup whenever EITHER 'v4' is selected OR 'v3' is selected with the "Show Videos/Games/Templates icons" checkbox on (Appearance -> Customize -> App Header) — but is scoped to a different body-class combination (.header-v3.header-v3-icons, added by trikdang_app_header_body_class() only when that checkbox is on) so it never collides with the new, centered V4 rule right above. This makes "V3 with icons on" and "old V4" pixel-identical, and "V3 with icons off" identical to plain V3 — exactly the "same shape, one has icons, one doesn't" pairing that was asked for. Hidden on mobile is already the base class's default (nothing to override there); the unscoped `@media (max-width: 860px) { .site-app-header__nav { display: none !important; } }` mobile rule further up this file catches it too, for good measure — same as it always did for V4. */ @media (min-width: 861px) { body.tk-app-header-all.header-v3.header-v3-icons .site-app-header__nav--v4 { display: flex; flex: 0 0 auto; justify-content: flex-start; gap: 3rem; margin-left: 2.5rem; margin-right: 2.5rem; } } /* ---- Header V4 desktop collapsible search ---- Unlike V2/V3 (always-expanded inline bar, see the block above), V4's desktop search now starts collapsed to just its icon, sitting in the header's right-hand cluster next to Randomizer/Cart/Pilot, and expands in place when clicked — reusing the exact same `.is-search-open` class + `[data-tk-search-toggle]` click handler that already drives the mobile collapse/expand (see assets/js/app-header.js — nothing there is breakpoint-gated, so no JS changes were needed for this). Desktop-only: mobile V4 keeps its existing collapse/expand behavior (search clustered on the right, see the `@media (max-width: 860px)` block near the top of this file) completely untouched. */ @media (min-width: 861px) { /* Collapsed (default): shrink the search wrapper down to just its icon button — no `flex: 1 1 auto` grabbing space it isn't using — so it sits snugly against the Randomizer/Cart/Pilot icons instead of stretching an invisible box across the middle of the bar. */ body.tk-app-header-all.header-v4 .site-app-header__search { flex: 0 0 auto; } body.tk-app-header-all.header-v4 .site-app-header__search-input, body.tk-app-header-all.header-v4 .site-app-header__search-submit { display: none; } /* Open (.is-search-open): hide the centered Videos/Games/Templates nav to free up the middle of the bar, then let the search wrapper grow into exactly that space. Since .site-app-header__nav--v4 sits between the logo and the search wrapper in the markup (see trikdang_render_app_header() in functions.php), the expanding search naturally lands right next to the logo rather than swallowing the whole bar — Randomizer/Cart/Pilot on the far right stay put and visible throughout, unlike the mobile version, which hides everything else while open. */ body.tk-app-header-all.header-v4 .site-app-header__bar.is-search-open .site-app-header__nav--v4 { display: none; } body.tk-app-header-all.header-v4 .site-app-header__bar.is-search-open .site-app-header__search { flex: 1 1 auto; } body.tk-app-header-all.header-v4 .site-app-header__bar.is-search-open .site-app-header__search-form { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 0 0.35rem 0 1rem; } :root[data-theme='light'] body.tk-app-header-all.header-v4 .site-app-header__bar.is-search-open .site-app-header__search-form { background: rgba(20, 21, 26, 0.04); border-color: rgba(20, 21, 26, 0.16); } body.tk-app-header-all.header-v4 .site-app-header__bar.is-search-open .site-app-header__search-form:focus-within { border-color: var(--wp--preset--color--signature-red, #E4002B); } /* The toggle button (magnifying glass <-> back-arrow, see the "Search toggle button holds BOTH..." comment near the top of this file) keeps its natural DOM order — first child of the form — so once the nav is hidden it lands right at the start of the expanded pill, immediately next to the logo, with the input filling the rest and the submit icon at the far end. */ body.tk-app-header-all.header-v4 .site-app-header__bar.is-search-open .site-app-header__search-input, body.tk-app-header-all.header-v4 .site-app-header__bar.is-search-open .site-app-header__search-submit { display: block; height: 42px; border: 0; background: none; padding: 0; } body.tk-app-header-all.header-v4 .site-app-header__bar.is-search-open .site-app-header__search-submit { display: flex; align-items: center; justify-content: center; } } /* ---- Pilot Account drawer (slides in from the right, mirrors the hamburger drawer's markup/behavior with a --pilot modifier) ---- */ .site-app-header__drawer--pilot .site-app-header__drawer-panel--pilot { position: absolute; right: 0; left: auto; width: min(88vw, 360px); animation: tk-pilot-drawer-in 0.2s ease; } @keyframes tk-pilot-drawer-in { from { transform: translateX(12px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } .site-app-header__pilot-title { font-family: var(--wp--preset--font-family--display, inherit); font-size: 1rem; letter-spacing: 0.06em; } .site-app-header__pilot-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 1.1rem; display: flex; flex-direction: column; gap: 1.25rem; } .site-app-header__pilot-notice { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 0.75rem 0.9rem; font-size: 0.82rem; line-height: 1.45; color: var(--wp--preset--color--paper-dim, #C9C4B6); } :root[data-theme='light'] .site-app-header__pilot-notice { background: rgba(20, 21, 26, 0.04); border-color: rgba(20, 21, 26, 0.12); color: rgba(20, 21, 26, 0.75); } .site-app-header__pilot-section { display: flex; flex-direction: column; gap: 0.5rem; } .site-app-header__pilot-label { font-family: var(--wp--preset--font-family--display, inherit); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--paper-dim, #C9C4B6); } :root[data-theme='light'] .site-app-header__pilot-label { color: rgba(20, 21, 26, 0.6); } .site-app-header__pilot-sublabel { display: block; text-transform: none; letter-spacing: normal; font-size: 0.78rem; margin-top: 0.2rem; color: var(--wp--preset--color--paper-dim, #C9C4B6); opacity: 0.85; } .site-app-header__pilot-callsign-row { display: flex; gap: 0.5rem; } .site-app-header__pilot-input { flex: 1 1 auto; min-width: 0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; color: var(--wp--preset--color--paper, #F3EFE4); padding: 0.55rem 0.7rem; font-family: var(--wp--preset--font-family--body, inherit); font-size: 0.9rem; } .site-app-header__pilot-input:focus { outline: none; border-color: var(--wp--preset--color--signature-red, #E4002B); } :root[data-theme='light'] .site-app-header__pilot-input { background: rgba(20, 21, 26, 0.04); border-color: rgba(20, 21, 26, 0.16); color: #16161a; } .site-app-header__pilot-btn { flex: 0 0 auto; background: var(--wp--preset--color--signature-red, #E4002B); color: #fff; border: 0; border-radius: 8px; padding: 0 0.9rem; font-family: var(--wp--preset--font-family--body, inherit); font-size: 0.85rem; font-weight: 600; cursor: pointer; } .site-app-header__pilot-btn:hover, .site-app-header__pilot-btn:focus-visible { filter: brightness(1.08); } .site-app-header__pilot-card-btn { display: flex; align-items: center; gap: 0.7rem; width: 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 0.75rem 0.9rem; color: var(--wp--preset--color--paper, #F3EFE4); font-family: var(--wp--preset--font-family--body, inherit); font-size: 0.9rem; cursor: pointer; text-align: left; } .site-app-header__pilot-card-btn svg { width: 20px; height: 20px; flex-shrink: 0; } .site-app-header__pilot-card-btn:hover, .site-app-header__pilot-card-btn:focus-visible { background: rgba(255, 255, 255, 0.1); } :root[data-theme='light'] .site-app-header__pilot-card-btn { background: rgba(20, 21, 26, 0.04); border-color: rgba(20, 21, 26, 0.12); color: #16161a; } .site-app-header__pilot-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-app-header__pilot-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } .site-app-header__pilot-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } /* ---------------------------------------------------------------------- FIX — Theme Mode switch was invisible (but still clickable) in Light Mode. The track's old fill, rgba(255,255,255,0.18), is a near-white wash that reads fine against this theme's dark background but all but disappears against :root[data-theme='light']'s white --surface-color, and the knob was a flat #fff with no edge of its own to fall back on. Re-pointing the track/knob/border onto the --border-color / --text-primary / --surface-color aliases (instead of a fixed white) keeps it legible in both modes automatically, the same way every other themed control on this bar already works. --------------------- ---------------------------------------------------------------------- */ .site-app-header__pilot-switch-track { position: absolute; inset: 0; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 999px; transition: background 0.15s ease, border-color 0.15s ease; } .site-app-header__pilot-switch-track::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-primary); border: 1px solid var(--border-color); box-sizing: border-box; transition: transform 0.15s ease, background 0.15s ease; } .site-app-header__pilot-switch input:checked + .site-app-header__pilot-switch-track { background: var(--accent-color); border-color: var(--accent-color); } .site-app-header__pilot-switch input:checked + .site-app-header__pilot-switch-track::before { transform: translateX(18px); background: #fff; border-color: transparent; } .site-app-header__pilot-switch input:focus-visible + .site-app-header__pilot-switch-track { outline: 2px solid var(--accent-color); outline-offset: 2px; } .site-app-header__pilot-section--data { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1rem; gap: 0.35rem; } :root[data-theme='light'] .site-app-header__pilot-section--data { border-top-color: rgba(20, 21, 26, 0.1); } .site-app-header__pilot-link-btn { background: none; border: 0; padding: 0.4rem 0; text-align: left; color: var(--wp--preset--color--paper-dim, #C9C4B6); font-family: var(--wp--preset--font-family--body, inherit); font-size: 0.85rem; cursor: pointer; } .site-app-header__pilot-link-btn:hover, .site-app-header__pilot-link-btn:focus-visible { color: var(--wp--preset--color--paper, #F3EFE4); text-decoration: underline; } .site-app-header__pilot-link-btn--danger { color: var(--wp--preset--color--signature-red, #E4002B); } .site-app-header__pilot-link-btn--danger:hover, .site-app-header__pilot-link-btn--danger:focus-visible { color: var(--wp--preset--color--signature-red, #E4002B); filter: brightness(1.2); } :root[data-theme='light'] .site-app-header__pilot-link-btn { color: rgba(20, 21, 26, 0.65); } :root[data-theme='light'] .site-app-header__pilot-link-btn:hover, :root[data-theme='light'] .site-app-header__pilot-link-btn:focus-visible { color: #16161a; }