/* ── TARGET KNOWN OCEANWP ELEMENTS ONLY ── We hide specific OceanWP/theme elements by their known IDs and classes. We do NOT use body > * because #mjb-home lives inside Elementor wrappers that are children of body, hiding all body children kills everything. */ #site-header { display: none !important; } #top-bar { display: none !important; } .top-bar-wrap { display: none !important; } .oceanwp-mobile-menu-icon { display: none !important; } .site-footer { display: none !important; } #footer { display: none !important; } .page-header { display: none !important; } /* OceanWP popup newsletter widget */ .mailpoet_hp_email_label, #om-rpcnehgvnbnixce, .pum-overlay, .pum-container { display: none !important; } /* Force page bg so Elementor canvas isn't visible */ html { background: #050609 !important; } body { background: #050609 !important; } /* Admin bar offset */ body.admin-bar #site-nav { top: 32px !important; } /* #mjb-home is inside Elementor wrappers, we only override their spacing */ .elementor-widget-html, .elementor-widget-container, .elementor-column-wrap, .elementor-column, .elementor-container, .elementor-row, .elementor-section, .e-con, .e-con-inner { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; } /* ── FOOTER TOP ROW ── */ .footer-top-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; align-items: start; padding: 56px 0 48px; border-bottom: 1px solid rgba(212,168,67,0.2); margin-bottom: 48px; } .footer-brand-col .footer-logo { height: 40px; width: auto; margin-bottom: 16px; } .footer-brand-col .footer-brand-desc { color: rgba(250,250,250,0.85); font-size: 13px; line-height: 1.7; } .footer-find-title { font-family: 'Syne',sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: #D4A843 !important; margin-bottom: 10px !important; } .footer-find-sub { color: rgba(250,250,250,0.85) !important; font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 18px !important; } .footer-find-btns { display: flex; gap: 10px; flex-wrap: wrap; } .footer-find-btn { display: inline-flex; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 10px 18px; color: rgba(250,250,250,0.9) !important; font-size: 13px; font-weight: 500; transition: all .2s; text-decoration: none; } .footer-find-btn:hover { background: rgba(30,64,175,0.15); border-color: rgba(30,64,175,0.7); color: #fff !important; transform: translateY(-2px); } .footer-social-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; } .footer-social-btn { display: block; text-align: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: 10px 6px; color: rgba(250,250,250,0.9) !important; font-size: 12px; font-weight: 500; transition: all .2s; text-decoration: none; } .footer-social-btn:hover { background: rgba(30,64,175,0.15); border-color: rgba(30,64,175,0.7); color: #fff !important; } .footer-nav-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; margin-bottom: 48px; } @media(max-width:1024px) { .footer-top-row { grid-template-columns: 1fr 1fr; } .footer-nav-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media(max-width:768px) { .footer-top-row { grid-template-columns: 1fr; gap: 36px; } .footer-nav-grid { grid-template-columns: 1fr; gap: 28px; } .footer-social-grid { grid-template-columns: repeat(3,1fr); } } /* ── CSS VARIABLES ── */ :root { --bg: #050609; --bg2: #0a0f1f; --gold: #D4A843; --gold-dim: rgba(212,168,67,0.12); --gold-b: rgba(212,168,67,0.2); --text: #fafafa; --muted: rgba(250,250,250,0.85); --subtle: rgba(250,250,250,0.65); --nav-bg: rgba(5,6,9,0.88); --r: 4px; --max-w: 1200px; --py: 96px; --fhead: 'Syne', sans-serif; --fbody: 'Inter', sans-serif; /* Blue buttons, exact match Manus prototype */ --btn-bg: linear-gradient(135deg, rgb(30,64,175) 0%, rgb(30,58,138) 50%, rgb(15,23,42) 100%); --btn-b: rgba(30,64,175,0.65); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--fbody); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--fhead); font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; } .section-title { font-family: var(--fhead); font-size: clamp(28px,4vw,48px); font-weight: 700; line-height: 1.15; color: var(--text); margin-bottom: 16px; } .gold-line { width: 48px; height: 2px; background: var(--gold); margin-bottom: 32px; } .sdiv { height: 1px; background: linear-gradient(90deg,transparent,var(--gold-b),transparent); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: var(--r); font-family: var(--fbody); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; border: none; position: relative; overflow: hidden; text-decoration: none; white-space: nowrap; } /* Shine sweep, left to right */ .btn::after { content: ''; position: absolute; top: -50%; left: -100%; width: 55%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-18deg); animation: btn-shine 3.4s ease-in-out infinite; pointer-events: none; } @keyframes btn-shine { 0% { left: -100%; } 50% { left: 150%; } 100% { left: 150%; } } /* Primary, blue gradient */ .btn-primary { background: var(--btn-bg); color: #ffffff; border: 1.6px solid transparent; box-shadow: 0 2px 12px rgba(30,64,175,0.25); } .btn-primary:hover { opacity: 0.92; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30,64,175,0.45); } /* Secondary, transparent + blue border */ .btn-secondary { background: transparent; color: #ffffff; border: 1.6px solid var(--btn-b); } .btn-secondary:hover { background: rgba(30,64,175,0.14); border-color: rgba(30,64,175,0.9); transform: translateY(-2px); } /* Ghost, subtle white outline */ .btn-ghost { background: rgba(250,250,250,0.06); color: var(--text); border: 1.5px solid rgba(250,250,250,0.16); } .btn-ghost:hover { background: rgba(250,250,250,0.11); transform: translateY(-2px); } .btn-sm { padding: 9px 20px; font-size: 13px; } /* ── SECTION DIVIDERS ── */ .section-divider { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--gold-b),transparent); } /* ── NAVIGATION ── */ /* WATERMARK FIX: nav logo is hard-constrained to 46px. No background images, no ::before/::after on the nav that could show a logo. If you still see a watermark after pasting this code, the issue is in your Elementor Header Template, follow the notes at the top of this file. */ /* SCOPED to #site-nav only. A bare `nav {position:fixed}` here was catching the footer's