/* ---------- Calibri (licensed web font) ----------
* Drop the licensed .ttf files in ../fonts/calibri/ (see that folder's README).
* Needed for full Lushootseed / Coast Salish glyph coverage (ʔ ə ɬ ƛ š č ł ʷ ᶻ …).
* local() is tried first so machines with Calibri installed skip the download.
* Referenced as "Calibri" wherever the Tribal Guide stack already names it. */
@font-face {
font-family: "Calibri";
font-style: normal;
font-weight: 400;
font-display: swap;
src:
local("Calibri"),
url("../fonts/calibri/calibri-regular.woff2") format("woff2"),
url("../fonts/calibri/calibri-regular.woff") format("woff"),
url("../fonts/calibri/calibri-regular.ttf") format("truetype");
}
@font-face {
font-family: "Calibri";
font-style: normal;
font-weight: 700;
font-display: swap;
src:
local("Calibri Bold"),
local("Calibri-Bold"),
url("../fonts/calibri/calibri-bold.woff2") format("woff2"),
url("../fonts/calibri/calibri-bold.woff") format("woff"),
url("../fonts/calibri/calibri-bold.ttf") format("truetype");
}
@font-face {
font-family: "Calibri";
font-style: italic;
font-weight: 400;
font-display: swap;
src:
local("Calibri Italic"),
local("Calibri-Italic"),
url("../fonts/calibri/calibri-italic.woff2") format("woff2"),
url("../fonts/calibri/calibri-italic.woff") format("woff"),
url("../fonts/calibri/calibri-italic.ttf") format("truetype");
}
@font-face {
font-family: "Calibri";
font-style: italic;
font-weight: 700;
font-display: swap;
src:
local("Calibri Bold Italic"),
local("Calibri-BoldItalic"),
url("../fonts/calibri/calibri-bolditalic.woff2") format("woff2"),
url("../fonts/calibri/calibri-bolditalic.woff") format("woff"),
url("../fonts/calibri/calibri-bolditalic.ttf") format("truetype");
}
/* Trailing inline SVGs (footer-clip defs) and a11y-speak live regions get
* appended to on every WP page and contribute ~23px of trailing flow
* space below the footer. Take them out of layout flow on Tribal Guide pages
* only (visibility/accessibility preserved). */
body.page-template-tribal-guide-landing > svg,
body.page-template-tribal-guide-landing-blocks > svg,
body.page-template-tribal-guide-directory > svg,
body.single-tribe > svg,
body.page-template-tribal-guide-landing > .a11y-speak-region,
body.page-template-tribal-guide-landing-blocks > .a11y-speak-region,
body.page-template-tribal-guide-directory > .a11y-speak-region,
body.single-tribe > .a11y-speak-region,
body.page-template-tribal-guide-landing > .a11y-speak-intro-text,
body.page-template-tribal-guide-landing-blocks > .a11y-speak-intro-text,
body.page-template-tribal-guide-directory > .a11y-speak-intro-text,
body.single-tribe > .a11y-speak-intro-text {
position: absolute !important;
left: 0;
bottom: 0;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
}
/* Tribal Guide — scoped styles for /tribal-guide/, /tribal-guide/directory/
* and single Tribe pages. Loaded by functions.php only on those templates.
*
* Buttons use the core .wp-block-button markup so they inherit the global
* button rules (6px radius, uppercase, bold, maroon). Only Tribal-Guide-
* specific overrides (min-widths, full-width on mobile) live here.
*
* Tokens:
* maroon #7c2529 (Show Up bg, accordion bar bg)
* navy #244c5a (Project Background bg)
* teal #007598 (section headline accent / per-tribe accent default)
* sand #d6d1c4 (Show Up headline, accordion bar text)
* tan card#b6cfd0 (tribe card bg)
* body #222223 (MWNHA black, body copy on white)
* wash #d8d8d8 (hero photo wash)
*/
.tg-landing,
.tg-tribe {
font-family: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
color: #222223;
line-height: 1.45;
}
/* Neutralize core/group default block-gap so existing tg-* margins control
* spacing. The legacy template emitted plain divs without the WP layout
* classes, so we drop the auto-injected margins from wp-block-group-is-layout-flow
* children when they live inside the Tribal Guide. */
.tg-landing .wp-block-group.is-layout-flow > * + *,
.tg-landing .wp-block-group-is-layout-flow > * + * {
margin-block-start: 0;
}
/* core/buttons defaults to flex with its own gap; the legacy template just
* inlined a single wp-block-button. Strip the flex wrapper's gap-driven
* spacing inside the landing. */
.tg-landing .wp-block-buttons.is-layout-flex {
gap: 0;
}
.tg-landing,
.tg-landing *,
.tg-tribe,
.tg-tribe * {
box-sizing: border-box;
}
.tg-landing p,
.tg-tribe p {
margin: 0 0 1em;
}
.tg-landing p:last-child,
.tg-tribe p:last-child {
margin-bottom: 0;
}
/* ---------- Buttons: scope-only overrides on top of core block button ----- */
/* Block-button markup inherits 6px radius, uppercase, bold/700, maroon from the
* global theme. We only set min-width per placement and the mobile full-width. */
.tg-landing .wp-block-button,
.tg-tribe .wp-block-button {
display: inline-block;
}
.tg-landing .wp-block-button__link,
.tg-tribe .wp-block-button__link {
min-height: 45px;
min-width: 200px;
padding: 10px 24px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.2;
}
.tg-button--directory .wp-block-button__link,
.tg-tribe-card__cta .wp-block-button__link {
min-width: 278px;
}
/* ---------- Hero ---------- */
/* Heroes are the one image without rounded corners (Julia, Jun 9).
* overflow: hidden must stay — the parallax photo depends on the clipping. */
.tg-hero {
position: relative;
width: 100%;
height: clamp(420px, 41vw, 793px);
overflow: hidden;
}
.tg-hero__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
will-change: transform;
}
/* Block-editor equivalent: core/image renders as ![]()
.
* Only the inner ![]()
is parallax-translated, so keep will-change off the
* figure — otherwise the figure forms a stacking context that traps the
* caption's z-index beneath the dark .tg-hero__overlay, dimming the white
* "Art by …" text to gray. */
.tg-hero figure.tg-hero__photo,
.tg-hero figure.wp-block-image.tg-hero__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
will-change: auto;
}
.tg-hero figure.tg-hero__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
will-change: transform;
}
.tg-hero figure.tg-hero__badge {
margin: 0;
}
.tg-hero figure.tg-hero__badge img {
display: block;
width: 100%;
height: auto;
}
.tg-hero__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.42);
}
.tg-hero__badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 592px;
width: 31%;
height: auto;
z-index: 1;
}
/* Optional photo caption, lower-left of any hero (e.g. "Art by Brandy May
* Bouré" on the landing page). The core image block renders it as a
* inside the hero figure; lift it above the dark overlay. */
.tg-hero figcaption.wp-element-caption,
.tg-hero .tg-hero__caption {
position: absolute;
left: 24px;
bottom: 24px;
margin: 0;
color: #ffffff;
font-size: 18px;
line-height: 1.4;
text-align: left;
z-index: 2;
}
@media (max-width: 640px) {
.tg-hero figcaption.wp-element-caption,
.tg-hero .tg-hero__caption {
left: 16px;
bottom: 16px;
font-size: 15px;
}
}
/* ---------- Map ---------- */
.tg-map {
background: #ffffff;
padding: 0;
overflow-x: clip;
}
.tg-map__inner {
display: grid;
grid-template-columns: minmax(0, 592px) 1fr;
gap: 36px;
max-width: 1728px;
margin: 0 auto;
padding: 0 0 0 96px;
align-items: center;
}
.tg-map__intro {
max-width: 592px;
}
.tg-map__copy {
font-size: 18px;
line-height: 1.5;
color: #222223;
margin-bottom: 32px;
}
.tg-map__copy p {
font-size: 18px;
color: #222223;
font-weight: 400;
line-height: 1.5;
margin: 0 0 1em;
}
.tg-map__copy p:first-child,
.tg-map__copy h2:first-child,
.tg-map__copy h3:first-child {
font-size: 36px;
line-height: 1.2;
color: #007598;
font-weight: 700;
margin: 0 0 0.5em;
}
.tg-map__copy p:last-child {
margin-bottom: 0;
}
.tg-map__copy em,
.tg-map__copy i {
font-style: italic;
}
/* Double selector: WP's global-styles-inline-css loads after this sheet and
* zeroes margin-block-end via `:root :where(.is-layout-flow) > *` (0,1,0). */
.tg-map .tg-map__image {
margin-right: calc(-1 * max(0px, (100vw - 1728px) / 2));
/* Pull 1px into the red section below so subpixel image-height rounding
* can't leave a white sliver between the map and .tg-show-up. */
margin-bottom: -1px;
line-height: 0;
}
.tg-map__image img {
display: block;
width: 100%;
height: auto;
max-width: none;
}
/* ---------- Show Up ---------- */
.tg-show-up {
background: #7c2529;
color: #ffffff;
padding: 72px 0;
}
.tg-show-up__inner {
max-width: 906px;
margin: 0 auto;
padding: 0 24px;
}
.tg-show-up__headline {
font-size: 36px;
line-height: 1.2;
color: #d6d1c4;
font-weight: 700;
margin: 0 0 24px;
}
.tg-show-up__intro {
font-size: 18px;
color: #ffffff;
margin-bottom: 24px;
}
.tg-show-up__guidelines {
font-size: 18px;
color: #ffffff;
padding-left: 0;
margin: 0 0 24px;
list-style: none;
counter-reset: tg-guideline;
}
.tg-show-up__guidelines li {
counter-increment: tg-guideline;
padding-left: 2.5em;
position: relative;
margin-bottom: 12px;
line-height: 1.4;
}
.tg-show-up__guidelines li::before {
content: counter(tg-guideline) ".";
position: absolute;
left: 0;
top: 0;
width: 2em;
font-weight: 700;
}
.tg-show-up__guidelines li strong {
font-weight: 700;
}
.tg-show-up__outro {
font-size: 18px;
color: #ffffff;
}
.tg-show-up__outro a {
color: #ffffff;
text-decoration: underline;
}
/* ---------- Tribes ---------- */
.tg-tribes {
background: #ffffff;
padding: 80px 0;
overflow-x: clip;
}
.tg-tribes__inner {
max-width: 1848px;
margin: 0 auto;
padding: 0 0 0 36px;
}
.tg-tribes__intro {
max-width: 906px;
margin: 0 auto 48px;
padding: 0 24px;
}
.tg-tribes__intro h2,
.tg-tribes__intro h3,
.tg-tribes__intro p:first-child {
font-size: 36px;
color: #007598;
font-weight: 700;
margin: 0 0 0.4em;
line-height: 1.2;
}
.tg-tribes__intro p {
font-size: 18px;
color: #222223;
font-weight: 400;
line-height: 1.5;
margin: 0 0 1em;
}
.tg-tribes__intro p:last-child {
margin-bottom: 0;
}
.tg-tribes__list {
display: flex;
flex-direction: column;
gap: 36px;
}
/* ---------- Tribe card ---------- */
.tg-tribe-card {
display: grid;
grid-template-columns: minmax(0, 592px) 1fr;
min-height: 401px;
background: #ffffff;
overflow: hidden;
position: relative;
margin-right: calc(-1 * max(0px, (100vw - 1848px) / 2));
border-radius: 6px;
}
/* Left cell: the Tribe page's hero photo with the tribe logo overlaid,
* centered at half the cell width. */
.tg-tribe-card__media {
position: relative;
background: #ffffff;
overflow: hidden;
}
.tg-tribe-card__media-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Darken the photo so the logo pops (matches the hero overlay). */
.tg-tribe-card__media::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.42);
z-index: 1;
}
.tg-tribe-card__media-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: auto;
display: block;
z-index: 2;
}
.tg-tribe-card__body {
background: #b6cfd0;
position: relative;
/* Right padding clears the 160px waterline strip plus breathing room so the
* copy stays on the solid blue at every width (Julia, Jun 10). */
padding: 79px 192px 79px 97px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.tg-tribe-card__waterline {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 160px;
overflow: hidden;
pointer-events: none;
/* White backing so the (turquoise, alpha-fading) waterline texture dissolves
* into white at the card's right edge. Its opaque left edge matches the
* #b6cfd0 body, so the panel-to-strip seam is invisible. */
background: #ffffff;
}
.tg-tribe-card__waterline img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
max-width: none;
display: block;
}
.tg-tribe-card__copy {
max-width: 845px;
position: relative;
z-index: 1;
}
.tg-tribe-card__name {
font-size: 36px;
line-height: 1.2;
color: #222223;
font-weight: 700;
margin: 0 0 16px;
}
.tg-tribe-card__blurb {
font-size: 18px;
line-height: 1.5;
color: #222223;
margin: 0 0 32px;
}
/* Native words within tribe-card blurb stay in Calibri so non-Latin glyphs
* render correctly even though the rest of the page is Proxima Nova. */
.tg-tribe-card__blurb strong,
.tg-tribe-card__blurb em {
font-family: "Calibri", sans-serif;
font-weight: 700;
}
/* Pronunciation words inside the card blurb keep body-black text (Julia,
* Jun 10) — bold Calibri + speaker icon unchanged from the tribe pages. */
.tg-tribe-card__blurb .tg-pronounce-link,
.tg-tribe-card__blurb .tg-inline-audio-link,
.tg-tribe-card__blurb .tg-pronounce-link:hover,
.tg-tribe-card__blurb .tg-inline-audio-link:hover,
.tg-tribe-card__blurb .tg-pronounce-link:focus,
.tg-tribe-card__blurb .tg-inline-audio-link:focus {
color: #222223;
}
.tg-tribe-card__blurb .tg-inline-audio-link {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.tg-tribe-card__blurb .tg-inline-audio-link:hover,
.tg-tribe-card__blurb .tg-inline-audio-link:focus {
text-decoration-thickness: 2px;
}
.tg-tribe-card--placeholder .tg-tribe-card__media {
background: #ffffff;
}
/* ---------- Project Background ---------- */
.tg-project-background {
background: #244c5a;
color: #ffffff;
padding: 72px 0;
}
.tg-project-background__inner {
max-width: 906px;
margin: 0 auto;
padding: 0 24px;
}
.tg-project-background__copy {
font-size: 18px;
line-height: 1.5;
color: #ffffff;
}
.tg-project-background__copy h2,
.tg-project-background__copy h3 {
font-size: 36px;
color: #ffffff;
font-weight: 700;
line-height: 1.2;
margin: 0 0 24px;
}
.tg-project-background__copy p {
font-size: 18px;
color: #ffffff;
font-weight: 400;
line-height: 1.55;
margin: 0 0 1em;
}
.tg-project-background__copy p:last-child {
margin-bottom: 0;
}
/* ---------- Acknowledgements ---------- */
.tg-acknowledgements {
background: #ffffff;
padding: 72px 0 96px;
}
.tg-acknowledgements__inner {
max-width: 906px;
margin: 0 auto;
padding: 0 24px;
}
.tg-acknowledgements__headline {
font-size: 36px;
line-height: 1.2;
color: #007598;
font-weight: 700;
margin: 0 0 16px;
}
.tg-acknowledgements__intro {
font-size: 18px;
line-height: 1.5;
color: #222223;
margin-bottom: 32px;
}
.tg-acknowledgements__intro p {
font-size: 18px;
color: #222223;
margin: 0 0 1em;
font-weight: 400;
line-height: 1.5;
}
.tg-acknowledgements__intro p:last-child {
margin-bottom: 0;
}
.tg-acknowledgements__columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.tg-acknowledgements__column-heading {
display: none; /* Editors author per-column headings inside the WYSIWYG body. */
}
.tg-acknowledgements__column-body {
font-size: 18px;
line-height: 1.45;
color: #222223;
}
.tg-acknowledgements__column-body p {
margin: 0 0 0.35em;
}
.tg-acknowledgements__column-body p:last-child {
margin-bottom: 0;
}
.tg-acknowledgements__column-body strong {
font-weight: 700;
color: #222223;
}
/* ---------- Responsive (landing) ---------- */
@media (max-width: 1024px) {
.tg-map__inner {
grid-template-columns: 1fr;
padding: 0 24px;
gap: 32px;
}
.tg-map__image img {
margin-left: 0;
}
.tg-tribes__intro {
padding-left: 0;
}
.tg-tribe-card {
grid-template-columns: 1fr;
}
/* Stacked cards drop the water texture (Julia, Jun 10) — the card's 6px
* radius + overflow:hidden then round the bottom corners naturally. */
.tg-tribe-card__waterline {
display: none;
}
/* Single-column card: the absolutely-filled photo needs an explicit
* cell height once the body no longer shares its grid row. */
.tg-tribe-card__media {
min-height: 320px;
}
.tg-tribe-card__body {
padding: 48px 32px;
}
.tg-acknowledgements__columns {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
/* Hero matches the homepage hero's mobile size, with the badge nearly
* full-width like "Shaped by Sea & Story" there (Julia, Jun 10). */
.tg-hero {
height: clamp(240px, 74vw, 480px);
}
.tg-hero__badge {
width: 88%;
}
/* Breathing room between the hero photo and the first headline. */
.tg-map__inner {
padding-top: 48px;
}
/* Full-bleed map, flush against the screen edge like the homepage map. */
.tg-map .tg-map__image {
margin-left: -24px;
margin-right: -24px;
}
.tg-show-up,
.tg-tribes,
.tg-project-background,
.tg-acknowledgements {
padding-left: 0;
padding-right: 0;
}
/* One consistent mobile headline size across the landing sections —
* "Show Up in a Good Way" (28px) is the reference (Julia, Jun 10). */
.tg-show-up__headline,
.tg-tribe-card__name,
.tg-acknowledgements__headline,
.tg-map__copy p:first-child,
.tg-map__copy h2:first-child,
.tg-map__copy h3:first-child,
.tg-tribes__intro h2,
.tg-tribes__intro h3,
.tg-tribes__intro p:first-child,
.tg-project-background__copy h2,
.tg-project-background__copy h3 {
font-size: 28px;
}
/* "This Tribal Guide was made possible thanks to…" — editors can't add
* spacing around it (the landing strips block gaps), so set it here.
* .wp-block-group keeps this ahead of the landing's block-gap reset. */
.tg-landing .wp-block-group.tg-acknowledgements__inner > p {
margin-top: 40px;
margin-bottom: 40px;
}
.tg-landing .wp-block-button__link,
.tg-tribe .wp-block-button__link,
.tg-button--directory .wp-block-button__link,
.tg-tribe-card__cta .wp-block-button__link {
min-width: 0;
width: 100%;
}
}
/* =====================================================================
* Single Tribe page (e.g. /tribe/suquamish/)
* Uses CSS custom properties --tg-accent and --tg-quote-bg set inline
* on .tg-tribe by the template (defaults: #007598 / #d6d1c4).
* ===================================================================== */
.tg-tribe {
--tg-accent: #007598;
--tg-quote-bg: #d6d1c4;
}
/* ---------- Tribe hero ---------- */
.tg-tribe-hero {
position: relative;
width: 100%;
height: clamp(520px, 41vw, 793px);
overflow: hidden;
}
.tg-tribe-hero__backlink {
position: absolute;
top: 36px;
left: 57px;
color: #ffffff;
font-size: 18px;
line-height: 1;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
z-index: 3;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.02em;
}
.tg-tribe-hero__backlink .tg-arrowhead {
flex: 0 0 auto;
width: 10px;
height: 12px;
}
.tg-tribe-hero__backlink:hover .tg-tribe-hero__backlink-label,
.tg-tribe-hero__backlink:focus .tg-tribe-hero__backlink-label {
text-decoration: underline;
}
.tg-tribe-hero__backlink:hover,
.tg-tribe-hero__backlink:focus {
color: #ffffff;
text-decoration: none;
}
.tg-tribe-hero__stack {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(8px, 1.2vw, 24px);
z-index: 2;
padding: clamp(72px, 8vw, 140px) 24px clamp(80px, 9vw, 150px);
}
.tg-tribe-hero__logo {
width: clamp(280px, 31vw, 592px);
}
.tg-tribe-hero__logo img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
}
.tg-tribe-hero__title-wrap {
display: flex;
justify-content: center;
padding: 0 24px;
}
.tg-tribe-hero .tg-tribe-hero__title {
color: #ffffff;
font-size: clamp(44px, 4.5vw, 80px);
line-height: 1.1;
font-weight: 300;
letter-spacing: 0.005em;
margin: 0;
display: inline-flex;
align-items: center;
gap: 16px;
text-align: center;
}
/* Pronunciation icon button */
.tg-pronounce {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 0 4px;
cursor: pointer;
vertical-align: middle;
}
.tg-pronounce img {
width: 22px;
height: 18px;
display: block;
}
.tg-pronounce--inline img {
width: 22px;
height: 18px;
}
/* Inline pronunciation link */
.tg-pronounce-link {
display: inline;
background: transparent;
border: 0;
padding: 0;
margin: 0;
font: inherit;
/* Astra's global