/* * iconta-modern.css * Design comun "Light SaaS minimal" pentru paginile publice iconta.ro * (welcome.html + paginile din secțiunea publică: deconturi-de-cheltuieli, * completare-deconturi-de-cheltuieli, calculator-diurna, termeniSiConditii, * politica-de-confidentialitate, mentenanta). * * Override peste landing/css/style.css (INSPINIA / Bootstrap 3) — trebuie * inclus DUPĂ style.css în . Nu modifica style.css (e partajat de * mai multe pagini); orice ajustare de temă vine aici. */ :root { --teal: #1ab394; --teal-dark: #0f9c80; --teal-darker: #0c7d67; --ink: #0f172a; --ink-soft: #475569; --radius: 14px; --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06); --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.10); --shadow-lg: 0 18px 38px rgba(15, 23, 42, 0.14); } body { font-family: 'Inter', 'Open Sans', helvetica, arial, sans-serif; } h1, h2, h3, h4 { font-family: 'Inter', 'Open Sans', helvetica, arial, sans-serif; } /* Lizibilitate text de secțiune */ section p, section ul { color: var(--ink-soft); font-size: 16px; line-height: 1.7; } section h1 { font-weight: 700; color: var(--ink); } .comments-avatar img { width: auto; height: 42px; border-radius: 0; margin-right: 10px; } /* ===== HERO — light, minimal ===== */ #hero_container { background: #ffffff; color: var(--ink); font-family: 'Inter', "Whitney A", "Whitney B", "Avenir", Helvetica, sans-serif; overflow: hidden; } .register { padding-top: 150px; padding-bottom: 50px; max-width: 1430px; } .register_info { max-width: 750px; margin: 0 auto; } #hero_container h1, #hero_container h1.lg { font-weight: 800; letter-spacing: -1.5px; color: var(--ink); } #hero_container h3 { font-weight: 400; color: var(--ink-soft); } /* Săgeata roșie CTA — eliminată din design */ .arrowCta, .spacerArrowCta { display: none; } /* ===== BUTOANE CTA — solide, proeminente, fără gradient ===== */ .btn-primary { background: var(--teal); border: 2px solid var(--teal); border-radius: 10px; font-weight: 700; font-size: 19px; padding: 16px 34px; box-shadow: 0 10px 24px rgba(26, 179, 148, 0.30); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .btn-primary:hover, .btn-primary:focus { background: var(--teal-darker); border-color: var(--teal-darker); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(26, 179, 148, 0.38); color: #fff; } .btn-primary:active, .btn-primary.active { transform: translateY(0); } /* Butonul Login din hero devine CTA secundar (identificat stabil prin href, nu prin poziție) */ .register a.btn-primary[href="index.html"] { background: #ffffff; color: var(--teal-darker); border: 2px solid #d7ece6; box-shadow: none; } .register a.btn-primary[href="index.html"]:hover { background: #f0faf7; border-color: var(--teal); color: var(--teal-darker); box-shadow: var(--shadow-sm); } .btn-pricing { box-shadow: var(--shadow-sm); } /* ===== NAVBAR — text închis, lizibil pe hero alb ===== */ .navbar-default { background-color: rgba(255, 255, 255, 0.9); border-bottom: 1px solid #e7eaec; } .navbar-default.navbar-scroll { background-color: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-md); } .navbar-default .nav li a, .navbar-default .navbar-nav > li > a { font-weight: 600; color: var(--ink) !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: var(--teal) !important; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover { border-top-color: var(--teal); color: var(--ink) !important; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { background: url('../img/cdilogo-l.svg') 0px 20px/113.1px 15px no-repeat; } /* Dropdown "Despre deconturi și diurne" — fond alb (era teal) */ .navbar-default .navbar-nav > li > .dropdown-menu { background-color: #ffffff; border: 1px solid #e7eaec; border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; margin-top: 8px; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a { color: var(--ink); border-radius: 6px; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus { color: var(--teal); background-color: #f0faf7; } .navbar-default .navbar-nav > li > .dropdown-menu > li.divider { background-color: #eef2f5; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: var(--teal); background-color: #f0faf7; } @media (max-width: 767px) { .navbar-default { background-color: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-md); } .navbar-default .navbar-nav > li > a { color: var(--ink) !important; } .navbar-default .navbar-nav > li > .dropdown-menu { box-shadow: none; border: none; } } /* ===== CARDURI FEATURES / SERVICES — minimal, umbre fine ===== */ .features .col-md-4 > div { background: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 32px 26px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .features .col-md-4 > div:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* * Cardurile se aplică DOAR pe secțiunea marcată cu .services-cards (welcome.html). * Fără marker, selectorul prindea și coloanele de formular / sidebar-ul Cuprins din * calculator-diurna.html și deconturi-de-cheltuieli.html; z-index: 0 crea stacking * context și popup-urile uib-datepicker rămâneau sub cardurile următoare. * * .services-cards .col-sm-4 nu are un div-wrapper intern (spre deosebire de .features * .col-md-4 > div), așa că fundalul cardului nu poate fi pus direct pe coloana * Bootstrap — ar consuma gutter-ul propriu al coloanei (padding 15px) și * cardurile adiacente s-ar atinge. Folosim un ::before absolut, retras de la * marginile coloanei, ca să păstrăm un gutter vizibil între carduri. */ .services-cards .col-sm-4 { position: relative; padding: 32px 26px; margin-bottom: 24px; z-index: 0; } .services-cards .col-sm-4::before { content: ""; position: absolute; top: 0; right: 12px; bottom: 0; left: 12px; background: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; z-index: -1; } .services-cards .col-sm-4:hover::before { transform: translateY(-4px); box-shadow: var(--shadow-md); } .features-icon { font-size: 34px; color: var(--teal); } .navy-line { background: var(--teal); height: 3px; border: none; border-radius: 3px; } /* ===== PRICING ===== */ .pricing-plan.selected { box-shadow: var(--shadow-lg); border-radius: var(--radius); overflow: hidden; } li.pricing-title { background: var(--teal); border-radius: 0; } /* ===== ECHIPĂ / CONTACT ===== */ .team-member img { box-shadow: var(--shadow-md); border: 4px solid #ffffff; } .social-icon a { background: var(--teal); } .social-icon a:hover { background: var(--teal-darker); } .gray-section { background: #f8fafc; }