/* ***************************************************** ** Custom Stylesheet ** Any custom styling you want to apply should be defined here. ***************************************************** */ /* NXRagons — Hostragons branded client area theme (Nexus 9 based). * * Branding is applied through Nexus CSS custom properties (the official * customization point). The brand purple (#761098) is wired into --primary * and its ramp; the SPA cart derives its --vl-* tokens from these, so the * whole client area + order form stay on-brand without recompiling SASS. * * Font: the main site loads "Inter" (ff-1.css, injected site-wide by the * hg_unify hook). We reuse that face here and DO NOT re-load the Google Font * to avoid a duplicate network request. */ :root { --white: #fff; /* Neutral shades */ --neutral-50: #fbf9fa; --neutral-100: #f4f5f7; --neutral-200: #e4e4e7; --neutral-300: #d0d5dd; --neutral-400: #9ca3af; --neutral-500: #6b7280; --neutral-600: #4b5563; --neutral-700: #374151; --neutral-800: #1f2937; --neutral-900: #111827; --neutral-950: #030712; /* Brand purple ramp (Hostragons identity, base #761098) */ --primary-50: #faf5fe; --primary-100: #f4e9fd; /* site --bs-primary-bg-subtle */ --primary-200: #e9d5fb; --primary-300: #ddbdf7; /* site --bs-primary-border-subtle */ --primary-400: #c98fec; --primary-500: #a23fc9; --primary-600: #8a1ca8; --primary-700: #761098; /* brand primary */ --primary-800: #5a0c78; /* brand hover / text-emphasis */ --primary-900: #4e0a66; --primary-950: #2f063d; /* Primary colors — Hostragons brand purple */ --primary: #761098; /* brand primary */ --primary-lifted: #5a0c78; /* hover */ --primary-accented: #4e0a66; /* active / deepest */ /* Secondary colors */ --secondary: var(--neutral-500); --secondary-lifted: var(--neutral-600); --secondary-accented: var(--neutral-700); /* Success colors */ --success: #00a63e; --success-lifted: #008236; --success-accented: #016630; /* Info colors */ --info: #155dfc; --info-lifted: #1447e6; --info-accented: #193cb8; /* Notice colors */ --notice: #7f22fe; --notice-lifted: #7008e7; --notice-accented: #5d0ec0; /* Warning colors */ --warning: #f54a00; --warning-lifted: #ca3500; --warning-accented: #9f2d00; /* Error colors */ --error: #e7000b; --error-lifted: #c10007; --error-accented: #9f0712; /* Grayscale colors */ --grayscale: var(--neutral-900); --grayscale-lifted: var(--neutral-800); --grayscale-accented: var(--neutral-700); /* Neutral colors */ --neutral: var(--neutral-500); --neutral-lifted: var(--neutral-600); --neutral-accented: var(--neutral-700); /* Text neutral colors */ --text-inverted: var(--white); --text-muted: var(--neutral-400); --text-lifted: var(--neutral-500); --text-accented: var(--neutral-600); --text: var(--neutral-900); /* Border neutral colors */ --border-muted: var(--neutral-200); --border: var(--neutral-300); --border-lifted: var(--neutral-400); --border-accented: var(--neutral-600); /* Background neutral colors */ --bg: var(--white); --bg-muted: var(--neutral-50); --bg-lifted: var(--neutral-100); --bg-accented: var(--neutral-200); --bg-inverted: var(--neutral-900); /* Additional colors */ --yellow-200: #fff085; --yellow-300: #ffdf20; --teal-300: #46edd5; --teal-400: #00d5be; --emerald-300: #5ee9b5; --pink-400: #fb64b6; /* Additional custom properties */ /* Font sizes */ --text-xs: 0.625rem; --text-sm: 0.75rem; --text-md: 0.875rem; --text-lg: 1rem; /* Spacing */ --outline-sm: 1px; --outline-md: 2px; --outline-lg: 3px; /* Rounding — softer radii to match the main site's rounded cards/panels */ --rounding-sm: 0.375rem; --rounding-md: 0.625rem; --rounding-lg: 1rem; /* Other */ --letter-spacing: 0em; --disabled-opacity: 25%; } /* ===================================================================== * NXRagons brand layer — applied on top of the Nexus variable theme. * Brand: #761098 (primary) / #bf0b90 (accent) / #5a0c78 (hover). * Scoped to safe, generic surfaces; no stock Nexus file is modified. * ===================================================================== */ /* Brand accent + gradient tokens reused below */ :root { --hg-accent: #bf0b90; --hg-gradient: linear-gradient(90deg, #761098 0%, #bf0b90 100%); } /* Font: reuse the site's Inter face (already loaded by the hook) */ body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Links pick up the brand purple */ a { color: var(--primary); } a:hover, a:focus { color: var(--primary-lifted); } /* Primary buttons — brand gradient with a clear hover/active state */ .btn-primary { background-image: var(--hg-gradient); background-color: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover, .btn-primary:focus { background-image: none; background-color: var(--primary-lifted); border-color: var(--primary-lifted); color: #fff; } .btn-primary:active, .btn-primary.active { background-image: none; background-color: var(--primary-accented); border-color: var(--primary-accented); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--primary); border-color: var(--primary); color: #fff; } /* Header / navbar — light, site-matching surface (main site uses a white * header on a #0f172a/.08 hairline border). Active/hover nav links go purple. */ .header { background-color: #fff; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .header .navbar-nav .nav-link:hover, .header .navbar-nav .nav-link:focus, .header .navbar-nav .nav-item.active > .nav-link { color: var(--primary); } .header .cart-btn .badge { background-color: var(--primary); color: #fff; } /* Cards / panels — brand-consistent radius and a soft shadow */ .card { border-radius: var(--rounding-lg); border-color: var(--border-muted); } .card-header { border-top-left-radius: var(--rounding-lg); border-top-right-radius: var(--rounding-lg); } /* Auth surfaces (login / register / client area) — accent the headings, * focus rings and primary CTAs so these high-traffic pages feel on-brand. */ .form-control:focus, .custom-select:focus { border-color: var(--primary-300); box-shadow: 0 0 0 0.2rem rgba(118, 16, 152, 0.18); } .text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } .border-primary { border-color: var(--primary) !important; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); border-color: var(--primary); } .page-link { color: var(--primary); } .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); } /* Support ticket reply staff signature (viewticket.tpl .hg-staff-sig). * Replaces the old unreadable "Name / Team / Role" text pile with a clean, * aligned signature row: a circular avatar (staff = brand-purple initials, * client = generic user glyph) + a column of name (bold) + a coloured LEVEL * badge (purple-toned, readable) + the team line. Staff/level strings are * injected per active language by hg_unify (hgStaffNames/hgStaffLevels); * names rotate per staff reply, levels are translated. */ .hg-staff-sig { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .hg-staff-sig__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-lifted) 100%); box-shadow: 0 1px 2px rgba(118, 16, 152, 0.25); } .hg-staff-sig__avatar--client { background: var(--neutral-200, #e5e7eb); color: var(--neutral-600, #4b5563); box-shadow: none; } .hg-staff-sig__meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .hg-staff-sig__name { font-weight: 700; color: var(--text); line-height: 1.2; } .hg-staff-sig__badge { align-self: flex-start; display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.01em; color: var(--primary-800, #5a0c78); background-color: var(--primary-100, #f4e9fd); border: 1px solid var(--primary-300, #ddbdf7); white-space: nowrap; } .hg-staff-sig__team { font-size: 0.78rem; color: var(--neutral-500, #6b7280); line-height: 1.2; } .ticket-reply.staff { border-left: 3px solid var(--primary); } /* RTL: avatar sits on the right, badge aligns to the right edge. */ html[dir="rtl"] .hg-staff-sig__badge { align-self: flex-end; } /* ===================================================================== * QA fixes — footer locale/currency widget, phone dial-code, footer nav. * ===================================================================== */ /* Footer language/currency button (footer.tpl): a .btn-outline-light pill that * shows a flag + " / ". The nxragons footer renders on a WHITE * surface (verified: effective footer bg = rgb(255,255,255)), so the stock * .btn-outline-light light-coloured text — and the earlier color:#fff override — * made the label near-invisible (white-on-white, only the flag/border showed). * Fix: give the label a dark neutral so it reads on the light footer, with a * brand-purple hover. The flag layout (flex row + gap) is kept so the flag and * label never collide. The [data-target] attribute selector (specificity 0,3,0) * outranks the stock .btn-outline-light class rule, so no !important is needed. */ footer.footer .btn-outline-light[data-target="#modalChooseLanguage"] { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); /* dark neutral — readable on the white footer */ border-color: var(--border); /* soft hairline border instead of light */ line-height: 1.2; white-space: nowrap; } footer.footer .btn-outline-light[data-target="#modalChooseLanguage"]:hover, footer.footer .btn-outline-light[data-target="#modalChooseLanguage"]:focus { color: var(--primary); /* brand purple on hover */ border-color: var(--primary); background-color: transparent; /* keep the light surface, only recolour */ } /* The flag wrapper carries no margin of its own; the parent gap handles spacing. * Keep the flag block from shrinking so the label can never sit on top of it. */ footer.footer .btn-outline-light[data-target="#modalChooseLanguage"] .iti-flag, footer.footer .btn-outline-light[data-target="#modalChooseLanguage"] .d-inline-block { flex: 0 0 auto; margin: 0; } /* Phone number field (clientregister.tpl): intl-tel-input in "separate dial * code" mode (.iti-sdc-N) renders a flag + "+44" dial-code box at the LEFT edge * of the input. The stock all.css DOES reserve the right padding-left per * digit-count (e.g. .allow-dropdown.iti-sdc-3 input -> 84px). The defect is * pure SPECIFICITY: the hook-injected whmcs-unify.css ships * #main-body .form-control { padding-left: .9rem } (specificity 1,1,0) * and after intl-tel-input init the tel input carries class "form-control" and * lives inside #main-body. An ID rule beats any number of classes, so the stock * 84px (specificity 0,4,1) AND the earlier class-only override here both lost, * leaving padding-left at .9rem (14.4px) — the "+44" (which ends ~80px from the * input's left edge) then overlapped the placeholder/typed value. * Fix: re-assert the reserved space with selectors that also start at #main-body * (specificity 1,4,2), which outrank the unify rule on their own — no !important. * Verified live: dial-code box ends ~80px in (LTR) and the flag container stays * on the LEFT even in RTL (intl-tel-input forces the input to dir:ltr), so the * space is reserved on the LEFT in every locale; no RTL flip is needed. */ #main-body .intl-tel-input.separate-dial-code input.form-control, #main-body .intl-tel-input.separate-dial-code input[type="tel"], #main-body .intl-tel-input.separate-dial-code input[type="text"] { padding-left: 84px; } #main-body .intl-tel-input.separate-dial-code.iti-sdc-2 input.form-control, #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input { padding-left: 76px; } #main-body .intl-tel-input.separate-dial-code.iti-sdc-3 input.form-control, #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input { padding-left: 84px; } #main-body .intl-tel-input.separate-dial-code.iti-sdc-4 input.form-control, #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input { padding-left: 92px; } #main-body .intl-tel-input.separate-dial-code.iti-sdc-5 input.form-control, #main-body .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input { padding-left: 100px; } /* Footer nav links (footer.tpl): "Contact Us" and "Terms" sit in a centered * .nav with no horizontal gap, so the two labels touch ("ContactTerms"). * Add breathing room between the inline nav items. */ footer.footer .nav .nav-item + .nav-item .nav-link { margin-left: 1rem; } html[dir="rtl"] footer.footer .nav .nav-item + .nav-item .nav-link { margin-left: 0; margin-right: 1rem; } /* Mobile bridge: the main-site header is position:fixed (~123px) on <=991px, * but whmcs-unify.css zeroes the body offset there (it predates the fixed * mobile header). Restore the offset for the panel so content is not hidden. */ @media (max-width: 991px) { /* html+body beats whmcs-unify.css's equal-importance zero rule (it loads later). */ html body.primary-bg-color { padding-top: 124px !important; } /* …except the standalone invoice page, which now also carries * body.primary-bg-color (for the brand background + Inter) but renders NO * fixed site header — so the 124px offset would leave a phantom top gap. * Detect it via its .invoice-container child and zero the offset back out. */ html body.primary-bg-color:has(.invoice-container) { padding-top: 0 !important; } } /* ===================================================================== * CILA — Polish tour 1. One brand design system, expressed through * --hg-* tokens. These rules are the SINGLE writer for panel polish. * * CASCADE NOTE: head.tpl loads custom.css BEFORE the hook injects the * site chrome (style.css / hostragons-brand.css) and whmcs-unify.css. * So to win against those later sheets at equal specificity we either * raise specificity (html body ...) or use !important. Stock Nexus and * the site dist files are NEVER edited — everything is overridden here. * ===================================================================== */ /* Brand tokens reused below (mirror whmcs-unify.css --hg-* so values stay * in one mental model even though that sheet loads after us). */ :root { --hg-primary: #761098; --hg-primary-dark: #5a0c78; --hg-magenta: #bf0b90; --hg-grad: linear-gradient(135deg, #761098 0%, #bf0b90 100%); --hg-line: rgba(15, 23, 42, 0.09); --hg-input-border: #e2e8f0; --hg-radius-ctl: 0.6rem; /* one control radius: buttons + inputs */ } /* --------------------------------------------------------------------- * 1) FONT — Inter everywhere. * The face itself is now loaded by the hg_unify hook (Google Fonts link, * same as the main site). ff-1.css still declares `--ff-1:"Inter",serif`; * harden that fallback chain to sans so a font-load failure degrades to a * sans-serif system font, never the serif the panel was falling back to. * We also assert Inter on body + headings + controls with high specificity * so it wins regardless of which framework styled the element. * ------------------------------------------------------------------- */ :root { /* Override ff-1.css's serif fallback (loads after us, but this is a * variable redefinition; ff-1 re-sets it, so we also force usages below). */ --ff-1: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html body, html body.primary-bg-color, html body .navbar, html body .header, html body .hg-header, html body input, html body select, html body textarea, html body button, html body .btn, html body .form-control, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } /* --------------------------------------------------------------------- * 2) INDIGO LEAK — Nexus / site BS5 default secondary is #5C65FF. * It surfaces on the mobile hamburger (.navbar-toggler -> var(--bs-secondary)) * and the top-bar tools link (.hg-tools__head-link.text-secondary). Repaint * both with brand purple. High specificity (html body ...) + !important beat * the later site sheets. * ------------------------------------------------------------------- */ html body .primary-header .navbar-toggler, html body .header .navbar-toggler, html body .hg-header .navbar-toggler, html body .navbar-toggler { background: var(--hg-grad) !important; background-color: var(--hg-primary) !important; border: 0 !important; border-radius: var(--hg-radius-ctl) !important; color: #fff !important; } html body .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(118, 16, 152, 0.25) !important; } /* Top utility-bar link ("text-secondary" indigo -> brand purple). */ html body .hg-tools__head-link, html body .hg-tools__head-link.text-secondary { color: var(--hg-primary) !important; } html body .hg-tools__head-link:hover, html body .hg-tools__head-link:focus { color: var(--hg-primary-dark) !important; } /* --------------------------------------------------------------------- * 3) AUTH LAYOUT — split-panel (brand left / form right), oweb-grade but * more polished. The auth pages render the .hg-auth-split wrapper inside * #main-body > .container > .row > .col-12.primary-content. We let the * split fill the viewport height and centre it so there is no dead void * above the footer. * * MARKUP (login.tpl / password-reset-container.tpl / clientregister.tpl): * .hg-auth-split * aside.hg-auth-brand (purple gradient panel: logo + copy + bullets) * .hg-auth-formwrap (white form card on the right) * * CASCADE: custom.css loads before the hook sheets; high specificity * (html body #main-body ...) keeps these winning without !important spam. * ------------------------------------------------------------------- */ html body #main-body:has(.hg-auth-split) { min-height: calc(100vh - 104px - 220px); display: flex; flex-direction: column; justify-content: center; padding-top: 1.5rem; padding-bottom: 2rem; } /* The split itself: two columns, equal-height, brand panel slightly narrower. * A single rounded shell with a soft, layered shadow so it reads as one * premium, lifted object floating over the page. */ html body #main-body .hg-auth-split { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); align-items: stretch; max-width: 980px; margin: 0 auto; width: 100%; background: #fff; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.14), 0 32px 64px -24px rgba(90, 12, 120, 0.28); border: 1px solid rgba(118, 16, 152, 0.08); } /* The register form is much taller — give it more room for the form column. */ html body #main-body .hg-auth-split.hg-auth-split--wide { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); max-width: 1080px; } /* ---- Brand panel ---- */ html body #main-body .hg-auth-brand { position: relative; /* Layered: two soft radial highlights over a rich diagonal brand gradient, * giving the flat purple real depth without any image asset. */ background: radial-gradient(120% 90% at 88% 8%, rgba(191, 11, 144, 0.55) 0%, rgba(191, 11, 144, 0) 55%), radial-gradient(90% 80% at 6% 100%, rgba(78, 10, 102, 0.65) 0%, rgba(78, 10, 102, 0) 60%), linear-gradient(150deg, #761098 0%, #8a1ca8 42%, #bf0b90 100%); color: #fff; padding: 3rem 2.5rem; display: flex; flex-direction: column; overflow: hidden; } /* Fine dotted texture overlay — subtle premium grain, masked to fade out. */ html body #main-body .hg-auth-brand::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 70%); mask-image: linear-gradient(160deg, #000 0%, transparent 70%); opacity: 0.7; pointer-events: none; } /* Large soft glow anchored bottom-right for a sense of light. */ html body #main-body .hg-auth-brand::after { content: ""; position: absolute; width: 360px; height: 360px; right: -130px; bottom: -150px; background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; } html body #main-body .hg-auth-brand__inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; } html body #main-body .hg-auth-brand__logo { display: flex; align-items: center; gap: 0.6rem; } html body #main-body .hg-auth-brand__logo img { height: 30px; width: auto; max-width: 170px; } /* Brand wordmark fallback text (shown beside / instead of the SVG). */ html body #main-body .hg-auth-brand__name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: #fff; } /* If the SVG loads we still keep the name as an a11y sibling but visually * the logo carries the wordmark, so hide the duplicate text label. */ html body #main-body .hg-auth-brand__logo img + .hg-auth-brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html body #main-body .hg-auth-brand__copy { margin-top: 2.75rem; } html body #main-body .hg-auth-brand__title { font-family: "Inter", system-ui, sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1.18; letter-spacing: -0.02em; color: #fff; margin: 0 0 0.65rem; text-wrap: balance; } html body #main-body .hg-auth-brand__subtitle { font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 36ch; } html body #main-body .hg-auth-brand__list { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; } html body #main-body .hg-auth-brand__list li { display: flex; align-items: center; gap: 0.8rem; font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.96); } /* Glassy circular icon pill in front of each benefit. */ html body #main-body .hg-auth-brand__ico { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); font-size: 0.9rem; color: #fff; } /* legacy fallback: if an still sits directly in the li (older cache) */ html body #main-body .hg-auth-brand__list li > i { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, 0.14); font-size: 0.9rem; color: #fff; } /* ---- Social-proof: stat chip + trust line, pinned near the panel base ---- */ html body #main-body .hg-auth-brand__proof { margin-top: auto; padding-top: 2rem; } html body #main-body .hg-auth-brand__stat { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); } html body #main-body .hg-auth-brand__stat-num { font-family: "Inter", system-ui, sans-serif; font-weight: 800; font-size: 1.25rem; line-height: 1; letter-spacing: -0.02em; color: #fff; } html body #main-body .hg-auth-brand__stat-num span { color: var(--hg-accent); -webkit-text-fill-color: #ffd1f0; color: #ffd1f0; } html body #main-body .hg-auth-brand__stat-label { font-size: 0.82rem; font-weight: 500; color: rgba(255, 255, 255, 0.88); text-transform: lowercase; } html body #main-body .hg-auth-brand__trust { margin: 0.85rem 0 0; font-size: 0.82rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); } /* Register brand panel adds a "already registered? -> login" footer link. */ html body #main-body .hg-auth-brand__footer { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); } html body #main-body .hg-auth-brand__link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 0.35rem; } html body #main-body .hg-auth-brand__link:hover { color: #fff; opacity: 0.85; } /* ---- Form column ---- */ html body #main-body .hg-auth-formwrap { display: flex; flex-direction: column; justify-content: center; padding: 3rem 3rem; background: #fff; } html body #main-body .hg-auth-formwrap--wide { padding: 2.5rem 2.5rem; } /* The inner .card chrome is now redundant — the split shell is the card. * Flatten the nested card so it does not draw a second border/shadow. */ html body #main-body .hg-auth-split .hg-auth-card, html body #main-body .hg-auth-split .login-form .card, html body #main-body .hg-auth-split #registration .card.hg-auth-card { border: 0; box-shadow: none; background: transparent; margin: 0; } html body #main-body .hg-auth-split .hg-auth-card > .card-body { padding: 0; } html body #main-body .hg-auth-split .hg-auth-card > .card-footer { background: transparent; border-top: 1px solid var(--hg-line); padding: 1.1rem 0 0; margin-top: 1.25rem; } html body #main-body .hg-auth-head { margin-bottom: 1.6rem; } html body #main-body .hg-auth-head--register { margin-bottom: 1.25rem; } html body #main-body .hg-auth-head .text-muted { font-size: 0.95rem; } /* Remember-me + forgot row */ html body #main-body .hg-auth-remember { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--neutral-600); cursor: pointer; user-select: none; } /* Custom checkbox so remember-me matches the brand instead of the OS default. */ html body #main-body .hg-auth-remember input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--hg-input-border); border-radius: 5px; background: #fff; position: relative; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; flex: 0 0 auto; } html body #main-body .hg-auth-remember input[type="checkbox"]:hover { border-color: var(--hg-primary); } html body #main-body .hg-auth-remember input[type="checkbox"]:checked { background: var(--hg-grad); border-color: var(--hg-primary); } html body #main-body .hg-auth-remember input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } html body #main-body .hg-auth-remember input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(118, 16, 152, 0.2); } html body #main-body .hg-auth-row { margin: 0.25rem 0 1.25rem; } html body #main-body .hg-auth-link { color: var(--hg-primary); font-weight: 600; } html body #main-body .hg-auth-link:hover { color: var(--hg-primary-dark); text-decoration: underline; } /* Full-width brand-gradient primary submit on auth pages. A faint sheen sweeps * across on hover and the trailing arrow nudges right for a tactile feel. */ html body #main-body .hg-auth-submit.btn-primary, html body #main-body input.hg-auth-submit.btn-primary { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; overflow: hidden; background: var(--hg-grad); background-color: var(--hg-primary); border: 0; color: #fff; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 8px 20px -8px rgba(118, 16, 152, 0.6); transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.18s ease; } /* Sheen sweep. */ html body #main-body .hg-auth-submit.btn-primary::before { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: skewX(-18deg); transition: left 0.55s ease; pointer-events: none; } html body #main-body .hg-auth-submit.btn-primary:hover, html body #main-body input.hg-auth-submit.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 12px 26px -8px rgba(118, 16, 152, 0.66); } html body #main-body .hg-auth-submit.btn-primary:hover::before { left: 130%; } html body #main-body .hg-auth-submit.btn-primary:active, html body #main-body input.hg-auth-submit.btn-primary:active { transform: translateY(1px); } html body #main-body .hg-auth-submit__arrow { font-size: 0.8rem; transition: transform 0.18s ease; } html body #main-body .hg-auth-submit.btn-primary:hover .hg-auth-submit__arrow { transform: translateX(3px); } html[dir="rtl"] body #main-body .hg-auth-submit__arrow { transform: scaleX(-1); } html[dir="rtl"] body #main-body .hg-auth-submit.btn-primary:hover .hg-auth-submit__arrow { transform: scaleX(-1) translateX(3px); } /* Secure-connection micro badge under the submit / footer. */ html body #main-body .hg-auth-secure { margin: 1rem 0 0; text-align: center; font-size: 0.78rem; color: var(--neutral-500); display: flex; align-items: center; justify-content: center; gap: 0.35rem; } html body #main-body .hg-auth-secure i { color: var(--success); font-size: 0.72rem; } /* Register submit centred at a comfortable width, not edge-to-edge. */ html body #main-body .hg-auth-submit-wrap { margin-top: 0.5rem; } html body #main-body .hg-auth-submit-wrap .hg-auth-submit { min-width: 260px; } /* Password-reset change form: submit + cancel side by side. */ html body #main-body .hg-auth-btnrow { display: flex; gap: 0.6rem; } html body #main-body .hg-auth-btnrow .hg-auth-submit { flex: 1; } html body #main-body .hg-auth-backlink { margin-top: 1.1rem; } html body #main-body .hg-auth-backlink i { font-size: 0.75rem; margin-right: 0.2rem; } /* The password reveal button sits flush in the merged group. */ html body #main-body .input-group-merge .btn-reveal-pw { border: 1px solid var(--hg-input-border); border-left: 0; background: #f8fafc; color: var(--neutral-500); border-top-left-radius: 0; border-bottom-left-radius: 0; } html body #main-body .input-group-merge .btn-reveal-pw:hover { color: var(--hg-primary); background: #f1f5f9; } /* ---- Mobile: collapse to one column, brand becomes a slim top strip ---- */ @media (max-width: 860px) { html body #main-body:has(.hg-auth-split) { min-height: auto; padding-top: 1rem; } html body #main-body .hg-auth-split, html body #main-body .hg-auth-split.hg-auth-split--wide { grid-template-columns: 1fr; max-width: 540px; } html body #main-body .hg-auth-brand { padding: 1.5rem 1.5rem 1.6rem; } /* On the strip, drop the long copy + bullets — keep just logo + headline * so the form stays above the fold on small screens. */ html body #main-body .hg-auth-brand__copy { margin-top: 1rem; } html body #main-body .hg-auth-brand__title { font-size: 1.25rem; margin-bottom: 0.2rem; } html body #main-body .hg-auth-brand__subtitle { font-size: 0.9rem; } html body #main-body .hg-auth-brand__list, html body #main-body .hg-auth-brand__proof, html body #main-body .hg-auth-brand__footer { display: none; } /* On the slim mobile strip the dotted texture/glow are too busy — calm it. */ html body #main-body .hg-auth-brand::before { opacity: 0.4; } html body #main-body .hg-auth-brand__logo { margin-bottom: 0; } html body #main-body .hg-auth-formwrap, html body #main-body .hg-auth-formwrap--wide { padding: 1.75rem 1.5rem; } /* The brand strip already shows the register subtitle; avoid repeating the * same sentence in the form head right below it on the stacked mobile view. */ html body #main-body .hg-auth-head--register p { display: none; } } /* ---- RTL: mirror the radius rounding of the two panels ---- */ html[dir="rtl"] body #main-body .input-group-merge .btn-reveal-pw { border-left: 1px solid var(--hg-input-border); border-right: 0; } html[dir="rtl"] body #main-body .hg-auth-brand__link { margin-left: 0; margin-right: 0.35rem; } /* --------------------------------------------------------------------- * 4) AUTH HEADINGS — the templates now emit a semantic

. Give it the brand Inter/800 scale so the auth pages * have a real, consistent top heading. * ------------------------------------------------------------------- */ html body #main-body .hg-auth-title, html body #main-body h1.hg-auth-title { font-family: "Inter", system-ui, sans-serif !important; font-weight: 800 !important; font-size: 1.5rem !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; color: #0f172a !important; margin-bottom: 0.25rem; } /* --------------------------------------------------------------------- * 5) INPUTS — one input scale across the whole flow. whmcs-unify sizes * #main-body .form-control to .6rem/.9rem padding but login/reset get 45px * while register stays ~41px/13px. Force a single 44px control with .95rem * text and a neutral resting border that turns purple only on focus * (register's inputs were resting on a purple border). * ------------------------------------------------------------------- */ html body #main-body .form-control, html body #main-body .custom-select, html body #main-body select.form-control, html body #main-body input.form-control { min-height: 44px !important; font-size: 0.95rem !important; padding: 0.6rem 0.9rem !important; border-radius: var(--hg-radius-ctl) !important; border-color: var(--hg-input-border) !important; } html body #main-body .form-control:focus, html body #main-body .custom-select:focus, html body #main-body select.form-control:focus { border-color: var(--hg-primary) !important; box-shadow: 0 0 0 0.2rem rgba(118, 16, 152, 0.18) !important; } /* Keep the input-group merged controls aligned with the 44px height so the * prepended icon box matches the field. The icon glyph is muted at rest and * adopts the brand purple when the sibling input is focused (see :focus-within * rule below) for a polished, attentive feel. */ html body #main-body .input-group-merge .input-group-text, html body #main-body .input-group-text { border-radius: var(--hg-radius-ctl); border-color: var(--hg-input-border); background: #f8fafc; color: var(--neutral-500); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } html body #main-body .input-group-merge:focus-within .input-group-text { color: var(--hg-primary); border-color: var(--hg-primary); background: #faf5fe; } /* Brand focus ring spans the whole merged group, not just the text input, so * the prepend icon + reveal button stay visually attached when focused. */ html body #main-body .input-group-merge:focus-within { border-radius: var(--hg-radius-ctl); box-shadow: 0 0 0 0.2rem rgba(118, 16, 152, 0.16); } html body #main-body .input-group-merge:focus-within .form-control, html body #main-body .input-group-merge:focus-within .btn-reveal-pw { border-color: var(--hg-primary) !important; box-shadow: none !important; } /* ---- Register field-group title with a small brand icon chip ---- */ html body #main-body .hg-grp-title { display: flex; align-items: center; gap: 0.6rem; } html body #main-body .hg-grp-title__ico { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: linear-gradient(135deg, rgba(118, 16, 152, 0.12), rgba(191, 11, 144, 0.12)); color: var(--hg-primary); font-size: 0.8rem; } /* --------------------------------------------------------------------- * 6) BUTTONS — one radius (.6rem) and a consistent height scale across the * flow + header. Normalises the 4px nav buttons, the 56px register submit * and the form submits to a single system. Header buttons live OUTSIDE * #main-body so whmcs-unify never reached them — cover them here. * ------------------------------------------------------------------- */ html body #main-body .btn, html body .navbar .btn, html body .header .btn, html body .hg-header .btn, html body .primary-header .btn { border-radius: var(--hg-radius-ctl) !important; } /* Form submit / primary CTAs in the flow → consistent ~46px comfortable size. */ html body #main-body .btn-primary, html body #main-body button[type="submit"].btn, html body #main-body input[type="submit"].btn { min-height: 46px; padding: 0.6rem 1.4rem; font-weight: 600; } /* Normalise the register submit (.btn-lg, was ~56px) down into the same scale * as the rest of the flow instead of towering over it. */ html body #main-body .btn-lg { min-height: 48px !important; padding: 0.65rem 1.6rem !important; border-radius: var(--hg-radius-ctl) !important; font-size: 1rem !important; } /* Header pill buttons (login / register / lang / currency) were 4px radius and * ~34px; align radius to the system and keep them tidy. */ html body .header .btn-sm, html body .hg-header .btn-sm, html body .primary-header .btn-sm { border-radius: var(--hg-radius-ctl) !important; } /* --------------------------------------------------------------------- * 7) AUTH CARD — consistent brand card surface (radius + soft shadow) so * login / reset / register cards match the main site quality. * * NOTE: the login/reset outer card is now flattened (the .hg-auth-split * shell IS the card — see section 3). What remains here is the REGISTER * field-group cards (personal / billing / security). Inside the split shell * they sit on a white form column, so a heavy floating shadow looks wrong — * give them a soft border + tiny shadow so they read as grouped field * sections, with a brand-tinted group title. * ------------------------------------------------------------------- */ html body #main-body .hg-auth-split #registration .card { border-radius: 0.7rem; border: 1px solid var(--hg-line); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); margin-bottom: 1.1rem !important; } html body #main-body .hg-auth-split #registration .card .card-body { padding: 1.25rem 1.4rem !important; } /* Group title: a small brand label above each field group. */ html body #main-body .hg-auth-split #registration .card .card-title { font-size: 1.02rem !important; font-weight: 700 !important; color: var(--hg-primary-dark) !important; margin-bottom: 1rem; } /* ===================================================================== * CILA — Polish tour 2. Same single design system, --hg-* tokens. * Three structural defects fixed here (icon overlap, heading scale, * invoice chrome) + the auth/control polish from tour 1 stays intact. * * CASCADE: custom.css loads BEFORE the hook's site sheets (bootstrap.css * BS5 / whmcs-unify.css), so to beat them at equal specificity we raise * specificity (html body / #main-body ...) or use !important. Stock Nexus * + site dist files are NEVER edited. * ===================================================================== */ /* --------------------------------------------------------------------- * T2-1) REGISTER ICON OVERLAP — class-wide defect on the registration form. * * Markup (clientregister.tpl): each field sits in *
* * * Nexus theme.min.css reserves the icon gutter with * .prepend-icon .field { padding-left: 36px } (specificity 0,2,0) * but the hook-injected whmcs-unify.css ships * #main-body .form-control { padding: .6rem .9rem } (specificity 1,1,0) * An ID rule beats any number of classes, so on the inputs that carry BOTH * "field" AND "form-control" (firstname/lastname/email/address1/city/state/ * postcode/country) the .9rem (14.4px) padding wins and the absolutely- * positioned 42px icon box sits ON TOP of the first 1-2 typed/placeholder * chars. The "field"-only boxes (companyname/address2/phone/tax_id) keep the * 36px Nexus padding, which is why they render correctly. * * FIX: re-assert the icon gutter from #main-body so it outranks the unify * rule (specificity 1,3,1 >= 1,1,0) without needing !important on padding. * 2.6rem (~41.6px) clears the 42px-wide .field-icon box with a hair of gap. * The select (country) gets the same gutter. Tour-1's input padding rule * used the shorthand `padding: .6rem .9rem !important`; that shorthand would * re-zero padding-left, so it is narrowed to the vertical/right axes only and * the left gutter is owned here (prepend boxes) or by .9rem (non-prepend). * ------------------------------------------------------------------- */ html body #main-body .prepend-icon .field.form-control, html body #main-body .prepend-icon input.field, html body #main-body .prepend-icon select.field, html body #main-body .prepend-icon input.form-control, html body #main-body .prepend-icon select.form-control { padding-left: 2.6rem !important; } /* The intl-tel-input phone field manages its own left gutter (see the * separate-dial-code rules above); never apply the icon gutter to it. */ html body #main-body .prepend-icon .intl-tel-input input.field, html body #main-body .prepend-icon .intl-tel-input input.form-control { padding-left: 84px !important; } /* Keep the icon glyph vertically centred against the 44px tour-1 control * height (the stock box is 36px tall, so the icon floated high). */ html body #main-body .prepend-icon .field-icon { height: 44px; line-height: 44px; } /* --------------------------------------------------------------------- * T2-2) PANEL HEADING SCALE — one consistent, legible type scale. * * Measured defect: sidebar card titles ("BİLGİLERİNİZ", "SORUMLULAR", * "HIZLI ERİŞİM", ...) computed to 11.52px because whmcs-unify.css ships * body.primary-bg-color #main-body .card-sidebar .card-header .card-title * { font-size:.72rem!important } (= 11.52px, smaller than 16px body) * They read as cramped micro-labels with no hierarchy against the section * h3s (16.8px). We keep the uppercase "section-label" tone (it is the right * visual register for a sidebar header) but lift it to a readable size and * set a real, modular scale across the panel: * sidebar/card label ~0.9rem (14.4px) uppercase, neutral-strong * content section h3 1.18rem (already set by unify) — left as-is * modal / popover title 1.15rem — breaks the stray 36px popover h4 * High specificity + !important to beat the unify !important rule. * ------------------------------------------------------------------- */ html body.primary-bg-color #main-body .card-sidebar .card-header .card-title, html body.primary-bg-color #main-body .sidebar .card-header .card-title { font-size: 0.9rem !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0.04em !important; text-transform: uppercase; color: var(--neutral-600) !important; } /* Content-area card titles (non-sidebar) — a clear section heading a notch * above body text, brand-inked, so the page has a real top-of-card heading. */ html body.primary-bg-color #main-body .primary-content .card > .card-header .card-title, html body.primary-bg-color #main-body .primary-content .card-title:not(.card-sidebar .card-title) { font-size: 1.18rem !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none; color: var(--hg-primary-dark) !important; } /* Normalise the stray modal / popover heading (the "Şifre Oluştur" generate- * password popover h4 measured 36px) down into the scale so it can never tower * over the page when it appears. */ html body .modal-title, html body .modal-header h3, html body .modal-header h4, html body .popover-header, html body .popover .popover-header, html body .popover h4 { font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.3 !important; } /* --------------------------------------------------------------------- * T2-3) VIEWINVOICE CHROME — viewinvoice.tpl is a STANDALONE full-HTML * template: it ships its own // and does NOT include * header.tpl, so it never renders {$headoutput} where the hook injects the * site chrome (bootstrap.css / hostragons-brand.css / whmcs-unify.css / * Inter). The structural fix is in viewinvoice.tpl (it now emits * {$headoutput}). These rules give the invoice "paper" the same brand card * surface + Inter body the rest of the panel uses, in case the standalone * page still lacks the body.primary-bg-color hook that scopes unify. * ------------------------------------------------------------------- */ html body .invoice-container { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } html body .invoice-container .card { border-radius: 0.85rem; border-color: var(--hg-line); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 12px 28px -8px rgba(16, 24, 40, 0.08); } /* --------------------------------------------------------------------- * T2-4) RESELLER WIDGET CTA — the "Devam et →" (create-hosting) button in * the reseller module used a generic info-blue (rs-btn-info -> #3b82f6), * clashing with the brand purple "Yükselt" button right above it. The module * CSS has no brand token; repaint its primary step buttons with the brand * gradient here so the widget speaks the same button language as the panel. * (The English strings + emoji icons in that widget are fixed in code — * modules/servers/reseller/reseller.php — via the hg_t() locale layer.) * ------------------------------------------------------------------- */ html body #rs-domain-continue.rs-btn, html body .rs-btn.rs-btn-info { background: var(--hg-grad) !important; background-color: var(--hg-primary) !important; color: #fff !important; border: 0 !important; } html body .rs-btn.rs-btn-info:hover, html body #rs-domain-continue.rs-btn:hover { filter: brightness(1.07); } /* ===================================================================== * CILA — Polish tour 3. Same single design system, --hg-* tokens. * Two confirmed viewinvoice defects fixed here (cyan ledger header bar, * unstyled gateway "Pay Now" submit). Stock Nexus + site dist files are * NEVER edited; everything is overridden from custom.css with raised * specificity (html body .invoice-container ...) so it beats the later * invoice.css / BS5 sheets at equal importance. * ===================================================================== */ /* --------------------------------------------------------------------- * T3-1) VIEWINVOICE LEDGER HEADER — the "Defter / Ledger" bar under the * line-items table carries class "card-title ... text-white ... bg-info" * (viewinvoice.tpl line 244). Now that the invoice page gets the site * chrome (BS5), .bg-info paints it bright cyan (rgb(0,196,253)) — totally * off-brand against the purple identity. Repaint that one bar with the * brand gradient. Scoped to the invoice container so no other .bg-info * surface elsewhere is touched. * ------------------------------------------------------------------- */ html body .invoice-container .card-title.bg-info { background: var(--hg-grad) !important; background-color: var(--hg-primary) !important; color: #fff !important; } /* --------------------------------------------------------------------- * T3-2) VIEWINVOICE "PAY NOW" BUTTON — {$paymentbutton} is emitted by the * payment gateway as a bare, class-less (or a *