/* ========================================================================== Denxa — the authored layer. css/style.css is the inherited component sheet (generated by _build/restyle.py). Its media queries are the vendor's original desktop-first `max-width` set. THIS file is written mobile-first: every base rule describes a 320px handset and every media query in it is `min-width`, so a wider viewport only ever adds capability. It also owns the pieces that did not exist in the original template — the language switcher, the hero badge strip, the fee rows — and the RTL corrections that CSS logical properties cannot express on their own. 1 typography + rhythm 2 header, navigation 3 language switcher 4 hero 5 sections + cards 6 forms 7 gallery + journal 8 footer 9 RTL corrections 10 motion + accessibility ========================================================================== */ /* ========================================================================== 1 typography + rhythm ========================================================================== */ /* Long English headlines break awkwardly on a 320px screen; balancing the last line costs nothing where it is unsupported. */ h1, h2, h3 { text-wrap: balance; } /* German compounds ("Halbjahreskontrolle") and long treatment names have no natural break, so at 320px they set a floor no column can meet. Every text element gets a break opportunity; German additionally gets real hyphenation, which is safe because is switched with the copy. */ h1, h2, h3, h4, h5, h6, p, li, a, span, div, td, th, label, figcaption { overflow-wrap: break-word; } :root[lang="de"] p, :root[lang="de"] li, :root[lang="de"] h1, :root[lang="de"] h2, :root[lang="de"] h3, :root[lang="de"] h4, :root[lang="de"] h5 { hyphens: auto; } /* -------------------------------------------------------------------------- No second scrollbar. Two separate faults combined into one: a) Bootstrap widens a gutter by widening the row's *negative side margins* — `gx-5` makes them -24px — but `.container` keeps its fixed 12px of padding. Every wide-gutter row on the site therefore hung 12px past the container on both sides. Clamping the pull to the container's own padding keeps the wide column gap without the bleed; `max()` picks the less negative value, so a default row stays at -12px and a `g-0` row stays at 0. b) The inherited sheet sets `overflow-x: hidden` on BOTH and . 's overflow is propagated to the viewport, which is what draws the page scrollbar — but 's makes the body its own scroll container, so the 12px above gave it a second scrollbar of its own. `clip` does the same clipping without ever creating a scroll container, so the fault cannot come back. `hidden` stays first as the fallback for old engines. -------------------------------------------------------------------------- */ html, body { overflow-x: hidden; overflow-x: clip; } .row { margin-inline: max(-12px, calc(-.5 * var(--bs-gutter-x, 1.5rem))); } /* The inherited sheet strips `.container-fluid` of the padding its rows pull against; without it a full-width row bleeds by the same 12px. */ .container-fluid { padding-inline: 12px; } /* The vendor sheet redefines Bootstrap's `.d-flex` as `display:flex; white-space:nowrap` — intended for its marquee, applied to every flex row on the site. Any card that pairs an icon with a sentence then renders that sentence on one unwrapped line and clips it. Denxa uses `.d-flex` for prose in a dozen places, and the marquee is not used at all, so wrapping goes back to normal. */ .d-flex { white-space: normal; } .lead { font-size: 1.0625rem; line-height: 1.75; } /* Sections: the vendor pads 90px top and bottom at every width. On a phone that is a third of the viewport spent on nothing. */ section { padding: 56px 0; } section.pt-0 { padding-top: 0; } section.pb-0 { padding-bottom: 0; } .spacer-single { height: 24px; } .spacer-double { height: 48px; } #subheader { padding: 130px 0 60px; } /* The banner photograph is a bright clinic interior; .35 of the ink colour leaves the lead paragraph barely legible, so it gets a gradient that is heaviest where the text sits. */ #subheader .de-overlay { background: linear-gradient(180deg, rgba(5, 42, 34, .74) 0%, rgba(5, 42, 34, .62) 60%, rgba(5, 42, 34, .70) 100%); } #subheader .lead { color: rgba(255, 255, 255, .82); } /* The theme pins the breadcrumb to the bottom edge of the banner, centred. On a phone the banner is only as tall as its heading, so the pill lands on top of the lead sentence. Below the tablet breakpoint it goes back into normal flow underneath the copy. */ #subheader .crumb-wrapper { position: static; transform: none; inset: auto; margin-block-start: 18px; padding: 0; background: transparent; text-align: start; } @media (min-width: 768px) { #subheader .crumb-wrapper { position: absolute; inset-block-end: 0; inset-inline-start: 50%; transform: translateX(-50%); padding: 0 20px 5px; background: rgba(255, 255, 255, .1); text-align: center; } [dir="rtl"] #subheader .crumb-wrapper { transform: translateX(50%); } } /* Treatment names paired with a thumbnail on the overview page: two lines is the row height the grid was drawn for. */ .tile-row p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .p-40 { padding: 24px !important; } .p-30 { padding: 20px !important; } .fs-50 { font-size: 40px; } .fs-100 { font-size: 72px; } .text-nowrap { white-space: nowrap; } .w-100px { width: 100px; } .soft-shadow { box-shadow: 0 10px 40px rgba(6, 36, 29, .07); } /* The vendor's outline button is drawn with a translucent WHITE border, so it vanishes on any light section. Outside a `.text-light` block it takes the ink colour instead. */ a.btn-main.btn-line { border-color: rgba(6, 36, 29, .28); color: var(--heading-font-color); } a.btn-main.btn-line:hover { border-color: var(--bg-dark-1); color: #fff; } .text-light a.btn-main.btn-line, header:not(.header-light) a.btn-main.btn-line { border-color: rgba(255, 255, 255, .5); color: #fff; } /* The closing booking band sets white type over a photograph; .35 is not enough separation for body copy. */ .cta-band { padding: 56px 0; } .cta-band .de-overlay { background: linear-gradient(90deg, rgba(5, 42, 34, .90) 0%, rgba(5, 42, 34, .74) 55%, rgba(5, 42, 34, .58) 100%); } .cta-band .btn-main + .btn-main { margin-top: 10px; } @media (min-width: 576px) { .cta-band .btn-main + .btn-main { margin-top: 0; } } @media (min-width: 992px) { .cta-band { padding: 76px 0; } } .gradient-dark-bottom { background: linear-gradient(to top, rgba(5, 42, 34, .85) 0%, rgba(5, 42, 34, 0) 100%); } /* The subtitle/eyebrow reads as a label, so it gets a rule rather than a colour change — it survives being set in Arabic, where small-caps and letter-spacing do not. */ .subtitle { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-color); } .subtitle.s2::before { content: ""; display: inline-block; inline-size: 22px; block-size: 2px; margin-inline-end: 10px; vertical-align: middle; background: var(--primary-color); } @media (min-width: 768px) { section { padding: 72px 0; } .spacer-single { height: 30px; } .spacer-double { height: 60px; } .p-40 { padding: 32px !important; } .p-30 { padding: 26px !important; } #subheader { padding: 150px 0 80px; } .fs-50 { font-size: 50px; } .fs-100 { font-size: 100px; } } @media (min-width: 992px) { section { padding: 90px 0; } .p-40 { padding: 40px !important; } .p-30 { padding: 30px !important; } #subheader { padding: 170px 0 110px; } } /* ========================================================================== 2 header, navigation ========================================================================== */ /* Below 992px js/denxa.js adds .header-mobile and the inherited sheet turns #mainmenu into a fixed drawer. These rules make that drawer usable: full-bleed, scrollable, and closed by default. */ header.header-mobile { background: var(--bg-dark-1); padding: 12px 0; } header.header-mobile .de-flex { align-items: center; } header div#logo img { max-width: 132px; height: auto; } header .menu_side_area { display: flex; align-items: center; gap: 10px; } /* On a phone the header carries the logo, the language chip and the burger. The booking button lives in the drawer and in the sticky bar instead — at 132px wide it would push the burger off the edge. */ header .menu_side_area > .btn-main { display: none; } #menu-btn { margin-inline-start: 4px; } header.header-mobile #mainmenu { inset-inline-start: 0; width: 100%; padding-inline: 20px !important; background: var(--bg-dark-1); max-height: calc(100vh - 110px); overscroll-behavior: contain; } header.header-mobile #mainmenu li ul li { padding-inline-start: 20px; } /* The active page is marked, not just hovered. */ #mainmenu li a.menu-item.active { color: var(--primary-color); } @media (min-width: 992px) { header div#logo img { max-width: var(--logo-width); } header .menu_side_area > .btn-main { display: inline-block; } header .menu_side_area { gap: 14px; } } /* ========================================================================== 3 language switcher ========================================================================== */ .lang-switcher { position: relative; z-index: 1002; } .lang-current { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: solid 1px rgba(255, 255, 255, .28); border-radius: 40px; background: transparent; color: inherit; font-family: var(--body-font); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color .2s ease, background .2s ease; } .lang-current:hover, .lang-switcher.is-open .lang-current { border-color: var(--primary-color); background: rgba(var(--primary-color-rgb), .14); } .lang-current i { font-size: 13px; color: var(--primary-color); } /* Header variants: on a white header the chip needs a dark outline. */ header.header-light .lang-current, header.smaller .lang-current { border-color: rgba(6, 36, 29, .18); color: var(--heading-font-color); } .lang-menu { position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0; min-width: 168px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 16px 44px rgba(6, 36, 29, .16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .lang-switcher.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-option { display: block; width: 100%; padding: 9px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--heading-font-color); font-family: var(--body-font); font-size: 14px; font-weight: 600; text-align: start; cursor: pointer; } .lang-option:hover { background: rgba(var(--primary-color-rgb), .10); } .lang-option.is-active { background: var(--primary-color); color: #fff; } /* ========================================================================== 4 hero ========================================================================== */ /* Swiper writes a pixel width onto its slides at init. When the viewport is measured with a scrollbar and painted without one, that width falls a few pixels short and the slide's own dark background shows down the edge. The hero only ever shows one slide at a time (fade), so pinning the track to the container removes the seam at every width. */ #section-intro .swiper, #section-intro .swiper-wrapper { width: 100%; } #section-intro .swiper-slide { width: 100% !important; inset-inline-start: 0 !important; } /* The vendor centres the hero copy absolutely over an 800px slide. Below the desktop breakpoint the copy is taller than the slide, so it would be clipped by the header — the copy goes back into normal flow and the slider drops behind it as a filled layer. */ #section-intro > .relative { position: relative; } #section-intro .mh-800 { position: absolute; inset: 0; min-height: 0; } #section-intro .mh-800 .swiper, #section-intro .swiper-wrapper, #section-intro .swiper-slide { height: 100%; } /* `relative`, not `static`: the copy carries `z-2`, and z-index is ignored on an unpositioned box — the absolutely placed slider would paint over it. */ #section-intro .abs-centered { position: relative; inset-block-start: auto; inset-inline-start: auto; transform: none; padding-block: 116px 56px; } #section-intro h1 { margin-bottom: 16px; } #section-intro .lead { color: rgba(255, 255, 255, .78); } .hero-badges { display: none; } .d-rating i { color: var(--secondary-color); } @media (min-width: 992px) { #section-intro .mh-800 { position: static; min-height: 800px; } #section-intro .abs-centered { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); padding-block: 0; } .hero-badges { display: block; } .hero-badges h6 { color: rgba(255, 255, 255, .82); } } /* ========================================================================== 5 sections + cards ========================================================================== */ /* grid-divider draws vertical rules between columns; on a phone the columns are stacked, so the rule has to become horizontal or disappear. */ @media (max-width: 767.98px) { .grid-divider > [class*="col-"] + [class*="col-"] { border-inline-start: 0; border-block-start: solid 1px var(--border-color); padding-block-start: 20px; } } .team-card img { aspect-ratio: 24 / 29; object-fit: cover; } .team-card .bg-white { box-shadow: 0 8px 26px rgba(6, 36, 29, .14); } .fee-row:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; } .w-120px { width: 84px; } .w-90px { width: 90px; } .w-60px { width: 60px; } /* A flex item's `min-width` defaults to `auto`, so a long German compound like "Kinderzahnheilkunde" sets the text block's floor and pushes the row past its column. Letting it shrink is what allows the word to wrap — but only the prose may shrink: a thumbnail, an icon or a step numeral has to keep its size or it collapses and wraps mid-token. */ .tile-row > div, .d-flex > div { min-width: 0; } .d-flex > img, .d-flex > i, .rule-num { flex: 0 0 auto; min-width: auto; white-space: nowrap; } @media (min-width: 576px) { .w-120px { width: 120px; } } /* A tiled dot texture, parked behind the numbers block. Decorative only: it is hidden from assistive tech, ignores the pointer, and does not exist below the desktop breakpoint — it is deliberately hung past the container edge, which is overflow on a narrow screen and ornament on a wide one. */ .dots-ornament { display: none; } @media (min-width: 992px) { .dots-ornament { display: block; position: absolute; inset-block-start: 40px; inset-inline-end: -30px; width: 190px; opacity: .8; pointer-events: none; z-index: 1; } } /* The counter row: four across is unreadable under 576px, so it is two. The figures are printed grouped ("18,400+"), which must not wrap away from its own plus sign — and at a fixed size it is wide enough to touch its neighbour in a quarter column. A clamp keeps it inside the column at every width instead of only at the ones that were measured. */ .de_count h3 { font-size: clamp(22px, 2.2vw, 32px); white-space: nowrap; } @media (min-width: 768px) { .de_count h3 { font-size: 40px; } } /* Owl's four-column review carousel: one card per phone screen. */ .owl-theme .owl-dots { margin-top: 24px; } .owl-theme .owl-dot span { background: rgba(var(--primary-color-rgb), .28) !important; } .owl-theme .owl-dot.active span { background: var(--primary-color) !important; } blockquote { margin: 0; padding-inline-start: 34px; } .de_testi_by img { width: 46px; height: 46px; object-fit: cover; } /* ========================================================================== 6 forms ========================================================================== */ .field-set .d-label { font-size: 14px; } .de_form .form-control { padding: 12px 16px; border: solid 1px var(--border-color); border-radius: 12px; background: #fff; font-family: var(--body-font); font-size: 15px; color: var(--heading-font-color); } .de_form .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), .16); outline: none; } .de_form textarea.form-control { min-height: 130px; resize: vertical; } /* The vendor hides checkboxes to skin them; these two forms want the real control, so it is restored and sized for a finger. */ .de_form input[type="checkbox"] { display: inline-block; inline-size: 18px; block-size: 18px; accent-color: var(--primary-color); flex: 0 0 auto; } .de_form input[type="checkbox"] + label::before, .de_form input[type="checkbox"] + span::before { content: none; } button.btn-main { border: 0; cursor: pointer; } /* ========================================================================== 7 gallery + journal ========================================================================== */ .filters { padding: 0; margin: 0 0 8px; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .filters li { display: inline-block; } .filters a { display: inline-block; padding: 7px 16px; border: solid 1px var(--border-color); border-radius: 40px; font-size: 14px; font-weight: 600; color: var(--heading-font-color); transition: all .2s ease; } .filters a:hover, .filters a.selected { border-color: var(--primary-color); background: var(--primary-color); color: #fff; } #gallery-grid .gal-item img { aspect-ratio: 1; object-fit: cover; } /* `hidden` is what js/components.js toggles; Bootstrap's grid sets `display:flex` on columns, which would otherwise win over it. */ #gallery-grid .gal-item[hidden] { display: none; } .post-image .d-tagline { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; } .post-image img { aspect-ratio: 3 / 2; object-fit: cover; } /* topic chips under an article */ .chip { display: inline-block; padding: 4px 12px; margin-inline-end: 6px; border: solid 1px var(--border-color); border-radius: 40px; font-size: 13px; font-weight: 600; color: var(--heading-font-color); } .chip:hover { border-color: var(--primary-color); color: var(--primary-color); } .social-icons.is-inline { display: inline-flex; align-items: center; gap: 4px; } /* journal pagination */ .pager { flex-wrap: wrap; } .pager-num, .pager-step { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 42px; block-size: 42px; padding-inline: 14px; border: solid 1px var(--border-color); border-radius: 40px; font-size: 14px; font-weight: 600; color: var(--heading-font-color); transition: all .2s ease; } .pager-num:hover, .pager-step:hover { border-color: var(--primary-color); color: var(--primary-color); } .pager-num.is-current { border-color: var(--primary-color); background: var(--primary-color); color: #fff; } .pager-step.is-disabled { opacity: .4; pointer-events: none; } /* Bootstrap 5 ships this, but the vendor sheet loads a trimmed build. */ .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== 8 footer ========================================================================== */ footer .logo-footer { max-width: 150px; } footer address { font-style: normal; margin: 0; } footer .widget ul { padding: 0; list-style: none; } .subfooter .de-flex { flex-wrap: wrap; gap: 10px; text-align: center; justify-content: center; } .subfooter .menu-simple { flex-wrap: wrap; justify-content: center; } /* The studio credit. It sat inside the Privacy/Terms list, which made it read as a fourth nav item in the same muted grey — so it got its own cell, and the studio name is set in the brand accent with the diamond separator the portfolio sheets use, so it reads as a signature and as a link. */ .subfooter .credit { display: flex; align-items: center; gap: 8px; font-size: 13px; } .credit-mark { color: var(--primary-color); font-size: 9px; line-height: 1; } .credit-link { color: var(--primary-color) !important; font-weight: 700; letter-spacing: .1em; text-decoration: none; border-bottom: solid 1px rgba(var(--primary-color-rgb), .35); transition: border-color .2s ease, color .2s ease; } .credit-link:hover, .credit-link:focus-visible { color: var(--primary-color-bright) !important; border-bottom-color: var(--primary-color-bright); } /* Latin small-caps tracking would trail off the wrong edge in Arabic. */ [dir="rtl"] .credit-link { letter-spacing: 0; } @media (min-width: 768px) { .subfooter .de-flex { text-align: start; justify-content: space-between; } } /* ========================================================================== 9 RTL corrections css/style.css is written in CSS logical properties, so flipping `` mirrors the layout on its own. What remains here is what logical properties genuinely cannot express: script-specific typography, glyphs that point somewhere, and the two plugins that measure in physical pixels. ========================================================================== */ /* Arabic wants its own family first and none of the Latin tracking: the negative letter-spacing on headings breaks the cursive join. */ [dir="rtl"] { --body-font: "Cairo", "Manrope", Helvetica, Arial, sans-serif; --heading-font: "IBM Plex Sans Arabic", "Sora", Helvetica, Arial, sans-serif; --h1-letter-spacing: 0; --h2-letter-spacing: 0; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .subtitle, [dir="rtl"] .btn-main { letter-spacing: 0; } /* Arabic sits lower in its em box, so uppercase tracking and tight leading both need loosening. */ [dir="rtl"] body { line-height: 2; } [dir="rtl"] .subtitle { text-transform: none; letter-spacing: 0; font-size: 14px; } /* Glyphs that point. The breadcrumb chevron and the "read more" plus arrow are drawn pointing at the next thing, which is now on the other side. */ [dir="rtl"] .crumb span[aria-hidden="true"], [dir="rtl"] .btn-plus i, [dir="rtl"] .fx-slide::after { transform: scaleX(-1); } /* The accordion caret is a FontAwesome chevron positioned by the vendor. */ [dir="rtl"] .accordion-section-title { background-position: right center; } /* Stacked avatars overlap towards the reading direction. */ [dir="rtl"] .ms-min-10 { margin-inline-start: 0; margin-inline-end: -10px; } /* Owl Carousel writes inline `left`/`transform` in physical pixels; telling it the document is RTL is the supported way to flip it. */ [dir="rtl"] .owl-carousel { direction: rtl; } [dir="rtl"] .owl-carousel .owl-stage-outer { direction: ltr; } [dir="rtl"] .owl-carousel .item { direction: rtl; } /* Magnific Popup's arrows and close button are absolutely placed by the plugin's own sheet, which is not logical-property aware. */ [dir="rtl"] .mfp-arrow-left { inset-inline-start: 0; left: auto; right: 0; } [dir="rtl"] .mfp-arrow-right { inset-inline-end: 0; right: auto; left: 0; } [dir="rtl"] .mfp-close { left: 0; right: auto; } [dir="rtl"] .mfp-title, [dir="rtl"] .mfp-content { text-align: right; } /* The language menu hangs off the chip; in RTL that is the other corner, which inset-inline already handles — but the chip itself is the last item in a flex row and must not be pushed off the viewport. */ [dir="rtl"] .lang-menu { text-align: start; } /* The hero rating strip mixes a numeral, stars and a sentence. Keeping the stars in visual order avoids the numeral jumping to the wrong end. */ [dir="rtl"] .d-rating { direction: ltr; } /* Phone numbers and email addresses stay left-to-right inside Arabic text. */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: embed; display: inline-block; } /* The desktop hero copy is centred with `inset-inline-start:50%` and pulled back by translate(-50%). Mirrored, the inset resolves to the right edge, so the pull has to reverse too or the block leaves the viewport. The auto-generated tail in style.css does flip this, but the rule above is more specific, so it needs its own RTL twin. */ @media (min-width: 992px) { [dir="rtl"] #section-intro .abs-centered { transform: translate(50%, -50%); } } /* Flex containers drop whitespace-only text nodes, so the sub-footer's spans would run together without an explicit gap. */ .subfooter .de-flex-col { display: flex; flex-wrap: wrap; gap: 6px; } /* The wordmark is a Latin lockup: it never mirrors. */ [dir="rtl"] #logo img, [dir="rtl"] .logo-footer { transform: none; } /* Swiper is told the direction by js/i18n.js, but its fade layer keeps a physical offset until it is updated; this stops a one-frame slide. */ [dir="rtl"] .swiper-slide { direction: rtl; } /* ========================================================================== 10 motion + accessibility ========================================================================== */ /* The scroll-reveal library sets opacity:0 up front. If animations are switched off, that would leave the page blank. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .wow, .animated { visibility: visible !important; opacity: 1 !important; animation: none !important; transform: none !important; } } /* Every interactive control gets the same visible focus ring; the vendor removes outlines globally. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(var(--primary-color-rgb), .55); outline-offset: 2px; border-radius: 4px; } /* The off-canvas drawer forces `overflow-y: scroll`, so it reserves a scrollbar track whether or not its content overflows. `auto` shows one only when it is needed; the panel's -17px inset still keeps it out of sight. */ #extra-content { overflow-y: auto; } /* Tap targets: 44px is the smallest comfortable one. */ #menu-btn, #btn-close, #btn-extra { min-inline-size: 44px; min-block-size: 44px; } /* Honour the notch on phones held in landscape. */ @supports (padding: max(0px)) { .container { padding-inline-start: max(12px, env(safe-area-inset-left)); padding-inline-end: max(12px, env(safe-area-inset-right)); } } .skip-link { position: absolute; inset-inline-start: -9999px; }