:root { --dm-green-deep: #0f2a1d; --dm-green-main: #1f4d36; --dm-green-accent: #2e7a55; --dm-gold: #f0a500; } /* ============================================================ CAMP DADDYMAN - DEFINITIVE MASTER CSS v3 Single source of truth. Wipe everything and paste this. ============================================================ */ /* ── GLOBAL ── */ .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { min-width: unset !important; } .t4-masthead .t4-masthead-detail { min-width: 100% !important; } /* FORCE hero text right and airy — max specificity */ div#cdm-hero-text { text-align: center !important; width: 100% !important; max-width: 900px !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: auto !important; margin-right: 60px !important; padding: 50px 40px !important; } div#cdm-hero-text h1 { font-size: 4rem !important; margin-bottom: 24px !important; line-height: 1.15 !important; } div#cdm-hero-text p { font-size: 1.15rem !important; margin-bottom: 40px !important; } div#cdm-hero-text .cdm-hero-btns { gap: 24px !important; justify-content: center !important; } #t4-header .t4-row.row { min-height: 300px !important; } .t4-main-body { padding-top: 0.3rem !important; padding-bottom: 3rem !important; background-color: #090909 !important; } .logo-img-sm { width: 100% !important; height: auto !important; max-width: 100% !important; display: block; margin: 0 auto; } .navbar-brand { padding-bottom: var(--t4-navbar-brand-padding-y); margin-right: var(--t4-navbar-brand-margin-end); font-size: var(--t4-navbar-brand-font-size); color: var(--t4-navbar-brand-color); white-space: nowrap; padding-top: 10px !important; } .t4-palette-mainnav { background-color: #090909 !important; } /* All section inners get black background */ .t4-section .t4-section-inner { position: relative; background-color: #000000 !important; } /* ══════════════════════════════════════════════ TOPBAR — full width flex row ══════════════════════════════════════════════ */ .t4-section:has(.t4-col.eshop-currency) { width: 100% !important; max-width: 100% !important; } .t4-section-inner:has(.t4-col.eshop-currency) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-height: 42px !important; padding: 0 !important; box-sizing: border-box !important; } .t4-section .t4-row:has(.t4-col.eshop-currency) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 16px !important; gap: 0 !important; box-sizing: border-box !important; } /* ── All topbar cols base ── */ .t4-col.eshop-currency, .t4-col.eshop-search, .t4-col.eshop-cart, .t4-col.eshop-topmenu { display: flex !important; flex-direction: row !important; align-items: center !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-height: 42px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* USD */ .t4-col.eshop-currency { padding-left: 4px !important; padding-right: 32px !important; } /* Search */ .t4-col.eshop-search { margin-left: 0 !important; } /* Cart */ .t4-col.eshop-cart { margin-left: 28px !important; } /* My Account — far right */ .t4-col.eshop-topmenu { margin-left: auto !important; justify-content: flex-end !important; padding-right: 16px !important; } .t4-col.eshop-topmenu ul, .t4-col.eshop-topmenu .nav, .t4-col.eshop-topmenu .list-inline { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .t4-col.eshop-topmenu li { display: inline-flex !important; align-items: center !important; } .t4-col.eshop-topmenu a { color: #aaa !important; font-size: 11.5px !important; text-decoration: none !important; padding: 0 6px !important; white-space: nowrap !important; transition: color 0.2s !important; } .t4-col.eshop-topmenu a:hover { color: #00c832 !important; } /* ── Search input ── */ #eshop-search .input-prepend.input-append { display: flex !important; flex-direction: row !important; height: 26px !important; margin: 0 !important; } #eshop-search input.form-control.product_search { height: 26px !important; font-size: 12px !important; padding: 3px 10px !important; border-radius: 6px 0 0 6px !important; width: 220px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(0,200,50,0.45) !important; border-right: none !important; color: #fff !important; line-height: 26px !important; } #eshop-search input.form-control.product_search::placeholder { color: #777 !important; font-size: 11px !important; } #eshop-search .add-on { height: 26px !important; width: 30px !important; background: #00c832 !important; border: none !important; border-radius: 0 6px 6px 0 !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 13px !important; } /* ── Cart ── */ #eshop-cart.eshop-cart { display: flex !important; align-items: center !important; } #eshop-cart .eshop-items a { color: #FFD700 !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: 5px !important; padding: 3px 12px !important; height: 26px !important; border: 1px solid rgba(255,215,0,0.4) !important; border-radius: 6px !important; transition: all 0.2s !important; } #eshop-cart .eshop-items a:hover { border-color: #FFD700 !important; background: rgba(255,215,0,0.08) !important; } #eshop-cart .fa-shopping-cart { font-size: 13px !important; color: #FFD700 !important; } #eshop_result { display: none !important; } /* ── T4 hamburger — hidden everywhere, we use custom one ── */ #triggerButton, .t4-offcanvas-toggle, .js-offcanvas-trigger { display: none !important; visibility: hidden !important; } /* ── Custom hamburger — show on mobile only ── */ #cdm-hamburger { display: none; } /* ══════════════════════════════════════════════ HEADER — Rise From Di Gully hero ══════════════════════════════════════════════ */ #t4-header { background: linear-gradient(135deg, rgba(0,8,0,0.82) 0%, rgba(0,22,0,0.72) 40%, rgba(0,8,0,0.88) 100%), url('/cla/images/2025/07/17/camp_daddyman-hero-image.png') center center / cover no-repeat !important; border-bottom: none !important; overflow: hidden !important; } #t4-header .t4-section-inner { position: relative !important; background-color: transparent !important; } #t4-header .t4-section-inner::before { content: '♪ 🎬 📚 ♫ 🎞️ 📖 🇯🇲 ♪♫♪ 🌟' !important; position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.4rem !important; letter-spacing: 2rem !important; opacity: 0.06 !important; pointer-events: none !important; word-break: break-all !important; line-height: 3rem !important; overflow: hidden !important; color: #fff !important; animation: floatSymbols 18s ease-in-out infinite !important; z-index: 0 !important; } @keyframes floatSymbols { 0%, 100% { transform: translateY(0); opacity: 0.05; } 50% { transform: translateY(-10px); opacity: 0.10; } } #t4-header .t4-section-inner::after { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at 20% 50%, rgba(0,200,50,0.15) 0%, transparent 55%), radial-gradient(ellipse at 80% 30%, rgba(255,215,0,0.10) 0%, transparent 50%) !important; pointer-events: none !important; z-index: 0 !important; } #t4-header .t4-row.row { min-height: 200px !important; position: relative !important; align-items: center !important; display: flex !important; } #t4-header .t4-col.logo { position: relative !important; z-index: 5 !important; background: transparent !important; padding-left: 24px !important; } #t4-header .navbar-brand, #t4-header .logo-image, #t4-header .logo-image a { background: transparent !important; background-color: transparent !important; } #t4-header .logo-img, #t4-header .logo-img-sm { max-width: 190px !important; min-width: unset !important; width: auto !important; height: auto !important; background: transparent !important; mix-blend-mode: screen !important; } #t4-header .t4-row.row::before { content: 'RISE FROM DI GULLY' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; font-size: clamp(1.8rem, 3.5vw, 3.2rem) !important; font-weight: 900 !important; letter-spacing: 0.18em !important; color: rgba(255,215,0,0.18) !important; white-space: nowrap !important; pointer-events: none !important; z-index: 1 !important; text-shadow: 0 0 60px rgba(255,215,0,0.2) !important; } #t4-header .t4-row.row::after { content: 'From dust. From struggle. From places the world forgot — we rise, we build, we reclaim our throne.' !important; position: absolute !important; bottom: 14px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 0.67rem !important; color: rgba(255,255,255,0.28) !important; white-space: nowrap !important; pointer-events: none !important; letter-spacing: 0.06em !important; z-index: 1 !important; font-style: italic !important; } /* ══════════════════════════════════════════════ NAV — full width, one clean border ══════════════════════════════════════════════ */ #t4-header .t4-col.mainnav { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } #t4-header .t4-row:has(.t4-col.mainnav) { background: #010d00 !important; width: 100% !important; flex-wrap: wrap !important; border-top: 2px solid #00c832 !important; border-bottom: 2px solid rgba(0,200,50,0.2) !important; } #t4-header .t4-section-inner:has(.t4-col.mainnav) { background: #010d00 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; } #t4-header .t4-navbar, #t4-megamenu-mainmenu, .t4-megamenu, nav.navbar, .t4-navbar { background: #010d00 !important; border: none !important; padding: 0 16px !important; width: 100% !important; } .navbar-nav .nav-link { color: #ddd !important; font-weight: 600 !important; font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 12px 14px !important; transition: color 0.2s !important; } .navbar-nav .nav-link:hover, .navbar-nav .nav-item.active > .nav-link, .navbar-nav .nav-item.current > .nav-link { color: #00c832 !important; } .dropdown-menu { background: #010d00 !important; border: 1px solid rgba(0,200,50,0.25) !important; border-radius: 8px !important; } .dropdown-item { color: #ccc !important; font-size: 0.83rem !important; padding: 8px 16px !important; } .dropdown-item:hover { background: rgba(0,200,50,0.1) !important; color: #00c832 !important; } /* ══════════════════════════════════════════════ HIDE UNWANTED ══════════════════════════════════════════════ */ #sppb-addon-wrapper-e10847a9-46e6-450d-a5c5-681b825d05e7 { display: none !important; } .t4-col.slideshow { display: none !important; } /* ══════════════════════════════════════════════ MOBILE — max-width: 991px USD | Search | Cart | ☰ hamburger ══════════════════════════════════════════════ */ @media (max-width: 991px) { /* Topbar row — tight, no wrap */ .t4-section .t4-row:has(.t4-col.eshop-currency) { padding: 0 8px !important; flex-wrap: nowrap !important; } .t4-section-inner:has(.t4-col.eshop-currency) { min-height: 40px !important; } /* Show search and cart */ .t4-col.eshop-search, .t4-col.eshop-cart { display: flex !important; } /* Hide My Account */ .t4-col.eshop-topmenu { display: none !important; } /* USD compact */ .t4-col.eshop-currency { padding-left: 4px !important; padding-right: 12px !important; flex: 0 0 auto !important; } /* Search fills space */ .t4-col.eshop-search { flex: 1 1 auto !important; margin-left: 0 !important; min-width: 0 !important; } #eshop-search .input-prepend.input-append { width: 100% !important; } #eshop-search input.form-control.product_search { width: 100% !important; min-width: 0 !important; font-size: 11px !important; } /* Cart icon only */ .t4-col.eshop-cart { flex: 0 0 auto !important; margin-left: 8px !important; } #eshop-cart #eshop-cart-total { display: none !important; } #eshop-cart .eshop-items a { padding: 3px 8px !important; border: none !important; font-size: 11px !important; } /* Custom hamburger — show on mobile */ #cdm-hamburger { display: flex !important; flex: 0 0 30px !important; width: 30px !important; height: 30px !important; margin-left: 8px !important; align-items: center !important; justify-content: center !important; background: rgba(0,200,50,0.15) !important; border: 1px solid rgba(0,200,50,0.5) !important; border-radius: 5px !important; color: #00c832 !important; font-size: 14px !important; cursor: pointer !important; flex-shrink: 0 !important; } /* Header smaller */ #t4-header .t4-row.row { min-height: 140px !important; } #t4-header .t4-row.row::before { font-size: 1.4rem !important; letter-spacing: 0.08em !important; } #t4-header .t4-row.row::after { display: none !important; } /* Logo smaller */ #t4-header .t4-col.logo { flex: 0 0 auto !important; max-width: 80px !important; padding-left: 8px !important; } #t4-header .logo-img, #t4-header .logo-img-sm { max-width: 70px !important; height: auto !important; } .navbar-brand { padding-top: 10px !important; } } @media (max-width: 400px) { #eshop-search input.form-control.product_search { font-size: 10px !important; } } .t4-offcanvas { background: #060b01; } .t4-offcanvas .t4-off-canvas-header { background-color: #061100; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.75rem 1.5rem; } @media (max-width: 991px) { /* Space between cart and hamburger */ #cdm-hamburger { margin-left: 12px !important; } /* Small gap between search and cart */ .t4-col.eshop-cart { margin-left: 10px !important; } } .t4-col.eshop-search { flex: 1 1 auto !important; margin-left: 0 !important; min-width: 140px !important; } .row > * { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--t4-gutter-x) * 0.5); /* padding-left: calc(var(--t4-gutter-x) * 0.5); */ margin-top: var(--t4-gutter-y); } .row > * { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--t4-gutter-x) * 0.5); padding-left: calc(var(--t4-gutter-x) * 0.5); margin-top: var(--t4-gutter-y); margin-left: -10px !important; } @media (max-width: 991px) { .t4-section .t4-row:has(.t4-col.eshop-currency) { justify-content: space-between !important; padding: 0 12px !important; } /* Each item takes equal space */ .t4-col.eshop-currency, .t4-col.eshop-search, .t4-col.eshop-cart, #cdm-hamburger { flex: 1 1 auto !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } /* Search still fills most space */ .t4-col.eshop-search { flex: 2 1 auto !important; } } .t4-col.eshop-currency, .t4-col.eshop-search, .t4-col.eshop-cart, #cdm-hamburger { flex: 1 1 auto !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; padding-left: 10px !important; padding-right: 10px !important; } #t4-header { background: linear-gradient(135deg, rgba(0,8,0,0.82) 0%, rgba(0,22,0,0.72) 40%, rgba(0,8,0,0.88) 100%), url('/images/2026/camp_daddyman-hero-background.jpg') center center / cover no-repeat !important; border-bottom: none !important; overflow: hidden !important; } /* ── HEADER HERO TEXT — centered and cinematic ── */ #t4-header .t4-col.header-hero { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; z-index: 5 !important; } #cdm-hero-text { text-align: center !important; width: 100% !important; max-width: 700px !important; margin: 0 auto !important; padding: 30px 20px !important; } #cdm-hero-text h1 { font-size: clamp(2rem, 4.5vw, 4rem) !important; color: #FFD700 !important; font-weight: 900 !important; letter-spacing: 0.15em !important; text-shadow: 0 0 40px rgba(255,215,0,0.5), 0 2px 12px rgba(0,0,0,0.9) !important; margin-bottom: 16px !important; line-height: 1.1 !important; animation: glowPulse 3s ease-in-out infinite !important; } @keyframes glowPulse { 0%, 100% { text-shadow: 0 0 30px rgba(255,215,0,0.4), 0 2px 8px rgba(0,0,0,0.9); } 50% { text-shadow: 0 0 60px rgba(255,215,0,0.7), 0 2px 8px rgba(0,0,0,0.9); } } #cdm-hero-text p { font-size: clamp(0.9rem, 1.8vw, 1.1rem) !important; color: rgba(255,255,255,0.88) !important; line-height: 1.7 !important; margin: 0 auto 28px !important; max-width: 560px !important; text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important; } /* Also hide the ghost watermark since we now have real text */ #t4-header .t4-row.row::before { display: none !important; } /* And hide the ghost tagline */ #t4-header .t4-row.row::after { display: none !important; } /* ============================================================ CAMP DADDYMAN - DEFINITIVE MASTER CSS v4 Single source of truth. Wipe everything and paste this. ============================================================ */ /* ── GLOBAL ── */ .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { min-width: unset !important; } .t4-masthead .t4-masthead-detail { min-width: 100% !important; } .t4-main-body { padding-top: 0.3rem !important; padding-bottom: 3rem !important; background-color: #090909 !important; } .logo-img-sm { width: 100% !important; height: auto !important; max-width: 100% !important; display: block; margin: 0 auto; } .navbar-brand { padding-bottom: var(--t4-navbar-brand-padding-y); margin-right: var(--t4-navbar-brand-margin-end); font-size: var(--t4-navbar-brand-font-size); color: var(--t4-navbar-brand-color); white-space: nowrap; padding-top: 10px !important; } .t4-palette-mainnav { background-color: #090909 !important; } /* All section inners get black background */ .t4-section .t4-section-inner { position: relative; background-color: #000000 !important; } /* Bootstrap row reset */ .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--t4-gutter-x) * 0.5); padding-left: calc(var(--t4-gutter-x) * 0.5); margin-top: var(--t4-gutter-y); } /* ══════════════════════════════════════════════ TOPBAR — full width flex row ══════════════════════════════════════════════ */ .t4-section:has(.t4-col.eshop-currency) { width: 100% !important; max-width: 100% !important; } .t4-section-inner:has(.t4-col.eshop-currency) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-height: 42px !important; padding: 0 !important; box-sizing: border-box !important; } .t4-section .t4-row:has(.t4-col.eshop-currency) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 16px !important; gap: 0 !important; box-sizing: border-box !important; } /* ── All topbar cols base ── */ .t4-col.eshop-currency, .t4-col.eshop-search, .t4-col.eshop-cart, .t4-col.eshop-topmenu { display: flex !important; flex-direction: row !important; align-items: center !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-height: 42px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* USD */ .t4-col.eshop-currency { padding-left: 4px !important; padding-right: 32px !important; } /* Search */ .t4-col.eshop-search { flex: 1 1 auto !important; margin-left: 0 !important; min-width: 140px !important; } /* Cart */ .t4-col.eshop-cart { margin-left: 28px !important; } /* My Account — far right */ .t4-col.eshop-topmenu { margin-left: auto !important; justify-content: flex-end !important; padding-right: 16px !important; } .t4-col.eshop-topmenu ul, .t4-col.eshop-topmenu .nav, .t4-col.eshop-topmenu .list-inline { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .t4-col.eshop-topmenu li { display: inline-flex !important; align-items: center !important; } .t4-col.eshop-topmenu a { color: #aaa !important; font-size: 11.5px !important; text-decoration: none !important; padding: 0 6px !important; white-space: nowrap !important; transition: color 0.2s !important; } .t4-col.eshop-topmenu a:hover { color: #00c832 !important; } /* ── Search input ── */ #eshop-search .input-prepend.input-append { display: flex !important; flex-direction: row !important; height: 26px !important; margin: 0 !important; width: 100% !important; } #eshop-search input.form-control.product_search { height: 26px !important; font-size: 12px !important; padding: 3px 10px !important; border-radius: 6px 0 0 6px !important; width: 100% !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(0,200,50,0.45) !important; border-right: none !important; color: #fff !important; line-height: 26px !important; } #eshop-search input.form-control.product_search::placeholder { color: #777 !important; font-size: 11px !important; } #eshop-search .add-on { height: 26px !important; width: 30px !important; background: #00c832 !important; border: none !important; border-radius: 0 6px 6px 0 !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 13px !important; flex-shrink: 0 !important; } /* ── Cart ── */ #eshop-cart.eshop-cart { display: flex !important; align-items: center !important; } #eshop-cart .eshop-items a { color: #FFD700 !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: 5px !important; padding: 3px 12px !important; height: 26px !important; border: 1px solid rgba(255,215,0,0.4) !important; border-radius: 6px !important; transition: all 0.2s !important; } #eshop-cart .eshop-items a:hover { border-color: #FFD700 !important; background: rgba(255,215,0,0.08) !important; } #eshop-cart .fa-shopping-cart { font-size: 13px !important; color: #FFD700 !important; } #eshop_result { display: none !important; } /* ── T4 hamburger — hidden, using custom one ── */ #triggerButton, .t4-offcanvas-toggle, .js-offcanvas-trigger { display: none !important; visibility: hidden !important; } /* ── Custom hamburger — hidden by default ── */ #cdm-hamburger { display: none !important; } /* ══════════════════════════════════════════════ HEADER — new background image ══════════════════════════════════════════════ */ #t4-header { background: linear-gradient(135deg, rgba(0,8,0,0.82) 0%, rgba(0,22,0,0.72) 40%, rgba(0,8,0,0.88) 100%), url('/cla/images/2026/camp_daddyman-hero-background.jpg') center center / cover no-repeat !important; border-bottom: none !important; overflow: hidden !important; } #t4-header .t4-section-inner { position: relative !important; background-color: transparent !important; } /* Floating symbols layer */ #t4-header .t4-section-inner::before { content: '♪ 🎬 📚 ♫ 🎞️ 📖 🇯🇲 ♪♫♪ 🌟' !important; position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.4rem !important; letter-spacing: 2rem !important; opacity: 0.06 !important; pointer-events: none !important; word-break: break-all !important; line-height: 3rem !important; overflow: hidden !important; color: #fff !important; animation: floatSymbols 18s ease-in-out infinite !important; z-index: 0 !important; } @keyframes floatSymbols { 0%, 100% { transform: translateY(0); opacity: 0.05; } 50% { transform: translateY(-10px); opacity: 0.10; } } /* Radial glow layer */ #t4-header .t4-section-inner::after { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at 20% 50%, rgba(0,200,50,0.15) 0%, transparent 55%), radial-gradient(ellipse at 80% 30%, rgba(255,215,0,0.10) 0%, transparent 50%) !important; pointer-events: none !important; z-index: 0 !important; } #t4-header .t4-row.row { min-height: 200px !important; position: relative !important; align-items: center !important; display: flex !important; } /* Logo */ #t4-header .t4-col.logo { position: relative !important; z-index: 5 !important; background: transparent !important; padding-left: 24px !important; flex: 0 0 auto !important; } #t4-header .navbar-brand, #t4-header .logo-image, #t4-header .logo-image a { background: transparent !important; background-color: transparent !important; } #t4-header .logo-img, #t4-header .logo-img-sm { max-width: 190px !important; min-width: unset !important; width: auto !important; height: auto !important; background: transparent !important; mix-blend-mode: screen !important; } /* ── Hero text col — centered ── */ #t4-header .t4-col.header-hero { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; z-index: 5 !important; } #cdm-hero-text { text-align: center !important; width: 100% !important; max-width: 700px !important; margin: 0 auto !important; padding: 30px 20px !important; } #cdm-hero-text h1 { font-size: clamp(2rem, 4.5vw, 4rem) !important; color: #FFD700 !important; font-weight: 900 !important; letter-spacing: 0.15em !important; text-shadow: 0 0 40px rgba(255,215,0,0.5), 0 2px 12px rgba(0,0,0,0.9) !important; margin-bottom: 16px !important; line-height: 1.1 !important; animation: glowPulse 3s ease-in-out infinite !important; } @keyframes glowPulse { 0%, 100% { text-shadow: 0 0 30px rgba(255,215,0,0.4), 0 2px 8px rgba(0,0,0,0.9); } 50% { text-shadow: 0 0 60px rgba(255,215,0,0.7), 0 2px 8px rgba(0,0,0,0.9); } } #cdm-hero-text p { font-size: clamp(0.9rem, 1.8vw, 1.1rem) !important; color: rgba(255,255,255,0.88) !important; line-height: 1.7 !important; margin: 0 auto 28px !important; max-width: 560px !important; text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important; } .cdm-hero-btns { display: flex !important; gap: 16px !important; justify-content: center !important; flex-wrap: wrap !important; } .cdm-btn-play { display: inline-block !important; padding: 12px 28px !important; background: #f7931e !important; color: #000 !important; font-weight: 700 !important; text-decoration: none !important; border-radius: 4px !important; font-size: 0.95rem !important; transition: all 0.2s !important; } .cdm-btn-play:hover { background: #FFD700 !important; transform: scale(1.03) !important; } .cdm-btn-join { display: inline-block !important; padding: 12px 28px !important; background: transparent !important; color: #fff !important; font-weight: 700 !important; text-decoration: none !important; border: 2px solid #fff !important; border-radius: 4px !important; font-size: 0.95rem !important; transition: all 0.2s !important; } .cdm-btn-join:hover { background: rgba(255,255,255,0.1) !important; border-color: #FFD700 !important; color: #FFD700 !important; } /* Hide ghost pseudo-elements — real text module handles this now */ #t4-header .t4-row.row::before, #t4-header .t4-row.row::after { display: none !important; } /* ══════════════════════════════════════════════ NAV — full width, one clean border ══════════════════════════════════════════════ */ #t4-header .t4-col.mainnav { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } #t4-header .t4-row:has(.t4-col.mainnav) { background: #010d00 !important; width: 100% !important; flex-wrap: wrap !important; border-top: 2px solid #00c832 !important; border-bottom: 2px solid rgba(0,200,50,0.2) !important; } #t4-header .t4-section-inner:has(.t4-col.mainnav) { background: #010d00 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; } #t4-header .t4-navbar, #t4-megamenu-mainmenu, .t4-megamenu, nav.navbar, .t4-navbar { background: #010d00 !important; border: none !important; padding: 0 16px !important; width: 100% !important; } .navbar-nav .nav-link { color: #ddd !important; font-weight: 600 !important; font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 12px 14px !important; transition: color 0.2s !important; } .navbar-nav .nav-link:hover, .navbar-nav .nav-item.active > .nav-link, .navbar-nav .nav-item.current > .nav-link { color: #00c832 !important; } .dropdown-menu { background: #010d00 !important; border: 1px solid rgba(0,200,50,0.25) !important; border-radius: 8px !important; } .dropdown-item { color: #ccc !important; font-size: 0.83rem !important; padding: 8px 16px !important; } .dropdown-item:hover { background: rgba(0,200,50,0.1) !important; color: #00c832 !important; } /* ══════════════════════════════════════════════ OFFCANVAS MENU ══════════════════════════════════════════════ */ .t4-offcanvas { background: #060b01 !important; } .t4-offcanvas .t4-off-canvas-header { background-color: #061100 !important; display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; padding: 0.75rem 1.5rem !important; } /* ══════════════════════════════════════════════ HIDE UNWANTED ══════════════════════════════════════════════ */ #sppb-addon-wrapper-e10847a9-46e6-450d-a5c5-681b825d05e7 { display: none !important; } .t4-col.slideshow { display: none !important; } /* ══════════════════════════════════════════════ MOBILE — max-width: 991px ══════════════════════════════════════════════ */ @media (max-width: 991px) { /* Topbar — space between, all items equal */ .t4-section .t4-row:has(.t4-col.eshop-currency) { justify-content: space-between !important; padding: 0 12px !important; flex-wrap: nowrap !important; } .t4-section-inner:has(.t4-col.eshop-currency) { min-height: 40px !important; } /* All topbar items — centered, spaced evenly */ .t4-col.eshop-currency, .t4-col.eshop-search, .t4-col.eshop-cart, #cdm-hamburger { flex: 1 1 auto !important; justify-content: center !important; margin: 0 !important; padding: 0 4px !important; } /* Search gets more space */ .t4-col.eshop-search { flex: 2 1 auto !important; } /* Hide My Account */ .t4-col.eshop-topmenu { display: none !important; } /* Search input full width */ #eshop-search .input-prepend.input-append { width: 100% !important; } #eshop-search input.form-control.product_search { width: 100% !important; min-width: 0 !important; font-size: 11px !important; } /* Cart icon only */ #eshop-cart #eshop-cart-total { display: none !important; } #eshop-cart .eshop-items a { padding: 3px 8px !important; border: none !important; font-size: 11px !important; } /* Custom hamburger — show */ #cdm-hamburger { display: flex !important; width: 30px !important; height: 30px !important; align-items: center !important; justify-content: center !important; background: rgba(0,200,50,0.15) !important; border: 1px solid rgba(0,200,50,0.5) !important; border-radius: 5px !important; color: #00c832 !important; font-size: 14px !important; cursor: pointer !important; flex-shrink: 0 !important; } /* Header smaller */ #t4-header .t4-row.row { min-height: 160px !important; flex-wrap: wrap !important; } /* Logo smaller */ #t4-header .t4-col.logo { flex: 0 0 auto !important; max-width: 80px !important; padding-left: 8px !important; } #t4-header .logo-img, #t4-header .logo-img-sm { max-width: 70px !important; height: auto !important; } /* Hero text col — full width on mobile */ #t4-header .t4-col.header-hero { flex: 0 0 100% !important; padding: 10px !important; } #cdm-hero-text { padding: 10px !important; } #cdm-hero-text h1 { font-size: 1.6rem !important; letter-spacing: 0.08em !important; } .cdm-btn-play, .cdm-btn-join { padding: 10px 20px !important; font-size: 0.85rem !important; } .navbar-brand { padding-top: 10px !important; } } @media (max-width: 400px) { #eshop-search input.form-control.product_search { font-size: 10px !important; } } /* Hero text col — stretch and center */ #t4-header .t4-col.header-hero { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; z-index: 5 !important; width: 100% !important; } #cdm-hero-text { text-align: center !important; width: 100% !important; max-width: 700px !important; margin: 0 auto !important; padding: 30px 40px !important; } /* Force header row to be a proper flex row */ #t4-header .t4-row.row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; } /* Logo — fixed left, doesn't grow */ #t4-header .t4-col.logo { flex: 0 0 200px !important; max-width: 200px !important; width: 200px !important; } /* Hero text — takes ALL remaining center space */ #t4-header .t4-col.header-hero { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; } /* eshop-texttop — hidden, no space */ #t4-header .t4-col.eshop-texttop { display: none !important; } #cdm-hero-text { text-align: center !important; width: 100% !important; } /* Shift hero text to the right with more air */ #cdm-hero-text { text-align: center !important; width: 100% !important; max-width: 800px !important; margin: 0 0 0 auto !important; padding: 40px 60px 40px 20px !important; } /* More height so it breathes */ #t4-header .t4-row.row { min-height: 280px !important; } /* Title bigger and more air below */ #cdm-hero-text h1 { margin-bottom: 20px !important; font-size: clamp(2.5rem, 5vw, 4.5rem) !important; } /* Tagline more air */ #cdm-hero-text p { margin-bottom: 36px !important; font-size: clamp(1rem, 2vw, 1.2rem) !important; } /* Buttons more air between them */ .cdm-hero-btns { gap: 24px !important; } div#cdm-hero-text { margin-right: 200px !important; padding: 60px 60px 60px 0 !important; } div#cdm-hero-text h1 { font-size: 5.5rem !important; margin-bottom: 30px !important; white-space: nowrap !important; } div#cdm-hero-text p { font-size: 1.3rem !important; margin-bottom: 50px !important; } div#cdm-hero-text .cdm-hero-btns { gap: 32px !important; } div#cdm-hero-text .cdm-btn-play, div#cdm-hero-text .cdm-btn-join { padding: 16px 40px !important; font-size: 1.1rem !important; } #t4-header .t4-row.row { min-height: 350px !important; } div#cdm-hero-text { margin-left: auto !important; margin-right: 80px !important; padding: 60px 0 60px 0 !important; max-width: 600px !important; } div#cdm-hero-text { margin-left: auto !important; margin-right: auto !important; padding: 40px 0 !important; max-width: 550px !important; text-align: left !important; } div#cdm-hero-text h1 { font-size: 2.8rem !important; white-space: nowrap !important; margin-bottom: 16px !important; } div#cdm-hero-text p { font-size: 1rem !important; margin-bottom: 28px !important; text-align: left !important; } div#cdm-hero-text .cdm-hero-btns { justify-content: flex-start !important; } /* ── THREE COLUMN HEADER ── */ #t4-header .t4-row.row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; min-height: 280px !important; } /* Logo — left third */ #t4-header .t4-col.logo { flex: 0 0 33.333% !important; max-width: 33.333% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; } /* Hero text — center third */ #t4-header .t4-col.header-hero { flex: 0 0 33.333% !important; max-width: 33.333% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; } /* Sponsor — right third */ #t4-header .t4-col.header-sponsor { flex: 0 0 33.333% !important; max-width: 33.333% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; position: relative !important; z-index: 5 !important; } /* Sponsor image styling */ #t4-header .t4-col.header-sponsor img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; border: 1px solid rgba(255,215,0,0.3) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; } /* Sponsor label */ #t4-header .t4-col.header-sponsor::before { content: 'SPONSOR OF THE MONTH' !important; position: absolute !important; top: 8px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 0.6rem !important; letter-spacing: 2px !important; color: rgba(255,215,0,0.5) !important; white-space: nowrap !important; font-weight: 700 !important; } /* Hero text — reset margins for centered col */ div#cdm-hero-text { margin: 0 auto !important; padding: 20px !important; max-width: 100% !important; text-align: center !important; } div#cdm-hero-text h1 { font-size: clamp(1.6rem, 2.5vw, 2.8rem) !important; white-space: nowrap !important; margin-bottom: 16px !important; } div#cdm-hero-text p { font-size: 0.95rem !important; margin-bottom: 24px !important; text-align: center !important; } div#cdm-hero-text .cdm-hero-btns { justify-content: center !important; gap: 16px !important; } /* Mobile — stack vertically */ @media (max-width: 991px) { #t4-header .t4-col.logo, #t4-header .t4-col.header-hero, #t4-header .t4-col.header-sponsor { flex: 0 0 100% !important; max-width: 100% !important; } #t4-header .t4-col.header-sponsor { display: none !important; } } /* Sponsor col — fully centered both ways */ #t4-header .t4-col.header-sponsor { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; } /* Push image down away from the label */ #t4-header .t4-col.header-sponsor .wk-panel, #t4-header .t4-col.header-sponsor .wk-slideshow, #t4-header .t4-col.header-sponsor > div, #t4-header .t4-col.header-sponsor img { margin: auto !important; display: block !important; } /* Sponsor col — fully centered both ways */ #t4-header .t4-col.header-sponsor { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; } /* Push image down away from the label */ #t4-header .t4-col.header-sponsor .wk-panel, #t4-header .t4-col.header-sponsor .wk-slideshow, #t4-header .t4-col.header-sponsor > div, #t4-header .t4-col.header-sponsor img { margin: auto !important; display: block !important; } .uk-scope .uk-slideshow-items > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; will-change: transform,opacity; margin-top: 100px !important; } /* Desktop logo bigger — no mobile touch */ @media (min-width: 992px) { #t4-header .logo-img { max-width: 280px !important; width: 280px !important; } } /* ===== TRIM HEADER VERTICAL SPACE ===== */ /* Top bar (Row 1 - USD, search, cart, account links) */ .t4-topbar .t4-topbar-inner { padding-top: 4px !important; padding-bottom: 4px !important; min-height: unset !important; } /* Main header row (Row 2 - Rise From Di Gully hero area) */ .t4-header .t4-header-inner { padding-top: 10px !important; padding-bottom: 10px !important; min-height: unset !important; } /* Nav bar (Row 3 - HOME, ABOUT US, ARTISTS, etc.) */ .t4-navbar .t4-navbar-inner { padding-top: 0px !important; padding-bottom: 0px !important; min-height: unset !important; } /* If the hero section itself has extra padding */ #sppb-addon-wrapper-e10847a9-46e6-450d-a5c5-681b825d05e7 { padding-top: 0 !important; padding-bottom: 0 !important; } /* ===== TRIM HEADER VERTICAL SPACE — CORRECT SELECTORS ===== */ #t4-header { padding: 0 !important; } #t4-header .t4-section-inner.container { padding-top: 0 !important; padding-bottom: 0 !important; } #t4-header .t4-row.row { min-height: 180px !important; padding-top: 0 !important; padding-bottom: 0 !important; } #cdm-hero-text { padding: 16px 20px !important; } @media (min-width: 576px) { #t4-header { padding: 0 !important; } } @media (min-width: 768px) { #t4-header { padding: 0 !important; } } @media (min-width: 992px) { #t4-header { padding: 0 !important; } } @media (min-width: 1200px) { #t4-header { padding: 0 !important; } } /* ===== HEADER HEIGHT — AGGRESSIVE TRIM ===== */ #t4-header, #t4-header .t4-section-inner.container { padding: 0 !important; } #t4-header .t4-row.row { min-height: 120px !important; padding: 0 !important; margin: 0 !important; } #cdm-hero-text { padding: 8px 20px !important; margin: 0 !important; } #cdm-hero-text h1 { margin-bottom: 8px !important; font-size: clamp(1.4rem, 3vw, 2.4rem) !important; } #cdm-hero-text p { margin-bottom: 12px !important; font-size: clamp(0.8rem, 1.5vw, 1rem) !important; } .cdm-btn-play, .cdm-btn-join { padding: 8px 20px !important; font-size: 0.85rem !important; } @media (min-width: 576px) { #t4-header { padding: 0 !important; } } @media (min-width: 768px) { #t4-header { padding: 0 !important; } } @media (min-width: 992px) { #t4-header { padding: 0 !important; } } @media (min-width: 1200px) { #t4-header { padding: 0 !important; } } /* ===== GREEN BORDER — HERO TO NAV SEPARATOR ===== */ #t4-header .t4-row:has(.t4-col.mainnav) { border-top: 2px solid #00c832 !important; } /* ===== GREEN BORDER — HERO TO NAV ===== */ #t4-main-menu, .t4-main-menu, #t4-header .t4-palette-mainnav, .t4-palette-mainnav { border-top: 2px solid #00c832 !important; } /* ===== GREEN BORDER — TOPBAR TO HERO ===== */ #t4-header { border-top: 2px solid #00c832 !important; } /* ===== SHIFT LOGO + HERO LEFT, MORE ROOM FOR SPONSOR ===== */ #t4-header .t4-col.logo { flex: 0 0 160px !important; max-width: 160px !important; padding-left: 8px !important; padding-right: 8px !important; } #t4-header .t4-col.headerherotext { flex: 0 0 40% !important; max-width: 40% !important; } #t4-header .t4-col.header-sponsor { flex: 1 1 auto !important; max-width: none !important; } /* ===== LOGO + HERO + SPONSOR BALANCE ===== */ #t4-header .t4-col.logo { flex: 0 0 220px !important; max-width: 220px !important; padding-left: 16px !important; padding-right: 12px !important; } #t4-header .t4-col.headerherotext { flex: 0 0 45% !important; max-width: 45% !important; } #t4-header .t4-col.header-sponsor { flex: 1 1 auto !important; max-width: none !important; } /* ===== LOGO + HERO + SPONSOR BALANCE v3 ===== */ #t4-header .t4-col.logo { flex: 0 0 280px !important; max-width: 280px !important; padding-left: 16px !important; padding-right: 16px !important; } #t4-header .t4-col.headerherotext { flex: 0 0 25% !important; max-width: 25% !important; } #t4-header .t4-col.header-sponsor { flex: 1 1 auto !important; max-width: none !important; } /* ===== CENTER SPONSOR CONTENT ===== */ #t4-header .t4-col.header-sponsor { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } #t4-header .t4-col.header-sponsor > div, #t4-header .t4-col.header-sponsor .uk-scope, #t4-header .t4-col.header-sponsor .uk-slideshow { margin: 0 auto !important; width: 100% !important; display: flex !important; justify-content: center !important; } /* ===== CLOSE THE GAP — HERO + SPONSOR ===== */ #t4-header .t4-col.headerherotext { flex: 0 0 38% !important; max-width: 38% !important; } #t4-header .t4-col.header-sponsor { flex: 0 0 35% !important; max-width: 35% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* ===== HERO + SPONSOR FINAL FIX ===== */ #t4-header .t4-col.headerherotext { flex: 0 0 48% !important; max-width: 48% !important; } #t4-header .t4-col.header-sponsor { flex: 1 1 auto !important; max-width: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 0 16px !important; } /* Make slideshow/image stretch full width of sponsor zone */ #t4-header .t4-col.header-sponsor .uk-scope, #t4-header .t4-col.header-sponsor .uk-slideshow, #t4-header .t4-col.header-sponsor .uk-slideshow-items { width: 100% !important; min-width: 100% !important; } #t4-header .t4-col.header-sponsor img { width: 100% !important; height: auto !important; object-fit: cover !important; } /* ===== SHIFT LOGO + HERO RIGHT ===== */ #t4-header .t4-col.logo { margin-left: 100px !important; } #t4-header .t4-col.logo { flex: 0 0 280px !important; max-width: 280px !important; padding-left: 16px !important; padding-right: 116px !important; } /* ===== RESPECT 3:3:6 LAYOUT ===== */ #t4-header .t4-col.headerherotext { flex: 0 0 25% !important; max-width: 25% !important; } #t4-header .t4-col.logo { flex: 0 0 25% !important; max-width: 25% !important; } #t4-header .t4-col.header-sponsor { flex: 0 0 50% !important; max-width: 50% !important; } /* ===== MOBILE HEADER FIX ===== */ @media (max-width: 991px) { #t4-header .t4-row.row { flex-wrap: wrap !important; } #t4-header .t4-col.logo { flex: 0 0 100% !important; max-width: 100% !important; text-align: center !important; padding: 8px !important; } #t4-header .t4-col.headerherotext { flex: 0 0 100% !important; max-width: 100% !important; padding: 8px 16px !important; } /* Hide sponsor on mobile */ #t4-header .t4-col.header-sponsor { display: none !important; } /* Fix logo size on mobile */ #t4-header .logo-img, #t4-header .logo-img-sm { max-width: 120px !important; margin: 0 auto !important; display: block !important; } #cdm-hero-text { padding: 10px !important; text-align: center !important; } #cdm-hero-text h1 { font-size: 1.8rem !important; white-space: normal !important; } } /* ===== MOBILE LOGO DUPLICATES FIX ===== */ @media (max-width: 991px) { /* Hide the Section row logo (the big one at top) #t4-section-1 { display: none !important; }*/ /* Hide the logo col inside the header on mobile */ #t4-header .t4-col.logo { display: none !important; } /* Hero text full width, centered */ #t4-header .t4-col.headerherotext { flex: 0 0 100% !important; max-width: 100% !important; padding: 16px !important; } #cdm-hero-text h1 { font-size: 1.8rem !important; white-space: normal !important; } } /* ===== MOBILE HEADER FIX v3 ===== */ @media (max-width: 991px) { /* Hide ONLY the duplicate section logo above header #t4-section-1 { display: none !important; } */ /* Keep header logo but smaller */ #t4-header .t4-col.logo { flex: 0 0 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; padding: 8px !important; } #t4-header .logo-img { max-width: 120px !important; } /* Hero text full width */ #t4-header .t4-col.headerherotext { flex: 0 0 100% !important; max-width: 100% !important; padding: 8px 16px !important; } /* Show sponsor on mobile, full width */ #t4-header .t4-col.header-sponsor { display: flex !important; flex: 0 0 100% !important; max-width: 100% !important; justify-content: center !important; padding: 8px !important; } #t4-header .t4-col.header-sponsor img { max-width: 90% !important; height: auto !important; } } @media (max-width: 991px) { /* Hide the small tiled logo, show proper one */ #t4-header .logo-img-sm { display: none !important; } #t4-header .logo-img { display: block !important; max-width: 120px !important; margin: 0 auto !important; } } @media (max-width: 991px) { #t4-header .logo-img { max-width: 200px !important; width: 200px !important; } } @media (max-width: 991px) { /* Logo fills full width */ #t4-header .logo-img { max-width: 100% !important; width: 100% !important; height: auto !important; } /* Sponsor centered */ #t4-header .t4-col.header-sponsor { align-items: center !important; justify-content: center !important; } #t4-header .t4-col.header-sponsor .uk-scope { display: flex !important; justify-content: center !important; width: 100% !important; } #t4-header .t4-col.header-sponsor img { margin: 0 auto !important; display: block !important; max-width: 90% !important; } } @media (max-width: 991px) { #t4-header .t4-col.logo { padding: 0 !important; overflow: hidden !important; } #t4-header .t4-col.logo .navbar-brand { width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; } #t4-header .t4-col.logo .navbar-brand a { display: block !important; width: 100% !important; } #t4-header .logo-img { width: 100% !important; max-width: 100% !important; height: 180px !important; object-fit: cover !important; object-position: center !important; display: block !important; } } @media (max-width: 991px) { /* Logo — show full image, don't crop */ #t4-header .logo-img { object-fit: contain !important; object-position: center !important; height: auto !important; width: 100% !important; } /* Sponsor — center the whole slideshow */ #t4-header .t4-col.header-sponsor, #t4-header .t4-col.header-sponsor .uk-scope, #t4-header .t4-col.header-sponsor .uk-slideshow { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; text-align: center !important; } #t4-header .t4-col.header-sponsor img { margin: 0 auto !important; display: block !important; max-width: 90% !important; width: 90% !important; } } @media (max-width: 991px) { /* Logo — constrain width so it doesn't overflow */ #t4-header .t4-col.logo { width: 100% !important; max-width: 100% !important; } #t4-header .logo-img { width: 90% !important; max-width: 90% !important; margin: 0 auto !important; display: block !important; height: auto !important; object-fit: contain !important; } /* Sponsor — override UIkit absolute positioning */ #t4-header .t4-col.header-sponsor .uk-slideshow-items { position: relative !important; left: 50% !important; transform: translateX(-50%) !important; } #t4-header .t4-col.header-sponsor .uk-slideshow-items li { position: relative !important; } } @media (max-width: 991px) { #t4-header .logo-img { width: 100% !important; max-width: 100% !important; margin: 0 !important; display: block !important; height: auto !important; object-fit: contain !important; } #t4-header .t4-col.header-sponsor .uk-slideshow-items { position: absolute !important; left: 0 !important; transform: none !important; } #t4-header .t4-col.header-sponsor .uk-slideshow-items li { position: absolute !important; } } @media (max-width: 991px) { #t4-header .t4-col.header-sponsor { overflow: visible !important; padding: 0 8px !important; } #t4-header .t4-col.header-sponsor .uk-scope { width: 100% !important; } #t4-header .t4-col.header-sponsor .uk-slideshow { width: 100% !important; min-height: 120px !important; } #t4-header .t4-col.header-sponsor .uk-slideshow-items { position: relative !important; width: 100% !important; min-height: 120px !important; left: auto !important; transform: none !important; } #t4-header .t4-col.header-sponsor .uk-slideshow-items li { position: relative !important; width: 100% !important; } #t4-header .t4-col.header-sponsor .uk-slideshow-items img { position: relative !important; width: 100% !important; height: auto !important; object-fit: contain !important; } } @media (max-width: 991px) { #t4-header .t4-col.logo { padding: 0 !important; overflow: hidden !important; } #t4-header .t4-col.logo .navbar-brand, #t4-header .t4-col.logo .navbar-brand a { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } #t4-header .logo-img { width: 100% !important; max-width: 100% !important; height: 150px !important; max-height: 150px !important; object-fit: cover !important; object-position: center top !important; display: block !important; margin: 0 !important; } } #t4-header .t4-col.logo { margin-left: 0px !important; } #t4-header .logo-img { width: 100% !important; max-width: 100% !important; /* height: 150px !important; */ /* max-height: 150px !important; */ object-fit: cover !important; object-position: center top !important; display: block !important; margin: 0 !important; height: 100% !important; } .uk-scope .uk-slideshow-items > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; will-change: transform,opacity; margin-top: 20px !important; } #t4-header .logo-img { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center top !important; display: block !important; margin: 0 !important; } @media (max-width: 991px) { #t4-header .t4-col.header-sponsor::before { margin-top: 0 !important; padding-top: 0 !important; line-height: 1 !important; } #t4-header .t4-col.header-sponsor { padding-top: 0 !important; margin-top: 0 !important; gap: 0 !important; } #t4-header .t4-col.header-sponsor .custom { display: none !important; } } div#cdm-hero-text { margin: 0 auto !important; padding: 20px !important; max-width: 100% !important; text-align: center !important; margin-left: -100px !important; } @media (max-width: 991px) { /* Fix hero text cut off on left */ #t4-header .t4-col.headerherotext { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 16px !important; margin: 0 !important; overflow: visible !important; } #cdm-hero-text { margin-left: 0 !important; padding: 12px 16px !important; width: 100% !important; max-width: 100% !important; text-align: center !important; } /* Sponsor — remove top gap, center banner */ #t4-header .t4-col.header-sponsor::before { top: 0 !important; } #t4-header .t4-col.header-sponsor { padding-top: 4px !important; } } /* Desktop needs the negative margin */ div#cdm-hero-text { margin-left: -100px !important; } /* Mobile cancels it out */ @media (max-width: 991px) { div#cdm-hero-text { margin-left: 0 !important; } } @media (min-width: 992px) { #cdm-hero-text h1::after, #cdm-hero-text h1::before, .cdm-hero-text-divider, #cdm-hero-text + *, #t4-header .t4-col.headerherotext::after { display: none !important; } } /* ===== KILL COLUMN DIVIDER LINE ===== */ @media (min-width: 992px) { #t4-header .t4-col.headerherotext { border-right: none !important; border-left: none !important; box-shadow: none !important; } } /* Remove vertical line from header cols */ #t4-header .t4-col.header-hero, #t4-header .t4-col.eshop-texttop { border: none !important; /* border-left: none !important; */ /* border-right: none !important; */ outline: none !important; } #t4-header .t4-col.eshop-texttop { display: none !important; width: 0 !important; padding: 0 !important; margin: 0 !important; } /* Kill T4 col separators in header */ #t4-header .t4-col::after, #t4-header .t4-col::before, #t4-header .t4-row::after, #t4-header .t4-row::before { display: none !important; content: none !important; border: none !important; } /* #cdm-hero-text, #cdm-hero-text, div#cdm-hero-text { border-right: none !important; border-left: none !important; outline: none !important; }*/ /* Restore button pseudo-elements */ .cdm-btn-play::before, .cdm-btn-play::after, .cdm-btn-join::before, .cdm-btn-join::after, .btn::before, .btn::after, .navbar-nav .nav-link::before, .navbar-nav .nav-link::after { content: unset !important; display: unset !important; } /* Change this .cdm-btn-join { border: 2px solid #fff; }*/ /* To this — only top and bottom border .cdm-btn-join { border-top: 2px solid #fff; border-bottom: 2px solid #fff; border-left: none; border-right: none; } */ /* ===== RESTORE BUTTON STYLES ===== */ .cdm-btn-join { border: 2px solid #fff !important; } .cdm-btn-join:hover { border-color: #FFD700 !important; color: #FFD700 !important; background: rgba(255,255,255,0.1) !important; } .cdm-btn-play { background: #f7931e !important; color: #000 !important; border: none !important; } .cdm-btn-play:hover { background: #FFD700 !important; } .cdm-btn-join { border: 2px solid #fff !important; border-radius: 4px !important; } #t4-header .t4-col.headerherotext { border: none !important; box-shadow: none !important; } #t4-header .custom .h1, #t4-header .custom h1 { color: var(--color-primary); width: auto; font-size: 43.2px; margin: 0 11px 0 0; padding: 0 11px 0 0; /* border-right: 1px #eeeeee solid; */ } #t4-header .custom .h1, #t4-header .custom h1 { color: var(--color-primary); width: auto; font-size: 43.2px; margin: 0 11px 0 0; padding: 0 11px 0 0; border-right: 0px #000000 solid; } @media (max-width: 991px) { /* Center all header content */ #t4-header .t4-col.logo, #t4-header .t4-col.headerherotext, #t4-header .t4-col.header-sponsor { text-align: center !important; align-items: center !important; justify-content: center !important; } /* Center hero text */ #cdm-hero-text, div#cdm-hero-text { text-align: center !important; margin: 0 auto !important; } /* Center buttons */ .cdm-hero-btns { justify-content: center !important; } /* Center main body content */ .t4-main-body .t4-col, .t4-main-body .sppb-col, .t4-main-body .sppb-addon { text-align: center !important; } /* Center nav items */ .navbar-nav { align-items: center !important; text-align: center !important; } /* Center footer */ .t4-footer .t4-col, .t4-footer .t4-section-inner { text-align: center !important; justify-content: center !important; } } /* DADDYMAN STYLES START HERE */ /* DADDYMAN STYLES END HERE */ .dm-section { padding: 90px 24px; } .dm-section h2 { margin-bottom: 28px; } .dm-card { padding: 32px; } .dm-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.5); } /* reduce height OR remove background module */ #t4-header { min-height: auto !important; padding: 10px 0 !important; } /* GLOBAL SECTION SPACING */ section, .sppb-section { padding-top: 80px; padding-bottom: 80px; } /* REMOVE HARD BOX FEEL */ .sppb-row-container { max-width: 1200px; } /* SOFT BACKGROUND TRANSITION */ body { background: linear-gradient(180deg, #020a05 0%, #000000 100%); } /* SECTION HEADINGS */ h2 { font-size: 32px; font-weight: 700; margin-bottom: 20px; } /* TEXT SOFTENING */ p { color: rgba(255,255,255,0.75); } /* Remove Green Line Cutting across your ecosystem section is your menu/nav overlapping the section */ .t4-mainnav { position: relative !important; z-index: 10; } .dm-section { position: relative; z-index: 1; } .t4-mainnav { margin-bottom: 0; } #dm-ecosystem { margin-top: 20px; } /* GLOBAL BACKGROUND FIX */ body, .dm-wrap { background: linear-gradient(180deg, #0f1a13 0%, #0a0f0b 100%); color: #f2f2f2; } /* SECTION SPACING (TIGHTER) */ .dm-section { padding: 28px 20px !important; } /* REMOVE FLOATY GAP FEEL */ .dm-section + .dm-section { margin-top: 0 !important; } /* CARD + PANEL LIGHTENING */ .dm-card, .dm-section-soft, .dm-section-dark { background: #151a16 !important; border: 1px solid rgba(255,255,255,0.05); } /* ECOSYSTEM SECTION (MAKE IT STAND OUT) */ #dm-ecosystem { background: linear-gradient(180deg, #141a16 0%, #101411 100%); border-radius: 12px; padding: 30px !important; } /* HERO LIGHTENING */ .dm-hero { background: linear-gradient(135deg, rgba(22,40,26,.92), rgba(8,12,9,.95)), radial-gradient(circle at top right, rgba(255,165,0,.08), transparent 35%) !important; } /* TEXT IMPROVEMENT */ .dm-section p, .dm-card p { color: rgba(255,255,255,0.85); } /* HEADING TIGHTEN */ .dm-section h2 { margin-bottom: 10px; } /* CARD SPACING */ .dm-card { padding: 18px !important; } /* BUTTON GLOW (SUBTLE PREMIUM TOUCH) */ .dm-btn-primary { box-shadow: 0 6px 18px rgba(255,165,0,0.25); } .dm-grid-3 { gap: 14px; } .dm-cta { padding: 30px 20px !important; } /* LETS LIGHTEN THE DARKNESS */ /* Background */ body, .dm-wrap { background: linear-gradient( 180deg, var(--dm-green-deep) 0%, #08120c 100% ); } /* HERO */ .dm-hero { background: linear-gradient( 135deg, var(--dm-green-deep), #050a07 ), radial-gradient( circle at top right, rgba(240,165,0,.12), transparent 40% ) !important; } / * CARDS * / .dm-card { background: rgba(31,77,54,0.25) !important; border: 1px solid rgba(255,255,255,0.08); } /* BUTTONS */ .dm-btn-primary { background: linear-gradient( 90deg, var(--dm-gold), #ff7b00 ); } /* ACCENT TEXT */ .dm-mini { color: var(--dm-green-accent); } /* =============================== DADDYMAN COLOR SYSTEM ================================ */ :root { --dm-green-deep: #0f2a1d; --dm-green-main: #1f4d36; --dm-green-accent: #2e7a55; --dm-green-bright: #3fa06f; --dm-gold: #f0a500; } /* =============================== GLOBAL BACKGROUND ================================ */ body, .dm-wrap { background: linear-gradient( 180deg, var(--dm-green-deep) 0%, #08120c 100% ); color: #f2f2f2; } /* =============================== HERO SECTION ================================ */ .dm-hero { background: linear-gradient( 135deg, var(--dm-green-deep), #050a07 ), radial-gradient( circle at top right, rgba(240,165,0,.12), transparent 40% ) !important; } /* =============================== CARDS / PANELS ================================ */ .dm-card, .dm-section-soft, .dm-section-dark { background: rgba(31,77,54,0.25) !important; border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(6px); } /* =============================== PRIMARY BUTTON (GREEN GRADIENT) ================================ */ .dm-btn-primary { background: linear-gradient( 135deg, var(--dm-green-main), var(--dm-green-accent) ); color: #ffffff; border: none; box-shadow: 0 6px 18px rgba(31,77,54,0.4); transition: all 0.2s ease; } /* HOVER */ .dm-btn-primary:hover { background: linear-gradient( 135deg, var(--dm-green-accent), var(--dm-green-bright) ); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(31,77,54,0.5); border: 1px solid rgba(240,165,0,0.4); } /* =============================== SECONDARY BUTTON ================================ */ .dm-btn-secondary { background: rgba(255,255,255,0.02); border: 1px solid var(--dm-green-accent); color: #ffffff; transition: all 0.2s ease; } .dm-btn-secondary:hover { background: rgba(46,122,85,0.15); border-color: var(--dm-green-bright); } /* =============================== ACCENT TEXT ================================ */ .dm-mini { color: var(--dm-green-accent); } /* =============================== SPACING (TIGHTER + CLEANER) ================================ */ .dm-section { padding: 28px 20px !important; } .dm-section + .dm-section { margin-top: 0 !important; } /* =============================== GRID TIGHTEN ================================ */ .dm-grid-3 { gap: 14px; } /* =============================== TYPOGRAPHY CLEANUP ================================ */ .dm-section h2 { margin-bottom: 10px; } .dm-section p, .dm-card p { color: rgba(255,255,255,0.85); line-height: 1.6; } /* =============================== NAV OVERLAP FIX ================================ */ .t4-mainnav { position: relative !important; z-index: 10; } .dm-section { position: relative; z-index: 1; } .alert-info, .contact .contact-miscinfo { --t4-alert-color: #055160; --t4-alert-bg: #05180b; --t4-alert-border-color: #01410e; } /* ===== GLOBAL BUTTON FIX ===== */ .dm-btn, .dm-btn-primary { background: linear-gradient( 135deg, var(--dm-green-accent), var(--dm-green-main) ); color: #ffffff !important; border: 1px solid rgba(255,255,255,0.15); transition: all 0.25s ease; } /* HOVER — brighter + readable */ .dm-btn:hover, .dm-btn-primary:hover { background: linear-gradient( 135deg, #2e7a55, #3f9a6b ); color: #ffffff !important; box-shadow: 0 0 12px rgba(46,122,85,0.6); transform: translateY(-1px); } /* ACTIVE (CLICKED) — still visible */ .dm-btn:active, .dm-btn-primary:active { background: linear-gradient( 135deg, #1f4d36, #2e7a55 ); color: #ffffff !important; transform: scale(0.98); } /* OPTIONAL: secondary buttons (outline style) */ .dm-btn-secondary { background: transparent; color: #ffffff; border: 1px solid var(--dm-green-accent); } .dm-btn-secondary:hover { background: var(--dm-green-accent); color: #ffffff; } /* HEADER MISSION ON MOBILE FIX */ /* MOBILE OVERRIDE TEST @media (max-width: 991px) { #t4-section-1 { display: block !important; }*/ #t4-header .t4-col.logo { display: flex !important; } #t4-header .t4-col.header-sponsor { display: flex !important; } #t4-header .t4-row.row { display: flex !important; flex-wrap: wrap !important; } } /* ===== MOBILE RESCUE OVERRIDE ===== @media (max-width: 991px) { #t4-section-1 { display: block !important; } #t4-header .t4-col.logo { display: flex !important; } #t4-header .t4-col.header-hero, #t4-header .t4-col.headerherotext { display: flex !important; flex: 0 0 100% !important; max-width: 100% !important; } #cdm-hero-text { display: block !important; width: 100% !important; max-width: 100% !important; padding: 16px !important; margin: 0 auto !important; text-align: center !important; } #cdm-hero-text h1 { white-space: normal !important; } } */ /* ========================================= 🔥 MASTER FIX — HEADER + MOBILE CLEANUP ========================================= */ /* ===== 1. REMOVE DUPLICATE MOBILE SECTION ===== */ #t4-section-1 { display: none !important; } /* ===== 2. FIX LOGO VISIBILITY ===== */ /* Remove any forced hiding */ .navbar-brand.logo-control img.logo-img { display: block !important; } /* Ensure proper sizing */ #t4-header .logo-img { max-width: 160px !important; height: auto !important; } /* ===== 3. CLEAN HEADER STRUCTURE ===== */ #t4-header .t4-row.row { display: flex !important; align-items: center !important; justify-content: space-between !important; } /* ===== 4. MOBILE VERSION (ONE SYSTEM ONLY) ===== */ @media (max-width: 991px) { /* Stack header properly */ #t4-header .t4-row.row { flex-direction: column !important; } /* Logo centered */ #t4-header .t4-col.logo { display: flex !important; justify-content: center !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 10px !important; } /* Clean logo sizing */ #t4-header .logo-img { max-width: 120px !important; } /* Hero text full width */ #t4-header .t4-col.headerherotext { flex: 0 0 100% !important; max-width: 100% !important; text-align: center !important; padding: 10px 16px !important; } /* OPTIONAL: hide sponsor if cluttered */ #t4-header .t4-col.header-sponsor { display: none !important; } } /* BRING BACK LOGO */ .navbar-brand.logo-control a { display: flex; flex-direction: column; align-items: center; text-decoration: none; } .navbar-brand.logo-control .logo-img { display: block !important; max-width: 220px; width: 100%; height: auto; margin: 0 auto 10px auto; } .navbar-brand.logo-control .site-name { display: block !important; color: #ffffff; font-weight: 700; font-size: 18px; line-height: 1.2; } @media (max-width: 991px) { .navbar-brand.logo-control .logo-img { max-width: 140px; } .navbar-brand.logo-control .site-name { font-size: 16px; } } /* ========================================= DADDYMAN SPACING REFINEMENT lighter touch, keep premium breathing room ========================================= */ /* leave general sections alone */ .sppb-section, .t4-section { margin-top: 0 !important; margin-bottom: 0 !important; } /* hero: keep strong presence */ .dm-hero { padding-top: 72px !important; padding-bottom: 72px !important; } /* ecosystem block */ #dm-ecosystem, .dm-ecosystem { margin-top: 42px !important; margin-bottom: 42px !important; padding-top: 34px !important; padding-bottom: 34px !important; } /* brand section */ #dm-brand { margin-top: 36px !important; margin-bottom: 36px !important; padding-top: 28px !important; padding-bottom: 28px !important; } /* CTA section */ #dm-contact, .dm-cta-wrap { margin-top: 42px !important; margin-bottom: 42px !important; padding-top: 42px !important; padding-bottom: 42px !important; } /* footer note strip */ .dm-footer-note { margin-top: 34px !important; margin-bottom: 20px !important; padding-top: 22px !important; padding-bottom: 22px !important; } /* remove extra empty air inside containers */ .dm-container > h2:first-child, .dm-container > h1:first-child { margin-top: 0 !important; } /* preserve readable spacing under headings */ .dm-section h2 { margin-bottom: 14px !important; } .dm-subhead { margin-bottom: 14px !important; } .dm-lead { margin-bottom: 18px !important; } /* ecosystem cards spacing */ .dm-grid-3 { gap: 18px !important; } .dm-card { margin-bottom: 0 !important; padding: 22px !important; } /* mobile tuning */ @media (max-width: 991px) { .dm-hero { padding-top: 46px !important; padding-bottom: 46px !important; } #dm-ecosystem, .dm-ecosystem, #dm-brand, #dm-contact, .dm-cta-wrap { margin-top: 24px !important; margin-bottom: 24px !important; padding-top: 22px !important; padding-bottom: 22px !important; } .dm-footer-note { margin-top: 20px !important; padding-top: 16px !important; padding-bottom: 16px !important; } .dm-card { padding: 18px !important; } } /* spacing issue fix */ /* ========================================= DADDYMAN TIGHT SPACING OVERRIDE ========================================= */ /* HERO */ .dm-hero { padding-top: 36px !important; padding-bottom: 28px !important; margin-bottom: 0 !important; } /* HERO inner content */ .dm-hero .dm-container { padding-bottom: 0 !important; } /* Main content sections */ #dm-ecosystem, #dm-brand, #dm-contact, .dm-footer-note { margin-top: 18px !important; } /* Ecosystem box */ #dm-ecosystem { padding-top: 22px !important; padding-bottom: 14px !important; margin-bottom: 0 !important; } /* Pipeline strip under ecosystem */ #dm-ecosystem + .dm-footer-note, .dm-ecosystem-footer, .dm-pipeline-strip { margin-top: 8px !important; margin-bottom: 18px !important; padding-top: 14px !important; padding-bottom: 14px !important; } /* Brand section */ #dm-brand { padding-top: 18px !important; padding-bottom: 18px !important; margin-bottom: 0 !important; } /* CTA section */ #dm-contact { padding-top: 24px !important; padding-bottom: 24px !important; margin-bottom: 0 !important; } /* Footer note */ .dm-footer-note { padding-top: 14px !important; padding-bottom: 14px !important; margin-bottom: 10px !important; } /* Kill extra spacing from SP rows/containers inside these sections */ #dm-ecosystem .sppb-row, #dm-brand .sppb-row, #dm-contact .sppb-row, #dm-ecosystem .dm-container, #dm-brand .dm-container, #dm-contact .dm-container { margin-top: 0 !important; margin-bottom: 0 !important; } /* Mobile */ @media (max-width: 991px) { .dm-hero { padding-top: 26px !important; padding-bottom: 20px !important; } #dm-ecosystem, #dm-brand, #dm-contact, .dm-footer-note { margin-top: 14px !important; } #dm-ecosystem { padding-top: 18px !important; padding-bottom: 10px !important; } #dm-brand, #dm-contact { padding-top: 16px !important; padding-bottom: 16px !important; } .dm-footer-note { padding-top: 12px !important; padding-bottom: 12px !important; margin-bottom: 6px !important; } } section, .sppb-section { padding-top: 0 !important; padding-bottom: 0 !important; } .dm-hero { padding-top: 36px !important; padding-bottom: 28px !important; } #dm-ecosystem { margin-top: 18px !important; padding-top: 22px !important; padding-bottom: 14px !important; } #dm-brand { margin-top: 18px !important; padding-top: 18px !important; padding-bottom: 18px !important; } #dm-contact { margin-top: 18px !important; padding-top: 24px !important; padding-bottom: 24px !important; } .dm-footer-note { margin-top: 18px !important; padding-top: 14px !important; padding-bottom: 14px !important; } /* ===== REMOVE BLOATED GLOBAL SECTION SPACING ===== */ section, .sppb-section { padding-top: 0 !important; padding-bottom: 0 !important; } /* ===== DADDYMAN CONTROLLED SECTION SPACING ===== */ .dm-hero { padding-top: 36px !important; padding-bottom: 28px !important; } #dm-ecosystem { margin-top: 18px !important; padding-top: 22px !important; padding-bottom: 14px !important; } #dm-brand { margin-top: 18px !important; padding-top: 18px !important; padding-bottom: 18px !important; } #dm-contact { margin-top: 18px !important; padding-top: 24px !important; padding-bottom: 24px !important; } .dm-footer-note { margin-top: 18px !important; padding-top: 14px !important; padding-bottom: 14px !important; } #dm-ecosystem .dm-ecosystem-intro { margin-bottom: 22px !important; } #dm-ecosystem .dm-card p + p { margin-top: 18px !important; } #dm-ecosystem .dm-ecosystem-footer { margin-top: 18px !important; padding-top: 18px !important; text-align: center !important; border-top: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.88); } /* add space between ecosystem section and brand section */ #dm-ecosystem + section, #dm-ecosystem + .sppb-section, #dm-ecosystem + div, #dm-ecosystem + .dm-wrap { margin-top: 32px !important; } /* desktop gets more breathing room */ @media (min-width: 992px) { #dm-ecosystem + section, #dm-ecosystem + .sppb-section, #dm-ecosystem + div, #dm-ecosystem + .dm-wrap { margin-top: 44px !important; } } /* mobile stays tighter */ @media (max-width: 991px) { #dm-ecosystem + section, #dm-ecosystem + .sppb-section, #dm-ecosystem + div, #dm-ecosystem + .dm-wrap { margin-top: 20px !important; } } /* .dm-section { padding: 28px 20px !important; margin-top: 40px !important; margin-bottom: 20px !important; } */ /* ========================================= FIX SPACING BETWEEN ECOSYSTEM → BRAND (Targets actual SP Page Builder sections) ========================================= */ /* RESET any unwanted spacing first */ .sppb-section { margin-top: 0 !important; margin-bottom: 0 !important; } /* TARGET: section AFTER ecosystem */ #dm-ecosystem { position: relative; } /* MOBILE (keep tight like you already like) */ #dm-ecosystem { margin-bottom: 18px !important; } /* DESKTOP spacing */ @media (min-width: 992px) { #dm-ecosystem { margin-bottom: 42px !important; } } .header-container { position: absolute; top: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0)); z-index: 9999; } .hero-banner { padding-top: 120px; } .header-container { border-bottom: 1px solid rgba(255,255,255,0.1); }