/** * modules/harmony/assets/ogace-harmony.css * ============================================================================ * OGACE Harmony OS — Responsive Spine & Layer-Conflict Governance * * 📦 Layer: Core / Cross-cutting * Prompt: harmony@ogace:G4/layout [LIVE] $ * * ONE stylesheet that makes every OGACE layer (G0–G4: geo, community, AI, * commerce, autonomous) fit together on every device WITHOUT editing any of * the 45 existing module stylesheets. It is enqueued LAST (priority 1000, * above the previous maximum of 99) so it is the final, deciding voice in the * cascade — but it only ever PROTECTS the layout. It never restyles a design. * * Why this exists (measured in the v5.2.1 codebase): * • 40+ distinct responsive breakpoints across modules → layers flip to * mobile at different widths and stop lining up. * • 45 stylesheets, 0 uses of @layer → cascade order is undefined, one * file (vibe-wc.css) alone carries 62 !important fighting WooCommerce. * • Fixed overlays at z-index 9985 / 9990 / 9998 / 99999 with no scale. * • Flex/grid children default to min-width:auto and overflow on mobile. * • 16 separate :root blocks with clashing token names. * * Cascade strategy (the important part): * 1. @layer ogace-harmony → tokens, breakpoint vars, gentle :where() * defaults. Layered styles rank BELOW every existing unlayered module * rule, so this can NEVER override a deliberate design choice. * 2. Unlayered "crash guards" at the bottom → the handful of rules that * MUST win (kill horizontal scroll, cap media width, let flex/grid * children shrink). These are the only place !important is used, and * only for overflow safety — never for colour, spacing or typography. * * Everything is scoped to `html.ogace-harmony` / the `.ogace-harmony` body * class (added by harmony-boot.php) so a partner theme that opts out via the * OGACE_NET_HARMONY kill switch is byte-for-byte unaffected. * * @package OGACE_Network * @since 5.3.0 */ /* ============================================================================ * 1. TOKENS + GENTLE DEFAULTS (layered — lowest priority, safe fallbacks) * ========================================================================== */ @layer ogace-harmony { :root { /* ---- Canonical breakpoints ------------------------------------------ * Use these going forward so every module flips at the SAME width. They * also feed container queries and any JS that reads getComputedStyle. */ --ogace-bp-xs: 400px; /* small phones */ --ogace-bp-sm: 640px; /* phone → large phone */ --ogace-bp-md: 1024px; /* tablet → desktop */ --ogace-bp-lg: 1280px; /* desktop → wide */ /* ---- Fluid container spine ------------------------------------------ * A single fluid gutter + max width every layer can snap to. clamp() * means it scales smoothly instead of jumping at each of the old 40 * breakpoints. */ --ogace-gutter: clamp(16px, 4vw, 40px); --ogace-container: 1200px; --ogace-container-wide: 1440px; /* ---- Canonical z-index tiers ---------------------------------------- * Maps the z-index values already in the codebase onto a named scale so * new modules stack predictably instead of inventing another 99999. * assistant 99999 → the ONE unified "Ask OGACE" popup (stays top) * overlay 9995 → scrims / modals / shop overlay * dock 9990 → mobile dock + webapp bottom bar * sticky 100 → sticky sub-navs / filter bars * base 1 → in-flow content */ --ogace-z-base: 1; --ogace-z-sticky: 100; --ogace-z-dock: 9990; --ogace-z-overlay: 9995; --ogace-z-assistant: 99999; /* ---- Token bridge --------------------------------------------------- * Unify the 16 fragmented per-module :root palettes. Each canonical * token READS a module's existing variable first (unlayered → wins) and * only falls back to the brand default when no module has defined it. So * defining these here changes nothing where a module already sets a * colour, but gives orphaned surfaces a sane value instead of inheriting * a random one. */ /* Each canonical token reads, in order: the plugin module's own var → * the OGA Tourism Core theme's --oga-* token → a brand default. So when * the theme and plugin run together, an orphaned plugin surface inherits * the THEME's palette instead of a random per-module colour, and the two * layers read as one design. Theme token names verified in the theme's * assets/css/tokens.css (--oga-ink, --oga-bg, --oga-ink-muted, --oga-red, * --oga-saffron, --oga-border). */ --ogace-ink: var(--ink, var(--oga-ink, #16130d)); --ogace-paper: var(--oga-paper, var(--oga-bg, #fbf8f2)); --ogace-muted: var(--muted, var(--oga-ink-muted, #6b6459)); --ogace-line: var(--line, var(--oga-border, rgba(0,0,0,.12))); --ogace-gold: var(--oga-gold, var(--oga-saffron, var(--gold, #eab308))); --ogace-red: var(--oga-red, #b01c2e); --ogace-accent: var(--ognc-signal, var(--oga-saffron, var(--gold, #eab308))); } /* Respect an OS-level reduced-motion preference across every layer that * forgot to. Gentle (:where = 0 specificity) so any real animation a * module explicitly wants still wins. */ @media (prefers-reduced-motion: reduce) { :where(.ogace-harmony *) { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Fluid opt-in container. Any layer that wants to snap to the shared spine * just adds class="ogace-fit". Zero-specificity so it's trivial to override. */ :where(.ogace-harmony .ogace-fit) { width: 100%; max-width: var(--ogace-container); margin-inline: auto; padding-inline: var(--ogace-gutter); } :where(.ogace-harmony .ogace-fit--wide) { max-width: var(--ogace-container-wide); } /* Opt-in responsive grid that collapses on the SHARED breakpoint instead * of each module's own. class="ogace-fit-grid" → auto columns that never * cause overflow (minmax with 0 floor). */ :where(.ogace-harmony .ogace-fit-grid) { display: grid; gap: var(--ogace-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } } /* end @layer ogace-harmony */ /* ============================================================================ * 2. CRASH GUARDS (UNLAYERED — must win over every module stylesheet) * The only place !important appears, and only ever for overflow safety. * ========================================================================== */ /* 2a. Kill horizontal page scroll — the #1 "layers don't fit" symptom on * phones. Applied to the root only (NOT body) so position:sticky headers * keep working. `clip` (not hidden) doesn't create a scroll container. */ html.ogace-harmony { overflow-x: clip; max-width: 100%; } /* 2b. Predictable box model everywhere inside OGACE surfaces, so a padded * layer can never grow wider than its column. */ .ogace-harmony *, .ogace-harmony *::before, .ogace-harmony *::after { box-sizing: border-box; } /* 2c. No media, embed or table can ever exceed the viewport width. */ .ogace-harmony img, .ogace-harmony svg, .ogace-harmony video, .ogace-harmony iframe, .ogace-harmony embed, .ogace-harmony object, .ogace-harmony canvas { max-width: 100% !important; height: auto; } .ogace-harmony img, .ogace-harmony video { display: block; } .ogace-harmony table { max-width: 100%; } /* 2d. Flex/grid children default to min-width:auto and refuse to shrink below * their content, blowing out the row on mobile. Let common OGACE layout * children shrink. :where() keeps specificity at 0 so a genuine min-width * a module sets still wins. This one rule fixes most overflow crashes. */ :where(.ogace-harmony [class*="grid"]) > *, :where(.ogace-harmony [class*="cols"]) > *, :where(.ogace-harmony [class*="row"]) > *, :where(.ogace-harmony [class*="flex"]) > *, :where(.ogace-harmony [class*="stack"]) > * { min-width: 0; } /* 2e. Long unbroken strings — wallet addresses (G3), URLs, hashtags, hashes — * wrap instead of forcing the whole column wide. Scoped to text-bearing * elements, not layout wrappers. */ .ogace-harmony p, .ogace-harmony li, .ogace-harmony dd, .ogace-harmony h1, .ogace-harmony h2, .ogace-harmony h3, .ogace-harmony h4, .ogace-harmony h5, .ogace-harmony h6, .ogace-harmony figcaption, .ogace-harmony [class*="ogace-"] a { overflow-wrap: anywhere; } /* 2f. Terminal / console / code surfaces (the ogshell aesthetic) SHOULD keep * long lines on one line — so let them scroll INSIDE their own box rather * than pushing the page sideways. */ .ogace-harmony pre, .ogace-harmony code, .ogace-harmony .ogace-terminal, .ogace-harmony [class*="console"], .ogace-harmony [class*="ogshell"], .ogace-harmony [class*="terminal"] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 2g. Fixed overlays cannot spill off-screen on narrow viewports. Caps the * unified assistant popup and any launcher/dock bubble to the viewport * with a safe gutter, and honours iOS safe-area insets. Position/offset * that each module already sets is untouched — only the WIDTH is capped. */ .ogace-harmony [style*="position:fixed"], .ogace-harmony [style*="position: fixed"] { max-width: 100vw; } .ogace-harmony .ogace-assist, .ogace-harmony .ogace-assist__panel, .ogace-harmony [class*="assist"][class*="panel"] { max-width: min(calc(100vw - 24px), 420px); } /* iOS safe-area: keep bottom docks / bars above the home indicator. */ @supports (padding: max(0px)) { .ogace-harmony [class*="dock"], .ogace-harmony [class*="bottom-bar"], .ogace-harmony [class*="mobile-bar"] { padding-bottom: max(env(safe-area-inset-bottom), 6px); } } /* ============================================================================ * 3. DEVICE FIT (unlayered, low specificity — final responsive safety net) * ========================================================================== */ /* Phones (≤ --ogace-bp-sm): guarantee any residual 2+ column OGACE grid that * a module forgot to collapse drops to a single column. :where() = 0 * specificity, so a module's own mobile rule always wins if it has one. */ @media (max-width: 640px) { :where(.ogace-harmony .ogace-fit-grid) { grid-template-columns: 1fr; } :where(.ogace-harmony [class*="ogace-"][class*="grid"]) { gap: var(--ogace-gutter); } /* No fixed panel should be wider than the phone screen. */ .ogace-harmony .ogace-assist, .ogace-harmony [class*="assist"][class*="panel"] { max-width: calc(100vw - 20px); right: 10px; } } /* Tablets: keep the shared container from hugging the edges. */ @media (min-width: 641px) and (max-width: 1024px) { :where(.ogace-harmony .ogace-fit) { max-width: 92vw; } } /* Print / PDF export of any OGACE surface: drop fixed overlays and docks. */ @media print { .ogace-harmony .ogace-assist, .ogace-harmony [class*="dock"], .ogace-harmony [class*="bottom-bar"], .ogace-harmony [class*="overlay"] { display: none !important; } } /* End ogace-harmony.css */