/* ============================================================================ PREMIUM THEME — "If Apple designed a GSM platform" Single source of truth. Loaded unconditionally when $template == 'premium'. Dark-only. BS4 + Font Awesome + jQuery plugins. Layers ON TOP of the stock default cascade (theme.css, bootstrap.min.css) — so it only needs to re-skin surfaces, not re-implement the grid/utilities. ---------------------------------------------------------------------------- Z-INDEX SCALE (documented — keep BS4 modals/dropdowns above glass): base ............... 0 sticky header ...... 1020 (glass nav) dropdown menu ...... 1030 fixed FAB / toTop .. 1035 modal backdrop ..... 1040 (BS4 default) modal .............. 1050 (BS4 default) toast / popover .... 1080 Glass surfaces NEVER exceed 1020, so modals (1050) always float above them. ============================================================================ */ :root { /* ---- Color (LIGHT build — Apple/titanium, electric-blue accent, no gold) ---- */ --bg: #F4F6F9; /* page */ --bg-elev: #FFFFFF; /* elevated / footer */ --surface-1: #FFFFFF; /* cards */ --surface-2: #F5F7FA; /* inputs */ --surface-3: #EDF1F5; /* secondary btn / chips */ --surface-hover: #E5EAF0; --line: rgba(15,20,25,.10); --line-strong: rgba(15,20,25,.16); --text: #0B0F14; --text-dim: #566270; --text-mute: #97A1AD; --accent: #0B6BFF; /* deepened for contrast on white */ --accent-hover: #2E8FFF; --accent-press: #0A57CC; --accent-soft: rgba(11,107,255,.10); --accent-line: rgba(11,107,255,.38); /* No gold. "Premium" reads through titanium + restraint, not colour. Aliases kept so any .badge-gold/.btn-gold markup renders as titanium (never yellow). */ --premium-bg: #EDF1F5; /* titanium chip surface */ --premium-line: rgba(15,20,25,.18); /* brushed edge */ --premium-text: #1B2430; /* near-black */ --brushed-titanium: linear-gradient(180deg,#FFFFFF 0%,#E9EEF3 100%); --danger: #E0313C; --ok: #16A45C; --warn: #C77A08; /* ---- Materials ---- */ --glass-bg: rgba(255,255,255,.72); --glass-fallback:#FFFFFF; /* solid fallback for every glass surface */ --glass-blur: 18px; --brushed: linear-gradient(180deg,#FFFFFF 0%,#F1F4F8 100%); /* brushed-metal via gradient, no images */ /* ---- Typography ---- */ --font: "Inter","Helvetica Neue",Helvetica,Arial,sans-serif; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px; --fw-normal:400; --fw-semi:600; --fw-bold:800; /* ---- Spacing ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; /* ---- Radius ---- */ --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px; /* ---- Shadow (soft, light-theme) ---- */ --sh-1: 0 1px 2px rgba(11,15,20,.06); --sh-2: 0 8px 24px rgba(11,15,20,.10); --sh-float: 0 20px 60px rgba(11,15,20,.18); --sh-accent: 0 8px 24px rgba(11,107,255,.22); /* ---- Motion ---- */ --ease: cubic-bezier(.4,0,.2,1); --dur: 180ms; /* ---- Z-index scale ---- */ --z-sticky:1020; --z-dropdown:1030; --z-fixed:1035; --z-backdrop:1040; --z-modal:1050; --z-toast:1080; } /* ============================================================================ BASE ============================================================================ */ body.premium, body.tpl-premium, .premium body, body { /* scoped as broadly-safe: the carries class "premium" via {$template} */ } body.premium { background: var(--bg) !important; color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.premium::before { /* subtle radial depth — GPU-cheap, fixed, non-repeating */ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(1200px 600px at 70% -10%, rgba(11,107,255,.06), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(11,107,255,.04), transparent 55%); } .premium a { color: var(--accent); transition: color var(--dur) var(--ease); } .premium a:hover { color: var(--accent-hover); text-decoration: none; } .premium h1,.premium h2,.premium h3,.premium h4,.premium h5,.premium h6 { color:var(--text); font-weight:var(--fw-bold); line-height:1.2; letter-spacing:-.01em; } .premium hr { border-color: var(--line); } .premium .text-muted { color: var(--text-dim) !important; } .premium ::selection { background: var(--accent-soft); } /* Scrollbar */ .premium ::-webkit-scrollbar{width:10px;height:10px} .premium ::-webkit-scrollbar-track{background:var(--bg)} .premium ::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:var(--r-pill);border:2px solid var(--bg)} .premium ::-webkit-scrollbar-thumb:hover{background:var(--surface-hover)} /* Bootstrap bg utility overrides (default markup uses bg-white / bg-gray heavily) */ .premium .bg-white{ background: var(--surface-1) !important; color:var(--text); } .premium .bg-gray,.premium .bg-light,.premium .bg-secondary{ background: var(--bg) !important; } .premium .border,.premium .border-top,.premium .border-bottom,.premium .border-left,.premium .border-right{ border-color: var(--line) !important; } /* ============================================================================ GLASS NAV / HEADER (glass surface #1 — the only sticky glass) Overrides the live white-glass injection from footer.tpl (see footer reskin). ============================================================================ */ .premium header{ position: sticky; top:0; z-index: var(--z-sticky); background: var(--glass-fallback); /* solid fallback FIRST */ border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.03), var(--sh-2); } @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .premium header{ background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); } } .premium header .bg-white,.premium header .navbar-light,.premium header .header-top,.premium header .header-middle{ background:transparent !important; } .premium .header-top{ border-bottom:1px solid var(--line); } .premium .nav-link{ color: var(--text-dim); font-weight:var(--fw-semi); transition:color var(--dur) var(--ease); } .premium .nav-link:hover{ color: var(--text); } .premium .navbar-brand{ color:var(--text); font-weight:var(--fw-bold); font-size:var(--fs-lg); letter-spacing:-.02em; display:flex; align-items:center; gap:var(--s-2); } .premium .navbar-brand img{ max-height:40px; width:auto; } /* Light SVG wordmark fallback (shown by header.tpl only when no $logo) */ .premium .brand-wordmark{ display:inline-flex; align-items:center; gap:.5ch; font-weight:var(--fw-bold); font-size:var(--fs-xl); color:var(--text); letter-spacing:-.02em; } .premium .brand-wordmark .dot{ width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:var(--sh-accent); } .premium .navbar-toggler{ color:var(--text); border:1px solid var(--line); border-radius:var(--r-sm); padding:.4rem .6rem; } .premium .navbar-toggler:focus{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); } /* Master menu items — PILL buttons that turn BLUE on hover (no gold, no underline). */ .premium .navbar-mastermenu .nav-item{ position:relative; margin:0 1px; } .premium .navbar-mastermenu > .nav-item > .nav-link{ padding:.55rem .95rem; border-radius:var(--r-pill); color:var(--text-dim); font-weight:var(--fw-semi); transition:background var(--dur) var(--ease), color var(--dur) var(--ease); } .premium .navbar-mastermenu > .nav-item > .nav-link:hover, .premium .navbar-mastermenu .nav-item.active > .nav-link, .premium .navbar-mastermenu .nav-link.active, .premium .navbar-mastermenu .nav-item.show > .nav-link{ background:var(--accent-soft); color:var(--accent); } /* Kill the stock theme.css gold underline (#ffdd7c ::before) in pill mode */ .premium .navbar-expand-lg .navbar-nav .nav-item .nav-link:not(.bg-secondary)::before{ display:none !important; } /* Page title / breadcrumb band */ .premium .page-title{ font-size:var(--fs-2xl); font-weight:var(--fw-bold); letter-spacing:-.02em; } .premium .breadcrumb{ background:transparent; padding:0; margin:0; font-size:var(--fs-sm); color:var(--text-dim); } .premium .breadcrumb a{ color:var(--text-dim); } .premium .breadcrumb a:hover{ color:var(--text); } /* ============================================================================ CARDS (floating, solid — NO glass on repeated cards → GPU-safe) ============================================================================ */ .premium .card{ background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); color: var(--text); } .premium .card-app{ background:var(--surface-1); border-radius:var(--r-lg) var(--r-lg) 0 0; } .premium .card .card-header{ background:transparent; border-bottom:1px solid var(--line); font-weight:var(--fw-semi); color:var(--text); padding:var(--s-4) var(--s-5); } .premium .card .card-body{ padding: var(--s-5); } .premium .card .card-footer{ background:transparent; border-top:1px solid var(--line); } /* Elevated / interactive card — hover only on non-list contexts */ .premium .card.card-hover{ transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .premium .card.card-hover:hover{ transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-strong); } /* ============================================================================ BUTTONS ============================================================================ */ /* Buttons redesigned at REST: soft gradient fill + depth + inner highlight, crisp typography. Hover deepens; active presses in. */ .premium .btn{ border-radius:var(--r-pill); font-weight:var(--fw-semi); letter-spacing:.005em; padding:.62rem 1.35rem; transition: all var(--dur) var(--ease); border:1px solid transparent; } .premium .btn:focus{ box-shadow:0 0 0 3px var(--accent-soft); } .premium .btn-primary{ background:linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%); border-color:var(--accent-press); color:#fff; box-shadow:0 2px 8px rgba(11,107,255,.26), inset 0 1px 0 rgba(255,255,255,.22); } .premium .btn-primary:hover{ background:linear-gradient(180deg, #3D95FF 0%, var(--accent) 100%); border-color:var(--accent-press); box-shadow:0 8px 22px rgba(11,107,255,.36), inset 0 1px 0 rgba(255,255,255,.30); transform:translateY(-1px); } .premium .btn-primary:active{ background:var(--accent-press); box-shadow:inset 0 2px 6px rgba(0,0,0,.22); transform:translateY(0); } .premium .btn-success{ background:linear-gradient(180deg,#22C06E 0%, var(--ok) 100%); border-color:#0F8A4B; color:#fff; box-shadow:0 2px 8px rgba(22,164,92,.24), inset 0 1px 0 rgba(255,255,255,.22); } .premium .btn-success:hover{ filter:brightness(1.05); box-shadow:0 8px 22px rgba(22,164,92,.32), inset 0 1px 0 rgba(255,255,255,.3); transform:translateY(-1px); } .premium .btn-danger{ background:linear-gradient(180deg,#F0555F 0%, var(--danger) 100%); border-color:#B4222C; color:#fff; box-shadow:0 2px 8px rgba(224,49,60,.22), inset 0 1px 0 rgba(255,255,255,.2); } .premium .btn-danger:hover{ filter:brightness(1.05); box-shadow:0 8px 22px rgba(224,49,60,.3); transform:translateY(-1px); } .premium .btn-secondary{ background:linear-gradient(180deg,#FFFFFF 0%, var(--surface-3) 100%); border-color:var(--line-strong); color:var(--text); box-shadow:0 1px 2px rgba(11,15,20,.06), inset 0 1px 0 rgba(255,255,255,.6); } .premium .btn-secondary:hover{ background:linear-gradient(180deg,#FFFFFF 0%, var(--surface-hover) 100%); border-color:var(--text-mute); transform:translateY(-1px); } .premium .btn-outline-primary{ color:var(--accent); border-color:var(--accent-line); background:transparent; box-shadow:none; } .premium .btn-outline-primary:hover{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); } .premium .btn-link{ color:var(--accent); } /* Premium CTA — titanium (NO gold): brushed graphite with a bright edge */ .premium .btn-gold,.premium .btn-premium{ background:var(--brushed-titanium); border:1px solid var(--premium-line); color:var(--premium-text); font-weight:var(--fw-bold); } .premium .btn-gold:hover,.premium .btn-premium:hover{ filter:brightness(1.12); color:#fff; border-color:var(--line-strong); } /* ============================================================================ FORMS ============================================================================ */ .premium .form-control,.premium .custom-select,.premium textarea.form-control{ background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); padding: .7rem 1rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .premium .form-control::placeholder{ color: var(--text-mute); } .premium .form-control:focus,.premium .custom-select:focus{ background: var(--surface-3); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text); outline: none; } .premium .form-control:disabled,.premium .form-control[readonly]{ background:var(--surface-1); color:var(--text-dim); } .premium label,.premium .form-label{ color:var(--text-dim); font-weight:var(--fw-semi); font-size:var(--fs-sm); } .premium .input-group-text{ background:var(--surface-3); border:1px solid var(--line); color:var(--text-dim); border-radius:var(--r-md); } .premium .form-control.is-invalid,.premium .is-invalid{ border-color:var(--danger); } .premium .invalid-feedback,.premium .text-danger{ color:var(--danger) !important; } .premium .custom-control-label::before{ background:var(--surface-2); border-color:var(--line-strong); } .premium .custom-control-input:checked~.custom-control-label::before{ background:var(--accent); border-color:var(--accent); } /* ============================================================================ CHOSEN (30 templates rely on it — re-skin to match .form-control) ============================================================================ */ .premium .chosen-container{ font-size:var(--fs-base); width:100% !important; } .premium .chosen-container-single .chosen-single{ background: var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); color:var(--text); height:auto; padding:.7rem 1rem; line-height:1.4; box-shadow:none; } .premium .chosen-container-single .chosen-single span{ color:var(--text); } .premium .chosen-container-single .chosen-single div b{ filter: none; opacity:.65; } /* default dark sprite arrow suits light bg */ /* The filter toolbar (and any card holding an open dropdown) must NOT transform on hover — a transform creates a stacking context that traps the dropdown behind page cards. */ .premium .card.card-search:hover,.premium .card.big-chosen:hover{ transform:none; box-shadow:var(--sh-1); } .premium .card.card-search{ overflow:visible; } .premium .card:has(.chosen-container-active):hover, .premium .card:has(.chosen-with-drop):hover{ transform:none; box-shadow:var(--sh-1); } /* Solid dropdown panel that floats ABOVE page cards/headings (was bleeding through). */ .premium .chosen-container.chosen-with-drop, .premium .chosen-container.chosen-container-active{ position:relative; z-index:1035; } .premium .chosen-container .chosen-drop{ background:var(--surface-1); border:1px solid var(--line-strong); border-radius:0 0 var(--r-md) var(--r-md); box-shadow:var(--sh-float); z-index:1035; } .premium .chosen-container .chosen-results li{ color:var(--text-dim); padding:.55rem 1rem; } .premium .chosen-container .chosen-results li.highlighted{ background:var(--accent); color:#fff; } .premium .chosen-container .chosen-results li.result-selected{ color:var(--text-mute); } .premium .chosen-container-single .chosen-search input[type=text]{ background:var(--surface-1); border:1px solid var(--line); color:var(--text); border-radius:var(--r-sm); } .premium .chosen-container-multi .chosen-choices{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); } .premium .chosen-container-multi .chosen-choices li.search-choice{ background:var(--surface-3); border:1px solid var(--line-strong); color:var(--text); border-radius:var(--r-sm); } /* ============================================================================ TABLES (no glass, no per-row heavy animation → GPU-safe on big grids) ============================================================================ */ .premium .table{ color:var(--text); border-color:var(--line); } .premium .table thead th{ background:var(--surface-2); color:var(--text-dim); text-transform:uppercase; font-size:var(--fs-xs); letter-spacing:.06em; font-weight:var(--fw-semi); border-bottom:1px solid var(--line-strong); border-top:none; padding:.85rem 1rem; white-space:nowrap; } .premium .table td{ border-top:1px solid var(--line); padding:.85rem 1rem; vertical-align:middle; } .premium .table tbody tr{ background:transparent; transition: background var(--dur) var(--ease); } .premium .table tbody tr:hover{ background:var(--surface-1); } .premium .table-striped tbody tr:nth-of-type(odd){ background:rgba(15,20,25,.025); } .premium .table-bordered,.premium .table-bordered td,.premium .table-bordered th{ border-color:var(--line); } .premium .table-responsive{ border-radius:var(--r-md); } /* Card-wrapped table */ .premium .card > .table-responsive,.premium .card > .table{ margin:0; } /* ============================================================================ MODALS (glass surface #2 — sits at 1050, always above the 1020 nav) ============================================================================ */ .premium .modal-backdrop{ background:#0B0F14; } .premium .modal-backdrop.show{ opacity:.45; } .premium .modal-content{ background: var(--surface-1); /* solid fallback */ border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-float); color: var(--text); } @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .premium .modal-content{ background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } } .premium .modal-header{ border-bottom:1px solid var(--line); padding:var(--s-4) var(--s-5); } .premium .modal-header .close,.premium .modal .close{ color:var(--text-dim); text-shadow:none; opacity:1; } .premium .modal-header .close:hover,.premium .modal .close:hover{ color:var(--text); } .premium .modal-title{ font-weight:var(--fw-bold); } .premium .modal-body{ padding:var(--s-5); } .premium .modal-footer{ border-top:1px solid var(--line); } /* ============================================================================ DROPDOWNS (1030 — above nav, below modal) ============================================================================ */ .premium .dropdown-menu{ background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-md); box-shadow:var(--sh-2); color:var(--text); z-index:var(--z-dropdown); padding:.4rem; } .premium .dropdown-item{ color:var(--text-dim); border-radius:var(--r-sm); padding:.55rem .85rem; } .premium .dropdown-item:hover,.premium .dropdown-item:focus{ background:var(--surface-hover); color:var(--text); } .premium .dropdown-item.active,.premium .dropdown-item:active{ background:var(--accent); color:#fff; } .premium .dropdown-divider{ border-color:var(--line); } /* ============================================================================ TABS / PILLS / NAV (63 templates use data-toggle=tab) ============================================================================ */ .premium .nav-tabs{ border-bottom:1px solid var(--line); } .premium .nav-tabs .nav-link{ border:none; color:var(--text-dim); border-radius:0; padding:.75rem 1rem; } .premium .nav-tabs .nav-link:hover{ color:var(--text); border:none; } .premium .nav-tabs .nav-link.active{ background:transparent; color:var(--text); border-bottom:2px solid var(--accent); } .premium .nav-pills .nav-link{ color:var(--text-dim); border-radius:var(--r-pill); } .premium .nav-pills .nav-link.active{ background:var(--accent); color:#fff; } /* ============================================================================ BADGES / ALERTS / TOOLTIPS ============================================================================ */ .premium .badge{ font-weight:var(--fw-semi); border-radius:var(--r-pill); padding:.35em .7em; } .premium .badge-primary{ background:var(--accent-soft); color:var(--accent); } .premium .badge-secondary{ background:var(--surface-3); color:var(--text-dim); } .premium .badge-success{ background:rgba(22,164,92,.12); color:var(--ok); } .premium .badge-danger{ background:rgba(224,49,60,.10); color:var(--danger); } /* Stock .badge-info renders yellow → neutralize to titanium (honours the no-gold/no-yellow rule). Delivery-time pills (servicelist.tpl) use .badge-info. */ .premium .badge-info{ background:var(--surface-3); color:var(--text-dim); } .premium .badge-warning{ background:var(--surface-3); color:var(--text-dim); } .premium .label-info,.premium .label-warning{ background:var(--surface-3); color:var(--text-dim); } /* Tier / premium / reseller badge — titanium chip (NO gold) */ .premium .badge-gold,.premium .badge-premium,.premium .badge-reseller{ background:var(--premium-bg); color:var(--premium-text); border:1px solid var(--premium-line); } .premium .alert{ border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface-2); color:var(--text); } .premium .alert-success{ border-color:rgba(46,212,122,.3); background:rgba(46,212,122,.08); color:var(--ok); } .premium .alert-danger{ border-color:rgba(244,85,95,.3); background:rgba(244,85,95,.08); color:var(--danger); } .premium .alert-warning{ border-color:rgba(245,166,35,.3); background:rgba(245,166,35,.08); color:var(--warn); } .premium .alert-info{ border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent-hover); } .premium .tooltip-inner{ background:var(--surface-3); color:var(--text); border-radius:var(--r-sm); box-shadow:var(--sh-2); } .premium .tooltip.bs-tooltip-top .arrow::before{ border-top-color:var(--surface-3); } .premium .tooltip.bs-tooltip-bottom .arrow::before{ border-bottom-color:var(--surface-3); } /* ============================================================================ BALANCE / CREDIT — near-white, weight-driven emphasis (NO gold) ============================================================================ */ .premium .current-balance,.premium .balance,.premium .credit-amount,.premium .text-gold{ color:var(--text) !important; font-weight:var(--fw-bold); } .premium .deposit-total,.premium .balance-card{ border:1px solid var(--line-strong) !important; } /* ============================================================================ FOOTER ============================================================================ */ .premium footer{ background:var(--bg-elev); border-top:1px solid var(--line); color:var(--text-dim); } .premium footer .footer-top{ border-top:1px solid var(--line) !important; } .premium footer a{ color:var(--text-dim); } .premium footer a:hover{ color:var(--text); } .premium footer h1,.premium footer h2,.premium footer h3,.premium footer h4,.premium footer h5,.premium footer h6{ color:var(--text); font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em; } /* ============================================================================ SERVICE / GROUP TILES (order flows) — hooks: .service .group .services Solid surfaces, accent highlight on active. No heavy animation. ============================================================================ */ /* NOTE: in DHRU order flow .active means "visible/expanded" (theme.css sets display:block), NOT "user-selected" — so never paint .active with a blue fill (it looks like a stray selection). */ /* Row-style groups are just category wrappers — transparent (card-style groups keep their card). */ .premium .group:not(.card){ border:none; background:transparent; border-radius:0; } .premium .group:not(.card).active{ border:none; background:transparent; } /* .service is a WRAPPER (col) — the visible card is the inner .card-product. Keep .service transparent so we don't get a card-inside-a-card (double border). */ .premium .service{ background:transparent; border:none; border-radius:0; } .premium .service.active{ background:transparent; border:none; } .premium .service.discounted .card,.premium .service.discounted .card-product{ border-color:var(--accent-line); } .premium .services tr.hottest{ background:var(--surface-2); } /* ============================================================================ LOADERS (keep hooks #loader .lds-roller .page-pre-loader) ============================================================================ */ .premium .page-pre-loader,.premium #loader{ background:var(--bg) !important; } .premium .lds-roller div::after{ background:var(--accent); } /* ============================================================================ WOW / BOLD INTERACTIONS (GPU-cheap: transform / opacity / box-shadow only. No backdrop-filter on repeating tiles. reduced-motion block below disables all.) ============================================================================ */ /* ---- Buttons: press-scale + shine sweep on primary CTAs ---- */ .premium .btn{ position:relative; overflow:hidden; } .premium .btn:active{ transform:scale(.97); } .premium .btn-primary::after,.premium .btn-gold::after,.premium .btn-success::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); transition:left .55s var(--ease); pointer-events:none; } .premium .btn-primary:hover::after,.premium .btn-gold:hover::after,.premium .btn-success:hover::after{ left:130%; } .premium .btn-primary:hover{ transform:translateY(-1px); } /* ---- Cards: hover-lift + accent top hairline reveal ---- */ .premium .card{ position:relative; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .premium .card::before{ content:""; position:absolute; top:0; left:16px; right:16px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--accent),transparent 70%); opacity:0; transition:opacity var(--dur) var(--ease); } .premium .card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-strong); } .premium .card:hover::before{ opacity:.9; } /* don't lift the app-shell / full-height wrapper cards */ .premium .card-app:hover,.premium .card.h-100.card-servicedetail:hover, .premium .card-place-retail-order:hover,.premium .card-search:hover{ transform:none; box-shadow:var(--sh-1); } /* ---- Service tiles: BOLD hover (lift + accent ring + glow + icon pop) ---- */ .premium .service{ cursor:pointer; position:relative; } /* Hover lifts / accents the INNER card (not the wrapper) — no double card. */ .premium .service > .card,.premium .service .card-product{ transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .premium .service:hover > .card,.premium .service:hover .card-product{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 14px 34px rgba(11,107,255,.16), var(--sh-2); } .premium .service .col-group-icon{ transition:transform var(--dur) var(--ease); } .premium .service:hover .col-group-icon{ transform:scale(1.04); } .premium .service:active > .card,.premium .service:active .card-product{ transform:translateY(-1px) scale(.996); } /* ---- Category heading redesign (.group .title span / card-style h4) ---- */ .premium .group .title,.premium .card.group > h4{ position:relative; font-weight:var(--fw-bold); letter-spacing:-.01em; padding-left:16px; margin-bottom:1rem; } .premium .group .title::before,.premium .card.group > h4::before{ content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:4px; border-radius:4px; background:linear-gradient(180deg,var(--accent),var(--accent-press)); } .premium .group .title span,.premium .card.group > h4 span{ color:var(--text); } /* ---- Navigation: dropdown entrance only (menu buttons are neutral pills, no underline) ---- */ .premium .dropdown-menu.show{ animation:premDrop .18s var(--ease) both; } @keyframes premDrop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } } .premium .dropdown-item{ transition:background var(--dur) var(--ease), color var(--dur) var(--ease), padding-left var(--dur) var(--ease); } .premium .dropdown-item:hover{ padding-left:1.05rem; } /* Account / balance chip (menu-profile) */ .premium .menu-profile .nav-link img,.premium .profile img{ border-radius:50%; box-shadow:0 0 0 2px var(--surface-1), 0 0 0 3px var(--accent-line); transition:box-shadow var(--dur) var(--ease); } .premium .menu-profile:hover .nav-link img,.premium .profile:hover img{ box-shadow:0 0 0 2px var(--surface-1), 0 0 0 3px var(--accent); } /* ---- Shrink-on-scroll sticky nav (class toggled by footer.tpl script) ---- */ .premium header{ transition:box-shadow var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); } .premium header.is-scrolled{ box-shadow:0 10px 30px rgba(11,15,20,.12); } /* Top utility bar stays put on scroll (no collapse) — avoids the show/hide jank. */ /* ---- Page-title band → elegant premium hero (class added in header.tpl) ---- */ .premium .page-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line)!important; padding-top:2.4rem!important; padding-bottom:2.4rem!important; background:linear-gradient(115deg,#FBFCFE 0%,#EEF3FA 55%,#E6EEF9 100%)!important; } .premium .page-hero::before{ content:""; position:absolute; right:-60px; top:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle at center, rgba(11,107,255,.10), transparent 64%); pointer-events:none; } .premium .page-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, var(--accent-line), transparent 45%); opacity:.7; } .premium .page-hero .page-title{ font-size:var(--fs-3xl); font-weight:var(--fw-bold); letter-spacing:-.025em; color:var(--text); line-height:1.1; } .premium .page-hero .page-title::after{ content:""; display:block; width:52px; height:3px; border-radius:3px; margin-top:.7rem; background:linear-gradient(90deg,var(--accent),var(--accent-press)); } .premium .page-hero .breadcrumb{ margin-top:1rem; } .premium .page-hero .breadcrumb a,.premium .page-hero .breadcrumb li{ color:var(--text-dim); } .premium .page-hero .breadcrumb .fa-home,.premium .page-hero .breadcrumb .fal{ color:var(--accent); } /* ============================================================================ ELEGANT NAVBAR + ACCOUNT CHIP + REFINEMENT ============================================================================ */ /* Top utility bar — quiet, spaced, hairline separators */ .premium .header-top{ padding-top:.5rem; padding-bottom:.5rem; } .premium .header-top .nav-link,.premium .header-top span{ font-size:var(--fs-sm); color:var(--text-dim); font-weight:var(--fw-normal); } .premium .header-top .nav-link i{ color:var(--accent); margin-right:.35rem; } .premium .header-top .nav-link:hover{ color:var(--text); } /* Brand */ .premium .navbar-brand{ padding-top:.4rem; padding-bottom:.4rem; } .premium .navbar-brand img{ max-height:44px; filter:saturate(1.02); } /* Master menu — refined rhythm + weight */ .premium .navbar-mastermenu > .nav-item > .nav-link{ font-size:var(--fs-base); font-weight:var(--fw-semi); color:var(--text-dim); letter-spacing:.005em; } .premium .navbar-mastermenu > .nav-item > .nav-link .fa-chevron-down,.premium .navbar-mastermenu .fal.fa-chevron-down{ font-size:.7em; margin-left:.35rem; opacity:.7; transition:transform var(--dur) var(--ease); } .premium .navbar-mastermenu .nav-item.show > .nav-link .fa-chevron-down{ transform:rotate(180deg); } /* Search trigger */ .premium .navbar .fa-search,.premium a[href*="search"] .fa-search{ color:var(--text-dim); transition:color var(--dur) var(--ease); } .premium .navbar .fa-search:hover{ color:var(--accent); } /* Account / balance chip — elegant pill card */ .premium .nav-item.profile > .d-none > div > .nav-link, .premium .nav-item.profile .nav-link.dropdown-toggle{ border:1px solid var(--line); background:var(--surface-1); border-radius:var(--r-pill); padding:.35rem .6rem .35rem .45rem; box-shadow:var(--sh-1); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .premium .nav-item.profile .nav-link.dropdown-toggle:hover{ border-color:var(--line-strong); box-shadow:var(--sh-2); } .premium .profile .avatar-img img{ width:34px; height:34px; border-radius:50%; box-shadow:0 0 0 2px var(--surface-1),0 0 0 3px var(--accent-line); } .premium .profile .avatar-icon{ margin-right:.6rem!important; } .premium .profile .nav-link{ color:var(--text); font-weight:var(--fw-semi); font-size:var(--fs-sm); } .premium .profile .nav-link span{ color:var(--text-mute); font-weight:var(--fw-normal); font-size:var(--fs-xs); } .premium .profile .fa-chevron-down{ color:var(--text-mute); font-size:.7em; margin-left:.4rem; } .premium .profile .user-balance{ display:inline-block; margin-top:.15rem; padding:.05rem .55rem; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--line); font-weight:var(--fw-bold); font-size:var(--fs-sm); } .premium .profile .user-balance.text-success small{ color:var(--ok); } .premium .profile .user-balance.text-danger small{ color:var(--danger); } .premium .profile .my-account{ min-width:250px; margin-top:.5rem; } .premium .profile .my-account .dropdown-item small{ color:var(--text-mute); } /* Currency / language dropdown flags & items */ .premium .nav-item-curlang .nav-link{ color:var(--text-dim); font-size:var(--fs-sm); } .premium .nav-item-curlang .nav-link:hover{ color:var(--text); } /* Search / filter toolbar card (order pages) — floating, refined */ .premium .maincategory,.premium .searchservice{ } .premium .card .input-group .fa-search,.premium .card .fa-search{ color:var(--text-mute); } /* Softer, more premium elevation across raised surfaces */ .premium .card,.premium .modal-content{ box-shadow:var(--sh-1); } .premium .card{ box-shadow:0 1px 2px rgba(11,15,20,.04),0 6px 18px rgba(11,15,20,.05); } /* Inputs — a touch more refined */ .premium .form-control,.premium .custom-select{ box-shadow:none; } .premium .form-control:hover{ border-color:var(--line-strong); } /* Order modal columns — content was flush to the rounded corners and got clipped. Pad it in, keep overflow visible, gentler radius. */ .premium .card-place-retail-order{ padding:1.35rem 1.5rem; overflow:visible; border-radius:var(--r-md); } .premium .card-place-retail-order > .flex-column{ width:100%; } .premium .placeorder-field,.premium .placeorder-details{ overflow:visible; } /* Section spacing rhythm */ .premium .body-container{ padding-bottom:2rem; } /* Elegant scrollbar already set; refine dropdown caret spacing */ .premium .dropdown-toggle::after{ vertical-align:.15em; } /* ============================================================================ MOTION — global off-switch for reduced-motion ============================================================================ */ @media (prefers-reduced-motion: reduce){ .premium *,.premium *::before,.premium *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .premium body::before{ display:none; } }