/* ========================================================================== 1. PUNTEAZĂ ACEST BLOC NOU DIRECT AICI (LA ÎNCEPUTUL FIȘIERULUI) ========================================================================== */ @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; font-display: swap !important; src: url('../webfonts/fa-solid-900.woff2?v=34a040') format('woff2'); } @font-face { font-family: 'Font Awesome 5 Brands'; font-style: normal; font-weight: 400; font-display: swap !important; src: url('../webfonts/fa-brands-400.woff2?v=34a040') format('woff2'); } @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 400; font-display: swap !important; src: url('../webfonts/fa-regular-400.woff2?v=34a040') format('woff2'); } /* ========================================================================== CUSTOM.CSS RESTRUCTURAT - V2 DEDUPLICARE CONTROLATA Joomla 6 + Helix Ultimate + SP Page Builder Pro - pastreaza comportamentul validat in V1; - centralizeaza variabilele globale; - elimina dubluri istorice confirmate pentru tipografie, butoane si documente; - pastreaza intacta ordinea functionala Mega Menu / Offcanvas; - acordeoanele SPPB sunt globale pe pagini, fara suport special prin module. ========================================================================== */ :root { /* Brand / fonturi */ --font-principal: 'Gotham', 'Helvetica Neue', Arial, sans-serif; --font-secundar: Arial, sans-serif; --color-violet: #613393; --color-gri: #58595B; --color-text-main: #334155; --color-rosu: #E7004C; --color-albastru: #004085; --color-albastru-s2: #009ADE; /* Tipografie UI */ --ui-font-main: 'Gotham', 'Helvetica Neue', Arial, sans-serif; --ui-text-size: 15px; --ui-text-weight: 400; --ui-text-line-height: 1.65; --ui-text-color: #334155; --ui-strong-color: #0f172a; --ui-h1-size: 32px; --ui-h1-weight: 700; --ui-h1-color: #58595B; --ui-h2-size: 26px; --ui-h2-weight: 700; --ui-h2-color: #58595B; --ui-h3-size: 21px; --ui-h3-weight: 600; --ui-h3-color: #58595B; --ui-h4-size: 18px; --ui-h4-weight: 600; --ui-h4-color: #58595B; --ui-content-link-size: 13px; --ui-content-link-weight: 600; --ui-content-link-color: #1d4ed8; --ui-pdf-color: #d32f2f; --ui-word-color: #185abd; --ui-document-icon-size: 24px; /* Premium surfaces */ --ps4-violet: #613393; --ps4-violet-dark: #47236F; --ps4-mauve: #8C6BA8; --ps4-text: #34313A; --ps4-text-soft: #625D68; --ps4-white: #FFFFFF; --ps4-surface: #FCFBFD; --ps4-border: rgba(71, 35, 111, 0.10); --ps4-border-hover: rgba(97, 51, 147, 0.25); --ps4-shadow: 0 2px 8px rgba(42, 28, 55, 0.025), 0 12px 30px rgba(42, 28, 55, 0.045); --ps4-shadow-hover: 0 6px 14px rgba(42, 28, 55, 0.035), 0 18px 42px rgba(42, 28, 55, 0.075); --ps4-radius: 11px; --ps4-radius-card: 15px; --ps4-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Acordeoane SPPB */ --acc-violet: #613393; --acc-violet-dark: #47236F; --acc-orange: #EE7623; --acc-grey: #58595B; --acc-radius: 24px; --acc-radius-mobile: 16px; --acc-spring: cubic-bezier(.34, 1.65, .64, 1); --acc-smooth: cubic-bezier(.2, 1, .2, 1); --acc-shadow: 0 4px 12px -2px rgba(97, 51, 147, .02), 0 16px 36px -6px rgba(42, 28, 55, .04); --acc-shadow-active: 0 22px 50px -12px rgba(97, 51, 147, .14), 0 45px 90px -18px rgba(42, 28, 55, .15); } /* ========================================================================== TIPOGRAFIE LISTARI / CARDURI JOOMLA ========================================================================== */ .article-introtext, .article-introtext p, .article-introtext span, .article-introtext div, div[itemprop="blogPost"] p, div[itemprop="blogPost"] span, .joomla-wow-card p, .joomla-wow-card span, .joomla-wow-card li, .joomla-wow-card div:not(.image-wrapper) { font-family: var(--font-principal) !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--color-text-main); } .article-introtext strong, .joomla-wow-card strong { font-weight: 700 !important; color: #0f172a !important; } .article-introtext p { margin-bottom: 16px !important; } /* ========================================================================== MENIU PRINCIPAL DESKTOP (Helix Ultimate) ========================================================================== */ /* Tranziție fluidă universală pentru interacțiuni curate */ .sp-megamenu-parent li a, .sp-megamenu-parent li span, .offcanvas-inner .menu li a, .offcanvas-body .menu li a { transition: color 0.25s ease-in-out, padding-left 0.25s ease-in-out, background-color 0.25s ease-in-out, border 0.25s ease-in-out, box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out !important; } .sp-megamenu-parent > li { overflow: visible !important; } /* Stiluri butoane normale (Exclude ultimul buton de programări) */ .sp-megamenu-parent > li:not(:last-child) > a { position: relative !important; display: block !important; padding-bottom: 14px !important; font-size: 14px !important; padding-left: 4px !important; padding-right: 4px !important; line-height: 1.4 !important; } /* Efect mouseover elemente meniu principal */ .sp-megamenu-parent > li:not(:last-child):hover > a, .sp-megamenu-parent > li:not(:last-child):hover > span { color: var(--color-albastru) !important; background-color: rgba(0, 64, 133, 0.05) !important; border-radius: 4px; } /* Linia animată de sub butoane la hover */ .sp-megamenu-parent > li:not(:last-child) > a::after { content: '' !important; position: absolute !important; width: 80% !important; height: 3px !important; bottom: 2px !important; left: 10% !important; background-color: var(--color-albastru) !important; transform: scaleX(0) !important; transform-origin: bottom center !important; transition: transform 0.25s ease-in-out !important; z-index: 999 !important; } .sp-megamenu-parent > li:not(:last-child):hover > a::after { transform: scaleX(1) !important; } /* ========================================================================== BUTOANE EXCLUSIV: PROGRAMĂRI ONLINE (Desktop & Offcanvas) ========================================================================== */ /* Varianta Desktop */ .sp-megamenu-parent > li.sp-menu-item:last-child { display: inline-flex !important; align-items: center !important; margin-left: 14px !important; } .sp-megamenu-parent > li.sp-menu-item:last-child > a { border: 1px solid var(--color-rosu) !important; border-radius: 99px !important; padding: 8px 14px !important; color: #ffffff !important; background-color: var(--color-rosu) !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1 !important; text-transform: uppercase !important; transition: all 0.3s ease !important; } .sp-megamenu-parent > li.sp-menu-item:last-child:hover > a { border-color: var(--color-violet) !important; background-color: var(--color-violet) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(97, 51, 147, 0.25) !important; transform: translateY(-1px) !important; } .sp-megamenu-parent > li.sp-menu-item:last-child > a::after { display: none !important; } /* Varianta Mobil (Meniu Offcanvas) */ .offcanvas-menu .offcanvas-inner ul.menu > li:last-child { margin-top: 15px !important; margin-bottom: 15px !important; list-style: none !important; display: block !important; } .offcanvas-menu .offcanvas-inner ul.menu > li:last-child > a, .offcanvas-menu .offcanvas-inner ul.menu > li:last-child > span { display: inline-block !important; border: 1px solid var(--color-rosu) !important; border-radius: 99px !important; padding: 10px 20px !important; color: #ffffff !important; background-color: var(--color-rosu) !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1 !important; text-transform: uppercase !important; transition: all 0.3s ease !important; text-align: center !important; } .offcanvas-menu .offcanvas-inner ul.menu > li:last-child:hover > a, .offcanvas-menu .offcanvas-inner ul.menu > li:last-child:hover > span { border-color: var(--color-violet) !important; background-color: var(--color-violet) !important; color: #ffffff !important; text-decoration: none !important; } .offcanvas-menu .offcanvas-inner ul.menu > li:last-child a::after, .offcanvas-menu .offcanvas-inner ul.menu > li:last-child span::after { display: none !important; } /* ========================================================================== STRUCTURĂ IERARHICĂ ȘI SUBMENIURI MEGAMENU (Dropdown Desktop) ========================================================================== */ .sp-dropdown-inner { overflow: visible !important; } /* Linii separatoare între coloane megameniu */ .sp-megamenu-parent .sp-dropdown-inner .row > div:not(:first-child), .sp-megamenu-parent .sp-dropdown-inner [class*="col-"]:not(:first-child), .sp-megamenu-parent .sp-dropdown-inner .sp-mega-row > div:not(:first-child) { border-left: 1px solid rgba(0, 0, 0, 0.12) !important; padding-left: 20px !important; margin-left: 0 !important; } /* Nivelul 2: Stil pastilă albastră generală */ .sp-megamenu-parent .sp-dropdown li > a, .sp-megamenu-parent .sp-dropdown li > span, .sp-megamenu-parent .sp-dropdown-inner .sp-mega-group-title > a, .sp-megamenu-parent .sp-dropdown-inner .sp-mega-group-title > span, .sp-megamenu-parent .sp-dropdown-inner h2 > a, .sp-megamenu-parent .sp-dropdown-inner h3 > a, .sp-megamenu-parent .sp-dropdown-inner .sp-mega-group-child > li > a, .sp-megamenu-parent .sp-dropdown-inner ul > li > a { color: var(--color-albastru) !important; font-weight: 400 !important; padding: 8px 12px !important; display: block !important; border-radius: 4px !important; margin-bottom: 6px !important; background-color: rgba(0, 64, 133, 0.03) !important; border-left: 3px solid transparent !important; } /* Evidențiere Nivel 2 care are subcategorii (Linie roșie verticală în stânga) */ .sp-megamenu-parent .sp-dropdown li.sp-has-child > a, .sp-megamenu-parent .sp-dropdown li.sp-has-child > span, .sp-megamenu-parent .sp-dropdown-inner div:has(> .sp-mega-group-child) .sp-mega-group-title > a, .sp-megamenu-parent .sp-dropdown-inner div:has(> .sp-mega-group-child) .sp-mega-group-title > span, .sp-megamenu-parent .sp-dropdown-inner div:has(> ul) h2 > a, .sp-megamenu-parent .sp-dropdown-inner div:has(> ul) h3 > a, .sp-megamenu-parent .sp-dropdown-inner li.sp-has-child > a, .sp-megamenu-parent .sp-dropdown-inner li.sp-has-child > span { font-weight: 700 !important; border-left: 3px solid var(--color-rosu) !important; padding-left: 14px !important; position: relative !important; } /* Indicator săgeată dreapta ❯ doar pentru părinții cu copii */ .sp-megamenu-parent .sp-dropdown li.sp-has-child > a::after, .sp-megamenu-parent .sp-dropdown-inner div:has(> .sp-mega-group-child) .sp-mega-group-title > a::after, .sp-megamenu-parent .sp-dropdown-inner div:has(> ul) h2 > a::after, .sp-megamenu-parent .sp-dropdown-inner div:has(> ul) h3 > a::after, .sp-megamenu-parent .sp-dropdown-inner li.sp-has-child > a::after { content: '❯' !important; position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 10px !important; color: var(--color-rosu) !important; font-weight: bold !important; } /* Hover izolat Nivel 2 -> Schimbare în pastilă violet */ .sp-megamenu-parent .sp-dropdown li > a:hover, .sp-megamenu-parent .sp-dropdown li > span:hover, .sp-megamenu-parent .sp-dropdown-inner .sp-mega-group-title > a:hover, .sp-megamenu-parent .sp-dropdown-inner .sp-mega-group-title > span:hover, .sp-megamenu-parent .sp-dropdown-inner h2 > a:hover, .sp-megamenu-parent .sp-dropdown-inner h3 > a:hover, .sp-megamenu-parent .sp-dropdown-inner li.sp-has-child > a:hover, .sp-megamenu-parent .sp-dropdown-inner li.sp-has-child > span:hover { color: var(--color-violet) !important; background-color: rgba(97, 51, 147, 0.08) !important; border-left-color: var(--color-violet) !important; padding-left: 17px !important; } /* Nivelul 3: Subcategorii secundare (Dropdown clasic și Megamenu) */ .sp-megamenu-parent .sp-dropdown > li > ul > li > a, .sp-megamenu-parent .sp-dropdown-inner .sp-mega-group-child > li > a, .sp-megamenu-parent .sp-dropdown-inner .sppagebuilder ul > li > a, .sp-megamenu-parent .sp-dropdown-inner li.sp-has-child > ul > li > a { font-weight: 400 !important; color: #555555 !important; padding-left: 12px !important; padding-top: 6px !important; padding-bottom: 6px !important; font-size: 13px !important; background-color: rgba(0, 0, 0, 0.015) !important; display: block !important; margin-bottom: 3px !important; border-radius: 4px !important; border-left: 2px solid transparent !important; position: relative !important; } .sp-megamenu-parent .sp-dropdown > li > ul > li > a::after, .sp-megamenu-parent .sp-dropdown-inner .sp-mega-group-child > li > a::after, .sp-megamenu-parent .sp-dropdown-inner li.sp-has-child > ul > li > a::after { display: none !important; } /* Hover Nivel 3 -> Schimbare în pastilă roz + linie roz */ .sp-megamenu-parent .sp-dropdown > li > ul > li > a:hover, .sp-megamenu-parent .sp-dropdown-inner .sp-mega-group-child > li > a:hover, .sp-megamenu-parent .sp-dropdown-inner .sppagebuilder ul > li > a:hover, .sp-megamenu-parent .sp-dropdown-inner li.sp-has-child > ul > li > a:hover { color: var(--color-rosu) !important; background-color: rgba(231, 0, 76, 0.05) !important; padding-left: 16px !important; border-left: 2px solid var(--color-rosu) !important; } /* Corecții specifice axate pe structura ierarhică "Transparență" */ .sp-dropdown-mega .sp-dropdown-sub { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; display: block !important; box-shadow: none !important; padding: 0 !important; border: none !important; background: transparent !important; margin-top: 4px !important; } .sp-dropdown-mega .sp-mega-group > .menu_item.item-header > a, .sp-dropdown-mega .sp-mega-group > li > .sp-group-title { color: var(--color-albastru) !important; font-weight: 700 !important; padding: 8px 12px 8px 14px !important; display: block !important; border-radius: 4px !important; margin-bottom: 8px !important; background-color: rgba(0, 64, 133, 0.03) !important; border-left: 3px solid var(--color-rosu) !important; position: relative !important; } .sp-dropdown-mega .sp-mega-group > .menu_item.item-header:has(.sp-mega-group-child) > a::after, .sp-dropdown-mega .sp-mega-group > li:has(.sp-mega-group-child) > .sp-group-title::after, .sp-dropdown-mega .sp-mega-group .item-header:has(ul) > a::after { content: '▼' !important; } .sp-dropdown-mega .sp-mega-group-child { display: block !important; padding-left: 16px !important; border-left: 2px solid rgba(0, 0, 0, 0.08) !important; margin: 4px 0 12px 12px !important; background: transparent !important; } /* Resetare elemente Nivel 2 care NU au sub-elemente (Fără bold, fără linie roșie) */ .sp-dropdown-mega .sp-mega-group > .menu_item.item-header:not(:has(.sp-mega-group-child)):not(:has(ul)) > a, .sp-dropdown-mega .sp-mega-group > li:not(:has(.sp-mega-group-child)):not(:has(ul)) > .sp-group-title { border-left: 3px solid transparent !important; padding-left: 12px !important; font-weight: 400 !important; } .sp-dropdown-mega .sp-mega-group > .menu_item.item-header:not(:has(.sp-mega-group-child)):not(:has(ul)) > a::after, .sp-dropdown-mega .sp-mega-group > li:not(:has(.sp-mega-group-child)):not(:has(ul)) > .sp-group-title::after { display: none !important; } /* ========================================================================== NIVEL 2 FARA SUBMENIU - EFECT INTERACTIV ========================================================================== */ /* Element normal, fara nivel 3 */ .sp-dropdown-mega .sp-mega-group > .menu_item.item-header:not(:has(.sp-mega-group-child)):not(:has(ul)) > a, .sp-dropdown-mega .sp-mega-group > li:not(:has(.sp-mega-group-child)):not(:has(ul)) > .sp-group-title, .sp-megamenu-parent .sp-dropdown li:not(.sp-has-child) > a { position: relative !important; cursor: pointer !important; color: var(--color-albastru) !important; border-left: 3px solid transparent !important; background-color: rgba(0, 64, 133, 0.03) !important; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease, transform 0.25s ease !important; } /* Hover doar pentru Nivel 2 fara Nivel 3 */ .sp-dropdown-mega .sp-mega-group > .menu_item.item-header:not(:has(.sp-mega-group-child)):not(:has(ul)) > a:hover, .sp-dropdown-mega .sp-mega-group > li:not(:has(.sp-mega-group-child)):not(:has(ul)) > .sp-group-title:hover, .sp-megamenu-parent .sp-dropdown li:not(.sp-has-child) > a:hover { color: var(--color-violet) !important; background-color: rgba(97, 51, 147, 0.08) !important; border-left-color: var(--color-violet) !important; padding-left: 17px !important; transform: translateX(2px) !important; } /* Nu afisam sageata, fiindca elementul nu are Nivel 3 */ .sp-dropdown-mega .sp-mega-group > .menu_item.item-header:not(:has(.sp-mega-group-child)):not(:has(ul)) > a::after, .sp-dropdown-mega .sp-mega-group > li:not(:has(.sp-mega-group-child)):not(:has(ul)) > .sp-group-title::after, .sp-megamenu-parent .sp-dropdown li:not(.sp-has-child) > a::after { display: none !important; } /* ========================================================================== SITUAȚIE PAGINĂ: ARTICOLE INDIVIDUALE & ASPECT CARDURI (DESKTOP) ========================================================================== */ body.view-article { background-color: #f0f7ff !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.view-article #sp-main-body, body.view-category #sp-main-body, body.view-featured #sp-main-body { padding-top: 10px !important; margin-top: 0 !important; } body.view-article #sp-component, body.view-category #sp-component, body.view-featured #sp-component { padding-top: 0px !important; margin-top: 0 !important; } /* Container principal desktop */ .com-content.view-article #sp-main-body .container { max-width: 65% !important; width: 65% !important; margin-left: auto !important; margin-right: auto !important; background-color: #ffffff !important; padding: 10px !important; border-radius: 10px !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; transition: box-shadow 260ms ease, transform 200ms ease; } .com-content.view-article #sp-main-body .container:hover { box-shadow: 0 10px 38px rgba(0,0,0,0.08) !important; transform: translateY(-1px); } .article-details { width: 100% !important; margin: 0 !important; } /* CARDUL TITLU (Desktop) */ .article-details .article-header { width: 95% !important; margin: 0 auto 20px auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; min-height: 120px !important; padding: 20px 40px 24px 40px !important; border-radius: 8px !important; position: relative !important; overflow: hidden !important; background: rgba(238, 245, 250, 0.6) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(31, 111, 178, 0.12) !important; box-shadow: 0 10px 30px rgba(31, 111, 178, 0.05) !important; } /* CARDUL CONȚINUT / CORP (Desktop) */ .article-details div[itemprop="articleBody"] { width: 95% !important; margin: 0 auto !important; position: relative !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid rgba(31, 111, 178, 0.1) !important; border-radius: 16px !important; padding: 20px 40px 40px 40px !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.02) !important; } .article-details .article-header::after { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 10px !important; background-color: var(--color-violet) !important; z-index: 3 !important; } .article-details .article-header::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(198, 222, 245, 0.25) 100%) !important; z-index: 0 !important; } .article-details div[itemprop="articleBody"]::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 5px !important; background-color: var(--color-rosu) !important; z-index: 2 !important; } .article-details div[itemprop="articleBody"] .sppb-row:first-of-type { margin-top: -5px !important; padding-top: 0 !important; } body.view-article #sp-main-body .container h1 { letter-spacing: 0.2px; color: #0b1a33; } body.view-article #sp-main-body .container h2, body.view-article #sp-main-body .container h3 { color: #102039; letter-spacing: 0.15px; } body.view-article #sp-main-body .container ul, body.view-article #sp-main-body .container ol { padding-left: 1.3em; } div[itemprop="articleBody"] ul { list-style-position: inside; } body.view-article #sp-main-body .container img { border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); display: block; max-width: 100%; height: auto; } /* ========================================================================== PAGINĂ: LISTĂ CATEGORIE ȘTIRI (Blog Layout) ========================================================================== */ .com-content-category-blog .article { position: relative !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid rgba(31, 111, 178, 0.1) !important; border-radius: 16px !important; padding: 20px !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.02) !important; transition: all 0.4s ease !important; margin-bottom: 40px !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; } .com-content-category-blog .article:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 40px rgba(31, 111, 178, 0.08) !important; } .com-content-category-blog .article::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 5px !important; background-color: var(--color-rosu) !important; z-index: 2 !important; } .com-content-category-blog .article .article-header { display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 80px !important; padding: 5px 25px 15px 25px !important; border-radius: 8px !important; background: rgba(238, 245, 250, 0.6) !important; border: 1px solid rgba(31, 111, 178, 0.12) !important; margin-bottom: 20px !important; } .com-content-category-blog .article .article-header h2 a { font-size: 1.4rem !important; font-weight: 700 !important; color: var(--color-gri) !important; text-decoration: none !important; } .article-full-image img, .article-intro-image img { width: 300px !important; height: 400px !important; object-fit: cover !important; max-width: 110% !important; border-radius: 12px !important; } .article-full-image, .article-intro-image { width: 300px !important; height: 300px !important; flex-shrink: 0 !important; margin-right: 30px !important; } /* ========================================================================== RECONSTRUCȚIE AUTOMATĂ MODUL BREADCRUMBS (Pastilă Modernă Glassmorphism) ========================================================================== */ .sp-position-breadcrumb, #sp-breadcrumb { display: none !important; } body.view-article .sp-position-breadcrumb, body.view-article #sp-breadcrumb { display: block !important; } #sp-breadcrumb:has(.card-breadcrumb-articol) { padding-top: 10px !important; padding-bottom: 25px !important; margin: 0 !important; width: 100% !important; } .card-breadcrumb-articol ol.mod-breadcrumbs, .card-breadcrumb-articol ol.breadcrumb { display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; list-style: none !important; padding: 10px 24px !important; background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(0, 64, 133, 0.15) !important; border-radius: 50px !important; box-shadow: 0 4px 20px -2px rgba(0, 40, 133, 0.05) !important; } .card-breadcrumb-articol .mod-breadcrumbs__here, .card-breadcrumb-articol li.float-start { display: none !important; } .card-breadcrumb-articol .breadcrumb-item a, .card-breadcrumb-articol a.pathway span { color: var(--color-albastru) !important; text-decoration: none !important; } .card-breadcrumb-articol .breadcrumb-item a:hover, .card-breadcrumb-articol a.pathway:hover span { color: var(--color-rosu) !important; } .card-breadcrumb-articol .breadcrumb-item + .breadcrumb-item::before, .card-breadcrumb-articol li + li::before { content: "❯" !important; font-size: 9px !important; color: #adb5bd !important; padding: 0 12px !important; } /* ========================================================================== SP PAGE BUILDER - FIX COMPONENTĂ SECTIUNI INTERES PUBLIC (.modern-card) ========================================================================== */ #section-id-1784529290145 .sppb-addon-feature, .modern-card .sppb-addon-article-list-item { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; min-height: 140px !important; padding: 24px 40px !important; border-radius: 8px !important; text-align: center !important; position: relative !important; overflow: hidden !important; background: rgba(238, 245, 250, 0.6) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(31, 111, 178, 0.12) !important; box-shadow: 0 10px 30px rgba(31, 111, 178, 0.05) !important; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; } #section-id-1784529290145 .sppb-addon-feature:hover, .modern-card .sppb-addon-article-list-item:hover { transform: translateY(-5px) !important; background: rgba(233, 242, 250, 0.85) !important; border-color: rgba(31, 111, 178, 0.25) !important; } #section-id-1784529290145 .sppb-addon-feature::after, .modern-card .sppb-addon-article-list-item::after { content: "" !important; width: 20px !important; height: 2px !important; display: block !important; margin: 10px auto 0 !important; background: #1f6fb2 !important; transition: width 0.3s ease, background-color 0.3s ease !important; } #section-id-1784529290145 .sppb-addon-feature:hover::after, .modern-card .sppb-addon-article-list-item:hover::after { width: 105px !important; background: #ff5722 !important; } #section-id-1784529290145:not(.expanded) .sppb-column-addons > .addon-root-feature:nth-child(n+3) { display: none !important; } /* ========================================================================== NAVIGARE ARTICOLE (Butoane Precedent / Următor) ========================================================================== */ nav.pagenavigation .pagination a.btn { color: #475569 !important; background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; transition: all 0.2s ease-in-out !important; } nav.pagenavigation .pagination a.btn:hover { color: var(--color-rosu) !important; background-color: #fff5f5 !important; border-color: #fecaca !important; } nav.pagenavigation .pagination a.btn::before, nav.pagenavigation .pagination a.btn::after { display: none !important; } /* ========================================================================== ZONĂ CURĂȚARE LAYOUT (Elemente ascunse / Resetări utilitare) ========================================================================== */ #finder-filter-window label[for="tax-author"], #finder-filter-window #tax-author, .article-ratings-social-share, .social-share-block, .article-social-share, li.result__taxonomy--Author { display: none !important; } #sp-top-bar { padding: 10px 0; min-height: 40px; } .sp-scroll-up { bottom: 70px !important; } /* ========================================================================== MEDIAS QUERIES: ADAPTARE COMPREHENSIVĂ RESPONSIVE (Cascadă ordonată) ========================================================================== */ /* 1. TABLETĂ (Sub 1024px) */ @media (max-width: 1024px) { .com-content.view-article #sp-main-body .container { max-width: 90% !important; width: 90% !important; } .article-details .article-header, .article-details div[itemprop="articleBody"] { width: 100% !important; padding: 25px !important; } } /* 2. MOBIL DESIGN (Sub 991px) */ @media (max-width: 991px) { body.view-article #sp-main-body .container { width: calc(100% - 4px) !important; max-width: calc(100% - 4px) !important; margin: 2px auto !important; padding: 20px 15px !important; } body.view-article #sp-main-body .container h1 { font-size: 18px !important; line-height: 1.2 !important; } .mod-sppagebuilder .sppb-row-container { width: 100% !important; padding: 0 !important; } } /* 3. MOBIL CRITIC (Sub 768px) */ @media (max-width: 768px) { .com-content.view-article #sp-main-body .container { max-width: 100% !important; width: 100% !important; padding-left: 5px !important; padding-right: 5px !important; } .article-details .article-header { width: 100% !important; padding: 15px 15px 20px 15px !important; margin-top: 0px !important; } .article-details div[itemprop="articleBody"] { width: 100% !important; padding: 10px !important; margin-top: -5px !important; border-radius: 12px !important; } } /* 4. STRUCTURĂ VERTICALĂ COMPLETĂ (Sub 767px) */ @media (max-width: 767px) { .com-content-category-blog .article { flex-direction: column !important; padding: 24px !important; } .article-full-image, .article-intro-image { margin: 0 auto 20px auto !important; } .joomla-wow-card { flex-direction: column !important; gap: 20px !important; } div[itemprop="articleBody"] p a, .joomla-wow-card .btn-download { white-space: normal !important; word-break: break-word !important; } } /* ========================================================================== OFFCANVAS - IERARHIE CROMATICA PE NIVELURI NIVEL 1 = ALBASTRU NIVEL 2 = VIOLET NIVEL 3 = ROSU ========================================================================== */ /* -------------------------------------------------------------------------- NIVEL 1 - ALBASTRU PRIMARIA / INFORMATII DE INTERES PUBLIC / TRANSPARENTA etc. -------------------------------------------------------------------------- */ .offcanvas-menu .offcanvas-inner ul.menu > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > span { color: var(--color-albastru) !important; background-color: rgba(0, 64, 133, 0.045) !important; border-left: 4px solid var(--color-albastru) !important; border-radius: 6px !important; padding: 11px 14px !important; margin-bottom: 5px !important; font-weight: 700 !important; text-decoration: none !important; transition: color .22s ease, background-color .22s ease, border-color .22s ease, padding-left .22s ease !important; } /* Hover Nivel 1 */ .offcanvas-menu .offcanvas-inner ul.menu > li > a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li > span:hover { color: #ffffff !important; background-color: var(--color-albastru) !important; padding-left: 18px !important; } /* -------------------------------------------------------------------------- NIVEL 2 - VIOLET CONDUCERE / CONSILIUL LOCAL / DIRECTII / CARIERA etc. -------------------------------------------------------------------------- */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > span { color: var(--color-violet) !important; background-color: rgba(97, 51, 147, 0.055) !important; border-left: 3px solid var(--color-violet) !important; border-radius: 5px !important; padding: 9px 12px !important; margin: 4px 0 !important; font-weight: 600 !important; text-decoration: none !important; transition: color .22s ease, background-color .22s ease, border-color .22s ease, padding-left .22s ease, transform .22s ease !important; } /* Hover Nivel 2 */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > span:hover { color: #ffffff !important; background-color: var(--color-violet) !important; border-left-color: var(--color-violet) !important; padding-left: 17px !important; } /* -------------------------------------------------------------------------- NIVEL 2 TERMINAL Fara subbutoane de Nivel 3 Exemplu: DIRECTII, CONSILIUL LOCAL -------------------------------------------------------------------------- */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li:not(.menu-parent) > a { cursor: pointer !important; position: relative !important; } /* Efect suplimentar pentru Nivel 2 terminal */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li:not(.menu-parent) > a:hover { color: #ffffff !important; background-color: var(--color-violet) !important; border-left-color: var(--color-rosu) !important; padding-left: 18px !important; } /* Feedback la apasare pe telefon */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li:not(.menu-parent) > a:active { color: #ffffff !important; background-color: var(--color-rosu) !important; border-left-color: var(--color-rosu) !important; transform: translateX(2px) !important; } /* -------------------------------------------------------------------------- NIVEL 3 - ROSU PRIMAR / VICEPRIMAR / SECRETAR GENERAL etc. -------------------------------------------------------------------------- */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li > span { color: var(--color-rosu) !important; background-color: rgba(231, 0, 76, 0.045) !important; border-left: 2px solid var(--color-rosu) !important; border-radius: 4px !important; padding: 7px 11px !important; margin: 3px 0 !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; transition: color .22s ease, background-color .22s ease, padding-left .22s ease !important; } /* Hover Nivel 3 */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li > a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li > span:hover { color: #ffffff !important; background-color: var(--color-rosu) !important; padding-left: 16px !important; } /* -------------------------------------------------------------------------- NIVEL 4 Pentru cazuri precum: INFORMATII -> ACTE NECESARE -> URBANISM -> ... -------------------------------------------------------------------------- */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li > ul.menu-child > li > a { color: #58595b !important; background-color: rgba(88, 89, 91, 0.045) !important; border-left: 2px solid #9ca3af !important; border-radius: 4px !important; padding: 6px 10px !important; margin: 2px 0 !important; font-size: 12.5px !important; font-weight: 400 !important; } /* Hover Nivel 4 */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li > ul.menu-child > li > a:hover { color: var(--color-albastru) !important; background-color: rgba(0, 64, 133, 0.07) !important; border-left-color: var(--color-albastru) !important; padding-left: 15px !important; } /* -------------------------------------------------------------------------- INDENTARE IERARHICA -------------------------------------------------------------------------- */ /* container Nivel 2 */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child { padding-left: 10px !important; } /* container Nivel 3 */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child { padding-left: 12px !important; } /* container Nivel 4 */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li > ul.menu-child { padding-left: 14px !important; } /* -------------------------------------------------------------------------- ELEMENTELE CU SUBMENIU Togglerul ramane vizibil -------------------------------------------------------------------------- */ .offcanvas-menu .offcanvas-inner li.menu-parent > a > .menu-toggler { display: inline-block !important; } /* Elementele terminale nu necesita toggler */ .offcanvas-menu .offcanvas-inner li:not(.menu-parent) > a > .menu-toggler { display: none !important; } /* ========================================================================== OFFCANVAS - CULOARE SAGEATA LA DESCHIDEREA SUBMENIULUI ========================================================================== */ /* Tranzitie pentru toate sagetile */ .offcanvas-menu .offcanvas-inner li.menu-parent > a > .menu-toggler { transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important; border-radius: 50% !important; } /* ========================================================================== NIVEL 1 - ALBASTRU ========================================================================== */ /* Sageata normala */ .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler { color: var(--color-albastru) !important; } /* Sageata cand Nivelul 1 este deschis */ .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent[aria-expanded="true"] > a > .menu-toggler { color: #ffffff !important; background-color: var(--color-albastru) !important; box-shadow: 0 0 0 4px rgba(0, 64, 133, 0.12) !important; } /* ========================================================================== NIVEL 2 - VIOLET ========================================================================== */ /* Sageata normala */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li.menu-parent > a > .menu-toggler { color: var(--color-violet) !important; } /* Sageata cand Nivelul 2 este deschis */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li.menu-parent[aria-expanded="true"] > a > .menu-toggler { color: #ffffff !important; background-color: var(--color-violet) !important; box-shadow: 0 0 0 4px rgba(97, 51, 147, 0.14) !important; } /* ========================================================================== NIVEL 3 - ROSU ========================================================================== */ /* Sageata normala */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li.menu-parent > a > .menu-toggler { color: var(--color-rosu) !important; } /* Sageata cand Nivelul 3 este deschis */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li.menu-parent[aria-expanded="true"] > a > .menu-toggler { color: #ffffff !important; background-color: var(--color-rosu) !important; box-shadow: 0 0 0 4px rgba(231, 0, 76, 0.14) !important; } /* ========================================================================== EFECT LA APASARE ========================================================================== */ .offcanvas-menu .offcanvas-inner li.menu-parent > a:active > .menu-toggler { transform: scale(1.18) !important; } /* ========================================================================== OFFCANVAS - POZITIONARE CORECTA SAGEATA Mai spre stanga + spatiu rezervat pentru text ========================================================================== */ /* Linkurile care contin submeniu */ .offcanvas-menu .offcanvas-inner li.menu-parent > a { position: relative !important; /* Rezerva loc pentru sageata, ca textul sa nu intre sub ea */ padding-right: 52px !important; } /* Pozitionarea generala a sagetii */ .offcanvas-menu .offcanvas-inner li.menu-parent > a > .menu-toggler { position: absolute !important; /* Mutata spre stanga fata de marginea ecranului */ right: 16px !important; top: 50% !important; transform: translateY(-50%) !important; /* Zona suficient de mare pentru touch */ width: 30px !important; height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; z-index: 5 !important; border-radius: 50% !important; } /* ========================================================================== NIVEL 1 ========================================================================== */ .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a { /* putin mai mult spatiu pentru sageata Nivel 1 */ padding-right: 55px !important; } .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler { right: 18px !important; } /* ========================================================================== NIVEL 2 ========================================================================== */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li.menu-parent > a { padding-right: 50px !important; } .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li.menu-parent > a > .menu-toggler { right: 14px !important; } /* ========================================================================== NIVEL 3 ========================================================================== */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li.menu-parent > a { padding-right: 47px !important; } .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li.menu-parent > a > .menu-toggler { right: 12px !important; } /* ========================================================== FIX MOBIL - SECTIUNI DE INTERES PUBLIC / BUTON EXTINDE ========================================================== */ @media (max-width: 767px) { #section-id-1784529290145, #section-id-1784529290145 .sppb-row-container, #section-id-1784529290145 .sppb-row, #section-id-1784529290145 .sppb-column, #section-id-1784529290145 .sppb-column-addons { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } #section-id-1784529290145.expanded .sppb-column-addons > .addon-root-feature { display: block !important; } #section-id-1784529290145.expanded .sppb-column-addons > .addon-root-feature:last-child { margin-bottom: 25px !important; } } /* ========================================================================== FEATURE BOX - IMAGINI Migrat din Custom CSS Helix pentru a exista o singura sursa de stiluri. ========================================================================== */ .sppb-addon-feature .sppb-img-container img, .sppb-addon-feature .sppb-addon-image-container img { width: 120px !important; height: 120px !important; object-fit: cover !important; max-width: 100% !important; } /* ========================================================================== SECTIUNI DE INTERES PUBLIC - BUTON EXTINDE / RESTRANGE ========================================================================== */ /* ALINIERE BUTON EXTINDE (PRIMA PAGINĂ) LA TRANZIȚIA DE ACORDEON */ body #toggle-public-interest { display: inline-flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; padding: 10px 20px !important; background-color: #007bff !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; font-weight: 700 !important; /* TRANZIȚIA ELASTICĂ (Copiată exact din variabila de acordeoane --acc-spring) */ transition: transform .5s cubic-bezier(.34, 1.65, .64, 1), background-color .4s cubic-bezier(.2, 1, .2, 1), box-shadow .5s cubic-bezier(.2, 1, .2, 1) !important; } /* EFECTUL HOVER (Ridicarea fluidă a butonului) */ body #toggle-public-interest:hover, body #toggle-public-interest:focus-visible { background-color: #0056b3 !important; /* Ridicare elastică exact ca la cardul de acordeon */ transform: translateY(-5px) scale(1.02) !important; /* Umbră fină care oferă profunzime în momentul ridicării */ box-shadow: 0 18px 40px rgba(0, 92, 179, 0.15), 0 5px 18px rgba(0, 92, 179, 0.08) !important; } /* EFECTUL LA APĂSARE (Feedback tactil / Click) */ body #toggle-public-interest:active { transform: translateY(-1px) scale(0.98) !important; box-shadow: 0 4px 10px rgba(0, 92, 179, 0.1) !important; } /* ========================================================================== ACCESIBILITATE - REDUCERE MISCARE ========================================================================== */ @media (prefers-reduced-motion: reduce) { .sp-megamenu-parent li a, .sp-megamenu-parent li span, .offcanvas-inner .menu li a, .offcanvas-body .menu li a, .com-content.view-article #sp-main-body .container, .content-link-button, #toggle-public-interest { transition: none !important; animation: none !important; } } /* ======================================================================== CONSOLIDARE CUSTOM CSS HELIX Reguli complementare care lipseau din fisierul fizic. Pastrate la final pentru a reproduce prioritatea Custom CSS din interfata. ======================================================================== */ /* Dropdown clasic: spatiere si separatoare */ .sp-megamenu-parent .sp-dropdown-items > li { padding-top: 8px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; } .sp-megamenu-parent .sp-dropdown-items > li:last-child { border-bottom: none !important; } .sp-megamenu-parent .sp-dropdown-items > li > a { display: block !important; padding-left: 16px !important; font-size: 14px !important; line-height: 1.5 !important; border-left: 3px solid transparent; } .sp-megamenu-parent .sp-dropdown-items > li:hover > a { color: #004085 !important; padding-left: 26px !important; border-left: 3px solid #004085 !important; background-color: rgba(0, 64, 133, 0.04) !important; } /* Offcanvas: structura generala existenta anterior in Custom CSS Helix */ .offcanvas-inner .menu li, .offcanvas-body .menu li { border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; padding-top: 8px !important; padding-bottom: 8px !important; list-style: none !important; } .offcanvas-inner .menu li:last-child, .offcanvas-body .menu li:last-child { border-bottom: none !important; } .offcanvas-inner .menu li a, .offcanvas-body .menu li a { display: block !important; line-height: 1.5 !important; font-size: 15px !important; padding-left: 12px !important; border-left: 3px solid transparent; color: #333333 !important; text-decoration: none !important; } .offcanvas-inner .menu li:hover > a, .offcanvas-body .menu li:hover > a, .offcanvas-inner .menu li.active > a, .offcanvas-body .menu li.active > a { color: #004085 !important; padding-left: 22px !important; border-left: 3px solid #004085 !important; background-color: rgba(0, 64, 133, 0.04) !important; } /* Articol: reguli complementare din Custom CSS Helix, pastrate cu aceeasi prioritate */ body.view-article { -moz-osx-font-smoothing: grayscale; --card-bg: #ffffff; --text-main: #223; --muted: rgba(0, 0, 0, 0.6); --border: rgba(0, 0, 0, 0.06); --shadow: 0 8px 30px rgba(0, 0, 0, 0.06); --accent-start: #613393; --accent-end: #3498db; --selection-bg: #cfe4ff; --selection-fg: #0b1a33; } body.view-article #sp-main-body, body.view-article section#sp-main-body { padding: 10px !important; background: transparent !important; } body.view-article #sp-main-body .container { background-color: #ffffff !important; max-width: 65% !important; margin: 5px auto 20px auto !important; padding: 10px !important; border-radius: 10px !important; position: relative; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; transition: box-shadow 260ms ease, border-color 260ms ease, transform 200ms ease; will-change: transform; } body.view-article #sp-main-body .container:hover, body.view-article #sp-main-body .container:focus-within { box-shadow: 0 10px 38px rgba(0, 0, 0, 0.08) !important; border-color: rgba(0, 0, 0, 0.09) !important; transform: translateY(-1px); } body.view-article #sp-main-body .container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0; background: transparent !important; opacity: 0 !important; border-radius: 10px 10px 0 0; z-index: 10; animation: none !important; transition: none !important; } body.view-article #sp-main-body .container hr { display: block !important; height: 1px !important; background: rgba(0, 0, 0, 0.1) !important; border: 0 !important; margin: 20px 0 !important; opacity: 1 !important; position: relative; } body.view-article #sp-main-body .container hr::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.05), transparent 70%); opacity: 0.5; pointer-events: none; } body.view-article #sp-main-body .container, body.view-article #sp-main-body .container .article-details, body.view-article #sp-main-body .container article { color: var(--text-main); } body.view-article #sp-main-body .container h4 { color: #102039; letter-spacing: 0.15px; } body.view-article #sp-main-body .container p { color: #2a2f3a; } body.view-article #sp-main-body .container li + li { margin-top: 0.4em; } body.view-article #sp-main-body .container ::selection { background: var(--selection-bg); color: var(--selection-fg); } body.view-article #sp-main-body .container ::-moz-selection { background: var(--selection-bg); color: var(--selection-fg); } body.view-article #sp-main-body .container img { transition: transform 220ms ease, box-shadow 220ms ease; } body.view-article #sp-main-body .container img:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); } body.view-article #sp-main-body .container table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 18px rgba(0,0,0,0.04); border-radius: 8px; overflow: hidden; } body.view-article #sp-main-body .container table th, body.view-article #sp-main-body .container table td { border-bottom: 1px solid rgba(0,0,0,0.06); color: #1f2937; } body.view-article #sp-main-body .container table thead th { background: linear-gradient(180deg, #f9fbff, #f3f7ff); font-weight: 600; } body.view-article #sp-main-body .container blockquote { position: relative; margin: 1em 0; padding: 12px 16px; color: #0f172a; background: linear-gradient(180deg, #ffffff, #fbfdff); border-left: 3px solid var(--accent-start); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); } body.view-article #sp-main-body .container blockquote cite { display: block; margin-top: 6px; color: var(--muted); font-style: normal; } body.view-article #sp-main-body .container .btn, body.view-article #sp-main-body .container button, body.view-article #sp-main-body .container input[type="submit"] { border-radius: 8px !important; border: 1px solid rgba(0,0,0,0.08) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.05); transition: transform 120ms ease, box-shadow 180ms ease, background 180ms ease; } body.view-article #sp-main-body .container .btn:hover, body.view-article #sp-main-body .container button:hover, body.view-article #sp-main-body .container input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.07); } body.view-article #sp-main-body .container .btn:active, body.view-article #sp-main-body .container button:active, body.view-article #sp-main-body .container input[type="submit"]:active { transform: translateY(0); } body.view-article #sp-main-body .container code, body.view-article #sp-main-body .container pre { background: #0b1424; color: #e5edff; border-radius: 8px; } body.view-article #sp-main-body .container pre { white-space: pre-wrap; overflow-wrap: break-word; box-shadow: 0 8px 24px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); } body.view-article #sp-main-body .container .article-details > * + *, body.view-article #sp-main-body .container article > * + * { margin-top: 0.75em; } /* Finder: completarea regulilor de ascundere din interfata Helix */ #finder-filter-window #tax-author option, #finder-filter-window label[for="tax-author"] + .controls { display: none !important; } /* SP Page Builder full width pe mobil */ @media (max-width: 991px) { body.view-article #sp-main-body .container { width: calc(100% - 4px) !important; max-width: calc(100% - 4px) !important; margin: 2px auto !important; padding: 30px 15px !important; } body.view-article #sp-main-body .container h1, body.view-article #sp-main-body .container .article-details h1, body.view-article #sp-main-body .container h1 span { font-size: 18px !important; line-height: 1.2 !important; margin-bottom: 8px !important; display: block !important; } body.view-article #sp-main-body .container p, body.view-article #sp-main-body .container p span { font-size: 15px !important; line-height: 1.5 !important; text-align: left !important; } .mod-sppagebuilder .sppb-row-container, .mod-sppagebuilder .sppb-row, .mod-sppagebuilder .sppb-row-column, .mod-sppagebuilder .sppb-addon, .mod-sppagebuilder .sppb-addon-content { width: 100% !important; max-width: 100% !important; } .mod-sppagebuilder .sppb-row-container { padding-left: 0 !important; padding-right: 0 !important; } } /* Respecta preferinta utilizatorului pentru reducerea animatiilor */ @media (prefers-reduced-motion: reduce) { body.view-article #sp-main-body .container, body.view-article #sp-main-body .container::before, body.view-article #sp-main-body .container a { animation: none !important; transition: none !important; } } /* Nota: valorile de brand raman cele din versiunea de productie. */ /* ======================================================================== PANOU CENTRAL TIPOGRAFIE SI CULORI Suprascriere controlata. Nu modifica layout, padding, margin sau responsive. ======================================================================== */ body.view-article div[itemprop="articleBody"], body.view-article div[itemprop="articleBody"] p, body.view-article div[itemprop="articleBody"] span, body.view-article div[itemprop="articleBody"] li, body.view-article div[itemprop="articleBody"] div { font-family: var(--ui-font-main) !important; font-size: var(--ui-text-size) !important; font-weight: var(--ui-text-weight) !important; line-height: var(--ui-text-line-height) !important; color: var(--ui-text-color) ; } body.view-article div[itemprop="articleBody"] strong, body.view-article div[itemprop="articleBody"] b { font-family: var(--ui-font-main) !important; font-weight: 700 !important; color: var(--ui-strong-color) ; } /* Ierarhie titluri: suprascrie regula generala pe span/div */ body.view-article #sp-main-body .container h1, body.view-article #sp-main-body .container h1 span { font-family: var(--ui-font-main) !important; font-size: var(--ui-h1-size) !important; font-weight: var(--ui-h1-weight) !important; color: var(--ui-h1-color) !important; } body.view-article #sp-main-body .container h2, body.view-article #sp-main-body .container h2 span { font-family: var(--ui-font-main) !important; font-size: var(--ui-h2-size) !important; font-weight: var(--ui-h2-weight) !important; color: var(--ui-h2-color) !important; } body.view-article #sp-main-body .container h3, body.view-article #sp-main-body .container h3 span { font-family: var(--ui-font-main) !important; font-size: var(--ui-h3-size) !important; font-weight: var(--ui-h3-weight) !important; color: var(--ui-h3-color) !important; } body.view-article #sp-main-body .container h4, body.view-article #sp-main-body .container h4 span { font-family: var(--ui-font-main) !important; font-size: var(--ui-h4-size) !important; font-weight: var(--ui-h4-weight) !important; color: var(--ui-h4-color) !important; } /* Linkurile isi pastreaza aspectul de buton, dar au control central */ body.view-article div[itemprop="articleBody"] p a, body.view-article div[itemprop="articleBody"] li a { font-family: var(--ui-font-main) !important; font-size: var(--ui-content-link-size) !important; font-weight: var(--ui-content-link-weight) !important; color: var(--ui-content-link-color) !important; } /* Pictograme documente */ .content-link-button .file-icon { font-size: var(--ui-document-icon-size) !important; } .content-link-pdf .pdf-icon { color: var(--ui-pdf-color) !important; } .content-link-word .word-icon { color: var(--ui-word-color) !important; } /* Pe mobil pastram dimensiunile existente in productie pentru titlu si text. */ @media (max-width: 991px) { :root { --ui-text-size: 15px; --ui-h1-size: 18px; } } @media (min-width: 992px) { /* ========================================================= MEGA MENU - poziționare centrală pe monitor Păstrează mecanismul de mouseover Helix ========================================================= */ .sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-main.sp-dropdown-mega.sp-menu-full { position: absolute !important; /* anulăm poziționarea automată problematică */ right: auto !important; /* dropdown-ul ocupă zona viewportului */ width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Conținutul real al Mega Menu */ .sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-main.sp-dropdown-mega.sp-menu-full > .sp-dropdown-inner { width: min(1400px, 92vw) !important; max-width: 92vw !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Cele 4 coloane */ .sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-main.sp-dropdown-mega.sp-menu-full > .sp-dropdown-inner > .row { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } @media (min-width: 992px) { /* ===================================================== MEGA MENU - CENTRARE ===================================================== */ .sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-main.sp-dropdown-mega.sp-menu-full { left: -72% !important; } /* ===================================================== DROPDOWN + MEGA MENU Distanță vizuală de 25px Mouse-over-ul rămâne funcțional ===================================================== */ .sp-megamenu-parent > li > .sp-dropdown > .sp-dropdown-inner { position: relative !important; top: 25px !important; } } /* inchide @media (min-width: 992px) interior */ } /* inchide @media (min-width: 992px) exterior */ /* ================================================================ BUTOANE — CONTENT ONLY ================================================================ */ :where( div[itemprop="articleBody"] p a, div[itemprop="articleBody"] li a, .article-introtext p a, .article-introtext li a, div[itemprop="blogPost"] p a, div[itemprop="blogPost"] li a, .joomla-wow-card .btn-download, .joomla-wow-card .card-contact-link ) { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; padding: 10px 22px !important; margin: 6px 5px !important; border: 1px solid var(--ps4-border) !important; border-radius: var(--ps4-radius) !important; background: linear-gradient( 145deg, rgba(255,255,255,0.98), rgba(250,248,252,0.96) ) !important; color: var(--ps4-violet) !important; font-family: var(--font-principal), sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; line-height: 1.25 !important; text-decoration: none !important; box-shadow: var(--ps4-shadow), inset 0 1px 0 rgba(255,255,255,0.95) !important; overflow: hidden !important; isolation: isolate !important; transition: transform 0.4s var(--ps4-ease), color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s var(--ps4-ease), background 0.3s ease !important; } /* ================================================================ ACCENT VIOLET — FOARTE FIN ================================================================ */ :where( div[itemprop="articleBody"] p a, div[itemprop="articleBody"] li a, .article-introtext p a, .article-introtext li a, div[itemprop="blogPost"] p a, div[itemprop="blogPost"] li a, .joomla-wow-card .btn-download, .joomla-wow-card .card-contact-link )::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 2px !important; background: linear-gradient( 180deg, var(--ps4-violet-dark), var(--ps4-violet), var(--ps4-mauve) ) !important; opacity: 0.42 !important; transform: scaleY(0.42) !important; transform-origin: center !important; transition: transform 0.45s var(--ps4-ease), opacity 0.35s ease !important; pointer-events: none !important; z-index: 2 !important; } /* ================================================================ REFLEXIE ================================================================ */ :where( div[itemprop="articleBody"] p a, div[itemprop="articleBody"] li a, .article-introtext p a, .article-introtext li a, div[itemprop="blogPost"] p a, div[itemprop="blogPost"] li a, .joomla-wow-card .btn-download, .joomla-wow-card .card-contact-link )::after { content: "" !important; position: absolute !important; left: 14px !important; right: 14px !important; top: 0 !important; height: 1px !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.95), transparent ) !important; opacity: 0.75 !important; pointer-events: none !important; z-index: 2 !important; } /* ================================================================ HOVER ================================================================ */ @media (hover: hover) and (min-width: 992px) { :where( div[itemprop="articleBody"] p a, div[itemprop="articleBody"] li a, .article-introtext p a, .article-introtext li a, div[itemprop="blogPost"] p a, div[itemprop="blogPost"] li a, .joomla-wow-card .btn-download, .joomla-wow-card .card-contact-link ):hover { transform: translateY(-2px) !important; color: var(--ps4-violet-dark) !important; border-color: var(--ps4-border-hover) !important; background: linear-gradient( 145deg, #FFFFFF, #FAF8FC ) !important; box-shadow: var(--ps4-shadow-hover), inset 0 1px 0 #FFFFFF !important; } :where( div[itemprop="articleBody"] p a, div[itemprop="articleBody"] li a, .article-introtext p a, .article-introtext li a, div[itemprop="blogPost"] p a, div[itemprop="blogPost"] li a, .joomla-wow-card .btn-download, .joomla-wow-card .card-contact-link ):hover::before { opacity: 0.9 !important; transform: scaleY(1) !important; } } /* ================================================================ CARD TITLU ARTICOL ================================================================ */ .article-details .article-header { position: relative !important; width: min(95%, 1180px) !important; min-height: 118px !important; margin: 0 auto 24px auto !important; padding: 26px 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; background: linear-gradient( 145deg, #FFFFFF, #FCFAFD ) !important; border: 1px solid rgba(71,35,111,0.085) !important; border-radius: var(--ps4-radius-card) !important; box-shadow: 0 3px 10px rgba(42,28,55,0.025), 0 15px 38px rgba(42,28,55,0.045), inset 0 1px 0 rgba(255,255,255,0.98) !important; overflow: hidden !important; isolation: isolate !important; transition: transform 0.45s var(--ps4-ease), box-shadow 0.45s var(--ps4-ease), border-color 0.35s ease !important; } /* ================================================================ LINIE VIOLETĂ PREMIUM ================================================================ */ .article-details .article-header::before { content: "" !important; position: absolute !important; left: 0 !important; top: 18% !important; width: 3px !important; height: 64% !important; border-radius: 0 5px 5px 0 !important; background: linear-gradient( 180deg, var(--ps4-violet-dark), var(--ps4-violet), var(--ps4-mauve) ) !important; opacity: 0.72 !important; transform: scaleY(0.72) !important; transition: transform 0.45s var(--ps4-ease), opacity 0.35s ease !important; pointer-events: none !important; z-index: 1 !important; } /* ================================================================ HALO VIOLET FOARTE FIN ================================================================ */ .article-details .article-header::after { content: "" !important; position: absolute !important; inset: 0 !important; background: radial-gradient( circle at 50% 0%, rgba(97,51,147,0.055), transparent 50% ) !important; pointer-events: none !important; z-index: 0 !important; } /* ================================================================ TITLU ================================================================ */ .article-details .article-header h1, .article-details .article-header h1 span, .article-details .article-header a { position: relative !important; z-index: 3 !important; color: var(--ps4-text) !important; font-weight: 700 !important; letter-spacing: -0.1px !important; text-decoration: none !important; transition: color 0.35s ease, letter-spacing 0.35s ease !important; } /* ================================================================ CARD HOVER ================================================================ */ @media (hover: hover) and (min-width: 992px) { .article-details .article-header:hover { transform: translateY(-2px) !important; border-color: rgba(97,51,147,0.17) !important; box-shadow: 0 6px 14px rgba(42,28,55,0.035), 0 20px 44px rgba(42,28,55,0.075), inset 0 1px 0 #FFFFFF !important; } .article-details .article-header:hover::before { opacity: 0.95 !important; transform: scaleY(1) !important; } .article-details .article-header:hover h1, .article-details .article-header:hover h1 span { color: var(--ps4-violet-dark) !important; } } /* ================================================================ FOCUS ================================================================ */ :where( div[itemprop="articleBody"] p a, div[itemprop="articleBody"] li a, .article-introtext p a, .article-introtext li a, div[itemprop="blogPost"] p a, div[itemprop="blogPost"] li a, .joomla-wow-card .btn-download, .joomla-wow-card .card-contact-link ):focus-visible { outline: 2px solid rgba(97,51,147,0.38) !important; outline-offset: 3px !important; } /* ================================================================ MOBILE ================================================================ */ @media (max-width: 767px) { :where( div[itemprop="articleBody"] p a, div[itemprop="articleBody"] li a, .article-introtext p a, .article-introtext li a, div[itemprop="blogPost"] p a, div[itemprop="blogPost"] li a, .joomla-wow-card .btn-download, .joomla-wow-card .card-contact-link ) { min-height: 44px !important; padding: 10px 17px !important; font-size: 13.5px !important; } .article-details .article-header { width: 100% !important; min-height: 100px !important; padding: 22px 24px !important; } } /* ================================================================ REDUCED MOTION ================================================================ */ @media (prefers-reduced-motion: reduce) { :where( div[itemprop="articleBody"] p a, div[itemprop="articleBody"] li a, .article-introtext p a, .article-introtext li a, div[itemprop="blogPost"] p a, div[itemprop="blogPost"] li a, .joomla-wow-card .btn-download, .joomla-wow-card .card-contact-link, .article-details .article-header ) { transition: none !important; } } /* ========================================================================== ACORDEOANE SP PAGE BUILDER - PREMIUM FINAL ========================================================================== Se aplica global: - acordeoanelor SP Page Builder din pagini; - acordeoanelor din articole; IMPORTANT: - nu forteaza tipografia continutului din acordeon; - nu modifica p, a, strong, h1-h6, ul, li etc. din continut; - continutul Text Block ramane controlabil din editorul nativ SPPB; - stilizeaza doar cardul, heading-ul, titlul acordeonului si indicatorul +/-. ========================================================================== */ /* ========================================================================== 1. VARIABILE ========================================================================== */ /* ========================================================================== 2. CARDUL ACORDEONULUI ========================================================================== */ .sppb-addon-accordion .sppb-panel { position: relative !important; margin: 0 0 22px !important; border: 1px solid rgba(97, 51, 147, .06) !important; border-radius: var(--acc-radius) !important; background: #FFFFFF !important; box-shadow: var(--acc-shadow) !important; overflow: hidden !important; isolation: isolate !important; transition: transform .5s var(--acc-spring), box-shadow .5s var(--acc-smooth), border-color .4s ease !important; } /* ========================================================================== 3. ZONA TITLULUI / HEADING ========================================================================== */ .sppb-addon-accordion .sppb-panel-heading { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; min-height: 76px !important; padding: 24px 85px 24px 32px !important; border: 0 !important; border-radius: var(--acc-radius) !important; background: #FFFFFF !important; cursor: pointer !important; overflow: hidden !important; transition: background .4s ease, border-radius .3s ease !important; } /* ========================================================================== 4. REFLEXIE DISCRETA IN FUNDALUL HEADING-ULUI ========================================================================== */ .sppb-addon-accordion .sppb-panel-heading::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0) 50%, rgba(97, 51, 147, .02) 100% ) !important; opacity: 0; pointer-events: none; transition: opacity .4s ease !important; } /* ========================================================================== 5. TITLUL ACORDEONULUI ========================================================================== Aceasta regula afecteaza NUMAI titlul acordeonului. Nu afecteaza Text Block-ul din interior. ========================================================================== */ .sppb-addon-accordion .sppb-panel-heading .sppb-panel-title { position: relative !important; z-index: 2 !important; margin: 0 !important; font-family: "Gotham", var(--font-principal), sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: -.2px !important; color: var(--acc-grey) !important; transition: color .3s ease, transform .4s var(--acc-spring) !important; } /* ========================================================================== 6. ASCUNDE ICONUL NATIV SP PAGE BUILDER ========================================================================== */ .sppb-addon-accordion .sppb-accordion-icon-wrap { display: none !important; } /* ========================================================================== 7. INDICATOR PERSONALIZAT + ========================================================================== Plusul nu foloseste caractere/fonturi. Este construit din doua linii CSS pentru afisare consistenta. ========================================================================== */ .sppb-addon-accordion .sppb-panel-heading::after { content: "" !important; position: absolute !important; right: 28px !important; top: 50% !important; width: 38px !important; height: 38px !important; border: 2px solid rgba(97, 51, 147, .16) !important; border-radius: 50% !important; background-color: #FFFFFF !important; background-image: linear-gradient( var(--acc-violet), var(--acc-violet) ), linear-gradient( var(--acc-violet), var(--acc-violet) ) !important; background-position: center, center !important; background-size: 12px 2px, 2px 12px !important; background-repeat: no-repeat !important; box-shadow: 0 3px 8px rgba(67, 30, 108, .02) !important; transform: translateY(-50%) !important; pointer-events: none; transition: transform .5s var(--acc-spring), background-color .35s ease, border-color .35s var(--acc-smooth), box-shadow .35s var(--acc-smooth) !important; } /* ========================================================================== 8. HOVER DESKTOP ========================================================================== */ @media (hover: hover) and (min-width: 992px) { /* Ridicare usoara a cardului */ .sppb-addon-accordion .sppb-panel:hover { transform: translateY(-5px) scale(1.002) !important; box-shadow: var(--acc-shadow-active) !important; border-color: rgba(97, 51, 147, .20) !important; } /* Reflexie discreta */ .sppb-addon-accordion .sppb-panel:hover .sppb-panel-heading::before { opacity: 1 !important; } /* Titlu */ .sppb-addon-accordion .sppb-panel:hover .sppb-panel-title { color: var(--acc-violet) !important; transform: translateX(4px) !important; } /* Halou amber in jurul indicatorului */ .sppb-addon-accordion .sppb-panel-heading:hover::after { border-color: var(--acc-violet) !important; box-shadow: 0 0 0 2px #FFFFFF, 0 0 16px 3px rgba(238, 118, 35, .35), 0 4px 10px rgba(67, 30, 108, .05) !important; transform: translateY(-50%) scale(1.12) !important; } } /* ========================================================================== 9. CARD DESCHIS / ACTIV ========================================================================== */ .sppb-addon-accordion .sppb-panel:has(.sppb-panel-heading[aria-expanded="true"]) { border-color: rgba(97, 51, 147, .25) !important; box-shadow: var(--acc-shadow-active) !important; transform: scale(1.005) !important; } /* ========================================================================== 10. HEADING DESCHIS ========================================================================== */ .sppb-addon-accordion .sppb-panel-heading[aria-expanded="true"] { border-radius: var(--acc-radius) var(--acc-radius) 0 0 !important; background: linear-gradient( 180deg, #FFFFFF 0%, rgba(250, 250, 253, .98) 100% ) !important; } /* ========================================================================== 11. TITLUL ACORDEONULUI DESCHIS ========================================================================== */ .sppb-addon-accordion .sppb-panel-heading[aria-expanded="true"] .sppb-panel-title { color: var(--acc-violet-dark) !important; transform: translateX(6px) !important; } /* ========================================================================== 12. INDICATOR DESCHIS ========================================================================== Plusul se roteste si devine X. Fundal gradient violet -> orange. ========================================================================== */ .sppb-addon-accordion .sppb-panel-heading[aria-expanded="true"]::after { border-color: transparent !important; background-color: transparent !important; background-image: linear-gradient( #FFFFFF, #FFFFFF ), linear-gradient( #FFFFFF, #FFFFFF ), linear-gradient( 135deg, var(--acc-violet) 0%, var(--acc-orange) 100% ) !important; background-position: center, center, center !important; background-size: 12px 2px, 2px 12px, cover !important; background-repeat: no-repeat !important; box-shadow: 0 6px 20px rgba(97, 51, 147, .25) !important; transform: translateY(-50%) rotate(135deg) !important; } /* ========================================================================== 13. CORPUL ACORDEONULUI ========================================================================== IMPORTANT: Aici este stilizat NUMAI containerul. Nu sunt definite: - font-family - font-size - font-weight - color - line-height pentru elementele din interior. Astfel, Text Block-urile raman controlabile din editorul SPPB. ========================================================================== */ .sppb-addon-accordion .sppb-panel-body { position: relative !important; z-index: 1 !important; padding: 32px 36px 36px !important; border: 0 !important; background: linear-gradient( 180deg, rgba(255, 255, 255, .98) 0%, rgba(251, 250, 253, .99) 100% ) !important; box-shadow: inset 0 16px 32px -24px rgba(97, 51, 147, .12) !important; } /* ========================================================================== 14. FOCUS PENTRU NAVIGARE CU TASTATURA ========================================================================== */ .sppb-addon-accordion .sppb-panel-heading:focus-visible { outline: 2px solid rgba(97, 51, 147, .45) !important; outline-offset: -3px !important; } /* ========================================================================== 15. MOBIL ========================================================================== */ @media (max-width: 767px) { /* Card */ .sppb-addon-accordion .sppb-panel { margin-bottom: 16px !important; border-radius: var(--acc-radius-mobile) !important; } /* Heading */ .sppb-addon-accordion .sppb-panel-heading { min-height: 64px !important; padding: 18px 68px 18px 24px !important; border-radius: var(--acc-radius-mobile) !important; } /* Heading deschis */ .sppb-addon-accordion .sppb-panel-heading[aria-expanded="true"] { border-radius: var(--acc-radius-mobile) var(--acc-radius-mobile) 0 0 !important; } /* Indicator */ .sppb-addon-accordion .sppb-panel-heading::after { right: 20px !important; width: 32px !important; height: 32px !important; background-size: 10px 2px, 2px 10px !important; } /* Indicator deschis */ .sppb-addon-accordion .sppb-panel-heading[aria-expanded="true"]::after { background-size: 10px 2px, 2px 10px, cover !important; transform: translateY(-50%) rotate(135deg) !important; } /* Corpul acordeonului */ .sppb-addon-accordion .sppb-panel-body { padding: 24px !important; } } /* ========================================================================== 16. REDUCERE ANIMATII - ACCESIBILITATE ========================================================================== */ @media (prefers-reduced-motion: reduce) { .sppb-addon-accordion .sppb-panel, .sppb-addon-accordion .sppb-panel-heading, .sppb-addon-accordion .sppb-panel-title, .sppb-addon-accordion .sppb-panel-heading::before, .sppb-addon-accordion .sppb-panel-heading::after { transition: none !important; } .sppb-addon-accordion .sppb-panel:hover, .sppb-addon-accordion .sppb-panel:hover .sppb-panel-title { transform: none !important; } .sppb-addon-accordion .sppb-panel-heading[aria-expanded="true"]::after { transform: translateY(-50%) !important; } } /* ========================================================================== SFARSIT ACORDEOANE SP PAGE BUILDER - PREMIUM FINAL ========================================================================== */ /* ========================================================================== ACCORDION - GLOW EFFECT inspirat din bara de cautare Se aplica global acordeoanelor SP Page Builder din pagini. ========================================================================== */ /* Permitem haloul sa existe in exteriorul cardului */ .sppb-addon-accordion .sppb-panel { overflow: visible !important; position: relative !important; } /* Haloul RGB din jurul acordeonului */ .sppb-addon-accordion .sppb-panel::before { content: ""; position: absolute; inset: -3px; border-radius: 26px; background: linear-gradient( 135deg, #0090ff, #7c3aed, #e7004c ); opacity: 0; filter: blur(16px); z-index: -1; pointer-events: none; transition: opacity .4s ease, filter .4s ease; } /* ========================================================================== HOVER DESKTOP ========================================================================== */ @media (hover: hover) and (min-width: 992px) { /* Activam haloul */ .sppb-addon-accordion .sppb-panel:hover::before { opacity: .38; filter: blur(18px); } /* Cardul se ridica foarte discret */ .sppb-addon-accordion .sppb-panel:hover { transform: translateY(-4px) scale(1.002) !important; box-shadow: 0 18px 40px rgba(42, 28, 55, .10), 0 5px 18px rgba(97, 51, 147, .06) !important; } /* Cercul + capata acelasi efect luminous */ .sppb-addon-accordion .sppb-panel-heading:hover::after { border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 0 16px 3px rgba(124, 58, 237, .30), 0 0 24px rgba(0, 144, 255, .16) !important; transform: translateY(-50%) scale(1.10) !important; } } /* ========================================================================== ACORDEON DESCHIS Haloul ramane vizibil, dar mai rafinat decat la hover. ========================================================================== */ .sppb-addon-accordion .sppb-panel:has(.sppb-panel-heading[aria-expanded="true"])::before { opacity: .32; background: linear-gradient( 135deg, #0090ff 0%, #7c3aed 50%, #e7004c 100% ); filter: blur(18px); } /* Card activ */ .sppb-addon-accordion .sppb-panel:has(.sppb-panel-heading[aria-expanded="true"]) { border-color: rgba(97, 51, 147, .22) !important; box-shadow: 0 20px 45px rgba(42, 28, 55, .10), 0 6px 20px rgba(97, 51, 147, .07) !important; } /* ========================================================================== BUTON + / X ACTIV Pastreaza aspectul premium al acordeonului ========================================================================== */ .sppb-addon-accordion .sppb-panel-heading[aria-expanded="true"]::after { box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 0 18px rgba(231, 0, 76, .30), 0 7px 18px rgba(97, 51, 147, .20) !important; } /* ========================================================================== FOCUS TASTATURA ========================================================================== */ .sppb-addon-accordion .sppb-panel-heading:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 0 0 6px rgba(124, 58, 237, .25) !important; } /* ========================================================================== MOBIL Fara hover/glow permanent inutil pe touch. ========================================================================== */ @media (max-width: 767px) { .sppb-addon-accordion .sppb-panel::before { inset: -2px; border-radius: 18px; filter: blur(12px); } /* Glow numai cand acordeonul este deschis */ .sppb-addon-accordion .sppb-panel:has(.sppb-panel-heading[aria-expanded="true"])::before { opacity: .22; filter: blur(13px); } } /* ========================================================================== REDUCERE MISCARE ========================================================================== */ @media (prefers-reduced-motion: reduce) { .sppb-addon-accordion .sppb-panel, .sppb-addon-accordion .sppb-panel::before, .sppb-addon-accordion .sppb-panel-heading::after { transition: none !important; } } /* Modifică distanța dintre pictogramă și text strict în acordeoane */ .sppb-addon-accordion .sppb-addon-text-block a.content-link-button, .sppb-addon-accordion .sppb-accordion-item-body .sppb-addon-text-block a.content-link-button { gap: 10px !important; /* Schimbă 14px cu distanța dorită (ex: 12px, 16px etc.) */ } /* ========================================================================== FIX MOBIL: Împiedică butoanele din acordeoane să se spargă pe ecran îngust ========================================================================== */ @media (max-width: 767px) { .sppb-addon-accordion .sppb-addon-text-block a.content-link-button, .sppb-addon-accordion .sppb-accordion-item-body .sppb-addon-text-block a.content-link-button { display: inline-flex !important; justify-content: flex-start !important; /* Aliniază elementele strâns, la început */ width: auto !important; /* Butonul are doar dimensiunea textului, nu ocupă tot rândul */ max-width: 100% !important; /* Nu iese din ecran */ white-space: normal !important; /* Permite textului să se rupă dacă e extrem de lung... */ word-break: normal !important; /* ...dar fără să rupă cuvintele aiurea */ text-align: left !important; padding: 10px 18px !important; /* Padding ușor redus pentru ecrane mici */ } /* Asigură-se că pictograma din stânga și săgeata din dreapta stau lipite de text, nu în margini */ .sppb-addon-accordion .sppb-addon-text-block a.content-link-button .btn-icon, .sppb-addon-accordion .sppb-addon-text-block a.content-link-button .file-icon { flex-shrink: 0 !important; /* Pictograma nu se micșorează/turtește */ } } /* ============================================================================ TEXT BLOCK ACORDEON CU SCROLL ==============================================================================*/ .text-cu-scroll { max-height: 250px; overflow-y: auto; padding-right: 15px; }