/* ── Map — fills entire viewport ─────────────── */ #map { position: fixed; inset: 0; z-index: 0; } /* Push Leaflet controls clear of iOS rounded corners on the sides. */ .leaflet-right { padding-right: env(safe-area-inset-right); } .leaflet-left { padding-left: env(safe-area-inset-left); } /* ── First-run intro hero ────────────────────────────────────────────────────── Full-screen takeover shown once to new visitors, then dismissed to localStorage. :root[data-hero-seen] (set synchronously in ) hides it before paint on return. */ #intro-hero { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim); backdrop-filter: blur(6px); transition: opacity .28s ease; } :root[data-hero-seen] #intro-hero { display: none !important; } #intro-hero.is-dismissing { opacity: 0; pointer-events: none; } .intro-hero-card { position: relative; width: 100%; max-width: 520px; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 32px 30px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); text-align: center; } .intro-hero-skip { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; } .intro-hero-skip:hover { background: var(--hover-tint); color: var(--text); } .intro-hero-brand { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--text-dim); } .intro-hero-brand b { color: var(--primary); } .intro-hero-title { margin: 0 0 12px; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; color: var(--text); } .intro-hero-sub { margin: 0 auto 18px; max-width: 430px; font-size: 15px; line-height: 1.5; color: var(--text-dim); } .intro-hero-trust { display: flex; align-items: flex-start; gap: 10px; margin: 0 auto 22px; padding: 13px 16px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); border-radius: 12px; font-size: 13.5px; line-height: 1.5; text-align: left; color: var(--text-dim); } .intro-hero-trust-icon { flex-shrink: 0; margin-top: 2px; color: var(--accent-fg); } .intro-hero-trust a { color: var(--accent-fg); font-weight: 600; } .intro-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 24px; } .intro-hero-stats div { padding: 12px 6px; background: var(--surface-2); border-radius: 12px; } .intro-hero-stats span { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--text); } .intro-hero-stats small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.3; color: var(--text-muted); } .intro-hero-cta { display: block; width: 100%; padding: 14px 20px; border: none; border-radius: 12px; background: var(--primary); color: var(--text-on-primary); font-size: 16px; font-weight: 700; cursor: pointer; } .intro-hero-cta:hover { background: var(--primary-hov); } .intro-hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 18px 0 0; } .intro-hero-links a { font-size: 13.5px; font-weight: 600; color: var(--accent-fg); text-decoration: none; } .intro-hero-links a:hover { text-decoration: underline; } .intro-hero-note { margin: 16px 0 0; font-size: 12px; color: var(--text-muted); } /* ── Top chip bar ─────────────────────────────── */ .topbar { position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: var(--surface-overlay); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); /* Reserve ~76px on the right of the centred topbar for the trivia FAB so the chip bar doesn't run into it on medium viewports. */ max-width: calc(100dvw - 108px); overflow-x: auto; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; min-height: 44px; background: var(--chip); border: 1px solid transparent; border-radius: 999px; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; } .chip:hover { background: var(--chip-active); } .chip.active { background: var(--chip-active); border-color: var(--accent); } .chip svg { width: 14px; height: 14px; opacity: .7; flex-shrink: 0; } .chip-all.has-filters { background: var(--accent); color: var(--text-on-primary); border-color: var(--accent); } .chip-all.has-filters:hover { background: var(--accent-hov); border-color: var(--accent-hov); } .chip-clear { padding: 6px 10px; color: var(--text-dim); } .chip-clear:hover { background: var(--chip-active); color: var(--text); } .map-control-btn { position: fixed; z-index: 500; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-overlay); backdrop-filter: blur(12px); box-shadow: var(--shadow-soft); color: var(--text-dim); cursor: pointer; font-family: inherit; transition: color .12s, border-color .12s; } .map-control-btn:hover { color: var(--text); border-color: var(--accent); } /* Theme toggle — floating circular control at bottom-left of the map. Sun/moon SVGs both live in the markup; CSS hides the inactive one based on the data-theme attribute on . Sits in the empty bottom-left corner (bottom-right has the lease/psf legend at high zoom + attribution always). */ #theme-toggle { bottom: 16px; left: 16px; } .theme-icon { width: 16px; height: 16px; opacity: 1; } /* Layers button — single button that opens the layer pill panel. */ #layers-btn { bottom: 16px; left: 60px; /* 16 (theme) + 36 (theme width) + 8 (gap) */ } /* Layer pill panel — floats above the layers button. */ #layers-panel { position: fixed; bottom: 60px; /* layers-btn bottom(16) + height(36) + gap(8) */ left: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 500; } .layer-pill { display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 44px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface-overlay); box-shadow: 0 2px 8px rgba(0,0,0,.18); color: var(--text-dim); cursor: pointer; font-size: 13px; font-family: inherit; white-space: nowrap; transition: color .12s, border-color .12s, background .12s, box-shadow .12s; } .layer-pill:hover { color: var(--text); border-color: var(--accent); } .layer-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 2px 8px rgba(0,0,0,.22); } /* ── School map markers ──────────────────────────────────────────────────────── */ .school-dot { width: 10px; height: 10px; border: 1.5px solid rgba(0,0,0,.35); } /* Primary: circle */ .school-dot-primary { background: var(--school-dot-primary); border-radius: 50%; } /* Secondary: rounded square */ .school-dot-secondary { background: var(--school-dot-secondary); border-radius: 2px; } /* JC/CI: diamond */ .school-dot-jc { background: var(--school-dot-jc); border-radius: 1px; transform: rotate(45deg); } /* Integrated Programme: rose rounded square */ .school-dot-ip { background: var(--school-dot-ip); border-radius: 3px; } /* Mixed levels: circle with different colour */ .school-dot-mixed { background: var(--school-dot-mixed); border-radius: 50%; } /* School popup badges */ .school-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; } .school-badge { font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border-soft); } .school-level-chip { font-size: 12px; padding: 2px 7px; border-radius: 4px; font-weight: 600; white-space: nowrap; vertical-align: middle; } .school-level-school-dot-primary { background: rgba(59,130,246,.2); color: #93c5fd; } .school-level-school-dot-secondary { background: rgba(139,92,246,.2); color: #c4b5fd; } .school-level-school-dot-jc { background: rgba(245,158,11,.2); color: #fcd34d; } .school-level-school-dot-ip { background: rgba(236,72,153,.18); color: #f9a8d4; } .school-level-school-dot-mixed { background: rgba(6,182,212,.2); color: #67e8f9; } .school-level-cc { background: rgba(16,185,129,.18); color: #6ee7b7; } :root[data-theme="light"] .school-level-school-dot-primary { color: #1d4ed8; } :root[data-theme="light"] .school-level-school-dot-secondary { color: #6d28d9; } :root[data-theme="light"] .school-level-school-dot-jc { color: #92400e; } :root[data-theme="light"] .school-level-school-dot-ip { color: #9d174d; } :root[data-theme="light"] .school-level-school-dot-mixed { color: #0e7490; } :root[data-theme="light"] .school-level-cc { color: #065f46; } /* School marker popup */ .school-popup { min-width: 260px; max-width: 100%; box-sizing: border-box; } /* Inside a constrained container (tooltip or building popup) let it shrink to fit */ .block-tooltip .school-popup, .leaflet-popup-content .school-popup { min-width: 0; } /* Action-only elements are useless in a non-interactive tooltip */ .block-tooltip .school-view-details-btn, .block-tooltip .cc-near-link { display: none; } .sp-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; } .sp-name { font-size: 15px; font-weight: 700; line-height: 1.3; flex: 1; min-width: 0; } .sp-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; } /* School popup action buttons */ .school-popup-actions { display: flex; flex-direction: column; gap: 8px; } .school-view-details-btn { display: block; margin-top: 0; width: 100%; padding: 7px 0; background: var(--accent-soft); color: var(--accent-fg); border: 1px solid var(--accent-soft-border); border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; min-height: 44px; } .school-view-details-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .school-popup-divider { border: none; border-top: 1px solid var(--border); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset; margin: 16px 0 12px; } .am-type-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 6px; } /* MOE designated programmes (MEP, AEP, BSP, …) */ .school-moe-programmes { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; } .school-moe-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(59,130,246,.18); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); } .school-moe-badge[data-tip] { cursor: help; } :root[data-theme="light"] .school-moe-badge { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; } /* ── School detail side panel ────────────────────────────────────────────────── */ #school-detail-panel { width: 360px; } #school-detail-title { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } #school-detail-top-row { display: flex; align-items: flex-start; gap: 8px; } #school-detail-name-group { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #school-detail-name { font-size: 15px; font-weight: 700; line-height: 1.3; } #school-detail-postal { font-size: 12px; color: var(--text-dim); } #school-detail-body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; } /* #school-detail-contact is a gap child of #school-detail-title — suppress the global cc-info-lines margin-top that would otherwise compound with that gap. */ #school-detail-contact .cc-info-lines { margin-top: 0; } .school-zone-toggle-visible #school-detail-contact { min-height: 30px; padding-right: 138px; } #school-detail-zone-toggle { position: absolute; right: 0; bottom: -1px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 4px 10px 4px 4px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface-2); color: var(--text-dim); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); font-size: 11.5px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap; } #school-detail-zone-toggle .zone-switch { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--border); transition: background .16s ease; flex: 0 0 auto; } #school-detail-zone-toggle .zone-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .28); transition: transform .16s ease; } #school-detail-zone-toggle.is-on { color: var(--accent-fg); border-color: var(--accent-soft-border); background: var(--accent-soft); } #school-detail-zone-toggle.is-on .zone-switch { background: var(--accent); } #school-detail-zone-toggle.is-on .zone-switch::after { transform: translateX(18px); } #school-detail-zone-toggle:hover { border-color: var(--accent-soft-border); color: var(--accent-fg); } .sdp-badges { margin-bottom: 8px; } .sdp-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .sdp-section:first-child { margin-top: 0; border-top: none; padding-top: 0; } .sdp-section-label { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--text-dim); margin-bottom: 8px; } /* Mother tongue chips in school detail panel */ /* CCA list in school detail panel */ .sdp-cca-list { display: flex; flex-direction: column; gap: 12px; } .sdp-cca-group { display: flex; flex-direction: column; } .sdp-cca-cat-header { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .sdp-cca-count { font-size: 11px; font-weight: 500; padding: 1px 6px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; color: var(--text-dim); } .sdp-cca-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .sdp-cca-item { font-size: 12px; color: var(--text-dim); padding: 3px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-soft); } /* ALP/LLP in school detail panel */ .sdp-alp-llp { display: flex; flex-direction: column; gap: 8px; } .school-prog-row { font-size: 13px; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; border: 1px solid var(--border-soft); } .school-prog-label { display: inline-block; font-size: 10px; font-weight: 700; color: var(--accent-fg); background: var(--accent-soft); border: 1px solid var(--accent-soft-border); border-radius: 3px; padding: 0 4px; margin-right: 5px; } .school-prog-domain { font-weight: 600; color: var(--text); } .school-prog-title { color: var(--text-dim); font-size: 12px; margin-top: 3px; padding-left: 2px; } :root[data-theme="dark"] #theme-toggle .theme-icon-sun { display: none; } :root[data-theme="light"] #theme-toggle .theme-icon-moon { display: none; } /* ── PWA install button + iOS tooltip ──────────────────────────────────────── Button sits directly above the theme toggle (bottom: 60px = 16 + 36 + 8). Tooltip card anchors bottom-left, pointing toward the button. */ #pwa-install-btn { bottom: 60px; left: 16px; } #pwa-install-tooltip { position: fixed; bottom: 104px; left: 16px; z-index: 501; width: 220px; padding: 14px 14px 12px; background: var(--surface-overlay); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } #pwa-install-tip-close { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; } #pwa-install-tip-close:hover { color: var(--text); background: var(--hover-tint); } .pwa-tip-title { margin: 0 0 8px; font-size: .85rem; font-weight: 600; color: var(--text); } .pwa-tip-steps { margin: 0; padding-left: 18px; font-size: .8rem; color: var(--text-dim); line-height: 1.6; } .pwa-tip-steps li { margin-bottom: 2px; } .pwa-tip-share-icon { vertical-align: middle; margin: 0 1px; } /* ── Floating search ────────────────────────────── FAB sits outside the topbar (so its dropdown isn't clipped by topbar overflow). Collapsed = circular lens button. Expanded = a 320px input + dropdown panel. */ .search-fab { position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 16px; z-index: 11; } .floating-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--surface-overlay); backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer; } .search-fab-btn { color: var(--text); transition: background .15s, border-color .15s; } .search-fab-btn:hover { background: var(--chip-active); border-color: var(--accent); } .search-panel { display: none; position: relative; } .search-fab.open .search-fab-btn { display: none; } .search-fab.open .search-panel { display: block; } .search-field { display: flex; align-items: center; gap: 8px; width: 320px; height: 44px; padding: 0 12px; background: var(--surface-overlay); backdrop-filter: blur(12px); border: 1px solid var(--accent); border-radius: 999px; box-shadow: var(--shadow); } .search-field .search-icon { opacity: .65; flex-shrink: 0; } #search-input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 13px; font-family: inherit; } #search-input::placeholder { color: var(--text-muted); } /* Strip the native search-input X (we render our own .search-clear). */ #search-input::-webkit-search-cancel-button, #search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .search-clear { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 999px; } .search-clear:hover { background: var(--hover-tint); color: var(--text); } #search-results { position: absolute; top: calc(100% + 6px); left: 0; width: 320px; max-height: 60dvh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); z-index: 20; padding: 4px; } .search-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; min-height: 44px; } .search-row:hover, .search-row.active { background: var(--chip-active); } .search-row-text { flex: 1; min-width: 0; } .search-row-title { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-row-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .search-pill { flex-shrink: 0; padding: 2px 8px; font-size: 10px; font-weight: 600; letter-spacing: .04em; border-radius: 999px; text-transform: uppercase; } .search-pill[data-type="hdb"] { background: var(--pill-hdb-bg); color: var(--pill-hdb-fg); } .search-pill[data-type="condo"] { background: var(--pill-condo-bg); color: var(--pill-condo-fg); } .search-pill[data-type="bus"] { background: var(--pill-bus-bg); color: var(--pill-bus-fg); } .search-pill[data-type="mrt"] { background: var(--pill-mrt-bg); color: var(--pill-mrt-fg); } .search-pill[data-type="school"] { background: var(--pill-school-bg); color: var(--pill-school-fg); } .search-pill[data-type="childcare"] { background: var(--pill-childcare-bg); color: var(--pill-childcare-fg); } .search-pill[data-type="hospital"] { background: var(--pill-hospital-bg); color: var(--pill-hospital-fg); } .search-pill[data-type="shopping"] { background: var(--pill-shopping-bg); color: var(--pill-shopping-fg); } .search-pill[data-type="hotel"] { background: var(--pill-hotel-bg); color: var(--pill-hotel-fg); } .search-pill[data-type="religious"] { background: var(--pill-religious-bg); color: var(--pill-religious-fg); } .search-pill[data-type="place"] { background: var(--pill-place-bg); color: var(--text-dim); } .search-empty { padding: 14px 12px; font-size: 12px; color: var(--text-muted); text-align: center; } /* ── Result cluster: counts folded into the List button ── */ .results-cluster { display: inline-flex; align-items: center; } /* Tighter padding than .chip default since the inner two-line count already gives the button visual weight; keeps the chip from dominating the bar. */ .chip-results { padding: 4px 10px; gap: 8px; } #results-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; font-size: 11px; color: var(--text-dim); } #results-text strong { color: var(--accent); font-weight: 700; font-size: 12px; margin-right: 2px; } .rc-line { white-space: nowrap; }