/* ============================================================ Dental Illusions — design CSS (child theme) Ported from the approved v4 prototype: v3/site.css + v3/shared-v2.css + v3b/static-hero.css + v4/palette.css + v4/inside.css, followed by a WordPress block-adapter layer. Bump DI_THEME_VERSION in functions.php on every change. ============================================================ */ /* ========================================================================== Dental Illusions — prototype v3 A different direction from v2: white header, deep teal feature bands, a four-step DSD process, and a before/after reveal. Built on the practice's own colors. ========================================================================== */ :root { --ink: #13323A; --ink-soft: #46606A; --ink-faint: #6B838C; --teal-1: #91BEC6; /* his teal — header, footer, bands */ --teal-2: #7CB0B9; /* one step down */ --teal-3: #46818D; /* dropdown panels, mobile menu */ --teal-4: #376C78; /* deep band. white text 5.9:1 */ --teal-5: #2B5A66; /* deepest */ --accent: #E0652A; /* the practice's orange */ --accent-dk: #B44C18; /* where orange carries small text */ --accent-tint:#FDF2EB; --grey-50: #F1F3F4; --grey-100: #E8EDEE; --border: #DFE8EA; --white: #FFFFFF; --font-head: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif; --step--1: clamp(.85rem, .83rem + .1vw, .92rem); --step-0: clamp(1rem, .97rem + .15vw, 1.06rem); --step-1: clamp(1.12rem, 1.06rem + .3vw, 1.3rem); --step-2: clamp(1.35rem, 1.22rem + .6vw, 1.75rem); --step-3: clamp(1.6rem, 1.35rem + 1.2vw, 2.3rem); --step-4: clamp(2rem, 1.5rem + 2.3vw, 3.3rem); --gutter: clamp(1.25rem, 4vw, 3rem); --section-y: clamp(3rem, 6.5vw, 5.75rem); --maxw: 1280px; --maxw-wide: 1560px; --radius: 12px; --radius-lg: 18px; --shadow: 0 10px 34px rgba(19,50,58,.12); --shadow-sm: 0 2px 10px rgba(19,50,58,.07); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.18; margin: 0 0 .5em; color: var(--ink); font-weight: 600; } h1 { font-size: var(--step-4); letter-spacing: -.01em; } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--teal-4); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; } .wrap--wide { width: min(100% - (var(--gutter) * 2), var(--maxw-wide)); margin-inline: auto; } .section { padding-block: var(--section-y); } .eyebrow { font-family: var(--font-head); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dk); margin: 0 0 .85rem; } .lede { font-size: var(--step-1); color: var(--ink-soft); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: .5rem; top: .5rem; background: var(--teal-5); color: #fff; padding: .7rem 1.1rem; z-index: 999; } /* Buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-head); font-weight: 600; font-size: var(--step-0); padding: .9rem 1.7rem; border-radius: 100px; border: 2px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; } .btn.btn--accent { background: var(--accent); color: #fff; } .btn.btn--accent:hover { background: var(--accent-dk); color: #fff; } .btn.btn--teal { background: var(--teal-4); color: #fff; } .btn.btn--teal:hover { background: var(--teal-5); color: #fff; } .btn.btn--outline { background: transparent; color: var(--teal-4); border-color: var(--teal-4); } .btn.btn--outline:hover { background: var(--teal-4); color: #fff; } .btn.btn--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); } .btn.btn--onDark:hover { background: #fff; color: var(--teal-5); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } /* Header ---------------------------------------------------------------- */ .utility { background: #FFFFFF; color: var(--ink); border-bottom: 1px solid var(--border); font-size: var(--step--1); } .utility__inner { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; justify-content: center; padding: .55rem 0; } @media (min-width: 900px) { .utility__inner { justify-content: flex-end; } } .utility a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; } .utility a:hover { text-decoration: underline; } .utility svg { width: 1rem; height: 1rem; color: var(--teal-3); } .utility .is-urgent { border: 1px solid var(--accent); color: var(--accent-dk); border-radius: 100px; padding: .15rem .7rem; font-weight: 600; } /* The logo is used exactly as supplied — white, unfiltered, aspect locked. */ /* Hero ------------------------------------------------------------------ */ .hero { position: relative; isolation: isolate; color: #fff; } .hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--teal-5); } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,60,68,.92) 0%, rgba(20,60,68,.72) 38%, rgba(20,60,68,.25) 68%, rgba(20,60,68,.05) 100%); } .hero__inner { display: flex; align-items: center; gap: 2rem; padding-block: clamp(3rem, 7vw, 5rem); min-height: clamp(460px, 74vh, 740px); } .hero__copy { max-width: 36rem; } .hero h1 { color: #fff; margin-bottom: .45em; } .hero p { color: #E6F2F4; font-size: var(--step-1); } .hero .eyebrow { color: #A9D6DC; } .hero .btn-row { margin-top: 1.6rem; } .hero__rating { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.4rem; color: #fff; } .hero__rating .stars { color: #FFC24D; letter-spacing: .08em; } .dsd-card { max-width: 250px; display: none; margin-left: auto; text-align: center; background: rgba(15,48,55,.82); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; backdrop-filter: blur(6px); max-width: 230px; } @media (min-width: 1040px) { .dsd-card { display: block; } } .dsd-card img { width: 86px; margin: 0 auto .8rem; } .dsd-card strong { display: block; font-family: var(--font-head); color: #fff; font-size: .98rem; } .dsd-card span { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #A9D6DC; margin-top: .3rem; } .dsd-card a { display: inline-block; margin-top: .9rem; font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: #fff; } /* Affiliations ----------------------------------------------------------- */ .affil { background: #FFFFFF; border-bottom: 1px solid var(--border); padding-block: 1.75rem; } .affil__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3.5rem); } .affil img { max-height: 62px; width: auto; filter: grayscale(1) brightness(.45); opacity: .8; } .affil img.is-reversed { filter: invert(1) grayscale(1) brightness(.45); opacity: .8; } .affil img.is-badge { max-height: 76px; filter: grayscale(1); opacity: .9; } /* Standard section ------------------------------------------------------- */ .standard-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (min-width: 960px) { .standard-grid { grid-template-columns: .85fr 1.15fr; } } .pillars { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .pillar { text-align: center; padding-inline: .5rem; } .pillar__icon { width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--grey-100); color: var(--teal-3); } .pillar__icon svg { width: 1.6rem; height: 1.6rem; } .pillar h3 { font-size: 1.02rem; margin-bottom: .35rem; } .pillar p { font-size: var(--step--1); color: var(--ink-soft); } @media (min-width: 700px) { .pillar + .pillar { border-left: 1px solid var(--border); } } /* DSD band --------------------------------------------------------------- */ .dsd { background: linear-gradient(135deg, var(--teal-4) 0%, var(--teal-5) 100%); color: #fff; } .dsd h2, .dsd h3 { color: #fff; } .dsd .eyebrow { color: #A9D6DC; } .dsd p { color: #DDEFF2; } .dsd__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } @media (min-width: 960px) { .dsd__grid { grid-template-columns: 1fr 1.1fr; } } .steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 2.5rem; } .step { text-align: center; } .step__icon { width: 3rem; height: 3rem; margin: 0 auto .75rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); color: #fff; font-family: var(--font-head); font-weight: 700; } .step strong { display: block; font-family: var(--font-head); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; } .step span { font-size: var(--step--1); color: #BFDDE2; } /* Before / after reveal --------------------------------------------------- */ .reveal { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: #000; } .reveal img { width: 100%; height: auto; display: block; } .reveal__after { position: absolute; inset: 0; width: 50%; overflow: hidden; } .reveal__after img { width: auto; height: 100%; max-width: none; } .reveal__label { position: absolute; top: 1rem; font-family: var(--font-head); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(19,50,58,.75); padding: .3rem .7rem; border-radius: 100px; } .reveal__label--before { left: 1rem; } .reveal__label--after { right: 1rem; } .reveal__handle { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; left: 50%; transform: translateX(-1px); pointer-events: none; } .reveal__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 2.6rem; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: var(--shadow); } .reveal input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; background: transparent; cursor: ew-resize; } .reveal input[type="range"]::-webkit-slider-thumb { appearance: none; width: 3rem; height: 100%; } .reveal input[type="range"]::-moz-range-thumb { width: 3rem; height: 100%; border: 0; background: transparent; } /* Services --------------------------------------------------------------- */ .services { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .service { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; } .service:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .service img { aspect-ratio: 4/3; object-fit: cover; width: 100%; } .service__body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; } .service h3 { font-size: 1.05rem; margin-bottom: .3rem; } .service p { font-size: var(--step--1); color: var(--ink-soft); } .service a { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); color: var(--teal-4); text-decoration: none; } .service a:hover { color: var(--accent-dk); } /* Doctor ----------------------------------------------------------------- */ .doctor { background: var(--grey-50); } .doctor__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; } @media (min-width: 980px) { .doctor__grid { grid-template-columns: .8fr 1.3fr .9fr; } } .doctor__photo img { border-radius: var(--radius-lg); width: 100%; box-shadow: var(--shadow); } .doctor__quote { border-left: 3px solid var(--accent); padding-left: 1.25rem; font-style: italic; color: var(--ink-soft); } .doctor__quote cite { display: block; margin-top: .75rem; font-style: normal; font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); color: var(--ink); } /* Testimonials ----------------------------------------------------------- */ .reviews { position: relative; isolation: isolate; color: #fff; background: var(--teal-4); } .reviews__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .reviews__bg img { width: 100%; height: 100%; object-fit: cover; } .reviews::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28,79,90,.94), rgba(28,79,90,.82)); } .reviews h2 { color: #fff; } .reviews .eyebrow { color: #A9D6DC; } .reviews__head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; margin-bottom: 2rem; } .quotes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } .quote { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 1.4rem 1.5rem; } .quote .stars { color: #E0A21C; letter-spacing: .1em; margin-bottom: .5rem; } .quote p { font-size: var(--step--1); } .quote cite { font-style: normal; font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); } /* Emergency strip --------------------------------------------------------- */ .cta-strip { background: var(--accent-tint); border-top: 3px solid var(--accent); } .cta-strip__inner { display: grid; gap: 1.25rem; align-items: center; padding-block: clamp(1.75rem, 3vw, 2.5rem); } @media (min-width: 860px) { .cta-strip__inner { grid-template-columns: 1fr auto; } } .cta-strip h2 { font-size: var(--step-2); margin-bottom: .2rem; } .cta-strip p { color: var(--ink-soft); margin: 0; } /* Footer ------------------------------------------------------------------ */ .site-footer { background: var(--teal-1); color: #FFFFFF; padding-block: clamp(2.75rem, 5vw, 4rem) 0; } .site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; } .site-footer a { color: #fff; text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { padding: .18rem 0; } .site-footer .brand img { filter: none; opacity: 1; width: 230px; } .hours { width: 100%; border-collapse: collapse; font-size: var(--step--1); } .hours th, .hours td { text-align: left; padding: .3rem 0; font-weight: 400; } .hours th { font-family: var(--font-head); font-weight: 600; color: #fff; } .footer-bottom { margin-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.2); padding: 1.1rem 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: var(--step--1); } .footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; margin: 0; padding: 0; } /* Mobile menu ------------------------------------------------------------- */ /* Sticky mobile CTA ------------------------------------------------------- */ .mobile-cta { display: none; } @media (max-width: 1239px) { .mobile-cta { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 18px rgba(19,50,58,.12); padding-bottom: env(safe-area-inset-bottom, 0px); } .mobile-cta a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.4rem; font-family: var(--font-head); font-weight: 600; text-decoration: none; } .mobile-cta a:first-child { color: var(--teal-4); border-right: 1px solid var(--border); } .mobile-cta a:last-child { background: var(--accent); color: #fff; } body { padding-bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px)); } } /* Nothing stretches: fixed ratios where images fill a frame -------------- */ .hero__media img, .hero__media video, .reviews__bg img { width: 100%; height: 100%; object-fit: cover; } .doctor__photo img { aspect-ratio: 4 / 3.3; object-fit: cover; } .dsd-card img { width: 86px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; } .affil img { height: auto; width: auto; object-fit: contain; } .reveal img { aspect-ratio: 1 / 1; object-fit: cover; } .service img { height: auto; } /* Footer logo keeps its shape too */ .site-footer .brand img { height: auto; aspect-ratio: 2364 / 357; } .site-footer a, .site-footer h4 { color: #FFFFFF; } .site-footer { color: #FFFFFF; } .footer-bottom { border-top-color: rgba(255,255,255,.35); } .hours th, .hours td { color: #FFFFFF; } /* ====================================================================== Fixes: neutral hero overlay, white hero type, dropdowns, reveal, pillars ====================================================================== */ /* Hero overlay is neutral dark — no green cast on the footage */ .hero::after { background: linear-gradient(90deg, rgba(8,14,16,.82) 0%, rgba(8,14,16,.62) 38%, rgba(8,14,16,.22) 70%, rgba(8,14,16,.05) 100%), linear-gradient(180deg, rgba(8,14,16,.28) 0%, rgba(8,14,16,0) 30%); } .hero .eyebrow { color: #FFFFFF; opacity: .92; } .hero h1, .hero p, .hero__rating { color: #FFFFFF; } /* Dropdowns ------------------------------------------------------------- */ /* Before / after --------------------------------------------------------- */ .reveal { position: relative; overflow: hidden; border-radius: var(--radius-lg); } .reveal__base { width: 100%; height: auto; display: block; } .reveal__clip { position: absolute; inset: 0; width: 50%; overflow: hidden; } .reveal__clip img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; } .reveal__handle { background: #fff; width: 3px; } .reveal__handle::after { width: 2.4rem; height: 2.4rem; } /* Pillars: an even 2×2 rather than 3 and a stray -------------------------- */ @media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; } .pillar + .pillar { border-left: 0; } .pillar:nth-child(even) { border-left: 1px solid var(--border); padding-left: 2rem; } } /* Panel lists stack — never inherit the top-level nav's flex row --------- */ /* Portrait crop for the new headshot ------------------------------------ */ .doctor__photo img { aspect-ratio: 4 / 4.4; object-fit: cover; object-position: center 22%; } /* Sticky mobile bar matches the header --------------------------------- */ @media (max-width: 1239px) { .mobile-cta a:last-child { background: var(--teal-1); color: #FFFFFF; } .mobile-cta a:first-child { color: var(--teal-4); } } /* ====================================================================== v35 — services as a carousel One row at every width. Cards that don't fit scroll sideways with arrows and dots instead of wrapping to a second row. ====================================================================== */ .services { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem .25rem 1rem; margin: -.25rem -.25rem 0; scrollbar-width: none; -ms-overflow-style: none; } .services::-webkit-scrollbar { display: none; } .service { flex: 0 0 calc((100% - 4.5rem) / 4); scroll-snap-align: start; } @media (max-width: 1099px) { .service { flex-basis: calc((100% - 3rem) / 3); } } @media (max-width: 859px) { .service { flex-basis: calc((100% - 1.5rem) / 2); } } @media (max-width: 599px) { .services { gap: 1rem; } .service { flex-basis: 82%; scroll-snap-align: center; } } /* Arrows + dots — shown whenever the row overflows, at any width */ .slider-nav.slider-nav--always { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.25rem; } .slider-nav.slider-nav--always[hidden] { display: none; } .slider-nav--always .slider-btn { width: 2.9rem; height: 2.9rem; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: #fff; color: var(--teal-4); border: 1px solid var(--blue-200); box-shadow: var(--shadow-sm); transition: background-color .2s, color .2s; } .slider-nav--always .slider-btn:hover:not(:disabled) { background: var(--teal-4); color: #fff; } .slider-nav--always .slider-btn svg { width: 1.2rem; height: 1.2rem; } .slider-nav--always .slider-btn:disabled { opacity: .35; cursor: default; } .slider-nav--always .slider-dots { display: flex; gap: .45rem; } .slider-nav--always .slider-dots span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--blue-200); transition: background-color .2s, transform .2s; } .slider-nav--always .slider-dots span[data-active="true"] { background: var(--teal-4); transform: scale(1.25); } /* ====================================================================== v35 — DSD band: small certified badge, before/after, and the five steps as white cards inside the band. When the cards don't all fit, the row scrolls sideways with arrows and dots, like the services. ====================================================================== */ .dsd__brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; } .dsd__brand img { width: 56px; height: 56px; flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); } .dsd__brand .eyebrow { margin: 0; line-height: 1.35; } .dsd__brand .eyebrow span { display: block; margin-top: .2rem; font-weight: 500; letter-spacing: .08em; text-transform: none; font-size: .82rem; color: #DDEFF2; } /* Before / after — both photos share one frame and one crop, so the halves line up */ .dsd .reveal { width: 100%; max-width: 540px; justify-self: end; aspect-ratio: 5 / 6; } .dsd .reveal img, .dsd .reveal .reveal__base { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 42%; } .dsd .reveal__clip { height: 100%; } @media (max-width: 959px) { .dsd .reveal { justify-self: center; } } /* Steps: white cards on the dark band */ .dsd-steps__carousel { margin-top: clamp(2.5rem, 5vw, 3.75rem); } .dsd .standards { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 1.25rem; list-style: none; margin: -1rem -1rem 0; padding: 1rem 1rem 2rem; scroll-padding-inline: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .dsd .slider-nav--always { margin-top: 0; } .dsd .standards::-webkit-scrollbar { display: none; } .dsd .standard { flex: 0 0 calc((100% - 5rem) / 5); max-width: none; scroll-snap-align: start; text-align: center; background: #FFFFFF; color: var(--ink); border: 0; border-radius: var(--radius-lg); box-shadow: 0 8px 22px rgba(10, 30, 36, .22); padding: 1.75rem 1.25rem 1.9rem; } .dsd .standard strong { color: var(--ink); } .dsd .standard span:not(.standard__num) { color: var(--ink-soft); } .dsd .standard__num { margin: 0 auto 1rem; } @media (max-width: 1099px) { .dsd .standard { flex-basis: calc((100% - 2.5rem) / 3); } } @media (max-width: 859px) { .dsd .standard { flex-basis: calc((100% - 1.25rem) / 2); } } @media (max-width: 599px) { .dsd .standards { gap: 1rem; } .dsd .standard { flex-basis: 78%; scroll-snap-align: center; text-align: left; } .dsd .standard__num { margin: 0 0 1rem; } } /* arrows and dots read on the dark band */ .dsd .slider-nav--always .slider-btn { background: rgba(255,255,255,.1); color: #FFFFFF; border-color: rgba(255,255,255,.55); box-shadow: none; } .dsd .slider-nav--always .slider-btn:hover:not(:disabled) { background: #FFFFFF; color: var(--teal-5); } .dsd .slider-nav--always .slider-dots span { background: rgba(255,255,255,.35); } .dsd .slider-nav--always .slider-dots span[data-active="true"] { background: #FFFFFF; } /* ====================================================================== v35 — DSD card in the hero: white, no green Frosted white panel with dark text, orange for the small label. ====================================================================== */ .dsd-card { max-width: 250px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 14px 34px rgba(8, 14, 16, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .dsd-card strong { color: var(--ink); } .dsd-card span { color: var(--accent-dk); font-weight: 600; } .dsd-card a { white-space: nowrap; color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; } .dsd-card a:hover { color: var(--accent-dk); } .dsd-card img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18)); } /* ====================================================================== v35 — hero eyebrow matches v1's: small, one line where there is room ====================================================================== */ .hero .hero__copy .eyebrow { font-family: var(--font-head); font-size: .92rem; font-weight: 600; line-height: 1.3; letter-spacing: .13em; text-transform: uppercase; color: #FFFFFF; opacity: 1; margin: 0 0 .8rem; text-shadow: 0 1px 10px rgba(8, 18, 24, .45); } @media (min-width: 900px) { .hero .hero__copy .eyebrow { white-space: nowrap; } } @media (max-width: 420px) { .hero .hero__copy .eyebrow { font-size: .8rem; letter-spacing: .1em; } } /* ========================================================================== v3 — shared with v2 Header, dropdown menus, mobile drawer and the DSD section are taken from v2's blocks.css unchanged (filtered by selector, original order kept), so the navigation is identical across both versions. ========================================================================== */ :root { /* v2 tokens the ported header, menus and DSD section rely on */ --blue-900:#91BEC6; --blue-800:#7FB2BB; --blue-700:#33717A; --blue-600:#2F7079; --blue-400:#6FC0C6; --brand:#91BEC6; --brand-light:#B9DCE0; --blue-200:#C9E3E7; --blue-100:#E3F1F3; --blue-50:#F2F9FA; --copper:#9E4A17; --copper-tint:#FDF3EC; --sand:#F1F3F4; --bg:#FFFFFF; --bg-alt:var(--blue-50); --text:var(--ink); --text-muted:var(--ink-soft); --focus:#9E4A17; --maxw-text:66ch; --shadow-md:0 10px 34px rgba(22,38,44,.10); } .btn.btn--primary { background: var(--blue-700); color: #fff; } .btn.btn--primary:hover { background: var(--blue-800); color: #fff; } .btn.btn--ghost { background: transparent; color: var(--blue-700); border-color: var(--blue-700); } .btn.btn--ghost:hover { background: var(--blue-700); color: #fff; } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); padding: 1rem 0; } .brand { display: inline-flex; flex: 0 0 auto; } .brand img { width: clamp(180px, 17vw, 250px); filter: invert(1); opacity: .78; } .nav { margin-left: auto; display: none; } @media (min-width: 1240px) { .nav { display: block; } } .nav > .nav__list { display: flex; gap: clamp(1rem, 2vw, 2.1rem); list-style: none; margin: 0; padding: 0; align-items: center; } .nav > .nav__list > li > a { font-family: var(--font-head); font-weight: 400; font-size: 1.03rem; letter-spacing: .005em; color: var(--ink); text-decoration: none; padding: .4rem 0; white-space: nowrap; border-bottom: 2px solid transparent; } .nav > .nav__list > li > a:hover, .nav > .nav__list > li > a:focus-visible { color: var(--blue-700); border-bottom-color: var(--blue-400); } .header-cta { display: none; } @media (min-width: 1240px) { .header-cta { display: inline-flex; } } .menu-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 600; background: var(--blue-700); color: #fff; border: 0; border-radius: 100px; padding: .7rem 1.1rem; cursor: pointer; } @media (min-width: 1240px) { .menu-toggle { display: none; } } .btn.btn--emergency { background: var(--copper); color: #fff; } .btn.btn--emergency:hover { background: #7F3915; color: #fff; } .standards { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem clamp(1.25rem, 2.5vw, 2.25rem); counter-reset: none; } .standard { flex: 1 1 190px; max-width: 260px; text-align: center; } .standard__num { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0 auto .85rem; border-radius: 50%; background: var(--blue-700); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .95rem; } .standard strong { display: block; font-family: var(--font-head); font-size: 1.02rem; margin-bottom: .3rem; } .standard span:not(.standard__num) { color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; } .slider-nav { display: none; } @media (max-width: 760px) { .standards { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin-inline: calc(var(--gutter) * -0.5); padding: .25rem calc(var(--gutter) * 0.5) .5rem; scrollbar-width: none; -ms-overflow-style: none; } .standards::-webkit-scrollbar { display: none; } .standard { flex: 0 0 76%; max-width: none; scroll-snap-align: center; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.4rem 1.6rem; } .standard__num { margin: 0 0 .85rem; } .slider-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.5rem; } .slider-btn { width: 2.9rem; height: 2.9rem; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: #fff; color: var(--blue-700); border: 1px solid var(--blue-200); box-shadow: var(--shadow-sm); } .slider-btn svg { width: 1.2rem; height: 1.2rem; } .slider-btn:disabled { opacity: .35; cursor: default; } .slider-dots { display: flex; gap: .45rem; } .slider-dots span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--blue-200); transition: background-color .2s, transform .2s; } .slider-dots span[data-active="true"] { background: var(--blue-700); transform: scale(1.25); } } .nav__list { display: flex; gap: clamp(1rem, 2vw, 2.1rem); list-style: none; margin: 0; padding: 0; align-items: center; } .nav__item { position: static; } .nav__trigger { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-head); font-weight: 400; font-size: 1.03rem; color: var(--ink); background: none; border: 0; cursor: pointer; padding: .4rem 0; white-space: nowrap; border-bottom: 2px solid transparent; } .nav__chev { width: .85rem; height: .85rem; transition: transform .2s; opacity: .7; } .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: var(--blue-600); border-bottom-color: var(--blue-400); } .nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); } .mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 18px 40px rgba(27, 42, 51, .12); z-index: 40; } .mega[hidden] { display: none; } .mega__inner { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1.1fr 1fr 1fr 1fr 1.15fr; padding: clamp(2rem, 3vw, 2.75rem) 0 clamp(2.25rem, 3.5vw, 3rem); align-items: start; } .mega__intro h3 { font-size: var(--step-1); margin-bottom: .5rem; } .mega__intro p { color: var(--text-muted); font-size: var(--step--1); } .mega__all { display: inline-block; margin-top: .5rem; font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); color: var(--blue-700); text-decoration: none; } .mega__all:hover { color: var(--copper); } .mega__label { font-family: var(--font-head); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .65rem; display: flex; align-items: center; gap: .4rem; } .mega__col ul { display: block; list-style: none; margin: 0; padding: 0; } .mega__col li + li { margin-top: .4rem; } .mega__col a { display: block; width: 100%; padding: .6rem .85rem; font-size: var(--step--1); color: var(--ink); text-decoration: none; border: 1px solid var(--border); border-radius: 8px; background: #fff; transition: border-color .18s, background-color .18s, color .18s; } .mega__col a:hover, .mega__col a:focus-visible { border-color: var(--blue-400); background: var(--blue-50); color: var(--blue-700); } .mega__promo { background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--radius-lg); padding: 1.35rem 1.4rem; } .mega__promo p:not(.mega__label) { font-size: var(--step--1); color: var(--text-muted); margin-bottom: 1rem; } .mega__promo .btn { padding: .6rem 1.1rem; font-size: var(--step--1); } .mega__promo--urgent { background: var(--copper-tint); border-color: #EBD3C4; } @media (max-width: 1239px) { .mega { display: none !important; } } .menu-toggle__bars { display: inline-grid; gap: 3px; } .menu-toggle__bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .drawer-scrim { display: none; } .drawer { position: fixed; inset: 0; z-index: 80; width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .26s ease, transform .26s ease, visibility 0s linear .26s; } .drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity .26s ease, transform .26s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { .drawer { transform: none; } } .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); border-bottom: 1px solid var(--border); padding-top: calc(1.1rem + env(safe-area-inset-top, 0px)); } .drawer__title { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; } .drawer__close { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; cursor: pointer; background: #fff; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); } .drawer__close svg { width: 1.1rem; height: 1.1rem; } .drawer__location { background: var(--blue-50); padding: 1.15rem var(--gutter); border-top: 1px solid var(--border); } .drawer__loc-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; } .drawer__loc-row strong { display: block; font-family: var(--font-head); } .drawer__loc-row span { font-size: var(--step--1); color: var(--text-muted); } .drawer__loc-links { display: grid; gap: .3rem; text-align: right; font-size: var(--step--1); } .drawer__loc-links a { color: var(--blue-600); } .drawer__nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .drawer__nav > ul { list-style: none; margin: 0; padding: 0; } .drawer__nav ul { list-style: none; margin: 0; padding: 0; } .drawer__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.05rem var(--gutter); font-family: var(--font-head); font-weight: 500; font-size: 1.1rem; color: var(--ink); text-decoration: none; background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; } .drawer__link svg { width: 1.1rem; height: 1.1rem; color: var(--ink-faint); transition: transform .2s; } .drawer__link[aria-expanded="true"] { color: var(--blue-600); } .drawer__link[aria-expanded="true"] svg { transform: rotate(90deg); color: var(--blue-600); } .drawer__sub { background: var(--blue-50); border-bottom: 1px solid var(--border); } .drawer__sub[hidden] { display: none; } .drawer__sub a { display: block; padding: .8rem var(--gutter) .8rem calc(var(--gutter) + .75rem); font-size: var(--step--1); color: var(--ink-soft); text-decoration: none; } .drawer__sub a:hover { color: var(--blue-600); } .drawer__sub li + li a { border-top: 1px solid rgba(27,42,51,.06); } .drawer__foot { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); } .drawer__foot .btn { padding: .9rem .5rem; font-size: 1rem; white-space: nowrap; min-height: 3.25rem; } @media (min-width: 700px) { .drawer__head, .drawer__location, .drawer__foot { padding-inline: max(var(--gutter), calc((100% - 640px) / 2)); } .drawer__link { padding-inline: max(var(--gutter), calc((100% - 640px) / 2)); } .drawer__sub a { padding-left: calc(max(var(--gutter), calc((100% - 640px) / 2)) + .75rem); padding-right: max(var(--gutter), calc((100% - 640px) / 2)); } } body[data-drawer-open="true"] { overflow: hidden; } .drawer__foot { grid-template-columns: 1fr 1fr; gap: .65rem; } .drawer__foot .btn { padding: .9rem .5rem; font-size: 1rem; white-space: nowrap; min-height: 3.25rem; } .header-cta { white-space: nowrap; flex: 0 0 auto; padding: .8rem 1.6rem; } .drawer__location { border-bottom: 0; border-top: 1px solid var(--border); } @media (max-width: 767px) { .brand img { width: clamp(215px, 60vw, 280px); } .site-header__inner { padding: 1.15rem 0; gap: .75rem; } .menu-toggle { font-size: 1.05rem; padding: .85rem 1.25rem; } .menu-toggle__bars span { width: 22px; height: 2.5px; } } .site-header { background: var(--brand); border-bottom: 0; } .site-header__inner { padding: 1.1rem 0; } .brand img { filter: none; opacity: 1; width: clamp(230px, 22vw, 320px); } .nav > .nav__list > li > a, .nav__trigger { color: #FFFFFF; font-weight: 400; } .nav > .nav__list > li > a:hover, .nav > .nav__list > li > a:focus-visible, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: #FFFFFF; border-bottom-color: #FFFFFF; } .header-cta, .btn.btn--primary, .menu-toggle { background: var(--accent); color: #FFFFFF; border-color: transparent; } .header-cta:hover, .btn.btn--primary:hover, .menu-toggle:hover { background: #C9551E; color: #FFFFFF; } .btn.btn--ghost { color: var(--accent); border-color: var(--accent); } .btn.btn--ghost:hover { background: var(--accent); color: #FFFFFF; } .mega { background: var(--teal-3); border-top: 3px solid var(--accent); box-shadow: 0 20px 40px rgba(20,54,60,.25); } .mega__intro { border-left: 3px solid rgba(255,255,255,.55); padding-left: 1.1rem; } .mega__intro h3 { color: #FFFFFF; } .mega__intro p { color: #E4F1F3; } .mega__all { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; } .mega__all:hover { color: var(--accent); } .mega__label { color: #D8ECEF; } .mega__col a { color: #FFFFFF; background: transparent; border: 1px solid rgba(255,255,255,.45); } .mega__col a:hover, .mega__col a:focus-visible { background: rgba(255,255,255,.16); border-color: #FFFFFF; color: #FFFFFF; } .mega__promo { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); } .mega__promo p:not(.mega__label) { color: #E4F1F3; } .mega__promo .btn--primary { background: var(--accent); color: #FFFFFF; } .mega__promo--urgent { background: rgba(224,101,42,.18); border-color: rgba(255,255,255,.45); } .btn.btn--emergency { background: var(--accent); color: #FFFFFF; } .btn.btn--emergency:hover { background: #C9551E; color: #FFFFFF; } .standard__num { background: var(--accent); color: #FFFFFF; } .drawer__head { background: var(--brand); border-bottom: 0; } .drawer__title { color: #FFFFFF; } .drawer__close { background: transparent; border-color: rgba(255,255,255,.55); color: #FFFFFF; } @media (max-width: 767px) { .brand img { width: clamp(215px, 60vw, 280px); } } .drawer { background: var(--teal-2); } .drawer__head { background: var(--teal-3); } .drawer__title { color: #FFFFFF; } .drawer__close { border-color: rgba(255,255,255,.5); color: #FFFFFF; } .drawer__link { color: #FFFFFF; border-bottom-color: rgba(255,255,255,.4); } .drawer__link svg { color: rgba(255,255,255,.8); } .drawer__link[aria-expanded="true"] { color: #FFFFFF; background: rgba(255,255,255,.12); } .drawer__sub { background: rgba(255,255,255,.18); border-bottom-color: rgba(255,255,255,.4); } .drawer__sub a { color: #EAF6F7; } .drawer__sub li + li a { border-top-color: rgba(255,255,255,.2); } .drawer__location { background: rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.4); } .drawer__location .mega__label { color: #D8ECEF; } .drawer__loc-row strong { color: #FFFFFF; } .drawer__loc-row span { color: #E4F1F3; } .drawer__loc-links a { color: #FFFFFF; } .drawer__foot { background: var(--teal-3); border-top-color: rgba(255,255,255,.4); } .drawer__foot .btn--ghost { color: #FFFFFF; border-color: #FFFFFF; } .drawer__foot .btn--ghost:hover { background: #FFFFFF; color: var(--teal-4); } .site-header__inner { flex-wrap: nowrap; min-width: 0; } .brand { flex: 0 1 auto; min-width: 0; } .brand img { width: clamp(180px, 16vw, 300px); } .nav { min-width: 0; } .nav > .nav__list { flex-wrap: nowrap; } .header-cta { flex: 0 0 auto; } @media (min-width: 1240px) and (max-width: 1500px) { .brand img { width: clamp(170px, 14vw, 215px); } .nav > .nav__list { gap: 1.05rem; } .nav > .nav__list > li > a, .nav__trigger { font-size: .95rem; } .header-cta { padding: .7rem 1.15rem; font-size: .95rem; } .site-header__inner { gap: 1rem; } } .brand img { width: clamp(210px, 19vw, 340px); } @media (min-width: 1240px) and (max-width: 1500px) { .brand img { width: clamp(200px, 16vw, 250px); } } @media (max-width: 767px) { .brand img { width: clamp(225px, 62vw, 300px); } } .nav > .nav__list { align-items: stretch; } .nav > .nav__list > li { display: flex; align-items: center; } .nav > .nav__list > li > a, .nav__trigger { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem 0; line-height: 1.2; font-size: 1rem; border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; } .nav__item.has-mega { position: static; } .nav__item.has-mega:hover > .mega, .nav__item.has-mega:focus-within > .mega { display: block; } .mega[hidden] { display: none; } .nav__item.has-mega:hover > .mega[hidden], .nav__item.has-mega:focus-within > .mega[hidden] { display: block; } .brand img { height: auto; aspect-ratio: 2364 / 357; } .nav__item.has-mega > .nav__trigger { position: relative; } .nav__item.has-mega > .nav__trigger::after { content: ""; position: absolute; left: -.5rem; right: -.5rem; top: 100%; height: 1.6rem; } .mega { transition: opacity .15s; } /* Icon used inside the drawer location block (v2 class) */ .utility__icon { width: 1rem; height: 1rem; opacity: 1; flex: 0 0 auto; color: #FFFFFF; } /* ====================================================================== v35 — dropdown panel balance (shared by v2 and v3) The promo button stays on one line, and the promo column can no longer grow to fit it and squeeze the link columns (which wrapped the labels). ====================================================================== */ .mega__inner { grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); } .mega__promo .btn { white-space: nowrap; padding: .6rem 1.05rem; font-size: .88rem; gap: .5rem; } .mega__label { text-wrap: balance; } @media (max-width: 1320px) { .mega__promo { padding-inline: 1.1rem; } .mega__promo .btn { padding-inline: .85rem; font-size: .84rem; } } /* v3 runs a slightly smaller type scale than v2. Inside the header, dropdowns and drawer, v2's scale is restored so the menus render identically in both versions. */ .site-header, .drawer { --step--1: clamp(0.88rem, 0.86rem + 0.1vw, 0.94rem); --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem); --step-1: clamp(1.15rem, 1.09rem + 0.3vw, 1.35rem); --step-2: clamp(1.4rem, 1.28rem + 0.6vw, 1.8rem); font-size: var(--step-0); line-height: 1.7; } .site-header .btn, .drawer .btn { gap: .5rem; } /* ====================================================================== v35 — larger practice logo (Dr. Basil's note: "more distinctive and larger") Roughly a fifth bigger than v1 at every width. v1 is left as commented. ====================================================================== */ .site-header .brand img { width: clamp(260px, 20vw, 380px); } @media (min-width: 1240px) and (max-width: 1500px) { .site-header .brand img { width: clamp(255px, 20vw, 290px); } } @media (min-width: 768px) and (max-width: 1239px) { .site-header .brand img { width: clamp(260px, 26vw, 300px); } } @media (max-width: 767px) { .site-header .brand img { width: clamp(220px, 64vw, 280px); } } /* ========================================================================== Dental Illusions — prototype v3b v3 with a still banner photo in place of the video. Everything else loads from ../v3/, so the two stay identical below the banner. ========================================================================== */ /* Keep her face in frame at every width: the photo anchors right, where she sits */ .hero--static .hero__media img { object-position: 78% 30%; } /* The DSD card drops to the bottom right — over her shoulder, clear of her face */ .hero--static .hero__inner { align-items: stretch; } .hero--static .hero__copy { align-self: center; } .hero--static .dsd-card { align-self: flex-end; margin-bottom: calc(-1 * clamp(1.75rem, 4.5vw, 3.25rem)); } /* Phones and tablets: photo first, then the copy on a solid band in his header teal with white text — no text over her face. Desktop keeps the overlay, where the copy sits on the blurred left side of the photo. */ @media (max-width: 1039px) { .hero--static { background: var(--teal-1); } .hero--static::after { display: none; } .hero--static .hero__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 9; background: var(--teal-1); } .hero--static .hero__media img { object-position: 74% 28%; } .hero--static .hero__inner { min-height: 0; height: auto; padding-block: clamp(1.75rem, 5vw, 2.75rem) clamp(2rem, 6vw, 3rem); } .hero--static .hero__copy { max-width: 40rem; } .hero--static .hero__copy .eyebrow, .hero--static h1, .hero--static p, .hero--static .hero__rating { color: #FFFFFF; text-shadow: none; } } @media (max-width: 599px) { .hero--static .hero__media { aspect-ratio: 4 / 3; } } /* ========================================================================== Dental Illusions — prototype v4 v3b's layout in the blush & indigo palette Dr. Basil sent (24 Sep): #91A2AC muted blue primary — header, footer, where his teal was #28374A indigo the deepest step: DSD band, reviews #8B4B65 mauve buttons and accents (replaces the orange) — deepened from his #946879 on 30 Sep so it is richer, not dull #E3C5CD blush warm sections, labels on dark #A5A277 sage in his palette — held back, it reads green White on the #768998 slate header is 3.6:1 — passes for the large logo and nav text (3:1), short of 4.5:1 for small text; deepen slightly before launch Everything else clears AA: white on indigo 12.1:1 · white on mauve 6.4:1 · indigo on blush 7.6:1 Loaded last, so it only recolors — layout comes from v3 / v3b. ========================================================================== */ :root { --indigo: #28374A; --indigo-dk: #1E2A39; --indigo-2: #34475E; /* dropdown panels, one step lighter than the header */ --mauve: #8B4B65; --mauve-dk: #723A51; /* hovers, small text on white (8.3:1) */ --blush: #E3C5CD; --blush-lt: #F6ECEF; --blush-tint: #FBF6F8; --dusty: #91A2AC; /* ink leans indigo instead of teal */ --ink: #1F2A37; --ink-soft: #4E5866; --ink-faint: #6E7783; /* v3's teal ladder → his palette's muted blue, deepening to indigo. The muted blue is the primary, used exactly where his teal was. */ --muted-1: #768998; /* header, footer, mobile banner — slate chosen 30 Sep (was #91A2AC) */ --muted-2: #6A7D8C; /* mobile menu, one step deeper than the header */ --muted-3: #5B6E7C; /* dropdown panels. white text 5.1:1 */ --muted-4: #3F5263; /* deep bands, links */ --brand: var(--muted-1); --teal-1: var(--muted-1); --teal-2: var(--muted-2); --teal-3: var(--muted-3); --teal-4: var(--muted-4); --teal-5: var(--indigo); /* the orange → mauve */ --accent: var(--mauve); --accent-dk: var(--mauve-dk); --accent-tint: var(--blush-lt); --copper: var(--mauve-dk); --copper-tint: var(--blush-lt); --focus: var(--mauve); /* light fills and lines → blush */ --grey-50: var(--blush-lt); --grey-100: var(--blush-lt); --blue-900: var(--indigo); --blue-800: var(--indigo-dk); --blue-700: var(--indigo); --blue-600: var(--mauve-dk); --blue-400: var(--blush); --blue-200: var(--blush); --blue-100: var(--blush-lt); --blue-50: var(--blush-tint); --border: #ECE1E5; } /* Buttons ---------------------------------------------------------------- */ .header-cta:hover, .btn.btn--primary:hover, .menu-toggle:hover, .btn.btn--accent:hover, .btn.btn--emergency:hover { background: var(--mauve-dk); color: #FFFFFF; } .btn.btn--onDark:hover { color: var(--indigo); } /* Header + dropdowns ----------------------------------------------------- */ .nav > .nav__list > li > a:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { border-bottom-color: var(--blush); } .mega { border-top-color: var(--blush); box-shadow: 0 20px 40px rgba(20, 28, 40, .28); } .mega__intro p, .mega__promo p:not(.mega__label) { color: #EEE7EB; } .mega__label { color: var(--blush); } .mega__promo--urgent { background: rgba(227, 197, 205, .14); } .drawer__sub a { color: #F1EAEE; } .drawer__location .mega__label { color: var(--blush); } .drawer__loc-row span { color: #EEE7EB; } .utility svg { color: var(--mauve); } /* Hero ------------------------------------------------------------------- */ .hero::after { background: linear-gradient(90deg, rgba(22, 30, 42, .84) 0%, rgba(22, 30, 42, .62) 38%, rgba(22, 30, 42, .2) 70%, rgba(22, 30, 42, .04) 100%), linear-gradient(180deg, rgba(22, 30, 42, .26) 0%, rgba(22, 30, 42, 0) 30%); } .hero p { color: #F3EEF1; } .hero .eyebrow { color: var(--blush); } /* Approach pillars ------------------------------------------------------- */ .pillar__icon { background: var(--blush-lt); color: var(--mauve-dk); } /* DSD band --------------------------------------------------------------- */ .dsd .eyebrow { color: var(--blush); } .dsd p { color: #E6E1E8; } .dsd__brand .eyebrow span { color: #E6E1E8; } .dsd .standard__num { background: var(--mauve); color: #FFFFFF; } /* Services carousel controls on white ------------------------------------ */ .slider-nav--always .slider-btn { color: var(--indigo); border-color: var(--blush); } .slider-nav--always .slider-btn:hover:not(:disabled) { background: var(--indigo); color: #FFFFFF; } .slider-nav--always .slider-dots span { background: var(--blush); } .slider-nav--always .slider-dots span[data-active="true"] { background: var(--indigo); } .service a:hover { color: var(--mauve-dk); } /* Reviews ---------------------------------------------------------------- */ .reviews::after { background: linear-gradient(90deg, rgba(30, 42, 57, .94), rgba(30, 42, 57, .82)); } .reviews .eyebrow { color: var(--blush); } /* Emergency strip: full blush, the warmest band on the page -------------- */ .cta-strip { background: var(--blush); border-top-color: var(--mauve); } .cta-strip p { color: #3F4552; } /* Sticky mobile bar ------------------------------------------------------ */ @media (max-width: 1239px) { .mobile-cta a:first-child { color: var(--indigo); } .mobile-cta a:last-child { background: var(--mauve); color: #FFFFFF; } } /* ========================================================================== Dental Illusions — v4 inside pages Loads after site.css / shared-v2.css / palette.css and only adds the layouts the homepage doesn't have: page banner, breadcrumb, content + sidebar, checklist, FAQ, and the category grid. Colors come from the approved v4 palette tokens — nothing new is invented here. ========================================================================== */ /* Page banner ------------------------------------------------------------ */ .page-hero { position: relative; isolation: isolate; color: #fff; background: linear-gradient(120deg, var(--muted-4) 0%, var(--indigo) 78%); } .page-hero__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-block: clamp(2.5rem, 5.5vw, 4.25rem); } @media (min-width: 960px) { .page-hero--withPhoto .page-hero__inner { grid-template-columns: 1.15fr .85fr; } } .page-hero h1 { color: #fff; margin-bottom: .35em; } .page-hero .lede { color: #E9E4E9; } .page-hero .eyebrow { color: var(--blush); } .page-hero .btn-row { margin-top: 1.5rem; } .page-hero__photo img { border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } .page-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.35rem; font-size: var(--step--1); color: #E9E4E9; } .page-hero__meta span { display: inline-flex; align-items: center; gap: .45rem; } .page-hero__meta svg { width: 1rem; height: 1rem; color: var(--blush); } /* Breadcrumb ------------------------------------------------------------- */ .crumbs { font-size: var(--step--1); margin: 0 0 1.1rem; color: #C9CFD8; } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; } .crumbs li + li::before { content: "›"; margin-right: .35rem; opacity: .7; } .crumbs a { color: #E9E4E9; text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .crumbs [aria-current] { color: #fff; font-weight: 600; } /* Content + sidebar ------------------------------------------------------ */ .inside-grid { display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: start; } @media (min-width: 1000px) { .inside-grid { grid-template-columns: minmax(0, 1fr) 21.5rem; } } .inside-copy h2 { margin-top: 1.6em; } .inside-copy h2:first-child { margin-top: 0; } .inside-copy p { max-width: 66ch; } /* Sidebar card */ .side-card { position: sticky; top: 7.5rem; background: var(--blush-tint); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem 1.6rem 1.75rem; box-shadow: var(--shadow-sm); } .side-card h3 { font-size: 1.12rem; margin-bottom: .4rem; } .side-card p { font-size: var(--step--1); color: var(--ink-soft); } .side-card .btn { width: 100%; margin-top: .9rem; } .side-card .side-card__call { display: block; text-align: center; margin-top: .8rem; font-family: var(--font-head); font-weight: 600; color: var(--indigo); text-decoration: none; } .side-card .side-card__call:hover { color: var(--mauve-dk); } .side-card hr { border: 0; border-top: 1px solid var(--border); margin: 1.2rem 0 1rem; } .side-card .hours { font-size: var(--step--1); } .side-card .hours th, .side-card .hours td { color: var(--ink); } /* Checklist ("is this right for you") ------------------------------------ */ .checks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .7rem; } @media (min-width: 720px) { .checks { grid-template-columns: 1fr 1fr; gap: .8rem 2rem; } } .checks li { display: flex; gap: .7rem; align-items: flex-start; } .checks svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-top: .22rem; color: var(--mauve); } /* Facts strip ------------------------------------------------------------ */ .facts { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 2rem 0 0; } .fact { background: var(--blush-lt); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .fact strong { display: block; font-family: var(--font-head); font-size: 1.35rem; color: var(--indigo); } .fact span { font-size: var(--step--1); color: var(--ink-soft); } /* FAQ -------------------------------------------------------------------- */ .faq { margin-top: 1.25rem; } .faq details { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-bottom: .7rem; } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.2rem; font-family: var(--font-head); font-weight: 600; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: 0 0 auto; width: 1.65rem; height: 1.65rem; border-radius: 50%; background-color: var(--blush-lt); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B4B65' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: .95rem; transition: transform .25s ease, background-color .2s; } .faq summary:hover::after { background-color: var(--blush); } .faq details[open] summary::after { transform: rotate(180deg); background-color: var(--mauve); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); } .faq details > div { padding: 0 1.2rem 1.15rem; color: var(--ink-soft); } .faq details > div p { max-width: 70ch; } /* Related treatments: reuse .service cards in a static grid -------------- */ .related-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .related-grid .service { flex: none; } /* Category hub grid ------------------------------------------------------ */ .hub-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin-top: 2.5rem; } .hub-grid .service { flex: none; } .hub-grid .service p { margin-bottom: .9rem; } /* Alternating band for inside sections ----------------------------------- */ .section--tint { background: var(--blush-tint); } /* Process band reuses the DSD card styling on a deep band ---------------- */ .process { background: linear-gradient(135deg, var(--muted-4) 0%, var(--indigo) 100%); color: #fff; } .process h2 { color: #fff; } .process .eyebrow { color: var(--blush); } .process > .wrap > p { color: #E6E1E8; } /* ========================================================================== WordPress block adapter The page content is core blocks; this maps block markup onto the prototype's classes so the two render identically. ========================================================================== */ /* Groups used as sections/wrappers add no extra margins */ .wp-block-group.section, .wp-block-group.wrap, .wp-block-group.wrap--wide { margin-block: 0; } #pi-main > * { margin-block: 0; } /* Buttons — core button blocks carry .btn variant classes on the wrapper */ .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; } .wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-head); font-weight: 600; font-size: var(--step-0); padding: .9rem 1.7rem; border-radius: 100px; border: 2px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; } .wp-block-button.btn--accent .wp-block-button__link { background: var(--accent); color: #fff; } .wp-block-button.btn--accent .wp-block-button__link:hover { background: var(--accent-dk); color: #fff; } .wp-block-button.btn--primary .wp-block-button__link { background: var(--accent); color: #fff; } .wp-block-button.btn--primary .wp-block-button__link:hover { background: var(--accent-dk); color: #fff; } .wp-block-button.btn--outline .wp-block-button__link { background: transparent; color: var(--teal-4); border-color: var(--teal-4); } .wp-block-button.btn--outline .wp-block-button__link:hover { background: var(--teal-4); color: #fff; } .wp-block-button.btn--onDark .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); } .wp-block-button.btn--onDark .wp-block-button__link:hover { background: #fff; color: var(--indigo); } .wp-block-button.btn--emergency .wp-block-button__link { background: var(--accent); color: #fff; } .wp-block-button.btn--emergency .wp-block-button__link:hover { background: var(--accent-dk); color: #fff; } /* Checklist — a core list block with className "checks" */ ul.checks { list-style: none; margin: 1.25rem 0 0; padding: 0; } ul.checks li { padding-left: 2rem; position: relative; display: block; } ul.checks li::before { content: "✓"; position: absolute; left: .2rem; top: 0; font-family: var(--font-head); font-weight: 700; color: var(--mauve); } /* Facts strip — group.facts of group.fact with two paragraphs */ .fact p { margin: 0; } .fact .fact__num { font-family: var(--font-head); font-weight: 600; font-size: 1.35rem; color: var(--indigo); } .fact .fact__label { font-size: var(--step--1); color: var(--ink-soft); } /* FAQ — core details blocks inside group.faq */ .faq .wp-block-details { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-bottom: .7rem; padding: 0; } .faq .wp-block-details summary { padding: 1rem 1.2rem; } .faq .wp-block-details > :not(summary) { padding: 0 1.2rem 0; margin-bottom: 1.15rem; color: var(--ink-soft); max-width: 70ch; } /* Cards — .service built from image + heading + paragraphs */ .service .wp-block-image { margin: 0; } .service .wp-block-image img { aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; } .service h3 { margin-top: 0; } /* Hours table inside the footer/side card keeps its look as a core table */ .side-card .wp-block-table table { border-collapse: collapse; width: 100%; font-size: var(--step--1); } .side-card .wp-block-table td, .side-card .wp-block-table th { border: 0; padding: .3rem 0; text-align: left; } /* Placeholder images (pre-launch) get a quiet frame so pages review cleanly */ img[data-di-awaiting] { background: var(--blush-lt); } .affil img[data-di-awaiting] { filter: none !important; opacity: .45; max-height: 48px; } /* Layout guards: this design manages its own widths and gutters (.wrap), so nothing from a constrained template or root padding may squeeze it */ .wp-block-post-content > * { max-width: none; } .wp-block-post-content { padding-left: 0; padding-right: 0; } #pi-main { padding: 0; } /* Kill WordPress's automatic block-gap margins at the shell level: the gap between header part / main / footer part, and between top-level sections. Sections carry their own spacing (.section padding). */ .wp-site-blocks > * + * { margin-block-start: 0 !important; } .wp-site-blocks > * { margin-block: 0 !important; } header.wp-block-template-part, footer.wp-block-template-part, main#pi-main, .wp-block-post-content { margin-block: 0 !important; } #pi-main > * + *, .wp-block-post-content > * + * { margin-block-start: 0; } /* The page hero photo block */ .page-hero__photo .wp-block-image { margin: 0; } .page-hero__photo .wp-block-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 3/2; object-fit: cover; width: 100%; } /* Chassis structural bits that would fight the design */ .wp-block-post-content p:not([class*="has-"]) { max-width: none; } .pi-header { border-block-end: 0; } /* Inside-page helpers used by page markup */ .wrap--faq { max-width: 52rem; } .related-intro { max-width: 44rem; margin: 0 auto 2.5rem; text-align: center; } .hub-intro { max-width: 46rem; } .service__body .wp-block-buttons { margin-top: .75rem; } /* ========================================================================== Utility & structure classes (no inline styles anywhere in content) ========================================================================== */ .btn-row--spaced { margin-top: 1.5rem; } .btn-row--tight { margin-top: 1.25rem; } .section-head { max-width: 44rem; margin: 0 auto 2.5rem; text-align: center; } .brand-blurb { margin-top: 1rem; } .map-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .map-frame iframe { border: 0; display: block; width: 100%; } .service--promo .service__body { justify-content: center; text-align: center; padding: 2rem 1.5rem; } /* ========================================================================== Rank Math FAQ block — the site's FAQ sections use rank-math/faq-block so the FAQPage schema comes straight from Rank Math. Styled as cards to match the design; works (without schema) even before Rank Math is active. ========================================================================== */ /* Rank Math renders the block server-side as .rank-math-list-item; older markup (and the editor canvas) may carry .rank-math-faq-item — style both. */ .faq .rank-math-list-item, .faq .rank-math-faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin: 0 0 .8rem; padding: 1.05rem 1.2rem; } .faq .rank-math-question { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; margin: 0 0 .45rem; color: var(--ink); } .faq .rank-math-answer { color: var(--ink-soft); max-width: 70ch; } .faq .rank-math-answer p:last-child { margin-bottom: 0; } /* All-services index */ .services-index { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1.5rem; } .svc-col h3 { font-size: 1.05rem; margin-bottom: .6rem; } .svc-col ul { list-style: none; margin: 0; padding: 0; } .svc-col li { padding: .22rem 0; } .svc-col a { text-decoration: none; } .svc-col a:hover { color: var(--mauve-dk); text-decoration: underline; } /* Office tour gallery */ .tour-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2rem; } .tour-grid .wp-block-image { margin: 0; } .tour-grid img { border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; width: 100%; } /* Reviews page */ .review-wall { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); margin-top: 2rem; } /* ── Inside-banner refinements (1.3.3) ────────────────────────── Banner content aligns with the homepage hero (wide container), and on mobile the photo leads, copy follows — like the homepage. */ .page-hero__inner { width: min(100% - (var(--gutter) * 2), var(--maxw-wide)); } @media (max-width: 959px) { .page-hero--withPhoto .page-hero__photo { order: -1; } } /* ── Native-block homepage adapters (1.4.0) ──────────────────── The homepage and step carousels are ordinary editable blocks now; these rules map block wrappers onto the design. */ /* Hero media as an image block */ .hero__media .wp-block-image { margin: 0; height: 100%; } /* Affiliation logos as image blocks (variant class sits on the figure) */ .affil__row .wp-block-image { margin: 0; } .affil__row img { max-height: 62px; width: auto; filter: grayscale(1) brightness(.45); opacity: .8; } .affil__row .is-reversed img { filter: invert(1) grayscale(1) brightness(.45); } .affil__row .is-badge img { max-height: 76px; filter: grayscale(1); opacity: .9; } /* Doctor photo */ .doctor__photo .wp-block-image { margin: 0; } .doctor__photo img { border-radius: var(--radius-lg); width: 100%; box-shadow: var(--shadow); aspect-ratio: 4/4.4; object-fit: cover; object-position: center 22%; } /* Reviews / doctor quotes as core quote blocks */ .quotes .wp-block-quote, .wp-block-quote.doctor__quote { margin: 0; border: 0; padding: 0; font-style: normal; } .quotes .wp-block-quote.quote { padding: 1.4rem 1.5rem; } .quote p.stars { color: #E0A21C; letter-spacing: .1em; margin-bottom: .5rem; } .wp-block-quote cite { font-style: normal; } .wp-block-quote.doctor__quote { border-left: 3px solid var(--accent); padding-left: 1.25rem; font-style: italic; color: var(--ink-soft); } /* Step carousels as native lists — the number badge is generated */ ul.standards { counter-reset: di-step; list-style: none; } li.standard { counter-increment: di-step; } li.standard::before { content: counter(di-step); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--mauve); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .95rem; } li.standard strong { display: block; font-family: var(--font-head); font-size: 1.02rem; margin-bottom: .3rem; color: var(--ink); } li.standard span { display: block; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; } @media (max-width: 599px) { .dsd li.standard::before { margin: 0 0 1rem; } } /* Block-gap guard, level 2 (1.4.2): WP's automatic flow margin pushed every grid/flex child after the first downward. The design's own gaps rule here. */ .related-grid > *, .hub-grid > *, .facts > *, .quotes > *, .pillars > *, .services > *, .inside-grid > *, .standard-grid > *, .dsd__grid > *, .doctor__grid > *, .page-hero__inner > *, .tour-grid > *, .review-wall > *, .footer-grid > *, .affil__row > *, .services-index > *, .wrap > .related-grid, .service > *, .service__body > * { margin-block-start: 0; } /* …but keep the intended rhythm inside card bodies and copy columns */ .service__body > * + *, .inside-copy > * + *, .hub-intro > * + *, .side-card > * + * { margin-block-start: .6em; } /* ── Gravity Forms skin (1.4.3) ────────────────────────────────── Tighter rhythm, taller comfortable inputs, buttons on-design. */ .gform_wrapper.gravity-theme .gform_fields, .gform_wrapper .gform_fields { grid-row-gap: 1.1rem !important; row-gap: 1.1rem !important; } .gform_wrapper .gfield { margin: 0 !important; padding: 0; } .gform_wrapper .gfield_label, .gform_wrapper legend.gfield_label { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: .35rem; } .gform_wrapper .gfield_required { color: var(--mauve-dk); font-weight: 400; } .gform_wrapper input[type="text"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="email"], .gform_wrapper select, .gform_wrapper textarea { width: 100%; padding: .85rem 1rem; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 10px; } .gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus { border-color: var(--mauve); outline: 2px solid var(--blush); outline-offset: 0; } .gform_wrapper textarea { min-height: 7.5rem; } .gform_wrapper .ginput_complex { display: flex; gap: .9rem; } .gform_wrapper .ginput_complex > span { flex: 1; } .gform_wrapper .ginput_complex label { font-size: var(--step--1); color: var(--ink-soft); margin-top: .3rem; } /* radios & checkboxes: inline, compact */ .gform_wrapper .gfield_radio, .gform_wrapper .gfield_checkbox { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; } .gform_wrapper .gchoice { display: flex; align-items: center; gap: .5rem; } .gform_wrapper .gchoice input { width: 1.1rem; height: 1.1rem; accent-color: var(--mauve); } .gform_wrapper .gfield_description { font-size: var(--step--1); color: var(--ink-faint); margin-top: .3rem; } /* submit button = the design's accent button */ .gform_wrapper .gform_footer { margin-top: 1.4rem; padding: 0; } .gform_wrapper .gform_button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: var(--step-0); padding: .9rem 1.7rem; border-radius: 100px; border: 2px solid transparent; background: var(--accent); color: #fff; cursor: pointer; transition: background-color .2s; } .gform_wrapper .gform_button:hover { background: var(--accent-dk); } /* validation states stay on-palette */ .gform_wrapper .gfield_error input, .gform_wrapper .gfield_error select, .gform_wrapper .gfield_error textarea { border-color: var(--mauve-dk); } .gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { color: var(--mauve-dk); font-size: var(--step--1); background: transparent; border: 0; padding: .25rem 0 0; } /* Selects: own sizing so the text never clips (1.4.4) */ .gform_wrapper select { height: auto; min-height: 3.2rem; line-height: 1.3; padding-top: .7rem; padding-bottom: .7rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E5866' stroke-width='2'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1rem; padding-right: 2.6rem; } /* ── FAQ accordions (1.4.7) ───────────────────────────────────── Rank Math FAQ items behave like the prototype's accordion. The block renders on the front end as .rank-math-list-item (Rank Math's own markup); .rank-math-faq-item covers older copies. Same card + chevron treatment as the details accordions. */ .faq .rank-math-list-item, .faq .rank-math-faq-item { padding: 0; overflow: hidden; } .faq .rank-math-question { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; margin: 0; user-select: none; } .faq .rank-math-question::after { content: ""; flex: 0 0 auto; width: 1.65rem; height: 1.65rem; border-radius: 50%; background-color: var(--blush-lt); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B4B65' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: .95rem; transition: transform .25s ease, background-color .2s; } .faq .rank-math-question:hover::after { background-color: var(--blush); } .faq .is-open > .rank-math-question::after { transform: rotate(180deg); background-color: var(--mauve); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); } .faq .rank-math-answer { display: none; padding: 0 1.2rem 1.15rem; } .faq .is-open > .rank-math-answer { display: block; } /* no-JS and editor canvas: answers stay visible */ @media print { .faq .rank-math-answer { display: block !important; } } .block-editor-iframe__body .faq .rank-math-answer { display: block; } /* ── Patient-education illustrations (1.4.6) ───────────────────── */ .wp-block-image.illus { margin: 2.25rem 0 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.25rem .95rem; } .wp-block-image.illus img { width: 100%; height: auto; } .wp-block-image.illus .wp-element-caption { display: block; text-align: center; font-size: var(--step--1); color: var(--ink-soft); margin: .8rem 0 0; } .illus-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .illus-grid .wp-block-image.illus { margin: 0; } /* ── Blog (1.5.0) ─────────────────────────────────────────────── Archive grid (templates/home.html + archive.html) and single posts. */ .blog-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); list-style: none; margin: 0; padding: 0; } .blog-grid > li { margin: 0; } .blog-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; height: 100%; transition: transform .2s, box-shadow .2s; } .blog-card:hover { transform: translateY(-3px); } .blog-card .wp-block-post-featured-image { margin: 0; } .blog-card .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .blog-card__body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; } .blog-card__date { font-size: var(--step--1); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; } .blog-card__title { font-size: 1.12rem; line-height: 1.35; margin: 0; } .blog-card__title a { text-decoration: none; color: var(--ink); } .blog-card__title a:hover { color: var(--mauve-dk); } .blog-card__excerpt { color: var(--ink-soft); font-size: var(--step--1); } .blog-card__excerpt p { margin: 0 0 .4rem; } .blog-card__excerpt .wp-block-post-excerpt__more-link, .wp-block-post-excerpt__more-link { color: var(--mauve-dk); font-weight: 600; text-decoration: none; } .wp-block-post-excerpt__more-link:hover { text-decoration: underline; } /* pagination */ .blog-pagination { margin-top: 2.5rem; gap: .5rem; font-family: var(--font-head); font-weight: 600; } .blog-pagination a, .blog-pagination .wp-block-query-pagination-numbers .current { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .9rem; border-radius: 100px; text-decoration: none; } .blog-pagination a { color: var(--ink); background: var(--blush-lt); } .blog-pagination a:hover { background: var(--blush); } .blog-pagination .wp-block-query-pagination-numbers .current { background: var(--mauve); color: #fff; } /* single post */ .post-hero .wp-block-post-title { margin: .25rem 0 .5rem; } .post-hero__cats { margin-bottom: .4rem; } .post-hero__cats a { color: var(--blush); text-decoration: none; } .post-hero__cats a:hover { text-decoration: underline; } .post-hero__date { color: rgba(255,255,255,.75); font-size: var(--step--1); } .wrap--post { max-width: 50rem; margin-inline: auto; } .post-featured { margin: 0 0 2rem; } .post-featured img { display: block; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); } .post-body > * + *, .post-body .wp-block-post-content > * + * { margin-block-start: 1em; } .post-body h2, .post-body h3 { margin-top: 1.6em; } .post-body p, .post-body li { color: var(--ink-soft); max-width: 70ch; } .post-body a { color: var(--mauve-dk); } .post-nav { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-family: var(--font-head); font-weight: 600; } .post-nav a { text-decoration: none; color: var(--ink); } .post-nav a:hover { color: var(--mauve-dk); } /* ── Blog polish (1.5.1) ──────────────────────────────────────── Post banner matches the treatment-page banners: full-size title, featured image in the banner photo card. */ .post-hero .wp-block-post-title { font-size: var(--step-4); letter-spacing: -.01em; color: #fff; margin: .1em 0 .4em; line-height: 1.18; } .post-hero .page-hero__photo .wp-block-post-featured-image { margin: 0; } .post-hero .page-hero__photo .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block; } .post-body ul { padding-left: 1.2rem; } .post-body ul li { margin: .35em 0; } /* ── Office tour gallery + lightbox (1.5.2) ─────────────────────── */ .tour-grid.di-gallery .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; background: var(--surface-alt); } .tour-grid.di-gallery .wp-block-image img:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 12px 30px rgba(40,55,74,.18)); } .di-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(40,55,74,.92); padding: clamp(1rem, 4vw, 3rem); } .di-lb[hidden] { display: none; } .di-lb__stage { margin: 0; max-width: min(1100px, 92vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: .8rem; } .di-lb__img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.4); background: #fff; } .di-lb__cap { color: #E9E4E9; font-size: var(--step--1); text-align: center; max-width: 60ch; } .di-lb__close, .di-lb__nav { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; border-radius: 50%; transition: background-color .2s; font-family: var(--font-head); line-height: 1; } .di-lb__close:hover, .di-lb__nav:hover { background: var(--mauve); } .di-lb__close { top: 1.1rem; right: 1.2rem; width: 2.8rem; height: 2.8rem; font-size: 1.6rem; } .di-lb__nav { top: 50%; transform: translateY(-50%); width: 3.2rem; height: 3.2rem; font-size: 2rem; } .di-lb__prev { left: clamp(.5rem, 2vw, 2rem); } .di-lb__next { right: clamp(.5rem, 2vw, 2rem); } .di-lb__count { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: var(--step--1); letter-spacing: .05em; } @media (max-width: 600px) { .di-lb__nav { width: 2.6rem; height: 2.6rem; font-size: 1.5rem; } } /* ── Smile gallery — filterable before/after (1.6.0) ───────────── */ .sg-notice { background: var(--blush-lt); border: 1px solid var(--blush); border-radius: var(--radius); padding: .9rem 1.2rem; font-size: var(--step--1); color: var(--ink-soft); } .sg-notice strong { color: var(--mauve-dk); } .sg-filter { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.8rem; align-items: center; } .sg-btn { font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); padding: .55rem 1.15rem; border-radius: 100px; border: 1.5px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; transition: all .18s; } .sg-btn:hover { border-color: var(--mauve); color: var(--mauve-dk); } .sg-btn.is-active { background: var(--mauve); border-color: var(--mauve); color: #fff; } .sg-select-wrap { display: none; } /* desktop: buttons; mobile: select */ .sg-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } .sg-item { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s; } .sg-item.is-hidden { display: none; } .sg-item img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; cursor: zoom-in; } .sg-item:hover { transform: translateY(-3px); } .sg-cap { padding: .85rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .4rem; } .sg-cap__title { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1rem; } .sg-cap__tags { display: flex; flex-wrap: wrap; gap: .35rem; } .sg-tag { font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; background: var(--surface-alt); color: var(--mauve-dk); border: 1px solid var(--line); border-radius: 100px; padding: .18rem .6rem; } .sg-cap__ai { font-size: .72rem; color: var(--ink-faint); font-style: italic; } .sg-empty { text-align: center; color: var(--ink-soft); padding: 2rem 0; } @media (max-width: 640px) { .sg-filter .sg-btn { display: none; } .sg-select-wrap { display: block; width: 100%; } .sg-select { width: 100%; font-family: var(--font-head); font-weight: 600; font-size: 1rem; padding: .8rem 2.6rem .8rem 1.1rem; border-radius: 10px; border: 1.5px solid var(--border); background-color: #fff; color: var(--ink); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B4B65' stroke-width='2'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; } .sg-grid { grid-template-columns: 1fr; } } /* ========================================================================== Oct 2026 — Dr. B review: logo in brand color + membership logos in true color ========================================================================== */ /* Full-colour logo on a light chip so the mauve mark reads on the slate header */ .site-header .brand { background: #FFFFFF; padding: .5rem .95rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(31,42,55,.12); } .site-header .brand img { filter: none; opacity: 1; } @media (max-width: 640px) { .site-header .brand { padding: .4rem .7rem; border-radius: 10px; } } /* Membership / affiliation logos: kept on the uniform muted treatment until proper colour logo files are supplied (the bundled sources are faint/mono, so un-graying them looked broken). Flip to true colour once real files land. */ /* Financing logo row (payment page) — neutral, colour logos, tidy sizing */ .fin-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.5rem; } .fin-row a { display: inline-flex; align-items: center; } .fin-row img { max-height: 46px; width: auto; } /* ========================================================================== Before/after smile gallery (.diba) — Oct 2026 ========================================================================== */ .diba{display:flex;flex-direction:column;gap:1.4rem} .diba__filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center} .diba__filter{font-family:var(--font-head);font-weight:600;font-size:var(--step--1);border:1px solid var(--border);background:var(--white);color:var(--ink);padding:.4rem 1.05rem;border-radius:100px;cursor:pointer} .diba__filter:hover{border-color:var(--mauve);color:var(--mauve)} .diba__filter.is-active{background:var(--mauve);border-color:var(--mauve);color:#fff} .diba__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.5rem)} .diba__card{border:0;padding:0;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:transform .18s ease,box-shadow .18s ease} .diba__card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .diba__card:focus-visible{outline:3px solid var(--mauve);outline-offset:2px} .diba__pair{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1440/900} .diba__half{position:relative;overflow:hidden} .diba__half img{width:100%;height:100%;object-fit:cover;display:block} .diba__half+.diba__half{border-left:2px solid var(--white)} .diba__mk{position:absolute;top:8px;font-family:var(--font-head);font-style:normal;font-weight:600;font-size:.62rem;letter-spacing:.1em;color:#fff;padding:.16rem .5rem;border-radius:100px} .diba__mk--b{left:8px;background:rgba(31,42,55,.85)} .diba__mk--a{right:8px;background:rgba(139,75,101,.92)} .diba__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem .9rem} .diba__no{font-family:var(--font-head);font-weight:600} .diba__tag{font-size:.72rem;font-weight:600;color:var(--indigo);background:var(--blush-lt);border:1px solid var(--border);padding:.16rem .55rem;border-radius:100px} .diba__more{text-align:center;margin-top:.4rem} @media(max-width:760px){.diba__grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.diba__grid{grid-template-columns:1fr}} .diba-lb{position:fixed;inset:0;z-index:1000;background:rgba(16,22,30,.88);display:none;place-items:center;padding:1rem} .diba-lb.is-open{display:grid} .diba-lb__panel{background:var(--white);border-radius:14px;overflow:hidden;max-width:980px;width:100%;max-height:94vh;display:flex;flex-direction:column;box-shadow:var(--shadow)} .diba-lb__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--border)} .diba-lb__title{font-family:var(--font-head);font-weight:600;font-size:1.05rem} .diba-lb__tag{font-size:.74rem;font-weight:600;color:var(--indigo);background:var(--blush-lt);border:1px solid var(--border);padding:.2rem .6rem;border-radius:100px;margin-left:.6rem} .diba-lb__close{border:0;background:transparent;color:var(--ink-soft);cursor:pointer;width:38px;height:38px;border-radius:8px;display:grid;place-items:center;font-size:1.5rem;line-height:1} .diba-lb__close:hover{background:var(--blush-lt);color:var(--ink)} .diba-lb__body{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border)} .diba-lb__fig{margin:0;position:relative;aspect-ratio:720/900;overflow:hidden;background:var(--white)} .diba-lb__fig img{width:100%;height:100%;object-fit:cover;display:block} .diba-lb__cap{position:absolute;bottom:0;left:0;right:0;text-align:center;font-family:var(--font-head);font-weight:600;font-size:.74rem;letter-spacing:.14em;color:#fff;padding:.4rem} .diba-lb__cap--b{background:rgba(31,42,55,.82)} .diba-lb__cap--a{background:rgba(139,75,101,.9)} .diba-lb__nav{display:flex;justify-content:space-between;padding:.6rem 1rem;border-top:1px solid var(--border)} .diba-lb__btn{border:1px solid var(--border);background:transparent;color:var(--ink);font:inherit;font-size:var(--step--1);padding:.4rem .9rem;border-radius:100px;cursor:pointer} .diba-lb__btn:hover{border-color:var(--mauve);color:var(--mauve)} @media(max-width:560px){.diba-lb__body{grid-template-columns:1fr}.diba-lb__fig{aspect-ratio:3/2}} /* ========================================================================== Oct 2026 — white header with the full-colour brand logo (Dr. B) ========================================================================== */ .site-header { background: #FFFFFF; border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgba(31,42,55,.05); } .site-header .brand { background: transparent; padding: 0; border-radius: 0; box-shadow: none; } .site-header .brand img { filter: none; opacity: 1; } /* nav links read dark on white, mauve on hover */ .site-header .nav > .nav__list > li > a, .site-header .nav__trigger { color: var(--ink); } .site-header .nav > .nav__list > li > a:hover, .site-header .nav > .nav__list > li > a:focus-visible, .site-header .nav__trigger:hover, .site-header .nav__trigger[aria-expanded="true"] { color: var(--mauve); border-bottom-color: var(--mauve); } .site-header .menu-toggle { background: var(--accent); color: #FFFFFF; } /* Financing — contact-office fallback line */ .fin-office { margin-top: 18px; color: var(--ink); font-size: .95rem; } .fin-office a { color: var(--mauve); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* ════════════════════════════════════════════════════════════════════ 1.10.0 — real logo files, indigo footer, office gallery, SmileBot ════════════════════════════════════════════════════════════════════ */ /* Logos: his own files. Header = full color on white; footer = reversed. */ .site-header .brand img { aspect-ratio: 2370 / 359; height: auto; filter: none; opacity: 1; } .site-footer { background: var(--indigo); } .site-footer .brand img { aspect-ratio: 2370 / 359; width: 270px; max-width: 100%; height: auto; filter: none; opacity: 1; } /* Utility bar: SmileBot link */ .utility a.is-smile { color: var(--mauve); font-weight: 600; } .utility a.is-smile svg { color: var(--mauve); } /* About — reception wall shot */ .wp-block-image.about-office { margin: 1.75rem 0 2.25rem; } .wp-block-image.about-office img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow); } .wp-block-image.about-office figcaption { font-size: var(--step--1); color: var(--ink); opacity: .8; margin-top: .6rem; text-align: left; } .wp-block-image.about-office figcaption a { color: var(--mauve); font-weight: 600; } /* Office tour — tidy tile grid */ .tour-grid.di-gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; } .tour-grid.di-gallery .wp-block-image img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } /* GHL forms */ .di-ghl { width: 100%; } .di-ghl iframe { display: block; width: 100%; min-height: 520px; } /* ── SmileBot: shared bits ── */ .ss-pill { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .4rem .85rem; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--border); color: var(--ink); font-size: var(--step--1); font-weight: 600; } .ss-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mauve); box-shadow: 0 0 0 4px rgba(139,75,101,.18); animation: ssPulse 2s ease-in-out infinite; } .ss-pill--onDark { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; } @keyframes ssPulse { 50% { box-shadow: 0 0 0 7px rgba(139,75,101,.05); } } @media (prefers-reduced-motion: reduce) { .ss-pill__dot { animation: none; } } .ss-disclaimer { font-size: .8rem; color: var(--ink); opacity: .7; margin-top: 1.25rem; } .ss-heroLink { margin-top: 1.1rem; } .ss-heroLink a { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding: .65rem 1rem; border-radius: 12px; background: rgba(255,255,255,.92); border: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: var(--step--1); box-shadow: 0 2px 10px rgba(31,42,55,.06); } .ss-heroLink a strong { color: var(--mauve); } .ss-heroLink a:hover { border-color: var(--mauve); } /* ── Gate page ── */ .ss-hero { background: linear-gradient(160deg, var(--blush, #FBF6F8) 0%, #FFFFFF 70%); padding-block: clamp(2rem, 5vw, 4.5rem); border-bottom: 1px solid var(--border); } .ss-hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 960px) { .ss-hero__grid { grid-template-columns: 1.05fr .95fr; } } .ss-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; margin: .2rem 0 1rem; } .ss-hero h1 em { font-style: normal; color: var(--mauve); } .ss-hero .crumbs { margin-bottom: 1rem; } .ss-steps { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .85rem; } .ss-steps li { display: flex; gap: .9rem; align-items: flex-start; } .ss-steps__n { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); color: #fff; font-weight: 700; } .ss-steps strong { display: block; color: var(--ink); } .ss-steps span:not(.ss-steps__n) { display: block; font-size: var(--step--1); opacity: .8; } .ss-gate { background: #FFFFFF; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 50px rgba(40,55,74,.14); padding: clamp(1.1rem, 2.5vw, 1.75rem); border-top: 5px solid var(--mauve); scroll-margin-top: 120px; } .ss-gate__head .eyebrow { margin: 0 0 .25rem; color: var(--mauve); } .ss-gate__sub { margin: 0 0 .75rem; font-size: var(--step--1); } .ss-gate__fine { margin: .75rem 0 0; font-size: .78rem; opacity: .7; text-align: center; } .ss-show { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .ss-show { grid-template-columns: .85fr 1.15fr; } } .ss-show__reveal { max-width: 460px; width: 100%; margin-inline: auto; aspect-ratio: 700 / 887; } .ss-ticks { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; gap: .55rem; } .ss-ticks li { position: relative; padding-left: 1.9rem; } .ss-ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--mauve) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat; } /* ── Tool page (BiteBot framed under our header) ── */ .ss-tool { background: linear-gradient(180deg, var(--blush, #FBF6F8), #FFFFFF 340px); padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); } .ss-tool__head { text-align: center; } .ss-tool__head h1 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); margin: .25rem 0 .9rem; } .ss-tips { list-style: none; padding: 0; margin: 0 auto 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; font-size: var(--step--1); } .ss-tips li { display: inline-flex; align-items: center; gap: .4rem; } .ss-tips svg { width: 20px; height: 20px; color: var(--mauve); } .smilebot-frame { max-width: 1040px; margin-inline: auto; background: #FFFFFF; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 50px rgba(40,55,74,.14); overflow: hidden; } .smilebot-frame iframe { display: block; width: 100%; height: min(980px, 88vh); min-height: 680px; border: 0; } .ss-tool__body .ss-disclaimer { text-align: center; } /* ── Shared CTA band (synced block: smile-cta) ── */ .smile-cta { background: var(--indigo); color: #FFFFFF; padding-block: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; } .smile-cta__inner { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 860px) { .smile-cta__inner { grid-template-columns: .7fr 1.3fr; } } .smile-cta h2 { color: #FFFFFF; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; margin: 0 0 .75rem; } .smile-cta p { color: rgba(255,255,255,.85); } .smile-cta__media { display: flex; justify-content: center; } .smile-cta__phone { position: relative; width: min(240px, 60vw); aspect-ratio: 9 / 17; border-radius: 34px; padding: 10px; background: #0F1722; box-shadow: 0 25px 60px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08); transform: rotate(-4deg); } .smile-cta__phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; display: block; } .smile-cta__chip { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; background: #FFFFFF; color: var(--ink); font-size: .8rem; font-weight: 700; padding: .45rem .8rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.2); } @media (max-width: 859px) { .smile-cta__copy { text-align: center; } .smile-cta .btn-row { justify-content: center; } .smile-cta__phone { width: 180px; } } .ss-hero .crumbs { color: var(--ink); opacity: .75; } .ss-hero .crumbs a { color: var(--ink); } .ss-hero .crumbs [aria-current] { color: var(--mauve); font-weight: 600; } .ss-show__reveal .reveal__base { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 959px) { .ss-hero__grid { gap: 0; } .ss-hero__copy { display: contents; } .ss-gate { order: 2; margin-top: 1.25rem; } .ss-steps { order: 3; margin-top: 1.75rem; } } /* Membership logos — true colour (files supplied Oct 18). Optically balanced. */ .affil__row { justify-content: space-around; } .affil__row img, .affil img { filter: none !important; opacity: 1 !important; width: auto; height: auto; max-height: 56px; max-width: 170px; object-fit: contain; } .affil__row .affil--ada img { max-height: 44px; } .affil__row .affil--tda img { max-height: 60px; } .affil__row .affil--ghds img { max-height: 48px; max-width: 200px; } .affil__row .affil--iabdm img { max-height: 58px; } .affil__row .affil--iaomt img { max-height: 60px; } .affil__row .affil--dsd img { max-height: 50px; } @media (max-width: 640px) { .affil__row { justify-content: center; gap: 1.25rem 2rem; } .affil__row img { max-height: 42px !important; max-width: 130px; } } /* ════════════════════════════════════════════════════════════════════ 1.11.0 — larger logo · sticky header (utility bar scrolls away) · header condenses on scroll ════════════════════════════════════════════════════════════════════ */ /* The template-part wrapper is only as tall as utility + header, which traps position:sticky. display:contents lets .site-header stick to the page while the utility bar above it scrolls away normally. */ .wp-site-blocks > header.wp-block-template-part, header.wp-block-template-part:has(> .site-header) { display: contents; } .site-header { position: sticky; top: 0; z-index: 60; transition: box-shadow .25s ease; } body.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } @media (max-width: 600px) { body.admin-bar .site-header { top: 0; } } /* Larger logo (his file includes the tagline, so it needs the width) */ .site-header .brand img { width: clamp(300px, 21vw, 370px); transition: width .25s ease; } @media (min-width: 1240px) and (max-width: 1500px) { .site-header .brand img { width: clamp(255px, 19.5vw, 290px); } } @media (min-width: 768px) and (max-width: 1239px) { .site-header .brand img { width: 320px; } } @media (max-width: 767px) { .site-header .brand img { width: clamp(230px, 64vw, 300px); } } .site-header__inner { transition: padding .25s ease; } /* Condensed state once the page scrolls past the utility bar */ .site-header.is-scrolled { box-shadow: 0 6px 22px rgba(31,42,55,.10); } .site-header.is-scrolled .site-header__inner { padding-block: .5rem; } .site-header.is-scrolled .brand img { width: clamp(215px, 15vw, 255px); } @media (min-width: 1240px) and (max-width: 1500px) { .site-header.is-scrolled .brand img { width: 220px; } } @media (max-width: 767px) { .site-header.is-scrolled .brand img { width: clamp(190px, 52vw, 230px); } } .site-header.is-scrolled .header-cta { padding-block: .6rem; } .site-header.is-scrolled .menu-toggle { padding-block: .6rem; } @media (prefers-reduced-motion: reduce) { .site-header, .site-header__inner, .site-header .brand img { transition: none; } } @media (max-width: 520px) { .btn-row .wp-block-button, .btn-row .wp-block-button__link { max-width: 100%; } .btn-row .wp-block-button__link { white-space: normal; text-align: center; } } /* ── 1.12.0 — Smile preview tool page: one clean full-screen view ── */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } body.is-smile-preview .ss-tool { background: #FFFFFF; padding: .75rem 0 1rem; } body.is-smile-preview .ss-tool__head { text-align: center; padding-inline: 16px; } body.is-smile-preview .ss-pill { margin: 0 0 .6rem; background: #FFFFFF; } body.is-smile-preview .smilebot-frame { max-width: 1040px; margin-inline: auto; background: #FFFFFF; border: 0; border-radius: 0; box-shadow: none; } body.is-smile-preview .smilebot-frame iframe { height: calc(100dvh - var(--sb-top, 150px)); min-height: 520px; } body.is-smile-preview .ss-disclaimer { text-align: center; padding-inline: 16px; margin-top: .75rem; } @media (max-width: 767px) { body.is-smile-preview .utility, body.is-smile-preview .mobile-cta { display: none !important; } body.is-smile-preview { padding-bottom: 0 !important; } body.is-smile-preview .ss-tool { padding-top: .5rem; } body.is-smile-preview .ss-pill { font-size: .85rem; padding: .3rem .75rem; } } /* Tool page = its own minimal screen: no site header/footer, just back + logo */ body.is-smile-preview .utility, body.is-smile-preview .site-header, body.is-smile-preview .drawer, body.is-smile-preview .site-footer, body.is-smile-preview .cta-strip, body.is-smile-preview .mobile-cta { display: none !important; } body.is-smile-preview { padding-bottom: 0 !important; } body.is-smile-preview .ss-tool { padding-top: 0; } .ss-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; max-width: 1040px; margin: 0 auto; padding: .7rem 16px; } .ss-bar__back { justify-self: start; display: inline-flex; align-items: center; gap: .2rem; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .35rem .5rem .35rem .2rem; border-radius: 8px; } .ss-bar__back svg { width: 20px; height: 20px; } .ss-bar__back:hover { color: var(--mauve); } .ss-bar__logo { display: block; line-height: 0; } .ss-bar__logo img { width: clamp(170px, 46vw, 250px); height: auto; aspect-ratio: 2370 / 359; } .ss-bar__call { justify-self: end; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); color: var(--mauve); } .ss-bar__call svg { width: 19px; height: 19px; } @media (max-width: 480px) { .ss-bar { padding-inline: 12px; gap: .4rem; } .ss-bar__back { font-size: .85rem; white-space: nowrap; } .ss-bar__logo img { width: clamp(150px, 40vw, 190px); } .ss-bar__call { width: 36px; height: 36px; } } /* ── 1.13.0 — Membership logos: one-row auto-scrolling strip on mobile ── */ .affil__row > .is-clone { display: none; } @media (max-width: 767px) { .affil { overflow: hidden; padding-block: 1.1rem; } .affil .affil__row.is-marquee { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; max-width: none; padding-inline: 0; margin: 0; animation: affilTicker 26s linear infinite; } .affil__row.is-marquee > * { flex: 0 0 auto; padding-inline: 1.4rem; margin: 0; } .affil__row.is-marquee > .is-clone { display: block; } .affil__row.is-marquee img { max-height: 40px !important; max-width: 120px; } .affil__row.is-marquee .affil--ghds img { max-width: 150px; } .affil__row.is-marquee:active, .affil__row.is-marquee:hover { animation-play-state: paused; } .affil:has(.is-marquee) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } } @keyframes affilTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .affil { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .affil .affil__row.is-marquee { animation: none; } .affil__row.is-marquee > .is-clone { display: none; } } /* ── 1.14.0 — Gallery lightbox: visible arrows + mobile layout ── */ .di-lb__nav, .di-lb__close { background: rgba(31,42,55,.78); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 4px 14px rgba(0,0,0,.3); } .di-lb__nav:hover, .di-lb__close:hover { background: var(--mauve); } .di-lb__nav:focus-visible, .di-lb__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 600px) { .di-lb { padding: 1rem .75rem 5.5rem; } .di-lb__stage { max-width: 100%; } .di-lb__img { max-height: 70vh; } .di-lb__nav { top: auto; bottom: 1.1rem; transform: none; width: 3.1rem; height: 3.1rem; font-size: 1.8rem; background: #FFFFFF; color: var(--ink); border: 0; } .di-lb__nav:active { background: var(--mauve); color: #fff; } .di-lb__prev { left: 1.25rem; } .di-lb__next { right: 1.25rem; } .di-lb__count { bottom: 2rem; color: #fff; font-weight: 600; } } .di-lb__count { pointer-events: none; } .di-lb__nav, .di-lb__close { z-index: 2; } body:has(.di-lb:not([hidden])) .mobile-cta { display: none; }