` cand zona are pagina, `` cand nu — `display:block`
trebuie spus, altfel linkul ar fi inline si nu si-ar tine inaltimea. */
.v6-dest-image{
display:block;
height:250px;
overflow:hidden;
}
.v6-dest-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s;
}
.v6-dest-card:hover img{
transform:scale(1.05);
}
/* CONTENT */
.v6-dest-content{
padding:28px;
}
.v6-dest-content h3 a{
color:inherit;
text-decoration:none;
}
.v6-dest-content h3 a:hover{
color:#00991a;
}
.v6-dest-content h3{
font-size:24px;
margin:0 0 12px;
color:#17252b;
}
.v6-dest-content p{
font-size:15px;
line-height:1.6;
color:#667085;
margin-bottom:20px;
}
/* LOCATION TAG */
.v6-location{
display:inline-flex;
padding:7px 16px;
border-radius:30px;
font-size:14px;
font-weight:600;
}
.v6-location.green{
background:#e7f7ef;
color:#008f68;
}
.v6-location.blue{
background:#e8f3ff;
color:#0077b6;
}
.v6-location.orange{
background:#fff1df;
color:#e67e00;
}
@media(max-width:900px){
.v6-dest-card{
width:calc(50% - 28px);
}
}
@media(max-width:600px){
.v6-dest-card{
width:100%;
max-width:360px;
}
.v6-dest-header h2{
font-size:32px;
}
}
/* === SECTION: offers === */
.v6-offers-section{
padding:90px 20px;
background:
linear-gradient(
135deg,
#f5faf8,
#ffffff,
#f2f8ff
);
}
.v6-offers-container{
max-width:1200px;
margin:auto;
}
.v6-offers-header{
text-align:center;
margin-bottom:50px;
}
.v6-offers-label{
display:inline-flex;
background:#e7f7ef;
color:#008f68;
padding:7px 18px;
border-radius:30px;
font-size:14px;
font-weight:700;
}
/* mobil: titlu scalabil */
.v6-offers-header h2{
font-size:clamp(26px, 5.5vw, 42px);
margin:15px 0;
color:#17252b;
}
.v6-offers-header p{
color:#667085;
}
.v6-offers-grid{
--row-cols:3;
--row-gap:28px;
}
.v6-offer-card{
background:white;
border-radius:30px;
overflow:hidden;
/* latime fixa -> ar iesi din ecran pe telefoane de 320px */
width:100%;
max-width:360px;
box-shadow:
0 12px 35px rgba(0,0,0,.08);
transition:.35s;
}
.v6-offer-card:hover{
transform:translateY(-8px);
box-shadow:
0 22px 45px rgba(0,0,0,.14);
}
.v6-offer-image{
height:250px;
position:relative;
}
.v6-offer-image img{
width:100%;
height:100%;
object-fit:cover;
}
/* FAVORITE */
.v6-favorite{
position:absolute;
right:18px;
top:18px;
width:42px;
height:42px;
border-radius:50%;
border:none;
background:white;
font-size:24px;
color:#555;
box-shadow:0 5px 15px #0002;
cursor:pointer;
}
/* STATUS */
.v6-status{
position:absolute;
top:18px;
left:18px;
padding:7px 15px;
border-radius:20px;
font-size:13px;
font-weight:600;
background:white;
}
.available{
color:#008f68;
}
.request{
color:#d97706;
}
/* RATING */
.v6-rating{
position:absolute;
bottom:18px;
left:18px;
display:flex;
align-items:center;
gap:8px;
background:white;
padding:7px 12px;
border-radius:20px;
box-shadow:0 5px 15px #0002;
color:#333;
}
.v6-rating span{
color:#fbbf24;
font-size:15px;
}
.v6-rating b{
color:#344054;
font-size:14px;
}
.v6-offer-content{
padding:28px;
}
.v6-offer-content h3{
font-size:25px;
margin:0 0 12px;
color:#17252b;
}
.v6-offer-content p{
color:#667085;
line-height:1.6;
}
.v6-details{
border-top:1px solid #eee;
margin-top:20px;
padding-top:18px;
display:flex;
flex-direction:column;
gap:10px;
font-size:14px;
color:#475467;
}
.v6-offer-footer{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:25px;
}
.v6-offer-footer strong{
font-size:28px;
color:#17252b;
}
.v6-offer-footer small{
display:block;
color:#98a2b3;
}
.v6-book-btn,
.v6-request-btn{
padding:13px 25px;
border-radius:30px;
background:
linear-gradient(
135deg,
#ff9800,
#f97316
);
color:white;
text-decoration:none;
font-weight:600;
}
.v6-request-btn{
display:block;
text-align:center;
margin-top:25px;
background:
linear-gradient(
135deg,
#008f68,
#0077b6
);
}
/* === SECTION: organizers === */
/* =====================================
V6 ORGANIZERS
===================================== */
.v6-organizer-section{
padding:90px 20px;
background:
linear-gradient(
135deg,
#f5faf8,
#ffffff,
#f2f8ff
);
}
.v6-organizer-container{
max-width:1200px;
margin:auto;
}
.v6-organizer-header{
text-align:center;
margin-bottom:50px;
}
.v6-organizer-label{
display:inline-flex;
padding:7px 18px;
border-radius:30px;
background:#e7f7ef;
color:#008f68;
font-size:14px;
font-weight:700;
}
.v6-organizer-header h2{
font-size:42px;
margin:15px 0;
color:#17252b;
}
.v6-organizer-header p{
color:#667085;
}
/* GRID */
.v6-organizer-grid{
--row-cols:3;
--row-gap:28px;
}
/* CARD */
.v6-organizer-card{
/* latime fixa -> ar iesi din ecran pe telefoane de 320px */
width:100%;
max-width:360px;
background:white;
border-radius:30px;
padding:35px 30px;
text-align:center;
box-shadow:
0 12px 35px rgba(0,0,0,.08);
transition:.35s;
}
.v6-organizer-card:hover{
transform:translateY(-8px);
box-shadow:
0 22px 45px rgba(0,0,0,.14);
}
/* LOGO */
.v6-organizer-logo{
width:75px;
height:75px;
margin:-5px auto 22px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
background: linear-gradient(90deg, rgba(255, 138, 0, .12), rgba(0, 143, 104, .12));
color:white;
box-shadow:
0 8px 20px rgba(0,119,182,.25);
}
.v6-organizer-card h3{
font-size:24px;
margin-bottom:12px;
color:#17252b;
}
.v6-organizer-card p{
font-size:15px;
line-height:1.6;
color:#667085;
min-height:50px;
}
/* RATING */
.v6-organizer-rating{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:20px;
background:#fff8e7;
padding:8px 15px;
border-radius:30px;
}
.v6-organizer-rating span{
color:#fbbf24;
letter-spacing:1px;
}
.v6-organizer-rating strong{
color:#344054;
font-size:14px;
}
.v6-review-count{
margin-top:10px;
font-size:14px;
color:#98a2b3;
}
/* BUTTON */
.v6-organizer-btn{
display:inline-flex;
margin-top:25px;
padding:13px 30px;
border-radius:30px;
text-decoration:none;
color:white;
font-weight:600;
background:
linear-gradient(
135deg,
#008f68,
#0077b6
);
transition:.3s, box-shadow .15s ease;
}
.v6-organizer-btn:hover{
box-shadow:
0 8px 20px rgba(0,119,182,.25);
}
@media(max-width:600px){
.v6-organizer-card{
width:100%;
max-width:360px;
}
.v6-organizer-header h2{
font-size:32px;
}
}
/* === SECTION: reviews === */
/* =====================================
V6 REVIEWS
===================================== */
.v6-review-section{
padding:90px 20px;
background:white;
}
.v6-review-container{
max-width:1200px;
margin:auto;
}
.v6-review-header{
text-align:center;
margin-bottom:50px;
}
.v6-review-label{
display:inline-flex;
padding:7px 18px;
border-radius:30px;
background:#fff7df;
color:#d97706;
font-size:14px;
font-weight:700;
}
.v6-review-header h2{
font-size:42px;
margin:15px 0;
color:#17252b;
}
.v6-review-header p{
color:#667085;
}
/* GRID */
.v6-review-grid{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:28px;
}
/* CARD */
.v6-review-card{
width:360px;
background:white;
border-radius:28px;
padding:35px;
position:relative;
box-shadow:
0 12px 35px rgba(0,0,0,.08);
transition:.35s;
overflow:hidden;
}
.v6-review-card:hover{
transform:translateY(-7px);
box-shadow:
0 22px 45px rgba(0,0,0,.14);
}
/* QUOTE */
.v6-quote{
position:absolute;
right:25px;
top:10px;
font-size:clamp(44px, 12vw, 80px);
line-height:1;
color:
rgba(0,143,104,.12);
font-family:Georgia,serif;
}
/* TOP */
.v6-review-top{
display:flex;
align-items:center;
gap:15px;
margin-bottom:22px;
}
.v6-avatar{
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:600;
color:white;
background:
linear-gradient(
135deg,
#00a86b,
#0077b6
);
background: linear-gradient(90deg, rgba(255, 138, 0, .12), rgba(0, 143, 104, .12));
color: #008f68;
}
.v6-review-top strong{
font-size:17px;
color:#17252b;
}
.v6-review-stars{
margin-top:5px;
color:#fbbf24;
letter-spacing:2px;
font-size:14px;
}
.v6-review-card p{
font-size:15px;
line-height:1.7;
color:#667085;
margin:0;
}
@media(max-width:600px){
.v6-review-card{
width:100%;
max-width:360px;
}
.v6-review-header h2{
font-size:32px;
}
}
/* === SECTION: similar === */
/* =====================================
V6 SIMILAR ACTIVITIES
===================================== */
.v6-similar-section{
padding:90px 20px;
background:
linear-gradient(
135deg,
#f5faf8,
#ffffff,
#f2f8ff
);
}
.v6-similar-container{
max-width:1200px;
margin:auto;
}
.v6-similar-header{
text-align:center;
margin-bottom:50px;
}
.v6-similar-label{
display:inline-flex;
padding:7px 18px;
border-radius:30px;
background:#e7f7ef;
color:#008f68;
font-size:14px;
font-weight:700;
}
.v6-similar-header h2{
font-size:42px;
margin:15px 0;
color:#17252b;
}
.v6-similar-header p{
color:#667085;
}
/* GRID */
.v6-similar-grid{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:28px;
}
/* CARD */
.v6-similar-card{
width:360px;
background:white;
border-radius:28px;
overflow:hidden;
box-shadow:
0 12px 35px rgba(0,0,0,.08);
transition:.35s;
}
.v6-similar-card:hover{
transform:translateY(-8px);
box-shadow:
0 22px 45px rgba(0,0,0,.14);
}
/* IMAGE */
.v6-similar-image{
height:230px;
overflow:hidden;
}
.v6-similar-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s;
}
.v6-similar-card:hover img{
transform:scale(1.06);
}
/* CONTENT */
.v6-similar-content{
padding:28px;
}
.v6-similar-content h3{
font-size:25px;
margin:0 0 12px;
color:#17252b;
}
.v6-similar-content p{
font-size:15px;
line-height:1.6;
color:#667085;
margin-bottom:20px;
}
/* TAGS */
.v6-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.v6-tags span{
padding:7px 14px;
border-radius:30px;
background:#eef7f5;
color:#007f67;
font-size:13px;
font-weight:500;
transition:.3s;
}
.v6-tags span:hover{
background:#dff3ec;
}
@media(max-width:600px){
.v6-similar-card{
width:100%;
max-width:360px;
}
.v6-similar-header h2{
font-size:32px;
}
}
/* === SECTION: advertisement === */
/* =====================================
V6 ADVERTISEMENT
===================================== */
.v6-ad-section{
padding:45px 20px;
background:
linear-gradient(
135deg,
#f7faf9,
#ffffff
);
}
.v6-ad-container{
max-width:1200px;
margin:auto;
}
.v6-ad-box{
position:relative;
height:160px;
overflow:hidden;
border-radius:26px;
background:white;
border:1px solid rgba(0,0,0,.06);
box-shadow:
0 12px 35px rgba(0,0,0,.08);
transition:.3s;
}
.v6-ad-box:hover{
box-shadow:
0 18px 45px rgba(0,0,0,.13);
}
.v6-ad-link{
display:block;
width:100%;
height:100%;
}
.v6-ad-link img{
width:100%;
height:100%;
object-fit:cover;
}
/* LABEL */
.v6-ad-label{
position:absolute;
right:18px;
bottom:15px;
padding:6px 15px;
border-radius:20px;
font-size:11px;
font-weight:700;
letter-spacing:.5px;
color:#667085;
background:
rgba(255,255,255,.9);
box-shadow:
0 5px 15px rgba(0,0,0,.12);
backdrop-filter:blur(5px);
}
@media(max-width:600px){
.v6-ad-box{
height:120px;
}
}
/* === SECTION: faq === */
/* =====================================
V6 FAQ
===================================== */
.v6-faq-section{
padding:90px 20px;
background:
linear-gradient(
135deg,
#f5faf8,
#ffffff,
#f2f8ff
);
}
.v6-faq-container{
max-width:900px;
margin:auto;
}
.v6-faq-header{
text-align:center;
margin-bottom:45px;
}
.v6-faq-label{
display:inline-flex;
padding:7px 18px;
border-radius:30px;
background:#e7f7ef;
color:#008f68;
font-size:14px;
font-weight:700;
}
.v6-faq-header h2{
font-size:40px;
margin:15px 0;
color:#17252b;
}
.v6-faq-header p{
color:#667085;
}
.v6-faq-list{
display:flex;
flex-direction:column;
gap:16px;
}
/* ITEM */
.v6-faq-item{
background:white;
border-radius:22px;
box-shadow:
0 10px 30px rgba(0,0,0,.07);
overflow:hidden;
transition:.3s;
}
.v6-faq-item:hover{
box-shadow:
0 15px 35px rgba(0,0,0,.12);
}
/* QUESTION */
.v6-faq-question{
display:flex;
align-items:center;
justify-content:space-between;
padding:22px 25px;
cursor:pointer;
font-size:17px;
font-weight:600;
color:#17252b;
}
/* ICON FAQ - varianta simplă */
.v6-faq-icon{
font-size:28px;
font-weight:300;
line-height:1;
color:#008f68;
transition:.3s;
width:auto;
height:auto;
display:flex;
align-items:center;
justify-content:center;
}
.v6-faq-item.active .v6-faq-icon{
transform:rotate(45deg);
color:#0077b6;
}
/* ANSWER */
.v6-faq-answer{
max-height:0;
overflow:hidden;
transition:.35s;
padding:0 25px;
}
.v6-faq-answer p{
margin:0;
padding-bottom:22px;
color:#667085;
line-height:1.7;
font-size:15px;
}
/* ACTIVE */
.v6-faq-item.active .v6-faq-answer{
max-height:200px;
}
.v6-faq-item.active .v6-faq-icon{
transform:rotate(45deg);
}
@media(max-width:600px){
.v6-faq-header h2{
font-size:32px;
}
.v6-faq-question{
font-size:16px;
padding:18px;
}
}
/* === SECTION: final cta === */
/* =====================================
V6 FINAL CTA
===================================== */
.v6-final-section{
padding:90px 20px;
background:
linear-gradient(
135deg,
#f5faf8,
#ffffff,
#f2f8ff
);
}
.v6-final-container{
max-width:1200px;
margin:auto;
}
.v6-final-cta{
position:relative;
overflow:hidden;
text-align:center;
padding:75px 30px;
border-radius:35px;
background:
linear-gradient(
135deg,
#008f68,
#0077b6
);
box-shadow:
0 25px 60px rgba(0,119,182,.25);
color:white;
}
/* decor subtil */
.v6-final-decoration{
position:absolute;
width:350px;
height:350px;
right:-120px;
top:-160px;
border-radius:50%;
background:
rgba(255,255,255,.12);
}
.v6-final-cta:after{
content:"";
position:absolute;
width:250px;
height:250px;
left:-100px;
bottom:-120px;
border-radius:50%;
background:
rgba(255,255,255,.08);
}
.v6-final-cta h2{
position:relative;
z-index:1;
font-size:44px;
margin:0 0 18px;
font-weight:700;
}
.v6-final-cta p{
position:relative;
z-index:1;
font-size:18px;
max-width:650px;
margin:0 auto 35px;
line-height:1.6;
color:rgba(255,255,255,.9);
}
.v6-final-btn{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 35px;
border-radius:35px;
background:
linear-gradient(
135deg,
#ff9f1c,
#f97316
);
color:white;
text-decoration:none;
font-weight:600;
box-shadow:
0 10px 25px rgba(249,115,22,.35);
transition:.3s, box-shadow .15s ease;
}
.v6-final-btn:hover{
box-shadow:
0 15px 35px rgba(249,115,22,.45);
}
@media(max-width:600px){
.v6-final-cta{
padding:55px 20px;
}
.v6-final-cta h2{
font-size:32px;
}
.v6-final-cta p{
font-size:16px;
}
}
/* === SECTION: footer === */
/* =====================================
V6 FOOTER
===================================== */
.v6-footer{
padding:70px 20px 25px;
background:
linear-gradient(
135deg,
#063b35,
#005f73
);
color:white;
}
.v6-footer-container{
max-width:1200px;
margin:auto;
}
.v6-footer-grid{
display:grid;
grid-template-columns:
1.5fr 1fr 1fr 1fr;
gap:45px;
padding-bottom:45px;
}
/* BRAND */
.v6-footer-brand h3{
font-size:30px;
margin:0 0 15px;
background:
linear-gradient(
90deg,
#42e695,
#56ccf2
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.v6-footer-brand p{
max-width:300px;
line-height:1.7;
color:rgba(255,255,255,.75);
font-size:15px;
}
/* COLUMNS */
.v6-footer-column{
display:flex;
flex-direction:column;
gap:12px;
}
.v6-footer-column h4{
font-size:17px;
margin:0 0 12px;
color:white;
}
.v6-footer-column a{
text-decoration:none;
color:rgba(255,255,255,.75);
font-size:15px;
transition:.3s;
}
.v6-footer-column a:hover{
color:#56ccf2;
transform:translateX(4px);
}
/* BOTTOM */
.v6-footer-bottom{
border-top:
1px solid rgba(255,255,255,.15);
padding-top:25px;
text-align:center;
color:rgba(255,255,255,.6);
font-size:14px;
}
@media(max-width:850px){
.v6-footer-grid{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:600px){
.v6-footer-grid{
grid-template-columns:1fr;
gap:30px;
}
.v6-footer{
padding-top:50px;
}
}
/* =============================================================================
QUICK_INFO plutitor — prima sectiune din pagina, layout_variant = 'compact'
Cardurile calaresc marginea dintre hero si sectiunea urmatoare.
Cheia: pe ecrane medii/mari sectiunea NU ocupa spatiu in flux (height: 0) si
nu are fundal propriu — altfel ar aparea o banda alba intre hero si sectiunea
urmatoare, egala cu partea de card care coboara sub margine.
============================================================================= */
/* --- Stiluri comune (toate ecranele) --- */
.v6-info-section.is-floating .v6-info-grid {
position: relative;
z-index: 5;
align-items: stretch;
gap: 18px;
}
.v6-info-section.is-floating .v6-info-card {
display: flex;
flex-direction: column;
flex: 1 1 0;
width: auto;
min-width: 0; /* permite ingustarea sub 230px */
padding: 20px 16px;
text-align: center;
border-radius: 20px;
box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}
.v6-info-section.is-floating .v6-info-icon {
order: 0;
margin: 0 auto 10px;
width: 40px;
height: 40px;
font-size: 20px;
}
/* Titlul devine eticheta discreta, descrierea devine valoarea evidentiata */
.v6-info-section.is-floating .v6-info-card h3 {
order: 1;
font-size: 13px;
font-weight: 500;
color: #94a3b8;
margin: 0 0 3px;
line-height: 1.3;
}
.v6-info-section.is-floating .v6-info-card p {
order: 2;
font-size: 19px;
font-weight: 800;
color: #16232b;
line-height: 1.25;
}
/* --- Suprapunere: doar de la tablete in sus --- */
@media (min-width: 561px) {
.v6-info-section.is-floating {
padding: 0 20px;
background: transparent; /* fara banda proprie de fundal */
height: 0; /* nu ocupa spatiu: hero si sectiunea urmatoare se ating */
overflow: visible; /* cardurile ies in afara cutiei */
}
.v6-info-section.is-floating .v6-info-grid {
margin-top: -72px; /* jumatatea de sus a cardurilor intra peste hero */
flex-wrap: nowrap;
}
/* Sectiunea urmatoare face loc pentru jumatatea de jos a cardurilor.
Selector generic — merge indiferent ce tip de sectiune urmeaza. */
.v6-info-section.is-floating + section {
padding-top: 195px;
}
}
/* --- Tablete: doua carduri pe rand, deci partea de jos e mai inalta --- */
@media (min-width: 561px) and (max-width: 900px) {
.v6-info-section.is-floating .v6-info-grid {
flex-wrap: wrap;
margin-top: -56px;
}
.v6-info-section.is-floating .v6-info-card {
flex: 1 1 calc(50% - 18px);
}
.v6-info-section.is-floating + section {
padding-top: 240px; /* doua randuri de carduri coboara mai mult */
}
}
/* --- Telefoane: fara suprapunere, sectiunea se comporta normal
(isi pastreaza fundalul si spatierea din regula de baza) --- */
@media (max-width: 560px) {
.v6-info-section.is-floating { padding: 40px 20px 10px; }
.v6-info-section.is-floating .v6-info-grid {
flex-wrap: wrap;
margin-top: 0;
}
.v6-info-section.is-floating .v6-info-card { flex: 1 1 100%; }
.v6-info-section.is-floating + section { padding-top: 50px; }
}
/* =============================================================================
Sectiuni dinamice de categorie — completari peste designul din design6.
========================================================================== */
/* Fallback cand activitatea nu are imagine de coperta */
.v6-offer-image-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 40px;
background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
}
/* Logo furnizor: imagine reala in locul emoji-ului din design */
.v6-organizer-logo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
/* Link catre activitatea recenzata, sub textul recenziei */
.v6-review-activity {
display: inline-block;
margin-top: 14px;
font-size: 12.5px;
font-weight: 600;
color: #0ea5e9;
text-decoration: none;
}
.v6-review-activity:hover { text-decoration: underline; }
/* --- Card organizator: banda cu imaginea de header a furnizorului ---
Cardul are padding 35px 30px, deci banda iese in afara lui cu margini
negative ca sa atinga marginile. overflow:hidden taie coltul de sus
dupa border-radius. Fara logo — doar imaginea de header.
Degradeul ramane vizibil cand furnizorul n-are header incarcat, ca sa
nu varieze inaltimea cardurilor de pe acelasi rand. */
.v6-organizer-card {
overflow: hidden;
padding-top: 0;
}
.v6-organizer-cover {
margin: 0 -30px 26px;
height: 150px;
overflow: hidden;
background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
}
.v6-organizer-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .45s ease;
}
.v6-organizer-card:hover .v6-organizer-cover img { transform: scale(1.05); }
@media (max-width: 640px) {
.v6-organizer-cover { height: 120px; margin-bottom: 20px; }
}