FP14 | Atelier Rue | FIT=B | Local services | Editorial
TECHNIQUES: scroll scrub parallax hover tap touch focus rotate card shop front back filter reveal mask motion responsive font gsap lenis
BORN_HOOD_ADVICE: Cover-to-content editorial transition for an artist or collection.
DESIGN_SIGNATURE: 's colors] The design Idea: the salon's website is one issue of a fashion magazine. Fonts: Italiana for the masthead, logo and roman numerals; Playfair Display for italic headlines, numbers and captions; Manrope for body text and small spaced-out capitals. Colours: ink #0D0D0D, paper white #FAF8F5, blush #E9D3CC for name cards and the shelf section, champagne #C8B49A for numbers and rules on black, graphite #5B5550 for secondary text. Every photo is black and white. Layout, in order: a full-screen cover with the salon name in pale capitals spanning the top, a dateline rule, the portrait on the right of a grey studio backdrop, cover lines on the left, a round blush sticker and a barcode; a contents spread; a black band of cover lines; a service menu with three prices per service, one per stylist level, beside a sticky key to the levels; stylist portraits in a staggered row; a black look book with credited, priced looks; a blush shelf of drawn products; a Q&A; booking on black with a drawn map and an appointment-card form; a footer with the name set full width. Motion: on load the cover wipes up, the masthead letters rise one by one and the cover lines slide in. Then, as you scroll, the cover photo shrinks onto the right-hand page of the contents spread while the masthead flies up into the logo, pale over the photo and dark over paper. Look-book photos are uncovered by vertical strips lifting away. Stylist names rise on blush cards. Details: running heads and page numbers on every section, paper grain, hairlines.
HTML_SURFACE: headings=In this issue; Atelier RueAtelier Rue, a hair salon in Wicker Park, Chicago; Priced by the chair, not by the inch.; The hands behind the issue.; LookBook; Four bottles we’d defend in an argument.; The questions you ask in the mirror.; Reserve a chair. | ids=n, gInk, gGlass, gJar, gTube, star, menu, top, contents, ring, barcode, services, stylists, lookbook, shelf, ask, reserve, f-name, f-phone, f-svc, f-notes | functions=
ORIGINAL_PROMPT: prompt/atelier-rue.md (SHA256 2834913a26651c52b9d0109af15620e94655f6669d183aaae0b758748135f42a)
EXAMPLE_SOURCE: example/atelier-rue.html (SHA256 a72cba874a8361e8e08fab0cfebd2c7f3a68d238293ca45736b44d11e1bf3cc0)
FULL_RUNNABLE_OFFLINE_EXAMPLE: C:\Users\usapr\Documents\Reference Libraries\Futurepedia Claude Website Library\offline_examples\atelier-rue\index.html
DO_NOT_COPY: Demo facts/images/prices/logos; use only proven techniques respecting current BORN HOOD constraints.
