/* ===================================================================== DARK REDESIGN — Eternity theme overlay (gradient hero + modern dark UI). Loaded AFTER the theme color CSS and modern-refresh.css in header.twig. Strategy: pure CSS overlay. No markup/logic changes — fully reversible. It repaints every light surface (body gradient, cards, tables, inputs, sidebar, navbar, hero) into a dark, glassy, modern look that works on top of ANY of the 10 color variants (cyan/navy/lilac/…) because the theme's structure is identical across them. TO REVERT: remove the dark-redesign.css in Eternity/header.twig. ===================================================================== */ :root{ --d-bg-1:#0c0608; /* deepest */ --d-bg-2:#160a0d; /* mid */ --d-bg-3:#120709; /* panels */ --d-surface:rgba(255,255,255,.045); --d-surface-2:rgba(255,255,255,.07); --d-border:rgba(255,255,255,.09); --d-border-strong:rgba(255,255,255,.16); --d-text:#f6ecee; --d-text-soft:#e0c8cd; --d-muted:#bd94a0; --d-accent:#f43f5e; /* crimson / rose */ --d-accent-2:#fb7185; /* rose glow */ --d-accent-grad:linear-gradient(135deg,#f43f5e 0%,#e11d48 45%,#fb7185 130%); --d-radius:16px; --d-radius-sm:12px; --d-shadow:0 10px 30px rgba(0,0,0,.45); --d-glow:0 8px 30px rgba(244,63,94,.35); } /* ---------- Page background: dark base + gradient hero glow ---------- Solid dark colour on AND so there is never a white gap on mobile (iOS Safari does not paint background-attachment:fixed reliably, which left big white areas), and the gradient uses background-image over a solid colour with normal scroll attachment. */ html{ background:#0c0608 !important; } body.body, body{ background-color:#0c0608 !important; background-image: radial-gradient(1100px 560px at 50% -8%, rgba(244,63,94,.28), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(225,29,72,.14), transparent 55%), linear-gradient(180deg, var(--d-bg-2) 0%, var(--d-bg-1) 60%, #070304 100%) !important; background-attachment:scroll !important; background-repeat:no-repeat !important; color:var(--d-text) !important; min-height:100vh; } /* Base text + headings */ body.body, .body, p, span, label, li, td, th, h1,h2,h3,h4,h5,h6, small, strong, b{ color:var(--d-text); } .body h1,.body h2,.body h3,.body h4,.body h5,.body h6{ color:#f4f7ff !important; } .body .text-muted, .sn-hint, .news-date{ color:var(--d-muted) !important; } a{ color:#fda4af; } a:hover{ color:#fecdd2; } /* ---------- Neutralize the theme's decorative light layers ---------- */ .bg, .new_order-block .bg, .block-signin .bg, .add-funds__form .bg, .ticket-form .bg, .divider-top, .divider-bottom{ background:transparent !important; box-shadow:none !important; } /* Decorative wave SVGs (the white paths) — hide on dark */ .wrapper-content svg g[fill] path, .wrapper-content__body svg g[fill] path, .new_order-block svg g[fill] path{ fill:transparent !important; } /* ---------- Cards / panels: dark glass ---------- */ .card, .component_card, .panel, .panel-default, .panel-body, .table-bg, .summary-card, .orders-history__margin-table, .block-signin__card, .component_content_card{ background:var(--d-surface) !important; border:1px solid var(--d-border) !important; box-shadow:var(--d-shadow) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:var(--d-radius) !important; } .card .card, .component_card .card{ box-shadow:none !important; } /* ===================================================================== CUSTOM STAT CARDS (New Order dashboard) — bespoke crimson design. Replaces the old generic glass cards. Each card is a dark gradient panel with a glowing top accent line, a soft corner glow, a gradient icon medallion with a ring, and a lift-on-hover. The four icon discs carry slightly different rose hues so the row reads as a set, not a row of clones. ===================================================================== */ .body .summary-card{ position:relative !important; overflow:hidden !important; border-radius:18px !important; background: radial-gradient(120% 140% at 100% 0%, rgba(244,63,94,.16), transparent 55%), linear-gradient(155deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important; border:1px solid rgba(244,63,94,.20) !important; box-shadow:0 12px 34px rgba(0,0,0,.42) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:6px 4px !important; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } /* glowing accent line across the top */ .body .summary-card::before{ content:""; position:absolute; top:0; left:14px; right:14px; height:2px; background:linear-gradient(90deg, transparent, var(--d-accent), transparent); opacity:.8; border-radius:2px; } /* soft corner glow */ .body .summary-card::after{ content:""; position:absolute; top:-40px; right:-40px; width:120px; height:120px; background:radial-gradient(circle, rgba(244,63,94,.22), transparent 70%); pointer-events:none; } .body .summary-card:hover{ transform:translateY(-4px) !important; border-color:rgba(244,63,94,.45) !important; box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(244,63,94,.12) !important; } .summary-card .totals-block__card{ align-items:center !important; padding:18px 20px !important; } /* text side grows, icon side hugs its content */ .summary-card .totals-block__card-left, #block_93 .summary-card .totals-block__card-left{ width:auto !important; flex:1 1 auto !important; min-width:0; padding-right:12px !important; } .summary-card .totals-block__card-right, #block_93 .summary-card .totals-block__card-right{ width:auto !important; flex:0 0 auto !important; display:flex; align-items:center; justify-content:flex-end; padding-right:14px !important; } /* big value */ .summary-card .totals-block__count-value{ color:#ffffff !important; font-weight:800 !important; font-size:24px !important; line-height:1.15 !important; letter-spacing:-.01em; margin:0 0 4px !important; word-break:break-word; text-shadow:0 2px 10px rgba(0,0,0,.35); } /* label */ .summary-card .totals-block__card-name span, .summary-card .totals-block__card-name p{ color:var(--d-muted) !important; margin:0 !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:.07em; text-transform:uppercase; } /* plain icon — no disc / ring / glow, just the coloured glyph */ .totals-block__icon-preview, #block_93 .totals-block__icon-preview{ position:relative; width:auto !important; height:auto !important; flex:0 0 auto; display:flex !important; align-items:center; justify-content:center; background:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; overflow:visible !important; } .totals-block__icon-preview::after, .totals-block__icon-preview::before{ content:none !important; } .totals-block__icon-preview i, #block_93 .totals-block__icon-preview i{ color:var(--d-accent-2) !important; font-size:30px !important; } /* per-card icon colour (no disc) */ .row > div:nth-child(1) .summary-card .totals-block__icon-preview, .row > div:nth-child(2) .summary-card .totals-block__icon-preview, .row > div:nth-child(3) .summary-card .totals-block__icon-preview, .row > div:nth-child(4) .summary-card .totals-block__icon-preview{ background:none !important; } .row > div:nth-child(1) .summary-card .totals-block__icon-preview i{ color:#fb7185 !important; } .row > div:nth-child(2) .summary-card .totals-block__icon-preview i{ color:#f43f5e !important; } .row > div:nth-child(3) .summary-card .totals-block__icon-preview i{ color:#e11d48 !important; } .row > div:nth-child(4) .summary-card .totals-block__icon-preview i{ color:#fb7185 !important; } /* ---------- Service search dropdown (New Order) ---------- */ #sn-filter .sn-search-wrap{ position:relative; } #sn-results{ display:none; position:absolute; z-index:50; left:0; right:0; margin-top:6px; background:#1a0e11; border:1px solid var(--d-border); border-radius:var(--d-radius-sm); box-shadow:var(--d-shadow); max-height:340px; overflow-y:auto; } #sn-results .sn-res{ padding:11px 14px; cursor:pointer; font-size:14px; color:var(--d-text-soft); border-bottom:1px solid rgba(255,255,255,.06); line-height:1.35; } #sn-results .sn-res:last-child{ border-bottom:none; } #sn-results .sn-res:hover, #sn-results .sn-res.active{ background:rgba(244,63,94,.18); color:#fff; } #sn-results .sn-res b{ color:#fff; } #sn-results .sn-res .badge{ background:rgba(255,255,255,.12); color:#cdd6ee; padding:2px 7px; border-radius:6px; font-size:12px; margin-right:6px; } #sn-results .sn-res-empty, #sn-results .sn-res-loading{ padding:12px 14px; color:var(--d-muted); font-size:13px; } /* News widget (New Order) */ .news-title, .news-content{ background:rgba(255,255,255,.05) !important; color:var(--d-text) !important; } .news-date{ background:rgba(255,255,255,.08) !important; } .headsir{ color:#f4f7ff !important; } /* ---------- Inputs / selects / textareas ---------- */ .form-control, input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], textarea, select, .sn-search-wrap #sn-search, #sn-filter #sn-search{ background:rgba(255,255,255,.06) !important; color:var(--d-text) !important; border:1px solid var(--d-border) !important; box-shadow:none !important; } .form-control::placeholder, input::placeholder, textarea::placeholder{ color:var(--d-muted) !important; } .form-control:focus, input:focus, textarea:focus, select:focus, #sn-filter #sn-search:focus{ border-color:var(--d-accent) !important; box-shadow:0 0 0 3px rgba(244,63,94,.25) !important; } select option, optgroup{ background:#1a0e11; color:var(--d-text); } .input-group-text{ background:rgba(255,255,255,.08) !important; color:var(--d-text) !important; border:1px solid var(--d-border) !important; } label, .control-label{ color:var(--d-text-soft) !important; font-weight:600; } /* readonly charge / price fields */ input[readonly]{ background:rgba(255,255,255,.04) !important; color:#fff !important; } /* ---------- Buttons ---------- */ .btn-primary, button.btn-primary, .btn.btn-primary{ background:var(--d-accent-grad) !important; border:none !important; color:#fff !important; box-shadow:var(--d-glow) !important; } .btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); } .btn-block{ width:100%; } .btn-secondary, .btn-default, .btn-light{ background:var(--d-surface-2) !important; color:var(--d-text) !important; border:1px solid var(--d-border) !important; } /* Social-network filter chips (New Order) */ #sn-filter{ --sn-accent:var(--d-accent); } #sn-filter .sn-label{ color:var(--d-muted) !important; } #sn-filter .sn-btn{ background:rgba(255,255,255,.05) !important; color:var(--d-text) !important; border:1px solid var(--d-border) !important; } #sn-filter .sn-btn:hover{ border-color:var(--d-border-strong) !important; } #sn-filter .sn-btn.active{ background:var(--d-accent-grad) !important; border-color:transparent !important; color:#fff !important; box-shadow:var(--d-glow) !important; } /* ---------- Tables ---------- */ .table-wr{ box-shadow:none !important; } .table thead:first-child tr th, .table thead tr th{ background:rgba(255,255,255,.04) !important; color:var(--d-muted) !important; border-bottom:1px solid var(--d-border) !important; text-transform:uppercase; font-size:12px !important; letter-spacing:.05em; } .table tbody tr td, .table tbody tr:nth-child(even) td, .table tbody tr:nth-child(odd) td{ background:transparent !important; color:var(--d-text-soft) !important; border-bottom:1px solid rgba(255,255,255,.06) !important; } .table tbody tr:hover td{ background:rgba(255,255,255,.04) !important; } /* ---------- Sidebar (logged-in) ---------- */ .component-sidebar, .sidebar-block__left{ background:linear-gradient(180deg, rgba(30,12,16,.94), rgba(12,6,8,.97)) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-right:1px solid rgba(244,63,94,.16) !important; } .component-sidebar__menu-item-link{ color:var(--d-text-soft) !important; border-radius:var(--d-radius-sm) !important; transition:background .15s ease,color .15s ease !important; } .component-sidebar__menu-item-link:hover{ color:#fff !important; background:rgba(255,255,255,.06) !important; } .component-sidebar__menu-item-active .component-sidebar__menu-item-link, .component-sidebar__menu-item-link.active{ background:var(--d-accent-grad) !important; color:#fff !important; box-shadow:var(--d-glow) !important; } .sidebar-block__menu-item-icon, .component-sidebar__menu-item-link .sidebar-block__menu-item-icon{ color:var(--d-accent-2) !important; } /* ---------- Navbar (public + private) ---------- */ .component-navbar, .component-navbar__navbar-public, .component-navbar__navbar-private{ background:transparent !important; } .component-navbar-nav-link, .component-navbar-nav-link__navbar-public, .component-navbar-nav-link__navbar-private{ color:var(--d-text-soft) !important; } .component-navbar-nav-link:hover{ color:#fff !important; } .component-navbar-nav-link-active__navbar-private{ background:var(--d-accent-grad) !important; color:#fff !important; border-radius:var(--d-radius-sm) !important; } .navbar-burger-line, .navbar-burger-line:before, .navbar-burger-line:after{ background:#fff !important; } /* Balance + language dropdowns (overrides inline header