/* ========================================================================== Softbnb property page — CINEMATIC theme Spec: docs/property-themes.md · markup: resources/views/property/themes/cinematic.blade.php Loaded after css/softbnb-ds.css and css/property-themes/shared.css. Follows the site's day/night switch (body.dark-mode, set in header.blade.php). At night the --sb-* tokens are re-pointed to the design system's dark values on .pp--cinematic (root, .pp-overlays, every dialog, the preview pill), so every shared component follows; by day they resolve from the design system's light block, because each of those elements also carries .sb-page / .sb-modal. The HERO is the exception and stays a white-on-photograph treatment in both modes — see sections 0b and 0c. Layout tokens --cin-gap section rhythm 96px desktop · 56px phone --cin-glass glass surface used on the hero (pills, booking bar) ========================================================================== */ /* ========================================================================== 0. Tokens — the dark palette, in both site modes ========================================================================== */ /* Mode-independent tokens. --cin-gap is layout, not colour, and --cin-glass / --cin-glass-border are measured against the hero PHOTOGRAPH, which is still a photograph at noon — see section 0c. All three must survive in light mode, so they cannot ride inside the dark palette block below. */ .pp--cinematic { --cin-gap: 96px; --cin-glass: rgba(26, 22, 20, 0.74); --cin-glass-border: rgba(255, 255, 255, 0.14); } /* The dark palette. Every value is untouched; only the gate moved. The bare `.pp--cinematic` selector that used to lead this list is what made the theme ignore the site's day/night switch: it is (0,1,0), the same weight as the design system's light block on .sb-page/.sb-modal, and cinematic.css loads afterwards, so it won on source order alone and the page was dark at noon. `.pp-preview.pp--cinematic` stays: the theme-picker chip is a swatch OF this theme and is dark in both site modes. --cin-gap is repeated here deliberately — see the note under the mobile override below. */ body.dark-mode .pp--cinematic, .pp-preview.pp--cinematic { color-scheme: dark; --sb-ink: #F5F0EB; --sb-ink-soft: #D9D0C7; --sb-bg: #0F0D0C; --sb-surface: #1A1614; --sb-surface-2: #221D1A; --sb-surface-3: #2C2521; --sb-border: #332B26; --sb-border-strong: #4A3F37; --sb-text: #F1EAE4; --sb-muted: #A99E95; /* 7.1:1 on --sb-bg, 6.2:1 on --sb-surface */ --sb-muted-2: #8B8078; --sb-primary-soft: rgba(230, 51, 56, 0.16); --sb-gold: #FF8A8D; --sb-gold-soft: #2A2118; --sb-success: #4ADE80; --sb-warning: #FBBF24; --sb-error: #F87171; --sb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); --sb-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4); --sb-shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 28px 60px rgba(0, 0, 0, 0.55); --cin-gap: 96px; --pp-focus: #fff; } /* NOTE, and the reason --cin-gap is declared twice above: this override is (0,1,0) and has always lost to the dark block's (0,2,1) at night, so on a phone the section rhythm is 56px by day and 96px at night. That is a pre-existing bug, but fixing it here would change the dark rendering, which this change is not allowed to do. Repeating --cin-gap in the dark block reproduces tonight's output exactly. Fix separately with: @media (max-width: 767.98px) { body.dark-mode .pp--cinematic { --cin-gap: 56px; } } */ @media (max-width: 767.98px) { .pp--cinematic { --cin-gap: 56px; } } .pp.pp--cinematic { background: var(--sb-bg); color: var(--sb-text); padding-bottom: var(--sb-8); } /* The canvas behind the page: head.blade.php paints , so rubber-band overscroll above the dark hero would flash white. A literal (the --sb-* tokens are scoped to .sb-page/.sb-modal and do not reach ) = --sb-bg above. */ body.dark-mode.pp-body--cinematic { background-color: #0F0D0C !important; } /* Day: the same job, the other way. The (0,3,0) + !important is not decoration — header.blade.php ships `body:not(.dark-mode){background-color:#FFF9F9}` at (0,2,0), and this theme is pushed through @stack('css') BEFORE bootstrap, style.css and the header's inline