/* qpoints/assets/css/qp-legacy.css */ /* Theme bridge for pages that still use the original base.css markup. */ /* */ /* Everything is scoped to [data-qp-legacy] — the attribute _qp_theme.php puts */ /* on — so a page only picks these rules up once it has opted in, and */ /* pages already rewritten to native qp- markup are untouched. */ /* */ /* The strategy is to re-point base.css's own custom properties at the active */ /* layout's tokens, then patch the handful of components that base.css styles */ /* with literal colours. --color-white is deliberately NOT re-pointed: base.css */ /* uses it both as a surface and as text-on-accent, so the surfaces are handled */ /* explicitly below instead. */ [data-qp-legacy] { /* --- Re-point the legacy palette at the active layout ---------------- */ --color-background: var(--qp-canvas); --color-light: var(--qp-surface-2); --color-surface: var(--qp-surface-3); --color-text: var(--qp-ink); --color-text-muted: var(--qp-ink-muted); --color-border: var(--qp-line); --color-dark: var(--qp-ink); --color-success: var(--qp-ok); --color-danger: var(--qp-bad); --color-warning: var(--qp-warn); --color-info: var(--qp-info); --color-link: var(--qp-accent); --color-link-hover: var(--qp-accent-strong); /* --- Legacy scale tokens follow the new one ------------------------- */ --border-radius: var(--qp-radius-sm); --border-radius-sm: var(--qp-radius-xs); --box-shadow: var(--qp-shadow-xs); --box-shadow-lg: var(--qp-shadow-lg); background-color: var(--qp-canvas); color: var(--qp-ink); font-family: var(--qp-font-ui); } /* Playful child layouts get their rounded display face here too. */ [data-qp-legacy][data-role="child"] { font-family: var(--qp-font-play); } /* ============================================================ 1. Page frame ============================================================ */ [data-qp-legacy] .app-wrapper { width: 100%; max-width: var(--qp-page-max); margin-inline: auto; padding-inline: var(--qp-4); box-sizing: border-box; } [data-qp-legacy] .container { width: 100% !important; max-width: 100% !important; padding-inline: 0; margin-inline: auto; } [data-qp-legacy] .layout-grid, [data-qp-legacy] .grid-container { width: 100%; } [data-qp-legacy] .layout-grid > *, [data-qp-legacy] .grid-container > * { min-width: 0; } [data-qp-legacy] .content-area { margin-bottom: var(--qp-10); width: 100%; } [data-qp-legacy] .page-title { margin-block: var(--qp-2) var(--qp-5); font-size: var(--qp-text-2xl); font-weight: 900; letter-spacing: -.04em; color: var(--qp-ink); } [data-qp-legacy] h1, [data-qp-legacy] h2, [data-qp-legacy] h3, [data-qp-legacy] h4 { color: var(--qp-ink); letter-spacing: -.02em; } /* ============================================================ 2. Header — restyled to match the new top bar ============================================================ */ [data-qp-legacy] .main-header { margin-block: var(--qp-4) var(--qp-5); padding: var(--qp-2) var(--qp-4); background-color: var(--qp-surface); border: 1px solid var(--qp-line); border-radius: var(--qp-radius-lg); box-shadow: var(--qp-shadow-sm); color: var(--qp-ink); } [data-qp-legacy] .main-header .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qp-3); min-height: 52px; } [data-qp-legacy] .main-header h1 { display: flex; align-items: center; gap: var(--qp-3); margin: 0; color: var(--qp-ink); font-size: var(--qp-text-md); font-weight: 800; } /* Brand chip carries the bank's configured colour. */ [data-qp-legacy] .main-header h1::before { content: "Q"; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--qp-radius-sm); background: var(--color-primary, var(--qp-accent)); color: #fff; font-size: var(--qp-text-base); font-weight: 900; } [data-qp-legacy] .main-header a { color: var(--qp-ink-soft); } [data-qp-legacy] .main-header a:hover { color: var(--qp-ink); } [data-qp-legacy] .main-footer { margin-top: var(--qp-8); padding: var(--qp-4) 0; background-color: transparent; border-top: 1px solid var(--qp-line); color: var(--qp-ink-muted); font-size: var(--qp-text-xs); } /* ============================================================ 3. Icon navigation ============================================================ */ [data-qp-legacy] .icon-nav { gap: var(--qp-1); } [data-qp-legacy] .nav-icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; /* Stated rather than inherited: _navigation.php ships its own