/* ============================================================ OberBuilt Analysis Engine — App Shell Phase 6.1 — page-fullscreen.php top bar + drawer + dropdowns ------------------------------------------------------------ DESIGN NOTES ------------------------------------------------------------ 60/30/10 color hierarchy (UI-SPEC flagged this as undeclared): 60% --oae-color-bg ink page background 30% --oae-color-topbar-bg bar chrome + dropdowns + drawer (slightly elevated above bg, one notch below --oae-color-surface so content cards still pop) 10% --oae-color-primary accent — RESERVED for: - active nav underline - focus rings - share-page CTA - unread bell badge NOT used on the credits pill (D-04 locked it as neutral) nor on hover backgrounds (use surface tint). Why each new token was needed: --oae-color-topbar-bg Bar must read as a distinct surface layer; cards already own --oae-color-surface. --oae-shadow-topbar Sticky chrome needs elevation that does not compete with card shadows. --oae-color-avatar-bg/fg Avatar needed a primary-adjacent tint without spending the primary budget. --oae-color-badge-unread/text Centralised so the bell + any future badge stay in lockstep. --oae-color-drawer-backdrop Drawer scrim wasn't covered by any existing token. --oae-topbar-height Referenceable height for sticky offsets, admin-bar math, scroll-padding. --oae-wp-adminbar-height WP injects 32px; tokenised so the calc() in this file has no magic number. --oae-line-height-body Body line-height was not in tokens.css (UI-SPEC verification gap). --oae-motion-duration/ease Single source for drawer + dropdown timing so reduced-motion overrides hit everything at once. WP admin-bar approach (D, Claude's discretion): Instead of suppressing the admin bar (spike's approach), we COEXIST. - We do NOT zero out the margin-top WP injects on (32px via wp_head). - The .oae-shell offsets `top` and adds scroll-padding-top using var(--oae-wp-adminbar-height) when body.admin-bar is present (WP adds this class via body_class()). - #wpadminbar's existing dark theme is fine; we don't restyle it. This keeps the admin bar fully functional, keyboard-accessible, and at its native z-index (99999). Token-only: zero hardcoded hex / px / shadow values in this file (the only numeric literals are 0, 100%, calc multipliers, and the integer z-index ladder — all of which are structural, not visual). ============================================================ */ /* ─── Defensive theme reset ────────────────────────────────────── Divi/active theme can leak font-family, link color, and box-sizing into our chrome. Reset only inside the shell scope. */ .oae-shell, .oae-shell *, .oae-shell *::before, .oae-shell *::after { box-sizing: border-box; } .oae-shell { font-family: var(--oae-font-body); font-size: var(--oae-text-body); line-height: var(--oae-line-height-body); color: var(--oae-fg-1); background: var(--oae-color-bg); min-height: 100vh; /* Tell native form controls ( label using the system light-mode color — near-black on our near-black bg. DO NOT REVERT — restored after accidental removal, needed for native chrome. */ color-scheme: dark; /* When WP admin bar is showing, browser already adds margin-top:32px to . We don't fight it. */ } .oae-shell a { color: inherit; text-decoration: none; } .oae-shell button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; } /* ─── Shell-level select reset ──────────────────────────────────── Covers EVERY closed-state text ignores CSS when is auto/default. The browser draws its own system-themed control, which is near-black in light OS mode even when the page background is dark. Fix: reset appearance, supply an explicit color/background, and add a custom CSS chevron. color-scheme: dark on the element (not just inherited from .oae-shell) ensures the option-list popup also renders in dark mode across Chrome, Edge, and Safari on macOS and Windows. These rules are intentionally low-specificity (0,1,0) so that per-surface rules (oae-history.css, upload-wizard.php inline styles, vehicle-wizard.php inline styles) can override them without !important. ─────────────────────────────────────────────────────────────────── */ .oae-shell select { /* Reset native chrome — reveals explicit color/background below. */ appearance: none; -webkit-appearance: none; /* Explicit color + background so the closed-state text is always readable regardless of OS color-scheme setting. */ color: var(--oae-fg-1); background-color: var(--oae-color-surface, #18222e); /* Custom chevron: two CSS triangles composited via background-image. Matches the chevron pattern already used in vehicle-wizard.php and upload-wizard.php. Uses --oae-fg-3 (muted) to keep it from competing with the label text. */ background-image: linear-gradient(45deg, transparent 50%, var(--oae-fg-3, #5a7a99) 50%), linear-gradient(135deg, var(--oae-fg-3, #5a7a99) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--oae-spacing-2xl, 2.5rem); /* color-scheme on the element (not just inherited) ensures the option-list popup renders in dark mode on Chrome/Edge/Safari. */ color-scheme: dark; /* Shared sizing / font so it fits the 44px touch target grid. */ font: inherit; border: 1px solid var(--oae-border, #2a3a4f); border-radius: var(--oae-radius, 6px); min-height: var(--oae-touch-target, 44px); cursor: pointer; } /* Keep focused selects visually consistent with the rest of the design system. */ .oae-shell select:focus, .oae-shell select:focus-visible { outline: 2px solid var(--oae-color-primary, #4f9fff); outline-offset: 2px; border-color: var(--oae-color-primary, #4f9fff); background-color: var(--oae-color-surface, #18222e); color: var(--oae-fg-1); } .oae-shell select:disabled, .oae-shell select[aria-disabled=true] { cursor: not-allowed; background-color: var(--oae-color-bg, #0d1620); color: var(--oae-fg-3, #5a7a99); } /* Skip link — visible only when focused. */ .oae-shell__skip-link { position: absolute; top: var(--oae-spacing-sm); left: var(--oae-spacing-sm); padding: var(--oae-spacing-sm) var(--oae-spacing-md); background: var(--oae-color-primary); color: var(--oae-fg-on-primary); border-radius: var(--oae-radius); font-weight: 600; z-index: 200; transform: translateY(calc(-100% - var(--oae-spacing-md))); transition: transform var(--oae-motion-duration) var(--oae-motion-ease); } .oae-shell__skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--oae-color-bg); outline-offset: 2px; } /* ─── Top bar ─────────────────────────────────────────────────── */ .oae-topbar { position: sticky; top: 0; z-index: 50; width: 100%; min-height: var(--oae-topbar-height); background: var(--oae-color-topbar-bg); border-bottom: 1px solid var(--oae-border); box-shadow: var(--oae-shadow-topbar); /* Coexist with WP admin bar: when body.admin-bar is present, sit immediately below it. Browser-injected margin-top:32px on already pushes the shell down, so `top: 0` here is correct. */ } /* When WP admin bar is present, top bar sits immediately below it while scrolling. Mirrors the .oae-drawer rule below. Without this, sticky:top:0 places the bar at viewport-top, directly behind #wpadminbar (z-index 99999). */ body.admin-bar .oae-topbar { top: var(--oae-wp-adminbar-height); } /* WP switches to a 46px admin bar at ≤782px. Match that breakpoint exactly. */ @media (max-width: 782px) { body.admin-bar .oae-topbar { top: var(--oae-wp-adminbar-height-mobile); } } .oae-topbar__inner { display: flex; align-items: center; gap: var(--oae-spacing-md); max-width: 1280px; height: var(--oae-topbar-height); margin: 0 auto; padding: 0 var(--oae-spacing-lg); } /* On very narrow viewports the inner padding shrinks so the utility strip still fits. */ @media (max-width: 480px) { .oae-topbar__inner { padding: 0 var(--oae-spacing-sm); gap: var(--oae-spacing-sm); } } /* ─── Logo / wordmark ─────────────────────────────────────────── */ .oae-topbar__logo { display: inline-flex; align-items: center; gap: var(--oae-spacing-sm); font-family: var(--oae-font-heading); font-weight: 700; font-size: var(--oae-text-heading); line-height: var(--oae-line-height-tight); letter-spacing: 0.02em; color: var(--oae-fg-1); height: var(--oae-touch-target); padding: 0 var(--oae-spacing-xs); border-radius: var(--oae-radius); flex-shrink: 0; } .oae-topbar__logo:focus-visible { outline: 2px solid var(--oae-color-primary); outline-offset: 2px; } .oae-topbar__logo-mark { width: var(--oae-spacing-lg); height: var(--oae-spacing-lg); border-radius: var(--oae-radius); background: var(--oae-color-primary); display: inline-flex; align-items: center; justify-content: center; color: var(--oae-fg-on-primary); font-weight: 700; font-size: var(--oae-text-label); flex-shrink: 0; } /* Wordmark image variant — used when a brand PNG/SVG is supplied instead of the inline logo + text. Height is bounded by the touch target; width scales by aspect ratio. */ .oae-topbar__logo-img { display: block; height: 24px; width: auto; flex-shrink: 0; } @media (max-width: 480px) { .oae-topbar__logo-img { height: 20px; } } /* ─── Nav links ───────────────────────────────────────────────── */ .oae-topbar__nav { display: flex; align-items: stretch; gap: 0; height: 100%; margin-left: var(--oae-spacing-md); list-style: none; padding: 0; } .oae-topbar__nav-link { position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0 var(--oae-spacing-md); font-family: var(--oae-font-body); font-size: var(--oae-text-body); font-weight: 500; line-height: var(--oae-line-height-tight); color: var(--oae-fg-2); white-space: nowrap; transition: color var(--oae-motion-duration) var(--oae-motion-ease); } .oae-topbar__nav-link:hover { color: var(--oae-fg-1); } .oae-topbar__nav-link:focus-visible { outline: 2px solid var(--oae-color-primary); outline-offset: -2px; border-radius: var(--oae-radius); } .oae-topbar__nav-link[aria-current="page"] { color: var(--oae-fg-1); font-weight: 600; } /* Active underline — bottom border, NOT a background fill (D-03). */ .oae-topbar__nav-link[aria-current="page"]::after { content: ""; position: absolute; left: var(--oae-spacing-md); right: var(--oae-spacing-md); bottom: 0; height: 2px; background: var(--oae-color-primary); border-radius: 2px 2px 0 0; } /* Nav hidden / hamburger shown is driven by adaptive overflow detection in app-shell.js (ResizeObserver on .oae-topbar__inner). See the `.oae-topbar--collapsed` rules below and the no-JS fallback at the bottom of this file. */ /* ─── Utility strip ───────────────────────────────────────────── */ .oae-topbar__spacer { flex: 1 1 auto; } .oae-topbar__utility { display: flex; align-items: center; gap: var(--oae-spacing-sm); flex-shrink: 0; } /* ─── Credits pill ────────────────────────────────────────────── */ .oae-credits-pill { display: inline-flex; align-items: center; gap: var(--oae-spacing-xs); height: var(--oae-touch-target); padding: 0 var(--oae-spacing-md); border-radius: 9999px; background: var(--oae-color-neutral-bg); border: 1px solid var(--oae-border); color: var(--oae-fg-1); font-family: var(--oae-font-mono); font-size: var(--oae-text-label); font-weight: 600; line-height: var(--oae-line-height-tight); font-variant-numeric: tabular-nums; white-space: nowrap; transition: border-color var(--oae-motion-duration) var(--oae-motion-ease), background-color var(--oae-motion-duration) var(--oae-motion-ease); } .oae-credits-pill:hover { border-color: var(--oae-border-strong); background: var(--oae-color-surface); } .oae-credits-pill:focus-visible { outline: 2px solid var(--oae-color-primary); outline-offset: 2px; } .oae-credits-pill__count { color: var(--oae-fg-1); font-weight: 700; } .oae-credits-pill__label { color: var(--oae-fg-3); font-weight: 500; } /* Zero credits — muted, NOT red. (UI-SPEC §1.4) */ .oae-credits-pill--zero .oae-credits-pill__count { color: var(--oae-fg-3); } /* Live region — visually unchanged, just announce on update. */ .oae-credits-pill[aria-live] { /* no visual; aria-live is set on the element */ } @media (max-width: 359.98px) { .oae-credits-pill { padding: 0 var(--oae-spacing-sm); } .oae-credits-pill__label { display: none; /* show only the number on truly tiny screens */ } } /* ─── Bell wrapper (positioning only — internals live in oae-bell.css) ─ */ .oae-topbar__bell { display: inline-flex; align-items: center; position: relative; } /* ─── Account menu trigger ───────────────────────────────────── */ .oae-account { position: relative; display: inline-flex; } .oae-topbar .oae-account__trigger { display: inline-flex; align-items: center; gap: var(--oae-spacing-sm); height: var(--oae-touch-target); padding: 0 var(--oae-spacing-sm) 0 var(--oae-spacing-xs); border-radius: var(--oae-radius); color: var(--oae-fg-1); font-family: var(--oae-font-body); font-size: var(--oae-text-body); font-weight: 500; line-height: var(--oae-line-height-tight); transition: background-color var(--oae-motion-duration) var(--oae-motion-ease); } .oae-topbar .oae-account__trigger:hover { background: var(--oae-color-surface); } .oae-topbar .oae-account__trigger:focus-visible { outline: 2px solid var(--oae-color-primary); outline-offset: 2px; } .oae-topbar .oae-account__trigger[aria-expanded="true"] { background: var(--oae-color-surface); } .oae-account__avatar { width: var(--oae-spacing-xl); height: var(--oae-spacing-xl); border-radius: 9999px; background: var(--oae-color-avatar-bg); color: var(--oae-color-avatar-fg); display: inline-flex; align-items: center; justify-content: center; font-family: var(--oae-font-heading); font-weight: 700; font-size: var(--oae-text-label); letter-spacing: 0.04em; flex-shrink: 0; } .oae-account__name { white-space: nowrap; } .oae-account__chevron { width: var(--oae-spacing-md); height: var(--oae-spacing-md); color: var(--oae-fg-3); flex-shrink: 0; transition: transform var(--oae-motion-duration) var(--oae-motion-ease); } .oae-account__trigger[aria-expanded="true"] .oae-account__chevron { transform: rotate(180deg); } /* Adaptive collapse stages — JS adds these classes to .oae-topbar based on real-time overflow measurement (ResizeObserver). No hardcoded breakpoints. Stage 1 (.oae-topbar--initials): hide first name + chevron, avatar only. Stage 2 (.oae-topbar--collapsed): also hide nav, show hamburger drawer. The aria-label on .oae-account__trigger carries the accessible name when the visible name is hidden. */ .oae-topbar--initials .oae-account__name, .oae-topbar--initials .oae-account__chevron { display: none; } .oae-topbar--initials .oae-account__trigger { padding: 0 var(--oae-spacing-xs); } .oae-topbar--collapsed .oae-topbar__nav { display: none; } /* ─── Account dropdown ───────────────────────────────────────── */ .oae-account__menu { position: absolute; top: calc(100% + var(--oae-spacing-xs)); right: 0; min-width: 220px; background: var(--oae-color-topbar-bg); border: 1px solid var(--oae-border); border-radius: var(--oae-radius); box-shadow: var(--oae-shadow-topbar); padding: var(--oae-spacing-xs); z-index: 70; list-style: none; margin: 0; /* Default hidden — JS sets [hidden] off when opened. */ opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--oae-motion-duration) var(--oae-motion-ease), transform var(--oae-motion-duration) var(--oae-motion-ease); } .oae-account__menu[data-open="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; } .oae-account__menu-item { display: flex; align-items: center; gap: var(--oae-spacing-sm); min-height: var(--oae-touch-target); padding: 0 var(--oae-spacing-md); border-radius: var(--oae-radius); color: var(--oae-fg-1); font-size: var(--oae-text-body); line-height: var(--oae-line-height-tight); white-space: nowrap; } .oae-account__menu-item:hover, .oae-account__menu-item:focus-visible { background: var(--oae-color-surface); outline: none; } .oae-account__menu-item:focus-visible { outline: 2px solid var(--oae-color-primary); outline-offset: -2px; } .oae-account__menu-icon { width: var(--oae-spacing-md); height: var(--oae-spacing-md); color: var(--oae-fg-3); flex-shrink: 0; } .oae-account__menu-divider { height: 1px; background: var(--oae-border); margin: var(--oae-spacing-xs) 0; border: 0; list-style: none; } .oae-account__menu-item--logout { color: var(--oae-fg-2); /* muted, not destructive — session exit */ } /* ─── Hamburger button (mobile <768px) ───────────────────────── */ .oae-topbar .oae-hamburger { display: none; width: var(--oae-touch-target); height: var(--oae-touch-target); align-items: center; justify-content: center; border-radius: var(--oae-radius); color: var(--oae-fg-1); flex-shrink: 0; } .oae-topbar .oae-hamburger:hover { background: var(--oae-color-surface); } .oae-topbar .oae-hamburger:focus-visible { outline: 2px solid var(--oae-color-primary); outline-offset: 2px; } .oae-hamburger__icon { width: 22px; height: 22px; } /* Hamburger visibility is driven by .oae-topbar--collapsed (toggled by JS based on actual overflow). No hardcoded breakpoint here. */ .oae-topbar--collapsed .oae-hamburger { display: inline-flex; } /* No-JS / pre-measurement fallback — guarantees a usable layout before app-shell.js runs (or when JS is disabled). Mirrors the original tablet breakpoint so mobile devices without script execution still get the drawer. JS adds .oae-topbar--measured on first overflow pass which disengages this fallback and hands control to the adaptive classes. */ @media (max-width: 767.98px) { .oae-topbar:not(.oae-topbar--measured) .oae-account__name, .oae-topbar:not(.oae-topbar--measured) .oae-account__chevron { display: none; } .oae-topbar:not(.oae-topbar--measured) .oae-account__trigger { padding: 0 var(--oae-spacing-xs); } .oae-topbar:not(.oae-topbar--measured) .oae-topbar__nav { display: none; } .oae-topbar:not(.oae-topbar--measured) .oae-hamburger { display: inline-flex; } } /* ─── Drawer (mobile nav, <768px) ────────────────────────────── */ .oae-drawer-backdrop { position: fixed; inset: 0; background: var(--oae-color-drawer-backdrop); z-index: 80; opacity: 0; pointer-events: none; transition: opacity var(--oae-motion-duration) var(--oae-motion-ease); } .oae-drawer-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; } .oae-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(80vw, 320px); background: var(--oae-color-topbar-bg); border-right: 1px solid var(--oae-border); box-shadow: var(--oae-shadow-topbar); z-index: 81; transform: translateX(-100%); transition: transform var(--oae-motion-duration) var(--oae-motion-ease); display: flex; flex-direction: column; } .oae-drawer[data-open="true"] { transform: translateX(0); } /* When WP admin bar is present, drawer sits below it. */ body.admin-bar .oae-drawer { top: var(--oae-wp-adminbar-height); } .oae-drawer__header { display: flex; align-items: center; justify-content: space-between; height: var(--oae-topbar-height); padding: 0 var(--oae-spacing-md); border-bottom: 1px solid var(--oae-border); } .oae-drawer .oae-drawer__close { width: var(--oae-touch-target); height: var(--oae-touch-target); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--oae-radius); color: var(--oae-fg-1); } .oae-drawer .oae-drawer__close:hover { background: var(--oae-color-surface); } .oae-drawer .oae-drawer__close:focus-visible { outline: 2px solid var(--oae-color-primary); outline-offset: 2px; } .oae-drawer__nav { list-style: none; padding: var(--oae-spacing-sm); margin: 0; display: flex; flex-direction: column; gap: 2px; } .oae-drawer__link { position: relative; display: flex; align-items: center; min-height: var(--oae-touch-target); padding: 0 var(--oae-spacing-md); border-radius: var(--oae-radius); color: var(--oae-fg-2); font-family: var(--oae-font-body); font-size: var(--oae-text-body); font-weight: 500; line-height: var(--oae-line-height-tight); } .oae-drawer__link:hover, .oae-drawer__link:focus-visible { background: var(--oae-color-surface); color: var(--oae-fg-1); } .oae-drawer__link:focus-visible { outline: 2px solid var(--oae-color-primary); outline-offset: -2px; } .oae-drawer__link[aria-current="page"] { color: var(--oae-fg-1); font-weight: 600; background: var(--oae-color-surface); } /* Active indicator inside drawer: left border in primary (visual cousin of the desktop underline). */ .oae-drawer__link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: var(--oae-spacing-xs); bottom: var(--oae-spacing-xs); width: 3px; background: var(--oae-color-primary); border-radius: 0 2px 2px 0; } /* ─── Share-page (stripped) top bar ──────────────────────────── */ .oae-topbar--public .oae-topbar__inner { justify-content: space-between; } .oae-topbar .oae-share-cta { display: inline-flex; align-items: center; gap: var(--oae-spacing-sm); height: var(--oae-touch-target); padding: 0 var(--oae-spacing-lg); border-radius: var(--oae-radius); background: var(--oae-color-primary); color: var(--oae-fg-on-primary); font-family: var(--oae-font-body); font-size: var(--oae-text-body); font-weight: 600; line-height: var(--oae-line-height-tight); white-space: nowrap; transition: filter var(--oae-motion-duration) var(--oae-motion-ease); } .oae-topbar .oae-share-cta:hover { filter: brightness(1.08); } .oae-topbar .oae-share-cta:focus-visible { outline: 2px solid var(--oae-color-primary); outline-offset: 2px; } .oae-share-cta__icon { width: var(--oae-spacing-md); height: var(--oae-spacing-md); } @media (max-width: 480px) { .oae-topbar .oae-share-cta { padding: 0 var(--oae-spacing-md); font-size: var(--oae-text-label); } /* On 360px the CTA must remain tappable; we shorten the label in PHP (uses the data-short copy) rather than CSS-truncating. */ } /* ─── Main content area ─────────────────────────────────────── */ .oae-shell__main { max-width: 1280px; margin: 0 auto; padding: var(--oae-spacing-lg); scroll-padding-top: calc(var(--oae-topbar-height) + var(--oae-spacing-md)); } /* ─── Reduced motion ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .oae-drawer, .oae-drawer-backdrop, .oae-account__menu, .oae-account__chevron, .oae-topbar__nav-link, .oae-account__trigger, .oae-credits-pill, .oae-share-cta, .oae-shell__skip-link { transition: none !important; } } /* ─── Print: hide shell chrome ──────────────────────────────── */ @media print { .oae-topbar, .oae-drawer, .oae-drawer-backdrop, .oae-shell__skip-link { display: none !important; } .oae-shell__main { padding: 0; } }