/* layout-guidelines.css — Subtle UX polish for TourBuddy solo PWA Laatst aangepast: v1.3.2 — 2026-07-28 Guidelines = small accessibility and readability improvements on top of Classic (same dark glass, Outfit font, gold accent). Not a separate visual redesign. Only applies when has class "layout-guidelines". Classic layout stays in style.css + solo-extra.css (unchanged). Toggle via app_settings key solo_ui_layout = classic | guidelines. */ html.layout-guidelines { /* HSL tokens closely matching Classic — slightly brighter muted text for outdoor use */ --bg: hsl(222 47% 7%); --bg-mid: hsl(222 38% 11%); --bg-card: hsl(222 32% 16%); --glass-bg: hsl(0 0% 100% / 0.05); --glass-border: hsl(0 0% 100% / 0.1); --gold: hsl(38 92% 50%); --gold-light: hsl(43 96% 62%); --gold-dark: hsl(32 95% 44%); --green: hsl(160 84% 39%); --red: hsl(0 84% 58%); --text: hsl(210 40% 98%); --text-muted: hsl(215 22% 72%); --text-dim: hsl(215 16% 52%); --border: hsl(0 0% 100% / 0.08); --link: hsl(43 96% 62%); --success-muted: hsl(160 84% 39% / 0.12); --danger-muted: hsl(0 84% 58% / 0.12); --prose-max: 65ch; --touch-min: 44px; color-scheme: dark; } html.layout-guidelines body { line-height: 1.6; } /* Keyboard focus — clearer ring without changing resting appearance */ html.layout-guidelines :focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; } html.layout-guidelines .btn:focus-visible, html.layout-guidelines .quiz-option:focus-visible, html.layout-guidelines .tour-card:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; } /* Text links only — tour cards and buttons keep their own styling */ html.layout-guidelines a:not(.btn):not(.tour-card) { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 2px; } html.layout-guidelines a:not(.btn):not(.tour-card):hover { color: var(--accent-light); } /* Touch targets — same visual weight as Classic, minimum 44px hit area */ html.layout-guidelines .btn { min-height: var(--touch-min); } html.layout-guidelines .btn:active { transform: scale(0.98); } html.layout-guidelines .badge { background: hsl(38 92% 50% / 0.14); border-color: hsl(38 92% 50% / 0.25); color: hsl(43 75% 82%); } html.layout-guidelines input, html.layout-guidelines textarea, html.layout-guidelines select { min-height: var(--touch-min); } html.layout-guidelines input:focus-visible, html.layout-guidelines textarea:focus-visible, html.layout-guidelines select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Quiz — 12px gap (8px scale), touch-friendly, keep Classic glass look */ html.layout-guidelines .quiz-options { gap: 12px; } html.layout-guidelines .quiz-option { min-height: var(--touch-min); } /* Chrome FABs — stay circular like Classic; no text labels */ html.layout-guidelines .sync-btn, html.layout-guidelines .presentation-mode-btn, html.layout-guidelines .help-btn, html.layout-guidelines .nav-map-compass { min-width: var(--touch-min); min-height: var(--touch-min); } /* Long-form content — readable line length; does not affect tour card titles */ html.layout-guidelines .location-content p, html.layout-guidelines .content-page-body p, html.layout-guidelines .intro-block p { max-width: var(--prose-max); line-height: 1.65; } html.layout-guidelines .location-content strong, html.layout-guidelines .content-page-body strong { color: var(--text); } /* Home footer links — consistent link colour and touch target */ html.layout-guidelines .home-show-all-tours-link, html.layout-guidelines .home-legal-links a { color: var(--link); min-height: var(--touch-min); display: inline-flex; align-items: center; padding: 8px 4px; } html.layout-guidelines .home-show-all-tours-link:hover, html.layout-guidelines .home-show-all-tours-link:focus-visible, html.layout-guidelines .home-legal-links a:hover, html.layout-guidelines .home-legal-links a:focus-visible { color: var(--accent-light); } /* Prevent background bleed on location photos (Refactoring UI) */ html.layout-guidelines .location-photo { overflow: hidden; box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.06); } html.layout-guidelines .location-photo img, html.layout-guidelines .slideshow-img, html.layout-guidelines .spot-diff-img { object-fit: cover; } @media (prefers-reduced-motion: reduce) { html.layout-guidelines *, html.layout-guidelines *::before, html.layout-guidelines *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }