/* ---------------------------------------------------------------
blog-test.css
Loaded ONLY by blog-test.php, after main.css, so anything here
overrides the live styles without touching them.
Nothing in this file affects blog.php or any other page.
When the revamp is approved, these rules get merged into main.css
and this file plus blog-test.php can be deleted.
--------------------------------------------------------------- */
/* Add revamp styles below */
/* Close the gap between the featured banner and "Recent blog post".
Was 100px of section padding; the :not() keeps the featured banner
sections (which share id="blog") untouched. */
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) {
padding-top: 30px;
}
/* Topic tags — WriteBest design system, Badge component, "neutral" tone.
Its README documents neutral as the default for category tags on cards.
Values from the design system's tokens.json + components/bundle.css:
background surface-150 #f1f1f1
text ink-700 #333333
padding space-1 / space-3 4px / 12px
radius radius-pill 999px
type 13px / 18px, weight 400 (the "caption" style, documented
for metadata; the Badge's own 500 read too heavy here)
Plain spans, not links: the whole card is already wrapped in an ,
and nesting a link inside a link is invalid HTML. */
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.post-tag {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: #f1f1f1;
color: #333333;
/* Geomanist_r is the site's REGULAR cut; plain 'Geomanist' is the heavier
heading cut, which is what made these look bold at weight 400.
This matches the card description exactly. Poppins (the design system's
preferred face) is not loaded on this site, so it is not in the stack. */
font-family: 'Geomanist_r', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 18px;
white-space: nowrap;
}
/* Per-topic pastel tags. One pastel background per topic, rotated around the
wheel so the set reads as one coherent system rather than picked ad hoc.
Text stays the same dark grey (#333333, matching the base .post-tag colour)
for every tag — only the background changes. Hues keep clear of the brand
red (~355-15°) so a topic tag never gets mistaken for the brand/active
colour used elsewhere (e.g. .post-filter.is-active).
The on-image banner gets the same per-topic colours too — see the
.post-tags--on-image .post-tag--* overrides further down, which win by
source order at matching specificity.
Same palette is mirrored in blog-article.css as .article-tag--* so a topic
reads the same colour on the listing grid and on its own article page. */
.post-tag--materials { background: hsl(15, 65%, 92%); color: #333333; }
.post-tag--products { background: hsl(45, 65%, 92%); color: #333333; }
.post-tag--inspiration { background: hsl(32, 75%, 89%); color: #333333; }
.post-tag--sustainability { background: hsl(120, 50%, 90%); color: #333333; }
.post-tag--healthcare { background: hsl(165, 60%, 91%); color: #333333; }
.post-tag--education { background: hsl(190, 60%, 91%); color: #333333; }
.post-tag--events { background: hsl(215, 65%, 93%); color: #333333; }
.post-tag--workspace { background: hsl(235, 60%, 94%); color: #333333; }
.post-tag--customisation { background: hsl(270, 55%, 94%); color: #333333; }
.post-tag--public-spaces { background: hsl(300, 50%, 94%); color: #333333; }
.post-tag--design { background: hsl(320, 60%, 94%); color: #333333; }
.post-tag--retail { background: hsl(335, 65%, 94%); color: #333333; }
/* ---------------------------------------------------------------
Post card — reference layout (tags → title → image → excerpt → byline)
built from WriteBest design system tokens:
card surface-000 #fff on surface-200 #e5e5e5 border, radius-lg 16px
padding space-5 24px, internal gap space-4 16px
title h3 scale 24/32 weight 500, ink-900
excerpt body-sm 14/21, ink-400 #757575
byline caption 13/18, ink-400, avatar on surface-150 #f1f1f1
--------------------------------------------------------------- */
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .row:has(> .col-md-4) {
display: flex;
flex-wrap: wrap;
}
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 {
display: flex;
float: none;
margin-bottom: 24px;
}
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 > a {
display: flex;
width: 100%;
text-decoration: none;
}
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 .sl-header-wrapper {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
padding: 24px;
background: #ffffff;
border-radius: 16px;
}
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 .sl-header-wrapper .img-curve {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
}
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 .sl-header-wrapper h3 {
margin: 0;
font-size: 19px;
line-height: 26px;
font-weight: 500;
color: #000000;
}
/* Reserve three lines of title on the multi-column grid so every card's
image starts at the same height, however long the headline runs.
Stacked cards on mobile don't need it. */
@media (min-width: 768px) {
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 .sl-header-wrapper h3 {
min-height: 78px;
}
}
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 .sl-header-wrapper p {
margin: 0;
font-family: 'Geomanist_r', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 21px;
color: #757575;
}
/* tags now sit above the title, so they no longer need a top margin */
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 .post-tags {
margin-top: 0;
}
/* byline pinned to the bottom so cards line up on a row */
.post-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 4px;
font-family: 'Geomanist_r', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #757575;
}
.post-avatar {
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 999px;
object-fit: cover;
display: block;
background: #f1f1f1;
}
.post-author { color: #333333; }
.post-meta-dot { color: #a3a3a3; }
.post-date { color: #757575; }
/* Page background — surface-050 #f9f9f9, the design system's
"subtle section background alternate to white". The white cards
now separate from the page by contrast, so they need no outline. */
body {
background: #f9f9f9;
}
/* Read time, shown beside the tags as in the reference.
Figures are real: each linked page's word count at 200 wpm.
caption style 13/18, ink-400 #757575. */
.post-tags {
align-items: center;
}
.post-readtime {
font-family: 'Geomanist_r', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #757575;
white-space: nowrap;
}
/* the bullet lives inside .post-readtime so the two never split
across lines when a narrow card forces the row to wrap */
.post-readtime .post-meta-dot {
margin-right: 6px;
}
/* Topic filter bar — replaces the old "Recent blog post" heading.
Design system Badge tones: neutral for the inactive chips, brand for the
single active one (its README reserves brand for one highlighted item). */
.post-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px;
}
.post-filter {
border: 0;
cursor: pointer;
padding: 11px 22px;
border-radius: 999px;
background: #f1f1f1;
color: #333333;
font-family: 'Geomanist_r', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 22px;
transition: background-color .15s ease, color .15s ease;
}
.post-filter:hover {
background: #e5e5e5;
}
.post-filter.is-active {
background: #c43030;
color: #ffffff;
}
.post-filter:focus-visible {
outline: 2px solid #c43030;
outline-offset: 2px;
}
/* Featured banner meta — the banner sits on a photo with white text.
Design system Badge "outline" tone is the documented choice for busy or
photographic backgrounds; its ink-600 text assumes a light surface, so
here it is inverted to white on a translucent white border. */
.post-tags--on-image {
/* Tight coupling with the "Featured" kicker above (margins collapse
against its own 10px margin-bottom), clear breathing room before the
title below — reversed from the original 16/4, which put the tight
gap in the wrong place (tags sat closer to the H1 than to "Featured"). */
margin-top: 4px;
margin-bottom: 12px;
}
.post-tags--on-image .post-tag {
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.45);
color: #ffffff;
}
/* Per-topic colour also applies on the photo banner: same solid pastel
background and dark grey text as the cards, no translucent border needed
since the pastel itself is opaque and reads fine over the photo.
Same specificity as the rule above (two classes) — placed after it, so
source order lets a matched topic win over the generic on-image style. */
.post-tags--on-image .post-tag--materials { background: hsl(15, 65%, 92%); color: #333333; border: none; }
.post-tags--on-image .post-tag--products { background: hsl(45, 65%, 92%); color: #333333; border: none; }
.post-tags--on-image .post-tag--inspiration { background: hsl(32, 75%, 89%); color: #333333; border: none; }
.post-tags--on-image .post-tag--sustainability { background: hsl(120, 50%, 90%); color: #333333; border: none; }
.post-tags--on-image .post-tag--healthcare { background: hsl(165, 60%, 91%); color: #333333; border: none; }
.post-tags--on-image .post-tag--education { background: hsl(190, 60%, 91%); color: #333333; border: none; }
.post-tags--on-image .post-tag--events { background: hsl(215, 65%, 93%); color: #333333; border: none; }
.post-tags--on-image .post-tag--workspace { background: hsl(235, 60%, 94%); color: #333333; border: none; }
.post-tags--on-image .post-tag--customisation { background: hsl(270, 55%, 94%); color: #333333; border: none; }
.post-tags--on-image .post-tag--public-spaces { background: hsl(300, 50%, 94%); color: #333333; border: none; }
.post-tags--on-image .post-tag--design { background: hsl(320, 60%, 94%); color: #333333; border: none; }
.post-tags--on-image .post-tag--retail { background: hsl(335, 65%, 94%); color: #333333; border: none; }
.post-tags--on-image .post-readtime,
.post-meta--on-image {
color: rgba(255, 255, 255, 0.85);
}
.post-meta--on-image {
margin-top: 20px;
}
.post-meta--on-image .post-author,
.post-meta--on-image .post-date,
.post-meta--on-image .post-readtime {
color: rgba(255, 255, 255, 0.85);
}
.post-meta--on-image .post-meta-dot,
.post-tags--on-image .post-meta-dot {
color: rgba(255, 255, 255, 0.6);
}
.post-meta--on-image .post-avatar {
border: 1px solid rgba(255, 255, 255, 0.5);
}
/* The banner text block is absolutely positioned at top:50%, a value tuned for
the original (shorter) content. The tag row and byline make it taller, so it
overflowed past the bottom of the photo onto the page background, where the
white text was invisible. Raising it keeps everything inside the image.
Verified to fit at 1173px and 1440px. */
.slider_new_desktop .slide_new_123 .slide__content {
top: 36%;
}
/* The mobile banner now uses the same dark photo as desktop (blog_slider.jpg),
so its text switches from ink-600 (which suited the old light image) to white,
matching the desktop banner. */
/* #blog is needed here: main.css sets "#blog p { color:#434343 }", and an ID
selector outranks any number of classes. */
#blog.slider_new_mobile .slider__text45 h2,
#blog.slider_new_mobile .slider__text45 .slider__text45_h1,
#blog.slider_new_mobile .slider__text45 p {
color: #ffffff;
}
/* Mobile banner: the posts section's margin-top:-120px was pulling the filter
bar up over the banner photo (a 30px overlap). The banner swaps to its mobile
variant at 900px, so the extra top padding is scoped to that range.
Verified: 100px padding gives a 40px gap below the banner at 375px wide. */
@media (max-width: 900px) {
/* Restores the layout that worked: the posts section keeps its -120px top
margin, offset by 100px padding, giving a 40px gap under the banner.
(Zeroing those margins instead left WOW.js's fadeInUp stuck at
translateY(100%) and the page rendered blank.) */
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) {
/* 160px, not 100px: the banner is lifted above this section (below), so
the filter bar has to clear the banner's bottom edge rather than just
the section's. Gives a 40px gap at 375px wide. */
padding-top: 160px;
}
/* The posts section overlaps the banner's bottom ~120px and, being later in
the DOM, was swallowing taps there. Lifting the banner fixes hit-testing.
Its padding-bottom/margin-bottom cancelled each other (100 / -100), so
zeroing both keeps the same layout while shrinking the section's box to
the banner itself — otherwise its padding would cover the filter chips. */
section#blog.slider_new_mobile {
position: relative;
z-index: 2;
padding-bottom: 0;
margin-bottom: 0;
}
/* Cards sat 79px apart: 24px column margin plus an inherited 55px on the
card. Dropping the 55px leaves 24px — space-5, the grid gap. */
#blog-posts .sl-header-wrapper {
margin-bottom: 0;
}
}
/* Desktop banner gap.
The hero (.slide_new_123) is height:100vh while the photo keeps its own aspect
ratio, and the photo is centred inside it (position:absolute, top:50%,
transform:translateY(-50%)). That left equal dead space above and below the
image — the space below is the gap under the banner, and because it is
(100vh - photoHeight) / 2 it grew with screen height: 162px at 1440x900 and
312px at 1440x1200. No fixed padding could fix that, so the hero is made to
hug the photo instead. Clearing the transform matters: leaving it in place
shifts the photo up by half its height. */
@media (min-width: 992px) {
.slider_new_desktop .slide_new_123,
.slider_new_desktop .clickable-div {
height: auto;
}
.slider_new_desktop .slide_new_123 .slide__img {
position: relative;
top: auto;
transform: none;
}
/* Pin the banner text to the bottom of the photo rather than a percentage,
so it keeps the same 40px offset whatever the photo height.
Two legacy values had to be unpicked: the inner block carries
margin-top:280px, and the box carries transform:translate(-900px,-179px)
whose vertical half paired with the old top:50% centring. The horizontal
-900px is kept — it sets the text's left position. */
.slider_new_desktop .slide_new_123 .slide__content {
top: auto;
bottom: 40px;
transform: translate(-900px, 0);
}
.slider_new_desktop .slide_new_123 .slider__text-blog {
margin-top: 0;
}
}
/* breathing room under the banner; verified 40px at 960, 1173, 1440 wide and
unaffected by viewport height */
@media (min-width: 901px) {
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) {
padding-top: 60px;
}
}
/* The mobile banner had no link of its own — the only one was the "Read more"
button that was removed, so the banner became untappable (desktop was fine,
it wraps everything in an ). The link now fills the banner so the whole
image is tappable, matching desktop. */
.slider_new_mobile .mobile-banner-link {
display: block;
height: 100%;
text-decoration: none;
}
/* ---------------------------------------------------------------
Motion — deliberately restrained, using the design system's own
shadow tokens. tokens.json notes the live site is flat with no
elevation, and lists shadow-md (0 8px 24px rgba(0,0,0,.12)) for
layered UI; it reads as a lift without turning the page glossy.
--------------------------------------------------------------- */
/* Card hover: small rise + shadow. @media (hover: hover) keeps it off
touch screens, where :hover sticks after a tap. */
@media (hover: hover) {
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 .sl-header-wrapper {
transition: transform .25s ease, box-shadow .25s ease;
will-change: transform;
}
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 > a:hover .sl-header-wrapper {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 .img-curve {
transition: transform .35s ease;
}
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 > a:hover .img-curve {
transform: scale(1.02);
}
}
/* Scroll reveal. Progressive enhancement: the hidden state only applies
once JS adds .js-reveal, so with JS off or broken the cards are simply
visible — never blank. (WOW.js is avoided here on purpose: it hides
elements up front, and a stuck animation blanks the page.) */
#blog-posts.js-reveal .post-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity .5s ease, transform .5s ease;
}
#blog-posts.js-reveal .post-reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
#blog-posts.js-reveal .post-reveal,
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 .sl-header-wrapper,
section#blog:not(.slider_new_desktop):not(.slider_new_mobile) .col-md-4 .img-curve {
transition: none;
transform: none;
opacity: 1;
}
}
/* ===== Cards: one radius site-wide (8px) ===== */
.sl-header-wrapper { border-radius: 8px !important; overflow: hidden; }
.sl-header-wrapper .img-curve { border-radius: 0 !important; }