/* ============================================================ FicoFit — foaie de stil comună ------------------------------------------------------------ Două teme, un singur set de nume. Nicăieri în restul fișierului nu mai apare o culoare scrisă direct: totul trece prin variabilele de mai jos. Tema se schimbă punând atributul data-theme="dark" pe , iar restul stilurilor nici nu află că s-a întâmplat ceva. ============================================================ */ :root{ /* neutre calde */ --ink:#2B2A27; /* text principal, aproape negru cald */ --logo:#2B2A27; /* cuvântul FicoFit din antet */ --muted:#7C756C; /* text secundar */ --line:#E3DED5; /* borduri */ --paper:#FBF9F6; /* fundal general */ --card:#FFFFFF; --surface-2:#F4F1EC; /* zone liniștite: taburi, rânduri, câmpuri */ /* Accente. Varianta tare merge pe butoane, borduri și text; cea stinsă („-l") pe fundaluri de casetă. „--on-accent" e culoarea textului așezat PESTE varianta tare — se schimbă odată cu tema, altfel scrisul dispare. */ --sage:#7E9A6F; /* verde salvie — reușită, confirmare */ --sage-l:#E2E9DC; --clay:#BE6A50; /* teracotă — atenție, anulare */ --clay-l:#F4E2DB; --sky:#4E7D95; /* albastru — informativ */ --sky-l:#DEE8ED; --sand:#B5851F; /* ocru — avertisment blând */ --sand-l:#F4E8CE; --plum:#8E7189; /* prună */ --plum-l:#EAE2E8; --on-accent:#FFFFFF; /* fundaluri și umbre care depind de temă */ --header-bg:rgba(251,249,246,.92); --scrim:rgba(43,42,39,.5); --shadow-soft:0 1px 2px rgba(43,42,39,.05), 0 8px 24px rgba(43,42,39,.06); --shadow-card:0 14px 34px rgba(43,42,39,.07); --shadow-pop:0 20px 50px rgba(43,42,39,.10); --hairline:rgba(43,42,39,.10); --max:1200px; --r:18px; } /* ------------------------------------------------------------ Tema închisă. Antracit cald, nu negru: fundalul păstrează o urmă din cremul temei deschise, ca să se simtă aceeași marcă. Textul nu e alb pur — albul pe negru vibrează și obosește ochiul după zece minute de citit. Accentele urcă în luminozitate, fundalurile lor coboară: pe întuneric, un verde deschis pe un verde-închis profund se citește mai bine decât aceleași două culori inversate. ------------------------------------------------------------ */ [data-theme="dark"]{ --ink:#EFEBE4; --logo:#EFEBE4; --muted:#A29A8F; --line:#3A3733; --paper:#1A1917; --card:#232220; --surface-2:#2B2926; --sage:#A8C295; --sage-l:#2B3327; --clay:#E09A80; --clay-l:#392A24; --sky:#8FB8CE; --sky-l:#232F36; --sand:#DFB76B; --sand-l:#38301F; --plum:#C3A6BD; --plum-l:#302A2F; --on-accent:#1A1917; --header-bg:rgba(26,25,23,.92); --scrim:rgba(0,0,0,.6); --shadow-soft:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.28); --shadow-card:0 14px 34px rgba(0,0,0,.28); --shadow-pop:0 20px 50px rgba(0,0,0,.42); --hairline:rgba(239,235,228,.10); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} section,[id]{scroll-margin-top:92px} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--ink);background:var(--paper); -webkit-font-smoothing:antialiased;line-height:1.6; transition:background .25s ease,color .25s ease; } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} img{max-width:100%} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} .narrow{max-width:840px} /* ---------- tipografie ---------- */ h1{font-size:clamp(36px,4.4vw,60px);line-height:1.06;font-weight:800;letter-spacing:-1.8px} h2{font-size:clamp(26px,3vw,40px);line-height:1.12;font-weight:800;letter-spacing:-1.2px} h3{font-size:22px;font-weight:700;letter-spacing:-.6px} h4{font-size:17px;font-weight:700;letter-spacing:-.3px} .lead{font-size:18px;color:var(--muted)} .kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2.4px; text-transform:uppercase;color:var(--muted);margin-bottom:18px} .muted{color:var(--muted)} /* ---------- antet ---------- */ header{position:sticky;top:0;z-index:100;background:var(--header-bg); backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:72px} /* Semnul FicoFit lângă text. Marca singură nu spune încă nimic — nimeni n-o recunoaște la primul contact — iar textul singur nu se ține minte. Împreună, una o învață pe cealaltă. */ .logo{display:inline-flex;align-items:center;gap:10px; font-size:22px;font-weight:300;letter-spacing:-.6px;color:var(--logo)} .logo b{font-weight:700} .logo-mark{width:32px;height:32px;display:block;flex-shrink:0} @media (max-width:520px){ .logo-mark{width:27px;height:27px} } .menu{display:flex;align-items:center;gap:32px} /* Fără asta, la lățimi mijlocii „Cum funcționează" se rupea pe două rânduri, antetul creștea, iar vecinii se suprapuneau — de acolo impresia că din meniu dispare o intrare. */ .menu>a,.drop>button{font-size:14.5px;font-weight:500;transition:opacity .2s; white-space:nowrap} .menu>a:hover,.drop>button:hover{opacity:.55} /* Panoul stă la 40px sub buton, iar între ele rămânea o bandă în care cursorul ieșea de pe .drop și panoul dispărea înainte de clic. Padding-ul de jos extinde zona de hover peste acea bandă; marginea negativă îl scoate din calculul înălțimii, ca antetul să rămână la fel. */ .drop{position:relative;padding-bottom:16px;margin-bottom:-16px} .drop>button{display:flex;align-items:center;gap:6px;cursor:pointer} .drop-panel{position:absolute;top:40px;left:-20px;background:var(--card); border:1px solid var(--line);border-radius:16px;padding:10px;width:340px; box-shadow:var(--shadow-pop);opacity:0;visibility:hidden; transform:translateY(-6px);transition:.22s} .drop:hover .drop-panel, .drop:focus-within .drop-panel{opacity:1;visibility:visible;transform:translateY(0)} .drop-panel a{display:flex;gap:12px;align-items:flex-start;padding:12px 14px; border-radius:11px;transition:background .15s} .drop-panel a:hover{background:var(--surface-2)} /* Eticheta pentru ce nu se poate cumpăra încă. Aceeași formă ca .tag, altă culoare, ca să nu semene cu o reducere. */ /* `align-self:flex-start` o ține la lățimea textului: în cardurile care sunt containere flex, un inline-block se întinde altfel pe tot rândul. */ .soon{display:inline-block;align-self:flex-start;width:fit-content; font-size:11px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;padding:5px 11px;border-radius:99px; background:var(--sand-l);color:var(--sand);border:1px solid var(--line)} .card .soon{margin-bottom:12px} .soon-box{border:1px dashed var(--line);border-radius:14px;padding:16px; margin-top:auto;text-align:center} .soon-box p{font-size:13px;color:var(--muted);margin:0 0 12px} .dotmark{width:10px;height:10px;border-radius:99px;flex-shrink:0;margin-top:6px} .drop-panel strong{display:block;font-size:14.5px;font-weight:600} .drop-panel span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4} .head-right{display:flex;align-items:center;gap:12px;white-space:nowrap} .lang{display:flex;align-items:center;gap:6px;border:1px solid var(--line); border-radius:99px;padding:7px 13px;font-size:12px;font-weight:600;background:var(--card)} .burger{display:none;flex-direction:column;gap:5px;padding:8px} .burger span{width:22px;height:2px;background:var(--ink);display:block} .mobile-menu{display:none;border-top:1px solid var(--line);background:var(--card);padding:14px 24px 26px} .mobile-menu a{display:block;padding:13px 0;font-size:16px;font-weight:500;border-bottom:1px solid var(--line)} /* ------------------------------------------------------------ Comutatorul de temă. Pastilă cu două opțiuni, ca să se vadă dintr-o privire ce e ales și ce se poate alege. E construită din app.js și pusă singură în antetul fiecărei pagini — șapte pagini, un singur loc de schimbat. ------------------------------------------------------------ */ .theme-sw{display:inline-flex;align-items:center;background:var(--surface-2); border:1px solid var(--line);border-radius:999px;padding:3px} .theme-sw button{border:0;background:transparent;cursor:pointer;border-radius:999px; padding:6px 12px;font:inherit;font-size:12.5px;font-weight:500;color:var(--muted); display:flex;align-items:center;gap:6px;transition:.18s} .theme-sw button[aria-pressed="true"]{background:var(--card);color:var(--ink); box-shadow:var(--shadow-soft)} .theme-sw svg{width:13px;height:13px;flex-shrink:0} @media(max-width:560px){ .theme-sw button i{display:none} .theme-sw button{padding:7px 9px} } /* ------------------------------------------------------------ Comutatorul de limbă: aceeași pastilă ca Light/Dark. Stegulețele sunt SVG — pe Windows, emoji-ul de steag apare ca două litere. ------------------------------------------------------------ */ .lang-sw{display:inline-flex;align-items:center;background:var(--surface-2); border:1px solid var(--line);border-radius:999px;padding:3px} .lang-sw button,.lang-sw a{border:0;background:transparent;cursor:pointer;border-radius:999px; padding:6px 11px;font:inherit;font-size:12.5px;font-weight:500;color:var(--muted); display:flex;align-items:center;gap:6px;transition:.18s;text-decoration:none} .lang-sw [aria-pressed="true"],.lang-sw [aria-current="page"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-soft)} .lang-sw svg{border-radius:2px;flex-shrink:0;display:block} @media(max-width:560px){ .lang-sw button,.lang-sw a{padding:7px 8px} } /* ---------- butoane ---------- */ .btn{display:inline-block;border-radius:99px;padding:13px 28px;font-size:14.5px; font-weight:600;transition:.2s;text-align:center;cursor:pointer} .btn-dark{background:var(--ink);color:var(--paper)} .btn-dark:hover{opacity:.86} .btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)} .btn-line:hover{background:var(--ink);color:var(--paper)} .btn-soft{background:var(--card);color:var(--ink);border:1px solid var(--line)} .btn-soft:hover{border-color:var(--ink)} /* Butoanele colorate: verdele confirmă, teracota oprește. */ .btn-sage{background:var(--sage);color:var(--on-accent)} .btn-sage:hover{opacity:.88} .btn-clay{background:var(--clay);color:var(--on-accent)} .btn-clay:hover{opacity:.88} .btn-full{width:100%} /* ---------- secțiuni ---------- */ section{padding:88px 0} .sec-head{max-width:680px;margin-bottom:48px} .sec-head p{font-size:17px;color:var(--muted);margin-top:14px} .tint{background:var(--sand-l)} .tint-sage{background:var(--sage-l)} .tint-sky{background:var(--sky-l)} .tint-clay{background:var(--clay-l)} /* Banda întunecată din mijlocul paginii. Pe tema deschisă e un contrast voit; pe cea închisă n-are ce contrasta, așa că devine o treaptă mai ridicată, nu o inversare care ar orbi. */ .dark{background:var(--ink);color:var(--paper)} .dark .sec-head p,.dark .muted{color:var(--paper);opacity:.72} [data-theme="dark"] .dark{background:var(--surface-2);color:var(--ink)} [data-theme="dark"] .dark .sec-head p, [data-theme="dark"] .dark .muted{color:var(--muted);opacity:1} /* ---------- hero ---------- */ .hero{padding:76px 0 64px} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} .hero .lead{margin-top:20px;max-width:520px} .hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap} .hero-note{font-size:13px;color:var(--muted);margin-top:16px} /* panou de cifre — înlocuiește imaginea */ .panel{border-radius:24px;padding:32px;background:var(--sage-l);border:1px solid var(--hairline)} .panel-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px} .panel .big{font-size:42px;font-weight:800;letter-spacing:-2px;line-height:1} .panel .lbl{font-size:12.5px;color:var(--muted)} .bar{height:7px;border-radius:99px;background:var(--hairline);overflow:hidden} .bar i{display:block;height:100%;border-radius:99px;background:var(--sage)} .panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px} .mini{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-soft)} .mini .v{font-size:19px;font-weight:800;letter-spacing:-.6px} .mini .k{font-size:11.5px;color:var(--muted);margin-top:1px} /* ---------- statistici ---------- */ /* ---------- carduri ---------- */ .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} /* Cardurile de abonament au înălțimi diferite (liste de lungimi diferite); fără asta, butoanele ies la niveluri diferite și rândul arată strâmb. */ .grid-3.plans>.card{display:flex;flex-direction:column} .grid-3.plans>.card .price{margin-top:auto} @media (max-width:1040px){ .grid-3.plans{grid-template-columns:1fr} } .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:32px 28px;display:flex;flex-direction:column;transition:.24s; box-shadow:var(--shadow-soft)} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)} .card .tag{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase; color:var(--muted);margin-bottom:12px} .card .desc{font-size:15px;color:var(--muted);margin-top:10px} .card ul{list-style:none;margin-top:20px;flex:1} .card li{font-size:14.5px;padding:7px 0 7px 22px;position:relative} .card li:before{content:"";position:absolute;left:0;top:13px;width:9px;height:9px; border-radius:99px;background:var(--sage-l);border:2px solid var(--sage);box-sizing:border-box} .card .price{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .price .from{font-size:12px;color:var(--muted)} .price .val{font-size:25px;font-weight:800;letter-spacing:-1px;margin-top:2px} .price .per{font-size:13px;font-weight:400;color:var(--muted)} .card .btn{margin-top:20px} .c-sage{background:var(--sage-l)} .c-clay{background:var(--clay-l)} .c-sky{background:var(--sky-l)} .c-sand{background:var(--sand-l)} .c-plum{background:var(--plum-l)} .swatch{width:34px;height:34px;border-radius:10px;margin-bottom:16px} .sw-sage{background:var(--sage)}.sw-clay{background:var(--clay)} .sw-sky{background:var(--sky)}.sw-sand{background:var(--sand)}.sw-plum{background:var(--plum)} /* ---------- pași ---------- */ .step .line{height:2px;background:var(--line);margin-bottom:16px} .step:first-child .line{background:var(--sage)} .step .n{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:1px} .step h4{margin-top:12px} .step p{font-size:14.5px;color:var(--muted);margin-top:7px} /* ---------- FAQ ---------- */ .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;text-align:left;padding:22px 0;font-size:17px;font-weight:600; display:flex;justify-content:space-between;align-items:center;gap:20px;letter-spacing:-.3px} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted);font-size:15.5px} .faq-a p{padding-bottom:22px} .faq-item.open .faq-a{max-height:400px} .faq-item.open .plus{transform:rotate(45deg)} .plus{font-size:23px;font-weight:300;transition:transform .25s;flex-shrink:0} /* ---------- CTA + subsol ---------- */ .cta{text-align:center;padding:92px 0} .cta p{font-size:17px;color:var(--muted);margin:16px auto 30px;max-width:520px} footer{border-top:1px solid var(--line);padding:52px 0 36px;background:var(--card)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px} .foot h5{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase; color:var(--muted);margin-bottom:14px} .foot a{display:block;font-size:14.5px;padding:6px 0} .foot a:hover{opacity:.6} .foot-contact{margin-top:32px;display:flex;gap:24px;flex-wrap:wrap} .foot-contact a{font-size:15px;font-weight:600} .foot-bottom{margin-top:22px;padding-top:22px;border-top:1px solid var(--line); display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:12px} .legal{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)} .legal p{font-size:10.5px;line-height:1.55;color:var(--muted);opacity:.8;margin-bottom:7px} /* ---------- modal evaluare ---------- */ .modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px} .modal.on{display:flex} .modal-bg{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(3px)} .modal-box{position:relative;background:var(--card);border-radius:22px;width:100%; max-width:520px;max-height:92vh;overflow-y:auto;padding:34px 34px 30px} .modal-close{position:absolute;top:16px;right:20px;font-size:26px;font-weight:300;color:var(--muted);line-height:1} .prog{height:3px;background:var(--line);border-radius:99px;margin-bottom:24px;overflow:hidden} .prog i{display:block;height:100%;background:var(--sage);transition:width .3s} .q{font-size:24px;font-weight:800;letter-spacing:-.8px;margin-bottom:6px} .qs{font-size:14.5px;color:var(--muted);margin-bottom:22px} .opt{width:100%;text-align:left;border:1px solid var(--line);border-radius:14px; padding:15px 18px;margin-bottom:10px;font-size:15px;font-weight:500;transition:.18s;background:var(--card)} .opt:hover{border-color:var(--sage)} .opt.sel{border-color:var(--sage);border-width:2px;background:var(--sage-l)} .opt small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px} .numrow{display:flex;align-items:center;justify-content:center;gap:22px;margin:18px 0 8px} .numbtn{width:46px;height:46px;border-radius:99px;background:var(--surface-2);font-size:22px;line-height:1;color:var(--ink)} .numbtn:hover{background:var(--sage);color:var(--on-accent)} .numval{font-size:42px;font-weight:800;letter-spacing:-1.5px;min-width:130px;text-align:center} .numval span{font-size:15px;font-weight:400;color:var(--muted);letter-spacing:0} .modal input[type=range]{width:100%;accent-color:var(--sage)} .modal input[type=text],.modal input[type=email],.modal input[type=tel]{ width:100%;border:1px solid var(--line);border-radius:14px;padding:15px 18px; font-size:16px;margin-bottom:12px;outline:none;background:var(--card); color:var(--ink);font-family:inherit} .modal input:focus{border-color:var(--sage)} .telrow{display:flex;gap:8px;margin-bottom:12px} .telrow select{border:1px solid var(--line);border-radius:14px;padding:15px 10px; font-size:15px;font-family:inherit;background:var(--card);color:var(--ink);outline:none;flex-shrink:0; width:120px;cursor:pointer;-webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C756C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center} .telrow input{flex:1;margin-bottom:0} .res-hero{background:var(--sage);color:var(--on-accent);border-radius:18px;padding:26px;text-align:center;margin-bottom:16px} .res-hero .big{font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1} .res-hero .lbl{font-size:13px;opacity:.82} .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px} .res-cell{background:var(--surface-2);border-radius:14px;padding:14px;text-align:center} .res-cell .v{font-size:20px;font-weight:800;letter-spacing:-.6px} .res-cell .k{font-size:11.5px;color:var(--muted);margin-top:2px} .note-box{background:var(--clay-l);border-radius:14px;padding:16px 18px;font-size:13.5px;line-height:1.5;margin-bottom:16px} .consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted); margin:4px 0 16px;line-height:1.45} .consent input{margin-top:2px;accent-color:var(--sage);flex-shrink:0} .consent a{text-decoration:underline} .err{color:var(--clay);font-size:13px;margin-bottom:10px;display:none} /* ---------- responsive ---------- */ /* Antetul are acum și comutatorul de temă, deci îi trebuie mai mult loc decât înainte. Între 1100 și 1240 strângem distanțele; sub 1100 meniul intră de tot în butonul de hamburger. */ @media(max-width:1240px){ .menu{gap:22px} .head-right{gap:10px} } @media(max-width:1100px){ .menu{display:none} .burger{display:flex} } @media(max-width:980px){ .menu{display:none} .burger{display:flex} .hero-grid{grid-template-columns:1fr;gap:36px} .hero{padding:48px 0 42px} section{padding:60px 0} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .grid-4.steps{grid-template-columns:1fr 1fr} .foot-grid{grid-template-columns:1fr 1fr;gap:26px} .head-right .btn{display:none} } @media(max-width:560px){ .wrap{padding:0 18px} h1{letter-spacing:-1.1px} .grid-4.steps{grid-template-columns:1fr} .hero-cta{flex-direction:column} .hero-cta .btn{width:100%} .cta{padding:64px 0} .modal-box{padding:26px 20px 22px;border-radius:18px} .q{font-size:21px} .numval{font-size:36px;min-width:110px} } /* ============================================================ Diagrama „un sistem, nu o aplicație" ------------------------------------------------------------ Tu → patru piese → un plan. Desenată din cutii și două linii, nu dintr-o imagine: se citește la fel pe orice ecran, se traduce singură și cântărește zero kilobytes. ============================================================ */ .sys-flow{ display:flex; flex-direction:column; align-items:center; gap:0; text-align:center; max-width:760px; margin:0 auto; } .sys-you, .sys-out{ border:1px solid var(--line); border-radius:999px; padding:11px 26px; font-size:15px; font-weight:600; background:var(--card); box-shadow:var(--shadow-soft); } .sys-out{ font-weight:500; border-radius:16px; padding:14px 28px; } /* Linia dintre etaje. Scurtă pe telefon, ca diagrama să nu se întindă pe un ecran întreg. */ .sys-arrow{ width:1px; height:34px; background:var(--line); } @media(max-width:620px){ .sys-arrow{ height:22px } } .sys-parts{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:100%; margin:0; } .sys-part{ display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--line); border-radius:14px; padding:14px 10px; background:var(--card); font-size:14.5px; font-weight:500; box-shadow:var(--shadow-soft); } .sys-part .dotmark{ margin-top:0 } @media(max-width:620px){ .sys-parts{ grid-template-columns:1fr 1fr } .sys-you, .sys-out{ font-size:14px; padding:10px 20px } } /* Cardurile cu situații: întrebarea omului, cu ghilimele, are altă greutate decât un titlu de funcție. */ .card.real h4{ font-weight:600; font-style:italic; } /* ============================================================ Intrarea la scroll ------------------------------------------------------------ Douăzeci de pixeli și o jumătate de secundă. Atât cât ochiul să observe că a apărut ceva, nu cât să aștepte după pagină. Elementele pornesc vizibile și devin ascunse doar dacă JavaScript-ul chiar rulează: altfel, cine are scriptul blocat ar vedea o pagină goală. ============================================================ */ .js .reveal{ opacity:0; transform:translateY(20px); } .js .reveal.seen{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); } /* Cine a cerut mai puțină mișcare din setările sistemului o primește: conținutul apare, fără drum. */ @media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none } .js .reveal.seen{ transition:none } } /* ============================================================ Expert Mentorship, pe prima pagină ------------------------------------------------------------ Lista din stânga, cutia cu invitația în dreapta. Pe telefon una sub alta, cu cutia la final — acolo unde omul a terminat de citit argumentele. ============================================================ */ .mn-lead{ font-size:16px; line-height:1.65; color:var(--ink); margin-bottom:18px } .mn-list{ list-style:none; padding:0; margin:0 } .mn-list li{ position:relative; padding:0 0 14px 22px; font-size:14.8px; line-height:1.6; color:var(--muted); } .mn-list li strong{ color:var(--ink); font-weight:600 } /* Bulina desenată, nu un caracter: rămâne aliniată la orice mărime de text și își ia culoarea din temă. */ .mn-list li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:99px; background:var(--sage); } /* Cutia se întinde pe toată înălțimea listei, cu butonul jos: pe desktop nu mai rămâne un gol sub ea, lângă ultimele puncte. */ .mn-box{ align-self:stretch; display:flex; flex-direction:column } .mn-box .btn{ margin-top:auto; } .mn-box .desc:last-of-type{ margin-bottom:20px } .mn-box .desc{ margin-bottom:14px } /* patru planuri pe pagina FI Coach: 4 coloane pe ecran lat, 2 pe tabletă, 1 pe telefon */ .grid-3.plans.plans-4{grid-template-columns:repeat(4,1fr);gap:18px} @media (max-width:1240px){ .grid-3.plans.plans-4{grid-template-columns:repeat(2,1fr)} } @media (max-width:700px){ .grid-3.plans.plans-4{grid-template-columns:1fr} } /* ------------------------------------------------------------ Hero: capturi reale din aplicație, în rame de telefon ------------------------------------------------------------ */ .phones{position:relative;height:560px;display:flex;justify-content:center;align-items:center} .phone{position:absolute;margin:0;width:232px;aspect-ratio:640/1194;border-radius:34px;overflow:hidden; background:#111;border:7px solid #1b1b1b;box-shadow:0 30px 60px -20px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)} .phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top} .ph-center{z-index:3;width:262px;transform:translateY(-6px)} .ph-left{z-index:2;transform:translateX(-168px) translateY(26px) rotate(-6deg);opacity:.97} .ph-right{z-index:1;transform:translateX(168px) translateY(26px) rotate(6deg);opacity:.97} /* tema site-ului alege varianta capturii */ .phone .th-d{display:none} [data-theme="dark"] .phone .th-l{display:none} [data-theme="dark"] .phone .th-d{display:block} [data-theme="dark"] .phone{border-color:#2a2a2a} @media (max-width:1040px){ .phones{height:500px} .phone{width:200px}.ph-center{width:228px} .ph-left{transform:translateX(-128px) translateY(22px) rotate(-6deg)} .ph-right{transform:translateX(128px) translateY(22px) rotate(6deg)} } @media (max-width:560px){ .phones{height:420px;overflow-x:clip;overflow-y:visible} .phone{width:160px;border-width:5px;border-radius:26px}.ph-center{width:184px} .ph-left{transform:translateX(-102px) translateY(20px) rotate(-6deg)} .ph-right{transform:translateX(102px) translateY(20px) rotate(6deg)} } /* panoul „Ce primești în prima săptămână”, mutat sub hero */ .week-sec{padding-top:0} .panel-wide .panel-grid{grid-template-columns:repeat(5,1fr) !important;gap:14px} @media (max-width:1040px){ .panel-wide .panel-grid{grid-template-columns:repeat(2,1fr) !important} } @media (max-width:560px){ .panel-wide .panel-grid{grid-template-columns:1fr !important} } /* aplicația pas cu pas (secțiunea „Cum funcționează”) */ .app-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px} .app-shot{margin:0;text-align:center} .app-shot .phone{position:relative;width:100%;max-width:230px;margin:0 auto} .app-shot figcaption{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.45} .app-shot figcaption b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px} @media (max-width:1040px){ .app-strip{grid-template-columns:repeat(2,1fr);row-gap:34px} } @media (max-width:560px){ .app-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:8px;margin-right:-16px;padding-right:16px} .app-shot{flex:0 0 68%;scroll-snap-align:center} } /* ------------------------------------------------------------ Telefoane: ramă de iPhone (titan, Dynamic Island, butoane) ------------------------------------------------------------ */ .phone{background:#0d0d0d;border:0 !important;padding:9px;border-radius:52px !important;aspect-ratio:9/19.3 !important; box-shadow:0 0 0 1.5px #3a3a3c,0 0 0 3px #1c1c1e,0 40px 80px -30px rgba(0,0,0,.55),inset 0 0 2px rgba(255,255,255,.25)} .phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#2c2c2e} .phone::before{left:-4px;top:22%;height:11%;box-shadow:0 -52px 0 -1px #2c2c2e,0 60px 0 0 #2c2c2e} .phone::after{right:-4px;top:28%;height:16%} .phone{overflow:visible !important} .screen{position:relative;width:100%;height:100%;border-radius:43px;overflow:hidden;display:flex;flex-direction:column;background:#232120;color:#f2efe9} .screen img{flex:1;min-height:0;width:100%;height:auto !important;object-fit:cover;object-position:top} .sbar{position:relative;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 26px;font:600 12px/1 -apple-system,"SF Pro Text",Inter,sans-serif} .sbar .island{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:31%;height:20px;border-radius:12px;background:#000} .sb-ico{display:flex;gap:4px;align-items:center} .sb-ico svg{fill:currentColor} [data-theme="dark"] .screen{background:#fff;color:#111} .phone .th-d{display:none !important} .phone .th-l{display:block} [data-theme="dark"] .phone .th-l{display:none !important} [data-theme="dark"] .phone .th-d{display:block !important} @media (max-width:560px){ .phone{padding:6px;border-radius:36px !important}.screen{border-radius:30px}.sbar{height:24px;flex-basis:24px;font-size:9px;padding:0 14px 0 18px}.sbar .island{top:6px;height:14px}.sb-ico svg{width:12px;height:8px} } /* ------------------------------------------------------------ „Un sistem construit în jurul tău”: de la acțiune la rezultat ------------------------------------------------------------ */ .sys-journey{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;margin-top:8px} .sj-step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 18px 18px;box-shadow:var(--shadow-soft)} .sj-step:not(:last-child)::after{content:"";position:absolute;right:-12px;top:34px;width:10px;height:10px;border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);transform:rotate(45deg);opacity:.6} .sj-head{display:flex;align-items:center;gap:8px} .sj-n{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--muted)} .sj-head .dotmark{margin:0} .sj-step h4{margin-top:12px;font-size:16.5px} .sj-step ul{list-style:none;padding:0;margin:12px 0 0} .sj-step li{font-size:13.5px;color:var(--muted);padding:7px 0;border-top:1px solid var(--line);line-height:1.35} .sj-result{background:#23211f;color:#f4f1ea;border-color:transparent} .sj-result h4{color:#f4f1ea} .sj-result li{color:rgba(244,241,234,.78);border-color:rgba(255,255,255,.12)} .sj-result li::before{content:"✓ ";color:#a9c79a} .sj-result .sj-n{color:rgba(244,241,234,.6)} [data-theme="dark"] .sj-result{background:var(--sage-l);color:var(--ink);box-shadow:0 0 0 1px var(--sage)} [data-theme="dark"] .sj-result h4{color:var(--ink)} [data-theme="dark"] .sj-result li{color:var(--ink);border-color:var(--line)} .sj-loop{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:13.5px;color:var(--muted);text-align:center} .sj-loop-line{flex:1;height:1px;border-top:1.5px dashed var(--line)} @media(max-width:1100px){.sys-journey{grid-template-columns:repeat(3,1fr)}.sj-step:nth-child(3)::after{display:none}} @media(max-width:700px){ .sys-journey{grid-template-columns:1fr;gap:18px} .sj-step:not(:last-child)::after{display:block;right:auto;left:50%;top:auto;bottom:-13px;transform:translateX(-50%) rotate(135deg)} .sj-loop{font-size:12.5px} } /* carduri de preț compacte (pagina FI Coach App) */ .plans-compact>.card{padding:24px 22px} .plans-compact h3{font-size:22px;margin-top:2px} .plans-compact .desc{font-size:14px;margin-top:6px;min-height:42px} .plans-compact ul{margin-top:14px} .plans-compact li{font-size:13.5px;line-height:1.4;padding-top:5px;padding-bottom:5px} .plans-compact .soon{margin-bottom:10px} .plans-compact .soon.soft{background:var(--line);color:var(--muted)} .plans-compact .price .val{font-size:30px;line-height:1.1} .plans-compact .price .from{font-size:13px;font-weight:500;color:var(--muted);margin-right:2px} .plans-compact .price .per{font-size:13px} .p-sub{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.4} .p-cmp{font-size:12.5px;color:var(--ink);margin-top:6px;line-height:1.4} .p-trial{font-size:13px;font-weight:600;color:var(--sage);margin-top:8px} .plans-compact .soon-box p{font-size:13px} .price-note{font-size:14px;margin-top:30px;text-align:center;color:var(--ink)} .price-note+.muted{text-align:center} .swatch.ico{display:flex;align-items:center;justify-content:center;color:#fff} [data-theme="dark"] .swatch.ico{color:#1c1b19} .diff .desc{font-size:14.5px} .diff-stat{margin-top:16px;padding-top:14px;border-top:1px solid rgba(127,127,127,.2);display:flex;flex-direction:column} .diff-stat b{font-size:22px;letter-spacing:-.3px} .diff-stat span{font-size:12.5px;color:var(--muted);margin-top:2px} .cmp-wrap{margin-top:44px;overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow-soft)} .cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px} .cmp th,.cmp td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--line)} .cmp th{font-size:13px;font-weight:600;color:var(--muted)} .cmp td:first-child,.cmp th:first-child{text-align:left;color:var(--ink)} .cmp .me{background:var(--sage-l);color:var(--ink);font-weight:600} .cmp th.me{color:var(--ink);font-size:14px} .cmp .y{color:var(--sage);font-weight:700} .cmp .n{color:var(--muted)} .cmp .p{color:var(--muted);font-size:13px} .cmp tr:last-child td{border-bottom:0} .cmp .price-row td{font-weight:600} /* FAQ: tabelul cu diferențele dintre abonamente */ .faq-item.open .faq-a.faq-wide{max-height:2000px} .plan-tbl-wrap{overflow-x:auto;margin:4px 0 14px;border:1px solid var(--line);border-radius:14px} .plan-tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;color:var(--ink)} .plan-tbl th,.plan-tbl td{padding:11px 12px;text-align:center;border-bottom:1px solid var(--line)} .plan-tbl th{font-size:14px;font-weight:700;vertical-align:bottom} .plan-tbl th small{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px} .plan-tbl td:first-child{text-align:left} .plan-tbl th:nth-child(3),.plan-tbl td:nth-child(3){background:var(--sage-l)} .plan-tbl .y{color:var(--sage);font-weight:700} .plan-tbl .n{color:var(--muted)} .plan-tbl .p{font-size:13px;font-weight:600} .plan-tbl tr:last-child td{border-bottom:0} .plan-tbl-note{font-size:14.5px} .plan-tbl-note b{color:var(--ink)} /* titlul tabelului comparativ */ .cmp-head{margin-top:56px;text-align:center} .cmp-head h3{font-size:26px;letter-spacing:-.4px} .cmp-head p{color:var(--muted);margin:8px auto 0;max-width:560px;font-size:15.5px} .cmp-head+.cmp-wrap{margin-top:22px} .cmp th.me{font-size:16px} .cmp td.me{font-size:15px} .cmp .y.me{font-size:17px} /* bara de meniu a aplicației, jos în fiecare telefon */ .tabbar{flex:0 0 auto;display:flex;justify-content:space-around;align-items:center;padding:7px 6px 14px;background:#232120;border-top:1px solid rgba(255,255,255,.08);color:rgba(242,239,233,.55)} .tabbar .tb{display:flex;flex-direction:column;align-items:center;gap:2px;font:600 9.5px/1 -apple-system,Inter,sans-serif} .tabbar .tb em{font-style:normal} .tabbar svg{width:17px;height:17px;padding:4px 10px;box-sizing:content-box;border-radius:10px} .tabbar .tb.on{color:#f2efe9} .tabbar .tb.on svg{background:rgba(169,199,154,.18);color:#a9c79a} [data-theme="dark"] .tabbar{background:#fff;border-top-color:#ecebe7;color:#8a8680} [data-theme="dark"] .tabbar .tb.on{color:#1c1b19} [data-theme="dark"] .tabbar .tb.on svg{background:#eef2ea;color:#6f8f5f} @media (max-width:560px){ .tabbar{padding:4px 2px 9px}.tabbar svg{width:12px;height:12px;padding:3px 6px}.tabbar .tb{font-size:7px} } /* ------------------------------------------------------------ Ramă tip iPhone Pro Max: colțuri mai strânse, ramă subțire de titan, iar ecranul arată toată captura, inclusiv bara de jos ------------------------------------------------------------ */ .phone{aspect-ratio:auto !important;height:auto !important;padding:6px !important;border-radius:40px !important; background:linear-gradient(145deg,#4a4a4f,#1d1d20 35%,#2c2c30 65%,#57575c) !important; box-shadow:0 0 0 1px #0b0b0c,inset 0 0 0 1.5px rgba(255,255,255,.12),0 40px 80px -30px rgba(0,0,0,.55) !important} .phone::before,.phone::after{background:linear-gradient(90deg,#2a2a2d,#5a5a5e)} .screen{height:auto !important;border-radius:34px !important;border:2px solid #050505} .screen img{flex:none !important;height:auto !important;object-fit:initial !important} .sbar{height:30px;flex-basis:30px} .sbar .island{top:7px;height:18px;width:28%} @media (max-width:560px){ .phone{padding:4px !important;border-radius:26px !important}.screen{border-radius:22px !important} } .phones{height:640px} .ph-center{width:250px !important} .ph-left,.ph-right{width:222px !important} @media (max-width:1040px){ .phones{height:560px} .ph-center{width:220px !important} .ph-left,.ph-right{width:192px !important} } @media (max-width:560px){ .phones{height:440px} .ph-center{width:172px !important} .ph-left,.ph-right{width:150px !important} } /* funcțiile aplicației: toate pe un rând pe ecranele late */ .feat-6{grid-template-columns:repeat(6,1fr) !important;gap:14px !important} .feat-6>.card{padding:20px 18px} .feat-6 h4{font-size:15.5px;line-height:1.3} .feat-6 .desc{font-size:13.5px;line-height:1.5} @media (max-width:1240px){ .feat-6{grid-template-columns:repeat(3,1fr) !important} } @media (max-width:700px){ .feat-6{grid-template-columns:1fr !important} }