Local Reference

Divine Realm Theme Style Guide

A local-only kitchen sink for theme-owned patterns: hero modes, page loaders, button roles, dividers, cards, badges, forms, empty states, and atmospheric treatments.

Local MAMP reference only. Keep this page out of production exports and update it whenever a reusable Divine Realm theme pattern changes.

Open WooCommerce Components

Motion

Page Transition Loaders

Static specimens for the current production loader and opt-in variants. Production navigation still injects the loader only during eligible internal page transitions.

  • Reference
  • Page Transition Loader
  • .drb-page-transition
  • .drb-page-transition--compact-spell
  • .drb-page-transition--brand-seal
  • scss/components/_page-transition-loader.scss

Spell Circle

Current default. Subtle navy veil, rotating gold rings, orbiting motes, and visible Loading text.

Loading...

Compact Spell

A smaller, quieter version of the default spell circle with Loading text tucked underneath.

Loading...

Brand Seal Test

Separate archived variant inspired by the store mark: stars, double ring, and open-book hints.

Loading...

Interaction

Buttons, Links, And Badges

Semantic role modifiers control typography and scale, while primary, secondary, and outline remain independent color variants.

  • Reference
  • Pattern: Divine Button
  • Roles: .divine-button--section-anchor, .divine-button--commerce
  • Variants: .divine-button--primary, .divine-button--secondary, .divine-button--outline
  • SCSS: scss/components/_buttons.scss
  • Reference: docs/20-reference/THEME-STYLE-GUIDE.md
.divine-button--section-anchor
.divine-button--section-anchor
.divine-button--commerce
.divine-button--commerce[disabled]
Staff Pick New Realm Static Sample

Page Hierarchy

Hero Modes

Compact reference specimens for choosing the correct page-opening treatment. These cards document hierarchy without duplicating full production heroes.

  • Reference
  • Threshold Hero: homepage only
  • Realm Section Hero: section and landing gateways
  • Utility Hero: search and 404 recovery
  • Commerce / Transactional Header: cart, checkout, account, and order states
  • Reference: docs/20-reference/THEME-STYLE-GUIDE.md

Homepage Gateway

Threshold Hero

The most immersive invitation into the bookstore, with discovery-first search and selective editorial actions.

.drb-home-hero-alternative

Section Gateway

Realm Section Hero

Establishes the identity of Books, Events, About, Beyond, shelf, and collection landing pages.

.drb-books-hero / .drb-shop-hero

Task And Recovery

Utility Hero

A compact, state-first introduction for product search, general search, no-results, and 404 recovery.

.drb-shop-archive--product-search / .drb-not-found-hero

High-Intent Flow

Commerce / Transactional Header

A restrained practical header for Cart, Checkout, My Account, and order states where clarity comes first.

.drb-transactional-header

Books

Book Cover And Fallback Images

Static references for the reusable WooCommerce book-cover treatment, including the canonical no-cover fallback and contained placeholder behavior.

  • Reference
  • Pattern: Book Cover
  • Classes: .drb-book-cover, .drb-book-cover__image, .has-placeholder-image
  • SCSS: scss/components/_book-cover.scss
  • Template: template-parts/woocommerce/book-cover.php
  • Fallback: assets/images/store/No-Cover-Image-Available.webp
Static fantasy book cover placeholder sample

Normal Cover Frame

Uses the standard 2:3 frame and cover crop behavior.

Cover image coming soon fallback

Missing-Cover Fallback

Theme-owned fallback for products without a WooCommerce product image.

Contained artwork sample

Contained Artwork

Placeholder-style artwork should contain rather than crop awkwardly.

WooCommerce Display

Product Card Pattern References

Static, inert examples of the current WooCommerce card classes. These do not query products, add to cart, or navigate to product pages.

  • Reference
  • Pattern: Product Cards
  • Classes: .drb-product-card--collection, .drb-product-card--category, .drb-product-badge
  • SCSS: scss/components/_product-card.scss, scss/components/_book-cover.scss
  • Templates: template-parts/woocommerce/collection-book-card.php, category-book-card.php, book-cover.php, product-badges.php
Sale Pre-Order
Static collection card cover

The Gilded Door

by Rowan Vale

A polished editorial card for featured rows and curated collections.

$29.99 $24.99
Out of Stock
Static category card fallback cover

A Very Long Fantasy Title That Wraps Cleanly

by Mira Candlewick

$18.99

Storefront

Theme Cards And Dividers

  • Reference
  • Theme Cards / Dividers
  • .drb-theme-guide__feature-card
  • .drb-theme-guide__event-card
  • .drb-theme-guide__divider
  • scss/pages/_theme-style-guide.scss

Shelf Card

Curated Fantasy

Use this rhythm for small editorial blocks, store pathways, and calm internal prompts.

Atmospheric Card

More Ways To Read

Dark surface, gold lift, restrained rose accent, and enough contrast for repeated scanning.

Event Card

Moonlit Book Club

Friday, 7:00 PM - In store

State

Surfaces, Notices, And Empty States

  • Reference
  • Theme Surfaces
  • .drb-theme-guide__notice
  • .drb-theme-guide__notice--info
  • .drb-theme-guide__empty
Success The shelf preview has been refreshed.
Info This component is static on the local guide.

Nothing on this shelf yet

Use this when a collection, event list, or search result needs a calm empty state.

Structure

Navigation, Header, And Footer References

Compact source map for the theme-owned shell. This guide does not recreate the full header or footer because those are live site components.

  • Reference
  • Pattern: Site Shell
  • Header: components/navbar.php, scss/components/_navbar.scss
  • Footer: components/footer.php, scss/components/_footer.scss
  • JS: assets/js/main.js
  • Utilities: Search, Account, Cart; active launch storefront is dark-only

Header / Navigation

  • components/navbar.php
  • .main-navigation, .drb-nav-action, .drb-books-mega
  • Utility actions: Search, Account, Cart.
  • Visitor-facing theme toggle is removed for the dark-only launch storefront.

Footer

  • components/footer.php
  • scss/components/_footer.scss
  • Legal links order: Privacy Policy, Terms & Conditions, Returns Policy.
  • Footer links are customer-facing; keep reference-only links on local Examples pages.

Theme Pattern

Tables

Use this pattern when structured information needs to stay readable on dark Divine Realm surfaces.

  • Reference
  • Theme Tables
  • .drb-theme-guide__table-wrap
  • .drb-theme-guide__table
  • .drb-theme-guide__status
  • scss/pages/_theme-style-guide.scss
Reusable table pattern for policy, order-summary, event, inventory, comparison, and admin-reference layouts.
Shelf / Category Example Use Status Items Notes
Cozy Fantasy Category archive QA Checked 24 Use for shelf inventory or comparison rows.
Pre-Orders Launch checklist reference Watch 8 Keep date, stock, and badge states easy to scan.
Local Events Event policy or schedule table Draft 3 Wrapper keeps horizontal scroll inside the specimen.

Inputs

Theme Form Rhythm

  • Reference
  • Theme Forms
  • .drb-theme-guide__form
  • .drb-theme-guide__choice-group
  • .drb-theme-guide__field-error
  • [data-drb-static-example-form]

Static sample field for spacing and focus checks.

Example error: enter a valid email address.

Select styling should stay readable in both theme modes.

Preferred contact
Reader updates

Maintenance

Reference Links

  • Reference
  • Local Reference Links
  • .drb-theme-guide__reference-list
  • template-theme-style-guide.php
  • docs/20-reference/THEME-STYLE-GUIDE.md

Typography

Heading Level One

Heading Level Two

Heading Level Three

Heading Level Four

Heading Level Five
Heading Level Six

This paragraph shows the default body copy treatment for the Divine Realm Books theme.

Strong text, emphasized text, and inline links should remain readable and distinct.

Stories are doors. Some open quietly. Some open with a little magic.

Inline code example: add_theme_support( 'woocommerce' );

.divine-realm-example {
	color: var(--drb-color-gold);
	background: var(--drb-color-navy);
}

Lists

  • Fantasy romance
  • Cozy fantasy
  • Dark fantasy
  1. Browse the shelves
  2. Add a book to cart
  3. Checkout locally
  • Book formats
    • Hardcover
    • Paperback
    • Audiobook
  • Reader paths
    1. Shop in store
    2. Order online
    3. Request a special order
Pre-order
A title available to reserve before release.
Staff pick
A book personally recommended by the Divine Realm Books team.

Tables

Title Shelf Status
Stolen Embers Dark Fantasy In stock
Throne of Nightmares Fantasy Romance Featured
Test Book Pre-order Coming soon

Forms












Radio group



Checkboxes






Buttons





Misc Elements

Article Element

This article block can test long-form content rhythm inside the theme.

Placeholder image for Divine Realm Books style guide
Figure caption for image and media styling.

Inline span text,
ACF,
and keyboard input like Tab should all render cleanly.