/* ===================================================== HELNSOCIAL — V3 Theme (Blue + Semantic) Indigo Blue · Green/Red/Yellow · Developer Aesthetic ===================================================== */ /* PERF: the Google-Fonts @import that used to sit here was a byte-for-byte duplicate of the layout.twig already has in (same two families, same weights, same display=swap) — and it was strictly worse: a is discovered by the preload scanner and fetched in parallel, while an @import can only be found AFTER this file has been downloaded and parsed, so it serialised a second render-blocking request onto every single page load. The also has the two hints in front of it. Nothing changes visually; the same fonts arrive sooner. If this sheet is ever reused on a layout WITHOUT that , re-add it in the as a , not here. */ /* ─── CSS Variables ─────────────────────────────────── */ :root { --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* DARK theme (default) — deep teal-black canvas, soft-white text */ --bg: #06121a; --bg-2: #0b1d27; --bg-3: #12303d; --bg-card: rgba(255,255,255,0.03); --bg-card-solid:#0b1d27; --border: rgba(148,163,184,0.13); --border-hover:rgba(34,211,238,0.45); --text: #eef2f9; --text-muted: #9fb0c6; --text-faint: #6b7a90; /* PRIMARY — turquoise */ --accent: #06b6d4; /* primary turquoise */ --accent-2: #22d3ee; /* lighter turquoise (hover) */ --accent-3: #0891b2; /* deeper turquoise (active) */ --accent-rgb: 6,182,212; /* raw channels for rgba(var(--accent-rgb),…) */ --accent-grad: linear-gradient(135deg,#22d3ee 0%,#06b6d4 100%); --accent-grad-2: linear-gradient(135deg,#67e8f9 0%,#22d3ee 100%); --accent-soft: rgba(6,182,212,0.14); /* Turquoise is a bright hue: white text on it only reaches ~2.4:1 contrast, which fails WCAG AA. Dark ink on turquoise reaches ~6.9:1 and reads crisper. */ --accent-text: #04222c; /* text/icon colour on an accent background */ /* SEMANTIC colors — deliberately kept clear of the turquoise primary */ --success: #22c55e; /* green - completed, active */ --success-soft:rgba(34,197,94,0.12); --danger: #ef4444; /* red - error, cancel */ --danger-soft: rgba(239,68,68,0.12); --warning: #f59e0b; /* amber - pending, partial */ --warning-soft:rgba(245,158,11,0.12); /* Info moved off cyan (it used to be #06b6d4) so it no longer collides with the new turquoise primary — and then off the retired brand blue (#3b82f6 / #2563eb), which must not appear anywhere in this theme. Indigo keeps "info" clearly separate from both the turquoise primary and the green/red/amber status colours, and reads better on the dark canvas than the old blue did (~7:1 against --bg instead of ~4:1). */ --info: #818cf8; /* indigo - info */ --info-soft: rgba(129,140,248,0.12); /* Layout */ --sidebar-w: 260px; --sidebar-w-collapsed: 68px; --header-h: 64px; --radius: 12px; --radius-lg: 18px; --radius-xl: 24px; /* Effects */ --shadow-glow: 0 0 40px rgba(8,145,178,0.15); --shadow: 0 8px 32px rgba(0,0,0,0.5); --shadow-sm: 0 2px 10px rgba(0,0,0,0.3); --transition: 0.18s cubic-bezier(.4,0,.2,1); --blur: blur(16px) saturate(1.5); /* PERF: the explicit property list that replaced every `transition:all`. `all` makes the engine set up and re-evaluate a transition for EVERY animatable property on every one of these elements — and the theme has hundreds of them at once (every sidebar link, every platform chip, every service-row button). It also means any layout property that happens to change (width, padding, font-size) animates and forces reflow on each frame. These six are the only properties the hover/active states in this sheet actually change, so the rendering is identical. */ --transition-ui: color 0.18s cubic-bezier(.4,0,.2,1), background-color 0.18s cubic-bezier(.4,0,.2,1), border-color 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.18s cubic-bezier(.4,0,.2,1), transform 0.18s cubic-bezier(.4,0,.2,1), opacity 0.18s cubic-bezier(.4,0,.2,1); } html.light { --bg: #ffffff; --bg-2: #f7f9fc; --bg-3: #eef2f8; --bg-card: rgba(0,0,0,0.02); --bg-card-solid:#ffffff; --border: rgba(15,23,42,0.10); --border-hover:rgba(8,145,178,0.35); --text: #0f1b2e; --text-muted: #4a5a72; --text-faint: #8595ab; /* On white, the primary has to be deep enough for white button text to pass WCAG AA — #0e7490 gives ~5.4:1, the brighter tones do not. */ --accent: #0e7490; /* deep turquoise for contrast on white */ --accent-2: #0891b2; --accent-3: #155e75; --accent-rgb: 14,116,144; --accent-soft: rgba(14,116,144,0.09); /* --accent-grad had no override, so gradient-filled text (.text-gradient, .logo-text) and .sidebar-avatar kept the dark theme's #22d3ee → #06b6d4 on white — 1.5:1 at the bright end. Built from this theme's own darkened turquoises instead. It runs --accent → --accent-3 rather than mirroring the dark ramp's --accent-2 → --accent, because .sidebar-avatar prints its initial in --accent-text (white here): #0891b2 would leave that letter at 3.7:1, while both steps below carry white at 5.4:1 or better, and the gradient text lands at 7.2:1+ on --bg. */ --accent-grad: linear-gradient(135deg,#0e7490 0%,#155e75 100%); --accent-text: #ffffff; /* Indigo-600 on white: ~6.4:1, so info text passes WCAG AA here. */ --info: #4f46e5; /* indigo - info (kept off the turquoise primary) */ --info-soft: rgba(79,70,229,0.09); /* The dark values (#22c55e / #ef4444 / #f59e0b) were never overridden here, so status TEXT — .text-success/.text-danger/.text-warning, .form-error and the three .alert-* colours — sat at roughly 2.2:1 on this white canvas. These are the same three hues one or two steps deeper: 7.1:1, 6.5:1 and 7.1:1 against --bg, and 6.6:1 or better against the matching -soft badge fill below. They also have to keep working as FILLS under white labels (.btn-success, .btn-danger, .badge-new, .sidebar-link-badge, .header-addfund-btn), so each one is the lightest step of its ramp that still passes 4.5:1 white-on-fill even while :hover opacity:0.9 composites that fill toward the white page — 5.6:1 or better in every one of those places. One value per hue therefore serves both jobs and no separate text-only token is needed. The single exception is .btn-warning, which fills with --warning under DARK ink; its label is flipped for this theme next to the button rules. */ --success: #166534; --danger: #b91c1c; --warning: #92400e; --success-soft:rgba(34,197,94,0.09); --danger-soft: rgba(239,68,68,0.09); --warning-soft:rgba(245,158,11,0.09); --shadow: 0 10px 34px rgba(15,23,42,0.07); --shadow-sm: 0 2px 10px rgba(15,23,42,0.05); --shadow-glow: 0 0 40px rgba(8,145,178,0.08); } /* Respect user motion preference */ @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } /* ─── Reset & Base ──────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } /* INSTANT THEME SWITCH. Flipping dark/light rewrites every custom property at once. About forty components in this sheet carry a transition on colour, background-color, border-color and box-shadow, so a single click started that many animations on every element on screen at the same moment — hundreds of them on the services catalogue — each forcing a repaint per frame for 0.18s, over eleven backdrop-filter surfaces. The result was a visible crawl. The theme switcher adds this class, repaints, and drops it 60ms later, so the palette changes in one frame while hover animation everywhere else is left exactly as it was. scroll-behavior is included because html carries smooth scrolling and the forced reflow in the switch would otherwise be animated too. */ html.hs-theme-switching, html.hs-theme-switching *, html.hs-theme-switching *::before, html.hs-theme-switching *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } html { font-size:15.5px; scroll-behavior:smooth; } body { font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-family:var(--font); /* LEGACY: engines with no CSS custom properties (Android WebView < 50, iOS < 9.3) discard every var() declaration. Without a literal first, body falls back to the UA default: black text on white while the panel's own cards stay unstyled — effectively an unreadable page. These literals are the dark-theme values (html.light also needs var(), so a no-var engine can only ever be in dark mode). Modern engines override on the next line, so nothing changes for them. */ background:#06121a; background:var(--bg); color:#eef2f9; color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; /* PERF: `text-rendering:optimizeLegibility` used to be here. On it asks the engine to run full kerning + ligature shaping over EVERY text node on the page before first paint — on a services page with 2 000+ rows that is measurable, and it is the classic cause of "the panel takes a moment before it shows anything". Plus Jakarta Sans ships sane default kerning, so the visible difference is nil. */ min-height:100vh; } a { color:var(--accent); text-decoration:none; transition:color var(--transition); } a:hover { color:var(--accent-2); } a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } img { max-width:100%; height:auto; } ul { list-style:none; } input,textarea,select,button { font-family:inherit; } button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* Text selection — readable highlight in both themes */ ::selection { background:var(--accent); color:var(--accent-text); } ::-moz-selection { background:var(--accent); color:var(--accent-text); } .btn,.platform-btn,.nwo-cat-btn,.platform-filter-btn,.orders-filter-btn,.nav-link,.sidebar-link,.pub-nav-link,.cmd-item,.tk-subject-card,.theme-switcher button,.header-icon-btn,.header-addfund-btn,.page-item,.badge,kbd { user-select:none; -webkit-user-select:none; } /* Scrollbar */ ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border-hover); border-radius:99px; } ::-webkit-scrollbar-thumb:hover { background:var(--accent); } /* ─── Typography ────────────────────────────────────── */ h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.25; color:var(--text); letter-spacing:-0.02em; } h1 { font-size:2rem; font-weight:800; } h2 { font-size:1.6rem; } h3 { font-size:1.3rem; } h4 { font-size:1.1rem; } p { color:var(--text-muted); margin-bottom:0.75rem; } small,.text-sm { font-size:0.8rem; } code,kbd,pre { font-family:var(--font-mono); } .text-muted { color:var(--text-muted)!important; } .text-faint { color:var(--text-faint)!important; } .text-accent { color:var(--accent)!important; } .text-success{ color:var(--success)!important; } .text-danger { color:var(--danger)!important; } .text-warning{ color:var(--warning)!important; } .text-gradient { /* LEGACY: `-webkit-text-fill-color:transparent` is honoured by engines that do NOT resolve var() (Android WebView < 50). Without a literal gradient underneath, the paint source is empty and the text renders INVISIBLE. The literal is byte-identical to --accent-grad and is overridden on the next line everywhere var() works. */ background:linear-gradient(135deg,#22d3ee 0%,#06b6d4 100%); background:var(--accent-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* ─── Logo ──────────────────────────────────────────── */ .logo-img { height:34px; width:auto; display:block; } html.light .logo-img, html.light .sidebar-logo img, html.light .pub-nav-logo img { filter:none; } /* assume logo is color-friendly both modes */ .logo-text { font-size:1.35rem; font-weight:800; letter-spacing:-0.03em; /* LEGACY: see .text-gradient — the literal gradient keeps the brand name from disappearing on engines that ignore var(), and `color` is the last resort if background-clip:text is unsupported. -webkit-text-fill-color wins over `color` on every engine that supports the clip, so modern rendering is unchanged. */ color:#22d3ee; background:linear-gradient(135deg,#22d3ee 0%,#06b6d4 100%); background:var(--accent-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* ─── Buttons ───────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:0.875rem; font-weight:600; padding:0.55rem 1.2rem; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:var(--transition-ui); white-space:nowrap; text-decoration:none; -webkit-user-select:none; user-select:none; outline:none; position:relative; letter-spacing:-0.01em; } .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* --accent-text, not #fff. Ten page templates already paint their own accent buttons with this variable; this sheet hardcoding white meant the same button looked different depending on which stylesheet won, and on the dark theme the white version was the ~2.4:1 pairing --accent-text exists to avoid. The hover state was the worst of it: --accent-2 is the brightest turquoise in the ramp, so a white label dropped to about 1.8:1 and the text vanished under the cursor. --accent-text is 9.1:1 on --accent-2 and 6.8:1 on --accent. */ .btn-primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent); box-shadow:0 4px 14px rgba(8,145,178,0.3); } .btn-primary:hover { background:var(--accent-2); border-color:var(--accent-2); transform:translateY(-1px); box-shadow:0 6px 20px rgba(8,145,178,0.45); color:var(--accent-text); } .btn-primary:active { transform:translateY(0); } .btn-secondary { background:var(--bg-3); color:var(--text); border-color:var(--border); } .btn-secondary:hover { background:var(--bg-2); border-color:var(--border-hover); color:var(--text); } .btn-outline { background:transparent; color:var(--text); border-color:var(--border-hover); } .btn-outline:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); } .btn-success { background:var(--success); color:#fff; border-color:var(--success); } .btn-success:hover { opacity:0.9; transform:translateY(-1px); color:#fff; } .btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); } .btn-danger:hover { opacity:0.9; color:#fff; } .btn-warning { background:var(--warning); color:#0f172a; border-color:var(--warning); } .btn-warning:hover { opacity:0.9; color:#0f172a; } /* The one place --warning is a FILL under dark ink, and therefore the one thing the light theme's deeper amber breaks: #0f172a on it is 2.5:1, white is 7.1:1. The :hover selector is repeated because .btn-warning:hover is 0,2,0 and would otherwise outrank the 0,1,1 rule on the line above it. */ html.light .btn-warning, html.light .btn-warning:hover { color:#fff; } .btn-ghost { background:transparent; color:var(--text-muted); border:none; } .btn-ghost:hover { background:var(--accent-soft); color:var(--text); } .btn-sm { font-size:0.78rem; padding:0.4rem 0.85rem; border-radius:9px; } .btn-lg { font-size:0.95rem; padding:0.72rem 1.6rem; border-radius:14px; } .btn-block { width:100%; } .btn-icon { padding:0.5rem; aspect-ratio:1; border-radius:10px; } /* LEGACY: aspect-ratio needs Chrome/WebView 88+, Safari/iOS 15+, Firefox 89+. Where it is unknown the declaration is dropped and an icon-only button collapses to a narrow slab. Scoped inside @supports so engines that DO understand aspect-ratio never see these values — modern rendering is provably byte-identical. 2.45rem ≈ the 38px square aspect-ratio produces at the theme's 15.5px root size. */ @supports not (aspect-ratio: 1 / 1) { .btn-icon { min-width:2.45rem; min-height:2.45rem; } } .btn[disabled],.btn.disabled { opacity:0.45; pointer-events:none; } /* ─── Forms ─────────────────────────────────────────── */ .form-group { margin-bottom:1.2rem; } .form-label { display:block; font-size:0.8rem; font-weight:600; color:var(--text-muted); margin-bottom:0.45rem; letter-spacing:0.02em; } .form-control { width:100%; background:var(--bg-2); color:var(--text); border:1.5px solid var(--border); border-radius:var(--radius); padding:0.6rem 0.95rem; font-size:0.92rem; transition:border-color var(--transition), box-shadow var(--transition), background var(--transition); -webkit-appearance:none; appearance:none; } .form-control:focus { outline:none; border-color:var(--accent); background:var(--bg-3); box-shadow:0 0 0 3px var(--accent-soft); } .form-control::placeholder { color:var(--text-faint); } .form-control[readonly], .form-control:disabled { background:var(--bg-3); color:var(--text-muted); -webkit-text-fill-color:var(--text-muted); opacity:1; cursor:default; } textarea.form-control { resize:vertical; min-height:110px; font-family:var(--font); } select.form-control { cursor:pointer; min-height:56px; padding:0.85rem 2.5rem 0.85rem 1rem; font-size:0.9rem; border-radius:12px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237a8597' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:12px 8px; line-height:1.4; } select.form-control option { background:var(--bg-card-solid); color:var(--text); padding:8px; } .form-control-lg { padding:0.78rem 1.1rem; font-size:0.98rem; } .input-group { display:flex; } .input-group .form-control { border-radius:var(--radius) 0 0 var(--radius); border-right:none; } .input-group .btn { border-radius:0 var(--radius) var(--radius) 0; } .form-check { display:flex; align-items:center; gap:10px; cursor:pointer; } .form-check input[type="checkbox"] { width:17px; height:17px; accent-color:var(--accent); cursor:pointer; } .form-error { font-size:0.78rem; color:var(--danger); margin-top:0.35rem; } .form-hint { font-size:0.78rem; color:var(--text-faint); margin-top:0.35rem; } /* ─── Cards (subtle glass) ──────────────────────────── */ .card { /* LEGACY: Android WebView 4.4 / Chromium below 49 and iOS below 9.3 have no CSS custom properties, so the var() line is dropped and Bootstrap 4.5's .card{background-color:#fff} survives underneath - while body keeps its literal near-white text. Literal dark value first, exactly as body does; modern engines still take the var() line below. */ background:#0b1d27; background:var(--bg-card-solid); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color var(--transition); } .card:hover { border-color:var(--border-hover); } .card-body { padding:1.4rem 1.6rem; } .card-header { padding:1.1rem 1.6rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; } .card-footer { padding:1.1rem 1.6rem; border-top:1px solid var(--border); } .card-title { font-size:1rem; font-weight:700; color:var(--text); margin:0; letter-spacing:-0.01em; } .card-shadow { box-shadow:var(--shadow); } .card-glow { box-shadow:var(--shadow-glow); } /* ─── Alerts ────────────────────────────────────────── */ .alert { padding:0.9rem 1.2rem; border-radius:var(--radius); border:1px solid transparent; font-size:0.9rem; margin-bottom:1rem; display:flex; align-items:flex-start; gap:11px; } .alert-success { background:var(--success-soft); border-color:rgba(34,197,94,0.3); color:var(--success); } .alert-danger { background:var(--danger-soft); border-color:rgba(239,68,68,0.3); color:var(--danger); } .alert-warning { background:var(--warning-soft); border-color:rgba(245,158,11,0.3); color:var(--warning); } /* The border used to be rgba(6,182,212,..) — the turquoise primary — around an otherwise blue alert, which is exactly the collision the --info comment in :root warns about. It now tracks --info like every other alert here does. */ .alert-info { background:var(--info-soft); border-color:rgba(129,140,248,0.3); color:var(--info); } /* Bootstrap 4.5 ships TWO layout modes for this button that both fight the flex row above: `.close{float:right}` and `.alert-dismissible .close{position:absolute;top:0; right:0}`. The old rule here had the same 0,2,0 specificity but declared no `position`, so `position:absolute` survived: the X left the flex flow, margin-left:auto became dead code, and it was pinned to the alert's corner. Bootstrap's matching gutter `.alert-dismissible{padding-right:4rem}` had meanwhile been wiped out by the `.alert` padding shorthand above, so nothing was reserved for it and it was painted on top of the message (and directly on the first letter under dir="rtl"). `.alert.alert-dismissible .close` is 0,3,0, so this wins whatever order the two uploaded stylesheets end up in. The button is a real flex item again: no float, no absolute positioning, >=40px tap target, and negative margins so the banner does not get taller than it is today. margin-left:auto is direction-agnostic here because the button is the last flex item in both LTR and RTL. */ .alert .close, .alert.alert-dismissible .close { position:static; float:none; top:auto; right:auto; bottom:auto; left:auto; /* order, not DOM order. PerfectPanel and the factory theme write the dismiss button BEFORE the message text; this theme writes it after. With margin-left:auto alone, a close-first alert pushed the button right AND dragged the message along behind it — which is exactly the "text jammed against the right edge with the X on top of the first letter" the panel was showing. order:99 puts the button last whatever the markup does; the message is an anonymous flex item at order 0, so it always leads. */ order:99; flex:0 0 auto; align-self:flex-start; margin:-9px -9px -9px auto; padding:9px; min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; border-radius:8px; font-size:1.15rem; line-height:1; font-weight:400; color:inherit; text-shadow:none; opacity:0.6; cursor:pointer; } .alert .close:hover, .alert.alert-dismissible .close:hover { opacity:1; } .alert .close:focus-visible { outline:2px solid currentColor; outline-offset:2px; opacity:1; } /* The X is a flex item now, so Bootstrap's 4rem reservation would only be dead space. */ .alert.alert-dismissible { padding-right:1.2rem; } /* icon | message (takes the free space, may wrap) | dismiss. min-width:0 keeps a long unbreakable URL in an alert from widening the row past the viewport. */ .alert > span, .alert > p, .alert > div:not(.close) { flex:1 1 auto; min-width:0; } .alert > i, .alert > svg { flex:0 0 auto; line-height:1.55; } /* margin-left:auto above is direction-agnostic in a flex row, but margin-right:-9px is not: it names a PHYSICAL side. Under dir="rtl" (set on by layout.twig) the row reverses, the dismiss button sits at the physical LEFT, and that negative margin then eats into the gap toward the message instead of into the alert's own padding. margin-inline would express this correctly but is not available on the old WebViews this theme still supports, so the two physical sides are simply swapped here. Specificity is 0,3,0 / 0,4,0 and this rule is later in the file, so it wins over both base rules above. */ [dir="rtl"] .alert .close, [dir="rtl"] .alert.alert-dismissible .close { margin:-9px auto -9px -9px; } /* ─── Badges ────────────────────────────────────────── */ .badge { display:inline-flex; align-items:center; padding:0.22rem 0.6rem; font-size:0.7rem; font-weight:700; border-radius:6px; letter-spacing:0.4px; text-transform:uppercase; } .badge-success { background:var(--success-soft); color:var(--success); } .badge-danger { background:var(--danger-soft); color:var(--danger); } .badge-warning { background:var(--warning-soft); color:var(--warning); } .badge-info { background:var(--info-soft); color:var(--info); } .badge-neutral { background:var(--bg-3); color:var(--text-muted); } .badge-accent { background:var(--accent-soft); color:var(--accent); } /* "NEW" badge — for fresh items */ .badge-new { background:var(--success); color:#fff; padding:0.18rem 0.5rem; font-size:0.62rem; font-weight:800; border-radius:5px; letter-spacing:0.5px; text-transform:uppercase; box-shadow:0 0 8px rgba(34,197,94,0.4); } /* ─── Tables ────────────────────────────────────────── */ .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-card-solid); } .table { width:100%; border-collapse:collapse; font-size:0.88rem; } .table thead th { padding:0.85rem 1.1rem; text-align:left; font-size:0.72rem; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.7px; background:var(--bg-2); border-bottom:1px solid var(--border); white-space:nowrap; } .table tbody tr { border-bottom:1px solid var(--border); transition:background var(--transition); } .table tbody tr:last-child { border-bottom:none; } .table tbody tr:hover { background:var(--accent-soft); } .table tbody td { padding:0.8rem 1.1rem; vertical-align:middle; color:var(--text); } /* ─── Pagination ────────────────────────────────────── */ .pagination { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .page-item .page-link { display:flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 8px; background:var(--bg-2); border:1px solid var(--border); color:var(--text-muted); border-radius:9px; font-size:0.85rem; transition:var(--transition-ui); cursor:pointer; } .page-item .page-link:hover { color:var(--accent); border-color:var(--accent); } .page-item.active .page-link { background:var(--accent); border-color:var(--accent); color:var(--accent-text); } .page-item.disabled .page-link { opacity:0.4; pointer-events:none; } /* ─── Tabs ──────────────────────────────────────────── */ .nav-tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:1.4rem; overflow-x:auto; } .nav-tabs .nav-link { padding:0.65rem 1.1rem; font-size:0.88rem; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; border-radius:var(--radius) var(--radius) 0 0; cursor:pointer; transition:var(--transition-ui); white-space:nowrap; position:relative; display:inline-flex; align-items:center; gap:6px; } .nav-tabs .nav-link:hover { color:var(--text); } .nav-tabs .nav-link.active { color:var(--accent); border-bottom-color:var(--accent); } .tab-content .tab-pane { display:none; } .tab-content .tab-pane.show.active { display:block; animation:fadeIn .18s ease; } @keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} } /* ─── Modal ────────────────────────────────────────── */ /* BOOTSTRAP COLLISION — this one block is the cause of BOTH open bugs: "every Detail modal opens transparent with unreadable text" and "the hCaptcha checkbox cannot be clicked and the dialog cannot be closed". layout.twig loads Bootstrap 4.5 from the CDN and Bootstrap owns the exact same four class names this theme uses: .modal { z-index:1050; display:none; overflow:hidden } .modal-dialog { pointer-events:none; margin:.5rem } .modal-content { background-color:#fff; pointer-events:auto } .modal-backdrop { z-index:1040; background-color:#000; width:100vw } The theme had z-index:1000 on .modal, 1001 on .modal-dialog and NO z-index at all on .modal-backdrop — so the backdrop silently inherited Bootstrap's 1040. Inside .modal's own stacking context 1040 > 1001, i.e. the black backdrop was painted ON TOP OF the dialog: the panel reads as washed out/unreadable, and every click (the hCaptcha checkbox, the X, the footer buttons) is swallowed by the backdrop instead of reaching the content. Fix — the same technique the sister panel uses: an explicit stacking order INSIDE .modal (backdrop 1, dialog 2), the whole layer lifted to 3000 so it clears Bootstrap's 1050 and the theme's own #cmdPalette (2000), an opaque backdrop, and pointer-events restored on .modal-dialog. The !important flags are what make this hold no matter which stylesheet the panel serves last. */ /* LEGACY: `inset` needs Chrome/WebView 87+, Safari/iOS 14.1+, Samsung Internet 14+. Older engines drop the declaration and the layer collapses to 0x0 — no dialog at all. The longhands compute the identical box everywhere. */ .modal { display:none; position:fixed!important; top:0; right:0; bottom:0; left:0; inset:0; z-index:3000!important; align-items:center; justify-content:center; padding:1rem; /* Bootstrap sets overflow:hidden here, which clips a dialog taller than the viewport with no way to scroll down to its buttons. */ overflow:auto!important; } /* Deliberately NOT `display:none!important` on the rule above: some PerfectPanel-injected dialogs are opened by a script writing an inline display, and an !important stylesheet declaration outranks an inline one — those dialogs would then never open again. Bootstrap already defaults .modal to display:none, so the plain declaration is enough, and the !important below is all that is needed to force ours open. */ .modal.show { display:flex!important; animation:fadeIn .15s ease; } /* backdrop-filter needs the -webkit- alias for Safari/iOS < 18 and is disabled by default in Firefox; the rgba() layer alone already dims the page, so the blur is decoration, never a legibility requirement. */ .modal-backdrop { position:fixed!important; top:0; right:0; bottom:0; left:0; inset:0; /* Bootstrap's width:100vw/height:100vh include the classic scrollbar gutter and pushed the document sideways on Windows while a dialog was open. */ width:100%!important; height:100%!important; z-index:1!important; background:rgba(0,0,0,0.7)!important; opacity:1!important; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } /* The theme nests its backdrop INSIDE .modal, so z-index:1 above is measured against .modal's own stacking context and lands under the dialog — correct. Bootstrap's JS instead appends its backdrop as a direct child of , where z-index:1 would drop it behind the sidebar (400) and the sticky header (300) and leave the page around a PP-opened dialog undimmed. Lift only that variant, to just under .modal's 3000. */ body > .modal-backdrop { z-index:2999!important; } .modal-dialog { position:relative; z-index:2!important; /* Bootstrap's pointer-events:none is what kills clicks on a third-party widget (the hCaptcha iframe) that PP renders straight into the dialog without a .modal-content wrapper to restore them. */ pointer-events:auto!important; width:100%; max-width:500px; /* margin:auto (not Bootstrap's .5rem): with the flex centring above, a dialog taller than the viewport would otherwise have its top edge — the header with the close button — cut off instead of scrolling into reach. */ margin:auto; animation:modalPop .18s cubic-bezier(.4,0,.2,1); } @keyframes modalPop { from{opacity:0;transform:scale(0.96) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} } .modal-content { position:relative; /* !important beats Bootstrap's background-color:#fff — that white slab under white-ish theme text is the "transparent / unreadable" report. */ /* LEGACY: no CSS custom properties below Chromium 49 / iOS 9.3, so BOTH declarations below are dropped (!important cannot rescue an invalid value), Bootstrap's background-color:#fff wins and the text inherits body's near-white literal - a blank white dialog. Literal dark values first; modern engines still take the var() line below. */ background:#0b1d27!important; color:#eef2f9; background:var(--bg-card-solid)!important; color:var(--text); border:1px solid var(--border-hover); border-radius:var(--radius-lg); box-shadow:var(--shadow),var(--shadow-glow); pointer-events:auto!important; } /* Anything PP or a third party injects into a dialog stays interactive and stays above the backdrop layer. hCaptcha renders its checkbox as an