/* ===== frontend-body.css — OKAMI CMS public page body/content wrapper (V.104 CSS split) ===== Split out of the former app.css. Theme presets, fluid CMS-content typography, the .frontend-body/.frontend-body__content wrapper, the frontend admin bar, and site-wide floating widgets (back-to-top, WhatsApp FAB, popup, inquiry-cart drawer) that render directly in resources/views/frontend/shell.php rather than inside the editable Header/Footer Layouts. Load between frontend-header.css and frontend-elements.css. */ /* V.063 — Universal UI/UX Kit V12 §26: 4 canonical theme presets + dark mode, applied to the public frontend only (scoped under `.frontend-body` — the admin panel's own dense UI is untouched by this round, same deliberate boundary the fluid type scale above already draws). Values are copied verbatim from the Kit's own `body[data-theme="..."]` blocks. Since every existing component already renders from these same --bg/--surface/ --ink/--muted/--line/--accent/--soft/--shadow tokens (see the :root comment above), re-declaring just the tokens here reskins the whole site with no per-component overrides needed for the 3 light presets. Dark needs a few explicit component overrides too (inputs/panels/canvas-like surfaces) because some frontend rules use literal white/light colors instead of a token — those are called out below. Selected via Settings > Theme > "Color theme" (`theme_preset`, see SettingsController), applied as `data-theme` on `` by FrontendController::themeCss(). Presets only replace accent/soft (light ones) or the full base palette (dark) — the owner's custom hex overrides in the same Theme tab still apply on top afterward, so a preset is a starting point, not a hard lock. */ .frontend-body[data-theme="blue"] { --accent: #285ff2; --soft: #edf2ff; } .frontend-body[data-theme="emerald"] { --accent: #16855e; --soft: #eaf8f1; } .frontend-body[data-theme="amber"] { --accent: #b56b00; --soft: #fff4df; } .frontend-body[data-theme="dark"] { --bg: #0b1015; --surface: #121920; --ink: #edf2f6; --muted: #9aa7b2; --line: #29343e; --accent: #6f98ff; --soft: #18243d; --dark: #f2f5f8; --shadow: 0 20px 45px -12px rgba(0, 0, 0, .38); } .frontend-body[data-theme="dark"] input, .frontend-body[data-theme="dark"] select, .frontend-body[data-theme="dark"] textarea { background: var(--surface); color: var(--ink); border-color: var(--line); } .frontend-body[data-theme="dark"] img { opacity: .92; } /* V.096 — self-caught bug (DECISIONS.md #104): every "dark band" component (hero carousel, stats bar, footer, topbar) intentionally uses var(--dark) as its own background in the default theme, where --dark IS a real near- black. But the Dark preset above redefines --dark to a near-white ink value (it doubles as a text-ink token elsewhere) — so with Dark selected these bands were rendering near-white with their hardcoded white text still on top, making every heading in them unreadable. Pinning these five selectors to a real near-black here (independent of --dark) fixes it without touching --dark's other meaning. */ .frontend-body[data-theme="dark"] .builder-carousel, .frontend-body[data-theme="dark"] .builder-stats-bar, .frontend-body[data-theme="dark"] .frontend-body__footer, .frontend-body[data-theme="dark"] .site-topbar, .frontend-body[data-theme="dark"] .site-footer { background: #05070a; } /* .frontend-body — merged below (this selector also carries the Phase 12 real-shell margin reset a bit further down in this same file). */ .frontend-body h1, .frontend-body .fs-h1 { font-size: var(--fs-h1); line-height: 1.12; } .frontend-body h2, .frontend-body .fs-h2 { font-size: var(--fs-h2); line-height: 1.18; } .frontend-body h3, .frontend-body .fs-h3 { font-size: var(--fs-h3); line-height: 1.24; } .frontend-body h4, .frontend-body .fs-h4 { font-size: var(--fs-h4); line-height: 1.3; } .frontend-body h5, .frontend-body .fs-h5 { font-size: var(--fs-h5); line-height: 1.35; } .frontend-body h6, .frontend-body .fs-h6 { font-size: var(--fs-h6); line-height: 1.4; } .frontend-body .lead { font-size: var(--fs-lead); } .frontend-body small, .frontend-body .fs-small { font-size: var(--fs-small); } /* Round P (owner: "JECO Theme Blueprint" mockup sign-off — "yes, add Archivo") — real heading font, frontend only. Body copy stays Inter (untouched); every real heading tag AND the carousel/hero's own heading (a

already covered by this same selector) gets the bolder industrial display face the reviewed mockup used. Admin panel typography is completely unaffected — this selector is scoped to .frontend-body, which only wraps the public site. */ .frontend-body h1, .frontend-body h2, .frontend-body h3, .frontend-body h4, .frontend-body h5, .frontend-body h6 { font-family: 'Archivo', Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800; letter-spacing: -.01em; } /* .frontend-body — merged from its 2 adjacent app.css rules (fluid type-scale base + the Phase 12 real-shell margin reset). */ .frontend-body { font-size: var(--fs-body); line-height: 1.65; margin: 0; } .frontend-body__content { max-width: var(--container); margin: 0 auto; padding: 0 24px 64px; } /* V.112 — "Boxed" site layout mode (owner: "header tum boxed bhi bana do, boxed version 100% body footer header same width"). `wide` (the default, unset Settings value) renders with none of this — `frontend/shell.php` simply doesn't emit `.site-boxed` at all, so wide mode is byte-identical to every prior version. In `boxed` mode, `frontend/shell.php` wraps `
`+`
`+`