/* ============================================================================ lp2026.css — triOS program landing page, thank-you + privacy pages (LP2026) ---------------------------------------------------------------------------- Loaded ONLY by template-lp2026.php, template-thankyou2026.php and template-privacy2026.php (see gr8x_lp2026_assets() in functions.php). Everything is scoped under .lp2026 / .ty2026 / .pp2026 on , so this file can never leak into the rest of the site. Sections: 1. Tokens + base 2. Layout / responsive rules carried over from the approved design 3. Motion 4. GRAVITY FORMS RESTYLE <-- the only genuinely new CSS 5. Thank-you page 6. Privacy page ========================================================================== */ /* ========================================================================== 1. TOKENS + BASE ========================================================================== */ .lp2026, .ty2026, .pp2026 { --lp-navy: #142F84; --lp-navy-deep: #071c48; --lp-navy-bar: #0c2560; --lp-green: #488321; --lp-green-lt: #8bc53f; --lp-gold: #e6b04e; --lp-gold-deep: #edae32; --lp-cream: #f7f1e6; --lp-ink: #2c2a26; --lp-ink-soft: #5a564d; } .lp2026, .ty2026, .pp2026 { margin: 0; background: var(--lp-cream); color: var(--lp-ink); font-family: 'Figtree', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } .lp2026 *, .ty2026 *, .pp2026 * { box-sizing: border-box; } .lp2026 a, .ty2026 a { color: var(--lp-green); text-decoration: none; } .lp2026 a:hover, .ty2026 a:hover, .pp2026 a:hover { color: #3a6b1a; } /* The privacy page is prose, so links inside it stay underlined. Its two buttons carry text-decoration:none inline, which outranks this. */ .pp2026 a { color: var(--lp-green); text-decoration: underline; } .lp2026 input, .lp2026 textarea, .lp2026 button, .lp2026 select, .lp2026 fieldset, .lp2026 legend, .lp2026 h1, .lp2026 h2, .lp2026 h3, .lp2026 p, .lp2026 li, .lp2026 span, .lp2026 div, .ty2026 h1, .ty2026 h2, .ty2026 h3, .ty2026 p, .ty2026 div, .ty2026 span, .pp2026 h1, .pp2026 h2, .pp2026 h3, .pp2026 p, .pp2026 li, .pp2026 div, .pp2026 span { font-family: 'Figtree', system-ui, sans-serif; } .lp2026 textarea { resize: vertical; } /* The theme's global style.css sets rules for h1/h2/main etc. Neutralise the ones that fight the LP layout without touching the rest of the site. */ .lp2026 h1, .lp2026 h2, .lp2026 h3, .ty2026 h1, .ty2026 h2, .ty2026 h3, .pp2026 h1, .pp2026 h2, .pp2026 h3 { text-transform: none; } /* .goldsweep: static 2px gold outline drawn OUTSIDE the card. A border would change the box and shift layout, so it is a masked ::before instead — a gold rect inset by -2px with its interior masked out. */ .goldsweep { position: relative; isolation: isolate; } .goldsweep::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3; background: var(--lp-gold); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } #form-bottom, #form { scroll-margin-top: 96px; } /* ========================================================================== 2. LAYOUT / RESPONSIVE — carried over verbatim from the approved design ========================================================================== */ .lp-facts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } @media (max-width:1180px) { .lp-heroE-copy { max-width: 58% !important; } .lp-starter-grid { flex-direction: column !important; gap: 18px !important; } .lp-starter-aside { flex: 1 1 auto !important; width: 100% !important; border-left: 0 !important; border-top: 1px solid rgba(72,131,33,.22) !important; } } @media (max-width:980px) { .lp-steps { grid-template-columns: 1fr 1fr !important; } .lp-roles { grid-template-columns: 1fr 1fr !important; } .lp-head-prog { font-size: 13px !important; } .lp-heroE { padding: 36px 28px 36px !important; } .lp-heroE-copy { max-width: 100% !important; } .lp-heroE-photo { width: 100% !important; opacity: .34; } .lp-starter { margin-top: 34px !important; } .lp-topics { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .lp-heroE-proof { flex-direction: column !important; align-items: flex-start !important; gap: 11px !important; width: auto !important; } .lp-heroE-proof > li { border-left: 0 !important; padding: 0 !important; } .lp-finalform { grid-template-columns: 1fr !important; } /* Two-up down to 820px, where the block above takes everything to one column. */ .lp-designation-cards { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .lp-designation-advantages > div:last-child { grid-template-columns: 1fr !important; } .lp-why-grid { grid-template-columns: 1fr !important; } .lp-careers { grid-template-columns: 1fr !important; } .lp-careers > div:first-child { min-height: 300px !important; } .lp-careers-body { padding: 40px 28px !important; } .lp-prac-top { padding-bottom: 110px !important; gap: 30px !important; } .lp-prac-cols > div { flex: 1 1 100% !important; padding: 0 20px !important; } .lp-prac-cols > div + div { margin-top: 26px; padding-top: 26px !important; border-top: 1px solid rgba(28,47,34,.1); } .lp-prac-foot { padding: 18px 20px !important; } .lp-prac-foot > div:last-child { margin-left: 0 !important; width: 100%; } } @media (max-width:820px) { .lp-facts { grid-template-columns: minmax(0,1fr) !important; } .lp-facts-img { height: 240px !important; } .lp-3, .lp-2, .lp-roles, .lp-steps { grid-template-columns: 1fr !important; } .lp-outcome { grid-template-columns: 1fr !important; gap: 26px !important; } /* Sections 03-06 of the 2026 revision. Every one of these is a fixed-column grid at desktop width, and every one becomes a single column here — the capstone rules that used to live in this block went with the block they styled. The image keeps a height of its own: stretched to a one-column row it would otherwise collapse to nothing. */ .lp-skill-grid { grid-template-columns: 1fr !important; } .lp-designation-proof { grid-template-columns: 1fr !important; } .lp-designation-cards { grid-template-columns: 1fr !important; } .lp-designation-image img { min-height: 320px !important; max-height: 420px !important; } .lp-designation-advantages > div:last-child { grid-template-columns: 1fr !important; } .lp-designation-employer-band { grid-template-columns: 1fr !important; } .lp-why-grid { grid-template-columns: 1fr !important; } .lp-story-grid { grid-template-columns: 1fr !important; } /* Stacked, the divider beside the employers CTA is a line to nowhere. */ .lp-designation-employer-band > div:last-child { padding-left: 0 !important; border-left: 0 !important; padding-top: 18px !important; border-top: 1px solid rgba(28,47,34,.12) !important; } .lp-footgrid { grid-template-columns: repeat(2,1fr) !important; } /* Room for the sticky CTA — landing page only; the thank-you page has none. */ .lp2026 .lp-foot { padding-bottom: 108px !important; } #sticky-cta.show { display: block !important; } .lp-prac-tiles { gap: 10px !important; } .lp-head { padding: 10px 18px !important; gap: 14px !important; } .lp-head img { height: 34px !important; } .lp-head-prog { font-size: 12px !important; letter-spacing: .4px !important; } .lp-head-loc { padding: 8px 14px !important; font-size: 11px !important; gap: 8px !important; letter-spacing: .9px !important; } .lp-head-rule { display: none !important; } /* Mobile: the CTA owns the top-right corner; the hero already states delivery. */ .lp-head-badge { display: none !important; } .lp-heroE { padding: 26px 18px 30px !important; } .lp-heroE-photo { display: none !important; } .lp-starter { margin-top: 28px !important; padding: 22px 18px !important; } /* Two narrow columns leave ~60px for the label once checkbox + icon are in, which broke words mid-character ("Tuiti / on"). Drop the icon on mobile. */ .tc-icon { display: none !important; } /* The advisor pitch sits between the topics and the button, pushing the CTA below the fold. Hide the pitch on mobile; desktop keeps the full panel. */ .lp-aside-sell { display: none !important; } .lp-starter-aside { padding: 0 !important; gap: 10px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; margin-top: 8px !important; } .lp-starter-grid { gap: 0 !important; } .lp-starter-grid > div:first-child { padding: 4px 0 0 !important; } /* One column: at two columns "Admission requirements" stacked onto three lines. Full-width rows read in one line and are a bigger tap target. */ .lp-topics { grid-template-columns: 1fr !important; } .lp-camp-head { display: none !important; } .lp-camp-lb { display: flex !important; } .lp-footgrid { display: none !important; } .lp-camp-cb:checked ~ .lp-footgrid { display: grid !important; margin-top: 14px; } .lp-camp-cb:checked ~ .lp-camp-lb .lp-camp-chev { transform: rotate(180deg); } .lp-designation-employer-band { padding: 18px !important; text-align: center; } .lp-designation-employer-band > div:last-child > a { max-width: none !important; } /* One uniform gap at every section change, and centred CTAs. Scoped to .lp2026 — the thank-you page shares .lp-pad but wants its own (larger) section rhythm. */ .lp2026 .lp-pad:not(.lp-head):not(.lp-heroE):not(.lp-prac-top) { padding-top: 30px !important; padding-bottom: 30px !important; } .lp-prac-foot > img { display: none !important; } .lp-prac-foot { justify-content: center !important; text-align: center !important; } .lp-prac-foot > div { flex: 1 1 100% !important; text-align: center !important; } .lp-prac-foot > div:last-child { align-items: center !important; } } @media (max-width:600px) { .lp-pad, .lp-hero { padding-left: 18px !important; padding-right: 18px !important; } .lp-tools { gap: 20px 26px !important; } .lp-footgrid { grid-template-columns: 1fr !important; } .lp-finalform > div { padding: 26px 20px !important; } .lp-heroE-copy > div:nth-of-type(2) { white-space: normal !important; line-height: 1.35; } .lp-heroE { padding: 22px 18px 26px !important; } .lp-head-prog { display: none !important; } .lp-starter-grid { gap: 14px !important; } .lp-starter legend { font-size: 18px !important; } } @media (max-width:380px) { .lp-topics { grid-template-columns: 1fr !important; } #sticky-cta .sticky-label { display: none !important; } #sticky-cta .sticky-btn { flex: 1 1 auto !important; text-align: center !important; } } /* ========================================================================== 3. MOTION Hidden state is declared up front, not switched on by JS after paint — otherwise painted content snaps to invisible and reads as a page-wide blink. ========================================================================== */ @keyframes lineDrop { from { opacity:0; transform:translateY(-30px) } to { opacity:1; transform:none } } @keyframes slideUp { from { transform:translateY(100%) } to { transform:none } } .h1l { display: block; opacity: 0; animation: lineDrop 1s cubic-bezier(.18,.85,.3,1) forwards; } .h1l:nth-child(2) { animation-delay: .34s; } .h1l:nth-child(3) { animation-delay: .68s; } .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .75s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } #sticky-cta.show { animation: slideUp .3s cubic-bezier(.2,.7,.2,1); } /* Reduced motion: animations are off, so every element whose resting state is opacity:0 must be restored here or its content vanishes for good. */ @media (prefers-reduced-motion: reduce) { .lp2026 *, .ty2026 * { animation: none !important; } .reveal { opacity: 1; transform: none; } .h1l { opacity: 1 !important; } } /* ========================================================================== 4. GRAVITY FORMS RESTYLE -------------------------------------------------------------------------- Makes the multi-page Gravity Form read as the approved design: GF page 1 = topic checkboxes + question textarea -> .topic-card tiles GF page 2 = first / last / email GF page 3 = postal / phone -> submit Selectors cover BOTH GF markup modes: .gform_legacy_markup_wrapper (legacy theme — what this site currently uses) .gform_wrapper.gravity-theme (GF 2.5+ default, if the site ever switches) Everything is scoped to .lp2026-form so no other form on the site is touched. ========================================================================== */ .lp2026-form .gform_wrapper { margin: 0; } .lp2026-form .gform_wrapper form { margin: 0; } .lp2026-form .gform_heading { display: none; } /* title/description live in the card */ .lp2026-form .gform_wrapper .gform_body { width: 100%; } /* ---- field rows ---- */ .lp2026-form .gform_wrapper .gform_fields { display: block; margin: 0; padding: 0; list-style: none; } .lp2026-form .gform_wrapper .gfield { list-style: none; margin: 0 0 16px; padding: 0; width: 100%; max-width: 100%; } .lp2026-form .gform_wrapper .gfield::before, .lp2026-form .gform_wrapper .gfield::after { display: none; } .lp2026-form .gform_wrapper .gfield_label, .lp2026-form .gform_wrapper legend.gfield_label { display: block; font-size: 15px; font-weight: 600; color: #41403a; line-height: 1.35; margin: 0 0 7px; padding: 0; text-transform: none; } .lp2026-form .gform_wrapper .gfield_required { color: #b42318; margin-left: 3px; } .lp2026-form .gform_wrapper .gfield_description, .lp2026-form .gform_wrapper .instruction { font-size: 13px; color: #6f6b62; line-height: 1.45; margin: 5px 0 0; padding: 0; } /* ---- text / email / tel / textarea ---- */ .lp2026-form .gform_wrapper input[type=text], .lp2026-form .gform_wrapper input[type=email], .lp2026-form .gform_wrapper input[type=tel], .lp2026-form .gform_wrapper input[type=number], .lp2026-form .gform_wrapper select, .lp2026-form .gform_wrapper textarea { width: 100% !important; max-width: 100% !important; border: 1.5px solid #cfd7e6; border-radius: 10px; padding: 13px 15px; font-size: 16px; line-height: 1.45; color: var(--lp-ink); background: #fff; transition: box-shadow .16s ease, border-color .16s ease; -webkit-appearance: none; appearance: none; } .lp2026-form .gform_wrapper textarea { min-height: 90px; padding-bottom: 14px; } .lp2026-form .gform_wrapper select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23142F84' stroke-width='1.8' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; padding-right: 40px; } .lp2026-form .gform_wrapper input[type=text]:focus, .lp2026-form .gform_wrapper input[type=email]:focus, .lp2026-form .gform_wrapper input[type=tel]:focus, .lp2026-form .gform_wrapper select:focus, .lp2026-form .gform_wrapper textarea:focus { outline: none; border-color: var(--lp-green); box-shadow: 0 0 0 3px rgba(72,131,33,.25); } /* Two-up rows. Give the GF field a "lp-half" CSS Class in the form editor (Appearance > Custom CSS Class) to sit two fields side by side. */ @media (min-width: 601px) { .lp2026-form .gform_wrapper .gform_fields { display: flex; flex-wrap: wrap; gap: 0 12px; } .lp2026-form .gform_wrapper .gfield { flex: 1 1 100%; } .lp2026-form .gform_wrapper .gfield.lp-half { flex: 1 1 calc(50% - 6px); } .lp2026-form .gform_wrapper .gfield.lp-third { flex: 1 1 calc(33.333% - 8px); } } /* ---- checkboxes -> the design's .topic-card tiles ---- */ .lp2026-form .gform_wrapper .gfield_checkbox { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } @media (max-width:980px) { .lp2026-form .gform_wrapper .gfield_checkbox { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width:820px) { .lp2026-form .gform_wrapper .gfield_checkbox { grid-template-columns: 1fr; } } .lp2026-form .gform_wrapper .gfield_checkbox li, .lp2026-form .gform_wrapper .gfield_checkbox .gchoice { margin: 0; padding: 0; list-style: none; position: relative; } .lp2026-form .gform_wrapper .gfield_checkbox input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .lp2026-form .gform_wrapper .gfield_checkbox label { position: relative; display: flex; align-items: center; gap: 13px; min-height: 66px; margin: 0; padding: 13px 44px 13px 16px; border-radius: 10px; border: 1.5px solid #cfd7e6; background: #fbfaf5; font-size: 16.5px; font-weight: 600; line-height: 1.25; color: var(--lp-navy); cursor: pointer; overflow-wrap: anywhere; hyphens: auto; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .lp2026-form .gform_wrapper .gfield_checkbox label:hover { border-color: #7aa855; box-shadow: 0 2px 8px rgba(28,47,34,.09); } /* the tick box, drawn on the label so no extra markup is needed */ .lp2026-form .gform_wrapper .gfield_checkbox label::after { content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 4px; border: 1.8px solid #98a3b8; background: #fff; background-repeat: no-repeat; background-position: center; background-size: 13px 13px; transition: background-color .15s ease, border-color .15s ease; } .lp2026-form .gform_wrapper .gfield_checkbox input[type=checkbox]:checked + label { background: #eef6e9; border-color: var(--lp-green); font-weight: 700; } .lp2026-form .gform_wrapper .gfield_checkbox input[type=checkbox]:checked + label::after { background-color: var(--lp-green); border-color: var(--lp-green); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E"); } .lp2026-form .gform_wrapper .gfield_checkbox input[type=checkbox]:focus-visible + label { outline: 3px solid var(--lp-navy); outline-offset: 2px; } @media (max-width:820px) { .lp2026-form .gform_wrapper .gfield_checkbox label { gap: 12px; padding: 12px 40px 12px 14px; font-size: 15.5px; min-height: 52px; } .lp2026-form .gform_wrapper .gfield_checkbox label::after { width: 20px; height: 20px; right: 12px; } } /* ---- radios (kept consistent, in case a page uses them) ---- */ .lp2026-form .gform_wrapper .gfield_radio { margin: 0; padding: 0; list-style: none; } .lp2026-form .gform_wrapper .gfield_radio li { margin: 0 0 8px; list-style: none; } .lp2026-form .gform_wrapper .gfield_radio label { font-size: 15.5px; color: var(--lp-ink); cursor: pointer; padding-left: 6px; } /* ---- consent / single checkbox rows stay plain, not tiles ---- */ .lp2026-form .gform_wrapper .gfield.lp-consent .gfield_checkbox { display: block; } .lp2026-form .gform_wrapper .gfield.lp-consent .gfield_checkbox input[type=checkbox] { position: static; opacity: 1; width: 16px; height: 16px; margin: 3px 10px 0 0; accent-color: var(--lp-navy); } .lp2026-form .gform_wrapper .gfield.lp-consent .gfield_checkbox label { display: block; min-height: 0; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 400; line-height: 1.45; color: #4a4a42; } .lp2026-form .gform_wrapper .gfield.lp-consent .gfield_checkbox label::after { display: none; } /* ---- buttons ---- */ .lp2026-form .gform_wrapper .gform_footer, .lp2026-form .gform_wrapper .gform_page_footer { display: flex; align-items: center; gap: 11px; margin: 18px 0 0; padding: 0; clear: both; } .lp2026-form .gform_wrapper .gform_button, .lp2026-form .gform_wrapper .gform_next_button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: auto; min-height: 58px; border: 0; border-radius: 10px; padding: 16px 20px; font-size: 15.5px; font-weight: 800; letter-spacing: .6px; line-height: 1.2; text-transform: uppercase; color: var(--lp-navy); background: linear-gradient(180deg,#f0b93f 0%,#e0a026 100%); box-shadow: 0 4px 12px rgba(2,16,43,.28); cursor: pointer; transition: filter .15s ease; } .lp2026-form .gform_wrapper .gform_button:hover, .lp2026-form .gform_wrapper .gform_next_button:hover { filter: brightness(1.03); } .lp2026-form .gform_wrapper .gform_previous_button { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 15px 22px; min-height: 58px; font-size: 15px; font-weight: 700; color: var(--lp-navy); background: #eef1f7; cursor: pointer; } .lp2026-form .gform_wrapper [disabled] { opacity: .65; cursor: progress; } /* ---- progress bar ---- */ .lp2026-form .gform_wrapper .gf_progressbar_wrapper { margin: 0 0 18px; padding: 0; } .lp2026-form .gform_wrapper .gf_progressbar_title { font-size: 12.5px; font-weight: 600; color: #8a8478; text-align: right; margin: 0 0 7px; padding: 0; } .lp2026-form .gform_wrapper .gf_progressbar { height: 8px; border-radius: 999px; background: #e7ebf3; overflow: hidden; box-shadow: none; padding: 0; } .lp2026-form .gform_wrapper .gf_progressbar_percentage { height: 100%; border-radius: 999px; background: var(--lp-green) !important; transition: width .4s cubic-bezier(.2,.7,.2,1); } .lp2026-form .gform_wrapper .gf_progressbar_percentage span { display: none; /* the % label duplicates the title */ } /* ---- validation ---- */ .lp2026-form .gform_wrapper .gfield_error input[type=text], .lp2026-form .gform_wrapper .gfield_error input[type=email], .lp2026-form .gform_wrapper .gfield_error input[type=tel], .lp2026-form .gform_wrapper .gfield_error select, .lp2026-form .gform_wrapper .gfield_error textarea { border-color: #b42318 !important; box-shadow: 0 0 0 3px rgba(180,35,24,.22); } .lp2026-form .gform_wrapper .gfield_error .gfield_checkbox label { border-color: #b42318; } .lp2026-form .gform_wrapper .validation_message, .lp2026-form .gform_wrapper .gfield_validation_message { color: #b42318; font-size: 12.5px; font-weight: 600; line-height: 1.35; background: none; border: 0; padding: 5px 0 0; margin: 0; } .lp2026-form .gform_wrapper .gfield_error { background: none; border: 0; padding: 0; margin-bottom: 16px; } .lp2026-form .gform_wrapper .validation_error { border: 0; border-radius: 10px; background: #fdeceb; color: #b42318; font-size: 14px; font-weight: 600; line-height: 1.45; padding: 12px 15px; margin: 0 0 16px; text-align: left; } /* ---- GF confirmation (only shows if the form is NOT set to redirect) ---- */ .lp2026-form .gform_confirmation_message { font-size: 16px; line-height: 1.55; color: var(--lp-ink); text-align: center; padding: 20px 0; } /* ---- spinner ---- */ .lp2026-form .gform_wrapper .gform_ajax_spinner { margin-left: 12px; } /* ---- hidden / honeypot rows must never take up space ---- Form 5 carries several of these: 26 School, 21 Program, 19 Campus, 15 Media ID (visibility: hidden) and 25 Category + Question. */ .lp2026-form .gform_wrapper .gform_hidden, .lp2026-form .gform_wrapper .gfield_visibility_hidden, .lp2026-form .gform_wrapper .gform_validation_container { display: none !important; } /* ---- the form's own per-page headings (HTML blocks 22 / 23 / 24) ---- Pages 2 and 3 keep theirs ("Who should we send the details to?", "Last step — where can we reach you?"), styled to match the design's step headings. Page 1's heading is hidden: the template already prints a heading above the card, and unlike the shared form's wording that one can name the program. :first-of-type rather than #gform_page_5_1 so this holds whatever form id a page is pointed at. */ .lp2026-form .gform_wrapper .gform_page:first-of-type .gf_page_titles { display: none; } .lp2026-form .gform_wrapper .gf_page_titles { margin: 0 0 16px; } .lp2026-form .gform_wrapper .gf_page_titles h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--lp-ink); text-transform: none; } .lp2026-form .gform_wrapper .gf_page_titles h3 { margin: 0; font-size: 14.5px; font-weight: 400; line-height: 1.45; color: #6f6b62; text-transform: none; } /* ---- the consent notice (HTML block 14) ---- */ .lp2026-form .gform_wrapper .sendInfoFormBelow, .lp2026-form .gform_wrapper .sendInfoFormBelow p { font-size: 13px; line-height: 1.45; color: #6f6b62; text-align: center; margin: 0; } /* ---- defensive: field 16 carries GF's own gf_list_inline class, whose float/width rules would fight the tile grid above. ---- */ .lp2026-form .gform_wrapper .gf_list_inline .gfield_checkbox li, .lp2026-form .gform_wrapper .gfield_checkbox li { float: none !important; width: auto !important; display: block; } /* ========================================================================== 4b. HAND-CODED LEAD FORM (inc/lp2026-lead.php + assets/js/lp2026-form.js) -------------------------------------------------------------------------- The form the page actually uses. Gravity Forms never renders markup here — the submission goes through GFAPI::submit_form() — so nothing below has to fight GF's own stylesheet, and the form can appear as many times on the page as we like without id collisions. ========================================================================== */ .lp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Honeypot: a real input, positioned where no human will ever see or tab to it. */ .lp-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .lp2026-lead { margin: 0; } .lp-step[hidden] { display: none; } /* ---- step 1 layout: the question on the left, the advisor panel on the right ---- Only the ROW is a flex container. The overrides in section 2 (1180px collapses the columns, 820px strips the panel back to just its button) all assume these base values — they were written against the design before this file existed. */ .lp-starter-grid { display: flex; align-items: center; gap: 0; } .lp-starter-solo { display: block; } .lp-starter-main { min-width: 0; } .lp-starter-grid > .lp-starter-main { flex: 1 1 auto; padding: 12px 30px 0 0; } .lp-starter-aside { flex: 0 0 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: #eff5e9; border-left: 1px solid rgba(72,131,33,.22); border-radius: 14px; padding: 14px 28px 24px; } /* "· 2 topics selected", appended live to the sub-heading above the tiles. */ .lp-topic-count { font-weight: 700; color: var(--lp-green); white-space: nowrap; } /* ---- topic tiles ---- */ .lp-topics-set { border: 0; margin: 0; padding: 0; min-width: 0; } .lp-topics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } @media (max-width:980px) { .lp-topics { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width:820px) { .lp-topics { grid-template-columns: 1fr; } } /* The tile. The checkbox is the real control, visually hidden inside the label, so the whole card is the hit area — and because it is still a focusable input, :focus-within below gives the keyboard a visible ring. */ .topic-card { position: relative; display: flex; align-items: center; gap: 13px; min-height: 66px; margin: 0; padding: 13px 16px; border: 1.5px solid #c6cfe0; border-radius: 10px; background: #fbfaf5; color: var(--lp-navy); font-size: 16.5px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .topic-card:hover { border-color: #7aa855; box-shadow: 0 2px 8px rgba(28,47,34,.09); } .topic-card:focus-within { outline: 3px solid var(--lp-navy); outline-offset: 2px; } .topic-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .tc-box { flex: 0 0 22px; width: 22px; height: 22px; margin-left: auto; border: 1.8px solid #98a3b8; border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s ease, border-color .15s ease; } .topic-card .tc-icon { flex: 0 0 26px; width: 26px; height: 26px; color: var(--lp-green); } .topic-card .tc-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; hyphens: auto; } .topic-card .tc-check { width: 13px; height: 13px; opacity: 0; transition: opacity .12s ease; } .topic-card:has(input:checked) { background: #eef6e9; border-color: var(--lp-green); font-weight: 700; } .topic-card:has(input:checked) .tc-box { background: var(--lp-green); border-color: var(--lp-green); } .topic-card:has(input:checked) .tc-check { opacity: 1; } .topic-card:has(input:checked) .tc-icon { color: #2c5c12; } /* :has() fallback — Safari <15.4 / Firefox <121 keep the unchecked look but the checkbox still works, so nothing is lost beyond the tint. */ .topic-card input:checked ~ .tc-box { background: var(--lp-green); border-color: var(--lp-green); } .topic-card input:checked ~ .tc-box .tc-check { opacity: 1; } /* ---- fields ---- */ .lp-field { margin: 0 0 12px; min-width: 0; } .lp-field > label { display: block; font-size: 15px; color: #41403a; line-height: 1.35; margin: 0 0 7px; } .lp-optional { color: #6f6b62; } .lp-question { margin-top: 16px; } .f-in { width: 100%; border: 1.5px solid #cfd7e6; border-radius: 10px; padding: 13px 15px; font-size: 16px; line-height: 1.45; color: var(--lp-ink); background: #fff; transition: box-shadow .16s ease, border-color .16s ease; -webkit-appearance: none; appearance: none; } .f-in:focus { outline: none; border-color: var(--lp-green); box-shadow: 0 0 0 3px rgba(72,131,33,.25); } .f-in.err { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180,35,24,.22); } textarea.f-in { min-height: 132px; padding-bottom: 26px; } .lp-ta-wrap { position: relative; } .lp-count { position: absolute; right: 12px; bottom: 9px; font-size: 12.5px; color: #8a8478; pointer-events: none; } .lp-err { color: #b42318; font-size: 12.5px; font-weight: 600; line-height: 1.35; } .lp-err:not(:empty) { margin-top: 5px; } /* "Got it — Mississauga." Confirms we understood a city, since what actually gets posted is a postal code from that city (see lp2026-form.js). */ .lp-postal-note { color: #3a5744; font-size: 12px; font-weight: 600; line-height: 1.35; } .lp-postal-note:not(:empty) { margin-top: 5px; } .f-in.err ~ .lp-postal-note { display: none; } .lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .lp-row-uneven { grid-template-columns: 1.35fr 1fr; } @media (max-width:600px) { .lp-row, .lp-row-uneven { grid-template-columns: 1fr; } } /* ---- progress ---- */ .lp-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; } .lp-progress-track { flex: 1; height: 8px; border-radius: 999px; background: #e7ebf3; overflow: hidden; } .lp-progress-fill { height: 100%; border-radius: 999px; background: var(--lp-green); transform-origin: left center; animation: barGrow .5s cubic-bezier(.2,.7,.2,1); } @keyframes barGrow { from { transform: scaleX(0) } to { transform: scaleX(1) } } .lp-progress-label { font-size: 12.5px; font-weight: 600; color: #8a8478; white-space: nowrap; } .lp-step-h { margin: 0 0 16px; font-size: 19px; font-weight: 700; color: var(--lp-ink); line-height: 1.3; text-transform: none; } /* ---- buttons ---- */ .lp-actions { display: flex; gap: 11px; margin-top: 18px; } .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 10px; font-family: inherit; cursor: pointer; transition: filter .15s ease; } .lp-btn-gold { flex: 1 1 auto; min-height: 58px; padding: 16px 20px; font-size: 15.5px; font-weight: 800; letter-spacing: .6px; line-height: 1.2; text-transform: uppercase; color: var(--lp-navy); background: linear-gradient(180deg,#f0b93f 0%,#e0a026 100%); box-shadow: 0 4px 12px rgba(2,16,43,.28); } .lp-btn-gold:hover { filter: brightness(1.03); } .lp-btn-quiet { flex: 0 0 auto; min-height: 58px; padding: 15px 22px; font-size: 15px; font-weight: 700; color: var(--lp-navy); background: #eef1f7; } .lp-btn[disabled] { opacity: .65; cursor: progress; } /* The aside owns the CTA on the hero instance, exactly as drawn. */ .lp-starter-aside .lp-btn-gold { width: 100%; } .lp-aside-h { margin: 0; font-size: clamp(18px,1.5vw,21px); font-weight: 700; color: var(--lp-navy); line-height: 1.25; letter-spacing: -.3px; } .lp-aside-p { margin: 0; font-size: 14.5px; color: #4a4a42; line-height: 1.45; } .lp-aside-rule { width: 76%; height: 1px; background: rgba(72,131,33,.4); } .lp-aside-next { font-size: 13px; color: var(--lp-ink-soft); } .lp-center { text-align: center; display: block; margin: 10px 0 0; } /* ---- reassurance ---- A stacked program summary since the 2026 revision — credential on top, what it includes underneath. It used to be a centred row of icon+label pills with a divider between the first two, which is why the old rules were all :nth-child positioning; the per-line type is now set inline by lp2026_reassure() so a strip of any length reads correctly. */ .reassure { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; text-align: center; margin-top: 14px; } /* ---- consent + form-level error ---- */ .lp-consent { margin: 12px 0 0; font-size: 13px; color: #6f6b62; line-height: 1.45; text-align: center; } .lp-form-error { margin: 12px 0 0; border-radius: 10px; background: #fdeceb; color: #b42318; font-size: 14px; font-weight: 600; line-height: 1.45; padding: 12px 15px; } /* ---- success ---- */ .lp-done { text-align: center; padding: 16px 0 10px; } .lp-check-ring { width: 58px; height: 58px; border-radius: 50%; background: #e4ecdf; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; animation: popIn .3s cubic-bezier(.34,1.56,.64,1); } @keyframes popIn { from { transform: scale(.7); opacity: 0 } to { transform: scale(1); opacity: 1 } } @keyframes drawCheck { to { stroke-dashoffset: 0 } } .lp-check-path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: drawCheck .5s .18s cubic-bezier(.2,.7,.2,1) forwards; } .lp-done-h { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--lp-navy); text-transform: none; } .lp-done-p { margin: 0 0 10px; font-size: 14.5px; color: var(--lp-ink-soft); line-height: 1.5; } .lp-done-s { margin: 0; font-size: 13px; color: #8a8478; } @media (prefers-reduced-motion: reduce) { .lp-check-path { stroke-dashoffset: 0 !important; } .lp-progress-fill { animation: none !important; } } /* ========================================================================== 4c. THE ADVISOR POPUP (steps 2 & 3) -------------------------------------------------------------------------- A native