/* ========================================================================== Self-hosted fonts — no third-party request, better LCP and no GDPR notice ========================================================================== */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-var.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-var-italic.woff2") format("woff2-variations"); font-weight: 200 800; font-style: italic; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ========================================================================== INOUE TEA COMPANY — wholesale matcha Design tokens ========================================================================== */ :root { /* Palette — drawn from unglazed porcelain, sumi ink, and tencha under shade */ --washi: #E9EAE1; --washi-hi: #F3F4EE; --washi-lo: #DDDFD2; --sumi: #14170E; --sumi-soft: #262B1D; --tencha: #23301A; --matcha: #7FAF2E; /* Accent for text on light surfaces. --matcha is only 2.0:1 on --washi, so it can never carry type there; this is its readable counterpart. */ --leaf: #2C6B14; --usu: #C6D0AE; /* Label/metadata tone. Darkened from #8E8571 (3.02:1) so the small mono captions clear WCAG AA 4.5:1 on the page background. */ --nawa: #68604C; /* Grade swatches — measured from sifted powder, culinary → koicha */ --g-culinary: #6F7C3A; --g-barista: #7C9038; --g-premium: #89A63C; --g-ceremony: #96BC42; --g-koicha: #A3CE4A; /* Type */ --display: "Archivo", "Helvetica Neue", Arial, sans-serif; --body: "Newsreader", Georgia, "Times New Roman", serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Scale */ --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.2rem); --step-3: clamp(2rem, 1.6rem + 2vw, 3.4rem); --step-4: clamp(2.6rem, 1.8rem + 4vw, 5.6rem); --step-5: clamp(3.2rem, 1.8rem + 7vw, 9rem); /* Space */ --gut: clamp(1.25rem, 4vw, 4rem); --sec: clamp(5rem, 11vw, 10.5rem); --line: color-mix(in oklab, var(--sumi) 16%, transparent); --ease: cubic-bezier(0.22, 0.61, 0.24, 1); } /* ========================================================================== Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--washi); color: var(--sumi); font-family: var(--body); font-size: var(--step-0); line-height: 1.62; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; /* `clip` instead of `hidden`: `hidden` turns into a scroll container, which silently disables position:sticky for every descendant. */ overflow-x: hidden; overflow-x: clip; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; font-stretch: 112%; line-height: 0.98; letter-spacing: -0.025em; margin: 0; text-wrap: balance; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ::selection { background: var(--matcha); color: var(--sumi); } :focus-visible { outline: 2px solid var(--matcha); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: 0; top: 0; z-index: 999; padding: 0.75rem 1.25rem; background: var(--sumi); color: var(--washi); font-family: var(--mono); font-size: var(--step--1); transform: translateY(-140%); transition: transform 0.2s; } .skip:focus { transform: translateY(0); } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== Layout primitives ========================================================================== */ .wrap { width: min(100% - (var(--gut) * 2), 82rem); margin-inline: auto; } .wrap--narrow { width: min(100% - (var(--gut) * 2), 56rem); } .band { padding-block: var(--sec); position: relative; } .band--ink { background: var(--sumi); color: var(--washi); --line: color-mix(in oklab, var(--washi) 20%, transparent); } .eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0 0 1.5rem; padding: 0.55em 1.05em 0.6em; border-radius: 999px; background: var(--sumi); color: var(--washi); font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; line-height: 1; box-shadow: 0 6px 18px color-mix(in oklab, var(--sumi) 14%, transparent); } .eyebrow i { font-style: normal; color: var(--matcha); letter-spacing: 0.1em; padding-right: 0.65rem; border-right: 1px solid color-mix(in oklab, var(--washi) 28%, transparent); } .band--ink .eyebrow, .proc .eyebrow, .contact .eyebrow { background: var(--matcha); color: var(--sumi); } .band--ink .eyebrow i, .proc .eyebrow i, .contact .eyebrow i { color: color-mix(in oklab, var(--sumi) 62%, transparent); border-right-color: color-mix(in oklab, var(--sumi) 30%, transparent); } .lede { font-size: var(--step-1); line-height: 1.45; max-width: 46ch; color: color-mix(in oklab, var(--sumi) 82%, transparent); } .band--ink .lede { color: color-mix(in oklab, var(--washi) 82%, transparent); } .mono { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.04em; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ========================================================================== Buttons ========================================================================== */ .btn { --btn-bg: var(--sumi); --btn-fg: var(--washi); display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95em 1.5em; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--mono); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--btn-bg); border-radius: 999px; cursor: pointer; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn .arw { transition: transform 0.35s var(--ease); } .btn:hover .arw { transform: translateX(4px); } .btn--accent { --btn-bg: var(--matcha); --btn-fg: var(--sumi); } .btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border-color: var(--line); } .btn--ghost:hover { border-color: currentColor; } .band--ink .btn--solid { --btn-bg: var(--washi); --btn-fg: var(--sumi); } /* ========================================================================== Header ========================================================================== */ .hdr { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem var(--gut); color: var(--washi); transition: background 0.45s var(--ease), color 0.45s var(--ease), padding 0.45s var(--ease), box-shadow 0.45s var(--ease); } .hdr.is-stuck { background: color-mix(in oklab, var(--washi) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--sumi); padding-block: 0.7rem; box-shadow: 0 1px 0 color-mix(in oklab, var(--sumi) 12%, transparent); } .brand { font-family: var(--display); font-weight: 600; font-stretch: 118%; font-size: 0.94rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; line-height: 1.1; white-space: nowrap; } .brand span { display: block; font-family: var(--mono); font-size: 0.56rem; font-weight: 400; letter-spacing: 0.24em; opacity: 0.62; margin-top: 0.2em; } .nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); } .nav a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; opacity: 0.78; transition: opacity 0.25s; } .nav a:hover { opacity: 1; } .nav .btn { padding: 0.7em 1.2em; } .hdr .btn--hdr { --btn-bg: var(--matcha); --btn-fg: var(--sumi); border-color: var(--matcha); } .burger { display: none; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; cursor: pointer; align-items: center; justify-content: center; } .burger i { display: block; width: 16px; height: 1px; background: currentColor; position: relative; } .burger i::before, .burger i::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor; transition: transform 0.3s var(--ease); } .burger i::before { top: -5px; } .burger i::after { top: 5px; } @media (max-width: 62rem) { .nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 1.6rem; background: var(--sumi); color: var(--washi); clip-path: circle(0% at calc(100% - 3rem) 2.5rem); transition: clip-path 0.6s var(--ease); pointer-events: none; } .nav.is-open { clip-path: circle(150% at calc(100% - 3rem) 2.5rem); pointer-events: auto; } .nav a { font-size: 1rem; opacity: 1; } .burger { display: inline-flex; position: relative; z-index: 101; } .burger.is-open { color: var(--washi); border-color: color-mix(in oklab, var(--washi) 40%, transparent); } .burger.is-open i { background: transparent; } .burger.is-open i::before { transform: translateY(5px) rotate(45deg); } .burger.is-open i::after { transform: translateY(-5px) rotate(-45deg); } } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 8rem var(--gut) clamp(2rem, 4vw, 3.5rem); color: var(--washi); overflow: hidden; background: var(--sumi); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); will-change: transform; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,7,0.62) 0%, rgba(10,12,7,0.18) 34%, rgba(10,12,7,0.86) 100%), linear-gradient(90deg, rgba(10,12,7,0.5) 0%, rgba(10,12,7,0) 62%); } .hero__inner { position: relative; z-index: 1; width: 100%; } .hero h1 { /* Cap the size so the longest line ("Direct from Japan." ≈ 7em) can never wrap inside its mask — a wrapped line breaks the line-by-line reveal. */ font-size: min(var(--step-5), calc((100vw - 2 * var(--gut)) / 7.05)); font-stretch: 108%; font-weight: 500; letter-spacing: -0.04em; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); max-width: 16ch; } .hero h1 em { font-family: var(--body); font-style: italic; font-weight: 300; letter-spacing: -0.02em; color: var(--usu); } .mask { display: block; overflow: hidden; } .mask > span { display: block; transform: translateY(105%); transition: transform 1.05s var(--ease); } .is-ready .mask > span { transform: translateY(0); } .is-ready .mask:nth-of-type(2) > span { transition-delay: 0.1s; } .is-ready .mask:nth-of-type(3) > span { transition-delay: 0.2s; } .hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; padding-top: 2rem; border-top: 1px solid color-mix(in oklab, var(--washi) 22%, transparent); opacity: 0; transform: translateY(20px); transition: opacity 0.9s 0.5s var(--ease), transform 0.9s 0.5s var(--ease); } .is-ready .hero__foot { opacity: 1; transform: none; } .hero__foot p { max-width: 40ch; font-size: var(--step-0); color: color-mix(in oklab, var(--washi) 84%, transparent); } .hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; } @media (max-width: 48rem) { .hero__foot { grid-template-columns: 1fr; } } /* Ticker strip under hero */ .strip { background: var(--sumi); color: var(--usu); border-top: 1px solid color-mix(in oklab, var(--washi) 14%, transparent); overflow: hidden; padding-block: 0.9rem; } .strip__track { display: flex; gap: 3rem; width: max-content; animation: slide 46s linear infinite; } .strip span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .strip span::after { content: " ／"; opacity: 0.4; margin-left: 3rem; } @keyframes slide { to { transform: translateX(-50%); } } /* ========================================================================== Reveal animation utility ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.95s var(--ease), transform 0.95s var(--ease); transition-delay: var(--d, 0ms); } [data-reveal].is-in { opacity: 1; transform: none; } /* The wipe is applied to the IMAGE, never to the observed element itself. A clip-path on the observed node reduces its visible area to zero, so IntersectionObserver reports it as off-screen and it can never open. */ .fig { position: relative; overflow: hidden; background: var(--washi-lo); } .fig img { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1.15s var(--ease), transform 1.6s var(--ease); transition-delay: var(--d, 0ms); } .fig.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); } /* ========================================================================== Intro / stats ========================================================================== */ .intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .intro h2 { font-size: var(--step-3); max-width: 15ch; } .intro__body { padding-top: 0.6rem; } @media (max-width: 60rem) { .intro { grid-template-columns: 1fr; } } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3rem, 7vw, 6rem); background: var(--line); border-block: 1px solid var(--line); } .stat { background: var(--washi); padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.8rem); } .stat b { display: block; font-family: var(--display); font-stretch: 118%; font-weight: 500; font-size: var(--step-3); letter-spacing: -0.035em; line-height: 1; margin-bottom: 0.5rem; } .stat span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--nawa); } @media (max-width: 46rem) { .stats { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== Catalogue ========================================================================== */ .cat__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .cat__head h2 { font-size: var(--step-3); max-width: 16ch; } .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; } .filters button { appearance: none; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.55em 1.1em; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: inherit; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; } .filters button[aria-pressed="true"] { background: var(--sumi); color: var(--washi); border-color: var(--sumi); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); /* Rules are drawn by the cards themselves, not by a filled grid background: when a filter hides cards the empty tracks must not paint grey blocks. */ gap: 0; background: transparent; border: 1px solid var(--line); border-right: 0; border-bottom: 0; } .card { background: transparent; padding: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.4s var(--ease); } .card.is-hidden { display: none; } .card:hover { background: var(--washi-hi); } .card__media { position: relative; overflow: hidden; aspect-ratio: 1; background: #000; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); } .card:hover .card__media img { transform: scale(1.05); } .card__tag { position: absolute; top: 0.85rem; left: 0.85rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35em 0.75em; background: color-mix(in oklab, var(--washi) 92%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 999px; font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .card__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sw); } .card__body { padding: 1.4rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; } .card__sku { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; color: var(--nawa); text-transform: uppercase; } .card h3 { font-size: var(--step-1); font-stretch: 108%; } .card__origin { font-family: var(--body); font-style: italic; font-size: var(--step--1); color: color-mix(in oklab, var(--sumi) 68%, transparent); margin: -0.4rem 0 0; } .card__specs { margin-top: auto; border-top: 1px solid var(--line); padding-top: 0.9rem; display: grid; gap: 0.35rem; } .card__specs div { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: 0.68rem; } .card__specs dt { color: var(--nawa); letter-spacing: 0.06em; } .card__specs dd { margin: 0; text-align: right; } .card__add { appearance: none; border: 1px solid var(--line); background: none; border-radius: 999px; padding: 0.65em 1em; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; color: inherit; transition: background 0.3s, color 0.3s, border-color 0.3s; } .card__add:hover { border-color: var(--sumi); } .card__add[aria-pressed="true"] { background: var(--matcha); border-color: var(--matcha); color: var(--sumi); } .cat__note { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; } /* ========================================================================== Origins — horizontal scroll ========================================================================== */ .origins { background: var(--washi-hi); position: relative; padding-bottom: clamp(3rem, 6vw, 6rem); } .origins__intro { padding-block: var(--sec) 0; } .origins__intro h2 { font-size: var(--step-3); max-width: 14ch; } .hscroll { position: relative; } .hscroll__sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; } .hscroll__track { display: flex; gap: clamp(1rem, 2.5vw, 2rem); padding-inline: var(--gut); will-change: transform; } .orig { flex: none; width: min(78vw, 26rem); background: var(--washi); border: 1px solid var(--line); display: flex; flex-direction: column; } .orig__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--washi-lo); } .orig__media img { width: 100%; height: 100%; object-fit: cover; } .orig__body { padding: 1.4rem 1.4rem 1.6rem; display: grid; gap: 0.8rem; } .orig__no { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--nawa); } .orig h3 { font-size: var(--step-2); font-stretch: 110%; } .orig h3 small { display: block; font-family: var(--mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.14em; color: var(--nawa); margin-top: 0.5rem; text-transform: uppercase; } .orig p { font-size: var(--step--1); line-height: 1.6; color: color-mix(in oklab, var(--sumi) 78%, transparent); } .orig ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .orig li { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; border: 1px solid var(--line); border-radius: 999px; padding: 0.3em 0.7em; } @media (max-width: 60rem) { .hscroll__sticky { position: static; height: auto; } .hscroll__track { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 3rem; -webkit-overflow-scrolling: touch; } .orig { scroll-snap-align: center; } } /* ========================================================================== Process band with video ========================================================================== */ .proc { position: relative; background: var(--sumi); color: var(--washi); overflow: hidden; --line: color-mix(in oklab, var(--washi) 18%, transparent); } .proc__media { position: absolute; inset: 0; z-index: 0; } .proc__media video, .proc__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; } .proc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,15,8,0.88), rgba(12,15,8,0.72) 40%, rgba(12,15,8,0.95)); } .proc__inner { position: relative; z-index: 1; padding-block: var(--sec); } .proc h2 { font-size: var(--step-3); max-width: 16ch; } .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); margin-top: clamp(2.5rem, 5vw, 4rem); } .step { /* An opaque panel rather than transparent cards floating on video: the text needs a stable surface or it fights the footage behind it. */ background: #101408; border: 1px solid color-mix(in oklab, var(--washi) 14%, transparent); padding: 0; display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.4s var(--ease), transform 0.5s var(--ease); } .step:hover { border-color: color-mix(in oklab, var(--matcha) 55%, transparent); transform: translateY(-3px); } .step__body { padding: clamp(1.2rem, 2.2vw, 1.7rem); display: grid; gap: 0.6rem; align-content: start; } .step b { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; color: var(--matcha); display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .step b span { color: color-mix(in oklab, var(--washi) 52%, transparent); letter-spacing: 0.1em; } .step h3 { font-size: var(--step-1); font-stretch: 106%; } .step p { font-size: var(--step--1); line-height: 1.65; color: color-mix(in oklab, var(--washi) 86%, transparent); } @media (max-width: 56rem) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 34rem) { .steps { grid-template-columns: 1fr; } } /* ========================================================================== Segments / quality ========================================================================== */ .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center; } @media (max-width: 60rem) { .two { grid-template-columns: 1fr; } } .two h2 { font-size: var(--step-3); max-width: 14ch; margin-bottom: 1.5rem; } .segs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(2.5rem, 5vw, 4rem); } .seg { background: var(--washi); padding: clamp(1.6rem, 3vw, 2.6rem); display: grid; gap: 0.8rem; align-content: start; } .seg h3 { font-size: var(--step-1); font-stretch: 108%; } .seg p { font-size: var(--step--1); color: color-mix(in oklab, var(--sumi) 76%, transparent); } .seg ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; } .seg li { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--nawa); display: flex; gap: 0.6rem; } .seg li::before { content: "—"; color: var(--matcha); } @media (max-width: 46rem) { .segs { grid-template-columns: 1fr; } } .qual { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2.5rem, 5vw, 4rem); } .qual > div { background: var(--washi); padding: clamp(1.5rem, 3vw, 2.2rem); display: grid; gap: 0.6rem; align-content: start; } .qual h3 { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .qual p { font-size: var(--step--1); color: color-mix(in oklab, var(--sumi) 76%, transparent); } @media (max-width: 56rem) { .qual { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 34rem) { .qual { grid-template-columns: 1fr; } } /* ========================================================================== Client / quote ========================================================================== */ .client { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } @media (max-width: 60rem) { .client { grid-template-columns: 1fr; } } .client blockquote { margin: 0; font-size: var(--step-2); font-style: italic; line-height: 1.32; letter-spacing: -0.015em; text-wrap: balance; } .client cite { display: block; margin-top: 1.6rem; font-family: var(--mono); font-style: normal; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nawa); } /* ========================================================================== FAQ ========================================================================== */ .faq { border-top: 1px solid var(--line); margin-top: clamp(2rem, 4vw, 3rem); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; padding: 1.4rem 3rem 1.4rem 0; position: relative; font-family: var(--display); font-stretch: 108%; font-weight: 500; font-size: var(--step-1); letter-spacing: -0.02em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 0.35rem; top: 50%; width: 13px; height: 1px; background: currentColor; transform: translateY(-50%); } .faq summary::before { content: ""; position: absolute; right: 0.35rem; top: 50%; width: 13px; height: 1px; background: currentColor; transform: translateY(-50%) rotate(90deg); transition: transform 0.4s var(--ease), opacity 0.3s; } .faq details[open] summary::before { transform: translateY(-50%) rotate(0deg); opacity: 0; } .faq details p { padding: 0 3rem 1.6rem 0; max-width: 62ch; color: color-mix(in oklab, var(--sumi) 78%, transparent); } /* ========================================================================== Contact ========================================================================== */ .contact { background: var(--sumi); color: var(--washi); --line: color-mix(in oklab, var(--washi) 20%, transparent); } .contact__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } @media (max-width: 62rem) { .contact__grid { grid-template-columns: 1fr; } } .contact h2 { font-size: var(--step-3); max-width: 13ch; } .info { display: grid; gap: 1.6rem; margin-top: 2.5rem; } .info div { display: grid; gap: 0.3rem; } .info dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--usu); } .info dd { margin: 0; font-size: var(--step-0); } .info a { text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--washi) 35%, transparent); } .info a:hover { border-color: var(--matcha); color: var(--matcha); } .form { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .form .f-full { grid-column: 1 / -1; } @media (max-width: 40rem) { .form { grid-template-columns: 1fr; } } .field { display: grid; gap: 0.45rem; } .field label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--usu); } .field input, .field select, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 0.7rem 0; color: var(--washi); font-family: var(--body); font-size: var(--step-0); border-radius: 0; transition: border-color 0.3s; } .field select { font-family: var(--mono); font-size: var(--step--1); } .field select option { background: var(--sumi); color: var(--washi); } .field textarea { resize: vertical; min-height: 6rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--matcha); } .field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--washi) 40%, transparent); } .checks { display: flex; flex-wrap: wrap; gap: 0.5rem; } .checks label { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.45em 0.95em; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; cursor: pointer; color: var(--washi); text-transform: none; transition: border-color 0.3s, background 0.3s, color 0.3s; } .checks input { accent-color: var(--matcha); width: 13px; height: 13px; } .checks label:has(input:checked) { background: var(--matcha); border-color: var(--matcha); color: var(--sumi); } .form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; } .form__note { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; color: color-mix(in oklab, var(--washi) 55%, transparent); max-width: 34ch; } /* ========================================================================== Footer ========================================================================== */ .ftr { background: var(--sumi); color: var(--washi); padding: 0 0 3rem; --line: color-mix(in oklab, var(--washi) 16%, transparent); } .ftr__top { border-top: 1px solid var(--line); padding-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2rem; } @media (max-width: 60rem) { .ftr__top { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 34rem) { .ftr__top { grid-template-columns: 1fr; } } .ftr h2 { font-size: var(--step-2); font-stretch: 118%; letter-spacing: 0.02em; text-transform: uppercase; } .ftr h3 { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--usu); margin-bottom: 1rem; } .ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .ftr a { text-decoration: none; font-size: var(--step--1); opacity: 0.8; } .ftr a:hover { opacity: 1; color: var(--matcha); } .ftr address { font-style: normal; font-size: var(--step--1); line-height: 1.7; opacity: 0.8; max-width: 26ch; } .ftr__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: color-mix(in oklab, var(--washi) 55%, transparent); } /* ========================================================================== Sample-request dock ========================================================================== */ .dock { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 180%); z-index: 90; display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0.6rem 0.6rem 1.3rem; background: var(--sumi); color: var(--washi); border-radius: 999px; box-shadow: 0 12px 40px rgba(10,14,6,0.32); transition: transform 0.6s var(--ease); max-width: calc(100vw - 2rem); } .dock.is-up { transform: translate(-50%, 0); } .dock p { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; margin: 0; white-space: nowrap; } .dock b { color: var(--matcha); } .dock .btn { padding: 0.65em 1.15em; } @media (max-width: 34rem) { .dock { padding-left: 1rem; gap: 0.6rem; } .dock p { font-size: 0.62rem; } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1; transform: none; } .fig img { clip-path: none; transform: none; } .mask > span { transform: none; } .hero__foot { opacity: 1; transform: none; } .hero__media video, .hero__media img { transform: none; } .hscroll__sticky { position: static; height: auto; } .hscroll__track { transform: none !important; overflow-x: auto; padding-block: 3rem; } } /* ========================================================================== Added: imagery — intro portrait, step thumbs, shade band, gallery ========================================================================== */ /* intro now carries a portrait of the growers */ .intro--img { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 0.9fr); } @media (max-width: 72rem) { .intro--img { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 60rem) { .intro--img { grid-template-columns: 1fr; } } .intro__fig { align-self: stretch; min-height: 18rem; } .intro__fig img { width: 100%; height: 100%; object-fit: cover; } .intro__cap { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--nawa); margin-top: 0.9rem; display: block; } /* thumbnails inside the four process steps */ .step__fig { aspect-ratio: 5 / 3; overflow: hidden; margin: 0; background: #1b2211; border-bottom: 1px solid color-mix(in oklab, var(--washi) 12%, transparent); } .step__fig img { width: 100%; height: 100%; object-fit: cover; } .step:hover .step__fig img { transform: scale(1.05); } /* full-bleed shaded-field band */ .shade-band { position: relative; min-height: clamp(24rem, 52vw, 40rem); display: grid; align-items: center; overflow: hidden; background: var(--sumi); color: var(--washi); } .shade-band__media { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; } .shade-band__media img { width: 100%; height: 100%; object-fit: cover; } .shade-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,13,6,0.9) 0%, rgba(10,13,6,0.55) 55%, rgba(10,13,6,0.25) 100%); } .shade-band__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 8vw, 6rem); } .shade-band p { font-size: var(--step-2); line-height: 1.32; max-width: 24ch; letter-spacing: -0.015em; text-wrap: balance; } .shade-band cite { display: block; margin-top: 1.6rem; font-family: var(--mono); font-style: normal; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--usu); } /* photo marquee */ .gallery { background: var(--washi-hi); padding-block: clamp(3rem, 7vw, 6rem); overflow: hidden; } .gallery__head { margin-bottom: 2.2rem; } .gallery__track { display: flex; gap: 1rem; width: max-content; animation: gslide 70s linear infinite; } .gallery:hover .gallery__track { animation-play-state: paused; } .gallery__track figure { margin: 0; flex: none; width: clamp(12rem, 20vw, 17rem); } .gallery__track img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--washi-lo); } .gallery__track figcaption { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--nawa); margin-top: 0.6rem; } @keyframes gslide { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .gallery__track { animation: none; overflow-x: auto; width: 100%; } .shade-band__media { transform: none !important; } } /* ---- ordering steps: same shell as the process cards, light surface ---- */ .step--light { background: var(--washi); color: var(--sumi); border-color: var(--line); } .step--light:hover { border-color: color-mix(in oklab, var(--sumi) 35%, transparent); } .step--light b { color: var(--tencha); } .step--light b span { color: var(--nawa); } .step--light p { color: color-mix(in oklab, var(--sumi) 78%, transparent); } /* ---- grade key: replaces the guidance the shade-scale section carried ---- */ .key { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-bottom: 0; } .key > div { background: var(--washi); padding: 1rem 1.1rem 1.15rem; display: grid; gap: 0.3rem; align-content: start; } .key dt { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; display: flex; align-items: center; gap: 0.5rem; } .key dt::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--sw); flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); } .key dd { margin: 0; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em; color: var(--nawa); } .key p { margin: 0.25rem 0 0; font-size: var(--step--1); line-height: 1.5; color: color-mix(in oklab, var(--sumi) 76%, transparent); } @media (max-width: 68rem) { .key { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); } } @media (max-width: 40rem) { .key { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 56rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 34rem) { .steps { grid-template-columns: 1fr; } .step__fig { aspect-ratio: 2 / 1; } } /* ========================================================================== Section headings — a two-voice display: Archivo for the statement, Newsreader italic in accent for the phrase that carries the point. ========================================================================== */ .sec-h { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 4rem); letter-spacing: -0.032em; line-height: 0.96; max-width: 17ch; } .sec-h em { font-family: var(--body); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -0.015em; color: var(--leaf); } .band--ink .sec-h em, .proc .sec-h em, .contact .sec-h em { color: var(--matcha); } /* a hairline that runs the full measure under every section head */ .sec-head { position: relative; padding-bottom: clamp(1.4rem, 2.5vw, 2.2rem); } .sec-head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--matcha) 0, var(--matcha) 4.5rem, var(--line) 4.5rem, var(--line) 100%); } .band--ink .sec-head::after, .proc .sec-head::after, .contact .sec-head::after { background: linear-gradient(90deg, var(--matcha) 0, var(--matcha) 4.5rem, color-mix(in oklab, var(--washi) 22%, transparent) 4.5rem); } /* alternate the surface so two light sections never run together */ .band--tint { background: var(--washi-hi); } .band--tint .stat, .band--tint .seg, .band--tint .qual > div, .band--tint .key > div { background: var(--washi-hi); } .band--tint .card:hover { background: var(--washi); } .card:hover { background: var(--washi-hi); } /* ---- partner plaque: a light card so the logo keeps its own colour ---- */ .plaque { margin: 0; background: var(--washi); aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: 1.6rem; padding: clamp(1.5rem, 5vw, 3.5rem); text-align: center; } .plaque img { width: min(66%, 17.5rem); height: auto; display: block; } .plaque__link { display: grid; justify-items: center; gap: 1.5rem; text-decoration: none; color: inherit; } .plaque figcaption { display: grid; gap: 0.5rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nawa); } .plaque__url { color: var(--leaf); letter-spacing: 0.1em; text-transform: none; border-bottom: 1px solid color-mix(in oklab, var(--leaf) 40%, transparent); justify-self: center; padding-bottom: 0.15em; transition: border-color 0.3s var(--ease); } .plaque__link:hover .plaque__url { border-bottom-color: var(--leaf); } .plaque__link img { transition: transform 0.5s var(--ease); } .plaque__link:hover img { transform: scale(1.03); } .client cite a { color: var(--matcha); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--matcha) 45%, transparent); transition: border-color 0.3s var(--ease); } .client cite a:hover { border-bottom-color: var(--matcha); }