— without their own reset they'd show a default
list-item bullet marker. */
.ayab-hero-actions-left li {
list-style: none;
}
/* Login (menu-item-5047) stays in its original spot on the right, next to
the hamburger — only its own style changes to match the outline look of
the two buttons on the left, so all three read as one consistent set. */
body.home .ayab-hero-actions-left .menu-btn a,
body.home .ayab-hero-actions .menu-item-5047 a {
background-color: transparent !important;
border: 1.5px solid #FFFFFF !important;
border-radius: 50px !important;
padding: 10px 22px !important;
color: #FFFFFF !important;
box-shadow: none !important;
}
body.home .ayab-hero-actions-left .menu-btn a:hover,
body.home .ayab-hero-actions .menu-item-5047 a:hover {
background-color: rgba(255, 255, 255, 0.15) !important;
color: #FFFFFF !important;
}
/* "Our Collection" button under the hero heading/subheading — removed
per request. */
body.home .elementor-element-cd95bf6 {
display: none !important;
}
/* "More" dropdown (menu-item-5048, the "s"-labelled item revealing About
Us / Careers / Explore Cities / Contact / FAQ / My Profile / Login) is
now the one real hamburger. It was using an odd background-image sprite
(aya-menu-btn.jpg) instead of matching the rest of the nav — replaced
with a plain drawn icon, same treatment as the other pill buttons. */
.new-header-menu .main-navigation ul li.submenu-class {
display: flex !important;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0 !important;
margin-left: 15px;
}
.new-header-menu .main-navigation ul li.submenu-class > a {
color: transparent !important;
font-size: 0 !important;
}
.new-header-menu .main-navigation ul li.submenu-class:after {
background: none !important;
content: "\2630" !important;
position: static !important;
width: auto;
height: auto;
font-size: 24px;
line-height: 1;
color: #565A3A;
}
body.home .new-header-menu .main-navigation ul li.submenu-class:after {
color: #FFFFFF;
}
body.home.ayab-header-scrolled .new-header-menu .main-navigation ul li.submenu-class:after {
color: #FFFFFF;
}
/* Soft dark blob behind the hero heading/subheading/button so the text
holds contrast regardless of what part of the video is behind it. */
body.home .elementor-element-ed30010 {
position: relative;
}
body.home .elementor-element-ed30010::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140%;
max-width: 1100px;
height: 420px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 72%);
z-index: -1;
pointer-events: none;
}
/* Search bar — CORRECTED per actual DevTools inspection: the visible bar is
NOT .banner-form/ce7a20b (the Elementor ovabrw_search widget inside the
hero column, which I'd been editing for three rounds with zero visible
effect for exactly that reason). It's a completely separate element: a
raw HTML widget (id 79c2e76) inside its own section (id d6a1dcd) that
sits immediately after the hero in normal document flow, pulled up into
the hero via `margin-top:-45px` on the section itself — that's the whole
mechanism behind the "half on video, half on next section" look, no
absolute positioning involved at all. ce7a20b carries the same
(apparently non-functional on this install) hidden-desktop/tablet/mobile
classes as the other duplicate elements we've been finding all night, so
it's hidden here as the redundant one; d6a1dcd has no such classes — it's
the genuinely intended, always-visible bar. */
body.home .elementor-element-ce7a20b {
display: none !important;
}
body.home .elementor-element-d6a1dcd {
margin-top: -185px !important;
position: relative;
z-index: 5;
}
/* One continuous pill bar instead of a white rectangle + a disconnected
floating button: round + clip the outer wrapper, flatten the children's
own corners so they read as one shape.
The rounded/shadowed wrapper (.ovabrw-search-form) stretches to its
parent's full width with `justify-content:center` centering the actual
bar inside it — since only the INNER pieces (.ovabrw-s-field, the button)
have a background, that leftover space on both sides is transparent,
showing only the wrapper's own shadow/rounded outline with nothing
filled in — exactly the "shadow but no fill" gap at each end. Shrinking
the wrapper to fit its content instead of stretching removes that dead
space entirely. */
.ovabrw-search-form {
border-radius: 60px !important;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
width: fit-content !important;
margin-left: auto !important;
margin-right: auto !important;
/* Breathing room: pushes every child (fields + button) inward from the
outer pill's edge instead of them touching it flush. */
padding: 8px !important;
box-sizing: border-box;
border: 2px solid #FFFFFF !important;
background: #FFFFFF !important; /* the border showed but the 8px padding
ring inside it had no fill of its own — transparent, showing the
video through — this fills it. On non-home pages there's no video
behind it (just a plain section background), so the white border
doesn't add contrast the way it does on the homepage, but it's
harmless there — same pill shape either way, which is the part
that actually matters on every page. */
gap: 8px;
}
.ovabrw-search-form .ovabrw-s-field {
border-radius: 16px !important;
box-shadow: none !important;
}
/* Uniform padding on all four sides — the plugin's own rule (ova-brw's
ovabrw_frontend.css, .ovabrw-search .ovabrw-search-form .ovabrw-s-field
.search-field) ships deliberately asymmetric padding (20/36/20/48) to
leave room for an ABSOLUTELY-POSITIONED icon on the left, which is what
read as "a big dumb gap" once the Guests field's own content didn't
need nearly that much horizontal room. Selector prefixed with
`.ovabrw-search` to match that rule's own specificity (4 classes) rather
than relying on !important alone against a same-weight competitor.
The icon moves from absolute to a normal inline-flex item (below) so
equal padding on every side no longer risks the label text sitting
under it. */
.ovabrw-search .ovabrw-search-form .ovabrw-s-field .search-field {
padding: 18px !important;
/* The plugin's own `width: 100%` here is what was actually behind the
"immense gap before the Search button" — confirmed via direct
measurement: with a percentage width on a flex item whose own flex-
basis is `auto`, the browser falls back to distributing the flex
line's available space rather than shrinking to the field's real
content, so .ovabrw-s-field (the 3-field wrapper) was computing out
to ~1000px even though its actual children only totalled ~800px —
a ~200px dead zone sitting between the fields and the button that no
amount of padding/gap tuning on the button or wrapper could reach,
because it lived inside the LAST field's own oversized box, not
between any two elements' edges. Removing the percentage lets each
field (and the wrapper) size to real content again. */
width: auto !important;
}
.ovabrw-search .ovabrw-search-form .ovabrw-s-field .search-field .ovabrw-label {
display: flex !important;
align-items: center;
gap: 8px;
}
.ovabrw-search .ovabrw-search-form .ovabrw-s-field .search-field .ovabrw-label i {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
}
/* Pill shrunk ~20% overall: rather than a CSS `transform: scale()` (which
would blur text and shift click targets away from where they visually
appear), each internal dimension that was contributing to its width is
reduced by roughly that much — the date/guest inputs' own max-width,
and the button's min-width/padding below. */
.ovabrw-search .ovabrw-search-form .ovabrw-s-field .search-field .ovabrw-input input[type="text"] {
max-width: 88px !important;
}
/* The Search button: its own distinct rounded shape nested inside the
outer pill, with visible gap around it — a "pill inside the pill" —
instead of flush/flat corners matching the outer boundary.
No margin here (there used to be `margin-left: 8px` to space it from the
field) — the button's immediate parent (.search_reset_main, an Elementor-
generated wrapper) is a flex item sized to exactly the button's own
width, so a margin on the button doesn't push it away from anything; it
just makes the button+margin overflow past that parent's right edge by
the same amount, silently eating into the padding that was supposed to
separate the button from the pill's right edge — that's what was making
the right-side gap read so much smaller than the top/bottom gaps. Doing
the spacing as `gap` on the outer flex container above avoids that
entirely, since gap never causes any child to overflow its own box. */
.ovabrw-search-form .ovabrw-search-btn button.ovabrw-btn {
border-radius: 44px !important;
}
/* Same specificity-matching + ~20% size reduction as the fields above
(plugin default: min-width 155px, padding 30px). */
.ovabrw-search .ovabrw-search-form .ovabrw-search-btn button.ovabrw-btn {
min-width: 124px !important;
padding: 18px 24px !important;
}
/* Homepage pill width — scoped to body.home specifically. This used to be
a bare `.ovabrw-search-form` rule with no page scoping, which was also
catching /our-collection/'s completely different search bar (same
plugin markup, shared class) and shrinking it identically — not
intended, since that page needs its own width behavior (below). */
body.home .ovabrw-search-form {
/* ~20% narrower than its natural fit-content size, per request.
Reducing the padding/input-width/button-size *inside* the pill
(.search-field, the input, .ovabrw-btn, all above) turned out not
to actually shrink the outer pill at all — the plugin's own
`.ovabrw-s-field .search-field { width: 100% }` and related flex
sizing kept the wrapper's real footprint unchanged regardless
(confirmed by measuring before/after: identically 1016px visual
both times). A direct cap on the pill itself is the one change
that's guaranteed to actually move that number. 1016px is a
declared (pre-zoom) value; the site-wide zoom:80% (top of this
file) then renders it at 1016×0.8 ≈ 813px on screen, 20% less than
this pill's previous 1016px ON-SCREEN width — the whole point of
expressing it as 1016px here despite that being the "before"
number. */
max-width: 1016px !important;
}
/* Check in / Check out / Guests: was 3 content-sized boxes clustered on
the left, leaving a dead white gap between them and the Search button —
`.ovabrw-s-field` (their shared wrapper) was landing at a wide computed
size (a plugin default, not anything set here) while the 3 fields inside
it kept flex-grow:0 and never actually grew to fill that width, so the
wrapper's own leftover space just sat there empty instead of showing as
part of any field. Same fix already proven on the Our Collection variant
further down this file: the fields expand via flex:1 to actually fill
their wrapper, and the wrapper itself expands via flex:1 to fill
whatever the Search button (given its own, deliberately large, fixed
width below — not left to shrink to its own text) doesn't need — so the
group visually spans the full pill instead of hugging its left edge.
(The previous attempt at this targeted `.search_reset_main` and grew the
Search button instead — that class doesn't actually exist in this
variant's markup at all; only the Our Collection/Reset-button variant
wraps its button group in one. Those rules were silently matching
nothing.) */
body.home .ovabrw-s-field {
flex: 1;
}
body.home .ovabrw-s-field .search-field {
flex: 1;
}
/* Search button, home page: was doubled to 384px per request, then that
read as too big once seen live — pulled back down 20% from there (not
back to the original ~191px). Selector matches the shared rule's own
specificity (4 classes: .ovabrw-search .ovabrw-search-form
.ovabrw-search-btn button.ovabrw-btn, further up this file) plus the
`body.home` prefix, so it actually wins rather than losing to it despite
both being !important — tied !important still comes down to
specificity, not source order (bit us more than once elsewhere in this
file). justify-content:center is the plugin's own default on
.ovabrw-btn, unchanged — icon+"Search" text center fine in the wider box
on its own, no asymmetric padding needed (that's only for the Our
Collection variant, which has to leave room for its Reset sub-button
inside the same capsule). */
body.home .ovabrw-search-form .ovabrw-search-btn button.ovabrw-btn {
min-width: 307px !important;
}
/* ==========================================================================
/our-collection/ search bar (and anywhere else the same "banner search
with a Reset button" variant is used). Correction from the first pass:
`aya-filter-design` is NOT unique to this variant — it turns out the
homepage's own pill carries that exact same class too (it's
`aya-filter-design new-filter-input`, just without a Reset button),
which is why every rule below was also bleeding into the homepage pill
(widened Search button, fields stretching to fill instead of staying
compact, extra Check-in padding it never needed) until caught.
Every selector here is scoped `.aya-filter-design:has(.ayab_resetbtn)` —
matches only when a Reset button is actually present in that pill —
rather than trusting a class name that turned out not to mean what it
looked like it meant. Previously: pill capped at the same width as the
(unrelated) homepage pill, fields clustered left with dead space before
the button group, and Reset rendered as a second full-size button
sitting flush next to Search.
========================================================================== */
/* Pill spans the same content width as the page's own header/nav row and
product grid (both max out at the theme's standard 1290px boxed
content width) instead of hugging its own content or being capped. */
.aya-filter-design:has(.ayab_resetbtn) .ovabrw-search-form {
width: 100% !important;
max-width: none !important;
}
/* Fields expand to fill that width — was 3 content-sized boxes clustered
on the left with the Search/Reset group floating in the leftover space
right after them, not pinned to the pill's actual right edge. */
.aya-filter-design:has(.ayab_resetbtn) .ovabrw-s-field {
flex: 1;
}
.aya-filter-design:has(.ayab_resetbtn) .ovabrw-s-field .search-field {
flex: 1;
}
/* First field (Check in) — extra left padding on top of the shared 18px
.search-field padding (further up this file), specifically because
it's the one field whose left edge is exposed to the pill's own outer
boundary (the other two sit against a preceding field, not the pill
edge) — its icon read as sitting right on the pill's edge. */
.aya-filter-design:has(.ayab_resetbtn) .ovabrw-s-field .search-field:first-child {
padding-left: 32px !important;
}
/* The homepage's ~20% input-width cap doesn't apply here — these fields
are growing to fill real space now, not sitting in a shrunk pill. */
.aya-filter-design:has(.ayab_resetbtn) .ovabrw-s-field .search-field .ovabrw-input input[type="text"] {
max-width: none !important;
}
/* With the fields group now flex:1 (filling all available space), the
Search/Reset group is naturally pushed flush against the pill's own
8px inner padding (set on .ovabrw-search-form) — i.e. "far right,
accounting for the padding" — with no extra margin needed here.
width/max-width/margin explicitly reset: the theme's own legacy
style.css (separate from this file, loaded before it) has several old,
mutually-inconsistent rules for this exact selector left over from a
page-builder export — `width: 20%`, `width: 100%; max-width: 400px`,
`margin: auto` — none `!important`, so silently layering underneath
anything here that doesn't explicitly override them, and between them
the reason this wasn't actually hugging Search's real width (99px) the
way "far right, accounting for padding" needs. */
.aya-filter-design:has(.ayab_resetbtn) .search_reset_main {
position: relative;
flex-shrink: 0;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
/* Reset, take two — the first pass made it a small badge overlaying
Search's outer corner (peeking past the pill's own edge, partly
clipped by the pill's overflow:hidden in practice). Per feedback:
Search becomes one big capsule, and Reset sits truly INSIDE it —
centered vertically, sized to the capsule's height minus its own
padding, occupying roughly the right 30% of it — a sub-button of
Search, not a badge stuck to its corner.
Search widened well past its old 124px min-width so there's real room
for a 30%-wide Reset zone without the two crowding each other; its own
label/icon shift left (justify-content + left padding) to sit clear of
that zone instead of dead-centering under it. */
/* Selector matches the shared rule's own specificity (4 classes:
.ovabrw-search .ovabrw-search-form .ovabrw-search-btn button.ovabrw-btn,
further up this file) plus one — that rule was winning over a plain
`.aya-filter-design .ovabrw-search-btn button.ovabrw-btn` (3 classes)
despite both being !important, since among tied-importance rules
specificity still decides, not source order. */
/* Centered — but only within the space actually left for Search once
Reset's own zone is excluded, not across the capsule's full 260px, or
the icon+label would visually drift toward/under Reset instead of
reading as centered in Search's own area. Achieved by making the
padding on the two sides asymmetric rather than by literally
positioning content: `justify-content: center` centers between
whatever the left/right padding edges are, so a bigger right padding
(roughly matching Reset's own reserved zone: 8px inset + 30% of 260px
+ a small gap ≈ 94px) shifts the visual center point left to sit in
Search's actual remaining ~62% of the capsule. */
.aya-filter-design:has(.ayab_resetbtn) .ovabrw-search-form .ovabrw-search-btn button.ovabrw-btn {
min-width: 260px !important;
justify-content: center !important;
padding: 10px 94px 10px 24px !important;
}
/* .search_reset_main is exactly Search's own box (confirmed via
measurement — it has no other in-flow content now that Reset is
positioned absolutely), so positioning Reset relative to it IS
positioning it relative to the capsule itself. 8px insets on every
side match the pill's own --outer-pill-to-fields padding used
throughout this component, i.e. "excluding the padding" — Reset's
real height becomes the capsule's height minus 16px top+bottom, same
idea the design already uses everywhere else on the site. */
.aya-filter-design:has(.ayab_resetbtn) .ayab_resetbtn {
position: absolute;
top: 8px;
bottom: 8px;
right: 8px;
width: 30%;
}
.aya-filter-design .ayab_resetbtn button.ovabrw-btn {
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
background: #7C8257 !important;
color: #FFFFFF !important;
border: none !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 40px !important;
font-size: 12px !important;
font-weight: 600;
}
/* ==========================================================================
Guests dropdown (.ovabrw-guestspicker-content) — moved to by
ayab-guestspicker-position.js to escape the search pill's own
overflow:hidden clipping (needed for its rounded-corner shape). That
move has a side effect this file has to account for: the plugin's own
styling for this dropdown (background, border, radius, shadow, padding)
is scoped via a long descendant selector requiring it to still be
nested inside `.search-field` — once relocated to that selector
stops matching, so it was rendering with none of that: no background,
no border, fully transparent, illegible over a busy background (e.g.
the homepage's video). Restyled directly here, unscoped by ancestor
(it lives at the body level now) — same rounded/cream/shadowed card
language as the check-in/check-out calendar (.xdsoft_datetimepicker,
further up this file) and the rest of the site.
========================================================================== */
.ovabrw-guestspicker-content {
background: #FAF8F5 !important;
border: none !important;
border-radius: 20px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
padding: 20px !important;
z-index: 9999 !important;
min-width: 220px !important;
}
.ovabrw-guestspicker-content .guests-buttons {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.ovabrw-guestspicker-content .guests-buttons + .guests-buttons {
margin-top: 14px;
}
.ovabrw-guestspicker-content .description label {
color: #333333;
font-weight: 600;
margin: 0;
}
.ovabrw-guestspicker-content .guests-button {
display: flex !important;
align-items: center;
gap: 10px;
}
/* +/- controls: same "icon in a soft olive circle" treatment used for the
FAQ accordion's expand/collapse icon and the My Account sidebar icons
elsewhere in this file. */
.ovabrw-guestspicker-content .guests-icon {
display: flex !important;
align-items: center;
justify-content: center;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
background: rgba(86, 90, 58, 0.08);
cursor: pointer;
transition: background-color 0.2s ease;
flex-shrink: 0;
}
.ovabrw-guestspicker-content .guests-icon:hover {
background: #565A3A;
}
.ovabrw-guestspicker-content .guests-icon i {
color: #565A3A;
font-size: 11px;
}
.ovabrw-guestspicker-content .guests-icon:hover i {
color: #FAF8F5;
}
.ovabrw-guestspicker-content input {
width: 32px !important;
text-align: center;
border: none !important;
background: transparent !important;
color: #333333 !important;
font-weight: 600;
}
/* ==========================================================================
Exclusive Listings cards (home page): white inset "frame" around the
image (matching the hero's white-bordered video), and a fixed Book Now
position regardless of how many lines the title/address wrap to.
========================================================================== */
.property-colum {
display: flex;
flex-direction: column;
background: #FFFFFF;
padding: 12px;
}
.property-colum-img {
border-radius: 14px;
overflow: hidden;
}
.property-colum-img img {
border-radius: 0 !important; /* the padded wrapper now provides the "frame"; avoid double-rounding */
}
.property-colum-content {
display: flex;
flex-direction: column;
flex: 1;
}
.property-colum-btn {
margin-top: auto;
padding-top: 16px;
}
/* ==========================================================================
About-section images (family beach photo + camel/desert photo)
========================================================================== */
.elementor-element-9db31df img,
.elementor-element-a732e9b img {
border-radius: 24px !important;
}
/* ==========================================================================
"Our Service" cards: rounder corners, more breathing room above the icon
========================================================================== */
.key-services {
border-radius: 20px !important;
padding-top: 36px !important;
}
/* ==========================================================================
"Recent Updates" blog cards: same white-inset-frame treatment as the
Exclusive Listings cards, plus rounded corners (currently flush/square).
========================================================================== */
.ova-blog .item {
background: #FFFFFF !important;
border-radius: 20px !important;
overflow: hidden !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
/* The theme's own border on the text area was deliberately bottom/sides-only
with `border-top: unset`, designed for the old flush-with-image layout.
Now that the image is its own separate rounded/padded block, that partial
border reads as broken — the outer .item border above replaces it. */
.ova-blog .item .blog-content {
border: none !important;
}
/* Hover zoom moved from just the inner image to the whole card — the
theme's original `.active .item:hover .media img { transform: scale3d... }`
zoomed only the photo, which now looks odd clipped inside its own padded
frame. Disable that and scale the entire card instead. */
.ova-blog .active .item:hover .media img {
transform: none !important;
}
.ova-blog .item {
transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.ova-blog .item:hover {
transform: scale(1.03);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14) !important;
}
/* Padding on .item itself (confirmed via DevTools as the "winning" computed
rule, yet producing no visible gap — something about how this owl-carousel
slide sizes its content absorbs it silently) wasn't manifesting, so the
inset is applied directly on .media instead, which IS independently
confirmed sizeable/paintable. Fixed height preserves the original overall
image-slot size (331px, from the theme's own CSS) while padding creates
the visible white frame and the img fills what's left of it. */
.ova-blog .item .media {
background: #FFFFFF !important;
border-radius: 14px !important;
overflow: hidden !important;
padding: 10px !important;
box-sizing: border-box !important;
height: 331px !important;
}
.ova-blog .item .media img {
border-radius: 10px !important;
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
/* ==========================================================================
Footer: olive background, single off-white foreground (headings, icons,
body text, links — all one consistent tone, no separate accent color),
restructured into two rows plus a three-part legal bar:
Row A: logo + description (top-left, unchanged position)
Row B: Useful Links + Address (bottom-left) —— Phone/Mail (bottom-right)
Bar: Terms and Conditions (left) — Copyright (center) — Privacy Policy (right)
Also: more breathing room in the column grid (the previous layout
hand-placed columns with uneven ad-hoc margins — 130px/24px/0 — which
read as cramped/misaligned), the horizontal divider above the copyright
bar removed entirely, phone/mail swapped to solid icons, social icons
made circular, and a stray decorative icon widget (no link, not part of
the intended content) removed since it was the actual cause of the
social icons sitting out of alignment with the phone/mail column.
========================================================================== */
.elementor-element-ba14d9d {
--footer-fg: #F5F1E6; /* single off-white used for every foreground element */
background-color: #565A3A !important;
padding-top: 96px !important;
}
.elementor-element-ba14d9d,
.elementor-element-ba14d9d p,
.elementor-element-ba14d9d a,
.elementor-element-ba14d9d h1,
.elementor-element-ba14d9d h2,
.elementor-element-ba14d9d h3,
.elementor-element-ba14d9d .elementor-heading-title,
.elementor-element-ba14d9d .ova-contact-info .icon,
.elementor-element-ba14d9d .ova-contact-info .icon i,
.elementor-element-ba14d9d .ova-contact-info .icon svg,
.elementor-element-ba14d9d .ova-contact-info .contact .info .item,
.elementor-element-ba14d9d .ova-contact-info .contact .info .item a {
color: var(--footer-fg) !important;
fill: var(--footer-fg) !important;
}
/* The phone/mail icons render as inline SVGs whose
carries its own
fill from the widget's own icon_color setting (olive) — more specific
than the svg-level rule above, so it was winning and rendering the icons
almost invisible against the olive background. Target the path directly. */
.elementor-element-ba14d9d .ova-contact-info .icon svg path {
fill: var(--footer-fg) !important;
}
.elementor-element-ba14d9d a:hover,
.elementor-element-ba14d9d .ova-contact-info .contact .info .item a:hover {
opacity: 0.75;
}
/* Logo used to be a raster PNG in dark olive, filtered white via CSS since
color can't be changed on a raster image directly (kept it pixelated at
this size, though — a CSS filter can't fix source resolution). Now uses
a vector SVG traced from the brand mark, already pure white and crisp at
any size, so the filter hack is no longer needed. */
/* Social icon buttons: circular containers (were rounded rectangles),
off-white fill so the container matches the rest of the footer's single
foreground tone — the glyph itself stays olive so it still reads clearly
against its own off-white circle. */
.elementor-element-ba14d9d .elementor-social-icon {
background-color: var(--footer-fg) !important;
border-radius: 50% !important;
width: 38px !important;
height: 38px !important;
transition: transform .25s ease, opacity .25s ease;
}
.elementor-element-ba14d9d .elementor-social-icon i,
.elementor-element-ba14d9d .elementor-social-icon svg {
color: #565A3A !important;
fill: #565A3A !important;
}
.elementor-element-ba14d9d .elementor-social-icon:hover {
opacity: 0.8;
transform: translateY(-2px);
}
/* ---- Remove the horizontal divider above the copyright bar entirely ---- */
.elementor-element-ba14d9d .elementor-element-a020cd0 {
border-bottom: none !important;
}
/* ==========================================================================
IMPORTANT — element-ID fragility: Elementor regenerates every child
element's ID whenever this template is re-saved in the editor (this
happened once already: an auto-conversion from the old section/column
structure to the newer "container" structure silently changed every ID
in Row A/Row B, breaking every rule below that targeted them directly —
the layout kept working by luck, because Elementor's converter baked the
old computed layout into native container flex settings, but a stray
hidden icon widget reappeared since its `display:none` rule went dead).
Everything from here on is written against STABLE selectors instead, so
it survives future edits in the editor:
- `.footer-1` / `.footer-2` / `.footer-3` / `.footer-4` — the custom
CSS classes on the four content blocks (logo, Useful Links, Address,
Contact Us). These are a widget SETTING, not an auto-generated ID,
so they don't change when Elementor re-saves/converts the template.
- Elementor's own widget-type classes (`.elementor-widget-ova_logo`,
`.elementor-widget-romancy_elementor_contact_info`, etc.) — also
stable, generated from the widget type rather than its instance ID.
The only raw IDs still used below (ba14d9d, a020cd0, ae386fe, 8ae0824)
are on elements Elementor did NOT touch in that conversion — the outer
footer section/column and the copyright bar — so they're fine as-is.
========================================================================== */
/* Declutter: a decorative, unlinked network/globe icon widget sits between
the mail row and the social icons with no content value of its own —
hide it via its stable container scope + widget-type class rather than
its (unstable) own id. */
.elementor-element-ba14d9d .footer-4 > .elementor-widget-icon {
display: none !important;
}
/* Left-alignment within the contact column: phone, mail and the
social-icons row all become full-width blocks (not auto-width/inline) so
they share the exact same left edge instead of drifting by content width. */
.elementor-element-ba14d9d .footer-4 .elementor-widget-romancy_elementor_contact_info,
.elementor-element-ba14d9d .footer-4 .elementor-widget-social-icons {
width: 100% !important;
margin-left: 0 !important;
}
.elementor-element-ba14d9d .elementor-social-icons-wrapper {
justify-content: flex-start !important;
}
.elementor-element-ba14d9d .footer-4 .elementor-widget-social-icons {
margin-top: 18px !important;
}
/* Gap between the phone row and the mail row specifically (adjacent-sibling
— targets "whichever contact-info widget follows another one", so it
doesn't care which ids they carry). */
.elementor-element-ba14d9d .footer-4 .elementor-widget-romancy_elementor_contact_info + .elementor-widget-romancy_elementor_contact_info {
margin-top: 16px;
}
/* The description paragraph — without a cap it stretches edge-to-edge
(Row A is a full-width flex row), which reads oddly for a short brief.
Constrain it back to a readable column width, still left-aligned. */
.elementor-element-ba14d9d .footer-pera {
max-width: 620px;
}
/* Logo, doubled per request: was 100px, now 200px (set directly on the
widget's own size setting in Elementor, not a CSS override, so it also
shows correctly if this footer is ever edited in Elementor itself). */
.elementor-element-ba14d9d .elementor-widget-ova_logo {
margin-bottom: 20px !important;
}
/* Force every Useful Links item — and every block heading itself — onto a
single line, no matter how many words (e.g. "Frequently Asked
Questions"). */
.elementor-element-ba14d9d .footer-2 .elementor-heading-title,
.elementor-element-ba14d9d .footer-3 .elementor-heading-title,
.elementor-element-ba14d9d .footer-4 .elementor-heading-title,
.elementor-element-ba14d9d .ova-menu-footer .menu a,
.elementor-element-ba14d9d .ova-contact-info .contact .info .item a {
white-space: nowrap;
}
/* Unified, tight gap between each block heading (Useful Links / Address /
Contact Us) and the content below it — identical across all three so
they read as one consistent system. */
.elementor-element-ba14d9d .footer-2 .elementor-heading-title,
.elementor-element-ba14d9d .footer-3 .elementor-heading-title,
.elementor-element-ba14d9d .footer-4 .elementor-heading-title {
margin-bottom: 8px !important;
display: inline-block;
}
.elementor-element-ba14d9d .ova-menu-footer .menu > li {
margin-bottom: 12px;
}
.elementor-element-ba14d9d .ova-menu-footer .menu > li:last-child {
margin-bottom: 0;
}
.elementor-element-ba14d9d .elementor-element-ae386fe {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
/* ---- Type scale: the brief/description paragraph reads largest, the rest
of the "normal" footer text (phone, address, useful-links items) steps up
a bit too but stays below the brief — keeps a clear size hierarchy. ---- */
.elementor-element-ba14d9d .footer-pera,
.elementor-element-ba14d9d .footer-pera p {
font-size: 20px !important;
}
.elementor-element-ba14d9d .ova-contact-info .contact .info .item,
.elementor-element-ba14d9d .ova-contact-info .contact .info .item a,
.elementor-element-ba14d9d .ova-menu-footer .menu a,
.elementor-element-ba14d9d .footer-3 .elementor-widget-text-editor p {
font-size: 17px !important;
}
/* ---- Legal bar: Terms and Conditions (left) / Copyright (true center via
grid, regardless of how wide the side links are) / Privacy Policy
(right) — the two link widgets were added alongside the existing
copyright text as siblings in the same column. ---- */
.elementor-element-ba14d9d .elementor-element-8ae0824 .elementor-widget-wrap {
display: grid !important;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 24px;
}
.elementor-element-ba14d9d .elementor-element-8ae0824 .elementor-widget-wrap > *:nth-child(1) {
justify-self: start;
}
.elementor-element-ba14d9d .elementor-element-8ae0824 .elementor-widget-wrap > *:nth-child(2) {
justify-self: center;
}
.elementor-element-ba14d9d .elementor-element-8ae0824 .elementor-widget-wrap > *:nth-child(3) {
justify-self: end;
}
/* ==========================================================================
Check-in/Check-out calendar (xdsoft datetimepicker, used by the homepage
search pill) — restyled to match the site's olive/cream palette instead
of its plain default look. The parent theme already has some baseline
theming for this (wp-content/themes/romancy/assets/scss/woocommerce/
_datetimepicker.scss, compiled into the parent's style.css) that colors
the selected/current date using the theme's own --primary variable —
which already resolves to the same brand olive (#5E6343) used
throughout this child theme, so this block extends that rather than
fighting it: rounds and recolors the outer shell, restyles the
month/year header and weekday row, softens the harsh red disabled-date
color into something that fits the palette, and gives every date cell a
consistent rounded/pill treatment.
Positioning (opening above the pill instead of overlapping it) is
handled separately in JS — see ayab-datepicker-position.js — since the
picker is appended directly to , not nested inside the search
pill, so plain CSS has no reliable containing block to anchor it to. */
.xdsoft_datetimepicker {
border: none !important;
border-radius: 20px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
background: #FAF8F5 !important;
padding: 14px !important;
font-family: Barlow, sans-serif !important;
}
/* Month/year label + prev/next/today controls */
.xdsoft_datetimepicker .xdsoft_label {
color: #565A3A !important;
font-weight: 600 !important;
}
.xdsoft_datetimepicker .xdsoft_label i,
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_today_button {
opacity: 1 !important;
filter: none !important;
border-radius: 50% !important;
transition: background-color .2s ease;
}
.xdsoft_datetimepicker .xdsoft_prev:hover,
.xdsoft_datetimepicker .xdsoft_next:hover,
.xdsoft_datetimepicker .xdsoft_today_button:hover {
background-color: rgba(86, 90, 58, 0.1) !important;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
background: #FFFFFF !important;
border-radius: 10px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}
/* Weekday header row */
.xdsoft_datetimepicker .xdsoft_calendar th {
color: #565A3A !important;
font-weight: 600 !important;
text-transform: uppercase;
font-size: 11px !important;
letter-spacing: .03em;
}
/* Every date cell: rounded, consistent hover regardless of state */
.xdsoft_datetimepicker .xdsoft_calendar td {
border-radius: 10px !important;
color: #333333 !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover {
background: #565A3A !important;
color: #FAF8F5 !important;
}
/* Today: an outline instead of a filled block, so it reads as "this is
today" without competing with the selected-date fill below. */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
box-shadow: inset 0 0 0 1.5px #565A3A;
color: #565A3A !important;
font-weight: 600;
}
/* Selected date: solid olive fill (already themed via --primary in the
parent's compiled CSS, this just keeps radius/typography consistent). */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
border-radius: 10px !important;
font-weight: 600;
}
/* Disabled/unavailable dates: the parent theme hardcodes a bright coral-red
(#FD4C5C) here, which reads as an alarm rather than "just unavailable" —
softened to a muted warm terracotta that stays clearly distinct from
available dates without clashing with the rest of the olive/cream
palette. */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled {
background: #D9A98C !important;
color: #FFFFFF !important;
border-radius: 10px !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover {
background: #D9A98C !important;
color: #FFFFFF !important;
}
/* Adjacent-month dates: de-emphasized instead of full-strength text */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month {
color: #B9B9B9 !important;
}
/* ==========================================================================
My Account — a full second treatment, on top of the original "was plain
default WooCommerce" pass below: the whole page is now one hero-sized
card, exactly matching the homepage hero's own size/position/corner
radius (.elementor-element-5c69181 further up this file — same 30px
inset, same 40px radius, same viewport-height calc, same 0.8 zoom
compensation math) with the site header itself relocated inside it as a
full-width top bar, and the sidebar+content sharing the space below.
ayab-account-hero.js does the actual node-moving (same technique as
ayab-header-scroll.js's notch/hero-actions on the homepage: the real
logo and nav-menu widget nodes are re-parented, not cloned, so their
links/behavior/the-already-working Login-shows-your-name logic all keep
working unchanged) — it wraps the header bar it builds in
`.ayab-account-header`, and the existing sidebar+content pair in
`.ayab-account-body`, both styled below. The original header row is
hidden since it's now empty. */
body.woocommerce-account .elementor-element-1c71919,
body.woocommerce-account .elementor-element-87717c7 {
display: none !important;
}
/* `woocommerce-account` is only ever a class here, not a separate
wrapping element — a selector like `.woocommerce-account .woocommerce-
account .woocommerce` (two ancestors both carrying that class) matches
nothing and silently no-ops, which is exactly what happened on the first
pass. body.woocommerce-account IS the single ancestor. */
body.woocommerce-account .woocommerce {
display: flex;
flex-direction: column;
margin: 30px !important;
width: calc(100% - 60px) !important;
max-width: calc(100% - 60px) !important;
height: calc((100vh / 0.8) - 60px) !important;
border-radius: 40px !important;
overflow: hidden;
padding: 0 !important;
gap: 0 !important;
background: #FAF8F5 !important;
/* box-shadow: none — matching the homepage hero, which doesn't have one
either. Explicit `none` rather than just omitting the property:
.woocommerce itself carries a separate, un-related 0 0 10px #ccc
shadow from the parent theme's own default WooCommerce styling
(confirmed via computed style — my own removal of the 20px/50px
shadow only uncovered this pre-existing one underneath, it was never
actually gone). Its blur was tinting the white page background
around the card into a soft grey halo, which read as "not actually
blank white" even though the true background color underneath it
always was. */
box-shadow: none !important;
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* Same admin-bar height compensation as the homepage hero — logged-in
preview only, see the matching comment on .elementor-element-5c69181. */
body.woocommerce-account.admin-bar .woocommerce {
height: calc((100vh / 0.8) - 60px - 32px) !important;
}
/* Same cream as the card body below it (was white with a border, reading
as two visually separate bands) — kept as one continuous color, but with
a thin divider line restored between them (removed along with the color
swap, then asked back — a line reads as "distinct sections of one card"
without needing a color break to do it). */
.ayab-account-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
padding: 18px 40px;
background: #FAF8F5;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* Explicit width AND height (not max-height + width:auto) — the source SVG
(aya-logo-olive.svg) has no intrinsic width/height/viewBox for the
browser to compute a proportional auto width from, so in this new flex
context (unlike its original spot, where an ancestor Elementor rule
happened to size it) it was rendering at 0×0 despite loading fine
(naturalWidth/Height were valid — only the CSS box was collapsing).
53:40 matches the source file's own 199:150 aspect ratio. */
.ayab-account-header-logo img {
height: 40px;
width: 53px;
}
.ayab-account-header-actions .main-navigation {
display: flex;
align-items: center;
}
.ayab-account-body {
display: flex;
flex: 1;
/* Without this, a flex child can never shrink below its content's
natural height, which would silently defeat the internal scrolling
below — the row would just grow the whole card instead of clipping
to it. */
min-height: 0;
gap: 32px;
padding: 40px;
overflow: hidden;
}
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
overflow-y: auto;
}
/* ==========================================================================
My Account — logged-out (Login/Register). Same hero card + relocated
header as the dashboard above (ayab-account-hero.js builds both from the
same code path now), but the dashboard's fixed viewport-height card would
leave a tall empty cream gap below a form this short, and its plain
red-underline "Login | Register" text tabs / default WooCommerce field
styling were never actually restyled for this site (the parent theme's
own _login.scss only partially compiles into its shipped style.css — the
tab layout and column stacking come through, but the pill radius, input
sizing and button color don't, see the overrides below). `.ayab-account-
loggedout` is added by the JS only when there's no dashboard nav to move,
i.e. only for a signed-out visitor — the two views never both match.
========================================================================== */
/* Card: hug its content instead of the dashboard's fixed hero height.
Selector matches/exceeds the dashboard rules' own specificity (adds
.ayab-account-loggedout on top of the same chain) so it actually wins —
see the "tied !important, specificity still decides" note further up
this file for why a shorter chain here would silently lose. */
body.woocommerce-account .woocommerce.ayab-account-loggedout {
height: auto !important;
min-height: 0 !important;
}
body.woocommerce-account.admin-bar .woocommerce.ayab-account-loggedout {
height: auto !important;
}
.woocommerce.ayab-account-loggedout .ayab-account-body {
flex-direction: column;
align-items: center;
justify-content: flex-start;
overflow: visible !important;
padding: 56px 40px 72px !important;
}
/* Login/Register tabs: was plain default-blue-link text with a red
underline on the active one — rebuilt as a rounded segmented toggle
matching the site's pill-button language elsewhere (search pill, account
nav active state). */
.ayab-account-loggedout .ova-login-register-woo {
display: flex !important;
justify-content: center;
width: fit-content;
gap: 0;
margin: 0 auto 32px auto !important;
padding: 6px;
background: rgba(86, 90, 58, 0.08);
border-radius: 50px;
}
.ayab-account-loggedout .ova-login-register-woo li {
padding: 0 !important;
}
.ayab-account-loggedout .ova-login-register-woo li a {
display: block;
padding: 10px 32px !important;
border-radius: 50px !important;
font-size: 15px !important;
line-height: 1.4 !important;
letter-spacing: normal !important;
font-weight: 600 !important;
color: #565A3A !important;
transition: background-color .2s ease, color .2s ease;
}
.ayab-account-loggedout .ova-login-register-woo li.active a {
background: #565A3A;
color: #FAF8F5 !important;
}
/* Kills the parent theme's red ::after underline bar — a leftover default
that has no place in this pill treatment. */
.ayab-account-loggedout .ova-login-register-woo li.active a:after {
display: none !important;
}
/* Form column: parent SCSS already stacks .col-1/.col-2 full-width instead
of side-by-side (its col2-set override does compile), so this just caps
it to a comfortable reading/form width and centers it under the tabs —
a single login OR register form is visible at a time either way, toggled
by the parent theme's own woo.js. */
.ayab-account-loggedout #customer_login {
max-width: 440px;
width: 100%;
margin: 0 auto !important;
}
.ayab-account-loggedout #customer_login .col-1,
.ayab-account-loggedout #customer_login .col-2 {
max-width: 100% !important;
float: none !important;
margin: 0 !important;
}
/* "Login" / "Register" — redundant with the tabs immediately above. */
.ayab-account-loggedout #customer_login .col-1 > h2,
.ayab-account-loggedout #customer_login .col-2 > h2 {
display: none !important;
}
.ayab-account-loggedout .woocommerce-form-row {
margin: 0 0 18px 0 !important;
}
.ayab-account-loggedout .woocommerce-form-row label {
display: block;
font-size: 14px !important;
line-height: 1.4 !important;
font-weight: 600 !important;
color: #565A3A !important;
margin: 0 0 6px 0 !important;
}
.ayab-account-loggedout .required {
color: #B5533C !important;
}
.ayab-account-loggedout .woocommerce-form-row input {
display: block;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
padding: 13px 18px !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 16px !important;
background: #FFFFFF;
font-size: 15px;
line-height: 1.5 !important;
color: #333333;
}
.ayab-account-loggedout .woocommerce-form-row input:focus {
outline: none;
border-color: #565A3A !important;
box-shadow: 0 0 0 3px rgba(86, 90, 58, 0.12);
}
/* Remember-me + submit row */
.ayab-account-loggedout label.woocommerce-form-login__rememberme {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #565A3A;
font-weight: 500;
cursor: pointer;
}
.ayab-account-loggedout .woocommerce-form__input-checkbox {
width: 16px;
height: 16px;
accent-color: #565A3A;
}
/* Submit buttons already get the sitewide 50px pill radius (.woocommerce
button.button, further up this file) — this fills in the color/sizing
that rule doesn't touch. */
.ayab-account-loggedout .woocommerce-form button[type="submit"] {
width: 100% !important;
min-width: 0 !important;
background: #565A3A !important;
color: #FAF8F5 !important;
border: none !important;
padding: 14px 24px !important;
font-size: 15px !important;
font-weight: 600 !important;
margin-top: 6px;
}
.ayab-account-loggedout .woocommerce-form button[type="submit"]:hover {
background: #3F4329 !important;
}
.ayab-account-loggedout .woocommerce-LostPassword {
text-align: center;
margin: 16px 0 0 0 !important;
}
.ayab-account-loggedout .woocommerce-LostPassword a {
color: #565A3A !important;
font-size: 14px;
text-decoration: underline;
text-underline-offset: 2px;
}
.ayab-account-loggedout .woocommerce-privacy-policy-text {
font-size: 13px !important;
line-height: 1.6 !important;
color: #777777 !important;
text-align: center;
margin: 0 0 16px 0 !important;
}
.ayab-account-loggedout .woocommerce-privacy-policy-text p {
margin: 0;
}
/* "A link to set a new password will be sent..." — only ever shows if
woocommerce_registration_generate_password is switched back to 'yes';
harmless to style defensively either way. */
.ayab-account-loggedout .woocommerce-form-register > p:not([class]) {
font-size: 14px;
line-height: 1.6;
color: #666666;
text-align: center;
margin: 0 0 16px 0;
}
/* ==========================================================================
My Account (original pass) — was plain default WooCommerce (8px corners,
flat grey nav list, default blue-ish link colors), out of step with the
rest of the site's rounder, warmer, olive/cream look. Rebuilt as a proper
two-panel dashboard: a pill-style nav on the left, a real card for the
content on the right. The hero-card treatment above now supplies the
outer shell (size/position/radius/background/shadow); this part still
owns the sidebar/content styling within it.
========================================================================== */
/* Sidebar nav — a plain list, no card around the whole thing and no pill
around every individual item; only the active tab gets a highlight.
`background: transparent !important` on the default link state matters
here specifically because the parent theme already puts its own grey
pill background on every .woocommerce-MyAccount-navigation-link a by
default — without overriding it explicitly, every non-active item still
shows that box even though nothing here sets one. */
.woocommerce-MyAccount-navigation {
flex: 0 0 240px;
}
.woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.woocommerce-MyAccount-navigation-link a {
display: block;
padding: 10px 14px !important;
border-radius: 10px !important;
background: transparent !important;
color: #565A3A !important;
font-weight: 500;
transition: background-color .2s ease, color .2s ease;
}
.woocommerce-MyAccount-navigation-link a:hover {
background: rgba(86, 90, 58, 0.08) !important;
}
.woocommerce-MyAccount-navigation-link.is-active a {
background: #565A3A !important;
color: #FAF8F5 !important;
}
/* Content panel */
.woocommerce-MyAccount-content {
flex: 1 1 400px;
background: #FFFFFF;
border-radius: 20px;
padding: 32px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
color: #444444;
line-height: 1.7;
}
.woocommerce-MyAccount-content a {
color: #565A3A !important;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
color: #333333;
font-family: inherit;
}
/* Order history / downloads / bookings tables: modern spaced rows instead
of a dense bordered grid. */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content table.my_account_orders,
.woocommerce-MyAccount-content table.woocommerce-orders-table {
border: none !important;
border-collapse: separate !important;
border-spacing: 0 10px !important;
}
.woocommerce-MyAccount-content table.shop_table thead th {
border: none !important;
color: #565A3A;
text-transform: uppercase;
font-size: 12px;
letter-spacing: .03em;
padding: 0 16px 8px !important;
}
.woocommerce-MyAccount-content table.shop_table tbody tr {
background: #FAF8F5;
}
.woocommerce-MyAccount-content table.shop_table tbody td {
border: none !important;
padding: 16px !important;
}
.woocommerce-MyAccount-content table.shop_table tbody tr td:first-child {
border-radius: 14px 0 0 14px;
}
.woocommerce-MyAccount-content table.shop_table tbody tr td:last-child {
border-radius: 0 14px 14px 0;
}
/* Form fields (Account details / Addresses edit forms): match the site's
rounded input treatment sitewide (already 12px elsewhere) with a bit
more breathing room in this context. */
.woocommerce-MyAccount-content .woocommerce-Input,
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select {
border-radius: 12px !important;
padding: 12px 16px !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.woocommerce-MyAccount-content fieldset {
border-radius: 16px !important;
border-color: rgba(0, 0, 0, 0.1) !important;
}
/* ---- Sidebar nav icons: a line icon before each label, the single
biggest visual signal of a "SaaS dashboard" nav vs. a plain text list.
Same currentColor trick used for the social icon containers elsewhere —
the icon is a CSS mask filled with `currentColor`, so it automatically
matches whatever this link's text color is (olive normally, cream on
the active/hover state) with no separate color rules needed. ---- */
.woocommerce-MyAccount-navigation-link a {
display: flex !important;
align-items: center;
gap: 12px;
}
.woocommerce-MyAccount-navigation-link a::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.woocommerce-MyAccount-navigation-link--dashboard a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--orders a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--my-bookings a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--downloads a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-address a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11.5A7 7 0 0 0 5 9.5C5 14.5 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11.5A7 7 0 0 0 5 9.5C5 14.5 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--payment-methods a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cline x1='2.5' y1='10' x2='21.5' y2='10'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cline x1='2.5' y1='10' x2='21.5' y2='10'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-account a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4.5 20c1.5-4 5-6 7.5-6s6 2 7.5 6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4.5 20c1.5-4 5-6 7.5-6s6 2 7.5 6'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H5.5A1.5 1.5 0 0 0 4 5.5v13A1.5 1.5 0 0 0 5.5 20H9'/%3E%3Cpath d='M14 8l5 4-5 4'/%3E%3Cline x1='19' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H5.5A1.5 1.5 0 0 0 4 5.5v13A1.5 1.5 0 0 0 5.5 20H9'/%3E%3Cpath d='M14 8l5 4-5 4'/%3E%3Cline x1='19' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}
/* ---- Dashboard content typography: the greeting line becomes a real
heading instead of plain paragraph text, and the three inline links
("recent orders" / "shipping and billing addresses" / "edit your
password...") become small pill chips instead of plain underlined text
— same content, same destinations, just reads like dashboard quick
links instead of a sentence with links buried in it. ---- */
.woocommerce-MyAccount-content > p:first-child {
font-family: inherit;
font-size: 24px;
font-weight: 600;
color: #333333;
margin-bottom: 8px;
}
.woocommerce-MyAccount-content > p:first-child strong {
color: #565A3A;
}
.woocommerce-MyAccount-content > p:nth-child(2) {
color: #666666;
font-size: 15px;
max-width: 520px;
}
.woocommerce-MyAccount-content > p:nth-child(2) a {
display: inline-block;
background: rgba(86, 90, 58, 0.08);
padding: 3px 12px;
border-radius: 20px;
text-decoration: none !important;
font-weight: 600;
font-size: 13px;
margin: 2px 0;
}
.woocommerce-MyAccount-content > p:nth-child(2) a:hover {
background: #565A3A !important;
color: #FAF8F5 !important;
}
/* ---- "My Bookings" table (inc/ayab-dashboard.php): folded into this
design system instead of its own separate inline styling — rounded
status pills matching the color logic already used there, spaced rows
consistent with the Orders table above. ---- */
.ayab-bookings-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 10px;
}
.ayab-bookings-table th {
text-align: left;
color: #565A3A;
text-transform: uppercase;
font-size: 12px;
letter-spacing: .03em;
padding: 0 16px 8px;
border: none;
}
.ayab-bookings-table td {
background: #FAF8F5;
padding: 16px;
vertical-align: middle;
border: none;
}
.ayab-bookings-table tr td:first-child {
border-radius: 14px 0 0 14px;
}
.ayab-bookings-table tr td:last-child {
border-radius: 0 14px 14px 0;
}
.ayab-booking-property img {
width: 44px;
height: 44px;
object-fit: cover;
border-radius: 10px;
vertical-align: middle;
margin-right: 10px;
}
.ayab-status {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
background: #EFEFEF;
color: #555555;
}
.ayab-status-completed,
.ayab-status-processing {
background: #565A3A;
color: #FAF8F5;
}
.ayab-status-cancelled,
.ayab-status-failed {
background: #C0392B;
color: #FFFFFF;
}
.ayab-status-pending,
.ayab-status-on-hold {
background: #E8DFC8;
color: #5A5240;
}
@media (max-width: 700px) {
.woocommerce-MyAccount-navigation {
flex-basis: 100%;
}
}
/* ==========================================================================
Top contact bar (phone/email + social icons) on every page other than
the homepage (hidden there in favor of the video hero notch —
body.home .elementor-element-87717c7 { display:none }, further up this
file). Colors reversed per request: was olive background with white/cream
text and icons; now a white background with the olive brand color
carrying the text and icons instead. */
.elementor-element-87717c7 {
background-color: #FFFFFF !important;
}
.elementor-element-87717c7,
.elementor-element-87717c7 a,
.elementor-element-87717c7 .ova-contact-info .icon,
.elementor-element-87717c7 .ova-contact-info .contact .info .item,
.elementor-element-87717c7 .ova-contact-info .contact .info .item a {
color: #565A3A !important;
}
.elementor-element-87717c7 a[href*="facebook.com"],
.elementor-element-87717c7 a[href*="linkedin.com"],
.elementor-element-87717c7 a[href*="instagram.com"],
.elementor-element-87717c7 a[href*="wa.me"] {
color: #565A3A !important;
}
/* LinkedIn and Instagram here render as inline SVGs whose carries
its own hardcoded white fill (unrelated to the `color` property above) —
same issue found earlier on the footer's contact icons. White-on-white
made them invisible once the background flipped to white; Facebook and
WhatsApp are plain icon-font glyphs so `color` alone was enough for them. */
.elementor-element-87717c7 svg path {
fill: #565A3A !important;
}
/* ==========================================================================
Elementor scroll-triggered entrance animations (any widget with a
`_animation` setting, e.g. fadeInUp) start life as `.elementor-invisible`
— Elementor's own CSS for that class is `visibility: hidden`, and its
frontend JS is supposed to swap in the animation class (revealing the
content) via an IntersectionObserver once the element scrolls into view.
That JS isn't completing on this install — same category of issue as the
hidden-desktop/tablet/mobile utility classes documented earlier in this
file (Elementor's own responsive-hide utility not taking effect here
either). Confirmed via DevTools: several section headings (e.g. "Simplify,
Showcase, Succeed / Listing Made Simple with Aya Boutique" and "AYA
BOUTIQUE / Frequently Asked Questions" on /list-your-property/, plus 6
more on the homepage) are permanently `visibility: hidden` — not merely
missing their fade-in flourish, genuinely invisible to every visitor,
with the surrounding layout still reserving their space (so it read as a
confusing gap/overlap with whatever sits next to them, not just "blank").
Forcing the end-state directly rather than chasing why Elementor's own JS
isn't running, same as the earlier precedent. This sacrifices the fade-in
flourish sitewide, but that's a strict improvement over content some
visitors never see at all. ========================================================================== */
.elementor-invisible {
opacity: 1 !important;
visibility: visible !important;
}
/* ==========================================================================
FAQ accordions ("FAQ's for Our Guests" on /faqs/, and the owner-facing
FAQ block on /list-your-property/) — both share the same custom
`faq-design` class on the widget, added at build time specifically so
both could be styled together from one place. Previously plain flat-grey
(#eee) rows with square corners and bare +/- glyphs: brought in line with
the card language used everywhere else on the site (white cards, rounded
corners, soft shadow, olive accent), each question its own separate card
with breathing room between them instead of a dense stacked list.
========================================================================== */
.faq-design .elementor-accordion {
display: flex;
flex-direction: column;
gap: 14px;
}
.faq-design .elementor-accordion-item {
/* !important: Elementor compiles a per-page, per-instance rule for this
exact widget (`.elementor-{page_id} .elementor-element-{widget_id}
.elementor-accordion-item`) at higher specificity (3 classes vs. this
rule's 2), which otherwise wins regardless of source order and keeps
the old flat grey (#EFEFEF) background. */
background: #FFFFFF !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
border-radius: 16px !important;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.25s ease;
}
.faq-design .elementor-accordion-item:hover {
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
/* Flex + row-reverse rather than Elementor's default float-based icon-right
layout: float never vertically centers against a title that wraps to 2+
lines (the icon just sits flush at the top), which is exactly what made
it read as "off-center" on longer questions. row-reverse keeps the icon
on the right (DOM order is icon-then-text, so row-reverse visually
flips that back to text-left/icon-right) while align-items:center now
centers it against the title's full height regardless of how many
lines it wraps to. */
.faq-design .elementor-tab-title {
display: flex !important;
flex-direction: row-reverse !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px;
padding: 20px 26px !important;
}
/* The icon (Elementor's own +/- svg pair, only one shown at a time via its
own show/hide logic) becomes a small olive-tinted circle instead of a
bare glyph floating in space — same "icon in a soft circle" treatment
used for the My Account sidebar icons elsewhere in this file.
!important on width/height/border-radius: Elementor compiles its own
per-instance size rule for this exact icon at higher specificity, which
was otherwise winning and rendering a non-square ~19×22px box instead of
a 28×28 circle. */
.faq-design .elementor-accordion-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
flex-shrink: 0;
background: rgba(86, 90, 58, 0.08);
transition: background-color 0.2s ease;
}
.faq-design .elementor-accordion-icon svg {
width: 11px;
height: 11px;
}
/* Open state: filled solid olive circle with a cream glyph, instead of just
recoloring the bare icon — reads clearly as "this one's expanded" at a
glance across a whole list of cards. */
.faq-design .elementor-active .elementor-accordion-icon {
background: #565A3A;
}
.faq-design .elementor-active .elementor-accordion-icon svg path {
fill: #FAF8F5 !important;
}
.faq-design .elementor-tab-content {
/* Elementor's own default 1px top border between title and open content
— removed per request, the card's own edges already read as one
contained shape without it. */
border-top: none !important;
padding: 0 26px 24px !important;
color: #555555;
line-height: 1.7;
}
/* ==========================================================================
"Services" section on /list-your-property/ (12 cards: Revenue Management,
Management Done Right, Marketing Services, Photography & Videography,
Managing Licenses, Furnishing Assistance, Upkeep of Your Property, Guided
Check-in and Check-out, Payment Collection, Housekeeping, Fresh Linens
and Laundry, Premium Toiletries — each its own `services-box`-classed
Image Box widget). Previously a flush-image-on-top, thin-bordered, square
-cornered card with no depth. Rebuilt with the same white-inset-frame +
rounded-corners + hover-lift treatment already used for the Exclusive
Listings and Recent Updates cards elsewhere on the site, so this reads as
the same design system rather than a plain default Elementor grid.
========================================================================== */
/* The widget itself already carries its own Elementor-configured shadow +
radius (box-shadow: 0 0 10px #ccc, border-radius: 8px, set as a widget
style in the editor) — sitting behind the card built below, its sharp,
larger, un-rounded-to-match shadow shows past the card's own edges.
Neutralized here rather than in the editor so it stays reachable/visible
in source control. */
.services-box.elementor-widget-image-box {
box-shadow: none !important;
border-radius: 0 !important;
}
.services-box .elementor-image-box-wrapper {
background: #FFFFFF;
border-radius: 20px !important;
padding: 12px;
box-sizing: border-box;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.services-box .elementor-image-box-wrapper:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
/* Fixed height + object-fit:cover keeps every card's image slot the same
size regardless of each source photo's own natural aspect ratio — same
fix already applied to the Recent Updates blog cards (.ova-blog .media)
for the same reason. */
.services-box .elementor-image-box-img {
border-radius: 14px !important;
overflow: hidden;
height: 220px;
margin: 0 0 18px !important;
}
.services-box .elementor-image-box-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 14px !important;
}
.services-box .elementor-image-box-content {
padding: 0 6px 6px !important;
flex: 1;
}
.services-box .elementor-image-box-title {
color: #333333 !important;
margin-bottom: 10px !important;
}
.services-box .elementor-image-box-description {
color: #666666 !important;
line-height: 1.7;
}
/* ==========================================================================
Owner-facing FAQ section on /list-your-property/ ("AYA BOUTIQUE /
Frequently Asked Questions") — a solid-olive dark variant of the
`faq-design` cards styled above, deliberately scoped to this section's
own stable element id (0fc0048) rather than the shared `.faq-design`
class, so the /faqs/ page's own accordion (white cards, dark text) is
untouched. Was a photo background (count-bg-home-1.jpg, reused from
elsewhere on the site) with the same white cards as every other
accordion — per request: solid olive fill instead of the photo, cards a
brighter tint of that same olive instead of white, text recolored to the
footer's single off-white foreground tone (--footer-fg, #F5F1E6,
defined on the footer further up this file) rather than the dark grey
used on the light/white variant. */
.elementor-element-0fc0048 {
background-image: none !important;
background-color: #565A3A !important;
}
.elementor-element-0fc0048 .elementor-background-overlay {
display: none !important;
}
.elementor-element-0fc0048 .faq-design .elementor-accordion-item {
background: #6B7049 !important; /* brighter tint of the section's own olive */
border: 1px solid rgba(245, 241, 230, 0.18) !important;
box-shadow: none !important;
}
.elementor-element-0fc0048 .faq-design .elementor-accordion-item:hover {
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15) !important;
}
.elementor-element-0fc0048 .faq-design .elementor-tab-title,
.elementor-element-0fc0048 .faq-design .elementor-accordion-title,
.elementor-element-0fc0048 .faq-design .elementor-active .elementor-accordion-title,
.elementor-element-0fc0048 .faq-design .elementor-tab-content,
.elementor-element-0fc0048 .faq-design .elementor-tab-content p {
color: #F5F1E6 !important;
}
.elementor-element-0fc0048 .faq-design .elementor-accordion-icon {
background: rgba(245, 241, 230, 0.18);
}
.elementor-element-0fc0048 .faq-design .elementor-accordion-icon svg path {
fill: #F5F1E6 !important;
}
.elementor-element-0fc0048 .faq-design .elementor-active .elementor-accordion-icon {
background: #F5F1E6;
}
.elementor-element-0fc0048 .faq-design .elementor-active .elementor-accordion-icon svg path {
fill: #565A3A !important;
}
/* The "AYA BOUTIQUE / Frequently Asked Questions" heading above these cards
(romancy_elementor_heading, the elementor-invisible fix earlier in this
file made it visible again) — same off-white as the cards, was dark text
meant for a light background. */
.elementor-element-0fc0048 .ova-title .sub-title,
.elementor-element-0fc0048 .ova-title .title {
color: #F5F1E6 !important;
}
/* ==========================================================================
Inner-page hero banners: rounded-rectangle treatment matching the
homepage hero's own corner radius (40px, .elementor-element-5c69181
further up this file) — same literal value, so it renders identically
under the site-wide `zoom: 80%` both are subject to. Two different
structures share this look:
- List Your Property's hero (elementor-element-2c79bae) is its own
Elementor container with a CSS background-image.
- `.inner-banner-section` is the theme's own reusable "inner page"
header-banner component (romancy_elementor_header_banner widget) —
same shared class on every page that uses it, confirmed on both
/faqs/ and /contact-us/, so one rule covers both (and any other page
built from the same component).
========================================================================== */
.elementor-element-2c79bae,
.inner-banner-section {
margin: 30px !important;
width: calc(100% - 60px) !important;
border-radius: 40px !important;
overflow: hidden !important;
}
/* Contact page: Google Maps embed. Correction — this section
(elementor-element-3d663ce) turned out to be full-bleed edge-to-edge
(elementor-section-full_width), same as the hero, not sitting inside a
boxed column the way it looked — so it needs the same left/right inset
margin as the hero image section, not just rounded corners on the embed
itself. */
.elementor-element-3d663ce {
margin: 30px !important;
width: calc(100% - 60px) !important;
}
.elementor-widget-google_maps .elementor-custom-embed,
.elementor-widget-google_maps .elementor-custom-embed iframe {
border-radius: 40px !important;
overflow: hidden !important;
}
/* Contact form card ("Contact us" on /list-your-property/) — bumped from
20px to sit visually in line with the more generously rounded corners
used everywhere else in this pass (buttons, heroes). */
.listing-form-design {
border-radius: 32px !important;
}
/* Form fields sitewide (CF7 text/email/tel/number inputs, textarea, select)
— bumped from 12px to 16px, matching the same "more generously rounded"
direction as the card/hero radii above so fields don't read as the odd
one out sitting inside much-more-rounded cards. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea,
.select2-selection {
border-radius: 16px !important;
}
/* "Why Choose Aya Boutique" section — the Read More button (#myBtn_1,
styled further up this file) sat flush against the bullet list above it
with no breathing room, and nothing below it either. */
.elementor-element-bb56092 {
margin-top: 32px !important;
margin-bottom: 40px !important;
}
/* "Recent Updates" blog carousel — hidden on the homepage and
/holiday-homes/ per request (both pages render this exact same section,
sharing the literal element id/class since they're built from the same
template content, so one rule covers both). */
.blog-section {
display: none !important;
}
/* "Redefining The Art of Vacationing" section — removed from the homepage
entirely per request. */
.elementor-element-79cd6de {
display: none !important;
}
/* ==========================================================================
Hamburger dropdown (menu-item-5048's sub-menu, opened from the hamburger
icon in the header on every page) — was a barely-styled plain white box
(3px corners, no hover state, flat list). Brought in line with the same
rounded/shadowed/hover-tinted card language used for the My Account
sidebar nav elsewhere in this file.
========================================================================== */
.menu-item-5048 .sub-menu {
border-radius: 20px !important;
padding: 12px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
border: 1px solid rgba(0, 0, 0, 0.05);
min-width: 220px;
}
.menu-item-5048 .sub-menu li {
margin: 2px 0;
list-style: none;
}
.menu-item-5048 .sub-menu li a {
display: block !important;
width: auto !important;
padding: 10px 16px !important;
border-radius: 10px !important;
color: #565A3A !important;
font-weight: 500;
transition: background-color 0.2s ease;
}
.menu-item-5048 .sub-menu li a:hover {
background: rgba(86, 90, 58, 0.08) !important;
}
/* Divider items (menu-item-6603/6604, "Our Collection / Our Locations" |
"About Us / Contact Us / Careers / FAQ" | "My Profile / Login" grouping)
— plain custom-link menu items carrying this class, rendered as a thin
rule instead of a real link. */
.menu-item-5048 .sub-menu li.nav-divider {
height: 1px;
margin: 8px 12px;
padding: 0 !important;
background: rgba(0, 0, 0, 0.08);
pointer-events: none;
}
.menu-item-5048 .sub-menu li.nav-divider a {
display: none !important;
}
/* ==========================================================================
About Us page
========================================================================== */
/* "Tale of Us" section — the two photos (beach family / desert dunes) had
hard square corners; matched to the same 24px radius the homepage's
"Redefining the Art of Vacation" section already uses for its own pair
of photos (.elementor-element-9db31df / -a732e9b, further up this file).
Targeted by these two images' own widget ids rather than the shared
`.about-section` class both pages' sections carry — that class also
wraps a small circular badge image (border-radius: 50%) which forcing to
24px would visibly break. */
.elementor-element-927d54c img,
.elementor-element-1b2a50d img {
border-radius: 24px !important;
}
/* Leadership card ("Khalid El Baba, Executive Director") — flush square
photo with the name/title overlaid at the bottom; rounded to match the
card language used everywhere else on the site. */
.item-team {
border-radius: 20px !important;
overflow: hidden;
}
/* ==========================================================================
Performance / anti-flash (see inc/ayab-performance.php)
========================================================================== */
/* Self-hosted hero video (only rendered once uploads/ayab-video/hero.mp4
exists): fills the rounded hero like Elementor's own background video,
with the poster visible until the first frame decodes. */
body.home .elementor-element-5c69181 .ayab-hero-video-wrap {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
pointer-events: none;
border-radius: 40px;
}
body.home .elementor-element-5c69181 .ayab-hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Hero title + button use Elementor's "fadeInDown" entrance animation, which
keeps them `visibility: hidden` (.elementor-invisible) until Elementor's
JS boots — i.e. after every deferred footer script. Run the same keyframes
in pure CSS instead so the hero copy appears with the first paint. */
body.home .elementor-element-95946e4.elementor-invisible,
body.home .elementor-element-cd95bf6.elementor-invisible {
visibility: visible;
}
/* Same keyframe names + timings Elementor uses (fadeInDown "slow" = 2s,
theme's ova-move-up = ovaMoveUp 1.25s, both delayed 200ms), so when
Elementor's JS later adds its own animation classes nothing restarts. */
body.home .elementor-element-95946e4.elementor-invisible {
animation: fadeInDown 2s 0.2s both;
}
body.home .elementor-element-cd95bf6.elementor-invisible {
animation: ovaMoveUp 1.25s 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
body.home .elementor-element-95946e4.elementor-invisible,
body.home .elementor-element-cd95bf6.elementor-invisible {
animation: none;
}
}