/* ==========================================================================
Local customisations, layered on top of the cloned WordPress styles.
The original CSS is never edited, so anything here can be undone by
deleting a rule.
Contents
1. One shared shell for every form popup (size, border, corners)
2. Plain white background, no food photography
3. Text colours
4. Green close cross
========================================================================== */
:root {
--popup-w: var(--cms-popup-w, 650px);
--popup-h: 500px;
--popup-radius: var(--cms-popup-radius, 32px);
--popup-border: var(--cms-popup-border, 4px);
}
/* --------------------------------------------------------------------------
1. One shared shell.
Before, the five popups agreed on nothing:
.popup-mealplan 984px wide, 6px green border, 50px radius
.popup-idle 80vw wide, 4px WHITE border, 40px radius
.popup-claim 650px wide, no border, square corners
Matching the width alone was not enough — they still rendered at
different heights (600px vs 633px), which is why they still looked like
different sizes. Height is fixed too, so all five are identical boxes.
-------------------------------------------------------------------------- */
.popup-mealplan,
.popup-idle,
.popup-claim {
box-sizing: border-box !important;
width: min(var(--popup-w), calc(100vw - 32px)) !important;
max-width: min(var(--popup-w), calc(100vw - 32px)) !important;
min-width: 0 !important;
height: auto !important;
max-height: min(660px, 92vh) !important;
margin: 0 auto !important;
border: var(--popup-border) solid var(--accent-2) !important;
border-radius: var(--popup-radius) !important;
background-color: #ffffff !important;
/* Clip children to the rounded shell. Without this the square inner
panels poke through and the corners look chipped or see-through. */
overflow: hidden !important;
}
/* Inner wrappers must not draw their own box or re-square the corners.
This applies at any depth — the earlier version only handled direct
children, which left artefacts in the corners of some popups. */
.popup-mealplan > *,
.popup-idle > *,
.popup-claim > * {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}
/* The scrolling region sits inside the shell, so a scrollbar can never cut
across a rounded corner. */
.popup-mealplan > .popup-content,
.popup-idle > .popup-content,
.popup-claim > .popup-content {
height: auto !important;
max-height: min(652px, calc(92vh - 8px)) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* --------------------------------------------------------------------------
2. Plain white, no food photography behind the fields.
-------------------------------------------------------------------------- */
.gb-element-d84dfe46,
.gb-element-dc78a700,
.gb-element-71d40050,
.gb-element-719a6ae6,
.gb-element-1fce025b,
.gb-element-c1229e4b {
background-image: none !important;
background-color: #ffffff !important;
background-blend-mode: normal !important;
}
/* The card that held the fields had its own graphic and a second outline,
which read as a box inside a box. */
.gb-element-ef0bd4de,
.gb-element-a3b1ea03 {
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
max-width: 100% !important;
}
/* --------------------------------------------------------------------------
3. Text colours.
The earlier version forced every element inside a popup to near-black.
That was wrong: the coloured pills carry their own background and need
white text on top. Body copy now uses a softer charcoal, not hard black.
-------------------------------------------------------------------------- */
.popup-mealplan :is(h1, h2, h3, h4, h5, p, label, li, legend),
.popup-idle :is(h1, h2, h3, h4, h5, p, label, li, legend),
.popup-claim :is(h1, h2, h3, h4, h5, p, label, li, legend) {
color: #3a3a42;
}
/* Elements that paint their own background keep white text. */
.gb-element-14d35cac, .gb-element-14d35cac *,
.gb-element-32d91716, .gb-element-32d91716 *,
.gb-element-441b5e66, .gb-element-441b5e66 *,
.gb-element-4bb1adbb, .gb-element-4bb1adbb *,
.gb-element-8713571d, .gb-element-8713571d *,
.gb-element-8c9abc4e, .gb-element-8c9abc4e *,
.gb-element-a3fec72d, .gb-element-a3fec72d *,
.gb-element-b3a94c27, .gb-element-b3a94c27 *,
.gb-element-f1f6983d, .gb-element-f1f6983d * {
color: #ffffff !important;
}
/* Submit button label stays white on the green fill. */
.popup-mealplan .gform_button,
.popup-idle .gform_button,
.popup-claim .gform_button {
color: #ffffff !important;
}
/* Form controls keep their pill shape. */
.popup-mealplan :is(input, select, .gform_button, .select2-selection),
.popup-idle :is(input, select, .gform_button, .select2-selection),
.popup-claim :is(input, select, .gform_button, .select2-selection) {
border-radius: 50px !important;
}
/* --------------------------------------------------------------------------
4. Green close cross on every popup.
The icon is an SVG drawn with fill="currentColor", so setting the colour
is enough. One popup was rendering it white, invisible against white.
-------------------------------------------------------------------------- */
.close-popup,
.close-popup .gb-shape,
.close-popup svg,
.close-popup path {
color: var(--accent-2) !important;
fill: currentColor !important;
}
/* The field group had its own 4px green box, giving a box-inside-a-box.
The popup shell now carries the only green stroke.
.gb-element-d648675b overlay 1511
.gb-element-8b8a109c overlay 1516
(.gb-element-ef0bd4de / .gb-element-a3b1ea03 handled above.) */
.gb-element-d648675b,
.gb-element-8b8a109c {
border: 0 !important;
border-radius: 0 !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/* --------------------------------------------------------------------------
5. Consistent layout INSIDE every popup.
Matching the outer box was not enough — each popup laid its contents out
differently (different padding, different alignment, different field
widths), so they still looked unrelated. One flow for all of them.
-------------------------------------------------------------------------- */
.popup-mealplan > .popup-content,
.popup-idle > .popup-content,
.popup-claim > .popup-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
padding: 18px 20px !important;
text-align: center !important;
}
/* Every direct block inside the popup gets the same width and centring,
so headings, pills and the form all line up on one axis. */
.popup-mealplan > .popup-content > *,
.popup-idle > .popup-content > *,
.popup-claim > .popup-content > * {
width: 100% !important;
max-width: 420px !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
/* The form itself, identical in all six. */
.gform_wrapper {
width: 100%;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
.popup-mealplan .gform_fields,
.popup-idle .gform_fields,
.popup-claim .gform_fields {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
}
.popup-mealplan .gfield,
.popup-idle .gfield,
.popup-claim .gfield {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
/* --------------------------------------------------------------------------
6. The inline form at the bottom of the page: fully white, no green box.
`.form-block` is the field card, used both inline and in popups.
-------------------------------------------------------------------------- */
.form-block,
.form-block > * {
background-color: #ffffff !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.form-block {
border-radius: 24px !important;
padding: 24px 20px !important;
}
/* --------------------------------------------------------------------------
7. Remove the duplicate blue arrows.
Each navigation button contains TWO arrows:
the plugin's blue arrow
The blue one is a real element, not a ::after pseudo-element, which is
why an earlier attempt at this had no effect. Hiding the SVG leaves the
theme chevron alone.
Do NOT set width/height to auto on the button — that lets the two
children stack and makes the control taller (30x92 instead of 30x30).
-------------------------------------------------------------------------- */
.swiper-navigation-icon,
.wp_swiper__button-prev .swiper-navigation-icon,
.wp_swiper__button-next .swiper-navigation-icon {
display: none !important;
}
/* Belt and braces: Swiper's glyph arrow, if the stylesheet ever draws one. */
.swiper-button-prev::after,
.swiper-button-next::after {
content: none !important;
}
/* Keep the button the size of its chevron image. */
.wp_swiper__button-prev,
.wp_swiper__button-next {
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.wp_swiper__button-prev img,
.wp_swiper__button-next img {
display: block;
width: 100%;
height: auto;
}
/* --------------------------------------------------------------------------
8. Remove the leftover decoration inside the popups.
These were designed to sit over the food photograph. With plain white
panels they read as stray grey and green blocks.
a) The grey band at the top. Defined in a MOBILE-ONLY block
(max-width: 899px) as .heading-block { background: rgba(0,0,0,0.3) },
which is why it showed on phones and not on desktop. It existed to
darken the photo behind the heading text.
b) The green wave SVGs. landing-popup-top.svg sits behind the header and
landing-popup-bottom.svg sits at the bottom on z-index 3, above the
content, which is the green layer in the bottom-left corner.
-------------------------------------------------------------------------- */
.popup-mealplan .top-svg-image,
.popup-idle .top-svg-image,
.popup-claim .top-svg-image,
.gb-media-2a02d3c5, /* landing-popup-top.svg — overlays 1501 / 1526 */
.gb-media-85cce1dd, /* landing-popup-top.svg — overlay 1516 */
.gb-media-bbf75eff, /* landing-popup-top.svg — overlay 1511 */
.gb-media-90858987 { /* landing-popup-bottom.svg — the green corner */
display: none !important;
}
/* --------------------------------------------------------------------------
9. "Still Unsure? Watch These…" spacing.
At mobile widths the two video sections were inconsistent:
.gb-text-a517907e (What Our Customers Say) margin-bottom: 31px
.gb-text-6b56554d (Still Unsure) margin-bottom: 0px
so the heading sat directly on top of the video thumbnails. Matched to
the other section, plus a little breathing room above.
-------------------------------------------------------------------------- */
.gb-text-6b56554d {
margin-bottom: 48px !important;
}
.gb-element-6139f9f7 {
padding-top: 56px !important;
padding-bottom: 8px !important;
}
/* --------------------------------------------------------------------------
10. The inline form on the page ("Get Your Limited-Time Electrolytes
Booster").
Its container is a flex column with align-items:center, so the form
shrank to its content width — 200px inside a 500px section on a phone,
which is why the fields looked crushed on top of each other.
Note: this block reuses the same GenerateBlocks class names as the CLAIM
popup (gb-element-d84dfe46 / c1229e4b / e4d64eb9), so rules keyed on
those names affect both. These rules are keyed on .landing-form-wrapper,
which only exists on the page.
-------------------------------------------------------------------------- */
.landing-form-wrapper {
width: 100% !important;
max-width: 480px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.landing-form-wrapper .gb-element-8b8a109c,
.landing-form-wrapper .gb-element-0d8cb8cf,
.landing-form-wrapper .gb-element-7071a07f,
.landing-form-wrapper .gform_wrapper,
.landing-form-wrapper form,
.landing-form-wrapper .gform_fields,
.landing-form-wrapper .gfield {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.landing-form-wrapper .gform_fields {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
/* ==========================================================================
11. Form polish, applied to all six forms
========================================================================== */
/* --- a) Remove the P logo from the top of every form ---------------------- */
.gb-media-10d62184, /* P-Logo-PractiCal.svg — overlays 1501 / 1526 */
.gb-media-976ad978, /* P-Logo-PractiCal.svg — overlay 1511 */
.gb-media-1761b038, /* P-Logo-PractiCal.svg — overlay 1516 + page */
.gb-media-791878e2 { /* landing-page-logo.png — overlays 1501 / 1526 */
display: none !important;
}
/* --- b) The green wave the idle popup uses. A different class from the
other popups, which is why it survived the earlier fix. ----------- */
.gb-media-32f615ad {
display: none !important;
}
/* --- c) Merge the stacked pills into ONE rounded box with two lines ------
Markup is: .heading-block > .header-wrapper (line 1) + .header-wrapper
(line 2). Painting the parent and clearing the children turns two
separate pills into a single box. .heading-block appears exactly six
times, once per form, so this cannot leak onto the page. -------------- */
.heading-block {
background-color: var(--accent) !important; /* brand orange */
border-radius: 26px !important;
padding: 10px 22px !important;
margin: 26px auto 18px !important;
width: -moz-max-content !important;
width: max-content !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
line-height: 1.15;
}
.heading-block .header-wrapper,
.heading-block .header-wrapper-2 {
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
max-width: 100% !important;
}
.heading-block :is(p, span):not(.dhs) {
color: #ffffff !important;
margin: 0 !important;
}
/* the currency symbol keeps its own gap, and takes the pill's white */
.heading-block .dhs { background-color: #ffffff !important; }
/* --- d) Fields: visible, separate, centred ------------------------------ */
.gform_wrapper input:not([type="submit"]):not([type="hidden"]),
.gform_wrapper select,
.gform_wrapper .select2-selection {
border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
background-color: #ffffff !important;
text-align: center !important;
box-sizing: border-box !important;
}
.gform_wrapper input::placeholder { text-align: center !important; }
.gform_wrapper input:focus,
.gform_wrapper select:focus {
border-color: var(--accent-2) !important;
outline: none !important;
}
.gform_wrapper .gform_button { text-align: center !important; }
/* --- e) The page form gets the same green stroke as the popups ---------- */
.landing-form-wrapper {
border: 4px solid var(--accent-2) !important;
border-radius: 32px !important;
background-color: #ffffff !important;
padding: 6px !important;
}
/* --------------------------------------------------------------------------
12. iOS Safari input rendering.
On iPhone the three placeholder strings were all painted inside the first
field while the boxes themselves measured correctly (227px wide, 59px
apart). That is a WebKit paint problem, not a layout one.
-webkit-appearance:none stops Safari applying its own native control
rendering on top of custom borders/radius, and giving each field its own
positioning context keeps text anchored to its own box.
-------------------------------------------------------------------------- */
.gform_wrapper .gfield {
position: relative;
}
.gform_wrapper input:not([type="submit"]):not([type="hidden"]),
.gform_wrapper select {
-webkit-appearance: none !important;
appearance: none !important;
-webkit-text-fill-color: currentColor;
line-height: normal !important;
vertical-align: middle !important;
}
/* --------------------------------------------------------------------------
13. iOS Safari: stop the page form living inside a nested scroller.
The page form's ancestors were:
.popup-content.gb-element-c1229e4b overflow: hidden auto (scrolls!)
.gb-element-d84dfe46 overflow: hidden
.gb-element-8b8a109c overflow: hidden
Those classes are shared with the CLAIM popup, where the inner scroll is
wanted. On the page it is not: it puts native inputs inside an inner
scrolling box, which on iOS makes Safari paint the field text at a stale
offset — all three placeholders landed in the first box.
Scoped to .landing-form-wrapper so the popups keep their scrolling.
-------------------------------------------------------------------------- */
.landing-form-wrapper,
.landing-form-wrapper .popup-content,
.landing-form-wrapper .gb-element-d84dfe46,
.landing-form-wrapper .gb-element-8b8a109c,
.landing-form-wrapper .gb-element-0d8cb8cf,
.landing-form-wrapper .gb-element-7071a07f,
.landing-form-wrapper .gform_wrapper,
.landing-form-wrapper form {
overflow: visible !important;
max-height: none !important;
height: auto !important;
}
/* --------------------------------------------------------------------------
14. Placeholder text drawn by us, not by Safari (see ph-fix.js).
-------------------------------------------------------------------------- */
.ph-fake {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
color: #55585f;
font-size: 16px;
font-family: inherit;
z-index: 2;
}
/* ==========================================================================
15. Full form polish pass (all six forms)
========================================================================== */
/* --- a) The food-doodle pattern (blob-background.png) was painted on
::before pseudo-elements, which earlier background cleanups missed. */
.gb-element-8b8a109c::before,
.gb-element-d648675b::before,
.gb-element-ef0bd4de::before,
.gb-element-a3b1ea03::before,
.gb-element-d84dfe46::before,
.gb-element-dc78a700::before,
.gb-element-71d40050::before,
.gb-element-719a6ae6::before {
display: none !important;
background-image: none !important;
content: none !important;
}
/* --- b) White corner notches on the page form: the inner white panels were
square, poking over the wrapper's rounded green stroke. Round them
to match (32px shell − 4px border − padding). */
.landing-form-wrapper .popup-content,
.landing-form-wrapper .gb-element-d84dfe46 {
border-radius: 24px !important;
overflow: visible !important;
}
/* --- c) One close button, one place, every popup: top-right corner,
proper 36px tap target, green, above everything. */
.gb-overlay .popup-mealplan,
.gb-overlay .popup-idle,
.gb-overlay .popup-claim {
position: relative !important;
}
.gb-overlay .close-popup {
position: absolute !important;
top: 12px !important;
right: 14px !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 24px !important; /* svg is sized in em */
z-index: 20 !important;
}
/* --- d) Pill headings: same size everywhere, always centred. 16px and
left-aligned in some popups before. */
.heading-block p,
.header-wrapper p,
.header-wrapper-2 p {
font-size: 21px !important;
line-height: 1.25 !important;
text-align: center !important;
font-weight: 600 !important;
}
.gb-overlay .header-wrapper,
.gb-overlay .header-wrapper-2 {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/* --- e) Field text was 14px — small, and below the 16px threshold that
makes iOS zoom the page when a field is tapped. */
.gform_wrapper input:not([type="submit"]):not([type="hidden"]),
.gform_wrapper select,
.gform_wrapper .gform_button {
font-size: var(--cms-field-font, 16px) !important;
}
.ph-fake { font-size: 16px; }
/* --- f) Consistent vertical rhythm inside every form. */
.gform_wrapper .gform_fields {
row-gap: 12px !important;
}
/* --- g) Phone validation error style (used by phone-validate.js). */
.gfield .phone-error {
display: block;
color: #c0271f;
font-size: 13px;
text-align: center;
margin-top: 6px;
}
.gform_wrapper input.phone-invalid {
border-color: #c0271f !important;
}
/* --- h) Dead space above the fields: .gb-element-8b8a109c forced
min-height:300px while its content is ~220px, and the slack was
centred as empty space. Let content set the height. */
.gb-element-8b8a109c,
.gb-element-d648675b {
min-height: 0 !important;
}
.landing-form-wrapper .gb-element-0d8cb8cf {
padding-top: 6px !important;
}
/* ==========================================================================
16. Consultation-popup fixes (and the same faults elsewhere)
========================================================================== */
/* --- a) The close cross was absolutely positioned against an inner element
INSIDE the scrolling content, so it scrolled away with it. Make those
inner wrappers static; the panel itself (position:relative, does not
scroll) becomes the anchor, so the cross stays pinned top-right. */
.gb-overlay .popup-content,
.gb-element-eb638ea2,
.gb-element-530cb041,
.gb-element-e5b9648a,
.gb-element-261cc2b6 {
position: static !important;
}
/* --- b) Same pill width in every form, so no box looks bigger than the
rest; multi-line text tightened so three lines stay compact. */
.heading-block {
width: 100% !important;
max-width: 330px !important;
}
.heading-block p,
.header-wrapper p,
.header-wrapper-2 p {
line-height: 1.2 !important;
}
/* --- c) Dropdown centring: iOS ignores text-align on , so the
chosen option is drawn by us in a centred span (select-center.js)
and the select's own text is hidden. The native picker still opens
and its list is unaffected. */
.gform_wrapper select {
color: transparent !important;
}
.gform_wrapper select option {
color: #3a3a42 !important;
}
.sel-fake {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
color: #3a3a42;
font-size: 16px;
z-index: 2;
padding: 0 34px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- d) Compact the popups: the field card carried 82px of margin+padding,
Gravity Forms' hidden honeypot field still took ~60px of layout
space, and the 26px heading top-margin (for the page form) applied
inside popups too. */
.gb-overlay .form-block {
margin: 8px 0 !important;
padding: 14px 12px !important;
}
.gform_validation_container,
.gfield.gform_validation_container {
display: none !important;
height: 0 !important;
}
.gb-overlay .heading-block {
margin-top: 12px !important;
}
/* --- e) Gravity Forms hides its internal fields (like Plan Interest) with
visibility:hidden, which still reserves their space — that was the
dead gap between the dropdown and Submit. Collapse them entirely;
display:none inputs still submit their values. */
.gfield.gfield_visibility_hidden {
display: none !important;
}
.gform_footer {
margin-top: 22px !important;
padding-top: 0 !important;
}
/* ==========================================================================
17. Section polish
========================================================================== */
/* --- a) Team photos: the 400x600 portraits showed down to the hips.
Crop to roughly head-to-chest — arms still visible — by giving the
image a shorter box and letting object-fit cut the bottom. */
/* Crop keeps head to below the elbows (full arms visible), cuts hips.
The light-green layer is sized relative to the image, so it is raised
from 80% to 88% to keep the person inside the box. */
.gb-media-d04a0bdd {
aspect-ratio: 400 / 500 !important;
width: 90% !important;
height: auto !important;
object-fit: cover !important;
object-position: top center !important;
}
.gb-element-89a62c29 {
height: 88% !important;
}
/* --- c) "Still Unsure" slider: the first video sat flush against the
screen edge while slides have 30px between them. Give the row the
same breathing room at its edges. */
.gb-element-a4efc7e2 .swiper {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* --- d) "Explore Our Meal Plans" badges: on phones the circles were 40px
wide with 5px text — unreadable. Proper sizes, and the green rule
under each description moves right with the bigger circle. */
@media (max-width: 498px) {
.row-badge { width: 76px !important; }
.row-badge__inner {
font-size: 11.5px !important;
line-height: 1.15 !important;
padding: 0 5px !important;
}
.row-desc { font-size: 14px !important; line-height: 1.35 !important; }
.row-check svg { width: 32px !important; height: 32px !important; }
.plan-row { gap: 12px !important; }
}
/* --- f) The consultation bar sat high in its green band (much more green
below than above). Balance the band's padding. */
.gb-element-16dd22d9 {
padding-bottom: 12px !important;
}
/* --- g) Badge labels must never break inside a word (Sustainabl-e).
Slightly wider circle + tighter font so the longest words fit. */
.row-badge__label {
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: manual !important; /* break at explicit hyphens only */
}
@media (max-width: 498px) {
.row-badge { width: var(--cms-badge-size, 82px) !important; }
.row-badge__inner { font-size: var(--cms-badge-font, 10.5px) !important; }
}
/* (Taz/Gloria per-person tweaks removed: uniform presentation wins.) */
/* --- Wave fix, the real one. The curve svg is 32px tall but its shape box
is only 22-24px with overflow:hidden — the deepest 8-10px of the
curve (bottom right) were clipped to a straight edge. This defect
exists on the original site too. Show the whole curve. */
.gb-shape-c85956b5,
.gb-shape-baaa2386 {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
line-height: 0 !important;
}
.gb-shape-c85956b5 svg,
.gb-shape-baaa2386 svg {
display: block !important;
/* Natural curve depth (~32px), matching the gentle top wave. The 50px
section overlap is reduced to 30px below so the mask still covers all
of it — no green leaks, no stretched-looking curve. */
height: var(--cms-wave-h, 32px) !important;
margin-bottom: -2px !important;
}
/* --- Science slider: breathing room at the row edges so the first slide
and its "Unlimited Variety" caption don't touch the screen edge. */
.gb-element-629ac912 .swiper,
.gb-element-629ac912 .swiper-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Thin green line at section joints: inline svg leaves a baseline gap that
shows the coloured band behind. Block display + zero line-height only —
no size overrides (those broke icons last time). */
.gb-shape--divider {
line-height: 0 !important;
font-size: 0 !important;
}
.gb-shape--divider svg {
display: block !important;
}
/* Consultation bar sat low in its band (~70px green above, ~39 below on a
real phone). Shift up to balance. */
.gb-element-16dd22d9 .gb-element-2e0c7553 {
margin-top: 33px !important;
margin-bottom: 47px !important;
}
/* Shrink the band overlap from 50px to 30px so the natural-depth mask
covers it fully at every width. */
.landing-form.gb-element-baa6b552 {
margin-top: -30px !important;
}
.gb-element-cfe2a408 {
margin-top: -30px !important;
}
/* Hairline of band green at the top joints (fractional-pixel boundary):
pull each band's top divider up 1px so white overlaps the seam. */
.gb-shape-3b1e8541,
.gb-shape-13b6976b,
.gb-shape-2ce20ee1,
.gb-shape-a5ac4c00 {
top: -1px !important;
}
/* START NOW form: "I am interested in" appeared twice — as a label above
the dropdown and as the dropdown's own placeholder option. Keep only the
one inside the dropdown. */
.gform_wrapper .gfield--type-select .gfield_label {
display: none !important;
}
/* --------------------------------------------------------------------------
Country-code phone fields (intl-tel-input): flag + dial code in a
compact chip inside the pill; country list opens as a fullscreen sheet.
-------------------------------------------------------------------------- */
.iti {
--iti-path-flags-1x: url("/assets/vendor/img/flags.webp");
--iti-path-flags-2x: url("/assets/vendor/img/flags@2x.webp");
--iti-path-globe-1x: url("/assets/vendor/img/globe.webp");
--iti-path-globe-2x: url("/assets/vendor/img/globe@2x.webp");
width: 100%;
display: block;
}
.iti input[type="tel"] {
width: 100% !important;
text-align: left !important;
padding-left: 112px !important;
}
.iti .iti__country-container {
z-index: 6 !important;
}
/* the tappable flag + code chip.
Gravity Forms paints every in a form as a big green primary
button — the chip is a , hence the giant green blob. Neutralise
that treatment entirely. */
.gform_wrapper .iti button.iti__selected-country,
.iti .iti__selected-country {
all: unset;
cursor: pointer;
display: flex;
align-items: center;
height: 100%;
z-index: 5;
padding: 0 0 0 16px;
background: transparent !important;
border-radius: 50px 0 0 50px;
}
.iti .iti__selected-country-primary {
padding: 0;
gap: 6px;
}
.iti__selected-dial-code {
font-size: 14px !important;
font-weight: 500 !important;
color: #55585f !important;
margin-left: 6px;
}
.iti__arrow {
border-top-color: #9aa0a8;
margin-left: 4px;
}
/* thin separator between chip and the number */
.iti .iti__selected-country::after {
content: "";
width: 1px;
height: 22px;
background: rgba(0, 0, 0, 0.15);
margin-left: 10px;
}
/* the fullscreen country sheet must sit above the popups (z 99999) */
.iti--container,
.iti--fullscreen-popup {
z-index: 2147483000 !important;
}
.iti__dropdown-content {
border-radius: 14px;
font-size: 15px;
}
.iti__country {
padding: 10px 14px;
}
/* Phone input metrics. The global "centre all field text" rule outranked
the earlier left-align on specificity, so the number kept centring and
jumping as formatting kicked in. These rules outrank it. */
.gform_wrapper .iti input[type="tel"] {
text-align: left !important;
height: 47px !important;
min-height: 47px !important;
max-height: 47px !important;
box-sizing: border-box !important;
/* iOS-proof centring for the typed value: line-height equal to the box
height, zero block padding — the one method iOS reliably honours */
padding: 0 16px 0 112px !important;
line-height: 47px !important;
font-size: 16px !important;
margin: 0 !important;
}
.gform_wrapper .iti input[type="tel"]::placeholder {
text-align: left !important;
}
/* the chip must match the 47px pill exactly so nothing shifts */
.gform_wrapper .iti .iti__country-container {
top: 0 !important;
bottom: 0 !important;
height: 47px !important;
}
/* drawn phone placeholder: flex-centred over the input, after the chip */
.iti { position: relative; }
.ph-fake-tel {
position: absolute;
top: 0;
bottom: 0;
left: 112px;
right: 16px;
display: flex;
align-items: center;
justify-content: flex-start;
pointer-events: none;
color: #55585f;
font-size: 16px;
z-index: 4;
white-space: nowrap;
overflow: hidden;
}
/* Top (rising) wave depth — CMS tunable. Default 18px matches the current
look; raising it reveals more of the curve's crest. */
.gb-shape-3b1e8541,
.gb-shape-13b6976b,
.gb-shape-2ce20ee1,
.gb-shape-a5ac4c00 {
height: var(--cms-wave-top-h, 18px) !important;
overflow: hidden !important;
line-height: 0 !important;
}
/* Thank-you screen shown in place of the form after a successful submit. */
.lead-thanks { text-align: center; padding: 18px 10px; }
.lead-thanks__tick {
width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%;
background: var(--accent-2); color: #fff; font-size: 28px; line-height: 54px;
}
.lead-thanks__title { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: #3a3a42; }
.lead-thanks__body { font-size: 15px; line-height: 1.5; color: #55585f; margin: 0 auto; max-width: 380px; }
.lead-thanks__wa {
display: inline-block; margin-top: 14px; padding: 11px 20px; border-radius: 50px;
background: #25d366; color: #fff !important; font-weight: 700; text-decoration: none;
}
/* --------------------------------------------------------------------------
Official UAE Dirham symbol (CBUAE 2025), replacing the text "AED".
Drawn as a mask so it takes currentColor: correct on the orange pills
(white text) and on dark body copy alike, with no second asset.
Guideline compliance:
- height = the font's digit height, measured for Euclid Circular B
at 0.722em, sitting on the baseline (never superscript)
- width follows the artwork's own 344.84 x 299.91 ratio, so it is
never stretched
- small gap before the numeral
- never shown alongside the letters "AED"
-------------------------------------------------------------------------- */
.dhs {
display: inline-block;
width: 0.830em; /* 0.722em x 1.1498 aspect - no distortion */
height: 0.722em; /* matches digit height exactly */
/* !important: the pill rule sets margin:0 on inner spans, which would
otherwise glue the symbol to the numeral */
margin-right: 0.09em !important;
margin-left: 0 !important;
background-color: currentColor;
-webkit-mask: url('/assets/uae-dirham.svg') no-repeat center / contain;
mask: url('/assets/uae-dirham.svg') no-repeat center / contain;
vertical-align: baseline;
flex-shrink: 0;
}
/* Currency symbol and numeral must never be split across lines. */
.nowrap-price { white-space: nowrap; }
/* --------------------------------------------------------------------------
Square up the form popup contents.
Two theme quirks made the heading and the fields disagree:
.top-block padding-left:20px, padding-right:0 -> heading 20px right
.form-block flush left in its container -> fields 15px left
Everything now shares one centre line.
-------------------------------------------------------------------------- */
.popup-mealplan .top-block,
.popup-idle .top-block,
.popup-claim .top-block,
.landing-form-wrapper .top-block {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* The field card carries a fixed 350px width from the page builder and sits in
a 380px grid cell, so it hugs the left edge. Auto margins can't centre it
(the grid track sizes to that explicit width, leaving no free space to
distribute), so give it the full cell instead. */
.popup-mealplan .form-block,
.popup-idle .form-block,
.popup-claim .form-block,
.landing-form-wrapper .form-block {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Desktop only: the popup form sits in a two-column grid left over from a
wider layout — `grid-template-columns: 350px 350px` inside a 380px box.
Column two holds the landing-page logo, which lands outside the popup and
has never been visible, but its dead track pushes the form 30px left of
centre. Drop that cell and give the form the single full-width column.
Phone already lays this out correctly, so it is left alone. */
@media (min-width: 900px) {
.popup-mealplan .top-block .gb-element-7850f83a,
.popup-idle .top-block .gb-element-7850f83a,
.popup-claim .top-block .gb-element-7850f83a {
grid-template-columns: minmax(0, 1fr) !important;
}
.popup-mealplan .top-block .gb-element-1e427c5f,
.popup-idle .top-block .gb-element-1e427c5f,
.popup-claim .top-block .gb-element-1e427c5f {
display: none !important;
}
}
/* Desktop only: let the inactivity popup be as tall as its contents.
It carries more than the other two forms - an "Or" divider, a WhatsApp
line and the WhatsApp icon - so at the shared 660px cap its content ran
66px over: the icon hung below the panel edge and an inner scrollbar
appeared. That scrollbar also ate width on the right, which shifted the
centred contents a few pixels left. Sizing the panel to its content
removes the scrollbar, and with it both problems.
Phone is left alone; it already fits and scrolls as intended there. */
@media (min-width: 900px) {
.popup-idle {
max-height: 92vh !important;
}
.popup-idle > .popup-content {
max-height: calc(92vh - 8px) !important;
}
/* 50px of dead space above the heading was most of the excess. */
.popup-idle .top-block {
padding-top: 20px !important;
}
}
/* The line down the right of the enquiry form's fields.
The two enquiry form cards (overlays 1501 and 1526) are set to
overflow-y: scroll, not auto, so a scrollbar track is drawn permanently
even though there is nothing to scroll. They carry a `hide-scrollball`
class that was meant to suppress it, but no rule for that class exists
anywhere in the theme, so nothing ever hid it.
Chrome on macOS uses overlay scrollbars (zero width, invisible), which
is why this never showed up in testing - but iOS Safari and Windows draw
a real track, and it lands right beside the fields. The popup itself
already scrolls, so this inner scroller is not needed. */
.hide-scrollball,
.popup-mealplan .form-block,
.popup-idle .form-block,
.popup-claim .form-block,
.landing-form-wrapper .form-block {
overflow: auto !important; /* was `scroll`: only scroll if truly needed */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge */
}
.hide-scrollball::-webkit-scrollbar,
.popup-mealplan .form-block::-webkit-scrollbar,
.popup-idle .form-block::-webkit-scrollbar,
.popup-claim .form-block::-webkit-scrollbar,
.landing-form-wrapper .form-block::-webkit-scrollbar {
width: 0;
height: 0;
display: none; /* Safari / Chrome */
}
/* Chris #22: the claim box font was too small to read on a phone.
Desktop was already fine (offer text 35px, CLAIM 30px). On a phone the
same box rendered at 11px with a 10px CLAIM button. Raised to 15px/13px,
which is the largest that keeps the offer line at two lines with no
overflow (16px starts to crowd the button).
The sticky offer strip at the top of the page is deliberately NOT
enlarged: it is already exactly at its two-line limit, so any increase
pushes it to three lines and breaks the rule in Chris #10. */
@media (max-width: 899px) {
.gb-element-96d79fd0 .gb-text-86079b53 {
font-size: 15px !important;
line-height: 1.3 !important;
}
.gb-element-96d79fd0 .gb-text-e241bde2 {
font-size: 13px !important;
}
}
/* Keep the break between the two lines sensible. At 15px the offer split as
"BACK TO DUBAI OFFER 1,857: 4" / "Weeks, 2 Meals, 1 Snack", orphaning the
4 away from Weeks. Balancing splits it at the colon instead. Browsers
without text-wrap simply keep their normal break. */
.gb-element-96d79fd0 .gb-text-86079b53,
.gb-text-cac48d69 {
text-wrap: balance;
}
/* --------------------------------------------------------------------------
Speed. Nothing here changes any picture or its quality - only WHEN
things download.
-------------------------------------------------------------------------- */
/* Below-the-fold backgrounds wait until the visitor approaches them.
lazy-bg.js lifts the blanking by adding bg-lazy-ready; the original
inline style / stylesheet rule then applies untouched. On any failure
the load handler reveals everything, so pictures can never go missing.
(~2.5MB: ten plan cards at ~230KB each plus the doodle pattern.) */
.mpq-card__media:not(.bg-lazy-ready),
.gb-element-ea944161:not(.bg-lazy-ready)::before {
background-image: none !important;
}
/* The first hero slide paints its own 279KB background and is then
entirely covered by .gb-element-4438ca1a, which spans the identical box
on desktop and phone (measured 1440x531 and 393x338 on both layers) and
paints an opaque cover image of its own. The underneath image has never
been visible to anyone; stop downloading it. */
.wp-swiper__slide[data-tab="slide-1"] {
background-image: none !important;
}
/* At mid desktop widths the offer strip's text wraps to two lines and sits
flush against the bar's bottom edge with zero padding, which reads as
cramped and collides with anything near the boundary. A little air, only
at the widths where the wrap happens; 1440+ and phones are untouched. */
@media (min-width: 900px) and (max-width: 1299px) {
.gb-element-a628891e {
padding-bottom: 7px;
}
}
the theme's own chevron