/* ============================================================ iTech Media — Redesign 2026 Design system partajat pentru Home (.page-index) + Servicii (.page-servicii) + Mega-menu (global). Totul scoped ca să nu afecteze restul site-ului. ============================================================ */ :root { --rd-blue: #2563eb; --rd-cyan: #38bdf8; --rd-green: #10b981; --rd-red: #ef4444; --rd-violet: #a855f7; --rd-amber: #f59e0b; --rd-bg: #0b1120; --rd-bg-2: #0f172a; --rd-surface: rgba(30, 41, 59, 0.45); --rd-surface-solid: #131c31; --rd-border: rgba(255, 255, 255, 0.08); --rd-border-strong: rgba(255, 255, 255, 0.14); --rd-text: #f1f5f9; --rd-dim: #a3b2c5; /* Ridicat de la #64748b (3,56:1 pe card — pica AA pe 117 elemente). #7c8aa0 trece pe toate cele trei fundaluri reale ale sistemului (pagina 5,38 · card 5,10 · footer 4,85) si pastreaza separarea de --rd-dim (1,62); slate-400 ar fi turtit-o la 1,19. Daca apare o suprafata mai deschisa decat #131c31, tokenul se recalculeaza. */ --rd-faint: #7c8aa0; --rd-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --rd-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --rd-radius: 18px; --rd-radius-lg: 26px; --rd-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65); --rd-glow-blue: 0 0 40px -8px rgba(37, 99, 235, 0.55); --rd-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Typography (scoped) ---------- */ .page-index, .page-servicii, .page-services { font-family: var(--rd-font-body); background-color: var(--rd-bg) !important; } .page-index h1, .page-index h2, .page-index h3, .page-index h4, .page-index h5, .page-servicii h1, .page-servicii h2, .page-servicii h3, .page-servicii h4, .page-servicii h5, .page-services h1, .page-services h2, .page-services h3, .page-services h4, .page-services h5 { font-family: var(--rd-font-display); letter-spacing: -0.02em; } /* Eyebrow / kicker */ .rd-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rd-font-body); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--rd-cyan); } .rd-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rd-blue), var(--rd-cyan)); } .rd-gradient-text { /* endpoints match (#fff → #fff) so the 200% background-position loop is seamless */ background: linear-gradient(120deg, #fff 0%, var(--rd-cyan) 30%, var(--rd-blue) 50%, var(--rd-cyan) 70%, #fff 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: rd-gradient-sweep 6s linear infinite; } @keyframes rd-gradient-sweep { to { background-position: 200% center; } } @media (prefers-reduced-motion: reduce) { .rd-gradient-text, .iso-title-accent, .article-title .accent, span.text-primary { animation: none; } } /* Section heading scale — compact / enterprise */ .rd-h-section { font-size: clamp(1.5rem, 2.2vw + 0.6rem, 2.1rem); font-weight: 800; color: #fff; line-height: 1.15; } /* Titlul de hero, marit cu 50% (2026-08-05). Era 20.8px la minim si 24px la maxim, adica mai mic decat un titlu de sectiune, ceea ce inversa ierarhia. Fiecare capat al clamp-ului e inmultit cu 1.5, deci cresterea e proportionala la orice latime, nu doar pe desktop. Valoarea veche: clamp(1.3rem, 1.4vw + 0.55rem, 1.5rem) */ .rd-h-hero { font-size: clamp(1.95rem, 2.1vw + 0.825rem, 2.25rem); font-weight: 800; color: #fff; line-height: 1.2; } .rd-lead { color: var(--rd-dim); font-size: 1.05rem; line-height: 1.7; } /* ---------- Buttons ---------- */ .rd-btn { --b1: var(--rd-blue); --b2: #1d4ed8; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 999px; border: 1px solid transparent; font-family: var(--rd-font-body); font-weight: 700; font-size: 0.95rem; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.3s var(--rd-ease), box-shadow 0.3s var(--rd-ease), background 0.3s; } .rd-btn-primary { background: linear-gradient(135deg, var(--b1), var(--b2)); color: #fff; box-shadow: 0 10px 30px -8px rgba(37, 99, 235, 0.6); } .rd-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 44px -10px rgba(37, 99, 235, 0.8); } .rd-btn-ghost { background: rgba(255, 255, 255, 0.04); color: #fff; border-color: var(--rd-border-strong); backdrop-filter: blur(8px); } .rd-btn-ghost:hover { color: #fff; transform: translateY(-3px); border-color: var(--rd-cyan); background: rgba(56, 189, 248, 0.08); } .rd-btn .arrow { transition: transform 0.3s var(--rd-ease); } .rd-btn:hover .arrow { transform: translateX(4px); } /* hero CTAs: compact so all 3 fit on one row on desktop */ .rd-hero .rd-btn { padding: 10px 18px; font-size: 0.85rem; } /* ============================================================ MEGA-MENU (global, în navbar) ============================================================ */ .mega-nav-item .dropdown-toggle::after { transition: transform 0.25s ease; } .mega-nav-item.show .dropdown-toggle::after { transform: rotate(180deg); } .mega-menu { width: min(1080px, calc(100vw - 30px)); left: 50% !important; transform: translateX(-50%) translateY(12px) !important; background: rgba(13, 19, 33, 0.97); backdrop-filter: blur(22px); border: 1px solid var(--rd-border) !important; border-radius: 20px; box-shadow: var(--rd-shadow); margin-top: 10px; opacity: 0; transition: opacity 0.25s ease, transform 0.25s var(--rd-ease); pointer-events: none; } .mega-menu.show { opacity: 1; transform: translateX(-50%) translateY(0) !important; pointer-events: auto; } .mega-menu-inner { padding: 26px 30px 18px; } .mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .mega-col-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rd-cyan); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rd-border); } .mega-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--rd-dim); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.18s ease; border: 1px solid transparent; } .mega-link i { width: 18px; text-align: center; color: var(--rd-faint); transition: color 0.18s; font-size: 0.85rem; } .mega-link:hover { background: rgba(37, 99, 235, 0.12); color: #fff; border-color: rgba(56, 189, 248, 0.25); transform: translateX(3px); } .mega-link:hover i { color: var(--rd-cyan); } .mega-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rd-border); color: var(--rd-dim); font-size: 0.85rem; } .mega-cta { color: var(--rd-cyan); font-weight: 700; text-decoration: none; transition: 0.2s; } .mega-cta:hover { color: #fff; } @media (max-width: 991px) { .mega-menu { width: 100%; transform: none !important; left: 0 !important; box-shadow: none; background: transparent; border: none !important; } .mega-menu-inner { padding: 10px 0; } .mega-grid { grid-template-columns: 1fr; gap: 14px; } .mega-footer { display: none; } } /* ============================================================ SHARED CARD — unified spotlight card ============================================================ */ .rd-card { position: relative; background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); padding: 28px; backdrop-filter: blur(14px); transition: transform 0.35s var(--rd-ease), border-color 0.35s, box-shadow 0.35s; overflow: hidden; } .rd-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(56, 189, 248, 0.13), transparent 45%); opacity: 0; transition: opacity 0.4s; } .rd-card:hover { transform: translateY(-6px); border-color: rgba(56, 189, 248, 0.4); box-shadow: var(--rd-shadow); } .rd-card:hover::before { opacity: 1; } .rd-card > * { position: relative; z-index: 1; } /* ============================================================ PAGE: HOME (.page-index) ============================================================ */ .page-index .rd-section { padding: 70px 0; } /* Banda de încredere (.rd-statband) e într-un .rd-section și pe servicii/services, unde regula de mai sus (scopată la .page-index) nu se aplică → se lipea de secțiunea de deasupra. Adăugăm spațiu sus. */ .page-servicii .rd-section, .page-services .rd-section { padding-top: 50px; } /* Hero */ .rd-hero { position: relative; padding: 57px 0 64px; overflow: hidden; } .rd-hero::after { content: ""; position: absolute; top: -10%; right: -5%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(37, 99, 235, 0.22), transparent 62%); filter: blur(20px); z-index: 0; pointer-events: none; } .rd-hero::before { content: ""; position: absolute; bottom: -20%; left: -10%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(56, 189, 248, 0.14), transparent 65%); filter: blur(20px); z-index: 0; pointer-events: none; } .rd-hero .container { position: relative; z-index: 2; } .rd-hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.35); border-radius: 999px; color: var(--rd-green); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; } .rd-hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-green); box-shadow: 0 0 10px var(--rd-green); } @media (prefers-reduced-motion: no-preference) { .rd-hero-badge .dot { animation: rdBlink 2s infinite; } } @keyframes rdBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } .rd-hero-stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 36px; } .rd-hero-stat .n { font-family: var(--rd-font-display); font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; } .rd-hero-stat .l { font-size: 0.78rem; color: var(--rd-dim); margin-top: 5px; } /* Enterprise trust chips (hero) */ .rd-trust-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .rd-trust-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 11px; background: rgba(255,255,255,0.03); border: 1px solid var(--rd-border); font-size: 0.82rem; font-weight: 600; color: #cbd5e1; transition: 0.25s; } .rd-trust-chip:hover { border-color: rgba(56,189,248,0.4); color: #fff; } .rd-trust-chip i { color: var(--rd-cyan); } .rd-trust-chip i.fa-shield-halved { color: var(--rd-green); } /* Enterprise stat band (dark) */ .rd-statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .rd-statband .s { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 20px; border-radius: 18px; background: linear-gradient(160deg, rgba(30,41,59,0.55), rgba(15,23,42,0.4)); border: 1px solid var(--rd-border); overflow: hidden; transition: 0.3s; } .rd-statband .s::before { /* hairline glow along the top edge */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(56,189,248,0.55), transparent); } .rd-statband .s::after { /* soft corner light */ content: ""; position: absolute; top: -34px; right: -34px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,0.13), transparent 70%); pointer-events: none; } .rd-statband .s:hover { border-color: rgba(56,189,248,0.4); transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(37,99,235,0.5); } .rd-statband .s i { grid-row: 1 / span 2; align-self: center; width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--rd-cyan); background: linear-gradient(160deg, rgba(56,189,248,0.14), rgba(37,99,235,0.1)); border: 1px solid rgba(56,189,248,0.25); } .rd-statband .s .n { font-family: var(--rd-font-display); font-weight: 800; font-size: 1.55rem; line-height: 1.1; white-space: nowrap; background: linear-gradient(120deg, #fff 35%, var(--rd-cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .rd-statband .s .l { font-size: 0.8rem; color: var(--rd-dim); margin-top: 3px; line-height: 1.35; } @media (max-width: 1199px) { .rd-statband { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .rd-statband { grid-template-columns: 1fr; } } /* Hero visual — live monitoring panel (glassmorphic) */ .rd-hero-viz { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; } .rd-hv-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,0.25), transparent 65%); filter: blur(10px); } .rd-hv-card { position: relative; background: rgba(20, 28, 46, 0.72); border: 1px solid var(--rd-border-strong); border-radius: 18px; backdrop-filter: blur(16px); box-shadow: var(--rd-shadow); } .rd-hv-main { width: 300px; padding: 22px; z-index: 2; } .rd-hv-head { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 700; color: #fff; } .rd-hv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rd-green); box-shadow: 0 0 10px var(--rd-green); } @media (prefers-reduced-motion: no-preference) { .rd-hv-dot { animation: rdBlink 2s infinite; } } .rd-hv-sub { font-size: 0.74rem; color: var(--rd-faint); margin-top: 2px; margin-bottom: 16px; } .rd-hv-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-bottom: 18px; } .rd-hv-bars span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--rd-cyan), rgba(37,99,235,0.4)); opacity: 0.85; } @media (prefers-reduced-motion: no-preference) { .rd-hv-bars span { animation: rdBar 2.4s ease-in-out infinite; } } @keyframes rdBar { 0%,100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } transform-origin: bottom; } .rd-hv-bars span:nth-child(1){animation-delay:0s} .rd-hv-bars span:nth-child(2){animation-delay:.2s} .rd-hv-bars span:nth-child(3){animation-delay:.4s} .rd-hv-bars span:nth-child(4){animation-delay:.6s} .rd-hv-bars span:nth-child(5){animation-delay:.8s} .rd-hv-bars span:nth-child(6){animation-delay:1s} .rd-hv-bars span:nth-child(7){animation-delay:1.2s} .rd-hv-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 0.84rem; color: var(--rd-dim); border-top: 1px solid var(--rd-border); } .rd-hv-row i { color: var(--rd-green); width: 16px; } .rd-hv-row b { color: #fff; margin-left: auto; font-weight: 600; } .rd-hv-float { position: absolute; padding: 12px 16px; font-size: 0.8rem; color: var(--rd-dim); display: flex; align-items: center; gap: 9px; z-index: 3; } .rd-hv-float b { color: #fff; } .rd-hv-float-1 { top: 14px; right: 0; } .rd-hv-float-2 { bottom: 18px; left: 0; } @media (prefers-reduced-motion: no-preference) { .rd-hv-main { animation: rdFloat 6s ease-in-out infinite; } .rd-hv-float-1 { animation: rdFloat 6s ease-in-out infinite 1s; } .rd-hv-float-2 { animation: rdFloat 6s ease-in-out infinite 2s; } } @keyframes rdFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* Hero search */ .rd-search { position: relative; max-width: 640px; margin-top: 34px; } .rd-search-box { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px; background: rgba(15, 23, 42, 0.85); border: 1px solid var(--rd-border-strong); border-radius: 999px; box-shadow: var(--rd-shadow); transition: border-color 0.3s, box-shadow 0.3s; } .rd-search-box:focus-within { border-color: var(--rd-cyan); box-shadow: var(--rd-glow-blue); } .rd-search-box i.lead-ic { color: var(--rd-cyan); font-size: 1rem; } .rd-search-box input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-family: var(--rd-font-body); font-size: 1rem; padding: 12px 0; /* Fără asta, rândul iese din ecran sub 390px. Un are lățime intrinsecă implicită (~20 caractere), iar în flex `min-width: auto` o transformă în prag de nemicșorat. `flex: 1` nu ajută: baza e 0, dar min-width-ul îl ține lat. Împreună cu butonul care are `flex-shrink: 0`, rândul depășea viewportul cu 45px la 320px. */ min-width: 0; } .rd-search-box input::placeholder { color: var(--rd-faint); } .rd-search-go { flex-shrink: 0; padding: 12px 22px; border-radius: 999px; border: none; background: linear-gradient(135deg, var(--rd-blue), #1d4ed8); color: #fff; font-weight: 700; cursor: pointer; transition: 0.3s; } .rd-search-go:hover { box-shadow: var(--rd-glow-blue); } .rd-search-results { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 60; background: rgba(13, 19, 33, 0.98); backdrop-filter: blur(20px); border: 1px solid var(--rd-border); border-radius: 18px; box-shadow: var(--rd-shadow); max-height: 360px; overflow-y: auto; padding: 8px; display: none; } .rd-search-results.open { display: block; } .rd-sr-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; color: var(--rd-dim); text-decoration: none; transition: 0.18s; } .rd-sr-item:hover, .rd-sr-item.active { background: rgba(37, 99, 235, 0.14); color: #fff; } .rd-sr-item i { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: rgba(56, 189, 248, 0.1); color: var(--rd-cyan); } .rd-sr-item .t { font-weight: 600; color: #fff; font-size: 0.92rem; } .rd-sr-item .d { font-size: 0.78rem; color: var(--rd-faint); } .rd-sr-empty { padding: 22px; text-align: center; color: var(--rd-faint); font-size: 0.9rem; } .rd-search-hint { margin-top: 12px; font-size: 0.8rem; color: var(--rd-faint); } .rd-search-hint b { color: var(--rd-dim); font-weight: 600; } /* Service Finder — by problem */ .rd-finder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .rd-finder-card { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; text-decoration: none; background: linear-gradient(160deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.4)); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); transition: transform 0.35s var(--rd-ease), border-color 0.35s, box-shadow 0.35s; position: relative; overflow: hidden; } .rd-finder-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent, var(--rd-blue)), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--rd-ease); } .rd-finder-card:hover { transform: translateY(-6px); border-color: rgba(56, 189, 248, 0.35); box-shadow: var(--rd-shadow); } .rd-finder-card:hover::after { transform: scaleX(1); } .rd-finder-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, var(--accent, var(--rd-blue)), rgba(15, 23, 42, 0.4)); box-shadow: 0 8px 24px -8px var(--accent, var(--rd-blue)); } .rd-finder-q { font-family: var(--rd-font-display); font-weight: 700; font-size: 1.05rem; color: #fff; line-height: 1.3; } .rd-finder-a { font-size: 0.84rem; color: var(--rd-dim); line-height: 1.6; flex-grow: 1; } .rd-finder-link { font-size: 0.82rem; font-weight: 700; color: var(--rd-cyan); display: inline-flex; align-items: center; gap: 6px; } .rd-finder-card:hover .rd-finder-link i { transform: translateX(4px); } .rd-finder-link i { transition: transform 0.3s var(--rd-ease); } /* Category bento */ .rd-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; } .rd-bento-cat { grid-column: span 6; } .rd-cat-card { height: 100%; } .rd-cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .rd-cat-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; color: var(--rd-cyan); background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2); } .rd-cat-name { font-family: var(--rd-font-display); font-weight: 800; font-size: 1.15rem; color: #fff; } .rd-cat-count { font-size: 0.76rem; color: var(--rd-faint); } /* Întrebarea în cuvintele cumpărătorului, sub numele categoriei. Numele („Outsourcing IT și Rețelistică") e vocabularul agenției și rămâne — îl cer meniul, breadcrumb-ul și URL-ul. Rândul ăsta face traducerea, pe cardul unde omul citește ambele deodată. Sursa: $cat_intrebari din config.php. */ .rd-cat-q { font-size: 0.9rem; line-height: 1.45; color: var(--rd-dim); margin: -6px 0 16px; padding-left: 13px; border-left: 2px solid rgba(56, 189, 248, 0.35); } .rd-cat-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .rd-cat-link { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; color: var(--rd-dim); text-decoration: none; font-size: 0.84rem; transition: 0.18s; border: 1px solid transparent; } .rd-cat-link i { color: var(--rd-faint); width: 16px; text-align: center; font-size: 0.8rem; transition: color 0.18s; } .rd-cat-link:hover { background: rgba(37, 99, 235, 0.1); color: #fff; border-color: rgba(56, 189, 248, 0.2); } .rd-cat-link:hover i { color: var(--rd-cyan); } @media (max-width: 991px) { .rd-finder-grid { grid-template-columns: 1fr 1fr; } .rd-bento-cat { grid-column: span 12; } .rd-hero { padding-top: 50px; } } @media (max-width: 640px) { .rd-finder-grid { grid-template-columns: 1fr; } .rd-cat-links { grid-template-columns: 1fr; } .rd-search-go span { display: none; } .rd-hero-stats { gap: 20px; } } /* ============================================================ PAGE: SERVICII (.page-servicii / .page-services) ============================================================ */ /* Landing: hero + search/filter + categories */ .rd-svc-hero { padding: 40px 0 30px; text-align: center; position: relative; } .rd-svc-toolbar { padding: 16px 0; border-bottom: 1px solid var(--rd-border); margin-bottom: 10px; } .rd-filter-search { position: relative; max-width: 460px; margin: 0 auto 14px; } .rd-filter-search input { width: 100%; padding: 13px 18px 13px 46px; border-radius: 999px; background: rgba(15, 23, 42, 0.9); border: 1px solid var(--rd-border-strong); color: #fff; font-family: var(--rd-font-body); font-size: 0.95rem; outline: none; transition: 0.3s; } .rd-filter-search input:focus { border-color: var(--rd-cyan); box-shadow: var(--rd-glow-blue); } .rd-filter-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--rd-cyan); } .rd-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .rd-chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rd-border-strong); background: rgba(255, 255, 255, 0.03); color: var(--rd-dim); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: 0.2s; white-space: nowrap; } .rd-chip:hover { color: #fff; border-color: var(--rd-cyan); } .rd-chip.active { background: linear-gradient(135deg, var(--rd-blue), #1d4ed8); color: #fff; border-color: transparent; box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.7); } .rd-cat-group { margin-top: 46px; } .rd-cat-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .rd-cat-group-head h3 { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0; } .rd-cat-group-head .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--rd-border), transparent); } .rd-cat-group-head .num { font-size: 0.78rem; color: var(--rd-faint); padding: 3px 10px; border: 1px solid var(--rd-border); border-radius: 999px; } .rd-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .rd-svc-card { display: flex; flex-direction: column; padding: 22px; text-decoration: none; background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius); transition: transform 0.3s var(--rd-ease), border-color 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; } .rd-svc-card:hover { transform: translateY(-5px); border-color: rgba(56, 189, 248, 0.4); box-shadow: var(--rd-shadow); } .rd-svc-card-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; } /* Latura iconitei = exact cele doua randuri de text de langa ea: randul titlului (1rem x 1.3) + marginea lui de 2px + randul pretului (0.76rem x 1.5). La 46px fix atarna 5px sub blocul de text. Gliful dinauntru a scazut de la 1.15rem la 1.02rem odata cu cutia, ca sa-si pastreze proportia de circa 40% din latura. */ .rd-svc-ic { width: calc(1.3rem + 1.14rem + 2px); height: calc(1.3rem + 1.14rem + 2px); flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 1.02rem; color: var(--rd-cyan); background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.18); transition: 0.3s; } .rd-svc-card:hover .rd-svc-ic { background: rgba(56, 189, 248, 0.18); transform: scale(1.06); } .rd-svc-card h3, .rd-svc-card h4 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 2px; line-height: 1.3; } .rd-svc-price { font-size: 0.76rem; font-weight: 700; color: var(--rd-cyan); } .rd-svc-desc { font-size: 0.85rem; color: var(--rd-dim); line-height: 1.55; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rd-svc-foot { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--rd-border); } .rd-svc-foot .more { font-size: 0.8rem; font-weight: 700; color: var(--rd-dim); transition: 0.2s; } .rd-svc-card:hover .rd-svc-foot .more { color: var(--rd-cyan); } .rd-svc-foot .arrow { color: var(--rd-faint); transition: transform 0.3s var(--rd-ease), color 0.3s; } .rd-svc-card:hover .rd-svc-foot .arrow { transform: translateX(5px); color: var(--rd-cyan); } .rd-svc-card.is-hidden { display: none; } /* ---------- Promo (first-month discount) ---------- */ .rd-promo-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff !important; font-size:.7rem; font-weight:800; letter-spacing:.02em; box-shadow:0 6px 16px -6px rgba(239,68,68,.7); white-space:nowrap; } .rd-svc-card .rd-promo-badge { position:absolute; top:14px; right:14px; } .rd-promo-first { color:var(--rd-green); font-weight:700; } .rd-est-first { text-align:center; margin-top:10px; padding:12px; border-radius:12px; background:rgba(16,185,129,.08); border:1px dashed rgba(16,185,129,.45); font-size:.92rem; color:var(--rd-text); } .rd-est-first .amt { font-family:var(--rd-font-display); font-weight:800; font-size:1.4rem; color:var(--rd-green); } .rd-est-first .strike { text-decoration:line-through; color:var(--rd-faint); margin-right:8px; font-size:.9rem; } .price-first-month { text-align:center; margin-top:8px; font-size:.95rem; color:#cbd5e1; } .price-first-month .amt { color:#10b981; font-weight:800; font-size:1.25rem; font-family:var(--rd-font-display); } .price-first-month .strike { text-decoration:line-through; color:#7c8aa0; margin-right:8px; } .rd-noresults { display: none; text-align: center; padding: 60px 20px; color: var(--rd-faint); } .rd-noresults.show { display: block; } @media (max-width: 991px) { .rd-svc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .rd-svc-grid { grid-template-columns: 1fr; } } /* ---------- Detail page: single-scroll + jump-nav ---------- */ .rd-detail-hero { padding: 40px 0 26px; position: relative; } .rd-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--rd-faint); margin-bottom: 18px; flex-wrap: wrap; } .rd-breadcrumb a { color: var(--rd-dim); text-decoration: none; transition: 0.2s; } .rd-breadcrumb a:hover { color: var(--rd-cyan); } .rd-detail-icon { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--rd-blue), rgba(15, 23, 42, 0.5)); box-shadow: 0 12px 30px -10px rgba(37, 99, 235, 0.7); margin-bottom: 20px; } .rd-detail-price-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.3); color: var(--rd-cyan); font-weight: 700; font-size: 0.85rem; } /* Jump nav */ .rd-jumpnav { position: sticky; top: 80px; } .rd-jumpnav-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rd-faint); margin-bottom: 14px; } .rd-jump-link { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 10px; color: var(--rd-dim); text-decoration: none; font-size: 0.86rem; font-weight: 500; transition: 0.2s; border-left: 2px solid transparent; margin-bottom: 3px; } .rd-jump-link i { width: 18px; text-align: center; color: var(--rd-faint); transition: 0.2s; } .rd-jump-link:hover { background: rgba(255, 255, 255, 0.04); color: #fff; } .rd-jump-link.active { background: rgba(37, 99, 235, 0.12); color: #fff; border-left-color: var(--rd-cyan); } .rd-jump-link.active i { color: var(--rd-cyan); } .rd-help-box { margin-top: 22px; padding: 22px; border-radius: var(--rd-radius); background: var(--rd-surface); border: 1px solid var(--rd-border); text-align: center; } .rd-help-box .phone { display: inline-block; margin-top: 8px; font-family: var(--rd-font-display); font-size: 1.25rem; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -0.01em; } .rd-help-box .phone:hover { color: var(--rd-cyan); } /* Content blocks */ .rd-block { scroll-margin-top: 90px; padding: 30px 0; border-top: 1px solid var(--rd-border); } .rd-block:first-of-type { border-top: none; padding-top: 8px; } .rd-block-title { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; } .rd-block-title i { color: var(--rd-cyan); font-size: 1rem; } .rd-benefit-banner { padding: 24px; border-radius: var(--rd-radius); background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(56, 189, 248, 0.04)); border: 1px solid rgba(56, 189, 248, 0.25); margin-bottom: 26px; } .rd-benefit-banner h4 { color: #fff; font-size: 1.1rem; margin-bottom: 8px; } .rd-benefit-banner p { color: var(--rd-dim); margin: 0; line-height: 1.7; } .rd-incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rd-incl-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--rd-border); color: var(--rd-text); font-size: 0.9rem; transition: 0.25s; } .rd-incl-item:hover { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.06); } .rd-incl-item i { color: var(--rd-green); flex-shrink: 0; } .rd-proc-step { display: flex; gap: 18px; padding-bottom: 26px; position: relative; } .rd-proc-step:last-child { padding-bottom: 0; } .rd-proc-step:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 40px; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(56, 189, 248, 0.4), transparent); } .rd-proc-num { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--rd-bg-2); border: 2px solid var(--rd-blue); box-shadow: 0 0 14px -3px rgba(37, 99, 235, 0.6); z-index: 1; } .rd-proc-step h5 { color: #fff; font-size: 0.98rem; margin: 6px 0 4px; } .rd-proc-step p { color: var(--rd-dim); font-size: 0.86rem; margin: 0; line-height: 1.6; } /* Sticky configurator wrapper */ .rd-config-sticky { position: sticky; top: 80px; } /* Related services */ .rd-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .rd-related-grid .rd-svc-card { padding: 16px; } .rd-related-grid .rd-svc-ic { width: 38px; height: 38px; border-radius: 10px; font-size: 1rem; } .rd-related-grid .rd-svc-card h3 { font-size: 0.92rem; } .rd-related-grid .rd-svc-foot { margin-top: auto; padding-top: 10px; } /* auto, nu o valoare fixa: cardurile conexe n-au descriere cu flex-grow, deci fara asta footerul urmeaza titlul si nu se aliniaza intre carduri cand unul se rupe pe mai multe randuri */ @media (max-width: 991px) { .rd-jumpnav, .rd-config-sticky { position: static; } .rd-incl-grid { grid-template-columns: 1fr; } .rd-related-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .rd-related-grid { grid-template-columns: 1fr; } } /* ---------- Universal smart estimator ---------- */ .rd-est { } .rd-est-row { margin-bottom: 18px; } .rd-est-label { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: #e2e8f0; font-weight: 600; margin-bottom: 9px; } .rd-est-label .v { color: var(--rd-cyan); font-weight: 800; } .rd-est-range { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.1); outline: none; } .rd-est-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--rd-blue); cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: border-color 0.2s; } .rd-est-range::-webkit-slider-thumb:hover { border-color: var(--rd-cyan); } .rd-est-opts { display: flex; flex-direction: column; gap: 8px; } .rd-est-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--rd-border); cursor: pointer; transition: 0.2s; } .rd-est-opt:hover { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.05); } .rd-est-opt span { font-size: 0.86rem; color: var(--rd-text); } .rd-est-opt .p { font-size: 0.8rem; color: var(--rd-cyan); font-weight: 700; } .rd-est-opt input { width: 18px; height: 18px; accent-color: var(--rd-blue); cursor: pointer; } .rd-est-tier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .rd-est-tier-btn { padding: 12px 6px; border-radius: 10px; border: 1px solid var(--rd-border); background: rgba(255,255,255,0.02); color: var(--rd-dim); font-size: 0.82rem; font-weight: 600; text-align: center; cursor: pointer; transition: 0.2s; } .rd-est-tier-btn.active { border-color: var(--rd-blue); background: rgba(37, 99, 235, 0.15); color: #fff; box-shadow: 0 0 14px -4px rgba(37, 99, 235, 0.5); } /* Feature comparison (included / not included per tier) */ .rd-est-features { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rd-border); } .rd-est-features-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rd-dim); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .rd-est-features-title .pill { font-size: 0.7rem; font-weight: 700; color: var(--rd-cyan); background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.25); border-radius: 999px; padding: 2px 10px; text-transform: none; letter-spacing: 0; } .rd-est-feat { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: 0.88rem; color: var(--rd-text); border-bottom: 1px solid rgba(255,255,255,0.04); } .rd-est-feat:last-child { border-bottom: none; } .rd-est-feat .ic { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 0.68rem; transition: 0.2s; } .rd-est-feat.yes .ic { background: rgba(16,185,129,0.16); color: #10b981; } .rd-est-feat.no .ic { background: rgba(239,68,68,0.12); color: #ef4444; } .rd-est-feat.no { color: var(--rd-faint); } .rd-est-feat.no .label { text-decoration: line-through; opacity: 0.75; } /* Compare-all-plans table */ .rd-est-compare-btn { width: 100%; margin-top: 14px; padding: 11px; border-radius: 10px; border: 1px dashed var(--rd-border-strong); background: transparent; color: var(--rd-dim); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .rd-est-compare-btn:hover { border-color: var(--rd-cyan); color: #fff; } .rd-est-compare-btn.active { border-style: solid; border-color: var(--rd-cyan); color: #fff; } .rd-est-compare { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--rd-ease); } .rd-est-compare.open { max-height: 700px; margin-top: 12px; overflow-x: auto; } .rd-cmp-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .rd-cmp-table th { text-align: center; padding: 9px 6px; color: var(--rd-dim); font-weight: 700; border-bottom: 1px solid var(--rd-border); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; } .rd-cmp-table th:first-child { text-align: left; } .rd-cmp-table td { padding: 9px 6px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.04); } .rd-cmp-table td:first-child { text-align: left; color: var(--rd-dim); } .rd-cmp-table td.yes i { color: #10b981; } .rd-cmp-table td.no i { color: #ef4444; opacity: 0.55; } .rd-est-price { text-align: center; margin: 22px 0 4px; padding: 18px; border-radius: 14px; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(56, 189, 248, 0.35); box-shadow: 0 0 26px -8px rgba(56, 189, 248, 0.3); } .rd-est-price .amt { font-family: var(--rd-font-display); font-size: 2rem; font-weight: 800; color: #fff; } .rd-est-price .unit { font-size: 0.85rem; color: var(--rd-dim); } .rd-est-note { font-size: 0.76rem; color: var(--rd-faint); text-align: center; font-style: italic; margin-top: 6px; } /* ══════════════════════════════════════════════════════════════════════════ ACORDEON FAQ — o singură definiție pentru tot site-ul (.itm-faq) Construit pe
/, deci funcționează FĂRĂ JavaScript, e navigabil de la tastatură și e anunțat corect de cititoarele de ecran. A înlocuit, pe 2026-09-01, două tipare care cereau JavaScript ca să arate răspunsul: .rd-faq-item (max-height:0 din CSS, deschis din redesign-2026.js) și acordeonul Bootstrap .accordion-cyber de pe cele două pagini de start. Ambele ascundeau de la vizitator — și de la un crawler cu JS oprit — exact textul pe care marcajul FAQPage îl declara că există pe pagină. Întrebarea și răspunsul sunt DELIBERAT diferite: întrebarea e albă, groasă, cu font de titlu, pe fundalul cardului; răspunsul stă pe un fundal mai închis, despărțit printr-o linie, cu text mai mic și mai stins. Se văd ca două zone, nu ca un bloc continuu de text. ══════════════════════════════════════════════════════════════════════════ */ .itm-faq { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; margin-bottom: 14px; background: rgba(255, 255, 255, 0.02); overflow: hidden; transition: border-color 0.25s var(--rd-ease), background 0.25s var(--rd-ease); } .itm-faq[open] { border-color: rgba(56, 189, 248, 0.45); background: rgba(56, 189, 248, 0.04); } /* ---- Întrebarea ---- */ .itm-faq > summary { display: flex; /* flex-start, nu center: când întrebarea se rupe pe două rânduri, iconul trebuie să rămână în dreptul PRIMEI linii, nu centrat pe blocul întreg (regula casei privind plasarea iconurilor). */ align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 20px; cursor: pointer; list-style: none; /* ascunde triunghiul nativ */ color: #fff; font-family: var(--rd-font-display); font-weight: 700; font-size: 1rem; line-height: 1.45; transition: background 0.2s var(--rd-ease); } /* Markerul nativ: trei sintaxe, fiindcă browserele nu s-au înțeles asupra uneia. */ .itm-faq > summary::-webkit-details-marker { display: none; } .itm-faq > summary::marker { content: ''; } .itm-faq > summary::-moz-list-bullet { list-style-type: none; } @media (hover: hover) { .itm-faq > summary:hover { background: rgba(255, 255, 255, 0.035); } } .itm-faq > summary:focus-visible { outline: 2px solid var(--rd-cyan); outline-offset: -2px; } /* Întrebarea poate fi și un titlu, nu doar un : acolo unde acordeonul e conținut de pagină — întrebările de pe paginile de start, care stăteau în

înainte de migrare — structura documentului trebuie să rămână întreagă. `font: inherit` îi ia înapoi dimensiunea impusă de browser, deci titlul arată exact ca restul întrebărilor. */ .itm-faq > summary > :is(h2, h3, h4) { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; } /* Indicatorul: medalion rotund cu „+", care devine „×" la deschidere. Nu primește width+height+aspect-ratio simultan — ar deveni elipsă. */ /* Selector mai specific decât `.fa-solid`: FontAwesome se încarcă DUPĂ această foaie și, la specificitate egală, i-ar suprascrie `display`. */ .itm-faq > summary > .itm-faq__ico { flex: 0 0 auto; display: grid; place-items: center; /* Centrare optică pe prima linie a întrebării: înălțimea liniei e 16px x 1.45 = 23.2px, iconul are 28px — diferența, împărțită la doi. */ margin-top: -2px; width: 28px; height: 28px; border-radius: 50%; background: rgba(56, 189, 248, 0.12); color: var(--rd-cyan); font-size: 0.72rem; transition: transform 0.3s var(--rd-ease), background 0.25s var(--rd-ease); } .itm-faq[open] > summary > .itm-faq__ico { transform: rotate(45deg); background: rgba(56, 189, 248, 0.24); } /* ---- Răspunsul: zonă vizual separată ---- */ .itm-faq__a { padding: 16px 20px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(6, 11, 23, 0.5); color: var(--rd-dim); font-size: 0.93rem; line-height: 1.78; } @media (prefers-reduced-motion: reduce) { /* Selectorii trebuie sa aiba specificitate cel putin egala cu cei care pun tranzitia mai sus, altfel regula asta pierde si miscarea ramane. */ .itm-faq, .itm-faq > summary, .itm-faq > summary > .itm-faq__ico { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ INDEX ALFABETIC A–Z (.rd-chips--az) — modificator pentru .rd-chips Chips-urile obișnuite au `padding: 8px 16px`, potrivit pentru etichete cu cuvinte. Pentru 26 de litere, asta însumează ~1320px într-un container de 1140px, deci ultima literă cobora singură pe rândul al doilea — arăta ca o greșeală, nu ca o decizie. Aici lățimea o dă grila, nu padding-ul lateral: cele 26 de litere ocupă coloane egale și încap pe un singur rând. Sub pragul la care ar deveni prea mici pentru deget, rândul devine derulabil orizontal în loc să se rupă — ținta de atingere rămâne peste minimul de 24px cerut de WCAG 2.2. ══════════════════════════════════════════════════════════════════════════ */ .rd-chips--az { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 6px; flex-wrap: nowrap; /* anulează wrap-ul din .rd-chips */ } .rd-chips--az .rd-chip { padding: 9px 0; /* fără padding lateral — lățimea vine din grilă */ text-align: center; font-size: 0.8rem; letter-spacing: 0; } /* Sub ~900px, 26 de coloane ar da litere de sub 30px. Trecem pe un rând derulabil, cu litere de dimensiune fixă, în loc să le facem ilizibile. */ @media (max-width: 900px) { .rd-chips--az { display: flex; justify-content: safe center; overflow-x: auto; overscroll-behavior-x: contain; /* nu trage pagina de dedesubt */ padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .rd-chips--az .rd-chip { flex: 0 0 auto; min-width: 34px; scroll-snap-align: center; } } /* ------------------------------------------------------------ BLOCUL ROI + COMPARAȚIE — partajat homepage / pricing Regulile astea au trait pana pe 2026-09-03 doar in