/** * Glue styles for the embedded /activate app. * * The exported app's CSS (Tailwind v4) has been scoped so its reset and * html/body/:root rules only apply inside #root. These rules make the mount * point behave like the app's original and let the site's transparent * header overlay the app's hero (as on the front page). */ /* Restore the app's Tailwind heading sizes inside #root. Bootstrap (loaded for the header) sizes headings via unlayered `h1-h6` rules that override the app's layered `.text-*` utilities and inflate every heading. Re-declare the exact size utilities the app uses on headings, scoped to #root headings (higher specificity than Bootstrap's bare `h3` selector). */ #root :is(h1,h2,h3,h4,h5,h6).text-sm { font-size: 0.875rem; line-height: 1.25rem; } #root :is(h1,h2,h3,h4,h5,h6).text-xl { font-size: 1.25rem; line-height: 1.75rem; } #root :is(h1,h2,h3,h4,h5,h6).text-3xl { font-size: 1.875rem; line-height: 2.25rem; } #root :is(h1,h2,h3,h4,h5,h6).text-4xl { font-size: 2.25rem; line-height: 2.5rem; } @media (min-width: 768px) { #root :is(h1,h2,h3,h4,h5,h6).md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } #root :is(h1,h2,h3,h4,h5,h6).md\:text-5xl { font-size: 3rem; line-height: 1; } #root :is(h1,h2,h3,h4,h5,h6).md\:text-6xl { font-size: 3.75rem; line-height: 1; } } /* All app headings use font-weight 700. Overrides the export's font-black / font-bold utilities, so !important is needed to win. */ #root :is(h1, h2, h3, h4, h5, h6) { font-weight: 700 !important; } /* The app mount fills the content width and owns its own vertical rhythm. */ #root { width: 100%; display: block; } /* "What Your Business Gains" cards: halve the space below each card title. The cards are a flex column with a ~24px gap between icon, title and description, plus the title carries an 8px bottom margin. Pull the description up so the title/desc pair sits about half as far apart, without changing the icon-to-title spacing. */ #root .flex.flex-col.items-center.text-center.gap-4 > h3 { margin-bottom: 0 !important; } #root .flex.flex-col.items-center.text-center.gap-4 > h3 + p { margin-top: -12px; } /* The app's hero is a full-bleed dark image at the very top. Pull the app up under the transparent site header so the header overlays the hero, matching the home page. The header is position-absolute/fixed via .header--transparent. */ .page--activate .content { margin: 0; padding: 0; } /* Belt-and-suspenders: keep the app from forcing horizontal scroll. */ .page--activate #root { overflow-x: hidden; } /* Restore the app's Tailwind spacing inside #root where it collides with Bootstrap's identically-named !important utilities (Bootstrap is loaded for the site header's dropdown menu). Each rule re-applies Tailwind's value: calc(var(--spacing) * N). Bootstrap stays intact outside #root. */ #root .p-0 { padding: 0 !important; } #root .p-1 { padding: calc(var(--spacing) * 1) !important; } #root .p-2 { padding: calc(var(--spacing) * 2) !important; } #root .p-3 { padding: calc(var(--spacing) * 3) !important; } #root .p-4 { padding: calc(var(--spacing) * 4) !important; } #root .p-5 { padding: calc(var(--spacing) * 5) !important; } #root .pt-0 { padding-top: 0 !important; } #root .pt-1 { padding-top: calc(var(--spacing) * 1) !important; } #root .pt-2 { padding-top: calc(var(--spacing) * 2) !important; } #root .pt-3 { padding-top: calc(var(--spacing) * 3) !important; } #root .pt-4 { padding-top: calc(var(--spacing) * 4) !important; } #root .pt-5 { padding-top: calc(var(--spacing) * 5) !important; } #root .pb-0 { padding-bottom: 0 !important; } #root .pb-1 { padding-bottom: calc(var(--spacing) * 1) !important; } #root .pb-2 { padding-bottom: calc(var(--spacing) * 2) !important; } #root .pb-3 { padding-bottom: calc(var(--spacing) * 3) !important; } #root .pb-4 { padding-bottom: calc(var(--spacing) * 4) !important; } #root .pb-5 { padding-bottom: calc(var(--spacing) * 5) !important; } #root .ps-0 { padding-inline-start: 0 !important; } #root .ps-1 { padding-inline-start: calc(var(--spacing) * 1) !important; } #root .ps-2 { padding-inline-start: calc(var(--spacing) * 2) !important; } #root .ps-3 { padding-inline-start: calc(var(--spacing) * 3) !important; } #root .ps-4 { padding-inline-start: calc(var(--spacing) * 4) !important; } #root .ps-5 { padding-inline-start: calc(var(--spacing) * 5) !important; } #root .pe-0 { padding-inline-end: 0 !important; } #root .pe-1 { padding-inline-end: calc(var(--spacing) * 1) !important; } #root .pe-2 { padding-inline-end: calc(var(--spacing) * 2) !important; } #root .pe-3 { padding-inline-end: calc(var(--spacing) * 3) !important; } #root .pe-4 { padding-inline-end: calc(var(--spacing) * 4) !important; } #root .pe-5 { padding-inline-end: calc(var(--spacing) * 5) !important; } #root .px-0 { padding-inline: 0 !important; } #root .px-1 { padding-inline: calc(var(--spacing) * 1) !important; } #root .px-2 { padding-inline: calc(var(--spacing) * 2) !important; } #root .px-3 { padding-inline: calc(var(--spacing) * 3) !important; } #root .px-4 { padding-inline: calc(var(--spacing) * 4) !important; } #root .px-5 { padding-inline: calc(var(--spacing) * 5) !important; } #root .py-0 { padding-block: 0 !important; } #root .py-1 { padding-block: calc(var(--spacing) * 1) !important; } #root .py-2 { padding-block: calc(var(--spacing) * 2) !important; } #root .py-3 { padding-block: calc(var(--spacing) * 3) !important; } #root .py-4 { padding-block: calc(var(--spacing) * 4) !important; } #root .py-5 { padding-block: calc(var(--spacing) * 5) !important; } #root .m-0 { margin: 0 !important; } #root .m-1 { margin: calc(var(--spacing) * 1) !important; } #root .m-2 { margin: calc(var(--spacing) * 2) !important; } #root .m-3 { margin: calc(var(--spacing) * 3) !important; } #root .m-4 { margin: calc(var(--spacing) * 4) !important; } #root .m-5 { margin: calc(var(--spacing) * 5) !important; } #root .mt-0 { margin-top: 0 !important; } #root .mt-1 { margin-top: calc(var(--spacing) * 1) !important; } #root .mt-2 { margin-top: calc(var(--spacing) * 2) !important; } #root .mt-3 { margin-top: calc(var(--spacing) * 3) !important; } #root .mt-4 { margin-top: calc(var(--spacing) * 4) !important; } #root .mt-5 { margin-top: calc(var(--spacing) * 5) !important; } #root .mb-0 { margin-bottom: 0 !important; } #root .mb-1 { margin-bottom: calc(var(--spacing) * 1) !important; } #root .mb-2 { margin-bottom: calc(var(--spacing) * 2) !important; } #root .mb-3 { margin-bottom: calc(var(--spacing) * 3) !important; } #root .mb-4 { margin-bottom: calc(var(--spacing) * 4) !important; } #root .mb-5 { margin-bottom: calc(var(--spacing) * 5) !important; } #root .ms-0 { margin-inline-start: 0 !important; } #root .ms-1 { margin-inline-start: calc(var(--spacing) * 1) !important; } #root .ms-2 { margin-inline-start: calc(var(--spacing) * 2) !important; } #root .ms-3 { margin-inline-start: calc(var(--spacing) * 3) !important; } #root .ms-4 { margin-inline-start: calc(var(--spacing) * 4) !important; } #root .ms-5 { margin-inline-start: calc(var(--spacing) * 5) !important; } #root .me-0 { margin-inline-end: 0 !important; } #root .me-1 { margin-inline-end: calc(var(--spacing) * 1) !important; } #root .me-2 { margin-inline-end: calc(var(--spacing) * 2) !important; } #root .me-3 { margin-inline-end: calc(var(--spacing) * 3) !important; } #root .me-4 { margin-inline-end: calc(var(--spacing) * 4) !important; } #root .me-5 { margin-inline-end: calc(var(--spacing) * 5) !important; } #root .mx-0 { margin-inline: 0 !important; } #root .mx-1 { margin-inline: calc(var(--spacing) * 1) !important; } #root .mx-2 { margin-inline: calc(var(--spacing) * 2) !important; } #root .mx-3 { margin-inline: calc(var(--spacing) * 3) !important; } #root .mx-4 { margin-inline: calc(var(--spacing) * 4) !important; } #root .mx-5 { margin-inline: calc(var(--spacing) * 5) !important; } #root .my-0 { margin-block: 0 !important; } #root .my-1 { margin-block: calc(var(--spacing) * 1) !important; } #root .my-2 { margin-block: calc(var(--spacing) * 2) !important; } #root .my-3 { margin-block: calc(var(--spacing) * 3) !important; } #root .my-4 { margin-block: calc(var(--spacing) * 4) !important; } #root .my-5 { margin-block: calc(var(--spacing) * 5) !important; } #root .m-auto { margin: auto !important; } #root .mt-auto { margin-top: auto !important; } #root .mb-auto { margin-bottom: auto !important; } #root .ms-auto { margin-inline-start: auto !important; } #root .me-auto { margin-inline-end: auto !important; } #root .mx-auto { margin-inline: auto !important; } #root .my-auto { margin-block: auto !important; } /* "Ready to Welcome" CTA button is oversized. The theme ships a `.py-5` spacing utility with `padding: 3rem !important` that collides with the app's Tailwind `.py-5` and inflates the button, so the override needs !important to win. Bring its height in line with the other CTAs. */ #root button.px-12.py-5 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; font-size: 1.125rem; } /* Hero alignment. The exported hero uses a flat `px-16` inset, so its text sits at a fixed 64px from the edge instead of lining up with the rest of the page. The other sections use a centered `max-w-6xl` (72rem) container. Match that: pad the hero so its content column starts at the same left edge as those sections, with a 1rem minimum gutter on narrow screens. Text stays left-aligned. NB: `.lp-body` is a shared class on many elements (paragraphs, buttons), so this must target the hero

specifically, not every `.lp-body`. */ #root section.lp-body { padding-inline: max(1rem, calc((100% - 72rem) / 2)); } /* Hero background image should fill the whole section, even when the text stacks tall (e.g. on mobile). The app marks it `w-full h-full object-cover`, but an `img { height: auto }` reset (Bootstrap Reboot, loaded for the header) wins over Tailwind's `.h-full` and leaves the image at its intrinsic height, exposing dark space below. Force it to fill. */ #root section.lp-body > .absolute.inset-0 > img { height: 100% !important; width: 100% !important; object-fit: cover; } /* Hero "For Route 66 Business Owners" pill: swap the translucent-red background for translucent black so the white text pops, and bump the size up slightly. Targeted via the pill's distinctive translucent-red background class. */ #root .lp-body.bg-red-600\/15 { background-color: rgba(0, 0, 0, 0.4) !important; color: #fff !important; font-size: 0.8125rem !important; } /* "Keep Your Place Page Up to Date" section: tighten spacing to about half. The section is a grid (text / image / features areas). Halve: 1) the row gap between the description and the icon list (grid row-gap), 2) the gap under each icon title (h4 bottom margin), 3) the gap under each icon description (features list row gap). */ #root .grid[class*="grid-template-areas"]:has(.\[grid-area\:features\]) { row-gap: 2rem !important; /* was gap-16 = 4rem */ } #root .\[grid-area\:features\] { gap: 0.75rem !important; /* was gap-4 = 1.5rem (Bootstrap-inflated to 24px) */ } #root .\[grid-area\:features\] .flex.items-start h4 { margin-bottom: 0.25rem; /* was mb-0.5 -> 8px */ }