:root { --v: #030306; --d: #060609; --s: #0b0b10; --s2: #101018; --b: #18182a; --b2: #222236; --g: #00ff88; --gg: rgba(0,255,136,0.07); --g2: rgba(0,255,136,0.15); --g3: rgba(0,255,136,0.04); --txt: #b8b8cc; --txt2: #505068; --txt3: #303048; --accent: #6366f1; --a2: rgba(99,102,241,0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: var(--v); color: var(--txt); min-height: 100vh; overflow-x: hidden; } @keyframes fa { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes pu { 0%,100%{opacity:1} 50%{opacity:0.15} } @keyframes sh { 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(0.96)} } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── NAV ── */ .n { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 58px; display: flex; align-items: center; padding: 0 32px; gap: 28px; background: rgba(3,3,6,0.94); backdrop-filter: blur(24px); border-bottom: 1px solid var(--b); } .l { font-family: 'Space Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 5px; color: var(--g); text-transform: uppercase; } .na { display: flex; gap: 2px; margin-left: 16px; } .na a { padding: 5px 11px; border-radius: 5px; font-size: 0.7rem; color: var(--txt3); text-decoration: none; transition: .15s; font-family: 'Space Mono', monospace; letter-spacing: 0.4px; } .na a:hover { color: var(--txt2); } .na a.ac { color: var(--g); background: var(--gg); } .nr { margin-left: auto; display: flex; align-items: center; gap: 12px; } .pl { display: flex; align-items: center; gap: 6px; background: var(--s); border: 1px solid var(--b); padding: 5px 11px; border-radius: 50px; font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 1px; color: var(--txt2); } .pd { width: 5px; height: 5px; border-radius: 50%; background: var(--g); animation: pu 2s infinite; } .bt { background: var(--g); color: #000; border: none; padding: 7px 16px; border-radius: 5px; font-family: 'Space Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; } .bt:hover { box-shadow: 0 0 24px rgba(0,255,136,0.4); } /* ── HERO ── */ .h { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 120px 32px 60px; overflow: hidden; } .hbg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 40% at 50% 40%, rgba(0,255,136,0.045) 0%, transparent 50%), radial-gradient(ellipse 60% 30% at 30% 80%, rgba(99,102,241,0.025) 0%, transparent 40%), var(--v); } .ht { text-align: center; z-index: 1; max-width: 700px; } .heb { font-family: 'Space Mono', monospace; font-size: 0.58rem; letter-spacing: 5px; color: var(--g); text-transform: uppercase; margin-bottom: 10px; animation: fa 0.6s ease; } .htit { font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 700; color: #fff; line-height: 1.0; margin-bottom: 12px; animation: fa 0.6s 0.1s backwards; } .htit span { color: var(--g); } .hsub { font-size: 0.9rem; color: var(--txt2); max-width: 500px; margin: 0 auto 28px; line-height: 1.6; animation: fa 0.6s 0.2s backwards; } /* ── STATS ── */ .stats { display: flex; gap: 24px; justify-content: center; margin-bottom: 32px; animation: fa 0.6s 0.3s backwards; } .stat { background: var(--s); border: 1px solid var(--b); border-radius: 10px; padding: 14px 24px; text-align: center; } .stat-n { font-family: 'Space Mono', monospace; font-size: 1.6rem; font-weight: 700; color: #fff; } .stat-l { font-family: 'Space Mono', monospace; font-size: 0.5rem; letter-spacing: 2px; color: var(--txt3); text-transform: uppercase; margin-top: 2px; } /* ── SEARCH & FILTER ── */ .bar { width: 100%; max-width: 900px; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; animation: fa 0.6s 0.4s backwards; } .search-wrap { flex: 1; min-width: 220px; position: relative; } .si { width: 100%; background: var(--s); border: 1px solid var(--b2); border-radius: 8px; padding: 10px 14px 10px 38px; color: var(--txt); font-family: 'Inter', sans-serif; font-size: 0.82rem; outline: none; transition: border-color 0.2s; } .si:focus { border-color: var(--g); } .si::placeholder { color: var(--txt3); } .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; } select.si { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 30px; min-width: 140px; } select.si2 { -webkit-appearance: none; appearance: none; cursor: pointer; background: var(--s); border: 1px solid var(--b2); border-radius: 8px; padding: 10px 30px 10px 14px; color: var(--txt); font-family: 'Inter', sans-serif; font-size: 0.82rem; outline: none; transition: border-color 0.2s; } select.si2:focus { border-color: var(--g); } select.si2 option { background: var(--s); } .filter-wrap { position: relative; } .filter-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--txt2); font-size: 0.5rem; } /* ── STUDIO GRID ── */ .main { max-width: 1100px; margin: 0 auto; padding: 0 32px 80px; } .section-label { font-family: 'Space Mono', monospace; font-size: 0.52rem; letter-spacing: 4px; color: var(--txt3); text-transform: uppercase; margin: 40px 0 20px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .card { background: var(--s); border: 1px solid var(--b); border-radius: 12px; padding: 18px; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; animation: fa 0.4s backwards; } .card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--gg) 0%, transparent 60%); opacity: 0; transition: opacity 0.2s; } .card:hover { border-color: var(--b2); transform: translateY(-2px); } .card:hover::before { opacity: 1; } .card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .card-name { font-size: 0.88rem; font-weight: 600; color: #fff; line-height: 1.3; flex: 1; padding-right: 8px; } .card-price { font-family: 'Space Mono', monospace; font-size: 0.75rem; font-weight: 700; color: var(--g); white-space: nowrap; background: var(--gg); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--g2); } .card-addr { font-size: 0.68rem; color: var(--txt2); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; } .card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; } .tag { font-family: 'Space Mono', monospace; font-size: 0.48rem; letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: var(--b); color: var(--txt2); border: 1px solid var(--b2); } .tag.thai { background: rgba(245,158,11,0.08); color: #f59e0b; border-color: rgba(245,158,11,0.2); } .tag.spa { background: rgba(99,102,241,0.08); color: #818cf8; border-color: rgba(99,102,241,0.2); } .tag.fisio { background: rgba(14,165,233,0.08); color: #38bdf8; border-color: rgba(14,165,233,0.2); } .tag.hotel { background: rgba(168,85,247,0.08); color: #c084fc; border-color: rgba(168,85,247,0.2); } .tag.hammam { background: rgba(20,184,166,0.08); color: #2dd4bf; border-color: rgba(20,184,166,0.2); } .tag.boutique { background: rgba(236,72,153,0.08); color: #f472b6; border-color: rgba(236,72,153,0.2); } .tag.chain { background: rgba(234,179,8,0.08); color: #facc15; border-color: rgba(234,179,8,0.2); } .tag.oriental { background: rgba(249,115,22,0.08); color: #fb923c; border-color: rgba(249,115,22,0.2); } .card-bottom { display: flex; gap: 6px; border-top: 1px solid var(--b); padding-top: 10px; margin-top: 2px; } .card-svc { font-family: 'Space Mono', monospace; font-size: 0.52rem; color: var(--txt3); display: flex; align-items: center; gap: 3px; } .card-svc span { color: var(--txt2); } .card-count { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 0.52rem; color: var(--g); background: var(--gg); padding: 2px 7px; border-radius: 4px; } /* ── MODAL ── */ .modal-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(3,3,6,0.85); backdrop-filter: blur(12px); display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.2s ease; overflow-y: auto; padding: 20px; } .modal { background: var(--d); border: 1px solid var(--b2); border-radius: 16px; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; animation: slideUp 0.3s ease; margin: auto; } .modal-header { padding: 24px; border-bottom: 1px solid var(--b); position: sticky; top: 0; background: var(--d); z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; } .modal-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 4px; } .modal-meta { font-size: 0.72rem; color: var(--txt2); display: flex; gap: 12px; flex-wrap: wrap; } .modal-meta span { display: flex; align-items: center; gap: 4px; } .modal-close { background: var(--s); border: 1px solid var(--b2); color: var(--txt); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 12px; } .modal-close:hover { border-color: var(--g); color: var(--g); } .modal-body { padding: 20px 24px 32px; } .svc-section { margin-bottom: 20px; } .svc-section-title { font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 3px; text-transform: uppercase; color: var(--txt3); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--b); } .svc-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.03); } .svc-item:last-child { border-bottom: none; } .svc-name { font-size: 0.8rem; color: #fff; flex: 1; padding-right: 12px; } .svc-desc { font-size: 0.65rem; color: var(--txt3); width: 100%; margin-top: 2px; } .svc-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .svc-price { font-family: 'Space Mono', monospace; font-size: 0.78rem; font-weight: 700; color: var(--g); } .svc-dur { font-family: 'Space Mono', monospace; font-size: 0.52rem; color: var(--txt3); } .no-price { font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--txt3); } /* ── LOADING ── */ .loading { text-align: center; padding: 60px; color: var(--txt3); font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 2px; } .loading-dot { display: inline-block; width: 6px; height: 6px; background: var(--g); border-radius: 50%; animation: pu 1s infinite; margin-left: 4px; } .no-results { text-align: center; padding: 60px; color: var(--txt3); font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 2px; } /* ── TYPE BADGE COLORS ── */ .badge-thai { background: rgba(245,158,11,0.1); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); } .badge-spa { background: rgba(99,102,241,0.1); color: #818cf8; border: 1px solid rgba(99,102,241,0.25); } .badge-fisio { background: rgba(14,165,233,0.1); color: #38bdf8; border: 1px solid rgba(14,165,233,0.25); } .badge-hotel { background: rgba(168,85,247,0.1); color: #c084fc; border: 1px solid rgba(168,85,247,0.25); } .badge-hammam { background: rgba(20,184,166,0.1); color: #2dd4bf; border: 1px solid rgba(20,184,166,0.25); } .badge-boutique { background: rgba(236,72,153,0.1); color: #f472b6; border: 1px solid rgba(236,72,153,0.25); } .badge-chain { background: rgba(234,179,8,0.1); color: #facc15; border: 1px solid rgba(234,179,8,0.25); } .badge-oriental { background: rgba(249,115,22,0.1); color: #fb923c; border: 1px solid rgba(249,115,22,0.25); } .badge-default { background: var(--b); color: var(--txt2); border: 1px solid var(--b2); } /* ── FOOTER ── */ .footer { border-top: 1px solid var(--b); padding: 24px 32px; text-align: center; font-family: 'Space Mono', monospace; font-size: 0.52rem; color: var(--txt3); letter-spacing: 2px; }
Massage Club
Studios
Map
Partner Survey
LIVE
Madrid, Spain
Massage Club · Madrid
Every Studio.
Every Service.
The complete menu of Madrid's best massage studios — every technique, every price, every neighborhood.
—
Studios
—
Services
—
Neighborhoods
—
Types
⌕
All Neighborhoods
▼
All Types
▼
All Prices
Under €40/hr
€40–60/hr
€60–80/hr
€80+/hr
▼
All Studios
LOADING STUDIOS
No studios match your filters
Existing
New
✕