:root { --bg: #0a0d0c; --surface: #111614; --surface-2: #161d1a; --surface-3: #1d2723; --line: #243029; --text: #f2f5f3; --muted: #8a9690; --faint: #5f6c66; --accent: #2fe08a; --accent-dim: #1f7d52; --accent-ink: #04130c; --star: #ffce4d; --danger: #ff6b6b; --radius: 20px; } /* Light theme - applied when . Dark is the default above. */ body.light { --bg: #eef1ef; --surface: #ffffff; --surface-2: #f1f4f2; --surface-3: #e5eae7; --line: #dce2df; --text: #101615; --muted: #586660; --faint: #93a09a; --accent: #0fa564; --accent-dim: #0c7d4c; --accent-ink: #ffffff; --star: #e0a200; } body.light { background: radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, #e9eeec 55%, #dde4e0 100%); } body.light .phone { box-shadow: 0 30px 80px rgba(40,60,50,.18), 0 0 0 10px #e7ece9, 0 0 0 11px #d3dbd7; } body.light .tabbar { background: rgba(255,255,255,.9); } body.light .leaflet-container { background: #e8edea; } body.light .map-pill { background: rgba(255,255,255,.86); color: var(--text); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: #05060500; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; padding-top: 62px; /* clears the fixed navbar */ } /* ---------- Top navbar ---------- */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; height: 62px; display: flex; align-items: center; gap: 18px; } .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; } .brand-mark { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent); /* the silhouette follows the theme accent */ } .brand-mark svg { width: 30px; height: 30px; display: block; } .brand-name { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -.2px; } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .themebtn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); display: grid; place-items: center; font-family: inherit; } .themebtn:hover { background: var(--surface-3); } .themebtn svg { width: 18px; height: 18px; display: block; } /* ---------- App shell ---------- */ .app { position: relative; flex: 1 1 auto; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; min-height: 0; } /* ---------- Header ---------- */ .header { flex: 0 0 auto; padding: 20px 0 10px; z-index: 5; } .hrow { display: flex; align-items: center; gap: 12px; } .hrow .htitle { flex: 1; text-align: left; } @media (max-width: 640px) { .hrow .htitle { text-align: center; } } .hrow .htitle h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .2px; } .hrow .htitle .sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .iconbtn { width: 40px; height: 40px; flex: 0 0 40px; border: none; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 17px; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .1s; } .iconbtn:active { transform: scale(.92); } .iconbtn.ghost { background: transparent; } .bighead { padding-top: 4px; } .bighead h1 { font-size: 26px; margin: 0 0 2px; font-weight: 800; letter-spacing: -.3px; } .bighead .sub { color: var(--muted); font-size: 13px; } /* Search */ .search { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; margin-top: 12px; } .search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 15px; } .search input::placeholder { color: var(--faint); } .search .si { color: var(--faint); font-size: 15px; } /* Filter chips */ .chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 2px; margin: 0 -2px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: all .15s; } /* --bg flips with the theme, so the label stays readable on the inverted pill. (A hardcoded dark colour here went black-on-black in light mode.) */ .chip.active { background: var(--text); color: var(--bg); border-color: var(--text); } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } /* Sub-sport filter row (Padel / Tennis / … within a category) */ .subchips { padding-top: 8px; } .chip.sub { font-weight: 600; padding: 7px 12px; } .chip.sub .cn { color: var(--faint); font-weight: 700; font-size: 11px; margin-left: 2px; } .chip.sub.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .chip.sub.active .cn { color: var(--accent-ink); opacity: .7; } .chip.sub.clear { color: var(--muted); background: transparent; } /* ---------- Screen scroller ---------- */ /* position:relative so the absolutely-positioned map fills the screen area only - without it the map anchors to .phone and covers the header. */ /* Cards flow into columns on wider screens; everything else (headings, the cost box, empty states) spans the full width. */ .screen { position: relative; flex: 1 1 auto; padding: 0 0 56px; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-content: start; } .screen > *:not(.card):not(.jcard):not(.qres) { grid-column: 1 / -1; } /* equal-height cards with their call-to-action lined up along the row */ .screen > .card, .screen > .jcard, .screen > .qres { margin-top: 0; display: flex; flex-direction: column; } .screen > .card > .body, .screen > .jcard { flex: 1 1 auto; display: flex; flex-direction: column; } .screen > .card .foot, .screen > .jcard .jrow { margin-top: auto; } /* ---------- Explore ---------- */ .section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 2px 12px; } .section-h h2 { font-size: 17px; margin: 0; font-weight: 700; } .section-h .count { font-size: 12px; color: var(--faint); } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } /* Narrow screens keep the compact two-up cards rather than letting a single column stretch each one across the full width. */ @media (max-width: 760px) { .cat-grid { grid-template-columns: 1fr 1fr; } } .cat-card { position: relative; border-radius: 18px; padding: 14px; min-height: 116px; border: 1px solid var(--line); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; transition: transform .12s, border-color .15s; } .cat-card:active { transform: scale(.97); } .cat-card .emoji { font-size: 30px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); } .cat-card .cname { font-size: 15px; font-weight: 700; margin-top: 8px; } .cat-card .cmeta { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; } .cat-card .glow { position: absolute; inset: 0; opacity: .9; z-index: -1; background: radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--g1) 33%, transparent) 0%, color-mix(in srgb, var(--g2) 93%, transparent) 70%, #0d1311 100%); } /* ---------- Venue cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; overflow: hidden; transition: transform .12s; } .card:active { transform: scale(.99); } .card .media { background: linear-gradient(140deg, var(--g1) 0%, var(--g2) 100%); position: relative; height: 130px; padding: 12px; display: flex; align-items: flex-start; justify-content: space-between; overflow: hidden; } /* Per-sport line-art motif drawn faintly behind the emoji */ .media .art, .hero .art { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; opacity: .26; pointer-events: none; } .card .media .big-emoji { position: absolute; right: 14px; bottom: 8px; font-size: 46px; opacity: .9; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); } /* The pill sits on the coloured card art and keeps a dark background in both themes, so its text is fixed light rather than theme-dependent. */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; background: rgba(7,12,10,.72); backdrop-filter: blur(6px); padding: 6px 11px; border-radius: 999px; color: #f2f5f3; } .badge .dot { width: 7px; height: 7px; border-radius: 50%; } .badge.open .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); } .badge.closed { color: #b6c0ba; } .badge.closed .dot { background: var(--faint); } .fav { width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(7,12,10,.72); backdrop-filter: blur(6px); color: #fff; font-size: 17px; cursor: pointer; display: grid; place-items: center; } .fav.on { color: var(--accent); } .card .body { padding: 13px 15px 15px; } .card .body .line-free { color: var(--accent); font-size: 12.5px; font-weight: 600; margin: -2px 0 8px; } .card .body h3 { margin: 0 0 7px; font-size: 17px; font-weight: 700; letter-spacing: -.2px; } .meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .meta .star { color: var(--star); } .meta .sep { color: var(--faint); } .tags { color: var(--faint); font-size: 12.5px; margin-top: 7px; } /* Points at the same organisation in the other lens, so a repeated name reads as one place seen two ways rather than a duplicate. */ .xlens { display: block; width: 100%; text-align: left; margin-top: 10px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 10px; padding: 8px 10px; } body.light .xlens { color: var(--accent-dim); } .card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); } .price .k { font-size: 10px; letter-spacing: 1px; color: var(--faint); text-transform: uppercase; } .price .v { font-size: 18px; font-weight: 800; } .price .v small { font-size: 12px; font-weight: 600; color: var(--muted); } .price.none .v { font-size: 13px; font-weight: 600; color: var(--muted); } .btn { border: none; border-radius: 999px; padding: 11px 17px; font-size: 14px; font-weight: 700; background: var(--accent); color: var(--accent-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform .1s, filter .15s; } .btn:active { transform: scale(.95); } .btn.sec { background: var(--surface-3); color: var(--text); } .btn[disabled] { opacity: .5; } /* ---------- Places / Get started mode bar ---------- */ .modebar { display: flex; gap: 6px; padding: 10px 0 0; } .seg { flex: 1; text-align: center; padding: 9px 0; border-radius: 11px; font-size: 13.5px; font-weight: 600; font-family: inherit; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); cursor: pointer; transition: .15s; } .seg.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .helper { padding: 9px 2px 2px; font-size: 12.5px; color: var(--muted); } /* "Get started" badge on an explore category card */ .cat-join { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .4px; padding: 4px 8px; border-radius: 7px; cursor: pointer; background: rgba(7,12,10,.55); color: #fff; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.22); } body.light .cat-join { background: rgba(255,255,255,.72); color: #0d1a14; border-color: rgba(0,0,0,.12); } /* ---------- "What it costs to start" box ---------- */ .costbox { display: block; width: 100%; margin-top: 14px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; font-family: inherit; color: var(--text); } .costbox.closed { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; } .cb-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px 10px; background: none; border: none; font-family: inherit; color: var(--text); cursor: pointer; } .cb-ico { font-size: 17px; flex: 0 0 auto; } .cb-lead { font-size: 14px; font-weight: 700; } .cb-sum { margin-left: auto; font-size: 12.5px; color: var(--accent); font-weight: 700; } body.light .cb-sum { color: var(--accent-dim); } .cb-chev { color: var(--faint); font-size: 12px; margin-left: 8px; } .costbox.closed .cb-chev { margin-left: 0; } .cb-row { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 13.5px; } .cb-item { color: var(--text); } .cb-note { color: var(--faint); font-size: 11.5px; } .cb-price { flex: 0 0 auto; text-align: right; font-weight: 700; font-size: 13.5px; white-space: nowrap; } .cb-typ { display: block; font-weight: 600; font-size: 11px; color: var(--faint); } /* "pick one" group - options, not a shopping list */ .cb-pickhead .cb-item { font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--faint); } .cb-pickhead { padding-bottom: 2px; } .cb-pick { border-top: none; padding-top: 3px; padding-bottom: 5px; } .cb-pick .cb-item::before { content: "◦ "; color: var(--faint); } .cb-alsohead .cb-item { font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--faint); } .cb-alsohead { padding-bottom: 2px; } .cb-also { border-top: none; padding-top: 2px; padding-bottom: 6px; } .cb-also .cb-item, .cb-also .cb-price { color: var(--muted); font-weight: 600; } .cb-total { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); font-weight: 600; } .cb-tot-sub { display: block; font-size: 11px; font-weight: 600; color: var(--faint); margin-top: 2px; } .cb-tot-v { font-size: 17px; font-weight: 800; color: var(--accent); white-space: nowrap; padding-left: 10px; } body.light .cb-tot-v { color: var(--accent-dim); } .cb-none { padding: 4px 14px 10px; font-size: 13.5px; color: var(--text); } .cb-tip { margin: 0 14px 10px; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 12.5px; line-height: 1.45; color: var(--text); } /* fine print, but still has to be readable - --faint fell under 3:1 */ .cb-src { padding: 0 14px 13px; font-size: 11.5px; line-height: 1.5; color: var(--muted); } .cb-src a { color: var(--muted); } /* ---------- Join ("way in") cards ---------- */ .jcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; padding: 15px 15px 13px; position: relative; } .jtag { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .7px; padding: 5px 10px; border-radius: 7px; text-transform: uppercase; } .t-league { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .t-trial { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .t-finder { background: rgba(91,127,214,.16); color: #8fb0ff; } .t-community { background: rgba(200,120,220,.16); color: #cd94e0; } .t-fed { background: var(--surface-3); color: var(--muted); } body.light .t-finder { background: rgba(58,96,190,.12); color: #2f57ac; } body.light .t-community { background: rgba(150,70,180,.12); color: #7d3596; } /* Accent text on a faint accent tint is too pale against a white surface - use the darker accent in light mode so these stay legible. */ body.light .seg.active, body.light .qr-reason .pt, body.light .qr-why, body.light .t-league, body.light .t-trial { color: var(--accent-dim); } .jheart { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border: none; background: none; color: var(--faint); font-size: 16px; cursor: pointer; } .jheart.on { color: var(--accent); } .jname { color: var(--text); font-size: 17px; font-weight: 700; margin-top: 11px; padding-right: 30px; } .jdesc { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.45; } .jloc { color: var(--faint); font-size: 12.5px; margin-top: 8px; } .jrow { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 13px; padding-top: 12px; gap: 10px; } .jrow .lbl { font-size: 10px; color: var(--faint); letter-spacing: 1px; text-transform: uppercase; } .jrow .lbl b { display: block; color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: 0; margin-top: 3px; text-transform: none; } /* ---------- Quiz ---------- */ .quizcard { display: flex; align-items: center; gap: 13px; cursor: pointer; margin-top: 20px; padding: 15px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); transition: transform .12s; } .quizcard:active { transform: scale(.98); } .qc-emoji { font-size: 26px; flex: 0 0 auto; } .qc-title { font-size: 15.5px; font-weight: 700; } .qc-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; } .qc-go { margin-left: auto; color: var(--accent); font-size: 22px; font-weight: 700; } .qprog { height: 4px; border-radius: 2px; background: var(--surface-3); margin-top: 12px; overflow: hidden; } .qprog span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .25s; } .qwrap { padding-top: 18px; } .qprompt { font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.3px; line-height: 1.25; } .qhint { font-size: 12.5px; color: var(--faint); margin-bottom: 4px; } .qopts { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; } .qopt { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 15px; border-radius: 14px; font-size: 15px; font-weight: 600; font-family: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--line); cursor: pointer; transition: .14s; } .qopt:active { transform: scale(.99); } .qopt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); } .qbox { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; color: var(--accent-ink); background: var(--surface-2); } .qopt.on .qbox { background: var(--accent); border-color: var(--accent); } .qnext { width: 100%; justify-content: center; margin-top: 18px; padding: 15px; } .qres { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 15px; margin-top: 13px; } .qres.top { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .qr-head { display: flex; align-items: center; gap: 10px; } .qr-emoji { font-size: 22px; } .qr-name { font-size: 16px; font-weight: 700; flex: 1; } .qr-best { display: block; font-size: 10.5px; font-weight: 700; color: var(--accent); letter-spacing: .5px; text-transform: uppercase; margin-top: 2px; } .qr-pct { font-size: 18px; font-weight: 800; color: var(--accent); } .qr-bar { height: 6px; border-radius: 3px; background: var(--surface-3); margin: 11px 0 13px; overflow: hidden; } .qr-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .qr-go { width: 100%; justify-content: center; } /* "Why this?" breakdown on a result */ .qr-why { border: none; background: none; font-family: inherit; cursor: pointer; padding: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--accent); letter-spacing: .2px; } .qr-reasons { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; } .qr-reason { display: flex; align-items: baseline; gap: 9px; font-size: 13px; color: var(--text); padding: 4px 0; } .qr-reason .pt { flex: 0 0 auto; min-width: 26px; text-align: center; font-size: 11px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 6px; padding: 2px 5px; } .qr-total { font-size: 11.5px; color: var(--faint); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); } .qr-note { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; line-height: 1.45; } /* "How we got here" recap */ .qrecap { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-top: 18px; } .qrecap-h { font-size: 16px; font-weight: 800; } .qrecap-lead { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 6px 0 0; } .qrecap-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--faint); margin: 16px 0 6px; } .qrecap-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; } .qrecap-row:last-child { border-bottom: none; } .qrecap-row .k { flex: 1; color: var(--muted); line-height: 1.4; } .qrecap-row .v { flex: 0 0 46%; text-align: right; color: var(--text); font-weight: 600; line-height: 1.4; } .qrecap-row.out .v { color: var(--danger); font-weight: 600; } .qr-missing { font-size: 12.5px; color: var(--faint); } .qretake { width: 100%; justify-content: center; margin-top: 18px; padding: 14px; } /* Empty / hint states */ .empty { text-align: center; color: var(--muted); padding: 60px 24px; } .empty .e-emoji { font-size: 40px; opacity: .6; } .empty h3 { margin: 14px 0 6px; color: var(--text); font-weight: 700; } .hint { font-size: 12px; color: var(--faint); text-align: center; padding: 14px 10px 0; } /* ---------- Detail sheet ---------- */ /* Layering: above .navbar (z-index 60). The sheet is a modal dialog, so the navigation must sit behind it - otherwise the top 62px of the screen stays clickable through the "modal" and does not dismiss it. Both are fixed, not absolute. They used to be absolute inside .app, which is position:relative and as tall as all 400-odd cards - so "bottom: 0" meant the bottom of the document, and opening a venue put the sheet thousands of pixels below the fold. Fixed pins them to the viewport, which is what a bottom sheet has always meant. */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .2s; } .sheet-backdrop.show { opacity: 1; pointer-events: auto; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; /* centred and bounded on a wide screen; edge to edge on a phone */ margin-inline: auto; max-width: 560px; background: var(--surface); border-radius: 26px 26px 0 0; border-top: 1px solid var(--line); transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); max-height: 86vh; display: flex; flex-direction: column; } .sheet.show { transform: translateY(0); } /* The page behind must not scroll while the sheet is up - on a phone the scroll would otherwise run away underneath your finger. */ body.sheet-open { overflow: hidden; } .sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 10px auto 4px; flex: 0 0 auto; } .sheet .sheet-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .sheet .sheet-close:hover { color: var(--text); border-color: var(--muted); } .sheet .sheet-scroll { overflow-y: auto; padding: 8px 20px 26px; } .sheet .hero { background: linear-gradient(140deg, var(--g1), var(--g2)); height: 120px; border-radius: 16px; position: relative; overflow: hidden; display: grid; place-items: center; margin-bottom: 14px; } .sheet .hero .big-emoji { font-size: 56px; opacity: .9; } .sheet h2 { margin: 4px 0 6px; font-size: 22px; font-weight: 800; } .sheet .addr { color: var(--muted); font-size: 13.5px; line-height: 1.5; } .kv { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .kv .kvi { width: 22px; text-align: center; color: var(--faint); } .kv .kvk { color: var(--muted); width: 88px; flex: 0 0 88px; } .kv .kvv { color: var(--text); flex: 1; } .kv a.kvv { color: var(--accent); text-decoration: none; word-break: break-word; } .hours { margin: 6px 0 2px; } .hours .hr { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; } .hours .hr.today { color: var(--text); font-weight: 700; } .hours .hr .d { color: var(--muted); } .hours .hr.today .d { color: var(--accent); } .sheet-actions { display: flex; gap: 10px; margin: 16px 0 4px; } .sheet-actions .btn { flex: 1; justify-content: center; padding: 14px; } /* ---------- Map ---------- */ #mapEl { position: absolute; inset: 0; } .leaflet-container { background: #0c100e; font-family: inherit; } .leaflet-popup-content-wrapper { background: var(--surface-2); color: var(--text); border-radius: 12px; } .leaflet-popup-tip { background: var(--surface-2); } .leaflet-popup-content { margin: 12px 14px; } .pop b { font-size: 14px; } .pop .pm { color: var(--muted); font-size: 12px; margin-top: 3px; } .pop a { color: var(--accent); text-decoration: none; font-size: 12px; font-weight: 700; display: inline-block; } .popacts { display: flex; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } /* sport filter chips above the map */ .mapchips { padding-top: 10px; padding-bottom: 2px; } .mapchips .chip { font-size: 12.5px; } .mapchips .chip .cn { color: var(--faint); font-weight: 700; font-size: 11px; margin-left: 2px; } .mapchips .chip.active .cn { color: var(--accent-ink); opacity: .7; } /* In normal flow with an explicit height, so the map can never overlap the navigation the way an absolutely-positioned one did. */ .map-wrap { position: relative; /* own stacking context: Leaflet's controls go up to z-index 1000 and would otherwise paint over the fixed navbar */ z-index: 0; isolation: isolate; height: calc(100vh - 200px); min-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); } /* Fallback basemaps have no dark style - darken the tiles, not the markers. */ .map-wrap.map-dim .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.75); } /* Leaflet's zoom buttons, themed */ .leaflet-control-zoom a { background: var(--surface-2); color: var(--text); border-color: var(--line); font-weight: 700; } .leaflet-control-zoom a:hover { background: var(--surface-3); color: var(--text); } .leaflet-control-attribution { background: rgba(7,12,10,.7); color: var(--muted); font-size: 10px; } .leaflet-control-attribution a { color: var(--muted); } body.light .leaflet-control-attribution { background: rgba(255,255,255,.78); } .map-pill.warn { color: var(--danger); } .map-pill { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500; background: rgba(7,12,10,.82); backdrop-filter: blur(8px); border: 1px solid var(--line); color: var(--text); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; } /* ---------- Profile ---------- */ .profile { padding-top: 8px; } .profile .avatar { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dim)); display: grid; place-items: center; font-size: 32px; color: var(--accent-ink); margin: 8px auto 10px; font-weight: 800; } .profile .pname { text-align: center; font-size: 19px; font-weight: 700; } .profile .pmail { text-align: center; color: var(--muted); font-size: 13px; margin-top: 2px; } .stat-row { display: flex; gap: 10px; margin: 18px 0; } .stat { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; text-align: center; } .stat .n { font-size: 22px; font-weight: 800; } .stat .l { font-size: 11px; color: var(--muted); margin-top: 2px; } .list-row { display: flex; align-items: center; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; } .list-row .li { width: 24px; text-align: center; color: var(--faint); } .list-row .chev { margin-left: auto; color: var(--faint); } .switch { width: 46px; height: 27px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); position: relative; flex: 0 0 auto; transition: background .2s; } .switch.on { background: var(--accent); border-color: var(--accent); } .switch .knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.35); } .switch.on .knob { left: 21px; } /* ---------- Navbar tabs ---------- */ .tab { border: none; background: none; color: var(--muted); cursor: pointer; font: inherit; display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: background .15s, color .15s; } .tab:hover { background: var(--surface-2); color: var(--text); } .tab .tab-ico { display: block; line-height: 0; } .tab-ico svg { width: 18px; height: 18px; display: block; } .tab.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } body.light .tab.active { color: var(--accent-dim); } @media (max-width: 640px) { body { padding-top: 58px; } .nav-inner { padding: 0 14px; gap: 10px; height: 58px; } .brand-name { display: none; } .nav-links { gap: 2px; } .tab { padding: 8px 9px; } .tab .tab-lbl { display: none; } .tab .tab-ico { font-size: 18px; } .app { padding: 0 14px; } } /* utility */ .fade-in { animation: fade .25s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------- Light mode: card colour ---------- The gradients are authored for a dark page - vivid tone to near-black. Left alone they turn every card into a dark slab on a white background, and the labels sitting on them are fixed white. Here the same hues are tinted towards white instead, so the colour coding survives but the page stays light, and everything drawn on top flips to dark ink. */ body.light .cat-card .glow { background: radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--g1) 30%, #fff) 0%, color-mix(in srgb, var(--g1) 14%, #fff) 65%, #fff 100%); } body.light .cat-card { border-color: color-mix(in srgb, var(--g1) 26%, var(--line)); } body.light .cat-card .cmeta { color: rgba(16,22,21,.62); } body.light .cat-card .emoji { filter: none; } body.light .card .media { background: linear-gradient(140deg, color-mix(in srgb, var(--g1) 26%, #fff) 0%, color-mix(in srgb, var(--g1) 12%, #fff) 100%); } body.light .sheet .hero { background: linear-gradient(140deg, color-mix(in srgb, var(--g1) 26%, #fff) 0%, color-mix(in srgb, var(--g1) 12%, #fff) 100%); } /* the motif is drawn in currentColor, so it just needs darker ink */ body.light .media .art, body.light .hero .art { color: #0b1a14; opacity: .22; } body.light .card .media .big-emoji, body.light .sheet .hero .big-emoji { filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); } /* ---------- Site footer ---------- About lived only behind Profile > "About this data", which is three taps in and reads like a settings row rather than a page. It carries the provenance, the limitations and the corrections form, so it needs to be reachable from anywhere. */ .sitefoot { border-top: 1px solid var(--line); margin-top: 26px; padding: 22px 20px 34px; text-align: center; color: var(--faint); font-size: 13px; line-height: 1.7; } .sitefoot a { color: var(--muted); text-decoration: none; font-weight: 600; } .sitefoot a:hover { color: var(--accent); } .sitefoot .sep { margin: 0 9px; opacity: .5; } .sitefoot .note { display: block; margin-top: 7px; font-size: 12px; }