/* ============================================================ KLINIKA — tema blu ------------------------------------------------------------ Ngarkohet PAS css/style.css dhe vetëm mbishkruan tokenat e ngjyrës. Struktura, tipografia dhe komponentët vijnë të gjitha nga style.css — kështu depo dhe klinika mbeten identike në sjellje, dhe ndryshojnë vetëm në ngjyrë. Aktivizohet me ============================================================ */ body.theme-klinika { /* Blu-ja e klinikës — e njëjta si në faqen kryesore (--klinika) */ --accent: #1f86c9; --accent-strong: #146a9e; /* Tekst më i ftohtë, që të shkojë me bluen */ --ink: #13283a; --body: #4a5a67; /* Sfonde e kufij me nuancë blu */ --bg-soft: #f2f8fc; --line: #e2ecf3; /* Aliasët e vjetër ndjekin theksin e ri */ --brand-light: #4aa3dd; /* ----- Ritmi vertikal i faqes "Rreth Nesh" ----- --kla-sec është GJYSMA e hapësirës mes dy seksioneve: çdo seksion e vë lart dhe poshtë, ndaj çdo kufi mes tyre del saktësisht 2 × --kla-sec. Mos e vendos hapësirën direkt te seksionet — ndryshoje këtu dhe e gjithë faqja ndjek. */ --kla-sec: clamp(36px, 4.4vw, 72px); --kla-pad-x: clamp(16px, 3.6vw, 56px); } /* Seksioni i fundit para footer-it merr më shumë frymë poshtë. E lidhur me POZICIONIN, jo me klasën: cili seksion mbyll faqen ndryshon nga faqja në faqe — te about.html është kontakti, te contact.html harta. Lista është e shprehur me qëllim, që rregulli të mos prekë index.html, që përdor familjen `kl-`. */ .kla-hero:last-of-type, .kla-bento:last-of-type, .kla-mission:last-of-type, .kla-time:last-of-type, .kla-docs:last-of-type, .kla-cert:last-of-type, .kla-faq:last-of-type, .kla-map:last-of-type, .kla-cta:last-of-type { padding-bottom: calc(var(--kla-sec) * 1.7); } /* ------------------------------------------------------------ Rregullimet e hijeve/nuancave që në style.css janë me ngjyrë të fiksuar (rgba nuk pranon hex nga një variabël). ------------------------------------------------------------ */ /* CTA e header-it */ body.theme-klinika .nav-cta { box-shadow: 0 8px 20px rgba(31, 134, 201, 0.28); } body.theme-klinika .nav-cta:hover { box-shadow: 0 12px 26px rgba(20, 106, 158, 0.36); } /* Butoni "kthehu lart" */ body.theme-klinika .back-to-top { box-shadow: 0 10px 24px rgba(20, 106, 158, 0.32); } /* Butoni i asistentit */ body.theme-klinika .dm-chat-toggle { box-shadow: 0 14px 34px rgba(20, 106, 158, 0.5); } body.theme-klinika .dm-chat-toggle:hover { box-shadow: 0 18px 42px rgba(20, 106, 158, 0.58); } /* Fokusi i fushave të formularit */ body.theme-klinika .cform-field input:focus, body.theme-klinika .cform-field select:focus, body.theme-klinika .cform-field textarea:focus { box-shadow: 0 0 0 3px #e3f1fa; } /* Mesazhi i suksesit */ body.theme-klinika .newsletter-msg.is-ok, body.theme-klinika .cform-msg.is-ok { color: #146a9e; } /* ============================================================ 1 · HERO — imazh në gjithë ekranin, tekst poshtë-majtas ============================================================ */ .kl-hero { position: relative; display: flex; align-items: center; min-height: 100vh; /* Hapësirë sipër për header-in fiks, poshtë për ekuilibër optik */ padding: 170px 0 120px; overflow: hidden; /* Krijon kontekst të vetin — shtresat me z-index negativ nuk përplasen me rrjetin nervor të sfondit (.site-bg) */ isolation: isolate; } /* ----- Imazhi ----- */ .kl-hero-media { position: absolute; inset: 0; z-index: -2; } .kl-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; /* mban fytyrën në kuadër kur ngushtohet */ } /* ----- Shtresa e errësimit (uniforme) ----- */ .kl-hero-overlay { position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.26); } /* ----- Gradienti (nga majtas drejt qendrës, që teksti të lexohet) ----- */ .kl-hero-gradient { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 0) 72%), linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 32%); } /* ----- Shkrirja poshtë: imazhi humbet në të bardhën e faqes ----- */ .kl-hero-fade { position: absolute; right: 0; bottom: 0; left: 0; z-index: -1; height: clamp(200px, 30vh, 340px); pointer-events: none; /* Kurbë e butë (ease-in-out) në vend të një gradienti linear. Linearja lë një "vijë" të dukshme ku fillon shkrirja; këto pika e shuajnë të bardhën gradualisht, pa kufi. */ background: linear-gradient( 0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } /* ----- Teksti ----- */ /* Fullscreen — pa max-width dhe pa centrim, teksti nis nga ana e majtë */ .kl-hero-inner { position: relative; width: 100%; /* 60px në desktop, zvogëlohet vetë në ekrane të vogla */ padding: 0 clamp(20px, 5vw, 60px); } .kl-hero-caption { position: relative; max-width: 700px; } .kl-hero-title { font-family: "Poppins", sans-serif; font-size: clamp(40px, 5vw, 70px); font-weight: 700; line-height: 1.06; letter-spacing: -0.025em; color: #fff; } .kl-hero-text { max-width: 460px; margin-top: 22px; font-size: 15.5px; line-height: 1.75; color: rgba(255, 255, 255, 0.86); } /* ----- Butoni (pill i bardhë me gradient, si në modelin e dhënë) ----- */ .kl-hero-btn { display: inline-block; margin-top: 30px; padding: 5px; border-radius: 50px; background: rgba(0, 0, 0, 0.07); transition: transform 0.25s ease; } .kl-hero-btn span { display: block; padding: 11px 22px; border-radius: 36px; background: linear-gradient(180deg, #eee 0%, #fff 100%); font-family: "Inter", "Poppins", sans-serif; font-size: 14px; font-weight: 500; color: #454545; text-shadow: 0 1px 0 #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .kl-hero-btn:hover { transform: translateY(-2px); } .kl-hero-btn:hover span { color: var(--accent-strong); } /* ----- Përshtatja në ekrane të vogla ----- */ @media (max-width: 991px) { .kl-hero { min-height: 88vh; padding: 150px 0 90px; } } @media (max-width: 575px) { .kl-hero { min-height: 82vh; padding: 130px 0 70px; } .kl-hero-media img { object-position: 68% center; } .kl-hero-text { font-size: 14.5px; margin-top: 18px; } } /* ============================================================ 2 · SHËRBIMET — kartë me gradient që ndryshon sipas shërbimit ------------------------------------------------------------ Imazhet: prerje me sfond transparent, nga foto Pexels (licencë e lirë, edhe komerciale): implantologji → pexels.com/photo/38362421 estetike → pexels.com/photo/6812496 endodonti → pexels.com/photo/30805148 protetike → pexels.com/photo/5794074 ============================================================ */ /* Ngjyrat regjistrohen si tipe ngjyre, që të mund të animohen. Pa @property, `transition` mbi një variabël ngjyre nuk ka efekt. */ @property --kl-c1 { syntax: ""; inherits: true; initial-value: #dbecf9; } @property --kl-c2 { syntax: ""; inherits: true; initial-value: #bcdcf3; } @property --kl-c3 { syntax: ""; inherits: true; initial-value: #eef6fc; } .kl-serv { padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); } .kl-serv-inner { width: 100%; padding: 0 clamp(20px, 5vw, 60px); } /* ----- Karta ----- */ .kl-serv-card { --kl-c1: #dbecf9; --kl-c2: #bcdcf3; --kl-c3: #eef6fc; position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); grid-template-areas: "lead lead" "title image" "tabs image"; gap: clamp(22px, 3vw, 38px) clamp(18px, 2.4vw, 34px); align-items: start; padding: clamp(20px, 2.4vw, 34px); border-radius: 32px; background: conic-gradient( at 63.6% 50%, var(--kl-c1) 90.78deg, var(--kl-c1) 224.96deg, var(--kl-c2) 267.79deg ); box-shadow: 0 24px 60px -30px rgba(19, 40, 58, 0.35); overflow: hidden; transition: --kl-c1 0.75s cubic-bezier(0.4, 0, 0.2, 1), --kl-c2 0.75s cubic-bezier(0.4, 0, 0.2, 1), --kl-c3 0.75s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.75s ease; } /* ----- Dhëmbi 3D në këndin lart-djathtas ----- */ .kl-serv-tooth { position: absolute; /* i njëjti vend dhe e njëjta madhësi që kishte shigjeta */ top: clamp(20px, 2.4vw, 34px); right: clamp(20px, 2.4vw, 34px); z-index: 3; width: 60px; height: 60px; /* rrotullohet vetë; me tërheqje mund ta kthesh me dorë */ cursor: grab; } .kl-serv-tooth:active { cursor: grabbing; } .kl-serv-tooth canvas { display: block; filter: drop-shadow(0 14px 22px rgba(19, 40, 58, 0.22)); } /* ----- Titulli: numri + emri ----- */ .kl-serv-title { grid-area: title; position: relative; z-index: 2; display: flex; align-items: stretch; gap: clamp(16px, 2vw, 30px); padding-right: 68px; } .kl-serv-num { display: grid; place-items: center; flex: 0 0 auto; min-width: clamp(92px, 10.5vw, 148px); padding: clamp(10px, 1.4vw, 20px) clamp(8px, 1.2vw, 18px); border-radius: 26px; background: var(--kl-c3); transition: background 0.75s cubic-bezier(0.4, 0, 0.2, 1); } .kl-serv-num span { display: block; font-family: "Poppins", sans-serif; font-size: clamp(58px, 8vw, 122px); font-weight: 700; line-height: 0.92; letter-spacing: -0.075em; color: var(--ink); font-variant-numeric: tabular-nums; } .kl-serv-title-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .kl-serv-name { font-family: "Poppins", sans-serif; font-size: clamp(28px, 4.1vw, 58px); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; } .kl-serv-desc { margin-top: 14px; max-width: 44ch; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.62; color: rgba(19, 40, 58, 0.58); } /* Teksti ndërrohet me një shkrepje të shkurtër, jo befas */ .kl-serv-name, .kl-serv-desc, .kl-serv-num span { transition: opacity 0.28s ease, transform 0.28s ease; } .kl-serv-card.is-swapping .kl-serv-name, .kl-serv-card.is-swapping .kl-serv-desc, .kl-serv-card.is-swapping .kl-serv-num span { opacity: 0; transform: translateY(6px); } /* ----- Tabs ----- */ .kl-serv-tabs { grid-area: tabs; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 11px; } .kl-serv-tab { display: flex; align-items: center; width: 100%; min-height: 56px; padding: 13px 24px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.5); font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; color: rgba(19, 40, 58, 0.52); text-align: left; cursor: pointer; transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; } .kl-serv-tab:hover { background: rgba(255, 255, 255, 0.82); color: rgba(19, 40, 58, 0.8); transform: translateX(4px); } .kl-serv-tab.is-active { background: #0e1b25; font-weight: 600; color: #fff; cursor: default; transform: none; box-shadow: 0 12px 26px -12px rgba(14, 27, 37, 0.7); } .kl-serv-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* ----- Imazhi: hyn nga e djathta, del nga e majta ----- */ .kl-serv-media { grid-area: image; position: relative; align-self: stretch; min-height: clamp(250px, 31vw, 430px); } .kl-serv-media img { position: absolute; /* pak frymë, që objekti të mos prekë buzët e kartës. Gjerësia/lartësia jepen shprehimisht: te një absolut, `width:auto` merr përmasën intrinsike, jo hapësirën e lirë. */ top: 4%; left: 7%; width: 86%; height: 92%; object-fit: contain; object-position: center; filter: drop-shadow(0 26px 34px rgba(19, 40, 58, 0.18)); opacity: 0; transform: translateX(70px) scale(0.96); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .kl-serv-media img.is-active { opacity: 1; transform: translateX(0) scale(1); } .kl-serv-media img.is-leaving { opacity: 0; transform: translateX(-70px) scale(0.96); } /* ----- Ekrane të vogla ----- */ @media (max-width: 991px) { .kl-serv-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "title" "image" "tabs"; } .kl-serv-media { min-height: 250px; } .kl-serv-title { padding-right: 62px; } } @media (max-width: 575px) { .kl-serv-card { border-radius: 26px; } .kl-serv-tooth { width: 52px; height: 52px; } .kl-serv-num { border-radius: 20px; } .kl-serv-tab { min-height: 52px; padding: 12px 20px; font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .kl-serv-media img, .kl-serv-card, .kl-serv-num { transition-duration: 0.01ms; } .kl-serv-media img { transform: none; } } /* ----- Rreshti hyrës brenda kartës (mban fjalët kyçe për SEO) ----- */ .kl-serv-lead { grid-area: lead; position: relative; z-index: 2; padding-right: 78px; /* hapësirë për dhëmbin 3D */ font-family: "Poppins", sans-serif; font-size: clamp(22px, 2.5vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; color: var(--ink); } /* ============================================================ 3 · PSE NE — titull majtas, rrjet 2×2 kartash në shah ============================================================ */ .kl-why { padding: clamp(56px, 7vw, 100px) 0; } .kl-why-inner { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr); gap: clamp(30px, 4vw, 70px); align-items: start; width: 100%; padding: 0 clamp(20px, 5vw, 60px); } /* ----- Kolona e majtë ----- */ .kl-why-head h2 { font-family: "Poppins", sans-serif; font-size: clamp(26px, 3.1vw, 42px); font-weight: 700; line-height: 1.14; letter-spacing: -0.03em; color: #0e4b6b; } .kl-why-head p { margin-top: 20px; max-width: 42ch; font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.72; color: rgba(19, 40, 58, 0.58); } /* ----- Rrjeti i kartave ----- */ .kl-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Pa asnjë hapësirë: kartat prekin njëra-tjetrën, që dy blloqet e errëta të bashkohen në qoshe dhe të lexohen si një shirit i vetëm. Ndarjen vizuale e bën padding-u i brendshëm i kartave. */ gap: 0; } .kl-why-card { padding: clamp(22px, 2.2vw, 30px); border-radius: 16px; transition: transform 0.35s ease, box-shadow 0.35s ease; } .kl-why-card:hover { transform: translateY(-4px); } /* Dy kartat me sfond të plotë qëndrojnë diagonalisht, si në model */ .kl-why-card.is-dark { background: #0e4b6b; box-shadow: 0 22px 44px -26px rgba(14, 75, 107, 0.85); } .kl-why-ico { display: block; margin-bottom: clamp(16px, 1.6vw, 22px); font-size: clamp(22px, 1.9vw, 27px); line-height: 1; color: #33cfff; } .kl-why-card h3 { font-family: "Poppins", sans-serif; font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: #0e4b6b; } .kl-why-card p { margin-top: 12px; font-size: clamp(13px, 1.02vw, 14.5px); line-height: 1.68; color: rgba(19, 40, 58, 0.58); } /* Bashkimi i dy blloqeve të errëta: qoshja e poshtme-majtë e asaj lart dhe qoshja e sipërme-djathtë e asaj poshtë hiqen nga rrumbullakimi. */ @media (min-width: 576px) { .kl-why-card.is-dark:nth-child(2) { border-bottom-left-radius: 0; } .kl-why-card.is-dark:nth-child(3) { border-top-right-radius: 0; } } .kl-why-card.is-dark h3 { color: #fff; } .kl-why-card.is-dark p { color: rgba(255, 255, 255, 0.9); font-weight: 500; } /* ----- Ekrane të vogla ----- */ @media (max-width: 991px) { .kl-why-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; } } @media (max-width: 575px) { .kl-why-grid { grid-template-columns: minmax(0, 1fr); } .kl-why-card { border-radius: 18px; } } @media (prefers-reduced-motion: reduce) { .kl-why-card:hover { transform: none; } } /* ============================================================ 4 · PROCESI + BANDA ME FOTO ------------------------------------------------------------ Foto: pexels.com/photo/7800561 (licencë e lirë, komerciale) ============================================================ */ .kl-proc { /* rrezja e përbashkët e bllokut gri dhe e imazhit */ --kl-r: clamp(30px, 4vw, 60px); } /* Blloku gri rri MBI imazhin, me qoshet e poshtme të rrumbullakosura */ .kl-proc-top { position: relative; z-index: 2; background: #f4f8fb; padding-top: clamp(44px, 5vw, 70px); border-bottom-left-radius: var(--kl-r); border-bottom-right-radius: var(--kl-r); } .kl-proc-inner { width: 100%; padding: 0 clamp(20px, 5vw, 60px); } /* ----- Mbititulli me vija anash ----- */ .kl-proc-kicker { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); font-size: clamp(10px, 0.8vw, 11.5px); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(19, 40, 58, 0.5); } .kl-proc-kicker::before, .kl-proc-kicker::after { content: ""; flex: 1; height: 1px; background: rgba(19, 40, 58, 0.14); } /* ----- Katër hapat ----- */ .kl-proc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(34px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 72px); list-style: none; } .kl-proc-step { position: relative; } /* Rrethi me numër dhe harkun dekorativ */ .kl-proc-num { position: relative; display: grid; place-items: center; width: clamp(52px, 4.4vw, 64px); height: clamp(52px, 4.4vw, 64px); border-radius: 50%; background: #fff; font-family: "Poppins", sans-serif; font-size: clamp(13px, 1.05vw, 15px); font-weight: 600; letter-spacing: 0.02em; color: var(--ink); box-shadow: 0 2px 6px rgba(19, 40, 58, 0.06); } .kl-proc-num::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.6px solid transparent; border-top-color: var(--ink); border-right-color: var(--ink); } /* Pikat mes dy rrathëve (jo te hapi i fundit) */ .kl-proc-dots { position: absolute; top: 14px; left: 62%; width: 30px; height: 30px; background-image: radial-gradient(circle, rgba(19, 40, 58, 0.42) 1.3px, transparent 1.6px); background-size: 8px 8px; transform: rotate(-45deg); } .kl-proc-step:last-child .kl-proc-dots { display: none; } .kl-proc-step h3 { margin-top: clamp(22px, 2.6vw, 36px); font-family: "Poppins", sans-serif; font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); } .kl-proc-step p { margin-top: 12px; font-size: clamp(12.5px, 1vw, 14px); line-height: 1.65; color: rgba(19, 40, 58, 0.55); } /* ============ Banda me foto ============ */ .kl-band { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(520px, 52vw, 780px); /* ngjitet lart nën bllokun gri, që gri-ja të bjerë sipër imazhit */ margin-top: calc(-1 * var(--kl-r)); padding-top: clamp(110px, 12vw, 190px); /* rrezja vetëm poshtë — sipër e mbulon blloku gri */ border-radius: 0 0 var(--kl-r) var(--kl-r); overflow: hidden; isolation: isolate; } .kl-band-media, .kl-band-media img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; } .kl-band-media img { object-fit: cover; object-position: 50% 30%; } .kl-band-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 22, 33, 0.82) 0%, rgba(6, 22, 33, 0.5) 42%, rgba(6, 22, 33, 0.24) 72%), linear-gradient(0deg, rgba(6, 22, 33, 0.88) 0%, rgba(6, 22, 33, 0.1) 48%); } /* ----- Teksti + kartela e orarit ----- */ .kl-band-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: clamp(26px, 3.4vw, 56px); align-items: end; padding-bottom: clamp(34px, 4vw, 62px); } .kl-band-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 100px; background: #f2b33d; font-family: "Poppins", sans-serif; font-size: clamp(10px, 0.8vw, 11.5px); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #241705; } .kl-band-badge i { font-size: 10px; } .kl-band-row h2 { margin-top: clamp(16px, 1.8vw, 24px); max-width: 19ch; font-family: "Poppins", sans-serif; font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: #fff; } /* ----- Kartela e orarit ----- */ .kl-hours { padding: clamp(20px, 2vw, 28px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; background: rgba(9, 26, 38, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .kl-hours-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: clamp(14px, 1.6vw, 20px); } .kl-hours-top h3 { font-family: "Poppins", sans-serif; font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; letter-spacing: -0.02em; color: #fff; } .kl-hours-top i { font-size: 18px; color: rgba(255, 255, 255, 0.72); } .kl-hours dl { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; } .kl-hours dt, .kl-hours dd { padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: clamp(12.5px, 1vw, 14px); line-height: 1.4; } .kl-hours dt { color: rgba(255, 255, 255, 0.62); } .kl-hours dd { color: #fff; text-align: right; } .kl-hours dt:first-of-type, .kl-hours dt:first-of-type + dd { border-top: 0; } .kl-hours-btn { display: inline-flex; align-items: center; gap: 12px; width: 100%; margin-top: clamp(16px, 1.8vw, 22px); padding: 7px 20px 7px 7px; border-radius: 100px; background: #f2b33d; font-family: "Poppins", sans-serif; font-size: clamp(12.5px, 1vw, 14px); font-weight: 600; letter-spacing: -0.01em; color: #241705; transition: background 0.25s ease, transform 0.25s ease; } .kl-hours-btn span { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #fff; font-size: 12px; } .kl-hours-btn:hover { background: #f7c260; transform: translateY(-2px); } /* ----- Shifrat ----- */ .kl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.18); } .kl-stat { padding: clamp(22px, 2.6vw, 34px) clamp(10px, 1.4vw, 20px); text-align: center; } .kl-stat + .kl-stat { border-left: 1px solid rgba(255, 255, 255, 0.18); } .kl-stat b { font-family: "Poppins", sans-serif; font-size: clamp(28px, 3.2vw, 46px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #fff; } .kl-stat b i { font-style: normal; font-size: 0.6em; color: #f2b33d; } .kl-stat span { display: block; margin-top: 10px; font-size: clamp(11.5px, 0.92vw, 13px); line-height: 1.5; color: rgba(255, 255, 255, 0.72); } /* ----- Ekrane të vogla ----- */ @media (max-width: 991px) { .kl-proc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } .kl-proc-step:nth-child(2) .kl-proc-dots { display: none; } .kl-band-row { grid-template-columns: minmax(0, 1fr); align-items: start; } .kl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kl-stat:nth-child(3) { border-left: 0; } .kl-stat:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.18); } } @media (max-width: 575px) { .kl-proc-steps { grid-template-columns: minmax(0, 1fr); } .kl-proc-dots { display: none !important; } .kl-band { min-height: 0; padding-top: 220px; } } /* ============================================================ 5 · PARA & PAS — krahasim me vijë që rrëshqet ------------------------------------------------------------ ⚠ Fotot janë SHEMBUJ (Pexels 3845855 / 3845856, i njëjti sesion fotografik) vetëm për të treguar si punon komponenti. Duhen zëvendësuar me raste reale të klinikës, me pëlqimin me shkrim të pacientit. ============================================================ */ .kl-ba-sec { padding: clamp(56px, 7vw, 100px) 0; } .kl-ba-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.55fr); gap: clamp(28px, 4vw, 64px); align-items: center; width: 100%; padding: 0 clamp(20px, 5vw, 60px); } .kl-ba-head h2 { font-family: "Poppins", sans-serif; font-size: clamp(26px, 3.1vw, 42px); font-weight: 700; line-height: 1.14; letter-spacing: -0.03em; color: #0e4b6b; } .kl-ba-head p { margin-top: 20px; max-width: 40ch; font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.72; color: rgba(19, 40, 58, 0.58); } .kl-ba-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 500; color: var(--accent-strong); } .kl-ba-hint i { font-size: 11px; } /* ----- Krahasuesi ----- */ .kl-ba { --pos: 50%; position: relative; aspect-ratio: 14 / 9; margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 26px 60px -32px rgba(19, 40, 58, 0.55); /* lejo rrëshqitjen vertikale të faqes në telefon */ touch-action: pan-y; } .kl-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } /* Fotoja "pas" pritet nga e majta sipas pozicionit të vijës */ .kl-ba-clip { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); } /* ----- Vija dhe kapësja ----- */ .kl-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.25); pointer-events: none; } .kl-ba-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; grid-auto-flow: column; place-items: center; gap: 4px; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 11px; box-shadow: 0 8px 22px rgba(19, 40, 58, 0.35); } /* Rrëshqitësi i vërtetë — i padukshëm, mbulon gjithë foton. Kështu punon me maus, me gisht dhe me shigjetat e tastierës. */ .kl-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; } .kl-ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; } .kl-ba-range::-moz-range-thumb { width: 44px; height: 100%; border: 0; } .kl-ba-range:focus-visible + .kl-ba-line .kl-ba-grip { outline: 3px solid var(--accent); outline-offset: 3px; } /* ----- Etiketat ----- */ .kl-ba-tag { position: absolute; top: 16px; z-index: 2; padding: 7px 15px; border-radius: 100px; background: rgba(9, 26, 38, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: "Poppins", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; pointer-events: none; } .kl-ba-tag--para { left: 16px; } .kl-ba-tag--pas { right: 16px; } /* ----- Ekrane të vogla ----- */ @media (max-width: 991px) { .kl-ba-inner { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 575px) { .kl-ba { aspect-ratio: 4 / 3; border-radius: 18px; } .kl-ba-grip { width: 42px; height: 42px; } } /* ============================================================ 6 · EKIPI — kokë me dy kolona + shirit që rrjedh vetvetiu ------------------------------------------------------------ Shiriti lëviz me JS (translate3d). Ndalon kur miu është sipër dhe lejon tërheqje me dorë. Fotot vijnë me përmasa të ndryshme, ndaj kutia ka raport të fiksuar dhe imazhi pritet. ============================================================ */ .kl-team { padding: clamp(56px, 7vw, 100px) 0; background: var(--bg-soft); overflow: hidden; } .kl-team-inner { width: 100%; padding: 0 clamp(20px, 5vw, 60px); } /* ----- Koka ----- */ .kl-team-head { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 64px); align-items: end; } .kl-team-badge { display: flex; align-items: center; gap: 12px; } .kl-team-dots { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; } .kl-team-dots i { width: 4px; height: 4px; border-radius: 50%; background: #33cfff; } .kl-team-dots i:nth-child(even) { background: #1f86c9; } .kl-team-kicker { font-family: "Poppins", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #1f86c9; } .kl-team-head-left h2 { margin-top: 18px; font-family: "Poppins", sans-serif; font-size: clamp(26px, 3.1vw, 42px); font-weight: 700; line-height: 1.14; letter-spacing: -0.03em; color: #0e4b6b; } .kl-team-sub { font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.72; color: rgba(19, 40, 58, 0.58); } /* ----- Butoni: etiketë + kuti ikone, si dy blloqe ngjitur ----- */ .kl-team-btn { display: inline-flex; align-items: stretch; gap: 6px; margin-top: 24px; text-decoration: none; } .kl-team-btn-label { display: flex; align-items: center; padding: 0 22px; height: 46px; border-radius: 8px; background: var(--accent); font-family: "Poppins", sans-serif; font-size: 13.5px; font-weight: 600; color: #fff; transition: background 0.25s ease; } .kl-team-btn-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 8px; background: var(--accent); font-size: 13px; color: #fff; transition: background 0.25s ease; } .kl-team-btn-ico i { transition: transform 0.25s ease; } .kl-team-btn:hover .kl-team-btn-label, .kl-team-btn:hover .kl-team-btn-ico { background: var(--accent-strong); } .kl-team-btn:hover .kl-team-btn-ico i { transform: translateX(3px); } /* ----- Shiriti ----- */ .kl-ticker { position: relative; margin-top: clamp(30px, 3.4vw, 52px); overflow: hidden; cursor: grab; /* rrëshqitja vertikale e faqes mbetet e lirë; horizontalen e marrim ne */ touch-action: pan-y; } .kl-ticker.is-dragging { cursor: grabbing; } /* Skajet shkrihen me sfondin, që kartat të mos priten befas */ .kl-ticker::before, .kl-ticker::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(20px, 5vw, 80px); pointer-events: none; } .kl-ticker::before { left: 0; background: linear-gradient(90deg, var(--bg-soft), rgba(242, 248, 252, 0)); } .kl-ticker::after { right: 0; background: linear-gradient(270deg, var(--bg-soft), rgba(242, 248, 252, 0)); } .kl-ticker-track { display: flex; gap: clamp(14px, 1.4vw, 22px); width: max-content; will-change: transform; } /* ----- Karta ----- */ .kl-member { flex: 0 0 clamp(196px, 19vw, 268px); user-select: none; } .kl-member-photo { overflow: hidden; aspect-ratio: 3 / 4; border-radius: 14px; background: #dbecf9; } .kl-member-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; /* që tërheqja të mos nisë "drag" të imazhit */ pointer-events: none; -webkit-user-drag: none; } /* Fotoja e laboratorit është horizontale dhe fytyra bie djathtas */ .kl-member.is-lab .kl-member-photo img { object-position: 68% 30%; } .kl-member-name { margin-top: 16px; font-family: "Poppins", sans-serif; font-size: clamp(14.5px, 1.2vw, 17px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: #0e4b6b; } .kl-member-role { margin-top: 5px; font-size: clamp(12px, 0.95vw, 13.5px); line-height: 1.5; color: rgba(19, 40, 58, 0.5); } .kl-member-role em { font-style: italic; } /* ----- Ekrane të vogla ----- */ @media (max-width: 991px) { .kl-team-head { grid-template-columns: minmax(0, 1fr); align-items: start; } } @media (max-width: 575px) { .kl-member { flex-basis: 168px; } .kl-team-btn-label { padding: 0 18px; } } /* ============================================================ 7 · DËSHMI — tri kolona që rrjedhin vertikalisht ------------------------------------------------------------ Çdo kolonë ka shpejtësinë e vet (data-rev-col), që rrjedhja të mos duket e bllokuar. Skajet lart e poshtë shkrihen me mask, kështu kartat nuk priten befas. Në vend të fotove përdorim inicialet — pacientët rrallë japin foto, dhe kështu s'ka nevojë për fytyra të shpikura. ============================================================ */ .kl-rev { padding: clamp(56px, 7vw, 100px) 0; } .kl-rev-inner { width: 100%; padding: 0 clamp(20px, 5vw, 60px); } /* ----- Koka, në qendër ----- */ .kl-rev-head { max-width: 620px; margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; } .kl-rev-tag { display: inline-block; padding: 7px 16px; border: 1px solid rgba(31, 134, 201, 0.25); border-radius: 8px; background: #fff; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 500; color: #1f86c9; } .kl-rev-head h2 { margin-top: 20px; font-family: "Poppins", sans-serif; font-size: clamp(26px, 3.1vw, 42px); font-weight: 700; line-height: 1.14; letter-spacing: -0.03em; color: #0e4b6b; } .kl-rev-head > p { margin-top: 16px; font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.72; color: rgba(19, 40, 58, 0.58); } /* ----- Kolonat ----- */ .kl-rev-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px); height: clamp(460px, 52vw, 620px); } .kl-rev-col { overflow: hidden; /* Shkrirja lart e poshtë — e njëjta maskë për të dy shtresat */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%); } .kl-rev-track { display: flex; flex-direction: column; gap: clamp(14px, 1.5vw, 22px); will-change: transform; } /* ----- Karta ----- */ .kl-rev-card { flex: none; padding: clamp(18px, 1.8vw, 24px); border: 1px solid rgba(31, 134, 201, 0.18); border-radius: 12px; background: #fff; } .kl-rev-who { display: flex; align-items: center; gap: 12px; } .kl-rev-ava { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, #dbecf9, #bcdcf3); font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: -0.02em; color: #146a9e; } .kl-rev-name { font-family: "Poppins", sans-serif; font-size: clamp(14px, 1.1vw, 15.5px); font-weight: 600; letter-spacing: -0.02em; color: #0e4b6b; } .kl-rev-meta { margin-top: 2px; font-size: clamp(11.5px, 0.9vw, 12.5px); color: rgba(31, 134, 201, 0.85); } .kl-rev-text { margin-top: 14px; font-size: clamp(12.5px, 1vw, 14px); line-height: 1.68; color: rgba(19, 40, 58, 0.62); } /* ----- Ekrane të vogla ----- */ @media (max-width: 900px) { /* Kolona e tretë hiqet, që kartat të mos ngushtohen shumë */ .kl-rev-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); height: clamp(420px, 62vw, 520px); } .kl-rev-col:nth-child(3) { display: none; } } @media (max-width: 575px) { .kl-rev-cols { grid-template-columns: minmax(0, 1fr); height: 440px; } .kl-rev-col:nth-child(2) { display: none; } } /* ============================================================ 8 · CTA — rezervimi ------------------------------------------------------------ Sfondi kalon nga blu e çelët lart te bardha poshtë, që fotoja e personit të shkrihet me faqen. Fotoja qëndron poshtë dhe pritet nga skaji i seksionit (overflow: hidden). ============================================================ */ .kl-cta { position: relative; overflow: hidden; padding-top: clamp(56px, 7vw, 100px); background: linear-gradient(180deg, #d9ebff 0%, #ffffff 52%, #fafcfe 100%); text-align: center; } .kl-cta-inner { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); } .kl-cta-tag { display: inline-block; padding: 7px 16px; border: 1px solid rgba(31, 134, 201, 0.25); border-radius: 8px; background: #fff; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 500; color: #1f86c9; } .kl-cta h2 { margin-top: 22px; font-family: "Poppins", sans-serif; font-size: clamp(30px, 4vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; color: #0e4b6b; } .kl-cta > .kl-cta-inner > p { margin-top: 16px; font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.7; color: rgba(19, 40, 58, 0.6); } .kl-cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 28px; } .kl-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 0 26px; height: 50px; border-radius: 6px; background: var(--accent); box-shadow: 0 1px 2px -1px rgba(14, 50, 117, 0.19), 0 2px 6px -2px rgba(14, 50, 117, 0.17), 0 10px 26px -3px rgba(14, 50, 117, 0.18); font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; transition: background 0.25s ease, transform 0.25s ease; } .kl-cta-btn:hover { background: var(--accent-strong); transform: translateY(-2px); } .kl-cta-btn-ico i { display: block; font-size: 12px; transition: transform 0.25s ease; } .kl-cta-btn:hover .kl-cta-btn-ico i { transform: translateX(3px); } .kl-cta-tel { display: inline-flex; align-items: center; gap: 8px; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 500; color: #146a9e; text-decoration: none; } .kl-cta-tel:hover { text-decoration: underline; } .kl-cta-tel i { font-size: 12px; opacity: 0.7; } /* ----- Fotoja ----- */ .kl-cta-media { position: relative; z-index: 1; width: min(100% - 40px, 470px); margin: clamp(20px, 2.4vw, 36px) auto 0; height: clamp(240px, 32vw, 400px); /* Fotoja s'ka sfond transparent — sfondi i saj është gri studioje. E ndriçojmë pak që t'i afrohet së bardhës dhe i shkrijmë skajet, kështu nuk duket si drejtkëndësh i ngjitur mbi gradientin. */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%), linear-gradient(180deg, #000 38%, transparent 96%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%), linear-gradient(180deg, #000 38%, transparent 96%); -webkit-mask-composite: source-in; mask-composite: intersect; } .kl-cta-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: brightness(1.07) saturate(1.04); } /* ----- Ekrane të vogla ----- */ @media (max-width: 575px) { .kl-cta-media { height: 220px; } .kl-cta-actions { flex-direction: column; gap: 14px; } } /* ============================================================ SHKRIRJA E SKAJEVE TË BANDËS + DISTANCA E CTA-së ------------------------------------------------------------ Banda me foto priste befas lart e poshtë. Tani skajet shkrihen me të njëjtën kurbë si te .kl-hero-fade — jo gradient linear, sepse linearja lë një vijë të dukshme aty ku nis shkrirja. Lart shkrihet me #f4f8fb (ngjyra e bllokut gri sipër), poshtë me të bardhën e faqes. ============================================================ */ .kl-band { /* hapësirë poshtë statistikave, që shkrirja e poshtme të bjerë nën to dhe teksti i bardhë të mbetet i lexueshëm */ padding-bottom: clamp(64px, 7.5vw, 110px); } /* Përmbajtja qëndron gjithmonë mbi shkrirjet */ .kl-band .kl-proc-inner { position: relative; z-index: 1; } .kl-band::before, .kl-band::after { content: ""; position: absolute; right: 0; left: 0; z-index: 0; pointer-events: none; } /* ----- Skaji i sipërm: shkrihet me bllokun gri ----- */ .kl-band::before { top: 0; height: clamp(130px, 15vw, 215px); background: linear-gradient( 180deg, rgb(244, 248, 251) 0%, rgba(244, 248, 251, 0.995) 12%, rgba(244, 248, 251, 0.97) 22%, rgba(244, 248, 251, 0.92) 31%, rgba(244, 248, 251, 0.84) 39%, rgba(244, 248, 251, 0.73) 47%, rgba(244, 248, 251, 0.6) 55%, rgba(244, 248, 251, 0.46) 63%, rgba(244, 248, 251, 0.33) 71%, rgba(244, 248, 251, 0.21) 79%, rgba(244, 248, 251, 0.12) 86%, rgba(244, 248, 251, 0.05) 93%, rgba(244, 248, 251, 0) 100% ); } /* ----- Skaji i poshtëm: shkrihet me të bardhën e faqes ----- */ .kl-band::after { bottom: 0; height: clamp(72px, 8.4vw, 124px); background: linear-gradient( 0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } /* Rrezja poshtë nuk duhet më — skajin e mbyll shkrirja */ .kl-band { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* ----- CTA: 60px larg footer-it ----- */ .kl-cta { margin-bottom: 60px; } /* ============================================================ SHKRIRJA E SKAJIT TË SIPËRM TË BLLOKUT "PROCESI" ------------------------------------------------------------ Blloku gri niste befas mbi faqen e bardhë. Tani ngjyra e tij hyn gradualisht nga e bardha, me të njëjtën kurbë si shkrirjet e tjera. Shkrirja është shtresë e background-it, jo pseudo-element — kështu teksti i kryeradhës qëndron natyrshëm sipër dhe nuk ka nevojë për z-index. ============================================================ */ .kl-proc-top { background: linear-gradient( 180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ) top left / 100% clamp(120px, 14vw, 200px) no-repeat, #f4f8fb; } /* ============================================================ SHKRIRJA E SKAJEVE TË SEKSIONIT "EKIPI" ------------------------------------------------------------ Sfondi i tij (--bg-soft) priste befas mbi e nën faqen e bardhë. Tani hyn e del gradualisht, me të njëjtën kurbë si shkrirjet e tjera. Sërish si shtresa background-i, jo pseudo-elemente — përmbajtja qëndron natyrshëm sipër. ============================================================ */ .kl-team { background: /* skaji i sipërm */ linear-gradient( 180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ) top left / 100% clamp(110px, 12vw, 180px) no-repeat, /* skaji i poshtëm */ linear-gradient( 0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ) bottom left / 100% clamp(90px, 10vw, 150px) no-repeat, var(--bg-soft); } /* ============================================================ RRETH NESH · 1 · HERO ------------------------------------------------------------ Faqja about.html. Korniza me foto nuk shkon deri në skaj — rri ~56px larg tij, me qoshe të rrumbullakosura, ashtu si modeli. Pill-i i rezervimit noton lart-djathtas mbi xham të turbullt, titulli i madh zë këndin poshtë-majtas. ============================================================ */ .kla-hero { /* hapësirë sa header-i i fiksuar (110px + 16px top + frymë) */ padding: 146px var(--kla-pad-x) var(--kla-sec); } .kla-hero-frame { position: relative; max-width: 1920px; margin: 0 auto; height: min(760px, calc(100vh - 178px)); min-height: 460px; border-radius: clamp(20px, 2.2vw, 40px); overflow: hidden; /* mban shtresat brenda kornizës, pa u përzier me sfondin e faqes */ isolation: isolate; } /* ----- Fotoja ----- */ .kla-hero-media, .kla-hero-media img { position: absolute; inset: 0; } .kla-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; /* fotoja e ambientit është e ndriçuar fort dhe del e shpëlarë — pak kontrast e ngopje ia kthejnë bluen karrigeve */ filter: saturate(1.12) contrast(1.08); } /* ----- Errësimi: poshtë për titullin, majtas për thellësi ----- */ .kla-hero-veil { position: absolute; inset: 0; background: /* Errësimi kulmon në brezin ku rri titulli, jo në fund fare — poshtë e merr shkrirja e bardhë dhe do dilte gri e turbullt. */ linear-gradient( to top, rgba(7, 22, 35, 0.26) 0%, rgba(7, 22, 35, 0.5) 11%, rgba(7, 22, 35, 0.7) 20%, rgba(7, 22, 35, 0.7) 34%, rgba(7, 22, 35, 0.5) 46%, rgba(7, 22, 35, 0.26) 60%, rgba(7, 22, 35, 0.08) 76%, rgba(7, 22, 35, 0) 90% ), linear-gradient(105deg, rgba(7, 22, 35, 0.34) 0%, rgba(7, 22, 35, 0) 58%), /* vinjetim i lehtë, që qoshet të mos ikin në të bardhë */ radial-gradient(120% 90% at 50% 30%, rgba(7, 22, 35, 0) 45%, rgba(7, 22, 35, 0.22) 100%); } /* ----- Shkrirja poshtë: korniza humbet në të bardhën e faqes ----- E njëjta kurbë si te .kl-hero-fade i kreut — jo gradient linear, sepse ai lë një vijë të dukshme aty ku nis shkrirja. Rri mbi foton (z-index 1) por nën titullin (z-index 2), që qoshet e poshtme të rrumbullakosura të treten në faqe. */ .kla-hero-fade { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; height: clamp(120px, 17vh, 210px); pointer-events: none; background: linear-gradient( 0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } /* ----- Pill-i "Rezervo vizitë" ----- */ /* Mbështjellësi merr animacionin e hyrjes, që hover-i i lidhjes të mos përplaset me transform-in e keyframe-it. */ .kla-hero-pill-wrap { position: absolute; top: clamp(16px, 2.4vw, 40px); right: clamp(16px, 2.4vw, 40px); z-index: 3; } .kla-hero-pill { display: inline-flex; align-items: center; gap: clamp(12px, 1.4vw, 24px); padding: clamp(7px, 0.7vw, 12px) clamp(10px, 1vw, 16px) clamp(7px, 0.7vw, 12px) clamp(18px, 1.8vw, 32px); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.34); background: rgba(31, 134, 201, 0.52); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 10px 30px rgba(9, 26, 40, 0.18); transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; } .kla-hero-pill:hover { background: rgba(31, 134, 201, 0.78); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(9, 26, 40, 0.3); } .kla-hero-pill:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .kla-hero-pill-txt { font-family: "Poppins", sans-serif; font-size: clamp(18px, 2.1vw, 40px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: #fff; white-space: nowrap; } .kla-hero-pill-ico { flex: 0 0 auto; width: clamp(32px, 3.4vw, 56px); height: clamp(32px, 3.4vw, 56px); } .kla-hero-pill-ico svg { display: block; width: 100%; height: 100%; } /* Shigjeta rrëshqet pak jashtë me kalimin e miut */ .kla-hero-arrow { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .kla-hero-pill:hover .kla-hero-arrow { transform: translate(3px, -3px); } /* ----- Titulli ----- */ .kla-hero-title { position: absolute; z-index: 2; left: clamp(20px, 3vw, 64px); right: clamp(20px, 3vw, 64px); /* rri mbi shkrirjen e bardhë, që të mos humbasë në të */ bottom: clamp(104px, 14.5vh, 178px); } .kla-hero-title h1 { margin: 0; font-family: "Poppins", sans-serif; font-size: clamp(44px, 10.5vw, 186px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.92; color: #fff; text-shadow: 0 2px 30px rgba(9, 26, 40, 0.28); } /* ----- Varianti i faqes së rezervimit ----- */ /* Kompozim diagonal: titulli lart-majtas në kuti qelqi, pilula poshtë-djathtas. Pilula ndalon mbi shkrirjen e bardhë — më poshtë do të notonte mbi të bardhë në vend që të rrinte mbi foto. */ .kla-hero--book .kla-hero-title { top: clamp(18px, 2.6vw, 44px); right: auto; bottom: auto; max-width: min(94%, 1200px); } .kla-hero--book .kla-hero-title h1 { display: inline-block; padding: clamp(8px, 0.95vw, 16px) clamp(16px, 1.8vw, 32px); border-radius: clamp(12px, 1.3vw, 22px); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(9, 26, 40, 0.4); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); font-size: clamp(32px, 6.2vw, 104px); line-height: 1.04; /* kutia e jep vetë kontrastin — hija do ta turbullonte */ text-shadow: none; } .kla-hero--book .kla-hero-pill-wrap { top: auto; bottom: clamp(100px, 14vh, 172px); right: clamp(16px, 2.4vw, 40px); } @media (max-width: 992px) { .kla-hero--book .kla-hero-pill-wrap { bottom: clamp(84px, 12vh, 130px); } } /* ----- Hyrja ----- */ @keyframes kla-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes kla-frame-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } } .kla-hero-frame { animation: kla-frame-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; } .kla-hero-pill-wrap { animation: kla-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; } .kla-hero-title { animation: kla-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; } @media (prefers-reduced-motion: reduce) { .kla-hero-frame, .kla-hero-pill-wrap, .kla-hero-title { animation: none; } .kla-hero-pill, .kla-hero-arrow { transition: none; } } /* ----- Ekrane të vogla ----- */ @media (max-width: 992px) { .kla-hero { /* header-i bie në 84px + 10px top */ padding-top: 116px; } .kla-hero-frame { height: min(600px, calc(100vh - 148px)); min-height: 400px; } } @media (max-width: 700px) { /* Si te modeli — pill-i zhduket; rezervimi mbetet te menuja. */ .kla-hero-pill-wrap { display: none; } .kla-hero-frame { height: min(520px, calc(100vh - 140px)); min-height: 340px; } .kla-hero-title h1 { font-size: clamp(40px, 14vw, 72px); } } /* ============================================================ RRETH NESH · kicker i përbashkët ------------------------------------------------------------ E ndajnë misioni, historia dhe certifikimet. Bento-ja dhe kontakti s'e përdorin — ato nisin drejt me titullin brenda kornizës blu. ============================================================ */ .kla-kicker { display: inline-block; margin-bottom: clamp(16px, 1.8vw, 26px); font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); } /* ============================================================ RRETH NESH · 3 · MISIONI & VLERAT ------------------------------------------------------------ Bllok i ajrosur mbi të bardhë, pa kuti — me qëllim. Vjen mes dy kornizave blu (bento-ja lart, kontakti poshtë) dhe faqja ka nevojë të marrë frymë. Vlerat i ndan vetëm një vijë floku. ============================================================ */ /* z-index: 0 krijon kontekst shtresimi, që shtresat negative (aurora, nervi 3D) të mbeten brenda seksionit dhe të mos bien pas .site-bg-së së faqes. */ .kla-mission { padding: var(--kla-sec) var(--kla-pad-x); overflow-x: clip; /* `clip`, jo `hidden` — s'krijon kontejner skrollimi */ scroll-margin-top: 130px; } /* ----- Paneli ----- */ /* E njëjta blu dhe i njëjti gradient si korniza e bento-s, që të tri blloqet e faqes të lexohen si i njëjti material. Brezi vertikal është i gjerë, që shkrirjet të kenë ku të bien. Shtresat: sfondi (0) → nervi 3D (1) → shkrirjet (2) → teksti (3). */ .kla-mission-inner { position: relative; z-index: 0; max-width: 1920px; margin: 0 auto; padding: clamp(56px, 6.6vw, 128px) clamp(24px, 4vw, 88px) clamp(60px, 6.6vw, 118px); border-radius: clamp(26px, 2.4vw, 42px); background: linear-gradient(165deg, #eef6fc 0%, #dbecf9 42%, #cfe4f5 100%); overflow: hidden; /* pret canvas-in e shkrirjet te qoshet */ } /* Shkrirjet lart e poshtë — e njëjta kurbë me 13 pika si te .kl-hero-fade dhe si te kornizat e bento-s e kontaktit. Rrinë mbi nervin 3D, ndaj e shuajnë edhe atë drejt skajeve. */ .kla-mission-inner::before, .kla-mission-inner::after { content: ""; position: absolute; right: 0; left: 0; z-index: 2; height: clamp(44px, 5vw, 92px); pointer-events: none; } .kla-mission-inner::before { top: 0; background: linear-gradient( 180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } .kla-mission-inner::after { bottom: 0; background: linear-gradient( 0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } /* Teksti rri mbi shkrirjet dhe mbi canvas-in */ .kla-mission-inner > .kla-kicker, .kla-mission-inner > .kla-mission-lead, .kla-mission-inner > .kla-mission-sub, .kla-mission-inner > .kla-mission-flow { position: relative; z-index: 3; } /* ----- Nervi 3D ----- */ /* Maska e shuan drejt skajeve, që rrjeti të mos pritet me një vijë të fortë aty ku mbaron paneli — njësoj si shkrirjet e hero-s. */ .kla-mission-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; animation: kla-nerve3d-in 1.4s ease-out 0.25s forwards; -webkit-mask-image: radial-gradient(92% 86% at 50% 46%, #000 48%, transparent 100%); mask-image: radial-gradient(92% 86% at 50% 46%, #000 48%, transparent 100%); } .kla-mission-canvas canvas { display: block; width: 100%; height: 100%; } @keyframes kla-nerve3d-in { to { opacity: 1; } } /* Titulli me gradient: fjalët e fundit shuhen drejt blusë, ndaj fraza duket se rrjedh brenda seksionit. Ngjyra e fortë mbetet fallback nëse background-clip s'mbështetet. */ /* Një frazë e vetme, sa më e madhe. Peshën e mban gjatësia e shkurtër, jo madhësia vetëm. */ .kla-mission-lead { margin: 0; max-width: 14ch; font-family: "Poppins", sans-serif; font-size: clamp(42px, 7.4vw, 128px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.98; color: var(--ink); background: linear-gradient(106deg, #13283a 0%, #13283a 38%, #146a9e 72%, #2b9ade 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-wrap: balance; } .kla-mission-sub { margin: clamp(20px, 2.2vw, 34px) 0 0; max-width: 54ch; font-size: clamp(15px, 1.3vw, 21px); line-height: 1.6; color: var(--body); text-wrap: pretty; } /* Ena mban nervin dhe listën; nervi pozicionohet ndaj saj, ndaj
    mbetet me vetëm
  • brenda — HTML i vlefshëm. */ .kla-mission-flow { position: relative; margin-top: clamp(72px, 8vw, 132px); } .kla-mission-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); } /* ----- Nervi horizontal ----- */ /* Lartësia 80px = lartësia e viewBox-it, ndaj shtrirja është vetëm horizontale: vala mbetet ±6px rreth qendrës dhe nyjet e kartave, që rrinë te skaji i sipërm, bien mbi të. */ .kla-mission-nerve { position: absolute; top: -40px; left: 0; width: 100%; height: 80px; pointer-events: none; overflow: visible; } .kla-mission-nerve.reveal, .kla-mission-nerve.reveal.in-view { transform: none; } .kla-mission-halo { opacity: 0.3; } .kla-mission-line, .kla-mission-halo { stroke-dasharray: 1300; stroke-dashoffset: 1300; } .kla-mission-nerve.in-view .kla-mission-line, .kla-mission-nerve.in-view .kla-mission-halo { animation: kla-mission-draw 1.8s cubic-bezier(0.45, 0, 0.15, 1) forwards; } .kla-mission-imp { opacity: 0; stroke-dasharray: 60 1300; stroke-dashoffset: 1300; } .kla-mission-nerve.in-view .kla-mission-imp { opacity: 0.9; animation: kla-mission-imp 4.5s linear 1.8s infinite; } @keyframes kla-mission-draw { to { stroke-dashoffset: 0; } } @keyframes kla-mission-imp { from { stroke-dashoffset: 1300; } to { stroke-dashoffset: 0; } } /* ----- Kartat ----- */ /* Qelq mbi nervin 3D: sfondi është pjesërisht i tejdukshëm me qëllim, që rrjeti të ndihet nëpër kartë dhe seksioni të lexohet si një shtresë e vetme, jo si tekst i vendosur mbi një sfond. */ /* PA `overflow: hidden` me qëllim: nyja dhe numri dalin jashtë kufirit të kartës dhe do të priteshin. Rripi i dritës është shtresë sfondi që rrëshqet me `background-position`, jo element që kërkon prerje. */ /* Qelq mbi blunë e panelit — i njëjti trajtim si kartat e bento-s. Pa `overflow: hidden`: nyja dhe numri dalin jashtë kufirit dhe do të priteshin. Rripi i dritës është shtresë sfondi që rrëshqet. */ .kla-mission-value { position: relative; padding: clamp(34px, 3.4vw, 54px) clamp(20px, 2vw, 32px) clamp(24px, 2.4vw, 38px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: clamp(18px, 1.6vw, 26px); background-image: linear-gradient(104deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0) 58%), linear-gradient(168deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 253, 0.72) 100%); background-repeat: no-repeat; background-size: 260% 100%, 100% 100%; background-position: 210% 0, 0 0; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.04), 0 18px 40px -24px rgba(14, 75, 107, 0.42); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.45s ease, box-shadow 0.45s ease, background-position 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .kla-mission-value:hover { transform: translateY(-5px); border-color: rgba(31, 134, 201, 0.28); background-position: -70% 0, 0 0; box-shadow: 0 2px 3px rgba(14, 75, 107, 0.05), 0 34px 60px -26px rgba(14, 75, 107, 0.5); } /* Nyja mbi nerv — rri te skaji i sipërm, mbi vijën horizontale */ .kla-mission-value::before { content: ""; position: absolute; top: -6px; left: clamp(20px, 2vw, 32px); z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #6cc4f5 0%, #1f86c9 55%, #146a9e 100%); /* Unaza e bardhë e "pret" nervin pas nyjes — si te kronologjia */ box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(31, 134, 201, 0.16), 0 0 16px 2px rgba(31, 134, 201, 0.45); transition: box-shadow 0.45s ease; } .kla-mission-value:hover::before { box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(31, 134, 201, 0.26), 0 0 26px 5px rgba(31, 134, 201, 0.6); } /* Numri fantazmë — tërësisht brenda kartës, që të mos pritet nga qoshet e rrumbullakosura. Shuhet nga lart poshtë. */ .kla-mission-num { position: absolute; top: clamp(8px, 0.9vw, 16px); right: clamp(12px, 1.3vw, 22px); font-family: "Poppins", sans-serif; font-size: clamp(46px, 4.8vw, 86px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.9; color: transparent; background: linear-gradient(180deg, rgba(20, 106, 158, 0.2) 0%, rgba(20, 106, 158, 0) 88%); -webkit-background-clip: text; background-clip: text; pointer-events: none; transition: background 0.5s ease; } .kla-mission-value:hover .kla-mission-num { background: linear-gradient(180deg, rgba(20, 106, 158, 0.36) 0%, rgba(20, 106, 158, 0) 88%); -webkit-background-clip: text; background-clip: text; } .kla-mission-value h3, .kla-mission-value p { position: relative; z-index: 1; } .kla-mission-value h3 { margin: 0 0 10px; font-family: "Poppins", sans-serif; font-size: clamp(17px, 1.4vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); text-wrap: balance; } .kla-mission-value p { margin: 0; font-size: clamp(13.5px, 0.98vw, 15.5px); line-height: 1.7; color: var(--body); text-wrap: pretty; } @media (max-width: 1100px) { .kla-mission-values { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(30px, 4vw, 48px); } /* Nervi lidh vetëm një rresht; me dy rreshta s'ka kuptim */ .kla-mission-nerve { display: none; } } @media (max-width: 600px) { .kla-mission-values { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ RRETH NESH · 4 · HISTORIA ------------------------------------------------------------ Kronologji me shinë vertikale: viti majtas, ngjarja djathtas. Shina është border-left i trupit, jo element më vete; pika del nga ::before dhe "pritet" mbi shinë me një unazë të bardhë. Zëri i fundit ("Sot") e humb shinën, që lista të mos varet. ============================================================ */ .kla-time { padding: var(--kla-sec) var(--kla-pad-x); overflow-x: clip; scroll-margin-top: 130px; } .kla-time-inner { max-width: 1560px; margin: 0 auto; } .kla-time-head h2 { margin: 0 0 clamp(38px, 4.5vw, 76px); font-family: "Poppins", sans-serif; font-size: clamp(26px, 3.1vw, 50px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.12; color: var(--ink); text-wrap: balance; } /* Shina mban nervin dhe listën. Gjerësia e kolonës së vitit dhe hapësira janë ndryshore, që nervi të vendoset saktësisht mbi kufirin e trupit pa i përsëritur clamp-et në dy vende. */ .kla-time-rail { --kla-year-w: clamp(60px, 6.5vw, 116px); --kla-gap: clamp(16px, 2vw, 40px); position: relative; max-width: 1100px; } .kla-time-list { list-style: none; margin: 0; padding: 0; } .kla-time-item { display: grid; grid-template-columns: var(--kla-year-w) minmax(0, 1fr); gap: var(--kla-gap); } /* ----- Nervi ----- */ /* Trungu rri te x=40 i viewBox-it 80 njësi të gjerë, ndaj e zhvendosim 40px majtas që të bjerë pikërisht mbi kufirin e trupit. */ .kla-nerve { position: absolute; top: 0; left: calc(var(--kla-year-w) + var(--kla-gap) - 40px); width: 80px; height: 100%; pointer-events: none; overflow: visible; } /* .reveal e ul opacity-n; transformin s'e duam — nervi s'duhet të rrëshqasë, vetëm të vizatohet. */ .kla-nerve.reveal, .kla-nerve.reveal.in-view { transform: none; } .kla-nerve-halo { opacity: 0.16; } .kla-nerve-path, .kla-nerve-halo { stroke-dasharray: 1400; stroke-dashoffset: 1400; } .kla-nerve.in-view .kla-nerve-path, .kla-nerve.in-view .kla-nerve-halo { animation: kla-nerve-draw 2.2s cubic-bezier(0.45, 0, 0.15, 1) forwards; } .kla-nerve-branches path { stroke-dasharray: 40; stroke-dashoffset: 40; } .kla-nerve.in-view .kla-nerve-branches path { animation: kla-nerve-branch 0.7s ease-out forwards; } /* Degët dalin pasi trungu ka kaluar pranë tyre */ .kla-nerve.in-view .kla-nerve-branches path:nth-child(1) { animation-delay: 0.5s; } .kla-nerve.in-view .kla-nerve-branches path:nth-child(2) { animation-delay: 0.9s; } .kla-nerve.in-view .kla-nerve-branches path:nth-child(3) { animation-delay: 1.3s; } .kla-nerve.in-view .kla-nerve-branches path:nth-child(4) { animation-delay: 1.7s; } .kla-nerve.in-view .kla-nerve-branches path:nth-child(5) { animation-delay: 2.05s; } /* Impulsi: një segment i shkurtër drite që bie poshtë trungut */ .kla-nerve-pulse { opacity: 0; stroke-dasharray: 70 1400; stroke-dashoffset: 1400; } .kla-nerve.in-view .kla-nerve-pulse { opacity: 0.9; animation: kla-nerve-pulse 5.5s linear 2.2s infinite; } @keyframes kla-nerve-draw { to { stroke-dashoffset: 0; } } @keyframes kla-nerve-branch { to { stroke-dashoffset: 0; } } @keyframes kla-nerve-pulse { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } } .kla-time-year { font-family: "Poppins", sans-serif; font-size: clamp(15px, 1.3vw, 22px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.5; color: var(--accent-strong); } /* Pa border-left: shinën e bën tani nervi SVG poshtë tekstit. */ .kla-time-body { position: relative; padding: 0 0 clamp(30px, 3.2vw, 54px) clamp(24px, 2.3vw, 44px); } /* Nyja mbi nerv — unaza e bardhë e "pret" fijen, aureola e ndez */ .kla-time-body::before { content: ""; position: absolute; top: 8px; left: -6px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #6cc4f5 0%, #1f86c9 55%, #146a9e 100%); box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(31, 134, 201, 0.16), 0 0 16px 2px rgba(31, 134, 201, 0.42); } .kla-time-item:last-child .kla-time-body { padding-bottom: 0; } /* "Sot" — nyja e mbyllur, me kontur, jo e plotë */ .kla-time-item.is-now .kla-time-body::before { background: #fff; box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 4px #fff, 0 0 0 7px rgba(31, 134, 201, 0.16), 0 0 18px 3px rgba(31, 134, 201, 0.4); } .kla-time-body h3 { margin: 0 0 8px; font-family: "Poppins", sans-serif; font-size: clamp(17px, 1.45vw, 25px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); text-wrap: balance; } .kla-time-body p { margin: 0; max-width: 62ch; font-size: clamp(13.5px, 0.98vw, 16px); line-height: 1.7; color: var(--body); text-wrap: pretty; } @media (max-width: 575px) { .kla-time-item { grid-template-columns: minmax(0, 1fr); gap: 6px; } /* Pa kolonën e vitit, nervi s'ka ku të bjerë — bien edhe nyjet */ .kla-time-body { padding-left: 0; padding-bottom: clamp(26px, 6vw, 34px); } .kla-time-body::before { display: none; } .kla-nerve { display: none; } } @media (prefers-reduced-motion: reduce) { /* Nervi shfaqet i vizatuar, pa u tërhequr, dhe impulsi ndalon */ .kla-nerve-path, .kla-nerve-halo, .kla-nerve-branches path { stroke-dashoffset: 0; animation: none !important; } .kla-nerve-pulse { display: none; } } /* ============================================================ RRETH NESH · 6 · CERTIFIKIMET & ANËTARËSITË ------------------------------------------------------------ Tri grupe listash mbi të bardhë. Çdo zë: emri i fortë lart, mbajtësi me shkronja të vogla poshtë — ndryshe lista bëhet mur teksti dhe askush s'e lexon. ============================================================ */ .kla-cert { padding: var(--kla-sec) var(--kla-pad-x); overflow-x: clip; scroll-margin-top: 130px; } .kla-cert-inner { max-width: 1560px; margin: 0 auto; } .kla-cert-head h2 { margin: 0 0 clamp(34px, 4vw, 66px); font-family: "Poppins", sans-serif; font-size: clamp(26px, 3.1vw, 50px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.12; color: var(--ink); text-wrap: balance; } .kla-cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 64px); } /* Kartë qelqi: sfond thuajse i tejdukshëm me blur, që rrjeti nervor i .site-bg të ndihet nëpër të. Sheen-i është një rrip drite që kalon diagonalisht një herë kur i afrohesh. */ .kla-cert-group { position: relative; padding: clamp(22px, 2.2vw, 38px); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: clamp(18px, 1.7vw, 28px); background: linear-gradient(168deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 253, 0.72) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.04), 0 16px 38px -22px rgba(14, 75, 107, 0.4); overflow: hidden; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.45s ease; } .kla-cert-group:hover { transform: translateY(-4px); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.05), 0 32px 58px -26px rgba(14, 75, 107, 0.46); } .kla-cert-group::after { content: ""; position: absolute; top: -60%; left: -140%; width: 60%; height: 220%; pointer-events: none; transform: rotate(18deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0) 100%); transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .kla-cert-group:hover::after { left: 160%; } .kla-cert-group h3 { position: relative; margin: 0 0 clamp(18px, 2vw, 28px); padding-bottom: clamp(12px, 1.3vw, 18px); border-bottom: 1px solid var(--line); font-family: "Poppins", sans-serif; font-size: clamp(15px, 1.15vw, 19px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .kla-cert-group ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(16px, 1.7vw, 26px); } .kla-cert-group li { position: relative; padding-left: 20px; } .kla-cert-group li::before { content: ""; position: absolute; top: 9px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.55; } .kla-cert-group b { display: block; font-family: "Poppins", sans-serif; font-size: clamp(14px, 1.02vw, 16.5px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; color: var(--ink); } .kla-cert-group span { display: block; margin-top: 4px; font-size: clamp(12.5px, 0.9vw, 14.5px); line-height: 1.6; color: var(--body); text-wrap: pretty; } @media (max-width: 1100px) { .kla-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .kla-cert-grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .kla-mission::before { animation: none; } /* Nervi 3D vizaton një kuadër të vetëm (e trajton vetë nerve3d.js); këtu heqim vetëm hyrjen me zbehje. */ .kla-mission-canvas { opacity: 1; animation: none; } .kla-mission-value, .kla-mission-value::before, .kla-mission-num, .kla-cert-group, .kla-cert-group::after { transition: none; } .kla-mission-value:hover, .kla-cert-group:hover { transform: none; } /* Rripi i dritës nuk rrëshqet fare */ .kla-mission-value:hover { background-position: 210% 0, 0 0; } .kla-cert-group::after { display: none; } /* Nervi horizontal shfaqet i vizatuar; impulsi ndalon */ .kla-mission-line, .kla-mission-halo { stroke-dashoffset: 0; animation: none !important; } .kla-mission-imp { display: none; } } /* ============================================================ RRETH NESH · 5 · MJEKËT ------------------------------------------------------------ Rrjet kartash 2×3, jo rreshta që alternojnë majtas-djathtas. Secila kartë: emri me pilulat e specialitetit lart, ovali në mes, biografia poshtë. Qeliza e gjashtë është ftesa. Fotot janë ovale sepse burimet janë krejt të ndryshme — 480×480 katrore, 169×254 portret, 492×420 landscape dhe një prerje PNG. Në drejtkëndësh secila dukej ndryshe; elipsi me `object-fit: cover` i sjell të gjitha në një siluetë të vetme. Kufijtë me pika vijnë nga referenca, por me qoshe të rrumbullakosura: `border: 1px dashed` + `border-radius`. ============================================================ */ .kla-docs { padding: var(--kla-sec) var(--kla-pad-x); scroll-margin-top: 130px; /* .reveal i zhvendos elementet anash para se të hyjnë në ekran; pa këtë faqja fiton shirit horizontal skrollimi. `clip` në vend të `hidden` — nuk krijon kontejner skrollimi dhe s'prish sticky-n. */ overflow-x: clip; } .kla-docs-inner { max-width: 1560px; margin: 0 auto; } .kla-docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 30px); } /* ----- Karta ----- */ .kla-doc { display: flex; flex-direction: column; padding: clamp(20px, 2vw, 34px); border: 1px dashed rgba(31, 134, 201, 0.36); border-radius: clamp(20px, 2vw, 34px); background: linear-gradient(168deg, rgba(255, 255, 255, 0.72) 0%, rgba(242, 248, 252, 0.5) 100%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.45s ease, box-shadow 0.45s ease; } .kla-doc:hover { transform: translateY(-4px); border-color: rgba(31, 134, 201, 0.62); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.04), 0 26px 52px -28px rgba(14, 75, 107, 0.45); } /* ----- Koka: emri majtas, pilulat djathtas ----- */ .kla-doc-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 18px); padding-bottom: clamp(14px, 1.5vw, 22px); border-bottom: 1px dashed rgba(31, 134, 201, 0.3); } .kla-doc-name { margin: 0; font-family: "Poppins", sans-serif; font-size: clamp(19px, 1.7vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); } .kla-doc-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; } .kla-doc-tags li { padding: 6px 14px; border-radius: 999px; background: var(--kli-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kli-ink) 12%, transparent); color: var(--kli-ink); font-size: clamp(11.5px, 0.82vw, 13px); font-weight: 500; white-space: nowrap; } /* ----- Fotoja ----- */ /* Dy shtresa pa asnjë pseudo-element dhe pa `overflow`: vetë kutia është paneli me ngjyrë, dhe rri mbi të e zhvendosur lart- majtas. Kështu paneli duket vetëm poshtë-djathtas dhe fotoja fiton thellësi. Zhvendosja rritet lehtë me hover. Raporti 4/5 është portret sepse janë fytyra, dhe `object-position` e mban kokën lart në kuadër — burimi më i gjerë (492×420) pritet anash pa i prerë ballin. */ .kla-doc-media { position: relative; align-self: center; width: 100%; max-width: clamp(200px, 23vw, 330px); margin: clamp(26px, 2.8vw, 46px) clamp(10px, 1vw, 16px) clamp(22px, 2.4vw, 36px) 0; aspect-ratio: 4 / 5; border-radius: clamp(16px, 1.7vw, 26px); background: linear-gradient(150deg, #dbecf9 0%, #bcdcf3 100%); } .kla-doc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 16%; border-radius: inherit; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 24px 48px -26px rgba(14, 75, 107, 0.6); transform: translate(-12px, -12px); transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.55s ease; } .kla-doc:hover .kla-doc-media img { transform: translate(-17px, -17px) scale(1.012); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95), 0 32px 60px -26px rgba(14, 75, 107, 0.68); } /* ----- Biografia ----- */ .kla-doc-bio { margin: 0; font-size: clamp(13.5px, 0.95vw, 15.5px); line-height: 1.7; color: var(--body); text-wrap: pretty; } /* ----- Qeliza e gjashtë: ftesa ----- */ /* Blloku plot ngjyrë mbyll rrjetin, që qeliza e fundit të mos duket si vend bosh aty ku mbaruan mjekët. */ .kla-doc-cta { align-items: flex-start; justify-content: center; gap: clamp(14px, 1.5vw, 22px); border-style: solid; border-color: transparent; background: linear-gradient(165deg, #eef6fc 0%, #dbecf9 44%, #cfe4f5 100%); } .kla-doc-cta:hover { border-color: transparent; box-shadow: 0 2px 3px rgba(14, 75, 107, 0.05), 0 30px 56px -28px rgba(14, 75, 107, 0.5); } .kla-doc-cta h3 { margin: 0; font-family: "Poppins", sans-serif; font-size: clamp(22px, 2.1vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); text-wrap: balance; } .kla-doc-cta p { margin: 0; max-width: 40ch; font-size: clamp(13.5px, 0.98vw, 16px); line-height: 1.7; color: var(--body); text-wrap: pretty; } /* ----- Pilula ----- */ .kla-doc-pill { display: inline-flex; align-items: center; gap: clamp(12px, 1.2vw, 20px); margin-top: clamp(6px, 0.8vw, 12px); padding: clamp(5px, 0.45vw, 8px) clamp(6px, 0.55vw, 9px) clamp(5px, 0.45vw, 8px) clamp(16px, 1.3vw, 24px); border: 1px solid rgba(31, 134, 201, 0.34); border-radius: 999px; background: rgba(255, 255, 255, 0.7); text-decoration: none; transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .kla-doc-pill:hover { background: #fff; border-color: rgba(31, 134, 201, 0.6); transform: translateY(-2px); } .kla-doc-pill:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .kla-doc-pill-txt { font-family: "Poppins", sans-serif; font-size: clamp(15px, 1.15vw, 21px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); } .kla-doc-pill-ico { flex: 0 0 auto; width: clamp(28px, 2.2vw, 38px); height: clamp(28px, 2.2vw, 38px); } .kla-doc-pill-ico svg { display: block; width: 100%; height: 100%; } .kla-doc-arrow { transform-origin: 50% 50%; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1); } .kla-doc-pill:hover .kla-doc-arrow { transform: translate(3px, -3px); } /* ----- Ekrane të vogla ----- */ @media (max-width: 860px) { .kla-docs-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { /* Me gjerësi të vogël emri dhe pilulat nuk rrinë në një rresht */ .kla-doc-head { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (prefers-reduced-motion: reduce) { .kla-doc, .kla-doc-media, .kla-doc-media img, .kla-doc-pill, .kla-doc-arrow { transition: none; } .kla-doc:hover, .kla-doc-pill:hover { transform: none; } /* Fotoja e mban zhvendosjen — ajo është pjesë e pamjes, jo lëvizje */ .kla-doc:hover .kla-doc-media img { transform: translate(-12px, -12px); } .kla-doc-pill:hover .kla-doc-arrow { transform: none; } } /* ============================================================ RRETH NESH · 2 · BENTO — SHTYLLAT + SHIFRAT ------------------------------------------------------------ Kornizë me ngjyrë të butë që mban dy kolona kartash me një foto në mes, dhe poshtë tri shifrat. Kolonat anësore janë flex, JO qeliza grid-i. Kjo është me qëllim: kartat brenda secilës kolonë rriten sipas përmbajtjes së vet, ndaj kufiri mes dy kartave të majta nuk rreshtohet me atë të dy kartave të djathta — pikërisht si te referenca. Një grid me tri rreshta do t'i detyronte të rreshtoheshin. Lartësinë e rreshtit e përcakton fotoja e mesit; kartat shtrihen për ta mbushur. Ngjyrat e pilulave vijnë nga --kli-tint / --kli-ink inline, njësoj si tabs-et e shërbimeve te faqja kryesore. ============================================================ */ .kla-bento { padding: var(--kla-sec) var(--kla-pad-x); overflow-x: clip; /* .reveal i zhvendos kolonat anash */ scroll-margin-top: 130px; } .kla-bento-inner { max-width: 1920px; margin: 0 auto; } /* Brezi blu është i gjerë lart e poshtë dhe i ngushtë anash: shërben njëkohësisht si kornizë dhe si sipërfaqja ku bien shkrirjet. Pa hije — hija do të linte një kufi të fortë pikërisht aty ku blu-ja duhet të treten. */ .kla-bento-frame { position: relative; display: flex; flex-direction: column; gap: clamp(9px, 0.8vw, 14px); padding: clamp(38px, 4.4vw, 78px) clamp(9px, 0.8vw, 14px); border-radius: clamp(26px, 2.4vw, 42px); background: linear-gradient(165deg, #eef6fc 0%, #dbecf9 42%, #cfe4f5 100%); } /* Shkrirja lart dhe poshtë — e njëjta kurbë ease-in-out si te .kl-hero-fade dhe .kla-hero-fade. Një gradient linear do të linte një "vijë" të dukshme aty ku nis shkrirja; këto pika e shuajnë të bardhën gradualisht, pa kufi. */ .kla-bento-frame::before, .kla-bento-frame::after { content: ""; position: absolute; right: 0; left: 0; z-index: 0; height: clamp(38px, 4.4vw, 78px); pointer-events: none; } .kla-bento-frame::before { top: 0; border-radius: clamp(26px, 2.4vw, 42px) clamp(26px, 2.4vw, 42px) 0 0; background: linear-gradient( 180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } .kla-bento-frame::after { bottom: 0; border-radius: 0 0 clamp(26px, 2.4vw, 42px) clamp(26px, 2.4vw, 42px); background: linear-gradient( 0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } /* Përmbajtja rri gjithmonë mbi shkrirjet */ .kla-bento-top, .kla-bento-stats { position: relative; z-index: 1; } .kla-bento-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(9px, 0.8vw, 14px); } .kla-bento-col { display: flex; flex-direction: column; gap: clamp(9px, 0.8vw, 14px); } /* Rriten nga lartësia e vet, jo në pjesë të barabarta */ .kla-bento-col > .kla-bento-card { flex: 1 1 auto; } /* ----- Karta ----- */ .kla-bento-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(20px, 2vw, 34px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: clamp(18px, 1.7vw, 30px); background: linear-gradient(170deg, #ffffff 0%, #fbfdff 100%); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.04), 0 12px 30px -18px rgba(14, 75, 107, 0.34); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s ease; } .kla-bento-card:hover { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.05), 0 26px 48px -22px rgba(14, 75, 107, 0.42); } .kla-bento-card h2 { margin: 0; font-family: "Poppins", sans-serif; font-size: clamp(20px, 1.65vw, 29px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); text-wrap: balance; } .kla-bento-card p { margin: 10px 0 0; max-width: 42ch; font-size: clamp(13.5px, 0.98vw, 15.5px); line-height: 1.65; color: var(--body); text-wrap: pretty; } /* ----- Ikona rrethore ----- */ .kla-bento-ico { display: flex; align-items: center; justify-content: center; width: clamp(38px, 3vw, 48px); height: clamp(38px, 3vw, 48px); margin-bottom: clamp(18px, 2vw, 34px); border-radius: 50%; background: linear-gradient(150deg, #e9f4fc 0%, #cfe4f5 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 6px 14px -8px rgba(14, 75, 107, 0.5); color: var(--accent-strong); font-size: clamp(15px, 1.1vw, 18px); } /* ----- Pilulat e shërbimeve ----- */ .kla-bento-pills { list-style: none; margin: 0 0 clamp(18px, 2vw, 30px); padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .kla-bento-pills li { padding: 8px 17px; border-radius: 999px; background: var(--kli-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kli-ink) 12%, transparent); color: var(--kli-ink); font-size: clamp(12.5px, 0.9vw, 14px); font-weight: 500; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); } .kla-bento-card:hover .kla-bento-pills li { transform: translateX(4px); } /* Shkallëzim i vogël — pilulat nuk nisen të gjitha njëherësh */ .kla-bento-pills li:nth-child(2) { transition-delay: 40ms; } .kla-bento-pills li:nth-child(3) { transition-delay: 80ms; } .kla-bento-pills li:nth-child(4) { transition-delay: 120ms; } .kla-bento-pills li:nth-child(5) { transition-delay: 160ms; } /* ----- Fytyrat e ekipit ----- */ /* Të mbivendosura si zinxhir, jo të rreshtuara me hapësirë — lexohen si një ekip, jo si pesë foto të veçuara. */ .kla-bento-faces { list-style: none; margin: 0 0 clamp(18px, 2vw, 30px); padding: 0; display: flex; } .kla-bento-faces li { position: relative; box-sizing: border-box; width: clamp(42px, 3.4vw, 58px); height: clamp(42px, 3.4vw, 58px); margin-left: clamp(-16px, -1vw, -11px); border: 3px solid #fff; border-radius: 50%; overflow: hidden; background: #eef6fc; box-shadow: 0 4px 12px -4px rgba(14, 75, 107, 0.4); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); } .kla-bento-faces li:first-child { margin-left: 0; } .kla-bento-faces li:hover { z-index: 2; transform: translateY(-5px); } .kla-bento-faces img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ----- Butoni ----- */ .kla-bento-btn { margin-top: clamp(16px, 1.6vw, 26px); padding: clamp(12px, 1.05vw, 17px) clamp(22px, 1.9vw, 34px); border-radius: 999px; background: var(--ink); color: #fff; font-family: "Poppins", sans-serif; font-size: clamp(13.5px, 0.95vw, 15px); font-weight: 600; text-decoration: none; transition: background 0.3s ease, transform 0.3s ease; } .kla-bento-btn:hover { background: var(--accent-strong); transform: translateY(-2px); } .kla-bento-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } /* ----- Fotoja e qendrës ----- */ /* Fotoja është stok dhe vjen me tone të ngrohta që përplasen me blunë e faqes. Shtresa blu mbi të e shkrin në paletë pa e errësuar fytyrën — prandaj gradienti nis pothuajse i tejdukshëm lart. */ .kla-bento-photo { position: relative; margin: 0; min-height: 380px; border-radius: clamp(18px, 1.7vw, 30px); overflow: hidden; background: #eef6fc; } .kla-bento-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1); } .kla-bento-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 134, 201, 0.06) 0%, rgba(20, 106, 158, 0.16) 55%, rgba(14, 75, 107, 0.34) 100%); pointer-events: none; } .kla-bento-photo:hover img { transform: scale(1.035); } /* ----- Shifrat ----- */ .kla-bento-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(9px, 0.8vw, 14px); } .kla-bento-stat { padding: clamp(20px, 2vw, 34px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: clamp(18px, 1.7vw, 30px); background: linear-gradient(170deg, #ffffff 0%, #fbfdff 100%); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.04), 0 12px 30px -18px rgba(14, 75, 107, 0.34); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s ease; } .kla-bento-stat:hover { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.05), 0 26px 48px -22px rgba(14, 75, 107, 0.42); } .kla-bento-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .kla-bento-stat b { font-family: "Poppins", sans-serif; font-size: clamp(30px, 3.2vw, 54px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; /* të mos kërcejnë gjatë numërimit */ } /* Ylli rri në një disk të butë, si ikonat e kartave — i njëjti motiv */ .kla-bento-stat-top i { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(30px, 2.4vw, 40px); height: clamp(30px, 2.4vw, 40px); border-radius: 50%; background: linear-gradient(150deg, #e9f4fc 0%, #cfe4f5 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85); color: var(--accent-strong); font-size: clamp(11px, 0.85vw, 14px); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); } .kla-bento-stat:hover .kla-bento-stat-top i { transform: rotate(90deg); } /* Vetëm fëmija i drejtpërdrejtë — jo .count-up brenda */ .kla-bento-stat > span { display: block; margin-top: clamp(18px, 2vw, 34px); font-size: clamp(13px, 0.95vw, 15px); line-height: 1.5; color: var(--body); text-wrap: pretty; } /* ----- Ekrane të vogla ----- */ @media (max-width: 1100px) { .kla-bento-top { grid-template-columns: minmax(0, 1fr); } /* Fotoja kalon lart — hap bllokun me imazhin, jo me tekst */ .kla-bento-photo { order: -1; min-height: 0; aspect-ratio: 16 / 10; } } @media (max-width: 700px) { .kla-bento-stats { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .kla-bento-card, .kla-bento-stat, .kla-bento-btn, .kla-bento-photo img, .kla-bento-faces li, .kla-bento-pills li, .kla-bento-stat-top i { transition: none; } .kla-bento-card:hover, .kla-bento-stat:hover, .kla-bento-btn:hover, .kla-bento-faces li:hover, .kla-bento-card:hover .kla-bento-pills li { transform: none; } .kla-bento-photo:hover img { transform: none; } .kla-bento-stat:hover .kla-bento-stat-top i { transform: none; } } /* ============================================================ RRETH NESH · 4 · CTA — KONTAKT ------------------------------------------------------------ Kornizë me ngjyrë të butë që mban gjashtë kuti të bardha: tri të shpejta lart (email, telefon, adresë) dhe dy të mëdha poshtë (orari + formulari). Rrjeti ka 6 kolona: kutitë e sipërme zënë nga 2, ato të poshtmet nga 3. Kështu të dy rreshtat rreshtohen brenda të njëjtit grid, pa pasur nevojë për dy grid-e të ndara. Kurthi anti-spam (.cform-trap) dhe mesazhi i statusit (.cform-msg) vijnë nga style.css — nuk ripërsëriten këtu. ============================================================ */ .kla-cta { padding: var(--kla-sec) var(--kla-pad-x); overflow-x: clip; /* .reveal i zhvendos kutitë anash */ scroll-margin-top: 130px; } .kla-cta-inner { max-width: 1920px; margin: 0 auto; } /* I njëjti trajtim si korniza e bento-s — të dy blloqet blu të faqes duhet të lexohen si i njëjti material, jo si dy zgjidhje të veçanta. Gradienti është i përmbysur, që bento-ja lart dhe kontakti poshtë ta mbyllin faqen simetrikisht. */ .kla-cta-frame { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(9px, 0.8vw, 14px); padding: clamp(38px, 4.4vw, 78px) clamp(9px, 0.8vw, 14px); border-radius: clamp(26px, 2.4vw, 42px); background: linear-gradient(345deg, #eef6fc 0%, #dbecf9 42%, #cfe4f5 100%); } /* Të njëjtat shkrirje si te bento-ja */ .kla-cta-frame::before, .kla-cta-frame::after { content: ""; position: absolute; right: 0; left: 0; z-index: 0; height: clamp(38px, 4.4vw, 78px); pointer-events: none; } .kla-cta-frame::before { top: 0; border-radius: clamp(26px, 2.4vw, 42px) clamp(26px, 2.4vw, 42px) 0 0; background: linear-gradient( 180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } .kla-cta-frame::after { bottom: 0; border-radius: 0 0 clamp(26px, 2.4vw, 42px) clamp(26px, 2.4vw, 42px); background: linear-gradient( 0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } /* Kutitë rrinë mbi shkrirjet */ .kla-cta-box { position: relative; z-index: 1; } .kla-cta-box { padding: clamp(20px, 2vw, 36px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: clamp(18px, 1.7vw, 30px); background: linear-gradient(170deg, #ffffff 0%, #fbfdff 100%); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.04), 0 12px 30px -18px rgba(14, 75, 107, 0.34); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s ease; } /* Vetëm tri kutitë e vogla ngrihen; ato të mëdha rrinë të qeta, sepse brenda tyre ka fusha që klikohen. */ .kla-cta-quick:hover { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.05), 0 26px 48px -22px rgba(14, 75, 107, 0.42); } .kla-cta-quick { grid-column: span 2; } .kla-cta-wide { grid-column: span 3; } /* ----- Titujt e dy kutive të mëdha ----- */ .kla-cta-box h2 { margin: 0; font-family: "Poppins", sans-serif; font-size: clamp(22px, 1.9vw, 33px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); } .kla-cta-sub { margin: 7px 0 clamp(18px, 1.8vw, 30px); font-size: clamp(13.5px, 0.98vw, 15.5px); line-height: 1.6; color: var(--body); } /* ----- Kutitë e shpejta ----- */ .kla-cta-quick dl { margin: 0; } .kla-cta-quick dt { font-family: "Poppins", sans-serif; font-size: clamp(19px, 1.55vw, 27px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .kla-cta-quick dd { margin: 9px 0 0; font-size: clamp(13.5px, 1vw, 16px); line-height: 1.6; color: var(--body); overflow-wrap: anywhere; /* email-i i gjatë të mos dalë jashtë kutisë */ } .kla-cta-quick a { color: inherit; text-decoration: none; transition: color 0.25s ease; } .kla-cta-quick a:hover { color: var(--accent-strong); } /* ----- Orari ----- */ .kla-cta-hours dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; } .kla-cta-hours dt, .kla-cta-hours dd { margin: 0; padding: clamp(10px, 0.95vw, 15px) 0; border-top: 1px solid var(--line); font-size: clamp(13.5px, 0.98vw, 15.5px); } /* Rreshti i parë pa vijë — vija e ndan, nuk e mbyll listën lart */ .kla-cta-hours dt:first-of-type, .kla-cta-hours dd:first-of-type { padding-top: 0; border-top: 0; } .kla-cta-hours dt { display: flex; align-items: center; gap: 12px; color: var(--ink); } .kla-cta-hours dt::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .kla-cta-hours dd { text-align: right; color: var(--body); } .kla-cta-hours .is-closed { color: rgba(19, 40, 58, 0.45); } .kla-cta-hours dt.is-closed::before { background: rgba(19, 40, 58, 0.2); } /* ----- Formulari ----- */ .kla-cta-field { margin-bottom: clamp(12px, 1.1vw, 18px); } .kla-cta-field label { display: block; margin-bottom: 7px; font-size: clamp(13px, 0.92vw, 14.5px); font-weight: 500; color: var(--ink); } .kla-cta-field input, .kla-cta-field textarea { width: 100%; padding: clamp(11px, 1vw, 15px) clamp(14px, 1.2vw, 19px); border: 1px solid var(--line); border-radius: 13px; background: #fff; font-family: inherit; font-size: clamp(14px, 1vw, 15.5px); color: var(--ink); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .kla-cta-field input::placeholder, .kla-cta-field textarea::placeholder { color: rgba(19, 40, 58, 0.36); } .kla-cta-field input:focus, .kla-cta-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 134, 201, 0.16); } .kla-cta-field textarea { min-height: 108px; resize: vertical; } .kla-cta-submit { width: 100%; margin-top: clamp(6px, 0.6vw, 10px); padding: clamp(14px, 1.25vw, 20px); border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-family: "Poppins", sans-serif; font-size: clamp(14px, 1vw, 16px); font-weight: 600; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .kla-cta-submit:hover { background: var(--accent-strong); transform: translateY(-2px); } .kla-cta-submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .kla-cta-submit:disabled { opacity: 0.6; cursor: default; transform: none; } /* ----- Ekrane të vogla ----- */ @media (max-width: 1100px) { .kla-cta-wide { grid-column: span 6; } .kla-cta-quick { grid-column: span 3; } .kla-cta-quick:first-child { grid-column: span 6; } } @media (max-width: 700px) { .kla-cta-quick, .kla-cta-quick:first-child { grid-column: span 6; } } @media (prefers-reduced-motion: reduce) { .kla-cta-box, .kla-cta-quick a, .kla-cta-field input, .kla-cta-field textarea, .kla-cta-submit { transition: none; } .kla-cta-quick:hover, .kla-cta-submit:hover { transform: none; } } /* ============================================================ KONTAKT · 3 · HARTA ------------------------------------------------------------ Korniza mban të njëjtat shkrirje me 13 pika si hero-ja dhe si kornizat blu — harta treten në faqe lart e poshtë, pa asnjë vijë prerjeje. Shtresat: iframe (0) -> shkrirjet (1) -> karta e adreses (2). Shkrirjet kane `pointer-events: none`, perndryshe do te bllokonin zvarritjen e hartes. ============================================================ */ .kla-map { padding: var(--kla-sec) var(--kla-pad-x); scroll-margin-top: 130px; } .kla-map-inner { max-width: 1920px; margin: 0 auto; } .kla-map-frame { position: relative; height: clamp(340px, 54vh, 580px); border-radius: clamp(26px, 2.4vw, 42px); overflow: hidden; background: #e8f1f8; } .kla-map-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; /* Google e jep harten me tone te ngrohta; pak desaturim e afron me paleten blu te faqes pa e bere te palexueshme. */ filter: saturate(0.82) contrast(1.03); } /* ----- Shkrirjet ----- */ .kla-map-frame::before, .kla-map-frame::after { content: ""; position: absolute; right: 0; left: 0; z-index: 1; height: clamp(48px, 5.5vw, 104px); pointer-events: none; } .kla-map-frame::before { top: 0; background: linear-gradient( 180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } .kla-map-frame::after { bottom: 0; background: linear-gradient( 0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.995) 12%, rgba(255, 255, 255, 0.97) 22%, rgba(255, 255, 255, 0.92) 31%, rgba(255, 255, 255, 0.84) 39%, rgba(255, 255, 255, 0.73) 47%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.46) 63%, rgba(255, 255, 255, 0.33) 71%, rgba(255, 255, 255, 0.21) 79%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0.05) 93%, rgba(255, 255, 255, 0) 100% ); } /* ----- Karta e adreses ----- */ /* Rri MBI shkrirjen e poshtme, jo brenda saj — me poshte do te notonte mbi te bardhe ne vend qe te rrinte mbi harte. */ .kla-map-card { position: absolute; z-index: 2; bottom: clamp(62px, 7vw, 124px); left: clamp(16px, 2.2vw, 40px); max-width: min(92%, 540px); display: flex; align-items: center; gap: clamp(12px, 1.3vw, 20px); padding: clamp(13px, 1.3vw, 20px) clamp(15px, 1.5vw, 24px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: clamp(16px, 1.6vw, 26px); background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.05), 0 22px 46px -24px rgba(14, 75, 107, 0.55); text-decoration: none; transition: transform 0.35s ease, box-shadow 0.35s ease; } .kla-map-card:hover { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.06), 0 30px 58px -24px rgba(14, 75, 107, 0.62); } .kla-map-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .kla-map-ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(38px, 3vw, 48px); height: clamp(38px, 3vw, 48px); border-radius: 50%; background: linear-gradient(150deg, #e9f4fc 0%, #cfe4f5 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85); color: var(--accent-strong); font-size: clamp(15px, 1.1vw, 18px); } .kla-map-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kla-map-text strong { font-family: "Poppins", sans-serif; font-size: clamp(14px, 1.05vw, 17px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .kla-map-text span { font-size: clamp(12.5px, 0.9vw, 14.5px); line-height: 1.5; color: var(--body); } .kla-map-cta { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding-left: clamp(10px, 1vw, 16px); flex-shrink: 0; font-family: "Poppins", sans-serif; font-size: clamp(12.5px, 0.9vw, 14.5px); font-weight: 600; color: var(--accent-strong); white-space: nowrap; } .kla-map-cta i { font-size: 0.85em; } @media (max-width: 700px) { /* Ne gjeresi te vogel CTA-ja bie ne rresht te vet */ .kla-map-card { flex-wrap: wrap; left: clamp(12px, 3vw, 20px); right: clamp(12px, 3vw, 20px); max-width: none; } .kla-map-cta { margin-left: 0; padding-left: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { .kla-map-card { transition: none; } .kla-map-card:hover { transform: none; } } /* ============================================================ KONTAKT · 3 · FAQ E REZERVIMIT ------------------------------------------------------------ Akordeon me
    /. Atributi `name` i perbashket i ben perjashtues: hapja e njerit mbyll te tjeret, pa asnje rresht JavaScript. Efektet, dhe cfare kushton secili: 1. NERVI vertikal majtas me nyje — SVG, i njejti motiv si kronologjia. Vizatohet me .in-view, pastaj impulsi udheton. 2. SPOTLIGHT qe ndjek kursorin — e vetmja pjese me JS (initFaqGlow te js/klinika.js). Vetem `pointer: fine`, ndaj ne prekje nuk lidhet fare. 3. KUFI ME GRADIENT qe rrotullohet kur zeri eshte i hapur — conic-gradient te border-box me @property. Ku @property s'mbeshtetet, gradienti rri i palevizshem: prapë i bukur. 4. PERGJIGJJA hyn me zbehje. Nuk animojme lartesine e
    : ajo kerkon veti qe s'jane ende te gjithanshme. ============================================================ */ @property --kla-faq-ang { syntax: ""; initial-value: 0deg; inherits: false; } .kla-faq { padding: var(--kla-sec) var(--kla-pad-x); scroll-margin-top: 130px; overflow-x: clip; } .kla-faq-inner { max-width: 1040px; margin: 0 auto; } .kla-faq-head h2 { margin: 0 0 clamp(30px, 3.4vw, 56px); font-family: "Poppins", sans-serif; font-size: clamp(26px, 3.1vw, 50px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.12; color: var(--ink); text-wrap: balance; } /* ----- Shina me nerv ----- */ .kla-faq-rail { --kla-faq-x: clamp(18px, 2vw, 32px); --kla-faq-gap: clamp(22px, 2.2vw, 40px); position: relative; padding-left: calc(var(--kla-faq-x) + var(--kla-faq-gap)); } .kla-faq-nerve { position: absolute; top: 0; left: calc(var(--kla-faq-x) - 40px); width: 80px; height: 100%; pointer-events: none; overflow: visible; } .kla-faq-nerve.reveal, .kla-faq-nerve.reveal.in-view { transform: none; } .kla-faq-halo { opacity: 0.16; } .kla-faq-line, .kla-faq-halo { stroke-dasharray: 1050; stroke-dashoffset: 1050; } .kla-faq-nerve.in-view .kla-faq-line, .kla-faq-nerve.in-view .kla-faq-halo { animation: kla-faq-draw 2s cubic-bezier(0.45, 0, 0.15, 1) forwards; } .kla-faq-imp { opacity: 0; stroke-dasharray: 60 1050; stroke-dashoffset: 1050; } .kla-faq-nerve.in-view .kla-faq-imp { opacity: 0.9; animation: kla-faq-imp 5s linear 2s infinite; } @keyframes kla-faq-draw { to { stroke-dashoffset: 0; } } @keyframes kla-faq-imp { from { stroke-dashoffset: 1050; } to { stroke-dashoffset: 0; } } .kla-faq-list { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px); } /* ----- Zeri ----- */ /* `isolation: isolate` mban spotlight-in (z-index -1) brenda zerit. */ .kla-faq-item { position: relative; isolation: isolate; border: 1px dashed rgba(31, 134, 201, 0.36); border-radius: clamp(16px, 1.6vw, 24px); background: linear-gradient(168deg, rgba(255, 255, 255, 0.76) 0%, rgba(242, 248, 252, 0.54) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; } .kla-faq-item:hover { transform: translateX(3px); border-color: rgba(31, 134, 201, 0.62); box-shadow: 0 2px 3px rgba(14, 75, 107, 0.04), 0 20px 44px -26px rgba(14, 75, 107, 0.48); } /* Nyja mbi nerv */ .kla-faq-item::before { content: ""; position: absolute; top: clamp(22px, 2.2vw, 32px); left: calc(-1 * var(--kla-faq-gap) - 6px); width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #6cc4f5 0%, #1f86c9 55%, #146a9e 100%); box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(31, 134, 201, 0.16), 0 0 16px 2px rgba(31, 134, 201, 0.42); transition: box-shadow 0.4s ease, transform 0.4s ease; } .kla-faq-item[open]::before, .kla-faq-item:hover::before { transform: scale(1.18); box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(31, 134, 201, 0.28), 0 0 28px 6px rgba(31, 134, 201, 0.7); } /* Spotlight qe ndjek kursorin — --mx/--my i vendos js/klinika.js */ .kla-faq-item::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient( 260px circle at var(--mx, 50%) var(--my, 50%), rgba(31, 134, 201, 0.18) 0%, rgba(31, 134, 201, 0.06) 38%, transparent 68% ); transition: opacity 0.4s ease; } .kla-faq-item:hover::after { opacity: 1; } /* Hapur: kufi me gradient qe rrotullohet */ .kla-faq-item[open] { border-color: transparent; border-style: solid; background: linear-gradient(168deg, #ffffff 0%, #f3fafd 100%) padding-box, conic-gradient(from var(--kla-faq-ang), #1f86c9, #6cc4f5, #cfe4f5, #6cc4f5, #1f86c9) border-box; box-shadow: 0 2px 3px rgba(14, 75, 107, 0.05), 0 26px 54px -28px rgba(14, 75, 107, 0.55); animation: kla-faq-spin 7s linear infinite; } @keyframes kla-faq-spin { to { --kla-faq-ang: 360deg; } } .kla-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 1.5vw, 24px); padding: clamp(16px, 1.7vw, 26px) clamp(18px, 1.9vw, 30px); cursor: pointer; list-style: none; } .kla-faq-item summary::-webkit-details-marker { display: none; } .kla-faq-item summary::marker { content: ""; } .kla-faq-item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: inherit; } .kla-faq-q { font-family: "Poppins", sans-serif; font-size: clamp(15px, 1.2vw, 20px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink); text-wrap: pretty; transition: color 0.3s ease; } .kla-faq-item[open] .kla-faq-q { color: var(--accent-strong); } /* ----- Shenja + / − ----- */ .kla-faq-ico { position: relative; flex-shrink: 0; width: clamp(28px, 2.3vw, 36px); height: clamp(28px, 2.3vw, 36px); border-radius: 50%; background: linear-gradient(150deg, #e9f4fc 0%, #cfe4f5 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.45s ease; } .kla-faq-item summary:hover .kla-faq-ico { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 8px 20px -8px rgba(20, 106, 158, 0.8); } .kla-faq-ico::before, .kla-faq-ico::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--accent-strong); border-radius: 2px; transform: translate(-50%, -50%); transition: opacity 0.3s ease; } .kla-faq-ico::before { width: 42%; height: 2px; } .kla-faq-ico::after { width: 2px; height: 42%; } .kla-faq-item[open] .kla-faq-ico { transform: rotate(180deg); } .kla-faq-item[open] .kla-faq-ico::after { opacity: 0; } /* ----- Pergjigjja ----- */ .kla-faq-a { padding: 0 clamp(18px, 1.9vw, 30px) clamp(18px, 1.9vw, 28px); } .kla-faq-item[open] .kla-faq-a { animation: kla-faq-in 0.45s cubic-bezier(0.2, 0.7, 0.3, 1); } @keyframes kla-faq-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } .kla-faq-a p { margin: 0; padding-top: clamp(12px, 1.2vw, 18px); border-top: 1px dashed rgba(31, 134, 201, 0.3); font-size: clamp(13.5px, 0.98vw, 16px); line-height: 1.75; color: var(--body); text-wrap: pretty; } /* ----- Ekrane te vogla ----- */ @media (max-width: 640px) { /* Pa hapesire per shine — bien nervi dhe nyjet */ .kla-faq-rail { padding-left: 0; } .kla-faq-nerve { display: none; } .kla-faq-item::before { display: none; } } @media (prefers-reduced-motion: reduce) { .kla-faq-item, .kla-faq-item::before, .kla-faq-item::after, .kla-faq-ico, .kla-faq-q { transition: none; } .kla-faq-item:hover { transform: none; } .kla-faq-item[open]::before, .kla-faq-item:hover::before { transform: none; } .kla-faq-item[open] .kla-faq-ico { transform: none; } .kla-faq-item[open] { animation: none; } .kla-faq-item[open] .kla-faq-a { animation: none; } .kla-faq-line, .kla-faq-halo { stroke-dashoffset: 0; animation: none !important; } .kla-faq-imp { display: none; } } /* ============================================================ FAQE LIGJORE — hero, permbledhje, politike ------------------------------------------------------------ E ndajne privatesia.html dhe kushtet.html. Klasat jane `kla-legal-*`, jo `klp-*`, pikerisht qe faqja e dyte ta marre kete pamje pa asnje rresht CSS te ri. Tabela e lendes rri ngjitur (`position: sticky`) vetem mbi 1000px: me poshte kolonat bashkohen dhe nje TOC ngjitur do te hante ekranin. ============================================================ */ /* ----- Hero ----- */ .kla-lhero { padding: 146px var(--kla-pad-x) var(--kla-sec); } .kla-lhero-inner { max-width: 1920px; margin: 0 auto; } .kla-lhero-frame { position: relative; overflow: hidden; padding: clamp(44px, 5.6vw, 104px) clamp(24px, 4vw, 88px) clamp(46px, 5.6vw, 100px); border-radius: clamp(26px, 2.4vw, 42px); background: linear-gradient(165deg, #eef6fc 0%, #dbecf9 42%, #cfe4f5 100%); } /* Te njejtat shkrirje si kornizat e tjera te faqes */ .kla-lhero-frame::before, .kla-lhero-frame::after { content: ""; position: absolute; right: 0; left: 0; z-index: 1; height: clamp(40px, 4.6vw, 84px); pointer-events: none; } .kla-lhero-frame::before { top: 0; background: linear-gradient(180deg, rgb(255,255,255) 0%, rgba(255,255,255,.995) 12%, rgba(255,255,255,.97) 22%, rgba(255,255,255,.92) 31%, rgba(255,255,255,.84) 39%, rgba(255,255,255,.73) 47%, rgba(255,255,255,.6) 55%, rgba(255,255,255,.46) 63%, rgba(255,255,255,.33) 71%, rgba(255,255,255,.21) 79%, rgba(255,255,255,.12) 86%, rgba(255,255,255,.05) 93%, rgba(255,255,255,0) 100%); } .kla-lhero-frame::after { bottom: 0; background: linear-gradient(0deg, rgb(255,255,255) 0%, rgba(255,255,255,.995) 12%, rgba(255,255,255,.97) 22%, rgba(255,255,255,.92) 31%, rgba(255,255,255,.84) 39%, rgba(255,255,255,.73) 47%, rgba(255,255,255,.6) 55%, rgba(255,255,255,.46) 63%, rgba(255,255,255,.33) 71%, rgba(255,255,255,.21) 79%, rgba(255,255,255,.12) 86%, rgba(255,255,255,.05) 93%, rgba(255,255,255,0) 100%); } .kla-lhero-frame > * { position: relative; z-index: 2; } .kla-lhero-crumb { display: flex; align-items: center; gap: 9px; margin-bottom: clamp(18px, 2vw, 30px); font-size: clamp(12.5px, 0.9vw, 14px); color: var(--body); } .kla-lhero-crumb a { color: var(--accent-strong); text-decoration: none; } .kla-lhero-crumb a:hover { text-decoration: underline; } .kla-lhero-crumb span[aria-hidden] { opacity: .45; } .kla-lhero-title { margin: 0; max-width: 16ch; font-family: "Poppins", sans-serif; font-size: clamp(34px, 5.4vw, 92px); font-weight: 700; letter-spacing: -0.05em; line-height: 1.02; color: var(--ink); background: linear-gradient(106deg, #13283a 0%, #13283a 40%, #146a9e 74%, #2b9ade 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-wrap: balance; } .kla-lhero-sub { margin: clamp(18px, 2vw, 30px) 0 0; max-width: 60ch; font-size: clamp(14.5px, 1.15vw, 19px); line-height: 1.65; color: var(--body); text-wrap: pretty; } .kla-lhero-date { display: inline-flex; align-items: center; gap: 10px; margin: clamp(24px, 2.6vw, 40px) 0 0; padding: 9px 18px 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: clamp(12.5px, 0.9vw, 14px); font-weight: 500; color: var(--ink); } .kla-lhero-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fae6b; box-shadow: 0 0 0 3px rgba(47,174,107,.18); } /* ----- Permbledhja ----- */ .kla-tldr { padding: var(--kla-sec) var(--kla-pad-x); overflow-x: clip; } .kla-tldr-inner { max-width: 1560px; margin: 0 auto; } .kla-tldr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); } .kla-tldr-card { padding: clamp(22px, 2.2vw, 36px); border: 1px solid rgba(255,255,255,.9); border-radius: clamp(18px, 1.7vw, 28px); background: linear-gradient(168deg, rgba(255,255,255,.9) 0%, rgba(240,248,253,.72) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 3px rgba(14,75,107,.04), 0 16px 38px -22px rgba(14,75,107,.4); transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease; } .kla-tldr-card:hover { transform: translateY(-4px); box-shadow: 0 2px 3px rgba(14,75,107,.05), 0 30px 56px -26px rgba(14,75,107,.46); } .kla-tldr-ico { display: flex; align-items: center; justify-content: center; width: clamp(38px, 3vw, 48px); height: clamp(38px, 3vw, 48px); margin-bottom: clamp(16px, 1.8vw, 26px); border-radius: 50%; background: linear-gradient(150deg, #e9f4fc 0%, #cfe4f5 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85); color: var(--accent-strong); font-size: clamp(14px, 1.05vw, 17px); } .kla-tldr-card h2 { margin: 0 0 9px; font-family: "Poppins", sans-serif; font-size: clamp(16px, 1.3vw, 22px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); } .kla-tldr-card p { margin: 0; font-size: clamp(13px, 0.95vw, 15px); line-height: 1.65; color: var(--body); text-wrap: pretty; } .kla-tldr-card a { color: var(--accent-strong); } /* ----- Politika ----- */ .kla-legal { padding: var(--kla-sec) var(--kla-pad-x); scroll-margin-top: 130px; } .kla-legal-inner { max-width: 1400px; margin: 0 auto; } .kla-legal-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(28px, 4vw, 80px); align-items: start; } /* ----- Tabela e lendes ----- */ .kla-legal-toc { position: sticky; top: 130px; } .kla-legal-toc-head { margin: 0 0 16px; font-family: "Poppins", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); } .kla-legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-left: 1px solid var(--line); } .kla-legal-toc li { counter-increment: toc; } .kla-legal-toc a { display: block; padding: 9px 0 9px 18px; margin-left: -1px; border-left: 2px solid transparent; font-size: clamp(13px, 0.95vw, 15px); line-height: 1.4; color: var(--body); text-decoration: none; transition: color .3s ease, border-color .3s ease, padding-left .3s ease; } .kla-legal-toc a::before { content: counter(toc, decimal-leading-zero); margin-right: 9px; font-family: "Poppins", sans-serif; font-size: .8em; font-weight: 600; color: var(--accent); opacity: .55; } .kla-legal-toc a:hover, .kla-legal-toc a.is-current { padding-left: 24px; border-left-color: var(--accent); color: var(--ink); } .kla-legal-toc a.is-current { font-weight: 600; } .kla-legal-toc a.is-current::before { opacity: 1; } /* ----- Blloqet ----- */ .kla-legal-body { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 26px); } .kla-legal-block { padding: clamp(24px, 2.4vw, 42px); border: 1px dashed rgba(31,134,201,.32); border-radius: clamp(18px, 1.8vw, 28px); background: linear-gradient(168deg, rgba(255,255,255,.72) 0%, rgba(242,248,252,.5) 100%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); scroll-margin-top: 130px; transition: border-color .35s ease, box-shadow .35s ease; } .kla-legal-block:hover { border-color: rgba(31,134,201,.58); box-shadow: 0 2px 3px rgba(14,75,107,.04), 0 20px 44px -28px rgba(14,75,107,.42); } /* Blloku i te dhenave shendetesore — theksuar me qellim */ .kla-legal-block--flag { border-style: solid; border-color: rgba(31,134,201,.5); background: linear-gradient(168deg, #f4fafd 0%, #e6f2fa 100%); } .kla-legal-block h2 { display: flex; align-items: baseline; gap: clamp(10px, 1vw, 16px); margin: 0 0 clamp(14px, 1.4vw, 22px); font-family: "Poppins", sans-serif; font-size: clamp(19px, 1.6vw, 28px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; color: var(--ink); text-wrap: balance; } .kla-legal-num { flex-shrink: 0; font-size: .72em; font-weight: 700; letter-spacing: 0; color: var(--accent); opacity: .6; } .kla-legal-block p { margin: 0 0 14px; font-size: clamp(14px, 1vw, 16.5px); line-height: 1.8; color: var(--body); text-wrap: pretty; } .kla-legal-block p:last-child { margin-bottom: 0; } .kla-legal-block strong { color: var(--ink); font-weight: 600; } .kla-legal-block em { color: var(--accent-strong); font-style: normal; font-weight: 600; } .kla-legal-block a { color: var(--accent-strong); } .kla-legal-block ul { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; } .kla-legal-block ul:last-child { margin-bottom: 0; } .kla-legal-block li { position: relative; padding-left: 22px; font-size: clamp(14px, 1vw, 16.5px); line-height: 1.75; color: var(--body); text-wrap: pretty; } .kla-legal-block li::before { content: ""; position: absolute; top: .68em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .5; } /* Kutia e theksit brenda nje blloku */ .kla-legal-note { padding: clamp(14px, 1.3vw, 20px) clamp(16px, 1.5vw, 24px); border-radius: clamp(12px, 1.2vw, 18px); border-left: 3px solid var(--accent); background: rgba(255,255,255,.8); font-size: clamp(14px, 1.02vw, 17px) !important; color: var(--ink) !important; } /* ----- Ekrane te vogla ----- */ @media (max-width: 1100px) { .kla-tldr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1000px) { .kla-legal-grid { grid-template-columns: minmax(0, 1fr); } /* Ngjitur do te hante ekranin kur kolonat bashkohen */ .kla-legal-toc { position: static; } .kla-legal-toc ol { display: flex; flex-wrap: wrap; gap: 6px 10px; border-left: 0; } .kla-legal-toc a { padding: 7px 14px; margin-left: 0; border-left: 0; border-radius: 999px; background: rgba(31,134,201,.08); } .kla-legal-toc a:hover, .kla-legal-toc a.is-current { padding-left: 14px; background: rgba(31,134,201,.18); } } @media (max-width: 600px) { .kla-tldr-grid { grid-template-columns: minmax(0, 1fr); } .kla-lhero { padding-top: 116px; } } @media (prefers-reduced-motion: reduce) { .kla-tldr-card, .kla-legal-block, .kla-legal-toc a { transition: none; } .kla-tldr-card:hover { transform: none; } }