/* ======================================== DigitalMihai.ro - Design System v4 Paleta: cream + gri antracit + portocaliu + peach ======================================== */ /* Font - via Bunny Fonts (GDPR-compliant, fara consent necesar). Incarcat prin in pentru randare paralela (nu @import). */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { height: 100%; } :root { /* Background */ --cream: #f8f6f0; --white: #ffffff; /* Brand colors */ --dark: #36383E; /* Gri antracit principal */ --dark-2: #2A2C32; /* Gri antracit mai inchis */ --dark-3: #4A4D54; /* Gri antracit mai deschis */ /* Accent colors */ --orange: #F47C32; /* Portocaliu principal */ --orange-dark: #E26818; /* Portocaliu inchis pentru hover */ --peach: #FFD0A8; /* Peach deschis */ --peach-strong: #FFA877; /* Peach mai saturat */ /* Text */ --text: #2A2C32; --text-muted: #5C5F66; --text-light: #8A8D94; /* Borders & shadows */ --border: rgba(54, 56, 62, 0.12); --border-light: rgba(54, 56, 62, 0.06); --shadow-sm: 0 2px 8px rgba(54, 56, 62, 0.06); --shadow-md: 0 8px 24px rgba(54, 56, 62, 0.08); --shadow-lg: 0 20px 40px rgba(54, 56, 62, 0.12); /* Sizes */ --container: 1200px; --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; } body { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--cream); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; transition: opacity 0.2s; } a:hover { opacity: 0.75; } img { max-width: 100%; height: auto; display: block; } .container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } /* ======================================== HEADER / NAV ======================================== */ .header { position: sticky; top: 0; z-index: 100; background: rgba(248, 246, 240, 0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-light); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; max-width: var(--container); margin: 0 auto; } .logo { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .logo .accent { color: var(--orange-text); } .logo .ext { color: var(--text-light); font-weight: 600; } .nav-menu { display: flex; gap: 2rem; list-style: none; align-items: center; } .nav-menu a { font-size: 0.95rem; font-weight: 500; color: var(--text); position: relative; padding: 0.5rem 0; } .nav-menu a.active::after, .nav-menu a:hover::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--orange); } .nav-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--dark); color: var(--cream); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; transition: all 0.2s; } .nav-cta:hover { background: var(--orange-btn); opacity: 1; transform: translateY(-1px); } .mobile-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--text); } /* Actiuni dreapta: buton Cont (secundar) + Solicita oferta (principal) */ .nav-actions { display: flex; align-items: center; gap: 0.75rem; } .nav-cont { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1.25rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; color: var(--text); transition: all 0.2s; } .nav-cont:hover { border-color: var(--orange-text); color: var(--orange-text); } .nav-cont-li { display: none; } /* ascuns pe desktop; apare in dropdown pe mobil */ /* ======================================== HERO - background image cu overlay gri antracit ======================================== */ .hero-img { position: relative; width: 100%; background: var(--dark); overflow: hidden; } .hero-img-inner { position: relative; width: 100%; } .hero-bg-img { display: block; width: 100%; height: auto; } .hero-img-inner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42, 44, 50, 0.92) 0%, rgba(42, 44, 50, 0.55) 50%, rgba(42, 44, 50, 0.1) 100%); z-index: 1; } .hero-content { position: absolute; inset: 0; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; } .hero-text { max-width: 560px; color: var(--cream); } .hero-eyebrow { display: inline-block; padding: 0.5rem 1rem; background: rgba(244, 124, 50, 0.2); color: var(--peach); border-radius: 999px; font-size: 0.85rem; font-weight: 600; margin-bottom: 1.5rem; letter-spacing: 0.02em; } .hero-title { font-size: clamp(2.3rem, 4.8vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1.25rem; color: var(--cream); } .hero-title .accent { color: var(--peach); } .hero-subtitle { font-size: 1.1rem; color: rgba(248, 246, 240, 0.85); margin-bottom: 1.75rem; max-width: 480px; } .hero-cta-group { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.95rem 1.75rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; transition: all 0.2s; border: none; cursor: pointer; font-family: inherit; } .btn-primary { background: var(--orange-btn); color: var(--white); } .btn-primary:hover { background: #A34200; opacity: 1; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: transparent; color: var(--cream); border: 1.5px solid var(--cream); } .btn-secondary:hover { background: var(--cream); color: var(--dark); opacity: 1; } .btn-dark { background: var(--dark); color: var(--cream); } .btn-dark:hover { background: var(--orange-btn); opacity: 1; transform: translateY(-1px); } .hero-trust { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; } .hero-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(248, 246, 240, 0.85); font-weight: 500; } .hero-trust-item::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--orange); color: white; border-radius: 50%; font-size: 0.7rem; font-weight: bold; } /* ======================================== SECTIONS - cu margini diagonale ======================================== */ .section { padding: 5rem 0; position: relative; } .section-dark { background: var(--dark); color: var(--cream); position: relative; } /* Margine diagonala sus si jos pentru sectiunile dark */ .section-dark.diag-top { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); margin-top: -3rem; padding-top: 8rem; } .section-dark.diag-bottom { clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); padding-bottom: 8rem; margin-bottom: -3rem; } .section-dark.diag-both { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); margin-top: -3rem; margin-bottom: -3rem; padding-top: 8rem; padding-bottom: 8rem; } .section-white { background: var(--white); } .section-cream { background: var(--cream); } /* Decor cu cercuri colorate */ .dot { position: absolute; border-radius: 50%; pointer-events: none; } .dot-orange { background: var(--orange); } .dot-peach { background: var(--peach-strong); } .dot-dark { background: var(--dark); } .section-header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; } .section-eyebrow { display: inline-block; padding: 0.4rem 1rem; background: rgba(244, 124, 50, 0.12); color: var(--orange-text); border-radius: 999px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0.05em; text-transform: uppercase; } .section-dark .section-eyebrow { background: rgba(255, 168, 119, 0.15); color: var(--peach-strong); } .section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1rem; color: var(--dark); } .section-dark .section-title { color: var(--cream); } .section-title .accent { color: var(--orange-text); } .section-dark .section-title .accent { color: var(--peach-strong); } .section-subtitle { font-size: 1.05rem; color: var(--text-muted); } .section-dark .section-subtitle { color: rgba(248, 246, 240, 0.7); } /* ======================================== DESPRE - colaj imagini + text (sub banner) ======================================== */ .despre-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; position: relative; } .despre-colaj { position: relative; } .despre-colaj img { width: 100%; height: auto; display: block; } .despre-text h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1.25rem; color: var(--dark); } .despre-text h2 .accent { color: var(--orange-text); } .despre-text .small-eyebrow { color: var(--orange-text); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.75rem; display: block; } .despre-text p { color: var(--text-muted); font-size: 1rem; margin-bottom: 1rem; } /* ======================================== PENTRU CINE? - 3 carduri pe fundal dark ======================================== */ .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .audience-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); overflow: hidden; transition: all 0.3s; } .audience-card:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .audience-card-img { width: 100%; height: 180px; object-fit: cover; } .audience-card-body { padding: 1.5rem; text-align: center; } .audience-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--cream); } .audience-card p { color: rgba(248, 246, 240, 0.7); font-size: 0.9rem; margin-bottom: 1rem; line-height: 1.55; } .audience-card-link { color: var(--peach-strong); font-weight: 600; font-size: 0.9rem; display: inline-flex; gap: 0.4rem; align-items: center; } .audience-card-link::after { content: "→"; transition: transform 0.2s; } .audience-card:hover .audience-card-link::after { transform: translateX(4px); } /* ======================================== SERVICII GRID - flexbox pt a centra ultimul rand incomplet ======================================== */ .services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } .service-card { flex: 1 1 280px; max-width: 360px; background: var(--white); border-radius: var(--radius); padding: 2rem; border: 1px solid var(--border-light); transition: all 0.3s; position: relative; overflow: hidden; display: flex; flex-direction: column; text-align: center; align-items: center; } .section-dark .service-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: var(--cream); } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--orange); } .service-card-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1.25rem; background: rgba(244, 124, 50, 0.12); color: var(--orange); } .service-card-icon.peach { background: rgba(255, 208, 168, 0.4); color: var(--orange-dark); } .service-card-icon.dark { background: rgba(54, 56, 62, 0.1); color: var(--dark); } .section-dark .service-card-icon.dark { background: rgba(248, 246, 240, 0.1); color: var(--cream); } .service-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.75rem; letter-spacing: -0.01em; } .service-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem; flex-grow: 1; } .section-dark .service-card p { color: rgba(248, 246, 240, 0.7); } .service-card-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; color: var(--orange-text); margin-top: auto; justify-content: center; } .service-card-link::after { content: "→"; transition: transform 0.2s; } .service-card:hover .service-card-link::after { transform: translateX(4px); } .service-badge { position: absolute; top: 1.25rem; right: 1.25rem; padding: 0.25rem 0.65rem; background: var(--peach); color: var(--dark); font-size: 0.7rem; font-weight: 700; border-radius: 999px; letter-spacing: 0.05em; } /* ======================================== ABOUT (homepage preview + despre.html) ======================================== */ .about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; } .about-visual { position: relative; aspect-ratio: 1 / 1.15; max-width: 460px; } .about-visual-img { position: absolute; inset: 0; background: linear-gradient(135deg, var(--dark) 0%, var(--dark-3) 100%); border-radius: var(--radius-lg); overflow: hidden; } .about-visual-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-visual::before { content: ""; position: absolute; top: -20px; left: -20px; right: 40px; bottom: 40px; background: var(--orange); border-radius: var(--radius-lg); z-index: -1; } .about-visual::after { content: ""; position: absolute; bottom: -20px; right: -20px; width: 80px; height: 80px; background: var(--peach); border-radius: 50%; z-index: -1; } .about-text h2 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1.25rem; } .about-text p { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 1.25rem; } .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); } .about-stat { text-align: center; } .about-stat strong { display: block; font-size: 2rem; font-weight: 800; color: var(--orange-text); margin-bottom: 0.25rem; } .about-stat span { font-size: 0.85rem; color: var(--text-muted); } /* ======================================== DE CE NOI - layout Fusion-style 3x2 cu un card colorat ======================================== */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .why-card { background: var(--white); padding: 1.75rem; border-radius: var(--radius); border: 1px solid var(--border-light); transition: all 0.3s; display: flex; flex-direction: column; align-items: center; text-align: center; } .why-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .why-card.featured { background: var(--orange); color: var(--white); border-color: var(--orange); } .why-card.featured-peach { background: var(--peach); color: var(--dark); border-color: var(--peach); } .why-card-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: rgba(244, 124, 50, 0.12); color: var(--orange); margin: 0 auto 1rem; font-size: 1.25rem; } .why-card.featured .why-card-icon { background: rgba(255, 255, 255, 0.2); color: var(--white); } .why-card.featured-peach .why-card-icon { background: rgba(54, 56, 62, 0.15); color: var(--dark); } .why-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; } .why-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin: 0; } .why-card.featured p { color: rgba(255, 255, 255, 0.92); } .why-card.featured-peach p { color: var(--dark); opacity: 0.85; } /* ======================================== CTA BANNER ======================================== */ .cta-banner { background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%); color: var(--cream); padding: 3.5rem 3rem; border-radius: var(--radius-lg); display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: center; position: relative; overflow: hidden; } .cta-banner::before { content: ""; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(244, 124, 50, 0.25) 0%, transparent 70%); pointer-events: none; } .cta-banner h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.75rem; } .cta-banner p { color: rgba(248, 246, 240, 0.75); font-size: 1rem; } .cta-banner-action { text-align: right; position: relative; z-index: 1; } /* ======================================== PAGE HEADER (interior pages) ======================================== */ .page-header { padding: 4rem 0 3rem; position: relative; overflow: hidden; } .page-header::before { content: ""; position: absolute; top: 0; right: 0; width: 35%; height: 100%; background: linear-gradient(135deg, transparent 60%, rgba(244, 124, 50, 0.06) 60%); pointer-events: none; } .page-header-content { max-width: 800px; position: relative; z-index: 1; } .breadcrumb { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; } .breadcrumb a:hover { color: var(--orange-text); } .breadcrumb span { margin: 0 0.5rem; } .page-title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1rem; } .page-subtitle { font-size: 1.1rem; color: var(--text-muted); max-width: 640px; } /* ======================================== CONTENT BLOCKS (legal pages, service pages) ======================================== */ .content { max-width: 800px; margin: 0 auto; padding: 2rem 0 4rem; } .content h2 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin: 2.5rem 0 1rem; color: var(--dark); } .content h2:first-child { margin-top: 0; } .content h3 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 0.75rem; color: var(--dark); } .content p { margin-bottom: 1.25rem; color: var(--text-muted); line-height: 1.7; } .content ul, .content ol { margin: 1rem 0 1.5rem 1.5rem; color: var(--text-muted); } .content li { margin-bottom: 0.5rem; line-height: 1.7; } .content strong { color: var(--text); } .content a { color: var(--orange-text); text-decoration: underline; } /* ======================================== SERVICE PAGE ======================================== */ .service-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; padding: 3rem 0 5rem; } .service-hero-visual { aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%); border-radius: var(--radius-lg); overflow: hidden; position: relative; } .service-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .service-feature { padding: 1.5rem; background: var(--cream); border-radius: var(--radius); border-left: 3px solid var(--orange); } .service-feature h4 { font-weight: 700; margin-bottom: 0.5rem; } .service-feature p { font-size: 0.95rem; color: var(--text-muted); margin: 0; } /* ======================================== FORM ======================================== */ .form-wrapper { max-width: 640px; margin: 0 auto; background: var(--white); padding: 2.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.9rem; } .form-group label .req { color: var(--orange-text); } .form-control { width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit; background: var(--cream); color: var(--text); transition: border-color 0.2s; } .form-control:focus { outline: none; border-color: var(--orange); background: var(--white); } textarea.form-control { min-height: 140px; resize: vertical; } .form-checkbox { display: flex; align-items: flex-start; gap: 0.65rem; margin: 1.5rem 0; } .form-checkbox input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--orange); flex-shrink: 0; } .form-checkbox label { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin: 0; } .form-checkbox label a { color: var(--orange-text); text-decoration: underline; } .form-submit { width: 100%; padding: 1rem; background: var(--orange-btn); color: var(--white); border: none; border-radius: var(--radius-sm); font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.2s; font-family: inherit; } .form-submit:hover { background: #A34200; } .form-submit:disabled { opacity: 0.6; cursor: not-allowed; } .form-message { padding: 1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: 0.95rem; display: none; } .form-message.show { display: block; } .form-message.success { background: #e6f4ea; color: #1e7e34; border: 1px solid #c3e6cb; } .form-message.error { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6cb; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* ======================================== CONTACT INFO ======================================== */ .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; margin-top: 2rem; } .contact-info { background: var(--dark); color: var(--cream); padding: 2.5rem; border-radius: var(--radius-lg); } .contact-info h3 { font-size: 1.35rem; margin-bottom: 1.5rem; font-weight: 700; } .contact-info-item { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; align-items: flex-start; } .contact-info-item-icon { width: 36px; height: 36px; background: rgba(244, 124, 50, 0.25); color: var(--peach-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; } .contact-info-item div strong { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(248, 246, 240, 0.6); margin-bottom: 0.25rem; font-weight: 600; } .contact-info-item div span, .contact-info-item div a { color: var(--cream); font-size: 0.95rem; line-height: 1.5; } /* ======================================== FOOTER ======================================== */ .footer { background: var(--dark); color: rgba(248, 246, 240, 0.7); padding: 4rem 0 1.5rem; margin-top: 4rem; } .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 3rem; margin-bottom: 3rem; } .footer-brand .logo { color: var(--cream); margin-bottom: 1rem; display: inline-block; } .footer-brand .logo .ext { color: rgba(248, 246, 240, 0.5); } .footer-brand p { font-size: 0.9rem; margin-bottom: 1rem; max-width: 280px; } .footer h3 { color: var(--cream); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.25rem; font-weight: 700; } .footer ul { list-style: none; } .footer ul li { margin-bottom: 0.6rem; } .footer ul a { font-size: 0.9rem; color: rgba(248, 246, 240, 0.7); transition: color 0.2s; } .footer ul a:hover { color: var(--peach-strong); opacity: 1; } .footer-bottom { padding-top: 2rem; border-top: 1px solid rgba(248, 246, 240, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; } .footer-anpc { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; } .footer-anpc a { display: inline-block; padding: 0.4rem 0.85rem; background: rgba(248, 246, 240, 0.08); border-radius: var(--radius-sm); font-size: 0.75rem; transition: background 0.2s; } .footer-anpc a:hover { background: var(--orange); color: var(--white); opacity: 1; } /* ======================================== COOKIE BANNER ======================================== */ .cookie-banner { position: fixed; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; max-width: 520px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-lg); z-index: 1000; display: none; } .cookie-banner.show { display: block; } .cookie-banner h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; } .cookie-banner p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.5; } .cookie-banner p a { color: var(--orange-text); text-decoration: underline; } .cookie-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .cookie-btn { flex: 1; padding: 0.7rem 1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; cursor: pointer; border: none; font-family: inherit; transition: all 0.2s; } .cookie-btn-accept { background: var(--dark); color: var(--cream); } .cookie-btn-accept:hover { background: var(--orange); } .cookie-btn-refuse { background: transparent; color: var(--text); border: 1.5px solid var(--border); } .cookie-btn-refuse:hover { border-color: var(--text); } /* ======================================== ALERT ======================================== */ .alert { padding: 1.25rem 1.5rem; border-radius: var(--radius); border-left: 4px solid; margin: 1.5rem 0; } .alert-yellow { background: rgba(255, 208, 168, 0.25); border-color: var(--peach-strong); } .alert-red { background: rgba(244, 124, 50, 0.08); border-color: var(--orange); } .alert strong { color: var(--text); display: block; margin-bottom: 0.25rem; } .alert p { color: var(--text-muted); margin: 0; font-size: 0.95rem; } /* ======================================== RESPONSIVE ======================================== */ @media (max-width: 900px) { .hero-img-inner::before { background: linear-gradient(180deg, rgba(42, 44, 50, 0.92) 0%, rgba(42, 44, 50, 0.85) 60%, rgba(42, 44, 50, 0.7) 100%); } .hero-content { position: relative; inset: auto; padding: 2.5rem 1.5rem; } .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-title { font-size: clamp(1.5rem, 5vw, 2.2rem); margin-bottom: 0.75rem; } .hero-subtitle { font-size: 0.9rem; margin-bottom: 1rem; } .hero-eyebrow { margin-bottom: 0.75rem; } .hero-trust { display: none; } .despre-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-grid { grid-template-columns: 1fr; gap: 3rem; } .about-visual { margin: 0 auto; } .audience-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr 1fr; } .cta-banner { grid-template-columns: 1fr; padding: 2.5rem 2rem; text-align: center; } .cta-banner-action { text-align: center; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .service-hero { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .nav-menu { position: fixed; top: 65px; left: 0; right: 0; background: var(--cream); flex-direction: column; padding: 1.5rem; gap: 1.25rem; border-bottom: 1px solid var(--border); transform: translateY(-150%); transition: transform 0.3s; align-items: flex-start; } .nav-menu.open { transform: translateY(0); } .mobile-toggle { display: block; } .nav-actions { display: none; } .nav-cont-li { display: block; } .section-dark.diag-top, .section-dark.diag-bottom, .section-dark.diag-both { clip-path: none; margin-top: 0; margin-bottom: 0; padding-top: 4rem; padding-bottom: 4rem; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } .form-wrapper { padding: 1.5rem; } .section { padding: 3.5rem 0; } .why-grid { grid-template-columns: 1fr; } .about-stats { grid-template-columns: 1fr; text-align: left; } .about-stat { text-align: left; } } /* ======================================== LUCIDE SVG ICONS - dimensiuni per container ======================================== */ /* Hero eyebrow + section eyebrow: inline cu text */ .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; } .hero-eyebrow svg { width: 16px; height: 16px; flex-shrink: 0; } /* Card icons - dimensiuni clare per tip */ .service-card-icon svg { width: 26px; height: 26px; } .why-card-icon svg, .feature-card-icon svg { width: 22px; height: 22px; } .contact-info-item-icon svg { width: 18px; height: 18px; } /* Cookie banner header */ .cookie-banner h4 { display: flex; align-items: center; gap: 0.5rem; } .cookie-banner h4 svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; } /* Pentru cazurile unde icon-ul este pus direct cu numar (ex. aplicatii-ai cum lucram pasii 1-4) - text ramane */ /* ============ LOGO IMAGINE ============ */ .logo .logo-img { height: 38px; width: auto; display: block; } .footer-brand .logo .logo-img { height: 40px; margin-bottom: 0.5rem; } @media (max-width: 600px) { .logo .logo-img { height: 32px; } } /* ============ LISTA SERVICII (sectiunea Despre) ============ */ .despre-list { list-style: none; margin: 0 0 1.25rem; padding: 0; } .despre-list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; color: var(--text); line-height: 1.6; } .despre-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); } /* ============ CURSURI RECENTE (homepage) ============ */ .home-courses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; } .home-course { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #ece8dd; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: transform .15s ease, box-shadow .15s ease; } .home-course:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.10); } .home-course-cover { aspect-ratio: 3 / 4; background: #ece8dd center/contain no-repeat; } .home-courses-cta { text-align: center; margin-top: 2.25rem; } @media (max-width: 760px) { .home-courses-grid { grid-template-columns: repeat(2, 1fr); max-width: 420px; gap: 0.9rem; } } /* ============ Pagina eBooks (placeholder) ============ */ .ebooks-soon { max-width: 640px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem 2rem; } .ebooks-soon h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 1rem; color: var(--text); } .ebooks-soon p { color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; } .ebooks-soon-cta { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } /* Contor caractere formular */ .char-counter { display: block; text-align: right; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem; } /* ============ Pagina eBooks (eMAG) ============ */ .ebooks-header-cta { margin-top: 1.5rem; } .btn-emag { display: inline-block; background: #e1251b; color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; padding: 0.9rem 1.8rem; border-radius: var(--radius-sm); text-decoration: none; box-shadow: 0 4px 14px rgba(225,37,27,0.30); transition: background .15s ease, transform .15s ease; } .btn-emag:hover { background: #c11d14; color: #fff; transform: translateY(-2px); } .ebooks-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.5rem; max-width: 1000px; margin: 0 auto; } .ebook-cover { display: block; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); transition: transform .15s ease, box-shadow .15s ease; } .ebook-cover:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.14); } .ebook-cover img { width: 100%; height: auto; display: block; } @media (max-width: 1000px) { .ebooks-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 760px) { .ebooks-grid { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } } @media (max-width: 520px) { .ebooks-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } .ebooks-footer-cta { text-align: center; margin-top: 2.5rem; } /* Success state formular contact: doar mesajul, centrat in card */ .form-wrapper.form-sent { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .form-wrapper.form-sent > *:not(#form-message) { display: none !important; } .form-wrapper.form-sent #form-message { margin: 0; max-width: 100%; } /* Eticheta AI pe imaginea fondatorului (transparenta AI Act) */ .ai-img-note { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.7rem; line-height: 1; padding: 4px 8px; border-radius: 6px; letter-spacing: 0.02em; z-index: 2; pointer-events: none; } /* Contrast AA (accesibilitate): portocaliu inchis pentru text/butoane pe fundal deschis. Decorul si portocaliul pe fundal dark raman neschimbate. */ :root { --orange-text: #9A4A0E; --orange-btn: #C7501A; } .hero-img-inner picture { display: contents; }