Global Layout Preview

Development route for the ASTYLIO global shell (Step 2). The announcement bar, header, navigation, dropdown menu and footer you see around this page are the reusable layout that every future storefront page will plug into. This page is not a production homepage.

Announcement Bar

Rendered at the very top of every page via template-parts/global/announcement-bar.php. Configurable through the astylio_announcement_bar filter (message, link, linkLabel, dismissible). The live bar uses the scrolling-marquee style; a static variant is shown below.

Header · Desktop Navigation · Dropdown

The live header above is the reusable shell: ASTYLIO wordmark, four thin-line actions (Search → Wishlist → Cart → Account) and data-driven navigation. Hover CLOTHING or COLLECTIONS to open a simple dropdown. Keyboard: Tab into a parent opens the dropdown (:focus-within), Esc closes it. The same config drives the mobile drawer.

Mobile Header · Mobile Navigation

On narrow viewports the header switches to a deliberate mobile layout (menu · brand · actions) and the hamburger opens the mobile navigation drawer (nested drill-down with a Back button). Open it now:

Page Content

Future storefront pages render here inside the global shell — homepage, listings, product, cart, checkout, account.

Design-System Reuse (Step 1 primitives)

The global layout consumes the Step 1 primitives directly — no parallel components: Button, IconButton, Input, Drawer and Modal below are the same design-system classes.