/* ============================================================ Trillium Dental Centre — Redesign Shared stylesheet (Option B static site) Aesthetic: clean, modern, clinical · warm-but-precise Brand: teal #7EBEC5 (anchor) · orange #FC5621 (CTA) · slate #474F66 Type: Bricolage Grotesque (display) + Hanken Grotesk (body) ============================================================ */ /* ---------- Fonts ---------- */ /* Loaded via in for parallel discovery (faster LCP) */ /* ---------- Tokens ---------- */ :root { /* brand */ --teal-50: #f1f9fa; --teal-100: #e0f1f3; --teal-200: #c2e4e7; --teal-300: #9fd3d8; --teal: #7ebec5; --teal-600: #4f9aa2; --teal-700: #387d85; --teal-800: #2a5f66; --teal-900: #1f474c; --orange: #fc5621; /* brand accent (lines, dots, icons) */ --orange-600:#e8470f; --orange-700:#c93c0d; --orange-cta:#d23f0e; /* button bg — white text meets WCAG AA 4.5:1 */ --orange-cta-hover:#b8350b; --slate: #474f66; --ink: #232a3d; --muted: #6a7185; --line: #e7eb0f; --line: #e6eaee; --cream: #fbfdfd; --paper: #ffffff; /* type */ --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* radii + shadow */ --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(35,42,61,.06), 0 2px 6px rgba(35,42,61,.05); --shadow: 0 6px 18px rgba(42,95,102,.08), 0 2px 6px rgba(35,42,61,.05); --shadow-lg: 0 24px 60px -18px rgba(42,95,102,.30), 0 8px 24px rgba(35,42,61,.08); --shadow-teal: 0 18px 40px -16px rgba(79,154,162,.55); --shadow-orange: 0 14px 30px -10px rgba(252,86,33,.45); --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { font-family: var(--font-body); color: var(--slate); background: var(--cream); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: var(--teal-700); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--orange); } ul { list-style: none; padding: 0; } button { font: inherit; cursor: pointer; border: none; background: none; } :focus-visible { outline: 3px solid var(--teal-600); outline-offset: 3px; border-radius: 4px; } /* Skip link */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--teal-800); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-sm); font-weight: 700; transition: top .2s ease; } .skip-link:focus { top: 12px; color: #fff; } /* ---------- Typography ---------- */ h1,h2,h3,h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; } h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700; } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); } p { text-wrap: pretty; } .eyebrow { font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-700); display: inline-flex; align-items: center; gap: .55rem; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); display: inline-block; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(56px, 9vw, 120px); position: relative; } .section--tight { padding-block: clamp(40px, 6vw, 72px); } .lead { font-size: 1.15rem; color: var(--muted); } .center { text-align: center; } .stack > * + * { margin-top: 1rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-body); font-weight: 700; font-size: .98rem; padding: .9rem 1.65rem; border-radius: var(--r-pill); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .2s ease, color .2s; white-space: nowrap; line-height: 1.2; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn--primary { background: var(--orange-cta); color: #fff; box-shadow: var(--shadow-orange); } .btn--primary:hover { background: var(--orange-cta-hover); color: #fff; transform: translateY(-2px); } .btn--teal { background: var(--teal-700); color: #fff; box-shadow: var(--shadow-teal); } .btn--teal:hover { background: var(--teal-800); color: #fff; transform: translateY(-2px); } .btn--ghost { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); } .btn--ghost:hover { background: rgba(255,255,255,.24); color:#fff; transform: translateY(-2px); } .btn--outline { background: transparent; color: var(--teal-800); box-shadow: inset 0 0 0 1.5px var(--teal-300); } .btn--outline:hover { background: var(--teal-50); color: var(--teal-900); transform: translateY(-2px); } .btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; } /* ============================================================ HEADER (shared) — top utility bar + sticky nav ============================================================ */ .topbar { background: var(--teal-900); color: var(--teal-100); font-size: .86rem; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; } .topbar a { color: var(--teal-100); } .topbar a:hover { color: #fff; } .topbar__meta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .topbar__meta span, .topbar__meta a { display: inline-flex; align-items: center; gap: .45rem; } .topbar__meta svg { width: 15px; height: 15px; opacity: .8; } .topbar__social { display: flex; gap: .6rem; align-items: center; } .topbar__social a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); transition: background .2s, transform .2s; } .topbar__social a:hover { background: var(--orange); transform: translateY(-1px); } .topbar__social svg { width: 15px; height: 15px; } .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow .3s ease, padding .3s ease; } .nav.is-stuck { box-shadow: var(--shadow); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .7rem; transition: padding .3s; } .nav.is-stuck .nav__inner { padding-block: .45rem; } .brand { display: flex; align-items: center; flex-shrink: 0; } .brand img { width: clamp(150px, 16vw, 196px); height: auto; transition: width .3s; } .nav.is-stuck .brand img { width: clamp(132px, 13vw, 162px); } .menu { display: flex; align-items: center; gap: .2rem; } .menu > li { position: relative; } .menu > li > a, .menu > li > button { display: inline-flex; align-items: center; gap: .3rem; padding: .6rem .7rem; border-radius: var(--r-sm); font-weight: 600; color: var(--ink); font-size: .96rem; white-space: nowrap; } .menu > li > a:hover, .menu > li > button:hover, .menu > li.is-open > button { color: var(--teal-700); background: var(--teal-50); } .menu .caret { width: 14px; height: 14px; transition: transform .25s; } .menu > li.is-open .caret { transform: rotate(180deg); } /* Split trigger: label is a real link, caret-only button toggles the dropdown */ .menu > li.menu__split { display: inline-flex; align-items: stretch; padding: 0; } .menu > li.menu__split > a { padding-right: .3rem; } .menu .menu__caret { display: inline-flex; align-items: center; padding: .6rem .45rem .6rem .25rem; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: var(--r-sm); } .menu > li.menu__split:hover > a, .menu > li.menu__split:hover > .menu__caret, .menu > li.menu__split.is-open > a, .menu > li.menu__split.is-open > .menu__caret { color: var(--teal-700); background: var(--teal-50); } .dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 270px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: .55rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 50; } .menu > li:hover .dropdown, .menu > li.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .8rem; border-radius: var(--r-sm); color: var(--slate); } .dropdown a:hover { background: var(--teal-50); color: var(--teal-800); } .dropdown a b { font-family: var(--font-display); color: var(--ink); font-weight: 600; font-size: 1rem; } .dropdown a small { color: var(--muted); font-size: .82rem; } /* Mega-menu (full services list) */ .dropdown--mega { left: 50%; transform: translateX(-50%) translateY(8px); width: min(560px, 95vw); padding: 1.2rem 1.4rem; } .menu > li:hover .dropdown--mega, .menu > li.is-open .dropdown--mega { transform: translateX(-50%) translateY(0); } .mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .2rem 1.6rem; align-items: start; } .mega__col { display: flex; flex-direction: column; } .mega__col + .mega__col-stack { margin-top: 0; } .mega__group { display: flex; flex-direction: column; margin-top: .2rem; } .mega__group + .mega__group { margin-top: 1rem; } .dropdown--mega a { display: block; flex-direction: row; padding: .32rem .5rem; border-radius: var(--r-sm); color: var(--slate); font-size: .87rem; line-height: 1.3; } .dropdown--mega a:hover { background: var(--teal-50); color: var(--teal-800); } .mega__head { font-family: var(--font-display); color: var(--ink) !important; font-weight: 700; font-size: .96rem !important; border-bottom: 1px solid var(--line); margin-bottom: .25rem; padding-bottom: .35rem !important; display: flex !important; align-items: center; justify-content: space-between; gap: .5rem; } .mega__head:hover { background: transparent !important; color: var(--teal-700) !important; } /* Click-to-expand: hide sub-service links in mega until parent is expanded */ .dropdown--mega .mega__col > a:not(.mega__head), .dropdown--mega .mega__group > a:not(.mega__head) { display: none; } .dropdown--mega .mega__col.is-expanded > a:not(.mega__head), .dropdown--mega .mega__group.is-expanded > a:not(.mega__head), .dropdown--mega .mega-expandable:hover > a:not(.mega__head), .dropdown--mega .mega-expandable:focus-within > a:not(.mega__head) { display: block; } /* Chevron only on heads that have sub-services (skip standalone hubs) */ .mega-expandable > .mega__head::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; } .mega-expandable.is-expanded > .mega__head::after, .mega-expandable:hover > .mega__head::after, .mega-expandable:focus-within > .mega__head::after { transform: rotate(225deg) translate(-2px, -2px); } .nav__cta { display: flex; align-items: center; gap: .6rem; } .nav__toggle { display: none; width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--teal-50); } .nav__toggle span { display:block; width: 22px; height: 2px; background: var(--ink); margin: 4px auto; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } .nav.is-open-mobile .nav__toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); } .nav.is-open-mobile .nav__toggle span:nth-child(2){ opacity: 0; } .nav.is-open-mobile .nav__toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--teal-50) 0%, #fff 55%, var(--teal-50) 100%); } .hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle, rgba(79,154,162,.16) 1.4px, transparent 1.6px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000, transparent 72%); opacity: .7; pointer-events: none; } .hero__blob { position:absolute; border-radius: 50%; filter: blur(8px); opacity:.5; pointer-events:none; } .hero__blob--1 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(126,190,197,.45), transparent 70%); top: -120px; right: -80px; } .hero__blob--2 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(252,86,33,.12), transparent 70%); bottom: -120px; left: -100px; } .hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(48px, 7vw, 96px); } .hero__badge { display:inline-flex; align-items:center; gap:0; background:#fff; border:1px solid var(--teal-200); color: var(--teal-800); font-weight:700; font-size:.82rem; letter-spacing:.04em; padding:.5rem 1.1rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); } .hero__badge .dot { flex-shrink:0; width:8px; height:8px; border-radius:50%; background: var(--orange); margin-right:.5rem; } .hero__badge-text { white-space:nowrap; } .hero h1 { margin-top: 1.2rem; color: var(--ink); } .hero h1 .accent { color: var(--teal-700); display:block; } .hero__tag { font-family: var(--font-display); font-size: clamp(1.2rem,2.4vw,1.7rem); color: var(--slate); font-weight: 500; margin-top: 1rem; letter-spacing:-.01em; } .hero__sub { margin-top: 1.1rem; max-width: 46ch; font-size: 1.08rem; color: var(--muted); } .hero__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .9rem; align-items:center; } .hero__phone { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color: var(--ink); font-size:1.02rem; } .hero__phone:hover { color: var(--orange); } .hero__phone svg { width:20px; height:20px; color: var(--teal-700); } .hero__visual { position: relative; } .hero__photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; background: var(--teal-100); } .hero__photo img { width:100%; height:100%; object-fit: cover; } .hero__chip { position:absolute; background:#fff; border-radius: var(--r); box-shadow: var(--shadow-lg); padding: .9rem 1.1rem; display:flex; align-items:center; gap:.8rem; } .hero__chip--reviews { bottom: 26px; left: -22px; } .hero__chip--years { top: 26px; right: -18px; flex-direction: column; align-items:flex-start; gap:.1rem; } .hero__chip .num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--teal-800); line-height:1; } .hero__chip small { color: var(--muted); font-size:.8rem; font-weight:600; } .hero__stars { color: var(--orange); display:flex; gap:1px; } .hero__stars svg { width:16px; height:16px; } /* ---------- Feature tiles (Emergency / Tooth in a Day / CDCP) ---------- */ .tiles { position: relative; margin-top: -2px; } .tiles__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; } .tile { position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem 1.6rem; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; overflow:hidden; } .tile::after { content:""; position:absolute; left:0; top:0; height:100%; width:5px; background: var(--teal); transition: width .3s, background .3s; } .tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); } .tile:hover::after { width: 8px; } .tile--accent::after { background: var(--orange); } .tile__icon { width: 54px; height: 54px; border-radius: var(--r); background: var(--teal-50); color: var(--teal-700); display:grid; place-items:center; margin-bottom: 1rem; } .tile--accent .tile__icon { background: #fff3ef; color: var(--orange); } .tile__icon svg { width: 28px; height: 28px; } .tile h3 { margin-bottom: .4rem; } .tile p { color: var(--muted); font-size: .98rem; } .tile__link { margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color: var(--teal-700); font-size:.92rem; } .tile__link svg { width:16px;height:16px; transition: transform .25s; } .tile:hover .tile__link svg { transform: translateX(4px); } /* ============================================================ SPLIT (image + text) sections ============================================================ */ .split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; } .split--rev .split__media { order: 2; } .split__media { position: relative; } .split__media img { width:100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); object-fit: cover; aspect-ratio: 4/3; } .split__media .frame { position:absolute; inset:18px -18px -18px 18px; border:2px solid var(--teal-200); border-radius: var(--r-xl); z-index:-1; } .split h2 { margin-top: .9rem; } .split p { margin-top: 1rem; color: var(--slate); } .split p + p { margin-top: .9rem; } .langs { margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.5rem; } .langs span { background: var(--teal-50); color: var(--teal-800); border:1px solid var(--teal-100); padding:.3rem .8rem; border-radius: var(--r-pill); font-size:.83rem; font-weight:600; } .facts { margin-top: 1.8rem; display:grid; grid-template-columns:1fr 1fr; gap: 1.1rem 1.4rem; } .fact { display:flex; gap:.75rem; align-items:flex-start; } .fact .ico { width:40px; height:40px; border-radius:11px; background:var(--teal-50); color:var(--teal-700); display:grid; place-items:center; flex-shrink:0; } .fact .ico svg { width:21px; height:21px; } .fact b { display:block; color:var(--ink); font-family:var(--font-display); font-size:1.02rem; line-height:1.25; letter-spacing:-.01em; } .fact small { color: var(--muted); font-size:.85rem; line-height:1.4; } @media (max-width:480px){ .facts { grid-template-columns:1fr; } } /* ============================================================ SERVICES GRID ============================================================ */ .section--alt { background: linear-gradient(180deg,#fff, var(--teal-50)); } .sec-head { max-width: 720px; margin-inline:auto; text-align:center; margin-bottom: clamp(2rem,4vw,3.5rem); } .sec-head p { margin-top:1rem; color: var(--muted); } .svc-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; } .svc { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; } .svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); } .svc__icon { width:60px; height:60px; border-radius: var(--r); display:grid; place-items:center; background: linear-gradient(135deg, var(--teal-100), var(--teal-50)); color: var(--teal-700); margin-bottom:1.1rem; } .svc__icon svg { width:30px; height:30px; } .svc h3 { margin-bottom:.5rem; } .svc p { color: var(--muted); font-size:.97rem; flex:1; } .svc__link { margin-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color: var(--teal-700); font-size:.92rem; } .svc__link svg { width:16px;height:16px; transition: transform .25s; } .svc:hover .svc__link svg { transform: translateX(4px); } /* ============================================================ CDCP banner ============================================================ */ .cdcp { background: linear-gradient(135deg, var(--teal-800), var(--teal-700)); color:#fff; border-radius: var(--r-xl); overflow:hidden; position:relative; } .cdcp::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle, rgba(255,255,255,.07) 1.4px, transparent 1.6px); background-size: 24px 24px; opacity:.6; } .cdcp__inner { position:relative; display:grid; grid-template-columns: 1.5fr .8fr; gap:2rem; align-items:center; padding: clamp(2rem,4vw,3.4rem); } .cdcp .eyebrow { color: var(--teal-100); } .cdcp .eyebrow::before { background:#fff; } .cdcp h2 { color:#fff; } .cdcp p { color: rgba(255,255,255,.88); margin-top:1rem; } .cdcp__cta { display:flex; justify-content:flex-end; } @media (max-width: 860px){ .cdcp__cta{ justify-content:flex-start; } } /* ============================================================ Invisalign / Awards ============================================================ */ .awards { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; } .awards__copy h2 { margin-top:.8rem; } .awards__copy p { margin-top:1rem; color: var(--slate); } .award-note { margin-top:1.2rem; font-weight:700; color: var(--teal-800); } .badges { display:flex; flex-wrap:wrap; gap: 1.4rem 2rem; align-items:center; } .badges img { max-height: 92px; width:auto; filter: saturate(1.02); } /* ============================================================ Testimonials ============================================================ */ .section--quote { background: var(--teal-900); color:#fff; position:relative; overflow:hidden; } .section--quote::before { content:"\201C"; position:absolute; font-family: var(--font-display); font-size: 28rem; line-height:1; color: rgba(255,255,255,.05); top:-4rem; left:2rem; } .section--quote .eyebrow{ color: var(--teal-100); } .section--quote h1, .section--quote h2, .section--quote h3 { color:#fff; } .quote-grid { position:relative; display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; margin-top:2.5rem; } .qcard { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding:1.6rem; } .qcard__stars { color: var(--orange); display:flex; gap:2px; margin-bottom:.8rem; } .qcard__stars svg { width:18px; height:18px; } .qcard p { color: rgba(255,255,255,.9); } .qcard cite { display:block; margin-top:1rem; font-style:normal; font-weight:700; color:#fff; font-family: var(--font-display); } .cbc { margin-top:2.4rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center; text-align:center; } /* ============================================================ Team / dentists ============================================================ */ .team-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem; } .member { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:2rem 1.6rem; text-align:center; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; } .member:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .member__avatar { width:104px; height:104px; border-radius:50%; margin:0 auto 1.1rem; display:grid; place-items:center; background: linear-gradient(135deg, var(--teal-200), var(--teal-100)); color: var(--teal-800); font-family: var(--font-display); font-weight:700; font-size:2.1rem; box-shadow: inset 0 0 0 4px #fff, 0 0 0 5px var(--teal-100); } .member__avatar--photo { background:none; box-shadow: 0 0 0 5px var(--teal-100); overflow:hidden; padding:0; } .member__avatar img { display:block; width:100%; height:100%; aspect-ratio:1; border-radius:50%; object-fit:cover; object-position:center 22%; } .member h3 { margin-bottom:.25rem; } .member small { color: var(--muted); font-weight:600; } /* ============================================================ Contact ============================================================ */ .contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: start; } .contact-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.6rem,3vw,2.4rem); box-shadow: var(--shadow); } .info-row { display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid var(--line); } .info-row:last-child { border-bottom:none; } .info-row .ico { flex-shrink:0; width:44px; height:44px; border-radius: var(--r-sm); background: var(--teal-50); color: var(--teal-700); display:grid; place-items:center; } .info-row .ico svg { width:22px; height:22px; } .info-row b { display:block; color: var(--ink); font-family: var(--font-display); } .info-row a, .info-row span { color: var(--slate); } .hours { width:100%; } .hours li { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed var(--line); font-size:.97rem; } .hours li:last-child { border-bottom:none; } .hours li.today { color: var(--teal-800); font-weight:700; } .hours li.closed span:last-child { color: var(--muted); } .field { margin-bottom:1rem; } .field label { display:block; font-weight:600; color: var(--ink); margin-bottom:.4rem; font-size:.92rem; } .field input, .field textarea, .field select { width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius: var(--r-sm); font: inherit; color: var(--ink); background: var(--cream); transition: border-color .2s, box-shadow .2s; } .field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-100); } .field textarea { resize: vertical; min-height: 120px; } .choice-field { border:0; padding:0; margin:0 0 1rem; } .choice-field legend { font-weight:600; color: var(--ink); margin-bottom:.55rem; font-size:.92rem; } .choice-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.65rem .9rem; } .choice-grid--compact { grid-template-columns:repeat(2, minmax(90px, 140px)); } .choice { display:flex; align-items:center; gap:.5rem; padding:.65rem .75rem; border:1.5px solid var(--line); border-radius: var(--r-sm); background:var(--cream); color:var(--ink); font-weight:500; cursor:pointer; } .choice input { width:auto; accent-color: var(--teal); } .field-error { color:#b42318; font-size:.88rem; margin:.45rem 0 0; } .form-status { margin:.8rem 0; font-weight:600; color:var(--ink); } .choice-field.has-error { border-left:3px solid #b42318; padding-left:.85rem; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } @media (max-width:640px){ .form-row, .choice-grid { grid-template-columns:1fr; } .choice-grid--compact { grid-template-columns:repeat(2, minmax(0, 1fr)); } } .map-embed { border:0; display:block; width:100%; height:360px; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } /* ============================================================ FINAL CTA ============================================================ */ .cta-band { background: linear-gradient(135deg, var(--orange), #ff7a4d); color:#fff; border-radius: var(--r-xl); padding: clamp(2.4rem,5vw,4rem); text-align:center; position:relative; overflow:hidden; box-shadow: var(--shadow-orange); } .cta-band::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle, rgba(255,255,255,.12) 1.5px, transparent 1.7px); background-size: 22px 22px; opacity:.5; } .cta-band h2 { color:#fff; position:relative; } .cta-band p { color: rgba(255,255,255,.92); position:relative; margin-top:.8rem; max-width:54ch; margin-inline:auto; } .cta-band .hero__actions { justify-content:center; position:relative; } .cta-band .btn--primary { background:#fff; color: var(--orange-700); box-shadow: var(--shadow); } .cta-band .btn--primary:hover { background: var(--ink); color:#fff; } .cta-band .btn--ghost { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); } /* ============================================================ FOOTER (shared) ============================================================ */ .footer { background: var(--ink); color: #c8cdda; padding-top: clamp(48px,7vw,80px); } .footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; } .footer__brand .wordmark { font-family: var(--font-display); font-weight:700; font-size:1.5rem; color:#fff; letter-spacing:-.02em; } .footer__brand .wordmark span { color: var(--teal); } .footer__brand p { margin-top:1rem; font-size:.95rem; max-width: 34ch; } .footer__social { display:flex; gap:.6rem; margin-top:1.3rem; } .footer__social a { width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:grid; place-items:center; transition: background .2s ease, transform .2s ease; } .footer__social a:hover { background: var(--orange); transform: translateY(-2px); } .footer__social svg { width:17px; height:17px; } .footer h4 { color:#fff; font-size:1.05rem; margin-bottom:1.1rem; } .footer__col a { color:#c8cdda; display:block; padding:.32rem 0; font-size:.95rem; } .footer__col a:hover { color: var(--teal); } /* keep buttons inside footer columns from inheriting the link-list styles */ .footer__col a.btn { display:inline-flex; width:auto; padding:.9rem 1.65rem; font-size:.98rem; color:#fff; } .footer__col a.btn:hover { color:#fff; } .footer__contact li { display:flex; gap:.6rem; align-items:flex-start; padding:.4rem 0; font-size:.95rem; } .footer__contact svg { width:17px; height:17px; color: var(--teal); flex-shrink:0; margin-top:3px; } .footer__contact a { color:#c8cdda; } .footer__contact a:hover { color:#fff; } .footer__bottom { border-top:1px solid rgba(255,255,255,.1); padding-block:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.86rem; color:#8b92a6; } .footer__bottom a { color:#8b92a6; } .footer__bottom a:hover { color: var(--teal); } /* ============================================================ Reveal-on-load / scroll animation ============================================================ */ .reveal { opacity:0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity:1; transform:none; } .reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; } .reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; } .reveal[data-d="5"]{ transition-delay:.40s; } /* hero load stagger */ @keyframes rise { from { opacity:0; transform: translateY(26px);} to { opacity:1; transform:none; } } .hero__content > * { animation: rise .8s cubic-bezier(.2,.8,.2,1) backwards; } .hero__content > *:nth-child(1){ animation-delay:.05s; } .hero__content > *:nth-child(2){ animation-delay:.15s; } .hero__content > *:nth-child(3){ animation-delay:.25s; } .hero__content > *:nth-child(4){ animation-delay:.35s; } .hero__content > *:nth-child(5){ animation-delay:.45s; } .hero__visual { animation: rise 1s cubic-bezier(.2,.8,.2,1) .25s backwards; } /* ============================================================ PAGE HEADER (interior pages) — used by non-home pages ============================================================ */ .page-hero { position:relative; background: linear-gradient(160deg, var(--teal-50), #fff); overflow:hidden; } .page-hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle, rgba(79,154,162,.14) 1.4px, transparent 1.6px); background-size:26px 26px; mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000, transparent 70%); } .page-hero__inner { position:relative; padding-block: clamp(40px,6vw,80px); max-width: 760px; } .crumbs { display:flex; gap:.5rem; align-items:center; font-size:.86rem; color: var(--muted); margin-bottom:1.2rem; flex-wrap:wrap; } .crumbs a { color: var(--teal-700); } .crumbs span { color: var(--muted); } .page-hero h1 { margin-top:.5rem; } .page-hero .lead { margin-top:1rem; } .prose h2 { margin-top:2.4rem; } .prose h3 { margin-top:1.8rem; } .prose p { margin-top:1rem; } .prose ul.bullets { margin-top:1rem; } .prose ul.bullets li { position:relative; padding-left:1.8rem; margin-top:.6rem; } .prose ul.bullets li::before { content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background: var(--teal); } /* dev-only content-gap marker (not used in delivered pages) */ .todo { background:#fff7ed; border:1px dashed var(--orange); color: var(--orange-700); padding:1rem 1.2rem; border-radius: var(--r-sm); font-weight:600; } /* ---- Service-page helpers ---- */ .two-col { display:grid; grid-template-columns: 1.25fr .85fr; gap: clamp(2rem,4vw,3.5rem); align-items:start; } .two-col--even { grid-template-columns: 1fr 1fr; align-items:center; } @media (max-width:820px){ .two-col, .two-col--even { grid-template-columns:1fr; } } .panel { background: var(--teal-50); border:1px solid var(--teal-100); border-radius: var(--r-lg); padding: clamp(1.5rem,3vw,2.3rem); } .panel--ink { background: linear-gradient(135deg,var(--teal-800),var(--teal-700)); border:none; color:#fff; } .panel--ink h3, .panel--ink h2 { color:#fff; } .panel--ink p { color:rgba(255,255,255,.9); } .panel h3 { margin-top:0; } /* aside column that stacks a photo above a panel (keeps verbatim panel copy + adds imagery) */ .stack { display:grid; gap: clamp(1.2rem,2.5vw,1.8rem); align-content:start; } .media { margin:0; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow); background: var(--teal-50); } .media img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 4 / 3; } .media figcaption { padding:.55rem .9rem; font-size:.78rem; color: var(--muted); } .pull { font-family: var(--font-display); font-size: clamp(1.3rem,2.6vw,1.95rem); line-height:1.28; color: var(--teal-800); letter-spacing:-.015em; } .check-list { margin-top:1.1rem; display:grid; gap:.7rem; } .check-list li { position:relative; padding-left:2rem; color:var(--slate); } .check-list li::before { content:""; position:absolute; left:0; top:.15em; width:1.3rem; height:1.3rem; border-radius:50%; background:var(--teal-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23387d85' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat; } .anchor-nav { background:var(--teal-50); border-block:1px solid var(--teal-100); overflow-x:auto; scrollbar-width:none; } .anchor-nav::-webkit-scrollbar { display:none; } /* width:max-content + margin auto = centered when it fits, cleanly scrollable (no edge clipping) when it doesn't */ .anchor-nav ul { display:flex; gap:.4rem; width:max-content; margin-inline:auto; padding:.8rem var(--gutter); } .anchor-nav li { flex:0 0 auto; } .anchor-nav a { display:block; white-space:nowrap; padding:.42rem .85rem; border-radius:var(--r-pill); font-weight:600; font-size:.85rem; color:var(--teal-800); background:#fff; border:1px solid var(--teal-100); } .anchor-nav a:hover { background:var(--teal-700); color:#fff; border-color:var(--teal-700); } /* single-column prose, left-aligned to the same edge as two-col sections */ .prose--col { max-width: 820px; } .svc--link { cursor:pointer; } .mini-cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px){ .hero__grid { grid-template-columns: 1fr; } .hero__visual { max-width: 460px; } .svc-grid, .quote-grid, .team-grid { grid-template-columns: repeat(2,1fr); } .tiles__grid { grid-template-columns: 1fr; } } @media (max-width: 1080px){ .nav__cta .btn--phone-lbl { display:none; } .menu { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(380px, 86vw); height: 100vh; height: 100dvh; background:#fff; flex-direction: column; align-items: stretch; padding: 90px 1.2rem 2rem; gap:.2rem; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow-lg); overflow-y:auto; z-index: 1000002; } .nav.is-open-mobile .menu { transform: translateX(0); } .menu > li > a, .menu > li > button { width:100%; justify-content: space-between; font-size:1.05rem; padding:.85rem 1rem; } .menu > li.menu__split { display:flex; flex-wrap:wrap; } .menu > li.menu__split > a { flex:1; width:auto; } .menu > li.menu__split > .menu__caret { width:auto; padding:.85rem 1rem; } .menu > li.menu__split > .dropdown { flex: 0 0 100%; width: calc(100% - 1rem); } .dropdown { position: static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; border-left:2px solid var(--teal-100); border-radius:0; margin: .2rem 0 .4rem 1rem; padding:.2rem 0; min-width:0; max-height:0; overflow:hidden; transition: max-height .3s ease; } .menu > li.is-open .dropdown { max-height: 600px; } .menu > li:hover .dropdown { opacity:1; visibility:visible; } /* no hover open on mobile */ /* mega-menu collapses to a single scrolling column on mobile */ .dropdown--mega { width:auto; transform:none; left:auto; padding:.2rem 0; } .menu > li:hover .dropdown--mega, .menu > li.is-open .dropdown--mega { transform:none; } .dropdown--mega .mega__grid { display:block; } .menu > li.is-open .dropdown--mega { max-height: 3200px; } .mega__group + .mega__group, .mega__col + .mega__col { margin-top:.6rem; } .nav__toggle { display:block; position: relative; z-index: 1000003; } .nav__backdrop { position:fixed; inset:0; background:rgba(35,42,61,.45); opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 1000001; } .nav.is-open-mobile .nav__backdrop { opacity:1; visibility:visible; } /* DearDoc/Quriobot injects full-screen mobile layers that cover content and intercept the menu. Hide them on mobile. */ #quriobotWidgetContainer, .quriobotWidgetContainer, iframe#botwrapper.quriobotWidget, iframe.quriobotWidget { display:none !important; visibility:hidden !important; pointer-events:none !important; opacity:0 !important; width:0 !important; height:0 !important; } } @media (max-width: 780px){ .split, .split--rev .split__media { grid-template-columns: 1fr; order: initial; } .split--rev .split__text { order: 2; } .awards, .cdcp__inner, .contact-grid { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr 1fr; } .topbar__meta { display:none; } .topbar__inner { justify-content: center; } } @media (max-width: 560px){ body { font-size: 16px; } .svc-grid, .quote-grid, .team-grid { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr; } .hero__chip--reviews { left: 0; } .hero__chip--years { right: 0; } .form-row { grid-template-columns: 1fr; } } /* ============================================================ Batch 5 additions — FAQ accordion, bios, procedures index, gallery ============================================================ */ /* FAQ accordion (native details/summary — keyboard + SR accessible) */ .faq-list { max-width: 820px; margin: 2.2rem 0 0; } .faq { border:1px solid var(--line); border-radius: var(--r); background:#fff; box-shadow: var(--shadow-sm); margin-bottom:.9rem; overflow:hidden; } .faq > summary { list-style:none; cursor:pointer; padding:1.15rem 1.4rem; display:flex; align-items:center; gap:1rem; font-family: var(--font-display); font-weight:700; color: var(--ink); font-size:1.04rem; } .faq > summary::-webkit-details-marker { display:none; } .faq > summary::after { content:""; margin-left:auto; flex:none; width:11px; height:11px; border-right:2.5px solid var(--teal-600); border-bottom:2.5px solid var(--teal-600); transform: rotate(45deg); transition: transform .25s ease; } .faq[open] > summary::after { transform: rotate(-135deg); } .faq[open] > summary { color: var(--teal-800); } .faq__body { padding:0 1.4rem 1.3rem; color: var(--slate); } .faq__body > *:first-child { margin-top:0; } .faq__body p { margin:.7rem 0; } @media (prefers-reduced-motion: reduce){ .faq > summary::after { transition:none; } } /* Dentist / team bios (left-aligned, avatar + prose) */ .bio-list { display:grid; gap:1.6rem; margin-top:2.2rem; } .bio { display:grid; grid-template-columns: 132px 1fr; gap: clamp(1.2rem,3vw,2.2rem); align-items:start; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2rem); box-shadow: var(--shadow-sm); } .bio__avatar { width:120px; height:120px; border-radius:50%; display:grid; place-items:center; font-family: var(--font-display); font-weight:700; font-size:2.2rem; color:#fff; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-700) 100%); } .bio__avatar--photo { background:none; overflow:hidden; padding:0; } .bio__avatar img { display:block; width:100%; height:100%; aspect-ratio:1; border-radius:50%; object-fit:cover; object-position:center 22%; } .bio__role { color: var(--teal-700); font-weight:700; margin:.1rem 0 .8rem; } .bio h3 { margin:0; } .bio p { margin:.6rem 0; color: var(--slate); } @media (max-width: 640px){ .bio { grid-template-columns: 1fr; text-align:center; } .bio__avatar { margin:0 auto; } .bio p, .bio__role { text-align:left; } } /* Procedures directory */ .proc-cats { display:grid; grid-template-columns: repeat(2,1fr); gap:1.4rem; margin-top:2.4rem; } .proc-cat { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.3rem,2.5vw,1.8rem); box-shadow: var(--shadow-sm); } .proc-cat > h3 { margin:0 0 .9rem; padding-bottom:.7rem; border-bottom:2px solid var(--teal-100); } .proc-cat ul { list-style:none; display:grid; gap:.15rem; } .proc-cat a { display:flex; align-items:center; gap:.55rem; padding:.45rem .2rem; color: var(--slate); border-radius: var(--r-sm); transition: color .2s ease, background .2s ease; } .proc-cat a:hover { color: var(--teal-800); background: var(--teal-50); } .proc-cat a::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background: var(--orange); } @media (max-width: 760px){ .proc-cats { grid-template-columns: 1fr; } } /* Image gallery (tour + volunteer galleries) */ .gallery { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:2.2rem; } .gallery figure { margin:0; border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid var(--line); background:#fff; } .gallery img { display:block; width:100%; height:240px; object-fit:cover; } .gallery figcaption { padding:.7rem .9rem; font-size:.9rem; color: var(--muted); } @media (max-width: 900px){ .gallery { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px){ .gallery { grid-template-columns: 1fr; } } /* Blog */ .post-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem; margin-top:2.4rem; } .post-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; } .post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .post-card img { width:100%; height:200px; object-fit:cover; } .post-card__body { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; } .post-card__body h3 { font-size:1.12rem; margin:0 0 .6rem; } .post-card__body p { color: var(--slate); font-size:.95rem; margin:0 0 1.1rem; } .post-card__link { margin-top:auto; font-weight:700; color: var(--teal-700); display:inline-flex; align-items:center; gap:.4rem; } .post-card__link svg { width:1.05em; height:1.05em; flex:none; } .review-widget { max-width: 1040px; margin-inline:auto; } .review-widget iframe { width:100%; min-height:340px; border:0; display:block; } /* widget already breathes inside its own chrome — trim the dark section so it isn't stranded */ .section--quote:has(.review-widget) { padding-block: clamp(40px, 6vw, 72px); } .section--quote .review-widget + .hero__actions { margin-top: 1.2rem; } .review-widget--card { background:#fff; border-radius: var(--r-lg); padding: clamp(1rem,2.5vw,1.6rem); margin:2rem auto 0; box-shadow: var(--shadow-lg); } /* Affiliations (sister practices) + Associations (accreditation badges) */ .affil-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:1.2rem; margin-top:1.8rem; } .affil-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; text-align:center; } a.affil-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .affil-card img { display:block; width:100%; height:170px; object-fit:contain; padding:1.6rem 2rem; background:#fff; mix-blend-mode:multiply; border-bottom:1px solid var(--line); } .affil-card__body { padding:.9rem 1rem 1.1rem; } .affil-card__city { display:block; font-family: var(--font-display); color: var(--ink); font-weight:700; font-size:1.02rem; } .affil-card__name { display:block; color: var(--slate); font-size:.85rem; margin-top:.15rem; } .assoc-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: clamp(1.5rem,4vw,3rem); margin-top:1.6rem; } .assoc-row a, .assoc-row span { display:inline-flex; } .assoc-row img { display:block; height:72px; width:auto; object-fit:contain; mix-blend-mode:multiply; filter:saturate(.95); transition: transform .3s; } .assoc-row a:hover img { transform: scale(1.06); } @media (max-width: 860px){ .affil-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .affil-grid { grid-template-columns: 1fr; } } /* Image placeholder (client to supply real photos) */ .img-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; aspect-ratio: 4 / 3; padding:1.2rem; text-align:center; border-radius: var(--r); border: 2px dashed var(--teal-200); background: var(--teal-50); color: var(--teal-700); } .img-ph__icon svg { width:42px; height:42px; opacity:.7; } .img-ph__label { font-family: var(--font-display); font-weight:600; font-size:.98rem; color: var(--ink); } .img-ph__note { font-size:.8rem; color: var(--muted); } .post-meta { color: var(--muted); font-size:.85rem; margin-bottom:.5rem; } .article-body { max-width: 760px; } .article-body h2 { margin-top:2.2rem; } .article-body p, .article-body li { color: var(--slate); } @media (max-width: 900px){ .post-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px){ .post-grid { grid-template-columns: 1fr; } }