/* ═══════════════════════════════════════════════════════════════════════ DigiSub Store — storefront theme Light by default, dark on [data-theme="dark"]. Every colour is a token, so switching themes never needs a second rule for the same component. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* Surfaces, lightest to deepest */ --bg:#F7F9FC; --bg-2:#EEF2F8; --surface:#FFFFFF; --surface-2:#F4F7FB; --surface-3:#E9EFF7; /* Lines */ --line:#DEE6F1; --line-soft:#EAF0F7; --line-strong:#C8D4E4; /* Text */ --text:#141C2E; --text-dim:#54637E; --text-faint:#8C9AB3; --text-invert:#FFFFFF; /* Brand */ --cyan:#0FB89E; --cyan-ink:#05211D; --cyan-dim:rgba(15,184,158,.10); --cyan-line:rgba(15,184,158,.30); --violet:#6C5CE7; --violet-dim:rgba(108,92,231,.10); --amber:#D97706; --amber-dim:rgba(217,119,6,.11); --danger:#DC2626; --danger-dim:rgba(220,38,38,.10); --ok:#059669; --ok-dim:rgba(5,150,105,.11); /* Hero panel keeps a deep backdrop even in light mode */ --hero-bg:#0E1626; --hero-text:#FFFFFF; --hero-text-dim:#A9B7D0; --radius:16px; --radius-sm:10px; --shadow-sm:0 1px 2px rgba(20,28,46,.06), 0 1px 3px rgba(20,28,46,.05); --shadow:0 4px 16px rgba(20,28,46,.07), 0 1px 3px rgba(20,28,46,.05); --shadow-lg:0 18px 44px rgba(20,28,46,.13); --container:1180px; --header-h:68px; } [data-theme="dark"]{ --bg:#0B1020; --bg-2:#0F1526; --surface:#141B31; --surface-2:#1A2340; --surface-3:#202B4A; --line:#26314F; --line-soft:#1E2740; --line-strong:#33406A; --text:#DCE4F5; --text-dim:#8494B5; --text-faint:#5D6B8C; --text-invert:#0B1020; --cyan:#35E0C7; --cyan-ink:#04121A; --cyan-dim:rgba(53,224,199,.14); --cyan-line:rgba(53,224,199,.32); --violet:#7C6CF6; --violet-dim:rgba(124,108,246,.16); --amber:#F5A524; --amber-dim:rgba(245,165,36,.15); --danger:#FF6B6B; --danger-dim:rgba(255,107,107,.15); --ok:#3DDC97; --ok-dim:rgba(61,220,151,.15); --hero-bg:#0B1020; --hero-text:#FFFFFF; --hero-text-dim:#8494B5; --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow:0 8px 24px rgba(0,0,0,.38); --shadow-lg:0 18px 50px rgba(0,0,0,.5); } /* ── Base ───────────────────────────────────────────────────────────── */ *{box-sizing:border-box} html{scroll-behavior:smooth} /* A stray wide element used to scroll the whole page sideways on phones. `clip` is used rather than `hidden` because `hidden` turns the element into a scroll container, which silently breaks the sticky header. The `hidden` line is the fallback for engines without `clip`. */ html,body{max-width:100%} /* * Pinned on as well as , and with `clip` where the browser knows * it: `hidden` on the body alone still lets a phone pan sideways when a child * overflows, because the viewport scrolls even though the body clips. */ html{overflow-x:hidden;overflow-x:clip} body{overflow-x:hidden;overflow-x:clip} /* The shop's search / category / sort row: four columns with room, a stack without. It used to be an inline style, which is why the phone could not change it. */ .shop-filter{display:grid;grid-template-columns:1fr 220px 200px auto;gap:12px;align-items:end} .shop-filter .form-group{margin:0;min-width:0} @media (max-width:900px){ .shop-filter{grid-template-columns:1fr 1fr} .shop-filter .form-group:first-child{grid-column:1 / -1} } @media (max-width:560px){ .shop-filter{grid-template-columns:1fr} .shop-filter .btn{width:100%;justify-content:center} } body{ margin:0;background:var(--bg);color:var(--text); font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif; font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased; transition:background-color .25s ease,color .25s ease; } body.locale-fa,body.locale-ar{font-family:Vazirmatn,'Segoe UI',Tahoma,sans-serif} body.no-scroll{overflow:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit;font-size:inherit} :focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px} ::selection{background:var(--cyan);color:var(--cyan-ink)} .is-rtl .flip-rtl{transform:scaleX(-1)} .container{max-width:var(--container);margin:0 auto;padding:0 20px} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .center{text-align:center} .hide-sm{display:inline-flex} .skip-link{ position:absolute;inset-inline-start:-9999px;top:0;z-index:200; background:var(--cyan);color:var(--cyan-ink);padding:10px 18px; border-radius:0 0 10px 0;font-weight:700 } .skip-link:focus{inset-inline-start:0} /* ── Typography ─────────────────────────────────────────────────────── */ h1,h2,h3,h4{margin:0 0 14px;font-weight:800;line-height:1.3;color:var(--text);letter-spacing:-.3px} h1{font-size:clamp(26px,4vw,40px)} h2{font-size:clamp(21px,2.6vw,30px)} h3{font-size:19px} h4{font-size:15px} p{margin:0 0 14px} .lead{font-size:17px;color:var(--text-dim)} .sub{color:var(--text-dim);margin:0 0 20px} .eyebrow{ display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700; color:var(--cyan);background:var(--cyan-dim);padding:6px 14px;border-radius:999px; border:1px solid var(--cyan-line);margin-bottom:16px } .prose{line-height:1.9;color:var(--text-dim)} .prose h2,.prose h3{color:var(--text);margin-top:24px} .prose ul,.prose ol{padding-inline-start:22px} .prose li{margin-bottom:8px} .prose a{color:var(--cyan);text-decoration:underline} .section{padding:68px 0} .section-head{margin-bottom:34px;max-width:660px;display:flex;justify-content:space-between; align-items:flex-end;gap:18px;flex-wrap:wrap} .section-head p{color:var(--text-dim);margin:0} .section-head.center{text-align:center;justify-content:center;margin-inline:auto} .section-head.center p{margin-inline:auto;max-width:56ch} .breadcrumb{font-size:13px;color:var(--text-faint);padding:22px 0 6px} .breadcrumb a{color:var(--text-dim)} .breadcrumb a:hover{color:var(--cyan)} .divider{height:1px;background:var(--line);margin:18px 0;border:0} /* ── Grid ───────────────────────────────────────────────────────────── */ .grid{display:grid;gap:20px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} /* ── Buttons ──────────────────────────────────────────────────────── One shared shape, a subtle lift on hover and a real press on click, so every button in the system feels like the same physical control. ─────────────────────────────────────────────────────────────────── */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:11px 22px;border-radius:12px;border:1px solid transparent; font-weight:700;font-size:14.5px;line-height:1.2;letter-spacing:.1px; cursor:pointer;white-space:nowrap;isolation:isolate; transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; } .btn:active{transform:translateY(1px) scale(.99)} .btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px} /* A soft sheen that only appears on hover — flat by default, never gaudy. */ .btn::after{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0; background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0)); transition:opacity .18s ease } .btn:hover::after{opacity:1} .btn-primary{ background:linear-gradient(135deg,var(--cyan),color-mix(in srgb,var(--cyan) 72%,var(--violet))); color:var(--cyan-ink); box-shadow:0 1px 2px rgba(20,28,46,.10), 0 6px 18px -6px color-mix(in srgb,var(--cyan) 55%,transparent) } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(20,28,46,.10), 0 14px 28px -10px color-mix(in srgb,var(--cyan) 65%,transparent) } .btn-primary:active{box-shadow:0 1px 2px rgba(20,28,46,.14)} .btn-ghost{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:var(--shadow-sm)} .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px);box-shadow:var(--shadow)} .btn-danger{background:var(--danger-dim);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)} .btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);transform:translateY(-2px); box-shadow:0 10px 22px -10px var(--danger)} .btn-amber{background:var(--amber);color:#fff;box-shadow:0 6px 18px -8px var(--amber)} .btn-amber:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px var(--amber)} .btn-glass{ background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26);color:#fff; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px) } .btn-glass:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)} .btn-sm{padding:7px 15px;font-size:13px;border-radius:9px;gap:6px} .btn-lg{padding:15px 30px;font-size:15.5px;border-radius:14px} .btn-block{width:100%} .btn:disabled,.btn.disabled{ opacity:.45;cursor:not-allowed;transform:none !important;box-shadow:none !important;filter:grayscale(.4) } .btn:disabled::after,.btn.disabled::after{opacity:0} .icon-btn{ width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center; background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim); cursor:pointer;position:relative;flex-shrink:0; transition:transform .16s cubic-bezier(.2,.8,.3,1), color .18s, border-color .18s, background-color .18s } .icon-btn:hover{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dim);transform:translateY(-1px)} .icon-btn:active{transform:translateY(0) scale(.96)} /* ── Header ─────────────────────────────────────────────────────────── */ .site-header{ position:sticky;top:0;z-index:60; background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line) } /* * Nothing in the header may wrap. * * A flex row does not wrap by default, but any rule that turns wrapping on — * even for another element — lets the last menu items fall to a second line, * where they land beneath the language and cart buttons. Saying it explicitly * here means no later rule can reintroduce it by accident. */ /* * Three columns, not a flex row. * * A flex row can be made to behave, but only by getting every shrink and * margin exactly right — and it has been got wrong more than once here, with * the buttons ending up drawn on top of the last links. Grid columns cannot * overlap each other at all: each item is placed in its own track, and a * track that runs out of room pushes the layout wider rather than letting its * neighbour slide underneath. * * The middle track is the links. The gap between the tracks is what keeps the * two groups apart, and it is generous on purpose. */ .header-inner{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; column-gap:clamp(20px, 3vw, 52px); height:68px } /* * Nothing here shrinks — and that includes the links. * * This is what caused the overlap in practice. An earlier rule let the nav * shrink (`flex-shrink:1; min-width:0`) while its own children could not. * The nav's box therefore became narrower than the links inside it, the links * spilled out past the edge of that box, and the buttons — which sit * immediately after the box, not after the links — were drawn straight over * the top of them. That is why the language pill landed on "Reseller". * * With nothing shrinking, a link can never end up underneath a button. When * the row genuinely runs out of room the whole nav moves into the mobile * menu instead, which happens well before that point. */ .logo{ display:flex;align-items:center;gap:10px; grid-column:1;min-width:0 } .logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .logo img{max-height:38px;width:auto} .logo-mark{ width:36px;height:36px;border-radius:11px;display:grid;place-items:center; background:linear-gradient(135deg,var(--cyan),var(--violet)); color:var(--cyan-ink);font-weight:900;font-size:17px } .logo-text{font-weight:800;font-size:16px;letter-spacing:-.3px;white-space:nowrap} /* * The links must not wrap under the buttons on the other side. * * With only a few items there was room for both; once a Reseller link was * added the row ran out of width, and because the nav was allowed to shrink * while the buttons were not, the last links dropped onto a second line and * sat beneath the language picker. * * Now the row never wraps, the two groups keep a guaranteed gap, and the * whole nav moves into the mobile menu earlier — see the media query below. */ /* * The links never wrap and are never clipped. * * An earlier attempt gave this row `overflow-x:auto` with the scrollbar * hidden. That stopped the wrapping, but it also meant the last items simply * vanished once the row ran out of space — which is what happened after * signing in, when the account links appear and the row gets longer. Hiding a * menu item is worse than letting it wrap. * * Instead the row keeps everything visible, tightens up at middle widths, and * hands over to the mobile menu well before it would run out of room. */ /* The links sit in the middle track and never wrap. */ .main-nav{ display:flex;align-items:center;gap:4px; flex-wrap:nowrap; justify-content:flex-start; grid-column:2 } .main-nav > *{flex-shrink:0} .main-nav a{position:relative; padding:8px 13px;border-radius:9px;font-size:14px;font-weight:600; color:var(--text-dim);transition:.16s;display:inline-flex;align-items:center;gap:6px } .main-nav a:hover{color:var(--text);background:var(--surface-2)} .main-nav a.active{color:var(--cyan);background:var(--cyan-dim)} .main-nav a.nav-trial{ color:var(--cyan-ink); background:linear-gradient(135deg,var(--cyan),color-mix(in srgb,var(--cyan) 68%,var(--violet))); padding:8px 16px;border-radius:99px;font-weight:800; box-shadow:0 4px 14px -4px color-mix(in srgb,var(--cyan) 60%,transparent) } .main-nav a.nav-trial .nav-ico{color:var(--cyan-ink)} /* A slow shine sweeps across it, so the eye lands there without it blinking. */ .main-nav a.nav-trial::after{ content:"";position:absolute;inset:0;border-radius:99px;overflow:hidden;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%); background-size:220% 100%;background-position:220% 0; animation:trialShine 4.5s ease-in-out infinite } @keyframes trialShine{0%,72%{background-position:220% 0}100%{background-position:-120% 0}} @media (prefers-reduced-motion:reduce){.main-nav a.nav-trial::after{animation:none}} .nav-ico{ display:inline-flex;color:var(--ni,var(--cyan));opacity:.9; transition:transform .18s cubic-bezier(.2,.8,.3,1), opacity .18s } .main-nav a:hover .nav-ico{transform:translateY(-2px) scale(1.08);opacity:1} .main-nav a.active .nav-ico{opacity:1} .submenu a .nav-ico{color:var(--ni,var(--cyan))} .main-nav a.nav-trial:hover{ color:var(--cyan-ink);transform:translateY(-2px); box-shadow:0 8px 20px -5px color-mix(in srgb,var(--cyan) 70%,transparent) } .nav-badge{ font-size:10px;font-weight:800;padding:1px 7px;border-radius:99px; background:var(--cyan);color:var(--cyan-ink);vertical-align:middle } .has-children{position:relative} .submenu{ position:absolute;top:calc(100% + 12px);inset-inline-start:0;min-width:212px; background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px; box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px); transition:.18s;z-index:70 } .has-children:hover .submenu,.has-children:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)} /* * The last couple of parents open their menus toward the middle of the row. * * A submenu anchored to its parent's starting edge is fine anywhere except * near the end of the header, where it ran past the side of the screen — * and adding icons made every parent a little wider, which made reaching * that edge easier. The final two flip their anchor instead. */ .main-nav > .has-children:nth-last-child(-n+2) .submenu{ inset-inline-start:auto;inset-inline-end:0 } .submenu a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px; font-size:13.5px;color:var(--text-dim)} .submenu a:hover{background:var(--surface-2);color:var(--text)} /* A gap the layout cannot eat into, so the buttons and the links can never end up touching however long the labels turn out to be. */ /* The buttons sit in the last track, hard against the end. */ .header-actions{ display:flex;align-items:center;gap:9px; justify-self:end; grid-column:3 } .cart-btn{position:relative} .badge-dot{ position:absolute;top:-5px;inset-inline-end:-5px;min-width:19px;height:19px;padding:0 5px; border-radius:99px;background:var(--cyan);color:var(--cyan-ink); font-size:10.5px;font-weight:800;display:grid;place-items:center;line-height:1; border:2px solid var(--surface) } .badge-dot.alert{background:var(--danger);color:#fff} .avatar{ width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,var(--cyan),var(--violet)); color:var(--cyan-ink);font-weight:800;font-size:13px } /* On the avatar the counter is a small dot, not a full-size badge: at 19px it overflowed the 40px button and collided with the neighbouring controls. */ .user-menu .badge-dot{ top:-3px;inset-inline-end:-3px;min-width:16px;height:16px;padding:0 4px; font-size:9.5px;border-width:2px;line-height:1 } .user-menu .badge-dot:empty{display:none} .user-menu > .icon-btn{overflow:visible} .user-menu{position:relative} .dropdown{ position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:240px; background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px; box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px); transition:.18s;z-index:80 } .user-menu.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)} .dropdown-head{padding:11px 12px 12px;border-bottom:1px solid var(--line-soft);margin-bottom:5px} .dropdown-head b{display:block;font-size:14px} .dropdown-head span{display:block;font-size:11.5px;color:var(--text-faint);direction:ltr; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dropdown a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px; font-size:13.5px;color:var(--text-dim)} .dropdown a:hover{background:var(--surface-2);color:var(--text)} .dropdown-sep{height:1px;background:var(--line-soft);margin:5px 0} .dropdown .pill{ margin-inline-start:auto;background:var(--danger);color:#fff;font-size:10.5px; font-weight:800;padding:1px 7px;border-radius:99px } .burger{display:none} /* Language switcher */ .lang-switch{position:relative} .lang-btn{display:flex;align-items:center;gap:6px;width:auto;padding:0 11px} .lang-code{font-size:12.5px;font-weight:700;letter-spacing:.4px} .flag{box-shadow:0 0 0 1px var(--line-strong);flex-shrink:0} .lang-menu{ position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:212px; background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px; box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px); transition:.18s;z-index:90 } .lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)} .lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px; font-size:13.5px;color:var(--text-dim);transition:.15s} .lang-menu a:hover{background:var(--surface-2);color:var(--text)} .lang-menu a.active{background:var(--cyan-dim);color:var(--cyan);font-weight:700} .lang-native{font-weight:600} .lang-name{font-size:11.5px;color:var(--text-faint);margin-inline-start:auto} .lang-tick{display:flex;color:var(--cyan)} /* Theme toggle */ .theme-toggle{overflow:hidden} .theme-toggle .sun,.theme-toggle .moon{ position:absolute;display:flex;transition:opacity .22s ease,transform .28s ease } .theme-toggle .moon{opacity:0;transform:rotate(-45deg) scale(.6)} [data-theme="dark"] .theme-toggle .sun{opacity:0;transform:rotate(45deg) scale(.6)} [data-theme="dark"] .theme-toggle .moon{opacity:1;transform:rotate(0) scale(1)} /* ── Cards, panels, tables ──────────────────────────────────────────── */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:22px;box-shadow:var(--shadow-sm)} .card-flush{padding:0;overflow:hidden} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius); background:var(--surface)} table{width:100%;border-collapse:collapse;font-size:14px;min-width:600px} thead th{background:var(--surface-2);padding:13px 15px;text-align:start;font-size:12.5px; font-weight:700;color:var(--text-dim);border-bottom:1px solid var(--line);white-space:nowrap} tbody td{padding:14px 15px;border-bottom:1px solid var(--line-soft)} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--surface-2)} .empty{text-align:center;padding:56px 22px;color:var(--text-dim)} .empty .ico{opacity:.35;margin-bottom:14px;display:flex;justify-content:center} .empty h3{margin-bottom:8px} .alert{padding:14px 17px;border-radius:12px;margin-bottom:18px;font-size:14px; display:flex;gap:11px;align-items:flex-start;border:1px solid} .alert svg{flex-shrink:0;margin-top:2px} .alert-success{background:var(--ok-dim);color:var(--ok);border-color:var(--ok)} .alert-error{background:var(--danger-dim);color:var(--danger);border-color:var(--danger)} .alert-warning{background:var(--amber-dim);color:var(--amber);border-color:var(--amber)} .alert-info{background:var(--violet-dim);color:var(--violet);border-color:var(--violet)} .badge{display:inline-block;padding:3px 11px;border-radius:99px;font-size:11.5px;font-weight:700} .badge-ok{background:var(--ok-dim);color:var(--ok)} .badge-warn{background:var(--amber-dim);color:var(--amber)} .badge-danger{background:var(--danger-dim);color:var(--danger)} .badge-info{background:var(--violet-dim);color:var(--violet)} .badge-muted{background:var(--surface-3);color:var(--text-dim)} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:20px;box-shadow:var(--shadow-sm)} .stat .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:var(--cyan-dim);color:var(--cyan);margin-bottom:12px} .stat b{display:block;font-size:24px;font-weight:800;line-height:1.35} .stat span{font-size:13px;color:var(--text-dim)} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px} .pagination{display:flex;gap:7px;justify-content:center;margin-top:26px;flex-wrap:wrap} .pagination a{width:38px;height:38px;display:grid;place-items:center;border-radius:10px; background:var(--surface);border:1px solid var(--line);font-size:13.5px;font-weight:600} .pagination a:hover,.pagination a.active{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)} .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto} .tabs a,.tabs button{padding:11px 18px;background:none;border:0;border-bottom:2px solid transparent; color:var(--text-dim);font-weight:700;cursor:pointer;white-space:nowrap;font-size:14px} .tabs a.active,.tabs button.active{color:var(--cyan);border-bottom-color:var(--cyan)} .tab-panel{display:none} .tab-panel.active{display:block} /* ── Forms ──────────────────────────────────────────────────────────── */ .form-group{margin-bottom:17px} .form-group label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px} .form-group label .req{color:var(--danger)} .form-group label .opt{font-size:11px;font-weight:500;color:var(--text-faint); background:var(--surface-3);padding:2px 8px;border-radius:99px;margin-inline-start:6px} .form-control{ width:100%;padding:11px 14px;background:var(--surface);border:1px solid var(--line); border-radius:11px;color:var(--text);transition:.16s } .form-control:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px var(--cyan-dim)} .form-control::placeholder{color:var(--text-faint)} .form-control:disabled{background:var(--surface-2);color:var(--text-faint);cursor:not-allowed} textarea.form-control{min-height:110px;resize:vertical;line-height:1.8} select.form-control{cursor:pointer} .form-hint{font-size:12px;color:var(--text-faint);margin:6px 0 0;line-height:1.65} .form-hint code{background:var(--surface-3);padding:1px 6px;border-radius:5px;font-size:11.5px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px} .check{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;font-weight:500} .check input{width:17px;height:17px;accent-color:var(--cyan);cursor:pointer;flex-shrink:0} .terms-check{align-items:flex-start;line-height:1.7} .terms-check a{color:var(--cyan);text-decoration:underline} .input-icon{position:relative;display:flex;align-items:center} .input-icon .ii{position:absolute;inset-inline-start:13px;display:flex;color:var(--text-faint); pointer-events:none;transition:color .18s} .input-icon .form-control{padding-inline-start:42px} .input-icon:focus-within .ii{color:var(--cyan)} .pw-toggle{position:absolute;inset-inline-end:10px;background:none;border:0;cursor:pointer; color:var(--text-faint);display:flex;padding:6px;border-radius:8px;transition:.18s} .pw-toggle:hover{color:var(--cyan);background:var(--surface-2)} .input-icon:has(.pw-toggle) .form-control{padding-inline-end:42px} .pw-meter{height:4px;border-radius:99px;background:var(--line);margin-top:8px;overflow:hidden} .pw-meter i{display:block;height:100%;width:0;border-radius:99px;transition:width .3s,background .3s} .pw-meter.weak i{width:33%;background:var(--danger)} .pw-meter.medium i{width:66%;background:var(--amber)} .pw-meter.strong i{width:100%;background:var(--ok)} .form-control.is-mismatch{border-color:var(--danger)} .captcha-wrap{margin:4px 0 18px;display:flex;justify-content:center} .hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px; overflow:hidden;opacity:0;pointer-events:none} .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px; overflow:hidden;background:var(--surface)} .qty button{width:34px;height:36px;border:0;background:var(--surface-2);color:var(--text); cursor:pointer;font-size:16px;font-weight:700} .qty button:hover{background:var(--cyan);color:var(--cyan-ink)} .qty input{width:46px;height:36px;border:0;text-align:center;background:transparent;color:var(--text)} /* ── Hero slider ────────────────────────────────────────────────────── */ .hero-slider{ position:relative;overflow:hidden;background:var(--hero-bg);isolation:isolate; min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h)); } .hero-slider.single .slides,.hero-slider .slides{min-height:inherit} .hero-slider .slides{position:relative;height:100%;min-height:inherit} .slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden; transition:opacity .7s ease,visibility .7s;min-height:inherit} .slide.active{opacity:1;visibility:visible;position:relative;z-index:2} .slide-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .slide-bg img{width:100%;height:100%;object-fit:cover;display:block} .slide.active .slide-bg img{animation:slowZoom 9s ease-out forwards} @keyframes slowZoom{from{transform:scale(1.06)}to{transform:scale(1)}} .slide-gradient{ background: radial-gradient(900px 460px at 18% 8%,rgba(53,224,199,.20),transparent 62%), radial-gradient(760px 420px at 84% 92%,rgba(124,108,246,.24),transparent 60%), linear-gradient(160deg,#0E1626,#1B2745 62%,#0E1626); } .slide-gradient .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5; background:var(--slide-accent,#35E0C7)} .slide-gradient .orb-a{width:340px;height:340px;top:-90px;inset-inline-start:-70px;animation:float1 15s ease-in-out infinite} .slide-gradient .orb-b{width:290px;height:290px;bottom:-110px;inset-inline-end:-60px;background:#7C6CF6;animation:float2 18s ease-in-out infinite} @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,26px)}} @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-24px)}} .grid-lines{ position:absolute;inset:0;opacity:.3; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(circle at 50% 45%,#000 20%,transparent 78%); -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 20%,transparent 78%); } .slide-overlay{position:absolute;inset:0;z-index:1; background:linear-gradient(to var(--ov,right),rgba(11,16,32,.93),rgba(11,16,32,.62) 46%,rgba(11,16,32,.28))} .is-rtl .slide-overlay{--ov:left} .slide.theme-light .slide-overlay{ background:linear-gradient(to var(--ov,right),rgba(248,250,255,.95),rgba(248,250,255,.62) 50%,transparent)} .slide-inner{position:relative;z-index:3;width:100%;padding-block:52px} .slide-content{max-width:640px} .slide.align-center .slide-inner{display:flex;justify-content:center;text-align:center} .slide.align-center .slide-content{margin-inline:auto} .slide.align-end .slide-inner{display:flex;justify-content:flex-end;text-align:end} .slide-badge{ display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:99px; background:color-mix(in srgb,var(--slide-accent,#35E0C7) 16%,transparent); border:1px solid color-mix(in srgb,var(--slide-accent,#35E0C7) 42%,transparent); color:var(--slide-accent,#35E0C7);font-size:12.5px;font-weight:700;margin-bottom:18px } .slide-badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulseDot 2.2s infinite} @keyframes pulseDot{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent)} 70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent} } .slide-title{font-size:clamp(28px,4.6vw,52px);line-height:1.18;font-weight:800; margin:0 0 16px;letter-spacing:-.6px;color:var(--hero-text)} .slide.theme-light .slide-title{color:#0E1626} .slide-sub{font-size:clamp(15px,1.7vw,19px);line-height:1.7;color:var(--hero-text-dim); margin:0 0 28px;max-width:52ch} .slide.theme-light .slide-sub{color:#3B4763} .slide.align-center .slide-sub{margin-inline:auto} .slide-actions{display:flex;gap:12px;flex-wrap:wrap} .slide.align-center .slide-actions{justify-content:center} .slide.align-end .slide-actions{justify-content:flex-end} .slider-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:12; width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer; background:rgba(11,16,32,.55);border:1px solid rgba(255,255,255,.2);color:#fff; backdrop-filter:blur(8px);transition:.18s;opacity:0 } .hero-slider:hover .slider-arrow,.slider-arrow:focus-visible{opacity:1} .slider-arrow:hover{background:var(--cyan);color:var(--cyan-ink);border-color:transparent} .slider-arrow.prev{inset-inline-start:18px} .slider-arrow.next{inset-inline-end:18px} .is-rtl .slider-arrow svg{transform:scaleX(-1)} .slider-dots{position:absolute;bottom:22px;inset-inline-start:50%;transform:translateX(-50%); display:flex;gap:9px;z-index:12} .is-rtl .slider-dots{transform:translateX(50%)} .slider-dots .dot{width:30px;height:5px;border-radius:99px;border:0;cursor:pointer;padding:0; background:rgba(255,255,255,.3);overflow:hidden;transition:.25s} .slider-dots .dot:hover{background:rgba(255,255,255,.5)} .slider-dots .dot.active{width:46px} .slider-dots .dot i{display:block;height:100%;width:0;background:var(--cyan);border-radius:99px} /* ── Landing sections ───────────────────────────────────────────────── */ .trust-strip{border-block:1px solid var(--line);background:var(--surface)} .trust-strip .container{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-around;padding:16px 20px} .trust-item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-dim);font-weight:600} .trust-item .ico{color:var(--cyan);display:flex} .cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px} .cat-card{display:flex;flex-direction:column;align-items:center;gap:9px;padding:24px 16px; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); text-align:center;transition:.2s;box-shadow:var(--shadow-sm)} .cat-card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow)} .cat-ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center; background:var(--cyan-dim);color:var(--cyan)} .cat-card b{font-size:14.5px} .cat-count{font-size:11.5px;color:var(--text-faint)} .how-section{background:var(--surface-2);border-block:1px solid var(--line)} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px} .step{position:relative;padding:28px 22px;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)} .step-num{position:absolute;top:-14px;inset-inline-start:22px;width:30px;height:30px;border-radius:9px; display:grid;place-items:center;background:var(--cyan);color:var(--cyan-ink);font-weight:800;font-size:14px} .step-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px; background:var(--violet-dim);color:var(--violet);margin:8px 0 14px} .step h3{font-size:16.5px;margin:0 0 8px} .step p{font-size:13.5px;color:var(--text-dim);margin:0;line-height:1.75} .why-grid .why-card{padding:24px 20px;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);transition:.2s;box-shadow:var(--shadow-sm)} .why-grid .why-card:hover{border-color:var(--cyan-line);box-shadow:var(--shadow)} .why-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px; background:var(--cyan-dim);color:var(--cyan);margin-bottom:14px} .why-card h3{font-size:15.5px;margin:0 0 7px} .why-card p{font-size:13.5px;color:var(--text-dim);margin:0;line-height:1.75} .cta-band{padding:66px 0;text-align:center;border-top:1px solid var(--line); background:radial-gradient(700px 300px at 50% 0%,var(--cyan-dim),transparent 68%),var(--surface)} .cta-band h2{margin:0 0 12px} .cta-band p{color:var(--text-dim);max-width:56ch;margin:0 auto 26px} .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .cta-band .btn-glass{background:var(--surface-2);border-color:var(--line);color:var(--text)} .cta-band .btn-glass:hover{border-color:var(--cyan);color:var(--cyan)} /* ── Product cards ──────────────────────────────────────────────────── */ .product-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column;transition:.2s;box-shadow:var(--shadow-sm)} .product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--cyan-line)} .product-thumb{position:relative;aspect-ratio:16/9;background:var(--surface-2);display:block;overflow:hidden} .product-thumb img{width:100%;height:100%;object-fit:cover} .product-thumb .placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--text-faint)} .product-badge{position:absolute;top:11px;inset-inline-start:11px;padding:4px 11px;border-radius:99px; background:var(--cyan);color:var(--cyan-ink);font-size:11.5px;font-weight:800} .product-badge.out{background:var(--danger);color:#fff} .product-badge.trial{top:auto;bottom:11px;inset-inline-start:11px; background:var(--violet);color:#fff;display:inline-flex;align-items:center;gap:5px} .product-body{padding:18px;display:flex;flex-direction:column;flex:1} .product-cat{font-size:11.5px;color:var(--cyan);font-weight:700;text-transform:uppercase;letter-spacing:.4px} .product-body h3{font-size:16.5px;margin:6px 0 8px;line-height:1.4} .product-body h3 a:hover{color:var(--cyan)} .product-body .desc{font-size:13.5px;color:var(--text-dim);margin:0 0 16px;line-height:1.7;flex:1} .product-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .price .num{font-size:19px;font-weight:800;color:var(--text)} .price .was{font-size:13px;color:var(--text-faint);text-decoration:line-through} .price small{font-size:12px;color:var(--text-faint)} .price .from-label{font-size:11.5px;color:var(--text-faint);font-weight:600} .product-trial-link{ display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding-top:13px; border-top:1px dashed var(--line);font-size:12.5px;color:var(--violet);font-weight:600 } .product-trial-link:hover{color:var(--cyan)} /* ── Product detail ─────────────────────────────────────────────────── */ .product-layout{display:grid;grid-template-columns:1fr 390px;gap:28px;align-items:start} .product-hero-img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line); background:var(--surface-2)} .feature-list{list-style:none;padding:0;margin:0;display:grid;gap:11px} .feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-dim)} .feature-list li::before{content:"✓";color:var(--cyan);font-weight:800;flex-shrink:0} .plan-option{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line); border-radius:12px;margin-bottom:10px;cursor:pointer;transition:.16s;background:var(--surface)} .plan-option:hover{border-color:var(--cyan-line)} .plan-option.selected{border-color:var(--cyan);background:var(--cyan-dim)} .plan-option input{accent-color:var(--cyan)} .plan-option .labels{flex:1} .plan-option .name{display:block;font-weight:700;font-size:14.5px} .plan-option .dur{display:block;font-size:12px;color:var(--text-faint)} .plan-option .cost{font-weight:800;color:var(--cyan)} /* ── Cart & checkout ────────────────────────────────────────────────── */ .cart-layout{display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start} .cart-line{display:flex;gap:15px;padding:17px 0;border-bottom:1px solid var(--line-soft)} .cart-line:last-child{border-bottom:0} .cart-line .thumb{width:76px;height:56px;border-radius:11px;overflow:hidden;flex-shrink:0; background:var(--surface-2);display:grid;place-items:center;color:var(--text-faint)} .cart-line .thumb img{width:100%;height:100%;object-fit:cover} .cart-line .info{flex:1;min-width:0} .cart-line .plan{font-size:12.5px;color:var(--cyan)} .summary-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px; color:var(--text-dim)} .summary-row b{color:var(--text)} .summary-total{display:flex;justify-content:space-between;gap:12px;padding-top:14px;margin-top:8px; border-top:1px solid var(--line);font-size:17px;font-weight:800} .summary-total span:last-child{color:var(--cyan)} .coupon-box{display:flex;gap:9px;margin:16px 0} .coupon-box .form-control{flex:1} .pay-option{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--line); border-radius:13px;margin-bottom:11px;cursor:pointer;transition:.16s;background:var(--surface)} .pay-option:hover{border-color:var(--cyan-line)} .pay-option.selected{border-color:var(--cyan);background:var(--cyan-dim)} .pay-option input{accent-color:var(--cyan)} .pay-option b{display:block;font-size:14.5px} .pay-option span span{font-size:12.5px;color:var(--text-faint)} /* ── Account area ───────────────────────────────────────────────────── */ .account{display:grid;grid-template-columns:238px 1fr;gap:26px;align-items:start;padding:26px 0} .account-nav{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:9px;position:sticky;top:88px;box-shadow:var(--shadow-sm)} .account-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px; font-size:14px;color:var(--text-dim);transition:.16s;margin-bottom:2px} .account-nav a:hover{background:var(--surface-2);color:var(--text)} .account-nav a.active{background:var(--cyan-dim);color:var(--cyan);font-weight:700} .account-nav a .pill{margin-inline-start:auto;background:var(--danger);color:#fff;font-size:10.5px; font-weight:800;padding:1px 7px;border-radius:99px} .account-head{display:flex;justify-content:space-between;align-items:center;gap:14px; margin-bottom:22px;flex-wrap:wrap} .account-head h1{font-size:23px;margin:0} .service-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:20px;margin-bottom:16px;box-shadow:var(--shadow-sm)} .service-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px} .service-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--text-dim)} .service-meta b{color:var(--text)} .service-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px} /* The signature element: a bar whose colour tracks the reminder ladder. */ .expiry-meter{margin-top:15px} .expiry-meter .track{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden} .expiry-meter .fill{height:100%;border-radius:99px;background:var(--cyan);transition:width .6s ease} .expiry-meter .labels{display:flex;justify-content:space-between;font-size:12px; color:var(--text-faint);margin-top:7px} .expiry-meter.warn .fill{background:var(--amber)} .expiry-meter.danger .fill{background:var(--danger);animation:pulseBar 1.8s ease-in-out infinite} .expiry-meter.out .fill{background:var(--text-faint)} @keyframes pulseBar{0%,100%{opacity:1}50%{opacity:.55}} .credentials{background:var(--surface-2);border:1px solid var(--line);border-radius:11px; padding:15px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px; direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-all;line-height:1.8} .cred-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px} .notif{display:flex;gap:13px;padding:16px;background:var(--surface);border:1px solid var(--line); border-radius:13px;margin-bottom:11px} .notif.unread{border-color:var(--cyan-line);background:var(--cyan-dim)} .notif .ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center; background:var(--surface-2);color:var(--cyan);flex-shrink:0} .notif h4{font-size:14.5px;margin:0 0 5px} .notif p{font-size:13.5px;color:var(--text-dim);margin:0 0 6px} .notif time{font-size:11.5px;color:var(--text-faint)} /* ── FAQ ────────────────────────────────────────────────────────────── */ .faq-item{background:var(--surface);border:1px solid var(--line);border-radius:13px; margin-bottom:11px;overflow:hidden} .faq-q{padding:16px 19px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between; gap:14px;align-items:center;font-size:14.5px} .faq-q::after{content:"+";font-size:20px;color:var(--cyan);flex-shrink:0;transition:transform .2s} .faq-item.open .faq-q::after{transform:rotate(45deg)} /* Closed means nothing shows at all. A later rule re-added padding and a top border to this element, and those are not clipped by max-height — so a stripe of the answer stayed visible while the question looked shut. Every box property is reset here, and only the open state puts them back. */ .faq-a{ max-height:0;overflow:hidden;padding:0 19px;border-top:0;opacity:0; color:var(--text-dim);font-size:14px;line-height:1.8; transition:max-height .3s ease, padding .3s ease, opacity .2s ease } .faq-item.open .faq-a, .faq-item[open] .faq-a{ max-height:800px;padding:14px 19px 18px;border-top:1px solid var(--line-soft);opacity:1 } /* ── Free trial ─────────────────────────────────────────────────────── */ .trial-band{background:var(--surface-2);border-block:1px solid var(--line)} .trial-card{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px; box-shadow:var(--shadow)} .trial-copy h2{margin:0 0 12px} .trial-copy>p{color:var(--text-dim);margin:0 0 20px;line-height:1.75} .trial-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px} .trial-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:11px; background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;transition:.18s} .trial-chip:hover{border-color:var(--cyan);color:var(--cyan)} .trial-chip b{color:var(--cyan);font-size:11.5px} .trial-note{font-size:12px;color:var(--text-faint);margin:12px 0 0} .terminal{background:#080D18;border:1px solid #1E2740;border-radius:14px;overflow:hidden; box-shadow:var(--shadow-lg)} .terminal-bar{display:flex;align-items:center;gap:6px;padding:11px 14px; background:rgba(255,255,255,.04);border-bottom:1px solid #1E2740} .terminal-bar i{width:10px;height:10px;border-radius:50%;background:#2A3550} .terminal-bar i:first-child{background:#FF5F57} .terminal-bar i:nth-child(2){background:#FEBC2E} .terminal-bar i:nth-child(3){background:#28C840} .terminal-bar span{margin-inline-start:auto;font-size:11px;color:#6C7A9C} .terminal-body{padding:18px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px; line-height:2.1;direction:ltr;text-align:left} .terminal-body p{margin:0;color:#8494B5} .terminal-body .ok{color:#35E0C7;margin-inline-end:8px} .terminal-body .cursor{color:#35E0C7;margin-top:6px} .terminal-body .cursor span{animation:blink 1.1s steps(2) infinite} @keyframes blink{50%{opacity:0}} .trial-page{padding-top:10px} .trial-layout{display:grid;grid-template-columns:1fr 400px;gap:26px;align-items:start} .trial-options{min-width:0} .trial-form-wrap{min-width:0} .trial-step-title{display:flex;align-items:center;gap:10px;font-size:15.5px;margin:0 0 16px} .trial-step-title span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center; background:var(--cyan);color:var(--cyan-ink);font-size:13px;font-weight:800;flex-shrink:0} .trial-option{display:flex;align-items:center;gap:14px;padding:15px;margin-bottom:11px; background:var(--surface);border:1px solid var(--line);border-radius:15px;transition:.18s; box-shadow:var(--shadow-sm)} .trial-option:hover{border-color:var(--cyan-line)} .trial-option.selected{border-color:var(--cyan);background:var(--cyan-dim)} .trial-option.sold-out{opacity:.5;pointer-events:none} .to-thumb{width:52px;height:52px;border-radius:13px;flex-shrink:0;display:grid;place-items:center; background:var(--surface-2);color:var(--cyan);overflow:hidden} .to-thumb img{width:100%;height:100%;object-fit:cover} .to-body{flex:1;min-width:0} .to-body b{display:block;font-size:14.5px;margin-bottom:3px} .to-desc{display:block;font-size:12.5px;color:var(--text-faint);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .to-tags{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap} .to-tags i{font-style:normal;font-size:11px;padding:2px 9px;border-radius:99px; background:var(--surface-3);color:var(--text-dim)} .to-tags .tag-free{background:var(--cyan-dim);color:var(--cyan);font-weight:700} .to-tags .tag-out{background:var(--danger-dim);color:var(--danger)} .to-check{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; border:1px solid var(--line);color:transparent;transition:.18s} .trial-option.selected .to-check{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)} .trial-form{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px; position:sticky;top:88px;box-shadow:var(--shadow-sm)} .trial-form.placeholder{text-align:center;padding:52px 24px;color:var(--text-faint)} .trial-form.placeholder .ico{display:block;opacity:.4;margin-bottom:12px} .trial-duration{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px; background:var(--cyan-dim);color:var(--cyan);font-size:13px;font-weight:700;margin-bottom:20px} .trial-result{max-width:720px;margin-inline:auto;background:var(--surface); border:1px solid var(--cyan-line);border-radius:20px;padding:30px;box-shadow:var(--shadow)} .trial-result-head{display:flex;align-items:center;gap:16px;margin-bottom:24px} .ok-ring{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; background:var(--cyan-dim);color:var(--cyan);box-shadow:0 0 0 6px var(--cyan-dim)} .trial-result-head h2{font-size:19px;margin:0 0 4px} .trial-result-head p{margin:0;font-size:13.5px;color:var(--text-dim)} .trial-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--text-dim)} .trial-meta span{display:flex;align-items:center;gap:7px} .trial-guide{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)} .trial-guide h3{font-size:15.5px;margin:0 0 10px} .trial-result-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px} /* ── Authentication ───────────────────────────────────────────────────── Desktop: showcase panel beside the form. Mobile: the panel is removed entirely and the form fills the screen. ─────────────────────────────────────────────────────────────────────── */ .auth-screen.has-visual{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); padding:0;gap:0;align-items:stretch } .auth-screen.has-visual .auth-side{ display:flex;flex-direction:column;min-height:100vh;min-height:100svh; padding:0 20px calc(24px + env(safe-area-inset-bottom)); background:var(--surface);border-inline-start:1px solid var(--line) } .auth-visual{ position:relative;overflow:hidden;display:flex;align-items:center;isolation:isolate; background:linear-gradient(155deg,#0E1626,#1B2745 55%,#0E1626); /* Without its own height the grid column collapsed to the tallest slide, so a short headline left the panel well under full screen. */ min-height:100vh;min-height:100svh } .auth-visual .auth-slides, .auth-visual .auth-slide{min-height:inherit} .auth-slides{position:relative;width:100%;min-height:100%;display:flex;align-items:center} .auth-slide{position:absolute;inset:0;display:flex;align-items:center; opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s} .auth-slide.active{opacity:1;visibility:visible;position:relative;z-index:2;width:100%} .auth-slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .auth-slide-scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(150deg,rgba(14,22,38,.94),rgba(14,22,38,.66) 55%,rgba(14,22,38,.88))} .auth-slide-body{position:relative;z-index:3;padding:clamp(34px,5vw,64px);max-width:560px;margin-inline:auto} .auth-slide-body h2{font-size:clamp(24px,2.7vw,38px);line-height:1.25;font-weight:800;color:#fff; margin:0 0 14px;letter-spacing:-.5px} .auth-slide-body p{font-size:clamp(14px,1.2vw,16.5px);line-height:1.75;color:#A9B7D0;margin:0} .auth-dots{position:absolute;bottom:26px;inset-inline-start:clamp(34px,5vw,64px);display:flex;gap:8px;z-index:5} .auth-dots button{width:26px;height:4px;border:0;border-radius:99px;padding:0;cursor:pointer; background:rgba(255,255,255,.26);transition:.25s} .auth-dots button.active{width:40px;background:var(--cyan)} .auth-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;z-index:0} .auth-orb.orb-1{width:340px;height:340px;background:var(--cyan);top:-100px;inset-inline-start:-90px} .auth-orb.orb-2{width:300px;height:300px;background:var(--violet);bottom:-110px;inset-inline-end:-70px} /* ── Authentication: centred card ───────────────────────────────────── */ .auth-body{ margin:0;min-height:100vh;min-height:100svh; background: radial-gradient(760px 420px at 12% -10%,var(--cyan-dim),transparent 62%), radial-gradient(700px 400px at 92% 110%,var(--violet-dim),transparent 60%), var(--bg); } .auth-screen{ min-height:100vh;min-height:100svh; display:flex;flex-direction:column; padding:0 20px calc(24px + env(safe-area-inset-bottom)); } .auth-topbar{ display:flex;align-items:center;justify-content:space-between;gap:14px; width:100%;max-width:520px;margin:0 auto;padding:22px 0 6px;flex-shrink:0 } .auth-topbar-actions{display:flex;align-items:center;gap:8px} .auth-main{ flex:1;display:flex;flex-direction:column;justify-content:center; width:100%;max-width:520px;margin:0 auto;padding:20px 0 } .auth-card{ background:var(--surface);border:1px solid var(--line); border-radius:20px;padding:clamp(24px,4vw,38px); box-shadow:var(--shadow-lg);width:100% } .auth-foot{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; margin-top:20px;font-size:12.5px;color:var(--text-faint) } .auth-secure{display:flex;align-items:center;gap:7px} .auth-secure svg{color:var(--ok)} .auth-back{display:flex;align-items:center;gap:6px;color:var(--text-dim)} .auth-back:hover{color:var(--cyan)} .auth-head{margin-bottom:24px} .auth-head h1{font-size:clamp(21px,2.4vw,28px);margin:0 0 8px} .auth-head p{color:var(--text-dim);font-size:14.5px;margin:0;line-height:1.7} .auth-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px; background:var(--cyan-dim);color:var(--cyan);margin-bottom:16px} .auth-form .form-group{margin-bottom:16px} .auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;margin:4px 0 18px} .auth-link{font-size:13.5px;color:var(--cyan)} .auth-link:hover{text-decoration:underline} .auth-alt{margin-top:22px;text-align:center} .auth-alt p{font-size:13.5px;color:var(--text-dim);margin:0 0 11px} .auth-sep{display:flex;align-items:center;gap:14px;margin:22px 0 16px} .auth-sep i{flex:1;height:1px;background:var(--line)} .auth-sep b{font-size:12px;color:var(--text-faint);font-weight:600; text-transform:uppercase;letter-spacing:.6px} /* ── Footer ─────────────────────────────────────────────────────────── */ .site-footer{background:var(--surface);border-top:1px solid var(--line);padding:52px 0 0;margin-top:60px} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px} .footer-brand p{font-size:13.5px;color:var(--text-dim);line-height:1.75} .site-footer h4{font-size:14.5px;margin:0 0 14px} .site-footer a{display:block;font-size:13.5px;color:var(--text-dim);padding:5px 0;transition:.16s} .site-footer a:hover{color:var(--cyan)} .socials{display:flex;gap:9px;margin-top:14px} .socials a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;padding:0; background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim)} .socials a:hover{color:var(--cyan);border-color:var(--cyan)} .footer-pay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center; padding:20px 0;border-top:1px solid var(--line-soft)} .footer-pay>span{font-size:12.5px;color:var(--text-faint)} .pay-badges{display:flex;gap:9px;flex-wrap:wrap} .pay-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px; background:var(--surface-2);border:1px solid var(--line);font-size:12px;color:var(--text-dim)} .pay-badge svg{color:var(--cyan)} .footer-langs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:18px 0; border-top:1px solid var(--line-soft)} .footer-langs a{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px; border:1px solid var(--line);font-size:12.5px;color:var(--text-dim)} .footer-langs a:hover{border-color:var(--cyan);color:var(--cyan)} .footer-langs a.active{background:var(--cyan-dim);border-color:var(--cyan);color:var(--cyan)} .footer-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:20px 0;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--text-faint)} /* ── Mobile bottom bar ──────────────────────────────────────────────── */ .mobile-nav{display:none} .mn-icon{position:relative;display:flex} .mn-badge{position:absolute;top:-5px;inset-inline-end:-8px;min-width:16px;height:16px;padding:0 4px; border-radius:99px;background:var(--cyan);color:var(--cyan-ink);font-size:9.5px;font-weight:800; font-style:normal;display:grid;place-items:center;line-height:1} .mn-badge.alert{background:var(--danger);color:#fff} /* ── Back to top ────────────────────────────────────────────────────── */ .back-to-top{position:fixed;inset-inline-end:22px;bottom:26px;z-index:80; width:46px;height:46px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;cursor:pointer;background:var(--surface);color:var(--text-dim); box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(14px) scale(.9); transition:opacity .25s,transform .25s,visibility .25s,color .18s,border-color .18s} .back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .back-to-top:hover{color:var(--cyan);border-color:var(--cyan)} .back-to-top:active{transform:scale(.93)} .back-to-top .ring{position:absolute;inset:-1px;transform:rotate(-90deg);pointer-events:none} .back-to-top .ring circle{fill:none;stroke:var(--cyan);stroke-width:2; stroke-dasharray:var(--ring-len,145);stroke-dashoffset:var(--ring-offset,145); transition:stroke-dashoffset .1s linear} /* ── Misc ───────────────────────────────────────────────────────────── */ .toast{position:fixed;bottom:26px;inset-inline-start:50%;transform:translateX(-50%) translateY(20px); background:var(--text);color:var(--surface);padding:12px 22px;border-radius:12px;font-size:14px; font-weight:600;opacity:0;visibility:hidden;transition:.25s;z-index:120;box-shadow:var(--shadow-lg)} .toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .spinner{width:52px;height:52px;margin:0 auto;border-radius:50%; border:3px solid var(--line);border-top-color:var(--cyan);animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .geo-facts{display:none !important} /* ── Responsive ─────────────────────────────────────────────────────── */ @media (max-width:1080px){ .product-layout,.cart-layout,.trial-layout{grid-template-columns:1fr} .account{grid-template-columns:1fr} .account-nav{position:static;display:flex;gap:6px;overflow-x:auto} .account-nav a{white-space:nowrap;margin:0} .grid-4{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr;gap:28px} } @media (max-width:1440px){ .main-nav{ position:fixed;inset:68px 0 auto;flex-direction:column;align-items:stretch;gap:2px; background:var(--surface);border-bottom:1px solid var(--line);padding:14px 20px 20px; margin:0;display:none;box-shadow:var(--shadow-lg);max-height:calc(100vh - 68px);overflow-y:auto } .main-nav.open{display:flex} .main-nav a{padding:12px 14px;font-size:15px} .burger{display:inline-grid} .hide-sm{display:none} .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none; border:0;padding:0 0 0 14px} .lang-menu,.dropdown{ min-width:0;width:max-content;max-width:calc(100vw - 28px); inset-inline-end:0;inset-inline-start:auto } .grid-3,.grid-2{grid-template-columns:1fr} .trial-card{grid-template-columns:1fr;padding:26px} .trial-visual{display:none} .trial-form{position:static} .hero-slider{ min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h)) } .slider-arrow{display:none} .slide-inner{padding-block:40px} .slide.align-end .slide-inner,.slide.align-center .slide-inner{justify-content:flex-start;text-align:start} .section{padding:46px 0} .lang-name{display:none} .footer-grid{grid-template-columns:1fr} /* * The app bar, with the centre button set into a carved notch. * * The bar's white surface is painted on a layer of its own and a circle * is cut out of that layer's top edge, so the surface runs up to the * centre button, keeps a few pixels of daylight all the way around it, * and carries on to the items on the far side — the way a native app * bar wraps its floating button. */ .mobile-nav{ display:flex;position:fixed;bottom:0;left:0;right:0;width:100%;z-index:990; background:transparent; padding:10px 6px calc(9px + env(safe-area-inset-bottom)); justify-content:space-around;align-items:flex-end } .mobile-nav::before{ content:"";position:absolute;inset:0;z-index:-1; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -6px 26px rgba(20,28,46,.14); /* The notch: transparent inside the circle, surface outside it. */ /* Centred on the button's own centre (11px below the bar's top edge), so the ring of air around it is the same width all the way round — it used to be cut at the top edge, which left the sides open and the bottom of the circle touching the button. */ -webkit-mask:radial-gradient(circle 36px at 50% 12px, transparent 35px, #000 36px); mask:radial-gradient(circle 36px at 50% 12px, transparent 35px, #000 36px) } .mobile-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px; padding:6px 2px 4px;border-radius:12px;font-size:10.5px;font-weight:700;color:var(--text-faint); transition:color .18s, transform .15s;min-width:0;text-align:center} .mobile-nav a:active{transform:scale(.95)} .mobile-nav a span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mobile-nav a .mn-icon{transition:transform .18s} /* The signed-in face, sized like the icons around it. */ .mn-avatar{display:grid;place-items:center} .mn-avatar img,.mn-avatar .avatar{width:24px !important;height:24px !important; border-radius:50%;object-fit:cover;font-size:11px} .mobile-nav a.active .mn-avatar img, .mobile-nav a.active .mn-avatar .avatar{box-shadow:0 0 0 2px var(--cyan)} .mobile-nav a.active{color:var(--cyan)} .mobile-nav a.active .mn-icon{transform:translateY(-1px)} /* A small dot under the active item, like a native tab bar. */ .mobile-nav a.active::after{ content:"";width:4px;height:4px;border-radius:50%;background:var(--cyan);margin-top:1px } .mobile-nav-fab{position:relative} .mobile-nav-fab .fab{ width:58px;height:58px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,var(--cyan),var(--violet));color:var(--cyan-ink); box-shadow:0 10px 26px var(--cyan-line); /* Lifted so its centre sits on the bar's top edge, inside the notch. */ margin:-38px auto 5px;position:relative; transition:transform .2s; animation:fabBreathe 2.6s ease-in-out infinite } /* The pulse: a ring that swells out of the button and fades, forever. */ .mobile-nav-fab .fab::before{ content:"";position:absolute;inset:0;border-radius:inherit; animation:fabRing 2.6s ease-out infinite } @keyframes fabBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} } @keyframes fabRing{ 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--cyan) 45%, transparent)} 70%{box-shadow:0 0 0 15px transparent} 100%{box-shadow:0 0 0 0 transparent} } .mobile-nav-fab:active .fab{transform:scale(.93)} @media (prefers-reduced-motion:reduce){ .mobile-nav-fab .fab{animation:none} .mobile-nav-fab .fab::before{animation:none} } body{padding-bottom:78px} .back-to-top{bottom:92px;inset-inline-end:16px;width:42px;height:42px} /* ── Header must fit a phone ────────────────────────────────────── Five 40px controls plus a logo overflowed a 360px screen, which is what pushed the whole page sideways. Everything shrinks, and the items already reachable from the bottom bar step aside. */ .header-inner{gap:10px;height:60px} .header-actions{gap:6px} .icon-btn{width:36px;height:36px;border-radius:10px} .logo img{max-height:32px} .logo-mark{width:32px;height:32px;font-size:15px;border-radius:9px} .logo-text{font-size:14.5px;max-width:38vw;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .btn-sm{padding:6px 11px;font-size:12.5px} /* The cart and account both live in the bottom bar on mobile. */ .header-actions .cart-btn{display:none} :root{--header-h:60px} } @media (max-width:560px){ .lang-code{display:none} .lang-btn{padding:0;width:36px} .logo-text{display:none} /* * The avatar stays on a phone. * * It used to be hidden here on the theory that the bottom bar covers the * account — but the menu also holds notifications, orders and sign-out, * and a signed-in person taps their own face expecting it to answer. * Only the name and the chevron give way; the face is enough. */ /* The name gives way; the face and the little arrow stay — without the arrow, nothing says the avatar opens the account menu at all. */ .user-btn .user-btn-name{display:none} .user-btn{padding:4px 6px;gap:4px} .header-actions .btn{padding:6px 10px;font-size:12px} .grid-4{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .trust-strip .container{justify-content:flex-start;gap:18px;overflow-x:auto;flex-wrap:nowrap} .trust-item{white-space:nowrap;font-size:12.5px} .slide-title{font-size:clamp(24px,7vw,32px)} .slide-actions .btn,.cta-actions .btn{width:100%;justify-content:center} .captcha-wrap .g-recaptcha{transform:scale(.86);transform-origin:center} } @media (max-width:980px){ /* No showcase panel on a phone — the form gets the whole screen. */ .auth-visual{display:none} .auth-screen.has-visual{grid-template-columns:1fr} .auth-screen.has-visual .auth-side{ border-inline-start:0;padding:0 20px calc(24px + env(safe-area-inset-bottom)) } } @media (max-width:560px){ .auth-screen{padding-inline:14px} .auth-screen.has-visual .auth-side{padding-inline:14px} .auth-card{padding:22px 18px;border-radius:16px} .auth-foot{justify-content:center;text-align:center} } @media (max-width:400px){ /* Smallest phones: drop the sign-in link, the bottom bar covers it. */ .header-actions .btn-ghost{display:none} .container{padding:0 14px} .mobile-nav a{font-size:9.5px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} } /* Utility classes referenced from templates */ .left{text-align:start} .right{text-align:end} .summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px} .copy-btn{cursor:pointer} .copy-btn.copied{color:var(--ok);border-color:var(--ok)} /* ═══════════════════════════════════════════════════════════════════════ v1.5 — news ticker, reviews ═══════════════════════════════════════════════════════════════════════ */ /* ── News ticker ────────────────────────────────────────────────────── */ .newsbar{ display:flex;align-items:stretch;gap:0; background:var(--surface-2);border-bottom:1px solid var(--line); font-size:13.5px;overflow:hidden;position:relative;z-index:50 } .newsbar-tag{ display:flex;align-items:center;gap:9px;padding:9px 16px;flex-shrink:0; background:var(--cyan);color:var(--cyan-ink);font-weight:800;font-size:12.5px; letter-spacing:.4px;text-transform:uppercase;position:relative;z-index:2 } /* A soft double ring rather than a hard blink — reads as "live", not as an alarm. */ .pulse{position:relative;width:9px;height:9px;flex-shrink:0} .pulse i{position:absolute;inset:0;border-radius:50%;background:currentColor} .pulse i:first-child{animation:pulseRing 2s ease-out infinite;opacity:.55} .pulse i:last-child{transform:scale(.55)} @keyframes pulseRing{ 0%{transform:scale(.55);opacity:.65} 70%{transform:scale(2.4);opacity:0} 100%{transform:scale(2.4);opacity:0} } .newsbar-viewport{flex:1;overflow:hidden;position:relative;min-width:0} /* Fade the edges so items appear and vanish rather than getting cut. */ .newsbar-viewport::before,.newsbar-viewport::after{ content:"";position:absolute;top:0;bottom:0;width:36px;z-index:2;pointer-events:none } .newsbar-viewport::before{inset-inline-start:0; background:linear-gradient(to right,var(--surface-2),transparent)} .newsbar-viewport::after{inset-inline-end:0; background:linear-gradient(to left,var(--surface-2),transparent)} .is-rtl .newsbar-viewport::before{background:linear-gradient(to left,var(--surface-2),transparent)} .is-rtl .newsbar-viewport::after{background:linear-gradient(to right,var(--surface-2),transparent)} .newsbar-track{display:flex;width:max-content;animation:newsScroll var(--news-speed,45s) linear infinite} .is-rtl .newsbar-track{animation-name:newsScrollRtl} .newsbar.paused .newsbar-track{animation-play-state:paused} @keyframes newsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes newsScrollRtl{from{transform:translateX(0)}to{transform:translateX(50%)}} .newsbar-run{display:flex;align-items:center;flex-shrink:0} .news-item{ display:inline-flex;align-items:center;gap:9px;padding:9px 20px;white-space:nowrap; color:var(--text-dim);border-inline-end:1px solid var(--line) } .news-item:hover{color:var(--cyan)} .news-item .news-title{font-weight:600;color:var(--text)} .news-item:hover .news-title{color:var(--cyan)} .news-item time{font-size:11.5px;color:var(--text-faint);font-variant-numeric:tabular-nums} .news-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex-shrink:0} .news-item.tone-success .news-dot{background:var(--ok)} .news-item.tone-warning .news-dot{background:var(--amber)} .news-item.tone-danger .news-dot{background:var(--danger)} .news-item.tone-danger .news-title{color:var(--danger)} .newsbar-all{ display:flex;align-items:center;gap:6px;padding:9px 15px;flex-shrink:0; border-inline-start:1px solid var(--line);color:var(--text-dim);font-size:12.5px;font-weight:600 } .newsbar-all:hover{color:var(--cyan)} /* ── Reviews ────────────────────────────────────────────────────────── */ .reviews-section{background:var(--surface-2);border-block:1px solid var(--line)} .rating-summary{ display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; margin:-8px 0 30px;color:var(--text-dim);font-size:14px } .rating-score{font-size:34px;font-weight:800;color:var(--text);line-height:1} .stars{display:inline-flex;gap:2px;color:var(--amber);vertical-align:middle} .stars svg.off{opacity:.28} .review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px} .review-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:22px;display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow-sm); transition:.2s;position:relative } .review-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .review-card.featured{border-color:var(--cyan-line)} .review-quote{ position:absolute;top:14px;inset-inline-end:18px;font-size:52px;line-height:1; color:var(--cyan);opacity:.13;font-family:Georgia,serif;pointer-events:none } .review-head{display:flex;align-items:center;gap:12px} .review-avatar{ width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center; background:linear-gradient(135deg,var(--cyan),var(--violet));color:var(--cyan-ink); font-weight:800;font-size:16px;overflow:hidden } .review-avatar img{width:100%;height:100%;object-fit:cover} .review-who b{display:block;font-size:14.5px} .review-who span{font-size:12px;color:var(--text-faint)} .review-verified{ display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700; color:var(--ok);background:var(--ok-dim);padding:2px 8px;border-radius:99px;margin-top:3px } .review-title{font-weight:700;font-size:15px;margin:0} .review-body{font-size:13.5px;color:var(--text-dim);line-height:1.8;margin:0;flex:1} .review-foot{ display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; font-size:11.5px;color:var(--text-faint);padding-top:12px;border-top:1px solid var(--line-soft) } .review-product{color:var(--cyan);font-weight:600} .review-reply{ background:var(--surface-2);border-inline-start:3px solid var(--cyan); border-radius:0 8px 8px 0;padding:11px 14px;font-size:13px;color:var(--text-dim);margin-top:4px } .is-rtl .review-reply{border-radius:8px 0 0 8px} .review-reply b{display:block;font-size:12px;color:var(--cyan);margin-bottom:4px} /* Star picker on the submission form */ .star-picker{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:5px} .star-picker input{position:absolute;opacity:0;width:0;height:0} .star-picker label{cursor:pointer;color:var(--line-strong);transition:color .15s;display:flex} .star-picker label:hover,.star-picker label:hover ~ label, .star-picker input:checked ~ label{color:var(--amber)} .star-picker input:focus-visible + label{outline:2px solid var(--cyan);border-radius:4px} @media (max-width:860px){ /* On a phone the ticker scrolls by hand — an auto-marquee is unreadable there. */ .newsbar-tag{padding:8px 12px;font-size:11.5px} .newsbar-tag b{display:none} .newsbar-all{display:none} .newsbar-track{animation:none;width:auto} .newsbar-run:last-child{display:none} .newsbar-viewport{overflow-x:auto;scrollbar-width:none} .newsbar-viewport::-webkit-scrollbar{display:none} .newsbar-viewport::before,.newsbar-viewport::after{display:none} .news-item{padding:8px 14px} .news-item time{display:none} .review-grid{grid-template-columns:1fr} } /* ── Latest articles marquee ────────────────────────────────────────── */ .blog-strip-section{overflow:hidden} .blog-strip{overflow:hidden;padding:4px 0 8px;position:relative} .blog-strip-track{display:flex;width:max-content;animation:blogScroll 46s linear infinite} /* RTL locales read right to left, so the strip travels the other way. */ .is-rtl .blog-strip-track{animation-name:blogScrollRtl} .blog-strip.paused .blog-strip-track{animation-play-state:paused} @keyframes blogScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes blogScrollRtl{from{transform:translateX(0)}to{transform:translateX(50%)}} .blog-strip-run{display:flex;gap:20px;padding-inline:10px;flex-shrink:0} .blog-strip-card{ width:300px;flex-shrink:0;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column; box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease } .blog-strip-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .bsc-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden} .bsc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease} .blog-strip-card:hover .bsc-thumb img{transform:scale(1.05)} .bsc-placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--text-faint)} .bsc-cat{ position:absolute;bottom:10px;inset-inline-start:10px;padding:3px 10px;border-radius:99px; color:#fff;font-size:11px;font-weight:700;letter-spacing:.2px } .bsc-body{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1} .bsc-body h3{font-size:15px;line-height:1.45;margin:0 0 7px} .bsc-body h3 a:hover{color:var(--cyan)} .bsc-body p{font-size:12.5px;color:var(--text-dim);line-height:1.65;margin:0 0 12px;flex:1} .bsc-foot{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-size:11px;color:var(--text-faint);padding-top:11px;border-top:1px solid var(--line-soft) } .bsc-more{margin-inline-start:auto;color:var(--cyan);font-weight:700;display:inline-flex;align-items:center;gap:4px} @media (max-width:860px){ /* Auto-scroll is replaced by a swipeable strip: a moving target is hard to tap. */ .blog-strip-track{animation:none;width:auto} .blog-strip-run:last-child{display:none} .blog-strip{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory} .blog-strip::-webkit-scrollbar{display:none} .blog-strip-run{padding-inline:16px} .blog-strip-card{width:270px;scroll-snap-align:center} } @media (prefers-reduced-motion:reduce){.blog-strip-track{animation:none}} /* ── Subscription status and credential box ─────────────────────────── */ .service-state{ display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px; font-size:12.5px;font-weight:700;flex-shrink:0;align-self:flex-start } .service-state svg{flex-shrink:0} .service-state.state-active{background:var(--ok-dim);color:var(--ok)} .service-state.state-expired{background:var(--danger-dim);color:var(--danger)} .service-state.state-suspended{background:var(--amber-dim);color:var(--amber)} .service-state.state-cancelled{background:var(--surface-3);color:var(--text-dim)} .state-trial{ font-style:normal;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:99px; background:var(--violet);color:#fff;margin-inline-start:2px } .cred-head{display:flex;justify-content:space-between;align-items:center;margin:18px 0 9px} .cred-box{position:relative} /* The copy control sits inside the box at the trailing edge, so it stays with the text it copies instead of floating in the header. */ .cred-box .credentials{padding-inline-end:52px} .cred-copy{ position:absolute;top:9px;inset-inline-end:9px; width:34px;height:34px;border-radius:9px;display:grid;place-items:center;cursor:pointer; background:var(--surface);border:1px solid var(--line);color:var(--text-dim); transition:.16s;z-index:2 } .cred-copy:hover{color:var(--cyan);border-color:var(--cyan)} .cred-copy.copied{background:var(--ok);border-color:var(--ok);color:#fff} /* ── Logo, with independent desktop and mobile artwork ──────────────── */ .logo-pic{display:block;line-height:0} .logo-pic img{height:var(--logo-h,38px);width:auto;max-width:210px;object-fit:contain;display:block} .footer-logo{display:inline-block;margin-bottom:12px} .footer-logo .logo-pic img{max-width:190px} .footer-brand .logo-mark{ width:40px;height:40px;font-size:18px;border-radius:12px;margin-bottom:10px; display:grid;place-items:center; background:linear-gradient(135deg,var(--cyan),var(--violet));color:var(--cyan-ink);font-weight:900 } .footer-brand .logo-text{display:block;font-weight:800;font-size:17px;margin-bottom:10px} @media (max-width:860px){ .logo-pic img{height:var(--logo-h-sm,32px);max-width:150px} .footer-logo .logo-pic img{max-width:160px} } /* ── Setup guide and related articles ───────────────────────────────── */ .guide-block{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:14px} .guide-block summary{ cursor:pointer;font-weight:700;font-size:13.5px;color:var(--cyan); display:flex;align-items:center;gap:8px;list-style:none } .guide-block summary::-webkit-details-marker{display:none} .guide-block summary::after{content:"+";margin-inline-start:auto;font-size:17px;transition:transform .2s} .guide-block[open] summary::after{transform:rotate(45deg)} .guide-body{margin-top:14px;font-size:14px;line-height:1.85} .guide-body img{border-radius:10px;margin:12px 0} .guide-body h2,.guide-body h3{font-size:16px;margin:18px 0 8px} .guide-related-title{font-size:14px;margin:22px 0 12px;color:var(--text)} .guide-strip{margin-inline:-4px} .guide-strip .blog-strip-card{width:230px} .guide-strip .blog-strip-track{animation-duration:34s} /* ── App downloads ──────────────────────────────────────────────────── */ .apps-group{ display:flex;align-items:center;gap:9px;font-size:15px;margin:26px 0 12px;color:var(--text) } .apps-group svg{color:var(--cyan)} .apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px} .app-card{ position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-sm);transition:.18s;flex-wrap:wrap } .app-card:hover{border-color:var(--cyan-line);box-shadow:var(--shadow)} .app-card.recommended{border-color:var(--cyan-line)} .app-flag{ position:absolute;top:-9px;inset-inline-end:14px;padding:2px 10px;border-radius:99px; background:var(--cyan);color:var(--cyan-ink);font-size:10.5px;font-weight:800 } .app-icon{ width:48px;height:48px;border-radius:13px;flex-shrink:0;display:grid;place-items:center; background:var(--surface-2);color:var(--cyan);overflow:hidden } .app-icon img{width:100%;height:100%;object-fit:cover} .app-body{flex:1;min-width:0} .app-body b{display:block;font-size:14.5px;margin-bottom:4px} .app-body p{font-size:12.5px;color:var(--text-dim);margin:0 0 6px;line-height:1.6} .app-meta{font-size:11.5px;color:var(--text-faint)} .app-actions{display:flex;gap:8px;flex-wrap:wrap;width:100%} /* ═══════════════════════════════════════════════════════════════════════ v1.9 — landing sections ═══════════════════════════════════════════════════════════════════════ */ /* ── Feature boxes ──────────────────────────────────────────────────── */ .feature-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px} .feature-box{ position:relative;padding:38px 26px 28px;text-align:center;border-radius:22px; background:var(--surface);border:1px solid var(--line); transition:transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s ease, border-color .2s } /* A colour bar across the top ties the card to its own accent. */ .feature-box::after{ content:"";position:absolute;top:0;inset-inline:0;height:5px;z-index:2; background:linear-gradient(90deg,var(--fx),color-mix(in srgb,var(--fx) 45%,var(--violet))); border-radius:22px 22px 0 0 } .feature-box:hover{ transform:translateY(-6px);border-color:color-mix(in srgb,var(--fx) 40%,transparent); box-shadow:0 22px 46px -18px color-mix(in srgb,var(--fx) 55%,transparent) } /* The service label sits under the accent rule at the foot of the card. The card is a flex column, so a normal child would stretch the full width — align-self and max-content keep the badge exactly as wide as its word. */ .fb-tag{ display:inline-flex;align-items:center;gap:6px; align-self:center;width:max-content;max-width:100%; margin-top:14px;padding:6px 15px;border-radius:99px; background:var(--fx);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.8px; box-shadow:0 4px 12px -4px color-mix(in srgb,var(--fx) 70%,transparent); transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease } .feature-box:hover .fb-tag{ transform:translateY(-2px); box-shadow:0 8px 18px -6px color-mix(in srgb,var(--fx) 75%,transparent) } .fb-tag::before{ content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.85 } /* The icon sits on a solid colour disc with a soft halo behind it. */ .fb-art{ position:relative;display:grid;place-items:center;width:84px;height:84px;margin:0 auto 22px; border-radius:26px;color:#fff; background:linear-gradient(140deg,var(--fx),color-mix(in srgb,var(--fx) 55%,var(--violet))); box-shadow:0 12px 26px -10px color-mix(in srgb,var(--fx) 70%,transparent); transition:transform .3s cubic-bezier(.2,.8,.3,1) } .fb-art img{width:100%;height:100%;object-fit:contain;border-radius:26px} .feature-box:hover .fb-art{transform:translateY(-3px) rotate(-5deg) scale(1.06)} .fb-ring{ position:absolute;inset:-10px;border-radius:32px;z-index:-1; background:color-mix(in srgb,var(--fx) 16%,transparent); transition:transform .3s ease, opacity .3s ease } .feature-box:hover .fb-ring{transform:scale(1.14);opacity:.75} .feature-box h3{font-size:19.5px;margin:0 0 12px;font-weight:700} .feature-box p{font-size:14px;color:var(--text-dim);line-height:1.85;margin:0 0 20px;flex:1} /* A short accent rule, with the service badge sitting beneath it. */ .fb-rule{ display:block;width:46px;height:4px;border-radius:99px;margin:0 auto; background:var(--fx);opacity:.35;transition:width .3s ease, opacity .3s ease } .feature-box:hover .fb-rule{width:76px;opacity:1} /* ── Trial band ─────────────────────────────────────────────────────── */ .trial-band{background:var(--surface)} .trial-copy{position:relative;min-height:340px} .trial-slides{position:relative} .trial-slide{ position:absolute;inset:0;opacity:0;visibility:hidden; transform:translateY(10px);transition:opacity .5s ease,transform .5s ease,visibility .5s } .trial-slide.active{opacity:1;visibility:visible;transform:none;position:relative} .trial-dots{display:flex;gap:8px;margin-top:22px} .trial-dots button{ width:28px;height:4px;border:0;border-radius:99px;padding:0;cursor:pointer; background:var(--line-strong);transition:.25s } .trial-dots button.active{width:44px;background:var(--cyan)} /* Artwork here is usually a transparent PNG, so it gets no card treatment: a background, border radius or shadow would draw a white box around it. */ .trial-visual img{width:100%;height:auto;display:block;background:none;box-shadow:none;border-radius:0} /* ── Pricing ────────────────────────────────────────────────────────── */ .pricing-section{background:var(--bg-2)} .price-tabs{ display:flex;gap:6px;justify-content:center;margin:-10px auto 34px;width:max-content; background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px } .price-tabs button{ border:0;background:none;cursor:pointer;padding:9px 26px;border-radius:99px; font-weight:700;font-size:14px;color:var(--text-dim);transition:.18s } .price-tabs button.active{background:var(--cyan);color:var(--cyan-ink)} .price-panel{display:none} .price-panel.active{display:block;animation:fadeUp .35s ease} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .price-cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:22px;align-items:stretch } .price-card{ position:relative;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden; box-shadow:0 4px 18px rgba(20,28,46,.07); transition:transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s ease, border-color .2s } .price-card:hover{ transform:translateY(-8px);border-color:color-mix(in srgb,var(--pc) 45%,transparent); box-shadow:0 20px 44px -14px color-mix(in srgb,var(--pc) 45%,transparent) } /* A thin colour rule at the very top ties the card to its plan colour. */ .price-card::before{ content:"";position:absolute;top:0;inset-inline:0;height:5px;background:var(--pc);z-index:2 } .price-card.is-best{border-color:var(--pc);box-shadow:0 14px 38px -14px color-mix(in srgb,var(--pc) 55%,transparent)} .price-card.is-best::after{ content:"★";position:absolute;top:14px;inset-inline-end:16px;color:var(--pc); font-size:15px;z-index:3;opacity:.9 } .price-card h3{ font-size:16.5px;text-align:center;margin:0;padding:26px 18px 4px;font-weight:700;color:var(--text) } .price-ribbon{ position:relative;text-align:center;padding:16px 20px 22px; background:linear-gradient(160deg, color-mix(in srgb,var(--pc) 14%,transparent), color-mix(in srgb,var(--pc) 4%,transparent)); margin:12px 16px 0;border-radius:14px } .price-ribbon .cur{ display:inline-block;font-size:19px;font-weight:700;color:var(--pc); vertical-align:top;margin-top:8px;margin-inline-end:2px } .price-ribbon .amt{ display:inline-block;font-size:46px;font-weight:800;line-height:1; letter-spacing:-2.5px;color:var(--pc) } .pr-note{ display:block;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--text-dim); padding:3px 10px;border-radius:99px;background:var(--surface);width:max-content;margin-inline:auto } .pr-badge{ display:inline-block;margin-top:7px;font-size:11px;font-weight:700;color:var(--pc);opacity:.9 } .price-list{list-style:none;margin:20px 0 22px;padding:0 18px;display:grid;gap:11px;flex:1} .price-list li{ display:flex;align-items:flex-start;gap:10px; font-size:13px;color:var(--text-dim);line-height:1.5;text-align:start } .pl-ico{ display:grid;place-items:center;width:24px;height:24px;border-radius:8px;flex-shrink:0; color:var(--fi,var(--cyan));background:color-mix(in srgb,var(--fi,var(--cyan)) 13%,transparent) } .price-cta{ display:flex;width:calc(100% - 36px);margin:0 18px 22px;justify-content:center; background:var(--pc);color:#fff;border:0;font-weight:700; box-shadow:0 6px 18px -8px var(--pc) } .price-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px -10px var(--pc)} /* ── Counter boxes ──────────────────────────────────────────────────── */ .stats-section{background:var(--surface);border-block:1px solid var(--line)} .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px} .stat-box{ position:relative;text-align:center;padding:30px 20px 26px;border-radius:18px; background:var(--surface);border:1px solid var(--line); transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .2s } .stat-box:hover{ transform:translateY(-6px);border-color:color-mix(in srgb,var(--sx) 45%,transparent); box-shadow:0 18px 38px -16px color-mix(in srgb,var(--sx) 55%,transparent) } .sb-icon{ display:grid;place-items:center;width:62px;height:62px;margin:0 auto 16px;border-radius:20px; color:var(--sx);background:color-mix(in srgb,var(--sx) 12%,transparent); transition:transform .22s cubic-bezier(.2,.8,.3,1) } .stat-box:hover .sb-icon{transform:scale(1.07) rotate(-4deg)} .sb-num{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:8px} .sb-num i{font-style:normal;font-size:24px;font-weight:700;color:var(--sx);opacity:.75} .sb-num b{ font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:1; letter-spacing:-1.5px;color:var(--text);font-variant-numeric:tabular-nums } .sb-label{ display:block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase; color:var(--text-faint) } /* ── FAQ ────────────────────────────────────────────────────────────── */ .faq-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .faq-col{display:grid;gap:12px} /* Collapsed by default so two columns of answers do not stretch the page. */ .faq-item{ background:var(--surface);border:1px solid var(--line);border-radius:14px; overflow:hidden;transition:border-color .2s, box-shadow .2s } .faq-item[open]{border-color:var(--cyan-line);box-shadow:var(--shadow-sm)} .faq-q{ display:flex;align-items:flex-start;gap:11px;cursor:pointer;list-style:none; padding:16px 18px;font-size:14.5px;font-weight:600;color:var(--text);line-height:1.6 } .faq-q::-webkit-details-marker{display:none} .faq-q::after{ content:"+";margin-inline-start:auto;flex-shrink:0; width:24px;height:24px;border-radius:8px;display:grid;place-items:center; background:var(--cyan-dim);color:var(--cyan);font-size:16px;font-weight:700;line-height:1; transition:transform .22s ease, background-color .2s } .faq-item[open] .faq-q::after{content:"−";background:var(--cyan);color:var(--cyan-ink)} .faq-q:hover{color:var(--cyan)} /* The landing section uses

, which the browser collapses itself, so only the spacing is set here — no box properties that could leak. */ .faq-columns .faq-a{ font-size:13.5px;line-height:1.85;color:var(--text-dim); margin-inline:18px;padding:14px 0 18px;border-top:1px solid var(--line-soft); max-height:none;opacity:1 } @media (max-width:860px){.faq-columns{grid-template-columns:1fr}} /* ── Payment strip ──────────────────────────────────────────────────── */ .pay-section{background:var(--surface)} .pay-strip{overflow:hidden;padding:6px 0} .pay-track{display:flex;width:max-content;animation:payScroll 38s linear infinite} .is-rtl .pay-track{animation-name:payScrollRtl} .pay-strip.paused .pay-track{animation-play-state:paused} @keyframes payScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes payScrollRtl{from{transform:translateX(0)}to{transform:translateX(50%)}} .pay-run{display:flex;align-items:center;gap:44px;padding-inline:22px;flex-shrink:0} .pay-logo{ display:grid;place-items:center;height:46px;min-width:96px; filter:grayscale(1);opacity:.55;transition:.22s } .pay-logo:hover{filter:none;opacity:1} .pay-logo img{max-height:40px;width:auto;object-fit:contain} .pay-logo b{font-size:15px;font-weight:800;color:var(--text-dim);letter-spacing:.3px} @media (max-width:860px){ .faq-columns{grid-template-columns:1fr;gap:8px} .price-cards{grid-template-columns:1fr;gap:16px} .price-card.is-best,.price-card.is-best:hover,.price-card:hover{transform:none} .stats-grid{grid-template-columns:repeat(2,1fr);gap:14px} .stat-box{padding:22px 14px} .sb-icon{width:52px;height:52px;margin-bottom:12px} .trial-copy{min-height:0} .trial-slide{position:relative;opacity:1;visibility:visible;transform:none;display:none} .trial-slide.active{display:block} .feature-box{padding:26px 20px} .pay-track{animation:none;width:auto} .pay-run:last-child{display:none} .pay-strip{overflow-x:auto;scrollbar-width:none} .pay-strip::-webkit-scrollbar{display:none} } @media (prefers-reduced-motion:reduce){ .pay-track{animation:none} .trial-slide{transition:none} } /* ═══════════════════════════════════════════════════════════════════════ Product page — buy panel first, detail second ═══════════════════════════════════════════════════════════════════════ */ .product-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:30px;align-items:start} /* The buy panel is second in the source so it reads first on a phone, and is moved to the trailing column on desktop. */ .pd-buy{order:2;position:sticky;top:88px} .pd-detail{order:1;min-width:0} .pd-buy-inner{ background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:24px;box-shadow:var(--shadow) } .pd-title{font-size:24px;margin:8px 0 6px;line-height:1.3} .pd-sub{color:var(--text-dim);font-size:14px;margin:0 0 16px;line-height:1.7} .pd-trust{display:flex;flex-direction:column;gap:9px;margin-bottom:20px} .pd-avail{ display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700; padding:6px 12px;border-radius:99px;width:max-content;max-width:100% } .pd-avail.state-instant{background:var(--ok-dim);color:var(--ok)} .pd-avail.state-prep{background:var(--amber-dim);color:var(--amber)} .pd-avail.state-ready{background:var(--cyan-dim);color:var(--cyan)} .pd-avail.state-out{background:var(--danger-dim);color:var(--danger)} .pd-rating{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-faint)} .pd-rating b{color:var(--text);font-size:13.5px} .pd-rating i{font-style:normal} /* Numbered steps make the order of operations obvious. */ .pd-step{display:flex;align-items:center;gap:10px;margin:20px 0 12px} .pd-step-n{ width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; background:var(--cyan);color:var(--cyan-ink);font-size:12px;font-weight:800 } .pd-step h2{font-size:14.5px;margin:0;font-weight:700} .pd-plans{display:grid;gap:10px} .pd-plan{ position:relative;display:flex;align-items:center;gap:12px;padding:14px 15px;cursor:pointer; border:2px solid var(--line);border-radius:13px;transition:.16s;background:var(--surface) } .pd-plan:hover{border-color:var(--cyan-line)} .pd-plan.selected{border-color:var(--cyan);background:var(--cyan-dim)} .pd-plan input{position:absolute;opacity:0;width:0;height:0} .pd-plan-tick{ width:22px;height:22px;border-radius:50%;flex-shrink:0;display:grid;place-items:center; border:2px solid var(--line-strong);color:transparent;transition:.16s } .pd-plan.selected .pd-plan-tick{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)} .pd-plan-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .pd-plan-main b{font-size:14.5px} .pd-plan-dur{font-size:12px;color:var(--text-faint)} .pd-plan-desc{font-size:11.5px;color:var(--text-faint)} .pd-plan-cost{text-align:end;flex-shrink:0;display:flex;flex-direction:column;gap:2px} .pd-plan-cost b{font-size:16px;font-weight:800;color:var(--text)} .pd-plan.selected .pd-plan-cost b{color:var(--cyan)} .pd-plan-cost i{font-style:normal;font-size:11px;color:var(--text-faint)} .pd-plan-save{ position:absolute;top:-9px;inset-inline-end:12px;padding:2px 9px;border-radius:99px; background:var(--ok);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.2px } .pd-order{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:14px 0 18px;margin-top:6px;border-top:1px solid var(--line-soft) } .pd-total{text-align:end} .pd-total span{display:block;font-size:11.5px;color:var(--text-faint)} .pd-total b{font-size:24px;font-weight:800;color:var(--cyan);line-height:1.2} .pd-trial{ display:flex;align-items:center;gap:9px;margin-top:12px;padding:12px 15px; border:1px dashed var(--violet);border-radius:12px; background:var(--violet-dim);color:var(--violet);font-size:13.5px;font-weight:700 } .pd-trial span{flex:1} .pd-trial:hover{background:var(--violet);color:#fff;border-style:solid} .pd-assure{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line-soft);display:grid;gap:10px} .pd-assure li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-dim)} .pd-assure svg{color:var(--cyan);flex-shrink:0} .pd-highlights{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px} .pd-highlights span{ display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px; background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;color:var(--text-dim) } .pd-highlights svg{color:var(--ok)} .pd-reviews{margin-top:30px} .pd-reviews h3{font-size:17px;margin-bottom:16px} .pd-reviews .review-card{margin-bottom:12px} @media (max-width:1080px){ .product-layout{grid-template-columns:1fr} .pd-buy{order:1;position:static} .pd-detail{order:2} } @media (max-width:560px){ .pd-buy-inner{padding:18px} .pd-plan{padding:12px} .pd-plan-cost b{font-size:14.5px} } /* ── Language picker, tucked into the footer corner ─────────────────── */ .lang-corner{position:relative;display:flex;justify-content:flex-end;margin:22px 0 26px} .lang-corner-btn{ display:inline-flex;align-items:center;gap:9px;padding:8px 15px;cursor:pointer; background:var(--surface-2);border:1px solid var(--line);border-radius:99px; color:var(--text-dim);font-size:13px;font-weight:700;transition:.18s } .lang-corner-btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)} .lang-corner-btn svg:last-child{transition:transform .2s} .lang-corner.open .lang-corner-btn svg:last-child{transform:rotate(180deg)} /* Opens upward: it sits at the bottom of the page, so a downward menu would push the viewport or fall off the screen. */ .lang-corner-menu{ position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;min-width:196px;z-index:70; background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px; box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s } .lang-corner.open .lang-corner-menu{opacity:1;visibility:visible;transform:translateY(0)} .lang-corner-menu a{ display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px; font-size:13.5px;color:var(--text-dim) } .lang-corner-menu a:hover{background:var(--surface-2);color:var(--text)} .lang-corner-menu a.active{background:var(--cyan-dim);color:var(--cyan);font-weight:700} .lang-corner-menu a i{margin-inline-start:auto;display:flex;color:var(--cyan)} @media (max-width:860px){.lang-corner{justify-content:center}} /* Trial artwork cross-fades in step with the text beside it. */ .trial-visual{position:relative;min-height:280px} /* * The two-column layout, stated here as well as in themes.css. * * The grid for this band lived only in themes.css; any page — or any * browser cache — that served that file stale lost the columns, and the * artwork ballooned to the container's full width and pushed everything * apart. The same values here (this file is timestamp-versioned) mean the * band holds its shape no matter which copy of themes.css arrives. */ .trial-split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center} @media (max-width:860px){.trial-split{grid-template-columns:1fr;gap:24px}} /* However tall the uploaded file is, the artwork never towers over the copy beside it. */ .trial-visual img{max-height:460px} .trial-shot{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain; background:none;box-shadow:none;border-radius:0;opacity:0;visibility:hidden; transform:scale(.98);transition:opacity .5s ease,transform .5s ease,visibility .5s } .trial-shot.active{opacity:1;visibility:visible;transform:none;position:relative} /* ── Account button — same shape as the one in the admin topbar ─────── */ .user-btn{ display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;cursor:pointer; background:var(--surface-2);border:1px solid var(--line);border-radius:99px; color:var(--text);font-size:13px;font-weight:600;position:relative;transition:.18s } .user-btn:hover{border-color:var(--cyan)} .user-menu.open .user-btn{border-color:var(--cyan);background:var(--cyan-dim)} .user-btn-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .avatar-caret{color:var(--text-faint);flex-shrink:0;transition:transform .2s ease,color .2s} .user-btn:hover .avatar-caret{color:var(--cyan)} .user-menu.open .avatar-caret{transform:rotate(180deg);color:var(--cyan)} @media (max-width:700px){.user-btn-name{display:none}.user-btn{padding:5px 8px 5px 5px}} /* ── Footer ─────────────────────────────────────────────────────────── */ .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr} .footer-brand p{font-size:13.5px;line-height:1.8;margin:0 0 16px;max-width:34ch} .footer-stats{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 16px} .footer-stats span{display:flex;flex-direction:column;gap:2px} .footer-stats b{font-size:19px;font-weight:800;color:var(--cyan);line-height:1; font-variant-numeric:tabular-nums} .footer-stats i{font-style:normal;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase; color:var(--text-faint)} .footer-contact{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:9px} .footer-contact li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.6} .footer-contact svg{color:var(--cyan);flex-shrink:0;margin-top:2px} .footer-contact a{color:inherit} .footer-contact a:hover{color:var(--cyan)} .footer-hours{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-faint)} .footer-hours svg{color:var(--ok)} .footer-plain{font-size:12.5px;color:var(--text-faint);line-height:1.9;display:block} @media (max-width:1080px){.footer-grid{grid-template-columns:1fr 1fr 1fr}} @media (max-width:700px){ .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1 / -1} .footer-stats{gap:16px} } /* ── Contact page ───────────────────────────────────────────────────── */ .contact-hero{text-align:center;padding:14px 0 34px;max-width:640px;margin-inline:auto} .contact-hero h1{font-size:clamp(28px,4vw,42px);margin:0 0 12px} .contact-hero p{font-size:15.5px;color:var(--text-dim);line-height:1.8;margin:0} .contact-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:start} .contact-form{ background:var(--surface);border:1px solid var(--line);border-radius:20px; padding:28px;box-shadow:var(--shadow) } .contact-form h2{font-size:19px;margin:0 0 20px} .contact-note{ display:flex;align-items:center;gap:8px;justify-content:center; font-size:12px;color:var(--text-faint);margin:14px 0 0;text-align:center } .contact-note svg{color:var(--ok);flex-shrink:0} /* Routing the message is one tap, not a dropdown to read through. */ .dept-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px} .dept-opt{ display:flex;align-items:center;gap:9px;padding:12px 13px;cursor:pointer; border:2px solid var(--line);border-radius:13px;font-size:13px;font-weight:600; color:var(--text-dim);transition:.16s } .dept-opt svg{color:var(--dc);flex-shrink:0} .dept-opt input{position:absolute;opacity:0;width:0;height:0} .dept-opt:hover{border-color:var(--dc)} .dept-opt:has(input:checked),.dept-opt.selected{ border-color:var(--dc);background:color-mix(in srgb,var(--dc) 9%,transparent);color:var(--text) } .contact-side{display:grid;gap:18px} .contact-card{ background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px; box-shadow:var(--shadow-sm) } .contact-card h3{font-size:15.5px;margin:0 0 16px} .c-row{ display:flex;align-items:center;gap:13px;padding:11px 0; border-bottom:1px solid var(--line-soft);color:inherit } .c-row:last-of-type{border-bottom:0} .c-ico{ width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex-shrink:0; color:var(--cc,var(--cyan));background:color-mix(in srgb,var(--cc,var(--cyan)) 12%,transparent) } .c-body{display:flex;flex-direction:column;gap:2px;min-width:0} .c-body b{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase; color:var(--text-faint)} .c-body i{font-style:normal;font-size:13.5px;color:var(--text);word-break:break-word} a.c-row:hover .c-body i{color:var(--cyan)} .c-socials{display:flex;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)} .c-socials a{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim);transition:.16s } .c-socials a:hover{color:var(--cyan);border-color:var(--cyan);transform:translateY(-2px)} .c-faq{border-bottom:1px solid var(--line-soft);padding:11px 0} .c-faq:last-of-type{border-bottom:0} .c-faq summary{cursor:pointer;font-size:13.5px;font-weight:600;list-style:none; display:flex;align-items:center;gap:8px} .c-faq summary::-webkit-details-marker{display:none} .c-faq summary::before{content:"+";color:var(--cyan);font-weight:800;flex-shrink:0} .c-faq[open] summary::before{content:"−"} .c-faq p{font-size:12.5px;color:var(--text-dim);line-height:1.75;margin:9px 0 0;padding-inline-start:18px} .ticket-nudge{display:flex;gap:14px;align-items:flex-start} .ticket-nudge b{display:block;font-size:14.5px;margin-bottom:5px} .ticket-nudge p{font-size:12.5px;color:var(--text-dim);line-height:1.65;margin:0 0 12px} @media (max-width:900px){.contact-layout{grid-template-columns:1fr}} /* ── Order section in the account area ──────────────────────────────── */ .order-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px} .order-card{ background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px; display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow-sm);transition:.18s } .order-card:hover{border-color:var(--cyan-line);box-shadow:var(--shadow)} .order-card.owned{border-color:var(--ok)} .oc-head{display:flex;align-items:flex-start;gap:13px} .oc-thumb{ width:52px;height:52px;border-radius:14px;flex-shrink:0;display:grid;place-items:center; background:var(--surface-2);color:var(--cyan);overflow:hidden } .oc-thumb img{width:100%;height:100%;object-fit:cover} .oc-title{flex:1;min-width:0} .oc-title b{display:block;font-size:15.5px;margin-bottom:3px} .oc-title span{font-size:12.5px;color:var(--text-dim);line-height:1.55;display:block} .oc-owned{ display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;flex-shrink:0; background:var(--ok-dim);color:var(--ok);font-size:11px;font-weight:800 } .oc-renew{ display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-dim);margin:0; padding:9px 12px;border-radius:10px;background:var(--surface-2) } .oc-renew svg{color:var(--amber);flex-shrink:0} .oc-avail{font-size:12px;font-weight:700;width:max-content;padding:4px 11px;border-radius:99px} .oc-avail.state-instant{background:var(--ok-dim);color:var(--ok)} .oc-avail.state-prep{background:var(--amber-dim);color:var(--amber)} .oc-avail.state-ready{background:var(--cyan-dim);color:var(--cyan)} .oc-avail.state-out{background:var(--danger-dim);color:var(--danger)} .oc-plans{display:grid;gap:7px} .oc-plan{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 13px;border:1px solid var(--line);border-radius:11px;transition:.16s } .oc-plan:hover{border-color:var(--cyan);background:var(--cyan-dim)} .ocp-name b{display:block;font-size:13.5px} .ocp-name i{font-style:normal;font-size:11.5px;color:var(--text-faint)} .ocp-cost{text-align:end;flex-shrink:0} .ocp-cost b{display:block;font-size:15px;font-weight:800;color:var(--cyan)} .ocp-cost em{ font-style:normal;font-size:10.5px;font-weight:800;color:var(--ok); background:var(--ok-dim);padding:1px 7px;border-radius:99px;display:inline-block;margin-top:2px } .oc-single b{font-size:22px;font-weight:800;color:var(--cyan)} .oc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px} @media (max-width:560px){.order-grid{grid-template-columns:1fr}} /* ═══════════════════════════════════════════════════════════════════════ Review wall A masonry-ish wall of cards, each with its own accent colour, a large quote mark and a lift on hover. The old grid read as a spreadsheet. ═══════════════════════════════════════════════════════════════════════ */ /* A moving row rather than a static grid. Three cards are visible at a time and the set is rendered twice, so the loop closes without a gap. */ .rv-strip{overflow:hidden;padding:6px 0 10px;position:relative} .rv-track{display:flex;width:max-content;animation:rvScroll 52s linear infinite} .is-rtl .rv-track{animation-name:rvScrollRtl} .rv-strip.paused .rv-track{animation-play-state:paused} @keyframes rvScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes rvScrollRtl{from{transform:translateX(0)}to{transform:translateX(50%)}} .rv-run{display:flex;gap:20px;padding-inline:10px;flex-shrink:0;align-items:stretch} .rv-run .rv-card{ /* Three across the container, allowing for the gaps between them. */ width:calc((min(100vw, var(--container, 1180px)) - 40px - 60px) / 3); min-width:280px;max-width:420px;flex-shrink:0 } .rv-card{ position:relative;display:flex;flex-direction:column;padding:26px 24px 20px; background:var(--surface);border:1px solid var(--line);border-radius:20px; box-shadow:0 3px 14px rgba(20,28,46,.06);overflow:hidden; transition:transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s ease, border-color .2s } /* A colour wash bleeding from the top corner, unique per card. */ .rv-card::before{ content:"";position:absolute;top:-70px;inset-inline-end:-70px;width:170px;height:170px; border-radius:50%;background:var(--rv);opacity:.07;transition:opacity .26s,transform .26s } .rv-card:hover{ transform:translateY(-6px);border-color:color-mix(in srgb,var(--rv) 40%,transparent); box-shadow:0 20px 44px -16px color-mix(in srgb,var(--rv) 45%,transparent) } .rv-card:hover::before{opacity:.13;transform:scale(1.12)} .rv-card.featured{border-color:color-mix(in srgb,var(--rv) 45%,transparent)} .rv-quote{ display:block;color:var(--rv);opacity:.22;margin-bottom:12px; transition:opacity .26s,transform .26s } .rv-card:hover .rv-quote{opacity:.4;transform:translateY(-2px)} .rv-top{ position:absolute;top:18px;inset-inline-end:18px;z-index:2; display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px; background:var(--rv);color:#fff;font-size:10px;font-weight:800;letter-spacing:.3px } .rv-stars{color:var(--amber);margin-bottom:12px;position:relative;z-index:1} .rv-title{ font-size:16.5px;font-weight:700;margin:0 0 9px;line-height:1.4; position:relative;z-index:1;color:var(--text) } .rv-body{ font-size:14px;line-height:1.85;color:var(--text-dim);margin:0 0 18px; position:relative;z-index:1;flex:1; /* Long reviews are trimmed rather than allowed to stretch one card taller than the rest of the row. */ display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden } .rv-reply{ position:relative;z-index:1;margin:0 0 16px;padding:13px 15px;border-radius:0 12px 12px 0; border-inline-start:3px solid var(--rv);background:var(--surface-2); font-size:13px;line-height:1.7;color:var(--text-dim) } .is-rtl .rv-reply{border-radius:12px 0 0 12px} .rv-reply-head{ display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800; color:var(--rv);margin-bottom:5px } .rv-foot{ display:flex;align-items:center;gap:12px;position:relative;z-index:1; padding-top:16px;border-top:1px solid var(--line-soft);margin-top:auto } .rv-avatar{ width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center; background:linear-gradient(135deg,var(--rv),color-mix(in srgb,var(--rv) 55%,var(--violet))); color:#fff;font-weight:800;font-size:16px;overflow:hidden; box-shadow:0 0 0 3px color-mix(in srgb,var(--rv) 14%,transparent) } .rv-avatar img{width:100%;height:100%;object-fit:cover;display:block} .rv-who{flex:1;min-width:0} .rv-who b{display:block;font-size:14px;color:var(--text);letter-spacing:.3px} .rv-who i{ display:flex;align-items:center;gap:5px;font-style:normal;font-size:11.5px; color:var(--text-faint);margin-top:2px } .rv-check{ width:14px;height:14px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; background:var(--ok);color:#fff } .rv-product{ width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; background:var(--surface-2);color:var(--text-faint);transition:.18s } .rv-product:hover{background:var(--rv);color:#fff;transform:translateY(-2px)} @media (max-width:1080px){ .rv-run .rv-card{width:calc((100vw - 40px - 40px) / 2);min-width:260px} } @media (max-width:680px){ /* On a phone the row is swiped by hand: an auto-moving target is hard to read and harder to tap. */ .rv-track{animation:none;width:auto} .rv-run:last-child{display:none} .rv-strip{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory} .rv-strip::-webkit-scrollbar{display:none} .rv-run .rv-card{width:min(86vw,340px);scroll-snap-align:center} .rv-card{padding:22px 20px 18px} .rv-body{-webkit-line-clamp:8} } /* * Manual mode: after the first drag or arrow press the marquee stops being * an animation and becomes an ordinary sideways scroller. */ .rv-manual .rv-track{animation:none !important;width:max-content} .rv-strip.rv-manual{overflow-x:auto;scrollbar-width:none;cursor:grab} .rv-strip.rv-manual::-webkit-scrollbar{display:none} .rv-strip.rv-grabbing{cursor:grabbing} .rv-strip .rv-card{user-select:none} /* The arrows, riding the sides of the strip. */ .rv-has-nav{position:relative} .rv-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:42px;height:42px;border-radius:50%;display:grid;place-items:center; background:var(--surface);border:1px solid var(--line);color:var(--text-dim); cursor:pointer;box-shadow:var(--shadow);transition:.18s } .rv-nav:hover{color:var(--cyan);border-color:var(--cyan);transform:translateY(-50%) scale(1.06)} .rv-nav-prev{inset-inline-start:-8px} .rv-nav-next{inset-inline-end:-8px} /* The physical chevrons must not mirror in RTL: left always looks left. */ [dir="rtl"] .rv-nav svg{transform:none} @media (max-width:680px){ /* Phones swipe the strip by hand already; the buttons only cover cards. */ .rv-nav{display:none} } @media (prefers-reduced-motion:reduce){.rv-track{animation:none}} @media (prefers-reduced-motion:reduce){ .rv-card,.rv-card::before,.rv-quote{transition:none} .rv-card:hover{transform:none} } /* ── Profile picture field ──────────────────────────────────────────── */ .avatar-field{display:flex;gap:18px;align-items:flex-start;margin-bottom:20px} .avatar-field > div{flex:1;min-width:0} .avatar-preview{ width:78px;height:78px;border-radius:50%;flex-shrink:0;display:grid;place-items:center; background:linear-gradient(135deg,var(--cyan),var(--violet));color:var(--cyan-ink); font-weight:800;font-size:29px;overflow:hidden;box-shadow:0 0 0 4px var(--cyan-dim) } .avatar-preview img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:560px){.avatar-field{flex-direction:column;align-items:center;text-align:center}} /* ── Player access page ─────────────────────────────────────────────── */ .pl-howto{ display:flex;gap:16px;align-items:flex-start;padding:20px;margin-bottom:22px; background:linear-gradient(135deg,var(--cyan-dim),transparent); border:1px solid var(--cyan-line);border-radius:18px } .pl-howto-icon{ width:48px;height:48px;border-radius:14px;flex-shrink:0;display:grid;place-items:center; background:var(--cyan);color:var(--cyan-ink) } .pl-howto b{display:block;font-size:15.5px;margin-bottom:5px} .pl-howto p{font-size:13.5px;color:var(--text-dim);line-height:1.7;margin:0 0 12px} .pl-service{ background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:22px;margin-bottom:18px;box-shadow:var(--shadow-sm) } .pl-service-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:14px; flex-wrap:wrap;margin-bottom:16px } .pl-service-head h3{font-size:16.5px;margin:0 0 3px} .pl-service-head span{font-size:12.5px;color:var(--text-faint)} .pl-slots{ padding:5px 13px;border-radius:99px;background:var(--ok-dim);color:var(--ok); font-size:12.5px;font-weight:700;white-space:nowrap;flex-shrink:0 } .pl-slots.full{background:var(--amber-dim);color:var(--amber)} /* The code is the one thing a customer has to read off this page, so it is set large, spaced, and in a font where every character is distinct. */ .pl-code-box{position:relative;padding:18px 20px;border-radius:14px;background:var(--surface-2); border:1px dashed var(--cyan-line);margin-bottom:16px} .pl-code-label{ display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase; color:var(--text-faint);margin-bottom:7px } .pl-code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(20px,4vw,28px);font-weight:800;letter-spacing:3px;color:var(--cyan); direction:ltr;word-break:break-all;line-height:1.3 } .pl-code-copy{ position:absolute;top:16px;inset-inline-end:16px;width:36px;height:36px;border-radius:10px; display:grid;place-items:center;cursor:pointer;background:var(--surface); border:1px solid var(--line);color:var(--text-dim);transition:.16s } .pl-code-copy:hover{color:var(--cyan);border-color:var(--cyan)} .pl-code-copy.copied{background:var(--ok);border-color:var(--ok);color:#fff} .pl-code-hint{font-size:12px;color:var(--text-faint);margin:9px 0 0;line-height:1.6;max-width:52ch} .pl-devices{display:grid;gap:9px} .pl-device{ display:flex;align-items:center;gap:13px;padding:12px 14px; border:1px solid var(--line);border-radius:12px;transition:.16s } .pl-device.off{opacity:.55} .pl-device-icon{ width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center; background:var(--surface-2);color:var(--cyan) } .pl-device-body{flex:1;min-width:0} .pl-device-body b{display:block;font-size:14px} .pl-device-body span{font-size:11.5px;color:var(--text-faint)} .pl-none{font-size:13px;color:var(--text-faint);margin:0;padding:12px 0} .pl-pair{ background:var(--violet-dim);border:1px solid var(--violet);border-radius:18px;padding:22px } .pl-pair h3{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 8px;color:var(--violet)} .pl-pair p{font-size:13.5px;color:var(--text-dim);line-height:1.7;margin:0 0 16px;max-width:64ch} .pl-pair-input{ font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;font-weight:800; letter-spacing:5px;text-transform:uppercase;text-align:center;direction:ltr } @media (max-width:560px){ .pl-howto{flex-direction:column} .pl-device{flex-wrap:wrap} } /* ═══════════════════════════════════════════════════════════════════════ Shared card language The review cards were the ones that worked, so their behaviour is lifted into one place and applied to every card on the landing page: an accent wash bleeding from the corner, a lift with a shadow tinted the same colour, and equal heights across a row. ═══════════════════════════════════════════════════════════════════════ */ .feature-box, .stat-box, .price-card, .blog-strip-card, .app-card, .order-card{ position:relative;overflow:hidden; transition:transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s ease, border-color .2s } /* The wash. Each card reads its own accent, whatever variable it uses. */ .feature-box::before, .stat-box::before, .blog-strip-card::before{ content:"";position:absolute;top:-70px;inset-inline-end:-70px;width:170px;height:170px; border-radius:50%;z-index:0;opacity:.07;pointer-events:none; transition:opacity .26s ease, transform .26s ease } .feature-box::before{background:var(--fx,var(--cyan))} .stat-box::before{background:var(--sx,var(--cyan))} .blog-strip-card::before{background:var(--cyan)} .feature-box:hover::before, .stat-box:hover::before, .blog-strip-card:hover::before{opacity:.14;transform:scale(1.12)} /* Content has to sit above the wash. */ .feature-box > *, .stat-box > *, .blog-strip-card > *{position:relative;z-index:1} .feature-box:hover{ transform:translateY(-6px); box-shadow:0 20px 44px -16px color-mix(in srgb,var(--fx,var(--cyan)) 45%,transparent) } .stat-box:hover{ transform:translateY(-6px); box-shadow:0 20px 44px -16px color-mix(in srgb,var(--sx,var(--cyan)) 45%,transparent) } .blog-strip-card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px -16px color-mix(in srgb,var(--cyan) 40%,transparent) } .app-card:hover, .order-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px -16px color-mix(in srgb,var(--cyan) 40%,transparent) } /* Equal heights, and footers that line up along the bottom of each row. */ .feature-boxes, .stats-grid, .apps-grid, .order-grid{align-items:stretch} .feature-box, .stat-box, .app-card, .order-card{display:flex;flex-direction:column} .feature-box p{flex:1} .price-card{height:100%} .blog-strip-card .bsc-body{display:flex;flex-direction:column;flex:1} .blog-strip-card .bsc-foot{margin-top:auto} @media (prefers-reduced-motion:reduce){ .feature-box,.stat-box,.price-card,.blog-strip-card,.app-card,.order-card{transition:none} .feature-box:hover,.stat-box:hover,.price-card:hover, .blog-strip-card:hover,.app-card:hover,.order-card:hover{transform:none} } /* ── Payment logos ──────────────────────────────────────────────────── */ .pay-logo{ display:grid;place-items:center;height:56px;min-width:112px;padding:0 8px; border-radius:14px;background:var(--surface-2);border:1px solid var(--line); filter:none;opacity:1;transition:transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s, box-shadow .22s } .pay-logo:hover{ transform:translateY(-4px);border-color:var(--pm,var(--cyan)); box-shadow:0 14px 28px -12px color-mix(in srgb,var(--pm,var(--cyan)) 55%,transparent) } .pay-logo svg{display:block} .pay-logo .pay-mark{display:flex;align-items:center;gap:9px;color:var(--pm,var(--text-dim))} .pay-logo .pay-mark b{font-size:13.5px;font-weight:800;letter-spacing:.2px;color:var(--text)} .pay-run{gap:20px} .pay-badge-mark{display:flex;align-items:center;line-height:0} .pay-badge-mark svg{width:20px;height:20px} .pay-badge{transition:border-color .18s,transform .18s} .pay-badge:hover{border-color:var(--pm,var(--cyan));transform:translateY(-1px)} /* ═══════════════════════════════════════════════════════════════════════ Section bands Flat horizontal bands, each tinted from the active template's palette. ═══════════════════════════════════════════════════════════════════════ */ .features-section, .stats-section, .faq-section, .pay-section, .reviews-section{position:relative;isolation:isolate;background:transparent} .features-section::after, .stats-section::after, .faq-section::after, .pay-section::after, .reviews-section::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none } .features-section::after{ background:linear-gradient(135deg, color-mix(in srgb,var(--cyan) 8%,var(--bg-2)), color-mix(in srgb,var(--violet) 6%,var(--bg-2))) } .reviews-section::after{ background:linear-gradient(115deg, color-mix(in srgb,var(--violet) 7%,var(--surface)), color-mix(in srgb,var(--cyan) 5%,var(--surface))) } .stats-section::after{ background:linear-gradient(135deg, color-mix(in srgb,var(--violet) 92%,#000), color-mix(in srgb,var(--cyan) 78%,#000)) } .faq-section::after{ background:linear-gradient(125deg, color-mix(in srgb,var(--cyan) 6%,var(--bg-2)), var(--bg-2)) } .pay-section::after{ background:linear-gradient(135deg, var(--surface), color-mix(in srgb,var(--cyan) 5%,var(--surface))) } .features-section,.stats-section,.faq-section,.pay-section,.reviews-section{ padding-block:clamp(60px,7vw,96px) } /* The counter band is dark, so its heading needs light text. */ .stats-section .section-head h2, .stats-section .section-head p{color:#fff} /* The label carries the accent; the figure stays neutral so it reads first. */ .sb-label{color:var(--sx);font-weight:800;opacity:.95} .sb-num b{color:var(--text)} /* ── Payment strip: six across, larger, seamless ────────────────────── */ .pay-strip{overflow:hidden;padding:10px 0} .pay-run{ display:flex;gap:22px;padding-inline:11px;flex-shrink:0;align-items:stretch } .pay-logo{ width:calc((min(100vw, var(--container, 1180px)) - 40px - 110px) / 6); min-width:130px;height:84px;border-radius:18px;padding:0 12px;flex-shrink:0 } .pay-logo .pay-mark{flex-direction:column;gap:7px;text-align:center} .pay-logo .pay-mark svg{width:38px;height:38px} .pay-logo .pay-mark b{font-size:13px} .pay-logo img{max-height:46px} @media (max-width:1080px){.pay-logo{width:150px}} @media (max-width:680px){ .pay-strip{overflow-x:auto;scrollbar-width:none} .pay-strip::-webkit-scrollbar{display:none} .pay-track{animation:none;width:auto} .pay-run:last-child{display:none} .pay-logo{width:128px;height:76px} } /* ── Header: two groups, pinned to opposite ends ────────────────────── */ /* * The nav sits directly beside the logo at its natural spacing. The actions * are pushed to the far end. The gap between the two groups is what stops * them meeting when the window narrows — and it is a margin on the actions, * not flex:1 on the nav, because stretching the nav is what spread the links * out and made them look wrong. */ .main-nav{flex:0 1 auto;min-width:0} .main-nav a{white-space:nowrap} /* no menu item ever wraps to two lines */ .main-nav a.nav-trial{flex-shrink:0} .header-actions{ flex-shrink:0; margin-inline-start:auto; /* pinned to the far end */ padding-inline-start:clamp(18px,3vw,48px) /* the gap between the two groups */ } /* An avatar that has a photo shows it instead of the initial. */ .avatar.has-photo,.admin-avatar.has-photo{padding:0;overflow:hidden} .avatar.has-photo img,.admin-avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block} /* ── Subscription highlights, as chips ──────────────────────────────── */ .oc-specs{display:flex;flex-wrap:wrap;gap:7px} .oc-chip{ display:inline-flex;align-items:center;gap:6px;white-space:nowrap; padding:6px 12px;border-radius:99px;font-size:11.5px;line-height:1; color:var(--cx);background:color-mix(in srgb,var(--cx) 11%,transparent); border:1px solid color-mix(in srgb,var(--cx) 26%,transparent); transition:transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s } .oc-chip b{font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums} .oc-chip:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--cx) 18%,transparent)} .oc-chip svg{flex-shrink:0} /* ═══════════════════════════════════════════════════════════════════════ Our own player — deliberately louder than the third-party app cards ═══════════════════════════════════════════════════════════════════════ */ .own-player{ position:relative;overflow:hidden;border-radius:22px;padding:30px 28px 26px;margin-bottom:8px; background:linear-gradient(135deg,#FF2E7E 0%,#7C3AED 52%,#00C2FF 100%); color:#fff;box-shadow:0 22px 46px -18px rgba(124,58,237,.6) } /* A large soft glow so the panel does not read as a flat rectangle. */ .own-player::before{ content:"";position:absolute;top:-120px;inset-inline-end:-90px;width:320px;height:320px; border-radius:50%;background:rgba(255,255,255,.16);pointer-events:none } .own-player::after{ content:"";position:absolute;bottom:-140px;inset-inline-start:-60px;width:280px;height:280px; border-radius:50%;background:rgba(0,0,0,.10);pointer-events:none } /* Sits fully inside the card, not straddling the edge. */ .op-flag{ position:absolute;top:16px;inset-inline-end:16px;z-index:3; display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:99px; background:rgba(255,255,255,.95);color:#7C3AED; font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase; box-shadow:0 4px 12px -3px rgba(0,0,0,.28) } .op-main{position:relative;z-index:2;display:flex;gap:20px;align-items:flex-start} .op-icon{ width:76px;height:76px;border-radius:22px;flex-shrink:0;display:grid;place-items:center; background:rgba(255,255,255,.2);color:#fff; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3) } .op-body{flex:1;min-width:0} .op-body b{display:block;font-size:20px;font-weight:800;margin-bottom:8px;letter-spacing:-.3px} .op-body p{font-size:14px;line-height:1.8;margin:0 0 16px;color:rgba(255,255,255,.92);max-width:62ch} .op-points{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .op-points span{ display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:99px; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24); font-size:12px;font-weight:600 } .op-actions{display:flex;gap:10px;flex-wrap:wrap} .op-actions .btn:first-child{background:#fff;color:#7C3AED;border:0;font-weight:800} .op-actions .btn:first-child:hover{background:#fff;transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(0,0,0,.35)} .op-actions .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#fff} .op-actions .btn-ghost:hover{background:rgba(255,255,255,.24);color:#fff;border-color:#fff} /* The third-party badge had the same straddling problem. */ .app-flag{ position:absolute;top:12px;inset-inline-end:12px;z-index:3; padding:4px 11px;border-radius:99px;background:var(--cyan);color:var(--cyan-ink); font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase; box-shadow:0 3px 10px -3px color-mix(in srgb,var(--cyan) 70%,transparent) } .app-card{position:relative;overflow:hidden;padding-top:44px} @media (max-width:640px){ .op-main{flex-direction:column} .op-icon{width:62px;height:62px} .op-body b{font-size:17.5px} .own-player{padding:26px 20px 22px} } /* ── Account dashboard ──────────────────────────────────────────────── */ /* The player banner is the first thing a subscriber wants, so it sits above the figures rather than below them. */ .dash-player{ display:flex;align-items:center;gap:16px;padding:18px 20px;margin-bottom:18px; border-radius:18px;color:#fff;overflow:hidden;position:relative; background:linear-gradient(120deg,#7C3AED,#00C2FF); box-shadow:0 16px 34px -16px rgba(124,58,237,.6); transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s } .dash-player::before{ content:"";position:absolute;top:-90px;inset-inline-end:-60px;width:220px;height:220px; border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none } .dash-player:hover{transform:translateY(-3px);box-shadow:0 22px 42px -16px rgba(124,58,237,.7)} .dp-icon{ width:52px;height:52px;border-radius:16px;flex-shrink:0;display:grid;place-items:center; background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);position:relative;z-index:1 } .dp-body{flex:1;min-width:0;position:relative;z-index:1} .dp-body b{display:block;font-size:15.5px;margin-bottom:3px} .dp-body i{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.88)} .dp-go{position:relative;z-index:1;flex-shrink:0;opacity:.85;transition:transform .22s} .dash-player:hover .dp-go{transform:translateX(4px)} .is-rtl .dash-player:hover .dp-go{transform:translateX(-4px)} /* The figure cards borrow the landing card language. */ .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px} .stat{ position:relative;overflow:hidden;padding:22px 20px;border-radius:18px; background:var(--surface);border:1px solid var(--line); transition:transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s, border-color .2s } .stat::before{ content:"";position:absolute;top:-60px;inset-inline-end:-60px;width:150px;height:150px; border-radius:50%;background:var(--sx,var(--cyan));opacity:.08;pointer-events:none; transition:opacity .24s, transform .24s } .stat:hover{ transform:translateY(-5px);border-color:color-mix(in srgb,var(--sx,var(--cyan)) 40%,transparent); box-shadow:0 18px 38px -16px color-mix(in srgb,var(--sx,var(--cyan)) 50%,transparent) } .stat:hover::before{opacity:.15;transform:scale(1.12)} .stat > *{position:relative;z-index:1} .stat .ico{ display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:14px; color:#fff;background:linear-gradient(140deg,var(--sx,var(--cyan)), color-mix(in srgb,var(--sx,var(--cyan)) 55%,var(--violet))); box-shadow:0 8px 18px -8px color-mix(in srgb,var(--sx,var(--cyan)) 70%,transparent) } .stat .num{ display:block;font-size:30px;font-weight:800;line-height:1;letter-spacing:-1px; color:var(--text);margin-bottom:6px; /* Latin numerals wherever the interface language uses them. */ font-variant-numeric:tabular-nums } .stat > span:last-child{ font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase; color:var(--sx,var(--text-faint)) } @media (max-width:560px){ .stat-grid{grid-template-columns:1fr 1fr;gap:12px} .stat{padding:18px 16px} .stat .num{font-size:25px} .dash-player{flex-wrap:wrap} } /* ── App downloads beside the setup guide ───────────────────────────── */ .apps-block .ab-lead{font-size:12.5px;color:var(--text-faint);margin:0 0 12px} .ab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px} .ab-item{ display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px; border:1px solid var(--line);color:var(--text-dim);transition:.16s } .ab-item:hover{border-color:var(--cyan);background:var(--cyan-dim);color:var(--cyan)} .ab-item > svg:last-child{margin-inline-start:auto;flex-shrink:0;opacity:.6} .ab-icon{ width:36px;height:36px;border-radius:10px;flex-shrink:0;display:grid;place-items:center; background:var(--surface-2);color:var(--cyan);overflow:hidden } .ab-icon img{width:100%;height:100%;object-fit:contain} .ab-body{min-width:0} .ab-body b{display:block;font-size:13.5px;color:var(--text)} .ab-body i{font-style:normal;font-size:11px;color:var(--text-faint)} /* ── Pairing: make the one box you have to type in obvious ──────────── */ .pl-steps{ margin:0 0 20px;padding-inline-start:22px;display:grid;gap:8px; font-size:13.5px;color:var(--text-dim);line-height:1.7 } .pl-steps li::marker{color:var(--violet);font-weight:800} .pl-pair-fields{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .pl-pair-fields .form-group{flex:1;min-width:190px;margin:0} .pl-pair-fields .btn{flex-shrink:0} .pl-pair-input{ font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;font-weight:800; letter-spacing:6px;text-transform:uppercase;text-align:center; border-width:2px;border-color:var(--violet);background:var(--surface) } .pl-pair-input:focus{ border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-dim);outline:none } .pl-pair-input::placeholder{opacity:.35;letter-spacing:6px} @media (max-width:560px){ .pl-pair-fields{flex-direction:column;align-items:stretch} .pl-pair-fields .btn{width:100%} } /* The browser's [hidden] rule has the same weight as a class selector, so any author rule that sets display defeats it. Making it explicit means `element.hidden = true` reliably hides things everywhere. */ [hidden]{display:none !important} /* ── Parental lock in the account area ──────────────────────────────── */ .pl-lock{ background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:22px;margin-bottom:18px } .pl-lock h3{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 8px} .pl-lock h3 svg{color:var(--danger)} .pl-lock p{font-size:13.5px;color:var(--text-dim);line-height:1.7;margin:0 0 16px;max-width:64ch} .pl-pin-input{ max-width:200px;font-family:ui-monospace,Menlo,Consolas,monospace; font-size:22px;font-weight:800;letter-spacing:10px;text-align:center } .pl-lock-on{ display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:12.5px; color:var(--ok);font-weight:600 } /* ── Dashboard: devices, chart, spacing ─────────────────────────────── */ /* The figure cards sat flush against the panel below them. */ .stat-grid{margin-bottom:22px} .dash-devices{ background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:18px 20px;margin-bottom:18px } .dash-devices h2{ display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;margin:0 0 14px } .dash-devices h2 svg{color:var(--cyan)} .dd-row{display:flex;gap:10px;flex-wrap:wrap} .dd-item{ display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:12px; background:var(--surface-2);border:1px solid var(--line) } .dd-icon{ width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0; background:var(--cyan-dim);color:var(--cyan) } .dd-body b{display:block;font-size:13px;line-height:1.3} .dd-body i{font-style:normal;font-size:11px;color:var(--text-faint)} .dd-more{ display:inline-flex;align-items:center;gap:6px;margin-top:12px; font-size:12.5px;font-weight:700;color:var(--cyan) } .dash-chart{ background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:20px;margin-bottom:22px } .dc-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .dc-head h2{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;margin:0} .dc-head h2 svg{color:var(--violet)} .dc-ranges{display:flex;gap:5px;background:var(--surface-2);padding:4px;border-radius:10px} .dc-ranges button{ padding:6px 12px;border-radius:7px;font-size:12px;font-weight:700;color:var(--text-dim); cursor:pointer;background:none;border:0;transition:.16s } .dc-ranges button.active{background:var(--violet);color:#fff} .dc-summary{display:flex;gap:26px;margin:16px 0 12px} .dc-summary b{ display:block;font-size:22px;font-weight:800;line-height:1;color:var(--text); font-variant-numeric:tabular-nums } .dc-summary i{ font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.7px; text-transform:uppercase;color:var(--text-faint) } .dc-plot{ display:flex;align-items:flex-end;gap:3px;height:120px; padding:8px 0 0;border-bottom:1px solid var(--line) } .dc-bar{ flex:1;min-width:3px;border-radius:4px 4px 0 0;background:var(--line); transition:height .4s cubic-bezier(.2,.8,.3,1), background .2s } .dc-bar.has{background:linear-gradient(180deg,var(--violet),var(--cyan))} .dc-bar:hover{filter:brightness(1.2)} .dc-empty{font-size:12.5px;color:var(--text-faint);text-align:center;margin:14px 0 0} @media (max-width:560px){ .dc-plot{height:90px} .dc-summary{gap:18px} } /* ── Page not found ─────────────────────────────────────────────────── */ .e404{ padding:clamp(48px,8vw,90px) 0; background: radial-gradient(760px 420px at 50% 0%, var(--cyan-dim), transparent 65%), var(--bg) } .e404-inner{max-width:720px;text-align:center} .e404-art{ max-width:340px;margin:0 auto 26px; animation:e404Float 5s ease-in-out infinite } .e404-art svg{width:100%;height:auto;display:block} @keyframes e404Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .e404 h1{font-size:clamp(24px,4vw,34px);margin:0 0 12px;letter-spacing:-.5px} .e404-lead{ font-size:15px;color:var(--text-dim);line-height:1.8;margin:0 auto 28px;max-width:52ch } .e404-actions{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-bottom:34px} .e404-links{ display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px; text-align:start;margin-bottom:26px } .e404-card{ display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:15px; background:var(--surface);border:1px solid var(--line); transition:transform .22s cubic-bezier(.2,.8,.3,1), border-color .2s, box-shadow .22s } .e404-card:hover{ transform:translateY(-4px);border-color:var(--cyan); box-shadow:0 16px 32px -16px color-mix(in srgb,var(--cyan) 55%,transparent) } .e404-ico{ width:42px;height:42px;border-radius:13px;flex-shrink:0;display:grid;place-items:center; color:#fff;background:linear-gradient(140deg,var(--cyan),var(--violet)) } .e404-card b{display:block;font-size:14.5px;color:var(--text)} .e404-card i{font-style:normal;font-size:12px;color:var(--text-faint)} .e404-help{font-size:13.5px;color:var(--text-faint);line-height:1.8;margin:0} .e404-help a{color:var(--cyan);font-weight:600} @media (prefers-reduced-motion:reduce){.e404-art{animation:none}} /* ═══════════════════════════════════════════════════════════════════════ Reseller page ═══════════════════════════════════════════════════════════════════════ */ /* Full height, matching the homepage hero exactly rather than approximately. */ .rs-hero{ position:relative;overflow:hidden;background:var(--hero-bg);isolation:isolate; min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h)) } .rs-hero-track{position:relative;min-height:inherit} .rs-slide{ position:absolute;inset:0;opacity:0;transition:opacity .8s ease; display:flex;align-items:center;pointer-events:none;min-height:inherit } .rs-slide.on{opacity:1;pointer-events:auto} /* * Only the background picture fills the slide. * * This used to read `.rs-slide img`, which caught every image inside the * slide — including the layers. `inset:0` then overrode their left and top, * and `width:100%` overrode their size, so a layer sat stretched across the * whole slide and moving it changed nothing at all. */ .rs-slide > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .rs-slide-inner{ position:relative;z-index:1;padding-block:clamp(48px,8vw,90px); color:#fff;max-width:760px } /* A wash so the words stay readable over any picture the shop uploads. */ .rs-slide::after{ content:"";position:absolute;inset:0; background:linear-gradient( to top, color-mix(in srgb, var(--ra,var(--cyan)) 40%, rgba(8,10,16,.94)) 0%, rgba(8,10,16,.72) 55%, rgba(8,10,16,.4) 100%) } .rs-slide-inner{position:relative;z-index:2} .rs-badge{ display:inline-block;margin-bottom:14px;padding:6px 15px;border-radius:99px; background:rgba(255,255,255,.16);font-size:11.5px;font-weight:800; letter-spacing:1px;text-transform:uppercase } .rs-slide h1{ font-size:clamp(28px,5vw,48px);line-height:1.15;letter-spacing:-1px;margin:0 0 14px } .rs-slide p{font-size:clamp(14px,1.7vw,17px);line-height:1.8;margin:0 0 24px;max-width:60ch; color:rgba(255,255,255,.93)} .rs-slide-actions{display:flex;gap:11px;flex-wrap:wrap} .rs-dots{ position:absolute;bottom:22px;inset-inline-start:50%;transform:translateX(-50%); z-index:3;display:flex;gap:8px } .rs-dot{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.35); border:0;cursor:pointer;transition:width .25s,background .25s} .rs-dot.on{width:26px;background:#fff} /* ── Three promises ─────────────────────────────────────────────────── */ .rs-promises{padding-block:clamp(38px,6vw,64px)} .rs-promise{ background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:26px 24px;text-align:center;transition:transform .22s,box-shadow .22s,border-color .2s } .rs-promise:hover{ transform:translateY(-5px);border-color:var(--rc); box-shadow:0 20px 40px -20px color-mix(in srgb,var(--rc) 60%,transparent) } .rs-promise-ico{ width:56px;height:56px;border-radius:17px;display:grid;place-items:center; margin:0 auto 15px;color:#fff; background:linear-gradient(140deg,var(--rc),color-mix(in srgb,var(--rc) 55%,#000)) } .rs-promise h3{font-size:17px;margin:0 0 8px} .rs-promise p{font-size:13.5px;color:var(--text-dim);line-height:1.75;margin:0} /* ── Prose blocks with a picture ────────────────────────────────────── */ .rs-story{padding-block:clamp(34px,5vw,58px)} .rs-story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px); align-items:center} .rs-story.flipped .rs-story-art{order:-1} .rs-story h2{font-size:clamp(21px,3vw,30px);line-height:1.3;margin:0 0 16px;letter-spacing:-.4px} .rs-story-body{font-size:14.5px;line-height:1.95;color:var(--text-dim);margin-bottom:20px} .rs-note{ display:flex;align-items:flex-start;gap:9px;padding:13px 15px;border-radius:12px; background:var(--amber-dim,rgba(245,165,36,.12));border:1px solid rgba(245,165,36,.3); font-size:13px;line-height:1.7;color:var(--text);margin:0 0 20px } .rs-note svg{color:#F5A524;flex-shrink:0;margin-top:2px} /* A transparent PNG must stay transparent: no panel behind it, no rounded corners cutting into artwork that already has its own shape, and no shadow drawn around a rectangle the picture does not fill. */ .rs-story-art img{ width:100%;height:auto;display:block;background:none;border-radius:0;box-shadow:none } /* A photograph still wants a frame; mark it with class="framed". */ .rs-story-art img.framed{ border-radius:18px;box-shadow:0 24px 50px -24px rgba(0,0,0,.4) } .rs-art-placeholder{ background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px } .rs-art-placeholder svg{width:100%;height:auto;display:block} /* ── Packages ───────────────────────────────────────────────────────── */ .rs-packages{padding-block:clamp(40px,6vw,72px);background:var(--surface-2)} .rs-tabs{ display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:26px; background:var(--surface);padding:6px;border-radius:14px;width:max-content; margin-inline:auto;border:1px solid var(--line) } .rs-tab{ padding:11px 24px;border-radius:10px;font-size:14px;font-weight:700; color:var(--text-dim);background:none;border:0;cursor:pointer;transition:.18s } .rs-tab.active{ background:linear-gradient(135deg,var(--cyan),var(--violet));color:#fff; box-shadow:0 8px 20px -10px var(--cyan) } .rs-group{display:none} .rs-group.on{display:block} .rs-group-blurb{text-align:center;color:var(--text-dim);font-size:14px;margin:0 0 22px} .rs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px} /* Each card takes a colour from its position, so a row of four reads as four choices rather than one repeated block. */ .rs-card{ background:var(--surface);border:1px solid var(--line);border-radius:20px; padding:30px 22px 26px;display:flex;flex-direction:column;position:relative; overflow:hidden; transition:transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s, border-color .2s } .rs-card::before{ content:"";position:absolute;top:0;inset-inline:0;height:5px; background:linear-gradient(90deg,var(--pc,var(--cyan)), color-mix(in srgb,var(--pc,var(--cyan)) 45%,var(--violet))) } /* A soft wash of the same colour behind the price. */ .rs-card::after{ content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:150px; background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--pc,var(--cyan)) 14%,transparent), transparent 70%); pointer-events:none;z-index:0 } .rs-card > *{position:relative;z-index:1} .rs-card:nth-child(1){--pc:#12B886} .rs-card:nth-child(2){--pc:#2CA6E0} .rs-card:nth-child(3){--pc:#6C5CE7} .rs-card:nth-child(4){--pc:#F5A524} .rs-card:nth-child(5){--pc:#E8590C} .rs-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--pc,var(--cyan)) 40%,transparent); box-shadow:0 26px 52px -22px color-mix(in srgb,var(--pc,var(--cyan)) 55%,transparent) } .rs-card.featured{ border-color:var(--pc,var(--cyan)); box-shadow:0 0 0 1px var(--pc,var(--cyan)), 0 20px 44px -22px color-mix(in srgb,var(--pc,var(--cyan)) 60%,transparent) } .rs-card-badge{ position:absolute;top:14px;inset-inline-end:16px;padding:5px 12px;border-radius:99px; background:var(--pc,var(--cyan));color:#fff;font-size:10px;font-weight:800; letter-spacing:.7px;text-transform:uppercase;z-index:2 } .rs-card h3{font-size:14px;font-weight:800;letter-spacing:.8px;text-transform:uppercase; color:var(--text-dim);margin:0 0 12px} .rs-price{display:flex;align-items:baseline;gap:3px;margin-bottom:4px} .rs-cur{font-size:20px;font-weight:700;color:var(--pc,var(--text-dim))} .rs-price b{ font-size:42px;font-weight:800;letter-spacing:-1.5px;line-height:1; color:var(--pc,var(--text)) } .rs-card-note{font-size:12px;color:var(--text-faint);margin:0 0 18px} .rs-features{list-style:none;margin:0 0 22px;padding:0;flex:1} .rs-features li{display:flex;align-items:flex-start;gap:9px;font-size:13px; line-height:1.65;margin-bottom:9px;color:var(--text-dim)} .rs-features svg{color:var(--pc,var(--cyan));flex-shrink:0;margin-top:2px;opacity:.9} .rs-card .btn{width:100%;justify-content:center} @media (max-width:860px){ .rs-story-grid{grid-template-columns:1fr} .rs-story.flipped .rs-story-art{order:0} .rs-tabs{width:100%} .rs-tab{flex:1;padding:11px 12px;font-size:13px} } /* Alternating section backgrounds, so the reseller page reads as chapters. */ .band-soft{background:var(--surface-2)} .band-plain{background:var(--bg)} /* ── Which account an access code belongs to ────────────────────────── */ .pl-line-tag{ display:inline-block;margin-inline-start:8px;padding:2px 8px;border-radius:6px; background:var(--surface-2);border:1px solid var(--line); font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px; font-weight:600;color:var(--cyan);vertical-align:middle } .pl-from-line{display:inline-flex;color:var(--ok,#12B886);vertical-align:middle;margin-inline-start:3px} .pl-line-details{margin-top:12px;border-top:1px solid var(--line);padding-top:11px} .pl-line-details summary{ cursor:pointer;font-size:12.5px;font-weight:600;color:var(--cyan);list-style:none } .pl-line-details summary::-webkit-details-marker{display:none} .pl-line-details summary::before{content:"▸ ";font-size:10px} .pl-line-details[open] summary::before{content:"▾ "} .pl-line-list{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:11px 0 0;font-size:12.5px} .pl-line-list dt{color:var(--text-faint);font-weight:600} .pl-line-list dd{margin:0;color:var(--text);word-break:break-all} .pl-m3u{ font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px; display:inline-block;max-width:100%;word-break:break-all } /* ── Choosing locked categories in the account area ─────────────────── */ .pl-lock-cats{margin-top:20px;border-top:1px solid var(--line);padding-top:18px} .pl-lock-cats h4{font-size:14px;margin:0 0 5px} .pl-lock-group{ border:1px solid var(--line);border-radius:12px;margin-bottom:8px;overflow:hidden } .pl-lock-group summary{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 14px;cursor:pointer;background:var(--surface-2); font-size:13.5px;font-weight:700;list-style:none } .pl-lock-group summary::-webkit-details-marker{display:none} .pl-lock-group summary i{ font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px; background:var(--surface);color:var(--text-faint);border:1px solid var(--line) } .pl-lock-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px; padding:10px;max-height:260px;overflow-y:auto } .pl-lock-item{ display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px; font-size:13px;color:var(--text-dim);cursor:pointer;transition:.14s } .pl-lock-item:hover{background:var(--surface-2);color:var(--text)} .pl-lock-item input{width:16px;height:16px;accent-color:var(--danger);flex-shrink:0} /* ── Credentials as copyable chips ──────────────────────────────────── */ .cred-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0} .cred-chip{ display:inline-flex;align-items:center;gap:9px;max-width:100%; padding:7px 9px 7px 11px;border-radius:12px; background:var(--surface-2);border:1px solid var(--line); transition:border-color .18s } .cred-chip:hover{border-color:var(--cyan)} .cc-icon{ width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0; background:var(--cyan-dim);color:var(--cyan) } .cred-pass .cc-icon{background:rgba(245,165,36,.16);color:#F5A524} .cred-m3u .cc-icon{background:rgba(108,92,231,.16);color:var(--violet)} .cc-body{display:flex;flex-direction:column;min-width:0} .cc-body i{ font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.7px; text-transform:uppercase;color:var(--text-faint);line-height:1.4 } /* Clipped rather than wrapped: a playlist link must not stretch the card. */ .cc-body b{ font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;font-weight:600; color:var(--text);max-width:min(260px,52vw); overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .cc-copy{ width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0; background:transparent;border:0;color:var(--text-faint);cursor:pointer;transition:.15s } .cc-copy:hover{background:var(--cyan);color:var(--cyan-ink)} /* ── The tag chip ───────────────────────────────────────────────────── */ .svc-tag{ display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:99px; background:color-mix(in srgb,var(--tg,var(--violet)) 16%,transparent); border:1px solid color-mix(in srgb,var(--tg,var(--violet)) 45%,transparent); color:var(--tg,var(--violet)); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px;font-weight:800;letter-spacing:.5px; vertical-align:middle;white-space:nowrap } /* Between the mobile breakpoint and a roomy desktop, the links tighten rather than crowd the buttons beside them. */ @media (min-width:1441px) and (max-width:1700px){ .main-nav{gap:1px;margin-inline-start:8px;padding-inline-end:10px} .main-nav a{padding:8px 9px;font-size:13.5px} .main-nav .nav-ico{display:none} /* text before icons when space is short */ .header-inner{gap:12px} .header-actions{gap:6px} } /* The pairing form's select must sit level with the code box beside it. */ .pl-pair-form .form-control, .pl-pair-form select.form-control{height:46px;padding-block:0} .pl-pair-form select.form-control{line-height:46px} /* ═══════════════════════════════════════════════════════════════════════ A trial that is being prepared by hand ═══════════════════════════════════════════════════════════════════════ */ .trial-pending{max-width:760px;margin-inline:auto} /* ── Where they are in the process ──────────────────────────────────── */ .tp-steps{ list-style:none;margin:0 0 24px;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative } /* The rail behind the markers. */ .tp-steps::before{ content:"";position:absolute;top:17px;inset-inline:16%;height:2px; background:var(--line);z-index:0 } .tp-steps li{ position:relative;z-index:1;text-align:center;padding:0 8px; display:flex;flex-direction:column;align-items:center;gap:5px } .tp-dot{ width:36px;height:36px;border-radius:50%;display:grid;place-items:center; background:var(--surface);border:2px solid var(--line);color:var(--text-faint); transition:.2s } .tp-steps li.done .tp-dot{background:var(--ok,#12B886);border-color:var(--ok,#12B886);color:#fff} .tp-steps li.now .tp-dot{border-color:#F5A524;background:var(--surface)} .tp-pulse{ width:12px;height:12px;border-radius:50%;background:#F5A524; animation:tpPulse 1.6s ease-in-out infinite } @keyframes tpPulse{ 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(245,165,36,.5)} 50% {transform:scale(.82);box-shadow:0 0 0 8px rgba(245,165,36,0)} } .tp-steps b{font-size:13.5px;color:var(--text)} .tp-steps li:not(.done):not(.now) b{color:var(--text-faint)} .tp-steps i{font-style:normal;font-size:11.5px;color:var(--text-faint);line-height:1.5} /* ── The status card ────────────────────────────────────────────────── */ .tp-card{ background:var(--surface);border:1px solid var(--line);border-radius:20px; padding:26px;margin-bottom:18px; box-shadow:0 20px 44px -28px rgba(0,0,0,.35) } .tp-head{display:flex;align-items:center;gap:15px;margin-bottom:14px} .tp-badge{ width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex-shrink:0; background:linear-gradient(140deg,#F5A524,#E8590C);color:#fff } .tp-head h2{font-size:19px;margin:0 0 3px} .tp-head p{font-size:13px;color:var(--text-dim);margin:0} .tp-body{font-size:14.5px;line-height:1.85;color:var(--text-dim);margin:0 0 20px} .tp-facts{display:grid;gap:10px;margin-bottom:22px} .tp-fact{ display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border-radius:13px; background:var(--surface-2);border:1px solid var(--line) } .tp-fact-ico{ width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0; background:color-mix(in srgb,var(--fc) 16%,transparent);color:var(--fc) } .tp-fact b{display:block;font-size:13.5px;margin-bottom:2px} .tp-fact i{ font-style:normal;font-size:12.5px;color:var(--text-faint);line-height:1.6; word-break:break-word } .tp-actions{display:flex;gap:10px;flex-wrap:wrap} /* ── Something to read while waiting ────────────────────────────────── */ .tp-guide{ background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px 26px } .tp-guide h3{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 6px} .tp-guide h3 svg{color:var(--cyan)} .tp-guide-lead{font-size:13px;color:var(--text-faint);margin:0 0 16px} @media (max-width:640px){ .tp-steps{grid-template-columns:1fr;gap:14px} .tp-steps::before{display:none} .tp-steps li{flex-direction:row;text-align:start;gap:12px;align-items:center} .tp-steps li > div{flex:1} .tp-card{padding:20px} .tp-head{flex-direction:column;align-items:flex-start;gap:11px} } /* A trial request sitting among the orders. */ tr.row-trial > td{background:rgba(18,184,134,.05)} .trial-pill{ display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px; background:rgba(18,184,134,.14);color:#12B886; font-size:11px;font-weight:800;letter-spacing:.4px;white-space:nowrap } .crumbs{margin-bottom:18px;font-size:13px} .crumbs a{display:inline-flex;align-items:center;gap:6px;color:var(--text-dim)} .crumbs a:hover{color:var(--cyan)} /* How many subscriptions sit behind each tab. */ .tabs .tab-count{ display:inline-block;margin-inline-start:7px;padding:1px 7px;border-radius:99px; background:var(--surface-2);color:var(--text-faint); font-size:10.5px;font-weight:800;line-height:1.6 } .tabs button.active .tab-count{background:var(--cyan);color:var(--cyan-ink)} /* ── The invitation to become a reseller ────────────────────────────── */ .rs-invite-wrap{padding-block:clamp(36px,6vw,68px)} .rs-invite{ position:relative;overflow:hidden;border-radius:26px;padding:clamp(30px,5vw,54px); text-align:center;color:#fff;isolation:isolate; background:linear-gradient(120deg,#0FB89E,#2CA6E0,#6C5CE7,#E5177B,#0FB89E); background-size:300% 300%; animation:inviteShift 14s ease infinite } @keyframes inviteShift{ 0%,100%{background-position:0% 50%} 50% {background-position:100% 50%} } /* A slow sweep of light across the surface. */ .rs-invite-glow{ position:absolute;inset:-40%;z-index:0;pointer-events:none; background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent 70%); animation:inviteGlow 11s ease-in-out infinite alternate } @keyframes inviteGlow{ from{transform:translate3d(-18%,-10%,0) scale(1)} to {transform:translate3d(18%,12%,0) scale(1.25)} } .rs-invite-body{position:relative;z-index:1} .rs-invite-badge{ display:inline-flex;align-items:center;gap:6px;margin-bottom:14px; padding:6px 15px;border-radius:99px;background:rgba(255,255,255,.2); backdrop-filter:blur(6px); font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase } .rs-invite h2{ font-size:clamp(23px,3.4vw,38px);line-height:1.25;letter-spacing:-.7px; margin:0 0 12px;text-shadow:0 2px 18px rgba(0,0,0,.22) } .rs-invite p{ font-size:clamp(14px,1.6vw,17px);line-height:1.75;margin:0 auto 26px; max-width:58ch;color:rgba(255,255,255,.95) } .btn-invite{ display:inline-flex;align-items:center;gap:9px; padding:15px 34px;border-radius:99px;font-size:15px;font-weight:800; background:#fff;color:#12100F; box-shadow:0 14px 34px -14px rgba(0,0,0,.5); transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s } .btn-invite:hover{transform:translateY(-3px);box-shadow:0 22px 44px -16px rgba(0,0,0,.55)} @media (prefers-reduced-motion:reduce){ .rs-invite{animation:none} .rs-invite-glow{animation:none} } /* ═══════════════════════════════════════════════════════════════════════ Slide layers — a slide built from several pictures ═══════════════════════════════════════════════════════════════════════ */ .sl-layers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} /* Stated with !important on purpose: a slider skin is free to style its own images however it likes, and a layer must survive that. */ .sl-layers .sl-layer{ position:absolute !important; inset:auto !important; left:var(--lx) !important; top:var(--ly) !important; width:var(--lw) !important; height:auto !important; max-width:none !important; object-fit:contain !important; opacity:var(--lo); transform:translate(-50%,-50%); /* Layers are usually cut-out artwork, so nothing is drawn behind them. */ background:none } /* ── Movement, once the slide is showing ────────────────────────────── */ /* Each keyframe carries the centring transform, or the layer would jump. */ @keyframes slFloatUp {0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 14px))}} @keyframes slFloatDown {0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% + 14px))}} @keyframes slFloatLeft {0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% - 14px),-50%)}} @keyframes slFloatRight{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% + 14px),-50%)}} @keyframes slPulse {0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}} @keyframes slSpin {from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}} @keyframes slSway {0%,100%{transform:translate(-50%,-50%) rotate(-2.5deg)}50%{transform:translate(-50%,-50%) rotate(2.5deg)}} .sl-layers .sl-m-float.sl-d-up {animation:slFloatUp var(--lspeed) ease-in-out infinite} .sl-layers .sl-m-float.sl-d-down {animation:slFloatDown var(--lspeed) ease-in-out infinite} .sl-layers .sl-m-float.sl-d-left {animation:slFloatLeft var(--lspeed) ease-in-out infinite} .sl-layers .sl-m-float.sl-d-right{animation:slFloatRight var(--lspeed) ease-in-out infinite} .sl-layers .sl-m-pulse{animation:slPulse var(--lspeed) ease-in-out infinite} .sl-layers .sl-m-spin {animation:slSpin var(--lspeed) linear infinite} .sl-layers .sl-m-sway {animation:slSway var(--lspeed) ease-in-out infinite} /* ── Arrival, when the slide becomes the visible one ────────────────── */ @keyframes slInRight{from{opacity:0;transform:translate(calc(-50% + 70px),-50%)} to{opacity:var(--lo);transform:translate(-50%,-50%)}} @keyframes slInLeft {from{opacity:0;transform:translate(calc(-50% - 70px),-50%)} to{opacity:var(--lo);transform:translate(-50%,-50%)}} @keyframes slInUp {from{opacity:0;transform:translate(-50%,calc(-50% + 60px))} to{opacity:var(--lo);transform:translate(-50%,-50%)}} @keyframes slInDown {from{opacity:0;transform:translate(-50%,calc(-50% - 60px))} to{opacity:var(--lo);transform:translate(-50%,-50%)}} @keyframes slInFade {from{opacity:0}to{opacity:var(--lo)}} @keyframes slInZoom {from{opacity:0;transform:translate(-50%,-50%) scale(.72)} to{opacity:var(--lo);transform:translate(-50%,-50%) scale(1)}} /* Held invisible until its slide is on, then played once. */ .slide.active .sl-layer[class*="sl-in-"], .rs-slide.on .sl-layer[class*="sl-in-"]{animation-fill-mode:both} .sl-layer[class*="sl-in-"]{opacity:0} .slide.active .sl-in-right, .rs-slide.on .sl-in-right{animation:slInRight .85s cubic-bezier(.2,.8,.3,1) var(--ldelay) both} .slide.active .sl-in-left, .rs-slide.on .sl-in-left {animation:slInLeft .85s cubic-bezier(.2,.8,.3,1) var(--ldelay) both} .slide.active .sl-in-up, .rs-slide.on .sl-in-up {animation:slInUp .85s cubic-bezier(.2,.8,.3,1) var(--ldelay) both} .slide.active .sl-in-down, .rs-slide.on .sl-in-down {animation:slInDown .85s cubic-bezier(.2,.8,.3,1) var(--ldelay) both} .slide.active .sl-in-fade, .rs-slide.on .sl-in-fade {animation:slInFade .9s ease var(--ldelay) both} .slide.active .sl-in-zoom, .rs-slide.on .sl-in-zoom {animation:slInZoom .85s cubic-bezier(.2,.8,.3,1) var(--ldelay) both} /* ── Where the words sit ────────────────────────────────────────────── */ .slide-text-placed,.rs-text-placed{ position:absolute; left:var(--tx,50%);top:var(--ty,50%); transform:translate(-50%,-50%); width:min(760px,86%);z-index:3 } /* ── Arrival for the words and the button ───────────────────────────── */ @keyframes slTextRight{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}} @keyframes slTextLeft {from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}} @keyframes slTextUp {from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}} @keyframes slTextDown {from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}} @keyframes slTextFade {from{opacity:0}to{opacity:1}} @keyframes slTextZoom {from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}} [class*="sl-t-"]{opacity:0} .slide.active [class*="sl-t-"], .rs-slide.on [class*="sl-t-"]{opacity:1} .slide.active .sl-t-right, .rs-slide.on .sl-t-right{animation:slTextRight .8s cubic-bezier(.2,.8,.3,1) both} .slide.active .sl-t-left, .rs-slide.on .sl-t-left {animation:slTextLeft .8s cubic-bezier(.2,.8,.3,1) both} .slide.active .sl-t-up, .rs-slide.on .sl-t-up {animation:slTextUp .8s cubic-bezier(.2,.8,.3,1) both} .slide.active .sl-t-down, .rs-slide.on .sl-t-down {animation:slTextDown .8s cubic-bezier(.2,.8,.3,1) both} .slide.active .sl-t-fade, .rs-slide.on .sl-t-fade {animation:slTextFade .9s ease both} .slide.active .sl-t-zoom, .rs-slide.on .sl-t-zoom {animation:slTextZoom .8s cubic-bezier(.2,.8,.3,1) both} /* The second and third arrive a moment after the first, which reads better. */ .slide.active .sl-sub, .rs-slide.on .sl-sub{animation-delay:.16s} .slide.active .sl-btn, .rs-slide.on .sl-btn{animation-delay:.32s} @media (prefers-reduced-motion:reduce){ .sl-layer,[class*="sl-t-"]{animation:none !important;opacity:var(--lo,1) !important} } @media (max-width:700px){ /* On a narrow screen the words come first; decoration must not cover them. */ .sl-layers{opacity:.4} .slide-text-placed,.rs-text-placed{width:92%} } /* ── The web player button ──────────────────────────────────────────── */ .btn-player{ display:inline-flex;align-items:center;gap:7px; padding:9px 16px;border-radius:99px; font-size:13px;font-weight:800;letter-spacing:.2px;white-space:nowrap; color:#08100D; background:linear-gradient(135deg,#00F5A0,#00D9F5); box-shadow:0 0 0 0 rgba(0,245,160,.55); transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .25s; position:relative } .btn-player:hover,.btn-player:focus-visible{ transform:translateY(-2px); box-shadow:0 10px 26px -8px rgba(0,217,245,.7); outline:none } /* A quiet ring that draws the eye without ever moving the layout. */ .btn-player::after{ content:"";position:absolute;inset:0;border-radius:99px;pointer-events:none; animation:playerRing 2.6s ease-out infinite } @keyframes playerRing{ 0% {box-shadow:0 0 0 0 rgba(0,245,160,.5)} 70% {box-shadow:0 0 0 11px rgba(0,245,160,0)} 100%{box-shadow:0 0 0 0 rgba(0,245,160,0)} } .bp-dot{ width:7px;height:7px;border-radius:50%;background:#08100D;opacity:.75; animation:playerBlink 1.7s ease-in-out infinite } @keyframes playerBlink{0%,100%{opacity:.75}50%{opacity:.2}} /* Where room is short, the wording goes and the mark stays. */ @media (max-width:1440px){ .btn-player .bp-text{display:none} .btn-player{padding:9px 12px} } @media (prefers-reduced-motion:reduce){ .btn-player::after,.bp-dot{animation:none} } /* ── Channel reports in the account area ────────────────────────────── */ .report-new{ border:1px solid var(--line);border-radius:14px;margin-bottom:18px;overflow:hidden } .report-new summary{ display:flex;align-items:center;gap:9px;padding:14px 17px;cursor:pointer; background:var(--surface-2);font-size:13.5px;font-weight:700;list-style:none } .report-new summary::-webkit-details-marker{display:none} .report-new summary svg{color:#E8590C} .report-form{padding:18px} .report-list{display:grid;gap:12px} .report-card{ background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px } .rc-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap } .rc-head b{font-size:14.5px;display:block} .rc-when{font-size:11.5px;color:var(--text-faint)} .rc-reason{font-size:12.5px;color:var(--text-dim);margin:8px 0 0} .rc-note{ font-size:13px;line-height:1.7;color:var(--text-dim);margin:9px 0 0; padding-inline-start:12px;border-inline-start:2px solid var(--line) } .rc-reply{ margin-top:13px;padding:13px 15px;border-radius:11px; background:var(--cyan-dim);border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent) } .rc-reply b{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cyan)} .rc-reply p{font-size:13px;line-height:1.7;margin:7px 0 4px} /* ═══════════════════════════════════════════════════════════════════════ PHONES ═══════════════════════════════════════════════════════════════════════ Everything below is inside a phone-width query, so nothing here can change how the site looks on a computer. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width:760px){ /* ── Nothing may be wider than the screen ─────────────────────────── */ /* * The sideways scrolling came from decoration, not content: several panels * carry a soft glow positioned outside their own edges, and where the panel * did not clip it, the page grew wider than the phone. The whole document * is pinned to the viewport, and those glows are clipped at the source. */ html,body{max-width:100%;overflow-x:hidden} /* ── The header on a phone ────────────────────────────────────────── */ /* * A wide uploaded logo gives way instead of sliding under the buttons. * * The image had a height limit but no width limit, so a wide brand mark * kept its full width, spilled out of its column, and the language pill * was drawn straight over it. The cap is the space the button cluster * actually leaves: roughly 248px of a phone's width is theirs, and the * rest — never less than a legible 64px — belongs to the logo. */ .logo{min-width:0;overflow:hidden} .logo img, .logo .logo-pic img{ height:auto;max-height:32px; max-width:clamp(64px, calc(100vw - 248px), 160px); object-fit:contain } /* * The header trades on a phone: player and language leave, the cart stays. * * The player is the bottom bar's big centre button, and the language * switcher already sits in the footer — both are one thumb away without * costing the header the space the logo needs. The basket is the one * thing worth glancing at mid-shopping, so it keeps its corner. */ .header-actions .btn-player{display:none} .header-actions .lang-switch{display:none} .header-actions .cart-btn{display:inline-grid} /* "Create account" folds down to its icon: the words were exactly the width the logo was missing. */ .reg-btn{width:36px;height:36px;padding:0;justify-content:center;border-radius:10px;gap:0} .reg-btn .reg-txt{display:none} /* * Room under the page for the bottom bar — but only when the bar exists. * * The old rule reserved the space unconditionally: a site whose bar was * switched off, or whose menu produced nothing, was left with a bare * strip of background under the footer and nothing standing on it. The * bar now marks the page when it renders, and only a marked page keeps * the room. 110px, because the bar's centre button makes it ~100px tall. */ body{padding-bottom:0} body.has-mnav{padding-bottom:calc(110px + env(safe-area-inset-bottom))} .back-to-top{bottom:118px} .rv-card,.feature-box,.stat-box,.blog-strip-card,.own-player, .dash-player,.stat,.price-card,.rs-invite{overflow:hidden} /* A long word or an unbroken address must wrap rather than stretch. */ body{overflow-wrap:break-word} .container{width:100%;padding-inline:16px} /* Grid and flex children default to their content width, which is what lets one wide child drag the whole row past the edge. */ .grid > *,.split > *,.form-row > *{min-width:0} /* The account area is a grid too, and its column was sized by its widest child — the section-tab strip — instead of the phone. Pinned, the strip scrolls inside itself the way it was meant to. */ .account > *,.account-layout > *{min-width:0;max-width:100%} .account-nav{max-width:100%} table{min-width:0} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ── The slider fills the phone ───────────────────────────────────── */ .hero-slider{ min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h)) } .slide-content{max-width:100%;padding-inline:4px} .slide-title{font-size:clamp(26px,7.5vw,38px);line-height:1.2} .slide-sub{font-size:14.5px;line-height:1.75} .slide-actions{flex-wrap:wrap} .slide-actions .btn{flex:1 1 auto;justify-content:center} /* * The bottom bar already existed and reserves its own space, so nothing * extra is added here. An earlier version of this block reserved it a * second time and left a band of empty page under the footer. */ /* ── The account area ─────────────────────────────────────────────── */ .account-layout{grid-template-columns:1fr;gap:16px} .account-side{position:static;max-height:none} /* The section list scrolls sideways on purpose — it is a strip of tabs, and it is the one place where sideways movement is wanted. */ .account-nav{ display:flex;gap:6px;overflow-x:auto;padding-bottom:6px; scrollbar-width:none;-webkit-overflow-scrolling:touch } .account-nav::-webkit-scrollbar{display:none} .account-nav a{flex-shrink:0;white-space:nowrap} .sec-head{flex-direction:column;align-items:flex-start;gap:10px} .service-card,.report-card,.tp-card,.panel{padding:16px} .service-actions{flex-wrap:wrap} .service-actions .btn{flex:1 1 auto;justify-content:center} /* Chips of credentials must clip, not stretch the card. */ .cred-chips{flex-direction:column;align-items:stretch} .cred-chip{width:100%} .cc-body b{max-width:100%} .tabs{overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs button{flex-shrink:0;white-space:nowrap} } /* The version, present but not competing with anything. */ .footer-version{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px;opacity:.45;letter-spacing:.3px } /* ═══ Floating support bubbles (Telegram / WhatsApp) ═══════════════════ */ /* Stacked just above the back-to-top button, breathing softly. */ .float-support{ position:fixed;inset-inline-end:16px;bottom:148px;z-index:96; display:flex;flex-direction:column;gap:12px } .fs-item{position:relative} .fs-bubble{ width:50px;height:50px;border-radius:50%;display:grid;place-items:center; color:#fff;cursor:pointer;border:0;position:relative; box-shadow:0 10px 24px -6px rgba(10,16,28,.35); will-change:transform;transform:translate3d(0,0,0); transition:transform .25s cubic-bezier(.2,.8,.2,1) } /* the gentle bob belongs to the wrapper, so it never collides with the spin */ .fs-item{animation:fsFloat 3.6s ease-in-out infinite;will-change:transform} .fs-item:nth-child(2){animation-delay:1.8s} .fs-bubble:hover{transform:translate3d(0,0,0) scale(1.08)} .fs-whatsapp .fs-bubble{background:linear-gradient(140deg,#31D46A,#128C4B)} .fs-telegram .fs-bubble{background:linear-gradient(140deg,#37AEE2,#1E78C8)} /* The pulse ring: a scaled, fading copy of the bubble — pure transform + opacity, so it runs on the compositor at 60fps instead of repainting. */ .fs-bubble::before{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; background:var(--fs-ring, rgba(53,224,199,.5)); transform:scale(1);opacity:.55;will-change:transform,opacity; animation:fsPulse 2.6s cubic-bezier(.2,.6,.3,1) infinite } .fs-whatsapp .fs-bubble::before{--fs-ring:rgba(49,212,106,.55)} .fs-telegram .fs-bubble::before{--fs-ring:rgba(55,174,226,.55);animation-delay:1.3s} @keyframes fsPulse{ 0%{transform:scale(1);opacity:.55} 70%{transform:scale(1.65);opacity:0} 100%{transform:scale(1.65);opacity:0} } @keyframes fsFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}} /* Several accounts on one channel: the operator card beside the bubble. */ .fs-menu{ position:absolute;bottom:0;inset-inline-end:calc(100% + 16px); min-width:230px;background:var(--surface);border:1px solid var(--line); border-radius:16px;box-shadow:var(--shadow-lg);padding:6px; opacity:0;visibility:hidden;transform:translateY(8px) scale(.96); transform-origin:bottom var(--fs-side, right);transition:.22s;z-index:97 } .fs-item.open .fs-menu{opacity:1;visibility:visible;transform:none} /* Named after its channel, in the channel's own colour. */ .fs-menu-head{ padding:8px 12px 9px;margin:-6px -6px 6px;font-size:12px;font-weight:800; letter-spacing:.3px;border-bottom:1px solid var(--line-soft); border-radius:16px 16px 0 0;color:#fff } .fs-telegram .fs-menu-head{background:linear-gradient(140deg,#37AEE2,#1E78C8)} .fs-whatsapp .fs-menu-head{background:linear-gradient(140deg,#31D46A,#128C4B)} /* The arrow tail, pointing at this menu's own bubble. */ .fs-tail{ position:absolute;bottom:16px;inset-inline-end:-7px;width:14px;height:14px; background:var(--surface);border:1px solid var(--line); border-inline-start:0;border-bottom:0;transform:rotate(45deg) } html[dir="ltr"] .fs-tail{transform:rotate(45deg)} html[dir="rtl"] .fs-tail{transform:rotate(-135deg);border:1px solid var(--line);border-inline-start:0;border-bottom:0} /* One operator per row: the face, the name, the address. */ .fs-menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px; color:var(--text);white-space:nowrap;transition:.15s} .fs-menu a:hover{background:var(--surface-2)} .fs-face{ position:relative;width:36px;height:36px;border-radius:50%;flex-shrink:0; display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;overflow:visible } .fs-telegram .fs-face{background:linear-gradient(140deg,#37AEE2,#1E78C8)} .fs-whatsapp .fs-face{background:linear-gradient(140deg,#31D46A,#128C4B)} .fs-face img{width:100%;height:100%;border-radius:50%;object-fit:cover} /* The little green "here now" dot. */ .fs-online{position:absolute;bottom:0;inset-inline-end:0;width:10px;height:10px; border-radius:50%;background:#2ECC71;border:2px solid var(--surface)} .fs-op{display:flex;flex-direction:column;min-width:0} .fs-op b{font-size:13.5px} .fs-op i{font-style:normal;font-size:11px;color:var(--text-faint)} .fs-menu a:hover .fs-op b{color:var(--cyan)} /* The tap flourish: one smooth, uninterruptible full turn with a soft pop, like the WP widgets. The transition is disabled while it spins so the hover scale cannot tug at it. */ .fs-bubble.fs-spin{animation:fsSpin .7s cubic-bezier(.34,1.2,.64,1) 1 both;transition:none} @keyframes fsSpin{ 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} 55%{transform:translate3d(0,0,0) rotate(300deg) scale(1.14)} 100%{transform:translate3d(0,0,0) rotate(360deg) scale(1.08)} } @media (max-width:760px){ .float-support{bottom:calc(160px + env(safe-area-inset-bottom))} .fs-bubble{width:46px;height:46px} } @media (prefers-reduced-motion:reduce){ .fs-bubble,.fs-bubble::before{animation:none} } /* ═══ Occasion popup ═══════════════════════════════════════════════════ */ .occasion-popup{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px} .occasion-popup[hidden]{display:none} .pp-backdrop{position:absolute;inset:0;background:rgba(8,12,22,.6); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .pp-card{ position:relative;max-width:430px;width:100%;border-radius:22px;padding:34px 28px 28px; background:var(--surface);color:var(--text);box-shadow:0 30px 80px -20px rgba(0,0,0,.5); text-align:center;overflow:hidden; animation:ppIn .45s cubic-bezier(.2,.9,.3,1.2) } @keyframes ppIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}} .pp-close{position:absolute;top:10px;inset-inline-end:12px;border:0;background:none; font-size:26px;line-height:1;color:inherit;opacity:.55;cursor:pointer;z-index:2} .pp-close:hover{opacity:1} .pp-title{margin:0 0 10px;font-size:22px;font-weight:800} .pp-body{margin:0 0 20px;line-height:1.85;opacity:.92} .pp-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .pp-btn1{background:#fff;color:#111;font-weight:800} .pp-btn2{background:rgba(255,255,255,.14);color:inherit;border:1px solid rgba(255,255,255,.35)} .pp-orn{position:absolute;inset-inline-start:0;top:0;font-size:26px;line-height:1; padding:12px 14px;opacity:.95;pointer-events:none} /* The occasion styles: the admin picks one; everything below comes free. */ .pp-sale .pp-card{background:linear-gradient(150deg,#FF4E3A,#C4170C);color:#fff} .pp-sale .pp-orn::before{content:"🔥";} .pp-sale .pp-card::after{content:"%";position:absolute;inset-inline-end:-18px;bottom:-34px; font-size:150px;font-weight:900;opacity:.12;pointer-events:none} .pp-blackfriday .pp-card{background:linear-gradient(160deg,#17181C,#000);color:#F5D061; border:1px solid rgba(245,208,97,.4)} .pp-blackfriday .pp-orn::before{content:"🖤";} .pp-blackfriday .pp-btn1{background:#F5D061;color:#111} .pp-newyear .pp-card{background:linear-gradient(160deg,#1B2452,#0C1129);color:#fff} .pp-newyear .pp-orn::before{content:"🎆";} .pp-newyear .pp-card::after{content:"✨";position:absolute;inset-inline-end:14px;top:12px; font-size:22px;pointer-events:none} .pp-christmas .pp-card{background:linear-gradient(160deg,#B3132B,#7C0A1D);color:#fff; border:2px dashed rgba(255,255,255,.4)} .pp-christmas .pp-orn::before{content:"🎄";} .pp-christmas .pp-card::after{content:"❄ ❄ ❄";position:absolute;inset-inline-end:14px;top:14px; letter-spacing:8px;opacity:.8;pointer-events:none} .pp-nowruz .pp-card{background:linear-gradient(160deg,#0E8F6E,#0A5E49);color:#fff} .pp-nowruz .pp-orn::before{content:"🌸";} .pp-nowruz .pp-card::after{content:"🐟";position:absolute;inset-inline-end:16px;bottom:14px; font-size:24px;pointer-events:none} .pp-eid .pp-card{background:linear-gradient(160deg,#123B33,#081F1B);color:#EFD9A7; border:1px solid rgba(239,217,167,.35)} .pp-eid .pp-orn::before{content:"🌙";} .pp-eid .pp-btn1{background:#EFD9A7;color:#123B33} .pp-announce .pp-card{background:linear-gradient(150deg,var(--cyan),var(--violet));color:#08131A} .pp-announce .pp-orn::before{content:"📣";} .pp-announce .pp-btn2{border-color:rgba(0,0,0,.3);background:rgba(255,255,255,.35);color:#08131A} /* ═══ The install banner ═══════════════════════════════════════════════ */ .pwa-banner{ position:fixed;inset-inline:12px;bottom:calc(118px + env(safe-area-inset-bottom)); z-index:995;display:none;align-items:center;gap:12px; background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:12px 14px;box-shadow:0 18px 44px -12px rgba(8,12,24,.4); max-width:430px;margin-inline:auto } .pwa-banner.show{display:flex;animation:pbUp .4s cubic-bezier(.2,.9,.3,1.15)} @keyframes pbUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .pb-icon{border-radius:12px;flex-shrink:0} .pb-text{flex:1;min-width:0} .pb-text b{display:block;font-size:14px} .pb-sub{display:none;font-size:12px;color:var(--text-dim);line-height:1.6} .pwa-banner.pb-android .pb-sub-android{display:block} .pwa-banner.pb-ios .pb-sub-ios{display:block} .pwa-banner.pb-ios .pb-install{display:none} /* iOS installs by hand */ .pb-close{border:0;background:none;color:var(--text-faint);font-size:22px; line-height:1;cursor:pointer;padding:2px 4px;flex-shrink:0} @media (min-width:761px){.pwa-banner{bottom:24px}} /* The coin picker sleeps until its payment option is the chosen one. */ .coin-pick{display:none;animation:coinIn .25s ease-out} .pay-option.selected .coin-pick{display:block} @keyframes coinIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* The picker itself: a field that opens into a badged list. */ .cp-box{position:relative;display:block;max-width:280px} .cp-current{ display:flex;align-items:center;gap:10px;width:100%; padding:10px 13px;border-radius:12px;cursor:pointer;font:inherit;font-size:14px; background:var(--surface);border:1px solid var(--line);color:var(--text);transition:.15s } .cp-current:hover{border-color:var(--cyan)} .cp-current b{flex:1;text-align:start;font-weight:700} .cp-caret{color:var(--text-faint);transition:transform .18s} .cp-box.open .cp-caret{transform:rotate(180deg)} .cp-ico{flex-shrink:0;border-radius:50%} .cp-list{ position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:30; display:none;flex-direction:column;padding:5px;max-height:260px;overflow-y:auto; background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg) } .cp-box.open .cp-list{display:flex;animation:coinIn .18s ease-out} .cp-list button{ display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px; border:0;background:none;cursor:pointer;font:inherit;font-size:14px;color:var(--text); text-align:start;transition:.12s } .cp-list button:hover{background:var(--surface-2);color:var(--cyan)} .cp-list button b{font-weight:700} /* ═══ The payment waiting curtain ═════════════════════════════════════ Dressed identically to the standalone hand-off page that follows it — same night background, same card, same spinner — so the moment the server answers, one simply becomes the other and the eye sees no seam. */ .pay-wait{position:fixed;inset:0;z-index:1100;display:grid;place-items:center; background:#0E1726} .pay-wait[hidden]{display:none} .pw-card{display:flex;flex-direction:column;align-items:center;gap:16px; text-align:center;padding:44px 40px;max-width:340px;border-radius:22px; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09); animation:pwIn .35s ease-out} @keyframes pwIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .pw-logo{max-height:46px;max-width:210px;object-fit:contain} .pw-spin{display:grid;place-items:center} .pw-spin svg{width:34px;height:34px;color:transparent;border-radius:50%; border:3px solid rgba(255,255,255,.14);border-top-color:#0FB89E; animation:pwSpin 1s linear infinite} .pw-spin svg *{display:none} @keyframes pwSpin{to{transform:rotate(360deg)}} .pw-card b{font-size:16.5px;color:#E8EEF9} .pw-card p{margin:0;font-size:13.5px;color:#9FB0CB;line-height:1.9} /* ── Imported WordPress content: images, captions, galleries, embeds ── */ .prose img{max-width:100%;height:auto;border-radius:10px} .prose img.aligncenter,.prose .aligncenter{display:block;margin-inline:auto} .prose .alignleft{float:left;margin:4px 16px 10px 0;max-width:50%} .prose .alignright{float:right;margin:4px 0 10px 16px;max-width:50%} .prose figure.wp-caption{margin:18px 0;max-width:100%} .prose figure.wp-caption figcaption{font-size:13px;color:var(--text-faint);text-align:center;margin-top:6px} .prose .wp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:16px 0} .prose .wp-gallery img{aspect-ratio:4/3;object-fit:cover;width:100%} .prose iframe{max-width:100%;border:0;border-radius:10px} .prose iframe[src*="youtube"],.prose iframe[src*="vimeo"]{width:100%;aspect-ratio:16/9;height:auto} .prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto} .prose td,.prose th{border:1px solid var(--line,rgba(255,255,255,.1));padding:6px 10px} .prose::after{content:"";display:table;clear:both} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ Blog index (Guides & news): hero slider, cards, sidebar ║ ╚═══════════════════════════════════════════════════════════════════╝ */ .bl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:6px 0 22px} .bl-head h1{margin:0 0 4px;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em} .bl-head p{margin:0;color:var(--text-dim)} .bl-search{position:relative;flex:0 1 340px;min-width:240px} .bl-search svg{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none} .bl-search input{width:100%;height:46px;padding-inline:42px 16px;border-radius:999px;border:1px solid var(--line); background:var(--surface);color:var(--text);font:inherit;outline:none;transition:border-color .2s,box-shadow .2s} .bl-search input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-dim)} /* hero slider */ .bl-hero{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:21/8;min-height:300px;margin-bottom:22px; background:var(--surface-2);border:1px solid var(--line);isolation:isolate} .bl-hero-track{position:absolute;inset:0} .bl-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s;color:#fff;text-decoration:none} .bl-slide.is-on{opacity:1;visibility:visible;transition:opacity .7s ease;z-index:1} .bl-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s ease} .bl-slide.is-on img{transform:scale(1)} .bl-slide-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,10,20,.92) 0%,rgba(6,10,20,.55) 42%,rgba(6,10,20,.05) 75%)} .bl-slide-body{position:absolute;inset-inline:0;bottom:0;padding:28px 32px 44px;display:grid;gap:10px;max-width:760px} .bl-slide-body strong{font-size:clamp(20px,2.6vw,32px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance} .bl-slide-ex{color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bl-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:5px 12px;border-radius:999px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:700;backdrop-filter:blur(6px)} .bl-slide .bl-meta{color:rgba(255,255,255,.75)} .bl-nav{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:1px solid rgba(255,255,255,.25); background:rgba(8,12,24,.45);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .25s,background .2s} .bl-hero:hover .bl-nav,.bl-nav:focus-visible{opacity:1} .bl-nav:hover{background:rgba(8,12,24,.75)} .bl-prev{inset-inline-start:16px}.bl-next{inset-inline-end:16px} .bl-prev svg{transform:scaleX(-1)} [dir=rtl] .bl-prev svg{transform:none}[dir=rtl] .bl-next svg{transform:scaleX(-1)} .bl-dots{position:absolute;z-index:3;bottom:18px;inset-inline-end:26px;display:flex;gap:7px} .bl-dots button{width:9px;height:9px;padding:0;border-radius:99px;border:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .3s,background .3s} .bl-dots button.is-on{width:26px;background:#fff} .bl-progress{position:absolute;z-index:3;inset-inline:0;bottom:0;height:3px;background:rgba(255,255,255,.12)} .bl-progress i{display:block;height:100%;width:0;background:var(--cyan)} /* category chips */ .bl-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin-bottom:10px;scrollbar-width:none} .bl-chips::-webkit-scrollbar{display:none} .bl-chips a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid var(--line); background:var(--surface);color:var(--text-dim);font-size:13.5px;text-decoration:none;transition:.2s} .bl-chips a b{font-size:11px;color:var(--text-faint);font-weight:700} .bl-chips a:hover{border-color:var(--cyan-line);color:var(--text)} .bl-chips a.is-on{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)} /* layout */ .bl-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start} .bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px} .bl-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden; transition:transform .25s ease,border-color .25s,box-shadow .25s} .bl-card:hover{transform:translateY(-4px);border-color:var(--cyan-line);box-shadow:0 18px 40px -20px rgba(0,0,0,.45)} .bl-thumb{position:relative;display:block;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden} .bl-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .bl-card:hover .bl-thumb img{transform:scale(1.05)} .bl-ph{display:grid;place-items:center;height:100%;color:var(--text-faint)} .bl-cat{position:absolute;top:12px;inset-inline-start:12px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700; color:#fff;background:color-mix(in srgb,var(--c) 82%,#000);box-shadow:0 4px 14px -4px rgba(0,0,0,.4)} .bl-body{display:flex;flex-direction:column;gap:9px;padding:16px 18px 18px;flex:1} .bl-body h3{margin:0;font-size:16.5px;line-height:1.45} .bl-body h3 a{color:var(--text);text-decoration:none} .bl-body h3 a:hover{color:var(--cyan)} .bl-body p{margin:0;color:var(--text-dim);font-size:13.5px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bl-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:auto;padding-top:4px;font-size:12.5px;color:var(--text-faint)} .bl-meta span{display:inline-flex;align-items:center;gap:5px} /* sidebar */ .bl-side{display:grid;gap:18px;position:sticky;top:90px} .bl-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px} .bl-box h4{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15px} .bl-box h4 svg{color:var(--cyan)} .bl-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .bl-stat-grid div{display:grid;gap:2px;padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-soft)} .bl-stat-grid svg{color:var(--cyan);margin-bottom:4px} .bl-stat-grid b{font-size:20px;line-height:1.2;color:var(--text)} .bl-stat-grid b.sm{font-size:13.5px} .bl-stat-grid span{font-size:12px;color:var(--text-faint)} .bl-pop{list-style:none;margin:0;padding:0;display:grid;gap:12px} .bl-pop a{display:grid;grid-template-columns:auto 58px 1fr;gap:10px;align-items:center;text-decoration:none;color:var(--text)} .bl-pop a:hover b{color:var(--cyan)} .bl-rank{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800; background:var(--cyan-dim);color:var(--cyan)} .bl-pop li:first-child .bl-rank{background:var(--cyan);color:var(--cyan-ink)} .bl-pop img{width:58px;height:44px;border-radius:10px;object-fit:cover} .bl-pop-t{display:grid;gap:3px;min-width:0} .bl-pop-t b{font-size:13px;line-height:1.45;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s} .bl-pop-t small{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-faint)} .bl-cats{list-style:none;margin:0;padding:0;display:grid;gap:4px} .bl-cats a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;color:var(--text-dim);text-decoration:none;font-size:14px;transition:background .2s,color .2s} .bl-cats a:hover,.bl-cats a.is-on{background:var(--surface-2);color:var(--text)} .bl-cats b{margin-inline-start:auto;font-size:12px;color:var(--text-faint);background:var(--surface-2);padding:2px 9px;border-radius:99px} .bl-cat-ico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none; color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)} .bl-cta{text-align:center;background:linear-gradient(160deg,var(--cyan-dim),var(--surface) 70%);border-color:var(--cyan-line)} .bl-cta-ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--cyan);color:var(--cyan-ink);margin-bottom:10px} .bl-cta h4{justify-content:center;margin-bottom:6px} .bl-cta p{margin:0 0 14px;color:var(--text-dim);font-size:13.5px;line-height:1.7} .bl-cta .btn{width:100%;justify-content:center} .bl-cta-sub{display:inline-block;margin-top:10px;font-size:13px;color:var(--text-dim)} .bl-tags{display:flex;flex-wrap:wrap;gap:7px} .bl-tags a{padding:5px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-soft);font-size:12.5px;color:var(--text-dim);text-decoration:none;transition:.2s} .bl-tags a:hover,.bl-tags a.is-on{border-color:var(--cyan-line);color:var(--cyan)} @media (max-width:980px){ .bl-layout{grid-template-columns:1fr} .bl-side{position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .bl-hero{aspect-ratio:16/10} .bl-slide-body{padding:20px 20px 40px} .bl-nav{opacity:1;width:38px;height:38px;margin-top:-19px} } @media (max-width:560px){ .bl-hero{aspect-ratio:4/5;min-height:0} .bl-slide-ex{display:none} .bl-head{align-items:stretch} .bl-search{flex:1 1 100%} } @media (prefers-reduced-motion:reduce){ .bl-slide,.bl-slide img,.bl-card,.bl-thumb img{transition:none!important} } html.is-tv .bl-slide img{transform:none!important;transition:none!important} .bl-thumb.is-noimg{background:linear-gradient(135deg,var(--cyan-dim),var(--surface-2))} .bl-thumb.is-noimg::after{content:"";position:absolute;inset:0;margin:auto;width:40px;height:40px;opacity:.35; background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") center/contain no-repeat;color:var(--text-faint)} .bl-slide-body strong[dir=auto],.bl-body [dir=auto]{text-align:start} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ Header: no overlap, burger panel extras, mobile player button ║ ╚═══════════════════════════════════════════════════════════════════╝ */ /* 1) Fit levels set by main.js when the links would run under the buttons */ .site-header.nav-compact .main-nav{gap:1px} .site-header.nav-compact .main-nav a{padding:8px 9px;font-size:13.5px} .site-header.nav-compact .main-nav .nav-ico{display:none} .site-header.nav-collapsed .main-nav{ position:fixed;inset:68px 0 auto;flex-direction:column;align-items:stretch;gap:2px; background:var(--surface);border-bottom:1px solid var(--line);padding:14px 20px 20px; margin:0;display:none;box-shadow:var(--shadow-lg);max-height:calc(100vh - 68px);overflow-y:auto} .site-header.nav-collapsed .main-nav.open{display:flex} .site-header.nav-collapsed .main-nav a{padding:12px 14px;font-size:15px} .site-header.nav-collapsed .main-nav .nav-ico{display:inline-flex} .site-header.nav-collapsed .burger{display:inline-grid} .site-header.nav-collapsed .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px} /* 2) Burger: menu ⇄ X, and a dim backdrop that closes the panel on tap */ .burger .bg-close{display:none} .burger.is-open .bg-open{display:none} .burger.is-open .bg-close{display:inline-flex} .burger .bg-open,.burger .bg-close{align-items:center;justify-content:center} body.nav-open::after{content:"";position:fixed;inset:0;z-index:55;background:rgba(4,8,18,.45); animation:navFade .2s ease both} @keyframes navFade{from{opacity:0}to{opacity:1}} .main-nav.open{z-index:61;animation:navDrop .22s cubic-bezier(.2,.8,.3,1) both} @keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* 3) The player invitation at the bottom of the panel */ .nav-player-cta{display:none} @media (max-width:1440px){ .main-nav .nav-player-cta{display:flex} } .site-header.nav-collapsed .main-nav .nav-player-cta{display:flex} .main-nav a.nav-player-cta{ position:relative;overflow:hidden;align-items:center;gap:14px;margin-top:12px; padding:14px 16px;border-radius:18px;white-space:normal;text-decoration:none; color:#06120E;background:linear-gradient(120deg,#00F5A0,#00D9F5 60%,#6A8BFF); box-shadow:0 14px 34px -14px rgba(0,217,245,.75)} .nav-player-cta::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%); transform:translateX(-120%);animation:npcShine 3.2s ease-in-out infinite} @keyframes npcShine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}} .npc-ico{position:relative;flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center; background:#06120E;color:#00F5A0} .npc-ico::after{content:"";position:absolute;inset:0;border-radius:inherit;animation:npcRing 2.4s ease-out infinite} @keyframes npcRing{0%{box-shadow:0 0 0 0 rgba(6,18,14,.45)}70%{box-shadow:0 0 0 12px rgba(6,18,14,0)}100%{box-shadow:0 0 0 0 rgba(6,18,14,0)}} .npc-txt{display:grid;gap:3px;min-width:0;flex:1} .npc-txt b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800} .npc-txt small{font-size:12.5px;opacity:.78;line-height:1.5} .npc-live{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:99px; font-size:10px;font-weight:900;letter-spacing:.6px;background:#06120E;color:#fff} .npc-live i{width:6px;height:6px;border-radius:50%;background:#FF3B5C;animation:playerBlink 1.2s ease-in-out infinite} .npc-go{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(6,18,14,.12)} [dir=rtl] .npc-go svg{transform:scaleX(-1)} /* 4) Phones: the player button comes back to the header — compact and alive */ @media (max-width:760px){ .header-actions .btn-player{display:inline-flex;width:38px;height:38px;padding:0;justify-content:center;border-radius:12px;gap:0} .header-actions .btn-player .bp-text{display:none} .header-actions .btn-player .bp-dot{position:absolute;top:-3px;inset-inline-end:-3px;width:10px;height:10px; background:#FF3B5C;opacity:1;border:2px solid var(--surface)} } @media (max-width:400px){ .header-actions .theme-toggle{display:none} /* the logo keeps its room; theme is also in the footer */ .header-actions{gap:5px} } @media (prefers-reduced-motion:reduce){ .nav-player-cta::before,.npc-ico::after,.npc-live i,body.nav-open::after,.main-nav.open{animation:none} } html.is-tv .nav-player-cta::before{display:none} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ Sliders without the dark wash (landing, reseller, login/register). ║ ║ Pictures show in their real colours; the words keep a soft shadow ║ ║ so they stay readable on bright images. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ .slide-overlay,.slide.theme-light .slide-overlay{background:none!important} .auth-slide-scrim{background:none!important} .rs-slide::after{background:none!important} .slide-content h1,.slide-content h2,.slide-title,.slide-content p,.slide-content .slide-sub, .auth-slide-body h2,.auth-slide-body p,.rs-slide-inner h1,.rs-slide-inner h2,.rs-slide-inner p{ text-shadow:0 2px 6px rgba(0,0,0,.55),0 8px 28px rgba(0,0,0,.45)} .slide.theme-light .slide-content h1,.slide.theme-light .slide-content h2,.slide.theme-light .slide-title, .slide.theme-light .slide-content p{text-shadow:0 1px 3px rgba(255,255,255,.8),0 6px 24px rgba(255,255,255,.6)} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ Mobile menu: a backdrop you can tap to close, and a live player ║ ║ button in the header for guests and members alike. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ /* The dim itself is body.nav-open::after (below); this layer only catches the tap. */ .nav-backdrop{position:fixed;inset:0;z-index:56;background:transparent;display:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .nav-backdrop.show{display:block} @media (max-width:1440px){ .main-nav.open{animation:navDrop .22s cubic-bezier(.2,.8,.2,1)} } @keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} body.nav-lock{overflow:hidden} /* the header player button becomes a small living pill on phones */ @media (max-width:980px){ .btn-player{position:relative;padding:8px 13px 8px 11px!important;border-radius:999px;gap:6px;overflow:hidden;isolation:isolate} .btn-player .bp-text{display:none!important} .btn-player .bp-text-sm{display:inline;font-size:12.5px;font-weight:800;letter-spacing:.2px} .btn-player::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 45%,transparent 70%); transform:translateX(-120%);animation:bpSheen 3.2s ease-in-out infinite} .btn-player{box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 60%,transparent);animation:bpRing 2.4s ease-out infinite} } @keyframes bpSheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}} @keyframes bpRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 55%,transparent)} 80%,100%{box-shadow:0 0 0 10px transparent}} @media (max-width:360px){ .btn-player .bp-text-sm{display:none} .btn-player{padding:8px 10px!important} } @media (prefers-reduced-motion:reduce){ .btn-player,.btn-player::before{animation:none!important} } html.is-tv .btn-player,html.is-tv .btn-player::before{animation:none!important} /* the invitation at the bottom of the burger panel: a touch more presence */ .main-nav .nav-player-cta{position:relative;overflow:hidden;isolation:isolate} .main-nav .nav-player-cta::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.35) 48%,transparent 70%); transform:translateX(-120%);animation:bpSheen 3.6s ease-in-out infinite} @media (prefers-reduced-motion:reduce){ .main-nav .nav-player-cta::before{animation:none} } .bp-text-sm{display:none} @media (max-width:980px){ .btn-player .bp-text-sm{display:inline} } @media (max-width:360px){ .btn-player .bp-text-sm{display:none} } @media (max-width:980px){ .btn-player > svg{display:inline-block!important;flex:none} } /* Compact header (set by main.js when links and buttons get close): the buttons give up their words before the links give up their place. This is what keeps the guest header — two text buttons wider than a signed-in avatar — showing its menu on desktop instead of folding it away. */ .site-header.nav-compact .header-actions{gap:6px;padding-inline-start:14px} .site-header.nav-compact .lang-code{display:none} .site-header.nav-compact .btn-player .bp-text{display:none} .site-header.nav-compact .btn-player{padding:9px 12px} .site-header.nav-compact .reg-txt{display:none} .site-header.nav-compact .reg-btn{padding:8px 10px} .site-header.nav-compact .header-actions .btn-ghost.hide-sm{padding:7px 10px} /* The burger-panel player card must stay out of the DESKTOP bar. ".main-nav a" (display:flex) out-ranked the plain ".nav-player-cta{display:none}", so on wide screens a 430px invisible-looking card sat inside the menu row and pushed the links under the buttons — worst for guests, whose buttons are wider. Same specificity as the offender, declared later. */ .main-nav a.nav-player-cta{display:none} @media (max-width:1440px){ .main-nav a.nav-player-cta{display:flex} } .site-header.nav-collapsed .main-nav a.nav-player-cta{display:flex} /* Slide pictures: