Rook & Razor Barber Co. — Barbershop Website (7 Pages)

7 pages, each a complete, self-contained HTML page — an old-school barbershop design in barber-pole colours (shop black, barber red, bone and navy): a vintage storefront hero with a scalloped awning, two spinning barber poles, a ring-lettered badge and a sign-painted headline, Alfa Slab One headings over Sofia Sans, tear-off ticket stubs, stamped seals, enamel sign plates and white subway tile, all rendered without any external stylesheet or script dependency. 1. Home (index.html) — storefront hero with a swinging "Walk-ins welcome" sign, the chair board, shop photo with count-up numbers, ticket-stub prices, stamped house rules, a style-guide plate, three barber cards, reviews and the Monthly Cut Club. 2. Services & Prices (services.html) — ticket-stub price lists for cuts, beards and shaves, kids and seniors; a straight-razor anatomy diagram with the hot towel shave steps; add-ons; stamped notes. 3. Our Barbers (barbers.html) — five illustrated barber badge cards with specialties, years and a "Book with…" link; a speciality matrix; training and hygiene. 4. The Cuts (cuts.html) — an illustrated style guide: eleven plates with side and back head line drawings, guard numbers, upkeep and an "ask for" line, plus a clipper guard chart. 5. Shop & Grooming (shop.html) — product shelf (no brands), gift cards, three Monthly Cut Club plans and a FAQ. 6. Visit & FAQ (visit.html) — hours with today highlighted, an illustrated map, getting-here notes, shop policies and FAQ (FAQPage markup). 7. Book a Chair (book.html) — booking request form, next steps, hours and walk-in note. ANIMATION. The barber poles spin, the pole stripe under the header slides, the hero sign swings, seal stamps thump in with a bounce, a straight razor shaves a stubble line clean across the section dividers, ticket stubs slide up, the cut diagrams and the razor diagram draw themselves, map pin drops, guard-chart bars fill, numbers count up (they read the number you type) and a services ticker scrolls. Everything is visible without JavaScript, and visitors who ask for reduced motion see a still page. CHAIR BOARD. The board on the home page is SAMPLE DATA: barber names, statuses and wait times are set in each row's data-state and data-free (minutes) attributes and count down once a minute in the browser. Only the clock and the open/closed line are real. Connect it to your booking or queue system before presenting it as live, or keep the "sample" note visible. OPEN NOW & TODAY. The header strip, chair board and Visit page compute "Open now / Closed" from the data-hours attribute ("open-close" in 24h hours per day, Sunday first, empty = closed); the Visit and Book hours lists highlight today from each row's data-day (0 = Sunday). If you change your hours, update both the data-hours attribute and the visible hours text. BOOKING FORM. Links like book.html?barber=teo or ?service=skin-fade pre-select the barber or service. Submitting shows a "demo only" message and sends nothing. FONTS. Alfa Slab One and Sofia Sans load from Google Fonts via @font-face in each page's style block, with serif and sans-serif fallbacks. SEO. Each page opens with a labeled block (title, meta description, canonical link, Open Graph tags and JSON-LD — HairSalon with a barber additionalType (schema.org has no BarberShop type), an OfferCatalog of services, AboutPage, CollectionPage, FAQPage or ContactPage). Copy it into your real <head> when you deploy, and update the domain, address, hours and rating. FORMS. The booking form posts nowhere and ships no backend — set its action to your booking system or form service before publishing. EDITING. Change colours and fonts site-wide in the editor's Theme panel; edit the header or footer once and use "Apply to all pages"; sections can be moved, duplicated, hidden or deleted; use the Tablet and Mobile views for device-specific tweaks. The ring lettering on the hero badge is one span per letter — edit the ringText() call in the seed file (or replace the badge) to change it. CLAIMS & SAMPLE CONTENT. The shop name, barbers, address, phone, prices, product range, membership plans, statistics, ratings and reviews are fictional samples — replace them with your own. Barbering is licensed and regulated by each state (licensing, sanitation and posting rules vary), so check the licensing and hygiene wording against your state board's rules before publishing. Clipper guard lengths are typical values; brands vary slightly. IMAGES. Three real Unsplash photos, self-hosted under /content-images: the shop floor (cropped low to the chairs and floor), a vintage barber chair and an unlabelled still life of grooming bottles. No photo shows a person or a readable brand. Barbers, products, the badge, poles, cut diagrams and the map are inline SVG and CSS illustrations.