Roastelle Documentation

Getting started

Thank you for choosing Roastelle. This help file explains how to install, edit and publish the template. No build tools are required: every page is plain HTML, CSS and JavaScript.

Unzip the download. Open the template folder.
Open index.html in your browser, or use a local server (VS Code “Live Server”, or npx serve template).
Edit the HTML files in any code editor. Changes appear on refresh.
Upload the contents of template/ to your web host’s public folder (for example public_html).

Need help? Email build@m00nshots.dev or visit m00nshots.dev. Please include your purchase code.

Author	MOONSHOTS
Website	https://m00nshots.dev
Contact	build@m00nshots.dev
Copyright	© 2026 m00nshots

File structure

template/
├── index.html, home-2.html, home-3.html, home-4.html   ← home page demos
├── menu.html, shop.html, about.html, locations.html, blog.html, 404.html
└── assets/
    ├── css/core.css      ← layout, grid, components (shared)
    ├── css/theme.css     ← Roastelle design tokens & unique sections
    ├── js/core.js        ← animations, menu, accordion, tabs, forms…
    ├── js/theme.js       ← template-specific scripts
    ├── images/           ← favicon + placeholder images
    └── vendor/           ← GSAP 3 & Tabler Icons (subset)
documentation/index.html  ← this file

Pages

File	Description
`index.html`	Specialty Coffee Shop
`home-2.html`	Coffee Roastery & Bean Subscription
`home-3.html`	Bakery Café & Brunch
`home-4.html`	Mobile Espresso Bar & Event Catering
`menu.html`	Menu
`shop.html`	Beans Shop
`about.html`	Our Story
`locations.html`	Locations & Hours
`blog.html`	Journal
`404.html`	404 Error

To choose a different home page, rename the variant you want to index.html (or update the logo links, which point to index.html).

Colours & fonts

All colours, fonts and radii are CSS custom properties at the top of assets/css/theme.css. Change a value once and it updates everywhere. Dark-mode values live in the [data-theme="dark"] block just below.

Token	Default
`--rs-espresso`	`#2b1a12`
`--rs-crema`	`#f1e3cf`
`--rs-cinnamon`	`#c0612b`
`--rs-pista`	`#9fb36a`
`--bg`	`#f5ead9`
`--bg-2`	`#ecdcc2`
`--surface`	`#fffaf1`
`--surface-2`	`#efe1c9`
`--text`	`#2b1a12`
`--muted`	`#6b5344`
`--line`	`rgba(43, 26, 18, .18)`
`--primary`	`#c0612b`
`--primary-2`	`#9fb36a`
`--accent`	`#9fb36a`
`--on-primary`	`#fffaf1`
`--rs-page`	`#f5ead9`
`--rs-em`	`#a94f1d`
`--rs-edge`	`#2b1a12`
`--rs-shadow`	`#2b1a12`
`--rs-pista-soft`	`color-mix(in srgb, #9fb36a 32%, #fffaf1)`
`--rs-board`	`#231915`
`--rs-wood`	`#7a5238`
`--font-head`	`"Alegreya", Georgia, serif`
`--font-body`	`"Schibsted Grotesk", system-ui, sans-serif`
`--font-logo`	`"Lobster Two", "Alegreya", cursive`
`--logo-weight`	`700`
`--logo-size`	`1.8rem`
`--logo-tracking`	`0`
`--logo-case`	`none`
`--head-weight`	`800`
`--head-tracking`	`-0.012em`
`--radius-sm`	`12px`
`--radius`	`24px`
`--radius-lg`	`30px`
`--radius-btn`	`999px`
`--gradient`	`linear-gradient(120deg, #c0612b, #a94f1d)`
`--shadow`	`0 20px 40px -26px rgba(43, 26, 18, .45)`
`--shadow-lg`	`0 34px 70px -30px rgba(43, 26, 18, .55)`
`--header-h`	`92px`
`--grain`	`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.1 0 0 0 0 0.07 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`
`--wave-up`	`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10Q15 0 30 10T60 10T90 10T120 10V20Z'/%3E%3C/svg%3E")`
`--wave-down`	`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0V10Q15 20 30 10T60 10T90 10T120 10V0Z'/%3E%3C/svg%3E")`

Fonts

This template uses Google Fonts: Alegreya, Schibsted Grotesk, Lobster Two (logo). They are loaded by the <link> tag in the <head> of every page. To change fonts, pick new ones on fonts.google.com, replace that link and update --font-head, --font-body and --font-logo.

Logo & favicon

The logo is text plus an icon, so it stays sharp at every size:

<a class="logo" href="index.html"><span class="logo__mark"><i class="ti ti-coffee"></i></span>Roastelle</a>

To use an image instead, replace the inner content with <img src="assets/images/logo.svg" alt="Your brand" height="36">. Replace assets/images/favicon.svg with your own icon.

Images

The download uses neutral placeholder images (assets/images/placeholder-WxH.svg) that show the recommended size. Replace each src with your own photo at the same aspect ratio. Images use loading="lazy" and explicit width and height to avoid layout shift.

Photos in the live preview are from Unsplash and are for preview only. They are not included in the download.

Animations

Animations use GSAP 3 and ScrollTrigger. Add attributes to any element:

Attribute	Effect
`data-anim`	Fade up on scroll
`data-anim="lines"`	Word-by-word headline reveal
`data-anim="stagger"`	Children animate one after another
`data-anim="zoom" \| "fade" \| "slide-left" \| "slide-right" \| "reveal"`	Alternative entrances
`data-delay=".3"`	Delay in seconds
`data-parallax="12"`	Scroll parallax (percentage)
`data-count="48"`	Animated number counter
`data-magnetic`	Magnetic hover for buttons
`data-float`	Gentle floating loop

Visitors who enable “reduce motion” in their OS settings see content without animation. Remove the js-anim class from <html> to disable animations globally.

Components

Header: sticky, shrinks and hides on scroll; mobile drawer below 1024 px.
Accordion: .accordion > .accordion__item. Add is-open to open one by default.
Tabs: wrap in [data-tabs]; each button’s aria-controls matches a panel id.
Pricing toggle: [data-billing] switches every [data-monthly] value to its data-yearly value.
Slider: .slider with scroll-snap and prev/next buttons.
Marquee: .marquee with two identical .marquee__track children.

Forms

Forms with data-demo validate in the browser and show a success message, but do not send data. To make one work, remove data-demo and set the action to your backend or a form service such as Formspree, Basin or Netlify Forms:

<form action="https://formspree.io/f/your-id" method="POST">…</form>

Dark mode

Each page sets its default theme on <html data-theme="light|dark">. The toggle button in the header switches themes and remembers the visitor’s choice in localStorage.

SEO

Every page has a unique <title>, meta description, Open Graph tags and one <h1>. Update them for your brand. Add a sitemap.xml and submit it to Google Search Console after launch.

Credits

GSAP 3	GreenSock standard “no charge” licence, free for commercial use	gsap.com
Tabler Icons	MIT licence	tabler.io/icons
Alegreya, Schibsted Grotesk, Lobster Two	SIL Open Font Licence	Google Fonts
Preview photos	Unsplash licence, preview only, not included	unsplash.com

Changelog

v1.0.0 · 27 September 2026 · Initial release.