/* * Dijiwa Back Office — shared design tokens + component styles. * * Linked (plain , no build step) from layouts/app.blade.php, layouts/auth.blade.php, * and every standalone view (pages that render their own instead of extending a * layout — signer/approval/verify pages). Centralizing here means a palette or nav change * only touches this one file instead of being re-applied by hand across ~11 places. * * DIRECTION (v2, radical pass): true near-black + true white, flat and hard-edged — no * blur/backdrop-filter, no gradients, no glow shadows on static chrome. The accent (the * reference's "Aqua Blue" tone, #00B9E4 — used raw, no blending needed, since it's already * bright enough for on-black legibility) is spent ONCE per moment — a wordmark, an active * nav state, a focus ring, one outlined pill CTA — rather than tinting every border/ * background the way v1 did. The structural rule throughout: hairlines and dividers are * neutral (rgba(var(--paper-rgb), alpha)); the accent appears specifically to mean active / * focused / primary-action, never as ambient decor. Buttons are outlined pills (transparent * fill, colored border+text) that invert to a solid fill only on hover — the one digital * precedent found in the brand reference. * * v3 note (2026-07-04): swapped the accent hue from "Aged Gold" (#866200) to "Aqua Blue" * (#00B9E4) — both are real named tones from the brand reference's 8-color "Color Scenes" * palette (style-extraction.md), but gold still read too close to the app's old bronze * identity and risked semantic collision with nothing; the deeper problem was picking a * warm hue at all when the brief asked to move away from warm/gold. Aqua Blue also can't be * confused with the existing --danger-rgb/--success-rgb semantics the way a red brand tone * would (Oxide Red / Terracotta Red were the other strong candidates from the palette, ruled * out for exactly that collision risk). Deep Ocean Blue (#094F6E), the same "cool water" * family's deeper tone, is the companion color for label text / secondary wash. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&display=swap'); :root { /* Surfaces — true near-black canvas; one flat, neutral (not warm-tinted) lift for cards/dropdowns/modals, separated from the canvas by a hairline, not a shadow. */ --ink-rgb: 10, 10, 10; /* page background */ --topbar-rgb: 10, 10, 10; /* topbar — flush with the canvas, hairline-separated */ --surface-rgb: 19, 19, 19; /* card / dropdown / modal surfaces — opaque, flat */ /* Text — true white. A single token (both tiers now share the same base) so every existing rgba(var(--paper-soft-rgb), alpha) call site still works: the alpha values already tuned during the 2026-06-23/26 a11y passes keep their contrast ratios (a brighter true-white base only ever *raises* the resulting contrast, never lowers it), while the page reads unambiguously black-and-white instead of warm-cream-tinted. */ --paper-rgb: 255, 255, 255; --paper-soft-rgb: 255, 255, 255; /* Brand accent — the reference's "Aqua Blue" tone, used raw (no white-blend needed — it's already high-luminance enough for on-black text/borders, unlike the old gold pigment). Reserved for active/focus/primary-action states only — see the direction note above. */ --accent-rgb: 0, 185, 228; /* #00B9E4 — raw, unblended */ --accent: #00B9E4; --accent-soft: #4DCEEC; /* blended 30% toward white — badges/small text */ --accent-strong: #094F6E; /* "Deep Ocean Blue" — the accent's deeper companion tone, used for field-label caps */ --accent2-rgb: 9, 79, 110; /* #094F6E "Deep Ocean Blue" — rare secondary, one static wash on the login stage, nowhere else */ /* Status — standard semantic colors, not part of the brand style reference */ --success-rgb: 47, 158, 111; --success-text: #86efac; --danger-rgb: 192, 88, 79; /* buttons/badges danger */ --danger-text: #f0a8a1; --flash-danger-rgb: 220, 38, 38; /* flash/field-error red — a distinct, cooler red from --danger-rgb; both pre-date this file. */ --flash-danger-text: #fca5a5; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Architectural high-contrast serif for headline/hero moments only (page titles, login title) — kept OFF dense UI chrome (tables/forms/buttons/nav) so daily task legibility never regresses; those stay on --font-sans. Pushed to a bigger, bolder scale in this pass (see .page-head h1) — the "monumental" register of the reference. */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); background: rgb(var(--ink-rgb)); color: #fff; min-height: 100vh; } a { color: inherit; } .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } .shell { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 18px 24px 64px; } /* App shell — sidebar + main content, a flex row. The sidebar scales by *scrolling* vertically, which is the actual fix for the old horizontal .topnav's recurring width-budget problem (see git history / CLAUDE.md — six separate max-width bumps, one per module added). Adding a module here costs nothing shared/finite; it just adds one more row that scrolls if the list ever outgrows the viewport height. */ .app-shell { display: flex; min-height: 100vh; } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .brand-logo { height: 32px; width: auto; } .brand-text { font-size: 12px; font-weight: 800; letter-spacing: 0.30em; text-transform: uppercase; color: var(--accent); line-height: 1.2; } .brand-text small { display: block; font-size: 9.5px; letter-spacing: 0.16em; color: rgba(var(--paper-rgb),0.5); margin-top: 2px; font-weight: 600; } /* Sidebar — sticky full-height column on desktop (>640px); becomes a fixed off-canvas drawer under the phone media query below. `.sidebar` and `.mobile-topbar` each hold their OWN `.brand` instance (not one CSS-repositioned node) — the inactive copy is excluded from tab order via `display:none`, not just hidden visually. */ .sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 20px 16px; background: rgba(var(--topbar-rgb),0.97); border-right: 1px solid rgba(var(--paper-rgb),0.12); position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--paper-rgb),0.3) transparent; } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(var(--paper-rgb),0.3); border-radius: 4px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar > .brand { padding: 4px 8px 18px; } /* Primary nav — top-level: Dashboard + one entry per module, plus (nested directly under whichever module is currently active) that module's own sub-pages, if it has more than one — see .sidenav-sub, which replaces the old separate horizontal .subnav bar. */ .sidenav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidenav a { position: relative; display: flex; align-items: center; gap: 9px; color: rgba(var(--paper-rgb),0.6); text-decoration: none; font-size: 13.5px; font-weight: 500; padding: 9px 12px; border-radius: 9px; transition: color .15s ease, background .15s ease; } .sidenav a .mod-ico { opacity: 0.8; flex-shrink: 0; } .sidenav a:hover { color: #fff; background: rgba(var(--paper-rgb),0.06); } /* box-shadow:inset (not a negative-offset ::before) for the active accent bar — .sidebar has overflow-y:auto, which the CSS spec forces to also compute overflow-x as auto (not visible) once either axis is non-visible, so anything positioned outside the link's own border box would risk being clipped/scrolled. An inset shadow never triggers that. */ .sidenav a.active { color: #fff; background: rgba(var(--accent-rgb),0.14); box-shadow: inset 3px 0 0 var(--accent); } /* Contextual sub-links — the module you're currently inside's own pages (e.g. Reimbursement's My Batches/Approvals). role="group" (set in the Blade template, not here) gives assistive tech the same "you're in a sub-section" cue the old standalone