/*
* style.css
* Global styles for the Funky Jives website.
* Covers: CSS variables, reset, typography, utilities,
* buttons, header, navigation, and footer.
*
* Mobile-first: base styles target small screens.
* Larger screens are handled with min-width media queries
* at the bottom of this file (600px tablet, 1024px desktop).
*/
/* =============================================================
CSS Custom Properties (Design Tokens)
All colours, fonts, spacing, and radii live here so they
can be updated in one place and ripple across the whole site.
============================================================= */
:root {
/* --- Colours --- */
--color-primary: #d4457a; /* Raspberry pink — main brand colour */
--color-primary-dark: #b33568; /* Darker pink for hover/active states */
--color-secondary: #f7941d; /* Warm orange — accent colour */
--color-secondary-dark: #d97c0f; /* Darker orange for hover/active states */
--color-bg: #fffbf7; /* Warm off-white page background */
--color-bg-alt: #fef3e8; /* Light peach — alternate section background */
--color-text: #2c2c2c; /* Near-black for body text */
--color-text-muted: #666666; /* Muted grey for secondary/supporting text */
--color-border: #e8d8cc; /* Warm light border colour */
--color-white: #ffffff;
/* --- Typography --- */
/* Nunito loaded via Google Fonts in each HTML ; system fonts as fallback */
--font-base: 'Nunito', 'Trebuchet MS', Arial, sans-serif;
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-md: 1.125rem; /* 18px */
--font-size-lg: 1.375rem; /* 22px */
--font-size-xl: 1.75rem; /* 28px */
--font-size-2xl: 2.25rem; /* 36px */
--font-size-3xl: 3rem; /* 48px */
/* --- Spacing (used for padding and gaps) --- */
--space-xs: 0.5rem; /* 8px */
--space-sm: 1rem; /* 16px */
--space-md: 1.5rem; /* 24px */
--space-lg: 2rem; /* 32px */
--space-xl: 3rem; /* 48px */
--space-2xl: 5rem; /* 80px */
/* --- Layout --- */
--max-width: 1100px; /* Maximum content width */
--header-height: 80px; /* Fixed header height, used for nav dropdown offset */
/* --- Borders & Shadows --- */
--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 20px;
--radius-full: 9999px; /* Fully rounded — pill shapes and circles */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
/* --- Transitions --- */
--transition: 0.25s ease;
}
/* =============================================================
Base Reset & Box Model
============================================================= */
/* Apply border-box to everything so padding doesn't break layouts */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Smooth scrolling for any in-page anchor links */
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-base);
font-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-bg);
line-height: 1.6;
}
/* Remove bullet points from lists used in navigation and cards */
ul {
list-style: none;
}
/* Responsive images by default */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Strip default link underline and colour — individual components re-add as needed */
a {
color: inherit;
text-decoration: none;
}
/* =============================================================
Base Typography
============================================================= */
h1, h2, h3, h4 {
font-weight: 800;
line-height: 1.2;
color: var(--color-text);
}
/* Mobile heading sizes — scaled up in the tablet breakpoint below */
h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }
h4 { font-size: var(--font-size-base); }
p {
margin-bottom: var(--space-sm);
}
/* Avoid a trailing gap below the last paragraph inside any container */
p:last-child {
margin-bottom: 0;
}
/* =============================================================
Utility Classes
============================================================= */
/*
* .container
* Centres content and caps it at --max-width.
* Applied inside sections to keep content readable on wide screens.
*/
.container {
width: 100%;
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-sm);
padding-right: var(--space-sm);
}
/*
* .visually-hidden
* Hides content visually but keeps it accessible to screen readers.
* Use for labels that sighted users don't need but assistive tech does.
*/
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*
* .placeholder
* Development stand-in for real images or content that hasn't arrived yet.
* Remove and replace with the real asset when available.
*/
.placeholder {
background-color: var(--color-bg-alt);
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
font-style: italic;
}
/* =============================================================
Buttons
All button variants share the .btn base class.
============================================================= */
.btn {
display: inline-block;
padding: 0.75rem 1.75rem;
border-radius: var(--radius-full);
font-family: var(--font-base);
font-size: var(--font-size-base);
font-weight: 700;
cursor: pointer;
border: 2px solid transparent;
text-align: center;
white-space: nowrap;
transition:
background-color var(--transition),
color var(--transition),
border-color var(--transition),
transform var(--transition);
}
/* Subtle lift on hover/focus for all button variants */
.btn:hover,
.btn:focus-visible {
transform: translateY(-2px);
outline: none;
}
/* Primary — filled with brand colour, used on light backgrounds */
.btn--primary {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.btn--primary:hover,
.btn--primary:focus-visible {
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
/* Secondary — outline style, used on light backgrounds */
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
background-color: var(--color-primary);
color: var(--color-white);
}
/* Light — white filled, used on coloured/dark backgrounds */
.btn--light {
background-color: var(--color-white);
color: var(--color-primary);
border-color: var(--color-white);
}
.btn--light:hover,
.btn--light:focus-visible {
background-color: transparent;
color: var(--color-white);
}
/* Light outline — transparent with white border, used on coloured/dark backgrounds */
.btn--light-outline {
background-color: transparent;
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.8);
}
.btn--light-outline:hover,
.btn--light-outline:focus-visible {
background-color: var(--color-white);
color: var(--color-primary);
border-color: var(--color-white);
}
/* =============================================================
Header
Sticky bar containing the logo, nav toggle, and navigation.
============================================================= */
.header {
position: sticky; /* Stays pinned to the top of the viewport */
top: 0;
z-index: 100; /* Sit above all page content */
background-color: var(--color-white);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
height: var(--header-height);
}
/* Inner: flex row — logo on the left, toggle/nav on the right */
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
/*
* Logo / brand name link.
* When the real logo image arrives, wrap an ![]()
in this
* and remove the text content.
*/
.header__logo {
font-size: var(--font-size-lg);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
transition: color var(--transition);
/* Ensure the logo is at least 44px tall for touch accessibility */
display: flex;
align-items: center;
min-height: 44px;
}
.header__logo:hover,
.header__logo:focus-visible {
color: var(--color-primary-dark);
outline: none;
}
/* Logo image — 60px tall; width scales automatically to preserve aspect ratio */
.header__logo-img {
height: 60px;
width: auto;
}
/* =============================================================
Navigation
Mobile: hidden dropdown toggled by the hamburger button.
Desktop: inline flex row (see media query at bottom).
============================================================= */
/* Hamburger toggle button — visible on mobile, hidden on desktop */
.nav__toggle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 0;
/* 44×44px minimum touch target (WCAG 2.5.5) */
min-width: 44px;
min-height: 44px;
}
/* Individual bar lines that form the hamburger icon */
.nav__toggle-bar {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-text);
border-radius: var(--radius-full);
transition: transform var(--transition), opacity var(--transition);
}
/* Animate bars into an X when the nav is open */
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/*
* Mobile nav panel.
* Hidden by default; the .nav--open class is added by nav.js
* when the hamburger button is clicked.
* Positioned absolutely so it drops over the page content.
*/
.nav {
display: none;
position: absolute; /* Positioned relative to .header (sticky ancestor) */
top: var(--header-height); /* Drop down directly below the header bar */
left: 0;
right: 0;
background-color: var(--color-white);
border-bottom: 1px solid var(--color-border);
padding: var(--space-sm);
box-shadow: var(--shadow-md);
}
/* Class toggled by nav.js to show the mobile menu */
.nav--open {
display: block;
}
/* Vertical stack of links on mobile */
.nav__list {
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin-bottom: var(--space-sm);
}
.nav__link {
display: block;
padding: var(--space-xs) var(--space-sm);
font-weight: 600;
color: var(--color-text);
border-radius: var(--radius-sm);
transition: background-color var(--transition), color var(--transition);
}
.nav__link:hover,
.nav__link:focus-visible {
background-color: var(--color-bg-alt);
color: var(--color-primary);
outline: none;
}
/* Highlight the current page link */
.nav__link--active {
color: var(--color-primary);
}
/* "Book Now" link styled as a pill to stand out from other nav links */
.nav__link--cta {
background-color: var(--color-primary);
color: var(--color-white);
border-radius: var(--radius-full);
text-align: center;
}
.nav__link--cta:hover,
.nav__link--cta:focus-visible {
background-color: var(--color-primary-dark);
color: var(--color-white);
}
/* Social icon row inside the mobile nav, separated by a border */
.nav__social {
display: flex;
gap: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-border);
}
.nav__social-link {
display: flex;
align-items: center;
gap: var(--space-xs);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
font-weight: 600;
transition: color var(--transition);
}
.nav__social-link:hover,
.nav__social-link:focus-visible {
color: var(--color-primary);
outline: none;
}
.nav__social-link svg {
flex-shrink: 0;
}
/* =============================================================
Footer
Dark background with brand info, contact, and social links.
============================================================= */
.footer {
background-color: var(--color-text); /* Dark charcoal background */
color: var(--color-white);
padding: var(--space-xl) 0 var(--space-lg);
margin-top: var(--space-2xl);
}
/* Grid container: single column on mobile, expands in breakpoints below */
.footer__inner {
display: grid;
gap: var(--space-lg);
}
/* Brand column */
.footer__brand-name {
font-size: var(--font-size-lg);
font-weight: 800;
color: var(--color-secondary);
margin-bottom: var(--space-xs);
}
.footer__tagline {
color: #bbb;
font-size: var(--font-size-sm);
line-height: 1.6;
}
/* Section headings inside each footer column */
.footer__heading {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--color-white);
margin-bottom: var(--space-sm);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Contact email link */
.footer__email {
color: var(--color-secondary);
font-weight: 600;
transition: color var(--transition);
}
.footer__email:hover,
.footer__email:focus-visible {
color: var(--color-white);
text-decoration: underline;
outline: none;
}
/* Social icons flex row */
.footer__social {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
.footer__social-link {
display: flex;
align-items: center;
gap: var(--space-xs);
color: #bbb;
font-size: var(--font-size-sm);
font-weight: 600;
transition: color var(--transition);
}
.footer__social-link:hover,
.footer__social-link:focus-visible {
color: var(--color-secondary);
outline: none;
}
/* Copyright bar — sits below the footer grid */
.footer__bottom {
margin-top: var(--space-lg);
padding-top: var(--space-sm);
border-top: 1px solid #444;
text-align: center;
color: #888;
font-size: var(--font-size-sm);
}
/* =============================================================
Tablet — min-width: 600px
============================================================= */
@media (min-width: 600px) {
/* Scale up heading sizes on larger screens */
h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
/* Give containers more breathing room */
.container {
padding-left: var(--space-md);
padding-right: var(--space-md);
}
/* Footer switches to two equal columns */
.footer__inner {
grid-template-columns: 1fr 1fr;
}
}
/* =============================================================
Desktop — min-width: 1024px
============================================================= */
@media (min-width: 1024px) {
h1 { font-size: var(--font-size-3xl); }
/* Hide the hamburger button — the nav is always visible on desktop */
.nav__toggle {
display: none;
}
/*
* Override mobile nav styles.
* The .nav.nav--open selector has higher specificity than .nav--open alone,
* so it wins without needing !important — ensuring the nav is always flex
* on desktop even if nav.js has added the .nav--open class.
*/
.nav,
.nav.nav--open {
display: flex;
position: static; /* Back in normal document flow inside the header */
background: none;
border: none;
padding: 0;
box-shadow: none;
align-items: center;
gap: var(--space-sm);
}
/* Nav links in a horizontal row */
.nav__list {
flex-direction: row;
gap: 0;
margin-bottom: 0;
}
/* Inline display for desktop links */
.nav__link {
display: inline-block;
}
/* Social icons row sits inline next to the nav links */
.nav__social {
border-top: none;
padding-top: 0;
margin-left: var(--space-xs);
}
/* Footer expands to three columns on desktop */
.footer__inner {
grid-template-columns: 2fr 1fr 1fr;
}
}