/* ========================================================================== Hosting Explorers — Main Stylesheet Version 3.7.17 ========================================================================== */ /* Load detection marker — read by hexp_css_load_check() in inc/enqueue.php. If this CSS fails to load, the inline JS in notices because this variable stays empty, then triggers a one-time cache-bust reload. */ :root { --hexp-css-loaded: yes; } /* CSS Variables */ :root { --hexp-primary: #2563EB; --hexp-primary-hover: #1D4ED8; --hexp-navy: #1A2847; --hexp-navy-dark: #0F1729; --hexp-orange: #F97316; --hexp-green: #16A34A; --hexp-green-light: #22C55E; --hexp-yellow: #FBBF24; --hexp-blue-50: #EFF6FF; --hexp-blue-light: #60A5FA; --hexp-gray-50: #F8FAFC; --hexp-gray-100: #F1F5F9; --hexp-gray-200: #E5E7EB; --hexp-gray-300: #D1D5DB; --hexp-gray-400: #9CA3AF; --hexp-gray-500: #6B7280; --hexp-gray-600: #4B5563; --hexp-gray-700: #374151; --hexp-gray-800: #1F2937; --hexp-gray-900: #111827; --hexp-white: #FFFFFF; --hexp-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --hexp-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.05); --hexp-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.05); --hexp-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05); --hexp-radius-sm: 6px; --hexp-radius-md: 10px; --hexp-radius-lg: 16px; --hexp-radius-xl: 24px; --hexp-radius-full: 9999px; --hexp-font-en: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --hexp-font-ar: 'Cairo', system-ui, sans-serif; } /* Reset */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } html { overflow-x: clip; } body { margin: 0; font-family: var(--hexp-font-en); font-size: 15px; line-height: 1.6; color: var(--hexp-gray-800); background: var(--hexp-white); -webkit-font-smoothing: antialiased; /* `overflow-x:hidden` on body breaks position:sticky on descendants in most browsers because it creates a scrolling context. `overflow-x:clip` prevents horizontal scroll without the scroll-context side-effect. Falls back to `hidden` only if `clip` is unsupported. */ overflow-x: hidden; overflow-x: clip; } body.is-rtl { font-family: var(--hexp-font-ar); } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } button { cursor: pointer; border: none; background: none; font: inherit; } ul { list-style: none; padding: 0; margin: 0; } .skip-link { position: absolute; left: -10000px; top: auto; } .skip-link:focus { left: 6px; top: 6px; padding: 8px 12px; background: white; z-index: 999; } .hexp-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== TOP BAR + HEADER ========================================================================== */ .hexp-top-bar { background: var(--hexp-navy-dark); color: var(--hexp-gray-300); font-size: 13px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .hexp-top-bar-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 24px; } .hexp-top-bar-left { display: flex; gap: 24px; } .hexp-top-bar-left span { display: flex; align-items: center; gap: 6px; } .hexp-top-bar-left i { color: var(--hexp-blue-light); } .hexp-header { background: var(--hexp-white); border-bottom: 1px solid var(--hexp-gray-200); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .hexp-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1280px; margin: 0 auto; gap: 24px; } .hexp-logo-wrap { flex-shrink: 0; } .hexp-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; color: var(--hexp-navy-dark); } .hexp-logo-mark { width: 38px; height: 38px; background: linear-gradient(135deg, var(--hexp-primary) 0%, var(--hexp-navy) 100%); border-radius: 10px; display: grid; place-items: center; color: white; font-size: 18px; box-shadow: 0 4px 12px rgba(37,99,235,0.3); } .hexp-logo-text strong { color: var(--hexp-primary); } /* v3.7.89 — Header custom logo. Final tweak — reduced from v3.7.88's 44px to match menu item visual weight more closely. The menu items render at ~22px tall (text + padding ~38px line-box); a 38px logo aligns cleanly. */ .hexp-header .custom-logo, .hexp-header .custom-logo-link img, .hexp-logo-wrap .custom-logo, .hexp-logo-wrap .custom-logo-link img { display: block !important; height: auto !important; width: auto !important; max-height: 38px !important; min-height: 28px !important; max-width: 170px !important; object-fit: contain !important; } .hexp-logo-wrap { display: flex !important; align-items: center !important; } .custom-logo-link { display: inline-flex; align-items: center; } /* Main Navigation */ .hexp-main-nav { display: flex; flex: 1; justify-content: center; } .hexp-menu { display: flex; align-items: center; gap: 4px; margin: 0; } .hexp-menu > .hexp-nav-item, .hexp-menu > li { position: relative; } .hexp-menu a, .hexp-nav-link { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-weight: 600; font-size: 14.5px; color: var(--hexp-gray-700); border-radius: 8px; transition: all 0.2s; cursor: pointer; white-space: nowrap; } .hexp-menu a:hover, .hexp-nav-link:hover { background: var(--hexp-gray-100); color: var(--hexp-navy); } .hexp-nav-link i.fa-chevron-down { font-size: 11px; opacity: 0.6; transition: transform 0.2s; } .hexp-nav-item:hover .hexp-nav-link i.fa-chevron-down { transform: rotate(180deg); } .hexp-coupon-badge { background: var(--hexp-green); color: white; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--hexp-radius-full); margin-left: 4px; } /* Mega Menu */ .hexp-mega-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); padding: 28px; min-width: 600px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 32px; opacity: 0; visibility: hidden; transition: all 0.25s; border: 1px solid var(--hexp-gray-200); } .hexp-nav-item:hover .hexp-mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .hexp-mega-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-weight: 500; font-size: 14px; color: var(--hexp-gray-700); transition: all 0.15s; } .hexp-mega-item:hover { background: var(--hexp-blue-50); color: var(--hexp-primary); } .hexp-mega-link { grid-column: span 2; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--hexp-gray-200); color: var(--hexp-primary); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; } .hexp-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .hexp-monthly-pick { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 14px; background: var(--hexp-gray-50); border: 1px solid var(--hexp-gray-200); border-radius: var(--hexp-radius-full); font-size: 13px; font-weight: 600; color: var(--hexp-gray-700); white-space: nowrap; flex-shrink: 0; overflow: visible; min-height: 44px; text-decoration: none; } .hexp-monthly-pick:hover{ background: #fff; border-color: var(--hexp-primary); color: var(--hexp-navy); } .hexp-monthly-pick i { color: var(--hexp-yellow); } .hexp-monthly-pick .pick-brand { padding: 4px 12px; background: white; border-radius: var(--hexp-radius-full); font-weight: 700; color: var(--hexp-navy); border: 1px solid var(--hexp-gray-200); } .hexp-icon-btn, .hexp-mobile-toggle { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--hexp-gray-600); transition: all 0.2s; background: var(--hexp-gray-50); } .hexp-icon-btn:hover, .hexp-mobile-toggle:hover { background: var(--hexp-blue-50); color: var(--hexp-primary); } .hexp-mobile-toggle { display: none; } /* Search Overlay (handled in v2.7 — see below) */ .hexp-search-overlay { /* legacy declaration — animated version below */ } .hexp-search-form { max-width: 800px; margin: 0 auto; display: flex; align-items: center; gap: 12px; background: var(--hexp-gray-50); border-radius: var(--hexp-radius-full); padding: 4px 4px 4px 24px; border: 1px solid var(--hexp-gray-200); } .hexp-search-form input { flex: 1; padding: 12px 0; border: none; background: transparent; font: inherit; font-size: 16px; outline: none; } .hexp-search-form button { width: 44px; height: 44px; border-radius: 50%; background: var(--hexp-primary); color: white; display: grid; place-items: center; } .hexp-search-close { width: 38px; height: 38px; background: var(--hexp-gray-200) !important; color: var(--hexp-gray-700) !important; font-size: 24px; } /* ========================================================================== HERO ========================================================================== */ .hexp-hero { background: linear-gradient(135deg, var(--hexp-navy-dark) 0%, var(--hexp-navy) 50%, #16264a 100%); color: white; padding: 70px 0 100px; position: relative; overflow: hidden; } .hexp-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(59,130,246,0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(249,115,22,0.08) 0%, transparent 40%); pointer-events: none; } .hexp-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); } .hexp-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; } .hexp-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); border-radius: var(--hexp-radius-full); font-size: 13px; font-weight: 600; color: var(--hexp-blue-light); margin-bottom: 20px; } .hexp-hero-eyebrow i { font-size: 11px; } .hexp-hero h1 { font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -1.5px; margin: 0 0 20px; color: #fff; } .hexp-hero h1 .accent { background: linear-gradient(135deg, var(--hexp-blue-light) 0%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hexp-hero p { font-size: 18px; color: rgba(255,255,255,0.75); max-width: 580px; line-height: 1.6; margin: 0 0 36px; } .hexp-hero-tabs { display: flex; gap: 32px; margin-top: 20px; position: relative; flex-wrap: wrap; } .hexp-hero-tab { font-size: 17px; font-weight: 700; color: rgba(255,255,255,0.5); padding: 10px 0; transition: color 0.2s; cursor: pointer; position: relative; } .hexp-hero-tab.active { color: var(--hexp-blue-light); } .hexp-hero-tab:hover:not(.active) { color: white; } .hexp-hero-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px; background: var(--hexp-blue-light); border-radius: 2px; box-shadow: 0 0 20px rgba(96,165,250,0.6); } .hexp-hero-progress { height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; position: relative; margin-top: 12px; overflow: hidden; max-width: 600px; } .hexp-hero-progress::before { content: ''; position: absolute; height: 100%; width: 25%; background: linear-gradient(90deg, transparent, var(--hexp-blue-light)); border-radius: 2px; animation: hexp-progress 4s ease-in-out infinite; } @keyframes hexp-progress { 0% { left: -25%; } 100% { left: 100%; } } .hexp-hero-visual:not(.hexp-hero-orbit) { position: relative; width: 100%; max-width:380px; height: 360px; display: grid; place-items: center; margin:0 auto; } .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.45; } .orb-1 { width: 220px; height: 220px; background: var(--hexp-primary); top: 20%; left: 10%; } .orb-2 { width: 170px; height: 170px; background: var(--hexp-orange); bottom: 10%; right: 10%; opacity: 0.28; } .hexp-hero-card-stack { position: relative; width: 100%; height: 100%; display: grid; place-items: center; } .hexp-float-card { position: absolute; background: rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: white; font-weight: 600; box-shadow: 0 16px 32px rgba(0,0,0,0.28); white-space: nowrap; } .hexp-float-card i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: 12px; } .hexp-float-card.fc-1 { top: 8%; left: -10%; animation: hexp-float1 5s ease-in-out infinite; } .hexp-float-card.fc-1 i { background: rgba(34,197,94,0.2); color: var(--hexp-green-light); } .hexp-float-card.fc-2 { top: 50%; right: -12%; animation: hexp-float2 5s ease-in-out infinite 1s; } .hexp-float-card.fc-2 i { background: rgba(249,115,22,0.2); color: var(--hexp-orange); } .hexp-float-card.fc-3 { bottom: 8%; left: -4%; animation: hexp-float1 5s ease-in-out infinite 2s; } .hexp-float-card.fc-3 i { background: rgba(96,165,250,0.2); color: var(--hexp-blue-light); } @keyframes hexp-float1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes hexp-float2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } } .hexp-hero-center-card { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.18); border-radius: 18px; padding: 20px; width: 200px; text-align: center; box-shadow: 0 24px 48px rgba(0,0,0,0.35); position: relative; z-index: 2; } .hexp-hero-center-card .badge { display: inline-block; background: var(--hexp-green-light); color: white; font-size: 9.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--hexp-radius-full); margin-bottom: 10px; letter-spacing: 0.5px; } .hexp-hero-center-card h3 { color: white; font-size: 17px; font-weight: 800; margin: 0 0 4px; } .hexp-hero-center-card .price { font-size: 28px; font-weight: 800; color: white; margin: 6px 0; } .hexp-hero-center-card .price .currency, .hexp-hero-center-card .price .amount { color: white; } .hexp-hero-center-card .price .per { font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 500; } /* ========================================================================== SECTIONS — common ========================================================================== */ .hexp-explore-section, .hexp-providers-section, .hexp-coupons-section, .hexp-trust-section, .hexp-articles-section, .hexp-newsletter-section, .hexp-archive-content { padding: 80px 0; } .hexp-explore-section, .hexp-articles-section { background: var(--hexp-gray-50); } .hexp-providers-section, .hexp-trust-section { background: white; } .hexp-coupons-section { background: linear-gradient(180deg, var(--hexp-gray-50) 0%, white 100%); } .hexp-section-header { text-align: center; margin-bottom: 50px; } .hexp-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; color: var(--hexp-primary); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; } .hexp-section-title { font-size: 40px; font-weight: 800; color: var(--hexp-navy-dark); letter-spacing: -1px; margin: 0 0 14px; line-height: 1.15; } .hexp-section-subtitle { font-size: 17px; color: var(--hexp-gray-600); max-width: 620px; margin: 0 auto; line-height: 1.6; } .hexp-section-title-left { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; flex-wrap: wrap; gap: 20px; } .hexp-section-title-left h2 { font-size: 38px; font-weight: 800; color: var(--hexp-navy-dark); letter-spacing: -1px; line-height: 1.15; margin: 0; } .hexp-section-title-left p { color: var(--hexp-gray-500); font-size: 16px; margin: 6px 0 0; } .hexp-see-all { display: inline-flex; align-items: center; gap: 6px; color: var(--hexp-primary); font-weight: 700; font-size: 14px; transition: gap 0.2s; } .hexp-see-all:hover { gap: 10px; } /* ========================================================================== EXPLORE ========================================================================== */ .hexp-explore-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; } .hexp-explore-card, .hexp-service-card { background: white; border-radius: 20px; padding: 32px; box-shadow: var(--hexp-shadow-md); border: 1px solid var(--hexp-gray-200); } .hexp-explore-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .hexp-icon-pill { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; } .hexp-icon-pill.blue { background: linear-gradient(135deg, var(--hexp-blue-50), #dbeafe); color: var(--hexp-primary); } .hexp-icon-pill.orange { background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #ea580c; } .hexp-explore-card h3, .hexp-service-card h3 { font-size: 22px; font-weight: 800; color: var(--hexp-navy-dark); margin: 0; } .hexp-explore-card p, .hexp-service-card p { color: var(--hexp-gray-500); font-size: 14.5px; margin: 0 0 24px; } .hexp-category-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } .hexp-cat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--hexp-gray-50); border: 1.5px solid var(--hexp-gray-200); border-radius: var(--hexp-radius-full); font-size: 14px; font-weight: 600; color: var(--hexp-gray-700); transition: all 0.2s; } .hexp-cat-pill:hover { border-color: var(--hexp-primary); color: var(--hexp-primary); background: var(--hexp-blue-50); transform: translateY(-2px); } .hexp-service-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hexp-service-type { padding: 14px 16px; background: var(--hexp-gray-50); border: 2px solid transparent; border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--hexp-gray-700); text-align: center; cursor: pointer; transition: all 0.2s; } .hexp-service-type.active { background: var(--hexp-blue-50); border-color: var(--hexp-primary); color: var(--hexp-primary); } .hexp-service-type:hover:not(.active) { background: var(--hexp-gray-100); } /* ========================================================================== PROVIDERS LIST + CARD ========================================================================== */ .hexp-filter-tabs { /* v3.7.124 — same horizontal-scroll treatment as .hexp-filter-tabs-h. Drops mask-image (replaced by JS-injected gradient overlays in the wrapper) for consistent paint behavior. */ display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 4px 4px 16px; margin-bottom: 32px; border-bottom: 1px solid var(--hexp-gray-200); } .hexp-filter-tabs::-webkit-scrollbar{ display:none; } .hexp-filter-tabs.is-overflow{ cursor:grab; padding-left:44px; padding-right:44px; scroll-padding-left:44px; scroll-padding-right:44px; } .hexp-filter-tabs.is-grabbing{ cursor:grabbing; scroll-behavior:auto; } .hexp-filter-tabs.is-grabbing .hexp-filter-tab{ pointer-events:none; user-select:none; } .hexp-filter-tab { padding: 9px 18px; background: var(--hexp-gray-50); color: var(--hexp-gray-700); font-weight: 600; font-size: 13.5px; border-radius: var(--hexp-radius-full); cursor: pointer; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; flex: 0 0 auto; scroll-snap-align: start; } /* ============================================================ * v3.7.124 — Tab swipe controls (wrapper + arrows + fades) * * The wrapper is inserted by main.js around each .hexp-filter-tabs * and .hexp-filter-tabs-h. It provides the positioning context for: * - Two circular chevron buttons that scroll by ~80% viewport on * click. Hidden when the row can't scroll further in that direction. * - Two soft white→transparent gradient overlays that fade tab edges * into the page background. Visible only when there's more content * to see in that direction (using has-fade-left / has-fade-right * classes toggled by main.js). * * The wrapper participates in flex layout — when the original row had * `flex:1; min-width:0` (true for .hexp-filter-tabs-h), main.js copies * those rules onto the wrapper so the row keeps its width. * ============================================================ */ .hexp-tabs-wrap{ position:relative; /* min-width:0 here matters when this is itself a flex item; it lets the wrapper shrink so the inner row can overflow and scroll. */ min-width:0; } .hexp-tabs-wrap.hexp-tabs-wrap-flex{ flex:1; min-width:0; } /* Edge fade overlays — pseudo-elements so we don't bloat the DOM. */ .hexp-tabs-wrap::before, .hexp-tabs-wrap::after{ content:''; position:absolute; top:0; bottom:0; width:48px; pointer-events:none; z-index:1; opacity:0; transition:opacity .15s ease; } .hexp-tabs-wrap::before{ left:0; background:linear-gradient(to right, #fff 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 100%); } .hexp-tabs-wrap::after{ right:0; background:linear-gradient(to left, #fff 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 100%); } .hexp-tabs-wrap.has-fade-left::before{ opacity:1; } .hexp-tabs-wrap.has-fade-right::after{ opacity:1; } /* Chevron arrow buttons. Hidden by default — JS toggles .is-visible based on scroll position. The .is-visible state animates in with opacity + a subtle scale-up so the entrance feels intentional. */ .hexp-tab-arrow{ position:absolute; top:50%; transform:translateY(-50%) scale(0.85); width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid #e5e7eb; box-shadow:0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04); cursor:pointer; display:grid; place-items:center; color:#1f2937; z-index:2; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease, background .15s ease, border-color .15s ease, color .15s ease; padding:0; font-family:inherit; } .hexp-tab-arrow.is-visible{ opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1); } .hexp-tab-arrow:hover{ background:#f9fafb; border-color:var(--hexp-primary); color:var(--hexp-primary); transform:translateY(-50%) scale(1.06); } .hexp-tab-arrow:active{ transform:translateY(-50%) scale(0.94); } .hexp-tab-arrow:focus-visible{ outline:2px solid var(--hexp-primary); outline-offset:2px; } .hexp-tab-arrow svg{ width:18px; height:18px; display:block; } .hexp-tab-arrow-prev{ left:4px; } .hexp-tab-arrow-next{ right:4px; } /* RTL: swap visual positions of prev/next so "previous" is on the right (where the row starts in RTL) and "next" is on the left. The arrow icons keep their original orientation — chevron-left still means "scroll toward start" — because the JS calls scrollBy with the same negative/positive value regardless of direction and the browser resolves it correctly for the writing direction. */ [dir="rtl"] .hexp-tab-arrow-prev{ left:auto; right:4px; } [dir="rtl"] .hexp-tab-arrow-next{ right:auto; left:4px; } [dir="rtl"] .hexp-tabs-wrap::before{ left:auto; right:0; background:linear-gradient(to left, #fff 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 100%); } [dir="rtl"] .hexp-tabs-wrap::after{ right:auto; left:0; background:linear-gradient(to right, #fff 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 100%); } /* On the front-page hexp-providers-section, the background may not be pure white. Override fade colors there so the gradient blends with the section background instead of showing a hard white edge. */ .hexp-providers-section .hexp-tabs-wrap::before{ background:linear-gradient(to right, var(--hexp-gray-50) 0%, rgba(249,250,251,0.85) 40%, rgba(249,250,251,0) 100%); } .hexp-providers-section .hexp-tabs-wrap::after{ background:linear-gradient(to left, var(--hexp-gray-50) 0%, rgba(249,250,251,0.85) 40%, rgba(249,250,251,0) 100%); } .hexp-filter-tab.active { background: var(--hexp-navy); color: white; } .hexp-filter-tab:hover:not(.active) { border-color: var(--hexp-primary); color: var(--hexp-primary); } .hexp-filter-tab.is-loading { position: relative; opacity: .85; } .hexp-filter-tab.is-loading::after { content: ''; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: hexp-spin .7s linear infinite; } @keyframes hexp-spin { to { transform: rotate(360deg); } } /* Smooth fade for the providers list while AJAX is in flight */ .hexp-providers-list { position: relative; transition: opacity .25s ease, filter .25s ease; min-height: 180px; } .hexp-providers-list.hexp-list-loading { opacity: .35; filter: blur(0.5px); pointer-events: none; } .hexp-providers-list.hexp-list-loading::before { content: ''; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 3px solid var(--hexp-gray-200); border-top-color: var(--hexp-primary); border-radius: 50%; animation: hexp-spin .8s linear infinite; z-index: 5; opacity: 1; filter: none; } .hexp-providers-list .hexp-empty-state { text-align: center; padding: 60px 24px; background: var(--hexp-gray-50); border: 1px dashed var(--hexp-gray-200); border-radius: 18px; color: var(--hexp-gray-700); } .hexp-providers-list .hexp-empty-state i { font-size: 38px; color: var(--hexp-gray-400, #9ca3af); margin-bottom: 12px; display: block; } .hexp-providers-list .hexp-empty-state p { font-size: 15px; font-weight: 500; margin: 0; } .hexp-provider-card { display: grid; grid-template-columns: 240px 1fr 280px 220px; gap: 32px; align-items: center; padding: 28px 32px; background: white; border: 1px solid var(--hexp-gray-200); border-radius: 18px; margin-bottom: 18px; transition: all 0.25s; position: relative; overflow: hidden; } .hexp-provider-card:hover { border-color: var(--hexp-blue-light); box-shadow: var(--hexp-shadow-lg); transform: translateY(-2px); } .hexp-rank-badge { position: absolute; top: 0; left: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; color: white; font-size: 12.5px; font-weight: 700; border-radius: 0 0 8px 8px; letter-spacing: 0.3px; } .hexp-rank-badge.rank-best { background: linear-gradient(135deg, var(--hexp-orange), #ea580c); } .hexp-rank-badge.rank-european { background: linear-gradient(135deg, var(--hexp-navy), #1e3a5f); } .hexp-rank-badge.rank-popular { background: linear-gradient(135deg, var(--hexp-primary), #3b82f6); } .hexp-rank-badge.rank-wordpress { background: linear-gradient(135deg, var(--hexp-green), var(--hexp-green-light)); } .hexp-rank-badge.rank-budget { background: linear-gradient(135deg, #6366f1, #818cf8); } .hexp-rank-badge.rank-vps { background: linear-gradient(135deg, #8b5cf6, #a855f7); } .hexp-rank-badge.rank-choice { background: linear-gradient(135deg, var(--hexp-yellow), #f59e0b); color: var(--hexp-navy-dark); } .hexp-rank-badge .rank-num { width: 22px; height: 22px; background: rgba(255,255,255,0.25); border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; } .hexp-provider-logo { display: grid; place-items: center; padding: 30px 20px 0; height: 100px; } .hexp-provider-logo .logo-placeholder { font-size: 26px; font-weight: 800; } .hexp-provider-logo img { max-height: 60px; width: auto; } .hexp-provider-features { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; } .hexp-feature-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--hexp-gray-700); } .hexp-feature-item i { width: 20px; height: 20px; background: #dcfce7; color: var(--hexp-green); border-radius: 50%; display: grid; place-items: center; font-size: 10px; flex-shrink: 0; } .hexp-provider-rating { text-align: center; padding-top: 16px; } .hexp-rating-label { font-size: 12.5px; font-weight: 700; color: var(--hexp-green); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .hexp-rating-stars-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; } .hexp-rating-stars { color: var(--hexp-yellow); font-size: 14px; } .hexp-rating-score { font-size: 24px; font-weight: 800; color: var(--hexp-navy-dark); background: var(--hexp-gray-50); padding: 4px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; } .hexp-rating-score::before { content: '🏆'; font-size: 16px; } .hexp-rating-link { display: block; font-size: 13px; color: var(--hexp-primary); font-weight: 600; margin-top: 6px; } .hexp-rating-link:hover { text-decoration: underline; } .hexp-rating-reviews { font-size: 12px; color: var(--hexp-gray-500); margin-top: 2px; } .hexp-provider-cta { text-align: center; padding-top: 16px; } .hexp-provider-price { font-size: 14px; color: var(--hexp-gray-500); margin-bottom: 4px; } .hexp-provider-price .currency { font-size: 14px; } .hexp-provider-price .amount { font-size: 30px; font-weight: 800; color: var(--hexp-navy-dark); display: inline-block; margin: 0 4px; } .hexp-provider-price .per { font-size: 13px; color: var(--hexp-gray-500); } .hexp-btn-visit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; background: linear-gradient(135deg, var(--hexp-primary), #3b82f6); color: white; font-weight: 700; font-size: 14.5px; border-radius: var(--hexp-radius-full); margin: 10px 0; transition: all 0.2s; box-shadow: 0 8px 20px rgba(37,99,235,0.25); } .hexp-btn-visit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,99,235,0.4); color: white; } .hexp-coupons-link { font-size: 13px; color: var(--hexp-gray-600); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; } .hexp-coupons-link .count { background: var(--hexp-green); color: white; padding: 2px 9px; border-radius: var(--hexp-radius-full); font-size: 11px; font-weight: 700; } .hexp-coupons-link:hover { color: var(--hexp-green); } .hexp-empty-state { text-align: center; padding: 60px 20px; background: var(--hexp-gray-50); border-radius: 16px; color: var(--hexp-gray-500); } /* ========================================================================== COUPON CARDS ========================================================================== */ .hexp-coupons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .hexp-coupon-card { background: white; border-radius: 20px; border: 1px solid var(--hexp-gray-200); overflow: hidden; transition: all 0.25s; display: flex; flex-direction: column; } .hexp-coupon-card:hover { transform: translateY(-4px); box-shadow: var(--hexp-shadow-xl); border-color: var(--hexp-blue-light); } .hexp-coupon-header { padding: 12px 20px; color: white; font-weight: 700; font-size: 14px; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; } .hexp-coupon-header.ch-1 { background: linear-gradient(135deg, #3b82f6, var(--hexp-primary)); } .hexp-coupon-header.ch-2 { background: linear-gradient(135deg, var(--hexp-orange), #ea580c); } .hexp-coupon-header.ch-3 { background: linear-gradient(135deg, var(--hexp-green-light), var(--hexp-green)); } .hexp-coupon-body { padding: 28px 24px; flex: 1; display: flex; flex-direction: column; } .hexp-coupon-logo { height: 50px; display: grid; place-items: center; margin-bottom: 18px; } .hexp-coupon-logo .logo-placeholder { font-size: 22px; font-weight: 800; } .hexp-coupon-logo img { max-height: 50px; width: auto; } .hexp-coupon-deal { display: flex; align-items: start; gap: 8px; font-size: 14.5px; color: var(--hexp-gray-700); line-height: 1.5; margin-bottom: 24px; flex: 1; } .hexp-coupon-deal i { color: var(--hexp-green); font-size: 16px; margin-top: 2px; flex-shrink: 0; } .hexp-btn-coupon { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; background: linear-gradient(135deg, var(--hexp-primary), #3b82f6); color: white; font-weight: 700; font-size: 14px; border-radius: var(--hexp-radius-full); margin-bottom: 14px; transition: all 0.2s; } .hexp-btn-coupon:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,99,235,0.3); color: white; } .hexp-coupon-available { text-align: center; font-size: 13px; color: var(--hexp-gray-600); font-weight: 600; } .hexp-coupon-available .count { background: var(--hexp-green); color: white; padding: 2px 10px; border-radius: var(--hexp-radius-full); font-size: 11px; font-weight: 800; margin-right: 6px; } /* ========================================================================== TRUST SECTION ========================================================================== */ .hexp-trust-tabs { display: flex; gap: 4px; background: var(--hexp-gray-50); padding: 6px; border-radius: var(--hexp-radius-full); max-width: 540px; margin: 0 auto 40px; } .hexp-trust-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; font-weight: 600; font-size: 14px; color: var(--hexp-gray-600); border-radius: var(--hexp-radius-full); transition: all 0.2s; cursor: pointer; } .hexp-trust-tab.active { background: white; color: var(--hexp-primary); box-shadow: var(--hexp-shadow-sm); } .hexp-trust-content { background: var(--hexp-gray-50); border-radius: 24px; padding: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .hexp-trust-text h3 { font-size: 28px; font-weight: 800; color: var(--hexp-navy-dark); margin: 0 0 16px; letter-spacing: -0.5px; } .hexp-trust-text p { color: var(--hexp-gray-600); font-size: 15.5px; line-height: 1.7; margin: 0 0 24px; } .hexp-btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; background: var(--hexp-primary); color: white; font-weight: 700; font-size: 14.5px; border-radius: var(--hexp-radius-full); transition: all 0.2s; } .hexp-btn-primary:hover { background: var(--hexp-navy); transform: translateY(-2px); color: white; } .hexp-trust-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hexp-stat-card { background: white; border-radius: 16px; padding: 24px; text-align: center; border: 1px solid var(--hexp-gray-200); } .hexp-stat-card .hexp-stat-icon { width: 48px; height: 48px; background: var(--hexp-blue-50); color: var(--hexp-primary); border-radius: 14px; display: grid; place-items: center; margin: 0 auto 14px; font-size: 18px; } .hexp-stat-card .hexp-stat-value { font-size: 32px; font-weight: 800; color: var(--hexp-navy-dark); margin-bottom: 4px; } .hexp-stat-card .hexp-stat-label { font-size: 13px; color: var(--hexp-gray-500); font-weight: 600; } /* ========================================================================== ARTICLES ========================================================================== */ .hexp-articles-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; margin-bottom: 30px; } .hexp-article-card { background: white; border-radius: 20px; overflow: hidden; border: 1px solid var(--hexp-gray-200); transition: all 0.25s; } .hexp-article-card:hover { transform: translateY(-4px); box-shadow: var(--hexp-shadow-xl); } .hexp-article-image { height: 220px; background: linear-gradient(135deg, #dbeafe, #bfdbfe); position: relative; overflow: hidden; } .hexp-article-image img { width: 100%; height: 100%; object-fit: cover; } .hexp-article-image::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 30%), radial-gradient(circle at 70% 70%, rgba(96,165,250,0.4) 0%, transparent 30%); pointer-events: none; } .hexp-article-image .hexp-article-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; color: var(--hexp-primary); opacity: 0.4; } .hexp-article-image.green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); } .hexp-article-image.green .hexp-article-icon { color: var(--hexp-green); } .hexp-article-image.orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); } .hexp-article-image.orange .hexp-article-icon { color: #ea580c; } .hexp-article-card.featured .hexp-article-image { height: 320px; } .hexp-article-card.featured .hexp-article-image .hexp-article-icon { font-size: 80px; } .hexp-article-content { padding: 24px; } .hexp-article-tag { display: inline-block; padding: 4px 12px; background: var(--hexp-blue-50); color: var(--hexp-primary); font-size: 11px; font-weight: 700; border-radius: var(--hexp-radius-full); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .hexp-article-card.featured .hexp-article-content h3 { font-size: 24px; } .hexp-article-content h3 { font-size: 18px; font-weight: 800; color: var(--hexp-navy-dark); line-height: 1.35; margin: 0 0 12px; } .hexp-article-content h3 a { color: inherit; transition: color 0.2s; } .hexp-article-content h3 a:hover { color: var(--hexp-primary); } .hexp-article-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--hexp-gray-500); font-weight: 500; flex-wrap: wrap; } .hexp-article-meta i { font-size: 11px; margin-right: 4px; } /* ========================================================================== NEWSLETTER ========================================================================== */ .hexp-newsletter-section { padding: 60px 0; background: linear-gradient(135deg, var(--hexp-navy-dark), var(--hexp-navy)); color: white; position: relative; overflow: hidden; } .hexp-newsletter-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(59,130,246,0.2) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(249,115,22,0.1) 0%, transparent 50%); pointer-events: none; } .hexp-newsletter-inner { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; } .hexp-newsletter-text h2 { font-size: 34px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.5px; } .hexp-newsletter-text p { color: rgba(255,255,255,0.7); font-size: 15.5px; max-width: 480px; line-height: 1.6; margin: 0; } .hexp-newsletter-form { background: white; border-radius: var(--hexp-radius-full); padding: 6px; display: flex; align-items: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .hexp-newsletter-form input { flex: 1; padding: 14px 24px; border: none; background: transparent; font: inherit; font-size: 15px; outline: none; color: var(--hexp-gray-800); } .hexp-newsletter-form button { padding: 14px 32px; background: var(--hexp-orange); color: white; border-radius: var(--hexp-radius-full); font-weight: 700; font-size: 14.5px; transition: all 0.2s; display: flex; align-items: center; gap: 8px; } .hexp-newsletter-form button:hover { background: #ea580c; } /* ========================================================================== FOOTER ========================================================================== */ .hexp-footer { background: var(--hexp-navy-dark); color: rgba(255,255,255,0.7); padding: 70px 0 0; } .hexp-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; } .hexp-footer-brand .hexp-logo { color: white; margin-bottom: 16px; } .hexp-footer-brand .hexp-logo-text strong { color: var(--hexp-blue-light); } /* v3.7.85 — Footer logo: force a much bigger size with min-height too, so the logo actually fills the space even if its native dimensions are small. Browser will scale up; for sharp result, upload a larger source image (we recommend 800×200px). The header gets the same treatment. */ /* v3.7.88 — Footer logo. Sized down from v3.7.85 (was 70-90px) — too big. The footer brand block is one of four columns; an oversized logo throws off the visual balance. Now ~52px to match the column heading sizing. */ .hexp-footer-brand .custom-logo, .hexp-footer-brand .custom-logo-link img { display: block !important; height: auto !important; width: auto !important; max-height: 52px !important; min-height: 36px !important; max-width: 240px !important; object-fit: contain !important; } .hexp-footer-brand .custom-logo-link { display: inline-block !important; margin-bottom: 16px; } .hexp-footer-brand p { font-size: 14px; line-height: 1.6; margin: 0 0 24px; max-width: 340px; } .hexp-social-links { display: flex; gap: 10px; } .hexp-social-link { width: 40px; height: 40px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; display: grid; place-items: center; color: rgba(255,255,255,0.7); transition: all 0.2s; } .hexp-social-link:hover { background: var(--hexp-primary); color: white; border-color: var(--hexp-primary); } .hexp-footer-col h4 { color: white; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 20px; } .hexp-footer-col ul li { margin-bottom: 12px; } .hexp-footer-col ul li a { font-size: 14px; color: rgba(255,255,255,0.65); transition: all 0.2s; } .hexp-footer-col ul li a:hover { color: white; padding-left: 4px; } .hexp-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 16px; } .hexp-footer-bottom a { color: rgba(255,255,255,0.7); margin: 0 12px; } /* ========================================================================== SINGLE COMPANY PAGE ========================================================================== */ .hexp-single-hero { background: linear-gradient(135deg, var(--hexp-navy-dark), var(--hexp-navy)); color: white; padding: 60px 0 80px; position: relative; } .hexp-single-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(59,130,246,0.2) 0%, transparent 50%); } .hexp-single-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 60px; align-items: center; } .hexp-single-hero-inner > * { min-width: 0; } .hexp-single-hero h1 { font-size: 44px; font-weight: 800; margin: 0 0 12px; letter-spacing: -1px; color: #fff; } .hexp-single-hero .lede { font-size: 17px; color: rgba(255,255,255,0.8); margin: 0 0 24px; line-height: 1.6; } .hexp-single-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; } .hexp-single-hero-meta .item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); font-weight: 600; } .hexp-single-hero-meta i { color: var(--hexp-blue-light); } .hexp-single-info-card { background: rgba(255,255,255,0.08); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15); border-radius: 24px; padding: 32px; text-align: center; } .hexp-single-info-card .logo-area { margin-bottom: 20px; padding: 16px; background: rgba(255,255,255,0.95); border-radius: 16px; min-height: 80px; display: grid; place-items: center; } .hexp-single-info-card .logo-area img { max-height: 60px; width: auto; } .hexp-single-info-card .price-big { font-size: 48px; font-weight: 800; color: white; margin: 12px 0 4px; } .hexp-single-info-card .price-big .currency { font-size: 24px; vertical-align: top; } .hexp-single-info-card .price-big .per { font-size: 16px; color: rgba(255,255,255,0.6); font-weight: 500; } .hexp-single-info-card .rating-big { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(34,197,94,0.2); border-radius: 99px; color: white; font-weight: 700; margin-bottom: 20px; } .hexp-single-info-card .rating-big .stars { color: var(--hexp-yellow); } .hexp-single-info-card .btn-visit-big { display: block; padding: 16px; background: var(--hexp-orange); color: white; border-radius: 12px; font-weight: 800; font-size: 16px; transition: all 0.2s; margin-bottom: 12px; } .hexp-single-info-card .btn-visit-big:hover { background: #ea580c; transform: translateY(-2px); color: white; } .hexp-single-info-card .small-meta { font-size: 13px; color: rgba(255,255,255,0.6); } /* Body sections */ .hexp-single-body { padding: 48px 0; background: var(--hexp-gray-50); } /* Important: min-width: 0 on grid children — without it, grid items default to min-content and can blow out wider than their declared track. That's what was pushing the 340px sidebar past the container edge on wider viewports. */ .hexp-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; } .hexp-single-grid > * { min-width: 0; } .hexp-single-sidebar{ display: flex; flex-direction: column; gap: 20px; min-width: 0; max-width: 100%; box-sizing: border-box; } .hexp-single-sidebar > * { max-width: 100%; box-sizing: border-box; } /* Sticky sidebar — desktop only. The whole sidebar follows the user as they scroll down the page, then stops when it reaches the bottom of the article container. JS handles the case where the sidebar is taller than the viewport — it scroll-up- follows so every widget eventually becomes visible without an internal scrollbar. - top:88px clears the floating header - 1024px breakpoint matches when the grid drops to single-column */ @media (min-width:1025px) { .hexp-single-sidebar{ position: sticky; top: 88px; align-self: start; /* No max-height / overflow — sidebar moves naturally with the page. Smart-sticky JS (assets/js/main.js) recalculates `top` so taller sidebars scroll-up-follow instead of cropping their bottom edge. */ transition: top .12s ease-out; will-change: top; } } .hexp-single-section { background: white; border-radius: 16px; padding: 28px 32px; margin-bottom: 20px; border: 1px solid var(--hexp-gray-200); box-shadow: 0 1px 3px rgba(0,0,0,0.02); } .hexp-single-section h2 { font-size: 22px; font-weight: 800; color: var(--hexp-navy-dark); margin: 0 0 16px; letter-spacing: -0.3px; line-height: 1.3; } .hexp-single-section h3 { font-size: 17px; font-weight: 700; color: var(--hexp-navy-dark); margin: 24px 0 12px; letter-spacing: -0.2px; } .hexp-single-section h4 { font-size: 15px; font-weight: 700; color: var(--hexp-navy-dark); margin: 18px 0 10px; } .hexp-single-section p { line-height: 1.7; color: var(--hexp-gray-700); margin: 0 0 14px; } .hexp-single-section ul:not(.hexp-pros ul):not(.hexp-cons ul) { padding-left: 22px; line-height: 1.7; color: var(--hexp-gray-700); } .hexp-single-section ul:not(.hexp-pros ul):not(.hexp-cons ul) li { margin-bottom: 6px; } .hexp-single-section .hexp-intro-lede { font-size: 16px; line-height: 1.65; color: var(--hexp-gray-700); margin: 0; } .hexp-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .hexp-pros, .hexp-cons { padding: 18px 20px; border-radius: 12px; } .hexp-pros { background: #f0fdf4; border: 1px solid #bbf7d0; } .hexp-cons { background: #fef2f2; border: 1px solid #fecaca; } .hexp-pros h3, .hexp-cons h3 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .hexp-pros h3 { color: var(--hexp-green); } .hexp-cons h3 { color: #dc2626; } .hexp-pros ul, .hexp-cons ul { padding: 0; margin: 0; list-style: none; } .hexp-pros ul li, .hexp-cons ul li { padding: 7px 0; font-size: 14px; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; border-bottom: 1px solid rgba(0,0,0,0.05); } .hexp-pros ul li:last-child, .hexp-cons ul li:last-child { border-bottom: none; } .hexp-pros ul li::before { content: '✓'; color: var(--hexp-green); font-weight: 800; flex-shrink: 0; font-size: 13px; } .hexp-cons ul li::before { content: '✗'; color: #dc2626; font-weight: 800; flex-shrink: 0; font-size: 13px; } .hexp-ratings-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .hexp-rating-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--hexp-gray-50); border-radius: 8px; font-size: 14px; } .hexp-rating-item .label { font-weight: 600; color: var(--hexp-gray-700); } .hexp-rating-item .score { font-size: 16px; font-weight: 800; color: var(--hexp-primary); } .hexp-rating-item .stars { color: var(--hexp-yellow); font-size: 13px; } .hexp-features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .hexp-features-grid .feature { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--hexp-blue-50); border-radius: 10px; font-size: 13.5px; line-height: 1.45; } .hexp-features-grid .feature i { width: 28px; height: 28px; background: var(--hexp-primary); color: white; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; font-size: 12px; } /* Technical Specs Grid (added 2026-04 — for company-level structured fields) */ .hexp-tech-specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .hexp-tech-spec { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%); border: 1px solid var(--hexp-gray-200); border-radius: 10px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .hexp-tech-spec:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .hexp-tech-spec-icon { width: 34px; height: 34px; background: var(--hexp-primary); color: white; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; font-size: 14px; } .hexp-tech-spec-body { flex: 1; min-width: 0; } .hexp-tech-spec-label { font-size: 11px; font-weight: 600; color: var(--hexp-gray-500); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .hexp-tech-spec-value { font-size: 13.5px; font-weight: 700; color: var(--hexp-navy-dark); line-height: 1.35; word-break: break-word; } /* New plan-table cells (added 2026-04) — slightly tighter padding to fit more columns */ .hexp-plans-table .plan-email-cell, .hexp-plans-table .plan-inodes-cell, .hexp-plans-table .plan-visitors-cell { color: var(--hexp-gray-700); font-weight: 600; } /* Quick Compare Table Email column (archive page) */ .hexp-compare-email-cell { color: var(--hexp-navy-dark); font-weight: 700; font-size: 13px; white-space: nowrap; } /* Signature Features Grid — bold highlight cards for unique brand differentiators */ .hexp-signature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .hexp-signature-card { position: relative; padding: 20px 18px 18px; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); color: white; border-radius: 14px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hexp-signature-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px; background: rgba(255,255,255,0.08); border-radius: 50%; pointer-events: none; } .hexp-signature-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(37, 99, 235, 0.22); } .hexp-signature-icon { width: 42px; height: 42px; background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); border-radius: 10px; display: grid; place-items: center; font-size: 17px; margin-bottom: 10px; position: relative; z-index: 1; } .hexp-signature-title { font-size: 15.5px; font-weight: 800; margin-bottom: 5px; letter-spacing: -0.01em; position: relative; z-index: 1; line-height: 1.3; } .hexp-signature-desc { font-size: 13px; color: rgba(255,255,255,0.88); line-height: 1.45; position: relative; z-index: 1; } /* Alternate signature cards by company brand color via inline style if possible — theme reuses the company logo_color when the .hexp-signature-card-themed class is added */ .hexp-signature-card.hexp-signature-card-themed { background: linear-gradient(135deg, var(--brand-color, #2563eb) 0%, color-mix(in srgb, var(--brand-color, #2563eb) 80%, #000 20%) 100%); } /* Plans table */ .hexp-plans-table { width: 100%; border-collapse: collapse; font-size: 14px; } .hexp-plans-table th, .hexp-plans-table td { padding: 12px 12px; text-align: left; border-bottom: 1px solid var(--hexp-gray-200); vertical-align: middle; } .hexp-plans-table.hexp-plans-table-detailed th, .hexp-plans-table.hexp-plans-table-detailed td { padding: 11px 10px; font-size: 13px; } .hexp-plans-table th { background: var(--hexp-navy); color: white; font-weight: 700; white-space: nowrap; font-size: 12px; letter-spacing: 0.02em; } .hexp-plans-table.hexp-plans-table-detailed th { font-size: 12px; } .hexp-plans-table tr:hover td { background: var(--hexp-gray-50); } .hexp-plans-table .plan-name { font-weight: 700; color: var(--hexp-navy-dark); white-space: nowrap; } .hexp-plans-table .plan-price { color: var(--hexp-green); font-weight: 800; font-size: 15px; white-space: nowrap; } .hexp-plans-table td:last-child { text-align: right; } .hexp-plans-table .plan-cta { display:inline-flex; align-items:center; gap:6px; padding: 10px 22px; background: var(--hexp-primary); color: white; border-radius: 99px; font-size: 13.5px; font-weight: 700; text-decoration:none; white-space:nowrap; transition: all .2s ease; box-shadow: 0 2px 8px rgba(37,99,235,.2); } .hexp-plans-table .plan-cta:hover { background:#1d4ed8; color:#fff; transform:translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.3); } /* Sidebar */ .hexp-sidebar-card { background: white; border-radius: 16px; padding: 24px; margin-bottom: 20px; border: 1px solid var(--hexp-gray-200); box-sizing: border-box; max-width: 100%; overflow-x: hidden; /* No inner position:sticky here — the parent .hexp-single-sidebar handles sticky behavior for the whole sidebar. Nesting sticky on the children made each card detach independently and overlap the one below it as the user scrolled. v3.7.17 fix. */ } .hexp-sidebar-card h3 { font-size: 18px; margin: 0 0 16px; color: var(--hexp-navy-dark); } .hexp-sidebar-coupon { padding: 16px; background: var(--hexp-gray-50); border-radius: 12px; margin-bottom: 12px; border: 1px dashed var(--hexp-gray-300); } .hexp-sidebar-coupon .label { font-size: 12px; color: var(--hexp-orange); font-weight: 700; text-transform: uppercase; } .hexp-sidebar-coupon .desc { font-size: 14px; color: var(--hexp-gray-700); margin: 6px 0 10px; line-height: 1.5; } .hexp-sidebar-coupon .code { display: flex; align-items: center; justify-content: space-between; background: white; border: 2px dashed var(--hexp-primary); padding: 8px 12px; border-radius: 8px; font-family: monospace; font-weight: 700; font-size: 14px; } .hexp-sidebar-coupon .copy-btn { color: var(--hexp-primary); cursor: pointer; } /* Comparison page */ .hexp-comparison-hero { background: linear-gradient(135deg, var(--hexp-navy-dark), var(--hexp-navy)); color: white; padding: 60px 0; text-align: center; } .hexp-vs-cards { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; max-width: 900px; margin: 30px auto 0; } .hexp-vs-card { background: rgba(255,255,255,0.08); padding: 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.15); } .hexp-vs-card.winner { border-color: var(--hexp-yellow); box-shadow: 0 0 30px rgba(251,191,36,0.3); } .hexp-vs-card .winner-tag { background: var(--hexp-yellow); color: var(--hexp-navy-dark); padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 800; display: inline-block; margin-bottom: 8px; } .hexp-vs-card h3 { color: white; font-size: 22px; margin: 8px 0; } .hexp-vs-card .vs-rating { color: var(--hexp-yellow); margin: 6px 0; } .hexp-vs-card .vs-price { font-size: 28px; font-weight: 800; color: white; } .hexp-vs-divider { font-size: 32px; font-weight: 800; color: var(--hexp-orange); } /* Comparison table */ .hexp-compare-table { width: 100%; border-collapse: collapse; background: white; border-radius: 16px; overflow: hidden; } .hexp-compare-table th, .hexp-compare-table td { padding: 16px; text-align: center; border-bottom: 1px solid var(--hexp-gray-200); } .hexp-compare-table th:first-child, .hexp-compare-table td:first-child { text-align: left; font-weight: 700; color: var(--hexp-navy-dark); background: var(--hexp-gray-50); } .hexp-compare-table th { background: var(--hexp-navy); color: white; } .hexp-compare-table .check { color: var(--hexp-green); font-size: 18px; } .hexp-compare-table .cross { color: #dc2626; font-size: 18px; } /* Archive Page */ .hexp-archive-header { background: linear-gradient(135deg, var(--hexp-navy-dark), var(--hexp-navy)); color: white; padding: 60px 0; text-align: center; } .hexp-archive-header h1 { font-size: 44px; margin: 0 0 12px; font-weight: 800; letter-spacing: -1px; } .hexp-archive-header p { color: rgba(255,255,255,0.75); font-size: 17px; max-width: 600px; margin: 0 auto; } .hexp-archive-content { padding: 60px 0; } .hexp-archive-grid { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; } .hexp-filters-sidebar { background: white; padding: 24px; border-radius: 16px; border: 1px solid var(--hexp-gray-200); position: sticky; top: 90px; } .hexp-filters-mobile-toggle{ display:none; margin-bottom:16px; } .hexp-filters-toggle-btn{ display:inline-flex; align-items:center; gap:10px; width:100%; padding:12px 16px; background:var(--hexp-navy); color:#fff; border:none; border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit; } .hexp-filters-toggle-btn:hover{ background:#0f1d3a; } .hexp-filters-active-count{ margin-left:auto; min-width:22px; height:22px; padding:0 7px; background:rgba(255,255,255,.15); color:#fff; border-radius:11px; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; transition:background .15s; } .hexp-filters-active-count.has-count{ background:var(--hexp-primary); } .hexp-filter-group { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--hexp-gray-200); } .hexp-filter-group:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom:16px; } .hexp-filter-group-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .hexp-filter-group h4 { font-size: 12.5px; margin: 0; color: var(--hexp-navy-dark); text-transform: uppercase; letter-spacing: 1px; font-weight:800; } .hexp-filter-check{ display:flex; align-items:center; gap:10px; padding:8px 10px; margin:0 -10px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--hexp-gray-700); transition:background .15s ease, color .15s ease; user-select:none; } .hexp-filter-check:hover{ background:var(--hexp-gray-50); color:var(--hexp-navy-dark); } .hexp-filter-check input{ width:16px; height:16px; cursor:pointer; flex:0 0 auto; accent-color:var(--hexp-primary); } .hexp-filter-check-name{ flex:1; } .hexp-filter-check:has(input:checked){ background:#EFF4FF; color:var(--hexp-primary); font-weight:600; } .hexp-filter-check-count{ font-size:11.5px; font-weight:600; color:var(--hexp-gray-500); background:var(--hexp-gray-100, #F3F4F6); padding:2px 8px; border-radius:10px; min-width:20px; text-align:center; } .hexp-filter-check:has(input:checked) .hexp-filter-check-count{ background:var(--hexp-primary); color:#fff; } .hexp-filter-clear-all{ display:inline-flex; align-items:center; gap:8px; width:100%; justify-content:center; padding:10px 14px; background:#fff; color:#dc2626; border:1px solid #fecaca; border-radius:10px; font-weight:600; font-size:13.5px; cursor:pointer; font-family:inherit; transition:all .15s ease; } .hexp-filter-clear-all:hover{ background:#fef2f2; border-color:#fca5a5; } /* Archive toolbar (above the providers list) */ .hexp-providers-wrap{ min-width:0; } .hexp-archive-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; padding:14px 20px; border:1px solid var(--hexp-gray-200); border-radius:14px; margin-bottom:20px; } .hexp-archive-count{ font-size:14px; color:var(--hexp-gray-700); } .hexp-archive-count strong{ color:var(--hexp-navy-dark); font-weight:800; } .hexp-archive-sort-wrap{ display:flex; align-items:center; gap:10px; } .hexp-archive-sort-label{ font-size:13px; color:var(--hexp-gray-500); font-weight:600; } .hexp-archive-sort{ padding:8px 32px 8px 12px; border:1px solid var(--hexp-gray-200); border-radius:8px; font-size:13.5px; font-weight:600; color:var(--hexp-navy-dark); background:#fff; cursor:pointer; font-family:inherit; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .hexp-archive-sort:hover{ border-color:var(--hexp-primary); } .hexp-archive-sort:focus{ outline:none; border-color:var(--hexp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); } @media (max-width:900px){ .hexp-filters-sidebar{ position:static; padding:0; background:transparent; border:none; } .hexp-filters-mobile-toggle{ display:block; } .hexp-filters-inner{ display:none; background:#fff; padding:20px; border:1px solid var(--hexp-gray-200); border-radius:14px; margin-top:12px; } .hexp-filters-sidebar.is-open .hexp-filters-inner{ display:block; } .hexp-archive-toolbar{ flex-wrap:wrap; } } /* RTL — swap the dropdown arrow position */ html[dir=rtl] .hexp-archive-sort{ background-position:left 10px center; padding:8px 12px 8px 32px; } html[dir=rtl] .hexp-filters-active-count{ margin-left:0; margin-right:auto; } /* Pagination */ .hexp-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; } .hexp-pagination .page-numbers { padding: 10px 14px; background: white; border: 1px solid var(--hexp-gray-200); border-radius: 8px; color: var(--hexp-gray-700); font-weight: 600; transition: all 0.2s; } .hexp-pagination .page-numbers.current { background: var(--hexp-primary); color: white; border-color: var(--hexp-primary); } .hexp-pagination .page-numbers:hover:not(.current) { border-color: var(--hexp-primary); color: var(--hexp-primary); } /* Single Coupon */ .hexp-coupon-detail { padding: 60px 0; background: var(--hexp-gray-50); } .hexp-coupon-detail-card { max-width: 700px; margin: 0 auto; background: white; border-radius: 24px; padding: 40px; border: 1px solid var(--hexp-gray-200); text-align: center; } .hexp-coupon-discount-display { font-size: 64px; font-weight: 800; color: var(--hexp-green); margin: 20px 0; letter-spacing: -2px; } .hexp-reveal-btn { display: inline-block; padding: 16px 40px; background: var(--hexp-orange); color: white; border-radius: 99px; font-weight: 800; font-size: 16px; cursor: pointer; transition: all 0.2s; border: none; } .hexp-reveal-btn:hover { background: #ea580c; transform: translateY(-2px); } .hexp-coupon-code-box { display: none; align-items: center; justify-content: space-between; max-width: 400px; margin: 20px auto; padding: 16px 24px; background: var(--hexp-gray-50); border: 2px dashed var(--hexp-primary); border-radius: 12px; font-family: monospace; font-size: 18px; font-weight: 800; color: var(--hexp-navy-dark); } .hexp-coupon-code-box.shown { display: flex; } .hexp-coupon-code-box .copy { color: var(--hexp-primary); cursor: pointer; } /* 404 */ .hexp-404 { padding: 100px 20px; text-align: center; } .hexp-404 h1 { font-size: 120px; margin: 0; color: var(--hexp-primary); font-weight: 800; line-height: 1; } .hexp-404 h2 { font-size: 28px; color: var(--hexp-navy-dark); margin: 16px 0 24px; } /* Posts (Blog) */ .hexp-blog-archive { padding: 60px 0; } .hexp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .hexp-single-post { padding: 60px 0; max-width: 800px; margin: 0 auto; } .hexp-single-post h1 { font-size: 40px; font-weight: 800; color: var(--hexp-navy-dark); letter-spacing: -1px; margin-bottom: 16px; } .hexp-single-post .post-content { font-size: 16.5px; line-height: 1.75; color: var(--hexp-gray-700); } .hexp-single-post .post-content h2 { font-size: 28px; margin: 32px 0 16px; color: var(--hexp-navy-dark); } .hexp-single-post .post-content h3 { font-size: 22px; margin: 24px 0 12px; color: var(--hexp-navy-dark); } .hexp-single-post .post-content p { margin-bottom: 18px; } .hexp-single-post .post-content ul, .hexp-single-post .post-content ol { padding-left: 24px; margin-bottom: 18px; } .hexp-single-post .post-content li { margin-bottom: 8px; } .hexp-single-post .post-content a { color: var(--hexp-primary); text-decoration: underline; } .hexp-single-post .post-content blockquote { border-left: 4px solid var(--hexp-primary); padding: 16px 24px; background: var(--hexp-blue-50); margin: 24px 0; font-style: italic; } /* Toast */ .hexp-toast { position: fixed; bottom: 20px; right: 20px; padding: 14px 24px; background: var(--hexp-navy-dark); color: white; border-radius: 99px; font-weight: 600; box-shadow: var(--hexp-shadow-xl); transform: translateY(100px); opacity: 0; transition: all 0.3s; z-index: 9999; } .hexp-toast.show { transform: translateY(0); opacity: 1; } .hexp-toast i { color: var(--hexp-green-light); margin-right: 6px; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1100px) { .hexp-main-nav { display: none; } .hexp-mobile-toggle { display: grid; } .hexp-hero h1 { font-size: 42px; } .hexp-hero-inner { grid-template-columns: 1fr; } .hexp-hero-visual:not(.hexp-hero-orbit) { display: none; } .hexp-provider-card { grid-template-columns: 1fr; gap: 20px; text-align: center; padding-top: 50px; } .hexp-provider-features { align-items: center; } .hexp-articles-grid { grid-template-columns: 1fr 1fr; } .hexp-footer-grid { grid-template-columns: 1fr 1fr; } .hexp-newsletter-inner { grid-template-columns: 1fr; gap: 30px; } .hexp-trust-content { grid-template-columns: 1fr; padding: 30px; } .hexp-explore-grid { grid-template-columns: 1fr; } .hexp-single-grid, .hexp-archive-grid { grid-template-columns: 1fr; } .hexp-single-hero-inner { grid-template-columns: 1fr; } .hexp-blog-grid { grid-template-columns: 1fr 1fr; } /* Tighter padding on tablet/mobile single-page sections so the new wider plan tables fit */ .hexp-single-body { padding: 30px 0; } .hexp-single-section { padding: 22px 20px; } .hexp-single-section h2 { font-size: 19px; } .hexp-pros-cons { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 700px) { .hexp-hero { padding: 50px 0 70px; } .hexp-hero h1 { font-size: 32px; } .hexp-hero p { font-size: 15px; } .hexp-section-title, .hexp-section-title-left h2 { font-size: 26px; } .hexp-explore-section, .hexp-providers-section, .hexp-coupons-section, .hexp-trust-section, .hexp-articles-section { padding: 50px 0; } .hexp-coupons-grid { grid-template-columns: 1fr; } .hexp-articles-grid { grid-template-columns: 1fr; } .hexp-footer-grid { grid-template-columns: 1fr; } .hexp-monthly-pick { display: none; } .hexp-pros-cons, .hexp-features-grid, .hexp-ratings-breakdown { grid-template-columns: 1fr; } .hexp-vs-cards { grid-template-columns: 1fr; } .hexp-single-hero h1 { font-size: 30px; } .hexp-blog-grid { grid-template-columns: 1fr; } .hexp-top-bar-left:last-child { display: none; } /* v3.7.90 — Mobile footer polish. The default v1 styling centered everything which works for hero sections but feels random in a footer (links list under a centered logo = inconsistent rhythm). Now: brand block centered (intentional emphasis), columns left-aligned with a clear visual divider so each section is its own readable list. */ .hexp-footer { padding: 50px 0 30px; } .hexp-footer-grid { gap: 32px; text-align: start; } /* Brand block stays centered for visual anchor */ .hexp-footer-brand { text-align: center; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.08); } .hexp-footer-brand .custom-logo-link, .hexp-footer-brand .custom-logo { margin-left: auto !important; margin-right: auto !important; } .hexp-footer-brand p { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; font-size: 14px; } .hexp-footer-brand .hexp-social-links { justify-content: center; } /* Link columns: left-aligned, slightly tighter spacing */ .hexp-footer-col h4 { font-size: 13px; letter-spacing: 1.5px; margin-bottom: 14px; } .hexp-footer-col ul li { margin-bottom: 10px; } .hexp-footer-col ul li a { font-size: 14.5px; } /* Bottom bar: stack copyright + links, center both */ .hexp-footer-bottom { flex-direction: column; gap: 14px; text-align: center; padding-top: 22px; } .hexp-footer-bottom > * { text-align: center; } .hexp-footer-bottom a { margin: 0 8px; } } /* ============================================================ * V2 COMPONENTS — Mega menus, Provider cards, Taxonomy, Coupons * ============================================================ */ /* === Mega Menu 3-column === */ .hexp-mega-3col{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px 32px; min-width:820px; padding:24px 28px; } .hexp-mega-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-radius:8px; color:var(--hexp-text); font-size:14px; font-weight:500; transition:background .15s ease; white-space:nowrap; } .hexp-mega-item:hover{ background:#f3f4f6; color:var(--hexp-primary); } .hexp-mega-item span:first-child{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; } .hexp-mega-tag{ display:inline-block; padding:3px 8px; border-radius:10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; flex-shrink:0; } .hexp-mega-tag.tag-orange{ background:#FFF4E6; color:#F97316; } .hexp-mega-tag.tag-green{ background:#E8F8EE; color:#16A34A; } .hexp-mega-tag.tag-blue{ background:#E6F0FF; color:#2563EB; } .hexp-mega-tag.tag-red{ background:#FFE6E6; color:#DC2626; } .hexp-mega-tag.tag-purple{ background:#F3E8FF; color:#9333EA; } .hexp-mega-tag.tag-amber{ background:#FEF3C7; color:#D97706; } .hexp-mega-link{ grid-column:1/-1; padding:14px 12px; border-top:1px solid #E5E7EB; margin-top:8px; font-weight:700; color:var(--hexp-primary); display:flex; align-items:center; gap:8px; } .hexp-mega-link i{ transition:transform .2s ease; } .hexp-mega-link:hover i{ transform:translateX(4px); } .hexp-coupon-badge{ display:inline-flex; align-items:center; justify-content:center; background:var(--hexp-orange); color:#fff; min-width:22px; height:22px; padding:0 6px; border-radius:11px; font-size:11px; font-weight:700; margin:0 6px; } /* === Provider Card V2 === */ .hexp-provider-card-v2{ position:relative; background:#fff; border:1px solid #E5E7EB; border-radius:16px; padding:24px 28px 20px 28px; margin-bottom:20px; transition:box-shadow .2s ease, transform .2s ease; } .hexp-provider-card-v2:hover{ box-shadow:0 12px 32px rgba(15,23,42,.08); transform:translateY(-2px); } .hexp-flag-badge{ position:absolute; top:0; left:24px; transform:translateY(-50%); display:flex; align-items:center; gap:6px; padding:6px 14px 6px 12px; border-radius:0 0 4px 0; color:#fff; font-weight:700; font-size:13px; clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); background:var(--hexp-orange); padding-right:24px; box-shadow:0 4px 12px rgba(0,0,0,.12); } .hexp-flag-badge.flag-best{ background:#F97316; } .hexp-flag-badge.flag-european{ background:#0891B2; } .hexp-flag-badge.flag-popular{ background:#16A34A; } .hexp-flag-badge.flag-wordpress{ background:#7C3AED; } .hexp-flag-badge.flag-budget{ background:#DC2626; } .hexp-flag-badge.flag-vps{ background:#1E3A8A; } .hexp-flag-badge.flag-choice{ background:#059669; } .hexp-flag-badge .flag-num{ background:rgba(255,255,255,.25); border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; } .hexp-rank-only{ position:absolute; top:0; left:24px; transform:translateY(-50%); background:#1A2847; color:#fff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; } .hexp-pcv2-grid{ display:grid; grid-template-columns:140px 1fr 200px 220px; gap:24px; align-items:center; padding-top:8px; } .hexp-pcv2-logo{ display:flex; align-items:center; justify-content:center; min-height:80px; } .hexp-pcv2-logo-link{ display:flex; align-items:center; justify-content:center; width:100%; min-height:80px; text-decoration:none; transition:opacity .2s ease, transform .2s ease; border-radius:8px; padding:4px; } .hexp-pcv2-logo-link:hover{ opacity:.85; transform:translateY(-1px); } .hexp-pcv2-logo-link:focus-visible{ outline:2px solid var(--hexp-primary); outline-offset:2px; } .hexp-pcv2-logo .logo-placeholder{ font-size:24px; font-weight:800; text-align:center; line-height:1.2; display:inline-block; } .hexp-pcv2-logo img{ max-width:100%; max-height:80px; object-fit:contain; } .hexp-pcv2-features{ font-size:14px; color:var(--hexp-text); line-height:1.6; } .hexp-hot-deal{ display:inline-flex; align-items:center; gap:6px; margin-bottom:10px; color:#DC2626; font-weight:700; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; transition:border-color .15s ease; } .hexp-hot-deal:hover{ border-bottom-color:#DC2626; color:#DC2626; } .hexp-hot-deal .hot-deal-icon{ font-size:16px; } .hexp-feature-row{ display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; } .hexp-feature-row i{ color:#16A34A; font-size:13px; margin-top:4px; flex-shrink:0; } .hexp-pcv2-rating{ text-align:center; } .rating-label-text{ font-size:11px; font-weight:700; color:#16A34A; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; } .rating-trophy-row{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:4px; } .rating-trophy-row .trophy{ font-size:20px; } .rating-score-big{ font-size:34px; font-weight:800; color:#1A2847; line-height:1; } .rating-stars-row{ color:#F97316; font-size:14px; margin-bottom:6px; letter-spacing:1px; } .rating-review-link{ display:block; font-size:13px; font-weight:600; color:var(--hexp-primary); margin-bottom:4px; } .rating-reviews-count{ font-size:12px; color:#6B7280; } .hexp-pcv2-cta{ text-align:center; } .cta-price{ font-size:22px; font-weight:800; color:#1A2847; margin-bottom:8px; } .cta-price .price-period{ font-size:13px; font-weight:500; color:#6B7280; } .hexp-btn-visit-v2{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--hexp-primary); color:#fff; padding:12px 18px; border-radius:10px; font-weight:700; font-size:14px; text-decoration:none; width:100%; transition:background .15s ease; } .hexp-btn-visit-v2:hover{ background:#1d4ed8; color:#fff; } /* Get Coupons + hover tooltip */ .hexp-get-coupons-wrap{ position:relative; margin-top:8px; } .hexp-get-coupons-trigger{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; background:#fff; color:#16A34A; border:1px solid #16A34A; padding:9px 14px; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; transition:background .15s ease; } .hexp-get-coupons-trigger:hover{ background:#F0FDF4; } .get-coupons-count{ background:#16A34A; color:#fff; padding:2px 7px; border-radius:10px; font-size:11px; font-weight:700; } .hexp-coupons-tooltip{ position:absolute; top:50%; right:calc(100% + 12px); transform:translateY(-50%); background:#fff; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.15); padding:12px; width:380px; z-index:100; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; max-height:380px; overflow-y:auto; } .hexp-get-coupons-wrap:hover .hexp-coupons-tooltip{ opacity:1; visibility:visible; } .hexp-tooltip-coupon{ display:flex; gap:10px; padding:10px; border-radius:8px; cursor:pointer; transition:background .15s ease; } .hexp-tooltip-coupon:hover{ background:#F9FAFB; } .hexp-tooltip-coupon i{ color:#F97316; font-size:18px; flex-shrink:0; margin-top:2px; } .hexp-tooltip-coupon-title{ font-weight:700; color:#1A2847; font-size:13px; margin-bottom:3px; line-height:1.3; } .hexp-tooltip-coupon-desc{ color:#6B7280; font-size:12px; line-height:1.4; } /* Show All Plans toggle */ .hexp-plans-toggle{ margin-top:16px; border-top:1px solid #E5E7EB; padding-top:14px; } .hexp-toggle-btn{ display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--hexp-primary); font-weight:700; font-size:13px; cursor:pointer; } .hexp-toggle-btn i{ transition:transform .2s ease; } .hexp-toggle-btn.expanded i{ transform:rotate(180deg); } .hexp-toggle-btn .toggle-text-hide{ display:none; } .hexp-toggle-btn.expanded .toggle-text-show{ display:none; } .hexp-toggle-btn.expanded .toggle-text-hide{ display:inline; } .hexp-plans-detail{ display:none; margin-top:12px; } .hexp-plans-detail.visible{ display:block; } .hexp-plans-table-inline{ width:100%; border-collapse:collapse; font-size:13px; } .hexp-plans-table-inline th{ background:#F9FAFB; padding:10px 12px; text-align:left; font-size:11px; text-transform:uppercase; color:#6B7280; font-weight:700; } .hexp-plans-table-inline td{ padding:10px 12px; border-top:1px solid #E5E7EB; } .hexp-plans-table-inline .plan-name a{ font-weight:700; color:#1A2847; } .hexp-plans-table-inline .plan-price{ font-weight:700; color:#1A2847; } .view-plan-btn{ display:inline-block; background:var(--hexp-primary); color:#fff; padding:6px 12px; border-radius:6px; font-size:12px; font-weight:700; text-decoration:none; } /* === Taxonomy Page === */ .hexp-tax-hero{ background:linear-gradient(135deg, #1A2847 0%, #2B3F6E 100%); color:#fff; padding:18px 0 12px 0; position:relative; } .hexp-tax-breadcrumb{ display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.8); margin-bottom:10px; } .hexp-tax-breadcrumb a{ color:rgba(255,255,255,.8); } .hexp-tax-breadcrumb a:hover{ color:#fff; } .hexp-tax-meta{ margin-left:auto; display:flex; gap:16px; font-size:13px; } .hexp-tax-updated{ font-size:13px; opacity:.8; margin-bottom:4px; } .hexp-tax-hero h1{ font-size:32px; font-weight:800; margin:0 0 6px; color:#fff; line-height:1.15; } .hexp-tax-hero p{ font-size:15px; max-width:880px; opacity:.9; line-height:1.55; margin:0; } .hexp-podium-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; position:relative; margin-top:6px; transform:translateY(50%); z-index:5; align-items:end; } .hexp-podium-row.hexp-podium-count-2{ grid-template-columns:repeat(2, minmax(0, 380px)); justify-content:center; } .hexp-podium-row.hexp-podium-count-1{ grid-template-columns:minmax(0, 420px); justify-content:center; } .hexp-podium-card{ background:#fff; border-radius:14px; padding:14px 14px 14px; text-align:center; box-shadow:0 12px 32px rgba(0,0,0,.16); position:relative; min-height:140px; display:flex; flex-direction:column; align-items:center; gap:6px; } .hexp-podium-card.podium-1{ transform:translateY(-22px); padding-top:24px; box-shadow:0 16px 40px rgba(0,0,0,.20); min-height:160px; } .podium-expert-tag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#16A34A; color:#fff; padding:5px 14px; border-radius:14px; font-size:12px; font-weight:700; white-space:nowrap; } /* Rank pill — top LEFT, light cream/amber square (matches HostAdvice) */ .podium-rank-circle{ position:absolute; top:10px; left:10px; background:#1A2847; color:#fff; min-width:26px; height:24px; padding:0 8px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; line-height:1; } .podium-logo{ height:50px; display:flex; align-items:center; justify-content:center; margin:6px 0 10px; } .podium-logo img{ max-height:42px; max-width:80%; object-fit:contain; } .podium-rating-row{ display:flex; align-items:center; justify-content:center; gap:5px; margin-bottom:8px; font-size:16px; } .podium-stars{ color:#F97316; letter-spacing:1px; font-size:13px; } .podium-score{ font-weight:800; color:#1A2847; font-size:18px; } .podium-feature{ font-size:12.5px; color:#6B7280; margin-bottom:10px; } .podium-feature i{ color:#16A34A; margin-right:3px; } .podium-visit{ display:block; padding:9px 10px; border:1.5px solid var(--hexp-primary); background:#fff; color:var(--hexp-primary); border-radius:8px; font-weight:700; font-size:13.5px; text-decoration:none; transition:all .15s ease; } .podium-visit:hover{ background:var(--hexp-primary); color:#fff; } /* Center card (Expert's Choice / #1) gets a filled button */ .hexp-podium-card.podium-1 .podium-visit{ background:var(--hexp-primary); color:#fff; } .hexp-podium-card.podium-1 .podium-visit:hover{ background:#1d4ed8; } .hexp-tax-filters{ background:#fff; border-bottom:1px solid #E5E7EB; padding:95px 0 0 0; /* clearance for podium overlap (~80px card extends) */ } .hexp-tax-filters-inner{ display:flex; align-items:center; gap:16px; padding-top:24px; padding-bottom:0; } /* v3.7.124 — Tabs scroll horizontally with prev/next arrow buttons. Replaces v3.7.123's mask-image approach (which was laggy on Chrome with many tabs and didn't communicate "scroll me" loudly enough on laptops without trackpads). The new system has three layers: 1. The original tab row (.hexp-filter-tabs-h) — single-line scroll 2. A wrapper inserted at runtime by main.js (.hexp-tabs-wrap) that provides the positioning context for the controls 3. Two circular arrow buttons (.hexp-tab-arrow-prev/.hexp-tab-arrow-next) and two soft gradient overlays — both managed by JS based on the row's current scroll position. Buttons hide when there's nothing to scroll in that direction. Key change vs v3.7.123: - Dropped wheel hijack — it was hijacking page scroll on laptop trackpads, which felt jumpy and broken. Native trackpad horizontal pan works fine on its own; arrows are the fallback for mouse users. - Dropped mask-image — replaced with absolutely-positioned gradient overlays for cleaner paint behavior on large content. */ .hexp-filter-tabs-h{ display:flex; gap:4px; flex-wrap:nowrap; flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scrollbar-width:none; /* Firefox */ -ms-overflow-style:none; /* IE/Edge legacy */ -webkit-overflow-scrolling:touch; /* iOS momentum */ scroll-snap-type:x proximity; padding:0 4px; } .hexp-filter-tabs-h::-webkit-scrollbar{ display:none; } /* When JS detects overflow, expand horizontal padding so the arrow buttons (which sit absolutely positioned at left:4px / right:4px in the wrapper) have empty space to live in instead of overlapping the first/last tab text. The padding scrolls WITH the content, so as the user scrolls past the start, the leading edge tab can come fully into view — the empty space rolls out of sight. scroll-padding hints to the snap algorithm that the visible scrollport is narrower by the button width, so snap-align:start lands at the right place. */ .hexp-filter-tabs-h.is-overflow{ cursor:grab; padding-left:44px; padding-right:44px; scroll-padding-left:44px; scroll-padding-right:44px; } .hexp-filter-tabs-h.is-grabbing{ cursor:grabbing; scroll-behavior:auto; } .hexp-filter-tabs-h.is-grabbing .hexp-filter-tab-h{ pointer-events:none; user-select:none; } .hexp-filter-tab-h{ padding:12px 16px; color:#6B7280; font-weight:600; font-size:14px; border-bottom:3px solid transparent; white-space:nowrap; transition:color .15s ease, border-color .15s ease, background .15s ease; text-decoration:none; display:inline-flex; align-items:center; gap:6px; border-radius:8px 8px 0 0; flex:0 0 auto; scroll-snap-align:start; } .hexp-filter-tab-h:hover{ color:var(--hexp-primary); background:#F9FAFB; } .hexp-filter-tab-h.active{ color:var(--hexp-primary); border-bottom-color:var(--hexp-primary); } .hexp-filter-tab-h .tab-count{ font-size:11px; font-weight:700; padding:1px 7px; border-radius:10px; background:#F3F4F6; color:#6B7280; } .hexp-filter-tab-h.active .tab-count, .hexp-filter-tab-h:hover .tab-count{ background:#DBEAFE; color:var(--hexp-primary); } .hexp-advanced-filters-btn{ background:#fff; border:1px solid #D1D5DB; color:#374151; padding:10px 18px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all .2s ease; font-family:inherit; position:relative; white-space:nowrap; } .hexp-advanced-filters-btn:hover{ border-color:var(--hexp-primary); color:var(--hexp-primary); } .hexp-advanced-filters-btn[aria-expanded="true"]{ background:var(--hexp-navy); color:#fff; border-color:var(--hexp-navy); } .hexp-adv-active-count{ display:none; background:var(--hexp-primary); color:#fff; min-width:20px; height:20px; padding:0 6px; border-radius:10px; font-size:11px; font-weight:800; align-items:center; justify-content:center; line-height:1; } .hexp-adv-active-count.has-count{ display:inline-flex; } .hexp-advanced-filters-btn[aria-expanded="true"] .hexp-adv-active-count{ background:#fff; color:var(--hexp-navy); } /* Advanced filters slide-down panel */ .hexp-adv-panel{ background:#FAFBFC; max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .25s ease, border-top-width .35s ease; border-top:0 solid #E5E7EB; } .hexp-adv-panel.is-open{ max-height:700px; opacity:1; border-top-width:1px; } .hexp-adv-panel .hexp-container{ padding-top:28px; padding-bottom:24px; } .hexp-adv-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; margin-bottom:20px; } .hexp-adv-group h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:1.2px; font-weight:800; color:#1A2847; margin:0 0 14px; } .hexp-adv-options{ display:flex; flex-direction:column; gap:4px; } .hexp-adv-options-scroll{ max-height:160px; overflow-y:auto; padding-right:6px; } .hexp-adv-radio, .hexp-adv-check{ display:flex; align-items:center; gap:10px; font-size:14px; color:#374151; cursor:pointer; padding:7px 10px; margin:0 -10px; border-radius:8px; transition:background .15s ease; user-select:none; } .hexp-adv-radio:hover, .hexp-adv-check:hover{ background:#fff; color:#1A2847; } .hexp-adv-radio:has(input:checked), .hexp-adv-check:has(input:checked){ background:#EFF4FF; color:var(--hexp-primary); font-weight:600; } .hexp-adv-radio input, .hexp-adv-check input{ accent-color:var(--hexp-primary); width:15px; height:15px; flex:0 0 auto; cursor:pointer; } .hexp-adv-sort{ width:100%; padding:10px 32px 10px 14px; border:1px solid #D1D5DB; border-radius:8px; font-size:14px; color:#1A2847; background:#fff; cursor:pointer; font-family:inherit; font-weight:600; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .hexp-adv-sort:hover{ border-color:var(--hexp-primary); } .hexp-adv-sort:focus{ outline:none; border-color:var(--hexp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); } .hexp-adv-results{ margin:14px 0 0; font-size:13px; color:var(--hexp-primary); font-weight:600; } .hexp-adv-empty{ font-size:13px; color:#9CA3AF; margin:6px 0; } .hexp-adv-actions{ display:flex; justify-content:flex-end; gap:10px; border-top:1px solid #E5E7EB; padding-top:18px; } .hexp-adv-clear, .hexp-adv-apply{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:8px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit; transition:all .2s ease; border:1px solid transparent; } .hexp-adv-clear{ background:transparent; color:#6B7280; border-color:#D1D5DB; } .hexp-adv-clear:hover{ background:#fff; color:#1A2847; border-color:#9CA3AF; } .hexp-adv-apply{ background:var(--hexp-primary); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.22); } .hexp-adv-apply:hover{ background:#1d4ed8; transform:translateY(-1px); box-shadow:0 6px 16px rgba(37,99,235,.28); } .hexp-adv-apply i{ transition:transform .2s ease; } .hexp-adv-apply:hover i{ transform:translateX(3px); } /* Loading state for taxonomy providers list */ .hexp-tax-providers{ position:relative; transition:opacity .25s ease; } .hexp-tax-providers.hexp-list-loading{ opacity:.35; filter:blur(.5px); pointer-events:none; } .hexp-tax-providers.hexp-list-loading::before{ content:''; position:absolute; top:60px; left:50%; width:38px; height:38px; margin-left:-19px; border:3px solid var(--hexp-gray-200); border-top-color:var(--hexp-primary); border-radius:50%; animation:hexp-spin .8s linear infinite; z-index:5; opacity:1; filter:none; } @media (max-width:780px){ .hexp-adv-grid{ grid-template-columns:1fr; gap:20px; } .hexp-tax-filters-inner{ flex-direction:column; align-items:stretch; } .hexp-advanced-filters-btn{ justify-content:center; } } html[dir=rtl] .hexp-adv-apply:hover i{ transform:translateX(-3px); } html[dir=rtl] .hexp-adv-sort{ background-position:left 10px center; padding:10px 14px 10px 32px; } .hexp-tax-body{ padding:40px 0 60px 0; background:#FAFBFC; } .hexp-tax-grid{ display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; } .hexp-tax-section-title{ font-size:24px; font-weight:800; color:#1A2847; margin:32px 0 18px; } .hexp-author-card{ background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:14px 18px; display:flex; align-items:center; gap:12px; margin-bottom:24px; flex-wrap:wrap; } .hexp-author-avatar{ background:#F3F4F6; color:#6B7280; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .hexp-author-name{ font-weight:700; color:#1A2847; } .hexp-author-meta{ font-size:13px; color:#6B7280; } .hexp-author-meta .dot{ margin:0 6px; } .hexp-author-share{ display:flex; gap:8px; margin-left:auto; } .hexp-author-share a{ width:32px; height:32px; border-radius:50%; background:#F3F4F6; display:flex; align-items:center; justify-content:center; color:#6B7280; transition:all .15s ease; } .hexp-author-share a:hover{ background:var(--hexp-primary); color:#fff; } .hexp-author-updated{ font-size:12px; color:#6B7280; flex-basis:100%; padding-top:6px; } .hexp-feature-table-wrap{ background:#fff; border:1px solid #E5E7EB; border-radius:12px; overflow:hidden; margin-bottom:32px; } .hexp-feature-table{ width:100%; border-collapse:collapse; } .hexp-feature-table th{ background:#F9FAFB; padding:14px 16px; text-align:left; font-size:12px; text-transform:uppercase; color:#6B7280; font-weight:700; } .hexp-feature-table td{ padding:14px 16px; border-top:1px solid #E5E7EB; vertical-align:middle; } .hexp-feature-table img{ max-height:30px; max-width:100px; object-fit:contain; } .ft-yes{ display:inline-block; background:#E8F8EE; color:#16A34A; padding:3px 10px; border-radius:10px; font-size:12px; font-weight:700; } .ft-visit-btn{ display:inline-block; background:var(--hexp-primary); color:#fff; padding:7px 14px; border-radius:8px; font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; } .hexp-info-section{ margin:32px 0; } .hexp-info-section h2{ font-size:22px; color:#1A2847; margin-bottom:12px; } .hexp-info-section ul{ padding-left:20px; } .hexp-info-section ul li{ margin-bottom:8px; line-height:1.6; } /* Sticky sidebar */ .hexp-tax-sidebar{ position:sticky; top:80px; } .hexp-sidebar-card-v2{ background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:18px; margin-bottom:18px; } .hexp-sidebar-card-v2 h3{ font-size:14px; text-transform:uppercase; color:#6B7280; letter-spacing:.5px; margin-bottom:14px; } .sidebar-top3-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 0; border-bottom:1px solid #F3F4F6; } .sidebar-top3-row:last-child{ border-bottom:none; } .sidebar-top3-row img{ max-height:30px; max-width:100px; object-fit:contain; } .top3-rating{ color:#F97316; font-weight:700; font-size:13px; } .hexp-toc-list{ list-style:none; padding:0; margin:0; } .hexp-toc-list li{ margin-bottom:8px; } .hexp-toc-list a{ display:block; padding:6px 8px; color:#374151; font-size:13px; border-radius:6px; transition:all .15s ease; } .hexp-toc-list a:hover{ background:#F3F4F6; color:var(--hexp-primary); } /* === Coupons Archive === */ .hexp-coupons-archive{ padding:32px 0 60px 0; background:#FAFBFC; min-height:60vh; } .hexp-coupons-grid-layout{ display:grid; grid-template-columns:300px 1fr; gap:24px; align-items:start; } .hexp-coupons-sidebar{ position:sticky; top:80px; } .hexp-coupons-sidebar-inner{ background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:20px; } .hexp-cs-title{ font-size:18px; font-weight:800; color:#1A2847; margin-bottom:12px; line-height:1.3; } .hexp-cs-subtitle{ font-size:13px; color:#374151; line-height:1.5; margin-bottom:18px; } .hexp-cs-subtitle .green{ color:#16A34A; font-weight:800; } .hexp-cs-show, .hexp-cs-coupon-type{ margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #F3F4F6; } .hexp-cs-label{ font-size:13px; font-weight:700; color:#1A2847; margin-bottom:10px; } .hexp-cs-radio{ display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; font-size:13px; } .hexp-cs-radio input{ accent-color:#16A34A; } .hexp-cs-select{ width:100%; padding:9px 12px; border:1px solid #D1D5DB; border-radius:8px; font-size:13px; background:#fff; } .hexp-cs-stats{ margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #F3F4F6; } .hexp-cs-stat-row{ display:flex; align-items:center; gap:8px; padding:8px 0; font-size:13px; } .hexp-cs-stat-icon{ color:#16A34A; } .hexp-cs-stat-label{ color:#374151; flex:1; } .hexp-cs-stat-val{ font-weight:800; color:#1A2847; } .hexp-cs-users-card{ background:linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%); border-radius:10px; padding:14px; text-align:center; } .hexp-cs-users-icon{ width:36px; height:36px; border-radius:50%; background:#16A34A; color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 6px; } .hexp-cs-users-num{ font-size:24px; font-weight:800; color:#16A34A; } .hexp-cs-users-label{ font-size:11px; color:#374151; line-height:1.4; } /* Top Pick / Coupon row card */ .hexp-toppick-card{ background:#fff; border:1px solid #E5E7EB; border-radius:14px; margin-bottom:16px; overflow:hidden; } .hexp-toppick-header{ background:#16A34A; color:#fff; padding:10px 18px; } .hexp-coupon-row .hexp-toppick-header{ background:#1A2847; } .hexp-toppick-rank{ font-weight:800; font-size:14px; } .hexp-toppick-body{ display:grid; grid-template-columns:140px 1fr 220px; gap:20px; padding:20px; align-items:center; } .hexp-toppick-left{ text-align:center; } .hexp-toppick-left img{ max-height:50px; max-width:100%; object-fit:contain; } .hexp-tp-used{ font-size:11px; color:#6B7280; margin-top:8px; line-height:1.3; } .hexp-toppick-center h2{ font-size:17px; font-weight:700; color:#1A2847; margin-bottom:10px; line-height:1.3; } .hexp-tp-badges{ display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; } .hexp-tp-badge{ display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:10px; font-size:11px; font-weight:700; } .hexp-tp-badge.tp-badge-orange{ background:#FFF4E6; color:#F97316; } .hexp-tp-badge.tp-badge-green{ background:#E8F8EE; color:#16A34A; } .hexp-tp-tried{ font-size:12px; color:#6B7280; margin-bottom:10px; } .hexp-tp-vote{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .vote-q{ font-size:13px; color:#374151; font-weight:600; } .hexp-vote-btn{ display:inline-flex; align-items:center; gap:6px; background:#F9FAFB; border:1px solid #E5E7EB; padding:6px 12px; border-radius:8px; cursor:pointer; font-size:12px; transition:all .15s ease; } .hexp-vote-btn.vote-up:hover, .hexp-vote-btn.vote-up.voted{ background:#E8F8EE; border-color:#16A34A; color:#16A34A; } .hexp-vote-btn.vote-down:hover, .hexp-vote-btn.vote-down.voted{ background:#FEE2E2; border-color:#DC2626; color:#DC2626; } .hexp-toppick-right{ text-align:center; } .hexp-tp-discount{ font-size:34px; font-weight:800; color:#16A34A; line-height:1; margin-bottom:8px; } .hexp-tp-show-code, .hexp-tp-show-deal{ display:flex; align-items:center; justify-content:center; gap:6px; background:linear-gradient(90deg, #F97316 0%, #2563EB 100%); color:#fff; padding:11px 18px; border-radius:10px; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; border:none; width:100%; margin-bottom:10px; } .hexp-tp-show-code:hover, .hexp-tp-show-deal:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.12); color:#fff; } .hexp-tp-countdown{ display:flex; align-items:center; justify-content:center; gap:4px; font-weight:800; } .hexp-tp-countdown .cd-h, .hexp-tp-countdown .cd-m, .hexp-tp-countdown .cd-s{ background:#FEE2E2; color:#DC2626; padding:6px 8px; border-radius:6px; min-width:36px; text-align:center; } .hexp-tp-countdown .cd-sep{ color:#DC2626; font-size:11px; } .hexp-show-more-btn{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:10px; background:#F9FAFB; border:none; border-top:1px solid #E5E7EB; color:var(--hexp-primary); font-weight:600; font-size:13px; cursor:pointer; } .hexp-show-more-btn i{ transition:transform .2s ease; } .hexp-show-more-btn.expanded i{ transform:rotate(180deg); } .hexp-show-more-btn .hide-text{ display:none; } .hexp-show-more-btn.expanded .show-text{ display:none; } .hexp-show-more-btn.expanded .hide-text{ display:inline; } .hexp-tp-more{ display:none; padding:18px; border-top:1px solid #E5E7EB; color:#374151; line-height:1.6; } .hexp-tp-more.visible{ display:block; } /* Recommended 3 cards */ .hexp-rec-title{ font-size:22px; font-weight:800; color:#1A2847; margin:32px 0 16px; } .hexp-rec-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:32px; } .hexp-rec-card{ background:#fff; border:1px solid #E5E7EB; border-radius:12px; overflow:hidden; } .hexp-rec-header{ padding:10px 14px; color:#fff; font-weight:700; font-size:13px; text-align:center; } .hexp-rec-header.rec-blue{ background:#2563EB; } .hexp-rec-header.rec-orange{ background:#F97316; } .hexp-rec-header.rec-green{ background:#16A34A; } .hexp-rec-body{ padding:18px; text-align:center; } .hexp-rec-logo{ height:60px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; } .hexp-rec-logo img{ max-height:50px; object-fit:contain; } .hexp-rec-deal{ display:flex; align-items:center; justify-content:center; gap:6px; color:#374151; font-size:13px; line-height:1.4; margin-bottom:14px; min-height:42px; } .hexp-rec-deal i{ color:#F97316; flex-shrink:0; } .hexp-rec-visit{ display:flex; align-items:center; justify-content:center; gap:6px; background:var(--hexp-primary); color:#fff; padding:9px 14px; border-radius:8px; font-weight:700; font-size:13px; text-decoration:none; margin-bottom:10px; } .hexp-rec-visit:hover{ background:#1d4ed8; color:#fff; } .hexp-rec-available{ display:flex; align-items:center; justify-content:center; gap:6px; color:#16A34A; font-weight:700; font-size:13px; text-decoration:none; } .hexp-rec-available .count{ background:#16A34A; color:#fff; padding:2px 7px; border-radius:10px; font-size:11px; font-weight:700; } /* === Single Coupon Page === */ .hexp-single-coupon-page{ padding:48px 0 60px 0; background:#FAFBFC; min-height:60vh; } .hexp-coupon-hero-card{ background:#fff; border:1px solid #E5E7EB; border-radius:18px; padding:48px; max-width:700px; margin:0 auto; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.06); } .hexp-cs-verified-pill{ display:inline-block; background:#F97316; color:#fff; padding:6px 18px; border-radius:14px; font-size:11px; font-weight:800; letter-spacing:1px; margin-bottom:16px; } .hexp-coupon-hero-card .hexp-cs-company{ font-size:24px; font-weight:800; color:#1A2847; margin-bottom:14px; } .hexp-coupon-hero-card .hexp-cs-title{ font-size:22px; font-weight:600; color:#1A2847; margin-bottom:32px; line-height:1.3; } .hexp-cs-discount-big{ font-size:72px; font-weight:800; color:#16A34A; line-height:1; margin-bottom:32px; } .hexp-cs-description{ font-size:15px; color:#6B7280; line-height:1.6; max-width:480px; margin:0 auto 28px; } .hexp-cs-actions{ display:flex; flex-direction:column; gap:14px; align-items:center; margin-bottom:24px; } .hexp-cs-reveal-btn{ display:flex; align-items:center; justify-content:center; gap:8px; background:#F97316; color:#fff; padding:14px 36px; border-radius:30px; border:none; cursor:pointer; font-weight:800; font-size:15px; min-width:280px; box-shadow:0 4px 12px rgba(249,115,22,.25); transition:all .15s ease; } .hexp-cs-reveal-btn:hover{ background:#ea580c; transform:translateY(-1px); } .hexp-cs-reveal-btn.revealed{ background:#16A34A; box-shadow:0 4px 12px rgba(22,163,74,.25); } .hexp-cs-reveal-btn .revealed-code{ display:flex; align-items:center; gap:8px; font-weight:800; } .hexp-cs-reveal-btn .code-display{ background:rgba(255,255,255,.2); padding:3px 10px; border-radius:8px; } .hexp-cs-visit-btn{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--hexp-primary); color:#fff; padding:14px 36px; border-radius:30px; font-weight:800; font-size:15px; text-decoration:none; min-width:280px; box-shadow:0 4px 12px rgba(37,99,235,.25); transition:all .15s ease; } .hexp-cs-visit-btn:hover{ background:#1d4ed8; transform:translateY(-1px); color:#fff; } .hexp-cs-footer{ display:flex; align-items:center; justify-content:center; gap:28px; padding-top:20px; border-top:1px solid #F3F4F6; font-size:13px; color:#6B7280; } .hexp-cs-foot-stat{ display:flex; align-items:center; gap:6px; } .hexp-cs-fire{ font-size:14px; } .hexp-cs-related{ max-width:900px; margin:48px auto 0; } .hexp-cs-related h2{ font-size:22px; color:#1A2847; margin-bottom:18px; text-align:center; } .hexp-cs-related-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; } .hexp-cs-related-item{ background:#fff; border:1px solid #E5E7EB; border-radius:10px; padding:14px 18px; text-decoration:none; display:flex; gap:14px; align-items:center; transition:all .15s ease; } .hexp-cs-related-item:hover{ border-color:var(--hexp-primary); transform:translateY(-1px); } .rel-discount{ background:#16A34A; color:#fff; padding:5px 12px; border-radius:8px; font-weight:800; font-size:13px; flex-shrink:0; } .rel-title{ font-size:13px; color:#1A2847; line-height:1.4; } /* === Toast === */ .hexp-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px); background:#16A34A; color:#fff; padding:14px 24px; border-radius:10px; font-weight:600; font-size:14px; z-index:10000; opacity:0; transition:all .3s ease; pointer-events:none; box-shadow:0 12px 32px rgba(0,0,0,.2); } .hexp-toast.visible{ opacity:1; transform:translateX(-50%) translateY(0); } /* === Modal === */ .hexp-modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.6); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; visibility:hidden; transition:all .25s ease; padding:20px; } .hexp-modal-overlay.visible{ opacity:1; visibility:visible; } .hexp-modal-box{ background:#fff; border-radius:16px; padding:28px; max-width:520px; width:100%; max-height:80vh; overflow-y:auto; position:relative; } .hexp-modal-close{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:none; background:#F3F4F6; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; } .hexp-modal-title{ font-size:20px; color:#1A2847; margin-bottom:16px; padding-right:32px; } /* === Mobile Responsiveness === */ @media (max-width: 1024px){ .hexp-mega-3col{ min-width:auto; grid-template-columns:1fr 1fr; } .hexp-pcv2-grid{ grid-template-columns:120px 1fr 180px; } .hexp-pcv2-cta{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:10px; } .hexp-tax-grid{ grid-template-columns:1fr; } .hexp-tax-sidebar{ position:static; } .hexp-coupons-grid-layout{ grid-template-columns:1fr; } .hexp-coupons-sidebar{ position:static; } .hexp-rec-grid{ grid-template-columns:1fr; } .hexp-toppick-body{ grid-template-columns:1fr; text-align:center; } } @media (max-width: 768px){ .hexp-pcv2-grid{ grid-template-columns:1fr; gap:14px; } .hexp-pcv2-cta{ grid-template-columns:1fr; } .hexp-coupons-tooltip{ position:fixed; left:10px; right:10px; width:auto; top:auto; bottom:80px; transform:none; } .hexp-podium-row{ grid-template-columns:1fr; transform:none; margin-top:24px; } .hexp-podium-card.podium-1{ transform:none; } .hexp-tax-filters{ padding-top:24px; } .hexp-tax-hero h1{ font-size:26px; } .hexp-cs-discount-big{ font-size:54px; } .hexp-coupon-hero-card{ padding:28px 18px; } .hexp-cs-related-grid{ grid-template-columns:1fr; } } /* RTL adjustments */ html[dir=rtl] .hexp-flag-badge{ left:auto; right:24px; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); padding-left:24px; padding-right:12px; } html[dir=rtl] .hexp-rank-only{ left:auto; right:24px; } html[dir=rtl] .hexp-coupons-tooltip{ right:auto; left:calc(100% + 12px); } html[dir=rtl] .hexp-tax-meta{ margin-left:0; margin-right:auto; } html[dir=rtl] .hexp-author-share{ margin-left:0; margin-right:auto; } html[dir=rtl] .hexp-mega-link i{ transform:scaleX(-1); } html[dir=rtl] .hexp-mega-link:hover i{ transform:scaleX(-1) translateX(4px); } html[dir=rtl] .hexp-feature-table th, html[dir=rtl] .hexp-plans-table-inline th{ text-align:right; } /* ============================================================ * V2.1: Coupon Reveal Modal (HostAdvice-style) * ============================================================ */ .hexp-cmodal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.65); display:flex; align-items:center; justify-content:center; z-index:99999; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; padding:20px; overflow-y:auto; } .hexp-cmodal-overlay.visible{ opacity:1; visibility:visible; } .hexp-cmodal-box{ background:#fff; border-radius:18px; padding:36px 40px; max-width:560px; width:100%; max-height:90vh; overflow-y:auto; position:relative; text-align:center; box-shadow:0 24px 64px rgba(0,0,0,.25); margin:auto; } .hexp-cmodal-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background:#F3F4F6; cursor:pointer; font-size:22px; display:flex; align-items:center; justify-content:center; color:#6B7280; } .hexp-cmodal-close:hover{ background:#E5E7EB; } .hexp-cmodal-logo{ display:flex; align-items:center; justify-content:center; height:60px; margin-bottom:18px; } .hexp-cmodal-logo img{ max-height:50px; max-width:200px; object-fit:contain; } .hexp-cmodal-title{ font-size:22px; color:#1A2847; font-weight:800; line-height:1.3; margin-bottom:18px; padding:0 10px; } .hexp-cmodal-paste{ color:#6B7280; font-size:14px; margin-bottom:14px; } .hexp-cmodal-paste .paste-company{ color:var(--hexp-primary); font-weight:700; } .hexp-cmodal-code-box{ display:flex; align-items:center; gap:10px; border:2px dashed #2563EB; border-radius:12px; padding:14px 18px; margin:0 auto 20px; max-width:420px; background:#F8FAFF; } .hexp-cmodal-code-box .cmodal-ticket{ color:#1A2847; font-size:18px; } .hexp-cmodal-code-box .cmodal-code{ font-family:'Courier New', monospace; font-size:16px; font-weight:800; color:#1A2847; flex:1; text-align:left; letter-spacing:1px; } .cmodal-copy-btn{ background:#E0EAFF; color:#2563EB; border:none; padding:8px 16px; border-radius:8px; font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .15s ease; } .cmodal-copy-btn:hover{ background:#2563EB; color:#fff; } .hexp-cmodal-redeem{ display:flex; align-items:center; justify-content:center; gap:10px; background:var(--hexp-primary); color:#fff; padding:14px 32px; border-radius:30px; font-weight:800; font-size:15px; text-decoration:none; max-width:360px; margin:0 auto 20px; box-shadow:0 4px 14px rgba(37,99,235,.3); transition:all .15s ease; } .hexp-cmodal-redeem:hover{ background:#1d4ed8; color:#fff; transform:translateY(-1px); } .hexp-cmodal-vote{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid #F3F4F6; font-size:14px; color:#374151; } .hexp-cmodal-vote .hexp-vote-btn{ width:auto; height:auto; padding:8px 16px; border-radius:20px; background:#F9FAFB; border:1px solid #E5E7EB; display:inline-flex; align-items:center; gap:6px; font-size:13px; } .hexp-cmodal-details{ text-align:left; } .hexp-cmodal-details h3{ font-size:15px; color:#1A2847; font-weight:700; margin-bottom:10px; } .hexp-cmodal-details .cmodal-description{ font-size:14px; color:#4B5563; line-height:1.6; margin-bottom:14px; } .cmodal-meta{ display:flex; gap:18px; font-size:13px; color:#6B7280; flex-wrap:wrap; } .cmodal-meta span{ display:flex; align-items:center; gap:6px; } /* ============================================================ * V2.1: Mega menu polish (compact items + tag align) * ============================================================ */ .hexp-mega-3col{ min-width:820px; } .hexp-mega-item{ display:flex; align-items:center; gap:10px; padding:11px 14px; min-height:44px; } .hexp-mega-item > span:first-child{ flex:1; line-height:1.4; font-size:13px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .hexp-mega-tag{ flex-shrink:0; align-self:center; white-space:nowrap; max-width:fit-content; } /* Search overlay refinement */ .hexp-search-overlay.active{ display:block; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid #E5E7EB; padding:18px 24px; z-index:1000; box-shadow:0 8px 20px rgba(0,0,0,.08); } .hexp-search-form{ display:flex; align-items:center; gap:12px; max-width:800px; margin:0 auto; } .hexp-search-form input[type="search"]{ flex:1; padding:14px 18px; border:2px solid #E5E7EB; border-radius:10px; font-size:15px; outline:none; transition:border-color .15s ease; } .hexp-search-form input[type="search"]:focus{ border-color:var(--hexp-primary); } .hexp-search-form button[type="submit"]{ background:var(--hexp-primary); color:#fff; border:none; padding:14px 24px; border-radius:10px; cursor:pointer; font-size:16px; } .hexp-search-close{ background:#F3F4F6; border:none; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:24px; color:#6B7280; } .hexp-search-close:hover{ background:#E5E7EB; } /* RTL */ html[dir=rtl] .hexp-cmodal-close{ left:14px; right:auto; } html[dir=rtl] .hexp-cmodal-code-box .cmodal-code{ text-align:right; } /* Monthly Pick logo styling */ .hexp-monthly-pick{ max-width:none; /* allow content to define width */ overflow:visible; } .hexp-monthly-pick .pick-logo-wrap{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--hexp-gray-200); border-radius:var(--hexp-radius-full); padding:4px 12px; height:32px; min-width:90px; max-width:160px; overflow:hidden; } .hexp-monthly-pick .pick-logo-img{ max-height:22px; max-width:100%; width:auto; height:auto; object-fit:contain; display:block; } .hexp-monthly-pick .pick-brand{ font-weight:800; color:#1A2847; white-space:nowrap; font-size:13px; } /* ============================================================ * V2.2: Show More on provider cards + tooltip position fix * ============================================================ */ /* Show More toggle */ .hexp-pcv2-show-more{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:12px; background:#F9FAFB; border:none; border-top:1px solid #E5E7EB; border-radius:0 0 16px 16px; color:var(--hexp-primary); font-weight:700; font-size:13px; cursor:pointer; margin-top:16px; } .hexp-pcv2-show-more:hover{ background:#F3F4F6; } .hexp-pcv2-show-more i{ transition:transform .2s ease; } .hexp-pcv2-show-more.expanded i{ transform:rotate(180deg); } .hexp-pcv2-show-more .more-hide{ display:none; } .hexp-pcv2-show-more.expanded .more-show{ display:none; } .hexp-pcv2-show-more.expanded .more-hide{ display:inline; } .hexp-pcv2-more{ display:none; padding:24px 4px 8px; } .hexp-pcv2-more.visible{ display:block; } .pcv2-more-desc{ font-size:14px; color:#374151; line-height:1.7; margin-bottom:18px; } .pcv2-procons{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:18px; } .pcv2-pros h4, .pcv2-cons h4{ font-size:14px; margin-bottom:10px; display:flex; align-items:center; gap:8px; font-weight:700; } .pcv2-pros h4{ color:#16A34A; } .pcv2-cons h4{ color:#DC2626; } .pcv2-pros ul, .pcv2-cons ul{ list-style:none; padding:0; margin:0; } .pcv2-pros li, .pcv2-cons li{ position:relative; padding-left:18px; font-size:13px; color:#374151; line-height:1.6; margin-bottom:6px; } .pcv2-pros li:before{ content:"✓"; position:absolute; left:0; color:#16A34A; font-weight:700; } .pcv2-cons li:before{ content:"✗"; position:absolute; left:0; color:#DC2626; font-weight:700; } html[dir=rtl] .pcv2-pros li, html[dir=rtl] .pcv2-cons li{ padding-left:0; padding-right:18px; } html[dir=rtl] .pcv2-pros li:before, html[dir=rtl] .pcv2-cons li:before{ left:auto; right:0; } .pcv2-read-full-review{ display:inline-flex; align-items:center; gap:6px; color:var(--hexp-primary); font-weight:700; font-size:13px; text-decoration:none; } .pcv2-read-full-review:hover{ text-decoration:underline; } .pcv2-read-full-review i{ transition:transform .2s ease; } .pcv2-read-full-review:hover i{ transform:translateX(3px); } /* Provider card padding adjustment for show-more button */ .hexp-provider-card-v2{ padding:24px 28px 0 28px; } .hexp-pcv2-more{ padding:20px 0 12px 0; } /* === FIX: Tooltip position — appear ABOVE the button (not to the side) === */ .hexp-coupons-tooltip{ top:auto !important; right:auto !important; left:50% !important; bottom:calc(100% + 10px) !important; transform:translateX(-50%) !important; width:380px; } /* Arrow pointing down from tooltip to button */ .hexp-coupons-tooltip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #fff; filter:drop-shadow(0 2px 2px rgba(0,0,0,.05)); } @media (max-width:768px){ .hexp-coupons-tooltip{ position:fixed !important; bottom:auto !important; top:50% !important; left:50% !important; transform:translate(-50%, -50%) !important; width:90% !important; max-width:380px; } .hexp-coupons-tooltip::after{ display:none; } } /* RTL fix */ html[dir=rtl] .hexp-coupons-tooltip{ left:50% !important; right:auto !important; } /* ============================================================ * V2.3: Hero Tabs + Explore Panes * ============================================================ */ /* Hide all panes by default; show active one */ .hexp-explore-pane{ display:none; } .hexp-explore-pane.active{ display:block; animation:hexpFadePane .25s ease; } @keyframes hexpFadePane{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } /* Hero tabs styling */ .hexp-hero-tabs{ display:flex; gap:48px; flex-wrap:wrap; margin:32px 0 0 0; position:relative; } .hexp-hero-tab{ color:rgba(255,255,255,.65); font-weight:700; font-size:18px; cursor:pointer; padding-bottom:12px; position:relative; transition:color .2s ease; user-select:none; } .hexp-hero-tab:hover{ color:rgba(255,255,255,.85); } .hexp-hero-tab.active{ color:#fff; } .hexp-hero-tab.active::after{ content:""; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; background:var(--hexp-primary); box-shadow:0 0 0 4px rgba(37,99,235,.3); } .hexp-hero-progress{ height:3px; background:rgba(255,255,255,.15); border-radius:2px; margin-top:8px; overflow:hidden; max-width:680px; } /* Hero visual — re-enabled with cleaner design. Shows decorative gradient orbs + floating stat cards on the right side of the hero on desktop. Hidden on mobile/tablet to avoid cramping the text. The hero is laid out as a CSS grid (2fr 1fr + 30px gap) that matches the .hexp-explore-grid below, so the visual column lines up vertically with the smaller card in the next section. */ .hexp-hero-visual{ display:grid; place-items:center; position:relative; width:100%; max-width:340px; margin:0 auto; /* Orbit version overrides height with aspect-ratio. The non-orbit variant (legacy float-cards layout) used a fixed 340px height. */ height:340px; } .hexp-hero-visual.hexp-hero-orbit{ height:auto; aspect-ratio:1 / 1; max-width:380px; } @media (max-width:1023px){ /* Hide the float-cards visual on mobile/tablet but keep the orbit visible — orbit is a major design statement, worth showing. */ .hexp-hero-visual:not(.hexp-hero-orbit){ display:none; } .hexp-hero-visual.hexp-hero-orbit{ max-width:300px; margin-top:24px; } } /* Re-balance hero on desktop with the right visual. The grid is on .hexp-hero-inner (the .hexp-container) since that is the direct parent of .hexp-hero-text and .hexp-hero-visual. */ .hexp-hero-inner{ display:grid; grid-template-columns:2fr 1fr; gap:30px; align-items:center; } .hexp-hero-text, .hexp-hero-content{ min-width:0; } @media (min-width:1024px){ .hexp-hero-tabs{ gap:64px; } } @media (max-width:768px){ .hexp-hero-tabs{ gap:24px; } .hexp-hero-tab{ font-size:14px; } } /* Polish explore card */ .hexp-explore-card{ min-height:280px; } .hexp-cat-pill{ background:#fff; border:1px solid #E5E7EB; padding:10px 18px; border-radius:24px; font-size:14px; color:#374151; font-weight:600; transition:all .15s ease; text-decoration:none; display:inline-block; } .hexp-cat-pill:hover{ border-color:var(--hexp-primary); color:var(--hexp-primary); background:#F8FAFF; transform:translateY(-1px); } /* 2-row grid variant — used for Comparisons pills. Forces a clean 3×2 layout instead of the natural-flow flex wrap that was creating uneven 3+3+2 rows. */ .hexp-category-pills.hexp-pills-2rows{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .hexp-category-pills.hexp-pills-2rows .hexp-cat-pill{ text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:768px){ .hexp-category-pills.hexp-pills-2rows{ grid-template-columns:repeat(2,1fr); } } @media (max-width:480px){ .hexp-category-pills.hexp-pills-2rows{ grid-template-columns:1fr; } } /* ============================================================ * V2.4: Hero compaction + left-align (HostAdvice match) * ============================================================ */ /* Force hero text to LEFT, not center, and make it COMPACT. On desktop (≥1024px) we use grid 2fr 1fr on .hexp-hero-inner so the visual sits on the right and aligns with the explore section's smaller card; below that, keep block so the hero stacks cleanly. The grid lives on .hexp-hero-inner (not .hexp-hero) because that is the direct parent of .hexp-hero-text and .hexp-hero-visual. */ .hexp-hero{ min-height:auto !important; padding:48px 0 24px 0 !important; text-align:left !important; } @media (max-width:1023px){ .hexp-hero-inner{ display:block !important; } } @media (min-width:1024px){ .hexp-hero-inner{ display:grid !important; grid-template-columns:2fr 1fr; gap:30px; align-items:center; } } .hexp-hero-text, .hexp-hero-content{ max-width:none !important; width:100% !important; margin:0 !important; text-align:left !important; padding-left:0 !important; padding-right:0 !important; } @media (min-width:1024px){ .hexp-hero-text, .hexp-hero-content{ min-width:0; } } html[dir=rtl] .hexp-hero, html[dir=rtl] .hexp-hero-text, html[dir=rtl] .hexp-hero-content{ text-align:right !important; } /* Compact hero typography */ .hexp-hero h1{ font-size:42px !important; line-height:1.15 !important; margin-bottom:14px !important; max-width:760px; } .hexp-hero p{ font-size:16px !important; max-width:620px; margin-bottom:20px !important; opacity:.85; } .hexp-hero-eyebrow{ display:inline-flex !important; margin-bottom:14px !important; padding:6px 14px !important; font-size:13px; } /* Hero tabs — left-aligned, compact, with FILLED progress bar like HostAdvice */ .hexp-hero-tabs{ margin:18px 0 0 0 !important; gap:64px !important; justify-content:flex-start !important; } .hexp-hero-tab{ font-size:15px !important; padding-bottom:14px !important; font-weight:600 !important; } /* Progress bar with active fill — looks like HostAdvice slider */ .hexp-hero-progress{ height:2px !important; background:rgba(255,255,255,.18) !important; border-radius:1px; max-width:none !important; width:100%; margin-top:0 !important; position:relative; --progress-width:12.5%; } .hexp-hero-progress::before{ content:""; position:absolute; left:0; top:0; bottom:0; background:var(--hexp-primary); border-radius:1px; transition:width .35s cubic-bezier(.4,0,.2,1); width:var(--progress-width); } html[dir=rtl] .hexp-hero-progress::before{ left:auto; right:0; } /* Active tab dot — sits on top of progress bar */ .hexp-hero-tab.active::after{ bottom:-7px !important; width:13px !important; height:13px !important; box-shadow:0 0 0 3px rgba(255,255,255,.15) !important; } /* Compact the explore section so user can see content change without long scroll */ .hexp-explore-section{ padding:32px 0 40px 0 !important; } .hexp-explore-card{ min-height:auto !important; padding:28px 32px !important; } .hexp-explore-card h3{ font-size:22px !important; margin-bottom:6px; } .hexp-explore-card p{ font-size:14px !important; margin-bottom:18px !important; } .hexp-category-pills{ gap:8px !important; margin-bottom:14px !important; } .hexp-cat-pill{ padding:8px 16px !important; font-size:13px !important; } .hexp-see-all{ font-size:14px !important; } @media (max-width:768px){ .hexp-hero{ padding:32px 0 20px 0 !important; } .hexp-hero h1{ font-size:28px !important; } .hexp-hero p{ font-size:14px !important; } .hexp-hero-tabs{ gap:24px !important; flex-wrap:wrap; } .hexp-hero-tab{ font-size:13px !important; } } /* ============================================================ * V2.5: HostAdvice Exclusives section + Trust tabs * ============================================================ */ .hexp-exclusives-section{ padding:48px 0; background:#fff; } .hexp-exclusives-title{ display:flex; align-items:center; gap:12px; margin-bottom:32px; } .hexp-exclusives-title i{ width:38px; height:38px; background:#1A2847; color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; } .hexp-exclusives-title h2{ font-size:30px; color:#1A2847; font-weight:800; margin:0; } .hexp-exclusives-list{ display:flex; flex-direction:column; gap:30px; } .hexp-excl-card{ position:relative; background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:32px 28px 24px; box-shadow:0 1px 3px rgba(0,0,0,.04); } .hexp-excl-ribbon{ position:absolute; top:-14px; left:24px; color:#fff; font-weight:800; font-size:12px; padding:8px 18px 8px 14px; letter-spacing:.5px; box-shadow:0 4px 10px rgba(0,0,0,.1); clip-path:polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); padding-right:22px; } .hexp-excl-ribbon.rib-orange{ background:#F97316; } .hexp-excl-ribbon.rib-green{ background:#16A34A; } .hexp-excl-rank-circle{ position:absolute; top:24px; left:14px; width:24px; height:24px; border-radius:50%; border:1.5px solid #1A2847; color:#1A2847; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; background:#fff; z-index:2; } .hexp-excl-grid{ display:grid; grid-template-columns:200px 1fr 240px; gap:32px; align-items:center; padding-top:6px; } .hexp-excl-logo{ text-align:center; } .hexp-excl-logo img{ max-height:60px; max-width:170px; object-fit:contain; } .hexp-excl-logo .logo-placeholder{ font-size:24px; font-weight:800; } .hexp-excl-content h3{ font-size:18px; font-weight:800; color:#1A2847; line-height:1.4; margin:0 0 8px 0; } .hexp-excl-content p{ font-size:14px; color:#374151; line-height:1.6; margin:0 0 12px 0; } .hexp-excl-content p strong{ color:#1A2847; } .hexp-excl-badges{ display:flex; gap:10px; flex-wrap:wrap; } .hexp-excl-badge{ display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:14px; font-size:12px; font-weight:700; } .hexp-excl-badge.badge-verified{ background:#E8F8EE; color:#16A34A; } .hexp-excl-badge.badge-exclusive{ background:#FEF3C7; color:#D97706; } .hexp-excl-actions{ display:flex; flex-direction:column; gap:10px; } .hexp-excl-visit{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--hexp-primary); color:#fff; padding:14px 20px; border-radius:30px; border:none; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; box-shadow:0 4px 10px rgba(37,99,235,.2); transition:all .15s ease; } .hexp-excl-visit:hover{ background:#1d4ed8; color:#fff; transform:translateY(-1px); box-shadow:0 6px 14px rgba(37,99,235,.3); } .hexp-excl-check{ display:flex; align-items:center; justify-content:center; gap:8px; background:#fff; color:var(--hexp-primary); padding:13px 20px; border-radius:30px; border:1.5px solid var(--hexp-primary); font-weight:700; font-size:14px; text-decoration:none; transition:all .15s ease; } .hexp-excl-check:hover{ background:#F8FAFF; color:var(--hexp-primary); } @media (max-width:900px){ .hexp-excl-grid{ grid-template-columns:1fr; gap:18px; text-align:center; } .hexp-excl-content h3{ text-align:center; } } /* Trust tabs panes */ .hexp-trust-tab{ background:none; border:none; cursor:pointer; font-family:inherit; } .hexp-trust-pane{ display:none; animation:hexpFadePane .25s ease; } .hexp-trust-pane.active{ display:block; } /* RTL */ html[dir=rtl] .hexp-excl-ribbon{ left:auto; right:24px; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); padding-left:22px; padding-right:14px; } html[dir=rtl] .hexp-excl-rank-circle{ left:auto; right:14px; } /* ============================================================ * V2.6: Why Trust Us — HostAdvice-style (REFINED v2) * ============================================================ */ .hexp-trust-v2{ padding:80px 0; background:#fff; position:relative; } .hexp-trust-v2 .hexp-container{ max-width:1180px; } .hexp-trust-v2-header{ text-align:center; margin-bottom:44px; } .hexp-trust-v2-eyebrow{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--hexp-primary); margin-bottom:14px; } .hexp-trust-v2-title{ font-size:38px; font-weight:800; color:#1A2847; margin:0 0 18px 0; letter-spacing:-0.6px; line-height:1.15; } .hexp-trust-v2-intro{ font-size:16px; color:#4B5563; line-height:1.75; max-width:780px; margin:0 auto; } .hexp-trust-v2-box{ background:#fff; border:1px solid #E5E7EB; border-radius:20px; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.04); } .hexp-trust-v2-tabs{ display:flex; gap:0; border-bottom:1px solid #E5E7EB; background:#FAFBFC; padding:0; flex-wrap:wrap; } .hexp-trust-v2-tabs .hexp-trust-tab{ flex:1; background:transparent; border:none; border-radius:0; /* override the global pill radius */ box-shadow:none; /* override the global pill active shadow */ cursor:pointer; padding:20px 22px; font-weight:600; font-size:14.5px; color:#6B7280; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-bottom:3px solid transparent; margin-bottom:-1px; transition:color .2s ease, background .2s ease, border-color .2s ease; font-family:inherit; position:relative; } .hexp-trust-v2-tabs .hexp-trust-tab i{ font-size:14px; transition:transform .2s ease; } .hexp-trust-v2-tabs .hexp-trust-tab:hover{ color:#1A2847; background:#fff; } .hexp-trust-v2-tabs .hexp-trust-tab.active{ color:var(--hexp-primary); border-bottom-color:var(--hexp-primary); background:#fff; border-radius:0; /* explicit reset for active */ box-shadow:none; } .hexp-trust-v2-tabs .hexp-trust-tab.active i{ transform:scale(1.06); } .hexp-trust-v2-body{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; padding:48px 48px; align-items:center; background:#fff; } .hexp-trust-v2-text p{ font-size:15.5px; color:#4B5563; line-height:1.85; margin:0 0 28px; } .hexp-trust-v2-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--hexp-primary); color:#fff; padding:14px 28px; border-radius:30px; font-weight:700; font-size:14.5px; text-decoration:none; box-shadow:0 6px 16px rgba(37,99,235,.25); transition:all .2s ease; } .hexp-trust-v2-btn i{ transition:transform .2s ease; } .hexp-trust-v2-btn:hover{ background:#1d4ed8; color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,99,235,.32); } .hexp-trust-v2-btn:hover i{ transform:translateX(4px); } .hexp-trust-v2-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .hexp-trust-v2-stats .hexp-stat-card{ background:#fff; border:1px solid #E5E7EB; border-radius:16px; padding:28px 22px; text-align:center; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; position:relative; } .hexp-trust-v2-stats .hexp-stat-card::before{ content:''; position:absolute; inset:0; border-radius:16px; background:linear-gradient(180deg, rgba(37,99,235,0) 0%, rgba(37,99,235,0.025) 100%); opacity:0; transition:opacity .25s ease; pointer-events:none; } .hexp-trust-v2-stats .hexp-stat-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.08); border-color:#cbd5e1; } .hexp-trust-v2-stats .hexp-stat-card:hover::before{ opacity:1; } .hexp-trust-v2-stats .hexp-stat-icon{ width:54px; height:54px; border-radius:14px; background:linear-gradient(135deg,#E0EAFF 0%, #F0F4FF 100%); color:var(--hexp-primary); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:20px; box-shadow:inset 0 0 0 1px rgba(37,99,235,.08); } .hexp-trust-v2-stats .hexp-stat-value{ font-size:34px; font-weight:800; color:#1A2847; margin-bottom:4px; letter-spacing:-0.5px; line-height:1.1; } .hexp-trust-v2-stats .hexp-stat-label{ font-size:13px; color:#6B7280; font-weight:600; } @media (max-width:900px){ .hexp-trust-v2{ padding:56px 0; } .hexp-trust-v2-title{ font-size:30px; } .hexp-trust-v2-intro{ font-size:15px; } .hexp-trust-v2-body{ grid-template-columns:1fr; gap:36px; padding:32px 24px; } .hexp-trust-v2-tabs{ overflow-x:auto; flex-wrap:nowrap; } .hexp-trust-v2-tabs .hexp-trust-tab{ white-space:nowrap; padding:16px 18px; font-size:13.5px; flex:0 0 auto; } } @media (max-width:480px){ .hexp-trust-v2-stats{ grid-template-columns:1fr; } .hexp-trust-v2-title{ font-size:26px; } .hexp-trust-v2-stats .hexp-stat-value{ font-size:30px; } .hexp-trust-v2-header{ margin-bottom:32px; } } html[dir=rtl] .hexp-trust-v2-tabs{ direction:rtl; } html[dir=rtl] .hexp-trust-v2-btn:hover i{ transform:translateX(-4px); } /* ============================================================ * V2.7: Articles Layout (HostAdvice-style: 1 large + 4 small 2x2) * ============================================================ */ .hexp-articles-layout{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; } /* FEATURED big article (left side) */ .hexp-article-featured-v2{ background:#fff; border:1px solid #E5E7EB; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; } .hexp-article-featured-v2:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08); } .haf-image{ display:block; position:relative; height:340px; overflow:hidden; text-decoration:none; } .haf-image img{ width:100%; height:100%; object-fit:cover; } .haf-cat-pill{ position:absolute; top:18px; left:18px; z-index:2; background:#fff; color:var(--hexp-primary); padding:7px 16px; border-radius:8px; font-size:13px; font-weight:700; box-shadow:0 4px 10px rgba(0,0,0,.08); } .haf-illustration{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:40px 30px; color:#fff; position:relative; } .haf-illustration::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.12), transparent 50%); pointer-events:none; } .haf-illustration i{ font-size:48px; opacity:.8; text-shadow:0 4px 16px rgba(0,0,0,.15); } .haf-illustration h4{ font-size:24px; font-weight:800; text-align:center; color:#fff; margin:0; line-height:1.3; max-width:380px; text-shadow:0 2px 8px rgba(0,0,0,.2); } .haf-body{ padding:24px 26px 26px; flex:1; display:flex; flex-direction:column; } .haf-body h3{ font-size:22px; font-weight:800; line-height:1.35; margin:0 0 12px; } .haf-body h3 a{ color:#1A2847; text-decoration:none; } .haf-body h3 a:hover{ color:var(--hexp-primary); } .haf-excerpt{ color:#374151; font-size:14px; line-height:1.7; margin:0 0 16px; flex:1; } .haf-meta{ font-size:13px; color:#6B7280; margin-bottom:16px; } .haf-meta i{ margin-right:5px; } .haf-author{ display:flex; align-items:center; gap:10px; padding-top:16px; border-top:1px solid #F3F4F6; } .haf-avatar{ width:38px; height:38px; border-radius:50%; background:#E0EAFF; color:var(--hexp-primary); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; } .haf-avatar.small{ width:32px; height:32px; font-size:12px; } .haf-author-name{ font-weight:700; font-size:13px; color:#1A2847; } .haf-author-date{ font-size:12px; color:#6B7280; } /* SMALL articles grid 2x2 (right side) */ .hexp-articles-small-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:16px; } .hexp-article-small{ background:#fff; border:1px solid #E5E7EB; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; } .hexp-article-small:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.07); } .has-image{ display:block; position:relative; height:140px; overflow:hidden; text-decoration:none; } .has-image img{ width:100%; height:100%; object-fit:cover; } .has-illustration{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px 14px; color:#fff; position:relative; } .has-illustration::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.18), transparent 60%); pointer-events:none; } .has-illustration i{ font-size:24px; opacity:.85; } .has-illustration h4{ font-size:13px; font-weight:700; text-align:center; color:#fff; margin:0; line-height:1.3; text-shadow:0 1px 4px rgba(0,0,0,.2); } .has-image .haf-cat-pill{ top:12px; left:12px; padding:5px 10px; font-size:11px; } .has-body{ padding:14px 16px 16px; flex:1; display:flex; flex-direction:column; } .has-body h3{ font-size:15px; font-weight:700; line-height:1.4; margin:0 0 10px; flex:1; } .has-body h3 a{ color:#1A2847; text-decoration:none; } .has-body h3 a:hover{ color:var(--hexp-primary); } .has-meta{ font-size:12px; color:#6B7280; margin-bottom:10px; } .has-meta i{ margin-right:4px; } .has-author{ display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid #F3F4F6; } .has-author .haf-author-name{ font-size:12px; } .has-author .haf-author-date{ font-size:11px; } /* Color variants for image backgrounds */ .bg-purple{ background:linear-gradient(135deg, #6B46C1 0%, #9333EA 100%); } .bg-blue{ background:linear-gradient(135deg, #2563EB 0%, #06B6D4 100%); } .bg-orange{ background:linear-gradient(135deg, #F97316 0%, #FBBF24 100%); } .bg-green{ background:linear-gradient(135deg, #16A34A 0%, #84CC16 100%); } .bg-teal{ background:linear-gradient(135deg, #0891B2 0%, #14B8A6 100%); } /* Responsive */ @media (max-width:1024px){ .hexp-articles-layout{ grid-template-columns:1fr; gap:20px; } .hexp-articles-small-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .hexp-articles-small-grid{ grid-template-columns:1fr; } .haf-image{ height:240px; } .haf-illustration h4{ font-size:18px; } .haf-illustration i{ font-size:36px; } } html[dir=rtl] .haf-cat-pill{ left:auto; right:18px; } html[dir=rtl] .has-image .haf-cat-pill{ left:auto; right:12px; } html[dir=rtl] .haf-meta i, html[dir=rtl] .has-meta i{ margin-right:0; margin-left:5px; } /* ============================================================ * V2.7: Wider mega menu + Search overlay with animation * ============================================================ */ /* Wider mega menu so titles aren't truncated */ .hexp-mega-3col{ min-width:820px !important; grid-template-columns:repeat(3, 1fr) !important; gap:6px 28px !important; padding:24px 28px !important; } .hexp-mega-item > span:first-child{ -webkit-line-clamp:3 !important; font-size:13.5px !important; white-space:normal !important; overflow:hidden !important; text-overflow:ellipsis !important; } .hexp-mega-item{ min-height:48px !important; padding:10px 14px !important; align-items:flex-start !important; } /* Reposition mega menus so they don't overflow viewport */ .hexp-nav-item{ position:relative; } .hexp-mega-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); background:#fff; border-radius:12px; box-shadow:0 16px 40px rgba(15,23,42,.12); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease, transform .2s ease; z-index:100; } .hexp-nav-item:hover > .hexp-mega-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } /* Last items in nav — adjust mega menu position so they don't fall off-screen */ .hexp-nav-item:last-child > .hexp-mega-menu, .hexp-nav-item:nth-last-child(2) > .hexp-mega-menu{ left:auto; right:0; transform:translateY(8px); } .hexp-nav-item:last-child:hover > .hexp-mega-menu, .hexp-nav-item:nth-last-child(2):hover > .hexp-mega-menu{ transform:translateY(0); } /* === SEARCH OVERLAY — animated full-width drop-down === */ .hexp-search-overlay{ position:absolute !important; top:100% !important; left:0 !important; right:0 !important; background:#fff !important; border-bottom:1px solid #E5E7EB !important; box-shadow:0 12px 32px rgba(0,0,0,.08) !important; padding:0 !important; max-height:0; overflow:hidden; display:block !important; opacity:0; transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, padding .35s ease; z-index:200; } .hexp-search-overlay.active{ max-height:120px !important; opacity:1 !important; padding:24px 32px !important; } .hexp-search-form{ display:flex !important; align-items:center; gap:14px; max-width:1100px; margin:0 auto; } .hexp-search-form input[type="search"]{ flex:1; padding:16px 22px !important; border:2px solid #E5E7EB !important; border-radius:14px !important; font-size:16px !important; outline:none; font-family:inherit; background:#FAFBFC; transition:all .2s ease; } .hexp-search-form input[type="search"]:focus{ border-color:var(--hexp-primary) !important; background:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.1); } .hexp-search-form input[type="search"]::placeholder{ color:#9CA3AF; } .hexp-search-form button[type="submit"]{ background:var(--hexp-primary) !important; color:#fff; border:none; width:54px; height:54px; border-radius:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; transition:background .15s ease, transform .15s ease; } .hexp-search-form button[type="submit"]:hover{ background:#1d4ed8; transform:translateX(2px); } .hexp-search-close{ background:#F3F4F6 !important; border:none !important; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:22px; color:#6B7280; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .hexp-search-close:hover{ background:#E5E7EB; } /* Mobile mega menu adjustments */ @media (max-width:1024px){ .hexp-mega-3col{ min-width:auto !important; grid-template-columns:1fr !important; } .hexp-mega-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border-radius:0; display:none; } .hexp-nav-item.open > .hexp-mega-menu{ display:block; } } @media (max-width:768px){ .hexp-search-overlay.active{ padding:16px !important; } .hexp-search-form input[type="search"]{ font-size:15px !important; padding:12px 16px !important; } .hexp-search-form button[type="submit"]{ width:46px; height:46px; } .hexp-search-close{ width:36px; height:36px; font-size:20px; } } /* RTL */ html[dir=rtl] .hexp-search-form button[type="submit"] i{ transform:scaleX(-1); } html[dir=rtl] .hexp-search-form button[type="submit"]:hover{ transform:translateX(-2px); } /* ============================================================ * V2.8: Single Company — Coupons View (HostAdvice-style) * ============================================================ */ .hexp-cc-hero{ background:linear-gradient(135deg, #4F5B82 0%, #38416A 100%); color:#fff; padding:36px 0 56px 0; position:relative; } .hexp-cc-breadcrumb{ display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.85); margin-bottom:6px; flex-wrap:wrap; } .hexp-cc-breadcrumb a{ color:rgba(255,255,255,.85); text-decoration:none; } .hexp-cc-breadcrumb a:hover{ color:#fff; text-decoration:underline; } .hexp-cc-breadcrumb .current{ color:#fff; font-weight:600; } .hexp-cc-hero-meta{ position:absolute; top:36px; right:0; display:flex; gap:24px; padding-right:24px; font-size:14px; } .hexp-cc-hero-meta a{ color:rgba(255,255,255,.85); text-decoration:none; } .hexp-cc-hero-meta a:hover{ color:#fff; text-decoration:underline; } .hexp-cc-hero h1{ color:#fff; font-size:42px; font-weight:800; margin:24px 0 16px; line-height:1.2; max-width:800px; } .hexp-cc-hero-desc{ font-size:16px; line-height:1.7; max-width:760px; color:rgba(255,255,255,.92); } .hexp-cc-body{ padding:40px 0 60px; background:#FAFBFC; } .hexp-cc-grid{ display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:start; } .hexp-cc-sidebar{ position:sticky; top:80px; } .hexp-cc-sidebar-card{ background:#fff; border:1px solid #E5E7EB; border-radius:14px; padding:24px; margin-bottom:18px; } .hexp-cc-sidebar-card h2{ font-size:18px; font-weight:800; color:#1A2847; line-height:1.3; margin:0 0 8px 0; } .hexp-cc-sidebar-card > p{ font-size:13px; color:#6B7280; line-height:1.5; margin:0 0 18px 0; } .hexp-cc-sidebar-section{ padding-top:14px; margin-top:14px; border-top:1px solid #F3F4F6; } .hexp-cc-sidebar-section:first-of-type{ border-top:none; padding-top:0; margin-top:0; } .hexp-cc-perfect h3{ font-size:16px; color:#1A2847; margin-bottom:14px; } .hexp-cc-perfect-list{ list-style:none; padding:0; margin:0; } .hexp-cc-perfect-list li{ border-top:1px solid #F3F4F6; padding:0; } .hexp-cc-perfect-list li:first-child{ border-top:none; } .hexp-cc-perfect-list a{ display:block; padding:12px 0; color:#374151; font-size:14px; line-height:1.5; text-decoration:none; transition:color .15s ease; } .hexp-cc-perfect-list a:hover{ color:var(--hexp-primary); } .hexp-cc-main{ min-width:0; } /* Get Deal button (no code → direct affiliate link) */ .hexp-tp-get-deal{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--hexp-primary); color:#fff; padding:13px 22px; border-radius:30px; font-weight:700; font-size:14px; text-decoration:none; width:100%; box-shadow:0 4px 10px rgba(37,99,235,.25); transition:all .15s ease; margin-bottom:10px; } .hexp-tp-get-deal:hover{ background:#1d4ed8; color:#fff; transform:translateY(-1px); } /* Mobile */ @media (max-width:1024px){ .hexp-cc-grid{ grid-template-columns:1fr; } .hexp-cc-sidebar{ position:static; } .hexp-cc-hero-meta{ position:static; padding:0; margin-bottom:14px; } .hexp-cc-hero h1{ font-size:30px; } } /* RTL */ html[dir=rtl] .hexp-cc-hero-meta{ right:auto; left:0; padding-right:0; padding-left:24px; } /* ============================================================ * V2.9: Recommended cards — hover tooltip + polished colors * ============================================================ */ /* Make rec-card a positioning context for the tooltip */ .hexp-rec-card{ position:relative; transition:transform .2s ease, box-shadow .2s ease; } .hexp-rec-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(15,23,42,.12); } /* Polished header colors with subtle gradient */ .hexp-rec-header{ padding:14px 18px !important; font-size:15px !important; font-weight:700 !important; letter-spacing:.2px; border-radius:14px 14px 0 0; text-shadow:0 1px 2px rgba(0,0,0,.08); } .hexp-rec-header.rec-blue{ background:linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important; } .hexp-rec-header.rec-orange{ background:linear-gradient(135deg, #FB923C 0%, #F97316 100%) !important; } .hexp-rec-header.rec-green{ background:linear-gradient(135deg, #22C55E 0%, #16A34A 100%) !important; } /* Card body refinements */ .hexp-rec-card{ border:1px solid #E5E7EB !important; border-radius:14px !important; overflow:visible !important; background:#fff; } .hexp-rec-body{ padding:24px 22px !important; display:flex; flex-direction:column; gap:14px; } .hexp-rec-logo{ height:56px !important; display:flex; align-items:center; justify-content:center; } .hexp-rec-logo img{ max-height:46px !important; } .hexp-rec-deal{ min-height:54px; font-size:14px !important; color:#374151; line-height:1.5; gap:8px !important; } .hexp-rec-deal i{ color:#1A2847 !important; font-size:15px; flex-shrink:0; } .hexp-rec-visit{ background:linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important; border-radius:30px !important; padding:12px 22px !important; font-size:14px !important; box-shadow:0 4px 10px rgba(37,99,235,.25); transition:all .15s ease !important; } .hexp-rec-visit:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(37,99,235,.35); } .hexp-rec-available{ background:#F0FDF4; border:1px solid #BBF7D0; border-radius:24px; padding:8px 16px !important; font-size:13px !important; color:#16A34A !important; } .hexp-rec-available .count{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; background:#16A34A !important; color:#fff; border-radius:50% !important; font-size:12px; } /* === HOVER TOOLTIP === */ .hexp-rec-tooltip{ position:absolute; top:calc(100% - 4px); left:50%; transform:translateX(-50%) translateY(8px); min-width:340px; max-width:420px; background:#fff; border-radius:14px; box-shadow:0 20px 48px rgba(15,23,42,.18); padding:8px; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease, transform .2s ease; z-index:50; max-height:380px; overflow-y:auto; } .hexp-rec-card:hover .hexp-rec-tooltip{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } /* Arrow pointing up to the card */ .hexp-rec-tooltip::before{ content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:9px solid #fff; filter:drop-shadow(0 -2px 2px rgba(0,0,0,.04)); } .hexp-rec-tooltip-item{ display:flex; gap:12px; padding:12px 14px; border-radius:10px; text-decoration:none; transition:background .15s ease; border-bottom:1px solid #F3F4F6; } .hexp-rec-tooltip-item:last-child{ border-bottom:none; } .hexp-rec-tooltip-item:hover{ background:#F9FAFB; } .hexp-rec-tooltip-item i{ color:#F97316; font-size:18px; flex-shrink:0; margin-top:2px; } .rec-tt-title{ font-weight:700; font-size:14px; color:#1A2847; line-height:1.35; margin-bottom:4px; } .rec-tt-desc{ font-size:12px; color:#6B7280; line-height:1.5; } /* On mobile/tablet — show tooltip as full-width centered modal-ish */ @media (max-width:768px){ .hexp-rec-tooltip{ position:fixed; top:auto; bottom:20px; left:10px; right:10px; transform:none !important; min-width:auto; max-width:none; width:auto; } .hexp-rec-tooltip::before{ display:none; } .hexp-rec-card:hover .hexp-rec-tooltip{ transform:none !important; } } /* RTL */ html[dir=rtl] .hexp-rec-tooltip{ left:50%; right:auto; transform:translateX(-50%) translateY(8px); } html[dir=rtl] .hexp-rec-card:hover .hexp-rec-tooltip{ transform:translateX(-50%) translateY(0); } /* ============================================================ * V3.0 — Search overlay FINAL FIX (simpler + guaranteed working) * ============================================================ */ /* Reset everything for the search overlay */ .hexp-search-overlay, .hexp-search-overlay.active{ display:none; max-height:none; opacity:1; overflow:visible; transition:none; } /* Default — completely hidden */ .hexp-search-overlay{ display:none !important; } /* Active — fully visible */ .hexp-search-overlay.active{ display:block !important; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid #E5E7EB; box-shadow:0 16px 40px rgba(0,0,0,.12); padding:24px 32px; z-index:500; animation:hexpSearchSlideDown .3s cubic-bezier(.4,0,.2,1); } @keyframes hexpSearchSlideDown{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:translateY(0); } } /* Form layout inside overlay */ .hexp-search-overlay.active .hexp-search-form{ display:flex !important; align-items:center; gap:14px; max-width:1100px; margin:0 auto; } .hexp-search-overlay.active input[type="search"]{ flex:1; padding:16px 22px; border:2px solid #E5E7EB; border-radius:14px; font-size:16px; outline:none; font-family:inherit; background:#FAFBFC; transition:all .2s ease; } .hexp-search-overlay.active input[type="search"]:focus{ border-color:var(--hexp-primary); background:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.12); } .hexp-search-overlay.active button[type="submit"]{ background:var(--hexp-primary); color:#fff; border:none; width:54px; height:54px; border-radius:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; transition:all .15s ease; } .hexp-search-overlay.active button[type="submit"]:hover{ background:#1d4ed8; transform:translateX(2px); } .hexp-search-close{ background:#F3F4F6 !important; border:none !important; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:22px; color:#6B7280; display:flex !important; align-items:center; justify-content:center; flex-shrink:0; padding:0 !important; } .hexp-search-close:hover{ background:#E5E7EB; color:#374151; } /* Mobile */ @media (max-width:768px){ .hexp-search-overlay.active{ padding:16px; } .hexp-search-overlay.active input[type="search"]{ font-size:15px; padding:12px 16px; } .hexp-search-overlay.active button[type="submit"]{ width:46px; height:46px; } } /* Show Monthly Pick on tablets too */ @media (max-width:768px){ .hexp-monthly-pick .pick-brand, .hexp-monthly-pick > span:first-of-type{ display:none; } /* Keep just the trophy icon + logo on small screens */ } @media (max-width:480px){ .hexp-monthly-pick{ display:none !important; } } /* ============================================================ * V2.11: Show Best Plans table — HostAdvice-style polish * ============================================================ */ /* Toggle button — center it under the card */ .hexp-plans-toggle{ border-top:1px solid #E5E7EB; margin-top:18px; padding-top:0; } .hexp-toggle-btn{ display:flex !important; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; background:transparent !important; border:none !important; color:var(--hexp-primary) !important; font-weight:700 !important; font-size:14px !important; cursor:pointer; text-align:center; font-family:inherit; } .hexp-toggle-btn:hover{ background:#F8FAFF !important; } /* Polished plans table */ .hexp-plans-detail{ padding:20px 0 8px 0; } .hexp-plans-table-inline{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; } .hexp-plans-table-inline thead tr{ background:transparent; } .hexp-plans-table-inline th{ background:transparent !important; padding:12px 14px !important; text-align:left; font-size:13px !important; color:#6B7280 !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; border-bottom:1px solid #E5E7EB; white-space:nowrap; } .hexp-plans-table-inline td{ padding:18px 14px !important; border-top:1px solid #F3F4F6 !important; color:#374151; vertical-align:middle; } .hexp-plans-table-inline tbody tr:first-child td{ border-top:none !important; } .hexp-plans-table-inline .plan-name a{ font-weight:700; color:var(--hexp-primary); text-decoration:none; font-size:15px; } .hexp-plans-table-inline .plan-name a:hover{ text-decoration:underline; } .hexp-plans-table-inline .plan-price{ font-weight:800; color:#1A2847; font-size:15px; } .hexp-plans-table-inline .plan-score{ font-weight:700; color:#1A2847; } .hexp-plans-table-inline .plan-score .star{ color:#F59E0B; margin-right:2px; } .hexp-plans-table-inline .os-icon{ font-size:18px; display:inline-block; } /* HostAdvice-style View Plan button (blue outline, round, light hover) */ .hexp-plans-table-inline .view-plan-btn{ display:inline-block; background:#fff !important; color:var(--hexp-primary) !important; border:1.5px solid var(--hexp-primary); padding:9px 22px !important; border-radius:24px !important; font-size:13px !important; font-weight:700 !important; text-decoration:none; transition:all .15s ease; white-space:nowrap; } .hexp-plans-table-inline .view-plan-btn:hover{ background:var(--hexp-primary) !important; color:#fff !important; } /* Mobile: scrollable table */ @media (max-width:900px){ .hexp-plans-detail{ overflow-x:auto; } .hexp-plans-table-inline{ min-width:680px; } } /* RTL */ html[dir=rtl] .hexp-plans-table-inline th, html[dir=rtl] .hexp-plans-table-inline td{ text-align:right; } html[dir=rtl] .hexp-plans-table-inline .plan-score .star{ margin-right:0; margin-left:2px; } /* Hide remnants of old Pros/Cons UI in case CSS still cached */ .hexp-pcv2-show-more, .hexp-pcv2-more, .pcv2-procons, .pcv2-pros, .pcv2-cons, .pcv2-more-desc, .pcv2-read-full-review{ display:none !important; } /* Plans empty state (when no plans added yet) */ .hexp-plans-empty{ display:flex; gap:14px; align-items:flex-start; padding:20px 24px; background:#FFF7ED; border:1px solid #FDBA74; border-radius:10px; color:#9A3412; font-size:14px; line-height:1.6; } .hexp-plans-empty i{ font-size:20px; color:#F97316; margin-top:2px; flex-shrink:0; } .hexp-plans-empty strong{ display:block; margin-bottom:6px; color:#9A3412; } .hexp-plans-empty p{ margin:0; font-size:13px; } .hexp-plans-empty a{ color:var(--hexp-primary); font-weight:700; text-decoration:underline; } /* ============================================================ * V2.13: Compact header logo + tighter mega menu * ============================================================ */ /* Smaller logo */ .hexp-logo{ font-size:18px !important; gap:8px !important; } .hexp-logo-mark{ width:32px !important; height:32px !important; font-size:15px !important; border-radius:8px !important; } /* v3.7.84 — Made the custom logo bigger. v3.7.85 — superseded by the .hexp-header .custom-logo rule near the top of this file. */ /* .custom-logo{ max-height:60px !important; width:auto; max-width:300px !important; } */ /* Tighter header padding */ .hexp-header-inner{ padding-top:12px !important; padding-bottom:12px !important; gap:18px !important; } /* Compact nav links */ .hexp-nav-link{ font-size:14px !important; padding:8px 14px !important; } .hexp-coupon-badge{ min-width:20px !important; height:20px !important; font-size:10px !important; } .hexp-monthly-pick{ font-size:12px !important; padding:5px 10px 5px 8px !important; } .hexp-monthly-pick .pick-brand{ padding:3px 10px !important; font-size:12px; } .hexp-monthly-pick .pick-logo-img{ max-height:22px !important; } /* === MEGA MENU — single-line items, no wrapping === */ .hexp-mega-3col{ min-width:760px !important; max-width:840px; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:2px 16px !important; padding:18px !important; } .hexp-mega-item{ min-height:auto !important; padding:8px 12px !important; gap:8px !important; align-items:center !important; border-radius:6px; } .hexp-mega-item > span:first-child{ font-size:13px !important; line-height:1.4 !important; white-space:normal !important; -webkit-line-clamp:2 !important; overflow:hidden !important; text-overflow:ellipsis !important; display:-webkit-box !important; -webkit-box-orient:vertical !important; } .hexp-mega-tag{ padding:2px 7px !important; font-size:9px !important; flex-shrink:0; } .hexp-mega-link{ margin-top:6px !important; padding:10px 12px !important; font-size:13px !important; } /* Hover states a touch tighter */ .hexp-mega-item:hover{ background:#F1F5FF !important; } /* Mobile fallback */ @media (max-width:1024px){ .hexp-logo{ font-size:16px !important; } .hexp-logo-mark{ width:28px !important; height:28px !important; } } /* ============================================================ * V2.14: Company Coupons page — UX typography polish * ============================================================ */ /* === HERO REFINEMENT === */ .hexp-cc-hero{ background:linear-gradient(135deg, #1E2A4A 0%, #2D3B66 100%) !important; padding:28px 0 64px 0 !important; position:relative; } .hexp-cc-hero::after{ content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 30%, rgba(99,102,241,.08) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(37,99,235,.08) 0%, transparent 40%); pointer-events:none; } .hexp-cc-hero > *{ position:relative; z-index:1; } .hexp-cc-breadcrumb{ font-size:13px !important; color:rgba(255,255,255,.65) !important; letter-spacing:.1px; margin-bottom:0 !important; } .hexp-cc-breadcrumb a{ color:rgba(255,255,255,.7) !important; font-weight:500; transition:color .15s ease; } .hexp-cc-breadcrumb a:hover{ color:#fff !important; text-decoration:none !important; } .hexp-cc-breadcrumb span{ color:rgba(255,255,255,.4) !important; } .hexp-cc-breadcrumb .current{ color:#fff !important; font-weight:600 !important; } .hexp-cc-hero-meta{ top:32px !important; right:0 !important; gap:20px !important; font-size:13px !important; } .hexp-cc-hero-meta a{ color:rgba(255,255,255,.7) !important; font-weight:500; } .hexp-cc-hero-meta a:hover{ color:#fff !important; text-decoration:underline !important; } /* H1 — strong but balanced */ .hexp-cc-hero h1{ font-size:38px !important; font-weight:800 !important; line-height:1.18 !important; letter-spacing:-.4px; color:#fff !important; margin:24px 0 14px !important; max-width:780px; } /* Description — readable, slightly muted */ .hexp-cc-hero-desc{ font-size:15px !important; line-height:1.7 !important; color:rgba(255,255,255,.78) !important; max-width:680px; font-weight:400; margin:0 !important; } /* === BODY AREA === */ .hexp-cc-body{ padding:36px 0 64px !important; background:#F7F8FB !important; } .hexp-cc-grid{ gap:24px !important; } /* === SIDEBAR === */ .hexp-cc-sidebar-card{ border:1px solid #EAEDF2 !important; border-radius:12px !important; padding:22px !important; box-shadow:0 1px 2px rgba(15,23,42,.04); } .hexp-cc-sidebar-card h2{ font-size:17px !important; font-weight:700 !important; color:#1A2847 !important; letter-spacing:-.2px; line-height:1.35 !important; margin:0 0 6px 0 !important; } .hexp-cc-sidebar-card > p{ font-size:13px !important; color:#64748B !important; line-height:1.55 !important; margin:0 0 20px 0 !important; } .hexp-cc-sidebar-section{ padding-top:16px !important; margin-top:16px !important; border-top:1px solid #F1F3F7 !important; } .hexp-cs-label{ font-size:11px !important; color:#64748B !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.6px !important; margin-bottom:12px !important; } .hexp-cs-radio{ font-size:14px !important; color:#374151 !important; padding:7px 0 !important; gap:10px !important; } .hexp-cs-radio input[type=radio]{ width:16px; height:16px; accent-color:var(--hexp-primary); } .hexp-cs-select{ padding:10px 14px !important; border:1px solid #D7DCE4 !important; font-size:13px !important; color:#374151 !important; background:#fff !important; border-radius:8px !important; font-family:inherit; } .hexp-cs-select:focus{ outline:none; border-color:var(--hexp-primary) !important; box-shadow:0 0 0 3px rgba(37,99,235,.1); } /* "Find Your Perfect Coupon" list — cleaner */ .hexp-cc-perfect h3{ font-size:14px !important; color:#1A2847 !important; font-weight:700 !important; margin-bottom:6px !important; letter-spacing:-.1px; } .hexp-cc-perfect-list a{ padding:11px 0 !important; font-size:13.5px !important; color:#475569 !important; line-height:1.45 !important; font-weight:500; } .hexp-cc-perfect-list a:hover{ color:var(--hexp-primary) !important; padding-left:4px; transition:padding .15s ease, color .15s ease; } .hexp-cc-perfect-list li{ border-top-color:#F1F3F7 !important; } /* === COUPON CARDS POLISH === */ .hexp-cc-main .hexp-toppick-card{ border:1px solid #EAEDF2 !important; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:box-shadow .25s ease; } .hexp-cc-main .hexp-toppick-card:hover{ box-shadow:0 8px 24px rgba(15,23,42,.08); } .hexp-cc-main .hexp-toppick-header{ padding:11px 22px !important; font-size:13px !important; letter-spacing:.3px; } .hexp-cc-main .hexp-toppick-rank{ font-size:13px !important; font-weight:700 !important; } .hexp-cc-main .hexp-toppick-body{ padding:24px 22px !important; gap:24px !important; } /* Title — better hierarchy */ .hexp-cc-main .hexp-toppick-center h2{ font-size:16.5px !important; font-weight:700 !important; line-height:1.4 !important; color:#1A2847 !important; margin-bottom:12px !important; letter-spacing:-.1px; } /* Used count — softer */ .hexp-cc-main .hexp-tp-used{ font-size:11.5px !important; color:#94A3B8 !important; margin-top:10px !important; line-height:1.45 !important; } /* Badges — refined */ .hexp-cc-main .hexp-tp-badge{ padding:4px 10px !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.1px; } .hexp-cc-main .hexp-tp-badge i{ font-size:11px; } .hexp-cc-main .hexp-tp-badge.tp-badge-orange{ background:#FEF3E2 !important; color:#C2410C !important; } .hexp-cc-main .hexp-tp-badge.tp-badge-green{ background:#E8F8EE !important; color:#15803D !important; } .hexp-cc-main .hexp-tp-tried{ font-size:12px !important; color:#94A3B8 !important; margin-bottom:12px !important; } /* Vote section */ .hexp-cc-main .vote-q{ font-size:13px !important; color:#475569 !important; font-weight:600 !important; } .hexp-cc-main .hexp-vote-btn{ padding:5px 11px !important; font-size:12px !important; border-color:#E5E9F0 !important; color:#64748B !important; } /* Discount — strong but not screaming */ .hexp-cc-main .hexp-tp-discount{ font-size:30px !important; font-weight:800 !important; color:#15803D !important; margin-bottom:12px !important; line-height:1; letter-spacing:-.5px; } /* Show Code button — tight */ .hexp-cc-main .hexp-tp-show-code{ padding:11px 18px !important; font-size:13.5px !important; font-weight:700 !important; border-radius:8px !important; letter-spacing:.1px; } /* Get Deal button — same width as Show Code */ .hexp-cc-main .hexp-tp-get-deal{ padding:11px 18px !important; font-size:13.5px !important; border-radius:8px !important; margin-bottom:10px; letter-spacing:.1px; } /* Countdown — softer red */ .hexp-cc-main .hexp-tp-countdown{ font-size:13px !important; gap:3px !important; } .hexp-cc-main .hexp-tp-countdown .cd-h, .hexp-cc-main .hexp-tp-countdown .cd-m, .hexp-cc-main .hexp-tp-countdown .cd-s{ background:#FEE2E2 !important; color:#B91C1C !important; padding:5px 7px !important; font-size:13px !important; min-width:32px !important; font-weight:800; } .hexp-cc-main .hexp-tp-countdown .cd-sep{ font-size:10px !important; color:#94A3B8 !important; } /* Show More toggle */ .hexp-cc-main .hexp-show-more-btn{ font-size:12.5px !important; font-weight:600 !important; color:var(--hexp-primary) !important; padding:11px !important; background:#FAFBFC !important; } .hexp-cc-main .hexp-tp-more{ padding:18px 24px !important; font-size:14px !important; color:#475569 !important; line-height:1.7 !important; } /* === EMPTY STATE === */ .hexp-empty-state{ background:#fff; border:1px dashed #D7DCE4; border-radius:12px; padding:32px 24px; text-align:center; color:#64748B; font-size:14px; } /* === MOBILE === */ @media (max-width:768px){ .hexp-cc-hero{ padding:24px 0 40px 0 !important; } .hexp-cc-hero h1{ font-size:26px !important; line-height:1.25 !important; } .hexp-cc-hero-desc{ font-size:14px !important; } .hexp-cc-hero-meta{ position:static !important; top:auto !important; right:auto !important; margin-top:14px !important; padding:0 !important; flex-wrap:wrap; gap:14px !important; } .hexp-cc-body{ padding:24px 0 40px !important; } .hexp-cc-main .hexp-toppick-body{ grid-template-columns:1fr; padding:18px !important; } .hexp-cc-main .hexp-tp-discount{ font-size:24px !important; } .hexp-cc-main .hexp-toppick-center h2{ font-size:15px !important; } } /* === RTL === */ html[dir=rtl] .hexp-cc-perfect-list a:hover{ padding-left:0; padding-right:4px; } /* ============================================================ * Single-company contextual coupon / visit popup * ============================================================ */ .hexp-popup-overlay{ position:fixed; inset:0; z-index:9999; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .3s ease; overflow-y:auto; } .hexp-popup-overlay.is-open{ opacity:1; } .hexp-popup-overlay[hidden]{ display:none !important; } body.hexp-popup-locked{ overflow:hidden; } .hexp-popup-box{ position:relative; background:#fff; border:2px dashed var(--hexp-primary); border-radius:18px; padding:36px 36px 30px; max-width:760px; width:100%; box-shadow:0 24px 60px rgba(15,23,42,.35); transform:scale(.95) translateY(10px); transition:transform .3s cubic-bezier(.16,1,.3,1); } .hexp-popup-overlay.is-open .hexp-popup-box{ transform:scale(1) translateY(0); } .hexp-popup-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; background:transparent; border:none; cursor:pointer; color:#9CA3AF; font-size:18px; border-radius:50%; transition:all .15s; display:flex; align-items:center; justify-content:center; } .hexp-popup-close:hover{ background:#F3F4F6; color:#1A2847; } .hexp-popup-grid{ display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:center; } .hexp-popup-left{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; } .hexp-popup-logo{ min-height:60px; display:flex; align-items:center; justify-content:center; width:100%; } .hexp-popup-logo img{ max-height:60px; max-width:200px; object-fit:contain; } .hexp-popup-logo-text{ font-size:24px; font-weight:800; letter-spacing:.5px; } .hexp-popup-countdown{ display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; } .hexp-popup-countdown .cd-cell{ background:#F3F4F6; border-radius:8px; padding:10px 12px; min-width:54px; display:inline-flex; align-items:baseline; gap:2px; justify-content:center; } .hexp-popup-countdown .cd-num{ font-size:20px; font-weight:800; color:#1A2847; } .hexp-popup-countdown .cd-unit{ font-size:12px; font-weight:700; color:#6B7280; } .hexp-popup-countdown .cd-sep{ font-size:18px; font-weight:800; color:#1A2847; padding:0 1px; } .hexp-popup-right{ min-width:0; } .hexp-popup-title{ font-size:24px; font-weight:800; color:#1A2847; margin:0 0 18px; line-height:1.25; } .hexp-popup-features{ list-style:none; padding:0; margin:0 0 18px; } .hexp-popup-features li{ display:flex; align-items:flex-start; gap:10px; padding:6px 0; font-size:14px; color:#374151; line-height:1.5; } .hexp-popup-features li i{ color:var(--hexp-primary); margin-top:4px; flex:0 0 auto; } .hexp-popup-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; } .hexp-popup-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:14px; font-size:12px; font-weight:600; } .hexp-popup-badge.badge-verified{ background:#DCFCE7; color:#166534; } .hexp-popup-badge.badge-exclusive{ background:#FEF3C7; color:#92400E; } .hexp-popup-cta{ display:flex; } .hexp-popup-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px 28px; background:linear-gradient(180deg,#3B82F6,#2563EB); color:#fff; text-decoration:none; border:none; border-radius:30px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; box-shadow:0 6px 18px rgba(37,99,235,.3); transition:all .2s ease; } .hexp-popup-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(37,99,235,.38); color:#fff; } .hexp-popup-btn-link i{ transition:transform .2s ease; } .hexp-popup-btn-link:hover i{ transform:translateX(4px); } .hexp-popup-code-reveal{ display:flex; flex-direction:column; gap:10px; width:100%; } .hexp-popup-code-box{ display:flex; align-items:stretch; border:2px dashed #D1D5DB; border-radius:10px; background:#F9FAFB; overflow:hidden; } .hexp-popup-code-box code{ flex:1; padding:12px 16px; font-size:16px; font-weight:800; color:#1A2847; font-family: ui-monospace, "SF Mono", monospace; letter-spacing:1px; display:flex; align-items:center; justify-content:center; background:transparent; } .hexp-popup-copy{ background:var(--hexp-primary); color:#fff; border:none; padding:0 18px; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; transition:background .15s; } .hexp-popup-copy:hover{ background:#1d4ed8; } @media (max-width:640px){ .hexp-popup-box{ padding:28px 20px 20px; } .hexp-popup-grid{ grid-template-columns:1fr; gap:20px; text-align:center; } .hexp-popup-features li{ text-align:left; } .hexp-popup-title{ font-size:20px; } .hexp-popup-countdown .cd-cell{ min-width:48px; padding:8px 10px; } .hexp-popup-countdown .cd-num{ font-size:18px; } } html[dir=rtl] .hexp-popup-close{ right:auto; left:14px; } html[dir=rtl] .hexp-popup-btn-link:hover i{ transform:translateX(-4px); } html[dir=rtl] .hexp-popup-features li i{ margin-top:4px; } /* ============================================================ * Active Coupons sidebar — HostAdvice-style * ============================================================ */ .hexp-active-coupons-card{ background:#fff; border:1px solid #E5E7EB; border-radius:14px; padding:24px; margin-bottom:20px; } .hexp-active-coupons-title{ font-size:20px; font-weight:800; color:#1A2847; margin:0 0 18px; } .hexp-ac-coupon{ border:1px solid #E5E7EB; border-radius:12px; padding:18px; margin-bottom:14px; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; } .hexp-ac-coupon:hover{ border-color:#FB923C; box-shadow:0 4px 16px rgba(251,146,60,.08); } .hexp-ac-coupon:last-child{ margin-bottom:0; } .hexp-ac-discount{ display:inline-block; font-size:13px; font-weight:800; color:#EA580C; letter-spacing:.5px; margin-bottom:8px; text-transform:uppercase; } .hexp-ac-title{ font-size:14.5px; font-weight:600; color:#1A2847; line-height:1.45; margin-bottom:14px; } .hexp-ac-code-box{ display:flex; align-items:stretch; border:2px dashed #94A3B8; border-radius:8px; background:#F8FAFC; overflow:hidden; margin-bottom:14px; } .hexp-ac-code-text{ flex:1; padding:10px 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight:800; font-size:14px; color:#1A2847; letter-spacing:1px; text-align:center; display:flex; align-items:center; justify-content:center; min-height:38px; } .hexp-ac-copy{ background:transparent; border:none; border-left:1px dashed #94A3B8; padding:0 14px; cursor:pointer; color:#64748B; font-size:15px; transition:color .15s, background .15s; } .hexp-ac-copy:hover{ background:#fff; color:var(--hexp-primary); } .hexp-ac-copy.copied{ color:#16A34A; } .hexp-ac-redeem{ display:block; width:100%; background:linear-gradient(180deg, #FB923C 0%, #F97316 100%); color:#fff; text-align:center; padding:13px 16px; border-radius:8px; font-weight:800; font-size:14.5px; text-decoration:none; transition:all .2s ease; box-shadow:0 4px 12px rgba(249,115,22,.25); letter-spacing:.3px; } .hexp-ac-redeem:hover{ background:linear-gradient(180deg, #F97316 0%, #EA580C 100%); color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(249,115,22,.35); } html[dir=rtl] .hexp-ac-copy{ border-left:none; border-right:1px dashed #94A3B8; } /* ============================================================ * Hostinger Alternatives Section — HostAdvice grid style * ============================================================ */ .hexp-alternatives-section{ margin-top:48px; padding-top:32px; border-top:1px solid #E5E7EB; } .hexp-alt-section-title{ font-size:26px; font-weight:800; color:#1A2847; margin:0 0 24px; } .hexp-alt-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; } .hexp-alt-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:18px 20px; min-height:80px; text-decoration:none; color:inherit; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .hexp-alt-card:hover{ border-color:var(--hexp-primary); box-shadow:0 8px 24px rgba(37,99,235,.10); transform:translateY(-2px); } .hexp-alt-logo{ flex:1; display:flex; align-items:center; justify-content:center; min-width:0; min-height:42px; } .hexp-alt-logo img{ max-height:36px; max-width:100%; width:auto; object-fit:contain; } .hexp-alt-logo-text{ font-size:15px; font-weight:800; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .hexp-alt-vs{ flex:0 0 auto; font-size:12.5px; font-weight:700; color:#9CA3AF; text-transform:uppercase; letter-spacing:1px; padding:4px 8px; } @media (max-width:900px){ .hexp-alt-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:520px){ .hexp-alt-grid{ grid-template-columns:1fr; } } /* ============================================================ * FAQ Section — Accordion (HostAdvice-style) * ============================================================ */ .hexp-faq-section{ margin-top:48px; padding-top:32px; border-top:1px solid #E5E7EB; } .hexp-faq-section-title{ font-size:26px; font-weight:800; color:#1A2847; margin:0 0 24px; } .hexp-faq-accordion{ display:flex; flex-direction:column; gap:12px; } .hexp-faq-item{ background:#fff; border:1px solid #E5E7EB; border-radius:12px; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; } .hexp-faq-item:hover{ border-color:#CBD5E1; } .hexp-faq-item.is-open{ border-color:var(--hexp-primary); box-shadow:0 4px 16px rgba(37,99,235,.08); } .hexp-faq-q{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:16px; padding:18px 22px; background:transparent; border:none; cursor:pointer; font-family:inherit; font-size:16px; font-weight:700; color:#1A2847; text-align:left; line-height:1.4; transition:color .15s ease, background .15s ease; } .hexp-faq-q:hover{ color:var(--hexp-primary); background:#F8FAFC; } .hexp-faq-q-text{ flex:1; min-width:0; } .hexp-faq-icon{ flex:0 0 auto; color:#9CA3AF; font-size:14px; transition:transform .3s ease, color .15s ease; } .hexp-faq-item.is-open .hexp-faq-icon{ transform:rotate(180deg); color:var(--hexp-primary); } .hexp-faq-item.is-open .hexp-faq-q{ color:var(--hexp-primary); } /* The collapsible answer body — uses max-height for smooth animation */ .hexp-faq-a{ max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1); } .hexp-faq-item.is-open .hexp-faq-a{ max-height:1000px; /* large enough for any answer */ } .hexp-faq-a-inner{ padding:0 22px 20px; font-size:15px; color:#4B5563; line-height:1.7; } .hexp-faq-a-inner p{ margin:0 0 12px; } .hexp-faq-a-inner p:last-child{ margin-bottom:0; } .hexp-faq-a-inner a{ color:var(--hexp-primary); text-decoration:underline; } @media (max-width:640px){ .hexp-faq-section-title{ font-size:22px; } .hexp-faq-q{ font-size:15px; padding:16px 18px; gap:12px; } .hexp-faq-a-inner{ padding:0 18px 18px; font-size:14.5px; } } html[dir=rtl] .hexp-faq-q{ text-align:right; } /* ============================================================ * HostAdvice-style sidebar nav widget (Single review page) * ============================================================ */ /* sidebar layout consolidated above with hexp-single-grid — leave this block empty */ .hexp-side-nav-widget{ background:#fff; border:1px solid #E5E7EB; border-radius:14px; box-sizing: border-box; width: 100%; max-width: 100%; /* Explicitly clip any sub-pixel horizontal overflow. Without this, browsers treat overflow-y:auto as needing both axes available and a phantom horizontal scrollbar appears even when nothing actually overflows. v3.7.17 fix. */ overflow-x: hidden; overflow-y: visible; /* No inner position:sticky here — the parent .hexp-single-sidebar is already sticky (see line 1365). Nesting two sticky containers makes the inner widget detach as you scroll and visually drop on top of the next sidebar card. v3.7.17 fix. */ } /* On screens where the sidebar stacks (mobile/tablet) nothing extra is needed — the parent stops being sticky at this breakpoint anyway. */ @media (max-width: 1024px){ .hexp-side-nav-widget{ overflow-x: hidden; } } .hexp-side-nav-top{ padding:24px 20px 20px; display:flex; flex-direction:column; align-items:center; gap:14px; border-bottom:1px solid #F1F5F9; } .hexp-side-nav-logo{ display:flex; align-items:center; justify-content:center; min-height:50px; width:100%; } .hexp-side-nav-logo img{ max-height:42px; max-width:200px; width:auto; object-fit:contain; } .hexp-side-nav-visit{ display:flex; align-items:center; justify-content:center; width:100%; background:var(--hexp-primary); color:#fff; padding:13px 20px; border-radius:30px; font-weight:700; font-size:14.5px; text-decoration:none; transition:all .2s ease; box-shadow:0 4px 12px rgba(37,99,235,.22); } .hexp-side-nav-visit:hover{ background:#1d4ed8; color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(37,99,235,.3); } .hexp-side-nav-coupons{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#1A2847; text-decoration:none; padding:6px 4px; transition:color .15s; } .hexp-side-nav-coupons:hover{ color:var(--hexp-primary); } .hexp-side-nav-coupon-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:24px; padding:0 9px; background:#16A34A; color:#fff; border-radius:12px; font-size:12px; font-weight:800; } .hexp-side-nav-list{ display:flex; flex-direction:column; } .hexp-side-nav-item{ display:block; padding:14px 22px; color:#4B5563; font-size:14.5px; font-weight:600; text-decoration:none; border-left:3px solid transparent; transition:all .15s ease; } .hexp-side-nav-item:hover{ background:#F8FAFC; color:#1A2847; } .hexp-side-nav-item.active{ background:#F0F4FF; color:var(--hexp-primary); border-left-color:var(--hexp-primary); } .hexp-side-nav-write{ display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 20px; background:#FAFBFC; color:var(--hexp-primary); font-weight:700; font-size:14.5px; text-decoration:none; border-top:1px solid #F1F5F9; transition:background .15s, color .15s; } .hexp-side-nav-write:hover{ background:#F0F4FF; color:#1d4ed8; } @media (max-width:900px){ /* On narrow screens force-clip horizontal only. The earlier rule was `overflow:hidden` (both axes) which clipped the absolute-positioned "Check Coupons" tooltip. v3.7.17 fix. */ .hexp-side-nav-widget{ overflow-x:hidden; overflow-y:visible; } } /* Hover tooltip for "Check Coupons" link */ .hexp-side-coupons-wrap{ position:relative; } .hexp-side-coupons-tooltip{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); background:#fff; border-radius:12px; box-shadow:0 16px 40px rgba(15,23,42,.15); padding:14px; width:340px; z-index:100; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease, transform .2s ease; max-height:380px; overflow-y:auto; pointer-events:none; } .hexp-side-coupons-tooltip::before{ content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #fff; filter:drop-shadow(0 -2px 2px rgba(0,0,0,.04)); } .hexp-side-coupons-wrap:hover .hexp-side-coupons-tooltip, .hexp-side-coupons-wrap:focus-within .hexp-side-coupons-tooltip{ opacity:1; visibility:visible; pointer-events:auto; } .hexp-side-coupons-tooltip-title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:#1A2847; padding:0 6px 10px; border-bottom:1px solid #F1F5F9; margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; } .hexp-side-coupons-tooltip-title i{ color:#16A34A; } .hexp-side-coupon-row{ display:flex; gap:10px; padding:10px; border-radius:8px; cursor:pointer; transition:background .15s ease; text-decoration:none; color:inherit; } .hexp-side-coupon-row:hover{ background:#F9FAFB; } .hexp-side-coupon-row > i{ color:#F97316; font-size:16px; flex-shrink:0; margin-top:3px; } .hexp-side-coupon-label{ font-size:11px; font-weight:800; color:#EA580C; text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px; } .hexp-side-coupon-title{ font-size:13px; font-weight:600; color:#1A2847; line-height:1.4; } @media (max-width:640px){ .hexp-side-coupons-tooltip{ position:fixed; top:auto; bottom:20px; left:10px; right:10px; width:auto; transform:none; } .hexp-side-coupons-tooltip::before{ display:none; } } html[dir=rtl] .hexp-side-coupons-tooltip{ left:50%; transform:translateX(-50%); } html[dir=rtl] .hexp-side-nav-item{ border-left:none; border-right:3px solid transparent; } html[dir=rtl] .hexp-side-nav-item.active{ border-right-color:var(--hexp-primary); } /* ============================================================ * Company Info Page (About / Contact / Affiliate / Privacy / Terms) * Single page with sticky left tabs + switchable panes * ============================================================ */ .hexp-info-page{ padding:40px 0 80px; background:#FAFBFC; min-height:60vh; } .hexp-info-breadcrumb{ display:flex; align-items:center; gap:8px; font-size:14px; color:#6B7280; margin-bottom:24px; } .hexp-info-breadcrumb a{ color:var(--hexp-primary); text-decoration:none; font-weight:600; } .hexp-info-breadcrumb a:hover{ text-decoration:underline; } .hexp-info-breadcrumb span:not(.hexp-info-current-label){ color:#9CA3AF; } .hexp-info-current-label{ color:#1A2847; font-weight:600; } .hexp-info-grid{ display:grid; grid-template-columns:280px 1fr; gap:32px; align-items:start; } /* LEFT — Tabs */ .hexp-info-tabs{ display:flex; flex-direction:column; background:#fff; border:1px solid #E5E7EB; border-radius:14px; padding:8px; position:sticky; top:90px; } .hexp-info-tab{ display:block; width:100%; background:transparent; border:none; cursor:pointer; padding:14px 18px; font-size:15px; font-weight:600; color:#4B5563; text-align:left; border-radius:10px; font-family:inherit; transition:all .15s ease; border-left:3px solid transparent; margin-left:0; } .hexp-info-tab:hover{ background:#F8FAFC; color:#1A2847; } .hexp-info-tab.active{ background:#F0F4FF; color:var(--hexp-primary); border-left-color:var(--hexp-primary); padding-left:18px; } /* RIGHT — Content */ .hexp-info-content{ background:#fff; border:1px solid #E5E7EB; border-radius:14px; padding:48px 56px; min-width:0; } .hexp-info-pane{ animation:hexpInfoFade .25s ease; } .hexp-info-pane[hidden]{ display:none; } @keyframes hexpInfoFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } .hexp-info-pane h1{ font-size:34px; font-weight:800; color:#1A2847; margin:0 0 14px; letter-spacing:-0.4px; } .hexp-info-pane h2{ font-size:22px; font-weight:800; color:#1A2847; margin:36px 0 14px; letter-spacing:-0.2px; } .hexp-info-lede{ font-size:17px; color:#4B5563; line-height:1.7; margin:0 0 28px; padding-bottom:24px; border-bottom:1px solid #F1F5F9; } .hexp-info-pane p{ font-size:15.5px; color:#4B5563; line-height:1.75; margin:0 0 16px; } .hexp-info-pane ul, .hexp-info-pane ol{ font-size:15.5px; color:#4B5563; line-height:1.8; padding-left:22px; margin:0 0 16px; } .hexp-info-pane li{ margin-bottom:8px; } .hexp-info-pane li strong{ color:#1A2847; } .hexp-info-cta{ display:inline-flex; align-items:center; gap:10px; background:var(--hexp-primary); color:#fff; padding:14px 28px; border-radius:30px; font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 6px 16px rgba(37,99,235,.25); transition:all .2s ease; } .hexp-info-cta:hover{ background:#1d4ed8; color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px rgba(37,99,235,.32); } .hexp-info-cta i{ transition:transform .2s ease; } .hexp-info-cta:hover i{ transform:translateX(4px); } /* Contact cards grid */ .hexp-info-contact-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin:24px 0 32px; } .hexp-info-contact-card{ background:#FAFBFC; border:1px solid #E5E7EB; border-radius:12px; padding:24px 20px; text-align:center; transition:border-color .2s, transform .2s, box-shadow .2s; } .hexp-info-contact-card:hover{ border-color:var(--hexp-primary); transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,99,235,.08); } .hexp-info-contact-icon{ width:48px; height:48px; margin:0 auto 14px; background:linear-gradient(135deg, #E0EAFF, #F0F4FF); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--hexp-primary); font-size:18px; } .hexp-info-contact-card h3{ font-size:15.5px; font-weight:800; color:#1A2847; margin:0 0 8px; } .hexp-info-contact-card p{ font-size:13.5px; line-height:1.5; margin:0 0 12px; color:#6B7280; } .hexp-info-contact-link{ display:inline-block; font-size:13.5px; font-weight:700; color:var(--hexp-primary); text-decoration:none; word-break:break-all; } .hexp-info-contact-link:hover{ text-decoration:underline; } /* Affiliate perks grid */ .hexp-info-perks{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin:18px 0 24px; } .hexp-info-perk{ background:#FAFBFC; border:1px solid #E5E7EB; border-radius:12px; padding:22px; transition:border-color .2s; } .hexp-info-perk:hover{ border-color:var(--hexp-primary); } .hexp-info-perk i{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; background:linear-gradient(135deg, #E0EAFF, #F0F4FF); border-radius:10px; color:var(--hexp-primary); font-size:16px; margin-bottom:12px; } .hexp-info-perk h3{ font-size:15.5px; font-weight:800; color:#1A2847; margin:0 0 6px; } .hexp-info-perk p{ font-size:14px; line-height:1.55; color:#6B7280; margin:0; } @media (max-width:900px){ .hexp-info-grid{ grid-template-columns:1fr; } .hexp-info-tabs{ position:static; flex-direction:row; overflow-x:auto; gap:4px; padding:6px; } .hexp-info-tab{ flex:0 0 auto; text-align:center; border-left:none; border-bottom:3px solid transparent; padding:10px 16px; font-size:14px; } .hexp-info-tab.active{ border-left:none; border-bottom-color:var(--hexp-primary); padding-left:16px; } .hexp-info-content{ padding:32px 24px; } .hexp-info-pane h1{ font-size:26px; } .hexp-info-pane h2{ font-size:18px; margin-top:28px; } .hexp-info-contact-grid{ grid-template-columns:1fr; } .hexp-info-perks{ grid-template-columns:1fr; } } html[dir=rtl] .hexp-info-tab{ text-align:right; border-left:none; border-right:3px solid transparent; } html[dir=rtl] .hexp-info-tab.active{ border-right-color:var(--hexp-primary); } html[dir=rtl] .hexp-info-pane ul, html[dir=rtl] .hexp-info-pane ol{ padding-left:0; padding-right:22px; } html[dir=rtl] .hexp-info-cta:hover i{ transform:translateX(-4px); } /* ============================================================ * Blog Home Page (HostAdvice-style) * ============================================================ */ /* Hero */ .hexp-blog-hero{ background:linear-gradient(135deg, #1A2847 0%, #2B3F6E 100%); color:#fff; padding:48px 0 56px; position:relative; overflow:hidden; } .hexp-blog-hero::after{ content:""; position:absolute; right:-100px; top:50%; transform:translateY(-50%); width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(251,146,60,.18), transparent 70%); pointer-events:none; } .hexp-blog-hero-inner{ position:relative; z-index:2; } .hexp-blog-hero-text{ max-width:780px; } .hexp-blog-breadcrumb{ display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.75); margin-bottom:16px; } .hexp-blog-breadcrumb a{ color:rgba(255,255,255,.75); text-decoration:none; } .hexp-blog-breadcrumb a:hover{ color:#fff; } .hexp-blog-hero h1{ font-size:42px; font-weight:800; line-height:1.18; letter-spacing:-0.6px; margin:0 0 16px; color:#fff; } .hexp-blog-hero-desc{ font-size:17px; color:rgba(255,255,255,.8); line-height:1.6; margin:0 0 28px; max-width:680px; } .hexp-blog-search{ position:relative; display:flex; align-items:center; background:#fff; border-radius:50px; padding:6px 6px 6px 22px; max-width:640px; box-shadow:0 12px 28px rgba(0,0,0,.18); } .hexp-blog-search > i{ color:#9CA3AF; font-size:16px; margin-right:12px; } .hexp-blog-search input[type=search]{ flex:1; border:none; outline:none; background:transparent; font-size:15px; font-family:inherit; padding:14px 8px; color:#1A2847; min-width:0; } .hexp-blog-search input[type=search]::placeholder{ color:#9CA3AF; } .hexp-blog-search-btn{ background:var(--hexp-primary); color:#fff; border:none; padding:13px 28px; border-radius:50px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit; transition:background .15s; } .hexp-blog-search-btn:hover{ background:#1d4ed8; } /* Section title */ .hexp-blog-section-title{ font-size:30px; font-weight:800; color:#1A2847; margin:0 0 28px; letter-spacing:-0.4px; } /* Categories grid - horizontal cards (HostAdvice Arabic-style) */ .hexp-blog-categories{ padding:60px 0 30px; background:#fff; } .hexp-blog-cat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; } .hexp-blog-cat-card{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border:1px solid #E5E7EB; border-radius:14px; padding:18px 22px; text-decoration:none; color:inherit; transition:border-color .2s, transform .2s, box-shadow .2s; min-height:88px; } .hexp-blog-cat-card:hover{ border-color:var(--hexp-primary); transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,99,235,.10); } .hexp-blog-cat-name-wrap{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .hexp-blog-cat-icon{ flex:0 0 auto; width:54px; height:54px; background:linear-gradient(135deg, #F8FAFC 0%, #E0EAFF 100%); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--hexp-primary); font-size:22px; transition:all .2s ease; } .hexp-blog-cat-card:hover .hexp-blog-cat-icon{ background:linear-gradient(135deg, var(--hexp-primary) 0%, #1d4ed8 100%); color:#fff; transform:scale(1.05); } .hexp-blog-cat-name{ font-size:16px; font-weight:700; color:#1A2847; line-height:1.3; } .hexp-blog-cat-count{ font-size:12.5px; color:#9CA3AF; font-weight:500; } /* Show more articles button */ .hexp-blog-load-more-wrap{ margin-top:48px; display:flex; justify-content:center; } .hexp-blog-load-more{ display:inline-flex; align-items:center; gap:10px; padding:14px 40px; background:#fff; border:1.5px solid var(--hexp-primary); color:var(--hexp-primary); border-radius:50px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; transition:all .2s ease; } .hexp-blog-load-more i{ transition:transform .2s ease; } .hexp-blog-load-more:hover{ background:var(--hexp-primary); color:#fff; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,99,235,.25); } .hexp-blog-load-more:hover i{ transform:translateY(2px); } .hexp-blog-load-more.is-loading{ opacity:.7; cursor:wait; } .hexp-blog-load-more.is-loading i{ animation:hexp-spin .8s linear infinite; } html[dir=rtl] .hexp-blog-cat-card{ /* arabic mirror — icon on right by default flex-direction is correct */ } /* Write for us banner */ .hexp-blog-write-for-us{ padding:40px 0; background:#fff; } .hexp-write-banner{ background:#1A2847; border-radius:16px; padding:22px 28px; display:flex; align-items:center; gap:20px; color:#fff; flex-wrap:wrap; position:relative; overflow:hidden; } .hexp-write-banner::after{ content:""; position:absolute; left:-40px; top:50%; transform:translateY(-50%); width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(251,146,60,.12), transparent 65%); pointer-events:none; } .hexp-write-banner-icon{ flex:0 0 auto; width:54px; height:54px; background:linear-gradient(135deg, #FB923C, #F97316); border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; box-shadow:0 8px 16px rgba(251,146,60,.3); z-index:2; } .hexp-write-banner-text{ flex:1; display:flex; align-items:center; gap:8px; font-size:15px; flex-wrap:wrap; z-index:2; min-width:0; } .hexp-write-banner-text strong{ color:#FB923C; font-size:17px; font-weight:800; } .hexp-write-banner-text span{ color:rgba(255,255,255,.8); } .hexp-write-banner-text a{ color:#60A5FA; font-weight:700; text-decoration:none; word-break:break-all; } .hexp-write-banner-text a:hover{ text-decoration:underline; } .hexp-write-banner-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--hexp-primary); color:#fff; padding:11px 22px; border-radius:30px; font-weight:700; font-size:14px; text-decoration:none; transition:all .15s; z-index:2; white-space:nowrap; } .hexp-write-banner-btn:hover{ background:#1d4ed8; color:#fff; transform:translateY(-1px); } /* Latest posts grid */ .hexp-blog-latest{ padding:30px 0 80px; background:#fff; } .hexp-blog-posts-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .hexp-blog-post-card{ background:#fff; border:1px solid #E5E7EB; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s, box-shadow .2s; } .hexp-blog-post-card:hover{ border-color:var(--hexp-primary); transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.08); } .hexp-blog-post-image{ position:relative; display:block; background:linear-gradient(135deg, #F0F4FF, #FCE7F3); overflow:hidden; } .hexp-blog-post-image img{ width:100%; height:auto; display:block; transition:transform .4s ease; } .hexp-blog-post-card:hover .hexp-blog-post-image img{ transform:scale(1.05); } .hexp-blog-post-image-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#CBD5E1; font-size:42px; } .hexp-blog-post-cat{ position:absolute; top:12px; right:12px; background:rgba(255,255,255,.95); color:var(--hexp-primary); padding:5px 12px; border-radius:20px; font-size:12px; font-weight:700; backdrop-filter:blur(8px); box-shadow:0 2px 8px rgba(0,0,0,.08); } .hexp-blog-post-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; } .hexp-blog-post-title{ font-size:16px; font-weight:700; line-height:1.4; margin:0; color:#1A2847; } .hexp-blog-post-title a{ color:inherit; text-decoration:none; transition:color .15s; } .hexp-blog-post-title a:hover{ color:var(--hexp-primary); } .hexp-blog-post-meta-line{ font-size:13px; color:#9CA3AF; margin-bottom:6px; } .hexp-blog-post-author{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid #F1F5F9; } .hexp-blog-post-author-name{ font-size:13.5px; font-weight:700; color:#1A2847; } .hexp-blog-post-author-role{ font-size:11.5px; color:#9CA3AF; } .hexp-blog-post-date{ font-size:12px; color:#9CA3AF; font-weight:500; white-space:nowrap; } /* About blog text (footer-like description) */ .hexp-blog-about-text{ max-width:920px; margin:60px auto 0; padding:32px 0 0; border-top:1px solid #F1F5F9; text-align:center; } .hexp-blog-about-text p{ font-size:15px; line-height:1.75; color:#6B7280; margin:0; } /* Responsive */ @media (max-width:1100px){ .hexp-blog-cat-grid{ grid-template-columns:repeat(3, 1fr); } .hexp-blog-posts-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:780px){ .hexp-blog-hero{ padding:40px 0 44px; } .hexp-blog-hero h1{ font-size:30px; } .hexp-blog-hero-desc{ font-size:15px; } .hexp-blog-search{ flex-direction:column; padding:14px; gap:10px; border-radius:18px; } .hexp-blog-search > i{ display:none; } .hexp-blog-search input[type=search]{ width:100%; padding:8px 4px; } .hexp-blog-search-btn{ width:100%; padding:12px 20px; } .hexp-blog-cat-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; } .hexp-blog-posts-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; } .hexp-write-banner{ padding:20px; } .hexp-write-banner-btn{ width:100%; justify-content:center; } .hexp-blog-section-title{ font-size:24px; } } @media (max-width:480px){ .hexp-blog-cat-grid{ grid-template-columns:1fr 1fr; } .hexp-blog-posts-grid{ grid-template-columns:1fr; } } html[dir=rtl] .hexp-blog-hero::after{ right:auto; left:-100px; } html[dir=rtl] .hexp-write-banner::after{ left:auto; right:-40px; } /* ============================================================ * Single Post / Article Page (HostAdvice-style) * ============================================================ */ .hexp-article-page{ background:#FAFBFC; padding:40px 0 80px; } .hexp-article-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:40px; align-items:start; } .hexp-article-main{ background:#fff; border:1px solid #E5E7EB; border-radius:18px; padding:48px 56px; min-width:0; } /* Header */ .hexp-article-header{ margin-bottom:32px; padding-bottom:28px; border-bottom:1px solid #F1F5F9; } .hexp-article-cat-tag{ display:inline-block; background:#EFF4FF; color:var(--hexp-primary); padding:5px 14px; border-radius:20px; font-size:12.5px; font-weight:700; text-decoration:none; margin-bottom:18px; transition:background .15s, color .15s; text-transform:uppercase; letter-spacing:.4px; } .hexp-article-cat-tag:hover{ background:var(--hexp-primary); color:#fff; } .hexp-article-title{ font-size:42px; font-weight:800; line-height:1.2; color:#1A2847; margin:0 0 28px; letter-spacing:-0.6px; } .hexp-article-byline{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .hexp-article-author{ display:flex; align-items:center; gap:14px; } .hexp-article-author-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid #F1F5F9; } .hexp-article-author-name{ font-size:15.5px; font-weight:800; color:#1A2847; margin-bottom:3px; } .hexp-article-author-role{ font-size:13px; color:#6B7280; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .hexp-article-author-role .hexp-dot{ color:#CBD5E1; } .hexp-article-meta-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; } .hexp-article-share{ display:flex; gap:6px; } .hexp-share-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; background:#F8FAFC; color:#6B7280; border-radius:50%; text-decoration:none; font-size:13px; transition:all .15s; } .hexp-share-btn:hover{ background:var(--hexp-primary); color:#fff; transform:translateY(-2px); } .hexp-article-date{ font-size:12.5px; color:#9CA3AF; font-weight:500; } /* Hero image */ .hexp-article-hero-image{ margin:0 0 40px; border-radius:14px; overflow:hidden; background:linear-gradient(135deg, #F0F4FF, #FCE7F3); } .hexp-article-hero-image img{ width:100%; height:auto; display:block; } /* Content body */ .hexp-article-content{ font-size:17px; line-height:1.8; color:#374151; } .hexp-article-content p{ margin:0 0 22px; } .hexp-article-content h2{ font-size:28px; font-weight:800; color:#1A2847; margin:42px 0 16px; letter-spacing:-0.3px; scroll-margin-top:90px; } .hexp-article-content h3{ font-size:22px; font-weight:800; color:#1A2847; margin:32px 0 12px; scroll-margin-top:90px; } .hexp-article-content h4{ font-size:18px; font-weight:700; color:#1A2847; margin:24px 0 10px; } .hexp-article-content ul, .hexp-article-content ol{ margin:0 0 22px; padding-left:24px; } .hexp-article-content li{ margin-bottom:8px; } .hexp-article-content li strong{ color:#1A2847; } .hexp-article-content a{ color:var(--hexp-primary); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px; } .hexp-article-content a:hover{ color:#1d4ed8; } .hexp-article-content blockquote{ margin:28px 0; padding:20px 26px; background:#F8FAFC; border-left:4px solid var(--hexp-primary); border-radius:8px; font-size:17px; color:#1A2847; font-style:italic; } .hexp-article-content img{ max-width:100%; height:auto; border-radius:12px; margin:24px 0; } .hexp-article-content code{ background:#F1F5F9; color:#DC2626; padding:2px 6px; border-radius:4px; font-size:14.5px; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .hexp-article-content pre{ background:#1A2847; color:#F8FAFC; padding:20px; border-radius:10px; overflow-x:auto; margin:24px 0; font-size:14px; line-height:1.6; } .hexp-article-content pre code{ background:transparent; color:inherit; padding:0; } /* Author bio block */ .hexp-article-author-bio{ display:flex; align-items:flex-start; gap:18px; margin:48px 0 0; padding:24px; background:#FAFBFC; border:1px solid #E5E7EB; border-radius:14px; } .hexp-article-author-bio-avatar{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:0 0 auto; } .hexp-article-author-bio-label{ font-size:11.5px; color:#9CA3AF; text-transform:uppercase; letter-spacing:.6px; font-weight:700; margin-bottom:4px; } .hexp-article-author-bio-name{ font-size:18px; font-weight:800; color:#1A2847; margin-bottom:8px; } .hexp-article-author-bio-text{ font-size:14.5px; line-height:1.6; color:#6B7280; margin:0; } /* Related articles */ .hexp-article-related{ margin-top:56px; padding-top:36px; border-top:1px solid #E5E7EB; } .hexp-article-related-title{ font-size:24px; font-weight:800; color:#1A2847; margin:0 0 22px; } .hexp-article-related-grid{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding-bottom:8px; } .hexp-article-related-grid::-webkit-scrollbar{height:6px} .hexp-article-related-grid::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px} .hexp-article-related-grid::-webkit-scrollbar-track{background:transparent} .hexp-article-related-card{ background:#fff; border:1px solid #E5E7EB; border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:all .2s ease; min-width:calc(33.333% - 14px); flex:0 0 calc(33.333% - 14px); scroll-snap-align:start; } .hexp-article-related-card:hover{ border-color:var(--hexp-primary); transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.06); } .hexp-article-related-img{ position:relative; background:linear-gradient(135deg, #F0F4FF, #FCE7F3); overflow:hidden; } .hexp-article-related-img img{ width:100%; height:auto; display:block; } .hexp-article-related-img-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#CBD5E1; font-size:32px; } .hexp-article-related-cat{ position:absolute; top:10px; right:10px; background:rgba(255,255,255,.95); color:var(--hexp-primary); padding:4px 10px; border-radius:14px; font-size:11px; font-weight:700; } .hexp-article-related-card h3{ font-size:14.5px; font-weight:700; color:#1A2847; line-height:1.4; margin:14px 14px 8px; } .hexp-article-related-meta{ font-size:12px; color:#9CA3AF; margin:0 14px 14px; margin-top:auto; padding-top:8px; } /* Sidebar */ .hexp-article-sidebar{ display:flex; flex-direction:column; gap:18px; position:sticky; top:90px; } .hexp-article-side-card{ background:#fff; border:1px solid #E5E7EB; border-radius:14px; padding:22px 22px 24px; } .hexp-article-side-title{ font-size:14px; font-weight:800; color:#1A2847; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid #F1F5F9; text-transform:uppercase; letter-spacing:.6px; } /* Popular providers list */ .hexp-article-popular-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; } .hexp-article-popular-row{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid #F8FAFC; } .hexp-article-popular-row:last-child{ border-bottom:none; } .hexp-article-popular-rank{ flex:0 0 auto; width:24px; height:24px; background:#1A2847; color:#fff; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; } .hexp-article-popular-info{ flex:1; min-width:0; } .hexp-article-popular-name{ display:block; font-size:13.5px; font-weight:700; color:#1A2847; text-decoration:none; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hexp-article-popular-name:hover{ color:var(--hexp-primary); } .hexp-article-popular-rating{ font-size:11.5px; color:#6B7280; } .hexp-article-popular-rating .stars{ color:#F97316; letter-spacing:.5px; font-size:10px; margin-right:3px; } .hexp-article-popular-visit{ flex:0 0 auto; background:transparent; border:1.5px solid var(--hexp-primary); color:var(--hexp-primary); padding:5px 12px; border-radius:14px; font-size:11.5px; font-weight:700; text-decoration:none; transition:all .15s; } .hexp-article-popular-visit:hover{ background:var(--hexp-primary); color:#fff; } /* Write for Us card */ .hexp-article-write-card{ background:linear-gradient(180deg, #FAFBFC 0%, #fff 100%); } .hexp-article-write-pitch{ font-size:13px; color:#6B7280; margin:0 0 4px; } .hexp-article-write-email{ display:block; font-size:14px; font-weight:700; color:var(--hexp-primary); text-decoration:none; margin-bottom:18px; word-break:break-all; } .hexp-article-write-email:hover{ text-decoration:underline; } .hexp-article-write-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px 16px; border:1.5px solid var(--hexp-primary); color:var(--hexp-primary); background:#fff; border-radius:30px; font-weight:700; font-size:13.5px; text-decoration:none; transition:all .15s; } .hexp-article-write-btn:hover{ background:var(--hexp-primary); color:#fff; transform:translateY(-1px); } .hexp-article-write-btn i{ font-size:11px; } /* Table of Contents */ .hexp-article-toc ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; } .hexp-article-toc li{ padding:0; } .hexp-article-toc li.toc-level-3{ padding-left:14px; } .hexp-article-toc a{ display:block; padding:8px 12px; font-size:13.5px; color:#6B7280; text-decoration:none; border-left:2px solid transparent; margin-left:-12px; transition:all .15s; line-height:1.4; } .hexp-article-toc a:hover, .hexp-article-toc a.is-active{ color:var(--hexp-primary); background:#F8FAFC; border-left-color:var(--hexp-primary); } /* Responsive */ @media (max-width:1000px){ .hexp-article-grid{ grid-template-columns:1fr; } .hexp-article-sidebar{ position:static; flex-direction:column-reverse; } } @media (max-width:780px){ .hexp-article-page{ padding:24px 0 60px; } .hexp-article-main{ padding:28px 22px; border-radius:14px; } .hexp-article-title{ font-size:28px; } .hexp-article-content{ font-size:16px; } .hexp-article-content h2{ font-size:22px; margin-top:32px; } .hexp-article-content h3{ font-size:19px; } .hexp-article-byline{ flex-direction:column; align-items:flex-start; gap:16px; } .hexp-article-meta-right{ align-items:flex-start; } .hexp-article-related-grid .hexp-article-related-card{ min-width:85%; flex:0 0 85%; } .hexp-article-author-bio{ flex-direction:column; } } html[dir=rtl] .hexp-article-content blockquote{ border-left:none; border-right:4px solid var(--hexp-primary); } html[dir=rtl] .hexp-article-content ul, html[dir=rtl] .hexp-article-content ol{ padding-left:0; padding-right:24px; } html[dir=rtl] .hexp-article-toc a{ border-left:none; border-right:2px solid transparent; margin-left:0; margin-right:-12px; } html[dir=rtl] .hexp-article-toc a:hover, html[dir=rtl] .hexp-article-toc a.is-active{ border-right-color:var(--hexp-primary); } html[dir=rtl] .hexp-article-toc li.toc-level-3{ padding-left:0; padding-right:14px; } /* ============================================================ * Popular Providers — Polished card design (single article sidebar) * Each card is a self-contained mini "review card" with: * rank badge → logo → score label + number → progress bar * → review count → price + Visit CTA * ============================================================ */ .hexp-article-popular-card{ padding:0; /* override default side-card padding */ overflow:hidden; background:linear-gradient(180deg, #FAFBFC 0%, #fff 60%); } .hexp-article-popular-card .hexp-article-side-title{ display:flex; align-items:center; gap:8px; margin:0; padding:18px 22px 14px; border-bottom:1px solid #F1F5F9; } .hexp-article-popular-card .hexp-article-side-title i{ color:#F59E0B; font-size:13px; } .hexp-pp-list{ display:flex; flex-direction:column; } .hexp-pp-item{ position:relative; padding:22px 22px 20px; border-bottom:1px solid #F1F5F9; transition:background .2s ease; } .hexp-pp-item:last-child{ border-bottom:none; } .hexp-pp-item:hover{ background:rgba(248,250,252,.6); } /* Rank badge floating top-left */ .hexp-pp-rank-badge{ position:absolute; top:14px; left:14px; width:28px; height:28px; background:linear-gradient(135deg, #1A2847 0%, #2B3F6E 100%); color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; box-shadow:0 4px 10px rgba(26,40,71,.2); z-index:2; } /* Special gold glow for #1 */ .hexp-pp-item:first-child .hexp-pp-rank-badge{ background:linear-gradient(135deg, #F59E0B 0%, #F97316 100%); box-shadow:0 4px 12px rgba(245,158,11,.35); } /* Logo */ .hexp-pp-logo{ height:54px; display:flex; align-items:center; justify-content:center; margin:6px 0 14px; padding-left:24px; /* clear the rank badge */ } .hexp-pp-logo img{ max-height:42px; max-width:160px; object-fit:contain; } .hexp-pp-logo-text{ font-size:18px; font-weight:800; letter-spacing:.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; } /* Score header row */ .hexp-pp-score-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; gap:10px; } .hexp-pp-score-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; } .hexp-pp-score-num{ font-size:24px; font-weight:800; color:#1A2847; letter-spacing:-0.5px; font-variant-numeric:tabular-nums; } /* Progress bar */ .hexp-pp-bar{ width:100%; height:8px; background:#F1F5F9; border-radius:99px; overflow:hidden; margin-bottom:8px; } .hexp-pp-bar-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg, #16A34A 0%, #22C55E 100%); transition:width .8s cubic-bezier(.4,0,.2,1); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); width:0; /* animated in via JS */ } /* Reviews line */ .hexp-pp-reviews-line{ font-size:11.5px; color:#9CA3AF; margin-bottom:14px; font-weight:500; } /* Bottom CTA row: price on left, button on right */ .hexp-pp-cta-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px dashed #E5E7EB; } .hexp-pp-price{ display:flex; align-items:baseline; gap:3px; min-width:0; } .hexp-pp-price-from{ font-size:10.5px; color:#9CA3AF; font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin-right:2px; } .hexp-pp-price-num{ font-size:18px; font-weight:800; color:#16A34A; letter-spacing:-0.3px; font-variant-numeric:tabular-nums; } .hexp-pp-price-per{ font-size:11px; color:#9CA3AF; font-weight:600; } .hexp-pp-visit-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--hexp-primary); color:#fff; padding:9px 16px; border-radius:30px; font-size:12.5px; font-weight:700; text-decoration:none; transition:all .2s ease; white-space:nowrap; box-shadow:0 3px 10px rgba(37,99,235,.22); } .hexp-pp-visit-btn i{ font-size:10px; transition:transform .2s; } .hexp-pp-visit-btn:hover{ background:#1d4ed8; color:#fff; transform:translateY(-1px); box-shadow:0 6px 14px rgba(37,99,235,.3); } .hexp-pp-visit-btn:hover i{ transform:translateX(3px); } html[dir=rtl] .hexp-pp-rank-badge{ left:auto; right:14px; } html[dir=rtl] .hexp-pp-logo{ padding-left:0; padding-right:24px; } html[dir=rtl] .hexp-pp-visit-btn:hover i{ transform:translateX(-3px); } /* ============================================================ * Companies Archive Page (List of All Hosting Companies) * HostAdvice-style: dark hero + podium + advanced filters + cards * ============================================================ */ /* HERO */ .hexp-companies-hero{ background: radial-gradient(circle at 90% 20%, rgba(251,146,60,.10), transparent 35%), radial-gradient(circle at 10% 100%, rgba(37,99,235,.14), transparent 45%), linear-gradient(135deg, #0F1B36 0%, #1A2847 50%, #2B3F6E 100%); color:#fff; padding:48px 0 30px; position:relative; } .hexp-companies-hero::before, .hexp-companies-hero::after{ display:none; } .hexp-companies-hero > .hexp-container{ position:relative; z-index:2; } .hexp-companies-hero-meta{ font-size:14px; color:rgba(255,255,255,.7); margin-bottom:14px; font-weight:500; } .hexp-companies-hero-title{ font-size:42px; font-weight:800; line-height:1.15; color:#fff; margin:0 0 14px; letter-spacing:-0.5px; } .hexp-companies-hero-desc{ font-size:15px; color:rgba(255,255,255,.78); line-height:1.6; max-width:1000px; margin:0 0 32px; } /* PODIUM (3 cards overlapping the boundary between hero and content) */ .hexp-companies-podium-wrap{ position:relative; z-index:3; margin-top:0; margin-bottom:-90px; /* podium overlaps the section below by ~90px */ } .hexp-companies-podium{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:end; } .hexp-companies-podium-card{ background:#fff; border-radius:14px; padding:18px 18px 16px; min-height:200px; text-align:center; box-shadow:0 18px 36px rgba(15,23,42,.14), 0 4px 8px rgba(15,23,42,.06); border:1px solid rgba(15,23,42,.05); position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; } .hexp-companies-podium-card.podium-1{ transform:translateY(-20px); min-height:220px; box-shadow:0 24px 48px rgba(15,23,42,.20), 0 6px 12px rgba(15,23,42,.08); z-index:2; } .hexp-companies-podium-tag{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(180deg, #16A34A 0%, #15803D 100%); color:#fff; padding:7px 18px; border-radius:16px; font-size:12.5px; font-weight:800; white-space:nowrap; box-shadow:0 4px 12px rgba(22,163,74,.3); letter-spacing:.3px; z-index:3; } .hexp-companies-podium-rank{ position:absolute; top:12px; left:12px; background:#1A2847; color:#fff; min-width:28px; height:26px; padding:0 9px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; line-height:1; z-index:2; } .hexp-companies-podium-card.podium-1 .hexp-companies-podium-rank{ background:linear-gradient(135deg, #F59E0B 0%, #F97316 100%); } .hexp-companies-podium-logo{ height:60px; display:flex; align-items:center; justify-content:center; margin:18px 0 4px; width:100%; flex-shrink:0; } .hexp-companies-podium-logo img{ max-height:48px; max-width:80%; object-fit:contain; } .hexp-companies-podium-logo-text{ font-size:22px; font-weight:800; letter-spacing:.4px; } .hexp-companies-podium-rating{ display:inline-flex; align-items:center; gap:8px; font-size:18px; flex-shrink:0; } .hexp-companies-podium-stars{ color:#F97316; letter-spacing:1.5px; font-size:15px; } .hexp-companies-podium-score{ font-weight:800; color:#1A2847; font-size:22px; letter-spacing:-0.3px; } .hexp-companies-podium-feature{ font-size:13.5px; color:#6B7280; display:inline-flex; align-items:center; gap:6px; flex-shrink:0; line-height:1.4; text-align:center; } .hexp-companies-podium-feature i{ color:#16A34A; font-size:11px; } .hexp-companies-podium-visit{ display:block; width:100%; padding:12px 18px; border-radius:30px; font-weight:700; font-size:14px; text-decoration:none; transition:all .2s ease; margin-top:auto; flex-shrink:0; text-align:center; letter-spacing:.2px; } .hexp-companies-podium-card.podium-1 .hexp-companies-podium-visit{ background:linear-gradient(180deg, #3B82F6 0%, #2563EB 100%); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.25); } .hexp-companies-podium-card.podium-1 .hexp-companies-podium-visit:hover{ background:linear-gradient(180deg, #2563EB 0%, #1d4ed8 100%); color:#fff; transform:translateY(-1px); box-shadow:0 6px 18px rgba(37,99,235,.32); } .hexp-companies-podium-card:not(.podium-1) .hexp-companies-podium-visit{ background:#fff; color:var(--hexp-primary); border:1.5px solid var(--hexp-primary); } .hexp-companies-podium-card:not(.podium-1) .hexp-companies-podium-visit:hover{ background:var(--hexp-primary); color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(37,99,235,.25); } /* FILTERS BAR */ .hexp-companies-filters-bar{ background:#fff; border-bottom:1px solid #E5E7EB; padding:95px 0 24px; /* matches hexp-tax-filters - clearance for podium overlap */ position:relative; } .hexp-companies-filters-toggle{ display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #D1D5DB; color:#374151; padding:11px 22px; border-radius:10px; font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; transition:all .15s ease; } .hexp-companies-filters-toggle:hover{ border-color:var(--hexp-primary); color:var(--hexp-primary); } .hexp-companies-filters-toggle[aria-expanded="true"]{ background:#1A2847; color:#fff; border-color:#1A2847; } .hexp-companies-filters-count{ display:none; background:var(--hexp-primary); color:#fff; min-width:22px; height:22px; padding:0 7px; border-radius:11px; font-size:12px; font-weight:800; align-items:center; justify-content:center; } .hexp-companies-filters-count.has-count{ display:inline-flex; } .hexp-companies-filters-toggle[aria-expanded="true"] .hexp-companies-filters-count{ background:#fff; color:#1A2847; } .hexp-companies-filters-panel{ background:#FAFBFC; max-height:0; overflow:hidden; opacity:0; margin-top:0; transition:max-height .35s ease, opacity .25s ease, margin-top .35s ease; border-top:1px solid transparent; } .hexp-companies-filters-panel.is-open{ max-height:600px; opacity:1; margin-top:20px; border-top-color:#E5E7EB; } .hexp-companies-filters-panel[hidden]{ display:block; } /* override [hidden] for transitions */ .hexp-companies-filters-panel > .hexp-container{ padding-top:24px; padding-bottom:24px; } .hexp-companies-filters-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; } /* COMPANIES LIST */ .hexp-companies-list-section{ padding:40px 0 80px; background:#fff; } /* GRAB YOUR COUPONS BANNER */ .hexp-coupons-banner{ display:flex; align-items:center; gap:24px; background:linear-gradient(135deg, #1A2847 0%, #2B3F6E 100%); color:#fff; border-radius:18px; padding:24px 32px; margin:24px 0; position:relative; overflow:hidden; } .hexp-coupons-banner::before{ content:""; position:absolute; left:-60px; top:50%; transform:translateY(-50%); width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(251,146,60,.18), transparent 65%); pointer-events:none; } .hexp-coupons-banner-fox{ flex:0 0 auto; width:72px; height:72px; background:linear-gradient(135deg, #FB923C, #F97316); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; box-shadow:0 8px 20px rgba(251,146,60,.4); position:relative; z-index:2; } .hexp-coupons-banner-text{ flex:1; min-width:0; z-index:2; } .hexp-coupons-banner-text h3{ font-size:24px; font-weight:800; color:#fff; margin:0 0 6px; letter-spacing:.3px; } .hexp-coupons-banner-text p{ font-size:13.5px; color:rgba(255,255,255,.85); margin:0; letter-spacing:.4px; } .hexp-coupons-banner-text strong{ color:#FB923C; font-weight:800; } .hexp-coupons-banner-discount{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; color:#fff; z-index:2; padding:0 8px; } .hexp-coupons-banner-discount .discount-up-to{ font-size:11px; font-weight:700; color:rgba(255,255,255,.85); letter-spacing:1px; text-transform:uppercase; } .hexp-coupons-banner-discount .discount-percent{ font-size:42px; font-weight:800; background:linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1; letter-spacing:-1px; margin:2px 0; } .hexp-coupons-banner-discount .discount-label{ font-size:11px; font-weight:700; color:rgba(255,255,255,.85); letter-spacing:1px; text-transform:uppercase; } .hexp-coupons-banner-btn{ flex:0 0 auto; display:inline-flex; align-items:center; background:linear-gradient(180deg, #FB923C 0%, #F97316 100%); color:#fff; padding:14px 32px; border-radius:30px; font-weight:800; font-size:14px; text-decoration:none; letter-spacing:.5px; box-shadow:0 6px 16px rgba(251,146,60,.35); transition:all .2s ease; z-index:2; white-space:nowrap; } .hexp-coupons-banner-btn:hover{ background:linear-gradient(180deg, #F97316 0%, #EA580C 100%); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(251,146,60,.45); } /* RESPONSIVE */ @media (max-width:900px){ .hexp-companies-hero-title{ font-size:32px; } .hexp-companies-hero-desc{ font-size:14.5px; margin-bottom:36px; } .hexp-companies-podium{ grid-template-columns:1fr; gap:14px; transform:none; } .hexp-companies-podium-card.podium-1{ transform:none; } .hexp-companies-filters-bar{ padding-top:32px; } .hexp-companies-filters-grid{ grid-template-columns:1fr; gap:20px; } .hexp-coupons-banner{ flex-wrap:wrap; padding:20px; gap:16px; } .hexp-coupons-banner-text h3{ font-size:20px; } .hexp-coupons-banner-discount .discount-percent{ font-size:34px; } .hexp-coupons-banner-btn{ width:100%; justify-content:center; } } @media (max-width:560px){ .hexp-companies-hero{ padding-top:32px; } .hexp-companies-hero-title{ font-size:26px; } .hexp-coupons-banner-fox{ width:54px; height:54px; font-size:22px; } } html[dir=rtl] .hexp-companies-hero::before{ right:auto; left:-200px; } html[dir=rtl] .hexp-companies-hero::after{ left:auto; right:-150px; } html[dir=rtl] .hexp-companies-podium-rank{ left:auto; right:10px; } html[dir=rtl] .hexp-coupons-banner::before{ left:auto; right:-60px; } /* ============================================================ * Latest Articles Section (Companies archive page) * ============================================================ */ .hexp-companies-articles-section{ background:#FAFBFC; padding:60px 0 80px; border-top:1px solid #E5E7EB; } .hexp-articles-section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; flex-wrap:wrap; gap:16px; } .hexp-articles-section-title{ font-size:30px; font-weight:800; color:#1A2847; margin:0; letter-spacing:-0.4px; } .hexp-articles-section-link{ display:inline-flex; align-items:center; gap:8px; color:var(--hexp-primary); font-weight:700; font-size:14.5px; text-decoration:none; transition:color .15s, transform .15s; } .hexp-articles-section-link i{ transition:transform .2s ease; font-size:12px; } .hexp-articles-section-link:hover{ color:#1d4ed8; } .hexp-articles-section-link:hover i{ transform:translateX(4px); } /* List of horizontal article rows */ .hexp-articles-list{ display:flex; flex-direction:column; gap:14px; } .hexp-article-row{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid #E5E7EB; border-radius:14px; padding:16px 22px 16px 16px; text-decoration:none; color:inherit; transition:all .2s ease; } .hexp-article-row:hover{ border-color:var(--hexp-primary); transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,99,235,.08); } .hexp-article-row-img{ flex:0 0 auto; width:140px; height:90px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg, #F0F4FF, #FCE7F3); } .hexp-article-row-img img{ width:100%; height:100%; object-fit:cover; } .hexp-article-row-img-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#CBD5E1; font-size:28px; } .hexp-article-row-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; } .hexp-article-row-cat{ display:inline-block; background:#EFF4FF; color:var(--hexp-primary); padding:3px 12px; border-radius:14px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; align-self:flex-start; } .hexp-article-row-title{ font-size:17px; font-weight:700; color:#1A2847; margin:0; line-height:1.4; transition:color .15s; } .hexp-article-row:hover .hexp-article-row-title{ color:var(--hexp-primary); } .hexp-article-row-meta{ display:flex; align-items:center; gap:10px; font-size:13px; color:#6B7280; flex-wrap:wrap; } .hexp-article-row-meta i{ margin-right:5px; color:#9CA3AF; font-size:11.5px; } .hexp-article-row-meta .hexp-dot{ color:#CBD5E1; } .hexp-article-row-arrow{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:#F8FAFC; display:flex; align-items:center; justify-content:center; color:#6B7280; font-size:13px; transition:all .2s ease; } .hexp-article-row:hover .hexp-article-row-arrow{ background:var(--hexp-primary); color:#fff; transform:translateX(3px); } @media (max-width:760px){ .hexp-articles-section-title{ font-size:24px; } .hexp-article-row{ padding:14px; gap:14px; flex-wrap:wrap; } .hexp-article-row-img{ width:100%; height:160px; } .hexp-article-row-body{ width:100%; } .hexp-article-row-arrow{ display:none; } .hexp-article-row-title{ font-size:15.5px; } } html[dir=rtl] .hexp-article-row{ padding:16px 16px 16px 22px; } html[dir=rtl] .hexp-articles-section-link:hover i{ transform:translateX(-4px); } html[dir=rtl] .hexp-article-row:hover .hexp-article-row-arrow{ transform:translateX(-3px); } html[dir=rtl] .hexp-article-row-arrow i{ transform:rotate(180deg); } /* ============================================================ * Quick Comparison Table (Companies archive — bottom section) * HostAdvice-style: Provider | Starting Price | Storage | CPU | RAM | Visit * ============================================================ */ .hexp-companies-compare-section{ background:#fff; padding:60px 0 80px; border-top:1px solid #E5E7EB; } .hexp-compare-section-title{ font-size:30px; font-weight:800; color:#1A2847; margin:0 0 28px; letter-spacing:-0.4px; } .hexp-compare-table-wrap{ background:#fff; border:1px solid #E5E7EB; border-radius:14px; overflow:hidden; overflow-x:auto; } .hexp-compare-table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:760px; } /* Header row — clean white background, navy bold text */ .hexp-compare-table thead{ background:#fff; border-bottom:1px solid #E5E7EB; } .hexp-compare-table th{ padding:18px 16px; text-align:left; font-weight:800; color:#1A2847; font-size:14px; white-space:nowrap; background:#fff; } .hexp-compare-th-provider{ min-width:200px; } /* Body cells */ .hexp-compare-table td{ padding:22px 16px; vertical-align:middle; border-top:1px solid #F1F5F9; color:#374151; font-size:14.5px; } .hexp-compare-table tbody tr:first-child td{ border-top:none; } /* Provider cell — logo only, sized appropriately */ .hexp-compare-provider{ min-width:200px; } .hexp-compare-provider img{ max-height:30px; max-width:140px; object-fit:contain; display:block; } .hexp-compare-provider-text{ font-size:17px; font-weight:800; letter-spacing:.3px; } /* Price cell — plain bold text, NOT green */ .hexp-compare-price{ font-weight:700; color:#1A2847; font-size:16px; white-space:nowrap; } /* CTA cell + button */ .hexp-compare-cta-cell{ text-align:right; white-space:nowrap; width:1%; } .hexp-compare-cta{ display:inline-flex; align-items:center; justify-content:center; background:var(--hexp-primary); color:#fff; padding:13px 28px; border-radius:99px; font-weight:700; font-size:14px; text-decoration:none; transition:all .15s; white-space:nowrap; min-width:160px; } .hexp-compare-cta:hover{ background:#1d4ed8; color:#fff; transform:translateY(-1px); box-shadow:0 6px 14px rgba(37,99,235,.26); } @media (max-width:760px){ .hexp-compare-section-title{ font-size:24px; } .hexp-compare-table th, .hexp-compare-table td{ padding:14px 12px; font-size:13.5px; } .hexp-compare-cta{ padding:11px 18px; min-width:auto; font-size:13px; } } html[dir=rtl] .hexp-compare-table th, html[dir=rtl] .hexp-compare-table td{ text-align:right; } html[dir=rtl] .hexp-compare-cta-cell{ text-align:left; } /* Hide old Latest Articles section (replaced) */ .hexp-companies-articles-section{ display:none !important; } /* ============================================================ * "Top 3 Hosting Deals" Popup (HostAdvice-style ticket cards) * Triggered automatically on pages with 3 cards (front, /companies/, /hosting-type/x/) * ============================================================ */ .hexp-deals-popup-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .25s ease; overflow-y:auto; } .hexp-deals-popup-overlay.is-visible{ opacity:1; } .hexp-deals-popup-inner{ position:relative; background:#fff; border-radius:16px; padding:28px 32px 26px; max-width:980px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.30); transform:translateY(20px) scale(.98); transition:transform .35s cubic-bezier(.4,0,.2,1); max-height:calc(100vh - 40px); overflow:visible; } .hexp-deals-popup-overlay.is-visible .hexp-deals-popup-inner{ transform:translateY(0) scale(1); } /* Close button */ .hexp-deals-popup-close{ position:absolute; top:12px; right:12px; width:32px; height:32px; background:#F8FAFC; border:1px solid #E5E7EB; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#6B7280; font-size:13px; transition:all .15s; z-index:5; } .hexp-deals-popup-close:hover{ background:#1A2847; color:#fff; transform:rotate(90deg); } /* Header */ .hexp-deals-popup-header{ text-align:center; margin-bottom:16px; } .hexp-deals-popup-header h2{ font-size:22px; font-weight:800; color:#1A2847; margin:0 0 6px; letter-spacing:-0.3px; line-height:1.25; } .hexp-deals-popup-header p{ font-size:13.5px; color:#6B7280; margin:0; } /* Countdown */ .hexp-deals-countdown{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 18px; } .hexp-deals-cd-cell{ background:#F8FAFC; border:1px solid #E5E7EB; border-radius:8px; padding:6px 12px; display:inline-flex; align-items:baseline; gap:3px; min-width:62px; justify-content:center; } .hexp-deals-cd-cell .num{ font-size:20px; font-weight:800; color:#1A2847; font-variant-numeric:tabular-nums; letter-spacing:-0.5px; } .hexp-deals-cd-cell .lbl{ font-size:12px; color:#6B7280; font-weight:600; } .hexp-deals-cd-sep{ font-size:18px; font-weight:700; color:#CBD5E1; } /* Cards grid */ .hexp-deals-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } /* Each card — ticket-style */ .hexp-deals-card{ position:relative; background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:18px 14px 0; display:flex; flex-direction:column; align-items:center; gap:10px; transition:transform .2s ease, box-shadow .2s ease; overflow:hidden; } .hexp-deals-card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(15,23,42,.10); } .hexp-deals-card.is-best{ border-color:var(--hexp-primary); box-shadow:0 8px 20px rgba(37,99,235,.10); } /* Rank badge top-left */ .hexp-deals-rank{ position:absolute; top:10px; left:10px; background:#F1F5F9; color:#1A2847; min-width:22px; height:20px; padding:0 7px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; z-index:2; } .hexp-deals-card.is-best .hexp-deals-rank{ background:#F1F5F9; color:#1A2847; } /* "Best Deal!" tag floating top */ .hexp-deals-best-tag{ position:absolute; top:-1px; left:-1px; background:linear-gradient(180deg, #3B82F6 0%, #2563EB 100%); color:#fff; padding:6px 12px; border-radius:12px 0 12px 0; font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; gap:5px; z-index:3; box-shadow:0 3px 8px rgba(37,99,235,.25); } .hexp-deals-best-tag i{ font-size:10px; color:#FCD34D; } .hexp-deals-card.is-best .hexp-deals-rank{ top:38px; /* push rank below the Best Deal tag */ } /* Logo */ .hexp-deals-logo{ margin-top:8px; height:42px; display:flex; align-items:center; justify-content:center; } .hexp-deals-card.is-best .hexp-deals-logo{ margin-top:24px; } .hexp-deals-logo img{ max-height:32px; max-width:150px; object-fit:contain; } .hexp-deals-logo-text{ font-size:16px; font-weight:800; letter-spacing:.4px; } /* Rating */ .hexp-deals-rating{ display:flex; align-items:center; gap:7px; } .hexp-deals-rating-num{ font-size:18px; font-weight:800; color:#1A2847; letter-spacing:-0.3px; } .hexp-deals-rating-stars{ color:#F97316; letter-spacing:1.2px; font-size:12px; } /* Badges (Exclusive Deal / Verified) */ .hexp-deals-badges{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; } .hexp-deals-badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:99px; font-size:10.5px; font-weight:700; letter-spacing:.2px; } .hexp-deals-badge.orange{ background:#FEF3E2; color:#EA580C; } .hexp-deals-badge.green{ background:#ECFDF5; color:#16A34A; } .hexp-deals-badge i{ font-size:9.5px; } /* Deal description text */ .hexp-deals-text{ text-align:center; font-size:12.5px; line-height:1.45; color:#374151; min-height:auto; padding:0 2px; } /* Ticket perforation divider */ .hexp-deals-perforation{ position:relative; width:calc(100% + 28px); margin:8px -14px 0; height:10px; } .hexp-deals-perforation::before, .hexp-deals-perforation::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:rgba(15,23,42,.55); /* same as overlay so it looks "punched" */ } .hexp-deals-perforation::before{ left:-5px; } .hexp-deals-perforation::after{ right:-5px; } .hexp-deals-perforation span{ position:absolute; top:50%; left:10px; right:10px; transform:translateY(-50%); border-top:1.5px dashed #CBD5E1; } /* Visit Site button */ .hexp-deals-visit{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:10px 16px; background:linear-gradient(180deg, #3B82F6 0%, #2563EB 100%); color:#fff; border-radius:24px; font-weight:700; font-size:13px; text-decoration:none; transition:all .2s ease; box-shadow:0 3px 10px rgba(37,99,235,.3); margin-top:10px; } .hexp-deals-visit i{ font-size:10px; transition:transform .15s; } .hexp-deals-visit:hover{ background:linear-gradient(180deg, #2563EB 0%, #1d4ed8 100%); color:#fff; transform:translateY(-1px); box-shadow:0 5px 14px rgba(37,99,235,.4); } .hexp-deals-visit:hover i{ transform:translateX(3px); } /* Users used count */ .hexp-deals-users{ font-size:11.5px; color:#6B7280; text-align:center; margin:8px 0 14px; } .hexp-deals-users strong{ color:#1A2847; font-weight:800; } /* Responsive */ @media (max-width:980px){ .hexp-deals-popup-inner{ padding:36px 24px 28px; } .hexp-deals-popup-header h2{ font-size:24px; } .hexp-deals-cards{ grid-template-columns:1fr; gap:16px; } } @media (max-width:480px){ .hexp-deals-cd-cell{ padding:8px 12px; min-width:62px; } .hexp-deals-cd-cell .num{ font-size:20px; } } html[dir=rtl] .hexp-deals-popup-close{ right:auto; left:16px; } html[dir=rtl] .hexp-deals-rank{ left:auto; right:12px; } html[dir=rtl] .hexp-deals-best-tag{ left:auto; right:-1px; border-radius:0 14px 0 14px; } html[dir=rtl] .hexp-deals-visit:hover i{ transform:translateX(-3px); } /* ============================================================ * Companies archive — filter row (tabs + Advanced filters button) * Mirrors the layout of /hosting-type/{x}/ filter row * ============================================================ */ .hexp-companies-filters-row{ display:flex; align-items:center; gap:16px; padding-top:24px; padding-bottom:0; } .hexp-companies-filters-row .hexp-filter-tabs-h{ flex:1; min-width:0; } .hexp-companies-filters-row .hexp-companies-filters-toggle{ flex-shrink:0; } @media (max-width:760px){ .hexp-companies-filters-row{ flex-direction:column; align-items:stretch; gap:12px; } .hexp-companies-filters-row .hexp-companies-filters-toggle{ align-self:flex-start; } } html[dir=rtl] .hexp-companies-filters-row{ direction:rtl; } /* ============================================================ */ /* Per-Plan-Type Sections in Single Company Page */ /* ============================================================ */ .hexp-single-intro { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 12px; padding: 24px 28px; margin-bottom: 24px; } .hexp-intro-lede { font-size: 17px; line-height: 1.7; color: #334155; margin: 0; } .hexp-plan-type-section { margin-top: 32px; } .hexp-plan-type-section h2 { color: var(--hexp-navy); border-bottom: 3px solid var(--hexp-primary); padding-bottom: 10px; margin-bottom: 12px; font-size: 24px; } .hexp-plan-type-intro { color: #475569; font-size: 15px; line-height: 1.7; margin-bottom: 20px; padding: 14px 18px; background: #f8fafc; border-left: 4px solid var(--hexp-primary); border-radius: 6px; } .hexp-plans-table-detailed { font-size: 14px; } .hexp-plans-table-detailed th { background: var(--hexp-navy); color: white; font-weight: 700; padding: 12px 10px; text-align: left; white-space: nowrap; font-size: 13px; } .hexp-plans-table-detailed td { padding: 14px 10px; border-bottom: 1px solid #e2e8f0; } .hexp-plans-table-detailed tr.plan-best { background: linear-gradient(90deg, #ecfdf5 0%, transparent 100%); } .hexp-plans-table-detailed tr.plan-best .plan-price { color: #059669; } .hexp-plans-table-detailed .plan-name { font-weight: 700; color: var(--hexp-navy); } .hexp-plans-table-detailed .plan-price { font-size: 16px; font-weight: 800; color: var(--hexp-primary); white-space: nowrap; } .hexp-plans-table-detailed .plan-cta { background: var(--hexp-primary); color: white; padding: 10px 22px; border-radius: 99px; font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(37,99,235,.2); } .hexp-plans-table-detailed .plan-cta:hover { background: var(--hexp-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.3); } @media (max-width: 768px) { .hexp-plans-table-detailed { font-size: 12.5px; } .hexp-plans-table-detailed th, .hexp-plans-table-detailed td { padding: 8px 6px; } } /* ================================================================ * SINGLE REVIEW PAGE — Comprehensive Responsive Design * Breakpoints: 1280, 1024, 768, 480 * Added 2026-04 — supersedes scattered rules above for this page * ================================================================ */ /* Plans table wrap — horizontal scroll with visual hint on right edge */ .hexp-plans-table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 10px; position: relative; scrollbar-width: thin; scrollbar-color: var(--hexp-primary) var(--hexp-gray-100); } .hexp-plans-table-wrap::-webkit-scrollbar { height: 8px; } .hexp-plans-table-wrap::-webkit-scrollbar-track { background: var(--hexp-gray-100); border-radius: 4px; } .hexp-plans-table-wrap::-webkit-scrollbar-thumb { background: var(--hexp-primary); border-radius: 4px; } .hexp-plans-table-wrap .hexp-plans-table-detailed { min-width: 880px; } /* ---------------------------------------------------------------- * 1280px and below — slight container padding tightening * ---------------------------------------------------------------- */ @media (max-width: 1280px) { .hexp-single-grid { gap: 24px; grid-template-columns: minmax(0, 1fr) 320px; } .hexp-single-section { padding: 26px 28px; } } /* ---------------------------------------------------------------- * 1024px and below — sidebar stacks below main, hero stacks * ---------------------------------------------------------------- */ @media (max-width: 1024px) { .hexp-single-body { padding: 36px 0; } .hexp-single-grid { grid-template-columns: 1fr; gap: 20px; } .hexp-single-hero { padding: 50px 0 40px; } .hexp-single-hero-inner { grid-template-columns: 1fr; gap: 30px; } .hexp-single-hero h1 { font-size: 36px; } .hexp-single-hero .lede { font-size: 16px; } .hexp-single-info-card { max-width: 480px; margin: 0 auto; } /* Sidebar stacks below — display its widgets in a flex row when there's space */ .hexp-single-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 100%; } .hexp-single-sidebar > .hexp-side-nav-widget { grid-column: 1 / -1; } .hexp-single-section { padding: 24px 22px; border-radius: 14px; } .hexp-single-section h2 { font-size: 20px; margin-bottom: 14px; } .hexp-single-section h3 { font-size: 16px; } .hexp-pros-cons { grid-template-columns: 1fr 1fr; gap: 16px; } .hexp-tech-specs-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .hexp-signature-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .hexp-features-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; } .hexp-ratings-breakdown { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } /* ---------------------------------------------------------------- * 768px and below — tablets portrait, large phones * ---------------------------------------------------------------- */ @media (max-width: 768px) { .hexp-single-body { padding: 24px 0; } .hexp-single-hero { padding: 40px 0 30px; } .hexp-single-hero h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.5px; } .hexp-single-hero .lede { font-size: 15px; line-height: 1.55; margin-bottom: 18px; } .hexp-single-hero-meta { gap: 12px 18px; margin-bottom: 20px; } .hexp-single-hero-meta .item { font-size: 13.5px; } .hexp-single-info-card { padding: 22px 20px; } .hexp-single-info-card .price-big { font-size: 38px; } .hexp-single-sidebar { grid-template-columns: 1fr; gap: 14px; } .hexp-single-sidebar > .hexp-side-nav-widget { grid-column: auto; } .hexp-single-section { padding: 20px 18px; border-radius: 12px; margin-bottom: 14px; } .hexp-single-section h2 { font-size: 18px; margin-bottom: 12px; } .hexp-single-section h3 { font-size: 15.5px; margin: 18px 0 10px; } .hexp-single-section h4 { font-size: 14.5px; } .hexp-single-section .hexp-intro-lede { font-size: 14.5px; } .hexp-single-section p { font-size: 14.5px; line-height: 1.65; } /* Pros & Cons — stack vertically */ .hexp-pros-cons { grid-template-columns: 1fr; gap: 12px; } .hexp-pros, .hexp-cons { padding: 14px 16px; } .hexp-pros h3, .hexp-cons h3 { font-size: 14px; margin-bottom: 10px; } .hexp-pros ul li, .hexp-cons ul li { padding: 6px 0; font-size: 13.5px; } /* Tech Specs — single column on phones */ .hexp-tech-specs-grid { grid-template-columns: 1fr; gap: 8px; } .hexp-tech-spec { padding: 10px 12px; } .hexp-tech-spec-icon { width: 32px; height: 32px; font-size: 13px; } .hexp-tech-spec-label { font-size: 10.5px; } .hexp-tech-spec-value { font-size: 13px; } /* Signature Cards — single column */ .hexp-signature-grid { grid-template-columns: 1fr; gap: 10px; } .hexp-signature-card { padding: 16px 16px 14px; border-radius: 12px; } .hexp-signature-icon { width: 36px; height: 36px; font-size: 15px; margin-bottom: 8px; } .hexp-signature-title { font-size: 14.5px; } .hexp-signature-desc { font-size: 12.5px; } /* Features — single column */ .hexp-features-grid { grid-template-columns: 1fr; gap: 8px; } .hexp-features-grid .feature { padding: 10px 12px; font-size: 13px; } .hexp-features-grid .feature i { width: 26px; height: 26px; font-size: 11px; } /* Ratings — 2 columns on tablet, force readable */ .hexp-ratings-breakdown { grid-template-columns: 1fr; gap: 8px; } .hexp-rating-item { padding: 9px 12px; font-size: 13.5px; } .hexp-rating-item .score { font-size: 15px; } /* Plans table — smaller font, force scroll if needed */ .hexp-plans-table-detailed { font-size: 12.5px; } .hexp-plans-table-detailed th, .hexp-plans-table-detailed td { padding: 9px 8px; } .hexp-plans-table-detailed .plan-price { font-size: 14px; } .hexp-plans-table-detailed .plan-cta { padding: 8px 14px; font-size: 12px; } /* Sidebar nav widget tighter */ .hexp-side-nav-widget { border-radius: 12px; } .hexp-side-nav-top { padding: 18px 16px 16px; gap: 10px; } .hexp-side-nav-logo img { max-height: 36px; max-width: 160px; } .hexp-side-nav-visit { padding: 11px 18px; font-size: 13.5px; } /* Sidebar Quick Info card */ .hexp-sidebar-card { padding: 16px 18px; } .hexp-sidebar-card h3 { font-size: 15px; } } /* ---------------------------------------------------------------- * 480px and below — small phones, tightest layout * ---------------------------------------------------------------- */ @media (max-width: 480px) { .hexp-container { padding: 0 14px; } .hexp-single-body { padding: 18px 0; } .hexp-single-hero { padding: 30px 0 24px; } .hexp-single-hero h1 { font-size: 24px; } .hexp-single-hero .lede { font-size: 14px; } .hexp-single-hero-meta { gap: 10px 14px; } .hexp-single-hero-meta .item { font-size: 12.5px; } .hexp-single-info-card { padding: 18px 16px; } .hexp-single-info-card .price-big { font-size: 32px; } .hexp-single-info-card .btn-visit-big { padding: 12px 18px; font-size: 14px; } .hexp-single-section { padding: 16px 14px; border-radius: 10px; margin-bottom: 12px; } .hexp-single-section h2 { font-size: 16.5px; margin-bottom: 10px; letter-spacing: -0.2px; } .hexp-single-section h3 { font-size: 14.5px; margin: 14px 0 8px; } .hexp-single-section .hexp-intro-lede { font-size: 14px; } .hexp-single-section p { font-size: 14px; } /* Pros & Cons super-tight */ .hexp-pros, .hexp-cons { padding: 12px 14px; border-radius: 10px; } .hexp-pros h3, .hexp-cons h3 { font-size: 13.5px; } .hexp-pros ul li, .hexp-cons ul li { padding: 5px 0; font-size: 13px; gap: 8px; } /* Tech Specs even tighter */ .hexp-tech-spec { padding: 9px 11px; gap: 10px; } .hexp-tech-spec-icon { width: 28px; height: 28px; font-size: 12px; } .hexp-tech-spec-label { font-size: 10px; } .hexp-tech-spec-value { font-size: 12.5px; } /* Signature Cards super-compact */ .hexp-signature-card { padding: 14px 14px 13px; } .hexp-signature-icon { width: 32px; height: 32px; font-size: 13px; } .hexp-signature-title { font-size: 14px; } .hexp-signature-desc { font-size: 12px; } /* Features super-compact */ .hexp-features-grid .feature { padding: 9px 11px; font-size: 12.5px; } .hexp-features-grid .feature i { width: 24px; height: 24px; font-size: 10.5px; } /* Ratings */ .hexp-rating-item { padding: 8px 10px; font-size: 13px; } /* Plans table — keep readable but tight */ .hexp-plans-table-detailed { font-size: 12px; } .hexp-plans-table-detailed th, .hexp-plans-table-detailed td { padding: 8px 7px; } .hexp-plans-table-detailed th { font-size: 11px; } .hexp-plans-table-detailed .plan-price { font-size: 13px; } /* Sidebar widgets */ .hexp-side-nav-top { padding: 14px 14px 12px; } .hexp-side-nav-logo img { max-height: 32px; max-width: 140px; } .hexp-side-nav-visit { padding: 10px 14px; font-size: 13px; } .hexp-side-nav-coupons { font-size: 13px; } /* Hide hero meta items count if they overflow */ .hexp-single-hero-meta { row-gap: 8px; } } /* ---------------------------------------------------------------- * Tiny phones (360px and below) — 360x640 / older Android * ---------------------------------------------------------------- */ @media (max-width: 360px) { .hexp-single-hero h1 { font-size: 22px; } .hexp-single-section { padding: 14px 12px; } .hexp-single-section h2 { font-size: 15.5px; } .hexp-pros, .hexp-cons { padding: 10px 12px; } .hexp-pros ul li, .hexp-cons ul li { font-size: 12.5px; } .hexp-plans-table-detailed { font-size: 11.5px; } } /* ================================================================ * SINGLE REVIEW PAGE — DEFENSIVE LAYOUT LOCK * Forces correct centering + 340px sidebar regardless of theme/plugin * overrides, page builder full-width wrappers, or RTL direction issues. * Uses !important strategically only for the structural rules. * Added 2026-04 (v2.6.7) to fix off-center layout * ================================================================ */ /* 1. Force container to be properly centered with strict max-width. Uses both margin shorthand and explicit left/right to defeat any `margin-right: 0` / `padding-left: large-value` rules from WordPress block themes, page builders, or other plugins. */ .hexp-single-body > .hexp-container, .hexp-single-hero > .hexp-container, .hexp-single-hero > .hexp-container.hexp-single-hero-inner { max-width: 1500px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; float: none !important; position: relative !important; left: auto !important; right: auto !important; transform: none !important; } /* 2. Force the body wrappers themselves to be plain block-level with no padding shifts and no transform applied by parent themes. */ .hexp-single-body, .hexp-single-hero { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; transform: none !important; } /* 3. Force the grid columns. Some WordPress block themes inject a `display: flex` or `width` override on direct children of common containers — this locks the grid in place. */ .hexp-single-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important; gap: 24px !important; width: 100% !important; max-width: 100% !important; align-items: start !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } .hexp-single-grid > * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } /* 4. Lock the sidebar to exactly 340px width — never wider, never narrower. This catches cases where the widget content (buttons with shadow, etc.) tries to push the column wider via min-content. */ aside.hexp-single-sidebar { width: 320px !important; max-width: 320px !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 20px !important; } aside.hexp-single-sidebar > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; } /* 5. Constrain widget internals so nothing pushes past 340px */ .hexp-single-sidebar .hexp-side-nav-widget, .hexp-single-sidebar .hexp-sidebar-card, .hexp-single-sidebar .hexp-sidebar-card-v2 { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .hexp-single-sidebar .hexp-side-nav-visit, .hexp-single-sidebar .hexp-side-nav-coupons, .hexp-single-sidebar .hexp-side-nav-write, .hexp-single-sidebar .hexp-side-nav-item { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* 6. Ensure the hero-inner grid behaves the same way */ .hexp-single-hero-inner { width: 100% !important; max-width: 1500px !important; box-sizing: border-box !important; } .hexp-single-hero-inner > * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } /* 7. RTL safety — if site direction flips, ensure container still centers and sidebar maintains correct visual position */ body.rtl .hexp-single-body > .hexp-container, body.rtl .hexp-single-hero > .hexp-container, .rtl .hexp-single-body > .hexp-container, .rtl .hexp-single-hero > .hexp-container { margin-left: auto !important; margin-right: auto !important; } /* 8. Tablet/mobile responsive overrides — only apply the stack collapse, not the strict 340px lock (sidebar becomes full-width when stacked) */ @media (max-width: 1024px) { .hexp-single-grid { grid-template-columns: 1fr !important; gap: 20px !important; } aside.hexp-single-sidebar { width: 100% !important; max-width: 100% !important; } .hexp-single-hero-inner { grid-template-columns: 1fr !important; } } /* 9. Diagnostic — outline boxes with subtle border in dev to verify. Commented out by default. Uncomment to debug. .hexp-single-body { outline: 2px dashed red !important; } .hexp-single-body > .hexp-container { outline: 2px dashed blue !important; } .hexp-single-grid { outline: 2px dashed green !important; } aside.hexp-single-sidebar { outline: 2px dashed orange !important; } */ /* ================================================================ * Top Deals Popup — 2-card layout (added v2.7.3) * Same look as the 3-card layout but centered with only 2 cards. * ================================================================ */ .hexp-deals-popup-cards-2 .hexp-deals-cards { max-width: 720px; margin: 0 auto; grid-template-columns: 1fr 1fr !important; } @media (max-width: 768px) { .hexp-deals-popup-cards-2 .hexp-deals-cards, .hexp-deals-popup-cards-3 .hexp-deals-cards { grid-template-columns: 1fr !important; } } /* ================================================================ * User Review — Admin Reply block (added v2.8.8) * Shown directly below each user review on the company page. * ================================================================ */ .hexp-review-admin-reply { margin-top:16px; padding:14px 16px; background:#eff6ff; border-left:3px solid #2563eb; border-radius:8px; } .hexp-rar-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .hexp-rar-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, #2563eb, #7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; } .hexp-rar-meta { display:flex; flex-direction:column; line-height:1.3; } .hexp-rar-author { font-size:13.5px; color:#1e3a8a; font-weight:700; display:inline-flex; align-items:center; gap:8px; } .hexp-rar-badge { display:inline-flex; align-items:center; gap:4px; background:#2563eb; color:#fff; padding:2px 8px; border-radius:99px; font-size:10.5px; font-weight:700; letter-spacing:.2px; } .hexp-rar-badge i { font-size:10px; } .hexp-rar-date { font-size:11.5px; color:#64748b; margin-top:2px; } .hexp-rar-content { color:#334155; font-size:13.5px; line-height:1.55; } .hexp-rar-content p { margin:0 0 8px; } .hexp-rar-content p:last-child { margin-bottom:0; } /* RTL adjustments */ html[dir=rtl] .hexp-review-admin-reply { border-left:none; border-right:3px solid #2563eb; } /* ================================================================ * Comparison Tool (added v2.9.0) * Floating bar + Add-to-Compare button + comparison table styles. * ================================================================ */ /* Add-to-Compare button on cards */ .hexp-compare-toggle { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; background:#fff; border:1.5px solid #d1d5db; color:#475569; border-radius:6px; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s ease; margin-top:8px; width:100%; justify-content:center; } .hexp-compare-toggle:hover { border-color:#2563eb; color:#1d4ed8; background:#eff6ff; } .hexp-compare-toggle i { font-size:11px; } .hexp-compare-toggle .hexp-compare-toggle-added { display:none; } .hexp-compare-toggle.is-added .hexp-compare-toggle-add { display:none; } .hexp-compare-toggle.is-added .hexp-compare-toggle-added { display:inline; } .hexp-compare-toggle.is-added { background:#10b981; border-color:#10b981; color:#fff; } .hexp-compare-toggle.is-added:hover { background:#059669; border-color:#059669; color:#fff; } /* Floating Compare Bar */ .hexp-compare-bar { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:2px solid #2563eb; box-shadow:0 -8px 24px rgba(0,0,0,0.12); z-index:9998; padding:12px 16px; } .hexp-compare-bar-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .hexp-compare-bar-label { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#0f172a; } .hexp-compare-bar-label i { color:#2563eb; font-size:18px; } .hexp-compare-count { background:#eff6ff; color:#1d4ed8; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:700; } .hexp-compare-bar-slots { display:flex; gap:8px; flex:1; justify-content:center; flex-wrap:wrap; } .hexp-compare-slot { position:relative; width:100px; height:42px; background:#f8fafc; border:1.5px solid #e5e7eb; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:6px 8px; } .hexp-compare-slot img { max-width:100%; max-height:100%; object-fit:contain; } .hexp-compare-slot span { font-size:11px; font-weight:700; color:#0f172a; text-align:center; line-height:1.2; } .hexp-compare-slot.is-empty { border-style:dashed; color:#cbd5e1; background:#fff; cursor:pointer; transition: all .15s ease; font-family:inherit; } .hexp-compare-slot.is-empty:hover { border-color:var(--hexp-primary); color:var(--hexp-primary); background:#eff6ff; transform: scale(1.04); } .hexp-compare-slot.is-empty i { font-size:14px; } .hexp-compare-slot-remove { position:absolute; top:-7px; right:-7px; width:20px; height:20px; background:#ef4444; color:#fff; border:none; border-radius:50%; cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.15); } .hexp-compare-slot-remove:hover { background:#dc2626; } /* ============================================================ * Compare Picker Modal — opens when an empty "+" slot is clicked * ============================================================ */ .hexp-compare-picker { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; } .hexp-compare-picker[hidden] { display:none; } .hexp-compare-picker-backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.55); backdrop-filter:blur(2px); } .hexp-compare-picker-dialog { position:relative; background:#fff; border-radius:16px; width:min(480px, 92vw); max-height:min(640px, 86vh); display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(15,23,42,0.3); overflow:hidden; animation: hexpPickerIn .2s ease-out; } @keyframes hexpPickerIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } } .hexp-compare-picker-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #e5e7eb; } .hexp-compare-picker-header h3 { margin:0; font-size:17px; font-weight:700; display:flex; align-items:center; gap:10px; color:#0f172a; } .hexp-compare-picker-header h3 i { color:var(--hexp-primary); } .hexp-compare-picker-close { background:none; border:none; font-size:26px; line-height:1; color:#64748b; cursor:pointer; width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:all .15s ease; } .hexp-compare-picker-close:hover { background:#f3f4f6; color:#0f172a; } .hexp-compare-picker-search { position:relative; padding:16px 20px 12px; border-bottom:1px solid #f3f4f6; } .hexp-compare-picker-search i { position:absolute; left:32px; top:50%; transform:translateY(-50%); color:#94a3b8; } .hexp-compare-picker-search input { width:100%; padding:11px 16px 11px 40px; border:1px solid #e5e7eb; border-radius:10px; font-size:14.5px; background:#fff; transition:all .15s ease; box-sizing:border-box; } .hexp-compare-picker-search input:focus { outline:none; border-color:var(--hexp-primary); box-shadow:0 0 0 3px rgba(37,99,235,0.12); } .hexp-compare-picker-list { overflow-y:auto; padding:8px; flex:1; min-height:200px; } .hexp-compare-picker-list::-webkit-scrollbar { width:6px; } .hexp-compare-picker-list::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); border-radius:3px; } .hexp-compare-picker-loading, .hexp-compare-picker-empty { padding:40px 20px; text-align:center; color:#64748b; font-size:14px; } .hexp-compare-picker-loading i { margin-right:8px; } .hexp-compare-picker-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border:none; background:transparent; width:100%; cursor:pointer; border-radius:10px; font:inherit; color:#0f172a; text-align:left; transition:background .12s ease; } .hexp-compare-picker-item:hover:not(.is-disabled) { background:#f1f5f9; } .hexp-compare-picker-item.is-disabled { opacity:.45; cursor:not-allowed; } .hexp-compare-picker-logo { width:40px; height:40px; object-fit:contain; background:#fff; border:1px solid #f3f4f6; border-radius:8px; padding:4px; flex-shrink:0; } .hexp-compare-picker-logo-placeholder { width:40px; height:40px; background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex-shrink:0; } .hexp-compare-picker-name { flex:1; font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hexp-compare-picker-rating { font-size:12.5px; color:#f59e0b; font-weight:700; flex-shrink:0; } .hexp-compare-picker-added { font-size:11px; color:#16a34a; font-weight:700; text-transform:uppercase; background:#dcfce7; padding:3px 8px; border-radius:6px; flex-shrink:0; } .hexp-compare-picker-item > i.fa-plus { color:#94a3b8; font-size:13px; flex-shrink:0; } .hexp-compare-picker-item:hover:not(.is-disabled) > i.fa-plus { color:var(--hexp-primary); } .hexp-compare-picker-footer { padding:12px 20px; border-top:1px solid #f3f4f6; background:#fafbfc; } .hexp-compare-picker-footer small { color:#94a3b8; font-size:12px; } @media (max-width:480px) { .hexp-compare-picker-dialog { width:100vw; height:100vh; max-height:100vh; max-height:100dvh; border-radius:0; } } .hexp-compare-bar-actions { display:flex; gap:8px; align-items:center; } .hexp-compare-btn-secondary { padding:8px 14px; background:#fff; border:1.5px solid #e5e7eb; color:#6b7280; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; } .hexp-compare-btn-secondary:hover { background:#f8fafc; color:#0f172a; } .hexp-compare-btn-primary { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; background:linear-gradient(135deg, #2563eb, #1d4ed8); color:#fff; border:none; border-radius:6px; font-size:13.5px; font-weight:700; text-decoration:none; transition:all .15s; } .hexp-compare-btn-primary:hover { background:linear-gradient(135deg, #1d4ed8, #1e40af); color:#fff; transform:translateY(-1px); box-shadow:0 4px 10px rgba(37,99,235,0.3); } .hexp-compare-btn-primary[data-disabled="1"] { background:#cbd5e1 !important; cursor:not-allowed; transform:none !important; box-shadow:none !important; } @media (max-width:768px) { .hexp-compare-bar-inner { gap:10px } .hexp-compare-bar-slots { order:3; width:100%; } .hexp-compare-slot { width:70px; height:36px } } /* ====== /compare/ Page ====== */ .hexp-compare-hero { background:linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); color:#fff; padding:60px 20px 50px; text-align:center; } .hexp-compare-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.18); padding:6px 16px; border-radius:99px; font-size:12.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin-bottom:14px; } .hexp-compare-hero h1 { font-size:36px; font-weight:800; margin:0 0 12px; letter-spacing:-0.6px; line-height:1.2; color:#fff; } .hexp-compare-subtitle { font-size:16px; opacity:.85; margin:0 auto; max-width:680px; } .hexp-compare-section { padding:40px 0 60px; } .hexp-compare-empty { text-align:center; padding:60px 20px; background:#fff; border-radius:12px; border:2px dashed #e5e7eb; } .hexp-compare-empty i { font-size:48px; color:#cbd5e1; margin-bottom:16px; } .hexp-compare-empty h2 { font-size:22px; color:#0f172a; margin:0 0 10px; } .hexp-compare-empty p { color:#6b7280; margin:0 0 20px; } /* Header row with company logos */ .hexp-compare-header-row { display:grid; gap:12px; margin-bottom:24px; position:sticky; top:0; background:#fff; z-index:5; padding:14px 0; box-shadow:0 4px 10px -6px rgba(0,0,0,0.08); } .hexp-compare-header-row[data-cols="2"] { grid-template-columns:200px 1fr 1fr; } .hexp-compare-header-row[data-cols="3"] { grid-template-columns:200px 1fr 1fr 1fr; } .hexp-compare-header-row[data-cols="4"] { grid-template-columns:160px 1fr 1fr 1fr 1fr; } .hexp-compare-spacer {} /* corner placeholder */ .hexp-compare-company-cell { position:relative; background:#fff; border:2px solid #e5e7eb; border-radius:12px; padding:18px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; } .hexp-compare-company-cell.is-winner { border-color:#f59e0b; box-shadow:0 8px 20px rgba(245,158,11,0.15); } .hexp-compare-winner-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#fff; padding:4px 12px; border-radius:99px; font-size:11px; font-weight:800; display:inline-flex; align-items:center; gap:5px; box-shadow:0 4px 10px rgba(245,158,11,0.3); } .hexp-compare-remove-col { position:absolute; top:8px; right:8px; width:24px; height:24px; background:#f1f5f9; border:none; border-radius:50%; color:#64748b; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; } .hexp-compare-remove-col:hover { background:#ef4444; color:#fff; } .hexp-cmp-logo { height:50px; display:flex; align-items:center; justify-content:center; } .hexp-cmp-logo img { max-height:40px; max-width:140px; object-fit:contain; } .hexp-cmp-logo-text { font-size:16px; font-weight:800; color:#1e3a8a; } .hexp-cmp-rating { display:flex; align-items:center; gap:6px; } .hexp-cmp-rating-num { font-size:18px; font-weight:800; color:#0f172a; } .hexp-cmp-rating-stars { color:#f59e0b; font-size:13px; letter-spacing:1.5px; } .hexp-cmp-price { display:flex; align-items:baseline; gap:3px; color:#0f172a; } .hexp-cmp-price small:first-child { font-size:11px; color:#6b7280; font-weight:600; text-transform:uppercase; } .hexp-cmp-price strong { font-size:22px; font-weight:800; } .hexp-cmp-price small:last-child { font-size:12px; color:#6b7280; } .hexp-cmp-cta { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; border-radius:8px; font-weight:700; font-size:13px; text-decoration:none; width:100%; justify-content:center; } .hexp-cmp-cta:hover { background:linear-gradient(135deg,#1d4ed8,#1e40af); color:#fff; } .hexp-cmp-review-link { font-size:11.5px; color:#6b7280; text-decoration:underline; } .hexp-cmp-review-link:hover { color:#2563eb; } /* Group titles */ .hexp-compare-group-title { font-size:18px; font-weight:800; color:#1e3a8a; margin:30px 0 12px; padding:10px 14px; background:#eff6ff; border-radius:8px; display:flex; align-items:center; gap:10px; } .hexp-compare-group-title i { color:#2563eb; font-size:16px; } /* Comparison table rows */ .hexp-compare-table { background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; } .hexp-compare-table[data-cols="2"] .hexp-cmp-row { grid-template-columns:200px 1fr 1fr; } .hexp-compare-table[data-cols="3"] .hexp-cmp-row { grid-template-columns:200px 1fr 1fr 1fr; } .hexp-compare-table[data-cols="4"] .hexp-cmp-row { grid-template-columns:160px 1fr 1fr 1fr 1fr; } .hexp-cmp-row { display:grid; gap:0; border-bottom:1px solid #f1f5f9; } .hexp-cmp-row:last-child { border-bottom:0; } .hexp-cmp-row:nth-child(even) { background:#f8fafc; } .hexp-cmp-label { font-weight:700; color:#475569; font-size:13.5px; padding:14px 18px; border-right:1px solid #f1f5f9; } .hexp-cmp-cell { padding:14px 16px; color:#0f172a; font-size:13.5px; text-align:center; border-right:1px solid #f1f5f9; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; } .hexp-cmp-cell:last-child { border-right:0; } .hexp-cmp-cell strong { color:#1e3a8a; } .hexp-cmp-cell small { color:#6b7280; font-size:11px; } .hexp-cmp-yes { color:#10b981; font-size:18px; } .hexp-cmp-no { color:#ef4444; font-size:18px; } .hexp-cmp-na { color:#cbd5e1; font-size:18px; font-weight:300; } .hexp-cmp-text { color:#475569; } /* Rating bars */ .hexp-cmp-bar { flex:1; max-width:120px; height:8px; background:#f1f5f9; border-radius:99px; overflow:hidden; position:relative; } .hexp-cmp-bar-fill { height:100%; background:linear-gradient(90deg, #fbbf24, #f59e0b); border-radius:99px; } .hexp-cmp-bar-label { font-size:12.5px; font-weight:700; color:#0f172a; min-width:36px; text-align:left; } /* Pros/Cons section */ .hexp-compare-proscons { display:grid; gap:18px; margin-bottom:30px; } .hexp-compare-proscons[data-cols="2"] { grid-template-columns:1fr 1fr; } .hexp-compare-proscons[data-cols="3"] { grid-template-columns:1fr 1fr 1fr; } .hexp-compare-proscons[data-cols="4"] { grid-template-columns:1fr 1fr 1fr 1fr; } .hexp-cmp-procon-block { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:18px; } .hexp-cmp-procon-block h3 { font-size:15px; font-weight:700; color:#1e3a8a; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid #f1f5f9; } .hexp-cmp-pros, .hexp-cmp-cons { margin-bottom:14px; } .hexp-cmp-pros h4, .hexp-cmp-cons h4 { font-size:12.5px; font-weight:700; margin:0 0 8px; display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.4px; } .hexp-cmp-pros h4 { color:#10b981; } .hexp-cmp-cons h4 { color:#ef4444; } .hexp-cmp-pros ul, .hexp-cmp-cons ul { margin:0; padding:0 0 0 20px; list-style:none; } .hexp-cmp-pros li, .hexp-cmp-cons li { font-size:13px; color:#334155; margin-bottom:6px; position:relative; line-height:1.45; } .hexp-cmp-pros li::before { content:"✓"; color:#10b981; position:absolute; left:-18px; font-weight:700; } .hexp-cmp-cons li::before { content:"×"; color:#ef4444; position:absolute; left:-18px; font-weight:700; } /* Final CTA */ .hexp-compare-final-cta { background:linear-gradient(135deg, #1e3a8a, #2563eb); color:#fff; padding:30px 24px; border-radius:12px; text-align:center; margin-top:30px; } .hexp-compare-final-cta h3 { font-size:22px; margin:0 0 8px; font-weight:800; color:#fff; } .hexp-compare-final-cta p { opacity:.85; margin:0 0 18px; } .hexp-compare-final-buttons { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .hexp-compare-final-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; background:#fff; color:#1e3a8a; border-radius:8px; font-size:13.5px; font-weight:700; text-decoration:none; transition:all .15s; } .hexp-compare-final-btn:hover { background:#fbbf24; color:#1e3a8a; transform:translateY(-2px); } @media (max-width:900px) { .hexp-compare-header-row[data-cols="2"], .hexp-compare-header-row[data-cols="3"], .hexp-compare-header-row[data-cols="4"], .hexp-compare-table[data-cols="2"] .hexp-cmp-row, .hexp-compare-table[data-cols="3"] .hexp-cmp-row, .hexp-compare-table[data-cols="4"] .hexp-cmp-row { grid-template-columns:1fr; } .hexp-cmp-label { border-right:0; border-bottom:1px solid #f1f5f9; background:#f8fafc; } .hexp-cmp-cell { border-right:0; border-bottom:1px solid #f1f5f9; justify-content:flex-start; } .hexp-compare-proscons[data-cols="2"], .hexp-compare-proscons[data-cols="3"], .hexp-compare-proscons[data-cols="4"] { grid-template-columns:1fr; } } /* Comparison page — additional sections (signatures, features, tags) */ .hexp-cmp-tags { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; } .hexp-cmp-tag { display:inline-block; background:#eff6ff; color:#1d4ed8; padding:2px 9px; border-radius:99px; font-size:11.5px; font-weight:600; } .hexp-compare-signatures, .hexp-compare-features { display:grid; gap:18px; margin-bottom:30px; } .hexp-compare-signatures[data-cols="2"], .hexp-compare-features[data-cols="2"] { grid-template-columns:1fr 1fr; } .hexp-compare-signatures[data-cols="3"], .hexp-compare-features[data-cols="3"] { grid-template-columns:1fr 1fr 1fr; } .hexp-compare-signatures[data-cols="4"], .hexp-compare-features[data-cols="4"] { grid-template-columns:1fr 1fr 1fr 1fr; } .hexp-cmp-sig-block, .hexp-cmp-feat-block { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:18px; } .hexp-cmp-sig-block h3, .hexp-cmp-feat-block h3 { font-size:15px; font-weight:700; color:#1e3a8a; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid #f1f5f9; } .hexp-cmp-sig-list { list-style:none; margin:0; padding:0; } .hexp-cmp-sig-list li { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px dashed #f1f5f9; } .hexp-cmp-sig-list li:last-child { border-bottom:0; } .hexp-cmp-sig-list li i { width:30px; height:30px; background:#eff6ff; color:#2563eb; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; } .hexp-cmp-sig-list li strong { display:block; font-size:13px; color:#0f172a; margin-bottom:2px; } .hexp-cmp-sig-list li span { font-size:12px; color:#6b7280; line-height:1.45; } .hexp-cmp-feat-block ul { margin:0; padding:0 0 0 20px; list-style:none; } .hexp-cmp-feat-block li { font-size:13px; color:#334155; margin-bottom:6px; position:relative; line-height:1.45; } .hexp-cmp-feat-block li::before { content:"✓"; color:#10b981; position:absolute; left:-18px; font-weight:700; } .hexp-cmp-na-block { color:#94a3b8; font-size:12.5px; font-style:italic; margin:0; } @media (max-width:900px) { .hexp-compare-signatures[data-cols="2"], .hexp-compare-signatures[data-cols="3"], .hexp-compare-signatures[data-cols="4"], .hexp-compare-features[data-cols="2"], .hexp-compare-features[data-cols="3"], .hexp-compare-features[data-cols="4"] { grid-template-columns:1fr; } } /* ================================================================ * Live Search Dropdown (added v2.9.6) * ONLY styles the dropdown content. Does NOT modify .hexp-search-overlay * or .hexp-search-form layout — those keep their existing v2.7 styles. * ================================================================ */ .hexp-search-results { max-width: 800px; width: 100%; margin: 12px auto 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; max-height: 60vh; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,0.06); } .hexp-search-loading { padding: 28px 18px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #6b7280; font-size: 14px; } .hexp-search-spinner { width: 18px; height: 18px; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: hexp-search-spin 0.8s linear infinite; } @keyframes hexp-search-spin { to { transform: rotate(360deg); } } .hexp-search-empty { padding: 28px 18px; text-align: center; color: #6b7280; } .hexp-search-empty i { font-size: 28px; color: #cbd5e1; margin-bottom: 8px; } .hexp-search-empty p { font-size: 14px; font-weight: 600; color: #0f172a; margin: 0 0 4px; } .hexp-search-empty small { font-size: 12px; } .hexp-search-section { border-bottom: 1px solid #f1f5f9; } .hexp-search-section:last-child { border-bottom: 0; } .hexp-search-section-title { padding: 8px 14px; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; background: #f8fafc; } .hexp-search-result { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: inherit; text-decoration: none; transition: background .12s; } .hexp-search-result:hover { background: #eff6ff; } .hexp-search-result-icon { width: 34px; height: 34px; border-radius: 6px; background: #f8fafc; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .hexp-search-result-icon img { max-width: 100%; max-height: 100%; object-fit: contain; } .hexp-search-result-icon i { color: #94a3b8; font-size: 13px; } .hexp-search-result-body { flex: 1; min-width: 0; } .hexp-search-result-title { font-size: 13.5px; font-weight: 600; color: #0f172a; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hexp-search-result-title mark { background: #fef3c7; color: inherit; padding: 0 2px; border-radius: 2px; } .hexp-search-result-meta { font-size: 11.5px; color: #6b7280; } .hexp-search-viewall { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #1e3a8a; color: #fff !important; text-decoration: none; font-size: 13px; font-weight: 600; } .hexp-search-viewall:hover { background: #1e40af; color: #fff !important; } /* ================================================================ * Newsletter Popup (added v2.9.8) * Separate from the affiliate popup — value-driven email capture. * ================================================================ */ /* ================================================================ * Newsletter Popup (v3.7.51 — bottom-left slide-in, HostAdvice style) * Compact corner popup instead of a fullscreen modal — less intrusive, * higher capture rate. Sits at bottom-left so it doesn't fight chat * widgets (which are usually bottom-right). * ================================================================ */ .hexp-np-overlay { position: fixed; bottom: 20px; left: 20px; right: auto; top: auto; width: 320px; max-width: calc(100vw - 40px); background: transparent; z-index: 9997; display: block; padding: 0; opacity: 0; visibility: hidden; transform: translateX(-30px); transition: opacity .35s ease, visibility .35s ease, transform .35s ease; pointer-events: none; } /* RTL — slide in from right edge (Arabic site) */ body.is-rtl .hexp-np-overlay, [dir="rtl"] .hexp-np-overlay { left: auto; right: 20px; transform: translateX(30px); } .hexp-np-overlay[hidden] { display: none !important; } .hexp-np-overlay.is-open { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; } .hexp-np-box { background: #1a2847; /* deep navy — matches HostAdvice + your brand */ border-radius: 12px; width: 100%; padding: 28px 24px 24px; text-align: center; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); position: relative; color: #fff; transform: none; } .hexp-np-close { position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.6); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: color .2s ease, background .2s ease; } body.is-rtl .hexp-np-close, [dir="rtl"] .hexp-np-close { right: auto; left: 12px; } .hexp-np-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .hexp-np-icon { display: none; /* hidden in compact corner mode — saves vertical space */ } .hexp-np-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.3; letter-spacing: -0.01em; } .hexp-np-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.75); margin: 0 0 18px; line-height: 1.5; } .hexp-np-magnet { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-size: 12px; padding: 8px 12px; border-radius: 6px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; justify-content: center; } .hexp-np-magnet i { color: #fbbf24; } .hexp-np-form { display: flex; flex-direction: column; gap: 10px; margin: 0; } .hexp-np-form input[type="email"] { width: 100%; padding: 12px 14px; border: 0; border-radius: 999px; font-size: 14px; background: #fff; color: #0f172a; outline: none; box-sizing: border-box; } .hexp-np-form input[type="email"]:focus { box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.4); } .hexp-np-submit { width: 100%; padding: 13px 18px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #f97316, #ea580c); /* orange — high contrast on navy */ color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .hexp-np-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4); } .hexp-np-submit:active { transform: translateY(0); } .hexp-np-msg { margin-top: 12px; font-size: 13px; padding: 8px 12px; border-radius: 6px; } .hexp-np-msg.is-success { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); } .hexp-np-msg.is-error { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); } .hexp-np-fineprint { margin: 12px 0 0; font-size: 11px; color: rgba(255, 255, 255, 0.5); } /* Mobile — full-width sticky bottom bar instead of corner */ @media (max-width: 480px) { .hexp-np-overlay, body.is-rtl .hexp-np-overlay, [dir="rtl"] .hexp-np-overlay { bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; transform: translateY(100%); } .hexp-np-overlay.is-open { transform: translateY(0); } .hexp-np-box { border-radius: 12px 12px 0 0; padding: 22px 20px 18px; } .hexp-np-title { font-size: 17px; } .hexp-np-subtitle { font-size: 12.5px; margin-bottom: 14px; } } /* ================================================================ * Logo Size Boost (added v3.0.4) * Bigger logos in primary listings & popups for better brand recall. * Overrides earlier rules with a higher-specificity selector chain. * ================================================================ */ /* Provider cards on homepage / archive / type pages */ .hexp-pcv2-card .hexp-pcv2-logo { min-height: 110px; } .hexp-pcv2-card .hexp-pcv2-logo-link { min-height: 110px; padding: 8px; } .hexp-pcv2-card .hexp-pcv2-logo img { max-width: 100%; max-height: 110px; width: auto; height: auto; object-fit: contain; } /* Single-company popup logo */ .hexp-popup-overlay .hexp-popup-logo { min-height: 80px; } .hexp-popup-overlay .hexp-popup-logo img { max-height: 80px; max-width: 240px; object-fit: contain; } /* 3-card deals popup logo */ .hexp-deals-popup-overlay .hexp-deals-logo { min-height: 70px; } .hexp-deals-popup-overlay .hexp-deals-logo img { max-height: 70px; max-width: 200px; object-fit: contain; } /* Comparison page header logos */ .hexp-compare-company-cell .hexp-cmp-logo { height: 70px; } .hexp-compare-company-cell .hexp-cmp-logo img { max-height: 60px; max-width: 180px; object-fit: contain; } /* "Popular providers" sidebar in single blog posts */ .hexp-pp-item .hexp-pp-logo { min-height: 60px; } .hexp-pp-item .hexp-pp-logo img { max-height: 60px; max-width: 180px; object-fit: contain; } /* Single-company hero logo (review page) */ .hexp-single-hero .hexp-pcv2-logo, .hexp-single-hero .hexp-pcv2-logo-link { min-height: 130px; } .hexp-single-hero .hexp-pcv2-logo img { max-height: 130px; max-width: 100%; } /* Mobile — slightly smaller so they don't dominate the card */ @media (max-width: 768px) { .hexp-pcv2-card .hexp-pcv2-logo, .hexp-pcv2-card .hexp-pcv2-logo-link { min-height: 90px; } .hexp-pcv2-card .hexp-pcv2-logo img { max-height: 90px; } } /* ================================================================ * Personalization (added v3.1.0) * Recommended-for-you section + reset button styles * ================================================================ */ .hexp-personalized-section { background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%); padding-top: 32px !important; padding-bottom: 32px !important; margin-bottom: 8px; border-bottom: 1px solid #e0e7ff; position: relative; } .hexp-personalized-section .hexp-section-title-left { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .hexp-personalized-eyebrow { display: inline-flex !important; align-items: center; gap: 6px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff !important; padding: 4px 12px !important; border-radius: 99px; font-size: 11.5px !important; font-weight: 700; letter-spacing: .3px; } .hexp-personalized-eyebrow i { font-size: 11px; } .hexp-personalized-section h2 { margin-top: 8px !important; } .hexp-personalized-dismiss { background: rgba(255,255,255,0.7); border: 1px solid #e5e7eb; border-radius: 50%; width: 32px; height: 32px; color: #64748b; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; } .hexp-personalized-dismiss:hover { background: #fff; color: #0f172a; border-color: #cbd5e1; } /* v3.7.141 — Reset link CSS removed. The button was eliminated because any visitor could click it and wipe personalization. .hexp-personalize-reset and .hexp-personalize-reset-btn classes are no longer rendered. */ /* ================================================================ * Quiz / Wizard (added v3.2.0) * Interactive 6-question hosting recommender * ================================================================ */ .hexp-quiz-page { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%); min-height: 70vh; padding: 60px 0 80px; } .hexp-quiz-page .hexp-container { max-width: 720px; } /* ===== INTRO ===== */ .hexp-quiz-intro { text-align: center; padding: 30px 20px; } .hexp-quiz-intro-icon { width: 86px; height: 86px; margin: 0 auto 20px; background: linear-gradient(135deg, #2563eb, #7c3aed); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; box-shadow: 0 14px 40px rgba(37, 99, 235, 0.35); } .hexp-quiz-intro h1 { font-size: 36px; font-weight: 800; color: #0f172a; margin: 0 0 12px; line-height: 1.15; } .hexp-quiz-intro-sub { color: #475569; font-size: 16px; line-height: 1.55; max-width: 540px; margin: 0 auto 28px; } .hexp-quiz-intro-features { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-bottom: 32px; } .hexp-quiz-intro-feat { display: inline-flex; align-items: center; gap: 8px; color: #475569; font-size: 14px; font-weight: 600; background: #fff; padding: 10px 16px; border-radius: 99px; border: 1px solid #e5e7eb; } .hexp-quiz-intro-feat i { color: #2563eb; font-size: 14px; } .hexp-quiz-start-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border: none; padding: 16px 36px; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s; } .hexp-quiz-start-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4); } /* ===== PROGRESS ===== */ .hexp-quiz-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; } .hexp-quiz-progress-bar { flex: 1; height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; } .hexp-quiz-progress-fill { height: 100%; background: linear-gradient(90deg, #2563eb, #7c3aed); border-radius: 99px; transition: width .35s ease; } .hexp-quiz-progress-text { font-size: 13px; font-weight: 700; color: #475569; min-width: 40px; } /* ===== QUESTION ===== */ .hexp-quiz-question { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 36px 28px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04); animation: hexpQuizFadeIn 0.4s ease; } @keyframes hexpQuizFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .hexp-quiz-question-icon { font-size: 40px; text-align: center; margin-bottom: 12px; } .hexp-quiz-question-title { text-align: center; font-size: 24px; font-weight: 800; color: #0f172a; margin: 0 0 24px; line-height: 1.3; } .hexp-quiz-answers { display: flex; flex-direction: column; gap: 10px; } .hexp-quiz-answer { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f8fafc; border: 2px solid transparent; color: #0f172a; padding: 14px 18px; border-radius: 10px; font-size: 15px; font-weight: 500; cursor: pointer; text-align: left; transition: all .15s; } .hexp-quiz-answer:hover { background: #eff6ff; border-color: #93c5fd; } .hexp-quiz-answer.is-selected { background: #2563eb; color: #fff; border-color: #1d4ed8; } .hexp-quiz-answer-check { opacity: 0; font-size: 13px; transition: opacity .15s; } .hexp-quiz-answer.is-selected .hexp-quiz-answer-check { opacity: 1; } .hexp-quiz-nav { margin-top: 20px; text-align: left; } .hexp-quiz-back { background: transparent; border: 1px solid #cbd5e1; color: #475569; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .hexp-quiz-back:hover { background: #f1f5f9; } /* ===== LOADING ===== */ .hexp-quiz-loading { text-align: center; padding: 80px 20px; } .hexp-quiz-spinner { width: 56px; height: 56px; border: 4px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; margin: 0 auto 20px; animation: hexpQuizSpin 0.8s linear infinite; } @keyframes hexpQuizSpin { to { transform: rotate(360deg); } } .hexp-quiz-loading h2 { font-size: 22px; color: #0f172a; margin: 0 0 6px; } .hexp-quiz-loading p { color: #64748b; font-size: 14px; margin: 0; } /* ===== RESULT ===== */ .hexp-quiz-result { animation: hexpQuizFadeIn 0.4s ease; } .hexp-quiz-result-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; padding: 8px 18px; border-radius: 99px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; margin-bottom: 16px; } .hexp-quiz-result-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 32px 28px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06); margin-bottom: 24px; } .hexp-quiz-top-card { /* container is the outer card; .hexp-quiz-top-* are children */ } .hexp-quiz-top-header { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid #f1f5f9; } .hexp-quiz-top-logo, .hexp-quiz-top-logo-text { width: 100px; height: 70px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hexp-quiz-top-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .hexp-quiz-top-logo-text { background: #f1f5f9; border-radius: 8px; font-weight: 800; font-size: 14px; color: #1e3a8a; padding: 0 12px; } .hexp-quiz-top-meta h2 { font-size: 26px; font-weight: 800; color: #0f172a; margin: 0 0 6px; } .hexp-quiz-top-meta-row { color: #475569; font-size: 14px; font-weight: 600; } .hexp-quiz-reasons { margin-bottom: 22px; } .hexp-quiz-reasons-title { font-size: 13px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } .hexp-quiz-reasons ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hexp-quiz-reasons li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #0f172a; } .hexp-quiz-reasons li i { color: #16a34a; font-size: 12px; background: #d1fae5; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .hexp-quiz-cta-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff !important; padding: 16px 24px; border-radius: 12px; font-size: 15.5px; font-weight: 700; text-decoration: none; margin-bottom: 12px; transition: transform .15s, box-shadow .15s; } .hexp-quiz-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4); color: #fff !important; } .hexp-quiz-review-link { display: block; text-align: center; color: #2563eb; font-size: 13.5px; font-weight: 600; text-decoration: none; } .hexp-quiz-review-link:hover { text-decoration: underline; } /* ===== EMAIL OPT-IN ===== */ .hexp-quiz-email-box { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-radius: 14px; padding: 24px; text-align: center; margin-bottom: 28px; } .hexp-quiz-email-icon { font-size: 28px; color: #d97706; margin-bottom: 6px; } .hexp-quiz-email-box h3 { font-size: 17px; font-weight: 800; color: #78350f; margin: 0 0 4px; } .hexp-quiz-email-box p { color: #78350f; font-size: 13.5px; margin: 0 0 14px; } .hexp-quiz-email-form { display: flex; gap: 8px; max-width: 380px; margin: 0 auto; } .hexp-quiz-email-form input[type="email"] { flex: 1; padding: 11px 14px; border: 1.5px solid #fde68a; border-radius: 8px; font-size: 14px; background: #fff; } .hexp-quiz-email-form input[type="email"]:focus { outline: none; border-color: #d97706; } .hexp-quiz-email-form button { background: #78350f; color: #fff; border: none; padding: 11px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; } .hexp-quiz-email-form button:hover { background: #92400e; } .hexp-quiz-email-msg { margin-top: 10px; font-size: 13px; font-weight: 600; } .hexp-quiz-email-msg.is-success { color: #065f46; } .hexp-quiz-email-msg.is-error { color: #991b1b; } /* ===== RUNNER-UPS ===== */ .hexp-quiz-runners-title { font-size: 14px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 14px; } .hexp-quiz-runners { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .hexp-quiz-runner { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e5e7eb; padding: 14px 18px; border-radius: 10px; color: inherit; text-decoration: none; transition: all .15s; } .hexp-quiz-runner:hover { border-color: #93c5fd; background: #eff6ff; } .hexp-quiz-runner-logo, .hexp-quiz-runner-logo-text { width: 70px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hexp-quiz-runner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .hexp-quiz-runner-logo-text { background: #f1f5f9; border-radius: 6px; font-weight: 800; font-size: 12px; color: #1e3a8a; } .hexp-quiz-runner-body { flex: 1; min-width: 0; } .hexp-quiz-runner-title { font-size: 15px; font-weight: 700; color: #0f172a; } .hexp-quiz-runner-meta { font-size: 12.5px; color: #64748b; margin-top: 2px; } .hexp-quiz-runner i { color: #cbd5e1; font-size: 13px; } .hexp-quiz-runner:hover i { color: #2563eb; } /* ===== ACTIONS ===== */ .hexp-quiz-result-actions { text-align: center; } .hexp-quiz-restart { background: transparent; border: 1px solid #cbd5e1; color: #64748b; padding: 10px 20px; border-radius: 99px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .hexp-quiz-restart:hover { background: #f1f5f9; color: #0f172a; } /* ===== RESPONSIVE ===== */ @media (max-width: 640px) { .hexp-quiz-intro h1 { font-size: 26px; } .hexp-quiz-intro-features { flex-direction: column; align-items: stretch; } .hexp-quiz-question { padding: 24px 20px; } .hexp-quiz-question-title { font-size: 18px; } .hexp-quiz-top-header { flex-direction: column; text-align: center; gap: 14px; } .hexp-quiz-reasons ul { grid-template-columns: 1fr; } .hexp-quiz-email-form { flex-direction: column; } } /* RTL */ html[dir=rtl] .hexp-quiz-answer { text-align: right; } html[dir=rtl] .hexp-quiz-runner i, html[dir=rtl] .hexp-quiz-cta-btn i, html[dir=rtl] .hexp-quiz-start-btn i, html[dir=rtl] .hexp-quiz-review-link::after { transform: scaleX(-1); } /* ================================================================ * Quiz Promotion (added v3.2.1) * Top nav link + homepage banner + email gate * ================================================================ */ /* ===== Top Nav: Quiz Link ===== */ .hexp-nav-item-quiz { display: flex; align-items: center; } .hexp-nav-link-quiz { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff !important; font-weight: 700 !important; transition: transform .15s, box-shadow .15s, background .15s; position: relative; } .hexp-nav-link-quiz:hover { background: linear-gradient(135deg, #1d4ed8, #6d28d9) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); } .hexp-nav-link-quiz i.fa-wand-magic-sparkles { font-size: 12px; opacity: 1; color: #fde68a; } .hexp-nav-quiz-badge { background: #fbbf24; color: #78350f; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 99px; letter-spacing: .5px; margin-left: 2px; line-height: 1; } /* ===== Homepage Banner ===== */ .hexp-quiz-banner { padding: 28px 0; background: transparent; } .hexp-quiz-banner-link { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #7c3aed 100%); color: #fff !important; padding: 22px 28px; border-radius: 16px; text-decoration: none; box-shadow: 0 12px 32px rgba(37, 99, 235, 0.25); transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; } .hexp-quiz-banner-link::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); pointer-events: none; } .hexp-quiz-banner-link:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(37, 99, 235, 0.4); color: #fff !important; } .hexp-quiz-banner-icon { width: 60px; height: 60px; background: rgba(255,255,255,0.2); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; } .hexp-quiz-banner-text { flex: 1; } .hexp-quiz-banner-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,0.85); margin-bottom: 4px; } .hexp-quiz-banner-title { font-size: 17px; font-weight: 700; line-height: 1.4; } .hexp-quiz-banner-cta { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #1e3a8a !important; padding: 12px 22px; border-radius: 99px; font-size: 14px; font-weight: 700; flex-shrink: 0; transition: transform .15s; } .hexp-quiz-banner-link:hover .hexp-quiz-banner-cta { transform: scale(1.05); } .hexp-quiz-banner-cta i { font-size: 11px; } /* ===== Email Gate (between quiz and result) ===== */ .hexp-quiz-gate { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 40px 32px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06); text-align: center; animation: hexpQuizFadeIn 0.4s ease; } .hexp-quiz-gate-icon { width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, #f59e0b, #f97316); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; box-shadow: 0 12px 32px rgba(245, 158, 11, 0.4); } .hexp-quiz-gate h2 { font-size: 28px; font-weight: 800; color: #0f172a; margin: 0 0 10px; } .hexp-quiz-gate-sub { color: #475569; font-size: 15px; line-height: 1.6; max-width: 480px; margin: 0 auto 24px; } .hexp-quiz-gate-perks { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 0 auto 24px; text-align: left; } .hexp-quiz-gate-perk { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #0f172a; } .hexp-quiz-gate-perk i { color: #16a34a; background: #d1fae5; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .hexp-quiz-gate-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto 12px; } .hexp-quiz-gate-form input[type="email"] { flex: 1; padding: 14px 16px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 14.5px; color: #0f172a; } .hexp-quiz-gate-form input[type="email"]:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .hexp-quiz-gate-submit { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border: none; padding: 14px 22px; border-radius: 10px; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s; } .hexp-quiz-gate-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); } .hexp-quiz-gate-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .hexp-quiz-gate-msg { font-size: 13px; font-weight: 600; margin-bottom: 12px; } .hexp-quiz-gate-msg.is-error { color: #991b1b; } .hexp-quiz-gate-msg.is-success { color: #065f46; } .hexp-quiz-gate-skip { background: transparent; border: none; color: #64748b; font-size: 13px; font-weight: 500; text-decoration: underline; cursor: pointer; padding: 8px 14px; margin-top: 4px; } .hexp-quiz-gate-skip:hover { color: #0f172a; } .hexp-quiz-gate-fineprint { margin: 16px 0 0; font-size: 11.5px; color: #94a3b8; display: flex; align-items: center; justify-content: center; gap: 6px; } .hexp-quiz-gate-fineprint i { font-size: 11px; color: #16a34a; } /* Responsive */ @media (max-width: 768px) { .hexp-quiz-banner-link { flex-direction: column; text-align: center; padding: 20px; } .hexp-quiz-banner-cta { width: 100%; justify-content: center; } .hexp-quiz-gate { padding: 28px 20px; } .hexp-quiz-gate h2 { font-size: 22px; } .hexp-quiz-gate-form { flex-direction: column; } } /* ================================================================ * Quiz Plan Suggestions (added v3.2.3) * Top 3 plans for the matched company, shown after the CTA * ================================================================ */ .hexp-quiz-plans { margin: 24px 0 18px; padding-top: 22px; border-top: 1px solid #f1f5f9; } .hexp-quiz-plans-title { font-size: 13px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; text-align: center; } .hexp-quiz-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .hexp-quiz-plan { background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 18px 14px 14px; display: flex; flex-direction: column; position: relative; transition: all .15s; } .hexp-quiz-plan:hover { border-color: #93c5fd; background: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); } .hexp-quiz-plan.is-recommended { background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%); border-color: #2563eb; border-width: 2px; transform: scale(1.03); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15); } .hexp-quiz-plan-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 99px; letter-spacing: .3px; white-space: nowrap; box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3); } .hexp-quiz-plan-name { font-size: 16px; font-weight: 800; color: #0f172a; text-align: center; margin-bottom: 10px; line-height: 1.3; } .hexp-quiz-plan-price { text-align: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #e5e7eb; } .hexp-quiz-plan-price-amt { font-size: 24px; font-weight: 800; color: #2563eb; } .hexp-quiz-plan-price-period { font-size: 12px; color: #64748b; margin-left: 2px; } .hexp-quiz-plan-features { list-style: none; padding: 0; margin: 0 0 14px; flex: 1; } .hexp-quiz-plan-features li { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: #475569; line-height: 1.4; margin-bottom: 6px; } .hexp-quiz-plan-features li i { color: #16a34a; font-size: 9px; margin-top: 4px; flex-shrink: 0; } .hexp-quiz-plan-cta { display: flex; align-items: center; justify-content: center; gap: 5px; background: #fff; color: #2563eb !important; border: 1.5px solid #2563eb; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; text-decoration: none; transition: all .15s; } .hexp-quiz-plan-cta:hover { background: #2563eb; color: #fff !important; } .hexp-quiz-plan.is-recommended .hexp-quiz-plan-cta { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff !important; border-color: transparent; } .hexp-quiz-plan.is-recommended .hexp-quiz-plan-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(37, 99, 235, 0.4); } .hexp-quiz-plan-cta i { font-size: 9px; } /* Responsive */ @media (max-width: 640px) { .hexp-quiz-plans-grid { grid-template-columns: 1fr; } .hexp-quiz-plan.is-recommended { transform: none; } } /* ============================================================ * MOBILE NAVIGATION DRAWER (v3.7.1) * * Below 1100px the desktop nav is replaced with a slide-in drawer * that opens from the right. The drawer reuses the same .hexp-main-nav * markup — no DOM changes needed — driven entirely by the * `body.hexp-mobile-open` class added by main.js. * ============================================================ */ /* ============================================================ * MOBILE NAVIGATION DRAWER (v3.7.1, breakpoint widened in v3.7.8) * * Below 1281px the desktop nav is replaced with a slide-in drawer * that opens from the right. The drawer reuses the same .hexp-main-nav * markup — no DOM changes needed — driven entirely by the * `body.hexp-mobile-open` class added by main.js. * * The breakpoint (1280px) was chosen so iPad Pro 11" landscape * (1194px), iPad Air (1180px), and similar tablet widths use the * drawer rather than cramming the desktop nav into too-narrow space. * ============================================================ */ @media (max-width:1280px){ /* When the mobile drawer is open the header (which is the drawer's parent and therefore its stacking-context root) must sit ABOVE the backdrop. Otherwise z-index numbers inside .hexp-main-nav are capped by the header's own z-index of 100, putting the backdrop visually on top of the menu and intercepting every tap. */ body.hexp-mobile-open .hexp-header{ z-index:10001 !important; } /* Header layout adjustments for tablet/mobile */ .hexp-header-inner{ gap:12px; padding:0 16px; } .hexp-logo{ font-size:18px; } .hexp-logo-mark{ width:32px; height:32px; } /* Hide the desktop "Find My Hosting" CTA on small screens — it's reachable via the drawer menu so we don't need it cramping the header. Same for the orange Monthly Pick badge. */ .hexp-header-inner > .hexp-btn-primary, .hexp-cta-monthly-pick, .hexp-monthly-pick-badge{ display:none; } /* The mobile drawer itself. Replaces the inline nav with a slide-in panel from the right. z-index here is RELATIVE to the header's stacking context. The header itself is lifted to z-index:10001 above when the drawer is open, so the absolute paint order ends up: [page content] z-index: auto [backdrop] z-index: 9998 (global) [header] z-index: 10001 (when drawer open) └ [drawer] z-index: 10 (relative inside header) */ .hexp-main-nav{ position:fixed !important; top:0; right:0; bottom:0; /* Drawer width adapts to screen size: - phone (≤640px): 86vw, max 360px - tablet portrait (641-1023px): 380px (fixed) — leaves backdrop visible - tablet landscape (1024-1100px): 420px */ width:min(86vw, 360px); max-width:360px; background:#fff; display:flex !important; flex-direction:column; justify-content:flex-start; align-items:stretch; padding:80px 0 32px; box-shadow:-12px 0 36px rgba(15,23,42,0.18); transform:translateX(110%); transition:transform .35s cubic-bezier(.32,.72,.27,1); z-index:10; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:none; } @media (min-width:641px) and (max-width:1023px){ .hexp-main-nav{ width:380px; max-width:380px; } } @media (min-width:1024px) and (max-width:1100px){ .hexp-main-nav{ width:420px; max-width:420px; } } html[dir=rtl] .hexp-main-nav{ right:auto; left:0; transform:translateX(-110%); box-shadow:12px 0 36px rgba(15,23,42,0.18); } body.hexp-mobile-open .hexp-main-nav{ transform:translateX(0); } /* Backdrop (injected by JS) — sits BELOW the drawer so taps on the drawer reach the menu, not the backdrop. */ .hexp-mobile-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,0.55); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; z-index:9998; /* BELOW drawer */ pointer-events:none; } body.hexp-mobile-open .hexp-mobile-backdrop{ opacity:1; visibility:visible; pointer-events:auto; /* only clickable when open */ } body.hexp-mobile-open{ overflow:hidden; } /* Reset desktop menu styles inside the drawer */ .hexp-main-nav .hexp-menu{ flex-direction:column; gap:0; width:100%; padding:0; margin:0; list-style:none; } .hexp-main-nav .hexp-nav-item{ width:100%; border-bottom:1px solid #f1f5f9; position:relative; /* not static — creates a fresh stacking root for safety */ z-index:1; opacity:0; transition:opacity .35s ease; } body.hexp-mobile-open .hexp-main-nav .hexp-nav-item{ opacity:1; } /* Stagger each item so they appear sequentially after the drawer has slid into view. Drawer transition is .35s — items start at .15s then step every .06s. Opacity-only (no transform) so we don't create stacking contexts that could trap clicks. */ body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(1){ transition-delay:.15s; } body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(2){ transition-delay:.21s; } body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(3){ transition-delay:.27s; } body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(4){ transition-delay:.33s; } body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(5){ transition-delay:.39s; } body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(6){ transition-delay:.45s; } body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(7){ transition-delay:.51s; } .hexp-main-nav .hexp-nav-link{ padding:16px 24px; font-size:15px; font-weight:600; color:#0f172a; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; cursor:pointer; } .hexp-main-nav .hexp-nav-link:hover{ background:#f8fafc; } .hexp-main-nav .hexp-nav-link i.fa-chevron-down{ transition:transform .25s ease; font-size:12px; opacity:.5; } .hexp-nav-item.is-mobile-open > .hexp-nav-link i.fa-chevron-down{ transform:rotate(180deg); opacity:1; color:var(--hexp-primary); } /* Mega menu inside the drawer — accordion behavior */ .hexp-main-nav .hexp-mega-menu{ position:static !important; display:none !important; opacity:1 !important; visibility:visible !important; transform:none !important; min-width:0 !important; box-shadow:none !important; border:none !important; border-top:1px solid #f1f5f9 !important; border-radius:0 !important; padding:8px 16px 16px !important; grid-template-columns:1fr !important; gap:0 !important; background:#f8fafc !important; margin:0 !important; } .hexp-nav-item.is-mobile-open > .hexp-mega-menu{ display:block !important; } .hexp-main-nav .hexp-mega-item, .hexp-main-nav .hexp-mega-link{ padding:12px 14px !important; font-size:14px !important; border-radius:8px; display:flex !important; justify-content:space-between !important; align-items:center !important; } .hexp-main-nav .hexp-mega-item:hover{ background:#fff !important; } .hexp-main-nav .hexp-mega-item:not(:last-child){ border-bottom:1px solid #eef2f7; } .hexp-main-nav .hexp-mega-link{ color:var(--hexp-primary); font-weight:700; margin-top:6px; } /* Burger button — visible, properly sized */ .hexp-mobile-toggle{ display:grid !important; place-items:center; width:44px; height:44px; font-size:20px; background:transparent; border:1px solid #e5e7eb; border-radius:8px; color:#0f172a; cursor:pointer; transition:all .15s ease; } .hexp-mobile-toggle:hover, .hexp-mobile-toggle[aria-expanded="true"]{ background:#f1f5f9; border-color:#cbd5e1; } } /* Hide drawer / backdrop on desktop entirely — defensive */ @media (min-width:1281px){ .hexp-mobile-backdrop{ display:none !important; } } /* Tighter tablet/mobile typography for hero on small screens */ @media (max-width:768px){ .hexp-hero{ padding:32px 0 16px !important; } .hexp-hero h1{ font-size:28px !important; } .hexp-hero p{ font-size:14.5px !important; } .hexp-hero-eyebrow{ font-size:12px !important; padding:5px 12px !important; } } /* ============================================================ * MOBILE PILL HORIZONTAL SCROLL (v3.7.5/.6) * * On mobile/tablet (<900px) make filter pills scroll horizontally * instead of wrapping. This is the standard mobile pattern: rather * than stacking 8 pills in 4 rows, the user swipes left/right * through them. Applies to: * - .hexp-category-pills (front page Explore Categories etc.) * - .hexp-filter-tabs-h (hosting type + companies archive filters) * * Each pill stays its natural size (no shrinking) and the row * contains its own scroll. NO negative margins — that would push * the row past its parent card edges and break the layout. * ============================================================ */ @media (max-width:900px){ .hexp-category-pills:not(.hexp-pills-2rows), .hexp-filter-tabs-h{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; gap:8px; padding-bottom:8px; max-width:100%; /* Hide scrollbar (looks cleaner — swipe is the affordance) */ scrollbar-width:none; } .hexp-category-pills:not(.hexp-pills-2rows)::-webkit-scrollbar, .hexp-filter-tabs-h::-webkit-scrollbar{ display:none; } /* Each pill: don't shrink, keep nice scroll-snap point */ .hexp-category-pills:not(.hexp-pills-2rows) .hexp-cat-pill, .hexp-filter-tabs-h .hexp-filter-tab-h{ flex:0 0 auto; scroll-snap-align:start; white-space:nowrap; } /* The hosting-type filter tabs use a bottom-border to indicate active state — that doesn't fit horizontal scrolling. Round them into proper pills on mobile so they look right while swiping. */ .hexp-filter-tabs-h .hexp-filter-tab-h{ border-radius:99px !important; border-bottom:none !important; background:#fff; border:1px solid #e5e7eb !important; } .hexp-filter-tabs-h .hexp-filter-tab-h.active{ background:var(--hexp-primary); color:#fff !important; border-color:var(--hexp-primary) !important; } .hexp-filter-tabs-h .hexp-filter-tab-h.active .tab-count{ background:rgba(255,255,255,0.2); color:#fff; } /* Ensure parent card doesn't grow with the pills row — the row should scroll WITHIN the card, not push the card edges. */ .hexp-explore-card, .hexp-service-card{ min-width:0; overflow:hidden; } .hexp-explore-grid{ min-width:0; grid-template-columns:1fr !important; } /* v3.7.124 — On touch devices, swipe IS the affordance. Arrow buttons would clutter the row and never get tapped. Hide them and shrink the gradient overlays so the row reads clean. */ .hexp-tab-arrow{ display:none !important; } .hexp-tabs-wrap::before, .hexp-tabs-wrap::after{ width:24px; } } /* ============================================================ * TABLET / RESPONSIVE AUDIT (v3.7.5) * ============================================================ */ /* Tablet portrait (768-1023px): the single-page layout dropped to one column at 1100px, but the body content was still using wide horizontal padding. Tighten so cards use the available width. */ @media (min-width:768px) and (max-width:1023px){ .hexp-single-grid{ gap:24px; } .hexp-single-section{ padding:24px 22px; } .hexp-single-hero{ padding:32px 0 24px; } .hexp-single-hero h1{ font-size:32px !important; line-height:1.25 !important; } .hexp-single-hero .lede{ font-size:15px; } /* Pros/Cons grid on tablet — 2 columns is fine, just tighten */ .hexp-pros-cons{ gap:16px; } /* Comparison table: enable horizontal scroll on tablet too — 25+ rows × 4 columns can overflow the available width */ .hexp-comparison-table-wrap, .hexp-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Plan cards on review page: 2 columns instead of trying 3 */ .hexp-plan-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:14px; } /* Alternatives grid: 2 columns on tablet (was 3) */ .hexp-alt-grid{ grid-template-columns:repeat(2, 1fr) !important; } /* Coupon grid: 2 columns on tablet */ .hexp-coupons-grid{ grid-template-columns:repeat(2, 1fr) !important; } /* FAQ on tablet — full width questions */ .hexp-faq-q{ font-size:15px; padding:16px 18px; } } /* Tablet landscape / small desktop (1024-1100px): hero visual still hidden (already handled at 1100px breakpoint) but make sure the text uses the available width properly */ @media (min-width:1024px) and (max-width:1100px){ .hexp-hero h1{ font-size:38px !important; } } /* Small phone refinements (<480px) */ @media (max-width:480px){ /* Single-page hero on phone: stack the right-side card under the hero text instead of side-by-side */ .hexp-single-hero-inner{ grid-template-columns:1fr !important; gap:20px; } .hexp-single-info-card{ padding:18px; } /* Reviews section on phone — full width */ .hexp-pros-cons{ grid-template-columns:1fr !important; } /* Plan cards stack on phone */ .hexp-plan-grid{ grid-template-columns:1fr !important; } /* Alternatives stack on phone */ .hexp-alt-grid{ grid-template-columns:1fr !important; } } /* ============================================================ * (Removed in v3.7.8) — Earlier we tried to shrink the desktop * mega menu in the 1101-1280px range to fit the viewport. That * patch is no longer needed: the drawer mobile menu now takes over * for any width ≤1280px (see drawer media query above), so the * desktop mega menu is only rendered at ≥1281px where 820px fits. * ============================================================ */ /* ============================================================ * NAV BREAKPOINT FIX — Mobile drawer up to 1280px (v3.7.8) * * Earlier the desktop nav was hidden at ≤1100px, but on tablet * landscape (iPad Pro 11" = 1194px, iPad Air = 1180px, etc.) the * nav still rendered with all 6 items + CTA + Monthly Pick badge, * cramming everything into a too-narrow space. * * The actual hiding/showing of the desktop nav vs the drawer is * already handled by the drawer media block above (which goes up * to max-width:1280px and uses display:flex !important to convert * .hexp-main-nav into a fixed-position drawer). What we still need * to do here is hide the OTHER desktop-only header bits (the CTA * button + Monthly Pick badge) in the new range, and force the * burger toggle to appear. * * NOTE: We deliberately do NOT add `display: none` to .hexp-main-nav * here — that would cancel the drawer rule with the same specificity * and make the menu invisible when opened. * ============================================================ */ @media (min-width:1101px) and (max-width:1280px){ .hexp-mobile-toggle{ display:grid !important; } /* Hide the desktop "Find My Hosting" CTA + Monthly Pick badge in this range too — they're reachable via the drawer. */ .hexp-header-inner > .hexp-btn-primary, .hexp-cta-monthly-pick, .hexp-monthly-pick-badge{ display:none !important; } } /* ============================================================ * HERO ORBIT CONSTELLATION (v3.7.12 — proper 3D rebuild) * * Inspired by 3D AI-platform hero designs: a central card with * 6 satellite logos rotating slowly around it, connected by light * paths with traveling pulses. * * Implementation (rewritten for v3.7.12 to fix two issues from * the previous attempt): * 1. Logos weren't actually rotating — the per-satellite * counter-rotation `transform` overrode the parent ring's * rotation entirely. Fix: use NESTED transforms on dedicated * child elements. The .hexp-orbit-arm rotates with the parent * ring (changing position around the circle); inside it, the * .hexp-orbit-satellite counter-rotates so the logo stays * upright. Independent transforms, no override conflicts. * * 2. Layout looked flat ("not 3D"). Fix: add `perspective` on * the container, tilt the orbit plane, and apply * transform-style:preserve-3d so the rings + light paths * sit on a tilted plane while the logos float in real 3D * space. This gives depth without needing any 3D library. * * All animation via CSS transforms / opacity (GPU-friendly). * Honors prefers-reduced-motion. * ============================================================ */ .hexp-hero-orbit{ position:relative; width:100%; max-width:380px; aspect-ratio:1 / 1; height:auto !important; margin:0 auto; display:grid; place-items:center; /* 3D scene root */ perspective:1200px; perspective-origin:50% 35%; } /* SVG layer (rings + light paths) sits on a TILTED plane to give the constellation real depth. The 60deg X-rotation makes the rings look like an oblique disc, like in the reference image. */ .hexp-orbit-rings{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; transform:rotateX(58deg); transform-origin:center; transform-style:preserve-3d; } .hexp-orbit-ring{ fill:none; stroke:rgba(96,165,250,0.4); stroke-width:1; } .hexp-orbit-ring-outer{ stroke-dasharray:3 6; stroke:rgba(96,165,250,0.3); animation:hexp-orbit-ring-spin 60s linear infinite; transform-origin:center; } .hexp-orbit-ring-inner{ stroke:rgba(96,165,250,0.5); animation:hexp-orbit-ring-spin 40s linear infinite reverse; transform-origin:center; } @keyframes hexp-orbit-ring-spin{ to { transform:rotate(360deg); } } /* Light paths from center outward */ .hexp-orbit-path{ stroke:rgba(96,165,250,0.18); stroke-width:1; stroke-dasharray:2 4; } /* Traveling pulse — circle that moves from center along each path */ .hexp-orbit-pulse{ fill:#60a5fa; filter:drop-shadow(0 0 6px rgba(96,165,250,0.95)) drop-shadow(0 0 14px rgba(96,165,250,0.6)); animation:hexp-orbit-pulse 2.5s linear infinite; } @keyframes hexp-orbit-pulse{ 0% { transform:translate(0, 0) scale(0); opacity:0; } 15% { transform:translate(0, 0) scale(1); opacity:1; } 85% { transform:translate(var(--path-x), var(--path-y)) scale(1); opacity:1; } 100% { transform:translate(var(--path-x), var(--path-y)) scale(0); opacity:0; } } /* The rotating ring container — drags the 6 satellite arms. This is where the actual orbit motion happens. */ .hexp-orbit-ring-spinner{ position:absolute; inset:0; width:100%; height:100%; z-index:2; animation:hexp-orbit-spin 25s linear infinite; transform-origin:center center; } @keyframes hexp-orbit-spin{ from { transform:rotate(0deg); } to { transform:rotate(360deg); } } /* Each "arm" is fixed at center but rotated to point at one of the 6 angular slots. Because it's INSIDE the spinner, it picks up the spinner's rotation on top of its own static rotation, so its tip sweeps around the circle. The arm itself is invisible — it just positions the satellite. */ .hexp-orbit-arm{ position:absolute; top:50%; left:50%; width:0; height:0; transform-origin:0 0; } .hexp-orbit-arm-0{ transform:rotate(0deg); } .hexp-orbit-arm-1{ transform:rotate(60deg); } .hexp-orbit-arm-2{ transform:rotate(120deg); } .hexp-orbit-arm-3{ transform:rotate(180deg); } .hexp-orbit-arm-4{ transform:rotate(240deg); } .hexp-orbit-arm-5{ transform:rotate(300deg); } /* The satellite is positioned at a fixed distance along the arm. Because the arm rotates (with the spinner), the satellite traces out a circle. The satellite counter-rotates at the same speed as the spinner so the logo stays upright. */ .hexp-orbit-satellite{ position:absolute; top:-150px; /* radius */ left:-45px; /* half logo width */ width:90px; height:54px; animation:hexp-orbit-counter 25s linear infinite; transform-origin:center center; } @keyframes hexp-orbit-counter{ from { transform:rotate(0deg); } to { transform:rotate(-360deg); } } /* Logo card — glassy + glow + subtle 3D tilt on hover */ .hexp-orbit-logo{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(145deg, rgba(255,255,255,0.98), rgba(240,245,255,0.95)); border:1px solid rgba(255,255,255,0.6); border-radius:12px; padding:6px 10px; box-shadow: 0 0 16px rgba(96,165,250,0.5), 0 8px 24px rgba(15,23,42,0.4), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -2px 4px rgba(96,165,250,0.15); transition:transform .3s cubic-bezier(.32,.72,.27,1), box-shadow .3s ease; overflow:hidden; text-decoration:none; transform-style:preserve-3d; } .hexp-orbit-logo:hover{ transform:scale(1.15) translateZ(20px); box-shadow: 0 0 28px rgba(96,165,250,0.8), 0 14px 32px rgba(15,23,42,0.5), inset 0 1px 0 rgba(255,255,255,0.9); } .hexp-orbit-logo img{ max-width:100%; max-height:100%; object-fit:contain; } .hexp-orbit-logo-fallback{ width:32px; height:32px; background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; } /* Center card — sits in front of everything in 3D space */ .hexp-orbit-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) translateZ(40px); z-index:3; transform-style:preserve-3d; } .hexp-orbit-center .hexp-hero-center-card{ width:200px; padding:20px 18px; background:linear-gradient(145deg, rgba(37,99,235,0.25), rgba(15,23,42,0.5)); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); border:1px solid rgba(96,165,250,0.4); box-shadow: 0 0 40px rgba(96,165,250,0.3), 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15); } /* Smaller orbit on tablet/mobile — same 3D structure, scaled radius */ @media (max-width:900px){ .hexp-hero-orbit{ max-width:300px; } .hexp-orbit-satellite{ top:-118px; left:-37px; width:74px; height:46px; } .hexp-orbit-center .hexp-hero-center-card{ width:160px; padding:14px 12px; } } /* Hide the legacy float cards / orbs that we replaced */ .hexp-hero-orbit .orb, .hexp-hero-orbit .hexp-float-card, .hexp-hero-orbit .hexp-hero-card-stack{ display:none; } /* Honor reduced motion: stop all spinning animations */ @media (prefers-reduced-motion:reduce){ .hexp-orbit-ring-outer, .hexp-orbit-ring-inner, .hexp-orbit-ring-spinner, .hexp-orbit-satellite, .hexp-orbit-pulse{ animation:none !important; } } /* ============================================================ * COMPARISONS ARCHIVE PAGE (v3.7.14) * * Custom-designed gallery for /comparisons/ archive. Replaces the * generic "Archives: Comparisons" black-on-white treatment with a * branded multi-section layout: dark navy hero → featured top 3 * → categorized grids → CTA card. * * All headings are explicit white because the hero sits on a navy * gradient (the global critical-CSS fallback also covers this so * no flash of black text on slow CSS load). * ============================================================ */ /* === HERO === */ .hexp-cmp-archive-hero{ background: radial-gradient(1200px 500px at 80% 0%, rgba(96,165,250,0.18), transparent 60%), radial-gradient(800px 400px at 0% 80%, rgba(124,58,237,0.14), transparent 60%), linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); color:#fff; padding:60px 0 56px; position:relative; overflow:hidden; } .hexp-cmp-archive-hero-inner{ max-width:840px; margin:0 auto; text-align:center; } .hexp-cmp-hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:rgba(96,165,250,0.15); border:1px solid rgba(96,165,250,0.35); color:#dbeafe; padding:7px 16px; border-radius:99px; font-size:13px; font-weight:600; margin-bottom:18px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .hexp-cmp-hero-eyebrow i{ color:#60a5fa; font-size:12px; } .hexp-cmp-archive-hero h1{ color:#fff !important; font-size:42px; font-weight:800; line-height:1.15; margin:0 0 16px; letter-spacing:-0.5px; } .hexp-cmp-hero-lede{ color:rgba(255,255,255,0.8); font-size:16px; line-height:1.6; max-width:640px; margin:0 auto 28px; } .hexp-cmp-hero-stats{ display:flex; justify-content:center; gap:32px; flex-wrap:wrap; margin-bottom:28px; padding:18px 0; border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1); } .hexp-cmp-hero-stats .stat{ display:flex; flex-direction:column; align-items:center; gap:2px; } .hexp-cmp-hero-stats .stat strong{ color:#fff; font-size:22px; font-weight:800; line-height:1.2; } .hexp-cmp-hero-stats .stat span{ color:rgba(255,255,255,0.65); font-size:13px; } .hexp-cmp-hero-cta{ display:flex; flex-direction:column; align-items:center; gap:8px; } .hexp-cmp-cta-btn{ display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg, #2563eb, #7c3aed); color:#fff !important; padding:14px 28px; border-radius:12px; font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 12px 28px rgba(37,99,235,0.4); transition:transform .2s ease, box-shadow .2s ease; } .hexp-cmp-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(37,99,235,0.55); } .hexp-cmp-cta-note{ color:rgba(255,255,255,0.6); font-size:13px; } /* === FEATURED — top 3 most-searched comparisons === */ .hexp-cmp-featured{ padding:48px 0 24px; background:#f8fafc; } .hexp-cmp-featured-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:20px; } .hexp-cmp-featured-card{ background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:24px; text-decoration:none; color:inherit; display:flex; flex-direction:column; position:relative; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow:hidden; } .hexp-cmp-featured-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(15,23,42,0.1); border-color:#bfdbfe; } .hexp-cmp-featured-card.is-hero{ background:linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); color:#fff; border-color:transparent; } .hexp-cmp-featured-card.is-hero:hover{ box-shadow:0 24px 50px rgba(30,64,175,0.5); } .hexp-cmp-featured-rank{ position:absolute; top:18px; right:18px; background:#fbbf24; color:#78350f; font-weight:800; font-size:13px; padding:4px 12px; border-radius:99px; } .hexp-cmp-featured-card.is-hero .hexp-cmp-featured-rank{ background:rgba(255,255,255,0.95); color:#1e3a8a; } .hexp-cmp-featured-logos{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; } .hexp-cmp-featured-logo{ width:64px; height:64px; background:#fff; border-radius:12px; border:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; padding:8px; flex-shrink:0; } .hexp-cmp-featured-card.is-hero .hexp-cmp-featured-logo{ background:rgba(255,255,255,0.95); border-color:rgba(255,255,255,0.3); } .hexp-cmp-featured-logo img{ max-width:100%; max-height:100%; object-fit:contain; } .hexp-cmp-featured-logo-fb{ width:48px; height:48px; background:linear-gradient(135deg, #2563eb, #7c3aed); color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; } .hexp-cmp-featured-vs{ font-size:13px; font-weight:800; color:#94a3b8; text-transform:uppercase; } .hexp-cmp-featured-card.is-hero .hexp-cmp-featured-vs{ color:rgba(255,255,255,0.7); } .hexp-cmp-featured-card h3{ font-size:19px; font-weight:800; color:inherit; margin:0 0 8px; line-height:1.3; } .hexp-cmp-featured-card.is-hero h3{ font-size:22px; } .hexp-cmp-featured-card p{ font-size:14px; color:#64748b; line-height:1.5; margin:0 0 16px; flex:1; } .hexp-cmp-featured-card.is-hero p{ color:rgba(255,255,255,0.85); } .hexp-cmp-featured-action{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:#2563eb; margin-top:auto; } .hexp-cmp-featured-card.is-hero .hexp-cmp-featured-action{ color:#fff; } .hexp-cmp-featured-action i{ transition:transform .2s ease; font-size:11px; } .hexp-cmp-featured-card:hover .hexp-cmp-featured-action i{ transform:translateX(4px); } /* === CATEGORIZED SECTIONS === */ .hexp-cmp-sections{ background:#f8fafc; padding:24px 0 56px; } .hexp-cmp-section{ margin-bottom:48px; } .hexp-cmp-section:last-child{ margin-bottom:0; } .hexp-cmp-section-head{ margin-bottom:22px; } .hexp-cmp-section-head h2{ font-size:24px; font-weight:800; color:#0f172a; margin:0 0 6px; display:flex; align-items:center; gap:10px; } .hexp-cmp-section-icon{ font-size:24px; line-height:1; } .hexp-cmp-section-head p{ color:#64748b; font-size:15px; margin:0; } .hexp-cmp-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; } .hexp-cmp-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .hexp-cmp-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,0.08); border-color:#bfdbfe; } .hexp-cmp-card-logos{ display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; } .hexp-cmp-card-logo{ width:40px; height:40px; background:#f8fafc; border-radius:8px; border:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; padding:5px; flex-shrink:0; } .hexp-cmp-card-logo img{ max-width:100%; max-height:100%; object-fit:contain; } .hexp-cmp-card-logo-fb{ width:30px; height:30px; background:linear-gradient(135deg, #2563eb, #7c3aed); color:#fff; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; } .hexp-cmp-card-vs{ font-size:11px; font-weight:800; color:#94a3b8; text-transform:uppercase; } .hexp-cmp-card h3{ font-size:15px; font-weight:800; color:#0f172a; margin:0 0 6px; line-height:1.35; } .hexp-cmp-card p{ font-size:13.5px; color:#64748b; line-height:1.5; margin:0 0 14px; flex:1; } .hexp-cmp-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid #f1f5f9; } .hexp-cmp-card-tag{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; background:#dbeafe; color:#1e40af; white-space:nowrap; } .hexp-cmp-card-tag.tag-green{ background:#d1fae5; color:#065f46; } .hexp-cmp-card-tag.tag-purple{ background:#f3e8ff; color:#9333ea; } .hexp-cmp-card-tag.tag-blue{ background:#dbeafe; color:#1e40af; } .hexp-cmp-card-tag.tag-amber{ background:#fef3c7; color:#d97706; } .hexp-cmp-card-arrow{ font-size:13px; font-weight:700; color:#2563eb; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .hexp-cmp-card-arrow i{ font-size:10px; transition:transform .2s ease; } .hexp-cmp-card:hover .hexp-cmp-card-arrow i{ transform:translateX(4px); } /* === BUILD-YOUR-OWN CTA === */ .hexp-cmp-build-cta{ padding:0 0 64px; background:#f8fafc; } .hexp-cmp-build-card{ background:linear-gradient(135deg, #1e293b 0%, #1e40af 100%); border-radius:24px; padding:36px 40px; display:flex; align-items:center; gap:24px; color:#fff; box-shadow:0 24px 50px rgba(30,64,175,0.2); overflow:hidden; position:relative; } .hexp-cmp-build-card::before{ content:''; position:absolute; top:-50%; right:-10%; width:400px; height:400px; background:radial-gradient(circle, rgba(96,165,250,0.3), transparent 70%); pointer-events:none; } .hexp-cmp-build-icon{ width:64px; height:64px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; flex-shrink:0; position:relative; z-index:1; } .hexp-cmp-build-text{ flex:1; min-width:0; position:relative; z-index:1; } .hexp-cmp-build-text h2{ color:#fff !important; font-size:22px; font-weight:800; margin:0 0 6px; } .hexp-cmp-build-text p{ color:rgba(255,255,255,0.85); font-size:14.5px; line-height:1.55; margin:0; } .hexp-cmp-build-btn{ background:#fff; color:#1e40af !important; padding:14px 24px; border-radius:12px; font-weight:700; font-size:15px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; flex-shrink:0; transition:transform .2s ease; position:relative; z-index:1; } .hexp-cmp-build-btn:hover{ transform:translateY(-2px); } /* === RESPONSIVE === */ @media (max-width:1023px){ .hexp-cmp-archive-hero{ padding:48px 0 44px; } .hexp-cmp-archive-hero h1{ font-size:32px; } .hexp-cmp-hero-stats{ gap:24px; } .hexp-cmp-featured-grid{ grid-template-columns:1fr 1fr; } .hexp-cmp-featured-card.is-hero{ grid-column:1 / -1; } .hexp-cmp-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:640px){ .hexp-cmp-archive-hero{ padding:36px 0 32px; } .hexp-cmp-archive-hero h1{ font-size:26px; } .hexp-cmp-hero-lede{ font-size:14.5px; } .hexp-cmp-hero-stats{ gap:16px; padding:14px 0; } .hexp-cmp-hero-stats .stat strong{ font-size:18px; } .hexp-cmp-hero-stats .stat span{ font-size:12px; } .hexp-cmp-cta-btn{ padding:12px 22px; font-size:14px; } .hexp-cmp-featured-grid, .hexp-cmp-grid{ grid-template-columns:1fr; } .hexp-cmp-featured-card{ padding:20px; } .hexp-cmp-featured-card h3, .hexp-cmp-featured-card.is-hero h3{ font-size:17px; } .hexp-cmp-featured-logo{ width:54px; height:54px; } .hexp-cmp-section-head h2{ font-size:20px; } .hexp-cmp-build-card{ padding:24px; flex-direction:column; align-items:flex-start; text-align:left; } .hexp-cmp-build-text h2{ font-size:18px; } .hexp-cmp-build-btn{ width:100%; justify-content:center; } } /* ============================================================ v3.7.34/35 — AI Explanation Card (quiz result) English, LTR, concise ============================================================ */ .hexp-quiz-ai-explain { margin: 16px 0; padding: 18px 20px 20px; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 1px solid #fcd34d; border-radius: 12px; position: relative; direction: ltr !important; text-align: left !important; } .hexp-quiz-ai-explain::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #f59e0b, #d97706, #f59e0b); border-radius: 12px 12px 0 0; } .hexp-quiz-ai-explain-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; direction: ltr; } .hexp-quiz-ai-explain-icon { font-size: 20px; line-height: 1; } .hexp-quiz-ai-explain-title { font-size: 12px; font-weight: 700; color: #92400e; letter-spacing: .5px; text-transform: uppercase; } .hexp-quiz-ai-explain-body { direction: ltr; text-align: left; } .hexp-quiz-ai-explain-body p { margin: 0 0 10px; color: #44362a; font-size: 14.5px; line-height: 1.7; direction: ltr; text-align: left; } .hexp-quiz-ai-explain-body p:last-child { margin-bottom: 0; } /* Loading skeleton state — for when JS shows the card while waiting */ .hexp-quiz-ai-explain.is-loading .hexp-quiz-ai-explain-body p { background: linear-gradient(90deg, #fef3c7 25%, #fde68a 50%, #fef3c7 75%); background-size: 200% 100%; animation: hexpAiShimmer 1.4s infinite; color: transparent; border-radius: 4px; min-height: 12px; } @keyframes hexpAiShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 600px) { .hexp-quiz-ai-explain { padding: 14px 16px 16px; } .hexp-quiz-ai-explain-body p { font-size: 14px; } } /* ============================================================ v3.7.37 — Quiz result coupon reveal + copy-and-redirect ============================================================ */ .hexp-quiz-coupon { margin-top: 12px; text-align: center; } .hexp-quiz-coupon-toggle { display: inline-flex; align-items: center; gap: 8px; background: #fff7ed; border: 2px dashed #fb923c; color: #9a3412; padding: 11px 22px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .15s ease; } .hexp-quiz-coupon-toggle:hover { background: #fed7aa; border-color: #ea580c; transform: translateY(-1px); } .hexp-quiz-coupon-box { margin-top: 10px; background: #fff7ed; border: 1px solid #fb923c; border-radius: 12px; padding: 16px 18px; animation: hexpQuizCouponIn .25s ease-out; } @keyframes hexpQuizCouponIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .hexp-quiz-coupon-label { font-size: 12px; font-weight: 700; color: #9a3412; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } .hexp-quiz-coupon-code-row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; } .hexp-quiz-coupon-code { flex: 1 1 140px; background: #fff; border: 2px dashed #c2410c; border-radius: 8px; padding: 10px 14px; font-family: 'Courier New', monospace; font-size: 18px; font-weight: 800; color: #7c2d12; letter-spacing: 1px; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s ease; user-select: none; } .hexp-quiz-coupon-code:hover { background: #fff7ed; border-color: #9a3412; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(154, 52, 18, .15); } .hexp-quiz-coupon-code:active { transform: translateY(0); } .hexp-quiz-coupon-code.is-copied { background: #dcfce7; border-color: #16a34a; color: #14532d; animation: hexpQuizCodeFlash .4s ease-out; } @keyframes hexpQuizCodeFlash { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } } .hexp-quiz-coupon-copy { background: linear-gradient(135deg, #ea580c, #c2410c); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .15s ease; min-height: 44px; white-space: nowrap; } .hexp-quiz-coupon-copy:hover { background: linear-gradient(135deg, #c2410c, #9a3412); transform: translateY(-1px); } .hexp-quiz-coupon-copy.is-copied { background: linear-gradient(135deg, #16a34a, #15803d); } .hexp-quiz-coupon-hint { margin-top: 10px; font-size: 12px; color: #9a3412; line-height: 1.5; } @media (max-width: 480px) { .hexp-quiz-coupon-code-row { flex-direction: column; } .hexp-quiz-coupon-code { font-size: 16px; } } /* ============================================================ v3.7.38 — Quiz fallback compromise notice Shown when the engine had to relax filters to find any match. ============================================================ */ .hexp-quiz-fallback-notice { display: flex; align-items: flex-start; gap: 14px; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 1px solid #93c5fd; border-radius: 12px; padding: 16px 20px; margin: 0 0 18px; } .hexp-quiz-fallback-icon { font-size: 28px; line-height: 1; flex: 0 0 auto; } .hexp-quiz-fallback-body { flex: 1 1 auto; } .hexp-quiz-fallback-title { font-size: 14px; font-weight: 700; color: #1e3a8a; margin-bottom: 4px; letter-spacing: .2px; } .hexp-quiz-fallback-text { margin: 0; font-size: 13.5px; color: #1e40af; line-height: 1.65; } @media (max-width: 600px) { .hexp-quiz-fallback-notice { gap: 10px; padding: 14px 16px; } .hexp-quiz-fallback-icon { font-size: 22px; } .hexp-quiz-fallback-text { font-size: 13px; } } /* ============================================================ v3.7.40/43 — Mega menu width override (fixed) v3.7.40 set width: 80vw which was too wide on most screens and caused overflow off the left edge (the menu is positioned left:50% + translateX(-50%), so a wide width pushes outside the viewport on either side). v3.7.43: cap to 760px max, use min() to never exceed 92vw, and clamp the horizontal position so it can't escape viewport. ============================================================ */ .hexp-mega-menu, .hexp-mega-3col { width: min(760px, 92vw); min-width: 0; max-width: 92vw; padding: 24px 28px; gap: 6px 28px; } /* Mobile: fill the screen with a small inset */ @media (max-width: 768px) { .hexp-mega-menu, .hexp-mega-3col { width: calc(100vw - 24px); max-width: calc(100vw - 24px); } } /* ========================================================================= * v3.7.96 — Mobile responsiveness fixes for taxonomy/category pages. * * Reported issue: /hosting-type/cheap-hosting/ (and other category pages * built from taxonomy-hosting_type.php) had multiple overflow issues on * mobile — the comparison table, provider cards, and info sections were * all bleeding past the viewport on the right. * * Root causes: * 1. .hexp-feature-table-wrap had `overflow:hidden` (clip) + no * `overflow-x:auto` (no scroll), so the wide table just got clipped. * 2. .hexp-pcv2-grid had a 4-column layout with fixed widths that * didn't collapse to single-column until ~1024px AND even then was * still too wide for ~360px viewports. * 3. Several elements had `overflow-wrap` defaults that didn't break * long brand names or words containing dashes. * * Strategy: scope all fixes inside taxonomy-page selectors so we don't * accidentally affect the same components elsewhere on the site. * ===================================================================== */ @media (max-width: 768px) { /* Table: become horizontally scrollable instead of clipped */ .hexp-feature-table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; /* Subtle indicator that there's more content to the side */ background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.1), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.1), rgba(0,0,0,0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .hexp-feature-table { min-width: 640px; } /* keep columns readable */ .hexp-feature-table th, .hexp-feature-table td { padding: 10px 12px; font-size: 13px; } /* Provider card: stack to single column. The native pcv2 grid does this at 1024 with grid-template-columns:1fr but rating + CTA still need full-width treatment. */ .hexp-tax-main .hexp-provider-card-v2 { padding: 20px 16px 16px; } .hexp-tax-main .hexp-pcv2-grid { grid-template-columns: 1fr !important; gap: 14px; text-align: center; } .hexp-tax-main .hexp-pcv2-logo, .hexp-tax-main .hexp-pcv2-rating, .hexp-tax-main .hexp-pcv2-cta { grid-column: 1 / -1; } .hexp-tax-main .hexp-pcv2-features { text-align: start; } .hexp-tax-main .hexp-pcv2-cta { display: grid; grid-template-columns: 1fr; gap: 8px; } .hexp-tax-main .hexp-pcv2-logo img { max-height: 60px; } /* Info sections: prevent horizontal overflow from long words/brand names */ .hexp-info-section, .hexp-info-section h2, .hexp-info-section p, .hexp-info-section ul, .hexp-info-section li, .hexp-tax-section-title { overflow-wrap: break-word; word-wrap: break-word; max-width: 100%; } .hexp-info-section ul { padding-inline-start: 18px; } .hexp-info-section h2 { font-size: 20px; } /* Body container: defensive max-width — anything inside .hexp-tax-body that goes wider gets clipped here as a last line of defense. */ .hexp-tax-body, .hexp-tax-grid, .hexp-tax-main { max-width: 100%; overflow-x: hidden; } /* The flag badge ("Best Budget") — was positioned with left:24px and could overflow when card padding shrunk. Pull it inside the card. */ .hexp-tax-main .hexp-flag-badge { left: 14px; font-size: 12px; padding: 5px 18px 5px 10px; } .hexp-tax-main .hexp-rank-only { left: 14px; } /* Sidebar (when stacked beneath main on tablet/mobile) — same clamp */ .hexp-tax-sidebar { max-width: 100%; } .hexp-sidebar-card-v2 { padding: 16px; } } @media (max-width: 480px) { .hexp-tax-section-title { font-size: 19px; margin: 24px 0 14px; } .hexp-feature-table th, .hexp-feature-table td { padding: 8px 10px; font-size: 12px; } .ft-visit-btn { padding: 5px 10px; font-size: 11px; } } /* ========================================================================= * v3.7.106 — FOUC sentinel. * * The critical CSS in hides the body until this rule applies. When * the browser finishes loading main.css, this override fires and the body * becomes visible — guaranteeing visitors never see unstyled content. * * Why a single rule at the END of the file: CSS is parsed top-to-bottom, * and the browser only fires the stylesheet's `load` event when ALL of * it is parsed. Putting this at the end means visibility flips on at the * exact moment the entire stylesheet is ready to apply — no half-styled * paint mid-load. * ===================================================================== */ body { visibility: visible; } /* ========================================================================= * v3.7.128 — About + Methodology page styling * * The two pages share a common visual language with the front-page trust * block (.hexp-trust-section) so navigating between them feels continuous. * The tab nav at the top of each page is now tags instead of