/** * newapp/css/theme-parties.css * Skin for the Parties journey's customer-facing pages — same mechanism and * variable-naming convention as theme-schools.css (--p- and --theme- prefixed, * read generically by any na- component). Applied once, on the journey's * landing page, via na_apply_journey_theme('parties') → session → body * class — then loads on every subsequent page for the rest of that session * (see na_theme.php). That mechanism was already correct; this file is what * changed. * * **Recoded 2026-08-14, explicit design brief:** orange as the background * WASH — page background, and showing through behind every panel/card, not * just a thin accent — with blue reserved for borders and buttons. Simpler, * more assertive split than the previous version (which spread the orange * accent thinly across borders/focus-rings/hovers too, and left generic * `.card`/`.btn-success` elements grey/neutral) — replaced with a clean * two-role model: * --p-color (orange, #FC9B13) → background wash ONLY (body + any * panel background wash). * --theme-btn-bg (blue, #1a5dc8) → every border and every button. * Palette values themselves are still the real ones confirmed against the * live site's own `css/theme-parties.css` (old app) — only how they're * APPLIED changed here, not the colours. * * The black cabin-room panels below (`.na-cabin-*`) are UNCHANGED — those * are ported directly from the live site's own `.room-panel`/`.ptr-row` CSS * (read in full), not part of this restyle. * * **2026-09-10 — THIS WHOLE FILE WAS DEAD, and had been from the day it was * written.** Line 4 above used to name the two variable prefixes with a glob * and a slash between them. That put a star-slash — a comment TERMINATOR — * into line 4, which closed this comment there. Every line after it — thirty-odd * lines of English prose — was then handed to the CSS parser as if it were CSS, * and in recovering from that it swallowed the @import and the .theme-parties * rule with it. Nothing in this file ever applied. The page looked exactly as though * the stylesheet had never been linked, which is what made it so hard to find: * the class was right, the was right, the file was on the server * and served a 200, and the browser correctly applied all zero rules in it. * * Never let a star followed by a slash appear inside a comment — not in a glob, * a variable prefix or a file path. Rephrase it, as line 4 now is. All six * stylesheets were checked for the same fault; this was the only one. * * **2026-09-10 — the orange was not holding across the journey.** The rule * above set `background` on the body class, which is exactly how * theme-xmas.css sets its own dark ground, and it is correct as far as it * goes. What it does not cover is Bootstrap 5.3 repainting a surface from * `--bs-body-bg` (white) for itself — modals, offcanvas, list groups, * accordions — nor the ROOT element behind a page shorter than the viewport. * So the variable is now rebound to the orange as well, the html element is * painted to match, and every panel that must stay WHITE is re-pinned * explicitly right after. Orange ground, white panels, stated in one place * rather than depending on what Bootstrap happens to leave alone. */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap'); .theme-parties { --theme-font: 'Poppins', sans-serif; --theme-btn-bg: #1a5dc8; --theme-btn-color: #ffffff; --theme-border: #000000; --p-font: 'Poppins', sans-serif; --p-color: #FC9B13; --p-color-dk: #c07800; --p-color-rgb: 252, 155, 19; background: #FC9B13; min-height: 100vh; font-family: var(--theme-font); color: #1a1a1a; /* Bootstrap 5.3 paints `body` from --bs-body-bg (white) and every surface that inherits it — .modal-content, .offcanvas, .accordion, .list-group — from the same variable. Setting only the `background` above therefore left white showing through anywhere Bootstrap repainted a surface for itself. Rebinding the variable is how a 5.3 theme is meant to set its ground, and it is what makes the orange hold on pages this file has never had a rule for. Same approach as theme-xmas.css's own dark ground. */ --bs-body-bg: #FC9B13; --bs-body-bg-rgb: 252, 155, 19; --bs-body-color: #1a1a1a; } /* The ground, belt and braces. `min-height: 100vh` on the body only guarantees the BODY is orange; a page shorter than the viewport whose html element is painted white still shows a white band under the fold on some browsers, and rubber-band overscroll shows white above it on iOS. Painting the root as well removes both. */ html:has(> body.theme-parties) { background: #FC9B13; } /* PANELS STAY WHITE. Rebinding --bs-body-bg above would otherwise tint every surface that reads it, which is the opposite of the brief: orange behind, white panels on top. These are re-pinned explicitly rather than left to inherit, so the ground colour can be changed in one place without hunting for what went orange with it. */ .theme-parties .card, .theme-parties .modal-content, .theme-parties .offcanvas, .theme-parties .list-group-item, .theme-parties .accordion-item, .theme-parties .accordion-button:not(.collapsed), .theme-parties .dropdown-menu { --bs-body-bg: #fff; background-color: #fff; color: #1a1a1a; } /* Bootstrap's own light surface, used inside panels for "subtly distinct" rows. Left as a light grey rather than allowed to fall through to the orange ground — same intent theme-xmas.css records for its own .bg-light override, opposite direction. */ .theme-parties .bg-light { background-color: #f6f7f9 !important; color: #1a1a1a; } /* ── Cards/panels — orange shows through in the gaps between them (no background on .na-page-wrap itself); the cards themselves are white for readability, framed with a BLUE border per the brief. */ .theme-parties .card { border: 2px solid var(--theme-btn-bg); border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); } /* na-panel-header defaults to Bootstrap's .bg-dark look (see newapp.css) — same override precedent as theme-schools.css: Bootstrap's .bg-dark is !important and can't be beaten any other way. Blue, matching the borders/buttons role, not the orange background wash. */ .theme-parties .na-panel-header { background-color: var(--theme-btn-bg); color: #fff; } .theme-parties h1 i { color: var(--theme-btn-bg); } /* ── Buttons — every button role maps to blue, per the brief. */ .theme-parties .btn-success, .theme-parties .btn-primary { --bs-btn-bg: var(--theme-btn-bg); --bs-btn-border-color: var(--theme-border); --bs-btn-color: var(--theme-btn-color); --bs-btn-hover-bg: #144a9e; --bs-btn-hover-border-color: var(--theme-border); --bs-btn-hover-color: var(--theme-btn-color); } .theme-parties .btn-outline-secondary { --bs-btn-color: var(--theme-btn-bg); --bs-btn-border-color: var(--theme-btn-bg); --bs-btn-hover-bg: var(--theme-btn-bg); --bs-btn-hover-border-color: var(--theme-btn-bg); --bs-btn-hover-color: var(--theme-btn-color); } /* ── Step pills — same rounded-pill/chevron-separator shape as the live site's .pbc-nav breadcrumb (parties_breadcrumb.php), themed here. */ .theme-parties .na-step-pill-active { background: var(--theme-btn-bg); color: var(--theme-btn-color); border-color: var(--theme-border); } .theme-parties .na-step-pill-link:hover { background: rgba(26, 93, 200, .12); color: var(--theme-btn-bg); } .theme-parties .na-step-sep { color: var(--theme-btn-bg); } /* ── Primary flow buttons (Continue/Back) — same .na-btn-nav marker-class discipline theme-schools.css established (a blanket .btn-success/ .btn-outline-secondary selector previously bloated unrelated stepper buttons on that page — don't repeat that mistake here). Colour already comes from the plain .btn-success/.btn-outline-secondary rules above; this only adds the shape/weight. */ .theme-parties .btn-success.na-btn-nav, .theme-parties .btn-outline-secondary.na-btn-nav { border-radius: 8px; font-weight: 700; padding: .65rem 1.85rem; letter-spacing: .01em; transition: box-shadow .2s, transform .1s; } .theme-parties .btn-success.na-btn-nav:not(:disabled) { box-shadow: 0 4px 15px rgba(0, 0, 0, .25); } .theme-parties .btn-success.na-btn-nav:not(:disabled):hover { box-shadow: 0 6px 25px rgba(0, 0, 0, .35); transform: translateY(-1px); } .theme-parties .btn-outline-secondary.na-btn-nav:hover { transform: translateY(-1px); } /* ── Small controls (date strip, qty steppers) — blue, same border/button role, deliberately not the .na-btn-nav padding/shape rule above (a compact fixed-width stepper box must not grow past its own bounds). */ .theme-parties .na-dp-btn.btn-outline-secondary, .theme-parties .na-vqc-dec, .theme-parties .na-vqc-inc { color: var(--theme-btn-bg); border-color: var(--theme-btn-bg); } .theme-parties .na-dp-btn.btn-outline-secondary:hover, .theme-parties .na-vqc-dec:hover, .theme-parties .na-vqc-inc:hover { background: var(--theme-btn-bg); color: var(--theme-btn-color); border-color: var(--theme-border); } /* ── Input / select focus ring — blue, matching the borders role. */ .theme-parties input:focus, .theme-parties select:focus, .theme-parties textarea:focus { outline: none; border-color: var(--theme-btn-bg) !important; box-shadow: 0 0 0 3px rgba(26, 93, 200, .22); } /* ── Cabin/room panels (cabin_picker.php) — UNCHANGED, ported directly from the live site's real .room-panel/.ptr-row CSS (read in full): near-black panel, white pill title, image | info | sessions three-column row. Not part of the orange/blue restyle — this section keeps its own look. */ .na-cabin-panel { border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, .18); margin-bottom: 1.75rem; background: #2a2a2a; background-size: cover; background-position: center; border: 3px solid #000; } .na-cabin-panel-overlay { padding: 1rem 1.25rem 2.5rem; display: flex; flex-direction: column; } /* **Corrected 2026-08-30** — the panel was squashed to just the title and the row, so a room's background photo was reduced to a sliver behind them and the page read as a plain list. The live site gives the title a deep margin (4.5rem) and the panel real height, which is what makes the photo the thing you see first. Matched here, and only when a photo is actually set — a room with no background keeps the compact look rather than opening a large empty dark box. */ .na-cabin-panel-title { align-self: flex-start; background: rgba(255, 255, 255, .93); color: #1a1a1a; font-size: 1.45rem; font-weight: 800; letter-spacing: .01em; padding: .45rem 1.3rem; border-radius: 30px; box-shadow: 0 3px 14px rgba(0, 0, 0, .22); margin-bottom: 1rem; } .na-cabin-panel[style*="background-image"] .na-cabin-panel-title { margin-bottom: 4.5rem; } /* The height goes on the OVERLAY, not the panel: the overlay is the flex column, and a panel that is tall while its only child is short leaves the child nothing to stretch into — so margin-top:auto below would have had no space to consume. */ .na-cabin-panel[style*="background-image"] .na-cabin-panel-overlay { min-height: 320px; } /* Row sits at the BOTTOM of a photo panel, as it does on the live site — the photo is the whole point of the panel, and a row floating in the middle of it leaves dead space underneath and covers the part of the picture people look at. */ .na-cabin-panel[style*="background-image"] .na-cabin-row { margin-top: auto; margin-bottom: 0; } /* ── Room row — image | name | sessions, matches the live site's .ptr-row grid exactly (image column, name, then sessions taking the rest). .na-cabin-img is a placeholder today (Roller image not wired up yet) — same fallback treatment as the live site's .ptr-no-img for a product with no image_url: a plain icon circle, not a broken/missing image. **Corrected 2026-08-21**: the image column's width is now capped to a real percentage (max 20%, never below 110px so the placeholder icon has room) instead of a bare 148px — a fixed px width became a much LARGER fraction of the row on a narrower render (e.g. next to the basket sidebar), looking disproportionate. .na-cabin-img also gets its own fixed max-height now — CSS grid's default align-items:stretch was forcing it to match whatever height the SESSIONS column needed (several wrapped session buttons vs. one short placeholder line), so a short "fully booked"/notice message made the image cell stretch tall and look oversized purely because its sibling column had little content. */ .na-cabin-row { display: grid; grid-template-columns: minmax(110px, 20%) minmax(0, 1fr) minmax(0, 2.5fr); align-items: stretch; border-radius: 12px; overflow: hidden; min-height: 80px; box-shadow: 0 3px 12px rgba(0, 0, 0, .2); margin-bottom: .85rem; } .na-cabin-img { display: flex; align-items: center; justify-content: center; padding: .4rem; background: rgba(240, 240, 240, .8); max-height: 130px; overflow: hidden; } .na-cabin-img img { width: 132px; height: 99px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .08); flex-shrink: 0; } .na-cabin-img .na-cabin-no-img { width: 72px; height: 72px; border-radius: 50%; background: #f0ecd8; display: flex; align-items: center; justify-content: center; color: var(--p-color-dk); font-size: 2.4rem; } .na-cabin-info { padding: .6rem .75rem; display: flex; flex-direction: column; justify-content: center; background: rgba(255, 255, 255, .85); border-left: 1px solid rgba(0, 0, 0, .07); min-width: 0; } .na-cabin-name { font-size: 1.056rem; font-weight: 700; color: #1a1a1a; line-height: 1.2; } .na-cabin-desc { font-size: .75rem; color: #000; line-height: 1.35; } /* Capacity/duration chips — the middle column used to hold nothing at all for a room with no short description, leaving a blank third of every row. */ .na-cabin-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; } .na-cabin-chip { display: inline-flex; align-items: center; gap: .3rem; background: rgba(0, 0, 0, .06); color: #333; font-size: .7rem; font-weight: 600; padding: .18rem .5rem; border-radius: 20px; white-space: nowrap; } .na-cabin-sessions { padding: .7rem .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; background: rgba(248, 248, 248, .8); border-left: 1px solid rgba(0, 0, 0, .07); min-height: 80px; min-width: 0; } /* "No sessions" / "within notice" placeholders — added 2026-08-21, fixing a real contrast bug: these were plain near-white text (Bootstrap's text-white-50) sitting directly on .na-cabin-sessions' own near-WHITE background above (rgba(248,248,248,.8)) — barely visible, worse again wherever the panel's own background image showed lighter tones through the translucency. Given its own small opaque white chip instead — same contrast guarantee everywhere regardless of what's behind it, matching .na-cabin-panel-title's white-pill treatment rather than trying to pick one text colour that happens to work on every possible background. */ .na-cabin-notice { display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: #333; font-size: .85rem; font-style: italic; padding: .45rem .8rem; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); } .na-cabin-session-btn { background: #1a1a1a; border: 1.5px solid #333; border-radius: 24px; padding: .55rem 1.2rem; font-family: var(--p-font); font-weight: 700; color: #fff; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; display: flex; flex-direction: column; align-items: center; line-height: 1.2; white-space: nowrap; } .na-cabin-session-btn .na-sess-time { font-size: 1rem; font-weight: 700; } .na-cabin-session-btn .na-sess-till { font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .75); } .na-cabin-session-btn .na-sess-cap { font-size: .72rem; font-weight: 600; color: rgba(255, 255, 255, .6); margin-top: .1rem; } .na-cabin-session-btn.is-sold-out .na-sess-till, .na-cabin-session-btn.is-sold-out .na-sess-cap { color: #999; } .na-cabin-session-btn:hover:not(:disabled) { background: #3a3a3a; border-color: #555; transform: translateY(-1px); } /* Selected session — the live site's own active treatment (its accent colour with dark ink), not the theme button colour. The theme pink sat on the pink Barbie panel and the chosen session became the hardest one to see; this reads the same against every room photo. */ .na-cabin-session-btn.is-selected { background: var(--p-color); border-color: var(--p-color-dk); color: #1a1a1a; box-shadow: 0 2px 10px rgba(var(--p-color-rgb), .45); } .na-cabin-session-btn.is-selected .na-sess-till, .na-cabin-session-btn.is-selected .na-sess-cap { color: rgba(0, 0, 0, .65); } .na-cabin-session-btn:disabled { background: #ccc; border-color: #bbb; color: #888; cursor: not-allowed; } @media (max-width: 640px) { /* A 4.5rem gap and a 320px panel are a lot of empty photo on a phone. */ .na-cabin-panel[style*="background-image"] .na-cabin-panel-overlay { min-height: unset; } .na-cabin-panel[style*="background-image"] .na-cabin-panel-title { margin-bottom: 2rem; } .na-cabin-panel-title { font-size: 1.1rem; padding: .4rem 1rem; } .na-cabin-panel-overlay { padding: .75rem .75rem 1.5rem; } .na-cabin-row { grid-template-columns: 1fr; min-height: unset; } .na-cabin-img { display: none; } .na-cabin-info { border-left: none; padding: .5rem .65rem; } .na-cabin-sessions { border-left: none; border-top: 1px solid rgba(0, 0, 0, .07); padding: .5rem .65rem; min-height: unset; } }