/* ==================================================================
* iTech Valet — The AI Authority Library (/learn/)
*
* Loaded on the WHOLE LIBRARY - /learn/, every /learn/page/N/, and every
* category archive a "View all" link lands on. See functions.php.
*
* The archives are built from the same bands on purpose: a reader who
* followed "View all AEO Content Strategy" has gone one level INTO the
* library, not left it.
*
* !! EVERY PAGE ON THIS SITE IS CUSTOM. Nothing here is expected to be
* reused, and nothing here may be promoted into main.css because it
* "looks generic" - the next page measures differently.
*
* THE ONE EXCEPTION IS THE CARD. `.article-card` and the pagination live
* in section 09 of main.css, because the ARTICLES are the one thing on
* this site that is fixed. This file positions them; it does not style
* them. If a rule here starts with `.article-card`, it is in the wrong
* file.
*
* Every number below was read off the LIVE page through the DOM on
* 2026-08-25 at 375, 599, 600, 744, 768, 769, 900, 992, 993, 1100, 1201,
* 1280 and 1512.
*
* ASSET PATHS ARE ../../img/ - two levels, because this file sits in
* assets/css/pages/. One level silently killed six homepage backgrounds
* once; the bands rendered their fallback colours and nothing errored.
*
* ------------------------------------------------------------------
* THE CONTAINER IS 1300, NOT 1200, AND IT IS THE ONLY PAGE THAT IS
* ------------------------------------------------------------------
* All five of live's rows set `.fl-row-content { max-width: 1300px }`.
* Every other rebuilt page uses 1200 (--container-band) for its content
* bands and 1400 for its hero. This one is its own number, and it does
* not bite until 1340 - which is why it survives a 1280 measuring
* session unnoticed. Checked at 1512, where live's band is 1300 wide and
* a 1200 build would have been 100px narrow.
*
* ------------------------------------------------------------------
* ...EXCEPT BROWSE ALL, WHOSE BAND IS 1200 AND NOT 1300
* ------------------------------------------------------------------
* The module inset is 20 on all five bands. What differs is the CONTAINER:
* `.fl-row-content` computes `max-width: 1300px` on the first four rows and
* `1200px` on the closing one. At a 1280 viewport:
*
* bands 1-4 container 20 -> 1260 (1240), modules 40 -> 1240 (1200)
* Browse All container 40 -> 1240 (1200), modules 60 -> 1220 (1160)
*
* THIS WAS BUILT WRONG FIRST, as a 40px module inset on that band, which
* produces the same three numbers at 1280 and diverges everywhere else -
* at 1201, where 1200 no longer bites, live's closing band is 1161 wide
* and a 40px-inset build is 1121. Caught by walking the ancestor chain of
* the "Browse All" heading and reading a resolved `margin: 0 20px` for
* what it is: an `auto` margin centring a 1200 box inside 1240, not an
* inset. Measured at 769, 993, 1201 and 1280 before being believed.
*
* ------------------------------------------------------------------
* THREE THINGS LIVE DOES THAT ARE NOT TRANSCRIBED, ALL MEASURED
* ------------------------------------------------------------------
* 1. THE COMPETITIVE LANDSCAPE ROW DECLARES A PHOTOGRAPH IT DOES NOT
* HAVE. `.fl-node-yb0eqpk6cfsg` carries `fl-row-bg-photo` and the
* full set of background-repeat / position / attachment / size
* declarations, and NO background-image - so the band renders plain.
* Built plain, which is what a visitor sees. If artwork was meant to
* be there, it is a live defect and Gerek's call what goes in it.
*
* 2. THE PAGINATION ON THE DARK BAND IS ORANGE ON LIVE. Measured 3.68:1
* against the brightest block of the artwork, at 14px, where the
* floor is 4.5:1 - and --c-orange-deep, which is what fixes the same
* colour on the card, is 2.27:1 there and would be worse. The dark
* band's pagination is white, hovering --c-blue-pale, which is this
* theme's existing answer for a link on dark artwork.
*
* 3. ONE OF THE FIVE START HERE LINKS IS 18px ON A TABLET AND THE OTHER
* FOUR ARE 20. `.fl-node-ck9limsztaqh` alone carries a
* `@media (max-width: 992px) { font-size: 18px }` that its four
* siblings do not. Five parallel promoted titles, one of them two
* points smaller at one width, is a slip in the editor rather than a
* design. Normalised.
*
* ------------------------------------------------------------------
* ONE DELIBERATE ORDER-DEPENDENCY
* ------------------------------------------------------------------
* `.lrn-band .lrn-title--start` and `.lrn-band .lrn-title` are both
* (0,2,0) and both set margin-top inside the 769 query. --start must come
* SECOND or "Start Here" drops from 100px of air to 60. Written down
* rather than hardened with a third selector, which is how /about/ handles
* its four.
*
* ------------------------------------------------------------------
* OPEN, AND IT IS GEREK'S: THE BODY LEADING IS 1.1
* ------------------------------------------------------------------
* Every rich-text module on this page sets `line-height: 1.1` - the hero
* paragraph, the four standfirsts, the five link titles and the closing
* note. --lh-lead is 1.45 and is what /about/, /services/,
* /ai-visibility-check/ and /faqs/ all read at.
*
* Transcribed, on the same principle the 18px phone body was on /faqs/:
* the settled responsive model says nothing about leading, so where the
* model is silent the original wins. It costs the most in the hero
* paragraph, which is thirteen lines at 375 - measured 257px at 1.1
* against 339px at 1.45. If the readability matters more than the 82px,
* the three `line-height: 1.1` declarations in section 03 become
* `var(--lh-lead)` and nothing else changes.
* ================================================================== */
/* ==================================================================
* 01 BAND FRAME
* ================================================================== */
.lrn-band {
/* The module inset. Beaver Builder's module margin - it sits on the
module, never on the column or the row. */
--lrn-inset: 20px;
/* Rows 2-5 measure 20 top and bottom. The hero overrides in 02. */
padding-block: 20px;
}
/* THE GUTTER IS ZERO WHILE STACKED, as on /faqs/ and /contact/. Live's row
padding goes from `20px 20px` to `20px 0` below 769, so below that width
the module inset IS the whole gutter and copy lands at 20 inside a 375
viewport. main.css puts 20px on every .section, so this takes it off and
section 06 puts it back at 769. */
.section.lrn-band { padding-inline: 0; }
/* 1300, this page's own - see the header. */
.section.lrn-band > .container {
max-width: 1300px;
padding-inline: 0;
/* GRID, so the module margins below ADD rather than collapse. Beaver
Builder wraps every module in its own div and its measured gaps are
the two margins added - the 20 under the h1 meeting the 20 over the
card is 40px of air on the live page, and real siblings would
collapse it to 20. Grid item margins never collapse. */
display: grid;
align-content: start;
}
/* Both photographs are `no-repeat center / cover` on live. The fallback
colours are read off the artwork itself, so a slow image never flashes a
colour the band is not - the pale blue the hero actually is, and the
slate the closing band actually is. */
.bg-lrn-hero,
.bg-lrn-browse {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bg-lrn-hero { background-color: #eef7fd; background-image: url("../../img/bg/learn-hero.webp"); }
.bg-lrn-browse { background-color: #163247; background-image: url("../../img/bg/learn-browse.webp"); }
/* ==================================================================
* 02 THE HERO ROW
*
* ONE ROW on live, carrying the h1, the navy intro card AND the whole
* Start Here block. 60px of padding top and bottom rather than the 20 the
* other four bands use.
* ================================================================== */
.lrn-hero { padding-block: 60px; }
/* Bebas 70 on a solid line with -1px of tracking, navy, centred. main.css's
.hero__headline supplies the family; the size, leading, tracking, colour
and margins are this page's own.
NAVY ON A PALE PHOTOGRAPH, and that is measured rather than assumed: the
darkest block of learn-hero.webp is #c9e7fa, where navy is 8.91:1 and
white would be 1.29:1. */
.lrn-hero .lrn-hero__title {
margin: 20px var(--lrn-inset);
font-size: 46px; /* the phone value; steps in section 06 */
line-height: 1;
letter-spacing: -1px;
text-align: center;
color: var(--c-navy);
}
/* THE INTRO IS A NAVY CARD AND THE CARD IS LOAD-BEARING. Live puts
`background: #063a6c; border-radius: 25px` on the COLUMN's content box,
full band width, and sets the paragraph inside it white. The card is what
makes white text legible over pale artwork - see the ratio above - so a
build that transcribed the white type and missed the card would have
shipped an invisible paragraph. Found by sweeping every element in the
row for a background, not by reading the rows and modules.
No padding of its own: the paragraph's own 20px margins are what hold it
off the corners, which is why they are on .lrn-hero__intro and not here. */
.lrn-hero__card {
background: var(--c-navy);
border-radius: 25px;
}
/* 18px AT EVERY WIDTH. Live sets 18 and then repeats 18 inside its
`max-width: 768px` query, so there is no step to transcribe - the one
element on the page that does not move. See the header for the leading. */
.lrn-hero__intro {
margin: 20px var(--lrn-inset);
font-size: 18px;
font-weight: 300;
line-height: 1.1;
text-align: center;
color: var(--c-white);
}
/* ==================================================================
* 03 SHARED TYPE
*
* The base rules are the PHONE values, so a browser that matches none of
* the queries in section 06 still reads correctly. Never a bare clamp -
* see BUILD-PLAN.md, "Never write a bare clamp for a font size".
* ================================================================== */
/* Band headings. Live steps them 40 / 50 / 60 at its own 768 and 992, which
is exactly what --t-h2 does at the settled model's 600 and 993 - so the
token is used rather than restated. The margins are per-band and are set
below; only the shared shape is here.
main.css's .section-title supplies Bebas and the uppercase. */
.lrn-band .lrn-title {
margin: 20px var(--lrn-inset) 0;
font-size: var(--t-h2);
line-height: 1.1;
letter-spacing: normal;
text-align: center;
color: var(--c-navy);
}
/* Measured 100px above "Start Here" and 60 above the three subject
headings, both collapsing to 20 once the page stacks. The 100 is what
separates the hero from Start Here inside a single row. The phone value
is the shared 20 above; the two desktop values are in section 07. */
/* Band standfirsts, the five Start Here titles and the closing note all
share one size and one leading; only the weight and colour differ. */
.lrn-band .lrn-sub,
.lrn-band .lrn-start__title,
.lrn-band .lrn-close {
font-size: 20px; /* the phone value; steps in section 06 */
line-height: 1.1; /* the original's - see the header */
text-align: center;
}
/* WEIGHT 300, AND IT HAS TO BE READ OFF THE TEXT NODES. getComputedStyle
reports 400 on the live spans, and the live page never loads a 400 face,
so that 400 resolves back down to the 300 that is loaded. This theme DOES
load a real 400, so writing 400 here would ship visibly heavier copy than
the original. Same trap as /services/ and /faqs/. */
.lrn-band .lrn-sub {
margin: 20px var(--lrn-inset) 20px;
font-weight: 300;
color: var(--c-navy);
}
/* ==================================================================
* 04 START HERE
*
* Five promoted articles: a bold navy title over a linked photograph.
* Three across, then two centred under them.
* ================================================================== */
/* SIX COLUMNS, so the second row's 17/33/33/17 can be expressed as
1+2+2+1. Live types those percentages by hand and they come out 4px off
a sixth at 1280 - inside the column padding either way.
NOT a list, and not a nav. Five separate promoted articles, in no
particular order; numbering them for a screen reader would assert a
sequence the design does not have. */
.lrn-start {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
}
/* THE 10px IS THE COLUMN'S AND THE 20px IS THE MODULE'S, and live drops
the column's on a phone. Measured: 30px of inset at 1280 (10 + 20) and
20 at 375 (module only). */
.lrn-start__item { width: 100%; }
.lrn-start__title,
.lrn-start__media { margin-inline: var(--lrn-inset); }
.lrn-band .lrn-start__title {
margin-block: 20px 0;
font-weight: 700;
color: var(--c-navy);
}
/* THE TITLES CARRY NO UNDERLINE AT REST AND THAT IS THE ORIGINAL. They are
the only content in their column, so they read as headings rather than as
links in a sentence - which is why the inline-link rule the other four
pages use does not apply here.
The hover therefore has to do all the work, and it does two things:
live's colour change AND an underline. Live's #dd6b00 measures 2.64:1
against the darkest block of the hero artwork, under the 3:1 a 22px bold
line needs; --c-orange-deep is the same hue at 4.28:1 there. The
underline is belt and braces - it survives wherever the photograph
happens to be lightest.
WRITTEN AS THE SIX LINK TOKENS, not as a rule of its own. The title
sits inside a , so main.css section 02b's site rule reaches it at
(0,3,2) and any plain `.lrn-start__title a` would lose - the same
specificity trap this file already records, arriving from a new
direction. Setting the tokens sidesteps it entirely: there is one link
rule on the site and this block just tells it what to draw. */
.lrn-start__title {
--link-ink: currentColor;
--link-rule: none;
--link-ink-hover: var(--c-orange-deep);
--link-rule-hover: underline;
--link-rule-hover-thickness: 2px;
}
/* aria-hidden in the markup - the title above is the same link to the same
place, and two tab stops per item is ten for five articles.
THE 20px ABOVE AND BELOW IS THE PHOTO MODULE'S OWN MARGIN, and it is
the difference between a 285px item and live's 326. Caught by
comparing COLUMN heights rather than element positions: every x and
every width matched exactly while the column was 41px short, because
the missing space was a margin between two things that were both in
the right place. */
.lrn-start__media {
display: block;
margin-block: 20px;
}
/* 100% OF ITS BOX AT EVERY WIDTH, and no cap. Live renders it at exactly
353 at a 1280 viewport, which is also the source file's own width, and a
`max-width: 353px` looks right for exactly that reason and for exactly
that one width - at 1512 live's picture is 373 and at 993 it is 258,
both the full content box. Caught at 1512, where the capped version was
20px narrow and sat off-centre under a title that was not.
Two of the five source files are 349 rather than 353 - four pixels of
editor drift across five parallel cards - and a fluid width makes that
difference disappear on its own. `height: auto` keeps the aspect;
main.css already sets it on every img. */
.lrn-start__img {
width: 100%;
border-radius: 15px;
box-shadow: var(--shadow-card-hard);
}
/* ==================================================================
* 05 THE FEEDS
*
* Three subject bands of three cards, and Browse All at four. The CARD
* itself is main.css's; this sets how many there are and how wide the
* area holding them is.
* ================================================================== */
/* The grid sits inside the module inset like every other module. Live
bleeds it 10px each way and pads each column 10px, which nets to a 20px
gutter inside the same box - so a gap says it once instead of twice. */
.lrn-grid { margin: 0 var(--lrn-inset); gap: 20px; }
/* One up on a phone, and NOT capped at 400.
Beaver Builder's 400px cap is on `.fl-col-small`, which is a COLUMN
class - the post grid's items are `.fl-post-column` and never get it.
Measured on live at 744: a stacked card is 20 -> 724, the full width of
the band, while a Start Here column beside it is capped at 400. Capping
the cards was tried first and is 304px narrower than the original at
that width. See BUILD-PLAN.md, "THE 400px CAP IS ON THE COLUMN, NOT ON
THE CARD" - the same finding, a second time. */
.lrn-grid--three,
.lrn-grid--four { grid-template-columns: 1fr; }
/* the_posts_pagination() emits its nav as a direct child of .container, so
it needs the module inset spelled out - it is the one block on the page
that is not wrapped by something already carrying it. */
.lrn-band .pagination { margin-inline: var(--lrn-inset); }
/* WHAT REPLACES LIVE'S DEAD PAGINATION on the topic bands - see the header
of home.php for the proof that it is dead - and, with --back, the way
home from a topic's own page.
Kept quiet on purpose: the one call to action on a library page is the
pill at the foot of it, and a second thing shouting on every band would
compete with it three or four times before the reader gets there. */
.lrn-more {
margin: 20px var(--lrn-inset) 20px;
font-size: 16px;
font-weight: 300;
line-height: 22px;
text-align: center;
}
/* THE UNDERLINE IS AT REST, not on hover. This link is the entire way
through to a topic's own page, and a touch screen never sends the hover
that would otherwise reveal it. On a pointer it thickens and turns
navy - the same gesture the opted-out bands elsewhere make.
Six tokens rather than a rule, for the same reason as the titles above:
this link sits inside a
, so main.css 02b reaches it. */
.lrn-more {
--link-ink: var(--c-orange-deep);
--link-rule: underline;
--link-rule-thickness: 1px;
--link-ink-hover: var(--c-navy);
--link-rule-hover: underline;
--link-rule-hover-thickness: 2px;
}
.lrn-more__link { text-underline-offset: 3px; }
/* The way back, on a topic's own page. Same link, navy first - it is an
exit rather than an invitation, and it sits on pale artwork where navy
measures 8.91:1. */
.lrn-more--back {
--link-ink: var(--c-navy);
--link-ink-hover: var(--c-orange-deep);
}
/* ==================================================================
* 06 BROWSE ALL — the dark band
*
* DOUBLE INSET, white type, and the only band on the page carrying
* artwork behind a grid.
* ================================================================== */
/* 1200, NOT the 1300 the other four bands run to. The module inset is the
same 20 everywhere; this band is simply narrower. See the header for the
measurement, and for the version of this that was wrong. */
.section.lrn-browse > .container { max-width: 1200px; }
.lrn-dark .lrn-title,
.lrn-dark .lrn-close,
.lrn-dark .lrn-empty { color: var(--c-white); }
.lrn-browse .lrn-title--browse { margin-bottom: 20px; }
/* Measured 100px above the closing note at 1280 and 20 once stacked. */
.lrn-band .lrn-close {
margin: 20px var(--lrn-inset) 20px;
font-weight: 300;
}
.lrn-empty { margin: 20px var(--lrn-inset); }
/* THE PAGINATION IS WHITE ON THIS BAND AND ORANGE EVERYWHERE ELSE.
main.css section 09 sets --c-orange-deep, which is right on a white
archive page and 2.27:1 on this artwork. (0,2,1) is enough - main.css's
own rule is (0,2,0). */
.lrn-dark .pagination .page-numbers {
border-color: rgba(255, 255, 255, 0.45);
color: var(--c-white);
}
.lrn-dark .pagination a.page-numbers:hover { color: var(--c-blue-pale); }
/* The current page keeps its pale chip, which is 10.53:1 with navy on it
and needs no dark-band variant. */
.lrn-dark .pagination .page-numbers.current { color: var(--c-navy); }
.lrn-dark .pagination .page-numbers.dots { border-color: transparent; color: var(--c-white); }
.lrn-cta {
margin: 30px var(--lrn-inset) 20px;
text-align: center;
}
/* Everything but the size and weight comes from .cta-button in main.css -
the 3px white ring, the 90deg gradient, the shadow and the hover
reversal are all global and identical here. Measured: 22px at 700 on an
18px line, which is what makes the pill exactly 64px tall. Same
modifier shape as .svc-cta__button and .abt-cta__button. */
.lrn-cta__button {
padding: 20px 40px;
font-size: 17px; /* measured floor; steps in section 07 */
font-weight: 700;
line-height: 1.2; /* measured 20.4px on 17px at 768 */
text-transform: capitalize;
}
/* ==================================================================
* 07 THE STEPS
*
* TWO breakpoints for type - 600 and 993 - and ONE for layout, at 769,
* with a second column step for Browse All at 1201.
* See BUILD-PLAN.md, "THE RESPONSIVE MODEL".
*
* Live steps its type at 768 and 992 and holds the phone scale up to an
* iPad mini. The settled rule is TABLET READS AS DESKTOP, so the type
* takes its desktop value from 600 up. Below 599 this page is identical
* to live. The band headings are the exception and need no rule at all:
* --t-h2 already steps 40 / 50 / 60 at 600 and 993, which is live's own
* three sizes at the model's two widths.
* ================================================================== */
@media (min-width: 600px) {
.lrn-hero .lrn-hero__title { font-size: 70px; }
.lrn-band .lrn-sub,
.lrn-band .lrn-start__title,
.lrn-band .lrn-close { font-size: 22px; }
.lrn-cta__button { font-size: 22px; line-height: 18px; }
}
@media (min-width: 769px) {
/* The row gutter comes back. Below this the module inset is the gutter. */
.section.lrn-band { padding-inline: var(--gutter); }
/* Measured: 100px above "Start Here", 60 above the three subject
headings and above "Browse All". The weight sits above each heading
rather than being split around it - the same asymmetry every band on
the homepage uses. */
.lrn-band .lrn-title { margin-top: 60px; }
/* (0,2,0), the same weight as the rule above it, so the ORDER is what
settles this one - listed in the stylesheet header as a deliberate
order-dependency rather than hardened with an extra selector. */
.lrn-band .lrn-title--start { margin-top: 100px; }
/* 40px under a standfirst before its cards, against 20 when stacked. */
.lrn-band .lrn-sub { margin-bottom: 40px; }
/* Measured 100px of air above the closing note once the page is wide
enough for the grid above it to be a block rather than a column. */
.lrn-band .lrn-close { margin-top: 100px; }
.lrn-cta { margin-bottom: 60px; }
/* Three across for the subject feeds at every width from here up -
live never steps them again. */
.lrn-grid--three,
.lrn-grid--four { grid-template-columns: repeat(3, 1fr); }
/* START HERE: three across, then two centred under them. */
.lrn-start { grid-template-columns: repeat(6, 1fr); }
.lrn-start__item { padding: 10px; }
.lrn-start__item:nth-child(1),
.lrn-start__item:nth-child(2),
.lrn-start__item:nth-child(3) { grid-column: span 2; }
.lrn-start__item:nth-child(4) { grid-column: 2 / span 2; }
.lrn-start__item:nth-child(5) { grid-column: 4 / span 2; }
}
/* Browse All's fourth column. Live's own step, and the only rule on this
page that moves at 1201. */
@media (min-width: 1201px) {
.lrn-grid--four { grid-template-columns: repeat(4, 1fr); }
}
/* THE CTA MODULE'S TOP MARGIN, and it is 30 below the desktop breakpoint
rather than 20. Live writes both - `margin-top: 20px` at <=1200 and
`margin-top: 30px` at <=992 - on selectors of DIFFERENT specificity, and
the 992 one is (0,3,0) against the 1200 one's (0,2,0), so 30 wins all the
way down to 375 and the 20 never applies at any width. Measured at 375,
not read off the cascade. Reproduced as what it renders as. */
@media (min-width: 993px) {
.lrn-cta { margin-top: 0; }
}
/* ==================================================================
* 08 TOUCH
*
* The five things a desktop pass will not catch - BUILD-PLAN.md, "THE
* RESPONSIVE MODEL".
*
* 1. A RESTING CARD SHADOW. Already there on both - the article tiles
* carry --shadow-card and the five Start Here photographs carry
* live's own --shadow-card-hard. A touch screen never gets the lift,
* so the resting state has to do the work, and it does.
* 2. GAPS BETWEEN STACKED BLOCKS. The grid gap is 20px in both axes at
* every width, so a stacked column keeps the gutter it had.
* 3. STACKING ORDER. Each Start Here title stays ABOVE its picture,
* stacked or not - the title introduces the picture, it does not
* caption it.
* 4. BUTTONS. The CTA is full width below 769 and keeps 22px from 600
* up, so it is not undersized under a 50px heading.
* 5. BALANCED BAND PADDING. Every band is 20/20 except the hero at
* 60/60, and the module margins above and below each element are
* equal - measured on both sides of every stack point.
* ================================================================== */
@media (max-width: 768px) {
/* THE PILL IS NOT FORCED FULL WIDTH, and that is measured rather than
assumed. Live leaves it inline-block inside a centred wrap: at 744 it
is 387 wide against the band's 704, and at 375 it fills the 335 only
because its label no longer fits on one line. `display: block` was
tried first and made it 664 wide at 744, which the original is not.
/services/ and /about/ do go full width on a phone; this one does not
need to, because at 375 it already is. */
/* Stacked, each Start Here column keeps Beaver Builder's 400px
`.fl-col-small` cap. The CARDS do not - see section 05. */
.lrn-start__item { max-width: 400px; }
/* The intro card picks up a 10px column margin once the row's own
gutter goes to zero, so its copy sits 30 in from the edge while the
h1 above it sits 20. Measured at 375: card 10 -> 365, copy 30 -> 345.
An oddity of the original's, reproduced. */
.lrn-hero__card { margin-inline: 10px; }
}