/* Domain Partners — custom WHMCS theme Auth pages (login / register) split-screen layout + form styling. Loaded after the base nexus CSS, so these rules win. */ /* PP Mori — same self-hosted font as the marketing site, for consistency. */ @font-face { font-family: "PP Mori"; src: url("../fonts/PPMori-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PP Mori"; src: url("../fonts/PPMori-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { --dp-font: "PP Mori", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --dp-ink: #101010; --dp-muted: rgba(16, 16, 16, 0.6); --dp-faint: rgba(16, 16, 16, 0.4); --dp-border: rgba(16, 16, 16, 0.15); --dp-bg: #ffffff; } /* nexus sets `body,html { background: var(--bg-muted) }`, which is dark in the OS dark scheme and shows through on overscroll. Our theme is light-only, so pin the root background to the app grey. */ html { background: #f4f4f5; } /* Typography — match the marketing site (apps/web): PP Mori is the whole identity, set on so everything inherits it. PP Mori ships only 400 (Regular) and 600 (Semibold); the browser maps 300/500 → 400 and 700/bold → 600, so there are two real weights on screen, exactly like the marketing site. This overrides nexus's `body { font-family:"Open Sans" }`; headings and buttons inherit body, and Font Awesome icons set their own font-family so they're unaffected. */ body { font-family: var(--dp-font); } /* Form controls (and buttons especially) don't reliably inherit the document font across the nexus + order-form bundles — pin them to PP Mori explicitly. A class selector (.btn) also outranks bootstrap's `button{font-family:inherit}`. */ input, button, select, textarea, .btn, .form-control, input[type="submit"], input[type="button"] { font-family: var(--dp-font); } /* ---- Split shell ---- */ .dp-auth-body { margin: 0; background: var(--dp-bg); font-family: var(--dp-font); } /* Form controls don't inherit font by default. */ .dp-auth-body input, .dp-auth-body button, .dp-auth-body select, .dp-auth-body textarea { font-family: inherit; } .dp-auth { display: flex; min-height: 100vh; min-height: 100dvh; } /* Left: form column */ .dp-auth__form-col { display: flex; flex-direction: column; width: 100%; /* Match the site container gutter (max-w 80rem, px-2) on both sides. */ padding-block: 2rem; padding-inline: max(1.5rem, calc((100vw - 80rem) / 2 + 0.5rem)); } @media (min-width: 992px) { .dp-auth__form-col { width: 50%; } } .dp-auth__brand { display: inline-flex; width: fit-content; flex: 0 0 auto; } .dp-auth__brand img { height: 2rem; width: auto; } .dp-auth__form-wrap { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; padding-block: 2.5rem; width: 100%; } /* Right: black panel with the faded ServerBase watermark + tagline */ .dp-auth__media { position: relative; display: none; width: 50%; overflow: hidden; background: #141414; color: #ffffff; } @media (min-width: 992px) { .dp-auth__media { display: flex; flex-direction: column; justify-content: flex-end; } } /* Big, faded, offset off the right edge — matches the help-centre hero mark. */ .dp-auth__mark { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: min(88%, 640px); height: auto; opacity: 0.14; pointer-events: none; user-select: none; z-index: 0; } .dp-auth__media-text { position: relative; z-index: 1; max-width: 26rem; padding: 3.5rem; } .dp-auth__media-title { margin: 0; font-size: 1.875rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; } .dp-auth__media-sub { margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.6); } /* ---- Heading ---- */ .dp-auth__head { margin-bottom: 1.5rem; } .dp-auth__title { margin: 0; font-size: 24px; font-weight: 600; color: var(--dp-ink); } .dp-auth__subtitle { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--dp-muted); } /* ---- Form ---- */ .dp-form { display: flex; flex-direction: column; gap: 1rem; } .dp-field { display: flex; flex-direction: column; gap: 0.375rem; } .dp-field__labelrow { display: flex; align-items: center; justify-content: space-between; } .dp-field label, .dp-field__labelrow label { font-size: 0.8125rem; font-weight: 600; color: var(--dp-ink); /* Kill Bootstrap's default label margin so the label hugs the input; the .dp-field flex gap is the single source of label→input spacing. */ margin-bottom: 0; } .dp-input { position: relative; display: flex; align-items: center; } /* Leading Lucide icon (direct child of the field). */ .dp-input > .dp-icon { position: absolute; left: 1rem; width: 1.05rem; height: 1.05rem; color: var(--dp-faint); pointer-events: none; } .dp-input input { width: 100%; height: auto; padding: 0.625rem 1rem 0.625rem 2.75rem; font-size: 0.875rem; color: var(--dp-ink); background: #fff; border: 1px solid var(--dp-border); border-radius: 30px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Fields with no leading icon (e.g. first / last name). */ .dp-input--plain input { padding-left: 1rem; } .dp-input input::placeholder { color: var(--dp-faint); } .dp-input input:focus { border-color: var(--dp-ink); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.08); } .dp-reveal { position: absolute; right: 0.5rem; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--dp-faint); background: transparent; border: 0; border-radius: 999px; cursor: pointer; } .dp-reveal:hover { color: var(--dp-ink); background: #f4f4f5; } .dp-reveal span { display: inline-flex; } .dp-reveal .dp-icon { width: 1.05rem; height: 1.05rem; } .dp-link-muted { font-size: 0.8125rem; font-weight: 500; color: var(--dp-muted); text-decoration: none; } .dp-link-muted:hover { color: var(--dp-ink); text-decoration: underline; } .dp-remember { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--dp-muted); margin: 0; } /* ---- Toggle switch ---- */ .dp-toggle { display: flex; align-items: center; gap: 0.75rem; /* Breathing room from the field above and the submit button below. */ margin-block: 0.5rem 0.75rem; cursor: pointer; } .dp-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .dp-toggle__track { position: relative; flex: 0 0 auto; width: 2.5rem; height: 1.5rem; border-radius: 999px; background: rgba(16, 16, 16, 0.18); transition: background 0.15s ease; } .dp-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.15s ease; } .dp-toggle input:checked + .dp-toggle__track { background: var(--dp-ink); } .dp-toggle input:checked + .dp-toggle__track .dp-toggle__thumb { transform: translateX(1rem); } .dp-toggle input:focus-visible + .dp-toggle__track { box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.12); } .dp-toggle__label { font-size: 0.8125rem; line-height: 1.4; color: var(--dp-muted); } /* ---- Buttons ---- */ .dp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.625rem 1.25rem; font-size: 0.875rem; /* 500 to match the marketing buttons; PP Mori ships no 500, so it renders as Regular (400) — the same fallback the marketing site relies on. */ font-weight: 500; border: 1px solid transparent; border-radius: 30px; cursor: pointer; transition: background-color 0.15s ease, opacity 0.15s ease; } .dp-btn--primary { color: #f4f4f5; background: var(--dp-ink); } .dp-btn--primary:hover { background: rgba(16, 16, 16, 0.8); color: #f4f4f5; } .dp-btn--outline { color: var(--dp-ink); background: #fff; border-color: var(--dp-border); } .dp-btn--outline:hover { background: #f4f4f5; color: var(--dp-ink); } /* ---- Divider + footer ---- */ .dp-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--dp-faint); font-size: 0.75rem; } .dp-divider::before, .dp-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(16, 16, 16, 0.1); } .dp-auth__foot { margin: 0.25rem 0 0; text-align: center; font-size: 0.8125rem; color: var(--dp-muted); } .dp-auth__foot a { font-weight: 600; color: var(--dp-ink); text-decoration: none; } .dp-auth__foot a:hover { text-decoration: underline; } /* Two-up field row (first name / last name). */ .dp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } @media (max-width: 480px) { .dp-grid-2 { grid-template-columns: 1fr; } } /* Terms sentence under the signup button. */ .dp-terms { margin: 0; text-align: center; font-size: 0.75rem; line-height: 1.5; color: var(--dp-faint); } .dp-terms a { color: var(--dp-muted); text-decoration: underline; text-underline-offset: 2px; } /* WHMCS-native blocks that can still appear (custom fields, TOS, captcha, security questions) when those features are enabled — keep them tidy. */ .dp-form .card { border: 0; box-shadow: none; margin: 0; } .dp-form .card-body { padding: 0; } .dp-form .card-title { font-size: 0.8125rem; font-weight: 600; color: var(--dp-ink); margin-bottom: 0.5rem; } .dp-form .form-control, .dp-form select.field { border-radius: 30px; border-color: var(--dp-border); } .dp-form .accepttos { margin-right: 0.375rem; } /* Space out stacked auth blocks (form, linked accounts, footer). */ .dp-auth__form-wrap > * + * { margin-top: 1rem; } /* Keep the terms line tucked under the "Already registered?" line instead of a full row below it — so the register footer hugs the button like login's. */ .dp-auth__form-wrap > .dp-terms { margin-top: 0.375rem; } /* Let the base theme's register form breathe inside the narrow column. */ .dp-auth__form-wrap .card { border: 0; box-shadow: none; } .dp-auth__form-wrap .card-body { padding: 0; } /* ============================================================ CLIENT-AREA DASHBOARD (matches apps/app dashboard design) ============================================================ */ .dp-app { margin: 0; background: #f4f4f5; font-family: var(--dp-font); color: var(--dp-ink); } /* Kill nexus's global `a:hover { text-decoration: underline }` inside the dashboard. Intentional underlines (e.g. .dp-panel__head a:hover) have higher specificity and still win. */ .dp-app a, .dp-app a:hover, .dp-app a:focus { text-decoration: none; } .dp-app__layout { display: flex; min-height: 100vh; min-height: 100dvh; } .dp-app__main { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; } .dp-app__body { flex: 1 1 auto; } .dp-container { width: 100%; max-width: 72rem; margin: 0 auto; padding-inline: 1rem; } @media (min-width: 640px) { .dp-container { padding-inline: 1.5rem; } } .dp-page { padding-block: 2.25rem 2.5rem; } .dp-breadcrumb { margin-bottom: 1rem; } /* ---- Sidebar ---- */ .dp-sidebar { position: sticky; top: 0; align-self: flex-start; z-index: 50; display: flex; height: 100vh; height: 100dvh; width: 260px; flex: 0 0 260px; flex-direction: column; background: #fff; border-right: 1px solid rgba(16, 16, 16, 0.08); } .dp-sidebar__header { display: flex; align-items: center; height: 64px; padding: 0 1.25rem; flex: 0 0 auto; } .dp-logo-full { height: 1.65rem; width: auto; } .dp-nav { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 0.375rem; padding: 0.5rem 0.75rem; } /* Roomy full-pill rows, matching the apps/app sidebar: h-10, rounded-full, muted text; hover + active fill with a light-grey accent (NOT a dark fill), active is bold + full-ink. */ .dp-nav__link { display: flex; align-items: center; gap: 0.75rem; min-height: 2.5rem; padding: 0 0.75rem; border-radius: 9999px; font-size: 14px; font-weight: 500; color: rgba(16, 16, 16, 0.7); text-decoration: none; cursor: pointer; list-style: none; } .dp-nav__link::-webkit-details-marker { display: none; } .dp-nav__link > span { flex: 1 1 auto; } .dp-nav__link .dp-icon { width: 18px; height: 18px; flex: 0 0 auto; color: inherit; } .dp-nav__link:hover { background: #f4f4f5; color: var(--dp-ink); } .dp-nav__link.is-active { background: #f4f4f5; color: var(--dp-ink); font-weight: 600; } .dp-nav__group > summary { list-style: none; } .dp-nav__group > summary::-webkit-details-marker { display: none; } .dp-nav__chev { display: flex; flex: 0 0 auto !important; align-items: center; margin-left: auto; color: rgba(16, 16, 16, 0.4); transition: transform 0.2s ease; } .dp-nav__chev .dp-icon { width: 15px; height: 15px; color: inherit; } /* chevron-right rotates to point down when the group is open */ .dp-nav__group[open] > summary .dp-nav__chev { transform: rotate(90deg); } .dp-nav__sub { display: flex; flex-direction: column; gap: 0.125rem; margin: 0.25rem 0 0.25rem 1.4rem; padding-left: 0.75rem; border-left: 1px solid rgba(16, 16, 16, 0.1); } .dp-nav__sublink { display: flex; align-items: center; min-height: 1.75rem; padding: 0 0.625rem; border-radius: 0.5rem; font-size: 13px; color: rgba(16, 16, 16, 0.6); text-decoration: none; } .dp-nav__sublink:hover { background: #f4f4f5; color: var(--dp-ink); } .dp-nav__sublink.is-active { background: #f4f4f5; color: var(--dp-ink); font-weight: 600; } .dp-sidebar__footer { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid rgba(16, 16, 16, 0.08); flex: 0 0 auto; } .dp-user { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 0.625rem; padding: 0.375rem; border-radius: 0.625rem; text-decoration: none; } .dp-user:hover { background: #f4f4f5; } .dp-user__avatar { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 12px; font-weight: 600; } .dp-user__meta { display: flex; min-width: 0; flex-direction: column; } .dp-user__name { font-size: 13px; font-weight: 600; color: var(--dp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-user__email { font-size: 12px; color: rgba(16, 16, 16, 0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-user__logout { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; color: rgba(16, 16, 16, 0.5); } .dp-user__logout:hover { background: #f4f4f5; color: var(--dp-ink); } .dp-user__logout .dp-icon { width: 18px; height: 18px; } .dp-sidebar__backdrop { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.3); } @media (max-width: 1023px) { .dp-sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 0 0 40px rgba(0, 0, 0, 0.15); } body.dp-sidebar-open .dp-sidebar { transform: none; } body.dp-sidebar-open .dp-sidebar__backdrop { display: block; } } /* ---- Topbar ---- */ .dp-topbar { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid rgba(16, 16, 16, 0.1); box-shadow: 0 1px 3px rgba(16, 16, 16, 0.05); } .dp-topbar__inner { display: flex; align-items: center; gap: 0.75rem; height: 64px; max-width: 72rem; margin: 0 auto; padding: 0 1rem; } /* Minimal topbar (no domain search) — only needed for the mobile menu button, so hide the whole bar on desktop where the sidebar is always visible. */ @media (min-width: 1024px) { .dp-topbar--minimal { display: none; } } @media (min-width: 640px) { .dp-topbar__inner { padding: 0 1.5rem; } } .dp-topbar__burger { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; background: transparent; border-radius: 0.5rem; color: var(--dp-ink); cursor: pointer; } .dp-topbar__burger:hover { background: #f4f4f5; } @media (min-width: 1024px) { .dp-topbar__burger { display: none; } } .dp-topbar__search { position: relative; display: flex; flex: 1 1 auto; align-items: center; gap: 0.5rem; } .dp-topbar__search-icon { position: absolute; left: 1rem; display: flex; color: rgba(16, 16, 16, 0.5); pointer-events: none; } .dp-topbar__search-icon .dp-icon { width: 16px; height: 16px; } .dp-topbar__search input[type="text"] { width: 100%; flex: 1 1 auto; height: auto; padding: 0.625rem 1rem 0.625rem 2.75rem; font-size: 14px; color: var(--dp-ink); background: #fff; border: 1px solid rgba(16, 16, 16, 0.15); border-radius: 30px; outline: none; font-family: inherit; } .dp-topbar__search input[type="text"]:focus { border-color: var(--dp-ink); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.08); } .dp-topbar__search-btn { width: auto; flex: 0 0 auto; padding: 0.625rem 1.5rem; } .dp-topbar__tlds { display: none; align-items: center; gap: 0.25rem; } @media (min-width: 1024px) { .dp-topbar__tlds { display: flex; } } .dp-tld { padding: 0.5rem 1rem; border-radius: 30px; font-size: 14px; font-weight: 600; color: var(--dp-ink); text-decoration: none; } .dp-tld:hover { background: #f4f4f5; } /* ---- Hero ---- */ .dp-hero { position: relative; overflow: hidden; background: #141414; } .dp-hero__media { position: absolute; inset: 0; background: #141414; } .dp-hero__scrim { display: none; } .dp-hero__mark { position: absolute; right: -2rem; top: 50%; transform: translateY(-55%); width: min(42vw, 280px); height: auto; opacity: 0.14; pointer-events: none; user-select: none; z-index: 0; } @media (min-width: 640px) { .dp-hero__mark { right: 2rem; width: min(28vw, 220px); opacity: 0.16; } } .dp-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.25rem; padding-block: 2rem 7rem; color: #fff; } @media (min-width: 640px) { .dp-hero__inner { flex-direction: row; align-items: flex-start; justify-content: space-between; padding-block: 3rem 8rem; } } .dp-hero__title { margin: 0; font-size: 26px; font-weight: 600; } .dp-hero__sub { margin: 0.375rem 0 0; max-width: 28rem; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); } .dp-hero__cta { width: auto; flex: 0 0 auto; background: #fff; color: #141414; padding: 0.625rem 1.25rem; } .dp-hero__cta:hover { background: rgba(255, 255, 255, 0.9); color: #141414; } .dp-hero__cta .dp-icon { color: #141414; } /* ---- Dashboard body ---- */ .dp-dashboard { position: relative; padding-bottom: 2.5rem; } .dp-stats { position: relative; z-index: 1; display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin-top: -4.5rem; } @media (min-width: 640px) { .dp-stats { grid-template-columns: repeat(2, 1fr); margin-top: -5.5rem; } } @media (min-width: 1024px) { .dp-stats { grid-template-columns: repeat(4, 1fr); margin-top: -6rem; } } .dp-stat { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 1rem; box-shadow: 0 12px 30px rgba(10, 42, 56, 0.1); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .dp-stat:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(10, 42, 56, 0.15); } .dp-stat__top { display: flex; align-items: center; justify-content: space-between; color: rgba(16, 16, 16, 0.3); } .dp-stat__top .dp-icon { width: 16px; height: 16px; } .dp-stat__icon { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; background: #f4f4f5; color: var(--dp-ink); } .dp-stat__icon .dp-icon { width: 18px; height: 18px; } .dp-stat__value { font-size: 28px; font-weight: 600; line-height: 1; color: var(--dp-ink); } .dp-stat__label { margin-top: 0.375rem; font-size: 13px; color: rgba(16, 16, 16, 0.6); } /* ---- Panels ---- */ .dp-cols { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; } @media (min-width: 1024px) { .dp-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } } .dp-panel { background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 1rem; } .dp-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.25rem 0.5rem; } .dp-panel__head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--dp-ink); } .dp-panel__head a { font-size: 13px; font-weight: 600; color: rgba(16, 16, 16, 0.6); text-decoration: none; } .dp-panel__head a:hover { color: var(--dp-ink); text-decoration: underline; } .dp-panel__body { display: flex; flex-direction: column; padding: 0 1.25rem 0.75rem; } .dp-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; text-decoration: none; } .dp-row + .dp-row { border-top: 1px solid rgba(16, 16, 16, 0.08); } .dp-row__icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; } .dp-row__icon .dp-icon { width: 20px; height: 20px; } .dp-row__text { flex: 1 1 auto; min-width: 0; } .dp-row__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--dp-ink); } /* Notification rows (e.g. a specific ticket) — keep the subject on one line. */ .dp-row--notif .dp-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-row__meta { font-weight: 600; color: rgba(16, 16, 16, 0.7); } .dp-row__detail { margin: 0; font-size: 13px; color: rgba(16, 16, 16, 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-row__cta { width: auto; flex: 0 0 auto; padding: 0.5rem 1rem; font-size: 13px; } /* Only the trailing arrow (a direct child of the row) is muted + animates on hover — NOT the nested left tint icon (which is the last child of its span). */ .dp-row--link > .dp-icon { flex: 0 0 auto; color: rgba(16, 16, 16, 0.3); transition: transform 0.15s ease, color 0.15s ease; } .dp-row--link:hover > .dp-icon { transform: translateX(2px); color: var(--dp-ink); } /* Empty skeleton placeholder rows (fill the panel when all-clear). */ .dp-row--placeholder { opacity: 0.55; } .dp-skel-icon { background: rgba(16, 16, 16, 0.06); } .dp-skel { display: block; height: 0.6rem; border-radius: 6px; background: rgba(16, 16, 16, 0.07); } .dp-skel--title { width: 40%; height: 0.7rem; margin-bottom: 0.5rem; } .dp-skel--detail { width: 62%; } .dp-tone-red { background: rgba(244, 217, 228, 0.7); color: #5a2440; } .dp-tone-amber { background: rgba(247, 225, 198, 0.7); color: #5a3d1c; } .dp-tone-green { background: rgba(200, 233, 212, 0.6); color: #14432b; } .dp-tone-blue { background: rgba(188, 231, 243, 0.6); color: #0c2a33; } .dp-tint-blue { background: rgba(188, 231, 243, 0.5); color: #0c2a33; } .dp-tint-green { background: rgba(200, 233, 212, 0.6); color: #14432b; } .dp-tint-amber { background: rgba(247, 225, 198, 0.7); color: #5a3d1c; } /* ---- Sidebar collapse rail + tooltips ---- */ .dp-logo-mark { display: none; width: 2.25rem; height: 2.25rem; } .dp-sidebar__collapse { position: absolute; top: 1.5rem; right: -0.75rem; z-index: 20; display: none; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 50%; background: #fff; color: rgba(16, 16, 16, 0.6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); cursor: pointer; } .dp-sidebar__collapse:hover { background: #f4f4f5; color: var(--dp-ink); } .dp-sidebar__collapse .dp-icon { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 0.2s ease; } html.dp-sidebar-collapsed .dp-sidebar__collapse .dp-icon { transform: rotate(-90deg); } @media (min-width: 1024px) { .dp-sidebar__collapse { display: flex; } html.dp-sidebar-collapsed .dp-sidebar { width: 76px; flex-basis: 76px; } html.dp-sidebar-collapsed .dp-nav { overflow: visible; } /* Groups (

) must stretch full-width too, so their summary pill matches the leaf links instead of shrinking to the icon. */ html.dp-sidebar-collapsed .dp-nav__group { width: 100%; } html.dp-sidebar-collapsed .dp-nav__link { justify-content: center; padding-inline: 0; width: 100%; } html.dp-sidebar-collapsed .dp-nav__label, html.dp-sidebar-collapsed .dp-nav__chev { display: none; } /* Collapsed groups: the sub-menu becomes a flyout drawer on hover/focus. */ html.dp-sidebar-collapsed .dp-nav__group { position: relative; } html.dp-sidebar-collapsed .dp-nav__sub { position: absolute; left: calc(100% + 0.5rem); top: -0.25rem; min-width: 190px; margin: 0; padding: 0.375rem; gap: 0.125rem; border: 1px solid var(--dp-border); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(16, 16, 16, 0.14); opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s; pointer-events: none; z-index: 70; } /* Flyout heading (the group name). */ html.dp-sidebar-collapsed .dp-nav__sub::before { content: attr(data-group); display: block; padding: 0.25rem 0.625rem 0.375rem; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dp-faint); } /* Invisible bridge so the pointer can cross the gap into the flyout. */ html.dp-sidebar-collapsed .dp-nav__group::after { content: ""; position: absolute; left: 100%; top: 0; width: 0.75rem; height: 100%; pointer-events: none; } html.dp-sidebar-collapsed .dp-nav__group:hover::after, html.dp-sidebar-collapsed .dp-nav__group:focus-within::after { pointer-events: auto; } html.dp-sidebar-collapsed .dp-nav__group:hover .dp-nav__sub, html.dp-sidebar-collapsed .dp-nav__group:focus-within .dp-nav__sub { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* Group summaries use the flyout instead of the single-word tooltip. */ html.dp-sidebar-collapsed .dp-nav__group > summary::after { display: none; } /* Uniform icon size + centring for leaf links AND group summaries. */ html.dp-sidebar-collapsed .dp-nav__link { gap: 0; justify-content: center; } html.dp-sidebar-collapsed .dp-nav__link .dp-icon { width: 20px; height: 20px; } html.dp-sidebar-collapsed .dp-sidebar__header { justify-content: center; padding-inline: 0; } html.dp-sidebar-collapsed .dp-logo-full { display: none; } html.dp-sidebar-collapsed .dp-logo-mark { display: inline-flex; } html.dp-sidebar-collapsed .dp-sidebar__footer { justify-content: center; padding-inline: 0; } html.dp-sidebar-collapsed .dp-user { flex: 0 0 auto; justify-content: center; } html.dp-sidebar-collapsed .dp-user__meta, html.dp-sidebar-collapsed .dp-user__logout { display: none; } /* Tooltips (only meaningful when collapsed) */ html.dp-sidebar-collapsed .dp-nav__link, html.dp-sidebar-collapsed .dp-user { position: relative; } html.dp-sidebar-collapsed .dp-nav__link::after, html.dp-sidebar-collapsed .dp-user::after { content: attr(data-tip); position: absolute; left: calc(100% + 0.625rem); top: 50%; transform: translateY(-50%); padding: 0.25rem 0.5rem; background: var(--dp-ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.2; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s ease; z-index: 60; } html.dp-sidebar-collapsed .dp-nav__link:hover::after, html.dp-sidebar-collapsed .dp-user:hover::after { opacity: 1; } } /* ============================================================ MY DOMAINS PAGE (apps/app domains design) ============================================================ */ /* ---- Gradient page header ---- */ .dp-pagehead { position: relative; overflow: hidden; } .dp-pagehead__media { position: absolute; inset: 0; background: url("../img/hero-gradient.jpg") center / cover no-repeat; } /* Dark green variant (e.g. support tickets) — the marketing hosting gradient. */ .dp-pagehead--green .dp-pagehead__media { background: url("../img/hero-gradient-green.jpg") center / cover no-repeat; } .dp-pagehead--green .dp-pagehead__scrim { background: linear-gradient( to top right, rgba(6, 40, 26, 0.5), rgba(6, 40, 26, 0.12) 60%, transparent ); } .dp-pagehead__scrim { position: absolute; inset: 0; background: linear-gradient( to top right, rgba(10, 42, 56, 0.6), rgba(10, 42, 56, 0.15) 60%, transparent ); } .dp-pagehead__inner { position: relative; display: flex; flex-direction: column; gap: 1rem; padding-block: 2.75rem; color: #fff; } @media (min-width: 640px) { .dp-pagehead__inner { padding-block: 3.25rem; } } @media (min-width: 640px) { .dp-pagehead__inner { flex-direction: row; align-items: center; justify-content: space-between; } } .dp-pagehead__title { margin: 0; font-size: 24px; font-weight: 600; } .dp-pagehead__sub { margin: 0.25rem 0 0; max-width: 24rem; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); } .dp-pagehead__cta { width: auto; flex: 0 0 auto; background: var(--dp-ink); color: #fff; padding: 0.625rem 1.25rem; } .dp-pagehead__cta:hover { background: rgba(16, 16, 16, 0.9); color: #fff; } /* ---- Layout ---- */ #domainForm { display: flex; flex-direction: column; gap: 1.25rem; } .dp-domains .alert { margin: 0; border-radius: 14px; } /* ============================================================ ALERTS / NOTICES (branded — rendered via includes/alert.tpl) ============================================================ */ .dp-alert { position: relative; padding: 0.875rem 1rem 0.875rem 2.75rem; margin: 0 0 1.25rem; font-size: 0.875rem; line-height: 1.55; border: 1px solid transparent; border-radius: 12px; } .dp-alert::before { content: ""; position: absolute; left: 0.9rem; top: 0.85rem; width: 1.2rem; height: 1.2rem; background-repeat: no-repeat; background-position: center; background-size: contain; } .dp-alert h2 { margin: 0 0 0.2rem; font-size: 0.9375rem; font-weight: 700; } .dp-alert p:last-child { margin-bottom: 0; } .dp-alert ul { margin: 0.25rem 0 0; padding-left: 1.1rem; } .dp-alert a { color: inherit; font-weight: 600; text-decoration: underline; } /* Centered variant (textcenter) drops the icon so the text can truly center. */ .dp-alert--center { padding-left: 1rem; text-align: center; } .dp-alert--center::before { content: none; } .dp-alert--success { color: #065f46; background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); } .dp-alert--success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .dp-alert--warning { color: #92400e; background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.35); } .dp-alert--warning::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .dp-alert--danger { color: #991b1b; background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.3); } .dp-alert--danger::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .dp-alert--info { color: var(--dp-ink); background: rgba(16, 16, 16, 0.04); border-color: rgba(16, 16, 16, 0.14); } .dp-alert--info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); } /* ============================================================ MODALS (branded — WHMCS AJAX/system modal incl. 2FA setup, and the dashboard confirm dialogs). Scoped to .dp-app so the market/cart and language modals keep their own chrome. CSS only — the modal markup and its JS hooks (.modal-title/.modal-body/.modal-submit/.close) are untouched. ============================================================ */ .dp-app .modal-dialog { max-width: 480px; margin-top: 6vh; } .dp-app .modal-content { border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 16px; box-shadow: 0 24px 64px rgba(16, 16, 16, 0.2); overflow: hidden; } .dp-app .modal-header { align-items: center; padding: 1.15rem 1.5rem; background: #fff; border-bottom: 1px solid rgba(16, 16, 16, 0.08); } .dp-app .modal-title { font-size: 1.0625rem; font-weight: 600; color: var(--dp-ink); } .dp-app .modal-header .close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; margin: 0; font-size: 1.25rem; line-height: 1; color: rgba(16, 16, 16, 0.5); background: #f4f4f5; border: 0; border-radius: 8px; opacity: 1; text-shadow: none; transition: background 0.15s ease, color 0.15s ease; } .dp-app .modal-header .close:hover { color: var(--dp-ink); background: #e4e4e7; } .dp-app .modal-body { padding: 1.5rem; font-size: 0.875rem; line-height: 1.55; color: var(--dp-ink); } .dp-app .modal-body p:last-child { margin-bottom: 0; } .dp-app .modal-footer { padding: 1.15rem 1.5rem; gap: 0.625rem; background: #fafafa; border-top: 1px solid rgba(16, 16, 16, 0.08); } .dp-app .modal-footer > * { margin: 0; } .dp-app .modal-footer .loader { margin-right: auto; font-size: 0.8125rem; color: var(--dp-faint); } /* Native .btn buttons inside modals adopt the dp-btn look (the dashboard's own dp-btn buttons already match and are unaffected). */ .dp-app .modal .btn { display: inline-flex; align-items: center; justify-content: center; height: auto; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; border: 1px solid transparent; border-radius: 10px; box-shadow: none; cursor: pointer; } .dp-app .modal .btn-primary, .dp-app .modal .modal-submit { color: #fff; background: var(--dp-ink); border-color: var(--dp-ink); } .dp-app .modal .btn-primary:hover, .dp-app .modal .modal-submit:hover { background: #000; } .dp-app .modal .btn-default, .dp-app .modal .btn-secondary { color: var(--dp-ink); background: #fff; border-color: rgba(16, 16, 16, 0.15); } .dp-app .modal .btn-default:hover, .dp-app .modal .btn-secondary:hover { background: #f4f4f5; } .dp-app .modal .btn-danger { color: #fff; background: #b42318; border-color: #b42318; } .dp-app .modal .btn-danger:hover { background: #912018; } /* Form fields inside modals match dp-tf-input. */ .dp-app .modal .form-control, .dp-app .modal input[type="text"], .dp-app .modal input[type="password"], .dp-app .modal input[type="number"] { width: 100%; height: auto; padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--dp-ink); background: #fff; border: 1px solid var(--dp-border); border-radius: 10px; box-shadow: none; } .dp-app .modal .form-control:focus, .dp-app .modal input[type="text"]:focus, .dp-app .modal input[type="password"]:focus, .dp-app .modal input[type="number"]:focus { border-color: rgba(16, 16, 16, 0.3); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.06); outline: none; } .dp-app .modal label { font-size: 0.8125rem; font-weight: 600; color: var(--dp-ink); } /* Two-factor setup: centre the QR image and frame it. */ .dp-app .twofa-setup img, .dp-app .modal-body img.twofa-qr { display: block; margin: 0.25rem auto 1rem; padding: 0.5rem; background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 12px; } /* ---- Two-factor method chooser ---- The method list is WHMCS core markup we can't edit, so we hook it by the module logo's src: swap the logo for an on-brand Lucide icon, and turn the block that contains it into a clickable card. */ /* Swap the TOTP logo for a large on-brand Lucide shield badge. Drawn as a sized ::before background (reliable) with the original hidden — content: on a replaced sizes inconsistently. */ .dp-app .modal .twofa-module .col-logo:has(img[src*="modules/security/totp/logo"]) img { display: none; } .dp-app .modal .twofa-module .col-logo:has(img[src*="modules/security/totp/logo"])::before { content: ""; display: block; width: 4rem; height: 4rem; background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2764%27%20height=%2764%27%20viewBox=%270%200%2064%2064%27%3E%3Crect%20width=%2764%27%20height=%2764%27%20rx=%2716%27%20fill=%27%23101010%27/%3E%3Cg%20transform=%27translate%2810%2010%29%20scale%281.83%29%27%20fill=%27none%27%20stroke=%27%23ffffff%27%20stroke-width=%271.6%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%27/%3E%3Cpath%20d=%27m9%2012%202%202%204-4%27/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } /* Each method is a .twofa-module (radio + logo + description). Make it a selectable card; .active is toggled by WHMCS's own click handler. */ .dp-app .modal .twofa-module { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.625rem; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--dp-border); border-radius: 14px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .dp-app .modal .twofa-module:hover { border-color: rgba(16, 16, 16, 0.28); background: #fafafa; } .dp-app .modal .twofa-module.active { border-color: var(--dp-ink); box-shadow: 0 0 0 1px var(--dp-ink); } /* Hide the radio — the card itself is the selector (WHMCS keeps it checked in the DOM for submission). With a single method this reads as plain info. */ .dp-app .modal .twofa-module .col-radio { display: none; } .dp-app .modal .twofa-module .col-logo { display: flex; flex: 0 0 auto; width: auto; padding: 0; margin: 0; align-items: center; } .dp-app .modal .twofa-module .col-logo img { width: 3.75rem; height: 3.75rem; } .dp-app .modal .twofa-module .col-description { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; margin: 0; font-size: 0.8125rem; line-height: 1.45; color: rgba(16, 16, 16, 0.55); } .dp-app .modal .twofa-module .col-description strong { display: block; margin-bottom: 0.15rem; font-size: 0.9375rem; font-weight: 600; color: var(--dp-ink); } .dp-app .modal .twofa-module .col-description br { display: none; } /* ---- Two-factor setup steps (Connect your app: QR + verify code) ---- */ .dp-app .twofa-setup .modal-body h3 { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 600; color: var(--dp-ink); } .dp-app .twofa-setup .modal-body p { font-size: 0.875rem; line-height: 1.55; color: rgba(16, 16, 16, 0.65); } /* Manual setup key reads as a copyable code chip. */ .dp-app .twofa-setup .modal-body p strong { display: inline-block; padding: 0.1rem 0.45rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; letter-spacing: 0.04em; color: var(--dp-ink); background: #f4f4f5; border-radius: 6px; } /* QR code (inline SVG) framed in a white card. */ .dp-app .twofa-setup .modal-body div[align="center"] { margin: 0.25rem 0 1.15rem; } .dp-app .twofa-setup .modal-body div[align="center"] svg { width: 190px; height: 190px; padding: 0.5rem; background: #fff; border: 1px solid rgba(16, 16, 16, 0.12); border-radius: 14px; } /* Verify row: input + submit on one line, equal height, vertically centred. */ .dp-app .twofa-setup .modal-body .row { align-items: center; margin-left: -0.375rem; margin-right: -0.375rem; } .dp-app .twofa-setup .modal-body .row > [class*="col-"] { padding-left: 0.375rem; padding-right: 0.375rem; } .dp-app .twofa-setup .modal-body input[name="verifykey"] { height: 3rem; text-align: center; letter-spacing: 0.12em; font-weight: 600; } /* Keep the typed code large (inline font-size:18px) but shrink the placeholder. */ .dp-app .twofa-setup .modal-body input[name="verifykey"]::placeholder { font-size: 0.875rem; font-weight: 400; letter-spacing: normal; } .dp-app .twofa-setup .modal-body .row .btn { height: 3rem; width: 100%; } /* ---- Bulk action bar ---- */ .dp-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .dp-actbtn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 14px; font-weight: 500; color: var(--dp-ink); background: #fff; border: 1px solid rgba(16, 16, 16, 0.15); border-radius: 30px; cursor: pointer; transition: background 0.15s ease; } .dp-actbtn:hover { background: #f4f4f5; } /* Brand focus: kill the UA/Bootstrap ring on click; subtle ink ring on keyboard focus only. Same treatment for the pager buttons. */ .dp-actbtn:focus, .dp-pagebtn:focus { outline: none; box-shadow: none; } .dp-actbtn:focus-visible, .dp-pagebtn:focus-visible { outline: none; border-color: rgba(16, 16, 16, 0.3); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.08); } .dp-actbtn .dp-icon { width: 16px; height: 16px; } .dp-actbtn.dropdown-toggle::after { display: none; } .dp-actbtn.dropdown-toggle .dp-icon:last-child { width: 14px; height: 14px; opacity: 0.6; } .dp-dropdown { position: relative; display: inline-flex; } .dp-menu.dropdown-menu { min-width: 15rem; padding: 0.375rem; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); } .dp-menu .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: 8px; font-size: 14px; color: var(--dp-ink); } .dp-menu .dropdown-item:hover { background: #f4f4f5; } .dp-menu .dropdown-item .dp-icon { width: 16px; height: 16px; } /* ---- Card + table ---- */ .dp-card { background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 16px; } .dp-tablecard { overflow: hidden; } .dp-tablecard .table-container { overflow-x: auto; } .dp-domains .dataTables_wrapper { padding: 0; } /* Toolbar rows generated by the custom DataTables dom */ .dp-tabletop, .dp-tablebot { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem; } @media (min-width: 640px) { .dp-tabletop, .dp-tablebot { flex-direction: row; align-items: center; justify-content: space-between; } } .dp-tabletop { border-bottom: 1px solid rgba(16, 16, 16, 0.08); } .dp-tablebot { border-top: 1px solid rgba(16, 16, 16, 0.08); } .dp-domains .dataTables_length label { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 13px; font-weight: 400; color: rgba(16, 16, 16, 0.6); } .dp-domains .dataTables_length select { height: 34px; padding: 0 0.75rem; font-size: 13px; font-weight: 500; color: var(--dp-ink); background: #fff; border: 1px solid rgba(16, 16, 16, 0.15); border-radius: 8px; outline: none; } .dp-domains .dataTables_filter label { margin: 0; } .dp-domains .dataTables_filter input { width: 100%; height: 36px; padding: 0 1rem; font-size: 13px; color: var(--dp-ink); background: #fff; border: 1px solid rgba(16, 16, 16, 0.15); border-radius: 30px; outline: none; } @media (min-width: 640px) { .dp-domains .dataTables_filter input { width: 16rem; } } .dp-domains .dataTables_filter input:focus { border-color: rgba(16, 16, 16, 0.3); } .dp-domains .dataTables_info { padding: 0; font-size: 13px; color: rgba(16, 16, 16, 0.55); } .dp-domains .dataTables_paginate { display: flex; gap: 0.375rem; } .dp-domains .dataTables_paginate .paginate_button, .dp-domains .dataTables_paginate .page-link { display: inline-block; padding: 0.4rem 1rem; border: 1px solid rgba(16, 16, 16, 0.15); border-radius: 30px; font-size: 13px; font-weight: 600; color: var(--dp-ink) !important; background: #fff; cursor: pointer; } .dp-domains .dataTables_paginate .paginate_button:hover, .dp-domains .dataTables_paginate .page-link:hover { background: #f4f4f5; } .dp-domains .dataTables_paginate .paginate_button.current { background: var(--dp-ink); color: #fff !important; border-color: var(--dp-ink); } .dp-domains .dataTables_paginate .paginate_button.disabled, .dp-domains .dataTables_paginate .page-item.disabled .page-link { color: rgba(16, 16, 16, 0.4) !important; cursor: not-allowed; } .dp-domains .dataTables_paginate .page-item.active .page-link { background: var(--dp-ink); color: #fff !important; border-color: var(--dp-ink); } .dp-domains .pagination { margin: 0; gap: 0.375rem; } /* Table itself */ .dp-domains table#tableDomainsList { width: 100% !important; margin: 0; border-collapse: collapse; } .dp-domains #tableDomainsList thead th { padding: 0.75rem 1.25rem; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(16, 16, 16, 0.5); background: transparent; border-bottom: 1px solid rgba(16, 16, 16, 0.08); } .dp-domains #tableDomainsList tbody td { padding: 0.875rem 1.25rem; font-size: 14px; color: var(--dp-ink); vertical-align: middle; border-bottom: 1px solid rgba(16, 16, 16, 0.08); } .dp-domains #tableDomainsList tbody tr { cursor: pointer; transition: background 0.1s ease; } .dp-domains #tableDomainsList tbody tr:hover { background: #f4f4f5; } .dp-domains #tableDomainsList tbody tr:last-child td { border-bottom: 0; } .dp-domains #tableDomainsList input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--dp-ink); cursor: pointer; } .dp-domain-name { color: var(--dp-ink); font-weight: 600; text-decoration: none; } .dp-domain-name:hover { text-decoration: underline; } .dp-domain-autorenew { font-size: 12px; color: rgba(16, 16, 16, 0.5); } /* Status badges */ .dp-domains .status { display: inline-flex; align-items: center; padding: 0.15rem 0.625rem; border-radius: 9999px; font-size: 12px; font-weight: 600; } .dp-domains .status-active { background: rgba(16, 185, 129, 0.15); color: #059669; } .dp-domains .status-pending, .dp-domains .status-pendingtransfer, .dp-domains .status-pendingregistration { background: rgba(245, 158, 11, 0.15); color: #b45309; } .dp-domains .status-expired, .dp-domains .status-cancelled, .dp-domains .status-terminated, .dp-domains .status-fraud, .dp-domains .status-transferredaway { background: rgba(16, 16, 16, 0.1); color: rgba(16, 16, 16, 0.5); } /* ---- Custom domains table (replaces DataTables) ---- */ .dp-selcount { margin-left: 0.25rem; font-size: 13px; font-weight: 500; color: rgba(16, 16, 16, 0.5); } .dp-length { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 13px; font-weight: 400; color: rgba(16, 16, 16, 0.6); } .dp-length select { height: 34px; padding: 0 0.75rem; font-size: 13px; font-weight: 500; color: var(--dp-ink); background: #fff; border: 1px solid rgba(16, 16, 16, 0.15); border-radius: 8px; outline: none; cursor: pointer; } .dp-search { position: relative; width: 100%; } @media (min-width: 640px) { .dp-search { width: 16rem; } } .dp-search__icon { position: absolute; top: 50%; left: 0.875rem; transform: translateY(-50%); display: flex; color: rgba(16, 16, 16, 0.4); pointer-events: none; } .dp-search__icon .dp-icon { width: 16px; height: 16px; } .dp-search input { width: 100%; height: 36px; padding: 0 2.25rem; font-size: 13px; color: var(--dp-ink); background: #fff; border: 1px solid rgba(16, 16, 16, 0.15); border-radius: 30px; outline: none; } .dp-search input:focus { border-color: rgba(16, 16, 16, 0.3); } .dp-search input::placeholder { color: rgba(16, 16, 16, 0.4); } .dp-search__clear { position: absolute; top: 50%; right: 0.625rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 999px; background: transparent; color: rgba(16, 16, 16, 0.4); cursor: pointer; } .dp-search__clear:hover { background: #f4f4f5; color: var(--dp-ink); } .dp-search__clear .dp-icon { width: 15px; height: 15px; } /* Table */ .dp-tablewrap { overflow-x: auto; } .dp-table { width: 100%; border-collapse: collapse; text-align: left; } .dp-table thead th { padding: 0.75rem 1.25rem; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(16, 16, 16, 0.5); border-bottom: 1px solid rgba(16, 16, 16, 0.08); white-space: nowrap; } .dp-th-check { width: 2.5rem; } .dp-th-sort { cursor: pointer; user-select: none; } .dp-th-inner { display: inline-flex; align-items: center; gap: 0.375rem; } .dp-sort-arrows { display: inline-flex; flex-direction: column; line-height: 0; } .dp-sort-arrows .dp-icon { display: block; width: 11px; height: 11px; color: rgba(16, 16, 16, 0.28); } .dp-sort-arrows .dp-icon:first-child { margin-bottom: -4px; } .dp-th-sort[data-sortdir="asc"] .dp-sort-arrows .dp-icon:first-child { color: var(--dp-ink); } .dp-th-sort[data-sortdir="desc"] .dp-sort-arrows .dp-icon:last-child { color: var(--dp-ink); } .dp-table tbody td { padding: 0.875rem 1.25rem; font-size: 14px; color: var(--dp-ink); vertical-align: middle; border-bottom: 1px solid rgba(16, 16, 16, 0.08); } .dp-table tbody tr.dp-drow { cursor: pointer; transition: background 0.1s ease; } .dp-table tbody tr.dp-drow:hover { background: #f4f4f5; } .dp-table tbody tr:last-child td, .dp-table tbody tr.dp-drow:last-of-type td { border-bottom: 0; } .dp-td-muted { color: rgba(16, 16, 16, 0.7); } .dp-td-check input[type="checkbox"], .dp-th-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--dp-ink); cursor: pointer; } .dp-domain-name { color: var(--dp-ink); font-weight: 600; } .dp-table .dp-empty-row td { padding: 3.5rem 1.25rem !important; text-align: center; font-size: 14px; color: rgba(16, 16, 16, 0.45); border-bottom: 0 !important; } /* Status badge */ .dp-badge { display: inline-flex; align-items: center; padding: 0.15rem 0.625rem; border-radius: 9999px; font-size: 12px; font-weight: 600; background: rgba(16, 16, 16, 0.1); color: rgba(16, 16, 16, 0.55); } .dp-badge--active { background: rgba(16, 185, 129, 0.15); color: #059669; } .dp-badge--pending, .dp-badge--pendingtransfer, .dp-badge--pendingregistration { background: rgba(245, 158, 11, 0.15); color: #b45309; } /* Service statuses */ .dp-badge--suspended, .dp-badge--fraud { background: rgba(220, 38, 38, 0.12); color: #b42318; } /* terminated / cancelled / completed fall back to the neutral grey badge. */ /* Invoice statuses */ .dp-badge--paid { background: rgba(16, 185, 129, 0.15); color: #059669; } .dp-badge--unpaid, .dp-badge--paymentpending { background: rgba(245, 158, 11, 0.15); color: #b45309; } .dp-badge--collections { background: rgba(220, 38, 38, 0.12); color: #b42318; } /* cancelled / refunded / draft fall back to the neutral grey badge. */ /* Service list cells */ .dp-service-name { display: block; font-weight: 600; color: var(--dp-ink); } .dp-service-sub { display: block; margin-top: 2px; font-size: 12px; color: rgba(16, 16, 16, 0.5); } .dp-service-cycle { font-size: 12px; color: rgba(16, 16, 16, 0.45); } /* Footer */ .dp-tableinfo { margin: 0; font-size: 13px; color: rgba(16, 16, 16, 0.55); } .dp-pager { display: flex; gap: 0.375rem; } .dp-pagebtn { padding: 0.5rem 1.1rem; font-size: 13px; font-weight: 600; color: var(--dp-ink); background: #fff; border: 1px solid rgba(16, 16, 16, 0.15); border-radius: 30px; cursor: pointer; transition: background 0.15s ease; } .dp-pagebtn:hover:not(:disabled) { background: #f4f4f5; } .dp-pagebtn:disabled { color: rgba(16, 16, 16, 0.35); cursor: not-allowed; } /* ---- No-selection warning (bulk actions) ---- */ .dp-warn { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.1); border-radius: 12px; } .dp-bulkgroup { display: flex; flex-direction: column; gap: 0.75rem; } .dp-warn__icon { display: flex; margin-top: 2px; flex: 0 0 auto; color: #d97706; } .dp-warn__icon .dp-icon { width: 16px; height: 16px; } .dp-warn__text { flex: 1 1 auto; margin: 0; font-size: 13px; font-weight: 500; color: #b45309; } .dp-warn__close { display: flex; flex: 0 0 auto; border: 0; background: transparent; color: rgba(217, 119, 6, 0.7); cursor: pointer; } .dp-warn__close:hover { color: #b45309; } .dp-warn__close .dp-icon { width: 16px; height: 16px; } /* ---- Toasts ---- */ .dp-toasts { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.5rem; max-width: calc(100vw - 3rem); pointer-events: none; } .dp-toast { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 17rem; max-width: 24rem; padding: 0.75rem 0.875rem; background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 12px; box-shadow: 0 12px 32px rgba(10, 42, 56, 0.16); opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: auto; } .dp-toast.is-in { opacity: 1; transform: none; } .dp-toast.is-out { opacity: 0; transform: translateY(8px); } .dp-toast__icon { display: flex; flex: 0 0 auto; margin-top: 1px; } .dp-toast--success .dp-toast__icon { color: #059669; } .dp-toast--error .dp-toast__icon { color: #dc2626; } .dp-toast--info .dp-toast__icon { color: #2563eb; } .dp-toast__msg { flex: 1 1 auto; font-size: 14px; line-height: 1.4; color: var(--dp-ink); } .dp-toast__close { flex: 0 0 auto; padding: 0 0 0 0.25rem; border: 0; background: transparent; font-size: 18px; line-height: 1; color: rgba(16, 16, 16, 0.4); cursor: pointer; } .dp-toast__close:hover { color: var(--dp-ink); } /* ---- Support tickets ---- */ .dp-ticket-num { display: inline-block; margin-right: 0.5rem; font-size: 12px; font-weight: 600; color: rgba(16, 16, 16, 0.4); } .dp-ticket-subject { color: var(--dp-ink); font-weight: 500; } .dp-ticket-subject.is-unread { font-weight: 700; } .dp-tickets .dp-drow:hover .dp-ticket-subject { text-decoration: underline; } /* Ticket status badge tones (custom colours come from inline style) */ .dp-badge--open, .dp-badge--answered, .dp-badge--inprogress { background: rgba(16, 185, 129, 0.15); color: #059669; } .dp-badge--customer-reply, .dp-badge--onhold { background: rgba(245, 158, 11, 0.15); color: #b45309; } /* ---- Submit ticket: department picker ---- */ .dp-submitticket { display: flex; flex-direction: column; gap: 1.5rem; } .dp-submitticket__head { padding-bottom: 1.5rem; border-bottom: 1px solid rgba(16, 16, 16, 0.1); } .dp-submitticket__head h1 { margin: 0; font-size: 24px; font-weight: 600; color: var(--dp-ink); } .dp-submitticket__head p { margin: 0.375rem 0 0; max-width: 42rem; font-size: 14px; line-height: 1.6; color: rgba(16, 16, 16, 0.6); } .dp-deptgrid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .dp-deptgrid { grid-template-columns: 1fr 1fr; } } .dp-deptcard { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; text-align: left; background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 16px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dp-deptcard:hover { border-color: rgba(16, 16, 16, 0.25); } .dp-deptcard.is-selected { border-color: var(--dp-ink); box-shadow: 0 0 0 2px rgba(16, 16, 16, 0.1); } .dp-deptcard__icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; } .dp-deptcard__icon .dp-icon { width: 20px; height: 20px; } .dp-deptcard__text { flex: 1 1 auto; min-width: 0; } .dp-deptcard__text h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--dp-ink); } .dp-deptcard__text p { margin: 0.25rem 0 0; font-size: 13px; line-height: 1.4; color: rgba(16, 16, 16, 0.6); } .dp-deptcard__radio { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-top: 2px; border: 1px solid rgba(16, 16, 16, 0.2); border-radius: 999px; color: #fff; transition: background 0.15s ease, border-color 0.15s ease; } .dp-deptcard__radio .dp-icon { width: 12px; height: 12px; opacity: 0; } .dp-deptcard.is-selected .dp-deptcard__radio { background: var(--dp-ink); border-color: var(--dp-ink); } .dp-deptcard.is-selected .dp-deptcard__radio .dp-icon { opacity: 1; } .dp-submitticket__actions { display: flex; justify-content: flex-end; } .dp-continue { width: auto; padding: 0.625rem 1.5rem; } .dp-continue[aria-disabled="true"] { pointer-events: none; color: rgba(16, 16, 16, 0.3); background: #f4f4f5; border-color: rgba(16, 16, 16, 0.1); } /* Extra department tints */ .dp-tint-purple { background: rgba(222, 215, 244, 0.7); color: #2e2555; } .dp-tint-pink { background: rgba(244, 217, 228, 0.7); color: #5a2440; } .dp-tint-grey { background: rgba(16, 16, 16, 0.06); color: rgba(16, 16, 16, 0.7); } /* ---- Submit ticket: step two (the form) ---- */ /* Plain head variant: no bottom rule, tighter gap to the card below. */ .dp-submitticket__head--plain { padding-bottom: 0; border-bottom: 0; } .dp-ticketform { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 16px; } @media (max-width: 640px) { .dp-ticketform { padding: 1.25rem; } } /* Two-up field row that stacks on small screens. */ .dp-tf-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .dp-tf-grid { grid-template-columns: 1fr 1fr; } } /* Text inputs */ .dp-tf-input { width: 100%; height: auto; padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--dp-ink); background: #fff; border: 1px solid var(--dp-border); border-radius: 12px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dp-tf-input::placeholder { color: var(--dp-faint); } .dp-tf-input:focus { border-color: rgba(16, 16, 16, 0.3); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.06); } .dp-tf-input--readonly { color: rgba(16, 16, 16, 0.7); background: #f4f4f5; cursor: default; } /* Selects — native control with a Lucide chevron overlaid. */ .dp-tf-select { position: relative; display: block; } .dp-tf-select select { width: 100%; height: auto; padding: 0.625rem 2.5rem 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--dp-ink); background: #fff; border: 1px solid var(--dp-border); border-radius: 12px; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dp-tf-select select:focus { border-color: rgba(16, 16, 16, 0.3); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.06); } .dp-tf-select .dp-icon { position: absolute; top: 50%; right: 0.875rem; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--dp-faint); pointer-events: none; } /* Message textarea (WHMCS enhances this with its markdown editor; these styles apply to the raw textarea and cascade sensibly into the editor wrapper). */ .dp-tf-textarea { width: 100%; min-height: 12rem; padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.6; color: var(--dp-ink); background: #fff; border: 1px solid var(--dp-border); border-radius: 12px; outline: none; resize: vertical; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dp-tf-textarea:focus { border-color: rgba(16, 16, 16, 0.3); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.06); } /* Round WHMCS's Bootstrap-Markdown editor (.md-editor > .md-header / textarea / .md-footer) to match the rest of the form. */ .dp-ticketform .md-editor { border-color: var(--dp-border); border-radius: 12px; overflow: hidden; } .dp-ticketform .md-editor.active { border-color: rgba(16, 16, 16, 0.3); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.06); } .dp-ticketform .md-editor > .md-header { border-radius: 12px 12px 0 0; } .dp-ticketform .md-editor > .md-footer { border-radius: 0 0 12px 12px; } /* Attachments — restyle Bootstrap's custom-file so the field is a rounded input with a black "Browse" pill (its ::after) floating inside on the right. */ .dp-tf-attach .custom-file, .dp-tf-attach .custom-file-input { height: 2.75rem; cursor: pointer; } .dp-tf-attach .custom-file-label { display: flex; align-items: center; height: 2.75rem; margin: 0; padding: 0 8.5rem 0 1rem; /* right padding leaves room for the pill */ font-size: 0.8125rem; color: rgba(16, 16, 16, 0.55); background: #fff; border: 1px solid var(--dp-border); border-radius: 12px; } .dp-tf-attach .custom-file-input:focus ~ .custom-file-label { border-color: rgba(16, 16, 16, 0.3); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.06); } .dp-tf-attach .custom-file-label::after { content: "Browse"; position: absolute; top: 50%; right: 0.375rem; bottom: auto; transform: translateY(-50%); display: flex; align-items: center; height: auto; padding: 0.4rem 1.1rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; color: #fff; background: var(--dp-ink); border: 0; border-radius: 30px; transition: background-color 0.15s ease; } .dp-tf-attach .custom-file:hover .custom-file-label::after { background: rgba(16, 16, 16, 0.85); } /* Bootstrap squares the right corners of a custom-file that isn't the input group's last child (here the "Add more" button follows it). Restore them so the field stays rounded and the Browse pill keeps its full radius. */ .dp-tf-attach .input-group > .custom-file:not(:last-child) .custom-file-label { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .dp-tf-attach .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-radius: 30px; } .dp-tf-attach .attachment-group { gap: 0.5rem; } .dp-tf-attachadd { display: inline-flex; align-items: center; gap: 0.375rem; height: 2.75rem; padding: 0 1.1rem; font-size: 0.8125rem; font-weight: 600; color: var(--dp-ink); background: #fff; border: 1px solid var(--dp-border); border-radius: 12px; /* rounded rectangle, matching the input */ cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease; } .dp-tf-attachadd:hover { background: #f4f4f5; } .dp-tf-attachadd .dp-icon { width: 1rem; height: 1rem; } .dp-tf-hint { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--dp-faint); } /* Custom fields (only rendered when a department defines them). */ .dp-tf-customfields:empty { display: none; } .dp-tf-customfields .form-control, .dp-tf-customfields select { border-radius: 12px; border-color: var(--dp-border); } .dp-tf-captcha { display: flex; justify-content: center; } /* Footer: change-department link + submit button */ .dp-tf-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(16, 16, 16, 0.08); } .dp-tf-back { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: rgba(16, 16, 16, 0.55); text-decoration: none; } .dp-tf-back:hover { color: var(--dp-ink); } .dp-tf-back .dp-icon { width: 1rem; height: 1rem; } /* Button that sizes to content rather than the full-width default. */ .dp-btn--auto { width: auto; padding-inline: 1.75rem; } /* Destructive outline button (close ticket). */ .dp-btn--danger { color: #b42318; background: #fff; border-color: rgba(180, 35, 24, 0.3); } .dp-btn--danger:hover { color: #912018; background: rgba(180, 35, 24, 0.06); } .dp-btn--danger:disabled { color: rgba(16, 16, 16, 0.35); background: #f4f4f5; border-color: rgba(16, 16, 16, 0.1); cursor: default; } .dp-btn .dp-icon { width: 1rem; height: 1rem; } /* Right-aligned form footer (reply form has no left link). */ .dp-tf-foot--end { justify-content: flex-end; } /* ============================================================ ACCOUNT & CONTACT FORMS (reuse the submit-ticket field styling) ============================================================ */ .dp-accountform { display: flex; flex-direction: column; gap: 2rem; } /* Small uppercase section label inside a form card (sits above the fields). */ .dp-tf-section { margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(16, 16, 16, 0.45); } .dp-req { color: #b42318; } /* Uneditable / disabled fields read as read-only. */ .dp-tf-input:disabled, .dp-tf-select select:disabled { color: rgba(16, 16, 16, 0.5); background: #f4f4f5; cursor: default; } /* Contact picker (select + Go), its own card above the form. */ .dp-contactpick { padding: 1rem 1.25rem; background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 16px; } .dp-contactpick__row { display: flex; gap: 0.75rem; align-items: center; } .dp-contactpick__row .dp-tf-select { flex: 1 1 auto; } /* Email-preference / opt-in checkboxes — custom box + drawn tick, each option in its own bordered row so the list reads like a settings toggle list. */ .dp-tf-checks { display: flex; flex-direction: column; gap: 0.625rem; } .dp-tf-checks label { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0.75rem 0.875rem; font-size: 0.875rem; font-weight: 500; color: var(--dp-ink); background: #fff; border: 1px solid var(--dp-border); border-radius: 12px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .dp-tf-checks label:hover { border-color: rgba(16, 16, 16, 0.25); background: #fafafa; } .dp-tf-checks input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0; background: #fff; border: 1.5px solid rgba(16, 16, 16, 0.25); border-radius: 6px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .dp-tf-checks input[type="checkbox"]:checked { background: var(--dp-ink); border-color: var(--dp-ink); } .dp-tf-checks input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .dp-tf-checks input[type="checkbox"]:focus-visible { outline: none; border-color: rgba(16, 16, 16, 0.5); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.1); } /* Footer with a left-aligned danger action and a right-aligned save group. */ .dp-tf-foot__right { display: flex; align-items: center; gap: 0.75rem; } /* WHMCS uses .w-hidden to toggle elements (e.g. the 2FA enable/disable buttons on the security page). Ensure it hides globally in the dashboard shell, not just inside the cart. */ .dp-app .w-hidden { display: none !important; } /* Fallback: normalise any raw WHMCS input/textarea (custom / extra fields) to match dp-tf-input. Selects are intentionally excluded — the ones we render are wrapped in .dp-tf-select (which owns the chevron); double-styling a select here would produce two arrows. */ .dp-ticketform input.form-control, .dp-ticketform textarea.form-control { width: 100%; height: auto; padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--dp-ink); background: #fff; border: 1px solid var(--dp-border); border-radius: 12px; outline: none; box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dp-ticketform input.form-control:focus, .dp-ticketform textarea.form-control:focus { border-color: rgba(16, 16, 16, 0.3); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.06); } /* ============================================================ VIEW TICKET (thread + reply, same language as submit ticket) ============================================================ */ .dp-viewticket { display: flex; flex-direction: column; gap: 1.5rem; } .dp-vt-head { display: flex; flex-direction: column; gap: 0.875rem; } .dp-vt-back { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: rgba(16, 16, 16, 0.55); text-decoration: none; } .dp-vt-back:hover { color: var(--dp-ink); } .dp-vt-back .dp-icon { width: 1rem; height: 1rem; } .dp-vt-head__row { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 720px) { .dp-vt-head__row { flex-direction: row; align-items: flex-start; justify-content: space-between; } } .dp-vt-title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; min-width: 0; } .dp-vt-title__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; min-width: 0; } .dp-vt-title h1 { margin: 0; font-size: 22px; font-weight: 600; color: var(--dp-ink); } .dp-vt-title .dp-ticket-num { font-size: 14px; font-weight: 600; color: var(--dp-faint); } /* Copy-to-clipboard ticket number */ .dp-ticket-copy { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.15rem 0.5rem; margin-left: -0.5rem; /* keep the number optically aligned with the title */ background: transparent; border: 0; border-radius: 8px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .dp-ticket-copy:hover { color: var(--dp-ink); background: rgba(16, 16, 16, 0.05); } .dp-ticket-copy__icon { display: inline-flex; } .dp-ticket-copy__icon .dp-icon { width: 0.85rem; height: 0.85rem; } .dp-ticket-copy__icon--ok { display: none; color: #059669; } /* Swap the copy glyph for a check while the "copied" state is active. */ .dp-ticket-copy.is-copied .dp-ticket-copy__icon[data-copy] { display: none; } .dp-ticket-copy.is-copied .dp-ticket-copy__icon--ok { display: inline-flex; } .dp-vt-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; } /* Closed-ticket notice */ .dp-vt-notice { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1.125rem; font-size: 0.875rem; color: #b45309; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 12px; } .dp-vt-notice .dp-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; } /* ---- Thread: one card, title row + replies divided inside it ---- */ .dp-thread { background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 16px; overflow: hidden; } .dp-thread__head { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(16, 16, 16, 0.1); background: #fff; } @media (min-width: 720px) { .dp-thread__head { flex-direction: row; align-items: flex-start; justify-content: space-between; } } .dp-msg { display: flex; gap: 1rem; padding: 1.25rem 1.5rem; background: #fff; border-bottom: 1px solid rgba(16, 16, 16, 0.08); } .dp-msg:last-child { border-bottom: 0; } /* Staff replies stand apart: subtle tint + ink left accent. */ .dp-msg--staff { background: #f7f7fb; box-shadow: inset 3px 0 0 var(--dp-ink); } .dp-msg__avatar { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; } /* Staff replies keep the ink avatar to stay distinct from the client. */ .dp-msg--staff .dp-msg__avatar { color: #fff; background: var(--dp-ink); } .dp-msg__main { flex: 1 1 auto; min-width: 0; } .dp-msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .dp-msg__name { font-size: 0.9375rem; font-weight: 600; color: var(--dp-ink); } .dp-msg__role { padding: 0.1rem 0.5rem; font-size: 11px; font-weight: 600; border-radius: 999px; background: rgba(16, 16, 16, 0.08); color: rgba(16, 16, 16, 0.6); } .dp-msg__role--admin, .dp-msg__role--operator { background: rgba(16, 16, 16, 0.9); color: #fff; } .dp-msg__date { margin-left: auto; font-size: 12px; color: var(--dp-faint); } .dp-msg__body { font-size: 0.875rem; line-height: 1.65; color: rgba(16, 16, 16, 0.85); word-wrap: break-word; overflow-wrap: break-word; } .dp-msg__body p:last-child { margin-bottom: 0; } .dp-msg__body hr { margin: 0.875rem 0; border: 0; border-top: 1px solid rgba(16, 16, 16, 0.1); } .dp-msg__ip { font-size: 12px; color: var(--dp-faint); } .dp-msg__rating { margin-top: 0.75rem; } /* Attachments on a reply */ .dp-msg__attach { margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid rgba(16, 16, 16, 0.08); } .dp-msg__attach-head { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: rgba(16, 16, 16, 0.6); } .dp-msg__attach-head .dp-icon { width: 0.95rem; height: 0.95rem; } .dp-attach-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.625rem; margin-top: 0.625rem; } /* Image thumbnail preview — compact bordered card, name beneath. */ .dp-attach-thumb { display: flex; flex-direction: column; width: 104px; background: #fff; border: 1px solid var(--dp-border); border-radius: 10px; overflow: hidden; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dp-attach-thumb:hover { border-color: rgba(16, 16, 16, 0.3); box-shadow: 0 2px 8px rgba(16, 16, 16, 0.08); } .dp-attach-thumb__img { display: block; height: 72px; background: #f4f4f5; } .dp-attach-thumb__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .dp-attach-thumb__name { padding: 0.3rem 0.5rem; font-size: 11px; color: rgba(16, 16, 16, 0.7); border-top: 1px solid rgba(16, 16, 16, 0.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Attachment preview modal (lightbox) ---- */ .dp-modal[hidden] { display: none; } .dp-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .dp-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 16, 16, 0.55); opacity: 0; transition: opacity 0.2s ease; } .dp-modal.is-open .dp-modal__backdrop { opacity: 1; } .dp-modal__dialog { position: relative; display: flex; flex-direction: column; max-width: min(92vw, 900px); max-height: 88vh; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease; } .dp-modal.is-open .dp-modal__dialog { opacity: 1; transform: none; } .dp-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.875rem 0.75rem 1.25rem; border-bottom: 1px solid rgba(16, 16, 16, 0.1); } .dp-modal__title { min-width: 0; font-size: 0.875rem; font-weight: 600; color: var(--dp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp-modal__actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; } .dp-modal__download { padding-inline: 1rem; } .dp-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--dp-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .dp-modal__close:hover { color: var(--dp-ink); background: rgba(16, 16, 16, 0.05); } .dp-modal__close .dp-icon { width: 1.1rem; height: 1.1rem; } .dp-modal__body { display: flex; align-items: center; justify-content: center; padding: 1rem; background: #f4f4f5; overflow: auto; } .dp-modal__body img { max-width: 100%; max-height: calc(88vh - 4.5rem); object-fit: contain; border-radius: 8px; display: block; } body.dp-modal-open { overflow: hidden; } /* Small centered modal (confirmations) */ .dp-modal--sm .dp-modal__dialog { max-width: min(92vw, 400px); } .dp-confirm { padding: 1.75rem 1.5rem 1.5rem; text-align: center; } .dp-confirm__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: 0.875rem; color: #b42318; background: rgba(180, 35, 24, 0.1); border-radius: 999px; } .dp-confirm__icon .dp-icon { width: 1.4rem; height: 1.4rem; } .dp-confirm__title { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--dp-ink); } .dp-confirm__text { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.55; color: rgba(16, 16, 16, 0.6); } .dp-confirm__actions { display: flex; justify-content: center; gap: 0.625rem; margin-top: 1.5rem; } /* Solid destructive button (confirm close). */ .dp-btn--danger-solid { color: #fff; background: #b42318; border-color: #b42318; } .dp-btn--danger-solid:hover { color: #fff; background: #912018; border-color: #912018; } /* ---- Ticket-created confirmation (submit step 3) ---- */ .dp-confirmpage { display: flex; justify-content: center; padding-block: 1rem 2rem; } .dp-confirmcard { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 3.5rem 2rem; text-align: center; background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 16px; } .dp-confirmcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; color: #059669; background: rgba(16, 185, 129, 0.12); border-radius: 999px; } .dp-confirmcard__icon .dp-icon { width: 1.6rem; height: 1.6rem; } .dp-confirmcard__title { margin: 0; font-size: 22px; font-weight: 600; color: var(--dp-ink); } .dp-confirmcard__text { margin: 0.625rem 0 0; max-width: 26rem; font-size: 14px; line-height: 1.6; color: rgba(16, 16, 16, 0.6); } .dp-confirmcard__ref { display: inline-flex; align-items: center; margin-top: 1.25rem; padding: 0.4rem 0.875rem; font-size: 13px; font-weight: 600; color: var(--dp-ink); background: #f4f4f5; border: 1px solid var(--dp-border); border-radius: 999px; text-decoration: none; } .dp-confirmcard__ref:hover { border-color: rgba(16, 16, 16, 0.3); } .dp-confirmcard__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin-top: 1.75rem; } /* ---- Domain transfer (standard_cart order form, public chrome) ---- */ /* No .dp-app ancestor here, so set the font/colour on the wrapper itself. */ .dp-cartpage { font-family: var(--dp-font); color: var(--dp-ink); } /* Vertical padding lives here, not on #order-standard_cart — the order form's own `#order-standard_cart{padding:0 0 40px 0}` (an ID) would override a class rule on that element and zero out the top. */ .dp-cart-wrap { width: 100%; max-width: 40rem; margin: 0 auto; padding: 4rem 1rem 4.5rem; } .dp-transfercard { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem; } .dp-transfer-help { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 12px; font-weight: 600; color: var(--dp-muted); text-decoration: none; cursor: help; } .dp-transfer-help:hover { color: var(--dp-ink); } .dp-transfer-help .dp-icon { width: 0.9rem; height: 0.9rem; } .dp-transfer-alert { margin: 0; padding: 0.75rem 1rem; border-radius: 12px; font-size: 13px; } .dp-transfer-captcha { font-size: 13px; color: var(--dp-muted); } .dp-transfer-captcha p { margin: 0 0 0.5rem; } .dp-transfer-captcha__row { display: flex; align-items: center; gap: 0.75rem; } .dp-transfer-captcha__row img { border-radius: 8px; } .dp-transfer-captcha__row .dp-tf-input { max-width: 8rem; } .dp-transfer-actions { display: flex; justify-content: flex-end; } .dp-transfer-actions .dp-btn .dp-icon { width: 1rem; height: 1rem; } #addTransferLoader .dp-icon { animation: dp-spin 0.8s linear infinite; } @keyframes dp-spin { to { transform: rotate(360deg); } } .dp-transfer-note { margin: 1rem 0 0; text-align: center; font-size: 12px; color: var(--dp-faint); } /* ============================================================ MARKETING CHROME (public / logged-out cart) — mirrors apps/web ============================================================ */ .dp-market-body { font-family: var(--dp-font); color: var(--dp-ink); background: #fff; /* Stock theme.min sets `html, body { height: 100% }` (= one viewport tall). That traps the sticky site nav: its containing block (the body) ends ~one viewport down, so the nav + subnav un-stick and scroll away mid-page. The marketing/cart body must be content-height so the sticky header stays pinned the whole way. */ height: auto !important; min-height: 100vh; min-height: 100dvh; } /* Kill nexus's global `a:hover { text-decoration: underline }` on the public cart chrome (the dashboard does the same under .dp-app). */ .dp-market-body a, .dp-market-body a:hover, .dp-market-body a:focus { text-decoration: none; } /* Announcement bar — mirrors apps/web's launch banner (#BCE7F3). */ .dp-announce { position: relative; z-index: 41; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.625rem 1rem; background: #BCE7F3; color: #0c2a33; font-family: var(--dp-font); font-size: 0.875rem; } .dp-announce__msg { margin: 0; text-align: center; } .dp-announce__cta { margin-left: 0.5rem; font-weight: 500; color: inherit; text-decoration: underline; text-underline-offset: 2px; } .dp-announce__cta:hover { text-decoration: none; } .dp-announce__close { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.25rem; padding: 0.25rem; border: 0; background: transparent; border-radius: 0.25rem; color: rgba(12, 42, 51, 0.6); cursor: pointer; transition: background-color 0.15s, color 0.15s; } .dp-announce__close:hover { background: rgba(12, 42, 51, 0.1); color: #0c2a33; } /* Cart hero — full-width dark-blue gradient band (reuses the pagehead gradient). Inner content is constrained to the 80rem site box so the title lines up with the navbar/footer/cart gutter. */ .dp-cart-hero { position: relative; overflow: hidden; background: #0a2a38; } .dp-cart-hero__media { position: absolute; inset: 0; background: url("../img/hero-gradient.jpg") center / cover no-repeat; } .dp-cart-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top right, rgba(10, 42, 56, 0.65), rgba(10, 42, 56, 0.2) 60%, rgba(10, 42, 56, 0.05)); } .dp-cart-hero__inner { position: relative; max-width: 80rem; margin: 0 auto; padding: 2.75rem 1.5rem 5.5rem; color: #fff; } .dp-cart-hero__title { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.01em; color: #fff; } .dp-cart-hero__sub { margin: 0.4rem 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.8); } @media (min-width: 640px) { .dp-cart-hero__inner { padding: 3.25rem 1.5rem 6rem; } .dp-cart-hero__title { font-size: 36px; } } /* Hero replaces the plain in-cart title — hide it to avoid duplication. */ #order-standard_cart .header-lined { display: none !important; } .dp-mkt { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--dp-border); font-family: var(--dp-font); color: var(--dp-ink); } .dp-mkt__bar { display: flex; align-items: center; gap: 1.5rem; max-width: 80rem; margin: 0 auto; height: 64px; padding-inline: 1.5rem; } .dp-mkt__brand { flex: 0 0 auto; } .dp-mkt__brand img { height: 28px; width: auto; display: block; } .dp-mkt__nav { display: none; align-items: center; gap: 0.25rem; } @media (min-width: 900px) { .dp-mkt__nav { display: flex; } } .dp-mkt-item { position: relative; } .dp-mkt-item__trigger { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 1rem; font-size: 14px; font-weight: 600; color: var(--dp-ink); text-decoration: none; border-radius: 30px; transition: background-color 0.15s ease; } .dp-mkt-item__trigger .dp-icon { width: 14px; height: 14px; color: rgba(16, 16, 16, 0.5); transition: transform 0.2s ease; } .dp-mkt-item:hover .dp-mkt-item__trigger, .dp-mkt-item:focus-within .dp-mkt-item__trigger { background: #f4f4f5; } .dp-mkt-item:hover .dp-mkt-item__trigger .dp-icon, .dp-mkt-item:focus-within .dp-mkt-item__trigger .dp-icon { transform: rotate(180deg); } .dp-mkt-menu { position: absolute; top: 100%; left: 0; padding-top: 0.5rem; /* hover bridge */ opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 50; } .dp-mkt-item:hover .dp-mkt-menu, .dp-mkt-item:focus-within .dp-mkt-menu { opacity: 1; visibility: visible; transform: none; } .dp-mkt-menu__card { width: 20rem; padding: 0.375rem; background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 16px; box-shadow: 0 16px 40px rgba(16, 16, 16, 0.1); } .dp-mkt-menu__link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 12px; text-decoration: none; transition: background-color 0.15s ease; } .dp-mkt-menu__link:hover { background: #f4f4f5; } .dp-mkt-menu__icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; } .dp-mkt-menu__icon .dp-icon { width: 1rem; height: 1rem; } .dp-mkt-menu__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .dp-mkt-menu__label { font-size: 14px; font-weight: 600; color: var(--dp-ink); } .dp-mkt-menu__desc { font-size: 12px; line-height: 1.35; color: rgba(16, 16, 16, 0.5); } .dp-mkt__actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .dp-mkt__account { display: none; padding: 8px 24px; } @media (min-width: 900px) { .dp-mkt__account { display: inline-flex; } } .dp-mkt__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; color: var(--dp-ink); text-decoration: none; transition: background-color 0.15s ease; } .dp-mkt__cart:hover { background: #f4f4f5; } .dp-mkt__cart .dp-icon { width: 1.25rem; height: 1.25rem; } .dp-mkt__cartcount { position: absolute; top: 2px; right: 2px; min-width: 1rem; height: 1rem; padding: 0 0.2rem; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; background: var(--dp-ink); border-radius: 999px; } .dp-mkt__cartcount--empty { display: none; } .dp-mkt__toggle { display: none; } .dp-mkt__burger { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; cursor: pointer; color: var(--dp-ink); } .dp-mkt__burger:hover { background: #f4f4f5; } .dp-mkt__burger .dp-icon { width: 1.35rem; height: 1.35rem; } @media (min-width: 900px) { .dp-mkt__burger { display: none; } } .dp-mkt-mobile { display: none; flex-direction: column; gap: 0.25rem; padding: 0.5rem 1rem 1rem; border-top: 1px solid var(--dp-border); } .dp-mkt__toggle:checked ~ .dp-mkt-mobile { display: flex; } @media (min-width: 900px) { .dp-mkt-mobile { display: none !important; } } .dp-mkt-mobile__link { padding: 0.625rem 0.75rem; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--dp-ink); text-decoration: none; } .dp-mkt-mobile__link:hover { background: #f4f4f5; } .dp-mkt-mobile__cta { margin-top: 0.5rem; } /* Subnav */ .dp-mkt-sub { position: sticky; top: 64px; z-index: 30; background: #fff; border-bottom: 1px solid var(--dp-border); font-family: var(--dp-font); } .dp-mkt-sub__inner { display: flex; flex-direction: column; gap: 0.75rem; max-width: 80rem; margin: 0 auto; padding: 0.75rem 1.5rem; } @media (min-width: 768px) { .dp-mkt-sub__inner { flex-direction: row; align-items: center; gap: 1.5rem; } } .dp-mkt-search { position: relative; display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; } .dp-mkt-search__icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(16, 16, 16, 0.5); pointer-events: none; } .dp-mkt-search__icon .dp-icon { width: 1rem; height: 1rem; } .dp-mkt-search input[type="text"] { flex: 1 1 auto; height: auto; padding: 0.625rem 1rem 0.625rem 2.75rem; font-size: 14px; color: var(--dp-ink); background: #fff; border: 1px solid var(--dp-border); border-radius: 30px; outline: none; } .dp-mkt-search input[type="text"]:focus { border-color: rgba(16, 16, 16, 0.3); } .dp-mkt-search__btn { flex: 0 0 auto; } .dp-mkt-tlds { display: flex; flex-wrap: wrap; gap: 0.25rem; } .dp-mkt-tld { padding: 0.5rem 1rem; border-radius: 30px; font-size: 14px; font-weight: 600; color: var(--dp-ink); text-decoration: none; transition: background-color 0.15s ease; } .dp-mkt-tld:hover { background: #f4f4f5; } /* Dropdown icon tints */ .dp-mkt-tint--blue { background: rgba(188, 231, 243, 0.5); color: #0c2a33; } .dp-mkt-tint--green { background: rgba(200, 233, 212, 0.6); color: #14432b; } .dp-mkt-tint--purple { background: rgba(222, 215, 244, 0.7); color: #2e2555; } .dp-mkt-tint--amber { background: rgba(247, 225, 198, 0.7); color: #5a3d1c; } .dp-mkt-tint--pink { background: rgba(244, 217, 228, 0.7); color: #5a2440; } /* Marketing footer */ .dp-mktfoot { background: var(--dp-ink); color: #f4f4f5; font-family: var(--dp-font); } .dp-mktfoot__inner { max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem; } .dp-mktfoot__top { display: flex; flex-direction: column; gap: 3rem; } @media (min-width: 1024px) { .dp-mktfoot__top { flex-direction: row; justify-content: space-between; } } .dp-mktfoot__brand { display: flex; flex-direction: column; gap: 1.25rem; max-width: 20rem; } .dp-mktfoot__logo img { height: 28px; width: auto; filter: invert(1); } .dp-mktfoot__blurb { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(244, 244, 245, 0.6); } .dp-mktfoot__socials { display: flex; gap: 0.5rem; } .dp-mktfoot__social { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid rgba(244, 244, 245, 0.15); color: rgba(244, 244, 245, 0.7); transition: background-color 0.15s ease, color 0.15s ease; } .dp-mktfoot__social:hover { background: #f4f4f5; color: var(--dp-ink); } .dp-mktfoot__social .dp-icon, .dp-mktfoot__social svg { width: 1rem; height: 1rem; } .dp-mktfoot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } @media (min-width: 640px) { .dp-mktfoot__cols { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } } @media (min-width: 1024px) { .dp-mktfoot__cols { grid-template-columns: repeat(5, 1fr); } } .dp-mktfoot__col h3 { margin: 0 0 1rem; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(244, 244, 245, 0.45); } .dp-mktfoot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .dp-mktfoot__col a { font-size: 14px; color: rgba(244, 244, 245, 0.7); text-decoration: none; transition: color 0.15s ease; } .dp-mktfoot__col a:hover { color: #f4f4f5; } .dp-mktfoot__bottom { display: flex; flex-direction: column; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(244, 244, 245, 0.1); } @media (min-width: 640px) { .dp-mktfoot__bottom { flex-direction: row; align-items: center; justify-content: space-between; } } .dp-mktfoot__bottom p { margin: 0; font-size: 13px; color: rgba(244, 244, 245, 0.5); } /* ---- Bootstrap tooltips restyled to match our ink tooltips ---- The order-form / WHMCS bundles load after this file, so we use !important to win the cascade regardless of load order. */ .tooltip { font-family: var(--dp-font); } .tooltip-inner { background-color: var(--dp-ink) !important; color: #fff !important; font-size: 12px; font-weight: 500; line-height: 1.35; padding: 0.375rem 0.625rem !important; border-radius: 8px !important; max-width: 220px; box-shadow: 0 6px 18px rgba(16, 16, 16, 0.18); } .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--dp-ink) !important; } .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--dp-ink) !important; } .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--dp-ink) !important; } .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--dp-ink) !important; } .dp-attach-item { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; padding: 0.375rem 0.75rem; font-size: 0.8125rem; color: var(--dp-ink); background: #fff; border: 1px solid var(--dp-border); border-radius: 30px; text-decoration: none; transition: background-color 0.15s ease; } a.dp-attach-item:hover { background: #f4f4f5; } .dp-attach-item .dp-icon { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; color: var(--dp-faint); } .dp-attach-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-attach-item.is-removed { color: var(--dp-faint); text-decoration: line-through; } /* ---- Reply form ---- */ .dp-vt-reply { display: flex; flex-direction: column; gap: 1rem; } .dp-vt-reply .dp-submitticket__head h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--dp-ink); } /* ---- Universal focus: no ring on mouse click; subtle ink ring on keyboard ---- */ .dp-app :focus:not(:focus-visible), .dp-auth-body :focus:not(:focus-visible) { outline: none; } .dp-app a:focus-visible, .dp-app button:focus-visible, .dp-app summary:focus-visible, .dp-app [tabindex]:focus-visible, .dp-auth-body a:focus-visible, .dp-auth-body button:focus-visible { outline: 2px solid rgba(16, 16, 16, 0.35); outline-offset: 2px; } /* ---- Plain page header (no gradient) ---- */ .dp-tickets { display: flex; flex-direction: column; gap: 1.5rem; } .dp-pagehead-plain { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .dp-pagehead-plain { flex-direction: row; align-items: center; justify-content: space-between; } } .dp-pagehead-plain h1 { margin: 0; font-size: 24px; font-weight: 600; color: var(--dp-ink); } .dp-pagehead-plain p { margin: 0.375rem 0 0; max-width: 34rem; font-size: 14px; line-height: 1.6; color: rgba(16, 16, 16, 0.6); } .dp-pagehead-plain__cta { width: auto; flex: 0 0 auto; padding: 0.625rem 1.25rem; } /* When the plain header isn't inside a gap-flex stack, space it from the card. */ .dp-pagehead-plain--spaced { margin-bottom: 1.5rem; } /* ---- Breadcrumb subnav (under the topbar) ---- */ .dp-subnav { position: relative; z-index: 40; background: #fff; border-bottom: 1px solid rgba(16, 16, 16, 0.08); } .dp-subnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 54px; } /* Pale avatar palettes (brand tints), picked deterministically per client. */ .dp-avatar--0 { background: #bce7f3; color: #0c2a33; } .dp-avatar--1 { background: #c8e9d4; color: #14432b; } .dp-avatar--2 { background: #f7e1c6; color: #5a3d1c; } .dp-avatar--3 { background: #ded7f4; color: #2e2555; } .dp-avatar--4 { background: #f4d9e4; color: #5a2440; } .dp-subnav__actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; } /* Notifications */ .dp-notif { position: relative; } .dp-notif__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: transparent; color: rgba(16, 16, 16, 0.6); cursor: pointer; } .dp-notif__btn:hover { background: #f4f4f5; color: var(--dp-ink); } .dp-notif__btn .dp-icon { width: 18px; height: 18px; } .dp-notif__badge { position: absolute; top: 3px; right: 3px; display: flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; } .dp-notif__panel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 50; width: 20rem; max-width: calc(100vw - 2rem); padding: 0.375rem; background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 14px; box-shadow: 0 12px 32px rgba(10, 42, 56, 0.15); } .dp-notif__head { padding: 0.5rem 0.625rem; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(16, 16, 16, 0.45); } .dp-notif__item { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 9px; font-size: 13px; color: var(--dp-ink); text-decoration: none; } .dp-notif__item:hover { background: #f4f4f5; } .dp-notif__dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: rgba(16, 16, 16, 0.3); } .dp-notif__dot--danger { background: #dc2626; } .dp-notif__dot--warning { background: #d97706; } .dp-notif__dot--info { background: #2563eb; } .dp-notif__dot--success { background: #059669; } .dp-notif__msg { flex: 1 1 auto; min-width: 0; line-height: 1.4; } /* Two-line notification (a specific ticket): subject + meta line. */ .dp-notif__title { display: block; font-weight: 600; color: var(--dp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-notif__sub { display: block; margin-top: 1px; font-size: 12px; color: rgba(16, 16, 16, 0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-notif__empty { display: flex; flex-direction: column; align-items: center; padding: 1.75rem 1rem 1.5rem; text-align: center; } .dp-notif__empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 0.75rem; color: #059669; background: rgba(16, 185, 129, 0.12); border-radius: 999px; } .dp-notif__empty-icon .dp-icon { width: 1.3rem; height: 1.3rem; } .dp-notif__empty-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--dp-ink); } .dp-notif__empty-text { margin: 0.25rem 0 0; max-width: 15rem; font-size: 12px; line-height: 1.5; color: rgba(16, 16, 16, 0.5); } /* Account chip + dropdown */ .dp-account { position: relative; } .dp-subnav__user { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer; text-decoration: none; } .dp-subnav__user:hover { background: #f4f4f5; } .dp-subnav__caret { display: flex; color: rgba(16, 16, 16, 0.4); } .dp-subnav__caret .dp-icon { width: 14px; height: 14px; } .dp-subnav__user[aria-expanded="true"] .dp-subnav__caret { transform: rotate(180deg); } .dp-account__panel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 50; width: 15rem; max-width: calc(100vw - 2rem); padding: 0.375rem; background: #fff; border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 14px; box-shadow: 0 12px 32px rgba(10, 42, 56, 0.15); } .dp-account__head { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; } .dp-account__id { display: flex; flex-direction: column; min-width: 0; } .dp-account__name { font-size: 13px; font-weight: 600; color: var(--dp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-account__email { font-size: 12px; color: rgba(16, 16, 16, 0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-menu-sep { height: 1px; margin: 0.375rem 0.25rem; background: rgba(16, 16, 16, 0.08); } .dp-menu-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--dp-ink); text-decoration: none; } .dp-menu-item .dp-icon { width: 16px; height: 16px; color: rgba(16, 16, 16, 0.5); } .dp-menu-item:hover { background: #f4f4f5; } .dp-menu-item--danger { color: #dc2626; } .dp-menu-item--danger .dp-icon { color: #dc2626; } .dp-menu-item--danger:hover { background: rgba(220, 38, 38, 0.08); } /* Return-to-admin chip in the subnav (only in an admin/impersonation session). */ .dp-adminreturn { display: inline-flex; align-items: center; gap: 0.375rem; height: 34px; padding: 0 0.8rem; font-size: 12.5px; font-weight: 500; color: #b45309; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 30px; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; } .dp-adminreturn:hover { background: rgba(245, 158, 11, 0.2); } .dp-adminreturn .dp-icon { width: 1rem; height: 1rem; color: #d97706; } @media (max-width: 700px) { .dp-adminreturn__label { display: none; } .dp-adminreturn { padding-inline: 0.5rem; } } .dp-subnav__avatar { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: 11px; font-weight: 600; } .dp-subnav__username { font-size: 13px; font-weight: 600; color: var(--dp-ink); white-space: nowrap; } @media (max-width: 480px) { .dp-subnav__username { display: none; } } .dp-subnav .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; background: transparent; border-radius: 0; font-family: var(--dp-font); font-size: 12px; line-height: 1.4; } .dp-subnav .breadcrumb-item { display: flex; align-items: center; color: rgba(16, 16, 16, 0.5); } .dp-subnav .breadcrumb-item a { color: rgba(16, 16, 16, 0.55); text-decoration: none; } .dp-subnav .breadcrumb-item a:hover { color: var(--dp-ink); } .dp-subnav .breadcrumb-item.active { color: var(--dp-ink); font-weight: 500; } .dp-subnav .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 0.5rem; color: rgba(16, 16, 16, 0.3); } /* ---- Register order form: the subnav (dp-market-header) is the domain search, so hide the order form's own checker box. The subnav submits ?query= to cart.php?a=add&domain=register and the order form auto-checks it on load, populating #DomainSearchResults below. Results/add-to-cart are untouched. ---- */ #order-standard_cart .domain-checker-container { display: none !important; } /* ============================================================ DOMAIN SEARCH — register page (#order-standard_cart) reskinned toward the marketing /domainsearch design. CSS-only so every order-form JS hook stays intact. The order-form bundle (all.min.css) loads after this file, so conflicting properties use !important. Applies in both the dashboard (logged in) and marketing (logged out) chromes. ============================================================ */ /* ---- Layout: drop the category sidebar, go full-width and centred ---- */ #order-standard_cart .cart-sidebar, #order-standard_cart .sidebar-categories-collapsed { display: none !important; } #order-standard_cart .cart-body { width: 100% !important; float: none !important; padding: 0 !important; } #order-standard_cart > .row { display: block !important; margin: 0 !important; } /* White page background on the cart only (marketing /cart is white, not grey). The grey is nexus's #main-body section over the white body — whiten it and the content wrappers, scoped to the cart via :has. */ html:has(#order-standard_cart), html:has(#order-standard_cart) body, html:has(#order-standard_cart) #main-body { background: #F4F4F5 !important; } /* Container/content stay transparent so the cards (not a white block) float over the hero when the cart is pulled up. */ html:has(#order-standard_cart) #main-body > .container, html:has(#order-standard_cart) .primary-content { background: transparent !important; } /* Line the cart up with the navbar/footer: same centred 80rem box + 1.5rem inline gutter. WHMCS wraps the cart in a Bootstrap .container — widen it on this page only (via :has), then let the cart fill it edge-to-edge. */ #main-body > .container:has(#order-standard_cart) { max-width: 80rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; margin-left: auto !important; margin-right: auto !important; /* Float the first item + summary card up over the dark hero band. */ position: relative; z-index: 2; margin-top: -3.5rem; } html:has(#order-standard_cart) #main-body { padding-top: 0 !important; } #order-standard_cart { max-width: none !important; margin: 0 !important; } /* The order form's JS "sticky sidebar" (repositionScrollingSidebar in scripts.js) animates margin-top on the content + summary as you scroll. It fights our CSS position:sticky and, when the summary is tall, pushes the layout so the page can load scrolled to the bottom. Pin both margins to 0 so that JS has no visual effect (jQuery sets them inline; !important wins); CSS sticky keeps the summary in view instead. */ #order-standard_cart #orderSummary, #order-standard_cart .secondary-cart-body { margin-top: 0 !important; } /* ---- Header ---- */ #order-standard_cart .header-lined { border: 0 !important; margin-bottom: 0.25rem !important; } #order-standard_cart .header-lined h1 { font-size: 28px !important; font-weight: 600; color: var(--dp-ink); } #order-standard_cart .cart-body > p { font-size: 14px; color: var(--dp-muted); } /* ---- Search field: one rounded pill with an inset dark button ---- */ #order-standard_cart .domain-checker-container, #order-standard_cart .domain-checker-bg { background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; } #order-standard_cart .input-group-box { border-radius: 30px !important; box-shadow: none !important; } #order-standard_cart #inputDomain, #order-standard_cart .input-group-box .form-control { height: 3.25rem !important; border: 1px solid var(--dp-border) !important; border-right: 0 !important; border-radius: 30px 0 0 30px !important; padding-left: 1.25rem !important; font-size: 15px !important; background: #fff !important; box-shadow: none !important; } #order-standard_cart .input-group-box #inputDomain:focus { border-color: rgba(16, 16, 16, 0.3) !important; } #order-standard_cart .domain-check-availability { height: 3.25rem !important; padding-inline: 1.75rem !important; border: 0 !important; border-radius: 0 30px 30px 0 !important; background: var(--dp-ink) !important; color: #fff !important; font-weight: 500 !important; box-shadow: none !important; } #order-standard_cart .domain-check-availability:hover { background: rgba(16, 16, 16, 0.85) !important; } /* ---- Primary result headline → a clean card ---- */ #order-standard_cart .domain-checker-result-headline, #order-standard_cart #searchDomainInfo { background: #fff !important; border: 1px solid rgba(16, 16, 16, 0.1) !important; border-radius: 16px !important; padding: 1.5rem !important; box-shadow: none !important; } #order-standard_cart .primary-domain-header { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dp-faint) !important; background: transparent !important; border: 0 !important; padding: 0 0 0.5rem !important; } #order-standard_cart .domain-checker-available { color: #059669 !important; font-weight: 600 !important; } #order-standard_cart .domain-checker-unavailable { color: #b42318 !important; font-weight: 600 !important; } #order-standard_cart .domain-price .price, #order-standard_cart .domain-price .price * { font-size: 20px !important; font-weight: 600 !important; color: var(--dp-ink) !important; } /* ---- Add-to-cart / primary buttons → ink pills ---- */ #order-standard_cart .btn-add-to-cart, #order-standard_cart .btn-primary { border: 0 !important; border-radius: 30px !important; background: var(--dp-ink) !important; color: #fff !important; font-weight: 500 !important; padding: 0.55rem 1.4rem !important; box-shadow: none !important; } #order-standard_cart .btn-add-to-cart:hover, #order-standard_cart .btn-primary:hover { background: rgba(16, 16, 16, 0.85) !important; } #order-standard_cart .btn.unavailable, #order-standard_cart .btn-add-to-cart .unavailable { background: rgba(16, 16, 16, 0.06) !important; color: rgba(16, 16, 16, 0.5) !important; } /* ---- Spotlight TLDs → cards ---- */ #order-standard_cart .spotlight-tlds-container { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 0.75rem !important; } #order-standard_cart .spotlight-tld-container { width: auto !important; float: none !important; padding: 0 !important; } #order-standard_cart .spotlight-tld { display: flex !important; flex-direction: column; gap: 0.5rem; height: 100% !important; background: #fff !important; border: 1px solid rgba(16, 16, 16, 0.1) !important; border-radius: 14px !important; padding: 1rem !important; font-weight: 600; color: var(--dp-ink); } /* ---- Suggestions → clean list ---- */ #order-standard_cart .suggested-domains { border: 0 !important; background: transparent !important; margin-top: 1.5rem; } #order-standard_cart .suggested-domains .panel-heading, #order-standard_cart .suggested-domains .card-header { background: transparent !important; border: 0 !important; padding: 0 0 0.75rem !important; font-size: 16px !important; font-weight: 600 !important; color: var(--dp-ink) !important; } #order-standard_cart #domainSuggestions { border: 0 !important; display: flex !important; flex-direction: column; gap: 0.5rem; } #order-standard_cart .domain-suggestion { display: flex !important; align-items: center !important; gap: 0.75rem; background: #fff !important; border: 1px solid rgba(16, 16, 16, 0.08) !important; border-radius: 12px !important; padding: 0.75rem 1rem !important; } #order-standard_cart .domain-suggestion .domain { font-size: 15px !important; font-weight: 600 !important; color: var(--dp-ink) !important; } #order-standard_cart .domain-suggestion .extension { color: var(--dp-muted) !important; } #order-standard_cart .domain-suggestion .actions { margin-left: auto !important; display: flex !important; align-items: center; gap: 0.75rem; } #order-standard_cart .domain-suggestion .price { font-weight: 600 !important; color: var(--dp-ink) !important; } /* ---- Sale-group chips → pale pills ---- */ #order-standard_cart .tld-sale-group, #order-standard_cart .spotlight-tld-hot, #order-standard_cart .spotlight-tld-new, #order-standard_cart .spotlight-tld-sale, #order-standard_cart [class^="sales-group-"] { border-radius: 999px !important; padding: 0.1rem 0.5rem !important; font-size: 11px !important; font-weight: 600 !important; background: rgba(245, 158, 11, 0.15) !important; color: #b45309 !important; } /* ---- Pricing table → cleaner ---- */ #order-standard_cart .tld-filters .badge { border-radius: 999px !important; background: #f4f4f5 !important; color: var(--dp-ink) !important; border: 1px solid var(--dp-border) !important; font-weight: 500 !important; padding: 0.35rem 0.75rem !important; } #order-standard_cart .tld-pricing-header { background: #f4f4f5 !important; border-radius: 12px 12px 0 0; font-size: 12px; font-weight: 600; color: var(--dp-muted) !important; } #order-standard_cart .tld-row { border-bottom: 1px solid rgba(16, 16, 16, 0.06) !important; } #order-standard_cart .domain-pricing h4 { font-weight: 600 !important; color: var(--dp-ink); } /* ---- Promo boxes → soft cards ---- */ #order-standard_cart .domain-promo-box { background: #f7f7fb !important; border: 1px solid rgba(16, 16, 16, 0.08) !important; border-radius: 16px !important; padding: 1.5rem !important; } #order-standard_cart .domain-promo-box .btn-warning { background: var(--dp-ink) !important; color: #fff !important; border: 0 !important; border-radius: 30px !important; } /* ---- Domain search: fixes after first live review ---- */ /* Keep JS-hidden template rows/containers hidden — some earlier display:!important rules were overriding WHMCS's .w-hidden (a stray "Add to Cart" row). BUT the checkout existing/new-user toggle shows its sections with jQuery slideDown / fadeIn, which set INLINE display that !important would block — so exclude those animated elements here and let the stock (non-!important) .w-hidden handle them. */ #order-standard_cart .w-hidden:not(#containerNewUserSignup):not(#containerExistingUserSignin):not(#containerNewUserSecurity):not(#btnAlreadyRegistered):not(#btnNewUserSignup):not(.marketing-email-optin) { display: none !important; } /* Search: one clean pill, button flush, no nested white box. */ #order-standard_cart .domain-checker-bg, #order-standard_cart .input-group-box { background: transparent !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; } #order-standard_cart .input-group-box { display: flex !important; align-items: stretch !important; } #order-standard_cart .input-group-box > .input-group-btn, #order-standard_cart .input-group-box > .input-group-append { margin: 0 !important; } #order-standard_cart .domain-check-availability { margin: 0 !important; } /* Result messages: sane sizes (WHMCS renders these very large by default). */ #order-standard_cart .domain-checker-invalid, #order-standard_cart .domain-checker-unavailable, #order-standard_cart .domain-checker-available { font-size: 16px !important; line-height: 1.5 !important; margin: 0 !important; } /* The exact-match card: align its inner content tidily. */ #order-standard_cart .domain-price { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem !important; margin: 0.75rem 0 0 !important; } /* Cart Bridge — bundle discount line on the WHMCS order-form summary. The real reduction is applied to the invoice at checkout; this line makes the saving visible in the cart (see modules/addons/serverbasecartbridge). */ .dp-bundle-discount .float-right { color: #1a7f37; font-weight: 600; } .dp-bundle-discount small { color: #6b7280; font-weight: 400; margin-left: 2px; } /* Cart Bridge — grouped bundle item on the WHMCS order-form cart */ .dp-bundle-badge { display:inline-block; background:#BCE7F3; color:#0c2a33; font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px; margin-left:6px; text-transform:none; vertical-align:middle; } .dp-bundle-item .item-domain { color:#101010; word-break:break-word; } .dp-bundle-save { color:#1a7f37 !important; font-weight:600; } /* ============================================================ CART VIEW (cart.php?a=view) reskinned toward the marketing /cart design. CSS-ONLY + scoped to #order-standard_cart so every order-form JS hook stays intact — no display:none on interactive elements, no layout width/float overrides (those broke the reskin before; see order-form-reskin.css.disabled). REVERT: delete this block (and/or restore viewcart.working-backup.tpl). ============================================================ */ /* Items as white rounded cards (like /cart) */ #order-standard_cart .view-cart-items { margin-top: 0; } #order-standard_cart .view-cart-items > .item { background: #fff !important; border: 1px solid rgba(16, 16, 16, 0.10) !important; border-radius: 12px !important; padding: 1.15rem 1.25rem !important; margin-bottom: 0.75rem !important; box-shadow: none !important; } #order-standard_cart .view-cart-items > .item .item-title { font-size: 13px; color: var(--dp-muted); font-weight: 500; } #order-standard_cart .view-cart-items > .item .item-domain { display: block; font-size: 17px; font-weight: 600; color: var(--dp-ink); letter-spacing: -0.01em; margin-top: 2px; word-break: break-word; } #order-standard_cart .view-cart-items > .item .item-price [name$="Price"] { font-weight: 600; font-size: 17px; color: var(--dp-ink); } #order-standard_cart .view-cart-items > .item .cycle { color: var(--dp-muted); font-size: 12px; } #order-standard_cart .view-cart-items > .item .renewal-price { color: var(--dp-faint); } #order-standard_cart .btn-remove-from-cart { color: rgba(16, 16, 16, 0.4) !important; } #order-standard_cart .btn-remove-from-cart:hover { color: var(--dp-ink) !important; } /* Column headers → small muted labels */ #order-standard_cart .view-cart-items-header { border: 0 !important; color: var(--dp-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 0 1.25rem 0.35rem !important; } /* Bundle item — pale tint + badge to signal an atomic group */ #order-standard_cart .view-cart-items > .item.dp-bundle-item { background: #F4FBFD !important; border-color: rgba(12, 42, 51, 0.16) !important; } #order-standard_cart .dp-bundle-item .item-title { color: var(--dp-ink); font-weight: 600; } /* Order summary → matches /cart's summary card */ #order-standard_cart .subtotal, #order-standard_cart .bordered-totals, #order-standard_cart .recurring-totals { font-size: 14px; color: var(--dp-muted); } #order-standard_cart .subtotal #subtotal, #order-standard_cart #discount { color: var(--dp-ink); font-weight: 500; } #order-standard_cart .dp-bundle-discount .float-right { color: #1a7f37; font-weight: 600; } #order-standard_cart .total-due-today { border-top: 1px solid rgba(16, 16, 16, 0.1); margin-top: 0.5rem; padding-top: 0.9rem; } #order-standard_cart #totalDueToday { font-size: 22px; font-weight: 600; color: var(--dp-ink); } /* Checkout button → dark rounded pill (matches /cart "Continue to checkout") */ #order-standard_cart .btn-checkout, #order-standard_cart #checkout { background: var(--dp-ink) !important; border: 0 !important; border-radius: 30px !important; color: #fff !important; padding: 0.85rem 1.75rem !important; font-weight: 600 !important; box-shadow: none !important; } #order-standard_cart .btn-checkout:hover { background: rgba(16, 16, 16, 0.85) !important; } /* ============================================================ CART VIEW → /cart look, part 2: the order-summary SIDEBAR as a grey card, globe-icon item cards, and typography. The template is already two-column (.secondary-cart-body + .secondary-cart-sidebar) — this just styles it. CSS-ONLY, scoped, revertible. Later rules here intentionally refine part 1. ============================================================ */ /* Two-column spacing + sticky summary (align tops like /cart's grid) */ #order-standard_cart .secondary-cart-body { padding-right: 0.5rem; } #order-standard_cart .secondary-cart-sidebar { padding-left: 0.5rem; } /* Narrow the summary to a fixed 340px column (like /cart's grid), items fill the rest. Desktop only — the columns still stack full-width on smaller screens. */ @media (min-width: 992px) { /* align-items:stretch makes the sidebar column as tall as the (longer) items column, so the sticky summary has room to travel the full scroll. */ #order-standard_cart .row:has(> .secondary-cart-sidebar) { display: flex; flex-wrap: nowrap; align-items: stretch; } #order-standard_cart .secondary-cart-body { flex: 1 1 auto; width: auto; min-width: 0; padding-right: 1.5rem; } #order-standard_cart .secondary-cart-sidebar { flex: 0 0 380px; width: 380px; max-width: 380px; padding-left: 0; } /* #orderSummary is the direct child of the (now-tall) sidebar in both layouts (viewcart: it IS .order-summary; confproduct: it wraps it), so sticky it. top clears the full sticky site nav — header (.dp-mkt, 65px) + search subnav (.dp-mkt-sub, 68px) = 133px — plus a gap, so the summary never hides behind the nav. */ #order-standard_cart #orderSummary { position: sticky; top: calc(133px + 1rem); align-self: flex-start; } } /* Page heading like /cart's "Your cart" */ #order-standard_cart .header-lined { border: 0 !important; padding-bottom: 0 !important; margin-bottom: 1rem !important; } #order-standard_cart .header-lined h1 { font-size: 30px !important; font-weight: 600 !important; letter-spacing: -0.01em; color: var(--dp-ink) !important; } /* Column header labels */ #order-standard_cart .view-cart-items-header { border: 0 !important; color: var(--dp-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 0 1.25rem 0.4rem !important; } /* ---- Item cards with a pale-blue globe square (like /cart) ---- */ #order-standard_cart .view-cart-items > .item { background: #fff !important; border: 1px solid rgba(16,16,16,0.10) !important; border-radius: 12px !important; padding: 1.25rem !important; margin-bottom: 0.75rem !important; box-shadow: none !important; } /* Keep the three columns on ONE line (Bootstrap's .row is flex-wrap:wrap) so the price/remove cluster stays on the right instead of wrapping under the domain. */ #order-standard_cart .view-cart-items > .item > .row { align-items: flex-start; flex-wrap: nowrap !important; margin-left: 0 !important; margin-right: 0 !important; } /* Domain column grows AND is allowed to shrink (min-width:0 overrides the flex default of min-content, which otherwise forces the column full-width and wraps the rest). padding-left clears the globe icon. */ #order-standard_cart .view-cart-items > .item > .row > .col-sm-7 { padding-left: 3.9rem !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; } /* Price/renewal cluster: content width, pushed to the right edge, right-aligned. margin-left:auto beats Bootstrap's fixed 33% basis for the col-sm-4. */ #order-standard_cart .view-cart-items > .item > .row > .item-price { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin-left: auto; padding-right: 0 !important; text-align: right; } /* Remove (trash) column: content width, small gap from the price. */ #order-standard_cart .view-cart-items > .item > .row > [class*="col-"]:last-child { flex: 0 0 auto !important; width: auto !important; max-width: none; padding-left: 0.75rem; padding-right: 0 !important; } #order-standard_cart .view-cart-items > .item .col-sm-7 { position: relative; padding-left: 3.9rem; min-height: 3rem; display: flex; flex-direction: column; justify-content: flex-start; } #order-standard_cart .view-cart-items > .item .col-sm-7::before { content: ""; position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; border-radius: 10px; background-color: #BCE7F3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230c2a33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 1.35rem; } /* Hosting/product items get the green server icon instead of the domain globe. */ #order-standard_cart .view-cart-items > .item.dp-item-product .col-sm-7::before { background-color: #C7F0DA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230c3d2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2'/%3E%3Cline x1='6' x2='6.01' y1='6' y2='6'/%3E%3Cline x1='6' x2='6.01' y1='18' y2='18'/%3E%3C/svg%3E"); } #order-standard_cart .view-cart-items > .item .item-title { font-size: 12px; color: var(--dp-muted); font-weight: 500; } #order-standard_cart .view-cart-items > .item .item-title .btn-link { color: var(--dp-faint) !important; } #order-standard_cart .view-cart-items > .item .item-domain { display: block; font-size: 17px; font-weight: 600; color: var(--dp-ink); letter-spacing: -0.01em; margin-top: 1px; word-break: break-word; } #order-standard_cart .view-cart-items > .item .item-price { text-align: right; } #order-standard_cart .view-cart-items > .item .item-price [name$="Price"] { font-weight: 600; font-size: 17px; color: var(--dp-ink); } #order-standard_cart .view-cart-items > .item .cycle { color: var(--dp-muted); font-size: 12px; } #order-standard_cart .view-cart-items > .item .renewal-price { color: var(--dp-faint); } #order-standard_cart .btn-remove-from-cart { color: rgba(16,16,16,0.35) !important; } #order-standard_cart .btn-remove-from-cart:hover { color: var(--dp-ink) !important; } /* Bundle card — pale blue, and its icon square gets a "box" glyph instead */ #order-standard_cart .view-cart-items > .item.dp-bundle-item { background: #F4FBFD !important; border-color: rgba(12,42,51,0.16) !important; } #order-standard_cart .view-cart-items > .item.dp-bundle-item .item-title { color: var(--dp-ink); font-weight: 600; } /* ---- Empty cart → branded empty-state card (rounded on ALL corners) ---- nexus theme.min.css ships `body #order-standard_cart .cart-body .view-cart-empty { border-radius:0 0 8px 8px; border-top:0 }` — it styles the empty box as attached to the blue items header above it (square top). We hide that header, so match its specificity to reset to a standalone rounded card. */ body #order-standard_cart .cart-body .view-cart-empty { background: #fff !important; border: 1px solid rgba(16,16,16,0.10) !important; border-radius: 12px !important; padding: 3rem 1.5rem !important; margin-top: 0; text-align: center; } #order-standard_cart .dp-empty-cart { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } #order-standard_cart .dp-empty-cart__icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: 0.75rem; border-radius: 999px; background: #BCE7F3; color: #0c2a33; } #order-standard_cart .dp-empty-cart__title { font-size: 20px; font-weight: 600; color: var(--dp-ink); letter-spacing: -0.01em; margin: 0; } #order-standard_cart .dp-empty-cart__text { font-size: 14px; color: var(--dp-muted); margin: 0.35rem 0 0; max-width: 22rem; } #order-standard_cart .dp-empty-cart__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.35rem; } #order-standard_cart .dp-empty-cart__btn { display: inline-block; border-radius: 30px; padding: 0.7rem 1.5rem; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; } #order-standard_cart .dp-empty-cart__btn--primary { background: var(--dp-ink); color: #fff; } #order-standard_cart .dp-empty-cart__btn--primary:hover { background: rgba(16,16,16,0.85); } #order-standard_cart .dp-empty-cart__btn--ghost { background: #fff; color: var(--dp-ink); border: 1px solid rgba(16,16,16,0.15); } #order-standard_cart .dp-empty-cart__btn--ghost:hover { border-color: rgba(16,16,16,0.35); } /* ---- Order summary as a /cart grey card, sticky ---- */ #order-standard_cart .order-summary { background: #F4F4F5 !important; border: 1px solid rgba(16,16,16,0.08) !important; border-radius: 12px !important; padding: 1.5rem !important; } #order-standard_cart .order-summary h2 { font-size: 18px !important; font-weight: 600 !important; letter-spacing: -0.01em; color: var(--dp-ink) !important; margin: 0 0 1.1rem !important; padding: 0 !important; border: 0 !important; } #order-standard_cart .summary-container .subtotal, #order-standard_cart .summary-container .bordered-totals > .clearfix, #order-standard_cart .summary-container .recurring-totals { font-size: 14px; color: var(--dp-muted); padding: 5px 0; margin: 0; } #order-standard_cart .summary-container #subtotal, #order-standard_cart .summary-container #discount { color: var(--dp-ink); font-weight: 500; } #order-standard_cart .summary-container .bordered-totals { border: 0 !important; padding: 0 !important; } #order-standard_cart .dp-bundle-discount { color: #1a7f37; } #order-standard_cart .dp-bundle-discount .float-right { color: #1a7f37 !important; font-weight: 600; } #order-standard_cart .dp-bundle-discount small { color: var(--dp-faint); font-weight: 400; } #order-standard_cart .total-due-today { border-top: 1px solid rgba(16,16,16,0.10) !important; margin-top: 0.75rem !important; padding-top: 1rem !important; text-align: left; } #order-standard_cart .total-due-today #totalDueToday { font-size: 24px; font-weight: 600; color: var(--dp-ink); } /* Checkout button → full-width dark rounded pill like /cart */ #order-standard_cart .summary-container .text-right { text-align: center !important; margin-top: 1rem; } #order-standard_cart .btn-checkout, #order-standard_cart #checkout { display: block; width: 100%; background: var(--dp-ink) !important; border: 0 !important; border-radius: 30px !important; color: #fff !important; padding: 0.85rem 1.5rem !important; font-weight: 600 !important; box-shadow: none !important; } #order-standard_cart .btn-checkout:hover { background: rgba(16,16,16,0.85) !important; } #order-standard_cart #continueShopping { color: var(--dp-muted) !important; font-size: 13px; } /* ============================================================ CART VIEW → /cart look, part 3: heading subtitle, the free "Full domain protection" block inside each domain card, the summary's protection + GST lines, and the registration-period control. CSS-ONLY, scoped, revertible. ============================================================ */ /* Heading subtitle ("N items ready to checkout") */ #order-standard_cart .dp-cart-sub { margin: 0.35rem 0 0; color: var(--dp-muted); font-size: 15px; } /* Drop the "Product/Options — Price/Cycle" column header (not in /cart) */ #order-standard_cart .view-cart-items-header { display: none !important; } /* ---- Replace all Font Awesome cart icons with Lucide equivalents ---- Each FA is turned into a masked box that takes currentColor (so hover colour + fa-spin still work) and scales with font-size (so fa-3x/fa-fw hold). Scoped to #order-standard_cart. FA sizing/spin classes are left intact. */ #order-standard_cart .fa-arrow-right::before, #order-standard_cart .fa-pencil-alt::before, #order-standard_cart .fa-ticket-alt::before, #order-standard_cart .fa-sync::before, #order-standard_cart .fa-times::before, #order-standard_cart .fa-trash-alt::before { content: "" !important; } #order-standard_cart .fa-arrow-right, #order-standard_cart .fa-pencil-alt, #order-standard_cart .fa-ticket-alt, #order-standard_cart .fa-sync, #order-standard_cart .fa-times, #order-standard_cart .fa-trash-alt { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* arrow-right (checkout) */ #order-standard_cart .fa-arrow-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); } /* pencil (Edit) */ #order-standard_cart .fa-pencil-alt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); } /* ticket (promo code) */ #order-standard_cart .fa-ticket-alt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z'/%3E%3Cpath d='M13 5v2'/%3E%3Cpath d='M13 17v2'/%3E%3Cpath d='M13 11v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z'/%3E%3Cpath d='M13 5v2'/%3E%3Cpath d='M13 17v2'/%3E%3Cpath d='M13 11v2'/%3E%3C/svg%3E"); } /* refresh-cw (order-summary loader) */ #order-standard_cart .fa-sync { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E"); } /* x (modal close + modal title) */ #order-standard_cart .fa-times { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); } /* trash-2 (empty-cart button + empty-cart modal) */ #order-standard_cart .fa-trash-alt, #order-standard_cart .btn-remove-from-cart .fa-times { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cline x1='10' x2='10' y1='11' y2='17'/%3E%3Cline x1='14' x2='14' y1='11' y2='17'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cline x1='10' x2='10' y1='11' y2='17'/%3E%3Cline x1='14' x2='14' y1='11' y2='17'/%3E%3C/svg%3E") !important; } /* ---- Full domain protection block (full-bleed footer inside the card) ---- */ #order-standard_cart .view-cart-items > .item .dp-protect { margin: 1.25rem -1.25rem -1.25rem; padding: 1.1rem 1.25rem; border-top: 1px solid rgba(16,16,16,0.10); background: #fff; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } #order-standard_cart .dp-protect-head { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } /* Pill toggle — off (grey, knob left) by default, on (green, knob right) with --on. The WHOIS variant is a real