/* ============================================ SafeSystemHub - Site Styles Design tokens sourced from AUR-SST Figma style guide (file 9q1LZuB5CpCqn96YXnpiSs). Brand: rust-orange primary, dark-navy secondary, warm neutral surfaces. Typography: Inter family across all weights. ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { /* Brand palette (Style Guide → Brand) */ --ssh-primary: #CD4E27; /* Brand/Primary - rust orange */ --ssh-primary-dark: #A54019; /* Brand/Primary Dark - hover */ --ssh-primary-light: #EECCBF; /* Brand/Primary Light (rgba 238,204,191) */ --ssh-secondary: #03293C; /* Brand/Secondary - dark navy */ --ssh-accent: #EECCBF; /* Brand/Primary Light - warm peach accent */ --ssh-link: #CD4E27; /* Link / Action */ /* Neutrals (Style Guide → Neutrals / Text) */ --ssh-heading: #222222; /* Text Primary - headings */ --ssh-charcoal: #302F2D; /* Neutrals/Dark (rgba 48,47,45) - dark text, icons, dark elements */ --ssh-dark-mid: #484744; /* Neutrals/Dark Mid */ --ssh-img-bg: #E8E7E5; /* image / thumbnail placeholder bg (card media area) */ --ssh-dark-btn: #302F2D; /* Button/dark - Neutrals/Dark (design) */ --ssh-cta-bg: #CD4E27; /* CTA band - Brand/Primary orange (design) */ --ssh-text: #6B6A67; /* Bodyzip copy - per issue #51 (black body text = #6b6a67) */ --ssh-text-light: #6B6A67; /* Text Secondary - labels / muted */ --ssh-light-bg: #F5F4F2; /* Neutrals/Neutral - light surface (section bg / card headers) */ --ssh-cream: #F5F1E8; /* Cream - warm section background (Figma resources "Latest Resources") */ --ssh-hero-bg: #F5F1E8; /* Cream - warm card bg */ --ssh-border: #E0DEDB; /* Neutrals/Border (rgba 224,222,219) - warm divider */ --ssh-border-cool: #E1E4ED; /* Cool card border */ --ssh-footer-bg: #222222; /* Footer - dark (design footer fill) */ --ssh-footer-text: #FFFFFF; /* Text on Dark */ --ssh-footer-bottom: #1A1A1A; /* Darker shade - copyright bar */ /* Utility (Style Guide → Utility) */ --ssh-success: #3A975D; /* Success */ --ssh-focus: #3C82DC; /* Focus */ /* Typography (Style Guide → Type, Inter) */ --ssh-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --ssh-fs-hero: 3rem; /* 48px - H1 page hero titles */ --ssh-fs-h1: 3rem; /* 48px - H1 */ --ssh-fs-h2: 2.25rem; /* 36px - H2 section headings */ --ssh-fs-h3: 1.75rem; /* 28px - H3 card / content titles */ --ssh-fs-h4: 1.375rem; /* 22px - H4 sub-section headings */ --ssh-fs-h5: 1.125rem; /* 18px - H5 small headings */ --ssh-fs-body-lg: 1.125rem; /* 18px - Paragraph/Large (lead) */ --ssh-fs-body: 1rem; /* 16px - Paragraph/Medium (body) */ --ssh-fs-body-sm: 0.875rem; /* 14px - Paragraph/Default (small) */ --ssh-fs-label: 0.75rem; /* 12px - Label */ --ssh-fs-overline: 0.75rem; /* 12px - Display/1 Uppercase */ /* Line heights (Style Guide → Type, size/leading) */ --ssh-lh-h1: 1.21; /* 48/58 */ --ssh-lh-h2: 1.22; /* 36/44 */ --ssh-lh-h3: 1.29; /* 28/36 */ --ssh-lh-h4: 1.36; /* 22/30 */ --ssh-lh-h5: 1.44; /* 18/26 */ --ssh-lh-body-lg: 1.56; /* 18/28 - Paragraph/Large */ --ssh-lh-body: 1.5; /* 16/24 - Paragraph/Medium */ --ssh-lh-body-sm: 1.57; /* 14/22 - Paragraph/Default */ /* Spacing scale (Style Guide → Space) */ --ssh-space-1: 4px; --ssh-space-2: 8px; --ssh-space-3: 12px; --ssh-space-4: 16px; --ssh-space-6: 24px; --ssh-space-8: 32px; --ssh-space-12: 48px; --ssh-space-16: 64px; --ssh-space-20: 80px; --ssh-space-24: 96px; --ssh-space-30: 120px; /* Surface */ --ssh-radius: 8px; /* card radius (Card/Resource, Blog Card) */ --ssh-radius-sm: 4px; /* tags / small controls (Button/Outline, Tag) */ --ssh-radius-pill: 50px; --ssh-shadow-sm: 0 1px 4px rgba(25, 33, 61, 0.08); /* Neutral/Shadow 02 - resting card */ --ssh-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10); /* Shadow - dropdowns / hover lift */ --ssh-transition: 0.2s ease; } /* ---- Reset & Base ---- */ * { box-sizing: border-box; } /* Stop the browser's scroll-anchoring from moving the viewport when lazy images finish loading and shift layout — this (plus the JS re-pin) fixes the "page scrolls down then up" jank on element / footer link navigation. */ html { overflow-anchor: none; /* Full-bleed bands use width:100vw (ssh-band-cream/-neutral, ssh-technique-header). 100vw includes the vertical scrollbar, so clip the few px of horizontal overflow it creates — no horizontal scrollbar, full-bleed bands still reach the edges. 'clip' (not 'hidden') avoids creating a scroll container / breaking sticky. */ overflow-x: clip; } body { font-family: var(--ssh-font-family); color: var(--ssh-text); line-height: 1.6; font-size: var(--ssh-fs-body); margin: 0; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-anchor: none; } h1, h2, h3, h4, h5 { color: var(--ssh-heading); margin-top: 0; font-family: var(--ssh-font-family); } h1 { font-size: var(--ssh-fs-h1); font-weight: 800; line-height: var(--ssh-lh-h1); letter-spacing: -0.01em; } h2 { font-size: var(--ssh-fs-h2); font-weight: 800; line-height: var(--ssh-lh-h2); letter-spacing: -0.005em; } h3 { font-size: var(--ssh-fs-h3); font-weight: 700; line-height: var(--ssh-lh-h3); } h4 { font-size: var(--ssh-fs-h4); font-weight: 700; line-height: var(--ssh-lh-h4); } h5 { font-size: var(--ssh-fs-h5); font-weight: 600; line-height: var(--ssh-lh-h5); } /* Issue #51: button labels 16px bold (700) sitewide */ .btn, .ssh-btn-dark, .ssh-btn-outline, .ssh-btn-accent, .ssh-cta__button--primary, .ssh-cta__button--secondary, .ssh-cta__button--accent, .ssh-contact-band__cta { font-weight: 700; font-size: 1rem; } .lead { font-size: var(--ssh-fs-body-lg); color: var(--ssh-text-light); line-height: var(--ssh-lh-body-lg); } a { color: var(--ssh-link); text-decoration: none; transition: color var(--ssh-transition); } a:hover { color: var(--ssh-primary-dark); } /* ---- Header / Navigation ---- */ .ssh-header { background: #fff; border-bottom: 1px solid var(--ssh-border); position: relative; z-index: 1030; } .ssh-nav { background-color: #fff; padding: 0; } .ssh-nav__brand { color: var(--ssh-heading) !important; font-weight: 700; font-size: 1.2rem; padding: 0.85rem 0; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; } .ssh-nav__brand:hover { opacity: 0.85; } .ssh-nav__logo { display: block; height: 100px; /* issue #43: logo was 46px, too small — bump to 100px */ width: auto; } /* Design match: the Figma lays content in an 1160px column (within a 1440 canvas). Bootstrap's .container is 1320px on wide screens, making the whole site (footer included) ~160px wider than the design. Cap the contained width at 1160px on desktop so footer + all page content line up with the design. Full-width bands (.container-fluid, hero/CTA) are unaffected. */ @media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1160px; } /* The nav is a full-width bar in the design (only the content column is 1160). The 100px logo (#43) + 7-item menu + search need ~1300px, so keep the nav container wider than the 1160 content cap — otherwise flex shrinks the logo to a sliver. */ .ssh-nav .container { max-width: 1320px; } } /* Never let the logo shrink, regardless of available nav width. */ .ssh-nav__brand { flex-shrink: 0; } .ssh-nav .navbar-nav { gap: 0; align-items: center; } .ssh-nav__link { color: #222222 !important; /* issue #42: 16px / #222222 */ font-weight: 500; font-size: 1rem; padding: 0.85rem 0.9rem !important; transition: color var(--ssh-transition); text-decoration: none; } .ssh-nav__link:hover, .ssh-nav__link:focus { color: var(--ssh-primary) !important; } /* Issue #41: top-level item navigates to its parent page (real href, no data-bs-toggle); the submenu opens on hover on desktop. */ @media (min-width: 992px) { .ssh-nav .nav-item.dropdown:hover > .ssh-nav__dropdown { display: block; margin-top: 0; } } .ssh-nav__link--active, .ssh-nav__link.active { color: var(--ssh-primary) !important; font-weight: 600; } /* Search pill button in nav */ .ssh-nav__link--search { display: inline-flex; align-items: center; gap: 0.4rem; background-color: transparent; /* Style Guide Button/Outline */ color: var(--ssh-primary) !important; border: 2px solid var(--ssh-primary); border-radius: var(--ssh-radius-pill); padding: 0.45rem 1.15rem !important; margin-left: 0.5rem; font-size: 0.875rem; font-weight: 600; transition: background-color var(--ssh-transition), color var(--ssh-transition); } .ssh-nav__link--search:hover, .ssh-nav__link--search:focus { background-color: var(--ssh-primary); /* fill orange on hover */ color: #fff !important; } .ssh-nav__link--search[aria-expanded="true"] { background-color: var(--ssh-primary); color: #fff !important; } /* ---- Inline header search panel (opens from the nav search icon) ---- */ .ssh-search-panel { background: #fff; border-top: 1px solid var(--ssh-border); border-bottom: 1px solid var(--ssh-border); box-shadow: var(--ssh-shadow-md); animation: ssh-search-drop 0.18s ease; } .ssh-search-panel[hidden] { display: none; } @keyframes ssh-search-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .ssh-search-panel__form { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0; } .ssh-search-panel__icon { color: var(--ssh-text-light); flex-shrink: 0; } .ssh-search-panel__input { flex: 1 1 auto; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); padding: 0.7rem 1rem; font-size: var(--ssh-fs-body); font-family: var(--ssh-font-family); color: var(--ssh-text); background: var(--ssh-light-bg); transition: border-color var(--ssh-transition), background var(--ssh-transition); } .ssh-search-panel__input::placeholder { color: var(--ssh-text-light); } .ssh-search-panel__input:focus { outline: none; border-color: var(--ssh-focus); background: #fff; } .ssh-search-panel__submit { flex-shrink: 0; background: var(--ssh-primary); color: #fff; border: 0; border-radius: var(--ssh-radius-pill); padding: 0.65rem 1.6rem; font-weight: 600; font-size: var(--ssh-fs-body-sm); cursor: pointer; transition: background var(--ssh-transition); } .ssh-search-panel__submit:hover { background: var(--ssh-primary-dark); } .ssh-search-panel__close { flex-shrink: 0; background: transparent; border: 0; color: var(--ssh-text-light); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 0.35rem; transition: color var(--ssh-transition); } .ssh-search-panel__close:hover { color: var(--ssh-primary); } .ssh-nav__dropdown { border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); box-shadow: var(--ssh-shadow-md); min-width: 220px; padding: 0.5rem 0; } .ssh-nav__dropdown .dropdown-item { padding: 0.5rem 1.25rem; font-size: 0.9rem; color: var(--ssh-text); transition: background-color var(--ssh-transition); } .ssh-nav__dropdown .dropdown-item:hover, .ssh-nav__dropdown .dropdown-item:focus { background-color: var(--ssh-light-bg); color: var(--ssh-heading); } /* Issue #42: megamenu — the larger submenus (Safe System, People, Crash Type, Resources, Tools & Techniques) render as a wide multi-column panel instead of a long single-column list. Items flow into two columns; section headers and dividers span the full width. */ .ssh-nav__dropdown--mega { /* NOTE: no `display` here — it must stay `none` (Bootstrap default) until opened, otherwise the panel shows permanently. The grid `display` is applied only in the open state (hover / .show) below, where it also overrides the base hover's block. */ grid-template-columns: 1fr 1fr; column-gap: 0.75rem; min-width: 460px; padding: 0.85rem 0.75rem; } @media (min-width: 992px) { .ssh-nav .nav-item.dropdown:hover > .ssh-nav__dropdown--mega { display: grid; } } .ssh-nav__dropdown--mega.show { display: grid; } .ssh-nav__dropdown--mega > li:has(.dropdown-header), .ssh-nav__dropdown--mega > li:has(hr.dropdown-divider) { grid-column: 1 / -1; } .ssh-nav__dropdown--mega .dropdown-header { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ssh-text-light); padding: 0.35rem 1rem 0.15rem; margin: 0; } .ssh-nav__dropdown--mega .dropdown-item { border-radius: var(--ssh-radius-sm, 4px); padding: 0.5rem 1rem; } /* Right-align the rightmost megamenus so the wide panel doesn't overflow the viewport. */ .ssh-nav__dropdown--end { left: auto; right: 0; } .navbar-toggler { border-color: var(--ssh-border); padding: 0.4rem 0.65rem; } .navbar-toggler-icon { filter: none; } /* ---- Hero Banner ---- */ .ssh-hero { position: relative; background-color: var(--ssh-hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: flex-start; /* All hero headings left-align with the logo / breadcrumb so detail and landing pages share the same vertical edge. */ text-align: left; color: var(--ssh-heading); padding: 0; min-height: auto; } /* Split hero layout - text on the left, image on the right. Applied to detail, topic and Guide-to-Road-Safety pages per client feedback v1.1. - Background image suppressed (handled by inline instead). - Content laid out as a 2-column grid inside .ssh-hero__content. - Text aligned left rather than centered. */ .ssh-hero.ssh-hero--split { background-image: none !important; text-align: left; } .ssh-hero.ssh-hero--split .ssh-hero__content { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2.5rem; max-width: 1140px; padding: 3.5rem 1rem; } .ssh-hero.ssh-hero--split .ssh-hero__text { min-width: 0; } .ssh-hero.ssh-hero--split .ssh-hero__heading, .ssh-hero.ssh-hero--split .ssh-hero__subheading { text-align: left; margin-left: 0; margin-right: 0; max-width: none; } .ssh-hero.ssh-hero--split .ssh-hero__image { min-width: 0; } .ssh-hero.ssh-hero--split .ssh-hero__image img { width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: 12px; display: block; } @media (max-width: 768px) { .ssh-hero.ssh-hero--split .ssh-hero__content { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1rem; } .ssh-hero.ssh-hero--split .ssh-hero__image img { max-height: 240px; } } /* Home-page hero - sits over a photo background (road cones) so the dark body text colour wouldn't be legible. White heading + subheading + dark text-shadow gives enough contrast on any photo. Scoped to .ssh-home__hero so other heroes keep their dark-on-light treatment. */ .ssh-home__hero .ssh-hero__heading, .ssh-home__hero .ssh-hero__subheading { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65); } .ssh-home__hero .ssh-hero__adv-link { color: var(--ssh-primary) !important; /* orange 'use advanced search' link */ text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65); text-decoration: underline; /* #52: underline 'use advanced search' */ } /* Issue #52: home hero - H1 64px/900, subtext 20px/600 */ .ssh-home__hero .ssh-hero__heading { font-size: 4rem; /* 64px */ font-weight: 900; line-height: 1.08; } .ssh-home__hero .ssh-hero__subheading { font-size: 1.25rem; /* 20px */ font-weight: 600; } /* Issue #52: the hero image fills the full width (the .ssh-hero block is already 100% wide with background-size:cover) and stands tall enough to cover the area above the fold. The min-height goes on the inner .ssh-hero — the element that actually carries the background-image — so the photo fills the whole band with no white gap (an earlier attempt put it on the .ssh-home__hero wrapper, which has no background, leaving the gap). */ .ssh-home__hero .ssh-hero { min-height: 80vh; } @media (max-width: 768px) { .ssh-home__hero .ssh-hero { min-height: 60vh; } } /* The home hero must span the full viewport width (100%). SingleColumnSection wraps it in .container-fluid > .row > .col-12, whose Bootstrap gutters inset the band ~12px on each side; zero them together (padding AND the row's negative margin, so nothing overflows) so the background photo reaches both edges. The inner .ssh-hero__content keeps its own .container, so the heading/search stay aligned with the nav. */ .ssh-home__hero .container-fluid, .ssh-home__hero .container-fluid > .row, .ssh-home__hero .container-fluid > .row > .col-12 { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } /* Dark gradient scrim so the white hero copy stays legible over any editor-supplied photo (HeroBanner showOverlay intent). Content is lifted above it with z-index. */ .ssh-home__hero .ssh-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.48) 100%); pointer-events: none; } .ssh-home__hero .ssh-hero__content { position: relative; z-index: 1; } /* Canonical interior-page hero - solid brand-orange band with white heading, breadcrumb-aligned via the .container class on the content. Same treatment the /charting-a-path-to-zero/path-to-zero-framework page uses, applied to every wrapper (landing / detail / resources / tools / contact / resource-detail) so every interior page agrees on height, alignment and color. */ .ssh-hero.ssh-hero--title-only, .ssh-landing__hero .ssh-hero.ssh-hero--title-only, .ssh-detail__hero .ssh-hero.ssh-hero--title-only, .ssh-resources__header .ssh-hero.ssh-hero--title-only, .ssh-resource-detail__header .ssh-hero.ssh-hero--title-only, .ssh-contact__header .ssh-hero.ssh-hero--title-only, .ssh-tools__header .ssh-hero.ssh-hero--title-only { background-color: var(--ssh-primary) !important; background-image: none !important; color: #FFFFFF !important; text-align: left !important; justify-content: flex-start !important; /* Design "Page" band = 240px tall INCLUDING the breadcrumb band (~42px) that sits above it, so the title hero itself is ~198px with the heading vertically centred. */ min-height: 198px !important; align-items: center !important; padding: 0 !important; display: flex; } .ssh-hero.ssh-hero--title-only .ssh-hero__heading, .ssh-landing__hero .ssh-hero.ssh-hero--title-only .ssh-hero__heading, .ssh-detail__hero .ssh-hero.ssh-hero--title-only .ssh-hero__heading, .ssh-resources__header .ssh-hero.ssh-hero--title-only .ssh-hero__heading, .ssh-resource-detail__header .ssh-hero.ssh-hero--title-only .ssh-hero__heading, .ssh-contact__header .ssh-hero.ssh-hero--title-only .ssh-hero__heading, .ssh-tools__header .ssh-hero.ssh-hero--title-only .ssh-hero__heading { color: #FFFFFF !important; margin: 0; } .ssh-hero.ssh-hero--title-only .ssh-hero__subheading { color: rgba(255, 255, 255, 0.92) !important; margin: 0.25rem 0 0 0; } /* Symmetric padding so the heading sits vertically centred within the 198px band. */ .ssh-hero.ssh-hero--title-only .ssh-hero__content, .ssh-hero.ssh-hero--title-only .ssh-hero__content.container { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } /* #59: orange-header title = H1 48px ExtraBold (800) white */ .ssh-hero.ssh-hero--title-only .ssh-hero__heading { font-size: var(--ssh-fs-h1); font-weight: 800; } /* Make the title-only hero band span 100% of the viewport (edge-to-edge), even when its template wraps it in a Bootstrap container-fluid > row > col-12. The inner .ssh-hero__content.container still respects its max-width so the heading itself stays aligned with the breadcrumb and logo. */ .ssh-landing__hero > section > .container-fluid, .ssh-detail__hero > section > .container-fluid, .ssh-resources__header > section > .container-fluid, .ssh-resource-detail__header > section > .container-fluid, .ssh-contact__header > section > .container-fluid, .ssh-tools__header > section > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; } .ssh-landing__hero > section > .container-fluid > .row, .ssh-detail__hero > section > .container-fluid > .row, .ssh-resources__header > section > .container-fluid > .row, .ssh-resource-detail__header > section > .container-fluid > .row, .ssh-contact__header > section > .container-fluid > .row, .ssh-tools__header > section > .container-fluid > .row { margin-left: 0 !important; margin-right: 0 !important; } .ssh-landing__hero > section > .container-fluid > .row > [class*="col-"], .ssh-detail__hero > section > .container-fluid > .row > [class*="col-"], .ssh-resources__header > section > .container-fluid > .row > [class*="col-"], .ssh-resource-detail__header > section > .container-fluid > .row > [class*="col-"], .ssh-contact__header > section > .container-fluid > .row > [class*="col-"], .ssh-tools__header > section > .container-fluid > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } .ssh-hero__overlay { display: none; /* No dark overlay in wireframe */ } .ssh-hero__content { position: relative; z-index: 1; /* Width + horizontal padding come from the .container class on the same div, so the heading edge aligns with the nav logo / breadcrumb above. The previous max-width: 720px override made the hero narrower than the rest of the page content. */ padding-top: 4rem; padding-bottom: 3rem; } .ssh-hero__heading { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; color: var(--ssh-heading); line-height: 1.1; letter-spacing: -0.5px; } .ssh-hero__subheading { font-size: 1.15rem; font-weight: 400; margin-bottom: 2rem; color: var(--ssh-text); opacity: 1; line-height: 1.65; max-width: 600px; /* Left-aligned with the heading; was centered with auto margins. */ margin-left: 0; margin-right: 0; } /* Hero search bar - left-aligned with the heading rather than centered. */ .ssh-hero__search { display: flex; max-width: 520px; margin: 0 0 1rem; } .ssh-hero__search input { flex: 1; border: 1px solid var(--ssh-border); border-right: none; border-radius: var(--ssh-radius) 0 0 var(--ssh-radius); padding: 0.85rem 1.25rem; font-size: 1rem; outline: none; background: #fff; } .ssh-hero__search input:focus { border-color: var(--ssh-focus); } .ssh-hero__search button { background-color: var(--ssh-primary); color: #fff; border: none; border-radius: 0 var(--ssh-radius) var(--ssh-radius) 0; padding: 0.85rem 1.5rem; font-size: 1rem; /* #52: search label 16px bold */ font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; transition: background-color var(--ssh-transition); } .ssh-hero__search button:hover { background-color: var(--ssh-primary-dark); } .ssh-hero__adv-link { display: inline-block; font-size: 0.9rem; color: var(--ssh-text-light); margin-top: 0.5rem; } .ssh-hero__adv-link:hover { color: var(--ssh-charcoal); } /* Hero CTA button (fallback, wireframe uses search bar instead) */ .ssh-hero__cta { background-color: var(--ssh-primary); border-color: var(--ssh-primary); color: #fff; padding: 0.75rem 2rem; font-weight: 700; /* #51: button labels 700 */ font-size: 1rem; border-radius: var(--ssh-radius-pill); transition: all var(--ssh-transition); text-decoration: none; display: inline-block; } .ssh-hero__cta:hover { background-color: var(--ssh-primary-dark); border-color: var(--ssh-primary-dark); color: #fff; } /* ---- Sections ---- */ .ssh-section { width: 100%; } .ssh-section--full-width { padding: 3rem 0; } /* ---- Section Headings ---- */ .ssh-section-heading { text-align: center; margin-bottom: 2.5rem; } .ssh-section-heading__title { color: var(--ssh-heading); font-size: var(--ssh-fs-h2); /* #51/#53/#54: H2 = 36px / 800 */ font-weight: 800; margin-bottom: 0.6rem; } .ssh-section-heading__subtitle { color: var(--ssh-text-light); font-size: 1.125rem; /* #54: intro = big body text, 18px */ /* Widen so the Featured Guidance / Discover Road Safety Guidance subtitles fit on a single line at desktop widths (per Figma). 600px was wrapping the "A selection of the latest and most relevant resources..." copy. */ max-width: 900px; margin: 0 auto; line-height: 1.6; } /* Default style for the SectionHeading widget's optional "View All →" link. Specific overrides in .ssh-home__featured / __problems / __resources style it as a white outline button inside the orange cards; this rule is the fallback for any other context (e.g. the standalone Featured Guidance section on the Home page). */ .ssh-section-heading__btn { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem; padding: 0.55rem 1.2rem; border: 2px solid var(--ssh-primary); /* Issue #61: reverse the effect — orange fill by default, orange outline on hover. (Also #51: button labels 16px / 700.) */ color: #fff; background: var(--ssh-primary); border-radius: 8px; font-size: 1rem; font-weight: 700; text-decoration: none; transition: all var(--ssh-transition); } .ssh-section-heading__btn:hover { background: transparent; color: var(--ssh-primary); } /* Issue #61: the "Related Austroads Guides" heading is the only SectionHeading with a button — lay its top part out as text-left / button-right (rather than centered + stacked). Scoped via :has() so other (button-less) section headings stay centered. */ .ssh-section-heading:has(> .ssh-section-heading__btn) { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 2rem; text-align: left; } .ssh-section-heading:has(> .ssh-section-heading__btn) .ssh-section-heading__title { grid-column: 1; margin: 0 0 0.4rem; } .ssh-section-heading:has(> .ssh-section-heading__btn) .ssh-section-heading__subtitle { grid-column: 1; margin: 0; max-width: 760px; } .ssh-section-heading:has(> .ssh-section-heading__btn) .ssh-section-heading__btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; white-space: nowrap; } @media (max-width: 576px) { .ssh-section-heading:has(> .ssh-section-heading__btn) { grid-template-columns: 1fr; /* stack on mobile */ } .ssh-section-heading:has(> .ssh-section-heading__btn) .ssh-section-heading__btn { grid-column: 1; grid-row: auto; margin-top: 1rem; justify-self: start; } } .ssh-section-heading__divider { display: none; /* Wireframe doesn't have colored dividers */ } /* ---- Cards (generic bordered card) ---- */ .ssh-card { border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); transition: transform var(--ssh-transition), box-shadow var(--ssh-transition); overflow: hidden; background: #fff; } .ssh-card:hover { transform: translateY(-3px); box-shadow: var(--ssh-shadow-md); } .ssh-card__title { color: var(--ssh-heading); font-size: 1.1rem; font-weight: 600; } /* ---- Pillar / Entry Point Cards (Figma "Explore Cards" / "Pillars Cards") ---- Spec from AUR-SST Figma: - white bg, 16px corner radius, 24px padding - dark-navy SQUARE icon container at top (not circular) - title + optional description below */ .ssh-pillar-card { background: #fff; border: 1px solid transparent; border-radius: 16px; padding: 1.5rem; transition: all var(--ssh-transition); height: 100%; display: flex; flex-direction: column; gap: 0.75rem; text-decoration: none; color: inherit; } .ssh-pillar-card:hover { transform: translateY(-3px); box-shadow: var(--ssh-shadow-md); color: inherit; text-decoration: none; } .ssh-pillar-card__icon { width: 44px; height: 44px; border-radius: 10px; background-color: var(--ssh-primary) !important; /* #CD4E27 rust orange */ color: #ffffff !important; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 0.25rem; flex-shrink: 0; border: 0; line-height: 1; } /* Bootstrap-Icons glyph inside the icon box - force white fill regardless of cascading text-color. The .bi font picks up `color`, but some pages set body or parent color to dark, so we override explicitly. */ .ssh-pillar-card__icon .bi, .ssh-pillar-card__icon i { color: #ffffff !important; } .ssh-pillar-card__title { font-size: 1.1rem; font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-pillar-card__description { font-size: 0.9rem; color: var(--ssh-text-light); flex: 1; margin-bottom: 1rem; line-height: 1.6; } .ssh-pillar-card__link { font-size: 0.875rem; font-weight: 600; color: var(--ssh-charcoal); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; } .ssh-pillar-card:hover .ssh-pillar-card__link { gap: 0.5rem; color: var(--ssh-primary); } /* Compact card variant - hides description text for the dense Figma home grid where cards are 244x220 with title only. Apply by adding .ssh-pillar-card--compact or via a parent wrapper such as .ssh-feature-section__cards. */ .ssh-feature-section__cards .ssh-pillar-card__description, .ssh-feature-section__cards .ssh-pillar-card__link, .ssh-pillar-card--compact .ssh-pillar-card__description, .ssh-pillar-card--compact .ssh-pillar-card__link { display: none; } .ssh-feature-section__cards .ssh-pillar-card__title, .ssh-pillar-card--compact .ssh-pillar-card__title { font-size: 1rem; font-weight: 700; margin-bottom: 0; } /* ---- Figma Home Feature Section ---- Two-tone rounded row: 300px orange panel (heading/desc/CTA) + 860px peach panel (compact white cards grid). Alternating sides per section. */ .ssh-feature-section { border-radius: 16px; overflow: hidden; display: flex; flex-wrap: wrap; margin-bottom: 1.5rem; } .ssh-feature-panel { background: var(--ssh-primary); /* rust orange */ color: #fff; padding: 2.5rem; flex: 0 0 26%; min-width: 260px; display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; } .ssh-feature-panel__title { color: #fff; font-size: 1.6rem; font-weight: 800; line-height: 1.2; margin: 0; } .ssh-feature-panel__desc { color: rgba(255, 255, 255, 0.92); font-size: 0.9375rem; line-height: 1.55; margin: 0; } .ssh-feature-panel__btn { align-self: flex-start; background: var(--ssh-charcoal); color: #fff; border: 0; border-radius: 8px; padding: 0.65rem 1.2rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background var(--ssh-transition); display: inline-flex; align-items: center; gap: 0.4rem; } .ssh-feature-panel__btn:hover { background: #1F1E1C; color: #fff; } .ssh-feature-section__cards { background: var(--ssh-hero-bg); /* peach #F5F1E8 */ padding: 2.5rem; flex: 1 1 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } /* When the peach side sits to the LEFT of the orange panel, reverse with order */ .ssh-feature-section--reverse { flex-direction: row-reverse; } /* Mobile / small screens - stack panel above cards, switch cards to single-col */ @media (max-width: 991px) { .ssh-feature-section__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ssh-feature-panel { flex: 0 0 100%; } } @media (max-width: 575px) { .ssh-feature-section__cards { grid-template-columns: 1fr; padding: 1.5rem; } .ssh-feature-panel { padding: 1.75rem; } } /* ---- Icon Card Grid ---- */ .ssh-icon-card { padding: 1.75rem 1.25rem; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); background: #fff; transition: all var(--ssh-transition); text-align: center; cursor: pointer; } .ssh-icon-card:hover { transform: translateY(-3px); box-shadow: var(--ssh-shadow-md); } .ssh-icon-card--circle .ssh-icon-card__icon, .ssh-icon-card--square .ssh-icon-card__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--ssh-light-bg); color: var(--ssh-charcoal); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; border: 1px solid var(--ssh-border); } .ssh-icon-card__title { font-size: 0.95rem; font-weight: 600; color: var(--ssh-heading); } /* ---- Two Column Feature (Applying Safe System) ---- */ .ssh-feature-two-col { display: flex; align-items: center; gap: 3rem; } .ssh-feature-two-col__text { flex: 1; } .ssh-feature-two-col__image { flex: 1; background: var(--ssh-hero-bg); border-radius: var(--ssh-radius); min-height: 300px; display: flex; align-items: center; justify-content: center; color: var(--ssh-text-light); font-size: 0.9rem; } .ssh-feature-two-col h2 { margin-bottom: 1rem; } .ssh-feature-two-col p { color: var(--ssh-text); line-height: 1.7; } .ssh-check-list { list-style: none; padding: 0; margin: 1.25rem 0; } .ssh-check-list li { padding: 0.4rem 0; padding-left: 1.75rem; position: relative; line-height: 1.6; } .ssh-check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--ssh-primary); /* orange check, not charcoal (per design) */ font-weight: 700; } /* ---- Dark button (pill) - Style Guide Button/dark = #302F2D ---- */ .ssh-btn-dark { /* Design audit: every button in the Design.fig page layouts is the "Primary Button" (orange #CD4E27) — the Dark variant only appears in the style-guide swatch, never in a page. So promo/CTA "Learn More" buttons render orange (Primary), not dark. */ background-color: var(--ssh-primary); border: 2px solid var(--ssh-primary); color: #fff; font-weight: 700; /* #53: button label 16px / 700 */ padding: 0.6rem 1.75rem; border-radius: var(--ssh-radius-pill); transition: all var(--ssh-transition); display: inline-block; text-decoration: none; font-size: 1rem; } .ssh-btn-dark:hover { background-color: var(--ssh-primary-dark); border-color: var(--ssh-primary-dark); color: #fff; } /* Outline dark button */ .ssh-btn-outline { background: transparent; border: 2px solid #fff; color: #fff; font-weight: 600; padding: 0.6rem 1.75rem; border-radius: var(--ssh-radius-pill); transition: all var(--ssh-transition); display: inline-block; text-decoration: none; font-size: 0.95rem; } .ssh-btn-outline:hover { background: #fff; color: var(--ssh-dark-btn); } /* Small accent button */ .ssh-btn-accent { background-color: var(--ssh-primary); border-color: var(--ssh-primary); color: #fff; font-weight: 600; padding: 0.5rem 1.25rem; border-radius: var(--ssh-radius-pill); transition: all var(--ssh-transition); font-size: 0.875rem; } .ssh-btn-accent:hover { background-color: var(--ssh-primary-dark); border-color: var(--ssh-primary-dark); color: #fff; } /* Bootstrap btn-primary → Style Guide Primary Button (#CD4E27 rust orange). */ .btn-primary, .btn.btn-primary { background-color: var(--ssh-primary); border-color: var(--ssh-primary); color: #fff; font-weight: 700; /* #51: button labels 700 */ } .btn-primary:hover, .btn-primary:focus, .btn.btn-primary:hover, .btn.btn-primary:focus { background-color: var(--ssh-primary-dark); border-color: var(--ssh-primary-dark); color: #fff; } .btn-primary:focus, .btn-primary:focus-visible { box-shadow: 0 0 0 0.25rem rgba(205, 78, 39, 0.35); } .btn-primary:disabled, .btn-primary.disabled { background-color: var(--ssh-primary); border-color: var(--ssh-primary); opacity: 0.55; } /* Design audit: page buttons are all the "Primary Button" (orange) in Design.fig — the Dark variant is style-guide-only. Render btn-dark usages (cross-link "View More" cards etc.) as Primary orange to match. */ .btn-dark, .btn.btn-dark { background-color: var(--ssh-primary); border-color: var(--ssh-primary); color: #fff; font-weight: 700; /* #51: button labels 700 */ } .btn-dark:hover, .btn-dark:focus, .btn.btn-dark:hover, .btn.btn-dark:focus { background-color: var(--ssh-primary-dark); border-color: var(--ssh-primary-dark); color: #fff; } .btn-dark:focus, .btn-dark:focus-visible { box-shadow: 0 0 0 0.25rem rgba(48, 47, 45, 0.30); } .btn-dark:disabled, .btn-dark.disabled { background-color: var(--ssh-dark-btn); border-color: var(--ssh-dark-btn); opacity: 0.55; } /* ---- Call to Action Banner ---- */ .ssh-cta { display: flex; align-items: center; justify-content: space-between; padding: 2.5rem 3rem; border-radius: 0; flex-wrap: wrap; gap: 1.5rem; } .ssh-cta--primary { background-color: var(--ssh-cta-bg); color: #fff; } .ssh-cta--secondary { background-color: var(--ssh-light-bg); color: var(--ssh-text); border: 1px solid var(--ssh-border); } .ssh-cta--accent { background-color: var(--ssh-cta-bg); color: #fff; } .ssh-cta__heading { font-size: 1.45rem; margin-bottom: 0.25rem; font-weight: 600; color: inherit; } .ssh-cta__description { opacity: 0.85; font-size: 0.95rem; } .ssh-cta__button--primary, .ssh-cta__button--accent { background: transparent; /* design: white outline button on orange band */ border: 2px solid #fff; color: #fff; padding: 0.6rem 1.75rem; font-weight: 600; border-radius: var(--ssh-radius-pill); transition: all var(--ssh-transition); text-decoration: none; display: inline-block; font-size: 0.95rem; white-space: nowrap; } .ssh-cta__button--primary:hover, .ssh-cta__button--accent:hover { background: #fff; /* invert on hover: white fill, orange text */ border-color: #fff; color: var(--ssh-primary); } .ssh-cta__button--secondary { background-color: var(--ssh-primary); border: 2px solid var(--ssh-primary); color: #fff; padding: 0.6rem 1.75rem; font-weight: 600; border-radius: var(--ssh-radius-pill); transition: all var(--ssh-transition); } .ssh-cta__button--secondary:hover { background-color: var(--ssh-primary-dark); border-color: var(--ssh-primary-dark); color: #fff; } /* ---- Statistics ---- */ .ssh-stats { padding: 2.5rem 2rem; border-radius: var(--ssh-radius); } .ssh-stats--dark { background-color: var(--ssh-cta-bg); color: #fff; } .ssh-stats--primary { background-color: var(--ssh-heading); color: #fff; } .ssh-stats--light { background-color: var(--ssh-light-bg); } .ssh-stats__value { display: block; font-size: 2.5rem; font-weight: 700; color: var(--ssh-heading); } .ssh-stats--dark .ssh-stats__value, .ssh-stats--primary .ssh-stats__value { color: #fff; } .ssh-stats__label { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 0.5rem; font-weight: 500; color: var(--ssh-text-light); } /* ---- Resource Cards ---- */ .ssh-resource-card { border-radius: var(--ssh-radius); overflow: hidden; transition: transform var(--ssh-transition), box-shadow var(--ssh-transition); border: 1px solid var(--ssh-border); background: #fff; } .ssh-resource-card:hover { transform: translateY(-3px); box-shadow: var(--ssh-shadow-md); } .ssh-resource-card .card-img-top, .ssh-resource-card__image { height: 180px; object-fit: cover; background: var(--ssh-img-bg); /* #E8E7E5 - resource card image/header band */ } .ssh-resource-card__badge { display: inline-block; background: var(--ssh-charcoal); /* Tag/Tool - Neutrals/Dark #302F2D, white text */ color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: var(--ssh-radius-pill); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; } .ssh-resource-card__meta { font-size: 0.8rem; color: var(--ssh-text-light); margin-bottom: 0.5rem; } .ssh-resource-card__title { font-size: 1.05rem; font-weight: 600; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-resource-card__link { font-size: 0.875rem; font-weight: 600; color: var(--ssh-link); /* Text/Action #CD4E27 */ text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; } .ssh-resource-card__link:hover { color: var(--ssh-primary-dark); gap: 0.5rem; } /* ---- Tool Card ---- */ .ssh-tool-card--compact .card { max-width: 300px; } .ssh-tool-card__icon { font-size: 2.5rem; color: var(--ssh-heading); } /* ---- Content Block ---- */ .ssh-content-block { line-height: 1.75; } .ssh-content-block h2 { color: var(--ssh-heading); margin-top: 2rem; margin-bottom: 0.75rem; } .ssh-content-block h3 { color: var(--ssh-heading); margin-top: 1.5rem; margin-bottom: 0.6rem; } .ssh-content-block h4 { color: var(--ssh-heading); margin-top: 1.25rem; margin-bottom: 0.5rem; } .ssh-content-block p { margin-bottom: 1rem; } .ssh-content-block ul, .ssh-content-block ol { margin-bottom: 1.25rem; padding-left: 1.5rem; } .ssh-content-block li { margin-bottom: 0.4rem; line-height: 1.7; } .ssh-content-block strong { color: var(--ssh-heading); } .ssh-content-block blockquote { border-left: 3px solid var(--ssh-charcoal); padding: 1rem 1.25rem; margin: 1.25rem 0; background: var(--ssh-light-bg); border-radius: 0 var(--ssh-radius) var(--ssh-radius) 0; font-style: italic; color: var(--ssh-text-light); } /* ---- News / Update Cards ---- */ .ssh-news-card { border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); background: #fff; transition: all var(--ssh-transition); overflow: hidden; } .ssh-news-card:hover { box-shadow: var(--ssh-shadow-md); transform: translateY(-3px); } .ssh-news-card .card-body { padding: 1.5rem; } .ssh-news-card__date { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ssh-text-light); font-weight: 600; margin-bottom: 0.5rem; } .ssh-news-card__title { font-size: 1.05rem; font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.6rem; } /* ---- Sidebar Card ---- */ .ssh-sidebar-card { border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); background: #fff; overflow: hidden; } .ssh-sidebar-card__header { background: var(--ssh-light-bg); /* Neutrals/Neutral #F5F4F2 - card header surface */ color: var(--ssh-heading); border-bottom: 1px solid var(--ssh-border); padding: 0.85rem 1.15rem; font-weight: 600; font-size: 0.95rem; } .ssh-sidebar-card__body { padding: 1.15rem; } .ssh-sidebar-card__body ul { list-style: none; padding: 0; margin: 0; } .ssh-sidebar-card__body li { padding: 0.45rem 0; border-bottom: 1px solid var(--ssh-light-bg); } .ssh-sidebar-card__body li:last-child { border-bottom: none; } .ssh-sidebar-card__body a { color: var(--ssh-charcoal); text-decoration: none; font-weight: 500; font-size: 0.9rem; display: flex; align-items: center; gap: 0.3rem; } .ssh-sidebar-card__body a:hover { color: var(--ssh-primary); } /* ---- Contact Info Cards ---- */ .ssh-contact-card { border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); padding: 1.5rem; background: #fff; transition: box-shadow var(--ssh-transition); } .ssh-contact-card:hover { box-shadow: var(--ssh-shadow-sm); } .ssh-contact-card__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--ssh-light-bg); color: var(--ssh-charcoal); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 0.85rem; border: 1px solid var(--ssh-border); } .ssh-contact-card h4 { color: var(--ssh-heading); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; } /* ---- Video ---- */ .ssh-video__wrapper { border-radius: var(--ssh-radius); overflow: hidden; box-shadow: var(--ssh-shadow-sm); } /* ---- Search ---- */ .ssh-search-bar__input { border-radius: var(--ssh-radius) 0 0 var(--ssh-radius); padding: 0.85rem 1.25rem; font-size: 1rem; border: 1px solid var(--ssh-border); transition: border-color var(--ssh-transition); } .ssh-search-bar__input:focus { border-color: var(--ssh-focus); box-shadow: none; } .ssh-search-result { padding: 1.25rem 0; border-bottom: 1px solid var(--ssh-border); } .ssh-search-result h2 a { color: var(--ssh-heading); text-decoration: none; font-size: 1.2rem; } .ssh-search-result h2 a:hover { text-decoration: underline; } /* ---- Breadcrumb ---- */ .ssh-breadcrumb { padding: 0.75rem 0; background: transparent; } /* Self-contained breadcrumb bar emitted by the Breadcrumb view component. Wraps the breadcrumb + optional CTA mirror slots in a flex row aligned to the same .container as the nav above, so every page has identical breadcrumb alignment without per-template wrapper markup. */ .ssh-breadcrumb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ssh-breadcrumb-bar .ssh-breadcrumb { flex: 1 1 auto; min-width: 0; padding: 0; } /* Empty CTA slots collapse so the breadcrumb sits flush left on pages that don't have a topbar CTA. Per-template JavaScript appends a button at runtime which makes the slot non-empty and it becomes visible again. */ .ssh-breadcrumb-bar [data-ssh-detail-cta-mirror]:empty, .ssh-breadcrumb-bar [data-ssh-launch-mirror]:empty { display: none; } .ssh-breadcrumb .breadcrumb { margin-bottom: 0; padding: 0; background: transparent; font-size: 0.875rem; --bs-breadcrumb-divider: "→"; /* arrow, not the Bootstrap default "/" or a chevron */ } .ssh-breadcrumb .breadcrumb-item a { color: var(--ssh-text-light); text-decoration: none; } .ssh-breadcrumb .breadcrumb-item a:hover { color: var(--ssh-charcoal); } .ssh-breadcrumb .breadcrumb-item.active { color: var(--ssh-charcoal); } /* Issue #59: breadcrumb sits inside the orange page-header band (white text), flush above the title so the two read as one orange header. */ .ssh-breadcrumb-band { background: var(--ssh-primary); } .ssh-breadcrumb-band .ssh-breadcrumb-bar { padding-top: 1.6rem; padding-bottom: 0; } .ssh-breadcrumb-band .ssh-breadcrumb .breadcrumb { font-size: 1rem; } .ssh-breadcrumb-band .ssh-breadcrumb .breadcrumb-item, .ssh-breadcrumb-band .ssh-breadcrumb .breadcrumb-item a, .ssh-breadcrumb-band .ssh-breadcrumb .breadcrumb-item.active { color: #FFFFFF; } .ssh-breadcrumb-band .ssh-breadcrumb .breadcrumb-item a:hover { color: #FFFFFF; text-decoration: underline; } .ssh-breadcrumb-band .ssh-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.75); /* Design uses the lucide "move-right" icon between crumbs — a rightwards arrow (→), not a chevron. */ content: "→"; } /* ---- Footer ---- */ /* Footer - dark theme (Style Guide: Brand/Secondary navy #03293C bg, light text) */ .ssh-footer { margin-top: 0; background-color: var(--ssh-footer-bg) !important; /* #222222 dark */ color: var(--ssh-footer-text) !important; } .ssh-footer__top { padding: 5rem 0; /* design: 80px top / 80px bottom */ } /* design: 40px gap between footer columns (overrides Bootstrap g-4 = 24px) */ .ssh-footer__top .row { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2.5rem; } .ssh-footer__heading { color: #FFFFFF; font-weight: 700; margin-bottom: 1rem; font-size: 1.25rem; /* #57: footer column labels 20px */ text-transform: none; letter-spacing: 0; } .ssh-footer__links a { color: var(--ssh-footer-text); text-decoration: none; display: block; padding: 0.3rem 0; font-size: 0.9rem; transition: color var(--ssh-transition); } .ssh-footer__links a:hover { color: #FFFFFF; } .ssh-footer__description { color: var(--ssh-footer-text); font-size: 0.9rem; line-height: 1.65; margin-bottom: 1rem; opacity: 0.85; } .ssh-footer__brand { display: inline-block; margin-bottom: 0.9rem; text-decoration: none; } .ssh-footer__brand:hover { opacity: 0.85; } .ssh-footer__logo { height: 64px; width: auto; } .ssh-footer__divider { border-color: rgba(255, 255, 255, 0.1); margin: 0; } /* design: copyright sits on the same footer bg (no separate box), divided only by the white@10% line; text is muted white @ 50%. Layout (Figma): copyright left, Terms/Privacy right. */ .ssh-footer__bottom { padding: 1.5rem 0; background: transparent; } .ssh-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; } .ssh-footer__copyright, .ssh-footer__legal { color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; margin-bottom: 0; } .ssh-footer__copyright a, .ssh-footer__legal a { color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color var(--ssh-transition); } .ssh-footer__copyright a:hover, .ssh-footer__legal a:hover { color: #FFFFFF; } .ssh-footer__copyright-sep { color: rgba(255, 255, 255, 0.5); margin: 0 0.5rem; } @media (max-width: 575.98px) { .ssh-footer__bottom-inner { justify-content: center; text-align: center; } } /* ---- FAQ Accordion ---- */ .ssh-faq .accordion-button { font-weight: 600; color: var(--ssh-heading); padding: 1rem 1.15rem; } .ssh-faq .accordion-button:not(.collapsed) { background-color: var(--ssh-light-bg); color: var(--ssh-heading); box-shadow: none; } .ssh-faq .accordion-body { line-height: 1.75; } /* ---- Related Content ---- */ .ssh-related-content { padding: 3rem 0; } .ssh-related-content__heading { color: var(--ssh-heading); margin-bottom: 1.5rem; font-weight: 700; } /* ---- Pillar reference boxes (detail page sidebar) ---- */ .ssh-pillar-ref { border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); padding: 1.25rem; margin-bottom: 1rem; background: #fff; } .ssh-pillar-ref__title { font-weight: 600; color: var(--ssh-heading); font-size: 1rem; margin-bottom: 0.4rem; } .ssh-pillar-ref__desc { font-size: 0.875rem; color: var(--ssh-text-light); margin-bottom: 0; line-height: 1.55; } /* ---- Utility ---- */ .ssh-bg-light { background-color: var(--ssh-light-bg); } .ssh-bg-white { background-color: #fff; } /* ---- Responsive ---- */ @media (max-width: 991.98px) { .ssh-nav__link { padding: 0.55rem 0.75rem !important; } .ssh-nav__link--search { margin-left: 0; margin-top: 0.5rem; display: inline-flex; width: auto; } .ssh-nav__dropdown { box-shadow: none; border: none; background-color: var(--ssh-light-bg); } .ssh-feature-two-col { flex-direction: column; } .ssh-feature-two-col__image { min-height: 200px; width: 100%; } } @media (max-width: 768px) { h1, .ssh-hero__heading { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; } .ssh-hero__content { padding: 2.5rem 1rem 2rem; } .ssh-hero__heading { font-size: 2.25rem; } .ssh-hero__subheading { font-size: 1rem; } .ssh-cta { flex-direction: column; text-align: center; padding: 2rem 1.5rem; } .ssh-pillar-card { padding: 1.25rem; } .ssh-footer__top { padding: 2rem 0 1.25rem; } } @media (max-width: 576px) { .ssh-hero__heading { font-size: 1.75rem; } .ssh-hero__subheading { font-size: 0.95rem; } .ssh-hero__search { flex-direction: column; } .ssh-hero__search input { border-right: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); margin-bottom: 0.5rem; } .ssh-hero__search button { border-radius: var(--ssh-radius); justify-content: center; } } /* ---- Contact Band ("Can't find what you're looking for?" CTA) ---- Issue #56: the white "card" read like an error-message popup. Per the client mockup the band is now full-width with the heading + line directly on the road photo in white (no card), centred, above the orange CTA button. */ .ssh-contact-band { position: relative; margin-top: 3rem; /* bug/12.png: the contact band must run edge-to-edge. It's seeded inside a container-fluid > row > col-12 whose Bootstrap gutters inset it ~12px each side, so break it out to the full viewport width. The inner .container keeps the card centred; html{overflow-x:clip} prevents the 100vw scrollbar overflow. */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: linear-gradient(rgba(3, 41, 60, 0.52), rgba(3, 41, 60, 0.58)), url("/images/seeded/cta-bg.jpg") center/cover no-repeat; padding: 5rem 0; } .ssh-contact-band__overlay { width: 100%; } /* No card chrome — text sits directly on the image. */ .ssh-contact-band__card { background: transparent; box-shadow: none; border-radius: 0; padding: 0; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; /* heading on top, button on its own line */ align-items: center; /* centred */ text-align: center; gap: 1.75rem; } .ssh-contact-band__text { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; } .ssh-contact-band__heading, .ssh-contact-band__desc { font-size: clamp(2rem, 4vw, 2.75rem); /* large white CTA heading on the image */ font-weight: 800; color: #ffffff; line-height: 1.15; max-width: none; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); } .ssh-contact-band__cta { flex-shrink: 0; padding: 0.7rem 1.4rem; border-radius: 8px; font-weight: 600; text-decoration: none; } /* Pre-existing inner class kept for backward compat with other usages */ .ssh-contact-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } @media (max-width: 576px) { .ssh-contact-band__card { flex-direction: column; text-align: center; padding: 1.75rem; } .ssh-contact-band__inner { flex-direction: column; text-align: center; } } /* ---- Tab Interface ---- */ .ssh-tabs__nav { display: flex; border-bottom: 2px solid var(--ssh-border); gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ssh-tabs__tab { background: none; border: none; padding: 0.85rem 1.5rem; font-size: 1rem; font-weight: 400; color: var(--ssh-text-light); cursor: pointer; position: relative; white-space: nowrap; transition: color var(--ssh-transition); } .ssh-tabs__tab:hover, .ssh-tabs__tab:focus { color: var(--ssh-heading); outline: none; } .ssh-tabs__tab:focus-visible { outline: 2px solid var(--ssh-primary); outline-offset: -2px; } .ssh-tabs__tab--active { color: var(--ssh-heading); font-weight: 700; } .ssh-tabs__tab--active::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background-color: var(--ssh-primary); } .ssh-tabs__panel { padding: 1.5rem 0; line-height: 1.75; } .ssh-tabs__panel p { margin-bottom: 1.25rem; } .ssh-tabs__panel p:last-child { margin-bottom: 0; } .ssh-tabs__panel[hidden] { display: none; } /* ---- Pillar Card (with image) ---- */ .ssh-pillar-card__image { height: 180px; overflow: hidden; border-radius: var(--ssh-radius) var(--ssh-radius) 0 0; background: var(--ssh-img-bg); /* #E8E7E5 - card image/header band */ margin: -1.75rem -1.75rem 1.25rem -1.75rem; } .ssh-pillar-card__image img { width: 100%; height: 100%; object-fit: cover; } .ssh-pillar-card__placeholder { width: 100%; height: 100%; background: var(--ssh-hero-bg); display: flex; align-items: center; justify-content: center; } /* ---- Topic Card ---- */ .ssh-topic-card { background: #fff; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); padding: 1.75rem; transition: all var(--ssh-transition); height: 100%; display: flex; flex-direction: column; text-align: center; text-decoration: none; color: inherit; } .ssh-topic-card:hover { transform: translateY(-3px); box-shadow: var(--ssh-shadow-md); color: inherit; text-decoration: none; } .ssh-topic-card__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--ssh-light-bg); color: var(--ssh-charcoal); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin: 0 auto 1rem; border: 1px solid var(--ssh-border); flex-shrink: 0; } .ssh-topic-card__title { font-size: 1.05rem; font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-topic-card__description { font-size: 0.9rem; color: var(--ssh-text-light); flex: 1; margin-bottom: 1rem; line-height: 1.6; } .ssh-topic-card__link { font-size: 0.875rem; font-weight: 600; color: var(--ssh-charcoal); display: inline-flex; align-items: center; gap: 0.3rem; } .ssh-topic-card:hover .ssh-topic-card__link { gap: 0.5rem; color: var(--ssh-primary); } /* ---- Launch Tool Box ---- */ .ssh-launch-box { background: #fff; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); padding: 2rem; box-shadow: var(--ssh-shadow-md); max-width: 320px; } .ssh-launch-box__heading { font-size: 1.15rem; font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-launch-box__description { font-size: 0.9rem; color: var(--ssh-text-light); margin-bottom: 1.25rem; line-height: 1.6; } .ssh-launch-box__button { width: 100%; text-align: center; } /* ---- Tool Page Hero (split layout) ---- */ .ssh-tool-hero { background-color: var(--ssh-light-bg); padding: 3rem 0; } .ssh-tool-hero__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; } .ssh-tool-hero__title { flex: 1; } .ssh-tool-hero__launch { flex-shrink: 0; } @media (max-width: 768px) { .ssh-tool-hero__inner { flex-direction: column; } .ssh-launch-box { max-width: 100%; } } /* ---- Filter Panel ---- */ .ssh-filter-panel { border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); background: #fff; padding: 1.25rem; } .ssh-filter-panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ssh-border); } .ssh-filter-panel__title { font-size: 1rem; font-weight: 700; color: var(--ssh-heading); margin: 0; } .ssh-filter-panel__clear { font-size: 0.85rem; color: var(--ssh-text-light); text-decoration: underline; } .ssh-filter-panel__clear:hover { color: var(--ssh-charcoal); } .ssh-filter-panel__group { margin-bottom: 0.75rem; } .ssh-filter-panel__group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0.6rem 0; font-size: 0.9rem; font-weight: 600; color: var(--ssh-heading); cursor: pointer; border-bottom: 1px solid var(--ssh-light-bg); } .ssh-filter-panel__chevron { font-size: 0.65rem; transition: transform var(--ssh-transition); } .ssh-filter-panel__group-toggle[aria-expanded="false"] .ssh-filter-panel__chevron { transform: rotate(-90deg); } .ssh-filter-panel__group-body { padding: 0.5rem 0 0.25rem; } .ssh-filter-panel__checkbox { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.875rem; color: var(--ssh-text); cursor: pointer; } .ssh-filter-panel__checkbox input[type="checkbox"] { accent-color: var(--ssh-primary); width: 16px; height: 16px; flex-shrink: 0; } /* Active filter chips */ .ssh-filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .ssh-filter-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--ssh-light-bg); border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius-pill); padding: 0.3rem 0.75rem; font-size: 0.8rem; color: var(--ssh-text); } .ssh-filter-chip__remove { background: none; border: none; font-size: 1rem; line-height: 1; color: var(--ssh-text-light); cursor: pointer; padding: 0; } .ssh-filter-chip__remove:hover { color: var(--ssh-heading); } /* ---- Pagination ---- */ .ssh-pagination { padding: 2rem 0; display: flex; justify-content: center; } .ssh-pagination__list { display: flex; list-style: none; padding: 0; margin: 0; gap: 0.25rem; } .ssh-pagination__link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); font-size: 0.9rem; font-weight: 500; color: var(--ssh-text); text-decoration: none; transition: all var(--ssh-transition); } .ssh-pagination__link:hover { background-color: var(--ssh-light-bg); color: var(--ssh-heading); } .ssh-pagination__item--active .ssh-pagination__link { background-color: var(--ssh-primary); border-color: var(--ssh-primary); color: #fff; } .ssh-pagination__item--disabled .ssh-pagination__link { opacity: 0.4; pointer-events: none; } /* ---- Resource Carousel ---- */ .ssh-carousel { position: relative; overflow: hidden; } .ssh-carousel__track { display: flex; transition: transform 0.4s ease; gap: 1.5rem; } .ssh-carousel__slide { /* Honour the per-view count the widget sets via --ssh-cols (data-slides-per-view), accounting for the 1.5rem gaps between slides — so carouselColumns:2 shows 2-up, :3 shows 3-up, and the JS paging (which uses slide offsetWidth) stays in sync. Falls back to 3-up when --ssh-cols is unset. */ flex: 0 0 calc((100% - (var(--ssh-cols, 3) - 1) * 1.5rem) / var(--ssh-cols, 3)); min-width: 280px; } .ssh-carousel__controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; } .ssh-carousel__btn { background: none; border: 1px solid var(--ssh-border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ssh-charcoal); transition: all var(--ssh-transition); } .ssh-carousel__btn:hover { background: var(--ssh-light-bg); } .ssh-carousel__dots { display: flex; gap: 0.4rem; } .ssh-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ssh-border); border: none; cursor: pointer; padding: 0; transition: background var(--ssh-transition); } .ssh-carousel__dot--active { background: var(--ssh-primary); } @media (max-width: 768px) { .ssh-carousel__slide { flex: 0 0 calc(50% - 0.75rem); } } @media (max-width: 576px) { .ssh-carousel__slide { flex: 0 0 100%; } } /* ---- Load More Button ---- */ .ssh-load-more { text-align: center; padding: 2rem 0; } .ssh-load-more__btn { background: none; border: 2px solid var(--ssh-charcoal); color: var(--ssh-charcoal); padding: 0.65rem 2rem; font-weight: 600; font-size: 0.95rem; border-radius: var(--ssh-radius-pill); cursor: pointer; transition: all var(--ssh-transition); } .ssh-load-more__btn:hover { background: var(--ssh-charcoal); color: #fff; } .ssh-load-more__btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---- Vimeo Lightbox / Content Viewer ---- */ .ssh-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; padding: 2rem; } .ssh-lightbox[hidden] { display: none; } .ssh-lightbox__content { position: relative; width: 100%; max-width: 900px; } .ssh-lightbox__close { position: absolute; top: -2.5rem; right: 0; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 0.25rem 0.5rem; } .ssh-lightbox__close:hover { opacity: 0.8; } .ssh-lightbox__iframe { width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: var(--ssh-radius); } /* ---- Pillar Venn Diagram (Safe System Approach page) ---- */ .ssh-venn { max-width: 500px; margin: 0 auto; padding: 1rem 0; } .ssh-venn svg { width: 100%; height: auto; display: block; } .ssh-venn__center circle { fill: var(--ssh-primary); stroke: var(--ssh-primary); stroke-width: 2; } .ssh-venn__center text { fill: #ffffff; font-family: var(--ssh-font-family); font-weight: 700; font-size: 16px; letter-spacing: 1px; } .ssh-venn__pillar circle { fill: #cccccc; stroke: #b7b7b7; stroke-width: 1; transition: fill var(--ssh-transition); } .ssh-venn__pillar text { fill: var(--ssh-heading); font-family: var(--ssh-font-family); font-weight: 700; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; } .ssh-venn__pillar--active circle { fill: var(--ssh-charcoal); } .ssh-venn__pillar--active text { fill: #ffffff; } /* ---- Framework Flow Diagram (Road Safety Framework page) ---- */ .ssh-flow { margin: 1rem 0 2rem; text-align: center; } .ssh-flow__heading { font-size: var(--ssh-fs-h3); /* #51: H3 scale (28px) */ font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.6rem; } .ssh-flow__subtitle { color: var(--ssh-text-light); font-size: 1.05rem; max-width: 720px; margin: 0 auto 2rem; } .ssh-flow__canvas { background: var(--ssh-light-bg); border-radius: var(--ssh-radius); padding: 2rem 1rem; } .ssh-flow__canvas svg { width: 100%; height: auto; max-width: 800px; margin: 0 auto; display: block; } .ssh-flow__links line { stroke: #cccccc; stroke-width: 1.5; stroke-dasharray: 4 4; } .ssh-flow__node circle { fill: #d9d9d9; stroke: #b5b5b5; stroke-width: 1; } .ssh-flow__node text { fill: var(--ssh-heading); font-family: var(--ssh-font-family); font-weight: 600; font-size: 12px; } .ssh-flow__center circle { fill: var(--ssh-primary); stroke: var(--ssh-primary); } .ssh-flow__center text { fill: #ffffff; font-family: var(--ssh-font-family); font-weight: 600; font-size: 12px; } .ssh-flow__center-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.8px; } .ssh-flow__support rect { fill: var(--ssh-charcoal); stroke: var(--ssh-charcoal); rx: 6; ry: 6; } .ssh-flow__support text { fill: #ffffff; font-family: var(--ssh-font-family); font-weight: 600; font-size: 11px; } .ssh-flow__support-sub { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.5px; } /* ---- Proactive / Reactive Matrix (Pedestrians & pillar detail pages) ---- */ .ssh-prmatrix { margin: 2rem 0; } .ssh-prmatrix__header { text-align: center; margin-bottom: 2rem; } .ssh-prmatrix__heading { font-size: var(--ssh-fs-h3); /* #51: H3 scale (28px) */ font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.6rem; } .ssh-prmatrix__subtitle { color: var(--ssh-text-light); max-width: 720px; margin: 0 auto; font-size: 1.05rem; } .ssh-prmatrix__body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 768px) { .ssh-prmatrix__body { grid-template-columns: 1fr; } } .ssh-prmatrix__panel { background: #fff; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); padding: 1.75rem; position: relative; } .ssh-prmatrix__panel--proactive { border-top: 4px solid #4a7c8f; } .ssh-prmatrix__panel--reactive { border-top: 4px solid #9f5a5a; } .ssh-prmatrix__panel-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--ssh-light-bg); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.3rem; color: var(--ssh-charcoal); } .ssh-prmatrix__panel-heading { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--ssh-heading); } .ssh-prmatrix__panel-desc { color: var(--ssh-text-light); margin-bottom: 1rem; } .ssh-prmatrix__panel-content ul { padding-left: 1.2rem; margin: 0; } .ssh-prmatrix__panel-content li { margin-bottom: 0.5rem; line-height: 1.5; } /* ---- Tabbed List + Detail (vertical side-nav + detail panel) ---- */ .ssh-tld { margin: 1rem 0; } .ssh-tld__header { text-align: center; margin-bottom: 2rem; } .ssh-tld__heading { font-size: var(--ssh-fs-h3); /* #51: H3 scale (28px) */ font-weight: 700; margin-bottom: 0.6rem; color: var(--ssh-heading); } .ssh-tld__subtitle { color: var(--ssh-text-light); font-size: 1.05rem; max-width: 680px; margin: 0 auto; } .ssh-tld__body { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 2rem; align-items: start; } .ssh-tld__nav { display: flex; flex-direction: column; gap: 0.25rem; } .ssh-tld__nav-item { text-align: left; padding: 0.85rem 1rem; background: #fff; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); color: var(--ssh-text); font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: background var(--ssh-transition), color var(--ssh-transition), border-color var(--ssh-transition); } .ssh-tld__nav-item:hover { background: var(--ssh-light-bg); } .ssh-tld__nav-item--active { background: var(--ssh-primary); border-color: var(--ssh-primary); color: #fff; } .ssh-tld__nav-item--active:hover { background: var(--ssh-primary); color: #fff; } .ssh-tld__panels { background: #fff; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); padding: 2rem; min-height: 300px; } .ssh-tld__panel[hidden] { display: none; } .ssh-tld__panel h3, .ssh-tld__panel h4 { margin-top: 0; } @media (max-width: 768px) { .ssh-tld__body { grid-template-columns: 1fr; } .ssh-tld__nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ssh-tld__nav-item { flex-shrink: 0; } } /* ---- Compact orange hero (landing, detail, resources, contact, search, tools) ---- */ .ssh-landing__hero .ssh-hero, .ssh-detail__hero .ssh-hero, .ssh-resources__header .ssh-hero, .ssh-resource-detail__header .ssh-hero, .ssh-contact__header .ssh-hero, .ssh-tools__header .ssh-hero, .ssh-search-page__hero { text-align: left; justify-content: flex-start; min-height: auto; background-color: var(--ssh-primary) !important; background-image: none !important; color: #ffffff !important; display: block; } /* The Contact hero carries a subheading (so it's not the title-only variant). Give it the same 198px title-band height as the title-only interior heroes so the orange Page header band is a consistent 240px (42px breadcrumb + 198px title) site-wide, with the heading + subheading vertically centred. */ .ssh-contact__header .ssh-hero { min-height: 198px; display: flex; flex-direction: column; justify-content: center; } /* Full-width neutral band for the topic-page Overview and Relevant Tools sections. test.png (Sitewide): every full-width grey section band must be the neutral #F5F4F2 (--ssh-light-bg), NOT the warm cream #F5F1E8 — the People / Road Environment / Crash Type subpages were rendering the wrong grey. The "ssh-band-cream" marker (kept as-is to avoid re-seeding) breaks the section out of its centred container to full viewport width while the inner .container keeps content aligned. Adjacent bands butt together into one continuous band. */ .ssh-detail .ssh-section.ssh-band-cream { background: var(--ssh-light-bg); /* #F5F4F2 — neutral section surface */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Full-width neutral #F5F4F2 band (guide.fig: the Guide-parts section). Same full-bleed breakout as the cream band; the white rail boxes + panel sit on it. */ .ssh-detail .ssh-section.ssh-band-neutral { background: var(--ssh-light-bg, #F5F4F2); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Grey CONTAINED to the centred container (white side gutters, square corners), NOT full-bleed. Used by the "Guide to Road Safety" (7 parts) and "Related Austroads Guides" sections per client request — grey paints the .container box only, with internal padding; the section's own py-5 gives white space above/below. */ .ssh-detail .ssh-section.ssh-band-boxed > .container { background: var(--ssh-light-bg, #F5F4F2); padding-top: 2.5rem; padding-bottom: 2.5rem; padding-left: 2rem; padding-right: 2rem; } /* === "Applying the Safe System" — Figma white-card layout === Each mode (Proactive / Reactive) is a white rounded card holding a left-aligned heading + intro, a left-aligned tab row (one tab per element) and orange check-circle bullets. Scoped to .ssh-applying-card so the element-subpage "How This Element Shapes Safety" tabs (full-width spread) are untouched. */ .ssh-detail__tabs .ssh-section.ssh-applying-card .col-12 { background: #ffffff; border: 1px solid var(--ssh-border); border-radius: 16px; padding: 2.25rem 2.5rem; box-shadow: var(--ssh-shadow-sm); } .ssh-applying-card .ssh-section-heading { text-align: left; margin-bottom: 1.25rem; } .ssh-applying-card .ssh-section-heading__title { font-size: var(--ssh-fs-h3); /* design heading ≈ 28px */ } .ssh-applying-card .ssh-section-heading__subtitle { margin-left: 0; margin-right: 0; max-width: none; } /* Left-aligned, auto-width tabs. Higher specificity (5+ classes) than the element-subpage rule `.ssh-detail .ssh-resource-detail__tabs .nav-item` (which sets flex:1/centered) so the Applying tabs pack to the left instead of spreading full-width. */ /* Applying-elements tab row: tabs share the full width equally (not left-aligned). */ .ssh-detail__tabs .ssh-section.ssh-applying-card .ssh-resource-detail__tabs { gap: 0.75rem; } .ssh-detail__tabs .ssh-section.ssh-applying-card .ssh-resource-detail__tabs .nav-item { flex: 1 1 0; /* equal-width tabs */ min-width: 0; } .ssh-detail__tabs .ssh-section.ssh-applying-card .ssh-resource-detail__tabs .nav-link { width: 100%; text-align: center; font-size: 1.125rem; padding: 0.5rem 0; } .ssh-detail__tabs .ssh-section.ssh-applying-card .ssh-resource-detail__tabs .nav-link.active { border-bottom-color: var(--ssh-primary); /* orange active underline */ } /* A single tab (Reactive / Mitigative = just "Post-Crash Response") fills the row but keeps the active orange underline (border), NOT a solid button. */ .ssh-detail__tabs .ssh-section.ssh-applying-card .ssh-resource-detail__tabs .nav-item:only-child { flex: 1 1 100%; } /* Orange check-circle bullets (replaces the plain disc list). */ .ssh-applying-list { list-style: none; padding-left: 0; margin: 0; } .ssh-applying-list li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.6rem; color: var(--ssh-text); line-height: 1.55; } .ssh-applying-list li:last-child { margin-bottom: 0; } .ssh-applying-list li .bi-check-circle-fill { color: var(--ssh-primary); flex-shrink: 0; margin-top: 0.15rem; font-size: 1.05rem; } .ssh-landing__hero .ssh-hero__content, .ssh-detail__hero .ssh-hero__content, .ssh-resources__header .ssh-hero__content, .ssh-resource-detail__header .ssh-hero__content, .ssh-contact__header .ssh-hero__content, .ssh-tools__header .ssh-hero__content, .ssh-landing__hero .ssh-hero__content.container, .ssh-detail__hero .ssh-hero__content.container, .ssh-resources__header .ssh-hero__content.container, .ssh-resource-detail__header .ssh-hero__content.container, .ssh-contact__header .ssh-hero__content.container, .ssh-tools__header .ssh-hero__content.container { /* Vertical padding only - horizontal width and padding come from the .container class so the heading's left edge sits at the same x position as the breadcrumb and logo above. The previous override (max-width: none; width: 100%; padding: 3rem 1.5rem 2.75rem) made the hero content full-bleed and indented only 1.5rem, which on wider viewports was far to the left of the .container-aligned breadcrumb. */ padding-top: 3rem; padding-bottom: 2.75rem; } .ssh-landing__hero .ssh-hero__heading, .ssh-detail__hero .ssh-hero__heading, .ssh-resources__header .ssh-hero__heading, .ssh-resource-detail__header .ssh-hero__heading, .ssh-contact__header .ssh-hero__heading, .ssh-tools__header .ssh-hero__heading, .ssh-search-page__hero-title { font-size: 2.5rem; margin-bottom: 0.5rem; color: #ffffff !important; font-weight: 700; } .ssh-landing__hero .ssh-hero__subheading, .ssh-detail__hero .ssh-hero__subheading, .ssh-resources__header .ssh-hero__subheading, .ssh-resource-detail__header .ssh-hero__subheading, .ssh-contact__header .ssh-hero__subheading, .ssh-tools__header .ssh-hero__subheading { color: rgba(255, 255, 255, 0.92) !important; margin: 0; max-width: 760px; margin-left: 0; margin-right: 0; } /* Empty subheading on a compact hero collapses (wireframe leaves them off) */ .ssh-landing__hero .ssh-hero__subheading:empty, .ssh-detail__hero .ssh-hero__subheading:empty, .ssh-resources__header .ssh-hero__subheading:empty, .ssh-resource-detail__header .ssh-hero__subheading:empty, .ssh-contact__header .ssh-hero__subheading:empty, .ssh-tools__header .ssh-hero__subheading:empty { display: none; } /* Search page hero - solid brand-orange band to match every other interior page. */ .ssh-search-page__hero, .ssh-search-page__hero.ssh-bg-light { background-color: var(--ssh-primary) !important; } .ssh-search-page__hero-title { color: #FFFFFF !important; text-align: left; margin: 0; } .ssh-search-page__hero > .container { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; } /* ---- Tools landing: 2-col grid with "Tool" badge top-right ---- */ section.ssh-tools-grid > .container > .row > .col-12 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: stretch; } section.ssh-tools-grid > .container > .row > .col-12 > .ssh-pillar-card { position: relative; } section.ssh-tools-grid > .container > .row > .col-12 > .ssh-pillar-card::before { content: "Tool"; position: absolute; top: 0.75rem; right: 0.75rem; background: #fff; border: 1px solid var(--ssh-border); padding: 0.2rem 0.7rem; border-radius: var(--ssh-radius-pill); font-size: 0.72rem; font-weight: 600; color: var(--ssh-text-light); text-transform: none; letter-spacing: 0.3px; z-index: 2; } @media (max-width: 576px) { section.ssh-tools-grid > .container > .row > .col-12 { grid-template-columns: 1fr; } } /* ---- "Explore Other Themes" 2-card strip (Road User/Type/Process cross-links) ---- */ /* Grey panel is on the inner container so it's contained, not edge-to-edge */ section.ssh-explore-themes > .container { background-color: var(--ssh-light-bg); border-radius: var(--ssh-radius); padding: 2rem; } section.ssh-explore-themes > .container > .row > .col-12 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* Cards inside the grey panel are white so they pop against the grey */ section.ssh-explore-themes > .container > .row > .col-12 > .ssh-pillar-card { background: #fff; } @media (max-width: 576px) { section.ssh-explore-themes > .container > .row > .col-12 { grid-template-columns: 1fr; } } /* ---- Landing Pillar Grid: 2+2+1 with tall highlighted right card ---- */ section.ssh-pillar-grid > .container > .row > .col-12 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 1.5rem; align-items: stretch; } section.ssh-pillar-grid > .container > .row > .col-12 > .ssh-pillar-card:nth-of-type(1) { grid-column: 1; grid-row: 1; } section.ssh-pillar-grid > .container > .row > .col-12 > .ssh-pillar-card:nth-of-type(2) { grid-column: 2; grid-row: 1; } section.ssh-pillar-grid > .container > .row > .col-12 > .ssh-pillar-card:nth-of-type(3) { grid-column: 3; grid-row: 1 / span 2; background-color: var(--ssh-charcoal); color: #fff; } section.ssh-pillar-grid > .container > .row > .col-12 > .ssh-pillar-card:nth-of-type(3) .ssh-pillar-card__title, section.ssh-pillar-grid > .container > .row > .col-12 > .ssh-pillar-card:nth-of-type(3) .ssh-pillar-card__description, section.ssh-pillar-grid > .container > .row > .col-12 > .ssh-pillar-card:nth-of-type(3) .ssh-pillar-card__link { color: #fff; } section.ssh-pillar-grid > .container > .row > .col-12 > .ssh-pillar-card:nth-of-type(3) .ssh-pillar-card__placeholder { background-color: rgba(255, 255, 255, 0.1); } section.ssh-pillar-grid > .container > .row > .col-12 > .ssh-pillar-card:nth-of-type(4) { grid-column: 1; grid-row: 2; } section.ssh-pillar-grid > .container > .row > .col-12 > .ssh-pillar-card:nth-of-type(5) { grid-column: 2; grid-row: 2; } @media (max-width: 768px) { section.ssh-pillar-grid > .container > .row > .col-12 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } section.ssh-pillar-grid > .container > .row > .col-12 > .ssh-pillar-card { grid-column: auto !important; grid-row: auto !important; } } @media (max-width: 576px) { section.ssh-pillar-grid > .container > .row > .col-12 { grid-template-columns: 1fr; } } /* ---- Home Page Sections ---- */ .ssh-home__intro { padding: 1.5rem 0 0.5rem; /* #54/#55: halve section spacing */ text-align: center; } .ssh-home__intro .ssh-section-heading { margin-bottom: 0; } .ssh-home__featured, .ssh-home__problems, .ssh-home__resources { padding: 0.75rem 0; /* #54/#55: halve section spacing */ } /* === Home subsection: Figma orange-panel + peach-cards rounded block === Each home subsection (.ssh-home__featured/problems/resources) wraps a TwoColumnSection. The .row inside that section becomes the rounded feature-section block: 16px corners, no margin between halves, two coloured halves butt up against each other. col-md-4 = orange panel (heading + desc + Learn More); col-md-8 = peach card-grid container. */ .ssh-home__featured .ssh-section .row, .ssh-home__problems .ssh-section .row, .ssh-home__resources .ssh-section .row { border-radius: 16px; overflow: hidden; margin-left: 0; margin-right: 0; --bs-gutter-x: 0; } .ssh-home__featured .ssh-section, .ssh-home__problems .ssh-section, .ssh-home__resources .ssh-section { padding-left: 0; padding-right: 0; } /* Orange heading panel (col-md-4) - only when it contains a SectionHeading */ .ssh-home__featured .col-md-4:has(.ssh-section-heading), .ssh-home__problems .col-md-4:has(.ssh-section-heading), .ssh-home__resources .col-md-4:has(.ssh-section-heading) { background: var(--ssh-primary); /* rust orange */ color: #fff; padding: 2.5rem; display: flex; align-items: center; } .ssh-home__featured .col-md-4 .ssh-section-heading, .ssh-home__problems .col-md-4 .ssh-section-heading, .ssh-home__resources .col-md-4 .ssh-section-heading { text-align: left; margin: 0; width: 100%; } .ssh-home__featured .col-md-4 .ssh-section-heading__title, .ssh-home__problems .col-md-4 .ssh-section-heading__title, .ssh-home__resources .col-md-4 .ssh-section-heading__title { color: #fff; font-size: 1.75rem; /* #54: orange-box subheadings = H3 style, 28px / 700 */ font-weight: 700; line-height: 1.2; margin-bottom: 0.75rem; } .ssh-home__featured .col-md-4 .ssh-section-heading__subtitle, .ssh-home__problems .col-md-4 .ssh-section-heading__subtitle, .ssh-home__resources .col-md-4 .ssh-section-heading__subtitle { color: #ffffff; /* #54: text under subheadings = body 16px / #FFFFFF */ font-size: 1rem; margin: 0 0 1.25rem; max-width: none; } .ssh-home__featured .col-md-4 .ssh-section-heading__btn, .ssh-home__problems .col-md-4 .ssh-section-heading__btn, .ssh-home__resources .col-md-4 .ssh-section-heading__btn { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; color: #fff; border: 2px solid #fff; padding: 0.65rem 1.2rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all var(--ssh-transition); } .ssh-home__featured .col-md-4 .ssh-section-heading__btn:hover, .ssh-home__problems .col-md-4 .ssh-section-heading__btn:hover, .ssh-home__resources .col-md-4 .ssh-section-heading__btn:hover { background: #fff; color: var(--ssh-primary); } /* Peach cards container (col-md-8) - when it holds multiple FeatureCards */ .ssh-home__featured .col-md-8, .ssh-home__problems .col-md-8, .ssh-home__resources .col-md-8 { background: var(--ssh-hero-bg); /* peach #F5F1E8 */ padding: 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-content: start; } /* Compact card variant inside home subsections - links are always hidden (the whole card is the link). Per client: the Safe System (featured) cards are ALSO description-free; the Key Area (problems) and Resources/Tools (resources) cards keep their short description. */ .ssh-home__featured .col-md-8 .ssh-pillar-card__description, .ssh-home__featured .col-md-8 .ssh-pillar-card__link, .ssh-home__problems .col-md-8 .ssh-pillar-card__link, .ssh-home__resources .col-md-8 .ssh-pillar-card__link { display: none; } /* Per client: the Key Area / Resources / Tools home cards have CENTER-aligned content (icon, title, description) — matching the Safe System cards beside them. NOTE: the Figma "Explore Cards" component is the "Left Align" variant, so this centring is a deliberate client override of the design. */ .ssh-home__problems .col-md-8 .ssh-pillar-card, .ssh-home__resources .col-md-8 .ssh-pillar-card { text-align: center; align-items: center; } /* Short description on the Key Area / Resources / Tools home cards (2-line clamp keeps the compact grid tidy). */ .ssh-home__problems .col-md-8 .ssh-pillar-card__description, .ssh-home__resources .col-md-8 .ssh-pillar-card__description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; font-size: 0.9rem; line-height: 1.5; color: var(--ssh-text-light); margin: 0.35rem 0 0; flex: 0 0 auto; } .ssh-home__featured .col-md-8 .ssh-pillar-card__title, .ssh-home__problems .col-md-8 .ssh-pillar-card__title, .ssh-home__resources .col-md-8 .ssh-pillar-card__title { font-size: var(--ssh-fs-h5); /* #54: white-box headings = H5, 18px / 600 */ font-weight: 600; margin-bottom: 0; } /* Home "Safe System" block = compact navy-band Pillars Cards (publish.png / design Home "Discover" → first block uses the same "Pillars Cards" component as the Safe System / People landing banners: navy top band + orange icon squircle + centred title). The other two home blocks (Key Areas, Resources) use the plain "Explore Cards" style, so this is scoped to __featured only. */ .ssh-home__featured .col-md-8 .ssh-pillar-card { position: relative; overflow: hidden; /* Design "Pillars Cards/Default": 209x220 card, content begins at y129 (= 99px navy band + the 30px lower half of the icon). Title-only here (no description per client), so the card is a touch shorter than 220. */ padding: 6.2rem 1.25rem 1.5rem; min-height: 195px; text-align: center; align-items: center; border: 1px solid #d8dade; border-radius: 16px; /* design card radius = 16 */ background: #fff; gap: 0; } .ssh-home__featured .col-md-8 .ssh-pillar-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6.2rem; /* design navy band = 99px (45% of the 220 card) */ background: var(--ssh-secondary); /* navy band #03293C */ } .ssh-home__featured .col-md-8 .ssh-pillar-card__icon { position: relative; z-index: 1; width: 60px; /* design icon = 60x60 */ height: 60px; /* icon centre sits exactly on the band's bottom edge (design @(75,69), 60 tall) */ margin: -1.9rem auto 0.9rem; background-color: var(--ssh-primary) !important; /* orange squircle */ border: 0; border-radius: 8px; /* design icon radius = 8 */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); font-size: 1.5rem; } .ssh-home__featured .col-md-8 .ssh-pillar-card__icon .bi, .ssh-home__featured .col-md-8 .ssh-pillar-card__icon i { color: #ffffff !important; } .ssh-home__featured .col-md-8 .ssh-pillar-card__title { text-align: center; width: 100%; /* bug/11.png #63: the Safe System card titles must match the other home cards — H5 style, 18px / semibold (600), not the previous 20px / extra-bold. */ font-size: var(--ssh-fs-h5); font-weight: 600; margin-bottom: 0.4rem; } /* Per client: the home Safe System pillar cards are TITLE-ONLY (no short description). Short descriptions belong to the Key Area / Resources / Tools cards — handled by the un-hide rule below, not here. */ /* Mobile/tablet: stack and drop card grid density. */ @media (max-width: 991px) { .ssh-home__featured .col-md-8, .ssh-home__problems .col-md-8, .ssh-home__resources .col-md-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .ssh-home__featured .col-md-8, .ssh-home__problems .col-md-8, .ssh-home__resources .col-md-8 { grid-template-columns: 1fr; padding: 1.5rem; } .ssh-home__featured .col-md-4, .ssh-home__problems .col-md-4, .ssh-home__resources .col-md-4 { padding: 1.75rem; } } .ssh-home__two-col { padding: 1.5rem 0; /* #54/#55: halve section spacing */ background-color: var(--ssh-light-bg); } /* 3+2 Pillar Grid */ .ssh-grid-3-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; } .ssh-grid-3-2--bottom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 66.666%; margin: 0 auto; } @media (max-width: 768px) { .ssh-grid-3-2 { grid-template-columns: repeat(2, 1fr); } .ssh-grid-3-2--bottom { max-width: 100%; } } @media (max-width: 576px) { .ssh-grid-3-2, .ssh-grid-3-2--bottom { grid-template-columns: 1fr; } } /* ---- Search Page Layout ---- */ .ssh-search-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: start; } @media (max-width: 991.98px) { .ssh-search-layout { grid-template-columns: 1fr; } } .ssh-search-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (max-width: 768px) { .ssh-search-results-grid { grid-template-columns: 1fr; } } /* ---- Search Result Card (mixed type) ---- */ .ssh-result-card { border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); overflow: hidden; background: #fff; transition: all var(--ssh-transition); position: relative; } .ssh-result-card:hover { transform: translateY(-3px); box-shadow: var(--ssh-shadow-md); } .ssh-result-card__badge { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--ssh-charcoal); /* Tag/Tool - Neutrals/Dark #302F2D, white text */ color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: var(--ssh-radius-pill); text-transform: uppercase; letter-spacing: 0.5px; z-index: 1; } .ssh-result-card__image { height: 160px; background: var(--ssh-img-bg); /* #E8E7E5 - card image/header band */ overflow: hidden; } .ssh-result-card__image img { width: 100%; height: 100%; object-fit: cover; } .ssh-result-card__body { padding: 1.25rem; } .ssh-result-card__meta { font-size: 0.8rem; color: var(--ssh-text-light); margin-bottom: 0.4rem; } .ssh-result-card__title { font-size: 1.05rem; font-weight: 600; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-result-card__summary { font-size: 0.875rem; color: var(--ssh-text); line-height: 1.6; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ssh-result-card__link { font-size: 0.85rem; font-weight: 600; color: var(--ssh-charcoal); display: inline-flex; align-items: center; gap: 0.3rem; } .ssh-result-card__link:hover { gap: 0.5rem; color: var(--ssh-primary); } /* ---- Category Tabs (Resources page) ---- */ .ssh-category-tabs { display: flex; gap: 1rem; padding: 1.5rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ssh-category-tab { flex: 1; min-width: 140px; text-align: center; padding: 1.25rem 1rem; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); background: #fff; color: var(--ssh-text); font-weight: 600; font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; transition: all var(--ssh-transition); } .ssh-category-tab:hover { background: var(--ssh-light-bg); color: var(--ssh-heading); } .ssh-category-tab i { font-size: 1.4rem; color: var(--ssh-text-light); } .ssh-category-tab--active { background: var(--ssh-primary); border-color: var(--ssh-primary); color: #fff; } .ssh-category-tab--active i { color: #fff; } .ssh-category-tab--active:hover { background: var(--ssh-primary); color: #fff; } /* New BEM child elements for the redesigned tabs */ .ssh-category-tab__icon { width: 56px; height: 56px; border-radius: 8px; background: var(--ssh-light-bg, #f7f9fc); display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .ssh-category-tab__icon i { font-size: 1.6rem; color: var(--ssh-text-light); } .ssh-category-tab--active .ssh-category-tab__icon { background: rgba(255,255,255,0.15); } .ssh-category-tab__label { font-size: 0.95rem; font-weight: 600; } /* ---- Resources page (Figma redesign) ---- */ .ssh-resources__intro-title { font-size: var(--ssh-fs-h2); /* #51: section H2 — 36px / 800 */ font-weight: 800; color: var(--ssh-heading); } .ssh-resources__intro-lead { max-width: 720px; margin: 0.75rem auto 0; } .ssh-resources__filters { border-bottom: 1px solid var(--ssh-border); padding: 1rem 0; background: #fff; } .ssh-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .ssh-filter-row__label { font-weight: 600; color: var(--ssh-heading); font-size: 0.95rem; margin-right: 0.5rem; } .ssh-filter-row__select { flex: 0 1 auto; min-width: 170px; max-width: 220px; border-radius: var(--ssh-radius); border-color: var(--ssh-border); } .ssh-filter-row__clear { margin-left: auto; color: var(--ssh-text-light); font-weight: 500; text-decoration: underline; font-size: 0.9rem; } .ssh-filter-row__clear:hover { color: var(--ssh-heading); } /* Resources "All/Latest Resources" listing — Figma puts this section on a warm Cream band (#F5F1E8), full-width, with the heading as an H2. */ .ssh-resources__listing-section { /* publish.png: grey/cream background removed from the cards section. */ background: transparent; } /* The inner ResourceList's "All Resources" heading + chip tabs are removed at the seed level now (heading="" / showFilters=false). The taxonomy dropdown filter row is shown (re-enabled per request). */ .ssh-resources__listing-title { font-size: var(--ssh-fs-h3); /* publish.png: H3 style — 28px */ font-weight: 700; /* publish.png: bold (700) */ color: var(--ssh-heading); text-align: center; /* test2.png: heading centered (matches "Browse By Category") */ } /* Centre the listing heading's subheading paragraph too (test2.png). */ .ssh-resources__listing-title + p { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; } .ssh-resources__cross-link { padding: 1rem 0 2rem; } .ssh-cross-link-card { background: var(--ssh-light-bg, #f1f4f9); border-radius: 12px; padding: 2rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .ssh-cross-link-card__text { flex: 1 1 360px; } .ssh-cross-link-card__title { font-size: 1.4rem; font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-cross-link-card__desc { color: var(--ssh-text); margin: 0; } .ssh-cross-link-card__btn { background: var(--ssh-primary); color: #fff; padding: 0.85rem 1.5rem; font-weight: 600; border-radius: var(--ssh-radius); flex-shrink: 0; } .ssh-cross-link-card__btn:hover { background: var(--ssh-primary-dark); color: #fff; } /* ---- Tools & Techniques page (Figma redesign) ---- */ .ssh-tools__intro-title { font-size: var(--ssh-fs-h2); /* #51: section H2 — 36px / 800 */ font-weight: 800; color: var(--ssh-heading); } .ssh-tools__intro-lead { max-width: 720px; margin: 0.75rem auto 0; } /* 2-card Tools / Techniques toggle */ .ssh-tools__toggle-section { padding-bottom: 1.5rem; } .ssh-tools-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 768px) { .ssh-tools-toggle { grid-template-columns: 1fr; } } .ssh-tools-toggle__card { background: #fff; border: 1px solid var(--ssh-border); border-radius: 12px; padding: 1.75rem; display: flex; align-items: center; gap: 1.25rem; color: var(--ssh-text); text-decoration: none; transition: all var(--ssh-transition); } .ssh-tools-toggle__card:hover { border-color: var(--ssh-charcoal, #333); } .ssh-tools-toggle__card--active { background: var(--ssh-light-bg, #f1f4f9); border-color: var(--ssh-charcoal, #333); color: var(--ssh-heading); } .ssh-tools-toggle__icon { width: 56px; height: 56px; border-radius: 10px; background: rgba(0,0,0,0.05); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--ssh-text-light); } .ssh-tools-toggle__card--active .ssh-tools-toggle__icon { background: rgba(0,0,0,0.08); color: var(--ssh-heading); } .ssh-tools-toggle__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--ssh-heading); } .ssh-tools-toggle__desc { font-size: 0.9rem; color: var(--ssh-text); margin: 0; } /* Tool listing card (2-col grid below the toggle) */ .ssh-tool-listing-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ssh-border); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--ssh-text); height: 100%; transition: all var(--ssh-transition); } .ssh-tool-listing-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); } .ssh-tool-listing-card__image { position: relative; height: 220px; background: var(--ssh-img-bg); /* #E8E7E5 - card image/header band */ overflow: hidden; } .ssh-tool-listing-card__image img { width: 100%; height: 100%; object-fit: cover; } .ssh-tool-listing-card__badge { position: absolute; top: 1rem; right: 1rem; background: #fff; color: var(--ssh-heading); border-radius: 999px; padding: 0.25rem 0.85rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .ssh-tool-listing-card__body { padding: 1.5rem; flex: 1 1 auto; display: flex; flex-direction: column; } .ssh-tool-listing-card__meta { color: var(--ssh-text-light); font-size: 0.85rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } /* Issue #55: the date sits at the right edge of the meta row (author left, date right). Push the trailing date span to the right and drop the now-redundant middle dot separator. */ .ssh-tool-listing-card__meta > span:last-child { margin-left: auto; } .ssh-tool-listing-card__meta .mx-1 { display: none; } .ssh-tool-listing-card__title { font-size: 1.125rem; /* issue #55: H5 style — 18px / 600 */ font-weight: 600; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-tool-listing-card__desc { color: var(--ssh-text); font-size: 1rem; /* issue #55: body text 16px */ flex: 1 1 auto; } .ssh-tool-listing-card__link { color: var(--ssh-primary, var(--ssh-charcoal)); font-weight: 600; font-size: 0.92rem; margin-top: 0.75rem; } /* ---- Vision Zero detail page (Figma redesign) ---- The two overview columns ("Towards Zero" + "Core Foundations") render inside ssh-content-block widgets that wrap the ssh-vz-quote-card / ssh-vz-list markers. The wireframe (publish.png and Screen/Vision Zero & the Safe System.png) shows each column as a thin-bordered card with generous padding, so this :has() rule promotes those specific content blocks to bordered cards while leaving ssh-content-block usage on other pages untouched. */ .ssh-content-block:has(> .ssh-vz-quote-card), .ssh-content-block:has(> .ssh-vz-list) { border: 1px solid var(--ssh-border); border-radius: 12px; padding: 2rem; background: #ffffff; height: 100%; } .ssh-vz-quote-card { background: var(--ssh-light-bg, #f1f4f9); border-radius: 12px; padding: 2rem; border-left: 4px solid var(--ssh-charcoal, #333); } .ssh-vz-quote-card__title { font-size: 1.4rem; font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-vz-quote-card__sub { font-size: 1rem; color: var(--ssh-text); margin: 0; font-style: italic; } .ssh-vz-list { list-style: none; padding-left: 0; margin: 1rem 0; } .ssh-vz-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.6rem; color: var(--ssh-text); } .ssh-vz-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--ssh-charcoal, #333); border-radius: 50%; } .ssh-vz-banner-quote { background: var(--ssh-light-bg, #f1f4f9); border-radius: 12px; padding: 3.5rem 2rem; } .ssh-vz-banner-quote__icon { width: 80px; height: 80px; border-radius: 50%; background: #fff; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--ssh-charcoal, #333); box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .ssh-vz-banner-quote__title { font-size: 2.25rem; font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-vz-banner-quote__sub { font-size: 2.25rem; font-weight: 700; color: var(--ssh-heading); margin: 0; } /* ---- Search page (Figma redesign) ---- */ .ssh-search-page__hero-title { font-size: 2.5rem; font-weight: 700; color: #ffffff !important; margin: 0; } .ssh-search-page__intro-title { font-size: var(--ssh-fs-h2); /* #51: section H2 — 36px / 800 */ font-weight: 800; color: var(--ssh-heading); } .ssh-search-page__intro-lead { max-width: 720px; margin: 0.5rem auto 1.5rem; } .ssh-search-page__searchbar { background: #fff; } .ssh-search-page__searchbar-heading { font-size: var(--ssh-fs-h2); /* 36px H2 per design */ font-weight: 800; color: var(--ssh-heading); margin-bottom: 0.5rem; } /* #37: search box sits in a light #F5F4F2 container (input + orange Search button) */ .ssh-search-page__searchbox { background: var(--ssh-light-bg); border-radius: var(--ssh-radius); padding: 1.5rem; max-width: 880px; margin: 1.5rem auto 0; } .ssh-search-page__searchbox .ssh-search-bar, .ssh-search-page__searchbox .input-group { width: 100%; } .ssh-search-bigbar { display: flex; gap: 0; background: #fff; border: 1px solid var(--ssh-border); border-radius: 999px; overflow: hidden; padding: 0.5rem 0.5rem 0.5rem 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .ssh-search-bigbar__input { flex: 1 1 auto; border: none; background: transparent; box-shadow: none; padding: 0.5rem 0; font-size: 1rem; } .ssh-search-bigbar__input:focus { outline: none; box-shadow: none; } .ssh-search-bigbar__button { background: var(--ssh-primary); color: #fff; border-radius: 999px; padding: 0.6rem 1.6rem; font-weight: 600; border: none; } .ssh-search-bigbar__button:hover { background: var(--ssh-primary-dark); color: #fff; } /* ---- Search autocomplete dropdown (reference: clean full-width list, typed prefix regular / completion bold, full-row hover highlight) ---- */ .ssh-autocomplete-dropdown { position: absolute; z-index: 1050; margin-top: 4px; background: #fff; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-height: 360px; overflow-y: auto; padding: 0.35rem 0; } .ssh-autocomplete-item { display: block; padding: 0.6rem 1.25rem; color: var(--ssh-text); font-size: 0.95rem; line-height: 1.35; text-align: left; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background-color var(--ssh-transition); } .ssh-autocomplete-item:hover, .ssh-autocomplete-item.is-active { background: #F5F4F2; color: var(--ssh-heading); text-decoration: none; } .ssh-autocomplete-item__typed { font-weight: 400; } .ssh-autocomplete-item__suffix { font-weight: 700; color: var(--ssh-heading); } /* Load More uses the solid primary button treatment (matches the filter panel's "Apply Filters" button), just centered rather than full-width. */ .ssh-search-results__load-more-btn { min-width: 220px; padding: 0.6rem 2rem; } .ssh-search-page__summary { margin-bottom: 1rem; } .ssh-search-page__cta { margin-top: 2rem; } /* ---- Explore Other Pillars Carousel ---- */ .ssh-pillar-carousel { display: flex; gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem 0 1rem; scroll-snap-type: x mandatory; } .ssh-pillar-carousel > * { flex: 0 0 calc(20% - 0.8rem); min-width: 200px; scroll-snap-align: start; } .ssh-pillar-carousel .ssh-pillar-card--current { background-color: var(--ssh-light-bg); border-color: var(--ssh-charcoal); } /* ---- Two Wide Cards (Explore Other Themes) ---- */ .ssh-wide-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .ssh-wide-card { display: flex; align-items: center; justify-content: space-between; padding: 2rem; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); background: #fff; text-decoration: none; color: var(--ssh-heading); font-weight: 600; font-size: 1.15rem; transition: all var(--ssh-transition); } .ssh-wide-card:hover { transform: translateY(-2px); box-shadow: var(--ssh-shadow-md); color: var(--ssh-heading); } @media (max-width: 576px) { .ssh-wide-cards { grid-template-columns: 1fr; } } /* ---- Guide Selector (Road Safety Framework) ---- */ .ssh-guide-selector { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; min-height: 400px; } .ssh-guide-selector__list { list-style: none; padding: 0; margin: 0; } .ssh-guide-selector__item { padding: 0.85rem 1rem; border-left: 3px solid transparent; cursor: pointer; font-weight: 500; color: var(--ssh-text); transition: all var(--ssh-transition); } .ssh-guide-selector__item:hover { background: var(--ssh-light-bg); } .ssh-guide-selector__item--active { border-left-color: var(--ssh-primary); background: var(--ssh-light-bg); color: var(--ssh-heading); font-weight: 600; } .ssh-guide-selector__detail { padding: 1rem; } @media (max-width: 768px) { .ssh-guide-selector { grid-template-columns: 1fr; } } /* ---- Accordion (spec-compliant with +/- toggle) ---- */ .ssh-accordion__item { border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); margin-bottom: 0.5rem; overflow: hidden; } .ssh-accordion__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #fff; border: none; padding: 1rem 1.25rem; font-size: 1rem; font-weight: 600; color: var(--ssh-heading); cursor: pointer; transition: background var(--ssh-transition); } .ssh-accordion__toggle:hover { background: var(--ssh-light-bg); } .ssh-accordion__toggle:focus-visible { outline: 2px solid var(--ssh-primary); outline-offset: -2px; } .ssh-accordion__icon { font-size: 1.25rem; font-weight: 400; color: var(--ssh-text-light); flex-shrink: 0; width: 24px; text-align: center; } .ssh-accordion__body { padding: 0 1.25rem 1.25rem; line-height: 1.75; } .ssh-accordion__body[hidden] { display: none; } /* ---- Contact Page (v7.4 / Figma layout) ---- */ .ssh-contact__main > .container { max-width: 1200px; } .ssh-contact__panel { background: #fff; border: 1px solid var(--ssh-border, #e2e8f0); border-radius: 12px; padding: 3rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } @media (max-width: 768px) { .ssh-contact__panel { padding: 1.5rem; } } .ssh-contact-form__title, .ssh-contact-details__title { font-size: 1.6rem; font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-contact-details { background: transparent; padding: 0; height: 100%; } .ssh-contact-details__item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--ssh-border, #e2e8f0); } .ssh-contact-details__item:last-child { border-bottom: none; padding-bottom: 0; } .ssh-contact-details__item:first-of-type { padding-top: 0; } .ssh-contact-details__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--ssh-charcoal, #333); font-size: 1.2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .ssh-contact-details__label { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ssh-text-light, #6b7280); margin-bottom: 0.25rem; } .ssh-contact-details__body a { color: var(--ssh-heading); font-weight: 500; text-decoration: none; } .ssh-contact-details__body a:hover { text-decoration: underline; } .ssh-contact__info:empty, .ssh-contact__info:not(:has(.ssh-resource-list, .ssh-contact-card, .ssh-section-heading, .ssh-content-block)) { display: none; } /* ---- Contact Form (updated to match spec) ---- */ .ssh-contact-form .form-control, .ssh-contact-form .form-select { border-radius: var(--ssh-radius); padding: 0.75rem 1rem; border-color: var(--ssh-border); } .ssh-contact-form .form-control:focus, .ssh-contact-form .form-select:focus { border-color: var(--ssh-charcoal); box-shadow: none; } .ssh-contact-form .form-label { font-weight: 500; color: var(--ssh-heading); font-size: 0.9rem; } .ssh-contact-form__submit { background-color: var(--ssh-primary); border: none; color: #fff; padding: 0.85rem 2rem; font-weight: 600; font-size: 1rem; border-radius: var(--ssh-radius); width: 100%; cursor: pointer; transition: background var(--ssh-transition); } .ssh-contact-form__submit:hover { background-color: var(--ssh-primary-dark); } /* ---- Guide Cards (Related Austroads Guides) ---- */ .ssh-guide-card { border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); padding: 1.5rem; background: #fff; transition: all var(--ssh-transition); height: 100%; } .ssh-guide-card:hover { box-shadow: var(--ssh-shadow-md); } .ssh-guide-card__icon { width: 48px; height: 48px; margin-bottom: 1rem; } .ssh-guide-card__title { font-size: 1rem; font-weight: 600; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-guide-card__description { font-size: 0.875rem; color: var(--ssh-text-light); margin-bottom: 1rem; line-height: 1.6; } .ssh-guide-card__link { font-size: 0.85rem; font-weight: 600; color: var(--ssh-charcoal); display: inline-flex; align-items: center; gap: 0.3rem; } .ssh-guide-card__link:hover { gap: 0.5rem; color: var(--ssh-primary); } /* ---- Enterprise safety: content overflow protection ---- */ .ssh-pillar-card__title, .ssh-topic-card__title, .ssh-resource-card__title, .ssh-result-card__title, .ssh-guide-card__title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ssh-pillar-card__description, .ssh-topic-card__description, .ssh-resource-card__summary, .ssh-guide-card__description { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* Ensure images never break layout */ img { max-width: 100%; height: auto; } /* Empty editable areas show nothing in live mode */ .ssh-home__hero:empty, .ssh-home__featured:empty, .ssh-home__two-col:empty, .ssh-home__resources:empty, .ssh-home__cta:empty, .ssh-landing__hero:empty, .ssh-landing__intro:empty, .ssh-landing__grid:empty, .ssh-landing__additional:empty, .ssh-landing__cta:empty, .ssh-detail__hero:empty, .ssh-detail__content:empty, .ssh-detail__resources:empty, .ssh-detail__tools:empty, .ssh-detail__related:empty { display: none; } /* LandingPageTemplate wraps the promo/grid/additional editable-areas in an inner .container div, so the outer section is never strictly :empty even when the editable-area rendered no widgets. Collapse the whole section in that case (client feedback v1.1: "remove the random blank section" on /Safe-System). */ .ssh-landing__promo:has(> .container:empty), .ssh-landing__grid:has(> .container:empty), .ssh-landing__additional:has(> .container:empty) { display: none; } /* Featured Content section (PRD §3.7): hide the entire section when the ResourceList widget early-returned because no items are marked Featured. The widget root is .ssh-resource-list - its absence means OnlyFeatured yielded zero results. */ .ssh-home__featured-content:not(:has(.ssh-resource-list)) { display: none; } /* Hide empty home wrapper sections when the editable-area is empty. The template renders
- we collapse it when no inner widgets exist. */ .ssh-home__additional:not(:has(.ssh-section, .ssh-content-block, .ssh-resource-list, .row)) { display: none; } .ssh-home__featured-content:not(:has(.ssh-section, .ssh-content-block, .ssh-resource-list, .row)) { display: none; } /* Landing-page "Explore by X" grids (People, Road Environment, Crash Type, etc.). Multiple FeatureCards placed in a single SingleColumnSection zone are grid-laid: 3-up on desktop, 2-up on tablet, 1-up on mobile. Selector targets the col-12 wrapper that SingleColumnSection emits, scoped to template section wrappers that legitimately host multi-card zones. The DetailPageTemplate variants are required for /Safe-System/Vision-Zero-and-the-Safe-System and equivalent detail pages that use the same Single-column-section-with-N-cards pattern (client feedback v1.1: Safe System Elements section was overlay-dragging on the Vision Zero page because cards fell through to default stacking flow). */ .ssh-landing__grid .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-landing__additional .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__resources .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__examples .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__explore .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__content .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__tools .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } @media (max-width: 991px) { .ssh-landing__grid .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-landing__additional .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__resources .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__examples .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__explore .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__content .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__tools .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .ssh-landing__grid .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-landing__additional .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__resources .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__examples .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__explore .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__content .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-detail__tools .ssh-section .col-12:has(> .ssh-pillar-card + .ssh-pillar-card) { grid-template-columns: 1fr; } } /* Per-section grid column overrides (client feedback v1.1). The marker classes "ssh-grid-2up" and "ssh-grid-4up" are applied to the SingleColumnSection via its backgroundColorClass property in the seed JSON. The rule is parent-agnostic so it works under .ssh-landing__grid (Road Environment / Crash Type), .ssh-detail__resources (Guide to Road Safety Related Austroads Guides), and any future placement. The :has() clause matches a col-12 with multiple adjacent pillar cards. Specificity is high enough to win against the base 3-up rule without !important. */ .ssh-section.ssh-grid-2up .col-12:has(> .ssh-pillar-card + .ssh-pillar-card) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .ssh-section.ssh-grid-4up .col-12:has(> .ssh-pillar-card + .ssh-pillar-card) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } /* 5-up grid for the Safe System Elements row on /safe-system/vision-zero-and-the-safe-system (wireframe v4 p4) - five pillar cards in a single row on desktop. */ .ssh-section.ssh-grid-5up .col-12:has(> .ssh-pillar-card + .ssh-pillar-card) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } /* Safe System Elements card variant (publish.png) - gray header banner that covers the top of the card with the image/icon centred and floating across the banner/body boundary. Thin border around the whole card, white body, centred title and description. Activated by adding the `ssh-cards-banner` marker class to the section's backgroundColorClass. Inherits the default 3-up grid in .ssh-detail__resources so five cards lay out as 3+2. */ .ssh-section.ssh-cards-banner .ssh-pillar-card { border: 1px solid #d8dade; border-radius: 16px; /* design card radius = 16 */ padding: 6.2rem 1.5rem 2rem; /* content begins below the 99px band + icon */ text-align: center; align-items: center; position: relative; overflow: hidden; background: #ffffff; min-height: 280px; } .ssh-section.ssh-cards-banner .ssh-pillar-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6.2rem; /* design navy band = 99px */ /* Design (publish.png / style guide): the card top band is the navy Brand/Secondary, not orange. */ background: var(--ssh-secondary); } .ssh-section.ssh-cards-banner .ssh-pillar-card__icon, .ssh-section.ssh-cards-banner .ssh-pillar-card__image { position: relative; z-index: 1; width: 60px; /* design icon = 60x60 */ height: 60px; /* icon centre sits exactly on the band's bottom edge (design @(.,69), 60 tall) */ margin: -1.9rem auto 1.25rem; /* Design: orange (#CD4E27) icon squircle with a white glyph, sitting on the navy band — not a white box with an orange glyph. */ background-color: var(--ssh-primary) !important; border: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .ssh-section.ssh-cards-banner .ssh-pillar-card__icon .bi, .ssh-section.ssh-cards-banner .ssh-pillar-card__icon i { color: #ffffff !important; font-size: var(--ssh-fs-h3); /* #51: H3 scale (28px) */ } .ssh-section.ssh-cards-banner .ssh-pillar-card__image img { width: 100%; height: 100%; object-fit: cover; } .ssh-section.ssh-cards-banner .ssh-pillar-card__title { text-align: center; width: 100%; font-size: 1.25rem; /* design title = Extra Bold 20px */ font-weight: 800; margin-bottom: 0.5rem; } .ssh-section.ssh-cards-banner .ssh-pillar-card__description { text-align: center; width: 100%; } /* The "Learn more →" link is suppressed in this variant - title + description carry the message and the whole card is already a link. */ .ssh-section.ssh-cards-banner .ssh-pillar-card__link { display: none; } @media (max-width: 991px) { /* Tablet: 4-up collapses to 2-up to keep readable card widths. 2-up stays 2-up. 5-up collapses to 3-up so card widths stay readable. */ .ssh-section.ssh-grid-4up .col-12:has(> .ssh-pillar-card + .ssh-pillar-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ssh-section.ssh-grid-5up .col-12:has(> .ssh-pillar-card + .ssh-pillar-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 575px) { /* Mobile: everything 1-up. */ .ssh-section.ssh-grid-2up .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-section.ssh-grid-4up .col-12:has(> .ssh-pillar-card + .ssh-pillar-card), .ssh-section.ssh-grid-5up .col-12:has(> .ssh-pillar-card + .ssh-pillar-card) { grid-template-columns: 1fr; } } /* ---- Safe System Element subpage: "Explore Other Elements" quick-nav ---- Client feedback v1.1 / Task #6: appears at the bottom of each of the 5 element subpages. Five small cards in a row, one highlighted for the current element. */ /* bug/11.png #66: the "Explore Other Elements" heading should be H3 style — 28px / bold (700), not the default 36px / 800 section heading. Scoped via :has() to the cta-area that contains the element quick-nav, so only the element subpages are affected. */ .ssh-detail__cta:has(.ssh-element-nav) .ssh-section-heading__title { font-size: var(--ssh-fs-h3); /* 28px */ font-weight: 700; } /* bug/11.png #66: the top part (heading + subtitle) is left-aligned, not centred. */ .ssh-detail__cta:has(.ssh-element-nav) .ssh-section-heading { text-align: left; } .ssh-detail__cta:has(.ssh-element-nav) .ssh-section-heading__subtitle { margin-left: 0; margin-right: 0; } /* bug/8.png #82: element-nav cards are restyled as vertical pillar cards (see below). */ /* bug/11.png #64: the home "Resources and Tools" cards are title-only — drop the summary. */ .ssh-home__resources .ssh-pillar-card__description { display: none; } /* bug/11.png #65: each footer link fits on a single line. */ .ssh-footer__links a { white-space: nowrap; } .ssh-element-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; } .ssh-element-nav__card { /* bug/8.png #82: vertical "pillar card" style — navy top band holding an orange icon squircle, white footer with the centred label (matches the Pillars Cards design). */ display: flex; flex-direction: column; align-items: center; padding: 0; background: #fff; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); color: var(--ssh-heading); text-decoration: none; text-align: center; overflow: hidden; transition: all var(--ssh-transition); } .ssh-element-nav__card:hover { transform: translateY(-2px); box-shadow: var(--ssh-shadow-md); color: var(--ssh-heading); text-decoration: none; } /* Navy top band (Brand/Secondary #03293C) — the icon span IS the band. */ .ssh-element-nav__icon { flex-shrink: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 1.75rem 0; background: var(--ssh-secondary); } /* Orange squircle with a white glyph (design: 60x60, 8px radius). */ .ssh-element-nav__icon i { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 8px; background: var(--ssh-primary); color: #fff; font-size: var(--ssh-fs-h3); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } /* White footer with the centred, bold pillar name. */ .ssh-element-nav__label { display: block; width: 100%; padding: 1.1rem 0.75rem 1.35rem; background: #fff; font-weight: 800; font-size: 1rem; line-height: 1.3; color: var(--ssh-heading); } /* Current element — subtle accent ring, kept non-clickable. Design shows uniform cards, so no full-orange fill; the ring is just a wayfinding cue. */ .ssh-element-nav__card--current { outline: 2px solid var(--ssh-primary); outline-offset: -2px; pointer-events: none; } @media (max-width: 991px) { .ssh-element-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 575px) { .ssh-element-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Accordions inside the "How This Element Shapes Road Safety" tabs. The Bootstrap accordion defaults are usable as-is; add a small accent and link styling so the structure matches the rest of the site. */ .ssh-element-accordion { --bs-accordion-bg: #fff; --bs-accordion-border-color: var(--ssh-border); --bs-accordion-active-bg: var(--ssh-light-bg); --bs-accordion-active-color: var(--ssh-heading); --bs-accordion-btn-focus-box-shadow: 0 0 0 .15rem rgba(205, 78, 39, 0.25); } .ssh-element-accordion__link { padding-left: 0; color: var(--ssh-primary); font-weight: 600; text-decoration: none; } .ssh-element-accordion__link:hover { color: var(--ssh-primary); text-decoration: underline; } /* ---- Resources listing pagination (wireframe v4 page 10) ---- Wireframe shows a minimal "1 2 3 4 5" numbered row, not Bootstrap's default boxed buttons. Override the inherited .pagination/.page-link styling to match - clean numbers with the active page highlighted in SSH primary. */ .ssh-resources__pagination-nav .pagination { gap: 0.35rem; --bs-pagination-padding-x: 0; --bs-pagination-padding-y: 0; --bs-pagination-border-width: 0; --bs-pagination-border-radius: 999px; --bs-pagination-bg: transparent; --bs-pagination-color: var(--ssh-text); --bs-pagination-hover-bg: var(--ssh-light-bg); --bs-pagination-hover-color: var(--ssh-primary); --bs-pagination-active-bg: var(--ssh-primary); --bs-pagination-active-color: #fff; --bs-pagination-disabled-color: var(--ssh-border); --bs-pagination-disabled-bg: transparent; } .ssh-resources__pagination-nav .page-link { min-width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; font-weight: 500; font-size: 0.95rem; background: transparent; color: var(--ssh-text); transition: background-color var(--ssh-transition), color var(--ssh-transition); } .ssh-resources__pagination-nav .page-link:hover { background: var(--ssh-light-bg); color: var(--ssh-primary); text-decoration: none; } .ssh-resources__pagination-nav .page-link:focus { box-shadow: none; outline: 2px solid var(--ssh-primary); outline-offset: 2px; } .ssh-resources__pagination-nav .page-item.active .page-link { background: var(--ssh-primary); color: #fff; font-weight: 600; } .ssh-resources__pagination-nav .page-item.disabled .page-link { color: var(--ssh-border); pointer-events: none; background: transparent; } /* ---- Tool Detail topbar (wireframe v4 page 13) ---- "Launch Tool" CTA aligned to the top-right of the breadcrumb row. Populated by a small script in _ToolPageTemplate.cshtml that mirrors the side-card Open App URL. The earlier .ssh-tool-page__topbar* badge rules are kept as no-ops for any legacy template still emitting them. */ .ssh-tool-page__topbar-launch { margin-left: auto; } .ssh-tool-page__topbar-cta { padding: 0.5rem 1.2rem; font-weight: 600; border-radius: 8px; white-space: nowrap; } /* Topbar CTA mirror for _DetailPageTemplate (Technique "View Process") - matches the ToolPageTemplate topbar styling. */ .ssh-detail__topbar-cta { margin-left: auto; } .ssh-detail__topbar-cta-btn { padding: 0.5rem 1.2rem; font-weight: 700; /* #51: button labels 700 */ border-radius: 8px; white-space: nowrap; } /* ---- Resource Detail page (Tasks #10 + v4 wireframe alignment) ---- Type-aware layout served by ResourceController -> Views/Resource/Detail.cshtml. Header has type pill + author + title + metadata + tag pills (centered); Publications/Guides also get a right-side info card with the View Full Report CTA. Body section is tabs (Publications/Guides) or single section (Webinars/Projects/Case Studies). */ .ssh-resource-detail__topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .ssh-resource-detail__breadcrumb .breadcrumb { margin-bottom: 0; background: transparent; padding: 0; } .ssh-resource-detail__header-cta { padding: 0.55rem 1.4rem; font-weight: 600; border-radius: 8px; } .ssh-resource-detail__header { background: var(--ssh-light-bg); /* Normalize the grey tool-page header band to the standard 240px header height. */ min-height: 240px; display: flex; align-items: center; } .ssh-resource-detail__header > .container { width: 100%; } .ssh-resource-detail__type-pill { display: inline-block; background: var(--ssh-primary); color: #fff; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.45rem 1.1rem; border-radius: 999px; margin-bottom: 1.25rem; } /* Top row inside the structured header for Technique / Tool detail pages - type pill on the left, "View Process" / "Launch Tool" CTA on the right. */ .ssh-resource-detail__top-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .ssh-resource-detail__top-row .ssh-resource-detail__type-pill { margin-bottom: 0; } .ssh-resource-detail__author-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; color: var(--ssh-heading); font-size: 0.95rem; font-weight: 600; } .ssh-resource-detail__author { display: inline-flex; align-items: center; font-weight: 600; color: var(--ssh-heading); flex-shrink: 0; } .ssh-resource-detail__author .bi { margin-right: 0.4rem; font-size: 1rem; } /* Horizontal line between author (left) and date (right) - fills the space so the row reads as "Austroads ------------- 12 May 2021" (WF p16). */ .ssh-resource-detail__author-line { flex: 1 1 auto; height: 0; border-top: 1px solid #B5B3B0; min-width: 1rem; margin: 0 0.75rem; } .ssh-resource-detail__date { font-weight: 600; color: var(--ssh-heading); flex-shrink: 0; } .ssh-resource-detail__meta-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1rem; margin: 1.2rem 0 1.2rem; font-size: 0.95rem; } .ssh-resource-detail__meta-grid dt { color: var(--ssh-text); font-weight: 600; } .ssh-resource-detail__meta-grid dd { margin: 0; color: var(--ssh-heading); } .ssh-resource-detail__project-dates { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0.4rem 0 1rem; font-size: 0.95rem; } .ssh-resource-detail__project-dates strong { color: var(--ssh-text); font-weight: 600; margin-right: 0.3rem; } .ssh-resource-detail__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .ssh-resource-detail__tag { background: #fff; border: 1px solid var(--ssh-border); color: var(--ssh-text); border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.85rem; } /* bug/14.png/#15: page tag pills under the title on the orange tool/technique hero. */ .ssh-page-tags { margin-top: 0.85rem; } .ssh-resource-detail__sidecard { background: #fff; border: 1px solid var(--ssh-border); border-radius: var(--ssh-radius); padding: 1.5rem; box-shadow: var(--ssh-shadow-sm); } .ssh-resource-detail__sidecard-text { color: var(--ssh-text); margin-bottom: 1.2rem; font-size: 0.95rem; line-height: 1.5; } .ssh-resource-detail__sidecard-cta { width: 100%; padding: 0.7rem 1rem; font-weight: 600; } .ssh-resource-detail__related-heading { font-size: var(--ssh-fs-h2); /* #51: section H2 — 36px / 800 */ font-weight: 800; color: var(--ssh-heading); margin-bottom: 0.5rem; } .ssh-resource-detail__related-desc { max-width: 720px; margin: 0 auto 0; } /* ---- Wireframe v4 detail page (p16-p20) ---- 1. Light-grey HERO containing breadcrumb + section title. 2. For Publication/Guide/ResearchReport: a white "View Report" card is ABSOLUTELY positioned inside the hero, sized so 2/3 of it sits in the hero and ~1/4 of it overlaps INTO the publication card below (WF p16). 3. White section below the hero with a bordered metadata card. */ .ssh-resource-detail__hero { background: var(--ssh-light-bg); padding: 2rem 0 3.5rem; overflow: visible; } .ssh-resource-detail__hero-container { position: relative; } .ssh-resource-detail__hero .ssh-resource-detail__breadcrumb .breadcrumb { background: transparent; margin-bottom: 0; padding: 0; } .ssh-resource-detail__hero .breadcrumb a { color: var(--ssh-text); text-decoration: none; } .ssh-resource-detail__hero .breadcrumb-item.active { color: var(--ssh-text-light); } .ssh-resource-detail__hero-heading { font-size: 3rem; font-weight: 800; color: var(--ssh-heading); margin: 2.5rem 0 0; line-height: 1.1; max-width: calc(100% - 380px); /* leave room for the View Report card */ } /* The View Report card is absolutely positioned relative to the hero's .container so it aligns with the right edge of the grid. Its bottom extends well below the hero (-4rem) - combined with the publication card-wrap's small padding-top, this puts ~1/4 of the card height visually INSIDE the publication card below. */ .ssh-resource-detail__hero-cta { background: #fff; border: 1px solid var(--ssh-border); border-radius: 12px; padding: 1.75rem 1.75rem 2rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); width: 340px; /* Fixed min-height keeps the View Process / View Report side card the same size on every detail page (Publication, Technique, etc.) regardless of how long the disclaimer wraps. Title + 3 lines of disclaimer + button + padding ~= 17rem (272px). */ min-height: 17rem; display: flex; flex-direction: column; position: absolute; top: 1.5rem; right: var(--bs-gutter-x, 0.75rem); z-index: 3; } /* Push the button to the bottom of the card so the View Full Report stays anchored regardless of how the disclaimer wraps. */ .ssh-resource-detail__hero-cta-button { margin-top: auto; } .ssh-resource-detail__hero-cta-title { font-size: 1.05rem; font-weight: 700; color: var(--ssh-heading); margin-bottom: 0.4rem; } .ssh-resource-detail__hero-cta-text { font-size: 0.85rem; color: var(--ssh-text-light); line-height: 1.4; margin-bottom: 0.9rem; } .ssh-resource-detail__hero-cta-button { width: 100%; background: var(--ssh-charcoal); color: #fff; font-weight: 600; padding: 0.55rem 1rem; border-radius: 8px; display: inline-block; text-align: center; text-decoration: none; border: 0; } .ssh-resource-detail__hero-cta-button:hover { background: var(--ssh-primary); color: #fff; } .ssh-resource-detail__card-wrap { background: #fff; padding-top: 1.25rem; padding-bottom: 3rem; } .ssh-resource-detail__card { background: #fff; border: 1px solid var(--ssh-border); border-radius: 12px; padding: 3rem 3rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); display: flex; gap: 2.75rem; align-items: flex-start; min-height: 260px; } .ssh-resource-detail__card-icon { flex: 0 0 160px; height: 160px; background: var(--ssh-light-bg); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--ssh-charcoal); opacity: 0.65; font-size: 2.6rem; } .ssh-resource-detail__card-body { flex: 1 1 auto; min-width: 0; } .ssh-resource-detail__card .ssh-resource-detail__title { /* publish.png: item title = H2, 36px extrabold (800). */ font-size: var(--ssh-fs-h2); font-weight: 800; margin-top: 0.25rem; margin-bottom: 1.1rem; line-height: 1.15; letter-spacing: -0.3px; } /* publish.png: resource detail header = orange breadcrumb band (.ssh-breadcrumb-band, shared with every other page) merging into an orange title band, with a dark "View Guide" CTA card on the right (mirrors the RRST "Launch Tool" card). The card is taller than the title band, so it overflows into the gap ABOVE the white metadata card — the box then clears it, keeping the author/date row fully visible. Scoped to --brand so tool/technique pages (.ssh-resource-detail__hero--contained) are unaffected. */ .ssh-resource-detail__hero--brand { background: var(--ssh-primary); color: #fff; padding: 0; position: relative; overflow: visible; } .ssh-resource-detail__hero--brand .ssh-resource-detail__hero-flex { display: flex; align-items: flex-start; gap: 2.5rem; /* Design: orange Page header band = 240px tall including the 42px breadcrumb band, so the title band itself is a fixed 198px on EVERY resource type (with or without the CTA card). A taller card overflows below this band rather than stretching it. */ height: 198px; padding: 0; } .ssh-resource-detail__hero--brand .ssh-resource-detail__hero-heading { flex: 1 1 auto; color: #fff; max-width: none; margin: 0; align-self: center; /* H1 vertically centred in the 198px band (matches other heroes) */ /* Match the standard interior hero heading size (.ssh-hero__heading = 2.5rem). */ font-size: 2.5rem; line-height: 1.1; font-weight: 800; } /* Dark CTA card on the right of the orange band. It is top-aligned in the fixed 198px band; if it's taller than the band it overflows below into the gap above the white card (publish.png look), otherwise it sits within the band. */ .ssh-resource-detail__hero-cta--dark { flex: 0 0 340px; width: 340px; background: var(--ssh-charcoal); color: #fff; border-radius: 12px; padding: 1.5rem 1.5rem 1.75rem; /* Override the base card's absolute positioning / fixed 17rem height so it's a normal flex item that respects the 198px band height above. */ position: static; top: auto; right: auto; min-height: 0; margin-bottom: 0; z-index: 5; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); align-self: flex-start; } .ssh-resource-detail__hero-cta--dark .ssh-resource-detail__hero-cta-title { color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; } .ssh-resource-detail__hero-cta--dark .ssh-resource-detail__hero-cta-text { color: rgba(255, 255, 255, 0.8); font-size: 0.88rem; line-height: 1.4; margin-bottom: 1rem; } .ssh-resource-detail__hero-cta--dark .ssh-resource-detail__hero-cta-button { display: block; width: 100%; background: var(--ssh-primary); color: #fff; font-weight: 600; padding: 0.7rem 1rem; border-radius: 8px; text-align: center; } .ssh-resource-detail__hero-cta--dark .ssh-resource-detail__hero-cta-button:hover { background: #fff; color: var(--ssh-primary); } /* Gap above the white metadata card (also clears any slight overflow of a tall CTA card below the 198px band). */ .ssh-resource-detail__hero--brand + .ssh-resource-detail__card-wrap { padding-top: 2rem; } /* publish.png: technique detail header (TechniqueHeader widget) reuses the resource-detail orange band + white card. It renders inside a SingleColumnSection container, so break it out to full viewport width (the inner .container re-centres content). */ .ssh-technique-header { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* Cancel the wrapping SingleColumnSection's py-5 (3rem) top padding so the orange band sits flush under the breadcrumb (→ 240px, no white gap). */ margin-top: -3rem; } /* publish.png: tool detail header — launch card slot on the right of the orange band, styled dark to match the resource/technique CTA cards. */ .ssh-tool-page__launch-slot { flex: 0 0 340px; width: 340px; align-self: flex-start; } /* publish.png: tool hero shows just the title (left) + Launch Tool card (right). */ .ssh-tool-page__hero-main { flex: 1 1 auto; min-width: 0; align-self: center; } .ssh-tool-page__hero-main .ssh-section { padding: 0 !important; } .ssh-tool-page__hero-main .ssh-section > .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; } .ssh-tool-page__hero-main .ssh-resource-detail__hero-heading { margin: 0; } /* "View more about this topic" link in the Overview accordion. */ .ssh-tool-accordion__more { display: inline-block; margin-top: 1rem; color: var(--ssh-primary); font-weight: 700; text-decoration: none; } .ssh-tool-accordion__more:hover { text-decoration: underline; } /* publish.png: tool page tabs (Overview / When to Use / How to Use) share the full width equally with centered labels (not left-aligned). */ .ssh-tool-page__content .ssh-resource-detail__tabs .nav-item { flex: 1 1 0; min-width: 0; } .ssh-tool-page__content .ssh-resource-detail__tabs .nav-link { width: 100%; text-align: center; } /* publish.png: Guides & Manuals = full-width light-grey band with bordered white cards and an outlined-button CTA. */ .ssh-tool-page__guides { background: var(--ssh-light-bg); padding: 1.5rem 0 3.5rem; } .ssh-tool-page__guides .ssh-pillar-card { background: #fff; border: 1px solid var(--ssh-border); border-radius: 12px; padding: 2rem; box-shadow: var(--ssh-shadow-sm); height: 100%; text-align: left; align-items: flex-start; } .ssh-tool-page__guides .ssh-pillar-card__title { margin-top: 1rem; } .ssh-tool-page__guides .ssh-pillar-card__description { margin-bottom: 0; } .ssh-tool-page__guides .ssh-pillar-card__link { display: inline-block; margin-top: 1.5rem; padding: 0.55rem 1.4rem; border: 1px solid var(--ssh-primary); border-radius: 8px; color: var(--ssh-primary); font-weight: 600; } .ssh-tool-page__guides .ssh-pillar-card__link:hover { background: var(--ssh-primary); color: #fff; } .ssh-tool-page__launch-slot .ssh-resource-detail__sidecard { background: var(--ssh-charcoal); color: #fff; border: none; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); } .ssh-tool-page__launch-slot .ssh-resource-detail__sidecard-title { color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; } .ssh-tool-page__launch-slot .ssh-resource-detail__sidecard-text { color: rgba(255, 255, 255, 0.8); } /* The hero-area / launch-area seeded content is wrapped in a SingleColumnSection (.container); strip it so the content fills the white card body / launch slot. */ .ssh-tool-page__card .ssh-resource-detail__card-body > .ssh-section, .ssh-tool-page__launch-slot > .ssh-section { padding: 0 !important; } .ssh-tool-page__card .ssh-resource-detail__card-body > .ssh-section > .container, .ssh-tool-page__launch-slot > .ssh-section > .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; } /* Category is shown in the orange header, so hide the redundant pill in the white box. */ .ssh-tool-page__card .ssh-resource-detail__type-pill { display: none; } /* Contained hero variant - used when the technique/tool detail header is rendered INSIDE a Page Builder section (which adds .container > .row > .col-12). The plain .ssh-resource-detail__hero relies on being a top-level
so it can full-bleed; this variant adapts the same visual into a contained flex row that places the side card on the right. Padding is sized to give the wireframe v4 page 17 vertical breathing room around the heading and to leave space for the side card to overlap into the white area below. */ .ssh-resource-detail__hero--contained { display: flex; align-items: flex-start; gap: 2.5rem; /* Top padding sets the resting position of both the heading and the top of the side card. Bottom padding is zero so the side card's overflow sits directly on the metadata card below (no grey strip in between). */ padding: 3.5rem 3rem 0; border-radius: 12px; position: relative; overflow: visible; /* No gap - the metadata card sits right below the grey band and the side card's bottom 1/4 overlaps onto it (wireframe v4 page 17). */ margin-bottom: 0; /* Normalize the grey technique-page header band to the standard 240px header height (was 14rem/224px). The side card still overflows ~1/4 onto the metadata card below. */ min-height: 240px; } .ssh-resource-detail__hero--contained > .ssh-resource-detail__hero-heading { flex: 1 1 auto; max-width: none; margin: 0.5rem 0 0; font-size: 3.75rem; line-height: 1.05; } /* Inline side card - laid out by flex instead of absolute positioning. Extends well below the grey hero band so ~1/4 of the card overlaps onto the bordered metadata card below (wireframe v4 page 17). z-index keeps it on top of the metadata card; the metadata card's padding-right reserves space so its title/metadata text doesn't sit under the overlap. */ .ssh-resource-detail__hero-cta--inline { position: static; flex: 0 0 340px; width: 340px; /* Inherits min-height: 17rem from the base .ssh-resource-detail__hero-cta so Publication and Technique side cards are identical in size. */ margin: 0 0 -4rem; align-self: flex-start; z-index: 5; } /* Card-wrap variant - natural top position, no pull-up. The hero's own margin-bottom is what creates the gap above this card. */ .ssh-resource-detail__card-wrap--inline { background: #fff; padding: 0; margin-top: 0; } .ssh-resource-detail__card-wrap--inline { /* A small top padding pushes the bordered card down so the side card's overlap area is visible BEFORE the card starts. */ padding-top: 2rem; } .ssh-resource-detail__card-wrap--inline > .ssh-resource-detail__card { margin-top: 0; padding: 2.75rem 3rem; /* Reserve right-side padding so the side card overlapping from above doesn't sit on top of the metadata text. The reserved width matches the side card width (340px) plus a small breathing gap. */ padding-right: 23rem; position: relative; z-index: 1; } @media (max-width: 991.98px) { .ssh-resource-detail__card-wrap--inline > .ssh-resource-detail__card { padding-right: 1.25rem; } } @media (max-width: 991.98px) { .ssh-resource-detail__hero--contained { flex-direction: column; padding: 2rem 1.5rem 2.5rem; margin-bottom: 2rem; } .ssh-resource-detail__hero-cta--inline { flex: 0 0 auto; width: 100%; margin: 1rem 0 0; } } /* Inline meta rows: "Publication #: XX ISBN: YY" on a single line. */ .ssh-resource-detail__meta-inline { display: flex; flex-wrap: wrap; gap: 0.4rem 2.5rem; margin: 0.6rem 0 0.9rem; font-size: 1rem; color: var(--ssh-heading); } /* Publication # + ISBN sit on the same row, left-aligned with a fixed gap (wireframe v4 p16) - ISBN is NOT pushed to the far right edge. */ .ssh-resource-detail__meta-inline--split { gap: 0.5rem 4rem; } .ssh-resource-detail__meta-inline--stacked { flex-direction: column; gap: 0.5rem; } .ssh-resource-detail__meta-item strong { color: var(--ssh-text); font-weight: 600; margin-right: 0.4rem; } @media (max-width: 768px) { .ssh-resource-detail__hero-row { flex-direction: column; } .ssh-resource-detail__hero-cta { width: 100%; margin-bottom: 0; } .ssh-resource-detail__card-wrap { padding-top: 1.5rem; } .ssh-resource-detail__card { flex-direction: column; padding: 1.25rem; } .ssh-resource-detail__card-icon { width: 100%; flex-basis: auto; height: 100px; } .ssh-resource-detail__meta-inline { flex-direction: column; gap: 0.4rem; } } /* Legacy top section CSS - kept for any extant pages still using it. */ .ssh-resource-detail__top { background: #fff; } .ssh-resource-detail__cover img, .ssh-resource-detail__video img { width: 100%; height: auto; border-radius: var(--ssh-radius); box-shadow: var(--ssh-shadow-md); aspect-ratio: 4 / 3; object-fit: cover; } .ssh-resource-detail__video { position: relative; } .ssh-resource-detail__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 4rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); text-decoration: none; transition: transform var(--ssh-transition); } .ssh-resource-detail__play:hover { color: #fff; transform: scale(1.08); } .ssh-resource-detail__type-badge { background-color: var(--ssh-primary); color: #fff; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.4rem 0.85rem; } .ssh-resource-detail__title { /* publish.png: item title = H2, 36px extrabold (800). */ font-size: var(--ssh-fs-h2); font-weight: 800; color: var(--ssh-heading); margin-bottom: 1rem; line-height: 1.2; } .ssh-resource-detail__meta { font-size: 0.9rem; margin-bottom: 1.5rem; } .ssh-resource-detail__meta .bi { margin-right: 0.25rem; } .ssh-resource-detail__pills { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 1.5rem 0; font-size: 0.9rem; } .ssh-resource-detail__pills dt { color: var(--ssh-text); font-weight: 600; } .ssh-resource-detail__pills dd { margin: 0; color: var(--ssh-heading); } .ssh-resource-detail__download { padding: 0.65rem 1.5rem; font-weight: 600; } .ssh-resource-detail__download .bi { margin-right: 0.4rem; } .ssh-resource-detail__body { background: var(--ssh-light-bg); } /* Shared tab styling for Publication detail page (Views/Resource/Detail.cshtml) AND the TabInterface page-builder widget. Both emit Bootstrap nav-tabs markup with this class so typography, weights, font size, and underline are identical across all detail pages. */ .ssh-resource-detail__tabs { border-bottom: 2px solid var(--ssh-border); margin-bottom: 1.5rem; gap: 1.5rem; } .ssh-resource-detail__tabs .nav-link { color: var(--ssh-text-light); font-weight: 400; font-size: 1.5rem; border: none; border-bottom: 3px solid transparent; padding: 1rem 0.5rem; margin-bottom: -2px; } .ssh-resource-detail__tabs .nav-link:hover { border-color: transparent; color: var(--ssh-heading); } .ssh-resource-detail__tabs .nav-link.active { color: var(--ssh-heading); font-weight: 700; border-bottom-color: var(--ssh-primary); background: transparent; } .ssh-resource-detail__tab-panels { background: #fff; border-radius: var(--ssh-radius); padding: 1.5rem 1.75rem; box-shadow: var(--ssh-shadow-sm); } .ssh-resource-detail__section-title { font-size: 1.5rem; font-weight: 700; color: var(--ssh-heading); margin-bottom: 1rem; } .ssh-resource-detail__abstract { background: #fff; padding: 1.5rem 1.75rem; border-radius: var(--ssh-radius); box-shadow: var(--ssh-shadow-sm); } @media (max-width: 768px) { .ssh-resource-detail__title { font-size: 1.5rem; } } /* ---- Pillar Detail Page hero ---- Solid brand-orange band with white heading, left-aligned so it lines up with the logo and breadcrumb above. Matches the landing / resources / tools / contact wrappers' compact orange treatment. */ .ssh-detail__hero .ssh-hero { background-color: var(--ssh-primary) !important; text-align: left !important; justify-content: flex-start !important; } .ssh-detail__hero .ssh-hero__heading { color: #FFFFFF !important; text-align: left !important; } .ssh-detail__hero .ssh-hero__subheading { color: rgba(255, 255, 255, 0.92) !important; text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* Vertical padding override for the detail hero; horizontal width / padding come from the .container class so the heading lines up with the breadcrumb. */ .ssh-detail__hero .ssh-hero__content.container { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* "Why Matters" content block - right-column image placeholder card. The seeded ContentBlock markup is
so the right column collapses to a tiny floating icon without these rules. */ .ssh-why-matters__image { background: var(--ssh-hero-bg); border: 1px solid var(--ssh-border-cool); border-radius: 8px; min-height: 320px; height: 100%; display: flex; align-items: center; justify-content: center; } .ssh-why-matters__image .bi { font-size: 3rem; color: var(--ssh-text-light); opacity: 0.6; } /* Checkmark bullet list inside the Why Matters block. Replaces the default
    disc bullets with a dark filled circle + white check, matching wireframe. */ .ssh-why-matters__list { list-style: none; padding-left: 0; margin-top: 1.5rem; } .ssh-why-matters__list li { position: relative; padding-left: 2rem; margin-bottom: 0.75rem; color: var(--ssh-text); } .ssh-why-matters__list li::before { content: ''; position: absolute; left: 0; top: 0.25rem; width: 1.25rem; height: 1.25rem; background-color: var(--ssh-charcoal); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M13.485 1.929a.75.75 0 0 1 1.06 1.061l-8.485 8.486a.75.75 0 0 1-1.061 0L1.515 7.99a.75.75 0 1 1 1.061-1.06l3.41 3.41 7.5-7.41z'/%3E%3C/svg%3E"); background-size: 0.85rem; background-position: center; background-repeat: no-repeat; } /* ---- Shape Accordion (Pillar tab cards - wireframe v4 page 3) ---- Seeded inside TabInterfaceWidget tabs ("People" / "Road Environment" / "Crash Type" on pillar detail pages). The seed markup uses Bootstrap accordion classes plus .ssh-shape-accordion__* hooks; without the rules below the items render as a flush bootstrap list. */ .ssh-element-accordion .ssh-shape-accordion__item { background: #ffffff; border: 1px solid var(--ssh-border-cool); border-radius: 10px; margin-bottom: 1rem; overflow: hidden; } .ssh-element-accordion .ssh-shape-accordion__item:last-child { margin-bottom: 0; } /* Header button: thumb on left + bold title, default bootstrap +/- chevron on right. */ .ssh-element-accordion .ssh-shape-accordion__button { background: #ffffff; box-shadow: none; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; } .ssh-element-accordion .ssh-shape-accordion__button:not(.collapsed) { background: #ffffff; color: var(--ssh-heading); box-shadow: inset 0 -1px 0 var(--ssh-border-cool); } .ssh-element-accordion .ssh-shape-accordion__button:focus { box-shadow: 0 0 0 0.15rem rgba(60, 130, 220, 0.25); border-color: var(--ssh-focus); } /* Replace Bootstrap's default chevron with "+" (collapsed) / "×" (expanded) per wireframe v4 page 3. The default ::after rule uses a background-image SVG; we hide it (background-image: none, size: 0) and use a CSS ::before glyph instead. */ .ssh-element-accordion .ssh-shape-accordion__button::after { background-image: none !important; width: 0; height: 0; margin: 0; } .ssh-element-accordion .ssh-shape-accordion__button { position: relative; padding-right: 3rem; /* space for the absolute-positioned glyph on the right */ } .ssh-element-accordion .ssh-shape-accordion__button::before { content: '+'; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; color: var(--ssh-heading); font-weight: 400; } .ssh-element-accordion .ssh-shape-accordion__button:not(.collapsed)::before { content: '\00D7'; /* multiplication sign - looks like × */ font-size: 1.6rem; } /* Pillar Detail "How This Element Shapes Road Safety" tab strip - override the shared .ssh-resource-detail__tabs styling (left-aligned, orange underline) so the three tabs span equally across the full width with a charcoal underline, matching wireframe v4 page 3. Scoped to .ssh-detail__tabs so the Resource Detail page tabs keep their existing styling. */ .ssh-detail .ssh-resource-detail__tabs { gap: 0; border-bottom: 1px solid var(--ssh-border-cool); margin-bottom: 1.5rem; } .ssh-detail .ssh-resource-detail__tabs .nav-item { flex: 1 1 0; } .ssh-detail .ssh-resource-detail__tabs .nav-link { width: 100%; text-align: center; font-size: 1.5rem; padding: 1rem 0.5rem; border-bottom-width: 2px; } .ssh-detail .ssh-resource-detail__tabs .nav-link.active { border-bottom-color: var(--ssh-heading); } /* Remove the inner card chrome (white bg + shadow + padding) - the tab content on a pillar page is a free-form accordion that should sit flat against the section background, not inside an inner card. */ .ssh-detail .ssh-resource-detail__tab-panels { background: transparent; box-shadow: none; padding: 0; border-radius: 0; } /* Small square placeholder thumbnail in the header row. */ .ssh-element-accordion .ssh-shape-accordion__thumb { flex: 0 0 auto; width: 48px; height: 48px; background: var(--ssh-light-bg); border: 1px solid var(--ssh-border-cool); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } .ssh-element-accordion .ssh-shape-accordion__thumb .bi { font-size: 1.5rem; color: var(--ssh-text-light); opacity: 0.6; } .ssh-element-accordion .ssh-shape-accordion__title { font-weight: 700; color: var(--ssh-heading); font-size: 1.05rem; } /* Expanded body: wireframe shows just bullets + "View more" link (no body image). Hide the seeded ssh-shape-accordion__image placeholder. site.js injects a close "×" button at top-right (.ssh-shape-accordion__close) - position:relative makes the body the offset parent for that button. */ .ssh-element-accordion .ssh-shape-accordion__body { display: block; position: relative; padding: 2.5rem 1.5rem 1.5rem; } .ssh-element-accordion .ssh-shape-accordion__image { display: none; } .ssh-element-accordion .ssh-shape-accordion__content { color: var(--ssh-text); } /* Hide the header when the item is open - the body's injected × button takes over the close action. Restored after the previous regression where the close button vanished alongside the header. */ .ssh-element-accordion .ssh-shape-accordion__item:has(.accordion-collapse.show) .accordion-header { display: none; } /* Body-injected close button (added by site.js for every shape-accordion body on DOMContentLoaded). Sits top-right of the expanded card. */ .ssh-element-accordion .ssh-shape-accordion__close { position: absolute; top: 0.5rem; right: 0.75rem; width: 2rem; height: 2rem; border: none; background: transparent; color: var(--ssh-heading); font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .ssh-element-accordion .ssh-shape-accordion__close:hover { background: var(--ssh-light-bg); } /* Bulleted list inside the body - dark filled circle + white check, same pattern as .ssh-why-matters__list. */ .ssh-element-accordion .ssh-shape-accordion__list { list-style: none; padding-left: 0; margin: 0 0 0.75rem 0; } .ssh-element-accordion .ssh-shape-accordion__list li { position: relative; padding-left: 2rem; margin-bottom: 0.5rem; } .ssh-element-accordion .ssh-shape-accordion__list li::before { content: ''; position: absolute; left: 0; top: 0.2rem; width: 1.15rem; height: 1.15rem; background-color: var(--ssh-charcoal); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M13.485 1.929a.75.75 0 0 1 1.06 1.061l-8.485 8.486a.75.75 0 0 1-1.061 0L1.515 7.99a.75.75 0 1 1 1.061-1.06l3.41 3.41 7.5-7.41z'/%3E%3C/svg%3E"); background-size: 0.8rem; background-position: center; background-repeat: no-repeat; } /* "View More Details →" link below the content. */ .ssh-element-accordion .ssh-shape-accordion__link { display: inline-block; margin-top: 0.5rem; color: var(--ssh-heading); font-weight: 600; text-decoration: none; } .ssh-element-accordion .ssh-shape-accordion__link:hover { text-decoration: underline; color: var(--ssh-primary); } /* On small screens drop the body's deep left padding (no room for thumb-aligned indent). */ @media (max-width: 576px) { .ssh-element-accordion .ssh-shape-accordion__body { padding-left: 1.25rem; } } /* ---- ssh-road.pdf accordion ("How This Pillar Shapes Safety") ---- Bordered rounded items; header = magnifier icon + title + "N key points"; expanded shows orange check-circle bullets + an orange "View more" link. The header stays visible (Bootstrap chevron rotates). Style-guide colours. */ .ssh-element-accordion .ssh-acc-item { background: #ffffff; border: 1px solid var(--ssh-border, #E0DEDB); border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden; } .ssh-element-accordion .ssh-acc-item:last-child { margin-bottom: 0; } .ssh-element-accordion .ssh-acc-btn { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: #ffffff; box-shadow: none; font-weight: 500; } .ssh-element-accordion .ssh-acc-btn:not(.collapsed) { background: #ffffff; color: var(--ssh-heading); box-shadow: inset 0 -1px 0 var(--ssh-border, #E0DEDB); } .ssh-element-accordion .ssh-acc-btn:focus { box-shadow: 0 0 0 0.15rem rgba(205, 78, 39, 0.20); border-color: var(--ssh-primary); } /* Magnifier icon square — light neutral box, orange glyph. */ .ssh-element-accordion .ssh-acc-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; background: var(--ssh-light-bg, #F5F4F2); display: inline-flex; align-items: center; justify-content: center; } .ssh-element-accordion .ssh-acc-ico .bi { font-size: 1.15rem; color: var(--ssh-primary, #CD4E27); } .ssh-element-accordion .ssh-acc-head { display: flex; flex-direction: column; flex: 1 1 auto; text-align: left; } .ssh-element-accordion .ssh-acc-title { font-weight: 700; color: var(--ssh-heading, #222222); font-size: 1.05rem; line-height: 1.2; } .ssh-element-accordion .ssh-acc-sub { color: var(--ssh-text-light, #6B6A67); font-size: 0.85rem; margin-top: 0.15rem; } .ssh-element-accordion .ssh-acc-body { padding: 0.5rem 1.5rem 1.5rem 4.45rem; /* align bullets under the title, not the icon */ } .ssh-element-accordion .ssh-acc-link { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ssh-primary, #CD4E27); font-weight: 600; text-decoration: none; margin-top: 0.35rem; } .ssh-element-accordion .ssh-acc-link:hover { text-decoration: underline; } @media (max-width: 576px) { .ssh-element-accordion .ssh-acc-body { padding-left: 1.25rem; } } /* ---- Guide to Road Safety - wireframe v4 p8 master-detail parts list ---- Left rail lists all seven parts, right pane shows the active part with an image placeholder, title, body and "View More" link. Uses Bootstrap pills for the click behaviour. */ /* Figma: each part entry is a bordered rounded box (8px) = a "0N" number square + the part name. The whole box, the number and the name turn orange when active; inactive boxes have a light neutral border. */ .ssh-guide-rail { gap: 0.6rem; } .ssh-guide-rail .ssh-guide-rail__item { border: 1px solid var(--ssh-border, #E0DEDB); border-radius: 8px; color: var(--ssh-heading, #222222); padding: 0.7rem 1rem; background: #FFFFFF; font-weight: 500; text-align: left; display: flex; align-items: center; gap: 0.85rem; transition: border-color var(--ssh-transition), color var(--ssh-transition); } .ssh-guide-rail .ssh-guide-rail__num { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border: 1px solid var(--ssh-border, #E0DEDB); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; color: var(--ssh-text-light, #6B6A67); background: #FFFFFF; } .ssh-guide-rail .ssh-guide-rail__label { font-size: 1rem; line-height: 1.25; } .ssh-guide-rail .ssh-guide-rail__item:hover { border-color: var(--ssh-primary, #CD4E27); } .ssh-guide-rail .ssh-guide-rail__item.active { background: #FFFFFF; border-color: var(--ssh-primary, #CD4E27); color: var(--ssh-primary, #CD4E27); font-weight: 600; } .ssh-guide-rail .ssh-guide-rail__item.active .ssh-guide-rail__num { border-color: var(--ssh-primary, #CD4E27); color: var(--ssh-primary, #CD4E27); } /* Figma "Pillars Cards" detail panel: a card with a full-width image banner on top, then the content (eyebrow / title / paragraph / CTA) below. */ .ssh-guide-detail .ssh-guide-pane { border: 1px solid #E5E5E5; border-radius: 12px; padding: 0; background: #FFFFFF; overflow: hidden; } /* guide.fig: the rail and the detail panel are EQUAL height (both 508 in the design). The row stretches its columns; make the tab-content + active pane fill that height so the white panel lines up top-and-bottom with the rail. */ .ssh-guide-master-detail { align-items: stretch; } .ssh-guide-detail { height: 100%; } .ssh-guide-detail > .ssh-guide-pane.active, .ssh-guide-detail > .ssh-guide-pane.show.active { height: 100%; } /* publish.png: split panel — text on the left, branded cover on the right. */ .ssh-guide-pane__inner { display: flex; align-items: stretch; height: 100%; min-height: 380px; } .ssh-guide-pane__body { flex: 1 1 52%; min-width: 0; padding: 2.25rem 2.5rem; display: flex; flex-direction: column; justify-content: center; } /* Right-hand branded cover: the part photo + caption + big number watermark. */ .ssh-guide-pane__cover { flex: 0 0 46%; position: relative; overflow: hidden; background: var(--ssh-secondary, #03293C); } .ssh-guide-pane__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .ssh-guide-pane__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 41, 60, 0.62) 0%, rgba(3, 41, 60, 0.15) 38%, rgba(3, 41, 60, 0.42) 100%); } .ssh-guide-pane__cover-meta { position: absolute; top: 1.25rem; left: 1.35rem; right: 1.35rem; z-index: 1; color: #ffffff; display: flex; flex-direction: column; gap: 0.15rem; } .ssh-guide-pane__cover-kicker { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.9; } .ssh-guide-pane__cover-name { font-size: 1.05rem; font-weight: 700; line-height: 1.2; } .ssh-guide-pane__cover-num { position: absolute; right: 0.75rem; bottom: -1.75rem; z-index: 1; font-size: 10rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, 0.22); pointer-events: none; } @media (max-width: 767px) { .ssh-guide-pane__inner { flex-direction: column; } .ssh-guide-pane__cover { flex-basis: auto; min-height: 220px; } .ssh-guide-pane__body { flex-basis: auto; } } .ssh-guide-pane__eyebrow { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ssh-primary, #CD4E27); margin-bottom: 0.35rem; } .ssh-guide-pane__body p { color: var(--ssh-text, #4F4F4F); margin-bottom: 1rem; } .ssh-guide-pane__title { font-size: 1.25rem; font-weight: 800; /* design Extra Bold */ margin-bottom: 0.75rem; } /* "Safe System in Practice" framework diagram (Figma image swap for the wheel). */ .ssh-guide-framework { /* figure1.png: the near-square concentric Safe System Venn — a modest centred width suits it better than the old wide hub-and-spoke diagram. */ max-width: 560px; width: 100%; height: auto; } /* publish.png: the panel CTA is an orange OUTLINE "View Guide" button. */ .ssh-guide-pane__cta { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; background: transparent; color: var(--ssh-primary, #CD4E27); border: 1.5px solid var(--ssh-primary, #CD4E27); font-weight: 700; padding: 0.55rem 1.25rem; border-radius: 8px; text-decoration: none; margin-top: 0.5rem; transition: background var(--ssh-transition), color var(--ssh-transition); } .ssh-guide-pane__cta:hover { background: var(--ssh-primary, #CD4E27); color: #FFFFFF; text-decoration: none; } /* ---- Issue #46/#48: resource slider (carousel) with pagination dots ---- */ .ssh-carousel { position: relative; } .ssh-carousel__viewport { overflow: hidden; } .ssh-carousel__track { display: flex; gap: 24px; transition: transform 0.3s ease; } .ssh-carousel__slide { /* Columns per view are driven by --ssh-cols, set inline on .ssh-carousel from the widget's CarouselColumns property and inherited here (fallback 3 when unset). Issues #46/#48: subpage sliders set it to 2. Gap total is (cols - 1) * 24px. */ flex: 0 0 calc((100% - (var(--ssh-cols, 3) - 1) * 24px) / var(--ssh-cols, 3)); min-width: 0; } @media (max-width: 768px) { .ssh-carousel__slide { flex: 0 0 calc((100% - 24px) / 2); } /* 2 per view */ } @media (max-width: 576px) { .ssh-carousel__slide { flex: 0 0 100%; } /* 1 per view */ } /* p3.png: Relevant Tools = a 1-up carousel of large image-left feature cards. */ .ssh-relevant-tools__carousel .ssh-carousel__slide { flex: 0 0 100%; } .ssh-relevant-tools__feature { display: flex; width: 100%; background: #fff; border: 1px solid var(--ssh-border); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--ssh-shadow-sm); transition: box-shadow 0.2s ease; } .ssh-relevant-tools__feature:hover { box-shadow: var(--ssh-shadow-md); } .ssh-relevant-tools__feature-image { position: relative; flex: 0 0 44%; background: var(--ssh-light-bg); display: flex; align-items: center; justify-content: center; color: var(--ssh-text-light); font-size: 3rem; min-height: 300px; } .ssh-relevant-tools__feature-badge { position: absolute; top: 1.25rem; right: 1.25rem; background: #fff; border-radius: 6px; padding: 0.35rem 0.85rem; font-size: 0.85rem; font-weight: 600; color: var(--ssh-heading); box-shadow: var(--ssh-shadow-sm); } .ssh-relevant-tools__feature-body { flex: 1 1 auto; padding: 2.5rem 2.75rem; display: flex; flex-direction: column; justify-content: center; } .ssh-relevant-tools__feature-author { display: flex; align-items: center; gap: 0.45rem; color: var(--ssh-text-light); font-weight: 600; font-size: 0.95rem; margin-bottom: 1rem; } .ssh-relevant-tools__feature-title { font-size: var(--ssh-fs-h4); font-weight: 800; color: var(--ssh-heading); margin-bottom: 0.85rem; line-height: 1.2; } .ssh-relevant-tools__feature-desc { color: var(--ssh-text); line-height: 1.6; margin-bottom: 1.5rem; } .ssh-relevant-tools__feature-link { color: var(--ssh-primary); font-weight: 700; } @media (max-width: 768px) { .ssh-relevant-tools__feature { flex-direction: column; } .ssh-relevant-tools__feature-image { flex: 0 0 auto; min-height: 200px; } } .ssh-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; } .ssh-carousel__dots { display: flex; gap: 0.5rem; align-items: center; } .ssh-carousel__dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--ssh-border); cursor: pointer; padding: 0; transition: background var(--ssh-transition), transform var(--ssh-transition); } .ssh-carousel__dot--active { background: var(--ssh-primary); transform: scale(1.2); } .ssh-carousel__btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ssh-border); background: #fff; color: var(--ssh-heading); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--ssh-transition); } .ssh-carousel__btn:hover { background: var(--ssh-primary); color: #fff; border-color: var(--ssh-primary); } /* Issues #27/#30: Bootstrap Icons 1.11.3 has no motorcycle glyph. Render a custom motorcycle SVG via , masked in currentColor so it inherits the card's icon colour exactly like a real bi-* glyph. */ .bi-motorcycle-custom::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask: url("/images/icons/motorcycle.svg") center / contain no-repeat; mask: url("/images/icons/motorcycle.svg") center / contain no-repeat; } /* Issue #50: webinar embedded video. Bootstrap .ratio handles the 16:9 box; these rules round the corners and style the "no video yet" placeholder. */ .ssh-resource-detail__video .ssh-video-embed { border-radius: var(--ssh-radius); overflow: hidden; background: #000; } .ssh-video-embed--placeholder { background: var(--ssh-light-bg, #f5f4f2); border: 1px dashed var(--ssh-border, #e0dedb); } .ssh-video-embed--placeholder .bi-play-circle { font-size: 3rem; color: var(--ssh-text-light, #6b6a67); margin-bottom: 0.5rem; } /* ---- Page Builder Admin Styles ---- */ .ktc-editable-area { min-height: 60px; }