Style Guide
Text Styles Heading
Heading 1
Bebas Neue Weights used: Regular (400)Letter-spacing: 0.02em · line-height: 0.95ers)
Heading 2
Bebas Neue Weights used: Regular (400)Letter-spacing: 0.02em · line-height: 0.95ers)
Text Styles Body
Body Text - Manrope 400
Body Text - Manrope 500
Body Text - Manrope 500
Body Text - Manrope 500
Body Text - Manrope 500
Color Palette
Background
#F4F7FC
Overall Site Background
Surface
#FFFFFF
Cards, Containers, Forms
Line
#D4DEED
Borders and dividers
Text
#10243F
Primary Text and Headings
Muted
#4F6382
Secondary Text, Paragraphs
Accent
#2F5F9F
Primary Buttons and Links
Accent Soft
#5F84BB
Kickers and Small Labels
Soft Blue
#EEF3FB
Kickers and Small Labels
Hero Overlay
#EEF3FB
Kickers and Small Labels
Primary (btn-book) — background #2F5F9F,white text, uppercase, letter-spacing 0.07em,radius 3px, padding ~12px 20px.Hover:background #254F86.
SEE SHOWS & EVENTSOutline (btn-outline) — border #2F5F9F, btext, transparent background. Light version(over hero): light border and text withtranslucent background
Rounded button (form & CTA) — same color but border-radius: 999px, padding ~12px 24px
KICKER (SECTION LABEL)
Uppercase text, ~12.5px, color #5F84BB, letter-spacing 0.15em, thin underline in the same hue at55% opacity. Appears above every section heading.
Cards
Standard border: 1px solid #D4DEED or #CDD9EA.
Radius: 4px onbasic cards, 12–22px onb
Padding: ~16–24px, scaling down on mobooking/footer bile.locks.Shadows: subtle, e.g. 0 14px 24px rgba(16,36,63,0.16) on the "About" panel.
Containers
This is some text inside of a div block.
Standard border: 1px solid #D4DEED or #CDD9EA.
Radius: 4px onbasic cards, 12–22px onb
Padding: ~16–24px, scaling down on mobooking/footer bile.locks.Shadows: subtle, e.g. 0 14px 24px rgba(16,36,63,0.16) on the "About" panel.
Containers
Fixed, centered, max-width 1180px, background rgba(255,255,255,0.96) with subtle
Logo: /the-miracle-logo2.svg (height ~56px desktop, 44px mobile).
Links: uppercase, 0.82rem, letter-spacing 0.08em, color #1D3B63.
"Book Your Event"button on the right (primary style).
Three columns: address, tickets, hours.
Columnbackground: vertical gradient #F4F8FF → #EEF4FD, border #D2DFF0, radius 14px.
Label: uppercase, color #5477A8, high letter-spacing.
Layout & Spacing
Max content width
1180px Inner sections are centered at this width.
Thehero and parallax span the full viewport
Vertical section padding~4.2rem (≈ 67px)Consistent spacing between sections;naturally reduces on mobile.
BreakpointsDesktop: > 980pxTablet: ≤ 980px (grids collapse to 1 column)Mobile: ≤ 760px (hamburger menu, single-column grids)
order radii usedCards & buttons: 3–4pxForm inputs: 12pxLargeblocks (booking, footer cols): 14–22pxRoundedbuttons (CTA): 999px
Text Link
