/*
* sep-home.css
* Surrey Environment Partnership - home page components.
*
* Cards, right-hand call-to-action boxes and the "Or go straight to..." band
* on the home page. The page itself is built from standard page-builder
* elements; this file is the only place their appearance is set.
*
* Enqueued by sep_home_styles() in functions.php.
* PRE Creative, 2 September 2026.
*/
/* SEP home page 2 Sep 2026. Card, CTA and band styling.
The page content itself is built from standard page-builder elements -
edit text in the text blocks and swap photographs in the image blocks.
Only change this block if the layout itself needs to change. */
/* ============================================================================
* SIDEBAR CALL-TO-ACTION BOXES rebuilt 16 Sept 2026
* ----------------------------------------------------------------------------
* Same shape as the six cards below the fold, minus the picture: a green title
* bar carrying the subject icon on the left and the chevron on the right, then
* a white panel of description text. Both boxes are ordinary text blocks - an
* h2 with a link, then a line of copy - so the wording, the link and the order
* are all edited normally. Only the icon is CSS, so an editor cannot delete it.
* ========================================================================= */
.sep-hp-cta{position:relative;display:flex;flex-direction:column;background:#fff;
border:1px solid #d7ded8;padding:0!important;margin:0 0 20px!important}
.sep-hp-cta .wpb_wrapper{position:static;display:flex;flex-direction:column;flex:1 1 auto}
/* Two background images on one bar: subject icon left, chevron right. */
.sep-hp-cta h2{font-size:19px;line-height:1.25;font-weight:700;margin:0;color:#fff;
padding:13px 40px 14px 46px;
background-color:#218037;background-repeat:no-repeat,no-repeat;
background-position:14px center,right 12px center;background-size:24px 24px,18px 18px;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ffffff%22%3E%3Cg%20transform%3D%22scale%280.025%29%20translate%280%20960%29%22%3E%3Cpath%20d%3D%22m515-80-10-110h-40q-143%200-244-101T120-535q0-143%20101.5-244T467-880q71%200%20131.5%2025.5T704-783q45%2046%2070.5%20108.5T800-538q0%2066-19.5%20132T724-280q-37%2060-90%20111T515-80Zm50-108q82-69%20128.5-162.5T740-538q0-124-77.5-203T467-820q-120%200-203.5%2083.5T180-535q0%20118%2083.5%20201.5T465-250h100v62Zm-71-126q11-11%2011-27t-11-27q-11-11-27-11t-27%2011q-11%2011-11%2027t11%2027q11%2011%2027%2011t27-11Zm-54-125h50q0-25%208.5-41.5T534-524q27-27%2038-49.5t11-48.5q0-45-30.5-74T471-725q-42%200-75%2022t-49%2060l46%2019q11-26%2030.5-38.5T468-675q30%200%2047%2014.5t17%2038.5q0%2019-11%2038.5T482-535q-27%2028-34.5%2045t-7.5%2051Zm20-65Z%22/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ffffff%22%3E%3Cg%20transform%3D%22scale%280.025%29%20translate%280%20960%29%22%3E%3Cpath%20d%3D%22M530-481%20332-679l43-43%20241%20241-241%20241-43-43%20198-198Z%22/%3E%3C/g%3E%3C/svg%3E")}
.sep-hp-cta h2 a,.sep-hp-cta h2 a:visited{color:#fff;text-decoration:none}
/* One anchor stretched over the box, so the whole panel is clickable but there
is still only one link and one URL for an editor to keep up to date. */
.sep-hp-cta h2 a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:2}
.sep-hp-cta p{font-size:15px;line-height:1.55;margin:0;padding:13px 14px 16px;color:#4a4a4a}
.sep-hp-cta--tracker h2{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ffffff%22%3E%3Cg%20transform%3D%22scale%280.025%29%20translate%280%20960%29%22%3E%3Cpath%20d%3D%22M120-120v-80l80-80v160h-80Zm160%200v-240l80-80v320h-80Zm160%200v-320l80%2081v239h-80Zm160%200v-239l80-80v319h-80Zm160%200v-400l80-80v480h-80ZM120-327v-113l280-280%20160%20160%20280-280v113L560-447%20400-607%20120-327Z%22/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ffffff%22%3E%3Cg%20transform%3D%22scale%280.025%29%20translate%280%20960%29%22%3E%3Cpath%20d%3D%22M530-481%20332-679l43-43%20241%20241-241%20241-43-43%20198-198Z%22/%3E%3C/g%3E%3C/svg%3E")}
.sep-hp-cta:hover h2,.sep-hp-cta:focus-within h2{background-color:#1a6a2d}
.sep-hp-cta h2 a:hover,.sep-hp-cta h2 a:focus,.sep-hp-cta:hover h2 a{color:#d8ecdc!important;text-decoration:underline}
.sep-hp-cta:hover{background-color:#f3f8f4}
.sep-hp-cta:focus-within{box-shadow:0 0 0 3px #fff,0 0 0 6px #17331f}
.sep-hp-cta:focus-within{box-shadow:0 0 0 3px #fff,0 0 0 6px #17331f}
/* Plain text blocks sit flush with the column edge. The theme gives every
.wpb_text_column 10px 15px of padding, which indents body copy away from
headings and images. Our own sep-hp-* components keep their own padding. */
.entry-content .wpb_text_column:not(.sep-hp-ttl):not(.sep-hp-sub):not(.sep-hp-cta):not(.sep-hp-seealso):not(.sep-hp-insta):not(.sep-hp-search):not(.sep-hp-promo-bar){padding:0!important;margin-bottom:20px}
.sep-hp-pagetitle h1{margin-top:0}
.sep-hp-seealso{background:#218037;padding:10px}
.sep-hp-seealso h2{font-size:1.5rem;line-height:1.25;font-weight:700;color:#fff;margin:6px 0 14px;padding:0 4px 12px;border-bottom:2px solid rgba(255,255,255,.55)}
.sep-hp-seealso ul{list-style:none;margin:0;padding:0}
.sep-hp-seealso li{margin:0 0 8px}
.sep-hp-seealso li:last-child{margin-bottom:0}
.sep-hp-seealso li a,.sep-hp-seealso li a:visited{display:block;padding:12px 14px;background:#fff;color:#000;font-weight:400;text-align:center;text-decoration:none;text-shadow:none;border:1px solid transparent}
.sep-hp-seealso li a:hover{background:#8ec58e;color:#000!important;border-color:#fff;text-decoration:none}
.sep-hp-seealso a:focus-visible{box-shadow:none;outline:#fff solid 3px!important;outline-offset:2px!important}
h2.vc_tta-panel-title,h2.vc_tta-panel-title>button{font-size:17px;font-weight:700;line-height:1.35}
.sep-hp-insta{border:1px solid #d7ded8;background:#fff;padding:14px 16px 16px}
.sep-hp-insta h2{font-size:17px;font-weight:700;margin:0 0 10px;color:#1a1a1a}
.sep-hp-insta .sbi_header_text,.sep-hp-insta .sbi_username,.sep-hp-insta .sbi_bio,.sep-hp-insta .sbi_header_text a,.sep-hp-insta .sbi_header_link{color:#1a1a1a!important}
.sep-hp-bandrow{border-top:0}
.home .sep-hp-bandrow{border-top:1px solid #d7ded8}
.sep-hp-bandrow .x-container{display:flex;flex-wrap:wrap;align-items:stretch;column-gap:20px}
.sep-hp-bandhd{width:100%;margin-bottom:20px!important}
.sep-hp-bandhd h2{font-size:22px;font-weight:700;margin:0 0 4px}
.sep-hp-bandhd p{font-size:15px;color:#4a4a4a;margin:0}
.sep-hp-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #d7ded8;width:calc((100% - 40px)/3)!important;margin:0 0 20px!important;float:none!important}
.sep-hp-card .wpb_wrapper,.sep-hp-card figure{position:static;margin:0}
.sep-hp-pic{margin:0!important;overflow:hidden}
.sep-hp-pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transform:scale(1);transition:transform .35s ease}
.sep-hp-card:hover .sep-hp-pic img,.sep-hp-card:focus-within .sep-hp-pic img{transform:scale(1.07)}
@media (prefers-reduced-motion:reduce){.sep-hp-pic img{transition:none}.sep-hp-card:hover .sep-hp-pic img,.sep-hp-card:focus-within .sep-hp-pic img{transform:none}}
.sep-hp-ttl{margin:0!important;padding:13px 14px;min-height:70px;display:flex;align-items:center;
background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ffffff%22%3E%3Cg%20transform%3D%22scale%280.025%29%20translate%280%20960%29%22%3E%3Cpath%20d%3D%22M530-481%20332-679l43-43%20241%20241-241%20241-43-43%20198-198Z%22/%3E%3C/g%3E%3C/svg%3E") no-repeat right 12px center;background-size:18px 18px;background-color:#218037}
.sep-hp-ttl .wpb_wrapper{width:100%}
.sep-hp-ttl h2{font-size:19px;line-height:1.25;font-weight:700;margin:0;color:#fff;padding-right:22px}
.sep-hp-ttl h2 a,.sep-hp-ttl h2 a:visited{color:#fff;text-decoration:none}
.sep-hp-ttl h2 a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:2}
.sep-hp-sub{flex:1;margin:0!important;padding:13px 14px 16px;min-height:66px}
.sep-hp-sub p{font-size:15px;line-height:1.55;color:#4a4a4a;margin:0}
.sep-hp-ttl h2 a:hover,.sep-hp-ttl h2 a:focus,.sep-hp-card:hover .sep-hp-ttl h2 a{color:#d8ecdc!important;text-decoration:underline}
.sep-hp-card:hover .sep-hp-ttl,.sep-hp-card:focus-within .sep-hp-ttl{background-color:#1a6a2d;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23d8ecdc%22%3E%3Cg%20transform%3D%22scale%280.025%29%20translate%280%20960%29%22%3E%3Cpath%20d%3D%22M530-481%20332-679l43-43%20241%20241-241%20241-43-43%20198-198Z%22/%3E%3C/g%3E%3C/svg%3E")}
.sep-hp-card:hover .sep-hp-sub p{color:#1a1a1a}
.sep-hp-card:focus-within{box-shadow:0 0 0 3px #fff,0 0 0 6px #17331f}
@media (max-width:979px){.sep-hp-card{width:calc((100% - 20px)/2)!important}}
@media (max-width:619px){
.sep-hp-card{width:100%!important}
.sep-hp-ttl{min-height:0}
.sep-hp-ttl h2{font-size:17px}
.sep-hp-sub{min-height:0}
}
/* ============================================================================
* MOTION AND BAND TINT added 3 Sept 2026
* ----------------------------------------------------------------------------
* Shared by two places:
* - the home page "Or go straight to..." band (.sep-hp-bandrow)
* - the "Can you recycle...?" item grid (.sep-grid-wrap)
*
* Deliberately NOT in the sep-recycling-items plugin. This is page furniture,
* the plugin is item data, and keeping it here means no version bump, no
* release and no zip to upload when the motion is tweaked. It also means the
* two pages cannot drift apart. sep_home_styles() already enqueues this file
* on every page, so nothing new is loaded.
*
* No markup changes. Everything hooks off classes that already exist, so SCC
* can add, remove and reorder cards and items without knowing this is here.
* ========================================================================== */
/* --- 1. The tint -----------------------------------------------------------
* X writes `background-color: transparent` inline on every row and it beats
* any class rule. These are background-IMAGES; a gradient is an image, and an
* inline background-color cannot touch one. Hence no !important.
* Two green glows over a diagonal wash. No image file, no request.
* -------------------------------------------------------------------------- */
/* Scoped to `.home` and to the content band holding an item grid, NOT to
* `.sep-hp-bandrow` generally. The section landing pages (3 Your bins,
* 4 Reduce, reuse, repair, recycle more) use the same bandrow class, but there
* the band is the first thing under the hero image with nothing above it to
* separate from, so a tint there is decoration for its own sake. Paul,
* 03.09.26. Their rows are already `background-color:#00000000`, so scoping
* this rule is the whole fix; no page edit is needed.
*
* `.x-content-band:has()` rather than a class on the row, so this reaches all
* nine "Can you recycle...?" pages without nine builder edits. The plugin
* already depends on `:has()` for its overflow-clipping defence, so this is an
* established dependency on this site, not a new one.
*
* This is a plain background and it really is the width of the window, because
* the category pages are now on `template-blank-4.php` like every other page we
* have built. A content band on that template IS the window; on the default
* template it sits inside `.x-container.max.width.offset` and can never be
* wider than the text column. That template difference, not the CSS, is what
* made the tint stop at the text edge on 03.09.26. See PAGE TEMPLATE below.
*
* The row's own `padding_top` / `padding_bottom` are set in the builder (30px /
* 40px), matching the other new pages, so no `!important` override is needed.
* -------------------------------------------------------------------------- */
.home .sep-hp-bandrow,
.entry-content .x-content-band:has(.sep-grid-wrap) {
background-image:
radial-gradient(1100px 460px at 82% -12%, rgba(33,128,55,.14), rgba(33,128,55,0) 60%),
radial-gradient(700px 420px at 4% 110%, rgba(33,128,55,.09), rgba(33,128,55,0) 62%),
linear-gradient(157deg, #f5faf6 0%, #e9f2eb 44%, #f8fcf9 100%);
}
/* PAGE TEMPLATE - a note, not a rule.
* Every page in this build must be on `template-blank-4.php`. The default and
* `template-layout-full-width.php` templates wrap the content in `.entry-wrap`,
* which the X theme styles as a boxed white card:
* .entry-wrap{padding:60px;background:#fff;border-radius:4px;box-shadow:0 .15em .35em #0002}
* That card is the faint border round the page Paul spotted on 03.09.26, and it
* is also what stopped the band reaching the window edge. Those templates also
* print the page title themselves as `h1.entry-title`; blank-4 does not, so the
* page supplies its own `
` in a `sep-hp-pagetitle` text block at the top of
* its first column. Check the template before debugging any width problem here.
* -------------------------------------------------------------------------- */
/* SC 1.4.11. The plugin's control border #8d968d is 3.05:1 on white, which is
* a pass with 0.05 to spare. On the lightest point of the tint (#f8fcf9) the
* same colour is 2.95:1, which is a fail. #848d84 is 3.31:1 on the tint and
* 3.43:1 on white, and is visually indistinguishable. The input keeps an
* explicit white fill so the border is unambiguous on both sides. */
.entry-content .sep-grid-wrap .sep-filterbar input {
background: #fff;
border-color: #848d84;
}
/* --- 2. Corners and shadow, matched to the item grid -----------------------
* 4px radius and the offset shadow are the plugin's own values (--sep-radius
* and Paul's 01.09.26 box-shadow), copied here so the home cards and the item
* cards are the same object. overflow:hidden keeps the green title bar inside
* the rounded corner; it does not clip the card's own shadow or focus ring.
* -------------------------------------------------------------------------- */
.sep-hp-card,
.sep-hp-cta {
border-radius: 4px;
box-shadow: 10px 10px 28px rgba(0,0,0,.10);
}
.sep-hp-card {
overflow: hidden;
}
/* Hover lift. Only on the home cards: those are whole-card links. The item
* cards are not clickable as a whole (the route buttons inside them are), so
* lifting them on hover would promise a click that does nothing. */
.sep-hp-card,
.sep-hp-cta {
transition: transform .28s cubic-bezier(.22,.68,.28,1),
box-shadow .28s cubic-bezier(.22,.68,.28,1);
}
.sep-hp-card:hover,
.sep-hp-cta:hover {
transform: translateY(-3px);
box-shadow: 12px 14px 34px rgba(0,0,0,.14);
}
/* The chevron nudges with it. Background-position, so nothing reflows. */
.sep-hp-ttl {
transition: background-position .25s cubic-bezier(.22,.68,.28,1);
}
.sep-hp-card:hover .sep-hp-ttl,
.sep-hp-card:focus-within .sep-hp-ttl {
background-position: right 8px center;
}
/* The focus ring must survive the new drop shadow, so it is re-declared with
* the drop shadow appended rather than replacing it. */
.sep-hp-card:focus-within,
.sep-hp-cta:focus-within {
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #17331f, 10px 10px 28px rgba(0,0,0,.10);
}
/* Stops the ragged one-word last line on the longer card titles. Ignored by
* browsers that do not support it, which is the whole point. */
.sep-hp-ttl h2,
.sep-hp-bandhd h2,
.sep-hp-cta h2 {
text-wrap: balance;
}
/* --- 3. Fade in and down ---------------------------------------------------
* The band and the grid both sit below the fold, so this is triggered when
* they scroll into view rather than on load; on load it would be over before
* anyone got there. sep_motion_boot() in functions.php writes .js-sep-anim
* onto in the head, and the footer script adds .is-sep-in.
*
* FAILS SAFE. The hidden start state applies ONLY under .js-sep-anim, which
* only JavaScript can set, and which a watchdog removes if the footer script
* never runs. No script, no observer, or an error anywhere on the page, and
* the content is simply there. An animation must never be the reason a
* resident cannot read something.
*
* Only opacity and transform change. Nothing is display:none or
* visibility:hidden, so every card stays in the accessibility tree and in the
* tab order the whole time (SC 1.3.1, 4.1.2, 2.4.3). Nothing loops and nothing
* runs longer than half a second, so SC 2.2.2 is not engaged.
* -------------------------------------------------------------------------- */
.js-sep-anim .sep-hp-bandhd,
.js-sep-anim .sep-hp-card,
.js-sep-anim .sep-hp-cta,
.js-sep-anim .sep-grid-wrap .sep-grouphead,
.js-sep-anim .sep-grid-wrap li.sep-item {
opacity: 0;
transform: translateY(-14px);
}
/* Paired one for one with the rule above. `.js-sep-anim .is-sep-in` on its own
* looks tidier and is wrong: `.js-sep-anim .sep-grid-wrap li.sep-item` is
* 0,3,1 and beats it, so the item grid would stay invisible for ever while the
* home cards, which happen to tie, would work. Caught in the preview, and it
* is exactly the failure mode the watchdog cannot see. Keep them paired. */
.js-sep-anim .sep-hp-bandhd.is-sep-in,
.js-sep-anim .sep-hp-card.is-sep-in,
.js-sep-anim .sep-hp-cta.is-sep-in,
.js-sep-anim .sep-grid-wrap .sep-grouphead.is-sep-in,
.js-sep-anim .sep-grid-wrap li.sep-item.is-sep-in {
opacity: 1;
transform: none;
transition: opacity .5s cubic-bezier(.22,.68,.28,1),
transform .5s cubic-bezier(.22,.68,.28,1);
}
/* --- 4. Reduced motion -----------------------------------------------------
* SC 2.3.3 is AAA rather than AA, so this is not strictly required. It costs
* five lines and it is the first thing an auditor looks for. Everything is
* simply present, with no movement anywhere, including the hover lift and the
* existing image zoom.
* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.js-sep-anim .sep-hp-bandhd,
.js-sep-anim .sep-hp-card,
.js-sep-anim .sep-hp-cta,
.js-sep-anim .sep-grid-wrap .sep-grouphead,
.js-sep-anim .sep-hp-card.is-sep-in,
.js-sep-anim .sep-grid-wrap li.sep-item,
.js-sep-anim .sep-grid-wrap li.sep-item.is-sep-in {
opacity: 1;
transform: none;
transition: none;
}
.sep-hp-card,
.sep-hp-cta,
.sep-hp-ttl {
transition: none;
}
.sep-hp-card:hover,
.sep-hp-cta:hover {
transform: none;
}
.sep-hp-card:hover .sep-hp-ttl,
.sep-hp-card:focus-within .sep-hp-ttl {
background-position: right 12px center;
}
}
/* --- 5. The right-hand panel, all three sub-page types ---------------------
* Two components render this panel and they are already the same colours:
* `.sep-hp-seealso` (a text block on 3.1, 4.1 and every hand-built sub-page)
* and `.sep-catnav` (rendered by sep-recycling-items on the "Can you
* recycle...?" pages). Now that the cards beside them have 4px corners and a
* shadow, a hard square panel is the one thing on the page that still looks
* like the old site. Paul, 03.09.26: restyle both to match the cards.
*
* CSS only, no page edits and no plugin change. The `.entry-content` prefix
* takes the catnav rules to 0,3,1, which beats the plugin's own 0,2,1 without
* `!important` whatever order the two stylesheets load in.
*
* Colours are untouched, so the plugin's contrast notes still hold: white
* heading on #218037 is 4.99:1 (and it is large text, which needs 3:1), black
* on white 21:1, black on the #8ec58e hover 10.53:1. Only the corners, the
* shadow and the focus ring change.
* -------------------------------------------------------------------------- */
.entry-content .sep-hp-seealso,
.entry-content .sep-catnav {
border-radius: 4px;
box-shadow: 10px 10px 28px rgba(0,0,0,.10);
padding: 14px 14px 16px;
}
.entry-content .sep-hp-seealso li a,
.entry-content .sep-hp-seealso li a:visited,
.entry-content .sep-catnav-item a,
.entry-content .sep-catnav-item a:visited {
border-radius: 4px;
transition: background-color .2s cubic-bezier(.22,.68,.28,1);
}
/* The hairline border the plugin uses to stop the button edge dissolving into
* the panel on hover. `.sep-hp-seealso` had the same border already; this only
* makes sure both keep it now that the corners are rounded. */
.entry-content .sep-hp-seealso li a:hover,
.entry-content .sep-catnav-item a:hover {
border-color: #fff;
}
/* SC 2.4.7. `.sep-hp-seealso` already had a white focus ring; `.sep-catnav`
* sits outside `.sep-grid-wrap` so the plugin's focus rule does not reach it,
* and it was falling back to the theme's. Both now match. */
.entry-content .sep-hp-seealso a:focus-visible,
.entry-content .sep-catnav-item a:focus-visible {
box-shadow: none;
outline: #fff solid 3px !important;
outline-offset: 2px !important;
}
/* wpautop writes `