/* Theme Name: GeneratePress Volticen Child Theme URI: https://volticen.com Description: Child theme Volticen.com Author: Volticen Template: generatepress Version: 1.1.0 Text Domain: generatepress-volticen-child */ /* ========================================================================== VOLTICEN.COM — DESIGN SYSTEM v3 Quy ước: - Token và component dùng chung luôn bắt đầu bằng --v- / .v-. - Class cũ không prefix chỉ là alias tương thích; không dùng cho template mới. - Layout riêng của trang giữ namespace mô tả, ví dụ .volticen-review-*. ========================================================================== */ :root { /* ---------- 1. V-* COLOR SYSTEM (Light) ---------- */ --v-color-bg: #ffffff; --v-color-surface: #f6f7f9; --v-color-surface-strong: #eceef1; --v-color-text: #14181f; --v-color-text-muted: #5a6472; --v-color-text-subtle: #9aa3b0; --v-color-accent: #1e3a8a; --v-color-accent-warm: #f5a623; --v-color-success: #16a34a; --v-color-danger: #dc2626; --v-color-border: color-mix(in srgb, var(--v-color-accent) 18%, transparent); /* ---------- 2. V-* RADIUS / SHADOW / MOTION ---------- */ --v-radius-sm: 6px; --v-radius-md: 12px; --v-radius-lg: 16px; --v-radius-xl: 20px; --v-radius-pill: 999px; --v-shadow-card: 0 10px 28px rgba(31, 52, 100, 0.055); --v-shadow-card-raised: 0 16px 38px rgba(31, 52, 100, 0.11); --v-shadow-feature: 0 16px 42px rgba(31, 52, 100, 0.09); --v-duration-fast: 160ms; --v-duration-normal: 200ms; --v-ease-standard: ease; /* ---------- 3. V-* SPACING & LAYOUT ---------- */ --v-space-1: 4px; --v-space-2: 8px; --v-space-3: 12px; --v-space-4: 16px; --v-space-5: 20px; --v-space-6: 24px; --v-space-8: 32px; --v-space-10: 40px; --v-space-12: 48px; --v-space-14: 56px; --v-container-wide: 1200px; --v-container-content: 1140px; --v-page-gutter: clamp(10px, 3vw, 24px); --v-grid-gutter: 24px; --v-section-gap: 56px; --v-section-gap-mobile: 46px; /* ---------- 4. V-* TYPOGRAPHY ---------- */ --v-font-heading: "Source Serif 4", Georgia, serif; --v-font-body: "Inter", system-ui, -apple-system, sans-serif; /* Legacy aliases: giữ tương thích với CSS/markup hiện tại. */ --base: var(--v-color-bg); --base-2: var(--v-color-surface); --base-3: var(--v-color-surface-strong); --contrast: var(--v-color-text); --contrast-2: var(--v-color-text-muted); --contrast-3: var(--v-color-text-subtle); --accent: var(--v-color-accent); --accent-2: var(--v-color-accent-warm); --success: var(--v-color-success); --danger: var(--v-color-danger); --radius-sm: var(--v-radius-sm); --radius-md: var(--v-radius-md); --radius-lg: var(--v-radius-xl); --container-width: var(--v-container-wide); --gutter: var(--v-grid-gutter); --section-gap: var(--v-section-gap); --section-gap-mobile: var(--v-section-gap-mobile); --font-heading: var(--v-font-heading); --font-body: var(--v-font-body); } /* ---------- DARK MODE ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --v-color-bg: #0e1116; --v-color-surface: #161a21; --v-color-surface-strong: #1f242c; --v-color-text: #f2f4f7; --v-color-text-muted: #9aa3b0; --v-color-text-subtle: #5a6472; --v-color-accent: #6ea1ff; --v-color-accent-warm: #ffb648; --v-color-success: #4ade80; --v-color-danger: #f87171; --v-shadow-card: 0 10px 28px rgba(0, 0, 0, 0.2); --v-shadow-card-raised: 0 16px 38px rgba(0, 0, 0, 0.3); --v-shadow-feature: 0 18px 46px rgba(0, 0, 0, 0.3); } } /* Optional manual toggle: */ [data-theme="dark"] { --v-color-bg: #0e1116; --v-color-surface: #161a21; --v-color-surface-strong: #1f242c; --v-color-text: #f2f4f7; --v-color-text-muted: #eff1f4; --v-color-text-subtle: #abb2bc; --v-color-accent: #6ea1ff; --v-color-accent-warm: #ffb648; --v-color-success: #4ade80; --v-color-danger: #f87171; --v-shadow-card: 0 10px 28px rgba(0, 0, 0, 0.2); --v-shadow-card-raised: 0 16px 38px rgba(0, 0, 0, 0.3); --v-shadow-feature: 0 18px 46px rgba(0, 0, 0, 0.3); } body { background: var(--base); color: var(--contrast); font-family: var(--font-body); } /* Site header */ .site-branding-container, .inside-header { display: flex; align-items: center; gap: 8px; } .site-logo { margin: 0 !important; } .site-logo img { width: 38px; height: auto; display: block; margin: 0 !important; } /* ========================================================================== 5. LAYOUT / GRID ========================================================================== */ .v-container, .container { box-sizing: border-box; width: min(var(--v-container-wide), calc(100% - var(--v-page-gutter) - var(--v-page-gutter))); margin-inline: auto; } .v-container--content { width: min(var(--v-container-content), calc(100% - var(--v-page-gutter) - var(--v-page-gutter))); } .v-section, .section { padding-block: var(--section-gap); } .v-grid-12, .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); } @media (max-width: 768px) { .v-section, .section { padding-block: var(--section-gap-mobile); } } /* ========================================================================== 6. TYPOGRAPHY ========================================================================== */ .v-h1, .h1 { font-family: var(--font-heading); font-size: clamp(3rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.15; margin: 0 0 16px; color: var(--contrast); } .v-h2, .h2 { font-family: var(--font-body); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.3; color: var(--contrast); } .v-h3, .h3 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: var(--contrast); } .v-body, .body { font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--contrast); } .v-caption, .caption { font-size: 0.875rem; font-weight: 400; color: var(--contrast-2); } /* ========================================================================== 7. COMPONENTS ========================================================================== */ /* --- Card --- */ .v-card, .card { background: var(--base-2); border-radius: var(--radius-md); padding: var(--gutter); } /* --- Button --- */ .v-button, .btn { display: inline-block; background: var(--accent); color: #fff; border-radius: var(--radius-sm); padding: 12px 24px; font-weight: 600; transition: opacity 0.2s ease; } .v-button:hover, .btn:hover { opacity: 0.85; } .v-button--outline, .btn-outline { display: inline-block; background: transparent; color: var(--accent); border: 1.5px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 22px; font-weight: 600; } /* --- Badge / Rating --- */ .v-badge, .badge { display: inline-block; background: var(--accent-2); color: #1a1a1a; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 0.75rem; font-weight: 700; } .v-badge--success, .badge-success { background: var(--success); color: #fff; } .v-badge--danger, .badge-danger { background: var(--danger); color: #fff; } /* --- Reusable content primitives --- */ .v-card--interactive { border: 1px solid var(--v-color-border); box-shadow: var(--v-shadow-card); transition: border-color var(--v-duration-fast) var(--v-ease-standard), box-shadow var(--v-duration-fast) var(--v-ease-standard), transform var(--v-duration-fast) var(--v-ease-standard); } .v-card--interactive:hover { border-color: color-mix(in srgb, var(--v-color-accent) 38%, transparent); box-shadow: var(--v-shadow-card-raised); transform: translateY(-3px); } .v-eyebrow { display: flex; margin: 0 0 0.9rem; align-items: center; gap: 0.6rem; color: var(--v-color-accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.25; text-transform: uppercase; } .v-eyebrow::before { width: 24px; height: 2px; flex: 0 0 auto; background: var(--v-color-accent-warm); content: ""; } .v-pill { display: inline-flex; min-height: 38px; padding: 0.55rem 0.9rem; align-items: center; justify-content: center; color: var(--v-color-text-muted); background: var(--v-color-bg); border: 1px solid var(--v-color-border); border-radius: var(--v-radius-pill); font-size: 0.74rem; font-weight: 700; line-height: 1.2; text-decoration: none; } .v-pill:hover, .v-pill:focus-visible, .v-pill[aria-current="page"], .v-pill.is-active { color: #fff; background: var(--v-color-accent); border-color: var(--v-color-accent); } .v-arrow-link { display: inline-flex; width: fit-content; align-items: center; gap: 0.45rem; color: var(--v-color-accent); font-size: 0.8rem; font-weight: 800; text-decoration: none; } .v-arrow-link::after { content: "\2192"; transition: transform var(--v-duration-fast) var(--v-ease-standard); } .v-arrow-link:hover::after, .v-arrow-link:focus-visible::after { transform: translateX(3px); } .v-status { display: inline-flex; align-items: center; gap: 0.38rem; color: var(--v-color-success); font-weight: 800; } .v-status::before { display: inline-grid; width: 1rem; height: 1rem; place-items: center; color: #fff; background: var(--v-color-success); border-radius: 50%; content: "\2713"; font-size: 0.62rem; line-height: 1; } .v-focus-ring:focus-visible, .v-content-scope a:focus-visible, .v-content-scope button:focus-visible, .v-content-scope input:focus-visible { outline: 3px solid color-mix(in srgb, var(--v-color-accent-warm) 75%, #fff); outline-offset: 3px; } /* --- Pros / Cons --- */ .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); } .pros, .cons { border-radius: var(--radius-md); padding: var(--gutter); } .pros { background: color-mix(in srgb, var(--success) 10%, var(--base-2)); } .cons { background: color-mix(in srgb, var(--danger) 10%, var(--base-2)); } .pros li::before { content: "✓ "; color: var(--success); font-weight: 700; } .cons li::before { content: "✕ "; color: var(--danger); font-weight: 700; } @media (max-width: 640px) { .pros-cons { grid-template-columns: 1fr; } } /* --- Verdict Box (TL;DR) --- */ .verdict-box { background: var(--base-2); border-left: 4px solid var(--accent); border-radius: var(--radius-md); padding: 20px 24px; margin-block: var(--gutter); } .verdict-box .verdict-label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; margin-bottom: 8px; } .verdict-box .verdict-label::before { content: "✔"; display: inline-flex; color: #fff; background: var(--accent); border-radius: 50%; width: 18px; height: 18px; align-items: center; justify-content: center; font-size: 0.65rem; } /* --- Comparison Table --- */ .table-compare { width: 100%; border-collapse: collapse; border-radius: var(--radius-md); overflow: hidden; } .table-compare thead th { position: sticky; top: 0; background: var(--base-3); color: var(--contrast); font-weight: 700; text-align: left; padding: 14px 16px; z-index: 2; } .table-compare td { padding: 14px 16px; border-top: 1px solid var(--base-3); color: var(--contrast); } .table-compare tr:nth-child(even) td { background: var(--base-2); } .table-compare tr.best-pick td { background: color-mix(in srgb, var(--accent) 8%, var(--base)); border-left: 3px solid var(--accent); font-weight: 600; } .table-compare .rating { color: var(--accent-2); font-weight: 700; } @media (max-width: 768px) { .table-compare:not(.volticen-comparison__table) { display: block; overflow-x: auto; white-space: nowrap; } } .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--base, #fff) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--base-3, #eceef1); transition: box-shadow 0.2s ease, background 0.2s ease; } .site-header.is-scrolled { box-shadow: 0 2px 10px rgba(0,0,0,0.06); } /* Khung chứa nút trong Navigation */ .header-actions { display: flex; align-items: center; order: 10; /* Đảm bảo luôn nằm cuối cùng bên phải */ margin-left: 16px; } /* Style cho nút bấm thuần */ .theme-toggle-btn { background: transparent; border: none; color: var(--contrast-2) !important; /* Ép màu mặc định ban đầu */ cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: var(--radius-sm); transition: color 0.2s, background 0.2s; } /* Ép các icon SVG bên trong luôn ăn theo màu (color) của nút bấm */ .theme-toggle-btn svg.moon-icon { /* Ép màu viền theo màu của nút bấm */ stroke: currentColor !important; /* Ép làm rỗng hoàn toàn phần nền bên trong mặt trăng */ fill: transparent !important; /* (Tùy chọn) Điều chỉnh độ đậm của viền nếu cần, ví dụ: 1.5px hoặc 2px */ stroke-width: 1.5px; } .theme-toggle-btn:hover { color: var(--contrast) !important; background: var(--base-3); } /* --- LOGIC ẨN/HIỆN ICON THEO THEME (ĐÃ ĐƯỢC TỐI ƯU) --- */ /* MẶC ĐỊNH HOẶC KHI LÀ LIGHT MODE: Hiện trăng, ẩn mặt trời */ .theme-toggle-btn .sun-icon, [data-theme="light"] .theme-toggle-btn .sun-icon { display: none !important; } .theme-toggle-btn .moon-icon, [data-theme="light"] .theme-toggle-btn .moon-icon { display: block !important; } /* KHI Ở CHẾ ĐỘ DARK MODE: Ẩn trăng, hiện mặt trời */ [data-theme="dark"] .theme-toggle-btn .sun-icon { display: block !important; } [data-theme="dark"] .theme-toggle-btn .moon-icon { display: none !important; } /* --- ÉP NÚT LIGHT/DARK HIỂN THỊ TRÊN MOBILE --- */ @media (max-width: 768px) { /* Khung bao ngoài chứa nút bấm (nếu có) */ .header-actions { display: flex !important; /* Ép hiển thị dạng flex thay vì bị ẩn */ align-items: center; visibility: visible !important; } /* Ép bản thân nút bấm phải hiện ra */ .theme-toggle-btn { display: flex !important; /* Ép nút bấm luôn luôn hiển thị */ visibility: visible !important; opacity: 1 !important; } } /* ========================================================================== DYNAMIC LOGO SWITCHER (LIGHT / DARK MODE) ========================================================================== */ /* Trạng thái Dark Mode: Tự động đổi source ảnh của Logo */ [data-theme="dark"] .site-logo img { /* Thay đường dẫn URL bên dưới bằng link ảnh Logo Dark Mode trong Media của bạn */ content: url("https://volticen.com/wp-content/uploads/2026/07/volticen-mark-final.svg"); } /* Tùy chọn: Nếu bạn có bật chức năng Mobile Header riêng trong GeneratePress */ [data-theme="dark"] .mobile-header-navigation .site-logo img { content: url("https://volticen.com/wp-content/uploads/2026/07/volticen-mark-final.svg"); } /* Rank Math breadcrumb — aligned with DNA v2 */ .rank-math-breadcrumb { font-family: var(--font-body); font-size: 0.78rem; line-height: 1.5; color: var(--contrast-2); margin: 0 0 clamp(24px, 3vw, 32px); /* was 32px — now ties to the spacing scale (24px) */ } .rank-math-breadcrumb a { color: var(--contrast-2); text-decoration: none; transition: color 0.2s ease; } .rank-math-breadcrumb a:hover { color: var(--accent); } .rank-math-breadcrumb .separator { margin: 0 6px; color: var(--contrast-3); /* was --contrast-2 — decorative, so pushed to the faintest tier */ } .rank-math-breadcrumb .last { color: var(--contrast); /* was --contrast-2 — current page gets top-tier emphasis, not secondary */ /* font-weight: 600; was 500 — a touch stronger to match the new emphasis color */ } .meta-dot { display: inline-flex; align-items: center; height: 100%; font-size: 42px; /* to hơn font-size 13px của phần chữ xung quanh */ } /* Volticen affiliate CTA card — install once in WordPress Additional CSS. */ .volticen-affiliate-cta { --volticen-cta-bg: #0f172a; --volticen-cta-border: rgba(56, 189, 248, 0.34); --volticen-cta-accent: #38bdf8; --volticen-cta-button: #2563eb; --volticen-cta-button-hover: #1d4ed8; --volticen-cta-text: #f8fafc; --volticen-cta-muted: #cbd5e1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; margin: 36px 0; padding: 28px; overflow: hidden; color: var(--volticen-cta-text); background: radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.32), transparent 42%), linear-gradient(135deg, #0f172a 0%, #111d36 100%); border: 1px solid var(--volticen-cta-border); border-radius: 16px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16); } .volticen-affiliate-cta__eyebrow { margin: 0 0 8px; color: var(--volticen-cta-accent); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.09em; line-height: 1.4; text-transform: uppercase; } .volticen-affiliate-cta__title { margin: 0; color: var(--volticen-cta-text); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.25; } .volticen-affiliate-cta__description { max-width: 64ch; margin: 10px 0 0; color: var(--volticen-cta-muted); font-size: 0.98rem; line-height: 1.65; } .volticen-affiliate-cta__action { min-width: 210px; text-align: center; } .volticen-affiliate-cta__button { display: inline-flex; gap: 9px; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 20px; color: #fff !important; font-weight: 750; line-height: 1.25; text-decoration: none !important; background: var(--volticen-cta-button); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; box-shadow: 0 7px 18px rgba(37, 99, 235, 0.3); transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } .volticen-affiliate-cta__button:hover, .volticen-affiliate-cta__button:focus-visible { color: #fff !important; background: var(--volticen-cta-button-hover); box-shadow: 0 9px 22px rgba(37, 99, 235, 0.4); transform: translateY(-1px); } .volticen-affiliate-cta__button:focus-visible { outline: 3px solid rgba(56, 189, 248, 0.65); outline-offset: 3px; } .volticen-affiliate-cta__note { margin: 9px 0 0; color: #94a3b8; font-size: 0.73rem; line-height: 1.4; } @media (max-width: 700px) { .volticen-affiliate-cta { grid-template-columns: 1fr; gap: 20px; margin: 28px 0; padding: 22px; } .volticen-affiliate-cta__action { min-width: 0; text-align: left; } .volticen-affiliate-cta__button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .volticen-affiliate-cta__button { transition: none; } } /* Volticen affiliate Quote notice. */ .volticen-notice { margin: 20px 0; padding: 18px 22px; color: var(--contrast); font-size: 1rem; font-style: normal; line-height: 1.65; background: var(--base-2); border-left: 3px solid var(--accent); } .volticen-notice p { margin: 0; } .volticen-notice--affiliate { font-size: 0.925rem; border-left-color: var(--accent-2); } /* --- WordPress Block Table (global baseline) --- Applies to ordinary Gutenberg Table blocks across posts and pages. Component-specific classes such as .volticen-comparison__table may override these low-specificity defaults. */ :where(.entry-content, .dynamic-entry-content) figure.wp-block-table { width: 100%; margin: var(--v-space-6) 0 var(--v-space-8); overflow-x: auto; overflow-y: hidden; background: var(--v-color-bg); border: 1px solid var(--v-color-border); border-radius: var(--v-radius-md); box-shadow: var(--v-shadow-card); scrollbar-width: thin; -webkit-overflow-scrolling: touch; } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table table { width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; color: var(--v-color-text); font-size: 0.94rem; line-height: 1.55; } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table th, :where(.entry-content, .dynamic-entry-content) figure.wp-block-table td { padding: 14px 16px; border: 0; border-right: 1px solid var(--v-color-border); border-bottom: 1px solid var(--v-color-border); text-align: left; vertical-align: top; white-space: normal; } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table tr > :last-child { border-right: 0; } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table tbody tr:last-child > * { border-bottom: 0; } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table thead th { color: var(--v-color-text); background: linear-gradient(180deg, color-mix(in srgb, var(--v-color-accent) 8%, var(--v-color-surface)) 0%, var(--v-color-surface) 100%); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--v-color-accent) 72%, transparent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.025em; line-height: 1.4; } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--v-color-surface) 72%, var(--v-color-bg)); } @media (hover: hover) { :where(.entry-content, .dynamic-entry-content) figure.wp-block-table tbody tr:hover td { background: color-mix(in srgb, var(--v-color-accent) 5%, var(--v-color-bg)); } } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table figcaption { margin: 0; padding: 10px 14px; color: var(--v-color-text-muted); background: var(--v-color-surface); border-top: 1px solid var(--v-color-border); font-size: 0.78rem; line-height: 1.5; text-align: left; } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table:focus-within { outline: 3px solid color-mix(in srgb, var(--v-color-accent) 30%, transparent); outline-offset: 3px; } @media (max-width: 700px) { :where(.entry-content, .dynamic-entry-content) figure.wp-block-table { margin-inline: calc(-1 * min(10px, var(--v-page-gutter))); width: calc(100% + (2 * min(10px, var(--v-page-gutter)))); border-radius: var(--v-radius-sm); } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table table { font-size: 0.88rem; } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table th, :where(.entry-content, .dynamic-entry-content) figure.wp-block-table td { padding: 12px 13px; } /* Preserve readable columns for decision tables like MG-05. Modern browsers use :has(); older browsers keep the normal fluid table as a safe fallback. */ :where(.entry-content, .dynamic-entry-content) figure.wp-block-table:has(thead th:nth-child(4)) table { min-width: 760px; } :where(.entry-content, .dynamic-entry-content) figure.wp-block-table:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) table { min-width: 600px; } } /* ========================================================================== VOLTICEN COMPARISON ARTICLE Reusable, content-scoped components for evidence-led product comparisons. ========================================================================== */ .volticen-comparison { --v-comparison-product-a: #38bdf8; --v-comparison-product-b: #f5a623; --v-comparison-ink-inverse: #f8fafc; --v-comparison-muted-inverse: #cbd5e1; } .volticen-comparison__lede { position: relative; margin: 0 0 var(--v-space-10); padding: clamp(22px, 4vw, 34px); overflow: hidden; color: var(--v-comparison-ink-inverse); background: radial-gradient(circle at 8% 10%, rgba(56, 189, 248, 0.2), transparent 34%), radial-gradient(circle at 92% 90%, rgba(245, 166, 35, 0.16), transparent 34%), linear-gradient(135deg, #0f172a 0%, #17233e 100%); border: 1px solid rgba(148, 163, 184, 0.24); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow-feature); } .volticen-comparison__lede::after { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--v-comparison-product-a), transparent 36%, transparent 64%, var(--v-comparison-product-b)); content: ""; opacity: 0.1; } .volticen-comparison__lede > * { position: relative; z-index: 1; } .volticen-comparison__lede p { max-width: 76ch; margin: 0; color: var(--v-comparison-muted-inverse); font-size: 1rem; line-height: 1.7; } .volticen-comparison__lede p + p { margin-top: 0.9rem; } .volticen-comparison__lede .volticen-comparison__eyebrow { display: flex; margin: 0 0 0.85rem; align-items: center; gap: 0.55rem; color: #e2e8f0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; } .volticen-comparison__eyebrow::before { width: 22px; height: 2px; background: linear-gradient(90deg, var(--v-comparison-product-a), var(--v-comparison-product-b)); content: ""; } .volticen-comparison__table-scroll { width: 100%; margin: var(--v-space-5) 0 var(--v-space-4); overflow-x: auto; border: 1px solid var(--v-color-border); border-radius: var(--v-radius-md); box-shadow: var(--v-shadow-card); scrollbar-width: thin; } .volticen-comparison__table-scroll:focus-visible { outline: 3px solid color-mix(in srgb, var(--v-color-accent-warm) 70%, #fff); outline-offset: 3px; } .volticen-comparison .volticen-comparison__table { min-width: 720px; margin: 0; border: 0; border-radius: 0; } .volticen-comparison__table thead th { position: static; vertical-align: bottom; background: var(--v-color-surface-strong); } .volticen-comparison__table thead th:nth-child(2) { box-shadow: inset 0 3px 0 var(--v-comparison-product-a); } .volticen-comparison__table thead th:nth-child(3) { box-shadow: inset 0 3px 0 var(--v-comparison-product-b); } .volticen-comparison__table th:first-child, .volticen-comparison__table td:first-child { width: 27%; font-weight: 700; } .volticen-comparison__table th, .volticen-comparison__table td { white-space: normal; } .volticen-comparison__method { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--v-space-8) 0; overflow: hidden; background: var(--v-color-surface); border: 1px solid var(--v-color-border); border-radius: var(--v-radius-md); } .volticen-comparison__method span { display: grid; min-width: 0; padding: 17px 18px; color: var(--v-color-text-muted); font-size: 0.78rem; line-height: 1.45; } .volticen-comparison__method span + span { border-left: 1px solid var(--v-color-border); } .volticen-comparison__method strong { margin-bottom: 4px; color: var(--v-color-text); font-size: 0.67rem; letter-spacing: 0.06em; text-transform: uppercase; } .volticen-comparison-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space-5); margin: var(--v-space-10) 0; } .volticen-comparison-ctas .volticen-comparison-cta { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: var(--v-space-6); min-width: 0; margin: 0; padding: var(--v-space-6); } .volticen-comparison-cta--product-a { --volticen-cta-border: rgba(56, 189, 248, 0.4); --volticen-cta-accent: #7dd3fc; } .volticen-comparison-cta--product-b { --volticen-cta-border: rgba(245, 166, 35, 0.42); --volticen-cta-accent: #f8c96f; } .volticen-comparison-ctas .volticen-affiliate-cta__title { font-size: clamp(1.16rem, 2vw, 1.42rem); } .volticen-comparison-ctas .volticen-affiliate-cta__action { min-width: 0; text-align: left; } .volticen-comparison-ctas .volticen-affiliate-cta__button { width: 100%; } @media (max-width: 820px) { .volticen-comparison__method { grid-template-columns: repeat(2, minmax(0, 1fr)); } .volticen-comparison__method span:nth-child(3) { border-left: 0; } .volticen-comparison__method span:nth-child(n + 3) { border-top: 1px solid var(--v-color-border); } .volticen-comparison-ctas { grid-template-columns: 1fr; } } @media (max-width: 560px) { .single-post .category-compare .wp-block-post-title { font-size: 2.55rem; line-height: 1.08; letter-spacing: -0.035em; } .volticen-comparison__lede { margin-bottom: var(--v-space-8); padding: var(--v-space-5); border-radius: var(--v-radius-md); } .volticen-comparison__table-scroll { margin-inline: calc(-1 * min(10px, var(--v-page-gutter))); width: calc(100% + (2 * min(10px, var(--v-page-gutter)))); border-radius: var(--v-radius-sm); } .volticen-comparison__method { grid-template-columns: 1fr; } .volticen-comparison__method span + span, .volticen-comparison__method span:nth-child(3) { border-left: 0; border-top: 1px solid var(--v-color-border); } } @media (prefers-reduced-motion: reduce) { .volticen-comparison * { scroll-behavior: auto; } } /* ========================================================================== VOLTICEN GUIDES ARTICLE ========================================================================== */ .vg-more-guides__media { overflow: hidden; border-radius: 8px; } .vg-more-guides__media img { display: block; width: 100%; object-fit: contain; border-radius: inherit; } .vg-more-guides__item { padding: 22px 0; border-bottom: 1px solid var(--v-color-border); } .vg-more-guides__item:first-child { padding-top: 0; } /* Standard editorial images */ :where( .volticen-review-main, .volticen-compare-main, .entry-content, .dynamic-entry-content ) :where( figure.wp-block-image, figure.aligncenter, figure.alignwide, figure.alignfull ):not(.volticen-image--plain) img { border: 1px solid var(--v-border, #dce3ec); border-radius: var(--v-radius-md, 12px); box-shadow: var( --v-shadow-card, 0 12px 34px rgba(31, 52, 100, 0.075) ); }