@charset "utf-8"; /* ============================================================================= What Would Ian Do Foundation® — site.css The single source of visual truth for all seven pages. No page defines its own layout or color; everything lives here, driven by the :root tokens. Load order in : Google Fonts → this file. Paths here are relative to assets/css/, so "../wwid-logo.png" resolves to assets/wwid-logo.png. Everything works from a file:// URL. CONTENTS 01 Tokens + light reset 08 Photo slot system + fallback panel 02 Base typography 09 Gallery mosaic + lightbox 03 Skip link, .sr-only, focus 10 Forms 04 Header + nav 11 Donate components 05 Buttons 12 Footer 06 Sections, wrap, tones 13 Reveal (scroll animation) 07 Cards 14 Responsive, reduced motion, print CLASS CONTRACT — every contracted class is implemented below. A few structural helpers the seven layouts need are also provided, kept inside the existing namespaces so nothing is improvised sideways: .hero .hero__media .hero__scrim .hero__inner .hero__actions (index hero) .page-hero (interior page title band) .split .split--reverse .split__media .split__body (two-column block) .photo--framed (offset frame accent) .form--inline (email signup row) .footer__brand .footer__col .footer__note (footer internals) .tier__amount .tier__label (donate tier internals) .section__head .field__req (minor helpers) Mobile nav open state lives on .nav.is-open; site.js owns the scroll lock. ============================================================================= */ /* ============================================================================= 01 DESIGN TOKENS + LIGHT RESET ============================================================================= */ :root { /* ink & structure */ --ink: #1c2128; --ink-soft: #242c37; --ink-line: #333d49; /* text greys */ --slate: #4b5560; --slate-soft: #587187; /* glacier turquoise */ --teal: #1f7d7a; --teal-bright: #3fa89e; --teal-deep: #155f68; /* alpenglow gold */ --gold: #f0c896; --gold-deep: #d9a86a; /* paper */ --paper: #f4f7f9; --paper-alt: #eaf0f4; --paper-edge: #cbd6de; /* neutrals / on-dark */ --white: #fff; --muted: #8d99a5; --on-dark: #eef5f7; --on-dark-soft: #b6c1cc; /* rgb channels of the fixed palette — used only to build transparent tints, scrims and shadows. No new hues: this is the palette above, at alpha. */ --ink-rgb: 28, 33, 40; --teal-rgb: 31, 125, 122; --teal-bright-rgb: 63, 168, 158; --teal-deep-rgb: 21, 95, 104; --gold-rgb: 240, 200, 150; --paper-edge-rgb: 203, 214, 222; --white-rgb: 255, 255, 255; /* derived tints & scrims */ --tint-teal: rgba(var(--teal-rgb), .08); --tint-teal-strong: rgba(var(--teal-rgb), .14); --tint-gold: rgba(var(--gold-rgb), .18); --hairline: rgba(var(--ink-rgb), .10); --hairline-dark: rgba(var(--white-rgb), .14); --scrim: rgba(var(--ink-rgb), .55); --scrim-deep: rgba(var(--ink-rgb), .88); /* type */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Public Sans', system-ui, -apple-system, sans-serif; /* measure & layout */ --wrap: 1180px; --gutter: clamp(20px, 5vw, 72px); --measure: 68ch; --measure-lede: 60ch; --header-h: clamp(66px, 7vw, 92px); --section-y: clamp(56px, 8vw, 96px); /* radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* elevation */ --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), .06), 0 3px 10px rgba(var(--ink-rgb), .06); --shadow-md: 0 12px 30px rgba(var(--ink-rgb), .12); --shadow-lg: 0 20px 50px rgba(var(--ink-rgb), .20); /* motion */ --ease: cubic-bezier(.22, .61, .36, 1); --speed: .28s; --speed-slow: .65s; /* contextual roles — re-pointed inside dark and teal sections */ --surface: var(--paper); --body-fg: var(--slate); --heading-fg: var(--ink); --eyebrow-fg: var(--teal-deep); --link: var(--teal-deep); --link-hover: var(--ink); --rule: var(--paper-edge); /* Deep teal, not bright: the ring must clear 3:1 against the surface behind it. #155f68 is 6.6:1 on --paper, 6.3:1 on --paper-alt, 7.2:1 on white; #3fa89e was only 2.6:1 and failed on every light surface. */ --focus: var(--teal-deep); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--body-fg); font-family: var(--font-body); font-size: clamp(1rem, .95rem + .2vw, 1.0625rem); line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Belt to the layout's braces: no sideways scroll at any width. Deliberately `clip`, never `hidden` — `overflow-x: hidden` on body turns body into a scroll container and silently kills the sticky header. */ @supports (overflow: clip) { body { overflow-x: clip; } } /* Scroll lock while the mobile nav panel is open. site.js is the primary mechanism (it saves and restores the previous inline overflow on both and ); this rule is the belt-and-braces copy for browsers that support :has(). There is deliberately no `.is-nav-open` class rule here: nothing ever set that class, so it was dead weight pretending to be the contract. */ @supports selector(:has(*)) { body:has(.nav.is-open) { overflow: hidden; } } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul, ol { list-style: none; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { background: none; border: 0; } hr { border: 0; border-top: 1px solid var(--rule); margin: clamp(28px, 4vw, 44px) 0; } :target { scroll-margin-top: calc(var(--header-h) + 20px); } main, section, article, div, li { min-width: 0; } /* long words can't overflow */ /* ============================================================================= 02 BASE TYPOGRAPHY ============================================================================= */ a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--speed) var(--ease), text-decoration-color var(--speed) var(--ease); } a:hover { color: var(--link-hover); } /* Body-copy links stay underlined — colour alone never carries the meaning. */ .prose a, .lede a, .card__text a, .footer__note a, .donate-note a, .photo__caption a { text-decoration: underline; } .prose a:hover, .lede a:hover { text-decoration-thickness: 2px; } .h-display { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 1.55rem + 4.4vw, 4.625rem); /* 40 → 74px */ line-height: 1.04; letter-spacing: -.015em; color: var(--heading-fg); text-wrap: balance; } .h-section { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.875rem, 1.3rem + 2.3vw, 2.625rem); /* 30 → 42px */ line-height: 1.12; letter-spacing: -.01em; color: var(--heading-fg); text-wrap: balance; } .h-sub { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem); /* 20 → 24px */ line-height: 1.22; color: var(--heading-fg); text-wrap: balance; } .eyebrow { display: block; font-weight: 600; font-size: .75rem; line-height: 1.2; letter-spacing: .3em; text-transform: uppercase; color: var(--eyebrow-fg); text-wrap: balance; } /* rhythm between the stock heading pairings */ .eyebrow + .h-display, .eyebrow + .h-section, .eyebrow + .h-sub { margin-top: clamp(10px, 1.4vw, 16px); } .h-display + .lede, .h-section + .lede, .h-sub + .lede { margin-top: clamp(16px, 2vw, 24px); } .h-section + .prose, .h-sub + .prose { margin-top: clamp(14px, 1.8vw, 22px); } .lede { max-width: var(--measure-lede); font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); /* 17 → 19px */ line-height: 1.7; color: var(--body-fg); text-wrap: pretty; } .prose { max-width: var(--measure); font-size: clamp(1rem, .96rem + .25vw, 1.0625rem); /* 16 → 17px */ line-height: 1.8; color: var(--body-fg); } .prose > * + * { margin-top: 1.15em; } .prose p, .prose li { text-wrap: pretty; } .prose h2, .prose h3, .prose h4 { margin-top: 1.6em; } .prose ul, .prose ol { padding-left: 1.35em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-top: .5em; } .prose li::marker { color: var(--teal); } .prose strong { font-weight: 600; color: var(--heading-fg); } .center { text-align: center; } .center .lede, .center .prose, .center > .h-display, .center > .h-section { margin-inline: auto; } /* Prose that answers to the figure above it rather than to the 68ch measure: it spans the photo's full width and is inset from the photo's edges (1in once there is room - see section 14). Text stays left-aligned; .center would centre the lines too, and centred lines this long are a hard read. */ .prose--center { max-width: none; margin-inline: auto; } .photo + .prose { margin-top: clamp(28px, 4vw, 44px); } .pull-quote { max-width: 30ch; margin: clamp(28px, 4vw, 44px) 0; padding-left: clamp(18px, 2.4vw, 28px); border-left: 3px solid var(--teal-bright); font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.4; color: var(--teal-deep); text-wrap: pretty; } .pull-quote p + p { margin-top: .6em; } .center .pull-quote { max-width: 34ch; margin-inline: auto; padding: clamp(18px, 2.4vw, 26px) 0 0; border-left: 0; border-top: 3px solid var(--teal-bright); } /* Gold reads at 10.3:1 on ink but only 3.1:1 on teal, and at mobile sizes this quote is normal-weight 20px text, so the teal band takes white (4.9:1). */ .section--ink .pull-quote { color: var(--gold); border-color: var(--gold); } .section--teal .pull-quote { color: var(--white); border-color: var(--white); } .stack > * + * { margin-top: var(--stack-gap, 1.15rem); } /* ============================================================================= 03 SKIP LINK, SCREEN-READER TEXT, FOCUS RINGS ============================================================================= */ .skip-link { position: fixed; /* reachable however far the page has scrolled */ top: 0; left: 12px; z-index: 999; transform: translateY(-120%); padding: 12px 20px; border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--gold); color: var(--ink); font-weight: 700; font-size: .9375rem; text-decoration: none; box-shadow: var(--shadow-md); transition: transform var(--speed) var(--ease); } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); color: var(--ink); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Focus is never removed. --focus is re-pointed per surface so the ring always clears 3:1 against whatever sits behind it. The outline follows each element's own radius, so nothing here touches border-radius. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* ============================================================================= 04 HEADER + NAV ============================================================================= */ .site-header { --nav-fg: var(--ink); --nav-fg-dim: var(--slate); position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--hairline); transition: background var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease); } .site-header__inner, .site-header > .wrap { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 40px); min-height: var(--header-h); padding-block: 10px; } /* transparent variant — index.html only, over the hero art */ .site-header--overlay { --nav-fg: var(--on-dark); --nav-fg-dim: var(--on-dark-soft); --focus: var(--gold); position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; } /* site.js adds .is-stuck once the page scrolls past the hero (or ~24px on interior pages). The overlay header becomes a real fixed solid bar. */ .site-header.is-stuck { background: var(--white); border-bottom-color: var(--hairline); box-shadow: var(--shadow-sm); } .site-header--overlay.is-stuck { --nav-fg: var(--ink); --nav-fg-dim: var(--slate); --focus: var(--teal-deep); /* the bar is white once stuck: 7.2:1 */ position: fixed; animation: header-drop var(--speed) var(--ease) both; } @keyframes header-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } } .brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; text-decoration: none; color: var(--nav-fg); border-radius: var(--r-sm); } .brand:hover { color: var(--nav-fg); } .brand__mark { width: clamp(40px, 5vw, 52px); height: clamp(40px, 5vw, 52px); object-fit: contain; flex: 0 0 auto; } .brand__word { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, .95rem + .2vw, 1.0625rem); line-height: 1; letter-spacing: .02em; color: var(--nav-fg); white-space: nowrap; } .site-header--overlay:not(.is-stuck) .brand__mark { filter: drop-shadow(0 2px 6px rgba(var(--ink-rgb), .45)); } .site-header--overlay:not(.is-stuck) .brand__word { text-shadow: 0 1px 8px rgba(var(--ink-rgb), .55); } .nav { display: flex; align-items: center; gap: 8px; min-width: 0; } .nav__links { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); margin: 0; padding: 0; list-style: none; } .nav__links li { display: flex; } .nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; /* a real target, not just a 14px word */ padding: 8px 2px; font-size: .875rem; font-weight: 500; line-height: 1; color: var(--nav-fg); text-decoration: none; white-space: nowrap; } .site-header--overlay:not(.is-stuck) .nav__link:not(.btn) { text-shadow: 0 1px 6px rgba(var(--ink-rgb), .5); } .nav__link:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; /* keeps the rule under the word now that the link box is 44px tall for touch */ height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transition: transform var(--speed) var(--ease); } .nav__link:not(.btn):hover::after { transform: scaleX(.7); } .nav__link.is-active, .nav__link[aria-current="page"] { font-weight: 700; color: var(--nav-fg); } .nav__link.is-active:not(.btn)::after, .nav__link[aria-current="page"]:not(.btn)::after { transform: scaleX(1); } /* the Donate pill carries .btn.btn--gold as well — drop the nav treatment */ .nav__link.btn { padding-block: 11px; font-size: .875rem; color: var(--ink); } .nav__link.btn::after { content: none; } /* Language selector — a plain EN/ES pair, not a dropdown widget, so it works with no JavaScript and each half points at the exact counterpart page in the other language. The active language is a non-interactive (no reason to offer a link that reloads the page you are already on); the other language is a real . Both share this class, so the two states share one set of rules. */ .nav__lang { align-items: center; gap: 2px; padding-inline-start: 14px; border-inline-start: 1px solid rgba(var(--ink-rgb), .14); } .site-header--overlay:not(.is-stuck) .nav__lang { border-inline-start-color: rgba(var(--white-rgb), .4); } .nav__lang-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 6px; font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: var(--nav-fg); text-decoration: none; opacity: .6; } .site-header--overlay:not(.is-stuck) .nav__lang-link { text-shadow: 0 1px 6px rgba(var(--ink-rgb), .5); } .nav__lang-link:hover { opacity: .9; } .nav__lang-link.is-active { opacity: 1; font-weight: 700; } .nav__lang-sep { opacity: .35; font-size: .75rem; } /* Mobile disclosure toggle. It needs no inner bars: the three strokes come from ::before, ::after and a centred background gradient. Markup is just */ .nav__toggle { position: relative; display: none; /* revealed at the nav breakpoint, §14 */ align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--r-sm); color: var(--nav-fg); cursor: pointer; background: transparent linear-gradient(currentColor, currentColor) no-repeat center / 22px 2px; transition: background-color var(--speed) var(--ease), background-size var(--speed) var(--ease); } .nav__toggle::before, .nav__toggle::after { content: ""; position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--speed) var(--ease), top var(--speed) var(--ease); } .nav__toggle::before { top: 14px; } .nav__toggle::after { top: 28px; } .nav__toggle:hover { background-color: var(--tint-teal); } .nav.is-open .nav__toggle { background-size: 0 2px; } .nav.is-open .nav__toggle::before { top: 21px; transform: rotate(45deg); } .nav.is-open .nav__toggle::after { top: 21px; transform: rotate(-45deg); } /* ============================================================================= 05 BUTTONS ============================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 44px; padding: 14px 30px; border: 1.5px solid transparent; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn--gold { background: var(--gold); color: var(--ink); box-shadow: 0 8px 24px rgba(var(--ink-rgb), .22); } .btn--gold:hover, .btn--gold:focus-visible { background: var(--gold-deep); color: var(--ink); box-shadow: 0 12px 30px rgba(var(--ink-rgb), .26); } .btn--gold:active { box-shadow: 0 4px 14px rgba(var(--ink-rgb), .22); } .btn--teal { background: var(--teal); color: var(--white); box-shadow: 0 8px 22px rgba(var(--teal-deep-rgb), .28); } .btn--teal:hover, .btn--teal:focus-visible { background: var(--teal-deep); color: var(--white); } /* ghost: teal outline on light surfaces, frosted white over art and on the dark / teal bands (the mockup's secondary hero button) */ .btn--ghost { background: transparent; border-color: var(--teal); color: var(--teal-deep); } .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--tint-teal); border-color: var(--teal-deep); color: var(--teal-deep); } .section--ink .btn--ghost, .section--teal .btn--ghost, .donate-hero .btn--ghost, .footer .btn--ghost { background: rgba(var(--white-rgb), .14); border-color: rgba(var(--white-rgb), .6); color: var(--white); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .section--ink .btn--ghost:hover, .section--teal .btn--ghost:hover, .donate-hero .btn--ghost:hover, .footer .btn--ghost:hover, .section--ink .btn--ghost:focus-visible, .section--teal .btn--ghost:focus-visible, .donate-hero .btn--ghost:focus-visible, .footer .btn--ghost:focus-visible { background: rgba(var(--white-rgb), .24); border-color: var(--white); color: var(--white); } /* In the hero the button sits on an unconstrained photograph — the snow-lit band of the Ausangate frame is bright enough that a white wash would leave white type at ~1.9:1. An ink wash carries its own contrast (≥6.5:1 over any pixel in that image) and still reads as frosted glass over the mountain. */ .hero .btn--ghost { background: rgba(var(--ink-rgb), .60); border-color: rgba(var(--white-rgb), .75); color: var(--white); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .hero .btn--ghost:hover, .hero .btn--ghost:focus-visible { background: rgba(var(--ink-rgb), .74); border-color: var(--white); color: var(--white); } .btn--lg { min-height: 54px; padding: 17px 42px; font-size: 1.0625rem; } .btn--block { display: flex; width: 100%; } /* ============================================================================= 06 SECTIONS, WRAP, TONE VARIANTS ============================================================================= */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: var(--section-y); background: var(--surface); color: var(--body-fg); } .section > .wrap > * + .card-grid, .section > .wrap > * + .gallery { margin-top: clamp(32px, 4.5vw, 54px); } .section__head { max-width: 900px; margin-bottom: clamp(32px, 4.5vw, 52px); } .section__head.center { margin-inline: auto; } .section--paper { --surface: var(--paper); background: var(--paper); } .section--paper-alt { --surface: var(--paper-alt); background: var(--paper-alt); } .section--ink, .footer { --surface: var(--ink); --body-fg: var(--on-dark-soft); --heading-fg: var(--white); --eyebrow-fg: var(--gold); --link: var(--gold); --link-hover: var(--white); --rule: var(--ink-line); --focus: var(--gold); } .section--ink { background: var(--ink); color: var(--on-dark-soft); } .section--teal { --surface: var(--teal); --body-fg: var(--white); --heading-fg: var(--white); /* On teal, --on-dark is 4.4:1 and gold 3.1:1 — both short of 4.5:1 for the 12px eyebrow and for link text. White (4.9:1) is the only palette value that clears it, so hover is carried by the underline instead of colour. */ --eyebrow-fg: var(--white); --link: var(--white); --link-hover: var(--white); --rule: rgba(var(--white-rgb), .28); --focus: var(--white); overflow: hidden; color: var(--white); /* The field behind text never runs lighter than --teal, so white copy holds 4.9:1 across the whole band. Bright turquoise is a highlight and a ring, never a surface under type. */ background: radial-gradient(90% 70% at 88% 6%, rgba(var(--teal-bright-rgb), .08), transparent 62%), linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 55%, var(--teal-deep) 100%); } /* the traveling duck (left) and the walking photo (right) — this one teal band on index.html only, not every .section--teal (about.html has one too, for "The question"). Mirrored corners, same size, same treatment. */ .donate-cta__duck, .donate-cta__walker { position: absolute; top: clamp(14px, 3vw, 28px); z-index: 1; width: clamp(100px, 15vw, 190px); height: auto; border-radius: var(--r-md); box-shadow: 0 6px 20px rgba(var(--ink-rgb), .35); } /* the duck is a