/* * bridge.css — the ONE place for WP/Elementor-specific overrides of the ported design. * Elementor wraps Theme Builder / widget output in ".elementor", and its frontend CSS * resets elements with rules like ".elementor img { height:auto; max-width:100% }" * (specificity 0,1,1). That beats Tailwind's flattened sizing utilities (0,1,0), so * image-sizing classes silently lose. Re-assert the image utilities inside .elementor * at higher specificity so the ported markup renders as it does on the demo. * (--spacing is defined in main.css; keep values in sync with Tailwind's scale.) */ .elementor img.w-auto { width: auto; } .elementor img.h-auto { height: auto; } .elementor img.h-full { height: 100%; } .elementor img.w-full { width: 100%; } .elementor img.h-8 { height: calc(var(--spacing) * 8); } .elementor img.h-9 { height: calc(var(--spacing) * 9); } .elementor img.h-10 { height: calc(var(--spacing) * 10); } .elementor img.h-11 { height: calc(var(--spacing) * 11); } .elementor img.h-12 { height: calc(var(--spacing) * 12); } .elementor img.object-cover { object-fit: cover; } .elementor img.object-contain { object-fit: contain; } @media (min-width: 1024px) { .elementor img.lg\:h-9 { height: calc(var(--spacing) * 9); } .elementor img.lg\:h-10 { height: calc(var(--spacing) * 10); } .elementor img.lg\:h-11 { height: calc(var(--spacing) * 11); } } /* * Fonts: the demo's --font-body / --font-display resolve through --font-body-loaded / * --font-display-loaded, which Next.js sets via classes on that our markup lacks. * Define them at :root so Inter (body/sans) and Playfair Display (headings) actually load, * matching the demo's font family, size, and weight exactly. Both are self-hosted in main.css. */ :root { --font-body-loaded: "Inter", "Inter Fallback"; --font-display-loaded: "Playfair Display", "Playfair Display Fallback"; } /* * Eyebrow / subheading rules, per client direction: * - KEEP the short gold rule drawn BESIDE the text (.overline::before) — the demo's * design element the client asked to keep. * - REMOVE only the line ABOVE the text, which comes from Tailwind's .overline * text-decoration utility (a name collision with the design's .overline component). */ .overline { text-decoration-line: none; } /* * Elementor's frontend.min.css resets `figure { margin: 0 }` at high specificity * (".elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure"), * which silently kills the Tailwind margin utilities our ported
s rely on — * e.g. the 56px gap (.mt-14) above the testimonials lead quote. Re-assert those * utilities above Elementor's specificity so the spacing matches the demo. */ .elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure.mt-14 { margin-top: calc(var(--spacing) * 14); } /* * The ported design hides scroll-reveal blocks with `.reveal { opacity: 0 }` until the * front-end reveal.js adds `.is-visible`. The Elementor EDITOR preview does not run that * script, so every section below the hero would look empty while editing. Force reveal * content fully visible inside the editor (body gets `.elementor-editor-active` at runtime). */ body.elementor-editor-active .reveal { opacity: 1 !important; transform: none !important; } /* * Zone ink. The demo's
component always emits * `bg-[color:var(--zone-bg)] text-[color:var(--zone-ink)]`, so everything inside a * dark section inherits cream. Our ported markup sets the background explicitly but * not the text colour, which left `currentcolor` resolving to espresso — invisible on * navy. Most visibly this hid the giant ghost words ("Hello", "Calm"), because * `.ghost-figure { color: currentcolor }` is declared AFTER the Tailwind text utility * and therefore wins. Re-assert the zone ink on every zoned section, exactly as the * demo does, so currentcolor inherits correctly everywhere. */ [data-zone] { color: var(--zone-ink); } /* * Mobile action bar (rendered by wr-footer, so it appears on every page). * A phone-only pair of thumb-reachable actions: Call, carrying the same live * OPEN / CLOSED status as the header, and Book a Visit. Styled here rather than * with utilities because these are new components, not ported demo markup, and * the compiled main.css only carries the classes the demo actually used. * The spacer keeps the fixed bar from covering the end of the footer. */ .wr-mobilebar { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.6rem 0.75rem; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: var(--color-navy-deep); border-top: 1px solid #ffffff1f; box-shadow: 0 -8px 24px rgb(0 0 0 / 0.28); } .wr-mobilebar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 3rem; padding: 0.5rem 0.75rem; border-radius: 999px; font-family: var(--font-body-loaded, inherit); font-size: 0.86rem; font-weight: 500; line-height: 1.15; text-align: center; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .wr-mobilebar__call { color: var(--color-cream); border: 1px solid #ffffff3d; } .wr-mobilebar__book { background: var(--color-gold); color: var(--color-navy-deep); } .wr-mobilebar__status { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-mist); } .wr-mobilebar__status.is-open { color: var(--color-gold-soft); } .wr-mobilebar__dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: currentcolor; } .wr-mobilebar-spacer { height: 4.75rem; } @media (min-width: 1024px) { .wr-mobilebar, .wr-mobilebar-spacer { display: none; } } /* The Elementor editor renders the footer in a canvas; a fixed bar would float over the UI. */ body.elementor-editor-active .wr-mobilebar { position: static; }