/* ============================================================ NEA METROPOLIS — HOMEPAGE REDESIGN Scoped to .home-new (applies only to the new home pages) Sections: 1 Top bar · 2 Header · 3 Sticky header · 4 Hero 5 Responsive (hero/topbar) · 6 Availability bar · 7 Features 8 Room cards · 9 USP strip · 10 Best Rate badge · 11 FAQ Fonts (Playfair Display + Lato) load via in . ============================================================ */ /* ========== 1. TOP BAR ========== */ .home-new #sp-top-bar { position: relative; z-index: 100; background-color: #2b211a; padding: 8px 0; font-family: 'Lato', sans-serif; font-size: 13px; } .home-new #sp-top-bar, .home-new #sp-top-bar a { color: rgba(255, 255, 255, 0.85); } .home-new #sp-top-bar a:hover { color: #C9A96E; } .home-new #sp-top-bar .row { display: flex; align-items: center; flex-wrap: nowrap; } .home-new #sp-top-bar #sp-top2, .home-new #sp-top-bar #sp-top3, .home-new #sp-top-bar #sp-top1 { width: auto; flex: 0 0 auto; max-width: none; } .home-new #sp-top-bar #sp-top2 { order: 1; margin-right: auto; } .home-new #sp-top-bar #sp-top1 { order: 2; } .home-new #sp-top-bar #sp-top3 { order: 3; margin-left: 18px; } /* Τηλέφωνα + email inline */ .home-new #sp-top2 ul.sp-contact-info { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; } .home-new #sp-top2 ul.sp-contact-info li { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; border: none; } .home-new #sp-top2 .sp-contact-info i { color: #C9A96E; font-size: 14px; } .home-new #sp-top2 .sp-contact-info a { color: rgba(255, 255, 255, 0.85); } /* Social icons */ .home-new #sp-top1 .social-icons { display: flex; align-items: center; gap: 10px; } .home-new #sp-top1 .social-icons a { display: inline-flex; } .home-new #sp-top1 .social-icons img { width: 26px; height: 26px; display: block; transition: transform 0.2s ease; } .home-new #sp-top1 .social-icons a:hover img { transform: scale(1.12); } /* Γλώσσα (σημαιάκια) */ .home-new #sp-top3 .mod-languages__list { display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; list-style: none; } .home-new #sp-top3 .mod-languages__list li { margin: 0; padding: 0; } .home-new #sp-top3 .mod-languages__list img { width: 22px; height: auto; display: block; border-radius: 2px; opacity: 0.55; transition: opacity 0.2s ease; } .home-new #sp-top3 .mod-languages__list li.lang-active img, .home-new #sp-top3 .mod-languages__list a:hover img { opacity: 1; } /* ========== 1b. ΚΟΥΜΠΙ ΚΡΑΤΗΣΗ (top bar) ========== */ .home-new #sp-top3 > .sp-column { display: flex !important; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: nowrap; } .home-new #sp-top3 > .sp-column > .sp-module { margin: 0 !important; padding: 0 !important; } .home-new #sp-top-bar .kratisi-btn { display: inline-flex; align-items: center; gap: 8px; background-color: #C9A96E; color: #ffffff !important; font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 18px; text-decoration: none; transition: background 0.3s ease; white-space: nowrap; line-height: 1.4; } .home-new #sp-top-bar .kratisi-btn:hover { background-color: #b5965a; color: #ffffff !important; } .home-new #sp-top-bar .kratisi-btn i, .home-new #sp-top-bar .kratisi-btn svg { font-size: 14px; } /* ========== 2. HEADER (διάφανος, πάνω στο hero) ========== */ .home-new #sp-header { position: absolute; top: 50px; left: 0; right: 0; z-index: 99; background: transparent !important; box-shadow: none !important; padding: 6px 0; transition: all 0.35s ease; } .home-new #sp-header .row { display: flex; align-items: center; } .home-new #sp-logo .logo { display: flex; align-items: center; } .home-new #sp-logo .sp-default-logo { max-height: 70px; width: auto; } @media (min-width: 992px) { .home-new #offcanvas-toggler { display: none !important; } } .home-new #sp-menu .sp-megamenu-parent { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; } .home-new #sp-header .sp-megamenu-parent > li.sp-menu-item > a { font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #ffffff; padding: 10px 16px; position: relative; transition: color 0.2s ease; } .home-new #sp-header .sp-megamenu-parent > li.sp-menu-item > a:hover, .home-new #sp-header .sp-megamenu-parent > li.active > a, .home-new #sp-header .sp-megamenu-parent > li.current-item > a { color: #C9A96E; } .home-new #sp-header .sp-megamenu-parent > li.active > a::after, .home-new #sp-header .sp-megamenu-parent > li.current-item > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px; background-color: #C9A96E; } /* ========== 3. STICKY HEADER (on scroll) ========== */ .home-new.header-scrolled #sp-header { position: fixed; top: 0; background: #FBF9F6 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; padding: 4px 0; } .home-new.header-scrolled #sp-header .sp-default-logo { filter: brightness(0); } .home-new.header-scrolled #sp-header .sp-megamenu-parent > li.sp-menu-item > a { color: #2C2C2C; } .home-new.header-scrolled #sp-header .sp-megamenu-parent > li.sp-menu-item > a:hover, .home-new.header-scrolled #sp-header .sp-megamenu-parent > li.active > a, .home-new.header-scrolled #sp-header .sp-megamenu-parent > li.current-item > a { color: #C9A96E; } /* ========== 4. HERO ========== */ .home-new .home-hero { position: relative; min-height: 600px; display: flex; align-items: center; } .home-new .home-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( to right, rgba(20, 15, 12, 0.85) 0%, rgba(20, 15, 12, 0.55) 40%, rgba(20, 15, 12, 0.15) 70%, rgba(20, 15, 12, 0.05) 100% ); z-index: 1; } .home-new .home-hero .sppb-column, .home-new .home-hero .hero-content { position: relative; z-index: 2; } .home-new .home-hero .sppb-row-container, .home-new .home-hero .sppb-row, .home-new .home-hero .sppb-col-md-12 { width: 100%; max-width: 100%; } .home-new .home-hero [class*="sppb-col"] { padding-left: 0; } .home-new .home-hero .hero-content { max-width: 600px; margin-left: 90px; } .home-new .hero-title { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 700; line-height: 1.2; color: #ffffff; margin: 0 0 18px 0; } .home-new .hero-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 22px 0; } .home-new .hero-dividerline { display: block; width: 80px; height: 1px; background-color: #C9A96E; } .home-new .hero-dividerdiamond { color: #C9A96E; font-size: 10px; line-height: 1; } .home-new .hero-text { font-family: 'Lato', sans-serif; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.92); margin: 0 0 30px 0; } .home-new .hero-btn { display: inline-block; background-color: #C9A96E; color: #ffffff !important; font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 16px 38px; text-decoration: none; transition: background 0.3s ease; } .home-new .hero-btn:hover { background-color: #b5965a; } /* ========== 5. RESPONSIVE (top bar + hero) ========== */ @media (max-width: 991px) { .home-new #sp-top-bar .row { flex-wrap: wrap; justify-content: center; } .home-new #sp-top-bar #sp-top2 { flex: 1 0 100%; order: 1; margin-right: 0; text-align: center; margin-bottom: 6px; } .home-new #sp-top-bar #sp-top1 { flex: 1 0 100%; order: 2; margin-left: 0; margin-bottom: 6px; display: flex; justify-content: center; } .home-new #sp-top-bar #sp-top3 { flex: 1 0 100%; order: 3; margin-left: 0; } .home-new #sp-top3 > .sp-column { justify-content: center; } .home-new #sp-top2 ul.sp-contact-info { justify-content: center; flex-wrap: wrap; gap: 14px; } .home-new #sp-top-bar .kratisi-btn { padding: 8px 18px; font-size: 12px; } .home-new #sp-header { top: 145px; } } @media (max-width: 768px) { .home-new .hero-title { font-size: 30px; text-align: center; } .home-new .hero-text { font-size: 15px; text-align: center; } .home-new .home-hero { min-height: 480px; padding-top: 120px !important; padding-bottom: 40px; } .home-new .home-hero .hero-content { margin-left: 20px; margin-right: 20px; text-align: center; } .home-new .hero-divider { justify-content: center; } .home-new .hero-btn { margin: 0 auto; } } @media (max-width: 480px) { .home-new #sp-top2 ul.sp-contact-info { font-size: 12px; gap: 10px; } .home-new #sp-top1 .social-icons img { width: 22px; height: 22px; } .home-new #sp-top3 .mod-languages__list img { width: 18px; } } /* ========== 6. AVAILABILITY BAR ========== */ .home-new .home-availability { position: relative; z-index: 5; max-width: 1100px; margin: -120px auto 0; padding: 0 20px; } .home-new .avail-form { display: flex; align-items: stretch; background-color: #2b211a; border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); overflow: hidden; } .home-new .avail-field { display: flex; align-items: center; gap: 12px; flex: 1 1 0; padding: 18px 22px; border-right: 1px solid rgba(255, 255, 255, 0.12); } .home-new .avail-field > i { color: #C9A96E; font-size: 20px; } .home-new .avail-field-inner { display: flex; flex-direction: column; width: 100%; } .home-new .avail-field label { font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0 0 2px 0; } .home-new .avail-field input, .home-new .avail-field select { background: transparent; border: none; outline: none; color: #ffffff; font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 600; padding: 0; width: 100%; cursor: pointer; } .home-new .avail-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; cursor: pointer; } .home-new .avail-field select option { color: #2C2C2C; } .home-new .avail-btn { flex: 0 0 auto; border: none; background-color: #C9A96E; color: #ffffff; font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 0 34px; cursor: pointer; transition: background 0.3s ease; white-space: nowrap; } .home-new .avail-btn:hover { background-color: #b5965a; } @media (max-width: 991px) { .home-new .home-availability { margin-top: -50px; } .home-new .avail-form { flex-wrap: wrap; } .home-new .avail-field { flex: 1 1 50%; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .home-new .avail-btn { flex: 1 1 100%; padding: 16px; } } @media (max-width: 768px) { .home-new .home-availability { margin-top: 0; padding: 0 16px; } .home-new .avail-field { flex: 1 1 100%; border-right: none; } } /* ========== 7. FEATURE PLAQUES ========== */ .home-new .home-features { display: flex; align-items: flex-start; background-color: #FBF9F6; margin: -60px calc(50% - 50vw) 0; padding: 70px max(60px, calc((100vw - 1320px) / 2)) 70px; } .home-new .feature-item { flex: 1 1 0; padding: 0 45px; border-right: 1px solid rgba(0, 0, 0, 0.08); } .home-new .feature-item:first-child { padding-left: 0; } .home-new .feature-item:last-child { border-right: none; } .home-new .feature-icon { display: block; color: #C9A96E; margin-bottom: 18px; } .home-new .feature-icon svg { width: 36px; height: 36px; display: block; } .home-new .feature-title { font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #2C2C2C; margin: 0 0 12px 0; } .home-new .feature-text { font-family: 'Lato', sans-serif; font-size: 15px; line-height: 1.6; color: #6b6b6b; margin: 0 0 16px 0; } .home-new .feature-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #C9A96E; text-decoration: none; transition: gap 0.2s ease, color 0.2s ease; } .home-new .feature-link:hover { gap: 12px; color: #b5965a; } @media (max-width: 991px) { .home-new .home-features { flex-wrap: wrap; margin-top: -40px; padding: 50px 30px; } .home-new .feature-item { flex: 1 1 50%; padding: 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .home-new .feature-item:first-child { padding-left: 24px; } .home-new .feature-item:nth-child(2n) { border-right: none; } .home-new .feature-item:nth-child(3), .home-new .feature-item:nth-child(4) { border-bottom: none; } } @media (max-width: 575px) { .home-new .home-features { margin-top: 0; padding: 40px 16px; } .home-new .feature-item { flex: 1 1 100%; border-right: none !important; text-align: center; padding: 20px 0; } .home-new .feature-icon svg { margin-left: auto; margin-right: auto; } } /* ========== 8. ROOM CARDS ========== */ .home-new .home-rooms { background-color: #ffffff; margin: 0 calc(50% - 50vw); padding: 80px max(30px, calc((100vw - 1680px) / 2)) 90px; } .home-new .rooms-head { text-align: center; margin-bottom: 45px; } .home-new .rooms-title { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: #2C2C2C; margin: 0; } .home-new .rooms-subtitle { font-family: 'Lato', sans-serif; font-size: 16px; color: #6b6b6b; margin: 0; } .home-new .rooms-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; } .home-new .rooms-dividerline { display: block; width: 60px; height: 1px; background-color: #C9A96E; } .home-new .rooms-dividerdiamond { color: #C9A96E; font-size: 10px; line-height: 1; } .home-new .rooms-carousel { position: relative; } .home-new .rooms-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none; } .home-new .rooms-track::-webkit-scrollbar { display: none; } .home-new .room-card { flex: 0 0 calc((100% - 72px) / 4); scroll-snap-align: start; position: relative; height: 340px; border-radius: 4px; overflow: hidden; display: block; text-decoration: none; } .home-new .room-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .home-new .room-card:hover img { transform: scale(1.06); } .home-new .room-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; background: linear-gradient(to top, rgba(20, 15, 12, 0.88) 0%, rgba(20, 15, 12, 0.35) 42%, rgba(20, 15, 12, 0) 72%); } .home-new .room-card-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #ffffff; line-height: 1.25; margin-bottom: 6px; } .home-new .room-card-price { font-family: 'Lato', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; color: #C9A96E; } .home-new .room-card-per { font-family: 'Lato', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.75); } .home-new .rooms-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); background: #ffffff; color: #2C2C2C; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; } .home-new .rooms-arrow svg { width: 18px; height: 18px; } .home-new .rooms-arrow:hover { background: #C9A96E; color: #ffffff; border-color: #C9A96E; } .home-new .rooms-arrow.prev { left: -64px; } .home-new .rooms-arrow.next { right: -64px; } .home-new .rooms-arrow[disabled] { opacity: 0.35; cursor: default; } .home-new .rooms-arrow[disabled]:hover { background: #ffffff; color: #2C2C2C; border-color: rgba(0, 0, 0, 0.15); } @media (max-width: 1740px) { .home-new .rooms-arrow.prev { left: -8px; } .home-new .rooms-arrow.next { right: -8px; } } @media (max-width: 991px) { .home-new .home-rooms { padding: 60px 30px 70px; } .home-new .room-card { flex: 0 0 calc((100% - 24px) / 2); } .home-new .rooms-arrow.prev { left: 6px; } .home-new .rooms-arrow.next { right: 6px; } } @media (max-width: 575px) { .home-new .home-rooms { padding: 50px 16px 60px; } .home-new .rooms-track { gap: 16px; } .home-new .room-card { flex: 0 0 100%; height: 300px; scroll-snap-align: center; } .home-new .rooms-title { font-size: 28px; } } /* ========== 9. USP STRIP ========== */ .home-new .home-usp { background-color: #FBF9F6; margin: -50px calc(50% - 50vw) 0; padding: 34px max(30px, calc((100vw - 1680px) / 2)); } .home-new .usp-inner { display: flex; align-items: center; } .home-new .usp-item { flex: 1 1 0; display: flex; align-items: center; gap: 16px; padding: 0 30px; border-right: 1px solid rgba(0, 0, 0, 0.08); } .home-new .usp-item:first-child { padding-left: 0; } .home-new .usp-item:last-child { border-right: none; } .home-new .usp-icon { flex: 0 0 auto; color: #C9A96E; } .home-new .usp-icon svg { width: 34px; height: 34px; display: block; } .home-new .usp-title { font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #2C2C2C; margin: 0 0 3px 0; } .home-new .usp-text { font-family: 'Lato', sans-serif; font-size: 13px; color: #6b6b6b; margin: 0; } @media (max-width: 991px) { .home-new .home-usp { padding: 30px; } .home-new .usp-inner { flex-wrap: wrap; } .home-new .usp-item { flex: 1 1 50%; padding: 16px 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .home-new .usp-item:first-child { padding-left: 24px; } .home-new .usp-item:nth-child(2n) { border-right: none; } .home-new .usp-item:nth-child(3), .home-new .usp-item:nth-child(4) { border-bottom: none; } } @media (max-width: 575px) { .home-new .usp-item, .home-new .usp-item:first-child { flex: 1 1 100%; border-right: none !important; padding: 14px 0; } .home-new .usp-item:nth-child(3) { border-bottom: 1px solid rgba(0, 0, 0, 0.08); } } /* ========== 10. BEST RATE BADGE ========== */ .home-new .hero-badge { position: absolute; top: 80px; right: 150px; z-index: 3; width: 152px; height: 152px; } .home-new .hero-badge .br-top { fill: #ffffff; font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 3px; } .home-new .hero-badge .br-main { fill: #C9A96E; font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 1px; } .home-new .hero-badge .br-sub { fill: rgba(255, 255, 255, 0.9); font-family: 'Lato', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 2px; } @media (max-width: 991px) { .home-new .hero-badge { width: 118px; height: 118px; top: 80px; right: 28px; } } @media (max-width: 767px) { .home-new .hero-badge { position: static; display: block; width: 96px; height: 96px; margin: 30px auto 0; } } /* ========== 11. FAQ ========== */ .home-new .faq-head { text-align: center; margin-bottom: 40px; } .home-new .faq-title { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: #2C2C2C; margin: 0; } .home-new .faq-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; } .home-new .faq-dividerline { display: block; width: 60px; height: 1px; background-color: #C9A96E; } .home-new .faq-dividerdiamond { color: #C9A96E; font-size: 10px; line-height: 1; } .home-new .home-faq .sppb-panel { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px; overflow: hidden; margin-bottom: 14px; background: #ffffff; } .home-new .home-faq .sppb-panel-heading { background: #FBF9F6 !important; padding: 18px 22px !important; color: #2C2C2C !important; transition: background 0.2s ease, color 0.2s ease; } .home-new .home-faq .sppb-panel-title { font-family: 'Lato', sans-serif !important; font-size: 15px; font-weight: 600; } .home-new .home-faq .sppb-panel-heading:hover { background: #f1eadd !important; } .home-new .home-faq .sppb-panel-heading.active { background: #2b211a !important; color: #ffffff !important; } .home-new .home-faq .sppb-toggle-direction { color: #C9A96E !important; } .home-new .home-faq .sppb-panel-content, .home-new .home-faq [id^="sppb-ac-content"] { padding: 18px 22px !important; font-family: 'Lato', sans-serif !important; font-size: 14px; line-height: 1.7; color: #6b6b6b !important; background: #ffffff !important; } /* Hero: εμφάνισε την εικόνα από το πρώτο frame (όχι lazy) */ .home-new #home-hero, .home-new #home-hero.sppb-element-lazy { background-image: url(/images/2026/05/28/hero-thessaloniki-umbrellas.webp) !important; }