FP18 | Harbor & Pine Motors | FIT=A | Local services | Cinematic
TECHNIQUES: scroll scrub pin video hover touch focus rotate card front back filter mask motion responsive font hero film gsap lenis
BORN_HOOD_ADVICE: Studio spotlight on authentic product images and graceful filter transitions.
DESIGN_SIGNATURE: 's colors] The design Idea: a car showroom at night, where every car stands under its own spotlight and the page is lit the same way. Fonts: Michroma, wide and engineered, used sparingly for headlines, big numbers and the logo; Red Hat Text for everything else, with small spaced capitals for labels. Colours: graphite #121417 and night #0B0D0F backgrounds, deep pine #1F3B33 for the inspection section and calculator, brushed silver #C9CCD1 text, amber #E0A84F for tiny glowing indicator dots, hairlines and buttons, white #F5F6F7 headings. Layout, in order: a full-screen dark hero, headline left, one car photographed on black to the right; a large statement with four big numbers; an inventory grid with body, price and make filters, spec chips and prices, plus cars still under a drawn dust cover with prep progress bars; the inspection, a close-up photo held beside a six-part checklist; a payment calculator; a trade-in form with steps and recent offers; a full-bleed night delivery photo; the showroom with hours, team, a drawn map and a viewing form; a footer with the name edge to edge. Motion: on load a ceiling track light flickers on and a soft beam opens over the car as headline lines rise. Scrolling holds the hero still while the spotlight slides along the car; each spec beneath it lights and counts up as the light passes, then the house lights come up. Inventory photos brighten at mid-screen, filtering glides the grid into its new order, and a giant counter climbs to 150 as each checklist group lights. Details: film grain, hairlines, tabular figures, real prices.
HTML_SURFACE: headings=Every car gets its own light.; How we sell cars; Six worth the drive to Scottsdale.; 150 points. One signature on every report.; Know the monthly before you sit down.; A real number in two hours. Not a teaser.; Delivered at dusk.; Come and see it under the lights.; Harbor and Pine Motors | ids=n, menu, main, top, hero-h, intro-h, inventory, inv-h, ferrari, bentley, audi, defender, porsche, cv1, g63, cv2, certified, cert-h, finance, fin-h, c-car, c-price, c-down, trade, trade-h, trade-form-h, dusk-h, visit, visit-h, map-t, mg, mc, view-h, foot-h, n-email | functions=
ORIGINAL_PROMPT: prompt/harbor-and-pine-motors.md (SHA256 6eda66ed008a54c5474e04267a3e7be09c0379c364f43b4ab43b4015d8af06ef)
EXAMPLE_SOURCE: example/harbor-and-pine-motors.html (SHA256 5e44275b42aa3b848c2af025f4b98751d94500f1da62123b3ab283766dd1c4ce)
FULL_RUNNABLE_OFFLINE_EXAMPLE: C:\Users\usapr\Documents\Reference Libraries\Futurepedia Claude Website Library\offline_examples\harbor-and-pine-motors\index.html
DO_NOT_COPY: Demo facts/images/prices/logos; use only proven techniques respecting current BORN HOOD constraints.
