Making it look like your brand

How the styling works

The pages are styled with Tailwind CSS classes written in the HTML (class="rounded-full px-3.5 py-2 bg-ink text-white"). assets/css/style.css contains exactly the classes the pages use, generated from src/css/style.css.

That means two kinds of change:

Change	Rebuild the stylesheet?
Move, copy or delete elements; use classes that already appear somewhere in the site	No
Change a colour, a font, a breakpoint; use a class that appears nowhere yet (say `mt-7`)	Yes

Rebuilding the stylesheet

Once, install the tools (needs Node.js 20 or newer):

npm install

Then, after a change:

npm run build:css      # one build
npm run watch:css      # rebuilds on every save while you work

Both write assets/css/style.css. The build scans every .html file and assets/js/main.js for classes, so a class you add anywhere is picked up. Upload the new style.css with your pages.

Colours

In src/css/style.css:

@theme {
  --color-ink: #101010;    /* text, buttons, dark surfaces */
  --color-canvas: #f6f6f6; /* page background */
  --color-line: #d9d9d9;   /* dividers, menu hover */
  --color-muted: #818181;  /* secondary text, icons */
  --color-accent: #fc5000; /* accent */
  --color-star: #fdca49;   /* rating stars */
  --color-danger: #ff2244; /* form errors */
}

Each becomes a class (bg-ink, text-muted, border-line). Change the values, rebuild, and the whole site follows. Keep dark text on a light background at a contrast of at least 4.5:1 so it stays readable.

The menu’s hover colour is also written in the HTML (rgba(217, 217, 217, …) in data-motion attributes) because the script animates it. If you change --color-line, replace that value across files too.

Fonts

Inter ships in assets/fonts/inter-variable.woff2 and is declared at the top of src/css/style.css:

@font-face { font-family: "Inter"; src: url("../fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; … }
:root { --font-inter: Inter, "Inter fallback: Arial", sans-serif; }

To use another font: put its .woff2 file in assets/fonts/, change the @font-face (font-family and src) and the first name in --font-inter, then rebuild. Fonts from Google Fonts can be downloaded as files with https://gwfh.mranftl.com so they are served from your own domain, which is faster and needs no consent banner.

Sizes and spacing

Text sizes are classes with a phone value first and the tablet (md:) and desktop (lg:) values after: text-[32px] md:text-[36px] lg:text-[42px]. Spacing uses Tailwind’s scale — 4 px per step, so p-5 is 20 px, gap-10 is 40 px — or exact values in brackets (py-[50px]).

	Width	Prefix
Phone	below 810 px	(none)
Tablet	810–1199 px	`md:`
Desktop	1200 px and up	`lg:`

Components

style-guide.html shows every button, form field, card, slider and section with its name. To reuse one, copy its markup from there or from the page that shows it. Elements with data-… attributes (data-accordion, data-post-grid, data-slideshow, data-motion, …) are wired to the site script — keep those attributes when you copy them.

Motion and the cursor

Hover effects, sliders, accordions, parallax and the custom cursor are all in assets/js/main.js and respect the visitor’s “reduce motion” setting. To remove the custom cursor, delete the cursor element near the end of each page’s <body> (it carries data-cursor-root); the rest of the site does not depend on it.