/* ========================================================================== NEXTA IPTV — "Liquid Glass" design tokens (iOS 26 inspired) Default = dark glass with guaranteed-white text (matches a dark IPTV storefront). Structure/markup is untouched — only visuals changed. Add class "nexta-light" to if you ever run this on a light theme. ========================================================================== */ body{ /* ---- design tokens ---- */ --nx-radius-xl: 28px; --nx-radius-lg: 22px; --nx-radius-md: 16px; --nx-radius-sm: 12px; --nx-pad-lg: 20px; --nx-pad-md: 14px; --nx-pad-sm: 10px; --nx-radius-lg-inner: calc(var(--nx-radius-lg) - var(--nx-pad-md)); --nx-radius-md-inner: calc(var(--nx-radius-md) - var(--nx-pad-sm)); --nx-accent: #34d3c4; --nx-accent-2: #7c8cff; --nx-accent-rgb: 52,211,196; --nx-accent-2-rgb: 124,140,255; --nx-whatsapp: #25D366; --nx-whatsapp-2: #128C7E; /* dark-glass default — always readable regardless of OS light/dark setting */ --nx-tint: 22,24,32; --nx-tint-alpha: 0.55; --nx-blur: 26px; --nx-edge: rgba(255,255,255,0.35); --nx-edge-soft: rgba(255,255,255,0.16); --nx-text: #ffffff; --nx-text-dim: rgba(255,255,255,0.78); --nx-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 10px 30px rgba(0,0,0,0.45), 0 30px 60px rgba(0,0,0,0.35); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0.01em; } /* Optional light-theme override — only applies if you add class="nexta-light" to */ body.nexta-light{ --nx-tint: 255,255,255; --nx-tint-alpha: 0.6; --nx-edge: rgba(255,255,255,0.7); --nx-edge-soft: rgba(120,120,140,0.25); --nx-text: #12141a; --nx-text-dim: #4b5160; --nx-shadow: 0 1px 1px rgba(20,20,30,0.05), 0 8px 24px rgba(20,20,30,0.12), 0 24px 48px rgba(20,20,30,0.10); } [class^="nexta-"], [class^="nexta-"] *{ box-sizing: border-box; } /* ---- the reusable "glass" material ---- */ .nexta-glass{ position: relative; background: rgba(var(--nx-tint), var(--nx-tint-alpha)) !important; backdrop-filter: blur(var(--nx-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--nx-blur)) saturate(160%); border-radius: var(--nx-radius-lg); box-shadow: var(--nx-shadow); padding: var(--nx-pad-lg); margin: 16px 0; color: var(--nx-text) !important; border: 1px solid transparent; } .nexta-glass::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--nx-edge) 0%, transparent 40%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .nexta-glass, .nexta-glass *{ color: var(--nx-text); } .nexta-glass h1, .nexta-glass h2, .nexta-glass h3, .nexta-glass h4{ color: #ffffff !important; } /* ---- Badges (Best Seller / Most Popular / New / Premium…) ---- */ .nexta-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; } .nexta-badge{ font-size: 13px; font-weight:700; padding:8px 15px; border-radius: var(--nx-radius-sm); background: linear-gradient(135deg, rgba(var(--nx-accent-rgb),0.35), rgba(var(--nx-accent-2-rgb),0.35)) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.35); transition: transform .18s ease; } .nexta-badge:hover{ transform: translateY(-2px); } /* ---- Stats strip (Channels / Movies / Series / Sports / Adult / Kids) ---- */ .nexta-stats-strip{ display:flex; gap:26px; flex-wrap:wrap; } .nexta-stat{ display:flex; flex-direction:column; min-width:100px; } .nexta-stat-num{ font-size:27px; font-weight:800; background:linear-gradient(135deg,var(--nx-accent),var(--nx-accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .nexta-stat-label{ font-size:12.5px; font-weight:700; color:#ffffff !important; opacity:0.92; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; } /* ---- Order box + pill selectors ---- */ .nexta-order-box h4{ margin:0 0 10px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color: #ffffff !important; opacity:0.85; } .nexta-select-group{ margin-bottom:16px; } .nexta-pill-group{ display:flex; flex-wrap:wrap; gap:9px; } .nexta-pill{ cursor:pointer; padding:10px 16px; border-radius: 999px; background: rgba(255,255,255,0.12) !important; backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.25); color: #ffffff !important; font-size:14px; font-weight:600; text-align:center; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; } .nexta-pill:hover{ transform: translateY(-1px); border-color: rgba(var(--nx-accent-rgb),0.6); } .nexta-pill.is-active{ background: linear-gradient(135deg, rgba(var(--nx-accent-rgb),0.95), rgba(var(--nx-accent-2-rgb),0.95)) !important; color:#08110f !important; font-weight:800; border-color: transparent; box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), inset 0 -6px 10px rgba(0,0,0,0.12), 0 6px 16px rgba(var(--nx-accent-rgb),0.35); } /* ---- Primary gloss button (WhatsApp order CTA) ---- */ .nexta-order-btn{ width:100%; margin-top:8px; padding:16px 20px; border:none; border-radius: 999px; cursor:pointer; font-size:15.5px; font-weight:800; letter-spacing:.02em; text-align:center; color:#ffffff !important; background: linear-gradient(160deg, var(--nx-whatsapp) 0%, var(--nx-whatsapp-2) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -8px 14px rgba(0,0,0,0.18), 0 10px 26px rgba(18,140,126,0.4); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .nexta-order-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); } .nexta-order-btn:active{ transform: translateY(0); filter: brightness(0.96); } /* ---- Specs panel (Channel / Movie / Series / Sports / Kids names live here too) ---- */ .nexta-trust-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; } .nexta-trust-badge{ font-size:12.5px; font-weight:600; padding:7px 12px; border-radius: var(--nx-radius-sm); background: rgba(var(--nx-accent-rgb),0.22) !important; border:1px solid rgba(255,255,255,0.25); color: #ffffff !important; } .nexta-spec-block{ border-bottom:1px solid rgba(255,255,255,0.16); padding:14px 2px; } .nexta-spec-block:last-child{ border-bottom:none; } .nexta-spec-block summary{ cursor:pointer; font-weight:700; font-size:15.5px; color: #ffffff !important; list-style: none; } .nexta-spec-block summary::-webkit-details-marker{ display:none; } .nexta-spec-block summary::before{ content: "▸ "; color: var(--nx-accent); } .nexta-spec-block[open] summary::before{ content: "▾ "; } .nexta-spec-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .nexta-tag{ font-size:13px; font-weight:600; padding:6px 12px; border-radius: var(--nx-radius-sm); background: rgba(255,255,255,0.14) !important; border:1px solid rgba(255,255,255,0.22); color: #ffffff !important; } .nexta-ratings{ margin-top:18px; border-top:1px solid rgba(255,255,255,0.16); padding-top:18px; } .nexta-rating-row{ display:flex; justify-content:space-between; padding:7px 0; font-size:14.5px; font-weight:500; } .nexta-rating-label{ color: #ffffff !important; } .nexta-rating-stars{ color: var(--nx-accent); letter-spacing:2px; font-weight:700; } /* ---- Modal ---- */ .nexta-modal{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; } .nexta-modal.is-open{ display:flex; } .nexta-modal-backdrop{ position:absolute; inset:0; background:rgba(8,9,14,0.6); backdrop-filter: blur(6px); } .nexta-modal-panel{ position:relative; width:min(440px,92vw); max-height:88vh; overflow-y:auto; padding:28px; border-radius: var(--nx-radius-xl); } .nexta-modal-x{ position:absolute; top:16px; right:18px; width:30px; height:30px; border-radius:999px; background: rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25); color:#ffffff !important; font-size:18px; line-height:1; cursor:pointer; } .nexta-modal-panel h3{ color: #ffffff !important; margin-top:0; } .nexta-order-summary{ font-size:13.5px; color:#ffffff !important; opacity:0.9; line-height:1.7; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--nx-radius-md); padding: var(--nx-pad-sm) var(--nx-pad-md); margin-bottom:18px; } .nexta-field-label{ display:block; font-size:12.5px; font-weight:700; margin:14px 0 6px; color:#ffffff !important; opacity:0.75; text-transform:uppercase; letter-spacing:.04em; } .nexta-input{ width:100%; padding:13px 14px; border-radius: var(--nx-radius-md-inner); border:1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.1); color: #ffffff !important; font-size:14.5px; font-weight:500; } .nexta-input::placeholder{ color: rgba(255,255,255,0.55); } .nexta-input:focus{ outline:none; border-color: var(--nx-accent); box-shadow: 0 0 0 3px rgba(var(--nx-accent-rgb),0.25); } .nexta-country-picker{ position:relative; } .nexta-country-dropdown{ display:none; position:absolute; top:100%; left:0; right:0; z-index:5; max-height:220px; overflow-y:auto; margin-top:6px; background: rgba(20,22,30,0.92); backdrop-filter: blur(20px); border:1px solid rgba(255,255,255,0.18); border-radius: var(--nx-radius-md); } .nexta-country-dropdown.is-open{ display:block; } .nexta-country-option{ padding:10px 14px; cursor:pointer; font-size:14px; font-weight:500; display:flex; gap:8px; color: #ffffff !important; } .nexta-country-option:hover{ background: rgba(var(--nx-accent-rgb),0.22); } .nexta-phone-row{ display:flex; gap:8px; } .nexta-dial-code{ padding:13px 14px; border-radius: var(--nx-radius-md-inner); border:1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.1); min-width:60px; text-align:center; font-weight:700; color: #ffffff !important; } .nexta-send-btn{ margin-top:22px; background: linear-gradient(160deg, var(--nx-accent) 0%, var(--nx-accent-2) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -8px 14px rgba(0,0,0,0.15), 0 10px 26px rgba(var(--nx-accent-2-rgb),0.4); color:#08110f !important; } .nexta-modal-note{ font-size:11.5px; color:#ffffff !important; opacity:0.6; margin-top:12px; text-align:center; } /* ---- NEW: subtle shimmer sweep on badges — a small "value add" polish ---- */ @keyframes nexta-shimmer{ 0%{ background-position: -150% 0; } 100%{ background-position: 250% 0; } } .nexta-badge{ background-image: linear-gradient(135deg, rgba(var(--nx-accent-rgb),0.35), rgba(var(--nx-accent-2-rgb),0.35)), linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%); background-size: 100% 100%, 200% 100%; animation: nexta-shimmer 3.2s ease-in-out infinite; }