Pick the Forest preset in Studio Nope Official and the page turns green — the buttons, the links, the headings. Then you scroll to the store locator and its button is still near-black. So are the icon circles, the focus rings and the selected map pins. The preset reaches the page and stops at the modules.
That is fixed, and it is one of several things in this release. New modules for locations, resources, questions and feature comparisons. A scroll reveal system that runs from theme settings and cannot blank your site. An icon font that no longer ships a multi-megabyte download nobody asked for.
Everything below is in the current version on the HubSpot Marketplace. Nothing was replaced and no existing page changes on its own.
New modules
Store Locator
A map beside a list of your branches, with a search box that takes a town or a postcode, a category filter, and a use my location button that reorders the list by distance. It runs on Google Maps or on Leaflet, so a portal without a Google Maps billing account still gets a working map.
It writes LocalBusiness structured data for every location, including the street address, the coordinates and the opening hours you enter in the module.
Resource Library
A searchable, filterable library for whitepapers, brochures, reports and case studies. Items carry categories and tags, and the grid renders as cards or as a list. It emits DigitalDocument and Article structured data for the items and an ItemList for the collection.
FAQ Library
Questions grouped into categories, with a search box above them. Answers are rich text, so a long answer can carry headings, lists and links rather than one flat paragraph. Each question's icon colour comes from module settings. The module emits FAQPage structured data.
Comparison Matrix
A feature-by-feature table with headers that stay put while you scroll the rows, tick and cross icons coloured from settings, and a phone layout that keeps the comparison readable instead of shrinking the type until it is not.
Scroll animations, from theme settings
The reveal system is built into the theme rather than into individual modules. It attaches by page structure: every page in this theme renders as #main-content → .dnd-module → a module root that is a header block followed by a grid or a list. That regularity is enough to attach a reveal from one place, so every module on every template animates without a single module file knowing the system exists — and a module added next year is covered the day it lands.
Everything is a field in Settings → Animations: the reveal style, the duration, the travel distance, the stagger between items, the stagger cap, the stagger on the first section, and separate switches for section content and for grids and lists. No number in the system is a literal in the code.
It ships switched off. An existing site never gains motion it did not ask for.
The part that matters: it fails open
A reveal system that fails closed blanks the site. Elements start hidden, the script that unhides them dies, and the visitor gets a blank page with a working scrollbar. This one has three independent guarantees, in the order they fire:
- No JavaScript at all — nothing is ever hidden. Every hiding rule is written
html.sn-on …, and thesn-onclass is put on<html>by an inline script. No script, no class, no rule, full page. There is no<noscript>block because none is needed. - JavaScript that starts and then dies — the page heals itself, with no JavaScript. The rule that hides a not-yet-processed block carries
animation: sn-failsafe-in 1ms var(--sn-failsafe) forwards. During the delay the animation contributes nothing, so the block stays hidden; at the deadline it fills to opacity 1 and stays there. That is pure CSS, and it works even if the script threw on its first statement. - An exception anywhere — the class comes straight back off. Everything runs inside a try/catch whose catch removes
sn-on.
A visitor who asks for reduced motion never gets sn-on at all, so no rule in the file can match and nothing is hidden for even a frame.
The engine is IntersectionObserver only — no scroll listener anywhere. It animates opacity and transform and nothing else, unobserves each element the moment it reveals, and strips its classes and inline custom property once the transition ends, so a scrolled page carries no lingering compositor layers and no stray transform for a sticky child to position against. No effect translates on the X axis, which is the usual way a reveal introduces a horizontal scrollbar at 375px.
Style presets now reach the modules
This is the bug from the top of the post, and it is worth explaining because the shape of it is common in HubSpot themes.
The theme writes brand colours through a HubL macro, d_color(), which emits a custom property only when the value saved in theme settings differs from a reference default passed in the call. The idea is right: if you never touched the accent colour, nothing is written, and the preset governs.
Thirteen of those reference defaults did not match the real defaults in fields.json. A field nobody had touched therefore compared as changed, so the brand block was emitted on every page whether or not anyone had edited a colour. And that block loads after the preset stylesheet, so it won the cascade.
The visible result was a half-applied preset. Buttons and links turned green with Forest because those tokens are not in the brand block. --color-accent stayed at #262626, so the store locator button, the icon circles, the focus rings and the selected map pins stayed near-black on a green page.
The references now match fields.json, so an untouched field emits nothing and the preset governs — Forest, Midnight, Warm and the rest.
If you ship a HubSpot theme with presets and a defaults comparison, check that the two lists agree. Nothing errors when they drift. The page quietly stops listening to the preset.
Structured data, without a plugin
The FAQ, location and resource modules emit their own JSON-LD from the content you enter: FAQPage, LocalBusiness with opening hours and coordinates, Article, DigitalDocument and ItemList. There is nothing to configure and nothing to install.
Performance
The icon font was the big one. The theme loads Material Symbols, and it was requesting the font across a range of axis values rather than the values it uses. Google Fonts answers a range request with the complete variable font: 3.98 MB, on every page.
The request is now pinned to the four axis values the theme renders — optical size, weight, fill and grade — and the same icons arrive in 349 KB.
Alongside that: jQuery now serves minified, and the preconnect hints moved into the head where they can do something. We also rewrote the performance claims on the demo site so they match what you get if you run Lighthouse against it yourself.
Fixes
- Dark hero body text rendered mid-grey beside a white heading. It now uses full-strength ink, and the custom text colour field applies.
- Form submit buttons had no hover state. Theme button settings now reach HubSpot form buttons too.
- Anchor links landed underneath the sticky header on every page. The offset calculation was matching nothing; it now matches the header.
- Hero media columns stretch to the full column height instead of leaving a gap, with a safe crop band.
- The show and hide toggles for desktop, tablet and mobile work on hero modules.
- Two dead fields came out of Design Tokens → Motion. They were labelled as scroll-reveal settings, nothing read them, and they sat exactly where people went looking for the animation switch.
- New marketplace thumbnail.
Getting the update
Themes bought on the HubSpot Marketplace update in place — the new version arrives in your portal without a reinstall, and your pages keep their content. The scroll reveal stays off until you switch it on in Settings → Animations, and the preset fix applies to whatever preset you already have selected.
Studio Nope Official is on the HubSpot Marketplace, and the live demo runs at nopethemes.com. Every theme and module we sell comes with email support, including help fitting it to your brand — write to hello@studionope.com.