/* ===================================================================== landing.css — shared styles for /couples, /photographers, etc. Design DNA: - Reuses the existing GuestBook design tokens (Fraunces serif for headings, Inter for body, Facebook-blue primary, action-green CTAs). - Wider line-height, larger type, more whitespace than the rest of the site — these are marketing pages, not utilitarian app screens. - One color accent per page (the audience-specific accent), used sparingly: the highlighted phrase in the hero headline, the small caps label above it, dividers. Wedding pages (couples, photographers, planners) override the cooler default app palette with a warm, romantic wedding palette via the .lp-wedding modifier on the . The blue/green app colors are too cold for wedding-day emotion. Warmth signals welcome. No external dependencies — pure CSS-variable values. ===================================================================== */ /* ----- Wedding-themed palette override -------------------------------- */ /* When a landing page belongs to a wedding audience, it sets and these variables take over the page, replacing the app's cooler defaults. The override is scoped to body so it doesn't bleed into nested admin or signup widgets. Color philosophy: - The PAGE background is warm wheat — the dominant color. - SECTIONS sit on the wheat (some are wheat, alternates are softer). - CARDS (pricing, features, stories) are white-cream and sit elevated on either background — clear figure-ground separation. */ body.lp-wedding { --color-bg: #ECDFC9; /* warm wheat — the page color */ --color-bg-elevated: #FFFDF8; /* slightly warm white for cards */ --color-bg-muted: #E5D6BA; /* deeper wheat for muted areas */ --color-text: #2B2520; /* warm near-black, not pure black */ --color-text-muted: #7A6E64; --color-heading: #2B2520; --color-border: #D9C7A6; --color-border-strong:#C9B58E; /* The CTAs on wedding pages are warm gold, not action green. */ --color-action: #B08442; --color-action-hover: #9A7236; --color-action-text: #FFFFFF; /* Primary link/focus is warm gold for wedding pages. */ --color-primary: #B08442; --color-primary-hover:#9A7236; } /* Body itself should be the wheat color. Some app CSS may set white; we override here. */ body.lp-wedding { background: var(--color-bg); color: var(--color-text); } body.lp-wedding .lp-hero { /* Plain (no-photo) hero on wedding pages: a soft warm gradient from near-cream at the top to wheat at the bottom. Welcoming, warm, and bridal-friendly — the opposite of the dark-gradient fallback we used to have. */ background: linear-gradient(180deg, #FFFDF8 0%, var(--color-bg) 100%); } body.lp-wedding .lp-hero--photo { /* When the photo treatment IS active, override the plain background. The photo + scrim handle visuals. */ background: var(--color-bg); } body.lp-wedding .lp-section { background: var(--color-bg); /* wheat */ } body.lp-wedding .lp-section--alt { background: var(--color-bg-elevated); /* warm cream/white */ } body.lp-wedding .lp-finalcta { background: var(--color-bg-elevated); border-top: 1px solid var(--color-border); } /* Cards on wedding pages should be white-cream so they pop off the wheat. (The default .lp-feature has white bg already; we just need to make sure borders are warm.) */ body.lp-wedding .lp-feature, body.lp-wedding .lp-pricing, body.lp-wedding .lp-story { background: var(--color-bg-elevated); border-color: var(--color-border); } /* ----- Partner-program callout ----------------------------------------- */ /* The partner-program section on landing pages needs to visually stand apart from both the surrounding content sections AND the final CTA section that follows it. Otherwise the two pitches blur together — a real bug observed in v1. Solution: render it as a distinct bordered card with its own internal styling, so it reads as a "specialty callout" rather than "just another page section". Works regardless of which audience palette is active. */ .lp-partner-callout { max-width: 720px; margin: 0 auto; padding: var(--space-7) var(--space-6); background: var(--color-bg-elevated, white); border: 2px solid var(--lp-accent, var(--color-primary)); border-radius: var(--radius-xl); text-align: center; position: relative; } .lp-partner-callout::before { /* Small badge at the top so the eye reads "this is something special" */ content: "★ Partner program"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--lp-accent, var(--color-primary)); color: white; padding: 4px 16px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .lp-partner-callout__title { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; font-weight: 400; margin: 0 0 var(--space-3); } .lp-partner-callout__body { color: var(--color-text-muted); font-size: var(--fs-base); line-height: 1.6; max-width: 560px; margin: 0 auto var(--space-5); } .lp-partner-callout__wrap { /* The wrapping section gives the callout some breathing room above and below so it doesn't collide with adjacent sections. */ padding: var(--space-7) var(--space-5); } .lp-hero { padding: var(--space-9) var(--space-5) var(--space-8); text-align: center; background: linear-gradient(180deg, #FAFAFA 0%, var(--color-bg) 100%); position: relative; overflow: hidden; } /* Prevent widows (single words landing on their own line) on every heading and lead paragraph across the landing pages. text-wrap: balance gives short headings symmetrical line lengths; text-wrap: pretty handles longer prose by avoiding orphans. Falls back gracefully on older browsers (they just render normally). Browser support as of 2026: - Chrome 114+ / Edge 114+ (balance), 117+ (pretty) - Safari 17.5+ (balance), 17.4+ (pretty) - Firefox 121+ (balance), 121+ (pretty) */ .lp-hero__headline, .lp-section__title, .lp-finalcta__title, .lp-split__title { text-wrap: balance; } .lp-hero__sub, .lp-section__sub, .lp-split__body { text-wrap: pretty; } /* HERO WITH PHOTO — used only when a real hero image has been uploaded (the page sets
). Until that happens, the hero stays in its default wheat-background state and the text stays dark. This avoids the "black scrim of doom" look on a page that's supposed to feel like a wedding. The scrim here is intentionally gentle — a soft warm wash, not a funereal dark gradient. Readability is reinforced by text-shadow on the headline, not by crushing the photo. */ .lp-hero--photo { color: white; min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-5); background: var(--color-bg); /* fallback if image fails — wheat, not black */ } .lp-hero--photo .lp-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--color-bg); /* warm fallback while img loads */ z-index: 0; } .lp-hero--photo .lp-hero__bg::after { /* Scrim: warm, gentle, weighted slightly at bottom for the CTA area. Roughly half as dark as the previous version, and warm-toned (browns), not pure black. */ content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(43, 30, 20, 0.05) 0%, rgba(43, 30, 20, 0.25) 50%, rgba(43, 30, 20, 0.50) 100% ); } .lp-hero--photo .lp-hero__inner { position: relative; z-index: 1; text-align: center; width: 100%; max-width: 920px; margin: 0 auto; } .lp-hero--photo .lp-hero__headline, .lp-hero--photo .lp-hero__sub, .lp-hero--photo .lp-hero__eyebrow, .lp-hero--photo .lp-cta-foot { color: white; /* Strong text-shadow on headline so individual letters stay readable even where the soft scrim is its lightest. */ text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); } .lp-hero--photo .lp-hero__sub, .lp-hero--photo .lp-cta-foot { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .lp-hero--photo .lp-hero__headline em { color: #F5C77A; /* warm gold accent stands out against the photo */ } .lp-hero--photo .lp-cta-form input[type="email"] { background: rgba(255, 255, 255, 0.97); border-color: rgba(255, 255, 255, 0.3); } /* ----- Inline section photo --------------------------------------------- */ /* A photo that lives between two text sections — full-width band with subtle rounded corners and a small caption underneath. The aspect ratio crops to a wide cinematic shape so it functions as a "scroll reward" rather than a content section. */ .lp-photo { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); } .lp-photo__frame { width: 100%; aspect-ratio: 21 / 9; background-color: var(--color-bg-muted); background-size: cover; background-position: center; border-radius: var(--radius-xl); overflow: hidden; } .lp-photo__caption { text-align: center; margin-top: var(--space-3); font-style: italic; color: var(--color-text-muted); font-size: var(--fs-sm); font-family: var(--font-display); } /* Two-column "photo + text" section — image on one side, copy on the other. Stacks on small screens. */ .lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); } .lp-split--reverse > :first-child { order: 2; } @media (max-width: 800px) { .lp-split { grid-template-columns: 1fr; gap: var(--space-5); } .lp-split--reverse > :first-child { order: 0; } } .lp-split__photo { aspect-ratio: 4 / 5; background-color: var(--color-bg-muted); background-size: cover; background-position: center; border-radius: var(--radius-xl); } .lp-split__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.2; margin: 0 0 var(--space-4); } .lp-split__body { color: var(--color-text-muted); font-size: var(--fs-base); line-height: 1.65; } .lp-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--fs-xs); font-weight: 600; color: var(--lp-accent, var(--color-primary)); margin-bottom: var(--space-5); } .lp-hero__headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5.5vw, 64px); line-height: 1.08; letter-spacing: -0.01em; max-width: 920px; margin: 0 auto var(--space-5); color: var(--color-heading); } .lp-hero__headline em { font-style: italic; color: var(--lp-accent, var(--color-primary)); } .lp-hero__sub { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; max-width: 660px; margin: 0 auto var(--space-6); color: var(--color-text-muted); } /* ----- Inline email-first signup form ----------------------------------- */ .lp-cta-form { display: flex; gap: var(--space-2); max-width: 460px; margin: 0 auto; align-items: stretch; } .lp-cta-form input[type="email"] { flex: 1; padding: 14px 18px; border: 2px solid var(--color-border); border-radius: 999px; font-size: var(--fs-base); font-family: var(--font-body); background: white; outline: none; transition: border-color 0.15s; } .lp-cta-form input[type="email"]:focus { border-color: var(--color-primary); } .lp-cta-form button { padding: 14px 24px; border: 0; border-radius: 999px; background: var(--color-action); color: white; font-weight: 600; font-size: var(--fs-base); font-family: var(--font-body); cursor: pointer; transition: background-color 0.15s, transform 0.1s; white-space: nowrap; } .lp-cta-form button:hover { background: var(--color-action-hover); } .lp-cta-form button:active { transform: translateY(1px); } /* Single-button CTA (the email box was removed; this is now a direct link). */ .lp-cta-form--single { max-width: 460px; } .lp-cta-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 16px 28px; border-radius: 999px; background: var(--color-action); color: #fff; font-weight: 700; font-size: var(--fs-lg, 18px); font-family: var(--font-body); text-decoration: none; box-sizing: border-box; transition: background-color 0.15s, transform 0.1s; } .lp-cta-btn:hover { background: var(--color-action-hover); color:#fff; } .lp-cta-btn:active { transform: translateY(1px); } .lp-cta-foot { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; } @media (max-width: 520px) { .lp-cta-form { flex-direction: column; max-width: 320px; } .lp-cta-form input[type="email"], .lp-cta-form button { width: 100%; } } /* ----- Generic content sections ----------------------------------------- */ .lp-section { padding: var(--space-8) var(--space-5); } .lp-section--alt { background: white; } .lp-section__inner { max-width: 1100px; margin: 0 auto; } .lp-section__inner--narrow { max-width: 760px; margin: 0 auto; } .lp-section__eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--fs-xs); font-weight: 600; color: var(--lp-accent, var(--color-primary)); margin-bottom: var(--space-3); text-align: center; } .lp-section__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; text-align: center; margin: 0 auto var(--space-3); max-width: 780px; } .lp-section__sub { text-align: center; font-size: var(--fs-md); color: var(--color-text-muted); max-width: 640px; margin: 0 auto var(--space-7); line-height: 1.55; } /* ----- Numbered step list ----------------------------------------------- */ .lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); } .lp-step { text-align: left; padding: var(--space-5); } .lp-step__num { font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); color: var(--lp-accent, var(--color-primary)); margin-bottom: var(--space-2); line-height: 1; } .lp-step__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; margin: 0 0 var(--space-2); } .lp-step__body { color: var(--color-text-muted); line-height: 1.55; font-size: var(--fs-base); margin: 0; } /* ----- Two- or three-column feature grid -------------------------------- */ .lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); } .lp-feature { padding: var(--space-5); background: white; border-radius: var(--radius-lg); border: 1px solid var(--color-border); } .lp-feature__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; margin: 0 0 var(--space-2); } .lp-feature__body { color: var(--color-text-muted); line-height: 1.55; margin: 0; } /* ----- Stat row --------------------------------------------------------- */ .lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); text-align: center; } .lp-stat__num { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1; color: var(--lp-accent, var(--color-primary)); margin-bottom: var(--space-2); } .lp-stat__label { color: var(--color-text-muted); font-size: var(--fs-base); line-height: 1.45; max-width: 240px; margin: 0 auto; } /* ----- Final CTA band --------------------------------------------------- */ .lp-finalcta { padding: var(--space-9) var(--space-5); text-align: center; background: white; border-top: 1px solid var(--color-border); } .lp-finalcta__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; margin: 0 auto var(--space-5); max-width: 700px; } /* ----- Pricing card ----------------------------------------------------- */ .lp-pricing { max-width: 460px; margin: var(--space-5) auto 0; padding: var(--space-7); background: white; border: 2px solid var(--color-border); border-radius: var(--radius-xl); text-align: center; } .lp-pricing__price { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1; margin-bottom: var(--space-2); } .lp-pricing__unit { color: var(--color-text-muted); font-size: var(--fs-base); margin-bottom: var(--space-4); } .lp-pricing__list { list-style: none; padding: 0; margin: 0 0 var(--space-5); text-align: left; } .lp-pricing__list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); } .lp-pricing__list li:last-child { border-bottom: 0; } .lp-pricing__list li::before { content: "✓"; color: var(--color-action); font-weight: 700; margin-right: var(--space-2); } /* ----- "Use case" story panel (replaces fake testimonials for now) ------ */ .lp-story { background: white; padding: var(--space-7); border-radius: var(--radius-xl); border: 1px solid var(--color-border); max-width: 720px; margin: 0 auto; } .lp-story__quote { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.5; color: var(--color-heading); margin: 0 0 var(--space-4); font-style: italic; } .lp-story__byline { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; } /* ----- Comparison panel (used on photographer page) --------------------- */ .lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); } @media (max-width: 720px) { .lp-compare { grid-template-columns: 1fr; } } .lp-compare__card { padding: var(--space-6); border-radius: var(--radius-xl); background: white; border: 2px solid var(--color-border); position: relative; } .lp-compare__card--winner { border-color: var(--color-action); box-shadow: 0 4px 24px rgba(176, 132, 66, 0.18); } .lp-compare__crown { /* Banner across the top of the winning card */ position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--color-action); color: white; padding: 4px 16px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .lp-compare__label { text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-2); } .lp-compare__card--winner .lp-compare__label { color: var(--color-action); } .lp-compare__sublabel { /* The "(what competitors charge)" / "(what we charge)" clarifier */ font-size: var(--fs-xs); color: var(--color-text-muted); font-style: italic; margin-bottom: var(--space-4); text-transform: none; letter-spacing: 0; font-weight: 400; } .lp-compare__price { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; margin-bottom: var(--space-4); } .lp-compare__list { list-style: none; padding: 0; margin: 0; } .lp-compare__list li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); } .lp-compare__list li:last-child { border-bottom: 0; } .lp-compare__list span { color: var(--color-text-muted); display: block; font-size: var(--fs-xs); margin-bottom: 2px; } /* ---- Event-type chips (homepage "Built for" section) ---------------- */ .lp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 820px; margin: 0 auto; } .lp-chip { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); box-shadow: var(--shadow-sm); transition: border-color 0.15s, color 0.15s, transform 0.05s; } .lp-chip:hover { border-color: var(--lp-accent, var(--color-primary)); color: var(--lp-accent, var(--color-primary)); transform: translateY(-1px); }