/* ===================================================================
TRUST — Design tokens
=================================================================== */
:root {
/* Layout */
--content-width: 80%;
--content-max-width: 1080px;
/* Shared max-width for all page content EXCEPT the homepage
(hero/body inners on Use Cases, Events, Partners, News,
Resources, Legal, Contact...). */
--page-max-width: 1280px;
/* Scale */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;
}
/* ==========================================================================
TRUST Custom Theme — Main Stylesheet
========================================================================== */
/* -------------------- Global overflow guard --------------------
Several full-bleed sections use `width: 100vw; left: 50%;
transform: translateX(-50%)`. `100vw` includes the vertical
scrollbar width, so those sections end up a few pixels wider than
the viewport and Chrome/Edge show a permanent horizontal scrollbar.
The site header is `position: fixed`, so clipping horizontal
overflow on is safe. Kept off so that
`position: sticky` descendants keep working. */
html {
overflow-x: hidden;
scroll-behavior: smooth; /* smooth in-page jumps, e.g. the Legal page's "On this page" TOC */
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
html,
body {
max-width: 100%;
}
/* -------------------- Breadcrumb --------------------
One shared style for every hero/header breadcrumb (Use Cases,
Events, Partners, News, Resources, Legal, Contact, and their
single-item pages). Every hero sits on a dark background, so a
single light treatment works everywhere.
Markup:
*/
.trust-breadcrumb {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 24px;
}
.trust-breadcrumb a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.2s ease;
}
.trust-breadcrumb a:hover {
color: #ffffff;
}
.trust-breadcrumb-sep {
margin: 0 8px;
color: rgba(255, 255, 255, 0.4);
}
.trust-breadcrumb [aria-current="page"] {
color: rgba(255, 255, 255, 0.9);
}
/* -------------------- Hero Section -------------------- */
.trust-hero {
background: linear-gradient(135deg, #1F5F8B 0%, #7EC8E3 100%);
padding: var(--space-xl) 7%;
/*
padding-bottom: 4vw;
padding-top: 6vw;
*/
padding-top: 50px;
padding-bottom: 24px;
}
/*
@media only screen and (min-width: 1350px) {
.trust-hero {
padding-top: var(--space-xl);
}
} */
.trust-hero-inner {
width: var(--content-width);
max-width: var(--content-max-width);
margin: 0 auto;
text-align: center;
}
.trust-hero-logo {
max-width: 480px;
width: 100%;
height: auto;
margin-bottom: 40px;
}
.trust-hero-heading {
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 53px;
font-weight: 500;
color: #FFFFFF;
line-height: 1.2;
margin-top: 0;
margin-bottom: var(--space-md);
}
.trust-hero-subtext {
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 500;
color: #FFFFFF;
margin: 0 auto;
}
/* -------------------- Hero Section — mobile -------------------- */
/* Add inside the existing @media (max-width: 767px) block for
Our Vision (or as a new block right after it) — removes the
80%-width + auto-margin wrapper so .trust-wwa can sit flush. */
@media (max-width: 767px) {
.trust-wwa-row {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.trust-wwa-label, h2.trust-wwa-title {
text-align: center;
}
.trust-wwa-text {
margin-bottom: 0;
}
}
@media (max-width: 700px) {
.trust-hero-logo {
max-width: 210px;
margin-bottom: 0;
margin-top: 20px;
}
.trust-hero-inner {
width: unset;
}
h1.trust-hero-heading {
font-size: 28px;
}
p.trust-hero-subtext {
font-size: 14px;
line-height: 1.6;
}
}
/* -------------------- Our Vision Section -------------------- */
.trust-wwa,
.trust-wwa * {
box-sizing: border-box;
}
.trust-wwa-row {
width: var(--content-width);
max-width: var(--content-max-width);
margin: 50px auto 0;
}
.trust-wwa {
box-sizing: border-box;
padding: 50px 7% 40px 7%;
background-color: #F7FCF2;
position: relative;
}
/* Clearfix: expands .trust-wwa to contain the floated .trust-wwa-right
without clipping its intentional bottom overflow (see below). */
.trust-wwa::after {
content: "";
display: table;
clear: both;
}
.trust-wwa-left {
padding-top: 10px;
}
.trust-wwa-label {
display: block;
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #1F5F8B;
margin-bottom: 20px;
}
.trust-wwa-title {
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 400;
line-height: 1.18;
color: #1F5F8B;
margin-top: 0;
margin-bottom: 28px;
}
.trust-wwa-text {
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.85;
color: #555;
}
/* Floated so the body text wraps beside it and, once past its
bottom edge, flows the full width of the column instead of
leaving empty space under a shorter (16:9) video poster.
margin-bottom must stay positive: a negative value shrinks the
float's exclusion zone and lets text creep back under the image
before it visually clears. */
.trust-wwa-right {
float: right;
width: 44%;
margin: 0 0 28px 60px;
margin-left: 20px;
position: relative;
border-radius: 4px;
overflow: hidden;
z-index: 10;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.trust-wwa-right img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.trust-wwa-right::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60%;
background: linear-gradient(to top, rgba(8, 25, 45, 0.88), transparent);
pointer-events: none;
z-index: 1;
}
.trust-vision-video__poster-btn {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
position: relative;
}
.trust-vision-video__poster-btn img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.trust-vision-video__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72px;
height: 72px;
border-radius: 50%;
background-color: rgba(16, 62, 97, 0.9);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.trust-vision-video__play svg {
width: 28px;
height: 28px;
}
.trust-vision-video__poster-btn:hover .trust-vision-video__play,
.trust-vision-video__poster-btn:focus-visible .trust-vision-video__play {
background-color: #1F5F8B;
transform: translate(-50%, -50%) scale(1.08);
}
.pg-video-modal {
display: none;
position: fixed;
z-index: 1000;
inset: 0;
background: rgba(13, 59, 94, 0.5);
backdrop-filter: blur(5px);
align-items: center;
justify-content: center;
}
.pg-video-modal.is-active {
display: flex;
}
.pg-video-modal__content {
position: relative;
width: 95%;
max-width: 1000px;
aspect-ratio: 16 / 9;
background-color: #000;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
.pg-video-modal__frame-container {
width: 100%;
height: 100%;
}
.pg-video-modal__frame-container iframe {
width: 100%;
height: 100%;
border: none;
}
.pg-video-modal__close {
position: absolute;
top: -50px;
right: 0;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background-color: #fff;
color: #1F5F8B;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.pg-video-modal__close svg {
width: 18px;
height: 18px;
}
.pg-video-modal__close:hover {
background-color: #1F5F8B;
color: #fff;
}
@media (max-width: 768px) {
.pg-video-modal__close {
top: -45px;
width: 35px;
height: 35px;
}
}
@media (max-width: 900px) {
.trust-wwa {
display: flex;
flex-direction: column;
width: 90%;
padding-bottom: 60px;
}
.trust-wwa-left {
order: 1;
}
.trust-wwa-right {
order: 2;
float: none;
width: 100%;
margin-left: 0;
margin-bottom: 24px;
}
.trust-wwa-title {
font-size: 32px;
}
}
@media (max-width: 767px) {
.trust-wwa {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
padding: 24px 16px 32px !important;
}
.trust-wwa-left {
order: 1;
padding-top: 0 !important;
}
.trust-wwa-right {
order: 2;
float: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-bottom: 24px !important;
}
.trust-wwa-right img,
.trust-vision-video__poster-btn img {
height: auto !important;
}
.trust-wwa-title {
font-size: 28px !important;
}
}
/* -------------------- What TRUST Delivers Section -------------------- */
.trust-wtd-wrap,
.trust-wtd-wrap * {
box-sizing: border-box;
}
.trust-wtd-wrap {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: #0d2d4a;
padding: 80px 0 88px;
}
.trust-wtd {
max-width: var(--page-max-width); /* aligned with the footer (1280px) */
margin: 0 auto;
padding: 0 48px;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-wtd-header {
text-align: left;
margin-bottom: 56px;
max-width: 760px;
}
.trust-wtd-eyebrow {
display: block;
font-size: 16px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: white;
margin-bottom: 20px;
}
.trust-wtd-title {
font-size: 36px;
font-weight: 400;
color: white;
line-height: 1.18;
letter-spacing: -0.3px;
margin-bottom: 18px;
}
.trust-wtd-intro {
font-size: 14.5px;
line-height: 1.72;
color: rgba(255, 255, 255, 0.68);
}
.trust-wtd-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
overflow: hidden;
}
.trust-wtd-pillar {
border-right: 1px solid rgba(255, 255, 255, 0.12);
padding: 0 0 8px;
}
.trust-wtd-pillar:last-child {
border-right: none;
}
.trust-wtd-pillar-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #B8D94A;
padding: 22px 28px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
margin-bottom: 4px;
text-align: center;
}
.trust-wtd-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition: background 0.18s;
}
.trust-wtd-item:last-child {
border-bottom: none;
}
.trust-wtd-item:hover {
background: rgba(255, 255, 255, 0.04);
}
.trust-wtd-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
background: rgba(184, 217, 74, 0.12);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.trust-wtd-icon svg {
width: 18px;
height: 18px;
stroke: #B8D94A;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.trust-wtd-item-title {
font-size: 13.5px;
font-weight: 600;
color: #ffffff;
line-height: 1.3;
margin-bottom: 5px;
}
.trust-wtd-item-desc {
font-size: 12.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.58);
}
@media (max-width: 860px) {
.trust-wtd-pillars {
grid-template-columns: 1fr;
border-radius: 10px;
}
.trust-wtd-pillar {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.trust-wtd-pillar:last-child {
border-bottom: none;
}
}
@media (max-width: 767px) {
.trust-wtd-wrap {
padding-top: 40px !important;
padding-bottom: 40px;
}
.trust-wtd-eyebrow, .trust-wtd-title {
text-align: center;
}
.trust-wtd-header {
margin-bottom: 30px;
}
.trust-wtd-intro {
text-align: justify;
}
}
@media (max-width: 540px) {
.trust-wtd {
padding: 0 20px;
}
.trust-wtd-title {
font-size: 26px;
}
.trust-wtd-item {
padding: 16px 20px;
}
.trust-wtd-pillar-title {
padding: 18px 20px 14px;
}
}
/* -------------------- Who TRUST Serves Section -------------------- */
.trust-wts-wrap,
.trust-wts-wrap * {
box-sizing: border-box;
}
.trust-wts-wrap {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: #EBEBEB;
padding: 70px 0 90px;
}
.trust-wts {
max-width: var(--page-max-width); /* aligned with the footer (1280px) */
margin: 0 auto;
padding: 0 48px;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-wts-eyebrow {
font-size: 16px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #1F5F8B;
margin-bottom: 12px;
}
.trust-wts-title {
font-size: 36px;
font-weight: 400;
color: #1F5F8B;
line-height: 1.18;
letter-spacing: -0.3px;
margin-bottom: 48px;
}
.trust-wts-tabs-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-top: 1px solid #d0d4d8;
background: #f8f8f8;
margin-bottom: 0;
}
.trust-wts-tab-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px 10px 16px;
cursor: pointer;
background: #f8f8f8;
border: none;
border-right: 1px solid #d0d4d8;
border-bottom: 3px solid transparent;
color: #888;
font-family: inherit;
font-size: 13px;
font-weight: 400;
line-height: 1.3;
text-align: center;
transition: color 0.2s, border-color 0.2s;
}
.trust-wts-tab-btn:last-child {
border-right: none;
}
.trust-wts-tab-btn:hover {
color: #1a1a2e;
}
.trust-wts-tab-btn.is-active {
color: #1a1a2e;
border-bottom: 3px solid #1F5F8B;
background: #f8f8f8;
}
.trust-wts-tab-icon {
display: flex;
opacity: 0.4;
transition: opacity 0.2s;
}
.trust-wts-tab-icon svg {
width: 30px;
height: 30px;
}
.trust-wts-tab-btn:hover .trust-wts-tab-icon,
.trust-wts-tab-btn.is-active .trust-wts-tab-icon {
opacity: 0.7;
}
.trust-wts-tabs-bottom-border {
border-top: 1px solid #d0d4d8;
margin-bottom: 32px;
}
.trust-wts-panel {
display: none;
}
.trust-wts-panel.is-active {
display: grid;
grid-template-columns: 46% 54%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
animation: trust-wts-fade-in 0.25s ease;
}
@keyframes trust-wts-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.trust-wts-panel-text {
background: #fff;
padding: 50px 44px 44px;
display: flex;
flex-direction: column;
}
.trust-wts-panel-title {
font-size: 30px;
font-weight: 400;
color: #1a1a2e;
line-height: 1.2;
margin-bottom: 20px;
letter-spacing: -0.3px;
}
.trust-wts-panel-content {
font-size: 13.5px;
color: #4a5568;
line-height: 1.68;
flex-grow: 1;
margin-bottom: 22px;
}
.trust-wts-panel-content p:last-child {
margin-bottom: 0;
}
.trust-wts-panel-content strong,
.trust-wts-panel-content h2,
.trust-wts-panel-content h3,
.trust-wts-panel-content h4 {
color: #1a1a2e;
}
.trust-wts-panel-content h4 {
font-size: 13.5px;
font-weight: 700;
margin-bottom: 7px;
margin-top: 22px;
}
.trust-wts-panel-content a {
color: #1F5F8B;
text-decoration: underline;
}
.trust-wts-panel-cta {
display: inline-block;
background: #B8D94A;
color: #0d1f0a;
font-size: 13px;
font-weight: 600;
padding: 12px 22px;
border-radius: 6px;
text-decoration: none;
align-self: flex-start;
transition: background 0.18s;
}
.trust-wts-panel-cta:hover {
background: #a5c83a;
}
.trust-wts-panel-image {
position: relative;
background: linear-gradient(140deg, #0c2e4a 0%, #1a4f72 50%, #081c2e 100%);
min-height: 360px;
overflow: hidden;
}
.trust-wts-panel-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.trust-wts-img-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 60px 26px 24px;
background: linear-gradient(transparent, rgba(4, 16, 28, 0.80));
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
z-index: 2;
}
.trust-wts-img-arrow {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: #B8D94A;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
text-decoration: none;
transition: background 0.18s;
}
.trust-wts-img-arrow:hover {
background: #a5c83a;
}
.trust-wts-img-arrow svg {
width: 17px;
height: 17px;
}
@media (max-width: 800px) {
.trust-wts-title {
font-size: 32px;
}
.trust-wts-panel.is-active {
grid-template-columns: 1fr;
}
.trust-wts-panel-image {
min-height: 240px;
}
.trust-wts-tabs-row {
grid-template-columns: repeat(3, 1fr);
overflow-x: auto;
}
}
@media (max-width: 767px) {
.trust-wts-tabs-row {
display: flex !important;
flex-direction: column !important;
border: 1px solid #d0d4d8 !important;
border-radius: 8px !important;
overflow: hidden !important;
background: #f8f8f8 !important;
}
.trust-wts-tab-btn {
flex-direction: row !important;
justify-content: flex-start !important;
gap: 14px !important;
padding: 14px 18px !important;
border-right: none !important;
border-bottom: 1px solid #d0d4d8 !important;
border-left: 4px solid transparent !important;
font-size: 14px !important;
text-align: left !important;
}
.trust-wts-tab-btn:last-child {
border-bottom: none !important;
}
.trust-wts-tab-btn.is-active {
border-left: 4px solid #1F5F8B !important;
border-bottom: 1px solid #d0d4d8 !important;
background: #fff !important;
}
.trust-wts-panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 24px;
}
.trust-wts-tab-icon {
width: 24px !important;
height: 24px !important;
flex-shrink: 0 !important;
}
.trust-wts-wrap {
padding-top: 10px;
text-align: center;
}
.trust-wts-title {
margin-bottom: 24px;
}
.trust-wts-panel-content {
text-align: justify;
}
.trust-wts-tabs-bottom-border {
margin-bottom: 15px;
}
}
@media (max-width: 500px) {
.trust-wts {
padding: 0 16px;
}
.trust-wts-wrap {
padding: 44px 0 56px;
padding-top: 10px;
}
.trust-wts-title {
font-size: 26px;
}
.trust-wts-panel-text {
padding: 30px 22px;
}
}
/* -------------------- How TRUST Works Section -------------------- */
.trust-htw-wrap,
.trust-htw-wrap * {
box-sizing: border-box;
}
.trust-htw-wrap {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: #EBEBEB;
padding: 60px 0;
overflow-x: hidden;
}
.trust-htw {
max-width: 1160px;
margin: 0 auto;
padding: 0 40px;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
position: relative;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
}
.trust-htw-img-left {
position: absolute;
left: 0;
top: -60px;
width: 38%;
height: 580px;
object-fit: cover;
display: block;
z-index: 1;
}
.trust-htw-img-right {
position: absolute;
right: 0;
bottom: -60px;
width: 38%;
height: 580px;
object-fit: cover;
display: block;
z-index: 1;
}
.trust-htw-card {
position: relative;
width: 52%;
z-index: 10;
background: #1F5F8B;
border-radius: 10px;
padding: 40px 48px 44px;
color: #fff;
box-shadow: 0 16px 56px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
}
.trust-htw-eyebrow {
font-size: 16px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
margin-bottom: 12px;
}
.trust-htw-title {
font-size: 36px;
font-weight: 300;
color: #fff;
line-height: 1.18;
letter-spacing: -0.3px;
margin-bottom: 0;
margin-top: 2px;
}
.trust-htw-body {
font-size: 14px;
color: rgba(255, 255, 255, 0.80);
line-height: 1.68;
margin-bottom: 26px;
}
.trust-htw-body p {
margin-bottom: 0;
}
.trust-htw-body p:last-child {
margin-bottom: 0;
}
.trust-htw-body strong {
color: #fff;
}
.trust-htw-body a {
color: #B8D94A;
text-decoration: underline;
}
.trust-htw-hr {
border: none;
height: 1px;
width: 100%;
background: rgba(255, 255, 255, 0.22);
margin: 0 0 24px;
display: block;
flex-shrink: 0;
}
.trust-htw-links {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 16px;
}
.trust-htw-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
text-decoration: none;
color: rgba(255, 255, 255, 0.88);
font-size: 13.5px;
font-weight: 400;
gap: 10px;
transition: color 0.18s;
}
.trust-htw-link:hover {
color: #B8D94A;
}
.trust-htw-link:hover .trust-htw-arrow {
background: #a5c83a;
}
.trust-htw-link.is-last-row {
border-bottom: none;
}
.trust-htw-arrow {
width: 32px;
height: 32px;
min-width: 32px;
background: #B8D94A;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.18s;
}
.trust-htw-arrow svg {
width: 14px;
height: 14px;
}
@media (max-width: 960px) {
.trust-htw-card {
width: 60%;
}
.trust-htw-title {
font-size: 28px;
}
}
@media (max-width: 767px) {
.trust-htw-card {
padding: 32px 20px 36px !important;
}
.trust-htw-eyebrow {
margin-top: 0;
text-align: center;
}
.trust-htw-title {
font-size: 26px;
text-align: center;
}
.trust-htw-body {
text-align: justify;
}
.trust-wwa-row {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.trust-cta5-title {
margin-top: 0;
margin-bottom: 6px;
}
.trust-cta5-body {
margin-bottom: 8px;
}
.trust-cta5-card {
padding: 32px 24px 28px;
}
}
@media (max-width: 700px) {
.trust-htw-wrap {
padding: 0;
overflow: visible;
}
.trust-htw {
height: auto;
display: flex;
flex-direction: column;
padding: 0;
min-height: 0;
}
.trust-htw-img-left {
position: relative;
top: auto;
left: auto;
width: 100%;
height: 240px;
}
.trust-htw-img-right {
display: none;
}
.trust-htw-card {
position: relative;
left: auto;
top: auto;
transform: none;
translate: none;
width: 100%;
border-radius: 0;
margin-top: -30px;
}
}
/* ==========================================================================
TRUST — Home / "Shape the Future" CTA (cta5)
========================================================================== */
.trust-cta5-wrap {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: #EBEBEB;
padding: 60px 0 60px;
}
.trust-cta5 {
box-sizing: border-box;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 40px;
padding-right: 0;
transform: translateX(40px); /* aligne le bord droit sur la section HTW au-dessus, mesuré via PixGrid */
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-cta5 * {
box-sizing: border-box;
}
.trust-cta5-image-wrap {
margin-left: 20%;
position: relative;
z-index: 1;
line-height: 0;
}
.trust-cta5-img {
width: 100%;
height: 600px;
object-fit: cover;
object-position: center top;
display: block;
border-radius: 0;
}
.trust-cta5-card {
position: absolute;
left: -30%;
top: 80px;
width: 56%;
height: 460px;
z-index: 10;
background: #0D3B5E;
border-radius: 12px;
padding: 44px 48px 48px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
/* Arcs décoratifs fins */
.trust-cta5-card::before {
content: '';
position: absolute;
top: -20px;
right: -90px;
width: 360px;
height: 360px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.16);
pointer-events: none;
}
.trust-cta5-card::after {
content: '';
position: absolute;
top: 80px;
right: -30px;
width: 210px;
height: 210px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.11);
pointer-events: none;
}
.trust-cta5-arc3 {
position: absolute;
top: 160px;
right: 10px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.trust-cta5-title {
font-size: 36px;
font-weight: 400;
color: #fff;
line-height: 1.18;
letter-spacing: -0.3px;
margin-bottom: 18px;
position: relative;
z-index: 2;
}
.trust-cta5-body {
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
line-height: 1.65;
margin-bottom: 32px;
max-width: 380px;
position: relative;
z-index: 2;
}
.trust-cta5-btn {
display: inline-block;
background: #B8D94A;
color: #0d1f0a;
font-size: 13.5px;
font-weight: 600;
padding: 20px 28px;
border-radius: 6px;
text-decoration: none;
align-self: flex-start;
transition: background 0.18s;
position: relative;
z-index: 2;
}
.trust-cta5-btn:hover {
background: #a5c83a;
}
.trust-cta5-shop {
position: absolute;
right: 0;
bottom: 60px;
width: 240px;
z-index: 5;
background: rgba(10, 18, 26, 0.90);
padding: 22px 26px 28px;
border-radius: 0;
line-height: normal;
}
.trust-cta5-shop-icon {
margin-bottom: 10px;
}
.trust-cta5-shop-icon svg {
width: 26px;
height: 26px;
color: #B8D94A;
}
.trust-cta5-shop-text {
font-size: 18px;
font-weight: 400;
color: #fff;
line-height: 1.3;
}
/* Responsive */
@media (max-width: 960px) {
.trust-cta5-card {
left: -15%;
width: 60%;
top: 60px;
height: 420px;
}
.trust-cta5-title {
font-size: 30px;
}
.trust-cta5-image-wrap {
margin-left: 10%;
}
.trust-cta5-img {
height: 560px;
}
.trust-cta5-shop {
bottom: 40px;
}
}
@media (max-width: 768px) {
.trust-cta5-card {
padding: 32px 24px 28px;
}
.trust-cta5-title {
font-size: 26px;
margin-bottom: 0;
}
.trust-cta5-body {
margin-bottom: 10px;
}
.trust-cta5-shop {
display: none;
}
}
@media (max-width: 700px) {
.trust-cta5-wrap {
padding: 0;
}
.trust-cta5-card {
padding: 32px 24px 28px;
}
.trust-cta5 {
padding: 0;
transform: none;
}
.trust-cta5-image-wrap {
margin-left: 0;
line-height: normal;
}
.trust-cta5-img {
height: 320px;
}
.trust-cta5-card {
position: relative;
top: auto;
left: auto;
width: 100%;
height: auto;
border-radius: 0;
margin-top: -40px;
}
.trust-cta5-shop {
position: relative;
right: auto;
bottom: auto;
width: 100%;
}
}
/* ==========================================================================
TRUST — Home / "Seal of TRUST"
========================================================================== */
.trust-seal-wrap,
.trust-seal-wrap * {
box-sizing: border-box;
}
.trust-seal-wrap {
position: relative;
max-width: var(--content-max-width);
margin: 54px auto 0;
min-height: 500px;
background: #e8edf2;
overflow: hidden;
display: flex;
align-items: center;
padding: 40px 4% 40px 0;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-seal-image {
position: absolute;
left: 0;
top: 0;
width: 62%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* Fondu droit de l'image vers le fond */
.trust-seal-fade {
position: absolute;
left: 44%;
top: 0;
width: 220px;
height: 100%;
background: linear-gradient(to right, transparent, #e8edf2);
z-index: 1;
pointer-events: none;
}
.trust-seal-card {
position: relative;
z-index: 2;
margin-left: auto;
background: #1a3d5c;
border-radius: 12px;
padding: 52px 44px 48px 44px;
max-width: 420px;
width: 100%;
flex-shrink: 0;
}
.trust-seal-card::before {
content: '';
position: absolute;
bottom: -70px;
left: -70px;
width: 240px;
height: 240px;
border: 1.5px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
pointer-events: none;
}
.trust-seal-card::after {
content: '';
position: absolute;
bottom: -30px;
left: -30px;
width: 150px;
height: 150px;
border: 1.5px solid rgba(255, 255, 255, 0.06);
border-radius: 50%;
pointer-events: none;
}
.trust-seal-title {
font-size: 36px;
font-weight: 400;
color: #ffffff;
line-height: 1.18;
letter-spacing: -0.3px;
margin: 0 0 18px 0;
}
.trust-seal-rule {
width: 36px;
height: 2px;
background: rgba(255, 255, 255, 0.2);
border: none;
margin: 0 0 20px 0;
}
.trust-seal-body {
font-size: 13.5px;
line-height: 1.75;
color: rgba(255, 255, 255, 0.75);
margin: 0 0 32px 0;
}
.trust-seal-body p {
margin: 0 0 1.2em 0;
}
.trust-seal-body p:last-child {
margin-bottom: 0;
}
.trust-seal-cta {
display: inline-block;
background: #B8D94A;
color: #0d1f0a !important;
font-size: 13.5px;
font-weight: 600;
padding: 13px 28px;
border-radius: 7px;
text-decoration: none !important;
align-self: flex-start;
transition: background 0.18s;
position: relative;
z-index: 2;
white-space: nowrap;
}
.trust-seal-cta:hover {
background: #c8e85a;
color: #0d1f0a !important;
text-decoration: none !important;
}
/* Responsive */
@media (max-width: 860px) {
.trust-seal-wrap {
flex-direction: column;
padding: 0;
min-height: auto;
}
.trust-seal-image {
position: relative;
width: 100%;
height: 260px;
left: auto;
top: auto;
}
.trust-seal-fade {
display: none;
}
.trust-seal-card {
margin-left: 0;
max-width: 100%;
border-radius: 0;
padding: 40px 24px;
}
.trust-seal-title {
font-size: 26px;
}
}
@media (max-width: 768px) {
.trust-seal-wrap {
margin-top: 0;
}
.trust-seal-card {
padding-top: 20px;
padding-bottom: 30px;
}
.trust-seal-body p {
text-align: justify;
}
.trust-seal-body {
margin-bottom: 15px;
}
}
/* ==========================================================================
TRUST — Home / "Partners" (Consortium)
========================================================================== */
.trust-partners-wrap,
.trust-partners-wrap * {
box-sizing: border-box;
}
.trust-partners-wrap {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: #ffffff;
padding: 72px 0 80px;
}
.trust-partners {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 40px;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-partners-headline {
text-align: center;
margin-bottom: 48px;
}
.trust-partners-eyebrow {
display: block;
font-size: 16px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #1F5F8B;
margin-bottom: 12px;
}
.trust-partners-title {
font-size: 36px;
font-weight: 400;
color: #1F5F8B;
line-height: 1.18;
letter-spacing: -0.3px;
margin-bottom: 20px;
}
.trust-partners-intro {
font-size: 15px;
line-height: 1.7;
color: #4a5568;
max-width: 640px;
margin: 0 auto;
}
.trust-partners-intro p {
margin: 0 0 1em 0;
}
.trust-partners-intro p:last-child {
margin-bottom: 0;
}
/* Grille de logos — flexible, s'adapte au nombre de logos sans
dépendre d'un ratio fixe (contrairement à la version Divi qui
distinguait R&D / End-Users) */
.trust-partners-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
align-items: center;
justify-items: center;
gap: 36px 24px;
}
.trust-partners-logo {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
width: 100%;
}
.trust-partners-logo img {
max-width: 160px;
max-height: 68px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(15%);
opacity: 0.9;
transition: opacity 0.2s, filter 0.2s;
}
.trust-partners-logo img:hover {
opacity: 1;
filter: grayscale(0%);
}
.trust-partners-cta {
margin-top: 56px;
display: flex;
justify-content: center;
}
.trust-partners-btn {
display: inline-block;
background: #1F5F8B;
color: #ffffff;
font-size: 13.5px;
font-weight: 600;
padding: 13px 28px;
border-radius: 7px;
text-decoration: none;
transition: background 0.18s;
}
.trust-partners-btn:hover {
background: #0D3B5E;
color: #ffffff;
}
@media (max-width: 768px) {
.trust-partners-wrap {
padding-top: 40px;
padding-bottom: 40px;
}
.trust-partners-headline {
margin-bottom: 10px;
}
.trust-partners-logos {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px 16px; /* was 24px 16px — row-gap reduced */
}
.trust-partners-logo {
padding: 6px 28px; /* was 14px 28px, inherited from desktop */
}
.trust-partners-cta {
margin-top: 30px;
}
}
/* Responsive */
@media (max-width: 700px) {
.trust-partners {
padding: 0 20px;
}
/*
.trust-partners-logos {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 24px 16px;
}
*/
.trust-partners-logos {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px 16px; /* was 24px 16px — row-gap reduced */
}
.trust-partners-logo img {
max-width: 120px;
max-height: 54px;
}
.trust-partners-title {
font-size: 24px;
}
}
/* ==========================================================================
TRUST — Home / "Contact Band"
========================================================================== */
.trust-contact-wrap,
.trust-contact-wrap * {
box-sizing: border-box;
}
.trust-contact-wrap {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: #0D3B5E;
padding: 80px 0 80px;
overflow: hidden;
}
/* Cercles décoratifs */
.trust-contact-wrap::before {
content: '';
position: absolute;
right: -140px;
top: -160px;
width: 720px;
height: 720px;
border-radius: 50%;
border: 28px solid rgba(255, 255, 255, 0.06);
pointer-events: none;
}
.trust-contact-wrap::after {
content: '';
position: absolute;
right: 60px;
top: 20px;
width: 480px;
height: 480px;
border-radius: 50%;
border: 22px solid rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.trust-contact-arc3 {
position: absolute;
right: 210px;
top: 120px;
width: 280px;
height: 280px;
border-radius: 50%;
border: 16px solid rgba(255, 255, 255, 0.04);
pointer-events: none;
}
.trust-contact {
max-width: var(--page-max-width); /* aligned with the footer (1280px) */
margin: 0 auto;
padding: 0 48px;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
position: relative;
z-index: 2;
}
.trust-contact-title {
font-size: 36px;
font-weight: 400;
color: #fff;
line-height: 1.18;
letter-spacing: -0.3px;
max-width: 85%;
margin-bottom: 36px;
}
.trust-contact-cta {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 64px;
text-decoration: none;
}
.trust-contact-cta-label {
font-size: 26px;
font-weight: 400;
color: #fff;
}
.trust-contact-cta-arrow {
width: 38px;
height: 38px;
background: #B8D94A;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.18s;
}
.trust-contact-cta:hover .trust-contact-cta-arrow {
background: #a5c83a;
}
.trust-contact-cta-arrow svg {
width: 16px;
height: 16px;
}
.trust-contact-divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin-bottom: 44px;
}
.trust-contact-bottom {
display: flex;
align-items: flex-start;
gap: 80px;
}
.trust-contact-label {
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 16px;
letter-spacing: 0.03em;
}
.trust-contact-socials {
display: flex;
gap: 12px;
align-items: center;
}
.trust-contact-social-btn {
width: 38px;
height: 38px;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.18s;
flex-shrink: 0;
}
.trust-contact-social-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.trust-contact-social-btn svg {
width: 18px;
height: 18px;
color: #fff;
}
@media (max-width: 768px) {
.trust-contact-wrap {
padding-top: 10px;
padding-bottom: 30px;
}
.trust-contact-title {
font-size: 26px;
max-width: 100%;
}
.trust-contact-cta-label {
font-size: 22px;
}
.trust-contact-cta {
margin-bottom: 20px;
}
.trust-contact-divider {
margin-bottom: 15px;
}
}
@media (max-width: 700px) {
.trust-contact-wrap {
padding: 10px 0;
padding-bottom: 30px;
}
.trust-contact {
padding: 0 20px;
}
.trust-contact-bottom {
flex-direction: column;
gap: 32px;
}
}
/* ==========================================================================
TRUST — Site Footer
========================================================================== */
.trust-footer-wrap,
.trust-footer-wrap * {
box-sizing: border-box;
}
.trust-footer-wrap {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: #1F5F8B;
padding: 64px 0 40px;
}
.trust-footer {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
/* ── Top: brand + nav columns ─────────────────────────────── */
.trust-footer-top {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 40px 80px;
margin-bottom: 48px;
}
.trust-footer-brand {
align-self: flex-start;
margin: 0;
padding: 0;
}
.trust-footer-brand img {
display: block;
max-width: 190px;
height: auto;
margin: 0;
padding: 0;
}
.trust-footer-nav {
align-self: flex-start;
display: flex;
flex-wrap: wrap;
gap: 40px 80px;
flex: 1;
}
.trust-footer-nav-col {
display: flex;
flex-direction: column;
min-width: 200px;
flex: 1;
}
.trust-footer-nav-link {
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.trust-footer-nav-col .trust-footer-nav-link:first-child {
padding-top: 0;
}
.trust-footer-nav-link:hover {
color: #B8D94A;
}
/* ── Divider ──────────────────────────────────────────────── */
.trust-footer-divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin: 0 0 40px;
margin-bottom: 20px;
}
/* ── Funded By + Acknowledgement / Disclaimer ────────────────── */
.trust-footer-funding {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 32px 60px;
margin-bottom: 40px;
}
.trust-footer-badges {
display: flex;
flex-direction: column;
gap: 24px;
}
.trust-footer-badge {
display: flex;
align-items: flex-start;
gap: 16px;
}
.trust-footer-badge-flag {
width: auto;
height: 60px;
flex-shrink: 0;
display: block;
}
.trust-footer-badge--swiss .trust-footer-badge-flag {
width: 40px;
}
.trust-footer-badge-text {
font-size: 13.5px;
line-height: 1.4;
color: #fff;
font-weight: 600;
}
.trust-footer-badge-text p {
margin: 0;
}
.trust-footer-badge--swiss .trust-footer-badge-text {
font-size: 11.5px;
font-weight: 400;
color: rgba(255, 255, 255, 0.75);
line-height: 1.5;
}
.trust-footer-badge--swiss .trust-footer-badge-text strong {
display: block;
color: #fff;
font-weight: 600;
}
.trust-footer-legal {
display: flex;
flex-direction: column;
gap: 18px;
}
.trust-footer-legal-block {
font-size: 12.5px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.75);
}
.trust-footer-legal-block strong {
color: #fff;
}
.trust-footer-legal-block a {
color: #B8D94A;
text-decoration: underline;
}
.trust-footer-legal-block p {
margin: 0;
}
/* ── Bottom bar ───────────────────────────────────────────── */
.trust-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.trust-footer-copyright {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.55);
}
.trust-footer-socials {
display: flex;
gap: 12px;
align-items: center;
}
.trust-footer-social-btn {
width: 38px;
height: 38px;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.18s;
flex-shrink: 0;
}
.trust-footer-social-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.trust-footer-social-btn svg {
width: 18px;
height: 18px;
color: #fff;
}
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
.trust-footer-wrap {
padding: 48px 0 32px;
padding-top: 25px;
}
.trust-footer-brand {
display: flex;
justify-content: center;
width: 100%;
}
.trust-footer {
padding: 0 20px;
}
.trust-footer-top {
flex-direction: column;
gap: 32px;
}
.trust-footer-funding {
grid-template-columns: 1fr;
}
.trust-footer-bottom {
flex-direction: column;
align-items: flex-start;
}
}
/* ==========================================================================
TRUST — Site Header
========================================================================== */
.trust-header,
.trust-header * {
box-sizing: border-box;
}
.trust-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: transparent;
transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Solid state, toggled by assets/js/header-scroll.js once the page
has scrolled past a small threshold. */
.trust-header.is-scrolled {
background-color: #103E61;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.trust-header.trust-header--solid {
background-color: #103E61;
}
.trust-header-inner {
/* Match the 1280px page content width + its 48px side padding so the
logo lines up with the breadcrumb/title below. The nav stays in the
centre grid column (1fr auto 1fr), so it remains page-centred. */
max-width: var(--page-max-width);
margin: 0 auto;
padding: 10px 48px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-header-logo {
display: flex;
align-items: center;
line-height: 0;
justify-self: start;
}
.trust-header-logo img {
display: block;
height: 40px;
width: auto;
}
.trust-header-nav-wrap {
justify-self: center;
}
.trust-header-nav {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
}
.trust-header-nav a {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
transition: color 0.18s;
}
.trust-header-nav a:hover {
color: #B8D94A;
}
/* WordPress auto-adds this class to the current page's */
.trust-header-nav .current-menu-item > a,
.trust-header-nav .current_page_item > a {
color: #B8D94A;
}
/* ── Hamburger toggle button — hidden on desktop ─────────────── */
.trust-header-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 32px;
height: 32px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
justify-self: start;
z-index: 1100;
}
.trust-header-toggle-bar {
display: block;
width: 24px;
height: 2px;
background: #fff;
border-radius: 1px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Morphs into an X when the mobile menu is open */
.trust-header-toggle.is-active .trust-header-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.trust-header-toggle.is-active .trust-header-toggle-bar:nth-child(2) {
opacity: 0;
}
.trust-header-toggle.is-active .trust-header-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ── Fullscreen mobile nav overlay ────────────────────────────── */
.trust-mobile-nav {
position: fixed;
inset: 0;
background: #103E61;
z-index: 999; /* below .trust-header (1000) so the toggle button stays clickable/visible on top */
padding: 64px 32px 40px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-mobile-nav.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
.trust-mobile-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.trust-mobile-nav-list li {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.trust-mobile-nav-list a {
display: block;
padding: 18px 4px;
font-size: 20px;
font-weight: 700;
color: #fff;
text-decoration: none;
}
.trust-mobile-nav-list .current-menu-item > a,
.trust-mobile-nav-list .current_page_item > a {
color: #B8D94A;
}
/* Locks background scroll while the mobile menu is open */
body.trust-menu-open {
overflow: hidden;
}
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 780px) {
.trust-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
}
/* Logo on the left, burger on the right (easier to reach with the
right thumb while scrolling). DOM order is toggle-then-logo, so
reorder visually. */
.trust-header-logo {
display: flex;
order: 1;
}
.trust-header-toggle {
display: flex;
order: 2;
}
.trust-header-nav-wrap {
display: none;
}
}
/* ==========================================================================
TRUST — Contact Page
========================================================================== */
.trust-contact-hero,
.trust-contact-hero *,
.trust-contact-body,
.trust-contact-body * {
box-sizing: border-box;
}
/* ── Hero ─────────────────────────────────────────────────── */
.trust-contact-hero {
position: relative;
background: linear-gradient(120deg, #0D3B5E 0%, #1F5F8B 100%);
padding: 92px 0 60px; /* top padding clears the fixed header */
padding-bottom: 35px;
overflow: hidden;
}
.trust-contact-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--trust-contact-hero-bg, none);
background-size: cover;
background-position: right center;
opacity: 0.35;
pointer-events: none;
}
.trust-contact-hero-inner {
position: relative;
z-index: 1;
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-contact-hero-title {
font-size: 44px;
font-weight: 700;
color: #fff;
line-height: 1.15;
margin: 0 0 18px;
}
.trust-contact-hero-rule {
width: 48px;
height: 4px;
background: #B8D94A;
border-radius: 2px;
margin-bottom: 24px;
}
.trust-contact-hero-subtitle {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
max-width: 520px;
margin: 0;
}
/* ── Body: form + sidebar ─────────────────────────────────── */
.trust-contact-body {
background: #f7f9fb;
padding: 60px 0 80px;
padding-top: 40px;
}
.trust-contact-body-inner {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 32px;
align-items: start;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
/* Form card */
.trust-contact-form-card {
background: #fff;
border-radius: 12px;
padding: 44px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}
.trust-contact-form-title {
font-size: 22px;
font-weight: 700;
color: #0D3B5E;
margin: 0 0 8px;
}
.trust-contact-form-desc {
font-size: 14px;
color: #667085;
margin: 0 0 28px;
}
.trust-contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.trust-contact-field {
margin-bottom: 20px;
}
.trust-contact-field label,
.trust-contact-consent label {
display: block;
font-size: 13px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 6px;
}
.trust-contact-field input[type="text"],
.trust-contact-field input[type="email"],
.trust-contact-field select,
.trust-contact-field textarea {
width: 100%;
padding: 11px 14px;
border: 1px solid #d7dce2;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
color: #1a1a2e;
background: #fff;
}
.trust-contact-field input:focus,
.trust-contact-field select:focus,
.trust-contact-field textarea:focus {
outline: none;
border-color: #1F5F8B;
box-shadow: 0 0 0 3px rgba(31, 95, 139, 0.12);
}
.trust-contact-field textarea {
resize: vertical;
}
.trust-contact-field .has-error,
.trust-contact-consent input.has-error + label {
border-color: #d92d20;
}
.trust-contact-error {
display: block;
font-size: 12px;
color: #d92d20;
margin-top: 4px;
min-height: 14px;
}
.trust-contact-consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 24px;
}
.trust-contact-consent input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
}
.trust-contact-consent label {
font-size: 13px;
font-weight: 400;
color: #4a5568;
margin: 0;
}
.trust-contact-consent a {
color: #1F5F8B;
text-decoration: underline;
}
.trust-contact-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.trust-contact-form-feedback {
font-size: 13.5px;
margin-bottom: 16px;
min-height: 0;
}
.trust-contact-form-feedback.is-success {
color: #067647;
}
.trust-contact-form-feedback.is-error {
color: #d92d20;
}
.trust-contact-turnstile {
margin-bottom: 20px;
}
.trust-contact-submit {
display: inline-flex;
align-items: center;
gap: 12px;
background: #B8D94A;
color: #0d1f0a;
border: none;
font-size: 14px;
font-weight: 600;
padding: 13px 22px;
border-radius: 7px;
cursor: pointer;
transition: background 0.18s;
}
.trust-contact-submit:hover {
background: #a5c83a;
}
.trust-contact-submit:disabled {
opacity: 0.7;
cursor: default;
}
.trust-contact-submit-arrow {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.trust-contact-submit-arrow svg {
width: 16px;
height: 16px;
}
/* Sidebar */
.trust-contact-sidebar {
background: #0D3B5E;
border-radius: 12px;
padding: 36px 32px;
color: #fff;
}
.trust-contact-sidebar-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 14px;
}
.trust-contact-sidebar-rule {
width: 36px;
height: 3px;
background: #B8D94A;
border-radius: 2px;
margin-bottom: 28px;
}
.trust-contact-method {
display: flex;
gap: 16px;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.trust-contact-method--first {
border-top: none;
padding-top: 0;
}
.trust-contact-method-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.4);
display: flex;
align-items: center;
justify-content: center;
}
.trust-contact-method-icon svg {
width: 18px;
height: 18px;
stroke: #fff;
fill: none;
}
.trust-contact-method-label {
font-size: 14.5px;
font-weight: 700;
color: #fff;
margin: 0 0 4px;
}
.trust-contact-method-value {
font-size: 13.5px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.8);
}
.trust-contact-method-value a {
color: rgba(255, 255, 255, 0.9);
}
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
.trust-contact-body-inner {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.trust-contact-hero {
padding: 120px 0 44px;
}
.trust-contact-hero-inner,
.trust-contact-body-inner {
padding: 0 20px;
}
.trust-contact-hero-title {
font-size: 32px;
}
.trust-contact-row {
grid-template-columns: 1fr;
gap: 0;
}
.trust-contact-form-card {
padding: 28px 22px;
}
.trust-contact-sidebar {
padding: 28px 22px;
}
}
/* =========================================
NEWS — Hero (Hub)
========================================= */
.trust-news-hero {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #0D3B5E 0%, #1F5F8B 60%, #1a3d5c 100%);
padding: 100px 0 70px;
padding-bottom: 40px;
overflow: hidden;
box-sizing: border-box;
}
.trust-news-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 1;
}
.trust-news-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, #7ab317, var(--trust-lime, #B8D94A), #7ab317);
}
.trust-news-hero-inner {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
position: relative;
z-index: 2;
box-sizing: border-box;
}
.trust-news-hero-eyebrow {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: #B8D94A;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.trust-news-hero-eyebrow::before {
content: '';
display: inline-block;
width: 32px;
height: 2px;
background: #B8D94A;
}
.trust-news-hero-title {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 52px;
font-weight: 300;
color: #ffffff;
line-height: 1.1;
letter-spacing: -1px;
margin: 0 0 16px;
}
.trust-news-hero-title span {
color: #B8D94A;
font-weight: 600;
}
.trust-news-hero-sub {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 16px;
font-weight: 300;
color: rgba(255,255,255,0.72);
margin: 0;
max-width: 520px;
line-height: 1.6;
}
/* =========================================
NEWS — Content wrap + section header
========================================= */
.trust-news-wrap {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 60px 48px 80px;
box-sizing: border-box;
}
.trust-news-section-header {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 32px;
}
.trust-news-section-title {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #1F5F8B;
white-space: nowrap;
}
.trust-news-section-header::after {
content: '';
flex: 1;
height: 1px;
background: #e2e2e2;
}
.trust-news-year-label {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 22px;
font-weight: 300;
color: #0D3B5E;
margin: 8px 0 0;
flex-basis: 100%;
order: 3;
}
/* =========================================
NEWS — Grid + cards
========================================= */
.trust-news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px 24px;
box-sizing: border-box;
}
.trust-news-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.trust-news-card-thumb {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #eee;
}
.trust-news-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.trust-news-card-thumb-fallback {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1F5F8B, #0D3B5E);
}
.trust-news-card-body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
box-sizing: border-box;
}
.trust-news-card-title {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 1.35;
margin: 0 0 10px;
}
.trust-news-card-title a {
color: #1F5F8B;
text-decoration: none;
}
.trust-news-card-title a:hover {
text-decoration: underline;
}
.trust-news-card-meta {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 13px;
color: #4a86ab;
margin: 0 0 12px;
}
.trust-news-card-excerpt {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 14.5px;
color: #555;
line-height: 1.6;
margin: 0 0 16px;
flex: 1;
}
.trust-news-card-readmore {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
color: #7ab317;
text-decoration: none;
align-self: flex-start;
}
.trust-news-card-readmore:hover {
text-decoration: underline;
}
/* Empty state + pagination */
.trust-news-empty {
text-align: center;
padding: 60px 0;
color: #666;
}
.trust-news-pagination {
margin-top: 48px;
display: flex;
justify-content: center;
gap: 8px;
}
.trust-news-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 8px;
border: 1px solid #e2e2e2;
border-radius: 4px;
color: #1F5F8B;
text-decoration: none;
font-family: 'Inter', Helvetica, sans-serif;
font-size: 14px;
box-sizing: border-box;
}
.trust-news-pagination .page-numbers.current {
background: #1F5F8B;
color: #fff;
border-color: #1F5F8B;
}
/* =========================================
NEWS — Responsive
========================================= */
@media (max-width: 767px) {
.trust-news-hero { padding: 70px 0 48px; }
.trust-news-hero-title { font-size: 36px; }
.trust-news-hero-inner { padding: 0 24px; }
.trust-news-wrap { padding: 40px 24px 56px; }
.trust-news-grid { grid-template-columns: 1fr; }
}
/* =========================================
NEWS — Single: hero variant
========================================= */
.trust-news-hero--single { padding: 70px 0 44px; }
.trust-news-hero-title--single { font-size: 38px; font-weight: 600; margin-bottom: 12px; }
.trust-news-hero-meta { font-family: 'Inter', Helvetica, sans-serif; font-size: 14px; color: rgba(255,255,255,0.65); }
.trust-news-hero-meta a { color: #B8D94A; text-decoration: none; }
.trust-news-hero-meta a:hover { text-decoration: underline; }
/* =========================================
NEWS — Single: content wrap
========================================= */
.trust-news-single-wrap {
max-width: 780px;
margin: 0 auto;
padding: 56px 40px 80px;
box-sizing: border-box;
}
.trust-news-single-image { margin: 0 0 40px; }
.trust-news-single-image img { width: 100%; height: auto; border-radius: 4px; display: block; }
.trust-news-single-image figcaption {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 14px;
color: #666;
margin-top: 10px;
line-height: 1.5;
}
/* =========================================
NEWS — Rich content (Gutenberg output)
========================================= */
.trust-news-content {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 16px;
line-height: 1.75;
color: #333;
}
.trust-news-content p { margin: 0 0 22px; }
.trust-news-content h2 { font-size: 26px; font-weight: 600; color: #0D3B5E; margin: 42px 0 18px; }
.trust-news-content h3 { font-size: 21px; font-weight: 600; color: #0D3B5E; margin: 34px 0 14px; }
.trust-news-content strong { font-weight: 700; }
.trust-news-content u { text-decoration: underline; }
.trust-news-content a { color: #1F5F8B; text-decoration: underline; }
.trust-news-content a:hover { color: #7ab317; }
/* Gutenberg Button block (e.g. "Download as PDF"): .trust-news-content a
above overrides the core block's white/no-underline link styling with
blue+underline, leaving it looking like a bare link in a dark box.
Restore the intended button look without touching its shape/padding. */
.trust-news-content .wp-block-button__link,
.trust-news-content .wp-block-button__link:visited {
background-color: #1F5F8B;
color: #fff;
text-decoration: none;
border-radius: 12px;
padding-top: 7px;
padding-bottom: 7px;
}
.trust-news-content .wp-block-button__link:hover {
color: #fff;
}
.trust-news-content ul, .trust-news-content ol { margin: 0 0 22px; padding-left: 22px; }
.trust-news-content li { margin-bottom: 8px; }
.trust-news-content blockquote {
margin: 32px 0;
padding: 20px 24px;
border-left: 4px solid #B8D94A;
background: #f7f9fa;
font-style: italic;
color: #444;
}
.trust-news-content img { max-width: 100%; height: auto; border-radius: 4px; }
.trust-news-content .alignleft { float: left; margin: 6px 24px 16px 0; max-width: 45%; }
.trust-news-content .alignright { float: right; margin: 6px 0 16px 24px; max-width: 45%; }
.trust-news-content .aligncenter { display: block; margin: 24px auto; }
.trust-news-content .wp-caption-text {
font-size: 13px; color: #777; margin-top: 6px; line-height: 1.4;
}
.trust-news-content .wp-block-embed,
.trust-news-content .wp-embed-responsive {
margin: 28px 0;
}
.trust-news-content .wp-embed-responsive .wp-block-embed__wrapper {
position: relative; padding-top: 56.25%; height: 0;
}
.trust-news-content .wp-embed-responsive .wp-block-embed__wrapper iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
/* =========================================
NEWS — Prev article link
========================================= */
.trust-news-prev-link { margin: 8px 0 48px; }
.trust-news-prev-link a {
font-family: 'Inter', Helvetica, sans-serif;
font-weight: 700;
color: #1F5F8B;
text-decoration: none;
}
.trust-news-prev-link a:hover { color: #7ab317; }
/* =========================================
NEWS — Author byline (simple)
========================================= */
.trust-news-byline {
margin: 40px 0;
padding-top: 24px;
border-top: 1px solid #e5e5e5;
}
.trust-news-byline-name {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 15px;
color: #333;
margin: 0 0 4px;
}
.trust-news-byline-name a {
color: #1F5F8B;
font-weight: 700;
text-decoration: none;
}
.trust-news-byline-name a:hover { text-decoration: underline; }
.trust-news-byline-role {
font-family: 'Inter', Helvetica, sans-serif;
font-style: italic;
font-size: 14px;
color: #666;
margin: 0;
}
/* =========================================
NEWS — Share buttons
========================================= */
.trust-news-share { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.trust-news-share-label { font-family: 'Inter', Helvetica, sans-serif; font-size: 14px; font-weight: 700; color: #333; margin-right: 4px; }
.trust-news-share-btn {
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: #eef2f5; color: #1F5F8B; border: none; cursor: pointer;
text-decoration: none;
}
.trust-news-share-btn:hover { background: #1F5F8B; color: #fff; }
.trust-news-share-copy { position: relative; }
.trust-news-share-copy-label {
position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
font-family: 'Inter', Helvetica, sans-serif; font-size: 12px;
background: #0D3B5E; color: #fff; padding: 4px 8px; border-radius: 4px;
white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.trust-news-share-copy-label.is-visible { opacity: 1; }
/* =========================================
NEWS — Comments (style épuré)
========================================= */
.trust-news-comments { margin-top: 48px; padding-top: 40px; border-top: 1px solid #e5e5e5; }
.trust-news-comments-title { font-family: 'Inter', Helvetica, sans-serif; font-size: 20px; color: #0D3B5E; margin: 0 0 24px; }
.trust-news-comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.trust-news-comment-list .comment { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #eee; }
.trust-news-comment-list .comment-author { font-weight: 700; color: #222; font-size: 14px; }
.trust-news-comment-list .comment-metadata { font-size: 12px; color: #999; margin-bottom: 8px; }
.trust-news-comment-list .comment-metadata a { color: #999; }
.trust-news-comment-list p { font-size: 14.5px; color: #444; line-height: 1.6; margin: 0; }
.trust-news-comment-form { font-family: 'Inter', Helvetica, sans-serif; }
.comment-reply-title {
font-family: 'Inter', Helvetica, sans-serif;
font-size: 18px;
font-weight: 600;
color: #0D3B5E;
margin: 0 0 20px;
}
.trust-news-comment-form p { margin: 0 0 18px; }
.trust-news-comment-form label {
display: block;
font-size: 13px;
font-weight: 600;
color: #333;
margin-bottom: 6px;
}
.trust-news-comment-hint {
font-weight: 400;
font-style: italic;
color: #999;
font-size: 12px;
}
.trust-news-comment-form input[type="text"],
.trust-news-comment-form input[type="email"],
.trust-news-comment-form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #dfe3e6;
border-radius: 6px;
font-family: 'Inter', Helvetica, sans-serif;
font-size: 14px;
color: #222;
box-sizing: border-box;
transition: border-color 0.15s;
}
.trust-news-comment-form input[type="text"]:focus,
.trust-news-comment-form input[type="email"]:focus,
.trust-news-comment-form textarea:focus {
outline: none;
border-color: #1F5F8B;
}
.trust-news-comment-form textarea { resize: vertical; min-height: 110px; }
.trust-news-comment-form input[type="checkbox"] { margin-right: 8px; }
.comment-form-cookies-consent {
display: flex;
align-items: center;
font-size: 13px;
color: #666;
margin-bottom: 20px !important;
}
.comment-form-cookies-consent label { display: inline; margin: 0; font-weight: 400; }
.trust-news-comment-submit {
background: #B8D94A;
color: #0D3B5E;
border: none;
border-radius: 999px;
padding: 11px 28px;
font-family: 'Inter', Helvetica, sans-serif;
font-weight: 700;
font-size: 14px;
cursor: pointer;
}
.trust-news-comment-submit:hover { background: #a5c93f; }
/* =========================================
NEWS — Single: responsive
========================================= */
@media (max-width: 767px) {
.trust-news-single-wrap { padding: 40px 24px 56px; }
.trust-news-hero-title--single { font-size: 28px; }
.trust-news-content .alignleft,
.trust-news-content .alignright { float: none; max-width: 100%; margin: 20px 0; }
}
/* ==========================================================================
Partners Hero (dedicated /partners/ page)
========================================================================== */
.trust-partners-hero {
box-sizing: border-box;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0D3B5E 0%, #1F5F8B 55%, #2c6fa3 100%);
padding: 96px 0 64px; /* extra top padding clears the fixed header; horizontal géré par .trust-partners-hero-inner */
}
.trust-partners-hero-graphic {
position: absolute;
top: 50%;
right: -2%;
transform: translateY(-50%);
width: 42%;
max-width: 620px;
height: auto;
opacity: 0.1;
filter: brightness(0) invert(1);
pointer-events: none;
user-select: none;
}
.trust-partners-hero-inner {
box-sizing: border-box;
position: relative;
z-index: 1;
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
}
/* Ajouter un enfant pour contraindre la largeur du texte SANS décaler le point de départ à gauche */
.trust-partners-hero-text {
max-width: 620px;
}
.trust-partners-hero-title {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: clamp(2rem, 3.2vw, 2.75rem);
line-height: 1.15;
color: #ffffff;
margin: 0;
}
.trust-partners-hero-bar {
display: block;
width: 64px;
height: 4px;
background: #B8D94A;
border-radius: 2px;
margin: 22px 0 24px;
}
.trust-partners-hero-intro {
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.85);
max-width: 540px;
/*margin-bottom: 35px;*/
}
.trust-partners-hub-body-intro {
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
line-height: 1.65;
color: #4b5563;
max-width: var(--page-max-width);
text-align: center;
margin: 0 0 56px;
}
.trust-partners-hub-body-intro p {
margin: 0;
}
.trust-partners-hero-intro p {
margin: 0;
}
.trust-partner-richtext ul,
.trust-partner-richtext ol {
margin: 0 0 1em;
padding-left: 1.4em;
}
.trust-partner-richtext li {
margin-bottom: 0.5em;
line-height: 1.6;
}
.trust-partner-richtext li:last-child {
margin-bottom: 0;
}
.trust-partner-social-icons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.trust-partner-social-icon {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 8px;
border: 1.5px solid #e2e8f0;
color: #1F5F8B;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.trust-partner-social-icon svg {
width: 18px;
height: 18px;
}
.trust-partner-social-icon:hover {
background: #1F5F8B;
border-color: #1F5F8B;
color: #ffffff;
}
.trust-partner-flag-icon {
width: 20px;
height: 14px;
border-radius: 2px;
vertical-align: middle;
margin-right: 6px;
object-fit: cover;
}
.trust-partner-flag-icon--globe {
display: inline-flex;
align-items: center;
justify-content: center;
color: #1F5F8B;
}
.trust-partner-flag-icon--globe svg {
width: 16px;
height: 16px;
}
/* Mobile: hide the watermark graphic, tighten padding */
@media (max-width: 900px) {
.trust-partners-hero {
padding: 72px 0 40px;
}
.trust-partners-hero-inner {
padding: 0 24px;
}
.trust-partners-hero-text {
max-width: 100%;
}
}
/* ==========================================================================
Partners Hub Grid (dedicated /partners/ page)
========================================================================== */
.trust-partners-hub-wrap {
box-sizing: border-box;
background: #ffffff;
padding: 72px 48px 96px;
}
.trust-partners-hub {
box-sizing: border-box;
max-width: var(--page-max-width);
margin: 0 auto;
}
.trust-partners-hub-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px 40px;
}
.trust-partners-hub-item {
box-sizing: border-box;
position: relative;
}
.trust-partners-hub-link {
display: block;
text-decoration: none;
}
.trust-partners-hub-logo {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 110px;
padding: 0 16px;
}
.trust-partners-hub-logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(0%);
transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Only items WITH an internal detail page get an interactive hover cue —
plain logos (external link or no link) stay static, matching the
"Learn more" affordance being reserved for pages that actually exist. */
.trust-partners-hub-link:hover .trust-partners-hub-logo img,
.trust-partners-hub-link:focus-visible .trust-partners-hub-logo img {
transform: scale(1.04);
}
.trust-partners-hub-cta {
display: block;
text-align: center;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: #1F5F8B;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
margin-top: 10px;
}
.trust-partners-hub-link:hover .trust-partners-hub-cta,
.trust-partners-hub-link:focus-visible .trust-partners-hub-cta {
opacity: 1;
transform: translateY(0);
}
.trust-partners-hub-empty {
font-family: 'Inter', sans-serif;
color: #6b7280;
text-align: center;
padding: 40px 0;
}
@media (max-width: 1100px) {
.trust-partners-hub-grid {
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
}
/* Tablet: 2 columns */
@media (max-width: 900px) {
.trust-partners-hub-wrap {
padding: 48px 24px 64px;
}
.trust-partners-hub-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.trust-partners-hub-logo {
height: 90px;
}
}
/* Mobile: 1 column */
@media (max-width: 560px) {
.trust-partners-hub-grid {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* ==========================================================================
Single Partner (dedicated /partner/{slug}/ page)
========================================================================== */
/* -------------------- Hero -------------------- */
.trust-partner-hero {
box-sizing: border-box;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0D3B5E 0%, #1F5F8B 55%, #2c6fa3 100%);
padding: 92px 0 100px; /* extra top padding clears the fixed header; bottom reserves space for the overlapping card */
}
.trust-partner-hero-inner {
box-sizing: border-box;
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
}
.trust-partner-hero-title {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: clamp(1.8rem, 3vw, 2.5rem);
line-height: 1.15;
color: #ffffff;
margin: 0;
}
.trust-partner-hero-bar {
display: block;
width: 64px;
height: 4px;
background: #B8D94A;
border-radius: 2px;
margin: 18px 0 20px;
}
.trust-partner-hero-tagline {
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
max-width: 640px;
margin: 0;
}
/* -------------------- Overlapping ID card -------------------- */
.trust-partner-page-wrap {
box-sizing: border-box;
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
}
.trust-partner-id-card {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 32px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(13, 59, 94, 0.14);
padding: 32px 40px;
margin-top: -72px; /* pulls the card up over the hero's bottom padding */
position: relative;
z-index: 2;
}
.trust-partner-id-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
max-width: 180px;
max-height: 70px;
}
.trust-partner-id-logo img {
max-width: 100%;
max-height: 70px;
width: auto;
height: auto;
object-fit: contain;
}
.trust-partner-id-divider {
flex: 0 0 auto;
width: 1px;
align-self: stretch;
background: #e2e8f0;
}
.trust-partner-id-text {
flex: 1 1 auto;
min-width: 0;
}
.trust-partner-id-flag {
display: inline-flex;
align-items: center;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 700;
color: #374151;
background: #f1f5f9;
border-radius: 6px;
padding: 4px 10px;
margin-bottom: 10px;
}
.trust-partner-flag-icon {
width: 20px;
height: 14px;
border-radius: 2px;
vertical-align: middle;
margin-right: 6px;
object-fit: cover;
}
.trust-partner-flag-icon--globe {
display: inline-flex;
align-items: center;
justify-content: center;
color: #1F5F8B;
}
.trust-partner-flag-icon--globe svg {
width: 16px;
height: 16px;
}
.trust-partner-id-name {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: 1.5rem;
color: #0D3B5E;
margin: 0 0 6px;
}
.trust-partner-id-subtitle {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
color: #6b7280;
margin: 0;
line-height: 1.5;
}
/* -------------------- Two-column layout -------------------- */
.trust-partner-columns {
display: grid;
grid-template-columns: 1fr 320px;
gap: 48px;
padding: 48px 0 80px;
}
.trust-partner-main {
min-width: 0;
}
.trust-partner-section {
margin-bottom: 40px;
}
.trust-partner-section-title {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 1.3rem;
color: #0D3B5E;
margin: 0 0 16px;
}
.trust-partner-section-icon {
font-size: 1.1rem;
line-height: 1;
}
.trust-partner-section-icon svg {
width: 20px;
height: 20px;
vertical-align: middle;
}
.trust-partner-richtext {
font-family: 'Inter', sans-serif;
font-size: 1rem;
line-height: 1.7;
color: #374151;
}
.trust-partner-richtext p {
margin: 0 0 1em;
}
.trust-partner-richtext p:last-child {
margin-bottom: 0;
}
.trust-partner-richtext strong {
color: #1f2937;
}
.trust-partner-richtext ul,
.trust-partner-richtext ol {
margin: 0 0 1em;
padding-left: 1.4em;
}
.trust-partner-richtext li {
margin-bottom: 0.5em;
line-height: 1.6;
}
.trust-partner-richtext li:last-child {
margin-bottom: 0;
}
.trust-partner-richtext a {
color: #1F5F8B;
text-decoration: underline;
}
/* Pull quote (green box) */
.trust-partner-quote {
box-sizing: border-box;
font-family: 'Inter', sans-serif;
font-style: italic;
font-size: 1.05rem;
line-height: 1.6;
color: #1f2937;
background: #f4f9e8;
border-left: 4px solid #B8D94A;
border-radius: 6px;
padding: 20px 24px;
margin: 0 0 40px;
}
/* -------------------- Sidebar -------------------- */
.trust-partner-sidebar {
min-width: 0;
}
.trust-partner-sidebar-card {
box-sizing: border-box;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 28px;
position: sticky;
top: 24px;
}
.trust-partner-sidebar-title {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 1.05rem;
color: #0D3B5E;
margin: 0 0 20px;
}
.trust-partner-sidebar-row {
padding: 16px 0;
border-bottom: 1px solid #f1f5f9;
}
.trust-partner-sidebar-row:first-of-type {
padding-top: 0;
}
.trust-partner-sidebar-label {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 6px;
}
.trust-partner-sidebar-value {
font-family: 'Inter', sans-serif;
font-size: 0.98rem;
color: #1f2937;
}
.trust-partner-sidebar-row--social {
border-bottom: 1px solid #f1f5f9;
}
.trust-partner-social-icons {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 4px;
}
.trust-partner-social-icon {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 8px;
border: 1.5px solid #e2e8f0;
color: #1F5F8B;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.trust-partner-social-icon svg {
width: 18px;
height: 18px;
}
.trust-partner-social-icon:hover {
background: #1F5F8B;
border-color: #1F5F8B;
color: #ffffff;
}
/* Sidebar buttons */
.trust-partner-sidebar-btn {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.95rem;
padding: 13px 20px;
border-radius: 8px;
text-decoration: none;
margin-top: 20px;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.trust-partner-sidebar-btn--primary {
background: #0D3B5E;
color: #ffffff;
border: 1.5px solid #0D3B5E;
}
.trust-partner-sidebar-btn--primary:hover {
background: #1F5F8B;
border-color: #1F5F8B;
}
.trust-partner-sidebar-btn--outline {
background: transparent;
color: #1F5F8B;
border: 1.5px solid #e2e8f0;
}
.trust-partner-sidebar-btn--outline:hover {
background: #f1f5f9;
border-color: #1F5F8B;
}
/* -------------------- Mobile -------------------- */
@media (max-width: 900px) {
.trust-partner-hero {
padding: 72px 0 88px;
}
.trust-partner-hero-inner {
padding: 0 24px;
}
.trust-partner-page-wrap {
padding: 0 24px;
}
.trust-partner-id-card {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 24px;
margin-top: -56px;
}
.trust-partner-id-divider {
display: none;
}
.trust-partner-columns {
grid-template-columns: 1fr;
gap: 32px;
padding: 32px 0 56px;
}
.trust-partner-sidebar-card {
position: static;
}
}
@media (max-width: 560px) {
.trust-partner-id-card {
padding: 20px;
}
.trust-partner-id-name {
font-size: 1.25rem;
}
}
/* ==========================================================================
Events — Hub page (page-events.php)
========================================================================== */
.trust-events-hero,
.trust-events-hub,
.trust-event-single-hero-overlay,
.trust-event-single-body {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-events-hero {
position: relative;
min-height: 340px;
overflow: hidden;
background-color: #0D3B5E;
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-events-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center; /* keeps the right side of the photo (podium/speaker) visible at any width */
}
.trust-events-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(13, 59, 94, 0.95) 0%, rgba(13, 59, 94, 0.85) 35%, rgba(13, 59, 94, 0.35) 65%, rgba(13, 59, 94, 0) 100%);
}
.trust-events-hero-inner {
position: relative;
z-index: 2;
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
box-sizing: border-box;
}
.trust-events-hero-text {
max-width: 640px;
padding: 92px 0 56px; /* extra top padding clears the fixed header */
box-sizing: border-box;
}
.trust-events-hero h1 {
font-size: 44px;
line-height: 1.1;
margin: 0 0 16px;
color: #ffffff;
}
.trust-events-hero .trust-lime-bar {
display: block;
width: 64px;
height: 4px;
background-color: #B8D94A;
margin-bottom: 24px;
}
.trust-events-hero-intro {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
.trust-events-hero-intro p {
margin: 0;
}
@media (max-width: 700px) {
.trust-events-hero {
min-height: 280px;
}
.trust-events-hero-text {
max-width: none;
padding: 72px 24px 40px;
}
.trust-events-hero h1 {
font-size: 32px;
}
.trust-events-hero-overlay {
background: linear-gradient(180deg, rgba(13, 59, 94, 0.95) 0%, rgba(13, 59, 94, 0.85) 55%, rgba(13, 59, 94, 0.5) 100%);
}
}
/* ── Hub body: filters + list ────────────────────────────────────────── */
.trust-events-hub {
background-color: #ffffff;
box-sizing: border-box;
}
.trust-events-hub-inner {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 48px 48px 80px;
box-sizing: border-box;
}
.trust-events-filter-label {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #0D3B5E;
margin: 0 0 12px;
}
.trust-events-filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid #E5E9EE;
}
.trust-events-filter {
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: #0D3B5E;
background: #ffffff;
border: 1.5px solid #0D3B5E;
border-radius: 999px;
padding: 8px 20px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
box-sizing: border-box;
}
.trust-events-filter:hover {
background-color: rgba(13, 59, 94, 0.06);
}
.trust-events-filter.is-active {
background-color: #0D3B5E;
color: #ffffff;
}
/* ── Single event row ────────────────────────────────────────────────── */
.trust-event-row {
display: flex;
align-items: stretch; /* laisse la colonne latérale s'étirer sur toute la hauteur de la row */
gap: 24px;
padding: 32px 0;
border-bottom: 1px solid #E5E9EE;
box-sizing: border-box;
}
.trust-event-row:last-child {
border-bottom: none;
}
.trust-event-row-main {
flex: 0 1 480px;
max-width: 480px;
min-width: 0;
}
.trust-event-row-date {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #5B6B7A;
margin: 0 0 8px;
}
.trust-event-icon-calendar {
width: 14px;
height: 14px;
flex-shrink: 0;
color: #5B6B7A;
}
.trust-event-icon {
font-size: 14px;
line-height: 1;
}
.trust-event-row-title {
font-size: 22px;
line-height: 1.3;
color: #0D3B5E;
margin: 0;
}
.trust-event-badge {
display: inline-block;
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 999px;
margin: 0;
}
.trust-event-badge-workshop {
background-color: #E4F3C7;
color: #4C6B1F;
}
.trust-event-badge-conference {
background-color: #EFE3FA;
color: #5B3A8A;
}
.trust-event-badge-webinar {
background-color: #DCEEFB;
color: #1F5F8B;
}
.trust-event-badge-community {
background-color: #D6F2EA;
color: #1F7A63;
}
.trust-event-row-location {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #5B6B7A;
margin: 0 0 12px;
}
.trust-event-icon-pin {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #5B6B7A; /* hérité par le stroke="currentColor" du SVG */
}
.trust-event-row-summary {
font-size: 15px;
line-height: 1.6;
color: #33414D;
margin: 0;
}
/* Colonne entre le texte et l'image : badge en haut, actions en bas.
margin-left: auto pousse cette colonne (et l'image qui suit) vers
le bord droit du conteneur, quelle que soit sa largeur. */
.trust-event-row-side {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left: auto;
}
/* Bloc "Add to Calendar + View event" — maintenant un élément flex
à part entière de .trust-event-row, plus un enfant de la colonne
de texte. align-self: flex-end le cale en bas de la row, proche
visuellement du bas de l'image. */
.trust-event-row-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto; /* pousse les boutons en bas de la colonne, même si le badge est absent */
white-space: nowrap;
}
.trust-event-row-image {
flex: 0 0 320px;
max-width: 320px;
aspect-ratio: 16 / 10;
border-radius: 8px;
overflow: hidden;
align-self: flex-start; /* garde sa hauteur calculée par aspect-ratio, ignore le stretch de la row */
}
.trust-event-row-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 700px) {
.trust-event-row {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.trust-event-row-image {
order: -1;
align-self: stretch;
max-width: 100%;
width: 100%;
}
.trust-event-row-main {
max-width: none;
}
.trust-event-row-side {
margin-left: 0;
align-items: flex-start;
}
.trust-event-row-actions {
margin-top: 0;
}
}
@media (max-width: 700px) {
.trust-event-row {
flex-direction: column-reverse;
gap: 16px;
}
.trust-event-row-image {
flex: 1 1 auto;
max-width: 100%;
width: 100%;
}
.trust-event-row-summary {
max-width: none;
}
}
/* ── Add to Calendar (shared: hub rows + single sidebar) ─────────────── */
.trust-event-add-to-calendar {
position: relative;
display: inline-flex;
align-items: center;
}
.trust-event-cal-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #EEF1F4;
border: none;
cursor: pointer;
font-size: 16px;
transition: background-color 0.15s ease;
}
.trust-event-cal-toggle:hover {
background-color: #E0E5EA;
}
.trust-event-cal-toggle svg {
width: 16px;
height: 16px;
}
.trust-event-cal-label {
font-size: 12px;
font-weight: 600;
color: #5B6B7A;
/* margin-left: 8px; */
text-transform: uppercase;
letter-spacing: 0.03em;
}
.trust-event-cal-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 20;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(13, 59, 94, 0.16);
min-width: 200px;
padding: 8px 0;
}
.trust-event-cal-menu.is-open {
display: block;
}
.trust-event-cal-menu a {
display: block;
padding: 10px 16px;
font-size: 14px;
color: #0D3B5E;
text-decoration: none;
}
.trust-event-cal-menu a:hover {
background-color: #F4F6F8;
}
/* ── Buttons (row "View event", "Visit website"...) ──────────────────── */
.trust-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
padding: 10px 22px;
border-radius: 6px;
text-decoration: none;
white-space: nowrap;
box-sizing: border-box;
}
.trust-btn-primary {
background-color: #0D3B5E;
color: #ffffff;
}
.trust-btn-primary:hover {
background-color: #1F5F8B;
}
.trust-btn-secondary {
background-color: transparent;
color: #0D3B5E;
border: 1.5px solid #0D3B5E;
}
.trust-btn-secondary:hover {
background-color: rgba(13, 59, 94, 0.06);
}
/* ── Load more ────────────────────────────────────────────────────────── */
.trust-events-load-more {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
max-width: 260px;
margin: 32px auto 0;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
color: #0D3B5E;
background: #ffffff;
border: 1.5px solid #0D3B5E;
border-radius: 999px;
cursor: pointer;
box-sizing: border-box;
}
.trust-events-load-more:hover {
background-color: rgba(13, 59, 94, 0.06);
}
.trust-events-load-more:disabled {
opacity: 0.6;
cursor: default;
}
.trust-events-load-more-chevron {
font-size: 12px;
}
.trust-events-empty {
font-size: 15px;
color: #5B6B7A;
padding: 32px 0;
}
/* ── Online badge (row + single) ─────────────────────────────────────── */
.trust-event-badge-online {
display: inline-block;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
background-color: #DCEEFB;
color: #1F5F8B;
margin-left: 8px;
vertical-align: middle;
}
/* ==========================================================================
Events — Single event (single-event.php)
========================================================================== */
.trust-event-single-hero {
position: relative;
/* min-height: 340px; */
min-height: 400px;
display: flex;
align-items: flex-end;
overflow: hidden;
background-color: #0D3B5E;
}
.trust-event-single-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.trust-event-single-hero-overlay {
position: relative;
z-index: 2;
width: 100%;
box-sizing: border-box;
padding: 48px 0;
padding-top: 64px; /* extra top padding clears the fixed header */
padding-bottom: 25px;
/* background: linear-gradient(0deg, rgba(13, 59, 94, 0.92) 0%, rgba(13, 59, 94, 0.3) 70%, rgba(13, 59, 94, 0) 100%); */
background: linear-gradient(0deg, rgba(13, 59, 94, 0.92) 0%, rgba(13, 59, 94, 0.6) 90%, rgba(13, 59, 94, 0) 100%);
}
.trust-event-single-hero-inner {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
box-sizing: border-box;
}
.trust-event-single-hero-overlay h1 {
font-size: 38px;
line-height: 1.2;
color: #ffffff;
margin: 0;
}
.trust-event-single-body {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 56px 48px 80px;
display: flex;
gap: 56px;
align-items: flex-start;
box-sizing: border-box;
}
.trust-event-single-main {
flex: 1 1 65%;
min-width: 0;
font-size: 16px;
line-height: 1.7;
color: #33414D;
}
.trust-event-single-main p {
margin: 0 0 20px;
}
.trust-event-single-main a {
color: #1F5F8B;
text-decoration: underline;
}
.trust-event-single-main a:hover {
color: #7ab317;
}
.trust-event-single-sidebar {
flex: 0 0 320px;
max-width: 320px;
position: sticky;
top: 32px;
}
.trust-event-info-card {
background-color: #F4F6F8;
border-radius: 12px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 4px;
box-sizing: border-box;
}
.trust-event-info-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #5B6B7A;
margin: 16px 0 4px;
}
.trust-event-info-label:first-child {
margin-top: 0;
}
.trust-event-info-value {
font-size: 15px;
color: #0D3B5E;
margin: 0 0 4px;
}
.trust-event-info-card .trust-event-add-to-calendar {
margin-top: 20px;
}
.trust-event-info-card .trust-event-cal-toggle {
width: auto;
height: auto;
border-radius: 6px;
padding: 10px 22px;
display: inline-flex;
gap: 8px;
background-color: #0D3B5E;
color: #ffffff;
font-size: 14px;
font-weight: 600;
}
.trust-event-info-card .trust-event-cal-toggle:hover {
background-color: #1F5F8B;
}
.trust-event-single-visit,
.trust-event-single-back {
display: flex;
justify-content: center;
width: 100%;
margin-top: 20px;
}
@media (max-width: 900px) {
.trust-event-single-body {
flex-direction: column;
padding: 40px 24px 64px;
gap: 32px;
}
.trust-event-single-sidebar {
flex: 1 1 auto;
max-width: none;
position: static;
width: 100%;
}
}
@media (max-width: 700px) {
.trust-event-single-hero-overlay {
padding: 64px 24px 32px;
}
.trust-event-single-hero-inner {
padding: 0 24px;
}
.trust-event-single-hero-overlay h1 {
font-size: 28px;
}
}
/* ==========================================================================
Use Cases — Hub page (page-use-cases.php)
========================================================================== */
.trust-usecases-lead,
.trust-usecases-grid {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-usecases-hero,
.trust-usecase-hero,
.trust-usecase-body {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-usecases-hero {
position: relative;
min-height: 300px;
background: linear-gradient(100deg, #0D3B5E 0%, #14476F 40%, #1F5F8B 70%, #B8D94A 140%);
box-sizing: border-box;
}
.trust-usecases-hero-inner {
position: relative;
z-index: 2;
max-width: var(--page-max-width);
margin: 0 auto;
padding: 92px 48px 56px; /* extra top padding clears the fixed header */
box-sizing: border-box;
}
.trust-usecases-hero-title {
font-size: 44px;
line-height: 1.1;
color: #ffffff;
margin: 0 0 16px;
}
.trust-usecases-hero-rule {
display: block;
width: 64px;
height: 4px;
background-color: #B8D94A;
margin-bottom: 24px;
}
.trust-usecases-hero-intro {
max-width: 780px;
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
.trust-usecases-hero-intro p {
margin: 0;
}
@media (max-width: 700px) {
.trust-usecases-hero-inner {
padding: 72px 24px 40px;
}
.trust-usecases-hero-title {
font-size: 32px;
}
.trust-usecases-hero-intro {
max-width: none;
}
}
/* ── Lead paragraph ───────────────────────────────────────────────────── */
.trust-usecases-lead {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 35px 48px 16px;
box-sizing: border-box;
}
.trust-usecases-lead p {
font-size: 17px;
line-height: 1.7;
color: #33414D;
text-align: justify;
margin: 0;
}
@media (max-width: 700px) {
.trust-usecases-lead {
padding: 40px 24px 8px;
}
}
/* ── Cards grid ───────────────────────────────────────────────────────── */
.trust-usecases-grid {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 32px 48px 80px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
box-sizing: border-box;
}
.trust-usecases-empty {
grid-column: 1 / -1;
font-size: 15px;
color: #5B6B7A;
text-align: center;
padding: 32px 0;
}
@media (max-width: 900px) {
.trust-usecases-grid {
grid-template-columns: 1fr;
padding: 24px 24px 64px;
gap: 24px;
}
}
/* ── Single card ──────────────────────────────────────────────────────── */
.trust-usecase-card {
display: flex;
flex-direction: column;
background-color: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(13, 59, 94, 0.08);
box-sizing: border-box;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.trust-usecase-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(13, 59, 94, 0.16);
}
.trust-usecase-card-image {
display: block;
aspect-ratio: 16 / 9;
background-color: #E5E9EE;
overflow: hidden; /* nécessaire pour clipper le zoom de l'image au survol */
}
.trust-usecase-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.trust-usecase-card:hover .trust-usecase-card-image img {
transform: scale(1.06);
}
.trust-usecase-card-body {
padding: 24px 28px 28px;
box-sizing: border-box;
}
.trust-usecase-card-heading {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.trust-usecase-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
color: #1F5F8B;
}
.trust-usecase-card-title {
font-size: 19px;
line-height: 1.3;
color: #0D3B5E;
margin: 0;
}
.trust-usecase-card-title a {
color: inherit;
text-decoration: none;
}
.trust-usecase-card-title a:hover {
text-decoration: underline;
}
.trust-usecase-card-summary {
font-size: 14.5px;
line-height: 1.6;
color: #5B6B7A;
margin: 0 0 18px;
}
.trust-usecase-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #1F5F8B;
text-decoration: none;
}
.trust-usecase-card-link {
transition: gap 0.2s ease;
}
.trust-usecase-card:hover .trust-usecase-card-link {
gap: 10px; /* la flèche s'écarte légèrement du texte */
}
.trust-usecase-card-link:hover {
text-decoration: underline;
}
.trust-usecase-card-link svg {
width: 16px;
height: 16px;
}
/* ==========================================================================
Use Cases — Single (single-use_case.php)
========================================================================== */
.trust-usecase-hero,
.trust-usecase-body {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-usecase-hero {
position: relative;
min-height: 440px;
overflow: hidden;
background-color: #0D3B5E;
box-sizing: border-box;
}
.trust-usecase-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
}
.trust-usecase-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(13, 59, 94, 0.95) 0%, rgba(13, 59, 94, 0.85) 35%, rgba(13, 59, 94, 0.35) 65%, rgba(13, 59, 94, 0) 100%);
}
.trust-usecase-hero-inner {
position: relative;
z-index: 2;
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
box-sizing: border-box;
}
.trust-usecase-hero-text {
max-width: 600px;
padding: 92px 0 56px; /* extra top padding clears the fixed header */
box-sizing: border-box;
}
.trust-usecase-hero-eyebrow {
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: #B8D94A;
margin: 0 0 16px;
}
.trust-usecase-hero-title {
font-size: 40px;
line-height: 1.15;
color: #ffffff;
margin: 0 0 16px;
}
.trust-usecase-hero-tagline {
font-size: 17px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
@media (max-width: 700px) {
.trust-usecase-hero {
min-height: 360px;
}
.trust-usecase-hero-text {
max-width: none;
padding: 72px 0 40px;
}
.trust-usecase-hero-inner {
padding: 0 24px;
}
.trust-usecase-hero-title {
font-size: 30px;
}
.trust-usecase-hero-overlay {
background: linear-gradient(180deg, rgba(13, 59, 94, 0.95) 0%, rgba(13, 59, 94, 0.85) 55%, rgba(13, 59, 94, 0.5) 100%);
}
}
/* ── Body: colonne unique pleine largeur ──────────────────────────────── */
.trust-usecase-body-inner {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 56px 48px 64px;
box-sizing: border-box;
}
.trust-usecase-meta {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid #E5E9EE;
}
.trust-usecase-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.trust-usecase-meta-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #5B6B7A;
}
.trust-usecase-meta-value {
font-size: 15px;
color: #0D3B5E;
}
@media (max-width: 700px) {
.trust-usecase-body-inner {
padding: 40px 24px 48px;
}
}
/* ── Sections génériques ──────────────────────────────────────────────── */
.trust-usecase-section {
margin-bottom: 48px;
}
.trust-usecase-section h2 {
font-size: 24px;
color: #0D3B5E;
margin: 0 0 16px;
}
.trust-usecase-richtext {
font-size: 15.5px;
line-height: 1.7;
color: #33414D;
}
.trust-usecase-richtext p {
margin: 0 0 16px;
}
.trust-usecase-richtext p:last-child {
margin-bottom: 0;
}
/* ── Panels: Solution + Key Features côte à côte, fond coloré ───────────── */
.trust-usecase-panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 40px;
}
.trust-usecase-panel {
border-radius: 16px;
padding: 36px;
box-sizing: border-box;
}
.trust-usecase-panel h2 {
font-size: 22px;
color: #0D3B5E;
margin: 0 0 16px;
}
.trust-usecase-panel-solution {
background-color: #EAF2F8;
}
.trust-usecase-panel-features {
background-color: #F4F8EC;
}
/* Liste "Key Features" avec puces check vertes */
.trust-usecase-features-list ul {
list-style: none;
margin: 0;
padding: 0;
}
.trust-usecase-features-list li {
position: relative;
padding: 0 0 16px 34px;
margin-bottom: 16px;
border-bottom: 1px solid rgba(13, 59, 94, 0.08);
}
.trust-usecase-features-list li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.trust-usecase-features-list li::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #B8D94A;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 11px 11px;
}
@media (max-width: 700px) {
.trust-usecase-panels {
grid-template-columns: 1fr;
}
.trust-usecase-panel {
padding: 28px;
}
}
/* ── Impact: bande pleine largeur, bloc unique ──────────────────────────── */
.trust-usecase-impact {
background-color: #EAF2F8;
border-radius: 16px;
padding: 40px;
margin-bottom: 40px;
box-sizing: border-box;
}
.trust-usecase-impact h2 {
font-size: 24px;
color: #0D3B5E;
margin: 0 0 14px;
}
.trust-usecase-impact-rule {
display: block;
width: 32px;
height: 3px;
background-color: #B8D94A;
margin-bottom: 18px;
}
@media (max-width: 700px) {
.trust-usecase-impact {
padding: 28px;
}
}
/* ── The Challenge : Icon ────────────────────────────────────── */
.trust-usecase-section-heading {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.trust-usecase-section-heading h2 {
margin: 0;
}
.trust-usecase-section-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 50%;
background-color: #0D3B5E;
color: #ffffff;
}
/* ── Bas de section : lien retour ────────────────────────────────────── */
.trust-usecase-back-wrap {
margin-top: 8px;
}
.trust-usecase-back-link {
font-size: 14px;
font-weight: 600;
color: #1F5F8B;
text-decoration: none;
}
.trust-usecase-back-link:hover {
text-decoration: underline;
}
/* === Legal Page (Privacy & Cookies Policy, Terms, etc.) === */
.trust-legal-page {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-legal-header {
background: #0D3B5E;
padding: 92px 0 40px; /* extra top padding clears the fixed header */
}
.trust-legal-header-inner {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
box-sizing: border-box; /* keep the 48px padding inside the 1280px, like every other page + the header */
}
.trust-legal-title {
color: #ffffff;
font-size: 2.5rem;
font-weight: 700;
margin: 0;
}
.trust-legal-body {
padding: 56px 0 96px;
}
.trust-legal-body-inner {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
box-sizing: border-box;
display: grid;
grid-template-columns: 260px 1fr;
gap: 64px;
align-items: start;
}
.trust-legal-toc {
position: sticky;
top: 32px;
border-left: 2px solid #E5EAF0;
padding-left: 20px;
}
.trust-legal-toc-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #1F5F8B;
font-weight: 600;
margin: 0 0 12px;
}
.trust-legal-toc ul {
list-style: none;
margin: 0;
padding: 0;
}
.trust-legal-toc li {
margin-bottom: 8px;
}
.trust-legal-toc-level-3 {
padding-left: 14px;
font-size: 0.85rem;
}
.trust-legal-toc a {
color: #0D3B5E;
text-decoration: none;
line-height: 1.4;
}
.trust-legal-toc a:hover {
color: #1F5F8B;
text-decoration: underline;
}
.trust-legal-content h2 {
color: #0D3B5E;
font-size: 1.75rem;
font-weight: 700;
margin: 48px 0 16px;
scroll-margin-top: 100px;
}
.trust-legal-content h2:first-child {
margin-top: 0;
}
.trust-legal-content h3 {
color: #1F5F8B;
font-size: 1.25rem;
font-weight: 700;
margin: 32px 0 12px;
scroll-margin-top: 100px;
}
.trust-legal-content p,
.trust-legal-content li {
color: #333333;
font-size: 1rem;
line-height: 1.7;
}
.trust-legal-content p {
margin: 0 0 16px;
}
.trust-legal-content ul,
.trust-legal-content ol {
margin: 0 0 16px;
padding-left: 22px;
}
.trust-legal-content li {
margin-bottom: 8px;
}
.trust-legal-content a {
color: #1F5F8B;
text-decoration: underline;
}
.trust-legal-content a:hover {
color: #0D3B5E;
}
.trust-legal-content strong {
color: #0D3B5E;
}
@media (max-width: 900px) {
.trust-legal-body-inner {
grid-template-columns: 1fr;
}
.trust-legal-toc {
position: static;
border-left: none;
border-bottom: 1px solid #E5EAF0;
padding-left: 0;
padding-bottom: 24px;
margin-bottom: 24px;
}
}
/* === Resources page === */
.trust-resources-hero,
.trust-resources {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
.trust-resources-hero {
position: relative;
min-height: 220px;
background: linear-gradient(100deg, #0D3B5E 0%, #14476F 40%, #1F5F8B 70%, #B8D94A 140%);
box-sizing: border-box;
}
.trust-resources-hero-inner {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 92px 48px 56px; /* extra top padding clears the fixed header */
box-sizing: border-box;
}
.trust-resources-hero-title {
font-size: 44px;
line-height: 1.1;
color: #ffffff;
margin: 0;
}
.trust-resources {
padding: 56px 0 96px;
}
.trust-resources-inner {
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 48px;
box-sizing: border-box;
}
.trust-resources-empty {
color: #5B6B7A;
font-size: 1rem;
}
/* ── Folder (category) ───────────────────────────────────────────────── */
.trust-resource-folder {
margin-bottom: 40px;
}
.trust-resource-folder-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
background: none;
border: none;
padding: 0 0 16px;
margin: 0;
cursor: pointer;
font-family: inherit;
font-size: 1.15rem;
font-weight: 700;
color: #0D3B5E;
text-align: left;
}
.trust-resource-folder-toggle-empty {
cursor: default;
color: #8A97A3;
}
.trust-resource-folder-icon {
flex: none;
width: 24px;
height: 24px;
color: #1F5F8B;
}
.trust-resource-folder-toggle-empty .trust-resource-folder-icon {
color: #A9B4BE;
}
.trust-resource-folder-name {
flex: 1;
}
/* Icon swap driven purely by aria-expanded, no JS class toggling needed. */
.trust-resource-folder-toggle[aria-expanded="false"] .trust-resource-folder-icon-open,
.trust-resource-folder-toggle[aria-expanded="true"] .trust-resource-folder-icon-closed {
display: none;
}
/* ── Table ────────────────────────────────────────────────────────────── */
.trust-resource-folder-panel {
overflow-x: auto;
}
.trust-resource-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
/* Fixed layout so the "Link" column keeps the same width across
every folder, regardless of the Summary text length. */
table-layout: fixed;
}
/* Summary takes the remaining space; Link column is a constant width. */
.trust-resource-table th:last-child,
.trust-resource-table td:last-child {
width: 160px;
}
.trust-resource-summary {
overflow-wrap: anywhere;
}
.trust-resource-summary-link {
color: inherit;
text-decoration: none;
}
.trust-resource-summary-link:hover,
.trust-resource-summary-link:focus-visible {
color: #1F5F8B;
text-decoration: underline;
}
.trust-resource-table thead th {
text-align: left;
color: #333333;
font-weight: 700;
padding: 12px 16px;
border-bottom: 2px solid #E5EAF0;
white-space: nowrap;
}
.trust-resource-sort-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
font-weight: 700;
color: inherit;
cursor: pointer;
}
.trust-resource-sort-icon {
width: 14px;
height: 14px;
transition: transform 0.15s ease;
}
.trust-resource-sort-btn[data-sort-dir="desc"] .trust-resource-sort-icon {
transform: rotate(180deg);
}
.trust-resource-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid #E5EAF0;
color: #333333;
vertical-align: middle;
}
.trust-resource-view-btn {
padding: 6px 20px;
font-size: 13px;
}
/* ── Table footer (Reset / per-page / count) ─────────────────────────── */
.trust-resource-folder-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
padding-top: 16px;
}
.trust-resource-reset {
display: inline-flex;
align-items: center;
gap: 6px;
color: #1F5F8B;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}
.trust-resource-reset:hover {
text-decoration: underline;
}
.trust-resource-reset-icon {
width: 14px;
height: 14px;
}
.trust-resource-per-page {
font-size: 0.9rem;
color: #5B6B7A;
}
.trust-resource-per-page-select {
font-family: inherit;
font-size: 0.9rem;
color: #333333;
border: 1px solid #C9D2DA;
border-radius: 4px;
padding: 4px 8px;
margin: 0 4px;
}
.trust-resource-pagination {
display: flex;
align-items: center;
gap: 4px;
}
.trust-resource-page-btn {
min-width: 30px;
padding: 4px 8px;
font-family: inherit;
font-size: 0.85rem;
color: #1F5F8B;
background: none;
border: 1px solid #C9D2DA;
border-radius: 4px;
cursor: pointer;
}
.trust-resource-page-btn:disabled {
color: #C9D2DA;
cursor: default;
}
.trust-resource-page-btn.is-current {
background-color: #0D3B5E;
border-color: #0D3B5E;
color: #ffffff;
}
.trust-resource-count {
margin-left: auto;
font-size: 0.9rem;
color: #5B6B7A;
}
@media (max-width: 700px) {
.trust-resources-hero-inner {
padding: 72px 24px 40px;
}
.trust-resources-hero-title {
font-size: 32px;
}
.trust-resources-inner {
padding: 0 24px;
}
.trust-resource-folder-footer {
gap: 12px;
}
.trust-resource-count {
margin-left: 0;
width: 100%;
}
}
/* ==========================================================================
TRUST — Back to top button (Homepage, Legal pages)
========================================================================== */
.trust-back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 900;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: #1F5F8B;
color: #ffffff;
cursor: pointer;
box-shadow: 0 4px 14px rgba(13, 59, 94, 0.35);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.trust-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.trust-back-to-top:hover,
.trust-back-to-top:focus-visible {
background: #7ab317;
}
@media (max-width: 700px) {
.trust-back-to-top {
right: 16px;
bottom: 16px;
}
}