/*
Drom Clinic — orantı düzeltmeleri (2026-10-05)
Webflow çıkışının CSS'inden SONRA yüklenir; o dosyalara dokunulmaz.
Geri almak için HTML'lerdeki satırını silmek yeter.
Başlık ölçeği — her kırılımda sıra korunur: sayfa > bölüm > alt bölüm
masaüstü ≤991 ≤767 ≤479
sayfa (h1) 3.375 2.625 2 1.625
bölüm (h2) 2.625 2.125 1.625 1.375
alt bölüm (h2) 2 1.75 1.375 1.25
*/
/* Yorum bloğu ("Where care begins with conversation.") sayfanın kendi
başlıklarını ezmesin: bölüm başlığı ölçeğine iner. */
.moreport-h2.display { font-size: 2.625rem; letter-spacing: -.01em; line-height: 1.15; }
/* Sınıfsız h2 (Treatments kategori başlıkları, 34px) alt bölüm ölçeğine hizalanır. */
.moreport-h2:not(.large):not(.small):not(.display) { font-size: 2rem; line-height: 1.2; }
/* Hero'suz sayfa başlığı (Team, 44px) diğer sayfa başlıklarıyla aynı ölçeğe çıkar. */
.moreport-h1:not(.hero):not(.page) { font-size: 3.375rem; line-height: 1.1; }
@media screen and (max-width: 991px) {
.moreport-h2.display { font-size: 2.125rem; }
.moreport-h2.small,
.moreport-h2:not(.large):not(.small):not(.display) { font-size: 1.75rem; }
.moreport-h1:not(.hero):not(.page) { font-size: 2.625rem; }
}
@media screen and (max-width: 767px) {
.moreport-h2.display { font-size: 1.625rem; }
.moreport-h2.small,
.moreport-h2:not(.large):not(.small):not(.display) { font-size: 1.375rem; }
.moreport-h1:not(.hero):not(.page) { font-size: 2rem; }
}
@media screen and (max-width: 479px) {
.moreport-h2.display { font-size: 1.375rem; }
.moreport-h2.small,
.moreport-h2:not(.large):not(.small):not(.display) { font-size: 1.25rem; }
.moreport-h1:not(.hero):not(.page) { font-size: 1.625rem; }
}
/* Ortalanmış blokta başlık ortada, altındaki açıklama solda kalıyordu
(tedavi, teknoloji ve journal şablonları). Açıklama başlığın hizasını izler. */
.moreport-band-surface.center .moreport-paragraph-muted,
.moreport-section-head.center .moreport-paragraph-muted,
.moreport-h2.center + .moreport-paragraph-muted {
text-align: center;
}
/* v1 revize (2026-10-11): ana sayfa Signature Protocols paneli masaüstünde 600px.
Yüksekliği görsel değil metin + 600px taban belirler: görsel satıra boy vermez
(height:0) ama satırı doldurur (min-height:100%). Metin 600px'i aşarsa (≈992–1100px)
panel metne göre uzar, metin kırpılmaz. Tablet ve mobil v1 ölçüsünde kalır. */
@media screen and (min-width: 992px) {
.moreport-feature { grid-template-rows: minmax(600px, auto); }
.moreport-feature > img.moreport-placeholder.stretch {
height: 0; min-height: 100%; object-fit: cover;
}
}
/* v1 revize (2026-10-11): Signature Protocols panelindeki dört bilgi (Approach, Placement,
Products, Planning) tedavi sayfalarındaki Process adımlarının görünümünde.
Ölçüler Process'ten birebir; numara yerine Lucide outline ikon (32px, çizgi 1, site mavisi #4a7095) · başlık Georgia 14px ·
metin sans 14px/1.7 muted · numara–metin 12px. Panel dar olduğu için 2×2 ızgara. */
.drom-steps {
list-style: none; margin: 0 0 1.5rem; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1.75rem; row-gap: 1.25rem;
}
.drom-step { display: flex; align-items: flex-start; gap: 1rem; margin: 0; padding: 0; }
.drom-step-icon {
flex: none; width: 2rem; height: 2rem; margin-top: -.25rem;
color: #4a7095; /* site mavisi = --_drom-tokens---accent */
}
.drom-step-body { display: flex; flex-direction: column; min-width: 0; }
.drom-step-head {
font-family: var(--_drom-tokens---font-serif); font-weight: 400; font-size: .875rem;
line-height: 1.3; color: var(--_drom-tokens---text); margin-bottom: .5rem;
}
.drom-step-text {
font-family: var(--_drom-tokens---font-sans); font-size: .875rem; line-height: 1.7;
color: var(--_drom-tokens---text-muted);
}
/* ≤991'de panel daralır (768'de iki sütunda kelimeler taşıyordu): tek sütun. */
@media screen and (max-width: 991px) {
.drom-steps { grid-template-columns: 1fr; row-gap: 1rem; }
}
/* v1 revize (2026-10-11): panel üç bölge — metin üstte, 2×2 adım kartları ortada,
butonlar altta. Panel dikey flex; adımlar kalan boşluğun ortasında. */
.moreport-feature > .moreport-info-panel { display: flex; flex-direction: column; }
.moreport-feature > .moreport-info-panel > .drom-steps { margin-block: auto; padding-block: .75rem; }
.moreport-feature > .moreport-info-panel > .moreport-container-flex { margin-top: auto; }
.drom-steps { margin-bottom: 0; column-gap: .75rem; row-gap: .75rem; }
.drom-step {
background: var(--_drom-tokens---background); border: 1px solid var(--_drom-tokens---border);
border-radius: var(--_drom-tokens---radius); padding: .75rem .875rem;
}
/* 992–1279: kart dar; ikon yanda kalır ama küçülür. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
.drom-step { gap: .625rem; padding: .75rem; }
.drom-step-icon { width: 1.5rem; height: 1.5rem; }
}
@media screen and (max-width: 991px) { .drom-steps { row-gap: .75rem; } }
/* v1 revize (2026-10-11): ikon, başlık + açıklama bloğunun dikey ortasında. */
.drom-step { align-items: center; }
.drom-step-icon { margin-top: 0; }
.drom-step-head { margin-bottom: .25rem; }
/* v1 revize (2026-10-11): 2×2 ızgara metin ile butonlar arasındaki tüm boşluğu doldurur;
iki satır eşit paylaşır. Kartlarda çerçeve yok. */
.moreport-feature > .moreport-info-panel > .drom-steps {
flex: 1 1 auto; margin-block: 0; padding-block: 1.25rem; grid-auto-rows: 1fr;
}
.moreport-feature > .moreport-info-panel > .moreport-container-flex { margin-top: 0; }
.drom-step { border: 0; }
/* v1 revize (2026-10-11): ızgaranın üst/alt boşluğu = butonların panel kenarına mesafesi.
Değer panelin kendi dikey padding'inden devralınır (masaüstü 48px, mobil 32px). */
.moreport-feature > .moreport-info-panel > .drom-steps { padding-block: inherit; }
/* Açıklama paragrafının Webflow alt boşluğu (24px) ızgaranın üst boşluğuna ekleniyordu. */
.moreport-feature > .moreport-info-panel > .moreport-paragraph-muted { margin-bottom: 0; }
/* v1 revize (2026-10-11): ızgaranın üst/alt boşluğu 28px (tüm genişlikler). */
.moreport-feature > .moreport-info-panel > .drom-steps { padding-block: 28px; }
/* v1 revize (2026-10-11): Signature Protocols panelindeki tüm metinlerde satır yüksekliği 1.3. */
.moreport-feature > .moreport-info-panel,
.moreport-feature > .moreport-info-panel :is(div, p, h2, h3, strong, span, a) { line-height: 1.3; }
/* v1 revize (2026-10-11): paneldeki gövde metinlerine harf aralığı .025rem. */
.moreport-feature > .moreport-info-panel > .moreport-paragraph-muted,
.drom-step-text { letter-spacing: .01rem; }
/* v1 revize (2026-10-11): bölüm etiketleri (h2'nin hemen üstündeki eyebrow, ör. "Signature
Protocols") gövde metniyle harf aralığı: .1rem. Menü ve görsel üstü hariç. */
.moreport-eyebrow:not(.on-image):has(+ :is(h2, .moreport-h2)):not(:is(.moreport-header, .moreport-mega) *) {
letter-spacing: .1rem;
}
/* v1 revize (2026-10-11): kartta ikon sol üstte, başlık + açıklama altında (tüm genişlikler). */
.drom-step { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .75rem; }
.drom-step-icon { width: 2rem; height: 2rem; margin: 0; }
/* İkon + başlık + açıklama grubu kartın dikey ortasında (yatayda sola yaslı). */
.drom-step { justify-content: center; }
/* v1 revize (2026-10-11): kart %60 metin / %40 görsel (iki sütunlu tüm genişlikler). */
@media screen and (min-width: 768px) {
.moreport-feature { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* v1 revize (2026-10-11): kart iç boşluğu dört kenarda 25px (tüm genişlikler). */
.moreport-feature .drom-steps > .drom-step { padding: 25px; }
/* v1 revize (2026-10-11): metin paneli ile fotoğrafın birleştiği kenar düz; dış köşeler 12px kalır. */
@media screen and (min-width: 768px) {
.moreport-feature > img.moreport-placeholder.stretch { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.moreport-feature > .moreport-info-panel { border-top-right-radius: 0; border-bottom-right-radius: 0; }
}
@media screen and (max-width: 767px) {
.moreport-feature > img.moreport-placeholder.stretch { border-top-left-radius: 0; border-top-right-radius: 0; }
.moreport-feature > .moreport-info-panel { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}
/* v1 revize (2026-10-11): sekme/çip barları sola hizalı (ana sayfa ×3, treatments, journal, faq).
Yalnız filtre çipi taşıyan justify-center kaplar; aynı sınıfı kullanan diğer düzenler etkilenmez. */
.moreport-container-flex.justify-center:has(.moreport-filter-chip):not(:is(.moreport-header, .moreport-mega) *) {
justify-content: flex-start;
}
/* v1 revize (2026-10-11): sekme barının altındaki boşluk her yerde 32px (Signature Protocols gibi).
Treatments/Conditions şeritlerinde barın 32px'ine şeridin kendi 32px üst boşluğu ekleniyordu (64px). */
section:has(.moreport-filter-chip) .moreport-marquee-track:not(:is(.moreport-header, .moreport-mega) *) { margin-top: 0; }
/* v1 revize (2026-10-11): ana sayfa Treatments ve Conditions şeritlerinde oklar kartların üstünde.
Bölüm tek sütunlu grid; şerit ile ok katmanı aynı hücrede üst üste. Okların arası tıklamayı
geçirir (kartlar tıklanır). Kaydırmayı index.html sonundaki küçük script yapar. */
section:has(> .drom-carousel-nav) { display: grid; grid-template-columns: minmax(0, 1fr); }
section:has(> .drom-carousel-nav) > .moreport-marquee-viewport,
section:has(> .drom-carousel-nav) > .drom-carousel-nav { grid-row: 2; grid-column: 1; }
.drom-carousel-nav {
position: relative; z-index: 2; align-self: center; pointer-events: none;
display: flex; justify-content: space-between; padding-inline: 1rem;
}
.drom-carousel-btn {
pointer-events: auto; width: 2.75rem; height: 2.75rem; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; padding: 0;
background: var(--_drom-tokens---background); color: var(--_drom-tokens---text);
border: 0; box-shadow: 0 1px 2px rgba(50, 45, 35, .12); cursor: pointer; text-decoration: none;
transition: opacity .2s ease;
}
.drom-carousel-btn:hover { color: var(--_drom-tokens---accent); }
.drom-carousel-btn:focus-visible { outline: 2px solid var(--_drom-tokens---accent); outline-offset: 3px; }
.drom-carousel-btn:disabled { opacity: 0; pointer-events: none; }
.drom-carousel-btn svg { width: 1.25rem; height: 1.25rem; }
/* Ok düğmeleri: mavi daire, beyaz ikon. */
.drom-carousel-btn { background: var(--_drom-tokens---accent); color: #fff; box-shadow: none; }
.drom-carousel-btn:hover { background: #3d5f80; color: #fff; }
.drom-carousel-btn:focus-visible { outline-color: var(--_drom-tokens---accent); }
/* v1 revize (2026-10-11): görselli kartlarda (carousel) yazı kenar boşluğu 20px; sağda da 20px sınır. */
.moreport-carousel-card .moreport-card-label { left: 20px; bottom: 20px; right: 20px; }
/* v1 revize (2026-10-11): ana sayfa Treatments/Conditions şeritleri container sınırında kırpılır;
ilk ve görünen son kart container kenarında biter, dışarısı kesilir.
Kenar = container padding'i: ≥992 64px · 768–991 32px · ≤767 20px. */
section:has(> .drom-carousel-nav) > .moreport-marquee-viewport { margin-inline: 64px; }
section:has(> .drom-carousel-nav) > .moreport-marquee-viewport > .moreport-marquee-track { padding-left: 0; padding-right: 0; }
section:has(> .drom-carousel-nav) > .drom-carousel-nav { margin-inline: 64px; }
@media screen and (max-width: 991px) {
section:has(> .drom-carousel-nav) > :is(.moreport-marquee-viewport, .drom-carousel-nav) { margin-inline: 32px; }
}
@media screen and (max-width: 767px) {
section:has(> .drom-carousel-nav) > :is(.moreport-marquee-viewport, .drom-carousel-nav) { margin-inline: 20px; }
}
/* Şeridin Webflow'daki sabit genişliği kenar boşluğunu sağa itiyordu: genişlik hücreye göre. */
section:has(> .drom-carousel-nav) > :is(.moreport-marquee-viewport, .drom-carousel-nav) { width: auto; max-width: none; min-width: 0; }
/* Düzeltme: şerit solda container çizgisinde başlar ve kırpılır, sağda tarayıcı kenarına kadar uzanır. */
section:has(> .drom-carousel-nav) > .moreport-marquee-viewport { margin-right: 0; }
/* v1 revize (2026-10-11): şeritte container başından tarayıcı kenarına N.5 kart görünür
(yarım kart kaydırılabilirliği gösterir). Kart genişliği şerit genişliğinin oranıdır (cqw):
(100% − N × boşluk) ÷ (N + 0.5). ≥1200: 5.5 · 992–1199: 4.5 · 768–991: 3.5 · ≤767: 1.5 */
section:has(> .drom-carousel-nav) > .moreport-marquee-viewport { container-type: inline-size; --drom-n: 5; --drom-gap: 20px; }
@media screen and (max-width: 1199px) { section:has(> .drom-carousel-nav) > .moreport-marquee-viewport { --drom-n: 4; } }
@media screen and (max-width: 991px) { section:has(> .drom-carousel-nav) > .moreport-marquee-viewport { --drom-n: 3; } }
@media screen and (max-width: 767px) { section:has(> .drom-carousel-nav) > .moreport-marquee-viewport { --drom-n: 1; } }
section:has(> .drom-carousel-nav) > .moreport-marquee-viewport .moreport-carousel-card {
--drom-w: calc((100cqw - var(--drom-n) * var(--drom-gap)) / (var(--drom-n) + .5));
flex: 0 0 var(--drom-w); width: var(--drom-w); min-width: 0; max-width: none;
}
/* v1 revize (2026-10-11): Signature Protocols paneli 600 → 580px taban (masaüstü). */
@media screen and (min-width: 992px) {
.moreport-feature { grid-template-rows: minmax(580px, auto); }
}
/* v1 revize (2026-10-11): 2×2 kart iç boşluğu 25 → 20px. */
.moreport-feature .drom-steps > .drom-step { padding: 20px; }
/* v1 revize (2026-10-11): ızgaranın üst/alt boşluğu 28 → 20px. */
.moreport-feature > .moreport-info-panel > .drom-steps { padding-block: 20px; }
/* Optik düzeltme: paragrafın satır kutusu yazı çizgisinin altında ~3px boşluk taşır (1.3 satır
yüksekliği). Metnin görünen alt kenarından kartlara mesafe = kartlardan butonlara = 20px. */
.moreport-feature > .moreport-info-panel > .drom-steps { padding-top: 17px; }
/* v1 revize (2026-10-11): kart yüksekliğinin esnekliği iptal — kartlar içerik kadar.
Izgara boşluğu doldurmaz; panelde kalan fazla boşluk butonların üstüne girer (butonlar altta kalır). */
.moreport-feature > .moreport-info-panel > .drom-steps { flex: 0 0 auto; grid-auto-rows: auto; }
.moreport-feature > .moreport-info-panel > .moreport-container-flex { margin-top: auto; }
/* v1 revize (2026-10-11): 2×2 ızgara açıklama ile butonlar arasında dikeyde ortalı.
Fazla boşluk ızgaranın üstüne ve altına eşit dağılır; butonlar altta kalır. */
.moreport-feature > .moreport-info-panel > .drom-steps { margin-block: auto; }
.moreport-feature > .moreport-info-panel > .moreport-container-flex { margin-top: 0; }
/* v1 revize (2026-10-11): önce/sonra kartı — oklar slider'lardaki gibi görselin üstünde (sol/sağ,
dikey orta), açıklama kart içinde ortalı. Oklar karşılaştırma sahnesinin dışında (sürgüyü tetiklemesin);
sahne ile ok katmanı aynı grid hücresinde üst üste. */
.moreport-info-panel:has(> .drom-compare-nav) { display: grid; grid-template-columns: minmax(0, 1fr); }
.moreport-info-panel:has(> .drom-compare-nav) > .moreport-compare-stage,
.moreport-info-panel:has(> .drom-compare-nav) > .drom-compare-nav { grid-row: 1; grid-column: 1; }
.drom-compare-nav {
position: relative; z-index: 3; align-self: center; pointer-events: none;
display: flex; justify-content: space-between; padding-inline: 1rem;
}
.drom-compare-caption { text-align: center; margin: 1rem 0 0; }
/* v1 revize (2026-10-11): önce/sonra görseli kartın üst/sol/sağ kenarına tam oturur (iç boşluk yok);
üst köşeler kartın yuvarlaklığını alır. Açıklamanın üstünde ve altında GÖRÜNEN boşluk eşit (24px):
satır kutusu harfin üstünde ≈11px, yazı çizgisinin altında ≈3px görünmez pay taşır →
üst margin 13px, panel alt padding 21px. */
.moreport-info-panel:has(> .drom-compare-nav) { padding: 0 0 21px; overflow: hidden; }
.moreport-info-panel:has(> .drom-compare-nav) > .moreport-compare-stage { border-radius: 0; }
.drom-compare-caption { margin-top: 13px; padding-inline: 1rem; }
/* Optik düzeltme: satır çoğunlukla küçük harf; göz üst kenarı x-yüksekliğinde okur.
x-yüksekliği → görsel ≈ yazı çizgisi → kart altı ≈24px olsun diye üst margin 13 → 10px. */
.drom-compare-caption { margin-top: 10px; }
/* Optik düzeltme: kartın açık alt kenarı sayfa zeminine karışıp alt boşluğu büyük gösteriyor.
Panel alt padding 21 → 17px (yazı çizgisi → kart altı ≈20px). */
.moreport-info-panel:has(> .drom-compare-nav) { padding-bottom: 17px; }
/* Kullanıcı ayarı: alt boşluk 6px daha dar (panel alt padding 17 → 11px). */
.moreport-info-panel:has(> .drom-compare-nav) { padding-bottom: 11px; }
/* v1 revize (2026-10-11): ana sayfa About DROM Clinic + Meet Us kartlarında içerik dört kenardan
site kenar boşluğuyla konumlanır (≥992 64px · 768–991 32px · ≤767 20px). İçerik üste yaslı,
böylece üst mesafe de padding'e eşit kalır. */
.moreport-vertical-flex.center.pad.half { padding: 64px; justify-content: flex-start; }
@media screen and (max-width: 991px) { .moreport-vertical-flex.center.pad.half { padding: 32px; } }
@media screen and (max-width: 767px) { .moreport-vertical-flex.center.pad.half { padding: 20px; } }
/* Satır sabit 380px idi; 64px kenar boşluğuyla içerik taşıyordu. 380px artık taban, içerik uzunsa satır uzar. */
.moreport-split-row:has(.moreport-vertical-flex.center.pad.half) { height: auto; }
.moreport-split-row:has(.moreport-vertical-flex.center.pad.half) > .moreport-split-card { height: auto; }
.moreport-split-row:has(.moreport-vertical-flex.center.pad.half) .moreport-vertical-flex.center.pad.half { height: auto; }
/* v1 revize (2026-10-11): Trustpilot ve Google rozetleri orijinal logolarla (Trustpilot yıldızı #00B67A,
Google dört renkli G). 2026-10-13: iki rozet de .drom-review-badge — Google ve Trustpilot
değerlendirme sayfalarına yeni sekmede açılır. */
.drom-review-mark { display: inline-flex; width: 1.125rem; height: 1.125rem; flex: none; }
.drom-review-logo { width: 100%; height: 100%; display: block; }
/* v1 revize (2026-10-11): About DROM Clinic / Meet Us paragrafları panel gövde stilinde
(sans 14px · satır 1.3 · harf aralığı .025rem · muted renk). Rozet satırları hariç. */
.moreport-vertical-flex.center.pad.half > p.moreport-paragraph {
font-size: .875rem; line-height: 1.3; letter-spacing: .01rem; color: var(--_drom-tokens---text-muted);
}
/* v1 revize (2026-10-11): rozetler buton gibi — beyaz zemin, çerçevesiz, pill. */
.drom-review-badge {
background: var(--_drom-tokens---background); border: 0; border-radius: var(--_drom-tokens---radius-pill);
padding: .5rem 1rem; gap: .5rem; align-items: center; text-decoration: none;
}
.drom-review-badge > p.moreport-paragraph { margin: 0; line-height: 1.3; }
/* v1 revize (2026-10-11): About DROM Clinic / Meet Us kartları (≥768) — görsel kartın tamamını
arka plan olarak kaplar, metin kullanılabilir alanın %60'ında. Okunurluk için görselin üstünde
soldan sağa bej → şeffaf geçiş (metin bölgesi zemin renginde kalır). Mobil yığılı düzen değişmez. */
@media screen and (min-width: 768px) {
.moreport-split-card > .moreport-placeholder.right-half { left: 0; right: 0; width: 100%; }
.moreport-split-card > .moreport-placeholder.right-half > img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.moreport-split-card > .moreport-placeholder.right-half > .moreport-image-fade { display: none; }
.moreport-split-card > .moreport-placeholder.right-half::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, var(--_drom-tokens---surface) 0%, var(--_drom-tokens---surface) 50%, rgba(243, 242, 234, 0) 75%);
}
.moreport-split-card > .moreport-placeholder.right-half > .moreport-eyebrow { position: absolute; right: 2rem; bottom: 2rem; z-index: 1; }
.moreport-split-card > .moreport-vertical-flex.center.pad.half { flex: 0 0 60%; width: 60%; max-width: 60%; }
}
@media screen and (min-width: 768px) {
/* Portre geniş karta yayılınca yüz üstten kırpılıyordu: odak yüze (sağ, üstten %12). */
.moreport-split-card > .moreport-placeholder.right-half > img { object-position: 100% 12%; }
}
@media screen and (min-width: 768px) {
/* Meet Us portresi kendi oranında: kart yüksekliği kadar, genişlik orana göre, sağa yaslı (kırpma yok).
Sol kenarı bej zemine yumuşak geçişle karışır. */
.moreport-split-card > .moreport-placeholder.right-half > img {
position: absolute; top: 0; right: 0; left: auto; height: 100%; width: auto; max-width: none;
object-fit: contain; object-position: right center;
}
.moreport-split-card > .moreport-placeholder.right-half:has(> img) { background: var(--_drom-tokens---surface); }
.moreport-split-card > .moreport-placeholder.right-half:has(> img)::after {
left: auto; width: 100%;
background: linear-gradient(90deg, var(--_drom-tokens---surface) 0%, var(--_drom-tokens---surface) 45%, rgba(243, 242, 234, 0) 70%);
}
}
/* Trustpilot ile Google rozetleri arası 24px. */
.moreport-container-flex:has(> .drom-review-badge) { gap: 24px; }
/* v1 revize (2026-10-11): About DROM Clinic / Meet Us — her kart iki kutu: solda içerik (%60),
sağda 1:1 kare görsel (%40). Arka plan görsel ve geçiş efekti kaldırıldı. ≥768. */
@media screen and (min-width: 768px) {
.moreport-split-card { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.moreport-split-card > .moreport-vertical-flex.center.pad.half { width: auto; max-width: none; flex: none; grid-column: 1; }
.moreport-split-card > .moreport-placeholder.right-half {
position: relative; inset: auto; grid-column: 2; width: 100%; height: auto; aspect-ratio: 1 / 1;
overflow: hidden; display: flex; align-items: center; justify-content: center;
background: var(--_drom-tokens---placeholder-bg);
}
.moreport-split-card > .moreport-placeholder.right-half::after { content: none; }
.moreport-split-card > .moreport-placeholder.right-half > img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.moreport-split-card > .moreport-placeholder.right-half > .moreport-eyebrow { position: static; }
}
/* v1 revize (2026-10-11): About / Meet Us kartları 50/50. Görsel en az 1:1 kare; içerik kareden uzunsa
görsel kartın tüm yüksekliğini doldurur (cover) — görselin altında boşluk kalmaz. Fotoğraflarda köşe yok. */
@media screen and (min-width: 768px) {
.moreport-split-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.moreport-split-card > .moreport-placeholder.right-half { aspect-ratio: 1 / 1; min-height: 100%; height: auto; align-self: stretch; }
}
.moreport-split-card > .moreport-placeholder.right-half,
.moreport-split-card > .moreport-placeholder.right-half > img { border-radius: 0; }
/* v1 revize (2026-10-11): rozetler arası 10px; About / Meet Us içerikleri kutuda dikeyde ortalı. */
.moreport-container-flex:has(> .drom-review-badge) { gap: 10px; }
.moreport-split-card > .moreport-vertical-flex.center.pad.half { justify-content: center; }
/* v1 revize (2026-10-11): About / Meet Us içerikleri yatayda da ortalı. */
.moreport-split-card > .moreport-vertical-flex.center.pad.half { align-items: center; text-align: center; }
.moreport-split-card > .moreport-vertical-flex.center.pad.half .moreport-container-flex { justify-content: center; }
/* v1 revize (2026-10-11): içerik butonları (outline ve solid) sekme çipleri gibi pill. Menü hariç. */
:is(.moreport-button, .moreport-button-solid):not(:is(.moreport-header, .moreport-mega) *) {
border-radius: var(--_drom-tokens---radius-pill);
}
/* v1 revize (2026-10-12): ana sayfa Treatments / Signature Protocols / Conditions bölüm başlıkları ve
sekme barları sayfada ortalı (Clinic Results gibi). Yalnız bu üç bölüm; diğer sayfaların barları solda. */
:is(section:has(> .drom-carousel-nav), section:has(.moreport-feature)) .moreport-section-head {
justify-content: center; text-align: center;
}
:is(section:has(> .drom-carousel-nav), section:has(.moreport-feature)) .moreport-section-head .moreport-vertical-flex { align-items: center; }
:is(section:has(> .drom-carousel-nav), section:has(.moreport-feature)) .moreport-container-flex.justify-center:has(.moreport-filter-chip) {
justify-content: center;
}
/* v1 revize (2026-10-12): koşul sayfası tedavi listesi (DROM_Conditions_Treatments.pdf). Gövde stili. */
.drom-condition-body { margin-top: 1.5rem; }
.drom-condition-body h3 { font-family: var(--_drom-tokens---font-serif); font-weight: 400; font-size: 1.375rem; line-height: 1.3; margin: 0 0 .75rem; color: var(--_drom-tokens---text); }
.drom-condition-body ul { margin: 0 0 1rem; padding-left: 1.125rem; }
.drom-condition-body li { font-size: .875rem; line-height: 1.3; letter-spacing: .01rem; color: #67655b; margin-bottom: .375rem; }
.drom-condition-body .drom-condition-note { font-size: .8125rem; line-height: 1.5; color: var(--_drom-tokens---text-muted); margin: 0; }
/* v1 revize (2026-10-12): koşul sayfası tedavi listesi Signature Protocols 2×2 kartları gibi.
Kart sayısı maddeye göre değişir. Beyaz sayfa zemininde kartlar bej (panel zemini). */
.drom-condition-cards { margin: 0 0 1rem; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .75rem; row-gap: .75rem; }
.drom-condition-cards > .drom-step {
background: var(--_drom-tokens---surface); border: 0; border-radius: var(--_drom-tokens---radius);
padding: 20px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .75rem;
}
.drom-condition-cards .drom-step-icon { width: 2rem; height: 2rem; margin: 0; color: #4a7095; }
.drom-condition-cards .drom-step-head { margin: 0; font-size: .875rem; line-height: 1.3; letter-spacing: .025rem; }
@media screen and (max-width: 479px) { .drom-condition-cards { grid-template-columns: 1fr; } }
.drom-condition-body ul.drom-condition-cards { list-style: none; padding-left: 0; }
.drom-condition-body ul.drom-condition-cards > li { list-style: none; margin: 0; padding-left: 20px; }
.drom-condition-body ul.drom-condition-cards > li::before, .drom-condition-body ul.drom-condition-cards > li::marker { content: none; display: none; }
/* v1 revize (2026-10-12): koşul sayfası notu gövde metni boyutunda, ızgaradan 40px aşağıda. */
.drom-condition-body .drom-condition-note {
margin: 40px 0 0; font-size: .875rem; line-height: 1.3; letter-spacing: .01rem; color: var(--_drom-tokens---text-muted);
}
.drom-condition-body ul.drom-condition-cards { margin-bottom: 0; }
/* v1 revize (2026-10-12): koşul sayfası Treatment options bölümü — eyebrow, başlık ve not ortalı. */
.moreport-container._42-5rem:has(> .drom-condition-body) > :is(.moreport-eyebrow, h2) { text-align: center; }
.drom-condition-body .drom-condition-note { text-align: center; }
/* v1 revize (2026-10-12): 2×2 kartlarda gölge yok (koşul sayfaları + Signature Protocols paneli). */
.drom-step, .drom-step::before, .drom-step::after { box-shadow: none !important; filter: none; }
/* v1 revize (2026-10-12): header'da metin wordmark yerine SVG logotip (beyaz). Genişlik eski wordmark kadar:
≥480 228px, mobil 158px; yükseklik orandan. */
.moreport-header-logo { display: inline-flex; align-items: center; line-height: 0; letter-spacing: 0; }
.drom-header-logo { display: block; width: 228px; height: auto; }
@media screen and (max-width: 479px) { .drom-header-logo { width: 158px; } }
/* v1 revize (2026-10-12): Journal sayfasındaki kategori sekme barı ortalı. */
.moreport-container-flex.drom-chips-center { justify-content: center; }
/* Logo genişliği kendinden (kabı içerikten genişlik aldığı için 768'de 0'a düşüyordu). */
.drom-header-logo { max-width: none; flex: none; }
/* Journal çip barı tam satır genişliğinde, böylece sayfada ortalanır. */
.moreport-container-flex.drom-chips-center { width: 100%; align-self: stretch; }
/* Genel "çipler sola" kuralından daha özgül: Journal barı ortada. */
.moreport-container-flex.justify-center.drom-chips-center:has(.moreport-filter-chip):not(:is(.moreport-header, .moreport-mega) *) { justify-content: center; }
/* v1 revize (2026-10-12): /book-online rezervasyon sayfası. */
.drom-booking-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4rem; align-items: start; }
@media screen and (max-width: 991px) { .drom-booking-grid { grid-template-columns: 1fr; gap: 2rem; } }
.drom-booking-intro > .moreport-paragraph { font-size: .875rem; line-height: 1.3; letter-spacing: .01rem; color: var(--_drom-tokens---text-muted); margin-bottom: 1.5rem; }
.drom-booking-form { display: flex; flex-direction: column; gap: 1.25rem; }
.drom-booking-form .moreport-grid._2-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media screen and (max-width: 479px) { .drom-booking-form .moreport-grid._2-col { grid-template-columns: 1fr; } }
.drom-req { color: var(--_drom-tokens---accent); }
.drom-hint { font-size: .8125rem; margin: -0.5rem 0 0; }
.drom-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.drom-fieldset legend { padding: 0; margin-bottom: .5rem; }
.drom-choices { display: flex; gap: .5rem; flex-wrap: wrap; }
.drom-choice { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: var(--_drom-tokens---radius-pill); background: var(--_drom-tokens---background); cursor: pointer; font-size: .875rem; }
.drom-choice input { accent-color: var(--_drom-tokens---accent); margin: 0; }
.drom-submit { align-self: flex-start; border: 0; cursor: pointer; }
.drom-booking-form [aria-invalid="true"] { outline: 2px solid #b3261e; outline-offset: 1px; }
.drom-form-status { margin: 0; font-size: .875rem; line-height: 1.4; }
.drom-form-status.is-error { color: #b3261e; }
.drom-form-status.is-ok { color: var(--_drom-tokens---success); }
.drom-form-status a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.drom-booking-form select.moreport-form-input { height: auto; min-height: 2.75rem; line-height: 1.4; padding-top: .625rem; padding-bottom: .625rem; }
.drom-booking-form input.moreport-form-input { height: 2.75rem; }
/* v1 revize (2026-10-12): alt sayfa hero yüksekliği ekranın %50'si (ana sayfa hero'su hariç).
Webflow'un en az 35rem/30rem sınırı 50vh'yi ezdiği için kaldırıldı. */
.moreport-hero:not(#home-hero) { height: 50vh; min-height: 0; }
/* Yes / No seçenekleri normal ağırlıkta (Webflow label stili kalın yapıyordu). */
.drom-choice, .drom-choice span { font-weight: 400; }
/* v1 revize (2026-10-12): hero aşağı oku — metin karakteri (↓) yerine çizgisiz Lucide arrow-down. */
:is(.moreport-icon-button-on-image, .moreport-icon-button.pinned-bottom-center) { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.drom-hero-arrow { width: 1.25rem; height: 1.25rem; display: block; flex: none; }
/* Tüm hero okları aynı: 48px şeffaf daire, yarı saydam beyaz çerçeve, beyaz ikon. */
.moreport-hero .moreport-icon-button.pinned-bottom-center {
width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5);
background: transparent; color: #fff; padding: 0;
}
/* Hero oku her sayfada hero alt kenarından 32px yukarıda. */
.moreport-hero .moreport-icon-button.pinned-bottom-center { bottom: 36px; top: auto; }
/* v1 revize (2026-10-12): Team sayfasında ekip kartlarında alt çizgi yok. */
.moreport-team-card, .moreport-team-card * { text-decoration: none; }
/* ---- 2026-10-12 — WCAG 2.2 AA accessibility fixes (DROM Web test suite) ----
Contrast repairs, minimal darkening of existing hues (axe-core failures):
- header links #62625e on #a8b8c8 was 3.02:1 -> #484845 (4.53:1)
- muted text #8a857a on #fff/#f3f2ea/#e5e3d4 was down to 1.66:1 -> #67655b
(5.7/5.1/4.5:1); also hard-coded on .moreport-team-role and the journal
category pill, overridden by class
- placeholder text #b5b1a0 on #e5e3d4 was 1.66:1 -> #67655b (4.53:1)
- WhatsApp button: white on #25d366 was 1.98:1 -> dark green text (6.2:1);
reverted to white on 2026-10-15 at the design team's request, accepted
below AA (see scripts/checks/RELAXED.md §10)
- .on-surface eyebrows used opacity .7 (composited 2.96:1) -> solid muted
- consent checkbox enlarged to 24px (WCAG 2.2 target-size minimum)
Revert by deleting this block. */
:root{
--_drom-tokens---header-text:#484845;
--_drom-tokens---text-muted:#67655b;
--_drom-tokens---placeholder-text:#67655b;
}
.moreport-whatsapp-button{color:#fff}
.moreport-team-role{color:#67655b}
.moreport-article-category-pill{color:#67655b}
/* Inactive Signature Protocols tab chips: the page script gives them a mid-blue
background with near-white text (4.0:1). Pale blue + dark accent text keeps
the active/inactive distinction and passes AA (5.9:1). */
.w-dyn-item > .moreport-filter-chip.borderless:not(.on){
background-color:#e3eaf1 !important;
color:#3d5a77 !important;
}
.moreport-eyebrow.on-surface{opacity:1}
.moreport-placeholder p{color:#67655b}
.w-checkbox-input{width:1.5rem;height:1.5rem;min-width:1.5rem}
/* ---- 2026-10-12 — trust marquee moved above the top menu ----
The handover left the marquee in the document flow directly after the fixed
header, so the header covered it and it was never visible; the same strip was
then repeated again above the footer. It is now the first row inside the fixed
header, above the nav. Header chrome is therefore 3.5rem (marquee) + 4.5rem
(nav row) = 8rem — exactly what .moreport-hero's height: calc(100vh - 8rem)
already assumed. The page content needs that offset now that the marquee no
longer takes space in the flow; it also stops the header overlapping the top
of the first section, which it did on every page.
Revert by deleting this block. */
:root { --drom-header-chrome: 8rem; }
body { padding-top: var(--drom-header-chrome); }
html { scroll-padding-top: var(--drom-header-chrome); }
.moreport-mega { top: var(--drom-header-chrome); }
@media screen and (max-width: 767px) {
:root { --drom-header-chrome: 7.5rem; } /* 3.5rem marquee + 4rem nav row */
}
/* The mp-scroll keyframes loop the strip by translating it -50%, which lands on
exactly one content set only while the track's padding-left equals its column
gap. It does at full width (both 4rem), but .gutter-lead drops the padding to
2rem under 992px and 1.25rem under 768px while the gap stays 4rem, so the loop
overshoots and the strip visibly jumps once per 36s cycle. That was harmless
while the strip was hidden behind the header. Hold the padding at the gap for
this one strip; the other marquees keep the page gutter. */
@media screen and (max-width: 991px) {
.moreport-trust-bar .moreport-marquee-track.gutter-lead { padding-left: 4rem; }
}
/* The team pages never carried the marquee, so their Webflow stylesheet has no
rules for it. Same declarations as the other pages' stylesheets, restated here
(loaded last, identical values) so the header renders the same on all 155. */
.moreport-marquee-track { will-change: transform; gap: 0; width: max-content; display: flex; }
.moreport-marquee-track._4rem { gap: 4rem; }
.moreport-trust-bar {
height: var(--_sizes---3-5rem);
border-bottom: 1px solid var(--_drom-tokens---border);
background-color: var(--_drom-tokens---background);
align-items: center;
display: flex;
overflow: hidden;
}
.moreport-trust-item {
color: var(--_drom-tokens---text-muted);
font-size: var(--_type-scale---0-75rem);
letter-spacing: .14em;
text-transform: uppercase;
align-items: center;
column-gap: var(--_sizes---0-75rem);
white-space: nowrap;
flex-shrink: 0;
display: flex;
}
/* ---- 2026-10-12 — top menu in capitals, with a blue line under the item ----
Derin's brief, modelled on drmaryamzamani.com's top menu.
The handover already tried to draw that line: .moreport-header-nav-link sets
border-bottom-width/-color and transitions border-color, but the same rule
also sets border-style:none, so no border was ever painted. Hovering only
made the label bold, which re-flowed the whole nav row. The line is drawn
here with a pseudo-element instead — it takes no layout space, so nothing
moves, and it can wipe in from the left the way the reference site's does.
It shows on hover, on keyboard focus, while that item's mega menu is open
(.active, set by the header script) and on the item's own page (.w--current,
which the export puts on the six top-level pages; treatment/condition detail
pages carry no current-page link).
#3d5a77 on the #a8b8c8 header bar is 3.5:1, above the 3:1 WCAG 2.2 AA
minimum for non-text; the brand accent #4a7095 itself is only 2.6:1 and
reads washed out there. It is the same blue already used for the Signature
Protocols chips above.
Revert by deleting this block. */
:root { --drom-nav-underline: #3d5a77; }
.moreport-header-nav-link {
position: relative;
text-transform: uppercase;
letter-spacing: .1em;
}
/* The line marks the open item now, so drop the handover's bold — it changed
the label's width and pushed the rest of the row sideways on every hover. */
.moreport-header-nav-link.active { font-weight: 400; }
.moreport-header-nav-link::after {
content: "";
position: absolute;
left: 0;
right: .1em; /* discount the trailing letter-space so the line sits flush */
bottom: .375rem;
height: 2px;
background-color: var(--drom-nav-underline);
transform: scaleX(0);
transform-origin: left center;
transition: transform .25s ease;
}
.moreport-header-nav-link:hover::after,
.moreport-header-nav-link:focus-visible::after,
.moreport-header-nav-link.active::after,
.moreport-header-nav-link.w--current::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.moreport-header-nav-link::after { transition: none; }
}
/* Windows High Contrast Mode replaces every author background with the forced
Canvas colour, which would paint the line in the header's own colour and hide
it completely — and the handover's bold, which used to survive there, is gone.
A system colour keyword is kept as given, so the line stays visible. */
@media (forced-colors: active) {
.moreport-header-nav-link::after { background-color: LinkText; }
}
/* Capitals are wider than the mixed case they replace (the six labels grow from
248px to 334px), and the header row has no spare width left below ~1100px.
Between the burger breakpoint and there, the labels step down a size and the
tracking tightens, which keeps the row inside its grid on iPad landscape. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.moreport-header-nav-link { font-size: .8125rem; letter-spacing: .05em; }
.moreport-header-nav { column-gap: 1rem; }
.moreport-header-nav.right { column-gap: .875rem; }
/* Same 2px line — a fractional height renders fuzzy on non-retina screens —
sitting a touch closer to the smaller label. `right` tracks the reduced
letter-spacing above, so the line still ends level with the last glyph. */
.moreport-header-nav-link::after { bottom: .4375rem; right: .05em; }
}
/* ---- 2026-10-13 — header below 992px uses the phone layout -----------------
Between 768px and 991px the full header row needs ~1006px: the WhatsApp and
Book Online buttons hung off the right edge of an iPad in portrait and could
not be reached at all. The export only switches to the burger at ≤767px;
these rules extend the exact same phone pattern up to 1159px. The row's
natural width is ~1006px, but the grid gives each side half the free space,
and the busier right side makes "Book Online" wrap to two lines anywhere
below ~1160 (measured: wraps at 1120, fits at 1160) — iPad landscape (1080)
included. Revert by deleting this block. */
@media screen and (max-width: 1159px) {
.moreport-header-nav { display: none; }
.moreport-burger { display: flex; }
.moreport-header-row {
grid-template-columns: auto 1fr auto;
height: 4rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.moreport-header-logo { text-align: center; }
}
/* In the tablet range the row is wide: without a placement the burger lands at
the start of the stretchy middle column, right beside the logo. Pin it to
the far right. Phones (≤767px) keep the export's own layout untouched. */
@media screen and (min-width: 768px) and (max-width: 1159px) {
.moreport-burger { grid-column: 3; justify-self: end; }
}
/* ---- 2026-10-13 — the Treatments controls in capitals ----
Derin's brief, following the capitalised top menu. The same three labels
(Face & Neck / Body / IV Drips) appear twice — as the tabs at the top of the
Treatments dropdown and as the filter row on /treatments — and both now read
as capitals so they match each other and the menu above them.
Capitals set too tight without tracking: .1em matches .moreport-eyebrow, the
house small-caps sans, for the chips; .06em matches .moreport-mega-heading,
the house small-caps serif, for the tabs.
.moreport-mega-subtab is shared with the Conditions dropdown's two tabs —
the same control one pane over, so they follow suit rather than being left
as the odd ones out. The chip rule is hooked to .drom-chips-caps on the
Treatments filter row only, so the journal categories, the home-page
treatment chips and the FAQ chips keep their mixed case.
Revert by deleting this block and the class on treatments.html. */
.moreport-mega-subtab { text-transform: uppercase; letter-spacing: .06em; }
.drom-chips-caps .moreport-filter-chip { text-transform: uppercase; letter-spacing: .1em; }
/* Capitals plus tracking widen the three chips past a 320px screen, and this is
the one chip row the export left without `wrap`, so the third chip pushed the
page sideways. The journal and home-page rows already wrap; this one now does
too, which costs nothing at wider widths. */
.drom-chips-caps { flex-wrap: wrap; }
/* ---- 2026-10-13 — menu lines: wipe through, and the same line on the
dropdown links ----
Derin's brief, after looking at drmaryamzamani.com again.
1. The top-menu line now leaves the way the reference site's does. Measured
there: a 1px bar parked at translateX(-58px) inside an overflow:hidden wrap,
so it slides in from the left and keeps going out to the right rather than
retracting the way it arrived. Flipping transform-origin between the resting
and hovered states gives that wipe-through with no extra markup: drawn from
the left on the way in, run off to the right on the way out. Slower and on an
ease-out curve, which reads as drawn rather than snapped.
2. The line on the page you are on now draws itself in on arrival, so landing
on /journal shows JOURNAL being underlined rather than finding it already so.
3. The dropdown lists get the same line on hover — The Clinic, Our Philosophy,
Brow lift, Forehead, Frown Lines and the rest, in every pane. These are
display:block and fill their column, so a pseudo-element would stretch the
line across the whole column; text-decoration follows the words themselves.
The full-width hover target is kept deliberately: the line answers the mouse
as it comes near the row, which is what Derin asked for. Fading the colour up
from transparent is the one text-decoration part that animates everywhere.
Scoped to .moreport-mega so the footer's stacked links are untouched.
#3d5a77 on the dropdown's white is 7.2:1.
Revert by deleting this block. */
.moreport-header-nav-link::after {
transform-origin: right center; /* at rest: parked ready to leave rightwards */
transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}
.moreport-header-nav-link:hover::after,
.moreport-header-nav-link:focus-visible::after,
.moreport-header-nav-link.active::after,
.moreport-header-nav-link.w--current::after {
transform: scaleX(1);
transform-origin: left center; /* arriving: drawn from the left */
}
@keyframes drom-nav-draw { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.moreport-header-nav-link.w--current::after {
animation: drom-nav-draw .55s cubic-bezier(.22, .61, .36, 1) .2s both;
}
.moreport-mega :is(.moreport-stacked-link, .moreport-serif-link) {
text-decoration-line: underline;
text-decoration-color: transparent;
text-decoration-thickness: 2px;
text-underline-offset: .3em;
transition: color .2s, text-decoration-color .25s ease;
}
.moreport-mega :is(.moreport-stacked-link, .moreport-serif-link):hover,
.moreport-mega :is(.moreport-stacked-link, .moreport-serif-link):focus-visible {
text-decoration-color: var(--drom-nav-underline);
}
@media (prefers-reduced-motion: reduce) {
/* The rule above re-declares this transition later in the file than the
earlier reduced-motion block, which would otherwise reinstate the wipe for
people who have asked for less motion. Restated here so it stays off. */
.moreport-header-nav-link::after { transition: none; }
.moreport-header-nav-link.w--current::after { animation: none; }
.moreport-mega :is(.moreport-stacked-link, .moreport-serif-link) { transition: none; }
}
/* ---- 2026-10-13 — before/after: the knob is the only control ---------------
Tapping the photo no longer jumps the divider (Derin: touch devices moved it
by accident). The knob follows the divider, is draggable (pointer/touch,
56px hit area) and keyboard-adjustable (it is a slider for screen readers).
Revert by deleting this block and restoring the old inline handler. */
.moreport-compare-stage .moreport-icon-button.knob {
pointer-events: auto;
cursor: grab;
touch-action: none;
}
.moreport-compare-stage .moreport-icon-button.knob::before {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
}
/* ---- 2026-10-13 — iPhone/iPad QA round (visual sweep findings) -------------
Each rule answers one finding; delete individually to revert. */
/* Home About/Meet-Us band: at tablet widths the two 50/50 cards sat side by
side, quartering the page into 270px columns that shattered the text
("Patient-centred." breaking at the hyphen, names one word per line).
Below the same 1160px header threshold the cards stack full-width. */
@media screen and (min-width: 768px) and (max-width: 1159px) {
.moreport-split-row { grid-template-columns: 1fr; }
}
/* FAQ page CTA row: "Contact us" stretched edge-to-edge on phones with its
rounded corners clipped offscreen, next to a normal-width pill. */
@media screen and (max-width: 767px) {
.moreport-container-flex.center.wrap > .moreport-button-solid.pill {
width: auto;
flex: 0 0 auto;
}
}
/* Journal "Related articles" cards are plain Webflow inline-block links and
inherited the browser underline on every line of card text. */
a.w-inline-block { text-decoration: none; }
/* A pull-quote whose CMS fields came through empty rendered as a bare styled
box (journal articles). Hide the box when there is nothing in it. */
.moreport-pullquote:has(.w-dyn-bind-empty) { display: none; }
/* 320px-class phones: the treatment-category chips wrapped internally into
two-line pills of uneven height, and the hero's scroll arrow overlapped the
bottom of long H1s ("Morpheus8"). */
@media screen and (max-width: 379px) {
.moreport-filter-chip { white-space: nowrap; }
.moreport-hero:not(#home-hero) .moreport-icon-button-on-image { bottom: 0.5rem; }
.moreport-hero:not(#home-hero) .moreport-h1.hero { font-size: 1.875rem; }
}
/* ---- 2026-10-13 — clinic location map ----
Replaces the empty "Map — Clinic Location" placeholder on /book-online and
/contact with the Google embed. Derin chose Google over the self-contained
SVG map that was here first: clients recognise it, and an unfamiliar map on a
clinic's contact page costs more than it saves.
This is the site's ONE external resource — see scripts/checks/RELAXED.md §9.
It is a lazy iframe, so Google is not contacted, and no cookie is set, until
the visitor actually scrolls down to the map.
Revert by restoring the placeholder markup and deleting this block. */
.drom-map { margin: 0; position: relative; }
.drom-map-caption {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 1rem;
row-gap: .25rem;
padding: .875rem var(--_sizes---2rem, 2rem);
border-top: 1px solid var(--_drom-tokens---border);
background-color: var(--_drom-tokens---background);
font-family: var(--_drom-tokens---font-sans);
font-size: var(--_type-scale---0-875rem, .875rem);
color: var(--_drom-tokens---text);
}
.drom-map-where { letter-spacing: .02em; }
@media screen and (max-width: 767px) {
.drom-map-caption { padding-left: 1.25rem; padding-right: 1.25rem; }
}
/* ---- 2026-10-13 — keep the top menu on screen down to 1024px ----
Derin could not find the capitals or the line because his window was under
1160px, where the menu is swapped for the burger. That threshold was set to
stop the labels colliding with the logo, and capitals are wider than the
mixed case they replaced, so it ended up high enough to hide the menu on an
ordinary laptop window.
Measured, the row needs 1010px and has 1119px at 1159px wide — it fits
comfortably through this whole band and only runs out at about 1060px. The
one thing in the way below that is the 228px logotype, so it steps down to
184px here: 966px needed against 984px available at 1024px.
Below 1024px the row genuinely cannot hold the menu (over by 58px at 992px
even after this), so the burger stays the entry point there — which is the
standard tablet breakpoint and what the dropdown is built for.
The grid stays as the burger block leaves it: auto 1fr auto gives each nav
group the width it asks for, where 1fr auto 1fr would split the row evenly
and leave the wider right-hand group 18px short.
Revert by deleting this block. */
@media screen and (min-width: 1024px) and (max-width: 1159px) {
.moreport-header-nav { display: flex; }
.moreport-burger { display: none; }
/* back to the full-height row so the header still measures the 8rem that
--drom-header-chrome promises, and the dropdown meets it with no gap */
.moreport-header-row { height: var(--_drom-tokens---header-height); }
.drom-header-logo { width: 184px; }
}
/* ---- 2026-10-13 — the dropdown unrolls open ----
Derin's brief, again from drmaryamzamani.com. Measured there: the panel
animates its height from 97px to 634px over about 350ms and settles at 400,
with opacity flat at 1 and no transform — an unroll, not a fade.
Ours is a fixed full-width panel pinned below the header, so there is no
height to animate; clip-path gives the same downward reveal with no layout
work, and leaves the panel's own scrolling alone.
Revert by deleting this block. */
@keyframes drom-mega-unroll {
from { clip-path: inset(0 0 100% 0); }
to { clip-path: inset(0 0 0 0); }
}
.moreport-mega.open {
animation: drom-mega-unroll .36s cubic-bezier(.22, .61, .36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.moreport-mega.open { animation: none; }
}
/* ---- 2026-10-13 — the dropdown's columns arrive in sequence ----
Derin's brief: the panel unrolling was not enough on its own, because the
contents were simply already there behind it. Each column now rises and
fades in just after the panel reaches it, left to right, which is what makes
the opening read as the menu arriving rather than a block appearing.
Keyed to .moreport-pane.on rather than to .open, so moving across from About
to Treatments — where the panel is already open and only the pane swaps —
plays it again for the new pane.
The last column lands at about 0.63s, inside the time it takes to move a
mouse down into the list.
Columns sit in .moreport-grid (3-, 4- and 6-column variants) under a
.moreport-mega-band-title, which leads so a band reads before its contents.
Under reduced motion the animation is dropped entirely and everything is
simply visible — opacity returns to its default rather than being held at 0
by a fill that never runs.
Revert by deleting this block. */
@keyframes drom-mega-column {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.moreport-mega.open .moreport-pane.on .moreport-mega-band-title,
.moreport-mega.open .moreport-pane.on .moreport-grid > * {
animation: drom-mega-column .38s cubic-bezier(.22, .61, .36, 1) both;
}
.moreport-mega.open .moreport-pane.on .moreport-mega-band-title { animation-delay: .02s; }
.moreport-mega.open .moreport-pane.on .moreport-grid > :nth-child(1) { animation-delay: .05s; }
.moreport-mega.open .moreport-pane.on .moreport-grid > :nth-child(2) { animation-delay: .09s; }
.moreport-mega.open .moreport-pane.on .moreport-grid > :nth-child(3) { animation-delay: .13s; }
.moreport-mega.open .moreport-pane.on .moreport-grid > :nth-child(4) { animation-delay: .17s; }
.moreport-mega.open .moreport-pane.on .moreport-grid > :nth-child(5) { animation-delay: .21s; }
.moreport-mega.open .moreport-pane.on .moreport-grid > :nth-child(6) { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
.moreport-mega.open .moreport-pane.on .moreport-mega-band-title,
.moreport-mega.open .moreport-pane.on .moreport-grid > * { animation: none; }
}
/* ---- 2026-10-13 — the consultation area: three steps, and a column that
earns its space ----
Derin asked for this area to be better organised. Two things were wrong.
1. The form was nine controls in one undifferentiated run — on a phone,
a single column of fields with nothing to tell a visitor how far along they
are. It is now three named steps (who you are / what you want / anything
else) separated by a hairline, which is also how a screen reader now
announces each field: "Your appointment, Preferred day".
2. The left column ran out of content after the WhatsApp button and left
roughly 900px of empty beige beside the form. It now carries the things
someone hesitating over a form actually wants — the number, the email, and
the opening hours, which the preferred-day and preferred-time fields right
beside them ask about. Built from .moreport-contact-row, the same rows the
contact page uses, so the two pages read as one site.
The intro paragraph rule above had to become a direct-child selector: it
carries a 1.5rem bottom margin meant for one paragraph, and the hours rows
are paragraphs too.
Revert by deleting this block and the groups on book-online.html. */
.drom-booking-aside { margin-top: 2.5rem; }
.drom-form-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.drom-form-group + .drom-form-group { margin-top: 1rem; }
/* The rule belongs under the title, not on the fieldset: a legend sits ON its
fieldset's top border, so a border there comes out as a line running off the
side of the words — and the first group, having no border, would not match. */
/* The legend sits outside the fieldset's own flow, so the body does the
stacking — a flex fieldset renders its legend inconsistently across
browsers. */
.drom-group-body { display: flex; flex-direction: column; gap: 1.25rem; }
.drom-group-title {
display: block; width: 100%; padding: 0 0 .625rem; margin: 0 0 1.25rem;
border-bottom: 1px solid var(--_drom-tokens---border);
font-family: var(--_drom-tokens---font-serif);
font-size: 1.25rem; line-height: 1.2; color: var(--_drom-tokens---text);
}
/* .moreport-inline-link keeps its underline transparent until hover. That is
fine for a link inside a sentence; a phone number and an email address have
to look reachable without being hovered first — and a phone cannot hover. */
.drom-booking-aside .moreport-inline-link { border-bottom-color: var(--_drom-tokens---border); }
@media screen and (max-width: 767px) { .drom-group-title { font-size: 1.125rem; } }
/* ---- 2026-10-15 — real clinic photos in the placeholder slots --------------
A .moreport-placeholder.fill box was never a positioning anchor (the export
only ever put text in it); an absolutely-positioned photo inside escaped and
covered the neighbouring text column. Anchor and clip it like the other
photo placeholders. */
.moreport-placeholder.fill,
.moreport-placeholder._60vh-fixed { position: relative; overflow: hidden; }
/* ---- 2026-10-15 — the "Begin with a consultation" ending ----
The closing block is a two-column stretch grid: photo on the left, contact
details on the right. The photo had no height of its own, so the row grew to
whatever the photo's aspect ratio dictated. On the landing pages that is a
landscape shot and the row comes out 336px, close to the 296px the text
needs. On every treatment page the shot is portrait (1792x2368) and the row
ballooned to 830px against the same 296px of text — half a screen of empty
white beside the buttons, which is what reads as unfinished.
Capping the photo lets it crop instead of tower, so the two columns stay
close in height on every page and the block ends where it looks like it
should. Scoped to this closing grid; the site's other 2-column stretch grids
are untouched.
Revert by deleting this block. */
.moreport-section._4-5rem > .moreport-grid._2-col._3-5rem.stretch > .moreport-placeholder.fill {
height: 100%;
max-height: 24rem;
object-fit: cover;
}
/* The buttons sat hard against the last contact row's rule. */
.moreport-section._4-5rem > .moreport-grid._2-col._3-5rem.stretch
> .moreport-vertical-flex > .moreport-container-flex {
margin-top: .5rem;
}
/* ---- 2026-10-19 — pre-launch QA round (animations) -------------------------
1) Reduce-motion now stops EVERYTHING: the per-page inline block only froze
the hero fade, so the trust strip, the clinic gallery and the bobbing
hero arrow kept moving for motion-sensitive visitors.
2) FAQ accordions glide instead of snapping: the exported max-height
0 -> 160rem transition completed visibly in ~35ms (content is ~82px) and
lagged ~270ms on close. Grid rows animate the real height. The answer
always has a single rich-text wrapper child, which the 0fr row clamps. */
@media (prefers-reduced-motion: reduce) {
.moreport-marquee-track,
#clinic-spaces-track { animation: none !important; }
.moreport-hero .moreport-icon-button-on-image,
.moreport-hero .moreport-icon-button.pinned-bottom-center { animation: none !important; }
}
div.moreport-faq-answer {
max-height: none;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .35s ease;
}
div.moreport-faq-answer.open { max-height: none; grid-template-rows: 1fr; }
div.moreport-faq-answer > * { overflow: hidden; min-height: 0; transition: padding .35s ease; }
/* the rich-text wrapper carries 32px bottom padding; zero it while closed or
the collapsed answer keeps a 32px empty band */
div.moreport-faq-answer:not(.open) > * { padding-top: 0; padding-bottom: 0; }
/* Phones: the Meet-Us portrait rendered in a short banner with a centred crop,
cutting Dr. Ozlem's face at the nose (all positioning rules above are ≥768).
Anchor the portrait near the top; the lounge photo keeps its centred crop. */
@media screen and (max-width: 767px) {
.moreport-split-card > .moreport-placeholder.right-half > img[src*="ozlem"] {
object-position: center 15%;
}
}
/* ---- 2026-10-21 — the clinic map is Google's own, shown straight away -------
On Derin's order (2026-10-21) the map on /contact, /book-online and
/the-clinic is Google's embed, in the markup and lazy-loaded, so visitors see
and use the real map at once. It replaced a click-to-load preview. See
scripts/checks/RELAXED.md §9 and the privacy policy's cookies section. */
.drom-map-stage { position: relative; overflow: hidden; background: #eef1f3; }
.drom-map > .drom-map-stage { height: 60vh; min-height: 22rem; max-height: 34rem; }
.drom-map-live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* /the-clinic: the map fills its placeholder cell, matching the address panel
(this outranks the 24rem cap the design team put on these cells). */
.moreport-placeholder.fill > .drom-map-stage { position: absolute; inset: 0; }
.moreport-section._4-5rem > .moreport-grid._2-col._3-5rem.stretch > .moreport-placeholder.fill:has(> .drom-map-stage) {
height: auto; max-height: none; align-self: stretch; min-height: 24rem;
}
@media screen and (max-width: 767px) {
.drom-map > .drom-map-stage { height: 24rem; min-height: 0; }
.moreport-section._4-5rem > .moreport-grid._2-col._3-5rem.stretch > .moreport-placeholder.fill:has(> .drom-map-stage) { min-height: 22rem; }
}
/* ---- 2026-10-20 — home hero frame -------------------------------------------
1) Between 768 and 1023px the header uses the compact (burger) row, 4rem tall,
but --drom-header-chrome still promised the desktop 8rem, so the page was
padded 8px too far and a white strip showed between the menu bar and the
hero photo (iPad portrait).
2) The home hero now sizes itself from that same variable, and on browsers
that know it, from the *small* viewport height: on iPhone Safari 100vh
includes the area under the toolbar, which hid the bottom of the hero
and its scroll-down arrow. */
@media screen and (max-width: 1023px) {
:root { --drom-header-chrome: 7.5rem; }
}
#home-hero { height: calc(100vh - var(--drom-header-chrome)); }
@supports (height: 100svh) {
#home-hero { height: calc(100svh - var(--drom-header-chrome)); }
}
/* ---- 2026-10-20 — journal articles: links in the clinic's colour -----------
The export's only full article had no links, so rich-text links were never
styled and showed in the browser's default blue. */
.moreport-article-body .w-richtext a {
color: var(--_drom-tokens---accent);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.moreport-article-body .w-richtext a:hover { text-decoration-thickness: 2px; }
/* ---- 2026-10-20 — clinic photos on /the-clinic ----------------------------
The hero, the About photo, the six "The Space" cards and the closing
"Begin with a consultation" photo are Derin's own (assets/photos/clinic-*),
nine different spaces with none repeated on the page.
Hero: 50vh tall, so its box runs from about 1:1 on phones to 3.6:1 on wide
desktops. It is a : a 1.91:1 band of the reception (neon sign,
stairs, desk) from 768px up, and a square crop on phones. Wide screens show
the top of the band, so the wall lights and the whole sign stay in frame;
iPad portrait trims the sides, so it is held right on the sign.
The stair wall behind the caption is pale: the eyebrow (white at 85%) sat at
4.0-4.5:1 even with the stock scrim deepened, so from 768px up the scrim is
deepened further. The eyebrow is drawn in solid white at every width (at
85% it dipped under 4.5:1 on 320px phones). Measured at 7 widths from 320
to 1920px: eyebrow and heading >4.5:1 in at least 90% of their pixels.
About (lounge) and the closing photo (consultation desk) sit in frames
capped at 384px tall, 0.84:1 to 2.26:1; at laptop widths the lounge is held
low so the TV and the artwork are not sliced by the top edge.
Gallery photos are pre-cut to 4:5 and use the cards' own centred cover crop. */
.moreport-hero img.drom-photo-hero { object-position: 50% 12%; }
@media screen and (min-width: 768px) and (max-width: 991px) {
.moreport-hero img.drom-photo-hero { object-position: 72% 30%; }
}
@media screen and (max-width: 767px) {
.moreport-hero img.drom-photo-hero { object-position: 50% 50%; }
}
@media screen and (min-width: 768px) {
.moreport-hero:has(img.drom-photo-hero) > .moreport-scrim.hero {
background-image: linear-gradient(#322d2300 22%, #322d2373 56%, #322d2380 100%);
}
}
.moreport-hero:has(img.drom-photo-hero) .moreport-eyebrow.on-image { color: #fff; }
.moreport-placeholder > img.drom-photo-about { object-position: 50% 64%; }
@media screen and (min-width: 1200px) and (max-width: 1599px) {
.moreport-placeholder > img.drom-photo-about { object-position: 50% 75%; }
}
.moreport-placeholder > img.drom-photo-consult-desk { object-position: 50% 60%; }
/* ---- 2026-10-21 — live review badges ----------------------------------------
assets/js/drom-reviews.js fills a badge from /api/reviews once the profile
has reviews: the rating leads, large; the count sits beneath it, small. */
.drom-review-badge.is-live { padding: .5rem 1.125rem .5rem .875rem; border-radius: 1.5rem; }
.drom-review-live { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; line-height: 1.1; }
.drom-review-top { display: inline-flex; align-items: center; gap: .25rem; }
.drom-review-score { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; color: var(--_drom-tokens---text); }
.drom-review-star { font-size: .9375rem; color: #fbbc04; }
.drom-review-badge[data-review="trustpilot"] .drom-review-star { color: #00b67a; }
.drom-review-count { font-size: .75rem; letter-spacing: .01em; color: var(--_drom-tokens---text-muted); }
/* ---- 2026-10-21 — legal pages (privacy policy) -------------------------------
The policy reuses the profile-page shell; give its rich text the article
rhythm and the clinic's link colour (the body is on the same element). */
.drom-legal { margin-top: 2.5rem; max-width: 42.5rem; }
.drom-legal h3 { margin: 2.25rem 0 .75rem; }
.drom-legal p, .drom-legal li { line-height: 1.7; }
.moreport-article-body.w-richtext a { color: var(--_drom-tokens---accent); text-decoration: underline; text-underline-offset: 2px; }
.drom-footer-legal { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.drom-footer-legal:hover { text-decoration-thickness: 2px; }
.moreport-article-body ul + p { margin-top: 1.25rem; }
/* ---- 2026-10-20 — privacy notice on the contact and booking forms ----------
Replaces the consent checkboxes (health details rely on the health-care
condition, not consent). Its policy link matches the muted text around it. */
.drom-privacy-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.drom-privacy-note a:hover { text-decoration-thickness: 2px; }
/* The form wrappers carry drom-form instead of Webflow's w-form (which would
hand the forms to the Webflow runtime): keep w-form's spacing. Submit
controls ship disabled until the page script runs, and look it. */
.drom-form { margin: 0 0 15px; }
form [type=submit]:disabled { opacity: .55; cursor: not-allowed; }
/* 2026-10-20: treatment hero focal points. The desktop hero band is much wider
than the 16:9 photo, so the top and bottom are cropped; these photos keep the
treated area (chin / under-chin, hairline) inside the band. */
.moreport-placeholder.absolute[src$="/chin-hero.jpg"],
.moreport-placeholder.absolute[src$="/lipolytic-mesotherapy-hero.jpg"]{object-position:50% 85%}
.moreport-placeholder.absolute[src$="/microneedling-for-hair-loss-hero.jpg"]{object-position:50% 15%}
.moreport-placeholder.absolute[src$="/hair-restoration-therapy-hero.jpg"]{object-position:50% 0%}
.moreport-placeholder.absolute[src$="/hair-mesotherapy-hero.jpg"]{object-position:50% 45%}
.moreport-placeholder.absolute[src$="/scar-injections-hero.jpg"]{object-position:50% 15%}
/* ---- 2026-10-20 — dropdowns, site-wide -------------------------------------
The native select arrow sat against the right edge and the browser added its
own inner indent, so selects never lined up with the text fields beside them.
One chevron drawn in CSS (no image), the same 1rem text inset as inputs, a
muted colour while the placeholder option is chosen, and visible focus. */
select.moreport-form-input {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-color: var(--_drom-tokens---background);
background-image:
linear-gradient(45deg, transparent 50%, var(--_drom-tokens---text-muted) 50%),
linear-gradient(135deg, var(--_drom-tokens---text-muted) 50%, transparent 50%);
background-position: calc(100% - 1.375rem) 52%, calc(100% - 1rem) 52%;
background-size: .375rem .375rem, .375rem .375rem;
background-repeat: no-repeat;
padding-left: 1rem; padding-right: 2.75rem;
min-height: 2.75rem; line-height: 1.4;
text-overflow: ellipsis; cursor: pointer;
}
select.moreport-form-input::-ms-expand { display: none; }
select.moreport-form-input:hover { border-color: var(--_drom-tokens---border-strong); }
select.moreport-form-input:focus-visible { border-color: var(--_drom-tokens---accent); box-shadow: 0 0 0 3px #4a709533; }
select.moreport-form-input:has(option[value=""]:checked) { color: var(--_drom-tokens---text-muted); }
select.moreport-form-input option { color: var(--_drom-tokens---text); }
/* ---- 2026-10-20 — booking aside: contact cards + live opening hours -------
Each way to reach the clinic is one tappable card (icon, label, value,
arrow). The hours list highlights today and, with drom-hours.js, shows an
"Open now / Closed" status in London time; without JS the hours still read
in full. */
.drom-aside-block + .drom-aside-block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--_drom-tokens---border); }
.drom-reach { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.drom-reach-card {
display: flex; align-items: center; gap: .875rem; min-height: 3.5rem;
padding: .75rem 1rem; border: 1px solid var(--_drom-tokens---border);
border-radius: var(--_drom-tokens---radius-large); background: var(--_drom-tokens---background);
color: var(--_drom-tokens---text); text-decoration: none;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.drom-reach-card:hover { border-color: var(--_drom-tokens---border-strong); box-shadow: 0 6px 18px var(--_drom-tokens---shadow-ambient); transform: translateY(-1px); }
.drom-reach-card:focus-visible { outline: 2px solid var(--_drom-tokens---accent); outline-offset: 2px; }
.drom-reach-icon {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 2.5rem; height: 2.5rem; border-radius: var(--_drom-tokens---radius-pill);
background: var(--_drom-tokens---surface); color: var(--_drom-tokens---accent);
}
.drom-reach-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.drom-reach-label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--_drom-tokens---text-muted); }
.drom-reach-value { font-size: 1rem; color: var(--_drom-tokens---text); overflow-wrap: anywhere; }
.drom-reach-arrow { margin-left: auto; flex: none; display: inline-flex; color: var(--_drom-tokens---text-muted); transition: transform .2s, color .2s; }
.drom-reach-card:hover .drom-reach-arrow { transform: translateX(3px); color: var(--_drom-tokens---accent); }
.drom-hours-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .625rem; }
.drom-hours-head .moreport-eyebrow { margin: 0; }
.drom-hours-icon { display: inline-flex; color: var(--_drom-tokens---accent); }
.drom-hours-status {
margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
padding: .25rem .625rem; border-radius: var(--_drom-tokens---radius-pill);
background: var(--_drom-tokens---surface); color: var(--_drom-tokens---text-muted); font-size: .8125rem;
}
.drom-hours-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.drom-hours-status.is-open { background: #e8f1e1; color: var(--_drom-tokens---success); }
.drom-hours { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.drom-hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: .625rem .75rem; border-radius: var(--_drom-tokens---radius); color: var(--_drom-tokens---text); }
.drom-hours-time { color: var(--_drom-tokens---text-muted); font-variant-numeric: tabular-nums; }
.drom-hours-row.is-today { background: var(--_drom-tokens---surface); font-weight: 600; }
.drom-hours-row.is-today .drom-hours-time { color: var(--_drom-tokens---text); }
@media (prefers-reduced-motion: reduce) { .drom-reach-card, .drom-reach-arrow { transition: none; } .drom-reach-card:hover { transform: none; } }
/* The status pill is display:inline-flex, which would beat the [hidden] it
ships with — keep it out of sight until drom-hours.js fills it. Contact page:
centred under its centred caption. */
.drom-hours-status[hidden] { display: none; }
.drom-hours-status--centered { display: flex; width: fit-content; margin: .75rem auto 0; }
.moreport-contact-row .drom-reach { margin-top: 1rem; }
/* ---- 2026-10-20 — footer on the header blue, centred ----------------------
Same light blue as the header so the page is framed top and bottom. One
centred axis: logo and line, a rule, three equal link columns, a rule, the
company line. Text is #3d3d3a (5.4:1 on #a8b8c8), links #2b2b28 (7.0:1),
so everything clears WCAG AA. CSS only; the footer markup is unchanged. */
.moreport-footer { background-color: var(--_drom-tokens---header-bg); color: #3d3d3a; padding-top: 4.5rem; padding-bottom: 2.25rem; }
.moreport-footer .moreport-grid.footer {
grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 52rem; margin: 0 auto;
justify-items: center; text-align: center; column-gap: 2rem; row-gap: 2.75rem;
}
.moreport-footer .moreport-grid.footer > :first-child {
grid-column: 1 / -1; width: 100%; max-width: 34rem; align-items: center;
padding-bottom: 2.75rem; border-bottom: 1px solid #3d3d3a33;
}
.moreport-footer .moreport-vertical-flex { align-items: center; }
.moreport-footer-logo { color: #2b2b28; font-size: 1.5rem; letter-spacing: .32em; margin: 0 0 .5rem; padding-left: .32em; }
.moreport-footer .moreport-paragraph-muted { color: #3d3d3a; max-width: 26rem; margin-left: auto; margin-right: auto; }
.moreport-footer .moreport-eyebrow { color: #3d3d3a; margin-bottom: .375rem; }
.moreport-footer .moreport-stacked-link { color: #2b2b28; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 50% 100%; background-repeat: no-repeat; transition: background-size .25s; }
.moreport-footer .moreport-stacked-link:hover, .moreport-footer .moreport-stacked-link:focus-visible { background-size: 100% 1px; }
.moreport-footer .moreport-footer-bottom {
max-width: 52rem; margin: 3rem auto 0; padding-top: 1.75rem; border-top-color: #3d3d3a33;
color: #3d3d3a; flex-direction: column; justify-content: center; text-align: center; gap: .625rem;
}
.moreport-footer .drom-footer-company { max-width: 40rem; line-height: 1.6; }
.moreport-footer .drom-footer-legal { color: #2b2b28; }
@media screen and (max-width: 479px) {
.moreport-footer { padding-top: 3.5rem; }
.moreport-footer .moreport-grid.footer { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; }
.moreport-footer .moreport-grid.footer > :first-child { padding-bottom: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) { .moreport-footer .moreport-stacked-link { transition: none; } }
/* Footer refinements: both rules the same width, tagline centred, and the
logo set like the header logotype (sans, bold DROM, light CLINIC). */
.moreport-footer .moreport-grid.footer > :first-child { max-width: none; }
.moreport-footer .moreport-grid.footer > :first-child .moreport-paragraph-muted { text-align: center; }
.moreport-footer-logo { font-family: var(--_drom-tokens---font-sans); font-weight: 600; font-size: 1.625rem; letter-spacing: .3em; padding-left: .3em; }
.moreport-footer-logo .moreport-logo-bold { font-weight: 300; }
/* Footer, wider screens: back to the four-column row (logo + three link
columns) so the band does not waste height; left-aligned, company line left
and privacy link right. Phones keep the centred stack above. */
@media screen and (min-width: 768px) {
.moreport-footer { padding-top: 3.5rem; padding-bottom: 2rem; }
.moreport-footer .moreport-grid.footer {
grid-template-columns: 1.5fr 1fr 1fr 1fr; max-width: none; justify-items: start; text-align: left; column-gap: 3rem;
}
.moreport-footer .moreport-grid.footer > :first-child { grid-column: auto; padding-bottom: 0; border-bottom: 0; align-items: flex-start; }
.moreport-footer .moreport-grid.footer > :first-child .moreport-paragraph-muted { text-align: left; margin-left: 0; max-width: 22rem; }
.moreport-footer .moreport-vertical-flex { align-items: flex-start; }
.moreport-footer-logo { padding-left: 0; }
.moreport-footer .moreport-stacked-link { background-position: 0 100%; }
.moreport-footer .moreport-footer-bottom { max-width: none; margin-top: 2.75rem; flex-direction: row; justify-content: space-between; text-align: left; }
}
/* Footer logo: the same SVG logotype as the header, at the header's size. */
.moreport-footer-logo { line-height: 0; letter-spacing: 0; padding-left: 0; margin-bottom: .75rem; }
.drom-footer-logo { display: block; width: 228px; max-width: 100%; height: auto; }
@media screen and (max-width: 767px) { .drom-footer-logo { margin: 0 auto; width: 200px; } }
/* ---- 2026-10-20 — treatment & condition heroes: full width, 16:9 ----------
The hero photos are 16:9. The band is the full viewport width and exactly
16:9 tall (56.25vw) at every width, so the photo is never cropped. */
.moreport-hero.drom-hero-fit:not(#home-hero) { height: 56.25vw; min-height: 0; max-height: none; }
/* From tablet up the photo starts at the very top of the page, under the
fixed header, instead of below it: pull the hero up by the header height.
Not on phones: there the 16:9 band is ~220px and the 120px header would
cover half of it, title included. */
@media screen and (min-width: 768px) {
.moreport-hero.drom-hero-fit:not(#home-hero) { margin-top: calc(-1 * var(--drom-header-chrome)); }
}
/* Desktop (992px up): the hero is the full screen height. It is already
pulled up under the fixed header, so 100vh fills the whole screen and the
photo covers it. Tablet and phone keep the 16:9 band above. */
@media screen and (min-width: 992px) {
.moreport-hero.drom-hero-fit:not(#home-hero) { height: 100vh; }
@supports (height: 100svh) { .moreport-hero.drom-hero-fit:not(#home-hero) { height: 100svh; } }
}
/* ---- 2026-10-20 — second (vertical) images: at most 600px tall ------------
The 3:4 'What is…' photo grew with the text beside it (height:100%,
min-height:60vh). Capped at 600px; the 60vh floor is capped too, since a
min-height would otherwise win over the max. */
.moreport-placeholder._60vh { max-height: 600px; min-height: min(60vh, 600px); }
/* The 3:4 vertical photos keep their shape: 450px wide at the 600px cap,
narrower (still 3:4) when the column is narrower. Landscape photos in the
same slot keep only the 600px cap above. */
.moreport-placeholder._60vh.drom-portrait { width: min(100%, 450px); height: auto; aspect-ratio: 3 / 4; min-height: 0; max-height: none; justify-self: start; }
/* 3:4 vertical photos: 500px tall (375px wide). On desktop the photo and the
text sit as one centred group with exactly 100px between them; on tablet
and phone the photo stays 3:4 and centred in its column. */
.moreport-placeholder._60vh.drom-portrait { width: min(100%, 375px); justify-self: center; }
@media screen and (min-width: 992px) {
.moreport-grid:has(> .drom-portrait) { grid-template-columns: 375px minmax(0, 400px); column-gap: 100px; justify-content: center; }
}
/* ---- 2026-10-20 — "What is…" section fills the screen below the header ----
The section holding the 3:4 photo and its text is exactly the visible screen
below the fixed header (100svh - header), with no top/bottom padding, and
its content centred vertically. min-height, so on a phone (photo stacked
over text, taller than the screen) it grows instead of clipping. */
.moreport-section:has(> .moreport-grid > .drom-portrait) {
padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0;
min-height: calc(100vh - var(--drom-header-chrome));
display: flex; flex-direction: column; justify-content: center;
}
@supports (height: 100svh) {
.moreport-section:has(> .moreport-grid > .drom-portrait) { min-height: calc(100svh - var(--drom-header-chrome)); }
}
.moreport-section:has(> .moreport-grid > .drom-portrait) > .moreport-grid { width: 100%; }
/* ---- 2026-10-20 — header test: nav row 64px, trust strip 50px (Moreport) ----
Same heights at every width. --drom-header-chrome is measured live by
drom-header.js; the fallback below matches the new total for no-JS.
Revert by deleting this block. */
:root { --_drom-tokens---header-height: 64px; --drom-header-chrome: 114px; }
.moreport-header-row { height: 64px; }
.moreport-trust-bar { height: 50px; }
@media screen and (max-width: 767px) {
:root { --drom-header-chrome: 114px; }
}
/* ---- 2026-10-20 — Process steps use the Benefits card (Moreport) ----
The steps are now .moreport-card-large articles like the Benefits grid. The
Process band is .center, which would centre the card text; hold it left so
the two card sets read the same. Revert by deleting this block. */
.drom-process-cards .moreport-card-large,
.moreport-band-surface.center .drom-process-cards .moreport-card-large * { text-align: left; margin-left: 0; margin-right: 0; }
/* ---- 2026-10-20 — "What We Use" band in dark blue, white text (Moreport) ----
#3d5a77 is the site's dark blue; white on it is ~7:1 (WCAG AA/AAA).
Hooked to .drom-band-dark on the treatment pages. Revert by deleting this
block and the class. */
.drom-band-dark { background-color: #3d5a77; color: #fff; }
.drom-band-dark :is(.moreport-eyebrow, .moreport-h2, .moreport-paragraph-muted, p, h2) { color: #fff !important; }
/* ---- 2026-10-20 — Benefits and Process cards: icons instead of numbers ----
Same treatment as the home-page Signature Protocols steps: Lucide outline
icon, 32px, stroke 1, site blue #4a7095. Icons are inline SVG, aria-hidden.
Revert by deleting this block and the SVGs. */
.drom-card-icon { display: block; flex: none; width: 2rem; height: 2rem; color: #4a7095; }
/* ---- 2026-10-20 — inner-page cards like the home page: flat (Moreport) ----
No border, no shadow (hover included). Cards on white take the light beige
surface #f3f2ea, like the home-page split cards; cards sitting on a beige
band stay white so they still read as cards. The home page keeps its own
styling. Revert by deleting this block. */
body:not(:has(#home-hero)) :is(.moreport-card-large, .moreport-card, .moreport-journal-card, .drom-reach-card, .moreport-team-card),
body:not(:has(#home-hero)) :is(.moreport-card-large, .moreport-card, .moreport-journal-card, .drom-reach-card, .moreport-team-card):is(:hover, :focus-visible) {
border: 0 !important;
box-shadow: none !important;
background-color: #f3f2ea;
}
body:not(:has(#home-hero)) .moreport-band-surface:not(.drom-band-dark) :is(.moreport-card-large, .moreport-card, .moreport-journal-card, .drom-reach-card, .moreport-team-card) {
background-color: #fff;
}
/* 2026-10-20 — body text line-height 1.3, letter-spacing .01rem (Moreport):
cards, section intros, the What We Use band and the "What is…" text. */
.moreport-card-large .moreport-paragraph-muted,
.moreport-section-head .moreport-paragraph-muted,
.drom-band-dark .moreport-paragraph-muted,
.moreport-grid:has(> .drom-portrait) .moreport-article-body p { line-height: 1.3; letter-spacing: .01rem; }
/* The "What is…" rich text was Georgia in near-black; it now matches the card
and section-intro text: sans, 14px, muted #67655b. */
.moreport-grid:has(> .drom-portrait) .moreport-article-body p {
font-family: var(--_drom-tokens---font-sans); font-size: .875rem; color: #67655b;
}
/* 2026-10-20 — card title → text gap .5rem (Moreport); icon → title stays .75rem. */
.moreport-card-large > .moreport-vertical-flex._0-75rem { row-gap: .5rem; }
.moreport-card-large .drom-card-icon { margin-bottom: .25rem; }
/* ---- 2026-10-20 — one body-text style site-wide (Moreport) ----
Every body paragraph / list of body size takes the style set on the cards:
sans, line-height 1.3, letter-spacing .01rem, muted #67655b. Sizes stay as
they are. Left out on purpose: text on images, the dark What We Use band
(stays white), the header, dropdown and footer, and the long-form privacy
policy. Revert by deleting this block. */
:is(.moreport-paragraph-muted, .moreport-paragraph, .moreport-description, .drom-step-text,
.drom-condition-note, .moreport-article-body:not(.drom-legal) :is(p, li)):not(.on-image):not(:is(.moreport-footer, .moreport-header, .moreport-mega, .moreport-hero, .drom-band-dark, .drom-legal) *) {
font-family: var(--_drom-tokens---font-sans);
line-height: 1.3;
letter-spacing: .01rem;
color: #67655b;
}
/* The 16px intro variants (.moreport-description, .moreport-paragraph-muted.large)
step down to the same 14px as the rest of the body text. */
:is(.moreport-description, .moreport-paragraph-muted.large):not(.on-image):not(:is(.moreport-footer, .moreport-header, .moreport-mega, .moreport-hero, .drom-band-dark, .drom-legal) *) {
font-size: .875rem;
}
/* ---- 2026-10-20 — Related slider in the home-page Treatments/Conditions style ----
The markup now matches the home strips (3:4 image cards with category eyebrow,
blue round arrows over the cards, drom-carousel-nav.js + drom-marquee.js), so
the section:has(> .drom-carousel-nav) rules above apply as they are. The
heading centres like the home strips; the intro follows it.
Revert by restoring the old Related markup and deleting this block. */
.drom-related .moreport-section-head + .moreport-paragraph-muted { text-align: center; }
/* ---- 2026-10-20 — every card strip runs to the page edge on the left (Moreport) ----
The strip viewport now spans the full page width (left 0, right 0). The
track keeps the page gutter as its leading padding, so at rest the first
card still lines up with the text above; once it scrolls, cards pass under
the left page edge as they do on the right. --drom-g is the page gutter
(64 / 32 / 20). Covers the home and Related strips (.drom-carousel-nav) and
the /treatments category strips; /conditions and /the-clinic already did this. */
:root { --drom-g: 64px; }
@media screen and (max-width: 991px) { :root { --drom-g: 32px; } }
@media screen and (max-width: 767px) { :root { --drom-g: 20px; } }
section:has(> .drom-carousel-nav) > .moreport-marquee-viewport {
margin-left: 0; margin-right: 0; width: auto; max-width: none;
}
/* /treatments: each category section sits inset by the gutter (margin), so
its strip steps back out by the same amount on both sides. */
.moreport-pane > .moreport-section > :is(.moreport-marquee-viewport, .drom-strip) {
margin-left: calc(-1 * var(--drom-g)); margin-right: calc(-1 * var(--drom-g));
width: calc(100% + 2 * var(--drom-g)); max-width: none;
}
section:has(> .drom-carousel-nav) > .moreport-marquee-viewport > .moreport-marquee-track,
.moreport-pane > .moreport-section > .moreport-marquee-viewport > .moreport-marquee-track,
.moreport-pane > .moreport-section > .drom-strip > .moreport-marquee-viewport > .moreport-marquee-track {
padding-left: var(--drom-g);
}
.moreport-pane > .moreport-section > .moreport-marquee-viewport > .moreport-marquee-track,
.moreport-pane > .moreport-section > .drom-strip > .moreport-marquee-viewport > .moreport-marquee-track { padding-right: var(--drom-g); }
/* N.5 cards between the text line and the right edge, as before. */
section:has(> .drom-carousel-nav) > .moreport-marquee-viewport .moreport-carousel-card {
--drom-w: calc((100cqw - var(--drom-g) - var(--drom-n) * var(--drom-gap)) / (var(--drom-n) + .5));
}
/* ---- 2026-10-20 — Reviews section (Moreport) ----
Light beige band; the two links are the home-page review badges (white
pill, Google / Trustpilot logo, same wording); the dead ← → under the
section are gone. Revert by deleting this block and the markup change. */
.drom-reviews { background-color: #f3f2ea; margin-left: 0; margin-right: 0; max-width: none; }
/* ---- 2026-10-20 — Journal cards (Moreport) ----
The category moves onto the image as a pill in the top-left corner (white
pill, small caps, as the article-page category pill); "Read article →"
always sits at the bottom-left of the card, whatever the text length.
CSS only. Revert by deleting this block. */
.moreport-journal-card { position: relative; display: flex; flex-direction: column; }
.moreport-journal-card > img { flex: none; }
.moreport-journal-card > .moreport-card-body { flex: 1 1 auto; }
.moreport-journal-card:has(> img:not(.w-dyn-bind-empty)) > .moreport-card-body > .moreport-eyebrow:first-child {
position: absolute; top: 16px; left: 16px; z-index: 1; margin: 0;
background: #fff; color: #67655b; border-radius: 999px;
padding: .4375rem .75rem; line-height: 1; letter-spacing: .14em;
}
.moreport-journal-card > .moreport-card-body > :last-child { margin-top: auto; }
/* ---- 2026-10-20 — footer layout (Moreport) ----
Tagline removed from the markup. Wider screens: the three link columns sit
left, each as wide as its longest label, 100px apart; the logo goes to the
right edge. The company line runs on one line with the privacy link
opposite it. Phones keep the centred stack. Revert by deleting this block. */
@media screen and (min-width: 768px) {
.moreport-footer .moreport-grid.footer > :first-child { order: 9; align-items: flex-end; }
.moreport-footer .moreport-footer-logo { margin-bottom: 0; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.moreport-footer .moreport-grid.footer { grid-template-columns: auto auto auto 1fr; column-gap: 3rem; }
.moreport-footer .moreport-grid.footer > :first-child { justify-self: end; }
}
@media screen and (min-width: 992px) {
.moreport-footer .moreport-grid.footer { display: flex; align-items: flex-start; column-gap: 100px; }
.moreport-footer .moreport-grid.footer > * { flex: none; }
.moreport-footer .moreport-grid.footer > :first-child { margin-left: auto; width: auto; }
.moreport-footer .moreport-footer-bottom { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 2rem; }
.moreport-footer .drom-footer-company { max-width: none; flex: 1 1 auto; }
.moreport-footer .moreport-footer-bottom > :last-child { flex: none; }
}
/* One line needs ~880px of text; below 1200px it wraps rather than overflow. */
@media screen and (min-width: 1200px) {
.moreport-footer .drom-footer-company { white-space: nowrap; }
}
/* ---- 2026-10-20 — one button size site-wide: the WhatsApp button (Moreport) ----
Every button takes the WhatsApp button's size: 40px tall, 20px side padding,
12px text, .04em tracking, contents centred on both axes (inline-flex, line
height 1, so icon and label sit on the same optical middle). Shapes and
colours stay as they are. In the header, WhatsApp and Book Online also share
one width. Revert by deleting this block. */
:is(.moreport-button, .moreport-button-solid, .moreport-button-solid.pill, .moreport-button-pill, .moreport-whatsapp-button, .drom-review-badge) {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
box-sizing: border-box; height: 2.5rem; min-height: 2.5rem;
padding: 0 1.25rem; font-size: .75rem; line-height: 1; letter-spacing: .04em;
white-space: nowrap;
}
.drom-review-badge > p.moreport-paragraph { font-size: .75rem; line-height: 1; letter-spacing: .04em; }
.moreport-whatsapp-button .w-embed, .drom-review-badge .drom-review-mark { display: inline-flex; line-height: 0; }
.moreport-header :is(.moreport-whatsapp-button, .moreport-button-pill) { min-width: 8.25rem; }
/* 2026-10-20 — blue Lucide icon above "Next step" (Moreport), like the card icons. */
.drom-next-icon { margin: 0 auto 1rem; }
/* ---- 2026-10-20 — FAQ page (Moreport) ----
The "Frequently asked" intro block is removed from the markup. The topic
chips centre on the page. The accordion toggle is drawn in CSS instead of
the "+" glyph, whose side bearings left it off-centre in its circle: a blue
ring with a blue plus; open = solid blue with a white cross (the existing
45deg turn). The two "Still have questions?" buttons share one width. */
nav.moreport-section .moreport-container-flex:has(> .moreport-filter-chip) { justify-content: center !important; }
/* The toggle lines up with the question line, not the eyebrow + question block. */
.moreport-faq-question > .moreport-icon-button { align-self: flex-end; }
.moreport-faq-question .moreport-icon-button {
position: relative; flex: none; border: 1px solid #4a7095; color: #4a7095; background: transparent;
}
.moreport-faq-question .moreport-icon-button > .moreport-icon { font-size: 0; }
.moreport-faq-question .moreport-icon-button::before,
.moreport-faq-question .moreport-icon-button::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px;
margin: -.75px 0 0 -6px; background: currentColor; border-radius: 1px;
}
.moreport-faq-question .moreport-icon-button::after { transform: rotate(90deg); }
.moreport-faq-question .moreport-icon-button.open { background: #4a7095; border-color: #4a7095; color: #fff; }
.moreport-band-surface .moreport-container-flex:has(> a[href="/contact"].moreport-button-solid + a[href="/book-online"].moreport-button-pill) > a { min-width: 11rem; }
/* 2026-10-20 — Contact / Book Online heroes use the clinic's own photos (portrait
originals); the crop keeps the treatment chair / the lounge seating in frame. */
.moreport-hero > img.drom-hero-shelves { object-position: 50% 52%; }
.moreport-hero > img.drom-hero-lounge { object-position: 50% 68%; }
/* ---- 2026-10-20 — The Clinic page (Moreport) ----
About: image removed, the text block centred. Philosophy / Standards: blue
Lucide icons replace the roman numerals and dots. Standards sits on a light
beige band with white cards. The Space uses the home-strip slider
(3:4 cards, blue arrows, drom-marquee auto-scroll). Journal block removed. */
.drom-about-centered { margin-left: auto; margin-right: auto; text-align: center; }
.drom-about-centered > .moreport-vertical-flex { align-items: center; }
.drom-about-centered .moreport-container-flex { justify-content: center; }
.drom-numeral-icon { margin-bottom: 1.25rem; }
.drom-band-beige { background-color: #f3f2ea; margin-left: 0; margin-right: 0; max-width: none; }
body:not(:has(#home-hero)) .drom-band-beige :is(.moreport-card-large, .moreport-card) { background-color: #fff; }
.drom-about-centered p.moreport-paragraph-muted { text-align: center; }
.drom-band-beige { padding-left: var(--drom-g); padding-right: var(--drom-g); }
/* A badge showing a live rating stacks score and count; it keeps its own height. */
.drom-review-badge.is-live { height: auto; white-space: normal; }
/* 2026-10-20 — header with Team added and Journal moved right (Moreport).
The right group got one link longer; between 1024 and 1279 the two header
buttons drop their shared minimum width and the gaps tighten so the row
still fits with the logo centred. */
@media screen and (min-width: 1024px) {
.moreport-header-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.moreport-header-nav.right { justify-self: end; }
}
@media screen and (min-width: 1024px) and (max-width: 1439px) {
.moreport-header :is(.moreport-whatsapp-button, .moreport-button-pill) { min-width: 0; padding: 0 .875rem; }
.moreport-header-nav { column-gap: .875rem; }
.moreport-header-nav.right { column-gap: .75rem; }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
.drom-header-logo { width: 150px; }
.moreport-header-row { column-gap: 1rem; }
}
/* Under 1080px the two groups no longer fit either side of a centred logo;
the logo takes the free space between them instead. */
@media screen and (min-width: 1024px) and (max-width: 1079px) {
.moreport-header-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.moreport-header-logo { justify-self: center; }
}
/* ---- 2026-10-20 — arrows on the /treatments and /conditions strips (Moreport) ----
Same buttons and behaviour as the home strips (drom-carousel-nav.js, one
card per click; drom-marquee.js pauses the auto-scroll on hover/click).
.drom-strip wraps the strip and its arrows; the arrows sit over the cards,
vertically centred, on the text line at each side. */
.drom-strip { position: relative; }
.drom-strip > .moreport-marquee-viewport { margin-left: 0; margin-right: 0; width: 100%; max-width: none; }
.drom-strip > .drom-carousel-nav {
position: absolute; left: calc(var(--drom-g) + 1rem); right: calc(var(--drom-g) + 1rem);
top: 50%; transform: translateY(-50%); padding-inline: 0; margin: 0;
}
/* 2026-10-20 — What We Use band: the DROM seamless pattern (assets/brand/
drom-pattern.svg, light blue #a6bdd8) tiled at 50px wide over the dark blue, at 20% opacity. */
.drom-band-dark { position: relative; isolation: isolate; }
.drom-band-dark::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: url("/assets/brand/drom-pattern.svg");
background-size: 50px auto; background-repeat: repeat; background-position: center top;
opacity: .2;
}
/* 2026-10-20 — white question-mark icon above "What We Use" (Moreport). */
.drom-band-dark .drom-wu-icon { color: #fff; margin: 0 auto 1rem; }
/* ---- 2026-10-20 — footer like the What We Use band (Moreport) ----
Dark blue #3d5a77 with the DROM pattern (50px, 20%), all text white
(white on #3d5a77 is ~7:1). Revert by deleting this block. */
.moreport-footer { position: relative; isolation: isolate; background-color: #3d5a77; color: #fff; }
.moreport-footer::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: url("/assets/brand/drom-pattern.svg");
background-size: 50px auto; background-repeat: repeat; background-position: center top;
opacity: .2;
}
.moreport-footer :is(.moreport-eyebrow, .moreport-stacked-link, .drom-footer-company, .drom-footer-legal, .moreport-paragraph-muted, p, a) { color: #fff; }
.moreport-footer .moreport-footer-bottom { border-top-color: rgba(255, 255, 255, .25); color: #fff; }
/* 2026-10-20 — the condition pages' Webflow CSS lacks the hero scroll button,
so it rendered as a bare blue arrow in the middle of the photo. Same ring
as on the treatment pages (copied from their export). */
.moreport-icon-button-on-image {
z-index: 2; position: absolute; bottom: 2.25rem; left: 50%; transform: translate(-50%);
width: 3rem; height: 3rem; flex-shrink: 0; border: 1px solid #ffffff80; border-radius: 50%;
background-color: transparent; color: #fff; font-size: 1.125rem; line-height: 1; cursor: pointer;
transition: background-color .2s;
}
.moreport-icon-button-on-image:hover { background-color: #ffffff26; }
/* 2026-10-20 — slider arrows on desktop only (Moreport). Tablet and phone
swipe the strip (the viewport scrolls natively; drom-marquee.js pauses the
auto-scroll while a finger is on it). */
@media screen and (max-width: 991px) {
.drom-carousel-nav { display: none !important; }
}
/* ---- 2026-10-20 — header v2 (Moreport): logo left, one menu
(About · Treatments · Conditions · Team · Journal · FAQ · Contact) centred
in the space between the logo and the WhatsApp / Book Online buttons. */
@media screen and (min-width: 1024px) {
.moreport-header-row.drom-header-v2 { grid-template-columns: auto minmax(0, 1fr) auto; }
.drom-header-v2 > .moreport-header-logo { justify-self: start; }
.drom-header-v2 > .moreport-header-nav:not(.right) { justify-self: center; }
.drom-header-v2 > .moreport-header-nav.right { justify-self: end; }
}
/* With one centred menu there is room for the logo again: 184px up to 1199,
the full 228px from 1200. */
@media screen and (min-width: 1024px) and (max-width: 1199px) { .drom-header-v2 .drom-header-logo { width: 184px; } }
@media screen and (min-width: 1200px) { .drom-header-v2 .drom-header-logo { width: 228px; } }
/* Phones: the burger sat beside the logo (start of the stretchy middle
column); pin it to the right edge as on tablets. */
@media screen and (max-width: 767px) {
.moreport-header-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.moreport-burger { grid-column: 3; justify-self: end; }
}
/* ---- 2026-10-20 — burger menu = the desktop menu (Moreport) ----
The burger opens the first mega pane, which held the old About columns.
It now lists exactly the desktop items, in the same order, with the
WhatsApp and Book Online buttons under them. */
.drom-mobile-menu { list-style: none; margin: 0; padding: 0; }
.drom-mobile-menu li { margin: 0; border-bottom: 1px solid var(--_drom-tokens---border); }
.drom-mobile-link {
display: flex; align-items: center; min-height: 3.5rem;
font-family: var(--_drom-tokens---font-serif); font-size: 1.375rem; line-height: 1.2;
color: var(--_drom-tokens---text); text-decoration: none;
}
.drom-mobile-link[aria-current="page"], .drom-mobile-link:hover { color: #4a7095; }
.drom-mobile-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.drom-mobile-ctas > a { flex: 1 1 8rem; }
.drom-mobile-ctas .moreport-button-pill { background-color: #4a7095; color: #fff; }
.drom-mobile-ctas .moreport-button-pill:hover { background-color: #3d5a77; color: #fff; }
/* The Clinic: About and The Space on the light beige band too (Moreport). */
.drom-bg-beige { background-color: #f3f2ea; }
/* Technology cards (no photo): keep the category as a pill, but in the flow
at the top of the card instead of floating over the title. */
.moreport-journal-card:not(:has(> img:not(.w-dyn-bind-empty))) > .moreport-card-body > .moreport-eyebrow:first-child {
position: static; align-self: flex-start; margin: 0;
background: #fff; color: #67655b; border-radius: 999px;
padding: .4375rem .75rem; line-height: 1; letter-spacing: .14em;
}
/* pill → title gap tripled: the card body's 12px gap + 24px. */
.moreport-journal-card:not(:has(> img:not(.w-dyn-bind-empty))) > .moreport-card-body > .moreport-eyebrow:first-child { margin-bottom: 1.5rem; }
/* ---- 2026-10-21 — one vertical rhythm (Moreport) ----
Every content section: 100px between its edge and its content, top and
bottom. Left out: the heroes, the menu/chip bars (nav), and the inner pages'
second section, which fills the screen below the header on its own terms
(treatments + signature protocols: photo + text; conditions: the treatment
options block, .drom-fit-screen). */
section:is(.moreport-section, .moreport-band-surface, .moreport-split-row):not(.moreport-hero):not(:has(> .moreport-hero)):not(.drom-fit-screen):not(.drom-flush):not(:has(> .moreport-grid > .drom-portrait)) {
padding-top: 100px !important; padding-bottom: 100px !important;
}
/* Conditions' second section: same screen-filling logic as the treatment one. */
.moreport-section.drom-fit-screen {
padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0;
min-height: calc(100vh - var(--drom-header-chrome));
display: flex; flex-direction: column; justify-content: center;
}
@supports (height: 100svh) {
.moreport-section.drom-fit-screen { min-height: calc(100svh - var(--drom-header-chrome)); }
}
.moreport-section.drom-fit-screen > .moreport-container { width: 100%; }
/* 2026-10-21 — Signature protocol pages: "Our Approach" points as icon cards
(the condition-page card), white on the beige band. */
.moreport-band-surface .drom-approach .drom-condition-cards > .drom-step { background: #fff; box-shadow: none; border: 0; }
.drom-approach { margin-top: 1rem; }
.drom-approach .drom-condition-cards { margin: 0; }
/* ---- 2026-10-21 — no card outlines anywhere, home page included (Moreport) ----
Every card is flat: no border, no shadow. On white it takes the light beige
#f3f2ea; on a beige band it is white. */
:is(.moreport-card-large, .moreport-card, .moreport-journal-card, .drom-reach-card, .moreport-team-card, .drom-step, .moreport-split-card),
:is(.moreport-card-large, .moreport-card, .moreport-journal-card, .drom-reach-card, .moreport-team-card, .drom-step, .moreport-split-card):is(:hover, :focus-visible) {
border: 0 !important; box-shadow: none !important;
}
:is(.moreport-card-large, .moreport-card, .moreport-journal-card, .drom-reach-card, .moreport-team-card) { background-color: #f3f2ea; }
:is(.moreport-band-surface, .drom-band-beige, .drom-bg-beige, .drom-reviews):not(.drom-band-dark) :is(.moreport-card-large, .moreport-card, .moreport-journal-card, .drom-reach-card, .moreport-team-card) { background-color: #fff; }
/* Our Approach cards: the signature pages' Webflow CSS lacks the treatment-page
card styles, so they are set here with the treatment values (32px padding,
12px radius, Georgia 20/26 title, 8px icon-title rhythm as on Process). */
.drom-approach .moreport-card-large { padding: 32px; border-radius: 12px; display: block; }
.drom-approach .moreport-card-large > .moreport-vertical-flex { display: flex; flex-direction: column; row-gap: .5rem; }
.drom-approach .moreport-h3.smaller {
font-family: var(--_drom-tokens---font-serif); font-size: 1.25rem; font-weight: 400;
line-height: 1.3; letter-spacing: -.1px; color: #62625e; margin: 0;
}
/* heading → cards: the section-head gap used on Process (48px from the heading). */
.moreport-container.drom-approach { padding-top: 24px; }
/* ---- 2026-10-21 — the 100px is the whole gap, at the bottom too (Moreport) ----
Inner wrappers carried their own bottom margin/padding (section-head 48px,
article body 32px, grids, the strip's scroll bar), which stacked on top of
the section's 100px. The last in-flow child at each level loses it, and a
strip's scroll bar that the auto-scroll hides no longer takes up room. */
section:is(.moreport-section, .moreport-band-surface, .moreport-split-row) > :last-child,
section:is(.moreport-section, .moreport-band-surface, .moreport-split-row) > :last-child > :last-child,
section:is(.moreport-section, .moreport-band-surface, .moreport-split-row) > :last-child > :last-child > :last-child,
section:is(.moreport-section, .moreport-band-surface, .moreport-split-row) > :last-child > :last-child > :last-child > :last-child {
margin-bottom: 0 !important;
}
section:is(.moreport-section, .moreport-band-surface, .moreport-split-row) :is(.moreport-container, .moreport-grid, .moreport-article-body, .moreport-section-head, .moreport-cms-passthrough, .w-dyn-list, .w-dyn-items):last-child {
padding-bottom: 0 !important;
}
.moreport-marquee-scrub[style*="hidden"] { display: none; }
/* ---- 2026-10-21 — signature protocol pages (Moreport) ----
Second section: the text column is 600px wide (treatments keep 400px).
Our Approach card labels set as treatment body text, not as titles. */
@media screen and (min-width: 992px) {
.drom-sig-intro .moreport-grid:has(> .drom-portrait) { grid-template-columns: 375px minmax(0, 600px); }
}
.drom-approach .moreport-h3.smaller {
font-family: var(--_drom-tokens---font-sans); font-size: .875rem; font-weight: 400;
line-height: 1.3; letter-spacing: .01rem; color: #67655b;
}
/* The 3:4 photo keeps its 375×500 even when the text beside it is taller
(signature pages): it no longer stretches with the row, it centres on it. */
.moreport-grid:has(> .drom-portrait) > .drom-portrait { align-self: center; }
/* 2026-10-21 — Get in Touch band: the header blue #a8b8c8 at 25% on white
(= #e9edf1, solid so the cards and text on it stay as they are). */
section.drom-git { background-color: #e9edf1; margin-left: 0; margin-right: 0; max-width: none; padding-left: var(--drom-g); padding-right: var(--drom-g); }
section.drom-git :is(.moreport-card-large, .moreport-card, .drom-reach-card) { background-color: #fff; }
/* Reviews band: same light blue as Get in Touch (header blue at 25%). */
section.drom-reviews { background-color: #e9edf1; }
/* Treatment Process band: the same light blue (header blue at 25%); cards white. */
section.drom-bg-blue { background-color: #e9edf1; }
section.drom-bg-blue .moreport-card-large { background-color: #fff; }
/* ---- 2026-10-21 — condition pages follow the treatment layout (Moreport) ----
2nd section: 3:4 photo + "What is…" text (the treatment screen-fit block,
via .drom-portrait). 3rd section: the treatment options as Process-style
icon cards (.drom-approach), heading centred like Benefits. */
.drom-cond-options .moreport-section-head.center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; margin-bottom: 0; }
.drom-cond-options .moreport-container.drom-approach { padding-top: 32px; }
.drom-cond-options .moreport-section-head .moreport-eyebrow { margin: 0; }
.drom-cond-options .moreport-section-head .moreport-h2 { margin: 0; }
/* Home: Clinic Results on the light blue band with its panel white;
Signature Protocols with no top/bottom padding (Moreport, 2026-10-21). */
section.drom-results { margin-left: 0; margin-right: 0; max-width: none; padding-left: var(--drom-g); padding-right: var(--drom-g); }
section.drom-results .moreport-info-panel { background-color: #fff; }
section.drom-flush.drom-flush { padding-top: 0 !important; padding-bottom: 0 !important; }
/* "What causes …?" subheading inside the condition text (Moreport). */
.drom-cond-intro .moreport-article-body h3:not(.moreport-h2) {
font-family: var(--_drom-tokens---font-serif); font-weight: 400; font-size: 1.25rem; line-height: 1.3;
color: var(--_drom-tokens---text); margin: 1.5rem 0 .5rem;
}
/* "What causes …?" at the same size as "What is …?" (Moreport). */
.drom-cond-intro .moreport-article-body h3.moreport-h2 { margin: 2rem 0 1.5rem; }
/* Condition pages: 600px text column, as on the signature protocol pages. */
@media screen and (min-width: 992px) {
.drom-cond-intro .moreport-grid:has(> .drom-portrait) { grid-template-columns: 375px minmax(0, 600px); }
}
/* Condition Treatment Options: light beige band, white cards; a single card
sits in the middle column of the 3-column grid. */
section.drom-cond-options { background-color: #f3f2ea; margin-left: 0; margin-right: 0; max-width: none; }
section.drom-cond-options .moreport-card-large { background-color: #fff; }
@media screen and (min-width: 992px) {
.drom-cond-options .drom-process-cards > .moreport-card-large:only-child { grid-column: 2; }
}
section.drom-cond-options.drom-cond-options .drom-process-cards > .moreport-card-large { background-color: #fff !important; }
/* ---- 2026-10-21 — condition pages: Recommended strip (Moreport) ----
White band. After the recommended treatments a blue "Other treatments"
card, then every other treatment in the same strip. */
section.drom-recommended { background-color: #fff; }
.drom-other-card {
background-color: #4a7095; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
cursor: default;
}
.drom-other-label { font-family: var(--_drom-tokens---font-serif); font-size: 1.25rem; line-height: 1.2; color: #fff; }
/* The condition pages' Webflow CSS has no .moreport-paragraph-header; the
strip card titles take the treatment-page values. */
.drom-related .moreport-paragraph-header.on-image { font-family: var(--_drom-tokens---font-serif); font-size: 1.125rem; font-weight: 400; line-height: 1.2; color: #fff; margin: 0; }
/* 2026-10-21 — icon → title is 12px in every icon card on the site (the
treatment-card value); DROM Standard and The Clinic cards differed. */
svg.drom-numeral-icon { display: block; margin: 0 0 12px !important; }
svg.drom-numeral-icon + :is(h3, .moreport-paragraph-header) { margin-top: 0 !important; }
/* The Clinic: About, The Space and Standards on the light blue band. */
section.drom-tc-blue { background-color: #e9edf1; }
/* The Clinic About: 800px text block (centred on the page), text left-aligned. */
.moreport-container.drom-about-centered { max-width: 800px !important; width: 100%; text-align: left; }
.drom-about-centered > .moreport-vertical-flex { align-items: flex-start; }
.drom-about-centered :is(p.moreport-paragraph-muted, .moreport-eyebrow, h2) { text-align: left; }
.drom-about-centered .moreport-container-flex { justify-content: flex-start; }
/* ---- 2026-10-21 — Journal page: category tabs (Moreport) ----
The Editor's Pick block is gone (its photo is the hero now). The tab bar
sits 100px below the hero and 100px above the article grid; the grid's
own top padding is dropped so the gap is not doubled.
The divider line above the chips goes too: the hero now sits right above.
:is(#drom-journal-list, …) lifts the grid rule above the site-wide 100px
section rule (an :is() takes its most specific argument). */
nav.drom-journal-tabs { padding-top: 100px !important; padding-bottom: 100px !important; margin: 0 !important; }
nav.drom-journal-tabs > .moreport-vertical-flex { row-gap: 0; }
nav.drom-journal-tabs .moreport-divider { display: none; }
nav.drom-journal-tabs .drom-chips-center { margin: 0 !important; }
nav.drom-journal-tabs + section:is(#drom-journal-list, .moreport-section) { padding-top: 0 !important; }
/* 2026-10-21 — Home "About DROM Clinic / Meet Us" split row: no top/bottom
padding (drom-flush), text panels on the light blue band colour. */
section.drom-about-split .moreport-split-card { background-color: #e9edf1; }
/* ---- 2026-10-21 — accessible blue on the light blue bands -----------------
The site blue (#4a7095) on the light blue band colour (#e9edf1) is 4.41:1,
just under WCAG AA's 4.5:1 for normal-size text, so buttons, links and accent
words on those bands failed the accessibility suite. Inside the bands the
accent token is 4% darker (#476c8f, 4.69:1); white text on it gains too. */
section.drom-git, section.drom-reviews, section.drom-bg-blue, section.drom-tc-blue,
section.drom-about-split .moreport-split-card { --_drom-tokens---accent: #476c8f; }
/* ---- 2026-10-21 — /treatments/anti-wrinkle-injections: one page, one card
per area. The menu links to each card (#forehead, #frown-lines, …). The page
already pads anchor jumps by the header's height; this adds a little air. */
.drom-area-card { scroll-margin-top: 1.5rem; }
/* ---- 2026-10-21 — the line under each Google map ---------------------------
"Map provided by Google. Viewing it sends your IP address to Google." */
.drom-map-caption .drom-map-note { flex-basis: 100%; font-size: .75rem; line-height: 1.5; }
.drom-map-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
p.drom-map-note { margin: 1rem 0 0; font-size: .75rem; line-height: 1.5; }
/* ---- 2026-10-21 — the clinic hero is a video ------------------------------
Derin's clinic walk-through (assets/video/drom-clinic-interior.mp4: 480x848,
23 s, silent, captions and watermark removed, looped) replaces the reception
photo in the /the-clinic hero. The video is portrait and he wants the whole
frame seen, never a zoomed slice, so it is never cropped: the front copy is
object-fit: contain, and a second copy behind it, scaled past the edges and
blurred, fills the rest of the band in the video's own colours. The backdrop
has no src in the markup; the page script gives it one only from 768px up,
where the band is wider than the frame, so phones (and Safari, which fetches
each