/* ========================================================================= ToldiMed – stilul temei Convertit din prototipul de design în clase semantice + design tokens. Spațierea verticală între secțiuni este EGALĂ peste tot: var(--space-section). ========================================================================= */ /* ----------------------------- Design tokens ---------------------------- */ :root { /* Culori brand */ --c-cyan: #00c3f5; --c-cyan-700: #0091bd; --c-cyan-800: #0a93bd; --c-cyan-link: #00a6cf; --c-red: #ec1f25; --c-red-600: #d6383d; --c-ink: #16262e; /* text principal */ --c-ink-2: #2c4049; --c-body: #5a6b72; /* paragrafe */ --c-muted: #7a8c93; --c-muted-2: #8a9aa1; --c-line: #e4eef2; /* borduri */ --c-line-2: #e8f1f4; --c-surface: #ffffff; --c-surface-alt: #f3fbfe; /* fundal secțiuni alternante */ --c-dark: #0b222c; /* secțiuni întunecate */ /* Tipografie */ --font-head: 'Sora', system-ui, sans-serif; --font-body: 'Poppins', system-ui, sans-serif; /* Layout */ --container: 1440px; --container-pad: 15px; /* SPAȚIEREA EGALĂ dintre blocuri / secțiuni */ --space-section: 80px; /* padding vertical identic pe fiecare secțiune */ --space-head: 40px; /* spațiu sub antetul de secțiune */ --gap: 24px; /* grid gap implicit */ --radius: 22px; --shadow-card: 0 12px 30px -24px rgba(16, 38, 46, .4); --shadow-pop: 0 18px 40px -24px rgba(16, 38, 46, .4); /* Pattern subtil de puncte pentru secțiunile deschise (din noul design) */ --dots: radial-gradient(rgba(7, 140, 184, .05) 1.2px, transparent 1.3px) 0 0 / 24px 24px; /* Glow în colț pentru secțiunile alternante */ --alt-glow: radial-gradient(circle at 88% 4%, rgba(0, 195, 245, .07), transparent 40%); } /* ------------------------------- Reset ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* offset pentru ancorele cu header fix */ :target { scroll-margin-top: 96px; } body { margin: 0; font-family: var(--font-body); color: var(--c-ink); background: var(--c-surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; } h1, h2, h3, h4, h5, h6, p, figure { margin: 0; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } img { height: auto; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--c-cyan); color: #fff; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ------------------------------ Layout ---------------------------------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); } /* fiecare secțiune are ACEEAȘI spațiere verticală */ .section { padding: var(--space-section) 0; } .section--alt { background: var(--dots), var(--alt-glow), linear-gradient(180deg, #f0f9fc, #ffffff); } .section--dark { background: radial-gradient(circle at 18% 0%, rgba(0, 195, 245, .16), transparent 44%), radial-gradient(circle at 92% 96%, rgba(214, 166, 90, .10), transparent 46%), #0a212b; } .section--plain { background: var(--c-surface); } /* Secțiune cu imagine de fundal (--section-bg) sub overlay-ul întunecat. Imaginea stă în ::before, overlay-ul în ::after, conținutul deasupra. */ .section--bg { position: relative; isolation: isolate; } .section--bg::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--section-bg); background-size: cover; background-position: center; } .section--bg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 33, 43, .88), rgba(10, 33, 43, .94)); opacity: 0.8; } .section--bg > .container { position: relative; } /* ------------------------- Antet de secțiune ---------------------------- */ .section-head { max-width: 1200px; margin: 0 auto var(--space-head); text-align: center; } .single-post .emoji { width: auto; height: 25px; display: inline-block; margin-bottom: -7px; } .section-head--left { text-align: left; margin-left: 0; } .section-title { font-family: var(--font-head); font-weight: 700; font-size: clamp(27px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.02em; color: var(--c-ink); } .section-sub { font-size: 17px; line-height: 1.7; color: var(--c-body); margin-top: 18px; } .section--dark .section-title { color: #fff; } .section--dark .section-sub { color: rgba(255, 255, 255, .66); } /* ------------------------------ Butoane --------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 16px; padding: 16px 30px; border-radius: 999px; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; cursor: pointer; } .btn--primary { background: var(--c-cyan); color: #fff; box-shadow: 0 14px 30px rgba(0, 195, 245, .34); } .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 195, 245, .44); } .btn--danger { background: var(--c-red); color: #fff; box-shadow: 0 14px 30px rgba(236, 31, 37, .3); } .btn--danger:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(236, 31, 37, .4); } .btn--ghost { background: #fff; color: var(--c-cyan-700); border: 1.5px solid #cfe6ee; } .btn--ghost:hover { border-color: var(--c-cyan); transform: translateY(-2px); } .btn--soft { background: #eef7fa; color: var(--c-cyan-700); } .btn--soft:hover { background: var(--c-cyan); color: #fff; box-shadow: 0 14px 30px rgba(0, 195, 245, .34); } .btn--block { display: flex; width: 100%; padding: 16px; border-radius: 12px; } .btn--sm { padding: 12px 24px; font-size: 15px; } .btn__icon { flex: none; } /* ============================= HEADER / NAV ============================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid #eaf2f5; transition: box-shadow .25s; } .site-header.is-scrolled { box-shadow: 0 8px 30px rgba(16, 38, 46, .1); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 72px; } .site-logo { display: flex; align-items: center; flex: none; } .site-logo svg, .site-logo img { height: 44px; width: auto; } .tm-nav__menu { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; color: var(--c-ink-2); } .tm-nav__menu a { transition: color .2s; } .tm-nav__menu a:hover { color: var(--c-cyan-link); } .tm-nav__menu .current-menu-item > a, .tm-nav__menu .current_page_item > a { color: var(--c-cyan-link); font-weight: 600; } /* ---- Submeniu (dropdown) meniu principal ---- */ .tm-nav__menu, .tm-nav__menu .sub-menu { list-style: none; margin: 0; padding: 0; } .tm-nav__menu .menu-item-has-children { position: relative; } .tm-nav__menu .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 7px; } .tm-nav__menu .menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .65; transition: transform .2s; } .tm-nav__menu .menu-item-has-children:hover > a::after { transform: rotate(-135deg) translateY(-1px); } .tm-nav__menu .sub-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 236px; background: #fff; border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 26px 54px -26px rgba(16, 38, 46, .38); padding: 8px; margin-top: 14px; display: flex; flex-direction: column; gap: 2px; z-index: 80; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; } .tm-nav__menu .sub-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* punte hover */ .tm-nav__menu .menu-item-has-children:hover > .sub-menu, .tm-nav__menu .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .tm-nav__menu .sub-menu li { margin: 0; } .tm-nav__menu .sub-menu a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--c-ink-2); white-space: nowrap; transition: background .18s, color .18s; } .tm-nav__menu .sub-menu a:hover, .tm-nav__menu .sub-menu .current-menu-item > a { background: rgba(0, 195, 245, .1); color: var(--c-cyan-link); } .submenu-toggle { display: none; } /* pe desktop dropdown-ul e pe hover; butonul apare doar pe mobil */ .site-header__actions { display: flex; align-items: center; gap: 20px; flex: none; } .header-phone { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--c-ink); } .header-phone svg { stroke: var(--c-cyan); } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; } .tm-nav__cta { display: none; } /* buton „Programează-te" – doar în meniul burger */ .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--c-ink); position: relative; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--c-ink); } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } /* spațiu sub headerul fix, ca să nu acopere primul element */ .site-main { padding-top: 72px; } /* ============================== HERO ==================================== */ .hero { position: relative; padding: 70px 0 var(--space-section); background: var(--dots), linear-gradient(180deg, #eef8fc 0%, #ffffff 72%); overflow: hidden; } .hero__blob { position: absolute; border-radius: 50%; pointer-events: none; } .hero__blob--1 { top: -120px; right: -80px; width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, rgba(0, 195, 245, .22), rgba(0, 195, 245, 0) 70%); } .hero__blob--2 { bottom: -160px; left: -120px; width: 480px; height: 480px; background: radial-gradient(circle at 50% 50%, rgba(236, 31, 37, .1), rgba(236, 31, 37, 0) 70%); } .hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } .hero__badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(0, 195, 245, .1); color: var(--c-cyan-700); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; margin-bottom: 26px; } .hero__badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-cyan); } .hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(40px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.02em; } .hero__lead { font-size: 18px; line-height: 1.7; color: var(--c-body); margin-top: 24px;} .hero__actions { display: flex; align-items: center; gap: 18px; margin-top: 38px; flex-wrap: wrap; } .hero__play { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; font-size: 16px; } .hero__play-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid #cfe6ee; color: var(--c-cyan-link); } .hero__stats { display: flex; gap: 36px; margin-top: 46px; flex-wrap: wrap; } .hero__stat-num { font-family: var(--font-head); font-weight: 700; font-size: 30px; color: var(--c-ink); } .hero__stat-lbl { font-size: 14px; color: var(--c-muted); margin-top: 2px; } .hero__stat-sep { width: 1px; background: #e2edf1; } /* ----------------------- Card video (decorativ) ------------------------- */ .video-card { position: relative; border-radius: 28px; overflow: hidden; background: var(--c-cyan-800); box-shadow: 0 40px 80px -30px rgba(0, 120, 150, .55); } .video-card--45 { aspect-ratio: 1; max-height: 700px; } .video-card--11 { aspect-ratio: 1 / 1; } .page-template-template-dantura-fixa .video-card--11 { height: 62vh; aspect-ratio: auto;} .video-card__bg { position: absolute; inset: 0; background: linear-gradient(135deg, #0a93bd, #23c8f6); transform-origin: center; } .video-card__glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 62%); } .video-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(8, 30, 38, .45) 100%); pointer-events: none; } .video-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); color: var(--c-cyan-link); transition: opacity .35s, transform .25s; } .video-card__pill { position: absolute; left: 20px; bottom: 24px; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .92); padding: 9px 16px 9px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--c-ink); } .video-card__live { position: relative; display: inline-flex; width: 9px; height: 9px; } .video-card__live::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-red); animation: pulseRing 1.8s ease-out infinite; } .video-card__live::after { content: ""; position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--c-red); } .video-card__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .22); } .video-card__bar i { display: block; height: 100%; width: 0%; background: #fff; } .video-doctor { position: absolute; right: -20px; bottom: -22px; background: #fff; border-radius: 18px; padding: 14px 18px 14px 14px; box-shadow: 0 24px 50px -22px rgba(16, 38, 46, .34); display: flex; align-items: center; gap: 13px; max-width: 280px; } .video-doctor__ava { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, #d7e8ef, #bcdde8); display: flex; align-items: center; justify-content: center; color: #86a5b1; flex: none; overflow: hidden; } .video-doctor__ava img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .video-doctor__name { font-family: var(--font-head); font-weight: 600; font-size: 15px; } .video-doctor__role { font-size: 12.5px; color: var(--c-muted); line-height: 1.35; } @keyframes pulseRing { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } } /* Fără efect de intrare (fade/reveal) – elementele sunt vizibile direct. */ .reveal { opacity: 1; } /* ------------------------------- Grid-uri ------------------------------- */ .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .split { display: grid; gap: 60px; align-items: center; } .split--media-text { grid-template-columns: 1fr 1.05fr; } .split--text-media { grid-template-columns: 1.05fr 1fr; } /* --------------------- Card placeholder imagine ------------------------- */ .media-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #86a5b1; } .ph-box { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #d7e8ef, #bcdde8); } /* imagine reală care umple caseta media (înlocuiește placeholder-ul) */ .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ===================== Testimoniale / Cazuri (carduri dark) ============= */ .tst-card, .case-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 4; background: #0c2530; box-shadow: var(--shadow-pop); transition: transform .3s; } .case-card { aspect-ratio: 3 / 3; } .tst-card:hover, .case-card:hover { transform: translateY(-6px); } .tst-card__bg { position: absolute; inset: 0; background: linear-gradient(150deg, #16424f, #0a2530); } .tst-card__ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .18; color: #bfe6f1; } .tst-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(6, 24, 31, .85) 100%); } .tst-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); color: var(--c-cyan-link); transition: transform .25s; } .tst-card:hover .tst-card__play { transform: translate(-50%, -50%) scale(1.08); } .tst-card__meta { position: absolute; left: 18px; right: 18px; bottom: 18px; color: #fff; } .tst-card__tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .16); padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; margin-bottom: 10px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .tst-card__quote { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .9); margin-top: 4px; } .case-card__dur, .vid-dur { position: absolute; right: 12px; bottom: 12px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; } .case-card__title { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(6, 24, 31, .85)); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 15px; } /* ----------------------------- Carousel --------------------------------- */ .carousel { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 26px; } .carousel::-webkit-scrollbar { display: none; } .carousel__clip { overflow: hidden; } .carousel-item { flex: none; scroll-snap-align: start; } .carousel-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 34px; } .carousel-dots button { height: 9px; width: 9px; border-radius: 999px; background: #cfe1e8; transition: all .3s; } .carousel-dots button.is-active { width: 30px; background: var(--c-cyan); } .carousel-nav { display: flex; gap: 12px; } /* Navigare sub carusel, centrată (ex. blocul Diplome). */ .carousel-nav--center { justify-content: center; margin-top: 15px; } .carousel-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid #cfe6ee; background: #fff; color: var(--c-ink); display: flex; align-items: center; justify-content: center; transition: all .2s; } .carousel-nav button:hover { border-color: var(--c-cyan); color: var(--c-cyan-link); transform: translateY(-2px); } .gallery-fig { width: 340px; margin: 0; } .gallery-fig .ph-box { aspect-ratio: 3 / 4; box-shadow: 0 16px 36px -22px rgba(16, 38, 46, .4); } .gallery-fig__tag { position: absolute; left: 14px; top: 14px; background: rgba(255, 255, 255, .92); padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--c-cyan-700); } /* ----------------------- Carduri „soluție / etapă" ---------------------- */ .feature-card { border: 1px solid var(--c-line-2); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-card); transition: transform .3s, box-shadow .3s; } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px -28px rgba(16, 38, 46, .42); } .feature-card__media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #e3f0f5, #cfe6ee); } .page-template-template-dantura-fixa .feature-card__media {aspect-ratio: 4 / 2;} .feature-card__num { position: absolute; left: 16px; top: 16px; width: 38px; height: 38px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--c-cyan-link); font-family: var(--font-head); font-weight: 700; box-shadow: 0 6px 16px rgba(16, 38, 46, .12); } .feature-card__body { padding: 24px 22px 28px; } .feature-card__title { font-family: var(--font-head); font-weight: 600; font-size: 19px; line-height: 1.25; } .feature-card__text { font-size: 14.5px; line-height: 1.65; color: var(--c-body); margin-top: 10px; } .step-card { position: relative; border: 1px solid var(--c-line-2); border-radius: var(--radius); padding: 30px 26px 28px; background: #fff; box-shadow: var(--shadow-card); overflow: hidden; transition: transform .3s; } .step-card:hover { transform: translateY(-8px); } .step-card__ghost { position: absolute; right: 14px; top: 0; font-family: var(--font-head); font-weight: 800; font-size: 90px; line-height: 1; color: #f0f7fa; pointer-events: none; } .step-card__num { position: relative; width: 54px; height: 54px; border-radius: 16px; background: rgba(0, 195, 245, .12); display: flex; align-items: center; justify-content: center; color: var(--c-cyan-700); font-family: var(--font-head); font-weight: 700; font-size: 20px; margin-bottom: 22px; } .step-card__title { position: relative; font-family: var(--font-head); font-weight: 600; font-size: 18px; line-height: 1.25; } .step-card__text { position: relative; font-size: 18px; line-height: 1.65; color: #16262e; margin-top: 10px; } @media (max-width: 640px) { .step-card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } .step-card__num { margin-bottom: 0; } .step-card__text { grid-column: 1 / -1; } } /* ----------------------------- Prose (text) ----------------------------- */ .prose p { font-size: 16px; line-height: 1.72; color: var(--c-body); } .prose p + p { margin-top: 15px; } .prose > :first-child { margin-top: 0; } .prose h2 { font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.3; color: var(--c-ink); margin: 40px 0 14px; scroll-margin-top: 100px; } .prose h3 { font-family: var(--font-head); font-weight: 600; font-size: 19px; line-height: 1.35; color: var(--c-ink); margin: 30px 0 12px; scroll-margin-top: 100px; } .prose h4 { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--c-ink-2); margin: 24px 0 10px; } .prose ul, .prose ol { margin: 14px 0; padding-left: 22px; } .prose li { font-size: 16px; line-height: 1.7; color: var(--c-body); margin: 7px 0; } .prose li::marker { color: var(--c-cyan); } .prose li > ul, .prose li > ol { margin: 7px 0; } .prose a { color: var(--c-cyan-link); text-decoration: underline; text-underline-offset: 2px; } .prose a:hover { color: var(--c-cyan-700); } .prose strong, .prose b { color: var(--c-ink-2); font-weight: 600; } .prose blockquote { margin: 22px 0; padding: 6px 22px; border-left: 3px solid var(--c-cyan); background: var(--c-surface-alt); border-radius: 0 12px 12px 0; color: var(--c-ink-2); } .prose hr { border: 0; border-top: 1px solid var(--c-line); margin: 34px 0; } .prose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; } .prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--c-line); } .prose th { font-family: var(--font-head); font-weight: 600; color: var(--c-ink); } .lead-actions { margin-top: 50px; } /* --------------------------- Comparație fixă/mobilă --------------------- */ .compare-card { border-radius: 24px; padding: 34px 32px; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 16px 40px -28px rgba(16, 38, 46, .4); } .compare-card--featured { position: relative; border: 2px solid var(--c-cyan); box-shadow: 0 30px 60px -30px rgba(0, 120, 150, .4); } .compare-card__flag { position: absolute; top: -13px; left: 32px; background: var(--c-cyan); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; } .compare-card__media { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; position: relative; margin-bottom: 24px; } .compare-card__media--cyan { background: linear-gradient(135deg, #cdeaf6, #a9ddf0); color: #5fb6d6; } .compare-card__media--gray { background: linear-gradient(135deg, #e3eef2, #cfdfe6); color: #90a8b1; } .compare-card__title { font-family: var(--font-head); font-weight: 700; font-size: 24px; } .compare-card__sub { font-size: 14px; color: var(--c-muted); margin-top: 4px; } .compare-card__label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 24px 0 14px; } .compare-card__label--ok { color: var(--c-cyan-700); } .compare-card__label--bad { color: #c0494d; } .compare-list { display: flex; flex-direction: column; gap: 12px; } .compare-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: #39505a; line-height: 1.5; } .compare-list__ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .compare-list__ico--ok { background: rgba(0, 195, 245, .14); color: var(--c-cyan-700); } .compare-list__ico--bad { background: rgba(236, 31, 37, .1); color: var(--c-red-600); } /* ------------------------ Lucrări înainte / după ------------------------ */ .work-card { border: 1px solid var(--c-line-2); border-radius: 24px; padding: 18px; background: #fff; box-shadow: 0 16px 40px -26px rgba(16, 38, 46, .4); } .work-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .work-card__img { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; } .work-card__img--before { background: linear-gradient(135deg, #e3eef2, #cfdfe6); color: #90a8b1; } .work-card__img--after { background: linear-gradient(135deg, #d3eef7, #b8e4f3); color: #5fb6d6; } .work-card__badge { position: absolute; left: 12px; top: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; color: #fff; } .work-card__badge--before { background: rgba(22, 38, 46, .85); } .work-card__badge--after { background: var(--c-cyan); } /* ------------------------------- Prețuri -------------------------------- */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .price-card { position: relative; border-radius: 24px; padding: 34px 30px 30px; background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); box-shadow: 0 14px 34px -24px rgba(16, 38, 46, .4); transition: transform .3s; } .price-card--popular { background: linear-gradient(160deg, #0a93bd, #16262e); color: #fff; box-shadow: 0 30px 60px -24px rgba(0, 120, 150, .5); transform: scale(1.03); } .price-card__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--c-cyan); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; } /* Numele procedurii, deasupra prețului (ex. „Dantură fixă pe 4 implanturi"). */ .price-card__proc { font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.35; opacity: .85; } .price-card__price { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; } .price-card__from { font-size: 18px; font-weight: 600; opacity: .7; margin-bottom: 8px; } .price-card__amount { font-family: var(--font-head); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.02em; } .price-card__sep { height: 1px; background: currentColor; opacity: .14; margin: 24px 0; } .price-card__feats { display: flex; flex-direction: column; gap: 13px; margin-bottom: 30px; } .price-card__feats li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.45; color: var(--c-body); } .price-card__feats svg { flex: none; margin-top: 2px; color: var(--c-cyan); } .price-card--popular .price-card__feats li { color: rgba(255, 255, 255, .85); } .price-card--popular .price-card__feats svg { color: #7fe0ff; } /* ----------------------- Playlist video (light/dark) -------------------- */ .playlist { display: grid; grid-template-columns: 1.45fr 1fr; gap: 30px; align-items: stretch; } .playlist--wide { grid-template-columns: 1.55fr 1fr; } .playlist__main { position: relative; border-radius: 24px; overflow: hidden; background: var(--c-cyan-800); box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .6); min-height: 500px; } .playlist__main .video-card__bg { background: linear-gradient(135deg, #0a93bd, #23c8f6); } .playlist__main-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(6, 22, 28, .78) 100%); pointer-events: none; } .playlist__main-cap { position: absolute; left: 24px; right: 24px; bottom: 24px; color: #fff; } .playlist__main-ep { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .16); padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-bottom: 12px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .playlist__main-title { font-family: var(--font-head); font-weight: 600; font-size: 22px; line-height: 1.25; } .playlist__head { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 600; font-size: 15px; margin-bottom: 14px; padding: 0 4px; } .playlist__scroll { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c-cyan) rgba(128, 140, 147, .22); } .playlist__scroll::-webkit-scrollbar { width: 8px; } .playlist__scroll::-webkit-scrollbar-track { background: rgba(128, 140, 147, .18); border-radius: 8px; } .playlist__scroll::-webkit-scrollbar-thumb { background: var(--c-cyan); border-radius: 8px; } .pl-item { display: flex; align-items:center; gap:13px; padding: 10px; border-radius: 14px; transition: all .2s; width: 100%; text-align: left; border: 1px solid transparent; } .pl-item.is-active { background: #fff; border-color: #d6ebf2; box-shadow: 0 12px 28px -18px rgba(16, 38, 46, .4); } .pl-item__thumb { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: linear-gradient(135deg, #15414f, #0a2932); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .55); } .pl-item__thumb .vid-dur { right: 5px; bottom: 5px; font-size: 10px; padding: 2px 5px; } .pl-item__body { min-width: 0; flex: 1; padding-top: 2px; } .pl-item__title { font-family: var(--font-head); font-weight: 600; font-size: 14px; line-height: 1.3; } .pl-item__outlet { font-size: 12px; color: var(--c-cyan-700); font-weight: 500; margin-top: 5px; } /* variantă dark (FAQ video) */ .section--dark .playlist__head { color: #fff; } .section--dark .pl-item.is-active { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); } .section--dark .pl-item__title { color: #fff; } /* ------------------------------ Riscuri --------------------------------- */ .risk-card { position: relative; border: 1px solid var(--c-line-2); border-radius: var(--radius); padding: 30px 26px 28px; background: #fff; box-shadow: var(--shadow-card); transition: transform .3s; } .risk-card:hover { transform: translateY(-6px); } .risk-card__ico { width: 50px; height: 50px; border-radius: 14px; background: rgba(236, 31, 37, .1); display: flex; align-items: center; justify-content: center; color: var(--c-red-600); margin-bottom: 20px; } .risk-card__title { font-family: var(--font-head); font-weight: 600; font-size: 18px; line-height: 1.25; } .risk-card__text { font-size: 14.5px; line-height: 1.65; color: var(--c-body); margin-top: 10px; } @media (max-width: 640px) { .risk-card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } .risk-card__ico { margin-bottom: 0; } .risk-card__text { grid-column: 1 / -1; } } /* ------------------------------ Recenzii -------------------------------- */ .rating-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; } .rating-pill { display: flex; align-items: center; gap: 10px; background: #f6fafc; border: 1px solid #e7eef2; padding: 10px 18px; border-radius: 999px; font-size: 13px; color: var(--c-muted); } .rating-pill b { color: var(--c-ink); } .rating-pill .stars { color: #f5a623; } /* Pastila devine clicabilă când are link către pagina de recenzii. */ .rating-pill--link { text-decoration: none; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; } .rating-pill--link:hover { background: #fff; border-color: var(--c-cyan); box-shadow: 0 10px 24px -16px rgba(16, 38, 46, .5); } .badge-circle { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--font-head); font-weight: 700; font-size: 15px; } .badge-circle--g { background: #fff; border: 1px solid #eceff1; color: #4285F4; } .badge-circle--f { background: #1877F2; color: #fff; } .review-card { border: 1px solid var(--c-line-2); border-radius: var(--radius); padding: 28px 26px; background: #fff; box-shadow: var(--shadow-card); transition: transform .3s; } .review-card:hover { transform: translateY(-6px); } .review-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .review-card__plat { display: flex; align-items: center; gap: 10px; } .review-card__plat span { font-size: 13px; font-weight: 600; } .review-card__badge { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-family: var(--font-head); font-weight: 700; font-size: 17px; } .review-card__stars { color: #f5a623; font-size: 15px; letter-spacing: 1px; } .review-card__text { font-size: 15px; line-height: 1.65; color: #445660; } .review-card__who { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef4f6; } .review-card__ava { width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 195, 245, .14); display: flex; align-items: center; justify-content: center; color: var(--c-cyan-link); flex: none; overflow: hidden; } .review-card__ava img { width: 22px; height: 22px; object-fit: contain; } .review-card__name { font-size: 14px; font-weight: 600; } .review-card__sub { font-size: 12px; color: var(--c-muted-2); } /* ------------------------------ Diplome --------------------------------- */ .diploma-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; flex-wrap: wrap; } .diploma-card { flex: none; width: calc((100% - 66px) / 4); border: 1px solid #ece6d6; border-radius: 16px; padding: 10px; background: linear-gradient(180deg, #fffdf8, #fbf7ee); box-shadow: var(--shadow-card); transition: transform .3s; } .diploma-card__inner { position: relative; aspect-ratio: 5 / 4; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid #efe9da; } .diploma-card__seal { width: 48px; height: 48px; border-radius: 50%; background: rgba(245, 166, 35, .14); display: flex; align-items: center; justify-content: center; color: #cf9a2a; } .diploma-card__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 14px; text-align: center; color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(8, 24, 31, .82)); } .diploma-card__title { font-size: 13px; font-weight: 600; line-height: 1.3; } .diploma-card__cap .diploma-card__org { font-size: 12px; color: rgba(255, 255, 255, .72); } .diploma-card__org { font-size: 12px; color: #9a8f78; } /* ------------------------------- Echipa --------------------------------- */ .lead-doctor { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: stretch; background: #fff; border: 1px solid var(--c-line); border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(16, 38, 46, .4); } .lead-doctor__media { position: relative; background: linear-gradient(135deg, #cdeaf6, #a9ddf0); min-height: 380px; height: 100%; color: #5fb6d6; } .lead-doctor__flag { position: absolute; left: 20px; top: 20px; background: var(--c-red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; } .lead-doctor__body { padding: 44px 48px 44px 0; } .lead-doctor__name { font-family: var(--font-head); font-weight: 700; font-size: 30px; letter-spacing: -.01em; } .lead-doctor__role { font-size: 16px; color: var(--c-cyan-700); font-weight: 600; margin-top: 6px; } .lead-doctor__exp { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 195, 245, .1); color: var(--c-cyan-700); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; margin-top: 16px; } .lead-doctor__bio { font-size: 16px; line-height: 1.72; color: var(--c-body); margin-top: 20px; } /* Listele din biografia medicului principal: bullet înlocuit cu bifă (check). */ .lead-doctor__bio ul { list-style: none; margin: 16px 0; padding-left: 0; } .lead-doctor__bio ul li { position: relative; padding-left: 32px; } .lead-doctor__bio ul li::marker { content: ""; } .lead-doctor__bio ul li::before { content: ""; position: absolute; left: 0; top: .18em; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300c3f5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain; } .member-card { flex: none; width: calc((100% - 72px) / 4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .3s; } .member-card__media { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(135deg, #d7e8ef, #bcdde8); color: #86a5b1; } .member-card__body { padding: 20px 20px 22px; } .member-card__name { font-family: var(--font-head); font-weight: 600; font-size: 17px; } .member-card__role { font-size: 13.5px; color: var(--c-cyan-700); font-weight: 500; margin-top: 3px; } .member-card__exp { font-size: 13px; color: var(--c-muted-2); margin-top: 8px; } /* ------------------------------- CTA / form ----------------------------- */ .cta { position: relative; border-radius: 30px; overflow: hidden; background: linear-gradient(130deg, #0a93bd 0%, #00c3f5 100%); box-shadow: 0 40px 90px -40px rgba(0, 120, 150, .6); } .cta__blob { position: absolute; top: -100px; right: -60px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%); pointer-events: none; } .cta__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 56px; } .cta__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -.02em; color: #fff; } .cta__text { margin-bottom: 30px;font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .9); margin-top: 16px;} .cta__phone { display: flex; align-items: center; gap: 11px; margin-top: 26px; font-weight: 600; font-size: 17px; color: #fff; } .tm-form, .wpcf7 { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 32px; box-shadow: 0 20px 50px -32px rgba(16, 38, 46, .4); } .cta .tm-form, .cta .wpcf7 { border: 0; box-shadow: 0 30px 60px -30px rgba(16, 38, 46, .4); } .tm-form__rows { display: flex; flex-direction: column; gap: 16px; } .tm-field, .wpcf7-form p.tm-field { display: block; margin: 0; } .tm-field__label { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink); margin-bottom: 7px; } .tm-field__input { width: 100%; padding: 14px 16px; border: 1.5px solid #e0ebef; border-radius: 12px; font-family: inherit; font-size: 15px; color: var(--c-ink); outline: none; transition: border-color .2s; } .tm-field__input:focus { border-color: var(--c-cyan); } textarea.tm-field__input { resize: vertical; } .tm-form__note { font-size: 12.5px; color: #92a2a8; text-align: center; line-height: 1.5; } /* Fieldul „Mesaj" e ascuns peste tot, cu excepția paginii Contacte (toldimed_contact_form( array( 'message' => true ) ) adaugă .tm-form-cf7--full). */ .tm-field--msg { display: none; } .tm-form-cf7--full .tm-field--msg { display: block; } /* În popup „Mesaj" rămâne ascuns întotdeauna (chiar dacă ancestorul ar avea .tm-form-cf7--full). */ .tm-modal .tm-field--msg { display: none !important; } /* harmonizează formularul CF7 cu stilul temei */ .wpcf7-form p { margin: 0 0 16px; } .wpcf7-form input[type="text"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="email"], .wpcf7-form textarea { width: 100%; padding: 14px 16px; border: 1.5px solid #e0ebef; border-radius: 12px; font-family: inherit; font-size: 15px; color: var(--c-ink); outline: none; } .wpcf7-form input:focus, .wpcf7-form textarea:focus { border-color: var(--c-cyan); } .wpcf7-form input[type="submit"] { width: 100%; background: var(--c-red); color: #fff; font-weight: 600; font-size: 16px; padding: 16px; border-radius: 12px; border: 0; cursor: pointer; box-shadow: 0 14px 30px rgba(236, 31, 37, .3); } /* ------------------------ Contact info + hartă -------------------------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .contact-cards { display: flex; flex-direction: column; gap: 16px; } .contact-item { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 22px 24px; box-shadow: 0 12px 30px -26px rgba(16, 38, 46, .4); } .contact-item__ico { flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 195, 245, .12); display: flex; align-items: center; justify-content: center; color: var(--c-cyan-700); } .contact-item__label { font-size: 13px; color: var(--c-muted-2); } .contact-item__value { font-family: var(--font-head); font-weight: 600; font-size: 18px; line-height: 1.5; } .contact-map { position: relative; margin-top: 28px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); box-shadow: 0 16px 40px -30px rgba(16, 38, 46, .4); } .contact-map iframe { width: 100%; height: 420px; border: 0; display: block; } .contact-map__link { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--c-cyan-700); font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: 999px; box-shadow: 0 10px 26px -10px rgba(16, 38, 46, .4); transition: transform .2s, box-shadow .2s; } .contact-map__link:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(16, 38, 46, .45); } .contact-item__value a { color: inherit; transition: color .2s; } .contact-item__value a:hover { color: var(--c-cyan-link); } /* item-ul întreg e link (email/adresă) → valoarea își schimbă culoarea la hover, ca telefoanele */ .contact-item__value { transition: color .2s; } a.contact-item:hover .contact-item__value { color: var(--c-cyan-link); } .cta__phone a { color: inherit; } /* clinic gallery */ .clinic-head { text-align: center; margin: 80px 0 36px; } .clinic-head__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.01em; } .clinic-head__sub { font-size: 16px; color: var(--c-body); margin-top: 10px; } .clinic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .clinic-grid .ph-box { aspect-ratio: 4 / 3; } .advantage-card { background: #fff; border: 1px solid var(--c-line); border-radius: 24px; overflow: hidden; box-shadow: 0 14px 36px -26px rgba(16, 38, 46, .4); transition: transform .3s; } .advantage-card:hover { transform: translateY(-6px); } .advantage-card__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #cdeaf6, #a9ddf0); color: #5fb6d6; } .advantage-card__num { position: absolute; left: 18px; top: 18px; width: 42px; height: 42px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--c-cyan-link); font-family: var(--font-head); font-weight: 700; box-shadow: 0 6px 16px rgba(16, 38, 46, .12); } .advantage-card__body { padding: 30px 32px 34px; } .advantage-card__title { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.25; } .advantage-card__text { font-size: 15.5px; line-height: 1.72; color: var(--c-body); margin-top: 14px; } /* ------------------------------- FAQ ------------------------------------ */ .faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { border: 1px solid var(--c-line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 10px 26px -22px rgba(16, 38, 46, .4); } .faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; text-align: left; } .faq-item__q span:first-child { font-family: var(--font-head); font-weight: 600; font-size: 17px; } .faq-item__chev { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 195, 245, .12); display: flex; align-items: center; justify-content: center; color: var(--c-cyan-700); transition: transform .25s; } .faq-item.is-open .faq-item__chev { transform: rotate(180deg); } .faq-item__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-item__a p { padding: 0 26px 24px; font-size: 15.5px; line-height: 1.7; color: var(--c-body); } /* ------------------------------ Footer ---------------------------------- */ .site-footer { background: radial-gradient(circle at 18% 0%, rgba(0, 195, 245, .16), transparent 44%), radial-gradient(circle at 92% 96%, rgba(214, 166, 90, .10), transparent 46%), #0a212b; color: #fff; padding: 80px 0 0; } .site-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; } .site-footer__about { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .6); max-width: 320px; margin-top: 20px; } .site-footer__logo svg, .site-footer__logo img { height: 44px; width: auto; } .footer-social { display: flex; gap: 12px; margin-top: 24px; } .footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; color: #fff; transition: all .2s; } .footer-social a:hover { background: var(--c-cyan); transform: translateY(-2px); } .footer-col__title { font-family: var(--font-head); font-weight: 600; font-size: 16px; margin-bottom: 18px; } .footer-badges { display: flex; gap: 10px; margin-top: 35px; align-items: center; } .footer-badges a { flex: 1 1 0; min-width: 0; max-width: 160px; } .footer-badges img { display: block; width: 100%; height: auto; border-radius: 4px; } .footer-col__links { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: rgba(255, 255, 255, .6); list-style: none; margin: 0; padding: 0; } .footer-col__links li { margin: 0; } .footer-col__links a { transition: color .2s; } .footer-col__links a:hover { color: var(--c-cyan); } .footer-contact { display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; color: rgba(255, 255, 255, .72); } .footer-contact div { display: flex; align-items: flex-start; gap: 11px; } .footer-contact svg { flex: none; margin-top: 1px; stroke: var(--c-cyan); } .footer-contact a { color: inherit; transition: color .2s; } .footer-contact a:hover { color: var(--c-cyan); } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: rgba(255, 255, 255, .5); } .site-footer__legal { display: flex; gap: 24px; } .site-footer__legal a { transition: color .2s; } .site-footer__legal a:hover { color: var(--c-cyan); } /* ===================== POSTER VIDEO (aceeași imagine) ==================== */ /* Imaginea folosită ca poster pe TOATE suprafețele video. Sursa unică este variabila --video-poster, injectată din PHP (inc/enqueue.php). */ :root { --video-poster: none; } /* video mari: hero, tratament + playlist (expertiză, autoritate, FAQ video) */ .video-card__bg, .playlist__main .video-card__bg, .tst-card__bg { background-image: var(--video-poster); background-size: cover; background-position: center; background-repeat: no-repeat; } /* cardurile „caz clinic" (posterul e direct pe card) */ .case-card { background-image: var(--video-poster); background-size: cover; background-position: center; background-repeat: no-repeat; } /* miniaturile din playlist – poster + ușoară întunecare ca iconul play să iasă */ .pl-item__thumb { background-image: var(--video-poster); background-color: rgba(8, 30, 38, .35); background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: multiply; } /* utilitare */ .text-center { text-align: center; } .mt-44 { margin-top: 44px; } .flex-center { display: flex; justify-content: center; } /* ============================ RESPONSIVE ================================ */ /* meniu burger: activ de la 1200px în jos */ @media (max-width: 1200px) { .nav-toggle { display: flex; } .tm-nav { position: fixed; inset: 78px 0 auto 0; background: #fff; border-bottom: 1px solid #eaf2f5; box-shadow: 0 20px 40px -20px rgba(16, 38, 46, .25); transform: translateY(-130%); transition: transform .3s; padding: 8px 0 16px; top: 66px; } .tm-nav.is-open { transform: translateY(0); } .tm-nav__menu { flex-direction: column; align-items: stretch; gap: 0; } .tm-nav__menu li { border-top: 1px solid #f0f5f7; } .site-header__actions {display: none;} .tm-nav__menu a { display: block; padding: 14px var(--container-pad); font-size: 16px; } /* Submeniu pe mobil: ascuns implicit, se extinde cu butonul caret */ .tm-nav__menu .menu-item-has-children > a::after { display: none; } .submenu-toggle { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; width: 56px; height: 51px; color: var(--c-ink); background: none; border: 0; cursor: pointer; z-index: 2; } .submenu-toggle svg { transition: transform .25s; } .menu-item-has-children.is-open > .submenu-toggle svg { transform: rotate(180deg); } .tm-nav__menu .sub-menu { display: none; position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; border-radius: 0; padding: 0; margin: 0; min-width: 0; background: #f7fbfc; } .tm-nav__menu .menu-item-has-children.is-open > .sub-menu { display: block; } /* anulează transform-ul de dropdown (desktop) pe hamburger menu */ .tm-nav__menu .menu-item-has-children:hover > .sub-menu, .tm-nav__menu .menu-item-has-children:focus-within > .sub-menu { transform: none; } .tm-nav__menu .sub-menu::before { display: none; } .tm-nav__menu .sub-menu li { border-top: 1px solid #eef4f6; } .tm-nav__menu .sub-menu a { padding: 12px var(--container-pad) 12px calc(var(--container-pad) + 18px); font-size: 15px; border-radius: 0; color: var(--c-muted); font-weight: 500; } .tm-nav__cta { display: block; padding: 14px var(--container-pad) 4px; border-top: 1px solid #f0f5f7; } .tm-nav__cta .btn { width: 100%; justify-content: center; } } /* Dantură fixă – hero: video-ul primul sub 1023px */ @media (max-width: 1023px) { .hero__grid > div:last-child { order: -1; } } @media (max-width: 1100px) { .split--media-text, .split--text-media { grid-template-columns: 1fr; gap: 40px; } .hero__grid { grid-template-columns: 1fr; gap: 40px; } .grid--4 { grid-template-columns: repeat(2, 1fr); } .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .price-card--popular { transform: none; } .playlist, .playlist--wide { grid-template-columns: 1fr; } .lead-doctor { grid-template-columns: 1fr; } .lead-doctor__body { padding: 0 32px 40px; } .lead-doctor__media { min-height: 320px; } .cta__grid { grid-template-columns: 1fr; padding: 40px; } .contact-grid { grid-template-columns: 1fr; } .diploma-card { width: calc((100% - 44px) / 3); } .member-card { width: calc((100% - 48px) / 3); } .site-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 760px) { :root { --space-section: 48px; --space-head: 36px; } .header-phone span, .site-header__cta-text { display: none; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .work-card__pair { grid-template-columns: 1fr 1fr; } .diploma-card { width: calc((100% - 22px) / 2); } .member-card { width: calc((100% - 24px) / 2); } .clinic-grid { grid-template-columns: repeat(2, 1fr); } .site-footer__top { grid-template-columns: 1fr; gap: 32px; } .cta__grid { padding: 30px 20px; } .tm-form, .cta .tm-form { padding: 24px; } .hero__stats { gap: 22px; } .lead-doctor__body { padding: 0 24px 32px; } } @media (max-width: 420px) { .diploma-card, .gallery-fig { width: 78vw; } .member-card { width: 100%; } /* echipa: un singur card pe ecran, fără „peek" */ .hero__stat-sep { display: none; } } /* ============================================================ */ /* PAGINA CAZURI CLINICE */ /* ============================================================ */ /* ---- Hero cu imagine full-bleed + card glass ---- */ .cazuri-hero { position: relative; overflow: hidden; } .cazuri-hero__media { position: relative; width: 100%; height: 600px; background: radial-gradient(circle at 18% 0%, rgba(0, 195, 245, .16), transparent 44%), radial-gradient(circle at 92% 96%, rgba(214, 166, 90, .10), transparent 46%), #0a212b; } .cazuri-hero__media .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cazuri-hero__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 33, 43, .62) 0%, rgba(8, 33, 43, .22) 46%, rgba(8, 33, 43, .05) 72%); pointer-events: none; } .cazuri-hero__inner { position: absolute; inset: 0; display: flex; align-items: center; } .cazuri-hero__card { position: relative; width: 720px; max-width: 92%; background: rgba(255, 255, 255, .97); border-radius: 24px; padding: 42px 44px; box-shadow: 0 30px 70px -30px rgba(16, 38, 46, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .cazuri-hero__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted-2); margin-bottom: 20px; } .cazuri-hero__crumbs a { transition: color .2s; } .cazuri-hero__crumbs a:hover { color: var(--c-cyan-700); } .cazuri-hero__crumbs span { color: var(--c-cyan-700); font-weight: 600; } .cazuri-hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; } .cazuri-hero__lead { font-size: 16.5px; line-height: 1.7; color: var(--c-body); margin-top: 18px; } .cazuri-hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .cazuri-hero__stat { position: absolute; right: 5%; bottom: 32px; display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .95); padding: 11px 18px; border-radius: 16px; box-shadow: 0 16px 40px -16px rgba(16, 38, 46, .55); font-size: 13.5px; color: var(--c-ink); } .cazuri-hero__stat strong { font-family: var(--font-head); font-weight: 700; font-size: 15px; } /* ---- Player video featured ---- */ .cazuri-player { position: relative; max-width: 1040px; margin: 0 auto; } .cazuri-player__stage { aspect-ratio: 16 / 9; border-radius: 26px; box-shadow: 0 50px 100px -42px rgba(0, 0, 0, .75); } .cazuri-player__top { position: absolute; left: 24px; right: 24px; top: 22px; display: flex; align-items: center; justify-content: space-between; color: #fff; z-index: 2; } .cazuri-player__tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .16); padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .cazuri-player__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; } .cazuri-player__count { font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: .06em; background: rgba(0, 0, 0, .32); padding: 6px 13px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .cazuri-player__count b { font-weight: 700; } .cazuri-player .video-card__play { width: 92px; height: 92px; box-shadow: 0 18px 50px rgba(0, 0, 0, .4); } .cazuri-player__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(8, 33, 43, .42); border: 1px solid rgba(255, 255, 255, .22); color: #fff; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s; z-index: 3; } .cazuri-player__arrow:hover { background: rgba(8, 33, 43, .72); } .cazuri-player__arrow--prev { left: 18px; } .cazuri-player__arrow--next { right: 18px; } .cazuri-player__caption { position: absolute; left: 30px; right: 30px; bottom: 30px; color: #fff; pointer-events: none; z-index: 2; } .cazuri-player__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.2; max-width: 88%; } .cazuri-player__meta { font-size: 14.5px; color: rgba(255, 255, 255, .82); margin-top: 9px; } .cazuri-player .video-card__bar i { background: var(--c-cyan); } /* ---- Rail de thumbnail-uri ---- */ .cazuri-rail-wrap { position: relative; max-width: 1040px; margin: 18px auto 0; } .cazuri-rail { display: flex; gap: 16px; overflow-x: auto; padding: 26px 4px 10px; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--c-cyan) rgba(255, 255, 255, .12); } .cazuri-rail::-webkit-scrollbar { height: 8px; } .cazuri-rail::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); border-radius: 8px; } .cazuri-rail::-webkit-scrollbar-thumb { background: var(--c-cyan); border-radius: 8px; } .cazuri-rail__card { flex: none; width: 226px; scroll-snap-align: start; text-align: left; background: transparent; padding: 0; transition: transform .2s; } .cazuri-rail__card.is-active { transform: translateY(-4px); } .cazuri-rail__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background-image: var(--video-poster); background-size: cover; background-position: center; outline: 3px solid transparent; outline-offset: 0; transition: box-shadow .2s, outline-color .2s; } .cazuri-rail__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 33, 43, .05), rgba(8, 33, 43, .45)); } .cazuri-rail__card.is-active .cazuri-rail__thumb { outline-color: var(--c-cyan); box-shadow: 0 16px 40px -18px rgba(0, 195, 245, .7); } .cazuri-rail__dur { position: absolute; right: 7px; bottom: 7px; z-index: 1; background: rgba(0, 0, 0, .66); color: #fff; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; } .cazuri-rail__live { position: absolute; left: 7px; top: 7px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; background: var(--c-cyan); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .cazuri-rail__live span { width: 5px; height: 5px; border-radius: 50%; background: #fff; } .cazuri-rail__card:not(.is-active) .cazuri-rail__live { display: none; } .cazuri-rail__tag { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #4ed0f5; margin: 11px 4px 4px; } .cazuri-rail__title { margin-top: 10px; display: block; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: #fff; line-height: 1.3; padding: 0 4px; } .cazuri-rail__btn { position: absolute; top: 90px; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--c-dark); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6); transition: transform .2s; } .cazuri-rail__btn:hover { transform: translateY(-50%) scale(1.08); } .cazuri-rail__btn--prev { left: -8px; } .cazuri-rail__btn--next { right: -8px; } /* ---- Carduri Înainte/După (paginate) ---- */ .case-page[hidden] { display: none; } .ba-card { border: 1px solid var(--c-line-2); border-radius: 24px; padding: 16px; background: #fff; box-shadow: 0 16px 40px -26px rgba(16, 38, 46, .4); } .ba-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ba-card__img { position: relative; aspect-ratio: 5 / 3; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #e8f1f5, #c1d2da); } .ba-card__badge { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #fff; } .ba-card__badge--before { background: rgba(22, 38, 46, .85); } .ba-card__badge--after { background: var(--c-cyan); } .ba-card__meta { display: flex; align-items: center; gap: 8px; margin: 16px 8px 6px; } .ba-card__tag { display: inline-block; background: rgba(0, 195, 245, .12); color: var(--c-cyan-700); font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; } .ba-card__dur { font-size: 12.5px; color: var(--c-muted-2); } .ba-card__title { font-family: var(--font-head); font-weight: 600; font-size: 17px; margin: 0 8px; } .ba-card__caption { font-size: 14px; line-height: 1.6; color: var(--c-body); margin: 8px 8px; } /* ---- Paginare ---- */ .case-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 46px; } .case-pager__arrow, .case-pager__num { min-width: 46px; height: 46px; border-radius: 13px; border: 1.5px solid #cfe6ee; background: #fff; color: var(--c-ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: 15px; transition: all .2s; } .case-pager__num { padding: 0 14px; } .case-pager__arrow:hover:not(:disabled), .case-pager__num:hover { border-color: var(--c-cyan); } .case-pager__num.is-active { background: var(--c-cyan); color: #fff; border-color: var(--c-cyan); box-shadow: 0 10px 24px -10px rgba(0, 195, 245, .6); } .case-pager__arrow:disabled { background: #f4f8fa; color: #bcccd2; cursor: not-allowed; } /* ---- Carduri „De ce" ---- */ .reason-card { position: relative; border: 1px solid var(--c-line-2); border-radius: 22px; padding: 32px 26px 30px; background: #fff; box-shadow: var(--shadow-card); transition: transform .3s, box-shadow .3s; } .reason-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px -28px rgba(16, 38, 46, .42); } .reason-card__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(0, 195, 245, .12); display: flex; align-items: center; justify-content: center; color: var(--c-cyan-700); margin-bottom: 22px; } .reason-card__title { font-family: var(--font-head); font-weight: 600; font-size: 19px; line-height: 1.25; } .reason-card__desc { font-size: 14.5px; line-height: 1.65; color: var(--c-body); margin-top: 10px; } /* ---- CTA contact (listă) ---- */ .cta-contact { display: flex; flex-direction: column; gap: 14px; } .cta-contact__item { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; padding: 16px 18px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; transition: background .2s; } a.cta-contact__item:hover { background: rgba(255, 255, 255, .2); } /* item-ul întreg e link (email/adresă) → valoarea reacționează la hover ca la telefoane */ a.cta-contact__item:hover .cta-contact__val { text-decoration: underline; opacity: .85; } .cta-contact__ico { flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; color: #fff; } .cta-contact__label { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .78); } .cta-contact__val { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: #fff; line-height: 1.45; } .cta-contact__val a { color: inherit; text-decoration: none; transition: opacity .2s; } .cta-contact__val a:hover { text-decoration: underline; opacity: .85; } .tm-form-wrap { background: #fff; border-radius: 22px; padding: 32px; box-shadow: 0 30px 60px -30px rgba(16, 38, 46, .4); } .tm-form-wrap__title { font-family: var(--font-head); font-weight: 700; font-size: 21px; margin-bottom: 6px; } .tm-form-wrap__sub { font-size: 14px; color: var(--c-muted); margin-bottom: 20px; } .tm-form-wrap .tm-form, .tm-form-wrap .wpcf7 { padding: 0; border: 0; box-shadow: none; background: none; } /* ---- Popup contact (deschis din butoanele „Programează-te" / CTA) ---- */ .tm-modal[hidden] { display: none; } .tm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .tm-modal__overlay { position: absolute; inset: 0; background: rgba(11, 34, 44, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: tmModalFade .2s ease; } .tm-modal__dialog { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 48px); overflow-y: auto; background: #fff; border-radius: var(--radius); padding: 34px 32px 32px; box-shadow: 0 40px 80px -30px rgba(16, 38, 46, .55); animation: tmModalPop .24s cubic-bezier(.2, .8, .3, 1); } .tm-modal__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--c-surface-alt); color: var(--c-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s; } .tm-modal__close:hover { background: var(--c-red); color: #fff; } .tm-modal__head { margin-bottom: 20px; padding-right: 32px; } .tm-modal__title { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--c-ink); } .tm-modal__sub { font-size: 14px; color: var(--c-muted); margin: 8px 0 0; } .tm-modal .tm-form-cf7, .tm-modal .tm-form, .tm-modal .wpcf7 { padding: 0; border: 0; box-shadow: none; background: none; } body.tm-modal-open { overflow: hidden; } @keyframes tmModalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes tmModalPop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tm-modal__overlay, .tm-modal__dialog { animation: none; } } /* ---- Widget flotant contact rapid (jos-centru) ---- */ .float-cta { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9; display: flex; align-items: stretch; gap: 12px; max-width: calc(100% - 24px); } .float-cta__btn { flex: 0 0 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 10px 26px; border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.2; text-align: center; color: #fff; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(16, 38, 46, .55); transition: transform .2s, filter .2s; } .float-cta__btn svg { flex: none; } .float-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.06); } .float-cta__btn--call { background: var(--c-cyan); } .float-cta__btn--wa { background: #25d366; } @media (max-width: 480px) { .float-cta { bottom: 12px; gap: 8px; } .float-cta__btn { font-size: 13px; gap: 7px; padding: 9px 10px; min-height: 50px; } .float-cta__btn svg { width: 18px; height: 18px; } } @media (prefers-reduced-motion: reduce) { .float-cta__btn { transition: none; } } @media (max-width: 1100px) { .cazuri-hero__media { height: 560px; } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .cazuri-hero__media { height: auto; min-height: 520px; } .cazuri-hero__inner { position: relative; padding-top: 40px; padding-bottom: 40px; } .cazuri-hero__media { position: absolute; inset: 0; height: 100%; } .cazuri-hero__stat { display: none; } .grid--3 { grid-template-columns: 1fr; } .cta__grid--top { grid-template-columns: 1fr; } .cazuri-rail__btn { display: none; } } /* ============================================================ */ /* PAGINA TESTIMONIALE */ /* ============================================================ */ /* Hero Testimoniale: „scena" cu imaginea/cardul e izolată de bandă, ca overlay-ul și cardul să acopere DOAR imaginea (nu și marquee-ul de dedesubt). */ .testi-hero { padding-bottom: 64px; } .testi-hero__stage { position: relative; } /* ---- Banda animată (marquee) din hero ---- */ .testi-strip { margin-top: 58px; padding-bottom: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); overflow: hidden; } .testi-strip .mq-track { display: flex; gap: 20px; width: max-content; animation: marqueeX 44s linear infinite; } .testi-strip:hover .mq-track { animation-play-state: paused; } @keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(-50%); } } .testi-strip__tile { flex: none; width: 230px; margin: 0; position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px -28px rgba(16, 38, 46, .45); cursor: pointer; transition: transform .3s, box-shadow .3s; } .testi-strip__tile:hover { transform: translateY(-8px); box-shadow: 0 26px 50px -24px rgba(16, 38, 46, .5); } .testi-strip__img { position: absolute; inset: 0; background-size: cover; background-position: center; } .testi-strip__play { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .testi-strip__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 54%, rgba(6, 24, 31, .66) 100%); } .testi-strip__cap { position: absolute; left: 14px; right: 14px; bottom: 13px; color: #fff; } .testi-strip__name { display: block; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; line-height: 1.25; } .testi-strip__treat { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .82); margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .testi-strip .mq-track { animation: none; } } /* badge stele din chip-ul hero */ .testi-hero__stars { color: #f5a623; font-size: 15px; letter-spacing: 1px; } .cazuri-hero__stat strong { font-size: inherit; } /* ---- Galerie foto serviciu (3 pe rând) ---- */ .service-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .service-gallery__item { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #dcebf1, #a7d0de); box-shadow: 0 16px 40px -28px rgba(16, 38, 46, .45); transition: transform .35s; } .service-gallery__item:hover { transform: translateY(-6px); } .service-gallery__item .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 780px) { .service-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .service-gallery { grid-template-columns: 1fr; } } /* ---- Pagina Despre noi ---- */ .about-split { align-items: center; gap: 48px; } .about-figure { height: 100%; min-height: 420px; box-shadow: 0 30px 70px -34px rgba(16, 38, 46, .5); } .about-facilities__title { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--c-ink); margin: 28px 0 14px; } .about-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .about-facilities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } .about-facilities li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--c-ink-2); } .about-facilities__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(0, 195, 245, .12); color: var(--c-cyan-700); margin-top: 1px; } @media (max-width: 640px) { .about-split { gap: 30px; } } /* ---- Galerie simplă paginată (Testimoniale: „Pacienți fericiți") ---- */ .gallery-simple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .gallery-simple__item { position: relative; margin: 0; aspect-ratio: 3 / 3; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #dcebf1, #a7d0de); box-shadow: 0 16px 40px -28px rgba(16, 38, 46, .45); transition: transform .35s; } .gallery-simple__item:hover { transform: translateY(-6px); } .gallery-simple__item .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 780px) { .gallery-simple { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .gallery-simple { grid-template-columns: 1fr; } } /* Rail-ul video pe fundal deschis (secțiune --plain): etichete lizibile. */ .section--plain .cazuri-rail__title { color: var(--c-ink); } .section--plain .cazuri-rail__tag { color: var(--c-cyan-700); } /* Listele (ul) din conținutul serviciului: bullet înlocuit cu bifă (check). */ .service-content ul { list-style: none; margin: 16px 0; padding-left: 0; } .service-content ul li { position: relative; padding-left: 32px; } .service-content ul li::marker { content: ""; } .service-content ul li::before { content: ""; position: absolute; left: 0; top: .18em; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300c3f5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain; } /* ---- Galerie foto (grid masonry) ---- */ .photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 18px; } .photo-tile { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #dcebf1, #a7d0de); box-shadow: 0 16px 40px -28px rgba(16, 38, 46, .45); transition: transform .35s; } .photo-tile:hover { transform: translateY(-6px); } .photo-tile--tall { grid-row: span 2; } .photo-tile--wide { grid-column: span 2; } .photo-tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(6, 24, 31, .62) 100%); } .photo-tile__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; } .photo-tile__tag { display: inline-block; background: rgba(255, 255, 255, .92); color: var(--c-cyan-700); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; } .photo-tile__name { display: block; font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.3; } .footer-col.col-2 {transform: translateX(15%);} /* ---- Recenzii (grilă cu carduri de înălțime EGALĂ) ---- */ .reviews-slider { position: relative; } .reviews-track { gap: 24px; } .reviews-track .rev-card { width: calc((100% - 48px) / 3); } /* 3 pe rând (avansează câte 2) */ .reviews-nav { justify-content: center;} .rev-card { display: flex; flex-direction: column; border: 1px solid var(--c-line-2); border-radius: 22px; padding: 26px; background: #fff; box-shadow: 0 12px 30px -24px rgba(16, 38, 46, .4); } .rev-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .rev-card__plat { display: flex; align-items: center; gap: 10px; } .rev-card__plat span { font-size: 13px; font-weight: 600;} .rev-card__stars { color: #f5a623; font-size: 15px; letter-spacing: 1px; } /* înălțime fixă + scroll vertical => toate cardurile au aceeași înălțime, indiferent dacă recenzia are 5 sau 20 de rânduri. */ .rev-card__text { font-size: 15px; line-height: 1.65; color: #445660; height: 122px; overflow-y: auto; padding-right: 10px; } .rev-card__who { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef4f6; } .rev-card__ava { width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 195, 245, .14); display: flex; align-items: center; justify-content: center; color: var(--c-cyan-link); flex: none; overflow: hidden; } .rev-card__ava img { width: 22px; height: 22px; object-fit: contain;border-radius: 99px } .rev-card__name { font-size: 14px; font-weight: 600; } .rev-card__sub { font-size: 12px; color: var(--c-muted-2); } #programare .cta__grid {align-items: center;} @media (max-width: 1100px) { .reviews-track .rev-card { width: calc((100% - 24px) / 2); } /* 2 pe rând */ .photo-grid { grid-template-columns: repeat(2, 1fr); } .photo-tile--wide { grid-column: span 2; } } @media (max-width: 760px) { .reviews-track .rev-card { width: 100%; } /* 1 pe rând */ .photo-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } .photo-tile--wide { grid-column: span 2; } .photo-tile--tall { grid-row: span 2; } .testi-strip__tile { width: 170px; } } /* ============================================================ */ /* PAGINA SERVICII + serviciu single */ /* ============================================================ */ /* ---- Card featured (Dantură Fixă) ---- */ .featured-service { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--c-line); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -36px rgba(16, 38, 46, .4); margin-bottom: 30px; } /* Imaginea e linkul către serviciu (singurul element clicabil al cardului). */ .featured-service__media { position: relative; display: block; min-height: 420px; background: linear-gradient(135deg, #d3edf8, #8fcfeb); } .featured-service__flag { position: absolute; left: 24px; top: 24px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; background: var(--c-red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; } .featured-service__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; } .featured-service__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .featured-service__ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(0, 195, 245, .12); color: var(--c-cyan-700); flex: none; } .featured-service__eyebrow > span:last-child { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-cyan-700); } .featured-service__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.02em; transition: color .2s; } /* Hover pe imagine (linkul) → titlul devine albastru. Media precede body în DOM. */ .featured-service__media:hover ~ .featured-service__body .featured-service__title { color: var(--c-cyan-link); } .featured-service__text { font-size: 16.5px; line-height: 1.72; color: var(--c-body); margin-top: 16px; } .featured-service__cta { align-self: flex-start; margin-top: 28px; } /* ---- Grilă servicii ---- */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .service-card { display: flex; flex-direction: column; border: 1px solid var(--c-line-2); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px -24px rgba(16, 38, 46, .4); transition: transform .3s, box-shadow .3s; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 28px 54px -30px rgba(16, 38, 46, .42); } .service-card__media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #d3edf8, #8fcfeb); } .service-card__icon { position: absolute; left: 18px; top: 18px; z-index: 1; width: 48px; height: 48px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--c-cyan-700); box-shadow: 0 8px 20px rgba(16, 38, 46, .14); } .service-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; } .service-card__title { font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 1.25; } .service-card__text { font-size: 14.5px; line-height: 1.65; color: var(--c-body); margin-top: 10px; flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .service-card__link { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-top: 22px; color: var(--c-cyan-700); font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: 999px; background: #eef7fa; transition: all .2s; } .service-card__link:hover { background: var(--c-cyan); color: #fff; transform: translateY(-2px); } /* ---- Blog ---- */ .blog-hero { background: radial-gradient(circle at 18% 0%, rgba(0, 195, 245, .16), transparent 44%), radial-gradient(circle at 92% 96%, rgba(214, 166, 90, .10), transparent 46%), #0a212b; color: #fff; text-align: center; padding: 96px 0; } .blog-hero__title { font-family: var(--font-head); font-weight: 800; font-size: 54px; line-height: 1.1; margin: 0; color: #fff; } .post-card__date { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-cyan-700); margin-bottom: 8px; } .blog-empty { text-align: center; font-size: 17px; color: var(--c-muted); padding: 40px 0; } /* Paginare */ .blog-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 52px; } .blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 12px; color: var(--c-ink); font-weight: 600; font-size: 15px; text-decoration: none; transition: all .2s; } .blog-pagination .page-numbers:hover:not(.current):not(.dots) { border-color: var(--c-cyan-700); color: var(--c-cyan-700); } .blog-pagination .page-numbers.current { background: var(--c-cyan-700); border-color: var(--c-cyan-700); color: #fff; } .blog-pagination .page-numbers.dots { border: 0; } @media (max-width: 640px) { .blog-hero { padding: 64px 0; } .blog-hero__title { font-size: 38px; } } /* ---- Articol (single post) ---- */ .post-hero { background: radial-gradient(circle at 18% 0%, rgba(0, 195, 245, .16), transparent 44%), radial-gradient(circle at 92% 96%, rgba(214, 166, 90, .10), transparent 46%), #0a212b; color: #fff; text-align: center; padding: 84px 0 68px; } .post-hero__crumbs { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; margin-bottom: 20px; color: rgba(255, 255, 255, .7); } .post-hero__crumbs a { color: rgba(255, 255, 255, .7); text-decoration: none; transition: color .2s; } .post-hero__crumbs a:hover { color: #fff; } .post-hero__crumb-current { color: #fff; } .post-hero__title { font-family: var(--font-head); font-weight: 800; font-size: 44px; line-height: 1.15; margin: 0 auto; color: #fff; } .post-hero__meta { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, .68); } .post-hero__meta a { color: inherit; text-decoration: underline; } .post-cover { max-width: 900px; margin: -44px auto 44px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-pop); } .post-cover img { display: block; width: 100%; height: auto; } .post-content { max-width: 820px; margin: 0 auto; } .post-content > :first-child { margin-top: 0; } .post-content p { font-size: 17px; line-height: 1.75; color: var(--c-body); margin: 0 0 18px; } .post-content h2 { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.25; margin: 38px 0 14px; color: var(--c-ink); } .post-content h3 { font-family: var(--font-head); font-weight: 600; font-size: 22px; line-height: 1.3; margin: 30px 0 12px; color: var(--c-ink); } .post-content h4 { font-family: var(--font-head); font-weight: 600; font-size: 18px; margin: 24px 0 10px; color: var(--c-ink); } .post-content a { color: var(--c-cyan-link); text-decoration: underline; word-wrap: break-word; } .post-content a:hover { color: var(--c-cyan-700); } .post-content ul, .post-content ol { margin: 0 0 18px; padding-left: 24px; font-size: 17px; line-height: 1.75; color: var(--c-body); } .post-content li { margin-bottom: 8px; } .post-content img { margin: auto; max-width: 100%; height: auto; border-radius: 14px; } .post-content figure { margin: 26px 0; } .post-content figcaption { font-size: 13.5px; color: var(--c-muted); text-align: center; margin-top: 8px; } .post-content blockquote { margin: 26px 0; padding: 16px 24px; border-left: 4px solid var(--c-cyan); background: var(--c-surface-alt); border-radius: 0 12px 12px 0; font-size: 17px; font-style: italic; color: var(--c-ink-2); } .post-content blockquote p:last-child { margin-bottom: 0; } .post-tags { max-width: 820px; margin: 32px auto 0; display: flex; flex-wrap: wrap; gap: 8px; } .post-tags a { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--c-cyan-700); background: #eef7fa; padding: 6px 14px; border-radius: 999px; text-decoration: none; transition: all .2s; } .post-tags a:hover { background: var(--c-cyan); color: #fff; } .post-pagelinks { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; font-weight: 600; } .post-back { max-width: 820px; margin: 40px auto 0; } .post-back .btn svg { margin-right: 2px; } @media (max-width: 640px) { .post-hero { padding: 60px 0 52px; } .post-hero__title { font-size: 32px; } .post-cover { margin: -28px auto 32px; } } /* ---- Conținut serviciu (single) ---- */ .service-content { max-width: 820px; margin: 0 auto; } .service-content h2 { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.2; margin: 32px 0 14px; } .service-content h3 { font-family: var(--font-head); font-weight: 600; font-size: 22px; margin: 26px 0 12px; } .service-content p { font-size: 16px; line-height: 1.72; color: var(--c-body); margin-bottom: 16px; } .service-content ul, .service-content ol { margin: 0 0 18px; padding-left: 22px; color: var(--c-body); } .service-content li { margin-bottom: 8px; line-height: 1.6; } .service-content img { border-radius: 16px; margin: 18px 0; } .service-content a { color: var(--c-cyan-700); text-decoration: underline; } @media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .featured-service { grid-template-columns: 1fr; } .featured-service__media { min-height: 280px; } .footer-col.col-2 { transform: translateX(0%); } } @media (max-width: 760px) { .services-grid { grid-template-columns: 1fr; } .featured-service__body { padding: 32px 24px; } } /* ============================================================ */ /* PAGINA CONTACTE */ /* ============================================================ */ /* ---- Hero full-bleed ---- */ .contact-hero { position: relative; min-height: 540px; height: 55vh; max-height: 760px; overflow: hidden; } .contact-hero__media { position: absolute; inset: 0; background: radial-gradient(circle at 18% 0%, rgba(0, 195, 245, .16), transparent 44%), radial-gradient(circle at 92% 96%, rgba(214, 166, 90, .10), transparent 46%), #0a212b; } .contact-hero__media .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .contact-hero__overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(8, 33, 43, .84) 0%, rgba(8, 33, 43, .52) 48%, rgba(10, 147, 189, .36) 100%); } .contact-hero__dots { position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .05) 1.2px, transparent 1.3px) 0 0 / 26px 26px; pointer-events: none; } .contact-hero__inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; } .contact-hero__content { max-width: 760px; } .contact-hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 4.8vw, 56px); line-height: 1.2; letter-spacing: -.02em; color: #fff;} .contact-hero__lead { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .88); margin-top: 20px;} .contact-hero__actions { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; } .contact-hero__ghost { color: #fff; border: 1.5px solid rgba(255, 255, 255, .4); background: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .contact-hero__ghost:hover { background: rgba(255, 255, 255, .12); } /* ---- Carduri date de contact ---- */ .info-card { display: block; border: 1px solid var(--c-line-2); border-radius: 22px; padding: 30px 28px; background: #fff; box-shadow: 0 12px 30px -24px rgba(16, 38, 46, .4); transition: transform .3s, box-shadow .3s; } a.info-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px -28px rgba(16, 38, 46, .42); } .info-card__ico { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(0, 195, 245, .12); color: var(--c-cyan-700); margin-bottom: 20px; } .info-card__title { font-family: var(--font-head); font-weight: 600; font-size: 18px; } .info-card__text { font-size: 15px; line-height: 1.6; color: var(--c-body); margin-top: 8px; } .info-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--c-cyan-700); margin-top: 14px; } .info-card__hours { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .info-card__hours > div { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--c-body); } .info-card__hours b { font-weight: 600; color: var(--c-ink); } .info-card__hours b.is-closed { color: #c0494d; } /* ---- Card Telefon: numere separate (mobil + fix), fiecare link propriu ---- */ .info-card__phones { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .info-card__phone { display: flex; align-items: center; gap: 10px; color: var(--c-ink); font-weight: 600; transition: color .2s; } .info-card__phone:hover { color: var(--c-cyan-700); } .info-card__phone-type { flex: none; min-width: 46px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; padding: 3px 8px; border-radius: 999px; } .info-card__phone--mobil .info-card__phone-type { background: var(--c-cyan-700); } .info-card__phone--fix .info-card__phone-type { background: var(--c-muted); } .info-card__phone-num { font-size: 16px; } /* ---- Socials ---- */ .contact-socials { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; flex-wrap: wrap; } .contact-socials__label { font-size: 15px; font-weight: 600; } .contact-socials__list { display: flex; gap: 14px; flex-wrap: wrap; } .social-pill { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--c-line); border-radius: 999px; padding: 11px 20px 11px 14px; font-size: 14.5px; font-weight: 600; color: var(--c-ink); box-shadow: 0 10px 26px -22px rgba(16, 38, 46, .4); transition: all .2s; } .social-pill:hover { transform: translateY(-2px); } .social-pill--fb:hover { border-color: #1877F2; color: #1877F2; } .social-pill--ig:hover { border-color: #E1306C; color: #E1306C; } .social-pill--yt:hover { border-color: #FF0000; color: #FF0000; } .social-pill__ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; } .social-pill--fb .social-pill__ico { background: #1877F2; } .social-pill--yt .social-pill__ico { background: #FF0000; } .social-pill__ico--ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } /* ---- Thank you (confirmare formular) ---- */ .thankyou { text-align: center; max-width: 720px; margin: 0 auto; } .thankyou__icon { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: rgba(0, 195, 245, .12); color: var(--c-cyan-700); margin-bottom: 26px; } .thankyou__icon svg { width: 48px; height: 48px; } .thankyou__title, .thankyou__content h1, .thankyou__content h2 { font-family: var(--font-head); font-weight: 700; font-size: 48px; line-height: 1.15; color: var(--c-ink); margin: 0 0 16px; } .thankyou__text, .thankyou__content p { font-size: 18px; line-height: 1.65; color: var(--c-body); margin: 0 auto 32px; max-width: 600px; } .thankyou__content > *:last-child { margin-bottom: 32px; } @media (max-width: 640px) { .thankyou__title, .thankyou__content h1, .thankyou__content h2 { font-size: 30px; } .thankyou__text, .thankyou__content p { font-size: 16px; } } /* Utilitar accesibilitate: text vizibil doar pentru cititoare de ecran. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Pagini legale (Termeni, Confidențialitate) ---- */ .legal__container { max-width: 860px; } .legal__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted-2); margin-bottom: 22px; } .legal__crumbs a { color: var(--c-muted); transition: color .2s; } .legal__crumbs a:hover { color: var(--c-cyan); } .legal__crumbs svg { flex: none; } .legal__eyebrow { margin-bottom: 14px; } .legal__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 5vw, 44px); line-height: 1.12; color: var(--c-ink); margin: 0 0 12px; } .legal__updated { font-size: 14px; color: var(--c-muted); margin: 0 0 28px; padding-bottom: 28px; border-bottom: 1px solid var(--c-line); } .legal__body { margin-top: 4px; } /* ---- Pagina 404 ---- */ .error404__inner { text-align: center; max-width: 720px; margin: 0 auto; } .error404__code { font-family: var(--font-head); font-weight: 800; font-size: clamp(96px, 22vw, 200px); line-height: .9; letter-spacing: -.04em; background: linear-gradient(135deg, var(--c-cyan), var(--c-cyan-700)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 6px; } .error404__eyebrow { justify-content: center; margin-bottom: 16px; } .error404__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 5vw, 40px); line-height: 1.15; color: var(--c-ink); margin: 0 0 14px; } .error404__text { font-size: 18px; line-height: 1.65; color: var(--c-body); margin: 0 auto 30px; max-width: 560px; } .error404__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 34px; } .error404__search { display: flex; gap: 10px; max-width: 460px; margin: 0 auto 36px; } .error404__search input[type="search"] { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--c-line); background: #fff; font-family: var(--font-body); font-size: 15px; color: var(--c-ink); transition: border-color .2s; } .error404__search input[type="search"]:focus { outline: none; border-color: var(--c-cyan); } .error404__search button { flex: none; } .error404__links { border-top: 1px solid var(--c-line); padding-top: 26px; } .error404__links-label { display: block; font-size: 14px; color: var(--c-muted); margin-bottom: 14px; } .error404__links-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .error404__link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #eef7fa; color: var(--c-cyan-700); font-family: var(--font-head); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .2s, transform .2s; } .error404__link:hover { background: #e0f1f7; transform: translateY(-2px); } @media (max-width: 640px) { .error404__text { font-size: 16px; } .error404__search { flex-direction: column; } .error404__search button { width: 100%; } } /* ---- Formular + hartă ---- */ .contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; } .contact-form-wrap { padding: 36px; } .contact-map--tall { margin-top: 0; min-height: 470px; } .contact-map--tall iframe { height: 100%; min-height: 480px; position: absolute; inset: 0; } .contact-map__card { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 18px 40px -20px rgba(16, 38, 46, .5); pointer-events: none; } .contact-map__card-ico { flex: none; width: 46px; height: 46px; border-radius: 13px; background: rgba(0, 195, 245, .12); display: flex; align-items: center; justify-content: center; color: var(--c-cyan-700); } .contact-map__card-name { font-family: var(--font-head); font-weight: 600; font-size: 16px; } .contact-map__card-addr { font-size: 13.5px; color: var(--c-muted); } @media (max-width: 1100px) { .contact-form-grid { grid-template-columns: 1fr; } .contact-map--tall { min-height: 380px; } } @media (max-width: 760px) { .contact-form-wrap { padding: 24px; } } /* ============================================================ */ /* PAGINA PREȚURI */ /* ============================================================ */ .price-card__per { font-size: 14px; font-weight: 500; opacity: .6; margin-bottom: 9px; } .price-note { text-align: center; font-size: 13.5px; color: #92a2a8; margin: 28px auto 0; max-width: 760px; } /* CTA „Tratamente Pedodonție" → tarifele de pe ToldiKids (link extern). */ .kids-cta { display: flex; align-items: center; gap: 22px; margin-top: 36px; padding: 26px 30px; background: linear-gradient(120deg, rgba(0, 195, 245, .09), rgba(0, 195, 245, .03)); border: 1px solid #cfe9f2; border-radius: 22px; } .kids-cta__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: #fff; color: var(--c-cyan-700); box-shadow: 0 10px 26px -18px rgba(16, 38, 46, .55); } .kids-cta__body { flex: 1; min-width: 0; } .kids-cta__title { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -.01em; } .kids-cta__text { font-size: 15px; line-height: 1.6; color: var(--c-body); margin-top: 6px; } .kids-cta__btn { flex: none; gap: 10px; } @media (max-width: 760px) { .kids-cta { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; } .kids-cta__btn { width: 100%; justify-content: center; } } /* ---- Acordeon prețuri ---- */ .price-acc { display: flex; flex-direction: column; gap: 16px; } .price-group { border: 1px solid var(--c-line-2); border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 12px 30px -26px rgba(16, 38, 46, .4); transition: box-shadow .25s, border-color .25s; } .price-group.is-open { border-color: #cfe9f2; box-shadow: 0 22px 48px -30px rgba(16, 38, 46, .5); } .price-group__head { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; padding: 22px 26px; background: transparent; } .price-group__ico { flex: none; width: 50px; height: 50px; border-radius: 14px; background: rgba(0, 195, 245, .12); display: flex; align-items: center; justify-content: center; color: var(--c-cyan-700); } .price-group__meta { flex: 1; min-width: 0; } .price-group__title { display: block; font-family: var(--font-head); font-weight: 600; font-size: 19px; color: var(--c-ink); } .price-group__sub { display: block; font-size: 13.5px; color: var(--c-muted-2); margin-top: 3px; } .price-group__chev { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #f0f7fa; color: var(--c-cyan-700); transition: transform .3s, background .2s, color .2s; } .price-group.is-open .price-group__chev { transform: rotate(180deg); background: var(--c-cyan); color: #fff; } .price-group__panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .price-group__list { padding: 4px 26px 26px; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; border-top: 1px solid #eef4f6; margin-top: 0; } .price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #f1f6f8; } .price-row__name { font-size: 15px; line-height: 1.4; color: #445660; } .price-row__val { flex: none; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--c-ink); white-space: nowrap; } @media (max-width: 760px) { .price-group__list { grid-template-columns: 1fr; column-gap: 0; } .price-group__head { padding: 18px 18px; gap: 14px; } } /* ============================================================ */ /* PAGINA HOME (Acasă) */ /* ============================================================ */ /* ---- Hero slider ---- */ .home-hero { position: relative; height: 740px; overflow: hidden; background: var(--c-dark); } .home-hero__slide { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity 1s ease; pointer-events: none; } .home-hero__slide.is-active { opacity: 1; z-index: 2; pointer-events: auto; } .home-hero__media { position: absolute; inset: 0; } .home-hero__media .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .home-hero__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 33, 43, .82) 0%, rgba(8, 33, 43, .5) 46%, rgba(8, 33, 43, .12) 78%); } .home-hero__inner { position: relative; height: 100%; display: flex; align-items: center; padding: 0 110px} .home-hero__content { max-width: 800px; } .home-hero__badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .home-hero__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-cyan); } .home-hero__badge--red { background: rgba(236, 31, 37, .9); border-color: transparent; } .home-hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.02em; color: #fff; text-wrap: balance; } .home-hero__lead { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .9); margin-top: 20px; max-width: 520px; } .home-hero__actions { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; } .home-hero__ghost { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .home-hero__ghost:hover { background: rgba(255, 255, 255, .24); } .home-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s; } .home-hero__arrow:hover { background: rgba(255, 255, 255, .3); } .home-hero__arrow--prev { left: 24px; } .home-hero__arrow--next { right: 24px; } .home-hero__dots { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 20; display: flex; gap: 10px; } .home-hero__dots button { height: 10px; width: 10px; border-radius: 999px; background: rgba(255, 255, 255, .45); transition: all .3s; } .home-hero__dots button.is-active { width: 30px; background: #fff; } /* ---- Antet de secțiune cu link în dreapta ---- */ .home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; } .home-head > div:first-child { max-width: 680px; } /* ---- Carduri „De ce" ---- */ .why-card { border: 1px solid var(--c-line-2); border-radius: 22px; padding: 30px 28px; background: #fff; box-shadow: var(--shadow-card); transition: transform .3s, box-shadow .3s; } .why-card:hover { transform: translateY(-6px); box-shadow: 0 28px 54px -30px rgba(16, 38, 46, .42); } .why-card__ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(0, 195, 245, .12); color: var(--c-cyan-700); margin-bottom: 20px; } .why-card__title { font-family: var(--font-head); font-weight: 600; font-size: 19px; line-height: 1.25; } .why-card__text { font-size: 14.5px; line-height: 1.65; color: var(--c-body); margin-top: 10px; } @media (max-width: 640px) { .why-card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } .why-card__ico { margin-bottom: 0; } .why-card__text { grid-column: 1 / -1; } } /* ---- Carduri tehnologii (dark) ---- */ .tech-card { border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; padding: 28px 26px; background: rgba(255, 255, 255, .04); transition: background .3s, transform .3s; } .tech-card:hover { background: rgba(255, 255, 255, .08); transform: translateY(-6px); } .tech-card__ico { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 15px; background: rgba(0, 195, 245, .16); color: #4fd2f5; margin-bottom: 20px; } .tech-card__title { font-family: var(--font-head); font-weight: 600; font-size: 18px; line-height: 1.25; color: #fff; } .tech-card__text { font-size: 14px; line-height: 1.62; color: rgba(255, 255, 255, .6); margin-top: 10px; } /* ---- Promo dantură fixă ---- */ .promo { display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; align-items: stretch; } .promo__media { position: relative; height: 100%; min-height: 420px; border-radius: 26px; box-shadow: 0 40px 80px -34px rgba(16, 38, 46, .5); } .promo__play { width: 88px; height: 88px; color: var(--c-cyan-700); } .promo__ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .6); animation: pulseRing 2.4s ease-out infinite; pointer-events: none; } .promo__badge { position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 9px; background: rgba(8, 33, 43, .65); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .promo__live { width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); } .promo__tags { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .promo__tico { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: rgba(0, 195, 245, .12); color: var(--c-cyan-700); } .promo__flag { display: inline-flex; align-items: center; gap: 8px; background: var(--c-red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; } .promo__checks { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .promo__checks li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--c-ink); } .promo__checks span { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 195, 245, .14); color: var(--c-cyan-700); } /* ---- Review + before/after ---- */ .home-review { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; background: #fff; border: 1px solid #e6f0f4; border-radius: 30px; padding: 42px; box-shadow: 0 30px 70px -40px rgba(16, 38, 46, .45); } .home-review__ba { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--c-line-2); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 54px -30px rgba(16, 38, 46, .5); } .home-review__img { position: relative; aspect-ratio: 3 / 3; } .home-review__badge { position: absolute; top: 12px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; color: #fff; } .home-review__badge--before { left: 12px; background: rgba(16, 38, 46, .8); } .home-review__badge--after { right: 12px; background: var(--c-cyan); } .home-review__stars { color: #f5a623; font-size: 20px; letter-spacing: 2px; margin-bottom: 18px; } .home-review__quote { font-family: var(--font-head); font-weight: 500; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.5; letter-spacing: -.01em; text-wrap: balance; margin: 0; } .home-review__author { display: flex; align-items: center; gap: 14px; margin-top: 26px; } .home-review__ava { flex: none; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #0a93bd, #00c3f5); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 19px; } .home-review__name { font-family: var(--font-head); font-weight: 600; font-size: 16.5px; } .home-review__role { font-size: 13.5px; color: var(--c-muted); } .home-review__link { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; color: var(--c-cyan-700); font-weight: 600; font-size: 15px; } /* ---- Timeline etape ---- */ /* Nota de sub grila de etape (componenta „Etape tratament"). */ .steps-note { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--c-ink); margin-top: 30px; } /* ---- CTA butoane (home) ---- */ .cta__buttons { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .cta__btn-white { background: #fff; color: var(--c-cyan-700); box-shadow: 0 14px 30px rgba(0, 0, 0, .14); } .cta__btn-white:hover { transform: translateY(-3px); } .cta__btn-ghost { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); color: #fff; } .cta__btn-ghost:hover { background: rgba(255, 255, 255, .26); } .playlist__main-views { font-size: 14px; color: rgba(255, 255, 255, .8); margin-top: 8px; } /* ---- Doctor ---- */ .doctor { display: grid; grid-template-columns: .82fr 1.18fr; gap: 52px; align-items: center; } .doctor__media { position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -34px rgba(16, 38, 46, .5); } .doctor__media .ph-img {object-position: 50% 15%; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .doctor__flag { position: absolute; left: 20px; top: 20px; z-index: 3; background: var(--c-red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 8px 15px; border-radius: 999px; } /* Fotografia medicului devine clicabilă când are video (se deschide în popup). */ .doctor__media--video { cursor: pointer; } .doctor__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(6, 24, 31, .55) 100%); transition: background .3s; } .doctor__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 74px; height: 74px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--c-cyan-link); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 34px rgba(0, 0, 0, .32); transition: transform .25s, background .25s; } .doctor__media--video:hover .doctor__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; } .doctor__media--video:hover .doctor__shade { background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(6, 24, 31, .6) 100%); } .doctor__badge { position: absolute; left: -24px; bottom: 30px; display: flex; align-items: center; gap: 12px; background: #fff; padding: 14px 20px 14px 16px; border-radius: 18px; box-shadow: 0 22px 50px -22px rgba(16, 38, 46, .5); } .doctor__badge-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(0, 195, 245, .12); color: var(--c-cyan-700); } .doctor__badge b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 16px; } .doctor__badge i { display: block; font-size: 13px; color: var(--c-muted); font-style: normal; } .doctor__role { font-size: 16px; color: var(--c-cyan-700); font-weight: 600; margin-top: 8px; } .doctor__chips { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; } .doctor__chip { min-width: 210px; display: flex; align-items: center; gap: 11px; background: #f6fbfd; border: 1px solid var(--c-line-2); border-radius: 14px; padding: 14px 18px; font-size: 14px; font-weight: 600; line-height: 1.4; } .doctor__chip i { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(0, 195, 245, .12); color: var(--c-cyan-700); } .member-card__flag { position: absolute; left: 14px; top: 14px; background: var(--c-red); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .page-template-template-despre #contact {padding-top: 0;} .page-template-template-despre #echipa {padding-top: 30px;} @media (max-width: 1100px) { .promo, .home-review, .doctor { grid-template-columns: 1fr; gap: 34px; } .doctor__badge { left: 16px; } } @media (max-width: 760px) { .home-hero { height: 560px; } .home-hero__arrow { display: none; } .grid--4 { grid-template-columns: 1fr; } .steps-note { font-size: 15px; } .home-review__ba { grid-template-columns: 1fr 1fr; } .home-head { gap: 18px; } } /* ---- Callout „Dinți provizorii în aceeași zi" (USP) ---- */ .promo__highlight { display: flex; align-items: center; gap: 13px; margin-top: 20px; background: rgba(0, 195, 245, .1); border: 1px solid rgba(0, 195, 245, .28); border-radius: 16px; padding: 15px 18px; font-size: 15px; line-height: 1.5; color: var(--c-ink); } .promo__highlight-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-cyan); color: #fff; box-shadow: 0 10px 22px -8px rgba(0, 195, 245, .6); } .promo__highlight strong { font-family: var(--font-head); font-weight: 700; color: var(--c-cyan-700); } .submit_butt {position: relative;} .wpcf7-spinner{position: absolute; left: 0; top: 11px} .intl-tel-input.separate-dial-code .selected-dial-code {font-size: 14px;padding-left: 25px;} .iti-flag.ro{height: 12px;width: 18px} .intl-tel-input.separate-dial-code .selected-flag {border-top-left-radius: 12px;border-bottom-left-radius: 12px;} .page-template-template-cazuri-clinice #dece {padding-bottom: 10px;} .page-template-template-preturi #servicii, .page-template-template-servicii #contact, .section--plain.legal {padding-top: 0;} .single-service #galerie {padding: 0} .page-template-template-testimoniale #video { padding-top: 0; padding-bottom: 20px; } .page-template-template-testimoniale #contact, .page-template-template-dantura-fixa #recenzii, .page-template-template-dantura-fixa #solutii, .page-template-template-dantura-fixa #cazuri {padding-top: 0} .home #programare {padding-top: 0;} .page-template-template-dantura-fixa #lucrari {padding-top: 30px;} .home #etape, .home #medic {padding-top: 20px;} .page-template-template-dantura-fixa #etape {padding-top: 30px;} .page-template-template-dantura-fixa #diplome {padding-bottom: 0px;} #lucrari .section-head {margin-bottom: 30px;} .page-template-template-dantura-fixa #echipa {padding-bottom: 0;} .home .cta__grid .tm-field--msg {display: none;} .faq-item.is-open .faq-item__a {max-height: none!important;} /* ============================================================ */ /* MODAL / POPUP PROGRAMARE (reutilizabil) */ /* ============================================================ */ .tm-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } .tm-modal[hidden] { display: none; } .tm-modal:not(.is-open) { pointer-events: none; } /* nu bloca pagina cât nu e deschis efectiv */ .tm-modal.is-open { pointer-events: auto; } .tm-modal__overlay { position: absolute; inset: 0; background: rgba(8, 33, 43, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; } .tm-modal__dialog { position: relative; width: 100%; max-width: 720px; background: #fff; border-radius: 22px; padding: 32px; box-shadow: 0 40px 90px -30px rgba(16, 38, 46, .6); transform: translateY(16px) scale(.98); opacity: 0; transition: transform .28s ease, opacity .28s ease; max-height: calc(100vh - 40px); overflow-y: auto; } .tm-modal.is-open .tm-modal__overlay { opacity: 1; } .tm-modal.is-open .tm-modal__dialog { transform: none; opacity: 1; } .tm-modal__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: #f0f7fa; color: var(--c-ink); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; } .tm-modal__close:hover { background: var(--c-cyan); color: #fff; } .tm-modal__title { font-family: var(--font-head); font-weight: 700; font-size: 22px; padding-right: 40px; } .tm-modal__sub { font-size: 14px; color: var(--c-muted); margin: 6px 0 20px; } body.tm-modal-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .tm-modal__overlay, .tm-modal__dialog { transition: none; } } /* ---- Playlist: redare inline în cadranul principal ---- */ .playlist__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 6; border-radius: inherit; } .playlist__main.is-playing .video-card__bg, .playlist__main.is-playing .video-card__play, .playlist__main.is-playing .playlist__main-shade, .playlist__main.is-playing .playlist__main-cap, .playlist__main.is-playing .playlist__main-ep, .playlist__main.is-playing .vid-dur { opacity: 0; pointer-events: none; } /* ---- Carduri video clickabile (deschid popup-ul video) ---- */ .video-card[data-yt], .tst-card[data-yt] { cursor: pointer; } /* ---- Popup video (YouTube) ---- */ .tm-modal__dialog--video { position: relative; max-width: 960px; padding: 0; background: transparent; overflow: visible; } /* butonul de close – sus, în dreapta, deasupra videoului (peste iframe) */ .tm-modal__dialog--video .tm-modal__close { top: -50px; right: 0; z-index: 5; background: rgba(0, 0, 0, .55); color: #fff; } .tm-modal__dialog--video .tm-modal__close:hover { background: var(--c-cyan); color: #fff; } .tm-modal__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; } .tm-modal__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* La mobil avem și videouri orizontale (16:9), și verticale (9:16). Un raport FIX ar penaliza mereu un tip: într-o cutie 16:9 videoul vertical iese minuscul, iar într-una 9:16 cel orizontal la fel. Soluție: cutie înaltă, limitată de viewport — YouTube încadrează singur videoul, iar barele negre se pierd în fundalul negru al dialogului. `min(80vh, 177.78vw)` = niciodată mai înaltă decât are nevoie un 9:16 (100vw × 16/9), ca să nu rămână spațiu gol degeaba pe ecrane foarte înguste. */ @media (max-width: 640px) { .tm-modal--video { padding: 0; } .tm-modal__dialog--video { max-width: 100%; } /* pe mobil (full-screen) close-ul stă în interior, sus-dreapta */ .tm-modal__dialog--video .tm-modal__close { top: 8px; right: 8px; } .tm-modal__video { aspect-ratio: auto; width: 100%; height: min(80vh, 177.78vw); border-radius: 0; } } .tm-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; } .tm-modal__nav[hidden] { display: none; } .tm-modal__nav:hover { background: var(--c-cyan); } .tm-modal__nav--prev { left: 14px; } .tm-modal__nav--next { right: 14px; } @media (max-width: 560px) { .tm-modal__nav { width: 38px; height: 38px; } .tm-modal__nav--prev { left: 6px; } .tm-modal__nav--next { right: 6px; } } /* ---- Lightbox imagini (galerie cu miniaturi) ---- */ .tm-modal__dialog--gallery { max-width: 1100px; padding: 0; background: transparent; box-shadow: none; overflow: visible; } .tm-modal__dialog--gallery .tm-modal__close { top: -6px; right: -6px; background: rgba(0, 0, 0, .55); color: #fff; z-index: 4; } .tm-modal__dialog--gallery .tm-modal__close:hover { background: var(--c-cyan); } .lb-stage { position: relative; display: flex; align-items: center; justify-content: center; } .lb-stage__img { display: block; max-width: 100%; max-height: 74vh; width: auto; height: auto; border-radius: 14px; background: #fff; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; } .lb-nav[hidden] { display: none; } .lb-nav:hover { background: var(--c-cyan); } .lb-nav--prev { left: -60px; } .lb-nav--next { right: -60px; } .lb-count { text-align: center; color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 600; margin-top: 14px; } .lb-count b { color: #fff; } .lb-thumbs { display: flex; gap: 10px; justify-content: center; margin-top: 14px; padding: 4px; overflow-x: auto; scrollbar-width: none; } .lb-thumbs::-webkit-scrollbar { display: none; } .lb-thumbs[hidden] { display: none; } .lb-thumb { flex: none; width: 74px; height: 74px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s, transform .2s; } .lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lb-thumb:hover { opacity: .85; transform: translateY(-2px); } .lb-thumb.is-active { opacity: 1; border-color: var(--c-cyan); } /* Cardurile clicabile din galerii (ex. diplome). */ [data-lb] { cursor: zoom-in; } @media (max-width: 1023px) { .lb-nav--prev { left: 8px; } .lb-nav--next { right: 8px; } } @media (max-width: 640px) { .tm-modal__dialog--gallery .tm-modal__close { top: 4px; right: 4px; } .lb-stage__img { max-height: 62vh; } .lb-nav { width: 38px; height: 38px; } .lb-thumb { width: 56px; height: 56px; } .lb-thumbs { justify-content: flex-start; } } /* ---- Player Testimoniale: embed YouTube la click ---- */ .cazuri-player__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 6; border-radius: inherit; } .cazuri-player__stage.is-playing .video-card__play, .cazuri-player__stage.is-playing .cazuri-player__top, .cazuri-player__stage.is-playing .cazuri-player__caption, .cazuri-player__stage.is-playing .video-card__bar { opacity: 0; pointer-events: none; } .page-template-template-cazuri-clinice .cazuri-rail-wrap, .page-template-template-dantura-fixa .cazuri-rail-wrap, .page-template-template-dantura-fixa #cazuri .flex-center.mt-44 {display: none;} #contact .cta__grid {align-items: center;} @media (min-width: 1024px) and (max-width: 1200px) { .site-footer__legal a, .site-footer__bottom > div {font-size: 12px;} } @media (min-width: 641px) and (max-width: 1023px) { .cazuri-hero__card {width: 100%; max-width: 100%;} .price-grid {max-width: 100%;} .site-footer__bottom {padding-bottom: 85px;} .cazuri-hero__card {padding: 40px 25px;} .cazuri-hero__stat {right: 16px;} .grid.grid--2.about-split {grid-template-columns: repeat(1, 1fr);} /* Tabletă: caruselele echipă/diplome afișează 2 carduri (nu 3). */ .diploma-card { width: calc((100% - 22px) / 2); } .member-card { width: calc((100% - 24px) / 2); } } @media only screen and (max-width: 640px) { .btn {width: 100%;} .site-header__actions {display: none;} .social-pill {width: 100%;justify-content: center;} .contact-socials {gap: 12px} .float-cta {width: calc(100% - 24px);} .float-cta__btn {width: 49%;} .section-head {margin: 0 auto 30px;} .info-card {padding: 22px} .contact-hero {min-height: 480px;height: 50vh;} .site-footer__bottom {padding-bottom: 85px;gap: 10px;} .cazuri-hero__card {width: 100%; max-width: 100%;padding: 20px;text-align: center;} .cazuri-hero__crumbs {justify-content: center;} .cazuri-hero__actions {justify-content: center; gap:20px} .section-sub {font-size: 15px; line-height: 1.5;} .price-group__title {font-size: 18px;} .tm-form-wrap {padding: 20px;} .tm-form-wrap__title {line-height: 28px;} .cta__title {line-height: 1.2;} .post-hero__crumbs{row-gap:2px} .post-content p {font-size: 15px;line-height: 1.6;} .cazuri-player__top, .cazuri-player__caption {display: none;} .cazuri-player__stage {aspect-ratio: 16 / 14;} .cazuri-player .video-card__play {width: 62px; height: 62px;} .ba-card {padding: 8px;} .home-hero__inner {padding: 0 15px} .promo__media {min-height: 330px;} .promo__play {width: 70px; height: 70px;} .home-review {padding: 25px;} .home-review__stars {margin-bottom: 10px; margin-top: -10px;} .cta__grid {gap: 20px} .doctor__chip {width: 100%;} .playlist__scroll {max-height: 250px;} .tm-form, .wpcf7 {padding: 15px;} .video-card--45 {aspect-ratio: 4 / 4;} .feature-card__media {aspect-ratio: 4 / 2;} .video-doctor {right: 0;} #tratament .split--media-text {gap: 60px} .compare-card {padding: 24px;} .case-card {aspect-ratio: 1;} .advantage-card__body {padding: 22px;} .advantage-card__title {font-size: 20px;} .tm-modal__dialog {padding: 20px;} .contact-hero__content {text-align: center;} .tm-modal__dialog {padding: 20px;} .cazuri-hero__title, .contact-hero__title {font-size: clamp(26px, 3.4vw, 40px);} .contact-hero__lead {font-size: 16px;} .cta__text {font-size: 14px;} .playlist__main {min-height: 340px;} .playlist__main-cap {display: none;} .carousel-nav {margin-top: 0!important;} #servicii .section-title {text-align: center;} .price-card__amount {font-size: 32px;} .kids-cta {padding: 15px} .kids-cta .kids-cta__btn {font-size: 14px} .ba-card__pair, .work-card__pair {display: block} .ba-card__img, .work-card__img {margin: 5px 0;aspect-ratio: 4 / 2;} .gallery-fig .ph-box { aspect-ratio: 4 / 4; } .page-template-template-dantura-fixa .video-card--11 { height: 40vh; aspect-ratio: auto; } .lead-actions { margin-top: 20px; } .work-card {padding: 10px} .lead-doctor__media {min-height: 380px;} .ph-img {object-position: 50% 20%;} .home-review__ba {display: block} .home-review__img { position: relative; aspect-ratio: 4 / 3; } }