/* * Blog Newsletter Strip — shared component. * * Used on: resources hub, filtered category view (mid-grid), single article (bottom). * Maximus reference: warm-grey panel with Oswald-style uppercase headline + hairline * email row + icon-only submit. Mapped to Gambit tokens: panel uses --warm-white, * heading uses --font-heading with uppercase letter treatment. * * Compact variant (--compact) is used in the single-article left column on desktop. */ .gambit-blog-newsletter { padding: clamp(48px, 8vw, 64px) clamp(24px, 6vw, 128px); background: var(--warm-white); } .gambit-blog-newsletter__inner { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; max-width: 1120px; margin: 0 auto; } .gambit-blog-newsletter__copy { flex: 0 0 auto; } .gambit-blog-newsletter__form { width: 100%; flex: 1; } .gambit-blog-newsletter__heading { font-family: var(--font-heading); font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.48px; text-transform: uppercase; color: var(--deep-charcoal); margin: 0; } @media (min-width: 900px) { .gambit-blog-newsletter__inner { flex-direction: row; gap: 128px; justify-content: space-between; align-items: center; } .gambit-blog-newsletter__copy { flex: 1; } } /* ── Gravity Forms overrides — hairline email row + icon-only submit ──── */ .gambit-blog-newsletter .gform_wrapper { margin: 0; } /* Scope the absolutely-positioned submit button to the form itself; without this, the button escapes to and pins to the page's top-right corner. */ .gambit-blog-newsletter .gform_wrapper form { position: relative; display: flex; flex-direction: column; } .gambit-blog-newsletter .gform_body { order: 1; } .gambit-blog-newsletter .gform_footer { order: 2; } .gambit-blog-newsletter .gform_validation_errors { order: 3; } .gambit-blog-newsletter .gform_fields { display: block; margin: 0; padding: 0; } .gambit-blog-newsletter .gfield { margin: 0; padding: 0; } /* Hide all fields except the visible email field by default; each form only has one visible input, so scope tightly via the type selector. */ .gambit-blog-newsletter .gfield--type-hidden { display: none !important; } .gambit-blog-newsletter .gfield_label, .gambit-blog-newsletter .gfield_required, .gambit-blog-newsletter .gfield_description { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .gambit-blog-newsletter .ginput_container { position: relative; display: block; border: 1px solid var(--deep-charcoal); background: var(--white); } .gambit-blog-newsletter .ginput_container input[type="email"], .gambit-blog-newsletter .ginput_container input[type="text"] { width: 100%; height: 56px; padding: 0 64px 0 16px; border: 0; background: transparent; font-family: var(--font-body); font-size: 16px; line-height: 1; color: var(--deep-charcoal); outline: none; box-shadow: none; } .gambit-blog-newsletter .ginput_container input::placeholder { color: var(--dark-charcoal-60); } .gambit-blog-newsletter .ginput_container input:focus-visible { outline: 2px solid var(--signal-red); outline-offset: 2px; } /* !important needed here: Gravity Forms' theme-framework stylesheet loads after ours and sets padding/margin/display on these elements with higher specificity, which shifts the button off the input row. */ .gambit-blog-newsletter .gform_footer { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; z-index: 2; pointer-events: none; } .gambit-blog-newsletter .gform_footer .gform_button { width: 56px; height: 100%; margin: 0 !important; padding: 0; border: 0; border-left: 1px solid var(--deep-charcoal); background-color: transparent; color: transparent; font-size: 0; line-height: 0; cursor: pointer; pointer-events: auto; transition: background-color 0.3s ease, background-image 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230e0e0e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } .gambit-blog-newsletter .gform_footer .gform_button:hover, .gambit-blog-newsletter .gform_footer .gform_button:focus-visible { background-color: var(--deep-charcoal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f7f5f2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); outline: none; } .gambit-blog-newsletter__privacy { margin: 12px 0 0; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--dark-charcoal-60); } /* Confirmation + validation messages */ .gambit-blog-newsletter .gform_confirmation_message, .gambit-blog-newsletter .gform_validation_errors { margin-top: 16px; font-family: var(--font-body); font-size: 14px; color: var(--deep-charcoal); } .gambit-blog-newsletter .gfield_validation_message { margin-top: 8px; font-size: 12px; color: var(--signal-red); } /* ── Compact variant — narrow column (single-article left panel) ──────── */ .gambit-blog-newsletter--compact { padding: 32px 0; background: transparent; } .gambit-blog-newsletter--compact .gambit-blog-newsletter__inner { flex-direction: column; gap: 16px; align-items: flex-start; } .gambit-blog-newsletter--compact .gambit-blog-newsletter__heading { font-size: 16px; line-height: 22px; letter-spacing: -0.32px; } .gambit-blog-newsletter--compact .ginput_container input[type="email"], .gambit-blog-newsletter--compact .ginput_container input[type="text"] { height: 48px; font-size: 14px; padding-right: 56px; } .gambit-blog-newsletter--compact .gform_footer .gform_button { width: 48px; background-size: 16px 16px; } .gambit-blog-newsletter--compact .gambit-blog-newsletter__privacy { margin-top: 8px; font-size: 11px; line-height: 1.45; } @media (max-width: 999px) { .gambit-blog-newsletter--compact { display: none; } }