/* ═══════════════════════════════════════════════════════════════════════════════════════════════ CONCIERGE HORECA — pagină de prezentare, o singură bucată. TEMA: clară, alb + albastru. Cerneală bleumarin, un albastru de acțiune, un verde de accent. Secțiunile alternează alb / albastru foarte deschis; informația stă în carduri albe cu chenar subțire și iconul PE ACEEAȘI LINIE cu titlul cardului. PARALAXA se face EXCLUSIV cu `transform: translate3d(...)`, pe elemente marcate `data-par`, și numai pe ecrane late, cu mișcarea oprită la `prefers-reduced-motion`. Pe telefon, paralaxa pe imagini mari e o sursă sigură de sacadare (și, pe iOS, de tremurat la bara de adresă care se strânge), deci acolo pagina rămâne pur și simplu așezată — nu „stricată", ci fără efect. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ :root { --f-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --paper: #ffffff; --paper-2: #f2f6fb; --surface: #ffffff; --ink: #16294a; --ink-2: #53637d; --ink-3: #5d6d86; --line: #e2e8f2; --line-2: #cfd9e8; --accent: #1f6fb2; --accent-soft: #eaf2fa; --accent-line: #bcd5ec; --verde: #2fa382; --verde-inchis: #197057; --verde-soft: #e6f5ef; --r-lg: 18px; --r: 12px; --r-sm: 8px; --r-pill: 999px; --shadow: 0 1px 2px rgba(22,41,74,.04), 0 10px 26px -18px rgba(22,41,74,.28); --shadow-lift: 0 2px 4px rgba(22,41,74,.06), 0 22px 44px -22px rgba(22,41,74,.38); --wrap: 1180px; --gutter: clamp(18px, 4vw, 40px); --sect: clamp(58px, 7.5vw, 106px); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 86px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--f-sans); font-size: 16.5px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* plasă: nicio secțiune n-are voie să lățească pagina pe telefon */ } img, svg { max-width: 100%; display: block; } a { color: inherit; } ::selection { background: var(--accent); color: #fff; } :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); position: relative; } .wrap-ingust { max-width: 900px; } .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); } .skip:focus { left: 12px; } /* ── TIPOGRAFIE ──────────────────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } .h-display { font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.08; letter-spacing: -.03em; } .h-1 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); letter-spacing: -.025em; } p { margin: 14px 0 0; } .lede { font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.66; color: var(--ink-2); max-width: 60ch; margin-top: 20px; } .note { font-size: 13.8px; line-height: 1.55; color: var(--ink-3); } .center { text-align: center; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; display: block; } .titlu-sect { text-align: center; font-size: clamp(1.1rem, 2.1vw, 1.48rem); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } .titlu-sect + .sub-sect { text-align: center; max-width: 64ch; margin: 16px auto 0; color: var(--ink-2); font-size: 16.4px; } .sect-head { margin-bottom: clamp(32px, 4vw, 56px); } /* ── SECȚIUNI ────────────────────────────────────────────────────────────────────────────────── */ section { position: relative; } .sect { padding-block: var(--sect); } .sect-alt { background: var(--paper-2); border-block: 1px solid var(--line); } /* Punctele decorative — semnătura vizuală. Sub conținut, fără clicuri, ascunse pe ecran îngust. */ .puncte { position: absolute; z-index: 0; pointer-events: none; width: 170px; height: 104px; opacity: .5; background-image: radial-gradient(var(--accent) 1.6px, transparent 1.7px); background-size: 15px 15px; -webkit-mask-image: linear-gradient(115deg, #000, transparent 78%); mask-image: linear-gradient(115deg, #000, transparent 78%); } .puncte.verde { background-image: radial-gradient(var(--verde) 1.6px, transparent 1.7px); } .puncte.sus-dreapta { top: 30px; right: 6px; } .puncte.jos-stanga { bottom: 30px; left: 6px; } @media (max-width: 860px) { .puncte { display: none; } } /* ── BUTOANE ─────────────────────────────────────────────────────────────────────────────────── */ .btn { --btn-bg: var(--accent); --btn-ink: #fff; --btn-line: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 13px 24px; background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-line); border-radius: var(--r-sm); font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); } .btn:active { transform: translateY(0); } .btn i { font-size: 16px; } .btn-2 { --btn-bg: #fff; --btn-ink: var(--ink); --btn-line: var(--line-2); } .btn-2:hover { --btn-line: var(--accent); --btn-ink: var(--accent); } .btn-lg { min-height: 54px; padding: 16px 28px; font-size: 14px; } .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } @media (max-width: 420px) { .btns .btn { width: 100%; } } /* ── ANTET ───────────────────────────────────────────────────────────────────────────────────── */ .head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } .head.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 20px -18px rgba(22,41,74,.6); } .head .wrap { display: flex; align-items: center; gap: 18px; height: 70px; } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; } .brand svg { width: 32px; height: 32px; flex: none; } .brand .nume { font-weight: 800; font-size: 17px; color: var(--ink); text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; } .brand .nume small { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; color: var(--ink-3); white-space: nowrap; } .nav { display: flex; gap: 20px; } /* `nowrap`: un link de cuprins nu are voie să se rupă în două rânduri. Dacă spațiul chiar lipsește, vrem să se vadă că lipsește (și să intervină pragul de mai jos), nu un antet care se îngroașă. */ .nav a { font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color .16s ease; } .nav a:hover, .nav a.activ { color: var(--accent); } .burger { display: none; width: 46px; height: 42px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; color: var(--ink); font-size: 20px; align-items: center; justify-content: center; } @media (max-width: 1060px) { .nav { display: none; } .head > .wrap > .btn { display: none; } .burger { display: inline-flex; } } .meniu { position: fixed; inset: 70px 0 auto; z-index: 49; background: #fff; border-bottom: 1px solid var(--line); padding: 10px var(--gutter) 26px; display: none; flex-direction: column; max-height: calc(100dvh - 70px); overflow-y: auto; } .meniu[data-deschis="1"] { display: flex; } .meniu a { padding: 15px 2px; text-decoration: none; font-size: 16.5px; color: var(--ink); border-bottom: 1px solid var(--line); } .meniu .btn { margin-top: 20px; } /* ── HERO ────────────────────────────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); } .hero-fundal { position: absolute; inset: -9% 0; z-index: 0; will-change: transform; } .hero-fundal img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; } /* VĂLUL e ce face titlul lizibil peste fotografie. Pe ecran lat vine dinspre stânga (acolo e textul, acolo are poza spațiu gol); pe telefon, unde textul stă peste toată imaginea, devine aproape opac. */ .hero-val { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 38%, rgba(255,255,255,.58) 62%, rgba(242,246,251,.3) 100%), linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%); } /* Pe telefon textul stă peste TOATĂ fotografia, deci vălul se îngroașă — dar nu până la alb: sub blocul de text (butoane și mai jos) se subțiază, ca poza să rămână vizibilă. Altfel hero-ul de pe telefon, adică ecranul pe care îl vede majoritatea, ar fi o casetă albă cu text. */ @media (max-width: 940px) { .hero-val { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.92) 52%, rgba(255,255,255,.74) 82%, rgba(242,246,251,.6) 100%); } .hero-fundal img { object-position: 70% 42%; } } .hero .wrap { position: relative; z-index: 2; padding-block: clamp(52px, 9vw, 118px); } .hero-continut { max-width: 640px; } .hero h1 em { font-style: normal; color: var(--accent); } .pastile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .pastila { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 15px; font-size: 13.6px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow); } .pastila i { color: var(--accent); font-size: 15px; } /* Cardul plutitor de peste hero — dovada vizuală a produsului, nu o mascotă. Sub 1100px dispare: micșorat, ar fi devenit o casetă de text peste fotografie, adică zgomot. STĂ ÎNTREG ÎN SECȚIUNE. Ieșit dincolo de marginea de jos (efectul „card care se revarsă"), era TĂIAT drept de `overflow: hidden` — de care hero-ul nu se poate lipsi, fiindcă tot el ține fotografia în ramă când o mișcă paralaxa. ȘI DEASUPRA BULEI DE CHAT. Widgetul stă tot în dreapta-jos, iar pe o fereastră de 900px cele două ajungeau lipite — balonașul de invitație al bulei se desena chiar peste card. Nu se vede la nicio probă a paginii: bula vine din alt script, deci apare abia pe site-ul viu. */ .hero-card { position: absolute; right: max(var(--gutter), calc(50vw - var(--wrap)/2)); bottom: clamp(92px, 9vw, 122px); z-index: 3; width: 336px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: 18px; will-change: transform; } .hero-card .cap { display: flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1px solid var(--line); } .hero-card .cap i { color: var(--verde); font-size: 14px; transition: color .3s ease; } .hero-card .cap i.pe-accent { color: var(--accent); } /* CONVERSAȚIA CREȘTE DE JOS ÎN SUS, ca într-o aplicație de chat: `justify-content: flex-end` pe o înălțime FIXĂ. Fără înălțimea fixă, cardul s-ar umfla și s-ar dezumfla la fiecare replică, iar paralaxa ar avea de mutat un element care își schimbă mărimea — se vede ca o tresărire. Ce nu mai încape iese pe sus, sub o mască de estompare, exact ca într-un istoric care se derulează. */ .bule { display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding-top: 13px; height: 318px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px); mask-image: linear-gradient(180deg, transparent 0, #000 34px); } .bula { max-width: 88%; padding: 10px 13px; border-radius: 13px; font-size: 14.2px; line-height: 1.5; } .bula-om { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .bula-bot { align-self: flex-start; background: var(--paper-2); color: var(--ink); border-bottom-left-radius: 4px; } /* Intrarea unei replici. `flex: none` e obligatoriu: într-o coloană flex cu înălțime fixă, bulele s-ar comprima în loc să iasă din cadru, iar textul lung s-ar suprapune peste el însuși. */ .bula, .scrie { flex: none; animation: intra .26s ease both; } @keyframes intra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* INDICATORUL DE SCRIS: trei puncte în bula agentului. Are aceeași formă ca o replică a lui, ca așteptarea să nu mute nimic în cadru când se transformă în text. */ .scrie { align-self: flex-start; display: flex; gap: 4px; align-items: center; background: var(--paper-2); border-radius: 13px; border-bottom-left-radius: 4px; padding: 13px 14px; } .scrie span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); opacity: .45; animation: puncte 1.25s infinite ease-in-out; } .scrie span:nth-child(2) { animation-delay: .16s; } .scrie span:nth-child(3) { animation-delay: .32s; } @keyframes puncte { 0%, 60%, 100% { transform: none; opacity: .35 } 30% { transform: translateY(-4px); opacity: .9 } } /* La „mișcare redusă" simularea nu rulează deloc (vezi scriptul), deci nici animațiile de intrare n-au ce căuta — rămâne conversația scrisă în HTML, așezată. */ @media (prefers-reduced-motion: reduce) { .bula, .scrie { animation: none; } .scrie span { animation: none; } } @media (max-width: 1100px) { .hero-card { display: none; } } /* ȘI PE ECRANE JOASE. Bula de chat e ancorată de FEREASTRĂ, cardul de SECȚIUNE — deci pe o înălțime mică cele două se întâlnesc oriunde le-ai pune, iar balonașul de invitație al bulei ajunge peste card. Sub 860px de înălțime (laptopuri mici, ferestre nemaximizate) cardul dispare: e un element de atmosferă, pe când bula e un buton pe care se apasă. */ @media (max-height: 860px) { .hero-card { display: none; } } /* ── BANDA DE FAPTE ──────────────────────────────────────────────────────────────────────────── */ .fapte { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .fapte div { background: #fff; padding: 24px 18px; text-align: center; } .fapte .val { display: block; font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 800; color: var(--ink); letter-spacing: -.02em; } .fapte .et { display: block; margin-top: 5px; font-size: 13.5px; color: var(--ink-3); line-height: 1.45; } /* Pragul e 820, nu 760: la 768 (tableta în picioare, una dintre cele mai frecvente lățimi reale) patru coloane lasă 171px pentru o etichetă de două rânduri și jumătate. */ @media (max-width: 820px) { .fapte { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ── CARDURI ─────────────────────────────────────────────────────────────────────────────────── */ .grid { display: grid; gap: clamp(14px, 1.8vw, 22px); } .g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 1000px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0,1fr); } } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px; box-shadow: var(--shadow); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } @media (hover: hover) { .card:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow-lift); } } /* TITLUL DE CARD ÎȘI POARTĂ ICONUL PE ACEEAȘI LINIE. Placa colorată îi dă masă și aliniază toate cardurile pe aceeași linie optică; `flex: none` lasă titlul să treacă pe două rânduri fără s-o strivească. Iconul e decorativ — sensul e scris în titlu, deci `aria-hidden` peste tot. */ .card h3 { display: flex; align-items: center; gap: 13px; font-size: 1.02rem; line-height: 1.3; margin-bottom: 12px; } .card h3 i { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 11px; font-size: 19px; } .card h3 i.verde { background: var(--verde-soft); color: var(--verde-inchis); } .card p { color: var(--ink-2); font-size: 14.7px; line-height: 1.62; margin-top: 0; } .card .ce { margin-top: auto; padding-top: 16px; } .canal ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .canal li { position: relative; padding-left: 22px; font-size: 14.1px; color: var(--ink-2); line-height: 1.5; } .canal li::before { content: "\F26E"; font-family: bootstrap-icons; position: absolute; left: 0; top: 0; color: var(--verde); font-size: 12px; } .lista { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .lista li { position: relative; padding-left: 28px; font-size: 15.2px; line-height: 1.55; } .lista li::before { content: "\F26E"; font-family: bootstrap-icons; position: absolute; left: 0; top: 0; color: var(--verde); font-size: 14px; } .lista li b { color: var(--ink); } /* ── BANDA „TESTEAZĂ ACUM" ─────────────────────────────────────────────────────────────────────── Cele trei căi sunt CARDURI-ACȚIUNE: două legături reale (WhatsApp, telefon) și un buton care deschide widgetul din pagină. Se scriu ca `` și `