/* ========================================================================== Home page: transparent header, illustrated location map, language switcher. Kept separate from site.css (the ported design system) so later changes here are easy to distinguish from the approved original stylesheet. ========================================================================== */ /* ————— brand mark ———————————————————————————————————————————————— site.css scales the mark up by 1.12 to hide the bad crop of the old full-lockup logo. The emblem is already square and centred, so it needs no scaling; scaling it now would just clip the swirl. A soft ring replaces the harsh circle edge. */ .brand .mark{ background:#150A2A; box-shadow:0 0 0 1px rgba(232,183,74,.35),0 0 18px rgba(168,85,247,.35); } .brand .mark img{transform:none} .home header.site .brand .mark{ box-shadow:0 0 0 1px rgba(247,242,255,.35),0 0 20px rgba(168,85,247,.5); } /* ————— transparent header over the hero ———————————————————————————— The header sits over the video on the home page and only takes a solid background once the visitor scrolls past the hero, because transparent navigation over ordinary page content is unreadable. site.js adds .scrolled. */ .home header.site{ position:fixed;left:0;right:0;top:0; background:transparent;backdrop-filter:none;border-bottom:1px solid transparent; transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease; } /* A fixed header at top:0 renders underneath the WordPress admin bar for logged-in users. Guests never see this, but editors do, and it looks broken. WordPress puts .admin-bar on ; the bar is 32px, and 46px on small screens where it also stops being fixed. */ .admin-bar.home header.site{top:32px} @media screen and (max-width:782px){ .admin-bar.home header.site{top:46px} } .home header.site .brand .name{color:#F7F2FF} .home header.site .brand .tag{color:var(--gold)} .home header.site nav.main > a, .home header.site nav.main .navgroup > a, .home header.site .nav-right .phone{color:rgba(247,242,255,.9)} .home header.site nav.main > a:hover, .home header.site nav.main .navgroup > a:hover, .home header.site .nav-right .phone:hover{color:var(--gold)} .home header.site .hamburger{border-color:rgba(247,242,255,.4)} .home header.site .hamburger span{background:#F7F2FF} .home header.site.scrolled{ background:rgba(251,248,243,.94);backdrop-filter:blur(14px); border-bottom-color:var(--line-2); } .home header.site.scrolled .brand .name{color:var(--mist)} .home header.site.scrolled .brand .tag{color:var(--magic)} .home header.site.scrolled nav.main > a, .home header.site.scrolled nav.main .navgroup > a, .home header.site.scrolled .nav-right .phone{color:var(--mist-2)} .home header.site.scrolled .hamburger{border-color:var(--line-2)} .home header.site.scrolled .hamburger span{background:var(--mist)} /* ————— full-viewport hero ——————————————————————————————————————— */ .home .hero{ min-height:100svh; /* svh keeps mobile browser chrome from cropping it */ padding:0;display:flex;align-items:center; } .home .hero > .container{width:100%;padding-top:78px;padding-bottom:60px} .home .hero h1{margin-top:0} .home .hero-sil{position:absolute;left:0;right:0;bottom:0;margin:0;z-index:2} .scroll-cue{ position:absolute;left:50%;bottom:26px;transform:translateX(-50%); z-index:3;color:rgba(247,242,255,.75);font-size:.62rem;letter-spacing:.28em; text-transform:uppercase;font-weight:700;text-decoration:none;text-align:center; } .scroll-cue span{display:block;font-size:1.1rem;margin-top:6px;animation:cueBob 2.4s ease-in-out infinite} @keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} @media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none}} /* ————— illustrated location map ———————————————————————————————— A drawn SVG rather than a tile map: geographic tiles look like a road atlas and fight the rest of the site, and they pull from a third-party server. This costs nothing, loads instantly, scales crisply, and looks like us. */ .map-section{padding:84px 0 96px} .storymap{ position:relative;margin-top:38px;border-radius:calc(var(--r) + 6px); overflow:hidden;border:1px solid #D8C7A4; box-shadow:0 22px 60px rgba(59,31,107,.18); background:#F6EFE1; } .storymap svg{display:block;width:100%;height:auto} /* Map typography. Set here rather than as SVG attributes so it inherits the site's self-hosted fonts and stays consistent with the rest of the page. */ .sm-lm-label{font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:.01em} .sm-lm-note{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .sm-c-label{font-family:var(--serif);font-size:21px;font-weight:700} .sm-c-note{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em} .sm-count{font-family:var(--sans);font-size:16px;font-weight:800} .sm-road-label{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.16em} .sm-shield-t{font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:.02em} .sm-shield-u{font-family:var(--sans);font-size:15px;font-weight:800} /* Town names in the letterspaced caps that illustrated maps use for regions. */ .sm-place{font-family:var(--sans);font-weight:700;letter-spacing:.26em} /* Parchment halo behind map labels. The I-4 diagonal crosses the map corner to corner and unavoidably runs under several labels wherever they sit. Rather than keep nudging labels around the road, each one carries a thin stroke in the paper colour drawn behind the glyphs (paint-order puts stroke first), which is the standard cartographic fix and keeps text legible over any line it crosses. Not applied to the pin counts or route shields, which already sit on solid fills. */ .sm-c-label,.sm-c-note,.sm-lm-label,.sm-place,.sm-area,.sm-water{ paint-order:stroke; stroke:#F6EFE1; stroke-width:3.5px; stroke-linejoin:round; } .sm-area{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.22em} .sm-water{font-family:var(--serif);font-size:15px;font-style:italic;font-weight:600} /* Communities are links; give them a clear hover and focus state. * * The hover scale is applied to an INNER group, never to the outer group that * carries the transform="translate(x,y)" positioning it on the map. A CSS * transform replaces that attribute rather than adding to it, so scaling the * outer group teleports the pin to the map origin, which drops the hover, which * snaps it back: the pin jitters and can never be clicked. */ .sm-community{cursor:pointer} .sm-community .sm-inner{ transition:transform .2s ease; transform-origin:0 0; /* the pin is drawn around its own origin */ } .sm-community:hover .sm-inner, .sm-community:focus-visible .sm-inner{transform:scale(1.08)} .sm-community .sm-halo{animation:smPulse 3.4s ease-in-out infinite} .sm-community:hover .sm-c-label, .sm-community:focus-visible .sm-c-label{fill:#7C3AED} .sm-community:focus-visible{outline:none} .sm-community:focus-visible .sm-halo{opacity:.4} @keyframes smPulse{ 0%,100%{opacity:.12;transform:scale(1)} 50%{opacity:.3;transform:scale(1.14)} } .sm-landmark,.sm-places,.sm-charm,.sm-shields{pointer-events:none} @media (prefers-reduced-motion:reduce){ .sm-community .sm-halo{animation:none} } .map-legend{ display:flex;gap:22px;flex-wrap:wrap;justify-content:center; margin-top:18px;font-size:.78rem;color:var(--mist-3) } .map-legend i{ display:inline-block;width:10px;height:10px;border-radius:50%; margin-right:7px;vertical-align:middle } .map-legend .lg-villa i{background:var(--magic)} .map-legend .lg-park i{background:var(--gold)} /* ————— language switcher ———————————————————————————————————————— Text pills rather than flag circles: a flag stands for a country, not a language, and three small round flags are a hard tap target on mobile. */ .lang{display:flex;align-items:center;gap:4px;padding:3px;border-radius:999px; background:rgba(124,58,237,.07);border:1px solid var(--line-2)} .lang button{ appearance:none;border:0;background:none;cursor:pointer; font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.08em; color:var(--mist-2);padding:7px 11px;border-radius:999px;min-height:34px; transition:background .2s,color .2s; } .lang button:hover{color:var(--magic)} .lang button[aria-pressed="true"]{background:var(--magic);color:#fff} .home header.site .lang{background:rgba(255,255,255,.12);border-color:rgba(247,242,255,.28)} .home header.site .lang button{color:rgba(247,242,255,.9)} .home header.site .lang button[aria-pressed="true"]{background:#F7F2FF;color:var(--magic-deep)} .home header.site.scrolled .lang{background:rgba(124,58,237,.07);border-color:var(--line-2)} .home header.site.scrolled .lang button{color:var(--mist-2)} .home header.site.scrolled .lang button[aria-pressed="true"]{background:var(--magic);color:#fff} /* ————— booking card date fields ———————————————————————————————— .bk-dates is introduced by this theme's booking card; site.css predates it and has no rules for it, so without this the date inputs render as unstyled 21px boxes. Matched to the hero search card, with a 44px minimum touch height. */ .bk-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 4px} .bk-dates label{ display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase; color:var(--gold-2);font-weight:700;margin-bottom:6px; } .bk-dates input{ width:100%;min-height:46px;padding:11px 12px; background:var(--night-2);border:1px solid var(--line-2);border-radius:12px; color:var(--mist);font-family:var(--sans);font-size:.9rem;font-weight:600; } .bk-dates input:focus{outline:2px solid var(--magic);outline-offset:1px} /* Safari and iOS shrink date inputs to their content without this. */ .bk-dates input::-webkit-date-and-time-value{text-align:left} /* ————— community list under the map ———————————————————————————— */ .map-areas{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;margin-top:26px; } .map-area{ display:flex;align-items:center;gap:14px;text-decoration:none; padding:14px 18px;border-radius:calc(var(--r)); background:var(--night-2);border:1px solid var(--line-2); min-height:44px;transition:border-color .2s,transform .2s; } .map-area:hover{border-color:var(--magic);transform:translateY(-2px)} .map-area .n{ flex:0 0 auto;width:38px;height:38px;border-radius:50%; background:var(--magic);color:#fff;font-weight:800;font-size:.95rem; display:flex;align-items:center;justify-content:center; } .map-area .t{display:flex;flex-direction:column;line-height:1.25;flex:1} .map-area .t b{color:var(--mist);font-size:.98rem} .map-area .t small{color:var(--mist-3);font-size:.78rem} .map-area .go{color:var(--magic);font-weight:800} /* One switcher visible at a time: the header copy on desktop, the menu copy on phones. See inc/nav.php for why there are two. */ .lang-mobile{display:none} @media (max-width:1100px){ .nav-right .phone{display:none} } @media (max-width:860px){ .nav-right .lang{display:none} .lang-mobile{display:flex;justify-content:center;padding:14px 0 4px} /* Menu links were 33px tall. Touch guidance is 44px minimum, and these are the primary navigation on a phone. */ nav.main > a, nav.main .navgroup > a, nav.main .dropdown a{ min-height:46px;display:flex;align-items:center;padding:11px 14px; } } /* ————— touch targets —————————————————————————————————————————— Measured, not assumed. A scan of the villa page found two real offenders. */ /* The guest +/- controls were 36x36. These sit in the booking flow, which is the worst place on the site to have a control that is easy to miss. */ .stepper button{min-width:46px;min-height:46px} /* Footer links were 33px tall because they are plain inline anchors in list items. On a phone the footer is a real navigation surface. */ footer.site ul li a{ display:inline-flex;align-items:center;min-height:44px; } /* Kept generous for the same reason, though it already passed. */ .soundtip button{min-width:46px;min-height:46px} /* ————— hero on short phones —————————————————————————————————————— At 375x667 the stacked search card pushed the hero to 803px, well past the viewport, so the "one full screen of film" intent broke on the smallest common phone. Tightened type and spacing bring it back inside. */ @media (max-width:700px){ .home .hero > .container{padding-top:64px;padding-bottom:30px} .home .hero h1{font-size:clamp(1.85rem,7.4vw,2.5rem)} .home .hero .sub{font-size:.9rem;margin:12px auto 20px;max-width:34ch} .home .hero .kicker{font-size:.6rem} .home .hero .assure{font-size:.62rem;margin-top:14px} .home .hero .assure .sep{margin:0 6px} .scroll-cue{display:none} /* collides with the search card at this height */ } /* ————— the map on small screens ———————————————————————————————— The SVG scales to about 28% of its viewBox at phone widths, which put every label between 4 and 6px on screen: present, but unreadable. Rather than pretend, the map drops to being an illustration on phones. The secondary layer (town names, water names, route labels, vignettes) is hidden because it is pure clutter at that size, the labels that remain are enlarged enough to actually read, and the tappable list below carries the interaction. */ @media (max-width:860px){ .map-section{padding:56px 0 64px} .sm-places,.sm-water,.sm-charm,.sm-road-label,.sm-c-note{display:none} /* Secondary parks keep their vignette but lose the label: six large labels at this scale overlap into an unreadable pile. */ .sm-secondary .sm-lm-label{display:none} /* Enlarge the pin graphic itself rather than shrinking the count to fit its circle, which would make the number illegible at this scale. */ .sm-pin{transform:scale(2);transform-origin:0 0} .sm-c-label{font-size:46px} .sm-lm-label{font-size:36px} .sm-count{font-size:17px} .sm-area{font-size:26px} .sm-shield-t,.sm-shield-u{font-size:30px} } /* Front-page collection description in the footer. Sits between the link columns and the copyright line. Body size is .82rem, which is footer scale rather than fine print: text shrunk below readability at the bottom of a page is the visual signature of keyword stuffing, and text hidden by size or contrast is a search spam-policy violation. It is meant to be read. */ .f-about{ border-top:1px solid var(--line-2); padding:30px 0 4px;margin-bottom:26px; max-width:96ch; } .f-about h4{margin:0 0 12px} .f-about p{margin:0 0 12px;font-size:.82rem;line-height:1.75;color:var(--mist-3)} .f-about p:last-child{margin-bottom:0} @media(max-width:640px){ .f-about{padding-top:24px;margin-bottom:22px} .f-about p{font-size:.8rem;line-height:1.7} } /* On the narrowest common phones the map scales down enough that the villa pins measured 41px tall, just under the 44px tap guideline. The SVG is a fixed viewBox, so the pin size tracks the viewport: a slightly larger scale below 400px puts them back over the line without changing anything at 390px and up. */ @media(max-width:400px){ .sm-pin{transform:scale(2.25)} } /* And again for the smallest screens still in use (iPhone SE and similar at 320px), where 2.25 still landed at 40px. */ @media(max-width:340px){ .sm-pin{transform:scale(2.55)} }