/* Theme Name: WSPN Theme URI: https://wspn.org.au Author: Whitsunday Suicide Prevention Network Description: Custom block theme for the Whitsunday Suicide Prevention Network. Direction: "Sunrise over the islands". Tokens and components live in this file; see DESIGN.md in the project repo. Version: 1.0.0 Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 8.0 License: GNU General Public License v2 or later Text Domain: wspn */ /* ========================================================================== Whitsunday Suicide Prevention Network Design system — tokens + components Direction: "Sunrise over the islands" (see DESIGN.md §3) Written to port cleanly to WordPress: no build step, no preprocessor, custom properties on :root, BEM-ish class names. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts Self-hosted (assets/fonts/, latin subsets from Google Fonts). Figtree for display, Inter for body. System stack only as a fallback while they load. -------------------------------------------------------------------------- */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://wspn.org.au/wp-content/uploads/2026/09/figtree-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://wspn.org.au/wp-content/uploads/2026/09/figtree-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://wspn.org.au/wp-content/uploads/2026/09/figtree-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url("https://wspn.org.au/wp-content/uploads/2026/09/figtree-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://wspn.org.au/wp-content/uploads/2026/09/inter-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://wspn.org.au/wp-content/uploads/2026/09/inter-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://wspn.org.au/wp-content/uploads/2026/09/inter-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- 2. Tokens -------------------------------------------------------------------------- */ :root { /* Colour — sampled from assets/wspn-logo.png */ --navy: #00518A; --navy-deep: #00325A; --navy-abyss: #002340; --reef: #34C0CC; --reef-ink: #0E7C86; --reef-wash: #E3F4F8; --sun: #FBD700; --sun-warm: #FFC400; --ink: #1B2B36; --ink-soft: #4A5C68; --mist: #F4FAFB; --white: #FFFFFF; --alert: #C1121F; --rule: rgba(0, 81, 138, .12); --rule-strong:rgba(0, 81, 138, .22); /* Type */ --font-display: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --fs-hero: clamp(3rem, 7vw, 5.75rem); --fs-h1: clamp(2.125rem, 4.5vw, 3.25rem); --fs-h2: clamp(1.625rem, 3.1vw, 2.25rem); --fs-h3: 1.25rem; --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-phone: clamp(1.75rem, 4vw, 2.5rem); /* Space */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --section-y: clamp(48px, 6vw, 72px); --gutter: clamp(20px, 5vw, 48px); --measure: 72ch; --max: 1180px; /* Shape + depth */ --r-card: 12px; --r-pill: 999px; --lift: 0 1px 2px rgba(0, 50, 90, .06), 0 8px 24px rgba(0, 50, 90, .08); --lift-hover: 0 2px 4px rgba(0, 50, 90, .07), 0 14px 36px rgba(0, 50, 90, .12); /* Motion */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-sheet: cubic-bezier(.32, .72, 0, 1); --t-press: 100ms; --t-hover: 180ms; --t-panel: 240ms; --t-reveal: 900ms; /* entrance reveal — marketing content, not interactive UI */ --t-reveal-step: 110ms; /* per-item delay inside a staggered group */ /* Height reserved at the foot of the page for the fixed mobile crisis bar */ --crisis-bar-h: 44px; } /* -------------------------------------------------------------------------- 3. Reset + base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Reserve real space for the fixed mobile crisis bar so nothing hides behind it */ padding-bottom: calc(var(--crisis-bar-h) + env(safe-area-inset-bottom)); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; color: var(--navy-deep); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; } p { text-wrap: pretty; } p + p { margin-top: var(--s-4); } a { color: var(--navy); text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--t-hover) var(--ease-out); } a:hover { color: var(--reef-ink); } img, svg { display: block; max-width: 100%; height: auto; } ul, ol { padding: 0; list-style: none; } [hidden] { display: none !important; } /* Browser surfaces — themed, not left at defaults */ ::selection { background: var(--sun); color: var(--navy-deep); } :root { caret-color: var(--navy); accent-color: var(--navy); scrollbar-color: var(--rule-strong) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--r-pill); border: 3px solid var(--white); } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 81, 138, .38); } :focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--navy-deep); } .input:focus, .input:focus-visible { outline: 2px solid rgba(0, 81, 138, .45); outline-offset: 1px; box-shadow: 0 0 0 3px rgba(0, 81, 138, .12); } .skip-link { position: absolute; left: var(--s-4); top: var(--s-4); transform: translateY(-200%); z-index: 200; background: var(--navy-deep); color: var(--white); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); font-weight: 600; text-decoration: none; } .skip-link:focus { transform: translateY(0); color: var(--white); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 4. Layout -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: calc(800px + 2 * var(--gutter)); } .section { padding-block: var(--section-y); } .section--mist { background: var(--mist); } .section--navy { background: var(--navy-deep); color: rgba(255, 255, 255, .88); } /* Photographic variant of the navy band. The image carries the meaning (distance, water, isolation); the overlay carries the contrast. */ .section--photo { position: relative; isolation: isolate; background: var(--navy-deep); } .section--photo > .section__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .section--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 35, 64, .95) 0%, rgba(0, 35, 64, .88) 55%, rgba(0, 50, 90, .72) 100%); } .section--navy h2, .section--navy h3 { color: var(--white); } .section--navy .pillar__title { color: var(--sun); } /* Inline links only — buttons keep their own colour pairing. */ .section--navy a:not(.btn) { color: var(--sun); text-decoration-thickness: 1px; } .section--navy a:not(.btn):hover { color: var(--sun-warm); text-decoration-thickness: 1px; } .section__head { max-width: var(--measure); margin-bottom: var(--s-7); } .section__head p { margin-top: var(--s-4); color: var(--ink-soft); font-size: 1.1875rem; } .section--navy .section__head p { color: rgba(255, 255, 255, .76); } /* The horizon divider — the recurring rhyme with the logo */ .horizon { height: 4px; background: linear-gradient(90deg, var(--sun) 0%, var(--sun) 18%, var(--reef) 18%, var(--reef) 52%, var(--navy) 52%); border: 0; } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1; padding: var(--s-4) var(--s-6); border: 2px solid transparent; border-radius: var(--r-pill); text-decoration: none; cursor: pointer; min-height: 52px; transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .btn:active { transform: scale(.97); } .btn--primary { background: var(--navy); color: var(--white); } .btn--primary:hover { background: var(--navy-deep); color: var(--white); } /* The crisis affordance. 9.24:1 — the highest-contrast pair in the system. */ .btn--crisis { background: var(--sun); color: var(--navy-deep); } .btn--crisis:hover { background: var(--sun-warm); color: var(--navy-deep); } .btn--outline { background: transparent; color: var(--navy); border-color: var(--rule-strong); } .btn--outline:hover { background: var(--navy); color: var(--white); border-color: var(--navy); } .btn--on-navy { background: rgba(0, 35, 64, .45); backdrop-filter: blur(3px); color: var(--white); border-color: rgba(255, 255, 255, .55); } .btn--on-navy:hover { background: var(--white); color: var(--navy-deep); border-color: var(--white); } .btn--sm { font-size: .9375rem; padding: var(--s-3) var(--s-5); min-height: 44px; } /* -------------------------------------------------------------------------- 6. Header -------------------------------------------------------------------------- */ /* On mobile the crisis bar is fixed to the bottom, so .topbar carries only the header. On desktop both ride together and stay pinned. */ .topbar { position: sticky; top: 0; z-index: 100; } /* Cross-document view transitions: on browsers that support it (Chrome/Edge), pin the header as a continuous element across full-page navigations instead of it flashing out and back in with the rest of the page. Falls back to a normal navigation with no downside where unsupported. */ @view-transition { navigation: auto; } .topbar { view-transition-name: site-header; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation: none !important; } } .header { background: var(--white); border-bottom: 1px solid var(--rule); } .header__inner { position: relative; display: flex; align-items: center; gap: var(--s-5); min-height: 76px; } /* The mark hangs from the header on its own panel: flush with the top edge, square where it meets the bar, rounded where it leaves it. The keeps a slim footprint in the flex row, so the header height never changes. */ .header__logo { position: relative; flex: 0 0 112px; height: 56px; display: block; text-decoration: none; } .header__logo::before { content: ""; position: absolute; left: 0; top: -11px; width: 112px; height: 116px; background: var(--white); border-radius: 0 0 18px 18px; box-shadow: 0 14px 28px -10px rgba(0, 50, 90, .32); } .header__logo img { position: absolute; left: 6px; top: -5px; width: 100px; height: auto; z-index: 1; } /* Below the desktop breakpoint the panel has nowhere to hang without landing on the hero headline, so the mark simply sits in the bar. */ @media (max-width: 1023px) { .header__logo { flex: 0 0 auto; height: 52px; width: auto; } .header__logo::before { display: none; } .header__logo img { position: static; transform: none; width: auto; height: 52px; } } .nav { display: none; margin-left: auto; } /* Segmented control rather than a row of underlines. */ .nav__list { display: flex; align-items: center; gap: 2px; padding: 4px; background: rgba(0, 81, 138, .06); border-radius: var(--r-pill); } .nav__link { display: block; font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: var(--navy-deep); text-decoration: none; padding: 9px 15px; border-radius: var(--r-pill); transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out); } .nav__link:hover { background: var(--white); color: var(--navy); box-shadow: 0 1px 2px rgba(0, 50, 90, .10); } .nav__link[aria-current="page"] { background: var(--navy); color: var(--white); } .header__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; } .header__actions .btn--outline { display: none; } @media (min-width: 700px) { .header__actions { gap: var(--s-3); } .header__actions .btn--outline { display: inline-flex; } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; padding: 0; background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); color: var(--navy-deep); cursor: pointer; } .nav-toggle:hover { background: var(--mist); } /* Mobile drawer — slides from the trigger side (spatial consistency) */ .drawer { position: fixed; inset: 0 0 0 auto; z-index: 150; width: min(360px, 88vw); background: var(--white); border-left: 1px solid var(--rule); padding: var(--s-5) var(--s-5) var(--s-8); transform: translateX(100%); visibility: hidden; transition: transform var(--t-panel) var(--ease-sheet), visibility var(--t-panel); overflow-y: auto; } .drawer[data-open="true"] { transform: translateX(0); visibility: visible; } .drawer__head { display: flex; justify-content: flex-end; margin-bottom: var(--s-5); } .drawer__list { display: grid; gap: var(--s-2); } .drawer__link { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--navy-deep); text-decoration: none; padding: var(--s-4) var(--s-3); border-radius: 8px; } .drawer__link:hover { background: var(--mist); color: var(--navy); } .drawer__actions { display: grid; gap: var(--s-3); margin-top: var(--s-6); } .drawer__actions .btn { justify-content: center; } .scrim { position: fixed; inset: 0; z-index: 140; background: rgba(0, 35, 64, .48); opacity: 0; visibility: hidden; transition: opacity var(--t-panel) var(--ease-out), visibility var(--t-panel); } .scrim[data-open="true"] { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- 7. Crisis bar — the single most important component on the site. No entrance animation, ever. It is present at first paint. -------------------------------------------------------------------------- */ .crisis-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; min-height: var(--crisis-bar-h); background: var(--navy-deep); color: var(--white); border-top: 3px solid var(--sun); padding: var(--s-1) var(--s-4) calc(var(--s-1) + env(safe-area-inset-bottom)); } .crisis-bar__inner { max-width: var(--max); margin-inline: auto; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--s-2); font-size: var(--fs-small); } /* The label is context, not the action. It goes first when space is short. */ .crisis-bar__label { display: none; font-weight: 600; color: rgba(255, 255, 255, .82); } @media (min-width: 560px) { .crisis-bar__label { display: inline; } .crisis-bar__inner { gap: var(--s-2) var(--s-5); } } .crisis-bar__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; /* never let a helpline number break across lines */ color: var(--sun); text-decoration: none; padding: var(--s-2); border-radius: var(--r-pill); min-height: 44px; /* touch minimum — holds on mobile */ } @media (min-width: 560px) { .crisis-bar__link { font-size: 1rem; padding: var(--s-1) var(--s-3); } } /* Pointer devices don't need a 44px target, so the strip gets out of the way. */ @media (min-width: 1024px) { .crisis-bar__link { min-height: 32px; font-size: .9375rem; } .crisis-bar__label { font-size: .875rem; } } /* Mobile bar: label + Lifeline only, as slim as a 40px tap target allows. 000 stays in the emergency note and the footer; the bar is for talking. */ @media (max-width: 1023px) { .crisis-bar { padding-block: 2px; } .crisis-bar__inner { gap: var(--s-2); } .crisis-bar__label { display: inline; font-size: .8125rem; white-space: nowrap; } .crisis-bar__link { min-height: 40px; font-size: .9375rem; padding: var(--s-1) var(--s-2); } .crisis-bar__link--emergency { display: none; } } @media (max-width: 359px) { .crisis-bar__link svg { display: none; } .crisis-bar__label { font-size: .75rem; } } .crisis-bar__link:hover { background: rgba(251, 215, 0, .14); color: var(--sun); } .crisis-bar__link--emergency { color: var(--white); } .crisis-bar__link--emergency:hover { background: rgba(255, 255, 255, .12); color: var(--white); } /* -------------------------------------------------------------------------- 8. Hero -------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; background: var(--navy-abyss); color: var(--white); overflow: hidden; padding-block: clamp(40px, 5.5vw, 72px) clamp(44px, 6vw, 80px); } /* Real photograph of the place this Network serves. Swap for a WSPN community photo when the client supplies one — see DESIGN.md §8. */ .hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* Scrim. Carries the type contrast, so it is opaque where the words sit and opens up over the bay on the right. */ .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 35, 64, .55) 0%, rgba(0, 35, 64, 0) 28%), linear-gradient(96deg, rgba(0, 35, 64, .95) 0%, rgba(0, 35, 64, .90) 34%, rgba(0, 50, 90, .62) 62%, rgba(0, 50, 90, .38) 100%); } /* The logo's horizon, as a rule at the foot of the hero rather than a drawn scene. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--sun) 0%, var(--sun) 18%, var(--reef) 18%, var(--reef) 52%, var(--navy) 52%); } .hero__content { position: relative; max-width: 900px; } .hero__title { font-size: var(--fs-hero); font-weight: 800; line-height: .96; letter-spacing: -0.035em; text-transform: uppercase; color: var(--white); text-shadow: 0 2px 24px rgba(0, 35, 64, .5); } .hero__title em { font-style: normal; color: var(--sun); display: block; } .hero__lead { margin-top: var(--s-4); max-width: 46ch; font-size: clamp(1.0625rem, 1.9vw, 1.3125rem); line-height: 1.5; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 12px rgba(0, 35, 64, .6); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); } .hero__credit { position: absolute; right: var(--s-3); bottom: var(--s-4); z-index: 1; font-size: .6875rem; color: rgba(255, 255, 255, .5); } .hero__credit a { color: inherit; text-decoration: none; } .hero__credit a:hover { color: rgba(255, 255, 255, .85); } /* Phones: the photograph stays behind the words. The scrim is near-solid at the top where the headline sits and eases off, so the crowd still reads through the lower half. */ @media (max-width: 767px) { .hero { padding-block: var(--s-7) var(--s-8); min-height: 560px; display: flex; align-items: flex-end; } .hero__photo { object-position: 50% 40%; } .hero__scrim { background: linear-gradient(180deg, rgba(0, 35, 64, .55) 0%, rgba(0, 35, 64, .78) 45%, rgba(0, 35, 64, .92) 100%); } .hero__title { font-size: clamp(2.75rem, 12.5vw, 3.5rem); } .hero__lead { margin-top: var(--s-3); max-width: 40ch; } .hero__actions { margin-top: var(--s-5); } .hero__credit { position: static; padding: var(--s-3) 0 0; text-align: left; } } /* -------------------------------------------------------------------------- 9. Helpline cards — phone numbers are typographic heroes -------------------------------------------------------------------------- */ .emergency-note { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) var(--s-4); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-pill); margin-bottom: var(--s-5); } .emergency-note__icon { color: var(--alert); flex-shrink: 0; width: 20px; height: 20px; } .emergency-note__text { flex: 1 1 180px; min-width: 0; color: var(--ink-soft); font-size: .9375rem; } /* Stays one row at every width — the "000" button never drops to its own line, it just gets narrower alongside the (wrapping) text next to it. */ @media (max-width: 559px) { .emergency-note { border-radius: var(--r-card); flex-wrap: nowrap; gap: var(--s-2) var(--s-3); } .emergency-note__link { flex: 0 0 auto; margin-left: auto; } } .emergency-note__link { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--alert); text-decoration: none; padding: var(--s-1) var(--s-4); min-height: 36px; display: inline-flex; align-items: center; border-radius: var(--r-pill); border: 2px solid currentColor; } .emergency-note__link:hover { background: var(--alert); color: var(--white); } .helplines { display: grid; gap: var(--s-5); grid-template-columns: 1fr; } .helpline { display: flex; flex-direction: column; padding: var(--s-6); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); transition: box-shadow var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); } .helpline:hover { transform: translateY(-2px); box-shadow: var(--lift-hover); border-color: var(--rule-strong); } /* Each service's own logo carries the name, so there is no duplicate text label. A fixed box height keeps three different lockups on one baseline. */ .helpline__brand { display: flex; align-items: center; height: 44px; margin-bottom: var(--s-4); } .helpline__brand img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; } .helpline__number { display: inline-block; margin-top: var(--s-2); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-phone); line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--navy); text-decoration: none; } .helpline__number:hover { color: var(--reef-ink); text-decoration: underline; text-decoration-thickness: 2px; } .helpline__hours { margin-top: var(--s-2); font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); } .helpline__desc { margin-top: var(--s-4); font-size: 1rem; color: var(--ink-soft); } /* -------------------------------------------------------------------------- 10. Mission -------------------------------------------------------------------------- */ .mission__lead { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.25rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--navy-deep); max-width: 22ch; } .mission__body { max-width: var(--measure); margin-top: var(--s-5); color: var(--ink-soft); } .mission__grid { display: grid; gap: var(--s-7); } /* -------------------------------------------------------------------------- 11. Pillars — what the Network does -------------------------------------------------------------------------- */ .pillars { display: grid; gap: var(--s-6) var(--s-7); grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .pillar { padding-top: var(--s-5); border-top: 2px solid rgba(251, 215, 0, .55); } .pillar__title { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--sun); } .pillar__body { margin-top: var(--s-3); color: rgba(255, 255, 255, .82); font-size: 1.0625rem; } /* -------------------------------------------------------------------------- 12. Steps — Ask / Listen / Encourage / Check in -------------------------------------------------------------------------- */ .steps { display: grid; gap: var(--s-6); counter-reset: step; } .step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; } .step__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--reef-wash); color: var(--reef-ink); } .step__title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--navy-deep); } .step__body { margin-top: var(--s-2); color: var(--ink-soft); font-size: 1.0625rem; } .step__body em { font-style: normal; color: var(--navy); font-weight: 600; } /* -------------------------------------------------------------------------- 13. Events -------------------------------------------------------------------------- */ .events { display: grid; gap: var(--s-5); } .event { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; transition: box-shadow var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out); } .event:hover { transform: translateY(-2px); box-shadow: var(--lift-hover); } .event__media { position: relative; aspect-ratio: 16 / 9; background: var(--reef-wash); } .event__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; } .event__date { position: absolute; top: var(--s-4); left: var(--s-4); display: grid; place-items: center; width: 60px; padding: var(--s-2) 0; background: var(--navy-deep); color: var(--sun); border-radius: 8px; text-align: center; } .event__day { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; } .event__month { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); } .event__title { font-size: 1.25rem; } .event__title a { color: inherit; text-decoration: none; } .event__title a::after { content: ""; position: absolute; inset: 0; } .event__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-soft); } .event__meta span { display: inline-flex; align-items: center; gap: var(--s-2); } .event__desc { margin-top: var(--s-3); font-size: 1rem; color: var(--ink-soft); } .event { position: relative; } /* Empty state — designed, because it will happen */ .empty { display: grid; justify-items: center; text-align: center; gap: var(--s-4); padding: var(--s-8) var(--s-5); background: var(--mist); border: 1px dashed var(--rule-strong); border-radius: var(--r-card); } .empty__icon { color: var(--reef-ink); } .empty__title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--navy-deep); } .empty__body { max-width: 46ch; color: var(--ink-soft); } /* -------------------------------------------------------------------------- 14. Sponsors -------------------------------------------------------------------------- */ .sponsors { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s-4); align-items: center; } .sponsor { display: grid; place-items: center; min-height: 92px; padding: var(--s-4); background: var(--white); border: 1px solid var(--rule); border-radius: 8px; text-align: center; font-size: .8125rem; font-weight: 600; color: var(--ink-soft); transition: border-color var(--t-hover) var(--ease-out); } .sponsor:hover { border-color: var(--rule-strong); } /* -------------------------------------------------------------------------- 15. Newsletter -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 15. Form fields -------------------------------------------------------------------------- */ .input { width: 100%; min-height: 52px; padding: var(--s-3) var(--s-5); font-family: var(--font-body); font-size: 1.0625rem; color: var(--ink); background: var(--white); border: 1px solid var(--rule-strong); border-radius: var(--r-pill); transition: border-color var(--t-hover) var(--ease-out); } .input::placeholder { color: #7A8994; } .input:hover { border-color: var(--navy); } .form__note { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-soft); } /* -------------------------------------------------------------------------- 16. Footer -------------------------------------------------------------------------- */ .footer { background: var(--navy-abyss); color: rgba(255, 255, 255, .72); padding-block: var(--s-9) var(--s-6); font-size: 1rem; } .footer a { color: var(--white); } .footer a:hover { color: var(--sun); } .footer__news { display: grid; gap: var(--s-5); padding-bottom: var(--s-8); margin-bottom: var(--s-8); border-bottom: 1px solid rgba(255, 255, 255, .12); } .footer__news-title { font-size: clamp(1.375rem, 2.2vw, 1.75rem); color: var(--white); } .footer__news-text { margin-top: var(--s-2); color: rgba(255, 255, 255, .7); max-width: 44ch; } .footer__news-form { display: flex; gap: var(--s-2); align-self: center; } .footer__news-form .input { flex: 1 1 auto; min-width: 0; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: var(--white); } .footer__news-form .input::placeholder { color: rgba(255, 255, 255, .5); } .footer__news-form .input:hover, .footer__news-form .input:focus { border-color: var(--sun); } .footer__news-form .btn { flex: 0 0 auto; } @media (min-width: 860px) { .footer__news { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; } } @media (max-width: 479px) { .footer__news-form { flex-direction: column; } .footer__news-form .btn { justify-content: center; } } .footer__top { display: grid; gap: var(--s-8); } .footer__logo-card { display: inline-block; padding: var(--s-4) var(--s-5); background: var(--white); border-radius: 14px; } .footer__logo { height: 64px; width: auto; } .footer__tagline { margin-top: var(--s-5); max-width: 34ch; line-height: 1.6; } .footer__title { font-family: var(--font-display); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--reef); margin-bottom: var(--s-4); } .footer__list { display: grid; gap: var(--s-1); } .footer__list a { display: inline-block; padding: 6px 0; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); } .footer__list a:hover { border-bottom-color: var(--sun); } /* Crisis numbers repeated at the foot of every page: the last place someone scrolls to is still a place they might need them. */ .footer__help-list { display: grid; gap: var(--s-2); } .footer__help { display: block; padding: var(--s-3) var(--s-4); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; text-decoration: none; transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); } .footer__help:hover { background: rgba(255, 255, 255, .1); border-color: rgba(251, 215, 0, .5); } .footer__help-name { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .footer__help-num { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--sun); } .footer__help--emergency .footer__help-num { color: var(--white); } /* The ACNC roundel is teal on transparent, so it needs a light plate on navy. */ .footer__acnc { display: inline-grid; place-items: center; width: 116px; height: 116px; padding: var(--s-3); background: var(--white); border-radius: 50%; } .footer__acnc img { width: 100%; height: auto; } .footer__abn { margin-top: var(--s-4); font-size: .8125rem; color: rgba(255, 255, 255, .55); } .socials { display: flex; gap: var(--s-3); margin-top: var(--s-5); } .socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .socials a:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); } .socials a:active { transform: scale(.94); } .footer__ack { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid rgba(255, 255, 255, .12); max-width: none; width: 100%; font-size: var(--fs-small); line-height: 1.7; color: rgba(255, 255, 255, .6); } .footer__bar { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); font-size: .8125rem; color: rgba(255, 255, 255, .5); } .footer__bar a { color: rgba(255, 255, 255, .75); text-decoration: none; } .footer__bar a:hover { color: var(--sun); text-decoration: underline; } .footer__bar-credit { margin-left: auto; } @media (min-width: 640px) { .footer__top { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); } } @media (min-width: 1000px) { .footer__top { grid-template-columns: 1.5fr 1fr 1.25fr 0.9fr; gap: var(--s-7); } } /* -------------------------------------------------------------------------- 17. Asset placeholders — sized to the final crop so nothing shifts when the real photographs land. See DESIGN.md §8. -------------------------------------------------------------------------- */ .asset-pending { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s-2); justify-items: center; background: repeating-linear-gradient(135deg, rgba(0, 81, 138, .05) 0 12px, transparent 12px 24px), var(--reef-wash); color: var(--reef-ink); text-align: center; padding: var(--s-4); } .asset-pending__label { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .asset-pending__what { font-size: .8125rem; max-width: 26ch; opacity: .8; } /* -------------------------------------------------------------------------- 18. Breakpoints -------------------------------------------------------------------------- */ @media (min-width: 560px) { } @media (min-width: 768px) { .helplines { grid-template-columns: repeat(3, 1fr); } .events { grid-template-columns: repeat(3, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); } .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } .mission__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8); align-items: start; } } @media (min-width: 1024px) { html { scroll-padding-top: 156px; } .nav { display: block; } .nav-toggle { display: none; } .steps { grid-template-columns: repeat(4, 1fr); } /* The panel runs the full height of the bar: from the very top edge, through the crisis strip (whose content is right-aligned, so its left half is free) and down past the header. */ .header__logo { flex: 0 0 92px; } .header__logo::before { top: -54px; width: 92px; height: 132px; } .header__logo img { left: 13px; top: -41px; width: 66px; } /* Crisis moves above the header on desktop — always visible, never scrolled past */ .crisis-bar { position: static; z-index: auto; min-height: 0; padding-block: var(--s-1); border-top: 0; border-bottom: 3px solid var(--sun); } .crisis-bar__inner { justify-content: flex-end; } body { padding-bottom: 0; } } /* ========================================================================== Interior pages ========================================================================== */ /* -------------------------------------------------------------------------- Page hero — the interior counterpart to the home banner. Short by design: these pages are here to be used, not admired. -------------------------------------------------------------------------- */ .page-hero { position: relative; background: var(--navy-deep); color: var(--white); padding-block: clamp(40px, 6vw, 72px) clamp(44px, 6vw, 76px); } .page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--sun) 0%, var(--sun) 18%, var(--reef) 18%, var(--reef) 52%, var(--navy) 52%); } .page-hero__title { font-size: var(--fs-h1); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: var(--white); max-width: 20ch; } .page-hero__lead { margin-top: var(--s-4); max-width: 60ch; font-size: clamp(1.0625rem, 1.9vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, .82); } /* -------------------------------------------------------------------------- Prose -------------------------------------------------------------------------- */ .prose { max-width: var(--measure); } /* A run of short headed sections reads as a thin ribbon down the left of a wide page. Flowing it into two columns fills the row with no empty cells, and keeps each line at a comfortable measure. */ .prose--flow { max-width: none; } @media (min-width: 860px) { .prose--flow { columns: 2; column-gap: var(--s-9); } .prose--flow > * { break-inside: avoid; } .prose--flow h2, .prose--flow h3 { break-after: avoid; } .prose--flow h2:first-child, .prose--flow h3:first-child { margin-top: 0; } } .prose h2 { font-size: 1.625rem; margin-top: var(--s-7); } .prose h3 { font-size: 1.1875rem; margin-top: var(--s-6); color: var(--navy); } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p { margin-top: var(--s-3); color: var(--ink-soft); } .prose em { font-style: normal; color: var(--navy-deep); font-weight: 600; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .cards { display: grid; gap: var(--s-5); } .cards + .note, .cards + .wp-block-paragraph.note, .facts + .note, .facts + .wp-block-paragraph.note { margin-top: var(--s-5); } .section__head + .cards { margin-top: var(--s-6); } .card { display: flex; flex-direction: column; padding: var(--s-6); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); } .card__title { font-size: 1.1875rem; color: var(--navy-deep); } .card__body { margin-top: var(--s-3); color: var(--ink-soft); font-size: 1rem; flex: 1; } .card__link { margin-top: var(--s-4); font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy); text-decoration: none; } .card__link:hover { color: var(--reef-ink); text-decoration: underline; text-decoration-thickness: 2px; } /* -------------------------------------------------------------------------- Notes -------------------------------------------------------------------------- */ .note { padding: var(--s-4) var(--s-5); background: var(--mist); border: 1px solid var(--rule); border-radius: var(--r-card); color: var(--ink-soft); font-size: 1rem; } .note strong { color: var(--navy-deep); } .about-help-note { margin-top: var(--s-5); padding: var(--s-4) 0 0; background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; } .note--warn { background: #FFFCEC; border-color: rgba(251, 215, 0, .55); } .card__link a:hover, .helpline__number a:hover { text-decoration-thickness: 1px; text-underline-offset: .2em; } /* -------------------------------------------------------------------------- Service Finder -------------------------------------------------------------------------- */ .finder-quiz { margin-bottom: var(--s-5); } .finder-quiz__toggle { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-4) var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--reef-wash); color: var(--navy-deep); font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-align: left; cursor: pointer; } .finder-quiz__toggle:hover { background: var(--white); border-color: var(--rule-strong); } .finder-quiz__form { margin-top: var(--s-4); padding: var(--s-6) var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--white); } .finder-quiz__progress { display: flex; justify-content: center; gap: var(--s-2); margin-bottom: var(--s-6); } .finder-quiz__progress span { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); } .finder-quiz__progress span.is-active { background: var(--reef); width: 22px; border-radius: var(--r-pill); } .finder-quiz__progress span.is-done { background: var(--navy); } .finder-quiz__question { margin: 0 0 var(--s-5); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--navy-deep); text-align: center; } .finder-quiz__choices { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); max-width: 44rem; margin-inline: auto; } .finder-quiz__choice { padding: var(--s-4) var(--s-5); min-height: 52px; border: 1.5px solid var(--rule-strong); border-radius: var(--r-pill); background: var(--white); color: var(--navy-deep); font-family: var(--font-display); font-weight: 600; font-size: 1rem; text-align: center; cursor: pointer; transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); } .finder-quiz__choice:hover { background: var(--reef-wash); border-color: var(--reef); } .finder-quiz__choice:focus-visible { outline: 3px solid rgba(52, 192, 204, .48); outline-offset: 2px; } .finder-quiz__choice--crisis { flex-basis: 100%; border-color: var(--alert); color: var(--alert); background: #fff5f5; } .finder-quiz__choice--crisis:hover { background: var(--alert); color: var(--white); } .finder-quiz__nav { display: flex; justify-content: center; gap: var(--s-5); margin-top: var(--s-6); } .finder-quiz__back { border: 0; background: transparent; padding: var(--s-2) var(--s-3); color: var(--navy); font-family: var(--font-display); font-weight: 600; font-size: .9375rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .finder-quiz__back:hover { color: var(--reef-ink); } .finder-quiz__result { margin: 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-card); background: var(--mist); color: var(--ink); font-size: .9375rem; line-height: 1.5; text-align: center; } .service--match { background: var(--reef-wash); border-radius: 10px; } .finder-search { position: relative; } .finder-search__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; } .finder-search__input { padding-left: 52px; } .finder-search__status { margin-top: var(--s-3); min-height: 1.5em; font-size: var(--fs-small); color: var(--ink-soft); } .locations { display: grid; gap: var(--s-3); margin-top: var(--s-5); margin-bottom: var(--s-7); } .locations__btn { display: block; width: 100%; text-align: left; padding: var(--s-4) var(--s-5); background: var(--white); border: 1px solid var(--rule-strong); border-radius: var(--r-card); cursor: pointer; transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out); } .locations__btn:hover { border-color: var(--navy); } .locations__btn[aria-selected="true"] { background: var(--navy); border-color: var(--navy); } .locations__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--navy-deep); } .locations__area { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--ink-soft); } .locations__btn[aria-selected="true"] .locations__name { color: var(--white); } .locations__btn[aria-selected="true"] .locations__area { color: rgba(255, 255, 255, .76); } .service-group { margin-bottom: var(--s-8); } .service-group__title { font-size: 1.0625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--reef-ink); padding-bottom: var(--s-3); border-bottom: 2px solid var(--rule); } .service-group__note { margin-top: var(--s-3); color: var(--ink-soft); font-size: var(--fs-small); } .service-group--national { padding-top: var(--s-7); border-top: 4px solid var(--rule); } .services { display: grid; gap: 0; margin-top: var(--s-2); } .service { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); } .service__name { font-weight: 600; color: var(--ink); flex: 1 1 220px; } .service__meta { font-size: var(--fs-small); color: var(--ink-soft); } .service__number { display: inline-flex; align-items: center; gap: var(--s-2); margin-left: auto; min-height: 44px; padding: 0 var(--s-3); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--navy); text-decoration: none; border-radius: var(--r-pill); } .service__number:hover { background: var(--reef-wash); color: var(--reef-ink); } /* -------------------------------------------------------------------------- Filters -------------------------------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); } .section__head + .wp-block-shortcode { margin-top: var(--s-5); } .section__head + .wp-block-shortcode .filters { margin-top: 0; } .filters__btn { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; padding: 10px 18px; min-height: 44px; background: var(--white); color: var(--navy-deep); border: 1px solid var(--rule-strong); border-radius: var(--r-pill); cursor: pointer; transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); } .filters__btn:hover { border-color: var(--navy); } .filters__btn[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); } /* -------------------------------------------------------------------------- Contact -------------------------------------------------------------------------- */ .contact-list { display: grid; gap: var(--s-5); margin-top: var(--s-5); } .contact-list__item { display: flex; gap: var(--s-4); align-items: flex-start; } .contact-list__icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--reef-wash); color: var(--reef-ink); } .contact-list__label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .contact-list__value { display: inline-block; margin-top: 2px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--navy); text-decoration: none; } a.contact-list__value:hover { color: var(--reef-ink); text-decoration: underline; } .contact-list__value--plain { font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.5; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .field { margin-bottom: var(--s-5); } .field__label { display: block; margin-bottom: var(--s-2); font-family: var(--font-display); font-weight: 600; color: var(--navy-deep); } .field__opt { font-weight: 400; color: var(--ink-soft); } .form__grid { display: grid; gap: var(--s-5); align-items: start; margin-bottom: var(--s-5); } .form__grid > .field { margin: 0; min-width: 0; } .form__grid > .field + .field { margin-top: 0; } .form__grid .field__label + .input { margin-top: 0; } .form { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s-7) var(--s-6); box-shadow: var(--lift); } .form .btn { width: 100%; justify-content: center; margin-top: var(--s-2); } @media (max-width: 639px) { .form { padding: var(--s-6) var(--s-5); } } .form__status, .form__error { margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-card); font-weight: 600; line-height: 1.5; } .form__status { color: #07585f; background: var(--reef-wash); border: 1px solid rgba(14, 124, 134, .28); } .form__error { color: #8b1520; background: #fff2f3; border: 1px solid rgba(193, 18, 31, .28); } .wspn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .footer__news .form__status, .footer__news .form__error { grid-column: 1 / -1; margin-bottom: 0; } @media (min-width: 640px) { .form__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 639px) { .section > .wrap { padding-inline: var(--s-4); } .wp-block-buttons { gap: var(--s-3); } .wp-block-button[class*="btn"] > .wp-block-button__link { max-width: 100%; } } .input--block { border-radius: var(--r-card); } textarea.input { min-height: 140px; resize: vertical; line-height: 1.6; } /* Keep a visible dropdown affordance — appearance:none without a replacement arrow leaves the control looking like a plain text field. */ select.input { appearance: none; cursor: pointer; padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5C68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; } /* -------------------------------------------------------------------------- Interior breakpoints -------------------------------------------------------------------------- */ @media (min-width: 560px) { .locations { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .cards { grid-template-columns: repeat(3, 1fr); } .cards--3 { grid-template-columns: repeat(3, 1fr); } .service { flex-wrap: nowrap; } } /* -------------------------------------------------------------------------- Page hero with photography -------------------------------------------------------------------------- */ .page-hero--photo { isolation: isolate; overflow: hidden; } .page-hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .page-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 35, 64, .5) 0%, rgba(0, 35, 64, 0) 34%), linear-gradient(96deg, rgba(0, 35, 64, .94) 0%, rgba(0, 35, 64, .86) 38%, rgba(0, 50, 90, .58) 70%, rgba(0, 50, 90, .40) 100%); } @media (max-width: 767px) { .page-hero__scrim { background: linear-gradient(180deg, rgba(0, 35, 64, .90) 0%, rgba(0, 35, 64, .82) 100%); } } /* Photo credit, matching the home hero's. */ .page-hero__credit { position: absolute; right: var(--s-4); bottom: var(--s-4); z-index: 1; margin: 0; text-align: right; font-size: .6875rem; color: rgba(255, 255, 255, .55); } .page-hero__credit a { color: inherit; text-decoration: none; } .page-hero__credit a:hover { color: rgba(255, 255, 255, .9); text-decoration: underline; } @media (max-width: 559px) { .page-hero__credit { position: static; padding: var(--s-3) var(--gutter) 0; } } /* -------------------------------------------------------------------------- Story + pull quote -------------------------------------------------------------------------- */ /* Story: image leading, copy beside it, then a timeline of the milestones the original text already contained. */ .story { display: grid; gap: var(--s-7); } .story__figure { margin: 0; display: flex; flex-direction: column; } .story__figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-card); } .story__caption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-soft); } .story__lead { font-family: var(--font-display); font-size: clamp(1.1875rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; color: var(--navy-deep); } .story__text p + p { margin-top: var(--s-4); color: var(--ink-soft); } .pull { margin: 0; padding-left: var(--s-5); border-left: 3px solid var(--sun); } .pull p { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--navy-deep); } .pull--light p { color: var(--white); } .region__note { margin: 0; color: var(--ink-soft); } /* Quote and commentary as one full-width row. */ .region-intro { display: grid; gap: var(--s-6); margin-block: var(--s-6) 0; } @media (min-width: 860px) { .region-intro { grid-template-columns: 1.05fr 1fr; gap: var(--s-8); align-items: start; } } .region__note--light { color: rgba(255, 255, 255, .82); } .mission__photo { width: 100%; margin-top: var(--s-6); border-radius: var(--r-card); } /* -------------------------------------------------------------------------- Region figure -------------------------------------------------------------------------- */ .region-figure { margin: 0; } .region-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; border-radius: var(--r-card); } .region-split { display: grid; gap: var(--s-7); align-items: center; } .region-full { display: grid; gap: var(--s-7); } .region-full > .region-figure { order: 2; width: 100%; } .region__quote { margin-top: var(--s-6); } @media (min-width: 860px) { .region-split { grid-template-columns: 1fr 1.1fr; gap: var(--s-8); } } .region-figure__caption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-soft); } .region-figure__caption a { color: inherit; } .event-follow__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-7); } .event-follow__row > p { flex: 1 1 520px; margin: 0; max-width: 72ch; } .event-follow__row > .wp-block-buttons { flex: 0 0 auto; } @media (max-width: 699px) { .event-follow__row { align-items: flex-start; } } .facts { display: grid; gap: var(--s-3); margin-top: var(--s-5); } .facts__item { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--ink-soft); } .facts__item svg { flex: 0 0 auto; margin-top: 4px; color: var(--reef-ink); } .facts__item strong { color: var(--navy-deep); } /* Home "Our region": full-bleed satellite band. The scrim is heavier on the left where the copy sits and eases off over the islands on the right. */ .region-band { padding-block: clamp(64px, 9vw, 120px); } .region-band::before { background: linear-gradient(96deg, rgba(0, 35, 64, .92) 0%, rgba(0, 35, 64, .82) 42%, rgba(0, 35, 64, .45) 72%, rgba(0, 35, 64, .25) 100%); } .region-band__grid { display: grid; gap: var(--s-7); } .region-band__lead { margin-top: var(--s-5); font-size: 1.1875rem; color: rgba(255, 255, 255, .88); max-width: 52ch; } .region-band__body { margin-top: var(--s-4); color: rgba(255, 255, 255, .78); max-width: 52ch; } .region-band__aside { display: flex; flex-direction: column; gap: var(--s-6); align-items: flex-start; } .region-band__aside .pull p { font-size: clamp(1.25rem, 2.2vw, 1.5rem); } .region-band__credit { display: block; margin-top: var(--s-7); font-size: .6875rem; color: rgba(255, 255, 255, .5); } .region-band__credit a { color: inherit; } @media (min-width: 900px) { .region-band__grid { grid-template-columns: 1.15fr 1fr; gap: var(--s-9); align-items: center; } } /* -------------------------------------------------------------------------- Events — Facebook link -------------------------------------------------------------------------- */ .event__link { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-family: var(--font-display); font-weight: 700; font-size: .9375rem; color: var(--navy); text-decoration: none; } .event__link:hover { color: var(--reef-ink); text-decoration: underline; text-decoration-thickness: 2px; } /* The card-wide overlay link would swallow this one, so lift it above. */ .event__link { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- Service Finder — denser. The old layout put one service per full-width row, which wasted most of the line on a wide screen. -------------------------------------------------------------------------- */ .service { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name number" "meta number"; align-items: center; column-gap: var(--s-3); row-gap: 0; padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--rule); border-radius: 8px; } .service:hover { background: var(--mist); } .service__name { grid-area: name; font-weight: 600; color: var(--ink); font-size: 1rem; } .service__meta { grid-area: meta; font-size: .8125rem; color: var(--ink-soft); } .service__number { grid-area: number; margin-left: 0; font-size: 1.0625rem; min-height: 44px; padding: 0 var(--s-3); } .service-group { margin-bottom: var(--s-6); } .service-group__title { padding-bottom: var(--s-2); font-size: 1rem; } /* Two columns of listings once there is room for them. */ @media (min-width: 900px) { .services { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } .service-group--national .services { grid-template-columns: 1fr 1fr 1fr; } } /* The location picker is a control, not a feature — size it like one. */ .locations { gap: var(--s-2); margin-bottom: var(--s-6); } .locations__btn { padding: var(--s-3) var(--s-4); } .locations__name { font-size: 1rem; } .locations__area { font-size: .8125rem; } /* -------------------------------------------------------------------------- Breakpoints for the new blocks -------------------------------------------------------------------------- */ @media (min-width: 768px) { .story { grid-template-columns: 1fr 1.05fr; gap: var(--s-8); align-items: start; } /* A deliberate block rather than a full-height panel — it shouldn't dominate the section just to finish level with the copy. */ .story__figure img { height: clamp(240px, 30vw, 400px); aspect-ratio: auto; } } /* -------------------------------------------------------------------------- Community photography Real WSPN photos. These carry the "community" feel the brief asks for, so they appear on every page rather than being confined to a gallery. -------------------------------------------------------------------------- */ /* Photo strip — a single row of the Network's people, used as a section divider. Every tile shares one aspect so the row reads as a band. */ .strip { display: grid; gap: var(--s-2); grid-template-columns: repeat(3, 1fr); } .strip__item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--reef-wash); } .strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); } .strip__item:hover img { transform: scale(1.03); } .strip--band { padding-block: var(--s-6); } /* Gallery — masonry via columns, so mixed aspect ratios pack tightly. */ .gallery { columns: 3; column-gap: var(--s-2); } .gallery[data-collapsed="true"] .gallery__item:nth-child(n + 19) { display: none; } .gallery__more { margin-top: var(--s-5); text-align: center; } .gallery__item { display: block; break-inside: avoid; margin-bottom: var(--s-2); border-radius: 10px; overflow: hidden; background: var(--reef-wash); cursor: zoom-in; border: 0; padding: 0; width: 100%; } .gallery__item img { width: 100%; height: auto; display: block; transition: transform 400ms var(--ease-out), opacity var(--t-hover) var(--ease-out); } .gallery__item:hover img { transform: scale(1.02); } .gallery__item:focus-visible { outline-offset: 3px; } /* Lightbox — a , so focus, Escape and backdrop come free. */ .lightbox { border: 0; padding: 0; margin: auto; width: min(96vw, 1400px); max-height: 94vh; background: transparent; color: var(--white); overflow: visible; } .lightbox::backdrop { background: rgba(0, 20, 40, .92); } .lightbox__img { display: block; width: 100%; height: auto; max-height: 84vh; object-fit: contain; border-radius: 10px; } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); font-size: var(--fs-small); color: rgba(255, 255, 255, .7); } .lightbox__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--white); border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; transition: background-color var(--t-hover) var(--ease-out); } .lightbox__btn:hover { background: rgba(255, 255, 255, .22); } .lightbox__btn:active { transform: scale(.94); } .lightbox__nav { display: flex; gap: var(--s-2); } /* WordPress core lightbox used by editable Image blocks. Keep the page visibly present behind the modal while giving the enlarged photo a soft, finished edge. */ .wp-lightbox-overlay { background: rgba(0, 20, 40, .72) !important; } .wp-lightbox-overlay .wp-lightbox-image, .wp-lightbox-overlay img { border-radius: 10px; } /* Cards with a photograph on top */ .card--media { padding: 0; overflow: hidden; } .card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--reef-wash); } .card__media img { width: 100%; height: 100%; object-fit: cover; } .card--media .card__title, .card--media .card__body, .card--media .card__link { margin-inline: var(--s-5); } .card--media .card__title { margin-top: var(--s-5); } .card--media .card__link { margin-bottom: var(--s-5); } .card--media .card__body:last-child { margin-bottom: var(--s-5); } /* A photograph beside a block of copy */ .side-figure { margin: 0; } .side-figure img { width: 100%; border-radius: var(--r-card); } .side-figure__caption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-soft); } .split { display: grid; gap: var(--s-7); align-items: center; } @media (min-width: 640px) { .strip { grid-template-columns: repeat(6, 1fr); } .gallery { columns: 4; } } @media (min-width: 900px) { .gallery { columns: 6; column-gap: var(--s-2); } .gallery__item { margin-bottom: var(--s-2); border-radius: 8px; } .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); } .split--text-first .side-figure { order: 2; } } /* -------------------------------------------------------------------------- Icons — CSS masks, so they survive content sanitising and need no inline SVG in the editor. Colour comes from currentColor; size from --s. -------------------------------------------------------------------------- */ .icon { --s: 1.1em; display: inline-block; flex: 0 0 auto; width: var(--s); height: var(--s); background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -0.15em; } .icon--15 { --s: 15px; } .icon--16 { --s: 16px; } .icon--18 { --s: 18px; } .icon--20 { --s: 20px; } .icon--22 { --s: 22px; } .icon--24 { --s: 24px; } .icon--32 { --s: 32px; } .icon--40 { --s: 40px; } .icon--phone { --i: url("data:image/svg+xml,"); } .icon--menu { --i: url("data:image/svg+xml,"); } .icon--close { --i: url("data:image/svg+xml,"); } .icon--arrow { --i: url("data:image/svg+xml,"); } .icon--alert { --i: url("data:image/svg+xml,"); } .icon--ask { --i: url("data:image/svg+xml,"); } .icon--listen { --i: url("data:image/svg+xml,"); } .icon--heart { --i: url("data:image/svg+xml,"); } .icon--heart2 { --i: url("data:image/svg+xml,"); } .icon--check { --i: url("data:image/svg+xml,"); } .icon--clock { --i: url("data:image/svg+xml,"); } .icon--pin { --i: url("data:image/svg+xml,"); } .icon--cal { --i: url("data:image/svg+xml,"); } .icon--mail { --i: url("data:image/svg+xml,"); } .icon--search { --i: url("data:image/svg+xml,"); } .icon--fb { --i: url("data:image/svg+xml,"); } .icon--ig { --i: url("data:image/svg+xml,"); } .icon--prev { --i: url("data:image/svg+xml,"); } .icon--next { --i: url("data:image/svg+xml,"); } /* -------------------------------------------------------------------------- 18a. Back to top — a quiet utility, not a content entrance, so it uses its own simple show/hide rather than the .reveal system below. -------------------------------------------------------------------------- */ .back-to-top { position: fixed; right: var(--s-5); bottom: calc(var(--s-5) + var(--crisis-bar-h)); z-index: 90; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--white); color: var(--navy); border: 1px solid var(--rule-strong); box-shadow: var(--lift); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out); } .back-to-top .icon { transform: rotate(-90deg); } .back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .back-to-top:hover { background: var(--navy); color: var(--white); } @media (min-width: 1024px) { .back-to-top { bottom: var(--s-6); } } /* -------------------------------------------------------------------------- 18b. Scroll/entrance reveals — gated behind .js (added by an inline script in , before first paint) so content is never left invisible if JS fails to run. Section 19 below collapses the transition to ~0 under prefers-reduced-motion, same as every other animation on the site. -------------------------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(var(--reveal-i, 0) * var(--t-reveal-step)); } .js .reveal.is-visible { opacity: 1; transform: none; } /* Hero titles get a touch more distance and a slightly longer settle — they're the one entrance every page opens with, so it can carry a little more weight than a section heading three screens down. */ .js .reveal--hero { transform: translateY(22px); transition-duration: 1100ms; } /* Quotes stay still — they already read as distinct via the pull-quote border; adding the same rise as surrounding cards would just add noise. */ .js .reveal--fade { transform: none; } /* Steps drift in from the reading direction instead of rising, to echo that they're a sequence (Ask → Listen → Encourage → Check in), not a grid of unrelated items. */ .js .reveal--drift { transform: translateX(-16px); } .js .reveal--drift.is-visible { transform: none; } /* Large editorial photos wipe open instead of fading — treats a full community photo as a moment, distinct from a card or a line of text. */ .js .reveal--wipe { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-out); } .js .reveal--wipe.is-visible { clip-path: inset(0 0 0% 0); } /* -------------------------------------------------------------------------- 19. Reduced motion — this is a mental health site. Honour it completely. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 20. Print — someone will print the helpline numbers. Make that work. -------------------------------------------------------------------------- */ @media print { .header, .drawer, .scrim, .hero__photo, .hero__scrim, .newsletter, .sponsors { display: none !important; } .crisis-bar { position: static; } body { color: #000; background: #fff; } .helpline__number::after { content: " (" attr(href) ")"; font-size: .75em; } } /* -------------------------------------------------------------------------- Core Navigation block, styled as the site nav. The menu itself is edited in the Site Editor; these rules make its markup wear the theme. -------------------------------------------------------------------------- */ /* The block copies its className onto the inner