/** * modules/ogaice/assets/css/ogaice-theme-compat.css * ============================================================================ * OGAICE Network ↔ Online Guide Association THEME COMPATIBILITY LAYER * * The plugin ships some surfaces (the "webapp"/PWA shell, the "vibe" shell and * the social-share widget) in a dark cyberpunk palette. On the light Online * Guide Association theme that dark navy/near-black background clashes ("crash") * with the page. This layer remaps those component CSS variables to the light * OGAICE brand palette so every plugin surface sits cleanly on the light theme. * * It only re-points existing CSS custom properties — no markup, no text, no * feature is changed. Uses a :root:root selector (specificity 0,0,2) so it wins * over the component :root blocks (0,0,1) regardless of load order — no * !important needed. * * Brand: navy #001D6C · deep red #b01c2e · gold #EAB308. * @since 2026-07-29 */ :root:root { /* ── OGAICE brand anchors ───────────────────────────────────────────── */ --oga-navy: #001D6C; --oga-red: #b01c2e; --oga-gold: #EAB308; --oga-paper: #ffffff; --oga-ink: #14181f; /* Single "unique white truth" — one canonical pure white plus one * canonical whisper-of-grey for the rare case a surface genuinely * needs to read as a layer above the page (a hover state, a nested * row). Every near-white shade in this file used to be its own * slightly-different value (#f6f8fc, #eef2fa, #e5ecf7, #f1f5f9…) — * consolidated down to these two so "white" means one exact thing * everywhere in the plugin, and any remaining depth comes from a * shared hairline border instead of five competing off-whites. */ --oga-paper-subtle: #fafbfc; --oga-border: #e5e9f0; /* ── Unified graph-layer accents (G0–G4) — used for icon/tag colours ─ */ --ogaice-g0: #0f9d8c; /* Geo */ --ogaice-g1: #c08a00; /* Human */ --ogaice-g2: #3552c4; /* AI */ --ogaice-g3: #b01c2e; /* Economic */ --ogaice-g4: #7a3ff2; /* Autonomous */ /* ── Webapp / PWA shell (ogw): dark navy → the canonical white system ─ * bg0/bg1/bg2 (page + primary + card surfaces) are all the one true * white; bg3/bg4 (hover / nested / active states — the only cases that * need to read as "one layer up") share the one canonical subtle tone * instead of two different blue-tinted greys. */ --ogw-bg0: #ffffff; --ogw-bg1: #ffffff; --ogw-bg2: #ffffff; --ogw-bg3: var(--oga-paper-subtle); --ogw-bg4: var(--oga-paper-subtle); --ogw-fg0: #001D6C; /* was #ffffff (white on dark) */ --ogw-fg1: #1a2b52; --ogw-fg2: #5a6a86; --ogw-fg3: #8493ad; --ogw-gold: #EAB308; --ogw-link: #b01c2e; --ogw-link-h: #001D6C; /* membership tiers kept, lightly brand-aligned */ --ogw-t-free: #0f9d8c; --ogw-t-pro: #c08a00; --ogw-t-agency: #3552c4; --ogw-t-enterprise: #7a3ff2; /* ── Vibe shell (ogaice-vibe): lighten the navy backgrounds, keep ink as text ─ * NOTE: --ogaice-vibe-navy-deep and --ogaice-vibe-paper are also used as *text/icon* * colours in a few spots (dock centre icon, prompt "@" separator, card * labels) — not just backgrounds. An earlier pass set both to near-white, * which made that text invisible against the light theme. Fixed below: * --ogaice-vibe-navy-deep stays dark (it's the icon colour on a bright gradient * chip) and --ogaice-vibe-paper becomes dark ink (it's used as body/label text * colour throughout vibe.css, never as a background). */ --ogaice-vibe-navy: #ffffff; --ogaice-vibe-navy-2: #ffffff; --ogaice-vibe-navy-deep: #001D6C; --ogaice-vibe-paper: #14181f; --ogaice-vibe-ink: #14181f; --ogaice-vibe-gold: #EAB308; --ogaice-vibe-cyan: #0f9d8c; /* was neon #00e5ff */ --ogaice-vibe-mint: #0f9d8c; --ogaice-vibe-magenta: #b01c2e; /* was neon magenta */ --ogaice-vibe-warn: #d97706; /* ── Social-share widget → force its light-mode values ────────────── */ --ogaice-share-bg: #ffffff; --ogaice-share-bg-2: var(--oga-paper-subtle); --ogaice-share-fg: #0f172a; --ogaice-share-muted: #64748b; --ogaice-share-accent: #b01c2e; } /* ── OGAICE Theme-Safe Frame — the reusable seam pattern ───────────────────── * Any OGAICE surface that intentionally keeps a different background than * the active theme (a dark shell, a data-dense panel, etc.) should carry * this class instead of inventing its own transition. It frames the panel * with a rounded top edge, a brand gold→red seam accent, and a soft shadow, * so the change in background always reads as one deliberate design choice * — never a plugin/theme colour clash. First used on the footer Sitemap * layer (see ogaice-footer-layers.php); apply it to any new module surface * that needs the same treatment so every feature stays consistent with * whatever partner theme is active. */ .ogaice-frame{ border-radius: 20px 20px 0 0; margin-top: 8px; box-shadow: 0 -6px 24px rgba(0,29,108,.10); position: relative; } .ogaice-frame::before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 3px; border-radius: 0 0 3px 3px; /* Reads the partner-accent variables when ogaice-frame-layout.css / a partner's ogaice_frame_partner_accent_v1 filter is active; falls straight back to the OGAICE brand gold→red pair when it isn't, so this rule works with or without the Frame Layout backend enabled. */ background: linear-gradient(90deg, var(--oga-frame-accent-start, var(--oga-gold,#EAB308)), var(--oga-frame-accent-end, var(--oga-red,#b01c2e))); } /* Flatter variant for panels that sit mid-page rather than at a hard seam * (e.g. an inline widget) — a thin outline instead of a shadow + no accent. */ .ogaice-frame--flat{ border-radius: 14px; margin-top: 0; box-shadow: 0 0 0 1px rgba(0,29,108,.08); } .ogaice-frame--flat::before{ display: none; } /* ── Container safety net ─────────────────────────────────────────────── * If any plugin wrapper still paints a hard dark background inline, gently * normalise the common wrappers to the light paper + navy ink so text stays * readable on the light theme. Scoped to plugin wrappers only. */ .ogaice-webapp, .ogaice-vibe, .ogw-shell, .ogaice-vibe-shell, .ogaice-social-share { background-color: var(--oga-paper); color: var(--oga-ink); } /* ── Icon rendering consistency (emoji-based icons across the plugin) ──── */ .ogaice-icon, [class*="ogaice-"] .icon, .ogaice-agent-icon, .oga-footer-page-icon, .ogaice-assoc-icon { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; line-height: 1; display: inline-block; } /* Layer tag colours (G0–G4) — consistent across theme + plugin */ .ogaice-layer-g0, .layer-g0 { color: var(--ogaice-g0); } .ogaice-layer-g1, .layer-g1 { color: var(--ogaice-g1); } .ogaice-layer-g2, .layer-g2 { color: var(--ogaice-g2); } .ogaice-layer-g3, .layer-g3 { color: var(--ogaice-g3); } .ogaice-layer-g4, .layer-g4 { color: var(--ogaice-g4); } @media (prefers-color-scheme: dark) { /* Respect an explicit dark-mode opt-in on the plugin's own shell only. */ .ogaice-vibe[data-theme="dark"], .ogaice-webapp[data-theme="dark"] { background-color: #0a1628; color: #d5e1f3; } } /* ══════════════════════════════════════════════════════════════════════════ * OGAICE DESIGN CENTER — header · body · footer alignment (v109130.1) * --------------------------------------------------------------------------- * This file already loads LAST (ogaice-theme-compat.php, priority 99), so this * closing section only *unifies* the plugin's three main surfaces onto one * shared, centered measure with consistent rhythm. It changes no colours, no * markup, and no feature — every surface keeps its own identity (the dark * footer, the terminal nav, the framed panels), just aligned and centered. * Everything is scoped to the plugin's own wrapper classes. * ═══════════════════════════════════════════════════════════════════════ */ :root:root { --ogaice-shell-max: 1200px; } /* Reusable centered container — any plugin surface can adopt it. */ .ogaice-shell { max-width: var(--ogaice-shell-max); margin-inline: auto; padding-inline: 16px; } /* ── Header / navigation ───────────────────────────────────────────────── */ .ogaice-nav { max-width: var(--ogaice-shell-max); margin-inline: auto; } .ogaice-nav__prompt { text-align: center; } /* Center the pill row when it wraps; leave the scrolling --bar variant * left-anchored so it still scrolls from the start. */ .ogaice-nav:not(.ogaice-nav--bar) .ogaice-nav__list { justify-content: center; } /* ── Body — clean, centered reading rhythm ─────────────────────────────── */ /* Framed panels keep their full-bleed seam; inner content that opts into * .ogaice-shell gets a comfortable, centered measure. */ .ogaice-frame > .ogaice-shell, .ogaice-webapp .ogaice-shell, .ogaice-vibe .ogaice-shell { padding-inline: clamp(12px, 3vw, 24px); } /* Consistent heading rhythm across plugin surfaces (line-height + balanced * wraps only — sizes and the footer's gold heads are untouched). */ .ogaice-nav h1, .ogaice-nav h2, .ogaice-nav h3, .ogaice-webapp h1, .ogaice-webapp h2, .ogaice-webapp h3, .ogaice-vibe h1, .ogaice-vibe h2, .ogaice-vibe h3, .ogama-footer h4 { line-height: 1.25; text-wrap: balance; } /* ── Footer — align to the same centered measure as the header ─────────── */ .ogama-footer .ogama-footer-inner { max-width: var(--ogaice-shell-max); } /* End OGAICE Design Center */ /* ══════════════════════════════════════════════════════════════════════════ * OGAICE WHITE-BACKGROUND OVERRIDE — Vibe module full-bleed surfaces (v3.10.2) * --------------------------------------------------------------------------- * modules/vibe/assets/css/vibe.css paints several full-bleed surfaces with * literal hardcoded dark colours inside multi-stop gradients (not the CSS * custom properties above), so the variable remap alone can't reach them. * This section repaints those specific surfaces light, replaces the dark * aurora + scanline background with a faint two-tone gradient + hairline * vignette suited to a bright backdrop, and disables the scanline overlay * (screen-blend cyan lines only read against dark). No markup, class, or * feature is touched — this file still loads LAST (priority 99) so it * always wins. * ═══════════════════════════════════════════════════════════════════════ */ body.ogaice-vibe { background: radial-gradient(at 18% 0%, color-mix(in oklab, var(--oga-gold) 6%, transparent) 0px, transparent 45%), radial-gradient(at 100% 100%, color-mix(in oklab, var(--oga-navy) 4%, transparent) 0px, transparent 50%), var(--oga-paper); background-attachment: fixed; animation: none; color: var(--oga-ink); } /* Dark-mode scanline overlay — hides on the light theme. */ body.ogaice-vibe::before { display: none; } /* Vignette: keep, but as a barely-there edge fade instead of the heavy dark-mode version. */ body.ogaice-vibe::after { background: radial-gradient(ellipse at center, transparent 70%, color-mix(in oklab, var(--oga-navy) 4%, transparent) 100%); } /* Bento/feature cards: white surface, soft border + shadow instead of a * dark glass gradient, so the accent border still reads as the "card". */ .ogaice-vibe-card { background: var(--oga-paper); border-color: color-mix(in oklab, var(--c, var(--ogaice-vibe-gold)) 28%, var(--oga-border)); box-shadow: 0 1px 2px rgba(0,29,108,.06); } .ogaice-vibe-card__label { color: var(--oga-ink); opacity: .68; } /* Prompt / pill chips: faint dark wash instead of near-invisible white-on-white. */ .ogaice-vibe-pill { background: rgba(0,29,108,.05); border-color: rgba(0,29,108,.12); } .ogaice-vibe-pill:hover { background: rgba(234,179,8,.10); } /* Ticker strip. */ .ogaice-vibe-ticker { background: var(--oga-paper-subtle); border-color: var(--oga-border); } /* Toast notifications. */ .ogaice-vibe-toast { background: var(--oga-paper); box-shadow: 0 10px 30px rgba(0,29,108,.14), 0 0 0 1px var(--oga-border); } /* Bottom mobile dock. */ .ogaice-vibe-dock { background: var(--oga-paper); box-shadow: 0 -6px 20px rgba(0,29,108,.10), 0 0 0 1px var(--oga-border); } html[data-vibe="off"] body.ogaice-vibe { background: var(--oga-paper); } /* ══════════════════════════════════════════════════════════════════════════ * OGAICE RESPONSIVE GAP NORMALIZATION (v3.10.2) * --------------------------------------------------------------------------- * A safety net over the plugin's own grid/list layouts. Most already use * `repeat(auto-fill/auto-fit, minmax(...))`, which reflows on its own, but * their `gap` values are hardcoded per-file (ranging 8px–20px) and a few * still force a fixed column count on small screens. This section: (1) keeps * every known content grid on one tidy column below 480px so cards never get * squeezed unreadably thin, (2) scales gaps down a notch on phones so rows * don't look sparse on a narrow viewport, and (3) stops horizontal overflow * from any oversized child (image/table/iframe) so no surface ever gains a * sideways scrollbar or a ragged edge on a small device. Scoped to the * plugin's own known container classes — nothing outside it is touched. * ═══════════════════════════════════════════════════════════════════════ */ /* Prevent horizontal overflow "gaps" on small screens from oversized media. */ .ogaice-shell img, .ogaice-shell iframe, .ogaice-shell table, .ogaice-webapp img, .ogaice-webapp iframe, .ogaice-webapp table, .ogaice-vibe img, .ogaice-vibe img, .ogaice-vibe iframe, .ogaice-vibe table, .ogaice-frame img, .ogaice-frame iframe, .ogaice-frame table { max-width: 100%; height: auto; } /* One fluid gap for every known content grid — replaces the old separate * tablet/phone breakpoint overrides. clamp() already shrinks on its own as * the viewport narrows, so a single declaration keeps every grid's gap * compact and consistent at any width without three copies of the rule. */ .ogaice-wc ul.products, .ogaice-temples__grid, .ogaice-pillar__grid, .ogaice-legal-index, .oga-shop-row, .oga-pr-grid, .oga-nos-panels, .oga-nos-grid, .ogaice-vibe-bento { gap: var(--ogaice-space-sm); } /* Phone: still collapse to one column so cards never get squeezed thin * (a layout change, not just spacing — clamp() alone can't do this part). */ @media (max-width: 480px) { .ogaice-wc ul.products, .ogaice-temples__grid, .ogaice-pillar__grid, .ogaice-legal-index, .oga-shop-row, .oga-pr-grid, .oga-nos-panels, .oga-nos-grid { grid-template-columns: 1fr !important; } .ogaice-vibe-bento { grid-template-columns: repeat(2, 1fr); } .ogaice-shell, .ogaice-frame > .ogaice-shell, .ogaice-webapp .ogaice-shell, .ogaice-vibe .ogaice-shell { padding-inline: 12px; } } /* End OGAICE Responsive Gap Normalization */ /* ══════════════════════════════════════════════════════════════════════════ * OGAICE HEADER / BODY / FOOTER ORGANIZATION (v3.10.2) * --------------------------------------------------------------------------- * The plugin has no single injected
/