FP06 | Ridgeline Coffee Roasters | FIT=A | Food & drink | Swiss & grid
TECHNIQUES: scroll hover touch focus rotate card shop front back filter motion checkout contact font hero gsap lenis
BORN_HOOD_ADVICE: Scroll-centered product focus, color and details; adapt to real garments.
DESIGN_SIGNATURE: 's colors] The design The idea: Swiss packaging design come to life, where every coffee is a number, a color and its own bag on a strict grid. Font: Archivo only, expanded and black for headlines and numbers, condensed bold capitals for labels and tasting notes. Colors: off-white #FAFAF7 page, ink #121212 for text and thick rules, plus one color per coffee: signal red #E8432F, cobalt #2449D8, mint #7FD1AE, ochre #E3A72F. Draw each bag as real packaging, never a flat rectangle: a folded top with metal tie ends, a round valve, side creases, soft shading, a giant number and a white label with origin, notes and roast squares. In order: a hero with a huge two-line headline, a ruled info strip and the four bags standing on a shelf line; a flavor wheel; a subscription builder; an altitude brew guide; a dark roastery section with an elevation profile and count-up figures; wholesale terms with a sample form; a drawn street map with hours; an ink footer with the name set edge to edge. Signature move: the hero holds still while you scroll and each coffee takes a turn. Its color rises up that bag's column, then widens to fill the page; the bag slides forward while the others step back, a giant faint numeral rolls to its digit behind them, and its spec sheet slides in. On the flavor wheel, scrolling past or pointing at a bag lifts its three notes out in its color. The subscription builder redraws a shipping-label summary live, with price, cups a day and a twelve-week delivery calendar.
HTML_SURFACE: headings=Four coffees.One mile up.; Every note, on one wheel.; Build a standing order.; Brew it at altitude.; Roasteda mile up.; Pour it at your counter.; Taste them where they’re roasted.; Roast-day notes. | ids=bb, bf, gx, gy, gf, gb, gt, gv, gg, bagA, bagB, nav, cart, cartN, mbtn, mlabel, menu, main, coffees, nextRoast, c1, c2, c3, c4, taste, taste-h, wheel, subscribe, sub-h, builder, s1, optC, s2, optS, s3 | functions=$, $$, up, bagSVG, nextRoast, setMenu, toast, demoForm, P, arc, lab, setWheel, K, opt, money, suggest, planText, renderPlan, fmt, renderBrew, rnd, fitWord, goTo, navSolid, showSpec, setK, col, clip, rowX
ORIGINAL_PROMPT: prompt/ridgeline-coffee.md (SHA256 e277dc96e7cc2cbb799e7f6dcbb8246eecb1954687599569ddc5844382981f88)
EXAMPLE_SOURCE: example/ridgeline-coffee.html (SHA256 fc8e06701925bf6fbf083ff12590d193c1eac1336aa0d06d3ca40654db73fa99)
FULL_RUNNABLE_OFFLINE_EXAMPLE: C:\Users\usapr\Documents\Reference Libraries\Futurepedia Claude Website Library\offline_examples\ridgeline-coffee\index.html
DO_NOT_COPY: Demo facts/images/prices/logos; use only proven techniques respecting current BORN HOOD constraints.
