/* Themed landing pages (was partials/landing-theme). Spacing snapped to the 9-step scale in frnd-tokens.css. Text styles (size, weight, case) come from frnd.css; this file sets layout, color and spacing only. */ /* The template's .lp-form input rule targets every input, which blows the checkboxes up to text-field size. Scope them back down. */ .lp-form .lp-choice { display: block; width: 100%; } .lp-form .lp-choice legend { display: block; } .lp-form .lp-choice label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; cursor: pointer; } .lp-form .lp-choice input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; min-height: 16px; flex: 0 0 16px; margin: 0; padding: 0; border-radius: 3px; accent-color: var(--lpl-accent, var(--thm-base, #ee4f27)); background: none; box-shadow: none; } /* Theme picker variant: one row per theme, checkbox aligned to the first line of text, description beneath the label. */ .lp-form .lp-choice--themes .lp-choice__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); } .lp-form .lp-choice--themes label { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; } /* One column where two would squeeze the descriptions into slivers. */ @media (max-width: 29.99em) { .lp-form .lp-choice--themes .lp-choice__grid { grid-template-columns: minmax(0, 1fr); } } .lp-form .lp-choice--themes input[type="checkbox"] { margin-top: 3px; } .lp-form .lp-choice--themes .lp-choice__text { display: flex; flex-direction: column; gap: 1px; } .lp-form .lp-choice input[type="checkbox"]:focus { outline: 2px solid var(--lpl-accent, var(--thm-base, #ee4f27)); outline-offset: 2px; box-shadow: none; } /* ------------------------------------------------------------------ Landing page layout. Trialled on pages/themes/weekend.blade.php and rolled out to every theme page from here. ------------------------------------------------------------------ */ /* 1rem of breathing room between the fixed site header and the hero's first row. The header is absolutely positioned and overlays the hero, so the clearance lives in the hero's own padding-top rather than a margin. */ #lp-hero.lp-section { padding-top: calc(90px + var(--space-4)); } /* FIX: the hero's decorative glows are absolutely positioned with no z-index, so they stack above the signup card and intercept every click — the inputs were unreachable. They are purely ornamental, so take them out of hit testing. (Belt and braces: lift the hero content onto its own stacking context too.) */ #lp-hero .pricing-one__shape-1, #lp-hero .pricing-one__shape-2 { pointer-events: none; } #lp-hero .container { position: relative; z-index: 1; } /* Hero sits on the plain page background. Three things were painting it: the .page-title::before gradient wash and the two decorative glow divs. */ #lp-hero.page-title::before { content: none; } #lp-hero .pricing-one__shape-1, #lp-hero .pricing-one__shape-2 { display: none; } /* Give the features section the same full-bleed tint as #lp-themes, which gets it from .lp-section--alt. Same token, so the two bands stay in step. */ #lp-features { background: var(--lpl-alt); } /* Breathing room around the contact fields, separating them from the theme picker above and the submit button below. The form is a flex column with a 0.75rem gap, so these margins add to that gap rather than replacing it. */ #lp-hero .lp-form--stacked input[name="first_name"] { margin-top: var(--space-4); } #lp-hero .lp-form--stacked input[name="zip"] { margin-bottom: var(--space-4); } /* Removed: the themes grid, the FAQ accordion, the Frnd.Us app-bridge band, and the closing signup band. The hero form is now the page's only email capture, and its theme picker carries the cross-promotion the grid used to do. */ #lp-themes, #lp-faq, #lp-signup { display: none; } /* Field states, drawn from the palette tokens in partials.landing-template-light (--lpl-*) rather than one-off hex values, so the form tracks the stylesheet. color-mix derives the shades; the plain rgba line above each one is the fallback for browsers without it. */ body.body-bg-color .lp-form--stacked input[type="text"], body.body-bg-color .lp-form--stacked input[type="email"] { /* A shade lighter than the card it sits on, so the field reads as an input rather than a flat area of the card. Mixed toward white from the same surface token the card uses, so the two stay related. */ background-color: #f9f7f2; background-color: color-mix(in srgb, var(--lpl-surface) 55%, #fff); color: var(--lpl-heading); transition: border-color .15s ease, box-shadow .15s ease; } body.body-bg-color .lp-form--stacked input[type="text"]::placeholder, body.body-bg-color .lp-form--stacked input[type="email"]::placeholder { color: var(--lpl-muted); } /* Hover: a touch more definition, nothing louder than that. */ body.body-bg-color .lp-form--stacked input[type="text"]:hover, body.body-bg-color .lp-form--stacked input[type="email"]:hover { border-color: color-mix(in srgb, var(--lpl-border) 65%, var(--lpl-heading)); } /* Focus: a quiet dark-gray border and the faintest ring. The active theme (public/css/frnd-v2-theme.css) sets a site-wide `outline: 2px solid var(--v2-ink) !important` on every input. That dark ring is what made focus look heavy, so it is replaced here — scoped to these signup fields only — with a lighter one. The field still has a clearly visible focus state (gray border + ring), so the accessibility intent of that rule is preserved, just quieter. */ body.body-bg-color .lp-form--stacked input[type="text"]:focus, body.body-bg-color .lp-form--stacked input[type="email"]:focus, body.body-bg-color .lp-form--stacked input[type="text"]:focus-visible, body.body-bg-color .lp-form--stacked input[type="email"]:focus-visible { outline: none !important; border-color: var(--lpl-heading); box-shadow: 0 0 0 2px rgba(51, 51, 51, .10); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lpl-heading) 10%, transparent); } /* box-shadow is dropped in Windows high-contrast mode, so the focused field would otherwise have no indicator at all. */ @media (forced-colors: active) { body.body-bg-color .lp-form--stacked input[type="text"]:focus, body.body-bg-color .lp-form--stacked input[type="email"]:focus { outline: 2px solid Highlight; outline-offset: 1px; } } /* ------------------------------------------------------------------ Sample-issue card (features row 01) and map card (proof section). ------------------------------------------------------------------ */ .lp-issue { background: var(--lpl-surface); border: 1px solid var(--lpl-border); border-radius: 14px; padding: var(--space-6) var(--space-6); box-shadow: 0 10px 30px rgba(27, 22, 34, .05); } .lp-issue__head { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--lpl-muted); margin-bottom: var(--space-2); } .lp-issue__from { color: var(--lpl-heading); } .lp-issue__subject { color: var(--lpl-heading); margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--lpl-border); } .lp-issue__picks { list-style: none; margin: 0; padding: 0; counter-reset: pick; } .lp-issue__picks li { position: relative; padding-left: var(--space-8); margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: 2px; } .lp-issue__picks li:last-child { margin-bottom: 0; } .lp-issue__picks li::before { counter-increment: pick; content: counter(pick); position: absolute; left: 0; top: 1px; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--lpl-accent); color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .lp-issue__picks strong { color: var(--lpl-heading); } .lp-issue__picks strong a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(238, 79, 39, .35); } .lp-issue__picks strong a:hover { color: var(--lpl-accent-text); border-bottom-color: var(--lpl-accent); } .lp-issue__where { color: var(--lpl-muted); } .lp-issue__why { color: var(--lpl-text); } .lp-issue__meta { color: var(--lpl-accent-text); } /* The third pick fades out toward its bottom edge, so the list reads as cut off rather than complete — there is more, you are seeing the top of it. A mask fades the whole item (number, text and the orange meta line) as one piece; the last line is left faintly visible so the cut-off is legible. */ #lp-features .lp-issue__picks li:nth-child(3) { -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .08) 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .08) 100%); } .lp-step--stacked { margin-top: var(--space-12); } .lp-issue__foot { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--lpl-border); color: var(--lpl-muted); }