/* ========================================================= KIVARRO — Header (layout) + FIXED Full-bleed Mega + GoDaddy left list (refined spacing & promo sizing) ========================================================= */ /* ---------- Header layout (≥1024px) ---------- */ @media (min-width:1024px){ header[aria-describedby="builder-header-main"] .container{ max-width:100% !important; width:100% !important; padding-left:40px !important; padding-right:40px !important; overflow:visible !important; } /* left menu / right buttons */ header[aria-describedby="builder-header-main"] [aria-describedby="header-navigation-column"]{ margin-left:0 !important; margin-right:auto !important; justify-content:flex-start !important; flex:1 1 auto !important; } header[aria-describedby="builder-header-main"] [aria-describedby="header-operations-column"]{ margin-left:auto !important; justify-content:flex-end !important; flex:0 0 auto !important; } header[aria-describedby="builder-header-main"]{ position:relative !important; overflow:visible !important; box-shadow:none !important; border-bottom:none !important; } header[aria-describedby="builder-header-main"] nav[aria-describedby="nav-menu"]{ height:64px !important; padding:0 !important; overflow:visible !important; } } /* ---------- Breakpoints: text menu vs hamburger ---------- */ @media (min-width:1200px){ header[aria-describedby="builder-header-main"] [aria-describedby="header-navigation-column"]{ display:flex !important; } header[aria-describedby="builder-header-main"] [aria-describedby="mobile-menu"], header[aria-describedby="builder-header-main"] [aria-describedby="mobile-sidebar-drawer"]{ display:none !important; visibility:hidden !important; opacity:0 !important; } } @media (max-width:1199.98px){ header[aria-describedby="builder-header-main"] [aria-describedby="header-navigation-column"]{ display:none !important; } header[aria-describedby="builder-header-main"] [aria-describedby="mobile-menu"]{ display:flex !important; } } /* ============= FIXED, VIEWPORT-FULL MEGA (desktop) ============= */ @media (min-width:1200px){ /* stop LI being a positioning context */ header[aria-describedby="builder-header-main"] li.group\/nav-item{ position:static !important; } /* fixed, full-bleed panel with fluid gutters */ header[aria-describedby="builder-header-main"] li.group\/nav-item > div[aria-describedby="sub-menu"][data-kiv-enhanced="1"]{ position: fixed !important; left: 0 !important; right: 0 !important; top: var(--kiv-header-h, 64px) !important; /* set via JS */ transform: none !important; margin: 0 !important; /* use left/right edges (avoid 100vw scrollbar issues) */ width: auto !important; max-width: none !important; /* fluid gutters */ padding-left: clamp(20px, 5vw, 80px) !important; /* refined */ padding-right: clamp(20px, 5vw, 80px) !important; /* refined */ padding-top: 18px !important; padding-bottom: 18px !important; z-index: 9999 !important; box-sizing: border-box; background: transparent !important; border: none !important; box-shadow: none !important; /* hidden by default; revealed on hover */ visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s ease, visibility .15s ease; } /* keep open while over the li OR the panel */ header[aria-describedby="builder-header-main"] li.group\/nav-item:hover > div[aria-describedby="sub-menu"][data-kiv-enhanced="1"], header[aria-describedby="builder-header-main"] li.group\/nav-item > div[aria-describedby="sub-menu"][data-kiv-enhanced="1"]:hover{ visibility: visible !important; opacity: 1 !important; pointer-events: auto; } /* white sheet */ header[aria-describedby="builder-header-main"] li.group\/nav-item > div[aria-describedby="sub-menu"][data-kiv-enhanced="1"]::before{ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0 0 12px 12px; background: #fff; border: 1px solid #eee; box-shadow: 0 20px 50px rgba(0,0,0,.12); } /* ---------- GoDaddy-style left column list ---------- */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-mega-wrap{ display: grid !important; align-items: start !important; /* Roomy left list | slightly narrower promo (refined) */ grid-template-columns: clamp(420px, 34vw, 560px) clamp(360px, 30vw, 480px) !important; column-gap: 40px !important; max-width: 1440px !important; /* tighter band like GoDaddy */ margin-inline: auto; } .kiv-section-title{ font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; margin: 4px 0 14px; font-weight: 700; } /* single vertical list with breathing room */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid{ display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li{ padding-block: 6px; /* extra space between rows */ border-bottom: 1px solid #f1f3f5; } header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li:last-child{ border-bottom: none; } /* row visuals */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li > a{ display: grid !important; grid-template-columns: 44px 1fr auto; /* icon | label | badge */ align-items: center; gap: 12px !important; min-height: 52px !important; /* refined (was 56) */ padding: 8px 10px !important; /* refined */ border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color:#111 !important; font-size: 15.5px !important; font-weight:500 !important; line-height:1.35; transition: background .18s ease, color .18s ease; } header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li > a:hover{ background: #f8fafc !important; color: #000 !important; } /* icon bubble from data-icon (slightly smaller) */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li > a::before{ content: attr(data-icon); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; /* refined */ background: #eef2ff; color: #374151; font-size: 17px; font-weight: 600; } /* badge from data-badge */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li > a::after{ content: attr(data-badge); display: inline-block; visibility: hidden; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #1f2937; background: #e5f5ff; border: 1px solid #bee6ff; padding: 4px 8px; border-radius: 999px; line-height: 1; margin-left: 8px; } header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li > a[data-badge]::after{ visibility: visible; } /* promo card (smaller image & cleaner rhythm) */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-mega__promo{ display: flex !important; flex-direction: column !important; background:#fff !important; border:1px solid #e6e8eb !important; border-radius:12px !important; overflow:hidden !important; box-shadow:0 8px 32px rgba(0,0,0,.06) !important; } header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-mega__img{ width:100% !important; height:clamp(160px,16vw,210px) !important; /* refined size */ object-fit:cover !important; display:block !important; } header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-mega__body{ padding: 16px 18px !important; color:#444; font-size:14px !important; line-height:1.45; } header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-mega__body strong{ display:block; margin-bottom:6px; font-size:16px !important; font-weight:700 !important; color:#111; } /* stack promo under list on narrower desktops */ @media (max-width:1399.98px){ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-mega-wrap{ grid-template-columns: 1fr !important; max-width: 980px !important; } } /* safety */ html, body { overflow-x: hidden; } } /* ===== GoDaddy-like band: full width content + right-narrow promo ===== */ @media (min-width:1200px){ /* Let the inner content span the full white sheet */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-mega-wrap{ width: 100% !important; max-width: none !important; /* override 1440/1800 caps */ grid-template-columns: 1fr auto !important; /* list fills, promo hugs right */ column-gap: 48px !important; /* breathing room between list & promo */ align-items: start !important; } /* Make the promo a neat, narrow card aligned to the right gutter */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-mega__promo{ width: clamp(360px, 30vw, 480px) !important; /* GoDaddy-ish width */ justify-self: end !important; /* stick to the right */ } /* Keep the promo image modest so the list remains the star */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-mega__img{ height: clamp(160px, 16vw, 210px) !important; } /* Comfortable row rhythm (from your last tweak) */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li{ padding-block: 6px; border-bottom: 1px solid #f1f3f5; } header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li:last-child{ border-bottom: none; } /* Slightly slimmer row height & icon bubble for cleaner alignment */ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li > a{ min-height: 52px !important; padding: 8px 10px !important; font-size: 15.5px !important; } header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-links-grid > li > a::before{ width: 34px; height: 34px; border-radius: 9px; font-size: 17px; } /* Tighten the sheet gutter a touch (optional) */ header[aria-describedby="builder-header-main"] li.group\/nav-item > div[aria-describedby="sub-menu"][data-kiv-enhanced="1"]{ padding-left: clamp(20px, 5vw, 80px) !important; padding-right: clamp(20px, 5vw, 80px) !important; } } /* Stack promo under the list a bit earlier so nothing clips on mid desktops */ @media (min-width:1200px) and (max-width:1399.98px){ header[aria-describedby="builder-header-main"] div[aria-describedby="sub-menu"][data-kiv-enhanced="1"] .kiv-mega-wrap{ grid-template-columns: 1fr !important; max-width: none !important; /* ensure full width on these widths too */ } } /* Full-viewport blur/overlay that NEVER blocks hover */ .kiv-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.45); /* subtle dark */ backdrop-filter: blur(6px); /* the blur */ -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; /* IMPORTANT: keep this BELOW the header & panel so hover still works */ z-index: 500; /* hero/video etc are typically lower */ pointer-events: none; /* never intercept the mouse */ } /* Visible state */ .kiv-backdrop.is-visible{ opacity: 1; visibility: visible; } /* Make sure header and the mega stay above the blur */ @media (min-width:1200px){ header[aria-describedby="builder-header-main"]{ position: relative !important; z-index: 1000 !important; /* above the 500 backdrop */ } header[aria-describedby="builder-header-main"] li.group\/nav-item > div[aria-describedby="sub-menu"][data-kiv-enhanced="1"]{ z-index: 9999 !important; } } /* ========================================================= KIVARRO — Header (layout) + FIXED Full-bleed Mega + GoDaddy left list (refined spacing & promo sizing) ========================================================= */ /* ========================================================= KIVARRO — System Pages header (._stMenu) — SAFE BASE (No overlap with 2.0 header styles) ========================================================= */ @media (min-width:1200px){ /* Keep this strictly scoped to the system menu wrapper */ ._stMenu .container{ max-width:100% !important; padding-left:40px !important; padding-right:40px !important; } /* Left-align the nav items and add breathing room */ ._stMenu ._stMenu_mdl_ul{ display:flex !important; justify-content:flex-start !important; gap:28px !important; } /* Ensure the center group can grow while logo & right area stay tidy */ ._stMenu ._stMenu_mdl_all{ flex:1 1 auto !important; } ._stMenu ._stMenu_logo, ._stMenu ._stMenu_r8{ flex:0 0 auto !important; } } /* Optional: if the system dropdown already has a wrapper, this only polishes edges. It’s harmless if none of these classes exist, and it does NOT change layout. */ @media (min-width:1200px){ ._stMenu :is(._stMenu_dropdown, ._stMenu_drop, ._stMenu_submenu){ border-radius:0 0 12px 12px; border:1px solid #eee; box-shadow:0 20px 50px rgba(0,0,0,.12); background:#fff; } } /* ========================================================= System menu: force nav items to left (no impact on 2.0) ========================================================= */ @media (min-width:1200px){ /* Make the middle zone a flex row that can grow */ ._stMenu ._stMenu_mdl_all{ display:flex !important; align-items:center !important; gap:0 !important; flex:1 1 auto !important; } /* Ensure the nav list hugs the left, not centered */ ._stMenu ._stMenu_mdl_ul{ justify-content:flex-start !important; margin-left:0 !important; margin-right:auto !important; /* push any right-side items away */ gap:28px !important; /* breathing room between links */ } /* If any parent tries to center with text-align */ ._stMenu ._stMenu_mdl{ text-align:left !important; } /* Keep logo and right cluster fixed-width; middle group grows */ ._stMenu ._stMenu_logo, ._stMenu ._stMenu_r8{ flex:0 0 auto !important; } ._stMenu ._stMenu_logo{ margin-right:24px !important; } } /* ---------- 2.0 header: tidy the 992–1199px range ---------- */ @media (min-width:992px) and (max-width:1199.98px){ /* full-width container with modest gutters */ header[aria-describedby="builder-header-main"] .container{ max-width:100% !important; width:100% !important; padding-left:24px !important; padding-right:24px !important; overflow:visible !important; } /* compact bar height */ header[aria-describedby="builder-header-main"] nav[aria-describedby="nav-menu"]{ height:56px !important; padding:0 !important; overflow:visible !important; } /* hide desktop text menu; show hamburger cluster */ header[aria-describedby="builder-header-main"] [aria-describedby="header-navigation-column"]{ display:none !important; } header[aria-describedby="builder-header-main"] [aria-describedby="mobile-menu"]{ display:flex !important; align-items:center !important; } /* push right-side icons/hamburger to the far right */ header[aria-describedby="builder-header-main"] [aria-describedby="header-operations-column"]{ margin-left:auto !important; justify-content:flex-end !important; gap:14px !important; /* space between icons */ flex:0 0 auto !important; } /* keep the whole header un-clipped and flat */ header[aria-describedby="builder-header-main"]{ position:relative !important; overflow:visible !important; box-shadow:none !important; border-bottom:none !important; } } /* space between top level menu items */ @media (min-width:1200px){ /* Add spacing between nav items */ header[aria-describedby="builder-header-main"] ul[aria-describedby="header-nav-lists"] { display: flex !important; gap: 22px !important; /* adjust spacing between menu items */ align-items: center !important; margin-left: 22px !important; /* adjust as needed */ } /* Increase clickable area of top-level links */ header[aria-describedby="builder-header-main"] ul[aria-describedby="header-nav-lists"] > li > a { padding-left: 6px !important; padding-right: 6px !important; } } /* ===== Kivarro — Desktop header: transparent → solid on scroll ===== */ @media (min-width:1200px){ /* sticky, on top, transparent by default */ header[aria-describedby="builder-header-main"]{ position: fixed !important; top: 0; left: 0; right: 0; background: transparent !important; transition: background .25s ease, box-shadow .25s ease; z-index: 1000 !important; box-shadow: none !important; } /* when scrolled */ body.kiv-has-scrolled header[aria-describedby="builder-header-main"]{ background: #2b2b2b !important; box-shadow: 0 2px 10px rgba(0,0,0,.15) !important; } /* layout helpers (applied by JS) */ body.kiv-bleed { padding-top: var(--kiv-header-h, 64px); /* keep layout from jumping */ } /* the first content section gets pulled back under the header so the hero/background is visible behind the transparent header */ .kiv-bleed-target{ margin-top: calc(var(--kiv-header-h, 64px) * -1); padding-top: var(--kiv-header-h, 64px); } } /* Keep the EzyCourse editor bars above the site header (DESKTOP ONLY) */ @media (min-width:1200px){ /* Main purple admin bar */ .student_menu_topbar[aria-label="Student menu top bar"]{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 30000 !important; /* higher than your header/backdrop */ } /* The little rounded toggle button */ .student_menu_topbar_action{ position: fixed !important; top: 0; right: 0; z-index: 30001 !important; /* sit above the bar itself */ } /* Keep your site header under the admin bar */ header[aria-describedby="builder-header-main"]{ z-index: 1000 !important; /* lower than 30000 */ } } /* Header actions: white icons, no bg; white ring on hover/focus (DESKTOP ONLY) */ @media (min-width:1200px){ /* Base: make all action icons white and remove gray bg/border */ header[aria-describedby="builder-header-main"] [aria-describedby="operations-lists"] :is( [aria-describedby="header-search-icon"], [aria-describedby="header-message-icon"], [aria-describedby="header-notification-icon"], [aria-describedby="header-profile-photo"] ){ color:#fff !important; /* SVGs use currentColor */ background:transparent !important; /* no gray disc */ border:2px solid transparent !important; box-shadow:none !important; } /* Keep the wrappers circular & padded so the hit-area stays nice */ header[aria-describedby="builder-header-main"] [aria-describedby="operations-lists"] :is( [aria-describedby="header-search-icon"], [aria-describedby="header-message-icon"], [aria-describedby="header-notification-icon"], [aria-describedby="header-profile-photo"] ){ border-radius:999px !important; padding:.5rem !important; /* matches p-2 */ transition: border-color .2s ease, background-color .2s ease, color .2s ease; } /* Hover / focus / open state: show white circular outline */ header[aria-describedby="builder-header-main"] [aria-describedby="operations-lists"] :is( [aria-describedby="header-search-icon"], [aria-describedby="header-message-icon"], [aria-describedby="header-notification-icon"], [aria-describedby="header-profile-photo"] ):is(:hover, :focus-visible, [aria-expanded="true"]){ border-color:#fff !important; background:transparent !important; } /* Ensure the inline SVGs follow the white color */ header[aria-describedby="builder-header-main"] [aria-describedby="operations-lists"] svg{ stroke:currentColor !important; } /* Optional: remove any inherited gray from the profile image wrapper */ header[aria-describedby="builder-header-main"] [aria-describedby="header-profile-photo"] img{ background:transparent !important; } } /* See all button override with brand green */ [aria-describedby="see-all-message"] a, [aria-describedby="see-all-notification"] a { background: #0b757a !important; /* brand green */ color: #fff !important; transition: background-color 0.25s ease; } [aria-describedby="see-all-message"] a:hover, [aria-describedby="see-all-notification"] a:hover { background: #095d60 !important; /* slightly darker green on hover */ } /* ===== Align logo baseline with nav items (desktop only) ===== */ @media (min-width:1200px){ header[aria-describedby="builder-header-main"] [aria-describedby="header-logo-column"] { display: flex !important; align-items: center !important; position: relative; top: -4px; /* tweak this (-1px, -2px, -3px) until it looks perfect */ } } /* --- Swap Sign up to Login style (white bg, black text) --- */ a[href="/en/signup"] { background-color: #ffffff !important; border-color: #000000 !important; color: #000000 !important; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } /* Hover: grey background */ a[href="/en/signup"]:hover { background-color: #f0f0f0 !important; border-color: #f0f0f0 !important; color: #000000 !important; } /* --- Swap Login to Sign up style (brand green bg, white text) --- */ a[href="/en/login"] { background-color: #0b757a !important; border-color: #0b757a !important; color: #ffffff !important; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } /* Hover: slightly darker green */ a[href="/en/login"]:hover { background-color: #095d60 !important; border-color: #095d60 !important; color: #ffffff !important; } /* Performance polish for the sticky header */ @media (min-width:1200px){ header[aria-describedby="builder-header-main"]{ will-change: background; transform: translateZ(0); /* promote to its own layer */ backface-visibility: hidden; transition: background-color .25s ease; /* just color, not shadow */ } /* Apply shadow instantly (no animated shadow — cheaper to paint) */ body.kiv-has-scrolled header[aria-describedby="builder-header-main"]{ background-color: #2b2b2b !important; box-shadow: 0 2px 10px rgba(0,0,0,.15) !important; } } /* Header notification badge only (won’t affect builder UI) */ header[aria-describedby="builder-header-main"] [aria-describedby="operations-lists"] .bg-red-500 { background-color: #1ddbdb !important; /* aqua */ } /* ====== Gradient Scrollbar (Desktop only, ≥1200px) ====== */ @media (min-width:1200px) { /* Width */ ::-webkit-scrollbar { width: 6px; /* thin like Mac */ height: 6px; /* horizontal scrollbar if shown */ } /* Track */ ::-webkit-scrollbar-track { background: transparent; } /* Handle */ ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #0b757a, #1ddbdb); border-radius: 999px; } /* Handle hover */ ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #095d60, #17b9b9); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: #0b757a #ffffff00; /* thumb | track */ } } /* =========================== Kivarro – Programs Section Panel Background Usage: add class="kvx-program-bg" to the section wrapper This styles ONLY the background container. =========================== */ .kvx-program-bg{ /* Brand-ish palette you showed */ --teal-900:#1f2b2c; /* base charcoal-teal */ --teal-800:#223334; /* lighter top tint */ --teal-950:#182123; /* deeper edge tone */ --glow-cyan:rgba(52, 211, 205,.18); /* soft cyan glow */ --glow-teal:rgba(11, 117, 122,.20); /* brand teal glow */ --edge-sheen:rgba(255,255,255,.06); --radius:0px; position:relative; border-radius:var(--radius); overflow:hidden; /* Base gradient across the panel */ background: radial-gradient(130% 140% at 10% 8%, var(--teal-800) 0%, var(--teal-900) 46%, var(--teal-950) 100%); /* Lift from page */ box-shadow: 0 22px 48px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.12); } /* Layer 1: corner glows + inner vignette + rim sheen */ .kvx-program-bg::before{ content:""; position:absolute; inset:0; pointer-events:none; background: /* right-side cyan glow (behind the image area) */ radial-gradient(700px 380px at 76% 52%, var(--glow-cyan) 0%, transparent 65%), /* left soft teal lift */ radial-gradient(680px 360px at 6% 26%, var(--glow-teal) 0%, transparent 62%), /* inner vignette so edges fall off gently */ radial-gradient(115% 90% at 50% 58%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.18) 58%, transparent 72%), /* faint rim sheen from top */ radial-gradient(120% 140% at 50% -12%, var(--edge-sheen) 0%, transparent 60%); mix-blend-mode: normal; opacity: 1; } /* Layer 2: micro texture = dot grid + film grain (very subtle) */ .kvx-program-bg::after{ content:""; position:absolute; inset:0; pointer-events:none; background: /* dot grid */ radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 1.5px), /* grain (SVG turbulence) */ url("data:image/svg+xml;utf8,\ "); background-size: 16px 16px, /* dot grid spacing */ 220px 220px; /* grain tile */ background-repeat: repeat, repeat; mix-blend-mode: overlay; opacity:.18; /* keep delicate; tweak 0.12–0.20 */ } /* Optional: if your content sits flush, add comfortable padding here */ .kvx-program-bg{ padding: clamp(20px, 3vw, 32px); } /* Responsive tuning: soften textures and radius on smaller screens */ @media (max-width: 1024px){ .kvx-program-bg{ --radius:22px; } .kvx-program-bg::after{ opacity:.14 } } @media (max-width: 640px){ .kvx-program-bg{ --radius:18px; } .kvx-program-bg::after{ opacity:.10 } }