/*================================================= LOGICON — skin „Techno” (TemplateMonster #94212) Re-skin prin CSS custom properties peste style.css (vezi /home/logicon/redesign/SPEC.md). Se incarca DUPA style.css si suprascrie tokens + componente. IMPORTANT pentru alte pagini (despre/contact/pachete, cele 8 pagini de servicii): foloseste EXACT clasele de mai jos ca sa mosteneasca acest design fara alt CSS: - Header: .techno-header-top (topbar) + .th-header > .sticky-wrapper > .techno_nav_area (nav alb sticky) > nav.techno_menu > ul > li > a (+ ul.sub-menu) > a.dtbtn (CTA) — pastreaza .th-menu-toggle si .th-menu-wrapper / .sticky-wrapper neschimbate, sunt cablate in main.js (nu se editeaza). - Butoane: .th-btn / a.dtbtn (identice vizual). - Titlu sectiune: .sub-title (+.style2 pt fundal inchis) urmat de h2.sec-title — bara animata e automata (::after pe .title-area / .sub-title). - Carduri: .service-card, .trust-card, .feature-grid3, .price-card, .accordion-card — radius 10px deja aplicat. - Sectiune neagra (grid servicii): adauga clasa "dark-section" pe elementul .service-area / .space. - Breadcrumb pagini interioare: .breadcumb-wrapper neschimbat (doar recolorat aici). - Footer: .site-footer (fundal navy) cu .footer-widgets-area, .widget-title, .elementor-icon-list-items, .footer-bottom, .footer-links — sau varianta veche .footer-wrapper (ambele sunt suportate mai jos, ca sa functioneze indiferent care markup il refolosesc paginile interioare). - Formulare: .contact-form .form-control / .form-select / textarea — stil Techno deja aplicat. - Pricing: .price-card / .pkg-name / .pkg-price / .pkg-per / .pkg-list / .pkg-badge (folosit deja in pachete.html). ==================================================*/ /* 0) Font Mulish — vezi si linkul din (CDN Google Fonts, self-hosting-ul temei era stricat, per SPEC §1/§4.3) */ @import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap'); /* 1) TOKENS — culorile/fonturile de baza din style.css (:root, linia 87) sunt CSS custom properties; le suprascriem aici ca sa se propage automat peste toata componenta existenta. */ :root { --theme-color: #0C5ADB; /* primary Techno */ --theme-color2: #000000; /* secondary / fundal sectiune inchisa */ --title-color: #232323; --body-color: #686868; --smoke-color: #EEF2FC; --smoke-color2: #F5F8FF; --black-color: #000000; --black-color2: #0A0E1B; --white-color: #ffffff; --th-border-color: #ebebeb; --title-font: "Mulish", sans-serif; --title-font2: "Mulish", sans-serif; --body-font: "Mulish", sans-serif; /* aliasuri Techno, folosite explicit in aceasta foaie */ --dream-color-primary: #0C5ADB; --dream-color-hover: #1266F1; --dream-color-secondary: #000000; --dream-text-link: #6d6d6d; --dream-placeholder: #b1b1b1; --dream-border: #ebebeb; --footer-text: #9EB3EF; --footer-border: rgba(255, 255, 255, .2); --footer-social-bg: #187DFF; --bar-color: #aec6ef; } /* 2) TIPOGRAFIE */ html, body { max-width: 100%; overflow-x: hidden; } body { background: #ffffff; font-weight: 400; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { color: var(--title-color); font-weight: 700; line-height: 1.3; } h1, .hero-title { font-size: 48.8px; } h2, .sec-title .title, .sec-title { font-size: 39px; } h3 { font-size: 31px; } h4 { font-size: 25px; } h5 { font-size: 20px; } h6 { font-size: 18.4px; } p { color: var(--body-color); } a { color: var(--body-color); } a:hover { color: var(--dream-color-hover); } @media (max-width: 575px) { h1, .hero-title { font-size: clamp(1.9rem, 7vw, 2.4rem); } h2, .sec-title { font-size: clamp(1.5rem, 6vw, 1.9rem); } } /* 3) BUTOANE — a.dtbtn / .th-btn (Techno) — overlay animat din centru la hover, radius 4px, padding 12px 28px. */ .th-btn, a.dtbtn, .dreamit-button .button { position: relative; z-index: 1; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--dream-color-primary) !important; color: #fff !important; border: none !important; border-radius: 4px !important; padding: 12px 28px !important; font-family: var(--title-font); font-size: 17px !important; font-weight: 600 !important; line-height: 1.3; text-transform: none !important; box-shadow: none !important; transition: color .3s ease; } .th-btn:before, a.dtbtn:before { content: ""; position: absolute; inset: 0; background: var(--dream-color-hover); border-radius: 50%; transform: translate(-50%, -50%) scale(0); left: 50%; top: 50%; width: 220%; padding-bottom: 220%; z-index: -1; transition: transform .5s cubic-bezier(.65, 0, .35, 1); } .th-btn:hover:before, a.dtbtn:hover:before, .th-btn.active:before { transform: translate(-50%, -50%) scale(1); } .th-btn:hover, a.dtbtn:hover, .th-btn.active { color: #fff !important; } .th-btn:after { display: none !important; } .th-btn .icon { margin-left: 0; background: transparent !important; width: auto !important; height: auto !important; } .th-btn .icon img, .th-btn:hover .icon img { filter: brightness(0) invert(1); } .th-btn.th-border { background: transparent !important; color: var(--dream-color-primary) !important; border: 1px solid var(--dream-color-primary) !important; } .th-btn.th-border:before { background: var(--dream-color-primary); } .th-btn.th-border:hover { color: #fff !important; } .th-btn.th-border .icon img { filter: none; } .th-btn.th-border:hover .icon img { filter: brightness(0) invert(1); } /* 4) SUB-TITLE / SEC-TITLE — eyebrow + bara animata (echivalent .section-title.style1 din tema Techno, widgets-style.css). */ .sub-title { position: relative; display: block; border: none !important; background: none !important; padding: 0 0 26px 0 !important; margin-bottom: 0 !important; color: var(--dream-color-primary) !important; font-family: var(--title-font); font-size: 16px !important; font-weight: 700 !important; letter-spacing: 3px; text-transform: uppercase; } .sub-title:before { display: none !important; } .sub-title:after { content: ""; position: absolute; left: 0; bottom: 6px; width: 90px; height: 5px; border-radius: 30px; background: var(--bar-color); overflow: visible; } .title-area.text-center .sub-title:after, .text-center .sub-title:after { left: 50%; transform: translateX(-50%); } /* punctul animat care alearga pe bara */ .sub-title .bar-dot, .title-area { position: relative; } .title-area:before { content: ""; position: absolute; left: 0; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--dream-color-primary); animation: techno-move-bar 3s ease-in-out infinite; z-index: 1; } .title-area.text-center:before { left: 50%; margin-left: -45px; } @keyframes techno-move-bar { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(80px); } } /* fundal inchis: bara + eyebrow albe/pale */ .dark-section .sub-title, .text-white ~ .sub-title, .sub-title.style2.text-white { color: #fff !important; } .dark-section .title-area:before { background: #fff; } .dark-section .sub-title:after { background: rgba(255, 255, 255, .3); } .dark-section .sec-title, .dark-section h2, .dark-section h3, .dark-section .box-title { color: #fff !important; } .dark-section .box-text, .dark-section p { color: #B9B9B9; } .sec-title { color: var(--title-color); font-weight: 800; line-height: 1.2; } /* 5) SPATIERE — var(--section-space) ramane 120px (deja compatibil) */ /* 6) CARDURI — radius 10px generalizat */ .service-card, .trust-card, .feature-grid3, .price-card, .accordion-card, .process-item .box-img, .hero-card, .contact-area, .icon-box, .form-group, .contact-form .form-control, .contact-form .form-select, .contact-form textarea.form-control { border-radius: 10px; } .service-card { background: #fff; border: 1px solid var(--th-border-color); box-shadow: 0 4px 18px rgba(15, 23, 42, .05); padding: 34px 28px; height: 100%; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(12, 90, 219, .12); border-color: var(--dream-color-primary); } .service-card .box-icon img { width: 48px; height: 48px; object-fit: contain; } .service-card .box-title { font-size: 1.2rem; margin: 18px 0 8px; } .service-card .box-title a { color: var(--title-color); } .service-card .box-title a:hover { color: var(--dream-color-primary); } .service-card .box-text { color: var(--body-color); font-size: .98rem; } /* sectiune neagra — carduri transparente cu border subtire (ca in demo) */ .dark-section { background: #000 !important; color: #B9B9B9; } .dark-section .service-card { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; } .dark-section .service-card:hover { border-color: var(--dream-color-primary); background: rgba(12, 90, 219, .08); } .dark-section .service-card .box-text { color: #9AA1B4; } .dark-section p, .dark-section a { color: #9AA1B4; } .dark-section .box-title a { color: #fff !important; } .dark-section .box-title a:hover { color: var(--dream-color-primary) !important; } /* 7) HEADER — topbar + nav alb sticky + meniu + CTA */ .techno-header-top { background: var(--dream-color-primary); padding: 9px 0; } .techno-header-top .top-tagline { margin: 0; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .2px; white-space: normal; } @media (max-width: 767px) { .techno-header-top .top-tagline { font-size: 12px; text-align: center; margin-bottom: 6px; } .techno-header-top .social-icons.text-end, .techno-header-top .social-icons.text-right { justify-content: center; } .techno-header-top .row { text-align: center; } } .techno-header-top .social-icons { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; } .techno-header-top .social-icons.text-end, .techno-header-top .social-icons.text-right { justify-content: flex-end; } .techno-header-top .social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #fff; font-size: 13px; opacity: .9; transition: opacity .25s ease; } .techno-header-top .social-icons a:hover { opacity: 1; } .th-header, .techno-main-menu { background: transparent; } .techno_nav_area, .th-header .sticky-wrapper, .th-header { background: #fff; } .sticky-wrapper.sticky, .techno_nav_area.prefix { box-shadow: 0 2px 15px rgba(0, 0, 0, .08); } .techno_nav_area .row, .th-header .menu-area .row { min-height: 90px; } .logo img, .header-logo img { max-height: 42px; } .techno_menu, .main-menu { font-family: var(--title-font); } .techno_menu > ul, .main-menu > ul { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .techno_menu > ul > li, .main-menu > ul > li { position: relative; } .techno_menu > ul > li > a, .main-menu > ul > li > a { display: block; padding: 32px 16px; color: var(--title-color) !important; font-weight: 600; font-size: 16px; } .techno_menu > ul > li > a:hover, .techno_menu > ul > li.menu-item-has-children:hover > a, .main-menu > ul > li > a:hover { color: var(--dream-color-primary) !important; } .techno_menu ul.sub-menu, .main-menu ul.sub-menu { position: absolute; top: 100%; left: 0; width: 254px; margin: 0; padding: 8px 0; list-style: none; background: #fff; border-top: 2px solid var(--dream-color-primary); box-shadow: 0 20px 40px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease; z-index: 90; } .techno_menu > ul > li:hover > ul.sub-menu, .main-menu > ul > li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .techno_menu ul.sub-menu li a, .main-menu ul.sub-menu li a { display: block; padding: 10px 22px; color: var(--title-color) !important; font-size: 15px; font-weight: 500; transition: all .2s ease; } .techno_menu ul.sub-menu li a:hover, .main-menu ul.sub-menu li a:hover { background: var(--dream-color-primary); color: #fff !important; padding-left: 28px; } .header-button, .donate-btn-header { display: flex; align-items: center; gap: 14px; } .th-menu-toggle { background: var(--dream-color-primary); color: #fff; width: 46px; height: 46px; border-radius: 6px; border: none; display: inline-flex; align-items: center; justify-content: center; } /* meniu mobil off-canvas (.th-menu-wrapper) — recolorat Techno */ .th-menu-wrapper { background: #0A0E1B; } .th-menu-wrapper .th-menu-toggle { background: var(--dream-color-primary); } .th-mobile-menu ul li a { font-family: var(--title-font); font-weight: 600; } .th-mobile-menu ul li a:hover { color: var(--dream-color-primary); } /* 8) SECTIUNE PROCES — cercuri numerotate + linie punctata */ .process-area { background-color: #0A0E1B; } .process-wrapper { position: relative; } .process-item .box-wrapp { display: flex; align-items: center; gap: 24px; } .process-item .box-num { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--dream-color-primary); color: #fff; font-family: var(--title-font); font-weight: 700; font-size: 13px; text-align: center; line-height: 1.15; } .process-item .box-num .number { display: block; font-size: 20px; } .process-item:not(:last-child) { position: relative; } .process-item:not(:last-child):after { content: ""; position: absolute; left: 32px; top: 64px; bottom: -50px; border-left: 2px dashed rgba(255, 255, 255, .25); } .process-item .box-content .box-title { color: #fff; margin-bottom: 6px; font-size: 20px; } .process-item .box-content .box-text { color: #9AA1B4; margin: 0; } .process-item .box-img img { border-radius: 10px; } /* 9) CTA bandă albastră (download-area / cta-area2) */ .download-area, .cta-area2 { background: var(--dream-color-primary) !important; border-radius: 20px; position: relative; overflow: hidden; } .download-area *, .cta-area2 * { color: #fff; } .download-area .sec-title, .cta-area2 .sec-title, .download-area h2, .cta-area2 h2 { color: #fff !important; } .download-area .sub-title, .cta-area2 .sub-title { color: #fff !important; } .download-area .title-area:before, .cta-area2 .title-area:before { background: #fff; } .download-area .sub-title:after, .cta-area2 .sub-title:after { background: rgba(255, 255, 255, .35); } .download-area .th-btn, .cta-area2 .th-btn { background: #fff !important; color: var(--dream-color-primary) !important; } .download-area .th-btn:before, .cta-area2 .th-btn:before { background: #0A0E1B; } .download-area .th-btn:hover, .cta-area2 .th-btn:hover { color: #fff !important; } .download-area .th-btn .icon img, .cta-area2 .th-btn .icon img { filter: none; } .download-area .th-btn:hover .icon img, .cta-area2 .th-btn:hover .icon img { filter: brightness(0) invert(1); } /* 10) FAQ / ACCORDION */ .accordion-card { background: #fff; border: 1px solid var(--th-border-color) !important; margin-bottom: 16px; overflow: hidden; } .accordion-card .accordion-button { font-family: var(--title-font); font-weight: 700; font-size: 18px; color: var(--title-color); padding: 20px 26px; background: #fff; } .accordion-card .accordion-button:not(.collapsed) { color: var(--dream-color-primary); background: var(--smoke-color); } .accordion-card .accordion-button:after { background-color: var(--dream-color-primary); border-radius: 50%; color: #fff; } .accordion-card .accordion-body { padding: 0 26px 22px; } .accordion-card .faq-text { color: var(--body-color); } /* 11) FORMULARE — border #ebebeb, placeholder #b1b1b1 (tokens Techno) */ .contact-area { -webkit-mask-image: none !important; mask-image: none !important; border-radius: 20px !important; background: #ffffff !important; border: 1px solid var(--th-border-color); box-shadow: 0 10px 40px rgba(15, 23, 42, .06); } .contact-form .form-group { margin-bottom: 18px; } .contact-form .form-group > label { display: block; font-family: var(--title-font); font-weight: 700; font-size: 13.5px; color: var(--title-color); margin-bottom: 6px; } .contact-form .req { color: var(--dream-color-primary); } .contact-form .form-control, .contact-form .form-select, .contact-form textarea.form-control { display: block; width: 100%; background: #ffffff; border: 1px solid var(--dream-border); padding: 12px 14px; font-family: var(--body-font); font-size: 15px; color: var(--title-color); line-height: 1.5; height: auto; transition: border-color .2s ease, box-shadow .2s ease; } .contact-form .form-control::placeholder, .contact-form textarea.form-control::placeholder { color: var(--dream-placeholder); } .contact-form .form-control:focus, .contact-form .form-select:focus, .contact-form textarea.form-control:focus { border-color: var(--dream-color-primary); box-shadow: 0 0 0 3px rgba(12, 90, 219, .12); outline: none; } .contact-form textarea.form-control { min-height: 120px; resize: vertical; } .contact-form .form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } .contact-form .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 991px) { .contact-form .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .contact-form .services-grid { grid-template-columns: 1fr; } } .contact-form .service-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; background: #ffffff; border: 1px solid var(--dream-border); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--title-color); cursor: pointer; transition: border-color .2s ease, background .2s ease; } .contact-form .service-check:hover { border-color: var(--dream-color-primary); background: var(--smoke-color); } .contact-form .service-check input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; accent-color: var(--dream-color-primary); margin: 0; cursor: pointer; } .contact-form .gdpr-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; font-weight: 500; color: var(--body-color); cursor: pointer; line-height: 1.5; } .contact-form .gdpr-check input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin-top: 2px; accent-color: var(--dream-color-primary); cursor: pointer; } .contact-form .form-btn { margin-top: 6px; } /* 12) PRICING — .price-card (pachete.html) — radius 10px, border subtire */ .price-card { padding: 40px 32px; height: 100%; display: flex; flex-direction: column; text-align: center; position: relative; background: #fff; border: 1px solid var(--th-border-color); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .price-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(12, 90, 219, .12); } .price-card .pkg-name { font-family: var(--title-font); font-weight: 700; letter-spacing: 2px; color: var(--dream-color-primary); font-size: 14px; text-transform: uppercase; } .price-card .pkg-price { font-family: var(--title-font); font-size: 2.2rem; font-weight: 800; color: var(--title-color); margin: 10px 0 14px; line-height: 1.1; } .price-card .pkg-per { font-size: 1rem; font-weight: 500; color: var(--body-color); } .price-card .pkg-desc { color: var(--body-color); flex: 1 1 auto; margin-bottom: 22px; } .price-card .pkg-list { text-align: left; list-style: none; padding: 0; margin: 0 0 22px; flex: 1 1 auto; } .price-card .pkg-list li { position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--body-color); font-size: .98rem; line-height: 1.5; } .price-card .pkg-list li:before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--dream-color-primary); font-weight: 700; } .price-card .th-btn { align-self: center; } .price-card.popular { border-color: var(--dream-color-primary); box-shadow: 0 16px 34px rgba(12, 90, 219, .16); } .price-card .pkg-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--dream-color-primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 6px 18px; border-radius: 30px; box-shadow: 0 6px 16px rgba(12, 90, 219, .3); } /* 13) TRUST CARDS — folosite ca "4 carduri feature" peste marginea hero-ului */ .trust-area { background: transparent; position: relative; z-index: 3; padding: 50px 0 20px; } .trust-card { display: flex; align-items: flex-start; gap: 16px; height: 100%; background: #ffffff; border: 1px solid var(--th-border-color); padding: 26px 22px; box-shadow: 0 14px 34px rgba(15, 23, 42, .09); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .trust-card:hover { transform: translateY(-4px); border-color: var(--dream-color-primary); box-shadow: 0 18px 40px rgba(12, 90, 219, .14); } .trust-icon { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--smoke-color); color: var(--dream-color-primary); font-size: 22px; } .trust-title { font-family: var(--title-font); font-size: 1.05rem; font-weight: 700; color: var(--title-color); margin: 0 0 5px; line-height: 1.3; } .trust-text { font-size: .92rem; line-height: 1.55; color: var(--body-color); margin: 0; } /* 14) "De ce noi" — feature-grid3 */ .why-area { background: var(--smoke-color); } .why-area .feature-grid3 { background: #ffffff !important; border: 1px solid var(--th-border-color); border-bottom: 3px solid transparent; box-shadow: 0 4px 18px rgba(15, 23, 42, .05); padding: 34px 30px; height: 100%; border-radius: 10px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .why-area .feature-grid3:hover { border-color: var(--th-border-color); border-bottom-color: var(--dream-color-primary); box-shadow: 0 14px 30px rgba(12, 90, 219, .12); transform: translateY(-4px); } .why-area .feature-grid3 .box-icon { width: 64px; height: 64px; line-height: 64px; background: var(--smoke-color); border-radius: 10px; margin-bottom: 22px; } .why-area .feature-grid3 .box-icon img { width: 30px; height: 30px; object-fit: contain; } .why-area .feature-grid3 .box-title { font-family: var(--title-font); font-size: 1.2rem; font-weight: 700; color: var(--title-color); line-height: 1.3; margin-bottom: 10px; } .why-area .feature-grid3 .box-text { font-size: .98rem; line-height: 1.65; color: var(--body-color); } /* 14b) Colaj foto sectiunea "Despre" — cerc albastru decorativ (ca in demo) */ .img-box1:before { content: ""; position: absolute; left: -40px; bottom: -40px; width: 220px; height: 220px; border-radius: 50%; background: var(--dream-color-primary); opacity: .12; z-index: 0; } .img-box1 .img1 { position: relative; z-index: 1; } /* 15) HERO — fundal Techno + overlay lizibil */ .hero-style1 { position: relative; padding: 56px 48px 84px; border-radius: 20px; overflow: hidden; background-size: cover; background-position: center; } .hero-style1:before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(10, 14, 27, .92) 0%, rgba(10, 14, 27, .74) 55%, rgba(12, 90, 219, .55) 100%); z-index: 0; } .hero-style1 > * { position: relative; z-index: 1; } .hero-style1 .hero-title, .hero-style1 .hero-text { color: #ffffff !important; } .hero-style1 .sub-title { color: #fff !important; } .hero-style1 .sub-title:after { background: rgba(255, 255, 255, .35); } .hero-card { position: relative; overflow: hidden; border-radius: 10px; } .hero-card:before { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 27, .62); z-index: 0; } .hero-card .media-body { position: relative; z-index: 1; } .hero-card .box-text { color: #ffffff !important; margin: 0; font-weight: 600; } .hero-video video { display: none !important; } .hero-video img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; border-radius: 20px; display: block; } /* marquee text sub hero — Techno "text defilant" */ .techno-marquee { position: relative; overflow: hidden; white-space: nowrap; display: block; width: 100%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 12px 0; margin-top: 26px; } .techno-marquee-text { display: inline-block; padding-left: 100%; color: #fff; font-weight: 700; letter-spacing: 2px; font-size: 13px; white-space: nowrap; animation: techno-marquee 16s linear infinite; } @keyframes techno-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* shape-uri decorative Techno (hue neutru, nu se mai roteste spre mov) */ img[src*="/techno/img/"] { max-width: 100%; } /* 16) BREADCRUMB pagini interioare */ .breadcumb-wrapper { background-color: var(--black-color2); padding: 130px 0 90px; } .breadcumb-wrapper:before { background: linear-gradient(0deg, rgba(10, 14, 27, .82), rgba(12, 90, 219, .55)); } .breadcumb-title { font-family: var(--title-font); } .breadcumb-menu li, .breadcumb-menu a, .breadcumb-menu span { font-family: var(--body-font); } /* 17) FOOTER — navy Techno + coloane */ /* 17a) varianta noua (partial Techno: .site-footer) */ .site-footer { background-color: #0A0E1B; background-size: cover; background-position: center; padding-top: 80px; } .site-footer .footer-widgets-area { padding-bottom: 40px; } .site-footer .footer-about .about-text { color: var(--footer-text); margin: 18px 0 20px; } .site-footer .elementor-social-icons-wrapper { display: flex; gap: 10px; } .site-footer .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--footer-social-bg); color: #fff; font-size: 14px; transition: background .25s ease; } .site-footer .social-icon:hover { background: var(--dream-color-primary); } .site-footer .widget-title { color: #fff; font-size: 21px; font-weight: 700; margin-bottom: 24px; } .site-footer .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; } .site-footer .elementor-icon-list-items li { margin-bottom: 12px; } .site-footer .elementor-icon-list-items a { color: var(--footer-text); font-size: 15px; display: inline-flex; align-items: center; gap: 8px; } .site-footer .elementor-icon-list-items a:hover { color: #fff; } .site-footer .elementor-icon-list-items .flaticon { font-size: 11px; } .site-footer .icon-box.style1 { display: flex; gap: 12px; margin-bottom: 16px; } .site-footer .icon-box .icon-box-content h2 { font-size: 15px; color: #fff; margin: 0 0 2px; } .site-footer .icon-box .icon-box-content p { color: var(--footer-text); margin: 0; font-size: 14.5px; } .site-footer .footer-bottom { border-top: 1px solid var(--footer-border); padding: 22px 0; margin-top: 20px; } .site-footer .copyright-text { color: var(--footer-text); margin: 0; font-size: 14.5px; } .site-footer .footer-links, .footer-wrapper .footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; justify-content: flex-end; } @media (max-width: 767px) { .site-footer .footer-links, .footer-wrapper .footer-links { justify-content: center; } } .site-footer .footer-links li, .footer-wrapper .footer-links li { padding-right: 0 !important; margin-right: 0 !important; } .site-footer .footer-links li:after, .footer-wrapper .footer-links li:after { display: none !important; content: none !important; } .site-footer .footer-links a { color: var(--footer-text); font-size: 14.5px; } .site-footer .footer-links a:hover { color: #fff; } /* 17b) varianta veche (markup Aior existent: .footer-wrapper) — pastrata pentru compatibilitate daca vreo pagina inca o foloseste */ .footer-wrapper { background-color: #0A0E1B; background-image: none !important; } .footer-wrapper .widget_title { color: #fff; font-size: 21px; } .footer-wrapper .about-text { color: var(--footer-text); } .footer-wrapper .menu li a { color: var(--footer-text); } .footer-wrapper .menu li a:hover { color: #fff; } .footer-wrapper .th-social a { background: var(--footer-social-bg); border-color: transparent; } .footer-wrapper .th-social a:hover { background: var(--dream-color-primary); } .footer-wrapper .copyright-wrap { border-top: 1px solid var(--footer-border); } .footer-wrapper .copyright-text, .footer-wrapper .copyright-text a { color: var(--footer-text); } .footer-wrapper .footer-links a { color: var(--footer-text); } .footer-wrapper .footer-links a:hover { color: #fff; } /* 18) Sidebar pagini de serviciu (pentru cele 8 pagini din agentul paralel — clase asteptate: .service-sidebar / .service-list / .service-sidebar .cta-card) */ .service-sidebar .service-list { list-style: none; margin: 0 0 24px; padding: 0; } .service-sidebar .service-list li { margin-bottom: 8px; } .service-sidebar .service-list a { display: block; padding: 14px 20px; background: var(--smoke-color); color: var(--title-color); font-weight: 600; border-radius: 8px; transition: all .25s ease; } .service-sidebar .service-list a:hover, .service-sidebar .service-list li.active a { background: var(--dream-color-primary); color: #fff; } .service-sidebar .cta-card { background: var(--dream-color-primary); color: #fff; border-radius: 10px; padding: 32px 26px; } .service-sidebar .cta-card h3, .service-sidebar .cta-card p { color: #fff; } .service-sidebar .cta-card .th-btn { background: #fff !important; color: var(--dream-color-primary) !important; } .service-sidebar .cta-card .th-btn:before { background: #0A0E1B; } .service-sidebar .cta-card .th-btn:hover { color: #fff !important; } /* 19) Opriri animatii de intro / elemente fara suport (mostenite) */ #preloader, .preloader, .preloader-bg, .loader-wrapper, .mouseCursor { display: none !important; } .wow { visibility: visible !important; opacity: 1 !important; animation: none !important; } [class*="text-anime"], [class*="text-anime"] * { opacity: 1 !important; transform: none !important; } .char, .word, .line { opacity: 1 !important; transform: none !important; } .spin { animation: none !important; } /* 20) Preturi pe paginile de serviciu: badge „Recomandat”, randul de operare lunara din card si nota de sub carduri (adaugat, nu modifica regulile de mai sus) */ .tsx-price.tsx-price--featured { border-color: var(--tsx-primary); } .tsx-price-badge { position: absolute; top: 0; right: 0; z-index: 2; padding: 6px 16px; border-bottom-left-radius: 8px; background: var(--tsx-primary); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .tsx-price-op { margin: -10px 0 18px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--tsx-muted); } .tsx-note.tsx-pricing-note { max-width: 940px; margin: 34px auto 0; font-weight: 400; font-size: 16px; line-height: 1.7; }