/* * Praxis Javadi — cinematic design layer. * * Dark, editorial surfaces with a single mint accent, derived from the * practice's own palette (deep green #10312A / green #1E7A5F / mint #6FD3AE) * rather than borrowed from any reference site. * * Sections: * 1. Tokens * 2. Motion primitives (paired with assets/js/motion.js) * 3. Surfaces and type * 4. Hero * 5. Cards and rails * 6. Mega menu * 7. Reduced motion */ /* ── 1. Tokens ───────────────────────────────────────────────────────────── */ :root { /* Surfaces, darkest to lightest */ --jv-ink: #061713; /* cinematic base */ --jv-ink-2: #0B2620; /* elevated dark surface */ --jv-ink-3: #10312A; /* card on dark */ --jv-paper: #FCFBF8; /* light section */ --jv-paper-2: #F4F1EA; /* alternating light section */ /* Type on dark */ --jv-on-dark: #F4F1EA; --jv-on-dark-soft: rgba(244, 241, 234, 0.68); --jv-on-dark-mute: rgba(244, 241, 234, 0.44); /* Type on light. Derived from the palette's own ink rather than fixed — none of the palettes redefined these, so every light section kept the original green text no matter which theme was picked. Palettes that state their own values still win, since they come later in the file. */ --jv-on-light: var(--jv-ink); --jv-on-light-soft: color-mix(in srgb, var(--jv-ink) 80%, var(--jv-paper)); --jv-on-light-mute: color-mix(in srgb, var(--jv-ink) 58%, var(--jv-paper)); /* The single accent */ --jv-accent: #6FD3AE; --jv-accent-deep: #1E7A5F; --jv-gold: #C9962B; /* Label colour for anything filled with the accent (buttons, chips). */ --jv-on-accent: #FFFFFF; /* Lines */ --jv-line-dark: rgba(244, 241, 234, 0.14); --jv-line-light: rgba(16, 49, 42, 0.12); /* Rhythm */ --jv-section-y: clamp(72px, 8vw, 140px); --jv-gutter: clamp(16px, 4vw, 24px); --jv-content: 1192px; --jv-radius: 24px; --jv-radius-lg: 32px; /* Motion */ --jv-ease: cubic-bezier(0.22, 1, 0.36, 1); --jv-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --jv-dur: 720ms; --jv-dur-fast: 240ms; /* Type — reference-site scale: Rajdhani everywhere, positive tracking. */ --jv-font-display: "Rajdhani", "Poppins", sans-serif; /* Smoke surfaces (legacy warm-dark bands) + ink as raw RGB for scrims. */ --jv-smoke: #4A443A; --jv-smoke-2: #2A2318; --jv-ink-rgb: 6, 23, 19; --jv-ink2-rgb: 11, 38, 32; } /* ── Elementor global colours ──────────────────────────────────────────────── The kit bakes four fixed hex values onto `.elementor-kit-N`, and every widget that was never given an explicit colour — default buttons, the Posts badge, form controls — reads them. That bypassed the palette entirely, which is why those elements stayed green on every theme. Forward them to our tokens. `body[class*=...]` outranks the kit's own single-class selector. */ body[class*="elementor-kit-"] { --e-global-color-primary: var(--jv-ink-3); --e-global-color-secondary: var(--jv-accent-deep); --e-global-color-text: var(--jv-on-light-soft); --e-global-color-accent: var(--jv-accent); } /* Two-tone heading accents (class-based so themes recolour them live). */ .elementor-heading-title .jv-acc { color: var(--jv-accent); } .elementor-heading-title .jv-acc-d { color: var(--jv-accent-deep); } /* Smooth palette hand-off: the switcher pins this class for ~700ms. */ .jv-theme-anim, .jv-theme-anim * { transition: background-color 600ms ease, color 600ms ease, border-color 600ms ease, fill 600ms ease !important; } /* ── Farbwelten: four two-colour palettes, driven by one attribute. ─────── */ /* The practice colour, captured on where the palette lives. A page that repoints the accent tokens for its own colour world (Kinderzahnarzt) inherits this untouched, so its decisive actions can still carry the brand rather than the page accent. */ html { --jv-signal: var(--jv-accent-deep); } html[data-jv-theme="beige"] { --jv-ink: #26211D; --jv-ink-2: #322B26; --jv-ink-3: #3B332D; --jv-smoke: #4A4038; --jv-smoke-2: #2E2620; --jv-accent: #D9B98C; --jv-accent-deep: #8A6B42; --jv-paper: #F7F2EA; --jv-paper-2: #EFE7DB; --jv-ink-rgb: 38, 33, 29; --jv-ink2-rgb: 50, 43, 38; } html[data-jv-theme="anthrazit"] { --jv-ink: #1B1D1F; --jv-ink-2: #26292C; --jv-ink-3: #2F3336; --jv-smoke: #3C4043; --jv-smoke-2: #26292C; --jv-accent: #D89A6A; --jv-accent-deep: #9A5F33; --jv-paper: #F4F3F0; --jv-paper-2: #EAE8E3; --jv-ink-rgb: 27, 29, 31; --jv-ink2-rgb: 38, 41, 44; } /* PRIMARY — Emre's swatch İDEAL VG 1155: slate smoke + cool grey. Two colours only, exactly as briefed; also the :root default below. */ html[data-jv-theme="fume"] { --jv-ink: #2F3A40; --jv-ink-2: #3B474E; --jv-ink-3: #46535A; --jv-smoke: #4E5C64; --jv-smoke-2: #3B474E; --jv-accent: #C3CBD0; --jv-accent-deep: #6E7C85; --jv-paper: #F4F5F6; --jv-paper-2: #E6E9EB; --jv-on-light-soft: #46535A; --jv-on-light-mute: #6E7C85; --jv-ink-rgb: 47, 58, 64; --jv-ink2-rgb: 59, 71, 78; } html[data-jv-theme="navy"] { --jv-ink: #0C1B2A; --jv-ink-2: #122536; --jv-ink-3: #17304A; --jv-smoke: #1C3550; --jv-smoke-2: #122536; --jv-accent: #D8C39A; --jv-accent-deep: #8F7443; --jv-paper: #F6F3EC; --jv-paper-2: #ECE6D9; --jv-ink-rgb: 12, 27, 42; --jv-ink2-rgb: 18, 37, 54; } /* Demo palette picker, fixed on the right edge. */ .jv-themer { position: fixed; right: 14px; top: 50%; translate: 0 -50%; z-index: 900; display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; border-radius: 999px; background: rgba(20, 20, 20, 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.16); } .jv-themer button { width: 30px; height: 30px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.35); cursor: pointer; padding: 0; transition: transform 160ms var(--jv-ease), border-color 160ms linear; } .jv-themer button:hover { transform: scale(1.15); } .jv-themer button[aria-pressed="true"] { border-color: #fff; transform: scale(1.18); } @media (max-width: 767px) { .jv-themer { right: 8px; padding: 10px 8px; } .jv-themer button { width: 26px; height: 26px; } } /* Rajdhani carries every text role, like the reference. */ .jv-dark, .jv-dark-2, .jv-light, .jv-light-2, .jv-hero, .jv-emotion, .jv-dark .elementor-heading-title, .jv-light .elementor-heading-title, .jv-dark .elementor-widget-text-editor, .jv-light .elementor-widget-text-editor, .jv-dark .elementor-button, .jv-light .elementor-button { font-family: var(--jv-font-display); } /* Two-tone headings: the trailing words carry the accent. */ .elementor-heading-title .jv-acc { color: var(--jv-accent); } .jv-light .elementor-heading-title .jv-acc, .jv-light-2 .elementor-heading-title .jv-acc { color: var(--jv-accent-deep); } /* Round prev/next controls on horizontal rails. */ .jv-rail-nav { display: flex; gap: 10px; } .jv-rail-nav button, .jv-rail-nav button:hover, .jv-rail-nav button:focus, .jv-rail-nav button:active { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--jv-line-dark); background: transparent !important; color: var(--jv-on-dark); font-size: 17px; cursor: pointer; box-shadow: none !important; transition: border-color 180ms linear, color 180ms linear; } .jv-light .jv-rail-nav button, .jv-light-2 .jv-rail-nav button { border-color: var(--jv-line-light); color: var(--jv-on-light); } .jv-rail-nav button:hover { border-color: var(--jv-accent); color: var(--jv-accent); } /* Reference-style card label: white pill, bottom-left on the photo. */ .jv-pill .elementor-heading-title { display: inline-block; background: var(--jv-paper); color: var(--jv-on-light); padding: 9px 18px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; } /* Icon feature card (dark grid). */ .jv-icon-card { background: rgba(244, 241, 234, 0.045); border: 1px solid rgba(244, 241, 234, 0.08); border-radius: 20px; transition: border-color 200ms linear, transform 260ms var(--jv-ease); } .jv-icon-card:hover { border-color: color-mix(in srgb, var(--jv-accent) 40%, transparent); transform: translateY(-3px); } .jv-icon-card .elementor-icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--jv-accent) 8%, transparent); } /* ── 2. Motion primitives ────────────────────────────────────────────────── */ /* Base: fade + rise. Hiding is gated behind html.jv-motion, which motion.js only sets once its observer is safely installed — content can never be trapped invisible by a script failure. */ .jv-motion [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity var(--jv-dur) var(--jv-ease-out) var(--jv-delay, 0ms), transform var(--jv-dur) var(--jv-ease-out) var(--jv-delay, 0ms), filter var(--jv-dur) var(--jv-ease-out) var(--jv-delay, 0ms); will-change: opacity, transform; } [data-reveal].is-revealed { opacity: 1; transform: none; filter: none; } /* Blur-to-clear, for imagery. */ .jv-motion [data-reveal="blur"] { filter: blur(14px); transform: translate3d(0, 18px, 0) scale(1.02); } /* Mask wipe retired: it left containers permanently clipped when the observer missed them. Media may never be invisible — mask now behaves as a plain fade. */ [data-reveal="mask"] { opacity: 1 !important; transform: none !important; clip-path: none !important; } /* Per-line heading reveal; spans are created by motion.js. */ [data-reveal="lines"] { opacity: 1; transform: none; } .jv-line { display: block; overflow: hidden; } .jv-motion .jv-line__inner { display: block; transform: translate3d(0, 105%, 0); transition: transform 820ms var(--jv-ease-out); transition-delay: calc(var(--jv-line-index, 0) * 90ms + var(--jv-delay, 0ms)); } [data-reveal="lines"].is-revealed .jv-line__inner { transform: none; } /* Scale-in for framed media. */ .jv-motion [data-reveal="zoom"] { transform: scale(1.06); opacity: 0; } /* ── 3. Surfaces and type ────────────────────────────────────────────────── */ .jv-dark { background: var(--jv-ink); color: var(--jv-on-dark); } .jv-dark-2 { background: var(--jv-ink-2); color: var(--jv-on-dark); } .jv-light { background: var(--jv-paper); color: var(--jv-on-light); } .jv-light-2 { background: var(--jv-paper-2); color: var(--jv-on-light); } .jv-dark .elementor-heading-title, .jv-dark-2 .elementor-heading-title { color: var(--jv-on-dark); } /* Small uppercase section label with a rule. */ .jv-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 12px; letter-spacing: 0.18em; text-transform: uppercase; } .jv-eyebrow .elementor-heading-title::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; } /* Editorial display heading. */ .jv-display .elementor-heading-title { text-wrap: balance; } /* ── 4. Hero ─────────────────────────────────────────────────────────────── */ .jv-hero { position: relative; min-height: 100svh; overflow: clip; isolation: isolate; } /* The cue pins to the hero's lower edge, under the copy. */ .jv-hero .elementor-widget-html:has(.jv-scrollcue) { position: static; } .jv-hero__media, .jv-hero__media video, .jv-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } /* Legibility: a vertical wash plus a corner vignette. */ .jv-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--jv-ink-rgb), 0.72) 0%, rgba(var(--jv-ink-rgb), 0.34) 34%, rgba(var(--jv-ink-rgb), 0.62) 74%, rgba(var(--jv-ink-rgb), 0.94) 100%), radial-gradient(120% 90% at 50% 10%, rgba(var(--jv-ink-rgb), 0) 40%, rgba(var(--jv-ink-rgb), 0.55) 100%); } /* Mouse-shaped cue: slim pill outline, a mint dot drops inside it, a soft chevron breathes underneath. */ .jv-scrollcue { position: absolute; left: 50%; /* The badge row now occupies the strip this used to sit in, so the cue drops below it rather than landing on top of the pills. */ bottom: 34px; translate: -50% 0; width: 26px; height: 42px; border: 1.5px solid rgba(244, 241, 234, 0.45); border-radius: 999px; background: rgba(var(--jv-ink-rgb), 0.25); } @media (max-width: 767px) { /* On a phone the pills scroll on one line and sit lower — the cue would collide with them, so it steps aside entirely. */ .jv-scrollcue { display: none; } } .jv-scrollcue::before { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 9px; border-radius: 4px; background: var(--jv-accent); transform: translate(-50%, 0); animation: jv-cue-drop 2.1s var(--jv-ease) infinite; } /* Parallax duty for the emotion band, same treatment as the quote band. */ @media (min-width: 1025px) { .jv-emotion { background-attachment: fixed; } } .jv-scrollcue::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 9px; height: 9px; border-right: 1.5px solid rgba(244, 241, 234, 0.55); border-bottom: 1.5px solid rgba(244, 241, 234, 0.55); transform: translateX(-50%) rotate(45deg); animation: jv-cue-chev 2.1s var(--jv-ease) infinite; } @keyframes jv-cue-drop { 0% { transform: translate(-50%, 0); opacity: 1; } 65% { transform: translate(-50%, 15px); opacity: 0; } 100% { transform: translate(-50%, 15px); opacity: 0; } } @keyframes jv-cue-chev { 0%, 100% { opacity: 0.35; transform: translateX(-50%) rotate(45deg) translate(0, 0); } 50% { opacity: 0.9; transform: translateX(-50%) rotate(45deg) translate(2px, 2px); } } /* ── 5. Cards and rails ──────────────────────────────────────────────────── */ /* Treatment card: image with a wash, title bottom-left, arrow bottom-right. */ .jv-card { position: relative; display: block; border-radius: var(--jv-radius); overflow: hidden; isolation: isolate; text-decoration: none; } .jv-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--jv-ease); } .jv-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--jv-ink-rgb), 0) 32%, rgba(var(--jv-ink-rgb), 0.58) 68%, rgba(var(--jv-ink-rgb), 0.9) 100%); transition: opacity var(--jv-dur-fast) linear; } .jv-card:hover img, .jv-card:focus-visible img { transform: scale(1.06); } /* A flex parent sizes a wrapped child to its content, so every scroller must pin itself to the container or it dictates the page width — on phones that pushed the burger and the info bar off the right edge. */ .jv-railwrap, .jv-rail, .javadi-rail, .javadi-marquee { width: 100%; min-width: 0; max-width: 100%; } .javadi-marquee { overflow-x: clip; } /* Safety net: a phone never pans sideways, whatever still overflows. `clip` rather than `hidden`: it forbids scrolling without creating a scroll container, so the sticky header keeps working. */ @media (max-width: 767px) { html, body { overflow-x: clip; } /* The info bar's three entries need two lines on a phone; they were being cut off at the right edge instead. */ .elementor-location-header #javadi-topbar > .e-con-inner { flex-wrap: wrap; justify-content: center; row-gap: 1px; column-gap: 14px; } .elementor-location-header #javadi-topbar .elementor-heading-title { font-size: 11px; white-space: nowrap; } } /* While the drawer is open the floating contact pill has no business on top of it — it punches through the header's stacking context. */ body.pjv-mm-locked .contact-fab, body.pjv-mm-locked #ContactPanel { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Horizontal rail that bleeds past the content column. */ .jv-rail { --jv-bleed: max(var(--jv-gutter), (100vw - var(--jv-content)) / 2); display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; margin-inline-end: calc(-1 * var(--jv-bleed)); /* The negative margin already carries the rail out to the window edge, so a matching padding on top of it is scrollable emptiness: at the end of the strip the reader was left staring at a bleed-wide blank. A gutter is enough to keep the last card off the glass. */ padding-inline-end: var(--jv-gutter, 24px); } .jv-rail::-webkit-scrollbar { display: none; } .jv-rail > * { scroll-snap-align: start; flex: 0 0 auto; } /* Drag-to-scroll: the whole rail behaves like a physical strip of photos. Driven by rail-drag.js; the cursor states are the affordance. */ .jv-rail--auto { cursor: grab; } .jv-rail--auto.is-dragging { cursor: grabbing; scroll-snap-type: none; } .jv-rail--auto.is-dragging * { pointer-events: none; user-select: none; } .jv-rail-hint { margin: 4px 0 0; font-family: "Poppins", sans-serif; font-size: 13.5px; letter-spacing: 0.04em; color: var(--jv-on-light-mute); opacity: 0.85; } .jv-dark .jv-rail-hint, .jv-dark-2 .jv-rail-hint { color: var(--jv-on-dark-mute); } .jv-rail-hint span { display: inline-block; animation: jv-hint-nudge 2.4s ease-in-out infinite; } @keyframes jv-hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } @media (prefers-reduced-motion: reduce) { .jv-rail-hint span { animation: none; } } /* ── 6. Mega menu ────────────────────────────────────────────────────────── */ .jv-mega { position: absolute; inset-inline: 0; top: 100%; background: var(--jv-ink-2); border-top: 1px solid var(--jv-line-dark); opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0); filter: blur(6px); transition: opacity 260ms var(--jv-ease), transform 320ms var(--jv-ease), filter 260ms var(--jv-ease), visibility 0s linear 320ms; z-index: 400; } .jv-mega.is-open { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; } /* ── 6b. Transparent header over the hero ──────────────────────────────────── Homepage only: the header floats transparent over the video and regains its solid surface as soon as the page is scrolled (sticky-header.js toggles `javadi-is-stuck` on ). */ /* body.home:not(...) outranks the child theme's sticky rule. */ body.home:not(.elementor-editor-active) .elementor-location-header { position: fixed; inset-inline: 0; top: 0; z-index: 500; } /* Liquid-glass bar: dark frosted surface on every page… */ .elementor-location-header #javadi-header { background: rgba(var(--jv-ink-rgb), 0.86); border-bottom: 1px solid rgba(244, 241, 234, 0.08); transition: background-color 280ms linear, border-color 280ms linear, backdrop-filter 280ms linear; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .elementor-location-header #javadi-header { background: rgba(var(--jv-ink-rgb), 0.55); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); } } /* …its type goes light, the dark lockup flips to white… */ .elementor-location-header #javadi-header .elementor-heading-title, .elementor-location-header .pjv-meganav__link { color: var(--jv-on-dark); } #javadi-logo img { filter: brightness(0) invert(1); } /* …and over the hero, before any scroll, it is a soft frosted band that dissolves at its lower edge. The glass lives on a ::before layer: masking the element itself would also clip the mega panel that hangs below it. */ .home:not(.javadi-is-stuck) .elementor-location-header #javadi-header { position: relative; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .home:not(.javadi-is-stuck) .elementor-location-header #javadi-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--jv-ink-rgb), 0.5); -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); } /* Belt and braces: a whisper of shadow behind the letters themselves. */ .home:not(.javadi-is-stuck) .elementor-location-header #javadi-header .pjv-meganav__link, .home:not(.javadi-is-stuck) .elementor-location-header #javadi-header .elementor-heading-title { text-shadow: 0 1px 14px rgba(var(--jv-ink-rgb), 0.55); } /* ── Subpages: the same floating glass ─────────────────────────────────────── The bar used to sit in the flow above a white page, so its translucency had nothing behind it to pick up and it read as a flat slab. Float it over the page hero, exactly as on the homepage. Scoped with :has() so any page without a hero image keeps the solid bar and stays readable. */ body:has(.jv-subheader):not(.home):not(.elementor-editor-active) .elementor-location-header { position: fixed; inset-inline: 0; top: 0; z-index: 500; } /* The hero gives back the height the bar no longer occupies in the flow. */ body:has(.jv-subheader) .jv-subheader { padding-top: 128px; } body:has(.jv-subheader):not(.javadi-is-stuck) .elementor-location-header #javadi-header { position: relative; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } body:has(.jv-subheader):not(.javadi-is-stuck) .elementor-location-header #javadi-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--jv-ink-rgb), 0.5); -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); } body:has(.jv-subheader):not(.javadi-is-stuck) .elementor-location-header #javadi-header .pjv-meganav__link, body:has(.jv-subheader):not(.javadi-is-stuck) .elementor-location-header #javadi-header .elementor-heading-title { text-shadow: 0 1px 14px rgba(var(--jv-ink-rgb), 0.55); } @media (max-width: 1024px) { body:has(.jv-subheader) .jv-subheader { padding-top: 104px; } } /* Premium nav interaction: a mint bar grows under the active/hovered item. */ .pjv-meganav__link { position: relative; } .pjv-meganav__link::after { content: ""; position: absolute; inset-inline: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--jv-accent); transform: scaleX(0); transform-origin: left center; transition: transform 240ms var(--jv-ease); } .pjv-meganav__link:hover::after, .pjv-meganav__link.is-current::after, .pjv-meganav__trigger[aria-expanded="true"]::after { transform: scaleX(1); } /* The booking pill glows gently on hover. */ #javadi-cta { transition: box-shadow 240ms linear, transform 240ms var(--jv-ease); } #javadi-cta:hover { box-shadow: 0 10px 30px rgba(111, 211, 174, 0.28); transform: translateY(-1px); } /* The template's own hairline divider is replaced by the glass border. */ .elementor-location-header .elementor-widget-divider { display: none; } /* ── Mobile drawer: fully palette-bound. The widget ships Figma greens as inline Elementor settings, so these overrides are what the switcher actually drives. ──────────────────────────────────────────────────── */ .pjv-mm-drawer, .pjv-mm-panel, [class*="pjv-mm"][class*="panel"], [class*="pjv-mm"][class*="drawer"] { background: var(--jv-ink-2) !important; } .pjv-mm-drawer a, .pjv-mm-drawer .pjv-mm-link, [class*="pjv-mm"] a:not(.elementor-button) { color: var(--jv-on-dark) !important; } .pjv-mm-drawer a:hover, [class*="pjv-mm"] a:not(.elementor-button):hover, [class*="pjv-mm"] a[aria-current="page"], [class*="pjv-mm"] .is-current { color: var(--jv-accent) !important; } /* Row separators and the accordion chevron plate. */ [class*="pjv-mm"] li, [class*="pjv-mm"] [class*="item"] { border-color: var(--jv-line-dark) !important; } /* The burger is deliberately plateless — see the minimal-burger block below. Only the sub-toggles and the close button keep a tinted chip. */ [class*="pjv-mm"] button[class*="sub-toggle"], [class*="pjv-mm"] [class*="chev"], [class*="pjv-mm"] [class*="close"] { background: color-mix(in srgb, var(--jv-accent) 12%, transparent) !important; color: var(--jv-on-dark) !important; border-color: var(--jv-line-dark) !important; } /* Substring matching also caught the glyph inside the chip (close-x), so the plate was painted twice: once round on the button, once square on the glyph, which read as a leftover box behind the close button. The chip is the button; whatever sits inside it stays bare. */ [class*="pjv-mm"] [class*="close"] [class*="close"], [class*="pjv-mm"] [class*="close"] > span, [class*="pjv-mm"] [class*="close"] > svg, [class*="pjv-mm"] button[class*="sub-toggle"] > span, [class*="pjv-mm"] button[class*="sub-toggle"] > svg { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Booking pill and the call plate at the drawer's foot. */ [class*="pjv-mm"] .elementor-button, [class*="pjv-mm"] [class*="cta"] { background: var(--jv-accent-deep) !important; color: var(--jv-on-dark) !important; } [class*="pjv-mm"] [class*="phone"], [class*="pjv-mm"] [class*="call"] { background: color-mix(in srgb, var(--jv-paper) 5%, transparent) !important; border-color: var(--jv-line-dark) !important; } [class*="pjv-mm"] [class*="phone"] [class*="icon"], [class*="pjv-mm"] [class*="call"] [class*="icon"] { background: color-mix(in srgb, var(--jv-accent) 16%, transparent) !important; color: var(--jv-accent) !important; } /* The drawer declares these on `.pjv-mm-root` / `.elementor-widget-pjv-mobile-menu`, which sit closer to it than :root. A custom property resolves from the NEAREST defining ancestor — specificity never enters into it — so an :root override could not reach the drawer. Redefine them on the same elements. The widget also writes its saved control values onto its own wrapper (`.elementor-element-xxxx.pjv-mm-side--right`), and those were still the retired green palette: the panel looked right only because the surfaces are repainted below, while anything reading the raw variable — the focus ring, active link colour — stayed green. Matching that wrapper and marking the values important keeps every menu colour on the tokens. */ .pjv-mm-root, .elementor-widget-pjv-mobile-menu, [class*="pjv-mm"], html:root { --pjv-mm-surface: var(--jv-ink-2) !important; --pjv-mm-surface-2: var(--jv-ink-3) !important; --pjv-mm-accent: var(--jv-accent-deep) !important; --pjv-mm-text: var(--jv-on-dark) !important; --pjv-mm-muted: var(--jv-on-dark-soft) !important; --pjv-mm-toggle-color: var(--jv-on-dark) !important; --pjv-mm-scrim: rgba(var(--jv-ink-rgb), 0.62) !important; --pjv-mm-hairline: var(--jv-line-dark) !important; } /* Remaining hard-coded greens inside the panel. */ .pjv-mm__nav .sub-menu li { border-inline-start-color: color-mix(in srgb, var(--jv-accent) 55%, transparent) !important; } .pjv-mm__panel { box-shadow: -24px 0 60px rgba(var(--jv-ink-rgb), 0.45) !important; } /* The CTA carried a green drop shadow in both its rest and pressed state. */ .pjv-mm__cta { background: var(--jv-accent-deep) !important; color: var(--jv-on-accent, #FFFFFF) !important; box-shadow: 0 8px 22px rgba(var(--jv-ink-rgb), 0.26) !important; } .pjv-mm__cta:active { box-shadow: 0 4px 14px rgba(var(--jv-ink-rgb), 0.22) !important; } .pjv-mm__cta-badge { background: color-mix(in srgb, var(--jv-accent) 22%, transparent) !important; } /* The phone disc and its label were painted with literal greens, not vars. */ .pjv-mm__tel-icon { background: color-mix(in srgb, var(--jv-accent) 22%, transparent) !important; border-color: var(--jv-accent-deep) !important; color: var(--jv-accent) !important; } .pjv-mm__tel-label, .pjv-mm__meta { color: var(--jv-on-dark-soft) !important; } .pjv-mm__foot { background-color: var(--jv-ink-3) !important; } /* Mega panel drop shadow was a fixed dark green. */ .pjv-mega { box-shadow: 0 30px 60px rgba(var(--jv-ink-rgb), 0.35) !important; } /* Drawer rhythm: head, list and foot all carried more air than the panel needed, so the CTA sat far below the last link. Tighten without dropping under the 44px touch floor. */ .pjv-mm__head { padding-block: 14px !important; } .pjv-mm__nav a { padding-block: 11px !important; } .pjv-mm__foot { padding-block: 14px !important; gap: 10px !important; } .pjv-mm__tel { padding: 10px 12px !important; } .pjv-mm__cta { min-height: 48px !important; } .pjv-mm__meta { margin-top: 4px !important; } /* Backdrop behind the open drawer. */ [class*="pjv-mm"][class*="backdrop"], [class*="pjv-mm"][class*="overlay"] { background: color-mix(in srgb, var(--jv-ink) 72%, transparent) !important; } /* Minimal burger: no plate, no border — two hairlines that read as a mark. Palette-bound, and it inverts to a clean X while the drawer is open. */ .pjv-mm__toggle, .pjv-mm__toggle:hover, .pjv-mm__toggle:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--jv-on-dark) !important; --pjv-mm-bar-w: 26px; --pjv-mm-bar-h: 1.6px; } /* Bars are absolutely positioned with `inset-inline: 0`, so shortening one means releasing its start edge — `width` alone would do nothing. */ .pjv-mm__bars i { height: 1.6px !important; border-radius: 2px; transition: transform 260ms var(--jv-ease), opacity 180ms linear, inset-inline-start 260ms var(--jv-ease); } /* The middle rule sits short — that asymmetry is the whole mark. */ .pjv-mm__bars i:nth-child(2) { inset-inline-start: 34% !important; } .pjv-mm__toggle:hover .pjv-mm__bars i:nth-child(2) { inset-inline-start: 0 !important; } /* Open state: the X must stay symmetric, so restore the short bar first. */ .pjv-mm__toggle[aria-expanded="true"] .pjv-mm__bars i:nth-child(2) { inset-inline-start: 0 !important; } /* ── Mobile rails ──────────────────────────────────────────────────────────── Elementor switches every flex container to `flex-wrap: wrap` at the mobile breakpoint, so the rails stacked their cards vertically instead of forming one scrollable row — scrollWidth equalled clientWidth, so there was nothing to swipe. Force one row and let the finger do the rest. */ @media (max-width: 767px) { .jv-rail, .jv-rail > .e-con-inner { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Bleed to the screen edge so a card can sit flush while scrolling. */ margin-inline: calc(var(--jv-bleed, 16px) * -1); padding-inline: var(--jv-bleed, 16px); } .jv-rail::-webkit-scrollbar, .jv-rail > .e-con-inner::-webkit-scrollbar { display: none; } /* Cards keep their width instead of being squeezed into the viewport. */ .jv-rail > .e-con-inner > .e-con, .jv-rail > .e-con-inner > .elementor-widget, .jv-rail > .e-con, .jv-rail > .elementor-widget { flex: 0 0 auto !important; scroll-snap-align: start; max-width: 82vw; } /* The nested inner must not add a second scroller inside the outer one. */ .jv-rail > .e-con-inner { margin-inline: 0; padding-inline: 0; } /* Certificates ride an auto-scrolling marquee on desktop; on a phone that wrapped into a vertical stack. Stop the animation and hand the row to the finger instead. */ .javadi-marquee { overflow-x: auto !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .javadi-marquee::-webkit-scrollbar { display: none; } .javadi-marquee-track { flex-wrap: nowrap !important; animation: none !important; } .javadi-marquee-track > * { flex: 0 0 auto !important; scroll-snap-align: start; } /* The bar is thin here and rides over photographs — the 0.55 veil left the white lockup unreadable once the page scrolled. */ .elementor-location-header #javadi-header { background: rgba(var(--jv-ink-rgb), 0.9); } body:not(.javadi-is-stuck) .elementor-location-header #javadi-header::before { background: rgba(var(--jv-ink-rgb), 0.74); } } /* Ästhetik-Siegel — Emre's live sizing: 50px smaller than the built value (max 340 → 290) and a 20px gap from the top of the band. Lives here, not in the page's own CSS, so the page content is never rewritten to restyle it. `.jv-smile` prefix outranks the page rule whichever loads first. */ .jv-smile .jv-seal--ae { width: clamp(140px, 20vw, 290px); /* Sits 60px down and 70px in from the right edge, which centres it in the empty column beside the headline. */ top: 60px; right: calc(max(24px, (100vw - 1192px) / 2) + 70px); } @media (max-width: 1024px) { .jv-smile .jv-seal--ae { width: 110px; top: 60px; right: 86px; } } @media (max-width: 767px) { .jv-smile .jv-seal--ae { width: 78px; top: 48px; right: 30px; } } /* Service cards ("Wobei dürfen wir helfen?"): each card is the same height, but the CTA sat directly under its link list, so a card with four links put its button 60px higher than the card with six. Push every button to the card floor — they then line up on the lowest one. */ .e-con:has(> .javadi-linklist) > .elementor-widget-button { margin-top: auto; } /* ── Journal cards ─────────────────────────────────────────────────────────── The band is now a live Posts query, but it has to read as the same card the page was designed around: full-bleed 16:9 image, category above the title in mono caps, Rajdhani headline, muted excerpt, read-more pinned to the floor. */ .jv-journal .elementor-posts-container { align-items: stretch; } .jv-journal .elementor-post__card { display: flex; flex-direction: column; height: 100%; background: var(--jv-paper); border: 1px solid var(--jv-line-light); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(var(--jv-ink-rgb), 0.04); transition: transform 320ms var(--jv-ease), box-shadow 320ms var(--jv-ease); } .jv-journal .elementor-post__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(var(--jv-ink-rgb), 0.10); } /* Image sits flush at the top, cropped to a steady ratio. */ .jv-journal .elementor-post__thumbnail__link { order: 1; margin: 0; } .jv-journal .elementor-post__thumbnail { padding-bottom: 0 !important; aspect-ratio: 16 / 10; } .jv-journal .elementor-post__thumbnail img { position: static !important; width: 100%; height: 100%; object-fit: cover; transform: none !important; transition: scale 700ms var(--jv-ease); } .jv-journal .elementor-post__card:hover .elementor-post__thumbnail img { scale: 1.04; } /* The category badge belongs above the title, not floating on the photo. */ /* Elementor's own cards-skin rule matches with the same weight, so the plain-text treatment needs to win outright. */ .jv-journal .elementor-post__badge { order: 2; position: static !important; align-self: flex-start; margin: 22px 22px 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jv-accent-deep); } .jv-journal .elementor-post__text { order: 3; display: flex; flex-direction: column; flex: 1 1 auto; padding: 9px 22px 22px; margin: 0; } .jv-journal .elementor-post__title { margin: 0 0 10px; font-family: "Rajdhani", sans-serif; } .jv-journal .elementor-post__title a { color: var(--jv-on-light); } .jv-journal .elementor-post__card:hover .elementor-post__title a { color: var(--jv-accent-deep); } .jv-journal .elementor-post__excerpt p { margin: 0; color: var(--jv-on-light-mute); } /* Read-more sits on the card floor so every card lines up. */ .jv-journal .elementor-post__read-more { margin-top: auto; padding-top: 14px; color: var(--jv-on-light-mute); text-decoration: none; } .jv-journal .elementor-post__card:hover .elementor-post__read-more { color: var(--jv-accent-deep); } /* Date/comments and the avatar have no place in this card. */ .jv-journal .elementor-post__meta-data, .jv-journal .elementor-post__avatar { display: none; } @media (max-width: 767px) { .jv-journal .elementor-post__badge { margin: 18px 18px 0; } .jv-journal .elementor-post__text { padding: 8px 18px 18px; } } /* ── Trust badges on the hero ──────────────────────────────────────────────── They used to sit in their own band, which left a wide empty strip under the video. Now they ride the bottom of the hero itself: glass pills over the footage, legible without a solid plate behind them. */ .jv-hero-badges { margin-top: clamp(28px, 5vh, 64px) !important; padding: 0 !important; z-index: 3; } .jv-hero-badges > .e-con, .jv-hero-badges > .e-con-inner > .e-con { background-color: rgba(var(--jv-ink-rgb), 0.34) !important; border-color: rgba(255, 255, 255, 0.22) !important; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 8px 24px rgba(var(--jv-ink-rgb), 0.22) !important; } /* On the footage the copy has to be light, whatever the pill said before. */ .jv-hero-badges .elementor-heading-title { color: var(--jv-on-dark) !important; } /* Without a backdrop filter the glass would read as a grey smear. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .jv-hero-badges > .e-con, .jv-hero-badges > .e-con-inner > .e-con { background-color: rgba(var(--jv-ink-rgb), 0.62) !important; } } @media (max-width: 767px) { /* Five pills would stack into a wall; let them scroll on one line. */ .jv-hero-badges > .e-con-inner { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; justify-content: flex-start !important; margin-inline: -16px; padding-inline: 16px; } .jv-hero-badges > .e-con-inner::-webkit-scrollbar { display: none; } .jv-hero-badges > .e-con-inner > .e-con { flex: 0 0 auto !important; } } /* ── Header aligned to the content column ──────────────────────────────────── The bar ran the full viewport while every section below sits in a 1192px box, so the logo and the Doctolib button never lined up with the hero copy — the button ran right off the edge. Both header rows now share the page's content box, which puts the logo exactly under the headline's left edge. */ .elementor-location-header #javadi-header > .e-con > .e-con-inner, .elementor-location-header #javadi-header > .e-con-inner, .elementor-location-header #javadi-topbar > .e-con-inner { /* Exactly the body column. The outer container already supplies the gutter, so the inner box adds none — it was adding 24px on top, which pushed the logo that far right of the headline below it. */ max-width: var(--jv-content); margin-inline: auto; padding-inline: 0 !important; } /* The lockup and the CTA carried their own edge padding on top of that. */ .elementor-location-header #javadi-logo { padding-inline-start: 0 !important; } .elementor-location-header #javadi-header .elementor-widget-button:last-child { padding-inline-end: 0 !important; margin-inline-end: 0 !important; } /* ── Header at in-between widths ───────────────────────────────────────────── The desktop nav only gave way to the drawer below 1024px, but logo + eight items + the Doctolib pill stop fitting well before that — the button ended up sitting on top of the last menu entries. Two steps: tighten the bar through the middle range, and hand over to the drawer once even that is not enough. */ /* Nothing in the bar may overlap: each part shrinks, none overflows. The row was centred, which parked the lockup ~38px inside the column while every headline below started at its edge. Pushing the parts to the ends puts the logo and the CTA exactly on the content lines. */ .elementor-location-header #javadi-header .e-con-inner { flex-wrap: nowrap; justify-content: space-between !important; } /* The template leaves an empty flex child at the end; it would eat a slot. */ .elementor-location-header #javadi-header-bar > .e-con-inner > .e-con:empty { display: none; } /* `flex: 0 1 auto` let the nav's BOX shrink while its items kept their size, so the box measured fine while the links spilled under the CTA. Pinning the basis to the content means the row is honest about how much space it needs. */ .elementor-location-header .pjv-meganav { flex: 0 0 auto; } /* The flex child of the row is Elementor's widget WRAPPER, not the