.public-page, .public-footer { --pub-bg: #0b1220; --pub-surface: #0f172a; --pub-surface-2: #131f36; --pub-border: rgba(148, 163, 184, 0.16); --pub-border-strong: rgba(148, 163, 184, 0.28); --pub-text: #dbe4f2; --pub-heading: #f8fafc; --pub-muted: #93a3bd; /* Legate de tokenii din proto.css ca sa existe o singura sursa de adevar pentru albastrul de brand. Fallback-urile acopera paginile care nu incarca proto.css. */ --pub-primary: var(--pro-primary, #0086bf); --pub-primary-2: var(--pro-primary-2, #45c6f5); --pub-primary-soft: var(--pro-primary-soft, rgba(0, 134, 191, 0.18)); --pub-accent: #38bdf8; --pub-success: #34d399; --pub-shadow: 0 1.25rem 2.6rem rgba(2, 8, 23, 0.32); background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.12), transparent 34%), radial-gradient(circle at 100% 6%, rgba(0, 134, 191, 0.20), transparent 32%), var(--pub-bg); color: var(--pub-text); } [data-bs-theme="light"] .public-page, [data-bs-theme="light"] .public-footer { --pub-bg: #f4f6fb; --pub-surface: #ffffff; --pub-surface-2: #f8fafd; --pub-border: #e5e9f2; --pub-border-strong: #d3dae8; --pub-text: #38445c; --pub-heading: #0f172a; /* Era #64748b: 4.40:1 pe fundalul paginii, adica SUB pragul WCAG AA de 4.5 pentru text normal. Toate paragrafele paginii folosesc culoarea asta, deci nu era un caz izolat. #5c6880 urca la 5.18:1 pe fundal si 5.6:1 pe card, fara sa schimbe caracterul gri-albastru al paletei. */ --pub-muted: #5c6880; --pub-primary-soft: var(--pro-primary-soft, rgba(0, 134, 191, 0.10)); --pub-accent: #0ea5e9; --pub-success: #16a34a; --pub-shadow: 0 1.1rem 2.4rem rgba(15, 23, 42, 0.08); background: radial-gradient(circle at 0% 0%, rgba(0, 134, 191, 0.07), transparent 34%), radial-gradient(circle at 100% 6%, rgba(56, 189, 248, 0.07), transparent 32%), var(--pub-bg); } .public-page h1, .public-page h2, .public-page h3, .public-page h4, .public-page h5, .public-page h6 { color: var(--pub-heading); letter-spacing: 0; } .public-page p { color: var(--pub-muted); } /* Textul curent, aliniat pe ambele margini. Doar de la 768px in sus: pe o coloana ingusta, `justify` intinde spatiile dintre cuvinte si lasa „rauri" albe verticale prin paragraf. `hyphens: auto` are efect pentru ca e declarat, deci browserul stie regulile de despartire in silabe. */ @media (min-width: 768px) { .public-page .public-lead, .public-page .public-section-head p, .public-page .public-split p, .public-page .public-card p, .public-page .public-faq p { text-align: justify; text-justify: inter-word; hyphens: auto; } } /* Intarzierile de animatie, ca utilitare. Erau scrise `style="--pub-delay:.12s"` pe fiecare element: zeci de atribute `style` inline pe pagina cea mai auditata a site-ului. */ .pub-d1 { --pub-delay: .08s; } .pub-d2 { --pub-delay: .16s; } .pub-d3 { --pub-delay: .24s; } .pub-d4 { --pub-delay: .32s; } .pub-d5 { --pub-delay: .4s; } .pub-d6 { --pub-delay: .5s; } .public-shell { padding: clamp(1rem, 2vw, 1.5rem) 0 0; } .public-container { max-width: 1180px; } .public-hero { min-height: clamp(560px, 78vh, 760px); display: grid; align-items: center; padding: clamp(2rem, 6vw, 5rem) 0; } .public-kicker { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 1rem; padding: 0.4rem 0.78rem; border-radius: 999px; background: var(--pub-primary-soft); border: 1px solid var(--pub-border-strong); color: var(--pub-accent); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .public-title { max-width: 760px; margin-bottom: 1rem; font-size: clamp(2.35rem, 6vw, 5rem); font-weight: 800; line-height: 0.96; } .public-title-sm { max-width: 760px; font-size: clamp(2.1rem, 4vw, 3.7rem); line-height: 1; } .public-lead { max-width: 650px; font-size: clamp(1rem, 1.5vw, 1.2rem); } .public-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; } .public-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 46px; padding: 0.72rem 1.05rem; border-radius: 12px; font-weight: 800; border: 1px solid transparent; } .public-btn-primary { background: var(--pro-grad-btn, linear-gradient(135deg, #0090cc, #0086bf)); color: #fff; box-shadow: 0 0.8rem 1.7rem rgba(0, 134, 191, 0.24); } .public-btn-primary:hover, .public-btn-primary:focus { color: #fff; background: var(--pro-grad-btn-hover, linear-gradient(135deg, #0086bf, #0076a8)); } .public-btn-soft { background: var(--pub-surface); border-color: var(--pub-border); color: var(--pub-heading); } .public-btn-soft:hover, .public-btn-soft:focus { border-color: var(--pub-border-strong); color: var(--pub-primary-2); } .public-visual { position: relative; flex-direction: column; gap: 1rem; min-height: 420px; padding: 1.1rem; border: 1px solid var(--pub-border); border-radius: 8px; background: linear-gradient(160deg, rgba(0, 134, 191, 0.20), transparent 48%), var(--pub-surface); box-shadow: none; overflow: hidden; } .public-visual img { width: min(86%, 480px); max-height: 330px; object-fit: contain; margin: auto; } .public-visual-panel { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; } .public-mini-stat { min-width: 0; padding: 0.8rem; border: 1px solid var(--pub-border); border-radius: 8px; background: color-mix(in srgb, var(--pub-surface) 88%, transparent); backdrop-filter: blur(10px); } .public-mini-stat strong { display: block; color: var(--pub-heading); font-size: 1.05rem; } .public-mini-stat span { display: block; color: var(--pub-muted); font-size: 0.78rem; } .public-band { padding: clamp(2rem, 4vw, 3.25rem) 0; border-top: 1px solid var(--pub-border); } .public-band-compact { padding: clamp(1.2rem, 2.5vw, 2rem) 0; } .public-section-head { max-width: 760px; margin-bottom: 1.6rem; } .public-section-head h2 { margin-bottom: 0.65rem; font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 800; } .public-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .public-card { height: 100%; padding: 1.25rem; border: 1px solid var(--pub-border); border-radius: 8px; background: color-mix(in srgb, var(--pub-surface) 76%, transparent); box-shadow: none; } .public-card-quiet { box-shadow: none; background: color-mix(in srgb, var(--pub-surface) 88%, transparent); } .public-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 10px; background: var(--pub-primary-soft); color: var(--pub-accent); font-size: 1.1rem; } .public-card h3, .public-card h4 { margin-bottom: 0.55rem; font-size: 1.08rem; font-weight: 800; } .public-card p, .public-card li { color: var(--pub-muted); } .public-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .public-list li { display: flex; gap: 0.65rem; align-items: flex-start; } .public-list i { margin-top: 0.16rem; color: var(--pub-success); } .public-split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; } .public-phone { max-width: 360px; margin: 0 auto; padding: 0.9rem; border: 1px solid var(--pub-border); border-radius: 28px; background: #020617; box-shadow: var(--pub-shadow); } .public-phone-screen { padding: 1.2rem; border-radius: 22px; background: linear-gradient(180deg, #0f172a, #172033); } [data-bs-theme="light"] .public-phone-screen { background: linear-gradient(180deg, #ffffff, #eef3fb); } .public-store-badges { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.2rem; } .public-store-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; padding: 0.25rem; border-radius: 8px; border: 1px solid var(--pub-border); background: var(--pub-surface); } .public-store-badge img { width: 142px; height: 44px; display: block; } .public-cta { padding: clamp(1.5rem, 4vw, 2.6rem); border: 1px solid var(--pub-border); border-radius: 8px; background: linear-gradient(135deg, rgba(0, 134, 191, 0.20), transparent 42%), color-mix(in srgb, var(--pub-surface) 78%, transparent); } .public-form-page { min-height: 100%; } .public-form-shell { padding: clamp(1.2rem, 5vw, 4.5rem) 0 clamp(1.5rem, 5vw, 4rem); } .public-form-layout { display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; max-width: 1120px; margin: 0 auto; } .public-form-intro, .public-form-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .public-form-intro { position: sticky; top: 96px; padding: 0; } .public-form-card { padding: 0; } .public-form-visual { min-height: 0; display: block; margin-top: 1.8rem; border: 0; border-radius: 0; background: transparent; } .public-form-visual img { width: min(76%, 300px); max-height: 250px; object-fit: contain; } .public-form-list { display: grid; gap: 0.8rem; margin: 1.4rem 0 0; padding: 0; list-style: none; } .public-form-list li { display: flex; gap: 0.65rem; color: var(--pub-muted); line-height: 1.55; } .public-form-list i { margin-top: 0.15rem; color: var(--pub-success); } .public-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; } .public-form-field { min-width: 0; } .public-form-field--full { grid-column: 1 / -1; } .public-form-field label { margin-bottom: 0.45rem; color: var(--pub-heading); font-weight: 800; } .public-form-card .form-control, .public-form-card .form-select { width: 100%; min-height: 46px; border-radius: 8px; border: 1px solid var(--pub-border); background: color-mix(in srgb, var(--pub-surface) 78%, transparent); color: var(--pub-heading); } .public-form-card input[type="file"].form-control { padding-top: 0.62rem; } .public-form-card textarea.form-control { min-height: 128px; } .public-form-card .form-control::placeholder { color: color-mix(in srgb, var(--pub-muted) 72%, transparent); } .public-form-card .form-control:focus, .public-form-card .form-select:focus { border-color: var(--pub-primary-2); box-shadow: 0 0 0 0.2rem rgba(0, 134, 191, 0.20); background: color-mix(in srgb, var(--pub-surface) 92%, transparent); color: var(--pub-heading); } .public-form-card .form-text, .public-form-muted { color: var(--pub-muted); } .public-form-note { padding: 0.9rem 1rem; border: 1px solid var(--pub-border); border-radius: 8px; background: color-mix(in srgb, var(--pub-surface) 58%, transparent); color: var(--pub-muted); } .public-form-note a { color: var(--pub-primary-2); font-weight: 800; } .public-form-submit { min-height: 48px; border-radius: 8px; border: 1px solid rgba(69, 198, 245, 0.52); background: var(--pro-grad-btn, linear-gradient(135deg, #0090cc, #0086bf)); color: #fff; font-weight: 800; box-shadow: 0 0.8rem 1.7rem rgba(0, 134, 191, 0.24); } .public-form-submit:hover, .public-form-submit:focus { color: #fff; background: var(--pro-grad-btn-hover, linear-gradient(135deg, #0086bf, #0076a8)); } .public-form-submit:disabled { opacity: 0.62; cursor: not-allowed; } .public-required { color: #f87171; } .public-honeypot { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .public-captcha { display: grid; gap: 0.7rem; } .public-captcha-row { display: flex; gap: 0.6rem; align-items: center; } .public-captcha-frame { width: 225px; height: 69px; max-width: 100%; overflow: hidden; border: 1px solid var(--pub-border); border-radius: 8px; background: color-mix(in srgb, var(--pub-surface) 78%, transparent); } .public-captcha-frame img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.12); transform-origin: center; } .public-captcha-refresh { flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; } .public-alert { border-radius: 8px; } .public-footer { position: relative; display: block; flex: 0 0 auto; min-height: 0; height: auto; padding: 0.7rem 0; margin: 0; border-top: 1px solid var(--pub-border); background: var(--pub-surface); color: var(--pub-text); overflow: hidden; } .public-footer-main { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; } .public-footer-brand { display: inline-flex; align-items: center; flex: none; } .public-footer-logo { height: 28px; width: auto; } .public-footer-meta { color: var(--pub-muted); font-size: 0.88rem; } .public-footer-nav, .public-footer-social { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.8rem; } .public-footer-nav { justify-content: flex-end; } .public-footer-nav a, .public-footer-social a { color: var(--pub-muted); font-weight: 700; font-size: 0.9rem; } .public-footer-social a { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--pub-border); border-radius: 8px; background: var(--pub-surface-2); font-size: 0.9rem; } .public-footer-nav a:hover, .public-footer-nav a:focus, .public-footer-social a:hover, .public-footer-social a:focus { color: var(--pub-primary-2); } /* Linkul de Admin: vizibil doar administratorilor (vezi footer_v2.html). Accent discret, ca sa se distinga de navigatia publica fara sa o domine. */ .public-footer-nav a.public-footer-admin { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border: 1px solid var(--pub-border); border-radius: 999px; background: var(--pub-surface-2); color: var(--pub-primary-2); } .public-footer-nav a.public-footer-admin:hover, .public-footer-nav a.public-footer-admin:focus { border-color: var(--pub-primary-2); } /* Animatii pagini publice (Despre): elementele .pub-reveal devin vizibile la scroll printr-un IntersectionObserver care adauga .pub-in. Starea ascunsa se aplica doar sub .pub-anim (clasa pusa de JS), deci fara JS continutul ramane complet vizibil. --pub-delay permite intarzieri in cascada din markup. */ .pub-anim .pub-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease var(--pub-delay, 0s), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--pub-delay, 0s); will-change: opacity, transform; } .pub-anim .pub-reveal-left { transform: translateX(-28px); } .pub-anim .pub-reveal-right { transform: translateX(28px); } .pub-anim .pub-reveal-scale { transform: scale(0.94); } .pub-anim .pub-reveal.pub-in { opacity: 1; transform: none; } .pub-hover-lift { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .pub-hover-lift:hover { transform: translateY(-5px); border-color: var(--pub-border-strong); box-shadow: var(--pub-shadow); } .pub-float { animation: pubFloat 6s ease-in-out infinite; } @keyframes pubFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .public-steps { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; counter-reset: none; } .public-steps li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--pub-muted); } .public-step-no { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--pub-primary-soft); border: 1px solid var(--pub-border-strong); color: var(--pub-accent); font-size: 0.82rem; font-weight: 800; } @media (prefers-reduced-motion: reduce) { .pub-anim .pub-reveal { opacity: 1; transform: none; transition: none; } .pub-float { animation: none; } .pub-hover-lift, .pub-hover-lift:hover { transition: none; transform: none; } } @media (max-width: 991.98px) { .public-hero { min-height: auto; padding-top: 2.4rem; } .public-grid, .public-split { grid-template-columns: 1fr; } .public-visual { min-height: 360px; } .public-form-layout { grid-template-columns: 1fr; gap: 1.8rem; } .public-form-intro { position: static; } .public-form-visual { max-width: 240px; } .public-footer-main, .public-footer-bottom { align-items: flex-start; flex-direction: column; } .public-footer-nav { justify-content: flex-start; } } @media (max-width: 575.98px) { .public-actions, .public-store-badges { flex-direction: column; } .public-btn, .public-store-badge { width: 100%; } .public-visual-panel { grid-template-columns: 1fr; } .public-form-grid { grid-template-columns: 1fr; gap: 0.9rem; } .public-captcha-row { flex-direction: column; align-items: stretch; } .public-captcha-frame { width: 100%; } .public-captcha-refresh { width: 100%; } .public-form-shell { padding-top: 0.8rem; } .public-form-card, .public-form-intro { padding: 0; } .public-form-visual { display: none; } .public-form-list { margin-top: 1rem; } .public-title-sm { font-size: clamp(1.85rem, 12vw, 2.35rem); } } /* --------------------------------------------------------------------------- Intrebari frecvente pe landing. `
` in loc de acordeon pe JavaScript: continutul e in DOM si vizibil crawlerelor chiar cand raspunsul e inchis, iar tastatura si cititoarele de ecran il stiu deja, fara ARIA scris de mana. --------------------------------------------------------------------------- */ .public-faq { display: grid; gap: 0.75rem; max-width: 860px; margin: 0 auto; } .public-faq details { border: 1px solid var(--pub-border); border-radius: 16px; background: var(--pub-surface); overflow: hidden; } .public-faq details[open] { border-color: var(--pub-border-strong); } .public-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; color: var(--pub-heading); font-weight: 700; cursor: pointer; list-style: none; } .public-faq summary::-webkit-details-marker { display: none; } .public-faq summary::after { content: "\F282"; font-family: "bootstrap-icons"; flex: none; color: var(--pub-accent); font-size: 0.9rem; transition: transform 0.18s ease; } .public-faq details[open] summary::after { transform: rotate(180deg); } .public-faq summary:focus-visible { outline: 2px solid var(--pub-primary-2); outline-offset: -2px; } .public-faq p { margin: 0; padding: 0 1.25rem 1.15rem; }