/* ========================================================= CLUB PÁDEL ZARATÁN · HOJA DE ESTILOS UNIFICADA --------------------------------------------------------- Clases de necesarias: - Portada: page-home - Liga (presentación): page-league - Acceso a la liga: page-access - Contacto: page-contact - Pista privada: page-private Ejemplo: ========================================================= */ /* ---------- VARIABLES Y BASE COMÚN ---------- */ :root{ --bg:#050505; --text:#fff; --muted:#b8b8bf; --purple:#9847b7; --purple-light:#c16be0; --line:rgba(152,71,183,.38); --max:1180px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } .container{ width:min(calc(100% - 40px),var(--max)); margin:auto; } /* ========================================================= CABECERA · PÁGINAS INTERIORES ========================================================= */ body:not(.page-home) header{ position:sticky; top:0; z-index:50; background:rgba(5,5,5,.94); backdrop-filter:blur(14px); border-bottom:1px solid rgba(152,71,183,.16); } .header-inner{ min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:28px; } .logo{ width:148px; display:block; } nav{ display:flex; align-items:center; gap:28px; font-size:.84rem; font-weight:750; text-transform:uppercase; letter-spacing:.08em; } nav a{transition:.2s} body:not(.page-home) nav a:hover, body:not(.page-home) nav a.active, body:not(.page-home) .nav-parent>a:hover, body:not(.page-home) .nav-parent.active>a{ color:var(--purple-light); } .menu-btn{ display:none; border:0; background:none; color:#fff; font-size:30px; cursor:pointer; } /* ========================================================= CABECERA · PORTADA Mantiene el header fijo y el degradado sobre la fotografía. ========================================================= */ .page-home header{ position:fixed; z-index:50; inset:0 0 auto; background:linear-gradient(to bottom,rgba(0,0,0,.92),rgba(0,0,0,.45),transparent); } .page-home nav a:hover, .page-home nav a.active{ color:var(--purple-light); } /* ========================================================= DROPDOWN · ACCESO A LIGA ========================================================= */ .nav-parent{position:relative} .nav-parent>a{ display:flex; align-items:center; gap:6px; } .nav-parent>a::after{ content:"⌄"; font-size:.9rem; color:var(--purple-light); } .submenu{ display:none; position:absolute; top:calc(100% + 14px); left:-18px; min-width:210px; padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(9,9,11,.98); box-shadow:0 18px 45px rgba(0,0,0,.45); } .nav-parent:hover .submenu, .nav-parent:focus-within .submenu{ display:block; } .submenu a{ display:block; padding:10px 12px; border-radius:8px; font-size:.78rem; white-space:nowrap; } .submenu a:hover, .submenu a.active{ background:rgba(152,71,183,.14); color:var(--purple-light); } /* ========================================================= HERO · PÁGINAS INTERIORES ========================================================= */ .page-hero{ padding:62px 0 40px; position:relative; overflow:hidden; border-bottom:1px solid rgba(152,71,183,.16); } .page-hero::before{ content:""; position:absolute; width:560px; height:560px; right:-180px; top:-290px; border-radius:50%; background:radial-gradient(circle,rgba(152,71,183,.24),rgba(152,71,183,0) 68%); } .kicker{ color:var(--purple-light); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.17em; margin-bottom:12px; } .page-hero h1{ margin:0; font-size:clamp(3.7rem,7vw,6.8rem); line-height:.92; letter-spacing:-.065em; text-transform:uppercase; } .page-hero h1 span{color:var(--purple)} .page-hero p{ max-width:900px; color:var(--muted); font-size:1.08rem; margin:20px 0 0; } /* La presentación de liga tenía 650px y se conserva */ .page-league .page-hero p{ max-width:900px; } /* ========================================================= ELEMENTOS COMUNES · PÁGINAS INTERIORES ========================================================= */ .section{padding:48px 0} .section.alt{ background:linear-gradient(180deg,#080809 0%,#050505 100%); border-top:1px solid rgba(255,255,255,.035); border-bottom:1px solid rgba(255,255,255,.035); } .section-label{ color:var(--purple-light); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.16em; margin-bottom:12px; } .section h2, .sponsor-section h2{ margin:0 0 24px; font-size:clamp(2rem,4vw,3.35rem); line-height:1.02; letter-spacing:-.045em; } .muted{color:var(--muted)} /* ========================================================= PRESENTACIÓN DE LIGA ========================================================= */ .info-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:55px; align-items:start; } .description p{ color:var(--muted); margin:0 0 15px; } .summary-card{ padding:28px; border:1px solid var(--line); border-radius:18px; background: radial-gradient(circle at top left,rgba(152,71,183,.14),transparent 52%), #09090b; } .summary-card h3{ margin:0 0 18px; font-size:1.3rem; } .summary-list{ display:grid; gap:13px; } .summary-item{ display:flex; gap:12px; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.07); } .summary-item:last-child{ border-bottom:0; padding-bottom:0; } .summary-item b{ color:var(--purple-light); min-width:125px; } /* ========================================================= ACCESO A LIGA ========================================================= */ .private-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; } .login-box{ border:1px solid var(--line); border-radius:18px; background: radial-gradient(circle at top left,rgba(152,71,183,.11),transparent 52%), #09090b; padding:30px; } .login-box h3{ margin:0 0 20px; font-size:1.4rem; } .login-box-full{width:100%} .login-box-full form{ display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:end; } .login-box-full .form-row{margin-bottom:0} .form-row{ display:grid; gap:7px; margin-bottom:16px; } label{ color:#dddde2; font-size:.88rem; font-weight:700; } input[type="text"], input[type="password"]{ width:100%; height:48px; padding:0 14px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:#050505; color:#fff; outline:none; } input:focus{border-color:var(--purple)} .login-submit{ border:0; min-height:48px; padding:0 24px; border-radius:8px; background:var(--purple); color:#fff; font-weight:800; cursor:pointer; } .login-submit:hover{ background:var(--purple-light); color:#140817; } /* Información auxiliar */ .info-box{ padding:28px; border:1px solid var(--line); border-radius:18px; background:#09090b; } .info-box p{ color:var(--muted); margin:0 0 14px; } .info-box p:last-child{margin-bottom:0} /* Documentos */ .docs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .doc-card{ min-height:155px; padding:22px; border:1px solid rgba(152,71,183,.30); border-radius:14px; background:#09090b; display:flex; flex-direction:column; transition:.2s ease; } .doc-card:hover{ transform:translateY(-4px); border-color:var(--purple); } .doc-icon{ font-size:.82rem; font-weight:900; letter-spacing:.08em; color:var(--purple-light); margin-bottom:18px; } .doc-card h3{ margin:auto 0 5px; font-size:1rem; line-height:1.25; } .doc-card span{ color:#86868e; font-size:.8rem; } /* ========================================================= CONTACTO ========================================================= */ /* En contacto se redujo expresamente el espacio a la mitad */ .page-contact .section{ padding:24px 0; } .contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:stretch; } .contact-card{ border:1px solid var(--line); border-radius:18px; background: radial-gradient(circle at top left,rgba(152,71,183,.12),transparent 55%), #09090b; padding:30px; } .contact-card h3{ margin:0 0 20px; font-size:1.4rem; } .contact-list{ display:grid; gap:18px; } .contact-item{ padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.07); } .contact-item:last-child{ border-bottom:0; padding-bottom:0; } .contact-item small{ display:block; color:var(--purple-light); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; margin-bottom:4px; } .contact-item a:hover{color:var(--purple-light)} .phone-highlight{ display:grid; grid-template-columns:1.35fr .65fr; gap:18px; margin-top:10px; } .phone-box{ border:1px solid rgba(152,71,183,.38); border-radius:16px; background:#0c090e; padding:24px; } .phone-box.primary{ border:2px solid var(--purple); background: radial-gradient(circle at top left,rgba(152,71,183,.22),transparent 52%), #100b12; box-shadow:0 16px 50px rgba(152,71,183,.12); } .phone-box.secondary{opacity:.94} .phone-box .label{ color:var(--purple-light); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; } .phone-box .number{ display:block; margin-bottom:8px; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1; font-weight:900; letter-spacing:-.04em; } .phone-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0 10px; } .phone-pair .number{ margin:0; font-size:clamp(1.35rem,2.4vw,2rem); } .phone-box p{ margin:0; color:var(--muted); font-size:.9rem; } .socials{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; } .social-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border:1px solid var(--purple); border-radius:8px; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; transition:.2s; } .social-btn:hover{ background:var(--purple); transform:translateY(-2px); } .map-link{ display:inline-flex; margin-top:16px; color:var(--purple-light); font-weight:800; font-size:.9rem; } /* ========================================================= PATROCINADORES ========================================================= */ .sponsor-section{ padding:38px 0 64px; background:linear-gradient(180deg,#080809 0%,#050505 100%); border-top:1px solid rgba(255,255,255,.035); } /* Contacto conserva su separación reducida */ .page-contact .sponsor-section{ padding:24px 0 48px; } .sponsors{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:center; } .sponsor{ min-height:260px; border:1px solid rgba(152,71,183,.28); border-radius:16px; display:flex; align-items:center; justify-content:center; padding:26px; background:#09090b; } .sponsor img{ width:auto; max-width:100%; max-height:190px; object-fit:contain; transition:.2s ease; } .sponsor:hover img{ transform:scale(1.04); } /* ========================================================= PORTADA ========================================================= */ .page-home .hero{ min-height:100vh; position:relative; display:flex; align-items:center; overflow:hidden; isolation:isolate; } .page-home .hero-photo{ position:absolute; z-index:-3; inset:0 0 0 31%; background:url("../img/hero-decorativa.jpg") center/cover no-repeat; } .page-home .hero-photo:after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg,#050505 0%,rgba(5,5,5,.76) 18%,rgba(5,5,5,.12) 60%), linear-gradient(0deg,#050505 0%,transparent 25%); } .page-home .hero-content{ max-width:610px; padding-top:100px; } /* La portada tenía un kicker ligeramente distinto */ .page-home .kicker{ font-size:.76rem; margin-bottom:18px; } .page-home h1{ margin:0 0 28px; font-size:clamp(4.3rem,8vw,7.5rem); line-height:.88; letter-spacing:-.067em; text-transform:uppercase; font-weight:900; } .page-home h1 span{color:var(--purple)} .page-home .hero p{ max-width:430px; margin:0 0 30px; color:#d0d0d5; font-size:1.1rem; } .btn{ display:inline-flex; min-height:50px; padding:0 22px; align-items:center; border:1px solid var(--purple); border-radius:8px; font-size:.83rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; transition:.2s; } .btn:hover{ background:var(--purple); transform:translateY(-2px); } .page-home .about{ padding:50px 0 82px; text-align:center; } /* En portada el section-label usa una línea decorativa */ .page-home .section-label{ margin-bottom:0; } .page-home .section-label:after{ content:""; display:block; width:38px; height:2px; margin:12px auto 20px; background:var(--purple); } .page-home .about h2{ margin:0 0 24px; font-size:clamp(2.1rem,4.5vw,3.7rem); line-height:1.05; letter-spacing:-.045em; } .page-home .about p{ max-width:720px; margin:auto; color:var(--muted); } .page-home .explore{ padding:20px 0 100px; } .page-home .explore-title{ text-align:center; margin-bottom:34px; } .page-home .links-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .page-home .card{ min-height:200px; padding:26px 23px; border:1px solid var(--line); border-radius:16px; background: radial-gradient(circle at top left,rgba(152,71,183,.11),transparent 55%), #09090b; display:flex; flex-direction:column; transition:.22s; } .page-home .card-icon{ width:64px; height:64px; object-fit:contain; margin-bottom:18px; filter:drop-shadow(0 0 10px rgba(152,71,183,.22)); } .page-home .card:hover{ transform:translateY(-5px); border-color:var(--purple); } .page-home .num{ color:var(--purple-light); font-size:.78rem; font-weight:900; } .page-home .card h3{ margin:auto 0 0; text-transform:uppercase; line-height:1.16; } .page-home .arrow{ color:var(--purple-light); font-size:1.5rem; margin-top:14px; } /* ========================================================= PISTA PRIVADA ========================================================= */ .page-private .reservation-section{ padding-top:42px; } .page-private .reservation-frame{ width:100%; display:flex; justify-content:center; overflow:visible; } .page-private .reservation-frame iframe{ display:block; width:75%; height:1500px; border:0; overflow:visible; background:#fff; border-radius:16px; } /* ========================================================= FOOTER ========================================================= */ footer{ border-top:1px solid rgba(152,71,183,.3); padding:30px 0; color:#919197; font-size:.82rem; } .footer-inner{ display:flex; justify-content:space-between; gap:20px; } .footer-brand{ color:#fff; font-weight:700; } /* ========================================================= RESPONSIVE · TABLET ========================================================= */ @media(max-width:920px){ nav{ display:none; position:absolute; top:80px; left:20px; right:20px; padding:22px; border:1px solid var(--line); border-radius:14px; background:#09090bf7; flex-direction:column; } body:not(.page-home) nav{ align-items:stretch; } nav.open{display:flex} .menu-btn{display:block} .nav-parent>a{ justify-content:space-between; } .submenu{ display:block; position:static; min-width:0; margin-top:8px; padding:6px 0 0 14px; border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; } .info-grid{grid-template-columns:1fr} .private-grid{grid-template-columns:1fr} .docs-grid{grid-template-columns:repeat(2,1fr)} .contact-grid{grid-template-columns:1fr} .phone-highlight{grid-template-columns:1fr} .sponsors{grid-template-columns:1fr} .sponsor{min-height:240px} .sponsor img{max-height:180px} /* Portada */ .page-home .hero-photo{inset:0} .page-home .hero-photo:after{ background: linear-gradient(90deg,rgba(5,5,5,.96),rgba(5,5,5,.45)), linear-gradient(0deg,#050505,transparent 35%); } .page-home .links-grid{ grid-template-columns:repeat(2,1fr); } /* Pista privada */ .page-private .reservation-frame iframe{ width:100%; } } /* ========================================================= RESPONSIVE · MÓVIL ========================================================= */ @media(max-width:620px){ .container{ width:min(calc(100% - 28px),var(--max)); } .header-inner{min-height:76px} .logo{width:130px} .page-hero{padding:48px 0 34px} .page-hero h1{ font-size:clamp(3.3rem,18vw,5rem); } /* Páginas interiores */ .section{padding:40px 0} /* Contacto conserva el espaciado reducido */ .page-contact .section{ padding:20px 0; } .login-box-full form{ grid-template-columns:1fr; } .docs-grid{ grid-template-columns:1fr; } .summary-item{ flex-direction:column; gap:2px; } .summary-item b{ min-width:0; } .phone-highlight{ grid-template-columns:1fr; } .phone-pair{ grid-template-columns:1fr 1fr; } .sponsor-section{ padding:30px 0 52px; } .page-contact .sponsor-section{ padding:20px 0 40px; } .footer-inner{ flex-direction:column; } /* Portada */ .page-home .hero{ min-height:790px; align-items:flex-end; padding-bottom:70px; } .page-home .hero-photo{ background-position:58% center; } .page-home .hero-photo:after{ background: linear-gradient(0deg,#050505 0%,rgba(5,5,5,.82) 30%,rgba(5,5,5,.18) 70%); } .page-home .hero-content{ padding:0; } .page-home h1{ font-size:clamp(3.7rem,20vw,5.6rem); } .page-home .links-grid{ grid-template-columns:1fr; } .page-home .card{ min-height:145px; } /* Pista privada */ .page-private .reservation-section{ padding-top:32px; } .page-private .reservation-frame{ width:calc(100% + 28px); margin-left:-14px; } .page-private .reservation-frame iframe{ width:100%; height:1500px; border-radius:10px; } } /* ========================================================= LIGA · INSCRIPCIONES Procedente de styles_prim2.css. Se aplica EXCLUSIVAMENTE cuando: ========================================================= */ /* INSCRIPCIONES */ .page-league .registration-section{ padding:34px 0 42px; background: radial-gradient(circle at 50% 0,rgba(152,71,183,.14),transparent 45%), #070708; border-top:1px solid rgba(152,71,183,.20); } .page-league .registration-heading{ display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; } .page-league .registration-heading h2{ margin:0; font-size:clamp(2rem,4vw,3.35rem); line-height:1.02; letter-spacing:-.045em; } .page-league .registration-heading p{ max-width:500px; margin:0; color:var(--muted); } .page-league .registration-grid{ display:grid; grid-template-columns:2fr 1fr; gap:16px; } .page-league .registration-card{ position:relative; min-height:175px; padding:24px; overflow:hidden; border:1px solid rgba(152,71,183,.48); border-radius:16px; background: radial-gradient(circle at top right,rgba(152,71,183,.18),transparent 48%), #0b090d; display:flex; flex-direction:column; transition:.22s ease; cursor:pointer; } .page-league .registration-card:hover{ transform:translateY(-5px); border-color:var(--purple-light); box-shadow:0 18px 46px rgba(152,71,183,.14); } .page-league .registration-card.partnerless{ border:1px dashed rgba(193,107,224,.72); background: linear-gradient(135deg,rgba(152,71,183,.08),transparent 60%), #09090b; } .page-league .registration-card.partnerless .registration-tag{ color:#ddd0e4; } .page-league .registration-card.partnerless::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--purple); opacity:.72; } .page-league .registration-card.partnerless:hover{ border-color:var(--purple-light); background: linear-gradient(135deg,rgba(152,71,183,.14),transparent 60%), #0b090d; } .page-league .registration-card.primary{ border:2px solid var(--purple); background: radial-gradient(circle at top right,rgba(193,107,224,.22),transparent 48%), #100b12; } .page-league .registration-tag{ color:var(--purple-light); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.13em; } .page-league .registration-card h3{ margin:auto 0 8px; font-size:1.35rem; line-height:1.1; text-transform:uppercase; } .page-league .registration-card p{ margin:0; color:var(--muted); font-size:.88rem; } .page-league .registration-arrow{ position:absolute; top:20px; right:22px; color:var(--purple-light); font-size:1.5rem; } .page-league .registration-secondary{ display:flex; justify-content:flex-end; margin-top:14px; } .page-league .registration-secondary a{ color:var(--purple-light); font-size:.84rem; font-weight:800; text-decoration:underline; text-underline-offset:4px; } .page-league .registration-secondary a:hover{color:#fff} @media(max-width:920px){ .page-league .registration-heading{align-items:start;flex-direction:column} .page-league .registration-grid{grid-template-columns:1fr} .page-league .registration-card{min-height:145px} } @media(max-width:620px){ .page-league .registration-section{padding:28px 0 34px} } /* ========================================================= NAVEGACIÓN · SUBMENÚS DE LIGAS Uso esperado:

Liga de primavera

Acceso a la liga

========================================================= */ .nav-parent{ position:relative; } .nav-parent > a{ display:flex; align-items:center; gap:6px; } .nav-parent > a::after{ content:"⌄"; color:var(--purple-light); font-size:.9rem; line-height:1; transition:transform .2s ease; } .nav-parent:hover > a::after, .nav-parent:focus-within > a::after{ transform:rotate(180deg); } .submenu{ display:none; position:absolute; top:100%; left:-16px; min-width:220px; padding:14px 8px 8px; z-index:100; } .submenu::before{ content:""; position:absolute; inset:8px 0 0; z-index:-1; border:1px solid var(--line); border-radius:12px; background:rgba(9,9,11,.98); box-shadow:0 18px 45px rgba(0,0,0,.45); backdrop-filter:blur(12px); } .nav-parent:hover .submenu, .nav-parent:focus-within .submenu{ display:block; } .submenu a{ display:block; padding:10px 12px; border-radius:8px; font-size:.78rem; font-weight:750; letter-spacing:.06em; white-space:nowrap; transition:.2s ease; } .submenu a:hover, .submenu a.active{ background:rgba(152,71,183,.14); color:var(--purple-light); } @media(max-width:920px){ .nav-parent{ width:100%; } .nav-parent > a{ justify-content:space-between; } .nav-parent > a::after{ transform:none; } .submenu{ display:block; position:static; min-width:0; padding:6px 0 0 14px; } .submenu::before{ display:none; } .submenu{ border-left:1px solid var(--line); } .submenu a{ padding:9px 10px; } }