/* Stiluri pentru /epilare-laser-elevi-studenti (pachetele de student pe laserul 3K clasic) — 2026-09-23. Spec: docs/superpowers/specs/2026-09-23-epilare-laser-elevi-studenti-design.md Directia: „caietul de student” — hartie de matematica (grila albastra fina), pix albastru #2340a0, marker galben #ffe45c folosit DOAR acolo unde marcheaza ceva (zonele de pe corp, zilele din calendar), violetul SenzoFit #6b0572 pentru preturi si butoane. Un singur element indraznet: „legitimatia de pret” din hero, care cade pe snur la incarcare. In rest pagina e linistita: fara reveal la scroll, fara majuscule decorative. Tipografie: Bricolage Grotesque (titluri + text), Caveat doar pentru adnotarile „scrise de mana”. Prefix ls- peste tot (nefolosit in alt loc din site la 2026-09-23). */ /* Plasa anti scroll orizontal — doar pe , altfel position:sticky moare (verificat pe /jordi-shape). */ body { overflow-x: hidden; } @supports (overflow-x: clip) { body { overflow-x: clip; } } /* Distanta sub meniul lipit sus + navigarea din pagina, pusa o singura data pe containerul de derulare: o respecta ancorele, focusul de la tastatura si ScrolltoPrice-ul componentei de preturi (scrollIntoView pe #ZonaDePret). */ html { scroll-padding-top: calc(var(--ls-menu-h, 60px) + 60px); } /* Variabilele stau pe :root: subsolul cu formular e randat de layout in afara .ls-page. */ :root { --ls-violet: #6b0572; --ls-violet-2: #8e2a96; --ls-violet-inchis: #3e0142; --ls-lila: #f4e9f5; --ls-pix: #2340a0; --ls-pix-l: #e8ecf8; --ls-marker: #ffe45c; --ls-hartie: #f6f7fb; --ls-grila: #dfe4f1; --ls-cerneala: #1d1b26; --ls-gri: #5b5869; --ls-linie: #e3e1ea; --ls-wa: #147a3e; --ls-atentie: #b3261e; --ls-font: 'Bricolage Grotesque', 'Segoe UI', Helvetica, Arial, sans-serif; --ls-mana: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive; } .ls-page { color: var(--ls-cerneala); font-family: var(--ls-font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* reseturi cu :where(), ca sa ramana la specificitatea unui element si sa nu bata regulile de sectiune */ .ls-page :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; } .ls-page :where(h1, h2, h3, h4) { font-family: var(--ls-font); color: var(--ls-cerneala); font-weight: 800; letter-spacing: -.015em; text-wrap: balance; } .ls-page :where(ul, ol) { padding: 0; list-style: none; } .ls-page :where(img) { max-width: 100%; display: block; } .ls-page :where(a) { color: var(--ls-violet); } .ls-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; } .ls-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* hartia de matematica — doar pe hero, conditii si calendar */ .ls-grila { background-color: var(--ls-hartie); background-image: linear-gradient(var(--ls-grila) 1px, transparent 1px), linear-gradient(90deg, var(--ls-grila) 1px, transparent 1px); background-size: 24px 24px; } .ls-mana { font-family: var(--ls-mana); font-weight: 700; color: var(--ls-pix); line-height: 1.1; } /* ───────── butoane ───────── */ .ls-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; padding: 14px 22px; font-family: var(--ls-font); font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none !important; border: 2px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; } .ls-btn-p { background: var(--ls-violet); color: #fff !important; box-shadow: 0 5px 0 var(--ls-violet-inchis); } .ls-btn-p:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ls-violet-inchis); } .ls-btn-p:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ls-violet-inchis); } .ls-btn-wa { background: #fff; color: var(--ls-wa) !important; border-color: var(--ls-wa); } .ls-btn-wa:hover { background: var(--ls-wa); color: #fff !important; } .ls-btn-alb { background: #fff; color: var(--ls-violet) !important; box-shadow: 0 5px 0 rgba(0,0,0,.18); } .ls-btn:focus-visible, .ls-page a:focus-visible, .ls-page summary:focus-visible, .ls-page button:focus-visible { outline: 3px solid var(--ls-pix); outline-offset: 3px; } /* pe fundalurile inchise (calculatorul, CTA-ul) inelul albastru abia se vede: acolo e galben */ .ls-page .ls-calc :focus-visible, .ls-page .ls-cta :focus-visible { outline: 3px solid var(--ls-marker); outline-offset: 3px; } /* ───────── HERO ───────── */ .ls-hero { padding: 54px 0 72px; overflow: hidden; } .ls-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .ls-cine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; font-weight: 600; color: var(--ls-pix); margin-bottom: 18px; } .ls-cine b { background: #fff; border: 1.5px solid var(--ls-pix); border-radius: 7px; padding: 3px 11px; font-weight: 700; } .ls-hero h1 { font-size: clamp(38px, 5.2vw, 66px); line-height: 1.02; letter-spacing: -.025em; font-variation-settings: "opsz" 96; margin-bottom: 20px; } .ls-page .ls-lead { font-size: 19px; line-height: 1.6; color: var(--ls-gri); max-width: 34em; margin-bottom: 26px; } .ls-lead b { color: var(--ls-cerneala); font-weight: 700; } .ls-butoane { display: flex; flex-wrap: wrap; gap: 12px; } .ls-fapte { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px; font-size: 15px; font-weight: 600; } .ls-fapte li { display: inline-flex; gap: 8px; align-items: center; } .ls-fapte i { color: var(--ls-violet); width: 18px; text-align: center; } .ls-viz { position: relative; min-height: 560px; } .ls-foto-hero { position: absolute; right: 0; top: 0; width: 78%; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px rgba(35,64,160,.20); transform: rotate(1.5deg); background: var(--ls-pix-l); } .ls-foto-hero img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } /* legitimatia de pret: cade pe snur o singura data, la incarcare */ .ls-pass { position: absolute; left: 0; bottom: 0; width: min(380px, 94%); background: #fff; border-radius: 16px; box-shadow: 0 26px 60px rgba(29,27,38,.28), 0 0 0 1px rgba(29,27,38,.06); transform: rotate(-4deg); transform-origin: 50% -70px; animation: lsCade 1.1s cubic-bezier(.2,.9,.25,1.12) .2s both; z-index: 2; } .ls-pass::before { content: ""; position: absolute; left: 50%; top: -74px; width: 22px; height: 82px; margin-left: -11px; background: repeating-linear-gradient(90deg, var(--ls-violet) 0 7px, var(--ls-violet-2) 7px 14px); border-radius: 3px; z-index: -1; } .ls-pass-clip { position: absolute; left: 50%; top: -12px; margin-left: -24px; width: 48px; height: 22px; border-radius: 6px; background: #d8dbe6; box-shadow: inset 0 -3px 0 #b9bdcc; } .ls-pass-cap { background: var(--ls-violet); color: #fff; border-radius: 16px 16px 0 0; padding: 20px 20px 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; } .ls-pass-cap b { font-size: 20px; letter-spacing: -.01em; display: block; } .ls-pass-cap small { display: block; font-weight: 500; opacity: .88; font-size: 13.5px; } .ls-pass-cap .ls-mana { color: var(--ls-marker); font-size: 23px; transform: rotate(-4deg); white-space: nowrap; } .ls-pass-rand { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 15px 20px; border-bottom: 1.5px dashed #d9dbe6; } .ls-pass-nume { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; } .ls-pass-rand p { font-size: 13.5px; color: var(--ls-gri); margin-top: 2px; } .ls-pret { text-align: right; line-height: 1; } .ls-pret b { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--ls-violet); font-variant-numeric: tabular-nums; } .ls-pret span { display: block; font-size: 12.5px; color: var(--ls-gri); font-weight: 600; margin-top: 4px; } .ls-pass-jos { padding: 12px 20px 16px; display: flex; gap: 14px; align-items: center; } .ls-cod { flex: 0 0 92px; height: 32px; background: repeating-linear-gradient(90deg, #1d1b26 0 2px, transparent 2px 4px, #1d1b26 4px 5px, transparent 5px 8px, #1d1b26 8px 11px, transparent 11px 12px); } .ls-page .ls-pass-jos p { font-size: 12.5px; color: var(--ls-gri); line-height: 1.35; } @keyframes lsCade { 0% { transform: translateY(-140px) rotate(9deg); opacity: 0; } 55% { opacity: 1; } 78% { transform: translateY(0) rotate(-7deg); } 100% { transform: translateY(0) rotate(-4deg); } } @media (max-width: 900px) { .ls-hero-grid { grid-template-columns: 1fr; gap: 34px; } .ls-viz { min-height: 0; display: flex; flex-direction: column; align-items: center; } .ls-foto-hero { position: relative; width: 100%; max-width: 520px; transform: none; } .ls-foto-hero img { aspect-ratio: 5 / 4; object-position: 50% 30%; } .ls-pass { position: relative; margin-top: -40px; width: min(380px, 92%); } } /* ───────── NAVIGARE RAPIDA (sticky sub meniul site-ului; inaltimea meniului vine din JS in --ls-menu-h) ───────── */ .ls-nav { position: sticky; top: var(--ls-menu-h, 60px); z-index: 130; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ls-linie); padding: 10px; display: flex; gap: 8px; overflow-x: auto; justify-content: safe center; scrollbar-width: none; } .ls-nav::-webkit-scrollbar { display: none; } .ls-nav a { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--ls-cerneala); text-decoration: none; padding: 7px 14px; border-radius: 9px; border: 1.5px solid var(--ls-linie); background: #fff; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; } .ls-nav a:hover { border-color: var(--ls-violet); color: var(--ls-violet); } .ls-nav a.ls-activ { background: var(--ls-violet); border-color: var(--ls-violet); color: #fff; } /* ───────── SECTIUNI ───────── */ .ls-sec { padding: 84px 0; background-color: #fff; } /* background-color, nu shorthand: shorthand-ul ar sterge grila pusa de .ls-grila */ .ls-sec.ls-grila, .ls-sec.ls-bg-hartie { background-color: var(--ls-hartie); } .ls-sec.ls-bg-lila { background-color: #fbf7fc; } .ls-cap { max-width: 44em; margin-bottom: 44px; } .ls-cap h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 14px; } .ls-cap p { color: var(--ls-gri); font-size: 18px; line-height: 1.6; } .ls-cap p + p { margin-top: 10px; } .ls-page .ls-nota { font-size: 13.5px; color: var(--ls-gri); line-height: 1.5; } /* ───────── CONDITII ───────── */ .ls-cond-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; } .ls-cond-foto { border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(35,64,160,.16); transform: rotate(-1.2deg); background: var(--ls-pix-l); } .ls-cond-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .ls-cond-foto figcaption { background: #fff; padding: 10px 14px; font-size: 13px; color: var(--ls-gri); } .ls-bife { display: grid; gap: 18px; } .ls-bife li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; } .ls-bifa { width: 34px; height: 34px; } .ls-bife h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 2px; } .ls-bife p { color: var(--ls-gri); font-size: 16px; line-height: 1.55; } @media (max-width: 860px) { .ls-cond-grid { grid-template-columns: 1fr; } } /* ───────── PACHETE ───────── */ .ls-pachete { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .ls-pachet { background: #fff; border: 2px solid var(--ls-cerneala); border-radius: 18px; padding: 26px 26px 24px; display: grid; grid-template-columns: 200px 1fr; gap: 8px 22px; align-items: start; box-shadow: 6px 6px 0 var(--ls-lila); } .ls-pachet-fig { grid-row: 1 / span 3; background: var(--ls-hartie); background-image: linear-gradient(var(--ls-grila) 1px, transparent 1px), linear-gradient(90deg, var(--ls-grila) 1px, transparent 1px); background-size: 16px 16px; border-radius: 12px; padding: 10px 4px; } .ls-pachet-fig svg { width: 100%; height: auto; display: block; } .ls-pachet h3 { font-size: 26px; line-height: 1.1; } .ls-pachet-pret { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; } .ls-pachet-pret b { font-size: 46px; font-weight: 800; color: var(--ls-violet); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .ls-pachet-pret span { font-size: 15px; font-weight: 600; color: var(--ls-gri); } .ls-zone-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; } .ls-zone-lista li { font-size: 14px; font-weight: 600; background: var(--ls-marker); border-radius: 6px; padding: 3px 9px; } .ls-pachet .ls-nota { margin-top: 12px; } .ls-pachet .ls-btn { width: 100%; } .ls-pachete-jos { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px 30px; } .ls-pachete-jos p { font-size: 15.5px; color: var(--ls-gri); display: flex; gap: 10px; } .ls-pachete-jos i { color: var(--ls-violet); margin-top: 5px; } @media (max-width: 1100px) { .ls-pachete { grid-template-columns: 1fr; } } @media (max-width: 480px) { .ls-pachet { grid-template-columns: 1fr; padding: 22px 18px; } .ls-pachet-fig { grid-row: auto; max-width: 220px; margin: 0 auto 8px; width: 100%; } } /* ───────── ECONOMIE ───────── */ .ls-eco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .ls-eco-bloc { border: 1.5px solid var(--ls-linie); border-radius: 18px; padding: 24px 24px 20px; background: #fff; } .ls-eco-bloc h3 { font-size: 22px; margin-bottom: 16px; } .ls-eco-rand + .ls-eco-rand { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--ls-linie); } .ls-eco-rand h4 { font-size: 15px; font-weight: 700; color: var(--ls-gri); letter-spacing: 0; margin-bottom: 10px; } .ls-bara { display: grid; grid-template-columns: 118px 1fr auto; gap: 12px; align-items: center; font-size: 14.5px; } .ls-bara + .ls-bara { margin-top: 8px; } .ls-bara-eticheta { color: var(--ls-gri); font-weight: 600; line-height: 1.25; } .ls-bara-pista { height: 14px; background: var(--ls-hartie); border-radius: 7px; overflow: hidden; } .ls-bara-plin { display: block; height: 100%; border-radius: 7px; background: #b9b6c6; } .ls-bara-student .ls-bara-plin { background: var(--ls-violet); } .ls-bara-suma { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; } .ls-bara-student .ls-bara-suma { color: var(--ls-violet); } .ls-eco-dif { margin-top: 10px; font-size: 15px; font-weight: 700; } .ls-eco-dif span { background: var(--ls-marker); padding: 1px 6px; border-radius: 4px; } @media (max-width: 1000px) { .ls-eco { grid-template-columns: 1fr; } } @media (max-width: 420px) { .ls-bara { grid-template-columns: 92px 1fr auto; gap: 8px; font-size: 13.5px; } .ls-bara-suma { min-width: 60px; } } /* socoteala pe ani: ceara / aparat de ras / laser */ .ls-calc { margin-top: 34px; border-radius: 18px; background: var(--ls-cerneala); color: #fff; padding: 30px 30px 26px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: start; } .ls-calc h3 { color: #fff; font-size: 26px; margin-bottom: 10px; } .ls-page .ls-calc p { color: #cfcbe0; font-size: 15.5px; } .ls-calc-ctrl { margin-top: 18px; display: grid; gap: 16px; } .ls-comut { display: inline-flex; justify-self: start; background: rgba(255,255,255,.08); border-radius: 11px; padding: 4px; gap: 4px; } .ls-comut button { font-family: var(--ls-font); font-size: 15px; font-weight: 700; color: #fff; background: transparent; border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; } .ls-comut button[aria-pressed="true"] { background: #fff; color: var(--ls-violet); } .ls-calc label { font-size: 15px; font-weight: 600; display: block; margin-bottom: 6px; } .ls-calc input[type="range"] { width: 100%; accent-color: var(--ls-marker); } .ls-calc-bare { display: grid; gap: 14px; } .ls-cb { display: grid; grid-template-columns: 150px 1fr 96px; gap: 12px; align-items: center; } .ls-cb-nume { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: #e9e6f3; } .ls-cb-pista { height: 22px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; } .ls-cb-plin { display: block; height: 100%; width: 0; border-radius: 6px; background: #8f8aa6; transition: width .45s cubic-bezier(.2,.8,.2,1); } .ls-cb-laser .ls-cb-plin { background: var(--ls-marker); } .ls-cb-suma { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; } .ls-cb[hidden] { display: none; } .ls-page .ls-calc .ls-calc-nota { font-size: 12.5px; color: #a9a4bd; margin-top: 16px; line-height: 1.5; } @media (max-width: 900px) { .ls-calc { grid-template-columns: 1fr; padding: 24px 18px; } } @media (max-width: 460px) { .ls-cb { grid-template-columns: 1fr 84px; } .ls-cb-pista { grid-column: 1 / -1; grid-row: 2; } } @media (prefers-reduced-motion: reduce) { .ls-cb-plin { transition: none; } } /* ───────── CALENDAR (anul universitar) ───────── */ /* planificatorul: 8 luni pornind din luna aleasa (randate din JS); fara JS ramane doar textul de rezerva */ .ls-cal-ctrl { display: flex; align-items: center; gap: 12px; margin: -18px 0 18px; font-weight: 700; font-size: 17px; } .ls-cal-ctrl select { font-family: var(--ls-font); font-size: 17px; font-weight: 700; color: var(--ls-violet); background: #fff; border: 2px solid var(--ls-pix); border-radius: 10px; padding: 8px 12px; cursor: pointer; } .ls-cal-ctrl select:focus-visible { outline: 3px solid var(--ls-violet); outline-offset: 2px; } .ls-page .ls-an-fallback { grid-column: 1 / -1; padding: 18px; color: var(--ls-gri); } .ls-an { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 2px solid var(--ls-pix); border-radius: 14px; background: rgba(255,255,255,.75); overflow: hidden; } .ls-luna { border-right: 1px solid var(--ls-grila); min-height: 230px; padding: 12px 10px 14px; display: flex; flex-direction: column; gap: 10px; } .ls-luna:last-child { border-right: 0; } .ls-luna h3 { font-size: 15px; font-weight: 700; color: var(--ls-pix); letter-spacing: 0; } .ls-eveniment { font-family: var(--ls-mana); font-size: 20px; color: var(--ls-gri); line-height: 1.05; } .ls-sedinta { margin-top: auto; background: var(--ls-violet); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; font-weight: 700; line-height: 1.25; box-shadow: 0 3px 0 var(--ls-violet-inchis); } .ls-sedinta b { display: block; font-size: 22px; line-height: 1; margin-bottom: 2px; font-variant-numeric: tabular-nums; } .ls-sedinta.ls-optional { background: #fff; color: var(--ls-violet); border: 2px dashed var(--ls-violet); box-shadow: none; } .ls-luna.ls-luna-pauza { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(35,64,160,.05) 8px 16px); } .ls-an-legenda { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 16px; font-size: 14.5px; color: var(--ls-gri); } .ls-an-legenda span { display: inline-flex; gap: 8px; align-items: center; } .ls-an-legenda i { width: 16px; height: 16px; border-radius: 4px; display: inline-block; } .ls-cal-motive { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .ls-cal-motive h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.01em; } .ls-cal-motive p { color: var(--ls-gri); font-size: 15.5px; } @media (max-width: 1000px) { .ls-an { grid-template-columns: 1fr; } .ls-luna { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ls-grila); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 14px; } .ls-luna:last-child { border-bottom: 0; } .ls-luna h3 { flex: 0 0 84px; } .ls-sedinta { margin: 0 0 0 auto; } .ls-sedinta b { display: inline; font-size: 16px; margin-right: 4px; } .ls-cal-motive { grid-template-columns: 1fr; } } /* ───────── LASERUL 3K ───────── */ .ls-laser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .ls-aparat { border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(29,27,38,.16); } .ls-aparat img { width: 100%; aspect-ratio: 1200 / 896; object-fit: cover; } .ls-aparat figcaption { background: var(--ls-hartie); padding: 10px 14px; font-size: 13px; color: var(--ls-gri); } .ls-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 6px; } .ls-spec div { border: 1.5px solid var(--ls-linie); border-radius: 12px; padding: 12px 12px 10px; } .ls-spec b { display: block; font-size: 24px; font-weight: 800; color: var(--ls-violet); letter-spacing: -.02em; line-height: 1.05; } .ls-spec span { font-size: 13.5px; color: var(--ls-gri); line-height: 1.3; display: block; margin-top: 4px; } .ls-laser-text p { color: var(--ls-gri); font-size: 16.5px; } .ls-laser-text p + p { margin-top: 12px; } .ls-laser-text h3 { font-size: 22px; margin-bottom: 8px; } /* ce simti, pe zone */ .ls-simti { margin-top: 54px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; } .ls-simti h3 { font-size: 24px; margin-bottom: 8px; } .ls-simti > div > p { color: var(--ls-gri); } .ls-scala { display: grid; gap: 14px; } .ls-scala li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; } .ls-scala b { font-size: 16px; } .ls-scala-bara { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #d9ecff 0%, #ffe45c 55%, #ff9d6b 100%); } .ls-scala-bara i { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 3px solid var(--ls-cerneala); } .ls-scala li small { grid-column: 2; font-size: 14px; color: var(--ls-gri); margin-top: -6px; } .ls-scala-capete { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ls-gri); margin: 2px 0 0 124px; } /* de ce 6-8 sedinte: ciclul firului de par */ .ls-ciclu { margin-top: 54px; border-radius: 18px; background: var(--ls-hartie); padding: 28px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; } .ls-ciclu h3 { font-size: 24px; margin-bottom: 8px; } .ls-ciclu p { color: var(--ls-gri); font-size: 16px; } .ls-ciclu p + p { margin-top: 10px; } .ls-ciclu svg { width: 100%; height: auto; max-width: 520px; display: block; margin: 0 auto; } @media (max-width: 900px) { .ls-laser-grid, .ls-simti, .ls-ciclu { grid-template-columns: 1fr; } .ls-spec { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 460px) { .ls-spec { grid-template-columns: 1fr; } .ls-scala li { grid-template-columns: 1fr; gap: 6px; } .ls-scala li small { grid-column: 1; margin-top: 0; } .ls-scala-capete { margin-left: 0; } } /* ───────── SEDINTA ───────── */ .ls-pasi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: pas; border-top: 2px solid var(--ls-cerneala); } .ls-pasi li { padding: 18px 18px 0 0; } .ls-pasi li::before { counter-increment: pas; content: counter(pas); display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--ls-cerneala); color: #fff; font-weight: 800; align-items: center; justify-content: center; margin: -36px 0 12px; font-size: 16px; } .ls-pasi h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; } .ls-pasi p { font-size: 15px; color: var(--ls-gri); line-height: 1.5; } @media (max-width: 900px) { .ls-pasi { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--ls-cerneala); margin-left: 17px; } .ls-pasi li { padding: 0 0 22px 28px; position: relative; } .ls-pasi li::before { position: absolute; left: -18px; top: -4px; margin: 0; } } .ls-media { margin-top: 50px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; } .ls-video { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 18px 40px rgba(29,27,38,.2); } .ls-video img, .ls-video video { width: 100%; height: 100%; object-fit: cover; display: block; } .ls-page .ls-video-play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: var(--ls-violet); font-size: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .2s; } .ls-page .ls-video-play:hover { transform: scale(1.06); } .ls-video-play i { margin-left: 5px; } .ls-video-leg { font-size: 13.5px; color: var(--ls-gri); margin-top: 10px; } .ls-foto-trei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ls-foto-trei figure:first-child { grid-column: 1 / -1; } .ls-foto-trei img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; } .ls-foto-trei figcaption { font-size: 13px; color: var(--ls-gri); margin-top: 5px; line-height: 1.35; } @media (max-width: 900px) { .ls-media { grid-template-columns: 1fr; } } /* ───────── PREGATIRE ───────── */ .ls-prep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .ls-prep-col { border-radius: 16px; padding: 22px 22px 20px; border: 1.5px solid var(--ls-linie); } .ls-prep-col h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.01em; } .ls-prep-col ul { display: grid; gap: 10px; } .ls-prep-col li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.5; } .ls-prep-col li i { margin-top: 5px; color: var(--ls-violet); } .ls-prep-amanam { background: #fff6f5; border-color: #f2cdc9; } .ls-prep-amanam li i { color: var(--ls-atentie); } .ls-prep-col .ls-nota { margin-top: 14px; } @media (max-width: 1000px) { .ls-prep { grid-template-columns: 1fr; } } /* ───────── FAQ (details/summary: se deschide si fara JS) ───────── */ .ls-faq { max-width: 860px; display: grid; gap: 10px; } .ls-faq details { border: 1.5px solid var(--ls-linie); border-radius: 14px; background: #fff; } .ls-faq details[open] { border-color: var(--ls-violet); } .ls-faq summary { list-style: none; cursor: pointer; padding: 17px 20px; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .ls-faq summary::-webkit-details-marker { display: none; } .ls-faq summary::after { content: "+"; flex: 0 0 30px; height: 30px; border-radius: 8px; background: var(--ls-lila); color: var(--ls-violet); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; } .ls-faq details[open] summary::after { content: "−"; background: var(--ls-violet); color: #fff; } .ls-faq details > div { padding: 0 20px 18px; color: var(--ls-gri); font-size: 16px; } .ls-faq details > div p + p { margin-top: 8px; } /* ───────── CTA (vara) ───────── */ /* CTA-ul sta in banda de hartie a intrebarilor, la aceeasi distanta ca orice sectiune */ .ls-cta-sec { padding: 0 0 84px; background: var(--ls-hartie); } .ls-cta { position: relative; border-radius: 22px; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; color: #fff; background: var(--ls-violet-inchis); } .ls-cta picture, .ls-cta > picture img { position: absolute; inset: 0; width: 100%; height: 100%; } .ls-cta > picture img { object-fit: cover; object-position: 60% 18%; } .ls-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(62,1,66,.92) 0%, rgba(62,1,66,.7) 42%, rgba(62,1,66,0) 75%); } .ls-cta-text { position: relative; z-index: 1; padding: 40px; max-width: 560px; } .ls-cta-text .ls-mana { color: var(--ls-marker); font-size: 30px; display: block; margin-bottom: 6px; } .ls-cta-text h2 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; margin-bottom: 12px; } .ls-page .ls-cta-text p { color: rgba(255,255,255,.9); font-size: 17px; margin-bottom: 22px; } @media (max-width: 700px) { .ls-cta { min-height: 520px; } .ls-cta::after { background: linear-gradient(0deg, rgba(62,1,66,.96) 0%, rgba(62,1,66,.88) 58%, rgba(62,1,66,.1) 92%); } .ls-cta-text { padding: 26px 20px; } } /* ───────── PRETURI ───────── */ .ls-preturi { padding-bottom: 54px; } .ls-preturi .ls-cap { margin-bottom: 18px; } /* margin-bottom: banda subsolului urca 64px (margin-top:-64px) si ar acoperi marginea de jos a cartonasului */ .ls-pret-rezerva { max-width: 720px; border: 1.5px solid var(--ls-linie); border-radius: 16px; padding: 22px 24px; margin-bottom: 40px; } .ls-pret-rezerva .ls-butoane { margin-top: 16px; } /* componenta GetListaPreturi e randata DUPA .ls-page (reseturile paginii nu o ating). Ascundem doar banda ei de categorie: titlul „... laser clasic - Femei” ar contrazice pagina (pachetele sunt si pentru baieti), iar sectiunea noastra de mai sus spune deja ce e lista. Randurile cu preturi si detaliile raman neatinse. */ .ls-extern #ZonaDePret > .jumbotron:first-child { display: none; } .ls-extern #ZonaDePret > #DivPret { margin-top: 0 !important; padding-top: 10px; } /* fundal alb pe toata latimea: corpul paginii are fundal inchis, iar marginile laterale l-ar lasa sa se vada */ .ls-extern { background: #fff; padding: 0 20px 20px; } .ls-extern #ZonaDePret { max-width: 1120px; margin: 0 auto; } /* ───────── SUBSOL (randat de layout, in afara .ls-page) ───────── */ .ls-footer-banda { background: var(--ls-violet); color: #fff; padding: 34px 16px 26px; text-align: center; } .ls-footer-banda h3 { font-family: var(--ls-font); color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 8px; } .ls-footer-banda p { color: rgba(255,255,255,.92); max-width: 680px; margin: 0 auto; font-size: 16px; line-height: 1.6; font-family: var(--ls-font); } .ls-footer-foto { border-radius: 16px; box-shadow: 0 12px 34px rgba(35,64,160,.18); width: 100%; height: auto; display: block; } .ls-footer-form-titlu { text-align: center; color: var(--ls-violet); font-family: var(--ls-font); font-size: 22px; font-weight: 800; margin: 0 0 4px; } .ls-footer-form-sub { text-align: center; color: var(--ls-gri); font-size: 14px; margin: 0 0 14px; font-family: var(--ls-font); } #FormularProgramari.ls-footer-zona { background-color: var(--ls-hartie); background-image: linear-gradient(var(--ls-grila) 1px, transparent 1px), linear-gradient(90deg, var(--ls-grila) 1px, transparent 1px); background-size: 24px 24px; padding: 26px 0 34px; } .ls-footer-zona .input-group-text { background: var(--ls-violet) !important; color: #fff !important; border: none; width: 75px; } .ls-footer-zona .butonOcru { background: var(--ls-violet); border: none; color: #fff; font-weight: 700; border-radius: 12px; padding: 10px 28px; box-shadow: 0 4px 0 var(--ls-violet-inchis); } .ls-footer-zona .butonOcru:hover { color: #fff; filter: brightness(1.12); } /* o singura miscare fara actiunea utilizatorului: legitimatia din hero. Cu reduced-motion sta direct pe loc. */ @media (prefers-reduced-motion: reduce) { .ls-pass { animation: none; } .ls-btn, .ls-nav a, .ls-page .ls-video-play { transition: none; } } /* ───────── retusuri dupa revizia din 2026-09-23 ───────── */ /* fara preturi din baza, legitimatia si cartonasele spun unde afli pretul, in loc de cifra */ .ls-pret.ls-pret-fara span { font-size: 13px; font-weight: 700; color: var(--ls-violet); max-width: 120px; line-height: 1.3; margin: 0; } .ls-pachet-pret > span:only-child { font-size: 15px; font-weight: 600; color: var(--ls-violet); } /* pe telefon textul din schema ciclului firului de par ar iesi sub 13 px: il marim doar acolo (in SVG, font-size din CSS bate atributul si se citeste tot in unitatile viewBox-ului) */ @media (max-width: 460px) { .ls-ciclu { padding: 20px 12px; } .ls-ciclu .ls-ciclu-faze { font-size: 23px; } .ls-ciclu .ls-ciclu-piele { font-size: 21px; } } /* Menu_Styles.css (incarcat DUPA acest fisier, din _Menu_General_2026) muta #btn-rezumat in stanga de la 992 px; sub ~1260 px ajunge peste continut, fiindca .ls-wrap are doar 20 px margine. Il tinem in dreapta, deasupra butonului de WhatsApp, ca pe telefon. !important: regula din meniu are aceeasi specificitate si vine mai tarziu. Id-ul nu se atinge. */ @media (min-width: 992px) and (max-width: 1259.98px) { #btn-rezumat { left: auto !important; right: 10px; } } /* ───────── FEREASTRA DE MARIRE pentru fotografii (2026-09-23, copie a celei de pe /nad-booster, prefix ls-) ───────── */ /* butonul care invaluie fiecare fotografie: fara aspect de buton, doar cursor de marire si lupa in colt. Selectorii au .ls-zoom dublat ca sa bata reboot-ul Bootstrap (button { cursor }, button:focus { outline }) si in subsol, in afara .ls-page */ .ls-zoom.ls-zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: zoom-in; position: relative; border-radius: inherit; } .ls-zoom.ls-zoom:focus:not(:focus-visible) { outline: 0; } .ls-zoom.ls-zoom:focus-visible { outline: 3px solid var(--ls-pix); outline-offset: 3px; } .ls-zoom-lupa { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ls-violet); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 6px 16px rgba(29,27,38,.22); pointer-events: none; } /* in hero legitimatia acopera coltul din stanga-jos al pozei: lupa sta sus, in dreapta */ .ls-foto-hero .ls-zoom-lupa { top: 12px; bottom: auto; } /* fereastra: randata in afara .ls-page, deci isi seteaza singura fontul */ .ls-lb { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; background: rgba(29,27,38,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-family: var(--ls-font); opacity: 0; transition: opacity .25s ease; } .ls-lb[hidden] { display: none; } .ls-lb.ls-lb-vizibil { opacity: 1; } .ls-lb-bara, .ls-lb-jos { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 16px; } .ls-lb-bara { justify-content: space-between; } .ls-lb-titlu { font-size: 18px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ls-lb-contor { font-size: 13px; letter-spacing: 1.2px; color: #cfcbe0; font-variant-numeric: tabular-nums; } .ls-lb-btn { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .2s, transform .2s; } .ls-lb-btn:hover { background: var(--ls-violet-2); border-color: var(--ls-violet-2); } .ls-lb-btn:focus-visible { outline: 3px solid var(--ls-marker); outline-offset: 2px; } .ls-lb-btn:focus:not(:focus-visible) { outline: 0; } .ls-lb-inchide:hover { transform: rotate(90deg); } /* scena: la scara 1 imaginea e centrata (margin:auto), marita se deruleaza; touch-action lasa derularea cu un deget browserului si opreste pinch-ul nativ (il tratam noi); overscroll-behavior nu lasa derularea sa scape in pagina */ .ls-lb-scena { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; touch-action: pan-x pan-y; overscroll-behavior: contain; cursor: zoom-in; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ls-lb-scena::-webkit-scrollbar { display: none; } .ls-lb-scena.ls-lb-marit { cursor: grab; } .ls-lb-scena.ls-lb-tras { cursor: grabbing; } .ls-lb-scena img { display: block; flex: 0 0 auto; margin: auto; max-width: none; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.45); user-select: none; -webkit-user-drag: none; } .ls-lb-zoom { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 30px; background: rgba(0,0,0,.35); } .ls-lb-zoom .ls-lb-btn { width: 38px; height: 38px; font-size: 14px; } .ls-lb-procent { min-width: 52px; text-align: center; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .ls-lb-hint { flex: 0 0 auto; margin: 0; padding: 0 16px 12px; text-align: center; font-size: 12.5px; color: #a9a4bd; line-height: 1.4; max-width: 900px; align-self: center; } @media (max-width: 560px) { .ls-lb-titlu { font-size: 15px; } .ls-lb-bara, .ls-lb-jos { padding: 10px 12px; gap: 10px; } .ls-lb-hint { font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { .ls-lb, .ls-lb * { animation: none !important; transition: none !important; } }