/* ========================================================== RUBAGA DENTAL SURGERY — Design tokens Palette derived from the official RDS logo blue (#0F77BE). Signature motif: the logo's own sparkle glints + crescent arc, reused throughout as a "polish / shine" motion motif. ========================================================== */ :root { /* Color — derived from logo blue #0F77BE */ --rds-blue: #0F77BE; --rds-blue-deep: #0B598E; --rds-blue-deepest: #084168; --rds-blue-light: #4B99CE; --rds-blue-tint: #93C1E1; --rds-bg-tint: #F3F8FC; --rds-ink: #0B1F33; --rds-ink-soft: #4A5C6E; --rds-white: #FFFFFF; --rds-line: #DCE7F0; --rds-gold: #E3B341; /* used sparingly — sparkle glint accent */ /* Type — Montserrat for display/headings & UI labels, Helvetica for body copy */ --font-display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Helvetica Neue", Helvetica, Arial, "Montserrat", sans-serif; --font-mono: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Scale */ --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem); --step-3: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); --step-4: clamp(2.6rem, 2rem + 2.6vw, 4.2rem); /* Motion */ --ease-out: cubic-bezier(.16,.84,.44,1); --ease-spring: cubic-bezier(.22,1,.36,1); --dur-fast: 220ms; --dur-med: 480ms; --dur-slow: 900ms; /* Layout */ --container: 1240px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 22px; --shadow-soft: 0 12px 40px -16px rgba(11, 31, 51, 0.18); --shadow-lift: 0 24px 60px -20px rgba(11, 31, 51, 0.28); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--rds-ink); background: var(--rds-white); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--rds-ink); } p { margin: 0; } :focus-visible { outline: 2.5px solid var(--rds-blue); outline-offset: 3px; border-radius: 4px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); } .section { padding: clamp(4rem, 8vw, 7.5rem) 0; } .section--tint { background: var(--rds-bg-tint); } .section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rds-blue-deep); font-weight: 600; margin-bottom: .9rem; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rds-blue); box-shadow: 0 0 0 4px rgba(15,119,190,.15); } .section-head h2 { font-size: var(--step-3); line-height: 1.08; letter-spacing: -0.01em; } .section-head p { margin-top: 1rem; color: var(--rds-ink-soft); font-size: var(--step-1); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.7rem; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn-primary { background: var(--rds-blue); color: var(--rds-white); box-shadow: 0 10px 26px -10px rgba(15,119,190,.55); } .btn-primary:hover { background: var(--rds-blue-deep); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(15,119,190,.6); } .btn-ghost { background: transparent; color: var(--rds-blue-deep); border-color: var(--rds-line); } .btn-ghost:hover { border-color: var(--rds-blue); background: var(--rds-bg-tint); transform: translateY(-2px); } .btn-light { background: var(--rds-white); color: var(--rds-blue-deep); } .btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); } .btn-block { width: 100%; } .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; } /* ---------- Sparkle / polish-shine signature motif ---------- Echoes the four-point sparkle glints drawn beside the tooth in the real RDS logo. Reused as a hover + reveal accent. */ .sparkle { position: relative; overflow: hidden; } .sparkle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-140%); pointer-events: none; } .sparkle:hover::after, .sparkle.in-view::after { animation: shine-sweep 1.15s var(--ease-out); } @keyframes shine-sweep { to { transform: translateX(140%); } } .glint { position: absolute; color: var(--rds-blue-light); opacity: 0; pointer-events: none; } .glint svg { width: 100%; height: 100%; } .in-view .glint { animation: glint-twinkle 1.8s var(--ease-out) forwards; } .glint.g2 { animation-delay: .18s !important; } .glint.g3 { animation-delay: .34s !important; } @keyframes glint-twinkle { 0% { opacity: 0; transform: scale(.3) rotate(-15deg); } 35% { opacity: 1; transform: scale(1.15) rotate(0deg); } 60% { opacity: .7; transform: scale(.9) rotate(6deg); } 100% { opacity: 0; transform: scale(.4) rotate(0deg); } } /* ---------- Scroll reveal ---------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-reveal].in-view { opacity: 1; transform: translateY(0); } [data-reveal="scale"] { transform: translateY(20px) scale(.94); } [data-reveal="scale"].in-view { transform: translateY(0) scale(1); } [data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); } /* ---------- Navigation ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.1rem 0; background: rgba(255,255,255,.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .nav.scrolled { border-bottom-color: var(--rds-line); padding: .7rem 0; box-shadow: 0 8px 30px -20px rgba(11,31,51,.25); } .nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: .65rem; } .brand img { height: 42px; width: auto; transition: transform var(--dur-fast) var(--ease-spring); } .brand:hover img { transform: rotate(-6deg) scale(1.05); } .brand-text { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--rds-blue-deepest); line-height: 1.1; white-space: nowrap; } .brand-text small { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rds-ink-soft); font-weight: 500; margin-top: 2px; } .nav-links { display: flex; align-items: center; gap: 1.65rem; } .nav-links a { font-size: .93rem; font-weight: 500; color: var(--rds-ink-soft); position: relative; padding: .3rem 0; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--rds-blue); transition: right var(--dur-fast) var(--ease-out); } .nav-links a:hover { color: var(--rds-ink); } .nav-links a:hover::after { right: 0; } .nav-cta { display: flex; align-items: center; gap: .9rem; } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: .5rem; } .hamburger span { width: 24px; height: 2px; background: var(--rds-ink); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .nav.open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.open .hamburger span:nth-child(2) { opacity: 0; } .nav.open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-panel { display: none; position: fixed; inset: 0; top: 0; z-index: 99; background: var(--rds-white); padding: 6.5rem 1.5rem 2rem; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out), visibility var(--dur-med); } /* ---------- Mobile navigation ---------- */ /* Below this width the full nav links + Contact button no longer fit alongside the clinic name, so collapse them behind the hamburger menu (which opens .mobile-panel, already built above) instead of letting everything cram into one row. */ @media (max-width: 860px) { /* Mobile navigation: Brand | Book Appointment | Menu */ .nav .container { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(.45rem, 2vw, .85rem); } .brand { grid-column: 1; min-width: 0; } .nav-links { display: none; } /* Both the ghost "Contact" and primary "Book Appointment" buttons already live inside the mobile menu panel below (with the primary one repeated at the bottom), so hide them here rather than also showing "Book Appointment" beside the clinic name — it used to visually collide with the hamburger's X icon once the menu was open. The hamburger button itself lives inside .nav-cta in the markup, so nav-cta must stay visible (as a flex container) for it to keep working; only its two children are hidden. */ .nav-cta { grid-column: 2; min-width: 0; display: flex; align-items: center; justify-content: flex-end; } .nav-cta > a { display: none; } .hamburger { display: flex; flex-shrink: 0; } .brand-text { font-size: clamp(.78rem, 2.8vw, 1rem); white-space: nowrap; } .brand img { height: clamp(32px, 8vw, 42px); } .mobile-panel { display: block; } } @media (max-width: 380px) { .nav .container { column-gap: .3rem; } .brand { gap: .35rem; } .brand-text { font-size: .72rem; } .brand-text small { font-size: .5rem; } .hamburger { padding: .35rem; min-width: 38px; min-height: 38px; } } .mobile-panel.open { transform: translateY(0); opacity: 1; visibility: visible; } /* Excludes .btn: the "Book Appointment" link at the bottom of the panel is a real button (.btn already centers its own label with flexbox) — without :not(.btn) here, this rule forced it to display:block and its text collapsed to the left edge instead of sitting centered. */ .mobile-panel a:not(.btn) { display: block; padding: 1rem 0; font-size: 1.3rem; font-family: var(--font-display); border-bottom: 1px solid var(--rds-line); } /* ---------- Scrollytelling hero (Home / About / What to expect) ---------- `.scrolly` is N * 100vh tall; `.scrolly-pin` sticks to the top of the viewport while the section scrolls past, and js/scrolly.js toggles `.is-active` on the background photo + text scene that match how far the visitor has scrolled — a full-screen photo crossfade with text on top, like scrolling through a short video. */ .scrolly { position: relative; height: 300vh; } .scrolly-pin { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; background: var(--rds-blue-deepest); } .scrolly-bgs { position: absolute; inset: 0; z-index: 0; } .scrolly-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s var(--ease-out), transform 6s linear; transform: scale(1.06); } .scrolly-bg.is-active { opacity: 1; transform: scale(1); } .scrolly-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,20,34,.86) 0%, rgba(6,20,34,.62) 42%, rgba(6,20,34,.32) 68%, rgba(6,20,34,.18) 100%), linear-gradient(0deg, rgba(6,20,34,.55), transparent 40%); } .scrolly-scenes { position: relative; z-index: 1; height: 100%; } .scrolly-scene { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .7s var(--ease-out); /* Safety net: if a scene's content is ever taller than the pinned 100vh box (e.g. scene 3's extra list + button on a short laptop screen), let IT scroll internally instead of silently clipping the bottom off with no way to reach it. */ overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; } .scrolly-scene::-webkit-scrollbar { display: none; } .scrolly-scene.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .scrolly-inner { max-width: 700px; padding-top: 4.5rem; padding-bottom: 3rem; margin: auto 0; } /* Scene 3 has noticeably more content than scenes 1–2 (heading + 4-item list + button), so give it tighter internal spacing to keep the whole thing — including the Get Directions button — comfortably inside one screen instead of relying only on the scroll fallback above. */ #scene-expect .scene-list--stagger { gap: .7rem; margin-top: 1.2rem; } #scene-expect .scene-list--stagger > li > svg { width: 20px; height: 20px; padding: .4rem; } #scene-expect .scene-actions { margin-top: 1.4rem; } @media (max-height: 760px) { .scrolly-inner { padding-top: 3rem; } #scene-expect .scene-title { font-size: clamp(1.6rem, 4.5vw, 2.2rem); } #scene-expect .scene-list--stagger > li > div > span { font-size: .82rem; } } .scene-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rds-blue-tint); font-weight: 700; margin-bottom: 1rem; } .scene-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rds-blue-tint); } .scene-title { font-size: var(--step-4); line-height: 1.05; letter-spacing: -0.015em; color: #fff; } .scene-title em { font-style: italic; color: var(--rds-blue-tint); } .scene-lede { margin-top: 1.3rem; font-size: var(--step-1); color: rgba(255,255,255,.86); max-width: 50ch; font-family: var(--font-body); } .scene-trustline { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.6rem; font-size: .85rem; color: rgba(255,255,255,.78); } .scene-trustline .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rds-blue-tint); } .scene-actions { display: flex; gap: 1rem; margin-top: 2.2rem; flex-wrap: wrap; } .scene-list { margin-top: 1.6rem; display: grid; gap: 1rem; max-width: 56ch; } .scene-list > li { display: flex; gap: .85rem; align-items: flex-start; font-size: .96rem; color: rgba(255,255,255,.86); font-family: var(--font-body); } .scene-list > li > svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--rds-blue-tint); margin-top: 2px; } /* Scene 3's "what to expect" items show up one after another */ .scene-list--stagger > li { display: flex; gap: 1rem; align-items: flex-start; opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay: calc(var(--i, 0) * 130ms); } .scene-list--stagger.in-view > li { opacity: 1; transform: translateY(0); } .scene-list--stagger > li > svg { flex-shrink: 0; width: 24px; height: 24px; padding: .5rem; box-sizing: content-box; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; } .scene-list--stagger > li > div > strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1rem; margin-bottom: .2rem; } .scene-list--stagger > li > div > span { color: rgba(255,255,255,.78); font-size: .88rem; } #scene-expect .scene-actions { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay: calc(var(--i, 4) * 130ms); } #scene-expect .scene-list--stagger.in-view ~ .scene-actions { opacity: 1; transform: translateY(0); } .scrolly-cue { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); } .scrolly-cue span { width: 1px; height: 34px; background: linear-gradient(rgba(255,255,255,.9), transparent); animation: cue-drift 1.6s ease-in-out infinite; } @keyframes cue-drift { 0%,100% { opacity: .3; } 50% { opacity: 1; } } .scrolly-dots { position: absolute; right: clamp(1.2rem, 3vw, 2.4rem); top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: .6rem; } .scrolly-dots button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); font-family: var(--font-mono); font-size: .74rem; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .scrolly-dots button:hover { border-color: #fff; color: #fff; } .scrolly-dots button.is-active { background: #fff; color: var(--rds-blue-deep); border-color: #fff; transform: scale(1.12); } @media (prefers-reduced-motion: reduce) { .scrolly { height: auto; } .scrolly-pin { position: static; height: auto; min-height: 0; } .scrolly-bgs { display: none; } .scrolly-scenes { height: auto; } .scrolly-scene { position: static; opacity: 1; visibility: visible; pointer-events: auto; padding: 4.5rem 0; background: var(--rds-blue-deepest); } .scrolly-cue, .scrolly-dots { display: none; } } /* ---------- Services ---------- */ .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .service-card { position: relative; padding: 2rem 1.7rem; background: var(--rds-white); border: 1px solid var(--rds-line); border-radius: var(--radius-md); transform-style: preserve-3d; will-change: transform; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s; } .service-card:hover { box-shadow: var(--shadow-soft); border-color: var(--rds-blue-tint); } .service-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--rds-blue), var(--rds-blue-deep)); color: var(--rds-white); margin-bottom: 1.3rem; transform: translateZ(30px); } .service-icon svg { width: 26px; height: 26px; } .service-card h3 { font-size: 1.18rem; transform: translateZ(20px); } .service-card p { margin-top: .6rem; font-size: .92rem; color: var(--rds-ink-soft); transform: translateZ(20px); } .service-price { margin-top: 1rem; font-family: var(--font-mono); font-size: .82rem; color: var(--rds-blue-deep); transform: translateZ(20px); } /* Match "Tap for details..." to the same text design as the price line above it ("Contact for pricing" etc.) so both use the same font, size, and color on every service card. */ .service-card-hint { display: block; margin-top: .35rem; font-family: var(--font-mono); font-size: .82rem; color: var(--rds-blue-deep); transform: translateZ(20px); } .service-card.placeholder { border-style: dashed; } .service-card.placeholder p.tag { display:inline-block; margin-top:.8rem; font-family: var(--font-mono); font-size:.7rem; letter-spacing:.06em; color: var(--rds-blue-deep); background: var(--rds-bg-tint); padding:.25rem .55rem; border-radius: 999px; } /* "See more" — small link-style button pinned to the bottom-right corner of each service card. Separate from the card's own click (which still opens the quick-preview modal); this opens the fuller mini-page instead. Sits above the card's 3D-tilt layer and stops its own clicks from bubbling to the card. */ .service-card { padding-bottom: 3rem; } .service-see-more { position: absolute; right: 1.1rem; bottom: 1.05rem; z-index: 3; display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--rds-blue-tint); background: var(--rds-bg-tint); color: var(--rds-blue-deep); font-family: var(--font-mono); font-size: .78rem; font-weight: 600; padding: .4rem .7rem; border-radius: 999px; line-height: 1; transform: translateZ(30px); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .service-see-more svg { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); } .service-see-more:hover, .service-see-more:focus-visible { background: var(--rds-blue); color: var(--rds-white); border-color: var(--rds-blue); } .service-see-more:hover svg, .service-see-more:focus-visible svg { transform: translateX(2px); } /* ---------- Service detail modal ---------- Opens on top of the services grid with the rest of the page blurred behind it, showing a photo + full description for that service. */ .service-modal-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(6, 20, 34, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-out), visibility .25s; } .service-modal-overlay.open { opacity: 1; visibility: visible; } .service-modal { width: min(720px, 100%); max-height: 88vh; overflow-y: auto; background: var(--rds-white); border-radius: var(--radius-lg, 20px); box-shadow: 0 30px 80px rgba(6,20,34,.35); transform: translateY(24px) scale(.97); opacity: 0; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); position: relative; } .service-modal-overlay.open .service-modal { transform: translateY(0) scale(1); opacity: 1; } .service-modal-media { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-lg, 20px) var(--radius-lg, 20px) 0 0; background: var(--rds-bg-tint); } .service-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Scaling & Polishing and Tooth Filling photos are near-square (726x675, 554x554) — inside the shared 16:9 modal box, object-fit:cover cropped them noticeably. Show these two in full instead of cropped. */ #service-modal-img[src*="scaling-polishing"], #service-modal-img[src*="tooth-filling"] { object-fit: contain; background: var(--rds-bg-tint); } .service-modal-body { padding: clamp(1.4rem, 4vw, 2.2rem); } .service-modal-body h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-top: .4rem; } .service-modal-body p { margin-top: .9rem; color: var(--rds-ink-soft); line-height: 1.6; } .service-modal-price { margin-top: 1.2rem; font-family: var(--font-mono); font-size: .95rem; color: var(--rds-blue-deep); } .service-modal-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; } .service-modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; background: rgba(6,20,34,.55); color: #fff; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .service-modal-close:hover { background: rgba(6,20,34,.8); transform: scale(1.06); } body.modal-open { overflow: hidden; } /* ---------- Service mini page ("See more") ---------- A fuller companion to the quick-preview modal above: same dimmed + blurred backdrop treatment, but a taller scrollable panel with the service's clinical name, a before/after gallery carousel, and service-specific FAQs. */ .service-page-overlay { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(6, 20, 34, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-out), visibility .25s; } .service-page-overlay.open { opacity: 1; visibility: visible; } .service-page { width: min(760px, 100%); max-height: 88vh; overflow: hidden; background: var(--rds-white); border-radius: var(--radius-lg, 20px); box-shadow: 0 30px 80px rgba(6,20,34,.35); transform: translateY(24px) scale(.97); opacity: 0; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); position: relative; } .service-page-overlay.open .service-page { transform: translateY(0) scale(1); opacity: 1; } .service-page-scroll { max-height: 88vh; overflow-y: auto; padding: clamp(1.6rem, 4vw, 2.4rem); } .service-page-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; background: rgba(6,20,34,.55); color: #fff; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .service-page-close:hover { background: rgba(6,20,34,.8); transform: scale(1.06); } .service-page-hero { padding-right: 2.4rem; } .service-page-hero h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-top: .4rem; } .service-page-hero p { margin-top: .9rem; color: var(--rds-ink-soft); line-height: 1.6; } .service-page-gallery { margin-top: 2.2rem; } .service-page-gallery h3, .service-page-faq h3 { font-size: 1.05rem; margin-bottom: 1rem; } .sp-gallery-wrap { position: relative; display: flex; align-items: center; gap: .6rem; } .sp-gallery-track { flex: 1; display: flex; gap: .9rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding-bottom: .3rem; -ms-overflow-style: none; scrollbar-width: none; } .sp-gallery-track::-webkit-scrollbar { display: none; } .sp-gallery-track figure { flex: 0 0 min(78%, 300px); scroll-snap-align: start; margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--rds-bg-tint); aspect-ratio: 4/3; border: 1px solid var(--rds-line); } .sp-gallery-track img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Scaling & Polishing, Dentures & Prosthodontics, and Tooth Filling gallery photos are pre-made before/after collages (both halves stacked in one tall image, some with "Before"/"After" labels) rather than single standalone shots like every other service's gallery. Cropped into the shared 4:3 landscape box, that cover crop was cutting off a large chunk of the collage — often losing an entire before or after half. A taller box sized to match how these particular photos are actually composed keeps them fully readable and visually consistent with the rest of the gallery, without changing the shared "cover" treatment. */ .sp-gallery-track figure:has(img[src*="/scaling-polishing/"]), .sp-gallery-track figure:has(img[src*="/dentures-prosthodontics/"]), .sp-gallery-track figure:has(img[src*="/tooth-filling/"]) { aspect-ratio: 3/4; } .sp-gallery-arrow { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rds-line); background: var(--rds-white); color: var(--rds-blue-deep); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .sp-gallery-arrow:hover { background: var(--rds-blue); color: var(--rds-white); border-color: var(--rds-blue); } .sp-gallery-arrow:disabled { opacity: .35; cursor: default; } .sp-gallery-arrow:disabled:hover { background: var(--rds-white); color: var(--rds-blue-deep); border-color: var(--rds-line); } .sp-gallery-dots { display: flex; gap: .4rem; justify-content: center; margin-top: .9rem; } .sp-gallery-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--rds-line); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .sp-gallery-dots span.active { background: var(--rds-blue); transform: scale(1.3); } .service-page-section { margin-top: 2.2rem; } .service-page-section h3 { font-size: 1.05rem; margin-bottom: .8rem; } .service-page-section p { color: var(--rds-ink-soft); line-height: 1.65; } .service-page-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .service-page-benefits li { position: relative; padding-left: 1.6rem; color: var(--rds-ink-soft); line-height: 1.55; } .service-page-benefits li::before { content: ""; position: absolute; left: 0; top: .45rem; width: 8px; height: 8px; border-radius: 50%; background: var(--rds-blue); } #service-page-signs-list { margin-bottom: 1rem; } #service-page-signs-note { font-size: .92rem; font-style: italic; color: var(--rds-ink-soft); border-left: 2px solid var(--rds-blue); padding-left: .9rem; } .service-page-faq { margin-top: 2.4rem; } .service-page-actions { margin-top: 2.2rem; } @media (max-width: 640px) { .service-page-scroll { padding: 1.4rem; } .sp-gallery-arrow { width: 32px; height: 32px; } .sp-gallery-track figure { flex-basis: 82%; } } /* ---------- Gallery marquee (3 rows, 4 photos visible per row) ---------- Each row's track holds its 4 photos twice back-to-back and animates translateX(0 → -50%) on an infinite loop, so it scrolls seamlessly. Rows alternate direction for visual interest; hover/focus pauses it. */ .gallery-marquee { display: grid; gap: 1.1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); } .marquee-row { overflow: hidden; } .marquee-track { display: flex; gap: 1.1rem; width: max-content; will-change: transform; } .marquee-row--a .marquee-track { animation: marquee-left 48s linear infinite; } .marquee-row--b .marquee-track { animation: marquee-right 48s linear infinite; } .marquee-track figure { margin: 0; flex: 0 0 min(78vw, 900px); aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); } .marquee-track img { width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } .gallery-marquee:hover .marquee-track, .gallery-marquee:focus-within .marquee-track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none !important; transform: none !important; } .marquee-row { overflow-x: auto; } } /* ---------- Booking ---------- */ .booking-section { position: relative; background: var(--rds-blue-deepest); color: var(--rds-white); overflow: hidden; } .booking-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 12% 15%, rgba(75,153,206,.35), transparent 60%); } .booking-grid { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.5rem, 5vw, 4.5rem); } .booking-intro .eyebrow { color: var(--rds-blue-tint); } .booking-intro .eyebrow::before { background: var(--rds-white); box-shadow: 0 0 0 4px rgba(255,255,255,.2); } .booking-intro h2 { color: var(--rds-white); font-size: var(--step-3); } .booking-intro p { margin-top: 1rem; color: rgba(255,255,255,.78); max-width: 40ch; } .booking-steps { margin-top: 2.2rem; display: grid; gap: 1.1rem; } .booking-steps li { display: flex; gap: .9rem; font-size: .92rem; color: rgba(255,255,255,.82); align-items: flex-start; } .step-num { font-family: var(--font-mono); font-size: .78rem; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .booking-card { background: var(--rds-white); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); color: var(--rds-ink); box-shadow: var(--shadow-lift); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .45rem; color: var(--rds-ink-soft); } .field input, .field select, .field textarea { width: 100%; padding: .8rem .95rem; border: 1.5px solid var(--rds-line); border-radius: var(--radius-sm); font: inherit; color: var(--rds-ink); background: var(--rds-white); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--rds-blue); box-shadow: 0 0 0 4px rgba(15,119,190,.13); outline: none; } .field textarea { min-height: 90px; resize: vertical; } .consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; color: var(--rds-ink-soft); margin-bottom: 1.2rem; } .consent input { margin-top: 3px; } .slots-grid { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .3rem; } .slot-btn { padding: .55rem .9rem; border-radius: 999px; border: 1.5px solid var(--rds-line); background: var(--rds-white); font-size: .85rem; font-family: var(--font-mono); transition: all var(--dur-fast) var(--ease-out); } .slot-btn:hover { border-color: var(--rds-blue); } .slot-btn.selected { background: var(--rds-blue); color: var(--rds-white); border-color: var(--rds-blue); } .form-msg { font-size: .85rem; margin-top: .8rem; padding: .7rem .9rem; border-radius: var(--radius-sm); display: none; } .form-msg.show { display: block; } .form-msg.error { background: #FCEAEA; color: #A3312B; } .form-msg.success { background: #E7F6EC; color: #1F7A43; } .confirmation { text-align: center; padding: 1rem 0; } .confirmation .check { width: 64px; height: 64px; border-radius: 50%; background: var(--rds-bg-tint); color: var(--rds-blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; } .confirmation dl { text-align: left; margin-top: 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; font-size: .92rem; } .confirmation dt { color: var(--rds-ink-soft); } .confirmation dd { margin: 0; font-weight: 600; } .status-pill { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-size: .74rem; font-family: var(--font-mono); background: #FFF3D6; color: #8A6116; } /* ---------- Team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .team-card { text-align: center; } .team-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/3.4; margin-bottom: 1.1rem; box-shadow: var(--shadow-soft); } .team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); } .team-card:hover .team-photo img { transform: scale(1.06); } .team-card h3 { font-size: 1.1rem; } .team-card span { display: block; margin-top: .3rem; font-size: .85rem; color: var(--rds-ink-soft); font-family: var(--font-mono); } .team-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1.5rem; border: 1.5px dashed var(--rds-line); border-radius: var(--radius-md); color: var(--rds-ink-soft); } /* ---------- Testimonials ---------- */ #testimonials { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--rds-bg-tint) 0%, #eaf3fb 55%, var(--rds-bg-tint) 100%); } #testimonials::before, #testimonials::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; filter: blur(60px); opacity: .35; pointer-events: none; } #testimonials::before { width: clamp(260px, 32vw, 480px); height: clamp(260px, 32vw, 480px); top: -12%; left: -8%; background: var(--rds-blue-tint); } #testimonials::after { width: clamp(220px, 26vw, 400px); height: clamp(220px, 26vw, 400px); bottom: -14%; right: -6%; background: var(--rds-blue-light); } #testimonials .container { position: relative; z-index: 1; } .testimonial-empty { text-align: center; padding: 3.5rem 1.5rem; border: 1.5px dashed var(--rds-line); border-radius: var(--radius-md); color: var(--rds-ink-soft); max-width: 620px; margin: 0 auto; } /* Google-review card design Desktop: 3 cards | Tablet: 2 cards | Phone: 1 card The card design itself stays the same at every size. */ .google-rating-summary { display:flex;align-items:center;justify-content:center;gap:.6rem;margin:1.6rem 0 2.4rem;flex-wrap:wrap; } .google-rating-summary:empty { display:none; } .grs-score { font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--rds-ink); } .grs-count { font-size:.9rem;color:var(--rds-ink-soft); } .star-row { display:inline-flex;gap:2px;vertical-align:middle; } .star-row svg { display:block; } .google-review-card { position:relative;display:flex;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;background:var(--rds-white);border:1px solid #dadce0;border-radius:12px;padding:1.45rem;box-shadow:0 1px 3px rgba(60,64,67,.10);color:var(--rds-ink);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease; } .google-review-card:hover { transform:translateY(-3px);border-color:#c7cbd1;box-shadow:0 4px 14px rgba(60,64,67,.16); } .grc-head { display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem; } .grc-avatar { width:42px;height:42px;flex:0 0 42px;border-radius:50%;overflow:hidden;background:var(--rds-bg-tint);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700; } .grc-avatar img { width:100%;height:100%;object-fit:cover; } .grc-who { min-width:0;flex:1; } .grc-who strong { display:block;font-size:.92rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .grc-count { display:block;margin-top:.15rem;color:#5f6368;font-size:.76rem; } .grc-meta { display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:0 0 .75rem; } .grc-meta .star-row { color:#fbbc04;font-size:1rem; } .grc-meta .star-row svg { width:16px;height:16px;fill:currentColor; } .grc-time { color:#70757a;font-size:.74rem; } .grc-text { color:#3c4043;font-family:var(--font-body);font-size:.9rem;line-height:1.58;margin:0;white-space:pre-line;overflow-wrap:anywhere; } /* Testimonial initials: always white inside the circular avatars */ .google-review-card .grc-avatar, .testimonial-avatar, .review-avatar { color: #fff !important; } .google-review-card .grc-avatar img, .testimonial-avatar img, .review-avatar img { color: #fff; } /* ---------- FAQ ---------- */ .faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: .8rem; } .faq-item { border: 1px solid var(--rds-line); border-radius: var(--radius-md); overflow: hidden; background: var(--rds-white); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.4rem; background: none; border: none; text-align: left; font-weight: 600; font-size: 1rem; } .faq-q svg { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); color: var(--rds-blue); } .faq-item.open .faq-q svg { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-out); } .faq-a-inner { padding: 0 1.4rem 1.3rem; color: var(--rds-ink-soft); font-size: .93rem; } /* ---------- Contact ---------- */ .contact-social { display: flex; align-items: center; gap: 1rem; margin: -.4rem 0 1.4rem; } .contact-social-label { font-size: .82rem; color: var(--rds-ink-soft); font-family: var(--font-display); letter-spacing: .04em; } .contact-social-links { display: flex; gap: .6rem; } .social-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rds-bg-tint); color: var(--rds-blue); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .social-icon svg { width: 18px; height: 18px; } .social-icon:hover, .social-icon:focus-visible { background: var(--rds-blue); color: #fff; transform: translateY(-2px); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } .contact-info-list { display: grid; gap: 1.2rem; margin-top: 1.8rem; } .contact-info-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border: 1px solid var(--rds-line); border-radius: var(--radius-md); background: var(--rds-white); } .contact-info-item .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--rds-bg-tint); color: var(--rds-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info-item strong { display: block; font-size: .9rem; } .contact-info-item span { font-size: .87rem; color: var(--rds-ink-soft); } .map-embed { margin-top: 1.5rem; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--rds-line); aspect-ratio: 16/9; background: var(--rds-bg-tint); display: flex; align-items: center; justify-content: center; color: var(--rds-ink-soft); font-size: .85rem; text-align:center; padding: 1rem; } /* ---------- Footer ---------- */ .footer { background: var(--rds-blue-deepest); color: rgba(255,255,255,.78); padding: 4rem 0 1.5rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; } .footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; } .footer-brand img { height: 38px; filter: brightness(0) invert(1); } .footer-brand strong { color: var(--rds-white); font-family: var(--font-display); font-size: 1.05rem; } .footer p.desc { font-size: .88rem; max-width: 34ch; } .footer h4 { color: var(--rds-white); font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; } .footer ul { display: grid; gap: .7rem; } .footer a { font-size: .88rem; transition: color var(--dur-fast); } .footer a:hover { color: var(--rds-white); } .footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; font-size: .8rem; } /* ---------- Floating widgets ---------- */ .floating-cta { transition: opacity .25s var(--ease-out), visibility .25s; position: fixed; right: 1.6rem; bottom: 6.2rem; z-index: 90; display: flex; align-items: center; gap: .6rem; padding: .9rem 1.3rem; background: var(--rds-blue); color: var(--rds-white); border-radius: 999px; box-shadow: var(--shadow-lift); font-weight: 600; font-size: .88rem; transition: transform var(--dur-fast) var(--ease-spring); } .floating-cta:hover { transform: translateY(-3px) scale(1.03); } /* New chat-with-us widget (pill with small rotating tooth) */ .chat-with-us { transition: opacity .25s var(--ease-out), visibility .25s; position: fixed; right: 1.6rem; bottom: 9.6rem; z-index: 95; display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; background: var(--rds-white); color: var(--rds-blue-deepest); border-radius: 999px; box-shadow: var(--shadow-lift); border: 1px solid var(--rds-line); font-weight: 700; } .chat-with-us:hover { transform: translateY(-3px); } .chat-with-us-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--rds-blue); display: flex; align-items: center; justify-content: center; } .chat-with-us .chat-label { font-size: .86rem; color: var(--rds-blue-deepest); margin-left: .3rem; } .whatsapp-launcher { position: fixed; left: 1.6rem; bottom: 1.6rem; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lift); transition: transform var(--dur-fast) var(--ease-spring); } .whatsapp-launcher:hover { transform: scale(1.08); } .support-staff-strip { margin-top: 3rem; padding-top: 2.2rem; border-top: 1px solid var(--rds-line); } .support-staff-strip:empty { display: none; } .support-staff-strip h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rds-ink-soft); margin-bottom: 1rem; font-weight: 600; } .support-staff-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; padding: 0; margin: 0; } .support-staff-strip li { display: flex; flex-direction: column; gap: .15rem; } .support-staff-strip strong { font-family: var(--font-display); font-size: 1rem; } .support-staff-strip span { font-size: .82rem; color: var(--rds-ink-soft); } .emergency-note { margin-top: 1.4rem; padding: .9rem 1.1rem; border-radius: var(--radius-md); background: rgba(211, 84, 0, .08); border: 1px solid rgba(211, 84, 0, .25); font-size: .85rem; color: var(--rds-ink-soft); line-height: 1.5; } .emergency-note strong { color: var(--rds-ink); } .chat-quick-actions { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem .9rem; border-top: 1px solid var(--rds-line); } .chat-quick-actions button { font-size: .74rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--rds-line); background: var(--rds-white); color: var(--rds-blue-deepest); cursor: pointer; font-weight: 600; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .chat-quick-actions button:hover { background: var(--rds-blue-tint); transform: translateY(-1px); } .chat-launcher { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: var(--rds-blue); color: var(--rds-white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lift); border: none; transition: transform var(--dur-fast) var(--ease-spring); } .chat-launcher:hover { transform: scale(1.08) rotate(-4deg); } .chat-launcher svg { width: 26px; height: 26px; transition: opacity .15s, transform .15s; } .chat-launcher .icon-close { position: absolute; opacity: 0; transform: scale(.6) rotate(-45deg); } .chat-launcher.open .icon-chat { opacity: 0; transform: scale(.6) rotate(45deg); } .chat-launcher.open .icon-close { opacity: 1; transform: scale(1) rotate(0); } .chat-window { position: fixed; right: 1.6rem; bottom: 6.4rem; z-index: 95; width: min(380px, calc(100vw - 2.4rem)); height: min(560px, calc(100vh - 9rem)); background: var(--rds-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); border: 1px solid var(--rds-line); display: flex; flex-direction: column; overflow: hidden; transform: translateY(24px) scale(.96); opacity: 0; visibility: hidden; pointer-events: none; transform-origin: bottom right; transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-med) var(--ease-out), visibility var(--dur-med); } .chat-window.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; } .chat-head { background: var(--rds-blue-deepest); color: var(--rds-white); padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: .7rem; } .chat-head-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; } .chat-head-text { flex: 1; min-width: 0; } .chat-head strong { display: block; font-family: var(--font-display); font-size: 1.02rem; } .chat-head span { font-size: .78rem; color: rgba(255,255,255,.72); } .chat-close-x { flex-shrink: 0; background: rgba(255,255,255,.12); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); position: relative; z-index: 5; pointer-events: auto !important; } .chat-close-x:hover { background: rgba(255,255,255,.28); } /* On phones, enlarge the tap target to the 44x44px minimum recommended for touch — the header still looks the same, but it's much easier to hit accurately with a thumb. */ @media (max-width: 480px) { .chat-close-x { width: 44px; height: 44px; } .chat-close-x svg { width: 22px; height: 22px; } } .chat-body { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; } .chat-bubble { max-width: 84%; padding: .65rem .9rem; border-radius: 14px; font-size: .89rem; line-height: 1.5; white-space: pre-line; } .chat-bubble.bot { background: var(--rds-bg-tint); align-self: flex-start; border-bottom-left-radius: 4px; } .chat-bubble.user { background: var(--rds-blue); color: var(--rds-white); align-self: flex-end; border-bottom-right-radius: 4px; } .chat-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .6rem; } .chat-chip { padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--rds-blue-tint); background: var(--rds-white); color: var(--rds-blue-deepest); font-size: .82rem; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .chat-chip:hover { background: var(--rds-blue-tint); transform: translateY(-1px); } .chat-disclaimer { font-size: .72rem; color: var(--rds-ink-soft); text-align: center; padding: .4rem 1rem; } .chat-typing { display: flex; gap: 4px; padding: .3rem 0; } .chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--rds-blue-tint); animation: typing-bounce 1.1s infinite ease-in-out; } .chat-typing span:nth-child(2) { animation-delay: .15s; } .chat-typing span:nth-child(3) { animation-delay: .3s; } @keyframes typing-bounce { 0%,60%,100% { transform: translateY(0); opacity:.5; } 30% { transform: translateY(-5px); opacity: 1; } } .chat-input-row { display: flex; gap: .6rem; padding: .9rem; border-top: 1px solid var(--rds-line); } .chat-input-row input { flex: 1; border: 1.5px solid var(--rds-line); border-radius: 999px; padding: .65rem 1rem; font: inherit; } .chat-input-row input:focus { outline: none; border-color: var(--rds-blue); } .chat-input-row button { width: 42px; height: 42px; border-radius: 50%; background: var(--rds-blue); color: #fff; border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--rds-blue); color: #fff; padding: .8rem 1.2rem; z-index: 200; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ========================================================== PREMIUM MOTION SYSTEM Custom cursor, kinetic type, glow-follow depth, magnetic buttons, animated gradient mesh, morphing nav indicator. All progressively enhanced — the site is fully usable and already animated without JS re-running any of this. ========================================================== */ /* ---------- Custom cursor (desktop/hover-capable only) ---------- */ @media (hover: hover) and (pointer: fine) { html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; } } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; } .cursor-dot { width: 7px; height: 7px; background: var(--rds-blue); opacity: 0; } .cursor-ring { width: 38px; height: 38px; border: 1.5px solid rgba(15,119,190,.45); opacity: 0; transition: width .25s var(--ease-spring), height .25s var(--ease-spring), border-color .25s, background .25s; } html.cursor-ready .cursor-dot, html.cursor-ready .cursor-ring { opacity: 1; } .cursor-ring.hovering { width: 60px; height: 60px; background: rgba(15,119,190,.08); border-color: var(--rds-blue); } .cursor-ring.on-dark { border-color: rgba(255,255,255,.55); } .cursor-ring.on-dark.hovering { background: rgba(255,255,255,.12); border-color: #fff; } /* ---------- Kinetic split-text headline reveal ---------- */ .split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -0.08em; } .split-word { display: inline-block; transform: translateY(115%) rotate(4deg); opacity: 0; transition: transform .78s var(--ease-spring), opacity .6s var(--ease-out); transition-delay: calc(var(--w, 0) * 42ms); } [data-split].in-view .split-word { transform: translateY(0) rotate(0deg); opacity: 1; } /* ---------- Clip-path section-head reveal ---------- */ [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease-spring); } [data-reveal="clip"].in-view { clip-path: inset(0 0% 0 0); } /* ---------- Glow-follow depth cards ---------- */ .glow-card { position: relative; isolation: isolate; } .glow-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .3s var(--ease-out); background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(15,119,190,.16), transparent 70%); } .glow-card:hover::before { opacity: 1; } /* ---------- Magnetic buttons ---------- */ .magnetic { position: relative; transition: transform .22s var(--ease-spring); } /* ---------- Morphing nav indicator ---------- */ .nav-links { position: relative; } .nav-indicator { position: absolute; bottom: -3px; height: 2px; background: var(--rds-blue); border-radius: 2px; opacity: 0; transition: left .32s var(--ease-spring), width .32s var(--ease-spring), opacity .2s; } .nav-links:hover .nav-indicator { opacity: 1; } .nav-links a::after { display: none; } /* replaced by the shared indicator above */ @media (prefers-reduced-motion: reduce) { .split-word { transform: none !important; opacity: 1 !important; transition: none !important; } [data-reveal="clip"] { clip-path: inset(0 0 0 0) !important; } .cursor-dot, .cursor-ring { display: none !important; } } @media (hover: none) { .cursor-dot, .cursor-ring { display: none !important; } } /* White initials for review/testimonial icon circles */ .grc-avatar, .testimonial-avatar, .review-avatar { color: #fff !important; } /* ========================================================== GOOGLE-STYLE TESTIMONIALS + RESPONSIVE MOBILE OVERRIDES ========================================================== */ .testimonial-grid,.testimonials-grid,.testimonial-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;align-items:stretch} .testimonial-grid .google-review-card,.testimonials-grid .google-review-card,.testimonial-list .google-review-card{height:100%;} /* ---------- Testimonials section background video ---------- The