/*
* Section design styling — reproduces the bespoke Norlon page layouts (hero
* overlay, 50th stripe, quote, card rows, two-column intros) that core blocks
* can't express with visual controls alone. Scoped to section wrapper classes;
* page CONTENT (text/images) stays fully block-editable. Driven by global tokens.
*/
:root {
--nr-red: var(--wp--preset--color--norlon-red, #DE3412);
--nr-ink: var(--wp--preset--color--ink, #231F20);
--nr-signal: var(--wp--preset--color--signal-red, #EF4135);
/* ---- accessible reds for SMALL text (< 18.66px bold / 24px regular) ----
Brand red #DE3412 clears 4.5:1 on WHITE (4.56) but fails on both of the other
surfaces it actually gets used on, and it fails in OPPOSITE directions — so
there are two tokens, not one. Use --nr-red for large text/graphics and on
white; use these only for small text on the named surface.
on #F0F0F0 light gray : #DE3412 = 4.00 FAIL -> #C42D0C = 4.94 PASS (darker)
on #231F20 dark ink : #DE3412 = 3.58 FAIL -> #F4553F = 4.83 PASS (lighter)
#C42D0C is not a new colour — it is already the Services tab active state. */
--nr-red-on-light: #C42D0C;
--nr-red-on-dark: #F4553F;
--nr-din: "URW DIN Cond", sans-serif;
--nr-mont: "Montserrat", sans-serif;
/* SINGLE SOURCE OF TRUTH for recurring elements — change here, every page
follows. Divider weight/colour, page-hero height, inner-page content width. */
--nr-divider-w: 2px;
--nr-divider-color: var(--wp--preset--color--hairline-gray, #D9D9D9);
--nr-divider-red: var(--wp--preset--color--signal-red, #EF4135);
/* The red active/hover underline — same element in the top nav AND the
service tabs, so one token drives both (R2 measured: 3px). */
--nr-underline-w: 3px;
--nr-hero-h: 433px;
--nr-cw: 1160px;
}
/* Base is WHITE — sections are full-width stripes: white (base) alternating with
gray/dark (alignfull groups with their own background). Kadence's default gray
site background otherwise shows through the transparent "white" stripes. */
body { background-color: #ffffff !important; }
/* ============= GLOBAL: EVERY CONTROL IS SQUARE (0 RADIUS) =============
The design is square throughout (global-components.md: "Shape: square (0 radius)").
Kadence/Gravity Forms default buttons + fields to 3px, which had crept onto the
Plans-Room access buttons, its password field, and the slider play button. One
rule, site-wide — so a radius can never sneak back in per-component. */
button, input, select, textarea,
.wp-block-button__link, .wp-element-button,
.gform_wrapper input, .gform_wrapper select, .gform_wrapper textarea, .gform_wrapper button,
.gform_wrapper input[type="submit"], .norlon-dd-trigger, .norlon-dd-list { border-radius: 0 !important; }
/* ---- content container ----
Kadence sets .site-container to max-width 1160px and then adds 24px edge
padding INSIDE it, so real content starts at 164px (design: 140px). Widening
the container by exactly the padding puts the content edge back on 140px and
keeps the 1160px content width — this aligns the header, the page content and
the Recent Projects slider in one move, while keeping gutters on small screens. */
/* !important because Kadence prints its own :root block after this stylesheet. */
:root {
--global-content-width: 1208px !important;
--global-calc-content-width: 1160px !important;
--wp--style--global--content-size: 1160px !important;
}
/* ---- header placement (measured from the design) ----
Logo is 87px tall and sits only 8px below the top of the viewport; the header
row is ~104px with the logo + nav vertically centred on it. Kadence's default
row padding pushes both far too low. */
#masthead .site-header-row-container-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
/* R2-measured (page frames @1:1): the interior header is 151px tall — logo ink at
y=28 and the hero band starting at y=151. Ours was 104, so the logo sat at 9 and
every page rendered ~21px high. */
#masthead .site-header-row { min-height: 151px; }
#masthead .site-header-main-section-left,
#masthead .site-header-main-section-right,
#masthead .site-header-row { align-items: center; }
#masthead .site-branding { margin: 0 !important; padding: 0 !important; }
/* Design insets the nav from the container right edge (CONTACT ends at 1226).
R2 @1440 — a DESKTOP value with no authority on phones; see the mobile-header
block directly below, which is why that override exists. */
#masthead .site-header-main-section-right { padding-right: 42px; }
/* ---- mobile header (hamburger) ----
Kadence renders a SEPARATE `.site-mobile-header-wrap` and swaps to the desktop
header at ~1024px. Scoping to that wrapper instead of a media query means these
rules are live exactly when Kadence shows the mobile header — there is no
breakpoint to keep in sync (an earlier version sat in @media(max-width:900px)
and left 900-1024px with the desktop inset still applied).
The 42px above is a desktop nav inset; on a phone there is no nav, only the
toggle, so it just shoved the hamburger 42px inside the gutter. */
#masthead .site-mobile-header-wrap .site-header-main-section-right { padding-right: 0; }
/* Pull the icon out by the button's own 8.4px padding so the GLYPH — not its
hit-box — lands on the 24px gutter the logo and body copy share. */
#masthead .site-mobile-header-wrap .mobile-toggle-open-container { margin-right: -8px; }
/* Kadence centres the toggle on the 151px row (cy 76, level with the logo). The
design wants it up in the hero's dark gradient, so break that alignment. */
#masthead .site-mobile-header-wrap .site-header-main-section-right { align-self: start; margin-top: 30px; }
#masthead .site-branding img.custom-logo { height: 87px !important; width: auto !important; max-height: 87px !important; }
/* ---- nav hover/active states ----
Hover = 2px signal-red underline bar (text colour unchanged).
Active/current page = Norlon-red text + the red underline. */
/* Design spaces the 5 nav items across ~573px; Kadence's default is far tighter. */
#masthead .main-navigation li.menu-item > a { position: relative; text-decoration: none !important; padding-left: 30px !important; padding-right: 30px !important; }
/* Bar is inset by the link's side padding so it hugs the text width, matching
the design, and wipes in from the left on hover. */
/* Animate WIDTH, not transform:scaleX — scaling a thin element rasterises and
renders it as an uneven wedge (thick left → thin right). Width keeps it crisp. */
#masthead .main-navigation li.menu-item > a::after {
content: ""; position: absolute; left: 30px; bottom: -7px; height: var(--nr-underline-w); width: 0;
background: var(--wp--preset--color--signal-red, #EF4135);
transition: width .25s ease;
}
#masthead .main-navigation li.menu-item > a:hover::after,
#masthead .main-navigation li.menu-item > a:focus-visible::after,
#masthead .main-navigation li.current-menu-item > a::after,
#masthead .main-navigation li.current_page_item > a::after,
#masthead .main-navigation li.current-menu-parent > a::after { width: calc(100% - 60px); }
/* Active/current page = Norlon-red text (bar persists via the rule above). */
#masthead .main-navigation li.current-menu-item > a,
#masthead .main-navigation li.current_page_item > a,
#masthead .main-navigation li.current-menu-parent > a {
color: var(--wp--preset--color--norlon-red, #DE3412) !important;
}
/* Homepage (transparent header): nav STAYS white on hover — only the red bar
appears. Kadence's default hover turns it ink, so force white back. */
body.transparent-header #masthead .main-navigation li.menu-item > a:hover,
body.transparent-header #masthead .main-navigation li.menu-item > a:focus-visible {
color: #fff !important;
}
/* Inner pages (solid header): link text darkens to black on hover, on top of the
red bar. */
body:not(.transparent-header) #masthead .main-navigation li.menu-item > a { transition: color .2s ease; }
body:not(.transparent-header) #masthead .main-navigation li.menu-item > a:hover,
body:not(.transparent-header) #masthead .main-navigation li.menu-item > a:focus-visible {
color: #000 !important;
}
@media (prefers-reduced-motion: reduce) {
#masthead .main-navigation li.menu-item > a::after,
.norlon-slider-learn .arrow, .wp-block-button__link, .wp-element-button { transition: none; }
}
/* ---- precise typography corrections (exact spec values) ---- */
/* Button (exact, global-components.md §4): Button Red fill, Montserrat Bold 11 /
LH 15 / tracking 0.09em / UPPERCASE white, SQUARE (0 radius), ~42px tall,
~26px side padding, no border/shadow. Kadence's default (18px, 3px radius)
otherwise wins entirely, so force it. */
.wp-block-button__link, .wp-element-button {
background-color: var(--wp--preset--color--button-red, #E73613) !important;
color: #fff !important;
font-family: "Montserrat", sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
line-height: 15px !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
border: 0 !important;
border-radius: 0 !important;
padding: 13px 26px !important;
box-shadow: none !important;
transition: background-color .22s ease;
}
/* Hover: fill fades from Button-red to near-black (design spec). Text stays white. */
.wp-block-button__link:hover, .wp-element-button:hover,
.wp-block-button__link:focus-visible, .wp-element-button:focus-visible { background-color: var(--wp--preset--color--ink, #231F20) !important; }
/* On DARK stripes the fill inverts instead: WHITE background + ink text (design). */
.norlon-connect .wp-block-button__link:hover, .norlon-connect .wp-element-button:hover,
.norlon-connect .wp-block-button__link:focus-visible, .norlon-connect .wp-element-button:focus-visible,
.norlon-50th .wp-block-button__link:hover, .norlon-50th .wp-element-button:hover,
.norlon-50th .wp-block-button__link:focus-visible, .norlon-50th .wp-element-button:focus-visible,
.norlon-vision .wp-block-button__link:hover, .norlon-vision .wp-element-button:hover,
.norlon-vision .wp-block-button__link:focus-visible, .norlon-vision .wp-element-button:focus-visible,
.norlon-contact .gform_wrapper .gform_footer input[type="submit"]:hover,
.norlon-contact .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.norlon-contact .gform_wrapper .gform_footer button:hover,
.norlon-contact .gform_wrapper .gform_footer button:focus-visible {
background: #fff !important; background-color: #fff !important; color: var(--wp--preset--color--ink, #231F20) !important;
}
/* Eyebrows/labels: Montserrat ExtraBold 11 / LH 15px / 0.15em (exact) */
.has-eyebrow-font-size { line-height: 15px !important; }
/* ---- shared section rhythm (tighter, matches design) ---- */
.norlon-sec { padding-block: 60px !important; }
.norlon-sec-sm { padding-block: 40px !important; }
/* Stripes butt up against each other in R2 — no white gaps between them. The
vertical rhythm lives entirely in each stripe's own padding. */
.norlon-intro, .norlon-50th, .norlon-recent, .norlon-quote,
.norlon-teaser, .norlon-connect, .norlon-hero-wrap { margin-block: 0 !important; }
/* inner-page hero: full-width landscape band inset to content width */
/* Canonical inner-page hero — one definition, used by every interior page + the
Projects listing (projects.css no longer redefines it). Height via --nr-hero-h. */
.norlon-pagehero { padding-block: 0 !important; margin-block: 0 !important; }
.norlon-page-hero { margin: 0 auto; }
.norlon-page-hero img { width: 100%; height: var(--nr-hero-h); object-fit: cover; display: block; }
@media (max-width: 767px) { .norlon-page-hero img { height: 240px; } }
/* ============= INNER-PAGE SHARED PATTERNS (R2) ============= */
/* Page-title intro: 64px red title (right-aligned) + copy beside, centred block.
R2: 46px above the heading, 58px below the copy to the next stripe. */
.norlon-pageintro { padding-block: 46px 58px !important; }
/* Generic: heading shrinks to the title; the copy column carries its own width
(set per page in the block, since R2 varies it: About 262, Services 596…). The
row is centred via fit-content + auto margins. */
/* Centre the heading+copy as a group (justify-content), keeping the row at the
container width — NOT fit-content, which collapses the copy column to one word
per line. Heading shrinks to its title; copy keeps its block flex-basis. */
.norlon-pageintro-row { justify-content: center; gap: 46px; align-items: flex-start !important; flex-wrap: nowrap; }
/* flex-shrink:0 is load-bearing (WP columns default to shrink:1, which collapsed
the copy column to one word per line). The heading column is a fixed 210px —
`flex:0 0 auto` let it balloon to full width and shove the copy off-screen; the
64px page titles ("About Us", "Services"…) are ~205px, so 210 right-aligns them
cleanly. */
.norlon-pageintro-row > .wp-block-column { align-self: flex-start !important; flex-shrink: 0 !important; }
/* Heading column is 210px for short titles but grows for long ones ("Plans Rooms")
so the nowrap heading never overflows into the copy. width:max-content shrink-wraps
the heading (a bare flex:auto on the flow column would fill the whole row). */
.norlon-pageintro-row > .wp-block-column:first-child { flex: 0 0 auto !important; width: max-content !important; min-width: 210px; }
.norlon-pageintro h1 { margin: 0; line-height: 1; text-align: right; white-space: nowrap; }
.norlon-pageintro p { margin: 0; }
/* Company History — gray, copy left, image right (R2 img 579x314) */
.norlon-history { padding-block: 60px !important; }
.norlon-history-row { align-items: flex-start; gap: 48px; }
.norlon-history h2 { margin: 0 0 20px; }
.norlon-history-img { margin: 0; }
.norlon-history-img img { width: 100%; aspect-ratio: 579/314; object-fit: cover; display: block; }
/* Our Vision — dark + blueprint texture; eyebrow + 64px statement (red emphasis) */
.norlon-vision { position: relative; overflow: hidden; background-color: var(--nr-ink) !important; padding-block: 70px 78px !important; }
.norlon-vision::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--nr-texture); background-size: cover; background-position: center; }
/* R2-measured (208:1245): the Vision block is 971px wide, centred (x=231..1201) —
our 1000px never applied (computed 1160, out-specified by the content-width rule),
so the statement ran the full 1160. !important + the measured 971. */
.norlon-vision > * { position: relative; z-index: 1; max-width: 971px !important; margin-inline: auto; }
.norlon-vision .has-eyebrow-font-size { margin: 0 0 18px; }
/* Scoped to the parent on purpose: the statement is an
, and Kadence's
`.entry-content h2 { margin-top: 96px }` (0,1,1) beat a bare `.norlon-vision-text`
(0,1,0) — that 96px (collapsing over the eyebrow's 18px) made the stripe 541 vs
R2's 490. Same specificity trap as `.single-content form`. */
/* R2-measured: statement line pitch is 77px on the 64px font → line-height 1.2
(we had 1.1 = 70.4px). NB only 3 of its 4 lines read as "white" — line 4 is the
red italic clause. */
.norlon-vision .norlon-vision-text { font-weight: 600; font-size: 64px; line-height: 1.2; letter-spacing: 0; margin: 0; }
/* Emphasis red on the dark ink Vision stripe. --nr-signal (#EF4135) is 4.25:1 here —
it clears AA as LARGE text (64/40px, 3:1) so axe passes it, but strict-4.5 tools
flag it. --nr-red-on-dark (#F4553F) is 4.83:1, passing at the small-text threshold
too, so it's unambiguous across tools. Negligible visual change. */
.norlon-vision-text em { font-style: normal; color: var(--nr-red-on-dark); }
/* SYSTEMIC: red PRESET text (block colour picker: Signal Red #EF4135 / Norlon Red
#DE3412) sitting on the dark blueprint stripes fails strict 4.5:1 as small text
(signal 4.25, brand 3.58 on ink). Remap both to the AA-safe dark red (4.83) on
those stripes only — light-stripe uses of the same preset colours are untouched.
Catches the "OUR VISION" eyebrow and the 50th "1976 – 2026" date; contact's reds
are already handled explicitly above. `.has-*-color` presets carry !important, so
these must too. */
.norlon-vision .has-signal-red-color,
.norlon-vision .has-norlon-red-color,
.norlon-50th .has-signal-red-color,
.norlon-50th .has-norlon-red-color,
.norlon-connect .has-signal-red-color,
.norlon-connect .has-norlon-red-color { color: var(--nr-red-on-dark) !important; }
/* Trusted Partners — heading | copy | logo, vertically centred */
/* R2-measured (About 208:1245): Trusted Partners stripe = 267px, ink 65 top / 67
bottom. Shared with Services' Safety stripe (.norlon-safety.norlon-partners) so
both stay identical — one value, both pages. */
.norlon-partners { padding-block: 65px 67px !important; }
.norlon-partners-row { align-items: center; gap: 40px; }
.norlon-partners h2 { margin: 0; }
.norlon-partner-logo { margin: 0; }
.norlon-partner-logo img { width: 135px; height: 135px; object-fit: contain; }
.norlon-partner-logo.norlon-cor img { width: 194px !important; height: auto; }
/* inner-page stripes butt together (no default block gaps); rhythm is per-stripe */
.norlon-pagehero, .norlon-pageintro, .norlon-svctabs-stripe, .norlon-why,
.norlon-divider-wrap, .norlon-safety, .norlon-sectors, .norlon-history,
.norlon-vision, .norlon-partners, .norlon-contact { margin-block: 0 !important; }
/* SYSTEMIC (R2-measured): a stripe's vertical rhythm is its OWN padding — never a
block's default margin. WP adds a trailing 32px margin-bottom to the stripe's last
block (.wp-block-columns), which leaked into stripe heights (Connect +45, Company
History +36). Zero ONLY that TRAILING margin.
Deliberately scoped to `> *:last-child`: an earlier, broader version zeroed EVERY
columns margin inside a stripe and silently destroyed intentional gaps — e.g. the
51px under .norlon-sectors-head (tiles jumped 51px up) and .norlon-advantages'
44px margin-top. Intentional spacing between a stripe's head and its content must
survive; only the trailing leak goes. */
.norlon-pageintro > *:last-child,
.norlon-history > *:last-child,
.norlon-vision > *:last-child,
.norlon-partners > *:last-child,
.norlon-why > *:last-child,
.norlon-sectors > *:last-child,
.norlon-safety > *:last-child,
.norlon-contact > *:last-child,
.norlon-svctabs-stripe > *:last-child { margin-bottom: 0 !important; }
/* R2-measured (page frames @1:1): the hero band starts at y=151 — exactly the
header's bottom edge, i.e. NO gap. The old 26px was derived back when the header
was mis-sized at 104; with the header now its true 151, the gap must be 0. */
body:not(.home) .content-area { margin-top: 0 !important; }
/* ---- Services: "Explore Our Services" tabbed component (R2) ----
R2 internal rhythm: 46 top → heading → 46 → tabs → 10 → divider → 55 → content
(centred) → 76 bottom.
The heading and the tabs are now SIBLINGS inside the stripe (the heading is a real
core/heading block the client owns; it used to be printed by the shortcode). So
the stripe carries the 46/76 padding — it used to sit on .norlon-svctabs back when
that wrapper contained both. */
.norlon-svctabs-stripe { padding-block: 46px 76px !important; }
.norlon-svctabs { padding: 0; }
/* Scoped: Kadence's `.entry-content h2 { margin-bottom: 25px }` (0,1,1) beats a bare
class (0,1,0), so this must stay at (0,2,0) or the 46px silently reverts to 25. */
.norlon-svctabs-stripe > .norlon-svctabs-head { margin: 0 0 46px; }
/* ---- Tab chrome: RE-SKIN of the kadence/tabs block ----
The service copy now lives in the PAGE as blocks (kadence/tabs > kadence/tab >
core/columns), so the client edits it in the editor — it used to be hardcoded in
a PHP array and was uneditable. Kadence owns the chrome markup, the ARIA
(tablist/tab/tabpanel) and the JS; we only re-skin it to R2.
Selectors therefore target KADENCE's classes. Do not reintroduce .norlon-svctab —
that markup no longer exists. Note the active class sits on the