:root { --ink:#fff; --muted:#929292; --surface:#171717; --line:#2b2b2b; --accent:#ed2024; --black:#080808; }
* { box-sizing:border-box; }
html, body { min-width:320px; overflow-x:hidden; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--black); font-family:"Poppins", Arial, sans-serif; } body::before { content:""; position:fixed; z-index:-2; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.42) 34%, rgba(130,0,0,.7) 100%), linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.26) 50%, rgba(170,0,0,.45) 100%), url("assets/gym-background.png") center/cover no-repeat; filter:saturate(.9); }
.page-shell { width:100%; max-width:1260px; min-height:100vh; margin:auto; padding:0 clamp(18px, 4vw, 54px); display:flex; flex-direction:column; }
.topbar { height:110px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); } .brand img { width:78px; height:78px; object-fit:contain; display:block; }
.eyebrow { margin:0 0 12px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; } h1 { margin:0; font-size:clamp(34px,4vw,50px); font-style:italic; font-weight:800; letter-spacing:-.04em; line-height:1; text-transform:uppercase; }
.units-section { width:100%; padding:clamp(24px, 4vw, 42px) 0 60px; } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; max-width:920px; margin:0 auto 22px; } .section-heading > div:first-child { min-width:0; }
.location-action { display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .nearest-button { min-height:34px; padding:0 12px; border:1px solid var(--accent); border-radius:5px; background:transparent; color:#fff; cursor:pointer; font:inherit; font-size:10px; font-weight:900; letter-spacing:.03em; text-transform:uppercase; transition:background .2s ease, color .2s ease; } .nearest-button span { margin-right:5px; color:var(--accent); font-size:16px; vertical-align:-2px; } .nearest-button:hover,.nearest-button:focus-visible { background:var(--accent); } .nearest-button:hover span,.nearest-button:focus-visible span { color:#fff; } .location-status { min-height:14px; margin:0; color:var(--muted); font-size:10px; text-align:right; } .location-status.is-error { color:#ff6b6d; } .location-status.is-success { color:#69d39a; }
.units-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:clamp(18px, 2.5vw, 30px); } .unit-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:18px; background:rgba(23,23,23,.9); box-shadow:0 12px 32px rgba(0,0,0,.24); transition:transform .2s ease, border-color .2s ease; } .unit-card:hover { transform:translateY(-4px); border-color:#444; border-top-color:var(--accent); }
.unit-card.is-nearest { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 14px 34px rgba(237,32,36,.16); } .nearest-badge { display:inline-block; margin:-2px 0 12px; padding:5px 8px; border-radius:3px; background:var(--accent); color:#fff; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.unit-image { width:100%; aspect-ratio:2.35 / 1; height:auto; object-fit:cover; display:block; filter:grayscale(1) brightness(.55); } .unit-info { padding:clamp(14px, 2vw, 18px) clamp(18px, 2.5vw, 24px) clamp(16px, 2vw, 20px); } .unit-kicker { display:none; } .unit-name { margin:0 0 9px; font-size:clamp(18px, 2vw, 21px); font-style:italic; font-weight:800; letter-spacing:-.04em; text-transform:uppercase; overflow-wrap:anywhere; } .unit-location { display:flex; align-items:flex-start; gap:8px; margin:0 0 6px; color:#9a9a9a; font-size:clamp(9px, 1vw, 10px); font-weight:600; letter-spacing:.02em; line-height:1.3; text-transform:uppercase; overflow-wrap:anywhere; } .unit-location::before { content:"⌖"; flex:0 0 auto; color:var(--accent); font-size:17px; line-height:.8; }
.pay-link { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; padding:11px 12px; border-radius:8px; background:var(--accent); color:#fff; text-decoration:none; font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; transition:background .2s ease, transform .2s ease; } .pay-link:hover,.pay-link:focus-visible { background:#ff3438; transform:translateY(-1px); } .arrow { font-size:17px; line-height:0; }
.empty-state { color:var(--muted); padding:26px 0; } .footer { margin-top:auto; min-height:74px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); color:#666; font-size:11px; letter-spacing:.03em; }
@media (max-width:800px) { .topbar { height:92px; } .section-heading { align-items:flex-start; } .units-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px) { .topbar { height:88px; } .brand img { width:68px; height:68px; } .section-heading { display:block; margin-bottom:18px; text-align:center; } .section-heading h1 { font-size:clamp(31px, 9vw, 42px); line-height:.94; } .location-action { margin-top:16px; align-items:center; } .nearest-button { width:auto; max-width:100%; min-height:40px; padding-left:10px; padding-right:10px; } .location-status { text-align:center; } .units-grid { grid-template-columns:1fr; } .unit-image { aspect-ratio:2.4 / 1; } .footer { padding:18px 0; align-items:flex-start; flex-direction:column; gap:7px; } }
@media (max-width:360px) { .page-shell { padding-left:14px; padding-right:14px; } .eyebrow { font-size:10px; } .section-heading h1 { font-size:30px; } .unit-card { border-radius:22px; } .unit-info { padding-left:17px; padding-right:17px; } }