. HTML forbids
an anchor inside an anchor, so the parser implicitly closes the brand
link the moment it meets this one: the edit anchor lands as a SIBLING
of the brand rather than a child of it. That puts it outside the reach
of the pointer-events:auto on .stock-header__brand above, so the
header's pointer-events:none leaves the icon visible but unclickable.
Scoped to .stock-header rather than to the brand for exactly that
reason -- where the parser leaves the anchor is not something to rely
on. z-index keeps it above the brand link if the two ever overlap;
unlike the hero's edit button there is no stacking ceiling to fight
here, since the header's own z-index sits in the root context. */
.stock-header .edititem,
.stock-header .Add-Data-Item,
.stock-header .Edit-Data-Item,
.stock-header .Delete-Data-Item {
position: relative;
z-index: 1;
pointer-events: auto;
}
/* ---------- Hero ---------- */
/* Draft: navy block is 752 tall, h1 starts at 201, note ends ~655. */
.stock-hero {
position: relative;
isolation: isolate;
padding: calc(200 * var(--stock-u)) 0 calc(82 * var(--stock-u));
background: #213153;
text-align: center;
overflow: hidden;
}
/* The photograph itself is NOT set here -- it comes in as an ![]()
, from
the ##(Hero Image)## token in the page template, so it is editable in
the CMS. This element only supplies the box it fills and the navy the
hero falls back to if no image is set.
No z-index, deliberately. This used to sit at -2 with the overlay at
-1, which worked for the photo but buried the CMS admin button that
gets injected in here alongside it: a negative z-index makes this a
stacking context, and NOTHING inside it can then be raised above the
overlay -- the button rendered under the navy veil and could not be
clicked at all. Left at auto, this stays a plain positioned element,
the overlay still covers it by DOM order alone (it comes next in the
markup), and the admin rule further down is free to lift the button
clear. Order in this section is therefore: media, overlay, ::after
wedge (z-index 1), .container (z-index 2). */
.stock-hero__media {
position: absolute;
inset: 0;
overflow: hidden;
background-color: #213153;
}
/* object-fit/-position are the ![]()
equivalents of background-size and
background-position, and carry the crop the draft asks for. Sized off
the media div rather than the file, so whatever dimensions get
uploaded still fill the hero.
NOT centred. The draft places the photo so the hero shows from 27.8%
to 96.9% of its height -- i.e. weighted right down to the bottom of
the frame, which puts the desks and monitors where the draft has
them. Centring (50%) shows a visibly different slice of the scene.
cover, not contain: unlike the supplied hero.png this is a plain
rectangular photo with no angled edge baked into its alpha, so
cropping it is safe and the ::after wedge below is free to own the
angle. If a PNG with the diagonal already in it is ever uploaded
instead, it must be anchored center top or cover will slide that
baked edge up into view against the wedge. */
.stock-hero__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 90%;
}
/* Measured off the draft rather than guessed: regressing the composite
hero against the photo the PDF embeds gives a FLAT veil of
rgb(42,60,101) at ~0.75, not the near-opaque 0.9-0.94 gradient this
previously used -- at that strength no photograph is visible. */
/* Also no z-index -- see the note on .stock-hero__media above. It follows
the media div in the markup, so it paints over the photo on DOM order
alone and needs no stacking value of its own. */
.stock-hero__overlay {
position: absolute;
inset: 0;
background: rgba(42, 60, 101, 0.75);
}
/* Angled bottom edge. Verified against the draft: the boundary runs
from y=752 at the left edge to y=661 at the right, i.e. the white
wedge is deepest on the RIGHT. Same clip-path convention as
.second-life-hero-bg in skin/css/styles.css. */
.stock-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: calc(91 * var(--stock-u));
z-index: 1;
background: #ffffff;
clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.stock-hero .container {
position: relative;
z-index: 2;
}
/* Admin only. The CMS injects its "add/edit item" link INSIDE
.stock-hero__media, which is the full-bleed photo box -- so by default
the icon lands in the very top-left corner of the hero, under the navy
veil and behind the headline. Drop it down the left-hand side instead,
into the empty navy band the hero's 200 of top padding leaves above
the h1, so it clears the copy without leaving the hero (the section is
overflow:hidden, so anything pushed outside it is simply clipped
away).
Offset from the viewport edge in px rather than --stock-u: this is an
admin affordance, not part of the drawn layout, so it wants a constant
20 of breathing room at every width rather than one that scales with
the design grid.
z-index 3 clears the wedge (1) and the copy container (2). This only
works because .stock-hero__media no longer carries a negative z-index
-- see the note there.
Scoped to .stock-hero__media so it cannot disturb the same button
anywhere else on the site, where the generic rules in the Admin
Styling block near the top of this file already handle it.
120 is not arbitrary -- it is the one clear band available:
0-86 .stock-header, which is position:absolute over the top of
the hero. Anything here is UNCLICKABLE no matter what
z-index it carries: the header's z-index 3 lives in the
page's root stacking context, while this button's lives
inside .stock-hero, which isolation:isolate pins at auto.
A child cannot out-stack an ancestor's ceiling, so clicks
land on the header's home link instead and navigate away.
120-157 free. (24px icon, ~37 units at desktop.)
200+ the h1, per the hero's top padding.
So keep this between the header and the headline. If the header's
height or the hero's top padding ever changes, re-check it. */
.stock-hero__media .Add-Data-Item,
.stock-hero__media .Edit-Data-Item,
.stock-hero__media .Delete-Data-Item {
position: absolute;
left: 20px;
top: calc(120 * var(--stock-u));
z-index: 3;
/* The icon is a bare PNG on a dark photograph, which gives nothing to
aim at. A white chip makes the target visible without it becoming
a feature of the page: 16px icon in 6px of padding is a 28px hit
area -- small, but still several times the icon alone. */
display: block;
padding: 6px;
background: #ffffff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
/* Belt and braces -- nothing sets pointer-events:none on an ancestor
of this today, but the hero is a stack of decorative overlays and
this must never become the thing that stops working. */
pointer-events: auto;
}
/* !important is needed only because the generic admin rule near the top
of this file pins these icons at 24px !important -- this is the same
declaration turned down, not a new fight. */
.stock-hero__media .Add-Data-Item img,
.stock-hero__media .Edit-Data-Item img,
.stock-hero__media .Delete-Data-Item img {
display: block;
width: 16px !important;
height: 16px !important;
}
.stock-hero h1 {
font-size: calc(70 * var(--stock-u));
color: #ffffff;
margin-bottom: calc(45 * var(--stock-u));
}
.stock-hero h1 .stock-hero__accent {
display: block;
color: #8dc53e;
}
.stock-hero__lead {
max-width: calc(1010 * var(--stock-u));
margin: 0 auto calc(78 * var(--stock-u));
color: #ffffff;
font-size: calc(24 * var(--stock-u));
}
.stock-hero__note {
margin-top: calc(15 * var(--stock-u));
color: #ffffff;
font-size: calc(21 * var(--stock-u));
}
/* ---------- Rich-text token wrappers ----------
.stock-hero__lead, .stock-hero__note, .stock-barriers__lead,
.stock-available__lead and .stock-refurb__intro each hold a ##(...)##
token in the page template. A rich-text token emits its own , and
a
cannot legally contain another
-- the browser closes the
outer one early, so the text lands OUTSIDE the styled element and the
styling is lost entirely. Those five therefore sit on a wrapper div
in the template rather than on a
.
Nothing extra is needed to make the type carry over: font-size,
colour, line-height and alignment all inherit onto the emitted
paragraph, and .stock-page :where(p) sets margin alone, so it cannot
overwrite any of them. The class rules also still match the plain
that stock-page.html uses, so one rule serves both.
Spacing is the one thing inheritance cannot do. .stock-page :where(p)
zeroes every paragraph margin, which is right for this page's fixed
copy but would run a multi-paragraph token together into one block,
so restore a gap between them and drop it after the last. In em, to
stay proportional across the five different sizes involved. */
.stock-hero__lead p,
.stock-hero__note p,
.stock-barriers__lead p,
.stock-available__lead p {
margin-bottom: 0.7em;
}
.stock-hero__lead p:last-child,
.stock-hero__note p:last-child,
.stock-barriers__lead p:last-child,
.stock-available__lead p:last-child {
margin-bottom: 0;
}
/* ---------- Problem ---------- */
/* Draft: heading column 125-895, card column 958-1753, leaving 89
of trailing space inside the 1717 container. */
.stock-problem__grid {
display: grid;
grid-template-columns: 1fr calc(795 * var(--stock-u));
gap: calc(63 * var(--stock-u));
align-items: center;
padding-right: calc(89 * var(--stock-u));
}
.stock-problem h2 {
font-size: calc(48 * var(--stock-u));
color: #4d4d4d;
}
.stock-problem h2 .stock-problem__line {
display: block;
}
.stock-problem h2 .stock-problem__accent {
color: #8dc53e;
}
/* Card: 795 x 160, 40 apart. Icon 103 x 90, inset 57 from the left
and 32 from the top, with 28 of clear space before the text. */
/* The draft's cards are a flat 160 tall regardless of how much copy
they hold, and the copy column is capped at 460 to reproduce its
line breaks. min-height rather than height: at 1920 the copy fits
and the card measures exactly 160, but text does not re-wrap
perfectly proportionally at smaller sizes, and a fixed height
clips the longer card there. */
.stock-problem__card {
display: flex;
gap: calc(28 * var(--stock-u));
align-items: flex-start;
min-height: calc(160 * var(--stock-u));
padding: calc(28 * var(--stock-u)) calc(30 * var(--stock-u)) 0 calc(57 * var(--stock-u));
margin-bottom: calc(40 * var(--stock-u));
background: #ffffff;
border-radius: calc(10 * var(--stock-u));
/* NO border. Profiling the draft across the card edge at 600dpi
shows a soft gradient that only dips to 253 and fades over
about 8 either side -- there is no hard line. A 1px solid
#edf0f4 border reads at luminance 240, i.e. a crisp edge the
draft does not have.
Two shadows reproduce the measured falloff: a faint all-round
halo for the soft left/top edge, then a stronger offset one for
the right/bottom, which fall to 229 and 220 respectively and
reach about 25 out. */
/* THE LEFT EDGE MUST NOT BE VISIBLE. In the draft the card is
white on a white page with nothing on its left (254 against
255), so that edge simply dissolves -- you cannot see where the
rectangle starts. Counter-intuitively, adding a shadow on the
left does the OPPOSITE of blurring it: the shadow sits outside
the card, so grey-meeting-white draws the edge more sharply. A
1px border does the same thing, worse.
So both layers are pushed far enough right (x-offset well over
2x the blur sigma) that nothing bleeds past the left edge,
keeping it at 253.5+ and invisible, while still carrying the
draft's shadow on the right and bottom. Do not add a negative
x-offset layer here. */
box-shadow:
calc(24 * var(--stock-u)) calc(10 * var(--stock-u)) calc(28 * var(--stock-u)) rgba(35, 47, 82, 0.08),
calc(12 * var(--stock-u)) calc(24 * var(--stock-u)) calc(16 * var(--stock-u)) rgba(35, 47, 82, 0.08);
}
/* The three icons are 67, 103 and 82 wide in the draft but each is
centred on the same axis, so they share one 103-wide box and
contain keeps every one at its own aspect. */
.stock-problem__icon {
flex: 0 0 calc(103 * var(--stock-u));
width: calc(103 * var(--stock-u));
height: calc(90 * var(--stock-u));
margin-top: calc(4 * var(--stock-u));
object-fit: contain;
}
/* 577 is the copy width the draft actually wraps to: its widest line
measures 553, and the next word would overflow 577. */
.stock-problem__copy {
max-width: calc(577 * var(--stock-u));
}
.stock-problem__card h3 {
margin-bottom: calc(10 * var(--stock-u));
font-size: calc(24 * var(--stock-u));
font-weight: 700;
color: #4d4d4d;
}
.stock-problem__card p {
font-size: calc(24 * var(--stock-u));
color: #4d4d4d;
}
/* ---------- Barriers ---------- */
/* overflow is visible so the green dot field can run on down past
this section and behind the refurb block, as it does in the draft */
.stock-barriers {
position: relative;
}
/* Decorative dot fields. Their left edges are taken from the draft
(green starts just inside the canvas, the light one bleeds off the
left). Behind everything, and non-interactive.
This is a WRAPPER round the image, not the image itself, because the
image is a ##(Dots Image)## token and we cannot rely on what the CMS
emits -- a bare ![]()
, one inside a
, or one inside a link would
all break a rule that had to land on the img directly. Holding the
position on a div we control means the box is right whatever turns up
inside it, and an empty token just renders nothing. Same shape as
.image-full-width elsewhere in this file. */
.stock-barriers__dots {
position: absolute;
left: calc(6 * var(--stock-u));
top: calc(51 * var(--stock-u));
width: calc(356 * var(--stock-u));
height: calc(1242 * var(--stock-u));
z-index: 0;
pointer-events: none;
}
.stock-barriers__dots img {
display: block;
width: 100%;
height: 100%;
/* the asset is 356x1242, exactly the box, so this is only insurance
against a replacement of a different shape being distorted */
object-fit: contain;
}
.stock-barriers__inner {
position: relative;
z-index: 1;
}
/* The leaf mark: 78x80 in the draft. The source PNG is only 46x48, so
it is displayed smaller than 1:1 on a normal display and will soften
on a retina one -- a ~104px-wide green asset would fix that.
Matched through the PARENT, not on a class of its own. The image is a
##(...)## token in the page template, and the CMS emits its own ![]()
with none of our classes on it, so .stock-barriers__logo would style
nothing once the hard-coded markup goes. Anchoring on the heading is
the same trick .image-full-width img and .green-banner img use
elsewhere in this file, and it keeps working for stock-page.html,
whose img is inside the same heading. */
.stock-barriers__heading img {
width: calc(78 * var(--stock-u));
height: calc(80 * var(--stock-u));
object-fit: contain;
}
.stock-barriers__heading {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: calc(20 * var(--stock-u));
margin-bottom: calc(10 * var(--stock-u));
font-size: calc(60 * var(--stock-u));
color: #414042;
}
/* The whole heading is deliberately ONE colour and ONE size, so this
span inherits everything from .stock-barriers__heading and carries
no styling of its own. It stays in the markup only so the brand
name can be picked out again later if wanted.
This departs from the draft, which sets "2nd Life IT" very slightly
apart: a flat dark green #455a37 at 57.7px against #414042 at 60px
for "helps remove these barriers". (It is NOT the site's
blue-to-green .text-grad-green gradient -- sampling across the word
in the PDF gives a constant value.) To restore the draft, give this
rule `font-size: calc(57.7 * var(--stock-u))` and
`color: #455a37`. */
.stock-barriers__lead {
max-width: calc(1200 * var(--stock-u));
margin: 0 auto;
font-size: calc(30 * var(--stock-u));
line-height: 1.2;
color: #414042;
text-align: center;
}
/* Four 414-wide cards, 22 apart: 4*414 + 3*22 = 1722 ~= container */
.stock-barriers__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: calc(22 * var(--stock-u));
margin-top: calc(81 * var(--stock-u));
}
/* Renewables runs the same section on two cards rather than four, so it
opts in with this modifier on the grid rather than the card template
(both pages emit an identical .stock-barrier-card, so there is nothing
on the card itself to hang a rule on).
The two tracks are pinned to a fixed width rather than left at 1fr, so
the pair stays centred instead of stretching to ~850 each. 500 rather
than the four-up row's 414: two cards at 414 read as narrow with the
whole container to themselves. That leaves 2*500 + 22 = 1022 of
content in a 1717 container, so justify-content centres the pair in
the leftover 695.
500 is a chosen width, not a fitted one. The live cards hold rich text
at an inline 16px with hand-placed
s, and 27 of side padding
leaves a 446 copy column -- about 290px at the >=1200 step. The
longest intended line, "Best for organisations avoiding debt or
preferring", measures ~345px at 16px, so it wraps here and the
author's break lands mid-sentence. It takes about 570 to hold that
line; the alternative is editing the copy to break earlier.
The 539 min-height does not govern either: the live cards run well
past it on content, so the drawn portrait proportion is already gone.
Past ~700 the pair fills the container and repeat(2, 1fr) would be
the simpler declaration.
Deliberately placed here, ABOVE the two breakpoint blocks at the foot
of this file: it carries the same specificity as the plain
.stock-barriers__grid rules inside those media queries, so source
order settles it and the responsive stack still wins -- fixed-width
and centred on desktop, then back to full-width tracks at <=991.98
(where a hard 414 would start to crowd the container) and 1-up at
<=575.98. Putting it after them would pin the page at two fixed
columns on phones. */
.stock-barriers__grid--2up {
grid-template-columns: repeat(2, calc(500 * var(--stock-u)));
justify-content: center;
}
.stock-barrier-card {
min-height: calc(539 * var(--stock-u));
/* 27 side padding leaves a 360 copy column -- the draft's widest
line here is 353 and the next word would overflow 360, which
is what produces its 5-line wrap. */
padding: calc(70 * var(--stock-u)) calc(27 * var(--stock-u));
border-radius: calc(16 * var(--stock-u));
color: #ffffff;
text-align: center;
}
/* text-wrap:balance is what lets the headings drop the
they used to
carry. Plain wrapping is greedy -- it fills each line as far as it can
-- which gets two of the four draft breaks wrong. Balance instead picks
the breaks that make the LONGEST line as short as possible, and that
reproduces all four. Measured off the draft at 48 in the 360 copy
column (word widths, 10.5 spaces):
Savings up to 40% greedy "Savings up to"/"40%" longest 320
balanced "Savings"/"up to 40%" 245 <-
Flexible ways to buy greedy "Flexible ways"/"to buy" 321
balanced "Flexible"/"ways to buy" 285 <-
Warranty included 440 on one line, so both break here 224
Keep Deals Moving 455 on one line, so both break here 266
Where support is missing it falls back to greedy wrapping: cards 3 and
4 are unaffected, 1 and 2 break a word later, still two lines, nothing
overflows. No card title should need a
again unless a single word
exceeds 360 (about 13 characters at this size). */
.stock-barrier-card h3 {
margin-bottom: calc(40 * var(--stock-u));
font-size: calc(48 * var(--stock-u));
color: #ffffff;
text-wrap: balance;
}
.stock-barrier-card p {
font-size: calc(30 * var(--stock-u));
line-height: 1.2;
color: rgba(255, 255, 255, 0.92);
}
/* Each card's background is an inline style on the card itself, not a
modifier class, so the colour can be set per card from the template.
The four in the draft are #8bc53e, #455a37, #79a238, #78b549 -- note
the sequence is NOT monotonic, card 2 is much the darkest and card 4
comes back lighter than 3, so they are not a shade ramp and must not
be regenerated as one. Deliberately no background here: a default
would silently stand in for a card whose inline style went missing. */
/* ---------- Refurbished ---------- */
/* Draft: green ellipse 856 x 448, technician photo 718 x 817 sitting
on top of and above it; copy column right-aligned. */
.stock-refurb__grid {
display: grid;
grid-template-columns: calc(856 * var(--stock-u)) 1fr;
gap: calc(132 * var(--stock-u));
align-items: center;
}
.stock-refurb__media {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
min-height: calc(817 * var(--stock-u));
}
/* Green ellipse behind the photograph. The draft sits it flush with the
bottom of the column (bottom:0) so the technician stands on it; this
is deliberately raised off that baseline instead, which lifts it clear
of his feet and reads as a backdrop rather than a plinth. Change the
120 alone to tune how far up it goes -- 0 restores the draft. */
.stock-refurb__media::before {
content: "";
position: absolute;
left: 0;
/* min() rather than the flat 856 measured off the draft. Below 576
the container drops to the viewport width but --stock-u stays
pinned at its 0.58 floor, so 856 units resolve to ~496px against
a ~351px page and the ellipse pushes the whole document into
horizontal scroll. */
width: min(100%, calc(856 * var(--stock-u)));
height: calc(448 * var(--stock-u));
bottom: calc(120 * var(--stock-u));
background: #8dc53e;
border-radius: 50%;
z-index: 0;
}
/* Opt-out for pages that share this section but not the backdrop --
currently the renewables template. content:none rather than display or
background, so the pseudo-element is never generated at all. The stock
page and stock-page.html carry no modifier and keep the ellipse. */
.stock-refurb--no-ellipse .stock-refurb__media::before {
content: none;
}
/* Matched through the PARENT as well as the class, exactly as
.stock-barriers__heading img is. The photo is a ##(Technician Image)##
token and the CMS emits a bare ![]()
carrying none of our classes, so
.stock-refurb__photo on its own matches nothing on the live page and
the 720x818 asset renders at its intrinsic size -- wider than its own
column at every breakpoint, and wider than the page below 768. The
class stays for stock-page.html, whose img still carries it. */
.stock-refurb__photo,
.stock-refurb__media img {
position: relative;
z-index: 1;
width: calc(718 * var(--stock-u));
max-width: 100%;
height: calc(817 * var(--stock-u));
object-fit: contain;
}
.stock-refurb__copy {
text-align: right;
}
.stock-refurb__copy h2 {
font-size: calc(48 * var(--stock-u));
color: #4d4d4d;
margin-bottom: calc(88 * var(--stock-u));
}
.stock-refurb__copy h2 .stock-refurb__accent {
display: block;
color: #8dc53e;
}
.stock-refurb__copy p {
font-size: calc(24 * var(--stock-u));
color: #4d4d4d;
margin-bottom: 25px;
}
/* Class only -- NOT "p.stock-refurb__intro". Naming the element tied
this to markup that is being replaced by a rich-text token, and the
weight has to survive the class moving onto a wrapper. It reaches an
emitted
by inheritance, since .stock-refurb__copy p above sets no
weight of its own. */
.stock-refurb__intro {
font-weight: 500;
}
/* The 500 above is a lead-in weight: it suits the stock page, where this
slot holds one short line. The renewables template fills it with a full
body paragraph, and 500 over that much text reads as bold against the
400 used everywhere else on the page. Inherited by the emitted
, the
same way the 500 is. */
.stock-refurb__intro--regular,
.stock-refurb__intro--regular p {
font-weight: 400;
}
/* ---------- FAQ (renewables page) ----------
The renewables page runs the 2nd Life FAQ section here instead of
"Available today". That markup is lifted straight from
"second-life-it page template.html" and leans on theme.min.css
(content-space-*, w-md-75), which this page already loads -- so it
needs almost no layout CSS of its own.
Spacing is one exception. The gap above this section was the 47 of
.stock-barriers bottom padding plus the 3rem of content-space-1 on the
inner container, which ran the FAQ up close under the cards. The extra
goes here rather than on .stock-barriers because the stock page shares
that section and would have been pushed apart too, whereas .stock-faq
is on the renewables page alone. In --stock-u so it holds its
proportion against the sections either side of it. */
.stock-faq {
padding-top: calc(70 * var(--stock-u));
}
/* The heading is the other exception. The 2nd Life markup carries
.text-grad-green, the site-wide blue-to-green gradient, which is the
only section title on this page not in flat grey. .text-grad-green is
left alone -- it is shared by most of the site -- and the heading
takes this class instead.
The colour is .stock-barriers__heading's, so "Frequently Asked
Questions" matches "Operating vs Finance Lease" rather than the
#4d4d4d used by the problem and refurbished headings -- the greys are
close but NOT the same value. Weight, letter-spacing and line-height
match already: both are h2s taking them from
.stock-page :where(h1, h2, h3).
The size deliberately does NOT match. The barriers heading is 60
across the full container; this one sits in a w-lg-50 wrapper with
about half the width, where 60 wraps "Frequently Asked Questions"
onto two lines. 52 is a size that suits the narrower column -- widen
the wrapper instead if the two headings ever need to measure the
same. Neither size is touched by a media query. */
.stock-faq__title {
font-size: calc(52 * var(--stock-u));
color: #414042;
}
/* Answers are the one place on this page with real reading matter: three
or four sentences per paragraph, two or three paragraphs per answer.
Everything else is a heading, a card line or a lead, so .stock-page's
1.21 line-height suits them and is much too tight here. 1.6 is a
reading measure, and it is set on .stock-faq p rather than raising the
page value, which would loosen every card and heading with it.
.stock-page :where(p) also zeroes every paragraph margin on this page,
which would run a multi-paragraph answer together into a single block.
In em so the gap tracks the text size, and 0.9 rather than a flat rule:
against 1.6 line-height a paragraph break has to clear the line gaps
inside the paragraph to read as a break at all. */
.stock-faq p {
line-height: 1.6;
margin-bottom: 0.9em;
}
.stock-faq p:last-child {
margin-bottom: 0;
}
/* Questions sit tight to their own answer, which is what pairs them --
Bootstrap's h4 leaves 0.5rem. */
.stock-faq h4 {
margin-bottom: 0.6rem;
line-height: 1.35;
}
/* Space BETWEEN items, vertically. The columns carry Bootstrap's mb-3
mb-md-5, whose margin is !important and cannot be raised without
matching that, so the extra goes on padding instead -- same visual
result, no specificity fight. Keyed to the row so it cannot reach the
cards or the form. */
.stock-faq .row > div {
padding-bottom: 1rem;
}
/* And horizontally, once the columns actually sit side by side -- col-sm-6
splits them at 576, below which this would only narrow a full-width
column for nothing.
Widening the columns' own padding rather than the row's --bs-gutter-x.
The gutter looks like the natural handle, but .row turns it into
negative left/right margins as well, and at 3rem those (-24px a side)
outrun the 12px of container padding and hang the row over the page
edge. Padding stays inside the column box. 1.25rem against Bootstrap's
0.75 default puts 2.5rem between the two columns instead of 1.5rem. */
@media (min-width: 576px) {
.stock-faq .row > div {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
/* ---------- Available today ---------- */
/* Two flat bands with a hard edge 196 down, exactly as the draft has
it -- the title and lead sit on the lighter tone, the product cards
and price banner on the deeper one. */
.stock-available {
background: linear-gradient(to bottom,
#ecf5de 0,
#ecf5de calc(196 * var(--stock-u)),
#dcedc3 calc(196 * var(--stock-u)),
#dcedc3 100%);
padding: calc(14 * var(--stock-u)) 0 calc(67 * var(--stock-u));
}
/* The heading is centred with a single 1px green rule BENEATH it
(1114 wide) -- it is NOT flanked by rules on either side. */
.stock-available__title {
width: min(100%, calc(1114 * var(--stock-u)));
margin: 0 auto;
text-align: center;
}
.stock-available__title h2 {
font-size: calc(63 * var(--stock-u));
color: #4d4d4d;
}
.stock-available__rule {
width: min(100%, calc(1114 * var(--stock-u)));
height: 1px;
margin: calc(22 * var(--stock-u)) auto calc(20 * var(--stock-u));
background: #93c848;
}
.stock-available__lead {
margin-bottom: calc(97 * var(--stock-u));
font-size: calc(23 * var(--stock-u));
color: #4d4d4d;
text-align: center;
}
/* The draft draws this row ~4% wider than the rest of the page
(1780 vs 1717), which reads as Figma drift rather than intent, so
it sits on the standard container like everything else.
3 cards, 75 apart. */
.stock-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(75 * var(--stock-u));
}
.stock-product {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(790 * var(--stock-u));
padding: calc(50 * var(--stock-u)) calc(15 * var(--stock-u)) calc(58 * var(--stock-u));
background: #ffffff;
border-radius: calc(8 * var(--stock-u));
/* Deliberately NO shadow. Unlike the problem cards, these sit on
the green band as flat, crisp rectangles: profiling the draft
across this edge goes 217.3 (green) straight to 255 (white)
with no transition, and reads 217.3 at every distance on all
four sides. The 0/12/28 shadow previously here was invented. */
text-align: center;
}
.stock-product--soon {
background: #c3e09b;
}
/* pill: 227 x 47, centred */
.stock-product__status {
display: flex;
align-items: center;
justify-content: center;
width: calc(227 * var(--stock-u));
height: calc(47 * var(--stock-u));
margin-bottom: calc(37 * var(--stock-u));
border: 1px solid #8dc53e;
border-radius: calc(24 * var(--stock-u));
background: #ffffff;
color: #8dc53e;
font-size: calc(24 * var(--stock-u));
font-weight: 700;
}
.stock-product__status--soon {
background: #8dc53e;
border-color: #8dc53e;
color: #ffffff;
}
/* draft product shot: 511 x 312 */
.stock-product__image {
width: calc(511 * var(--stock-u));
max-width: 100%;
height: calc(312 * var(--stock-u));
/* the coming-soon shot is 392x285, not 511x312 -- contain keeps
every card's box identical without stretching that one */
object-fit: contain;
margin-bottom: calc(12 * var(--stock-u));
}
.stock-product h3 {
margin-bottom: calc(20 * var(--stock-u));
font-size: calc(38 * var(--stock-u));
font-weight: 700;
color: #4d4d4d;
}
/* h3 + p because the spec line comes from the item template's ##editor##
token, which emits a bare
-- .stock-product__spec matches only the
hand-written markup in stock-page.html. Without it the line loses both
its 16 of bottom margin and its opened-up leading, so it closes up
against the warranty line, worst in the single-column layout below 992
where the copy wraps to the most lines. */
.stock-product__spec,
.stock-product h3 + p {
margin-bottom: calc(16 * var(--stock-u));
font-size: calc(24 * var(--stock-u));
/* the one place the draft opens the leading up to 1.5 */
line-height: 1.5;
color: #4d4d4d;
}
.stock-product__meta {
margin-bottom: calc(29 * var(--stock-u));
font-size: calc(24 * var(--stock-u));
font-weight: 600;
color: #4d4d4d;
}
.stock-product__cta {
margin-top: auto;
}
/* banner: 1235 x 60 */
.stock-price-banner {
display: flex;
align-items: center;
justify-content: center;
width: min(100%, calc(1235 * var(--stock-u)));
height: calc(60 * var(--stock-u));
margin: calc(85 * var(--stock-u)) auto 0;
background: #8dc53e;
border-radius: calc(6 * var(--stock-u));
color: #ffffff;
font-size: calc(33 * var(--stock-u));
font-weight: 600;
text-align: center;
}
/* ---------- CTA / form ---------- */
.stock-cta {
position: relative;
background: #213153;
overflow: hidden;
padding: calc(110 * var(--stock-u)) 0 calc(130 * var(--stock-u));
}
/* This one is positioned partly off the left edge in the draft, which
is why the section keeps overflow:hidden -- otherwise it would push
the page into horizontal scroll.
A wrapper round the image rather than the image itself, for the same
reason as .stock-barriers__dots: the position has to survive the
markup becoming a token. That matters more here than anywhere else on
the page -- this rule is the only thing holding a 357x1242 image at a
NEGATIVE left offset, so losing it would drop the strip into the flow
at full height and add ~800px of navy to the section. */
.stock-cta__dots {
position: absolute;
left: calc(-62 * var(--stock-u));
top: calc(106 * var(--stock-u));
width: calc(357 * var(--stock-u));
height: calc(1242 * var(--stock-u));
z-index: 0;
pointer-events: none;
}
.stock-cta__dots img {
display: block;
width: 100%;
height: 100%;
/* asset is 357x1242, exactly the box -- insurance only */
object-fit: contain;
}
.stock-cta__grid {
display: grid;
grid-template-columns: 1fr calc(926 * var(--stock-u));
gap: calc(100 * var(--stock-u));
position: relative;
z-index: 1;
}
/* the copy column starts a little below the form panel in the draft */
.stock-cta__copy {
padding-top: calc(18 * var(--stock-u));
}
.stock-cta h2 {
font-size: calc(48 * var(--stock-u));
color: #ffffff;
margin-bottom: calc(60 * var(--stock-u));
}
.stock-cta h2 .stock-cta__accent {
display: block;
color: #8dc53e;
}
.stock-cta p {
margin-bottom: calc(43 * var(--stock-u));
font-size: calc(36 * var(--stock-u));
line-height: 1.19;
color: rgba(255, 255, 255, 0.85);
}
.stock-cta__illustration,
.stock-cta__copy img {
display: block;
width: calc(251 * var(--stock-u));
max-width: 100%;
height: calc(215 * var(--stock-u));
object-fit: contain;
margin-top: calc(44 * var(--stock-u));
margin-left: auto;
}
/* panel: 926 x 965, 59 of padding */
.stock-form {
min-height: calc(965 * var(--stock-u));
padding: calc(42 * var(--stock-u)) calc(59 * var(--stock-u)) calc(59 * var(--stock-u));
/* over --stock-navy this resolves to the draft's #4d5975 */
background: rgba(255, 255, 255, 0.2);
border-radius: calc(8 * var(--stock-u));
}
.stock-form__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(43 * var(--stock-u));
}
.stock-form__label {
display: block;
margin-bottom: calc(19 * var(--stock-u));
color: #ffffff;
font-size: calc(36 * var(--stock-u));
font-weight: 700;
text-transform: uppercase;
}
/* fields are 74 tall; name/company 375 wide, the rest full width */
.stock-form__field {
width: 100%;
height: calc(74 * var(--stock-u));
padding: 0 calc(18 * var(--stock-u));
margin-bottom: calc(35 * var(--stock-u));
background: #adb2bf;
border: 0;
border-radius: calc(6 * var(--stock-u));
color: #213153;
font-size: calc(24 * var(--stock-u));
}
.stock-form__field:focus {
outline: calc(2 * var(--stock-u)) solid #8dc53e;
outline-offset: 1px;
}
.stock-form__field--area {
height: calc(308 * var(--stock-u));
padding: calc(18 * var(--stock-u));
margin-bottom: 0;
resize: vertical;
}
.stock-form__zoho-note {
padding: calc(8 * var(--stock-u));
margin: calc(-20 * var(--stock-u)) 0 calc(35 * var(--stock-u));
border: 1px dashed rgba(255, 255, 255, 0.4);
border-radius: calc(6 * var(--stock-u));
color: rgba(255, 255, 255, 0.7);
font-size: calc(20 * var(--stock-u));
font-weight: 600;
letter-spacing: 0.06em;
text-align: center;
text-transform: uppercase;
}
/* ---------- Footer ---------- */
.stock-footer {
padding: calc(113 * var(--stock-u)) 0 calc(129 * var(--stock-u));
background: #213153;
}
.stock-footer__divider {
height: 1px;
margin-bottom: calc(65 * var(--stock-u));
background: rgba(255, 255, 255, 0.15);
}
/* Third column is auto so the icons take only what they need and the
text column keeps the rest. */
.stock-footer__row {
display: grid;
grid-template-columns: calc(292 * var(--stock-u)) 1fr auto;
align-items: center;
}
/* Social icons. NOT from the draft -- its footer is the logo and the
copyright line only -- these match innovent.co.uk, which carries the
same five platforms in this order, and they reuse the same
/ClientArea/images/footer-icons assets about.html and blog-article.html
already link. Deliberately on a stock- class rather than the site's
.social, which brings its own inline-block and gradient rules.
Sized to 46, the footer logo's height, so the two ends of the row line
up as one band. The assets are white glyphs on the blue-to-green brand
circle, which is why they need no treatment to sit on the navy. */
.stock-footer__social {
display: flex;
align-items: center;
justify-content: flex-end;
gap: calc(12 * var(--stock-u));
margin: 0;
/* Bootstrap puts 2rem of padding-left on every ul */
padding: 0;
list-style: none;
}
.stock-footer__social a {
display: block;
transition: opacity 0.15s ease;
}
.stock-footer__social a:hover {
opacity: 0.7;
}
.stock-footer__social img {
display: block;
width: calc(46 * var(--stock-u));
height: calc(46 * var(--stock-u));
}
/* The overlap fix. ##(Footer Logo)## emits a classless ![]()
, so
.stock-footer__logo matched nothing on the live page and logo-white.png
rendered at its intrinsic 209px inside a track only
calc(292 * var(--stock-u)) = 190px wide. A grid item does not shrink to
its track, so the extra 19px spilled straight over the copy in column
two. Anchoring on the first column gets the box back on whatever the
CMS emits; the class stays for stock-page.html. */
.stock-footer__logo,
.stock-footer__row > div:first-child img {
width: calc(208 * var(--stock-u));
max-width: 100%;
height: calc(46 * var(--stock-u));
object-fit: contain;
margin-bottom: 20px;
}
.stock-footer p {
font-size: calc(18 * var(--stock-u));
line-height: 1.22;
color: rgba(255, 255, 255, 0.65);
}
/* ---------- Section rhythm ---------- */
.stock-problem {
padding: calc(64 * var(--stock-u)) 0 calc(74 * var(--stock-u));
}
.stock-barriers {
padding: calc(74 * var(--stock-u)) 0 calc(47 * var(--stock-u));
}
/* Sits above the green dot field that runs down into it, so the green
ellipse and photo cover the dots rather than the reverse. */
.stock-refurb {
position: relative;
z-index: 1;
padding: calc(40 * var(--stock-u)) 0 calc(41 * var(--stock-u));
}
/* ---------- Responsive ----------
The draft is desktop-only, so below 992 the grids collapse and a
few sizes are eased off; everything else keeps scaling on
--stock-u, which is pinned to its 0.6 floor by then. */
@media (max-width: 991.98px) {
.stock-problem__grid,
.stock-refurb__grid,
.stock-cta__grid {
grid-template-columns: 1fr;
gap: calc(60 * var(--stock-u));
padding-right: 0;
}
.stock-barriers__grid {
grid-template-columns: repeat(2, 1fr);
}
.stock-products {
grid-template-columns: 1fr;
gap: calc(50 * var(--stock-u));
}
.stock-refurb__copy {
text-align: left;
}
.stock-refurb__media {
min-height: auto;
}
/* height:auto as well as the width. Stacked, the photo is free to
take the full column but --stock-u is pinned, so holding the
draft's flat 817 height would letterbox it inside a fixed 474px
box and open a large gap above the ellipse. */
.stock-refurb__photo,
.stock-refurb__media img {
width: 100%;
max-width: calc(718 * var(--stock-u));
height: auto;
}
.stock-barrier-card,
.stock-product {
min-height: auto;
}
.stock-footer__row {
grid-template-columns: 1fr;
gap: calc(30 * var(--stock-u));
}
/* stacked, so "right" no longer means anything -- line the icons up
with the logo and copy above them instead */
.stock-footer__social {
justify-content: flex-start;
}
}
@media (max-width: 575.98px) {
.stock-barriers__grid {
grid-template-columns: 1fr;
}
.stock-form__row {
grid-template-columns: 1fr;
gap: 0;
}
.stock-available__title h2 {
white-space: normal;
}
.stock-btn--green,
.stock-btn--navy,
.stock-btn--preorder {
width: auto;
padding: 0 calc(40 * var(--stock-u));
}
}