/* "Livrare și costuri" - /delivery-price/.
*
* Everything is scoped to body.af-shipping-page or to .af-ship*, and the file
* is only enqueued on this one page anyway. It depends on 'af-ux' so it is
* printed after ux.css; ux.css sizes every p, li, h1 and h2 in the shop, the
* headings with !important, so order is not a nicety here.
*
* THE NUMBERS, AND WHO THEY ARE FOR
*
* A smallholder in their sixties, on a phone, on rural mobile data, working
* out whether a cage will actually reach their village and what it will cost.
* So: 18px at the narrowest and 20px on a desktop, 1.75 leading, a 760px
* measure (about 79 characters at 20px, against the 816px/94-character column
* the old policy design had), 48px minimum on anything tappable, and ink well
* past the 4.5:1 floor.
*
* Contrast, measured on this page's own backgrounds:
*
* #1d1d1f on #fff 16.83:1 headings
* #3a3a3a on #fff 11.37:1 body copy
* #555555 on #fff 7.46:1 secondary lines
* #1b5e20 on #fff 7.87:1 links and the green figures
* #fff on #1b5e20 7.87:1 the telephone and e-mail buttons
* #1d1d1f on #f2f7f2 15.52:1 headings on the tinted panels
* #3a3a3a on #f2f7f2 10.49:1 body on the tinted panels
* #1b5e20 on #f2f7f2 7.26:1 the free-shipping figure on its card
* #6e6e73 on #f2f7f2 4.68:1 the drawings' structural strokes, against
* the 3:1 floor for non-text graphics
*
* #2e7d32 - the shop's lighter green, 5.13:1 - is deliberately not used for
* anything carrying text here. #1b5e20 is the same brand green, reads the same
* at a glance, and costs nothing to take.
*
* THE MOTION
*
* Three things move, and each one is a sentence on the page drawn instead of
* written: the van crossing from our depot to a door, the bar filling to the
* free-shipping figure, and the box coming down out of the lorry and stopping
* at the line where the driver's job ends.
*
* Every one of them is defined only inside
* @media (prefers-reduced-motion: no-preference), and the rules above that
* media block paint the *finished* state. Reduced motion, an old browser, a
* print - all three get the van at the house, the bar full and the box on the
* ground, which is the picture that is true. Nothing is ever drawn in a
* half-finished state and then animated out of it.
*
* Only transform and opacity are animated, apart from one stroke-dashoffset
* that runs once; so the loops stay on the compositor and never ask the main
* thread to lay out or paint a frame.
*/
body.af-shipping-page {
--s-ink: var(--af-ink, #1d1d1f);
--s-body: var(--af-body, #3a3a3a);
--s-muted: #555;
--s-green: #1b5e20;
--s-line: var(--af-hairline, #e0e0e0);
--s-tint: #f2f7f2;
--s-grey: #f5f5f7;
--s-focus: var(--af-focus, #0b65c2);
--s-radius: var(--af-radius-lg, 18px);
/* The reading measure. Every section starts at the same x and runs to the
same width, whether it has a drawing beside it or not - an older reader
scanning down the page should never have to find the left edge twice.
780px at 20px is about 78 characters, against the 978px/102-character
column the policy pages settled on; this page has pictures to carry the
width, so its words do not have to. */
--s-measure: min(100%, 780px);
/* ux.css: "content locks at 1440px". Honoured rather than re-decided. */
--s-max: 1440px;
}
/* The theme's page wrapper is boxed four deep - .content-page, the sidebar
* wrapper, the bootstrap .row and the column inside it. page-af-arranged.php
* prints all four because faq.css, policy.css and content-pages.css flatten
* them by name; this page is flattened the same way.
*
* The .row is reached with a descendant combinator, not a child one:
* page-af-arranged.php puts .sidebar-position-* between .content-page and
* .row, so `.content-page > .row` matches nothing. Both faq.css and policy.css
* were written with the child combinator first and overflowed a 390px screen
* until it was corrected; there is no reason to learn that twice. */
body.af-shipping-page .content-page,
body.af-shipping-page .content-page [class*="sidebar-position-"],
body.af-shipping-page .content-page .row,
body.af-shipping-page .content-page .content {
width: 100%;
max-width: none;
margin: 0;
padding-left: 0;
padding-right: 0;
}
body.af-shipping-page .page-heading {
margin-bottom: 0;
}
/* The breadcrumb band keeps the site's own gutter, or the h1 below it starts
* 33px left of the first sentence - the band pays a flat 15px and the page
* pays --af-gutter. Same correction policy.css makes. */
body.af-shipping-page .page-heading > .container {
padding-left: var(--af-gutter, 24px) !important;
padding-right: var(--af-gutter, 24px) !important;
}
/* The empty box the band's title leaves behind.
*
* AF_Shipping_Page::band_title_text() empties the parent theme's copy of the
* page title and band_title_tag() drops it from an h1 to a p, so by the time
* this rule applies there are no words in it and no second heading on the page
* - see the long note on those two filters. What XStore's template still
* writes is
, and ux.css gives .title a
* margin, so the empty box would open 20-odd px of nothing between the
* breadcrumb and the hero. This takes the box away, not the content: there is
* no content left to take. */
body.af-shipping-page .page-heading .title {
display: none !important;
}
/* ==================================================================
The page
================================================================== */
.af-ship {
width: 100%;
padding: 4px var(--af-gutter, 24px) 48px;
color: var(--s-body);
font-size: clamp(18px, 0.35vw + 16.4px, 20px);
line-height: 1.75;
-webkit-text-size-adjust: 100%;
}
/* Until 1240px the whole page is one centred column, drawings included.
*
* Measured at 1024px with the two-column layout on: the text column took its
* 780px, the gutter took 2x33, and the drawing was left 147px - a van the size
* of a full stop. A picture that cannot be read is worse than no picture,
* because it still costs the download. So the split waits until the second
* column can hold at least 330px: 780 + a 42px gap + 330 needs a 1152px
* container, which is a 1240px window once the gutter is paid. */
.af-ship > * {
max-width: calc(var(--s-measure) + 40px);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1240px) {
.af-ship > * {
max-width: var(--s-max);
}
}
/* ------------------------------------------------------------------
The hero
------------------------------------------------------------------ */
/* The single column is stated as minmax(0, 1fr), and that is not tidiness.
*
* Left as an implicit auto track it takes its width from the widest child's
* min-content, and one of the children is the facts grid, whose
* repeat(auto-fit, minmax(200px, 1fr)) has a 200px floor per track. Sizing
* that under an indefinite width gives three tracks, so its min-content is
* 3 x 200 plus gaps. Measured at 390px before this line: .af-ship__hero was
* 358px wide with a 644px track inside it, and the h1, the lead and the
* drawing all ran to x=660 - invisible only because ux.css puts
* overflow-x:clip on the document, so it did not even scroll to reveal
* itself. A floor of 0 cannot inflate anything. */
.af-ship__hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(24px, 3vw, 48px);
padding: clamp(8px, 1.6vw, 24px) 0 clamp(28px, 3vw, 44px);
}
@media (min-width: 1240px) {
.af-ship__hero {
grid-template-columns: minmax(0, var(--s-measure)) minmax(0, 1fr);
align-items: center;
column-gap: clamp(32px, 3vw, 64px);
}
.af-ship__facts {
grid-column: 1 / -1;
}
}
/* !important because ux.css sets h1 with it, shop-wide. The ladder here is
this page's own: 46px at the top, 30px on the section headings, 20px body -
a real 1.5x step between each, which is what makes the page skimmable
without reading it. */
.af-ship__title {
margin: 0 0 18px;
color: var(--s-ink);
font-size: clamp(30px, 2.4vw + 21px, 46px) !important;
font-weight: 700;
line-height: 1.12 !important;
letter-spacing: -0.015em;
}
.af-ship__lead {
margin: 0 0 14px;
color: var(--s-body);
font-size: clamp(19px, 0.5vw + 17.4px, 23px);
line-height: 1.6;
}
.af-ship__lead--sm {
font-size: inherit;
line-height: inherit;
}
.af-ship__lead:last-child {
margin-bottom: 0;
}
/* The three facts: three across wherever three fit, and the row itself is capped.
*
* Measured at 1440 with a plain 1fr maximum: the three cards spread to 430px
* each across the full 1301px hero row, which turns a summary into three
* billboards. Capping the *track* at 360px instead was worse - auto-fit counts
* tracks by their definite maximum, so an 820px row at 1024px fitted only two
* 360px tracks and left the third fact alone on a second line. So the track
* stays elastic and the row is capped: three cards of about 358px at 1440 and
* 1920, three of 265px at 1024, three of 231px at 768, one per line on a
* phone. */
.af-ship__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* and it never contributes its 200px floor to whatever contains it */
min-width: 0;
max-width: 1100px;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.af-ship__fact {
margin: 0;
padding: 16px 18px;
border-radius: 14px;
background: var(--s-tint);
}
.af-ship__fact-n {
display: block;
color: var(--s-green);
font-size: clamp(21px, 0.6vw + 19px, 26px);
font-weight: 700;
line-height: 1.2;
}
.af-ship__fact-l {
display: block;
margin-top: 4px;
color: var(--s-muted);
font-size: 16px;
line-height: 1.4;
}
/* ------------------------------------------------------------------
The sections
------------------------------------------------------------------ */
.af-ship__sect {
display: grid;
grid-template-columns: minmax(0, var(--s-measure));
gap: clamp(20px, 2.4vw, 36px);
padding: clamp(28px, 3vw, 44px) 0 0;
/* the theme sticks its header above 1024px; measured at 1440 it is 114px
tall, so an anchored heading clears it with room to spare */
scroll-margin-top: 128px;
}
/* The contact panel, capped and still on the page's left edge.
*
* Measured at 1440 without a cap: a 1301px panel holding a heading, two 374px
* buttons and a line of opening hours - mostly tint. Capped at 1040 with a
* plain margin-left:0 instead, measured at 1920: the panel started at x=72
* while every heading above it started at x=233, because .af-ship > * centres
* a 1440px box inside a 1793px content area and margin-left:0 leaves that box
* behind. The margin below reproduces exactly half of what the centring would
* have taken, so the panel keeps the left edge of the words it belongs to at
* every width, and collapses to 0 the moment the page is narrower than the
* 1440px lock. */
@media (min-width: 1240px) {
.af-ship__ask {
width: min(100%, 1040px);
max-width: none;
margin-left: calc(max(0px, 100% - var(--s-max)) / 2);
margin-right: auto;
}
.af-ship__sect--art {
grid-template-columns: minmax(0, var(--s-measure)) minmax(0, 1fr);
align-items: start;
column-gap: clamp(32px, 3vw, 64px);
}
}
.af-ship__body {
min-width: 0;
}
.af-ship__h {
display: flex;
align-items: baseline;
gap: 14px;
margin: 0 0 16px;
color: var(--s-ink);
/* !important for the same reason as the h1: ux.css owns h2 shop-wide. */
font-size: clamp(24px, 1vw + 20px, 30px) !important;
font-weight: 700;
line-height: 1.25 !important;
letter-spacing: -0.01em;
}
/* The number is a landmark, not decoration: somebody on the telephone can say
"point 4" and be understood. Same device the policy pages use. */
.af-ship__h-n {
flex: 0 0 auto;
min-width: 1.85em;
padding: 0.18em 0.4em;
border-radius: 999px;
background: var(--s-tint);
color: var(--s-green);
font-size: 0.62em;
font-weight: 700;
text-align: center;
transform: translateY(-0.15em);
}
.af-ship__h-t {
min-width: 0;
}
/* ux.css sets `p, li { font-size:18px; line-height:1.6 }` at element
specificity across the whole shop, so the measure is restated on this page's
own classes and everything reads from the one value on .af-ship. */
.af-ship__p,
.af-ship__list li {
margin: 0 0 1.05em;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.af-ship__p:last-child {
margin-bottom: 0;
}
.af-ship__p strong,
.af-ship__p b {
color: var(--s-ink);
font-weight: 700;
}
.af-ship__p a,
.af-ship__list a {
color: var(--s-green);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
/* an e-mail address or a telephone number is often the thing the reader came
for, and on a phone it has to be hittable without aiming */
padding: 2px 0;
word-break: break-word;
}
.af-ship__p a:hover,
.af-ship__p a:focus,
.af-ship__list a:hover,
.af-ship__list a:focus {
color: var(--s-green);
text-decoration-thickness: 2px;
}
.af-ship__list {
margin: 0 0 1.05em;
padding: 0;
list-style: none;
}
.af-ship__list li {
position: relative;
padding-left: 30px;
margin-bottom: 0.55em;
}
/* A drawn tick rather than a bullet: the lists on this page are all "yes, we
do this", and a shape says so where a disc says nothing. */
.af-ship__list li::before {
content: "";
position: absolute;
left: 4px;
top: 0.55em;
width: 13px;
height: 7px;
border-left: 2.5px solid var(--s-green);
border-bottom: 2.5px solid var(--s-green);
transform: rotate(-45deg);
}
/* The steps.
*
* An ordinary in the editor and an ordinary in the document - only
* the paint changes, so a screen reader still hears "list, 4 items". The
* counter is CSS because list-style is off; role="list" is on the element
* because Safari drops the list role when it is. */
.af-ship__steps {
counter-reset: af-step;
display: grid;
gap: 12px;
margin: 0 0 1.2em;
padding: 0;
list-style: none;
}
/* Two across, and never three.
*
* auto-fit was tried first and measured at 768px: the body column is 719px
* wide there, which fits three 190px cards, so four steps came out 3 + 1 with
* one card alone on the second row - the step that matters most, "ajunge la
* tine", orphaned. Two columns give 2 + 2 at every width from 620px up, about
* 44 characters a line in each card at the widest, and the reading order down
* the pairs is still 1 2 3 4. */
@media (min-width: 620px) {
.af-ship__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.af-ship__steps li {
counter-increment: af-step;
margin: 0;
padding: 16px 18px 18px;
border: 1px solid var(--s-line);
border-radius: 14px;
background: #fff;
font-size: 17px;
line-height: 1.5;
color: var(--s-body);
}
.af-ship__steps li::before {
content: counter(af-step);
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 0 0 10px;
border-radius: 999px;
background: var(--s-green);
color: #fff;
font-size: 17px;
font-weight: 700;
line-height: 1;
}
/* The free-shipping card. The figure in it is read live out of the campaign
record, so it cannot drift from what the basket actually does. */
.af-ship__free {
margin: 20px 0 0;
padding: 18px 20px;
border-radius: 14px;
background: var(--s-tint);
}
.af-ship__free-t {
margin: 0;
color: var(--s-ink);
font-size: clamp(19px, 0.4vw + 17.6px, 22px);
font-weight: 700;
line-height: 1.35;
}
.af-ship__free-s {
margin: 6px 0 0;
color: var(--s-muted);
font-size: 16px;
line-height: 1.5;
}
/* The two lines about the tailgate.
*
* The shop's liability statement, said a second time in a shape nobody skims
* past. The tick and the cross differ in *shape*, not only in colour: a
* red/green pair alone is the exact thing a reader with a red-green deficiency
* cannot tell apart, and this is the sentence on the page with money attached
* to it. */
.af-ship__rule {
margin: 22px 0 0;
padding: 18px 20px;
border: 1px solid var(--s-line);
border-radius: 14px;
/* The neutral tint, not the green one: the green cards on this page are all
good news (free shipping, the facts), and this box is a limit. #1d1d1f on
#f5f5f7 is 15.46:1. */
background: var(--s-grey);
list-style: none;
}
/* 18px rather than the 17px the step cards use. Screenshotted at 1440 beside
20px body copy, 17px read as a caption, and this is the opposite of a
caption - it is the one paragraph on the page that decides whether somebody
has help waiting in the yard when the lorry arrives. */
.af-ship__rule-i {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 12px;
font-size: 18px;
line-height: 1.5;
color: var(--s-ink);
}
.af-ship__rule-i:last-child {
margin-bottom: 0;
}
.af-ship__rule-i svg {
flex: 0 0 auto;
margin-top: 2px;
}
.af-ship__rule-i--yes svg {
color: var(--s-green);
}
.af-ship__rule-i--no svg {
/* 7.64:1 on white. A brown-orange rather than a red: red on this page would
read as an error the reader has made, and this is a fact about the
service, not a fault. */
color: #8a3d00;
}
/* ------------------------------------------------------------------
The drawings
------------------------------------------------------------------ */
.af-ship__hero-art,
.af-ship__art {
min-width: 0;
}
.af-art {
display: block;
width: 100%;
max-width: 520px;
height: auto;
margin: 0 auto;
padding: 14px;
border-radius: var(--s-radius);
background: var(--s-tint);
/* The structural strokes - buildings, ground, shelving - inherit this.
4.68:1 on the tint, against the 3:1 floor for graphics that carry
meaning. The moving parts override it with the green below. */
color: #6e6e73;
box-sizing: border-box;
}
.af-art-ground {
stroke: #b9b9be;
}
/* Everything that carries the meaning is green: the van, the parcel, the
filled part of the bar, the box coming off the lorry, the reserved parcel
and its tick, the first of the three days. 7.26:1 on the tint. The
structural strokes stay the grey above, so each drawing reads as a subject
against a setting rather than as one tangle of lines. */
.af-art-van,
.af-art-parcel,
.af-art-fill,
.af-art-box,
.af-art-tag,
.af-art-basket {
stroke: var(--s-green);
}
/* Day one is certain, so it is solid; day three is the outside edge of the
promise, so it is dashed. Shape and fill, not colour alone - the same reason
the tick and the cross beside the tailgate paragraph are different glyphs. */
.af-art-day1 {
fill: var(--s-green);
stroke: none;
}
.af-art-day3 {
stroke-dasharray: 10 9;
}
.af-art-track {
stroke: #c7c7cc;
stroke-width: 10;
}
.af-art-fill {
stroke-width: 10;
}
.af-art-mark {
stroke: var(--s-ink);
stroke-width: 3;
stroke-dasharray: 6 7;
}
.af-art-line {
stroke: #8a3d00;
stroke-width: 3;
stroke-dasharray: 8 9;
}
/* ---- the finished state ----
*
* These are the rules that run when motion is not wanted, or when the browser
* does not understand the query. They are the picture as it ends: the van
* parked at the house, the parcel on the step, the bar full, the box on the
* ground at the line. Nothing on this page is ever drawn mid-journey unless it
* is actually going to travel. */
/* The van stands two thirds of the way along the road, not parked at the
house.
*
* This is the frame somebody with reduced motion, an old browser or a printer
* gets, so it has to be a picture that works on its own. Screenshotted with
* the van at the far end: the shop, the van and the parcel were all crowded
into the right third and half the drawing was empty road. Two thirds along
balances it and still says the same thing - the parcel is already at the
door, the van is on its way to the next one. */
.af-art-van {
transform: translateX(150px);
}
.af-art-box {
transform: translate(200px, 134px);
}
/* ---- the motion ---- */
@media (prefers-reduced-motion: no-preference) {
/* The van, 9 seconds, depot to door and away. Transform and opacity only,
so the loop is handed to the compositor and the main thread never lays
out or paints a frame of it. It fades out at the far end rather than
reversing, because a delivery van that drives backwards to the warehouse
with your parcel still in it is the wrong story. */
.af-art--journey .af-art-van {
animation: af-van 9s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}
.af-art--journey .af-art-parcel {
animation: af-parcel 9s linear infinite;
}
/* The bar fills once, and stops full.
*
* Once, because it is a number rather than a process: a free-shipping
* threshold that empties and refills forever is a lie told sixty times a
* minute. `forwards` holds the end state, which is also the state the rules
* above already paint, so the two can never disagree. */
.af-art--cost .af-art-fill {
stroke-dasharray: 250;
animation: af-fill 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s 1 both;
}
.af-art--cost .af-art-coins circle {
animation: af-coin 0.5s ease-out 1 both;
}
.af-art--cost .af-art-coins circle:nth-child(1) { animation-delay: 0.45s; }
.af-art--cost .af-art-coins circle:nth-child(2) { animation-delay: 0.75s; }
.af-art--cost .af-art-coins circle:nth-child(3) { animation-delay: 1.05s; }
/* The box off the tailgate: 7 seconds, and 44% of every cycle is spent
standing on the ground at the line. The resting state is the state that
matters, so most of the time the drawing simply *is* the answer. */
.af-art--unload .af-art-box {
animation: af-box 7s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}
}
@keyframes af-van {
0% { transform: translateX(84px); opacity: 0; }
5% { transform: translateX(84px); opacity: 1; }
60% { transform: translateX(196px); opacity: 1; }
88% { transform: translateX(196px); opacity: 1; }
95% { transform: translateX(196px); opacity: 0; }
100% { transform: translateX(84px); opacity: 0; }
}
@keyframes af-parcel {
0%, 58% { opacity: 0; transform: translateY(-7px); }
67%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes af-fill {
from { stroke-dashoffset: 250; }
to { stroke-dashoffset: 0; }
}
@keyframes af-coin {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: translateY(0); }
}
/* The box: out of the lorry, down to the ground, and there it stays.
*
* 52% of the cycle is spent standing on the ground at the line, because that
* resting state is the answer the drawing exists to give. The reset is a fade
* rather than a reversal - a box that climbs back into the lorry is the wrong
* story - and it is squeezed into 93%-100% so the drawing is completely empty
* for about one frame in a hundred. Screenshotted at 7s with the first, looser
* timing: a lorry, a dashed line and no box at all, which is what a reader
* arriving at the wrong moment would have seen. */
@keyframes af-box {
0% { transform: translate(154px, 100px); opacity: 0; }
6% { transform: translate(154px, 100px); opacity: 1; }
36%, 88% { transform: translate(200px, 134px); opacity: 1; }
93% { transform: translate(200px, 134px); opacity: 0; }
94% { transform: translate(154px, 100px); opacity: 0; }
100% { transform: translate(154px, 100px); opacity: 1; }
}
/* ------------------------------------------------------------------
The way out
------------------------------------------------------------------ */
.af-ship__ask {
margin-top: clamp(40px, 4vw, 64px);
padding: clamp(22px, 2.4vw, 34px);
border-radius: var(--s-radius);
background: var(--s-grey);
}
.af-ship__ask-h {
margin: 0 0 10px;
color: var(--s-ink);
font-size: clamp(22px, 0.9vw + 18.5px, 28px) !important;
font-weight: 700;
line-height: 1.25 !important;
}
.af-ship__ask-p {
max-width: 720px;
margin: 0 0 22px;
color: var(--s-body);
font-size: inherit;
line-height: 1.6;
}
.af-ship__ask-row {
display: grid;
gap: 12px;
}
@media (min-width: 620px) {
.af-ship__ask-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 760px;
}
}
/* 68px tall, well past the 48px this project takes as its floor, because the
two things in this box are the two things somebody who did not find their
answer will reach for, and they will reach with a thumb. */
.af-ship__call,
.af-ship__mail {
display: flex;
align-items: center;
gap: 14px;
min-height: 68px;
padding: 12px 20px;
border-radius: 14px;
text-decoration: none;
}
.af-ship__call {
background: var(--s-green);
color: #fff;
}
.af-ship__call:hover,
.af-ship__call:focus {
background: #123f16;
color: #fff;
text-decoration: none;
}
.af-ship__mail {
border: 1px solid var(--s-line);
background: #fff;
color: var(--s-ink);
}
.af-ship__mail:hover,
.af-ship__mail:focus {
border-color: var(--s-green);
color: var(--s-ink);
text-decoration: none;
}
.af-ship__call:focus-visible,
.af-ship__mail:focus-visible {
outline: 2px solid var(--s-focus);
outline-offset: 2px;
}
.af-ship__call-i {
display: inline-flex;
flex: 0 0 auto;
}
.af-ship__call-t {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.af-ship__call-l {
font-size: 14px;
opacity: 0.92;
}
.af-ship__call-v {
font-size: clamp(16px, 0.35vw + 14.6px, 19px);
font-weight: 700;
/* the e-mail address is 25 characters and must not push the card wider than
a 360px screen */
overflow-wrap: anywhere;
}
.af-ship__ask-hours {
margin: 14px 0 0;
color: var(--s-muted);
font-size: 16px;
}
.af-ship__ask-legal {
margin: 14px 0 0;
font-size: 16px;
}
.af-ship__ask-legal a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--s-green);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ------------------------------------------------------------------
Phones and small tablets
------------------------------------------------------------------ */
@media (max-width: 1239px) {
.af-ship__sect {
scroll-margin-top: 24px;
}
/* The drawing follows the words it explains rather than leading them - which
is already the document order, and is stated here so that a later change
to the markup cannot quietly reverse it. On a 360px screen a picture above
the heading pushes the heading below the fold, and the reader has to
scroll to find out what they are looking at. */
.af-ship__art {
order: 2;
}
.af-art {
max-width: 460px;
padding: 12px;
}
}
@media (max-width: 479px) {
.af-ship__h {
gap: 10px;
}
.af-ship__fact {
padding: 14px 16px;
}
}
/* Paper has no motion and no tint, and a reader printing this wants the terms
rather than the pictures. */
@media print {
.af-ship__hero-art,
.af-ship__art {
display: none;
}
.af-ship__fact,
.af-ship__free,
.af-ship__ask {
background: transparent;
border: 1px solid #999;
}
}