in a Contact Form 7 form) can never break out of the scope and "strip" the page styling. Never affects the theme's global header, footer or other pages. ============================================================= */ body.elton-lp { --teal: #0F282F; /* Dark Teal — primary dark */ --teal-lt: #014751; /* Light Teal — secondary dark */ --green: #00D37F; /* Green — primary accent */ --green-dk: #124944; /* Dark Green */ --lime: #CFF006; /* Bright Green — secondary accent */ --green-xs: #D6F7E8; /* tint of Green for light backgrounds */ --cream: #F4F8F6; --stone: #E2EDE9; --ink: #0F282F; --mid: #4A6B6E; --light: #8BAAAD; --grey: #DDDDDD; } /* Base typography is applied to the BNG sections only — not to — so the shared theme header & footer on this page keep their own font. */ body.elton-lp .hero, body.elton-lp .trust-bar, body.elton-lp .section, body.elton-lp .mandate, body.elton-lp .bottom-cta { font-family: 'Anuphan', sans-serif; color: var(--ink); font-size: 16px; line-height: 1.6; } body.elton-lp .hero *, body.elton-lp .trust-bar *, body.elton-lp .section *, body.elton-lp .mandate *, body.elton-lp .bottom-cta *, body.elton-lp .hero *::before, body.elton-lp .hero *::after, body.elton-lp .trust-bar *::before, body.elton-lp .trust-bar *::after, body.elton-lp .section *::before, body.elton-lp .section *::after, body.elton-lp .mandate *::before, body.elton-lp .mandate *::after, body.elton-lp .bottom-cta *::before, body.elton-lp .bottom-cta *::after { box-sizing: border-box; } /* ── HERO ── */ body.elton-lp .hero { background: var(--teal); padding: 90px 5% 80px; display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center; position: relative; overflow: hidden; min-height: 560px; } body.elton-lp .hero-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } body.elton-lp .hero-bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } body.elton-lp .hero-bg-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } body.elton-lp .hero-content, body.elton-lp .contact-card { position: relative; z-index: 1; } body.elton-lp .hero-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } body.elton-lp .hero-eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--lime); } body.elton-lp .hero h1 { font-family: 'Anuphan', sans-serif; font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.2rem); color: #fff; line-height: 1.15; margin-bottom: 1.25rem; letter-spacing: -0.02em; } body.elton-lp .hero h1 em { color: var(--lime); font-style: normal; font-weight: 600; } body.elton-lp .hero-lead { font-size: 1.05rem; color: var(--green-xs); max-width: 520px; margin-bottom: 2rem; line-height: 1.7; font-weight: 300; } body.elton-lp .hero-badges { display: flex; gap: 1rem; flex-wrap: wrap; } body.elton-lp .badge { display: flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; padding: 0.35rem 0.9rem; font-size: 0.78rem; color: #fff; font-weight: 500; } body.elton-lp .badge svg { flex-shrink: 0; } /* ── CONTACT CARD (hero CTA) ── */ body.elton-lp .contact-card { background: #fff; border-radius: 12px; padding: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,0.2); position: relative; z-index: 1; } body.elton-lp .contact-card h3 { font-family: 'Anuphan', sans-serif; font-weight: 600; font-size: 1.35rem; color: var(--teal); margin-bottom: 0.35rem; } body.elton-lp .contact-card > p { font-size: 0.85rem; color: var(--mid); margin-bottom: 1.5rem; } /* ── FORMS (works with Contact Form 7 markup too) ── */ body.elton-lp .form-row, body.elton-lp .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } body.elton-lp .form-field { margin-bottom: 0.75rem; } body.elton-lp .form-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--mid); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; } body.elton-lp .form-field input, body.elton-lp .form-field select, body.elton-lp .form-field textarea, body.elton-lp .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]), body.elton-lp .wpcf7 select, body.elton-lp .wpcf7 textarea { width: 100%; border: 1.5px solid var(--stone); border-radius: 6px; padding: 0.6rem 0.85rem; font-family: 'Anuphan', sans-serif; font-size: 0.88rem; color: var(--ink); background: var(--cream); transition: border-color 0.2s; outline: none; } body.elton-lp .form-field input:focus, body.elton-lp .form-field select:focus, body.elton-lp .form-field textarea:focus, body.elton-lp .wpcf7 input:focus, body.elton-lp .wpcf7 select:focus, body.elton-lp .wpcf7 textarea:focus { border-color: var(--green); background: #fff; } body.elton-lp .form-field textarea, body.elton-lp .wpcf7 textarea { resize: vertical; min-height: 90px; } body.elton-lp .btn-submit, body.elton-lp .wpcf7 input[type=submit], body.elton-lp .wpcf7 button[type=submit] { width: 100%; background: #00D37F; color: #0F282F; border: none; border-radius: 6px; padding: 0.85rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-top: 0.5rem; font-family: 'Anuphan', sans-serif; } body.elton-lp .btn-submit:hover, body.elton-lp .wpcf7 input[type=submit]:hover, body.elton-lp .wpcf7 button[type=submit]:hover { background: #00B870; } body.elton-lp .btn-submit:active { transform: translateY(1px); } body.elton-lp .contact-alt { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--stone); display: flex; gap: 1.25rem; flex-wrap: wrap; } body.elton-lp .contact-alt a { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--green); text-decoration: none; } /* Contact Form 7 normalisation — make CF7's inline field wrappers behave like the design's .form-field controls (full-width inputs, no stray gaps). */ body.elton-lp .wpcf7-form-control-wrap { display: block; } body.elton-lp .wpcf7 p { margin: 0; } /* CF7 auto-formatting inserts
after each label, which adds a large gap above every field and makes the form very tall — suppress them. */ body.elton-lp .wpcf7 br { display: none; } body.elton-lp .form-field label { margin-bottom: 0.35rem; } body.elton-lp .wpcf7-not-valid-tip { font-size: 0.72rem; color: #c0392b; margin-top: 0.25rem; } body.elton-lp .bottom-form .wpcf7-not-valid-tip { color: #ffb4a8; } body.elton-lp .wpcf7-response-output { margin: 0.85rem 0 0 !important; padding: 0.6rem 0.85rem !important; font-size: 0.8rem; border-radius: 6px; } body.elton-lp .wpcf7 .wpcf7-spinner { margin: 0.5rem auto 0; } /* ── TRUST BAR ── */ body.elton-lp .trust-bar { background: var(--cream); border-bottom: 1px solid var(--stone); padding: 1.25rem 5%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } body.elton-lp .trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; color: #0F282F; } body.elton-lp .trust-item .t-icon { font-size: 1.1rem; } /* ── SECTION WRAPPER ── */ body.elton-lp .section { padding: 72px 5%; } body.elton-lp .section-narrow { max-width: 820px; margin: 0 auto; } body.elton-lp .section-label { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal-lt); border: 1.5px solid var(--green); border-radius: 100px; padding: 0.3rem 0.9rem; margin-bottom: 1rem; } body.elton-lp h2 { font-family: 'Anuphan', sans-serif; font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.5rem); color: #0F282F; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1rem; } body.elton-lp h2 em { font-style: normal; font-weight: 600; color: #00D37F; } body.elton-lp .lead-text { font-size: 1.05rem; color: var(--mid); line-height: 1.75; } /* ── WHAT IS BNG ── */ /* Optional modifier: constrain a section heading to the left column width so it sits above the what-body rather than spanning the full grid. */ body.elton-lp .what-heading { max-width: calc(50% - 2rem); } body.elton-lp .what-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-top: 3rem; } /* Variant with no side visual — width is set by the centred .section-narrow wrapper, this just adds spacing below the heading. */ body.elton-lp .what-body--full { margin-top: 1.75rem; } body.elton-lp .what-visual { background: var(--cream); border-radius: 12px; padding: 2.5rem; border: 1px solid var(--stone); } body.elton-lp .metric-stat { font-family: 'Anuphan', sans-serif; font-size: 4rem; color: var(--teal); line-height: 1; margin-bottom: 0.25rem; } body.elton-lp .metric-stat span { font-size: 2rem; color: var(--green); } body.elton-lp .metric-label { font-size: 0.85rem; color: var(--mid); margin-bottom: 2rem; } body.elton-lp .metric-rows { display: flex; flex-direction: column; gap: 0.75rem; } body.elton-lp .metric-row { display: flex; justify-content: space-between; align-items: center; } body.elton-lp .metric-row-label { font-size: 0.82rem; color: var(--mid); } body.elton-lp .metric-bar-wrap { flex: 1; margin: 0 0.75rem; height: 6px; background: var(--stone); border-radius: 3px; overflow: hidden; } body.elton-lp .metric-bar { height: 100%; background: #00D37F; border-radius: 3px; } body.elton-lp .metric-row-val { font-size: 0.82rem; font-weight: 700; color: var(--teal); min-width: 32px; text-align: right; } /* ── SURVEY FLOW (used in the Bat Survey page's what-visual) ── */ body.elton-lp .survey-flow-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-lt); margin-bottom: 1.25rem; } body.elton-lp .survey-flow { list-style: none; margin: 0; padding: 0; position: relative; } /* connecting spine between the numbered nodes */ body.elton-lp .survey-flow::before { content: ''; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--stone); } body.elton-lp .survey-step { position: relative; display: flex; align-items: flex-start; gap: 1rem; padding: 0.6rem 0; } body.elton-lp .survey-step-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: var(--teal); font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--cream); } body.elton-lp .survey-step-body { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.2rem; } body.elton-lp .survey-step-name { font-size: 0.9rem; font-weight: 600; color: var(--teal); } body.elton-lp .survey-step-cond { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mid); background: var(--stone); border-radius: 3px; padding: 0.08rem 0.4rem; margin-left: 0.35rem; vertical-align: middle; } body.elton-lp .survey-step-meta { font-size: 0.78rem; color: var(--mid); } body.elton-lp .what-body p { color: var(--mid); line-height: 1.75; margin-bottom: 1rem; font-size: 0.95rem; } body.elton-lp .what-body p:last-child { margin-bottom: 0; } body.elton-lp .definition-box { background: var(--cream); border-left: 3px solid #00D37F; border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.9rem; color: var(--teal); font-style: italic; } /* ── MANDATORY REQUIREMENT HIGHLIGHT ── */ body.elton-lp .mandate { background: var(--teal); color: #fff; padding: 60px 5%; text-align: center; } body.elton-lp .mandate .section-label { display: block; width: fit-content; margin: 0 auto 1rem; color: #fff; border-color: var(--lime); } body.elton-lp .mandate h2 { color: var(--green-xs); margin-bottom: 0.75rem; } body.elton-lp .mandate > p { color: rgba(255,255,255,0.75); max-width: 640px; margin: 0 auto 2.5rem; font-size: 0.95rem; } body.elton-lp .mandate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 900px; margin: 0 auto; } /* BNG mandate has four cards (incl. NSIPs) — give it a wider 4-column grid. */ body.bng-page .mandate-cards { grid-template-columns: repeat(4, 1fr); max-width: 1080px; } body.elton-lp .mandate-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 1.5rem; text-align: left; } body.elton-lp .mandate-card .mc-date { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lime); margin-bottom: 0.5rem; } body.elton-lp .mandate-card h4 { color: #fff; font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600; } body.elton-lp .mandate-card p { font-size: 0.82rem; color: rgba(255,255,255,0.65); margin: 0; } /* ── SERVICES ── */ body.elton-lp .services { background: var(--cream); } body.elton-lp .services .section-label { display: block; width: fit-content; margin: 0 auto 1rem; } body.elton-lp .services h2 { text-align: center; margin-bottom: 0.75rem; } body.elton-lp .services-intro { text-align: center; color: var(--mid); max-width: 560px; margin: 0 auto 3rem; } body.elton-lp .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } body.elton-lp .service-card { position: relative; background: var(--teal); /* fallback shown when no card photo is set */ border-radius: 10px; overflow: hidden; min-height: 280px; display: flex; align-items: flex-end; transition: box-shadow 0.2s, transform 0.2s; } body.elton-lp .service-card:hover { box-shadow: 0 12px 32px rgba(15,40,47,0.25); transform: translateY(-2px); } body.elton-lp .service-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } body.elton-lp .service-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,40,47,0.05) 0%, rgba(15,40,47,0.45) 35%, rgba(15,40,47,0.95) 75%, rgba(15,40,47,0.97) 100%); z-index: 1; } body.elton-lp .service-card-content { position: relative; z-index: 2; padding: 1.5rem 1.5rem 1.75rem; width: 100%; } body.elton-lp .service-card .service-card-content h3 { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: 0.5rem; } body.elton-lp .service-card .service-card-content p { font-size: 0.83rem; color: rgba(255,255,255,0.85); line-height: 1.6; margin: 0; } /* ── PROCESS ── */ body.elton-lp .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--stone); border-radius: 10px; overflow: hidden; margin-top: 3rem; } body.elton-lp .process-step { background: #fff; padding: 2rem 1.5rem; } body.elton-lp .step-num { font-family: 'Anuphan', sans-serif; font-size: 2.5rem; color: #00D37F; line-height: 1; opacity: 0.6; margin-bottom: 0.75rem; } body.elton-lp .process-step h4 { font-size: 0.95rem; font-weight: 600; color: var(--teal); margin-bottom: 0.5rem; } body.elton-lp .process-step p { font-size: 0.82rem; color: var(--mid); line-height: 1.6; margin: 0; } /* ── FAQ ── */ body.elton-lp .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; } body.elton-lp .faq-item { border-bottom: 1px solid var(--stone); padding-bottom: 1.5rem; } body.elton-lp .faq-item h4 { font-size: 0.95rem; font-weight: 600; color: var(--teal); margin-bottom: 0.5rem; } body.elton-lp .faq-item p { font-size: 0.85rem; color: var(--mid); line-height: 1.65; margin: 0; } /* ── BOTTOM CTA ── */ body.elton-lp .bottom-cta { background: linear-gradient(120deg, rgba(15,40,47,0.94) 0%, rgba(18,73,68,0.88) 100%); background-size: cover; background-position: center; padding: 80px 5%; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; overflow: hidden; } /* When an ACF background image is set it is applied inline via --cta-photo */ body.elton-lp .bottom-cta.has-photo { background-image: var(--cta-photo), linear-gradient(120deg, rgba(15,40,47,0.94) 0%, rgba(18,73,68,0.88) 100%); background-blend-mode: normal, multiply; } body.elton-lp .bottom-cta::before { content: ''; position: absolute; bottom: -20%; left: -10%; width: 360px; height: 360px; background-image: repeating-linear-gradient( -55deg, transparent 0px, transparent 14px, rgba(207, 240, 6, 0.10) 14px, rgba(207, 240, 6, 0.10) 16px ); pointer-events: none; z-index: 0; } body.elton-lp .bottom-cta > * { position: relative; z-index: 1; } body.elton-lp .bottom-cta-text h2 { color: #fff; font-weight: 700; margin-bottom: 1rem; } body.elton-lp .bottom-cta-text p { color: #fff; font-weight: 600; font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.5rem; } body.elton-lp .cta-details { display: flex; flex-direction: column; gap: 0.75rem; } body.elton-lp .cta-detail { display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; font-weight: 600; color: #fff; } body.elton-lp .cta-detail a { color: #fff; font-weight: 600; text-decoration: none; } body.elton-lp .cta-detail svg { flex-shrink: 0; } body.elton-lp .bottom-form { background: rgba(15,40,47,0.92); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 2rem; backdrop-filter: blur(6px); } body.elton-lp .bottom-form h3 { font-family: 'Anuphan', sans-serif; color: #fff; margin-bottom: 1.5rem; font-size: 1.3rem; } body.elton-lp .bottom-form .form-field label, body.elton-lp .bottom-form .wpcf7 label { color: rgba(255,255,255,0.7); } body.elton-lp .bottom-form .form-field input, body.elton-lp .bottom-form .form-field select, body.elton-lp .bottom-form .form-field textarea, body.elton-lp .bottom-form .wpcf7 input:not([type=submit]), body.elton-lp .bottom-form .wpcf7 select, body.elton-lp .bottom-form .wpcf7 textarea { background: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.3); color: #0F282F; } body.elton-lp .bottom-form .form-field input::placeholder, body.elton-lp .bottom-form .form-field textarea::placeholder { color: #8BAAAD; } body.elton-lp .bottom-form .form-field input:focus, body.elton-lp .bottom-form .form-field select:focus, body.elton-lp .bottom-form .form-field textarea:focus { border-color: var(--green-xs); background: rgba(255,255,255,0.18); } body.elton-lp .bottom-form select option { background: #fff; color: #0F282F; } body.elton-lp .bottom-form .btn-submit { background: #00D37F; color: #0F282F; } body.elton-lp .bottom-form .btn-submit:hover { background: #00B870; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { body.elton-lp .hero { grid-template-columns: 1fr; } body.elton-lp .what-grid { grid-template-columns: 1fr; } body.elton-lp .what-heading { max-width: none; } body.elton-lp .mandate-cards { grid-template-columns: 1fr; } body.elton-lp .services-grid { grid-template-columns: 1fr 1fr; } body.elton-lp .process-steps { grid-template-columns: 1fr 1fr; } body.elton-lp .faq-grid { grid-template-columns: 1fr; } body.elton-lp .bottom-cta { grid-template-columns: 1fr; } } @media (max-width: 600px) { body.elton-lp .services-grid { grid-template-columns: 1fr; } body.elton-lp .process-steps { grid-template-columns: 1fr; } body.elton-lp .trust-bar { justify-content: center; } body.elton-lp .form-row, body.elton-lp .form-row-2 { grid-template-columns: 1fr; } }