/* ===================================================================== RESTORATIVE DENTISTRY - page stylesheet Ported from the Harborview Dental design-system (harborview-ds). Tokens + component classes render the imported Claude Design page as plain static HTML. Fonts are already loaded in the document . ===================================================================== */ :root { /* Brand palette */ --hv-cream: #f4efea; --hv-white: #ffffff; --hv-sky: #d3e3ef; --hv-blue: #87b7df; --hv-navy: #1a2738; --hv-accent: #2575ae; /* Ink (text on light) */ --hv-ink: #1a2738; --hv-ink-soft: rgba(26, 39, 56, 0.66); --hv-ink-faint: rgba(26, 39, 56, 0.42); --hv-line: rgba(26, 39, 56, 0.12); /* Text on dark */ --hv-on-dark: #f4efea; --hv-on-dark-soft: rgba(244, 239, 234, 0.68); --hv-on-dark-line: rgba(244, 239, 234, 0.16); /* Type */ --hv-font-display: 'Jost', system-ui, sans-serif; --hv-font-body: 'Barlow', system-ui, sans-serif; --hv-font-serif: 'Cormorant Garamond', Georgia, serif; --hv-font-script: 'Italianno', cursive; /* Motion */ --hv-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Radii */ --hv-r-lg: 26px; --hv-r-md: 18px; --hv-r-sm: 11px; /* Elevation */ --hv-shadow-sm: 0 6px 24px -8px rgba(26, 39, 56, 0.18); --hv-shadow-md: 0 26px 60px -22px rgba(26, 39, 56, 0.30); --hv-shadow-lg: 0 50px 100px -34px rgba(26, 39, 56, 0.45); } /* -------------------------------------------------------------------- Button -------------------------------------------------------------------- */ .hv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.7rem; border-radius: 999px; border: 1px solid transparent; font-family: var(--hv-font-display); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.4s var(--hv-ease), color 0.4s var(--hv-ease), border-color 0.4s var(--hv-ease), transform 0.4s var(--hv-ease), box-shadow 0.4s var(--hv-ease); } .hv-btn:hover { transform: translateY(-2px); } .hv-btn__arrow { font-family: var(--hv-font-body); letter-spacing: 0; } .hv-btn--primary { background: var(--hv-navy); color: var(--hv-cream); box-shadow: 0 14px 28px -12px rgba(26, 39, 56, 0.45); } .hv-btn--primary:hover { background: var(--hv-accent); } .hv-btn--ghost { background: transparent; color: var(--hv-navy); border-color: rgba(26, 39, 56, 0.25); } .hv-btn--ghost:hover { background: rgba(135, 183, 223, 0.14); border-color: var(--hv-blue); } .hv-btn--light { background: var(--hv-cream); color: var(--hv-navy); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35); } .hv-btn--light:hover { background: var(--hv-white); } /* -------------------------------------------------------------------- Eyebrow -------------------------------------------------------------------- */ .hv-eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; font-family: var(--hv-font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--hv-accent); } .hv-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: 0.55; } .hv-eyebrow--centered { justify-content: center; } .hv-eyebrow--centered::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: 0.55; } .hv-eyebrow--on-dark { color: var(--hv-blue); } /* -------------------------------------------------------------------- SectionHeading -------------------------------------------------------------------- */ .hv-section-heading { max-width: 760px; } .hv-section-heading--centered { margin-inline: auto; text-align: center; } .hv-section-heading__title { margin: 1.3rem 0 0; font-family: var(--hv-font-display); font-weight: 300; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.12; letter-spacing: -0.012em; color: var(--hv-navy); } .hv-section-heading__title em { font-family: var(--hv-font-serif); font-style: italic; font-weight: 500; color: var(--hv-accent); } .hv-section-heading__lede { margin: 1.3rem 0 0; font-size: 1.05rem; line-height: 1.65; font-family: var(--hv-font-body); color: var(--hv-ink-soft); } .hv-section-heading--on-dark .hv-section-heading__title { color: var(--hv-on-dark); } .hv-section-heading--on-dark .hv-section-heading__title em { color: var(--hv-blue); } .hv-section-heading--on-dark .hv-section-heading__lede { color: var(--hv-on-dark-soft); } /* -------------------------------------------------------------------- Card -------------------------------------------------------------------- */ .hv-card { background: var(--hv-white); border: 1px solid var(--hv-line); border-radius: var(--hv-r-md); padding: clamp(1.6rem, 2.5vw, 2.2rem); box-shadow: 0 14px 30px -20px rgba(26, 39, 56, 0.18); font-family: var(--hv-font-body); color: var(--hv-ink); transition: transform 0.5s var(--hv-ease), box-shadow 0.5s var(--hv-ease); } .hv-card--hoverable:hover { transform: translateY(-4px); box-shadow: 0 24px 42px -20px rgba(26, 39, 56, 0.26); } .hv-card--navy { background: var(--hv-navy); border-color: transparent; color: var(--hv-on-dark); box-shadow: var(--hv-shadow-md); } /* -------------------------------------------------------------------- GlassCard -------------------------------------------------------------------- */ .hv-glass-card { padding: 1.15rem 1.25rem 0.95rem; border-radius: var(--hv-r-md); background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: var(--hv-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.85); font-family: var(--hv-font-body); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hv-glass-card { background: rgba(255, 255, 255, 0.92); } } .hv-glass-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.55rem; } .hv-glass-card__eyebrow { font-family: var(--hv-font-display); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hv-accent); white-space: nowrap; } .hv-glass-card__tag { font-family: var(--hv-font-display); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hv-ink-faint); white-space: nowrap; } /* -------------------------------------------------------------------- FactList -------------------------------------------------------------------- */ .hv-fact-list { list-style: none; margin: 0; padding: 0; font-family: var(--hv-font-body); } .hv-fact-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0; } .hv-fact-list li + li { border-top: 1px dashed rgba(26, 39, 56, 0.16); } .hv-fact-list__label { font-size: 0.86rem; color: var(--hv-ink-soft); } .hv-fact-list__value { font-family: var(--hv-font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hv-navy); text-align: right; } /* -------------------------------------------------------------------- Chip -------------------------------------------------------------------- */ .hv-chip { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 1.05rem; white-space: nowrap; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--hv-line); border-radius: 999px; box-shadow: 0 10px 24px -16px rgba(26, 39, 56, 0.30); font-family: var(--hv-font-display); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hv-navy); } .hv-chip__num { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; color: var(--hv-accent); } /* -------------------------------------------------------------------- StatTile -------------------------------------------------------------------- */ .hv-stat { display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--hv-font-display); } .hv-stat__value { font-family: var(--hv-font-serif); font-style: italic; font-weight: 500; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--hv-navy); } .hv-stat__label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hv-ink-faint); } .hv-stat--on-dark .hv-stat__value { color: var(--hv-on-dark); } .hv-stat--on-dark .hv-stat__label { color: var(--hv-blue); } /* -------------------------------------------------------------------- Accordion -------------------------------------------------------------------- */ .hv-accordion { border-top: 1px solid var(--hv-line); font-family: var(--hv-font-body); } .hv-accordion summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0.2rem; cursor: pointer; } .hv-accordion summary::-webkit-details-marker { display: none; } .hv-accordion__q { font-family: var(--hv-font-display); font-weight: 400; font-size: 1.15rem; color: var(--hv-navy); letter-spacing: -0.005em; } .hv-accordion__plus { position: relative; width: 18px; height: 18px; flex-shrink: 0; } .hv-accordion__plus i { position: absolute; background: var(--hv-accent); transition: transform 0.35s var(--hv-ease); } .hv-accordion__plus i:nth-child(1) { left: 0; right: 0; top: 8px; height: 1.6px; } .hv-accordion__plus i:nth-child(2) { top: 0; bottom: 0; left: 8px; width: 1.6px; } .hv-accordion[open] .hv-accordion__plus i:nth-child(2) { transform: scaleY(0); } .hv-accordion__a { padding: 0 0.2rem 1.2rem; font-size: 0.97rem; line-height: 1.7; color: var(--hv-ink-soft); max-width: 62ch; } /* -------------------------------------------------------------------- TextField -------------------------------------------------------------------- */ .hv-field { position: relative; font-family: var(--hv-font-body); } .hv-field input, .hv-field textarea { width: 100%; box-sizing: border-box; background: var(--hv-white); border: 1.5px solid rgba(26, 39, 56, 0.38); border-radius: var(--hv-r-sm); padding: 1.7rem 1.15rem 0.7rem; font-family: var(--hv-font-body); font-size: 1rem; color: var(--hv-navy); transition: border-color 0.4s var(--hv-ease), box-shadow 0.4s var(--hv-ease); } .hv-field textarea { resize: vertical; min-height: 140px; } .hv-field input:focus, .hv-field textarea:focus { outline: none; border-color: var(--hv-navy); box-shadow: 0 0 0 3px rgba(135, 183, 223, 0.22); } .hv-field label { position: absolute; left: 1.18rem; top: 1.2rem; font-size: 1rem; color: var(--hv-ink); pointer-events: none; transform-origin: left top; transition: transform 0.3s var(--hv-ease), color 0.3s var(--hv-ease); } .hv-field input:focus + label, .hv-field input:not(:placeholder-shown) + label, .hv-field textarea:focus + label, .hv-field textarea:not(:placeholder-shown) + label { transform: translateY(-0.7rem) scale(0.72); color: var(--hv-accent); } /* -------------------------------------------------------------------- PhoneCard -------------------------------------------------------------------- */ .hv-phone { display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1.1rem; border: 1px solid var(--hv-line); border-radius: 12px; color: var(--hv-navy); text-decoration: none; font-family: var(--hv-font-body); background: var(--hv-white); transition: background-color 0.4s var(--hv-ease), border-color 0.4s var(--hv-ease); } .hv-phone:hover { background: var(--hv-cream); border-color: rgba(135, 183, 223, 0.4); } .hv-phone svg { width: 22px; height: 22px; color: var(--hv-blue); flex-shrink: 0; } .hv-phone b { display: block; font-family: var(--hv-font-display); font-size: 1.1rem; font-weight: 500; color: var(--hv-navy); } .hv-phone i { font-family: var(--hv-font-serif); font-style: italic; font-weight: 500; font-size: 0.84rem; color: var(--hv-ink-soft); } /* -------------------------------------------------------------------- NoteCard -------------------------------------------------------------------- */ .hv-note { background: var(--hv-white); padding: 1.7rem 1.6rem 1.8rem; border: 1px solid var(--hv-line); border-radius: var(--hv-r-md); box-shadow: 0 14px 30px -20px rgba(26, 39, 56, 0.18); font-family: var(--hv-font-body); transition: transform 0.5s var(--hv-ease), box-shadow 0.5s var(--hv-ease), border-color 0.5s var(--hv-ease); } .hv-note:hover { transform: translateY(-4px); border-color: rgba(135, 183, 223, 0.5); box-shadow: 0 24px 42px -20px rgba(26, 39, 56, 0.26); } .hv-note__concern { margin: 0; font-family: var(--hv-font-serif); font-style: italic; font-weight: 500; font-size: 1.24rem; line-height: 1.35; color: var(--hv-navy); } .hv-note__answer { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--hv-line); font-family: var(--hv-font-display); font-size: 0.94rem; line-height: 1.55; color: var(--hv-ink-soft); } /* -------------------------------------------------------------------- Signature -------------------------------------------------------------------- */ .hv-signature { display: inline-flex; flex-direction: column; gap: 0.35rem; } .hv-signature__script { font-family: var(--hv-font-script); font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem); line-height: 1; color: var(--hv-accent); rotate: -2deg; } .hv-signature__caption { font-family: var(--hv-font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hv-ink-faint); } .hv-signature--on-dark .hv-signature__script { color: var(--hv-on-dark); } .hv-signature--on-dark .hv-signature__caption { color: var(--hv-on-dark-soft); } /* -------------------------------------------------------------------- RowLabel -------------------------------------------------------------------- */ .hv-row-label { display: flex; align-items: center; gap: 1.2rem; font-family: var(--hv-font-serif); font-style: italic; font-weight: 500; font-size: 1.35rem; color: var(--hv-accent); } .hv-row-label i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(26, 39, 56, 0.25) 0%, rgba(26, 39, 56, 0.05) 100%); } /* -------------------------------------------------------------------- CTAPanel -------------------------------------------------------------------- */ .hv-cta-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: stretch; padding: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem) clamp(1.8rem, 1rem + 2.4vw, 3.2rem); background: var(--hv-navy); color: var(--hv-on-dark); border-radius: var(--hv-r-lg); box-shadow: 0 30px 60px -28px rgba(26, 39, 56, 0.45), 0 2px 0 0 rgba(244, 239, 234, 0.06) inset; overflow: hidden; isolation: isolate; font-family: var(--hv-font-body); } .hv-cta-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 55% at 8% 8%, rgba(135, 183, 223, 0.22) 0%, transparent 60%), radial-gradient(55% 50% at 100% 100%, rgba(135, 183, 223, 0.14) 0%, transparent 65%); pointer-events: none; } .hv-cta-panel > * { position: relative; z-index: 1; } .hv-cta-panel--single { grid-template-columns: 1fr; } .hv-cta-panel__title { margin: 1.1rem 0 0; font-family: var(--hv-font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.08; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); color: var(--hv-on-dark); max-width: 18ch; } .hv-cta-panel__title em { font-family: var(--hv-font-serif); font-style: italic; font-weight: 500; color: var(--hv-blue); } .hv-cta-panel__body { margin: 1.2rem 0 0; max-width: 54ch; font-size: 1.02rem; line-height: 1.65; color: var(--hv-on-dark-soft); } .hv-cta-panel__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.9rem; } .hv-cta-panel__aside { display: flex; flex-direction: column; justify-content: center; padding-left: clamp(1.4rem, 0.8rem + 1.4vw, 2.4rem); border-left: 1px solid var(--hv-on-dark-line); } @media (max-width: 880px) { .hv-cta-panel { grid-template-columns: 1fr; } .hv-cta-panel__aside { border-left: 0; border-top: 1px solid var(--hv-on-dark-line); padding: 1.8rem 0 0; margin-top: 1.8rem; } } /* Ghost buttons inside the navy CTA panel need on-dark colors */ .hv-cta-panel .hv-btn--ghost { color: var(--hv-on-dark); border-color: rgba(244, 239, 234, 0.32); } .hv-cta-panel .hv-btn--ghost:hover { background: var(--hv-cream); color: var(--hv-navy); border-color: var(--hv-cream); } /* ===================================================================== PAGE GLUE - layout, responsive collapses, and interactive states for the ported Restorative Dentistry page (scoped to .rx-page). ===================================================================== */ .rx-page, .rx-page *, .rx-page *::before, .rx-page *::after { box-sizing: border-box; } .rx-page [hidden] { display: none !important; } /* Responsive collapses - mirrors the design's own breakpoints */ @media (max-width: 940px) { .rx-page [data-hv-stack] { grid-template-columns: 1fr !important; } } @media (max-width: 620px) { .rx-page [data-hv-duo] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.85rem !important; } .rx-page [data-hv-art] { display: none !important; } } /* Symptom picker tiles */ .rx-tile { appearance: none; position: relative; display: flex; flex-direction: column; gap: 1rem; text-align: left; background: var(--hv-cream); border: 1px solid transparent; border-radius: var(--hv-r-md); padding: 1.5rem 1.55rem 1.65rem; cursor: pointer; transition: transform 0.4s var(--hv-ease), box-shadow 0.4s var(--hv-ease); } .rx-tile:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.5); } .rx-tile__ico { width: 46px; height: 46px; border-radius: 50%; background: rgba(135, 183, 223, 0.3); display: grid; place-items: center; color: var(--hv-accent); } .rx-tile__text { display: flex; flex-direction: column; gap: 0.35rem; } .rx-tile__label { font-family: var(--hv-font-display); font-weight: 500; font-size: 1.12rem; color: var(--hv-navy); } .rx-tile__sub { font-family: var(--hv-font-body); font-size: 0.92rem; line-height: 1.5; color: var(--hv-ink-soft); } .rx-tile__ring { position: absolute; inset: 0; border: 2px solid var(--hv-accent); border-radius: var(--hv-r-md); pointer-events: none; display: none; } .rx-tile__check { position: absolute; top: 13px; right: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--hv-accent); color: #fff; display: none; place-items: center; font-family: var(--hv-font-body); font-size: 12px; line-height: 1; } .rx-tile.is-on .rx-tile__ring { display: block; } .rx-tile.is-on .rx-tile__check { display: grid; } /* Symptom result line */ .rx-result__marks { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } /* The bench - active step highlight */ .rx-bench-hot__ring { position: absolute; inset: -6px; border: 2px solid var(--hv-blue); border-radius: 50%; pointer-events: none; display: none; } .rx-bench-hot.is-active .rx-bench-hot__ring { display: block; } .rx-bench-step__hl { position: absolute; inset: 0.4rem 0; background: rgba(135, 183, 223, 0.12); border: 1px solid rgba(135, 183, 223, 0.4); border-radius: var(--hv-r-md); pointer-events: none; display: none; } .rx-bench-step.is-active .rx-bench-step__hl { display: block; } /* ============================================================ MOBILE RESPONSIVE PASS (v2) ============================================================ */ /* Inline jump links: real tap areas without moving the layout */ .rx-page a[href="#treatments"], .rx-page a[href="#bench"] { display: inline-block; padding: 0.55rem 0.35rem; margin: -0.45rem -0.35rem; } @media (max-width: 620px) { /* Q&A note cards: two per row, blue bold questions */ .rx-page #concerns [data-hv-duo] { grid-template-columns: 1fr 1fr !important; gap: 0.7rem !important; } .rx-page #concerns .hv-note { padding: 1.05rem 0.95rem 1.1rem; } .rx-page #concerns .hv-note__concern { font-family: var(--hv-font-display); font-style: normal; font-weight: 600; font-size: 1.02rem; color: var(--hv-accent); } .rx-page #concerns .hv-note__answer { font-size: 0.85rem; line-height: 1.55; } } @media (max-width: 460px) { .rx-page .rx-tile { padding: 1.05rem 0.95rem 1.15rem; gap: 0.7rem; } .rx-page .rx-tile__ico { width: 38px; height: 38px; } .rx-page .rx-tile__label { font-size: 1rem; } .rx-page .rx-tile__sub { font-size: 0.84rem; } .rx-page .hv-eyebrow { font-size: 0.64rem; letter-spacing: 0.22em; } .rx-page .hv-eyebrow::before, .rx-page .hv-eyebrow--centered::after { width: 22px; } } /* ============================================================ MOBILE REDESIGN PASS (v3) ============================================================ */ @media (max-width: 760px) { /* Hero: drop the navy stats panel on phones */ .rx-page .rx-hero-numbers { display: none; } /* Closing visit/hours section is desktop-only */ .rx-page #visit { display: none; } /* Treatments: collapsible chapters (JS toggles .is-open) */ .rx-page #treatments [data-hv-stack] { position: relative; grid-template-columns: 44px 1fr !important; gap: 0.4rem 0.9rem !important; align-items: center !important; padding: 1.05rem 1.9rem 1.05rem 0 !important; cursor: pointer; } .rx-page #treatments [data-hv-stack] > div:first-child { font-size: 1.3rem !important; } .rx-page #treatments [data-hv-stack] h3 { font-size: 1.08rem !important; } .rx-page #treatments [data-hv-stack]::after { content: ""; position: absolute; right: 7px; top: 1.55rem; width: 9px; height: 9px; border-right: 1.6px solid var(--hv-accent); border-bottom: 1.6px solid var(--hv-accent); transform: rotate(45deg); transition: transform 0.3s ease; } .rx-page #treatments [data-hv-stack].is-open::after { transform: rotate(225deg); } .rx-page #treatments [data-hv-stack] > div:nth-child(2) > p, .rx-page #treatments [data-hv-stack] > div:nth-child(2) > a, .rx-page #treatments [data-hv-stack] > div:nth-child(2) > span[style], .rx-page #treatments [data-hv-stack] > div:nth-child(3), .rx-page #treatments [data-hv-stack] > div:nth-child(4) { display: none !important; } .rx-page #treatments [data-hv-stack].is-open { padding-bottom: 1.5rem !important; } .rx-page #treatments [data-hv-stack].is-open > div:nth-child(2) > p { display: block !important; } .rx-page #treatments [data-hv-stack].is-open > div:nth-child(2) > a { display: inline-block !important; } .rx-page #treatments [data-hv-stack].is-open > div:nth-child(2) > span[style] { display: inline-block !important; } .rx-page #treatments [data-hv-stack].is-open > div:nth-child(3) { display: grid !important; grid-column: 1 / -1; height: 120px !important; } .rx-page #treatments [data-hv-stack].is-open > div:nth-child(4) { display: grid !important; grid-column: 1 / -1; } }