Winterfolk Website Branding and Styling Guide

Purpose

This guide defines the visual and writing standards for the Winterfolk website and related digital material.

The highest-priority standards are:

  • Fonts
  • H1–H5 headings
  • Paragraph text
  • Colours
  • Gold dividers
  • Hero sections
  • Buttons
  • Images
  • Page layout
  • Forms
  • Mobile presentation
  • Writing style

Reusable styling belongs in the main Winterfolk CSS. Individual page sections should contain clean HTML without separate font, size or text-colour instructions.

Brand Identity

Winterfolk should look professional, welcoming and connected to live roots music.

The design should feel:

  • Established
  • Community-based
  • Warm and natural
  • Easy to read
  • Professional without feeling corporate
  • Relevant to longtime supporters and younger audiences
  • Connected to real artists, audiences, venues and live music

Connecting Generations Through Music

Main Website Styling

Official Font System

Merriweather

Use Merriweather for:

  • H1 headings
  • H2 headings
  • H3 headings
  • Major page and section titles

Merriweather gives Winterfolk a well-established, editorial and historical appearance.

Montserrat

Use Montserrat for:

  • H4 headings
  • H5 headings
  • Navigation
  • Buttons
  • Form labels
  • Card headings
  • Short labels
  • Statistics
  • Calls to action

Montserrat provides a clean contrast with Merriweather.

Lato

Use Lato for:

  • Paragraphs
  • Lists
  • General website text
  • Descriptions
  • Captions
  • Contact information
  • Longer instructions

Lato is the main reading font.

Georgia

Use Georgia only for:

  • Featured quotations
  • Selected historical statements
  • Pull quotes

Georgia is not the regular heading or paragraph font.

Font Fallbacks

font-family: "Merriweather", Georgia, serif;
font-family: "Montserrat", Arial, sans-serif;
font-family: "Lato", Arial, sans-serif;

Brand Colour Palette

Main Colours

Colour Hex Code Main Use
Main Navy #0D2B45 H1, dark sections, footer and overlays
Deep Blue #14324A H2 headings and important text
Medium Blue #2D5D8A H3 headings and secondary accents
Winterfolk Blue #17375E Buttons, links, forms and major design elements
Sky Blue #A8D7F2 Light accents and selected backgrounds
Main Gold #E39B2D Buttons, accent headings and highlights
Divider Gold #C89B3C Standard horizontal dividers
Alternate Gold #D5A52F Quote borders and selected accents

Background and Neutral Colours

Colour Hex Code Main Use
White #FFFFFF Main backgrounds and text on dark areas
Soft White #F7FAFC Light section backgrounds
Light Blue #F5F9FC Alternate section backgrounds
Body Text #333333 Paragraphs and general text
Dark Text #1A1A1A Selected contact and form text
Medium Grey #555555 Table borders and secondary information
Blue-Grey Border #DCE6EE Cards, images and regular borders
Light Grey #C0C0C0 Shadows and minor details
Black #000000 Limited use in tables and email borders

Colour Rules

  • Navy and blue are the main Winterfolk colours.
  • Gold is an accent and should not dominate a page.
  • Use white or light backgrounds for longer reading sections.
  • Use white text on dark blue or navy backgrounds.
  • Maintain clear contrast between text and its background.
  • Do not use colour alone to communicate important information.

Heading Hierarchy

H1 — Main Page Title

Use H1 for the main page title or hero title. Each page should normally contain only one H1.

Hero H1

  • Font: Merriweather
  • Desktop size: 56px
  • Mobile size: 38px
  • Weight: 700
  • Line height: approximately 1.15
  • Colour: white
  • Alignment: centred
  • Subtle text shadow for readability

Content H1

  • Font: Merriweather
  • Desktop size: 46px–48px
  • Mobile size: approximately 36px
  • Weight: 700
  • Line height: approximately 1.15
  • Colour: Main Navy #0D2B45
  • Alignment: left

H2 — Major Section Heading

  • Font: Merriweather
  • Desktop size: 30px–32px
  • Mobile size: approximately 28px
  • Weight: 700
  • Line height: approximately 1.2
  • Colour: Deep Blue #14324A
  • Alignment: left
  • Placed below a gold divider

H3 — Subsection Heading

  • Font: Merriweather
  • Desktop size: 24px–26px
  • Mobile size: approximately 22px
  • Weight: 700
  • Line height: approximately 1.25
  • Colour: Medium Blue #2D5D8A
  • Alignment: left

H4 — Card or Information Heading

  • Font: Montserrat
  • Desktop size: approximately 22px
  • Mobile size: approximately 20px
  • Weight: 700
  • Line height: approximately 1.3
  • Colour: Main Navy #0D2B45
  • Alignment: left

Use H4 for cards, statistics, tab headings, venue names and smaller groups of information.

H5 — Minor or Accent Heading

  • Font: Montserrat
  • Standard size: approximately 18px
  • Weight: 700
  • Line height: approximately 1.35
  • Colour: Main Navy #0D2B45
  • Alignment: left

A special accent H5 may be 24px, uppercase and Main Gold #E39B2D. Do not use this treatment for long headings.

Heading Rules

  • Heading levels must reflect the organization of the content.
  • Do not select a heading only because of its size.
  • Avoid long passages written entirely in capital letters.
  • Use title case for short major headings.
  • Use sentence case for longer explanatory headings.
  • Do not repeat a heading in both a Divi module and an HTML module.

Paragraph and General Text Styling

  • Font: Lato
  • Size: 14px
  • Weight: 400
  • Line height: 1.25
  • Colour: #333333
  • Alignment: left
  • Bottom margin: approximately 10px

Paragraph Rules

  • Keep paragraphs reasonably short.
  • Do not stretch long paragraphs across the entire screen.
  • Do not centre long paragraphs.
  • Keep paragraph spacing consistent.
  • Indent all bulleted lists.
  • Use single spacing within bulleted lists.
  • Avoid manual line breaks used only to control layout.
  • Let the responsive design control line wrapping.

CSS and HTML Rules

  • Main styling belongs in the global Winterfolk CSS.
  • Individual section HTML should not assign fonts, font sizes or text colours.
  • Use clean H1–H5 and paragraph tags.
  • Use CSS classes for styles that appear more than once.
  • Use inline styling only for special cases, testing and email code.
  • Do not add HTML styling that conflicts with the global CSS.
  • Divi modules should not override global typography without a clear reason.

Gold Dividers

  • Width: 500px
  • Height: 3px
  • Colour: #C89B3C
  • Border: none
  • Clear space above and below
  • Placed at the top of a section
  • Positioned above the related heading
  • Left aligned with H1 and H2
  • Reduced to approximately 80% width on small screens

Hero Sections

  • Desktop height: 650px
  • Mobile height: approximately 500px
  • Full-width presentation
  • Background image set to cover
  • Main subject kept visible
  • Navy gradient overlay
  • White H1
  • Centred title
  • Subtle text shadow

Standard Hero CSS

.wf-hero {
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

Standard Navy Overlay

background:
  linear-gradient(
    to bottom,
    rgba(23, 55, 94, 0.30),
    rgba(13, 43, 69, 0.85)
  ),
  url("IMAGE-URL");

The photograph should remain visible. The overlay should make the text readable without making the entire image too dark.

Page Layout

  • Use full-width sections with contained content rows.
  • General row width should be approximately 1080px–1200px.
  • Use approximately 70px vertical padding for standard sections.
  • Use one, two or three columns according to the content.
  • Keep columns visually balanced.
  • Do not force several images into a narrow column.
  • Avoid building a long page entirely from centred, single-column sections.
  • Change layouts where appropriate on long pages.
  • Keep related text and images close together.
  • Stack columns on mobile devices.

Section Backgrounds

  • White #FFFFFF
  • Soft White #F7FAFC
  • Light Blue #F5F9FC
  • Sky Blue #A8D7F2
  • Winterfolk Blue #17375E
  • Main Navy #0D2B45
  • Photographs with navy overlays

Background Rules

  • Do not repeat the same background in several adjacent sections.
  • Alternate backgrounds to create clear page divisions.
  • Do not change backgrounds so frequently that the page looks patchy.
  • Use dark sections for emphasis.
  • Use light backgrounds for longer reading areas.
  • Use white text on navy and dark-blue sections.

Photography and Images

  • Use real Winterfolk artists, audiences and venues whenever possible.
  • Favour performance and audience photographs over posed photographs.
  • Use Toronto winter scenes where location is important.
  • Avoid Christmas and holiday imagery.
  • Avoid generic stock photographs when real festival images are available.
  • Avoid images that look obviously AI-generated.
  • Use fewer strong images instead of crowding a section.
  • Keep image proportions consistent within the same layout.
  • Use useful alternative text.

Image Styling

  • Standard corner radius: approximately 8px
  • Border: 1px solid #DCE6EE
  • Use a soft shadow where appropriate.
  • Avoid heavy outlines and dramatic shadows.

Official Logo

  • Use only the official Winterfolk logo.
  • Do not recreate it with another font.
  • Do not use an AI-generated replacement.
  • Do not stretch, squash, crop or distort it.
  • Do not change its colours.
  • Do not add unnecessary shadows or effects.
  • Maintain its original proportions.
  • Leave clear space around it.
  • Use a white or high-contrast version on dark backgrounds.
  • Do not place it directly over a busy photograph.
  • Align “XXV” carefully with the base of the logo.

Website Buttons

  • Font: Montserrat
  • Weight: 700
  • Gold background
  • Navy text
  • Approximately 10px rounded corners
  • Clear horizontal and vertical padding
  • Blue background with white text on hover

Button Wording

  • Buy Tickets
  • Apply to Perform
  • Volunteer
  • View the Schedule
  • Learn More

Do not use long sentences inside buttons.

Cards

  • A light background
  • A 1px blue-grey border
  • A restrained shadow
  • Consistent internal padding
  • Consistent height within a row
  • A Montserrat card heading
  • Left-aligned text
  • Approximately 8px–12px rounded corners

Use icons only when they help explain the information. Do not mix unrelated icon styles on the same page.

Featured Quotations

  • Font: Georgia
  • Size: approximately 22px
  • Weight: 700
  • Line height: 1.45
  • Colour: #123A5D
  • Left border: 4px solid #D5A52F
  • Left padding: 20px
  • Vertical margin: approximately 28px

Use this treatment sparingly.

Navigation

  • Montserrat font
  • Strong contrast
  • Clear spacing
  • Short menu labels
  • A visible hover state
  • A visible active-page state
  • Simple mobile navigation
  • A highlighted ticket or action button where appropriate

Important actions should be easy to find: Tickets, Schedule, Artists, Apply to Perform, Volunteer and Contact.

Footer

  • Official Winterfolk logo
  • Key navigation
  • Contact information
  • Social-media links
  • Copyright information
  • Non-profit information where appropriate
  • Sponsor recognition where appropriate

The footer should use Winterfolk colours and remain easy to read on mobile devices.

Special Components

Forms

  • Left-aligned labels and descriptions
  • Three columns on desktop where practical
  • One column on mobile
  • Dark-blue 1px field borders
  • White input backgrounds
  • Approximately 8px internal padding
  • Gold focus styling
  • Textareas with a minimum height of approximately 120px
  • Mobile stacking below approximately 768px

Form Submit Button

  • Winterfolk Blue background
  • White text
  • Gold border
  • Gold hover background
  • Navy or black hover text

Confirmation Emails

  • Maximum width of approximately 700px
  • Official Winterfolk logo at the top
  • Inline CSS for email compatibility
  • White and light-blue zebra-striped rows
  • Compact row heights
  • 1px black border where required
  • 12px rounded outer corners
  • Light grey drop shadow where supported
  • Clear contact information
  • Mobile-friendly table widths

Schedule Tables

  • Table centred on the page
  • Approximately 80% overall width
  • Time column approximately 10%
  • Stage columns approximately 22% each
  • Table text approximately 14px
  • Cell padding approximately 4px 6px
  • Border colour #555555
  • Horizontal scrolling on smaller screens

Contact Cards

  • Lato body text
  • Montserrat or established H3 role headings
  • Left-aligned content
  • Compact spacing
  • Approximately 12px grid gaps
  • No manual line breaks used to force alignment
  • Separate cards for separate contacts
  • Consistent card padding and height

Responsive and Accessible Design

Mobile Standards

  • Change multi-column layouts to one column.
  • Reduce heading sizes.
  • Reduce the hero height to approximately 500px.
  • Change the gold divider to approximately 80% width.
  • Make buttons large enough to tap.
  • Keep form fields full width.
  • Allow wide tables to scroll horizontally.
  • Check that hero text does not cover the main subject.
  • Keep regular text at 14px.

Accessibility

  • Maintain strong contrast between text and backgrounds.
  • Use a clear H1–H5 heading order.
  • Do not select headings only for their visual size.
  • Use meaningful alternative text for important images.
  • Do not embed important information only inside images.
  • Use proper labels for form fields.
  • Keep buttons and links large enough to operate easily.
  • Provide visible keyboard-focus indicators.
  • Do not communicate information through colour alone.
  • Use captions for important video content where available.
  • Clearly identify accessible seating and venue information.

Writing and Content

Brian Writing Style

  • Use plain, direct English.
  • Lead with the main point.
  • Keep sentences and paragraphs reasonably short.
  • Use few adjectives.
  • Use active language.
  • Include real facts, examples, names and numbers where useful.
  • Explain why something matters.
  • Be friendly and professional.
  • Show pride without boasting.
  • Avoid corporate jargon.
  • Avoid clichés.
  • Avoid exaggerated claims.
  • Avoid repeating the same point in different words.
  • Use warmth or mild humour when it fits.
  • Keep the focus on artists, audiences, community and live music.

The writing should sound like a real person speaking from experience. It should not sound like advertising copy or a formal press release unless a press release is specifically required.

Approved Names and Terminology

  • Winterfolk Blues & Roots Festival
  • Winterfolk Festival
  • Winterfolk XXV
  • Tranzac Club
  • The Annex
  • Connecting Generations Through Music
  • Emerging artists
  • Artist applications
  • Volunteers

Final Page Check

  • The official Winterfolk logo is used.
  • The logo has not been distorted or recoloured.
  • Merriweather is used for H1–H3.
  • Montserrat is used for H4–H5, navigation, labels and buttons.
  • Lato is used for paragraphs and general text.
  • Heading levels follow the content structure.
  • Paragraphs are left aligned and easy to read.
  • Colours follow the Winterfolk palette.
  • Gold is used as an accent.
  • The gold divider is 500px × 3px.
  • The divider is positioned above the heading.
  • The hero is 650px high on desktop.
  • The hero remains readable on mobile.
  • Section backgrounds provide enough variety.
  • Images are real, relevant and properly sized.
  • Columns are visually balanced.
  • Buttons follow the correct website or form style.
  • Forms stack properly on mobile.
  • Keyboard focus is visible.
  • Links use descriptive wording.
  • The page works on desktop, tablet and mobile.
  • The writing is clear, direct and recognizably Winterfolk.

Outstanding Items

  • Exact approved logo files
  • Minimum logo size
  • Exact logo clear-space measurement
  • Final footer design
  • Exact navigation measurements
  • Final sticky-header behaviour
  • Final social-media graphic templates
  • Final image-dimension chart for each page component

These remaining items do not change the main font, colour, heading, paragraph, divider, hero or layout standards in this guide.

Winterfolk XXV Rebranding Project Tracker

Done Area Task Status Notes
Brand Strategy Approve five brand words: Discovery, Community, Generations, Authentic, Inspiring Complete
Brand Strategy Approve tagline: Connecting Generations Through Music Complete
Brand Strategy Create updated mission statement Not Started
Logo Retain snowflake-as-guitar-body concept Complete
Logo Create XXV / 25th Year concept Complete
Logo Create final SVG master logo Not Started
Logo Create dark, light, monochrome, icon, favicon versions Not Started
Colours Lock final colour palette and HEX codes In Progress
Fonts Finalize web fonts and heading/body styles In Progress
Website Create Divi homepage wireframe In Progress
Website Build hero section Not Started
Website Build Discover New Voices section Not Started
Website Build Generations / Community sections Not Started
Website Build 25 Years timeline Not Started
Content Rewrite About / Mission / History pages Not Started
Content Create sponsor, volunteer, artist application pages Not Started
Social Media Create final FB event, FB group, Instagram, profile assets In Progress
Promotion Create launch announcement, press release, sponsor package Not Started

Overall Estimate at This Time

Area Estimated Completion Notes
Brand Identity 95%
Logo / Assets 75%
Website Planning 20%
Website Build 5%
Content Writing 10%
Social Media 20%
Overall Project 35%




Winterfolk XXV — Branding & Style Bible

Winterfolk XXV — Branding & Style Bible

Consolidated Master Reference

October 10, 2026

Source A: Winterfolk Branding Guide,
September 25, 2026
Source B: Winterfolk XXV Master CSS,
September 25, 2026

Authority and Scope

This document preserves the existing Winterfolk branding
principles and records the actual styling values declared
in the supplied website CSS.

For implemented CSS properties, the website stylesheet
is the authoritative reference.

Brand recommendations that are not defined in the CSS
remain design guidance rather than verified browser styles.
Divi theme settings, inline page CSS, plugin styles and
browser rendering may affect the final appearance.

No website CSS has been modified in preparing this guide.

1. Brand Identity and Logo

Winterfolk should feel professional, welcoming, authentic,
community-based and connected to live roots music.

The core brand message is:
Connecting Generations Through Music.

The visual identity should appeal to longtime Winterfolk
supporters while remaining relevant to younger artists
and audiences.

Official Logo Standards

  • Use the official Winterfolk logo.
  • Never redraw or distort the logo.
  • Never replace the official logo with an AI-generated substitute.
  • Preserve original proportions and contrast.
  • Maintain appropriate clear space around the logo.
  • Align the XXV anniversary designation carefully when included.

2. Colour System

The following colours are defined in the Winterfolk
website CSS. The colour names are descriptive; the
hexadecimal values are the actual CSS specifications.

Colour Hex Value Application
Dark Navy #0D2B45 Main header, content H1, buttons and dark accents
Deep Blue #14324A H2 headings, navigation submenus and section titles
Winterfolk Blue #17375E Form buttons, contact details and branded elements
Medium Blue #2D5D8A H3 headings, links and button hover backgrounds
Standard Gold #C89B3C Section dividers, form borders and focus treatments
Bright Gold #E39B2D Primary buttons, navigation hover and accent headings
Alternate Gold #D5A52F Quotation border accents
Page Background #F7FAFC Body background, page container and forms
Body Text #333333 Paragraphs, lists and general content
White #FFFFFF Hero text, dark sections, cards and form fields
Light Blue #EEF5FA Terms blocks, section gradients and supporting backgrounds
Pale Border #DCE6EE Image, card and form container borders
Light Navigation Text #F7FAFC Navigation links and top-header text
Active Navigation #A8D7F2 Current menu item

3. Typography

Winterfolk uses three principal typefaces:
Lato, Merriweather and Montserrat.

Font Families

Font Purpose Weights Loaded
Lato Body copy, paragraphs, form inputs and hero subheadings 400, 700
Merriweather H1, H2, H3 and hero headings 700, 900
Montserrat H4, H5, H6, navigation, buttons and form labels 600, 700, 800
Georgia Featured quotations and serif fallback Browser/system font

Heading and Body Typography

Element Font Desktop Mobile Weight Line Height Colour
Body / Paragraphs Lato 18px 17px 400 1.6 #333333
H1 Merriweather 48px 36px 700 1.15 #0D2B45
H2 Merriweather 32px 28px 700 1.2 #14324A
H3 Merriweather 26px 22px 700 1.25 #2D5D8A
H4 Montserrat 22px 20px 700 1.3 #0D2B45
H5 Montserrat 18px 17px 700 1.35 #0D2B45
H6 Montserrat 16px 16px 700 1.4 #0D2B45
Hero H1 Merriweather 56px 38px 700 1.15 #FFFFFF
Hero Subheading Lato 32px 24px Inherited 1.3 #FFFFFF
Accent Heading Montserrat 24px No mobile override 700 1.3 #E39B2D
Editorial Introduction Lato 22px 19px Inherited 1.6 #333333
Navigation Montserrat 14px No mobile override 700 Inherited #F7FAFC
List Items Lato 14px 14px Inherited 1.2 #333333
Featured Quote Georgia 22px No mobile override 700 1.45 #123A5D
Form Labels Montserrat 18px 16px 700 1.3 #0D2B45
Form Inputs Lato 16px 16px Inherited Inherited #333333
Form Help Text Lato 14px 14px 400 1.2 #000000

Content headings are left-aligned by default.
Hero headings are centred and white.

The hero H1 uses a text shadow of
2px 2px 10px rgba(0,0,0,0.35).


Part 1: Document structure, branding, colours and typography





Winterfolk XXV — Branding & Style Bible

Winterfolk XXV — Branding & Style Bible

Consolidated Master Reference

October 10, 2026

Source A: Winterfolk Branding Guide,
September 25, 2026
Source B: Winterfolk XXV Master CSS,
September 25, 2026

Authority and Scope

This document preserves the existing Winterfolk branding
principles and records the actual styling values declared
in the supplied website CSS.

For implemented CSS properties, the website stylesheet
is the authoritative reference.

Brand recommendations that are not defined in the CSS
remain design guidance rather than verified browser styles.
Divi theme settings, inline page CSS, plugin styles and
browser rendering may affect the final appearance.

No website CSS has been modified in preparing this guide.

1. Brand Identity and Logo

Winterfolk should feel professional, welcoming, authentic,
community-based and connected to live roots music.

The core brand message is:
Connecting Generations Through Music.

The visual identity should appeal to longtime Winterfolk
supporters while remaining relevant to younger artists
and audiences.

Official Logo Standards

  • Use the official Winterfolk logo.
  • Never redraw or distort the logo.
  • Never replace the official logo with an AI-generated substitute.
  • Preserve original proportions and contrast.
  • Maintain appropriate clear space around the logo.
  • Align the XXV anniversary designation carefully when included.

2. Colour System

The following colours are defined in the Winterfolk
website CSS. The colour names are descriptive; the
hexadecimal values are the actual CSS specifications.

Colour Hex Value Application
Dark Navy #0D2B45 Main header, content H1, buttons and dark accents
Deep Blue #14324A H2 headings, navigation submenus and section titles
Winterfolk Blue #17375E Form buttons, contact details and branded elements
Medium Blue #2D5D8A H3 headings, links and button hover backgrounds
Standard Gold #C89B3C Section dividers, form borders and focus treatments
Bright Gold #E39B2D Primary buttons, navigation hover and accent headings
Alternate Gold #D5A52F Quotation border accents
Page Background #F7FAFC Body background, page container and forms
Body Text #333333 Paragraphs, lists and general content
White #FFFFFF Hero text, dark sections, cards and form fields
Light Blue #EEF5FA Terms blocks, section gradients and supporting backgrounds
Pale Border #DCE6EE Image, card and form container borders
Light Navigation Text #F7FAFC Navigation links and top-header text
Active Navigation #A8D7F2 Current menu item

3. Typography

Winterfolk uses three principal typefaces:
Lato, Merriweather and Montserrat.

Font Families

Font Purpose Weights Loaded
Lato Body copy, paragraphs, form inputs and hero subheadings 400, 700
Merriweather H1, H2, H3 and hero headings 700, 900
Montserrat H4, H5, H6, navigation, buttons and form labels 600, 700, 800
Georgia Featured quotations and serif fallback Browser/system font

Heading and Body Typography

Element Font Desktop Mobile Weight Line Height Colour
Body / Paragraphs Lato 18px 17px 400 1.6 #333333
H1 Merriweather 48px 36px 700 1.15 #0D2B45
H2 Merriweather 32px 28px 700 1.2 #14324A
H3 Merriweather 26px 22px 700 1.25 #2D5D8A
H4 Montserrat 22px 20px 700 1.3 #0D2B45
H5 Montserrat 18px 17px 700 1.35 #0D2B45
H6 Montserrat 16px 16px 700 1.4 #0D2B45
Hero H1 Merriweather 56px 38px 700 1.15 #FFFFFF
Hero Subheading Lato 32px 24px Inherited 1.3 #FFFFFF
Accent Heading Montserrat 24px No mobile override 700 1.3 #E39B2D
Editorial Introduction Lato 22px 19px Inherited 1.6 #333333
Navigation Montserrat 14px No mobile override 700 Inherited #F7FAFC
List Items Lato 14px 14px Inherited 1.2 #333333
Featured Quote Georgia 22px No mobile override 700 1.45 #123A5D
Form Labels Montserrat 18px 16px 700 1.3 #0D2B45
Form Inputs Lato 16px 16px Inherited Inherited #333333
Form Help Text Lato 14px 14px 400 1.2 #000000

Content headings are left-aligned by default.
Hero headings are centred and white.

The hero H1 uses a text shadow of
2px 2px 10px rgba(0,0,0,0.35).


Part 2 — Layout, Spacing, Hero Banners, Dividers and ComponentsPart 2

4. Layout, Dimensions and Spacing

Winterfolk uses consistent spacing, clearly defined
content areas, and a visual hierarchy that separates
headings, text, images and interactive elements.

4.1 Standard Spacing

Element Specification Notes
Paragraph bottom margin 18px Standard website paragraphs
H1 bottom margin 24px Content headings
H2 bottom margin 20px Section headings
H3 bottom margin 20px Subsection headings
H4 bottom margin 12px Smaller headings
H5 bottom margin 10px Smaller headings
H6 bottom margin 8px Smallest headings
List left padding 56px desktop / 40px mobile Applies to standard content lists
List item left padding 5px Additional spacing after list markers
Editorial introduction bottom margin 40px Separates introduction from following content

4.2 Content Widths

The existing Branding Guide recommends content rows
approximately 1080px to 1200px wide.

These widths are design recommendations, not universal
rules enforced by the supplied Master CSS.
Actual row widths may be controlled through Divi.

The editorial introduction class uses a maximum
width of 900px.

.wf-intro-text {
  max-width: 900px;
  margin-bottom: 40px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.6;
  color: #333333;
}

4.3 Section Spacing

The original Branding Guide recommends generous
vertical spacing, with approximately 70px of padding
above and below major content sections.

This is a recommended design convention rather
than a globally enforced declaration in the supplied CSS.

4.4 Full-Width Heart Section

The Winterfolk Heart Section extends across the
viewport and uses a pale-blue vertical gradient.

Property Desktop Mobile
Width 100vw 100vw
Padding 65px 40px 45px 22px
Inner grid padding 0 25px 0
Background Gradient: #EEF5FA → #F7FAFC → #E8F1F8

5. Hero Banner Standards

Hero banners provide the principal visual introduction
to Winterfolk website pages.

5.1 Standard Hero Dimensions

Property Desktop Mobile
Minimum height 650px 500px
Background size Cover Cover
Background position Center Center
Home hero position Center 65% center
Overflow Hidden Hidden

The 650px desktop and 500px mobile measurements
are minimum heights, not fixed heights.

5.2 Hero CSS Classes

.wf-hero-standard,
.wf-home-hero,
#winterfolk-header,
.et_pb_fullwidth_header.wf-hero-standard {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

5.3 Hero Overlay

The standard overlay creates a gradient from a
semi-transparent Winterfolk blue at the top to a
darker navy at the bottom.

.wf-hero-standard:before,
#winterfolk-header:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(23, 55, 94, 0.30),
    rgba(13, 43, 69, 0.85)
  );
  pointer-events: none;
}

5.4 Hero Typography

Element Desktop Mobile
Hero H1 56px 38px
Hero subheading 32px 24px
H1 font Merriweather, weight 700
Subheading font Lato
Text colour #FFFFFF
Alignment Centered
H1 text shadow 2px 2px 10px rgba(0,0,0,0.35)

5.5 Hero Photography

  • Use authentic photographs of Winterfolk artists and performances.
  • Maintain legible text over photographic backgrounds.
  • Preserve important subjects when cropping for mobile.
  • Toronto winter imagery is appropriate where relevant.
  • Avoid Christmas or holiday-themed imagery.
  • Use the official Winterfolk logo without alteration.

6. Standard Gold Divider

The gold divider is a recurring visual element used
to separate major content areas and introduce headings.

Property Specification
CSS class .wf-gold-divider
Width 500px
Maximum width 100%
Height 3px
Colour #C89B3C
Top margin 34px
Bottom margin 20px
Default alignment Left
Mobile width 80% 
.wf-gold-divider {
  display: block;
  width: 500px;
  max-width: 100%;
  height: 3px;
  margin-top: 34px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: 0;
  padding: 0;
  border: 0;
  background-color: #

 

Part 3 — Contact Tables, Quotations, Accessibility, Mobile Standards and CSS Reconciliation

11. Contact Page Tables

The Winterfolk contact page uses a structured
three-column table on desktop screens.
On mobile devices, the table changes to a
vertically stacked layout.

11.1 Desktop Contact Table

Property Specification
CSS class .wf-contacts
Table width 100%
Border collapse Collapse
Row divider 1px solid #D8D8D8
Cell padding 16px 14px
Default cell font size 22px
Vertical alignment Middle

11.2 Column Dimensions

Column Width Typography Alignment
First column 45% 22px, weight 700, #17375E Left
Second column 22% 24px, weight 700, #333333 Left
Third column 33% Links: 21px, weight 700, #17375E Right

11.3 Contact Icons

  • Icon container width: 52px
  • Right margin: 18px
  • Font size: 24px
  • Text alignment: center

11.4 Contact Links

Contact email links use Winterfolk blue
without an underline by default.

  • Normal colour: #17375E
  • Font size: 21px
  • Font weight: 700
  • Hover colour: #C89B3C
  • Hover decoration: underline

11.5 Tablet and Mobile Behaviour

At screen widths of 980px or less,
contact table text sizes are reduced.

At screen widths of 768px or less,
the contact table, rows and cells
become block elements.

Element Tablet ≤980px Mobile ≤768px
General cells 18px 17px
Second column 20px 17px
Contact links 18px 17px
Icon width 52px 36px
Icon size 24px 19px
Icon right margin 18px 8px
Row padding Default 16px 0
Cell padding 16px 14px 4px 0

12. Featured Quotations

Winterfolk featured quotations use
Georgia serif typography with a
gold vertical accent.

Property Specification
Selectors blockquote, .wf-pullquote
Font family Georgia, serif
Font size 22px
Font weight 700
Font style Normal
Line height 1.45
Text colour #123A5D
Left border 4px solid #D5A52F
Left padding 20px
Margins 28px 0

12.1 Quotation CSS

blockquote,
.wf-pullquote {
  margin: 28px 0;
  padding-left: 20px;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.45;
  color: #123A5D;
  border-left: 4px solid #D5A52F;
}

13. Accessibility and Keyboard Navigation

The Winterfolk stylesheet defines visible
focus treatments for links

Part 4 — Complete CSS Declaration Reference (Rules 1–17)

19. Complete CSS Declaration Reference

This section documents the CSS selectors and declarations
from the Winterfolk XXV Master CSS dated
September 25, 2026.

The rules are presented in their original source order.
They are displayed for reference and are not intended
to replace the active website stylesheet.

Declarations marked !important retain that designation.

Rule 1 — HTML Document

html {
  scroll-behavior: smooth;
}

Rule 2 — Body

body {
  margin: 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #333333;
  background-color: #F7FAFC;
  text-align: left;
}

Rule 3 — Page Container

#page-container {
  background-color: #F7FAFC;
}

Rule 4 — Paragraphs

p,
.et_pb_text p,
.entry-content p {
  margin-top: 0;
  margin-bottom: 18px;
  padding: 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #333333;
  text-align: left;
  background: transparent;
}

Rule 5 — White Text Utility Classes

.bodyw,
.pw,
.wf-white-text,
.wf-white-text p {
  color: #FFFFFF !important;
}

Rule 6 — Content Lists

.entry-content ul,
.et_pb_text ul,
.wf-content-list {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 18px;
  margin-left: 0;
  padding-left: 56px;
  list-style-position: outside;
}

Rule 7 — Nested Content Lists

.entry-content ul ul,
.et_pb_text ul ul,
.wf-content-list ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 56px;
}

Rule 8 — List Items

.entry-content li,
.et_pb_text li,
.wf-content-list li {
  margin: 0;
  padding: 0 0 0 5px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #333333;
}

Rule 9 — Heading Font Family H1–H3

h1,
h2,
h3,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
  font-family: "Merriweather", Georgia, serif !important;
  font-weight: 700 !important;
  text-shadow: none;
}

Rule 10 — Heading Font Family H4–H6

h4,
h5,
h6,
.et_pb_text h4,
.et_pb_text h5,
.et_pb_text h6,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 700 !important;
  text-shadow: none;
}

Rule 11 — H1 Headings

h1,
.et_pb_text h1,
.entry-content h1 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 48px !important;
  line-height: 1.15 !important;
  color: #0D2B45

 

Part 5 — Complete CSS Declaration Reference (Rules 18–36)

Rule 18 — Dark Section Text

.wf-dark-section,
.wf-dark-section p,
.wf-dark-section li,
.wf-dark-section h1,
.wf-dark-section h2,
.wf-dark-section h3,
.wf-dark-section h4,
.wf-dark-section h5,
.wf-dark-section h6 {
  color: #FFFFFF !important;
}

Rule 19 — Gold Divider

.wf-gold-divider {
  display: block;
  width: 500px;
  max-width: 100%;
  height: 3px;
  margin-top: 34px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: 0;
  padding: 0;
  border: 0;
  background-color: #C89B3C;
}

Rule 20 — Content Links

.entry-content a,
.et_pb_text a {
  color: #2D5D8A;
  font-weight: 700;
  text-decoration: underline;
}

Rule 21 — Content Link Hover

.entry-content a:hover,
.et_pb_text a:hover {
  color: #E39B2D;
}

Rule 22 — Content Link Focus

.entry-content a:focus,
.et_pb_text a:focus {
  outline: 3px solid #E39B2D;
  outline-offset: 3px;
}

Rule 23 — Primary Buttons

.et_pb_button,
a.wf-button,
button,
input[type="submit"] {
  display: inline-block;
  padding: 12px 24px;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 800 !important;
  color: #0D2B45 !important;
  background-color: #E39B2D;
  border: 0;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
}

Rule 24 — Primary Button Hover

.et_pb_button:hover,
a.wf-button:hover,
button:hover,
input[type="submit"]:hover {
  color: #FFFFFF !important;
  background-color: #2D5D8A;
}

Rule 25 — Primary Button Focus

.et_pb_button:focus,
a.wf-button:focus,
button:focus,
input[type="submit"]:focus {
  outline: 3px solid #C89B3C;
  outline-offset: 3px;
}

Rule 26 — Main Header Background

#main-header,
#main-header.et-fixed-header,
.et-fixed-header {
  background-color: #0D2B45 !important;
}

Rule 27 — Top Header Background

#top-header,
#top-header.et-fixed-header,
.et_fixed_nav #page-container .et-fixed-header#top-header {
  background-color: #0D2B45 !important;
}

Rule 28 — Top Header Text

#top-header,
#top-header a,
#et-info,
#et-info a,
#et-secondary-nav li a {
  color: #F7FAFC !important;
}

Rule 29 — Top Header Link Hover

#top-header a:hover,
#et-info a:hover,
#et-secondary-nav li a:hover {
  color: #E39B2D !important;
}

Rule 30 — Main Navigation Links

#top-menu li a,
.et-fixed-header #top-menu li a {
  padding-right: 8px;
  padding-left: 8px;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #F7FAFC !important;
  letter-spacing: 0.3px;
  opacity: 1 !important;
}

Rule 31 — Main Navigation Hover

#top-menu li a:hover,
.et-fixed-header #top-menu li a:hover {
  color: #E39B2D !important;
}

Rule 32 — Current Navigation Item

#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a {
  color: #A8D7F2 !important;
}

Rule 33 — Navigation Submenu

.nav li ul {
  width: 320px;
  background-color: #14324A !important;
  border-top: 3px solid #E39B2D;
}

Rule 34 — Submenu List Items

.nav li ul li {
  width: 100%;
}

Rule 35 — Submenu Links

.nav li ul li a {
  width: 100%;
  padding: 10px 20px;
  font-size: 14px !important;
  color: #F7FAFC !important;
}

Rule 36 — Submenu Link Hover

.nav li ul li a:hover {
  color: #FFFFFF !important;
  background-color: #2D5D8A !important;
}


Part 6 — Complete CSS Declaration Reference (Rules 37–53)

Rule 37 — Standard Hero Containers

.wf-hero-standard,
.wf-home-hero,
#winterfolk-header,
.et_pb_fullwidth_header.wf-hero-standard {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

Rule 38 — Hero Gradient Overlay

.wf-hero-standard:before,
#winterfolk-header:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(
      to bottom,
      rgba(23, 55, 94, 0.30),
      rgba(13, 43, 69, 0.85)
    );
  pointer-events: none;
}

Rule 39 — Hero Content Stacking

.wf-hero-standard > *,
#winterfolk-header > *,
.wf-hero-standard .et_pb_fullwidth_header_container,
.wf-hero-standard .header-content-container,
.wf-hero-standard .header-content,
#winterfolk-header .et_pb_fullwidth_header_container,
#winterfolk-header .header-content-container,
#winterfolk-header .header-content {
  position: relative;
  z-index: 2;
}

Rule 40 — Hero H1 Typography

.et_pb_fullwidth_header h1,
.et_pb_fullwidth_header .header-content h1,
.wf-hero-standard h1,
#winterfolk-header h1 {
  margin-bottom: 20px;
  font-family: "Merriweather", Georgia, serif !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #FFFFFF !important;
  text-align: center !important;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.35) !important;
}

Rule 41 — Hero Subheading Typography

.et_pb_fullwidth_header .et_pb_fullwidth_header_subhead,
.wf-hero-standard .et_pb_fullwidth_header_subhead,
#winterfolk-header .et_pb_fullwidth_header_subhead {
  font-family: "Lato", Arial, sans-serif !important;
  font-size: 32px !important;
  line-height: 1.3 !important;
  color: #FFFFFF !important;
  text-align: center !important;
}

Rule 42 — Content Images

.wf-content-image img,
.et_pb_image.wf-content-image img {
  display: block;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid #DCE6EE;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(13, 43, 69, 0.12);
}

Rule 43 — Centred Images

.wf-centred-image img,
img.wf-centred-image {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

Rule 44 — Blockquotes and Pullquotes

blockquote,
.wf-pullquote {
  margin: 28px 0;
  padding-left: 20px;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.45;
  color: #123A5D;
  border-left: 4px solid #D5A52F;
}

Rule 45 — Full-Width Heart Section

.wf-heart-section {
  width: 100vw !important;
  max-width: none !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-left: calc(-50vw + 50%) !important;
  padding: 65px 40px !important;
  box-sizing: border-box;
  background: linear-gradient(
      180deg,
      #EEF5FA 0%,
      #F7FAFC 45%,
      #E8F1F8 100%
    ) !important;
}

Rule 46 — Heart Section Grid

.wf-heart-grid {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 25px;
}

Rule 47 — Editorial Introduction Text

.wf-intro-text {
  max-width: 900px;
  margin-bottom: 40px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.6;
  color: #333333;
}

Rule 48 — Information Cards

.wf-info-card {
  padding: 30px;
  background-color: #FFFFFF;
  border: 1px solid #DCE6EE;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(13, 43, 69, 0.10);
}

Rule 49 — Information Card H3 Headings

.wf-info-card h3 {
  margin-top: 0;
  color: #14324A !important;
}

Rule 50 — Visitor Card H3 Headings

.visitor-cards h3 {
  color: #17375E !important;
}

Rule 51 — Visitor Card Icons

.visitor-cards i {
  margin-right: 8px;
  color: #17375E;
}

Rule 52 — Visitor Card Paragraphs

.visitor-cards p {
  margin-bottom: 10px;
  line-height: 1.35;
}

Rule 53 — Visitor Card Horizontal Rules

.visitor-cards hr {
  margin: 10px 0 16px;
  border: 0;
  border-top: 1px solid #DCE6EE;
}


Part 7 — Complete CSS Declaration Reference (Rules 54–75)

Rule 54 — Contact Table

.wf-contacts {
  width: 100%;
  border-collapse: collapse;
}

Rule 55 — Contact Table Row Dividers

.wf-contacts tr {
  border-bottom: 1px solid #D8D8D8;
}

Rule 56 — Contact Table Cells

.wf-contacts td {
  padding: 16px 14px;
  font-size: 22px;
  vertical-align: middle;
}

Rule 57 — Contact Table First Column

.wf-contacts td:first-child {
  width: 45%;
  font-weight: 700;
  color: #17375E;
  white-space: nowrap;
}

Rule 58 — Contact Icons

.wf-contacts td:first-child .wf-icon {
  display: inline-block;
  width: 52px;
  margin-right: 18px;
  font-size: 24px;
  text-align: center;
}

Rule 59 — Contact Table Second Column

.wf-contacts td:nth-child(2) {
  width: 22%;
  font-size: 24px;
  font-weight: 700;
  color: #333333;
  white-space: nowrap;
}

Rule 60 — Contact Table Third Column

.wf-contacts td:nth-child(3) {
  width: 33%;
  text-align: right;
}

Rule 61 — Contact Email Links

.wf-contacts td:nth-child(3) a,
.wf-email {
  font-size: 21px;
  font-weight: 700;
  color: #17375E;
  text-decoration: none;
}

Rule 62 — Contact Email Hover

.wf-contacts td:nth-child(3) a:hover,
.wf-email:hover {
  color: #C89B3C;
  text-decoration: underline;
}

Rule 63 — Form Containers

.wf-cf7-form,
.winterfolk-form {
  padding: 34px;
  font-family: "Lato", Arial, sans-serif;
  background-color: #F7FAFC;
  border: 1px solid #DCE6EE;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(13, 43, 69, 0.10);
}

Rule 64 — Form H3 Headings

.wf-cf7-form h3,
.winterfolk-form h3 {
  margin-bottom: 12px;
  font-family: "Merriweather", Georgia, serif !important;
  font-size: 34px !important;
  color: #0D2B45 !important;
}

Rule 65 — Form Section Titles

.wf-section-title {
  margin-top: 26px;
  margin-bottom: 4px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #14324A;
  text-transform: uppercase;
}

Rule 66 — Form Introduction

.wf-form-intro {
  margin-bottom: 25px;
  font-size: 18px;
  color: #333333;
}

Rule 67 — Form Grid Containers

.wf-form-grid,
.wf-form-grid-3,
.wf-form-grid-4 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-right: -9px;
  margin-bottom: 24px;
  margin-left: -9px;
}

Rule 68 — Single-Column Form Fields

.wf-form-grid > .wf-field {
  width: calc(100% - 18px);
  margin-right: 9px;
  margin-left: 9px;
}

Rule 69 — Three-Column Form Fields

.wf-form-grid-3 > .wf-field {
  width: calc(33.333% - 18px);
  margin-right: 9px;
  margin-left: 9px;
}

Rule 70 — Four-Column Form Fields

.wf-form-grid-4 > .wf-field {
  width: calc(25% - 18px);
  margin-right: 9px;
  margin-left: 9px;
}

Rule 71 — Form Field Labels

.wf-field label,
.wf-cf7-form label,
.winterfolk-form label {
  display: block;
  margin-bottom: 3px;
  padding-bottom: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #0D2B45;
}

Rule 72 — Form Input Fields

.wf-cf7-form input[type="text"],
.wf-cf7-form input[type="email"],
.wf-cf7-form input[type="tel"],
.wf-cf7-form input[type="url"],
.wf-cf7-form input[type="number"],
.wf-cf7-form select,
.wf-cf7-form textarea,
.winterfolk-form input[type="text"],
.winterfolk-form input[type="email"],
.winterfolk-form input[type="tel"],
.winterfolk-form input[type="url"],
.winterfolk-form input[type="number"],
.winterfolk-form select,
.winterfolk-form textarea {
  width: 100%;
  margin-top: 0;
  padding: 12px 13px;
  box-sizing: border-box;
  font-family: "Lato", Arial, sans-serif;
  font-size: 16px;
  color: #333333;
  background-color: #FFFFFF;
  border: 1px solid #17375E;
  border-radius: 12px;
}

Rule 73 — Form Textareas

.wf-cf7-form textarea,
.winterfolk-form textarea {
  min-height: 120px;
  resize: vertical;
}

Rule 74 — Form Field Focus

.wf-cf7-form input:focus,
.wf-cf7-form select:focus,
.wf-cf7-form textarea:focus,
.winterfolk-form input:focus,
.winterfolk-form select:focus,
.winterfolk-form textarea:focus {
  outline: none !important;
  border-color: #C89B3C !important;
  box-shadow: 0 0 0 2px rgba(200, 155, 60, 0.22) !important;
}

Rule 75 — Checkbox Blocks

.wf-checkbox-block {
  margin-bottom: 24px;
  padding: 16px 18px;
  background-color: #FFFFFF;
  border: 1px solid #DCE6EE;
  border-radius: 10px;
}


Part 8 — Remaining form rules, responsive CSS and final website overrides.

Rule 76 — Checkbox List Items

.wf-checkbox-block .wpcf7-list-item {
  display: inline-block;
  margin: 6px 18px 6px 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #333333;
}

Rule 77 — Small Supporting Text

.wf-small {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.2;
  color: #666666;
}

Rule 78 — Form Help Text

.winterfolk-form .wf-help-text,
.wf-cf7-form .wf-help-text {
  display: block;
  margin: 2px 0 3px;
  padding: 0;
  font-family: "Lato", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #000000 !important;
  text-align: left !important;
}

Rule 79 — Terms and Conditions Block

.wf-terms {
  margin: 26px 0;
  padding: 18px 22px;
  background-color: #EEF5FA;
  border-left: 4px solid #E39B2D;
}

Rule 80 — Terms Block Heading

.wf-terms h4 {
  margin-top: 0;
  color: #0D2B45 !important;
}

Rule 81 — Submit Button Wrapper

.wf-submit-wrap {
  margin-top: 20px;
}

Rule 82 — Form Submit Buttons

.wf-cf7-form input[type="submit"],
.winterfolk-form input[type="submit"] {
  padding: 14px 28px;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF !important;
  background-color: #17375E !important;
  border: 2px solid #C89B3C;
  border-radius: 12px;
  cursor: pointer;
}

Rule 83 — Form Submit Button Hover

.wf-cf7-form input[type="submit"]:hover,
.winterfolk-form input[type="submit"]:hover {
  color: #000000 !important;
  background-color: #C89B3C !important;
}

Rule 84 — Form Notes

.wf-form-note {
  margin-top: 18px;
  font-size: 15px;
  color: #555555;
}

Rule 85 — Form Confirmation Text

.wf-thanks {
  margin-top: 15px;
  color: #0D2B45;
}

Rule 86 — Keyboard Accessibility

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid #E39B2D;
  outline-offset: 3px;
}

20. Tablet Responsive Rules

The following rules apply at screen widths
of 980px or less.

Rule 87 — Four-Column Form Grid on Tablets

@media only screen and (max-width: 980px) {
  .wf-form-grid-4 > .wf-field {
    width: calc(50% - 18px);
  }
}

Rule 88 — Contact Table Text on Tablets

@media only screen and (max-width: 980px) {
  .wf-contacts td {
    font-size: 18px;
  }
}

Rule 89 — Contact Table Second Column on Tablets

@media only screen and (max-width: 980px) {
  .wf-contacts td:nth-child(2) {
    font-size: 20px;
  }
}

Rule 90 — Contact Links on Tablets

@media only screen and (max-width: 980px) {
  .wf-contacts td:nth-child(3) a,
  .wf-email {
    font-size: 18px;
  }
}

21. Responsive Design Implementation

Rule 91 — Tablet Breakpoint Summary

At 980px and below, four-column forms change
to two columns. Contact table typography
is reduced to fit narrower screens.

Component Desktop Tablet
Four-column form 4 columns 2 columns
Contact table cells 22px 18px
Contact second column 24px 20px
Contact email links 21px 18px

Rule 92 — Tablet Media Query Structure

The four tablet declarations above belong
to a single media-query block in the
original Winterfolk Master CSS. 

@media only screen and (max-width: 980px) {

  .wf-form-grid-4 > .wf-field {
    width: calc(50% - 18px);
  }

  .wf-contacts td {
    font-size: 18px;
  }

  .wf-contacts td:nth-child(2) {
    font-size: 20px;
  }

  .wf-contacts td:nth-child(3) a,
  .wf-email {
    font-size: 18px;
  }

}


Part 9 — Mobile CSS Reference (Rules 93–118)

22. Mobile Typography and Layout

The following CSS declarations apply at screen widths
of 768px or less. They control mobile typography,
list indentation, dividers, hero banners, forms,
information cards and contact tables.

Rule 93 — Mobile Body and Paragraph Text

@media only screen and (max-width: 768px) {
  body,
  p,
  .et_pb_text p,
  .entry-content p {
    font-size: 17px;
  }
}

Rule 94 — Mobile H1

@media only screen and (max-width: 768px) {
  h1,
  .et_pb_text h1,
  .entry-content h1 {
    font-size: 36px !important;
  }
}

Rule 95 — Mobile H2

@media only screen and (max-width: 768px) {
  h2,
  .et_pb_text h2,
  .entry-content h2 {
    font-size: 28px !important;
  }
}

Rule 96 — Mobile H3

@media only screen and (max-width: 768px) {
  h3,
  .et_pb_text h3,
  .entry-content h3 {
    font-size: 22px !important;
  }
}

Rule 97 — Mobile H4

@media only screen and (max-width: 768px) {
  h4,
  .et_pb_text h4,
  .entry-content h4 {
    font-size: 20px !important;
  }
}

Rule 98 — Mobile H5

@media only screen and (max-width: 768px) {
  h5,
  .et_pb_text h5,
  .entry-content h5 {
    font-size: 17px !important;
  }
}

Rule 99 — Mobile H6

@media only screen and (max-width: 768px) {
  h6,
  .et_pb_text h6,
  .entry-content h6 {
    font-size: 16px !important;
  }
}

Rule 100 — Mobile Content Lists

@media only screen and (max-width: 768px) {
  .entry-content ul,
  .et_pb_text ul,
  .wf-content-list {
    padding-left: 40px;
  }
}

Rule 101 — Mobile Nested Lists

@media only screen and (max-width: 768px) {
  .entry-content ul ul,
  .et_pb_text ul ul,
  .wf-content-list ul {
    padding-left: 40px;
  }
}

Rule 102 — Mobile List Items

@media only screen and (max-width: 768px) {
  .entry-content li,
  .et_pb_text li,
  .wf-content-list li {
    font-size: 14px;
    line-height: 1.2;
  }
}

Rule 103 — Mobile Gold Divider

@media only screen and (max-width: 768px) {
  .wf-gold-divider {
    width: 80%;
    margin-right: auto;
    margin-left: 0;
  }
}

23. Mobile Hero Banner Rules

Rule 104 — Mobile Hero Minimum Height

@media only screen and (max-width: 768px) {
  .wf-hero-standard,
  .wf-home-hero,
  #winterfolk-header,
  .et_pb_fullwidth_header.wf-hero-standard {
    min-height: 500px;
  }
}

Rule 105 — Mobile Home Hero Position

@media only screen and (max-width: 768px) {
  .wf-home-hero {
    background-position: 65% center !important;
  }
}

Rule 106 — Mobile Hero H1

@media only screen and (max-width: 768px) {
  .et_pb_fullwidth_header h1,
  .et_pb_fullwidth_header .header-content h1,
  .wf-hero-standard h1,
  #winterfolk-header h1 {
    font-size: 38px !important;
  }
}

Rule 107 — Mobile Hero Subheading

@media only screen and (max-width: 768px) {
  .et_pb_fullwidth_header .et_pb_fullwidth_header_subhead,
  .wf-hero-standard .et_pb_fullwidth_header_subhead,
  #winterfolk-header .et_pb_fullwidth_header_subhead {
    font-size: 24px !important;
  }
}

24. Mobile Form Rules

Rule 108 — Mobile Form Grid Margins

@media only screen and (max-width: 768px) {
  .wf-form-grid,
  .wf-form-grid-3,
  .wf-form-grid-4 {
    margin-right: 0;
    margin-left: 0;
  }
}

Rule 109 — Mobile Form Fields

@media only screen and (max-width: 768px) {
  .wf-form-grid > .wf-field,
  .wf-form-grid-3 > .wf-field,
  .wf-form-grid-4 > .wf-field {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

Rule 110 — Mobile Form Container Padding

@media only screen and (max-width: 768px) {
  .wf-cf7-form,
  .winterfolk-form {
    padding: 24px;
  }
}

Rule 111 — Mobile Form Headings

@media only screen and (max-width: 768px) {
  .wf-cf7-form h3,
  .winterfolk-form h3 {
    font-size: 28px !important;
  }
}

Rule 112 — Mobile Form Labels

@media only screen and (max-width: 768px) {
  .wf-field label,
  .wf-cf7-form label,
  .winterfolk-form label {
    font-size: 16px;
  }
}

25. Mobile Information Cards

Rule 113 — Mobile Introduction Text

@media only screen and (max-width: 768px) {
  .wf-intro-text {
    font-size: 19px;
  }
}

Rule 114 — Mobile Information Card Padding

@media only screen and (max-width: 768px) {
  .wf-info-card {
    padding: 24px;
  }
}

Rule 115 — Mobile Heart Section

@media only screen and (max-width: 768px) {
  .wf-heart-section {
    padding: 45px 22px !important;
  }
}

Rule 116 — Mobile Heart Grid

@media only screen and (max-width: 768px) {
  .wf-heart-grid {
    padding: 0;
  }
}

26. Mobile Contact Table

Rule 117 — Stacked Contact Table

@media only screen and (max-width: 768px) {
  .wf-contacts,
  .wf-contacts tbody,
  .wf-contacts tr,
  .wf-contacts td {
    display: block;
    width: 100%;
  }

  .wf-contacts tr {
    padding: 16px 0;
  }

  .wf-contacts td,
  .wf-contacts td:first-child,
  .wf-contacts td:nth-child(2),
  .wf-contacts td:nth-child(3) {
    width: 100%;
    padding: 4px 0;
    font-size: 17px;
    text-align: left;
    white-space: normal;
  }
}

Rule 118 — Mobile Contact Icons and Links

@media only screen and (max-width: 768px) {
  .wf-contacts td:first-child .wf-icon {
    width: 36px;
    margin-right: 8px;
    font-size: 19px;
  }

  .wf-contacts td:nth-child(3) a,
  .wf-email {
    font-size: 17px;
  }
}


Part 10 — Final Heading Overrides and Document Closing

 

27. Final Website Heading Overrides

The final section of the Winterfolk XXV Master CSS
contains heading overrides intended to establish
consistent colours, sizes and alignment throughout
the website.

These rules must be considered alongside the
earlier global heading declarations and the
specialized hero banner rules.

Rule 119 — Final Content H1 Colour and Alignment

h1,
.et_pb_text h1,
.entry-content h1 {
  color: #0D2B45 !important;
  text-align: left !important;
}

Rule 120 — Final Content H2 Colour and Alignment

h2,
.et_pb_text h2,
.entry-content h2 {
  color: #14324A !important;
  text-align: left !important;
}

Rule 121 — Final H1 Font Specification

h1,
.et_pb_text h1,
.entry-content h1 {
  font-family: "Merriweather", Georgia, serif !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

Rule 122 — Final H2 Font Specification

h2,
.et_pb_text h2,
.entry-content h2 {
  font-family: "Merriweather", Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

Rule 123 — Hero H1 Exception

.et_pb_fullwidth_header h1,
.et_pb_fullwidth_header .header-content h1,
.wf-hero-standard h1,
#winterfolk-header h1 {
  font-family: "Merriweather", Georgia, serif !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #FFFFFF !important;
  text-align: center !important;
  text-shadow: 2px 2px 10px
    rgba(0, 0, 0, 0.35) !important;
}

28. Final Mobile Heading Overrides

Rule 124 — Mobile Content H1

@media only screen and (max-width: 768px) {
  h1,
  .et_pb_text h1,
  .entry-content h1 {
    font-size: 36px !important;
  }
}

Rule 125 — Mobile Content H2

@media only screen and (max-width: 768px) {
  h2,
  .et_pb_text h2,
  .entry-content h2 {
    font-size: 28px !important;
  }
}

Rule 126 — Mobile Hero H1 Exception

@media only screen and (max-width: 768px) {
  .et_pb_fullwidth_header h1,
  .et_pb_fullwidth_header .header-content h1,
  .wf-hero-standard h1,
  #winterfolk-header h1 {
    font-size: 38px !important;
    color: #FFFFFF !important;
    text-align: center !important;
  }
}

29. CSS Reference Summary

The Winterfolk XXV Master CSS establishes a
consistent visual system based on three principal
typefaces, a navy-blue and gold colour palette,
defined hero banner dimensions, responsive
components and standardized interactive elements.

Category Established Standard
Primary typefaces Lato, Merriweather, Montserrat
Primary navy #0D2B45
Secondary navy #14324A
Medium blue #2D5D8A
Standard gold #C89B3C
Button gold #E39B2D
Page background #F7FAFC
Body text Lato, 18px, line height 1.6
H1 Merriweather, 48px desktop / 36px mobile
H2 Merriweather, 32px desktop / 28px mobile
Hero H1 Merriweather, 56px desktop / 38px mobile
Hero height 650px desktop / 500px mobile minimum
Gold divider 500px × 3px
Primary button Gold background, navy text, 10px radius
Form submit button Blue background, white text, gold border
Card radius 12px
Mobile breakpoint 768px
Tablet breakpoint 980px

30. Branding and Implementation Principles

The Winterfolk website should maintain a
consistent identity across all pages,
including the Home, About, Artists,
Visitor Information, Volunteer,
Contact and Schedule pages.

Future page designs should use the
established typography, colour system,
spacing conventions and hero banner standards
unless a specific design requirement
justifies an exception.

The official Winterfolk logo must remain
unaltered, and new graphics should
integrate with the existing website
rather than introduce unrelated visual styles.

The central brand message remains:
Connecting Generations Through Music.

31. Document Control

Document Winterfolk XXV — Branding & Style Bible
Reference Date October 10, 2026
Source Branding Guide September 25, 2026
Source Master CSS September 25, 2026
Purpose Reference for Winterfolk website design,
styling, branding and future development.
CSS Status Reference documentation only.
Does not replace the active website stylesheet.

End of Winterfolk XXV Branding & Style Bible.


Share This