/* ========================================================================== Treatment articles — list (.tl-*) and detail (.td-*) pages templates/treatments/treatments_list.html, treatment_detail.html Sits inside the arctit theme (light body, dark hero). Headings, pills and buttons keep Lovelo from lovelo.css; long-form reading areas (.td-rich, .td-faq, .td-read, .tl-card__excerpt …) are exempted there and use Poppins. Sizes are in px because the theme sets html { font-size: 15px }. ========================================================================== */ .td-page, .tl-page { --td-ink: #101828; /* body text on white 17.9:1 */ --td-ink-2: #475467; /* secondary text 7.6:1 */ --td-navy: #001c3e; /* brand */ --td-accent: #155e97; /* links / accents 6.9:1 */ --td-accent-bright: #4bb0e8; --td-accent-soft: #eaf4fb; --td-bg: #f4f6f9; --td-surface: #ffffff; --td-line: #e4e9f0; --td-good: #146c43; /* 6.2:1 */ --td-good-soft: #eaf6ef; --td-caution: #a4430a; /* 5.9:1 */ --td-caution-soft: #fdf2e8; --td-radius: 16px; --td-radius-sm: 12px; --td-nav-offset: 92px; /* fixed navbar height + breathing room */ --td-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06); --td-ease: cubic-bezier(.2, .7, .2, 1); } html:has(body.td-page) { scroll-behavior: smooth; } /* The theme gives both html and body overflow-x:hidden, which makes its own (never-scrolling) scroll container and silently disables position:sticky. `clip` hides horizontal overflow without creating a scroll container. */ body.td-page { overflow: visible; overflow-x: clip; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .td-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; } /* Shared focus ring (the theme sets a { outline: 0 }) */ .td-page a:focus-visible, .td-page button:focus-visible, .td-page summary:focus-visible, .td-page [tabindex]:focus-visible, .tl-page a:focus-visible, .tl-page button:focus-visible, .tl-page input:focus-visible { outline: 3px solid var(--td-accent-bright); outline-offset: 3px; border-radius: 6px; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .td-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s var(--td-ease), color .2s var(--td-ease), transform .2s var(--td-ease); } .td-btn:hover { text-decoration: none; transform: translateY(-1px); } .td-btn--primary { background: var(--td-navy); color: #fff; } .td-btn--primary:hover { background: #0a2d5c; color: #fff; } .td-btn--light { background: #fff; color: var(--td-navy); } .td-btn--light:hover { background: var(--td-accent-soft); color: var(--td-navy); } .td-btn--block { width: 100%; } /* ── Reading progress ────────────────────────────────────────────────────── */ .td-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100000; pointer-events: none; } .td-progress__bar { display: block; height: 100%; width: 100%; background: var(--td-accent-bright); transform: scaleX(0); transform-origin: 0 50%; } /* ========================================================================== DETAIL — hero ========================================================================== */ .td-hero { display: flex; align-items: flex-end; min-height: clamp(460px, 74vh, 720px); padding: 120px 0 48px; background: linear-gradient(135deg, #04101f 0%, #0b2544 100%); color: #fff; } .td-hero__media { position: absolute; inset: 0; } .td-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Darkest where the text sits: ≥ .74 alpha behind the title keeps white text above 7:1 even over a pure-white pixel. */ .td-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 12, 26, .55) 0%, rgba(2, 12, 26, .74) 45%, rgba(2, 12, 26, .93) 100%), linear-gradient(90deg, rgba(2, 12, 26, .45) 0%, rgba(2, 12, 26, 0) 70%); } .td-hero .container { width: 100%; } .td-hero__content { max-width: 820px; } .td-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; list-style: none; margin: 0 0 18px; padding: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .td-breadcrumb li { display: inline-flex; align-items: center; color: rgba(255, 255, 255, .88); } .td-breadcrumb li + li::before { content: "›"; margin: 0 10px; color: rgba(255, 255, 255, .6); } .td-breadcrumb a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); display: inline-flex; align-items: center; min-height: 44px; } .td-breadcrumb a:hover { text-decoration-color: #fff; color: #fff; } .td-hero__eyebrow { margin: 0 0 10px; color: #a8dcfa; /* ≥5:1 on the scrim even over a white pixel */ font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .td-hero .td-hero__title { margin: 0; color: #fff; font-size: clamp(32px, 5.4vw, 64px); line-height: 1.05; letter-spacing: .01em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } .td-hero__subtitle { margin: 16px 0 0; max-width: 60ch; color: rgba(255, 255, 255, .92); font-size: clamp(14px, 1.6vw, 18px); letter-spacing: .04em; line-height: 1.5; } .td-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; } .td-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); } .td-pill .td-icon { width: 16px; height: 16px; color: var(--td-accent-bright); } /* ========================================================================== DETAIL — layout ========================================================================== */ .td-wrapper { background: var(--td-bg); } .td-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 28px 0 72px; } @media (min-width: 992px) { .td-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; padding-top: 56px; } } @media (min-width: 1200px) { .td-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; } } .td-article { min-width: 0; } /* Mobile quick-fact chips (hidden ≥992px, where the sidebar shows them) */ .td-chips-wrap { padding-top: 16px; } .td-chips { display: flex; gap: 8px; list-style: none; margin: 0 -15px; padding: 4px 15px 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 15px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .td-chips::-webkit-scrollbar { display: none; } .td-chip { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; max-width: 240px; padding: 10px 14px; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); } .td-chip__label { color: var(--td-ink-2); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .td-chip__value { color: var(--td-navy); font-size: 13px; letter-spacing: .03em; line-height: 1.3; } @media (min-width: 992px) { .td-chips-wrap { display: none; } } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ .td-sidebar { display: none; } @media (min-width: 992px) { .td-sidebar { display: block; align-self: stretch; } .td-sticky { position: sticky; top: var(--td-nav-offset); } } .td-panel { background: var(--td-surface); border: 1px solid var(--td-line); border-radius: var(--td-radius); padding: 20px; margin-bottom: 16px; } .td-panel__title { margin: 0 0 12px; color: var(--td-ink-2); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; } .td-facts__list { margin: 0; } .td-facts__row { padding: 10px 0; border-top: 1px solid var(--td-line); } .td-facts__row:first-child { border-top: 0; padding-top: 0; } .td-facts__row dt { color: var(--td-ink-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; } .td-facts__row dd { margin: 4px 0 0; color: var(--td-navy); font-size: 14px; letter-spacing: .03em; line-height: 1.35; } .td-toc { padding: 16px 12px 12px; } .td-toc .td-panel__title { padding: 0 8px; } .td-toc__list { list-style: none; margin: 0; padding: 0; } /* Leaves room for the panel title + AI card so the sticky group fits the viewport */ .td-sidebar .td-toc__list { max-height: max(176px, calc(100vh - var(--td-nav-offset) - 440px)); overflow-y: auto; overscroll-behavior: contain; } .td-toc__link { display: flex; align-items: center; min-height: 44px; padding: 8px 10px 8px 14px; border-radius: 8px; border-left: 3px solid transparent; color: var(--td-ink-2); font-size: 14px; line-height: 1.35; text-decoration: none; transition: color .15s, background-color .15s, border-color .15s; } .td-toc__link:hover { color: var(--td-navy); background: var(--td-accent-soft); text-decoration: none; } .td-toc__link.is-active, .td-toc__link[aria-current="location"] { color: var(--td-navy); font-weight: 600; border-left-color: var(--td-accent); background: var(--td-accent-soft); } .td-ai-card { padding: 22px; border-radius: var(--td-radius); background: radial-gradient(120% 120% at 100% 0%, #1d4f86 0%, var(--td-navy) 60%); color: #fff; } .td-ai-card__title { margin: 0 0 8px; color: #fff; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; } .td-ai-card__body { margin: 0 0 18px; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.6; } /* ── Mobile "On this page" ───────────────────────────────────────────────── */ .td-toc-mobile { margin: 0 0 32px; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: var(--td-radius); } .td-toc-mobile > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 18px; color: var(--td-navy); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; list-style: none; } .td-toc-mobile > summary::-webkit-details-marker { display: none; } .td-toc-mobile > summary span { flex: 1; } .td-toc-mobile > summary .td-icon--chevron-down { transition: transform .2s var(--td-ease); } .td-toc-mobile[open] > summary .td-icon--chevron-down { transform: rotate(180deg); } .td-toc-mobile nav { padding: 0 8px 10px; border-top: 1px solid var(--td-line); } @media (min-width: 992px) { .td-toc-mobile { display: none; } } /* ========================================================================== DETAIL — article content ========================================================================== */ .td-lead { margin: 0 0 28px; max-width: 70ch; color: var(--td-ink); font-size: 19px; line-height: 1.65; } @media (min-width: 768px) { .td-lead { font-size: 21px; } } .td-keypoints { margin: 0 0 28px; padding: 22px 24px; background: var(--td-accent-soft); border-left: 4px solid var(--td-accent); border-radius: 0 var(--td-radius) var(--td-radius) 0; max-width: 76ch; } .td-keypoints__title { margin: 0 0 10px; color: var(--td-navy); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; } .td-keypoints .td-rich ul { margin: 0; } .td-keypoints .td-rich li { margin-bottom: 6px; } .td-sec { margin: 0 0 56px; scroll-margin-top: var(--td-nav-offset); } .td-sec__title { position: relative; margin: 0 0 20px; padding-top: 18px; color: var(--td-navy); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: .01em; text-wrap: balance; } .td-sec__title::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; border-radius: 3px; background: var(--td-accent-bright); } /* Rich text — the reading face and measure */ .td-rich { max-width: 70ch; color: var(--td-ink); font-size: 17px; line-height: 1.7; } @media (min-width: 768px) { .td-rich { font-size: 18px; } } .td-rich > :first-child { margin-top: 0; } .td-rich > :last-child { margin-bottom: 0; } .td-rich p { margin: 0 0 16px; color: inherit; font-size: inherit; line-height: inherit; } .td-rich strong, .td-rich b { font-weight: 600; color: var(--td-ink); } .td-rich em { font-style: italic; } .td-rich a { color: var(--td-accent); text-decoration: underline; text-underline-offset: 3px; } .td-rich h3 { margin: 28px 0 10px; color: var(--td-navy); font-size: 17px; line-height: 1.3; letter-spacing: .04em; } .td-rich h4 { margin: 20px 0 8px; color: var(--td-navy); font-size: 15px; letter-spacing: .04em; } .td-rich ul, .td-rich ol { margin: 0 0 18px; padding-left: 0; list-style: none; } .td-rich ul > li, .td-rich ol:not(.td-steps) > li { position: relative; margin: 0 0 8px; padding-left: 26px; } .td-rich ul:not(.td-checklist) > li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--td-accent); } .td-rich ol:not(.td-steps) { counter-reset: td-ol; } .td-rich ol:not(.td-steps) > li { counter-increment: td-ol; } .td-rich ol:not(.td-steps) > li::before { content: counter(td-ol) "."; position: absolute; left: 0; top: 0; color: var(--td-accent); font-weight: 600; } .td-rich blockquote { margin: 0 0 18px; padding: 14px 18px; border-left: 4px solid var(--td-accent-bright); background: var(--td-surface); border-radius: 0 var(--td-radius-sm) var(--td-radius-sm) 0; } /* steps → numbered vertical timeline */ .td-rich .td-steps { margin: 8px 0 0; padding: 0; counter-reset: td-step; } .td-steps > li { position: relative; counter-increment: td-step; margin: 0; padding: 0 0 32px 64px; } .td-steps > li::before { content: counter(td-step); position: absolute; left: 0; top: 0; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--td-navy); color: #fff; font-size: 16px; font-weight: 600; line-height: 1; box-shadow: 0 0 0 5px var(--td-bg); } .td-steps > li::after { content: ""; position: absolute; left: 20px; top: 46px; bottom: 4px; width: 2px; background: linear-gradient(var(--td-accent-bright), var(--td-line)); } .td-steps > li:last-child { padding-bottom: 0; } .td-steps > li:last-child::after { display: none; } .td-steps > li > h3 { margin: 8px 0 8px; } .td-steps > li > p:last-child { margin-bottom: 0; } /* aftercare → checklist */ .td-rich .td-checklist { display: grid; gap: 10px; margin: 8px 0 24px; } .td-rich .td-checklist > li { margin: 0; padding: 14px 16px 14px 52px; background: var(--td-good-soft); border-radius: var(--td-radius-sm); line-height: 1.5; } .td-rich .td-checklist > li::before { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--td-good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; } /* compare → scrollable table with a sticky first column */ .td-table-wrap { margin: 8px 0 20px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: var(--td-radius); } .td-rich table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 16px; line-height: 1.5; } .td-rich th, .td-rich td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--td-line); } .td-rich thead th { background: var(--td-navy); color: #fff; font-weight: 600; font-size: 15px; } .td-rich tbody tr:last-child td { border-bottom: 0; } .td-rich tbody tr:nth-child(even) td { background: #f8fafc; } .td-rich th:first-child, .td-rich td:first-child { position: sticky; left: 0; z-index: 1; min-width: 140px; max-width: 180px; box-shadow: inset -1px 0 0 var(--td-line); } .td-rich td:first-child { background: var(--td-surface); color: var(--td-navy); font-weight: 600; } @media (max-width: 575px) { .td-rich table { min-width: 500px; font-size: 15px; } .td-rich th, .td-rich td { padding: 12px; } .td-rich th:first-child, .td-rich td:first-child { min-width: 104px; max-width: 120px; } } .td-rich tbody tr:nth-child(even) td:first-child { background: #f8fafc; } /* types → card grid */ .td-cards { display: grid; gap: 16px; margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .td-card { position: relative; padding: 22px 22px 20px; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: var(--td-radius); box-shadow: var(--td-shadow); } .td-card__title { margin: 0 0 10px; color: var(--td-navy); font-size: 16px; line-height: 1.3; letter-spacing: .04em; } .td-card .td-rich { font-size: 16px; line-height: 1.65; } /* benefits-risks / candidates → two columns */ .td-split { display: grid; gap: 16px; margin-top: 8px; } @media (min-width: 640px) { .td-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .td-split__col { padding: 22px; border-radius: var(--td-radius); background: var(--td-surface); border: 1px solid var(--td-line); } .td-split__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--td-navy); font-size: 15px; letter-spacing: .06em; line-height: 1.3; } .td-split__title .td-icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; } .td-split__col--good { border-top: 4px solid var(--td-good); } .td-split__col--good .td-split__title .td-icon { background: var(--td-good-soft); color: var(--td-good); } .td-split__col--good .td-rich ul > li::before { background: var(--td-good); } .td-split__col--caution { border-top: 4px solid var(--td-caution); } .td-split__col--caution .td-split__title .td-icon { background: var(--td-caution-soft); color: var(--td-caution); } .td-split__col--caution .td-rich ul > li::before { background: var(--td-caution); } .td-split .td-rich { font-size: 16px; } /* myths → myth / fact pairs */ .td-myths { display: grid; gap: 16px; margin-top: 8px; } .td-myth { padding: 20px 22px; border-radius: var(--td-radius); background: var(--td-surface); border: 1px solid var(--td-line); } .td-myth__tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .td-myth__tag .td-icon { width: 16px; height: 16px; } .td-myth__tag--myth { color: var(--td-caution); } .td-myth__tag--fact { color: var(--td-good); margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--td-line); display: flex; } .td-myth__claim { margin: 0; color: var(--td-ink-2); font-size: 16px; line-height: 1.4; letter-spacing: .03em; } /* media */ .td-figure { margin: 0 0 20px; } .td-figure img { width: 100%; height: auto; display: block; border-radius: var(--td-radius); } .td-figure figcaption, .td-video figcaption, .td-gallery__item figcaption { margin-top: 8px; color: var(--td-ink-2); font-size: 14px; } .td-video { margin: 0 0 40px; } .td-video iframe, .td-video video { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; border-radius: var(--td-radius); background: #000; } .td-gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .td-gallery__item { margin: 0; } .td-gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--td-radius-sm); } /* ── Mid-article CTA ─────────────────────────────────────────────────────── */ .td-inline-cta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; margin: -16px 0 56px; padding: 20px; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: var(--td-radius); box-shadow: var(--td-shadow); } .td-inline-cta__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--td-accent-soft); color: var(--td-accent); } .td-inline-cta__text { margin: 0; color: var(--td-ink); font-size: 16px; line-height: 1.55; } .td-inline-cta .td-btn { grid-column: 1 / -1; } @media (min-width: 640px) { .td-inline-cta { grid-template-columns: auto minmax(0, 1fr) auto; } .td-inline-cta .td-btn { grid-column: auto; } } /* ── FAQ accordion ───────────────────────────────────────────────────────── */ .td-faq { max-width: 76ch; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: var(--td-radius); overflow: hidden; } .td-faq__item + .td-faq__item { border-top: 1px solid var(--td-line); } .td-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 20px; color: var(--td-navy); font-size: 17px; font-weight: 600; line-height: 1.45; cursor: pointer; list-style: none; transition: background-color .15s; } .td-faq__q::-webkit-details-marker { display: none; } .td-faq__q:hover { background: #f8fafc; } .td-faq__q .td-icon { color: var(--td-accent); transition: transform .2s var(--td-ease); } .td-faq__item[open] > .td-faq__q .td-icon { transform: rotate(180deg); } .td-faq__a { padding: 0 20px 18px; color: var(--td-ink); font-size: 17px; line-height: 1.7; max-width: 70ch; } .td-faq__a p { margin: 0 0 12px; color: inherit; font-size: inherit; line-height: inherit; } .td-faq__a p:last-child { margin-bottom: 0; } /* ── End CTA ─────────────────────────────────────────────────────────────── */ .td-cta { margin: 0 0 40px; padding: clamp(28px, 5vw, 48px); border-radius: 20px; text-align: left; background: radial-gradient(90% 140% at 100% 0%, rgba(75, 176, 232, .35) 0%, rgba(75, 176, 232, 0) 60%), var(--td-navy); color: #fff; } .td-cta__badge { display: inline-flex; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .td-cta .td-cta__title { margin: 0 0 12px; color: #fff; font-size: clamp(22px, 3vw, 32px); line-height: 1.2; text-wrap: balance; } .td-cta__sub { margin: 0 0 24px; max-width: 60ch; color: rgba(255, 255, 255, .88); font-size: 17px; line-height: 1.6; } /* ── Reviewer + disclaimer ───────────────────────────────────────────────── */ .td-trust { display: grid; gap: 16px; max-width: 76ch; } .td-reviewer { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: var(--td-radius); } .td-reviewer__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .td-reviewer__avatar--initials { display: flex; align-items: center; justify-content: center; background: var(--td-accent-soft); color: var(--td-navy); font-size: 18px; } .td-reviewer p { margin: 0; } .td-reviewer__eyebrow { color: var(--td-ink-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .td-reviewer__name { color: var(--td-navy); font-size: 17px; font-weight: 600; margin-top: 2px !important; } .td-reviewer__meta { color: var(--td-ink-2); font-size: 14px; line-height: 1.5; } .td-disclaimer { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--td-ink-2); font-size: 14px; line-height: 1.6; } .td-disclaimer .td-icon { width: 18px; height: 18px; margin-top: 2px; } /* ── Related treatments + dentists ───────────────────────────────────────── */ .td-related, .td-dentists { padding: 56px 0; border-top: 1px solid var(--td-line); background: var(--td-surface); } .td-dentists { background: var(--td-bg); } .td-related__title { margin: 0 0 24px; color: var(--td-navy); font-size: clamp(20px, 2.4vw, 26px); letter-spacing: .02em; } .td-dentists__list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .td-dentist { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .td-dentist:hover { border-color: #c9d4e2; box-shadow: var(--td-shadow); text-decoration: none; } .td-dentist__img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .td-dentist__img--initial { display: flex; align-items: center; justify-content: center; background: var(--td-accent-soft); color: var(--td-navy); } .td-dentist__name { display: block; color: var(--td-navy); font-size: 15px; font-weight: 600; } .td-dentist__city { display: block; color: var(--td-ink-2); font-size: 13px; } /* ========================================================================== LIST page (+ cards reused in "Related treatments") ========================================================================== */ .tl-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .35; } .tl-hero-sub { opacity: .9; } .tl-section { padding: 40px 0 88px; background: var(--td-bg); } .tl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 24px; } .tl-search { position: relative; display: flex; align-items: center; flex: 1 1 320px; max-width: 520px; margin: 0; } .tl-search .td-icon { position: absolute; left: 16px; color: var(--td-ink-2); pointer-events: none; } .tl-search__input { width: 100%; min-height: 52px; padding: 12px 18px 12px 48px; background: var(--td-surface); color: var(--td-ink); border: 1px solid #cdd5df; border-radius: 999px; font-size: 16px; /* ≥16px: no iOS zoom on focus */ transition: border-color .15s, box-shadow .15s; } .tl-search__input::placeholder { color: #667085; } .tl-search__input:focus { border-color: var(--td-accent); box-shadow: 0 0 0 4px rgba(75, 176, 232, .25); outline: none; } .tl-count { margin: 0; color: var(--td-ink-2); font-size: 15px; } .tl-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .tl-card { position: relative; display: flex; flex-direction: column; background: var(--td-surface); border: 1px solid var(--td-line); border-radius: 18px; overflow: hidden; transition: transform .2s var(--td-ease), box-shadow .2s var(--td-ease), border-color .2s; } .tl-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(16, 24, 40, .10); border-color: #d0d8e3; } /* One ring around the whole card when its link has keyboard focus */ .tl-card:has(.tl-card__link:focus-visible) { outline: 3px solid var(--td-accent-bright); outline-offset: 3px; } .tl-card[hidden] { display: none; } .tl-card__media { position: relative; aspect-ratio: 16 / 10; background: #e9eef4; overflow: hidden; } .tl-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--td-ease); } .tl-card:hover .tl-card__media img { transform: scale(1.03); } .tl-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #98a2b3; } .tl-card__placeholder .td-icon { width: 44px; height: 44px; } .tl-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 20px 18px; } .tl-card__title { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: .02em; } .tl-card__link { color: var(--td-navy); text-decoration: none; } .tl-card__link:hover { color: var(--td-navy); text-decoration: none; } /* Stretch the single link over the whole card */ .tl-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .tl-page .tl-card .tl-card__link:focus-visible, .td-page .tl-card .tl-card__link:focus-visible { outline: none; text-decoration: none; } .tl-card__excerpt { margin: 0; color: var(--td-ink-2); font-size: 16px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .tl-card__chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; } .tl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--td-bg); color: var(--td-ink); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; } .tl-chip .td-icon { width: 14px; height: 14px; color: var(--td-accent); } .tl-chip__label { color: var(--td-ink-2); } .tl-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--td-line); color: var(--td-accent); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .tl-card__more .td-icon { width: 16px; height: 16px; transition: transform .2s var(--td-ease); } .tl-card:hover .tl-card__more .td-icon { transform: translateX(4px); } .tl-empty { padding: 32px; text-align: center; background: var(--td-surface); border: 1px dashed #cdd5df; border-radius: 18px; color: var(--td-ink-2); font-size: 16px; } .tl-empty p { margin: 0 0 12px; } .tl-empty__title { color: var(--td-navy); font-size: 18px; font-weight: 600; } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { html:has(body.td-page) { scroll-behavior: auto; } .td-page *, .td-page *::before, .td-page *::after, .tl-page *, .tl-page *::before, .tl-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .tl-card:hover, .td-btn:hover { transform: none; } .tl-card:hover .tl-card__media img { transform: none; } .td-progress { display: none; } }