/* ============================================================================ ETHAN WILDING — Islands Trust campaign site Design system. Aesthetic: "the fab-lab guy" — a maker's field notebook meets Salt Spring coastal naturalism. Warm unbleached paper, forest ink, arbutus accent, fine drafting-grid motifs and monospaced technical annotations. No build step: plain CSS, custom properties, system of utility + component classes shared across the static pages. ========================================================================== */ /* ---- Fonts (Google Fonts, loaded in each ) ------------------------- Display : Fraunces — soft, characterful "old-style" serif; the warm, handmade voice. Optical sizing on. Body : Hanken Grotesk — clean humanist sans, friendly and legible. Mono : Spline Sans Mono — CAD/drafting annotations, eyebrows, ticks. --------------------------------------------------------------------------- */ :root { /* Palette — "fab-lab" maker/technical, deliberately COOL so it doesn't read like the warm Spectral-serif kitchen-table site. Variable names are kept (so all the markup cascades), but re-toned: --forest now holds a deep petrol/marine teal, --arbutus a signal amber, paper a cool concrete bone. */ --paper: #F2F1EA; /* warm off-white ground */ --paper-2: #E9E7DC; /* deeper panel */ --paper-3: #DBD8CA; /* card edges / wells */ --ink: #14222E; /* deep navy-ink, primary text */ --ink-soft: #3A4B57; /* secondary text */ --ink-faint: #56646F; /* captions, meta (4.9:1 on --paper-2, WCAG AA) */ --forest: #2F639A; /* primary — ocean blue, lighter than the original navy, not teal */ --forest-2: #2F639A80; /* translucent primary */ --moss: #4C7CB2; /* mid ocean blue */ --arbutus: #8A5F10; /* accent — deep gold; darkened 2026-07 for WCAG AA: 4.5:1+ on --paper/--paper-2 at small-text sizes */ --arbutus-2: #F2C766; /* vivid gold — fills, shapes, large/bold on-navy text (3.9:1 on --forest; not for small text on navy) */ --sea: #6E93A8; /* muted coastal blue */ --line: rgba(20,34,46,.16); --line-soft: rgba(20,34,46,.09); /* Type — grotesk + mono, no serif (the kitchen-table site is serif-forward). Archivo for display (uses the variable width axis on big headings for an engineered, signage feel); Hanken Grotesk body; Spline Sans Mono labels. */ --display: "Archivo", system-ui, sans-serif; --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; /* Scale (fluid) */ --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.90rem); --step-0: clamp(1.02rem, 0.98rem + 0.22vw, 1.16rem); --step-1: clamp(1.26rem, 1.18rem + 0.40vw, 1.55rem); --step-2: clamp(1.58rem, 1.42rem + 0.78vw, 2.10rem); --step-3: clamp(1.97rem, 1.70rem + 1.36vw, 2.95rem); --step-4: clamp(2.15rem, 1.85rem + 1.70vw, 3.45rem); --step-5: clamp(2.55rem, 2.05rem + 2.55vw, 4.40rem); /* Space + radius */ --gut: clamp(1.1rem, 0.7rem + 1.6vw, 2rem); --rad: 3px; /* sharp, drafted corners */ --maxw: 1180px; } /* ---- Reset / base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--body); font-size: var(--step-0); line-height: 1.62; color: var(--ink); background-color: var(--paper); /* paper grain + faint drafting grid layered behind everything */ background-image: radial-gradient(var(--line-soft) 0.5px, transparent 0.5px), radial-gradient(var(--line-soft) 0.5px, var(--paper) 0.5px); background-size: 14px 14px, 14px 14px; background-position: 0 0, 7px 7px; font-feature-settings: "ss01", "cv01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--arbutus); } /* ---- Layout helpers ------------------------------------------------------ */ .wrap { width: min(100% - 2*var(--gut), var(--maxw)); margin-inline: auto; } .wrap--narrow { width: min(100% - 2*var(--gut), 760px); margin-inline: auto; } section { padding-block: clamp(3rem, 2rem + 5vw, 6rem); position: relative; } .stack > * + * { margin-top: 1.1em; } /* Eyebrow / technical label — the "drafting annotation" voice. These double as SECTION + TOPIC labels ("Why Ethan is running", "Issue 01 / Housing"), so they're sized up from a tiny kicker to a readable scan anchor: when people skim the page, the topic word is what they hunt for. */ .eyebrow { font-family: var(--mono); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.22rem); /* was --step--1 (~0.85rem) */ letter-spacing: 0.14em; /* tighter now that it's larger */ text-transform: uppercase; color: var(--arbutus); display: inline-flex; align-items: center; gap: 0.6em; font-weight: 600; /* heavier so it pops when scanning */ } .eyebrow::before { display: none; } /* removed the leading dash/rule before labels */ /* Heading-scale variant: for a section whose label IS the heading (no

), the label should out-size the supporting quote/body beneath it. */ .eyebrow--head { display: block; font-size: var(--step-2); letter-spacing: 0.05em; line-height: 1.14; } /* Headings */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 640; line-height: 1.06; letter-spacing: -0.018em; color: var(--ink); } h1 { font-size: var(--step-5); font-weight: 720; letter-spacing: -0.025em; line-height: 1.01; } h2 { font-size: var(--step-3); font-weight: 680; } h3 { font-size: var(--step-2); font-weight: 620; } h4 { font-size: var(--step-1); font-family: var(--body); font-weight: 700; letter-spacing: 0; } .display-italic { font-style: italic; font-weight: 500; } p.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); font-family: var(--body); font-weight: 420; } /* ---- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding: 0.85em 1.4em; border-radius: var(--rad); text-decoration: none; cursor: pointer; border: 1.5px solid var(--forest); transition: transform .18s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; background: var(--forest); color: var(--paper); } .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); box-shadow: 4px 5px 0 var(--arbutus); } /* Ghost buttons carry a faint fill + solid border at rest so they read as buttons, not as another small-caps eyebrow label. */ .btn--ghost { background: color-mix(in srgb, var(--forest) 9%, transparent); color: var(--forest); border-color: var(--forest); } .btn--ghost:hover { background: var(--forest); color: var(--paper); box-shadow: 4px 5px 0 var(--arbutus); } /* Header CTA is a clear, filled pill, distinct from the plain nav links. Selector is `.nav a.nav__cta` (not `.nav__cta`) on purpose: `.nav a` (0,1,1) sets the link colour to --ink-soft and outranks a bare `.nav__cta` (0,1,0), which rendered the "Follow on Facebook" label dark-on-forest = invisible. The `a.nav__cta` compound (0,2,1) wins so the label stays --paper. */ .nav a.nav__cta { background: var(--forest); color: var(--paper); border-color: var(--forest); } .nav a.nav__cta:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .btn__arrow { transition: transform .2s ease; } .btn:hover .btn__arrow { transform: translateX(3px); } /* ---- Site header / nav --------------------------------------------------- */ .site-head { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); background: color-mix(in srgb, var(--paper) 86%, transparent); border-bottom: 1px solid var(--line); } .site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; } .brand { display: flex; align-items: baseline; gap: 0.55rem; text-decoration: none; color: var(--ink); } .brand__name { font-family: var(--display); font-weight: 600; font-size: 1.32rem; letter-spacing: -0.01em; } .brand__tag { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.9rem); } .nav a { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; position: relative; padding-block: 0.3em; } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--arbutus); transition: width .22s ease; } .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); } .nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; } .nav__cta { display: inline-flex; } .nav-toggle { display: none; background: none; border: 1.5px solid var(--line); border-radius: var(--rad); padding: 0.4rem 0.6rem; cursor: pointer; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--ink); text-transform: uppercase; } /* ---- Hero ---------------------------------------------------------------- */ .hero { padding-top: clamp(2.5rem, 1.5rem + 5vw, 5rem); padding-bottom: 0; } .hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .hero h1 { margin-top: 0.6rem; } .hero h1 .hl { color: var(--forest); } .hero__sub { margin-top: 1.4rem; max-width: 30ch; } .hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; } .hero__meta { margin-top: 2.2rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; } .hero__meta b { color: var(--ink); font-weight: 500; } /* ---- Portrait frame (bokeh / grayed treatment for sourced photos) -------- */ .portrait { position: relative; border-radius: var(--rad); overflow: hidden; background: var(--paper-3); aspect-ratio: 4 / 5; border: 1px solid var(--line); } /* Images carry their own treatment baked in: portraits = full-colour subject on a grayscale background (rembg-segmented); placeholder scenics = grayscale. So no CSS filter here. */ .portrait img { width: 100%; height: 100%; object-fit: cover; } /* corner registration brackets — the "drawing frame" detail */ .portrait::before, .portrait::after { content: ""; position: absolute; width: 18px; height: 18px; z-index: 3; pointer-events: none; } .portrait::before { top: 10px; left: 10px; border-top: 1.5px solid var(--paper); border-left: 1.5px solid var(--paper); } .portrait::after { bottom: 10px; right: 10px; border-bottom: 1.5px solid var(--paper); border-right: 1.5px solid var(--paper); } .portrait__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); background: linear-gradient(transparent, rgba(20,28,22,.78)); padding: 1.8rem 0.9rem 0.7rem; } /* placeholder state when no real photo yet */ .portrait.is-placeholder { display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 12px, var(--paper-3) 12px, var(--paper-3) 24px); } .portrait.is-placeholder .ph { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 1.2rem; } /* ---- Section heading block ---------------------------------------------- */ .sec-head { max-width: 56ch; margin-bottom: clamp(1.8rem, 3vw, 3rem); } .sec-head h2 { margin-top: 0.5rem; } .sec-head p { margin-top: 0.9rem; color: var(--ink-soft); } /* ---- Pull quote ---------------------------------------------------------- */ .pull { border-left: 3px solid var(--arbutus); padding: 0.4rem 0 0.4rem 1.5rem; font-family: var(--display); font-size: var(--step-2); line-height: 1.14; font-style: normal; font-weight: 540; letter-spacing: -0.01em; color: var(--ink); } .pull cite { display: block; margin-top: 0.9rem; font-family: var(--mono); font-style: normal; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } /* ---- Panels (alt background sections) ------------------------------------ */ .panel { background: var(--forest); color: var(--paper); } .panel h1, .panel h2, .panel h3 { color: var(--paper); } .panel .eyebrow { color: var(--arbutus-2); } .panel .eyebrow::before { background: var(--arbutus-2); } /* Body-size links inside panels are paper with a gold underline — gold text at body size is only ~3.9:1 on navy (fails AA); paper is 5.5:1. */ .panel a { color: var(--paper); text-decoration-color: var(--arbutus-2); } .panel a:hover { color: var(--arbutus-2); } .panel .pull { color: var(--paper); border-color: var(--arbutus-2); } /* Buttons keep their OWN text colour inside panels. Without this, the ".panel a" rule above (specificity 0,1,1) beats ".btn--gold" (0,1,0) and paints gold text on a gold button — invisible until the hover state kicks in. */ .panel .btn { color: var(--paper); } .panel .btn--gold { color: var(--ink); } .panel .btn--gold:hover { color: #fff; } .panel .btn--ghost { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 70%, transparent); background: color-mix(in srgb, var(--paper) 10%, transparent); } .panel .btn--ghost:hover { background: var(--paper); color: var(--forest); } .panel--paper2 { background: var(--paper-2); color: var(--ink); } /* Featured op-ed quote on its own section: centred narrow column, display italic, sentences broken into rhythmic lines, gold opening quote mark. */ .panel--quote { border-top: 1px solid color-mix(in srgb, var(--arbutus-2) 30%, transparent); } .quote-feature { max-width: 54rem; margin-inline: auto; text-align: center; } .quote-feature blockquote { margin: 0; } .quote-feature::before { content: "\201C"; display: block; font-family: var(--display); font-size: 3.2rem; line-height: 0.5; color: var(--arbutus-2); } /* text-wrap: balance evens out the wrapped lines so no paragraph is left with a single orphaned word on its last line — most visible on mobile, where the centered quote wraps to several lines. */ .quote-feature p { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.12rem, 1rem + 0.6vw, 1.45rem); line-height: 1.4; color: var(--paper); text-wrap: balance; } .quote-feature p + p { margin-top: 0.4em; } .quote-feature figcaption { margin-top: 1.9rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); } /* ---- Pillar cards (key messages) ---------------------------------------- */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-top: 3px solid var(--arbutus-2); border-radius: var(--rad); overflow: hidden; } .pillar { background: var(--paper); padding: clamp(1.4rem, 2vw, 1.9rem); position: relative; transition: background-color .25s ease; } .pillar:hover { background: var(--paper-2); } /* Topic label ("01 / Housing") sized up + bolder so the category is the scan anchor people find first, not the smallest text in the card. */ .pillar__no { font-family: var(--mono); font-size: 0.92rem; letter-spacing: 0.09em; color: var(--arbutus); font-weight: 600; } .pillar h3 { font-size: var(--step-1); margin: 0.7rem 0 0.5rem; line-height: 1.1; color: var(--forest); } .pillar p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; } /* ---- Generic card grid --------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; } .card { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--arbutus-2); border-radius: var(--rad); padding: 1.5rem; position: relative; } .card .eyebrow { margin-bottom: 0.6rem; color: var(--arbutus); } .card h3 { font-size: var(--step-1); color: var(--forest); } .card p { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.5rem; } /* About hero: two couple photos montaged — the orchard walk as the main 4:5 frame, the rope-pinned Instax print as an overlapping, slightly-tilted inset. */ /* About: orchard photo floated right so the bio wraps to its left; the Instax print overlaps the orchard's bottom-right corner. */ /* About hero: give the orchard the larger column so it reads as a hero shot. */ .hero__grid--about { grid-template-columns: 0.9fr 1.1fr; } /* About story: the rope-pinned snapshot floats into the bio so the text wraps around it (editorial inset), clearly smaller than the hero photo. */ .story-snapshot { float: right; width: min(42%, 250px); margin: 0.35rem 0 1rem 1.7rem; border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; box-shadow: 0 10px 26px rgba(20,28,22,.16); } .story-snapshot img { width: 100%; height: auto; display: block; } @media (max-width: 640px) { .hero__grid--about { grid-template-columns: 1fr; } .story-snapshot { float: none; width: 100%; max-width: 260px; margin: 0 auto 1.4rem; } } /* link list (article references) */ .reflist { list-style: none; padding: 0; border-top: 1px solid var(--line); } .reflist li { border-bottom: 1px solid var(--line); } .reflist a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; padding: 1.1rem 0.2rem; text-decoration: none; color: var(--ink); transition: padding-left .2s ease, background-color .2s ease; } .reflist a:hover { padding-left: 0.9rem; background: var(--paper-2); color: var(--forest); } .reflist .src { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .reflist .ttl { font-family: var(--display); font-size: var(--step-1); flex: 1 1 14rem; } .reflist .go { font-family: var(--mono); font-size: 0.75rem; color: var(--arbutus); } /* ---- Policy accordion / FAQ --------------------------------------------- */ .qa { border-top: 1px solid var(--line); } .qa details { border-bottom: 1px solid var(--line); } .qa summary { list-style: none; cursor: pointer; display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem 0.2rem; font-family: var(--display); font-size: var(--step-1); color: var(--ink); transition: color .2s ease; } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { color: var(--forest); } .qa summary .mk { font-family: var(--mono); font-size: 1.1rem; color: var(--arbutus); transition: transform .25s ease; line-height: 1.3; flex: none; } .qa details[open] summary .mk { transform: rotate(45deg); } .qa .ans { padding: 0 0.2rem 1.5rem 2.1rem; color: var(--ink-soft); max-width: 70ch; } .qa .ans > * + * { margin-top: 0.9rem; } .qa .ans .note { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-faint); border-left: 2px solid var(--line); padding-left: 0.8rem; } /* ---- Events ------------------------------------------------------------- */ .events { list-style: none; padding: 0; } .event { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1.4rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--line); } .event__date { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--arbutus); text-transform: uppercase; } .event__date b { display: block; font-size: 1.6rem; color: var(--ink); font-family: var(--display); letter-spacing: -0.01em; } .event h3 { font-size: var(--step-1); } .event p { font-size: var(--step--1); color: var(--ink-faint); margin-top: 0.2rem; } .event__tag { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 99px; padding: 0.25em 0.7em; } .empty-note { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-faint); background: var(--paper-2); border: 1px dashed var(--line); border-radius: var(--rad); padding: 1.2rem 1.4rem; } /* ---- Signs ribbon -------------------------------------------------------- */ .sign { /* Experimental vertical gradient: brighter ocean-blue up top deepening to navy-ink at the base, echoing the home hero's blue fade but rotated 90deg. */ background: linear-gradient(180deg, #3a72ab 0%, var(--forest) 48%, #1b3a5e 100%); color: var(--paper); border-radius: var(--rad); padding: clamp(2rem, 4vw, 3.5rem); text-align: center; position: relative; overflow: hidden; border: 1px solid var(--ink); } /* Tarah's idea: a yellow island silhouette behind the words. Rendered as a masked shape (pure --arbutus-2 through the logo's alpha) so opacity is controllable and the shaded 3D detail doesn't muddy the lettering. Kept low-opacity for legibility; nudge --sign-wm-opacity to taste. */ .sign { --sign-wm-opacity: 0.14; } .sign__watermark { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--arbutus-2); opacity: var(--sign-wm-opacity); -webkit-mask: url(../img/logo-island.png?v=3) center 46% / 82% auto no-repeat; mask: url(../img/logo-island.png?v=3) center 46% / 82% auto no-repeat; } .sign__mark, .sign__date { position: relative; z-index: 1; } .sign__mark { font-family: var(--display); line-height: 0.94; } /* Name dominates — legible from a passing car. */ .sign__name { display: block; font-size: clamp(3.4rem, 9vw, 6rem); font-weight: 780; font-stretch: 110%; letter-spacing: -0.025em; } .sign__for { display: block; font-style: italic; color: var(--arbutus-2); font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 500; margin: 0.25rem 0; } /* Office is the clear second read, well below the name in scale. */ .sign__office { display: block; white-space: nowrap; font-size: clamp(1.5rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; } .sign__date { font-family: var(--mono); font-size: clamp(0.95rem, 1.9vw, 1.25rem); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1.6rem; color: color-mix(in srgb, var(--paper) 82%, transparent); display: inline-flex; align-items: center; gap: 0.5rem; } .sign__island { height: 1.5rem; width: auto; display: inline-block; } /* ---- Footer -------------------------------------------------------------- */ .site-foot { background: var(--ink); color: color-mix(in srgb, var(--paper) 80%, transparent); padding-block: clamp(2.5rem, 4vw, 4rem); margin-top: 2rem; } .site-foot a { color: var(--paper); } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; } .foot-grid h4 { color: var(--paper); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-bottom: 1rem; } .foot-grid ul { list-style: none; padding: 0; } .foot-grid li { margin-bottom: 0.55rem; font-size: 0.92rem; } .foot-brand .brand__name { color: var(--paper); font-size: 1.5rem; } .foot-fine { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(243,237,225,.16); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.03em; color: color-mix(in srgb, var(--paper) 75%, transparent); display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: space-between; } /* ---- Skip link (keyboard / screen-reader users) --------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.7em 1.2em; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: 0 0 var(--rad) 0; } .skip-link:focus { left: 0; } /* ---- Reveal-on-scroll ---------------------------------------------------- */ /* Reveal-on-scroll is a progressive enhancement: only hide when JS is present (main.js adds `.js` to ). Without JS, everything stays visible. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } .hero__portrait { order: -1; max-width: 380px; } .foot-grid { grid-template-columns: 1fr 1fr; } .event { grid-template-columns: 5rem 1fr; } .event__tag { display: none; } } @media (max-width: 680px) { .nav { position: fixed; inset: 56px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 0.5rem var(--gut) 1.2rem; transform: translateY(-130%); transition: transform .3s ease; box-shadow: 0 14px 24px rgba(20,28,22,.12); } .nav.open { transform: none; } .nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); } .nav a::after { display: none; } .nav__cta { margin-top: 0.8rem; justify-content: center; } .nav-toggle { display: inline-block; } .foot-grid { grid-template-columns: 1fr; } .pull { font-size: var(--step-1); } } /* ============================================================================ Navy/gold re-skin additions (2026-07-02): island-logo lockup + Edwards-style photo hero (candidate cut-out over a Salt Spring vista with a navy scrim). ========================================================================== */ /* Brand: gold island mark + wordmark */ .brand { align-items: center; gap: 0.65rem; } .brand__island { height: 3.4rem; width: auto; display: block; flex: none; margin-block: -0.35rem; } .brand__lock { display: flex; flex-direction: column; line-height: 1.05; } .brand__lock .brand__name { font-size: 1.2rem; font-weight: 720; } .brand__lock .brand__tag { margin-top: 0.2rem; } /* Gold button variant */ .btn--gold { background: var(--arbutus-2); border-color: var(--arbutus-2); color: var(--ink); } .btn--gold:hover { background: var(--arbutus); border-color: var(--arbutus); color: #fff; box-shadow: 4px 5px 0 var(--forest); } /* Edwards-style hero */ .hero-ak { position: relative; overflow: hidden; background: var(--forest); isolation: isolate; } .hero-ak__media { position: absolute; inset: 0; z-index: 0; } /* Background was cropped to drop the dead snag that sat on the left (source is now 845x933, portrait-ish). On the wide desktop hero, cover binds on width and overflows vertically, so object-position picks which horizontal band shows — 34% keeps the harbour + islands in view behind Ethan rather than a dead-centre slice of hillside. */ .hero-ak__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; } /* Layout: Ethan on the LEFT, copy on the RIGHT. The scrim is densest on the right (under the text) so the copy reads on solid navy instead of fighting the photo, and clears toward the left so Ethan stands out over the vista. (Reversed from the old right-photo/left-copy arrangement where the cut-out overlapped the text and made it hard to read.) */ .hero-ak__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(47,99,154,.12) 0%, rgba(47,99,154,.42) 38%, rgba(47,99,154,.88) 64%, rgba(47,99,154,.97) 100%); } .hero-ak__ethan { position: absolute; left: 1%; bottom: 0; height: 94%; width: auto; object-fit: contain; object-position: left bottom; z-index: 1; filter: drop-shadow(0 12px 34px rgba(0,0,0,.38)); } /* Height trimmed: hero now ends just below the voting-date meta row instead of running a full 74vh — no dead space beyond Ethan's head-and-shoulders. */ .hero-ak__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; min-height: clamp(26rem, 56vh, 38rem); } .hero-ak__copy { max-width: 35rem; padding-block: 3rem; color: var(--paper); } .hero-ak__copy .eyebrow { color: var(--arbutus-2); } .hero-ak__copy .eyebrow::before { background: var(--arbutus-2); } .hero-ak__copy h1 { color: var(--paper); margin-top: 0.7rem; } .hero-ak__copy h1 .hl { color: var(--arbutus-2); } .hero-ak__copy .lead { color: color-mix(in srgb, var(--paper) 88%, transparent); margin-top: 1.1rem; max-width: 30ch; } .hero-ak__actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.8rem; } .hero-ak .btn--ghost { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 78%, transparent); background: color-mix(in srgb, var(--ink) 24%, transparent); text-shadow: 0 1px 8px rgba(0,0,0,.4); } .hero-ak .btn--ghost:hover { background: var(--paper); color: var(--forest); box-shadow: 4px 5px 0 var(--arbutus-2); } .hero-ak__meta { margin-top: 1.7rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: color-mix(in srgb, var(--paper) 88%, transparent); display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; border-top: 1px solid rgba(242,241,234,.18); padding-top: 1rem; } .hero-ak__meta b { color: var(--paper); font-weight: 600; } /* Stacked hero applies up to 1180px — not just phones but tablets, folding phones, and narrow desktop windows. Below ~1180px the side-by-side overlay (Ethan left, copy right) crowds the copy onto his face; stacking keeps the candidate fully visible and the copy legible. The overlay is used only when there is genuine room for both columns (>= 1181px). */ @media (max-width: 1180px) { /* Hero = STACKED, not overlaid. A photo band (Salt Spring vista with Ethan standing, full-opacity cut-out) sits on top; the message follows on solid navy below. */ /* Kill the global `section` padding-block here: the hero is edge-to-edge. In the overlay layout the absolute media covers that padding, but once the media is in normal flow (stacked) the padding shows as bands of the forest background above and below the photo band. */ .hero-ak { display: flex; flex-direction: column; padding-block: 0; } .hero-ak__media { position: relative; height: 42vh; min-height: 19rem; } .hero-ak__bg { object-position: center 30%; } /* Ethan centred, standing on the band's floor, full opacity. */ .hero-ak__ethan { right: auto; left: 50%; transform: translateX(-50%); opacity: 1; height: 100%; object-position: center bottom; filter: drop-shadow(0 10px 22px rgba(0,0,0,.34)); } /* Scrim keeps the vista readable behind Ethan up top, then fades to solid navy at the base so the photo band blends seamlessly into the copy block. */ .hero-ak__scrim { background: linear-gradient(180deg, rgba(20,34,46,.30) 0%, rgba(47,99,154,.12) 34%, rgba(47,99,154,.34) 74%, var(--forest) 100%); } .hero-ak__inner { min-height: 0; } .hero-ak__copy { padding-block: 2rem 2.6rem; max-width: none; } } /* "Eight things" band gets a soft blue-gray tint so it reads distinct from the blue panels above and the warm sections below; the off-white pillar cards pop. */ .pillars-section { background: #E6EBEE; } /* ---- Contact form (ask a question / request a sign) ---------------------- */ .cform { max-width: 640px; margin-top: 1.4rem; } .cform__fields { display: grid; gap: 1rem; } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .cform label { display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } .cform input, .cform textarea { font-family: var(--body); font-size: var(--step-0); text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--rad); padding: 0.7em 0.85em; width: 100%; } .cform input:focus, .cform textarea:focus { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); } .cform__type { border: none; padding: 0; margin: 0; } .cform__type legend { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; } .cform__radios { display: flex; flex-wrap: wrap; gap: 1.2rem; } .cform__radios label, .cform__check { flex-direction: row; align-items: center; gap: 0.45rem; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: var(--step-0); color: var(--ink); } .cform__note { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--ink-faint); line-height: 1.55; } .cform__ok { display: none; padding: 1.1rem 1.3rem; border: 1.5px solid var(--forest); border-radius: var(--rad); background: color-mix(in srgb, var(--forest) 8%, transparent); color: var(--ink); font-weight: 500; } .cform__ok.is-visible, .cform.is-sent .cform__ok { display: block; } /* Error variant: shown WITH the fields still visible (so "try again" is actually possible), styled as a warning rather than a confirmation. */ .cform__ok.is-error { border-color: #A3492E; background: color-mix(in srgb, #A3492E 8%, transparent); } .cform.is-sent .cform__fields { display: none; } @media (max-width: 560px) { .cform__row { grid-template-columns: 1fr; } } /* Spam honeypot: hidden from people, tempting to bots. */ .cform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }