@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@700;800&display=swap'); /* ========================================================================== Avalanche Host — WHMCS client area theme Child of twenty-one. This file is loaded by the parent's includes/head.tpl AFTER theme.min.css, so equal-specificity rules here win without !important. !important appears only where Bootstrap's own utilities use it, or where a later-loading stylesheet (the order form) would otherwise take precedence. Ported from avalanchehost.ca — assets/css/style.css. Token names are prefixed --ah- because Bootstrap 4 already owns --blue/--cyan/--primary in :root, and a bare redefinition here would be confusing to read later. ========================================================================== */ /* -------------------------------------------------------------------------- Tokens Two palettes. Dark is the default and the brand default — it is what avalanchehost.ca looks like. Light exists because the client area is a tool people use in daylight offices, and is opt-in per visitor. The theme is selected by data-theme on , written before first paint by the bootstrap script in includes/head.tpl. :root carries dark so that any context which never gets the attribute (print, a stripped page, JS off) still renders the brand. Structural tokens (radius, fonts, easing) are declared once and never re-declared per theme. -------------------------------------------------------------------------- */ :root { /* structure — theme-independent */ --ah-radius: 12px; --ah-radius-lg: 18px; --ah-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ah-font-display: 'Plus Jakarta Sans', 'Inter', sans-serif; --ah-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); /* Page shell. Bootstrap 4 caps .container at 1140px, a width drawn for 2013 laptops: on a 1440p or ultrawide monitor the client area used about a third of the glass while every table scrolled inside a narrow well. Capped rather than fluid. An uncapped container keeps stretching, and a ticket message set 200 characters to the line is harder to read, not easier — the win from extra width belongs to tables and side-by-side blocks, not to prose. */ --ah-page-max: 1560px; --ah-page-gutter: 28px; /* The vertical step between stacked blocks in the content column. Declared as a token because it is set on six different selectors and the wide breakpoint needs to move all of them together. */ --ah-stack: 20px; /* brand accents — identical in both themes, they are the brand */ --ah-blue: #0082ff; --ah-blue-hover: #339cff; --ah-blue-tint: rgba(0, 130, 255, 0.14); --ah-cyan: #52aaff; --ah-ice: #7dd3fc; --ah-success: #34d399; --ah-warning: #f59e0b; --ah-danger: #f0616d; /* Text on a filled brand/state background. White in both themes because the fill is the same colour in both. */ --ah-on-accent: #ffffff; /* Status tint fills. Left as low-alpha overlays rather than solid colours precisely so one value reads correctly on a near-black surface and on white — only the paired foreground below needs to change per theme. */ --ah-tint-info: rgba(0, 130, 255, 0.14); --ah-tint-success: rgba(52, 211, 153, 0.15); --ah-tint-warn: rgba(245, 158, 11, 0.16); --ah-tint-danger: rgba(240, 97, 109, 0.14); --ah-tint-purple: rgba(167, 139, 250, 0.18); } /* ---------- Dark (default) ---------- */ :root, :root[data-theme="dark"] { --ah-bg: #0b1120; --ah-bg-soft: #121a2e; --ah-surface: #161f36; --ah-surface-2: #1d2942; --ah-navy: #101a30; --ah-navy-deep: #0d1526; --ah-ink: #f2f6fc; --ah-body: #b0bdcf; --ah-muted: #8fa0b6; --ah-line: rgba(255, 255, 255, 0.10); --ah-line-soft: rgba(255, 255, 255, 0.07); --ah-line-strong: rgba(255, 255, 255, 0.24); --ah-line-hover: rgba(255, 255, 255, 0.40); /* Subtle surface lift for card headers and table heads. */ --ah-raise: rgba(255, 255, 255, 0.03); --ah-raise-soft: rgba(255, 255, 255, 0.02); --ah-raise-strong: rgba(255, 255, 255, 0.06); --ah-sunken: rgba(0, 0, 0, 0.18); /* Foregrounds paired with the tint fills above. */ --ah-fg-info: #cfe6ff; --ah-fg-success: #a7f3d0; --ah-fg-warn: #fbd38d; --ah-fg-danger: #fecdd3; --ah-fg-purple: #ddd6fe; --ah-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3); --ah-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 20px 48px rgba(0, 0, 0, 0.35); /* Translucent so the backdrop-filter blur has something to work with. */ --ah-header-bg: rgba(11, 17, 32, 0.85); --ah-overlay-bg: rgba(11, 17, 32, 0.9); /* Avatar initials — pale, for a low-alpha fill over a near-black card. */ --ah-av-0: #bfdcff; --ah-av-1: #a7f3d0; --ah-av-2: #ddd6fe; --ah-av-3: #fde3b0; --ah-av-4: #fbcfe8; --ah-av-5: #bae6fd; --ah-av-6: #99f6e4; --ah-av-7: #fecaca; } /* ---------- Light ---------- */ :root[data-theme="light"] { --ah-bg: #f4f7fb; --ah-bg-soft: #eaf0f7; --ah-surface: #ffffff; --ah-surface-2: #eef3f9; --ah-navy: #eaf0f7; --ah-navy-deep: #ffffff; --ah-ink: #0b1120; --ah-body: #3d4d63; /* Not #64748b: that clears AA against pure white but the page sits on --ah-bg (#f4f7fb), where it drops to 4.43:1 and takes the table headers, DataTables' "showing 1 to 4 of 4" and every section label with it. */ --ah-muted: #5a6878; --ah-line: rgba(11, 17, 32, 0.12); --ah-line-soft: rgba(11, 17, 32, 0.07); --ah-line-strong: rgba(11, 17, 32, 0.20); --ah-line-hover: rgba(11, 17, 32, 0.38); --ah-raise: rgba(11, 17, 32, 0.025); --ah-raise-soft: rgba(11, 17, 32, 0.015); --ah-raise-strong: rgba(11, 17, 32, 0.05); --ah-sunken: rgba(11, 17, 32, 0.04); /* Darkened so each still clears AA against its own tint on white. */ --ah-fg-info: #0a4a8f; --ah-fg-success: #065f46; --ah-fg-warn: #92400e; --ah-fg-danger: #9f1239; --ah-fg-purple: #5b21b6; --ah-shadow-sm: 0 1px 2px rgba(11, 17, 32, 0.06), 0 2px 8px rgba(11, 17, 32, 0.05); --ah-shadow-md: 0 6px 18px rgba(11, 17, 32, 0.10), 0 16px 40px rgba(11, 17, 32, 0.08); /* On a light page a hairline cyan link is too pale; darken to the same family without changing the brand blue itself. */ --ah-cyan: #0069d1; --ah-ice: #0a4a8f; --ah-header-bg: rgba(255, 255, 255, 0.85); --ah-overlay-bg: rgba(244, 247, 251, 0.92); /* Saturated, for the same low-alpha fill over a white card. */ --ah-av-0: #0a4a8f; --ah-av-1: #065f46; --ah-av-2: #5b21b6; --ah-av-3: #92400e; --ah-av-4: #9d174d; --ah-av-5: #075985; --ah-av-6: #115e59; --ah-av-7: #991b1b; } /* White snow on a white page is nothing but wasted paint. */ :root[data-theme="light"] body::before, :root[data-theme="light"] body::after { display: none; } /* Colour transitions on the toggle, but never on first paint and never for people who asked for less motion. */ @media (prefers-reduced-motion: no-preference) { :root.ah-theme-ready body, :root.ah-theme-ready .card, :root.ah-theme-ready header.header, :root.ah-theme-ready footer.footer, :root.ah-theme-ready .table-list > tbody > tr > td { transition: background-color 0.2s var(--ah-ease-out), color 0.2s var(--ah-ease-out), border-color 0.2s var(--ah-ease-out); } } /* -------------------------------------------------------------------------- 1. Base -------------------------------------------------------------------------- */ body, body.primary-bg-color { background-color: var(--ah-bg); color: var(--ah-body); font-family: var(--ah-font); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ah-ink); font-family: var(--ah-font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; } /* WHMCS leans on /.small for metadata under headings; keep it legible. */ small, .small { color: var(--ah-muted); } a { color: var(--ah-cyan); } a:hover, a:focus { color: var(--ah-ice); text-decoration: none; } hr { border-top-color: var(--ah-line); } code, kbd, pre, samp { font-family: ui-monospace, Consolas, monospace; } code { background: var(--ah-surface-2); border: 1px solid var(--ah-line); border-radius: 6px; color: var(--ah-ice); padding: 2px 6px; } pre { background: var(--ah-navy-deep); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); color: var(--ah-body); padding: 16px 18px; } blockquote, .blockquote { border-left: 3px solid var(--ah-blue); color: var(--ah-muted); padding-left: 16px; } /* Match the marketing site's focus ring. WHMCS ships a lot of keyboard-driven forms, so this must be visible on every focusable control, not just links. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(79, 209, 255, 0.65); outline-offset: 2px; } ::selection { background: var(--ah-blue); color: #fff; } /* Scrollbars, so the chrome around dark content isn't a bright strip. */ * { scrollbar-color: var(--ah-surface-2) var(--ah-bg); scrollbar-width: thin; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--ah-bg); } ::-webkit-scrollbar-thumb { background: var(--ah-surface-2); border: 2px solid var(--ah-bg); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #2b3a5c; } /* -------------------------------------------------------------------------- 2. Ambient snowfall Two fixed parallax layers built from radial-gradient dots — no JS, no DOM. Sits at z-index 0; the page chrome below is lifted to 1 so it stays behind everything without needing a wrapper element the parent theme doesn't emit. -------------------------------------------------------------------------- */ body::before, body::after { content: ''; position: fixed; left: 0; right: 0; top: -100vh; height: 200vh; pointer-events: none; z-index: 0; } body::before { background-image: radial-gradient(2.5px 2.5px at 12% 14%, rgba(255, 255, 255, 0.75), transparent 60%), radial-gradient(2px 2px at 63% 33%, rgba(226, 240, 255, 0.65), transparent 60%), radial-gradient(3px 3px at 84% 68%, rgba(255, 255, 255, 0.60), transparent 60%), radial-gradient(2px 2px at 34% 82%, rgba(226, 240, 255, 0.55), transparent 60%); background-size: 520px 520px; } /* Far layer: smaller, dimmer, slower — the depth cue does the work, so it is deliberately not blurred (a sub-pixel blur on a fixed layer costs a compositor pass and buys nothing you can see). */ body::after { background-image: radial-gradient(1.5px 1.5px at 27% 22%, rgba(255, 255, 255, 0.40), transparent 60%), radial-gradient(1.5px 1.5px at 71% 58%, rgba(200, 226, 255, 0.35), transparent 60%), radial-gradient(1px 1px at 45% 91%, rgba(255, 255, 255, 0.30), transparent 60%); background-size: 310px 310px; } @media (prefers-reduced-motion: no-preference) { body::before { animation: ah-snow 26s linear infinite; } body::after { animation: ah-snow 44s linear infinite; } @keyframes ah-snow { from { transform: translateY(0); } to { transform: translateY(520px); } } } /* Phones get no snow: it is the first thing worth cutting on a small screen, and a fixed animated layer is the expensive one on mobile GPUs. */ @media (max-width: 767.98px) { body::before, body::after { display: none; } } /* Lift the page chrome above the fixed snow layer at z-index 0. Deliberately does NOT include .modal, .modal-backdrop or #fullpage-overlay. Those are position:fixed with z-index 1000-1050 in Bootstrap and are already far above the snow — and forcing them to position:relative drops them into the document flow, so modals render as a panel at the bottom of the page instead of a centred overlay and the loading overlay stops covering anything. */ header.header, .master-breadcrumb, section#main-body, footer.footer { position: relative; z-index: 1; } /* The header has to outrank the content, not merely the snow. Giving every band the same z-index means the later one in the DOM wins, so the page content painted over the header — and the nav dropdowns ("More", "Hello, Kolton!") opened *behind* the dashboard tiles and the order summary. A stacking context that only lifts things off the background is not enough once anything in the header overflows it. */ header.header { z-index: 30; } .master-breadcrumb { z-index: 2; } /* -------------------------------------------------------------------------- 3. Header -------------------------------------------------------------------------- */ header.header { background-color: var(--ah-header-bg); background-image: radial-gradient(700px 380px at 80% -60%, rgba(79, 209, 255, 0.12), transparent 60%), radial-gradient(600px 340px at 10% 160%, rgba(59, 130, 246, 0.14), transparent 55%); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ah-line); } header.header .topbar { background-color: var(--ah-navy-deep); border-bottom: 1px solid var(--ah-line-soft); color: var(--ah-muted); } header.header .topbar .btn, header.header .topbar .active-client .btn, header.header .topbar .active-client .input-group-text { color: var(--ah-muted); } header.header .topbar .btn:hover { color: var(--ah-ink); } header.header .topbar .active-client .btn.btn-active-client span { border-bottom-color: var(--ah-line-strong); color: var(--ah-body); } header.header .logo-img { max-height: 46px; } header.header .navbar a, header.header .navbar-nav a { color: var(--ah-body); } header.header .navbar a:hover { color: var(--ah-ink); } header.header .navbar-brand { color: var(--ah-ink); font-family: var(--ah-font-display); font-weight: 800; letter-spacing: -0.02em; } /* Header search — the parent's light-gray border disappears on a dark bar. */ header.header .search { background: var(--ah-surface); border: 1px solid var(--ah-line-strong); border-radius: 10px; } header.header .search .form-control { background: transparent; color: var(--ah-ink); } header.header .search .form-control::placeholder { color: var(--ah-muted); } header.header .search .btn { color: var(--ah-muted); } header.header .search:focus-within { border-color: var(--ah-cyan); box-shadow: 0 0 0 3px rgba(79, 209, 255, 0.18); } /* Cart / hamburger pills in the top bar. */ header.header .toolbar .nav-link { background: var(--ah-surface); border: 1px solid var(--ah-line-strong); border-radius: 10px; color: var(--ah-body); } header.header .toolbar .nav-link:hover { background: var(--ah-surface-2); border-color: var(--ah-line-hover); color: var(--ah-ink); } header.header .toolbar .nav-link .badge-info { background-color: var(--ah-blue); color: #fff; } header.header .main-navbar-wrapper { background: rgba(18, 26, 46, 0.6); border-top: 1px solid var(--ah-line-soft); } /* Main nav items get the marketing site's pill-hover treatment. */ header.header .main-navbar-wrapper .navbar-nav > li > a { border-radius: 999px; font-weight: 500; padding: 8px 12px; transition: color 0.15s ease, background 0.15s ease; } header.header .main-navbar-wrapper .navbar-nav > li > a:hover { background: var(--ah-surface); color: var(--ah-ink); } header.header .main-navbar-wrapper .navbar-nav > li.active > a { color: var(--ah-ink); font-weight: 600; } /* -------------------------------------------------------------------------- 4. Dropdowns -------------------------------------------------------------------------- */ .dropdown-menu { background-color: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); box-shadow: var(--ah-shadow-md); color: var(--ah-body); padding: 8px; } .dropdown-item, .dropdown-menu > li > a { border-radius: 8px; color: var(--ah-body); } .dropdown-item:hover, .dropdown-item:focus, .dropdown-menu > li > a:hover { background-color: var(--ah-surface-2); color: var(--ah-ink); } header.header .dropdown-item.active, header.header .dropdown-item:active, .dropdown-item.active, .dropdown-item:active { background-color: var(--ah-blue); color: #fff; } .dropdown-divider { border-top-color: var(--ah-line); } .dropdown-header { color: var(--ah-muted); } /* -------------------------------------------------------------------------- 5. Breadcrumb -------------------------------------------------------------------------- */ .master-breadcrumb { background-color: var(--ah-bg-soft); border-bottom: 1px solid var(--ah-line); } .breadcrumb { background-color: transparent; color: var(--ah-muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--ah-muted); } .breadcrumb-item.active { color: var(--ah-body); } .breadcrumb a { color: var(--ah-cyan); } /* -------------------------------------------------------------------------- 6. Page shell, main body, cards, panels -------------------------------------------------------------------------- */ /* One width for every band. The header, breadcrumb, content, footer and the order form all sit on Bootstrap's .container, so the page width is widened in exactly one place — a wider content column under a 1140px header bar would read as a broken page rather than a wide one. Bootstrap declares its max-widths inside breakpoint media queries at (0,1,0). These rules have the same shape and come later in the cascade, so they win without !important. The min() keeps a real gutter on the viewports just past the cap, where the container would otherwise touch both edges. */ @media (min-width: 1200px) { .container { max-width: min(var(--ah-page-max), calc(100% - var(--ah-page-gutter) * 2)); } } /* Past the cap the sidebar is a navigation column, not a proportional one: at Bootstrap's 25% of 1560px it becomes a 390px strip of mostly empty card while the table beside it gives up width it can actually use. Fixing the sidebar hands every pixel of further growth to the content. The id is in the selector because Bootstrap's `.col-lg-3` (0,1,0) lives in its own media query, and a plain class rule here could not outrank it. If Twenty-One ever changes that wrapper the selector simply stops matching and the stock columns stand — the failure mode is "no change", not a broken layout. */ @media (min-width: 1400px) { #main-body .row > .sidebar { flex: 0 0 300px; max-width: 300px; } #main-body .row > .primary-content { flex: 1 1 0%; max-width: none; } } section#main-body { background-color: transparent; padding-bottom: 64px; padding-top: 32px; } /* A wider page needs deeper breathing room, or the extra width just reads as the same crowded layout with more air beside it. This block sits after the base rule on purpose: `section#main-body` is (1,0,1) in both, so a media query alone would not have beaten it — only source order does. */ @media (min-width: 1200px) { :root { --ah-stack: 24px; } section#main-body { padding-bottom: 80px; padding-top: 40px; } } /* One vertical rhythm for the whole content column. The parent spaces stacked cards 10px apart, which reads as crowded next to the 20-24px gutters used inside them and by the grids this theme adds. Every sibling block in .primary-content now sits on the same step. */ .primary-content .card, .primary-content .table-container, .primary-content .ah-dash, .primary-content .ah-stat-row, .primary-content .mc-promo-manage, .primary-content .mc-promo-login { margin-bottom: var(--ah-stack); } .card, .mc-promo-manage, .mc-promo-login { background-color: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius-lg); box-shadow: var(--ah-shadow-sm); color: var(--ah-body); } .card-header { background-color: var(--ah-raise-soft); border-bottom: 1px solid var(--ah-line); color: var(--ah-ink); } /* The dashboard's home panels ("Your Active Products/Services", "Recent Support Tickets", "Register a New Domain", "Recent News"). The parent sets `.client-home-cards .card-header { background-color: #fff }` at (0,2,0); a bare `.card-header` (0,1,0) loses to it, so every panel header on the dashboard rendered as a white bar with near-white text on it. */ .client-home-cards .card-header { background-color: var(--ah-raise); border-bottom: 1px solid var(--ah-line); color: var(--ah-ink); } .client-home-cards .card-title { color: var(--ah-ink); } /* The parent forces white on these so they read against its own coloured accent header; against this theme's header they need button treatment. */ .client-home-cards .card-header .btn { background: var(--ah-surface-2); border: 1px solid var(--ah-line-strong) !important; color: var(--ah-body) !important; } .client-home-cards .card-header .btn:hover { background: var(--ah-blue); border-color: var(--ah-blue) !important; color: #fff !important; } /* .card-accent-* is a 3px top border in the parent — keep it, it is the only thing separating one dashboard panel from the next — but remap Bootstrap's palette onto brand colours. */ .client-home-cards .card-accent-blue, .client-home-cards .card-accent-turquoise, .client-home-cards .card-accent-teal { border-top-color: var(--ah-blue); } .client-home-cards .card-accent-green, .client-home-cards .card-accent-emerald, .client-home-cards .card-accent-lime { border-top-color: var(--ah-success); } .client-home-cards .card-accent-gold, .client-home-cards .card-accent-orange, .client-home-cards .card-accent-sun-flower { border-top-color: var(--ah-warning); } .client-home-cards .card-accent-red, .client-home-cards .card-accent-pomegranate { border-top-color: var(--ah-danger); } .client-home-cards .card-accent-purple, .client-home-cards .card-accent-amethyst, .client-home-cards .card-accent-magenta, .client-home-cards .card-accent-pink { border-top-color: #a78bfa; } .card-footer { background-color: var(--ah-sunken); border-top: 1px solid var(--ah-line); color: var(--ah-body); } .card-title, .primary-content .card-title { color: var(--ah-ink); font-family: var(--ah-font-display); letter-spacing: -0.02em; } .card-text, .card-body { color: var(--ah-body); } /* No `.card a` colour rule here on purpose. The parent theme has none to beat, and any descendant rule of that shape (0,2,x) silently outranks the component rules for everything WHMCS nests inside a card — pagination, sidebar menu entries, tabs. Plain content links are already handled by the bare `a` selector above, which is specific enough to colour prose and weak enough to lose to every component. */ /* Homepage product-group tiles and the "how can we help" icon row lift on hover the same way .card does on the marketing site. */ .card-columns.home .card, .action-icon-btns a { transition: border-color 0.22s var(--ah-ease-out), box-shadow 0.22s var(--ah-ease-out), transform 0.22s var(--ah-ease-out); } .card-columns.home .card:hover { border-color: var(--ah-line-strong); box-shadow: var(--ah-shadow-md); transform: translateY(-3px); } .action-icon-btns a { background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-radius-lg); color: var(--ah-body); display: block; padding: 24px 12px; text-align: center; } .action-icon-btns a:hover { border-color: var(--ah-line-strong); box-shadow: var(--ah-shadow-md); color: var(--ah-ink); transform: translateY(-3px); } .action-icon-btns .ico-container { align-items: center; background: var(--ah-blue-tint); border: 1px solid rgba(79, 209, 255, 0.3); border-radius: 14px; color: var(--ah-cyan); display: flex; height: 56px; justify-content: center; margin: 0 auto 14px; width: 56px; } .action-icon-btns .ico-container i { color: var(--ah-cyan); font-size: 1.5rem; } /* Domain search band on the homepage — mirrors .page-hero. */ .home-domain-search { background-color: var(--ah-navy); background-image: radial-gradient(700px 380px at 80% -20%, rgba(79, 209, 255, 0.12), transparent 60%), radial-gradient(600px 340px at 10% 120%, rgba(59, 130, 246, 0.16), transparent 55%); border-bottom: 1px solid var(--ah-line); position: relative; z-index: 1; } .home-domain-search h2 { color: #fff; } /* The wrapper is the white sheet the whole search sits on. */ .home-domain-search .input-group-wrapper { background-color: var(--ah-navy-deep); border-color: var(--ah-line-strong); border-radius: var(--ah-radius); } .home-domain-search .input-group-wrapper .form-control { background: var(--ah-navy-deep); border: 1px solid var(--ah-line-strong); color: var(--ah-ink); } .home-domain-search .input-group-wrapper .form-control:focus { border-color: var(--ah-cyan); box-shadow: 0 0 0 3px rgba(79, 209, 255, 0.18); } /* The AI/advanced search swaps the input for a bare