.category-dell-battery-series { --dlb-orange: #0076ce; --dlb-orange-dark: #005a9e; --dlb-purple: #93278f; --dlb-gray: #9b9b9b; --dlb-ink: #1a1a1f; --dlb-muted: #5c5c66; --dlb-bg: #f7f6f8; --dlb-surface: #ffffff; --dlb-soft: #f0eef3; --dlb-border: rgba(26, 26, 31, 0.08); --dlb-shadow: 0 14px 40px rgba(26, 26, 31, 0.08); --dlb-radius: 18px; --dlb-ease: cubic-bezier(0.22, 1, 0.36, 1); --dlb-font: "Jost", "Segoe UI", system-ui, sans-serif; --mx-container: 1140px; background: radial-gradient(ellipse 70% 45% at 100% -5%, rgba(0, 118, 206, 0.14), transparent 55%), radial-gradient(ellipse 50% 40% at 0% 10%, rgba(147, 39, 143, 0.08), transparent 50%), var(--dlb-bg); color: var(--dlb-ink); font-family: var(--dlb-font); overflow-x: clip; } .dlb-hub-page.site-page { width: 100%; max-width: none; margin: 0; padding: 0 0 5rem; } .dlb-hub-page .mx-container { width: min(100% - 2rem, var(--mx-container)); margin-inline: auto; } .dlb-hub-page .dlb-hub-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--dlb-ease), transform 0.5s var(--dlb-ease); transition-delay: var(--dlb-delay, 0s); } .dlb-hub-page .dlb-hub-reveal.is-visible { opacity: 1; transform: none; } .dlb-hub-section--light { background: var(--dlb-surface); color: var(--dlb-ink); } .dlb-hub-section--soft { background: var(--dlb-soft); color: var(--dlb-ink); } .dlb-hub-section--accent { background: linear-gradient(135deg, rgba(0, 118, 206, 0.14), rgba(147, 39, 143, 0.1)), var(--dlb-surface); } .dlb-hub-section-head { margin-bottom: 1.75rem; max-width: 46rem; } .dlb-hub-section-title { margin: 0 0 0.65rem; font-size: clamp(1.55rem, 2.4vw, 2.15rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; } .dlb-hub-section-lead { margin: 0; color: var(--dlb-muted); font-size: 1.05rem; line-height: 1.55; } .dlb-hub-eyebrow { display: inline-block; margin-bottom: 0.5rem; color: var(--dlb-purple); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .dlb-hub-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: 1.25rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.72); } .dlb-hub-breadcrumb a { color: inherit; text-decoration: none; } .dlb-hub-breadcrumb a:hover { color: #fff; } .dlb-hub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.7rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: transform 0.2s var(--dlb-ease), background 0.2s, border-color 0.2s, color 0.2s; } .dlb-hub-btn:hover { transform: translateY(-1px); } .dlb-hub-btn--primary { background: linear-gradient(135deg, var(--dlb-orange), #3aa0e8); color: #fff; box-shadow: 0 10px 24px rgba(253, 120, 1, 0.28); } .dlb-hub-btn--primary:hover { background: linear-gradient(135deg, var(--dlb-orange-dark), var(--dlb-orange)); color: #fff; } .dlb-hub-btn--ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); } .dlb-hub-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); color: #fff; } .dlb-hub-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); } .dlb-hub-section--light .dlb-hub-btn--primary, .dlb-hub-section--soft .dlb-hub-btn--primary, .dlb-hub-pricing .dlb-hub-btn--primary { color: #fff; } .dlb-hub-slider { position: relative; padding: 1.5rem 0 2rem; color: #fff; background: linear-gradient(160deg, #1c1220 0%, #2a1830 42%, #1a1a22 100%); isolation: isolate; } .dlb-hub-slider__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .dlb-hub-slider__orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.55; } .dlb-hub-slider__orb--1 { width: 280px; height: 280px; top: -60px; right: 10%; background: rgba(253, 120, 1, 0.45); } .dlb-hub-slider__orb--2 { width: 220px; height: 220px; bottom: 0; left: 5%; background: rgba(147, 39, 143, 0.4); } .dlb-hub-slider__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000, transparent 90%); } .dlb-hub-slider__wrap { position: relative; z-index: 1; } .dlb-hub-slider__viewport { overflow: hidden; border-radius: calc(var(--dlb-radius) + 4px); } .dlb-hub-slider__track { position: relative; } .dlb-hub-slider__slide { display: none; min-height: clamp(420px, 58vw, 560px); } .dlb-hub-slider__slide.is-active { display: block; } .dlb-hub-slider__panel { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 960px) { .dlb-hub-slider__panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2rem; } } .dlb-hub-slider__copy-top { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; } .dlb-hub-slider__badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem; } .dlb-hub-slider__counter { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; } .dlb-hub-slider__counter-sep { margin: 0 0.2rem; opacity: 0.5; } .dlb-hub-slider__title, .dlb-hub-slider h1.dlb-hub-slider__title, .dlb-hub-slider h2.dlb-hub-slider__title { margin: 0 0 0.55rem; font-size: clamp(1.7rem, 3.4vw, 2.75rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; color: #ffffff; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35); } .dlb-hub-slider__tagline { margin: 0 0 0.55rem; color: #ffb366; font-weight: 600; font-size: 1.05rem; } .dlb-hub-slider__lead, .dlb-hub-slider__body { margin: 0 0 0.7rem; color: rgba(255, 255, 255, 0.86); line-height: 1.55; max-width: 36rem; } .dlb-hub-slider__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.1rem; } .dlb-hub-slider__visual-frame { position: relative; border-radius: var(--dlb-radius); overflow: hidden; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--dlb-shadow); aspect-ratio: 4 / 3; } .dlb-hub-slider__visual-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .dlb-hub-slider__chip { position: absolute; left: 0.9rem; bottom: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem; border-radius: 999px; background: rgba(20, 14, 24, 0.78); backdrop-filter: blur(8px); font-size: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.14); } .dlb-hub-slider__controls { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-top: 1.1rem; padding: 0.75rem 0.9rem; border-radius: 20px; background: rgba(8, 8, 12, 0.45); border: 1px solid rgba(255, 255, 255, 0.1); } .dlb-hub-slider__dots { display: flex; flex: 1; gap: 0.5rem; min-width: 0; } .dlb-hub-slider__dot { flex: 1 1 40px; max-width: 72px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.18); cursor: pointer; overflow: hidden; } .dlb-hub-slider__dot-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dlb-orange), #5bb0ef); } .dlb-hub-slider__dot.is-active .dlb-hub-slider__dot-fill { width: 100%; transition: width var(--dlb-autoplay, 6s) linear; } .dlb-hub-slider__nav { display: flex; gap: 0.5rem; margin-left: auto; } .dlb-hub-slider__nav-btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; display: grid; place-items: center; } .dlb-hub-slider__nav-btn:hover { background: rgba(253, 120, 1, 0.25); border-color: rgba(253, 120, 1, 0.5); } .dlb-hub-slider__dot:focus-visible, .dlb-hub-slider__nav-btn:focus-visible, .dlb-hub-btn:focus-visible { outline: 2px solid #ffb366; outline-offset: 2px; } .dlb-hub-trust { padding: 1rem 0; margin-top: -0.5rem; position: relative; z-index: 2; } .dlb-hub-trust__list { list-style: none; margin: 0; padding: 0.85rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; background: var(--dlb-surface); border: 1px solid var(--dlb-border); border-radius: var(--dlb-radius); box-shadow: var(--dlb-shadow); } @media (min-width: 768px) { .dlb-hub-trust__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .dlb-hub-trust__item { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.65rem; border-radius: 12px; background: var(--dlb-soft); font-size: 0.9rem; font-weight: 600; } .dlb-hub-trust__item i { color: var(--dlb-orange); } .dlb-hub-snippet, .dlb-hub-faults, .dlb-hub-types, .dlb-hub-brands, .dlb-hub-services, .dlb-hub-process, .dlb-hub-approach, .dlb-hub-corporate, .dlb-hub-visual, .dlb-hub-guides, .dlb-hub-links, .dlb-hub-pricing, .dlb-hub-faq, .dlb-hub-problems { padding: clamp(2.5rem, 5vw, 4rem) 0; } .dlb-hub-snippet__card { padding: 1.4rem 1.5rem; border-radius: var(--dlb-radius); background: linear-gradient(180deg, #fff, #faf8fb); border: 1px solid var(--dlb-border); box-shadow: var(--dlb-shadow); } .dlb-hub-snippet__answer { margin: 0 0 1rem; font-size: 1.08rem; line-height: 1.65; } .dlb-hub-snippet__follow { color: var(--dlb-muted); line-height: 1.6; } .dlb-hub-snippet__follow a { color: var(--dlb-purple); font-weight: 600; } .dlb-hub-problems__grid, .dlb-hub-types__grid, .dlb-hub-brands__grid, .dlb-hub-services__grid, .dlb-hub-corporate__grid, .dlb-hub-guides__grid, .dlb-hub-links__grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .dlb-hub-problem, .dlb-hub-type, .dlb-hub-brand, .dlb-hub-service, .dlb-hub-corp-card, .dlb-hub-guide, .dlb-hub-link-card { background: var(--dlb-surface); border: 1px solid var(--dlb-border); border-radius: 16px; padding: 1.1rem 1.15rem; box-shadow: 0 8px 24px rgba(26, 26, 31, 0.04); transition: transform 0.2s var(--dlb-ease), border-color 0.2s, box-shadow 0.2s; } .dlb-hub-problem:hover, .dlb-hub-type:hover, .dlb-hub-brand:hover, .dlb-hub-service:hover, .dlb-hub-corp-card:hover, .dlb-hub-guide:hover, .dlb-hub-link-card:hover { transform: translateY(-3px); border-color: rgba(253, 120, 1, 0.35); box-shadow: var(--dlb-shadow); } .dlb-hub-problem__icon { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 118, 206, 0.14); color: var(--dlb-orange); margin-bottom: 0.7rem; } .dlb-hub-problem__title, .dlb-hub-type__title, .dlb-hub-service__title, .dlb-hub-brand__name, .dlb-hub-fault__title { margin: 0 0 0.4rem; font-size: 1.05rem; } .dlb-hub-problem__text, .dlb-hub-type p, .dlb-hub-service p, .dlb-hub-corp-card p, .dlb-hub-brand__note { margin: 0; color: var(--dlb-muted); font-size: 0.92rem; line-height: 1.5; } .dlb-hub-problem__cta, .dlb-hub-brand__cta { display: inline-block; margin-top: 0.85rem; color: var(--dlb-orange); font-weight: 700; font-size: 0.88rem; text-decoration: none; } .dlb-hub-type i, .dlb-hub-service i, .dlb-hub-corp-card i { color: var(--dlb-purple); margin-bottom: 0.55rem; font-size: 1.2rem; } .dlb-hub-faults__list { display: grid; gap: 0.9rem; } @media (min-width: 900px) { .dlb-hub-faults__list { grid-template-columns: 1fr 1fr; } } .dlb-hub-fault { padding: 1.15rem 1.2rem; border-radius: 16px; background: var(--dlb-soft); border: 1px solid var(--dlb-border); } .dlb-hub-fault__body { margin: 0; color: var(--dlb-muted); line-height: 1.6; font-size: 0.95rem; } .dlb-hub-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; } .dlb-hub-timeline__item { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; padding: 1rem 1.1rem; border-radius: 16px; background: var(--dlb-soft); border: 1px solid var(--dlb-border); } .dlb-hub-timeline__step { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: linear-gradient(135deg, var(--dlb-orange), var(--dlb-purple)); color: #fff; font-weight: 700; font-size: 0.85rem; } .dlb-hub-timeline__title { margin: 0 0 0.3rem; font-size: 1.05rem; } .dlb-hub-timeline__item p { margin: 0; color: var(--dlb-muted); line-height: 1.5; } .dlb-hub-approach__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .dlb-hub-approach__list li { padding: 0.95rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--dlb-border); font-weight: 600; position: relative; padding-left: 2.2rem; } .dlb-hub-approach__list li::before { content: ""; position: absolute; left: 0.9rem; top: 1.15rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--dlb-orange); } .dlb-hub-corporate__cta { margin-top: 1.5rem; } .dlb-hub-visual__grid { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 900px) { .dlb-hub-visual__grid { grid-template-columns: 1fr 1fr; } .dlb-hub-visual--reverse .dlb-hub-visual__copy { order: 2; } .dlb-hub-visual--reverse .dlb-hub-visual__media { order: 1; } } .dlb-hub-visual__media { margin: 0; border-radius: var(--dlb-radius); overflow: hidden; border: 1px solid var(--dlb-border); box-shadow: var(--dlb-shadow); aspect-ratio: 4 / 3; background: var(--dlb-soft); } .dlb-hub-visual__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .dlb-hub-visual__copy p { color: var(--dlb-muted); line-height: 1.6; } .dlb-hub-guide, .dlb-hub-link-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0.35rem; } .dlb-hub-guide h3, .dlb-hub-link-card strong { margin: 0; font-size: 1rem; color: var(--dlb-ink); } .dlb-hub-guide p, .dlb-hub-link-card span { color: var(--dlb-muted); font-size: 0.9rem; } .dlb-hub-guide > span { margin-top: auto; color: var(--dlb-orange); font-weight: 700; font-size: 0.88rem; } .dlb-hub-cluster-note { margin-top: 1.25rem; color: var(--dlb-gray); font-size: 0.88rem; line-height: 1.5; } .dlb-hub-cluster-note span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--dlb-muted); } .dlb-hub-pricing__card { padding: 1.4rem 1.5rem; border-radius: var(--dlb-radius); background: var(--dlb-surface); border: 1px solid var(--dlb-border); box-shadow: var(--dlb-shadow); } .dlb-hub-pricing__card h3 { margin: 0 0 0.75rem; } .dlb-hub-pricing__body { color: var(--dlb-muted); line-height: 1.6; margin-bottom: 1rem; } .dlb-hub-pricing__body a { color: var(--dlb-purple); font-weight: 600; } .dlb-hub-pricing__factors { margin: 0 0 1.2rem; padding-left: 1.1rem; color: var(--dlb-muted); line-height: 1.55; } .dlb-hub-faq__list { display: grid; gap: 0.65rem; } .dlb-hub-faq__item { border: 1px solid var(--dlb-border); border-radius: 14px; background: var(--dlb-surface); padding: 0.2rem 1rem 0.2rem; } .dlb-hub-faq__item summary { cursor: pointer; list-style: none; padding: 0.95rem 0; font-weight: 650; } .dlb-hub-faq__item summary::-webkit-details-marker { display: none; } .dlb-hub-faq__item p { margin: 0 0 1rem; color: var(--dlb-muted); line-height: 1.55; } .dlb-hub-final-cta { padding: clamp(2.75rem, 6vw, 4.5rem) 0; background: linear-gradient(145deg, #1c1220, #2d1834 55%, #1a1a22); color: #fff; } .dlb-hub-final-cta__inner { text-align: center; max-width: 40rem; margin-inline: auto; } .dlb-hub-final-cta :is(h1, h2, h3, h4), .dlb-hub-final-cta #dlb-hub-final-title { margin: 0 0 0.65rem; font-size: clamp(1.7rem, 3vw, 2.4rem); color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .dlb-hub-final-cta p { margin: 0 0 1.4rem; color: rgba(255, 255, 255, 0.82) !important; line-height: 1.55; } .dlb-hub-final-cta__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; } .dlb-hub-slider :is(h1, h2, h3).dlb-hub-slider__title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .dlb-hub-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom)); background: rgba(18, 14, 22, 0.94); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.1); } .dlb-hub-sticky-cta.is-visible { display: grid; } .dlb-hub-sticky-cta__btn { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.45rem 0.25rem; border-radius: 12px; color: #fff; text-decoration: none; font-size: 0.72rem; font-weight: 600; } .dlb-hub-sticky-cta__btn i { font-size: 1.05rem; } .dlb-hub-sticky-cta__btn--call { background: rgba(253, 120, 1, 0.2); } .dlb-hub-sticky-cta__btn--wa { background: rgba(37, 211, 102, 0.22); } .dlb-hub-sticky-cta__btn--form { background: rgba(147, 39, 143, 0.22); } @media (min-width: 900px) { .dlb-hub-sticky-cta { display: none !important; } } @media (max-width: 639px) { .dlb-hub-slider { padding-bottom: 1.25rem; } .dlb-hub-slider__controls { width: 100%; } .dlb-hub-slider__nav { margin-left: 0; width: 100%; justify-content: center; } .dlb-hub-page.site-page { padding-bottom: 5.5rem; } } @media (prefers-reduced-motion: reduce) { .dlb-hub-page .dlb-hub-reveal { opacity: 1; transform: none; transition: none; } .dlb-hub-slider__dot.is-active .dlb-hub-slider__dot-fill { transition: none; } } .dlb-hub-problem__meta { margin: 0.65rem 0 0.85rem; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.86rem; color: var(--dlb-muted); line-height: 1.45; } .dlb-hub-problem__meta strong { color: var(--dlb-ink); font-weight: 600; } .dlb-hub-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; align-items: center; margin: 0 0 1.25rem; font-size: 0.88rem; color: rgba(255,255,255,0.72); } .dlb-hub-breadcrumb a { color: rgba(255,255,255,0.88); text-decoration: none; } .dlb-hub-breadcrumb a:hover { color: #fff; text-decoration: underline; } .dlb-hub-page--premium { --dlb-orange: #0b5cab; --dlb-orange-dark: #084a8c; --dlb-purple: #1a1a2e; --dlb-soft: #eef3f9; } .dlb-hub-page--premium .dlb-hub-slider { background: radial-gradient(ellipse at 20% 0%, rgba(11,92,171,0.35), transparent 55%), linear-gradient(145deg, #0a1628 0%, #12263f 48%, #0b5cab 100%); } .dlb-hub-page--premium .dlb-hub-final-cta { background: linear-gradient(135deg, #0a1628, #0b5cab 70%); } .dlb-hub-page--premium .dlb-hub-section-title { letter-spacing: -0.02em; } .dlb-hub-page--gaming { --dlb-orange: #0076ce; --dlb-orange-dark: #005a9e; --dlb-purple: #1f6feb; --dlb-soft: #eef2f7; } .dlb-hub-page--gaming .dlb-hub-slider { background: radial-gradient(ellipse at 80% 10%, rgba(0,118,206,0.28), transparent 50%), linear-gradient(145deg, #101820 0%, #1a2838 50%, #0076ce 100%); }