/* ============================================================ Ultra5 design system ------------------------------------------------------------ Scoped to #ultra-v5 so the existing client-area chrome (header.tpl / footer.tpl / includes/navbar.tpl) is never touched. Wrap any ported page content in
to opt-in. Honors [data-theme="light"] on for the light-mode flip (same attribute ultra-theme.js sets). ============================================================ */ #ultra-v5 { --v5-bg:#0c1929; --v5-bg-soft:#11192a; --v5-bg-elev:#142a45; --v5-ink:#e7ecf4; --v5-ink-soft:#c4cbd6; --v5-ink-mute:#8b94a3; --v5-line:rgba(255,255,255,0.10); --v5-line-soft:rgba(255,255,255,0.06); --v5-accent:#1b84da; --v5-accent-2:#4da6e8; --v5-accent-3:#1559b3; --v5-accent-4:#9bd0ff; --v5-accent-soft:rgba(27,132,218,0.18); --v5-accent-soft-2:rgba(27,132,218,0.08); --v5-gold:#fe9f0d; --v5-orange:#ff7f3d; --v5-orange-deep:#df5b07; --v5-orange-soft:rgba(255,127,61,0.14); --v5-gold-soft:rgba(254,159,13,0.14); --v5-card-bg:#11192a; --v5-card-border:rgba(255,255,255,0.10); --v5-shadow-cta:0 12px 28px -8px rgba(27,132,218,0.55); background: var(--v5-bg); color: var(--v5-ink); line-height: 1.55; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; } [data-theme="light"] #ultra-v5 { --v5-bg:#f5f7fa; --v5-bg-soft:#ffffff; --v5-bg-elev:#ffffff; --v5-ink:#0f1623; --v5-ink-soft:#3a4254; --v5-ink-mute:#6a7385; --v5-line:#e5e9f0; --v5-line-soft:#eef1f6; --v5-accent-soft:rgba(27,121,207,0.10); --v5-accent-soft-2:rgba(27,121,207,0.05); --v5-card-bg:#ffffff; --v5-card-border:#e5e9f0; } #ultra-v5 *,#ultra-v5 *::before,#ultra-v5 *::after { box-sizing: border-box; } #ultra-v5 a { color: var(--v5-accent-2); text-decoration: none; } #ultra-v5 a:hover { color: var(--v5-accent); } #ultra-v5 .v5-shell { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ============================================================ HERO BAND ============================================================ */ #ultra-v5 .v5-hero { position: relative; padding: 60px 0 70px; overflow: hidden; text-align: center; background: radial-gradient(ellipse 80% 50% at 50% 100%, var(--v5-accent-soft), transparent 60%), radial-gradient(circle 600px at 80% 30%, var(--v5-accent-soft-2), transparent 50%), radial-gradient(circle 500px at 15% 25%, rgba(255,127,61,0.06), transparent 55%); } #ultra-v5 .v5-hero-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--v5-accent-2); margin: 0 0 16px; } #ultra-v5 .v5-hero-eyebrow .v5-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v5-accent-2); box-shadow: 0 0 12px var(--v5-accent-2); } #ultra-v5 .v5-hero h1 { font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; max-width: 920px; margin: 0 auto 18px; text-wrap: balance; color: var(--v5-ink); } #ultra-v5 .v5-hero h1 em { /* Lock inherited typography against any global em rules from styles.css / Bootstrap-derived sheets; otherwise legacy `em { font-size: smaller; font-style: italic; display: block }` rules would shrink the name and push it to a new line. */ display: inline !important; font-style: normal !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; vertical-align: baseline !important; background-image: linear-gradient(90deg, var(--v5-accent-2), var(--v5-accent-4), var(--v5-accent-2)); background-size: 200% auto; background-repeat: repeat; background-position: 0% center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: v5-em-sweep 4s linear infinite; } [data-theme="light"] #ultra-v5 .v5-hero h1 em { background-image: linear-gradient(90deg, var(--v5-orange), var(--v5-gold), var(--v5-orange)); } @keyframes v5-em-sweep { from { background-position: 0% center; } to { background-position: -200% center; } } @media (prefers-reduced-motion: reduce) { #ultra-v5 .v5-hero h1 em { animation: none; } } #ultra-v5 .v5-hero .v5-lede { font-size: 16px; color: var(--v5-ink-soft); line-height: 1.6; max-width: 720px; margin: 0 auto 30px; } #ultra-v5 .v5-hero-ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; } /* CTA buttons */ #ultra-v5 .v5-cta-primary { background: var(--v5-accent); color: #fff !important; padding: 14px 28px; border-radius: 10px; font-weight: 700; font-size: 15px; box-shadow: var(--v5-shadow-cta); display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; border: 1px solid var(--v5-accent); transition: transform .18s, box-shadow .18s, background .18s; } #ultra-v5 .v5-cta-primary:hover { transform: translateY(-1px); background: var(--v5-accent-3); color: #fff !important; box-shadow: 0 14px 36px -8px rgba(27,132,218,0.65); } #ultra-v5 .v5-cta-secondary { background: transparent; color: var(--v5-ink) !important; padding: 14px 26px; border-radius: 10px; font-weight: 700; font-size: 15px; border: 1px solid var(--v5-card-border); display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; transition: border-color .18s, background .18s; } #ultra-v5 .v5-cta-secondary:hover { border-color: var(--v5-accent-2); background: var(--v5-accent-soft-2); } #ultra-v5 .v5-hero-trust { display: flex; align-items: center; gap: 22px 32px; flex-wrap: wrap; justify-content: center; color: var(--v5-ink-mute); font-size: 13.5px; } #ultra-v5 .v5-hero-trust strong { color: var(--v5-ink); font-weight: 700; } #ultra-v5 .v5-hero-trust .v5-divider { width: 1px; height: 18px; background: var(--v5-line); } /* ============================================================ HERO -- LIGHT-MODE BLUE GRADIENT TREATMENT ------------------------------------------------------------ In dark mode the hero is a subtle radial wash on the bg. In light mode that wash disappears against the off-white body and the band reads as empty. Operator wants a solid brand blue->deep blue gradient with white text + inverted CTAs. ============================================================ */ [data-theme="light"] #ultra-v5 .v5-hero { background: linear-gradient(135deg, var(--v5-accent) 0%, var(--v5-accent-3) 100%); color: #fff; } [data-theme="light"] #ultra-v5 .v5-hero h1, [data-theme="light"] #ultra-v5 .v5-hero .v5-lede, [data-theme="light"] #ultra-v5 .v5-hero-trust { color: #fff; } [data-theme="light"] #ultra-v5 .v5-hero-trust strong { color: #fff; } [data-theme="light"] #ultra-v5 .v5-hero .v5-lede { color: rgba(255,255,255,0.92); } [data-theme="light"] #ultra-v5 .v5-hero-eyebrow { color: rgba(255,255,255,0.85); } [data-theme="light"] #ultra-v5 .v5-hero-eyebrow .v5-dot { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.65); } [data-theme="light"] #ultra-v5 .v5-hero-trust .v5-divider { background: rgba(255,255,255,0.35); } /* The em ("Mikael.") stays orange-gold gradient -- pops against the blue band. */ /* Primary CTA inverts on the blue gradient: white bg + brand-blue text + icon */ [data-theme="light"] #ultra-v5 .v5-hero .v5-cta-primary, [data-theme="light"] #ultra-v5 .v5-hero .v5-cta-primary:hover { background: #fff !important; color: var(--v5-accent-3) !important; -webkit-text-fill-color: var(--v5-accent-3) !important; border-color: #fff !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.30); } [data-theme="light"] #ultra-v5 .v5-hero .v5-cta-primary i, [data-theme="light"] #ultra-v5 .v5-hero .v5-cta-primary:hover i { color: var(--v5-accent-3) !important; /* FA icons render via ::before text; the global button-enforcement rule sets -webkit-text-fill-color: #fff !important on i, which wins over `color` in webkit. Re-flip it here. */ -webkit-text-fill-color: var(--v5-accent-3) !important; } [data-theme="light"] #ultra-v5 .v5-hero .v5-cta-primary:hover { background: rgba(255,255,255,0.94) !important; transform: translateY(-1px); } /* Secondary CTA on the blue band: white outline + white text */ [data-theme="light"] #ultra-v5 .v5-hero .v5-cta-secondary { background: transparent; border-color: rgba(255,255,255,0.6) !important; color: #fff !important; } [data-theme="light"] #ultra-v5 .v5-hero .v5-cta-secondary i { color: #fff !important; } [data-theme="light"] #ultra-v5 .v5-hero .v5-cta-secondary:hover { border-color: #fff !important; background: rgba(255,255,255,0.12); color: #fff !important; } /* ============================================================ STAT RIBBON BAND ============================================================ */ #ultra-v5 .v5-ribbon { background: var(--v5-bg-soft); border-top: 1px solid var(--v5-line-soft); border-bottom: 1px solid var(--v5-line-soft); padding: 22px 0; } #ultra-v5 .v5-ribbon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } #ultra-v5 .v5-ribbon-tile { display: flex; align-items: center; gap: 16px; padding: 6px 12px; text-decoration: none !important; color: inherit; transition: transform .18s; } #ultra-v5 .v5-ribbon-tile:hover { transform: translateY(-1px); } #ultra-v5 .v5-ribbon-tile:not(:last-child) { border-right: 1px solid var(--v5-line-soft); } #ultra-v5 .v5-ribbon-ic { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; } #ultra-v5 .v5-ribbon-ic.v5-blue-deep { background: linear-gradient(135deg, var(--v5-accent), var(--v5-accent-3)); box-shadow: 0 8px 20px -8px rgba(27,132,218,0.6); } #ultra-v5 .v5-ribbon-ic.v5-blue-mid { background: linear-gradient(135deg, var(--v5-accent-2), var(--v5-accent)); box-shadow: 0 8px 20px -8px rgba(77,166,232,0.55); } #ultra-v5 .v5-ribbon-ic.v5-gold { background: linear-gradient(135deg, var(--v5-gold), #d97706); box-shadow: 0 8px 20px -8px rgba(254,159,13,0.6); } #ultra-v5 .v5-ribbon-ic.v5-orange { background: linear-gradient(135deg, var(--v5-orange), var(--v5-orange-deep)); box-shadow: 0 8px 20px -8px rgba(255,127,61,0.6); } #ultra-v5 .v5-ribbon-val { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--v5-ink); } #ultra-v5 .v5-ribbon-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--v5-ink-mute); margin-top: 4px; } /* ============================================================ BODY + SECTION HEAD ============================================================ */ #ultra-v5 .v5-body { padding: 56px 0 80px; } #ultra-v5 .v5-sec-head { text-align: center; margin-bottom: 36px; } #ultra-v5 .v5-sec-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--v5-accent-2); margin: 0 0 12px; } #ultra-v5 .v5-sec-eyebrow .v5-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v5-accent-2); box-shadow: 0 0 12px var(--v5-accent-2); } #ultra-v5 .v5-sec-head h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; color: var(--v5-ink); } #ultra-v5 .v5-sec-head h2 em { display: inline !important; font-style: normal !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; vertical-align: baseline !important; color: var(--v5-accent-2); } [data-theme="light"] #ultra-v5 .v5-sec-head h2 em { color: var(--v5-orange); } #ultra-v5 .v5-sec-head p { font-size: 14.5px; color: var(--v5-ink-mute); max-width: 600px; margin: 0 auto; line-height: 1.55; } /* ============================================================ KB SEARCH BAR ============================================================ */ #ultra-v5 .v5-kb { display: flex; align-items: center; gap: 12px; background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 14px; padding: 8px 8px 8px 22px; max-width: 720px; margin: 0 auto 64px; transition: border-color .18s, box-shadow .18s; } #ultra-v5 .v5-kb:focus-within { border-color: var(--v5-accent-2); box-shadow: 0 0 0 4px var(--v5-accent-soft-2); } #ultra-v5 .v5-kb i.fa-magnifying-glass, #ultra-v5 .v5-kb i.fa-search { color: var(--v5-ink-mute); font-size: 16px; } #ultra-v5 .v5-kb input { flex: 1; background: transparent; border: 0; outline: 0; font: inherit; font-size: 14.5px; color: var(--v5-ink); padding: 12px 0; } #ultra-v5 .v5-kb input::placeholder { color: var(--v5-ink-mute); } #ultra-v5 .v5-kb button { background: var(--v5-accent); color: #fff; border: 0; border-radius: 10px; padding: 11px 22px; font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } #ultra-v5 .v5-kb button:hover { background: var(--v5-accent-3); } /* ============================================================ QUICK ACTIONS FEATURE GRID ============================================================ */ #ultra-v5 .v5-qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 64px; } #ultra-v5 .v5-qa { background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 16px; padding: 26px; display: flex; align-items: flex-start; gap: 16px; text-decoration: none !important; color: inherit; transition: border-color .18s, transform .18s, box-shadow .18s; } #ultra-v5 .v5-qa:hover { border-color: var(--v5-accent-2); transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(27,132,218,0.35); } #ultra-v5 .v5-qa-ic { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; } /* Six on-palette gradients - 3 blue variants + 3 warm variants */ #ultra-v5 .v5-qa-ic.v5-b1 { background: linear-gradient(135deg, var(--v5-accent), var(--v5-accent-3)); } #ultra-v5 .v5-qa-ic.v5-b2 { background: linear-gradient(135deg, var(--v5-accent-2), var(--v5-accent)); } #ultra-v5 .v5-qa-ic.v5-b3 { background: linear-gradient(135deg, var(--v5-accent-3), var(--v5-accent)); } #ultra-v5 .v5-qa-ic.v5-o1 { background: linear-gradient(135deg, var(--v5-gold), #d97706); } #ultra-v5 .v5-qa-ic.v5-o2 { background: linear-gradient(135deg, var(--v5-orange), var(--v5-orange-deep)); } #ultra-v5 .v5-qa-ic.v5-o3 { background: linear-gradient(135deg, var(--v5-gold), var(--v5-orange)); } #ultra-v5 .v5-qa-text { font-weight: 800; font-size: 16px; color: var(--v5-ink); margin-bottom: 4px; } #ultra-v5 .v5-qa-desc { font-size: 13.5px; color: var(--v5-ink-mute); line-height: 1.5; } /* ============================================================ CARDS + ROWS (services / tickets / generic list cards) ============================================================ */ #ultra-v5 .v5-panels { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; } #ultra-v5 .v5-card { background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 16px; overflow: hidden; } #ultra-v5 .v5-card-hdr { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--v5-line-soft); } #ultra-v5 .v5-card-hdr h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--v5-ink); display: flex; align-items: center; gap: 10px; } #ultra-v5 .v5-card-hdr h3 i { color: var(--v5-accent-2); } #ultra-v5 .v5-card-hdr .v5-card-action { font-size: 13px; font-weight: 700; color: var(--v5-accent-2); } #ultra-v5 .v5-card-body { padding: 18px 22px; } #ultra-v5 .v5-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--v5-line-soft); text-decoration: none !important; color: inherit; transition: background .15s; } #ultra-v5 .v5-row:last-child { border-bottom: 0; } #ultra-v5 .v5-row:hover { background: var(--v5-accent-soft-2); } #ultra-v5 .v5-row-main { display: flex; align-items: center; gap: 14px; min-width: 0; } #ultra-v5 .v5-row-ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--v5-accent-soft); color: var(--v5-accent-2); font-size: 14px; } #ultra-v5 .v5-row-ic.v5-warm { background: var(--v5-orange-soft); color: var(--v5-orange); } #ultra-v5 .v5-row-title { font-weight: 700; font-size: 14.5px; color: var(--v5-ink); } #ultra-v5 .v5-row-sub { font-size: 12.5px; color: var(--v5-ink-mute); margin-top: 1px; } #ultra-v5 .v5-row-meta { font-size: 13px; color: var(--v5-ink-mute); display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* ============================================================ STATUS PILLS (on-brand only) ============================================================ */ #ultra-v5 .v5-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } #ultra-v5 .v5-pill-active { background: var(--v5-accent-soft); color: var(--v5-accent-2); } #ultra-v5 .v5-pill-info { background: var(--v5-accent-soft); color: var(--v5-accent-2); } #ultra-v5 .v5-pill-renew { background: var(--v5-gold-soft); color: var(--v5-gold); } #ultra-v5 .v5-pill-alert { background: var(--v5-orange-soft); color: var(--v5-orange); } [data-theme="light"] #ultra-v5 .v5-pill-active { color: var(--v5-accent-3); } [data-theme="light"] #ultra-v5 .v5-pill-info { color: var(--v5-accent-3); } [data-theme="light"] #ultra-v5 .v5-pill-renew { color: #b66a00; } [data-theme="light"] #ultra-v5 .v5-pill-alert { color: var(--v5-orange-deep); } /* ============================================================ REGISTER-A-DOMAIN BAND ============================================================ */ #ultra-v5 .v5-domain { background: radial-gradient(circle 600px at 80% 50%, rgba(255,127,61,0.10), transparent 60%), radial-gradient(circle 500px at 20% 40%, var(--v5-accent-soft-2), transparent 55%), var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 20px; padding: 36px; margin-bottom: 64px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: center; } #ultra-v5 .v5-domain-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--v5-accent-2); margin: 0 0 10px; } #ultra-v5 .v5-domain-eyebrow .v5-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v5-accent-2); box-shadow: 0 0 12px var(--v5-accent-2); } #ultra-v5 .v5-domain h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; color: var(--v5-ink); } #ultra-v5 .v5-domain h3 em { display: inline !important; font-style: normal !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; vertical-align: baseline !important; color: var(--v5-accent-2); } [data-theme="light"] #ultra-v5 .v5-domain h3 em { color: var(--v5-orange); } #ultra-v5 .v5-domain p { font-size: 14px; color: var(--v5-ink-mute); margin: 0; line-height: 1.55; } #ultra-v5 .v5-domain-form { display: flex; gap: 10px; background: var(--v5-bg); border: 1px solid var(--v5-card-border); border-radius: 12px; padding: 6px; transition: border-color .18s, box-shadow .18s; } [data-theme="light"] #ultra-v5 .v5-domain-form { background: var(--v5-bg); } #ultra-v5 .v5-domain-form:focus-within { border-color: var(--v5-accent-2); box-shadow: 0 0 0 4px var(--v5-accent-soft-2); } #ultra-v5 .v5-domain-form input { flex: 1; background: transparent; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--v5-ink); padding: 10px 14px; min-width: 0; } #ultra-v5 .v5-domain-form input::placeholder { color: var(--v5-ink-mute); } #ultra-v5 .v5-domain-form select { background: transparent; border: 0; outline: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--v5-ink-soft); padding: 10px 12px; cursor: pointer; } #ultra-v5 .v5-domain-form button { background: var(--v5-accent); color: #fff; border: 0; border-radius: 10px; padding: 12px 24px; font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .18s, color .18s, border-color .18s; } #ultra-v5 .v5-domain-form button:hover { background: var(--v5-accent-3); } /* Transfer button = ghost variant so the v5-domain band shows a clear primary (Check) + secondary (Transfer) hierarchy rather than two duplicate-looking primary CTAs side by side. */ #ultra-v5 .v5-domain-form button.v5-domain-form-transfer { background: transparent; color: var(--v5-ink-soft); border: 1px solid var(--v5-card-border); } #ultra-v5 .v5-domain-form button.v5-domain-form-transfer:hover { background: var(--v5-accent-soft-2); color: var(--v5-ink); border-color: var(--v5-accent-2); } #ultra-v5 .v5-domain-form button.v5-domain-form-transfer i { color: var(--v5-accent-2); } #ultra-v5 .v5-domain-tlds { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; font-size: 12.5px; color: var(--v5-ink-mute); } #ultra-v5 .v5-domain-tlds strong { color: var(--v5-ink); font-weight: 700; } /* ============================================================ PROMO ROW ============================================================ */ #ultra-v5 .v5-promo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } #ultra-v5 .v5-promo { background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 16px; padding: 26px 28px; display: flex; align-items: flex-start; gap: 18px; transition: border-color .18s, transform .18s; } #ultra-v5 .v5-promo:hover { border-color: var(--v5-accent-2); transform: translateY(-2px); } #ultra-v5 .v5-promo-ic { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; } #ultra-v5 .v5-promo-ic.v5-gold { background: linear-gradient(135deg, var(--v5-gold), #d97706); box-shadow: 0 8px 20px -8px rgba(254,159,13,0.55); } #ultra-v5 .v5-promo-ic.v5-blue { background: linear-gradient(135deg, var(--v5-accent-2), var(--v5-accent)); box-shadow: 0 8px 20px -8px rgba(77,166,232,0.55); } #ultra-v5 .v5-promo-body { flex: 1; } #ultra-v5 .v5-promo-body h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; color: var(--v5-ink); letter-spacing: -0.01em; } #ultra-v5 .v5-promo-body p { margin: 0 0 14px; font-size: 13.5px; color: var(--v5-ink-mute); line-height: 1.55; } #ultra-v5 .v5-promo-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 10px; font-weight: 700; font-size: 13.5px; text-decoration: none !important; transition: transform .18s, background .18s, color .18s, border-color .18s; } #ultra-v5 .v5-promo-btn-gold { background: var(--v5-gold); color: #fff !important; border: 1px solid var(--v5-gold); } #ultra-v5 .v5-promo-btn-gold:hover { background: var(--v5-orange-deep); border-color: var(--v5-orange-deep); transform: translateY(-1px); color: #fff !important; } #ultra-v5 .v5-promo-btn-ghost { background: transparent; color: var(--v5-ink) !important; border: 1px solid var(--v5-card-border); } #ultra-v5 .v5-promo-btn-ghost:hover { border-color: var(--v5-accent-2); color: var(--v5-accent-2) !important; transform: translateY(-1px); } /* ============================================================ IP-UNBLOCK ALERTS (preserved from ultra4 - now scoped + themed) ============================================================ */ #ultra-v5 .v5-alert { border-radius: 14px; padding: 18px 22px; margin: 0 0 22px; font-size: 14px; line-height: 1.55; border: 1px solid var(--v5-card-border); background: var(--v5-card-bg); } #ultra-v5 .v5-alert.v5-alert-warn { border-color: rgba(254,159,13,0.4); background: var(--v5-gold-soft); color: var(--v5-ink); } #ultra-v5 .v5-alert.v5-alert-alert { border-color: rgba(255,127,61,0.4); background: var(--v5-orange-soft); color: var(--v5-ink); } /* ============================================================ V5 HOME BANNER (my.ultrawebhosting.com homepage hero) ------------------------------------------------------------ Mirrors the polished domain-check hero on ultrawebhosting.com/domain-name-check minus the purple gradient wash (operator wants the rest of the design but not the purple). Rendered in header.tpl under `{if $templatefile == 'homepage'}`. Always dark - this is a marketing splash, doesn't flip for light mode (the surrounding nav already inverts so the band reads as intentional dark hero against either-mode chrome). ============================================================ */ .v5-home-banner { background: #0c1929; position: relative; overflow: hidden; padding: 64px 0; } /* Subtle blue radial-gradient glow for depth (not purple - per operator) */ .v5-home-banner::before, .v5-home-banner::after { content: ""; position: absolute; pointer-events: none; z-index: 0; } .v5-home-banner::before { width: 720px; height: 720px; right: -240px; top: -260px; background: radial-gradient(circle, rgba(27,132,218,0.22), transparent 60%); } .v5-home-banner::after { width: 560px; height: 560px; left: -200px; bottom: -240px; background: radial-gradient(circle, rgba(77,166,232,0.10), transparent 60%); } .v5-home-banner #ultra-v5.v5-home-banner-scope { background: transparent; position: relative; z-index: 1; } .v5-home-banner .v5-home-shell { max-width: 880px; margin: 0 auto; padding: 0 24px; text-align: center; } .v5-home-banner .v5-home-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #4da6e8; } .v5-home-banner .v5-home-eyebrow .v5-dot { width: 6px; height: 6px; border-radius: 50%; background: #4da6e8; box-shadow: 0 0 12px rgba(77,166,232,0.8); } .v5-home-banner .v5-home-h1 { font-size: clamp(34px, 4.8vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin: 0 0 18px; color: #ffffff; text-wrap: balance; } .v5-home-banner .v5-home-h1 em { display: inline !important; font-style: normal !important; font-size: inherit !important; font-weight: inherit !important; background-image: linear-gradient(90deg, #4da6e8, #9bd0ff, #4da6e8); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: v5-em-sweep 4s linear infinite; } .v5-home-banner .v5-home-lede { font-size: 13.5px; color: rgba(255,255,255,0.55); letter-spacing: 1.6px; text-transform: uppercase; font-weight: 500; max-width: 720px; margin: 0 auto 32px; line-height: 1.7; } /* ---- Search row ---- */ .v5-home-banner .v5-home-search { margin: 0 auto 24px; max-width: 880px; } .v5-home-banner .v5-home-search-row { display: flex; align-items: stretch; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 6px; box-shadow: 0 12px 36px -12px rgba(27,132,218,0.35); } .v5-home-banner .v5-home-input { flex: 1; min-width: 0; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; padding: 14px 18px !important; font-size: 16px; color: #e6edf5 !important; -webkit-text-fill-color: #e6edf5 !important; outline: 0 !important; box-shadow: none !important; caret-color: #4da6e8; height: auto; } .v5-home-banner .v5-home-input::placeholder { color: rgba(255,255,255,0.40); font-weight: 400; } .v5-home-banner .v5-home-input::-webkit-input-placeholder { color: rgba(255,255,255,0.40); } .v5-home-banner .v5-home-input::-moz-placeholder { color: rgba(255,255,255,0.40); opacity: 1; } /* Defeat browser autofill repaint - same pattern as cart commit 723999b. */ .v5-home-banner .v5-home-input:-webkit-autofill, .v5-home-banner .v5-home-input:-webkit-autofill:hover, .v5-home-banner .v5-home-input:-webkit-autofill:focus, .v5-home-banner .v5-home-input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #0c1929 inset !important; box-shadow: 0 0 0 1000px #0c1929 inset !important; -webkit-text-fill-color: #e6edf5 !important; caret-color: #4da6e8 !important; transition: background-color 5000s ease-in-out 0s !important; } /* TLD dropdown */ .v5-home-banner .v5-home-tld { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: rgba(255,255,255,0.06) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6c2d1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 10px; padding: 10px 36px 10px 16px; font-size: 14px; font-weight: 600; color: #e6edf5 !important; -webkit-text-fill-color: #e6edf5 !important; cursor: pointer; height: auto; outline: 0; box-shadow: none; min-width: 120px; } .v5-home-banner .v5-home-tld:focus { border-color: #4da6e8 !important; box-shadow: 0 0 0 4px rgba(77,166,232,0.16) !important; } .v5-home-banner .v5-home-tld option { background: #0c1929; color: #e6edf5; } /* Buttons */ .v5-home-banner .v5-home-cta { display: inline-flex; align-items: center; gap: 8px; background: #1b84da !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid #1b84da !important; border-radius: 10px; padding: 12px 22px; font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none !important; transition: background .15s, border-color .15s, transform .15s; white-space: nowrap; } .v5-home-banner .v5-home-cta:hover { background: #1559b3 !important; border-color: #1559b3 !important; transform: translateY(-1px); color: #ffffff !important; } .v5-home-banner .v5-home-cta i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .v5-home-banner .v5-home-cta-secondary { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; } .v5-home-banner .v5-home-cta-secondary:hover { background: rgba(77,166,232,0.10) !important; border-color: #4da6e8 !important; color: #ffffff !important; } /* TLD pricing pills below the search */ .v5-home-banner .v5-home-tld-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 32px; } .v5-home-banner .v5-home-tld-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); padding: 6px 14px; border-radius: 999px; font-size: 13px; color: rgba(255,255,255,0.65); } .v5-home-banner .v5-home-tld-pill strong { color: #ffffff; font-weight: 700; margin-right: 2px; } /* Stats line */ .v5-home-banner .v5-home-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 14px; color: rgba(255,255,255,0.55); } .v5-home-banner .v5-home-stats > div { display: inline-flex; align-items: center; gap: 6px; } .v5-home-banner .v5-home-stats strong { color: #ffffff; font-weight: 700; } /* Responsive: stack the search row */ @media (max-width: 720px) { .v5-home-banner { padding: 44px 0; } .v5-home-banner .v5-home-search-row { flex-direction: column; } .v5-home-banner .v5-home-tld, .v5-home-banner .v5-home-cta { width: 100%; justify-content: center; } .v5-home-banner .v5-home-tld { padding-right: 16px; background-position: calc(100% - 14px) center; } .v5-home-banner .v5-home-stats { gap: 8px 20px; font-size: 13px; } } /* ============================================================ DEFEAT BROWSER AUTOFILL REPAINT (Chrome + Edge) ------------------------------------------------------------ When the browser identifies an input value as a saved/autofill candidate (KB search query previously submitted, domain previously checked, etc.), it OVERLAYS the input with its autofill chrome: lavender/yellow background + dark text -- which CANNOT be defeated by regular `background-color` rules because the browser paints them in a separate layer. The cross-browser standard workaround: paint a 1000px inset box- shadow that covers the input interior with our desired bg (because webkit DOES honor that over its autofill yellow), plus `-webkit-text-fill-color` to repaint the text (regular `color` is ignored on autofilled inputs in webkit), plus a 5000s transition so the override stays stable past any autofill fade-in animation. Scoped #ultra-v5 input so every v5 input gets the protection automatically (KB search, domain checker, ticket reply, profile fields, security questions, etc.). See cart commit 723999b for the original pattern. * ============================================================ */ #ultra-v5 input:-webkit-autofill, #ultra-v5 input:-webkit-autofill:hover, #ultra-v5 input:-webkit-autofill:focus, #ultra-v5 input:-webkit-autofill:active, #ultra-v5 textarea:-webkit-autofill, #ultra-v5 textarea:-webkit-autofill:hover, #ultra-v5 textarea:-webkit-autofill:focus, #ultra-v5 textarea:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--v5-card-bg) inset !important; box-shadow: 0 0 0 1000px var(--v5-card-bg) inset !important; -webkit-text-fill-color: var(--v5-ink) !important; caret-color: var(--v5-ink) !important; transition: background-color 5000s ease-in-out 0s !important; } [data-theme="light"] #ultra-v5 input:-webkit-autofill, [data-theme="light"] #ultra-v5 input:-webkit-autofill:hover, [data-theme="light"] #ultra-v5 input:-webkit-autofill:focus, [data-theme="light"] #ultra-v5 input:-webkit-autofill:active, [data-theme="light"] #ultra-v5 textarea:-webkit-autofill, [data-theme="light"] #ultra-v5 textarea:-webkit-autofill:hover, [data-theme="light"] #ultra-v5 textarea:-webkit-autofill:focus, [data-theme="light"] #ultra-v5 textarea:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: var(--v5-ink) !important; } /* For inputs that sit inside a v5-kb wrapper (transparent input on top of the wrapper's card bg) the inset shadow needs the WRAPPER bg, not the card bg. The wrapper IS the card-bg, so it's the same value here. */ /* ============================================================ COMPACT BUTTONS (smaller than v5-cta-*; for toolbars / sidebars) ============================================================ */ #ultra-v5 .v5-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; font-family: inherit; border: 1px solid transparent; cursor: pointer; text-decoration: none !important; transition: background .18s, color .18s, border-color .18s, transform .18s; -webkit-text-fill-color: currentColor; } #ultra-v5 .v5-btn-sm { padding: 8px 14px; font-size: 13px; } #ultra-v5 .v5-btn-primary { background: var(--v5-accent); color: #fff !important; border-color: var(--v5-accent); } #ultra-v5 .v5-btn-primary:hover { background: var(--v5-accent-3); border-color: var(--v5-accent-3); transform: translateY(-1px); color: #fff !important; } #ultra-v5 .v5-btn-ghost { background: transparent; color: var(--v5-ink-soft) !important; border-color: var(--v5-card-border); } #ultra-v5 .v5-btn-ghost:hover { color: var(--v5-ink) !important; border-color: var(--v5-accent-2); background: var(--v5-accent-soft-2); } #ultra-v5 .v5-btn-gold { background: var(--v5-gold); color: #fff !important; border-color: var(--v5-gold); } #ultra-v5 .v5-btn-gold:hover { background: var(--v5-orange-deep); border-color: var(--v5-orange-deep); transform: translateY(-1px); color: #fff !important; } /* ============================================================ BREADCRUMB + PAGE HEAD (reusable across non-home pages) ============================================================ */ #ultra-v5 .v5-crumbs { font-size: 12.5px; color: var(--v5-ink-mute); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #ultra-v5 .v5-crumbs a { color: var(--v5-ink-mute); } #ultra-v5 .v5-crumbs a:hover { color: var(--v5-accent-2); } #ultra-v5 .v5-crumbs i { font-size: 9px; opacity: .5; } #ultra-v5 .v5-pagehead { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 0 0 24px; } #ultra-v5 .v5-pagehead h1 { font-size: clamp(26px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.1; color: var(--v5-ink); } #ultra-v5 .v5-pagehead h1 em { display: inline !important; font-style: normal !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; vertical-align: baseline !important; background-image: linear-gradient(90deg, var(--v5-accent-2), var(--v5-accent-4), var(--v5-accent-2)); background-size: 200% auto; background-repeat: repeat; background-position: 0% center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: v5-em-sweep 4s linear infinite; } [data-theme="light"] #ultra-v5 .v5-pagehead h1 em { /* Non-hero page headers (tickets, invoices, services, domains, etc.) sit on a white body in light mode -- orange-on-white was hard to read. Flip to brand blue gradient (the hero stays orange because it has a blue band behind it where orange pops). */ background-image: linear-gradient(90deg, var(--v5-accent), var(--v5-accent-3), var(--v5-accent)); } #ultra-v5 .v5-pagehead .v5-meta { color: var(--v5-ink-mute); font-size: 13.5px; margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #ultra-v5 .v5-pagehead-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ============================================================ STATUS PILLS (extra semantic colours for invoice / order state) ============================================================ */ #ultra-v5 .v5-pill-good { background: rgba(46,184,114,0.14); color: #5fd49a; } #ultra-v5 .v5-pill-warn { background: var(--v5-gold-soft); color: var(--v5-gold); } #ultra-v5 .v5-pill-bad { background: rgba(232,69,69,0.14); color: #ff7777; } [data-theme="light"] #ultra-v5 .v5-pill-good { color: #1d8f54; } [data-theme="light"] #ultra-v5 .v5-pill-warn { color: #b66a00; } [data-theme="light"] #ultra-v5 .v5-pill-bad { color: #c43030; } /* ============================================================ INVOICE PAGE (viewinvoice.tpl, viewquote.tpl can reuse) ============================================================ */ #ultra-v5 .v5-inv-grid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; } #ultra-v5 .v5-card-stack > .v5-card { margin-bottom: 18px; } #ultra-v5 .v5-card-stack > .v5-card:last-child { margin-bottom: 0; } #ultra-v5 .v5-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } #ultra-v5 .v5-party-lbl { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--v5-ink-mute); margin: 0 0 6px; } #ultra-v5 .v5-party { color: var(--v5-ink-soft); font-size: 14px; line-height: 1.55; } #ultra-v5 .v5-party strong { color: var(--v5-ink); font-weight: 700; display: block; margin-bottom: 4px; } #ultra-v5 .v5-items { width: 100%; border-collapse: collapse; } #ultra-v5 .v5-items th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--v5-ink-mute); padding: 14px 22px; border-bottom: 1px solid var(--v5-line-soft); } #ultra-v5 .v5-items td { padding: 16px 22px; border-bottom: 1px solid var(--v5-line-soft); font-size: 14px; color: var(--v5-ink); } #ultra-v5 .v5-items tr:last-child td { border-bottom: 0; } #ultra-v5 .v5-items td.num, #ultra-v5 .v5-items th.num { text-align: right; font-variant-numeric: tabular-nums; } #ultra-v5 .v5-items .v5-item-title { font-weight: 700; } #ultra-v5 .v5-items .v5-item-sub { font-size: 12.5px; color: var(--v5-ink-mute); margin-top: 2px; } #ultra-v5 .v5-totals { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; background: rgba(255,255,255,0.02); border-top: 1px solid var(--v5-line-soft); } [data-theme="light"] #ultra-v5 .v5-totals { background: #fafbfd; } #ultra-v5 .v5-totals-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--v5-ink-soft); font-variant-numeric: tabular-nums; } #ultra-v5 .v5-totals-row.v5-grand { font-size: 20px; font-weight: 800; color: var(--v5-ink); padding-top: 10px; border-top: 1px solid var(--v5-line-soft); margin-top: 6px; } #ultra-v5 .v5-pay { background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 16px; padding: 22px; position: sticky; top: 134px; } #ultra-v5 .v5-pay-lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--v5-ink-mute); margin: 0 0 6px; } #ultra-v5 .v5-pay-amt { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--v5-ink); font-variant-numeric: tabular-nums; } #ultra-v5 .v5-pay-due { font-size: 13px; color: var(--v5-ink-mute); margin: 6px 0 18px; } #ultra-v5 .v5-pay-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } #ultra-v5 .v5-pay-cta .v5-btn { width: 100%; } #ultra-v5 .v5-pay-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--v5-line-soft); font-size: 13.5px; } #ultra-v5 .v5-pay-row .v5-pay-lbl-inline { color: var(--v5-ink-mute); } #ultra-v5 .v5-pay-row .v5-pay-val { color: var(--v5-ink); font-weight: 700; } #ultra-v5 .v5-pay-method { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--v5-card-border); background: rgba(255,255,255,0.02); margin-top: 14px; } [data-theme="light"] #ultra-v5 .v5-pay-method { background: #fafbfd; } #ultra-v5 .v5-pay-method i { font-size: 22px; color: var(--v5-accent-2); } #ultra-v5 .v5-pay-method .pm-title { font-weight: 700; color: var(--v5-ink); font-size: 14px; } #ultra-v5 .v5-pay-method .pm-sub { font-size: 12.5px; color: var(--v5-ink-mute); } /* WHMCS-rendered $paymentbutton (raw HTML, usually a .btn .btn-success) - re-skin it inside .v5-pay so it matches v5-btn-primary aesthetic */ #ultra-v5 .v5-pay .btn, #ultra-v5 .v5-pay button[type="submit"], #ultra-v5 .v5-pay input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; font-family: inherit; background: var(--v5-accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 1px solid var(--v5-accent) !important; cursor: pointer; text-decoration: none !important; transition: background .18s, transform .18s; } #ultra-v5 .v5-pay .btn:hover, #ultra-v5 .v5-pay button[type="submit"]:hover, #ultra-v5 .v5-pay input[type="submit"]:hover { background: var(--v5-accent-3) !important; border-color: var(--v5-accent-3) !important; transform: translateY(-1px); } #ultra-v5 .v5-notes { font-size: 14px; color: var(--v5-ink-soft); line-height: 1.65; margin: 0; } #ultra-v5 .v5-notes a { font-weight: 700; } /* Inline confirmation banners (replaces panel.tpl include skin) */ #ultra-v5 .v5-flash { display: flex; align-items: flex-start; gap: 12px; border-radius: 14px; padding: 16px 20px; margin: 0 0 22px; font-size: 14px; line-height: 1.55; border: 1px solid var(--v5-card-border); background: var(--v5-card-bg); color: var(--v5-ink); } #ultra-v5 .v5-flash i { font-size: 18px; margin-top: 2px; flex-shrink: 0; } #ultra-v5 .v5-flash-good { border-color: rgba(46,184,114,0.4); background: rgba(46,184,114,0.10); } #ultra-v5 .v5-flash-good i { color: #2eb872; } #ultra-v5 .v5-flash-info { border-color: rgba(77,166,232,0.4); background: var(--v5-accent-soft-2); } #ultra-v5 .v5-flash-info i { color: var(--v5-accent-2); } #ultra-v5 .v5-flash-warn { border-color: rgba(254,159,13,0.4); background: var(--v5-gold-soft); } #ultra-v5 .v5-flash-warn i { color: var(--v5-gold); } #ultra-v5 .v5-flash-bad { border-color: rgba(232,69,69,0.4); background: rgba(232,69,69,0.10); } #ultra-v5 .v5-flash-bad i { color: #e84545; } /* Apply-credit inline form */ #ultra-v5 .v5-credit-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #ultra-v5 .v5-credit-form .v5-credit-input { flex: 1; min-width: 160px; background: var(--v5-bg); border: 1px solid var(--v5-card-border); border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px; color: var(--v5-ink); } #ultra-v5 .v5-credit-form .v5-credit-input:focus { outline: 0; border-color: var(--v5-accent-2); box-shadow: 0 0 0 4px var(--v5-accent-soft-2); } [data-theme="light"] #ultra-v5 .v5-credit-form .v5-credit-input { background: #fff; } /* Print: hide chrome, breadcrumbs, sidebar, action buttons; print invoice only */ @media print { #ultra-v5 .v5-crumbs, #ultra-v5 .v5-pagehead-actions, #ultra-v5 .v5-pay, #ultra-v5 .hidden-print { display: none !important; } #ultra-v5 .v5-inv-grid { grid-template-columns: 1fr !important; } #ultra-v5 { background: #fff !important; color: #000 !important; } #ultra-v5 .v5-card { box-shadow: none !important; border-color: #999 !important; } } @media (max-width: 980px) { #ultra-v5 .v5-inv-grid { grid-template-columns: 1fr; } #ultra-v5 .v5-pay { position: static; } #ultra-v5 .v5-parties { grid-template-columns: 1fr; } } /* ============================================================ BOOTSTRAP TABS (clientareaproductdetails / clientareadomaindetails) ------------------------------------------------------------ The product + domain detail pages use Bootstrap .nav-tabs + .tab-content + .tab-pane. WHMCS-loaded Bootstrap JS still drives show/hide; only the visuals need flipping. ============================================================ */ #ultra-v5 .nav-tabs, #ultra-v5 .nav-tabs-overflow { display: flex; align-items: center; gap: 4px; border: 0; border-bottom: 1px solid var(--v5-line-soft); margin: 0 0 20px; padding: 0; list-style: none; overflow-x: auto; flex-wrap: wrap; } #ultra-v5 .nav-tabs > li, #ultra-v5 .nav-tabs-overflow > li { margin: 0; float: none; } #ultra-v5 .nav-tabs > li > a, #ultra-v5 .nav-tabs-overflow > li > a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; margin: 0; color: var(--v5-ink-mute) !important; font-size: 13.5px; font-weight: 700; border-radius: 0 !important; transition: color .15s, border-color .15s; } #ultra-v5 .nav-tabs > li > a:hover, #ultra-v5 .nav-tabs-overflow > li > a:hover { color: var(--v5-ink) !important; } #ultra-v5 .nav-tabs > li.active > a, #ultra-v5 .nav-tabs > li.active > a:focus, #ultra-v5 .nav-tabs > li.active > a:hover, #ultra-v5 .nav-tabs-overflow > li.active > a { color: var(--v5-ink) !important; border-bottom-color: var(--v5-accent-2) !important; } #ultra-v5 .nav-tabs > li > a i, #ultra-v5 .nav-tabs-overflow > li > a i { color: var(--v5-accent-2); } #ultra-v5 .tab-content { background: transparent; } #ultra-v5 .tab-content > .tab-pane { padding: 0; } /* For products with only one inner tab (e.g. Weebly = only Domain tab), hide the entire tab nav -- the single tab's content shows below regardless via .tab-pane.in.active so the nav is dead weight. */ #ultra-v5 .nav-tabs:has(> li:only-child), #ultra-v5 .nav-tabs-overflow:has(> li:only-child) { display: none !important; } /* Product-details specific card wrap so the inner overview layout still reads as a tile rather than full-bleed Bootstrap rows */ #ultra-v5 .v5-product-card { background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 16px; padding: 24px; margin: 0 0 22px; } /* Defeat legacy ultra4 .product-status-* background colors that were painting the entire status banner green/red/orange. The v5 design keeps the banner card-coloured + uses a v5-pill for status state. */ #ultra-v5 .v5-product-status, #ultra-v5 .v5-product-status.product-status-active, #ultra-v5 .v5-product-status.product-status-pending, #ultra-v5 .v5-product-status.product-status-suspended, #ultra-v5 .v5-product-status.product-status-cancelled, #ultra-v5 .v5-product-status.product-status-terminated, #ultra-v5 .v5-product-status.product-status-fraud, #ultra-v5 .v5-product-status.product-status-completed { background: transparent !important; color: inherit !important; } /* The legacy template wraps $status text in a chip. When that nests inside our v5-pill we get "pill > legacy-label > text" which renders as a thin outlined box inside the pill. Neutralise the inner legacy span so only the v5-pill chrome remains visible. */ #ultra-v5 .v5-product-status .v5-pill .label, #ultra-v5 .v5-product-status .v5-pill span.status, #ultra-v5 .v5-product-status .v5-pill [class*="status-"] { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; color: inherit !important; font-size: inherit !important; font-weight: inherit !important; text-transform: inherit !important; letter-spacing: inherit !important; display: inline !important; } #ultra-v5 .v5-product-status { display: flex; align-items: center; gap: 18px; padding: 0 0 22px; border-bottom: 1px solid var(--v5-line-soft); margin: 0 0 22px; } #ultra-v5 .v5-product-icon { width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--v5-accent), var(--v5-accent-3)); color: #fff; font-size: 26px; } #ultra-v5 .v5-product-info h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--v5-ink); letter-spacing: -0.01em; } #ultra-v5 .v5-product-info .group { font-size: 13px; color: var(--v5-ink-mute); margin-top: 2px; } #ultra-v5 .v5-product-info .status { font-size: 13.5px; margin-top: 8px; } #ultra-v5 .v5-product-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; } #ultra-v5 .v5-product-meta-cell .lbl { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--v5-ink-mute); margin: 0 0 4px; } #ultra-v5 .v5-product-meta-cell .val { font-size: 14px; font-weight: 600; color: var(--v5-ink); } /* Detail rows inside Domain/SSL/Server info tab */ #ultra-v5 .v5-detail-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 0; } #ultra-v5 .v5-detail-list dt { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--v5-ink-mute); padding: 8px 0; } #ultra-v5 .v5-detail-list dd { font-size: 14px; color: var(--v5-ink); padding: 8px 0; margin: 0; word-break: break-word; } /* Bootstrap .row/.col-* survive but are visually neutralized inside the v5-product-card body where we render our own grids */ #ultra-v5 .v5-product-card .row + .row { margin-top: 14px; } /* Generic Bootstrap .btn re-skin INSIDE form-card / product-card / pay so WHMCS-emitted .btn-success / .btn-danger / .btn-default inherit v5 look without rewriting every template. Scoped to v5 containers only. */ #ultra-v5 .v5-product-card .btn, #ultra-v5 .v5-form-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 13.5px; border: 1px solid transparent; text-decoration: none !important; transition: background .18s, color .18s, border-color .18s, transform .18s; } #ultra-v5 .v5-product-card .btn-default, #ultra-v5 .v5-form-card .btn-default { background: transparent !important; color: var(--v5-ink-soft) !important; border-color: var(--v5-card-border) !important; } #ultra-v5 .v5-product-card .btn-default:hover, #ultra-v5 .v5-form-card .btn-default:hover { border-color: var(--v5-accent-2) !important; color: var(--v5-ink) !important; background: var(--v5-accent-soft-2) !important; } #ultra-v5 .v5-product-card .btn-success, #ultra-v5 .v5-product-card .btn-primary, #ultra-v5 .v5-form-card .btn-success, #ultra-v5 .v5-form-card .btn-primary { background: var(--v5-accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: var(--v5-accent) !important; } #ultra-v5 .v5-product-card .btn-success:hover, #ultra-v5 .v5-product-card .btn-primary:hover, #ultra-v5 .v5-form-card .btn-success:hover, #ultra-v5 .v5-form-card .btn-primary:hover { background: var(--v5-accent-3) !important; border-color: var(--v5-accent-3) !important; } #ultra-v5 .v5-product-card .btn-danger, #ultra-v5 .v5-form-card .btn-danger { background: transparent !important; color: #ff7777 !important; border-color: rgba(232,69,69,0.4) !important; } [data-theme="light"] #ultra-v5 .v5-product-card .btn-danger, [data-theme="light"] #ultra-v5 .v5-form-card .btn-danger { color: #c43030 !important; } #ultra-v5 .v5-product-card .btn-danger:hover, #ultra-v5 .v5-form-card .btn-danger:hover { background: rgba(232,69,69,0.10) !important; border-color: rgba(232,69,69,0.6) !important; } #ultra-v5 .v5-product-card .btn-block, #ultra-v5 .v5-form-card .btn-block { width: 100%; display: flex; } #ultra-v5 .v5-product-card .btn.disabled, #ultra-v5 .v5-product-card .btn[disabled], #ultra-v5 .v5-form-card .btn.disabled, #ultra-v5 .v5-form-card .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; } /* ============================================================ TICKET CONVERSATION (viewticket.tpl) ============================================================ */ #ultra-v5 .v5-thread { display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; } #ultra-v5 .v5-msg { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 20px; background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 14px; } #ultra-v5 .v5-msg.v5-msg-staff { background: var(--v5-accent-soft-2); border-color: rgba(77,166,232,0.30); } #ultra-v5 .v5-msg-avatar { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--v5-accent-soft); color: var(--v5-accent-2); font-size: 16px; font-weight: 700; } #ultra-v5 .v5-msg-staff .v5-msg-avatar { background: linear-gradient(135deg, var(--v5-accent), var(--v5-accent-3)); color: #fff; } #ultra-v5 .v5-msg-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; } #ultra-v5 .v5-msg-name { font-weight: 700; font-size: 14.5px; color: var(--v5-ink); } #ultra-v5 .v5-msg-role { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--v5-accent-soft); color: var(--v5-accent-2); } #ultra-v5 .v5-msg-staff .v5-msg-role { background: var(--v5-accent); color: #fff; } #ultra-v5 .v5-msg-date { font-size: 12.5px; color: var(--v5-ink-mute); margin-left: auto; } #ultra-v5 .v5-msg-body { color: var(--v5-ink-soft); font-size: 14px; line-height: 1.6; word-wrap: break-word; } #ultra-v5 .v5-msg-body p:first-child { margin-top: 0; } #ultra-v5 .v5-msg-body p:last-child { margin-bottom: 0; } #ultra-v5 .v5-msg-body a { color: var(--v5-accent-2); } #ultra-v5 .v5-msg-body pre, #ultra-v5 .v5-msg-body code { background: rgba(0,0,0,0.18); color: var(--v5-ink); border-radius: 6px; padding: 2px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } [data-theme="light"] #ultra-v5 .v5-msg-body pre, [data-theme="light"] #ultra-v5 .v5-msg-body code { background: #f3f5f9; color: #0f1623; } #ultra-v5 .v5-msg-attach { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v5-line-soft); font-size: 13px; } #ultra-v5 .v5-msg-attach strong { color: var(--v5-ink); font-weight: 700; display: block; margin-bottom: 6px; } #ultra-v5 .v5-msg-attach ul { list-style: none; padding: 0; margin: 0; } #ultra-v5 .v5-msg-attach li { padding: 4px 0; } #ultra-v5 .v5-msg-attach i { color: var(--v5-accent-2); margin-right: 6px; } #ultra-v5 .v5-msg-rating { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--v5-line-soft); font-size: 12.5px; color: var(--v5-ink-mute); } #ultra-v5 .v5-msg-rating .rating .star, #ultra-v5 .v5-msg-rating .rating-done .star { cursor: pointer; font-size: 16px; color: var(--v5-ink-mute); } #ultra-v5 .v5-msg-rating .rating .star::before, #ultra-v5 .v5-msg-rating .rating-done .star::before { content: "\2606"; } #ultra-v5 .v5-msg-rating .rating .star.active::before, #ultra-v5 .v5-msg-rating .rating-done .star.active::before { content: "\2605"; color: var(--v5-gold); } /* Ticket reply form */ #ultra-v5 .v5-reply-card { background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 16px; padding: 22px; margin: 0 0 22px; } #ultra-v5 .v5-reply-card h3 { margin: 0 0 16px; font-size: 16px; font-weight: 800; color: var(--v5-ink); display: flex; align-items: center; gap: 10px; } #ultra-v5 .v5-reply-card h3 i { color: var(--v5-accent-2); } #ultra-v5 .v5-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; } @media (max-width: 700px) { #ultra-v5 .v5-form-row { grid-template-columns: 1fr; } } #ultra-v5 .v5-form-group { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; } #ultra-v5 .v5-form-group label { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--v5-ink-mute); } #ultra-v5 .v5-input, #ultra-v5 .v5-textarea, #ultra-v5 .v5-select { background: var(--v5-bg); border: 1px solid var(--v5-card-border); border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px; color: var(--v5-ink); width: 100%; outline: 0; transition: border-color .18s, box-shadow .18s; } [data-theme="light"] #ultra-v5 .v5-input, [data-theme="light"] #ultra-v5 .v5-textarea, [data-theme="light"] #ultra-v5 .v5-select { background: #fff; } #ultra-v5 .v5-input:focus, #ultra-v5 .v5-textarea:focus, #ultra-v5 .v5-select:focus { border-color: var(--v5-accent-2); box-shadow: 0 0 0 4px var(--v5-accent-soft-2); } #ultra-v5 .v5-input:disabled { opacity: .65; } #ultra-v5 .v5-textarea { resize: vertical; min-height: 140px; font-family: inherit; } /* Re-skin WHMCS-emitted .form-control elements ($clientcountriesdropdown, $customfield.input, etc.) so account-edit + security forms inherit the v5 input look without needing class swaps in every template. */ #ultra-v5 .v5-form-card .form-control, #ultra-v5 .v5-form-group .form-control { background: var(--v5-bg); border: 1px solid var(--v5-card-border); border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px; color: var(--v5-ink); width: 100%; outline: 0; box-shadow: none; height: auto; transition: border-color .18s, box-shadow .18s; } [data-theme="light"] #ultra-v5 .v5-form-card .form-control, [data-theme="light"] #ultra-v5 .v5-form-group .form-control { background: #fff; } #ultra-v5 .v5-form-card .form-control:focus, #ultra-v5 .v5-form-group .form-control:focus { border-color: var(--v5-accent-2); box-shadow: 0 0 0 4px var(--v5-accent-soft-2); } #ultra-v5 .v5-form-card .form-control:disabled, #ultra-v5 .v5-form-group .form-control:disabled { opacity: .55; cursor: not-allowed; } #ultra-v5 .v5-form-card select.form-control, #ultra-v5 .v5-form-group select.form-control { padding-right: 30px; } #ultra-v5 .v5-form-card .control-label, #ultra-v5 .v5-form-card label { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--v5-ink-mute); display: block; margin: 0 0 6px; } /* Form card scaffold for profile / security pages */ #ultra-v5 .v5-form-card { background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 16px; padding: 24px; margin: 0 0 22px; } #ultra-v5 .v5-form-card h2, #ultra-v5 .v5-form-card h3 { margin: 0 0 18px; font-size: 17px; font-weight: 800; color: var(--v5-ink); display: flex; align-items: center; gap: 10px; } #ultra-v5 .v5-form-card h2 i, #ultra-v5 .v5-form-card h3 i { color: var(--v5-accent-2); } #ultra-v5 .v5-form-card .v5-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 760px) { #ultra-v5 .v5-form-card .v5-form-grid { grid-template-columns: 1fr; } } #ultra-v5 .v5-form-card .v5-form-group { margin-bottom: 16px; } /* Bootstrap .form-group fallback (so WHMCS .form-group divs render with v5 spacing) */ #ultra-v5 .v5-form-card .form-group { margin-bottom: 16px; } #ultra-v5 .v5-form-card .checkbox label { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--v5-ink-soft); cursor: pointer; } #ultra-v5 .v5-form-card .checkbox input[type="checkbox"] { margin-right: 6px; } #ultra-v5 .v5-form-help { font-size: 12px; color: var(--v5-ink-mute); margin-top: 4px; } #ultra-v5 .v5-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; } /* Ticket info banner (info card above the conversation) */ #ultra-v5 .v5-ticket-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 18px 22px; margin: 0 0 22px; background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 14px; } @media (max-width: 700px) { #ultra-v5 .v5-ticket-info { grid-template-columns: repeat(2, 1fr); } } #ultra-v5 .v5-ticket-info-cell .lbl { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--v5-ink-mute); margin: 0 0 4px; } #ultra-v5 .v5-ticket-info-cell .val { font-size: 14px; font-weight: 700; color: var(--v5-ink); } /* ============================================================ WHMCS DATATABLES INTEGRATION ------------------------------------------------------------ clientareainvoices.tpl / clientareaproducts.tpl etc. include templates//includes/tablelist.tpl which loads jQuery DataTables + dataTables.bootstrap.css. Re-skin the generated wrapper, search box, pagination, and table cells when wrapped under #ultra-v5 .v5-list-card. ============================================================ */ #ultra-v5 .v5-list-card { background: var(--v5-card-bg); border: 1px solid var(--v5-card-border); border-radius: 16px; overflow: hidden; } #ultra-v5 .v5-list-card .table-container { padding: 0; } #ultra-v5 .v5-list-card .dataTables_wrapper { color: var(--v5-ink); padding: 0; margin: 0; } #ultra-v5 .v5-list-card .listtable { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--v5-line-soft); flex-wrap: wrap; } #ultra-v5 .v5-list-card .dataTables_filter label { color: var(--v5-ink-mute); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin: 0; } /* Filter input. Multiple legacy stylesheets pile on: 1) all.css `.dataTables_wrapper .dataTables_filter label .form-control { background: url('search.png') #fff no-repeat 8px 5px; padding: 7px 10px 7px 45px !important; border: 1px solid #fff; width: 200px; border-radius: 2px }` 2) ultra-custom.css `.main-content .dataTables_wrapper .dataTables_filter input { color: #fff !important }` 3) ultra-dark.css `html:not([data-theme="light"]) #tableXxxList_filter input { background-color: #fff !important; color: #333 !important; border-color: #ccc !important }` <- this one targets specific table IDs and is the one that was repainting the input white in dark mode after my earlier fixes. We need !important on everything to match. We also paint a themed magnifying-glass via inline SVG so the icon is visible in both modes (light glyph on dark bg, dark glyph on light bg). */ #ultra-v5 .v5-list-card .dataTables_filter input[type="search"], #ultra-v5 .v5-list-card .dataTables_filter label .form-control, #ultra-v5 .v5-list-card div[id$="_filter"] input.form-control, #ultra-v5 .v5-list-card div[id$="_filter"] input.form-control.input-sm { background-color: var(--v5-bg) !important; /* Inline SVG magnifying glass: stroke = current --v5-ink-mute for dark, overridden in [data-theme="light"] below. URL-encoded SVG. */ background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b94a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 12px center !important; background-size: 16px 16px !important; border: 1px solid var(--v5-card-border) !important; border-radius: 10px !important; padding: 8px 12px 8px 36px !important; width: auto !important; min-width: 240px; font: inherit; font-size: 13.5px; color: var(--v5-ink) !important; -webkit-text-fill-color: var(--v5-ink) !important; outline: 0; margin-left: 8px; height: auto; -webkit-appearance: textfield; appearance: textfield; } #ultra-v5 .v5-list-card .dataTables_filter input[type="search"]::-webkit-search-decoration, #ultra-v5 .v5-list-card .dataTables_filter input[type="search"]::-webkit-search-cancel-button, #ultra-v5 .v5-list-card .dataTables_filter input[type="search"]::-webkit-search-results-button, #ultra-v5 .v5-list-card .dataTables_filter input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; display: none; } /* Light-mode: swap to white bg + darker stroke on the icon */ [data-theme="light"] #ultra-v5 .v5-list-card .dataTables_filter input[type="search"], [data-theme="light"] #ultra-v5 .v5-list-card .dataTables_filter label .form-control, [data-theme="light"] #ultra-v5 .v5-list-card div[id$="_filter"] input.form-control, [data-theme="light"] #ultra-v5 .v5-list-card div[id$="_filter"] input.form-control.input-sm { background-color: #fff !important; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7385' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; color: var(--v5-ink) !important; -webkit-text-fill-color: var(--v5-ink) !important; } #ultra-v5 .v5-list-card .dataTables_filter input[type="search"]:focus, #ultra-v5 .v5-list-card .dataTables_filter label .form-control:focus, #ultra-v5 .v5-list-card div[id$="_filter"] input.form-control:focus { border-color: var(--v5-accent-2) !important; box-shadow: 0 0 0 4px var(--v5-accent-soft-2); } /* Placeholder text ("Search...") -- bump contrast in both modes. Webkit and Mozilla need their own selectors. */ #ultra-v5 .v5-list-card .dataTables_filter input::placeholder, #ultra-v5 .v5-list-card div[id$="_filter"] input::placeholder { color: var(--v5-ink-soft) !important; opacity: 0.85 !important; font-weight: 500; } #ultra-v5 .v5-list-card .dataTables_filter input::-webkit-input-placeholder, #ultra-v5 .v5-list-card div[id$="_filter"] input::-webkit-input-placeholder { color: var(--v5-ink-soft) !important; opacity: 0.85 !important; } #ultra-v5 .v5-list-card .dataTables_filter input::-moz-placeholder, #ultra-v5 .v5-list-card div[id$="_filter"] input::-moz-placeholder { color: var(--v5-ink-soft) !important; opacity: 0.85 !important; } /* "Showing X to Y of Z entries" info pill. WHMCS bundled all.css ships a gray-blue (#4f5360) pill block + white text; that washed-out grey wasn't on-brand. Re-theme as a brand-blue pill with white text - consistent across light + dark + readable in both. The double `div.dataTables_wrapper div.dataTables_info` selector matches the `padding: 21px 30px !important` rule from all.css line 9330. */ #ultra-v5 .v5-list-card .dataTables_info, #ultra-v5 .v5-list-card div.dataTables_wrapper div.dataTables_info { background: var(--v5-accent) !important; background-color: var(--v5-accent) !important; border: 0 !important; border-radius: 10px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; padding: 8px 14px !important; text-align: center !important; margin: 0 !important; display: inline-block !important; width: auto !important; } /* Hover lift to match other v5 accent pills */ #ultra-v5 .v5-list-card .dataTables_info:hover { background-color: var(--v5-accent-3) !important; } #ultra-v5 .v5-list-card .dataTables_length, #ultra-v5 .v5-list-card .dataTables_paginate { padding: 12px 18px; border-top: 1px solid var(--v5-line-soft); font-size: 13px; color: var(--v5-ink-mute); } /* "Show [10] entries" select. WHMCS DataTables generates