/*
ONEVENT
Componentele noastre: butoane, titluri, bara din header, carduri.
Generat din CSS-ul suplimentar, 22 august 2026.
*/
.titleOn {
color: rgb(85, 85, 85) !important; letter-spacing: 0.1px;
text-align: center;
padding: 22px 10px 0px 10px;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif !important;
font-size: 21px;
}
.TitleOnUndeMergi{
text-align: left !important;
font-size: 25px!important;
line-height: 2!important;
font-weight:bold;
}
.TitleOnCeFaci{
text-align: left !important;
font-size: 25px!important;
line-height: 2!important;
font-weight:bold;
}
.TitleOn3{
text-align: center!important;
font-size: 16px!important;
line-height: 2!important;
font-family: 'Rubik',sans-serif !important;
}
/* PlusMenu Style buttons ON*/
.BtnOnPlusMenu{
color: #383d40 !important;
border-radius: 4px !important;
width: 100% !important;
font-weight: bold!important;
background-color: #5e9366 !important;
text-transform: upper !important;
font-size: 14px !important;
letter-spacing: .03em !important;
cursor: pointer !important;
font-family: 'Rubik', sans-serif;
}
.BtnOnPlusMenu:hover {
background:transparent !important;
border-color: #72d881 !important;
color: #72d881 !important;
}
/* Icons buttons header ON*/
.IconsHeadeStyle {
font-size: 30px !important;
transition: color .1s;
}
.IconsHeadeStyle:hover {
color: red !important;
transition: color .1s;
}
.image_circle {
border-radius: 50%;
overflow: hidden;
border: 1.5px solid #fff;
height: 70px;
width: 70px;
background-size: cover;
background-position: center center;
}
.location_description_on {
color: #777;
text-align: justify;
}
.menu_list_orase {
text-align: left;
margin: 0px 0 50px 0px;
list-style: none;
}
.menu_list_orase li a {
color: #444;
padding: 5px 10px;
display: block;
line-height: 1.5;
border-radius: 12px;
list-style: none;
}
.menu_list_orase li:hover a, .menu_list_orase li.this a {
background-color: #fff3d2;
}
.location_name_on {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
text-align: center;
}
.dropbtn_location {
text-transform: uppercase;
}
.buttonOnCeFaciPopular {
background-color: #f2694f !important;
color: #39364fcf !important;
border-radius: 2px;
font-weight: bold !important;
border: 1px solid #ccc;
margin-bottom: 5px;
margin-top: 5px;
}
.buttonOnCeFaciLuniMarti {
background-color: #e9edef !important;
color: #39364fcf !important;
border-radius: 2px;
font-weight: unset !important;
border: 1px solid #ccc;
margin-bottom: 5px;
margin-top: 5px;
font-weight: bold !important;
}
.buttonOnVeziHarta {
color: #91a3bf !important;
border: 1px solid #777777;
border-radius: 2px !important;
font-weight: bold !important;
background: transparent;
font-size: 14px !important;
letter-spacing: .07em !important;
cursor: pointer !important;
font-family: 'Rubik', sans-serif;
display: inline-block;
outline: none;
text-align: center !important;
transition: all .3s;
text-transform: uppercase;
padding: 1px 15px;
margin: 5px;
background-color: #ffffff00 !important;
}
.buttonOnVeziHarta:hover {
background: #3a3a3a !important;
border-color: #fff !important;
}
.buttonOnContactLocation{
color: #91a3bf !important;
border: 1px solid #777777;
border-radius: 4px !important;
font-weight: bold!important;
background: transparent;
font-size: 14px !important;
letter-spacing: .07em !important;
cursor: pointer !important;
font-family: 'Rubik', sans-serif;
display: inline-block;
outline: none;
text-align: center !important;
transition: all .3s;
text-transform: uppercase;
padding: 8px 25px;
margin: 15px;
}
.buttonOnContactLocation:hover {
background: #3a3a3a !important;
border-color: #fff !important;
}
.BtnOnSubscribe{
color: #383d40 !important;
border-radius: 4px !important;
width: 50% !important;
font-weight: bold!important;
background-color: #5e9366 !important;
text-transform: upper !important;
font-size: 14px !important;
letter-spacing: .03em !important;
cursor: pointer !important;
font-family: 'Rubik', sans-serif;
}
.BtnOnSubscribe:hover {
background:transparent !important;
border-color: #72d881 !important;
color: #72d881 !important;
}
.subtitle_on_romania {
text-align: center;
text-transform: none;
}
.headerOn {
background-image: linear-gradient(#f2694f, white) !important;
}
.TitleOn2{
text-align: center !important;
font-size: 20px !important;
line-height: 2 !important;
}
.TitleOnDesktop{
text-align: center !important;
font-size: 30px !important;
line-height: 2 !important;
}
.TitleRecomandateOn{
text-align: left !important;
padding: 0.3em 0.8em;
font-size: 25px !important;
}
.TitleAlteEvenimenteInOras{
text-align: left !important;
padding: 0.3em 0.8em;
font-size: 25px !important;
}
.TitleChiarAcumOn
{
text-align: left !important;
padding: 0.3em 0.8em;
font-size: 30px !important;
}
.search_on {
margin: 0px 40px 30px 40px;
border: 1px solid #ffffff;
cursor: pointer;
display: block;
font-size: 14px;
font-family: Rubik;
justify-content: space-between;
height: 30px;
line-height: 20px;
padding: 5px 15px;
background: white;
border-radius: 5px;
}
.search_on .search_icon {
float: right;
}
.search_on .search_events {
float: left;
}
.oarse_menu{
margin: 0px 0px 17px 100px;
}
.dropbtn {
border: none;
cursor: pointer;
}
.ONcefaci_head_bottom {
font-size: 15px !important;
font-family: 'Rubik',sans-serif !important;
letter-spacing: 0.4px !important;
color: #423f3f ;
text-transform: uppercase;
}
.buttonOnCeFaci {
color: #ffff !important;
}
.buttonOnOras {
background-color: #e9edef !important;
color: #555555 !important;
border-radius: 2px;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
/* font-weight: unset !important; */
}
.ONcefaci_head {
font-size: 15px !important;
font-family: 'Rubik',sans-serif !important;
letter-spacing: 0.4px !important;
color: #423f3f;
text-transform: uppercase;
}
.ONorase_head {
font-size: 18px !important;
font-family: 'Rubik',sans-serif !important;
font-weight: bold !important;
letter-spacing: 0.8px !important;
color: #726f6f !important;
text-transform: uppercase;
padding: 10px 10px 10px 5px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 230px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left: 60%;
transform: translateX(-70%);
border-radius:5px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
color: #979494;
font-size: 16px !important;
font-family: 'Rubik',sans-serif !important;
font-weight: bold !important;
letter-spacing: 0.4px !important;
border-radius:0px;
}
.dropdown-content-ce-faci a {
padding: 12px 16px;
text-decoration: none;
display: block;
color: #1e1e1e;
font-size: 16px !important;
font-family: 'Rubik',sans-serif !important;
font-weight: bold !important;
letter-spacing: 0.4px !important;
border-radius:0px;
}
.dropdown-content a:hover {background-color: #d4d2d2}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: #f55033;
}
.dropdown:hover .ONcefaci_head {
color: black;
}
.dropdown:hover .ONorase_head {
color: #f55033;
}
.dropdown-content-ce-faci a:hover {background-color: #d4d2d2 !important}
.dropdown:hover .dropdown-content-ce-faci {
display: block;
}
.custome-list{
column-count: 2;
}
.dropbtn_orase {
border: none;
cursor: pointer;
}
.dropdown_orase {
position: relative;
display: inline-block;
}
.dropdown-content-orase {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 150px;
z-index: 1;
left: 0%;
transform: translateX(-50%);
border-radius:5px;
}
.dropdown-content-orase a {
padding: 12px 16px;
text-decoration: none;
display: block;
color: #979494;
font-size: 16px !important;
font-family: 'Rubik',sans-serif !important;
font-weight: bold !important;
letter-spacing: 0.4px !important;
border-radius:0px;
}
.dropdown-content-orase a:hover {background-color: #d4d2d2}
.dropdown_orase:hover .dropdown-content-orase {
display: block;
}
.dropdown_orase:hover .dropbtn {
color: #f55033;
}
.dropdown_orase:hover .ONorase_head {
color: #f55033;
}
.dropdown-content-ce-faci {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 230px;
box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
z-index: 1;
left: 60%;
transform: translateX(-30%);
border-radius: 5px;
}
.buttonOnCeFaciHome {
background-color: #e9edef !important;
color: #39364fcf!important;
border-radius: 5px;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
text-align: left;
letter-spacing: 1px;
}
.inCeOras{
color: #f94f2e !important;
font-weight: bolder;
}
.buttonOnCeFaciLuniMartiBanner {
background-color: #e9edef1f !important;
color: #bfbfbf !important;
border-radius: 2px;
font-weight: unset !important;
border: 0.8px solid #ffffff7d;
margin-bottom: 5px;
margin-top: 5px;
font-weight: bold !important;
}
.buttonOnOrasRedBanner {
background-color: #ef4a2b40 !important;
color: #bfbfbf !important;
border-radius: 2px;
border: 0.8px solid #ffffff7d;
}
.orase {
color: #999999!important;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
}
.google-map {
padding-bottom: 40%;
position: relative;
}
.google-map iframe {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
}
.transcript-on-div {
background-color: rgba(255, 0, 0, 0.1);
padding: 0.5rem 1rem; /* Ajustează padding-ul pe verticală și orizontală */
margin: 1rem; /* Ajustează marginile exterioare */
border-radius: 4px;
font-size: 1rem;
line-height: 1.5;
word-wrap: break-word;
display: inline-block;
max-width: 100%; /* Adăugat max-width */
box-sizing: border-box;
}
.transcript-on-error-div {
background-color: rgba(255, 0, 0, 0.8);
padding: 0.5rem 1rem; /* Ajustează padding-ul pe verticală și orizontală */
margin: 1rem; /* Ajustează marginile exterioare */
border-radius: 4px;
color:white;
font-size: 1rem;
line-height: 1.5;
word-wrap: break-word;
display: inline-block;
max-width: 100%; /* Adăugat max-width */
box-sizing: border-box;
}
.link-on {
margin: 0 10px;
font-size: 14px;
text-decoration: none;
color: #0073aa;
}
.link-on:hover {
color: #00a0d2;
}
.button-on {
width: 200px;
padding: 10px 0;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
text-align: center;
cursor: pointer;
margin: 10px 0;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
.titleOnLocOrg {
color: rgb(85, 85, 85) !important;
letter-spacing: 0.1px;
font-size: 20px !important;
text-align: center;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif !important;
}
.trending {
background-image: radial-gradient(#fff, #eff0e8) !important
}
.recomandate{
background-image: radial-gradient(#ada06a3d, #ffffff) !important;
}
.titleSection {
color: rgb(85, 85, 85) !important; letter-spacing: 0.1px; font-size: 20px !important; text-align: center;
/*font-family: 'Rubik',sans-serif !important; font-weight: bold !important;*/
padding: 0px 8px 15px 8px;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif !important;
}
.buttonOnUndeMergiToateCategoriile {
background-image: radial-gradient(#fff, #ddd) !important;
color: #555!important;
border-radius: 5px;
line-height: 3em!important;
font-family: "Rubik",sans-serif;
}
/* Pentru dispozitivele mobile mici */
@media only screen and (max-width: 767px) {
.button-on {
width: 100%;
padding: 5px 0;
font-size: 12px;
}
}
/* Pentru dispozitivele mobile medii */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.button-on {
width: 80%;
padding: 5px 0;
font-size: 12px;
}
}
/* Pentru dispozitivele mobile mari și tablete */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.button-on {
width: 60%;
padding: 5px 0;
font-size: 12px;
}
}
/* Pentru dispozitive desktop */
@media only screen and (min-width: 1200px) {
.button-on {
width: 40%;
padding: 5px 0;
font-size: 14px;
}
}
.trendingEventPage {
background-image: radial-gradient(#fde548, #ddd) !important;
}
.buttonOnCand {
/* background-color: #e9edef; */
background-color: #e9edef;
color: #545353!important;
border-radius: 2px;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
font-weight: bold;
border: 1px solid #d2d2d2;
}
.buttonOnTrending {
/* background-color: #e9edef; */
background-color: #fee583;
color: #545353!important;
border-radius: 2px;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
font-weight: bold;
border: 1px solid #dacb91;
}
.buttonOnCeFaciRed {
color: #f2694f !important;
}
.buttonOnOrasRed {
background-color: #f2694f !important;
color: #ffff !important;
border-radius: 2px;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
}
.scrollmenu {
display: none;
}
@media only screen and (max-width: 500px) {
.scrollmenu {
justify-content: flex-start;
display: flex;
overflow: auto;
white-space: nowrap;
padding: 10px 0; /* spațiu adăugat deasupra și dedesubtul cardurilor */
box-shadow: 0 0.5px 2px #aaa;
}
.scrollmenu .card:first-child {
margin-left: 15px; /* sau orice altă valoare care funcționează bine pentru design-ul dvs. */
}
.scrollmenu::after {
content: ''; /* necesar pentru a genera pseudo-elementul */
flex: 0 0 15px; /* Acesta va adăuga un spațiu de 20px după ultimul card */
}
.scrollmenu .card_tip_event {
flex: 0 0 auto;
margin: 4px;
height: 120px;
width: 110px;
background: #e9edef;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2px;
box-sizing: border-box; /* asigurați-vă că acest stil este setat pentru a include padding-ul în lățimea cardului */
}
.card:hover {
transform: translateY(-3px);
background: #ccc;
}
.icon-container, .text-container {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.text-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1;
color: #39364fcf;
padding: 8px; /* Ajustează pentru a asigura spațiu în jurul textului */
font-size: 2.5vw; /* Font-size adaptabil la dimensiunea cardului */
max-font-size: 16px; /* Asigură că textul nu devine prea mare */
min-font-size: 10px; /* Asigură că textul nu devine prea mic */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 2px; /* Adaugă un mic spațiu pe lateral, dacă este necesar */
}
.scrollmenu .card:nth-last-child(2) .text-container{
color: #f2694f;
font-size: 3.5vw;
}
.scrollmenu .material-icons, .material-symbols-rounded {
color: #f2694f;
font-size: 8vw; /* Dimensiunea iconiței responsivă */
max-font-size: 64px;
min-font-size: 24px;
}
.ampersand {
color: #AEAEAE;
}
.card_calendar {
height: 110px;
width: 30px;
}
}
.scrollmenu2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: auto;
padding: 40px 0;
flex-direction: row;
align-content: stretch;
align-items: stretch;
font-family: 'Rubik';
font-weight: bold;
}
.card2 {
flex: 0 0 calc(29.333% - 0px);
margin: 5px; /* Ajustați spațiul dintre carduri dacă este necesar */
height: 120px;
width: 90%;
background: #e9edef;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2px;
box-sizing: border-box; /* asigurați-vă că acest stil este setat pentru a include padding-ul în lățimea cardului */
}
.card2:hover {
transform: translateY(-3px);
background: #ccc;
}
.ampersand {
color: #CCCCCC;
}
/* Pentru tablete */
@media only screen and (min-width: 501px) and (max-width: 1024px) {
.scrollmenu2 {
justify-content: center;
padding: 10px 10px 10px;
flex-wrap: wrap; /* Permite cardurilor să treacă pe un nou rând pe mobil */
}
.material-icons, .material-symbols-rounded {
font-size: 5vw;
}
.text-container {
font-size: 2vw;}
.card2 {
flex: 1 0 20%; /* Flexibil, cu o bază de 20% din spațiul disponibil */
max-width: 100px; /* O lățime maximă pentru a evita carduri prea largi */
margin: 10px; /* Spațiu între carduri */
}
}
/* Pentru desktop */
@media only screen and (min-width: 1025px) {
.scrollmenu2 {
justify-content: center;
padding: 40px 110px 45px;
flex-wrap: wrap; /* Permite cardurilor să treacă pe un nou rând pe mobil */
}
.material-icons, .material-symbols-rounded {
font-size: 3vw;
padding: 5px;
color: #f2694f !important;
}
.text-container {
font-size: 1vw;
}
.card2 {
flex: 1 0 20%; /* Flexibil, cu o bază de 20% din spațiul disponibil */
max-width: 118px; /* O lățime maximă pentru a evita carduri prea largi */
margin: 10px; /* Spațiu între carduri */
}
}
/* Pentru mobil */
@media only screen and (max-width: 500px) {
.scrollmenu2 {
padding: 15px 10px 15px;
flex-wrap: wrap; /* Permite cardurilor să treacă pe un nou rând pe mobil */
}
}
/*############*/
/* Stiluri generale pentru .scrollmenu3, aplicabile pentru toate dispozitivele */
.scrollmenu3 {
display: flex;
flex-direction: row;
overflow-x: auto;
padding: 40px;
font-family: 'Rubik';
font-weight: bold;
align-items: stretch;
justify-content: center; /* Centrează cardurile pe ecran */
}
/* Stiluri specifice pentru cardurile .card3 */
.card3 {
margin: 5px;
background: #e9edef;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2px;
box-sizing: border-box;
}
.card3:hover {
transform: translateY(-3px);
background: #ccc;
}
.text-container3 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 20px;
color: #545353;
padding: 20px 0px 10px 0px;
/*font-size: 4.5vw;*/
max-font-size: 16px;
min-font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 2px;
}
.ampersand {
color: #CCCCCC;
}
/* Pentru tablete */
@media only screen and (min-width: 501px) and (max-width: 1024px) {
.scrollmenu3 {
justify-content: center;
padding: 10px;
flex-wrap: wrap;
}
.card3 {
flex: 1 0 calc(33.333% - 20px); /* Ajustează la aproximativ o treime din spațiul disponibil */
margin: 10px; /* Spațiu între carduri */
/* max-width: 100px; */ /* Poți comenta sau ajusta această linie dacă este necesar */
}
.material-icons, .material-symbols-rounded {
font-size: 5vw;
}
.scrollmenu3 .arata_tot {
background-color: #f2694f;
}
.scrollmenu3 .arata_tot .text-container3 {
color: #fff !important;
line-height: 30px;
}
.icon-container-arata-tot .material-icons,
.icon-container-arata-tot .material-symbols-rounded {
font-size: 5vw;
color: #ffffff !important;
}
.centered-icon {
display: block;
text-align: center;
margin: 15px auto;
font-size: 40px;
color: #474747bd;
}
}
/* Pentru desktop */
@media only screen and (min-width: 1025px) {
.scrollmenu3 {
justify-content: center;
padding: 40px 100px 40px;
flex-wrap: wrap;
}
.material-icons, .material-symbols-rounded {
font-size: 3vw;
padding: 5px;
color: #f2694f !important;
}
.text-container3 {
font-size: 1vw;
}
.card3 {
flex: 1 0 20%; /* Flexibil, cu o bază de 20% din spațiul disponibil */
max-width: 118px; /* O lățime maximă pentru a evita carduri prea largi */
margin: 10px; /* Spațiu între carduri */
}
.card3:hover .arata_tot {
transform: translateY(-3px);
background: #ccc;
}
.scrollmenu3 .arata_tot {
background-color: #f2694f; /*
max-width: 230px; /* O lățime maximă pentru a evita carduri prea largi */
}
.scrollmenu3 .arata_tot .text-container3 {
color: #fff !important; /* Text alb pentru vizibilitate */
line-height: 30px;
font-size: 0.8vw;
}
.icon-container-arata-tot .material-icons,
.icon-container-arata-tot .material-symbols-rounded {
/* Se aplică doar iconițelor din ultimul card */
color: #ffffff !important;
font-size: 3.5vw;
}
}
/* Pentru mobil */
@media only screen and (max-width: 500px) {
.scrollmenu3 {
flex-wrap: wrap; /* Permite cardurilor să treacă pe un nou rând pe mobil */
padding: 30px 10px 0px 10px;
}
.card3 {
flex: 0 0 calc(40% - 0px); /* Ajustează pentru a avea mai multe coloane pe mobil */
height: 140px;
width: 40%;
}
.card3:hover .arata_tot {
transform: translateY(-3px);
background: #ccc;
}
.scrollmenu3 .arata_tot {
background-color: #f2694f; /*
max-width: 230px; /* O lățime maximă pentru a evita carduri prea largi */
}
.scrollmenu3 .arata_tot .text-container3 {
color: #fff !important; /* Text alb pentru vizibilitate */
line-height: 30px;
}
.icon-container-arata-tot .material-icons,
.icon-container-arata-tot .material-symbols-rounded {
/* Se aplică doar iconițelor din ultimul card */
color: #ffffff !important;
font-size: 12vw;
}
}
.scrollmenu3 .arata_tot .text-container3 {
flex-direction: row; /* ARATĂ TOT pe o singură linie */
gap: 5px; /* spațiu între cuvinte */
line-height: 1.2;
}
.scrollmenucalendarmobil {
display: none;
}
@media only screen and (max-width: 500px) {
.scrollmenucalendarmobil {
justify-content: flex-start;
display: flex;
overflow: auto;
white-space: nowrap;
padding: 15px 5px; /* spațiu adăugat deasupra și dedesubtul cardurilor */
}
.scrollmenucalendarmobil .card_day:first-child {
margin-left: 10px; /* sau orice altă valoare care funcționează bine pentru design-ul dvs. */
}
.scrollmenucalendarmobil::after {
content: ''; /* necesar pentru a genera pseudo-elementul */
flex: 0 0 15px; /* Acesta va adăuga un spațiu de 20px după ultimul card */
}
.scrollmenucalendarmobil .card_day.card_tip_event{
height: 120px;
width: 110px;
}
.scrollmenucalendarmobil .card_day {
margin: 4px;
background: #e9edef;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px;
box-sizing: border-box; /* asigurați-vă că acest stil este setat pentru a include padding-ul în lățimea cardului */
flex: 0 0 auto;
height: 80px;
width: 90px;
}
.card_day:hover {
transform: translateY(-3px);
background: #ccc;
}
.icon-container, .text-container4 {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.card_tip_event .text-container4 {
line-height: 1;
}
.text-container4 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 2;
color: #39364fcf;
padding: 12px 0px 0px 0px;
font-size: 4.5vw; /* Font-size adaptabil la dimensiunea cardului */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 2px; /* Adaugă un mic spațiu pe lateral, dacă este necesar */
}
.scrollmenucalendarmobil .card:nth-last-child(2) .text-container{
color: #f2694f;
font-size: 3.5vw;
}
.scrollmenucalendarmobil .material-icons,
.scrollmenucalendarmobil .material-symbols-rounded {
color: #f2694f; /* Culoarea iconițelor */
font-size: 7vw; /* Dimensiunea fontului ca procent din lățimea viewport-ului */
max-font-size: 64px; /* Dimensiunea maximă a fontului */
min-font-size: 24px; /* Dimensiunea minimă a fontului */
}
.ampersand {
color: #CCCCCC;
}
}
/*************************/
.scrollmenucalendardesktop {
display: flex;
overflow-x: auto;
white-space: nowrap;
padding: 15px 20px;
}
.scrollmenucalendardesktop .card_day {
flex: 0 0 auto;
width: 15vw; /* Lățimea fiecărui card */
margin: 4px;
background: #e9edef;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(27, 31, 35, 0.15);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px;
box-sizing: border-box;
}
.scrollmenucalendardesktop .card_day:hover {
transform: translateY(-3px);
background: #ccc;
}
.scrollmenucalendardesktop .text-container4 {
font-size: 2vw; /* Mărimea fontului */
color: #39364fcf;
padding: 21px 0px 0px 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
}
/* Ajustări pentru ecrane mai mari (de exemplu, tablete și desktop-uri) */
@media only screen and (min-width: 768px) {
.scrollmenucalendardesktop .card_day {
width: 11vw; /* Lățimea fiecărui card pe ecrane mai mari */
}
.scrollmenucalendardesktop .icon-container i.material-symbols-rounded {
font-size: 3vw;
}
.scrollmenucalendardesktop .text-container4 {
font-size: 1.5vw;
}
}
@media only screen and (min-width: 1024px) {
.scrollmenucalendardesktop .card_day {
width: 8vw; /* Lățimea fiecărui card pe ecrane și mai mari */
}
.scrollmenucalendardesktop .icon-container i.material-symbols-rounded {
font-size: 2vw;
}
.scrollmenucalendardesktop .text-container4 {
font-size: 1vw;
}
}
/* Ascunde .scrollmenucalendardesktop pe dispozitive mobile */
@media only screen and (max-width: 500px) {
.scrollmenucalendardesktop {
display: none;
}
}
.full-width-div-on {
display: block;
width: 100%;
height: 8px; /* sau orice altă înălțime doriți */
background-color: #f3f3f3;
box-shadow: 0 0.5px 2px #aaa;
}
.titleSectionCalendarEvenimente {
color: rgb(85, 85, 85) !important;
letter-spacing: 0.1px;
font-size: 18px !important;
text-align: center;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif !important;
}
.buttonOnArataTot {
/* background-color: #e9edef; */
background-color: #f2694f;
color: #ffffff!important;
border-radius: 4px;
border: 1px solid #ccc;
}
.custom-link-on {
color: blue; /* Setează culoarea link-ului */
text-decoration: none; /* Opțional, elimină sublinierea implicită */
}
.custom-link-on:hover {
text-decoration: underline; /* Adaugă subliniere când treci cu mouse-ul peste */
}
.ButtonOnAdd {
background-color: #52b4e4 !important;
color: #ffffff !important;
border-radius: 5px;
font-family: Neue Plak, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
}
.support-link {
text-align: center !important;
margin-bottom: 20px !important; /* Adăugăm mai mult spațiu dedesubt */
width: 100% !important; /* Asigurăm centrare */
display: flex !important;
justify-content: center !important;
}
.support-link a {
font-size: 18px !important;
font-weight: bold;
color: #7a97e9 !important;
}
.support-link a:hover {
text-decoration: none !important;
}
.separator {
display: flex !important;
align-items: center !important;
text-align: center !important;
margin: 20px 0px 30px 0px !important;
width: 100%;
}
.separator::before,
.separator::after {
content: "";
flex: 1;
border-bottom: 1px solid #ccc !important;
margin: 0 10px !important; /* Reducem marginile */
}
.separator span {
color: #888 !important;
font-weight: bold !important;
position: relative !important;
}
.custom-list li {
margin-bottom: 10px;
}
.custom-list li a {
color: #0000ff !important;
text-decoration: underline !important;
}
.custom-list li:last-child a {
color: #000080 !important;
}
.inCeOrasMobile {
color: #f94f2e !important;
font-weight: bolder;
font-size: smaller;
}
.ui-datepicker-calendar {
font-size: 16px; /* Mărește dimensiunea textului din calendar */
}
.ButtonOnEvent {
background-color: #52b4e4 !important;
color: #ffffff !important;
border-radius: 5px;
font-family: Neue Plak, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
text-align: left;
padding-left: 15px !important;
}
.on_h1 {
color: #2d9cdb !important;
}
/* --- POPUP ORAȘE --- */
.city-popup {
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100vw; height: 100vh;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
}
.city-popup-content {
background: #fff;
border-radius: 10px;
padding: 32px 28px 24px 28px;
box-shadow: 0 6px 48px #0003;
max-width: 400px;
width: 90vw;
min-width: 260px;
position: relative;
}
.close-popup {
position: absolute;
top: 10px; right: 14px;
font-size: 1.8em;
background: none; border: none;
color: #d92e5b;
cursor: pointer;
line-height: 1;
}
.city-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 18px;
}
.city-grid a {
display: block;
background: #fff;
color: #222;
border: 1px solid #eee;
border-radius: 5px;
padding: 11px 8px;
text-align: center;
font-weight: 600;
text-decoration: none;
transition: background 0.14s;
font-size: 1.08em;
}
.city-grid a:hover,
.city-grid a:focus {
background: #f2f2f2;
}
/* --- Responsive pentru popup și grilă --- */
@media (max-width: 600px) {
.city-popup-content {
padding: 20px 8px 14px 8px;
max-width: 98vw;
min-width: unset;
}
.city-grid {
grid-template-columns: 1fr 1fr;
gap: 7px;
}
}
/* --- BUTOANE ORAȘE --- */
.dropbtn_orase {
background: none;
border: none;
cursor: pointer;
padding: 18px 14px;
border-radius: 40px;
transition: background 0.18s;
display: flex;
align-items: center;
}
.dropbtn_orase:hover,
.dropbtn_orase:focus {
background: none;
outline: none;
}
/* --- Vizibilitate desktop/mobil pentru butoane --- */
.desktop-only { display: inline-block; }
.mobile-only { display: none; }
@media (max-width: 767px) {
.desktop-only { display: none !important; }
.mobile-only { display: inline-block !important; }
}
.dropbtn_orase {
background: none;
border: none;
cursor: pointer;
margin: 10px;
border-radius: 40px;
transition: background 0.18s;
display: flex;
align-items: center;
justify-content: center;
}
.flow-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1000px;
margin: auto;
}
.flow-box div {
flex: 1 1 250px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
padding: 20px;
text-align: center;
}
.flow-box h3 {
font-size: 20px;
margin-bottom: 30px !important;
}
.flow-box p {
font-size: 20px;
color: #555;
}
.tips-on h2 {
margin-bottom: 60px !important;
font-size: 26px;
}
.cta-on h2 {
margin-bottom: 60px !important;
font-size: 26px;
}
.card-on {
flex: 1 1 240px;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
text-align: left;
}
.card-on h4 {
margin-bottom: 10px;
font-size: 20px;
margin-bottom: 30px !important;
}
.card-on p {
color: #444;
}
.tips-on {
padding: 60px 20px;
text-align: center;
}
.tips-on ul {
list-style: none;
padding: 0;
max-width: 700px;
margin: auto;
font-size: 20px;
text-align: left;
}
.tips-on li::before {
content: "✅ ";
color: #28a745;
}
.cta-on {
background: #fff2d8;
text-align: center;
padding: 60px 20px;
}
.cta-on h2 {
font-size: 24px;
}
.cta-on p {
max-width: 700px;
margin: auto;
font-size: 20px;
margin-bottom: 20px;
}
@media (min-width: 769px) {
.mobile-only {
display: none;
}
.desktop-only {
display: block;
}
.ghid-wrapper {
display: flex;
align-items: center;
gap: 40px;
max-width: 1200px;
margin: auto;
padding: 40px;
}
}
#promote_mebox_title {
color: #ffffff !important;
padding: 20px 5px 27px 15px !important;
background: #182635 !important;
}
#promote_desktop
.button_generic_eo_2 {
font-family: 'Rubik' !important;
border-radius: 0px;
padding: 16px 25px 16px 25px;
box-shadow: unset;
}
#promote_desktop
.button_1_eo {
font-size: 23px;}
#promote_desktop
.btyy {
text-align: right !important;
}
/* Asigură-te că containerul imaginii are poziționare relativă */
#promote_desktop .event_img {
position: relative;
}
.feedback-button {
display: inline-block;
padding: 12px 22px !important;
background-color: #f2694f; /* portocaliu */
color: #fff !important; /* text alb */
font-family: 'Rubik', sans-serif; /* font identic cu restul site-ului */
font-size: 18px !important; /* mărime mai mare */
font-weight: 700 !important; /* bold */
border-radius: 6px;
text-decoration: none;
text-transform: none !important;
transition: background-color 0.3s ease;
}
.feedback-button:hover {
background-color: #423f3f;
}
.EvenimenteDin {
padding-top: 0px !important;
padding-bottom: 0px !important;
background-color: #f1f1f1 !important;
}
.oe-center{ text-align:center; }
.oe-hero{ text-align:center; padding: 8px 16px 0; }
.oe-hero-title{ font-size:28px; line-height:1.2; margin:8px 0; font-weight:800; }
.oe-hero-sub{ max-width:680px; margin:0 auto 12px; color:#64748b; font-size:23px; }
.oe-title{ font-size:24px; font-weight:800; text-align:center; margin:8px 0; }
.oe-sub{ text-align:center; color:#64748b; margin:6px auto 16px; max-width:720px; }
.oe-grid-2{ display:grid; gap:14px; grid-template-columns:1fr; }
.oe-grid-3{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width: 768px){
.oe-grid-2{ grid-template-columns:1fr 1fr; }
.oe-grid-3{ grid-template-columns:1fr 1fr 1fr; }
}
.oe-cards .oe-card{
background:#fff; border:1px solid #e6e7eb; border-radius:16px;
padding:16px; box-shadow:0 8px 32px rgba(30,41,59,.06);
}
.oe-card h3{ font-size:18px; font-weight:800; margin:6px 0 6px; }
.oe-card p{ color:#525a6a; margin:0; }
.oe-pill{
height:6px; background:#22c1dc; border-radius:999px; width:100%;
margin: -2px 0 10px; display:block;
}
.oe-link{ display:inline-block; margin-top:10px; font-weight:700; color:#2563eb; text-decoration:none; }
.oe-link:hover{ text-decoration:underline; }
.oe-list{ max-width:760px; margin:0 auto; padding:0 16px; }
.oe-list li{ margin: 8px 0; color:#334155; }
.oe-list code{ background:#f1f5f9; padding:2px 6px; border-radius:6px; }
/* —— Onevent UTM Builder • Mobile look like AllEvents —— */
#onevent-utm-builder.onevent-utm-builder{
--bg:#fff; --card:#fff; --border:#e6e7eb; --muted:#8a8f98; --text:#0f172a;
--primary:#3b82f6; --primary-d:#2463d6; --focus:rgba(59,130,246,.15);
max-width: 680px; margin: 16px auto; padding: 0; background: var(--bg); border:0; box-shadow:none;
}
/* Card cu padding mare ca pe mobil */
#onevent-utm-builder .onevent-utm-form{
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 18px;
margin: 12px 16px;
}
/* Etichete compacte, bold subtil */
#onevent-utm-builder label {
font-weight: 600;
color: #555;
font-size: 15px;
line-height: 1.25;
margin: 20px 10px 5px 5px;
}
#onevent-utm-builder .hint{ color: var(--muted); font-size: 12.5px; margin-top: 6px; }
/* Inputs & selects – stil „mobile app” */
#onevent-utm-builder input,
#onevent-utm-builder select{
width: 100%;
background: #f8fafc;
color: var(--text);
padding: 10px 10px;
border-radius: 5px !important;
font-size: 16px;
line-height: 1.35;
outline: none;
-webkit-appearance: none;
appearance: none;
background-color: rgba(246, 246, 246, 0.3);
border: 2px solid #D8DDE6 !important;
}
/* Placeholder vizibil, ca în exemplu */
#onevent-utm-builder input::placeholder{ color:#9aa0a6; }
/* Focus vizibil, albastru */
#onevent-utm-builder input:focus,
#onevent-utm-builder select:focus{
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--focus);
background:#fff;
}
/* „Details” (optional) ca pe AllEvents */
#onevent-utm-builder details.onevent-adv{
margin: 6px 0 2px;
}
#onevent-utm-builder details.onevent-adv summary{
cursor:pointer; font-weight:700; color:var(--text);
padding:10px 0;
}
/* Butoane – late, rotunjite, full width */
#onevent-utm-builder .onevent-actions{
margin-top: 8px; display:flex; gap:10px; flex-wrap:wrap;
}
/* QR */
#onevent-utm-builder .onevent-qr-wrap{ margin-top:14px; text-align:left; }
#onevent-utm-builder .onevent-qr-wrap img{ width:200px; height:200px; display:block; border-radius:8px; }
/* ——— Grid & card (dacă le ai deja, păstrează-le; acestea sunt safe) ——— */
#oe-tools{ padding:28px 0 18px; background:linear-gradient(180deg,#eef6ff,#f7fbff); }
#oe-tools .oe-tools-title{ text-align:center; font-weight:800; font-size:28px; margin:0 0 6px; color:#0f172a; padding: 15px;}
#oe-tools .oe-tools-sub{ text-align:center; color:#64748b; margin:0 0 18px; padding: 15px; }
#oe-tools .oe-tools-grid{ display:grid; gap:16px; grid-template-columns:1fr; max-width:1100px; margin:0 auto; padding:0 14px; }
@media(min-width:900px){ #oe-tools .oe-tools-grid{ grid-template-columns:repeat(3,1fr); } }
#oe-tools .oe-tool-card{
background:#fff; border:1px solid #e6e7eb; border-radius:16px; overflow:hidden;
box-shadow: 0 5px 10px rgba(15,23,42,.06);
transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column;
}
#oe-tools .oe-tool-card:hover{ transform:translateY(-3px); box-shadow:0 18px 50px rgba(15,23,42,.10); }
/* ——— Header ilustrat + icon ——— */
#oe-tools .oe-tool-illu{
display:flex; align-items:center; justify-content:center; height:120px; position:relative;
}
#oe-tools .oe-g1{ background:linear-gradient(180deg,#e8f3ff,#f6fbff); }
#oe-tools .oe-g2{ background:linear-gradient(180deg,#e9fff7,#f6fffb); }
#oe-tools .oe-g3{ background:linear-gradient(180deg,#f0f6ff,#f9f6ff); }
/* Material Icon mare, cu „pastilă” albă sub ea */
#oe-tools .oe-mi{
font-size:64px; line-height:1; color:#0f172a; /* culoarea iconului */
background:#fff; border-radius:18px; padding:10px 12px; box-shadow:0 8px 30px rgba(2,6,23,.08);
}
/* ——— Body ——— */
#oe-tools .oe-tool-body{ padding:16px; }
#oe-tools .oe-tool-body h3{ font-size:20px; font-weight:800; margin:0 0 6px; color:#111827; }
#oe-tools .oe-tool-body p{ color:#4b5563; margin:0 0 10px; }
#oe-tools .oe-tool-link{ display:inline-block; font-weight:800; color:#2563eb; text-decoration:none; padding:8px 0; position:relative; }
#oe-tools .oe-tool-link::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#2563eb; transition:width .18s; }
#oe-tools .oe-tool-link:hover::after{ width:100%; }
/* ——— UTM box ca în exemplul 2 ——— */
.oe-utm .oe-title{
font-size:30px; font-weight:800; margin:6px 0 10px;
}
.oe-utm .oe-sub{
max-width:860px; margin:0 auto 22px; color:#64748b; font-size:18px;
}
/* Cutia mare albă care conține cele 3 item-uri */
.oe-utm-box{
max-width:1100px;
margin:0 auto;
padding:32px 28px;
background:#fff;
border:1px solid #e8eef6;
border-radius:20px;
box-shadow:0 16px 40px rgba(15,23,42,.07);
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
}
/* Anulează stilul de „card” din alte zone */
.oe-utm-box .oe-card{
background:transparent;
border:0;
box-shadow:none;
border-radius:0;
padding:18px 24px;
text-align:center;
position:relative; /* pentru separator */
}
/* Separator vertical între coloane (desktop) */
@media (min-width: 900px){
.oe-utm-box .oe-card:not(:first-child)::before{
content:"";
position:absolute;
left:0; top:14px; bottom:14px;
width:1px; background:#eef2f7;
}
}
/* Separator orizontal pe mobil (1 coloană) */
@media (max-width: 899.98px){
.oe-utm-box{ grid-template-columns:1fr; }
.oe-utm-box .oe-card + .oe-card{ border-top:1px solid #eef2f7; }
}
/* Pastila turcoaz de sus */
.oe-utm-box .oe-pill{
width:120px; height:6px; border-radius:999px;
background:#21c1d6; margin:0 auto 14px;
}
/* Titlu + text din fiecare item */
.oe-utm-box .oe-card h3{
font-size:24px; line-height:1.15; font-weight:800;
margin:8px 0 8px; color:#0f172a;
}
.oe-utm-box .oe-card p{
max-width:420px; margin:0 auto;
color:#4b5563; line-height:1.6; font-size:18px;
}
/* Ajustează umbra din jurul cutiei la hover (opțional) */
.oe-utm-box:hover{ box-shadow:0 20px 48px rgba(15,23,42,.10); }
.onevent-utm-head{
text-align:center;
margin-bottom:1.25rem;
}
.onevent-utm-head .oe-title{
margin:0 0 .25rem;
font-weight:800;
font-size:clamp(22px,3vw,34px);
}
.onevent-utm-head .oe-sub{
margin:0;
color:#555;
}
.oe-mi{ font-size: 56px; }
.oe-card-promo .oe-promo-title a {
color: #353636;
font-family: 'Rubik' !important;
font-weight: 700;
}
/* Headline + intro */
.on-wrap { margin-top: 8px; }
.on-type-header .page-title {
font-weight: 800; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.2; margin: 8px 0 10px;
}
.on-type-intro p { margin: 0 0 10px; color: #4b4b4b; font-size: clamp(16px, 1.15vw, 18px); }
/* Cloud cu linkuri de tipuri */
.on-chip-cloud { display: flex; flex-wrap: wrap; align-items: center;
gap: 10px; margin: 38px 0 6px; }
.on-chip-cloud__title {
border: 0; background: #f3f4f6; color: #111827; padding: 6px 10px; border-radius: 999px;
font-weight: 700; cursor: default;
}
/* Chipsurile de categorii, folosite pe cinci șabloane: toate-tipurile,
tip-eveniment, oras-categorie, oras-hub și oras-evenimente. O singură
definiție, deci se schimbă dintr-un loc.
CE ERA: chenar de 2px pe fiecare, fundal transparent. Cu 34 de categorii
ieșea un gard — toate cu aceeași greutate, niciuna citibilă dintr-o privire.
Chenarele erau și cea mai mare parte din zgomot.
CE E ACUM: fără chenar, un fundal neutru foarte deschis. Culoarea o primesc
doar la hover și pe cea curentă, deci ochiul are unde să se odihnească.
INTRAREA: apar decalat, câte 18ms una după alta. E singura mișcare din
componentă și rulează o dată; restul e static. Decalajul e scris până la 40
de chipsuri — peste, intră toate odată cu ultimul pas, ceea ce nu se vede.
Sub `prefers-reduced-motion` nu se animează nimic. */
.on-chip {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border: 0;
border-radius: 999px;
background: #f3f3f4;
color: #33383f;
font-size: 15px;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.on-chip:hover,
.on-chip:focus-visible {
transform: translateY(-1px);
background: #fdeee9;
color: #d2492e;
}
/* Categoria pe care ești: ancora rândului. Înainte era text roșu pe lavandă,
care semăna cu o eroare. */
.on-chip.is-activ,
.on-chip[aria-current] {
background: #23262b;
color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
.on-chip {
animation: on-chip-intra .32s cubic-bezier(.22,.61,.36,1) both;
}
.on-chip:nth-child(1) { animation-delay: .00s }
.on-chip:nth-child(2) { animation-delay: .018s }
.on-chip:nth-child(3) { animation-delay: .036s }
.on-chip:nth-child(4) { animation-delay: .054s }
.on-chip:nth-child(5) { animation-delay: .072s }
.on-chip:nth-child(6) { animation-delay: .09s }
.on-chip:nth-child(7) { animation-delay: .108s }
.on-chip:nth-child(8) { animation-delay: .126s }
.on-chip:nth-child(9) { animation-delay: .144s }
.on-chip:nth-child(10) { animation-delay: .162s }
.on-chip:nth-child(11) { animation-delay: .18s }
.on-chip:nth-child(12) { animation-delay: .198s }
.on-chip:nth-child(13) { animation-delay: .216s }
.on-chip:nth-child(14) { animation-delay: .234s }
.on-chip:nth-child(15) { animation-delay: .252s }
.on-chip:nth-child(16) { animation-delay: .27s }
.on-chip:nth-child(17) { animation-delay: .288s }
.on-chip:nth-child(18) { animation-delay: .306s }
.on-chip:nth-child(19) { animation-delay: .324s }
.on-chip:nth-child(20) { animation-delay: .342s }
.on-chip:nth-child(n+21) { animation-delay: .36s }
}
@keyframes on-chip-intra {
from { opacity: 0; transform: translateY(8px) }
to { opacity: 1; transform: none }
}
/* dacă reclama rămâne într-un flex container, oblig-o pe un rând întreg */
.on-chip-cloud .on-ad { flex: 0 0 100%; width: 100%; }
.on-ad { width: 100%; text-align: center; margin: 16px 0; }
.on-chip-cloud {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 38px auto 6px; /* auto pentru centrare */
padding: 0 16px; /* margini stânga/dreapta */
max-width: 1200px; /* sau cât are containerul tău Flatsome (1140, 1280 etc.) */
box-sizing: border-box; /* să includă padding-ul în lățime */
}
@media (max-width: 768px){
.on-chip-cloud {
padding: 0 12px;
margin: 24px auto 24px;
}
}
.buttonOnAdaugaEveniment {
background-color: #0fcb4740 !important;
color: #e8e3e3 !important;
border-radius: 2px;
font-weight: unset !important;
border: 0.8px solid #ffffff7d;
margin-bottom: 5px;
margin-top: 5px;
font-weight: bold !important;
}
.onbar--desktop .on-quickbar a.button.primary {
background-color: #2e8c2e !important;
border-color: #2e8c2e !important;
color: #fff !important;
border-radius: 4px;
}
.onbar--desktop .on-quickbar a.button.primary:hover {
filter: brightness(0.9);
}
/* Lățime pagină ca la conținut, dar separată de .container-ul temei */
.on-ad-outer{ width:100%; }
.on-ad-inner{
max-width:1140px; /* aprox. lățimea containerului Flatsome */
margin:0 auto;
padding:0 14px; /* gutter pe mobil */
box-sizing:border-box;
}
.on-ad-inner .adsbygoogle{
display:block;
max-width:728px;
margin:0 auto; /* centrează unitatea în interior */
}
@media (min-width:1024px){
.on-ad-inner{ padding:0 20px; }
}
.recomandate-onevent-m {
display: inline-block;
padding: 5px 10px;
border-radius: 0 5px 5px 5px;
}
.recomandate-text-m {
color: #fff !important;
font-weight: 700;
font-size: 30px;
margin-right: 8px;
}
.title-on-highlight {
color: #fff !important;
font-weight: 700;
font-size: 22px;
}
/* titlu albastru */
.xmas-title a {
background-color: dodgerblue;
color: #fff !important;
padding: 6px 10px;
font-size: 24px;
font-weight: 700;
border-radius: 4px;
text-decoration: none;
}
.xmas-title a:hover {
background-color: #0073e6;
transition: background 0.3s ease;
}
/* subtitlu */
.xmas-subtitle {
color: #444;
font-weight: 700;
margin-top: 10px;
font-size: 20px;
}
/* lista orase */
.xmas-list {
list-style: none;
padding-left: 15px;
margin-top: 15px;
}
.xmas-list li {
margin: 8px 0;
font-size: 18px;
font-weight: 600;
}
.xmas-list a {
color: #555;
text-decoration: none;
transition: color 0.2s ease;
}
.xmas-list a:hover {
color: dodgerblue;
}
/* Responsive */
@media (max-width: 768px) {
.xmas-title a {
font-size: 20px;
padding: 5px 8px;
}
.xmas-subtitle {
font-size: 18px;
}
.xmas-list li {
font-size: 16px;
}
}
/* Bază comună */
.notification-popup{
display:none; /* ascuns; JS îl arată după 15s */
position:fixed;
background:#fff;
padding:18px 20px;
max-width:360px;
border-radius:12px;
box-shadow:0 12px 32px rgba(0,0,0,.18);
border:1px solid rgba(0,0,0,.06);
z-index:1000000;
opacity:0;
transition: opacity .9s cubic-bezier(.2,.8,.2,1),
transform .9s cubic-bezier(.2,.8,.2,1);
will-change: transform, opacity;
}
.notification-inner{display:flex;gap:12px;align-items:flex-start;text-align:left}
.notification-popup i{font-size:24px;color:#555;margin-top:2px}
.notification-popup p{margin:0;font-size:16px;color:#444;line-height:1.4}
.notification-actions{margin-top:12px;display:flex;gap:10px}
.subscribe-button,.dismiss-popup{padding:10px 14px;border-radius:6px;font-weight:600;text-decoration:none;font-size:15px;flex:1;white-space:nowrap;text-align:center}
.dismiss-popup{background:#e6e6e6;color:#0096f2}
/* Desktop: colț dreapta-jos, intrare din dreapta */
#notification-popup-desktop{
bottom:16px; right:16px;
transform: translateX(48px);
}
#notification-popup-desktop.is-visible{
opacity:1; transform: translateX(0);
}
/* Mobil: bară jos full (sau aproape full), intrare din jos */
#notification-popup-mobile{
left:12px; right:12px; bottom:12px;
max-width:none;
transform: translateY(36px);
}
#notification-popup-mobile.is-visible{
opacity:1; transform: translateY(0);
}
/* Închidere animată (ambele) */
.notification-popup.is-hiding{
opacity:0; transform: translateY(16px);
transition-duration: .28s;
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
.notification-popup{transition:none; transform:none}
.notification-popup.is-visible{opacity:1}
}
/* ====== Mobile – banner jos full width, text mai mare, butoane centrate ====== */
#notification-popup-mobile{
left: 0; right: 0; bottom: 0;
width: 100%;
max-width: none;
padding: 14px 14px 12px;
padding-bottom: calc(14px + env(safe-area-inset-bottom));
border-radius: 0;
box-shadow: 0 -2px 12px rgba(0,0,0,.12);
background: #fff;
transform: translateY(24px);
opacity: 0;
transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s cubic-bezier(.2,.8,.2,1);
}
#notification-popup-mobile.is-visible{
transform: translateY(0);
opacity: 1;
}
/* ascunde iconița pentru a reduce înălțimea */
#notification-popup-mobile i { display: none; }
/* text mai lizibil */
#notification-popup-mobile p {
margin: 0 0 10px 0;
font-size: 15px;
line-height: 1.4;
color: #333;
text-align: center;
}
/* conținut pe coloană */
#notification-popup-mobile .notification-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* butoanele centrate */
#notification-popup-mobile .notification-actions {
display: flex;
justify-content: center;
gap: 10px;
width: 100%;
}
#notification-popup-mobile .subscribe-button,
#notification-popup-mobile .dismiss-popup {
flex: 1 1 45%;
max-width: 160px;
text-align: center;
padding: 8px 0;
font-size: 14px;
font-weight: 600;
border-radius: 6px;
white-space: nowrap;
}
#notification-popup-mobile .subscribe-button {
background: #0096f2;
color: #fff;
}
#notification-popup-mobile .dismiss-popup {
background: #e6e6e6;
color: #0096f2;
}
.oe-nl-card{ background:#fff; border:1px solid #eee; }
.oe-nl-input{ background:#fff; border-color:#e2e2e2; }
.onbar--mobile {
border-bottom: 0px solid #e5e7eb !important;
}
.feedback-button {
display: inline-block;
background: #e85c41;
color: #fff !important;
padding: 12px 22px;
border-radius: 8px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 16px;
transition: all 0.25s ease-in-out;
}
.feedback-button:hover {
background: #d84e36;
transform: translateY(-2px);
}
}
.about-onevent .ghid-text {
text-align: left;
}
.about-faq .faq-card {
text-align: left;
}
.about-faq .faq-card h4 {
text-align: left;
}
.about-faq .faq-card ul {
margin: 0 0 1rem 0;
}
.about-faq .faq-card li {
list-style: none;
margin: 0 0 .3rem;
}
.faq-list li {
list-style: none !important;
position: relative;
padding-left: 28px;
margin-bottom: 10px;
font-size: 17px;
color: #333;
}
.faq-list li::before {
content: "✔";
position: absolute;
left: 0;
top: 1px;
font-size: 16px;
color: #16a34a;
font-weight: 600;
}
.channels-on.about-faq .faq-card {
text-align: left;
}
.faq-list {
list-style: none !important;
margin: 0;
padding: 0;
}
.faq-list li {
position: relative;
padding-left: 26px;
margin-bottom: 8px;
font-size: 17px;
color: #333;
}
.faq-list li::before {
content: "\2713";
position: absolute;
left: 0;
top: 2px;
font-size: 14px;
color: #16a34a;
font-weight: 600;
}
.about-onevent .oe-tool-link {
display: inline-block;
position: relative;
font-weight: 700;
color: #2563eb;
text-decoration: none;
}
.about-onevent .oe-tool-link::after {
content: "";
position: absolute;
left: 0;
bottom: -2px; /* puțin sub text */
width: 0;
height: 2px;
background: #2563eb;
border-radius: 999px;
transition: width .18s ease-out;
}
.about-onevent .oe-tool-link:hover::after {
width: 100%;
}
.about-onevent .oe-tool-link:hover {
color: #1d4ed8;
}
/* === OnEvent Stats Section Fix === */
.on-stats-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 30px;
text-align: center;
}
.on-stats-wrapper .on-stat {
flex: 0 0 25%; /* 4 coloane egale pe desktop */
}
/* Tablete */
@media (max-width: 768px) {
.on-stats-wrapper {
flex-wrap: wrap;
}
.on-stats-wrapper .on-stat {
flex: 0 0 50%;
margin-bottom: 20px;
}
}
/* Telefoane */
@media (max-width: 480px) {
.on-stats-wrapper .on-stat {
flex: 0 0 100%;
}
}
/* CULOAREA numerelor mari */
.on-stat-number {
color: #6ec7f3 !important;
}
.recomandateOnEvent {
background-color: #e9edef;
background-color: #0f0f0f;
color: #efefef !important;
border-radius: 2px;
font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
font-weight: bold;
border: 1px solid #373637;
}
@media (max-width:360px){
.onbar--mobile .on-mbtn{
flex:1 1 100%; /* fiecare buton pe un rând, toate egale */
}
}
/* Eliminăm marginile default ale Flatsome pe butoanele din quickbar */
.onbar--mobile .on-mbtn {
margin-right: 0 !important;
margin-left: 0 !important;
}
.on-chip-title {
margin: 0 0 8px;
font-size: 1.4em;
font-weight: 600;
line-height: 1.3;
}
.on-chip-description {
margin: 0 0 16px;
color: #666;
font-size: 0.95em;
line-height: 1.5;
}
/* City Hub Links */
.on-city-hub-links {
margin: 24px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.on-hub-link {
flex: 1;
min-width: 200px;
padding: 12px 20px;
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 6px;
text-decoration: none;
color: #333;
font-weight: 500;
text-align: center;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.on-hub-link:hover {
border-color: #4CAF50;
background: #f0f8f0;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.on-hub-icon {
font-size: 1.2em;
}
/* Responsive */
@media (max-width: 768px) {
.on-city-hub-links {
flex-direction: column;
padding: 16px;
}
.on-hub-link {
min-width: 100%;
}
.on-chip-title {
font-size: 1.2em;
}
}
.on-ad-top-desktop,
.on-ad-bottom-desktop {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.on-ad-top-mobile,
.on-ad-bottom-mobile {
display: none;
justify-content: center;
align-items: center;
width: 100%;
}
.on-ad-top-desktop > div,
.on-ad-top-mobile > div,
.on-ad-bottom-desktop > div,
.on-ad-bottom-mobile > div {
max-width: 100%;
overflow: hidden;
}
@media (max-width: 849px) {
.on-ad-top-desktop,
.on-ad-bottom-desktop {
display: none;
}
.on-ad-top-mobile,
.on-ad-bottom-mobile {
display: flex;
}
}
/* Titles */
.mailchimp-priority-form .form-title{
margin:0 0 10px 0 !important;
padding:0 !important;
color:#333 !important;
font-size:26px !important;
font-weight:700 !important;
letter-spacing:-0.5px !important;
line-height:1.2 !important;
font-family:inherit !important;
}
.mailchimp-priority-form .form-subtitle{
color:#666 !important;
font-size:14px !important;
margin:0 0 20px 0 !important;
padding:0 !important;
font-weight:400 !important;
line-height:1.5 !important;
}
.mailchimp-priority-form .required-star{
color:#e74c3c !important;
}
/* Intro box */
.mailchimp-priority-form .priority-intro-box{
margin:0 0 20px 0 !important;
padding:16px !important;
line-height:1.5 !important;
background:#fff !important;
border-radius:6px !important;
border-left:4px solid #27ae60 !important;
border-top:none !important;
border-right:none !important;
border-bottom:none !important;
}
.mailchimp-priority-form .intro-title{
margin:0 0 8px 0 !important;
padding:0 !important;
font-size:16px !important;
font-weight:600 !important;
color:#333 !important;
line-height:1.3 !important;
}
.mailchimp-priority-form .intro-text{
margin:0 0 8px 0 !important;
padding:0 !important;
font-size:14px !important;
color:#555 !important;
line-height:1.5 !important;
}
.mailchimp-priority-form .intro-text:last-child{
margin-bottom:0 !important;
}
/* Form fields */
.mailchimp-priority-form .form-field{
margin-bottom:15px !important;
padding:0 !important;
}
.mailchimp-priority-form .form-field label,
.mailchimp-priority-form label{
display:block !important;
margin-bottom:5px !important;
padding:0 !important;
font-weight:600 !important;
color:#333 !important;
font-size:14px !important;
line-height:1.4 !important;
}
.mailchimp-priority-form .form-field input[type="email"],
.mailchimp-priority-form .form-field input[type="text"],
.mailchimp-priority-form input[type="email"],
.mailchimp-priority-form input[type="text"]{
width:100% !important;
max-width:100% !important;
padding:12px !important;
border:1px solid #ddd !important;
border-radius:6px !important;
font-size:14px !important;
box-sizing:border-box !important;
font-family:inherit !important;
transition:border-color 0.3s !important;
background:#fff !important;
color:#333 !important;
line-height:1.5 !important;
height:auto !important;
margin:0 !important;
}
.mailchimp-priority-form .form-field input[type="email"]:focus,
.mailchimp-priority-form .form-field input[type="text"]:focus,
.mailchimp-priority-form input[type="email"]:focus,
.mailchimp-priority-form input[type="text"]:focus{
outline:none !important;
border-color:#27ae60 !important;
box-shadow:0 0 0 3px rgba(39,174,96,0.1) !important;
}
/* Optional label text */
.mailchimp-priority-form .optional-text{
color:#999 !important;
font-weight:400 !important;
font-size:13px !important;
}
.mailchimp-priority-form .social-title{
font-weight:600 !important;
color:#333 !important;
font-size:14px !important;
margin:0 0 12px 0 !important;
padding:0 !important;
line-height:1.4 !important;
}
.mailchimp-priority-form .social-options{
margin-top:12px !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
gap:10px !important;
}
.mailchimp-priority-form .radio-label{
display:flex !important;
align-items:center !important;
cursor:pointer !important;
padding:4px 0 !important;
margin:0 !important;
}
.mailchimp-priority-form .radio-label input[type="radio"]{
margin-right:8px !important;
margin-top:0 !important;
margin-bottom:0 !important;
cursor:pointer !important;
}
.mailchimp-priority-form .radio-label span{
font-size:14px !important;
color:#555 !important;
line-height:1.4 !important;
}
/* GDPR / Privacy */
.mailchimp-priority-form .gdpr-label{
display:block !important;
margin-bottom:8px !important;
padding:0 !important;
font-weight:600 !important;
color:#333 !important;
font-size:14px !important;
}
.mailchimp-priority-form .gdpr-text{
font-size:13px !important;
color:#666 !important;
margin:0 0 10px 0 !important;
padding:0 !important;
line-height:1.5 !important;
}
.mailchimp-priority-form .checkbox-label{
display:flex !important;
align-items:flex-start !important;
cursor:pointer !important;
margin:0 0 10px 0 !important; /* added spacing */
padding:0 !important;
}
.mailchimp-priority-form .checkbox-label input[type="checkbox"]{
margin-right:8px !important;
margin-top:3px !important;
margin-bottom:0 !important;
cursor:pointer !important;
flex-shrink:0 !important;
}
.mailchimp-priority-form .checkbox-label span{
font-size:14px !important;
color:#555 !important;
line-height:1.5 !important;
}
/* Links */
.mailchimp-priority-form .checkbox-label a,
.mailchimp-priority-form a{
color:#3498db !important;
text-decoration:none !important;
font-weight:500 !important;
}
.mailchimp-priority-form .checkbox-label a:hover,
.mailchimp-priority-form a:hover{
text-decoration:underline !important;
color:#2980b9 !important;
}
/* Submit button */
.mailchimp-priority-form .submit-wrapper{
clear:both !important;
margin-top:16px !important;
padding:0 !important;
}
.mailchimp-priority-form .submit-button,
.mailchimp-priority-form input[type="submit"].submit-button,
.mailchimp-priority-form #mc-embedded-subscribe{
background:#27ae60 !important;
background-color:#27ae60 !important;
color:#fff !important;
padding:14px 30px !important;
border:none !important;
border-radius:6px !important;
font-size:16px !important;
font-weight:600 !important;
cursor:pointer !important;
width:100% !important;
max-width:100% !important;
font-family:inherit !important;
transition:all 0.3s !important;
text-align:center !important;
line-height:1.5 !important;
height:auto !important;
box-shadow:none !important;
text-transform:none !important;
letter-spacing:normal !important;
}
.mailchimp-priority-form .submit-button:hover,
.mailchimp-priority-form input[type="submit"].submit-button:hover,
.mailchimp-priority-form #mc-embedded-subscribe:hover{
background:#229954 !important;
background-color:#229954 !important;
transform:translateY(-1px) !important;
box-shadow:0 4px 12px rgba(39,174,96,0.3) !important;
color:#fff !important;
}
/* Paragraph spacing (IMPORTANT: keep spacing, no "all p margin:0") */
.mailchimp-priority-form p{
margin:0 0 10px 0 !important;
padding:0 !important;
line-height:1.5 !important;
}
.mailchimp-priority-form p:last-child{
margin-bottom:0 !important;
}
.mailchimp-priority-form form{
margin:0 !important;
padding:0 !important;
}
/* Responses */
.mailchimp-priority-form #mce-responses{
margin:10px 0 !important;
}
.mailchimp-priority-form #mce-error-response,
.mailchimp-priority-form #mce-success-response{
padding:10px !important;
margin:10px 0 !important;
border-radius:4px !important;
}
.mailchimp-priority-form #mce-error-response{
background-color:#ffebee !important;
color:#c62828 !important;
}
.mailchimp-priority-form #mce-success-response{
background-color:#e8f5e9 !important;
color:#2e7d32 !important;
}
.on-location-thumb-wrap{
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.on-location-thumb{
width: 150px;
height: 150px;
border-radius: 10px;
object-fit: cover;
display: block;
}
.on-organizer-thumb-wrap{
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.on-organizer-thumb{
width: 150px;
height: 150px;
border-radius: 10px;
object-fit: cover;
display: block;
}
.on-editorial-hero { padding: 18px; background: #f8f9fa; border-radius: 10px; margin-bottom: 16px;
}
/* ═══════════════════════════════════════════════════════════════════════════
CARUSEL DE EVENIMENTE („Evenimente similare"), ca la AllEvents
═══════════════════════════════════════════════════════════════════════════
Un rând de carduri pe care îl tragi cu degetul. NU e slider: e o listă cu
`overflow-x:auto` și `scroll-snap`, deci pe telefon merge fără niciun script,
iar pe desktop primește două săgeți din assets/js/carusel.js.
De ce nu slider-ul EventON: cardurile lui vin din designer-ul plugin-ului, cu
markup și stiluri pe care le-am fi corectat regulă cu regulă, iar flexslider
cere JS ca să tragi de el pe telefon.
Valorile sunt măsurate pe carusel-ul lor, nu alese din ochi:
- titlu 24px/700 (20px pe telefon), subtitlu 18px/400 #777 (16px);
- trei carduri pe desktop, cu 3,35% între ele;
- poza 2:1 (ei o cer de la CDN ca `rs:fill:500:250`), colț 10px;
- data 13px #8b8c8f, numele 15px/600 #22242b pe două rânduri.
Pe telefon la ei se văd trei carduri minuscule în secțiunea asta, dar în
„City's Favorite" — cea din care ne-am luat modelul — cardul ține 56% din
ecran, cu vecinii ghiciți la margini. Am luat varianta a doua: pe 390px, trei
carduri ar însemna 116px lățime, adică titluri de câte cinci rânduri.
═══════════════════════════════════════════════════════════════════════════ */
.on-car{
box-sizing:border-box;
max-width:1140px;
margin:0 auto;
padding:0 15px;
}
/* Aerul dintre secțiuni îl dădea `[section]`-ul Flatsome de dinainte; acum
caruselul îl aduce cu el. */
.on-car-sectiune{ padding:40px 0; background:#fff; }
@media (max-width:767px){
.on-car-sectiune{ padding:28px 0; }
}
.on-car__titlu{
margin:0 0 10px !important;
font-size:24px !important;
font-weight:700 !important;
line-height:28px !important;
color:#2e363f !important;
text-transform:none !important;
}
.on-car__sub{
margin:0 !important;
font-size:18px !important;
font-weight:400 !important;
line-height:1.35 !important;
color:#777 !important;
}
/* Titlul la stânga, săgețile la dreapta, pe același rând — ca la ei. */
.on-car__cap{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:20px;
}
.on-car__cap-text{ min-width:0; }
.on-car__sageti{ display:none; flex:0 0 auto; gap:8px; }
@media (min-width:986px){
.on-car__sageti{ display:flex; }
/* Fără margini laterale pe desktop: pista ține exact 1140px, cât containerul
paginii, deci cardurile încep de unde începe și articolul de deasupra —
și ies 353px, cât la ei. Cu cei 15px, cardul rămânea la 345. */
.on-car{ padding:0; }
}
/* Filtrul pe zile al caruselului — apare doar unde onevent_carusel_html() e
chemat cu $cu_taburi. Filtrarea o face assets/js/carusel.js, ascunzând
carduri; feliile de zile sunt aceleași ca la taburile de pe listare.
Fără JS, rândul rămâne întreg — ceea ce e oricum răspunsul corect. */
.on-car__taburi{
display:flex;
align-items:center;
gap:22px;
margin:0 0 16px;
overflow-x:auto;
scrollbar-width:none;
}
.on-car__taburi::-webkit-scrollbar{ display:none; }
.on-car__tab{
flex:0 0 auto;
padding:6px 0;
border:0;
border-bottom:2px solid transparent;
background:none;
color:#6b7280;
font-size:15px;
line-height:1.2;
white-space:nowrap;
cursor:pointer;
}
.on-car__tab:hover{ color:#111827; }
.on-car__tab.is-activ{
color:#111827;
font-weight:700;
border-bottom-color:#111827;
}
/* Clasă, nu atributul `hidden`: cardul e `display:flex`, iar stilul temei ar
bate regula implicită a browserului pentru [hidden]. */
.on-car__card--ascuns{ display:none !important; }
.on-car__gol{
margin:8px 0 0;
color:#6b7280;
font-size:14px;
}
/* Pista. `scroll-snap` ca degetul să lase cardul aliniat, nu la jumătate.
Bara de scroll o ascundem — cardurile tăiate la margine spun singure că mai
e conținut, ca la ei. */
.on-car__pista{
display:flex;
gap:3.35%;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding:2px 0 6px;
margin:0;
list-style:none;
}
.on-car__pista::-webkit-scrollbar{ display:none; }
.on-car__card{
flex:0 0 31.1%; /* trei carduri + două spații de 3,35% — chiar lățimea lor */
scroll-snap-align:center; /* la ei cardul se oprește pe centru la orice lățime */
display:block;
min-width:0;
border-radius:12px;
background:#fff;
color:inherit;
text-decoration:none !important;
transition:transform .18s ease;
}
.on-car__card:hover{ transform:translateY(-2px); }
/* Poza e un `![]()
` de la 27 aug 2026 — înainte era un ``
cu `background-image`, iar fundalurile se încarcă toate, imediat.
`object-fit` face ce făcea `center/cover`. Fundalul rămâne pentru cardul
fără poză, care primește tot un ``. */
.on-car__poza{
display:block;
width:100%;
aspect-ratio:2 / 1;
border-radius:10px;
object-fit:cover;
object-position:center;
background:#e9edf2 center/cover no-repeat;
}
.on-car__data{
display:block;
margin:10px 0 4px;
font-size:13px;
line-height:1.4;
color:#8b8c8f;
}
.on-car__nume{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
font-size:15px;
font-weight:600;
line-height:1.4;
color:#22242b;
}
.on-car__loc{
display:block;
margin-top:4px;
font-size:13px;
line-height:1.4;
color:#8b8c8f;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* Săgețile: cerculețe de 30px, cât la ei. Pe telefon nu apar deloc — acolo
tragi cu degetul. Stau cu `hidden` în HTML și le scoate JS-ul de acolo doar
dacă chiar e unde derula, deci nu clipesc la încărcare și nu apar degeaba pe
un carusel cu trei carduri care încap toate. */
.on-car__nav{
display:flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
padding:0;
border:1px solid #e2e6ea;
border-radius:50%;
background:#fff;
box-shadow:none;
cursor:pointer;
transition:border-color .15s ease, background-color .15s ease;
}
.on-car__nav[hidden]{ display:none; }
.on-car__nav::before{
content:'';
display:block;
width:8px; height:8px;
border-right:2px solid #3c4043;
border-bottom:2px solid #3c4043;
}
.on-car__nav--prev::before{ transform:translateX(2px) rotate(135deg); }
.on-car__nav--next::before{ transform:translateX(-2px) rotate(-45deg); }
.on-car__nav:hover{ border-color:#f2694f; background:#fdf1ee; }
/* Pragurile sunt măsurate pe caruselul lor, direct în browser, la nouă lățimi
(allevents.in/bucharest/candlelight-disney-love-songs/...):
≤486px card 70% din ecran, ~4% între ele, 22% din următorul la vedere
>486px card 31,1% — trei carduri, la orice lățime peste prag
≥1140 containerul se oprește la 1140, deci cardul rămâne la 353px
Nu 85vw, cât scrie în CSS-ul lor pentru telefon, și nu două carduri între
486 și 986, cât zice CSS-ul paginii lor de oraș — pe pagina de eveniment,
măsurat, iese 70% și trei carduri. Cu 85vw nu se mai vedea nimic din vecin:
arăta ca un singur eveniment, nu ca un rând prin care poți trage. */
@media (max-width:767px){
.on-car__titlu{ font-size:20px !important; line-height:26px !important; }
.on-car__sub{ font-size:16px !important; }
.on-car__cap{ margin-bottom:16px; }
.on-car__data{ font-size:14px; }
.on-car__nume{ font-size:16px; line-height:20px; }
.on-car__loc{ font-size:14px; }
}
@media (max-width:486px){
.on-car__pista{ gap:4vw; }
.on-car__card{ flex-basis:70vw; }
}
/* ── Caruselul pe bandă întunecată ────────────────────────────────────────
Doar pentru „Recomandate", care stă pe gradientul negru. Cardurile albe pe
fundalul ăla arătau ca niște plasturi lipite; aici cardul dispare ca cutie și
rămâne doar poza cu textul sub ea, pe fundalul secțiunii.
Aceeași anatomie de card ca pe alb — poză 2:1, dată, titlu, loc — deci
secțiunea se distinge fără să pară altă componentă. Culorile sunt singura
diferență, plus un chenar subțire pe poză, ca să nu plutească atunci când
imaginea are ea însăși margini întunecate. */
.on-car--pe-inchis .on-car__titlu{ color:#f4f2f0 !important; }
.on-car--pe-inchis .on-car__sub{ color:#b3aeaa !important; }
.on-car--pe-inchis .on-car__card{
background:transparent;
}
.on-car--pe-inchis .on-car__poza{
background-color:#2b2726;
box-shadow:0 0 0 1px rgba(255,255,255,.09);
}
.on-car--pe-inchis .on-car__nume{ color:#f4f2f0; }
.on-car--pe-inchis .on-car__data,
.on-car--pe-inchis .on-car__loc{ color:#a9a4a0; }
.on-car--pe-inchis .on-car__card:hover .on-car__nume{ color:#fff; }
.on-car--pe-inchis .on-car__nav{
border-color:rgba(255,255,255,.22);
background:rgba(255,255,255,.08);
color:#f4f2f0;
}
.on-car--pe-inchis .on-car__nav:hover{
border-color:rgba(255,255,255,.45);
background:rgba(255,255,255,.16);
}
/* Pastila „N zile" de pe cardul de carusel. Cardul devine ancora ei, iar poza
are deja `aspect-ratio`, deci pastila stă mereu în colțul imaginii, nu peste
text. Vezi onevent_carusel_html() în functions.php. */
.on-car__card{ position:relative; }
.on-car__card .on-car__zile{
position:absolute;
top:8px;
left:8px;
z-index:2;
padding:3px 8px;
border-radius:999px;
background:rgba(17,24,39,.82);
color:#fff;
font-size:12px;
font-weight:600;
line-height:1.25;
white-space:nowrap;
pointer-events:none;
}
/* ── Caruselul pe banda galbenă de promovare ──────────────────────────────
Pentru bannerul plătit din tip-eveniment.php, care stă pe `.sectionPromo3`
(#f6cd00). Spre deosebire de banda întunecată, aici cardul RĂMÂNE cutie
albă: pe galben, un card fără fundal s-ar pierde, iar plasarea e plătită
tocmai ca să se vadă.
Poza primește puțin aer în jur, ca să nu pară lipită de marginea cutiei —
afișele promovate sunt adesea colorate tare și se lovesc de galben. */
.on-car--pe-galben .on-car__titlu{ color:#1a1a1a !important; }
.on-car--pe-galben .on-car__sub{ color:#5c5334 !important; }
.on-car--pe-galben .on-car__card{
padding:8px 8px 12px;
border-radius:12px;
background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,.10);
}
.on-car--pe-galben .on-car__card:hover{
box-shadow:0 6px 16px rgba(0,0,0,.16);
}
.on-car--pe-galben .on-car__nume{ color:#1a1a1a; }
.on-car--pe-galben .on-car__data,
.on-car--pe-galben .on-car__loc{ color:#6b6b6b; }
/* Pastila „N zile" ar cădea peste colțul cutiei albe, nu al pozei — o mutăm
înăuntru cu exact cât are cardul padding. */
.on-car--pe-galben .on-car__card .on-car__zile{ top:16px; left:16px; }
.on-car--pe-galben .on-car__nav{
border-color:rgba(0,0,0,.18);
background:#fff;
}
.on-car--pe-galben .on-car__nav:hover{
border-color:rgba(0,0,0,.38);
background:#fffdf3;
}
/* ── Evenimente pe mai multe zile, pe orice card EventON ──────────────────
Mutat din toate-tipurile.css, unde era ancorat în `.on-feed` — o clasă pusă
de un singur șablon. Un festival de nouă zile arăta „Joi 27 Aug • 20:00" pe
/brasov/concert/ și pe hub, adică peste tot în afară de o pagină.
Clasa `.on-multi` o pune scriptul din functions.php, după ce citește
`data-time` de pe card și aplică pragul de 08:00. CSS singur n-ar putea:
`.evo_end` există și la evenimentele de o zi cu oră de final.
Blocul original de dată rămâne în DOM, doar ascuns — îl citesc EventON și
roboții. Peste el punem un singur rând, „26 – 30 aug".
SPECIFICITATEA: regula care face vizibile jumătățile blocului de dată e, în
card-eveniment.css,
.ajde_evcal_calendar.ajde_evcal_calendar.sev #evcal_list... > span
adică un id și cinci clase, tipărită la 102 — după fișierul ăsta. Deci nu
ajunge s-o egalăm, trebuie depășită: de aici `.on-multi` și `:not()` în plus. */
.ajde_evcal_calendar.ajde_evcal_calendar #evcal_list.eventon_events_list .on-multi .evoet_dayblock > span:not(.on-interval){
display:none !important;
}
.ajde_evcal_calendar.ajde_evcal_calendar #evcal_list.eventon_events_list .on-multi .evcal_cblock .on-interval{
display:inline !important;
font-family:inherit !important;
font-size:13px !important;
font-weight:400 !important;
font-style:normal !important;
line-height:1.3 !important;
letter-spacing:normal !important;
color:#6b7280 !important;
text-transform:none !important;
}
/* Pastila cu numărul de zile, peste poză. Nu atinge rândurile de text, deci nu
poate lungi nimic — se vede din scanare, fără citit. */
.ajde_evcal_calendar .evoet_c1{ position:relative; }
.on-zile{
position:absolute;
top:8px;
left:8px;
z-index:2;
padding:3px 8px;
border-radius:999px;
background:rgba(17,24,39,.82);
color:#fff;
font-size:12px;
font-weight:600;
line-height:1.25;
letter-spacing:.01em;
white-space:nowrap;
pointer-events:none;
}
/* ── Bannerul de promovare ────────────────────────────────────────────────
Plasare plătită, deci banda își desenează singură fundalul — nu mai stă pe
`.sectionPromo3`, galbenul plat pe care afișul părea lipit.
IDEEA: fundalul vine din chiar afișul evenimentului, blurat și întunecat,
iar afișul se vede ÎNTREG deasupra. Același tipar ca banner-ul de pe pagina
de eveniment (`.onevent-banner`), unde a fost rezolvată aceeași problemă:
posterele sunt pătrate sau verticale, iar o încadrare 16:9 taie exact ce a
plătit omul. Așa, fiecare promovare arată croită pe ea.
Galbenul supraviețuiește ca accent — linia de sub titlu — ca semnalul „e
plătit" să nu se piardă. */
.on-promo{
max-width:1140px;
margin:0 auto;
padding:26px 18px 30px;
border-radius:14px;
background:linear-gradient(160deg,#141313 0%,#262121 55%,#171514 100%);
}
.on-promo__titlu{
margin:0 0 18px !important;
font-size:clamp(26px, 5.4vw, 38px) !important;
font-weight:800 !important;
line-height:1.05 !important;
letter-spacing:.01em !important;
color:#fff !important;
text-transform:uppercase !important;
}
.on-promo__titlu::after{
content:"";
display:block;
width:56px;
height:4px;
margin-top:12px;
border-radius:2px;
background:#f6cd00;
}
.on-promo__pista{
display:flex;
gap:16px;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
margin:0;
padding:0;
list-style:none;
}
.on-promo__pista::-webkit-scrollbar{ display:none; }
.on-promo__card{
display:flex;
flex:0 0 88%;
scroll-snap-align:start;
min-width:0;
border-radius:12px;
overflow:hidden;
background:rgba(255,255,255,.06);
color:inherit;
text-decoration:none !important;
transition:background-color .18s ease;
}
/* Singurul banner ia toată lățimea: n-are după ce să lase loc. */
.on-promo__pista > .on-promo__card:only-child{ flex-basis:100%; }
.on-promo__card:hover{ background:rgba(255,255,255,.11); }
/* Afișul: întreg, pe fundalul făcut din el însuși. */
.on-promo__poza{
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 46%;
min-width:0;
min-height:230px;
overflow:hidden;
background:#1b1918;
}
.on-promo__fundal{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
filter:blur(16px) brightness(.72);
transform:scale(1.15);
}
.on-promo__poza img{
position:relative;
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:300px;
object-fit:contain;
}
.on-promo__text{
display:flex;
flex-direction:column;
justify-content:center;
gap:8px;
min-width:0;
padding:22px 26px;
}
.on-promo__data{ font-size:14px; line-height:1.4; color:#c9c2bc; }
.on-promo__nume{
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
font-size:clamp(19px, 2.2vw, 24px);
font-weight:700;
line-height:1.3;
color:#fff;
}
.on-promo__loc{
font-size:14px;
line-height:1.4;
color:#c9c2bc;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@media (max-width:849px){
.on-promo{ padding:22px 14px 24px; border-radius:0; }
.on-promo__card{ flex-direction:column; flex-basis:92%; }
.on-promo__poza{ flex:0 0 auto; min-height:0; padding:14px 0; }
.on-promo__poza img{ max-height:340px; }
.on-promo__text{ padding:14px 16px 18px; }
}