/* ===========================================================
Argilea Villa — Kefalonia
Design system extracted from Illustrator templates
Fonts: Jost (UI) + Marcellus (display)
Fonts are loaded via in each page (parallel, non-blocking)
instead of @import here, which previously chained behind this stylesheet.
=========================================================== */
:root{
--clay:#a8967e; /* primary accent */
--clay-dark:#8a7860;
--sand:#d4c8b3; /* light sand band */
--ink:#1f1f1f; /* near-black text */
--brown:#312419; /* deep brown */
--paper:#fbfaf8; /* off-white bg */
--paper-2:#f8f6f1; /* warm off-white */
--grey:#606060;
--line:rgba(168,150,126,.4);
--serif:'Marcellus',Georgia,serif;
--sans:'Jost',-apple-system,Segoe UI,sans-serif;
--maxw:1280px;
--gutter:clamp(20px,5vw,80px);
--nav-h:84px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:var(--nav-h)}
body{
font-family:var(--sans);
color:var(--ink);
background:var(--paper);
line-height:1.75;
font-weight:300;
font-size:16px;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
padding-top:var(--nav-h);
font-variant-numeric:lining-nums;
}
.cal-grid,.vo-specs,.spec b,.spec small,.avail-field,.score{font-variant-numeric:lining-nums tabular-nums}
body.has-hero{padding-top:0}
/* reserve scrollbar space always, so locking scroll doesn't shift the fixed nav */
html{scrollbar-gutter:stable}
/* lock background scroll while the menu drawer is open */
html.menu-open,html.menu-open body{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.18;color:var(--ink)}
.serif{font-family:var(--serif)}
.section-title{
font-size:clamp(1.9rem,3.5vw,3rem);
color:var(--clay);
letter-spacing:.01em;
margin-bottom:1.4rem;
}
.eyebrow{
font-family:var(--sans);
text-transform:uppercase;
letter-spacing:.32em;
font-size:.72rem;
font-weight:500;
color:var(--clay);
margin-bottom:1rem;
display:block;
}
p{margin-bottom:1.1rem;color:#3a352e}
p:last-child{margin-bottom:0}
/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section{position:relative}
.pad{padding-block:clamp(34px,4.2vw,62px)}
.pad-sm{padding-block:clamp(26px,3vw,44px)}
.bg-paper2{background:var(--paper-2)}
.bg-sand{background:var(--sand)}
.center{text-align:center}
/* ---------- buttons ---------- */
.btn{
display:inline-block;
font-family:var(--sans);
font-size:.82rem;
letter-spacing:.18em;
text-transform:uppercase;
padding:1rem 2.4rem;
border:1.5px solid var(--clay);
background:transparent;
color:var(--clay);
cursor:pointer;
transition:.35s ease;
}
.btn:hover{background:var(--clay);color:#fff}
.btn-fill{background:var(--clay);color:#fff}
.btn-fill:hover{background:var(--clay-dark);border-color:var(--clay-dark)}
/* Book Now — uses the supplied CTA.svg decorative frame */
.cta{
display:inline-flex;align-items:center;justify-content:center;
background:url('../cta.svg') center/100% 100% no-repeat;
width:172px;height:60px;padding:0 20px 0 46px;
font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight: bold;
color:var(--clay-dark);transition:opacity .3s ease,transform .3s ease;
}
.cta:hover{opacity:.7;transform:translateY(-1px)}
/* ===========================================================
NAV
=========================================================== */
.nav{
position:fixed;top:0;left:0;width:100%;z-index:100;
height:var(--nav-h);
display:flex;align-items:center;
background:var(--paper);
border-bottom:1px solid rgba(168,150,126,.28);
transition:background .45s ease,border-color .45s ease;
}
/* Home: transparent over the hero, solid once scrolled */
body.has-hero .nav:not(.solid){background:transparent;border-bottom-color:transparent}
body.has-hero .nav:not(.solid) .menu-toggle{color:#fff}
/* While the menu drawer is open, the bar blends into the beige overlay (white logo + toggle) */
html.menu-open .nav{background:transparent!important;border-bottom-color:transparent!important}
html.menu-open .nav .logo-solid{display:none!important}
html.menu-open .nav .logo-white{display:block!important}
html.menu-open .nav .brand-emblem{display:none!important}
html.menu-open .nav .brand-emblem-w{display:block!important}
html.menu-open .nav .menu-toggle{color:#fff!important}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:auto;display:block}
.brand-emblem,.brand-emblem-w{height:42px}
.brand-word{height:32px} /* refined, restrained — luxury */
.brand .logo-white{display:none}
.brand .brand-emblem-w{display:none} /* white crest, shown only while the menu is open */
/* Home over hero: show white-lettered logo while bar is transparent */
body.has-hero .nav:not(.solid) .logo-solid{display:none}
body.has-hero .nav:not(.solid) .logo-white{display:block}
.nav-right{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
/* Menu toggle (word + animated lines) */
.menu-toggle{display:inline-flex;align-items:center;gap:.6rem;background:none;border:0;cursor:pointer;padding:.4rem 0;color:var(--ink)}
.menu-toggle .menu-label{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.menu-toggle .menu-icon{position:relative;width:28px;height:14px;display:inline-block;flex-shrink:0}
.menu-toggle .menu-icon span{position:absolute;left:0;width:28px;height:2px;background:currentColor;transition:transform .35s ease,top .35s ease,bottom .35s ease;border-radius:2px}
.menu-toggle .menu-icon span:nth-child(1){top:0}
.menu-toggle .menu-icon span:nth-child(2){bottom:0}
.menu-toggle.active .menu-icon span:nth-child(1){top:6px;transform:rotate(45deg)}
.menu-toggle.active .menu-icon span:nth-child(2){bottom:6px;transform:rotate(-45deg)}
/* Full-screen drawer overlay */
.nav-overlay{
position:fixed;inset:0;z-index:90;background:var(--clay);
display:flex;align-items:center;justify-content:center;
opacity:0;visibility:hidden;transform:translateY(-12px);
transition:opacity .45s ease,transform .45s ease,visibility .45s;
padding:calc(var(--nav-h) + 2rem) var(--gutter) clamp(28px,5vh,56px);
overflow-y:auto;
}
.nav-overlay.open{opacity:1;visibility:visible;transform:none}
.menu-close{display:none}
.overlay-inner{display:grid;grid-template-columns:auto 1fr;gap:clamp(2.5rem,9vw,8rem);
width:100%;max-width:880px;margin:auto;align-items:center}
/* left column: Book Now + address + socials */
.overlay-left{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem}
.overlay-left .cta{filter:brightness(0) invert(1)}
.overlay-contact{display:flex;flex-direction:column;gap:.55rem;font-size:.92rem;letter-spacing:.02em;color:rgba(255,255,255,.9)}
.overlay-contact a{color:rgba(255,255,255,.9)}
.overlay-contact a:hover{color:#fff}
.ov-socials{display:flex;gap:1rem;margin-top:.2rem}
.ov-socials a{color:#fff}
.ov-socials svg{width:24px;height:24px;fill:#fff;opacity:.9;transition:opacity .25s}
.ov-socials a:hover svg{opacity:1}
/* right column: links, left-aligned */
.overlay-links{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(.4rem,1.6vh,1.1rem);text-align:right}
.overlay-links a{
font-family:var(--serif);color:#fff;font-size:clamp(1.7rem,4.4vw,3rem);font-weight:500;line-height:1.12;
opacity:.92;transition:opacity .3s,padding-right .3s;
}
.overlay-links a:hover{opacity:1;padding-right:.4rem}
.overlay-links a.active{opacity:1;color:#f3ece1}
/* WordPress menu compatibility: items come wrapped in