/* ===================================================================== TEMA — Gelap (default), Terang, Hybrid, Otomatis (ikut HP) Atribut data-theme di dipasang skrip kecil di SEBELUM halaman tergambar (jadi tidak ada kedipan warna). Pilihan disimpan di localStorage 'padel_theme'. Nama variabel tetap (--court-navy, --paper, dst) supaya semua CSS lama otomatis ikut; artinya sekarang PERAN: --court-navy = latar halaman --paper = teks utama --court-navy-2 = latar kartu --paper-dim = teks sekunder --court-navy-3 = latar input/pill --volt = aksen (latar tombol) --volt-ink = aksen sebagai TEKS --on-volt = teks di atas tombol volt --volt-line = aksen utk GARIS/border --volt-rgb = aksen utk rgba() tint --ink-rgb = warna garis/tint --bg-rgb = latar tembus (header) Hybrid: konten terang, tapi header/ticker/hero/footer/app bar tetap gelap. ===================================================================== */ :root, html[data-theme="hybrid"] header, html[data-theme="hybrid"] .feature-ticker, html[data-theme="hybrid"] .hero, html[data-theme="hybrid"] .page-hero, html[data-theme="hybrid"] footer, html[data-theme="hybrid"] .mabar-mobile-appbar{ --court-navy:#090d18; --court-navy-2:#111a30; --court-navy-3:#16213d; --volt:#d4ff3f; --volt-dim:#a8cc2e; --volt-ink:#d4ff3f; --volt-line:#d4ff3f; --volt-rgb:212,255,63; --win:#7ee787; --draw:#e0c068; --loss:#e07a68; --on-volt:#090d18; --sky:#3d7bff; --turf:#18b17e; --paper:#f4f6f0; --paper-dim:#c7cedc; --ink-rgb:244,246,240; --bg-rgb:9,13,24; --line:rgba(244,246,240,0.14); --ff-display:'Unbounded', system-ui, sans-serif; --ff-body:'Inter', system-ui, sans-serif; --ff-mono:'JetBrains Mono', monospace; color-scheme:dark; } html[data-theme="light"], html[data-theme="hybrid"]{ --court-navy:#f3f5ef; --court-navy-2:#ffffff; --court-navy-3:#e9ede4; --volt:#d4ff3f; --volt-dim:#8fb000; --volt-ink:#4f6b00; --volt-line:#7a9a00; --volt-rgb:122,154,0; --win:#15803d; --draw:#a16207; --loss:#c2410c; --on-volt:#090d18; --sky:#2a62e0; --turf:#0f8a61; --paper:#111827; --paper-dim:#4a5466; --ink-rgb:17,24,39; --bg-rgb:243,245,239; --line:rgba(17,24,39,0.13); color-scheme:light; } /* Bagian yang tetap gelap di mode hybrid perlu latar & teks sendiri (tidak lagi "numpang" latar body yang sekarang terang). */ html[data-theme="hybrid"] .feature-ticker, html[data-theme="hybrid"] .hero, html[data-theme="hybrid"] .page-hero, html[data-theme="hybrid"] footer, html[data-theme="hybrid"] .mabar-mobile-appbar{ background-color:var(--court-navy); color:var(--paper); } html[data-theme="hybrid"] header{color:var(--paper);} /* Ikon raket putih butuh garis tepi tipis supaya terlihat di latar terang */ html[data-theme="light"] .brand-icon, html[data-theme="hybrid"] main .brand-icon{ filter:drop-shadow(0 0 0.6px rgba(17,24,39,0.9)) drop-shadow(0 1px 2px rgba(17,24,39,0.25)); } /* Kartu pilihan di hero: putih bersih di tema terang */ html[data-theme="light"] .hero-path-btn{background:var(--court-navy-2);} /* Kartu di tema terang butuh sedikit bayangan supaya tidak "tenggelam" */ html[data-theme="light"] .feat-card, html[data-theme="light"] .site-modal-box, html[data-theme="light"] .order-card, html[data-theme="hybrid"] main .feat-card, html[data-theme="hybrid"] .site-modal-box, html[data-theme="hybrid"] main .order-card{ box-shadow:0 1px 2px rgba(17,24,39,0.05), 0 6px 20px rgba(17,24,39,0.06); } /* Garis pembatas lapangan (SVG) ikut warna tema */ .court-divider line{stroke:rgba(var(--ink-rgb),0.16);} body{transition:background-color .25s ease, color .25s ease;} *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--court-navy); color:var(--paper); font-family:var(--ff-body); line-height:1.6; overflow-x:hidden; } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ul{list-style:none;} button{font-family:inherit;cursor:pointer;} .wrap{max-width:1180px;margin:0 auto;padding:0 28px;} /* ---------- Court-line divider (signature structural motif) ---------- */ .court-divider{ width:100%; height:46px; position:relative; overflow:hidden; } .court-divider svg{width:100%;height:100%;display:block;} /* ---------- Nav ---------- */ header{ position:sticky;top:0;z-index:100; background:rgba(var(--bg-rgb),0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav{ display:flex;align-items:center;justify-content:space-between; padding:16px 28px;max-width:1180px;margin:0 auto;gap:20px; } .nav-right{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;} .brand{ font-family:var(--ff-display); font-weight:700; font-size:20px; letter-spacing:0.01em; display:flex;align-items:center;gap:10px; } .brand .dot{ width:10px;height:10px;border-radius:50%; background:var(--volt); box-shadow:0 0 14px var(--volt); } .brand-icon{height:26px;width:auto;max-width:40px;display:block;object-fit:contain;filter:drop-shadow(0 0 8px rgba(var(--volt-rgb),0.25));} .foot-brand .brand-icon{height:24px;max-width:36px;} .nav-links{display:flex;gap:22px;font-size:13.5px;font-weight:500;color:var(--paper-dim);white-space:nowrap;} .nav-links a{transition:color .2s;} .nav-links a:hover{color:var(--volt-ink);} .nav-cta{ background:var(--volt);color:var(--on-volt); padding:11px 22px;border-radius:999px; font-weight:700;font-size:13px; border:none; transition:transform .15s ease; } .nav-cta:hover{transform:translateY(-2px);} .nav-cta{white-space:nowrap;} @media (max-width:1200px) and (min-width:861px){ .nav-right{gap:14px;} .nav-links{gap:16px;font-size:13px;} .nav-cta{padding:10px 16px;} } .menu-btn{display:none;background:none;border:none;color:var(--paper);font-size:26px;} /* ---------- Pemilih tema (desktop: ikon + menu kecil) ---------- */ .theme-picker{position:relative;} .theme-btn{ width:34px;height:34px;border-radius:50%;border:1px solid var(--line); background:transparent;color:var(--paper);font-size:15px;line-height:1; display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s ease; } .theme-btn:hover{border-color:var(--volt-line);} .theme-menu{ position:absolute;top:calc(100% + 10px);right:0;z-index:120;min-width:168px; background:var(--court-navy-2);border:1px solid var(--line);border-radius:14px;padding:6px; box-shadow:0 12px 32px rgba(0,0,0,0.28);display:flex;flex-direction:column; } .theme-menu.hidden{display:none;} .theme-menu button{ display:flex;align-items:center;gap:10px;width:100%;text-align:left; background:none;border:none;border-radius:9px;padding:9px 12px; color:var(--paper);font-size:13px; } .theme-menu button:hover{background:rgba(var(--ink-rgb),0.07);} .theme-menu button.active,.theme-seg button.active{color:var(--volt-ink);font-weight:700;} .theme-menu button.active::after{content:'✓';margin-left:auto;} /* Tombol tema versi kotak (menu HP & panel Akun) */ .theme-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;} .theme-seg button{ display:flex;flex-direction:column;align-items:center;gap:3px; background:var(--court-navy-3);border:1px solid var(--line);border-radius:10px; padding:9px 4px;color:var(--paper);font-size:15px; } .theme-seg button span{font-size:10.5px;font-family:var(--ff-mono);} .theme-seg button.active{border-color:var(--volt-line);background:rgba(var(--volt-rgb),0.12);} /* Isi khusus menu HP — disembunyikan di desktop */ .nav-mobile-extras{display:none;} @media (max-width:860px){ .nav-links{display:none;} .menu-btn{display:block;padding:4px 2px;} /* Bar atas HP: logo kiri — akun + ☰ kanan, SATU baris */ .nav{flex-wrap:nowrap;padding:12px 18px;gap:12px;} .brand{font-size:17px;gap:8px;min-width:0;} .brand-icon{height:22px;} .nav-right{flex:0 0 auto;gap:10px;} .nav-desktop-only{display:none !important;} .account-pill{font-size:10.5px;padding:6px 10px;gap:5px;} .account-pill .acct-label,.account-pill .role-tag.role-only{display:none;} .role-tag{font-size:8.5px;padding:1px 6px;} .nav-links.open .nav-mobile-extras{ display:flex;flex-direction:column;gap:14px; border-top:1px solid var(--line);margin-top:6px;padding-top:16px; } .nav-links.open .nav-mobile-extras a{border-top:none;padding:0;} .nav-cta-block{display:block;text-align:center;padding:13px 16px !important;font-size:14px;color:var(--on-volt) !important;} .nav-mobile-row{display:flex;flex-direction:column;gap:8px;} .nav-mobile-label{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);} .nav-mobile-extras .lang-switch{display:inline-block;align-self:flex-start;padding:8px 14px !important;} } /* ---------- Hero ---------- */ .hero{ position:relative; padding:96px 0 70px; background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(61,123,255,0.25), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(var(--volt-rgb),0.12), transparent 55%); } .hero-mesh{ position:absolute;inset:0; background-image: linear-gradient(rgba(var(--ink-rgb),0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb),0.045) 1px, transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom, black, transparent 85%); pointer-events:none; } .hero-inner{position:relative;display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;} @media (max-width:900px){.hero-inner{grid-template-columns:1fr;}} .eyebrow{ font-family:var(--ff-mono); font-size:12px;letter-spacing:0.14em;text-transform:uppercase; color:var(--volt-ink); display:flex;align-items:center;gap:10px;margin-bottom:22px; } .eyebrow::before{content:'';width:26px;height:1px;background:var(--volt);} h1{ font-family:var(--ff-display); font-weight:900; font-size:clamp(38px, 5.6vw, 68px); line-height:1.02; letter-spacing:-0.01em; } h1 .accent{color:var(--volt-ink);} h1 .accent2{color:var(--sky);} .hero p.lede{ margin-top:24px; font-size:18px; color:var(--paper-dim); max-width:480px; } .hero-ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;} .btn-primary{ background:var(--volt);color:var(--on-volt); padding:16px 28px;border-radius:999px;font-weight:700;font-size:15px; border:none;display:inline-flex;align-items:center;gap:8px; transition:transform .15s ease, box-shadow .15s ease; } .btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(var(--volt-rgb),0.25);} .btn-ghost{ padding:16px 28px;border-radius:999px;font-weight:600;font-size:15px; border:1px solid var(--line);color:var(--paper);background:transparent; transition:border-color .15s ease, background .15s ease; font-family:inherit;cursor:pointer; } .btn-ghost:hover{border-color:var(--paper-dim);background:rgba(var(--ink-rgb),0.05);} .hero-stats{display:flex;gap:32px;margin-top:52px;flex-wrap:wrap;} .stat b{ display:block;font-family:var(--ff-mono);font-size:26px;color:var(--paper); } .stat span{font-size:12.5px;color:var(--paper-dim);} /* ---------- Hero bracket signature visual ---------- */ .bracket-card{ background:var(--court-navy-2); border:1px solid var(--line); border-radius:20px; padding:24px 22px; position:relative; } .bracket-card::before{ content:'LIVE BRACKET'; font-family:var(--ff-mono); font-size:10.5px;letter-spacing:.12em; color:var(--on-volt); background:var(--volt); padding:4px 10px;border-radius:999px; position:absolute;top:-11px;left:22px; font-weight:700; } .bmatch{ display:flex;flex-direction:column;gap:6px; background:var(--court-navy-3); border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-family:var(--ff-mono); font-size:12.5px; } .bmatch .team{display:flex;justify-content:space-between;color:var(--paper-dim);} .bmatch .team.win{color:var(--paper);font-weight:700;} .bmatch .team.win .sc{color:var(--volt-ink);} .bmatch .team .sc{color:var(--paper-dim);} .brow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;position:relative;} .brow.final{grid-template-columns:1fr;max-width:60%;margin:0 auto;} .brow.final .bmatch{border-color:var(--volt-line);box-shadow:0 0 0 1px rgba(var(--volt-rgb),0.15) inset;} .bracket-title{font-size:11px;color:var(--paper-dim);text-align:center;margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase;} /* ---------- Section shell ---------- */ section{padding:88px 0;} .section-head{max-width:640px;margin-bottom:52px;} .section-head .eyebrow{margin-bottom:16px;} h2{ font-family:var(--ff-display); font-weight:700; font-size:clamp(28px,3.6vw,42px); line-height:1.1; letter-spacing:-0.01em; } h2 .accent{color:var(--volt-ink);} .section-head p{margin-top:16px;color:var(--paper-dim);font-size:16.5px;max-width:560px;} /* ---------- Why padel ---------- */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;} @media (max-width:760px){.why-grid{grid-template-columns:1fr;}} .why-cell{background:var(--court-navy-2);padding:34px 28px;} .why-cell .num{font-family:var(--ff-mono);color:var(--volt-ink);font-size:13px;margin-bottom:14px;} .why-cell h3{font-family:var(--ff-display);font-weight:600;font-size:19px;margin-bottom:10px;} .why-cell p{color:var(--paper-dim);font-size:14.5px;} /* ---------- Features ---------- */ .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} @media (max-width:980px){.feat-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.feat-grid{grid-template-columns:1fr;}} .feat-card{ background:var(--court-navy-2); border:1px solid var(--line); border-radius:16px; padding:26px 22px; transition:border-color .2s ease, transform .2s ease; } .feat-card:hover{border-color:var(--volt-dim);transform:translateY(-4px);} .feat-icon{ width:42px;height:42px;border-radius:11px; display:flex;align-items:center;justify-content:center; background:rgba(var(--volt-rgb),0.1); margin-bottom:18px; } .feat-card h3{font-family:var(--ff-display);font-weight:600;font-size:16.5px;margin-bottom:8px;} .feat-card p{color:var(--paper-dim);font-size:14px;} /* ---------- App showcase ---------- */ .app-section{ background:var(--court-navy-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .app-inner{display:grid;grid-template-columns:0.95fr 1.05fr;gap:60px;align-items:center;} @media (max-width:900px){.app-inner{grid-template-columns:1fr;}} .app-list{margin-top:28px;display:flex;flex-direction:column;gap:18px;} .app-list li{display:flex;gap:14px;align-items:flex-start;} .app-check{ flex:none;width:22px;height:22px;border-radius:6px; background:var(--volt);color:var(--on-volt); display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:900;margin-top:2px; } .app-list b{display:block;font-size:15px;} .app-list span{color:var(--paper-dim);font-size:14px;} /* mock scoreboard phone */ .phone{ background:linear-gradient(180deg,var(--court-navy-3),var(--court-navy)); border:1px solid var(--line); border-radius:28px; padding:20px; max-width:340px; margin:0 auto; box-shadow:0 30px 70px rgba(0,0,0,0.45); } .phone-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;} .phone-top b{font-family:var(--ff-display);font-size:14px;} .phone-top span{font-family:var(--ff-mono);font-size:10.5px;color:var(--turf);display:flex;align-items:center;gap:6px;} .phone-top span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--turf);box-shadow:0 0 8px var(--turf);} .score-card{ background:var(--court-navy-2);border:1px solid var(--line);border-radius:14px; padding:16px;margin-bottom:12px; } .score-card .vs{display:flex;justify-content:space-between;align-items:center;font-family:var(--ff-mono);} .score-card .vs .p{font-size:13px;} .score-card .vs .n{font-size:22px;font-weight:700;} .score-card .vs .n.lead{color:var(--volt-ink);} .score-card .meta{font-size:11px;color:var(--paper-dim);margin-top:8px;font-family:var(--ff-mono);} .rank-row{display:flex;justify-content:space-between;padding:9px 4px;font-size:12.5px;border-bottom:1px solid var(--line);} .rank-row:last-child{border-bottom:none;} .rank-row .pos{color:var(--volt-ink);font-family:var(--ff-mono);width:22px;} /* ---------- How it works ---------- */ .steps{display:flex;flex-direction:column;} .step{ display:grid;grid-template-columns:80px 1fr;gap:24px; padding:26px 0;border-top:1px solid var(--line); } .step:last-child{border-bottom:1px solid var(--line);} .step .n{font-family:var(--ff-mono);font-size:26px;color:var(--volt-ink);} .step h3{font-family:var(--ff-display);font-weight:600;font-size:18px;margin-bottom:6px;} .step p{color:var(--paper-dim);font-size:14.5px;max-width:520px;} /* ---------- Upcoming tournaments ---------- */ .tourney-list{display:flex;flex-direction:column;gap:14px;} .tourney{ display:grid;grid-template-columns:90px 1fr auto auto;gap:20px;align-items:center; background:var(--court-navy-2);border:1px solid var(--line);border-radius:14px;padding:18px 22px; } @media (max-width:700px){.tourney{grid-template-columns:1fr;text-align:left;}} .tourney .date{font-family:var(--ff-mono);text-align:center;background:var(--court-navy-3);border-radius:10px;padding:10px 6px;} .tourney .date b{display:block;font-size:20px;color:var(--volt-ink);} .tourney .date span{font-size:10px;color:var(--paper-dim);text-transform:uppercase;} .tourney .info h4{font-family:var(--ff-display);font-size:15.5px;font-weight:600;margin-bottom:4px;} .tourney .info span{color:var(--paper-dim);font-size:13px;} .tag{ font-family:var(--ff-mono);font-size:11px;padding:5px 11px;border-radius:999px; border:1px solid var(--line);color:var(--paper-dim);white-space:nowrap; } .tourney .join{ background:transparent;border:1px solid var(--volt-line);color:var(--volt-ink); padding:10px 18px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap; } .tourney .join:hover{background:var(--volt);color:var(--on-volt);} .note-edit{font-size:12.5px;color:var(--paper-dim);margin-top:18px;font-family:var(--ff-mono);opacity:.7;} /* ---------- Testimonials ---------- */ .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media (max-width:900px){.quote-grid{grid-template-columns:1fr;}} .quote-card{background:var(--court-navy-2);border:1px solid var(--line);border-radius:16px;padding:26px;} .quote-card p{font-size:14.5px;color:var(--paper);margin-bottom:18px;} .quote-who{display:flex;align-items:center;gap:12px;} .quote-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--volt));flex:none;} .quote-who b{display:block;font-size:13.5px;} .quote-who span{font-size:12px;color:var(--paper-dim);} /* ---------- CTA band ---------- */ .cta-band{ text-align:center; background:radial-gradient(ellipse 700px 300px at 50% 0%, rgba(var(--volt-rgb),0.13), transparent 70%); } .cta-band h2{margin:0 auto 18px;max-width:600px;} .cta-band p{color:var(--paper-dim);max-width:480px;margin:0 auto 34px;} .cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} /* ---------- Footer ---------- */ footer{border-top:1px solid var(--line);padding:56px 0 32px;} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;} @media (max-width:760px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;}} .foot-col a{overflow-wrap:anywhere;} @media (max-width:760px){.foot-brand .brand{font-size:16px;}} .foot-brand p{color:var(--paper-dim);font-size:13.5px;margin-top:14px;max-width:260px;} .foot-col h4{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:16px;} .foot-col a{display:block;font-size:14px;color:var(--paper);margin-bottom:11px;opacity:.85;} .foot-col a:hover{color:var(--volt-ink);opacity:1;} .foot-bottom{ display:flex;justify-content:space-between;align-items:center; padding-top:24px;border-top:1px solid var(--line); font-size:12.5px;color:var(--paper-dim);flex-wrap:wrap;gap:12px; } /* reveal animation */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;} .reveal.in{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} } /* ============ Shared: simple page hero (subpages) ============ */ .page-hero{ position:relative; padding:70px 0 56px; background: radial-gradient(ellipse 900px 460px at 15% -10%, rgba(61,123,255,0.22), transparent 60%), radial-gradient(ellipse 700px 460px at 100% 0%, rgba(var(--volt-rgb),0.1), transparent 55%); border-bottom:1px solid var(--line); } .page-hero h1{ font-family:var(--ff-display);font-weight:900; font-size:clamp(32px,5vw,52px);line-height:1.05;letter-spacing:-0.01em; max-width:760px; } .page-hero h1 .accent{color:var(--volt-ink);} .page-hero p.lede{margin-top:18px;color:var(--paper-dim);font-size:17px;max-width:560px;} .crumb{ font-family:var(--ff-mono);font-size:12px;color:var(--paper-dim); display:flex;align-items:center;gap:8px;margin-bottom:18px; } .crumb a{color:var(--paper-dim);} .crumb a:hover{color:var(--volt-ink);} .crumb .sep{opacity:.5;} /* ============ About page ============ */ .about-lead{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;} @media (max-width:860px){.about-lead{grid-template-columns:1fr;}} .about-lead p{color:var(--paper-dim);font-size:15.5px;margin-bottom:16px;} .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:20px;} @media (max-width:760px){.value-grid{grid-template-columns:1fr;}} .value-cell{background:var(--court-navy-2);padding:30px 26px;} .value-cell .ic{font-size:24px;margin-bottom:14px;} .value-cell h3{font-family:var(--ff-display);font-weight:600;font-size:17px;margin-bottom:8px;} .value-cell p{color:var(--paper-dim);font-size:14px;} .timeline{display:flex;flex-direction:column;margin-top:8px;} .tl-row{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line);} .tl-row:last-child{border-bottom:1px solid var(--line);} .tl-row .yr{font-family:var(--ff-mono);color:var(--volt-ink);font-size:15px;} .tl-row h4{font-family:var(--ff-display);font-weight:600;font-size:15.5px;margin-bottom:5px;} .tl-row p{color:var(--paper-dim);font-size:14px;} /* ============ Jadwal page filter ============ */ .filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;} .filter-chip{ font-family:var(--ff-mono);font-size:12px;padding:9px 16px;border-radius:999px; border:1px solid var(--line);color:var(--paper-dim);background:transparent;cursor:pointer; transition:all .15s ease; } .filter-chip.active,.filter-chip:hover{border-color:var(--volt-line);color:var(--volt-ink);} /* ============ Kontak page ============ */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;} @media (max-width:860px){.contact-grid{grid-template-columns:1fr;}} .contact-info-list{display:flex;flex-direction:column;gap:22px;margin-top:24px;} .contact-info-item{display:flex;gap:16px;align-items:flex-start;} .contact-info-item .ic{ flex:none;width:42px;height:42px;border-radius:11px;background:rgba(var(--volt-rgb),0.1); display:flex;align-items:center;justify-content:center;font-size:18px; } .contact-info-item b{display:block;font-size:14.5px;} .contact-info-item span,.contact-info-item a{color:var(--paper-dim);font-size:14px;} .contact-info-item a:hover{color:var(--volt-ink);} .form-field{margin-bottom:18px;} .form-field label{display:block;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:8px;} .form-field input,.form-field textarea,.form-field select{ width:100%;background:var(--court-navy-2);border:1px solid var(--line);border-radius:10px; padding:13px 14px;color:var(--paper);font-family:var(--ff-body);font-size:14.5px; } .form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:2px solid var(--volt-line);outline-offset:1px;border-color:var(--volt-line);} .form-field textarea{resize:vertical;min-height:120px;} .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @media (max-width:560px){.form-row-2{grid-template-columns:1fr;}} .form-submit{ background:var(--volt);color:var(--on-volt);border:none;padding:15px 30px;border-radius:999px; font-weight:700;font-size:15px;cursor:pointer;transition:transform .15s ease; } .form-submit:hover{transform:translateY(-2px);} .form-hint{font-size:12.5px;color:var(--paper-dim);margin-top:12px;font-family:var(--ff-mono);opacity:.75;} /* ============ Active nav link ============ */ .nav-links a.active{color:var(--volt-ink);} /* ============ Mobile nav dropdown ============ */ @media (max-width:860px){ .nav-links.open{ display:flex;flex-direction:column;gap:0; position:absolute;top:100%;left:0;right:0; background:var(--court-navy-2);border-bottom:1px solid var(--line); padding:8px 22px 20px;max-height:calc(100vh - 70px);overflow-y:auto; box-shadow:0 18px 30px rgba(0,0,0,0.25); } .nav-links.open a{padding:12px 0;border-top:1px solid var(--line);} .nav{position:relative;} } /* ============ Akun Padelectrizen (SSO — dipakai di semua halaman) ============ */ .account-pill{ display:inline-flex;align-items:center;gap:8px; font-family:var(--ff-mono);font-size:11.5px;color:var(--paper-dim); border:1px solid var(--line);border-radius:999px;padding:7px 14px; background:transparent;cursor:pointer;white-space:nowrap; } .account-pill:hover{border-color:var(--volt-line);color:var(--paper);} .account-pill.logged-in{border-color:var(--volt-line);color:var(--volt-ink);} .account-status-text{font-family:var(--ff-mono);font-size:12px;color:var(--paper-dim);} .account-status-text b{color:var(--paper);} .role-tag{ display:inline-block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.04em; text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-left:6px; background:rgba(var(--volt-rgb),0.12);color:var(--volt-ink);border:1px solid rgba(var(--volt-rgb),0.3); } .site-modal-overlay{ position:fixed;inset:0;background:rgba(6,10,18,0.72);z-index:1200; display:flex;align-items:center;justify-content:center;padding:20px; } .site-modal-box{ background:var(--court-navy-2);border:1px solid var(--line);border-radius:18px; padding:26px;width:100%;max-width:420px;max-height:88vh;overflow-y:auto;position:relative; } .site-modal-box h3{font-family:var(--ff-display);font-weight:600;font-size:18px;margin-bottom:6px;} .site-modal-box p.modal-sub{color:var(--paper-dim);font-size:13px;margin-bottom:18px;} .site-modal-close{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--paper-dim);font-size:18px;cursor:pointer;} .site-modal-tabs{display:flex;gap:8px;margin-bottom:18px;} .site-modal-tab{ flex:1;background:var(--court-navy-3);border:1px solid var(--line);border-radius:9px; padding:9px;font-size:13px;font-weight:600;color:var(--paper-dim);cursor:pointer; } .site-modal-tab.active{background:var(--volt);color:var(--on-volt);border-color:var(--volt);} .site-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;} .site-modal-error{color:#e07a68;font-size:12.5px;margin-top:-8px;margin-bottom:14px;min-height:16px;} .role-check-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;} .role-check-row:last-child{border-bottom:none;} .role-check-row label{display:flex;align-items:center;gap:9px;cursor:pointer;flex:1;} .user-manage-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);} .user-manage-row:last-child{border-bottom:none;} .user-manage-email{font-size:13.5px;font-weight:600;} .user-manage-roles{font-size:11.5px;color:var(--paper-dim);margin-top:3px;} /* ============ Berita / News ============ */ .news-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px;} .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media (max-width:980px){.news-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:620px){.news-grid{grid-template-columns:1fr;}} .news-card{ background:var(--court-navy-2);border:1px solid var(--line);border-radius:16px;overflow:hidden; display:flex;flex-direction:column;cursor:pointer;transition:border-color .2s ease, transform .2s ease; } .news-card:hover{border-color:var(--volt-dim);transform:translateY(-4px);} .news-thumb{ aspect-ratio:16/9;background:radial-gradient(ellipse at 30% 20%, rgba(var(--volt-rgb),0.1), transparent 60%); display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative; } .news-thumb img{width:100%;height:100%;object-fit:cover;} .news-thumb .placeholder-icon{font-size:34px;opacity:.35;} .news-body{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1;} .news-date{font-family:var(--ff-mono);font-size:11px;color:var(--volt-ink);text-transform:uppercase;letter-spacing:.05em;} .news-title{font-family:var(--ff-display);font-weight:600;font-size:16px;line-height:1.35;} .news-excerpt{font-size:13.5px;color:var(--paper-dim);line-height:1.55;} .news-meta-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:12px;color:var(--paper-dim);font-family:var(--ff-mono);} .news-admin-actions{display:flex;gap:6px;margin-top:10px;} .news-detail{max-width:760px;} .news-detail-thumb{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--court-navy-2);margin-bottom:28px;} .news-detail-thumb img{width:100%;height:100%;object-fit:cover;} .news-detail h1{font-family:var(--ff-display);font-weight:800;font-size:clamp(26px,4vw,38px);line-height:1.15;margin-bottom:14px;} .news-detail-meta{font-family:var(--ff-mono);font-size:12.5px;color:var(--paper-dim);margin-bottom:26px;} .news-detail-body{font-size:16px;line-height:1.85;color:var(--paper);} .news-detail-body p{margin-bottom:20px;} .news-back-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-mono);font-size:13px;color:var(--paper-dim);margin-bottom:24px;cursor:pointer;} .news-back-link:hover{color:var(--volt-ink);} .news-form-image-preview{ width:100%;aspect-ratio:16/9;border-radius:12px;background:var(--court-navy-3);border:1px dashed var(--line); display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px;color:var(--paper-dim);font-size:13px; } .news-form-image-preview img{width:100%;height:100%;object-fit:contain;background:var(--court-navy);} .news-upload-row{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;} .news-upload-btn{ background:var(--court-navy-3);border:1px solid var(--line);color:var(--paper);border-radius:9px; padding:9px 16px;font-size:13px;cursor:pointer; } .news-upload-btn:hover{border-color:var(--volt-line);} .news-upload-status{font-family:var(--ff-mono);font-size:11.5px;color:var(--paper-dim);} .hidden{display:none !important;} /* ============ Widget Berita Padel Dunia (RSS otomatis) ============ */ .world-news-section{border-top:1px solid var(--line);background:var(--court-navy-2);} .world-news-list{display:flex;flex-direction:column;gap:2px;} .world-news-item{ display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start; padding:18px 0;border-bottom:1px solid var(--line); } .world-news-item:last-child{border-bottom:none;} .world-news-item a.wn-title{ font-family:var(--ff-display);font-weight:600;font-size:15px;color:var(--paper); line-height:1.4;display:block;margin-bottom:6px; } .world-news-item a.wn-title:hover{color:var(--volt-ink);} .world-news-item p{font-size:13.5px;color:var(--paper-dim);line-height:1.55;} .wn-meta{ font-family:var(--ff-mono);font-size:11px;color:var(--paper-dim);white-space:nowrap; text-align:right;opacity:.8; } .world-news-loading, .world-news-empty{ color:var(--paper-dim);font-size:13.5px;text-align:center;padding:30px 0; } .world-news-attribution{ font-family:var(--ff-mono);font-size:11px;color:var(--paper-dim);opacity:.65; margin-top:16px;text-align:center; } /* ============ Panel admin jadwal turnamen ============ */ .tourney-admin-actions{display:flex;gap:6px;flex-shrink:0;} /* ============ Tombol hapus (dipakai di panel admin/mabar/dll) ============ */ .btn-danger-ghost{ font:600 11.5px/1 'Inter', sans-serif; color:rgba(224,122,104,.85); background:transparent; border:1px dashed rgba(224,122,104,.4); padding:8px 13px; border-radius:8px; cursor:pointer; } .btn-danger-ghost:hover{ border-color:#e07a68; color:#e07a68; } /* ============ Tombol kecil (mini-btn) — dipakai di jadwal/mabar/dll ============ */ .mini-btn{ font:600 11.5px/1 'Inter', sans-serif; padding:8px 14px; border-radius:8px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--paper-dim); white-space:nowrap; } .mini-btn:hover{ border-color:var(--volt-line); color:var(--paper); } .mini-btn.primary{ background:var(--volt); color:var(--on-volt); border-color:var(--volt); font-weight:700; } /* ============ Tombol ganti bahasa ============ */ .lang-switch{ font-family:var(--ff-mono); font-size:11.5px; font-weight:700; color:var(--paper-dim); border:1px solid var(--line); border-radius:999px; padding:6px 11px; text-decoration:none; transition:border-color .15s ease, color .15s ease; } .lang-switch:hover{ border-color:var(--volt-line); color:var(--volt-ink); } /* ============ Tips Harian (Home) ============ */ .daily-tip-card{ display:flex; gap:20px; align-items:flex-start; background:linear-gradient(135deg, rgba(var(--volt-rgb),0.06), rgba(61,123,255,0.05)); border:1px solid var(--line); border-radius:18px; padding:28px 32px; } .daily-tip-icon{ font-size:32px; flex-shrink:0; line-height:1; } .daily-tip-body{ flex:1; min-width:0; } .daily-tip-meta{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; } .daily-tip-badge{ font-family:var(--ff-mono); font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--on-volt); background:var(--volt); padding:4px 10px; border-radius:999px; } .daily-tip-category{ font-family:var(--ff-mono); font-size:11.5px; color:var(--paper-dim); } .daily-tip-text{ font-size:16px; line-height:1.6; color:var(--paper); margin:0; } @media (max-width:640px){ .daily-tip-card{ flex-direction:column; padding:22px; gap:12px; } .daily-tip-text{ font-size:14.5px; } } /* ============ Padel Today / filter berita ============ */ .news-filter-row{ display:flex; gap:8px; flex-wrap:wrap; } .news-filter-btn{ font-family:var(--ff-mono); font-size:12px; font-weight:700; color:var(--paper-dim); background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; transition:all .15s ease; } .news-filter-btn:hover{ border-color:var(--volt-line); color:var(--volt-ink); } .news-filter-btn.active{ background:var(--volt); border-color:var(--volt); color:var(--on-volt); } .news-section-title{ font-family:var(--ff-display); font-size:24px; margin-bottom:4px; } .news-section-subtitle{ color:var(--paper-dim); font-size:13.5px; margin:0 0 4px; } .ai-transparency-label{ font-family:var(--ff-mono); font-size:11px; color:var(--paper-dim); opacity:.75; margin-top:18px; text-align:center; } /* ============ Widget Komentar (Mabar & Turnamen) ============ */ .comment-toggle-btn{ font-family:var(--ff-mono); font-size:11.5px; font-weight:700; color:var(--paper-dim); background:transparent; border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer; margin-top:8px; } .comment-toggle-btn:hover{ border-color:var(--volt-line); color:var(--volt-ink); } .comment-section{ margin-top:10px; padding:12px; background:rgba(var(--ink-rgb),0.03); border-radius:10px; border:1px solid var(--line); } .comment-item{ padding:8px 0; border-bottom:1px solid var(--line); } .comment-item:last-child{ border-bottom:none; } .comment-item-head{ display:flex; align-items:center; gap:8px; font-size:12px; } .comment-item-head b{ color:var(--paper); } .comment-time{ color:var(--paper-dim); font-size:11px; } .comment-delete-btn{ margin-left:auto; background:none; border:none; color:#e07a68; font-size:11px; cursor:pointer; padding:0; } .comment-text{ margin:4px 0 0; font-size:13px; color:var(--paper-dim); line-height:1.5; word-wrap:break-word; } .comment-empty{ font-size:12.5px; color:var(--paper-dim); text-align:center; padding:8px 0; margin:0; } .comment-loading{ font-size:12.5px; color:var(--paper-dim); text-align:center; padding:8px 0; } .comment-form{ display:flex; gap:8px; margin-top:10px; align-items:flex-end; } .comment-input{ flex:1; background:var(--court-navy-3); border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--paper); font-size:13px; resize:vertical; font-family:inherit; } .comment-submit-btn{ background:var(--volt); color:var(--on-volt); border:none; border-radius:8px; padding:8px 16px; font-weight:700; font-size:12.5px; cursor:pointer; flex-shrink:0; } .comment-login-prompt{ font-size:12px; color:var(--paper-dim); margin:10px 0 0; text-align:center; } /* ============ Statistik ringkas (dipakai di Serba-Serbi Padel) ============ */ .stat-row{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; } .stat-cell{ flex:1; min-width:140px; text-align:center; padding:20px 12px; background:rgba(var(--ink-rgb),0.03); border:1px solid var(--line); border-radius:14px; } .stat-cell b{ display:block; font-family:var(--ff-display); font-size:26px; color:var(--volt-ink); margin-bottom:6px; } .stat-cell span{ font-size:12.5px; color:var(--paper-dim); line-height:1.4; } @media (max-width:700px){ .stat-row{ gap:12px; } .stat-cell{ min-width:45%; } } /* ============ Diagram Lapangan Padel (SVG) ============ */ .padel-court-diagram{ max-width:560px; margin:36px auto 0; } .padel-court-diagram svg{ width:100%; height:auto; display:block; } .padel-court-diagram-caption{ text-align:center; font-size:12px; color:var(--paper-dim); margin-top:10px; } /* ============ Kartu perlengkapan (raket/bola/sepatu) ============ */ .equip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width:820px){ .equip-grid{ grid-template-columns:1fr; } } .equip-card{ background:rgba(var(--ink-rgb),0.03); border:1px solid var(--line); border-radius:16px; padding:26px 22px; text-align:center; } .equip-icon{ width:88px; height:88px; margin:0 auto 16px; } .equip-icon svg{ width:100%; height:100%; } .equip-card h3{ margin-bottom:10px; } .equip-facts{ list-style:none; padding:0; margin:14px 0 0; text-align:left; } .equip-facts li{ font-size:13px; color:var(--paper-dim); padding:6px 0 6px 20px; position:relative; border-top:1px solid var(--line); } .equip-facts li:first-child{ border-top:none; } .equip-facts li::before{ content:"—"; position:absolute; left:0; color:var(--volt-ink); } /* ============ Hero: 3 jalur pengguna ============ */ .hero-paths{ display:flex; flex-direction:column; gap:10px; margin-top:32px; max-width:480px; } .hero-path-btn{ display:flex; align-items:center; gap:14px; padding:14px 18px; background:rgba(var(--ink-rgb),0.04); border:1px solid var(--line); border-radius:14px; text-decoration:none; transition:border-color .15s ease, background .15s ease; } .hero-path-btn:hover{ border-color:var(--volt-line); background:rgba(var(--volt-rgb),0.06); } .hero-path-icon{ font-size:26px; flex-shrink:0; width:40px; text-align:center; } .hero-path-text{ display:flex; flex-direction:column; gap:2px; } .hero-path-text b{ font-family:var(--ff-display); font-size:15px; color:var(--paper); } .hero-path-text span{ font-size:12.5px; color:var(--paper-dim); } @media (max-width:640px){ .hero-paths{ max-width:100%; } }