/* ninja-sports.app — shared styles ===================================== * Palette: cool whites, slate-blacks. Distinct from ninjaverband.at * (warm beige + red accent). Fonts: Inter for body, Space Grotesk * for display, JetBrains Mono for code. * ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { /* Cool, light palette */ --ink: #0f172a; /* slate-900 */ --ink-soft: #334155; /* slate-700 */ --paper: #ffffff; /* pure white */ --paper-2: #f8fafc; /* slate-50 */ --paper-3: #f1f5f9; /* slate-100 */ --line: #e2e8f0; /* slate-200 */ --line-strong: #cbd5e1; /* slate-300 */ --muted: #64748b; /* slate-500 */ --accent: #6366f1; /* indigo-500 — default brand accent */ --accent-soft: #e0e7ff; /* indigo-100 */ --accent-strong: #4f46e5; /* indigo-600 */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; } /* === Per-sport accent override ===================================== * On any page that sets , the * site-wide --accent stack is swapped for that discipline's colours. * Components using var(--accent...) automatically pick up the change. */ body[data-sport="ninja"] { --accent: #d7142a; /* red — Ninja-Sport */ --accent-soft: #fef2f2; /* red-50 */ --accent-strong: #b50f22; /* red-700 */ } body[data-sport="cali"] { --accent: #1e40af; /* blue — Calisthenics */ --accent-soft: #eff6ff; /* blue-50 */ --accent-strong: #1e3a8a; /* blue-800 */ } body[data-sport="parkour"] { --accent: #475569; /* slate — Parkour */ --accent-soft: #f1f5f9; /* slate-100 */ --accent-strong: #1e293b; /* slate-800 */ } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.6; font-size: 16px; font-feature-settings: 'cv11', 'ss03'; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); text-decoration: underline; } main { flex: 1; } .wrap { max-width: 920px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 2.5rem); width: 100%; } .narrow { max-width: 640px; } .wide { max-width: 1200px; } /* === Site nav (sticky top) === * NOTE: do NOT add `backdrop-filter` here. backdrop-filter creates a * containing block for fixed-position descendants, which traps the * mobile slide-in panel inside the nav strip. Use a solid background. */ .site-nav { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 1000; } .site-nav-inner { max-width: 1200px; margin: 0 auto; padding: .55rem clamp(1.5rem, 5vw, 2.5rem); display: flex; justify-content: space-between; align-items: center; gap: 1rem; position: relative; } .site-nav-brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; min-width: 0; } .site-nav-brand img { height: 72px; width: auto; display: block; transition: opacity .15s; } .site-nav-brand:hover img { opacity: .82; } @media (max-width: 768px) { .site-nav-brand img { height: 64px; } } @media (max-width: 380px) { .site-nav-brand img { height: 56px; } } /* === Dropdown nav groups === */ .nav-group { position: relative; display: inline-block; } .nav-trigger { background: transparent; border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: .25rem; } .nav-trigger .nav-caret { font-size: .7em; transition: transform .18s ease; opacity: .65; } .nav-group.is-open .nav-trigger .nav-caret, .nav-group:hover .nav-trigger .nav-caret { transform: rotate(180deg); opacity: 1; } .nav-submenu { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 9px; padding: .35rem; min-width: 220px; box-shadow: 0 12px 32px -8px rgba(15,23,42,.18), 0 1px 2px rgba(15,23,42,.06); display: none; flex-direction: column; gap: 1px; margin-top: .35rem; z-index: 1100; } .nav-group:hover .nav-submenu, .nav-group:focus-within .nav-submenu, .nav-group.is-open .nav-submenu { display: flex; } /* Bridge so hover doesn't drop on small gap */ .nav-group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .35rem; } .nav-submenu a { display: block; padding: .55rem .85rem; font-size: .9rem; font-weight: 500; color: var(--ink, #0f172a); text-decoration: none; border-radius: 6px; transition: background .12s, color .12s; white-space: nowrap; } .nav-submenu a:hover { background: #f1f5f9; color: var(--accent, #6366f1); } .nav-submenu a .ns-desc { display: block; font-size: .75rem; font-weight: 400; color: var(--ink-soft, #64748b); margin-top: .15rem; } .nav-submenu a:hover .ns-desc { color: #475569; } /* Sport-color accents per dropdown (matches logo bands) */ .nav-group[data-sport="ninja"] .nav-submenu a:hover { color: #d7142a; } .nav-group[data-sport="ninja"] .nav-submenu a:hover { background: #fef2f2; } .nav-group[data-sport="cali"] .nav-submenu a:hover { color: #1e40af; } .nav-group[data-sport="cali"] .nav-submenu a:hover { background: #eff6ff; } .nav-group[data-sport="parkour"] .nav-submenu a:hover { color: #0f172a; } .nav-group[data-sport="parkour"] .nav-submenu a:hover { background: #f1f5f9; } @media (max-width: 768px) { /* Mobile: dropdowns become inline blocks instead of absolute */ .nav-submenu { position: static; margin: .25rem 0 .5rem; box-shadow: none; background: #f8fafc; } .nav-group.is-open .nav-submenu { display: flex; } .nav-group { display: block; width: 100%; } .nav-trigger { width: 100%; justify-content: space-between; } } .site-nav-links { display: flex; gap: .3rem; align-items: center; } .site-nav-link { color: var(--ink-soft); text-decoration: none; font-size: .9rem; font-weight: 500; padding: .4rem .85rem; border-radius: 6px; transition: background .15s, color .15s; } /* === Language switcher === */ .lang-switch { display: inline-flex; align-items: center; gap: .25rem; margin-left: .5rem; padding: .35rem .6rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; font-family: 'Space Grotesk', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: #94a3b8; cursor: pointer; transition: background .12s, border-color .12s; } .lang-switch:hover { background: #f1f5f9; border-color: #cbd5e1; } .lang-switch .lang-opt { padding: .12rem .35rem; border-radius: 4px; transition: background .12s, color .12s; } .lang-switch .lang-opt.is-active { background: var(--accent); color: #fff; } .lang-switch .lang-sep { color: #cbd5e1; } @media (max-width: 768px) { .lang-switch { margin-left: 0; margin-top: .5rem; align-self: flex-start; } } /* Active sport tab — colored underline matching the logo bands */ .nav-group[data-active="true"] .nav-trigger { position: relative; } .nav-group[data-active="true"] .nav-trigger::after { content: ""; position: absolute; bottom: -.55rem; left: .85rem; right: .85rem; height: 2px; border-radius: 2px; } .nav-group[data-sport="ninja"][data-active="true"] .nav-trigger::after { background: #d7142a; } .nav-group[data-sport="cali"][data-active="true"] .nav-trigger::after { background: #1e40af; } .nav-group[data-sport="parkour"][data-active="true"] .nav-trigger::after { background: #0f172a; } .nav-group[data-active="true"] .nav-trigger > span:first-child { color: var(--ink, #0f172a); font-weight: 600; } /* Sport-color accent on submenu header (visual depth) */ .nav-group[data-sport="ninja"] .nav-submenu { border-top: 3px solid #d7142a; } .nav-group[data-sport="cali"] .nav-submenu { border-top: 3px solid #1e40af; } .nav-group[data-sport="parkour"] .nav-submenu { border-top: 3px solid #0f172a; } /* === Burger button (desktop: hidden, mobile: shown via media query) === */ .site-nav-burger { display: none; width: 38px; height: 38px; background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; padding: 0; align-items: center; justify-content: center; position: relative; transition: background .15s, border-color .15s; } .site-nav-burger:hover { background: var(--paper-2); border-color: var(--line-strong, var(--line)); } .site-nav-burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: transform .25s ease, opacity .2s ease; } .site-nav-burger span::before, .site-nav-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); transition: transform .25s ease; } .site-nav-burger span::before { top: -6px; } .site-nav-burger span::after { top: 6px; } .site-nav-burger.is-open span { background: transparent; } .site-nav-burger.is-open span::before { transform: translateY(6px) rotate(45deg); } .site-nav-burger.is-open span::after { transform: translateY(-6px) rotate(-45deg); } .site-nav-link:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; } .site-nav-link.is-active { background: var(--ink); color: #fff; } .site-nav-link.is-active:hover { background: var(--ink); color: #fff; } /* === Headings (display font) === */ h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 1.2rem 0; font-weight: 600; color: var(--ink); } .lead { font-size: 1.08rem; color: var(--ink-soft); margin: 0 0 .8rem 0; line-height: 1.5; } section { margin: 2.6rem 0 0 0; } h2 { font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem 0; } h2 .count { color: var(--accent); font-variant-numeric: tabular-nums; } p { margin: 0 0 .8rem 0; color: var(--ink-soft); } /* === Disclaimer === */ .disclaimer { background: var(--accent-soft); border: 1px solid #c7d2fe; padding: .9rem 1.1rem; border-radius: 6px; margin: 1.4rem 0; font-size: .92rem; color: var(--ink-soft); } .disclaimer strong { color: var(--ink); } /* === Code & endpoints === */ code { font-family: var(--font-mono); font-size: .85em; background: var(--paper-3); padding: .15rem .4rem; border-radius: 4px; color: var(--ink); } pre { background: var(--ink); color: #f1f5f9; padding: 1rem 1.2rem; border-radius: 8px; overflow-x: auto; font-family: var(--font-mono); font-size: .85rem; line-height: 1.55; margin: .8rem 0 1.2rem 0; } pre code { background: none; padding: 0; color: inherit; } .endpoint { display: inline-block; background: var(--ink); color: #f1f5f9; padding: .5rem .9rem; border-radius: 6px; font-family: var(--font-mono); font-size: .88rem; margin: .3rem 0 1rem 0; } /* === Big nav cards (landing) === */ .nav-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .nav-card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem 1.5rem; text-decoration: none; color: inherit; transition: all .18s ease; } .nav-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(99,102,241,.15); text-decoration: none; } .nav-card-icon { font-size: 1.7rem; margin-bottom: .8rem; display: block; } .nav-card-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 0 0 .4rem 0; letter-spacing: -.01em; } .nav-card-desc { font-size: .92rem; color: var(--muted); margin: 0; line-height: 1.5; } .nav-card-cta { display: inline-block; margin-top: .9rem; font-size: .88rem; color: var(--accent); font-weight: 500; } /* === Search input === */ .search-bar { position: relative; margin: 0 0 .9rem 0; } .search-input { width: 100%; padding: .65rem 2.4rem .65rem 2.4rem; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; font-family: inherit; background: var(--paper); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); } .search-input::placeholder { color: var(--muted); } .search-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: .95rem; } .search-clear { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: var(--paper-3); border: none; width: 22px; height: 22px; border-radius: 50%; font-size: .75rem; color: var(--ink-soft); cursor: pointer; display: none; align-items: center; justify-content: center; line-height: 1; } .search-clear:hover { background: var(--line-strong); color: var(--ink); } .search-clear.show { display: flex; } /* === Filter pills === */ .filter-bar { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem 0; } .filter-pill { background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); padding: .35rem .75rem; border-radius: 999px; font-size: .85rem; font-family: inherit; font-weight: 500; cursor: pointer; transition: all .12s; font-variant-numeric: tabular-nums; } .filter-pill:hover { border-color: var(--accent); color: var(--ink); } .filter-pill.active { background: var(--ink); border-color: var(--ink); color: #fff; } .filter-pill .ct { opacity: .55; margin-left: .3rem; font-size: .8rem; } .filter-pill.active .ct { opacity: .8; } .summary { font-size: .85rem; color: var(--muted); margin: 0 0 .8rem 0; } .summary strong { color: var(--ink); font-weight: 600; } /* === Map === */ .gym-map { width: 100%; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; background: var(--paper-2); cursor: grab; box-shadow: 0 1px 3px rgba(15,23,42,.04); } .gym-map.is-active { cursor: default; } .gym-map.tall { height: 620px; max-height: 80vh; min-height: 480px; } .gym-map.short { height: 420px; margin: 0 0 1.5rem 0; } .ninja-marker span { display: block; width: 22px; height: 22px; background: var(--accent); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(15,23,42,.25); transition: transform .15s; } .ninja-marker:hover span { transform: scale(1.3); background: var(--accent-strong); } .ninja-tooltip { background: var(--ink) !important; color: #fff !important; border: none !important; border-radius: 6px !important; padding: .4rem .7rem !important; font-family: var(--font-body) !important; font-size: .82rem !important; box-shadow: 0 4px 12px rgba(15,23,42,.2) !important; } .ninja-tooltip::before { border-top-color: var(--ink) !important; } .leaflet-popup-content-wrapper { border-radius: 8px !important; font-family: var(--font-body) !important; } .leaflet-popup-content { margin: .8rem 1rem !important; font-size: .88rem !important; } /* === Hall card grid === */ .gym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; } .gym-card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; transition: all .15s; } .gym-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px -2px rgba(99,102,241,.1); transform: translateY(-1px); } .gym-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .2rem; } .gym-logo { flex-shrink: 0; width: 42px; height: 42px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: var(--font-display); font-weight: 600; color: var(--ink-soft); font-size: 1rem; } .gym-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .gym-meta { flex: 1; min-width: 0; } .gym-flag { font-size: .76rem; color: var(--muted); letter-spacing: .02em; margin-bottom: .1rem; text-transform: uppercase; font-weight: 500; } .gym-name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -.005em; } .gym-city { font-size: .85rem; color: var(--muted); margin: .1rem 0 .3rem 0; } .gym-desc { font-size: .87rem; color: var(--ink-soft); line-height: 1.5; flex: 1; } .gym-link { font-size: .8rem; color: var(--accent); text-decoration: none; font-family: var(--font-mono); word-break: break-all; font-weight: 500; } .gym-link:hover { text-decoration: underline; } /* Wrapper for multiple links (web, IG, etc.) on a gym card */ .gym-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; align-items: center; } .gym-link-ig { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: #fff !important; padding: .15rem .55rem; border-radius: 4px; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; word-break: normal; } .gym-link-ig:hover { text-decoration: none !important; filter: brightness(1.08); } /* Featured (highlighted) gym cards */ .gym-card.is-featured { border-color: #d4a017; background: linear-gradient(180deg, #fffdf5 0%, #fff 35%); position: relative; } .gym-card.is-featured::before { content: "★"; position: absolute; top: .65rem; right: .85rem; color: #d4a017; font-size: .95rem; pointer-events: none; } .gym-card .featured-star { color: #d4a017; font-size: .85em; vertical-align: 1px; } .gym-athletes { font-size: .8rem; color: #475569; margin-top: .5rem; padding: .35rem .55rem; background: #fffdf5; border-left: 2px solid #d4a017; border-radius: 3px; line-height: 1.4; } .gym-athletes strong { color: #1f2937; font-weight: 600; } /* === Kind badge (Fun/Kids vs Pro classification) === */ .kind-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .42rem; border-radius: 4px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; white-space: nowrap; vertical-align: middle; } .kind-badge.pro { background: #e0e7ff; color: #166534; border-color: #c7d2fe; } .empty-state { padding: 2rem; text-align: center; color: var(--muted); grid-column: 1 / -1; font-size: .92rem; } /* === Notice / info banner === */ .notice { display: flex; gap: .8rem; align-items: flex-start; background: var(--paper-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: .9rem 1.1rem; border-radius: 6px; margin: 1rem 0 1.4rem 0; font-size: .9rem; color: var(--ink-soft); } .notice-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.4; color: var(--accent); } .notice-body { flex: 1; line-height: 1.5; } .notice-body strong { color: var(--ink); } .notice-bottom { margin: 2.4rem 0 1rem 0; } /* === Sources === */ .sources { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem 1.6rem; margin: 1rem 0; } .sources p { font-size: .92rem; } .sources-list { list-style: none; padding: 0; margin: 1rem 0 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .55rem .9rem; } .sources-list li { font-size: .87rem; color: var(--ink-soft); padding-left: 1rem; position: relative; } .sources-list li::before { content: '·'; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .sources-list a { color: var(--ink-soft); } .sources-list a:hover { color: var(--accent); } /* === GitHub-style badges === */ .badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.5rem 0; } .badge { display: inline-flex; align-items: center; gap: .35rem; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; padding: .25rem .55rem; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .badge-success { background: var(--accent-soft); border-color: #c7d2fe; color: var(--accent-strong); } .badge-success::before { background: var(--accent); } .badge-planned { color: var(--muted); } .badge-planned::before { background: var(--line-strong); } /* === Stat grid (repo-header-like) === */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 1.5rem 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); } .stat { padding: 1.2rem 1rem; text-align: center; border-right: 1px solid var(--line); } .stat:last-child { border-right: none; } .stat-num { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat-label { display: block; margin-top: .35rem; font-size: .78rem; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; } /* ============================================================ RESPONSIVE — comprehensive mobile/tablet adjustments Breakpoints: 1024 (tablet landscape), 768 (tablet), 540 (phone) ============================================================ */ /* === Tablet landscape and below === */ @media (max-width: 1024px) { .site-nav-inner { padding: .7rem clamp(1rem, 4vw, 1.5rem); } .site-nav-link { padding: .35rem .65rem; font-size: .85rem; } } /* === Tablet portrait === */ @media (max-width: 768px) { .site-nav-inner { padding: .55rem 1rem; } .site-nav-brand { font-size: .92rem; } /* Show burger, hide links as slide-in panel */ .site-nav-burger { display: flex; z-index: 1300; /* sits on top of slide-in panel */ position: relative; } .site-nav-links { position: fixed !important; top: 0; right: 0; bottom: 0; width: 86vw; max-width: 360px; background: var(--paper); border-left: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 5rem 1.1rem 2rem; /* top space leaves room for X button */ box-shadow: -16px 0 40px -8px rgba(15,23,42,.18); transform: translateX(100%); opacity: 1; pointer-events: none; transition: transform .26s cubic-bezier(.32,.72,.16,1); overflow-y: auto; overscroll-behavior: contain; z-index: 1200 !important; } .site-nav-links.is-open { transform: translateX(0) !important; pointer-events: auto !important; } .site-nav-link { padding: .85rem .9rem; font-size: 1rem; border-radius: 8px; border-bottom: 1px solid var(--line); } .site-nav-link:last-child { border-bottom: none; } .site-nav-link.is-active { background: var(--paper-2); color: var(--accent); } body.nav-open { overflow: hidden; } /* Backdrop behind the slide-in panel */ .nav-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 1100; } .nav-backdrop.is-open { opacity: 1; pointer-events: auto; } /* Hero adjustments */ h1 { font-size: clamp(1.6rem, 5vw, 2.2rem) !important; } .lead { font-size: .95rem; } /* CTAs stack */ .cta-row { flex-direction: column; gap: .5rem; } .cta-row .btn { width: 100%; text-align: center; justify-content: center; } /* Stat grid 2x2 instead of 4x1 */ .stat-grid { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: none; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); } /* Filter pills */ .filter-pill { font-size: .78rem; padding: .32rem .55rem; } /* Search bar */ .search-input { font-size: 16px; /* prevents iOS zoom-on-focus */ } /* Map wrap less padding */ .map-wrap { padding: 1rem .8rem; } /* Map header stacks */ .map-header { flex-direction: column; align-items: flex-start !important; gap: .4rem !important; } .map-header h1 { font-size: 1.45rem !important; } .map-stats { gap: 1rem !important; font-size: .82rem !important; } /* Map height — viewport-friendly */ #gym-map { height: clamp(420px, 60vh, 600px) !important; min-height: 420px; border-radius: 10px !important; } /* Custom map controls — slightly smaller on mobile */ .mc-btn { width: 36px; height: 36px; } .map-control-stack { top: 8px; right: 8px; gap: 5px; } /* Popup tighter on mobile */ .leaflet-popup-content { width: 240px !important; } .pop-head { padding: .7rem .7rem .45rem; gap: .55rem; } .pop-logo { width: 38px; height: 38px; } .pop-body { padding: .45rem .7rem .6rem; font-size: .8rem; } .pop-actions { padding: .45rem .7rem .65rem; } /* Directory cards */ .gym-card { padding: .9rem; } /* Footer single column */ .footer-inner { flex-direction: column !important; gap: .35rem; text-align: center; } /* Datasets list */ .dataset-row { grid-template-columns: 20px 1fr; gap: .55rem; padding: .7rem .85rem; } .dataset-row .badge { grid-column: 1 / -1; justify-self: start; margin-top: .25rem; } /* Notice block tighter padding */ .notice { padding: .75rem .85rem; font-size: .85rem; } /* Section headings */ h2 { font-size: 1.35rem !important; } .section-head h2 { margin-bottom: .3rem; } } /* === Phone === */ @media (max-width: 540px) { /* Even tighter padding */ .map-wrap { padding: .85rem .65rem; } /* Map height */ #gym-map { height: 480px !important; min-height: 380px; } /* Filter pills smaller, scrollable horizontally */ .filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -.65rem; margin-right: -.65rem; padding: 0 .65rem; } .filter-bar::-webkit-scrollbar { display: none; } .filter-pill { flex-shrink: 0; } /* Stats single row, smaller font */ .map-stats { gap: .85rem !important; font-size: .78rem !important; } /* Site-nav fully horizontal scroll on phone */ .site-nav-inner { padding: .55rem .85rem; } .site-nav-brand { font-size: .88rem; } /* Hero pieces */ .hero-cta-buttons { flex-direction: column; width: 100%; } /* Popup even smaller */ .leaflet-popup-content { width: 220px !important; } /* Code blocks scroll instead of overflow */ pre { overflow-x: auto; font-size: .78rem !important; } /* Inline buttons tighter */ .btn { padding: .55rem .9rem; font-size: .85rem; } /* Headings */ h1 { font-size: 1.55rem !important; } h2 { font-size: 1.2rem !important; } } /* === Dataset list (file-tree-like) === */ .dataset-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); margin: 1rem 0; } .dataset-row { display: grid; grid-template-columns: 24px 1fr auto; gap: .8rem; align-items: center; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .9rem; transition: background .12s; } .dataset-row:last-child { border-bottom: none; } .dataset-row.is-live:hover { background: var(--paper-2); } .dataset-status { font-family: var(--font-mono); font-size: .9rem; color: var(--accent); text-align: center; } .dataset-status.is-planned { color: var(--line-strong); } .dataset-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .dataset-name { font-family: var(--font-mono); font-size: .92rem; color: var(--ink); font-weight: 500; } .dataset-name a { color: var(--ink); text-decoration: none; } .dataset-name a:hover { color: var(--accent); text-decoration: none; } .dataset-desc { font-size: .82rem; color: var(--muted); } .dataset-meta { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); white-space: nowrap; } /* === CTA row === */ .cta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; } .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.2rem; border-radius: 8px; font-size: .92rem; font-weight: 500; text-decoration: none; border: 1px solid transparent; font-family: inherit; cursor: pointer; transition: all .15s; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } /* === Section heading with descriptive text === */ .section-head { margin-bottom: 1rem; } .section-head h2 { margin-bottom: .35rem; } .section-head .section-desc { font-size: .9rem; color: var(--muted); margin: 0; } /* === Footer === */ footer { padding: 1.6rem clamp(1.5rem, 5vw, 2.5rem); font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 3rem; background: var(--paper-2); } .footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem; } footer a { color: var(--muted); text-decoration: underline; } footer a:hover { color: var(--ink); } /* === Safety / Use-at-own-risk disclaimer banner ─────────────────── */ .safety-note { background: #fffbeb; border-top: 1px solid #fde68a; border-bottom: 1px solid #fde68a; padding: .65rem 0; font-size: .85rem; color: #78350f; line-height: 1.5; } .safety-note .safety-inner { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: flex-start; gap: .55rem; flex-wrap: wrap; } .safety-note .safety-icon { font-size: 1rem; line-height: 1.4; flex-shrink: 0; } .safety-note .safety-text { flex: 1; min-width: 200px; } .safety-note strong { color: #92400e; font-weight: 600; } .safety-note a { color: #92400e; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; } .safety-note a:hover { color: #78350f; } @media (max-width: 540px) { .safety-note { font-size: .8rem; padding: .55rem 0; } } /* Hide backdrop entirely on desktop — safety net for mobile→desktop resize */ @media (min-width: 769px) { .nav-backdrop { display: none !important; } }