/* ============================================================ AMMOSPHERE — child overrides on top of fabhotel components. Adds: hero parallax slider, signature list section, refined colour states for the Aegean palette. ============================================================ */ /* ── Background system ────────────────────────────────────────────────── The page bg + nested panel bg are driven by the `--c-cream-bg` and `--c-cream-soft` CSS variables, which are injected dynamically from Site Settings → Appearance via wp_head. All section/page/menu-panel surfaces follow the variable, so any colour change in the admin propagates instantly. The defaults below are only fallbacks if no admin value is set — the cascade pulls the real value from . */ .philosophy, .rooms-grid-wrap, .signatures, .room-strip, .room-body, .room-amenities, .room-gallery, .room-others, .section--cream, .contact-section, .about-section, .gallery-section, .policy-section, .location-section, .menu-panel { background: var(--c-cream-bg); } /* Slightly warmer near-white for nested panels / cards / form panels. */ .signature, .room-card, .room-others__card, .contact-form, .contact-info { background: var(--c-cream-soft); } .philosophy__photo, .philosophy__photo--top, .philosophy__photo--bottom { background: transparent; } /* Newsletter band — colour comes from Site Settings (with fallback). */ .site-footer__newsletter { background: var(--c-newsletter-bg, var(--c-accent-beige)); } /* MHTE line under the footer menu — slightly smaller than the menu items. */ .site-footer__mhte { margin: 14px 0 0; text-align: center; font-family: var(--font-ui); font-size: 0.55rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: inherit; opacity: 0.6; } /* Inner-hero brand mark: tint the SVG to white via mask. URL follows the site's brand-logo (Site Settings → Logos → Hero), falling back to the bundled SVG. Forces white over dark parallax photos. */ .acc-hero::before, .room-single__hero::before { background-image: none !important; background-color: #ffffff !important; -webkit-mask: var(--brand-logo-url, url(/ammosphere-logo.svg)) center / contain no-repeat !important; mask: var(--brand-logo-url, url(/ammosphere-logo.svg)) center / contain no-repeat !important; } /* ── Brand logo via SVG mask. Source URL comes from Site Settings → Logos (logo_hero); falls back to /ammosphere-logo.svg if empty. The element is tinted via background-color (or currentColor). ── */ .brand-logo { display: block; aspect-ratio: 220.26 / 230.62; background-color: currentColor; -webkit-mask: var(--brand-logo-url, url(/ammosphere-logo.svg)) center / contain no-repeat; mask: var(--brand-logo-url, url(/ammosphere-logo.svg)) center / contain no-repeat; } /* The header logo can be tinted independently from Site Settings → Header */ .site-header .brand-logo, .site-header .site-header__brand .brand-logo { background-color: var(--c-header-logo, currentColor); } /* ── Header round buttons (menu / phone / email) ── */ .site-header .btn-circle { background: var(--c-header-btn-bg, rgba(255, 255, 255, 0.92)); color: var(--c-header-btn-text, var(--c-text)); } .site-header .btn-circle:hover { background: var(--c-header-btn-bg, var(--c-cream-bg)); filter: brightness(0.96); } /* ── "See also" on single-villa pages: only 2 cards remain (3 villas minus the current one) — centre the 2 within the 3-col grid. ── */ .room-others__grid:has(> .room-others__card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; } /* ── Drop caps (αρχίγραμμα) — appear in Location / About / Accommodations intro paragraphs. Decoupled from --c-olive so a near-white Primary won't make them invisible. Driven by Site Settings → Ammosphere · Details. */ .loc-body__content p:first-child::first-letter, .acc-intro__body p:first-child::first-letter, .about-body__content p:first-child::first-letter { color: var(--c-dropcap, var(--c-aegean-deep)); } /* ── Body links inside long-form content (policy / about / privacy / etc.) Decoupled from the user-controlled --c-olive so a client setting Primary to a near-white can't make legal links invisible. ── */ .page-legal__content a, .entry-content a { color: var(--c-aegean-deep); border-bottom: 1px solid currentColor; } .page-legal__content a:hover, .entry-content a:hover { color: var(--c-aegean-mid); opacity: 1; } /* ── Contact form — keep the SEND button and the selected subject pill visible regardless of the user's parent palette. Decouples them from the parent's Site Settings → Appearance → "Primary" colour, which a client may set to white by mistake. ── */ .contact-form-block .btn--primary { background: var(--c-aegean-deep); color: #ffffff; border-color: var(--c-aegean-deep); } .contact-form-block .btn--primary:hover { background: var(--c-aegean-mid); border-color: var(--c-aegean-mid); color: #ffffff; opacity: 1; } .subject-pill input:checked + span { background: var(--c-aegean-deep) !important; color: #ffffff !important; } /* ── Amenity icons (single-villa page) + live weather icon (Location) ── Both decoupled from --c-olive (which the client may set to white). ── */ .amenities-grid .fab-icon, .loc-weather__icon { color: var(--c-amenity-icon, var(--c-aegean-deep)); } /* ── Header BOOK pill ── */ .site-header .btn-circle--book { background: var(--c-header-book-bg, var(--c-olive)); color: var(--c-header-book-text, var(--c-cream-bg)); } .site-header .btn-circle--book:hover { background: var(--c-header-book-bg, var(--c-olive-dark)); color: var(--c-header-book-text, var(--c-cream-bg)); filter: brightness(0.92); } /* Menu panel brand wordmark (when off-canvas opens) */ .menu-panel__logo { display: inline-flex; align-items: center; gap: 14px; color: var(--c-aegean-deep); } .brand-logo--menu { width: 56px; } .menu-panel__brand { font-family: var(--font-serif); font-weight: 400; font-size: 28px; letter-spacing: -0.005em; color: var(--c-text); line-height: 1; } .menu-panel__brand em { font-style: italic; color: var(--c-aegean-deep); } /* Footer logo — uses the SVG mask, tinted to match footer text colour, block-level so the parent's margin:0 auto centers it horizontally. */ .site-footer__logo { display: block; width: 80px; margin: 0 auto; color: var(--c-footer-text, var(--c-aegean-deep)); } .brand-logo--footer { width: 100%; } /* ── FOOTER + NEWSLETTER — every colour comes from Site Settings → Ammosphere · Footer & Newsletter — χρώματα. Fallbacks preserve the default look when a field is blank. ── */ .site-footer { background: var(--c-footer-bg, var(--c-cream-bg)); color: var(--c-footer-text, var(--c-text)); border-top: 1px solid var(--color-rule); } .site-footer__newsletter { background: var(--c-newsletter-bg, var(--c-accent-beige)); color: var(--c-newsletter-text, var(--c-text)); } /* Newsletter zone — title, sub, button label all follow the colour. */ .site-footer__newsletter-title, .site-footer__newsletter-sub, .site-footer__newsletter-msg, .site-footer__newsletter [data-newsletter-label] { color: inherit; } /* Footer zone — address, contacts, copyright, credit, socials. */ .site-footer__brand, .site-footer__address, .site-footer__contact, .site-footer__contact a, .site-footer__copy, .site-footer__credit, .site-footer__nav a, .site-footer__socials a { color: inherit; } .site-footer__contact a { border-bottom: 1px solid currentColor; opacity: .9; } .site-footer__rule { border-top: 1px solid var(--color-rule); } /* Newsletter form — match the avli-phos minimal style: no input bg, only a hairline border-bottom that follows the newsletter text colour. */ .site-footer__newsletter-form input, .site-footer__newsletter-form input:focus { background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; color: inherit; padding: 12px 0; opacity: 0.9; } .site-footer__newsletter-form input::placeholder { color: inherit; opacity: 0.55; } .site-footer__newsletter-form input:focus { outline: none; opacity: 1; } .btn--ghost-on-dark { color: inherit; border: 1px solid currentColor; background: transparent; } .btn--ghost-on-dark:hover { background: currentColor; } .btn--ghost-on-dark:hover [data-newsletter-label] { color: var(--c-newsletter-bg, var(--c-cream-bg)); } /* ── HERO PARALLAX SLIDER ── */ .hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; color: var(--c-white); display: grid; place-items: center; background: var(--c-aegean-deep); } .hero__slider { position: absolute; inset: 0; z-index: 0; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms var(--ease-out); overflow: hidden; } .hero__slide.is-active { opacity: 1; } .hero__slide img { width: 100%; height: 110%; object-fit: cover; transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.06); transition: transform 14s linear; will-change: transform; } .hero__slide.is-active img { transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.14); } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 14, 18, 0.45) 0%, rgba(10, 14, 18, 0.18) 35%, rgba(10, 14, 18, 0.55) 100%), radial-gradient(ellipse at 70% 90%, rgba(31, 58, 82, 0.35) 0%, transparent 60%); pointer-events: none; } .hero__lockup { position: absolute; top: clamp(-12px, -0.5vh, 0px); left: 50%; transform: translateX(-50%); text-align: center; z-index: 2; color: var(--c-white); opacity: 0.95; margin: 0; display: block; line-height: 0; } .hero__lockup .brand-logo { width: clamp(200px, 22vw, 320px); margin: 0 auto; color: var(--c-white); } .hero__lockup-name { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: 0.04em; color: var(--c-white); margin: 0; line-height: 1; } .hero__lockup-place { display: block; font-family: var(--font-ui); font-size: 10px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-top: 14px; } .hero__inner { position: relative; z-index: 2; text-align: center; padding: 0 var(--section-x); max-width: 1100px; color: var(--c-white); } .hero__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.5rem, 6vw, 5.25rem); line-height: 1.04; letter-spacing: -0.005em; color: var(--c-white); margin: 0; } .hero__title em { font-style: italic; } .hero__subtitle { margin-top: 24px; font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.25rem); color: rgba(255,255,255,0.85); max-width: 540px; margin-inline: auto; line-height: 1.5; } .hero__cta { margin-top: 38px; display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; background: transparent; border: 1px solid rgba(255,255,255,0.7); color: var(--c-white); transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); } .hero__cta:hover { opacity: 1; background: var(--c-white); color: var(--c-aegean-deep); border-color: var(--c-white); } .hero__cta::after { content: '→'; font-size: 13px; } .hero__nav { position: absolute; bottom: clamp(28px, 5vh, 60px); left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 12px; padding: 12px 0; } .hero__dot { width: 8px; height: 8px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background 300ms var(--ease-out), transform 300ms var(--ease-out); } .hero__dot:hover { background: rgba(255, 255, 255, 0.7); } .hero__dot.is-active { background: var(--c-white); transform: scale(1.25); } .hero__dot::before, .hero__dot::after { content: none; } .hero__scroll { position: absolute; bottom: clamp(20px, 4vh, 40px); left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,0.7); font-family: var(--font-ui); font-size: 9px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; display: none; } @media (max-width: 700px) { .hero__nav { gap: 10px; } .hero__dot { width: 22px; } } /* ── PHILOSOPHY tweaks ── */ .philosophy { background: var(--c-cream-soft); } /* ── ROOMS GRID — 3 villa support ── When a 3rd card is present, lay out the first two side-by-side and the third spans full width on a row of its own. */ .rooms-grid--three .room-card:nth-child(3) { grid-column: 1 / -1; } .rooms-grid--three .room-card:nth-child(3) .room-card__media { aspect-ratio: 16 / 9; } @media (max-width: 800px) { .rooms-grid--three .room-card:nth-child(3) .room-card__media { aspect-ratio: 4 / 3; } } /* ── SIGNATURES SECTION ── */ .signatures { background: var(--c-cream-bg); padding: var(--section-y) 0; } .signatures__inner { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 80px); text-align: center; } .signatures__head { max-width: 720px; margin: 0 auto; } .signatures__eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-olive-light); margin-bottom: 18px; display: block; } .signatures__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.08; color: var(--c-text); letter-spacing: -0.01em; } .signatures__title em { font-style: italic; color: var(--c-olive); } .signatures__body { margin-top: 20px; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--c-text-muted); } .signatures__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); text-align: left; } .signature { padding: 36px 28px; border-right: 1px solid var(--color-rule); } .signature:last-child { border-right: 0; } .signature__num { font-family: var(--font-ui); font-size: 10px; font-weight: 500; letter-spacing: 0.32em; color: var(--c-olive-light); margin-bottom: 18px; } .signature__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; color: var(--c-text); margin-bottom: 12px; } .signature__title em { font-style: italic; color: var(--c-olive); } .signature__body { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--c-text-muted); } @media (max-width: 1000px) { .signatures__grid { grid-template-columns: repeat(2, 1fr); } .signature:nth-child(2n) { border-right: 0; } .signature:nth-child(-n+2) { border-bottom: 1px solid var(--color-rule); } } @media (max-width: 600px) { .signatures__grid { grid-template-columns: 1fr; } .signature { border-right: 0; } .signature:not(:last-child) { border-bottom: 1px solid var(--color-rule); } }