/* ========================================================================== style.css – Ninja Creami Protein Ice Cream Website ========================================================================== HOW THIS FILE IS ORGANISED -------------------------- 1. CSS Custom Properties (variables) ← Change colours / fonts here 2. Reset & Base 3. Typography 4. Top Navigation bar 5. Page Hero sections 6. Home page – feature cards 7. Recipes page – two-column layout (sidebar + content) 8. Recipe cards (photo + ingredients side-by-side) 9. Macro badge pills 10. Ingredients table 11. Instructions block 12. Bio page 13. Footer 14. Utility classes 15. Responsive / mobile overrides ========================================================================== */ /* ────────────────────────────────────────────────────────────────────────── 1. CSS CUSTOM PROPERTIES Change these to restyle the whole site at once. ────────────────────────────────────────────────────────────────────────── */ :root { /* Colours */ --color-bg-page: #f0f4f8; /* light grey-blue page background */ --color-bg-card: #ffffff; /* white recipe / feature cards */ --color-bg-hero: #0f172a; /* dark navy for hero sections */ --color-bg-sidebar: #0f172a; /* sidebar background */ --color-bg-nav: #0f172a; /* top navigation bar background */ --color-text-primary: #0f172a; /* main body text (very dark navy) */ --color-text-secondary:#475569; /* secondary / caption text */ --color-text-light: #e2e8f0; /* text on dark backgrounds */ --color-text-muted: #94a3b8; /* muted / placeholder text */ --color-accent: #22c55e; /* green accent – buttons, highlights */ --color-accent-dark: #16a34a; /* darker green for hover states */ --color-accent-glow: rgba(34, 197, 94, 0.18); /* subtle glow */ --color-border: #e2e8f0; /* light border colour */ --color-sidebar-active:#22c55e; /* sidebar item that is currently active */ /* Shadows */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08); /* card drop shadow */ --shadow-nav: 0 2px 12px rgba(0, 0, 0, 0.18); /* nav bar shadow */ /* Spacing */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ /* Border radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* Layout */ --sidebar-width: 280px; /* width of the recipe sidebar on desktop */ --content-max: 900px; /* max content width inside the main area */ --nav-height: 64px; /* height of the top navigation bar */ /* Fonts – loaded via Google Fonts in each HTML */ --font-heading: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; } /* ────────────────────────────────────────────────────────────────────────── 2. RESET & BASE ────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* enables smooth scrolling when clicking links */ font-size: 16px; } body { font-family: var(--font-body); color: var(--color-text-primary); background-color: var(--color-bg-page); line-height: 1.6; min-height: 100vh; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ────────────────────────────────────────────────────────────────────────── 3. TYPOGRAPHY Change font sizes here if you want larger or smaller text. ────────────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; } h1 { font-size: clamp(2rem, 5vw, 3.2rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); } h3 { font-size: 1.3rem; } h4 { font-size: 1rem; } p { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.7; } /* ────────────────────────────────────────────────────────────────────────── 4. TOP NAVIGATION BAR The nav bar appears on every page. Edit links in each HTML file's