Theme & appearance · Prototype

Ready-made color schemes (keeps fonts, logo & CSS)

Bottle green (default)

Navy

Burgundy

Forest green

Graphite

Terracotta

Sky blue

Sun yellow

Primary color Body text against background requires 4.5:1 · primary/accent 3:1 (WCAG 2.1 AA) Secondary color Accent color Background color Text color Ink mode

⚠ Contrast error: accent #E8D9A0 against background #FAF7F0 gives 1.6:1 (requires 3:1). Suggestion: #8A6D1F —

Save is disabled until all contrast errors are resolved. Validation runs server-side on preview and save.

Font pairs (heading + body) — curated pairs in 5 categories

Fraunces

+ Inter

Classic · classic

Playfair Display

+ Source Sans 3

Editorial · elegant

Space Grotesk

+ Inter

Modern · modern

Archivo

+ Archivo

Sport · sport

Inter

+ Inter

Minimal · minimal

Cormorant Garamond

+ Lato

Elegant serif · elegant

Display font Curated Google Fonts allowlist (~20 display) — extended via PR Body font ~10 body fonts in the allowlist Heading weights Loaded locally — no external font calls at runtime Body weights Fallback stack Shown until the webfont has loaded

Fonts outside the allowlist are rejected (e.g. Comic Sans → 422). Only the fonts the site actually uses are preconnected and loaded.

Header preset (6)

Standard

Sticky standard ✓

Centered logo

Transparent hero

Compact

Full-featured

Sticky header Follows along on scroll Search field in header Site search (see Navigation & structure) Language switcher in header Shown when more than one language is active

Footer preset (6)

Standard ✓

Multi-column

Full columns

Minimal

Social focus

Hidden

Link groups 3 columns of links — edited per group Contact info Social links Icons with links — added per platform Newsletter signup in footer Form from the form builder Legal links Inherited from the platform, can be extended

Switching presets keeps your own colors and content — only the layout changes.

Menu builder (max 3 levels)

Label	Target	Visibility	Type
⋮⋮ Home	`/`	Everyone	Page	✎ · 🗑
⋮⋮ Competitions	`/tavlingar`	Everyone	Auto page (calendar)	✎ · 🗑
⋮⋮ — Results	`/resultat`	Everyone	Auto page (results)	✎ · 🗑
⋮⋮ — Leaderboard	`/ranking`	Everyone	Auto page (ranking)	✎ · 🗑
⋮⋮ The club	`/om-oss`	Everyone	Page	✎ · 🗑
⋮⋮ — Member pages	`/medlem`	Members only	Page (gated)	✎ · 🗑
⋮⋮ Contact	`/kontakt`	Everyone	Page	✎ · 🗑

Selected menu item

Label * Target Open in Icon Optional Visibility CSS class Advanced

Auto-generated pages

Leaderboard / ranking	Public ranking feed	Active	↻ Refresh
Competition calendar	Public events in scope	Active	↻ Refresh
Results	Latest decided competitions	Active	↻ Refresh

Breadcrumbs Follows the page hierarchy (parent page) with cycle protection Parent page for 'Member pages' Site search Full text across headings, descriptions and block content with relevance excerpts Sitemap (XML) Priority/change frequency per page type · no_index pages are excluded

Page width mode Width preset Club sites are suggested 800px Max content width px — global content max-width Breakpoints Mobile-first — tap targets ≥ 44px (WCAG) Mobile header Mobile font scaling

Dark mode

Dark mode Enabled per site Dark background 14 dark color fields can be adjusted — the rest are derived Dark surface (cards) Dark text Dark primary Dark accent

All dark combinations are contrast-validated just like light ones. The visitor's choice is saved per session.

Logo SVG/PNG ≥ 512px — 8 variants are generated automatically Logo position Favicon Social share image (OG card) Asset host Allowlisted hosts only (cdn.petanque.life, *.blob.core.windows.net etc.)

Auto-generated variants (8)

Variant	Dimensions	Format
`favicon-16`	16×16	PNG
`favicon-32`	32×32	PNG
`header-1x`	48px height	PNG + WebP
`header-2x`	96px height	PNG + WebP
`og-card`	1200×630	JPEG
`footer`	32px height	PNG + WebP
`app-touch`	180×180	PNG
`mono`	48px height	SVG (single color)

Custom CSS (advanced) — v7

2.1 kB of 50 kB

⚠ Warning: 1 !important found — can clash with theme tokens. Fully blocked: @import, javascript:, expression(), data: URIs.

Settings & variables

Scope CSS to the site Selectors are prefixed automatically — never leaks to other sites Version tracking Earlier versions can be restored

Generated CSS variables (excerpt)

--site-primary: #1C3626; --site-accent: #C08A2C; --site-font-display: Fraunces;

Inherit from Circular inheritance is blocked Inherit colors Primary/secondary/accent from the federation Inherit fonts Display + body Inherit header/footer layout Presets and columns Inherit dark mode Inherit responsive settings

Always local: the logo and favicon are kept from the site itself regardless of inheritance. Inheritance is granular — tick exactly what follows the federation profile; the site controls the rest.

Resolved brand (what the visitor sees)

Primary color	`#1C3626`	Inherited (federation)
Accent color	`#C08A2C`	Inherited (federation)
Fonts	`Fraunces / Inter`	Inherited (federation)
Logo	`nordviks-bk.svg`	Own (always)
Header layout	`Sticky standard`	Own

Theme & appearance — Nordviks BK