/* ========================================================= CLEAN-ROOM PATCH — Newsletter Modal + MailerLite (About) File: assets/css/about-fixes.css Scope: ONLY inside .nl-modal on About page Goal: - Keep modal + embed on top - Remove MailerLite “internal card” + phantom slab - Force a strict layout: [email input][submit button] - Bulletproof against ML wrappers / injected helpers ========================================================= */ /* ---------- Make sure the modal is always on top ---------- */ body.about .nl-modal, body.about .nl-modal *{ box-sizing: border-box; } body.about .nl-modal{ position: fixed; inset: 0; z-index: 2147483647; } /* Keep dialog/backdrop stacked correctly */ body.about .nl-modal .modal__backdrop, body.about .nl-modal .modal__dialog, body.about .nl-modal .nl-modal__dialog{ position: relative; z-index: 2147483647; } /* ========================================================= MailerLite embed normalization (modal only) Target injected container: #mlb2-35031411 ========================================================= */ body.about .nl-modal #mlb2-35031411, body.about .nl-modal #mlb2-35031411 *{ max-width: 100% !important; } /* 0) Kill any weird background/after overlays ML injects */ body.about .nl-modal #mlb2-35031411 *::before, body.about .nl-modal #mlb2-35031411 *::after{ background-image: none !important; box-shadow: none !important; } /* 1) Remove ML “card” visuals so YOUR modal plate owns the look */ body.about .nl-modal #mlb2-35031411 .ml-form-embedWrapper, body.about .nl-modal #mlb2-35031411 .ml-form-embedContainer, body.about .nl-modal #mlb2-35031411 .ml-form-embedBody, body.about .nl-modal #mlb2-35031411 .ml-form-embedBodyHorizontal, body.about .nl-modal #mlb2-35031411 .ml-form-embedContent, body.about .nl-modal #mlb2-35031411 .ml-form-align-center{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; width: 100% !important; } /* Hide ML's internal heading copy (we already have your big title) */ body.about .nl-modal #mlb2-35031411 .ml-form-embedContent{ display: none !important; } /* 2) Kill the “loading” button, loader, mobile duplicate button, recaptcha blocks, iframes */ body.about .nl-modal #mlb2-35031411 button.loading, body.about .nl-modal #mlb2-35031411 .loading, body.about .nl-modal #mlb2-35031411 .ml-form-embedSubmitLoad, body.about .nl-modal #mlb2-35031411 .ml-mobileButton-horizontal, body.about .nl-modal #mlb2-35031411 .ml-loader, body.about .nl-modal #mlb2-35031411 .ml-recaptcha, body.about .nl-modal #mlb2-35031411 iframe{ display: none !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } /* 2b) Hide injected zero-size helper divs that create phantom bars */ body.about .nl-modal #mlb2-35031411 div[style*="height: 0px"], body.about .nl-modal #mlb2-35031411 div[style*="height:0px"], body.about .nl-modal #mlb2-35031411 div[style*="width: 0px"], body.about .nl-modal #mlb2-35031411 div[style*="width:0px"]{ display: none !important; } /* 3) Force the row layout to be exactly: [input][button] (Switching to FLEX fixes the “grid creates extra track” quirks from ML wrappers) */ body.about .nl-modal #mlb2-35031411 .ml-form-horizontalRow{ display: flex !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* If ML adds more children than input+button, hide them */ body.about .nl-modal #mlb2-35031411 .ml-form-horizontalRow > :nth-child(n+3){ display: none !important; } /* Prevent wrappers from stretching and creating “empty slab” */ body.about .nl-modal #mlb2-35031411 .ml-input-horizontal, body.about .nl-modal #mlb2-35031411 .horizontal-fields, body.about .nl-modal #mlb2-35031411 .ml-field-group, body.about .nl-modal #mlb2-35031411 .ml-field-email{ flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.about .nl-modal #mlb2-35031411 .ml-button-horizontal, body.about .nl-modal #mlb2-35031411 .ml-button-horizontal-primary{ flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* 4) Input styling (LEFT) */ body.about .nl-modal #mlb2-35031411 input.form-control{ width: 100% !important; height: 58px !important; padding: 0 18px !important; border-radius: 16px 0 0 16px !important; border: 1px solid rgba(216,183,122,0.22) !important; border-right: 0 !important; background: rgba(0,0,0,0.28) !important; color: rgba(231,246,248,0.92) !important; outline: none !important; box-shadow: none !important; background-image: none !important; background-clip: padding-box !important; } /* 5) Button styling (RIGHT) */ body.about .nl-modal #mlb2-35031411 .ml-button-horizontal button.primary, body.about .nl-modal #mlb2-35031411 .ml-button-horizontal-primary button, body.about .nl-modal #mlb2-35031411 input[type="submit"]{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 58px !important; width: clamp(220px, 24vw, 300px) !important; border-radius: 0 16px 16px 0 !important; border: 1px solid rgba(216,183,122,0.42) !important; border-left: 0 !important; font-family: "Cinzel", ui-serif, Georgia, "Times New Roman", serif !important; font-size: 18px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(231,246,248,0.94) !important; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.34)), linear-gradient(90deg, rgba(8,48,58,0.92) 0%, rgba(10,70,84,0.65) 48%, rgba(0,0,0,0.35) 50%, rgba(92,44,12,0.65) 52%, rgba(44,18,6,0.92) 100% ) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 18px 44px rgba(0,0,0,0.62) !important; cursor: pointer !important; white-space: nowrap !important; position: relative !important; overflow: hidden !important; } /* Inner glass sheen */ body.about .nl-modal #mlb2-35031411 .ml-button-horizontal button.primary::after, body.about .nl-modal #mlb2-35031411 .ml-button-horizontal-primary button::after, body.about .nl-modal #mlb2-35031411 input[type="submit"]::after{ content:""; position:absolute; inset: 0; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,0.18), transparent 48%, rgba(0,0,0,0.22) ); } /* Focus styles (keyboard-friendly, not ugly) */ body.about .nl-modal #mlb2-35031411 input.form-control:focus{ border-color: rgba(70,240,255,0.38) !important; box-shadow: 0 0 0 6px rgba(70,240,255,0.10) !important; } body.about .nl-modal #mlb2-35031411 .ml-button-horizontal button.primary:focus, body.about .nl-modal #mlb2-35031411 .ml-button-horizontal-primary button:focus, body.about .nl-modal #mlb2-35031411 input[type="submit"]:focus{ outline: none !important; box-shadow: 0 0 0 6px rgba(255,154,46,0.10), inset 0 0 0 1px rgba(255,255,255,0.10), 0 18px 44px rgba(0,0,0,0.62) !important; } /* Hover polish */ body.about .nl-modal #mlb2-35031411 .ml-button-horizontal button.primary:hover, body.about .nl-modal #mlb2-35031411 .ml-button-horizontal-primary button:hover, body.about .nl-modal #mlb2-35031411 input[type="submit"]:hover{ transform: translateY(-1px); filter: brightness(1.06); } /* Mobile: stack (and restore full rounding) */ @media (max-width: 680px){ body.about .nl-modal #mlb2-35031411 .ml-form-horizontalRow{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } body.about .nl-modal #mlb2-35031411 input.form-control{ border-radius: 16px !important; border-right: 1px solid rgba(216,183,122,0.22) !important; } body.about .nl-modal #mlb2-35031411 .ml-button-horizontal button.primary, body.about .nl-modal #mlb2-35031411 .ml-button-horizontal-primary button, body.about .nl-modal #mlb2-35031411 input[type="submit"]{ width: 100% !important; border-radius: 16px !important; border-left: 1px solid rgba(216,183,122,0.42) !important; } }