/* =================================================================================================== * Frontend MOTION + POLISH layer — shared by all themes (dark-lux, bold-color, light-clean). * Loaded AFTER the active theme's style.css, so it layers on top. Every rule derives its colour from * --accent-red (defined by every theme), so each tenant keeps its own identity. The reveal animations * are activated only when JS adds the `.mcq` class to targets, so with JS off / reduced-motion the page * is fully visible and static. No layout/colour of any tenant is hardcoded here. * =================================================================================================== */ /* ---- Scroll reveal (JS adds .mcq to targets, then .mcq--in when they enter the viewport) ---- */ .mcq { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .mcq.mcq--in { opacity: 1; transform: none; } /* ---- Hero entrance on load (pure CSS, independent of scroll → always ends visible) ---- */ .hero-content { animation: mc-hero-in .85s cubic-bezier(.2,.7,.2,1) both; } .hero-image { animation: mc-hero-in .85s .12s cubic-bezier(.2,.7,.2,1) both; } @keyframes mc-hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* ---- Card interactions: lift + accent glow (layers over each theme's own hover) ---- */ .service-card, .feature-item, .review-card, .pricing-card { transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease, border-color .38s ease; } .service-card:hover, .feature-item:hover, .review-card:hover, .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -18px color-mix(in srgb, var(--accent-red) 50%, transparent), 0 6px 18px -10px rgba(0,0,0,.25); border-color: color-mix(in srgb, var(--accent-red) 55%, transparent); } /* ---- Feature icons → a designed badge instead of a bare floating emoji (keeps tenant content) ---- */ .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin-left: auto; margin-right: auto; border-radius: 20px; font-size: 1.75rem; line-height: 1; position: relative; isolation: isolate; background: color-mix(in srgb, var(--accent-red) 11%, transparent); border: 1px solid color-mix(in srgb, var(--accent-red) 24%, transparent); transition: transform .4s cubic-bezier(.2,.7,.2,1), background .4s ease, border-color .4s ease; } .feature-icon::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent-red) 30%, transparent), transparent 70%); transition: opacity .4s ease; } .feature-item:hover .feature-icon { transform: translateY(-3px) scale(1.06); background: color-mix(in srgb, var(--accent-red) 17%, transparent); border-color: color-mix(in srgb, var(--accent-red) 45%, transparent); } .feature-item:hover .feature-icon::before { opacity: 1; } /* ---- Primary CTA: a single restrained shine sweep on hover ---- */ .btn-primary, .btn.btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent); transform: skewX(-18deg); transition: left .65s cubic-bezier(.2,.7,.2,1); } .btn-primary:hover::after { left: 150%; } /* ---- Header: condense + deepen shadow once the page is scrolled ---- */ .header { transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease, border-color .3s ease; } .header.mc-scrolled { box-shadow: 0 8px 30px -10px rgba(0,0,0,.5); } .header.mc-scrolled .logo img, .header.mc-scrolled .logo-img { transform: scale(.92); transition: transform .3s ease; } /* ---- Section header: let the accent underline grow in when the header reveals ---- */ .section-header .section-divider, .section-header .divider, .section-header hr { transform-origin: center; } .section-header.mcq--in .section-divider, .section-header.mcq--in .divider, .section-header.mcq--in hr { animation: mc-grow .65s .12s both; } @keyframes mc-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } /* ---- Smooth anchor scrolling for in-page nav ---- */ html { scroll-behavior: smooth; } /* ---- Respect users who prefer no motion: everything visible + still ---- */ @media (prefers-reduced-motion: reduce) { .mcq { opacity: 1 !important; transform: none !important; transition: none; } .hero-content, .hero-image { animation: none; } .btn-primary::after { display: none; } .section-header.mcq--in .section-divider, .section-header.mcq--in .divider, .section-header.mcq--in hr { animation: none; } html { scroll-behavior: auto; } } /* ───────────────────────────────────────────────────────────────────────────── Aranjamente pentru secțiunea de servicii (services_layout). Stau AICI, nu în temă: regulile de contact erau duplicate în cele trei teme de bază, am reparat una singură și am crezut o oră că fix-ul nu se aplică. Ce ține de STRUCTURĂ se scrie o dată; temele dau doar culoare, fonturi și forme, prin tokeni. Deci variantele astea arată corect pe orice temă, inclusiv pe cele viitoare. ───────────────────────────────────────────────────────────────────────────── */ /* „list" — meniu tipărit: nume … linie punctată … preț. Prețurile se aliniază pe verticală, deci se compară dintr-o privire; o grilă de carduri nu permite asta. */ .svc-list { list-style: none; margin: 0 auto; padding: 0; max-width: 780px; } .svc-row { padding: 1.05rem 0; border-bottom: 1px solid var(--border-color); } .svc-row:last-child { border-bottom: 0; } .svc-line { display: flex; align-items: baseline; gap: .75rem; } .svc-name { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); font-size: 1.12rem; } /* Linia punctată crește cât e nevoie — ea face legătura vizuală dintre nume și preț. */ .svc-lead { flex: 1 1 auto; border-bottom: 1px dotted var(--border-color); transform: translateY(-.25rem); min-width: 1.5rem; } .svc-price { font-family: var(--font-heading); font-weight: 700; color: var(--accent-red); white-space: nowrap; font-size: 1.08rem; } .svc-meta { margin-top: .3rem; color: var(--text-muted); font-size: .9rem; display: flex; gap: .6rem; flex-wrap: wrap; } .svc-dur { opacity: .85; } .svc-dur::after { content: "·"; margin-left: .6rem; opacity: .6; } .svc-meta .svc-dur:only-child::after { content: ""; } /* „feature" — un serviciu-vedetă mare, restul compact sub el. */ .svc-feature { display: grid; gap: 1.4rem; } .svc-star { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card, 12px); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow-md); } .svc-star-eyebrow { display: inline-block; margin-bottom: .7rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-red); font-weight: 700; } .svc-star h3 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 .4rem; color: var(--text-primary); } .svc-star-price { font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: var(--accent-red); margin: 0 0 .2rem; } .svc-star-meta { color: var(--text-muted); margin: 0 0 .8rem; font-size: .92rem; } .svc-rest { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1rem; } .svc-rest .service-card { padding: 1.1rem 1.2rem; } .svc-rest .service-card h3 { font-size: 1.02rem; margin-bottom: .3rem; } @media (max-width: 600px) { .svc-line { flex-wrap: wrap; gap: .35rem; } .svc-lead { display: none; } /* pe telefon linia punctată doar încurcă */ .svc-price { margin-left: auto; } } /* Numele de lângă un logo-emblemă (vezi tenantLogoIsEmblem în branding.php). Stă aici, nu în temă: e o regulă de STRUCTURĂ, iar dacă ar fi în teme ar trebui scrisă de patru ori și ar diverge — exact ce s-a întâmplat cu regulile de contact. Culorile vin din tokeni, deci arată corect pe orice temă. */ .logo.logo-emblem { gap: .65rem; } .logo.logo-emblem .logo-name { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(.95rem, 1.4vw, 1.15rem); line-height: 1.15; color: var(--text-primary); letter-spacing: .01em; white-space: nowrap; } @media (max-width: 560px) { /* Pe telefon numele ar împinge butoanele de pe ecran — emblema rămâne singură acolo. */ .logo.logo-emblem .logo-name { display: none; } } /* =================================================================================================== * GALERIE — aranjare + efecte foto * * Stilul plăcilor stă AICI, nu în atribute style= scrise din PHP și din editorul live. Înainte era * scris în ambele locuri, cu valori diferite: PHP randa grila, iar JS-ul editorului randa exact * aceleași poze în stilul „rânduri egale" (230×230). Adăugai o poză din editor și galeria își * schimba aranjarea până la următorul refresh. Aici e scris o singură dată, deci nu mai poate diverge. * * Numărul de coloane e FIX pe fiecare lățime, nu auto-fit. Auto-fit decidea coloanele singur, deci * CSS-ul nu putea ști câte poze rămân pe ultimul rând — și exact acolo se strica: cu 3 poze pe telefon * ieșeau două sus și una singură jos, lipită în stânga. Cu numărul de coloane cunoscut, regulile de * mai jos pot lăți ultimele poze cât golul rămas, oricâte ar fi. * * ÎNĂLȚIMEA o dă o singură formulă, din lățimea reală a galeriei (unități cq). O poză lățită peste * două coloane acoperă și spațiul dintre ele, deci un raport fix i-ar fi dat câțiva pixeli în plus * față de vecine și ultimul rând ar fi ieșit zimțat la bază. Calculată din lățimea coloanei, toate * pozele de pe un rând ajung exact la aceeași înălțime, oricât s-ar lăți. * * data-small="1" (≤3 poze) = galeria n-are „ultim rând", are un singur rând. Regulile de umplere o * sar, altfel singura poză dintr-o galerie de una ar fi fost întinsă cât patru. * =================================================================================================== */ .tenant-gallery { --tg-gap: .55rem; } .tenant-gallery.tg-grid { --tg-cols: 2; display: grid; grid-template-columns: repeat(var(--tg-cols), minmax(0, 1fr)); gap: var(--tg-gap); } .tenant-gallery .tenant-gallery-item { position: relative; display: block; overflow: hidden; cursor: zoom-in; border-radius: var(--radius-card, 12px); background: color-mix(in srgb, var(--text-primary) 7%, var(--bg-secondary)); } .tenant-gallery .tenant-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--tg-filter, none); transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .45s ease; } /* Raportul e rezerva: pe un browser fără unități de container, plăcile rămân portret 4:5 în loc să se prăbușească la înălțime zero. Unde merg unitățile cq, formula de mai jos îl înlocuiește. */ .tenant-gallery.tg-grid > .tenant-gallery-item { aspect-ratio: 4 / 5; } @supports (container-type: inline-size) { .tenant-gallery.tg-grid { container-type: inline-size; } .tenant-gallery.tg-grid > .tenant-gallery-item { aspect-ratio: auto; height: calc((100cqw - (var(--tg-cols) - 1) * var(--tg-gap)) / var(--tg-cols) * 1.25); } .tenant-gallery.tg-grid[data-count="1"] > .tenant-gallery-item { height: calc(100cqw * 9 / 16); } } /* TELEFON — mozaic cu ritm. La fiecare a cincea poză una lată cât ecranul, restul în perechi: galeria capătă un accent în loc de un șir de plăci identice. Ciclul de 5 umple exact 3 rânduri pe două coloane, deci nu lasă niciodată goluri la mijloc; ultimele două reguli prind pozele care ar fi rămas singure pe rând. */ .tenant-gallery.tg-grid > .tenant-gallery-item:nth-child(5n+1), .tenant-gallery.tg-grid > .tenant-gallery-item:last-child:nth-child(5n+2), .tenant-gallery.tg-grid > .tenant-gallery-item:last-child:nth-child(5n+4) { grid-column: span 2; aspect-ratio: 8 / 5; } /* TABLETĂ — plăci egale pe 3 coloane. Mozaicul de telefon se anulează explicit: regulile de mai sus sunt scrise fără media query, deci altfel ar rămâne active și aici. */ @media (min-width: 641px) { .tenant-gallery.tg-grid { --tg-cols: 3; --tg-gap: .7rem; } .tenant-gallery.tg-grid > .tenant-gallery-item:nth-child(5n+1), .tenant-gallery.tg-grid > .tenant-gallery-item:last-child:nth-child(5n+2), .tenant-gallery.tg-grid > .tenant-gallery-item:last-child:nth-child(5n+4) { grid-column: auto; aspect-ratio: 4 / 5; } /* Ultimul rând incomplet: prima poză de pe el se lățește cât golul. */ .tenant-gallery.tg-grid:not([data-small]) > .tenant-gallery-item:last-child:nth-child(3n+1) { grid-column: span 3; aspect-ratio: 12 / 5; } .tenant-gallery.tg-grid:not([data-small]) > .tenant-gallery-item:nth-last-child(2):nth-child(3n+1) { grid-column: span 2; aspect-ratio: 8 / 5; } } /* DESKTOP — 4 coloane. Se anulează regulile de 3 coloane și se rescriu pentru lățimea nouă. */ @media (min-width: 1025px) { .tenant-gallery.tg-grid { --tg-cols: 4; } .tenant-gallery.tg-grid:not([data-small]) > .tenant-gallery-item:last-child:nth-child(3n+1), .tenant-gallery.tg-grid:not([data-small]) > .tenant-gallery-item:nth-last-child(2):nth-child(3n+1) { grid-column: auto; aspect-ratio: 4 / 5; } .tenant-gallery.tg-grid:not([data-small]) > .tenant-gallery-item:last-child:nth-child(4n+1) { grid-column: span 4; aspect-ratio: 16 / 5; } .tenant-gallery.tg-grid:not([data-small]) > .tenant-gallery-item:nth-last-child(2):nth-child(4n+1) { grid-column: span 3; aspect-ratio: 12 / 5; } .tenant-gallery.tg-grid:not([data-small]) > .tenant-gallery-item:nth-last-child(3):nth-child(4n+1) { grid-column: span 2; aspect-ratio: 8 / 5; } } /* Unde merg unitățile de container, înălțimea din formulă bate orice raport scris mai sus — inclusiv pe plăcile lățite, care altfel ar ieși cu câțiva pixeli mai înalte decât vecinele. */ @supports (container-type: inline-size) { .tenant-gallery.tg-grid > .tenant-gallery-item { aspect-ratio: auto !important; } } /* Galeriile mici: câte coloane, atâtea poze. De la tabletă în sus stau pe un singur rând. */ .tenant-gallery.tg-grid[data-count="1"] { --tg-cols: 1; } .tenant-gallery.tg-grid[data-count="1"] > .tenant-gallery-item { grid-column: auto; aspect-ratio: 16 / 9; } @media (min-width: 641px) { .tenant-gallery.tg-grid[data-count="2"] { --tg-cols: 2; } .tenant-gallery.tg-grid[data-count="3"] { --tg-cols: 3; } } /* Aranjarea „rânduri egale": JS-ul din sections.php scrie lățimea/înălțimea fiecărei plăci; aici rămân doar regulile care nu depind de calcul. */ .tenant-gallery[data-layout="justified"] { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .tenant-gallery[data-layout="justified"] > .tenant-gallery-item { flex: 0 0 auto; width: 230px; height: 230px; } @media (hover: hover) { .tenant-gallery .tenant-gallery-item:hover img { transform: scale(1.06); } } /* ---- Efecte foto ---- Un singur filtru pe container, moștenit de fiecare poză prin --tg-filter. Se schimbă dintr-un singur atribut, deci editorul live poate arăta efectul pe loc, fără să reîncarce pagina. */ .tenant-gallery[data-fx="bw"] { --tg-filter: grayscale(1) contrast(1.06); } .tenant-gallery[data-fx="bw-hard"] { --tg-filter: grayscale(1) contrast(1.38) brightness(.93); } .tenant-gallery[data-fx="sepia"] { --tg-filter: sepia(.6) contrast(1.05) saturate(1.15) brightness(1.02); } .tenant-gallery[data-fx="film"] { --tg-filter: sepia(.22) saturate(1.35) contrast(1.1); } .tenant-gallery[data-fx="warm"] { --tg-filter: saturate(1.28) brightness(1.05) contrast(1.04) hue-rotate(-6deg); } .tenant-gallery[data-fx="cold"] { --tg-filter: saturate(.9) brightness(1.04) contrast(1.09) hue-rotate(9deg); } .tenant-gallery[data-fx="punch"] { --tg-filter: contrast(1.3) saturate(1.42); } .tenant-gallery[data-fx="fade"] { --tg-filter: saturate(.62) contrast(.88) brightness(1.1); } .tenant-gallery[data-fx="matte"] { --tg-filter: sepia(.12) saturate(.88) contrast(.93) brightness(1.05); } /* La efectele monocrome, cursorul readuce culoarea. Doar pe mouse: pe telefon „hover" rămâne lipit după atingere și ar lăsa o poză colorată într-o galerie alb-negru. */ @media (hover: hover) { .tenant-gallery[data-fx="bw"] .tenant-gallery-item:hover img, .tenant-gallery[data-fx="bw-hard"] .tenant-gallery-item:hover img, .tenant-gallery[data-fx="sepia"] .tenant-gallery-item:hover img { filter: none; } } @media (prefers-reduced-motion: reduce) { .tenant-gallery .tenant-gallery-item img { transition: none; } .tenant-gallery .tenant-gallery-item:hover img { transform: none; } } /* =================================================================================================== * MODALUL DE PROGRAMARE — tranzitia dintre pasi * * Ce se vedea inainte: apesi „Continuă" si continutul nou aparea JOS, sub cel vechi, apoi sarea sus. * Cauza nu era animatia, ci asezarea: ambii pasi erau `position:relative` si amandoi in flux, deci se * puneau UNUL SUB ALTUL. Masurat pe FixIT: pasul nou statea la 1140px, adica 1030px sub cel vechi — * complet in afara ecranului. Aluneca orizontal frumos, dar acolo jos, unde nu-l vedea nimeni. Cand * pasul vechi primea `display:none`, la 500ms, cel nou sarea brusc in sus. Aia era „animatia". * * Acum pasul care PLEACA iese din flux (`bk-leaving`), pironit exact unde se vedea, iar cel care vine * ramane in flux si ocupa locul din prima clipa. Se suprapun, deci alunecarea chiar se vede. * * A doua parte: containerul isi schimba inaltimea de la un pas la altul (736px → 306px la FixIT) si * o facea dintr-un salt. `bk-resizing` o trece in tranzitie, deci modalul se stramteaza lin. * * Durata sta intr-un singur loc, `--bk-dur`, si e citita si de JS — inainte CSS-ul zicea 300ms si * JS-ul astepta 500, deci pasul vechi ramanea invizibil dar prezent inca doua zecimi. * =================================================================================================== */ #appointmentBookingModal, #manageAppointmentModal { --bk-dur: 320ms; --bk-ease: cubic-bezier(.22, .61, .36, 1); } #appointmentBookingModal .appointment-flow-container, #manageAppointmentModal .appointment-flow-container { position: relative; } #appointmentBookingModal .appointment-slide, #manageAppointmentModal .appointment-slide { transition: transform var(--bk-dur) var(--bk-ease), opacity var(--bk-dur) var(--bk-ease); } /* Pasul care pleaca: scos din flux si pironit unde se vedea, ca sa nu mai impinga pe nimeni in jos. */ #appointmentBookingModal .appointment-slide.bk-leaving, #manageAppointmentModal .appointment-slide.bk-leaving { position: absolute; pointer-events: none; z-index: 1; } /* Inaltimea urmareste continutul in loc sa sara. `overflow:hidden` doar cat tine tranzitia, altfel apare si dispare o bara de derulare in timp ce cutia se misca. */ #appointmentBookingModal .appointment-flow-container.bk-resizing, #manageAppointmentModal .appointment-flow-container.bk-resizing { transition: height var(--bk-dur) var(--bk-ease); overflow: hidden; } /* Deschiderea modalului: pana acum aparea taiat, dintr-un cadru in altul. */ #appointmentBookingModal .appointment-modal-content, #manageAppointmentModal .appointment-modal-content { animation: bk-modal-in 260ms cubic-bezier(.22, .61, .36, 1) both; } @keyframes bk-modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #appointmentBookingModal, #manageAppointmentModal { --bk-dur: 140ms; } /* Fara alunecare: pasii doar se schimba. Inaltimea ramane in tranzitie, e o miscare linistita. */ #appointmentBookingModal .appointment-slide, #manageAppointmentModal .appointment-slide { transform: none !important; transition: opacity var(--bk-dur) linear; } #appointmentBookingModal .appointment-modal-content, #manageAppointmentModal .appointment-modal-content { animation: none; } }