/* ===== SMM PWR — global red+white theme (Bootstrap 3 override) ===== */ :root{--pwr-red:#E11733;--pwr-red2:#FF3B57;--pwr-ink:#14161d;--pwr-muted:#7a8091;--pwr-line:#eef0f5;--pwr-bg:#f6f7fb;} body{background:var(--pwr-bg);color:var(--pwr-ink); font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased} a{color:var(--pwr-red)} a:hover,a:focus{color:#b3122a;text-decoration:none} hr{border-color:var(--pwr-line)} /* ---- top navbar ---- */ .navbar-default{background:#fff;border:none;border-bottom:1px solid var(--pwr-line);box-shadow:0 2px 14px rgba(20,20,40,.05);border-radius:0;margin-bottom:26px} .navbar-default .navbar-brand{color:var(--pwr-ink);font-weight:800;letter-spacing:.3px; height:auto;padding:12px 18px 12px 14px;display:flex;align-items:center} .navbar-default .navbar-brand>img{max-height:36px;width:auto;display:block} .navbar-default .navbar-brand:hover{color:var(--pwr-red)} .navbar-default .navbar-nav>li>a{color:var(--pwr-muted);font-weight:700;border-radius:10px;margin:8px 3px;padding:10px 16px} .navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:var(--pwr-red);background:#fff5f6} .navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{color:#fff;background:linear-gradient(135deg,var(--pwr-red2),var(--pwr-red));box-shadow:0 8px 18px rgba(225,23,51,.3)} .navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{background:#fff5f6;color:var(--pwr-red)} .navbar-default .navbar-nav>li>a .navbar-icon{margin-right:7px} .navbar-default .badge{background:linear-gradient(135deg,var(--pwr-red2),var(--pwr-red));color:#fff;font-weight:800;padding:6px 12px;border-radius:20px} .navbar-toggle .icon-bar{background:var(--pwr-red)} .navbar-nav .caret{border-top-color:currentColor} /* ---- buttons ---- */ .btn{border-radius:10px;font-weight:700} .btn-primary,.btn-primary:focus{background:linear-gradient(135deg,var(--pwr-red2),var(--pwr-red));border:none;color:#fff;box-shadow:0 8px 18px rgba(225,23,51,.28)} .btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary{background:linear-gradient(135deg,var(--pwr-red),#b3122a);border:none;color:#fff} .btn-success{background:linear-gradient(135deg,#22c67e,#0f9d63);border:none} .btn-default{background:#fff;border:1.5px solid var(--pwr-line);color:#3a3f4b} .btn-default:hover,.btn-default:focus{background:#fff5f6;border-color:#f6c9cf;color:var(--pwr-red)} .btn-link{color:var(--pwr-red)} /* ---- nav-pills (filter/category tabs) ---- */ .nav-pills{gap:8px;display:flex;flex-wrap:wrap} .nav-pills>li>a{border-radius:11px;color:var(--pwr-muted);font-weight:700;background:#fff;border:1px solid var(--pwr-line)} .nav-pills>li>a:hover{background:#fff5f6;color:var(--pwr-red)} .nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{background:linear-gradient(135deg,var(--pwr-red2),var(--pwr-red));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(225,23,51,.28)} /* ---- forms ---- */ .form-control{border-radius:11px;border:1.5px solid var(--pwr-line);box-shadow:none;height:46px;background:#fbfcfe;color:var(--pwr-ink)} .form-control:focus{border-color:var(--pwr-red);box-shadow:0 0 0 3px rgba(225,23,51,.12);background:#fff} textarea.form-control{height:auto} .control-label,label{font-weight:700;color:#3a3f4b} .input-group-addon{border-radius:11px;border:1.5px solid var(--pwr-line);background:#faf7f8} /* ---- cards / wells / panels ---- */ /* Card background stays OPAQUE (#fff). TRIED AND REVERTED: with rgba(255,255,255,.8) the SMMPWR watermark still did not show through on wide-table pages (services, new order) -- effective opacity was 28% x 20% = 5.6%, which is nothing. Making it visible needs the card ~50% transparent, and that tints the price tables pink. A change with no benefit was not kept. The watermark does show on pages where content does not cover the background: the home-page SEO section, /about, /contact, /faq, /affiliate-program, blog posts, and the side margins of every page. */ .well,.panel{border-radius:16px;border:1px solid var(--pwr-line);box-shadow:0 12px 30px rgba(20,20,40,.05);background:#fff} .well{padding:24px} .panel{overflow:hidden} .panel-default>.panel-heading{background:#faf7f8;border-color:var(--pwr-line);font-weight:800;color:var(--pwr-ink)} .panel-primary>.panel-heading{background:linear-gradient(135deg,var(--pwr-red2),var(--pwr-red));border-color:transparent} /* ---- tables ---- */ .table{background:#fff;border-radius:14px;overflow:hidden} .table>thead>tr>th{border-bottom:2px solid var(--pwr-line);color:var(--pwr-muted);text-transform:uppercase;font-size:11.5px;letter-spacing:.4px;font-weight:800;padding:14px 16px} .table>tbody>tr>td{padding:14px 16px;border-top:1px solid var(--pwr-line);vertical-align:middle} .table-hover>tbody>tr:hover{background:#fff5f6} .table-striped>tbody>tr:nth-of-type(odd){background:#fbfcfe} /* Wide tables (orders, refill, subscriptions) squeeze the narrow columns because the link column asks for 40% of the row. Keep ids, dates and amounts on one line and let the long text columns absorb the slack. */ .nowrap,.table .nowrap{white-space:nowrap} @media (min-width:768px){ .table>thead>tr>th{white-space:nowrap} .table>thead>tr>th,.table>tbody>tr>td{padding-left:12px;padding-right:12px} /* A table cell's max-width is ignored in auto layout, so the link column grows to fit the longest URL and starves the service name. Constraining an inner inline-block does work — the column can no longer ask for more than 320px and the leftover width goes to the service column. */ /* Perfect Panel's own .width-40 wins on specificity and forces the table to 1720px on a 1440px screen, so every other column gets squeezed and ids/dates break across two lines. !important is the only way to drop it. */ .table td.width-40,.table th.width-40{width:auto!important} .pwr-clip{display:inline-block;max-width:320px;overflow-wrap:anywhere;vertical-align:middle} } /* ---- labels / badges (order statuses) ---- */ .label{border-radius:20px;padding:.35em .8em;font-weight:800;font-size:78%} .label-success{background:#e7f8f0;color:#0f9d63} .label-info{background:#e9f0ff;color:#2b6ef2} .label-primary{background:#fdeaed;color:var(--pwr-red)} .label-warning{background:#fff2e0;color:#e08600} .label-danger{background:#fdeaed;color:var(--pwr-red)} .label-default{background:#f1f2f6;color:var(--pwr-muted)} /* ---- dropdowns ---- */ .dropdown-menu{border-radius:12px;border:1px solid var(--pwr-line);box-shadow:0 16px 40px rgba(20,20,40,.12);padding:6px;margin-top:6px} .dropdown-menu>li>a,.dropdown-item{border-radius:8px;padding:9px 13px;font-weight:600;color:#3a3f4b} .dropdown-menu>li>a:hover,.dropdown-item:hover,.dropdown-menu>.active>a{background:#fff5f6;color:var(--pwr-red)} /* ---- misc accents ---- */ .pagination>li>a,.pagination>li>span{color:var(--pwr-red);border-color:var(--pwr-line)} .pagination>.active>a,.pagination>.active>a:hover,.pagination>.active>span{background:var(--pwr-red);border-color:var(--pwr-red);color:#fff} .progress{border-radius:20px;background:#f0f1f5} .progress-bar{background:linear-gradient(90deg,var(--pwr-red2),var(--pwr-red))} .text-primary{color:var(--pwr-red)!important} .text-danger{color:var(--pwr-red)!important} .alert{border-radius:12px} .alert-success{background:#e7f8f0;border-color:#c9efdd;color:#0f9d63} .alert-danger{background:#fdeaed;border-color:#f6cdd4;color:#c01027} .alert-info{background:#e9f0ff;border-color:#cfe0ff;color:#2b6ef2} .nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:var(--pwr-red);border-bottom-color:transparent} ::selection{background:rgba(225,23,51,.18)} a.forgot-password{color:var(--pwr-red)} /* keep the custom login untouched (it is self-scoped under .pwr-login) */ /* ---- provider facts: average time + daily delivery capacity ---- */ /* ---- AVERAGE TIME COLOUR BANDS (user request, 29 Jul) ------------------ OVER 30 min -> red | 30 min and under -> green | UNDER 1 min -> blue (seconds) script.js assigns the band class (bant() + bantlaKalanlar()). The base .pwr-avg is NEUTRAL: a cell whose duration cannot be parsed gets no colour, because colour is a claim and we do not know which band it belongs in. The pulsing dot runs only in the GREEN and BLUE bands, meaning "flowing". Red keeps a static dot - making a slow service glow reads as the opposite. */ .pwr-avg{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#374151;white-space:nowrap} .pwr-avg:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px} .pwr-avg-ok{color:#0f9d63} .pwr-avg-ok:before{box-shadow:0 0 0 0 rgba(15,157,99,.55);animation:pwrpulse-dot 1.8s ease-out infinite} .pwr-avg-slow{color:#c01027} .pwr-avg-sec{color:#2b6ef2} .pwr-avg-sec:before{box-shadow:0 0 0 0 rgba(43,110,242,.55);animation:pwrpulse-blue 1.8s ease-out infinite} @keyframes pwrpulse-dot{to{box-shadow:0 0 0 7px rgba(15,157,99,0)}} @keyframes pwrpulse-blue{to{box-shadow:0 0 0 7px rgba(43,110,242,0)}} /* ---- REAL MEASURED TIMES UNDER 20 MINUTES: live flame ------------------ User request (26 Jul). The threshold is HIZLI_ESIK = 20 minutes in script.js. WHAT THE FLAME MEANS: "this service is blazing fast" (user, 29 Jul). Only the supplier's published real duration is used; with no duration the cell stays empty and no flame appears (no invented data). The dot is HIDDEN on these rows: dot plus flame together looked cluttered. 29 Jul: the flame no longer OVERRIDES THE COLOUR - colour belongs to the duration, the flame belongs to speed. */ .pwr-avg-fast:before{display:none} .pwr-flame{width:14px;height:14px;flex:0 0 14px;transform-origin:50% 88%; animation:pwrFlame 1.15s ease-in-out infinite; filter:drop-shadow(0 1px 3px rgba(255,90,0,.45))} @keyframes pwrFlame{ 0%,100%{transform:scale(1) rotate(-1.5deg);opacity:.95} 32%{transform:scale(1.16) rotate(2.5deg);opacity:1} 64%{transform:scale(.94) rotate(-2.5deg);opacity:.9} } @media (prefers-reduced-motion:reduce){.pwr-flame{animation:none}} /* .pwr-speed kaldirildi (27 Tem): gonderim hizi rozeti artik basilmiyor, panelde yalnizca olculmus ortalama sure gosteriliyor. */ .pwr-svc-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;align-items:stretch} /* 🐞 THE SELECTOR MUST BE CHILD, NOT DESCENDANT: "span" was a descendant selector, so spans INSIDE the chip (the flame wrapper, for instance) also picked up the chip style -> nested padding and border, the chip grew from 34px to 65px, and sibling chips stretched with it leaving their content STUCK AT THE TOP (the user said "it stays up top"). Measured: 65px vs 34px. Alignment also moved from baseline to center: chips keep equal height while their content is CENTRED vertically. */ .pwr-svc-facts>span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:11px; background:#f6f7fb;border:1px solid var(--pwr-line);font-size:13px;color:var(--pwr-ink)} /* inner wrappers must not look like chips */ .pwr-svc-facts>span span{padding:0;border:0;background:none;border-radius:0} .pwr-svc-facts b{white-space:nowrap;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--pwr-muted)} .pwr-live{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:20px;white-space:nowrap; background:#e7f8f0;color:#0f9d63;font-size:11px;font-weight:800;letter-spacing:.2px;vertical-align:1px} .pwr-drop{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:20px;white-space:nowrap; font-size:11px;font-weight:800;letter-spacing:.2px;vertical-align:1px; background:#f1f2f6;color:var(--pwr-muted)} .pwr-drop-low{background:#e7f8f0;color:#0f9d63} .pwr-drop-mid{background:#fff2e0;color:#e08600} .pwr-drop-high{background:#fdeaed;color:var(--pwr-red)} /* Daily capacity badge "Day 10-15K" (user request, 1 Aug): sits next to the banded average time in the services table. Neutral blue on purpose - the green/red/blue duration bands carry meaning, this pill must not compete. */ .pwr-day{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:20px;white-space:nowrap; font-size:11px;font-weight:800;letter-spacing:.2px;vertical-align:1px; background:#e9f0fe;color:#2b6ef2} /* Average time sutunu icerigin 94px otesine uzuyordu -> Day rozeti ile View dugmesi arasinda 106px bosluk kaliyordu (kullanici, 1 Agu). Sutunu icerigine daralt; artan genislik servis adi sutununa gider (uzun adlar daha az sarar). Sutunu daraltmak tek basina yetmedi (genisligi EN UZUN satir belirliyor, 88px kaliyordu) -> icerik ayrica SAGA yaslandi; boylece her satirda rozet View'in dibinde duruyor. Yalniz masaustu: mobilde satirlar .pwr-table-cards ile karta doner. */ @media (min-width:768px){ #service-table th:nth-last-child(2), #service-table td:nth-last-child(2){width:1%;white-space:nowrap;text-align:right} #service-table td:nth-last-child(2) .pwr-avg{justify-content:flex-end} } .pwr-chart{margin:0 0 14px;padding:12px 14px 8px;border:1px solid var(--pwr-line);border-radius:12px;background:#fff} .pwr-facts-wrap{margin-bottom:2px} .pwr-nodata{margin:0 0 12px;padding:10px 13px;border-radius:11px;background:#f6f7fb; border:1px dashed var(--pwr-line);color:var(--pwr-muted);font-size:12.5px;font-weight:600} /* add funds: coin list moved out of the