newsletter - PathToSurvival

/* ========================================================= PATH TO SURVIVAL — NEWSLETTER LANDING SECTION + FORM SKIN Fluent Form ID: 6 ========================================================= */ /* Section layout */ .pts-newsletter{ padding: clamp(48px, 6vw, 90px) 16px; background: radial-gradient(1200px 700px at 50% -20%, rgba(34, 96, 56, 0.18), transparent 55%), #fff; } /* Center everything properly */ .pts-newsletter__inner{ max-width: 1100px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } /* Title */ .pts-newsletter__title{ margin: 0 0 10px; font-family: system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif; font-size: clamp(38px, 5.5vw, 68px); line-height: 1.02; letter-spacing: -0.5px; color: #222; } /* Subtitle */ .pts-newsletter__subtitle{ margin: 0 0 24px; font-size: clamp(14px, 1.6vw, 18px); color: rgba(20,20,20,0.62); max-width: 720px; } /* Form wrapper */ .pts-newsletter__form{ width: 100%; display: flex; justify-content: center; } /* Fine print */ .pts-newsletter__fineprint{ margin: 14px 0 0; font-size: 13px; color: rgba(20,20,20,0.55); } /* ========================================================= FORM SKIN — Fluent Form ID 6 ========================================================= */ #fluentform_6{ width: 100%; max-width: 920px; /* wide */ margin: 0 auto; padding: 28px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.10); background: radial-gradient(1200px 420px at 50% -10%, rgba(121,255,77,0.14), transparent 55%), linear-gradient(180deg, #101a16 0%, #0b0f0d 100%); box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05); position: relative; overflow: hidden; } /* Texture overlay */ #fluentform_6::before{ content:””; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient( 180deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, rgba(0,0,0,0.00) 3px, rgba(0,0,0,0.00) 7px ); opacity: 0.35; mix-blend-mode: overlay; } /* Accent line */ #fluentform_6::after{ content:””; position:absolute; left:24px; right:24px; top:18px; height:3px; border-radius:999px; background: linear-gradient(90deg, transparent 0%, rgba(121,255,77,0.95) 50%, transparent 100%); opacity: 0.85; } /* Hide Fluent Forms internal title if present */ #fluentform_6 .ff-form-title{ display:none !important; } /* Labels */ #fluentform_6 label{ display: inline-block; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: rgba(230,239,232,0.88); } #fluentform_6 label .ff-el-required{ color: #ff6b6b; } /* Spacing */ #fluentform_6 .ff-el-group{ margin-bottom: 16px; } /* Two-column spacing (desktop) */ #fluentform_6 .ff-t-container{ gap: 18px; } #fluentform_6 .ff-t-cell{ padding: 0 !important; } /* Inputs */ #fluentform_6 .ff-el-form-control, #fluentform_6 input[type=”text”], #fluentform_6 input[type=”email”], #fluentform_6 input[type=”tel”], #fluentform_6 textarea, #fluentform_6 select{ width: 100%; height: 56px; padding: 14px 16px; font-size: 16px; color: #e6efe8; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.28); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } #fluentform_6 input::placeholder, #fluentform_6 textarea::placeholder{ color: rgba(230,239,232,0.58); } /* Focus */ #fluentform_6 .ff-el-form-control:focus, #fluentform_6 input:focus, #fluentform_6 textarea:focus{ outline: none; border-color: rgba(121,255,77,0.95); background: rgba(121,255,77,0.06); box-shadow: 0 0 0 4px rgba(121,255,77,0.16), 0 16px 36px rgba(0,0,0,0.35); } /* Idle glow only on email */ @keyframes nvGlow{ 0%,100%{ box-shadow: 0 0 0 0 rgba(121,255,77,0); } 50%{ box-shadow: 0 0 0 5px rgba(121,255,77,0.12); } } #fluentform_6 input[type=”email”]:not(:focus){ animation: nvGlow 5.5s ease-in-out infinite; } #fluentform_6:focus-within input[type=”email”]:not(:focus){ animation: none; } /* Button */ #fluentform_6 .ff_submit_btn_wrapper{ margin-top: 12px; } #fluentform_6 .ff-btn, #fluentform_6 button[type=”submit”]{ width: 100%; height: 56px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.35); background: linear-gradient(180deg, #5a6c2f 0%, #2f3a18 100%); color: #f2f6ee; font-size: 15px; font-weight: 900; letter-spacing: 0.7px; text-transform: uppercase; cursor: pointer; box-shadow: 0 16px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10); transition: transform .14s ease, box-shadow .22s ease, filter .22s ease; } #fluentform_6 .ff-btn:hover, #fluentform_6 button[type=”submit”]:hover{ transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 20px 44px rgba(0,0,0,0.55); } /* Accent line under button */ #fluentform_6 .ff_submit_btn_wrapper::after{ content:””; display:block; height: 3px; border-radius: 999px; margin-top: 12px; background: linear-gradient(90deg, transparent 0%, rgba(255,176,32,0.95) 50%, transparent 100%); opacity: 0.78; } /* Messages */ #fluentform_6 .ff-message-success{ margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(121,255,77,0.10); border: 1px solid rgba(121,255,77,0.28); color: #dff7d5; font-weight: 700; } #fluentform_6 .ff-el-is-error .ff-el-form-control{ border-color: rgba(255,80,80,0.60); box-shadow: 0 0 0 4px rgba(255,80,80,0.14); } /* Mobile fixes */ @media (max-width: 767px){ .pts-newsletter{ padding: 44px 14px; } #fluentform_6{ max-width: 100% !important; padding: 18px; border-radius: 16px; } /* Force name fields to stack */ #fluentform_6 .ff-t-container{ display: grid; grid-template-columns: 1fr; gap: 12px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ #fluentform_6 *{ animation: none !important; transition: none !important; } }

PathToSurvivalNewsletter

PathToSurvival
Newsletter