/* style.css Sections: 1. Variables 2. Accessibility Utilities 3. Base / Body 4. Hero / Header 5. Plans (boxed hosting style) 6. Hover Animations 7. Logos Marquee, Utilities 8. Responsive rules 9. Footer */ /* --------------------------- 1. Variables --------------------------- */ :root{ --header-1: #071a3a; /* deep navy */ --header-2: #0b2f63; /* royal marine */ --header-3: #004a9f; /* hosting blue */ --accent: #004a9f; --accent-glow: rgba(0,74,159,0.12); --card-bg: #ffffff; --card-border: rgba(20,20,30,0.06); --muted: #6c757d; --primary-1: #0f2753; --primary-2: #0b2b6b; --accent: #2bb4ff; --glass: rgba(255,255,255,0.06); --radius: 12px; --shadow: 0 6px 18px rgba(6,15,30,0.08); --shadow-hover: 0 18px 40px rgba(6,15,30,0.12); } /* Spacing utility equivalents (if not present in your stylesheet) */ .pt-80 { padding-top: 80px; } .pb-20 { padding-bottom: 20px; } .ptb-20 { padding: 20px 0; } /* Width helper */ .w-20 { width: 120px; max-width: 20%; } /* adjust as needed for your layout */ /* Gradient strip (from your snippet) */ .gradient-bg { background: linear-gradient(90deg, #0b2b6b 0%, #0f2753 50%, #08213f 100%); color: #fff; position: relative; overflow: hidden; } /* Header intro wrapper - keep text centered and readable */ .header-intro .hero-content-wrap { text-align: center; padding-bottom: 6px; } /* About / feature content */ .feature-contents.section-heading { color: #243244; } /* dark text for content area */ .feature-contents.section-heading p, .feature-contents.section-heading h5 { margin-bottom: 0.9rem; font-weight: 400; color: #222; } /* tech feature list */ .tech-feature-list li { font-size: 0.98rem; color: #333; } /* small icon color accent */ .color-primary { color: #0b66d1; } /* matches blue theme */ .color-primary:hover { color: #084fa8; } /* border-top utility (if not provided) */ .border-top { border-top: 1px solid #e9eef6; } /* responsive tweaks */ @media (max-width: 767.98px) { .w-20 { width: 96px; max-width: 36%; } .gradient-bg { padding: 16px 0; } .pt-80 { padding-top: 40px; } } /* preserve some of your hero space / subtle bg blending */ .header-intro { background: linear-gradient(180deg, rgba(11,43,107,0.04), rgba(11,43,107,0.00)); } /* Accessible link focus visible */ a:focus { outline: 3px solid rgba(11,102,209,0.18); outline-offset: 2px; } /* If you want to restore the wave markup from previous hero, optional */ .hero-wave svg { display: block; width: 100%; height: 72px; fill: #f6f8fb; } /* HERO container */ .hero-animated{ position: relative; overflow: hidden; color: #fff; padding: 90px 0 40px; isolation: isolate; background: linear-gradient(120deg, var(--primary-1), var(--primary-2)); } /* animated gradient subtle movement */ .hero-bg-layer{ position: absolute; inset: 0; background: linear-gradient(120deg, rgba(43,180,255,0.08), rgba(255,255,255,0.02)); mix-blend-mode: overlay; animation: bgShift 18s linear infinite; pointer-events: none; z-index: 0; } @keyframes bgShift { 0% { transform: translateX(0) scale(1.02); filter: hue-rotate(0deg); } 50% { transform: translateX(-6%) scale(1.03); filter: hue-rotate(10deg); } 100% { transform: translateX(0) scale(1.02); filter: hue-rotate(0deg); } } /* layout */ .hero-content-wrap{ position: relative; z-index: 2; display:flex; align-items:center; min-height:380px; } .hero-content { max-width:780px; margin:0 auto; text-align:center; padding: 10px; } /* Title and animations */ .hero-title{ font-size: 2.4rem; line-height:1.05; margin:0 0 12px; letter-spacing: -0.4px; transform: translateY(12px); opacity: 0; animation: fadeUp 0.7s 0.15s cubic-bezier(.2,.9,.2,1) forwards; } .hero-title .accent{ color: var(--accent); position: relative; } .hero-title .accent::after{ content: ""; display:block; height:4px; width:60%; background: linear-gradient(90deg, rgba(43,180,255,0.35), rgba(43,180,255,0.08)); margin-top:8px; border-radius: 6px; transform-origin:left center; transform: scaleX(0); animation: underlineGrow 0.55s 0.9s ease forwards; } @keyframes fadeUp{ to { transform: translateY(0); opacity: 1; } } @keyframes underlineGrow{ to { transform: scaleX(1); } } /* subtitle */ .hero-sub{ margin: 12px 0 20px; font-size:1.05rem; color: rgba(255,255,255,0.92); opacity: 0; transform: translateY(8px); animation: fadeUp 0.7s 0.3s cubic-bezier(.2,.9,.2,1) forwards; } /* CTAs */ .hero-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:14px; } .btn-3d.btn-primary{ background: linear-gradient(180deg, var(--accent), #1ea9ff); color: #052033; padding: 12px 22px; border-radius: 10px; font-weight:700; box-shadow: 0 8px 30px rgba(43,180,255,0.18); transform: translateY(6px); transition: transform .22s ease, box-shadow .22s ease; } .btn-3d.btn-primary:hover{ transform: translateY(0); box-shadow: var(--shadow-hover); } /* ghost CTA */ .btn-ghost{ background: transparent; color: rgba(255,255,255,0.95); padding: 12px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); transition: background .18s ease, transform .18s ease; } .btn-ghost:hover{ background: rgba(255,255,255,0.03); transform: translateY(-3px); } /* hero badges */ .hero-badges{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; opacity:0; transform:translateY(6px); animation: fadeUp 0.7s 0.55s cubic-bezier(.2,.9,.2,1) forwards; } .badge{ background: rgba(255,255,255,0.06); padding: 8px 12px; border-radius: 999px; font-size: 0.9rem; border: 1px solid rgba(255,255,255,0.035); } /* decorative parallax shapes */ .hero-decor{ position:absolute; inset:0; z-index:1; pointer-events:none; } .decor-circle{ position:absolute; border-radius:999px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); } .decor-1{ width:220px; height:220px; right: -50px; top:20px; opacity:0.12; transform: translate3d(0,0,0); } .decor-2{ width:140px; height:140px; left:-30px; top:120px; opacity:0.10; transform: translate3d(0,0,0); } .decor-rect{ width:120px; height:88px; right:20%; bottom: -20px; border-radius:16px; opacity:0.06; } /* SVG wave */ .hero-wave{ position: relative; z-index:3; margin-top: 22px; } .hero-wave svg{ display:block; width:100%; height:72px; } .hero-wave path{ fill: #f6f8fb; opacity:1; } /* scroll-down arrow */ .scroll-down{ position:absolute; left:50%; transform:translateX(-50%); bottom:8px; z-index:4; display:block; width:34px; height:54px; text-decoration:none; } .scroll-down span{ display:block; width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.9); margin:0 auto; animation: bounce 1.6s infinite; box-shadow: 0 6px 14px rgba(2,6,23,0.24); } @keyframes bounce{ 0%,100%{ transform: translateY(0); opacity: 0.95; } 50%{ transform: translateY(10px); opacity:0.6; } } /* responsive */ @media (min-width:992px){ .hero-title{ font-size: 3rem; } .hero-content-wrap{ min-height:460px; } } @media (max-width:576px){ .hero-title{ font-size:1.6rem; } .hero-content { padding: 8px; } } /* small utility */ .hidden-visually{ position:absolute!important; left:-9999px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important; } /* --------------------------- 2. Accessibility Utilities --------------------------- */ .visually-hidden { position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; } /* Focus styles */ :focus { outline: none; } :focus-visible { outline: 3px solid rgba(0,95,204,0.18); outline-offset: 3px; } a.btn:focus-visible, .plan-cta:focus-visible { outline: 3px solid rgba(0,95,204,0.18); outline-offset: 3px; } /* --------------------------- 3. Base / Body --------------------------- */ body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: #f6f9fc; color: #222; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45; margin: 0; } /* small headings */ .section-muted { color:var(--muted); } /* --------------------------- 4. Hero / Header --------------------------- */ .hero-modern { background: linear-gradient(135deg, var(--header-1) 0%, var(--header-2) 45%, var(--header-3) 100%); color: #ffffff; padding: 64px 0 48px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 8px 34px rgba(3,14,38,0.28); } /* animated glow */ .hero-modern::before { content: ""; position: absolute; width: 320px; height: 320px; left: -80px; top: -80px; background: radial-gradient(circle, rgba(0,123,255,0.24) 0%, rgba(0,123,255,0) 65%); filter: blur(44px); transform: translateZ(0); animation: heroGlow 7s infinite alternate ease-in-out; pointer-events: none; } @keyframes heroGlow { from { transform: translate(0,0) scale(1); opacity: 1; } to { transform: translate(48px,36px) scale(1.03); opacity: 0.85; } } /* LOGO GLASS PANEL (white base gradient) */ .hero-logo-wrap { display: inline-block; padding: 22px; border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65)); box-shadow: 0 8px 30px rgba(0,0,0,0.25), inset 0 0 18px rgba(255,255,255,0.55); backdrop-filter: blur(4px); transition: transform .35s ease; } .hero-logo-wrap:hover { transform: translateY(-4px) scale(1.03); } /* LOGO (with floating animation) */ .hero-logo { width: 130px; /* Updated weight for your new logo dimension request */ height: auto; display:block; animation: floatLogo 4s ease-in-out infinite; } @keyframes floatLogo { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } } /* TITLE & SUBTITLE */ .hero-title { margin-top: 22px; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.5px; color: #ffffff; } .hero-subtitle { max-width: 760px; margin: 12px auto 26px; font-size: 1.1rem; color: rgba(255,255,255,0.9); line-height: 1.55; } .hero-content { position: relative; z-index: 2; } /* .hero-logo { width: 110px; display:block; margin: 0 auto 14px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45)); animation: floatLogo 4s ease-in-out infinite; } */ @keyframes floatLogo { 0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)} } .hero-title { color: rgba(255,255,255,0.88); font-size: 2rem; font-weight:700; margin-bottom:8px; letter-spacing:-0.3px; } .hero-subtitle { color: rgba(255,255,255,0.88); max-width: 780px; margin: 0 auto 18px; font-size:1.05rem; } .hero-actions .hero-cta { display:inline-block; padding:12px 26px; border-radius:8px; font-weight:700; text-decoration:none; background:#fff; color:var(--header-2); box-shadow:0 8px 30px rgba(255,255,255,0.12); transition:all .22s ease; } .hero-actions .hero-cta:hover { transform:translateY(-3px); background:#eaf4ff; } .hero-actions .hero-cta-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #fff; } .hero-actions .hero-cta-ghost:hover { background: rgba(255,255,255,0.06); } .hero-stats { margin-top:18px; color:#fff; } .hero-stats .stat-value { font-size:1.3rem; font-weight:800; } .hero-stats .stat-label { color: rgba(255,255,255,0.85); font-size:0.85rem; } /* wave */ .hero-wave svg { display:block; width:100%; height:auto; margin-top:34px; } /* --------------------------- 5. Plans (boxed hosting style) --------------------------- */ .plans-wrap { padding: 48px 0 56px; } .plans-intro h2 { font-size:1.6rem; font-weight:700; margin-bottom:6px; } .plans-intro p { color:var(--muted); margin-bottom:0; } .plans-grid { margin-top:28px; } .plan-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 22px; display:flex; flex-direction:column; gap:14px; min-height:420px; transition: transform 320ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms ease, filter 200ms ease; position: relative; overflow: visible; box-shadow: 0 14px 34px rgba(10,18,35,0.06); } /* accent bar at top of card */ .plan-accent { position:absolute; left:0; right:0; top:0; height:6px; border-top-left-radius:12px; border-top-right-radius:12px; background: linear-gradient(90deg, var(--header-3) 0%, var(--header-2) 100%); opacity:0.98; } .plan-title { font-size:1.05rem; font-weight:700; margin-bottom:0; text-align:center; } .plan-price { text-align:center; margin-top:6px; } .plan-price .amount { font-size:2rem; font-weight:800; margin-right:6px; color:#111; vertical-align:baseline; } .plan-price .cycle { color:var(--muted); font-size:0.95rem; } .plan-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; flex-grow:1; } .plan-features li { display:flex; align-items:center; gap:12px; color:#2b2b2b; font-size:0.97rem; line-height:1.3; } .plan-features i { width:36px; text-align:center; font-size:1.25rem; } .tick { color:#28a745; } .cross { color:#dc3545; } .plan-cta { display:inline-block; width:100%; padding:10px 12px; border-radius:8px; text-align:center; font-weight:700; text-decoration:none; border:1px solid rgba(20,20,30,0.06); background:#f8f9fb; color:#111; transition: background 180ms ease, transform 120ms ease, box-shadow 160ms ease; } .plan-cta:hover { background:#eef2ff; transform: translateY(-2px); } .plan-cta-primary { background:var(--accent); color:#fff; border:none; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .plan-card, .plan-card:hover { transition: none; transform: none; animation: none; box-shadow: 0 12px 28px rgba(0,0,0,0.10); } .hero-modern::before { animation: none; } } /* --------------------------- 7. Logos Marquee, Utilities & feature boxes --------------------------- */ .logos-marquee { display:flex; gap:36px; align-items:center; justify-content:center; overflow:hidden; padding:12px 0; } .logos-marquee img { height:36px; opacity:0.9; transition:opacity .2s ease; } .logos-marquee:hover img { opacity:1; } /* simple infinite horizontal scroll using CSS animation if present */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* apply only when there are duplicated children for loop (JS duplicates in HTML) */ .logos-marquee.animate { display:flex; animation: marquee 18s linear infinite; } /* small feature box style */ .feature-box { background:#fff; border-radius:10px; padding:18px; border:1px solid rgba(12,12,30,0.04); box-shadow: 0 8px 22px rgba(8,12,30,0.04); } /* --------------------------- 8. Responsive rules --------------------------- */ @media (max-width: 991px) { .plan-card { min-height: 460px; } } @media (max-width: 575px) { .plan-card { min-height: auto; padding:16px; } .plan-features li { gap:8px; font-size:0.95rem; } .plan-features i { width:30px; font-size:1.1rem; } .logos-marquee { gap:18px; } } /* --------------------------- Wave --------------------------- */ :root { --primary: #4361ee; --secondary: #3f37c9; --accent: #4cc9f0; --dark: #1d3557; --light: #f8f9fa; --gradient: linear-gradient(135deg, #071a3a 0%, #0b2f63 100%); --gradient-light: linear-gradient(135deg, #4cc9f0 0%, #4361ee 100%); --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); --shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.15); --radius: 12px; } .hero-section { padding: 100px 0 60px; background: var(--gradient); color: white; text-align: center; position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,'); background-size: cover; background-position: bottom; } .hero-content { position: relative; z-index: 2; } .hero-img { max-width: 200px; margin: 0 auto 30px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2)); } /* Plan comparison Table Styles/ */ /* Scoped styles for plan comparison only */ .plan-comparison-modern { padding: 30px 0 50px 0; } .section-heading.text-center.mb-5 { margin-bottom: 2rem !important; } /* Optional: If you have any extra margin on the row */ .plan-comparison-modern .row:last-child { margin-top: -0.5rem; } .plan-comparison-table { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border: none; margin-bottom: 0; border-collapse: collapse; width: 100%; } .plan-comparison-table th, .plan-comparison-table td { border: 1px solid rgba(0, 0, 0, 0.1); } .plan-comparison-head { background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%); color: white; } .plan-comparison-head th { padding: 25px 15px; border: 1px solid rgba(255, 255, 255, 0.2); position: relative; font-weight: 600; vertical-align: middle; } .plan-comparison-head th:first-child { border-radius: 12px 0 0 0; } .plan-comparison-head th:last-child { border-radius: 0 12px 0 0; } .plan-comparison-head th strong { font-size: 1.5rem; } .plan-comparison-badge { position: absolute; top: -10px; right: 10px; background: #ffc107; color: #000; padding: 5px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .plan-comparison-body tr { transition: all 0.3s ease; } .plan-comparison-body tr:hover { background-color: rgba(67, 97, 238, 0.05); } .plan-comparison-body td { padding: 18px 15px; border: 1px solid rgba(0, 0, 0, 0.1); vertical-align: middle; } .plan-comparison-body td:first-child { font-weight: 600; color: #1d3557; background-color: rgba(248, 249, 250, 0.7); } .plan-comparison-category { background-color: rgba(67, 97, 238, 0.1) !important; font-weight: 700 !important; color: #1d3557 !important; font-size: 1.1rem; padding: 15px !important; border: 1px solid rgba(67, 97, 238, 0.2) !important; } .plan-comparison-category i { margin-right: 10px; color: #4361ee; } .plan-comparison-check { color: #28a745; font-size: 1.2rem; } .plan-comparison-cross { color: #dc3545; font-size: 1.2rem; } .plan-comparison-btn { display: inline-block; padding: 10px 25px; background: #4361ee; color: white; border-radius: 50px; font-weight: 600; text-decoration: none; box-shadow: 0 5px 0 #3f37c9; transition: all 0.3s ease; border: none; cursor: pointer; position: relative; overflow: hidden; font-size: 0.9rem; } .plan-comparison-btn:hover { transform: translateY(3px); box-shadow: 0 2px 0 #3f37c9; color: white; } .plan-comparison-btn:active { transform: translateY(5px); box-shadow: none; } .plan-comparison-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transform: translateX(-100%); transition: transform 0.3s ease; } .plan-comparison-btn:hover::after { transform: translateX(0); } .plan-comparison-table-responsive { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .plan-comparison-header-row { background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%); color: white; } .plan-comparison-feature-header { color: white !important; background: transparent !important; font-size: 1.1rem; padding: 20px 15px !important; } .plan-comparison-plan-header { background: transparent !important; color: white; padding: 20px 15px !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; vertical-align: middle; text-align: center; } .plan-comparison-plan-header .h5 { margin-bottom: 8px; display: block; } .plan-price { font-size: 1.5rem; font-weight: 700; margin: 0; } .plan-price small { font-size: 1rem; color: rgba(255, 255, 255, 0.8); } @media (max-width: 992px) { .plan-comparison-table-responsive { border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .plan-comparison-head th { padding: 20px 10px; } .plan-comparison-head th strong { font-size: 1.2rem; } } @media (max-width: 768px) { .plan-comparison-body td { padding: 12px 10px; font-size: 0.9rem; } .plan-comparison-head th { padding: 15px 8px; } } /* ========================================================= Homepage Service Cards - Modern Styling ========================================================= */ /* Light blue-gray background behind service cards */ .appliction-hosting.gray-light-bg { background: #F3F7FC !important; } /* Service card */ .appliction-hosting .application-icon-wrap { background: #FFFFFF !important; border: 1px solid #D8E5F2; border-radius: 16px !important; box-shadow: 0 4px 12px rgba(8, 43, 92, 0.05), 0 10px 28px rgba(8, 43, 92, 0.07); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* Service card heading */ .appliction-hosting .application-icon-wrap h3, .appliction-hosting .application-icon-wrap .h5 { color: #0B2B52 !important; font-weight: 600; } /* Service card description */ .appliction-hosting .application-icon-wrap p { color: #56657A; } /* Desktop hover effect */ @media (hover: hover) { .appliction-hosting .application-icon-wrap:hover { transform: translateY(-5px); border-color: #5AA7F8; box-shadow: 0 8px 18px rgba(8, 43, 92, 0.08), 0 16px 35px rgba(13, 110, 253, 0.12); } } /* Mobile */ @media (max-width: 767.98px) { .appliction-hosting .application-icon-wrap { border-radius: 14px !important; box-shadow: 0 4px 14px rgba(8, 43, 92, 0.08); } } /* ========================================================= Supported Clouds - Modern Card Styling ========================================================= */ .supported-clouds-section { background: #F3F7FC; } /* Section heading */ .supported-clouds-section .section-heading h2 { color: #0B2B52; font-weight: 700; } /* Cloud provider cards */ .supported-clouds-section .app-list li a { background: #FFFFFF !important; border: 1px solid #D8E5F2; border-radius: 16px !important; box-shadow: 0 4px 12px rgba(8, 43, 92, 0.05), 0 10px 28px rgba(8, 43, 92, 0.07) !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* Keep logos clean and centered */ .supported-clouds-section .app-list li a img { object-fit: contain; } /* Desktop hover */ @media (hover: hover) { .supported-clouds-section .app-list li a:hover { transform: translateY(-5px); border-color: #5AA7F8; box-shadow: 0 8px 18px rgba(8, 43, 92, 0.08), 0 16px 35px rgba(13, 110, 253, 0.12) !important; } } /* Mobile */ @media (max-width: 767.98px) { .supported-clouds-section .app-list li a { border-radius: 14px !important; box-shadow: 0 4px 14px rgba(8, 43, 92, 0.08) !important; } } /* ========================================================= Homepage Intro / Technical Support Section ========================================================= */ .home-intro-section { background: #F3F7FC; } /* Main white panel */ .home-intro-section .home-intro-card { background: #FFFFFF; border: 1px solid #D8E5F2; border-radius: 18px; padding: 35px; box-shadow: 0 4px 12px rgba(8, 43, 92, 0.05), 0 12px 30px rgba(8, 43, 92, 0.07); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* Main heading */ .home-intro-section .feature-content-wrap h2 { color: #0B2B52 !important; font-weight: 700; line-height: 1.25; } /* Body text */ .home-intro-section .feature-content-wrap p { color: #56657A; line-height: 1.75; } /* Strong text */ .home-intro-section .feature-content-wrap strong { color: #0B2B52; } /* Image */ .home-intro-section .feature-img-wrap img { border-radius: 14px; } /* Desktop hover */ @media (hover: hover) { .home-intro-section .home-intro-card:hover { transform: translateY(-4px); border-color: #5AA7F8; box-shadow: 0 8px 20px rgba(8, 43, 92, 0.08), 0 18px 38px rgba(13, 110, 253, 0.11); } } /* Mobile */ @media (max-width: 767.98px) { .home-intro-section { padding-top: 30px; padding-bottom: 30px; } .home-intro-section .home-intro-card { margin-top: 0 !important; padding: 24px 18px; border-radius: 14px; box-shadow: 0 4px 14px rgba(8, 43, 92, 0.08); } .home-intro-section .feature-content-wrap h2 { font-size: 1.6rem; } } /* Supported Clouds Heading Bar */ .supported-clouds-heading-bar { background: #082B5C; padding: 18px 15px; margin-bottom: 40px; } .supported-clouds-heading-bar h2 { color: #FFFFFF !important; font-weight: 700; margin: 0; text-align: center; } /* ========================================================= DARK MODE 24x7 Server Support ========================================================= */ html[data-theme="dark"] { --dark-page: #0B1220; --dark-surface: #111827; --dark-surface-2: #162033; --dark-border: #27364D; --dark-heading: #EAF2FF; --dark-text: #AAB8CA; --dark-muted: #8493A8; --dark-accent: #22C7F2; color-scheme: dark; } /* ========================================================= MAIN PAGE BACKGROUND ========================================================= */ html[data-theme="dark"] body, html[data-theme="dark"] main.main { background-color: var(--dark-page) !important; color: var(--dark-text); } /* Light gray section backgrounds */ html[data-theme="dark"] .gray-light-bg, html[data-theme="dark"] .supported-clouds-section, html[data-theme="dark"] .home-intro-section { background: var(--dark-page) !important; } /* ========================================================= WHITE CARDS -> DARK CARDS ========================================================= */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .card, html[data-theme="dark"] .application-icon-wrap, html[data-theme="dark"] .home-intro-card, html[data-theme="dark"] .supported-clouds-section .app-list li a { background: var(--dark-surface) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22), 0 12px 30px rgba(0, 0, 0, 0.20) !important; } /* Slight hover effect on cards */ html[data-theme="dark"] .application-icon-wrap:hover, html[data-theme="dark"] .supported-clouds-section .app-list li a:hover { background: var(--dark-surface-2) !important; border-color: #3E8EEA !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30), 0 15px 35px rgba(13, 110, 253, 0.12) !important; } /* ========================================================= HEADINGS ========================================================= */ html[data-theme="dark"] main h1:not(.text-white), html[data-theme="dark"] main h2:not(.text-white), html[data-theme="dark"] main h3:not(.text-white), html[data-theme="dark"] main h4:not(.text-white), html[data-theme="dark"] main h5:not(.text-white), html[data-theme="dark"] main h6:not(.text-white) { color: var(--dark-heading) !important; } /* Body text */ html[data-theme="dark"] main p:not(.text-white), html[data-theme="dark"] main li:not(.text-white) { color: var(--dark-text); } /* Existing text-dark utility */ html[data-theme="dark"] .text-dark { color: var(--dark-heading) !important; } /* Muted text */ html[data-theme="dark"] .text-muted { color: var(--dark-muted) !important; } /* Keep intentionally white text WHITE */ html[data-theme="dark"] .text-white { color: #FFFFFF !important; } /* ========================================================= SUPPORTED CLOUD CARDS ========================================================= */ html[data-theme="dark"] .supported-clouds-section { background: #0B1220 !important; } html[data-theme="dark"] .supported-clouds-section .app-list li a { background: #111827 !important; border: 1px solid #27364D !important; } /* ========================================================= HOMEPAGE INTRO 24x7 Server Support Cloud / Technical Support ========================================================= */ html[data-theme="dark"] .home-intro-section { background: #0B1220 !important; } html[data-theme="dark"] .home-intro-card { background: #111827 !important; border-color: #27364D !important; } html[data-theme="dark"] .home-intro-section .feature-content-wrap h2 { color: #EAF2FF !important; } html[data-theme="dark"] .home-intro-section .feature-content-wrap p { color: #AAB8CA !important; } html[data-theme="dark"] .home-intro-section .feature-content-wrap strong { color: #FFFFFF !important; } /* ========================================================= MEGA MENU / DROPDOWN ========================================================= */ html[data-theme="dark"] .main-sub-menu, html[data-theme="dark"] .hs-mega-menu, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .u-header__promo { background: #111827 !important; border-color: #27364D !important; } /* Mega menu titles */ html[data-theme="dark"] .u-header__promo-title, html[data-theme="dark"] .sub-menu-title { color: #EAF2FF !important; } /* Mega menu description */ html[data-theme="dark"] .u-header__promo-text { color: #94A3B8 !important; } /* Mega menu links */ html[data-theme="dark"] .title-with-icon-link, html[data-theme="dark"] .dropdown-item { color: #CBD5E1 !important; } /* Menu hover */ html[data-theme="dark"] .title-with-icon-link:hover, html[data-theme="dark"] .dropdown-item:hover { background: #162033 !important; color: #FFFFFF !important; } /* Triangle under active mega menu */ html[data-theme="dark"] .hs-mega-menu-opened a.custom-nav-link:before { background-color: #111827 !important; } /* ========================================================= MOBILE OFFCANVAS MENU ========================================================= */ html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .offcanvas-header, html[data-theme="dark"] .offcanvas-body { background: #111827 !important; color: #EAF2FF !important; border-color: #27364D !important; } html[data-theme="dark"] .offcanvas .nav-link { color: #EAF2FF !important; } html[data-theme="dark"] .offcanvas .dropdown-menu { background: #162033 !important; } /* ========================================================= FORMS ========================================================= */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea { background: #111827 !important; color: #EAF2FF !important; border-color: #27364D !important; } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder { color: #718096 !important; } /* ========================================================= DIVIDERS / BORDERS ========================================================= */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom { border-color: #27364D !important; } /* ========================================================= DARK MODE BUTTON ========================================================= */ .theme-toggle { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; padding: 0; margin-left: 10px; border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 50%; background: rgba(255, 255, 255, 0.10); color: #FFFFFF; font-size: 17px; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .theme-toggle:hover { background: rgba(34, 199, 242, 0.22); border-color: #22C7F2; color: #FFFFFF; transform: translateY(-2px); } /* Sun icon when dark mode is active */ html[data-theme="dark"] .theme-toggle { background: #162033; border-color: #3B82F6; color: #FFD166; } /* ========================================================= MOBILE HEADER POSITION ========================================================= */ @media (max-width: 767.98px) { .header-nav .navbar-brand { order: 1; } .header-nav .theme-toggle { order: 2; margin-left: auto; margin-right: 10px; width: 36px; height: 36px; flex-basis: 36px; font-size: 15px; } .header-nav .navbar-toggler { order: 3; } .header-nav #navBar { order: 4; width: 100%; } } /* ========================================================= DARK MODE - Service Card Text Contrast Fix KEEP THIS AT THE VERY BOTTOM OF style.css ========================================================= */ /* Service card headings */ html[data-theme="dark"] .appliction-hosting .application-icon-wrap h2, html[data-theme="dark"] .appliction-hosting .application-icon-wrap h3, html[data-theme="dark"] .appliction-hosting .application-icon-wrap h4, html[data-theme="dark"] .appliction-hosting .application-icon-wrap h5, html[data-theme="dark"] .appliction-hosting .application-icon-wrap .h5 { color: #F1F5F9 !important; } /* Service card descriptions */ html[data-theme="dark"] .appliction-hosting .application-icon-wrap p { color: #CBD5E1 !important; } /* Bold/strong text inside cards */ html[data-theme="dark"] .appliction-hosting .application-icon-wrap strong { color: #F8FAFC !important; } /* Links inside service cards */ html[data-theme="dark"] .appliction-hosting .application-icon-wrap a:not(.btn) { color: #7DD3FC !important; } /* Dark card surface */ html[data-theme="dark"] .appliction-hosting .application-icon-wrap { background: #111827 !important; border-color: #334155 !important; } /* Highlight card on hover */ @media (hover: hover) { html[data-theme="dark"] .appliction-hosting .application-icon-wrap:hover { background: #162033 !important; border-color: #3B82F6 !important; } } /* Keep dark-colored logos visible in dark mode */ html[data-theme="dark"] .appliction-hosting .application-icon-wrap img { background: #FFFFFF; border-radius: 10px; padding: 8px 12px; } /* ========================================================= DARK MODE - PRICING CARDS / SUB PAGES ========================================================= */ /* Pricing card backgrounds */ html[data-theme="dark"] .pricing-card, html[data-theme="dark"] .plan-card, html[data-theme="dark"] .card.single-pricing-pack { background: #111827 !important; border-color: #334155 !important; color: #CBD5E1 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 14px 35px rgba(0, 0, 0, 0.22) !important; } /* Pricing card titles */ html[data-theme="dark"] .pricing-card h2, html[data-theme="dark"] .pricing-card h3, html[data-theme="dark"] .pricing-card h4, html[data-theme="dark"] .pricing-card h5, html[data-theme="dark"] .plan-card .plan-title, html[data-theme="dark"] .single-pricing-pack h2, html[data-theme="dark"] .single-pricing-pack h3, html[data-theme="dark"] .single-pricing-pack h4, html[data-theme="dark"] .single-pricing-pack h5 { color: #F1F5F9 !important; -webkit-text-fill-color: #F1F5F9 !important; } /* Price */ html[data-theme="dark"] .pricing-card .price, html[data-theme="dark"] .plan-price .amount, html[data-theme="dark"] .single-pricing-pack .price, html[data-theme="dark"] .single-pricing-pack .pricing-price { color: #EAF2FF !important; -webkit-text-fill-color: #EAF2FF !important; } /* /mo, per server etc */ html[data-theme="dark"] .pricing-card small, html[data-theme="dark"] .pricing-card .price-cycle, html[data-theme="dark"] .plan-price .cycle, html[data-theme="dark"] .single-pricing-pack small { color: #AAB8CA !important; -webkit-text-fill-color: #AAB8CA !important; } /* Description text */ html[data-theme="dark"] .pricing-card p, html[data-theme="dark"] .plan-card p, html[data-theme="dark"] .single-pricing-pack .card-body { color: #CBD5E1 !important; } /* Feature list */ html[data-theme="dark"] .plan-features li, html[data-theme="dark"] .pricing-feature-list li, html[data-theme="dark"] .pricing-feature-list li span { color: #CBD5E1 !important; } /* Popular card hover/highlight */ html[data-theme="dark"] .pricing-card:hover, html[data-theme="dark"] .plan-card:hover, html[data-theme="dark"] .card.single-pricing-pack:hover { background: #162033 !important; border-color: #3B82F6 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.32), 0 18px 40px rgba(59, 130, 246, 0.12) !important; } /* ========================================================= DARK MODE - TABLES / FEATURE COMPARISON TABLE ========================================================= */ /* Main table */ html[data-theme="dark"] table, html[data-theme="dark"] .table { background: #111827 !important; color: #CBD5E1 !important; border-color: #334155 !important; } /* Table outer wrapper if used */ html[data-theme="dark"] .table-responsive, html[data-theme="dark"] .feature-table, html[data-theme="dark"] .pricing-table, html[data-theme="dark"] .comparison-table { background: #111827 !important; border-color: #334155 !important; border-radius: 14px; } /* Header row */ html[data-theme="dark"] table thead th, html[data-theme="dark"] .table thead th { background: linear-gradient(90deg, #5B6FE8 0%, #7A4FB3 100%) !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.12) !important; } /* Normal cells */ html[data-theme="dark"] table td, html[data-theme="dark"] table th, html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { background: #111827 !important; color: #CBD5E1 !important; border-color: #334155 !important; } /* First column labels like Features / Tickets / Support */ html[data-theme="dark"] table tbody th, html[data-theme="dark"] table tbody td:first-child, html[data-theme="dark"] .table tbody th, html[data-theme="dark"] .table tbody td:first-child { color: #F1F5F9 !important; font-weight: 600; } /* Alternate row shading */ html[data-theme="dark"] table tbody tr:nth-child(even) td, html[data-theme="dark"] table tbody tr:nth-child(even) th, html[data-theme="dark"] .table tbody tr:nth-child(even) td, html[data-theme="dark"] .table tbody tr:nth-child(even) th { background: #162033 !important; } /* Highlighted row (like Skype Chat Support row if custom bg exists) */ html[data-theme="dark"] table tbody tr[style*="background"], html[data-theme="dark"] .table tbody tr[style*="background"] { background: #1A2436 !important; } /* Text inside table */ html[data-theme="dark"] table p, html[data-theme="dark"] table span, html[data-theme="dark"] .table p, html[data-theme="dark"] .table span { color: #CBD5E1 !important; } /* Success / yes icons */ html[data-theme="dark"] table .text-success, html[data-theme="dark"] .table .text-success { color: #22C55E !important; } /* Danger / no icons */ html[data-theme="dark"] table .text-danger, html[data-theme="dark"] .table .text-danger { color: #FB7185 !important; } .technical-specs-section { background: #F3F7FC; } .technical-specs-section .specification-card { background: #FFFFFF !important; border: 1px solid #D8E5F2 !important; border-radius: 16px !important; box-shadow: 0 4px 12px rgba(8, 43, 92, 0.05), 0 10px 28px rgba(8, 43, 92, 0.07) !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .technical-specs-section .specification-card h4 { color: #0B2B52 !important; font-weight: 700; line-height: 1.3; } .technical-specs-section .specification-card .tech-feature-list li { color: #56657A; line-height: 1.55; padding: 5px 0; } .technical-specs-section .specification-card .text-success { color: #18B981 !important; } @media (hover: hover) { .technical-specs-section .specification-card:hover { transform: translateY(-5px); border-color: #5AA7F8 !important; box-shadow: 0 8px 18px rgba(8, 43, 92, 0.08), 0 16px 35px rgba(13, 110, 253, 0.12) !important; } } @media (max-width: 767.98px) { .technical-specs-section .specification-card { border-radius: 14px !important; } } /* Dark mode */ html[data-theme="dark"] .technical-specs-section { background: #0B1220 !important; } html[data-theme="dark"] .technical-specs-section .specification-card { background: #111827 !important; border-color: #334155 !important; color: #CBD5E1 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 14px 35px rgba(0, 0, 0, 0.22) !important; } html[data-theme="dark"] .technical-specs-section .specification-card h4 { color: #F1F5F9 !important; } html[data-theme="dark"] .technical-specs-section .specification-card .tech-feature-list li { color: #CBD5E1 !important; } html[data-theme="dark"] .technical-specs-section .specification-card:hover { background: #162033 !important; border-color: #3B82F6 !important; } /* ========================================================= DARK MODE - FAQ / ACCORDION ========================================================= */ /* FAQ wrapper */ html[data-theme="dark"] #faq .accordion, html[data-theme="dark"] #faq .faq-wrap { background: transparent !important; } /* FAQ item */ html[data-theme="dark"] #faq .accordion-item { background: #111827 !important; border: 1px solid #334155 !important; color: #CBD5E1 !important; } /* Closed question */ html[data-theme="dark"] #faq .accordion-button.collapsed { background: #111827 !important; color: #F1F5F9 !important; border-color: #334155 !important; } /* Open question */ html[data-theme="dark"] #faq .accordion-button:not(.collapsed) { background: #123A6D !important; color: #FFFFFF !important; box-shadow: none !important; } /* Answer area */ html[data-theme="dark"] #faq .accordion-body { background: #162033 !important; color: #CBD5E1 !important; border-top: 1px solid #334155 !important; } /* Question icons */ html[data-theme="dark"] #faq .accordion-button .text-primary { color: #60A5FA !important; } /* Arrow icon */ html[data-theme="dark"] #faq .accordion-button::after { filter: brightness(0) invert(1); } /* FAQ hover */ html[data-theme="dark"] #faq .accordion-button.collapsed:hover { background: #162033 !important; color: #FFFFFF !important; } /* Remove unwanted default focus glow */ html[data-theme="dark"] #faq .accordion-button:focus { box-shadow: none !important; border-color: #3B82F6 !important; } /* ========================================================= GLOBAL PREMIUM CTA Use across all website pages ========================================================= */ .premium-site-cta { position: relative; isolation: isolate; max-width: 1180px; width: calc(100% - 30px); margin: 45px auto; padding: 34px 38px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; overflow: hidden; border-radius: 24px; background: linear-gradient( 120deg, #061d42 0%, #0a3975 48%, #0d6efd 100% ); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 20px 50px rgba(4,30,66,0.25), 0 6px 18px rgba(13,110,253,0.18); } /* ========================================================= Decorative glow ========================================================= */ .premium-site-cta::before { content: ""; position: absolute; width: 320px; height: 320px; top: -190px; right: -80px; border-radius: 50%; background: radial-gradient( circle, rgba(34,199,242,0.55) 0%, rgba(34,199,242,0.12) 45%, transparent 70% ); z-index: -1; } .premium-site-cta::after { content: ""; position: absolute; width: 240px; height: 240px; bottom: -170px; left: 15%; border-radius: 50%; background: radial-gradient( circle, rgba(118,75,162,0.40), transparent 70% ); z-index: -1; } /* ========================================================= Icon circle ========================================================= */ .premium-site-cta__icon { width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 22px; background: linear-gradient( 145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06) ); border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 10px 25px rgba(0,0,0,0.18); } .premium-site-cta__icon i { font-size: 34px; color: #58D9FF; text-shadow: 0 0 18px rgba(88,217,255,0.45); } /* ========================================================= Eyebrow ========================================================= */ .premium-site-cta__eyebrow { display: inline-flex; align-items: center; margin-bottom: 8px; color: #73E2FF !important; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; } .premium-site-cta__eyebrow .fa-circle { font-size: 7px; color: #3DFF9A; animation: premiumCtaPulse 1.8s infinite; } @keyframes premiumCtaPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.35); } } /* ========================================================= Heading ========================================================= */ .premium-site-cta h2 { margin: 0 0 10px; color: #FFFFFF !important; font-size: clamp(1.55rem, 2.3vw, 2.15rem); font-weight: 750; line-height: 1.2; letter-spacing: -0.4px; } /* ========================================================= Description ========================================================= */ .premium-site-cta p { max-width: 700px; margin: 0 0 15px; color: #D7E7FA !important; font-size: 0.98rem; line-height: 1.65; } /* ========================================================= Benefits ========================================================= */ .premium-site-cta__benefits { display: flex; flex-wrap: wrap; gap: 8px 18px; } .premium-site-cta__benefits span { display: inline-flex; align-items: center; gap: 6px; color: #EAF4FF; font-size: 13px; font-weight: 600; } .premium-site-cta__benefits i { color: #42DDA3; font-size: 13px; } /* ========================================================= Actions ========================================================= */ .premium-site-cta__actions { min-width: 235px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .premium-site-cta__primary { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 50px; text-decoration: none !important; color: #FFFFFF !important; font-size: 15px; font-weight: 700; background: linear-gradient( 90deg, #4F6DF5 0%, #7355D9 100% ); border: 1px solid rgba(255,255,255,0.20); box-shadow: 0 10px 24px rgba(63,81,181,0.32), inset 0 1px 0 rgba(255,255,255,0.24); transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; } .premium-site-cta__primary:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 15px 32px rgba(63,81,181,0.42), inset 0 1px 0 rgba(255,255,255,0.28); } .premium-site-cta__arrow { transition: transform 0.25s ease; } .premium-site-cta__primary:hover .premium-site-cta__arrow { transform: translateX(4px); } /* ========================================================= Small note ========================================================= */ .premium-site-cta__note { color: rgba(255,255,255,0.72); font-size: 11px; } /* ========================================================= DARK MODE ========================================================= */ html[data-theme="dark"] .premium-site-cta { background: linear-gradient( 120deg, #07111F 0%, #0B274D 48%, #0A4A91 100% ); border-color: rgba(255,255,255,0.12); box-shadow: 0 20px 50px rgba(0,0,0,0.36); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991.98px) { .premium-site-cta { grid-template-columns: auto 1fr; padding: 30px; gap: 20px; } .premium-site-cta__actions { grid-column: 1 / -1; width: 100%; max-width: 360px; margin: 5px auto 0; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767.98px) { .premium-site-cta { width: calc(100% - 24px); margin: 30px auto; padding: 27px 20px; grid-template-columns: 1fr; text-align: center; gap: 17px; border-radius: 20px; } .premium-site-cta__icon { width: 68px; height: 68px; margin: 0 auto; border-radius: 18px; } .premium-site-cta__icon i { font-size: 28px; } .premium-site-cta h2 { font-size: 1.45rem; } .premium-site-cta p { font-size: 0.94rem; } .premium-site-cta__eyebrow { justify-content: center; } .premium-site-cta__benefits { justify-content: center; gap: 8px 14px; } .premium-site-cta__actions { width: 100%; min-width: 0; max-width: 340px; margin: 0 auto; } } /* ========================================================= Accessibility - reduced animation ========================================================= */ @media (prefers-reduced-motion: reduce) { .premium-site-cta__eyebrow .fa-circle { animation: none; } .premium-site-cta__primary, .premium-site-cta__arrow { transition: none; } } /* ========================================================= HEADER + FOOTER BRAND COLOR Matches the blue shown in your screenshot ========================================================= */ #logoAndNav, .footer-1 { background: linear-gradient( 135deg, #0B4EAA 0%, #0D6EFD 100% ) !important; } /* ========================================================= MODERN GLOBAL FOOTER Append once to assets/css/style.css ========================================================= */ .modern-footer { position: relative; overflow: hidden; padding: 54px 0 18px; background: linear-gradient(105deg, #0b4eaa 0%, #0d6efd 58%, #1677f7 100%) !important; color: #fff; } .modern-footer::before, .modern-footer::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .modern-footer::before { width: 360px; height: 360px; top: -230px; right: -100px; background: radial-gradient(circle, rgba(92, 218, 255, .26), transparent 68%); } .modern-footer::after { width: 320px; height: 320px; bottom: -220px; left: 12%; background: radial-gradient(circle, rgba(105, 87, 255, .18), transparent 70%); } .modern-footer > .container { position: relative; z-index: 1; } /* Main 3-zone layout */ .modern-footer__main { display: grid; grid-template-columns: 270px minmax(0, 1fr) 300px; gap: 28px; align-items: start; } /* Glass cards */ .modern-footer__brand, .modern-footer__contact { border: 1px solid rgba(255,255,255,.17); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055)); box-shadow: 0 18px 42px rgba(0,31,92,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .modern-footer__brand { padding: 25px 22px; } .modern-footer__contact { padding: 23px 20px 20px; } /* Brand */ .modern-footer__badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.10); color: #e8f6ff !important; font-size: 11px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; } .modern-footer__badge .fa-circle { color: #59f2a7; font-size: 7px; filter: drop-shadow(0 0 5px rgba(89,242,167,.65)); } .modern-footer__brand-title, .modern-footer__contact-title { color: #fff !important; font-weight: 750; letter-spacing: -.25px; } .modern-footer__brand-title { margin: 0 0 12px; font-size: 1.38rem; line-height: 1.28; } .modern-footer__brand-text { margin: 0 0 20px; color: rgba(238,247,255,.82) !important; font-size: .91rem; line-height: 1.65; } /* Reviews */ .modern-footer__reviews { display: grid; gap: 11px; } .modern-footer__review { display: grid; grid-template-columns: 82px 1fr auto; gap: 11px; align-items: center; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(2,32,83,.18); color: #fff !important; text-decoration: none !important; transition: transform .22s ease, background .22s ease, border-color .22s ease; } .modern-footer__review:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); } .modern-footer__review-logo { display: flex; align-items: center; justify-content: flex-start; } .modern-footer__review-logo img { display: block; max-width: 78px; max-height: 34px; width: auto; height: auto; } .modern-footer__review-copy strong { display: block; color: #fff !important; font-size: .96rem; font-weight: 750; line-height: 1.1; } .modern-footer__review-copy small { display: block; margin-top: 3px; color: rgba(235,246,255,.72) !important; font-size: .74rem; } .modern-footer__review > i { color: rgba(255,255,255,.55); font-size: 11px; } /* Link area */ .modern-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 34px; row-gap: 28px; padding: 3px 0; } .modern-footer__link-group h3 { position: relative; margin: 0 0 13px; padding-bottom: 9px; color: #fff !important; font-size: 1rem; font-weight: 750; line-height: 1.25; } .modern-footer__link-group h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; border-radius: 10px; background: #5cdaff; } .modern-footer__link-group .modern-footer__subheading { margin-top: 23px; } .modern-footer__link-group ul { margin: 0; padding: 0; list-style: none; } .modern-footer__link-group li { margin: 0 0 8px; } .modern-footer__link-group a { position: relative; display: inline-block; color: rgba(235,246,255,.78) !important; font-size: .89rem; font-weight: 500; line-height: 1.5; text-decoration: none !important; transition: color .18s ease, transform .18s ease; } .modern-footer__link-group a::before { content: "›"; position: absolute; left: -11px; opacity: 0; color: #75e1ff; transition: opacity .18s ease, transform .18s ease; } .modern-footer__link-group a:hover { color: #fff !important; transform: translateX(6px); } .modern-footer__link-group a:hover::before { opacity: 1; transform: translateX(2px); } /* Quick contact */ .modern-footer__contact-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 15px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.12); color: #6fe4ff; font-size: 21px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } .modern-footer__contact-kicker { display: block; margin-bottom: 4px; color: #7fe6ff !important; font-size: .73rem; font-weight: 750; letter-spacing: .7px; text-transform: uppercase; } .modern-footer__contact-title { margin: 0 0 7px; font-size: 1.28rem; } .modern-footer__contact-text { margin: 0 0 15px; color: rgba(235,246,255,.78) !important; font-size: .86rem; line-height: 1.55; } .modern-footer__form { display: grid; gap: 9px; } .modern-footer__field { position: relative; } .modern-footer__field > i { position: absolute; top: 50%; left: 13px; z-index: 2; transform: translateY(-50%); color: rgba(225,242,255,.62); font-size: 12px; pointer-events: none; } .modern-footer__field--textarea > i { top: 15px; transform: none; } .modern-footer__field input, .modern-footer__field select, .modern-footer__field textarea { width: 100%; min-height: 42px; margin: 0; padding: 10px 12px 10px 36px; border: 1px solid rgba(255,255,255,.15); border-radius: 11px; outline: none; background: rgba(3,39,94,.25); color: #fff !important; font-family: inherit; font-size: .84rem; line-height: 1.4; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; } .modern-footer__field textarea { min-height: 70px; resize: vertical; } .modern-footer__field input::placeholder, .modern-footer__field textarea::placeholder { color: rgba(225,242,255,.62); } .modern-footer__field select { color: rgba(238,247,255,.82) !important; } .modern-footer__field select option { color: #10233f; background: #fff; } .modern-footer__field input:focus, .modern-footer__field select:focus, .modern-footer__field textarea:focus { border-color: rgba(106,224,255,.65); background: rgba(3,39,94,.36); box-shadow: 0 0 0 3px rgba(85,208,255,.11); } .modern-footer__submit { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 1px; border: 0; border-radius: 11px; background: #fff; color: #0b55ba; font-family: inherit; font-size: .88rem; font-weight: 750; cursor: pointer; box-shadow: 0 8px 20px rgba(1,34,92,.18); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .modern-footer__submit:hover { transform: translateY(-2px); background: #eaf8ff; box-shadow: 0 11px 24px rgba(1,34,92,.24); } .modern-footer__form-note { display: block; text-align: center; color: rgba(236,247,255,.62) !important; font-size: .7rem; } /* Trust strip */ .modern-footer__trust-strip { display: grid; grid-template-columns: .8fr 1.35fr 1fr; gap: 24px; align-items: center; margin-top: 32px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); } .modern-footer__trust-block { min-width: 0; } .modern-footer__trust-block--center { text-align: center; } .modern-footer__trust-block--right { text-align: right; } .modern-footer__trust-label { display: block; margin-bottom: 10px; color: rgba(235,246,255,.58) !important; font-size: .68rem; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; } /* Social */ .modern-footer__socials .social-list-default { display: flex; flex-wrap: wrap; gap: 7px; } .modern-footer__socials .list-inline-item { margin: 0 !important; } .modern-footer__socials a { width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px !important; background: rgba(255,255,255,.11) !important; border: 1px solid rgba(255,255,255,.08); color: #fff !important; box-shadow: none !important; transition: transform .18s ease, background .18s ease !important; } .modern-footer__socials a:hover { transform: translateY(-2px); background: rgba(255,255,255,.20) !important; } /* Certifications */ .modern-footer__certifications { display: flex !important; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px !important; } .modern-footer__certifications .iso-logo { width: auto !important; height: 56px !important; max-width: 72px; object-fit: contain; border-radius: 6px; } .modern-footer__certifications .startup-logo { width: auto !important; height: 48px !important; max-width: 180px; object-fit: contain; } /* Payments */ .modern-footer__payments { display: flex !important; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px !important; } .modern-footer__payments .payment-icon { width: 42px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 3px; border-radius: 7px; background: rgba(255,255,255,.10); } .modern-footer__payments .payment-icon svg { width: 34px !important; height: 26px !important; } /* Copyright */ .modern-footer__copyright { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 17px; color: rgba(235,246,255,.62); font-size: .78rem; } .modern-footer__copyright p { color: rgba(235,246,255,.62) !important; } .modern-footer__copyright-links { display: flex; align-items: center; gap: 9px; } .modern-footer__copyright-links a { color: rgba(235,246,255,.68) !important; text-decoration: none; } .modern-footer__copyright-links a:hover { color: #fff !important; } /* Dark mode - footer intentionally keeps brand blue */ html[data-theme="dark"] .modern-footer { background: linear-gradient(105deg, #083f89 0%, #0b5fd1 58%, #116de8 100%) !important; } /* Tablet / smaller desktop */ @media (max-width: 1399.98px) { .modern-footer__main { grid-template-columns: 240px minmax(0, 1fr) 270px; gap: 22px; } .modern-footer__links { column-gap: 25px; } .modern-footer__link-group a { font-size: .84rem; } } @media (max-width: 1199.98px) { .modern-footer__main { grid-template-columns: 1fr 1fr; } .modern-footer__brand { grid-column: 1; } .modern-footer__contact { grid-column: 2; } .modern-footer__links { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0,1fr)); padding-top: 4px; } .modern-footer__trust-strip { grid-template-columns: 1fr; text-align: center; } .modern-footer__trust-block--right { text-align: center; } .modern-footer__payments { justify-content: center; } } @media (max-width: 767.98px) { .modern-footer { padding: 38px 0 16px; } .modern-footer__main { grid-template-columns: 1fr; gap: 20px; } .modern-footer__brand, .modern-footer__contact, .modern-footer__links { grid-column: auto; grid-row: auto; } .modern-footer__brand, .modern-footer__contact { padding: 21px 18px; border-radius: 18px; } .modern-footer__links { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 20px; } .modern-footer__brand-title { font-size: 1.25rem; } .modern-footer__copyright { flex-direction: column; justify-content: center; text-align: center; gap: 8px; } } @media (max-width: 479.98px) { .modern-footer__links { grid-template-columns: 1fr; } .modern-footer__review { grid-template-columns: 72px 1fr auto; } .modern-footer__review-logo img { max-width: 68px; } .modern-footer__copyright-links { flex-wrap: wrap; justify-content: center; } } /* Accessibility / motion */ @media (prefers-reduced-motion: reduce) { .modern-footer *, .modern-footer *::before, .modern-footer *::after { transition: none !important; } } /* ========================================================= MODERN FOOTER - TRUE 5 COLUMN DESKTOP LAYOUT Reviews | Links | Links | Links | Contact Add AFTER the existing modern footer CSS ========================================================= */ @media (min-width: 1200px) { .modern-footer__main--five { display: grid; /* 5 actual footer columns */ grid-template-columns: minmax(215px, .90fr) minmax(165px, .80fr) minmax(190px, .95fr) minmax(170px, .85fr) minmax(235px, 1fr); gap: 22px; align-items: start; } /* * Let the nav wrapper disappear as a layout box. * Its 3 children become columns 2, 3 and 4 * of .modern-footer__main directly. */ .modern-footer__main--five .modern-footer__links { display: contents; } .modern-footer__main--five .modern-footer__brand { grid-column: 1; } .modern-footer__main--five .modern-footer__links .modern-footer__link-group:nth-child(1) { grid-column: 2; } .modern-footer__main--five .modern-footer__links .modern-footer__link-group:nth-child(2) { grid-column: 3; } .modern-footer__main--five .modern-footer__links .modern-footer__link-group:nth-child(3) { grid-column: 4; } .modern-footer__main--five .modern-footer__contact { grid-column: 5; } /* Tighter, more consistent center spacing */ .modern-footer__main--five .modern-footer__link-group { min-width: 0; padding: 4px 0 0; } .modern-footer__main--five .modern-footer__link-group h3 { margin-bottom: 11px; } .modern-footer__main--five .modern-footer__link-group .modern-footer__subheading { margin-top: 20px; } .modern-footer__main--five .modern-footer__link-group li { margin-bottom: 7px; } .modern-footer__main--five .modern-footer__link-group a { font-size: .86rem; line-height: 1.42; } } /* Large laptop: keep all 5 columns but reduce widths/gaps */ @media (min-width: 1200px) and (max-width: 1399.98px) { .modern-footer__main--five { grid-template-columns: minmax(205px, .92fr) minmax(145px, .76fr) minmax(175px, .92fr) minmax(155px, .80fr) minmax(225px, 1fr); gap: 17px; } .modern-footer__main--five .modern-footer__brand { padding: 21px 18px; } .modern-footer__main--five .modern-footer__contact { padding: 21px 17px 18px; } .modern-footer__main--five .modern-footer__brand-title { font-size: 1.22rem; } .modern-footer__main--five .modern-footer__link-group a { font-size: .82rem; } } /* Tablet: brand + contact first, three link columns underneath */ @media (min-width: 768px) and (max-width: 1199.98px) { .modern-footer__main--five { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .modern-footer__main--five .modern-footer__brand { grid-column: 1; } .modern-footer__main--five .modern-footer__contact { grid-column: 2; } .modern-footer__main--five .modern-footer__links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; padding-top: 4px; } } /* Mobile: single column; links become 1 or 2 columns */ @media (max-width: 767.98px) { .modern-footer__main--five { display: grid; grid-template-columns: 1fr; gap: 20px; } .modern-footer__main--five .modern-footer__brand, .modern-footer__main--five .modern-footer__contact, .modern-footer__main--five .modern-footer__links { grid-column: auto; } .modern-footer__main--five .modern-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 20px; } } @media (max-width: 479.98px) { .modern-footer__main--five .modern-footer__links { grid-template-columns: 1fr; } } /* ========================================================= GLOBAL MODERN SERVICE HERO V2 Reusable on cPanel / Plesk / DirectAdmin / Cloud pages Add once to assets/css/style.css ========================================================= */ .service-hero-v2 { position: relative; overflow: hidden; padding: 82px 0 72px; color: #fff; background: radial-gradient(circle at 10% 5%, rgba(62, 210, 255, .16), transparent 28%), radial-gradient(circle at 92% 85%, rgba(89, 111, 255, .20), transparent 28%), linear-gradient(125deg, #06172f 0%, #082b5c 48%, #0b5ed7 100%); } .service-hero-v2::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.035) 42% 43%, transparent 43% 100%); } .service-hero-v2::after { content: ""; position: absolute; width: 420px; height: 420px; right: -160px; top: -220px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(81, 213, 255, .20), transparent 68%); } .service-hero-v2 .container { position: relative; z-index: 2; } /* Left side */ .service-hero-v2__brand { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .service-hero-v2__logo { display: inline-flex; align-items: center; justify-content: center; min-width: 155px; min-height: 78px; padding: 10px 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(0,0,0,.20); backdrop-filter: blur(10px); } .service-hero-v2__logo img { display: block; max-width: 150px; max-height: 64px; width: auto; height: auto; object-fit: contain; } .service-hero-v2__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(103, 222, 255, .24); border-radius: 999px; background: rgba(59, 202, 255, .10); color: #a7ecff !important; font-size: 12px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; } .service-hero-v2__badge .fa-circle { color: #46f0a6; font-size: 7px; text-shadow: 0 0 12px rgba(70, 240, 166, .75); } .service-hero-v2__title { max-width: 650px; margin: 0 0 20px; color: #fff !important; font-size: clamp(2.8rem, 5.1vw, 4.8rem); font-weight: 800; line-height: 1.02; letter-spacing: -1.6px; } .service-hero-v2__title span { display: block; margin-top: 4px; background: linear-gradient(90deg, #6fe4ff 0%, #4aa5ff 55%, #8f7cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .service-hero-v2__lead { max-width: 610px; margin: 0 0 24px; color: rgba(235, 245, 255, .86) !important; font-size: 1.08rem; line-height: 1.72; } .service-hero-v2__highlights { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 28px; } .service-hero-v2__highlights span { display: inline-flex; align-items: center; gap: 7px; color: #e9f6ff; font-size: .92rem; font-weight: 600; } .service-hero-v2__highlights i { color: #62dcff; } .service-hero-v2__actions { display: flex; flex-wrap: wrap; gap: 12px; } .service-hero-v2__btn { min-height: 50px; padding: 13px 23px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; font-size: .95rem; font-weight: 700; text-decoration: none !important; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; } .service-hero-v2__btn--primary { color: #fff !important; background: linear-gradient(100deg, #1479ff 0%, #5d61ed 58%, #7754cc 100%); box-shadow: 0 12px 28px rgba(41, 103, 255, .30), inset 0 1px 0 rgba(255,255,255,.22); } .service-hero-v2__btn--secondary { color: #fff !important; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.17); } .service-hero-v2__btn:hover { transform: translateY(-2px); } .service-hero-v2__btn--primary:hover { box-shadow: 0 16px 34px rgba(41, 103, 255, .38), inset 0 1px 0 rgba(255,255,255,.25); } .service-hero-v2__btn--secondary:hover { background: rgba(255,255,255,.13); } /* Right conversion panel */ .service-hero-v2__panel { position: relative; overflow: hidden; padding: 30px; border-radius: 28px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.065)); box-shadow: 0 24px 60px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.15); backdrop-filter: blur(14px); } .service-hero-v2__panel::before { content: ""; position: absolute; width: 240px; height: 240px; right: -95px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(83, 219, 255, .20), transparent 68%); pointer-events: none; } .service-hero-v2__panel-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .service-hero-v2__panel-label { color: #8fe7ff !important; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; } .service-hero-v2__status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: rgba(61, 244, 158, .10); color: #bafbd7 !important; font-size: 11px; font-weight: 700; } .service-hero-v2__status > span { width: 7px; height: 7px; border-radius: 50%; background: #46f0a6; box-shadow: 0 0 12px rgba(70, 240, 166, .75); } .service-hero-v2__panel-title { position: relative; z-index: 2; margin: 0 0 14px; color: #fff !important; font-size: clamp(1.65rem, 2.5vw, 2.25rem); line-height: 1.22; font-weight: 750; letter-spacing: -.4px; } .service-hero-v2__panel-text { position: relative; z-index: 2; margin-bottom: 22px; color: rgba(232, 244, 255, .84) !important; line-height: 1.65; font-size: .97rem; } .service-hero-v2__feature-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 24px; } .service-hero-v2__feature { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 13px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(3, 21, 47, .24); } .service-hero-v2__feature-icon { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(145deg, rgba(86, 215, 255, .18), rgba(93, 97, 237, .20)); color: #71ddff; } .service-hero-v2__feature strong { display: block; margin-bottom: 2px; color: #fff !important; font-size: .87rem; line-height: 1.25; } .service-hero-v2__feature span { display: block; color: rgba(222, 238, 252, .70) !important; font-size: .75rem; line-height: 1.3; } .service-hero-v2__price-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); } .service-hero-v2__price-row small { display: block; margin-bottom: 2px; color: rgba(228, 241, 253, .67); font-size: .75rem; } .service-hero-v2__price-row strong { display: block; color: #fff !important; font-size: 1.75rem; line-height: 1; } .service-hero-v2__price-row strong span { color: rgba(227, 241, 253, .70) !important; font-size: .82rem; font-weight: 500; } .service-hero-v2__panel-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 17px; border-radius: 999px; background: #fff; color: #0b4eaa !important; font-size: .88rem; font-weight: 750; text-decoration: none !important; box-shadow: 0 9px 22px rgba(0,0,0,.14); transition: transform .22s ease, background .22s ease; } .service-hero-v2__panel-cta:hover { transform: translateY(-2px); background: #eaf7ff; } /* Dark mode - hero is already dark, keep premium tones */ html[data-theme="dark"] .service-hero-v2 { background: radial-gradient(circle at 10% 5%, rgba(62, 210, 255, .12), transparent 28%), radial-gradient(circle at 92% 85%, rgba(89, 111, 255, .15), transparent 28%), linear-gradient(125deg, #050d19 0%, #081d3a 50%, #0a3e80 100%); } /* Tablet */ @media (max-width: 991.98px) { .service-hero-v2 { padding: 68px 0 58px; } .service-hero-v2__content { text-align: center; } .service-hero-v2__brand, .service-hero-v2__highlights, .service-hero-v2__actions { justify-content: center; } .service-hero-v2__lead { margin-left: auto; margin-right: auto; } .service-hero-v2__panel { max-width: 720px; margin: 10px auto 0; } } /* Mobile */ @media (max-width: 575.98px) { .service-hero-v2 { padding: 52px 0 44px; } .service-hero-v2__brand { flex-direction: column; gap: 12px; margin-bottom: 18px; } .service-hero-v2__logo { min-width: 138px; min-height: 68px; padding: 9px 15px; } .service-hero-v2__logo img { max-width: 132px; max-height: 54px; } .service-hero-v2__title { font-size: clamp(2.35rem, 12vw, 3.35rem); letter-spacing: -1px; } .service-hero-v2__lead { font-size: .96rem; line-height: 1.65; } .service-hero-v2__highlights { gap: 9px 14px; } .service-hero-v2__actions { flex-direction: column; } .service-hero-v2__btn { width: 100%; } .service-hero-v2__panel { padding: 22px 18px; border-radius: 22px; } .service-hero-v2__panel-top { align-items: flex-start; flex-direction: column; } .service-hero-v2__panel-title { font-size: 1.45rem; } .service-hero-v2__feature-grid { grid-template-columns: 1fr; } .service-hero-v2__price-row { align-items: stretch; flex-direction: column; } .service-hero-v2__panel-cta { width: 100%; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .service-hero-v2__btn, .service-hero-v2__panel-cta { transition: none; } } /* ========================================================= GLOBAL SERVICE PAGE DESIGN SYSTEM Append ONCE to assets/css/style.css. Reuse these same classes on cPanel, Plesk, DirectAdmin, AWS, Azure, DigitalOcean and other service pages. ========================================================= */ :root { --sp-primary: #0d6efd; --sp-primary-dark: #0b4eaa; --sp-primary-soft: #eaf4ff; --sp-cyan: #55d8ff; --sp-purple: #7862e8; --sp-success: #18b981; --sp-navy-950: #06111f; --sp-navy-900: #081a33; --sp-navy-800: #0b2b52; --sp-bg: #ffffff; --sp-bg-soft: #f3f7fc; --sp-card: #ffffff; --sp-border: #d9e5f2; --sp-heading: #0b2b52; --sp-text: #58697f; --sp-muted: #7a899b; --sp-radius-lg: 24px; --sp-radius-md: 18px; --sp-shadow: 0 10px 28px rgba(8, 43, 92, .07), 0 3px 10px rgba(8, 43, 92, .04); } /* ========================================================= PAGE / SECTIONS ========================================================= */ .service-page { background: var(--sp-bg); color: var(--sp-text); } .service-section { position: relative; padding: 72px 0; background: var(--sp-bg); } .service-section--soft { background: var(--sp-bg-soft); } .service-section--dark { overflow: hidden; color: #fff; background: radial-gradient(circle at 10% 0, rgba(85,216,255,.10), transparent 28%), radial-gradient(circle at 92% 100%, rgba(120,98,232,.14), transparent 28%), linear-gradient(125deg, #06172f 0%, #082b5c 52%, #0b4eaa 100%); } /* ========================================================= SECTION HEADINGS ========================================================= */ .service-section-heading { max-width: 930px; margin: 0 auto 42px; } .service-section-heading__eyebrow { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 11px; padding: 6px 12px; border-radius: 999px; background: #e9f4ff; color: var(--sp-primary-dark) !important; font-size: 12px; font-weight: 750; letter-spacing: .55px; text-transform: uppercase; } .service-section-heading h2 { margin: 0 0 14px; color: var(--sp-heading) !important; font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.14; font-weight: 800; letter-spacing: -.8px; } .service-section-heading h2::after { content: ""; display: block; width: 72px; height: 4px; margin: 16px auto 0; border-radius: 10px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-cyan)); } .service-section-heading__text { max-width: 820px; margin: 0 auto; color: var(--sp-text) !important; font-size: 1.04rem; line-height: 1.7; } .service-section-heading--light h2 { color: #fff !important; } .service-section-heading--light .service-section-heading__text { color: rgba(233,244,255,.82) !important; } .service-section-heading--light .service-section-heading__eyebrow { background: rgba(85,216,255,.10); border: 1px solid rgba(85,216,255,.20); color: #99e8ff !important; } /* ========================================================= HERO ========================================================= */ .service-hero-v3 { position: relative; overflow: hidden; padding: 82px 0 72px; color: #fff; background: radial-gradient(circle at 8% 4%, rgba(85,216,255,.15), transparent 28%), radial-gradient(circle at 94% 92%, rgba(120,98,232,.18), transparent 28%), linear-gradient(125deg, #06172f 0%, #082b5c 48%, #0b5ed7 100%); } .service-hero-v3::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.035) 42% 43%, transparent 43% 100%); } .service-hero-v3 .container { position: relative; z-index: 2; } .service-hero-v3__topline { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 23px; } .service-hero-v3__logo { display: inline-flex; align-items: center; justify-content: center; min-width: 155px; min-height: 76px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(0,0,0,.20); backdrop-filter: blur(10px); } .service-hero-v3__logo img { display: block; max-width: 150px; max-height: 62px; width: auto; height: auto; object-fit: contain; } .service-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(103,222,255,.24); border-radius: 999px; background: rgba(59,202,255,.10); color: #a7ecff !important; font-size: 12px; font-weight: 750; letter-spacing: .45px; text-transform: uppercase; } .service-status-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #46f0a6; box-shadow: 0 0 12px rgba(70,240,166,.78); } .service-hero-v3__title { max-width: 650px; margin: 0 0 20px; color: #fff !important; font-size: clamp(2.8rem, 5vw, 4.75rem); line-height: 1.02; font-weight: 820; letter-spacing: -1.6px; } .service-hero-v3__title span { display: block; margin-top: 4px; background: linear-gradient(90deg, #6fe4ff 0%, #4aa5ff 55%, #9a7dff 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .service-hero-v3__lead { max-width: 610px; margin: 0 0 24px; color: rgba(235,245,255,.86) !important; font-size: 1.07rem; line-height: 1.72; } .service-hero-v3__benefits { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 27px; } .service-hero-v3__benefits span { display: inline-flex; align-items: center; gap: 7px; color: #e9f6ff; font-size: .91rem; font-weight: 650; } .service-hero-v3__benefits i { color: #62dcff; } .service-hero-v3__actions { display: flex; flex-wrap: wrap; gap: 12px; } .service-btn { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 23px; border: 0; border-radius: 999px; font-size: .94rem; font-weight: 750; line-height: 1; text-decoration: none !important; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; } .service-btn:hover { transform: translateY(-2px); } .service-btn--primary { color: #fff !important; background: linear-gradient(100deg, #1479ff 0%, #5d61ed 58%, #7754cc 100%); box-shadow: 0 12px 28px rgba(41,103,255,.30), inset 0 1px 0 rgba(255,255,255,.22); } .service-btn--secondary { color: #fff !important; border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.075); } .service-btn--secondary:hover { background: rgba(255,255,255,.13); } /* Hero panel */ .service-hero-v3__panel { position: relative; overflow: hidden; padding: 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.065)); box-shadow: 0 24px 60px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.15); backdrop-filter: blur(14px); } .service-hero-v3__panel::before { content: ""; position: absolute; width: 250px; height: 250px; right: -105px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(83,219,255,.20), transparent 68%); } .service-hero-v3__panel-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; color: #8fe7ff; font-size: 12px; font-weight: 750; letter-spacing: .5px; text-transform: uppercase; } .service-online-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: rgba(61,244,158,.10); color: #bafbd7 !important; font-size: 11px; font-weight: 750; } .service-online-pill i { color: #46f0a6; font-size: 7px; } .service-hero-v3__panel h2 { position: relative; z-index: 2; margin: 0 0 13px; color: #fff !important; font-size: clamp(1.65rem, 2.5vw, 2.25rem); line-height: 1.22; font-weight: 780; letter-spacing: -.45px; } .service-hero-v3__panel > p { position: relative; z-index: 2; margin-bottom: 21px; color: rgba(232,244,255,.84) !important; font-size: .96rem; line-height: 1.66; } .service-mini-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 23px; } .service-mini-card { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(255,255,255,.10); border-radius: 15px; background: rgba(3,21,47,.24); } .service-mini-card > i { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #71ddff; background: linear-gradient(145deg, rgba(86,215,255,.18), rgba(93,97,237,.20)); } .service-mini-card strong { display: block; margin-bottom: 2px; color: #fff !important; font-size: .86rem; } .service-mini-card span { display: block; color: rgba(222,238,252,.70) !important; font-size: .74rem; } .service-hero-v3__offer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.12); } .service-hero-v3__offer small { display: block; color: rgba(228,241,253,.67); font-size: .74rem; } .service-hero-v3__offer strong { display: block; margin-top: 3px; color: #fff !important; font-size: 1.75rem; line-height: 1; } .service-hero-v3__offer strong span { color: rgba(227,241,253,.70) !important; font-size: .82rem; font-weight: 500; } .service-hero-v3__offer > a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 17px; border-radius: 999px; background: #fff; color: var(--sp-primary-dark) !important; font-size: .87rem; font-weight: 760; text-decoration: none !important; box-shadow: 0 9px 22px rgba(0,0,0,.14); transition: transform .2s ease; } .service-hero-v3__offer > a:hover { transform: translateY(-2px); } /* ========================================================= PRICING CARDS ========================================================= */ .service-price-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 29px 25px 25px; border: 1px solid var(--sp-border); border-radius: 22px; background: var(--sp-card); box-shadow: var(--sp-shadow); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; } .service-price-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 4px; background: linear-gradient(90deg, #55d8ff, #0d6efd, #7862e8); opacity: .75; } .service-price-card:hover { transform: translateY(-6px); border-color: #9dc8ff; box-shadow: 0 18px 42px rgba(8,43,92,.12), 0 5px 14px rgba(8,43,92,.06); } .service-price-card--featured { border-color: #73adff; box-shadow: 0 20px 48px rgba(13,110,253,.14), 0 6px 18px rgba(8,43,92,.07); } .service-price-card__badge { position: absolute; top: 16px; right: 16px; padding: 6px 10px; border-radius: 999px; background: linear-gradient(90deg, #0d6efd, #7862e8); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; } .service-price-card__header { margin-bottom: 18px; } .service-price-card__plan { display: block; margin-bottom: 13px; color: var(--sp-heading); font-size: 1.08rem; font-weight: 760; } .service-price-card__header h3 { margin: 0; color: var(--sp-heading) !important; font-size: 2.7rem; font-weight: 820; letter-spacing: -1px; } .service-price-card__header h3 small { font-size: 1.05rem; font-weight: 500; } .service-price-card__unit { color: var(--sp-muted); font-size: .82rem; } .service-price-card > p { min-height: 68px; margin-bottom: 17px; color: var(--sp-text); line-height: 1.55; } .service-price-card__quick { display: grid; gap: 8px; margin-bottom: 22px; } .service-price-card__quick span { color: var(--sp-text); font-size: .86rem; font-weight: 600; } .service-price-card__quick i { margin-right: 6px; color: var(--sp-success); } .service-btn--price { width: 100%; margin-top: auto; color: #fff !important; background: linear-gradient(100deg, #1479ff, #5d61ed 58%, #7754cc); box-shadow: 0 10px 22px rgba(56,94,224,.22); } /* ========================================================= CONTENT CARDS ========================================================= */ .service-content-card { position: relative; overflow: hidden; padding: 30px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); background: var(--sp-card); box-shadow: var(--sp-shadow); } .service-content-card--accent { background: linear-gradient(145deg, #ffffff 0%, #f5f9ff 100%); } .service-content-card__icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 19px; border-radius: 16px; color: var(--sp-primary); background: #e9f4ff; font-size: 1.25rem; } .service-content-card h3 { margin-bottom: 14px; color: var(--sp-heading) !important; font-size: 1.35rem; font-weight: 760; } .service-content-card p { color: var(--sp-text); line-height: 1.7; } /* ========================================================= CHECK LIST ========================================================= */ .service-check-list { list-style: none; margin: 0; padding: 0; } .service-check-list li { position: relative; padding: 6px 0 6px 27px; color: var(--sp-text); line-height: 1.5; } .service-check-list li::before { content: "\f058"; position: absolute; left: 0; top: 7px; color: var(--sp-success); font-family: "Font Awesome 5 Free"; font-weight: 900; } .service-check-list--compact li { padding-top: 5px; padding-bottom: 5px; font-size: .91rem; } /* ========================================================= BENEFIT GRID ========================================================= */ .service-benefit-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } .service-benefit-card { padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 19px; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(8px); transition: transform .22s ease, background .22s ease; } .service-benefit-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.11); } .service-benefit-card > i { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 14px; color: #75e0ff; background: rgba(85,216,255,.10); font-size: 1.1rem; } .service-benefit-card h3 { color: #fff !important; font-size: 1.05rem; font-weight: 740; } .service-benefit-card p { margin: 0; color: rgba(230,242,255,.76); font-size: .91rem; line-height: 1.58; } /* ========================================================= PLAN INCLUDES IMAGE CARDS ========================================================= */ .service-image-card { padding: 26px; border: 1px solid var(--sp-border); border-radius: 21px; background: var(--sp-card); box-shadow: var(--sp-shadow); transition: transform .22s ease, box-shadow .22s ease; } .service-image-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(8,43,92,.11); } .service-image-card__media { min-height: 135px; display: flex; align-items: center; justify-content: center; margin-bottom: 17px; } .service-image-card__media img { max-width: 140px; max-height: 135px; width: auto; height: auto; object-fit: contain; } .service-image-card h3 { margin-bottom: 14px; color: var(--sp-heading) !important; font-size: 1.18rem; font-weight: 750; } /* ========================================================= SPECIFICATION CARDS ========================================================= */ .service-spec-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; } .service-spec-card { position: relative; padding: 23px; border: 1px solid var(--sp-border); border-radius: 19px; background: var(--sp-card); box-shadow: var(--sp-shadow); transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease; } .service-spec-card:hover { transform: translateY(-5px); border-color: #83bbff; box-shadow: 0 18px 38px rgba(13,110,253,.10); } .service-spec-card__icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 15px; background: #edf6ff; } .service-spec-card__icon img { max-width: 48px; max-height: 48px; object-fit: contain; } .service-spec-card h3 { margin-bottom: 13px; color: var(--sp-heading) !important; font-size: 1.04rem; font-weight: 750; line-height: 1.35; } /* ========================================================= TRUST + AUDIENCE CARDS ========================================================= */ .service-trust-grid, .service-audience-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; } .service-trust-card, .service-audience-card { padding: 23px; border: 1px solid var(--sp-border); border-radius: 18px; background: var(--sp-card); box-shadow: 0 6px 18px rgba(8,43,92,.05); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .service-trust-card:hover, .service-audience-card:hover { transform: translateY(-4px); border-color: #9bc8ff; box-shadow: 0 15px 34px rgba(8,43,92,.09); } .service-trust-card > i, .service-audience-card > i { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 13px; color: var(--sp-primary); background: #eaf4ff; } .service-trust-card h3, .service-audience-card h3 { margin-bottom: 8px; color: var(--sp-heading) !important; font-size: 1rem; font-weight: 750; } .service-trust-card p, .service-audience-card p { margin: 0; color: var(--sp-text); font-size: .9rem; line-height: 1.55; } /* ========================================================= FAQ ========================================================= */ .service-faq-wrap { max-width: 1080px; margin: 0 auto; } .service-faq-wrap .accordion { display: grid; gap: 12px; } .service-faq-wrap .accordion-item { overflow: hidden; border: 1px solid var(--sp-border) !important; border-radius: 16px !important; background: var(--sp-card); box-shadow: 0 7px 20px rgba(8,43,92,.05); } .service-faq-wrap .accordion-button { padding: 18px 20px; background: var(--sp-card) !important; color: var(--sp-heading) !important; font-weight: 700; box-shadow: none !important; } .service-faq-wrap .accordion-button:not(.collapsed) { background: linear-gradient(90deg, #0b4eaa 0%, #0d6efd 100%) !important; color: #fff !important; } .service-faq-wrap .accordion-button i { color: #63b5ff; } .service-faq-wrap .accordion-button:not(.collapsed) i { color: #a7eaff; } .service-faq-wrap .accordion-body { padding: 18px 20px; background: var(--sp-card); color: var(--sp-text); line-height: 1.65; } /* ========================================================= GLOBAL CTA ========================================================= */ .service-cta-v3 { position: relative; overflow: hidden; max-width: 1180px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 25px; margin: 44px auto 0; padding: 31px 34px; border: 1px solid rgba(255,255,255,.14); border-radius: 23px; color: #fff; background: radial-gradient(circle at 90% 0, rgba(85,216,255,.22), transparent 25%), linear-gradient(120deg, #061d42 0%, #0a3975 48%, #0d6efd 100%); box-shadow: 0 20px 48px rgba(4,30,66,.22); } .service-cta-v3__icon { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; color: #63ddff; background: rgba(255,255,255,.09); font-size: 1.8rem; } .service-cta-v3__eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #7ce5ff !important; font-size: 11px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; } .service-cta-v3__eyebrow i { color: #45efa4; font-size: 7px; } .service-cta-v3 h2 { margin: 0 0 7px; color: #fff !important; font-size: 1.65rem; font-weight: 790; } .service-cta-v3 p { max-width: 670px; margin: 0 0 11px; color: rgba(231,243,255,.82); font-size: .92rem; line-height: 1.55; } .service-cta-v3__points { display: flex; flex-wrap: wrap; gap: 8px 15px; } .service-cta-v3__points span { color: #eaf5ff; font-size: .79rem; font-weight: 600; } .service-cta-v3__points i { margin-right: 4px; color: #45efa4; } .service-cta-v3__action { min-width: 220px; display: flex; flex-direction: column; align-items: center; gap: 7px; } .service-cta-v3__action > a { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 20px; border-radius: 999px; background: #fff; color: var(--sp-primary-dark) !important; font-size: .9rem; font-weight: 780; text-decoration: none !important; box-shadow: 0 10px 24px rgba(0,0,0,.15); transition: transform .22s ease, background .22s ease; } .service-cta-v3__action > a:hover { transform: translateY(-2px); background: #eaf7ff; } .service-cta-v3__action small { color: rgba(255,255,255,.65); font-size: .7rem; } /* ========================================================= PLAN COMPARISON INTEGRATION ========================================================= */ .service-page__comparison { padding: 67px 0 38px; } .service-page__comparison .comparison-table { padding: 0 !important; } .service-page__comparison .section-heading { max-width: 1000px; margin-left: auto; margin-right: auto; } /* ========================================================= DARK MODE ========================================================= */ html[data-theme="dark"] .service-page { --sp-bg: #0b1220; --sp-bg-soft: #0e1726; --sp-card: #111c2e; --sp-border: #2a3a50; --sp-heading: #f1f5f9; --sp-text: #cbd5e1; --sp-muted: #94a3b8; } html[data-theme="dark"] .service-section-heading__eyebrow { background: #15243a; color: #8dccff !important; } html[data-theme="dark"] .service-content-card--accent { background: linear-gradient(145deg, #111c2e 0%, #14233a 100%); } html[data-theme="dark"] .service-content-card__icon, html[data-theme="dark"] .service-spec-card__icon, html[data-theme="dark"] .service-trust-card > i, html[data-theme="dark"] .service-audience-card > i { background: #162944; } html[data-theme="dark"] .service-faq-wrap .accordion-button:not(.collapsed) { background: linear-gradient(90deg, #0b4eaa 0%, #0d6efd 100%) !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1199.98px) { .service-spec-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 991.98px) { .service-section { padding: 60px 0; } .service-hero-v3 { padding: 66px 0 58px; } .service-hero-v3__content { text-align: center; } .service-hero-v3__topline, .service-hero-v3__benefits, .service-hero-v3__actions { justify-content: center; } .service-hero-v3__lead { margin-left: auto; margin-right: auto; } .service-hero-v3__panel { max-width: 720px; margin: 7px auto 0; } .service-benefit-grid, .service-trust-grid, .service-audience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .service-cta-v3 { grid-template-columns: auto 1fr; } .service-cta-v3__action { grid-column: 1 / -1; width: 100%; max-width: 350px; margin: 0 auto; } } @media (max-width: 767.98px) { .service-section { padding: 48px 0; } .service-section-heading { margin-bottom: 30px; } .service-section-heading h2, .service-section-heading h2.single-line-heading { white-space: normal !important; font-size: 1.72rem !important; letter-spacing: -.4px; } .service-spec-grid, .service-benefit-grid, .service-trust-grid, .service-audience-grid { grid-template-columns: 1fr; } .service-price-card > p { min-height: auto; } .service-cta-v3 { grid-template-columns: 1fr; padding: 26px 20px; text-align: center; } .service-cta-v3__icon { margin: 0 auto; } .service-cta-v3__points { justify-content: center; } } @media (max-width: 575.98px) { .service-hero-v3 { padding: 50px 0 43px; } .service-hero-v3__topline { flex-direction: column; gap: 11px; margin-bottom: 17px; } .service-hero-v3__logo { min-width: 138px; min-height: 66px; } .service-hero-v3__logo img { max-width: 130px; max-height: 52px; } .service-hero-v3__title { font-size: clamp(2.3rem, 12vw, 3.25rem); letter-spacing: -1px; } .service-hero-v3__lead { font-size: .95rem; line-height: 1.62; } .service-hero-v3__actions { flex-direction: column; } .service-btn { width: 100%; } .service-hero-v3__panel { padding: 22px 18px; border-radius: 21px; } .service-hero-v3__panel-head { align-items: flex-start; flex-direction: column; } .service-hero-v3__panel h2 { font-size: 1.42rem; } .service-mini-grid { grid-template-columns: 1fr; } .service-hero-v3__offer { flex-direction: column; align-items: stretch; } .service-hero-v3__offer > a { width: 100%; } .service-price-card, .service-content-card, .service-image-card, .service-spec-card, .service-trust-card, .service-audience-card { border-radius: 17px; } } /* ========================================================= REDUCED MOTION / PERFORMANCE ========================================================= */ @media (prefers-reduced-motion: reduce) { .service-page *, .service-page *::before, .service-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================= GLOBAL SERVICE PAGE - COMPACT SPACING PATCH Add ONCE AFTER the global service-page CSS in style.css. Applies to all .service-page pages. ========================================================= */ /* Main sections: previously 72px */ .service-page .service-section { padding-top: 56px; padding-bottom: 56px; } /* Hero: reduce unused vertical space */ .service-page .service-hero-v3 { padding-top: 62px; padding-bottom: 54px; } /* Heading group: previously ~42px below */ .service-page .service-section-heading { margin-bottom: 30px; } /* Tighter title spacing */ .service-page .service-section-heading__eyebrow { margin-bottom: 8px; } .service-page .service-section-heading h2 { margin-bottom: 10px; } .service-page .service-section-heading h2::after { margin-top: 12px; } /* Pricing */ .service-page .service-price-card { padding: 24px 21px 21px; } .service-page .service-price-card__header { margin-bottom: 13px; } .service-page .service-price-card__plan { margin-bottom: 9px; } .service-page .service-price-card > p { min-height: 58px; margin-bottom: 12px; } .service-page .service-price-card__quick { gap: 6px; margin-bottom: 16px; } /* Overview cards */ .service-page .service-content-card { padding: 25px; } .service-page .service-content-card__icon { margin-bottom: 14px; } .service-page .service-content-card h3 { margin-bottom: 10px; } /* Dark benefits */ .service-page .service-benefit-grid { gap: 14px; } .service-page .service-benefit-card { padding: 20px; } .service-page .service-benefit-card > i { margin-bottom: 12px; } /* Plan comparison: biggest spacing reduction */ .service-page .service-page__comparison { padding-top: 50px; padding-bottom: 24px; } .service-page .service-page__comparison .service-section-heading, .service-page .service-page__comparison .section-heading { margin-bottom: 28px !important; } /* Plan includes */ .service-page .service-image-card { padding: 22px; } .service-page .service-image-card__media { min-height: 112px; margin-bottom: 12px; } .service-page .service-image-card__media img { max-width: 122px; max-height: 112px; } .service-page .service-image-card h3 { margin-bottom: 10px; } /* Technical specs */ .service-page .service-spec-grid { gap: 14px; } .service-page .service-spec-card { padding: 19px; } .service-page .service-spec-card__icon { width: 52px; height: 52px; margin-bottom: 12px; } .service-page .service-spec-card__icon img { max-width: 43px; max-height: 43px; } .service-page .service-spec-card h3 { margin-bottom: 9px; } /* Trust / audience */ .service-page .service-trust-grid, .service-page .service-audience-grid { gap: 14px; } .service-page .service-trust-card, .service-page .service-audience-card { padding: 19px; } .service-page .service-trust-card > i, .service-page .service-audience-card > i { margin-bottom: 10px; } /* FAQ */ .service-page .service-faq-wrap .accordion { gap: 9px; } .service-page .service-faq-wrap .accordion-button { padding: 15px 18px; } .service-page .service-faq-wrap .accordion-body { padding: 15px 18px; } /* CTA */ .service-page .service-cta-v3 { margin-top: 32px; padding: 25px 29px; } /* Tablet */ @media (max-width: 991.98px) { .service-page .service-section { padding-top: 48px; padding-bottom: 48px; } .service-page .service-hero-v3 { padding-top: 54px; padding-bottom: 48px; } .service-page .service-section-heading { margin-bottom: 27px; } } /* Mobile */ @media (max-width: 767.98px) { .service-page .service-section { padding-top: 40px; padding-bottom: 40px; } .service-page .service-hero-v3 { padding-top: 44px; padding-bottom: 38px; } .service-page .service-section-heading { margin-bottom: 24px; } .service-page .service-page__comparison { padding-top: 40px; padding-bottom: 18px; } .service-page .service-page__comparison .service-section-heading, .service-page .service-page__comparison .section-heading { margin-bottom: 23px !important; } .service-page .service-price-card, .service-page .service-content-card, .service-page .service-image-card, .service-page .service-spec-card, .service-page .service-trust-card, .service-page .service-audience-card { padding: 18px; } .service-page .service-cta-v3 { margin-top: 26px; padding: 22px 18px; } } .service-page .service-hero-v3 { padding-top: 112px !important; padding-bottom: 54px; } #logoAndNav, #logoAndNav.fixed-top { z-index: 1035; } /* ========================================================= 24x7ServerSupport - MODERN HOMEPAGE V3 Append ONCE to assets/css/style.css ========================================================= */ .home-v3 { --hv3-primary:#0d6efd; --hv3-primary-dark:#0b4eaa; --hv3-cyan:#55d8ff; --hv3-purple:#7862e8; --hv3-success:#18b981; --hv3-navy-950:#06111f; --hv3-bg:#fff; --hv3-bg-soft:#f3f7fc; --hv3-card:#fff; --hv3-border:#d9e5f2; --hv3-heading:#0b2b52; --hv3-text:#58697f; --hv3-muted:#7a899b; --hv3-shadow:0 14px 38px rgba(8,43,92,.08),0 3px 12px rgba(8,43,92,.04); color:var(--hv3-text); background:var(--hv3-bg); } html[data-theme="dark"] .home-v3 { --hv3-bg:#0b1220; --hv3-bg-soft:#0e1726; --hv3-card:#111c2e; --hv3-border:#2a3a50; --hv3-heading:#f1f5f9; --hv3-text:#cbd5e1; --hv3-muted:#94a3b8; } .home-v3 *, .home-v3 *::before, .home-v3 *::after {box-sizing:border-box} .home-v3 a{text-decoration:none} .home-v3-section{padding:76px 0;background:var(--hv3-bg)} .home-v3-section--soft{background:var(--hv3-bg-soft)} .home-v3-heading{max-width:790px;margin:0 auto 38px} .home-v3-heading__eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--hv3-primary);font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase} .home-v3-heading h2{margin:0 0 12px;color:var(--hv3-heading);font-size:clamp(2rem,3.4vw,3rem);font-weight:820;letter-spacing:-.035em;line-height:1.08} .home-v3-heading p{max-width:720px;margin:0 auto;color:var(--hv3-text);font-size:1rem;line-height:1.7} .home-v3-heading--split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:40px;align-items:end;max-width:none} .home-v3-heading--split p{margin:0} /* HERO */ .home-v3-hero{position:relative;isolation:isolate;overflow:hidden;padding:142px 0 82px;background:radial-gradient(circle at 76% 24%,rgba(85,216,255,.19),transparent 24%),radial-gradient(circle at 91% 82%,rgba(120,98,232,.20),transparent 26%),linear-gradient(120deg,#071a33 0%,#0b4eaa 53%,#0d6efd 100%);color:#fff} .home-v3-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent)} .home-v3-hero::after{content:"";position:absolute;width:480px;height:480px;right:-250px;top:-170px;z-index:-1;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.018)} .home-v3-hero__content{max-width:670px} .home-v3-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:19px;padding:8px 13px;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);color:#dcebff;font-size:.76rem;font-weight:750;letter-spacing:.035em} .home-v3-live-dot{width:8px;height:8px;border-radius:50%;background:#4ee2a5;box-shadow:0 0 0 5px rgba(78,226,165,.12)} .home-v3-hero h1{margin:0 0 21px;color:#fff!important;font-size:clamp(2.65rem,5vw,4.65rem);font-weight:850;letter-spacing:-.055em;line-height:.99} .home-v3-hero h1 span{display:block;margin-top:7px;background:linear-gradient(90deg,#fff 0%,#8fe6ff 48%,#d6d1ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .home-v3-hero__lead{max-width:650px;margin:0 0 28px;color:rgba(236,245,255,.84);font-size:1.05rem;line-height:1.72} .home-v3-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:27px} .home-v3-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;border:1px solid transparent;border-radius:12px;font-size:.9rem;font-weight:760;line-height:1;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease} .home-v3-btn:hover{transform:translateY(-2px)} .home-v3-btn--primary{background:#fff;color:#0b4eaa!important;box-shadow:0 10px 24px rgba(3,18,38,.18)} .home-v3-btn--outline{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.06);color:#fff!important;backdrop-filter:blur(12px)} .home-v3-btn--dark{background:linear-gradient(100deg,#0b2b52,#0d6efd);color:#fff!important;box-shadow:0 9px 20px rgba(13,110,253,.18)} .home-v3-btn--light{background:#fff;color:#0b4eaa!important;box-shadow:0 9px 22px rgba(0,0,0,.15)} .home-v3-hero__proof{display:flex;flex-wrap:wrap;gap:12px 20px;color:rgba(238,247,255,.88);font-size:.83rem;font-weight:650} .home-v3-hero__proof span{display:inline-flex;align-items:center;gap:7px} .home-v3-hero__proof i{color:#65e3ff} /* HERO OPERATIONS CARD */ .home-v3-ops-card{position:relative;overflow:hidden;padding:25px;border:1px solid rgba(255,255,255,.18);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.07));box-shadow:0 28px 70px rgba(3,18,38,.25);backdrop-filter:blur(22px)} @media(min-width:1200px){.home-v3-hero .row{min-height:638px}.home-v3-ops-card{min-height:500px}} .home-v3-ops-card__head,.home-v3-ops-footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:15px} .home-v3-ops-card__head small{display:block;margin-bottom:3px;color:#89dbff;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .home-v3-ops-card__head h2{margin:0;color:#fff!important;font-size:1.22rem;font-weight:760} .home-v3-online{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(90,229,167,.23);border-radius:999px;background:rgba(26,185,129,.11);color:#baf5d9;font-size:.7rem;font-weight:700;white-space:nowrap} .home-v3-online i{color:#4ee2a5;font-size:7px} .home-v3-ops-status{position:relative;display:flex;align-items:center;gap:13px;margin:22px 0 17px;padding:15px;border:1px solid rgba(255,255,255,.11);border-radius:15px;background:rgba(5,21,43,.20)} .home-v3-status-ring{display:grid;place-items:center;width:45px;height:45px;border:1px solid rgba(91,226,255,.32);border-radius:50%;background:rgba(85,216,255,.08);color:#72e4ff;box-shadow:0 0 0 6px rgba(85,216,255,.045)} .home-v3-ops-status span,.home-v3-ops-status strong{display:block} .home-v3-ops-status span{margin-bottom:3px;color:rgba(231,243,255,.66);font-size:.73rem} .home-v3-ops-status strong{color:#fff;font-size:.89rem} .home-v3-ops-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} .home-v3-ops-item{min-height:110px;padding:16px;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(4,21,44,.19)} .home-v3-ops-item i{display:block;margin-bottom:14px;color:#65dfff;font-size:1rem} .home-v3-ops-item strong,.home-v3-ops-item span{display:block} .home-v3-ops-item strong{margin-bottom:4px;color:#fff;font-size:.82rem} .home-v3-ops-item span{color:rgba(231,243,255,.62);font-size:.69rem} .home-v3-ops-footer{margin-top:17px;padding-top:16px;border-top:1px solid rgba(255,255,255,.11)} .home-v3-ops-footer__stack{display:flex;flex-wrap:wrap;gap:5px} .home-v3-ops-footer__stack span{padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.08);color:#dcecff;font-size:.61rem;font-weight:700} .home-v3-ops-footer a{color:#9ceaff!important;font-size:.72rem;font-weight:720} /* TRUST */ .home-v3-trust{position:relative;z-index:3;background:var(--hv3-bg)} .home-v3-trust__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-right:1px solid var(--hv3-border);border-bottom:1px solid var(--hv3-border);border-left:1px solid var(--hv3-border);border-radius:0 0 19px 19px;background:var(--hv3-card);box-shadow:var(--hv3-shadow)} .home-v3-trust__item{padding:21px 17px;text-align:center} .home-v3-trust__item+.home-v3-trust__item{border-left:1px solid var(--hv3-border)} .home-v3-trust__item strong,.home-v3-trust__item span{display:block} .home-v3-trust__item strong{margin-bottom:3px;color:var(--hv3-heading);font-size:1.08rem;font-weight:820} .home-v3-trust__item span{color:var(--hv3-muted);font-size:.72rem} /* PLATFORM LOGOS */ .home-v3-platform-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:11px} .home-v3-platform{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;min-height:112px;padding:14px;border:1px solid var(--hv3-border);border-radius:16px;background:var(--hv3-card);box-shadow:0 6px 18px rgba(8,43,92,.04);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .home-v3-platform:hover{transform:translateY(-4px);border-color:rgba(13,110,253,.33);box-shadow:0 13px 28px rgba(8,43,92,.09)} .home-v3-platform img{display:block;flex:0 0 auto;max-width:60px;max-height:49px;object-fit:contain} .home-v3-platform span{color:var(--hv3-heading);font-size:.74rem;font-weight:720;text-align:center} /* SERVICES */ .home-v3-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .home-v3-service-card{position:relative;overflow:hidden;min-height:276px;padding:25px;border:1px solid var(--hv3-border);border-radius:24px;background:var(--hv3-card);box-shadow:var(--hv3-shadow);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease} .home-v3-service-card::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--hv3-primary),var(--hv3-cyan),var(--hv3-purple));opacity:0;transition:opacity .2s ease} .home-v3-service-card:hover{transform:translateY(-5px);border-color:rgba(13,110,253,.25);box-shadow:0 20px 42px rgba(8,43,92,.11)} .home-v3-service-card:hover::after{opacity:1} .home-v3-service-card__icon{display:grid;place-items:center;width:49px;height:49px;margin-bottom:18px;border-radius:14px;background:linear-gradient(145deg,#eaf4ff,#f2efff);color:var(--hv3-primary);font-size:1.1rem} html[data-theme="dark"] .home-v3-service-card__icon{background:#182a43} .home-v3-service-card__tag{position:absolute;top:25px;right:24px;color:var(--hv3-muted);font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .home-v3-service-card h3{margin:0 0 10px;color:var(--hv3-heading);font-size:1.08rem;font-weight:780} .home-v3-service-card p{margin:0 0 19px;color:var(--hv3-text);font-size:.86rem;line-height:1.67} .home-v3-card-link{display:inline-flex;align-items:center;gap:7px;color:var(--hv3-primary);font-size:.78rem;font-weight:760} /* PLANS */ .home-v3-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px} .home-v3-plan{position:relative;display:flex;flex-direction:column;min-height:330px;padding:23px;border:1px solid var(--hv3-border);border-radius:21px;background:var(--hv3-card);box-shadow:0 9px 26px rgba(8,43,92,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .home-v3-plan:hover{transform:translateY(-4px);border-color:rgba(13,110,253,.28);box-shadow:0 18px 38px rgba(8,43,92,.1)} .home-v3-plan--featured{border-color:rgba(13,110,253,.42);background:linear-gradient(180deg,rgba(13,110,253,.055),var(--hv3-card) 34%)} .home-v3-plan__badge{position:absolute;top:0;right:19px;transform:translateY(-50%);padding:5px 10px;border-radius:999px;background:var(--hv3-primary);color:#fff;font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .home-v3-plan__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px} .home-v3-plan__top img{display:block;flex:0 0 auto;max-width:49px;max-height:44px;object-fit:contain} .home-v3-plan__top span{padding:5px 8px;border-radius:8px;background:var(--hv3-bg-soft);color:var(--hv3-muted);font-size:.6rem;font-weight:700} .home-v3-plan h3{margin:0 0 9px;color:var(--hv3-heading);font-size:1.02rem;font-weight:780} .home-v3-plan p{margin:0 0 22px;color:var(--hv3-text);font-size:.79rem;line-height:1.6} .home-v3-plan__price{margin-top:auto} .home-v3-plan__price small{display:block;margin-bottom:2px;color:var(--hv3-muted);font-size:.65rem} .home-v3-plan__price strong{color:var(--hv3-heading);font-size:1.85rem;font-weight:840} .home-v3-plan__price strong span{color:var(--hv3-muted);font-size:.7rem;font-weight:600} .home-v3-plan__cta{display:flex;align-items:center;justify-content:space-between;margin-top:17px;padding-top:15px;border-top:1px solid var(--hv3-border);color:var(--hv3-primary);font-size:.74rem;font-weight:750} .home-v3-center-action{margin-top:27px;text-align:center} /* COVERAGE */ .home-v3-coverage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px} .home-v3-coverage-card{padding:23px;border:1px solid var(--hv3-border);border-radius:20px;background:var(--hv3-card);box-shadow:0 8px 24px rgba(8,43,92,.05)} .home-v3-coverage-card__icon{display:grid;place-items:center;width:45px;height:45px;margin-bottom:16px;border-radius:13px;background:var(--hv3-bg-soft);color:var(--hv3-primary)} .home-v3-coverage-card h3{margin-bottom:13px;color:var(--hv3-heading);font-size:.98rem;font-weight:770} .home-v3-coverage-card ul{display:grid;gap:8px;margin:0;padding:0;list-style:none} .home-v3-coverage-card li{position:relative;padding-left:17px;color:var(--hv3-text);font-size:.75rem} .home-v3-coverage-card li::before{content:"";position:absolute;top:.53em;left:0;width:6px;height:6px;border-radius:50%;background:var(--hv3-primary)} /* DARK WHY */ .home-v3-dark{position:relative;overflow:hidden;padding:78px 0;background:radial-gradient(circle at 85% 20%,rgba(85,216,255,.10),transparent 25%),radial-gradient(circle at 15% 90%,rgba(120,98,232,.12),transparent 28%),#071426;color:#fff} .home-v3-dark__intro h2{margin:0 0 17px;color:#fff!important;font-size:clamp(2rem,3.5vw,3.1rem);font-weight:820;letter-spacing:-.04em;line-height:1.08} .home-v3-dark__intro p{margin-bottom:24px;color:#b9c9db;font-size:.94rem;line-height:1.72} .home-v3-why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px} .home-v3-why-card{padding:20px;border:1px solid rgba(255,255,255,.1);border-radius:17px;background:rgba(255,255,255,.045)} .home-v3-why-card i{margin-bottom:13px;color:#63ddff;font-size:1rem} .home-v3-why-card h3{margin-bottom:7px;color:#fff!important;font-size:.91rem;font-weight:760} .home-v3-why-card p{margin:0;color:#aebed0;font-size:.73rem;line-height:1.58} /* PROCESS */ .home-v3-process{display:grid;grid-template-columns:1fr 76px 1fr 76px 1fr;align-items:center} .home-v3-process__item{position:relative;min-height:235px;padding:25px 23px;border:1px solid var(--hv3-border);border-radius:20px;background:var(--hv3-card);box-shadow:0 8px 25px rgba(8,43,92,.05)} .home-v3-process__number{position:absolute;top:18px;right:20px;color:rgba(13,110,253,.12);font-size:2.4rem;font-weight:900;line-height:1} .home-v3-process__icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:21px;border-radius:14px;background:linear-gradient(145deg,#eaf4ff,#f0edff);color:var(--hv3-primary)} html[data-theme="dark"] .home-v3-process__icon{background:#192b43} .home-v3-process__item h3{margin-bottom:9px;color:var(--hv3-heading);font-size:.96rem;font-weight:780} .home-v3-process__item p{margin:0;color:var(--hv3-text);font-size:.77rem;line-height:1.65} .home-v3-process__line{height:1px;margin:0 13px;background:repeating-linear-gradient(90deg,var(--hv3-border) 0,var(--hv3-border) 7px,transparent 7px,transparent 13px)} /* OUTSOURCED SUPPORT */ .home-v3-outsource{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);gap:55px;align-items:center;padding:38px;border:1px solid var(--hv3-border);border-radius:27px;background:var(--hv3-card);box-shadow:var(--hv3-shadow)} .home-v3-outsource__content h2{margin:0 0 14px;color:var(--hv3-heading);font-size:clamp(2rem,3vw,2.65rem);font-weight:820;letter-spacing:-.04em} .home-v3-outsource__content>p{color:var(--hv3-text);line-height:1.7} .home-v3-outsource__features{display:grid;gap:9px;margin:23px 0} .home-v3-outsource__features a{display:flex;align-items:center;gap:13px;padding:12px 13px;border:1px solid var(--hv3-border);border-radius:13px;background:var(--hv3-bg-soft);transition:transform .18s ease,border-color .18s ease} .home-v3-outsource__features a:hover{transform:translateX(3px);border-color:rgba(13,110,253,.3)} .home-v3-outsource__features i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--hv3-card);color:var(--hv3-primary)} .home-v3-outsource__features strong,.home-v3-outsource__features small{display:block} .home-v3-outsource__features strong{margin-bottom:2px;color:var(--hv3-heading);font-size:.78rem} .home-v3-outsource__features small{color:var(--hv3-muted);font-size:.67rem} .home-v3-support-window{overflow:hidden;border:1px solid var(--hv3-border);border-radius:20px;background:var(--hv3-bg-soft);box-shadow:0 18px 45px rgba(8,43,92,.09)} .home-v3-support-window__bar{display:flex;align-items:center;gap:5px;padding:12px 14px;border-bottom:1px solid var(--hv3-border);background:var(--hv3-card)} .home-v3-support-window__bar>span{width:7px;height:7px;border-radius:50%;background:#d3dce8} .home-v3-support-window__bar small{margin-left:8px;color:var(--hv3-muted);font-size:.64rem;font-weight:700} .home-v3-support-ticket{display:grid;grid-template-columns:39px minmax(0,1fr) auto;gap:11px;align-items:center;margin:11px;padding:12px;border:1px solid var(--hv3-border);border-radius:13px;background:var(--hv3-card)} .home-v3-support-avatar{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;background:var(--hv3-bg-soft);color:var(--hv3-primary)} .home-v3-support-ticket strong,.home-v3-support-ticket span{display:block} .home-v3-support-ticket strong{margin-bottom:3px;color:var(--hv3-heading);font-size:.69rem} .home-v3-support-ticket span{color:var(--hv3-muted);font-size:.58rem} .home-v3-support-ticket>small{padding:5px 7px;border-radius:999px;font-size:.53rem;font-weight:800} .home-v3-status-green{background:#e8faf2;color:#10865a}.home-v3-status-blue{background:#eaf4ff;color:#0b61c7}.home-v3-status-purple{background:#f0edff;color:#6853cb} html[data-theme="dark"] .home-v3-status-green,html[data-theme="dark"] .home-v3-status-blue,html[data-theme="dark"] .home-v3-status-purple{background:#17283c} /* REVIEWS */ .home-v3-reviews{padding:76px 0;background:radial-gradient(circle at 82% 20%,rgba(85,216,255,.12),transparent 26%),linear-gradient(120deg,#08182d,#0a4b9e);color:#fff} .home-v3-reviews__intro h2{margin:0 0 14px;color:#fff!important;font-size:clamp(2rem,3.2vw,2.7rem);font-weight:820;letter-spacing:-.04em} .home-v3-reviews__intro>p{color:#c0d2e5;line-height:1.7} .home-v3-rating{display:flex;align-items:center;gap:12px;margin:22px 0}.home-v3-rating>strong{color:#fff;font-size:1.65rem;font-weight:830}.home-v3-rating span{display:block;margin-top:3px;color:#a9bfd6;font-size:.67rem} .home-v3-review-card{min-height:255px;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px)} .home-v3-review-card__stars{margin-bottom:16px;color:#ffce4a;font-size:.78rem} .home-v3-review-card>p{margin-bottom:21px;color:#edf6ff;font-size:.83rem;line-height:1.67} .home-v3-review-card__author{display:flex;align-items:center;gap:11px}.home-v3-review-card__author img{width:48px;height:48px;border:2px solid rgba(255,255,255,.2);border-radius:50%;object-fit:cover}.home-v3-review-card__author strong,.home-v3-review-card__author span{display:block}.home-v3-review-card__author strong{color:#fff;font-size:.75rem}.home-v3-review-card__author span{margin-top:2px;color:#aac1d8;font-size:.61rem} /* CLIENTS */ .home-v3-clients{padding:54px 0;background:var(--hv3-bg)} .home-v3-clients .home-v3-heading{margin-bottom:25px} .home-v3-client-logo{display:grid;place-items:center;min-height:87px;padding:13px;border:1px solid var(--hv3-border);border-radius:14px;background:var(--hv3-card)} .home-v3-client-logo img{width:135px;height:56px;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .18s ease,opacity .18s ease} .home-v3-client-logo:hover img{filter:grayscale(0);opacity:1} /* FAQ */ .home-v3-faq{display:grid;gap:10px;max-width:900px;margin:0 auto} .home-v3-faq .accordion-item{overflow:hidden;border:1px solid var(--hv3-border)!important;border-radius:14px!important;background:var(--hv3-card);box-shadow:0 5px 16px rgba(8,43,92,.035)} .home-v3-faq .accordion-button{padding:17px 19px;background:var(--hv3-card);color:var(--hv3-heading);font-size:.85rem;font-weight:720;box-shadow:none!important} .home-v3-faq .accordion-button:not(.collapsed){background:var(--hv3-bg-soft);color:var(--hv3-primary)} .home-v3-faq .accordion-body{padding:17px 19px;color:var(--hv3-text);font-size:.8rem;line-height:1.7} /* FINAL CTA */ .home-v3-final-cta{padding:38px 0;background:var(--hv3-bg)} .home-v3-final-cta__inner{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:35px;align-items:center;padding:37px 40px;border-radius:25px;background:radial-gradient(circle at 90% 20%,rgba(85,216,255,.18),transparent 26%),linear-gradient(110deg,#0b4eaa,#0d6efd 58%,#665ad8);color:#fff;box-shadow:0 18px 45px rgba(13,110,253,.18)} .home-v3-final-cta__eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;color:#bfeeff;font-size:.68rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase}.home-v3-final-cta__eyebrow i{color:#58e5a8;font-size:7px} .home-v3-final-cta h2{margin:0 0 9px;color:#fff!important;font-size:clamp(1.8rem,3vw,2.55rem);font-weight:820;letter-spacing:-.04em}.home-v3-final-cta p{max-width:760px;margin:0;color:rgba(238,247,255,.82);font-size:.85rem;line-height:1.65} .home-v3-final-cta__actions{display:grid;justify-items:center;gap:9px}.home-v3-final-cta__secondary{color:rgba(255,255,255,.83)!important;font-size:.7rem;font-weight:700} /* DARK-MODE CORRECTIONS */ html[data-theme="dark"] .home-v3-platform img, html[data-theme="dark"] .home-v3-plan__top img{filter:none} html[data-theme="dark"] .home-v3-process__number{color:rgba(94,213,255,.11)} /* RESPONSIVE */ @media(max-width:1199.98px){ .home-v3-platform-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .home-v3-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .home-v3-coverage-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:991.98px){ .home-v3-hero{padding:125px 0 65px} .home-v3-section{padding:62px 0} .home-v3-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .home-v3-heading--split{grid-template-columns:1fr;gap:12px} .home-v3-process{grid-template-columns:1fr;gap:12px} .home-v3-process__line{width:1px;height:22px;margin:0 auto;background:repeating-linear-gradient(180deg,var(--hv3-border) 0,var(--hv3-border) 6px,transparent 6px,transparent 11px)} .home-v3-outsource{grid-template-columns:1fr} .home-v3-final-cta__inner{grid-template-columns:1fr} .home-v3-final-cta__actions{justify-items:start} } @media(max-width:767.98px){ .home-v3-hero{padding:108px 0 52px} .home-v3-hero h1{font-size:clamp(2.35rem,11vw,3.4rem)} .home-v3-hero__actions{flex-direction:column;align-items:stretch}.home-v3-btn{width:100%} .home-v3-ops-card{padding:18px}.home-v3-ops-card__head,.home-v3-ops-footer{align-items:flex-start;flex-direction:column} .home-v3-trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-v3-trust__item:nth-child(3){border-top:1px solid var(--hv3-border);border-left:0}.home-v3-trust__item:nth-child(4){border-top:1px solid var(--hv3-border)} .home-v3-section{padding:50px 0}.home-v3-heading{margin-bottom:29px} .home-v3-platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .home-v3-service-grid,.home-v3-plan-grid,.home-v3-coverage-grid,.home-v3-why-grid{grid-template-columns:1fr} .home-v3-outsource{padding:22px 18px} .home-v3-support-ticket{grid-template-columns:38px minmax(0,1fr)}.home-v3-support-ticket>small{grid-column:2;justify-self:start} .home-v3-reviews{padding:54px 0} .home-v3-final-cta__inner{padding:27px 21px} } @media(max-width:479.98px){ .home-v3-ops-grid{grid-template-columns:1fr} .home-v3-trust__item strong{font-size:.93rem}.home-v3-trust__item span{font-size:.63rem} } @media(prefers-reduced-motion:reduce){.home-v3 a,.home-v3-service-card,.home-v3-plan,.home-v3-platform,.home-v3-client-logo img{transition:none!important}} /* ========================================================= TEAM + OWNER PROFILE Append once to assets/css/style.css Uses the same palette as the global service-page design. ========================================================= */ /* ========================================================= TEAM PAGE ========================================================= */ .team-page, .owner-profile-page { --tp-primary: var(--sp-primary, #0d6efd); --tp-primary-dark: var(--sp-primary-dark, #0b4eaa); --tp-cyan: var(--sp-cyan, #55d8ff); --tp-purple: var(--sp-purple, #7862e8); --tp-bg: var(--sp-bg, #ffffff); --tp-bg-soft: var(--sp-bg-soft, #f3f7fc); --tp-card: var(--sp-card, #ffffff); --tp-border: var(--sp-border, #d9e5f2); --tp-heading: var(--sp-heading, #0b2b52); --tp-text: var(--sp-text, #58697f); --tp-muted: var(--sp-muted, #7a899b); --tp-shadow: 0 12px 34px rgba(8, 43, 92, .08), 0 3px 10px rgba(8, 43, 92, .04); background: var(--tp-bg); color: var(--tp-text); } /* TEAM HERO */ .team-hero { position: relative; overflow: hidden; padding: 136px 0 72px; background: radial-gradient(circle at 84% 17%, rgba(85,216,255,.18), transparent 25%), radial-gradient(circle at 95% 90%, rgba(120,98,232,.18), transparent 28%), linear-gradient(120deg, #071a33 0%, #0b4eaa 52%, #0d6efd 100%); color: #fff; } .team-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent); } .team-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 55px; align-items: center; } .team-eyebrow, .owner-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 17px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(255,255,255,.08); color: #dceeff; font-size: .74rem; font-weight: 760; letter-spacing: .035em; } .team-hero h1 { margin: 0 0 18px; color: #fff !important; font-size: clamp(2.7rem, 5vw, 4.55rem); font-weight: 850; letter-spacing: -.055em; line-height: 1; } .team-hero h1 span { display: block; margin-top: 6px; background: linear-gradient(90deg,#fff,#8fe6ff 52%,#d8d3ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .team-hero__content > p { max-width: 720px; margin: 0; color: rgba(236,246,255,.83); font-size: 1rem; line-height: 1.72; } .team-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; } .team-hero__chips span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.065); color: #e7f3ff; font-size: .7rem; font-weight: 680; } .team-hero__chips i { color: #73e2ff; } .team-hero__summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 18px; border: 1px solid rgba(255,255,255,.17); border-radius: 22px; background: rgba(255,255,255,.08); box-shadow: 0 24px 60px rgba(3,18,38,.22); backdrop-filter: blur(18px); } .team-summary-card { display: flex; align-items: center; gap: 10px; min-height: 102px; padding: 13px; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(4,20,42,.18); } .team-summary-card__icon { display: grid; place-items: center; flex: 0 0 auto; width: 37px; height: 37px; border-radius: 11px; background: rgba(85,216,255,.1); color: #69dfff; } .team-summary-card small, .team-summary-card strong { display: block; } .team-summary-card small { margin-bottom: 3px; color: #aec5da; font-size: .59rem; } .team-summary-card strong { color: #fff; font-size: .76rem; line-height: 1.3; } /* TEAM SECTION */ .team-section, .owner-section { padding: 68px 0; background: var(--tp-bg); } .team-section--soft, .owner-section--soft { background: var(--tp-bg-soft); } .team-section-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.7fr); gap: 35px; align-items: end; margin-bottom: 31px; } .team-section-heading--center { display: block; max-width: 780px; margin: 0 auto 31px; text-align: center; } .team-section-heading__eyebrow, .owner-section-eyebrow { display: inline-block; margin-bottom: 8px; color: var(--tp-primary); font-size: .72rem; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; } .team-section-heading h2, .owner-section-heading h2, .owner-about-grid__main h2, .owner-contact h2 { margin: 0; color: var(--tp-heading); font-size: clamp(2rem,3vw,2.8rem); font-weight: 820; letter-spacing: -.04em; line-height: 1.1; } .team-section-heading p { margin: 0; color: var(--tp-text); font-size: .88rem; line-height: 1.7; } /* LEADERSHIP — FOUR ACROSS ON DESKTOP */ .leadership-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; } .leadership-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--tp-border); border-radius: 20px; background: var(--tp-card); box-shadow: var(--tp-shadow); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .leadership-card:hover { transform: translateY(-5px); border-color: rgba(13,110,253,.3); box-shadow: 0 19px 42px rgba(8,43,92,.12); } .leadership-card--owner { border-color: rgba(13,110,253,.38); background: linear-gradient(180deg,rgba(13,110,253,.055),var(--tp-card) 34%); } .leadership-card__profile { display: block; flex: 1; color: inherit !important; } .leadership-card__image { position: relative; overflow: hidden; aspect-ratio: 4 / 4.65; background: var(--tp-bg-soft); } .leadership-card__image::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(to top,rgba(4,17,35,.22),transparent); pointer-events: none; } .leadership-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .3s ease; } .leadership-card:hover .leadership-card__image img { transform: scale(1.025); } .leadership-card__owner-badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; background: linear-gradient(90deg,#0b4eaa,#0d6efd); color: #fff; font-size: .58rem; font-weight: 820; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(13,110,253,.2); } .leadership-card__body { padding: 19px 18px 15px; } .leadership-card__role { display: block; margin-bottom: 5px; color: var(--tp-primary); font-size: .62rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; } .leadership-card__body h3 { margin: 0 0 8px; color: var(--tp-heading); font-size: 1rem; font-weight: 800; } .leadership-card__body p { min-height: 64px; margin: 0 0 13px; color: var(--tp-text); font-size: .72rem; line-height: 1.55; } .leadership-card__view { display: inline-flex; align-items: center; gap: 6px; color: var(--tp-primary); font-size: .68rem; font-weight: 760; } .leadership-card__social { display: flex; gap: 6px; padding: 0 18px 17px; } .leadership-card__social a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--tp-border); border-radius: 9px; background: var(--tp-bg-soft); color: var(--tp-primary) !important; font-size: .72rem; transition: transform .18s ease, background .18s ease, color .18s ease; } .leadership-card__social a:hover { transform: translateY(-2px); background: var(--tp-primary); color: #fff !important; } /* BACKBONE */ .team-backbone { max-width: 1060px; margin: 0 auto; } .team-backbone__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 8.1; border: 1px solid var(--tp-border); border-radius: 22px; background: #071426; box-shadow: var(--tp-shadow); } .team-backbone__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .45s ease; } .team-backbone__slide.is-active { opacity: 1; } .team-backbone__slide img { width: 100%; height: 100%; object-fit: cover; } .team-backbone__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(4,17,35,.6); color: #fff; backdrop-filter: blur(8px); } .team-backbone__nav--prev { left: 16px; } .team-backbone__nav--next { right: 16px; } .team-backbone__thumbs { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 7px; margin-top: 11px; } .team-backbone__thumb { overflow: hidden; padding: 0; aspect-ratio: 1.5; border: 2px solid transparent; border-radius: 9px; background: var(--tp-card); opacity: .68; transition: opacity .18s ease, border-color .18s ease; } .team-backbone__thumb.is-active { border-color: var(--tp-primary); opacity: 1; } .team-backbone__thumb img { width: 100%; height: 100%; object-fit: cover; } /* TEAM CTA */ .team-cta { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 29px 31px; border-radius: 22px; background: radial-gradient(circle at 90% 15%,rgba(85,216,255,.15),transparent 25%), linear-gradient(110deg,#0b4eaa,#0d6efd 60%,#665ad8); box-shadow: 0 16px 38px rgba(13,110,253,.17); } .team-cta__icon { display: grid; place-items: center; width: 53px; height: 53px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(255,255,255,.11); color: #fff; } .team-cta span { display: block; margin-bottom: 3px; color: #bdefff; font-size: .62rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; } .team-cta h2 { margin: 0 0 5px; color: #fff !important; font-size: 1.45rem; font-weight: 810; } .team-cta p { margin: 0; color: rgba(239,247,255,.78); font-size: .75rem; } .team-cta__button { display: inline-flex; align-items: center; gap: 8px; min-height: 45px; padding: 11px 16px; border-radius: 11px; background: #fff; color: #0b4eaa !important; font-size: .75rem; font-weight: 780; } /* ========================================================= OWNER PROFILE ========================================================= */ .owner-hero { position: relative; overflow: hidden; padding: 128px 0 72px; background: radial-gradient(circle at 82% 16%,rgba(85,216,255,.18),transparent 23%), radial-gradient(circle at 97% 90%,rgba(120,98,232,.18),transparent 27%), linear-gradient(120deg,#071a33 0%,#0b4eaa 54%,#0d6efd 100%); color: #fff; } .owner-hero__inner { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(330px,.68fr); gap: 58px; align-items: center; } .owner-hero h1 { margin: 0 0 17px; color: #fff !important; font-size: clamp(3rem,6vw,5.15rem); font-weight: 860; letter-spacing: -.06em; line-height: .96; } .owner-hero__lead { max-width: 700px; margin: 0; color: rgba(236,246,255,.84); font-size: 1.03rem; line-height: 1.72; } .owner-hero__credentials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .owner-hero__credentials span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.065); color: #eaf5ff; font-size: .68rem; font-weight: 700; } .owner-hero__credentials i { color: #70e1ff; } .owner-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .owner-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 47px; padding: 11px 17px; border: 1px solid transparent; border-radius: 11px; font-size: .77rem; font-weight: 780; } .owner-button--primary { background: #fff; color: #0b4eaa !important; } .owner-button--secondary { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.07); color: #fff !important; } .owner-portrait-frame { position: relative; overflow: hidden; max-width: 430px; margin-left: auto; border: 1px solid rgba(255,255,255,.18); border-radius: 27px; background: rgba(255,255,255,.08); box-shadow: 0 27px 65px rgba(3,18,38,.28); } .owner-portrait-frame img { display: block; width: 100%; aspect-ratio: 4 / 4.8; object-fit: cover; object-position: center top; } .owner-portrait-frame__caption { position: absolute; right: 13px; bottom: 13px; left: 13px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(4,17,35,.67); backdrop-filter: blur(12px); } .owner-portrait-frame__caption small, .owner-portrait-frame__caption strong { display: block; } .owner-portrait-frame__caption small { margin-bottom: 2px; color: #b7d4e9; font-size: .6rem; } .owner-portrait-frame__caption strong { color: #fff; font-size: .82rem; } /* OWNER ABOUT */ .owner-about-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,.55fr); gap: 45px; align-items: start; } .owner-about-grid__main h2 { max-width: 780px; margin-bottom: 18px; } .owner-about-grid__main p { margin: 0 0 14px; color: var(--tp-text); font-size: .88rem; line-height: 1.78; } .owner-facts { display: grid; gap: 9px; } .owner-fact { padding: 16px 17px; border: 1px solid var(--tp-border); border-radius: 14px; background: var(--tp-card); box-shadow: 0 6px 18px rgba(8,43,92,.045); } .owner-fact span, .owner-fact strong { display: block; } .owner-fact span { margin-bottom: 3px; color: var(--tp-muted); font-size: .61rem; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; } .owner-fact strong { color: var(--tp-heading); font-size: .83rem; } /* OWNER SECTION HEADING */ .owner-section-heading { max-width: 760px; margin: 0 auto 30px; text-align: center; } .owner-section-heading h2 { margin-bottom: 10px; } .owner-section-heading p { margin: 0 auto; color: var(--tp-text); font-size: .85rem; line-height: 1.7; } /* EXPERTISE */ .owner-expertise-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; } .owner-expertise-card { padding: 21px; border: 1px solid var(--tp-border); border-radius: 18px; background: var(--tp-card); box-shadow: var(--tp-shadow); } .owner-expertise-card__icon, .owner-credential__icon { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 14px; border-radius: 12px; background: linear-gradient(145deg,#eaf4ff,#f0edff); color: var(--tp-primary); } html[data-theme="dark"] .owner-expertise-card__icon, html[data-theme="dark"] .owner-credential__icon { background: #192a42; } .owner-expertise-card h3 { margin: 0 0 8px; color: var(--tp-heading); font-size: .9rem; font-weight: 790; } .owner-expertise-card p { margin: 0; color: var(--tp-text); font-size: .72rem; line-height: 1.62; } /* CREDENTIALS */ .owner-credential-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; max-width: 980px; margin: 0 auto; } .owner-credential { display: flex; align-items: flex-start; gap: 13px; padding: 20px; border: 1px solid var(--tp-border); border-radius: 17px; background: var(--tp-card); box-shadow: 0 8px 24px rgba(8,43,92,.055); } .owner-credential__icon { flex: 0 0 auto; margin: 0; } .owner-credential h3 { margin: 0 0 6px; color: var(--tp-heading); font-size: .82rem; font-weight: 790; } .owner-credential p { margin: 0; color: var(--tp-text); font-size: .68rem; line-height: 1.57; } /* COMPANIES */ .owner-company-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; } .owner-company-card { display: flex; align-items: center; gap: 11px; min-height: 92px; padding: 17px; border: 1px solid var(--tp-border); border-radius: 15px; background: var(--tp-card); box-shadow: 0 7px 20px rgba(8,43,92,.04); } .owner-company-card i { color: var(--tp-primary); } .owner-company-card strong { color: var(--tp-heading); font-size: .75rem; line-height: 1.45; } /* CONTACT */ .owner-contact { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 35px; align-items: center; padding: 31px; border: 1px solid var(--tp-border); border-radius: 22px; background: var(--tp-card); box-shadow: var(--tp-shadow); } .owner-contact h2 { margin-bottom: 8px; } .owner-contact__content > p { max-width: 680px; color: var(--tp-text); font-size: .79rem; line-height: 1.65; } .owner-contact__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .owner-contact__links > a { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--tp-border); border-radius: 11px; background: var(--tp-bg-soft); color: var(--tp-heading) !important; } .owner-contact__links > a > i { color: var(--tp-primary); } .owner-contact__links small, .owner-contact__links strong { display: block; } .owner-contact__links small { color: var(--tp-muted); font-size: .54rem; } .owner-contact__links strong { font-size: .66rem; } .owner-contact__social { display: grid; gap: 8px; min-width: 170px; } .owner-contact__social a { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 9px 12px; border-radius: 10px; background: var(--tp-bg-soft); color: var(--tp-heading) !important; font-size: .68rem; font-weight: 740; } .owner-contact__social i { color: var(--tp-primary); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1199.98px) { .leadership-grid, .owner-expertise-grid, .owner-company-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 991.98px) { .team-hero, .owner-hero { padding-top: 118px; } .team-hero__inner, .owner-hero__inner, .owner-about-grid { grid-template-columns: 1fr; } .team-hero__summary { max-width: 700px; } .owner-portrait-frame { margin: 0; } .owner-credential-list { grid-template-columns: 1fr; } .owner-contact { grid-template-columns: 1fr; } .owner-contact__social { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width: 767.98px) { .team-hero, .owner-hero { padding: 103px 0 48px; } .team-section, .owner-section { padding: 48px 0; } .team-section-heading { grid-template-columns: 1fr; gap: 10px; } .leadership-grid, .owner-expertise-grid, .owner-company-grid { grid-template-columns: 1fr; } .team-hero__summary { grid-template-columns: 1fr; } .team-summary-card { min-height: 82px; } .leadership-card__body p { min-height: 0; } .team-backbone__stage { aspect-ratio: 4 / 3; } .team-backbone__thumbs { grid-template-columns: repeat(5,minmax(0,1fr)); } .team-cta { grid-template-columns: 1fr; } .owner-hero__actions { flex-direction: column; align-items: stretch; } .owner-button { width: 100%; } .owner-contact { padding: 22px 18px; } .owner-contact__links { display: grid; } .owner-contact__social { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .leadership-card, .leadership-card__image img, .team-backbone__slide { transition: none !important; } } /* ========================================================= 24x7ServerSupport - LIQUID GLASS HEADER + MEGA MENU Append ONCE to assets/css/style.css Requires the matching updated header.php. ========================================================= */ :root { --lm-primary: #0d6efd; --lm-primary-dark: #0b4eaa; --lm-cyan: #55d8ff; --lm-purple: #7862e8; --lm-nav-bg: rgba(5, 22, 46, .72); --lm-nav-bg-scrolled: rgba(5, 22, 46, .91); --lm-menu-bg: rgba(250, 252, 255, .94); --lm-menu-card: rgba(255, 255, 255, .72); --lm-menu-card-hover: rgba(239, 247, 255, .94); --lm-menu-border: rgba(17, 67, 127, .13); --lm-heading: #0b2b52; --lm-text: #5d6e83; --lm-muted: #8593a5; } html[data-theme="dark"] { --lm-menu-bg: rgba(12, 24, 42, .95); --lm-menu-card: rgba(18, 32, 53, .78); --lm-menu-card-hover: rgba(25, 44, 70, .96); --lm-menu-border: rgba(148, 163, 184, .17); --lm-heading: #f1f5f9; --lm-text: #cbd5e1; --lm-muted: #94a3b8; } /* --------------------------------------------------------- Floating liquid-glass navbar shell --------------------------------------------------------- */ #logoAndNav.liquid-header-shell { padding: 10px 0 0; background: transparent !important; transition: padding .22s ease, background .22s ease; } #logoAndNav .liquid-navbar { position: relative; min-height: 68px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 18px; background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035) ), var(--lm-nav-bg); box-shadow: 0 12px 34px rgba(1, 11, 26, .16), inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); transition: min-height .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, border-radius .22s ease; } #logoAndNav .liquid-navbar::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at 14% 0%, rgba(85, 216, 255, .13), transparent 29% ), radial-gradient(circle at 91% 100%, rgba(120, 98, 232, .13), transparent 27% ); } #logoAndNav.is-scrolled { padding-top: 5px; } #logoAndNav.is-scrolled .liquid-navbar { min-height: 62px; border-color: rgba(255, 255, 255, .11); border-radius: 15px; background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025) ), var(--lm-nav-bg-scrolled); box-shadow: 0 14px 34px rgba(1, 11, 26, .24), inset 0 1px 0 rgba(255, 255, 255, .09); } /* Logo */ .liquid-navbar-brand { position: relative; z-index: 2; display: inline-flex; align-items: center; margin-right: 17px; } .liquid-navbar-brand img { width: 192px; height: auto; object-fit: contain; transition: width .2s ease; } #logoAndNav.is-scrolled .liquid-navbar-brand img { width: 178px; } /* --------------------------------------------------------- Top-level desktop navigation --------------------------------------------------------- */ .liquid-main-nav { position: relative; z-index: 3; align-items: center; gap: 3px; } .liquid-main-nav > .nav-item { position: relative; } .liquid-main-nav > .nav-item > .nav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 9px 10px !important; border: 1px solid transparent; border-radius: 12px; color: rgba(241, 247, 255, .84) !important; font-size: .76rem; font-weight: 700; letter-spacing: .005em; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .liquid-main-nav > .nav-item > .nav-link::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 9px; background: radial-gradient(circle at 25% 0%, rgba(255, 255, 255, .13), transparent 48% ); opacity: 0; transition: opacity .18s ease; } .liquid-main-nav > .nav-item:hover > .nav-link, .liquid-main-nav > .nav-item > .nav-link[aria-expanded="true"], .liquid-main-nav > .nav-item > .nav-link.is-section-current { border-color: rgba(255, 255, 255, .13); background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .055) ); color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 5px 14px rgba(0, 0, 0, .08); } .liquid-main-nav > .nav-item:hover > .nav-link::before, .liquid-main-nav > .nav-item > .nav-link[aria-expanded="true"]::before, .liquid-main-nav > .nav-item > .nav-link.is-section-current::before { opacity: 1; } .liquid-nav-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .075); color: #81e4ff; font-size: .66rem; } .liquid-main-nav > .nav-item:hover .liquid-nav-icon, .liquid-main-nav > .nav-item > .nav-link[aria-expanded="true"] .liquid-nav-icon, .liquid-main-nav > .nav-item > .nav-link.is-section-current .liquid-nav-icon { background: rgba(85, 216, 255, .14); color: #a4edff; } /* --------------------------------------------------------- Theme toggle --------------------------------------------------------- */ .liquid-theme-toggle { position: relative; z-index: 3; flex: 0 0 auto; display: grid !important; place-items: center; width: 40px; height: 40px; margin-left: 7px; border: 1px solid rgba(255, 255, 255, .13) !important; border-radius: 12px !important; background: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045) ) !important; color: #dff5ff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .18s ease, background .18s ease; } .liquid-theme-toggle:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .16) !important; } /* --------------------------------------------------------- Desktop mega-menu: floating liquid-glass panel --------------------------------------------------------- */ .liquid-navbar .liquid-mega-menu { overflow: hidden auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 98px); padding: 10px 10px 13px !important; border: 1px solid var(--lm-menu-border) !important; border-radius: 23px !important; background: radial-gradient(circle at 7% 0%, rgba(85, 216, 255, .105), transparent 25% ), radial-gradient(circle at 96% 100%, rgba(120, 98, 232, .09), transparent 28% ), var(--lm-menu-bg) !important; box-shadow: 0 28px 70px rgba(5, 26, 55, .20), 0 7px 20px rgba(5, 26, 55, .08), inset 0 1px 0 rgba(255, 255, 255, .6) !important; -webkit-backdrop-filter: blur(30px) saturate(1.32); backdrop-filter: blur(30px) saturate(1.32); scrollbar-width: thin; scrollbar-color: rgba(13, 110, 253, .28) transparent; } html[data-theme="dark"] .liquid-navbar .liquid-mega-menu { box-shadow: 0 28px 70px rgba(0, 0, 0, .42), 0 7px 20px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .05) !important; } .liquid-mega-menu--cloud, .liquid-mega-menu--outsource, .liquid-mega-menu--server, .liquid-mega-menu--company, .liquid-mega-menu--support { width: min(920px, calc(100vw - 32px)) !important; } .liquid-mega-menu--services { width: min(1040px, calc(100vw - 32px)) !important; } .liquid-mega-menu--management { width: min(1180px, calc(100vw - 32px)) !important; } /* Mega header */ .liquid-mega-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 3px 8px; padding: 14px 16px; border: 1px solid var(--lm-menu-border); border-radius: 16px; background: linear-gradient(110deg, rgba(13, 110, 253, .075), rgba(85, 216, 255, .035) 48%, rgba(120, 98, 232, .055) ); } .liquid-mega-header > div { min-width: 0; } .liquid-mega-header__eyebrow { display: block; margin-bottom: 2px; color: var(--lm-primary); font-size: .56rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .liquid-mega-header strong { display: block; margin-bottom: 2px; color: var(--lm-heading); font-size: .91rem; font-weight: 820; } .liquid-mega-header small { display: block; color: var(--lm-text); font-size: .65rem; line-height: 1.45; } .liquid-mega-header__badge { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(13, 110, 253, .13); border-radius: 999px; background: rgba(13, 110, 253, .08); color: var(--lm-primary); font-size: .56rem; font-weight: 800; white-space: nowrap; } /* Mega columns */ .liquid-mega-grid > [class*="col-"] { position: relative; } .liquid-mega-grid > [class*="col-"] + [class*="col-"]::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 0; width: 1px; background: var(--lm-menu-border); } .liquid-navbar .liquid-mega-menu .menu-item-wrap { padding: 5px !important; } /* Mega cards */ .liquid-navbar .liquid-menu-card { margin: 3px 0; } .liquid-navbar .liquid-menu-link { position: relative; display: block; padding: 9px 10px; border: 1px solid transparent; border-radius: 14px; background: transparent; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .liquid-navbar .liquid-menu-link::after { content: "\f061"; position: absolute; top: 50%; right: 11px; transform: translate(-4px, -50%); color: var(--lm-primary); font-family: "Font Awesome 5 Free"; font-size: .58rem; font-weight: 900; opacity: 0; transition: opacity .18s ease, transform .18s ease; } .liquid-navbar .liquid-menu-link:hover, .liquid-navbar .liquid-menu-link.is-current { transform: translateY(-1px); border-color: var(--lm-menu-border); background: linear-gradient(135deg, rgba(255, 255, 255, .50), rgba(255, 255, 255, .20) ), var(--lm-menu-card-hover); box-shadow: 0 8px 20px rgba(8, 43, 92, .07); } html[data-theme="dark"] .liquid-navbar .liquid-menu-link:hover, html[data-theme="dark"] .liquid-navbar .liquid-menu-link.is-current { background: var(--lm-menu-card-hover); } .liquid-navbar .liquid-menu-link:hover::after, .liquid-navbar .liquid-menu-link.is-current::after { transform: translate(0, -50%); opacity: .9; } /* Icon tile */ .liquid-navbar .liquid-menu-link > .d-flex { align-items: center !important; } .liquid-navbar .liquid-menu-icon { flex: 0 0 auto; display: grid; place-items: center; width: 47px; height: 47px; margin-right: 11px; padding: 0 !important; border: 1px solid rgba(13, 110, 253, .09); border-radius: 13px; background: linear-gradient(145deg, rgba(234, 244, 255, .95), rgba(244, 240, 255, .90) ); transition: transform .18s ease, box-shadow .18s ease; } html[data-theme="dark"] .liquid-navbar .liquid-menu-icon { border-color: rgba(148, 163, 184, .12); background: linear-gradient(145deg, rgba(25, 45, 70, .95), rgba(29, 37, 66, .90) ); } .liquid-navbar .liquid-menu-link:hover .liquid-menu-icon { transform: scale(1.035); box-shadow: 0 5px 13px rgba(13, 110, 253, .10); } .liquid-navbar .liquid-menu-icon img { width: auto !important; height: auto !important; max-width: 34px !important; max-height: 34px !important; object-fit: contain; } /* Text */ .liquid-navbar .liquid-menu-copy { min-width: 0; padding-right: 18px; } .liquid-navbar .u-header__promo-title { display: block; margin-bottom: 2px; color: var(--lm-heading) !important; font-size: .72rem !important; font-weight: 790 !important; line-height: 1.3; } .liquid-navbar .u-header__promo-text { display: -webkit-box; overflow: hidden; color: var(--lm-text) !important; font-size: .61rem !important; line-height: 1.42 !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .liquid-navbar .u-header__promo-text strong { color: var(--lm-primary) !important; font-size: .59rem; font-weight: 800; } /* --------------------------------------------------------- Desktop width safety --------------------------------------------------------- */ @media (min-width: 992px) and (max-width: 1199.98px) { .liquid-navbar-brand img { width: 160px; } .liquid-main-nav { gap: 1px; } .liquid-main-nav > .nav-item > .nav-link { gap: 5px; padding-right: 7px !important; padding-left: 7px !important; font-size: .69rem; } .liquid-nav-icon { display: none; } } /* --------------------------------------------------------- Mobile / tablet offcanvas --------------------------------------------------------- */ @media (max-width: 991.98px) { #logoAndNav.liquid-header-shell { padding: 7px 10px 0; } #logoAndNav .container { max-width: none; padding: 0; } #logoAndNav .liquid-navbar { min-height: 62px; padding: 6px 9px; border-radius: 15px; } .liquid-navbar-brand img, #logoAndNav.is-scrolled .liquid-navbar-brand img { width: 174px; } #logoAndNav .navbar-toggler { position: relative; z-index: 4; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #ffffff; } #logoAndNav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(85, 216, 255, .14); } .liquid-theme-toggle { margin-left: auto; margin-right: 7px; } /* Offcanvas */ .liquid-offcanvas { width: min(92vw, 430px) !important; border-right: 1px solid rgba(13, 110, 253, .12); background: radial-gradient(circle at 0 0, rgba(85, 216, 255, .10), transparent 24% ), var(--lm-menu-bg) !important; color: var(--lm-text); -webkit-backdrop-filter: blur(28px) saturate(1.22); backdrop-filter: blur(28px) saturate(1.22); } .liquid-offcanvas .offcanvas-header { min-height: 72px; padding: 12px 15px; border-color: var(--lm-menu-border) !important; background: linear-gradient(110deg, rgba(13, 110, 253, .08), transparent ); } .liquid-offcanvas .navbar-brand img { max-width: 190px; max-height: 48px; object-fit: contain; } .liquid-offcanvas .btn-close { border-radius: 10px; background-color: rgba(13, 110, 253, .07); opacity: .75; } html[data-theme="dark"] .liquid-offcanvas .btn-close { filter: invert(1); } .liquid-offcanvas-body { padding: 12px !important; } .liquid-offcanvas-body > .navbar-nav { gap: 7px; } .liquid-offcanvas-body > .navbar-nav > .nav-item { overflow: hidden; border: 1px solid var(--lm-menu-border); border-radius: 14px; background: var(--lm-menu-card); } .liquid-offcanvas-body > .navbar-nav > .nav-item > .nav-link { display: flex; align-items: center; justify-content: space-between; min-height: 47px; padding: 11px 13px; color: var(--lm-heading) !important; font-size: .78rem; font-weight: 780; } .liquid-offcanvas-body .dropdown-menu { position: static !important; float: none !important; transform: none !important; width: 100%; margin: 0; padding: 5px 7px 9px !important; border: 0 !important; border-top: 1px solid var(--lm-menu-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .liquid-offcanvas-body .dropdown-menu .row { display: block; } .liquid-offcanvas-body .dropdown-menu [class*="col-"] { width: 100%; max-width: none; } .liquid-offcanvas-body .menu-item-wrap { padding: 0 !important; } .liquid-offcanvas-body .liquid-menu-card { margin: 4px 0; } .liquid-offcanvas-body .liquid-menu-link { display: block; padding: 8px 9px; border: 1px solid transparent; border-radius: 11px; transition: background .18s ease, border-color .18s ease; } .liquid-offcanvas-body .liquid-menu-link:hover, .liquid-offcanvas-body .liquid-menu-link.is-current { border-color: var(--lm-menu-border); background: var(--lm-menu-card-hover); } .liquid-offcanvas-body .liquid-menu-link > .d-flex { align-items: center !important; } .liquid-offcanvas-body .liquid-menu-icon { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; margin-right: 10px; padding: 0 !important; border: 1px solid var(--lm-menu-border); border-radius: 11px; background: var(--lm-menu-card); } .liquid-offcanvas-body .liquid-menu-icon img { width: auto !important; height: auto !important; max-width: 31px !important; max-height: 31px !important; object-fit: contain; } .liquid-offcanvas-body .u-header__promo-title { display: block; margin-bottom: 2px; color: var(--lm-heading) !important; font-size: .7rem !important; font-weight: 780 !important; } .liquid-offcanvas-body .u-header__promo-text { display: block; color: var(--lm-text) !important; font-size: .59rem !important; line-height: 1.4 !important; } .liquid-offcanvas-body .u-header__promo-text strong { color: var(--lm-primary) !important; } } /* --------------------------------------------------------- Small phones --------------------------------------------------------- */ @media (max-width: 479.98px) { .liquid-navbar-brand img, #logoAndNav.is-scrolled .liquid-navbar-brand img { width: 150px; } .liquid-theme-toggle, #logoAndNav .navbar-toggler { width: 39px; height: 39px; } } /* --------------------------------------------------------- Reduced motion --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #logoAndNav .liquid-navbar, .liquid-main-nav > .nav-item > .nav-link, .liquid-navbar .liquid-menu-link, .liquid-navbar .liquid-menu-icon { transition: none !important; } } /* ========================================================= SERVER HOSTING PLAN TABLES V2 Shared by: - VPS Servers - Dedicated Servers - Windows VPS / Forex VPS Add ONCE to assets/css/style.css ========================================================= */ .server-plans-v2 { --svp-primary: var(--sp-primary, #0d6efd); --svp-primary-dark: var(--sp-primary-dark, #0b4eaa); --svp-cyan: var(--sp-cyan, #55d8ff); --svp-purple: var(--sp-purple, #7862e8); --svp-bg: var(--sp-bg, #ffffff); --svp-soft: var(--sp-bg-soft, #f3f7fc); --svp-card: var(--sp-card, #ffffff); --svp-border: var(--sp-border, #d9e5f2); --svp-heading: var(--sp-heading, #0b2b52); --svp-text: var(--sp-text, #58697f); --svp-muted: var(--sp-muted, #7a899b); --svp-shadow: 0 12px 32px rgba(8,43,92,.07), 0 3px 10px rgba(8,43,92,.035); } .server-plans-v2__heading { max-width: 790px; } .server-plans-v2__quick-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-width: 980px; margin: 0 auto 21px; } .server-plans-v2__summary { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 88px; padding: 13px 15px; border: 1px solid var(--svp-border); border-radius: 16px; background: var(--svp-card); text-align: left; box-shadow: 0 6px 18px rgba(8,43,92,.04); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; } .server-plans-v2__summary:hover, .server-plans-v2__summary.is-active { transform: translateY(-2px); border-color: rgba(13,110,253,.33); background: linear-gradient(135deg,rgba(13,110,253,.045),rgba(85,216,255,.025)), var(--svp-card); box-shadow: 0 11px 25px rgba(8,43,92,.075); } .server-plans-v2__summary-icon { display: grid; place-items: center; flex: 0 0 auto; width: 43px; height: 43px; border-radius: 13px; background: linear-gradient(145deg,#eaf4ff,#f1efff); color: var(--svp-primary); } html[data-theme="dark"] .server-plans-v2__summary-icon { background: #192b43; } .server-plans-v2__summary-copy { min-width: 0; } .server-plans-v2__summary-copy small, .server-plans-v2__summary-copy strong, .server-plans-v2__summary-copy em { display: block; } .server-plans-v2__summary-copy small { margin-bottom: 1px; color: var(--svp-muted); font-size: .6rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; } .server-plans-v2__summary-copy strong { margin-bottom: 2px; color: var(--svp-heading); font-size: 1.05rem; font-weight: 830; } .server-plans-v2__summary-copy em { overflow: hidden; color: var(--svp-text); font-size: .65rem; font-style: normal; white-space: nowrap; text-overflow: ellipsis; } /* Main shell */ .server-plans-v2__shell { overflow: hidden; border: 1px solid var(--svp-border); border-radius: 22px; background: var(--svp-card); box-shadow: var(--svp-shadow); } .server-plans-v2__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px; border-bottom: 1px solid var(--svp-border); background: linear-gradient(110deg,rgba(13,110,253,.045),rgba(85,216,255,.02)), var(--svp-soft); } .server-plans-v2__tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid var(--svp-border); border-radius: 13px; background: var(--svp-card); } .server-plans-v2__tab { display: inline-flex; align-items: center; gap: 8px; min-height: 37px; padding: 7px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--svp-text); font-size: .69rem; font-weight: 750; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .server-plans-v2__tab small { padding: 3px 6px; border-radius: 999px; background: var(--svp-soft); color: var(--svp-muted); font-size: .53rem; } .server-plans-v2__tab.is-active { background: linear-gradient(100deg,var(--svp-primary-dark),var(--svp-primary)); color: #fff; box-shadow: 0 7px 15px rgba(13,110,253,.18); } .server-plans-v2__tab.is-active small { background: rgba(255,255,255,.15); color: #eaf6ff; } .server-plans-v2__toolbar-note { display: inline-flex; align-items: center; gap: 7px; color: var(--svp-muted); font-size: .62rem; line-height: 1.4; } .server-plans-v2__toolbar-note i { color: var(--svp-primary); } /* Panel */ .server-plans-v2__panel { padding: 18px; } .server-plans-v2__panel[hidden] { display: none !important; } .server-plans-v2__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 13px; padding: 0 2px; } .server-plans-v2__panel-eyebrow { display: block; margin-bottom: 2px; color: var(--svp-primary); font-size: .55rem; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; } .server-plans-v2__panel-head h3 { margin: 0; color: var(--svp-heading); font-size: 1rem; font-weight: 820; } .server-plans-v2__meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .server-plans-v2__meta span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--svp-border); border-radius: 999px; background: var(--svp-soft); color: var(--svp-text); font-size: .56rem; font-weight: 690; } .server-plans-v2__meta i { color: var(--svp-primary); } /* Desktop table */ .server-plans-v2__table-wrap { overflow: auto; border: 1px solid var(--svp-border); border-radius: 15px; background: var(--svp-card); scrollbar-width: thin; scrollbar-color: rgba(13,110,253,.25) transparent; } .server-plans-v2__table { width: 100%; min-width: 820px; margin: 0; border-collapse: separate; border-spacing: 0; color: var(--svp-text); font-size: .69rem; } .server-plans-v2__table thead { position: sticky; top: 0; z-index: 3; } .server-plans-v2__table th { padding: 12px 11px; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); background: linear-gradient(100deg,#0b4eaa,#0d6efd 68%,#6359dc); color: #fff; font-size: .57rem; font-weight: 820; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; } .server-plans-v2__table th:first-child { border-radius: 13px 0 0 0; text-align: left; } .server-plans-v2__table th:last-child { border-radius: 0 13px 0 0; } .server-plans-v2__table td { padding: 11px; border: 0; border-bottom: 1px solid var(--svp-border); background: var(--svp-card); color: var(--svp-text); vertical-align: middle; text-align: center; } .server-plans-v2__table td:first-child { text-align: left; } .server-plans-v2__table tbody tr:nth-child(even) td { background: color-mix(in srgb,var(--svp-soft) 58%,var(--svp-card)); } .server-plans-v2__table tbody tr:last-child td { border-bottom: 0; } .server-plans-v2__table tbody tr { transition: transform .16s ease, box-shadow .16s ease; } .server-plans-v2__table tbody tr:hover td { background: color-mix(in srgb,var(--svp-primary) 5%,var(--svp-card)); } .server-plans-v2__primary { color: var(--svp-heading) !important; font-weight: 790; } .server-plans-v2__price { color: var(--svp-heading) !important; font-size: .79rem; font-weight: 840; white-space: nowrap; } .server-plans-v2__price small { display: block; margin-top: 1px; color: var(--svp-muted); font-size: .52rem; font-weight: 650; } .server-plans-v2__cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 105px; min-height: 35px; padding: 8px 10px; border-radius: 9px; background: linear-gradient(100deg,var(--svp-primary-dark),var(--svp-primary)); color: #fff !important; font-size: .6rem; font-weight: 780; box-shadow: 0 6px 14px rgba(13,110,253,.15); transition: transform .17s ease, box-shadow .17s ease; } .server-plans-v2__cta:hover { transform: translateY(-1px); color: #fff !important; box-shadow: 0 9px 18px rgba(13,110,253,.22); } .server-plans-v2__mobile-hint { display: none; } /* Help CTA */ .server-plans-v2__help { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; align-items: center; margin-top: 15px; padding: 16px 17px; border: 1px solid var(--svp-border); border-radius: 15px; background: var(--svp-card); box-shadow: 0 6px 18px rgba(8,43,92,.04); } .server-plans-v2__help-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; background: var(--svp-soft); color: var(--svp-primary); } .server-plans-v2__help strong, .server-plans-v2__help span { display: block; } .server-plans-v2__help strong { margin-bottom: 2px; color: var(--svp-heading); font-size: .73rem; } .server-plans-v2__help span { color: var(--svp-muted); font-size: .61rem; } .server-plans-v2__help-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(13,110,253,.18); border-radius: 10px; background: rgba(13,110,253,.06); color: var(--svp-primary) !important; font-size: .62rem; font-weight: 780; } /* Tablet */ @media (max-width: 991.98px) { .server-plans-v2__quick-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .server-plans-v2__toolbar { align-items: flex-start; flex-direction: column; } .server-plans-v2__toolbar-note { padding-left: 3px; } .server-plans-v2__panel-head { align-items: flex-start; flex-direction: column; gap: 8px; } .server-plans-v2__meta { justify-content: flex-start; } } /* Mobile — convert table rows to cards */ @media (max-width: 767.98px) { .server-plans-v2__quick-grid { grid-template-columns: 1fr; } .server-plans-v2__summary { min-height: 76px; } .server-plans-v2__tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; } .server-plans-v2__tab { display: grid; gap: 2px; justify-items: center; padding: 7px 5px; text-align: center; } .server-plans-v2__panel { padding: 13px; } .server-plans-v2__table-wrap { overflow: visible; border: 0; background: transparent; } .server-plans-v2__table { min-width: 0; border-spacing: 0 10px; font-size: .7rem; } .server-plans-v2__table thead { display: none; } .server-plans-v2__table, .server-plans-v2__table tbody, .server-plans-v2__table tr, .server-plans-v2__table td { display: block; width: 100%; } .server-plans-v2__table tbody { display: grid; gap: 11px; } .server-plans-v2__table tbody tr { overflow: hidden; border: 1px solid var(--svp-border); border-radius: 14px; background: var(--svp-card); box-shadow: 0 6px 17px rgba(8,43,92,.045); } .server-plans-v2__table td, .server-plans-v2__table tbody tr:nth-child(even) td, .server-plans-v2__table tbody tr:hover td { display: grid; grid-template-columns: minmax(94px,.42fr) minmax(0,1fr); gap: 13px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--svp-border); background: var(--svp-card); text-align: right; } .server-plans-v2__table td::before { content: attr(data-label); color: var(--svp-muted); font-size: .54rem; font-weight: 800; letter-spacing: .045em; text-align: left; text-transform: uppercase; } .server-plans-v2__table td:first-child { grid-template-columns: 1fr; padding: 12px; background: linear-gradient(100deg,rgba(13,110,253,.075),rgba(85,216,255,.035)), var(--svp-soft); color: var(--svp-heading) !important; font-size: .82rem; text-align: left; } .server-plans-v2__table td:first-child::before { display: none; } .server-plans-v2__table td:last-child { border-bottom: 0; } .server-plans-v2__price small { display: inline; margin-left: 2px; } .server-plans-v2__action { grid-template-columns: 1fr !important; padding: 11px 12px !important; } .server-plans-v2__action::before { display: none; } .server-plans-v2__cta { width: 100%; min-height: 39px; } .server-plans-v2__mobile-hint { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--svp-muted); font-size: .56rem; } .server-plans-v2__mobile-hint i { color: var(--svp-primary); } .server-plans-v2__help { grid-template-columns: auto minmax(0,1fr); } .server-plans-v2__help-btn { grid-column: 1 / -1; justify-content: center; min-height: 39px; } } /* Windows page has two tabs, not three. */ @media (max-width: 767.98px) { .server-plans-v2:has(.server-plans-v2__tab:nth-child(2):last-child) .server-plans-v2__tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } .server-plans-v2:has(.server-plans-v2__summary:nth-child(2):last-child) .server-plans-v2__quick-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .server-plans-v2__summary, .server-plans-v2__cta, .server-plans-v2__tab { transition: none !important; } } /* ========================================================= 24x7ServerSupport — LIQUID FOOTER V3 Matches: - Liquid glass header - Modern homepage V3 Add ONCE to assets/css/style.css ========================================================= */ .liquid-footer-v3 { position: relative; isolation: isolate; overflow: hidden; padding-top: 54px !important; padding-bottom: 20px !important; background: radial-gradient(circle at 8% 7%, rgba(85, 216, 255, .13), transparent 25% ), radial-gradient(circle at 91% 20%, rgba(120, 98, 232, .13), transparent 28% ), radial-gradient(circle at 50% 105%, rgba(13, 110, 253, .16), transparent 32% ), linear-gradient( 118deg, #061426 0%, #08254a 48%, #0b4eaa 100% ) !important; color: #dce9f7; } .liquid-footer-v3::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient( to bottom, rgba(0,0,0,.86), transparent 92% ); } /* --------------------------------------------------------- Intro / brand strip --------------------------------------------------------- */ .liquid-footer-v3__intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 35px; align-items: center; margin-bottom: 28px; padding: 24px 25px; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: linear-gradient( 135deg, rgba(255,255,255,.10), rgba(255,255,255,.045) ); box-shadow: 0 18px 44px rgba(2, 12, 28, .20), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(22px) saturate(1.18); backdrop-filter: blur(22px) saturate(1.18); } .liquid-footer-v3__eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #86e5ff; font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .liquid-footer-v3__eyebrow i { color: #4ee2a5; font-size: 7px; filter: drop-shadow(0 0 5px rgba(78,226,165,.4)); } .liquid-footer-v3__intro h2 { margin: 0 0 7px !important; color: #ffffff !important; font-size: clamp(1.4rem, 2.4vw, 2.05rem) !important; font-weight: 820 !important; letter-spacing: -.035em; line-height: 1.08; } .liquid-footer-v3__intro p { max-width: 760px; margin: 0; color: rgba(224,237,250,.72) !important; font-size: .78rem !important; line-height: 1.62; } .liquid-footer-v3__intro-badges { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .liquid-footer-v3__intro-badges span { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 11px; background: rgba(3,18,39,.20); color: #eaf5ff; font-size: .64rem; font-weight: 690; } .liquid-footer-v3__intro-badges i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: rgba(85,216,255,.10); color: #6de1ff; font-size: .65rem; } /* --------------------------------------------------------- 5-column grid --------------------------------------------------------- */ .liquid-footer-v3 .liquid-footer-v3__grid { gap: 18px; } .liquid-footer-v3 .liquid-footer-v3__col { position: relative; min-width: 0; padding: 19px 17px; border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.025) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .liquid-footer-v3 .liquid-footer-v3__col::before { content: ""; position: absolute; top: 0; left: 17px; right: 17px; height: 2px; border-radius: 0 0 999px 999px; background: linear-gradient( 90deg, transparent, rgba(85,216,255,.65), rgba(13,110,253,.75), rgba(120,98,232,.62), transparent ); opacity: .65; } /* --------------------------------------------------------- Section headings --------------------------------------------------------- */ .liquid-footer-v3 .customer-reviews-label, .liquid-footer-v3 .footer-col h6 { position: relative; margin: 0 0 12px !important; padding-bottom: 8px; color: #ffffff !important; opacity: 1 !important; font-size: .71rem !important; font-weight: 790 !important; letter-spacing: .035em; text-transform: uppercase; } .liquid-footer-v3 .customer-reviews-label::after, .liquid-footer-v3 .footer-col h6::after { content: ""; position: absolute; bottom: 0; left: 0; width: 29px; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, #55d8ff, #0d6efd ); } .liquid-footer-v3 .footer-col h6.pt-5 { margin-top: 22px !important; padding-top: 0 !important; } /* --------------------------------------------------------- Link lists --------------------------------------------------------- */ .liquid-footer-v3 .footer-col ul { margin: 0; padding: 0; list-style: none; } .liquid-footer-v3 .footer-col ul li { position: relative; margin: 0; opacity: 1 !important; } .liquid-footer-v3 .footer-col ul li a { position: relative; display: flex !important; align-items: center; gap: 7px; min-height: 28px; padding: 4px 2px 4px 13px; color: rgba(224,237,250,.72) !important; font-size: .68rem !important; font-weight: 480 !important; line-height: 1.35 !important; transition: color .17s ease, transform .17s ease, padding-left .17s ease; } .liquid-footer-v3 .footer-col ul li a::before { content: ""; position: absolute; top: 50%; left: 1px; width: 4px; height: 4px; transform: translateY(-50%); border-radius: 50%; background: rgba(85,216,255,.55); transition: width .17s ease, border-radius .17s ease, background .17s ease; } .liquid-footer-v3 .footer-col ul li a:hover { transform: translateX(2px); padding-left: 17px; color: #ffffff !important; } .liquid-footer-v3 .footer-col ul li a:hover::before { width: 8px; border-radius: 999px; background: #55d8ff; } /* --------------------------------------------------------- Reviews --------------------------------------------------------- */ .liquid-footer-v3 .footer-review-box { margin: 0 !important; } .liquid-footer-v3__review-gap { height: 10px; } .liquid-footer-v3 .footer-review-item { display: flex; align-items: center; gap: 10px; min-height: 67px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 13px; background: linear-gradient( 135deg, rgba(255,255,255,.09), rgba(255,255,255,.035) ); color: #ffffff !important; box-shadow: 0 7px 18px rgba(0,0,0,.08); transition: transform .17s ease, border-color .17s ease, background .17s ease; } .liquid-footer-v3 .footer-review-item:hover { transform: translateY(-2px); border-color: rgba(85,216,255,.28); background: rgba(255,255,255,.11); } .liquid-footer-v3 .footer-review-item img { flex: 0 0 auto; width: 39px !important; height: 39px !important; padding: 5px; border-radius: 10px; background: #ffffff; object-fit: contain; } .liquid-footer-v3 .footer-review-item strong, .liquid-footer-v3 .footer-review-item span { display: block; } .liquid-footer-v3 .footer-review-item strong { margin-bottom: 2px; color: #ffffff; font-size: .75rem; font-weight: 800; } .liquid-footer-v3 .footer-review-item span { color: rgba(222,237,250,.65); font-size: .58rem; } /* --------------------------------------------------------- Divider --------------------------------------------------------- */ .liquid-footer-v3__divider { height: 1px; margin: 23px 0 18px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.15) 20%, rgba(85,216,255,.22) 50%, rgba(255,255,255,.15) 80%, transparent ); } /* --------------------------------------------------------- Utility row --------------------------------------------------------- */ .liquid-footer-v3__utility { padding: 0 12px; } .liquid-footer-v3__utility-row { gap: 18px; } /* Social buttons */ .liquid-footer-v3 .footer-social .social-list-default { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; } .liquid-footer-v3 .footer-social .list-inline-item { margin: 0 !important; } .liquid-footer-v3 .footer-social a { display: grid !important; place-items: center; width: 36px; height: 36px; padding: 0 !important; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: linear-gradient( 145deg, rgba(255,255,255,.09), rgba(255,255,255,.035) ); color: #dff4ff !important; font-size: .78rem; transition: transform .17s ease, background .17s ease, color .17s ease, border-color .17s ease; } .liquid-footer-v3 .footer-social a:hover { transform: translateY(-2px); border-color: rgba(85,216,255,.30); background: linear-gradient( 135deg, rgba(13,110,253,.48), rgba(85,216,255,.22) ); color: #ffffff !important; } /* Certification tiles */ .liquid-footer-v3__certifications { gap: 8px !important; } .liquid-footer-v3__certifications img { width: auto !important; height: 43px !important; max-width: 84px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.92); object-fit: contain; box-shadow: 0 5px 13px rgba(0,0,0,.07); } /* Payment tiles */ .liquid-footer-v3__payments { gap: 6px !important; } .liquid-footer-v3__payments .payment-icon { display: grid; place-items: center; width: 49px; height: 39px; padding: 5px; border: 1px solid rgba(255,255,255,.10); border-radius: 9px; background: rgba(255,255,255,.92); box-shadow: 0 5px 12px rgba(0,0,0,.06); } .liquid-footer-v3__payments .payment-icon svg { width: 35px !important; height: 30px !important; } /* --------------------------------------------------------- Bottom copyright --------------------------------------------------------- */ .liquid-footer-v3__bottom { position: relative; padding: 10px 0 !important; border-top: 1px solid rgba(255,255,255,.07); background: linear-gradient( 90deg, #051121, #071b35 52%, #082b57 ) !important; } .liquid-footer-v3__bottom .copyright-wrap p { color: rgba(210,226,243,.62) !important; font-size: .64rem !important; letter-spacing: .01em; } /* --------------------------------------------------------- Scroll-to-top visual alignment --------------------------------------------------------- */ .scroll-top { border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px !important; background: linear-gradient( 135deg, #0b4eaa, #0d6efd 65%, #6759dc ) !important; box-shadow: 0 10px 24px rgba(13,110,253,.24) !important; } /* --------------------------------------------------------- Desktop 5-column safety --------------------------------------------------------- */ @media (min-width: 1200px) { .liquid-footer-v3 .footer-five-cols { grid-template-columns: minmax(185px,.95fr) minmax(180px,1fr) minmax(190px,1.08fr) minmax(185px,1fr) minmax(185px,1fr) !important; } } /* --------------------------------------------------------- Laptop / tablet --------------------------------------------------------- */ @media (max-width: 1199.98px) { .liquid-footer-v3__intro { grid-template-columns: 1fr; } .liquid-footer-v3__intro-badges { grid-template-columns: repeat(4,minmax(0,1fr)); } .liquid-footer-v3__utility-row { justify-content: center !important; } } @media (max-width: 991.98px) { .liquid-footer-v3 { padding-top: 42px !important; } .liquid-footer-v3__intro { padding: 20px; } .liquid-footer-v3__grid { gap: 13px !important; } .liquid-footer-v3 .liquid-footer-v3__col { padding: 16px; } .liquid-footer-v3__utility { padding: 0; } } /* --------------------------------------------------------- Mobile --------------------------------------------------------- */ @media (max-width: 767.98px) { .liquid-footer-v3 { padding-top: 31px !important; } .liquid-footer-v3__intro { margin-bottom: 18px; padding: 17px; border-radius: 17px; } .liquid-footer-v3__intro h2 { font-size: 1.45rem !important; } .liquid-footer-v3__intro-badges { grid-template-columns: repeat(2,minmax(0,1fr)); } .liquid-footer-v3__intro-badges span { font-size: .58rem; } .liquid-footer-v3 .footer-five-cols { grid-template-columns: 1fr !important; } .liquid-footer-v3 .liquid-footer-v3__col { border-radius: 15px; } .liquid-footer-v3__utility-row { display: grid !important; justify-items: center; gap: 16px; width: 100%; } .liquid-footer-v3__certifications, .liquid-footer-v3__payments { justify-content: center; flex-wrap: wrap; } .liquid-footer-v3__divider { margin-top: 18px; } } @media (max-width: 479.98px) { .liquid-footer-v3__intro-badges { grid-template-columns: 1fr; } .liquid-footer-v3__certifications img { height: 39px !important; } .liquid-footer-v3__payments .payment-icon { width: 45px; height: 36px; } } /* --------------------------------------------------------- Reduced motion --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .liquid-footer-v3 a, .liquid-footer-v3 .footer-review-item { transition: none !important; } } /* ========================================================= FOOTER COLOR MATCH — HEADER LIQUID PALETTE COLOR OVERRIDES ONLY. No layout, spacing, widths, heights, borders-radius, grid, typography sizes, or footer structure are changed. ========================================================= */ .footer-color-header-match { /* Same visual family as the recent liquid header */ background: radial-gradient( circle at 14% 0%, rgba(85, 216, 255, .10), transparent 30% ), radial-gradient( circle at 92% 100%, rgba(120, 98, 232, .10), transparent 30% ), linear-gradient( 135deg, #05162e 0%, #072547 48%, #0b4eaa 100% ) !important; color: rgba(235, 244, 255, .84) !important; } /* Footer headings — keep existing size/spacing */ .footer-color-header-match .customer-reviews-label, .footer-color-header-match h5, .footer-color-header-match h6, .footer-color-header-match .footer-col h5, .footer-color-header-match .footer-col h6 { color: #ffffff !important; } /* Standard footer links — no structural changes */ .footer-color-header-match a, .footer-color-header-match .footer-col a, .footer-color-header-match .footer-col ul li a { color: rgba(226, 239, 253, .74) !important; } .footer-color-header-match a:hover, .footer-color-header-match .footer-col a:hover, .footer-color-header-match .footer-col ul li a:hover { color: #72e4ff !important; } /* Review text only */ .footer-color-header-match .footer-review-item { background-color: rgba(255, 255, 255, .065) !important; border-color: rgba(255, 255, 255, .11) !important; color: #ffffff !important; } .footer-color-header-match .footer-review-item strong { color: #ffffff !important; } .footer-color-header-match .footer-review-item span { color: rgba(224, 238, 252, .70) !important; } .footer-color-header-match .footer-review-item:hover { background-color: rgba(255, 255, 255, .10) !important; border-color: rgba(85, 216, 255, .27) !important; } /* Existing divider — color only */ .footer-color-header-match .border-top { border-color: rgba(255, 255, 255, .13) !important; } /* Social buttons — keep same shape and dimensions */ .footer-color-header-match .footer-social a, .footer-color-header-match .social-list-default a { background-color: rgba(255, 255, 255, .075) !important; border-color: rgba(255, 255, 255, .11) !important; color: #dff4ff !important; } .footer-color-header-match .footer-social a:hover, .footer-color-header-match .social-list-default a:hover { background-color: #0d6efd !important; border-color: rgba(85, 216, 255, .32) !important; color: #ffffff !important; } /* Any muted/light footer text */ .footer-color-header-match .text-muted, .footer-color-header-match .small-text, .footer-color-header-match p, .footer-color-header-match span { border-color: rgba(255, 255, 255, .11); } /* Preserve certificate/payment white backgrounds where existing CSS uses them. Only tint their surrounding borders if present. */ .footer-color-header-match .footer-certifications img, .footer-color-header-match .footer-payments .payment-icon { border-color: rgba(255, 255, 255, .14) !important; } /* Bottom copyright strip — same header/nav dark navy family */ .footer-color-header-match-bottom { background: linear-gradient( 90deg, #041020 0%, #061a33 52%, #07284f 100% ) !important; border-top-color: rgba(85, 216, 255, .10) !important; } .footer-color-header-match-bottom .copyright-wrap p, .footer-color-header-match-bottom p { color: rgba(218, 233, 248, .68) !important; } /* Existing scroll-to-top button — palette only */ .scroll-top.primary-bg { background: linear-gradient( 135deg, #0b4eaa, #0d6efd 67%, #7862e8 ) !important; color: #ffffff !important; } /* Dark mode stays in the same navy family */ html[data-theme="dark"] .footer-color-header-match { background: radial-gradient( circle at 14% 0%, rgba(85, 216, 255, .08), transparent 30% ), radial-gradient( circle at 92% 100%, rgba(120, 98, 232, .08), transparent 30% ), linear-gradient( 135deg, #030c18 0%, #06162b 50%, #082d5a 100% ) !important; } html[data-theme="dark"] .footer-color-header-match-bottom { background: linear-gradient( 90deg, #020812, #041121 52%, #061d3a ) !important; } /* ========================================================= FOOTER HEADER-PALETTE MATCH COLOR OVERRIDES ONLY Base: existing modern-footer design with Quick Contact form. No layout, spacing, dimensions or structure are changed. ========================================================= */ .footer-header-palette { --fhp-primary: #0d6efd; --fhp-primary-dark: #0b4eaa; --fhp-cyan: #55d8ff; --fhp-purple: #7862e8; --fhp-navy-950: #041020; --fhp-navy-900: #05162e; --fhp-navy-850: #061d3a; --fhp-navy-800: #07284f; --fhp-white: #ffffff; --fhp-text: rgba(229, 241, 253, .78); --fhp-muted: rgba(194, 214, 234, .62); --fhp-border: rgba(255, 255, 255, .11); --fhp-glass: rgba(255, 255, 255, .065); --fhp-glass-strong: rgba(255, 255, 255, .095); background: radial-gradient( circle at 12% 4%, rgba(85, 216, 255, .11), transparent 28% ), radial-gradient( circle at 90% 12%, rgba(120, 98, 232, .11), transparent 30% ), linear-gradient( 135deg, var(--fhp-navy-900) 0%, #072547 48%, var(--fhp-primary-dark) 100% ) !important; color: var(--fhp-text) !important; } /* --------------------------------------------------------- Brand / badge / primary footer copy --------------------------------------------------------- */ .footer-header-palette .modern-footer__badge { background-color: rgba(85, 216, 255, .09) !important; border-color: rgba(85, 216, 255, .20) !important; color: #bfefff !important; } .footer-header-palette .modern-footer__badge i { color: #4ee2a5 !important; } .footer-header-palette .modern-footer__brand-title, .footer-header-palette .modern-footer__contact-title, .footer-header-palette .modern-footer__link-group h3 { color: var(--fhp-white) !important; } .footer-header-palette .modern-footer__brand-text, .footer-header-palette .modern-footer__contact-text, .footer-header-palette .modern-footer__form-note { color: var(--fhp-text) !important; } /* --------------------------------------------------------- Link groups --------------------------------------------------------- */ .footer-header-palette .modern-footer__link-group h3 { border-color: rgba(85, 216, 255, .16) !important; } .footer-header-palette .modern-footer__link-group a { color: rgba(224, 238, 252, .72) !important; } .footer-header-palette .modern-footer__link-group a:hover { color: var(--fhp-cyan) !important; } .footer-header-palette .modern-footer__subheading { color: #dff4ff !important; } /* --------------------------------------------------------- Reviews --------------------------------------------------------- */ .footer-header-palette .modern-footer__review { background-color: var(--fhp-glass) !important; border-color: var(--fhp-border) !important; color: var(--fhp-white) !important; } .footer-header-palette .modern-footer__review:hover { background-color: var(--fhp-glass-strong) !important; border-color: rgba(85, 216, 255, .28) !important; } .footer-header-palette .modern-footer__review-logo { background-color: rgba(255, 255, 255, .94) !important; border-color: rgba(255, 255, 255, .12) !important; } .footer-header-palette .modern-footer__review-copy strong { color: var(--fhp-white) !important; } .footer-header-palette .modern-footer__review-copy small { color: var(--fhp-muted) !important; } .footer-header-palette .modern-footer__review > i { color: var(--fhp-cyan) !important; } /* --------------------------------------------------------- Quick Contact panel — FORM RETAINED Colors only. --------------------------------------------------------- */ .footer-header-palette .modern-footer__contact { background: linear-gradient( 145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035) ) !important; border-color: rgba(255, 255, 255, .12) !important; box-shadow: 0 16px 38px rgba(1, 11, 26, .16), inset 0 1px 0 rgba(255, 255, 255, .05) !important; } .footer-header-palette .modern-footer__contact-icon { background: linear-gradient( 135deg, rgba(85, 216, 255, .18), rgba(13, 110, 253, .16) ) !important; border-color: rgba(85, 216, 255, .20) !important; color: #8ce8ff !important; } .footer-header-palette .modern-footer__contact-kicker { color: var(--fhp-cyan) !important; } /* Input/select/textarea appearance — sizes and layout untouched */ .footer-header-palette .modern-footer__field { background-color: rgba(4, 16, 32, .32) !important; border-color: rgba(255, 255, 255, .11) !important; } .footer-header-palette .modern-footer__field:focus-within { background-color: rgba(4, 16, 32, .43) !important; border-color: rgba(85, 216, 255, .43) !important; box-shadow: 0 0 0 3px rgba(85, 216, 255, .07) !important; } .footer-header-palette .modern-footer__field > i { color: #75defa !important; } .footer-header-palette .modern-footer__field input, .footer-header-palette .modern-footer__field select, .footer-header-palette .modern-footer__field textarea { background-color: transparent !important; color: #edf7ff !important; } .footer-header-palette .modern-footer__field input::placeholder, .footer-header-palette .modern-footer__field textarea::placeholder { color: rgba(199, 218, 237, .57) !important; } .footer-header-palette .modern-footer__field select { color-scheme: dark; } .footer-header-palette .modern-footer__field select option { background-color: var(--fhp-navy-900) !important; color: #edf7ff !important; } /* Send Request button */ .footer-header-palette .modern-footer__submit { background: linear-gradient( 100deg, var(--fhp-primary-dark) 0%, var(--fhp-primary) 68%, var(--fhp-purple) 100% ) !important; border-color: rgba(85, 216, 255, .18) !important; color: #ffffff !important; box-shadow: 0 9px 20px rgba(13, 110, 253, .20) !important; } .footer-header-palette .modern-footer__submit:hover { background: linear-gradient( 100deg, #0a4598 0%, #1678ff 68%, #826df0 100% ) !important; color: #ffffff !important; } /* --------------------------------------------------------- Trust strip --------------------------------------------------------- */ .footer-header-palette .modern-footer__trust-strip { border-color: rgba(255, 255, 255, .10) !important; background-color: rgba(3, 15, 31, .15) !important; } .footer-header-palette .modern-footer__trust-label { color: rgba(201, 220, 239, .63) !important; } /* Social icons */ .footer-header-palette .modern-footer__socials a, .footer-header-palette .footer-social a { background-color: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .11) !important; color: #dff5ff !important; } .footer-header-palette .modern-footer__socials a:hover, .footer-header-palette .footer-social a:hover { background: linear-gradient( 135deg, var(--fhp-primary-dark), var(--fhp-primary) ) !important; border-color: rgba(85, 216, 255, .30) !important; color: #ffffff !important; } /* Certifications / payment icons. Keep existing white logo surfaces; just match border treatment. */ .footer-header-palette .modern-footer__certifications img, .footer-header-palette .modern-footer__payments .payment-icon { background-color: rgba(255, 255, 255, .94) !important; border-color: rgba(255, 255, 255, .13) !important; } /* --------------------------------------------------------- Copyright row --------------------------------------------------------- */ .footer-header-palette .modern-footer__copyright { border-color: rgba(255, 255, 255, .10) !important; } .footer-header-palette .modern-footer__copyright p { color: rgba(202, 220, 238, .62) !important; } .footer-header-palette .modern-footer__copyright-links a { color: rgba(220, 235, 250, .72) !important; } .footer-header-palette .modern-footer__copyright-links a:hover { color: var(--fhp-cyan) !important; } .footer-header-palette .modern-footer__copyright-links span { color: rgba(148, 177, 207, .52) !important; } /* --------------------------------------------------------- Dark mode Same palette, slightly deeper. --------------------------------------------------------- */ html[data-theme="dark"] .footer-header-palette { background: radial-gradient( circle at 12% 4%, rgba(85, 216, 255, .075), transparent 28% ), radial-gradient( circle at 90% 12%, rgba(120, 98, 232, .075), transparent 30% ), linear-gradient( 135deg, #020a14 0%, #04142a 50%, #062b58 100% ) !important; } /* --------------------------------------------------------- IMPORTANT: No responsive/layout rules intentionally included. Existing footer design controls all layout and spacing. --------------------------------------------------------- */ /* ========================================================= LIQUID HEADER — FONT SIZE INCREASE ONLY Append AFTER header-modern-liquid.css in assets/css/style.css No layout, spacing, colors, widths, or menu structure changed. ========================================================= */ /* Main desktop menu labels */ .liquid-main-nav > .nav-item > .nav-link { font-size: .84rem !important; } /* Mega menu section heading */ .liquid-mega-header strong { font-size: 1rem !important; } /* Mega menu eyebrow */ .liquid-mega-header__eyebrow { font-size: .62rem !important; } /* Mega menu description */ .liquid-mega-header small { font-size: .70rem !important; } /* Mega menu badge */ .liquid-mega-header__badge { font-size: .61rem !important; } /* Individual service/menu item titles */ .liquid-navbar .u-header__promo-title { font-size: .79rem !important; } /* Individual service/menu item descriptions */ .liquid-navbar .u-header__promo-text { font-size: .67rem !important; } /* Starting-price text */ .liquid-navbar .u-header__promo-text strong { font-size: .66rem !important; } /* Tablet / smaller desktop */ @media (min-width: 992px) and (max-width: 1199.98px) { .liquid-main-nav > .nav-item > .nav-link { font-size: .76rem !important; } } /* Mobile offcanvas headings */ @media (max-width: 991.98px) { .liquid-offcanvas-body > .navbar-nav > .nav-item > .nav-link { font-size: .86rem !important; } .liquid-offcanvas-body .u-header__promo-title { font-size: .77rem !important; } .liquid-offcanvas-body .u-header__promo-text { font-size: .65rem !important; } } /* ========================================================= LIQUID HEADER — LARGER FONT SIZE V2 Font-size overrides only. Append AFTER the existing liquid-header CSS. ========================================================= */ /* Main desktop menu labels */ .liquid-main-nav > .nav-item > .nav-link { font-size: 1rem !important; } /* Mega menu category heading */ .liquid-mega-header strong { font-size: 1.12rem !important; } /* Mega menu eyebrow */ .liquid-mega-header__eyebrow { font-size: .70rem !important; } /* Mega menu description */ .liquid-mega-header small { font-size: .78rem !important; } /* Mega menu badge */ .liquid-mega-header__badge { font-size: .68rem !important; } /* Individual service/menu item titles */ .liquid-navbar .u-header__promo-title { font-size: .90rem !important; } /* Individual service/menu item descriptions */ .liquid-navbar .u-header__promo-text { font-size: .76rem !important; } /* Starting-price text */ .liquid-navbar .u-header__promo-text strong { font-size: .74rem !important; } /* Tablet / smaller desktop */ @media (min-width: 992px) and (max-width: 1199.98px) { .liquid-main-nav > .nav-item > .nav-link { font-size: .86rem !important; } } /* Mobile offcanvas */ @media (max-width: 991.98px) { .liquid-offcanvas-body > .navbar-nav > .nav-item > .nav-link { font-size: .96rem !important; } .liquid-offcanvas-body .u-header__promo-title { font-size: .86rem !important; } .liquid-offcanvas-body .u-header__promo-text { font-size: .73rem !important; } } /* ========================================================= EXIT INTENT SALES POPUP Matches liquid header + modern footer palette ========================================================= */ .exit-sales-modal { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .22s ease, visibility .22s ease; } .exit-sales-modal.is-visible { visibility: visible; opacity: 1; } .exit-sales-modal__backdrop { position: absolute; inset: 0; background: rgba(2, 9, 20, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .exit-sales-modal__dialog { position: relative; isolation: isolate; overflow: hidden; width: min(520px, 100%); padding: 31px 30px 27px; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; background: linear-gradient( 145deg, rgba(255,255,255,.10), rgba(255,255,255,.035) ), linear-gradient( 135deg, #05162e 0%, #07284f 48%, #0b4eaa 100% ); box-shadow: 0 34px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10); color: #ffffff; transform: translateY(12px) scale(.975); -webkit-backdrop-filter: blur(26px) saturate(1.2); backdrop-filter: blur(26px) saturate(1.2); transition: transform .24s ease; } .exit-sales-modal.is-visible .exit-sales-modal__dialog { transform: translateY(0) scale(1); } .exit-sales-modal__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(3px); pointer-events: none; } .exit-sales-modal__glow--one { top: -90px; right: -70px; width: 220px; height: 220px; background: rgba(85,216,255,.15); } .exit-sales-modal__glow--two { bottom: -110px; left: -80px; width: 240px; height: 240px; background: rgba(120,98,232,.16); } .exit-sales-modal__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.82); cursor: pointer; transition: background .18s ease, transform .18s ease; } .exit-sales-modal__close:hover { transform: rotate(5deg); background: rgba(255,255,255,.14); color: #ffffff; } .exit-sales-modal__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border: 1px solid rgba(85,216,255,.22); border-radius: 15px; background: linear-gradient( 145deg, rgba(85,216,255,.16), rgba(13,110,253,.13) ); color: #83e7ff; font-size: 1.15rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .exit-sales-modal__eyebrow { display: inline-block; margin-bottom: 7px; color: #8fe9ff; font-size: .66rem; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; } .exit-sales-modal h2 { margin: 0 42px 11px 0; color: #ffffff !important; font-size: clamp(1.8rem, 4vw, 2.45rem); font-weight: 840; letter-spacing: -.045em; line-height: 1.03; } .exit-sales-modal__lead { margin: 0; color: rgba(228,240,252,.79); font-size: .86rem; line-height: 1.6; } .exit-sales-modal__benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 17px 0; } .exit-sales-modal__benefits div { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(255,255,255,.055); color: rgba(237,247,255,.84); font-size: .6rem; font-weight: 670; } .exit-sales-modal__benefits i { color: #58e3aa; font-size: .59rem; } .exit-sales-modal__notice { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1px solid rgba(85,216,255,.17); border-radius: 13px; background: linear-gradient( 110deg, rgba(85,216,255,.09), rgba(120,98,232,.07) ); } .exit-sales-modal__notice > i { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 9px; background: rgba(85,216,255,.11); color: #75e4ff; } .exit-sales-modal__notice strong, .exit-sales-modal__notice span { display: block; } .exit-sales-modal__notice strong { margin-bottom: 3px; color: #ffffff; font-size: .72rem; } .exit-sales-modal__notice span { color: rgba(219,235,250,.70); font-size: .62rem; line-height: 1.45; } .exit-sales-modal__footer-text { margin: 14px 0 0; color: rgba(226,239,252,.76); font-size: .71rem; line-height: 1.5; } .exit-sales-modal__actions { display: grid; grid-template-columns: 1.25fr .85fr; gap: 8px; margin-top: 18px; } .exit-sales-modal__primary, .exit-sales-modal__secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; padding: 10px 14px; border-radius: 11px; font-size: .7rem; font-weight: 790; cursor: pointer; } .exit-sales-modal__primary { border: 1px solid rgba(255,255,255,.13); background: linear-gradient( 100deg, #0b4eaa, #0d6efd 67%, #7862e8 ); color: #ffffff; box-shadow: 0 9px 22px rgba(13,110,253,.24); } .exit-sales-modal__secondary { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.065); color: rgba(239,247,255,.83); } .exit-sales-modal__microcopy { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; color: rgba(187,210,232,.59); font-size: .56rem; } body.exit-sales-modal-open { overflow: hidden; } /* Mobile */ @media (max-width: 767.98px) { .exit-sales-modal { align-items: end; padding: 10px; } .exit-sales-modal__dialog { width: 100%; padding: 25px 18px 20px; border-radius: 20px; } .exit-sales-modal h2 { font-size: 1.85rem; } .exit-sales-modal__benefits { grid-template-columns: 1fr; } .exit-sales-modal__actions { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .exit-sales-modal, .exit-sales-modal__dialog, .exit-sales-modal__close { transition: none !important; } } /* ========================================================= COMPANY / CORPORATE PAGES V2 Shared visual system for: - Company Profile - About Us - Contact Us - Become Our Partner - Terms of Service - Cancellation & Refund Policy - Privacy Policy - Acceptable Usage Policy Uses the existing .service-page visual system. Append ONCE to assets/css/style.css. ========================================================= */ .company-content-page { --cc-primary: var(--sp-primary, #0d6efd); --cc-primary-dark: var(--sp-primary-dark, #0b4eaa); --cc-cyan: var(--sp-cyan, #55d8ff); --cc-purple: #7862e8; --cc-bg: var(--sp-bg, #ffffff); --cc-soft: var(--sp-bg-soft, #f3f7fc); --cc-card: var(--sp-card, #ffffff); --cc-border: var(--sp-border, #d9e5f2); --cc-heading: var(--sp-heading, #0b2b52); --cc-text: var(--sp-text, #58697f); --cc-muted: var(--sp-muted, #7a899b); } /* --------------------------------------------------------- Hero --------------------------------------------------------- */ .company-content-page .company-hero-v2 { overflow: hidden; } .company-content-page .company-hero-v2__icon { display: grid; place-items: center; } .company-content-page .company-hero-v2__icon i { color: #78e2ff; font-size: 1.65rem; } .company-content-page .company-hero-v2__chips span { white-space: nowrap; } /* Right corporate/policy card */ .company-content-page .company-hero-card { position: relative; isolation: isolate; overflow: hidden; padding: 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: radial-gradient( circle at 95% 0%, rgba(85,216,255,.13), transparent 28% ), radial-gradient( circle at 0% 100%, rgba(120,98,232,.13), transparent 28% ), linear-gradient( 145deg, rgba(255,255,255,.10), rgba(255,255,255,.035) ); box-shadow: 0 24px 54px rgba(2,12,30,.18), inset 0 1px 0 rgba(255,255,255,.10); -webkit-backdrop-filter: blur(18px) saturate(1.18); backdrop-filter: blur(18px) saturate(1.18); } .company-content-page .company-hero-card::before { content: ""; position: absolute; top: -75px; right: -65px; z-index: -1; width: 190px; height: 190px; border-radius: 50%; background: rgba(85,216,255,.10); } .company-content-page .company-hero-card__top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; } .company-content-page .company-hero-card__eyebrow { color: #8be8ff; font-size: .64rem; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; } .company-content-page .company-hero-card__status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(236,247,255,.78); font-size: .58rem; font-weight: 680; } .company-content-page .company-hero-card__status i { color: #4ee2a5; font-size: .42rem; } .company-content-page .company-hero-card h2 { margin: 0 0 10px; color: #ffffff !important; font-size: clamp(1.35rem,2.5vw,1.95rem); font-weight: 830; letter-spacing: -.035em; line-height: 1.13; } .company-content-page .company-hero-card > p { margin: 0; color: rgba(224,238,252,.72); font-size: .76rem; line-height: 1.65; } /* Hero facts */ .company-content-page .company-hero-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 18px 0 17px; } .company-content-page .company-hero-metric { min-width: 0; padding: 11px 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(3,18,39,.18); } .company-content-page .company-hero-metric strong, .company-content-page .company-hero-metric span { display: block; } .company-content-page .company-hero-metric strong { overflow: hidden; margin-bottom: 2px; color: #ffffff; font-size: .82rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; } .company-content-page .company-hero-metric span { color: rgba(196,218,239,.65); font-size: .57rem; } .company-content-page .company-hero-card__action { display: inline-flex; align-items: center; gap: 8px; color: #8eeaff !important; font-size: .65rem; font-weight: 780; } .company-content-page .company-hero-card__action i { transition: transform .18s ease; } .company-content-page .company-hero-card__action:hover i { transform: translateX(3px); } /* --------------------------------------------------------- Main corporate content --------------------------------------------------------- */ .company-content-page .company-content-section { scroll-margin-top: 92px; } .company-content-page .modern-article-card { border-color: var(--cc-border); background: var(--cc-card); color: var(--cc-text); box-shadow: 0 10px 28px rgba(8,43,92,.055); } .company-content-page .modern-corporate-content h2, .company-content-page .modern-corporate-content h3, .company-content-page .modern-corporate-content h4 { color: var(--cc-heading); } .company-content-page .modern-corporate-content p, .company-content-page .modern-corporate-content li { color: var(--cc-text); } .company-content-page .modern-corporate-content a { color: var(--cc-primary); } /* Existing old-style content inside modern card */ .company-content-page .modern-corporate-content .feature-section, .company-content-page .modern-corporate-content section { background: transparent !important; } .company-content-page .modern-corporate-content .feature-content-wrap, .company-content-page .modern-corporate-content .feature-contents { color: var(--cc-text); } .company-content-page .modern-corporate-content .feature-img-wrap img { border: 1px solid var(--cc-border); border-radius: 18px; box-shadow: 0 12px 30px rgba(8,43,92,.08); } /* --------------------------------------------------------- Long-form legal/policy pages --------------------------------------------------------- */ .company-content-page .company-policy-content { max-width: 1040px; margin-right: auto; margin-left: auto; } .company-content-page .company-policy-content .feature-contents { margin-bottom: 12px; padding: 17px 18px; border: 1px solid var(--cc-border); border-radius: 13px; background: linear-gradient( 145deg, color-mix(in srgb,var(--cc-soft) 38%,var(--cc-card)), var(--cc-card) ); } .company-content-page .company-policy-content .feature-contents h3, .company-content-page .company-policy-content .feature-contents h4 { margin-bottom: 8px; font-size: .96rem; line-height: 1.35; } .company-content-page .company-policy-content .feature-contents p, .company-content-page .company-policy-content .feature-contents li { font-size: .72rem; line-height: 1.75; } .company-content-page .company-policy-content .disc-style { margin-bottom: 0; } /* --------------------------------------------------------- Dark mode --------------------------------------------------------- */ html[data-theme="dark"] .company-content-page .modern-article-card, html[data-theme="dark"] .company-content-page .company-policy-content .feature-contents { border-color: var(--cc-border); background: var(--cc-card); } /* --------------------------------------------------------- Responsive --------------------------------------------------------- */ @media (max-width: 991.98px) { .company-content-page .company-hero-card { max-width: 720px; } } @media (max-width: 767.98px) { .company-content-page .company-hero-card { padding: 19px; border-radius: 18px; } .company-content-page .company-hero-card__top { align-items: flex-start; flex-direction: column; gap: 7px; } .company-content-page .company-hero-metrics { grid-template-columns: 1fr 1fr; } .company-content-page .company-policy-content .feature-contents { padding: 14px; } } @media (max-width: 479.98px) { .company-content-page .company-hero-metrics { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .company-content-page .company-hero-card__action i { transition: none !important; } } /* ========================================================= LIQUID HEADER — BLACK SPOT FIX Removes only the decorative nav-link pseudo layer that can produce a dark compositing artifact with backdrop-filter. No other header styling is changed. ========================================================= */ .liquid-main-nav > .nav-item > .nav-link::before, .liquid-main-nav > .nav-item:hover > .nav-link::before, .liquid-main-nav > .nav-item > .nav-link[aria-expanded="true"]::before, .liquid-main-nav > .nav-item > .nav-link.is-section-current::before { content: none !important; display: none !important; opacity: 0 !important; } /* ========================================================= LIQUID HEADER — EDGE SPACING FIX Keeps header full width. Only adds balanced horizontal gutters so the logo and dark/light toggle are not stuck to the viewport edges. ========================================================= */ #logoAndNav > .container-fluid { padding-left: 32px !important; padding-right: 32px !important; } /* Slightly reduce gutters on normal laptops */ @media (max-width: 1399.98px) { #logoAndNav > .container-fluid { padding-left: 24px !important; padding-right: 24px !important; } } /* Tablet / mobile */ @media (max-width: 991.98px) { #logoAndNav > .container-fluid { padding-left: 12px !important; padding-right: 12px !important; } } /* ========================================================= LIQUID HEADER — EDGE ALIGNMENT FIX V2 Header/background remains full width. Only the inner navbar content is centered within a wide frame. ========================================================= */ #logoAndNav > .container-fluid { width: min(1740px, calc(100% - 64px)) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* Tablet */ @media (max-width: 991.98px) { #logoAndNav > .container-fluid { width: calc(100% - 24px) !important; } } /* Small phones */ @media (max-width: 479.98px) { #logoAndNav > .container-fluid { width: calc(100% - 16px) !important; } } /* ========================================================= MODERN FOOTER — FULL WIDTH FIX Keeps the existing footer design unchanged. Only removes Bootstrap .container max-width and gives the footer balanced full-width page gutters. ========================================================= */ .modern-footer > .container { width: 100% !important; max-width: none !important; padding-left: 48px !important; padding-right: 48px !important; } /* Wide desktop */ @media (min-width: 1600px) { .modern-footer > .container { padding-left: 64px !important; padding-right: 64px !important; } } /* Normal desktop / laptop */ @media (max-width: 1399.98px) { .modern-footer > .container { padding-left: 32px !important; padding-right: 32px !important; } } /* Tablet */ @media (max-width: 991.98px) { .modern-footer > .container { padding-left: 22px !important; padding-right: 22px !important; } } /* Mobile */ @media (max-width: 575.98px) { .modern-footer > .container { padding-left: 15px !important; padding-right: 15px !important; } } /* ========================================================= LIQUID HEADER — MEGA MENU VIEWPORT FIX Keeps every submenu fully inside the browser window. Does NOT change menu content, colors, card design or links. ========================================================= */ @media (min-width: 992px) { /* Make the navbar the positioning reference for every mega menu. */ #logoAndNav .liquid-navbar { position: relative !important; } /* * Do not position a wide mega menu relative to its individual * Cloud / Management / Company / Support trigger. */ #logoAndNav .liquid-main-nav > .hs-has-mega-menu { position: static !important; } /* * Center every mega menu against the navbar instead of its trigger. * !important overrides left/right values injected by hs.megamenu.js. */ #logoAndNav .liquid-navbar .hs-mega-menu.liquid-mega-menu { left: 50% !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; transform: translateX(-50%) !important; max-width: calc(100vw - 32px) !important; } /* Preserve the intended individual menu widths. */ #logoAndNav .liquid-mega-menu--cloud, #logoAndNav .liquid-mega-menu--outsource, #logoAndNav .liquid-mega-menu--server, #logoAndNav .liquid-mega-menu--company, #logoAndNav .liquid-mega-menu--support { width: min(920px, calc(100vw - 32px)) !important; } #logoAndNav .liquid-mega-menu--services { width: min(1040px, calc(100vw - 32px)) !important; } #logoAndNav .liquid-mega-menu--management { width: min(1180px, calc(100vw - 32px)) !important; } } /* * 992–1199px is the narrowest range where the desktop mega menu exists. * Give it a slightly smaller safety gutter. */ @media (min-width: 992px) and (max-width: 1199.98px) { #logoAndNav .liquid-navbar .hs-mega-menu.liquid-mega-menu { max-width: calc(100vw - 20px) !important; } #logoAndNav .liquid-mega-menu--cloud, #logoAndNav .liquid-mega-menu--outsource, #logoAndNav .liquid-mega-menu--server, #logoAndNav .liquid-mega-menu--company, #logoAndNav .liquid-mega-menu--support, #logoAndNav .liquid-mega-menu--services, #logoAndNav .liquid-mega-menu--management { width: calc(100vw - 20px) !important; } } /* ========================================================= HOMEPAGE V3 — ACCESSIBILITY + REVIEW LAYOUT FIX Append AFTER the existing homepage-modern-v3 CSS. ========================================================= */ /* --------------------------------------------------------- 1. ACCESSIBLE TEXT CONTRAST Existing #7a899b is ~3.57:1 on white and fails WCAG AA for normal text. #56677d is >5.3:1 on both white and the homepage soft background. --------------------------------------------------------- */ .home-v3 { --hv3-muted: #56677d; --hv3-primary-text: #0759c7; } html[data-theme="dark"] .home-v3 { --hv3-muted: #aebbd0; --hv3-primary-text: #65dfff; } /* Eyebrows can sit on #f3f7fc, where standard #0d6efd is below the 4.5:1 normal-text target. */ .home-v3 .home-v3-heading__eyebrow { color: var(--hv3-primary-text) !important; } /* The large step numbers were intentionally extremely faint. Give them real contrast while retaining their secondary role. */ .home-v3 .home-v3-process__number { color: #62738a !important; } html[data-theme="dark"] .home-v3 .home-v3-process__number { color: #aebbd0 !important; } /* Green status chip was slightly below 4.5:1. */ .home-v3 .home-v3-status-green { color: #146c43 !important; } /* --------------------------------------------------------- 2. PROCESS TITLE — ONE LINE ON DESKTOP Mobile/tablet continue to wrap normally. --------------------------------------------------------- */ @media (min-width: 1200px) { .home-v3 .home-v3-process-section .home-v3-heading { max-width: 1160px; } .home-v3 .home-v3-process-section #process-title { white-space: nowrap; font-size: clamp(2rem, 2.65vw, 2.75rem); } } /* --------------------------------------------------------- 3. REVIEWS — SWIPER LAYOUT HARDENING Prevent legacy/global rules or performance containment from corrupting slider measurements. --------------------------------------------------------- */ .home-v3 .home-v3-reviews, .home-v3 .home-v3-reviews.home-perf-section { content-visibility: visible !important; contain: none !important; } .home-v3 .home-v3-review-slider { position: relative; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; } .home-v3 .home-v3-review-slider .swiper-wrapper { align-items: stretch; } .home-v3 .home-v3-review-slider .swiper-slide { display: flex; height: auto; min-width: 0; box-sizing: border-box; } .home-v3 .home-v3-review-card { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; overflow: hidden; } .home-v3 .home-v3-review-card > p { overflow-wrap: anywhere; word-break: normal; } .home-v3 .home-v3-review-card__author { margin-top: auto; min-width: 0; } .home-v3 .home-v3-review-card__author > div { min-width: 0; } .home-v3 .home-v3-review-card__author strong, .home-v3 .home-v3-review-card__author span { overflow-wrap: anywhere; } /* Review text contrast on the dark gradient. */ .home-v3 .home-v3-reviews__intro > p { color: #d7e5f3; } .home-v3 .home-v3-rating span { color: #c5d6e7; } .home-v3 .home-v3-review-card__author span { color: #c4d5e7; } /* Pagination remains visible without affecting card measurement. */ .home-v3 .home-v3-review-slider .swiper-pagination { min-height: 22px; } /* --------------------------------------------------------- 4. EXTRA CONTRAST TARGETS REPORTED BY LIGHTHOUSE These inherit --hv3-muted, but explicit selectors protect against older/global CSS with higher specificity. --------------------------------------------------------- */ .home-v3 .home-v3-trust__item span, .home-v3 .home-v3-plan__top span, .home-v3 .home-v3-plan__price small, .home-v3 .home-v3-plan__price strong span, .home-v3 .home-v3-outsource__features small, .home-v3 .home-v3-support-window__bar small, .home-v3 .home-v3-support-ticket span { color: var(--hv3-muted) !important; } /* Keep all text readable in dark mode as well. */ html[data-theme="dark"] .home-v3 .home-v3-trust__item span, html[data-theme="dark"] .home-v3 .home-v3-plan__top span, html[data-theme="dark"] .home-v3 .home-v3-plan__price small, html[data-theme="dark"] .home-v3 .home-v3-plan__price strong span, html[data-theme="dark"] .home-v3 .home-v3-outsource__features small, html[data-theme="dark"] .home-v3 .home-v3-support-window__bar small, html[data-theme="dark"] .home-v3 .home-v3-support-ticket span { color: #aebbd0 !important; } /* ========================================================= HOMEPAGE V3 — FAQ REDESIGN + FIX Append AFTER existing homepage CSS / patches ========================================================= */ /* FAQ section shell */ .home-v3 .home-v3-faq-section{ position:relative; } .home-v3 .home-v3-faq-section .home-v3-heading{ max-width: 980px; margin: 0 auto 26px; } .home-v3 .home-v3-faq-section .home-v3-heading p{ max-width: 760px; margin: 0 auto; color: var(--hv3-muted); } /* Keep the FAQ main title on one line for large screens */ @media (min-width: 1200px){ .home-v3 .home-v3-faq-section #faq-title{ white-space: nowrap; font-size: clamp(2rem, 2.75vw, 3rem); line-height: 1.12; } } /* Wider and more polished FAQ container */ .home-v3 .home-v3-faq{ max-width: 980px; margin: 0 auto; display: grid; gap: 14px; } /* Accordion card */ .home-v3 .home-v3-faq .accordion-item{ border: 1px solid #d7e4f3 !important; border-radius: 18px !important; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 10px 28px rgba(6, 35, 78, 0.06); } /* Remove bootstrap seam between button/body */ .home-v3 .home-v3-faq .accordion-item .accordion-collapse{ border: 0; } /* Header button */ .home-v3 .home-v3-faq .accordion-button{ position: relative; min-height: 72px; padding: 20px 56px 20px 20px; background: transparent !important; color: #0a2f63 !important; font-size: 1rem; font-weight: 700; line-height: 1.45; box-shadow: none !important; border: 0 !important; } /* Left accent line */ .home-v3 .home-v3-faq .accordion-button::before{ content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 8px 8px 0; background: linear-gradient(180deg, #1b84ff 0%, #6a63ff 100%); opacity: 0; transition: opacity .22s ease; } /* Open state */ .home-v3 .home-v3-faq .accordion-button:not(.collapsed){ color: #0959c7 !important; background: linear-gradient(180deg, #f9fbff 0%, #f2f8ff 100%) !important; } .home-v3 .home-v3-faq .accordion-button:not(.collapsed)::before{ opacity: 1; } /* Cleaner chevron */ .home-v3 .home-v3-faq .accordion-button::after{ width: 14px; height: 14px; background-size: 14px 14px; opacity: .92; filter: none; } /* Focus state */ .home-v3 .home-v3-faq .accordion-button:focus{ border: 0 !important; box-shadow: 0 0 0 0.18rem rgba(27,132,255,.16) !important; } /* Body */ .home-v3 .home-v3-faq .accordion-body{ padding: 0 20px 20px 20px; color: #435873 !important; font-size: .95rem; line-height: 1.78; border-top: 1px solid rgba(13, 95, 180, 0.08); background: rgba(255,255,255,.72); } /* Slightly better spacing between title and answer text */ .home-v3 .home-v3-faq .accordion-collapse.show .accordion-body{ padding-top: 16px; } /* Dark mode */ html[data-theme="dark"] .home-v3 .home-v3-faq .accordion-item{ border-color: rgba(113, 163, 230, 0.18) !important; background: linear-gradient(180deg, rgba(12, 24, 47, 0.96) 0%, rgba(10, 20, 40, 0.96) 100%); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .home-v3 .home-v3-faq .accordion-button{ color: #e9f2ff !important; } html[data-theme="dark"] .home-v3 .home-v3-faq .accordion-button:not(.collapsed){ color: #72d8ff !important; background: linear-gradient(180deg, rgba(15, 33, 62, 0.92) 0%, rgba(11, 28, 52, 0.92) 100%) !important; } html[data-theme="dark"] .home-v3 .home-v3-faq .accordion-body{ color: #c2d3e6 !important; border-top-color: rgba(113, 163, 230, 0.12); background: rgba(8, 17, 32, 0.24); } /* Mobile refinement */ @media (max-width: 767.98px){ .home-v3 .home-v3-faq{ gap: 12px; } .home-v3 .home-v3-faq .accordion-button{ min-height: 64px; padding: 17px 48px 17px 17px; font-size: .94rem; } .home-v3 .home-v3-faq .accordion-body{ padding: 0 17px 17px 17px; font-size: .9rem; } } /* ========================================================= LIQUID HEADER — 1024px / SMALL LAPTOP RESPONSIVE FIX Desktop mega menu: >= 1200px Offcanvas navigation: < 1200px Append AFTER all existing liquid-header CSS patches. ========================================================= */ @media (min-width: 992px) and (max-width: 1199.98px) { /* Hide the desktop mega navigation in the cramped laptop range. */ #logoAndNav .liquid-desktop-nav { display: none !important; } #logoAndNav.liquid-header-shell { padding-top: 7px; } #logoAndNav .liquid-navbar { min-height: 66px; padding: 7px 10px; border-radius: 16px; } #logoAndNav .liquid-navbar-brand { order: 1; margin-right: 14px; } #logoAndNav .liquid-navbar-brand img, #logoAndNav.is-scrolled .liquid-navbar-brand img { width: 184px; height: auto; } /* Theme toggle + hamburger stay together on the right. */ #logoAndNav .liquid-theme-toggle { order: 2; margin-left: auto !important; margin-right: 8px !important; } #logoAndNav .navbar-toggler { position: relative; z-index: 4; order: 3; display: grid !important; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; } #logoAndNav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(85,216,255,.14); } /* Extend the polished offcanvas styling through 1199px. */ .liquid-offcanvas { width: min(92vw, 460px) !important; border-right: 1px solid rgba(13,110,253,.12); background: radial-gradient(circle at 0 0, rgba(85,216,255,.10), transparent 24% ), var(--lm-menu-bg) !important; color: var(--lm-text); -webkit-backdrop-filter: blur(28px) saturate(1.22); backdrop-filter: blur(28px) saturate(1.22); } .liquid-offcanvas .offcanvas-header { min-height: 72px; padding: 12px 15px; border-color: var(--lm-menu-border) !important; background: linear-gradient(110deg, rgba(13,110,253,.08), transparent ); } .liquid-offcanvas .navbar-brand img { max-width: 190px; max-height: 48px; object-fit: contain; } .liquid-offcanvas .btn-close { border-radius: 10px; background-color: rgba(13,110,253,.07); opacity: .8; } html[data-theme="dark"] .liquid-offcanvas .btn-close { filter: invert(1); } .liquid-offcanvas-body { padding: 12px !important; } .liquid-offcanvas-body > .navbar-nav { gap: 7px; } .liquid-offcanvas-body > .navbar-nav > .nav-item { overflow: hidden; border: 1px solid var(--lm-menu-border); border-radius: 14px; background: var(--lm-menu-card); } .liquid-offcanvas-body > .navbar-nav > .nav-item > .nav-link { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 11px 13px; color: var(--lm-heading) !important; font-size: .9rem !important; font-weight: 780; } .liquid-offcanvas-body .dropdown-menu { position: static !important; float: none !important; transform: none !important; width: 100% !important; margin: 0; padding: 5px 7px 9px !important; border: 0 !important; border-top: 1px solid var(--lm-menu-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .liquid-offcanvas-body .dropdown-menu .row { display: block; } .liquid-offcanvas-body .dropdown-menu [class*="col-"] { width: 100%; max-width: none; } .liquid-offcanvas-body .menu-item-wrap { padding: 0 !important; } .liquid-offcanvas-body .liquid-menu-card { margin: 4px 0; } .liquid-offcanvas-body .liquid-menu-link { display: block; padding: 9px; border: 1px solid transparent; border-radius: 11px; } .liquid-offcanvas-body .liquid-menu-link:hover, .liquid-offcanvas-body .liquid-menu-link.is-current { border-color: var(--lm-menu-border); background: var(--lm-menu-card-hover); } .liquid-offcanvas-body .liquid-menu-link > .d-flex { align-items: center !important; } .liquid-offcanvas-body .liquid-menu-icon { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; margin-right: 10px; padding: 0 !important; border: 1px solid var(--lm-menu-border); border-radius: 11px; background: var(--lm-menu-card); } .liquid-offcanvas-body .liquid-menu-icon img { width: auto !important; height: auto !important; max-width: 31px !important; max-height: 31px !important; object-fit: contain; } .liquid-offcanvas-body .u-header__promo-title { display: block; margin-bottom: 2px; color: var(--lm-heading) !important; font-size: .82rem !important; font-weight: 780 !important; line-height: 1.3 !important; } .liquid-offcanvas-body .u-header__promo-text { display: block; color: var(--lm-text) !important; font-size: .72rem !important; line-height: 1.42 !important; } .liquid-offcanvas-body .u-header__promo-text strong { color: var(--lm-primary) !important; } } @media (min-width: 1200px) { #logoAndNav .liquid-desktop-nav { display: flex !important; } #logoAndNav .navbar-toggler { display: none !important; } } /* ========================================================= LIQUID HEADER — 1024px DESKTOP MENU FIX V3 Keeps desktop navigation visible from 992px upward. Makes mega menus fit INSIDE the navbar/viewport. Append AFTER previous header responsive/viewport patches. ========================================================= */ /* ========================================================= 992px–1199.98px Keep desktop menu visible. Do NOT switch to offcanvas. ========================================================= */ @media (min-width: 992px) and (max-width: 1199.98px) { /* Undo the previous 1200px/offcanvas patch. */ #logoAndNav .liquid-desktop-nav { display: flex !important; flex-basis: auto !important; flex-grow: 1 !important; align-items: center !important; } #logoAndNav .navbar-toggler { display: none !important; } #logoAndNav .liquid-navbar { position: relative !important; min-height: 64px; padding: 6px 8px !important; } /* Slightly reduce logo only in this narrow desktop range. */ #logoAndNav .liquid-navbar-brand { flex: 0 0 auto; margin-right: 10px !important; } #logoAndNav .liquid-navbar-brand img, #logoAndNav.is-scrolled .liquid-navbar-brand img { width: 175px !important; height: auto !important; } /* Allow the center navigation to use available width. */ #logoAndNav .liquid-main-nav { width: auto !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; gap: 1px !important; flex-wrap: nowrap !important; } #logoAndNav .liquid-main-nav > .nav-item { position: static !important; flex: 0 0 auto !important; } #logoAndNav .liquid-main-nav > .nav-item > .nav-link { padding-left: 7px !important; padding-right: 7px !important; font-size: .82rem !important; white-space: nowrap !important; } /* Icons consume too much room at this width. Labels remain visible and fully crawlable. */ #logoAndNav .liquid-main-nav > .nav-item > .nav-link .liquid-nav-icon { display: none !important; } #logoAndNav .liquid-theme-toggle { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; margin-left: 8px !important; } /* ===================================================== CRITICAL FIX: every mega menu is positioned against the NAVBAR, not the individual Cloud/Management/etc. item. ===================================================== */ #logoAndNav .liquid-navbar .hs-mega-menu.liquid-mega-menu { position: absolute !important; left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Override individual menu widths from older CSS. */ #logoAndNav .liquid-mega-menu--cloud, #logoAndNav .liquid-mega-menu--management, #logoAndNav .liquid-mega-menu--outsource, #logoAndNav .liquid-mega-menu--services, #logoAndNav .liquid-mega-menu--server, #logoAndNav .liquid-mega-menu--company, #logoAndNav .liquid-mega-menu--support { width: auto !important; max-width: none !important; } /* Compact the mega header for small laptops. */ #logoAndNav .liquid-mega-header { padding: 14px 16px !important; } #logoAndNav .liquid-mega-header strong { font-size: 1rem !important; } #logoAndNav .liquid-mega-header small { font-size: .72rem !important; } #logoAndNav .liquid-mega-header__badge { font-size: .62rem !important; white-space: nowrap !important; } /* Compact cards while retaining all three columns. */ #logoAndNav .liquid-mega-menu .menu-item-wrap { padding: 10px !important; } #logoAndNav .liquid-mega-menu .liquid-menu-card { margin-bottom: 3px !important; } #logoAndNav .liquid-mega-menu .liquid-menu-link { padding: 7px !important; } #logoAndNav .liquid-mega-menu .liquid-menu-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; margin-right: 9px !important; } #logoAndNav .liquid-mega-menu .liquid-menu-icon img { width: auto !important; height: auto !important; max-width: 31px !important; max-height: 31px !important; object-fit: contain !important; } #logoAndNav .liquid-mega-menu .u-header__promo-title { font-size: .78rem !important; line-height: 1.23 !important; } #logoAndNav .liquid-mega-menu .u-header__promo-text { font-size: .67rem !important; line-height: 1.34 !important; } #logoAndNav .liquid-mega-menu .u-header__promo-text strong { font-size: .67rem !important; } /* Very tall Management menu can extend below a short 768px screen. Scroll INSIDE the dropdown rather than clipping page content. */ #logoAndNav .liquid-mega-menu--management, #logoAndNav .liquid-mega-menu--services, #logoAndNav .liquid-mega-menu--company { max-height: calc(100vh - 88px) !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; } } /* ========================================================= >= 1200px Restore normal desktop sizing from the main liquid styles. Only retain viewport safety. ========================================================= */ @media (min-width: 1200px) { #logoAndNav .liquid-desktop-nav { display: flex !important; } #logoAndNav .navbar-toggler { display: none !important; } #logoAndNav .liquid-main-nav > .nav-item { position: static !important; } #logoAndNav .liquid-navbar { position: relative !important; } #logoAndNav .liquid-navbar .hs-mega-menu.liquid-mega-menu { left: 16px !important; right: 16px !important; width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; box-sizing: border-box !important; } } /* ========================================================= LIQUID HEADER — RESTORE LOGO POSITION AT 992–1199PX Append AFTER header-1024-desktop-menu-fix-v3.css ========================================================= */ @media (min-width: 992px) and (max-width: 1199.98px) { /* Correct flex order: Logo | Desktop Navigation | Theme Toggle */ #logoAndNav .liquid-navbar-brand { order: 0 !important; flex: 0 0 auto !important; margin-left: 0 !important; margin-right: 10px !important; } #logoAndNav .liquid-desktop-nav { order: 1 !important; flex: 1 1 auto !important; min-width: 0 !important; } #logoAndNav .liquid-theme-toggle { order: 2 !important; flex: 0 0 40px !important; margin-left: 8px !important; margin-right: 0 !important; } /* Hamburger remains hidden in this desktop range. */ #logoAndNav .navbar-toggler { order: 3 !important; display: none !important; } } /* ========================================================= LIQUID MEGA MENU — COLUMN SEPARATOR CONSISTENCY Append AFTER all existing header / mega-menu CSS patches. IMPORTANT: This intentionally uses the EXISTING separator variable: var(--lm-menu-border) No separator color, opacity, thickness or theme value is changed. ========================================================= */ @media (min-width: 992px) { /* Every desktop mega-menu column participates in separator layout. */ #logoAndNav .liquid-mega-menu .liquid-mega-grid > [class*="col-"] { position: relative !important; } /* * Apply the same existing 1px vertical separator before every * column after the first one. * * Examples: * Cloud : 2 columns -> 1 separator * Management : 3 columns -> 2 separators * Outsource : 2 columns -> 1 separator * Services : 3 columns -> 2 separators * Server : 3 columns -> 2 separators * Company : 3 columns -> 2 separators * Support : 3 columns -> 2 separators */ #logoAndNav .liquid-mega-menu .liquid-mega-grid > [class*="col-"] + [class*="col-"]::before { content: "" !important; position: absolute !important; top: 10px !important; bottom: 10px !important; left: 0 !important; width: 1px !important; background: var(--lm-menu-border) !important; opacity: 1 !important; display: block !important; pointer-events: none !important; z-index: 2; } } /* * Mobile/offcanvas navigation is unchanged. * No column separator is added below the desktop breakpoint. */ @media (max-width: 991.98px) { #logoAndNav .liquid-mega-menu .liquid-mega-grid > [class*="col-"]::before { display: none !important; } } /* ========================================================= MOBILE OFFCANVAS NAV — FULL-ROW CLICK + CLEAN LABEL Fixes: - no box/border around Cloud / Management / etc. - full rounded menu row is clickable - arrow remains aligned at the far right - desktop navigation is untouched ========================================================= */ @media (max-width: 991.98px) { #offcanvasLeft #liquidMobileNav { width: 100%; margin: 0; padding: 0; } #offcanvasLeft #liquidMobileNav > .nav-item { position: relative; width: 100%; margin: 0 0 7px !important; padding: 0 !important; overflow: visible; } /* * The existing rounded row/background stays on the nav item. * The toggle itself becomes a transparent full-width hit area. */ #offcanvasLeft #liquidMobileNav > .nav-item > .nav-link, #offcanvasLeft #liquidMobileNav > .nav-item > button.nav-link, #offcanvasLeft #liquidMobileNav > .nav-item > .dropdown-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 38px !important; margin: 0 !important; padding: 10px 14px !important; border: 0 !important; outline: 0 !important; border-radius: inherit !important; background: transparent !important; background-image: none !important; color: inherit !important; font: inherit !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: left !important; text-decoration: none !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important; touch-action: manipulation; } #offcanvasLeft #liquidMobileNav > .nav-item > .nav-link:hover, #offcanvasLeft #liquidMobileNav > .nav-item > .nav-link:focus, #offcanvasLeft #liquidMobileNav > .nav-item > .nav-link:active, #offcanvasLeft #liquidMobileNav > .nav-item > button.nav-link:hover, #offcanvasLeft #liquidMobileNav > .nav-item > button.nav-link:focus, #offcanvasLeft #liquidMobileNav > .nav-item > button.nav-link:active { border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; text-decoration: none !important; } /* * Bootstrap arrow remains part of the full-width button. */ #offcanvasLeft #liquidMobileNav > .nav-item > .dropdown-toggle::after { flex: 0 0 auto; margin-left: auto !important; position: static !important; right: auto !important; top: auto !important; transform: none; } /* * When Bootstrap marks the dropdown open, rotate only the arrow. */ #offcanvasLeft #liquidMobileNav > .nav-item > .dropdown-toggle.show::after, #offcanvasLeft #liquidMobileNav > .nav-item > .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); } /* * Keep the expanded submenu below the row. */ #offcanvasLeft #liquidMobileNav > .nav-item > .dropdown-menu { position: static !important; width: 100% !important; margin: 3px 0 4px !important; border: 0 !important; box-shadow: none !important; transform: none !important; } } /* ========================================================= HOMEPAGE PLANS — SIX CARDS IN ONE DESKTOP ROW Applies only to .home-v3-plan-grid--six ========================================================= */ @media (min-width: 1200px) { .home-v3-plan-grid.home-v3-plan-grid--six { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px !important; } .home-v3-plan-grid--six .home-v3-plan { min-width: 0; min-height: 320px; padding: 18px; border-radius: 18px; } .home-v3-plan-grid--six .home-v3-plan__top { gap: 8px; margin-bottom: 16px; } .home-v3-plan-grid--six .home-v3-plan__top img { max-width: 40px; max-height: 40px; } .home-v3-plan-grid--six .home-v3-plan__top span { padding: 4px 6px; font-size: .54rem; white-space: nowrap; } .home-v3-plan-grid--six .home-v3-plan h3 { font-size: .91rem; line-height: 1.3; } .home-v3-plan-grid--six .home-v3-plan p { margin-bottom: 18px; font-size: .72rem; line-height: 1.5; } .home-v3-plan-grid--six .home-v3-plan__price strong { font-size: 1.65rem; } .home-v3-plan-grid--six .home-v3-plan__cta { margin-top: 14px; padding-top: 13px; font-size: .67rem; } } /* Keep the section readable below large-desktop width. */ @media (min-width: 992px) and (max-width: 1199.98px) { .home-v3-plan-grid.home-v3-plan-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .home-v3-plan-grid.home-v3-plan-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 767.98px) { .home-v3-plan-grid.home-v3-plan-grid--six { grid-template-columns: 1fr !important; } } /* ========================================================= TERMS OF SERVICE — PROFESSIONAL LEGAL PAGE REDESIGN Append to assets/css/style.css ========================================================= */ .company-content-page--terms .company-content-section { background: #f4f7fb; } .company-content-page--terms .service-section-heading { max-width: 880px; margin-left: auto; margin-right: auto; } .company-content-page--terms .legal-policy-toc { margin: 0 auto 24px; padding: 22px; max-width: 1180px; border: 1px solid #d8e5f2; border-radius: 20px; background: #fff; box-shadow: 0 16px 42px rgba(15, 39, 70, .06); } .company-content-page--terms .legal-policy-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .company-content-page--terms .legal-policy-toc__head strong { color: #0b2b52; font-size: .95rem; } .company-content-page--terms .legal-policy-toc nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .company-content-page--terms .legal-policy-toc nav a { display: flex; align-items: center; min-height: 42px; padding: 9px 12px; border: 1px solid #e0e9f4; border-radius: 11px; background: #f8fbff; color: #23476f; font-size: .78rem; font-weight: 650; line-height: 1.25; text-decoration: none; transition: border-color .2s ease, background .2s ease, color .2s ease; } .company-content-page--terms .legal-policy-toc nav a:hover, .company-content-page--terms .legal-policy-toc nav a:focus { border-color: #0d6efd; background: #eef6ff; color: #0d6efd; } .company-content-page--terms .legal-policy-preserved-note { display: flex; gap: 14px; align-items: flex-start; margin: 0 auto 24px; max-width: 1180px; padding: 16px 18px; border: 1px solid #cfe5dc; border-radius: 16px; background: #f1fbf6; color: #36564a; } .company-content-page--terms .legal-policy-preserved-note > i { margin-top: 3px; color: #15996a; } .company-content-page--terms .legal-policy-preserved-note strong, .company-content-page--terms .legal-policy-preserved-note span { display: block; } .company-content-page--terms .legal-policy-preserved-note strong { margin-bottom: 3px; color: #174f3c; } .company-content-page--terms .legal-policy-document { max-width: 1180px; margin-left: auto; margin-right: auto; padding: 0 !important; border: 0; background: transparent; box-shadow: none; } .company-content-page--terms .legal-policy-document > .position-relative { padding: 0 !important; overflow: visible !important; } .company-content-page--terms .legal-policy-document > .position-relative > .container { width: 100%; max-width: none; padding: 0; } .company-content-page--terms .legal-policy-document .row { row-gap: 14px; } .company-content-page--terms .legal-policy-document .feature-contents.section-heading { position: relative; height: 100%; margin: 0; padding: 24px 26px; border: 1px solid #d8e5f2; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(15, 39, 70, .045); } .company-content-page--terms .legal-policy-document .feature-contents h3 { margin: 0 0 14px; color: #0b2b52; font-size: 1.18rem; line-height: 1.35; scroll-margin-top: 105px; } .company-content-page--terms .legal-policy-document .feature-contents p, .company-content-page--terms .legal-policy-document .feature-contents li { color: #52647a; font-size: .93rem; line-height: 1.78; } .company-content-page--terms .legal-policy-document .feature-contents p:last-child { margin-bottom: 0; } .company-content-page--terms .legal-policy-document ul.disc-style { margin: 0; padding-left: 1.25rem; } .company-content-page--terms .legal-policy-document ul.disc-style > li { margin-bottom: 10px; padding-left: 4px; } .company-content-page--terms .legal-policy-document ul.disc-style ul.disc-style { margin-top: 10px; padding: 12px 14px 2px 28px; border-left: 3px solid #dce9f7; border-radius: 0 10px 10px 0; background: #f7faff; } .company-content-page--terms .legal-policy-document a { color: #0d6efd; text-decoration: underline; text-underline-offset: 2px; } .company-content-page--terms .promo-section { margin-top: 20px; padding-top: 0 !important; } .company-content-page--terms .promo-section .single-promo-card { height: 100%; border: 1px solid #d8e5f2; border-radius: 18px; box-shadow: 0 12px 34px rgba(15, 39, 70, .05); } html[data-theme="dark"] .company-content-page--terms .company-content-section { background: #0b1220; } html[data-theme="dark"] .company-content-page--terms .legal-policy-toc, html[data-theme="dark"] .company-content-page--terms .legal-policy-document .feature-contents.section-heading, html[data-theme="dark"] .company-content-page--terms .promo-section .single-promo-card { border-color: #334155; background: #111827; } html[data-theme="dark"] .company-content-page--terms .legal-policy-toc__head strong, html[data-theme="dark"] .company-content-page--terms .legal-policy-document .feature-contents h3 { color: #f1f5f9; } html[data-theme="dark"] .company-content-page--terms .legal-policy-toc nav a { border-color: #334155; background: #162033; color: #d5e2f1; } html[data-theme="dark"] .company-content-page--terms .legal-policy-document .feature-contents p, html[data-theme="dark"] .company-content-page--terms .legal-policy-document .feature-contents li { color: #cbd5e1; } html[data-theme="dark"] .company-content-page--terms .legal-policy-document ul.disc-style ul.disc-style { border-left-color: #40526b; background: #0e1728; } html[data-theme="dark"] .company-content-page--terms .legal-policy-preserved-note { border-color: #285643; background: #10251d; color: #b9d7cb; } html[data-theme="dark"] .company-content-page--terms .legal-policy-preserved-note strong { color: #d8f3e8; } @media (max-width: 991.98px) { .company-content-page--terms .legal-policy-toc nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .company-content-page--terms .legal-policy-toc { padding: 16px; border-radius: 16px; } .company-content-page--terms .legal-policy-toc__head { align-items: flex-start; flex-direction: column; } .company-content-page--terms .legal-policy-toc nav { grid-template-columns: 1fr; } .company-content-page--terms .legal-policy-document .feature-contents.section-heading { padding: 19px 17px; border-radius: 15px; } .company-content-page--terms .legal-policy-document .feature-contents h3 { font-size: 1.06rem; } .company-content-page--terms .legal-policy-document .feature-contents p, .company-content-page--terms .legal-policy-document .feature-contents li { font-size: .89rem; line-height: 1.72; } } /* ========================================================= PRIVACY + AUP — SHARED LEGAL POLICY REDESIGN Append once to assets/css/style.css ========================================================= */ .company-content-page--privacy-policy .company-content-section, .company-content-page--acceptable-use .company-content-section { background: #f4f7fb; } .company-content-page--privacy-policy .legal-policy-toc, .company-content-page--acceptable-use .legal-policy-toc { margin: 0 auto 24px; padding: 22px; max-width: 1180px; border: 1px solid #d8e5f2; border-radius: 20px; background: #fff; box-shadow: 0 16px 42px rgba(15,39,70,.06); } .company-content-page--privacy-policy .legal-policy-toc__head, .company-content-page--acceptable-use .legal-policy-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .company-content-page--privacy-policy .legal-policy-toc__head strong, .company-content-page--acceptable-use .legal-policy-toc__head strong { color: #0b2b52; font-size: .95rem; } .company-content-page--privacy-policy .legal-policy-toc nav, .company-content-page--acceptable-use .legal-policy-toc nav { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } .company-content-page--privacy-policy .legal-policy-toc nav a, .company-content-page--acceptable-use .legal-policy-toc nav a { display: flex; align-items: center; min-height: 42px; padding: 9px 12px; border: 1px solid #e0e9f4; border-radius: 11px; background: #f8fbff; color: #23476f; font-size: .78rem; font-weight: 650; line-height: 1.25; text-decoration: none; } .company-content-page--privacy-policy .legal-policy-toc nav a:hover, .company-content-page--acceptable-use .legal-policy-toc nav a:hover { border-color: #0d6efd; color: #0d6efd; } .company-content-page--privacy-policy .legal-policy-preserved-note, .company-content-page--acceptable-use .legal-policy-preserved-note { display: flex; gap: 14px; align-items: flex-start; margin: 0 auto 24px; max-width: 1180px; padding: 16px 18px; border: 1px solid #cfe5dc; border-radius: 16px; background: #f1fbf6; color: #36564a; } .company-content-page--privacy-policy .legal-policy-preserved-note > i, .company-content-page--acceptable-use .legal-policy-preserved-note > i { margin-top: 3px; color: #15996a; } .company-content-page--privacy-policy .legal-policy-preserved-note strong, .company-content-page--privacy-policy .legal-policy-preserved-note span, .company-content-page--acceptable-use .legal-policy-preserved-note strong, .company-content-page--acceptable-use .legal-policy-preserved-note span { display: block; } .company-content-page--privacy-policy .legal-policy-document, .company-content-page--acceptable-use .legal-policy-document { max-width: 1180px; margin: 0 auto; padding: 0 !important; border: 0; background: transparent; box-shadow: none; } .company-content-page--privacy-policy .legal-policy-document > section, .company-content-page--acceptable-use .legal-policy-document > section { padding: 0 !important; } .company-content-page--privacy-policy .legal-policy-document > section > .container, .company-content-page--acceptable-use .legal-policy-document > section > .container { width: 100%; max-width: none; padding: 0; } .company-content-page--privacy-policy .legal-policy-document .row, .company-content-page--acceptable-use .legal-policy-document .row { row-gap: 14px; } .company-content-page--privacy-policy .legal-policy-document .feature-contents.section-heading, .company-content-page--acceptable-use .legal-policy-document .feature-contents.section-heading { height: 100%; margin: 0; padding: 24px 26px; border: 1px solid #d8e5f2; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(15,39,70,.045); } .company-content-page--privacy-policy .legal-policy-document h3, .company-content-page--acceptable-use .legal-policy-document h3 { margin: 0 0 14px; color: #0b2b52; font-size: 1.16rem; line-height: 1.35; scroll-margin-top: 105px; } .company-content-page--privacy-policy .legal-policy-document p, .company-content-page--privacy-policy .legal-policy-document li, .company-content-page--acceptable-use .legal-policy-document p, .company-content-page--acceptable-use .legal-policy-document li { color: #52647a; font-size: .92rem; line-height: 1.78; } .company-content-page--privacy-policy .legal-policy-document ul, .company-content-page--acceptable-use .legal-policy-document ul { padding-left: 1.3rem; } html[data-theme="dark"] .company-content-page--privacy-policy .company-content-section, html[data-theme="dark"] .company-content-page--acceptable-use .company-content-section { background: #0b1220; } html[data-theme="dark"] .company-content-page--privacy-policy .legal-policy-toc, html[data-theme="dark"] .company-content-page--privacy-policy .legal-policy-document .feature-contents.section-heading, html[data-theme="dark"] .company-content-page--acceptable-use .legal-policy-toc, html[data-theme="dark"] .company-content-page--acceptable-use .legal-policy-document .feature-contents.section-heading { border-color: #334155; background: #111827; } html[data-theme="dark"] .company-content-page--privacy-policy .legal-policy-toc__head strong, html[data-theme="dark"] .company-content-page--privacy-policy .legal-policy-document h3, html[data-theme="dark"] .company-content-page--acceptable-use .legal-policy-toc__head strong, html[data-theme="dark"] .company-content-page--acceptable-use .legal-policy-document h3 { color: #f1f5f9; } html[data-theme="dark"] .company-content-page--privacy-policy .legal-policy-toc nav a, html[data-theme="dark"] .company-content-page--acceptable-use .legal-policy-toc nav a { border-color: #334155; background: #162033; color: #d5e2f1; } html[data-theme="dark"] .company-content-page--privacy-policy .legal-policy-document p, html[data-theme="dark"] .company-content-page--privacy-policy .legal-policy-document li, html[data-theme="dark"] .company-content-page--acceptable-use .legal-policy-document p, html[data-theme="dark"] .company-content-page--acceptable-use .legal-policy-document li { color: #cbd5e1; } html[data-theme="dark"] .company-content-page--privacy-policy .legal-policy-preserved-note, html[data-theme="dark"] .company-content-page--acceptable-use .legal-policy-preserved-note { border-color: #285643; background: #10251d; color: #b9d7cb; } @media (max-width: 991.98px) { .company-content-page--privacy-policy .legal-policy-toc nav, .company-content-page--acceptable-use .legal-policy-toc nav { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 575.98px) { .company-content-page--privacy-policy .legal-policy-toc nav, .company-content-page--acceptable-use .legal-policy-toc nav { grid-template-columns: 1fr; } .company-content-page--privacy-policy .legal-policy-document .feature-contents.section-heading, .company-content-page--acceptable-use .legal-policy-document .feature-contents.section-heading { padding: 19px 17px; } } /* ========================================================= ABOUT US HERO — IMAGE + BRAND HEADING FIX Append once to assets/css/style.css ========================================================= */ .about-us-page .service-hero-v3__logo img { display: block; width: 100%; max-width: 92px; height: auto; object-fit: contain; } /* ========================================================= CONTACT PAGE + TESTIMONIAL REGRESSION FIXES ========================================================= */ /* Keep every review accessible if the slider library is delayed or blocked. */ .home-v3 .home-v3-review-slider:not(.swiper-initialized) .swiper-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; transform: none !important; } .home-v3 .home-v3-review-slider:not(.swiper-initialized) .swiper-slide { width: auto !important; margin: 0 !important; } .home-v3 .home-v3-review-slider:not(.swiper-initialized) .swiper-pagination { display: none; } /* Pills designed for the dark hero need a stronger light-section palette. */ .service-page .service-section:not(.service-section--dark) .service-status-pill { border-color: #b9dcf6; background: #eaf7ff; color: #07569b !important; } /* Contact-form credential warning on a light card. */ .service-page #contact-form .contact-security-note { border-color: #c8dff2; background: #edf7ff; box-shadow: 0 7px 18px rgba(8, 43, 82, .06); } .service-page #contact-form .contact-security-note > i { color: #0874bd; background: #d8efff; } .service-page #contact-form .contact-security-note strong { color: #0b2b52 !important; } .service-page #contact-form .contact-security-note span { color: #405870 !important; line-height: 1.45; } /* Two-child CTAs use a dedicated grid so copy and buttons never collide. */ .service-cta-v3--split { grid-template-columns: minmax(0, 1fr) minmax(220px, 245px); gap: 28px; } .service-cta-v3--split > div:first-child { min-width: 0; } .service-cta-v3__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 220px; } .service-cta-v3__actions .service-btn { width: 100%; white-space: normal; text-align: center; } .modern-footer__security-note { display: flex; align-items: flex-start; justify-content: center; gap: 7px; color: #c9dced !important; font-size: .7rem; line-height: 1.45; text-align: left; } .modern-footer__security-note i { margin-top: 2px; color: #75defa; } .contact-turnstile-shell { width: 100%; min-height: 65px; padding: 8px; overflow-x: auto; border: 1px solid #c8dff2; border-radius: 13px; background: #f7fbff; } .contact-turnstile { width: 100%; min-height: 65px; } .contact-turnstile iframe { max-width: 100%; } .contact-turnstile-noscript { display: block; padding: 8px; color: #7a1f2b; font-size: .75rem; line-height: 1.45; } .contact-turnstile-shell--footer { border-color: rgba(255, 255, 255, .14); background: rgba(4, 16, 32, .32); } .contact-turnstile-shell--footer .contact-turnstile-noscript { color: #ffd4da; } html[data-theme="dark"] .service-page .service-section:not(.service-section--dark) .service-status-pill { border-color: rgba(103, 222, 255, .24); background: rgba(59, 202, 255, .10); color: #a7ecff !important; } html[data-theme="dark"] .service-page #contact-form .contact-security-note { border-color: rgba(255, 255, 255, .10); background: rgba(3, 21, 47, .42); box-shadow: none; } html[data-theme="dark"] .service-page #contact-form .contact-security-note > i { color: #71ddff; background: linear-gradient(145deg, rgba(86, 215, 255, .18), rgba(93, 97, 237, .20)); } html[data-theme="dark"] .service-page #contact-form .contact-security-note strong { color: #fff !important; } html[data-theme="dark"] .service-page #contact-form .contact-security-note span { color: rgba(222, 238, 252, .78) !important; } html[data-theme="dark"] .contact-turnstile-shell--light { border-color: rgba(255, 255, 255, .12); background: rgba(3, 21, 47, .35); } html[data-theme="dark"] .contact-turnstile-shell--light .contact-turnstile-noscript { color: #ffd4da; } @media (max-width: 991.98px) { .service-cta-v3--split { grid-template-columns: 1fr; } .service-cta-v3__actions { width: 100%; min-width: 0; max-width: 520px; margin: 0 auto; flex-direction: row; } } @media (max-width: 767.98px) { .home-v3 .home-v3-review-slider:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: 1fr; } .service-cta-v3__actions { flex-direction: column; } } .about-us-page #about-us-title { max-width: 100%; } .about-us-page #about-us-title .about-us-hero-brand { display: block; max-width: 100%; font-size: clamp(2.55rem, 4.35vw, 4.15rem); line-height: 1.02; letter-spacing: -0.045em; white-space: nowrap; } @media (max-width: 1199.98px) { .about-us-page #about-us-title .about-us-hero-brand { font-size: clamp(2.35rem, 4.7vw, 3.6rem); } } @media (max-width: 991.98px) { .about-us-page #about-us-title .about-us-hero-brand { font-size: clamp(2.35rem, 7vw, 3.5rem); white-space: normal; overflow-wrap: normal; word-break: normal; } } @media (max-width: 575.98px) { .about-us-page #about-us-title .about-us-hero-brand { font-size: clamp(2.05rem, 10vw, 2.8rem); letter-spacing: -0.035em; } .about-us-page .service-hero-v3__topline { align-items: center; gap: 12px; } .about-us-page .service-hero-v3__logo img { max-width: 72px; } } /* ========================================================= SERVICE HERO TITLE — COLUMN WIDTH + DESCENDER FIX ========================================================= */ /* * Gradient-clipped display text needs a little space below its line box. * This keeps descenders (for example the "g" in Management) fully visible. */ .service-page .service-hero-v3__title { overflow: visible; line-height: 1.08; } .service-page .service-hero-v3__title > span { overflow: visible; padding-bottom: .1em; line-height: 1.1; } /* Keep the long contact brand name inside the left Bootstrap column. */ .service-page #contact-page-title { max-width: 100%; font-size: clamp(2.75rem, 4.35vw, 4.15rem); } .service-page #contact-page-title > span { max-width: 100%; font-size: .9em; letter-spacing: -.045em; white-space: nowrap; } @media (max-width: 575.98px) { .service-page #contact-page-title { font-size: clamp(2.15rem, 11vw, 3rem); } .service-page #contact-page-title > span { font-size: .86em; } } /* ========================================================= COOKIE CONSENT BANNER ========================================================= */ .cookie-consent-banner { position: fixed; z-index: 1085; right: 18px; bottom: 18px; left: 18px; max-width: 1080px; margin: 0 auto; opacity: 0; pointer-events: none; transform: none; transition: opacity .2s ease; } .cookie-consent-banner[hidden] { display: none !important; } .cookie-consent-banner.is-visible { opacity: 1; pointer-events: auto; } .cookie-consent-banner__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 15px; align-items: center; padding: 16px 17px; border: 1px solid rgba(116, 173, 224, .34); border-radius: 18px; background: rgba(7, 28, 57, .97); box-shadow: 0 22px 55px rgba(1, 12, 28, .32); color: #fff; backdrop-filter: blur(14px); } .cookie-consent-banner__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid rgba(85, 216, 255, .2); border-radius: 13px; background: linear-gradient(145deg, rgba(30, 141, 255, .24), rgba(116, 91, 232, .22)); color: #78ddff; font-size: 1.08rem; } .cookie-consent-banner__copy { min-width: 0; } .cookie-consent-banner__copy strong { display: block; margin-bottom: 3px; color: #fff; font-size: .95rem; line-height: 1.35; } .cookie-consent-banner__copy p { margin: 0; color: #c9daeb; font-size: .78rem; line-height: 1.55; } .cookie-consent-banner__copy a { color: #72dcff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .cookie-consent-banner__accept, .cookie-consent-banner__close { appearance: none; border: 0; cursor: pointer; } .cookie-consent-banner__accept { min-height: 42px; padding: 10px 21px; border-radius: 12px; background: linear-gradient(135deg, #0d78f2, #765be8); box-shadow: 0 9px 22px rgba(13, 110, 242, .25); color: #fff; font-size: .8rem; font-weight: 750; } .cookie-consent-banner__close { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 11px; background: rgba(255, 255, 255, .07); color: #dceaf7; } .cookie-consent-banner__accept:hover, .cookie-consent-banner__accept:focus-visible { filter: brightness(1.08); } .cookie-consent-banner__close:hover, .cookie-consent-banner__close:focus-visible { border-color: rgba(114, 220, 255, .5); background: rgba(114, 220, 255, .12); color: #fff; } .cookie-consent-banner__accept:focus-visible, .cookie-consent-banner__close:focus-visible, .cookie-consent-banner__copy a:focus-visible { outline: 3px solid rgba(114, 220, 255, .42); outline-offset: 3px; } @media (max-width: 767.98px) { .cookie-consent-banner { right: 8px; bottom: 8px; left: 8px; } .cookie-consent-banner__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; padding: 14px; border-radius: 16px; } .cookie-consent-banner__accept { grid-column: 1 / -1; width: 100%; } .cookie-consent-banner__close { grid-column: 3; grid-row: 1; } } @media (max-width: 420px) { .cookie-consent-banner__icon { display: none; } .cookie-consent-banner__inner { grid-template-columns: minmax(0, 1fr) auto; } .cookie-consent-banner__close { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { .cookie-consent-banner { transition: none; } } /* Keep the primary text face stable during first paint. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: optional; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: block; src: url("../fonts/fa-solid-900.woff2") format("woff2"); } @font-face { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/fa-brands-400.woff2") format("woff2"); } /* Mobile-only paint path for the homepage hero. Desktop selectors remain unchanged; phones can defer the below-fold operations card and avoid expensive backdrop compositing during first paint. */ @media (max-width: 767.98px) { .home-v3-hero > .container > .row > .col-lg-6:nth-child(2) { content-visibility: auto; contain-intrinsic-block-size: 780px; } .home-v3-eyebrow, .home-v3-btn--outline, .home-v3-ops-card { -webkit-backdrop-filter: none; backdrop-filter: none; } .home-v3-hero::before { -webkit-mask-image: none; mask-image: none; } } /* Keep the desktop hero geometry stable while the preloaded faces finish decoding. The card already resolves to this height at wide breakpoints; making it explicit prevents a transient font-metric change from moving the entire hero row, without changing its desktop appearance. */ @media (min-width: 1280px) { .home-v3-ops-card { height: 500px; min-height: 500px; } }