/* ========================================================================== Softbnb property page themes — SHARED layer Spec: docs/property-themes.md Loaded by resources/views/property/themes/layout.blade.php after css/softbnb-ds.css and BEFORE the theme stylesheet. SCOPE .pp page root (
) .pp-overlays wrapper of everything rendered outside the root (
: dialogs + mobile bar) .pp-dialog every (also carries .sb-modal + .pp--{theme}) .pp-preview the admin preview banner body.pp-body added before paint by the layout (also body.pp-body--{theme}) Pushed CSS is printed BEFORE Bootstrap and style.css, so every selector here carries at least two classes. `:is(.pp, .pp-overlays) .x` is the usual prefix because most components can live in the page and in a dialog. THEMING Components use only --sb-* tokens plus the --pp-* component variables listed below. A theme re-points tokens on its class. Because softbnb-ds.css flips tokens with `body.dark-mode .sb-page / .sb-modal`, an always-dark theme must repeat its override for dark mode: .pp--cinematic, body.dark-mode .pp--cinematic { --sb-bg: …; --sb-text: …; } The class sits on the root, on .pp-overlays AND on every dialog, so one rule reaches all three. COMPONENT VARIABLES (all optional; defaults are tokens) --pp-a / --pp-a-hover link colour / hover colour. The site ships `a:hover{color:#f14e4e !important}`; the reset below answers with an !important var(), so colour links through these two variables, never with `color` on :hover. --pp-bw / --pp-bc border width / colour of a