/* ============================================================ DESIRE STAYS — Design system Παλέτα: βαθύ Ιόνιο μπλε + αφρός + άμμος. Τυπογραφία: Fraunces (τίτλοι, serif) + DM Sans (σώμα κειμένου). Γωνίες: σχεδόν ίσιες (2–18px). Pill μόνο σε chips/dots. ============================================================ */ :root { /* ---- Ionian palette ------------------------------------- */ --sea: #08324A; /* βαθύ μπλε — κύριο μελάνι */ --sea-soft: #1D4C64; /* σώμα κειμένου */ --sea-deep: #041F30; /* σχεδόν μαύρο μπλε */ --wave: #1B7FA8; /* ΚΥΡΙΟ ΧΡΩΜΑ ΜΑΡΚΑΣ — Ιόνιο */ --wave-deep: #12617F; /* hover */ --wave-soft: #BEDDEB; /* απαλό γαλάζιο */ --wave-tint: #E7F3F8; /* πολύ ανοιχτό γαλάζιο */ --foam: #F7FBFD; /* βάση σελίδας */ --foam-2: #E9F2F7; /* εναλλασσόμενα sections */ --foam-3: #D5E6EE; /* επιφάνειες / hover */ --shell: #FFFFFF; /* κάρτες */ --sand: #EADDC4; /* ζεστή άμμος — δεύτερη πινελιά */ --sand-deep: #C9B48A; /* σκούρα άμμος για λεπτές γραμμές */ /* ---- Semantic aliases (τα χρησιμοποιεί όλο το stylesheet) */ --paper: var(--foam); --paper-2: var(--foam-2); --paper-3: var(--foam-3); --cream: var(--shell); --ink: var(--sea); --ink-soft: var(--sea-soft); --coral: var(--wave); --coral-deep: var(--wave-deep); --coral-soft: var(--wave-soft); --coral-tint: var(--wave-tint); --brown: var(--wave); --brown-deep: var(--wave-deep); --brown-mid: #2E93BC; --mute: #5D7B8A; --mute-soft: #9CB6C2; --line: #CFE1EA; --line-soft: #E4EFF4; --ok-bg: #D7EFE4; --ok-fg: #14624A; --bad-bg: #FADFD8; --bad-fg: #9B3B23; /* Radii — ίσιες γωνίες, pill μόνο όπου χρειάζεται (chips/dots) */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 18px; --r-pill: 999px; /* Spacing scale */ --s-1: 8px; --s-2: 14px; --s-3: 20px; --s-4: 30px; --s-5: 48px; --s-6: 72px; --s-7: 104px; --s-8: 140px; /* Δύο γραμματοσειρές: serif τίτλοι, sans σώμα */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font: var(--font-body); --shadow-sm: 0 1px 3px rgba(8, 50, 74, 0.07); --shadow-md: 0 10px 30px rgba(8, 50, 74, 0.09); --shadow-lg: 0 24px 60px rgba(8, 50, 74, 0.16); --shadow-coral: 0 10px 24px rgba(27, 127, 168, 0.28); --transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1); --container: 1280px; /* Reference-compat aliases */ --rule: var(--line); --rule-soft: var(--line-soft); --red: var(--coral); --shadow-red: var(--shadow-coral); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overscroll-behavior-y: none; } /* Το overflow-x πρέπει να μπει ΚΑΙ στο , όχι μόνο στο . Αν μπει μόνο στο body, η τιμή «ανεβαίνει» στο viewport, το body γίνεται visible, και το initial containing block των position:fixed στοιχείων βγαίνει όσο το περιεχόμενο (π.χ. 570px) αντί για όσο η οθόνη (390px). Αποτέλεσμα: navbar, mobile drawer, lightbox και date picker πετάγονταν δεξιά, έξω από την οθόνη του κινητού. */ html { overflow-x: clip; } body { font-family: var(--font); color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; transition: color var(--transition); } a:hover { color: var(--coral); } input, textarea, select { font-family: inherit; } /* ============================================================ TYPOGRAPHY — serif τίτλοι σε δύο βάρη, sans σώμα. Η έμφαση γίνεται με πλάγια serif, όχι με bold sans. ============================================================ */ h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); color: var(--ink); letter-spacing: -0.012em; line-height: 1.08; font-weight: 500; font-optical-sizing: auto; } h1 { font-size: clamp(2.5rem, 5.2vw, 4.2rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.06; } h2 { font-size: clamp(1.95rem, 3.8vw, 3rem); font-weight: 300; letter-spacing: -0.018em; } h3 { font-size: 1.55rem; font-weight: 500; } h4 { font-size: 1.2rem; font-weight: 500; } /* Έμφαση σε τίτλους: πλάγια serif στο χρώμα της μάρκας */ .headline-mix b, .headline-mix strong { font-weight: 600; font-style: italic; color: var(--wave); } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wave); } .lead { font-size: 1.03rem; color: var(--mute); line-height: 1.68; max-width: 62ch; } /* ============================================================ LAYOUT ============================================================ */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-4); } section { padding: var(--s-7) 0; } /* ============================================================ NAVBAR — rounded floating bar, no square edges ============================================================ */ #navbar { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; padding: 0 var(--s-4); pointer-events: none; } .nav-shell { pointer-events: auto; max-width: var(--container); margin: 0 auto; background: rgba(253, 249, 239, 0.88); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 14px 10px 22px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); box-shadow: var(--shadow-sm); } .nav-brand { display: flex; align-items: center; font-weight: 800; letter-spacing: -0.015em; font-size: 1.2rem; color: var(--ink); } .nav-links { display: flex; align-items: center; gap: var(--s-3); } .nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); padding: 6px 4px; position: relative; } .nav-links a.active { color: var(--coral); font-weight: 700; } .nav-links a::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 0; height: 2px; background: var(--coral); border-radius: 999px; transition: width var(--transition), left var(--transition); } .nav-links a.active::after { width: 16px; left: calc(50% - 8px); } .nav-actions { display: flex; align-items: center; gap: 8px; } .lang-toggle { background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; display: inline-flex; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; } .lang-toggle button { background: transparent; border: none; color: var(--mute); padding: 0; letter-spacing: 0.1em; } .lang-toggle button.on { color: var(--ink); font-weight: 800; } .nav-book-btn { background: var(--coral); color: var(--paper); font-weight: 700; font-size: 0.88rem; padding: 10px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; transition: all var(--transition); border: none; } .nav-book-btn:hover { background: var(--coral-deep); color: var(--paper); box-shadow: var(--shadow-coral); transform: translateY(-1px); } .nav-toggle { display: none; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; width: 40px; height: 40px; align-items: center; justify-content: center; } .nav-toggle span { position: relative; width: 16px; height: 2px; background: var(--ink); border-radius: 999px; display: block; } .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 16px; height: 2px; background: var(--ink); border-radius: 999px; transition: transform var(--transition); } .nav-toggle span::before { top: -5px; } .nav-toggle span::after { top: 5px; } .nav-toggle.open span { background: transparent; } .nav-toggle.open span::before { transform: translateY(5px) rotate(45deg); } .nav-toggle.open span::after { transform: translateY(-5px) rotate(-45deg); } .mobile-menu { position: fixed; top: 80px; left: 16px; right: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-4); box-shadow: var(--shadow-lg); z-index: 99; display: none; flex-direction: column; gap: 4px; pointer-events: auto; } .mobile-menu.open { display: flex; } .mobile-menu a { font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); padding: 12px 16px; border-radius: var(--r-md); } .mobile-menu a.active { color: var(--coral); background: var(--coral-tint); } .mobile-menu .book-link { background: var(--coral); color: var(--paper); font-weight: 700; text-align: center; margin-top: 16px; padding: 16px 16px; border-radius: 999px; } .mobile-menu .book-link:hover { background: var(--coral-deep); color: var(--paper); } @media (max-width: 880px) { .nav-links { display: none; } .nav-actions .nav-book-btn { display: none; } .nav-toggle { display: flex; } } /* ============================================================ BUTTONS — pill always ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; font-family: var(--font); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.005em; border: none; border-radius: 999px; transition: all var(--transition); cursor: pointer; text-decoration: none; } .btn-sm { padding: 10px 18px; font-size: 0.85rem; } .btn-lg { padding: 18px 32px; font-size: 1rem; } .btn-primary { background: var(--coral); color: var(--paper); } .btn-primary:hover { background: var(--coral-deep); color: var(--paper); box-shadow: var(--shadow-coral); transform: translateY(-1px); } .btn-dark { background: var(--ink); color: var(--paper); } .btn-dark:hover { background: var(--ink-soft); color: var(--paper); } .btn-ghost { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); } .btn-ghost:hover { border-color: var(--coral); color: var(--coral); } .btn-link { background: transparent; color: var(--ink); padding: 8px 0; font-weight: 700; border-radius: 0; } .btn-link::after { content: '→'; display: inline-block; transition: transform var(--transition); margin-left: 4px; } .btn-link:hover { color: var(--coral); } .btn-link:hover::after { transform: translateX(4px); } /* ============================================================ HERO — asymmetric, big rounded image right, headline left ============================================================ */ .hero { padding-top: 140px; padding-bottom: var(--s-7); background: var(--paper); overflow: visible; position: relative; } /* Decorative blob — soft brown circle accent (pinelia) top-left of hero */ .hero::before { content: ''; position: absolute; top: 80px; left: -120px; width: 280px; height: 280px; border-radius: 999px; background: radial-gradient(circle at center, var(--coral-tint) 0%, transparent 70%); pointer-events: none; z-index: 0; } .hero .container { position: relative; z-index: 1; } .hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-6); align-items: center; } .hero-copy .eyebrow { margin-bottom: var(--s-3); } .hero-title { font-size: clamp(2.2rem, 5.4vw, 4.6rem); font-weight: 200; letter-spacing: -0.035em; line-height: 1.18; color: var(--ink); margin-bottom: var(--s-4); } .hero-title b { font-weight: 800; color: var(--ink); } .hero-title .accent { display: inline-block; background: var(--coral); color: var(--paper); padding: 0.04em 0.32em 0.08em; border-radius: 999px; font-weight: 800; line-height: 1.05; margin-top: 0.06em; } .hero-lead { font-size: 1.1rem; color: var(--mute); margin-bottom: var(--s-4); max-width: 50ch; line-height: 1.6; } .hero-ctas { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); } .hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); } .hero-meta > div .label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); } .hero-meta > div .value { font-size: 1rem; font-weight: 700; color: var(--ink); margin-top: 4px; } .hero-image { position: relative; aspect-ratio: 3/2; border-radius: var(--r-2xl); overflow: hidden; background: var(--paper-3); box-shadow: var(--shadow-md); } .hero-image picture { display: contents; } .hero-image img { width: 100%; height: 100%; object-fit: cover; } .hero-image::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } .hero-badge { position: absolute; bottom: 22px; left: 22px; background: var(--paper); border-radius: 999px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; box-shadow: var(--shadow-sm); } .hero-badge .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--coral); } @media (max-width: 980px) { .hero-inner { grid-template-columns: 1fr; gap: var(--s-5); } .hero-image { order: -1; aspect-ratio: 16/12; max-height: 480px; } .hero-meta { grid-template-columns: 1fr 1fr; } } /* ============================================================ BOOKING WIDGET — pill-strip at hero bottom ============================================================ */ .booking-widget { margin-top: var(--s-5); background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 8px; align-items: center; box-shadow: var(--shadow-md); } .booking-widget .bw-field { padding: 11px 42px 11px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--cream); display: flex; flex-direction: column; gap: 2px; position: relative; cursor: pointer; transition: all var(--transition); min-height: 56px; justify-content: center; } .booking-widget .bw-field::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: translateY(-70%) rotate(45deg); pointer-events: none; transition: border-color var(--transition); } .booking-widget .bw-field:hover { border-color: var(--coral); background: var(--coral-tint); } .booking-widget .bw-field:hover::after { border-color: var(--coral); } .booking-widget .bw-field.active { border-color: var(--coral); background: var(--paper); box-shadow: 0 0 0 4px var(--coral-tint); } .booking-widget .bw-field.active::after { border-color: var(--coral); } .booking-widget .bw-field .label { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--mute); } .booking-widget .bw-field .value { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; } .booking-widget .bw-field .value.placeholder { color: var(--mute-soft); font-weight: 500; font-style: italic; } .booking-widget .bw-field select { background: transparent; border: none; outline: none; font-size: 1rem; font-weight: 700; color: var(--ink); padding: 0; margin: 0; width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; } .booking-widget .bw-cta { background: var(--coral); color: var(--paper); border: none; border-radius: 999px; padding: 16px 26px; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .booking-widget .bw-cta:hover { background: var(--coral-deep); box-shadow: var(--shadow-coral); } /* bw-people: wrapper for adults+children. Disappears on desktop (display: contents), becomes a 2-col split row on mobile (≤540px). */ .booking-widget .bw-people { display: contents; } @media (max-width: 980px) { .booking-widget { grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); } .booking-widget .bw-cta { grid-column: 1 / -1; width: 100%; padding: 18px; } } @media (max-width: 540px) { .booking-widget .bw-people { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } } /* ============================================================ ROOM CARDS — large rounded with carousel ============================================================ */ .rooms-grid { display: flex; flex-direction: column; gap: var(--s-5); max-width: 1100px; margin: 0 auto; } .room-card { background: var(--cream); border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--line); transition: all var(--transition); display: grid; grid-template-columns: 1.05fr 1fr; box-shadow: var(--shadow-sm); min-height: 380px; } .room-card:hover { border-color: var(--coral); box-shadow: var(--shadow-md); transform: translateY(-3px); } /* Zigzag — every other card flips image to the right */ .room-card:nth-child(even) .room-card-media { order: 2; } .room-card:nth-child(even) .room-card-body { order: 1; } .room-card-media { position: relative; aspect-ratio: auto; min-height: 380px; background: var(--paper-3); } .room-card-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); justify-content: center; position: relative; } .room-card-body::before { /* small decorative pinelia in card body — brown dot accent */ content: ''; position: absolute; top: var(--s-4); right: var(--s-4); width: 36px; height: 36px; border-radius: 999px; background: radial-gradient(circle, var(--coral-tint) 0%, transparent 70%); pointer-events: none; } @media (max-width: 880px) { .room-card { grid-template-columns: 1fr; min-height: 0; } .room-card-media { min-height: 0; aspect-ratio: 4/3; } .room-card:nth-child(even) .room-card-media { order: 1; } .room-card:nth-child(even) .room-card-body { order: 2; } .room-card-body { padding: var(--s-4); } } .room-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2); } .room-card-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .room-card-type { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--coral); margin-bottom: 4px; } .room-card-price { text-align: right; flex-shrink: 0; } .room-card-price .num { font-size: 1.55rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; } .room-card-price .per { display: block; font-size: 0.72rem; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: 0.12em; } .room-card-meta { display: flex; gap: 18px; font-size: 0.88rem; color: var(--mute); font-weight: 500; } .room-card-meta strong { color: var(--ink); font-weight: 700; } .room-card-desc { font-size: 0.95rem; color: var(--mute); line-height: 1.6; margin: 0; } .room-card-cta { margin-top: auto; padding-top: var(--s-2); display: flex; gap: 10px; align-items: center; } /* ============================================================ AMENITIES — always all visible (locked UX #6) ============================================================ */ .amenities-row { display: flex; flex-wrap: wrap; gap: 6px; } .amenity-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; } .amenity-chip svg { color: var(--coral); } /* ============================================================ CAROUSEL ============================================================ */ .carousel { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .carousel-track { position: relative; width: 100%; height: 100%; } .carousel-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms ease; } .carousel-slide.active { opacity: 1; } .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: all var(--transition); z-index: 2; } .carousel-nav:hover { background: var(--coral); color: var(--paper); border-color: var(--coral); } .carousel-prev { left: 14px; } .carousel-next { right: 14px; } .room-card-media:hover .carousel-nav, .dest-card-media:hover .carousel-nav, .room-select-media:hover .carousel-nav { opacity: 1; } @media (max-width: 880px) { .carousel-nav { opacity: 1; } } .carousel-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; } .carousel-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.55); border: none; padding: 0; cursor: pointer; transition: all var(--transition); } .carousel-dot.active { background: var(--paper); width: 22px; } .carousel-counter { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 4px 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); z-index: 2; } /* ============================================================ SECTIONS ============================================================ */ .section-head { text-align: center; margin-bottom: var(--s-6); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); } .section-head .lead { text-align: center; } .section-soft { background: var(--paper-2); border-radius: var(--r-2xl); margin: 0 var(--s-4); padding: var(--s-7) var(--s-4); } /* ============================================================ DESTINATIONS ============================================================ */ .dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } @media (max-width: 980px) { .dest-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .dest-grid { grid-template-columns: 1fr; } } .dest-card { background: var(--cream); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); transition: all var(--transition); box-shadow: var(--shadow-sm); } .dest-card:hover { border-color: var(--coral); box-shadow: var(--shadow-md); transform: translateY(-2px); } .dest-card-media { position: relative; aspect-ratio: 4/3; background: var(--paper-3); } .dest-card-media img { width: 100%; height: 100%; object-fit: cover; } .dest-card-pill { position: absolute; top: 14px; left: 14px; background: var(--paper); border-radius: 999px; padding: 6px 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); } .dest-card-body { padding: var(--s-3); } .dest-card-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 6px; } .dest-card-meta { font-size: 0.85rem; color: var(--mute); } /* ============================================================ ABOUT block ============================================================ */ .about-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; } .about-image { aspect-ratio: 5/6; border-radius: var(--r-2xl); overflow: hidden; background: var(--paper-3); } .about-image img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 880px) { .about-split { grid-template-columns: 1fr; } .about-image { aspect-ratio: 16/12; max-height: 480px; } } /* ============================================================ GALLERY — general photos only (NEVER apartment photos) ============================================================ */ .gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; gap: 12px; } .gallery-cell { border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); position: relative; } .gallery-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; } .gallery-cell:hover img { transform: scale(1.04); } .gallery-cell:nth-child(1) { grid-column: span 3; grid-row: span 2; } .gallery-cell:nth-child(2) { grid-column: span 3; } .gallery-cell:nth-child(3) { grid-column: span 2; } .gallery-cell:nth-child(4) { grid-column: span 1; } .gallery-cell:nth-child(5) { grid-column: span 3; } .gallery-cell:nth-child(6) { grid-column: span 3; } @media (max-width: 720px) { .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } .gallery-cell:nth-child(n) { grid-column: span 1; grid-row: span 1; } .gallery-cell:nth-child(1) { grid-column: span 2; grid-row: span 2; } /* Σε δύο στήλες η έκτη φωτογραφία έμενε μόνη της σε δική της σειρά. Κρύβεται στο κινητό: μένει 1 μεγάλη + 4 μικρές, δηλαδή γεμάτες σειρές. Στο desktop εμφανίζονται κανονικά όλες. */ .gallery-cell:nth-child(n+6) { display: none; } } /* ============================================================ CTA STRIP — background photo + dark overlay ============================================================ */ .cta-strip { position: relative; background: linear-gradient(135deg, rgba(4, 31, 48, 0.84) 0%, rgba(8, 50, 74, 0.58) 100%), url('/images/general/hero-lefkada-coast.jpg') center/cover no-repeat; color: var(--cream); border-radius: var(--r-2xl); padding: var(--s-6) var(--s-5); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-4); align-items: center; margin: 0 var(--s-4); overflow: hidden; } .cta-strip::before { /* Decorative blob — top-right corner pinelia */ content: ''; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px; border-radius: 999px; background: radial-gradient(circle at center, rgba(190, 221, 235, 0.30) 0%, transparent 70%); pointer-events: none; } .cta-strip h2 { color: var(--cream); } .cta-strip .lead { color: rgba(253, 249, 239, 0.82); } .cta-strip .btn-primary { font-size: 1rem; padding: 16px 28px; background: var(--cream); color: var(--ink); } .cta-strip .btn-primary:hover { background: var(--paper-3); color: var(--ink); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } @media (max-width: 880px) { .cta-strip { grid-template-columns: 1fr; padding: var(--s-5) var(--s-4); } } /* ============================================================ FOOTER ============================================================ */ #footer { background: var(--paper-2); padding: var(--s-7) 0 var(--s-3); margin-top: var(--s-7); } .footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-4); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); } .footer-brand .name { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; } .footer-brand p { font-size: 0.95rem; color: var(--mute); line-height: 1.6; max-width: 38ch; margin: 0; } .footer-col h4 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s-3); } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 0.95rem; color: var(--mute); font-weight: 500; } .footer-col a:hover { color: var(--coral); } .footer-social { display: flex; gap: 8px; } .footer-social a { width: 42px; height: 42px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: all var(--transition); } .footer-social a:hover { background: var(--coral); color: var(--paper); border-color: var(--coral); transform: translateY(-2px); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-3); font-size: 0.82rem; color: var(--mute); } .footer-powered { text-align: center; border-top: 1px solid var(--line); margin-top: var(--s-3); padding-top: var(--s-3); font-size: 0.78rem; color: var(--mute-soft); } .footer-powered a { color: var(--coral); font-weight: 600; } @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } } /* ============================================================ ROOM DETAIL PAGE ============================================================ */ .room-detail { padding-top: 140px; padding-bottom: var(--s-7); } .room-detail-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 600; color: var(--mute); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); margin-bottom: var(--s-4); background: var(--paper); transition: all var(--transition); } .room-detail-back:hover { color: var(--coral); border-color: var(--coral); } .room-detail-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 12px; border-radius: var(--r-2xl); overflow: hidden; margin-bottom: var(--s-3); } .rd-cell { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); cursor: pointer; transition: all var(--transition); } .rd-cell:hover img { transform: scale(1.04); } .rd-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; } .rd-cell-1 { grid-row: span 2; } .rd-cell-2 { grid-column: 2; grid-row: 1; } .rd-cell-3 { grid-column: 3; grid-row: 1; } .rd-cell-4 { grid-column: 2; grid-row: 2; } .rd-cell-5 { grid-column: 3; grid-row: 2; } .rd-more { position: absolute; inset: 0; background: rgba(4, 31, 48, 0.62); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em; border-radius: inherit; } .rd-more-mobile { display: none; } @media (max-width: 820px) { .room-detail-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 8px; } .rd-cell { aspect-ratio: 1 / 1; } .rd-cell-1 { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 3; } .rd-cell-2 { grid-column: 1; grid-row: 2; } .rd-cell-3 { grid-column: 2; grid-row: 2; } .rd-cell-4, .rd-cell-5 { display: none; } .rd-more-desktop { display: none; } .rd-more-mobile { display: flex; } .rd-more { font-size: 1.3rem; } } .room-detail-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: end; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); } .room-detail-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 200; letter-spacing: -0.035em; margin: var(--s-2) 0 var(--s-3); } .room-detail-stats { display: flex; gap: 14px; font-size: 1rem; color: var(--mute); flex-wrap: wrap; } .room-detail-stats strong { color: var(--ink); font-weight: 700; } .room-detail-stats .dot { color: var(--mute-soft); } .room-detail-price-block { text-align: right; white-space: nowrap; } .room-detail-price-block .amount { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.025em; color: var(--coral); } .room-detail-price-block .suffix { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); font-weight: 700; margin-top: 2px; } @media (max-width: 720px) { .room-detail-head { grid-template-columns: 1fr; } .room-detail-price-block { text-align: left; } } /* Info grid — amenities + map side by side */ .room-detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-4); align-items: stretch; } .room-detail-amenities, .room-detail-map { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); display: flex; flex-direction: column; } .room-detail-amenities h3, .room-detail-map h3 { font-size: 1.3rem; margin: 0 0 var(--s-3); font-weight: 700; letter-spacing: -0.015em; } .room-detail-amenities-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; flex: 1; align-content: start; } .room-detail-amenities-list li { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; color: var(--ink); } .room-detail-amenities-list .check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--coral-tint); color: var(--coral); border-radius: 999px; flex-shrink: 0; } .room-detail-map-embed { border-radius: var(--r-md); overflow: hidden; flex: 1; background: var(--paper); min-height: 280px; } .room-detail-map-embed iframe { width: 100%; height: 100%; border: 0; display: block; } .room-detail-cta-wrap { display: flex; justify-content: center; padding: var(--s-4) 0 var(--s-3); border-top: 1px solid var(--line); margin-top: var(--s-2); } .room-detail-cta-wrap .btn-lg { font-size: 1rem; padding: 18px 40px; } @media (max-width: 900px) { .room-detail-info-grid { grid-template-columns: 1fr; } .room-detail-map { order: -1; } } @media (max-width: 540px) { .room-detail-amenities-list { grid-template-columns: 1fr; } } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(14, 14, 18, 0.92); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 60px 16px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: lbFade 220ms ease; } @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } } .lightbox-close { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); } .lightbox-close:hover { background: var(--coral); border-color: var(--coral); } .lightbox-stage { position: relative; max-width: 1200px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-xl); display: block; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: none; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); } .lightbox-nav:hover { background: var(--coral); color: var(--paper); } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.92); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; } /* ============================================================ BOOKING PAGE — steps + flow ============================================================ */ .book-page { padding-top: 140px; min-height: 100vh; } .steps { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; } .step { display: flex; align-items: center; gap: 10px; color: var(--mute-soft); font-weight: 600; font-size: 0.95rem; } .step .num { width: 32px; height: 32px; border-radius: 999px; background: var(--paper-2); color: var(--mute); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; border: 1.5px solid var(--line); transition: all var(--transition); } .step.active .num { background: var(--coral); border-color: var(--coral); color: var(--paper); } .step.done .num { background: var(--coral-tint); border-color: var(--coral-soft); color: var(--coral); } .step.active { color: var(--ink); } .step.done { color: var(--ink-soft); } .step-sep { width: 24px; height: 2px; background: var(--line); border-radius: 999px; } .step.done + .step-sep { background: var(--coral-soft); } .book-section { background: var(--paper); border-radius: var(--r-2xl); border: 1px solid var(--line); padding: var(--s-5); } @media (max-width: 720px) { .book-section { padding: var(--s-4); border-radius: var(--r-lg); } } .book-section .head { margin-bottom: var(--s-4); } .book-section .head h2 { font-size: 1.8rem; font-weight: 300; letter-spacing: -0.02em; } .book-section .head h2 b { font-weight: 800; } /* Room-select cards on booking step 1 — editorial horizontal with zigzag (matches home page) */ .book-rooms { display: flex; flex-direction: column; gap: var(--s-4); } .book-room-card { display: grid; grid-template-columns: 1.05fr 1fr; background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r-2xl); overflow: hidden; cursor: pointer; transition: all var(--transition); box-shadow: var(--shadow-sm); min-height: 360px; } .book-room-card:hover { border-color: var(--coral); transform: translateY(-3px); box-shadow: var(--shadow-md); } .book-room-card.selected { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-tint), var(--shadow-md); } /* Zigzag — every other card flips image to the right */ .book-room-card:nth-child(even) .room-select-media { order: 2; } .book-room-card:nth-child(even) .room-select-body { order: 1; } .room-select-media { position: relative; aspect-ratio: auto; min-height: 360px; background: var(--paper-3); } .room-select-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); justify-content: center; position: relative; } .room-select-body::before { /* small decorative pinelia — coral blob top-right corner */ content: ''; position: absolute; top: var(--s-4); right: var(--s-4); width: 36px; height: 36px; border-radius: 999px; background: radial-gradient(circle, var(--coral-tint) 0%, transparent 70%); pointer-events: none; } .room-select-body .type { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--coral); } .room-select-body .name { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 0; } .room-select-body .meta { font-size: 0.95rem; color: var(--mute); font-weight: 500; } .room-select-body .price-row { display: flex; justify-content: space-between; align-items: end; margin-top: auto; padding-top: var(--s-3); gap: var(--s-2); } .room-select-body .price { font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1; } .room-select-body .per { font-size: 0.7rem; color: var(--mute); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-top: 4px; } @media (max-width: 880px) { .book-room-card { grid-template-columns: 1fr; min-height: 0; } .room-select-media { min-height: 0; aspect-ratio: 4/3; } .book-room-card:nth-child(even) .room-select-media { order: 1; } .book-room-card:nth-child(even) .room-select-body { order: 2; } .room-select-body { padding: var(--s-4); } } /* Booking step 2 — calendar + guest form side by side */ .book-two-col { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-5); } @media (max-width: 880px) { .book-two-col { grid-template-columns: 1fr; } } /* Calendar */ .calendar { background: var(--paper-2); border-radius: var(--r-xl); padding: var(--s-3); border: 1px solid var(--line); } .cal-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; margin-bottom: 10px; } .cal-head button { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); display: inline-flex; align-items: center; justify-content: center; } .cal-head button:hover { border-color: var(--coral); color: var(--coral); } .cal-head .label { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; } .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 4px 8px; } .cal-weekdays span { text-align: center; font-size: 0.7rem; color: var(--mute); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 4px; } .cal-day { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: 0.92rem; font-weight: 600; border-radius: 999px; cursor: pointer; color: var(--ink); transition: all 160ms ease; position: relative; } .cal-day:hover { background: var(--coral-tint); } .cal-day.muted { color: var(--mute-soft); cursor: default; } .cal-day.muted:hover { background: transparent; } .cal-day.booked { color: var(--mute-soft); text-decoration: line-through; cursor: not-allowed; } .cal-day.booked:hover { background: transparent; } .cal-day.in-range { background: var(--coral-tint); border-radius: 0; } .cal-day.range-start, .cal-day.range-end { background: var(--coral); color: var(--paper); } .cal-day.range-start { border-top-left-radius: 999px; border-bottom-left-radius: 999px; } .cal-day.range-end { border-top-right-radius: 999px; border-bottom-right-radius: 999px; } .cal-day.today::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 999px; background: var(--coral); } .cal-day.today.range-start::after, .cal-day.today.range-end::after { background: var(--paper); } .cal-legend { display: flex; gap: var(--s-3); padding: var(--s-3) 8px 4px; font-size: 0.78rem; color: var(--mute); } .cal-legend span { display: inline-flex; align-items: center; gap: 6px; } .cal-legend .swatch { width: 14px; height: 14px; border-radius: 999px; background: var(--coral); } .cal-legend .swatch-tint { background: var(--coral-tint); } .cal-legend .swatch-strike { background: var(--paper-3); position: relative; } .cal-legend .swatch-strike::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 45%, var(--mute) 45%, var(--mute) 55%, transparent 55%); } /* Guest form */ .guest-form { display: grid; gap: var(--s-3); } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); } .field-input, .field-textarea, .field-select { background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 18px; font-family: var(--font); font-size: 0.98rem; color: var(--ink); outline: none; transition: all var(--transition); width: 100%; } .field-input:focus, .field-textarea:focus, .field-select:focus { border-color: var(--coral); background: var(--paper); box-shadow: 0 0 0 4px var(--coral-tint); } .field-textarea { min-height: 100px; resize: vertical; line-height: 1.5; } .field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .field-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); } @media (max-width: 540px) { .field-grid-2, .field-grid-3 { grid-template-columns: 1fr; } } /* Step 3 — payment cards */ .pay-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); } .pay-card { border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: var(--s-4); cursor: pointer; transition: all var(--transition); background: var(--paper); } .pay-card:hover { border-color: var(--coral); } .pay-card.selected { border-color: var(--coral); background: var(--coral-tint); box-shadow: 0 0 0 4px var(--coral-tint); } .pay-card h4 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; } .pay-card p { margin: 0; font-size: 0.88rem; color: var(--mute); line-height: 1.5; } .book-nav { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; } /* Success */ .success { text-align: center; padding: var(--s-6) var(--s-3); } .success .ref-pill { display: inline-block; background: var(--coral-tint); color: var(--coral-deep); padding: 14px 28px; border-radius: 999px; font-size: 1.4rem; font-weight: 800; letter-spacing: 0.04em; margin: var(--s-3) 0; } .success .check { width: 80px; height: 80px; margin: 0 auto var(--s-3); border-radius: 999px; background: var(--coral); color: var(--paper); display: flex; align-items: center; justify-content: center; } /* ============================================================ PRIVACY PAGE ============================================================ */ .privacy-shell { padding-top: 140px; padding-bottom: var(--s-7); } .privacy-body { max-width: 760px; margin: 0 auto; } .privacy-body h2 { font-size: 1.4rem; font-weight: 700; margin-top: var(--s-5); margin-bottom: 12px; } .privacy-body p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 var(--s-2); } .privacy-body a { color: var(--coral); font-weight: 600; } /* ============================================================ ABOUT page ============================================================ */ .about-shell { padding-top: 140px; } /* ============================================================ ADMIN PANEL ============================================================ */ .admin-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } .admin-sidebar { background: var(--ink); color: var(--paper); padding: var(--s-5) var(--s-3); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s-3); } .admin-sidebar .brand { display: flex; align-items: center; gap: 12px; color: var(--paper); margin-bottom: var(--s-4); } .brand-mark { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--wave); display: inline-block; } .brand-name { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .brand-tag { display: block; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); margin-top: 3px; font-weight: 700; } .admin-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .admin-nav a { padding: 12px 16px; border-radius: var(--r-md); color: rgba(255,255,255,0.7); font-weight: 600; font-size: 0.95rem; transition: all var(--transition); } .admin-nav a:hover { background: rgba(255,255,255,0.06); color: var(--paper); } .admin-nav a.active { background: var(--coral); color: var(--paper); } .admin-main { padding: var(--s-5); background: var(--paper-2); min-height: 100vh; } .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--s-2); } .stat-card { background: var(--paper); border-radius: var(--r-lg); padding: var(--s-4); border: 1px solid var(--line); } .stat-card .label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); display: block; } .stat-card .value { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-top: 6px; } .stat-card .value-accent { color: var(--coral); } .admin-card { background: var(--paper); border-radius: var(--r-lg); padding: var(--s-4); border: 1px solid var(--line); } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; } .admin-table th { text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); padding: 12px; border-bottom: 1px solid var(--line); } .admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .status-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .status-pending { background: var(--coral-tint); color: var(--brown-deep); } .status-confirmed { background: var(--ok-bg); color: var(--ok-fg); } .status-cancelled { background: var(--bad-bg); color: var(--bad-fg); } /* Amenities grid in admin modal */ .amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; } .amenity-pick { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 160ms ease; } .amenity-pick:hover { border-color: var(--coral); } .amenity-pick.on { background: var(--coral-tint); border-color: var(--coral); color: var(--ink); font-weight: 700; } .amenity-pick input { display: none; } .amenities-grouped { display: flex; flex-direction: column; gap: var(--s-3); } .amenity-group { display: flex; flex-direction: column; gap: 8px; } .amenity-group-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); } .amenity-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; } .field-hint { font-size: 0.78rem; color: var(--mute); margin: 4px 0 8px; line-height: 1.45; } .sp-list { display: flex; flex-direction: column; gap: 8px; } .sp-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; } .sp-row .pill-btn.danger { padding: 8px 14px; font-size: 1rem; line-height: 1; } @media (max-width: 600px) { .sp-row { grid-template-columns: 1fr 1fr; } .sp-row .sp-price { grid-column: 1 / 2; } .sp-row .pill-btn.danger { grid-column: 2 / 3; } } .ical-block { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; background: var(--paper-2); } .ical-block summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--ink); user-select: none; display: flex; align-items: center; gap: 8px; list-style: none; } .ical-block summary::-webkit-details-marker { display: none; } .ical-block[open] summary { margin-bottom: 12px; } .ical-block .ical-body { display: flex; flex-direction: column; gap: var(--s-3); } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-4); background: linear-gradient(160deg, var(--paper) 0%, var(--coral-tint) 100%); } .login-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-5); width: 100%; max-width: 420px; box-shadow: var(--shadow-md); } .login-card h2 { margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; } .login-card .lead { margin-bottom: var(--s-4); font-size: 0.95rem; } .login-card form { display: grid; gap: var(--s-3); } /* utility */ .hidden { display: none !important; } .tabular { font-variant-numeric: tabular-nums; } /* Animation entrances */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ============================================================ BW SELECT — custom dropdown for adults/children (matches date popup) ============================================================ */ .bw-select-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: 200; display: flex; flex-direction: column; gap: 2px; overflow: hidden; animation: bwPop 160ms ease-out; transform-origin: top center; scrollbar-width: none !important; -ms-overflow-style: none !important; } .bw-select-menu::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } .bw-select-menu.flip-up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; } @keyframes bwPop { from { opacity: 0; transform: scaleY(0.96) translateY(-4px); } to { opacity: 1; transform: scaleY(1) translateY(0); } } .bw-select-opt { background: transparent; border: none; padding: 10px 16px; border-radius: 999px; text-align: center; font-family: var(--font); font-size: 0.95rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: background 140ms ease, color 140ms ease; flex-shrink: 0; } .bw-select-opt:hover { background: var(--coral-tint); color: var(--coral); } .bw-select-opt.on { background: var(--coral); color: var(--paper); } /* ============================================================ DATE POPUP — opens from booking widget date fields ============================================================ */ .date-popup-backdrop { position: fixed; inset: 0; background: rgba(20, 20, 24, 0.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 1100; display: none; animation: dpFade 200ms ease; } /* Backdrop only on mobile — desktop shows the calendar as a floating popover without dimming */ @media (max-width: 760px) { .date-popup-backdrop.show { display: block; } } @keyframes dpFade { from { opacity: 0; } to { opacity: 1; } } .date-popup { position: fixed; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 28px 70px -14px rgba(8, 50, 74, 0.28); padding: var(--s-3); z-index: 1200; display: none; width: min(380px, calc(100vw - 24px)); animation: dpPop 220ms cubic-bezier(0.4, 0, 0.2, 1); } .date-popup--top { box-shadow: 0 -28px 70px -14px rgba(8, 50, 74, 0.28); } .date-popup.show { display: block; } @keyframes dpPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .date-popup-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); } .date-popup-close:hover { background: var(--coral); color: var(--paper); border-color: var(--coral); } .date-popup-body { padding-top: var(--s-2); } .dp-month { padding: 4px 2px; } .dp-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px var(--s-2); } .dp-nav { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); } .dp-nav:hover:not(:disabled) { border-color: var(--coral); color: var(--coral); } .dp-nav:disabled { opacity: 0.3; cursor: not-allowed; } .dp-month-label { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-transform: capitalize; } .dp-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; } .dp-dow { text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); padding: 6px 0; } .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-pad { aspect-ratio: 1 / 1; } .dp-day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 0.92rem; font-weight: 600; border: none; background: transparent; color: var(--ink); border-radius: 999px; cursor: pointer; transition: background 140ms ease, color 140ms ease; padding: 0; } .dp-day:hover:not(.disabled):not(.booked):not(.range-start):not(.range-end) { background: var(--coral-tint); } .dp-day.disabled { color: var(--mute-soft); cursor: not-allowed; opacity: 0.45; } .dp-day.disabled:hover { background: transparent; } .dp-day.booked { color: var(--mute-soft); text-decoration: line-through; cursor: not-allowed; } .dp-day.booked:hover { background: transparent; } .dp-day.today { color: var(--coral); font-weight: 800; } .dp-day.range-start, .dp-day.range-end { background: var(--coral); color: var(--paper); font-weight: 800; } .dp-day.in-range { background: var(--coral-tint); border-radius: 0; } .dp-day.range-start { border-radius: 999px 0 0 999px; } .dp-day.range-end { border-radius: 0 999px 999px 0; } .dp-day.range-start.range-end { border-radius: 999px; } .date-popup-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) 6px 4px; margin-top: var(--s-2); border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--mute); flex-wrap: wrap; gap: 10px; } .dp-legend { display: flex; gap: 14px; flex-wrap: wrap; } .dp-legend span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; } .dp-sw { width: 14px; height: 14px; border-radius: 999px; display: inline-block; } .dp-sw-sel { background: var(--coral); } .dp-sw-range { background: var(--coral-tint); } .dp-sw-bk { background: var(--paper-3); position: relative; } .dp-sw-bk::after { content: ''; position: absolute; inset: 6px 2px; background: var(--mute); border-radius: 999px; transform: rotate(0deg); } .date-popup-clear { background: transparent; border: none; font-family: var(--font); font-size: 0.85rem; font-weight: 700; color: var(--mute); cursor: pointer; padding: 6px 10px; border-radius: 999px; transition: all var(--transition); } .date-popup-clear:hover { color: var(--coral); background: var(--coral-tint); } @media (max-width: 760px) { .date-popup { position: fixed; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: calc(100vw - 24px); max-width: 380px; } @keyframes dpPop { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to { opacity: 1; transform: translate(-50%, -50%); } } } /* ============================================================ MOBILE — tighten spacing, fix overlaps under 720px ============================================================ */ @media (max-width: 880px) { section { padding: var(--s-5) 0; } .container { padding: 0 var(--s-3); } .hero { padding-top: 0; padding-bottom: var(--s-4); } #navbar { top: 10px; padding: 0 var(--s-3); } .nav-shell { padding: 8px 8px 8px 18px; } .nav-brand { font-size: 1.08rem; } .lang-toggle { padding: 6px 10px; font-size: 0.74rem; } .lang-toggle button { padding: 0 2px; } /* Hero image becomes full-bleed background at top — navbar floats over it */ .hero-inner { gap: 0; } .hero-image { order: -1; aspect-ratio: auto; height: 58vh; min-height: 360px; max-height: 560px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 0; margin-bottom: var(--s-4); border-radius: 0 0 var(--r-2xl) var(--r-2xl); box-shadow: none; } .hero-badge { bottom: var(--s-3); left: var(--s-3); background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .hero-copy { padding-top: var(--s-3); } .hero-title { font-size: clamp(1.9rem, 8.5vw, 3rem); line-height: 1.2; margin-bottom: var(--s-3); } .hero-title .accent { padding: 0.02em 0.28em 0.06em; } .hero-lead { font-size: 1rem; } .hero-ctas { gap: 8px; } .hero-ctas .btn-lg { padding: 14px 22px; font-size: 0.92rem; } .hero-meta { grid-template-columns: 1fr 1fr; gap: var(--s-2); } .hero-meta > div .value { font-size: 0.92rem; } .section-head { margin-bottom: var(--s-4); } .section-head h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); } /* Room card spacing */ .room-card-body { padding: var(--s-3); gap: 10px; } .room-card-name { font-size: 1.25rem; } .room-card-price .num { font-size: 1.3rem; } .amenity-chip { font-size: 0.74rem; padding: 5px 10px; } /* Footer */ #footer { padding: var(--s-5) 0 var(--s-3); margin-top: var(--s-5); } /* Lightbox */ .lightbox { padding: 56px 8px; } .lightbox-nav { width: 44px; height: 44px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } /* Booking flow */ .book-page { padding-top: 100px; } .steps { gap: var(--s-2); margin-bottom: var(--s-3); } .step span:not(.num) { display: none; } .step-sep { width: 16px; } .book-section { padding: var(--s-3); border-radius: var(--r-lg); } .book-section .head h2 { font-size: 1.4rem; } /* Room detail */ .room-detail { padding-top: 100px; padding-bottom: var(--s-5); } .room-detail-mosaic { gap: 8px; border-radius: var(--r-xl); } .room-detail-title { font-size: clamp(1.9rem, 7vw, 2.6rem); margin: 6px 0 var(--s-2); } .room-detail-price-block .amount { font-size: 1.8rem; } .room-detail-head { padding-bottom: var(--s-3); margin-bottom: var(--s-3); } .rd-section { margin-bottom: var(--s-3); } .rd-section h3 { font-size: 1.1rem; } /* Privacy */ .privacy-shell { padding-top: 100px; padding-bottom: var(--s-5); } .privacy-body h2 { font-size: 1.15rem; } /* About */ .about-shell { padding-top: 100px; } } @media (max-width: 540px) { .hero-title { font-size: clamp(1.8rem, 9vw, 2.4rem); } .hero-title .accent { padding: 0.02em 0.24em 0.05em; } .hero-ctas { flex-direction: column; } .hero-ctas .btn { width: 100%; } .hero-meta { grid-template-columns: 1fr; gap: 10px; padding-top: var(--s-3); } .hero-meta > div { display: flex; justify-content: space-between; align-items: baseline; } .hero-meta > div .value { font-size: 0.95rem; } .booking-widget { grid-template-columns: 1fr; padding: 10px; border-radius: var(--r-xl); } .booking-widget .bw-field { padding: 10px 14px; } .booking-widget .bw-cta { padding: 16px; } .nav-shell { padding: 6px 6px 6px 14px; } .nav-brand { font-size: 1rem; } .lang-toggle { padding: 5px 8px; font-size: 0.7rem; } .lang-toggle button { padding: 0 2px; } .room-detail-back { font-size: 0.85rem; padding: 6px 12px; } } /* ============================================================ DESIRE STAYS — ΕΠΙΦΑΝΕΙΑ Ίδια δομή σελίδας με το reference, εντελώς άλλη επιφάνεια: full-width navbar που «γεμίζει» στο scroll, ίσιες γωνίες, serif τίτλοι, θαλασσινή παλέτα, drawer μενού από τα δεξιά. ============================================================ */ /* ---- NAVBAR: πλήρους πλάτους, διάφανο πάνω από το hero ---- */ #navbar { top: 0; padding: 0; } .nav-shell { max-width: none; width: 100%; margin: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 20px max(var(--s-4), calc((100vw - var(--container)) / 2)); gap: var(--s-4); transition: background var(--transition), border-color var(--transition), padding var(--transition); } /* Στο scroll: συμπαγές φόντο + λεπτή γραμμή (το class μπαίνει από το app.js) */ #navbar.scrolled .nav-shell { background: rgba(247, 251, 253, 0.92); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom-color: var(--line); padding-top: 12px; padding-bottom: 12px; } /* ---- Λογότυπο: μόνο γράμματα, δύο σειρές ---- */ .nav-brand { flex-direction: column; align-items: flex-start; gap: 2px; font-family: var(--font-display); font-weight: 500; letter-spacing: 0; font-size: 1rem; line-height: 1; } .nav-brand .wm { font-size: 1.32rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sea); line-height: 1; } .nav-brand .wm-sub { display: block; font-family: var(--font-body); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--wave); line-height: 1; } .nav-brand:hover .wm { color: var(--wave); } /* ---- Links: κεφαλαία, υπογράμμιση που ανοίγει από αριστερά ---- */ .nav-links { gap: var(--s-4); } .nav-links a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sea-soft); padding: 4px 0; } .nav-links a::after { left: 0; bottom: -3px; height: 1px; border-radius: 0; background: var(--wave); transition: width var(--transition); } .nav-links a:hover::after { width: 100%; left: 0; } .nav-links a.active { color: var(--wave); font-weight: 500; } .nav-links a.active::after { width: 100%; left: 0; } /* ---- Γλώσσα: απλό κείμενο EL / EN, χωρίς pill ---- */ .lang-toggle { background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 0 var(--s-3) 0 0; margin-right: var(--s-1); gap: 6px; font-size: 0.72rem; letter-spacing: 0.14em; } .lang-toggle button { color: var(--mute-soft); font-weight: 500; } .lang-toggle button.on { color: var(--sea); font-weight: 700; } .lang-toggle button:hover { color: var(--wave); } /* ---- Κουμπί κράτησης: ορθογώνιο, κεφαλαία ---- */ .nav-book-btn { background: var(--wave); color: #fff; border-radius: var(--r-sm); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 20px; } .nav-book-btn:hover { background: var(--sea); color: #fff; box-shadow: none; transform: none; } /* ---- Burger: τετράγωνο πλαίσιο ---- */ .nav-toggle { background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); width: 42px; height: 42px; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--sea); border-radius: 0; width: 18px; } .nav-toggle.open span { background: transparent; } /* ---- Mobile menu: drawer από τα δεξιά, πλήρους ύψους ---- */ .mobile-menu { display: flex; top: 0; bottom: 0; left: auto; right: 0; width: min(340px, 86vw); height: 100%; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 96px var(--s-4) var(--s-4); background: var(--shell); box-shadow: -20px 0 50px rgba(8, 50, 74, 0.14); transform: translateX(100%); visibility: hidden; transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 320ms; overflow-y: auto; } .mobile-menu.open { display: flex; transform: translateX(0); visibility: visible; transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s; } .mobile-menu .mm-links a { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--sea); padding: 15px 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); } .mobile-menu .mm-links a.active { color: var(--wave); background: transparent; font-style: italic; } /* Locked UX #7 — το «Κρατήσεις» είναι εμφανώς κουμπί, με έξτρα κενό από πάνω */ .mobile-menu .book-link { font-family: var(--font-body); background: var(--wave); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; border: 0; border-radius: var(--r-sm); margin-top: var(--s-4); padding: 18px 16px; } .mobile-menu .book-link:hover { background: var(--sea); color: #fff; } /* ---- BUTTONS: ορθογώνια ---- */ .btn { border-radius: var(--r-sm); font-weight: 600; letter-spacing: 0.01em; } .btn-primary { background: var(--wave); color: #fff; } .btn-primary:hover { background: var(--sea); color: #fff; box-shadow: var(--shadow-coral); } .btn-dark { background: var(--sea); color: #fff; } .btn-dark:hover { background: var(--wave); color: #fff; } .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--sea); } .btn-ghost:hover { border-color: var(--wave); color: var(--wave); background: var(--wave-tint); } .btn-link { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.02em; } /* ---- HERO ---- */ .hero { padding-top: 168px; background: var(--foam); } /* Απαλή θαλάσσια λάμψη δεξιά αντί για το καφέ blob */ .hero::before { top: -40px; left: auto; right: -180px; width: 620px; height: 620px; border-radius: 999px; background: radial-gradient(circle at center, var(--wave-tint) 0%, transparent 68%); opacity: 0.9; } .hero-title { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; } .hero-title b { font-weight: 600; font-style: italic; color: var(--sea); } /* Χωρίς χρωματιστό pill — πλάγιο, με κυματιστή υπογράμμιση */ .hero-title .accent { background: transparent; color: var(--wave); border-radius: 0; padding: 0; font-weight: 600; font-style: italic; text-decoration: underline; text-decoration-color: var(--wave-soft); text-decoration-thickness: 3px; text-underline-offset: 10px; } .hero-image { border-radius: var(--r-xl); box-shadow: none; border: 1px solid var(--line); } /* Σκληρή σκιά με offset αντί για απαλή — δεν κόβεται από το overflow:hidden */ .hero-image { box-shadow: 16px 16px 0 -1px var(--wave-tint); } .hero-meta > div .value { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; } /* ---- BOOKING WIDGET: ίσιο πλαίσιο, όχι pill-strip ---- */ .booking-widget { border-radius: var(--r-lg); background: var(--shell); border: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 10px; } .booking-widget .bw-field { border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--foam); } .booking-widget .bw-field .label { letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.62rem; } .booking-widget .bw-field .value { font-family: var(--font-display); font-weight: 500; } .booking-widget .bw-cta { border-radius: var(--r-sm); background: var(--sea); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .booking-widget .bw-cta:hover { background: var(--wave); } .bw-select-menu { border-radius: var(--r-sm); } /* ---- ROOM CARDS ---- */ .room-card { border-radius: var(--r-lg); box-shadow: none; border: 1px solid var(--line); background: var(--shell); } .room-card:hover { border-color: var(--wave); box-shadow: var(--shadow-md); transform: none; } /* Χωρίς διακοσμητική κουκκίδα — αντ' αυτού κάθετη γραμμή μάρκας */ .room-card-body::before { top: var(--s-5); right: auto; left: 0; width: 3px; height: 46px; border-radius: 0; background: var(--wave); } .room-card-name { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; } .room-card-type { letter-spacing: 0.26em; font-weight: 500; } .room-card-price .num { font-family: var(--font-display); font-weight: 600; color: var(--wave); } .room-card-media { border-radius: 0; } /* ---- DESTINATION CARDS ---- */ .dest-card { border-radius: var(--r-lg); } .dest-card-title { font-family: var(--font-display); font-weight: 500; } .dest-card-pill { border-radius: var(--r-sm); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.6rem; } .dest-section::before { background: radial-gradient(circle, var(--wave-soft) 0%, transparent 70%); opacity: 0.5; } .dest-section::after { background: radial-gradient(circle, var(--wave) 0%, transparent 70%); opacity: 0.08; } /* ---- GALLERY / ABOUT ---- */ .gallery-cell { border-radius: var(--r-md); } .about-image { border-radius: var(--r-xl); border: 1px solid var(--line); } .section-soft { border-radius: var(--r-2xl); } /* ---- AMENITY CHIPS: pill μένει, αλλά θαλασσί ---- */ .amenity-chip { background: var(--wave-tint); border-color: var(--wave-soft); color: var(--sea-soft); } /* ---- FOOTER: βαθύ μπλε αντί για ανοιχτό ---- */ #footer { background: var(--sea); color: var(--foam); margin-top: var(--s-8); padding-top: var(--s-8); } #footer h4, #footer .name { color: #fff; } #footer a { color: rgba(247, 251, 253, 0.82); } #footer a:hover { color: var(--wave-soft); } #footer p, .footer-bottom { color: rgba(247, 251, 253, 0.62); } .footer-grid { border-bottom-color: rgba(255, 255, 255, 0.14); } .footer-brand .name { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.16em; text-transform: uppercase; } .footer-brand .name-sub { display: block; font-family: var(--font-body); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--wave-soft); margin-top: 6px; } .footer-col h4 { letter-spacing: 0.26em; font-weight: 500; } .footer-social a { border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #fff; } .footer-social a:hover { background: var(--wave); border-color: var(--wave); color: #fff; transform: none; } /* Locked UX #9 — «Powered by LetrionAi» κεντραρισμένο, με λεπτή γραμμή πάνω */ .footer-powered { border-top-color: rgba(255, 255, 255, 0.14); color: rgba(247, 251, 253, 0.45); } .footer-powered a { color: var(--wave-soft); } /* ---- ΦΟΡΜΕΣ / ΗΜΕΡΟΛΟΓΙΟ / ΒΗΜΑΤΑ ---- */ .field-input, .field-select, .field-textarea { border-radius: var(--r-sm); } .field-label { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.64rem; } .calendar, .guest-form, .book-section { border-radius: var(--r-lg); } .cal-day { border-radius: var(--r-sm); } .pay-card { border-radius: var(--r-md); } .pay-card h4 { font-family: var(--font-display); font-weight: 500; } .steps .step .num { border-radius: var(--r-sm); } .ref-pill { border-radius: var(--r-sm); font-family: var(--font-display); } .cta-strip { border-radius: var(--r-2xl); } .privacy-body h2 { font-family: var(--font-display); } /* ---- ADMIN ---- */ .admin-sidebar { background: var(--sea-deep); } .admin-sidebar .brand-name { font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; } .admin-sidebar .brand-mark { border-radius: var(--r-sm); background: var(--wave); } .stat-card, .admin-card, .data-table { border-radius: var(--r-lg); } @media (max-width: 880px) { .hero-image { box-shadow: none; } } @media (max-width: 540px) { .nav-shell { padding: 14px var(--s-3); } .nav-brand .wm { font-size: 1.1rem; } .booking-widget { border-radius: var(--r-md); } } /* ---- Booking: κάρτα επιλογής + μονή επιλογή πληρωμής ---- */ .room-select-details { align-self: flex-start; font-size: 0.86rem; } .pay-options-single { grid-template-columns: 1fr; max-width: 520px; } .pay-options-single .pay-card { cursor: default; } /* Οι παροχές στις κάρτες εμφανίζονται ΠΑΝΤΑ ολόκληρες (locked UX #6) */ .room-card-body .amenities-row { margin-top: 2px; } /* Οι παροχές στη σελίδα καταλύματος: chips με εικονίδιο, σε πλέγμα, όλες μαζί */ .room-detail-amenities .amenities-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-3); } .room-detail-amenities .amenity-chip { font-size: 0.82rem; padding: 8px 13px; } /* ============================================================ DESIRE STAYS — ΚΙΝΗΤΑ Το navbar εδώ είναι πάντα συμπαγές (full-width bar), και η φωτογραφία του hero μπαίνει από άκρη σε άκρη ακριβώς από κάτω. ============================================================ */ @media (max-width: 880px) { /* Το reference «κρέμαγε» το navbar σαν pill· εδώ είναι μπάρα πλήρους πλάτους */ #navbar { top: 0; padding: 0; } .nav-shell, #navbar.scrolled .nav-shell { padding: 12px var(--s-3); background: rgba(247, 251, 253, 0.95); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom-color: var(--line); } .nav-brand .wm { font-size: 1.14rem; letter-spacing: 0.14em; } .nav-brand .wm-sub { font-size: 0.52rem; letter-spacing: 0.34em; } .lang-toggle { padding: 0 var(--s-2) 0 0; } /* Σελίδες που ξεκινούν με τίτλο (καταλύματα, προορισμοί): κενό ώστε ο τίτλος να μη χώνεται κάτω από το σταθερό navbar. */ .hero { padding-top: 96px; padding-bottom: var(--s-4); } /* Μόνο η αρχική έχει full-bleed φωτογραφία που περνά κάτω από το navbar. */ .hero-home { padding-top: 0; } .hero-image { height: 46vh; min-height: 300px; max-height: 440px; border-radius: 0 0 var(--r-xl) var(--r-xl); border: 0; margin-bottom: 0; } .hero-copy { padding-top: var(--s-4); } .hero-title { font-size: clamp(2rem, 8.6vw, 2.9rem); line-height: 1.16; } .hero-title .accent { text-decoration-thickness: 2px; text-underline-offset: 6px; } .hero-meta { padding-top: var(--s-3); } .hero-meta > div .value { font-size: 0.98rem; } /* Τα eyebrows να μη σπάνε σε δεύτερη σειρά */ .eyebrow { font-size: 0.64rem; letter-spacing: 0.22em; } /* Άνετα σημεία αφής παντού */ .btn { min-height: 48px; } .btn-sm { min-height: 42px; } .nav-book-btn { min-height: 42px; } /* Το footer είχε πάρει το desktop κενό του — πολύ μεγάλο για κινητό */ #footer { padding: var(--s-6) 0 var(--s-3); margin-top: var(--s-6); } .footer-grid { gap: var(--s-4); padding-bottom: var(--s-4); } .footer-brand .name { font-size: 1.15rem; } .footer-social a { width: 46px; height: 46px; } /* Ημερολόγιο: ΟΧΙ min-height εδώ — μαζί με το aspect-ratio: 1/1 γίνεται ελάχιστο ΠΛΑΤΟΣ και σπρώχνει το grid στα 370px σε οθόνη 390px. Αντ' αυτού μαζεύουμε τα paddings ώστε τα κελιά να βγαίνουν φυσικά ~41px. */ .book-two-col { gap: var(--s-3); } .calendar { padding: var(--s-2); } .cal-grid, .cal-weekdays { padding-left: 2px; padding-right: 2px; } .cal-head { padding: 0 2px 10px; } /* Κανένα παιδί του grid δεν επιτρέπεται να φουσκώσει το track πάνω από το πλάτος του γονιού — αυτό ήταν που έβγαζε και τη φόρμα εκτός κάρτας. */ .book-two-col > *, .guest-form, .guest-form > *, .field, .field-grid-2, .field-grid-3, .field-grid-2 > *, .field-grid-3 > * { min-width: 0; } } @media (max-width: 540px) { .container { padding: 0 var(--s-3); } .hero { padding-top: 88px; } .hero-home { padding-top: 0; } .book-section { padding: var(--s-3) 16px; } .calendar { padding: 12px 10px; } .nav-shell, #navbar.scrolled .nav-shell { padding: 11px var(--s-3); } .hero-title { font-size: clamp(1.95rem, 9.2vw, 2.6rem); } /* Τα δύο CTA παραμένουν σε στήλη και πιάνουν όλο το πλάτος */ .hero-ctas { flex-direction: column; gap: 10px; } .hero-ctas .btn { width: 100%; } /* Το widget μένει σε δύο στήλες: άφιξη/αναχώρηση, ενήλικες/παιδιά */ .booking-widget { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-radius: var(--r-md); } .booking-widget .bw-people { display: contents; } .booking-widget .bw-field { padding: 12px 34px 12px 14px; min-height: 56px; } .booking-widget .bw-field::after { right: 12px; } .booking-widget .bw-field .label { font-size: 0.58rem; letter-spacing: 0.16em; } .booking-widget .bw-field .value { font-size: 0.94rem; } .booking-widget .bw-cta { grid-column: 1 / -1; width: 100%; padding: 17px; min-height: 54px; } /* Σελίδες: μικρότεροι τίτλοι για τα μεγάλα ελληνικά σύνθετα */ h1 { font-size: clamp(1.95rem, 8.4vw, 2.6rem); } h2 { font-size: clamp(1.65rem, 6.6vw, 2.1rem); } .section-head h2 { font-size: clamp(1.65rem, 6.6vw, 2.1rem); } .lead { font-size: 0.98rem; } /* Κάρτες καταλυμάτων */ .room-card-media { aspect-ratio: 4/3; } .room-card-head { flex-direction: column; align-items: flex-start; gap: 6px; } .room-card-price { text-align: left; } .room-card-cta .btn { width: 100%; } /* Σελίδα καταλύματος */ .room-detail-head { flex-direction: column; align-items: flex-start; gap: var(--s-2); } .room-detail-price-block { text-align: left; } .room-detail-cta-wrap .btn { width: 100%; } .room-detail-map-embed { height: 240px; } /* Ροή κράτησης */ .book-nav { flex-direction: column-reverse; gap: 10px; } .book-nav .btn { width: 100%; } .pay-options-single { max-width: none; } /* Gallery: δύο στήλες, χαμηλότερες σειρές */ .gallery { grid-auto-rows: 130px; gap: 8px; } #footer { padding: var(--s-5) 0 var(--s-3); margin-top: var(--s-5); } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; } } @media (max-width: 380px) { .hero-title { font-size: 1.8rem; } .nav-brand .wm { font-size: 1.05rem; } .booking-widget { grid-template-columns: 1fr; } .booking-widget .bw-cta { grid-column: auto; } } @media (max-width: 540px) { /* Πολλές φωτογραφίες → οι κουκκίδες να μη γεμίζουν όλο το πλάτος */ .carousel-dots { gap: 4px; max-width: 78%; flex-wrap: wrap; justify-content: center; row-gap: 4px; } .carousel-dot { width: 5px; height: 5px; } .carousel-dot.active { width: 14px; } .carousel-counter { font-size: 0.68rem; padding: 5px 10px; } .carousel-nav { width: 40px; height: 40px; } } /* Ο μήνας πριν από τον τρέχοντα είναι εκτός — το κουμπί φαίνεται ανενεργό */ .cal-head button:disabled { opacity: 0.35; cursor: default; } .cal-head button:disabled:hover { border-color: var(--line); color: inherit; } /* Locked UX #7 — το «Κρατήσεις» μένει κουμπί ΚΑΙ όταν είσαι στη σελίδα κράτησης. Χωρίς αυτό, το `.mobile-menu a.active` (0,2,1) νικούσε το `.mobile-menu .book-link` (0,2,0) και το κουμπί γινόταν απλό γαλάζιο κείμενο. */ .mobile-menu a.book-link, .mobile-menu a.book-link.active { background: var(--wave); color: #fff; font-family: var(--font-body); font-style: normal; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; border: 0; border-radius: var(--r-sm); margin-top: var(--s-4); padding: 18px 16px; } .mobile-menu a.book-link:hover, .mobile-menu a.book-link.active:hover { background: var(--sea); color: #fff; } /* ============================================================ MOBILE DRAWER — κεφαλίδα με X, scrim, γλώσσα και επικοινωνία ============================================================ */ .nav-scrim { position: fixed; inset: 0; z-index: 98; background: rgba(4, 31, 48, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; /* Το visibility αλλάζει μετά το fade στο κλείσιμο, ώστε το scrim να μη «ρουφάει» κλικ όσο σβήνει — και ακαριαία στο άνοιγμα. */ transition: opacity 260ms ease, visibility 0s linear 260ms; } .nav-scrim.show { opacity: 1; visibility: visible; transition: opacity 260ms ease, visibility 0s; } .mobile-menu { z-index: 99; padding: 0; display: flex; flex-direction: column; } /* Κεφαλίδα του drawer: λογότυπο αριστερά, X δεξιά */ .mm-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 14px var(--s-4); border-bottom: 1px solid var(--line); flex: none; } .mm-brand { display: flex; flex-direction: column; gap: 2px; line-height: 1; } .mm-brand .wm { font-family: var(--font-display); font-size: 1.14rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sea); } .mm-brand .wm-sub { display: block; font-size: 0.52rem; font-weight: 500; letter-spacing: 0.36em; text-transform: uppercase; color: var(--wave); } .mm-close { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--sea); transition: all var(--transition); } .mm-close:hover, .mm-close:focus-visible { background: var(--wave-tint); border-color: var(--wave); color: var(--wave); outline: none; } .mm-links { display: flex; flex-direction: column; padding: var(--s-2) var(--s-4) 0; } /* Το κουμπί κράτησης έχει το δικό του κενό και πλάτος μέσα στο drawer */ .mobile-menu .book-link { margin: var(--s-4) var(--s-4) 0; } /* Υποσέλιδο: γλώσσα + άμεση επικοινωνία */ .mm-foot { margin-top: auto; padding: var(--s-4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; background: var(--foam); } .mm-foot .lang-toggle { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0; margin: 0 0 4px; align-self: flex-start; overflow: hidden; gap: 0; } .mm-foot .lang-toggle button { padding: 9px 18px; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--mute); background: transparent; border: 0; } .mm-foot .lang-toggle button.on { background: var(--wave); color: #fff; font-weight: 700; } /* Πιο ειδικό από το βασικό `.mobile-menu a` του reference, αλλιώς κληρονομεί padding 12px 16px και στοιχίζεται λάθος σε σχέση με τον διακόπτη γλώσσας. */ .mobile-menu .mm-contact { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; color: var(--sea-soft); padding: 0; border: 0; border-radius: 0; min-height: 34px; } .mobile-menu .mm-contact svg { color: var(--wave); flex: none; } .mobile-menu .mm-contact:hover { color: var(--wave); background: transparent; } /* Ο burger γίνεται X όσο το menu είναι ανοιχτό — αλλά κρύβεται κάτω από το drawer, γι' αυτό το πραγματικό κουμπί κλεισίματος είναι το .mm-close. */ @media (max-width: 420px) { .mobile-menu { width: min(320px, 92vw); } .mm-head, .mm-links, .mm-foot { padding-left: var(--s-3); padding-right: var(--s-3); } .mobile-menu .book-link { margin-left: var(--s-3); margin-right: var(--s-3); } } /* Χωρίς παυλάκια ανάμεσα στα βήματα — μόνο τα νούμερα, με περισσότερο αέρα */ .step-sep { display: none; } .steps { gap: var(--s-3); } /* Το ίδιο διακοσμητικό «μπαλάκι» του reference είχε μείνει και στις κάρτες επιλογής της κράτησης — γίνεται κάθετη γραμμή μάρκας, όπως στα καταλύματα. */ .room-select-body::before { top: var(--s-4); right: auto; left: 0; width: 3px; height: 40px; border-radius: 0; background: var(--wave); } /* ============================================================ ΠΛΗΡΩΜΗ & ΚΟΣΤΟΛΟΓΗΣΗ (βήμα 3) ============================================================ */ .pay-options { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .pay-card { position: relative; display: flex; flex-direction: column; gap: 6px; } .pay-card h4 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; } .pay-card p { margin: 0; font-size: 0.88rem; color: var(--mute); line-height: 1.5; } .pay-card .pay-price { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--wave); letter-spacing: -0.01em; margin: 2px 0 4px; } .pay-card.selected .pay-price { color: var(--sea); } .pay-card .pay-note { margin-top: auto; padding-top: 8px; font-size: 0.8rem; color: var(--mute-soft); font-style: italic; } .pay-badge { position: absolute; top: 14px; right: 14px; background: var(--sea); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 9px; border-radius: var(--r-sm); } /* Ανάλυση κόστους: διαμονή, έκπτωση, κρατικός φόρος, σύνολο */ .cost-table { margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--foam); } .cost-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 13px var(--s-3); font-size: 0.94rem; color: var(--sea-soft); border-bottom: 1px solid var(--line-soft); } .cost-row:last-child { border-bottom: none; } .cost-row small { display: block; font-size: 0.74rem; color: var(--mute-soft); margin-top: 2px; } .cost-row span:last-child { white-space: nowrap; font-weight: 600; color: var(--sea); } .cost-row-discount, .cost-row-discount span:last-child { color: var(--ok-fg); } .cost-row-total { background: var(--wave-tint); font-family: var(--font-display); font-size: 1.05rem; } .cost-row-total span:last-child { font-size: 1.5rem; font-weight: 600; color: var(--wave); } /* Πλαίσιο πολιτικής ακύρωσης */ .policy-box { margin-top: var(--s-3); padding: var(--s-3); border-left: 3px solid var(--wave); background: var(--foam-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .policy-box strong { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sea); margin-bottom: 6px; } .policy-box p { margin: 0; font-size: 0.9rem; color: var(--sea-soft); line-height: 1.6; } /* Σημείωση φόρου κάτω από τις τιμές των καταλυμάτων */ .tax-note { display: block; font-size: 0.72rem; color: var(--mute-soft); font-weight: 400; letter-spacing: 0; text-transform: none; margin-top: 3px; } @media (max-width: 540px) { .pay-options { grid-template-columns: 1fr; } .cost-row { padding: 12px 14px; font-size: 0.9rem; } .cost-row-total span:last-child { font-size: 1.3rem; } }