/*
Theme Name: Nooré (Swissresort Child)
Theme URI: https://noorestayphuket.com
Description: Nooré Phuket. Swissresort child theme carrying the v3 skin — v1's approved structure in v2's rounded surface treatment.
Author: Jittika S.
Template: swissresort
Version: 1.9.18
Text Domain: swissresort-child
*/
/* ==========================================================================
Nooré v3 skin
--------------------------------------------------------------------------
The client approved v1 (Swissresort home-7) for STRUCTURE and v2 for TONE
("มนๆ น่ารัก" — soft, rounded). Both prototypes share an identical palette,
so this file changes surface treatment only: radius, shadow, hairlines.
Colours and fonts are NOT set here — they come from the Customizer
(Theme Color / Typography). Duplicating them in CSS would create two
sources of truth and break the client's ability to tweak.
Parent context worth knowing:
- template.css already uses 16px as its house radius (25 rules), so the
move to v2's 18px is a nudge, not a rebuild.
- The parent has NO card shadows — only UI chrome (dropdowns, sticky
header). v2's soft card shadow is therefore a genuine addition.
- The parent DOES use custom properties, heavily: inc/custom-styles.php
prints a :root block from the Customizer values
(--swissresort-theme-color and friends, 384 uses of that one alone).
Reference those vars rather than hardcoding hex, so the client's
Customizer edits keep flowing through.
- The parent's default heading font is Cormorant Garamond — which is
exactly what v1 used, confirming v1 was the theme at its defaults.
- These overrides win on source order, not !important.
See functions.php priority 200.
Cache note: functions.php versions this file by filemtime(), so edits bust
the browser and LiteSpeed cache automatically. Don't revert that to the
theme header version.
========================================================================== */
/* Page ground.
The pages sat on pure white, which fought the warm timber-and-plaster
photography. Sand is the brandbook's neutral. Measured first: on these pages
ONLY paints a background - no section or container paints white over
it - so one rule is enough and nothing needs !important.
Deliberately NOT the brandbook's #FFF2EB "Cream": that value is already doing
a job as the interactive fill (calendar hover, in-range nights, arrow hover).
Using it as the page ground would make those states invisible. #F8F5F0 keeps
them legible and reads sandier. White stays for things that must lift off the
page: room cards, the date panel, the menu drawer. */
body {
background-color: #F8F5F0;
}
:root {
--noore-r: 18px; /* v2 --r */
--noore-r-sm: 10px; /* nested elements inside a card */
--noore-shadow: 0 14px 40px rgba(30, 30, 30, .10); /* v2 --shadow */
--noore-line: rgba(30, 30, 30, .10); /* v2 --line */
/* The site's long-arrow control, lifted verbatim from .read-icon on the
journal cards. Held as a mask so any element can wear it in its own
colour via background-color: currentColor. */
--noore-arrow-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='30' viewBox='0 0 50 30' fill='none'%3E%3Cpath d='M35.8 28.5539C43.3451 28.5539 49.4616 22.4374 49.4616 14.8923C49.4616 7.34726 43.3451 1.23078 35.8 1.23078C28.255 1.23078 22.1385 7.34726 22.1385 14.8923C22.1385 22.4374 28.255 28.5539 35.8 28.5539Z' stroke='%23000'/%3E%3Cpath d='M33.4808 10.6654L32.9985 11.2646L37.2931 14.7239H0.341553V15.4931H37.28L33.0008 18.8877L33.4785 19.49L39 15.1108L33.4808 10.6654Z' fill='%23000'/%3E%3C/svg%3E");
}
/* Palette comes from the Customizer via inc/custom-styles.php. Do not restate
hex values here — the client can edit those, and a second copy would drift.
Available: --swissresort-theme-color (#B46841), --swissresort-second-color
(#DDA380), --swissresort-text-color, --swissresort-heading-color,
--swissresort-theme-hover-color (#84411E), plus the two font vars. */
/* --------------------------------------------------------------------------
1. Room / tour cards
The demo's home-7 uses the tour-grid family. Covering the variants means
the skin survives if a different grid is swapped in during layout work.
-------------------------------------------------------------------------- */
.tour-item-style,
.tour-grid-v4,
.tour-grid-v5,
.tour-grid-v6,
.tour-grid-v7,
.tour-grid-v8,
.tour-grid-v9 {
border-radius: var(--noore-r);
box-shadow: var(--noore-shadow);
overflow: hidden;
background: #fff;
}
.tour-grid-v4 .item-image,
.tour-item-style .item-image,
.tour-item-style .tour-image {
border-radius: var(--noore-r);
overflow: hidden;
}
/* Image sits flush inside an already-rounded card — don't double-round. */
.tour-grid-v5 .item-image,
.tour-grid-v6 .item-image,
.tour-grid-v7 .item-image {
border-radius: 0;
}
/* --------------------------------------------------------------------------
2. Blog cards — "Offers & News" on home-7
-------------------------------------------------------------------------- */
.post-layout .top-image,
.related-posts .top-image {
border-radius: var(--noore-r);
overflow: hidden;
}
.layout-posts-list .post {
border-radius: var(--noore-r);
box-shadow: var(--noore-shadow);
background: #fff;
overflow: hidden;
}
/* --------------------------------------------------------------------------
3. Gallery
The old 4-column mosaic that lived here was replaced by the horizontal
scroller further down this file. Its rules were actively fighting the new
layout - .elementor-widget-image-gallery .gallery-item carried
width:100% and height:100%, which pinned every tile to one width and made
the staggered heights resolve backwards.
-------------------------------------------------------------------------- */
.view-more-gallery {
border-radius: 999px;
}
/* --------------------------------------------------------------------------
4. Facility / feature panels and banners
-------------------------------------------------------------------------- */
.item-features-inner.style2,
.banners-item.style3,
.banners-item.style5,
.testimonials-item2,
.widget-team .team-image {
border-radius: var(--noore-r);
}
.banners-item.style5 .inner {
border-radius: var(--noore-r-sm);
}
.singles_item .icon {
border-radius: var(--noore-r-sm);
}
/* --------------------------------------------------------------------------
5. Hairlines
v2 softens every divider to a 10% ink line rather than the parent's greys.
-------------------------------------------------------------------------- */
.tour-item-style,
.item-features-inner.style2,
.testimonials-item2 {
border-color: var(--noore-line);
}
/* --------------------------------------------------------------------------
6. Actions stay pills
v1 and v2 both use 999px for CTAs. The client called out v1's CTA
specifically, so this must not soften into the surrounding surfaces.
-------------------------------------------------------------------------- */
.btn,
.btn-readmore,
.elementor-button {
border-radius: 999px;
}
/* --------------------------------------------------------------------------
7. Glassmorphic booking bar
The BA Book Everything search form sits over the hero image, so it can be
frosted glass rather than a solid slab. Scoped to .babe-search-form so it
never touches the search widget on inner pages with solid backgrounds.
Structure (verified against the live markup, not guessed):
form.babe-search-form > .input-group > .search-date / .input_select_wrapper
.input_select_title — the "CHECK IN" micro-label
.input_select_input_value — the "Add date" value
button.btn-search — the GO control
NOTE: the container carries an Elementor gradient background
(data-settings background_background:gradient). Elementor's per-page CSS
loads after this file, so that gradient must be cleared in the widget panel
— Style > Background > Normal > None — or none of this is visible.
-------------------------------------------------------------------------- */
body #search_form.babe-search-form.babe-search-form.babe-search-form {
background-color: rgba(255, 255, 255, .14) !important;
background-image: none !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .18) !important;
border-radius: 999px !important;
box-shadow: 0 8px 32px rgba(30, 30, 30, .18);
padding: 6px 6px 6px 4px !important;
/* NO overflow:hidden here. It kept the glass pill's corners clean, but the
GUESTS picker and the date panels are position:absolute children of this
form — clipping the form made the guests dropdown impossible to open,
which reads as "the guests field will not accept input". Every child is
transparent, so the rounded corners survive without it. */
}
/* No backdrop-filter (older Firefox): fall back to a heavier tint so the
text keeps its contrast instead of sitting on near-transparent white. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.babe-search-form {
background: rgba(30, 30, 30, .55);
}
}
.babe-search-form .input-group {
align-items: center;
gap: 0;
}
.babe-search-form .search-date,
.babe-search-form .input_select_wrapper {
position: relative;
padding: 10px clamp(14px, 1.6vw, 26px);
background: transparent;
border: 0;
}
/* Value — "Add date" */
.babe-search-form .input_select_input,
.babe-search-form .input_select_input_value,
.babe-search-form input[type="text"].booking_date {
font-size: 14px;
font-weight: 400;
color: #fff;
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
}
.babe-search-form input::placeholder {
color: rgba(255, 255, 255, .75);
}
/* Guests value picks up the sand accent, as in the reference */
.babe-search-form .input_select_title_value {
color: var(--swissresort-second-color, #DDA380);
font-size: 14px;
}
/* GO button — GEOMETRY ONLY.
Colour AND typography are deliberately absent so the Elementor panel keeps
control (Style > Button). Important subtlety: dropping !important is not
enough to hand control back — this selector is (1,3,1) and Elementor's is
(0,4,0), so it wins on specificity regardless. The declarations have to be
removed entirely.
Only the circle survives: 56x56 with a 50% radius and zero padding, because
Elementor's padding controls would otherwise stretch it into a pill. */
body #search_form .btn-search.btn-search.btn-search,
body #search_form button[name="submit"] {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
padding: 0 !important;
border-radius: 50% !important;
border: 0;
}
.babe-search-form .btn-search:hover,
.babe-search-form button[name="submit"]:hover {
transform: scale(1.04);
}
.babe-search-form .btn-search:focus-visible,
.babe-search-form button[name="submit"]:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* Booking bar field labels.
The plugin renders NO label: .input_select_title belongs to the hidden
time-picker (its parent .input_select_field is display:none), so the rule
that used to style it was dead. Generate the label instead.
CSS content is decorative to assistive tech — the accessible name comes
from aria-label set in functions.php. Both are needed. */
/* Vertical alignment across the three fields.
The dates render their value in an (fixed 26px line-height); Guests
renders a that inherits a different one. Two stacks of unequal height
means centring them puts labels and values on different baselines.
Fix: give every label and every value the SAME fixed metrics, so all three
stacks are identical by construction rather than by coincidence. */
body #search_form .search_date_wrapper_date_from::before,
body #search_form .search_date_wrapper_date_to::before,
body #search_form .search_guests_field::before {
height: 13px;
line-height: 13px;
margin-bottom: 5px;
}
body #search_form .search-date input.search_date,
body #search_form .search_guests_title_value,
body #search_form .search_guests_field .add_ids_title {
height: 20px;
line-height: 20px;
display: block;
text-align: center;
}
/* Guests holds inline nodes; make its box behave like the date inputs. */
body #search_form .search_guests_field .add_ids_title {
width: 100%;
}
body #search_form .search_guests_title_value {
display: inline-block;
vertical-align: top;
}
/* Field proportions.
The theme sets `#search_form .input-group > div { padding-right:1.875rem;
margin-right:1.875rem }` — 30px on the RIGHT only. Measured computed padding
was `0px 30px 0px 0px`, which shoves every value left inside its own box and
is why the centring looked wrong even with text-align:center.
Sizing: a date is ~10 characters ("28/08/2026"), guests is 1-2 ("0",
"2 adults"), so equal thirds made the guests box read empty. Dates take the
slack; guests is capped. */
body #search_form .input-group > div.search-date,
body #search_form .input-group > div.search_guests_field {
padding: 0 12px !important;
margin-right: 0 !important;
}
body #search_form .input-group > div.search-date {
flex: 1 1 150px;
}
body #search_form .input-group > div.search_guests_field {
flex: 0 1 116px;
}
/* The input must fill the field so (a) its centred text actually centres and
(b) tapping anywhere in the 48px box opens the picker — measured: a click on
the label strip was hitting the wrapper, not the input. */
/* Final 4px: the date value is an (block box) while Guests' is an
inline-block sitting on a text baseline. Making BOTH wrappers a 20px flex
box that centres its child removes the baseline from the equation. */
body #search_form .search-date .add_ids_title,
body #search_form .search_guests_field .add_ids_title {
display: flex !important;
align-items: center;
justify-content: center;
height: 20px;
line-height: 1;
padding: 0 !important;
margin: 0 !important;
}
body #search_form .search-date .add_ids_title,
body #search_form .search-date input.search_date {
display: block;
width: 100% !important;
text-align: center !important;
}
/* Both fields must use the SAME layout mode — and it has to be FLEX.
Measured across two attempts:
dates=block, guests=flex -> values at 17 vs 23 (6px out)
both=block -> values at 34 vs 54 (20px out; the guests
value escapes below its own 20px wrapper)
both=flex -> both centre their stack identically
Guests has extra nested markup that block layout does not contain, so flex
with justify-content:center is what makes the two stacks agree. */
body #search_form .input-group > div.search-date,
body #search_form .input-group > div.search_guests_field {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-height: 48px;
padding: 0 12px !important;
margin-right: 0 !important;
}
body #search_form .search_date_wrapper_date_from::before,
body #search_form .search_date_wrapper_date_to::before,
body #search_form .search_guests_field::before {
display: block;
font-size: 11px; /* 9.5px @ 60% was unreadable over a photo */
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255, 255, 255, .75);
margin-bottom: 4px;
text-align: center;
line-height: 1;
pointer-events: none;
}
body #search_form .search_date_wrapper_date_from::before { content: "Check in"; }
body #search_form .search_date_wrapper_date_to::before { content: "Check out"; }
body #search_form .search_guests_field::before { content: "Guests"; }
/* The plugin prints "Guests :" inline; ::before now supplies that label, so the
plugin's own label has to go.
BUT IT MUST NOT BE display:none. This element carries the click handler that
OPENS THE GUESTS PANEL — the handler is bound to .search_guests_title, not to
the field. Hiding it gave it a 0×0 box, so there was nothing to click and the
guests field could never be opened at all. That is what "the guests field
will not accept input" actually was.
So: keep it in the layout and stretch it over the WHOLE field, with its text
hidden. The label still comes from ::before, and now anywhere in the field is
a valid click target instead of one small word. */
body #search_form .search_guests_title.field-title {
position: absolute;
inset: 0;
display: block;
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
color: transparent;
cursor: pointer;
z-index: 3;
}
/* Hover + active field — COLOUR ONLY.
An earlier version lifted the field background, which painted a second
frosted panel inside the glass bar. The bar is already glass; a nested
surface reads as a bug. Only the value changes colour.
Keyboard users still get a visible focus ring, but it is bound to
:focus-visible on the input itself, so a mouse click does not draw it. */
body #search_form .input-group > div:hover [type="text"],
body #search_form .input-group > div:hover .search_guests_title_value,
body #search_form .input-group > div:focus-within [type="text"],
body #search_form .input-group > div:focus-within .search_guests_title_value {
color: var(--swissresort-second-color, #DDA380) !important;
}
body #search_form .input-group > div [type="text"]:focus-visible {
outline: 1px solid var(--swissresort-second-color, #DDA380);
outline-offset: 4px;
border-radius: 4px;
}
/* Label stays quiet in both states — only the value takes the accent. */
body #search_form .input-group > div:hover::before,
body #search_form .input-group > div:focus-within::before {
color: rgba(255, 255, 255, .75);
}
/* Touch targets: phone link and the off-canvas CLOSE control */
body .elementor-element-a9d9aea a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.vertical-menu-container-wrapper .close-menu,
.vertical-menu-container-wrapper [class*="close"] a,
.vertical-menu-container-wrapper a[class*="close"] {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Date + guest values: match the BOOK YOUR STAY button (measured 15px/500)
and centre them in their own field box.
The theme sets `#search_form .input-group > div [type="text"]` with
font-size:0.9375rem !important, so this needs equal specificity plus
!important — and the child loads after template.css, so it wins the tie. */
body #search_form .input-group > div [type="text"],
body #search_form input.booking_date,
body #search_form .input_select_input,
body #search_form .input_select_input_value {
font-size: 15px !important;
font-weight: 500;
text-align: center !important;
width: 100% !important;
}
body #search_form .input-group > div.search-date,
body #search_form .input-group > div.search_guests_field,
body #search_form .input-group > div.search-date .add_ids_title,
body #search_form .input-group > div.search_guests_field .add_ids_title {
text-align: center;
justify-content: center;
}
body #search_form .input_select_title_value {
font-size: 15px;
font-weight: 500;
}
/* Dropdown panels are NOT glass — they need to be readable */
.babe-search-form .input_select_list {
background: #fff;
border-radius: 16px;
border: 1px solid var(--noore-line);
box-shadow: var(--noore-shadow);
color: var(--swissresort-text-color, #1E1E1E);
overflow: hidden;
}
@media (max-width: 991px) {
.babe-search-form {
border-radius: 24px;
padding: 10px;
}
.babe-search-form .search-date,
.babe-search-form .input_select_wrapper {
padding: 10px 16px;
}
.babe-search-form .btn-search,
.babe-search-form button[name="submit"] {
width: 100%;
height: 52px;
min-width: 0;
border-radius: 999px;
}
}
/* --------------------------------------------------------------------------
8. Hero carousel — scrim and arrows
The header (white wordmark, glass booking bar) sits over the hero carousel.
Bright frames — pool, white render walls — leave it unreadable.
A top-weighted gradient does the work rather than a flat dim: the header
band gets enough darkness to hold white text, while the lower two-thirds of
the photograph stays close to full brightness. A uniform overlay would make
the renders look muddy for no legibility gain.
Requires the CSS class `noore-hero-carousel` on the Elementor widget, or
matches the hero by its element ID, so room and gallery carousels are
untouched.
-------------------------------------------------------------------------- */
.elementor-element-effb8e1,
.noore-hero-carousel {
position: relative;
}
.elementor-element-effb8e1::after,
.noore-hero-carousel::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none; /* arrows and dots stay clickable */
background: linear-gradient(
to bottom,
rgba(30, 30, 30, .58) 0%,
rgba(30, 30, 30, .34) 18%,
rgba(30, 30, 30, .10) 42%,
rgba(30, 30, 30, .04) 70%,
rgba(30, 30, 30, .22) 100%
);
}
/* A touch of overall depth so bright frames don't blow out the wordmark.
Keep this subtle — the renders are the product. */
.elementor-element-effb8e1 .swiper-slide img,
.noore-hero-carousel .swiper-slide img {
filter: brightness(.92) saturate(1.02);
}
/* Arrows — glass, matching the booking bar. The theme ships these as ~130px
solid terracotta discs, which read as a button you must press rather than a
quiet navigation affordance. */
.elementor-element-effb8e1 .elementor-swiper-button,
.noore-hero-carousel .elementor-swiper-button {
/* Quiet ink glass. Structure from v1's .arrow, but tinted with the brand
darks (#1E1E1E base, #2A2A2A on hover) instead of a colour pop, so the
control shimmers against the photograph rather than announcing itself.
The hairline is what reads as "glass"; the fill stays low-contrast. */
z-index: 3;
width: 66px;
height: 66px;
display: grid;
place-items: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(30, 30, 30, .38);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
color: rgba(255, 255, 255, .92);
font-size: 22px;
top: 50%;
transform: translateY(-50%);
transition: background .25s ease, border-color .25s ease;
}
.elementor-element-effb8e1 .elementor-swiper-button:hover,
.noore-hero-carousel .elementor-swiper-button:hover {
/* Re-declare the centring transform. The base sets translateY(-50%); any
hover rule that touches `transform` (an earlier version of this file set
scale here) REPLACES it, and the arrow drops by half its height. Pinning
it makes that failure impossible. */
transform: translateY(-50%) !important;
background: rgba(42, 42, 42, .66);
border-color: rgba(255, 255, 255, .22);
color: #fff;
}
.elementor-element-effb8e1 .elementor-swiper-button:focus-visible,
.noore-hero-carousel .elementor-swiper-button:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* Edge offsets: v1's clamp, so they tuck in on narrow viewports */
.elementor-element-effb8e1 .elementor-swiper-button-prev,
.noore-hero-carousel .elementor-swiper-button-prev { left: clamp(12px, 2.5vw, 44px); }
.elementor-element-effb8e1 .elementor-swiper-button-next,
.noore-hero-carousel .elementor-swiper-button-next { right: clamp(12px, 2.5vw, 44px); }
/* Pagination dots — v1's treatment: the active dot is a sand PILL 26px wide,
inactive are 8px circles at 45% white. The width change is what makes the
position legible at a glance without adding a counter. */
.elementor-element-effb8e1 .swiper-pagination-bullet,
.noore-hero-carousel .swiper-pagination-bullet {
z-index: 3;
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, .45);
opacity: 1;
transition: width .3s ease, background .3s ease;
}
.elementor-element-effb8e1 .swiper-pagination-bullet-active,
.noore-hero-carousel .swiper-pagination-bullet-active {
width: 26px;
background: var(--swissresort-second-color, #DDA380);
}
@media (max-width: 991px) {
.elementor-element-effb8e1::after,
.noore-hero-carousel::after {
background: linear-gradient(
to bottom,
rgba(30, 30, 30, .62) 0%,
rgba(30, 30, 30, .40) 30%,
rgba(30, 30, 30, .12) 60%,
rgba(30, 30, 30, .26) 100%
);
}
}
@media (max-width: 767px) {
.elementor-element-effb8e1 .elementor-swiper-button,
.noore-hero-carousel .elementor-swiper-button {
width: 48px;
height: 48px;
font-size: 18px;
transform: translateY(-50%);
}
.elementor-element-effb8e1 .elementor-swiper-button-prev,
.noore-hero-carousel .elementor-swiper-button-prev { left: 12px; }
.elementor-element-effb8e1 .elementor-swiper-button-next,
.noore-hero-carousel .elementor-swiper-button-next { right: 12px; }
}
/* --------------------------------------------------------------------------
9. Swissresort's dark green -> Nooré ink
The parent hardcodes #122223 (a dark teal-green) in 22 rules across
template.css. It is NOT wired to the Customizer, so setting Theme Colors
never touches it — that is why the green survived the brand pass.
Overridden here to #1E1E1E, the brandbook ink already used for Text and
Heading colours. Only user-facing surfaces are listed; the 404 page, the
my-account screens and CMB admin forms are left alone deliberately.
The Elementor hero container carries its own #122223 from post-28.css at
specificity (0,3,0); the ID selector below beats it without !important.
-------------------------------------------------------------------------- */
.header-mobile,
.megamenu .dropdown-menu,
.tour-grid-v5,
.tour-grid-v6,
.tours-vetical,
.setting-account .user-account,
.cal-cell .cal-cell-date {
background-color: #1E1E1E;
}
/* .over-dark is the off-canvas BACKDROP, not a surface — it is position:fixed
across the whole viewport at z-index 6. It was in the list above, which made
it fully opaque ink, so opening the menu blacked out the entire page and the
470px panel read as a full-screen takeover.
A scrim should dim what is behind it, not replace it. */
.over-dark {
background-color: rgba(30, 30, 30, .55) !important;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.tour-item-style .direction:hover,
.image-carousel-theme .swiper .elementor-swiper-button:hover {
background: #1E1E1E;
}
.tour-grid-v6 .tour-content {
background: linear-gradient(180deg, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, .85) 100%);
}
.widget-discover .slick-list:before {
background: linear-gradient(180deg, #1E1E1E 0%, rgba(30, 30, 30, 0) 100%);
}
.widget-discover .slick-list:after {
background: linear-gradient(0deg, #1E1E1E 0%, rgba(30, 30, 30, 0) 100%);
}
/* Date range picker.
The booking plugin ships Dan Grossman's daterangepicker. Restyled to v1's
.datepick spec — 6px radius, deep soft shadow, display-face month labels,
struck-through disabled days, cream range fill, terracotta selection.
Note: the widget runs in auto-apply mode, so .drp-buttons is hidden; the
button rules below only take effect if auto-apply is turned off in
BA Book Everything's search-form settings. */
.daterangepicker {
border: 0;
border-radius: 16px;
box-shadow: 0 26px 60px rgba(30, 30, 30, .18);
padding: 24px 26px 18px;
font-family: var(--swissresort-main-font, inherit);
}
.daterangepicker:before,
.daterangepicker:after { display: none; }
/* Clear the booking bar.
daterangepicker positions itself with an inline `top` calculated from the
input, which left the panel overlapping the bar by 10px. The margin is
skipped on .drop-up, where the panel opens ABOVE the field and the same
margin would shove it back into the bar. */
.daterangepicker:not(.drop-up) {
margin-top: 30px;
}
.daterangepicker .drp-calendar { width: 300px; max-width: 300px; padding: 0; }
/* Do NOT use table-layout:fixed here.
Fixed layout takes its column widths from the FIRST row, and that row is
`prev | month (colspan 5) | next` — three cells. The browser then builds a
3-column grid and the 7 weekday columns collapse into each other.
Auto layout plus an explicit, equal size on every 7-column cell gives a
correct grid and square cells for the circles. */
.daterangepicker .calendar-table table {
table-layout: auto;
width: auto;
border-collapse: separate;
border-spacing: 0;
}
.daterangepicker .drp-calendar.left { padding-right: 17px; }
.daterangepicker .drp-calendar.right { padding-left: 17px; }
/* Calendar header row — month label and both arrows on one baseline.
These are table cells, so vertical-align (not flex) is what aligns them.
The month previously carried padding-bottom:14px, which pushed it off the
arrows' centre line. Arrows are square so their hover circle is concentric. */
.daterangepicker thead tr:first-child th {
vertical-align: middle;
height: 40px;
padding: 0 !important; /* padding here inflated the arrow cells to 40x59 */
}
/* The gap that padding used to provide now sits on the weekday row, so the
header row's height is driven by the 40px arrows and they stay square. */
.daterangepicker thead tr:last-child th {
padding-top: 14px;
}
.daterangepicker th.month {
font-family: var(--swissresort-heading-font, serif);
/* 18px because Aboreto is CAPS-ONLY: every glyph sits at cap-height, so it
reads roughly a third larger than the mock's mixed-case serif at the same
px value. This is the optical match, not the numeric one. */
font-size: 17px;
font-weight: 400;
letter-spacing: .04em;
color: var(--swissresort-text-color, #1E1E1E);
line-height: 1;
}
.daterangepicker th.prev,
.daterangepicker th.next {
width: 40px;
min-width: 40px;
height: 40px;
line-height: 0;
font-size: 20px;
text-align: center;
color: var(--swissresort-text-color, #1E1E1E);
border-radius: 50%;
}
/* The chevron is a CSS-border square , inline-block on the text
baseline. That baseline strut added descender space: the header row grew to
42px, so the 40px hover circle rendered as an ELLIPSE and the right month
sat a pixel below the left one — and the glyph itself sat 3px low.
line-height:0 above removes the strut; vertical-align centres the span.
Do NOT use display:block here: the span would stretch to the cell width and
its -45deg rotation would draw a long diagonal line instead of a chevron. */
.daterangepicker th.prev span,
.daterangepicker th.next span {
vertical-align: middle;
}
.daterangepicker th.prev:hover,
.daterangepicker th.next:hover {
background: #FFF2EB;
color: var(--swissresort-theme-color, #B46841);
}
/* Weekday row */
.daterangepicker thead tr:last-child th {
font-size: 10px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(30, 30, 30, .45);
width: 40px;
min-width: 40px;
max-width: 40px;
padding: 0 0 6px;
text-align: center;
}
/* Days */
/* Day cells are square boxes at a fixed 40px so the selection tile is a true
square. Selection is a ROUNDED SQUARE, matching the mock — this supersedes
the earlier circular treatment. */
.daterangepicker td {
font-size: 13px;
width: 40px;
min-width: 40px;
max-width: 40px;
height: 40px;
padding: 0;
line-height: 40px;
text-align: center;
border-radius: 6px;
color: var(--swissresort-text-color, #1E1E1E);
}
.daterangepicker td.available:hover {
background: #FFF2EB;
color: var(--swissresort-theme-color, #B46841);
border-radius: 6px;
}
.daterangepicker td.off,
.daterangepicker td.disabled {
color: rgba(30, 30, 30, .28);
text-decoration: none;
background: transparent;
}
.daterangepicker td.in-range {
background: #FFF2EB;
border-radius: 0;
color: var(--swissresort-text-color, #1E1E1E);
}
/* Selected day — a circle */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
background: var(--swissresort-theme-color, #B46841);
color: #fff;
border-radius: 6px;
}
/* The nights between stay a flat cream bar, so the two circular endpoints
read as the selection and the span reads as connective tissue. */
.daterangepicker td.in-range:not(.start-date):not(.end-date) {
border-radius: 0;
}
.daterangepicker td.start-date.in-range { border-radius: 6px 0 0 6px; }
.daterangepicker td.end-date.in-range { border-radius: 0 6px 6px 0; }
.daterangepicker td.start-date.end-date { border-radius: 6px; }
/* Disabled days stay VISIBLE and struck through, as in the mock.
Do NOT hide td.off: this plugin marks past dates of the CURRENT month with
.off as well as previous-month days, so hiding it blanked 1-22 August and
left three empty rows. Measured: {"t":"1","cls":"off.disabled"}. */
/* Footer — daterangepicker ships .drp-buttons in the DOM but hides it under
autoApply. The Apply/Cancel handlers are bound regardless, so revealing it
restores the mock's footer without touching the plugin. */
.daterangepicker .drp-buttons {
display: flex !important;
align-items: center;
justify-content: flex-start;
gap: 12px;
flex-wrap: wrap;
border-top: 1px solid rgba(30, 30, 30, .12);
margin-top: 18px;
padding: 16px 0 0;
}
/* Pair the two actions on the right, hint text alone on the left.
space-between spread all three footer children evenly and stranded CANCEL in
the middle; an auto margin on the first button pushes the pair across
together, so they read as one action group. */
.daterangepicker .drp-buttons .cancelBtn,
.daterangepicker .drp-buttons .btn-default {
margin-left: auto;
}
.daterangepicker .drp-buttons .cancelBtn ~ .applyBtn {
margin-left: 0;
}
.daterangepicker .noore-nights,
.daterangepicker .drp-selected {
font-size: 12px;
color: rgba(30, 30, 30, .6);
}
/* Equal footprint for both actions: APPLY is a shorter word than CANCEL, so
the shared padding left the primary button visibly smaller. min-width sets a
floor, the text centres in it, and either can still grow if the label does. */
.daterangepicker .drp-buttons .btn {
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
padding: 12px 26px;
border-radius: 999px;
min-width: 120px;
text-align: center;
line-height: 1.2;
/* Transparent border on BOTH, so the filled APPLY is exactly as tall as
CANCEL's 1px outline. It belongs here and not on .applyBtn: the parent's
`.daterangepicker .drp-buttons .btn { border: 0 }` is (0,3,0) and beats a
plain `.daterangepicker .applyBtn` (0,2,0). Same specificity, loaded
later, wins without !important. */
border: 1px solid transparent;
}
/* CANCEL — the theme's .btn-default paints this red (a danger style).
Override to the mock's quiet outline pill; it is a secondary action. */
.daterangepicker .drp-buttons .cancelBtn,
.daterangepicker .drp-buttons .btn-default {
background: transparent !important;
background-color: transparent !important;
border: 1px solid rgba(30, 30, 30, .28) !important;
color: var(--swissresort-text-color, #1E1E1E) !important;
}
.daterangepicker .drp-buttons .cancelBtn:hover,
.daterangepicker .drp-buttons .btn-default:hover {
border-color: var(--swissresort-text-color, #1E1E1E) !important;
background: transparent !important;
color: var(--swissresort-text-color, #1E1E1E) !important;
}
/* Cells JS has identified as belonging to a neighbouring month. Kept in flow
so the week columns stay aligned — only the number disappears. */
.daterangepicker td.noore-outside {
color: transparent !important;
text-decoration: none !important;
pointer-events: none;
}
.daterangepicker .applyBtn {
background: var(--swissresort-theme-color, #B46841);
color: #fff;
}
.daterangepicker .applyBtn:hover { background: var(--swissresort-theme-hover-color, #84411E); }
@media (max-width: 767px) {
.daterangepicker { padding: 18px; }
.daterangepicker .drp-calendar.left,
.daterangepicker .drp-calendar.right { padding: 0; }
}
/* Header: stop the CTA and phone wrapping.
Measured live — "BOOK YOUR STAY" was rendering 180x62 across FOUR lines, and
the phone 149x56 across three, because both widgets sit in fixed-width
Elementor containers. Nowrap plus auto width lets them size to their text.
The min-width:0 on the flex parent is what actually allows the container to
grow instead of squeezing its children. */
.elementor-element-2750bab .elementor-button {
white-space: nowrap;
}
.elementor-element-2750bab,
.elementor-element-2750bab > .elementor-widget-container {
width: auto !important;
max-width: none !important;
}
.elementor-element-a9d9aea,
.elementor-element-a9d9aea > .elementor-widget-container,
.elementor-element-a9d9aea .elementor-icon-list-item,
.elementor-element-a9d9aea .elementor-icon-list-text,
.elementor-element-a9d9aea a {
white-space: nowrap;
width: auto !important;
max-width: none !important;
}
.elementor-element-f1825ed {
min-width: 0;
flex-wrap: nowrap;
}
/* ==========================================================================
.noore-glass — REUSABLE
Put `noore-glass` in any Elementor widget's Advanced > CSS Classes field to
give its button the frosted treatment. Works on Button widgets, and on a
container's own background.
!important is required, not preferred: Elementor writes per-widget rules at
specificity (0,4,0) and its stylesheet loads after this file, so a plain
class (0,1,0) never wins. This is the one place a utility earns it.
========================================================================== */
.noore-glass,
.noore-glass .elementor-button,
.noore-glass .btn,
a.noore-glass {
background: rgba(255, 255, 255, .14) !important;
background-color: rgba(255, 255, 255, .14) !important;
background-image: none !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .22) !important;
color: #fff !important;
border-radius: 999px !important;
transition: background .25s ease, border-color .25s ease;
}
.noore-glass:hover,
.noore-glass .elementor-button:hover,
.noore-glass .btn:hover,
a.noore-glass:hover {
background: rgba(255, 255, 255, .22) !important;
background-color: rgba(255, 255, 255, .22) !important;
border-color: rgba(255, 255, 255, .34) !important;
color: #fff !important;
}
/* BOOK YOUR STAY — same treatment, applied by element id so it works without
editing the widget. Add the class in Elementor if the id ever changes. */
.elementor-element-2750bab .elementor-button {
background: rgba(255, 255, 255, .14) !important;
background-color: rgba(255, 255, 255, .14) !important;
background-image: none !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .22) !important;
color: #fff !important;
border-radius: 999px !important;
transition: background .25s ease, border-color .25s ease;
}
.elementor-element-2750bab .elementor-button:hover {
background: rgba(255, 255, 255, .22) !important;
border-color: rgba(255, 255, 255, .34) !important;
}
/* Off-canvas menu panel.
The theme paints the whole 470px panel in --swissresort-second-color, so
Nooré's sand accent becomes a flat wall of colour. Ink ground instead, with
the warmth reduced to accents: terracotta on the active item, a hairline
between rows. #2A2A2A is used for the one raised surface (the back button)
so it separates from the ground without introducing another hue. */
.vertical-menu-container-wrapper {
background: #1E1E1E;
}
.vertical-menu-container-wrapper .sliding-menu__panel-root > li + li {
border-top: 1px solid rgba(255, 255, 255, .07);
}
/* Menu type uses the client's Elementor global palette:
Sand #F8F5F0 at rest, Accent #DDA380 on hover. Note their "Sand" is a warm
off-white, NOT the #DDA380 I had been calling sand — #DDA380 is "Accent". */
.vertical-menu-container-wrapper .sliding-menu__panel-root > li > .sliding-menu__nav,
.vertical-menu-container-wrapper .sliding-menu li a,
.vertical-menu-container-wrapper .sliding-menu li .sliding-menu__nav {
color: #F8F5F0;
transition: color .2s ease;
}
.vertical-menu-container-wrapper .sliding-menu__panel-root > li > .sliding-menu__nav:hover,
.vertical-menu-container-wrapper .sliding-menu li a:hover,
.vertical-menu-container-wrapper .sliding-menu li .sliding-menu__nav:hover,
.vertical-menu-container-wrapper .sliding-menu li.active > .sliding-menu__nav,
.vertical-menu-container-wrapper .sliding-menu li.current-menu-item > a {
color: #DDA380 !important;
}
/* The menu CTA takes the same glass treatment as the header button. */
.vertical-menu-container-wrapper .elementor-button,
.vertical-menu-container-wrapper .btn {
background: rgba(255, 255, 255, .14) !important;
background-color: rgba(255, 255, 255, .14) !important;
background-image: none !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .22) !important;
color: #F8F5F0 !important;
border-radius: 999px !important;
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.vertical-menu-container-wrapper .elementor-button:hover,
.vertical-menu-container-wrapper .btn:hover {
background: rgba(255, 255, 255, .22) !important;
border-color: rgba(255, 255, 255, .34) !important;
color: #DDA380 !important;
}
/* Raised surface, not a second colour */
.navbar-offcanvas .sliding-menu li .sliding-menu__back {
background: #2A2A2A;
color: rgba(255, 255, 255, .88);
}
.vertical-menu-container-wrapper .content-bottom {
color: rgba(255, 255, 255, .70);
}
.vertical-menu-container-wrapper .content-bottom i {
color: var(--swissresort-second-color, #DDA380);
}
/* Hero container — Elementor's own background, beaten on ID specificity */
.elementor-28 .elementor-element.elementor-element-effb8e1:not(.x) {
background-color: #1E1E1E !important;
background-image: none !important;
}
/* --------------------------------------------------------------------------
10. Media
Cards get tighter on small screens so the radius doesn't dominate.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
:root {
--noore-r: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* --------------------------------------------------------------------------
Facilities icons (Apus features box)
--------------------------------------------------------------------------
The demo shipped these tiles with SVGs HOTLINKED from demoapus1.com, which
also carried explicit width="50" height="50" attributes. Swapping them for
Font Awesome removes the dependency on the demo site staying online, but
Elementor renders FA as