/* ===================================================================== Sri Sai Multispeciality Dental Clinic — standalone site stylesheet. No build step. Organised as: 1) design tokens 2) base element rules 3) reusable component classes (ss-*) 4) page/section layout classes. Custom-property names and .ss-* class names match the design system at project root (tokens/*.css, components/components.css) so the visual language is identical to the reference kit. ===================================================================== */ /* ===================================================================== 1. TOKENS ===================================================================== */ /* ---- fonts ---- The Saira stylesheet itself is linked from each HTML (not @import'd here) so the browser's preload scanner discovers it while still parsing the HTML, in parallel with this file — an @import here would only be discovered after this stylesheet downloads and parses far enough to reach it, adding a serial round-trip to font discovery. */ :root{ /* Single family throughout. --font-display stays as the hook for the largest headings so a display face can be swapped in without touching components. */ --font-display:"Saira","Segoe UI",system-ui,-apple-system,sans-serif; --font-heading:"Saira","Segoe UI",system-ui,-apple-system,sans-serif; --font-body:"Saira","Segoe UI",system-ui,-apple-system,sans-serif; --font-numeric:"Saira","Segoe UI",system-ui,sans-serif; } /* ---- colors ---- */ :root{ --color-primary-50:#F6F4FC; --color-primary-100:#EDE8F7; --color-primary-200:#DBD2EF; --color-primary-300:#C0B2E1; --color-primary-400:#9D88CE; --color-primary-500:#7D64B8; --color-primary-600:#63499F; --color-primary-700:#4E3980; --color-primary-800:#3A2B60; --color-primary-900:#261C41; --color-white:#FFFFFF; --color-offwhite:#FBFAFD; --color-background:#F3ECFB; --color-surface:#E5D8F3; --color-surface-elevated:#FFFFFF; --color-surface-tint:#DCCCEE; --color-surface-dark:#271B45; --color-text-primary:#1C1530; --color-text-secondary:#544D66; --color-text-muted:#625B77; /* darkened from #847D94 2026-08-20 — original failed WCAG 1.4.3 AA (~3.9:1 on white, ~3.5:1 on the tinted section background; needs 4.5:1 at this text size). This value clears 4.5:1 against both real usage contexts. */ --color-text-inverse:#FFFFFF; --color-text-on-primary:#FFFFFF; --color-text-link:#5B3F97; --color-text-link-hover:#3A2B60; --color-border:#D8CAE9; --color-border-strong:#BFACD9; --color-divider:#E2D6F0; --color-focus:#7D64B8; --color-success:#1C7A57; --color-success-surface:#E8F5F0; --color-warning:#9A6100; --color-warning-surface:#FDF3E2; --color-error:#B3271E; --color-error-surface:#FCEDEB; --color-info:#245FA6; --color-info-surface:#EAF1FA; --color-whatsapp:#128C7E; --color-whatsapp-hover:#0E7166; --color-emergency:#A3231C; --color-emergency-surface:#FBEAE8; /* Accent pair used only for the icon rotation (see section 5). Both are contrast-checked against white: teal 4.8:1, coral 5.1:1. */ --color-teal:#0B7F7E; --color-teal-surface:#E3F6F5; --color-teal-border:#C7EBE9; --color-coral:#C93A29; --color-coral-surface:#FFEBE7; --color-coral-border:#FBD3CA; --surface-page:var(--color-background); --surface-section:var(--color-surface); --surface-card:var(--color-surface-elevated); --text-body:var(--color-text-secondary); --text-heading:var(--color-text-primary); --action-primary:var(--color-primary-600); --action-primary-hover:var(--color-primary-700); --action-primary-active:var(--color-primary-800); } /* ---- typography ---- */ :root{ --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800; --text-display-xl:clamp(2.375rem,4.17vw,3.75rem); --text-display-lg:clamp(2rem,3.33vw,3rem); --text-display-md:clamp(1.75rem,2.8vw,2.5rem); --text-h1:clamp(1.875rem,2.8vw,2.5rem); --text-h2:clamp(1.5rem,2.2vw,2rem); --text-h3:clamp(1.25rem,1.7vw,1.5rem); --text-h4:clamp(1.125rem,1.4vw,1.25rem); --text-body-lg:clamp(1.0625rem,1.35vw,1.1875rem); --text-body:clamp(1rem,1.2vw,1.0625rem); --text-body-sm:0.9375rem; --text-caption:0.8125rem; --text-button:1rem; --text-nav:0.96875rem; --text-overline:0.78125rem; --text-stat:clamp(2.5rem,3.9vw,3.5rem); --leading-tight:1.06; --leading-snug:1.2; --leading-heading:1.22; --leading-normal:1.6; --leading-relaxed:1.75; --tracking-tighter:-0.018em; --tracking-tight:-0.012em; --tracking-normal:0; --tracking-wide:0.02em; --tracking-overline:0.18em; } .ss-display-xl{font-family:var(--font-display);font-size:var(--text-display-xl);font-weight:var(--weight-extrabold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tighter);color:var(--text-heading)} .ss-h1{font-family:var(--font-display);font-size:var(--text-h1);font-weight:var(--weight-bold);line-height:var(--leading-heading);letter-spacing:var(--tracking-tight);color:var(--text-heading)} .ss-h3{font-family:var(--font-heading);font-size:var(--text-h3);font-weight:var(--weight-semibold);line-height:1.35;letter-spacing:-.008em;color:var(--text-heading)} .ss-h4{font-family:var(--font-heading);font-size:var(--text-h4);font-weight:var(--weight-semibold);line-height:1.4;letter-spacing:-.008em;color:var(--text-heading)} /* margin:0 — every use of .ss-body-lg sits inside a grid (.section-header, .hero-copy) that already controls spacing via its own `gap`; the default UA paragraph margin was stacking on top of that gap, nearly tripling the visual space below headings sitewide (e.g. 31px instead of the intended 12px gap under every section h1/h2). */ .ss-body-lg{margin:0;font-family:var(--font-body);font-size:var(--text-body-lg);font-weight:var(--weight-regular);line-height:var(--leading-relaxed);color:var(--text-body)} .ss-body{font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-regular);line-height:var(--leading-normal);color:var(--text-body)} .ss-body-sm{margin:0;font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-regular);line-height:var(--leading-normal);color:var(--text-body)} .ss-caption{font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-regular);line-height:1.45;color:var(--color-text-muted)} .ss-overline{font-family:var(--font-body);font-size:var(--text-overline);font-weight:var(--weight-semibold);line-height:1.2;letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--color-primary-600)} .ss-stat{font-family:var(--font-numeric);font-size:var(--text-stat);font-weight:var(--weight-extrabold);line-height:1;letter-spacing:var(--tracking-tighter);font-variant-numeric:tabular-nums;color:var(--color-primary-700)} /* ---- spacing ---- */ :root{ --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-30:120px; --card-padding:var(--space-6); --card-padding-lg:var(--space-8); --card-gap:var(--space-6); --section-padding-y:var(--space-20); --section-padding-y-lg:var(--space-30); --section-header-gap:var(--space-12); --form-field-gap:var(--space-5); --form-label-gap:var(--space-2); --form-group-gap:var(--space-6); --nav-height:84px; --nav-height-mobile:68px; --nav-item-gap:var(--space-8); --nav-padding-x:var(--space-6); --mobile-bar-height:64px; --mobile-bar-safe-offset:calc(var(--mobile-bar-height) + var(--space-4)); } @media (min-width:768px){:root{--card-padding:var(--card-padding-lg);--section-padding-y:var(--space-20)}} @media (min-width:1024px){:root{--section-padding-y:var(--section-padding-y-lg)}} /* ---- layout / containers ---- */ :root{ --container-max:1200px; --container-max-wide:1360px; --container-max-narrow:760px; --container-padding:20px; --grid-gap:var(--space-6); --grid-gap-lg:var(--space-8); --bp-sm:480px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1440px; --z-header:100;--z-mobile-bar:90;--z-drawer:200;--z-modal:300;--z-toast:400; } @media (min-width:768px){:root{--container-padding:32px}} @media (min-width:1024px){:root{--container-padding:40px;--grid-gap:var(--grid-gap-lg)}} .ss-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-padding)} .ss-container--wide{max-width:var(--container-max-wide)} .ss-container--narrow{max-width:var(--container-max-narrow)} .ss-section{padding-block:var(--section-padding-y)} .ss-section--tint{background:var(--surface-section)} .ss-grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} .ss-grid--2{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))} /* ---- radius ---- */ :root{ --radius-none:0;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:28px; --radius-pill:999px;--radius-image:var(--radius-lg); } /* ---- shadows ---- */ :root{ --shadow-none:none; --shadow-sm:0 1px 2px rgba(34,26,56,.04),0 2px 6px rgba(34,26,56,.03); --shadow-md:0 4px 12px rgba(34,26,56,.05),0 12px 28px rgba(34,26,56,.05); --shadow-lg:0 8px 24px rgba(34,26,56,.06),0 24px 56px rgba(34,26,56,.07); --shadow-floating:0 12px 32px rgba(34,26,56,.10),0 32px 72px rgba(34,26,56,.13); --shadow-focus:0 0 0 3px rgba(125,100,184,.26); /* Cards use a stacked ramp — tight contact shadow through wide ambient spread — which reads as real depth in a way a single blur cannot. Tinted purple so it sits in the surface palette instead of greying it out. */ --shadow-card:0 1px 2px rgba(36,26,62,.06),0 4px 8px rgba(36,26,62,.05), 0 12px 24px rgba(36,26,62,.06),0 24px 44px rgba(36,26,62,.05); --shadow-card-hover:0 2px 4px rgba(36,26,62,.08),0 8px 16px rgba(36,26,62,.07), 0 20px 40px rgba(36,26,62,.09),0 36px 68px rgba(36,26,62,.08); /* Raised slab: card ramp + a bright top inset edge and a dark bottom inset, which together fake the lit top face and shaded lower face of a solid box. */ --shadow-raised:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(36,26,62,.09), 0 2px 4px rgba(36,26,62,.07),0 8px 14px rgba(36,26,62,.07), 0 18px 34px rgba(36,26,62,.09),0 34px 62px rgba(36,26,62,.09); --shadow-inset-border:inset 0 0 0 1px var(--color-border); } /* ---- motion ---- */ :root{ --transition-fast:140ms;--transition-normal:220ms;--transition-slow:380ms; --ease-standard:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.4,0,.2,1); --motion-hover:all var(--transition-fast) var(--ease-standard); --motion-panel:all var(--transition-normal) var(--ease-out); --lift-hover:translateY(-3px);--press-scale:.985; } @media (prefers-reduced-motion:reduce){ :root{--transition-fast:0ms;--transition-normal:0ms;--transition-slow:0ms;--lift-hover:none;--press-scale:1} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } /* ===================================================================== 2. BASE ===================================================================== */ *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-wrap:pretty} h1,h2,h3,h4{font-family:var(--font-heading);color:var(--text-heading);margin:0} a{color:var(--color-text-link);text-decoration-color:var(--color-primary-300);text-underline-offset:3px;transition:var(--motion-hover)} a:hover{color:var(--color-text-link-hover);text-decoration-color:currentColor} :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)} img{max-width:100%;display:block} .ss-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Off-screen until focused, then a real visible skip target for keyboard users. */ .ss-skip-link{position:absolute;top:-999px;left:8px;z-index:var(--z-toast);background:var(--color-primary-700); color:#fff;padding:12px 20px;border-radius:var(--radius-md);font-family:var(--font-body);font-weight:var(--weight-semibold);text-decoration:none} .ss-skip-link:focus{top:8px} @media (max-width:767px){body{padding-bottom:var(--mobile-bar-safe-offset)}} /* ===================================================================== 3. COMPONENTS ===================================================================== */ /* ---- Buttons ---- */ .ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); min-height:48px;padding-inline:var(--space-6);border:1px solid transparent;border-radius:var(--radius-md); font-family:var(--font-body);font-size:var(--text-button);font-weight:var(--weight-semibold);line-height:1;letter-spacing:.005em; text-decoration:none;cursor:pointer;transition:var(--motion-hover);white-space:nowrap;-webkit-tap-highlight-color:transparent} .ss-btn--sm{min-height:40px;padding-inline:var(--space-4);font-size:var(--text-body-sm)} .ss-btn--block{width:100%} .ss-btn:active:not(:disabled){transform:scale(var(--press-scale))} .ss-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px} .ss-btn:disabled,.ss-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none} .ss-btn--primary{background:var(--action-primary);color:var(--color-text-on-primary);box-shadow:var(--shadow-sm)} .ss-btn--primary:hover:not(:disabled){background:var(--action-primary-hover);box-shadow:var(--shadow-md);color:var(--color-text-on-primary)} .ss-btn--primary:active:not(:disabled){background:var(--action-primary-active)} .ss-btn--secondary{background:var(--color-white);color:var(--color-primary-700);border-color:var(--color-primary-200)} .ss-btn--secondary:hover:not(:disabled){background:var(--color-primary-50);border-color:var(--color-primary-300);color:var(--color-primary-700)} .ss-btn--secondary:active:not(:disabled){background:var(--color-primary-100)} .ss-btn--emergency{background:var(--color-emergency-surface);color:var(--color-emergency);border-color:#EFC7C3} .ss-btn--emergency:hover:not(:disabled){background:#F8DEDB;border-color:#E4B0AB} .ss-btn__spinner{width:1em;height:1em;border-radius:var(--radius-pill);border:2px solid currentColor;border-top-color:transparent;animation:ss-spin 700ms linear infinite} @keyframes ss-spin{to{transform:rotate(360deg)}} /* ---- Icon button ---- */ .ss-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-md); border:1px solid var(--color-border);background:var(--color-white);color:var(--color-primary-700);cursor:pointer;transition:var(--motion-hover)} .ss-iconbtn--pill{border-radius:var(--radius-pill)} .ss-iconbtn--ghost{border-color:transparent;background:transparent} .ss-iconbtn:hover{background:var(--color-primary-50);border-color:var(--color-primary-200)} .ss-iconbtn:active{transform:scale(var(--press-scale))} /* ---- Cards ---- */ .ss-card{background:var(--surface-card);border:1px solid var(--color-border);border-radius:var(--radius-lg); padding:var(--card-padding);box-shadow:var(--shadow-card);transition:box-shadow var(--transition-normal) var(--ease-standard),transform var(--transition-normal) var(--ease-standard),border-color var(--transition-fast) var(--ease-standard)} .ss-card--interactive{cursor:pointer} .ss-card--interactive:hover{box-shadow:var(--shadow-card-hover);border-color:var(--color-primary-200);transform:var(--lift-hover)} .ss-card--interactive:focus-within{border-color:var(--color-primary-300)} .ss-card__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--radius-md); background:var(--color-primary-50);border:1px solid var(--color-primary-100);color:var(--color-primary-600);flex:none} /* ---- Badges / chips ---- */ .ss-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--radius-pill);border:1px solid transparent; font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:.01em} .ss-badge--brand{background:var(--color-primary-50);border-color:var(--color-primary-200);color:var(--color-primary-700)} /* ---- Forms ---- */ .ss-field{display:flex;flex-direction:column;gap:var(--form-label-gap)} .ss-label{font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)} .ss-label__req{color:var(--color-error);margin-left:2px} .ss-hint{font-size:var(--text-caption);color:var(--color-text-muted)} .ss-control{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm); background:var(--color-white);color:var(--color-text-primary);font-family:var(--font-body);font-size:var(--text-body); line-height:1.4;transition:var(--motion-hover)} .ss-control::placeholder{color:var(--color-text-muted)} .ss-control:hover:not(:disabled){border-color:var(--color-primary-300)} .ss-control:focus{outline:none;border-color:var(--color-primary-500);box-shadow:var(--shadow-focus)} .ss-control:disabled{background:var(--color-surface);color:var(--color-text-muted);cursor:not-allowed} .ss-control--textarea{min-height:120px;resize:vertical} .ss-control--select{appearance:none;background-image:linear-gradient(45deg,transparent 49%,var(--color-primary-600) 50%),linear-gradient(-45deg,transparent 49%,var(--color-primary-600) 50%); background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px} /* ---- Themed select (custom listbox, see initSelects in script.js) ---- The native control stays in the form for submission but is hidden once its replacement is built — so it remains visible if JS never runs. */ .ss-select{position:relative} .ss-select__native{display:none} .ss-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3); width:100%;min-height:48px;padding:12px 14px;text-align:left;cursor:pointer; border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-white); font-family:var(--font-body);font-size:var(--text-body);line-height:1.4;color:var(--color-text-primary); transition:var(--motion-hover)} .ss-select__trigger:hover{border-color:var(--color-primary-300)} .ss-select__trigger[aria-expanded="true"]{border-color:var(--color-primary-500);box-shadow:var(--shadow-focus)} .ss-select__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ss-select__value--placeholder{color:var(--color-text-muted)} .ss-select__chev{flex:none;color:var(--color-primary-600);transition:transform var(--transition-normal) var(--ease-standard)} .ss-select__trigger[aria-expanded="true"] .ss-select__chev{transform:rotate(180deg)} .ss-select__panel{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0; display:grid;gap:2px;padding:var(--space-2);max-height:270px;overflow-y:auto;overscroll-behavior:contain; background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md); box-shadow:var(--shadow-card-hover);transform-origin:top; animation:ss-select-in var(--transition-fast) var(--ease-out)} @keyframes ss-select-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .ss-select__option{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3); padding:11px 12px;border-radius:var(--radius-sm);cursor:pointer; font-size:var(--text-body-sm);color:var(--color-text-secondary);transition:var(--motion-hover)} .ss-select__option:hover{background:var(--color-primary-50);color:var(--color-primary-700)} /* Highlight rather than an outline box — an outlined row reads as a text input. */ .ss-select__option:focus,.ss-select__option:focus-visible{outline:none;background:var(--color-primary-100);color:var(--color-primary-700)} .ss-select__option[aria-selected="true"]{background:var(--color-primary-50);color:var(--color-primary-700);font-weight:var(--weight-semibold)} .ss-select__check{flex:none;opacity:0;color:var(--color-primary-600)} .ss-select__option[aria-selected="true"] .ss-select__check{opacity:1} .ss-field[data-state="error"] .ss-control{border-color:var(--color-error);background:var(--color-error-surface)} .ss-field[data-state="success"] .ss-control{border-color:var(--color-success)} .ss-message{display:flex;align-items:center;gap:6px;font-size:var(--text-caption);font-weight:var(--weight-medium)} .ss-message--error{color:var(--color-error)} .ss-message--success{color:var(--color-success)} /* ---- Accordion ---- */ .ss-accordion{border-top:1px solid var(--color-divider)} .ss-accordion__item{border-bottom:1px solid var(--color-divider)} .ss-accordion__trigger{display:flex;width:100%;gap:var(--space-4);align-items:center;justify-content:space-between; padding:var(--space-5) var(--space-2);background:none;border:0;cursor:pointer;text-align:left; font-family:var(--font-heading);font-size:var(--text-h4);font-weight:var(--weight-semibold);color:var(--color-text-primary);transition:var(--motion-hover)} .ss-accordion__trigger:hover{color:var(--color-primary-700)} .ss-accordion__chev{flex:none;color:var(--color-primary-600);transition:transform var(--transition-normal) var(--ease-standard)} .ss-accordion__item[data-open="true"] .ss-accordion__chev{transform:rotate(180deg)} .ss-accordion__panel{overflow:hidden;display:grid;grid-template-rows:minmax(0,0fr);transition:grid-template-rows var(--transition-normal) var(--ease-out)} .ss-accordion__item[data-open="true"] .ss-accordion__panel{grid-template-rows:minmax(0,1fr)} .ss-accordion__panel>div{min-height:0;overflow:hidden;padding:0 var(--space-2) var(--space-5);color:var(--color-text-secondary);font-size:var(--text-body)} /* ---- Header / nav ---- */ .ss-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(243,236,251,.82);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid transparent;transition:var(--motion-panel)} .ss-header[data-scrolled="true"]{border-bottom-color:var(--color-border);box-shadow:var(--shadow-sm);background:rgba(243,236,251,.94)} .ss-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:var(--nav-height-mobile)} @media (min-width:1024px){.ss-header__inner{min-height:var(--nav-height)}} .ss-navlist{display:flex;align-items:center;gap:var(--nav-item-gap);list-style:none;margin:0;padding:0} .ss-navlink{font-family:var(--font-body);font-size:var(--text-nav);font-weight:var(--weight-medium);color:var(--color-text-secondary); text-decoration:none;padding:10px 4px;position:relative;transition:var(--motion-hover)} .ss-navlink:hover{color:var(--color-primary-700)} .ss-navlink:hover::after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;border-radius:2px;background:var(--color-primary-300)} .ss-navlink[aria-current="true"]:hover::after{background:var(--color-primary-600)} .ss-navlink[aria-current="true"]{color:var(--color-primary-700)} .ss-navlink[aria-current="true"]::after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;border-radius:2px;background:var(--color-primary-600)} .ss-drawer{position:fixed;inset:0;z-index:var(--z-drawer);background:rgba(38,28,65,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity var(--transition-normal) var(--ease-standard)} .ss-drawer[data-open="true"]{opacity:1;pointer-events:auto} .ss-drawer__panel{position:absolute;inset:var(--space-3) var(--space-3) auto 0;left:var(--space-3);right:var(--space-3);background:var(--color-white);padding:var(--space-5); border-radius:var(--radius-xl);border:1px solid var(--color-border);transform:translateY(-12px);opacity:0; transition:transform var(--transition-normal) var(--ease-out),opacity var(--transition-normal) var(--ease-out);box-shadow:var(--shadow-lg)} .ss-drawer[data-open="true"] .ss-drawer__panel{transform:none;opacity:1} /* Room for the close button above the nav list, so it doesn't sit on top of "About". */ .ss-drawer__panel{padding-top:calc(var(--space-5) + 44px)} .drawer-close{position:absolute;top:var(--space-3);right:var(--space-3);background:var(--color-white)} .ss-nav-desktop{display:none} @media (min-width:1024px){.ss-nav-desktop{display:block}.ss-nav-toggle{display:none}} /* ---- Mobile bottom actions ---- */ .ss-mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mobile-bar);display:grid;grid-auto-flow:column;grid-auto-columns:1fr; background:var(--color-white);border-top:1px solid var(--color-border);box-shadow:var(--shadow-floating); padding-bottom:env(safe-area-inset-bottom)} .ss-mobilebar__action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:var(--mobile-bar-height); border:0;background:none;cursor:pointer;font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-semibold); color:var(--color-text-secondary);text-decoration:none;transition:var(--motion-hover)} .ss-mobilebar__action:hover{background:var(--color-primary-50)} .ss-mobilebar__action--primary{background:var(--action-primary);color:#fff} .ss-mobilebar__action--primary:hover{background:var(--action-primary-hover)} @media (min-width:768px){.ss-mobilebar{display:none}} /* ---- Gallery ---- */ .ss-gallery{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,1fr)} /* 3 columns with exactly 4 cards leaves the 4th orphaned alone on its own row with two empty column-widths beside it. Stay at 2 columns through the tablet range instead — a clean 2x2 grid — until auto-fit below actually has room for all 4 side by side. */ @media (min-width:768px){.ss-gallery{gap:var(--space-4)}} /* Fluid rather than a fixed column count: a hardcoded count here went stale once already when a gallery card was removed, leaving an empty trailing column. auto-fit adapts automatically to however many cards actually exist. */ @media (min-width:1024px){.ss-gallery{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}} .ss-gallerycard{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--color-border); background:var(--color-surface);cursor:pointer;padding:0;box-shadow:var(--shadow-card);transition:var(--motion-hover)} .ss-gallerycard__media{aspect-ratio:4/3;width:100%;background:var(--color-surface-tint);display:grid;place-items:center;color:var(--color-primary-400)} .ss-gallerycard img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow) var(--ease-out)} .ss-gallerycard:hover img{transform:scale(1.04)} .ss-gallerycard__caption{position:absolute;inset:auto 0 0 0;padding:var(--space-4) var(--space-4) var(--space-3);text-align:left; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 65%,rgba(0,0,0,0) 100%);color:#fff;font-size:var(--text-caption);font-weight:var(--weight-semibold)} .ss-gallerycard__category{display:block;opacity:.85;font-weight:var(--weight-medium)} .ss-gallerycard:hover{box-shadow:var(--shadow-card-hover);transform:var(--lift-hover)} .ss-gallerycard.is-placeholder .ss-gallerycard__caption{display:none} /* ---- Overlay / lightbox ---- */ [hidden]{display:none!important} .ss-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--space-4); background:rgba(30,24,48,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .ss-lightbox{width:100%;max-width:min(1000px,92vw);background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-floating)} /* ---- Media / imagery ---- */ .ss-media{overflow:hidden;border-radius:var(--radius-image);background:var(--color-surface-tint);position:relative} .ss-media img{width:100%;height:100%;object-fit:cover} .ss-media--hero{border-radius:var(--radius-xl);aspect-ratio:4/3} .ss-media--portrait{aspect-ratio:3/4} .ss-media--wide{aspect-ratio:16/9} .ss-placeholder{display:grid;place-items:center;gap:var(--space-2);width:100%;height:100%;padding:var(--space-6);text-align:center; color:var(--color-primary-600);background:repeating-linear-gradient(135deg,var(--color-primary-50) 0 10px,#fff 10px 20px); font-size:var(--text-caption);font-weight:var(--weight-semibold)} /* ---- Scroll reveal ---- */ .ss-reveal{opacity:0;transform:translateY(12px);transition:opacity var(--transition-slow) var(--ease-out),transform var(--transition-slow) var(--ease-out)} .ss-reveal.is-visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.ss-reveal{opacity:1;transform:none}} /* ===================================================================== 4. PAGE / SECTION LAYOUT ===================================================================== */ .section-stack{display:grid;gap:var(--section-header-gap)} .section-header{display:grid;gap:var(--space-3);max-width:760px} /* ---- Wordmark ---- */ .wordmark{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none} /* Flex items default to min-width:auto, refusing to shrink below the brand text's full-line width — the classic flexbox overflow trap. Without this, the header's own flex row (wordmark + actions) can force horizontal overflow at the narrowest phone widths instead of letting the two-line brand text wrap. */ .ss-header__inner .wordmark{min-width:0} .ss-header__inner .wordmark__text{min-width:0} .wordmark__mark{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-md); background:#fff;border:1px solid var(--color-border);overflow:hidden;flex:none} .wordmark__mark img{width:100%;height:100%;object-fit:contain;padding:3px} .wordmark__text{display:grid;line-height:1.15} .wordmark__brand,.wordmark__sub{font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:18px;letter-spacing:-.02em;color:var(--color-text-primary)} .site-footer .wordmark__brand,.site-footer .wordmark__sub{color:#fff} .site-footer .wordmark__mark{background:#fff;border-color:rgba(255,255,255,.18)} /* The brand lockup is long; ease it down on narrow phones so the header never crowds. */ @media (max-width:520px){ .wordmark{gap:var(--space-2)} .wordmark__mark{width:34px;height:34px} .wordmark__brand,.wordmark__sub{font-size:16px} } /* At the narrow end of the desktop breakpoint (laptop widths just past 1024px) the full nav list + Book Appointment button leave too little room for the wordmark at full size, wrapping "Sri Sai Multispeciality" onto a second line on top of the "Dental Clinic" subline — three lines instead of two. Shrink the wordmark and tighten nav/header spacing so it stays two lines. */ @media (min-width:1024px) and (max-width:1279px){ .ss-header__inner{gap:var(--space-4)} .ss-navlist{gap:var(--space-4)} .ss-header__inner .wordmark{gap:var(--space-2)} .ss-header__inner .wordmark__mark{width:32px;height:32px} .ss-header__inner .wordmark__brand,.ss-header__inner .wordmark__sub{font-size:13px} } /* ---- Header ---- */ .header-actions{display:flex;align-items:center;gap:var(--space-3)} /* Below 768px the header's own "Book Appointment" button is redundant with the fixed mobile bottom bar's identical action (same breakpoint as .ss-mobilebar below) — the wordmark + button + hamburger otherwise don't fit the narrowest phone widths together. The drawer's own Book Appointment button still covers this once the hamburger is opened. */ @media (max-width:767px){.header-actions>.ss-btn{display:none}} .drawer-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)} .drawer-list a{display:block;padding:14px 12px;font-family:var(--font-body);font-size:var(--text-body-lg);font-weight:var(--weight-semibold); color:var(--color-text-primary);text-decoration:none;border-bottom:1px solid var(--color-divider);border-radius:var(--radius-md);transition:var(--motion-hover)} .drawer-list li:last-child a{border-bottom:0} .drawer-list a:hover{background:var(--color-primary-50);color:var(--color-primary-700)} .drawer-actions{display:grid;gap:var(--space-3);margin-top:var(--space-5)} /* ---- Hero ---- */ .hero-shell{display:flex;flex-direction:column;justify-content:center;gap:var(--space-12); min-height:calc(100vh - var(--nav-height));min-height:calc(100dvh - var(--nav-height))} /* At tablet width and below, hero copy + stats together are usually shorter than a full viewport, so centering them inside that min-height adds dead empty hero background above the heading. Let the hero size to its own content through the whole tablet range and below instead. */ @media (max-width:1023px){ .hero-shell{min-height:auto;justify-content:flex-start} } /* With the hero no longer centered above, the stats bar's bottom edge sits flush against About's own background with zero space between them — the two are both a similar lavender tint, so the white stats card reads as sitting right ON the seam between the sections instead of inside the hero. At full desktop width the viewport-height centering above naturally leaves generous hero background below the stats bar before About even starts; reproduce that same breathing room deliberately here so the stats bar is unambiguously still "inside" the hero at every width below it. */ @media (max-width:1023px){ .hero-stats-wrap{margin-bottom:var(--space-16)} } .hero-section{padding-block:var(--space-8)} .hero-grid{display:grid;gap:var(--space-10);align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))} .hero-copy{display:grid;gap:var(--space-4);justify-items:start} .hero-title{margin:0;max-width:16ch;text-wrap:balance} .hero-lead{margin:0;max-width:48ch} .hero-list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)} .hero-list__item{display:inline-flex;gap:8px;align-items:center} /* Tooth glyph instead of a plain dot. Lucide ships no tooth icon, so the shape is an inline SVG data URI — keeps it markup-free and recolourable per-rule. */ .hero-list__dot{width:15px;height:15px;flex:none;background-repeat:no-repeat;background-position:center;background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363499F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C9.5 2 8.8 3 7 3 4.8 3 3.5 4.7 3.5 7.5c0 2.6.9 4 1.5 6.2.5 1.9.6 4.6 1.4 5.6.9 1.1 2.1-.2 2.4-2.1.3-2 .6-3.7 3.2-3.7s2.9 1.7 3.2 3.7c.3 1.9 1.5 3.2 2.4 2.1.8-1 .9-3.7 1.4-5.6.6-2.2 1.5-3.6 1.5-6.2C20.5 4.7 19.2 3 17 3c-1.8 0-2.5-1-5-1Z'/%3E%3C/svg%3E")} /* hero-grid collapses to a single column below ~790px (see the auto-fit minmax(340px) track above) — below that, .hero-media is the sole item in its row and should fill the column like the about/why-choose-us photos do. The height cap only makes sense once the grid is genuinely two columns: without gating it, aspect-ratio reconciles the mismatch by shrinking the box's WIDTH to match the capped height, leaving the image small and off-center with empty space beside it instead of filling the column. */ .hero-media{max-height:none} @media (min-width:800px){ .hero-media{max-height:min(38vw,420px)} } /* The eyebrow badge's text is long enough to wrap onto a second line inside the pill on narrow phones, which reads oddly for a single-line label. Scale it down smoothly so it always fits on one line; it settles back to the base --text-caption size once the viewport is wide enough to need no help (~480px, verified against the text's actual rendered width). */ @media (max-width:479px){ .hero-copy .ss-badge{font-size:clamp(0.625rem,3.1vw,0.8125rem)} } .hero-stats-wrap{margin-top:var(--space-10)} /* ---- Stats ---- */ /* Full-bleed raised ledge: spans edge to edge, with the lit top lip and shaded underside carrying the depth since there are no side edges to shadow. */ .stats-section{position:relative;z-index:1; background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 45%,#F7F1FD 100%); border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-raised)} .stats-grid{display:grid;gap:var(--space-4);text-align:center; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); padding-block:calc(var(--space-8) + var(--space-2)) var(--space-8)} .stat-item{border-left:1px solid var(--color-divider);padding-left:var(--space-6)} .stat-item:first-child{border-left:none;padding-left:0} .stat{display:grid;gap:var(--space-2);text-align:center;padding-block:var(--space-5);justify-items:center} .stat-label{font-family:var(--font-heading);color:var(--text-heading);font-size:var(--text-body);font-weight:var(--weight-semibold);line-height:1.4} /* The left-border divider only makes sense for a single row: once the grid wraps to 2 columns or 1, ":first-child" still only excludes item 1, so item 3 (2-col layout) or items 2-4 (1-col layout) keep a left border that no longer sits between two items — it dangles at the start of a row with nothing to its left. auto-fit's own wrap point (1 col below ~360px, 2 cols 360-699px) is also an awkward 3-then-1-orphan around 600-699px, so both ranges below the single-row 4-up layout are pinned to explicit column counts. 2x2 layout: only the left-border divider between the two items sharing a row is kept — no divider between the two rows. A row divider was tried (both as a real border and as a ::before overlay) but client-reported testing kept finding it visually off between the two rows in ways that didn't reproduce in measurement here; simplest correct fix is to drop it rather than keep chasing a rendering difference that isn't visible in this environment. The row gap alone reads fine as the separation. */ @media (max-width:699px){ .stats-grid{grid-template-columns:repeat(2,1fr)} .stat-item:nth-child(odd){border-left:none;padding-left:0} } @media (max-width:359px){ .stats-grid{grid-template-columns:1fr} .stat-item{border-left:none;padding-left:0} .stat-item:not(:first-child){position:relative} .stat-item:not(:first-child)::before{content:"";position:absolute;left:0;right:0;top:calc(var(--space-4) / -2);height:1px;background:var(--color-divider)} } /* ---- About ---- */ .about-grid{display:grid;gap:var(--space-10);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:center} /* At tablet widths the photo column shrinks a lot more than the copy column grows, so centering the shorter photo within the taller row starts it well below the copy's heading — a ~110px vertical mismatch. Align both to the top instead; at full desktop width the two columns are close enough in height that this makes no visible difference. */ @media (min-width:768px) and (max-width:1023px){ .about-grid{align-items:start} } .about-copy{display:grid;gap:var(--space-4)} .ss-textlink{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:var(--text-body-sm); font-weight:var(--weight-semibold);color:var(--color-text-link);text-decoration:none} .ss-textlink:hover{color:var(--color-text-link-hover)} /* ---- Why choose us ---- */ /* Centre the reasons against the taller left column (header + photo) so the two sides read as balanced rather than the list floating high. */ .why-grid{display:grid;gap:var(--space-12);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:center} /* Same mismatch as .about-grid above: the photo+header column is much shorter than the six-item reasons list at tablet widths, so centering it pushes the section's own heading below the list it introduces. */ @media (min-width:768px) and (max-width:1023px){ .why-grid{align-items:start} } .why-media-col{display:grid;gap:var(--space-6);align-content:start} .reasons-list{display:grid} .reason{display:flex;gap:var(--space-4);align-items:flex-start;padding-block:var(--space-5);border-bottom:1px solid var(--color-divider)} .reason:first-child{padding-top:0} .reason:last-child{border-bottom:none} .reason__icon{flex:none;margin-top:3px;color:var(--color-primary-600)} .reason__body{display:grid;gap:4px;min-width:0} .reason__title{font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-semibold);color:var(--color-text-primary)} .reason__desc{margin:0;color:var(--color-text-secondary)} /* ---- Treatments ---- */ .treatments-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} /* auto-fit's 280px minimum gives 2 columns through the tablet range — with 9 cards that strands the 9th card alone on its own row. 3 columns divides evenly and still leaves each card comfortably readable at this width. */ @media (min-width:768px) and (max-width:1023px){ .treatments-grid{grid-template-columns:repeat(3,1fr)} } .treatment-card{display:grid;gap:var(--space-4);align-content:start} .treatment-card__body{display:grid;gap:var(--space-2)} /* ---- Doctors ---- */ .doctor-card{display:grid;gap:var(--space-5);align-content:start} .doctor-card__name{margin:0;white-space:nowrap;font-family:var(--font-heading);font-weight:var(--weight-bold); color:var(--text-heading);font-size:clamp(1rem,1.5vw,1.375rem);letter-spacing:-.01em} .doctor-card__badge{margin-top:8px} .doctor-card__body{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));align-items:start} .doctor-card__photo{max-width:200px;border:3px solid var(--color-primary-200); outline:1px solid var(--color-border);outline-offset:2px;box-shadow:var(--shadow-sm)} .doctor-card__info{display:grid;gap:var(--space-4);align-content:start;min-width:0} .doctor-card__bio-heading{display:none;margin:0 0 calc(-1 * var(--space-2)) 0} /* No-photo fallback: the onerror handler on the portrait img un-hides its .ss-placeholder sibling, which this :has() picks up to drop the empty photo slot entirely and show the bio as full-width text under a "Biography" heading — no JS beyond the existing onerror. */ .doctor-card:has(.doctor-card__photo .ss-placeholder:not([hidden])) .doctor-card__photo{ display:none} .doctor-card:has(.doctor-card__photo .ss-placeholder:not([hidden])) .doctor-card__body{ grid-template-columns:1fr} .doctor-card:has(.doctor-card__photo .ss-placeholder:not([hidden])) .doctor-card__bio-heading{ display:block} /* ---- Patient-first ---- */ .patient-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))} /* auto-fit's 200px minimum gives 3 columns through the tablet range — with 4 steps that strands the 4th step alone on its own row. 2 columns divides evenly into a clean 2x2. */ @media (min-width:768px) and (max-width:1023px){ .patient-steps{grid-template-columns:repeat(2,1fr)} } .patient-step{position:relative;display:grid;gap:var(--space-3);align-content:start;padding-top:var(--space-6);border-top:1px solid var(--color-primary-300)} .patient-step__num{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-pill);background:var(--color-primary-600); color:#fff;font-family:var(--font-numeric);font-weight:var(--weight-bold);font-size:var(--text-body-sm)} .patient-step__title{margin:0} .patient-step__text{margin:0;color:var(--color-text-secondary)} /* ---- Testimonials ---- */ .testimonials-head{display:flex;gap:var(--space-6);align-items:flex-end;justify-content:space-between;flex-wrap:wrap;min-width:0} .testimonials-rating{display:flex;gap:var(--space-8);align-items:center;flex-wrap:wrap;min-width:0} .rating-source{display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap;min-width:0} .rating-score{display:grid;gap:4px;justify-items:start} .rating-score__row{display:inline-flex;gap:var(--space-2);align-items:center} .stars{display:inline-flex;gap:2px;color:var(--color-primary-600)} .testimonial-card{display:grid;gap:var(--space-4);align-content:start;min-width:0} .testimonial-head{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;min-width:0} .testimonial-avatar{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%; background:var(--color-primary-100);color:var(--color-primary-700);font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-body)} .testimonial-name{font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary); overflow-wrap:break-word;min-width:0} .testimonial-source{margin-inline-start:auto;flex:none;padding:3px 10px;border-radius:var(--radius-pill); border:1px solid var(--color-border);background:var(--color-surface-tint);color:var(--color-text-muted); font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-semibold)} .testimonial-meta{display:flex;gap:var(--space-2);align-items:center} /* The two "More Reviews" buttons sit right under their rating block on small screens (stacked, not side by side) — full-size buttons there look oversized next to a single rating line, so shrink to the sm treatment. */ @media (max-width:799px){ .rating-source .ss-btn{min-height:40px;padding-inline:var(--space-4);font-size:var(--text-body-sm)} } .testimonial-text{margin:0} /* ---- Appointment ---- */ .appointment-grid{display:grid;gap:var(--space-10);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:stretch} .appointment-info{display:grid;gap:var(--space-6);grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start} .appointment-form{display:grid;gap:var(--form-field-gap);min-width:0} .form-row{display:grid;gap:var(--form-field-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .form-footer{display:grid;gap:var(--space-3);margin-top:var(--space-1)} .appointment-submit{width:100%} .form-consent{margin:0;text-align:center} /* Spam honeypot — must stay in the DOM for bots to find, hidden from people. */ .ss-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} /* Collapse the captcha slot until the widget is actually mounted, otherwise the empty div still occupies a grid row and adds a stray gap. */ .spam-widget:empty{display:none} /* hCaptcha's injected iframe has a fixed ~300px width — narrower than the form card at the smallest phone widths (~320-375px). Contain any overflow to this element alone (scrollable in place) rather than letting it widen the whole page. */ .spam-widget{max-width:100%;overflow-x:auto;min-width:0} /* The card stretches to the info column's height, so its rows must be packed and centred — otherwise align-content's default stretch spreads the icon, heading and text apart down the full height of the card. */ .appointment-success{display:grid;gap:var(--space-4);justify-items:start;align-content:center} .hours-card{display:grid;gap:0;padding:0;overflow:hidden} /* Solid brand header: the old surface-tint fill sat within a few percent of the tinted section behind the card, so the top of the card vanished. */ .hours-card__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--card-padding); background:linear-gradient(135deg,var(--color-primary-600) 0%,var(--color-primary-700) 100%)} .hours-card__icon{width:40px;height:40px;flex:none;background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);color:#fff} .hours-card__title{display:grid;min-width:0} .hours-card__label{margin:0;font-size:var(--text-body);font-weight:var(--weight-semibold);color:#fff} .hours-card__days{color:rgba(255,255,255,.78);font-weight:var(--weight-semibold)} .hours-card__sessions{display:grid;border-top:1px solid var(--color-divider)} .hours-card__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--card-padding);border-top:1px solid var(--color-divider)} .hours-card__row:first-child{border-top:none} .hours-card__row-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--color-surface-tint);color:var(--color-primary-600)} .hours-card__row-label{flex:none;width:70px;color:var(--color-text-muted)} .hours-card__row-time{margin-left:auto;font-weight:var(--weight-semibold);color:var(--color-text-primary);white-space:nowrap} /* At 320-389px, icon + fixed-width label + the full time range no longer fit on one row (the range was running past the card edge). Wrap the row and drop the time onto its own line, indented to clear the icon, instead of letting it overflow. */ @media (max-width:389px){ .hours-card__row{flex-wrap:wrap;row-gap:2px} .hours-card__row-time{margin-left:calc(34px + var(--space-3));width:auto} } .emergency-cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4); padding:var(--space-5) var(--space-6);background:var(--color-emergency-surface);border:1px solid #EFC7C3;border-radius:var(--radius-lg)} .emergency-cta__body{display:flex;gap:var(--space-4);align-items:flex-start;width:100%} .emergency-cta__icon{margin-top:2px;color:var(--color-emergency);flex:none} .emergency-cta__text{display:grid;gap:2px} .emergency-cta__title{font-family:var(--font-heading);font-weight:var(--weight-semibold);font-size:var(--text-body-lg);color:var(--text-heading)} /* ---- Contact ---- */ .contact-grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:stretch} .contact-card{padding:0;overflow:hidden;display:grid} .contact-card__body{display:grid;gap:var(--space-4);padding:var(--card-padding)} .contact-card__title{margin:0} .contact-card__row{display:flex;gap:var(--space-3);align-items:flex-start} .contact-card__row-icon{margin-top:3px;color:var(--color-primary-600);flex:none} .contact-card__row-text{display:grid;gap:2px} .contact-card__footer{display:flex;gap:var(--space-4);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:var(--space-5);border-top:1px solid var(--color-divider)} .contact-card__footer-label{display:inline-flex;gap:var(--space-2);align-items:center} .location-card{padding:0;overflow:hidden;display:grid} .location-card__frame{min-height:220px;background:var(--color-surface-tint);display:grid} .location-card__frame iframe{width:100%;height:100%;min-height:220px;border:0;display:block} /* ---- Footer ---- */ .site-footer{background:var(--color-surface-dark);color:rgba(255,255,255,.70);padding-block:var(--space-20) var(--space-8);position:relative} .site-footer a{color:rgba(255,255,255,.70)} .site-footer a:hover{color:#fff} .site-footer .ss-caption{color:rgba(255,255,255,.52)} .footer-inner{display:grid;gap:var(--space-12)} .footer-top{display:flex;gap:var(--space-10);justify-content:space-between;flex-wrap:wrap} /* At 768-949px, brand+Quick Links fit side by side but Visit doesn't join them — it wraps alone onto its own row, leaving a lopsided 2-then-1 layout. Stack all three into one left-aligned list instead, matching how mobile already reads (side-by-side only kicks in once all three actually fit on one row, ~950px+). */ @media (min-width:768px) and (max-width:949px){ .footer-top{flex-direction:column} } .footer-brand{display:grid;gap:var(--space-4);align-content:start} .footer-brand p{margin:0;max-width:32ch;color:rgba(255,255,255,.70)} .footer-links{display:grid;gap:var(--space-3);align-content:start} .footer-links__label{color:rgba(255,255,255,.85)} .footer-linklist{display:grid;gap:var(--space-2);list-style:none;margin:0;padding:0} .footer-visit{display:grid;gap:var(--space-3);align-content:start;justify-items:end;text-align:right} /* Stacked (on mobile, and still wrapped onto its own row through the tablet range up to ~940px), right-aligned "Visit" reads as mismatched next to the left-aligned brand and Quick Links columns above it — align everything the same way whenever it's no longer sitting side by side with them. */ @media (max-width:949px){ .footer-visit{justify-items:start;text-align:left} } .footer-visit__label{color:rgba(255,255,255,.85)} .footer-visit address{font-style:normal;margin:0;max-width:26ch;color:rgba(255,255,255,.70)} .footer-hours-label{color:#fff;font-weight:var(--weight-semibold)} .footer-hours{color:rgba(255,255,255,.70);display:grid} .footer-bottom{display:flex;gap:var(--space-4);justify-content:space-between;flex-wrap:wrap;align-items:center;padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.12)} .footer-credit a{color:rgba(255,255,255,.88);text-decoration-color:rgba(255,255,255,.35)} /* ---- Legal / prose pages (privacy.html) ---- */ .legal-hero{padding-block:var(--space-16) var(--space-8)} .legal-updated{margin:16px 0 0;color:var(--color-text-muted)} /* The generic .ss-section top padding (80-120px, tuned for full marketing sections on index.html) left a huge gap before "Who we are" on this much shorter, text-only page — cut it down for the legal body specifically rather than touching the shared .ss-section token used everywhere else. */ .legal-body{padding-top:var(--space-12)} .legal-content{display:grid;gap:var(--space-12)} .legal-section{display:grid;gap:var(--space-4)} .legal-section h2{margin:0;padding-bottom:var(--space-3);border-bottom:1px solid var(--color-divider)} .legal-section p{margin:0} .legal-list{margin:0;padding-left:20px;display:grid;gap:var(--space-2); font-size:var(--text-body);line-height:var(--leading-normal);color:var(--color-text-secondary)} .legal-list strong{color:var(--color-text-primary);font-weight:var(--weight-semibold)} .legal-content a{font-weight:var(--weight-medium)} /* Grievance contact stands apart from the prose — it is the actionable bit. */ .legal-contact{display:grid;gap:var(--space-4);justify-items:start} .legal-contact h2{margin:0} .legal-contact p{margin:0} .legal-contact__rows{display:grid;gap:var(--space-3);width:100%} .legal-section--disclaimer{padding:var(--card-padding);border-radius:var(--radius-lg); background:var(--color-surface-tint);border:1px solid var(--color-border)} .legal-section--disclaimer h2{border-bottom-color:var(--color-border-strong)} /* ---- Lightbox ---- */ .lightbox-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5)} .lightbox-footer__text{display:grid;gap:2px} .lightbox-caption{font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)} .lightbox-actions{display:flex;gap:var(--space-2)} /* Fit rather than crop: the lightbox is for viewing a photo in full, and the square board loses its heading under the inherited 16:9 cover crop. */ #lightbox-media{border-radius:0;aspect-ratio:auto;display:grid;place-items:center;max-height:74vh} #lightbox-media img{width:auto;height:auto;max-width:100%;max-height:74vh;object-fit:contain} /* ===================================================================== 5. ICON ACCENT ROTATION Treatment card icons and review avatars cycle purple -> teal -> coral instead of all-purple. Everything else stays on the primary palette. NOTE: keyed off :nth-child, so adding or reordering cards in these grids reshuffles which ones are teal vs coral — recheck visually if you do. ===================================================================== */ .treatments-grid .ss-card:nth-child(3n+2) .ss-card__icon{background:var(--color-teal-surface);border-color:var(--color-teal-border);color:var(--color-teal)} .treatments-grid .ss-card:nth-child(3n+3) .ss-card__icon{background:var(--color-coral-surface);border-color:var(--color-coral-border);color:var(--color-coral)} .testimonial-card:nth-child(3n+2) .testimonial-avatar{background:var(--color-teal-surface);color:var(--color-teal)} .testimonial-card:nth-child(3n+3) .testimonial-avatar{background:var(--color-coral-surface);color:var(--color-coral)} /* ===================================================================== 6. TOOTH MOTIF Dental character added without touching markup — the tooth is an inline SVG data URI reused at different sizes/opacities. See also .hero-list__dot. ===================================================================== */ /* Oversized watermark behind the patient-first steps. */ .ss-section:has(.patient-steps){position:relative;overflow:hidden} .ss-section:has(.patient-steps)::after{content:"";position:absolute;pointer-events:none;z-index:0; width:330px;height:330px;right:-70px;top:-60px;opacity:.07;transform:rotate(14deg); background-repeat:no-repeat;background-position:center;background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2363499F'%3E%3Cpath d='M12 2C9.5 2 8.8 3 7 3 4.8 3 3.5 4.7 3.5 7.5c0 2.6.9 4 1.5 6.2.5 1.9.6 4.6 1.4 5.6.9 1.1 2.1-.2 2.4-2.1.3-2 .6-3.7 3.2-3.7s2.9 1.7 3.2 3.7c.3 1.9 1.5 3.2 2.4 2.1.8-1 .9-3.7 1.4-5.6.6-2.2 1.5-3.6 1.5-6.2C20.5 4.7 19.2 3 17 3c-1.8 0-2.5-1-5-1Z'/%3E%3C/svg%3E")} .ss-section:has(.patient-steps)>.ss-container{position:relative;z-index:1} /* Small tooth marking each FAQ question. */ .ss-accordion__trigger>span:first-child{position:relative;padding-left:30px} .ss-accordion__trigger>span:first-child::before{content:"";position:absolute;left:0;top:50%; width:18px;height:18px;margin-top:-9px;background-repeat:no-repeat;background-position:center;background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363499F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C9.5 2 8.8 3 7 3 4.8 3 3.5 4.7 3.5 7.5c0 2.6.9 4 1.5 6.2.5 1.9.6 4.6 1.4 5.6.9 1.1 2.1-.2 2.4-2.1.3-2 .6-3.7 3.2-3.7s2.9 1.7 3.2 3.7c.3 1.9 1.5 3.2 2.4 2.1.8-1 .9-3.7 1.4-5.6.6-2.2 1.5-3.6 1.5-6.2C20.5 4.7 19.2 3 17 3c-1.8 0-2.5-1-5-1Z'/%3E%3C/svg%3E")}