/* public/css/app-shell.css STAP 2B -- publieke app-ervaring en look & feel. Deliberately a SEPARATE stylesheet, loaded only by public/index.html (never by public/admin.html). public/css/styles.css is not touched by this file or by this correction round at all -- so the admin environment, which loads only styles.css, is visually and functionally guaranteed untouched. This file freely reuses existing component classes from styles.css where they already fit (.card, .tag, .chip, .qstatus, .overlay/.sheet, form styles) and only adds NEW rules on top for the public app shell: the SANAUNDA/NA-accent wordmark, the idle/results start-screen behaviour, the mobile bottom sheet, and the list/map toggle. Nothing here redefines a selector that also exists in styles.css -- new, app-shell-prefixed class names only, so cascade order between the two files never matters. */ :root { /* A warmer, slightly more Caribbean-leaning extension of the existing brand tokens in styles.css (--pink/--ink/--bg etc, which stay exactly as they are for the admin environment). These are additive, new tokens -- nothing here overrides an existing --variable name. */ --sa-fuchsia: #E6007E; --sa-anthracite: #171417; --sa-ink-soft: #3a3439; --sa-off-white: #fbf6f1; --sa-aqua: #dff2ef; --sa-aqua-deep: #2f8f86; --sa-sand: #f6ece0; --sa-line: #ece3da; --sa-shadow: 0 18px 50px rgba(49, 21, 34, 0.12); --sa-shadow-soft: 0 6px 20px rgba(49, 21, 34, 0.08); --sa-radius-lg: 26px; --sa-radius-md: 18px; --sa-radius-sm: 12px; --sa-safe-top: env(safe-area-inset-top, 0px); --sa-safe-bottom: env(safe-area-inset-bottom, 0px); } /* ========================================================================== App shell base ========================================================================== */ #appShell { background: linear-gradient(180deg, var(--sa-off-white), #fff 340px); min-height: 100dvh; } /* ========================================================================== Sticky chrome -- header + search bar + suggestions travel together as one sticky block, always visible in both idle and results state (only the big hero mark and the idle-only extras below toggle). "Beheer" is deliberately NOT in here (section 21): the admin route still exists and works, it is just not a prominent link in the public interface any more -- a small, muted link remains in the footer only, so it stays reachable without competing with the search experience. app.js measures this block's real rendered height (it changes with language, viewport width and idle-vs-results state) and writes it into --sa-chrome-h, which .saMapStage's full-bleed results-mode layer (below) uses as its top offset -- more robust than a guessed fixed pixel value. ========================================================================== */ .saStickyChrome { position: sticky; top: 0; z-index: 40; background: rgba(251, 246, 241, 0.92); backdrop-filter: blur(14px); padding-top: var(--sa-safe-top); border-bottom: 1px solid var(--sa-line); } .saHeaderRow { max-width: 1180px; margin: auto; padding: 14px 16px 4px; display: flex; align-items: flex-start; gap: 10px; } .saHeaderRow .spacer { flex: 1; } /* ========================================================================== Wordmark -- ONE single element (#brandMark), reused as-is in both idle and results state -- not two separate logo instances -- so there is never a risk of two marks rendering at once. Only its SIZE and layout change with #appShell[data-state], via CSS custom properties, not new markup: idle = big and centred with "by ECHT.BON" visible underneath (section 10's start-screen order); results = small and left-aligned, sub-line hidden, sitting inline with the language switch (matches a normal compact app header once actively searching). "Harde merkregel": the fuchsia accent sits under the FIRST "NA" (letters 3-4 of SANAUNDA), never under any other pair. Built by splitting config.brand.product_name into one per letter (renderBrandmark() in app.js) so this stays correct even though the name itself stays config-driven, not hardcoded. Sizing is done entirely in em/relative units off the element's own font-size (set via --sa-mark-size below), so the accent tracks the 3rd/4th letters at any element size -- no fixed-pixel offsets that could land under the wrong letters on a different screen width. Verified at 4 breakpoints, see STAP2B_REPORT.md. ========================================================================== */ .saMark { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; font-size: 22px; /* results-state / default size */ transition: font-size .18s ease; text-decoration: none; color: inherit; /* #brandMark is an ; undo the browser's default link underline/color */ } .saMarkWord { display: inline-flex; font-weight: 900; letter-spacing: -0.01em; color: var(--sa-anthracite); } .saMarkWord .saLetter { display: inline-block; } /* STAP 2B.1 section 1: the accent under the first "NA" (letters 3-4 of the product name) must be a soft half-arc ("smile"), never a straight line, never under the wrong letter pair, and never at a fixed pixel position that could drift on a different screen. Built as an inline SVG (see renderBrandmark() in app.js) sized with width:100%/height:auto against its own viewBox -- exactly like a responsive image -- so it always scales together with the two letters it sits under, at any viewport width or idle/results .saMark font-size. Verified at 320/390/820/1440px, see STAP2B1_REPORT.md section I. */ .saMarkWord .saAccentPair { position: relative; display: inline-flex; padding-bottom: 0.3em; } .saAccentArc { display: block; position: absolute; left: 0; bottom: -0.08em; width: 100%; height: 0.34em; overflow: visible; } .saAccentArc path { fill: none; stroke: var(--sa-fuchsia); stroke-width: 9; stroke-linecap: round; } /* STAP 2B correction round: text-transform: uppercase used to run here, which visually turned the required "by ECHT.BON" into "BY ECHT.BON" -- the brief requires the literal lowercase "by" to be what's shown, not just what's in the markup. Removed. The modest letter-spacing (0.06em) is kept only as a subtle secondary-label touch; on lowercase text it no longer causes the "by" -> "B Y" splitting that the earlier uppercase version had. */ .saMarkSub { margin-top: 10px; font-size: 0.28em; font-weight: 800; letter-spacing: 0.06em; color: var(--sa-ink-soft); opacity: 0.82; display: none; } /* Idle state: big, centred, with the "by ECHT.BON" sub-line visible -- this is the section-10 start screen presentation. */ #appShell[data-state="idle"] .saHeaderRow { flex-direction: column; align-items: center; padding-top: 22px; } #appShell[data-state="idle"] .saHeaderRow .spacer { display: none; } #appShell[data-state="idle"] .saHeaderRow .saLangSwitch { margin-top: 14px; } #appShell[data-state="idle"] .saMark { font-size: clamp(40px, 11vw, 72px); align-items: center; } #appShell[data-state="idle"] .saMarkSub { display: block; } /* .saMarkSub carries its own letter-spacing (0.06em, for a subtle secondary- label feel) -- but that would visually pull the "." away from the "T" in ECHT.BON, which the brief explicitly forbids. So the owner-brand text itself ("ECHT.BON") is wrapped in its own span with letter-spacing reset to 0, overriding the parent -- the "by " prefix keeps the (small) spaced feel, the "T." junction never gets pulled apart. */ .saMarkSub .saOwnerBrand { letter-spacing: 0; } /* MINI-CORRECTIE STARTVRAAG ZICHTBAAR MAKEN: #pageH1 already held the correct config/i18n tagline text ("Wat zoek je op Bonaire?" / PAP / EN -- see applyTagline() in app.js), it just carried the sr-only class, which hid it from sighted visitors. That class is removed from the element in index.html; this rule is the only styling it needs to read as a quiet, secondary line under the wordmark -- not a heavy page title -- directly above the search bar. #qLabel (the 's real