, and DataTables inserts .dataTables_wrapper between it and the . Making the container the scroll box keeps the search field, info line and pagination normal while only the table itself pans. -------------------------------------------------------------------------- */ .table-container, .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */ } /* tablelist.tpl builds DataTables with dom '<"listtable"fit>pl', so .listtable is the element that actually holds the

. Scrolling it as well as the outer .table-container means the fix lands whichever of the two turns out to be the width-constrained ancestor. */ .table-container .listtable, .dataTables_wrapper .listtable { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-container > .dataTables_wrapper, .table-container > table.table { max-width: 100%; } /* No width:100% here on purpose — forcing it fights the min-width below and stops the table from ever becoming scrollable. */ .table-container table.table, .table-responsive table.table { margin-bottom: 0; } /* Safety net for tables that are NOT inside .table-container (module output, invoice line items, addon tables). Making the table itself the scroll box is the standard wrapper-free technique; row/cell layout is unaffected. */ @media (max-width: 767.98px) { .card > table.table, .panel > table.table, .card-body > table.table, .panel-body > table.table, .tab-content > table.table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* No min-width on the client list tables. They carry only 4-5 columns, so letting them wrap fits everything on a phone with nothing cut off, which beats forcing a swipe. The scroll box above stays as the safety net for any table that genuinely cannot fit. */ @media (max-width: 767.98px) { .table-container table.table > thead > tr > th, .table-container table.table > tbody > tr > td { padding: 10px 6px !important; font-size: 12.5px; white-space: normal; } /* Only cell VALUES may break mid-word (long domains have to). Headings must not, or short labels like "Status" split into "Statu s". */ .table-container table.table > tbody > tr > td { word-break: break-word; } .table-container table.table > thead > tr > th { word-break: normal; hyphens: none; } /* The pricing cell holds "$9.99USD Monthly" on one line, which forces the amount to break mid-token in a narrow column. Stacking the billing cycle under the amount keeps both intact. */ .table-container table.table > tbody > tr > td > small { display: block; } /* clientareaproducts.tpl marks the amount cell with data-order (it sorts on the numeric value), which makes it the one reliable hook for "this is a currency cell". Money must never break mid-token: "$10.00U / SD". */ .table-container table.table > tbody > tr > td[data-order] { white-space: nowrap; word-break: normal; } /* The leading icon/SSL column is decorative and eats width on a phone. */ .table-container table.table > thead > tr > th:first-child, .table-container table.table > tbody > tr > td:first-child { padding-left: 2px !important; padding-right: 2px !important; } } /* -------------------------------------------------------------------------- 3. DATATABLES CHROME (search / length / info / pagination) On phones these float next to each other and collide. Stack them. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none !important; width: 100%; text-align: center; margin: 8px 0; white-space: normal; } /* The search box renders as a near-invisible sliver on mobile because it inherits an auto width from a floated label. */ .dataTables_wrapper .dataTables_filter label { display: block; width: 100%; margin: 0; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_filter .form-control { width: 100% !important; min-width: 0; display: block; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_length .form-control { width: auto; display: inline-block; } /* Pagination buttons need to be tappable and must not run off the edge. */ .dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: center; margin: 0; } .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 40px; min-height: 40px; line-height: 26px; } } /* -------------------------------------------------------------------------- 4. NESTED CARD / PANEL DOUBLE OUTLINE (the visible "overlap") custom.css styles .card, .panel, .well AND .list-group with the same border + 14px radius. The View / Actions collapsibles nest these, so two rounded outlines paint a few px apart and look like overlapping boxes. Only the INNER outline is removed; the outer card keeps its styling. -------------------------------------------------------------------------- */ /* .sidebar is a layout wrapper that HOLDS the View/Actions cards — it is not a card itself. custom.css lists it alongside .card/.panel/.well and gives it the same border + 14px radius, so it paints a second rounded outline around the cards it contains. That is the box that reads as "overlapping". */ .sidebar, .panel-sidebar { border: 0 !important; box-shadow: none !important; background-color: transparent !important; border-radius: 0 !important; padding: 0 !important; } .card .card, .card .panel, .card .well, .card .list-group, .panel .card, .panel .panel, .panel .well, .panel .list-group, .well .list-group, .card-body > .list-group, .panel-body > .list-group { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* List rows inside a card only need separators, not a box each. */ .card .list-group-item, .panel .list-group-item { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; } .card .list-group-item:first-child, .panel .list-group-item:first-child { border-top: 0 !important; } .card .list-group-item:last-child, .panel .list-group-item:last-child { border-bottom: 0 !important; } /* -------------------------------------------------------------------------- 5. SIDEBARS / PANELS STACK CLEANLY ON SMALL SCREENS -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .sidebar, .panel-sidebar, .sidebar .panel, #ViewFilterPanel { width: 100% !important; max-width: 100%; float: none !important; margin-bottom: 16px; } /* Header actions (buttons/dropdowns) wrap instead of overlapping title */ .card-title, .panel-heading, .card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .card-header .pull-right, .panel-heading .pull-right, .card-title .pull-right { float: none !important; margin-left: auto; } } /* -------------------------------------------------------------------------- 6. TOUCH TARGETS + FORM DENSITY ON PHONES 16px inputs also stop iOS Safari from auto-zooming the page on focus, which is itself a common cause of "the layout jumped / overlapped". -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { input, select, textarea, .form-control, .form-select { font-size: 16px !important; max-width: 100%; } .btn { min-height: 40px; white-space: normal; } .btn-group, .btn-toolbar { flex-wrap: wrap; } /* Modals were running off-screen edge-to-edge */ .modal-dialog { margin: 10px; max-width: calc(100% - 20px); } .modal-body { overflow-x: auto; } /* Breadcrumb wrapping instead of pushing the page wide */ .breadcrumb { flex-wrap: wrap; } } /* Images / iframes / embeds never widen the page. */ img, svg, video, iframe, embed, object { max-width: 100%; } img, svg, video { height: auto; } /* ========================================================================== SNVHOST DARK-SKIN COLOUR FIXES -------------------------------------------------------------------------- SITE-SPECIFIC. This section exists only in the hostflow copy of this file (billing.snvhost.com). The panel.offshorekaka.in copy stays layout-only, because that skin has a light mode as well and these dark values would break it. Both fixes are leftovers from the stock light theme that custom.css never covered — theme.css paints them for a white page. ========================================================================== */ /* ---- DataTables search box ---- theme.css:12809 sets background: url("../../../assets/img/search.png") #fff no-repeat 8px 5px; The shorthand paints a white box AND a dark-on-light magnifier PNG, which on the dark skin shows up as a white chip in the corner of the field. Replaced with an inline SVG magnifier tinted to the muted text colour, so there is no extra request and nothing to keep in sync. */ .dataTables_wrapper .dataTables_filter label .form-control { background-color: var(--snv-surface, rgba(255,255,255,0.04)) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 14px center !important; background-size: 16px 16px !important; padding-left: 42px !important; color: var(--snv-text, #fff) !important; border: 1px solid var(--snv-border, rgba(255,255,255,0.10)) !important; } /* ---- Pagination ---- theme.css:12839 sets .pagination > li > a { color:#444 } and Bootstrap supplies a white .page-link background, so the pager renders as a light block on the dark page. */ .dataTables_wrapper .dataTables_paginate .paginate_button, .pagination > li > a, .pagination > li > span, .page-link { background-color: var(--snv-bg-card, #0e0e24) !important; border-color: var(--snv-border, rgba(255,255,255,0.10)) !important; color: var(--snv-text, #fff) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .pagination > li > a:hover, .page-link:hover { background-color: var(--snv-surface, rgba(255,255,255,0.04)) !important; border-color: var(--snv-primary, #00f3ff) !important; color: var(--snv-primary, #00f3ff) !important; } /* Current page keeps the brand gold used for primary actions elsewhere. */ .dataTables_wrapper .dataTables_paginate .paginate_button.current, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .page-item.active .page-link { background-color: var(--snv-gold, #fec601) !important; border-color: var(--snv-gold, #fec601) !important; color: #050510 !important; } /* Disabled Previous/Next must read as disabled, not as an enabled light chip. */ .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .pagination > .disabled > a, .pagination > .disabled > span, .page-item.disabled .page-link { background-color: transparent !important; border-color: var(--snv-border-soft, rgba(255,255,255,0.06)) !important; color: var(--snv-muted, #94a3b8) !important; opacity: .6; } /* "Show [10] entries" select sits next to the pager and had the same issue. */ .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_length .form-control { background-color: var(--snv-bg-card, #0e0e24) !important; border: 1px solid var(--snv-border, rgba(255,255,255,0.10)) !important; color: var(--snv-text, #fff) !important; } /* table.table-list is hardcoded to a white head and white rows in theme.css (12855 / 12879). custom.css restyles .table but not these. */ table.table-list thead th { background-color: var(--snv-bg-darker, #050510) !important; border-bottom-color: var(--snv-border-soft, rgba(255,255,255,0.06)) !important; color: var(--snv-text, #fff) !important; } .table-list > tbody > tr > td { background-color: transparent !important; } .table-list > tbody > tr:hover > td { background-color: rgba(0, 243, 255, 0.06) !important; } /* ========================================================================== HEADER TOOLBAR ALIGNMENT (theme toggle / cart / hamburger) -------------------------------------------------------------------------- Reported: on a phone the toolbar dropped onto a second row underneath the logo and sat left-aligned. It belongs on the logo's row, flush right. Cause: header.tpl's masthead is div.navbar.navbar-light > div.container a.navbar-brand form.form-inline.ml-auto (its input-group is d-none below xl, so below xl the form is 0px wide) ul.navbar-nav.toolbar (cart + hamburger, plus the injected theme toggle on the offshorekaka skin) Bootstrap gives .navbar > .container flex-wrap: wrap. Measured at a 360px viewport: brand 180 + margin 16 + toolbar 188 = 384 against 328px of available container width, so the toolbar wrapped to its own line, and once wrapped the ml-auto on the (empty) form no longer pushed anything right, so it landed at the far left. Fix: below xl keep the row on one line and let the brand be the element that gives up space. The toolbar is fixed-size and pinned right with its own auto margin, so it no longer depends on the empty form for placement. Scoped to max-width 1199.98px on purpose. At xl and above the search box is visible and carries the ml-auto, the hamburger is hidden, and the row already lays out correctly - measured unchanged at 1440. ========================================================================== */ @media (max-width: 1199.98px) { #header .navbar.navbar-light > .container { flex-wrap: nowrap; align-items: center; } /* The only shrinkable item. min-width:0 is required: a flex item's automatic minimum size would otherwise hold it at its 180px width and push the toolbar back off the line. */ #header .navbar.navbar-light > .container > .navbar-brand { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-right: .75rem !important; overflow: hidden; } /* hostflow uses a real ; the offshorekaka skin paints the logo as a background on .navbar-brand itself and needs nothing here. */ #header .navbar.navbar-light > .container > .navbar-brand .logo-img { max-width: 100%; height: auto; } #header .navbar.navbar-light > .container > form.form-inline { flex: 0 0 auto; margin-left: auto !important; } #header .navbar.navbar-light .toolbar { flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; align-items: center; } } /* Tighter gaps on phones buy the logo back some width. */ @media (max-width: 575.98px) { #header .navbar.navbar-light .toolbar > .nav-item { margin-left: .5rem !important; } #ok-theme-toggle { margin-left: 0 !important; margin-right: 0 !important; } } @media (max-width: 400px) { #header .navbar.navbar-light > .container { padding-left: .625rem; padding-right: .625rem; } #header .navbar.navbar-light .toolbar > .nav-item { margin-left: .35rem !important; } } /* ========================================================================== SHOPPING CART - DARK THEME (added 2026-08-08) -------------------------------------------------------------------------- WHMCS ships the order form for a light theme: #fff / #f8f8f8 / #eee panels with #333 text. On this site that sits on a near-black page, so every one of those panels reads as a white block - the product cards, the "Choose Account" box on checkout, the PayPal panel. These values used to be edited directly inside templates/orderforms/standard_cart/css/all.min.css. The 2026-08-08 upgrade to 9.0.6 replaced that file and the white came back. Editing it again would also discard the 33 rules 9.0.6 added to it (the new domain-checker UI among them) and would be lost at the next update anyway - so the recolour lives here instead, in the custom theme, where an update cannot reach it. Two deliberate choices: - every selector is prefixed with "body" rather than marked !important. WHMCS loads the order form stylesheet AFTER the theme CSS, so the override needs the extra specificity to win on its own. - this file, not custom.css. custom.css is linked with a hand-written "?v=snv7" that nobody remembers to bump, so a change there reaches nobody who has already loaded the page. This file is linked by includes/hooks/responsive_fix.php with ?v=. Palette follows the theme: #0e0e24 panels, #14142e for alternating rows. ========================================================================== */ /* --- panels --- */ body #order-standard_cart .products .product, body #order-standard_cart .products .product header, body #order-standard_cart .product-info, body #order-standard_cart .summary-container, body #order-standard_cart .apply-credit-container, body #order-standard_cart .view-cart-items .item, body #order-standard_cart .view-cart-tabs .tab-content, body #order-standard_cart .view-cart-promotion-code, body #order-standard_cart .domain-selection-options .option, body #order-standard_cart .mc-promo, body #order-standard_cart .mc-promo .body, body #order-standard_cart .account-select-container div.account, body #order-standard_cart .account-select-container div.account.active, body .domain-checker-container .input-group-box, body .spotlight-tlds, body .spotlight-tld, body .suggested-domains .domain-lookup-suggestions-loader, body .suggested-domains .domain-lookup-suggestions-message, body .addon-renewals .service-renewal, body .domain-renewals, body .service-renewals, body .domain-promo-box, body .product-recommendations .product-recommendation, body .product-recommendations .product-recommendation .body { background: #0e0e24; background-color: #0e0e24; border-color: rgba(255, 255, 255, .12); color: #cbd5e1; } /* alternating rows keep a visible step without going light */ body #order-standard_cart .view-cart-items .item:nth-child(even) { background-color: #14142e; } /* --- text that was written for a light panel --- */ body #order-standard_cart .products .product header span, body #order-standard_cart .panel-addon .panel-body label, body #order-standard_cart .domain-checker-advanced label, body #order-standard_cart .domain-checker-advanced .multiselect, body #order-standard_cart .btn-remove-from-cart, body #order-standard_cart .order-summary .btn-continue-shopping, body #order-standard_cart .account-select-container div.account, body .domain-promo-box, body .spotlight-tld { color: #e5e7eb; } /* availability colours: the light-theme greens and reds are too dark here */ body #order-standard_cart .domain-checker-available { color: #5cb85c; } body #order-standard_cart .domain-checker-invalid, body #order-standard_cart .domain-checker-unavailable { color: #d9534f; } /* --- form fields inside the cart --- */ body #order-standard_cart .field, body #order-standard_cart .form-control { background-color: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .15); color: #e5e7eb; } /* --- the PayPal gateway panel on checkout --- modules/gateways/paypal_ppcpv/css/payment.css sets #creditCardInputFields to #fff. That is a WHMCS core module file, so it is replaced by every update too; the override belongs here for the same reason as the rest. */ body #frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields, body .paypal_ppcpv-payment-form #creditCardInputFields { background-color: #0e0e24; color: #cbd5e1; } body .paypal_ppcpv-payment-form #creditCardInputFields .radio-inline, body .paypal_ppcpv-payment-form .paymethod-info, body .paypal_ppcpv-payment-form .payer-label, body .paypal_ppcpv-payment-form .payer-email, body .paypal_ppcpv-payment-form .approval-instructions, body .paypal_ppcpv-payment-form .payment-instructions { background-color: transparent; color: #cbd5e1; } /* The selected payment-method row: payment.css sets .selected to #f1f1f1, which on this page is a light grey bar with grey text inside an otherwise dark panel. A translucent white keeps the "this one is selected" cue without the block of light. Nothing here touches PayPal's own button. "Pay with PayPal" is drawn by PayPal's SDK and is white by design - their branding rules require it, and it renders inside an iframe this stylesheet cannot reach anyway. */ body .paypal_ppcpv-payment-form .selected { background-color: rgba(255, 255, 255, .07); color: #e5e7eb; } body .paypal_ppcpv-payment-form .selected label, body .paypal_ppcpv-payment-form .selected span { color: #e5e7eb; } /* ========================================================================== CLIENT AREA - LEFTOVER LIGHT SURFACES (added 2026-08-08) -------------------------------------------------------------------------- Found by sweeping the logged-in client area at 390 / 900 / 1280 after the 9.0.6 upgrade: three surfaces are still drawn for a light theme and show as white blocks on this near-black page. Country flags (div.iti-flag, rgb(219,219,219)) also came up in that sweep and are deliberately left alone - that grey is the flag sprite itself, not a panel. ========================================================================== */ /* Announcements. The theme's own CSS carries article { background-color: #f5f5f5; border-left: 4px solid #ccc }. */ body #main-body article { background-color: #0e0e24; border-left-color: rgba(255, 255, 255, .2); color: #cbd5e1; } /* The attachment picker on Open Ticket. Bootstrap draws .custom-file-label as #fff and its ::after ("Browse") a shade lighter, so on a dark form it is a white bar with grey placeholder text - unreadable. */ body .custom-file-label { background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); color: #e5e7eb; } body .custom-file-label::after { background-color: rgba(255, 255, 255, .10); border-left-color: rgba(255, 255, 255, .15); color: #e5e7eb; } /* Plain count badges render white. The coloured variants (.badge-success, .badge-info and friends) are intentional and are excluded by the :not(). */ body .badge:not([class*="badge-"]) { background-color: rgba(255, 255, 255, .10); color: #e5e7eb; } /* The sidebar count badges. theme.min.css carries ".sidebar .list-group-item .badge { background: #fff; color: #666 }" - three classes, so the general .badge rule above (two) loses to it. Matching that selector with a leading "body" is enough to win without !important. */ body .sidebar .list-group-item .badge, body .sidebar .sidebar-menu-item-badge .badge { background-color: rgba(255, 255, 255, .10); color: #e5e7eb; } /* -------------------------------------------------------------------------- Recent-tickets sidebar card: long subjects escaped the card -------------------------------------------------------------------------- The label already carries .truncate (white-space:nowrap; overflow:hidden), but truncation only happens if the box has a width to truncate to. It sat in a flex row whose items default to min-width:auto, so the box grew to the text instead: measured on submitticket.php at 1280 the label ran to 546px inside a 340px card - 206px of it drawn over the page and clipped by the panel next to it. min-width:0 lets it shrink, and then .truncate works. */ body .sidebar .sidebar-menu-item-label, body .sidebar .sidebar-menu-item-wrapper, body .sidebar .recent-ticket, body .sidebar .truncate { min-width: 0; max-width: 100%; } body .sidebar .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------------------------------- The "Posted by ... on ..." bar above every ticket reply -------------------------------------------------------------------------- .posted-by is rgb(246,246,246) with rgb(136,136,136) text - a light strip with grey text inside an otherwise dark conversation. */ body .posted-by { background-color: rgba(255, 255, 255, .05); color: #cbd5e1; border-color: rgba(255, 255, 255, .12); } body .posted-by a, body .posted-by strong { color: #e5e7eb; } /* -------------------------------------------------------------------------- Ticket status colours that are unreadable on the dark client area -------------------------------------------------------------------------- WHMCS stores a colour per ticket status in tblticketstatuses and writes it as an inline style: Answered. Three of the configured colours were chosen for a light page and are effectively invisible here - contrast against the #0e0e24 card: Answered #000000 1.06 : 1 (invisible) On Hold #224488 1.54 : 1 In Progress #cc0000 2.03 : 1 Open (#779500), Closed (#888888) and Customer-Reply (#ff6600) are fine at 4.5-6:1 and are deliberately left alone. The colours are NOT changed in the database, because the same values are used in the admin area, which has a light background - lightening them there would just move the problem. Matching the inline style keeps this to the client area, which is all this stylesheet covers. !important is needed because an inline style cannot be beaten any other way. Each replacement keeps the original hue and only raises the lightness. */ body [style*="color:#000000"], body [style*="color: #000000"], body [style*="color:#000"], body [style*="color: #000"] { color: #dfe6ef !important; } body [style*="color:#224488"], body [style*="color: #224488"] { color: #6f9bea !important; } body [style*="color:#cc0000"], body [style*="color: #cc0000"] { color: #ff6b6b !important; } /* .posted-by again: theme.min.css targets it as ".view-ticket .posted-by", two classes, which outranks the "body .posted-by" written earlier. */ body .view-ticket .posted-by { background-color: rgba(255, 255, 255, .05); color: #cbd5e1; border-color: rgba(255, 255, 255, .12); } body .view-ticket .posted-by a, body .view-ticket .posted-by strong { color: #e5e7eb; } /* ============================================================ SNVFOOTER — client-area footer rebuilt to match snvhost.com The markup lives in templates/hostflow/footer.tpl. Rules are scoped to #footer.snv-footer so nothing else on the page is touched, and carry !important only where theme.min.css or custom.css already set the same property. Breakpoints mirror the main site: 4 columns, 2 at <=992px, 1 at <=768px. ============================================================ */ #footer.snv-footer { background-color: #02020a !important; border-top: 1px solid var(--snv-border-soft, rgba(255,255,255,0.06)) !important; padding: 80px 0 40px !important; text-align: center; font-family: var(--font-body, 'Inter', sans-serif); } #footer.snv-footer .snv-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; justify-items: center; } #footer.snv-footer .snv-footer-brand, #footer.snv-footer .snv-footer-col { display: flex; flex-direction: column; align-items: center; max-width: 340px; width: 100%; } /* ---- brand lockup: icon left, wordmark right, same as the site ---- */ #footer.snv-footer .snv-brand { display: inline-flex; align-items: center; justify-content: center; gap: 12px; line-height: 1; text-decoration: none !important; } #footer.snv-footer .snv-brand-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(145deg, rgba(0,243,255,0.10), rgba(189,0,255,0.10)); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 0 18px rgba(0,243,255,0.15), inset 0 1px 0 rgba(255,255,255,0.08); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } #footer.snv-footer .snv-brand-mark img { width: 32px; height: 32px; display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55)); } #footer.snv-footer .snv-logo-text { font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 1.3rem; font-weight: 800; color: #ffffff !important; letter-spacing: -0.3px; } #footer.snv-footer .snv-logo-accent { background: linear-gradient(100deg, #00f3ff 0%, #7fd8ff 42%, #bd00ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* older engines that cannot clip a gradient to text fall back to flat cyan */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { #footer.snv-footer .snv-logo-accent { background: none; -webkit-text-fill-color: currentColor; color: #00f3ff; } } #footer.snv-footer .snv-brand:hover .snv-brand-mark { transform: translateY(-1px); border-color: rgba(0,243,255,0.45); box-shadow: 0 0 26px rgba(0,243,255,0.32), inset 0 1px 0 rgba(255,255,255,0.12); } #footer.snv-footer .snv-footer-brand p { color: var(--snv-muted, #94a3b8); margin: 20px auto 0; font-size: 0.9rem; line-height: 1.7; max-width: 340px; } #footer.snv-footer .snv-footer-contact { list-style: none; padding: 0; margin: 14px 0; font-size: 0.88rem; line-height: 1.9; color: var(--snv-muted, #94a3b8); } #footer.snv-footer .snv-footer-contact i { width: 18px; color: var(--snv-muted, #94a3b8); } #footer.snv-footer .snv-social { margin-top: 6px; } #footer.snv-footer .snv-telegram { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 50px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--snv-muted, #94a3b8) !important; font-size: 0.95rem; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #footer.snv-footer .snv-telegram i { font-size: 1.3rem; color: #0088cc; transition: transform 0.3s ease; } #footer.snv-footer .snv-telegram:hover { background: linear-gradient(135deg, rgba(0, 136, 204, 0.2), rgba(0, 136, 204, 0.1)); border-color: #0088cc; color: #fff !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); } #footer.snv-footer .snv-telegram:hover i { transform: scale(1.1); color: #fff; } /* ---- link columns ---- */ #footer.snv-footer .snv-footer-col h4 { font-family: var(--font-heading, 'Outfit', sans-serif); color: #ffffff !important; font-size: 1.05rem; font-weight: 600; margin: 0 0 24px; } #footer.snv-footer .snv-footer-col ul { list-style: none; padding: 0; margin: 0; } #footer.snv-footer .snv-footer-col ul li { margin-bottom: 12px; } #footer.snv-footer .snv-footer-col ul li a, #footer.snv-footer .snv-footer-contact a { color: var(--snv-muted, #94a3b8) !important; font-size: 0.9rem; text-decoration: none !important; } #footer.snv-footer .snv-footer-col ul li a:hover, #footer.snv-footer .snv-footer-contact a:hover { color: var(--snv-primary, #00f3ff) !important; } /* ---- bottom bar ---- */ #footer.snv-footer .snv-footer-bottom { padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; color: var(--snv-muted, #94a3b8); font-size: 0.85rem; text-align: center; } #footer.snv-footer .snv-copyright { margin: 0; } #footer.snv-footer .snv-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; } #footer.snv-footer .snv-legal a { color: var(--snv-muted, #94a3b8) !important; text-decoration: none !important; } #footer.snv-footer .snv-legal a:hover { color: var(--snv-primary, #00f3ff) !important; } /* social icons + language/currency switcher, kept from the stock footer */ #footer.snv-footer .snv-footer-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0; width: 100%; } #footer.snv-footer .snv-footer-tools .btn { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 50px !important; color: var(--snv-muted, #94a3b8) !important; font-size: 0.82rem; padding: 7px 16px !important; box-shadow: none !important; } #footer.snv-footer .snv-footer-tools .btn:hover { border-color: rgba(0, 243, 255, 0.40) !important; color: #ffffff !important; } #footer.snv-footer .snv-footer-tools .btn-icon { padding: 7px 12px !important; } @media (max-width: 992px) { #footer.snv-footer .snv-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 768px) { #footer.snv-footer { padding: 56px 0 32px !important; } #footer.snv-footer .snv-footer-grid { grid-template-columns: 1fr; gap: 34px; margin-bottom: 40px; } #footer.snv-footer .snv-footer-bottom { flex-direction: column; gap: 16px; padding-top: 30px; } } @media (max-width: 400px) { #footer.snv-footer .snv-footer-brand p, #footer.snv-footer .snv-footer-contact { font-size: 0.85rem; } #footer.snv-footer .snv-telegram { font-size: 0.88rem; padding: 9px 16px; } #footer.snv-footer .snv-logo-text { font-size: 1.18rem; } } @media (prefers-reduced-motion: reduce) { #footer.snv-footer .snv-brand-mark, #footer.snv-footer .snv-brand:hover .snv-brand-mark, #footer.snv-footer .snv-telegram, #footer.snv-footer .snv-telegram:hover { transition: none; transform: none; } } /* ============================================================ SNVTGWIDGET — floating Telegram button, same as snvhost.com z-index sits below Bootstrap's modal layer (1040/1050) so the language and ajax modals still cover it; the main site has no modals and uses 9999. The icon scales on hover rather than the whole button, so the label does not move as it fades in. ============================================================ */ .tg-widget { position: fixed; bottom: 30px; right: 30px; z-index: 1030; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0088cc 0%, #00aaff 100%); color: #ffffff !important; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 136, 204, 0.4), 0 0 15px rgba(0, 243, 255, 0.2); text-decoration: none !important; animation: tg-glow 2s ease-in-out infinite; } @keyframes tg-glow { 0%, 100% { box-shadow: 0 10px 30px rgba(0, 136, 204, 0.4), 0 0 10px rgba(0, 243, 255, 0.2); } 50% { box-shadow: 0 15px 40px rgba(0, 136, 204, 0.6), 0 0 25px rgba(0, 243, 255, 0.5); } } .tg-widget i { font-size: 1.6rem; color: #ffffff; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .tg-widget:hover { color: #ffffff !important; box-shadow: 0 15px 40px rgba(0, 136, 204, 0.6), 0 0 25px rgba(0, 243, 255, 0.5); animation: none; } .tg-widget:hover i { transform: scale(1.12); } .tg-widget .tg-label { position: absolute; right: 75px; padding: 8px 16px; border-radius: 8px; background: #ffffff; color: #0088cc; font-size: 0.9rem; white-space: nowrap; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateX(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s; pointer-events: none; } .tg-widget:hover .tg-label, .tg-widget:focus-visible .tg-label { opacity: 1; visibility: visible; transform: translateX(0); } .tg-widget:focus-visible { outline: 2px solid #00f3ff; outline-offset: 3px; } @media screen and (max-width: 768px) { .tg-widget { bottom: 20px; right: 20px; width: 50px; height: 50px; } .tg-widget i { font-size: 1.4rem; } .tg-widget .tg-label { display: none; } } @media (prefers-reduced-motion: reduce) { .tg-widget { animation: none !important; } .tg-widget i, .tg-widget:hover i { transition: none; transform: none; } }