/* FO website demo: site-only components (2 Oct 2026). Tokens only. */ /* ---------- the three doors (replaces the photo path cards; David: "ok but not impressive") ---------- */ .fo-doors { display: flex; gap: 1rem; min-height: 560px; margin-top: clamp(1rem, 2vw, 2rem); } .fo-door { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem; padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); border-radius: var(--fo-radius-panel); overflow: hidden; isolation: isolate; text-decoration: none; color: var(--fo-ink); box-shadow: var(--fo-shadow-card); transition: flex-grow .7s var(--fo-ease-inout), transform .4s var(--fo-ease-out); } .fo-door:hover { color: var(--fo-ink); } .fo-door--collect { background: var(--fo-deep); color: var(--fo-paper); } .fo-door--collect:hover { color: var(--fo-paper); } .fo-door--grow { background: var(--fo-mint); } .fo-door--idea { background: var(--fo-blob-2); } .fo-door__n { position: absolute; top: clamp(1.25rem, 1rem + 1vw, 2rem); left: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: 800; font-size: var(--fo-small); letter-spacing: .04em; opacity: .7; } .fo-door__g { position: absolute; z-index: -1; top: 9%; right: 7%; width: min(46%, 210px); height: auto; color: var(--fo-green); opacity: .9; transition: transform .8s var(--fo-ease-out); } .fo-door--collect .fo-door__g { color: var(--fo-mint); opacity: .55; } .fo-door--idea .fo-door__g { color: var(--fo-deep); opacity: .75; } .fo-door__g path { stroke-dasharray: 1; stroke-dashoffset: 1; } .fo-js .fo-doors.is-in .fo-door__g path { animation: fo-draw 1.6s var(--fo-ease-inout) forwards; } .fo-js .fo-doors.is-in .fo-door:nth-child(2) .fo-door__g path { animation-delay: .25s; } .fo-js .fo-doors.is-in .fo-door:nth-child(3) .fo-door__g path { animation-delay: .5s; } .fo-door:hover .fo-door__g path { animation: fo-draw-again 1.2s var(--fo-ease-inout) forwards !important; } @keyframes fo-draw { to { stroke-dashoffset: 0; } } @keyframes fo-draw-again { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } } .fo-door__k { font-weight: 700; font-size: var(--fo-small); color: var(--fo-green); } .fo-door--collect .fo-door__k { color: var(--fo-mint); } .fo-door__t { font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); font-weight: 800; letter-spacing: var(--fo-track-display); line-height: 1.02; max-width: 11ch; } .fo-door__s { max-width: 34ch; color: var(--fo-ink-2); font-size: var(--fo-body); line-height: 1.5; } .fo-door--collect .fo-door__s { color: var(--fo-mint); } .fo-door__go { margin-top: .9rem; display: inline-flex; align-items: center; gap: .6rem; width: fit-content; min-height: 48px; padding: 0 1.3rem; border-radius: var(--fo-radius-pill); background: var(--fo-action); color: var(--fo-white); font-weight: 800; font-size: var(--fo-small); box-shadow: var(--fo-shadow-cta); } .fo-door__go i { font-style: normal; transition: transform .3s var(--fo-ease-out); } .fo-door:hover .fo-door__go i { transform: translateX(4px); } @media (min-width: 900px) { .fo-door:hover, .fo-door:focus-visible { flex-grow: 1.7; } .fo-door:hover .fo-door__g { transform: scale(1.06) rotate(-3deg); } .fo-door__s, .fo-door__go { transition: opacity .5s var(--fo-ease-out), transform .5s var(--fo-ease-out); } .fo-doors:hover .fo-door:not(:hover) .fo-door__s, .fo-doors:hover .fo-door:not(:hover) .fo-door__go { opacity: 0; transform: translateY(8px); } } @media (max-width: 899px) { .fo-doors { flex-direction: column; min-height: 0; } .fo-door { min-height: 300px; } .fo-door__g { width: 34%; top: 10%; right: 6%; } .fo-door { padding-top: 9rem; flex: none; } } @media (prefers-reduced-motion: reduce) { .fo-door, .fo-door__g, .fo-door__s, .fo-door__go { transition: none !important; } .fo-door__g path { stroke-dashoffset: 0; animation: none !important; } } /* the farm-era film, linked from where we started */ .fo-film { margin: 1.5rem .75rem 0 0; display: inline-flex; align-items: center; gap: 1rem; padding: .9rem 1.4rem .9rem .9rem; border-radius: var(--fo-radius-pill); background: var(--fo-card); box-shadow: var(--fo-shadow-card); text-decoration: none; color: var(--fo-ink); transition: transform .3s var(--fo-ease-out); } .fo-film:hover { transform: translateY(-2px); color: var(--fo-ink); } .fo-film__play { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--fo-action); color: var(--fo-white); box-shadow: var(--fo-shadow-cta); } .fo-film b { display: block; font-size: 1.05rem; } .fo-film small { display: block; color: var(--fo-ink-2); font-size: var(--fo-small); } /* scroll story: each crowd section settles in the middle of the screen as you scroll, so the words and the crowd's shape line up. "proximity" only nudges when you stop near a section; it never traps you. Desktop only (phones keep native scrolling), and off for people who prefer reduced motion. */ /* section alignment now runs in assets/site.js (strict, never traps). */ /* the doors sit on a solid band, so the crowd never shows behind or beside them (David, 2 Oct) */ .fo-doors-sec { position: relative; z-index: 2; background: var(--fo-paper); padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0; } .fo-doors-sec::before, .fo-doors-sec::after { content: ""; position: absolute; left: 0; right: 0; height: 5rem; pointer-events: none; } .fo-doors-sec::before { top: -5rem; background: linear-gradient(transparent, var(--fo-paper)); } .fo-doors-sec::after { bottom: -5rem; background: linear-gradient(var(--fo-paper), transparent); } /* origin photos as a four-step timeline: photo, then a numbered step on a shared line (v18, David: captions felt rudimentary) */ .fo-origins { margin-top: clamp(2.5rem, 5vw, 4.5rem); } .fo-origins__grid { display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(2, 1fr); counter-reset: o; } @media (min-width: 1000px) { .fo-origins__grid { grid-template-columns: repeat(4, 1fr); } } .fo-origins .fo-photo { counter-increment: o; aspect-ratio: auto; background: none; box-shadow: none; overflow: visible; border-radius: 0; } .fo-origins .fo-photo img { aspect-ratio: 4 / 3; height: auto; border-radius: 22px; box-shadow: var(--fo-shadow-card); transition: transform .8s var(--fo-ease-out); } .fo-origins .fo-photo:hover img { transform: translateY(-3px); } .fo-origins .fo-photo figcaption { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin-top: 1.1rem; padding: 1.1rem 0 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; border-top: 2px solid var(--fo-green-18); color: var(--fo-ink); font-size: var(--fo-body); } .fo-origins .fo-photo figcaption::before { content: "0" counter(o); position: absolute; top: -.8rem; left: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--fo-yellow); color: var(--fo-ink); font-size: .72rem; font-weight: 800; box-shadow: 0 0 0 5px var(--fo-paper); } .fo-origins .fo-photo figcaption b { display: block; margin-top: .35rem; font-size: 1.05rem; font-weight: 800; letter-spacing: var(--fo-track-tight); line-height: 1.25; } .fo-origins .fo-photo figcaption span { display: block; margin-top: .15rem; font-size: var(--fo-small); color: var(--fo-ink-3); font-weight: 500; } /* hero fits one screen on any laptop (David, 2 Oct: "landing page doesn't land exactly"): the headline scales with the screen's height as well as its width, and the stacked labels tighten up */ @media (min-width: 900px) { .fo-scene--hero { min-height: calc(100svh - 130px); padding-block: 1.5rem; } } .fo-scene--hero .fo-display { font-size: clamp(2.4rem, min(5.6vw, 8svh), 6.25rem); } .fo-scene--hero .fo-lede { font-size: clamp(1rem, min(1.4vw, 2.3svh), 1.375rem); margin-top: clamp(.8rem, 2svh, 1.5rem); } .fo-scene--hero .fo-pill { margin-top: 0; } .fo-scene--hero .fo-display { margin-top: clamp(.6rem, 2svh, 1.5rem) !important; } .fo-scene--hero .fo-actions { margin-top: clamp(1rem, 2.6svh, 2rem); } @media (max-height: 820px) and (min-width: 900px) { .fo-scene--hero .fo-pill { display: none; } } @media (max-height: 700px) and (min-width: 900px) { .fo-scene--hero .fo-loopline { display: none !important; } } /* Quicker motion (David, 2 Oct): same animations, about 40% faster. */ :root { --fo-rise: .34s; --fo-stagger: .07s; --fo-wipe: .26s; } .fo-js .fo-fade { transition-duration: .4s, .4s; transition-delay: calc(var(--d, 0) * .5s); } .fo-js .fo-mark > svg { transition-delay: calc(var(--mi, 0) * .08s + .15s); } /* ====================================================================== QA round 1, fixer A3 (4 Oct 2026): performance, motion, accessibility ====================================================================== */ /* anchors and focus never hide under the sticky header (banner + header) */ html { scroll-padding-top: 96px; } @media (min-width: 900px) { html { scroll-padding-top: 110px; } } /* images: calico placeholder behind every photo, and a gentle fade in once it has loaded (site.js adds .fo-imgwait only to images that arrive late) */ .fo-photo, .fo-origins .fo-photo img { background-color: var(--fo-paper-2); background-image: linear-gradient(135deg, color-mix(in srgb, var(--fo-mint) 55%, transparent), color-mix(in srgb, var(--fo-blob-2) 28%, transparent) 55%, color-mix(in srgb, var(--fo-mint) 40%, transparent)); } img.fo-imgwait { opacity: 0; } img.fo-imgwait.is-loaded { opacity: 1; transition: opacity .6s var(--fo-ease-out); } @media (prefers-reduced-motion: reduce) { img.fo-imgwait, img.fo-imgwait.is-loaded { opacity: 1; transition: none; } } /* home first screen on a phone: smaller artwork band so the lede and both buttons sit inside 390 x 844 */ @media (max-width: 899px) { .fo-scene--hero { padding-top: 15svh; padding-bottom: 1.25rem; min-height: 0; } .fo-scene--hero .fo-loopline { display: none !important; } .fo-scene--hero .fo-pill { display: none; } .fo-scene--hero .fo-display { font-size: clamp(2.1rem, 9.2vw, 3rem); max-width: 13ch; margin-top: 0 !important; } .fo-scene--hero .fo-lede { font-size: 1rem; line-height: 1.45; margin-top: .75rem; } .fo-scene--hero .fo-actions { margin-top: 1rem; gap: .6rem 1.25rem; } .fo-scene--hero .fo-scene__text { padding: 1.1rem 1rem; } } /* tap targets: 44px minimum for text links and navigation (WCAG 2.5.8 target size, with room to spare) */ .fo-nav a { display: inline-flex; align-items: center; min-height: 44px; } .fo-nav a::after { bottom: 6px; } .fo-sheet nav a { min-height: 48px; display: flex; align-items: center; } .fo-footer li a, .fo-footer__ack a { display: inline-flex; align-items: center; min-height: 44px; } .fo-footer ul { gap: 0; } .fo-link { min-height: 44px; } main p a:not(.fo-cta):not(.fo-link):not(.fo-door), main li a:not(.fo-cta):not(.fo-link):not(.fo-door) { padding-block: .6em; margin-block: -.6em; } .fo-menu-btn { min-width: 44px; min-height: 44px; } .fo-skip:focus { scroll-margin: 0; } /* video: the transcript that sits under each reel (A1/A2 add the markup) */ .fo-transcript { margin-top: .9rem; max-width: 46ch; font-size: var(--fo-small); color: var(--fo-ink-2); } .fo-transcript summary { cursor: pointer; font-weight: 700; color: var(--fo-green); min-height: 44px; display: flex; align-items: center; } .fo-transcript p { margin: .4rem 0 0; line-height: 1.5; } [data-fo-reel] .fo-play[hidden] { display: none; } .fo-endcard__url { display: inline-flex; align-items: center; min-height: 44px; } /* ====================================================================== QA round 2, fixer F2 (4 Oct 2026): LCP, hero crowd edge, artwork clear of headings ====================================================================== */ /* the hero lede is the largest text on the home page, so it paints at first paint: no fade or lift on it (the headline keeps its rise) */ .fo-js.fo-armed .fo-scene--hero .fo-lede.fo-fade, .fo-js.fo-armed .fo-scene--hero .fo-lede.fo-fade.fo-now { opacity: 1; transform: none; transition: none; animation: none; } @media (max-width: 899px) { /* home hero on a phone: the text panel melts into the crowd instead of cutting it with a hard line (and no blur-smudges of the figures behind it) */ .fo-scene--hero .fo-scene__text { padding-top: 2.6rem; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--fo-paper) 88%, transparent) 2.2rem); } .fo-scene--hero { padding-top: calc(15svh - 1.5rem); } /* inner page heroes (collection, rules, workshops, advisory, about...): leave room for the artwork band so it never sits behind the heading or lede */ .fo-hero--page.fo-scene--hero:not([data-crowd*='"parts":[]']) { padding-top: max(31svh, 248px); padding-bottom: 1.5rem; min-height: 0; } .fo-hero--page .fo-display { font-size: clamp(2.1rem, 9.2vw, 3rem); } .fo-hero--page .fo-lede { font-size: 1rem; line-height: 1.45; } .fo-hero--page + .fo-section { padding-top: 2.5rem; } } /* the next section's top fade (.fo-plain::before) was washing out the last line of the hero lede: lift the hero above it */ .fo-hero { z-index: 1; } /* ====================================================================== QA round 4, fixer G2 (4 Oct 2026): phone length and hero text clear of the crowd ====================================================================== */ .fo-doors-more { margin: 1.5rem 0 0; text-align: center; color: var(--fo-ink-2); } @media (max-width: 899px) { /* hero text starts below the crowd formation (formation ends at about 345px at 390x844) */ .fo-scene--hero { padding-top: max(23svh, 190px); } .fo-hero--page.fo-scene--hero:not([data-crowd*='"parts":[]']) { padding-top: max(40svh, 330px); } /* tighter rhythm: scenes are as tall as their content plus a formation band, not a full screen each */ .fo-scene:not(.fo-scene--hero) { min-height: 0; padding: max(34svh, 250px) 0 2rem; } .fo-section { padding-block: 2.75rem; } .fo-section.fo-plain[style*="padding-top:0"] { padding-top: 0 !important; } .fo-doors-sec { padding-block: 1.5rem; } .fo-door { min-height: 0; padding-top: 5.75rem; } .fo-doors { gap: .85rem; } .fo-endcard { min-height: 0; padding-block: 4.5rem; } .fo-scene__text .fo-lede { margin-top: 1rem; } .fo-scene__text .fo-timeline { margin-top: 1.25rem !important; } } @media (max-width: 899px) { .fo-scene:not(.fo-scene--hero) { padding-top: max(27svh, 215px); padding-bottom: 1.5rem; } .fo-door { padding-top: 4.5rem; gap: .4rem; } .fo-door__g { width: 26%; top: 8%; } .fo-door__go { margin-top: .5rem; } /* the two farm-era photos sit side by side on a phone */ .fo-split > div:first-child[style*="display:grid"] { grid-template-columns: 1fr 1fr; gap: .6rem !important; } .fo-split > div:first-child[style*="display:grid"] .fo-photo--wide { aspect-ratio: 4 / 5; } .fo-split > div:first-child[style*="display:grid"] figcaption { font-size: .68rem; left: .5rem; right: .5rem; bottom: .5rem; padding: .35rem .5rem; } .fo-film { margin-top: 1rem; } } @media (max-width: 899px) { .fo-scene:not(.fo-scene--hero) { padding-top: max(22svh, 180px); padding-bottom: 1rem; } .fo-scene__text { padding: 1.1rem 1rem; } .fo-scene__text .fo-timeline li { padding-block: .35rem; } .fo-doors-more { margin-top: 1rem; } .fo-doors-more .fo-link { justify-content: center; text-align: center; } .fo-door__s { font-size: .95rem; line-height: 1.4; } } @media (max-width: 899px) { .fo-endcard { padding-block: 3.25rem; } .fo-door { padding-bottom: 1.25rem; } .fo-scene--hero { padding-bottom: .5rem; } } /* The board (6 Oct 2026): a calm, slow-moving row of portrait cards, our version of the old rotating board banner. */ .fo-bhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .fo-bctl { display: flex; gap: .6rem; align-items: center; margin-bottom: .4rem; } .fo-bbtn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--fo-green-18); background: var(--fo-card); color: var(--fo-green); cursor: pointer; transition: transform .3s var(--fo-ease-out), background .3s, color .3s, border-color .3s; } .fo-bbtn:hover { background: var(--fo-green); color: var(--fo-white); border-color: var(--fo-green); transform: translateY(-2px); } .fo-bbtn:focus-visible, .fo-bcard:focus-visible { outline: 3px solid var(--fo-green); outline-offset: 3px; } .fo-bbtn--pause .i-play { display: none; } .fo-bbtn--pause[aria-pressed="true"] .i-play { display: block; } .fo-bbtn--pause[aria-pressed="true"] .i-pause { display: none; } .fo-board { margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); overflow: hidden; } .fo-board__track { --fo-bpad: max(var(--fo-gutter, 1.25rem), calc((100% - var(--fo-max, 1200px)) / 2)); display: flex; gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .75rem var(--fo-bpad) 2.5rem; scroll-padding-inline: var(--fo-bpad); } .fo-board__track::-webkit-scrollbar { display: none; } .fo-bcard { flex: 0 0 clamp(250px, 24vw, 310px); scroll-snap-align: start; background: var(--fo-card); border-radius: 30px; padding: 12px 12px 1.5rem; box-shadow: var(--fo-shadow-card); transition: transform .5s var(--fo-ease-out); } .fo-bcard:hover, .fo-bcard:focus-visible { transform: translateY(-4px); } .fo-bcard img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 22px; background-color: var(--fo-paper-2); background-image: linear-gradient(135deg, color-mix(in srgb, var(--fo-mint) 55%, transparent), color-mix(in srgb, var(--fo-blob-2) 28%, transparent) 55%, color-mix(in srgb, var(--fo-mint) 40%, transparent)); } .fo-bcard__name { margin: 1.1rem .6rem 0; font-size: 1.2rem; font-weight: 800; letter-spacing: var(--fo-track-tight); line-height: 1.2; color: var(--fo-ink); } .fo-bcard__role { margin: .35rem .6rem 0; display: flex; align-items: baseline; gap: .5rem; font-size: var(--fo-small); font-weight: 700; color: var(--fo-green); line-height: 1.3; } .fo-bcard__role::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--fo-yellow); } .fo-bcard__bio { margin: .8rem .6rem 0; font-size: var(--fo-small); line-height: 1.55; color: var(--fo-ink-2); } @media (max-width: 700px) { .fo-bcard { flex-basis: min(78vw, 300px); } .fo-bctl { display: none; } } @media (prefers-reduced-motion: reduce) { .fo-board__track { scroll-behavior: auto; } .fo-bcard, .fo-bbtn { transition: none; } .fo-bcard:hover, .fo-bcard:focus-visible, .fo-bbtn:hover { transform: none; } } /* 9 Oct 2026: a long