/* Sublime Coffee Roasters, prototype site. Plain CSS, opens from disk. */ @font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url("../assets/fonts/figtree-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url("../assets/fonts/figtree-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Racing Sans One";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/racing-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Racing Sans One";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/racing-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ --navy:#0b2c47; --navy-deep:#071d31; --cream:#fcf0e1; --cream-deep:#f4e2c9; --sky:#87bed3; --red:#c9322b; --red-2:#b03a3a; --green:#4f6b4b; --orange:#dc7113; --orange-2:#e08a3c; --mustard:#cd8e28; --field:var(--sky); /* the colour the current blend floods the page with */ --on-field:var(--navy); /* readable text on that field */ --on-field-soft:rgba(11,44,71,.78); --ink:var(--navy); --ink-soft:rgba(11,44,71,.74); --line:rgba(11,44,71,.16); --display:"Racing Sans One","Arial Black",Impact,sans-serif; --text:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --r-card:16px; --r-input:12px; --gutter:clamp(20px,4vw,56px); --max:1360px; --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); --z-header:40; --z-skip:60; } /* Blend fields. Set as data-field on or on a band. */ [data-field=sky]{--field:var(--sky);--on-field:var(--navy-deep);--on-field-soft:var(--navy-deep)} [data-field=red]{--field:var(--red);--on-field:var(--cream);--on-field-soft:var(--cream)} [data-field=red2]{--field:var(--red-2);--on-field:var(--cream);--on-field-soft:var(--cream)} [data-field=green]{--field:var(--green);--on-field:var(--cream);--on-field-soft:var(--cream)} [data-field=mustard]{--field:var(--mustard);--on-field:var(--navy-deep);--on-field-soft:var(--navy-deep)} [data-field=orange]{--field:var(--orange);--on-field:var(--navy-deep);--on-field-soft:var(--navy-deep)} [data-field=navy]{--field:var(--navy);--on-field:var(--cream);--on-field-soft:var(--cream)} [data-field=orange2]{--field:var(--orange-2);--on-field:var(--navy-deep);--on-field-soft:var(--navy-deep)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--navy) var(--cream);scrollbar-width:thin} body{margin:0;font-family:var(--text);font-size:1.0625rem;line-height:1.55;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{max-width:100%;display:block} h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0} p,li,dd{text-wrap:pretty} ul,ol{padding:0;list-style:none} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--navy);color:var(--cream)} [hidden]{display:none!important} :focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px} .on-dark :focus-visible,[data-dark] :focus-visible{outline-color:var(--cream)} .skip{position:absolute;left:12px;top:-60px;z-index:var(--z-skip);background:var(--navy);color:var(--cream);padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none} .skip:focus{top:12px} .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- type ---------- */ .display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:1;text-wrap:balance} h1.display{font-size:clamp(2.5rem,4.7vw,4.25rem)} h2.display{font-size:clamp(2.1rem,4.2vw,3.75rem)} h3.display{font-size:clamp(1.5rem,2.4vw,2rem)} .lede{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.5;max-width:34ch} .body{max-width:62ch} .soft{color:var(--ink-soft)} .num{font-variant-numeric:tabular-nums} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.7em 1.6em;border-radius:999px;border:2px solid var(--navy);background:var(--navy);color:var(--cream);font-weight:700;font-size:1rem;line-height:1.1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)} .btn:hover{background:var(--navy-deep);transform:translateY(-1px)} .btn:active{transform:scale(.97)} .btn--ghost{background:transparent;color:var(--navy)} .btn--ghost:hover{background:var(--navy);color:var(--cream)} .btn--cream{background:var(--cream);border-color:var(--cream);color:var(--navy)} .btn--cream:hover{background:#fff;color:var(--navy)} .btn--ghost-cream{background:transparent;border-color:var(--cream);color:var(--cream)} .btn--ghost-cream:hover{background:var(--cream);color:var(--navy)} .btn .arrow{width:.6em;height:.6em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:-.1em;transition:transform .3s var(--ease)} .btn:hover .arrow{transform:rotate(45deg) translate(2px,-2px)} .link{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em} .link:hover{text-decoration-color:var(--red)} /* ---------- header ---------- */ .site-head{position:sticky;top:0;z-index:var(--z-header);background:var(--cream);color:var(--navy);transition:background-color .7s var(--ease),color .7s var(--ease);height:72px} .site-head .wrap{height:100%;display:flex;align-items:center;gap:clamp(16px,3vw,40px)} .logo{display:block;position:relative;width:132px;height:46px;flex:none} .logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .5s var(--ease)} .logo .cream{opacity:0} .site-head.on-dark .logo .navy{opacity:0} .site-head.on-dark .logo .cream{opacity:1} .primary{display:flex;gap:clamp(14px,2.2vw,32px);align-items:center;margin-left:8px} .primary a{font-weight:600;font-size:.98rem;text-decoration:none;padding:8px 2px;position:relative} .primary a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .primary a:hover::after,.primary a[aria-current=page]::after{transform:scaleX(1)} .head-end{margin-left:auto;display:flex;align-items:center;gap:12px} .cart{display:inline-flex;align-items:center;min-height:44px;padding:.4em 1.25em;border-radius:999px;border:2px solid currentColor;font-weight:700;font-size:.95rem;text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease)} .cart:hover{background:var(--navy);border-color:var(--navy);color:var(--cream)} .site-head.on-dark .cart:hover{background:var(--cream);border-color:var(--cream);color:var(--navy)} .menu-btn{display:none;min-height:44px;padding:.4em 1.1em;border-radius:999px;border:2px solid currentColor;background:transparent;font-weight:700;cursor:pointer} /* home: header takes the field colour while the hero is on screen */ body.home .site-head.at-top{background:var(--field);color:var(--on-field)} body.home .site-head.at-top .cart:hover{background:var(--on-field);border-color:var(--on-field);color:var(--field)} /* ---------- home hero + builder ---------- */ .hero{position:relative;background:var(--field);color:var(--on-field);transition:background-color .7s var(--ease),color .7s var(--ease);overflow:clip} .hero .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.62fr) minmax(360px,400px);gap:clamp(12px,2vw,32px);align-items:start;min-height:min(780px,calc(100dvh - 72px));padding-block:clamp(28px,6vh,64px) clamp(32px,5vh,56px)} .hero-copy{position:relative;z-index:2;padding-top:clamp(0px,3vh,32px)} .hero-copy .lede{margin-top:clamp(16px,2.4vh,26px);color:var(--on-field)} .hero-bag{position:relative;align-self:center;min-height:min(560px,60vh);display:grid;place-items:center} .hero-bag img{height:min(58vh,540px);width:auto;max-width:100%;position:relative;z-index:1;transform-origin:50% 90%;will-change:transform} .bag-cap{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:.78rem;font-weight:600;color:var(--on-field);z-index:2} .hero-bag::after{content:"";position:absolute;left:8%;right:8%;bottom:1%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(7,29,49,.32),rgba(7,29,49,0));transition:opacity .4s var(--ease)} .hero-bag img.is-swap-out{animation:bag-out .28s var(--ease-io) forwards} .hero-bag img.is-swap-in{animation:bag-in .7s var(--ease) both} @keyframes bag-out{to{transform:translateY(-18px) rotate(-3deg);opacity:0}} @keyframes bag-in{from{transform:translateY(38px) rotate(4deg);opacity:0}to{transform:none;opacity:1}} .builder{position:relative;z-index:3;background:var(--cream);color:var(--navy);border-radius:var(--r-card);padding:clamp(18px,2vw,26px);box-shadow:0 34px 60px -28px rgba(7,29,49,.5),0 2px 0 rgba(255,255,255,.4) inset} .builder-title{font-family:var(--text);font-weight:800;font-size:1.25rem;line-height:1.2;margin-bottom:12px} .fieldset{border:0;margin:0 0 12px;padding:0;min-width:0} .fieldset legend{font-weight:700;font-size:.92rem;margin-bottom:8px;padding:0;color:var(--ink-soft)} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{position:relative} .chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%} .chip span{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:.3em .9em;border:2px solid var(--navy);border-radius:999px;font-weight:600;font-size:.95rem;line-height:1.1;background:transparent;transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)} .chip input:hover+span{transform:translateY(-1px)} .chip input:checked+span{background:var(--navy);color:var(--cream)} .chip input:focus-visible+span{outline:3px solid var(--navy);outline-offset:3px} .dot{width:12px;height:12px;border-radius:50%;flex:none;border:1.5px solid var(--navy);background:var(--dotc,var(--sky))} .chip input:checked+span .dot{border-color:var(--cream)} .builder-foot{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap} .price{font-family:var(--text);font-weight:800;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums} .price small{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-top:6px} .buy{display:flex;gap:10px;flex-wrap:wrap} .builder-note{font-size:.85rem;color:var(--ink-soft);margin-top:14px;max-width:44ch} @media (min-width:1101px) and (max-height:820px){ .hero .wrap{padding-block:20px 24px} .builder{padding:16px 20px} .builder-title{margin-bottom:8px;font-size:1.1rem} .fieldset{margin-bottom:8px} .fieldset legend{margin-bottom:5px} .chip span{min-height:34px;font-size:.9rem} .builder-note{font-size:.8rem!important;margin:-2px 0 8px!important} .builder-foot{margin-top:8px;padding-top:10px} .price{font-size:1.7rem} } /* ---------- mobile buy bar ---------- */ .buybar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--cream);color:var(--navy);box-shadow:0 -12px 30px -18px rgba(7,29,49,.5)} .buybar .price{font-size:1.4rem} .buybar .price small{font-size:.72rem;margin-top:3px;max-width:15ch;line-height:1.2} .buybar .btn{min-height:44px;padding:.5em 1.1em;font-size:.95rem} @media (max-width:820px){.buybar:not([hidden]){display:flex}} /* ---------- bands ---------- */ .band{padding-block:clamp(64px,10vw,128px)} .band--tight{padding-block:0} .band--cream{background:var(--cream)} .band--deep{background:var(--cream-deep)} .band--navy{background:var(--navy);color:var(--cream)} .band--green{background:var(--green);color:var(--cream)} .band--field{background:var(--field);color:var(--on-field)} .band-head{margin-bottom:clamp(28px,4vw,56px);max-width:52ch} .band-head p{margin-top:16px;font-size:1.15rem} /* ---------- range shelf ---------- */ .shelf{position:relative} .shelf-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,1vw,14px);align-items:end} .cell{position:relative;text-align:center} .slot{position:relative;padding-bottom:6px} .slot::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-12px;height:16px;border-radius:4px;background:linear-gradient(180deg,#c99a63 0 5px,#a97b47 5px 100%);box-shadow:0 12px 18px -10px rgba(7,29,49,.45)} .bag-btn{position:relative;z-index:1;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;color:inherit;transition:transform .5s var(--ease)} .bag-btn img{height:clamp(170px,22vw,320px);width:auto;max-width:100%;margin-inline:auto} .bag-btn:hover,.bag-btn:focus-visible,.bag-btn.is-active{transform:translateY(-16px)} .bag-name{display:block;margin-top:30px;font-weight:800;font-size:1rem;line-height:1.15} .bag-price{display:block;font-size:.9rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-top:2px} .shelf-cap{margin-top:28px;min-height:5.5em;max-width:60ch} .shelf-cap h3{font-size:1.5rem;margin-bottom:6px} .shelf-cap p{font-size:1.1rem} .shelf-cap .btn{margin-top:14px} /* reveal: elements are visible by default, JS adds .will-reveal only when motion is allowed */ .will-reveal{opacity:0;transform:translateY(26px)} .will-reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)} .will-reveal.fx-left{transform:translateX(-36px)} .will-reveal.fx-right{transform:translateX(36px)} @media (max-width:820px){.will-reveal.fx-left{transform:translateY(22px)}.will-reveal.fx-right{transform:translateY(22px)}} .will-reveal.fx-scale{transform:scale(.93)} .will-reveal.fx-fade{transform:none} .shelf-row .will-reveal{transform:translateY(60px)} .shelf-cap{margin-top:44px} /* ---------- roast (scroll driven) ---------- */ .roast{position:relative;background:var(--navy-deep);color:var(--cream)} .roast-track{position:relative} .roast-stage{position:relative;overflow:hidden;display:grid;align-items:end;padding-block:clamp(56px,8vw,96px) 20px} .roast-photo{position:absolute;inset:0;background:var(--navy-deep) url("../assets/img/roasting-drum.jpg") center/cover no-repeat} .roast-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,29,49,.5) 0%,rgba(7,29,49,.55) 45%,rgba(7,29,49,.84) 100%)} .roast-copy{position:relative;z-index:2;align-self:start;margin-bottom:clamp(20px,4vw,40px)} .roast-copy h2{max-width:16ch} .roast-copy .lede{margin-top:14px;max-width:52ch;color:rgba(252,240,225,.96)} .steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,32px);padding-bottom:clamp(20px,4vh,40px)} .step{padding-top:14px} .step h3{font-family:var(--text);font-weight:800;font-size:1.05rem;margin-bottom:6px} .step p{font-size:.95rem;line-height:1.45;color:rgba(252,240,225,.94)} .curve{position:relative;z-index:2;margin-bottom:clamp(16px,3vh,32px)} .curve svg{display:block;width:100%;height:auto;overflow:visible} .curve path{fill:none;stroke:var(--mustard);stroke-width:5;stroke-linecap:round} .curve .base{stroke:rgba(252,240,225,.22);stroke-width:2} .phases{position:relative;height:1.6em;margin-top:8px;font-size:.85rem;font-weight:700} .phases span{position:absolute;transform:translateX(-50%);white-space:nowrap} .beans{position:relative;display:flex;height:22px;margin-top:6px;overflow:hidden} .beans i{flex:1;height:100%;position:relative} .beans i::before{content:"";position:absolute;left:8%;right:8%;top:1px;bottom:1px;border-radius:50%;background:var(--b);transform:rotate(var(--r,0deg));box-shadow:inset 0 -2px 3px rgba(7,29,49,.28)} .beans i::after{content:"";position:absolute;left:22%;right:22%;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:rgba(7,29,49,.42);transform:rotate(var(--r,0deg))} .curve-note{margin-top:10px;font-size:.85rem;color:rgba(252,240,225,.82)} /* pinned, scroll-driven version: only where there is room for it */ @media (min-width:821px) and (min-height:700px){ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .roast-track{height:280vh;view-timeline-name:--roast;view-timeline-axis:block} .roast-stage{position:sticky;top:0;height:100dvh;min-height:620px;padding-block:0} .roast-copy{padding-top:clamp(84px,12vh,112px)} .step{opacity:.62;animation:stepon linear both;animation-timeline:--roast} .step:nth-child(1){animation-range:entry 70% entry 100%} .step:nth-child(2){animation-range:cover 35% cover 45%} .step:nth-child(3){animation-range:cover 48% cover 58%} .step:nth-child(4){animation-range:cover 60% cover 70%} .curve path.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw linear both;animation-timeline:--roast;animation-range:entry 90% exit -10%} .beans{animation:roastup linear both;animation-timeline:--roast;animation-range:entry 90% exit -10%} .roast-photo{animation:drum-zoom linear both;animation-timeline:--roast;animation-range:entry 0% exit 100%} } } } @keyframes draw{to{stroke-dashoffset:0}} @keyframes roastup{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes drum-zoom{from{transform:scale(1.02)}to{transform:scale(1.18) rotate(2deg)}} @keyframes stepon{from{opacity:.62}to{opacity:1}} /* ---------- visit ---------- */ .visit-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:stretch} .floor{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:440px;background:var(--navy) url("../assets/img/roastery-floor.jpg") center/cover no-repeat} .floor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pin{position:absolute;z-index:2;display:flex;align-items:flex-start;gap:12px;max-width:min(260px,44%);transform:translate(-9px,-9px)} .pin i{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--mustard);border:3px solid var(--cream);animation:none} .pin p{background:var(--cream);color:var(--navy);font-size:.92rem;line-height:1.35;padding:.6em .9em;border-radius:12px;box-shadow:0 14px 24px -14px rgba(7,29,49,.6)} .pin p strong{display:block;font-weight:800;margin-bottom:1px} .pin p span{display:block} @keyframes ping{0%{box-shadow:0 0 0 0 rgba(205,142,40,.75)}70%,100%{box-shadow:0 0 0 20px rgba(205,142,40,0)}} .places{display:grid;gap:0;align-content:start} .place{padding:20px 0;border-bottom:1px solid var(--line)} .place:first-child{padding-top:0} .place:last-child{border-bottom:0} .place h3{font-family:var(--text);font-weight:800;font-size:1.2rem;line-height:1.2} .place .addr{color:var(--ink-soft);font-size:.98rem;margin-top:2px} .place .hrs{margin-top:8px;font-size:.98rem;font-variant-numeric:tabular-nums} .badge{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:800;padding:.2em .75em;border-radius:999px;background:var(--navy);color:var(--cream);vertical-align:middle;margin-left:8px} .badge.is-open{background:var(--green)} .badge.is-closed{background:transparent;color:var(--navy);border:1.5px solid var(--navy)} /* ---------- events ---------- */ .events{position:relative;overflow:clip;background:var(--mustard);color:var(--navy)} .events .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center} .event-list{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(24px,3vw,40px)} .event h3{font-family:var(--text);font-weight:800;font-size:1.4rem;line-height:1.2;margin-bottom:6px} .event p{max-width:52ch} .event .btn{margin-top:14px} .record{position:relative;width:min(100%,440px);aspect-ratio:1;margin-inline:auto;border-radius:50%;background: radial-gradient(circle at 50% 50%,var(--red) 0 15%,var(--navy-deep) 15.4% 100%),var(--navy-deep)} .record::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 9px,rgba(252,240,225,.07) 9px 10px);-webkit-mask:radial-gradient(circle,transparent 0 17%,#000 18% 96%,transparent 97%);mask:radial-gradient(circle,transparent 0 17%,#000 18% 96%,transparent 97%)} .record .lbl{position:absolute;inset:34.5%;border-radius:50%;background:var(--cream);display:grid;place-items:center;z-index:1} .record .lbl img{width:70%;height:auto} .record.is-in{animation:spin-once 2.8s var(--ease) 1 backwards} .events .wrap:hover .record{transform:rotate(18deg);transition:transform 1.2s var(--ease)} @keyframes spin-once{from{transform:scale(1) rotate(-200deg)}to{transform:scale(1) rotate(0)}} /* ---------- gifts ---------- */ .gifts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:stretch} .gift{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-card);overflow:hidden;background:var(--cream-deep)} .gift .art{aspect-ratio:16/10;display:grid;place-items:center;background:var(--field,var(--sky));padding:clamp(16px,2vw,28px)} .gift .art img{max-height:100%;width:auto;max-width:78%;object-fit:contain} .gift .txt{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:10px;align-items:flex-start} .gift h3{font-family:var(--text);font-weight:800;font-size:1.4rem;line-height:1.2} .gift .btn{margin-top:auto} /* ---------- green band ---------- */ .eco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start} .eco ul{display:grid;gap:14px} .eco li{padding-left:0;font-size:1.1rem} .eco li strong{font-weight:800} /* ---------- footer ---------- */ .foot{background:var(--navy);color:var(--cream);padding-block:clamp(56px,8vw,96px) 32px} .foot a{color:inherit} .foot .top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1fr);gap:clamp(20px,3vw,48px)} .foot-title{font-weight:800;font-size:1rem;margin-bottom:12px} .foot ul{display:grid;gap:8px} .foot li a{text-decoration:none} .foot li a:hover{text-decoration:underline;text-underline-offset:.2em} .foot .brand img{width:170px;height:auto;margin-bottom:14px} .foot .brand p{max-width:32ch;color:rgba(252,240,225,.92)} .signup label{display:block;font-weight:700;margin-bottom:8px} .signup .row{display:flex;gap:8px;flex-wrap:wrap} .signup input[type=email]{flex:1 1 200px;min-height:48px;padding:.5em 1em;border-radius:var(--r-input);border:2px solid var(--cream);background:transparent;color:var(--cream)} .signup input::placeholder{color:rgba(252,240,225,.7)} .signup small{display:block;margin-top:8px;color:rgba(252,240,225,.82)} .foot .base{margin-top:clamp(32px,5vw,64px);padding-top:20px;border-top:1px solid rgba(252,240,225,.22);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.92rem;color:rgba(252,240,225,.85)} /* ---------- inner pages ---------- */ .page-head{background:var(--field);color:var(--on-field);padding-block:clamp(48px,8vw,104px) clamp(40px,6vw,80px)} .page-head .lede{margin-top:16px} .page-head--cream{background:var(--cream);color:var(--navy)} .blend{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,72px);align-items:center;padding-block:clamp(40px,7vw,88px)} .blend .pic{position:relative;display:grid;place-items:center} .blend .pic img{height:min(56vh,520px);width:auto;max-width:100%;position:relative;z-index:1} .blend .pic::after{content:"";position:absolute;left:18%;right:18%;bottom:3%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(7,29,49,.3),rgba(7,29,49,0))} .blend h2{margin-bottom:8px} .blend .kind{font-weight:800;font-size:.95rem;margin-bottom:12px} .blend .note{font-size:1.2rem;max-width:44ch} .blend .opts{margin-top:22px;display:grid;gap:14px;max-width:520px} .blend .pricebar{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:6px} .blend .chip span{border-color:currentColor} .blend .chip input:checked+span{background:var(--on-field);color:var(--field);border-color:var(--on-field)} .blend .chip input:focus-visible+span{outline-color:currentColor} .blend .price small{color:var(--on-field-soft)} .blend .btn{background:var(--on-field);border-color:var(--on-field);color:var(--field)} .blend .btn--ghost{background:transparent;color:var(--on-field)} .blend .btn--ghost:hover{background:var(--on-field);color:var(--field)} .blend .fieldset legend{color:var(--on-field-soft)} .timer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center} .ring{position:relative;width:min(100%,340px);aspect-ratio:1;margin-inline:auto} .ring svg{width:100%;height:100%;transform:rotate(-90deg)} .ring circle{fill:none;stroke-width:7} .ring .track{stroke:rgba(252,240,225,.2)} .ring .prog{stroke:var(--mustard);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .4s linear} .ring .clock{position:absolute;inset:0;display:grid;place-items:center;text-align:center} .ring .clock b{font-family:var(--display);font-weight:400;font-size:clamp(3rem,7vw,4.5rem);line-height:1;font-variant-numeric:tabular-nums} .ring .clock small{display:block;font-size:.95rem;margin-top:4px;color:rgba(252,240,225,.85)} .guide h3{font-family:var(--text);font-weight:800;font-size:1.5rem;margin-bottom:10px} .guide dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:16px 0 22px} .guide dt{font-weight:800} .guide dd{color:rgba(252,240,225,.94)} .guide .chips{margin-bottom:22px} .guide .chip span{border-color:var(--cream)} .guide .chip input:checked+span{background:var(--cream);color:var(--navy)} .guide .chip input:focus-visible+span{outline-color:var(--cream)} .story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:start} .story figure img{width:100%;height:auto;border-radius:var(--r-card)} .story figcaption{margin-top:10px;font-size:.92rem;color:var(--ink-soft)} .path{display:grid;gap:0} .path li{display:grid;grid-template-columns:5.5rem 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)} .path li:last-child{border-bottom:0} .path b{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.1} .path h3{font-family:var(--text);font-weight:800;font-size:1.15rem;margin-bottom:2px} .path p{color:var(--ink-soft)} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start} .cols-2{columns:2;column-gap:32px} .facts{display:grid;gap:12px} .facts li{padding:0} .form{display:grid;gap:16px;max-width:520px} .form label{display:block;font-weight:700;margin-bottom:6px} .form input,.form textarea{width:100%;padding:.7em 1em;border-radius:var(--r-input);border:2px solid var(--navy);background:#fff;color:var(--navy)} .form textarea{min-height:130px;resize:vertical} .form .hint{font-size:.9rem;color:var(--ink-soft);margin-top:4px} /* ---------- responsive ---------- */ @media (max-width:1100px){ .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy bag" "build build";min-height:0} .hero-copy{grid-area:copy} .hero-bag{grid-area:bag;min-height:280px} .builder{grid-area:build} .shelf-row{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:48px} .foot .top{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:820px){ .primary{display:none} .menu-btn{display:inline-flex;align-items:center} .site-head.menu-open .primary{display:flex;position:absolute;left:0;right:0;top:72px;background:var(--cream);color:var(--navy);flex-direction:column;align-items:flex-start;gap:0;padding:12px var(--gutter) 24px;margin:0;border-bottom:1px solid var(--line)} .site-head.menu-open .primary a{padding:14px 0;font-size:1.15rem;width:100%} .hero .wrap{grid-template-columns:1fr;grid-template-areas:"copy" "bag" "build"} .hero-bag{min-height:0;margin-block:-8px} .hero-bag img{height:min(27vh,230px)} .pin p span{display:none} .pin p{padding:.4em .75em;font-size:.85rem} .bag-cap{display:none} .curve path{stroke-width:9} .hero .wrap{padding-block:24px 32px} .visit-grid,.events .wrap,.gifts,.eco,.blend,.story,.split,.timer-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr} .cols-2{columns:1} .floor{min-height:320px} .shelf-row{grid-template-columns:repeat(3,minmax(0,1fr))} .bag-btn img{height:170px} .blend .pic img{height:280px} .record{width:min(80%,340px)} } @media (max-width:560px){ .shelf-row{grid-template-columns:repeat(2,minmax(0,1fr))} .steps{grid-template-columns:1fr} .roast-stage{align-items:start} .foot .top{grid-template-columns:1fr} .buy{width:100%} .buy .btn{flex:1} .logo{width:112px} } /* ---------- motion preferences ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .will-reveal{opacity:1;transform:none} } /* ===================================================================== Multi-page additions (story, quality, sustainability, subscribe, wholesale) ===================================================================== */ /* nav for nine pages: collapse a little earlier */ @media (max-width:1120px){ .primary{display:none} .menu-btn{display:inline-flex;align-items:center} .site-head.menu-open .primary{display:flex;position:absolute;left:0;right:0;top:72px;background:var(--cream);color:var(--navy);flex-direction:column;align-items:flex-start;gap:0;padding:12px var(--gutter) 24px;margin:0;border-bottom:1px solid var(--line)} .site-head.menu-open .primary a{padding:14px 0;font-size:1.15rem;width:100%} } .primary{gap:clamp(12px,1.8vw,26px)} /* price with subscribe saving */ .price small b{font-weight:800} /* page head with a photograph */ .photo-head{background:var(--cream);color:var(--navy);padding-block:clamp(40px,6vw,80px) clamp(40px,6vw,88px)} .photo-head .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,80px);align-items:center} .photo-head figure img{width:100%;height:auto;border-radius:var(--r-card)} .photo-head figcaption{margin-top:10px;font-size:.92rem;color:var(--ink-soft)} .photo-head .lede{margin-top:16px} .photo-head .btn{margin-top:24px} /* home: story band */ .story-band{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,88px);align-items:center} .story-band figure{position:relative} .story-band figure img{width:100%;height:auto;border-radius:var(--r-card)} .story-band .body+.body{margin-top:14px} .story-band .btn{margin-top:24px} .pull{font-family:var(--display);text-transform:none;letter-spacing:.005em;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.22;margin-top:26px;text-wrap:balance} /* quality list */ .quality{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,88px);align-items:start} .qlist{display:grid;gap:0} .qlist li{padding:18px 0;border-bottom:1px solid var(--line);font-size:1.08rem} .qlist li:first-child{padding-top:0} .qlist li:last-child{border-bottom:0} .qlist strong{font-weight:800;display:block;font-size:1.15rem} .proof-line{margin-top:22px;font-weight:700;max-width:34ch} /* delivery cadence */ .sub-band{background:var(--field);color:var(--on-field)} .sub-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,88px);align-items:center} .sub-grid .btn+.btn{margin-left:8px} .cadence{display:grid;gap:18px;background:var(--cream);color:var(--navy);border-radius:var(--r-card);padding:clamp(20px,2.6vw,32px)} .cad-row{display:grid;grid-template-columns:7.6rem minmax(0,1fr);align-items:center;gap:14px} .cad-row b{font-weight:800} .cad-dots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px} .cad-dots i{display:block;height:30px;border-radius:999px;border:2px solid var(--navy);opacity:.28} .cad-dots i.on{background:var(--navy);opacity:1} .cadence.is-in .cad-dots i.on{animation:pop .6s var(--ease) backwards;animation-delay:calc(var(--k) * 90ms)} @keyframes pop{from{transform:scale(.2);opacity:0}} .cad-note{font-size:.9rem;color:var(--ink-soft)} .checks{display:grid;gap:10px;margin-top:20px} .checks li{position:relative;padding-left:1.7rem} .checks li::before{content:"";position:absolute;left:0;top:.52em;width:.9rem;height:.5rem;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(-45deg)} /* wholesale strip on home */ .parts-row{display:flex;flex-wrap:wrap;gap:6px clamp(20px,3vw,44px);margin-top:26px} .parts-row span{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.05;position:relative} .parts-row span::after{content:"";position:absolute;left:0;bottom:-4px;height:4px;width:100%;background:var(--mustard)} .is-in .parts-row span::after,.parts-row.is-in span::after{transform:scaleX(1)} .parts-row span:nth-child(2)::after{--d:.15s}.parts-row span:nth-child(3)::after{--d:.3s}.parts-row span:nth-child(4)::after{--d:.45s} .wholesale-band .btn+.btn{margin-left:8px} /* vertical story timeline */ .tl{position:relative;display:grid;gap:clamp(30px,4vw,56px);padding-left:clamp(34px,4.5vw,64px)} .tl::before,.tl::after{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:4px;border-radius:2px} .tl::before{background:var(--line)} .tl::after{background:var(--red);transform-origin:top} .tl li{position:relative} .tl li::before{content:"";position:absolute;left:calc(-1 * clamp(34px,4.5vw,64px) + 2px);top:.5em;width:20px;height:20px;border-radius:50%;background:var(--cream);border:4px solid var(--navy)} .tl b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05} .tl h3{font-family:var(--text);font-weight:800;font-size:1.2rem;margin:4px 0 4px} .tl p{max-width:60ch;color:var(--ink-soft)} @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .tl{view-timeline-name:--tl;view-timeline-axis:block} .tl::after{animation:tlgrow linear both;animation-timeline:--tl;animation-range:entry 25% cover 75%} } } @keyframes tlgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* cup journey */ .loop{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,28px)} .loop::before,.loop::after{content:"";position:absolute;left:13px;right:13px;top:13px;height:4px;border-radius:2px} .loop::before{background:rgba(252,240,225,.28)} .loop::after{background:var(--mustard);transform-origin:left} .loop li{position:relative;padding-top:48px} .loop li::before{content:"";position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--mustard);border:5px solid var(--loop-bg,var(--green));z-index:1} .loop h3{font-family:var(--text);font-weight:800;font-size:1.1rem;margin-bottom:4px} .loop p{font-size:.98rem;line-height:1.45} @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .loop{view-timeline-name:--loop;view-timeline-axis:block} .loop::after{animation:loopgrow linear both;animation-timeline:--loop;animation-range:entry 30% cover 55%} } } @keyframes loopgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* nothing wasted list, two column */ .waste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,72px)} .waste li{padding:20px 0;border-top:2px solid currentColor} .waste h3{font-family:var(--text);font-weight:800;font-size:1.2rem;margin-bottom:4px} .thanks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px} .thanks li{font-weight:700} /* wholesale parts (four things a cafe gets) */ .parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,80px)} .part{padding:22px 0 26px;border-top:3px solid var(--navy)} .part h3{margin-bottom:8px} .part p{max-width:44ch} /* servicing brand type wall */ .brands{display:flex;flex-wrap:wrap;gap:8px clamp(18px,3vw,40px)} .brands li{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.7rem,4vw,3.4rem);line-height:1.08} .stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);counter-reset:s} .stepper li{border-top:4px solid var(--navy);padding-top:14px} .stepper h3{font-family:var(--text);font-weight:800;font-size:1.1rem;margin-bottom:4px} .stepper li:nth-child(n){transition:none} /* FAQ */ .faq details{border-bottom:1px solid var(--line);padding-block:4px} .faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;list-style:none;padding:16px 0;font-weight:800;font-size:1.15rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:none;width:.7rem;height:.7rem;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--ease)} .faq details[open] summary::after{transform:rotate(-135deg)} .faq details p{padding:0 2.2rem 18px 0;max-width:62ch} /* footer grid, five columns */ .foot .top{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.8fr)) minmax(0,1.2fr)} @media (max-width:1100px){ .foot .top{grid-template-columns:repeat(2,minmax(0,1fr))} .loop{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px} .loop::before,.loop::after{display:none} } @media (max-width:820px){ .photo-head .wrap,.story-band,.quality,.sub-grid{grid-template-columns:1fr} .waste,.parts{grid-template-columns:1fr} .stepper{grid-template-columns:1fr 1fr} .cad-row{grid-template-columns:1fr;gap:6px} .loop{grid-template-columns:1fr;row-gap:0;padding-left:44px} .loop li{padding:0 0 26px 0} .loop li::before{left:-44px} .loop::before,.loop::after{display:block;left:13px;right:auto;top:6px;bottom:30px;width:4px;height:auto} .loop::after{transform-origin:top} @supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.loop::after{animation-name:tlgrow}}} } @media (max-width:560px){ .stepper{grid-template-columns:1fr} .foot .top{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .tl::after,.loop::after{transform:none} .parts-row span::after{transform:scaleX(1)} .cad-dots i.on{animation:none} } /* ---- review round: variety and truth ---- */ .ph-photo img{width:100%;height:auto;border-radius:var(--r-card)} .split-head{align-items:center} .sticky-side>:first-child{position:sticky;top:110px;align-self:start} .bag-trio{display:flex;justify-content:center;align-items:flex-end;gap:0} .bag-trio img{height:clamp(150px,20vw,260px);width:auto;margin-inline:-6px;filter:drop-shadow(0 18px 18px rgba(7,29,49,.28))} .bag-trio img:nth-child(2){height:clamp(190px,25vw,320px);z-index:1} .cafe-bags{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.6vw,22px);align-items:end;text-align:center} .cafe-bags img{height:clamp(120px,14vw,210px);width:auto;max-width:100%;margin:0 auto 10px} .cafe-bags span{display:block;font-weight:800;font-size:.95rem;line-height:1.15} .brand-card{background:var(--navy);color:var(--cream);border-radius:var(--r-card);padding:clamp(20px,2.6vw,32px)} .brand-title{font-weight:800;font-size:1.15rem;margin-bottom:12px} .brand-card .soft{color:rgba(252,240,225,.85)} .quiet-list{display:grid;gap:8px;font-size:1.2rem;font-weight:700} .quiet-list li{padding:6px 0;border-bottom:1px solid rgba(252,240,225,.2)} .quiet-list li:last-child{border-bottom:0} .placeholder{border:2px dashed currentColor;border-radius:var(--r-card);padding:clamp(20px,3vw,36px);max-width:60ch} .tabs{max-width:900px} .tablist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px} .tablist button{min-height:44px;padding:.5em 1.4em;border-radius:999px;border:2px solid var(--navy);background:transparent;color:var(--navy);font-weight:700;font-size:1rem;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease)} .tablist button[aria-selected=true]{background:var(--navy);color:var(--cream)} .tabpanel h3{margin-bottom:10px} .tabpanel p{max-width:56ch;font-size:1.15rem} .tabpanel p+p{margin-top:10px} .proto-msg{margin-top:10px;font-weight:700} @media (max-width:820px){ .split-head,.sus-head{grid-template-columns:1fr!important} .sticky-side>:first-child{position:static} .cafe-bags{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px} } @media (max-width:560px){.cafe-bags{grid-template-columns:repeat(2,minmax(0,1fr))}} .tl-plain h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.1;margin:0 0 4px} .tabs-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:clamp(24px,5vw,80px);align-items:center} .tabs-art{justify-self:center} .bag-panel{background:var(--cream-deep);border-radius:var(--r-card);padding:clamp(24px,4vw,56px) clamp(16px,3vw,40px) clamp(20px,3vw,40px)} .faq .tabpanel{padding:0} @media (max-width:820px){.tabs-wrap{grid-template-columns:1fr}}