/** * Propper Smiles — static-layout.css * Loads after /css/bundle.css and /css/components.css. * * Pattern: rules gated on `.js` (added by site.js) enable animations/ * interactions. Without JS every element is visible and usable. */ /* ── Fixed nav offset ───────────────────────────────────────────────── * * site.js measures .navigation and sets --nav-height on so padding * tracks the real bar height (mobile vs desktop, font load, zoom). * Fallbacks apply when JS is off. */ .main-content { padding-top: var(--nav-height, 5rem); } @media screen and (min-width: 768px) { .main-content { padding-top: var(--nav-height, 6.25rem); } } /* In-page anchors (#section): without this, hash links align the target to the * top of the viewport and the fixed nav covers ~80–120px of the section. * scroll-padding-top shifts the scroll snap point down by the bar height + gap. * --nav-height is set on by site.js (same as .main-content offset). */ html { scroll-padding-top: calc(var(--nav-height, 5rem) + 0.75rem); } @media screen and (min-width: 768px) { html { scroll-padding-top: calc(var(--nav-height, 6.25rem) + 0.75rem); } } /* ── Skip link ──────────────────────────────────────────────────────── */ .skip-link { position: absolute; left: -9999px; z-index: 10000; padding: 0.5rem 1rem; background: #414a43; color: #fff; text-decoration: none; font-family: Raleway, sans-serif; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* ── Logo images ────────────────────────────────────────────────────── */ .navigation-mobile__logo img, .navigation-mobile__menu-logo img { display: block; height: 3.25rem; width: auto; } /* Desktop bar (min-width 1281px per bundle): logo fills inner bar height, stays centered */ @media screen and (min-width: 1281px) { .navigation-desktop__container > .navigation-desktop__logo { display: flex; align-items: center; box-sizing: border-box; min-height: 0; padding: 0.4rem 0; } .navigation-desktop__container > .navigation-desktop__logo img { display: block; max-height: 100%; height: auto; width: auto; object-fit: contain; object-position: left center; } } .footer-original__logo img { display: block; height: 6.5rem; width: auto; margin: 0 auto; } /* ── Nav: scroll shadow + hide ──────────────────────────────────────── */ .navigation { transition: box-shadow 0.3s ease, transform 0.35s ease-in; } .navigation--scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); } /* Semantic

wrappers — transparent to flex/grid */ .navigation-desktop__links > nav, .navigation-mobile__menu-container > nav { display: contents; } /* Active link styles (JS sets .nuxt-link-exact-active dynamically) */ .navigation-desktop__link.nuxt-link-exact-active, .navigation-mobile__link-text.nuxt-link-exact-active { color: #78877a; text-decoration: none; border-bottom: none; } /* ── Mobile nav: logo left; hamburger right ────────────────────────────────────── * * Markup: .logo, .bar-ctas (book + phone), .right (hamburger). * 700–1280px: bar-ctas visible. <700px: bar-ctas hidden; same CTAs in drawer under nav. */ @media screen and (max-width: 1280px) { /* Fixed bar height — logo uses max-height:100% of inner area, never intrinsic image height */ .navigation-mobile { --ps-nav-bar-h: 70px; height: var(--ps-nav-bar-h) !important; max-height: var(--ps-nav-bar-h) !important; min-height: 0; box-sizing: border-box; } .navigation-mobile__container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0.45rem; box-sizing: border-box; height: 100%; max-height: 100%; min-height: 0; padding: 0.25rem 0.65rem 0.25rem 0.25rem; } .navigation-mobile__logo { display: flex; align-items: center; height: 100%; max-height: 100%; flex: 0 1 auto; min-width: 0; margin-right: auto; padding: 0.1rem 0; box-sizing: border-box; } .navigation-mobile__bar-ctas { display: flex; flex-direction: row; align-items: center; flex: 0 1 auto; gap: 0.5rem; min-width: 0; } .navigation-mobile__bar-cta { flex: 0 1 auto; min-width: 0; } .navigation-mobile__bar-cta .block-cta__button, .navigation-mobile__bar-cta .block-cta-secondary__button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: auto; max-width: 100%; font-size: clamp(0.6875rem, 2.75vw, 1rem); font-weight: 500; letter-spacing: 0.04em; line-height: 1.2; padding: 0.45rem 0.65rem; text-align: center; text-transform: uppercase; } .navigation-mobile__bar-cta .block-cta-secondary__button { letter-spacing: 0.05em; white-space: nowrap; } .navigation-mobile__right { display: flex; align-items: center; flex: 0 0 auto; margin-left: 0.15rem; } .navigation-mobile__hamburger { margin-left: 0; flex-shrink: 0; } @media screen and (min-width: 700px) { .navigation-mobile__container { gap: 0.65rem; } .navigation-mobile__bar-ctas { gap: 0.85rem; } .navigation-mobile__bar-cta .block-cta__button, .navigation-mobile__bar-cta .block-cta-secondary__button { padding: 0.5rem 1rem; font-size: clamp(0.8125rem, 1.35vw, 1rem); } .navigation-mobile__menu-container .navigation-mobile__buttons { display: none !important; } } @media screen and (max-width: 699px) { .navigation-mobile__bar-ctas { display: none !important; } .navigation-mobile__menu-container .navigation-mobile__buttons { display: flex !important; flex-direction: column; align-items: stretch; gap: 1rem; width: 100%; margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(120, 135, 122, 0.35); } .navigation-mobile__menu-container .navigation-mobile__button { width: 100%; margin: 0; } .navigation-mobile__menu-container .navigation-mobile__button .block-cta__button, .navigation-mobile__menu-container .navigation-mobile__button .block-cta-secondary__button { display: flex; justify-content: center; width: 100%; box-sizing: border-box; text-align: center; } } /* Logo scales down to fit bar; bar height is capped above (not driven by image) */ .navigation-mobile__container > .navigation-mobile__logo img { display: block; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: left center; } } /* Blur scrim: when visible, stacks above header so pills sit “under” overlay + drawer */ .navigation-mobile__overlay { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .navigation-mobile__overlay.navigation-mobile__overlay--visible { opacity: 1; visibility: visible; pointer-events: auto; } @media screen and (max-width: 1280px) { .navigation-mobile__overlay { z-index: 1200 !important; } .navigation-mobile__menu-container { z-index: 1201 !important; } .navigation-mobile__menu-container--active .navigation-mobile__menu-close--show { z-index: 10 !important; } } /* ── Hero ───────────────────────────────────────────────────────────── */ p.hero__subheader { margin: 0; } /* Hero entrance animation — plays immediately on load */ @keyframes ps-hero-fade-up { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } } .js .ps-hero-in { animation: ps-hero-fade-up 0.75s cubic-bezier(0.4, 0, 0.2, 1) both; } .js .ps-hero-in--delayed { animation-delay: 0.25s; } /* Ensure hero content always visible without JS */ .hero__header, .hero__subheader, .hero__buttons { opacity: 1; transform: none; } /* About / Patient Info / Treatments: cap hero at 30vw on all large displays. * The home hero stays at 70vh (set in components.css .pages-home .hero). * We explicitly clear any min-height so the 30vw cap holds above 1440px. */ .pages-about .hero, .pages-patient-info .hero, .pages-treatments .hero { height: 30vw; max-height: 30vw; min-height: auto; } @media screen and (max-width: 1024px) { .pages-about .hero, .pages-patient-info .hero, .pages-treatments .hero { height: 50vh; } } @media screen and (max-width: 600px) { .pages-about .hero, .pages-patient-info .hero, .pages-treatments .hero { height: auto; min-height: 80vw; } } @media screen and (max-width: 900px) and (max-height: 480px) { .pages-about .hero, .pages-patient-info .hero, .pages-treatments .hero { height: auto; min-height: 85vh; } } @media screen and (max-width: 480px) { .pages-about .hero, .pages-patient-info .hero, .pages-treatments .hero { min-height: 30vh; } } .block-image-text__container--center .block-image-text__icon img { display: block; height: auto; width: 100%; } /* ── Home: welcome — mountains watermark behind headings ─────────────── */ .pages-home #welcome.block-text::before { content: ""; position: absolute; left: 50%; top: 60px; transform: translateX(-50%); width: min(70rem, 96vw); height: 14rem; background: url("/images/mountains.png") no-repeat center top / 100% auto; opacity: 0.75; pointer-events: none; z-index: 0; } @media screen and (min-width: 768px) { .pages-home #welcome.block-text::before { height: 18rem; width: min(76rem, 94vw); } } .pages-home #welcome.block-text > .block-text__container { position: relative; z-index: 1; } /* ── pages-home: alternate block-image-text (2nd, 4th, … → image left) ── * * Counts only .pages-home__section wrappers that directly contain section.block-image-text. * Mirrors bundle .block-image-text__container--reverse (skip if that class is already set). */ @media screen and (min-width: 769px) { .pages-home > .pages-home__section:nth-child(even of :has(> section.block-image-text)) .block-image-text__container:not(.block-image-text__container--reverse):not( .block-image-text__container--center ) { flex-direction: row-reverse; } .pages-home > .pages-home__section:nth-child(even of :has(> section.block-image-text)) .block-image-text__container:not(.block-image-text__container--reverse):not( .block-image-text__container--center ) .block-image-text__text-block { padding: 0 0 0 2rem; } } /* ── Scroll reveal ──────────────────────────────────────────────────── */ .js .ps-reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } .js .ps-reveal.ps-reveal--right { transform: translateX(2.5rem); } .js .ps-reveal.ps-visible { opacity: 1; transform: none; } /* block-text subheaders: hidden before reveal (html.js set in so no flash before site.js) */ html:not(.js) .block-text__subheader { opacity: 1; transform: none; } html.js .block-text__subheader { opacity: 0; transform: translateY(1.5rem); } html.js .block-text__subheader.ps-visible { opacity: 1; transform: none; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.22s; } /* Without JS: everything visible */ .block-cta-boxes__header, .block-cta-boxes__box, .block-columns__header, .block-columns__subheader, .block-columns__col, .custom-contact-banner__header, .custom-contact-banner__body, .custom-contact-banner__button { opacity: 1; transform: none; } /* ── Footer social icons ─────────────────────────────────────────────── */ .footer-original__social-media { gap: 0.5rem; margin-bottom: 1.25rem; } .footer-original__column-title + .footer-original__column-title { margin-top: 0.5rem; } /* ── Nav social / logo fallbacks ────────────────────────────────────── */ .navigation-mobile__social-fallback { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: #414a43; } .block-logos__fallback { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; color: #78877a; text-transform: uppercase; padding: 0.35rem; } /* ── Logo marquee ───────────────────────────────────────────────────── */ /* Without JS: centered row */ .block-logos__track { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem; } .block-logos__logo { flex-shrink: 0; } .block-logos__container { overflow: hidden; } @keyframes ps-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* With JS: marquee strips */ .js .ps-marquee { overflow: hidden; } .js .ps-marquee .block-logos__track { flex-wrap: nowrap; width: max-content; gap: 4rem; animation: ps-marquee 28s linear infinite; } .js .ps-marquee .block-logos__track:hover { animation-play-state: paused; } /* ── Testimonials carousel ──────────────────────────────────────────── */ /* Without JS: stacked */ .block-testimonials__slider { display: flex; flex-direction: column; gap: 1.5rem; opacity: 1; transform: none; } .block-testimonials__slide { opacity: 1; transform: none; position: relative; } .block-testimonials__header, .block-testimonials__body, .block-testimonials__left, .block-testimonials__right { opacity: 1; transform: none; } /* With JS: single-slide carousel */ @keyframes ps-slide-in { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } } @keyframes ps-slide-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-1.5rem); } } .js .block-testimonials__slider { display: block; position: relative; min-height: 14rem; } .js .block-testimonials__slide { display: none; position: absolute; inset: 0; width: 100%; } .js .block-testimonials__slide--current { display: block; animation: ps-slide-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) both; } .js .ps-slide-out { display: block; animation: ps-slide-out 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; pointer-events: none; } /* Carousel controls */ .ps-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #414a43; color: #fff; border: none; border-radius: 50%; width: 2.25rem; height: 2.25rem; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, opacity 0.2s ease; opacity: 0.7; z-index: 2; } .ps-carousel-btn:hover { background: #78877a; opacity: 1; } .ps-carousel-btn:nth-of-type(1) { left: -2.75rem; } .ps-carousel-btn:nth-of-type(2) { right: -2.75rem; } @media (max-width: 900px) { .ps-carousel-btn:nth-of-type(1) { left: 0; } .ps-carousel-btn:nth-of-type(2) { right: 0; } } .ps-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; position: relative; } .ps-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 2px solid #78877a; background: transparent; cursor: pointer; padding: 0; transition: background 0.2s ease; } .ps-dot.ps-dot--active { background: #78877a; } /* Right panel needs enough room for buttons */ .block-testimonials__right { position: relative; padding: 0 3rem; } @media (max-width: 900px) { .block-testimonials__right { padding: 0; } } /* ── Tabs ───────────────────────────────────────────────────────────── */ /* Without JS: stack tab panels (static-layout positions panels in normal flow) */ .block-tabs__tab-panel { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; opacity: 1 !important; } /* Shared dynamic images (About / Meet Dr. Propp): keep Nuxt stacking in .block-tabs__graphic */ html:not(.js) .block-tabs__graphic .block-tabs__image--dynamic:not(.block-tabs__image--dynamic--active) { opacity: 0 !important; visibility: hidden !important; } html:not(.js) .block-tabs__graphic .block-tabs__image--dynamic.block-tabs__image--dynamic--active { opacity: 1 !important; visibility: visible !important; } .block-tabs__tab-panels { position: static !important; display: flex !important; flex-direction: column !important; gap: 2rem !important; width: 100% !important; height: auto !important; /* no !important — site.js sets min-height to max(graphic, tallest panel) so tabs don’t jump */ min-height: 0; } .block-tabs__tab-panel-inner { display: block !important; } .block-tabs__container { display: flex; flex-direction: column; gap: 1.5rem; } @media screen and (min-width: 1024px) { .block-tabs__container { flex-flow: row nowrap; align-items: flex-start; gap: 2.5rem; } .block-tabs__tab-panels { flex: 1; min-width: 0; } } .block-tabs__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } /* With JS: show only active panel */ .js .block-tabs__tab-panel:not(.block-tabs__tab-panel--active) { display: none !important; } .js .block-tabs__tab-panel.block-tabs__tab-panel--active { display: block !important; opacity: 1 !important; transform: none !important; animation: ps-slide-in 0.35s ease both; } /* ── Accordion ──────────────────────────────────────────────────────── */ /* Without JS: all expanded */ .block-accordion__row { margin-bottom: 0; } /* With JS: JS sets max-height to the exact scrollHeight so the transition covers only the real content height — same range open and close = same speed. No arbitrary 1000px value; that caused slow-start/fast-snap jumpiness. */ .js .block-accordion__question-container { cursor: pointer; } .js .block-accordion__drawer { height: auto !important; max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Nuxt fades content with opacity:0 until active; keep in sync for static JS toggle */ .js .block-accordion__row--active .block-accordion__content { opacity: 1 !important; } /* ── Team cards ─────────────────────────────────────────────────────── */ .block-team-slider__slider { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; } .block-team-slider__item { flex: 1 1 220px; max-width: 280px; } /* Overlay: visible below the photo (not on-hover in static) */ .block-team-slider__item-overlay { position: relative !important; opacity: 1 !important; height: auto !important; left: auto !important; top: auto !important; width: 100% !important; background: transparent !important; padding: 0.75rem 0 0 !important; } .block-team-slider__item-overlay .block-team-slider__item-role { color: #414a43 !important; } /* ── Single-image slider: static grid ──────────────────────────────── */ .block-single-image-slider__slider { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .block-single-image-slider__slide { opacity: 1 !important; flex: 1 1 240px; max-width: 320px; } /* About: community block matches live two-column carousel */ .pages-about .block-single-image-slider__slider { display: block !important; position: relative !important; aspect-ratio: 4 / 3; width: 100% !important; margin: 0 !important; flex-wrap: unset !important; gap: 0 !important; justify-content: unset !important; } .pages-about .block-single-image-slider__slide { position: absolute !important; inset: 0 !important; flex: unset !important; max-width: none !important; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; } .pages-about .block-single-image-slider__slide--current { opacity: 1 !important; pointer-events: all !important; } .pages-about .block-single-image-slider__column { text-align: left; } .pages-about .block-single-image-slider__icon--prev svg { transform: scaleX(-1); } @media screen and (max-width: 880px) { .pages-about .block-single-image-slider__container { flex-direction: column !important; } } /* ── Map iframe ─────────────────────────────────────────────────────── */ .block-map__map iframe { width: 100%; height: 100%; min-height: 22rem; border: 0; } /* ── Nuxt loading overlays: hide the solid-white overlay divs ────────── * * In the original Nuxt app, both base-image__overlay and * base-background__overlay faded to opacity:0 via JS after each image * loaded. In our static site there is no JS to do that, so they stay * solid-white and cover every image/background. Simply hiding them * reveals the content underneath. */ .base-image__overlay, .base-background__overlay { display: none; } /* ── block-image-text: fix images collapsing + center vs text ─────── * * base-image__image is position:absolute so the .block-image-text__image * wrapper needs a definite height. Bundle uses align-items:center on the * row so shorter column centers beside taller (text vs image). Do not use * align-self:stretch on the image-block — that fills the row height and * pins the photo to the top of a tall text column. min-height gives the * absolute image a box to fill when the copy is short. */ .block-image-text__image-block { align-self: center; } .block-image-text__image { min-height: 22rem; } /* ── Logo marquee: CSS infinite scroll ─────────────────────────────── * * site.js clones the track and appends it as a sibling inside the * container, then adds .ps-marquee to the container. We make the * container itself a flex row (both tracks side-by-side) and animate it * from 0 to -50% so the first track slides out just as the second one * arrives — creating a seamless loop. .block-logos already has * overflow:hidden so the container can overflow it freely. */ @keyframes logos-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .block-logos__container.ps-marquee { display: flex; overflow: visible; width: max-content; animation: logos-marquee 60s linear infinite; } .block-logos__container.ps-marquee:hover { animation-play-state: paused; } .block-logos__track { display: flex !important; width: max-content !important; flex-shrink: 0; } .block-logos__logo { position: static !important; width: 12rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0.25rem 1.5rem; } .block-logos__logo-img { display: block; height: 5rem; width: auto; max-width: 100%; object-fit: contain; } /* ── Contact form: float label when input has a value ──────────────── */ /* (:focus is already handled by the bundle; this covers filled-but-blurred) */ .form-contact__input:not(:placeholder-shown) ~ .form-contact__label { top: -1.25rem; transform: translateY(0) scale(0.7); } .form-contact__input--textarea:not(:placeholder-shown) ~ .form-contact__label--textarea { top: -1.25rem; }