/* ========================================================================= DentalRun master theme CSS 2026-10-11: carries every generic fix made on the Marlow sample (Oct 8 and 9). Sample only content and each sample's colours stay in that sample's theme. Tokens come from theme.json (--wp--preset--*). Everything visual lives here. Section map: 1 tokens, 2 base, 3 buttons, 4 header, 5 hero, 6 sections, 7 cards and media, 8 each section, 9 footer and mobile bar, 10 motion, 11 mobile ========================================================================= */ /* 1. Tokens ------------------------------------------------------------- */ :root { /* Semantic color tokens. Values come from theme.json (--wp--preset--*), fallbacks here. */ --bg-deep: var(--wp--preset--color--bg-deep, #182338); --bg-section: var(--wp--preset--color--bg-section, #1E2C47); --bg-card: var(--wp--preset--color--bg-card, #283A5C); --accent: var(--wp--preset--color--accent, #5B78A8); --accent-bright: var(--wp--preset--color--accent-bright, #C8D2E2); --accent-deep: var(--wp--preset--color--accent-deep, #34507F); --surface-light: var(--wp--preset--color--surface-light, #F1F4F8); --surface-light-2: var(--wp--preset--color--surface-light-2, #E3E8F0); --text-on-dark: var(--wp--preset--color--text-on-dark, #F6F8FB); --text-muted: var(--wp--preset--color--text-muted, #B3BDCF); --text-on-light: var(--wp--preset--color--text-on-light, #1C2A44); --text-muted-light: var(--wp--preset--color--text-muted-light, var(--text-muted-light)); /* RGB triplets for translucent overlays (CSS cannot derive these from a hex token). */ --bg-deep-rgb: 24, 35, 56; --bg-card-rgb: 40, 58, 92; --accent-bright-rgb: 200, 210, 226; --surface-light-rgb: 241, 244, 248; --btn-a: var(--accent-deep); --btn-b: var(--accent-bright); --glow: #C8D2E2; --glow-rgb: 200, 210, 226; --grad-light: linear-gradient(180deg, #E0E6EF 0%, #F1F4F8 55%, #FFFFFF 100%); --grad-text: linear-gradient(90deg, #97A7C2 0%, #C8D2E2 55%, #DCE3EE 100%); --btn-bg: #ffffff; --btn-fg: var(--bg-deep); --btn-icon-bg: var(--bg-deep); --btn-icon-fg: #ffffff; --font-display: var(--wp--preset--font-family--display, "Monstar", Inter, system-ui, sans-serif); --font-body: var(--wp--preset--font-family--body, Inter, system-ui, sans-serif); --grad-button: linear-gradient(94deg, var(--btn-a) 0%, var(--btn-b) 100%); --grad-section: linear-gradient(180deg, var(--bg-section) 0%, var(--bg-deep) 100%); --grad-hero-glow: radial-gradient(60% 55% at 28% 22%, rgba(var(--accent-bright-rgb), .35) 0%, rgba(var(--accent-bright-rgb), 0) 70%); --grad-hero-overlay: linear-gradient(157deg, rgba(var(--bg-deep-rgb), .9) 16%, rgba(var(--bg-deep-rgb), .15) 47%, var(--bg-deep) 100%); --grad-image-fade: linear-gradient(180deg, rgba(var(--bg-deep-rgb), 0) 60%, rgba(var(--bg-deep-rgb), .88) 98%); --grad-image-fade-cream: linear-gradient(180deg, rgba(var(--surface-light-rgb), 0) 70%, rgba(var(--surface-light-rgb), .9) 100%); --radius: 20px; --radius-sm: 12px; --gutter: 20px; --section-y: clamp(64px, 9vw, 128px); --ease: cubic-bezier(.22, 1, .36, 1); } /* 2. Base ---------------------------------------------------------------- */ /* Border box everywhere: width includes padding, so 100% + padding never overflows the screen. */ .dr-main *, .dr-main *::before, .dr-main *::after, .dr-header *, .dr-footer *, .dr-header, .dr-footer { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg-deep); color: var(--text-on-dark); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.dr-motion-ready [data-reveal] { will-change: transform, opacity; } /* WordPress adds a block gap between top level blocks; the hero must touch the top. */ .wp-site-blocks > * + *, .dr-main > * + * { margin-block-start: 0 !important; } .wp-site-blocks > header { height: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; margin: 0 0 .5em; } h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.08; } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.2; } p { margin: 0 0 1em; } ul { list-style: none; margin: 0; padding: 0; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-bright); text-decoration: none; } a:hover { color: var(--text-on-dark); } .dr-eyebrow { font-family: var(--font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 1rem; } .dr-section--cream .dr-eyebrow { color: var(--accent-deep); } .dr-lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.55; color: var(--text-muted); max-width: 56ch; } .dr-section--cream .dr-lead { color: var(--text-muted-light); } .dr-link { font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; } /* 3. Buttons ------------------------------------------------------------- */ .dr-btn .wp-block-button__link, .dr-btn--inline { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: 0 28px; border-radius: 999px; font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; transition: box-shadow .35s var(--ease), transform .35s var(--ease), background-color .3s; box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); } .dr-btn--primary .wp-block-button__link, .dr-btn--primary.dr-btn--inline { background: var(--grad-button); color: #fff; border: 0; } .dr-btn--primary .wp-block-button__link:hover, .dr-btn--primary.dr-btn--inline:hover { color: #fff; transform: translateY(-1px); box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, .85), 0 14px 30px -12px rgba(var(--accent-bright-rgb), .55); } .dr-btn--ghost .wp-block-button__link, .dr-btn--ghost.dr-btn--inline { background: transparent; color: var(--text-on-dark); border: 1px solid rgba(255, 255, 255, .28); } .dr-btn--ghost .wp-block-button__link:hover, .dr-btn--ghost.dr-btn--inline:hover { border-color: var(--accent-bright); color: #fff; box-shadow: inset 0 -3px 0 0 var(--accent-bright); } .dr-section--cream .dr-btn--ghost.dr-btn--inline { color: var(--text-on-light); border-color: rgba(28, 42, 68, .25); } button.dr-btn--inline { cursor: pointer; width: 100%; } /* 4. Header -------------------------------------------------------------- */ .dr-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 14px var(--gutter); background: rgba(var(--bg-deep-rgb), 0); backdrop-filter: blur(0px); transition: background-color .4s, backdrop-filter .4s, padding .4s, box-shadow .4s; } /* Logged in: the WordPress admin bar sits over the top 32px (46px on phones). Push the header below it. */ body.admin-bar .dr-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .dr-header { top: 46px; } } .dr-header.is-scrolled { background: rgba(var(--bg-deep-rgb), .82); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); padding: 8px var(--gutter); } .dr-header__inner { align-items: center; gap: 24px; } .dr-header__logo img { width: clamp(150px, 16vw, 220px); height: auto; transition: width .4s; } .dr-header.is-scrolled .dr-header__logo img { width: clamp(130px, 13vw, 170px); } .dr-nav { gap: 28px; } .dr-nav .wp-block-navigation-item__content { color: var(--text-on-dark); font-size: .95rem; font-weight: 500; } .dr-nav .wp-block-navigation-item__content:hover { color: var(--accent-bright); } .dr-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--bg-deep); padding: 24px; } .dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--font-display); font-size: 2rem; } .dr-nav .wp-block-navigation__responsive-container-open, .dr-nav .wp-block-navigation__responsive-container-close { color: var(--text-on-dark); } .dr-header__cta { margin: 0; } /* Inner pages: header is always solid, there is no dark hero to sit on. */ body:not(.home) .dr-header { background: rgba(var(--bg-deep-rgb), .92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); } /* 5. Hero ---------------------------------------------------------------- */ .dr-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 140px 0 0; overflow: hidden; isolation: isolate; } .dr-hero__media { position: absolute; inset: 0; z-index: -3; } .dr-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%; } .dr-hero__media::after { content: ""; position: absolute; inset: 0; background: var(--grad-hero-overlay); } .dr-hero__glow { position: absolute; inset: 0; z-index: -2; background: var(--grad-hero-glow); pointer-events: none; } .dr-hero__content { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) clamp(48px, 6vw, 80px); } /* Hero strip: three columns over the bottom of the photo (reference: appointment / emergency / hours). */ .dr-hero__strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); background: rgba(var(--bg-deep-rgb), .55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 255, 255, .12); } .dr-hero__strip-item { display: flex; gap: 16px; padding: 28px 28px 28px 0; color: var(--text-on-dark); border-right: 1px solid rgba(255, 255, 255, .12); } .dr-hero__strip-item + .dr-hero__strip-item { padding-left: 28px; } .dr-hero__strip-item:last-child { border-right: 0; } a.dr-hero__strip-item:hover strong { color: var(--accent-bright); } .dr-hero__strip-icon { flex: 0 0 auto; color: var(--accent-bright); padding-top: 2px; } .dr-hero__strip-body { display: flex; flex-direction: column; gap: 6px; } .dr-hero__strip-body strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; transition: color .3s; } .dr-hero__strip-body > span { color: rgba(246, 248, 251, .78); font-size: .95rem; line-height: 1.5; } .dr-hero__hours { display: grid; grid-template-columns: auto auto; gap: 2px 18px; } .dr-hero__hours em { font-style: normal; } .dr-hero__hours b { font-weight: 500; color: var(--text-on-dark); } .dr-hero__title { font-size: clamp(2.5rem, 6.2vw, 4.5rem); line-height: 1.02; max-width: 14ch; margin-bottom: 1.25rem; text-wrap: balance; } .dr-hero__lead { max-width: 48ch; margin-bottom: 2rem; color: rgba(246, 248, 251, .82); } .dr-hero__actions { gap: 14px; margin-bottom: 1.5rem; } .dr-hero__note { font-size: .9rem; color: var(--text-muted); } /* 6. Sections ------------------------------------------------------------ */ .dr-section { position: relative; padding: var(--section-y) var(--gutter); background: var(--grad-section); } .dr-section--cream { background: var(--surface-light); color: var(--text-on-light); } .dr-section--cream a { color: var(--accent-deep); } .dr-section__head { max-width: 42rem; margin-bottom: clamp(40px, 5vw, 64px); } .dr-section__head h2 { text-wrap: balance; } /* 7. Cards and media ----------------------------------------------------- */ .dr-card { background: rgba(var(--bg-card-rgb), .55); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--radius); padding: 28px; transition: border-color .35s, transform .35s var(--ease), background-color .35s; } .dr-card:hover { border-color: rgba(var(--accent-bright-rgb), .45); transform: translateY(-4px); } .dr-media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-card); } .dr-media img { width: 100%; height: 100%; object-fit: cover; } .dr-media::after { content: ""; position: absolute; inset: 0; background: var(--grad-image-fade); pointer-events: none; } .dr-section--cream .dr-media::after { background: var(--grad-image-fade-cream); } .dr-media--portrait { aspect-ratio: 4 / 5; } .dr-media--tall { aspect-ratio: 4 / 5; } .dr-media--wide { aspect-ratio: 3 / 2; } .dr-media--map { aspect-ratio: 8 / 3; margin-top: clamp(40px, 5vw, 64px); } /* Map in Google's own colours, no filter and no shade over it (Ahmad, 2026-10-08: "look as it shows on google map"). */ .dr-media--map iframe { width: 100%; height: 100%; border: 0; display: block; } .dr-media.dr-media--map::after { display: none; } /* 8a. Trust strip -------------------------------------------------------- */ .dr-trust { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); } .dr-trust__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 32px 0; } .dr-trust__item { display: flex; flex-direction: column; gap: 6px; } .dr-trust__num { font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; color: #fff; } .dr-trust__num--text { font-size: clamp(1.9rem, 3vw, 2.6rem); } .dr-trust__label { font-size: .95rem; color: var(--text-muted); max-width: 26ch; } /* 8b. Services: section pins, cards travel sideways (desktop, GSAP). Mobile: swipe track. */ .dr-services { padding-left: 0; padding-right: 0; } .dr-services__pin { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: 40px 0; } .dr-services__head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; max-width: 1320px; width: 100%; margin: 0 auto 40px; padding: 0 var(--gutter); } .dr-services__head h2 { margin: 0; } .dr-services__head .dr-lead { margin: 0; } .dr-services__viewport { width: 100%; overflow: hidden; } .dr-services__track { display: flex; gap: 24px; padding: 0 max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); width: max-content; } .dr-service { flex: 0 0 auto; width: clamp(280px, 26vw, 360px); display: flex; flex-direction: column; background: rgba(var(--bg-card-rgb), .55); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--radius); overflow: hidden; transition: border-color .35s, transform .35s var(--ease); } .dr-service:hover { border-color: rgba(var(--accent-bright-rgb), .45); transform: translateY(-4px); } .dr-service__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .dr-service__media img { width: 100%; height: 100%; object-fit: cover; } .dr-service__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-card-rgb), 0) 55%, rgba(var(--bg-card-rgb), .95) 100%); } .dr-service__body { padding: 8px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .dr-service__index { font-family: var(--font-display); font-size: 1rem; color: var(--accent-bright); } .dr-service__title { margin: 0; } .dr-service__text { margin: 0 0 8px; color: var(--text-muted); font-size: .95rem; flex: 1; } .dr-services__hint { max-width: 1320px; margin: 24px auto 0; padding: 0 var(--gutter); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } /* 8c. Doctors ------------------------------------------------------------ */ .dr-doctors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .dr-doctors__grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; } .dr-doctors__grid--4 .dr-doctor__name { font-size: 1.3rem; } .dr-doctor__name { margin: 20px 0 4px; font-size: 1.5rem; } .dr-doctor__role { color: var(--accent-deep); font-weight: 600; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; } .dr-doctor__bio { color: var(--text-muted-light); font-size: .97rem; } /* 8d. Why us ------------------------------------------------------------- */ .dr-why__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .dr-why__list { display: grid; gap: 18px; margin-top: 28px; } .dr-why__list li { padding-left: 28px; position: relative; color: var(--text-muted); line-height: 1.55; } .dr-why__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--grad-button); } .dr-why__list strong { color: var(--text-on-dark); } /* 8e. Gallery ------------------------------------------------------------ */ .dr-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .dr-gallery__caption { margin: 14px 0 0; color: var(--text-muted); font-size: .95rem; } /* Before and after pairs (2026-10-08): two 2:1 halves stacked, the section colour shows as the divider. No shade over the photos, so the result is shown as it is. */ .dr-ba { display: grid; gap: 6px; border-radius: var(--radius); overflow: hidden; } .dr-ba__half { position: relative; margin: 0; aspect-ratio: 2 / 1; overflow: hidden; background: var(--bg-card); } .dr-ba__half img { width: 100%; height: 100%; object-fit: cover; display: block; } .dr-ba__tag { position: absolute; left: 12px; top: 12px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #ffffff; background: rgba(var(--bg-deep-rgb), .62); } .dr-ba__tag--after { color: var(--bg-deep); background: rgba(255, 255, 255, .9); } /* 8f. Reviews ------------------------------------------------------------ */ .dr-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .dr-review { background: #fff; border-radius: var(--radius); padding: 32px; box-shadow: 0 20px 40px -30px rgba(28, 42, 68, .35); } .dr-review__stars { color: #D9A441; letter-spacing: .1em; margin-bottom: 14px; } .dr-review__quote { margin: 0 0 20px; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.35; color: var(--text-on-light); } .dr-review__meta { margin: 0; font-size: .9rem; color: var(--text-muted-light); } .dr-review__meta strong { color: var(--text-on-light); margin-right: 8px; } /* 8g. FAQ ---------------------------------------------------------------- */ .dr-faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .dr-faq__list { display: grid; gap: 12px; } .dr-faq__item { border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-sm); background: rgba(var(--bg-card-rgb), .4); padding: 0 24px; transition: border-color .3s; } .dr-faq__item[open] { border-color: rgba(var(--accent-bright-rgb), .45); } .dr-faq__item summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 600; position: relative; } .dr-faq__item summary::-webkit-details-marker { display: none; } .dr-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--accent-bright); transition: transform .3s; } .dr-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .dr-faq__item p { padding-bottom: 20px; color: var(--text-muted); } /* 8h. Contact ------------------------------------------------------------ */ .dr-contact { overflow: hidden; isolation: isolate; } .dr-contact__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 75% 30%, rgba(var(--accent-bright-rgb), .22) 0%, rgba(var(--accent-bright-rgb), 0) 70%); pointer-events: none; } .dr-contact__grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .dr-contact__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 28px 0 32px; } .dr-contact__facts dt { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 6px; } .dr-contact__facts dd { margin: 0; color: var(--text-on-dark); line-height: 1.5; } .dr-contact__form { padding: 32px; } .dr-form { display: grid; gap: 14px; } .dr-form h3 { margin-bottom: 4px; } .dr-form label { display: grid; gap: 6px; font-size: .85rem; color: var(--text-muted); } .dr-form input, .dr-form textarea { width: 100%; padding: 12px 14px; border-radius: 10px; font: inherit; font-size: 1rem; background: rgba(var(--bg-deep-rgb), .6); border: 1px solid rgba(255, 255, 255, .12); color: var(--text-on-dark); } .dr-form input:focus, .dr-form textarea:focus { outline: 2px solid var(--accent-bright); outline-offset: 0; border-color: transparent; } .dr-form__note { font-size: .8rem; color: var(--text-muted); margin: 0; } /* 9. Footer and mobile bar ---------------------------------------------- */ .dr-footer { background: var(--bg-deep); padding: clamp(48px, 6vw, 80px) var(--gutter) 40px; border-top: 1px solid rgba(255, 255, 255, .06); } .dr-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } .dr-footer__brand img { width: 220px; margin-bottom: 16px; } .dr-footer__brand p, .dr-footer__col p, .dr-footer__col li { color: var(--text-muted); font-size: .95rem; line-height: 1.6; } .dr-footer__col h4 { font-family: var(--font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark); margin-bottom: 12px; } .dr-footer__col a { color: var(--text-muted); } .dr-footer__col a:hover { color: var(--accent-bright); } .dr-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .06); } .dr-footer__bottom p { margin: 0; font-size: .85rem; color: var(--text-muted); } .dr-footer__bottom a { color: var(--text-muted); } .dr-mobile-bar { display: none; } /* 10. Motion (initial states; JS animates from these) ------------------- */ .dr-motion [data-reveal] { opacity: 0; transform: translateY(28px); } .dr-motion [data-reveal="stagger"] { opacity: 1; transform: none; } .dr-motion [data-reveal="stagger"] > * { opacity: 0; transform: translateY(28px); } .dr-motion .dr-hero__title { visibility: hidden; } .dr-motion .dr-hero__title.is-split { visibility: visible; } .dr-img-scale img { transform-origin: center; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .dr-motion [data-reveal], .dr-motion [data-reveal="stagger"] > * { opacity: 1; transform: none; } .dr-motion .dr-hero__title { visibility: visible; } .dr-card, .dr-btn .wp-block-button__link { transition: none; } } /* 11. Mobile and tablet ------------------------------------------------- */ @media (max-width: 1023px) { .dr-why__grid, .dr-faq__grid, .dr-contact__grid, .dr-services__head { grid-template-columns: 1fr; } .dr-services__pin { min-height: 0; } .dr-services__viewport { overflow-x: auto; scrollbar-width: none; } .dr-services__hint { display: none; } .dr-trust__list { grid-template-columns: repeat(2, 1fr); } .dr-doctors__grid, .dr-doctors__grid--4, .dr-reviews__grid, .dr-gallery__grid { grid-template-columns: repeat(2, 1fr); } .dr-footer__grid { grid-template-columns: 1fr 1fr; } .dr-header .dr-header__cta { display: none; } } @media (max-width: 767px) { :root { --section-y: 64px; } body { padding-bottom: 72px; } .dr-hero { min-height: 0; padding-top: 110px; } .dr-hero__strip { grid-template-columns: 1fr; padding: 0 var(--gutter); } .dr-hero__strip-item { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); padding: 20px 0; } .dr-hero__strip-item + .dr-hero__strip-item { padding-left: 0; } .dr-hero__strip-item:last-child { border-bottom: 0; } .dr-hero__media img { object-position: 60% 30%; } .dr-hero__title { font-size: 2.5rem; max-width: 12ch; } .dr-hero__actions { flex-direction: column; align-items: stretch; } .dr-hero__actions .wp-block-button, .dr-hero__actions .wp-block-button__link { width: 100%; } .dr-trust__list { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 24px 0; } /* Services become a horizontal swipe track (animation 4). */ .dr-services__pin { min-height: 0; padding: 0; } .dr-services__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .dr-services__viewport::-webkit-scrollbar { display: none; } .dr-services__track { gap: 14px; padding: 4px var(--gutter) 16px; } .dr-service { width: 78vw; scroll-snap-align: start; } .dr-services__hint { display: none; } .dr-doctors__grid, .dr-doctors__grid--4, .dr-reviews__grid, .dr-gallery__grid { grid-template-columns: 1fr; } .dr-media--map { aspect-ratio: 4 / 3; } .dr-contact__facts { grid-template-columns: 1fr; } .dr-contact__form { padding: 24px; } .dr-footer__grid { grid-template-columns: 1fr; gap: 28px; } .dr-footer__bottom { flex-direction: column; } /* Sticky bottom bar: Call and Book. */ .dr-mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(var(--bg-deep-rgb), .92); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, .08); } .dr-mobile-bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; font-weight: 600; color: #fff; } .dr-mobile-bar__call { border: 1px solid rgba(255, 255, 255, .3); } .dr-mobile-bar__book { background: var(--grad-button); } } /* 12. Reference treatment (2026-09-22): corner glows, light fade, gradient words, pills, arrow buttons */ .dr-section { background: var(--bg-deep); isolation: isolate; } .dr-section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 60% at 0% 0%, rgba(var(--glow-rgb), .55) 0%, rgba(var(--glow-rgb), 0) 70%), radial-gradient(45% 55% at 100% 100%, rgba(var(--glow-rgb), .42) 0%, rgba(var(--glow-rgb), 0) 70%); } .dr-main > section:nth-of-type(even)::before { background: radial-gradient(50% 60% at 100% 0%, rgba(var(--glow-rgb), .5) 0%, rgba(var(--glow-rgb), 0) 70%), radial-gradient(45% 55% at 0% 100%, rgba(var(--glow-rgb), .38) 0%, rgba(var(--glow-rgb), 0) 70%); } .dr-section--cream { background: var(--grad-light); color: var(--text-on-light); } .dr-section--cream::before { display: none; } .dr-section--cream { --btn-bg: var(--bg-deep); --btn-fg: #ffffff; --btn-icon-bg: #ffffff; --btn-icon-fg: var(--bg-deep); } .dr-hero__glow { background: radial-gradient(60% 55% at 22% 18%, rgba(var(--glow-rgb), .45) 0%, rgba(var(--glow-rgb), 0) 70%), radial-gradient(40% 50% at 100% 100%, rgba(var(--glow-rgb), .35) 0%, rgba(var(--glow-rgb), 0) 70%); } .dr-hero__media::after { background: linear-gradient(157deg, rgba(var(--bg-deep-rgb), .72) 10%, rgba(var(--bg-deep-rgb), .18) 50%, rgba(var(--bg-deep-rgb), .8) 100%); } /* Hero video plays everywhere (muted, inline). Phones in Low Power Mode fall back to the poster on their own. */ .dr-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; } @media (prefers-reduced-motion: reduce) { .dr-hero__video { display: none !important; } } .dr-hero__strip { background: rgba(var(--bg-deep-rgb), .62); } .dr-contact__glow { display: none; } /* Gradient words in headings (not on the split hero H1). */ .dr-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .dr-section--cream .dr-grad { background: linear-gradient(90deg, #2E4874 0%, #34507F 60%, #5B78A8 100%); -webkit-background-clip: text; background-clip: text; } /* Eyebrow becomes a pill with an asterisk, like the reference labels. */ .dr-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(var(--bg-deep-rgb), .35); font-size: .9rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-on-dark); margin-bottom: 1.25rem; } .dr-eyebrow::before { content: "\2733"; font-size: 1rem; line-height: 1; color: var(--text-on-dark); } .dr-section--cream .dr-eyebrow { border-color: rgba(var(--bg-deep-rgb), .3); background: rgba(255, 255, 255, .5); color: var(--text-on-light); } .dr-section--cream .dr-eyebrow::before { color: var(--text-on-light); } /* Buttons: pill with an arrow circle on the right. */ .dr-btn .wp-block-button__link, .dr-btn--inline { padding: 6px 6px 6px 26px; gap: 14px; min-height: 56px; } .dr-btn--primary .wp-block-button__link, .dr-btn--primary.dr-btn--inline { background: var(--btn-bg); color: var(--btn-fg); } .dr-btn--primary .wp-block-button__link::after, .dr-btn--primary.dr-btn--inline::after { content: ""; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--btn-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .35s var(--ease), background-color .3s; } .dr-section--cream .dr-btn--primary .wp-block-button__link::after, .dr-section--cream .dr-btn--primary.dr-btn--inline::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071C21' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); } .dr-btn--primary .wp-block-button__link:hover, .dr-btn--primary.dr-btn--inline:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(var(--glow-rgb), .6); } .dr-btn--primary .wp-block-button__link:hover::after, .dr-btn--primary.dr-btn--inline:hover::after { transform: rotate(45deg); } .dr-btn--ghost .wp-block-button__link, .dr-btn--ghost.dr-btn--inline { padding: 0 26px; border-color: rgba(255, 255, 255, .35); } .dr-btn--ghost .wp-block-button__link:hover, .dr-btn--ghost.dr-btn--inline:hover { border-color: #fff; box-shadow: none; background: rgba(255, 255, 255, .08); } .dr-mobile-bar__book { background: #fff; color: var(--bg-deep) !important; } .dr-link { color: var(--text-on-dark); } .dr-link:hover { color: var(--accent-bright); } .dr-section--cream .dr-link { color: var(--text-on-light); } /* Cards on dark: deeper glass, like the reference rows. */ .dr-card, .dr-service, .dr-faq__item { background: rgba(var(--bg-deep-rgb), .55); border-color: rgba(255, 255, 255, .08); } .dr-service__media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), 0) 55%, rgba(var(--bg-deep-rgb), .92) 100%); } .dr-review { box-shadow: 0 24px 50px -30px rgba(var(--bg-deep-rgb), .45); } .dr-trust__list { border-color: rgba(255, 255, 255, .1); } /* 13. Light contact section and the Contact page (reference: teal mist to white, pale teal fields) */ .dr-section--cream .dr-form input, .dr-section--cream .dr-form textarea { background: rgba(var(--glow-rgb), .12); border-color: rgba(var(--bg-deep-rgb), .08); color: var(--text-on-light); } .dr-section--cream .dr-form input::placeholder, .dr-section--cream .dr-form textarea::placeholder { color: rgba(var(--bg-deep-rgb), .45); } .dr-section--cream .dr-form input:focus, .dr-section--cream .dr-form textarea:focus { outline-color: var(--accent-deep); } .dr-section--cream .dr-form label { color: var(--text-on-light); font-weight: 600; font-size: 1rem; } .dr-section--cream .dr-form__note { color: var(--text-muted-light); } .dr-section--cream .dr-contact__form { background: rgba(255, 255, 255, .55); border-color: rgba(var(--bg-deep-rgb), .08); } .dr-section--cream .dr-contact__facts dt { color: var(--accent-deep); } .dr-section--cream .dr-contact__facts dd, .dr-section--cream .dr-contact__facts a { color: var(--text-on-light); } .dr-section--cream .dr-lead { color: var(--text-muted-light); } .dr-main--page { padding-top: 0; } .dr-cpage { padding-top: calc(var(--section-y) + 110px); } .dr-cpage__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); } .dr-cpage__title { margin: 0; font-size: clamp(3rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.03em; } .dr-cpage__intro { margin: 0; max-width: 44ch; justify-self: end; } .dr-cpage__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .dr-form--page { gap: 20px; } .dr-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .dr-form input[type="date"] { min-height: 52px; } .dr-form__check { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; font-weight: 500 !important; } .dr-form__check input { width: 22px; height: 22px; accent-color: var(--bg-deep); margin: 0; } .dr-form__check a { text-decoration: underline; color: inherit; } .dr-form--page button.dr-btn--inline { width: auto; justify-self: start; } .dr-media--plain::after { display: none; } .dr-cpage__photo { aspect-ratio: 4 / 5; border-radius: 28px; } .dr-cpage-info__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .dr-media--nomargin { margin-top: 0; aspect-ratio: 4 / 3; } @media (max-width: 1023px) { .dr-cpage__head, .dr-cpage__grid, .dr-cpage-info__grid { grid-template-columns: 1fr; } .dr-cpage__intro { justify-self: start; } } @media (max-width: 767px) { .dr-form__row { grid-template-columns: 1fr; } /* Clears the logo on phones (210px wide, bottom at 137px); 120px let it touch the title (Ahmad, 2026-10-28). */ .dr-cpage { padding-top: 176px; } .dr-form--page button.dr-btn--inline { width: 100%; } } /* Reviews on dark */ .dr-reviews:not(.dr-section--cream) .dr-review { background: rgba(var(--bg-deep-rgb), .55); border: 1px solid rgba(255, 255, 255, .08); box-shadow: none; } .dr-reviews:not(.dr-section--cream) .dr-review__quote { color: var(--text-on-dark); } .dr-reviews:not(.dr-section--cream) .dr-review__meta { color: var(--text-muted); } .dr-reviews:not(.dr-section--cream) .dr-review__meta strong { color: var(--text-on-dark); } .dr-section--cream .dr-gallery__caption { color: var(--text-muted-light); } /* 14. Review 4 fixes (2026-09-22): form sizing, full bleed header gradient, nav size, light trust strip, light service cards */ .dr-form input, .dr-form textarea, .dr-form button { box-sizing: border-box; } .dr-form input { min-height: 54px; } .dr-form input[type="date"] { min-height: 54px; line-height: 1.2; } .dr-form__row { align-items: start; } /* Contact page top fade (2026-10-08, Ahmad: the old one showed lines). Same recipe as Royal Dental's approved contact page: ONE colour (the brand's deep teal) diluted to white along the curve measured row by row from Ahmad's reference (Desktop/Contact sheet_Gradient.png), 29 opaque stops so no turn in the curve shows as a line, and a 4.5% grain layer that breaks up 8 bit banding. The reference turns sharply at the foot of its menu (hidden there by a hairline); that turn is smoothed out here, because it showed as an edge under our header. Stacked layouts (<=1023px) run the same curve a little shorter. Rebrand by changing --fade-top and --fade-mid only. */ .dr-cpage { /* Top: the footer colour (Ahmad, 2026-10-08), so header, page top and footer match. It eases into the brand teal by about a third of the way down, then the teal fades to white. The footer colour alone, diluted to white, turned the middle grey; the teal keeps it teal. */ --fade-top: var(--bg-deep); --fade-mid: color-mix(in srgb, var(--glow) 62%, var(--bg-deep)); --fade: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 100.0%, var(--fade-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 98.0%, var(--fade-mid)) 96.8%, #fff) 19.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 92.2%, var(--fade-mid)) 93.5%, #fff) 32.4px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 83.8%, var(--fade-mid)) 90.3%, #fff) 43.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 72.5%, var(--fade-mid)) 86.9%, #fff) 52.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 61.0%, var(--fade-mid)) 83.8%, #fff) 61.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 48.0%, var(--fade-mid)) 80.5%, #fff) 69.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 35.6%, var(--fade-mid)) 77.3%, #fff) 78px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 24.3%, var(--fade-mid)) 74.2%, #fff) 86.4px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 14.5%, var(--fade-mid)) 71.1%, #fff) 94.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 6.5%, var(--fade-mid)) 67.9%, #fff) 103.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 1.2%, var(--fade-mid)) 64.5%, #fff) 111.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 61.5%, #fff) 118.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 58.4%, #fff) 126px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 55.4%, #fff) 133.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 52.3%, #fff) 140.4px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 49.2%, #fff) 147.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 46.2%, #fff) 154.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 43.2%, #fff) 162px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 39.7%, #fff) 170.4px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 36.4%, #fff) 178.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 33.1%, #fff) 187.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 30.0%, #fff) 195.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 26.6%, #fff) 205.2px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 23.5%, #fff) 214.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 20.2%, #fff) 225.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 17.0%, #fff) 237.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 13.9%, #fff) 250.8px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 10.8%, #fff) 266.4px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 7.7%, #fff) 285.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 4.8%, #fff) 309.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 2.8%, #fff) 333.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 1.5%, #fff) 357.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 0.9%, #fff) 381.6px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 0.5%, #fff) 405.6px, #fff 428.4px); --fade-h: 429px; background: var(--fade) top / 100% var(--fade-h) no-repeat, #ffffff; } /* The intro sits on the pale part of the fade; one step darker keeps it readable (4.5:1 or more) at every width. */ .dr-cpage .dr-cpage__intro { color: color-mix(in srgb, var(--text-muted-light) 65%, var(--text-on-light)); } .dr-cpage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fade-h) + 80px); z-index: -1; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); } @media (max-width: 1023px) { .dr-cpage { --fade: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 100.0%, var(--fade-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 98.0%, var(--fade-mid)) 96.8%, #fff) 16px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 92.2%, var(--fade-mid)) 93.5%, #fff) 27px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 83.8%, var(--fade-mid)) 90.3%, #fff) 36px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 72.5%, var(--fade-mid)) 86.9%, #fff) 44px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 61.0%, var(--fade-mid)) 83.8%, #fff) 51px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 48.0%, var(--fade-mid)) 80.5%, #fff) 58px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 35.6%, var(--fade-mid)) 77.3%, #fff) 65px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 24.3%, var(--fade-mid)) 74.2%, #fff) 72px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 14.5%, var(--fade-mid)) 71.1%, #fff) 79px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 6.5%, var(--fade-mid)) 67.9%, #fff) 86px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 1.2%, var(--fade-mid)) 64.5%, #fff) 93px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 61.5%, #fff) 99px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 58.4%, #fff) 105px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 55.4%, #fff) 111px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 52.3%, #fff) 117px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 49.2%, #fff) 123px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 46.2%, #fff) 129px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 43.2%, #fff) 135px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 39.7%, #fff) 142px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 36.4%, #fff) 149px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 33.1%, #fff) 156px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 30.0%, #fff) 163px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 26.6%, #fff) 171px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 23.5%, #fff) 179px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 20.2%, #fff) 188px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 17.0%, #fff) 198px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 13.9%, #fff) 209px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 10.8%, #fff) 222px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 7.7%, #fff) 238px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 4.8%, #fff) 258px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 2.8%, #fff) 278px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 1.5%, #fff) 298px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 0.9%, #fff) 318px, color-mix(in srgb, color-mix(in srgb, var(--fade-top) 0%, var(--fade-mid)) 0.5%, #fff) 338px, #fff 357px); --fade-h: 357px; } } body:has(.dr-cpage) .dr-header { background: transparent; backdrop-filter: none; box-shadow: none; } body:has(.dr-cpage) .dr-header.is-scrolled { background: rgba(var(--bg-deep-rgb), .82); backdrop-filter: blur(14px); } .dr-cpage__title, .dr-cpage .dr-form label, .dr-cpage .dr-form__check { color: var(--text-on-light); } /* Nav text a step bigger. */ .dr-nav .wp-block-navigation-item__content { font-size: 1.05rem; font-weight: 500; } .dr-nav { gap: 32px; } /* Trust strip on light. */ .dr-trust.dr-section--cream { background: var(--grad-light); } .dr-section--cream .dr-trust__list { border-color: rgba(var(--bg-deep-rgb), .12); } .dr-section--cream .dr-trust__num { color: var(--text-on-light); } .dr-section--cream .dr-trust__label { color: var(--text-muted-light); } /* Service cards: light with a soft gradient, dark text. */ .dr-service { background: linear-gradient(180deg, #FFFFFF 0%, #EBEFF5 100%); border: 1px solid rgba(255, 255, 255, .6); color: var(--text-on-light); } .dr-service:hover { border-color: rgba(var(--glow-rgb), .5); } .dr-service__media::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .92) 100%); } .dr-service__index { color: var(--accent-deep); } .dr-service__title { color: var(--text-on-light); } .dr-service__text { color: var(--text-muted-light); } .dr-service .dr-link { color: var(--text-on-light); } .dr-service .dr-link:hover { color: var(--accent-deep); } /* 15. Review 5 (2026-09-22): glassy hero strip, stats + services as one light sheet, full image service cards, new rhythm */ .dr-hero__strip { background: rgba(255, 255, 255, .12); border-top: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .dr-hero__strip-item { border-right-color: rgba(255, 255, 255, .25); } .dr-hero__strip-body > span { color: rgba(255, 255, 255, .85); } /* Stats strip fades teal mist to white; services continues white to teal mist, so the two read as one sheet. */ .dr-trust.dr-section--cream { background: linear-gradient(180deg, #D3DBE7 0%, #EBEFF5 55%, #FFFFFF 100%); padding-bottom: 24px; } .dr-section--cream .dr-trust__list { border-bottom: 0; } .dr-services.dr-section--cream { background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F8 45%, #D3DBE7 100%); } .dr-services.dr-section--cream::before { display: none; } .dr-services.dr-section--cream .dr-services__hint { color: var(--text-muted-light); } /* Service cards: the photo fills the card, text sits on a bottom up gradient. */ .dr-service { position: relative; aspect-ratio: 3 / 4; display: block; overflow: hidden; background: var(--bg-deep); border: 0; color: #fff; box-shadow: 0 30px 50px -30px rgba(var(--bg-deep-rgb), .55); } .dr-service__media { position: absolute; inset: 0; aspect-ratio: auto; } .dr-service__media img { width: 100%; height: 100%; object-fit: cover; } .dr-service__media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), 0) 30%, rgba(var(--bg-deep-rgb), .55) 62%, rgba(var(--bg-deep-rgb), .96) 100%); } .dr-service__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; gap: 6px; flex: none; } .dr-service__index { color: var(--accent-bright); } .dr-service__title { color: #fff; font-size: 1.35rem; } .dr-service__text { color: rgba(255, 255, 255, .82); } .dr-service .dr-link { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); } .dr-service .dr-link:hover { color: var(--accent-bright); } /* Doctors on dark. */ .dr-doctors:not(.dr-section--cream) .dr-doctor__name { color: var(--text-on-dark); } .dr-doctors:not(.dr-section--cream) .dr-doctor__role { color: var(--accent-bright); } .dr-doctors:not(.dr-section--cream) .dr-doctor__bio { color: var(--text-muted); } /* Why us on light. */ .dr-why.dr-section--cream .dr-why__list li { color: var(--text-muted-light); } .dr-why.dr-section--cream .dr-why__list strong { color: var(--text-on-light); } /* Gallery on dark. */ .dr-gallery:not(.dr-section--cream) .dr-gallery__caption { color: var(--text-muted); } /* 16. Review 6 (2026-09-22): no dead space around services, seamless section edges, lighter dark sections */ .dr-trust.dr-section--cream { padding-top: clamp(32px, 4vw, 48px); padding-bottom: 8px; } .dr-services.dr-section--cream { padding-top: 0; padding-bottom: 0; } .dr-services__pin { min-height: 100svh; justify-content: center; padding: 24px 0 32px; } .dr-services__head { margin-bottom: 28px; } .dr-service { width: auto; height: min(62svh, 560px); aspect-ratio: 3 / 4; } .dr-services__hint { margin-top: 18px; } @media (max-width: 1023px) { .dr-services__pin { min-height: 0; padding: 32px 0 48px; } .dr-service { width: clamp(260px, 60vw, 340px); height: auto; } } @media (max-width: 767px) { .dr-service { width: 78vw; } } /* Dark sections that sit between light ones: start from the light tone above, settle on a softer deep teal, and lift again at the bottom so the next light section does not hit a hard edge. */ .dr-doctors:not(.dr-section--cream), .dr-gallery:not(.dr-section--cream), .dr-faq:not(.dr-section--cream) { background: linear-gradient(180deg, var(--bleed-from, #FFFFFF) 0%, #34507F 9%, #2E4166 26%, #1B2741 60%, #233452 88%, #34507F 100%); } .dr-doctors:not(.dr-section--cream) { --bleed-from: #D3DBE7; } .dr-doctors:not(.dr-section--cream)::before, .dr-gallery:not(.dr-section--cream)::before, .dr-faq:not(.dr-section--cream)::before { background: radial-gradient(50% 50% at 100% 40%, rgba(var(--glow-rgb), .35) 0%, rgba(var(--glow-rgb), 0) 70%); } /* Light sections start from the teal the dark section ended on. */ .dr-why.dr-section--cream, .dr-reviews.dr-section--cream, .dr-contact.dr-section--cream { background: linear-gradient(180deg, #34507F 0%, #A6B6CF 10%, #EBEFF5 48%, #FFFFFF 100%); } /* 17. Mobile menu drawer (2026-09-22). backdrop-filter on the header made it the containing block for the fixed overlay, so the overlay only covered the header. Drop the filter while the menu is open. */ html.has-modal-open .dr-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .dr-nav .wp-block-navigation__responsive-container.is-menu-open { left: auto; right: 0; width: min(75vw, 420px); background: linear-gradient(180deg, #D3DBE7 0%, #EBEFF5 45%, #FFFFFF 100%); box-shadow: -30px 0 60px rgba(var(--bg-deep-rgb), .35); padding: 96px 28px 32px; overflow-y: auto; box-sizing: border-box; } /* Dim the page outside the drawer with a huge shadow spread (a fixed pseudo element landed inside the drawer on phones). */ .dr-nav .wp-block-navigation__responsive-container.is-menu-open::before { content: none; } .dr-nav .wp-block-navigation__responsive-container.is-menu-open { box-shadow: 0 0 0 100vmax rgba(var(--bg-deep-rgb), .55), -30px 0 60px rgba(var(--bg-deep-rgb), .35); } .dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; } .dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 18px; align-items: flex-start; } .dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--text-on-light); font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; } .dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--accent-deep); } .dr-nav .wp-block-navigation__responsive-container-close { color: var(--text-on-light); top: 22px; right: 22px; } .dr-nav .wp-block-navigation__responsive-container.is-menu-open a:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 6px; border-radius: 4px; } .dr-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; } .dr-nav .wp-block-navigation__responsive-container-open { padding: 6px; } .dr-nav .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; } /* 18. Review 7 (2026-09-22): the section bleed looked muddy. Back to clean separated sections: dark sections on the softer deep teal with corner glows, light sections on their own mist to white fade. */ .dr-doctors:not(.dr-section--cream), .dr-gallery:not(.dr-section--cream), .dr-faq:not(.dr-section--cream) { background: var(--bg-section); } .dr-doctors:not(.dr-section--cream)::before, .dr-gallery:not(.dr-section--cream)::before, .dr-faq:not(.dr-section--cream)::before { background: radial-gradient(55% 60% at 0% 0%, rgba(var(--glow-rgb), .45) 0%, rgba(var(--glow-rgb), 0) 70%), radial-gradient(45% 55% at 100% 100%, rgba(var(--glow-rgb), .35) 0%, rgba(var(--glow-rgb), 0) 70%); } .dr-gallery:not(.dr-section--cream)::before { background: radial-gradient(50% 60% at 100% 0%, rgba(var(--glow-rgb), .42) 0%, rgba(var(--glow-rgb), 0) 70%), radial-gradient(45% 55% at 0% 100%, rgba(var(--glow-rgb), .3) 0%, rgba(var(--glow-rgb), 0) 70%); } .dr-why.dr-section--cream, .dr-reviews.dr-section--cream, .dr-contact.dr-section--cream { background: var(--grad-light); } /* 19. Phone performance (2026-09-23): no blur filters over the video, cheap dim layer, smaller video for phones */ body.dr-motion-ready [data-reveal] { will-change: auto; } .dr-nav .wp-block-navigation__responsive-container.is-menu-open { box-shadow: -30px 0 60px rgba(var(--bg-deep-rgb), .35); } /* Dim layer lives on the body, below the fixed header (z 100), so the drawer inside the header always paints above it. */ html.has-modal-open body::before { content: ""; position: fixed; inset: 0; background: rgba(var(--bg-deep-rgb), .55); z-index: 90; pointer-events: none; } @media (max-width: 1023px) { .dr-header, .dr-header.is-scrolled, .dr-hero__strip, .dr-mobile-bar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .dr-header.is-scrolled { background: rgba(var(--bg-deep-rgb), .96); } .dr-hero__strip { background: rgba(var(--bg-deep-rgb), .55); } .dr-mobile-bar { background: rgba(var(--bg-deep-rgb), .96); } .dr-service, .dr-card { transition: none; } .dr-hero__media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .55) 0%, rgba(var(--bg-deep-rgb), .25) 45%, rgba(var(--bg-deep-rgb), .85) 100%); } } /* Reviews as Google reviews, swipeable (2026-10-08, Ahmad). A native scroll track with snap points: swipe on phones, trackpad or the arrow buttons on desktop. Three cards show on desktop, two on tablets, one and a peek of the next on phones so it is clear there is more. */ .dr-greviews__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; } .dr-greviews__summary { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; background: #ffffff; box-shadow: 0 14px 30px -24px rgba(var(--bg-deep-rgb), .5); color: var(--text-on-light); font-size: .95rem; } .dr-greviews__g { display: inline-flex; width: 26px; height: 26px; } .dr-greviews__g svg, .dr-greview__g svg { width: 100%; height: 100%; display: block; } .dr-greviews__label strong { font-weight: 600; } .dr-greviews__score { font-weight: 700; font-size: 1.05rem; margin-left: 4px; } .dr-greviews__stars, .dr-greview__stars { color: #FBBC04; letter-spacing: .06em; } .dr-greviews__nav { display: flex; gap: 10px; } .dr-greviews__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(var(--bg-deep-rgb), .12); background: #ffffff; color: var(--bg-deep); display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; } .dr-greviews__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .dr-greviews__btn:hover:not(:disabled) { background: var(--bg-deep); color: #ffffff; } .dr-greviews__btn:disabled { opacity: .35; cursor: default; } /* The track reaches into the page gutter on both sides: room for the card shadows on desktop, and on phones the next card runs off the screen edge instead of being cut at the gutter. */ .dr-greviews__track { display: flex; gap: 24px; margin: 0 calc(-1 * var(--gutter)) -40px; padding: 6px var(--gutter) 46px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; } .dr-greviews__track::-webkit-scrollbar { display: none; } .dr-greviews__track:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: var(--radius); } .dr-greview { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; padding: 26px 28px 30px; box-shadow: 0 22px 36px -26px rgba(var(--bg-deep-rgb), .42); } /* shadow kept inside the 20px the track has on each side */ .dr-greview__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .dr-greview__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #ffffff; font-weight: 600; font-size: 1.05rem; } .dr-greview__who { display: grid; line-height: 1.3; color: var(--text-on-light); } .dr-greview__who strong { font-weight: 600; } .dr-greview__who span { font-size: .85rem; color: var(--text-muted-light); } .dr-greview__g { margin-left: auto; width: 22px; height: 22px; flex: 0 0 auto; } .dr-greview__stars { margin: 0 0 10px; font-size: 1.05rem; } .dr-greview__text { margin: 0; font-family: var(--font-body); font-size: 1.02rem; line-height: 1.6; font-weight: 400; color: var(--text-on-light); } @media (max-width: 1023px) { .dr-greview { flex-basis: calc((100% - 24px) / 2); } } @media (max-width: 767px) { .dr-greviews__track { gap: 16px; } .dr-greview { flex-basis: 86%; padding: 22px 22px 26px; } .dr-greviews__summary { font-size: .9rem; } .dr-greviews__nav { display: none; } /* phones swipe; the peeking card shows there is more */ } /* Section heads, titles and FAQ (2026-10-09, Ahmad: heads looked like they were floating, questions too small, call button too close to the line above it). 1. WordPress centres every block inside a constrained section, so a head capped at 42rem sat in the middle while the cards below start at the left edge. The head now spans the content width (left edges line up) and only its text is capped. */ .dr-section__head { max-width: 1320px; } .dr-section__head > h2 { max-width: 48rem; } .dr-section__head > .dr-lead { max-width: 42rem; } /* 2. Gutenverse prints "body h2 { font-size: 2rem }", which beat our h2 size and froze every section title at 32px. Back to the design scale: 56px on desktop, 32px on phones (docs/design-direction.md). */ body .dr-section h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); } /* 3. Questions a size up, so they read as questions next to the bigger title. */ .dr-faq__item summary { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.35; padding: 24px 44px 24px 0; } .dr-faq__item p { font-size: 1.02rem; line-height: 1.6; } /* 4. Breathing room between the lead line and the call button under it. */ .dr-section__head .dr-lead + .dr-btn { margin-top: 28px; } /* 5. The bigger titles made the pinned services head taller, and its label slid under the fixed header on 900px tall screens. Desktop only (smaller screens do not pin): keep 96px clear for the header and let the cards give up height on short screens instead (360px minimum, 560px as before at most). */ @media (min-width: 1024px) { .dr-services__pin { padding-top: 96px; } .dr-service { height: clamp(360px, calc(100svh - 400px), 560px); } } /* Section bleeds (2026-10-09, Ahmad: the light sections bled sky blue against the dark ones; bleed the dark blue instead). Same curve as the approved contact page fade (docs/reference/make-contact-fade.py, curve x0.95 on desktop, x0.8 on phones): it starts on the exact colour of the dark neighbour, eases into the brand teal and ends on white, so the join has no line. Down = dark at the top of a light section, up = dark at its bottom. Replaces the sky blue #A6B6CF / #D3DBE7 tints. */ .dr-section--cream { --bleed-dark: var(--bg-section); --bleed-mid: color-mix(in srgb, var(--glow) 62%, var(--bg-deep)); --bleed-down: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 100.0%, var(--bleed-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 98.0%, var(--bleed-mid)) 96.8%, #fff) 15.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 92.2%, var(--bleed-mid)) 93.5%, #fff) 25.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 83.8%, var(--bleed-mid)) 90.3%, #fff) 34.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 72.5%, var(--bleed-mid)) 86.9%, #fff) 41.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 61.0%, var(--bleed-mid)) 83.8%, #fff) 48.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 48.0%, var(--bleed-mid)) 80.5%, #fff) 55.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 35.6%, var(--bleed-mid)) 77.3%, #fff) 61.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 24.3%, var(--bleed-mid)) 74.2%, #fff) 68.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 14.5%, var(--bleed-mid)) 71.1%, #fff) 75px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 6.5%, var(--bleed-mid)) 67.9%, #fff) 81.7px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 1.2%, var(--bleed-mid)) 64.5%, #fff) 88.3px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 61.5%, #fff) 94px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 58.4%, #fff) 99.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 55.4%, #fff) 105.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 52.3%, #fff) 111.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 49.2%, #fff) 116.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 46.2%, #fff) 122.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 43.2%, #fff) 128.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 39.7%, #fff) 134.9px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 36.4%, #fff) 141.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 33.1%, #fff) 148.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 30.0%, #fff) 154.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 26.6%, #fff) 162.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 23.5%, #fff) 170px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 20.2%, #fff) 178.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 17.0%, #fff) 188.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 13.9%, #fff) 198.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 10.8%, #fff) 210.9px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 7.7%, #fff) 226.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 4.8%, #fff) 245.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 2.8%, #fff) 264.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 1.5%, #fff) 283.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.9%, #fff) 302.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.5%, #fff) 321.1px, #fff 339.1px); --bleed-up: linear-gradient(0deg, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 100.0%, var(--bleed-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 98.0%, var(--bleed-mid)) 96.8%, #fff) 15.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 92.2%, var(--bleed-mid)) 93.5%, #fff) 25.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 83.8%, var(--bleed-mid)) 90.3%, #fff) 34.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 72.5%, var(--bleed-mid)) 86.9%, #fff) 41.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 61.0%, var(--bleed-mid)) 83.8%, #fff) 48.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 48.0%, var(--bleed-mid)) 80.5%, #fff) 55.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 35.6%, var(--bleed-mid)) 77.3%, #fff) 61.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 24.3%, var(--bleed-mid)) 74.2%, #fff) 68.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 14.5%, var(--bleed-mid)) 71.1%, #fff) 75px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 6.5%, var(--bleed-mid)) 67.9%, #fff) 81.7px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 1.2%, var(--bleed-mid)) 64.5%, #fff) 88.3px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 61.5%, #fff) 94px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 58.4%, #fff) 99.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 55.4%, #fff) 105.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 52.3%, #fff) 111.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 49.2%, #fff) 116.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 46.2%, #fff) 122.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 43.2%, #fff) 128.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 39.7%, #fff) 134.9px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 36.4%, #fff) 141.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 33.1%, #fff) 148.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 30.0%, #fff) 154.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 26.6%, #fff) 162.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 23.5%, #fff) 170px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 20.2%, #fff) 178.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 17.0%, #fff) 188.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 13.9%, #fff) 198.5px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 10.8%, #fff) 210.9px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 7.7%, #fff) 226.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 4.8%, #fff) 245.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 2.8%, #fff) 264.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 1.5%, #fff) 283.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.9%, #fff) 302.1px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.5%, #fff) 321.1px, #fff 339.1px); --bleed-h: 340px; } @media (max-width: 767px) { .dr-section--cream { --bleed-down: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 100.0%, var(--bleed-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 98.0%, var(--bleed-mid)) 96.8%, #fff) 12.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 92.2%, var(--bleed-mid)) 93.5%, #fff) 21.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 83.8%, var(--bleed-mid)) 90.3%, #fff) 28.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 72.5%, var(--bleed-mid)) 86.9%, #fff) 35.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 61.0%, var(--bleed-mid)) 83.8%, #fff) 40.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 48.0%, var(--bleed-mid)) 80.5%, #fff) 46.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 35.6%, var(--bleed-mid)) 77.3%, #fff) 52px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 24.3%, var(--bleed-mid)) 74.2%, #fff) 57.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 14.5%, var(--bleed-mid)) 71.1%, #fff) 63.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 6.5%, var(--bleed-mid)) 67.9%, #fff) 68.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 1.2%, var(--bleed-mid)) 64.5%, #fff) 74.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 61.5%, #fff) 79.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 58.4%, #fff) 84px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 55.4%, #fff) 88.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 52.3%, #fff) 93.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 49.2%, #fff) 98.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 46.2%, #fff) 103.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 43.2%, #fff) 108px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 39.7%, #fff) 113.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 36.4%, #fff) 119.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 33.1%, #fff) 124.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 30.0%, #fff) 130.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 26.6%, #fff) 136.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 23.5%, #fff) 143.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 20.2%, #fff) 150.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 17.0%, #fff) 158.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 13.9%, #fff) 167.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 10.8%, #fff) 177.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 7.7%, #fff) 190.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 4.8%, #fff) 206.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 2.8%, #fff) 222.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 1.5%, #fff) 238.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.9%, #fff) 254.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.5%, #fff) 270.4px, #fff 285.6px); --bleed-up: linear-gradient(0deg, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 100.0%, var(--bleed-mid)) 100.0%, #fff) 0px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 98.0%, var(--bleed-mid)) 96.8%, #fff) 12.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 92.2%, var(--bleed-mid)) 93.5%, #fff) 21.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 83.8%, var(--bleed-mid)) 90.3%, #fff) 28.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 72.5%, var(--bleed-mid)) 86.9%, #fff) 35.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 61.0%, var(--bleed-mid)) 83.8%, #fff) 40.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 48.0%, var(--bleed-mid)) 80.5%, #fff) 46.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 35.6%, var(--bleed-mid)) 77.3%, #fff) 52px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 24.3%, var(--bleed-mid)) 74.2%, #fff) 57.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 14.5%, var(--bleed-mid)) 71.1%, #fff) 63.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 6.5%, var(--bleed-mid)) 67.9%, #fff) 68.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 1.2%, var(--bleed-mid)) 64.5%, #fff) 74.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 61.5%, #fff) 79.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 58.4%, #fff) 84px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 55.4%, #fff) 88.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 52.3%, #fff) 93.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 49.2%, #fff) 98.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 46.2%, #fff) 103.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 43.2%, #fff) 108px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 39.7%, #fff) 113.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 36.4%, #fff) 119.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 33.1%, #fff) 124.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 30.0%, #fff) 130.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 26.6%, #fff) 136.8px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 23.5%, #fff) 143.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 20.2%, #fff) 150.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 17.0%, #fff) 158.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 13.9%, #fff) 167.2px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 10.8%, #fff) 177.6px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 7.7%, #fff) 190.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 4.8%, #fff) 206.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 2.8%, #fff) 222.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 1.5%, #fff) 238.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.9%, #fff) 254.4px, color-mix(in srgb, color-mix(in srgb, var(--bleed-dark) 0%, var(--bleed-mid)) 0.5%, #fff) 270.4px, #fff 285.6px); --bleed-h: 286px; } } /* Under the hero: starts on the footer colour, the darkest tone of the hero overlay. The stats move down so the numbers and labels sit on the light part of the fade (4.5:1 or better). */ .dr-trust.dr-section--cream { --bleed-dark: var(--bg-deep); background: var(--bleed-down) top / 100% var(--bleed-h) no-repeat, #ffffff; padding-top: 120px; } /* After a dark section: starts on that section's colour. */ .dr-why.dr-section--cream, .dr-reviews.dr-section--cream, .dr-contact.dr-section--cream { background: var(--bleed-down) top / 100% var(--bleed-h) no-repeat, #ffffff; } /* Services runs into Our doctors: dark at its foot. The extra bottom padding keeps the pinned cards and the scroll hint on the white part while the section is pinned. */ .dr-services.dr-section--cream { background: var(--bleed-up) bottom / 100% var(--bleed-h) no-repeat, #ffffff; padding-bottom: 160px; } /* Grain over each bleed (4.5%), as on the contact page, so no 8 bit steps show. */ .dr-trust.dr-section--cream::before, .dr-why.dr-section--cream::before, .dr-reviews.dr-section--cream::before, .dr-contact.dr-section--cream::before, .dr-services.dr-section--cream::before { display: block; content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: calc(var(--bleed-h) + 60px); z-index: -1; pointer-events: none; opacity: .045; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); } .dr-services.dr-section--cream::before { top: auto; bottom: 0; -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent 100%); mask-image: linear-gradient(0deg, #000 55%, transparent 100%); } /* The dark sections' corner glows fade out before their top and bottom edges, so the edge row is the flat section colour that the bleeds start from. */ .dr-doctors:not(.dr-section--cream)::before, .dr-gallery:not(.dr-section--cream)::before, .dr-faq:not(.dr-section--cream)::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%); } /* Why us with a landscape photo (2026-10-09, Ahmad: not vertical). 4:3 image, and the image column takes a little more width so the photo holds its own next to the list. Only when the photo is landscape; a tall photo keeps the original 5fr 6fr. Stacked layouts are unchanged. */ .dr-media--landscape { aspect-ratio: 4 / 3; } @media (min-width: 1024px) { .dr-why__grid:has(.dr-media--landscape) { grid-template-columns: 6fr 5fr; } } /* Two doctors (2026-10-09, Ahmad removed the third). Two large square portraits fill the row instead of leaving an empty third column; one per row on phones. */ .dr-doctors__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .dr-media--square { aspect-ratio: 1 / 1; } @media (max-width: 767px) { .dr-doctors__grid--2 { grid-template-columns: 1fr; } } /* Stats strip under the hero (2026-10-09, Ahmad: no gradient under the hero, less white space, no floating line above the numbers, a thin line under them, a light colour for the strip). A solid light brand teal band that starts right under the hero; its only rule is the thin line along its bottom edge. */ .dr-trust.dr-section--cream { background: color-mix(in srgb, var(--accent) 10%, #ffffff); padding-top: 8px; padding-bottom: 0; } .dr-trust.dr-section--cream::before { display: none; } .dr-section--cream .dr-trust__list { border-top: 0; border-bottom: 1px solid rgba(var(--bg-deep-rgb), .14); } /* Less white between the strip and "What we do": 88px still clears the 72px header when services pins. */ @media (min-width: 1024px) { .dr-services__pin { padding-top: 88px; justify-content: flex-start; } } /* top aligned: tall screens put their spare height under the cards, not above the label */ /* Small on purpose photo: the bottom fade is now a soft dark blue instead of ivory. */ .dr-why.dr-section--cream .dr-media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), 0) 55%, rgba(var(--bg-deep-rgb), .6) 100%); } /* Fewer bleeds (2026-10-09, Ahmad: remove the fade at the top of Why us and at the foot of Services, keep the one on Book a visit). Both sections are plain white again; services loses the 160px it had for its fade. */ .dr-why.dr-section--cream { background: #ffffff; } .dr-services.dr-section--cream { background: #ffffff; padding-bottom: 0; } .dr-why.dr-section--cream::before, .dr-services.dr-section--cream::before { display: none; } /* Map band: same light brand teal as the stats strip, with the same thin rule, here along its top edge at content width. The contact section above ends sooner so no white gap sits between them. */ .dr-contact.dr-section--cream { padding-bottom: clamp(48px, 6vw, 80px); } .dr-mapband.dr-section--cream { background: color-mix(in srgb, var(--accent) 10%, #ffffff); padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); } /* .dr-main prefix: ".dr-main > section:nth-of-type(even)::before" (the corner glows) otherwise wins and paints over the rule. */ .dr-main .dr-mapband.dr-section--cream::before { display: block; content: ""; position: absolute; z-index: 0; top: 0; bottom: auto; height: 1px; left: max(var(--gutter), calc((100% - 1320px) / 2)); right: max(var(--gutter), calc((100% - 1320px) / 2)); background: rgba(var(--bg-deep-rgb), .14); -webkit-mask-image: none; mask-image: none; opacity: 1; } .dr-mapband .dr-media--map { margin-top: 0; } /* Doctors: smaller cards (2026-10-09, Ahmad: the cards were huge). On desktop the heading takes the first third and the two portraits share the other two thirds, about 410px each, so the row is full without big images. */ @media (min-width: 1024px) { .dr-doctors__layout { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; } .dr-doctors__layout .dr-section__head { margin-bottom: 0; } } /* Reviews: no top fade any more (2026-10-09, Ahmad). Book a visit is now the only section with one. */ .dr-reviews.dr-section--cream { background: #ffffff; } .dr-reviews.dr-section--cream::before { display: none; } /* Tablet menu (2026-10-09): WordPress shows the full menu from 600px up, and between 600 and 819px the six links wrapped onto two lines while Book a Visit was hidden. Below 1024px the burger is used instead, and on tablets (768 to 1023px) Book a Visit stays in the header; phones keep the bottom Call and Book bar. */ @media (max-width: 1023px) { .dr-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .dr-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { .dr-header .dr-header__cta { display: flex; } } /* Hero info strip on tablets (2026-10-09): at 768px all three titles broke onto two lines. Between 768 and 1023px the icons step aside and the type is a size smaller, so each title stays on one line. */ @media (min-width: 768px) and (max-width: 1023px) { .dr-hero__strip-icon { display: none; } .dr-hero__strip-body strong { font-size: clamp(.95rem, 2vw, 1.05rem); } .dr-hero__strip-body > span { font-size: .85rem; } .dr-hero__strip-item + .dr-hero__strip-item { padding-left: 20px; } } /* Desktop: the title scales down a little on narrow desktops so "Same day emergencies" stays on one line at 1024px. */ @media (min-width: 1024px) { .dr-hero__strip-body strong { font-size: clamp(1.2rem, 1.7vw, 1.5rem); } } /* Powered by DentalRun (2026-10-09, Ahmad): sits in the footer's bottom row with the copyright and the links, on the same centre line. The approved cream wordmark, unchanged in shape, at the brand minimum of 160px, toned down with opacity so it reads at the same weight as the footer text; full strength on hover. */ .dr-footer__bottom { align-items: baseline; } /* copyright, links and Powered by share one text line */ .dr-footer__powered { margin: 0; } .dr-footer__powered a { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text-muted); font-size: .85rem; text-decoration: none; white-space: nowrap; } /* 96px wide (Ahmad, 2026-10-11: about 40% smaller than 160). The wordmark has no descenders, so its bottom edge is its baseline: baseline alignment puts "Powered by" and "dentalrun" on one line, like two words in a sentence. */ .dr-footer__powered img { width: 96px; height: auto; display: block; opacity: .6; transition: opacity .2s; } .dr-footer__powered a:hover img, .dr-footer__powered a:focus-visible img { opacity: 1; } .dr-footer__powered a:hover span, .dr-footer__powered a:focus-visible span { color: var(--text-on-dark); } @media (max-width: 1023px) { .dr-footer__bottom { align-items: flex-start; } } /* The hero glow picked up WordPress's 19px block gap and started below the top of the photo, which drew a line across the hero. Decorative layers sit flush with their section. */ .dr-hero > .dr-hero__glow, .dr-contact > .dr-contact__glow { margin: 0 !important; } /* Hero video on iPhone and iPad (2026-10-09, Ahmad saw a play button on his iPad). When iOS will not autoplay (Low Power Mode, or a password protected preview such as Local's Live Link), Safari draws a big play button over the poster. Hide it: visitors then see the still hero photo, never a broken looking player. */ .dr-hero__video::-webkit-media-controls, .dr-hero__video::-webkit-media-controls-start-playback-button, .dr-hero__video::-webkit-media-controls-overlay-play-button, .dr-hero__video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; opacity: 0; } /* Services on tablets (2026-10-09, Ahmad on his iPad: scrolling down did not move the cards). From 768 to 1023px the section now pins and the cards travel sideways with the scroll, as on desktop. The head is one column here, so the cards give up more height; the label clears the 84px tablet header. */ @media (min-width: 768px) and (max-width: 1023px) { .dr-services__pin { min-height: 100svh; padding: 100px 0 32px; justify-content: flex-start; } .dr-services__head { margin-bottom: 24px; gap: 12px; } .dr-services__viewport { overflow: hidden; scroll-snap-type: none; } .dr-service { width: auto; height: clamp(340px, calc(100svh - 440px), 640px); aspect-ratio: 3 / 4; } .dr-services__hint { display: block; } } /* Reviews heading centred in its section (2026-10-09, Ahmad). */ .dr-reviews .dr-section__head { text-align: center; margin-left: auto; margin-right: auto; } .dr-reviews .dr-section__head > h2 { margin-left: auto; margin-right: auto; } /* Tall portrait tablets at desktop width (iPad Pro 12.9 in portrait, 1024x1366): taller cards so the pinned screen is not half empty. Landscape screens and monitors keep the 560px cap. */ @media (min-width: 1024px) and (orientation: portrait) { .dr-service { height: clamp(360px, calc(100svh - 440px), 720px); } } /* Services on touch screens of any size (2026-10-09, Ahmad: on the iPad he wants to swipe the cards left and right). No pin: the cards sit in a sideways swipe strip that snaps to each card; scrolling up and down just moves the page. Computers with a mouse or trackpad keep the pinned scroll (dentalrun-motion.js checks pointer: fine). */ @media (min-width: 768px) and (pointer: coarse) { .dr-services__pin { min-height: 0; padding: 40px 0 56px; justify-content: flex-start; } .dr-services__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-padding-left: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); } .dr-services__viewport::-webkit-scrollbar { display: none; } .dr-services__track { transform: none !important; } .dr-service { width: auto; height: clamp(380px, 52svh, 560px); aspect-ratio: 3 / 4; scroll-snap-align: start; } .dr-services__hint { display: none; } } /* 19. Treatment pages (2026-10-11, Ahmad: "services pages for the marlow website"). One layout for every treatment (patterns/treatment.php): hero with four quick facts, who it suits, the steps on dark, comfort, cost on the light brand teal, related treatments, questions on dark, then the booking section and map. Built from the homepage parts so a rebrand carries over. */ /* Hero: the contact page's top fade (.dr-cpage), text left, photo right, facts in a ruled row below. */ .dr-thero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .dr-thero__title { margin: 20px 0; font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: 1; letter-spacing: -.03em; color: var(--text-on-light); } .dr-thero .dr-lead { color: color-mix(in srgb, var(--text-muted-light) 65%, var(--text-on-light)); } .dr-thero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .dr-thero__photo { aspect-ratio: 4 / 5; border-radius: 28px; } .dr-main .dr-thero .dr-thero__facts { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid rgba(var(--bg-deep-rgb), .14); border-bottom: 1px solid rgba(var(--bg-deep-rgb), .14); } .dr-thero .dr-trust__num--text { font-size: clamp(1.6rem, 2.6vw, 2.2rem); } /* The facts row closes the hero; the next section's own top space is enough below it. */ .dr-main .dr-thero { padding-bottom: clamp(16px, 2vw, 32px); } /* Who it suits: white, photo left, two lists (a good fit, worth talking through first). */ .dr-tfit.dr-section--cream { background: #ffffff; } .dr-tfit__label { margin: 32px 0 0; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); } .dr-tfit .dr-why__list { margin-top: 16px; } .dr-tfit__talk li::before { background: none; border: 2px solid var(--glow); box-sizing: border-box; } @media (min-width: 1024px) { .dr-tfit .dr-why__grid { grid-template-columns: 1fr 1fr; align-items: start; } .dr-tfit .dr-media { position: sticky; top: 120px; } } /* Steps: dark, heading and diagram on the left (they stay in view on desktop), numbered steps on the right. */ .dr-tsteps { background: var(--bg-section); color: var(--text-on-dark); } .dr-tsteps::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%); } .dr-tsteps__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .dr-tsteps__media { margin-top: 32px; background: #ffffff; } .dr-tstep { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .12); } .dr-tstep:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); } .dr-tstep__n { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.1; color: var(--accent-bright); } .dr-tstep h3 { margin: 0 0 6px; color: var(--text-on-dark); } .dr-tstep__time { margin: 0 0 10px; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-bright); } .dr-tstep p:last-child { margin: 0; color: var(--text-muted); line-height: 1.6; } @media (min-width: 1024px) { .dr-tsteps__intro { position: sticky; top: 112px; } } /* Comfort: white, text and a review on the left, photo on the right. */ .dr-tcomfort.dr-section--cream { background: #ffffff; } .dr-tcomfort__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .dr-tcomfort__quote { margin: 32px 0 0; padding: 24px 28px; border-left: 3px solid var(--glow); border-radius: 0 16px 16px 0; background: color-mix(in srgb, var(--accent) 10%, #ffffff); } .dr-tcomfort__quote blockquote { margin: 0; padding: 0; border: 0; } .dr-tcomfort__quote blockquote p { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--text-on-light); } .dr-tcomfort__quote figcaption { margin-top: 12px; font-size: .9rem; font-weight: 600; color: var(--text-on-light); } .dr-tcomfort__stars { color: #FBBC04; letter-spacing: 2px; margin-right: 6px; } /* Cost: the light brand teal of the stats strip and map band, factors as ruled rows. */ .dr-tcost.dr-section--cream { background: color-mix(in srgb, var(--accent) 10%, #ffffff); } .dr-tcost__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .dr-tcost__pay { margin: 24px 0 0; max-width: 46ch; font-weight: 600; color: var(--text-on-light); } .dr-tcost__list li { padding: 22px 0; border-top: 1px solid rgba(var(--bg-deep-rgb), .14); color: var(--text-muted-light); line-height: 1.55; } .dr-tcost__list li:last-child { border-bottom: 1px solid rgba(var(--bg-deep-rgb), .14); } .dr-tcost__list strong { color: var(--text-on-light); font-size: 1.1rem; font-weight: 600; } /* Related treatments: the homepage service cards, three in a row (a swipe strip on phones). */ .dr-tmore.dr-section--cream { background: #ffffff; } .dr-tmore__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(24px, 3vw, 40px); } .dr-main .dr-tmore .dr-service { width: auto; height: auto; aspect-ratio: 3 / 4; border-radius: var(--radius); } .dr-tmore__link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; } .dr-tmore .dr-service__title { margin: 0; font-size: 1.35rem; } /* A photo that is still being made shows a calm placeholder, never a broken image. */ .dr-media__pending { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgba(var(--glow-rgb), .10) 0 14px, rgba(var(--glow-rgb), .04) 14px 28px), color-mix(in srgb, var(--accent) 12%, #ffffff); } .dr-media__pending span { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .85); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); } @media (max-width: 1023px) { .dr-thero__grid, .dr-tsteps__grid, .dr-tcomfort__grid, .dr-tcost__grid { grid-template-columns: 1fr; } .dr-main .dr-thero .dr-thero__facts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .dr-tmore__grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: clamp(24px, 3vw, 40px) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 8px; scrollbar-width: none; } .dr-tmore__grid::-webkit-scrollbar { display: none; } .dr-main .dr-tmore .dr-service { flex: 0 0 72vw; scroll-snap-align: start; } .dr-tstep { grid-template-columns: 40px 1fr; gap: 14px; } } /* Full image hero for treatment pages (2026-10-11, Ahmad: the photo as a full background with a brand colour over it and the text on top). A teal wash (blend mode "color") ties any photo to the palette; a deep fade from the left keeps the text readable; the four facts sit in the homepage's light stats strip right below. */ .dr-main .dr-thero--full { min-height: min(86svh, 820px); display: grid; align-content: end; padding-top: 150px; padding-bottom: clamp(56px, 7vw, 104px); background: var(--bg-deep); color: var(--text-on-dark); overflow: hidden; } .dr-main .dr-thero--full::before { display: none; } .dr-thero__bg { position: absolute; inset: 0; z-index: -1; max-width: none !important; margin: 0 !important; } .dr-thero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; } .dr-thero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--glow); mix-blend-mode: color; opacity: .35; } .dr-thero__bg::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(var(--bg-deep-rgb), .9) 0%, rgba(var(--bg-deep-rgb), .74) 34%, rgba(var(--bg-deep-rgb), .28) 66%, rgba(var(--bg-deep-rgb), .12) 100%), linear-gradient(180deg, rgba(var(--bg-deep-rgb), .6) 0%, rgba(var(--bg-deep-rgb), 0) 26%, rgba(var(--bg-deep-rgb), 0) 70%, rgba(var(--bg-deep-rgb), .45) 100%); } .dr-thero--full .dr-thero__text { width: 100%; } .dr-thero--full .dr-thero__text > * { max-width: 620px; } .dr-thero--full .dr-thero__title { color: #ffffff; } .dr-thero--full .dr-lead { color: rgba(255, 255, 255, .86); } body:has(.dr-thero--full) .dr-header { background: transparent; backdrop-filter: none; box-shadow: none; } body:has(.dr-thero--full) .dr-header.is-scrolled { background: rgba(var(--bg-deep-rgb), .82); backdrop-filter: blur(14px); } .dr-tfacts .dr-trust__num--text { font-size: clamp(1.6rem, 2.6vw, 2.2rem); } /* Phones and tablets: the text fills the width, so the photo is drawn taller than the hero and lifted, which puts the subject (the implant model) in the open band above the headline instead of behind it. */ @media (max-width: 1023px) { .dr-main .dr-thero--full { min-height: 88svh; padding-top: 120px; } .dr-thero__bg img { position: absolute; left: 0; top: var(--focus-top, -48%); height: 148%; object-position: var(--focus-x, 55%) 50%; } /* --focus-x and --focus-top: set per page */ .dr-thero__bg::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .5) 0%, rgba(var(--bg-deep-rgb), .12) 18%, rgba(var(--bg-deep-rgb), .2) 36%, rgba(var(--bg-deep-rgb), .82) 52%, rgba(var(--bg-deep-rgb), .95) 100%); } } /* Treatment hero entrance (2026-10-11): html.dr-anim (set in the head, not with reduced motion) hides the hero text from the first paint; dentalrun-motion.js plays it in. A safety reveal at 3 seconds covers a script that never runs. The line masks get a little room below so letters like g and p are not clipped while they rise. */ .dr-anim .dr-thero__text > * { opacity: 0; animation: dr-safety-show 0s linear 3s forwards; } @keyframes dr-safety-show { to { opacity: 1; } } .dr-thero__title > div { padding-bottom: .12em; margin-bottom: -.12em; } /* Treatment pages with fewer photos (2026-10-11): who it suits without a photo puts the heading on top and the two lists side by side; comfort without a photo puts the review beside the text. */ .dr-tfit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); margin-top: 8px; } .dr-tfit__plain h2 { max-width: 20ch; } .dr-tcomfort__grid--text { align-items: center; } .dr-tcomfort__grid--text .dr-tcomfort__quote { margin-top: 0; } @media (max-width: 767px) { .dr-tfit__cols { grid-template-columns: 1fr; gap: 0; } } /* Services dropdown in the header (2026-10-11, Ahmad: "services to show in a drop down from the navigation bar"). Desktop: opens on hover or keyboard focus, a dark glass panel under Services; the arrow next to Services opens it on touch screens. Phone menu: the treatments sit under Services as a smaller indented list. */ .dr-nav .wp-block-navigation-submenu__toggle, .dr-nav .wp-block-navigation__submenu-icon { color: var(--text-on-dark); } .dr-nav .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; stroke-width: 2px; } .dr-nav .has-child > .wp-block-navigation__submenu-container { top: calc(100% + 14px) !important; left: -16px !important; right: auto !important; min-width: 260px !important; padding: 8px !important; background: rgba(var(--bg-deep-rgb), .96) !important; color: var(--text-on-dark) !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 16px; box-shadow: 0 28px 56px -20px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* A see-through bridge over the 14px gap, so the panel stays open while the mouse travels down to it. */ .dr-nav .has-child > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .dr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; } .dr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; width: 100%; padding: 10px 14px !important; border-radius: 10px; font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .88); transition: background-color .2s, color .2s; } .dr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .dr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { background: rgba(var(--glow-rgb), .22); color: #ffffff; } .dr-nav .wp-block-navigation__submenu-container .is-current > .wp-block-navigation-item__content { color: var(--accent-bright); } /* Phone menu (the light drawer): the treatments as an indented list under Services, no panel. */ .dr-nav .is-menu-open .has-child > .wp-block-navigation__submenu-container { position: static !important; min-width: 0 !important; width: auto !important; padding: 8px 0 0 14px !important; background: transparent !important; border: 0 !important; border-left: 2px solid rgba(var(--bg-deep-rgb), .12) !important; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 2px; } .dr-nav .is-menu-open .has-child > .wp-block-navigation__submenu-container::before { content: none; } .dr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 6px 0 !important; font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; color: var(--text-muted-light); background: none; } .dr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--accent-deep); background: none; } .dr-nav .is-menu-open .wp-block-navigation__submenu-container .is-current > .wp-block-navigation-item__content { color: var(--accent-deep); } .dr-nav .is-menu-open .wp-block-navigation-item.has-child { align-items: flex-start !important; width: 100%; } /* Phone menu: Services collapsed until tapped (2026-10-12, Ahmad: "shows the services collapsed, only open when its clicked"). dentalrun-motion.js toggles .is-expanded; the chevron turns over when open. */ .dr-nav .is-menu-open .dr-nav__services > .wp-block-navigation__submenu-container { display: none !important; } .dr-nav .is-menu-open .dr-nav__services.is-expanded > .wp-block-navigation__submenu-container { display: flex !important; flex-direction: column; } .dr-nav .is-menu-open .dr-nav__services > .wp-block-navigation-submenu__toggle { display: none !important; } .dr-nav .is-menu-open .dr-nav__services > a { display: inline-flex; align-items: center; gap: 14px; } .dr-nav .is-menu-open .dr-nav__services > a::after { content: ""; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-4px) rotate(45deg); transition: transform .25s; } .dr-nav .is-menu-open .dr-nav__services.is-expanded > a::after { transform: translateY(2px) rotate(-135deg); } /* Footer treatments column and privacy notice page (2026-10-12). The footer gets a fifth column only when the site has treatment pages; the privacy page is the contact page's top with a single paragraph. */ @media (min-width: 1024px) { .dr-footer__grid:has(.dr-footer__col--treatments) { grid-template-columns: 1.4fr 1fr .9fr 1.1fr .8fr; } } .dr-legal { min-height: 62vh; padding-bottom: clamp(96px, 12vw, 160px); } /* Before and after on treatment pages (2026-10-13): the homepage gallery cards; two pairs sit in a narrower row. */ @media (min-width: 1024px) { .dr-tresults__grid--2 { grid-template-columns: repeat(2, minmax(0, 440px)); } } /* left aligned under the heading */ /* Footer bottom row (2026-10-13, Ahmad: the privacy link looked like it was floating in the middle). The two legal links sit with the copyright on the left; Powered by DentalRun stays on the right. */ @media (min-width: 1024px) { .dr-footer__bottom .dr-footer__legal { margin-left: 8px; margin-right: auto; } } /* .dr-footer__bottom p sets margin 0, so the rule needs the parent too */ /* Numbered lists we style ourselves start flush with the headings (2026-10-13: the browser default 40px indent pushed the treatment cards and the treatment page steps to the right). */ .dr-stack__list, .dr-tsteps__list { list-style: none; margin: 0; padding: 0; } /* Body text font (2026-10-13, Ahmad noticed the "right for you" lists looked like a different font). The Gutenverse plugin prints its own CSS after this file and sets body to the system font stack, so every paragraph and list without its own font fell back to Segoe UI on Windows or San Francisco on a Mac. "html body" outranks its plain "body" rule. Bold uses 600, the heaviest weight we load, so the browser never fakes a bold. */ html body { font-family: var(--font-body); } strong, b { font-weight: 600; } /* ========================================================================= 22. Feature switches (2026-10-14). Optional layouts and effects a site turns on in inc/features.php; all off in the master. Each block below only takes effect when its switch is on: the body carries dr-feat--, or the section only exists then. Each was built and tested first on the Arcline sample. Colours come from the tokens in section 1; the variables named in each block let a site retune it without touching the rules. ========================================================================= */ /* Promise hero ('hero' => 'promise'): full photo under a dark wash, headline left, glass card with three promises. Tune: --promise-dash, the short line before each promise title. */ :root { --promise-dash: var(--accent-bright); } .dr-hero--promise .dr-hero__media picture { display: contents; } .dr-hero--promise .dr-hero__media img { object-position: 60% 40%; } .dr-hero--promise .dr-hero__media::after { background: linear-gradient(90deg, rgba(var(--bg-deep-rgb), .82) 0%, rgba(var(--bg-deep-rgb), .55) 38%, rgba(var(--bg-deep-rgb), .12) 70%, rgba(var(--bg-deep-rgb), .25) 100%), linear-gradient(180deg, rgba(var(--bg-deep-rgb), .55) 0%, rgba(var(--bg-deep-rgb), 0) 25%, rgba(var(--bg-deep-rgb), 0) 70%, rgba(var(--bg-deep-rgb), .5) 100%); } .dr-hero__promises { list-style: none; margin: 0; display: grid; gap: 0; padding: 6px 24px; border-radius: 24px; color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .06) 100%); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(22px) saturate(115%); backdrop-filter: blur(22px) saturate(115%); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16); } .dr-hero__promises li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } .dr-hero__promises li:last-child { border-bottom: 0; } .dr-hero__promises strong { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: 500; font-size: 1.02rem; line-height: 1.2; letter-spacing: .01em; } .dr-hero__promises strong::before { content: ""; flex: 0 0 18px; height: 1.5px; background: var(--promise-dash); } .dr-hero__promises span { padding-left: 30px; font-weight: 300; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .74); } @media (min-width: 1024px) { .dr-hero--promise .dr-hero__content { padding-right: calc(var(--gutter) + 420px); } .dr-hero__promises { position: absolute; z-index: 2; width: 360px; bottom: clamp(48px, 6vw, 80px); right: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); } } @media (max-width: 1023px) { .dr-hero--promise { padding-bottom: 32px; } .dr-hero__promises { margin: 0 var(--gutter); } .dr-hero--promise .dr-hero__media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .55) 0%, rgba(var(--bg-deep-rgb), .25) 30%, rgba(var(--bg-deep-rgb), .8) 62%, rgba(var(--bg-deep-rgb), .92) 100%); } } /* Phones: the photo fills the first screen only and the dark colour continues under the card, so the photo is not stretched to the full (taller than one screen) hero and over zoomed. */ @media (max-width: 767px) { .dr-hero--promise { padding-top: 0; background: var(--bg-deep); } .dr-hero--promise .dr-hero__content { padding-top: calc(80px + 26svh); padding-bottom: 28px; } .dr-hero--promise .dr-hero__media { bottom: auto; height: 76svh; } .dr-hero--promise .dr-hero__media img { object-position: 50% 0%; } .dr-hero--promise .dr-hero__media::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .4) 0%, rgba(var(--bg-deep-rgb), 0) 14%, rgba(var(--bg-deep-rgb), .15) 30%, rgba(var(--bg-deep-rgb), .72) 46%, rgba(var(--bg-deep-rgb), .9) 62%, rgba(var(--bg-deep-rgb), .95) 100%); } } /* Moving band ('ticker'). Tune: --ticker-bg. */ :root { --ticker-bg: var(--accent-deep); } .dr-ticker { background: var(--ticker-bg); color: #fff; overflow: hidden; padding: 18px 0; } .dr-ticker__track { display: flex; width: max-content; animation: dr-ticker 55s linear infinite; } .dr-ticker__row { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex-shrink: 0; } .dr-ticker__word { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); white-space: nowrap; } .dr-ticker__dot { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, .5); } @keyframes dr-ticker { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .dr-ticker__track { animation: none; } } /* Stacked treatment cards ('services' => 'stack'): each card sticks a little lower than the one before, so they pile up on scroll. Tune: --stack-bg (section), --stack-index (the 01, 02 numbers). A site moves one photo's crop with .dr-stack__card-- .dr-stack__img { object-position: 50% 30%; }. */ :root { --stack-bg: var(--surface-light-2); --stack-index: var(--accent-bright); } .dr-stack.dr-section--cream { background: var(--stack-bg); } .dr-stack__head { max-width: 1320px; margin-bottom: clamp(32px, 4vw, 56px); } /* full width so WordPress does not centre it; the text is capped below */ .dr-stack__head > * { max-width: 760px; } .dr-stack__list { display: grid; gap: 28px; } .dr-stack__card { position: sticky; top: calc(96px + var(--i) * 14px); height: min(70svh, 560px); border-radius: 28px; overflow: hidden; isolation: isolate; box-shadow: 0 -18px 40px -24px rgba(var(--bg-deep-rgb), .55); } .dr-stack__card picture { display: contents; } .dr-stack__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2; } .dr-stack__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--bg-deep-rgb), .82) 0%, rgba(var(--bg-deep-rgb), .5) 45%, rgba(var(--bg-deep-rgb), .05) 80%); } .dr-stack__body { position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vw, 56px); max-width: 440px; color: #fff; display: grid; gap: 10px; justify-items: start; } .dr-stack__index { font-size: .8rem; letter-spacing: .22em; color: var(--stack-index); } .dr-stack__title { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.7rem); color: #fff; line-height: 1.05; } .dr-stack__text { margin: 0 0 8px; font-weight: 300; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, .86); } .dr-stack .dr-btn--ghost.dr-btn--inline { color: #fff; border-color: rgba(255, 255, 255, .55); } @media (max-width: 767px) { .dr-stack__card { top: calc(80px + var(--i) * 10px); height: 480px; } .dr-stack__img { object-position: 50% 25%; } .dr-stack__card::after { background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .05) 25%, rgba(var(--bg-deep-rgb), .6) 55%, rgba(var(--bg-deep-rgb), .92) 100%); } .dr-stack__body { right: 24px; } } /* Before and after with a drag line ('results' => 'compare'): four across, two on tablets, one on phones. Tune: --compare-accent (the arrows on the handle and the keyboard outline). */ :root { --compare-accent: var(--accent-deep); } .dr-results.dr-section--cream { background: #ffffff; } .dr-results__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .dr-compare { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; background: var(--surface-light-2); } .dr-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .dr-compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .dr-compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; } .dr-compare__knob { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); } .dr-compare__knob::before, .dr-compare__knob::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-left: 2px solid var(--compare-accent); border-bottom: 2px solid var(--compare-accent); } .dr-compare__knob::before { left: 9px; transform: rotate(45deg); } .dr-compare__knob::after { right: 9px; transform: rotate(-135deg); } .dr-compare__tag { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(var(--bg-deep-rgb), .7); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; } .dr-compare__tag--after { left: auto; right: 10px; background: rgba(255, 255, 255, .88); color: var(--text-on-light); } .dr-compare__range { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* visually hidden, still reachable by keyboard */ .dr-compare:focus-within { outline: 2px solid var(--compare-accent); outline-offset: 3px; } .dr-results__title { margin: 14px 0 4px; font-size: 1.05rem; color: var(--text-on-light); } .dr-results__text { margin: 0; font-size: .92rem; color: var(--text-muted-light); } @media (max-width: 1023px) { .dr-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .dr-results__grid { grid-template-columns: 1fr; } } /* Services panel on desktop ('services_panel'): a light panel under Services with a photo card on the left and the treatment pages on the right; the photo and its line switch to the treatment under the mouse. It replaces the dark dropdown on desktop only; the phone menu keeps its collapsed list. Opened and placed by dentalrun-motion.js. Tune: --mega-bg, --mega-hover (row under the mouse), --mega-link, --mega-current (the page you are on). */ :root { --mega-bg: rgba(var(--surface-light-rgb), .97); --mega-hover: var(--surface-light-2); --mega-link: var(--text-on-light); --mega-current: var(--accent-deep); } .dr-mega { display: none; } @media (min-width: 600px) { body.dr-feat--services-panel .dr-header__inner { position: relative; } body.dr-feat--services-panel .dr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .dr-nav__services > .wp-block-navigation__submenu-container { display: none !important; } .dr-mega { display: grid; grid-template-columns: 15rem 1fr; gap: 8px; width: 34rem; padding: 8px; position: absolute; z-index: 5; top: calc(100% + 12px); left: var(--mega-left, 30%); background: var(--mega-bg); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-radius: 16px; color: var(--text-on-light); box-shadow: 0 0 0 1px rgba(var(--bg-deep-rgb), .08), 0 30px 60px -24px rgba(var(--bg-deep-rgb), .45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } .dr-mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; } /* A see-through bridge over the gap, so the panel stays open while the mouse travels down to it. */ .dr-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .dr-mega__media { position: relative; min-height: 21rem; border-radius: 12px; overflow: hidden; background: var(--surface-light-2); } .dr-mega__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dr-mega__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), 0) 42%, rgba(var(--bg-deep-rgb), .8) 100%); } .dr-mega__caption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; color: #fff; } .dr-mega__title { margin: 0; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; } .dr-mega__text { margin: 6px 0 0; font-size: .85rem; font-weight: 300; line-height: 1.45; color: rgba(255, 255, 255, .86); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dr-mega__body { display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; padding: 12px 8px 8px; } /* list starts under the heading, so a short list leaves no gap */ .dr-mega__heading { margin: 0; padding: 8px 12px 0; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; color: var(--text-on-light); } .dr-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .dr-mega__link { display: block; padding: 10px 12px; border-radius: 8px; font-family: var(--font-body); font-size: .92rem; font-weight: 500; color: var(--mega-link); text-decoration: none; transition: background-color .15s, color .15s; } .dr-mega__link:hover, .dr-mega__link:focus-visible, .dr-mega__link.is-active { background: var(--mega-hover); color: var(--text-on-light); outline: none; } .dr-mega__link.is-current { color: var(--mega-current); } body.dr-feat--services-panel .dr-nav__services .wp-block-navigation__submenu-icon svg { transition: transform .2s; } body.dr-feat--services-panel .dr-nav__services.is-mega-open .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); } } /* Photo wash ('photo_wash'): a small warm shift on each service and treatment photo, then a light colour multiplied over it, so photos from different sources sit together (whites turn soft, blues calm down, faces keep their colour). Never on before and after photos: those must show true colour. Tune: --wash-color, --wash-strength, --wash-filter (Arcline: #EFDCC9, .34, sepia(.14) saturate(.94)). */ :root { --wash-color: #EFDCC9; --wash-strength: .34; --wash-filter: sepia(.14) saturate(.94); } body.dr-feat--photo-wash :is(.dr-stack__img, .dr-service__media img, .dr-thero__photo img, .dr-tfit .dr-media img, .dr-tsteps__media img, .dr-tcomfort .dr-media img, .dr-cpage__photo img, .dr-mega__img) { filter: var(--wash-filter); } body.dr-feat--photo-wash .dr-ticker__dot { filter: sepia(.2) saturate(.9); } body.dr-feat--photo-wash :is(.dr-stack__card, .dr-service__media, .dr-thero__photo, .dr-tfit .dr-media, .dr-tsteps__media, .dr-tcomfort .dr-media, .dr-cpage__photo)::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--wash-color); mix-blend-mode: multiply; opacity: var(--wash-strength); } /* Stacked cards: the photo is at -2 and the dark text fade at -1, so the wash slots in between them. */ body.dr-feat--photo-wash .dr-stack__card::before { z-index: -1; } /* Other photos: the wash stays inside the frame, on top of the photo. */ body.dr-feat--photo-wash :is(.dr-service__media, .dr-thero__photo, .dr-tfit .dr-media, .dr-tsteps__media, .dr-tcomfort .dr-media, .dr-cpage__photo) { isolation: isolate; } body.dr-feat--photo-wash :is(.dr-service__media, .dr-thero__photo, .dr-tfit .dr-media, .dr-tsteps__media, .dr-tcomfort .dr-media, .dr-cpage__photo) img { position: relative; z-index: 0; } body.dr-feat--photo-wash :is(.dr-service__media, .dr-thero__photo, .dr-tfit .dr-media, .dr-tsteps__media, .dr-tcomfort .dr-media, .dr-cpage__photo)::before { z-index: 1; } /* Phone Call and Book bar waits ('call_bar_wait'): hidden until the hero has scrolled away (dentalrun-motion.js adds dr-past-hero to the body), so the promise card can peek at the bottom of the first screen. */ @media (max-width: 767px) { body.dr-feat--call-bar-wait .dr-mobile-bar { transform: translateY(120%); transition: transform .35s var(--ease); } body.dr-feat--call-bar-wait.dr-past-hero .dr-mobile-bar { transform: none; } } /* ========================================================================= 23. Family Crown Dentistry skin (PRIVATE pitch mockup, 2026-10-15). Copied from the Glow Dent Doral pitch. Colours from her logo: navy #1C2A44 and purple #34507F, with a light lilac #C8D2E2 for accents on dark. Dark sections are her navy taken deep (#182338); no black and no colour she does not use. ========================================================================= */ :root { --fc-lilac: #C8D2E2; --grad-light: linear-gradient(180deg, #E0E6EF 0%, #F1F4F8 55%, #FFFFFF 100%); --grad-text: linear-gradient(90deg, #C8D2E2 0%, #DCE3EE 55%, #F6F8FB 100%); --promise-dash: var(--fc-lilac); --ticker-bg: #34507F; --stack-bg: #F1F4F8; --stack-index: #34507F; --wash-color: #E9EDF4; --wash-strength: .18; --wash-filter: saturate(.95); } .dr-section--cream .dr-grad { background: linear-gradient(90deg, #2E4874 0%, #34507F 55%, #5B78A8 100%); -webkit-background-clip: text; background-clip: text; } .dr-header__logo img { width: 210px; height: auto; } .dr-header.is-scrolled .dr-header__logo img { width: 180px; } .dr-footer__brand img { width: 220px; height: auto; } /* The hero headline is split into letters for its entrance, which hides gradient text; the accent word is solid. */ .dr-hero__title .dr-grad { background: none; color: var(--fc-lilac); -webkit-text-fill-color: currentColor; font-style: italic; } .dr-hero__title .dr-grad div { color: var(--fc-lilac); } /* Desktop hero: her portrait sits on the right two thirds and melts into her navy on the left (one colour, a smoothed curve over 40 stops), so the headline never covers her face. Phones keep the full photo. */ @media (min-width: 1024px) { .dr-hero--promise { background: #182338; } .dr-hero--promise .dr-hero__media { left: 36%; } .dr-hero--promise .dr-hero__media img { object-position: 72% 18%; } .dr-hero--promise .dr-hero__media::after { background: linear-gradient(90deg, rgba(24,35,56,1) 0%, rgba(24,35,56,1.000) 0.00%, rgba(24,35,56,0.998) 1.15%, rgba(24,35,56,0.993) 2.30%, rgba(24,35,56,0.985) 3.45%, rgba(24,35,56,0.973) 4.60%, rgba(24,35,56,0.959) 5.75%, rgba(24,35,56,0.942) 6.90%, rgba(24,35,56,0.923) 8.05%, rgba(24,35,56,0.901) 9.20%, rgba(24,35,56,0.877) 10.35%, rgba(24,35,56,0.852) 11.50%, rgba(24,35,56,0.824) 12.65%, rgba(24,35,56,0.795) 13.80%, rgba(24,35,56,0.764) 14.95%, rgba(24,35,56,0.732) 16.10%, rgba(24,35,56,0.699) 17.25%, rgba(24,35,56,0.666) 18.40%, rgba(24,35,56,0.631) 19.55%, rgba(24,35,56,0.596) 20.70%, rgba(24,35,56,0.561) 21.85%, rgba(24,35,56,0.525) 23.00%, rgba(24,35,56,0.489) 24.15%, rgba(24,35,56,0.454) 25.30%, rgba(24,35,56,0.419) 26.45%, rgba(24,35,56,0.384) 27.60%, rgba(24,35,56,0.351) 28.75%, rgba(24,35,56,0.318) 29.90%, rgba(24,35,56,0.286) 31.05%, rgba(24,35,56,0.255) 32.20%, rgba(24,35,56,0.226) 33.35%, rgba(24,35,56,0.198) 34.50%, rgba(24,35,56,0.173) 35.65%, rgba(24,35,56,0.149) 36.80%, rgba(24,35,56,0.127) 37.95%, rgba(24,35,56,0.108) 39.10%, rgba(24,35,56,0.091) 40.25%, rgba(24,35,56,0.077) 41.40%, rgba(24,35,56,0.065) 42.55%, rgba(24,35,56,0.057) 43.70%, rgba(24,35,56,0.052) 44.85%, rgba(24,35,56,0.050) 46.00%), linear-gradient(180deg, rgba(24,35,56,.35) 0%, rgba(24,35,56,0) 22%, rgba(24,35,56,0) 70%, rgba(24,35,56,.55) 100%); } } /* Wide service cards on desktop show a band of each photo: these keep faces and hands in the band. */ @media (min-width: 768px) { .dr-stack__card--dental-implants .dr-stack__img { object-position: 45% 40%; } .dr-stack__card--cosmetic-dentistry .dr-stack__img { object-position: 50% 18%; } .dr-stack__card--invisalign .dr-stack__img { object-position: 60% 35%; } .dr-stack__card--family-dentistry .dr-stack__img { object-position: 40% 50%; } .dr-stack__card--emergency-dentistry .dr-stack__img { object-position: 50% 45%; } } /* Her photo is light (white coat, pale wall), so the promise card is tinted with her navy to keep its words readable. */ .dr-hero--promise .dr-hero__promises { background: linear-gradient(160deg, rgba(24, 35, 56, .62) 0%, rgba(28, 42, 68, .48) 100%); border-color: rgba(255, 255, 255, .22); } /* Monstar for every heading, number and card title (Junquera, 2026-10-22): the all capitals display face from Ahmad's font library, already used on Arcline, closest to the condensed capitals on her practice's social posts. One weight, so the face is declared for every weight and the browser never fakes a bold or an italic. Body stays Inter. */ @font-face { font-family: "Monstar"; src: url("../fonts/Monstar.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Inter, self hosted for launch (2026-10-28): the variable file from Google Fonts v20, weights 300 to 600, latin and latin extended (Spanish accents sit in latin). No call to Google Fonts, so the privacy policy needs no Google Fonts line. */ @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --font-display: "Monstar", Inter, system-ui, sans-serif; } h1, h2, h3, h4, .dr-hero__title, .dr-trust__num, .dr-ticker__word, .dr-stack__title, .dr-doctor__name, .dr-why h2 { font-synthesis: none; letter-spacing: .03em; } .dr-hero__title .dr-grad, .dr-hero__title .dr-grad div { font-style: normal; } .dr-hero__title { font-size: clamp(2.4rem, 4.6vw, 4.1rem); line-height: 1.04; } /* Google rating pill in the hero (Ahmad, 2026-10-15), the same glass as Royal Dental's hero rating badge (Royal-Dental-Website/src/components/Hero.astro, .rating-badge): pill, thin white edge, light blur, gold stars. */ .fc-rating-badge { display: flex; width: fit-content; align-items: center; gap: .5rem; margin: 0 0 1.4rem; padding: .45rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); font-family: var(--font-body); font-size: .92rem; font-weight: 500; color: #fff; } .fc-rating-badge__stars { color: #FBBC04; letter-spacing: .08em; font-size: .95em; } .fc-rating-badge__text { color: rgba(255, 255, 255, .95); white-space: nowrap; } /* Her logo at the top of the phone menu, in its own colours on the light drawer (Ahmad, 2026-10-15). */ .dr-nav .wp-block-navigation__responsive-container.is-menu-open::after { content: ""; position: absolute; top: 18px; left: 26px; width: 170px; height: 52px; z-index: 2; pointer-events: none; background: url("../img/junquera/logo-color.png") left center / contain no-repeat; } /* The close button sits in the drawer's content box, which starts 96px down; lift it level with the logo. */ .dr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: -66px; } /* Reviews, redesigned 2026-10-15 (Ahmad: "looks very basic"). Dark rating panel with glossy gold stars on the left, quote cards on the right (2 by 2 on desktop, a sideways swipe on phones). Her navy, purple and lilac; gold only for stars. */ .fc-reviews { position: relative; overflow: hidden; background: radial-gradient(42% 60% at 92% 12%, rgba(200, 210, 226, .32) 0%, rgba(200, 210, 226, 0) 70%), radial-gradient(38% 50% at 4% 96%, rgba(52, 80, 127, .10) 0%, rgba(52, 80, 127, 0) 70%), linear-gradient(180deg, #F1F4F8 0%, #FAFBFD 60%, #FFFFFF 100%); } .fc-reviews__head { text-align: left; margin-bottom: clamp(28px, 4vw, 48px); } .fc-reviews__head h2 { max-width: 16ch; } .fc-reviews__grid { display: grid; grid-template-columns: minmax(280px, 0.82fr) 2fr; gap: 24px; align-items: stretch; } .fc-stars-gloss { } .fc-rating { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 40px 36px; border-radius: 28px; color: #fff; overflow: hidden; background: radial-gradient(80% 60% at 20% 0%, rgba(200, 210, 226, .30) 0%, rgba(200, 210, 226, 0) 60%), linear-gradient(160deg, #2C3E62 0%, #1C2A44 45%, #182338 100%); box-shadow: 0 30px 60px rgba(28, 42, 68, .28), inset 0 1px 0 rgba(255, 255, 255, .14); } .fc-rating::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid rgba(255, 255, 255, .12); } .fc-rating__g { width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); margin-bottom: 18px; } .fc-rating__g svg { width: 28px; height: 28px; } .fc-rating__score { margin: 0; font-family: var(--font-display); font-size: clamp(4.5rem, 8vw, 6.5rem); line-height: .9; letter-spacing: -.02em; } .fc-rating__stars, .fc-quote__stars { margin: 0; letter-spacing: .12em; background: linear-gradient(180deg, #FFE9A8 0%, #FFC83D 45%, #F2A500 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 1px rgba(120, 70, 0, .25)); } .fc-rating__stars { font-size: 1.9rem; margin-top: 8px; } .fc-rating__label { margin: 6px 0 22px; font-size: 1rem; line-height: 1.5; color: rgba(246, 248, 251, .82); max-width: 22ch; } .fc-rating__link { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 12px 20px; border-radius: 999px; text-decoration: none; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-weight: 600; font-size: .95rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s, transform .3s; } .fc-rating__link:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); } .fc-reviews__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .fc-quote { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 34px 30px 28px; border-radius: 24px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(52, 80, 127, .10); box-shadow: 0 24px 50px rgba(28, 42, 68, .08), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .fc-quote:hover { transform: translateY(-4px); box-shadow: 0 32px 60px rgba(28, 42, 68, .14), inset 0 1px 0 #fff; } .fc-quote__mark { position: absolute; top: 4px; right: 24px; font-family: Georgia, serif; font-size: 7rem; line-height: 1; pointer-events: none; background: linear-gradient(180deg, #C8D2E2 0%, rgba(200, 210, 226, .25) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .fc-quote__stars { font-size: 1.05rem; } .fc-quote__text { margin: 0; flex: 1; font-size: 1.02rem; line-height: 1.65; color: #1C2A44; } .fc-quote__who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(52, 80, 127, .10); } .fc-quote__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #fff; font-family: var(--font-display); font-size: 1.15rem; background: linear-gradient(140deg, #5B78A8 0%, #34507F 55%, #1C2A44 100%); box-shadow: 0 6px 16px rgba(52, 80, 127, .30), inset 0 1px 0 rgba(255, 255, 255, .3); } .fc-quote__who strong { display: block; font-size: .98rem; color: #1C2A44; } .fc-quote__who em { display: block; font-style: normal; font-size: .82rem; color: #56617A; } @media (max-width: 1023px) { .fc-reviews__grid { grid-template-columns: 1fr; } .fc-rating { padding: 32px 28px; } } @media (max-width: 767px) { .fc-reviews__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 24px; scrollbar-width: none; } .fc-reviews__cards::-webkit-scrollbar { display: none; } .fc-quote { flex: 0 0 84%; scroll-snap-align: start; } .fc-rating__score { font-size: 4.5rem; } } /* The theme's link colour won over the button; keep it white in the dark rating panel. */ .fc-reviews .fc-rating a.fc-rating__link, .fc-reviews .fc-rating a.fc-rating__link:visited { color: #fff; font-family: var(--font-body); } /* Her tooth and crown mark as a faint watermark on the rating card (Ahmad, 2026-10-15). Cut from her own logo, white only, same shapes (assets/img/junquera/mark-white.png); it bleeds off the right edge, behind the words. */ .fc-rating::before { content: ""; position: absolute; z-index: 0; right: -46px; top: 50%; width: 250px; height: 288px; transform: translateY(-46%); background: url("../img/junquera/mark-white.png") right center / contain no-repeat; opacity: .12; pointer-events: none; } .fc-rating > * { position: relative; z-index: 1; } @media (max-width: 1023px) { .fc-rating::before { right: -20px; width: 210px; height: 242px; } } /* Before and after (2026-10-15): example pairs until her own cases arrive, each clearly tagged. */ .fc-example-note { margin: 10px 0 0; font-size: .88rem; color: #56617A; max-width: 60ch; } .dr-compare { position: relative; } .fc-example-tag { position: absolute; z-index: 4; top: 14px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(28, 42, 68, .78); color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; } /* ========================================================================= 25. Junquera pitch (2026-10-22) ========================================================================= */ /* Monstar is wide, so "prosthodontist" needs the room of a longer line: never split inside a word. */ .dr-hero__title { font-size: clamp(2rem, 3.2vw, 2.95rem); max-width: none; hyphens: none; word-break: normal; overflow-wrap: normal; } @media (max-width: 767px) { .dr-hero__title { font-size: 1.95rem; max-width: none; } } /* Her four own cases fill one row. */ .dr-results__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1023px) { .dr-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .dr-results__grid { grid-template-columns: 1fr; } } /* Centered hero (Ahmad, 2026-10-23, "as we did in the Royal Dental"): the photo runs full width with no side wash, one gradient rises from the bottom, and the rating, headline, line and buttons stack in the middle. On desktop the three promises become one glass row along the bottom. */ .dr-hero--promise .dr-hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; margin-inline: auto; } .dr-hero--promise .fc-rating-badge { margin-inline: auto; } .dr-hero--promise .dr-hero__title { max-width: 22ch; margin-inline: auto; text-shadow: 0 2px 24px rgba(10, 16, 30, .45); } .dr-hero--promise .dr-hero__lead { max-width: 52ch; margin-inline: auto; text-shadow: 0 1px 14px rgba(10, 16, 30, .5); } .dr-hero--promise .dr-hero__actions { justify-content: center; } @media (min-width: 1024px) { .dr-hero--promise .dr-hero__media { left: 0; } .dr-hero--promise .dr-hero__media img { object-position: 30% 30%; } .dr-hero--promise .dr-hero__media::after { background: linear-gradient(0deg, rgba(24,35,56,.94) 0%, rgba(24,35,56,.86) 18%, rgba(24,35,56,.66) 36%, rgba(24,35,56,.42) 54%, rgba(24,35,56,.2) 72%, rgba(24,35,56,.08) 86%, rgba(24,35,56,.3) 100%); } .dr-hero--promise .dr-hero__content { padding-right: var(--gutter); padding-left: var(--gutter); padding-bottom: 190px; } .dr-hero--promise .dr-hero__promises { right: auto; left: 50%; transform: translateX(-50%); width: min(1100px, calc(100vw - 2 * var(--gutter))); bottom: 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; padding: 4px 28px; } .dr-hero--promise .dr-hero__promises li { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .12); padding: 16px 24px 16px 0; } .dr-hero--promise .dr-hero__promises li:last-child { border-right: 0; } } @media (max-width: 1023px) { .dr-hero--promise .dr-hero__promises { text-align: left; } } /* Warm beige and a camel accent (Ahmad, 2026-10-23). The light sections take the beige of her waiting room walls instead of a cool near white, and the camel of its leather cushions appears in small touches only: the accent word in each heading, the eyebrow star, the list dots and the promise dashes in the hero. */ :root { --surface-light: #F4EDE3; --surface-light-2: #EADFD1; --surface-light-rgb: 244, 237, 227; --grad-light: linear-gradient(180deg, #EEE4D6 0%, #F4EDE3 50%, #F7F1E8 100%); --camel: #B06C3A; --camel-deep: #96582C; --camel-light: #D8A06E; --promise-dash: var(--camel-light); --fc-lilac: var(--camel-light); } .dr-section--cream .dr-grad { background: linear-gradient(90deg, var(--camel-deep) 0%, var(--camel) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .dr-eyebrow::before, .dr-section--cream .dr-eyebrow::before { color: var(--camel-light); } .dr-section--cream .dr-eyebrow::before { color: var(--camel); } .dr-why__list li::before { background: linear-gradient(135deg, var(--camel-light) 0%, var(--camel) 100%); } .dr-section--cream .dr-eyebrow { background: rgba(255, 255, 255, .35); } /* Every light section in her beige, set on the section itself (the master paints some of them white directly). The contact top fade keeps the master's smoothed curve and its 36 stops, now from navy into the beige. */ .dr-trust, .dr-stack, .dr-why, .dr-results, .dr-reviews, .dr-mapband { background: #F4EDE3 !important; } .dr-why, .dr-reviews { background: #F1E8DC !important; } .dr-contact { background: linear-gradient(rgb(30, 44, 71) 0px, rgb(39, 52, 77) 15.2px, rgb(51, 63, 86) 25.6px, rgb(65, 76, 97) 34.2px, rgb(81, 90, 109) 41.8px, rgb(97, 104, 120) 48.4px, rgb(113, 119, 131) 55.1px, rgb(127, 132, 142) 61.8px, rgb(140, 143, 151) 68.4px, rgb(151, 154, 160) 75px, rgb(161, 162, 166) 81.7px, rgb(168, 169, 172) 88.3px, rgb(173, 173, 175) 94px, rgb(176, 176, 178) 99.8px, rgb(180, 179, 180) 105.4px, rgb(183, 182, 183) 111.1px, rgb(187, 186, 185) 116.8px, rgb(190, 189, 188) 122.5px, rgb(194, 192, 190) 128.2px, rgb(198, 195, 193) 134.9px, rgb(202, 199, 196) 141.5px, rgb(206, 202, 199) 148.2px, rgb(209, 206, 202) 154.8px, rgb(213, 209, 205) 162.4px, rgb(217, 212, 207) 170px, rgb(221, 216, 210) 178.6px, rgb(224, 219, 213) 188.1px, rgb(228, 222, 215) 198.5px, rgb(231, 226, 218) 210.9px, rgb(235, 229, 220) 226.1px, rgb(238, 232, 223) 245.1px, rgb(241, 234, 225) 264.1px, rgb(242, 235, 226) 283.1px, rgb(243, 236, 226) 302.1px, rgb(243, 236, 227) 321.1px, rgb(244, 237, 227) 339.1px) #F4EDE3 !important; } /* Hero type balance (Ahmad, 2026-10-23: "should it be larger, should the subheadline be thinner"). The headline grows to about 59px on a laptop and runs two lines across the centered column; the line under it is smaller and light (Inter 300), like Royal Dental's hero, so the headline leads. */ @media (min-width: 768px) { .dr-hero--promise .dr-hero__title { font-size: clamp(2.4rem, 4.1vw, 3.75rem); line-height: 1.08; max-width: 24ch; } } .dr-hero--promise .dr-hero__lead { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); font-weight: 300; color: rgba(255, 255, 255, .9); line-height: 1.6; } /* Appointment forms (inc/contact-form.php): the spam trap field stays off screen for people; the status line shows sending, thank you, or the call us message. */ .dr-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .dr-form__status:empty { display: none; } .dr-form__status { font-weight: 500; color: var(--text); } .dr-section--cream .dr-form__status { color: inherit; } /* Legal page text (patterns/legal-page.php, inc/legal/*.html): one readable column under the page title. */ .dr-legal__body { max-width: 72ch; color: var(--text-on-light); font-size: 1.02rem; line-height: 1.7; } .dr-legal__body h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); margin: 2.2em 0 .5em; color: var(--text-on-light); } .dr-legal__body p, .dr-legal__body ul { margin: 0 0 1em; } .dr-legal__body ul { padding-left: 1.2em; } .dr-legal__body li { margin-bottom: .35em; } .dr-legal__body a { color: inherit; text-decoration: underline; } .dr-legal__date { font-size: .9rem; color: var(--text-muted-light); } /* Stronger than the site wide heading and list styles: a legal page reads like a document. */ .dr-legal .dr-legal__body { font-size: 1.08rem; margin-inline: auto; } .dr-legal .dr-legal__body h2 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.2; letter-spacing: .01em; margin: 1.8em 0 .45em; } .dr-legal .dr-legal__body p, .dr-legal .dr-legal__body li { font-size: inherit; line-height: 1.7; color: var(--text-on-light); } .dr-legal .dr-legal__body ul { list-style: disc; padding-left: 1.3em; } /* Page intros next to the big title: even lines, never one word alone on the last line (Oct 27, privacy page "us."). */ .dr-cpage__intro { text-wrap: balance; } /* Legal pages read top to bottom like a document (Oct 27, Ahmad): the intro sits under the title, not beside it, and the text lines up with the title on the left. */ .dr-legal .dr-cpage__head { grid-template-columns: 1fr; gap: 18px; align-items: start; } .dr-legal .dr-cpage__intro { justify-self: start; max-width: 60ch; } .dr-legal .dr-legal__body { margin-inline: 0; } /* WordPress centers every child of a constrained section (margin auto !important), so line the text up with the title's left edge: the title block is 1320px wide and centered. */ .dr-legal > .dr-legal__body { margin-left: calc((100% - min(100%, 1320px)) / 2) !important; margin-right: auto !important; }