/**
* EWL Pet Club — front-end styles.
*
* Two jobs:
* 1. the join / login cards, which the plugin owns end to end;
* 2. a handful of helper classes the Elementor landing page hangs off, so the
* client can retype every word and swap every photo without touching CSS.
*/
:root {
--ewl-navy: #0f172a;
--ewl-teal: #056a82;
--ewl-teal-deep: #0b4f66;
--ewl-orange: #f27947;
--ewl-orange-deep: #e0622f;
--ewl-green: #67901c;
--ewl-cream: #fcf6f0;
--ewl-aqua: #e9f8f9;
--ewl-line: #cae6e8;
--ewl-slate: #454f5e;
--ewl-muted: #7c8794;
--ewl-radius: 16px;
--ewl-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
--ewl-shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.16);
}
/* The mockup runs the layout almost to the edge of the page, and that is what
gives the pets photo its size (client note, 2 Sep). Two ceilings had it at
1200px: Astra's page container and Elementor's kit width. `ewl-club-page`
keeps the wider one to the club's own pages; doubling the class beats
Elementor's own `.e-con` rule. */
@media (min-width: 1025px) {
.ewl-club-page .ast-container {
max-width: 1400px;
}
.e-con.ewl-hero > .e-con-boxed,
.e-con.ewl-band,
.e-con.ewl-band-closing {
--container-max-width: 1320px;
}
}
/* --------------------------------------------------------------- hero band */
/* The mockup sets the whole page on white; the beach arrives with the pets
photo, which carries its own background and fades out at its cut edges. */
.ewl-hero {
overflow-x: clip;
background: #fff;
}
/* The pets column centres its children, which left the photo at its own
intrinsic width instead of the column's; it has to be told to fill. */
.ewl-hero .ewl-pets {
width: 100%;
}
/* The mockup runs the beach behind the join card, so the photo's right-hand
fade never has to finish in the open. The column is widened and pulled back
by the same amount, which keeps the row at 100% while letting the photo
carry on under the card. */
@media (min-width: 1025px) {
/* The photograph is taken out of the flow and run off the right-hand edge
of the page: the row is then only as tall as the copy, so the rewards
strip comes up under the four steps and sits on the sand, and nothing
clips or fades the beach on its way out. */
.ewl-hero .ewl-toprow {
position: relative;
}
.ewl-hero .ewl-petcol {
position: absolute;
z-index: 0;
top: 0;
left: 40%;
width: 126%;
margin: 0;
}
.ewl-hero .ewl-copy,
.e-con.ewl-rewards {
position: relative;
z-index: 1;
}
/* The two edges that meet the white page are dissolved here rather than
baked into the file, so the fade survives the photo being swapped in
Elementor. The top is left alone — it meets the site header — and so is
the right, where the picture runs off the page. */
.ewl-hero .ewl-pets img {
-webkit-mask-image:
linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.14) 3%, rgba(0, 0, 0, 0.42) 6.5%, rgba(0, 0, 0, 0.68) 10%, rgba(0, 0, 0, 0.86) 13%, rgba(0, 0, 0, 0.96) 16%, #000 19%),
linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 2.5%, rgba(0, 0, 0, 0.45) 5.5%, rgba(0, 0, 0, 0.72) 8.5%, rgba(0, 0, 0, 0.9) 11%, #000 14%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.14) 3%, rgba(0, 0, 0, 0.42) 6.5%, rgba(0, 0, 0, 0.68) 10%, rgba(0, 0, 0, 0.86) 13%, rgba(0, 0, 0, 0.96) 16%, #000 19%),
linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 2.5%, rgba(0, 0, 0, 0.45) 5.5%, rgba(0, 0, 0, 0.72) 8.5%, rgba(0, 0, 0, 0.9) 11%, #000 14%);
mask-composite: intersect;
}
/* "Already a member? Login" floats over the top-right corner instead of
taking a row of its own, so the logo starts on the same line as it. */
.ewl-hero > .e-con-boxed > .e-con-inner {
position: relative;
}
.ewl-hero .ewl-topbar {
position: absolute;
z-index: 4;
top: 0;
right: 0;
left: 0;
width: auto;
}
.ewl-joincol {
position: relative;
z-index: 2;
/* The card's right edge lines up with the Login button above it —
they share the container's right edge, so nothing is subtracted
here. An earlier version inset it 34 px to leave a sliver of beach
down the outside; the client wants the two in one column instead. */
width: 30.5%;
/* The two columns come to 98.5 %, so a sliver of free space is left
over at the end of the row. Sending it to the other side of the
card puts the card flush against the container edge — and so level
with the Login button — without inventing a width that only adds
up at one screen size. */
margin-right: 0;
margin-left: auto;
}
}
.ewl-hero .ewl-pets img {
display: block;
width: 100%;
height: auto;
}
/* the phone layout pins the "100% FREE" badge to this box */
.ewl-hero {
position: relative;
}
/* The art carries the whole beach so the join card can sit on it. Below the
desktop breakpoint the card stacks underneath, so only the pets' half of the
photo is wanted; it is cropped to them and re-feathered on the cut edge. */
@media (max-width: 1024px) {
/* The photo's framing is set in the builder, where an offset entered on
desktop cascades down to every smaller screen unless a value is given
for each one. A left nudge that reads well beside the copy at 1440px is
most of a phone's width, which pushed the picture clean off the screen;
below the split layout the photo has its own column and needs no offset
at all. The doubled class beats Elementor's per-element rule without
reaching for !important. */
.ewl-hero .ewl-petcol .ewl-pets.ewl-pets {
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.ewl-hero .ewl-pets img {
aspect-ratio: 301 / 708;
object-fit: cover;
object-position: 22% bottom;
-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 15% 76%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 15% 76%, rgba(0, 0, 0, 0) 100%);
}
}
/*
* Thin top row: "Already a member? [ Login ]". It sits over the hero
* photograph, where navy on a pale sky all but disappears, so it is set in
* white with a hard outline that carries it over both the sky and the palms.
*
* The colour needs !important: Elementor writes its own
* `.elementor-NNNN .elementor-element.elementor-element-XXXX
* .elementor-heading-title` for the widget, which outranks anything sane here,
* and the id in it would change if the page were ever rebuilt.
*/
.ewl-topbar .elementor-heading-title,
.ewl-topbar p {
color: #fff !important;
font-weight: 800;
text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.62),
1px -1px 0 rgba(0, 0, 0, 0.62),
-1px 1px 0 rgba(0, 0, 0, 0.62),
1px 1px 0 rgba(0, 0, 0, 0.62),
0 2px 6px rgba(0, 0, 0, 0.45);
}
/* ------------------------------------------------------------ hero copy bits */
.ewl-script,
.ewl-script p {
font-family: "Caveat", "Segoe Script", cursive;
font-size: 42px;
line-height: 1.15;
font-weight: 700;
margin: 0;
}
.ewl-script--orange,
.ewl-script--orange p {
color: var(--ewl-orange);
}
.ewl-script--teal,
.ewl-script--teal p {
color: var(--ewl-teal);
}
.ewl-script--rule::after {
content: "";
display: block;
width: 76px;
height: 3px;
margin-top: 6px;
border-radius: 3px;
background: var(--ewl-teal);
opacity: 0.55;
}
.ewl-freebadge .elementor-heading-title {
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
max-width: 690px;
gap: 22px;
padding: 12px 46px 12px 22px;
border-radius: 12px;
background: var(--ewl-green);
color: #fff;
font-size: 38px;
line-height: 1.1;
letter-spacing: 0.2px;
/* the mockup dissolves the right-hand end of the bar into the page rather
than ending it on a hard edge — the mask takes the whole bar with it */
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 80%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(90deg, #000 0%, #000 80%, rgba(0, 0, 0, 0) 100%);
}
.ewl-freebadge .elementor-heading-title::before {
content: "";
width: 48px;
height: 48px;
flex: 0 0 48px;
background: currentColor;
-webkit-mask: var(--ewl-gift) center / contain no-repeat;
mask: var(--ewl-gift) center / contain no-repeat;
}
:root {
--ewl-gift: url("data:image/svg+xml,");
}
/* The four "Care · Earn · Redeem · Win" steps */
.ewl-step .elementor-icon-box-wrapper {
text-align: center;
}
.ewl-step .elementor-icon-box-title {
font-family: "Poppins", sans-serif;
font-size: 17px;
line-height: 1.3;
font-weight: 700;
color: var(--ewl-navy);
margin: 8px 0 0;
}
/* The mockup has no rule above the steps, and the ones between them are
twice the weight we had (client note, 2 Sep). */
.ewl-steps {
padding-top: 0;
}
.ewl-step .elementor-icon {
line-height: 1;
}
.ewl-step .elementor-icon svg {
width: 1em;
height: 1em;
}
.ewl-steps > .e-con-inner > .elementor-element + .elementor-element,
.ewl-steps > .elementor-element + .elementor-element {
border-left: 1px solid rgba(15, 23, 42, 0.20);
}
/* ------------------------------------------------------------------ ribbon */
/* A banner with pointed ends that sits across the top edge of the rewards
card. The mockup rounds every corner and the two points, and rings the
whole thing in white so it reads over the photos — none of which a
clip-path can do, so the shape is an SVG stretched through border-image:
the 26px end caps stay put and only the plain middle band is stretched,
which keeps the corners true whatever the client retypes here. */
:root {
--ewl-ribbon: url("data:image/svg+xml,");
}
.ewl-ribbon .elementor-heading-title {
display: inline-flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
height: 40px;
padding: 0 9px;
border-style: solid;
border-width: 0 26px;
border-color: transparent;
border-image-source: var(--ewl-ribbon);
border-image-slice: 0 26 fill;
border-image-width: 0 26px;
border-image-repeat: stretch;
color: #fff;
font-size: 17px;
filter: drop-shadow(0 3px 5px rgba(2, 48, 74, 0.22));
}
/* --------------------------------------------------------- reward preview */
/* One white card holding three photo tiles, as the mockup has it — the tiles
themselves are transparent, only their photos are rounded. */
.ewl-rewards {
width: 100%;
}
/* Nearly half the banner hangs below the card's top edge, so it covers the
first few pixels of the photos — the card's own padding is only a hair. */
.e-con.ewl-rewards > .ewl-ribbon.elementor-widget {
position: relative;
z-index: 3;
/* Elementor zeroes every widget's block margin from a three-class selector,
so the pull-up has to out-rank it or the banner just sits above the card. */
margin-bottom: -18px;
}
.ewl-rewardrow {
background: #fff;
border-radius: 18px;
padding: 7px 8px 12px;
box-shadow: var(--ewl-shadow);
}
.ewl-rewardrow > .elementor-element {
flex: 1 1 0;
width: auto;
min-width: 0;
}
.ewl-rewardcard .elementor-widget-image img {
display: block;
width: 100%;
height: 178px;
border-radius: 10px;
object-fit: cover;
/* The disc rides up into the bottom of the photograph, so how that edge
reads depends entirely on what the photograph happens to show there:
the beach tile ends in pale sand and dissolves into the card, while the
dining and pet tiles end in a dark tablecloth and grey stone and cut a
hard line straight above the disc. Same geometry, three different
readings. Softening the last few per cent of every photo gives all
three the beach tile's join. */
-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 3%, rgba(0, 0, 0, 0.7) 7%, #000 13%);
mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 3%, rgba(0, 0, 0, 0.7) 7%, #000 13%);
}
/* Elementor hangs the icon and the text from the same top edge, so a 58 px
disc beside a 42 px block of two lines ends up eight pixels low. The mockup
centres them against each other; the doubled class is there to outrank
Elementor's own alignment rule rather than reach for !important.
Both of these are the wide row's geometry and are kept off the phone, where
the tiles are a different shape and the builder's own values apply. */
@media (min-width: 768px) {
.ewl-rewardcard.ewl-rewardcard .elementor-widget-icon-box .elementor-icon-box-wrapper {
align-items: center;
}
}
/* The strip under the photo is exactly the disc plus its padding, so the
padding is what centres the disc in it. The builder's value is 14 above and
10 below, which leaves the disc two pixels low; the mockup has equal gaps
(11 and 11 on a 51 px disc). The left inset is the mockup's 0.333 of a disc
rather than 0.379. Overridden here rather than in the page JSON so the
client's own builder edits are not rewritten.
The left inset is measured from the photo's own left edge, not from the
panel's — the panel has padding of its own, and measuring from the wrong one
is what put the disc twice as far in as the mockup has it. In the mockup the
disc starts 10 px right of the photo edge on a 51 px disc, i.e. 0.196, which
on our 58 px disc is 11 px. */
@media (min-width: 768px) {
.ewl-rewardrow .ewl-rewardcard.ewl-rewardcard .elementor-widget-icon-box {
/* No padding underneath: the panel already has 12 px of its own below
the tiles, and a second 12 px here stacked with it, leaving twice as
much white under the disc as above it. The mockup has them equal. */
padding: 12px 4px 0 11px;
}
/* The disc rides up into the bottom edge of the photograph rather than
sitting squarely in the white below it — which is what the rounded
notch in the photo's bottom-left corner is there for. The client
arrived at these two values in the browser; they are kept verbatim so
the result is the one he approved. */
.ewl-rewardrow .ewl-rewardcard.ewl-rewardcard .elementor-widget-icon-box .elementor-icon {
margin-top: -15px;
margin-left: 5px;
}
}
.ewl-rewardcard .elementor-icon-box-title {
font-size: 17px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.1px;
color: var(--ewl-navy);
margin: 0 0 3px;
}
.ewl-rewardcard .elementor-icon-box-description {
font-size: 13px;
line-height: 1.4;
letter-spacing: -0.1px;
color: var(--ewl-muted);
margin: 0;
}
.ewl-more-rewards {
margin-top: 14px;
}
/* ------------------------------------------------------------- trust tiles */
.ewl-trust .elementor-icon-box-title {
max-width: 290px;
margin: 16px auto 10px;
font-size: 25px;
line-height: 1.2;
font-weight: 700;
color: var(--ewl-teal-deep);
}
.ewl-trust .elementor-icon-box-description {
max-width: 195px;
margin: 0 auto;
font-size: 19px;
line-height: 1.45;
color: var(--ewl-slate);
}
.ewl-trust + .ewl-trust {
border-left: 1px solid rgba(15, 23, 42, 0.08);
}
/* The join card sits at the top of the right-hand column and ends where its
content ends. It used to be stretched to run level with the rewards strip,
which left a pool of empty white under the terms line once the card's own
rhythm was set from the mockup; the client wants it to stop at the last
line. The generous internal spacing stays — that is measured off the
mockup, where the field pitch is a fifth of the card's width. */
@media (min-width: 1025px) {
.ewl-joincol > .e-con-inner {
height: auto;
}
.ewl-joincol .elementor-widget-shortcode {
display: flex;
/* content height, not the column's — see the note above */
flex: 0 0 auto;
align-self: stretch;
}
/* Elementor wraps a shortcode widget's output in .elementor-widget-container
in some builds and hands you .elementor-shortcode directly in others, so
both are named here. Either way it is a flex item that would otherwise
size to its content and leave the card narrower than its column. */
.ewl-joincol .elementor-widget-shortcode > .elementor-widget-container,
.ewl-joincol .elementor-widget-shortcode > .elementor-shortcode {
display: flex;
flex: 0 0 auto;
width: 100%;
}
.ewl-joincol .ewl-card--join {
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
}
.ewl-joincol .ewl-card--join .ewl-form {
display: flex;
flex: 0 0 auto;
flex-direction: column;
}
.ewl-joincol .ewl-card {
padding: 40px 32px 32px;
}
.ewl-joincol .ewl-card__flash {
margin-bottom: 22px;
font-size: 30px;
}
.ewl-joincol .ewl-card__badge {
width: 76px;
height: 76px;
margin-bottom: 18px;
}
.ewl-joincol .ewl-card__title {
margin-bottom: 16px;
font-size: 36px;
}
.ewl-joincol .ewl-card__sub {
margin-bottom: 34px;
max-width: 320px;
font-size: 17.5px;
}
.ewl-joincol .ewl-field {
margin-bottom: 20px;
}
.ewl-joincol .ewl-btn--primary {
margin-top: 10px;
}
.ewl-joincol .ewl-field input,
.ewl-joincol .ewl-field select {
height: 58px;
line-height: 58px;
}
.ewl-joincol .ewl-field__eye,
.ewl-joincol .ewl-field__chev {
height: 58px;
}
.ewl-joincol .ewl-btn {
min-height: 62px;
}
.ewl-joincol .ewl-card__terms {
margin-top: 22px;
}
}
/* =============================================================== the cards */
.ewl-card {
position: relative;
max-width: 460px;
margin: 0 auto;
padding: 28px 26px 24px;
border-radius: 22px;
background: #fff;
box-shadow: var(--ewl-shadow-lg);
color: var(--ewl-slate);
font-size: 15px;
line-height: 1.5;
text-align: center;
}
.ewl-card * {
box-sizing: border-box;
}
.ewl-card__flash {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 0 16px;
color: var(--ewl-green);
font-size: 23px;
font-weight: 800;
letter-spacing: 0.2px;
}
.ewl-rays {
flex: 0 0 18px;
width: 18px;
height: 30px;
background: var(--ewl-green);
-webkit-mask: var(--ewl-rays) center / contain no-repeat;
mask: var(--ewl-rays) center / contain no-repeat;
}
.ewl-rays--r {
transform: scaleX(-1);
}
.ewl-card__badge {
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
margin: 0 auto 14px;
border-radius: 50%;
background: var(--ewl-teal);
color: #fff;
}
.ewl-card__title {
margin: 0 0 8px;
color: var(--ewl-navy);
font-size: 34px;
line-height: 1.15;
font-weight: 700;
}
.ewl-card__sub {
margin: 0 auto 22px;
max-width: 300px;
font-size: 16px;
font-weight: 600;
color: var(--ewl-navy);
}
.ewl-btn--google[aria-disabled="true"] {
cursor: default;
}
.ewl-card__terms,
.ewl-card__alt {
margin: 14px 0 0;
font-size: 13px;
color: var(--ewl-muted);
text-align: center;
}
.ewl-card__alt a,
.ewl-card__terms a,
/* a comfortable target on a phone without shifting the text */
.ewl-card__alt a,
.ewl-link {
display: inline-block;
padding: 6px 2px;
margin: -6px 0;
}
.ewl-link {
color: var(--ewl-teal);
font-weight: 600;
text-decoration: none;
}
.ewl-card__alt a:hover,
.ewl-card__terms a:hover,
.ewl-link:hover {
text-decoration: underline;
}
/* ------------------------------------------------------------------ fields */
.ewl-form {
text-align: left;
}
.ewl-field {
position: relative;
margin: 0 0 14px;
}
.ewl-field__ico {
position: absolute;
top: 16px;
left: 15px;
color: var(--ewl-navy);
opacity: 0.82;
pointer-events: none;
}
.ewl-field__ico--pet {
top: 15px;
}
.ewl-field input[type="text"],
.ewl-field input[type="email"],
.ewl-field input[type="password"],
.ewl-field select {
width: 100%;
height: 54px;
padding: 0 44px 0 46px;
border: 1px solid #dfe4ea;
border-radius: 12px;
background: #fff;
color: var(--ewl-navy);
font-family: inherit;
font-size: 15px;
line-height: 54px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
appearance: none;
-webkit-appearance: none;
}
.ewl-field input::placeholder {
color: #9aa3ad;
opacity: 1;
}
.ewl-field input:focus,
.ewl-field select:focus {
outline: none;
border-color: var(--ewl-teal);
box-shadow: 0 0 0 3px rgba(41, 151, 170, 0.16);
}
.ewl-field.is-bad input,
.ewl-field.is-bad select {
border-color: #e0622f;
box-shadow: 0 0 0 3px rgba(224, 98, 47, 0.12);
}
.ewl-field__err {
display: block;
margin: 6px 2px 0;
color: #c8471c;
font-size: 12.5px;
line-height: 1.4;
}
.ewl-field__err a {
color: inherit;
font-weight: 700;
}
.ewl .ewl-field__eye,
.ewl .ewl-field__chev {
position: absolute;
top: 0;
right: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 54px;
padding: 0;
border: 0;
background: none;
color: var(--ewl-navy);
opacity: 0.5;
cursor: pointer;
}
.ewl .ewl-field__chev {
pointer-events: none;
}
.ewl .ewl-field__eye:hover,
.ewl .ewl-field__eye:focus,
.ewl .ewl-field__eye:active {
background: none;
border: 0;
box-shadow: none;
color: var(--ewl-navy);
}
.ewl .ewl-field__eye:hover {
opacity: 0.9;
}
.ewl-field--check label {
display: flex;
gap: 9px;
align-items: flex-start;
font-size: 13.5px;
}
.ewl-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 2px 0 16px;
font-size: 13.5px;
}
.ewl-check {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ewl-slate);
}
.ewl-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ----------------------------------------------------------------- buttons */
.ewl .ewl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 58px;
padding: 0 26px;
border: 0;
border-radius: 12px;
font-family: "Poppins", sans-serif;
font-size: 17.5px;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.1px;
text-transform: none;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.ewl .ewl-btn--block {
width: 100%;
}
.ewl .ewl-btn--primary {
background: var(--ewl-orange);
color: #fff;
box-shadow: 0 8px 18px rgba(242, 121, 71, 0.32);
}
.ewl .ewl-btn--primary:hover,
.ewl .ewl-btn--primary:focus {
background: var(--ewl-orange-deep);
color: #fff;
transform: translateY(-1px);
}
.ewl .ewl-btn--primary[disabled] {
opacity: 0.6;
cursor: progress;
transform: none;
}
.ewl .ewl-btn--ghost {
border: 1px solid #dfe4ea;
background: #fff;
color: var(--ewl-navy);
font-size: 15.5px;
}
.ewl .ewl-btn--ghost:hover {
border-color: #c3ccd6;
color: var(--ewl-navy);
}
.ewl-or {
position: relative;
margin: 16px 0;
text-align: center;
color: var(--ewl-muted);
font-size: 13px;
}
.ewl-or::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e7ebef;
}
.ewl-or span {
position: relative;
padding: 0 12px;
background: #fff;
}
/* ------------------------------------------------------------------- notes */
.ewl-note {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 0 0 16px;
padding: 11px 14px;
border-radius: 10px;
font-size: 13.5px;
line-height: 1.45;
text-align: left;
}
.ewl-note--ok {
background: #eaf6e6;
color: #35701a;
}
.ewl-note--bad {
background: #fdeee7;
color: #b8390f;
}
.ewl-note .ewl-i {
flex: 0 0 20px;
margin-top: 1px;
}
.ewl-next {
margin: 0 0 4px;
padding: 0;
list-style: none;
text-align: left;
}
.ewl-next li {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid #eef1f4;
color: var(--ewl-navy);
font-size: 14.5px;
font-weight: 600;
}
.ewl-next li:last-child {
border-bottom: 0;
}
.ewl-next .ewl-i {
color: var(--ewl-teal);
}
/* -------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
.ewl-script,
.ewl-script p {
font-size: 30px;
}
.ewl-freebadge .elementor-heading-title {
gap: 14px;
padding: 12px 30px 12px 16px;
font-size: 26px;
}
.ewl-freebadge .elementor-heading-title::before {
width: 36px;
height: 36px;
flex-basis: 36px;
}
}
/* Narrow phones only. The four steps are cramped in the copy column at these
widths, so they take the full screen — but the column is beside the
photograph, and a full-width row would slide underneath it. The photograph is
capped to finish above them; above 480 px the column is wide enough for the
steps on its own and the picture goes back to full height. */
@media (max-width: 480px) {
.ewl-hero .ewl-copy.ewl-copy .ewl-steps {
width: calc(100vw - 28px);
max-width: none;
}
.ewl-hero .ewl-pets img {
max-height: 430px;
}
}
@media (max-width: 767px) {
.ewl-card {
padding: 26px 20px 22px;
border-radius: 18px;
}
.ewl-card__title {
font-size: 26px;
}
.ewl-card__sub {
font-size: 14.5px;
}
.ewl-card__flash {
font-size: 21px;
}
.ewl-band--cream > .e-con-inner {
border-radius: 18px;
padding: 22px 6px 22px;
}
.ewl-script,
.ewl-script p {
font-size: 20px;
}
}
/* ------------------------------------------------- paw after the headline */
:root {
--ewl-paw: url("data:image/svg+xml,");
}
.ewl-h-paw .elementor-heading-title::after {
content: "";
display: inline-block;
width: 0.84em;
height: 0.84em;
margin-left: 0.2em;
vertical-align: -0.08em;
transform: rotate(14deg);
background: currentColor;
-webkit-mask: var(--ewl-paw) center / contain no-repeat;
mask: var(--ewl-paw) center / contain no-repeat;
}
.ewl-h-paw-before .elementor-heading-title::before {
content: "";
display: inline-block;
width: 1.25em;
height: 1.25em;
margin-right: 0.35em;
vertical-align: -0.26em;
background: var(--ewl-teal);
-webkit-mask: var(--ewl-paw) center / contain no-repeat;
mask: var(--ewl-paw) center / contain no-repeat;
}
/* the login pill in the hero top row */
.ewl-loginbtn .elementor-button {
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
.ewl-center-script,
.ewl-center-script p {
text-align: center;
}
/* ------------------------------------------------- little hearts from the mockup */
:root {
--ewl-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 20.4S3.6 15.6 3.6 9.9A4.5 4.5 0 0 1 12 7.4a4.5 4.5 0 0 1 8.4 2.5c0 5.7-8.4 10.5-8.4 10.5Z'/%3E%3C/svg%3E");
}
.ewl-ribbon .elementor-heading-title::after {
content: "";
display: inline-block;
width: 0.95em;
height: 0.95em;
margin-left: 0.5em;
vertical-align: -0.14em;
background: #ffffff;
-webkit-mask: var(--ewl-heart) center / contain no-repeat;
mask: var(--ewl-heart) center / contain no-repeat;
}
.ewl-more-rewards p::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.45em;
vertical-align: -0.16em;
background: #ef4b4b;
-webkit-mask: var(--ewl-heart) center / contain no-repeat;
mask: var(--ewl-heart) center / contain no-repeat;
}
.ewl-h-paw-before .elementor-heading-title::before {
background: var(--ewl-teal);
}
/* the closing script line keeps a warm heart at the end */
.ewl-closing-heart p::after {
content: "";
display: inline-block;
width: 0.72em;
height: 0.72em;
margin-left: 0.35em;
vertical-align: 0.02em;
background: var(--ewl-orange);
-webkit-mask: var(--ewl-heart) center / contain no-repeat;
mask: var(--ewl-heart) center / contain no-repeat;
}
/* ============================================ sections that follow the beach */
/* In the mockup the reassurance row is a rounded cream card on a white page,
so the colour goes on the inner (boxed) element, not the full-width row. */
.ewl-band--cream > .e-con-inner {
background: var(--ewl-cream);
border-radius: 26px;
padding: 40px 22px 44px;
}
/* ---------------------------------------------------- the "100% FREE" badge */
.ewl-trust--free .elementor-icon-box-icon {
position: relative;
}
.ewl-trust--free .elementor-icon {
position: relative;
padding: 0;
font-family: "Poppins", sans-serif;
font-weight: 700;
line-height: 0.96;
letter-spacing: -1px;
color: #fff;
}
.ewl-trust--free .elementor-icon svg {
display: none;
}
.ewl-trust--free .elementor-icon::after {
content: "100%\A FREE";
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
white-space: pre-line;
text-align: center;
letter-spacing: 0.2px;
}
.ewl-trust--free .elementor-icon-box-icon::before,
.ewl-trust--free .elementor-icon-box-icon::after {
content: "";
position: absolute;
top: 50%;
width: 33px;
height: 55px;
margin-top: -27.5px;
background: var(--ewl-green);
-webkit-mask: var(--ewl-rays) center / contain no-repeat;
mask: var(--ewl-rays) center / contain no-repeat;
}
/* Each burst spreads away from the roundel: the artwork is drawn wide-end
first, so only the right-hand copy is mirrored. */
.ewl-trust--free .elementor-icon-box-icon::before {
left: calc(50% - 102px);
}
.ewl-trust--free .elementor-icon-box-icon::after {
right: calc(50% - 102px);
transform: scaleX(-1);
}
:root {
--ewl-rays: url("data:image/svg+xml,");
}
/* the security tile is a shield badge, not a disc */
.ewl-trust--shield .elementor-icon {
background: none;
line-height: 1;
}
.ewl-trust--shield .elementor-icon svg {
width: 1em;
height: 1em;
}
/* ------------------------------------------- rewards carousel on phones */
.ewl-dots {
display: none;
gap: 0;
justify-content: center;
margin: 4px 0 0;
padding: 0;
list-style: none;
}
.ewl-dots button {
position: relative;
width: 28px;
height: 32px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
/* the dot itself; the button around it is the thumb target */
.ewl-dots button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
margin: -4.5px 0 0 -4.5px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.22);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.ewl-dots button.is-on::before {
background: var(--ewl-teal);
transform: scale(1.25);
}
/* --------------------------------------------------- password strength */
.ewl-strength[hidden] {
display: none;
}
.ewl-strength {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 2px 0;
}
.ewl-strength__bar {
flex: 1 1 auto;
height: 5px;
border-radius: 3px;
background: #e7ebef;
overflow: hidden;
}
.ewl-strength__bar i {
display: block;
width: 0;
height: 100%;
border-radius: 3px;
background: #d94f2b;
transition: width 0.25s ease, background-color 0.25s ease;
}
.ewl-strength__label {
min-width: 66px;
font-size: 12px;
font-weight: 600;
color: var(--ewl-muted);
text-align: right;
}
.ewl-strength[data-level="2"] .ewl-strength__bar i { background: #e08b2c; }
.ewl-strength[data-level="3"] .ewl-strength__bar i { background: #3f9e57; }
.ewl-strength[data-level="4"] .ewl-strength__bar i { background: #2f8a49; }
/* ------------------------------------------------------------------------ */
/* Elementor writes the icon size and the h3 face into its own per-page CSS, */
/* which loads after this file, so these need a class more. */
/* ------------------------------------------------------------------------ */
.ewl-band .ewl-trust--shield .elementor-icon {
padding: 0;
}
.ewl-band .ewl-trust--free.ewl-trust--free .elementor-icon {
box-sizing: border-box;
width: 88px;
height: 88px;
font-size: 26px;
}
/* the club's headings are Chewy; its UI labels are Poppins, and Elementor's
icon-box titles are
, which Astra sets to Chewy */
.ewl-band .ewl-trust .elementor-icon-box-title,
.ewl-rewardcard .elementor-icon-box-title,
.ewl-band .ewl-trust .elementor-icon-box-title a,
.ewl-rewardcard .elementor-icon-box-title a {
font-family: "Poppins", sans-serif;
}
.ewl-band .ewl-trust .elementor-icon-box-description,
.ewl-rewardcard .elementor-icon-box-description {
font-family: "Poppins", sans-serif;
}
/* ------------------------------------------------------------------ */
/* Homepage promo banner (inserted by `wp ewl banner`) */
/* ------------------------------------------------------------------ */
.ewl-homebanner .ewl-homebanner__panel {
position: relative;
overflow: hidden;
border-radius: 24px;
background:
radial-gradient(115% 150% at 86% 118%, rgba(41, 151, 170, 0.16) 0%, rgba(41, 151, 170, 0) 52%),
linear-gradient(160deg, #e9f6fa 0%, #fdf9ef 55%, #f7e7c6 100%);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}
.ewl-homebanner h2 span {
color: var(--ewl-teal);
}
.ewl-homebanner img {
filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.18));
}
.ewl-homebanner .ewl-minibadge .elementor-heading-title {
display: inline-block;
padding: 9px 18px;
border-radius: 30px;
background: linear-gradient(90deg, #6fbb35, #57a02b);
box-shadow: 0 6px 14px rgba(87, 160, 43, 0.3);
}
/* ------------------------------------------------------------------ */
/* Phones — the mobile mockup: pets beside the copy, the four steps */
/* in one row, three reward tiles, four trust tiles, the join card */
/* last. */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
/* top row: the club logo sits centred, Login is pinned to the right.
The doubled class clears the 30 px top padding entered on desktop in the
builder, which the phone inherits and which dropped the pill below the
top of the logo. */
.ewl-hero .ewl-topbar .ewl-loginbtn.ewl-loginbtn {
position: absolute;
top: 0;
right: 0;
width: auto;
padding-top: 0;
}
/* The badge sits up beside the logo rather than leading the copy, as the
phone mockup has it. Out of the flow, so the headline moves up with it. */
.ewl-hero .ewl-freebadge {
position: absolute;
top: -50px;
left: 0;
z-index: 4;
width: auto;
margin: 0;
}
/* The copy starts at the top of the row beside the photograph. The builder
bottom-aligns it, which was fine while the two columns happened to be the
same height and dropped the whole headline once the photo grew. */
.ewl-hero .ewl-toprow.ewl-toprow {
align-items: flex-start;
}
/* Narrow enough to sit clear of the logo beside it, as the mockup has the
two: the badge ends just before the emblem starts. */
.ewl-freebadge .elementor-heading-title {
display: inline-flex;
width: auto;
max-width: 106px;
gap: 6px;
padding: 6px 9px 6px 8px;
border-radius: 7px;
font-size: 12px;
line-height: 1.15;
box-shadow: 0 5px 12px rgba(103, 144, 28, 0.3);
-webkit-mask-image: none;
mask-image: none;
}
.ewl-freebadge .elementor-heading-title::before {
width: 18px;
height: 18px;
flex-basis: 18px;
}
/* The rule under the script line is a drawn stroke rather than a bar —
the mockup's is not straight. Same teal, painted through a mask so the
colour still comes from the palette. */
.ewl-script--rule::after {
width: 94px;
height: 11px;
margin-top: 1px;
border-radius: 0;
-webkit-mask: url("data:image/svg+xml,") no-repeat left center / contain;
mask: url("data:image/svg+xml,") no-repeat left center / contain;
}
/* The headline carries the hero on a phone, so it goes up, and "Join"
takes a line of its own as the mockup has it. The space is stretched
past the column width, which is what forces the break — there is only
one space in "Join EatWagLove". */
.ewl-hero.ewl-hero .ewl-copy.ewl-copy h1.elementor-heading-title {
font-size: 30px;
line-height: 1.08;
word-spacing: 100vw;
}
.ewl-hero.ewl-hero .ewl-copy.ewl-copy .ewl-h-paw .elementor-heading-title {
font-size: 38px;
line-height: 1.05;
}
/* Room between the blocks, matching the step down from the script lines
to the paragraph. */
.ewl-hero .ewl-copy.ewl-copy {
gap: 10px;
}
/* the four steps, larger */
.ewl-hero .ewl-steps .ewl-step .elementor-icon {
font-size: 30px;
}
/* Bigger, and closer together: the two script lines and the paragraph
under them are one block in the mockup, not three spaced-out ones. */
.ewl-hero .ewl-copy .ewl-script.ewl-script {
font-size: 22px;
}
.ewl-hero .ewl-copy .elementor-widget-text-editor:not(.ewl-script) {
font-size: 14.5px;
line-height: 1.42;
}
/* The photograph runs off the right-hand edge of the screen and only the
edge that meets the copy is faded. Wider than the builder's 40 %, and the
negative right margin cancels the hero's own padding so nothing white is
left down that side. */
.ewl-hero .ewl-toprow .ewl-petcol.ewl-petcol {
width: 54%;
margin-right: -14px;
/* Pulled up out of its row so the beach runs behind the club logo and
the Login pill, as the phone mockup has it. The topbar is lifted
above it below, so both stay readable. */
margin-top: -134px;
z-index: 0;
}
.ewl-hero .ewl-topbar {
position: relative;
z-index: 3;
}
/* Cropped tighter so the dog and cat fill the frame, and rounded, because
on a phone the picture sits right against the copy rather than running
off into the page. The white is carried down the left and along the
bottom as it is on the desktop hero; the right-hand side runs off the
screen and is left hard. */
.ewl-hero .ewl-pets img {
/* Wide enough a crop to hold both animals — a narrower one takes a
vertical slice and loses the dog — and the frame is wider than
before, so they come out larger rather than smaller. */
/* The dog and cat sit in the left third of the photograph, roughly
x 12–40 %, with beach filling the rest — so the window has to start
almost at the left edge for the pair to land in the middle of the
frame. Square corners: the fades on the left and bottom are what
soften it against the copy. */
aspect-ratio: 260 / 681;
object-position: 11% bottom;
-webkit-mask-image:
linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 2%, rgba(0, 0, 0, 0.55) 4.5%, rgba(0, 0, 0, 0.85) 7%, #000 9%),
linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 2.5%, rgba(0, 0, 0, 0.5) 6%, rgba(0, 0, 0, 0.85) 9.5%, #000 13%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 2%, rgba(0, 0, 0, 0.55) 4.5%, rgba(0, 0, 0, 0.85) 7%, #000 9%),
linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 2.5%, rgba(0, 0, 0, 0.5) 6%, rgba(0, 0, 0, 0.85) 9.5%, #000 13%);
mask-composite: intersect;
}
.ewl-steps {
padding-top: 10px;
}
.ewl-step .elementor-icon-box-title {
font-size: 11px;
font-weight: 600;
letter-spacing: -0.2px;
line-height: 1.2;
margin-top: 5px;
}
/* the rewards heading loses its banner */
.ewl-ribbon .elementor-heading-title {
flex-direction: row-reverse;
gap: 8px;
height: auto;
padding: 0;
border: 0;
border-image: none;
background: none;
box-shadow: none;
filter: none;
color: var(--ewl-navy);
font-size: 15px;
}
.ewl-ribbon .elementor-heading-title::after {
width: 1em;
height: 1em;
margin-left: 0;
background: var(--ewl-teal);
}
/* the strip runs to the edges of the screen, as the tiles scroll */
/* Full bleed. The negative margins alone only shifted the strip left,
because .ewl-rewards carries width: 100% and a sized box does not
stretch into negative margins — so it ended 28 px short of the screen
and clipped the next card early. */
.ewl-rewards {
width: calc(100% + 28px);
margin: 0 -14px;
}
.e-con.ewl-rewards > .ewl-ribbon.elementor-widget {
margin: 0 14px 6px;
}
/* The first card starts at the page gutter, as the mockup has it; the row
still runs off the right-hand edge, which is what shows there is more to
swipe to. Padding alone is not enough: scroll snapping aligns the card to
the scrollport, so the browser simply scrolls the padding away — the
scrollport itself has to be inset. */
.ewl-rewardrow.ewl-rewardrow {
padding-left: 14px;
scroll-padding-left: 14px;
}
.ewl-rewardrow {
border-radius: 0;
padding: 4px 12px 6px;
box-shadow: none;
background: none;
}
.ewl-more-rewards {
margin-top: 4px;
}
/* three reward tiles side by side; the row still scrolls if more are added */
.ewl-rewardrow {
display: flex;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ewl-rewardrow::-webkit-scrollbar {
display: none;
}
.ewl-rewardrow > .elementor-element {
flex: 0 0 62%;
scroll-snap-align: start;
}
.ewl-rewardcard {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--ewl-shadow);
}
.ewl-rewardcard .elementor-widget-image img {
height: 105px;
border-radius: 0;
}
/* Sized from the mockup's own tile rather than shrunk to fit a third of a
phone: there the photo is 105 px over a 250 px tile, the disc is 0.216 of
the tile width, and the title sits at 15 px. */
.ewl-rewardcard .elementor-icon-box-title {
font-size: 15px;
line-height: 1.25;
margin-bottom: 3px;
}
.ewl-rewardcard .elementor-icon-box-description {
font-size: 12.5px;
line-height: 1.35;
}
.ewl-rewardrow .ewl-rewardcard.ewl-rewardcard .elementor-widget-icon-box .elementor-icon {
font-size: 26px;
padding: 12px;
}
.ewl-rewardrow .ewl-rewardcard.ewl-rewardcard .elementor-widget-icon-box .elementor-icon-box-wrapper {
gap: 10px;
}
/* the same tuck into the photograph's bottom edge as the wide row, scaled
to the phone's smaller disc — the mobile mockup has it too */
.ewl-rewardrow .ewl-rewardcard.ewl-rewardcard .elementor-widget-icon-box .elementor-icon {
margin-top: -12px;
margin-left: 4px;
}
.ewl-dots {
display: flex;
}
.ewl-dots[hidden] {
display: none;
}
/* Two by two rather than four across. The mockup's four-in-a-row is drawn
at 864 px, where each tile has about 210 px; a 414 px phone gives them
103 px each and every title breaks onto four lines. Half-width tiles are
~195 px — the width the design was actually drawn for — so the type can
go back up to the mockup's size. */
.ewl-band.ewl-band {
flex-wrap: wrap;
}
.ewl-band.ewl-band .ewl-trust.ewl-trust {
width: 50%;
max-width: 50%;
}
/* the divider belongs between the pair on a row, not down the left of one
that has started a new one */
.ewl-band .ewl-trust.ewl-trust:nth-child(odd) {
border-left: 0;
}
.ewl-band .ewl-trust .elementor-icon-box-title {
font-size: 14px;
line-height: 1.2;
margin: 8px 0 4px;
}
.ewl-band .ewl-trust .elementor-icon-box-description {
font-size: 12px;
line-height: 1.4;
}
.ewl-band .ewl-trust--free.ewl-trust--free .elementor-icon {
width: 46px;
height: 46px;
font-size: 13.5px;
}
.ewl-trust--free .elementor-icon-box-icon::before,
.ewl-trust--free .elementor-icon-box-icon::after {
display: none;
}
.ewl-closing-heart p {
font-size: 21px;
}
/* the join card at the foot of the page: the mockup keeps it to the
flash line, the paw and the fields */
.ewl-mobilejoin .ewl-card {
max-width: none;
}
.ewl-mobilejoin .ewl-card__title,
.ewl-mobilejoin .ewl-card__sub {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.ewl-mobilejoin .ewl-card__badge {
margin-bottom: 18px;
}
}