/* ============================================================================
LANDING v2 — the rebuilt home page.
Why this is a separate file rather than more of css/styles.css: styles.css
dresses fifteen other pages (submit, readers, coverage, admin, the report).
The last rebuild in that file deleted three live sections by accident while
removing two, because the blocks are interleaved and a range delete cannot
see that. Everything new lives here instead, every selector carries the `lx-`
prefix, and nothing in styles.css is touched — so the blast radius of this
page is this page.
The old landing rules (.intro, .goals, .audience, .perks, .ctypes, .faq,
.partnership, .journey, .banner, .submit-cta) are now unreferenced. They are
left in place deliberately: dead CSS costs a few KB, a careless delete costs
a live page. Worth a separate, careful pass later.
KEPT FROM styles.css, deliberately: .nav/.overlay (shared with every other
page) and the whole .hero block including .btn--white and .s1-booklet-btn —
the hero's buttons were explicitly not to be redesigned, so this file never
styles them. The hero's TEXT is new; its chrome is untouched.
========================================================================= */
/* Palette and rhythm tokens live in css/tokens.css now, shared with the
readers page so the two pages cannot drift apart. */
.landing {
/* Rhythm. One knob for the gap between sections; every lx- section pays it
on both edges, so the visible gap between any two is twice the token. */
--lx-y: 64px;
/* Height of the two full-bleed photo bands (the intro and the read). One
token so they match: left to themselves each was sized by its own picture's
aspect ratio — the intro's square crop gave 800px at a 1600px window, the
read's portrait crop 1108 — and the two sections looked unrelated. */
--lx-media-h: 320px;
}
@media (min-width: 600px) { .landing { --lx-media-h: 680px; } }
@media (min-width: 768px) { .landing { --lx-y: 88px; } }
@media (min-width: 1100px) { .landing { --lx-y: 110px; } }
/* ---- shared section scaffolding ---------------------------------------- */
.lx {
padding-block: var(--lx-y);
padding-inline: var(--lx-x);
background: var(--lx-cream);
color: var(--lx-ink);
}
/* The one section that lifts off the cream. It was a black slab before the
light hero; white keeps the same break in the rhythm without the page
going dark halfway down. */
.lx--white { background: var(--lx-white); color: var(--lx-ink); }
.lx--flush { padding-block: 0; padding-inline: 0; }
.lx__in {
inline-size: 100%;
max-inline-size: var(--lx-w);
margin-inline: auto;
}
/* Eyebrow + heading pair. Every section opens with these two, which is what
holds the page together more than any single rule below. */
.lx-eyebrow {
margin: 0 0 14px;
font-family: var(--font-head);
font-size: 13px;
font-weight: 700;
color: var(--lx-red);
letter-spacing: .02em;
}
.lx-h {
margin: 0;
font-family: var(--font-head);
font-size: clamp(28px, 4.4vw, 46px);
font-weight: 800;
line-height: 1.28;
letter-spacing: -.01em;
}
.lx-h--sm { font-size: clamp(24px, 3.4vw, 34px); }
.lx-sub {
margin: 14px 0 0;
font-size: 15px;
line-height: 1.85;
color: var(--lx-muted);
max-inline-size: 62ch;
}
/* Underlined text link — the design's only inline call to action. */
.lx-link {
display: inline-block;
/* Several of its parents are flex columns, whose default `stretch` pulled the
underline across the whole column. The rule is the link's width, so it has
to shrink-wrap the text. */
align-self: flex-start;
margin-block-start: 26px;
padding-block-end: 6px;
border-block-end: 1px solid currentColor;
font-family: var(--font-head);
font-size: 14px;
font-weight: 700;
color: var(--lx-ink);
transition: color 200ms ease, border-color 200ms ease;
}
.lx-link:hover { color: var(--lx-red); }
.lx-link--red { color: var(--lx-red); }
.lx-link--red:hover { color: var(--lx-ink); }
/* ---- hero: text only --------------------------------------------------- */
/* The bottom strip is the only new element here; the title, sub, buttons and
video all keep their styles from styles.css untouched. */
/* styles.css deliberately gives .hero__content no bottom padding, because the
old partner badge + quote rule below it spent that space. Both are gone and
the trust strip is absolutely positioned, so the content needs to clear it
itself or the CTAs sit behind the strip (measured: 55px of overlap). */
/* `.landing .hero .hero__content` and not the bare class: styles.css corrects
this box for English with `html[dir="ltr"] .hero__content`, which outranks a
single class and put the margin back to 40px (measured: 8px adrift in EN,
flush in AR). Three classes clears it in both directions. */
.landing .hero .hero__content {
/* Clears the trust strip. Below 960 the badge sits under this in the flow and
carries its own bottom margin, so the column only needs a small gap. */
padding-block-end: 28px;
/* Put the hero copy on the same container as the nav and every section.
styles.css positions this box with PHYSICAL margins (margin-right in
Arabic, mirrored to margin-left in a separate html[dir="ltr"] rule) plus a
40px inline padding, which left its text edge 48px inside the container.
Clearing both and re-stating the offset as a logical margin does two
things: it lands the text exactly on the container edge, and it mirrors on
its own, so the dir="ltr" rule has nothing left to correct.
The gutter is a margin rather than padding on purpose — max-width is 768px
here, and padding would eat into that column, narrowing the headline as
the window grows. */
margin: 0;
margin-inline-start: max(var(--sec-x), calc((100vw - var(--container)) / 2));
margin-inline-end: auto;
padding-inline: 0;
}
@media (min-width: 960px) { .landing .hero .hero__content { padding-block-end: 104px; } }
/* The accreditation badge. It is a direct child of .hero, not of
.hero__content, and that placement is the whole trick: .hero__content is
positioned, so a badge inside it could only ever anchor to the copy column's
edge (measured 228px short of the page gutter). Out here it anchors to the
hero itself.
Wide screens put it in the far corner, opposite the copy — left in Arabic,
right in English, since the inset is logical and mirrors. 960px, not a round
1024: the copy caps at 768 and the badge is ~96 wide, so side by side they
need about 888 inside the container, which a ~936px viewport gives.
Narrower than that they would collide, so the badge drops back into the flow
directly under the CTAs, on the same gutter as the copy — which is what
keeps it on a phone, where .hero__strip is dropped entirely. */
.landing .hero .partner {
/* position + z-index even in the flow case: .hero__shade is an absolutely
positioned sibling, and a static element paints below positioned ones —
the badge was laid out correctly and rendered underneath the shade, i.e.
invisible. .hero__content escapes the same trap with its own z-index: 10. */
position: relative;
z-index: 3;
align-self: flex-start;
margin-inline-start: max(var(--sec-x), calc((100vw - var(--container)) / 2));
margin-block-end: 76px;
}
@media (max-width: 640px) { .landing .hero .partner { margin-block-end: 40px; } }
@media (min-width: 960px) {
.landing .hero .partner {
position: absolute;
inset-block-end: 88px;
inset-inline-end: max(var(--sec-x), calc((100% - var(--container)) / 2));
margin: 0;
z-index: 3;
}
}
/* The trust strip pinned to the foot of the hero: accreditation on one side,
the SAIP note on the other. Replaces the old stacked badge + NDA line. */
.hero__strip {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
/* Above .hero__content, which is z-index 10 and — despite ending its copy at
the CTA — stretches its box all the way to the foot of the hero. That empty
tail was painting over this strip and swallowing every click on the SAIP
link: the link was reachable at narrow widths only because the strip is
hidden under 600px and the copy column is shorter above it.
Safe to lift: this band holds nothing else interactive — the CTA ends at
796px and the accreditation badge at 812px, well clear of the strip's top
at 846px. */
z-index: 11;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 28px;
padding-block: 16px;
padding-inline: max(var(--lx-x), calc((100% - var(--lx-w)) / 2));
/* No plate, no hairline, no blur: the line sits on the video itself.
.hero__shade already ends at an opaque --bg, so the foot of the hero is
dark and the text is legible on it — the strip's own 55% black on top of
that was a second darkening, and its hard top edge read as a black band
cut across the picture. */
}
.hero__strip p { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.62); }
.hero__strip a {
color: rgba(255,255,255,.92);
text-decoration: underline;
text-underline-offset: 3px;
/* The hit area, not the ink. "SAIP" sets at 24x13 CSS px, under WCAG 2.2
Target Size (Minimum)'s 24x24, and it is a four-letter word inside a
sentence — easy to miss by a pixel or two. The pseudo-element grows the
clickable box to 36x29 without touching the line box, so the sentence does
not reflow and the underline stays the width of the word. It fits inside
the strip's own 16px padding, so it reaches no other control. */
position: relative;
}
.hero__strip a::after {
content: "";
position: absolute;
inset-block: -8px;
inset-inline: -6px;
}
.hero__strip a:hover { color: #fff; }
@media (max-width: 600px) { .hero__strip { display: none; } }
/* ---- 1. intro: text beside a full-bleed photo -------------------------- */
/* The photo runs to the page edge on the outer side, which is why this section
is --flush and pads its own copy instead. */
.lx-intro { display: grid; gap: 0; }
@media (min-width: 900px) {
.lx-intro { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.lx-intro__copy {
display: flex;
flex-direction: column;
justify-content: center;
padding-block: var(--lx-y);
padding-inline: var(--lx-x);
}
@media (min-width: 900px) {
/* Align the copy's inner edge with the page container rather than the grid
cell, so this heading sits on the same line as every other section's. */
.lx-intro__copy { padding-inline-start: max(var(--lx-x), calc((100vw - var(--lx-w)) / 2)); }
}
.lx-intro__p { margin: 22px 0 0; font-size: 15px; line-height: 1.95; color: var(--lx-muted); max-inline-size: 46ch; }
.lx-intro__kicker { margin: 22px 0 0; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--lx-ink); }
.lx-intro__media { position: relative; min-block-size: var(--lx-media-h); background: #1a1613; }
.lx-intro__media img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
/* ---- 2. what we do: three columns under hairlines ---------------------- */
.lx-do__grid {
display: grid;
gap: 34px 40px;
margin-block-start: 56px;
}
@media (min-width: 760px) { .lx-do__grid { grid-template-columns: repeat(3, 1fr); } }
.lx-do__col { padding-block-start: 20px; border-block-start: 1px solid var(--lx-ink); }
.lx-do__t { margin: 0 0 12px; font-family: var(--font-head); font-size: 19px; font-weight: 800; }
.lx-do__b { margin: 0; font-size: 14px; line-height: 1.9; color: var(--lx-muted); }
/* ---- 4. what we look for: five numbered cards on white ------------------ */
/* Was a stack of ruled rows with a red dot. The design turns it into cards,
and the row it wants is three then two — so the grid is SIX columns and the
cards span 2 and 3 rather than being a three-up grid with an orphan row. */
.lx-look__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
margin: 48px 0 0;
padding: 0;
list-style: none;
}
.lx-look__card {
box-sizing: border-box;
display: flex;
flex-direction: column;
/* The number rides at the top and the statement sits on the floor of the
card, which is what gives the row its common baseline even though the
statements run to different lengths. */
justify-content: space-between;
gap: 20px;
padding: 26px 24px;
border-radius: 8px;
background: var(--lx-cream);
}
/* On white, the cards are cream; the fifth inverts to close the block. */
.lx-look__card--dark { background: var(--lx-black); }
.lx-look__head { display: flex; align-items: center; gap: 14px; }
.lx-look__n {
font-family: var(--font-head);
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
color: var(--lx-red);
}
/* The rule runs from the number to the card's edge, so it has to be the
flexible one in the row rather than a fixed width. */
.lx-look__rule { flex: 1 1 auto; block-size: 1px; background: rgba(0, 0, 0, .1); }
.lx-look__card--dark .lx-look__rule { background: rgba(249, 244, 239, .2); }
.lx-look__t {
margin: 0;
font-family: var(--font-head);
font-size: clamp(19px, 1.9vw, 28px);
font-weight: 600;
line-height: 1.55;
color: var(--lx-black);
}
.lx-look__card--dark .lx-look__t { color: var(--lx-cream); }
/* The break is placed, not left to the box width: wrapping on its own split
"غير مألوفة" across two lines on the third card and gave each card a
different shape. It is a real
, so it only helps where there IS room
for two lines — off on a phone, where the card is full width and the text
finds its own breaks, and on from the two-up layout upwards. */
.lx-look__br { display: none; }
@media (min-width: 700px) { .lx-look__br { display: inline; } }
/* Two up, with the fifth taking the full width rather than sitting alone in
half a row. */
@media (min-width: 700px) {
.lx-look__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lx-look__card { padding: 30px 30px; }
.lx-look__card--dark { grid-column: 1 / -1; }
}
/* The design's own arrangement, once there is room for three across. */
@media (min-width: 1040px) {
.lx-look__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.lx-look__card { grid-column: span 2; min-block-size: 230px; padding: 32px 36px; gap: 28px; }
/* The bottom row is two cards over the same six columns. */
.lx-look__card:nth-child(4),
.lx-look__card:nth-child(5) { grid-column: span 3; }
}
/* ---- 4. the read: photo, copy, the eight axes -------------------------- */
/* The single column needs minmax(0, 1fr) for the same reason the two-column
rule below does: an implicit track floors at min-content, and the axes grid
inside the copy measures 518px there. Below 600px that floor was wider than
the phone, so the whole section hung 126px off the edge and took the page's
horizontal scroll with it. */
.lx-read { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
/* Two equal halves, and they split earlier than the other full-bleed sections:
from 600px the copy and the photograph each take exactly half the row. */
/* minmax(0, 1fr), not a bare 1fr: a plain fr track floors at its content's
min-content width, and the axes grid inside the copy is wide enough to push
that past half the row (measured 518 / 182 instead of 350 / 350). Zeroing the
floor makes the halves genuinely equal and lets the axes reflow instead. */
@media (min-width: 600px) { .lx-read { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* The photograph is absolutely positioned so it cannot set the row's height.
Left in flow it does: it is a portrait crop (520x720), so at an 800px column
it demanded 1108px and dragged the copy beside it down with it, while the
intro's square photo only asked for 800. Out of flow, the row is sized by the
copy and this min-height, and object-fit crops the picture to whatever that
turns out to be — the same height behaviour as .lx-intro__media. */
.lx-read__media { position: relative; min-block-size: var(--lx-media-h); background: #1a1613; }
.lx-read__media img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
/* Fills the band, exactly as the intro photograph does, so the two render at
the same width and height at every viewport.
The band has a fixed height and a fluid width, so its shape changes as the
window does while the picture's does not — there is no fit that both fills
the cell and shows the whole frame. Filling wins here, and the crop is
anchored to the bottom so what it takes is wall and shadow at the top,
never the chair and the papers. */
object-fit: cover;
object-position: center bottom;
display: block;
}
.lx-read__copy {
display: flex;
flex-direction: column;
justify-content: center;
/* Less than the page's --lx-y here on purpose: the column is centred and the
copy is short, so the section's own rhythm left ~220px of padding on top of
the slack the centring already creates. */
padding-block: clamp(48px, 5vw, 64px);
padding-inline: var(--lx-x);
}
@media (min-width: 600px) {
/* Copy first in the DOM, so in RTL it takes the near column and the photo
bleeds off the far edge — the same arrangement as .lx-intro, and it
mirrors on its own in LTR. Doing this with `order` instead looked right
in RTL and put the photo on the wrong side in English.
Matches the split breakpoint above: below 1400px viewport this resolves to
--lx-x anyway, so it only starts doing real work once the container is
capped. */
.lx-read__copy { padding-inline-start: max(var(--lx-x), calc((100vw - var(--lx-w)) / 2)); }
}
/* The design sets this copy a tier darker and larger than it was — ink rather
than muted, 18px rather than 15 — and drops the label to the muted tier the
paragraph just left. Clamped rather than fixed: the design is a 1440 board,
and 18px of Arabic in a half-width column is too much on a phone. */
.lx-read__p {
margin: 22px 0 0;
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.95;
color: var(--lx-ink);
max-inline-size: 48ch;
}
.lx-read__lbl { margin: 36px 0 0; font-size: clamp(13px, 1.2vw, 17px); line-height: 1.95; color: var(--lx-muted); }
/* The design lays these out as chips that wrap, not as a fixed grid: the row
breaks where it runs out of width, which is how it lands 5 + 3 rather than
4 + 4. Wrapping also removes the old overflow trap — a grid's min-content
was 518px wide and hung the whole section off a phone's edge.
The design gives each chip a background of #F9F4EF, which is the section's
own ground, so the plate draws nothing. Left off rather than set to a colour
that cannot be seen; the padding is what does the spacing work. */
.lx-read__axes {
display: flex;
flex-wrap: wrap;
/* The design spaced these with 18px of padding inside each chip plus a 10px
gap. That reads the same BETWEEN chips, but it also indents the first one
by 18px, so the row no longer started where the line above it does. The
same 46px of air now lives entirely in the column gap, which leaves the
first chip flush with the paragraph. Row rhythm is unchanged: the 9px of
block padding stays and carries it. */
column-gap: 46px;
row-gap: 10px;
margin: 20px 0 0;
padding: 0;
max-inline-size: 620px;
list-style: none;
}
.lx-read__axes li {
padding-block: 9px;
padding-inline: 0;
font-size: clamp(13.5px, 1.1vw, 15px);
font-weight: 400;
color: var(--lx-ink);
}
/* ---- 5. services: three price cards ------------------------------------ */
.lx-svc__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.lx-svc__grid { display: grid; gap: 20px; margin-block-start: 44px; }
@media (min-width: 860px) { .lx-svc__grid { grid-template-columns: repeat(3, 1fr); } }
.lx-svc__card {
display: flex;
flex-direction: column;
padding: 30px 26px;
background: var(--lx-white);
border: 1px solid var(--lx-line);
border-radius: 8px;
}
.lx-svc__t { margin: 0; font-family: var(--font-head); font-size: 21px; font-weight: 800; }
.lx-svc__meta { margin: 8px 0 0; font-size: 13px; color: var(--lx-muted-2); }
/* Flags the launch pricing on the card itself, where the number is, rather
than only in the section's header pill. Uses the site's own accent: the
mockup's orange is its design tool's default colour-picker value, and that
picker's options include this red. */
.lx-svc__flag {
margin: 20px 0 0;
font-family: var(--font-head);
font-size: 13px;
font-weight: 700;
color: var(--lx-red);
}
/* The price carries its own 24px top margin for the case with no flag above
it; after one, it only has to clear the line. */
.lx-svc__flag + .lx-svc__price { margin-block-start: 6px; }
/* Price and its unit share a baseline; the unit must not inherit the display size. */
/* baseline, not center: centring the mark's box against the numerals' box
lines up two rectangles, not the two shapes inside them, and the mark read
as sitting low. On the baseline it sits on the digits' feet, the way a
currency glyph should. */
.lx-svc__price { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 0; font-size: clamp(30px, 4vw, 38px); }
/* `isolate` is load-bearing. "100 - 400" is two Latin runs either side of a
neutral hyphen; in an RTL paragraph the bidi algorithm reorders them and the
price reads "400 - 100". Isolating the span fixes the order in Arabic and
changes nothing in English. */
/* Sits on the number's baseline at body size — the price line sets a display
size for the numerals, and a phrase inherited at 38px would read as the
price rather than as a qualifier on it. */
.lx-svc__from {
font-family: var(--font-head);
font-size: 15px;
font-weight: 600;
color: var(--lx-muted);
white-space: nowrap;
}
.lx-svc__num {
font-family: var(--font-head);
font-size: clamp(30px, 4vw, 38px);
font-weight: 800;
line-height: 1;
direction: ltr;
unicode-bidi: isolate;
}
/* The riyal mark, not the word. The source SVG has its fill baked in, so it is
painted as a mask off currentColor instead of being loaded as an image —
the same technique the old pricing block used. Sized in em so it tracks the
price beside it. */
.lx-svc__riyal {
display: inline-block;
/* Box matches the artwork's own 37:41 proportions, so `contain` has nothing
to letterbox and the glyph fills the box exactly. An empty inline-block
takes its bottom edge as its baseline, which is what seats it on the
digits' baseline in the flex row above. */
inline-size: .63em;
block-size: .70em;
background-color: var(--lx-muted);
-webkit-mask: url('../assets/riyal.svg') no-repeat center / contain;
mask: url('../assets/riyal.svg') no-repeat center / contain;
}
/* Only on the two per-page products. lib/moyasar.js prices `short` and
`feature` at 10 SAR a page — the advertised ranges ARE the page bounds times
that rate — while the treatments are fixed amounts, so this line would be
false on the third card and it does not carry one. */
.lx-svc__by { margin: 10px 0 0; font-size: 11.5px; font-weight: 700; line-height: 1.7; color: var(--lx-muted-2); }
/* The auto BOTTOM margin is what lines the cards up. The slack in a card has
to be absorbed in exactly one place; it used to be absorbed under the link,
by .lx-svc__foot, which left the link itself floating at whatever height
each card's copy happened to end — high on the short treatment blurb, low
on the two long ones. Taking the slack here instead drops the link to the
foot of the body in every card, so the three line up. */
.lx-svc__b { margin: 20px 0 auto; font-size: 14px; line-height: 1.9; color: var(--lx-muted); }
/* The sample-report link lives in the cards now rather than up in THE READ:
it answers "what do I actually get" where the reader is weighing a price,
not three sections earlier. Trimmed off .lx-link's 26px top margin, which
was spacing it from a section's worth of copy; here it only has to clear
the paragraph above it. */
.lx-svc__what { margin-block-start: 14px; font-size: 13.5px; }
/* No auto margin here any more — .lx-svc__b above has it. Two autos in one
column SPLIT the free space between them, which would float the link to the
middle of the gap instead of seating it above this block. */
.lx-svc__foot { padding-block-start: 22px; }
.lx-svc__dur { padding-block-start: 18px; border-block-start: 1px solid var(--lx-line-soft); font-size: 13px; font-weight: 500; }
.lx-svc__btn {
display: flex;
align-items: center;
justify-content: center;
min-block-size: 46px;
margin-block-start: 18px;
padding-inline: 18px;
border: 1px solid var(--lx-ink);
border-radius: 8px;
font-family: var(--font-head);
font-size: 14px;
font-weight: 700;
color: var(--lx-ink);
transition: background-color 200ms ease, color 200ms ease;
}
.lx-svc__btn:hover { background: var(--lx-ink); color: var(--lx-cream); }
.lx-svc__note { margin: 26px 0 0; font-size: 13px; line-height: 1.8; color: var(--lx-muted-2); }
/* ---- 6. journey: six numbered steps ------------------------------------ */
.lx-jn__grid { display: grid; gap: 40px 40px; margin-block-start: 52px; }
@media (min-width: 700px) { .lx-jn__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lx-jn__grid { grid-template-columns: repeat(3, 1fr); } }
.lx-jn__step { padding-block-start: 18px; border-block-start: 1px solid var(--lx-line); }
.lx-jn__n { display: block; font-size: 12px; font-weight: 700; color: var(--lx-muted-2); font-variant-numeric: tabular-nums; }
.lx-jn__t { margin: 10px 0 10px; font-family: var(--font-head); font-size: 18px; font-weight: 800; }
.lx-jn__b { margin: 0; font-size: 14px; line-height: 1.9; color: var(--lx-muted); max-inline-size: 34ch; }
/* ---- 7. two audiences: cream beside white ------------------------------ */
.lx-split { display: grid; gap: 0; background: var(--lx-cream); }
@media (min-width: 900px) { .lx-split { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.lx-split__panel {
display: flex;
flex-direction: column;
justify-content: center;
padding-block: clamp(48px, 7vw, 92px);
padding-inline: var(--lx-x);
}
@media (min-width: 900px) {
/* The light half is the page's own ground, so its copy lines up with the
container; the black half is a slab and pads itself evenly. */
.lx-split__panel--light { padding-inline-start: max(var(--lx-x), calc((100vw - var(--lx-w)) / 2)); }
.lx-split__panel--white { padding-inline: clamp(40px, 5vw, 72px); }
}
.lx-split__panel--white { background: var(--lx-white); color: var(--lx-ink); }
.lx-split__panel--white .lx-link { color: var(--lx-black); border-color: rgba(0,0,0,.28); }
.lx-split__panel--white .lx-link:hover { color: var(--lx-red); border-color: var(--lx-red); }
.lx-split__p { margin: 22px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--lx-muted); max-inline-size: 44ch; }
/* ---- 8. team ----------------------------------------------------------- */
/* One card per row on a phone. Two-up leaves a 156px card, and once its
padding, the More button and the gap are taken out there are 73px left for
the brief — three lines, cut mid-sentence. Full width gives the card ~350px
and the brief room to end on its own ellipsis, which is what makes the
always-open overlay worth having on touch. */
.lx-team__grid { display: grid; gap: 28px 24px; margin-block-start: 48px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .lx-team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .lx-team__grid { grid-template-columns: repeat(4, 1fr); } }
.lx-team__photo {
aspect-ratio: 292 / 300;
inline-size: 100%;
/* Same trap as the readers page: the width/height attributes make the height
definite and aspect-ratio is ignored without this. */
block-size: auto;
object-fit: cover;
display: block;
background: #211d1a;
}
/* The photo is a link, and the brief rides over it. Hover is the trigger, but
never the only one: :focus-visible opens it for a keyboard, and where there
is no hover at all (a phone) the overlay is suppressed entirely and the tap
simply follows the link — so nothing is reachable only by hovering. */
.lx-team__card {
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
}
.lx-team__over {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 14px;
padding: 18px;
background: linear-gradient(to top, rgba(0, 0, 0, .94) 30%, rgba(0, 0, 0, .55));
color: #fff;
opacity: 0;
transition: opacity 250ms ease;
}
.lx-team__card:hover .lx-team__over,
.lx-team__card:focus-visible .lx-team__over { opacity: 1; }
.lx-team__card:focus-visible { outline: 2px solid var(--lx-red); outline-offset: 3px; }
/* The opening of the bio, not a second piece of copy: clamped so the card shows
as much as it has room for and /readers carries the rest. */
.lx-team__brief {
font-size: 12.5px;
line-height: 1.75;
color: rgba(255, 255, 255, .88);
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lx-team__more {
align-self: flex-start;
text-align: center;
padding: 7px 18px;
border: 1px solid rgba(255, 255, 255, .6);
border-radius: 8px;
font-family: var(--font-head);
font-size: 12.5px;
font-weight: 700;
transition: background-color 200ms ease, color 200ms ease;
}
.lx-team__card:hover .lx-team__more { background: var(--lx-cream); border-color: var(--lx-cream); color: #000; }
/* Touch has no hover to reveal it, so the brief is simply always open there —
it used to be hidden outright, which left the card silent on a phone. The
More button takes its hovered fill for the same reason: it never gets one. */
@media (hover: none) {
.lx-team__over { opacity: 1; }
.lx-team__more { background: var(--lx-cream); border-color: var(--lx-cream); color: #000; }
}
@media (prefers-reduced-motion: reduce) { .lx-team__over { transition: none; } }
.lx-team__n { margin: 16px 0 0; font-family: var(--font-head); font-size: 16px; font-weight: 800; text-align: center; }
.lx-team__r { margin: 6px 0 0; font-size: 13px; color: var(--lx-red); text-align: center; }
/* ---- 8b. what the writers said ----------------------------------------- */
.lx-vox { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .lx-vox { grid-template-columns: 380px minmax(0, 1fr); gap: 72px; } }
.lx-vox__head { display: flex; flex-direction: column; gap: 14px; }
.lx-vox__head .lx-sub { margin: 0; max-inline-size: 42ch; }
.lx-vox__cards { display: grid; gap: 24px; align-items: stretch; }
/* The long message earns the wider card. */
@media (min-width: 760px) { .lx-vox__cards { grid-template-columns: 1.35fr 1fr; } }
.lx-vox__card {
margin: 0;
min-inline-size: 0;
box-sizing: border-box;
padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 52px);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 16px;
}
.lx-vox__card--wide { background: var(--lx-cream); }
.lx-vox__card--dark { background: var(--lx-black); gap: 22px; }
.lx-vox__mark {
font-size: 112px;
line-height: .5;
block-size: 56px;
font-weight: 800;
color: var(--lx-red);
}
.lx-vox__card p { margin: 0 0 14px; font-size: 17px; line-height: 2; color: var(--lx-ink); }
.lx-vox__card p:last-child { margin-bottom: 0; }
.lx-vox__card--dark blockquote { margin: 0; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.lx-vox__card--dark p { margin: 0; font-size: 16px; line-height: 1.85; color: rgba(249, 244, 239, .8); }
.lx-vox__lead { font-size: 24px !important; font-weight: 700; line-height: 1.6 !important; color: var(--lx-cream) !important; }
/* The message runs long, so the card shows a fixed stretch of it and fades the
cut rather than slicing a line in half. Ticking the box drops the mask and
lets the box scroll — no script, so it works with JS off and there is no
handler to bind. */
.lx-vox__box {
position: relative;
block-size: 300px;
flex: none;
overflow: hidden;
-webkit-mask-image: linear-gradient(#000 70%, transparent);
mask-image: linear-gradient(#000 70%, transparent);
}
.lx-vox__t:checked ~ .lx-vox__box {
overflow-y: auto;
-webkit-mask-image: none;
mask-image: none;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, .25) transparent;
}
.lx-vox__btn {
align-self: flex-start;
cursor: pointer;
font-family: var(--font-head);
font-size: 15px;
font-weight: 700;
color: var(--lx-black);
border-block-end: 1px solid rgba(0, 0, 0, .3);
padding-block-end: 4px;
}
.lx-vox__btn:hover { color: var(--lx-red); border-block-end-color: var(--lx-red); }
.lx-vox__c { display: none; }
.lx-vox__t:checked ~ .lx-vox__btn .lx-vox__o { display: none; }
.lx-vox__t:checked ~ .lx-vox__btn .lx-vox__c { display: inline; }
/* Keyboard users get the same affordance: the box is hidden, so the ring has
to land on the label it drives. */
.lx-vox__t:focus-visible ~ .lx-vox__btn { outline: 2px solid var(--lx-red); outline-offset: 4px; }
/* Where the message reached us — Gmail on one card, Instagram on the other.
It sits directly under the quote mark at the head of the card, so the pair
reads as one unit: a quotation, and where the quotation came from. Small on
purpose: a provenance mark, not a logo placement. */
.lx-vox__via {
display: block;
inline-size: 26px;
block-size: auto;
margin-block-start: 14px;
}
.lx-vox__card figcaption {
margin-block-start: auto;
padding-block-start: 18px;
border-block-start: 1px solid rgba(0, 0, 0, .1);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.lx-vox__card--dark figcaption { border-block-start-color: rgba(249, 244, 239, .16); }
.lx-vox__name { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--lx-black); }
.lx-vox__card--dark .lx-vox__name { color: var(--lx-cream); }
.lx-vox__role { font-size: 14px; color: var(--lx-red); }
/* The phone cut of the same block: the two cards stack (they already do, from
the grid above), and every fixed measure steps down to the mobile design's
own numbers. The headings are left to the page's shared type scale rather
than pinned here, so this section keeps step with the sections around it. */
@media (max-width: 760px) {
.lx-vox { gap: 28px; }
.lx-vox__cards { gap: 16px; }
.lx-vox__card { padding: 30px 24px; border-radius: 8px; gap: 14px; }
.lx-vox__card--dark { padding: 28px 24px; gap: 16px; }
.lx-vox__mark { font-size: 80px; block-size: 40px; }
.lx-vox__card p { font-size: 16px; margin-block-end: 12px; }
.lx-vox__card--dark p { font-size: 15px; }
.lx-vox__lead { font-size: 20px !important; }
.lx-vox__box { block-size: 230px; }
.lx-vox__card figcaption { padding-block-start: 10px; }
.lx-vox__name { font-size: 17px; }
}
/* ---- 9. partnerships --------------------------------------------------- */
.lx-part { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .lx-part { grid-template-columns: 1fr 1fr; } }
/* Positioned by auto margins, not by justify-self: the grid item here is the
wrapping this image, so justify-self on the image itself was inert.
Stacked, the mark sits on its own row under the copy and is centred in it.
Beside the copy it goes to the far side instead — margin-inline-start:auto
puts that at the page's left edge in Arabic and its right edge in English. */
.lx-part__logo {
display: block;
inline-size: 100%;
max-inline-size: 300px;
block-size: auto;
margin-inline: auto;
}
@media (min-width: 860px) {
.lx-part__logo { margin-inline-start: auto; margin-inline-end: 0; }
}
/* ---- 10. closing CTA over a photo -------------------------------------- */
.lx-cta {
position: relative;
overflow: hidden;
text-align: center;
/* Taller than the design's own 620-at-1440: at that height the seats are
cropped to a band and the room around them is lost. The vw term holds the
proportion as the window changes, the clamp stops it becoming a letterbox
on a phone or a void on a very wide screen. Centred rather than
top-aligned, so the extra height falls evenly above and below the copy. */
display: flex;
flex-direction: column;
justify-content: center;
min-block-size: clamp(520px, 52vw, 760px);
}
.lx-cta__bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: 0; }
.lx-cta__shade { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.72); }
.lx-cta__in { position: relative; z-index: 2; }
.lx-cta .lx-h { color: #fff; }
.lx-cta__sub { margin: 24px auto 0; font-size: 15px; line-height: 1.85; color: rgba(255,255,255,.66); max-inline-size: 52ch; }
.lx-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: 50px;
margin-block-start: 34px;
padding-inline: 38px;
border-radius: 8px;
background: var(--lx-cream);
color: #000;
font-family: var(--font-head);
font-size: 15px;
font-weight: 700;
transition: background-color 200ms ease;
}
.lx-cta__btn:hover { background: #fff; }
/* ---- 12. FAQ ------------------------------------------------------------
Kept by request though the design has none, and dropped in just before the
closing CTA. The markup is the previous page's, so js/main.js still drives
the accordion and the category filter with no changes. What it needed was a
palette: every rule in styles.css paints it for a dark page, and here it
sits between the cream partnerships band and the dark CTA.
Scoped under .landing so the original dark treatment survives untouched if
the FAQ is ever reused on another page. Loaded after styles.css, so equal
specificity resolves this way on source order. */
.landing .faq { padding-block: var(--lx-y); padding-inline: var(--lx-x); background: var(--lx-cream); }
.landing .faq__wrap { max-width: var(--lx-w); }
.landing .faq__eyebrow {
font-family: var(--font-head);
font-size: 13px;
font-weight: 700;
color: var(--lx-red);
margin-bottom: 14px;
}
.landing .faq__title {
font-family: var(--font-head);
font-size: clamp(28px, 4.4vw, 46px);
font-weight: 800;
line-height: 1.28;
letter-spacing: -.01em;
color: var(--lx-ink);
margin-bottom: 36px;
}
/* No border-radius here on purpose: these were pills, and they now inherit
the 8px that .faq-cat already carries, so the filters sit in the same shape
language as every button on the page. Their quieter weight stays — body
font, muted ink, a hairline border — because a filter should not read as
loudly as a CTA beside it. */
.landing .faq-cat {
background: transparent;
border: 1px solid var(--lx-line);
padding: 10px 20px;
color: var(--lx-muted);
}
.landing .faq-cat:hover { color: var(--lx-ink); border-color: var(--lx-muted-2); }
.landing .faq-cat.is-active { background: var(--lx-ink); border-color: var(--lx-ink); color: var(--lx-cream); }
.landing .faq-cat:focus-visible { outline: 2px solid var(--lx-red); outline-offset: 2px; }
.landing .faq-item { border-bottom: 1px solid var(--lx-line); }
.landing .faq-item__q { font-size: 17px; color: var(--lx-ink); }
.landing .faq-item__a { color: var(--lx-muted); }
/* The +/- glyph is drawn from currentColor on the button, so recolouring the
button is enough — no need to touch the two pseudo-element bars. */
.landing .faq-item__btn { color: var(--lx-ink); }
/* The +/- box is a dark chip with white bars in styles.css. On cream it has to
invert: a hairline square with ink bars, matching the card borders. */
.landing .faq-item__sign { border-color: var(--lx-line); background: transparent; border-radius: 999px; }
.landing .faq-item__sign::before,
.landing .faq-item__sign::after { background: var(--lx-ink); }
.landing .faq-item__btn:hover .faq-item__sign { border-color: var(--lx-ink); }
/* ============================================================================
LIGHT HERO — the landing's own colour scheme.
css/styles.css dresses the nav and the hero for a dark page, because that is
what every OTHER page here still is: /submit, /readers, /terms, /privacy and
/about-coverage all open on black. So none of it is edited there. These
overrides are scoped to .landing and live in this sheet, which only
index.html loads, and they load after styles.css so equal specificity is
enough to win.
The artwork is white line art (the mark, the accreditation badge), so it is
inverted rather than swapped for a second asset: one file, and the two can
never drift apart.
========================================================================= */
/* ---- the hero ----------------------------------------------------------- */
/* The veil is no longer a wash across the frame. It was asked to come down
three times, and a wash cannot keep going: the headline, the lede and the
accreditation badge all drew their contrast from one sheet of cream, so
every point taken off the picture came off all three at once.
So the sheet is gone, and each thing that needs a ground carries its own —
a soft panel under the copy column, a fainter one under the badge. The rest
of the frame is film. What is left on .hero__shade is the bottom fade, which
was never legibility: it is the join to the cream section below, and what
the SAIP strip sits on.
A blurred rect, NOT a radial gradient. The copy is a wide block and an
ellipse large enough to reach its corners is far larger than the block, so
it washes the frame again to cover four corners. A blurred rounded rect is
the shape of the thing it is covering.
It also hangs off .hero__content rather than the hero, so it tracks the copy
column instead of a fixed percentage of the frame. That matters: the column
is capped at 768px, which is 53% of a 1440 frame but 85% of a 900 one, and
a fixed ellipse slid off the text as the window narrowed.
Which is how this turned up a live bug. At ~900px in English the headline
fills the column and its tail ran past the old veil onto the dark thumb in
the footage: measured 1.19:1, far under the 3:1 a 36px/700 headline needs.
It is 6.29:1 now.
The panel is at .45 by request. Mean cream coverage, measured against the
real composite with the video cropped the way object-fit: cover crops it,
six frames across the loop, every pixel under each element:
900 1100 1280 1440
.62 46.6 n/a 35.0 31.1
.45 37.2 31.6 28.9 26.0
KNOWN: the lede does not hold WCAG AA at .45. It is 22px/500, which is not
"large text", so it needs 4.5:1, and the film behind it is dark — black type
on dark footage is exactly the case a light wash cannot fix by getting
lighter. Measured at .45: 3.05 (1440 en), 3.07 (1280 en), 3.02 (1100 en),
2.78 (900 ar). It was already at the edge at .62 — 4.61 at 1440 en — so
there is no panel value between them that holds it.
The two ways out, neither taken here:
- set the hero copy in LIGHT type. Dark film wants white text, and then
the wash can go almost entirely. This is a design change, not a tuning
one, and it changes the look of the page.
- leave the panel at .58-.62, which is where the lede last held.
element 900 1100 1280 1440 floor
headline 3.60 3.95 3.71 3.76 3 (36px/700, large text)
lede 2.78 3.02 3.07 3.05 4.5 (22px/500, NOT large) <-- under
badge 6.16 6.10 6.08 6.71 4.5
SAIP 9.50 10.84 10.83 10.96 4.5
Both directions; the figures above are the worse of the two. */
.landing .hero__shade {
background: linear-gradient(to top, var(--lx-cream) 0%, rgba(249, 244, 239, 0) 24%);
/* Held off the top of the frame, where nothing is written. Mobile keeps 44%
— see the media query, where the headline sits much higher. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 50%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 50%);
}
/* The copy's ground and the badge's. Both are pseudo-elements rather than a
background on the element itself: a background is clipped to the box, and
these have to finish fading OUTSIDE the text they cover or the clip shows as
a rectangle. z-index -1 keeps them behind their own element's text while
staying above the film.
Only above 860px. Below that the hero falls back to the phone's vertical
veil, which puts cream under the whole lower half already. */
@media (min-width: 861px) {
.landing .hero__content::before,
.landing .hero .partner::before {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}
.landing .hero__content::before {
inset: -36px -56px;
border-radius: 48px;
background: rgba(249, 244, 239, .45);
filter: blur(46px);
}
.landing .hero .partner::before {
inset: -12px -14px;
border-radius: 24px;
background: rgba(249, 244, 239, .34);
filter: blur(22px);
}
}
/* On a phone the copy is under the film rather than beside it, so the veil
turns vertical — the design's own second gradient.
This one still cannot come down as far as the desktop veil, and the shaping
that works there does not apply: with the copy ON the film rather than
beside it there is no open side to clear. The headline binds — at 28px/700
it is WCAG large text and needs 3:1 — and it now sits at 3.22:1, with the
lede at 5.25:1 and the badge at 12.5:1. Measured the same way at 375x812.
Lightening the mid stop another two points puts the headline at 2.64:1,
under the floor, so this is close to as far as a phone goes. */
@media (max-width: 860px) {
.landing .hero__shade,
html[dir="ltr"] .landing .hero__shade {
background: linear-gradient(to top,
var(--lx-cream) 0%,
rgba(249, 244, 239, .85) 26%,
rgba(249, 244, 239, .47) 62%,
rgba(249, 244, 239, .04) 100%);
/* The mask stays at 44% here. On a phone the headline starts at 36% of the
hero, ABOVE where the desktop mask now fades in, so moving it down takes
the ground out from under the headline: measured 2.60:1 at 52%. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 44%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 44%);
}
}
.landing .hero { background-color: var(--lx-white); }
.landing .hero__title { color: var(--lx-black); }
.landing .hero__sub { color: var(--lx-ink); }
/* Both hero buttons keep their geometry — the radius, the height, the REC dot —
and change only their colour treatment, which a light ground forces: a white
fill and a white hairline are both invisible on it. */
.landing .btn--white { background: var(--lx-black); color: var(--lx-cream); }
.landing .btn--white:hover { background: #241f1b; }
.landing .s1-booklet-btn { border-color: rgba(0, 0, 0, .35); color: var(--lx-black); }
.landing .s1-booklet-btn:hover,
.landing .s1-booklet-btn:focus-visible {
background-color: var(--lx-black);
border-color: var(--lx-black);
color: var(--lx-cream);
}
/* The accreditation badge stays exactly where it is. Only its ink changes: it
is white line art, and the ground under it is cream now. */
.landing .partner__logo img { filter: invert(1); }
.landing .partner__text { color: var(--lx-ink); }
/* The SAIP line at the foot of the hero. Still no plate behind it — it sits on
the veil, which is at its heaviest on this side. */
.landing .hero__strip p { color: var(--lx-ink); }
.landing .hero__strip a { color: var(--lx-ink); }
.landing .hero__strip a:hover { color: var(--lx-black); }