/* ============================================================ GINGERBREAD AESTHETIC Typography & Colour Foundation ============================================================ FONTS Primary: Lora (serif headings) + Poppins (sans body) Fallback: Caladea (headings) + Carlito (body) Both fallbacks are metric-compatible with the primaries, so layouts won't shift if Google Fonts fails to load. USAGE 1. Paste the tag below into your BEFORE your own stylesheet link. 2. Copy this file into your project as foundation.css and link it: ============================================================ */ /* ============================================================ GOOGLE FONTS — paste this into your ============================================================ ============================================================ */ /* ============================================================ CSS CUSTOM PROPERTIES (variables) All your brand values in one place. Change here and they update everywhere. ============================================================ */ :root { /* -- Typography ------------------------------------------ */ /* Primary font stack — loads from Google Fonts */ --font-heading: 'Lora', 'Caladea', 'Cambria', Georgia, serif; --font-body: 'Poppins', 'Carlito', 'Calibri', Arial, sans-serif; /* Fallback-only stack — used if Google Fonts is unavailable */ --font-heading-fallback: 'Caladea', 'Cambria', Georgia, serif; --font-body-fallback: 'Carlito', 'Calibri', Arial, sans-serif; /* -- Font sizes ------------------------------------------ */ /* Using a modular scale (1.25 ratio — "Major Third"). Each step is 1.25x the previous. This keeps sizing proportional and harmonious across all screen sizes. */ --text-xs: 0.64rem; /* ~10px — legal text, tiny labels */ --text-sm: 0.8rem; /* ~13px — captions, footnotes */ --text-base: 1rem; /* 16px — body copy (browser default) */ --text-md: 1.25rem; /* ~20px — lead paragraph, intro text */ --text-lg: 1.563rem; /* ~25px — subheadings (h3) */ --text-xl: 1.953rem; /* ~31px — section headings (h2) */ --text-2xl: 2.441rem; /* ~39px — page headings (h1) */ --text-3xl: 3.052rem; /* ~49px — hero headings */ --text-4xl: 3.815rem; /* ~61px — large display / cover text */ /* -- Font weights ---------------------------------------- */ --weight-light: 300; /* Poppins Light — captions, subtle labels */ --weight-regular: 400; /* Poppins Regular — body copy */ --weight-medium: 500; /* Poppins Medium — nav links, UI labels */ --weight-semibold:600; /* Poppins SemiBold — buttons, strong labels */ --weight-heading: 600; /* Lora SemiBold — headings */ --weight-bold: 700; /* Lora Bold — hero, display headings */ /* -- Line heights ---------------------------------------- */ --leading-tight: 1.2; /* headings */ --leading-snug: 1.4; /* subheadings, large text */ --leading-normal: 1.6; /* body copy — comfortable reading */ --leading-loose: 1.8; /* small text, captions — easier to scan */ /* -- Letter spacing -------------------------------------- */ --tracking-tight: -0.01em; /* large display headings */ --tracking-normal: 0em; /* body copy */ --tracking-wide: 0.05em; /* subheadings, labels */ --tracking-wider: 0.12em; /* small caps, section labels */ --tracking-widest: 0.2em; /* AESTHETIC, spaced decorative labels */ /* -------------------------------------------------------- COLOUR PALETTE — White & Champagne Gold All colours are drawn from the clinic interior: white walls, champagne gold fixtures, goldy-brown marble floor and worktop, magenta chairs and treatment bed. -------------------------------------------------------- */ /* Backgrounds */ --ivory: #FDFAF4; /* main page background — warm white */ --champagne: #F0E2C0; /* panels, cards, alternating sections */ --off-white: #F8F5F0; /* subtle section breaks, input backgrounds*/ /* Gold — primary brand accent */ --gold: #C9A84C; /* buttons, links, borders, highlights */ --gold-dark: #8C6E28; /* hover states, deeper accent */ --gold-light: #E8D080; /* very light gold tint, backgrounds */ /* Marble tones — from the clinic floor and worktop */ --marble: #C4A882; /* warm mid-tone, decorative elements */ --marble-lt: #E8D8C0; /* light marble, dividers, subtle panels */ /* Magenta — the chairs and treatment bed */ --magenta: #C0437A; /* hero accent, highlights, badges */ --magenta-lt: #F5E0EC; /* pale blush, tag backgrounds, soft tints */ /* Text */ --espresso: #2E1F0E; /* primary text — rich dark warm brown */ --text-mid: #7A6040; /* secondary text, captions, meta */ --text-light: #B09870; /* placeholder, disabled, very subtle text */ /* Graphite — for clinical / platinum moments */ --graphite: #1A1A2A; /* deep neutral, use with platinum palette */ --platinum: #A8A8B8; /* cool silver accent */ /* -------------------------------------------------------- SEMANTIC COLOUR ALIASES Use these in your components — if you ever rebrand, you only change the value here, not throughout your CSS. -------------------------------------------------------- */ --color-background: var(--ivory); --color-surface: var(--champagne); --color-surface-alt: var(--off-white); --color-primary: var(--gold); --color-primary-hover: var(--gold-dark); --color-primary-light: var(--gold-light); --color-accent: var(--magenta); --color-accent-light: var(--magenta-lt); --color-text: var(--espresso); --color-text-secondary: var(--text-mid); --color-text-muted: var(--text-light); --color-border: rgba(201, 168, 76, 0.25); /* gold at 25% opacity */ --color-border-strong: rgba(201, 168, 76, 0.5); /* gold at 50% opacity */ --color-border-subtle: rgba(46, 31, 14, 0.08); /* espresso at 8% */ /* -------------------------------------------------------- SPACING SCALE Consistent gaps throughout the site. -------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* -------------------------------------------------------- LAYOUT -------------------------------------------------------- */ --max-width: 1200px; /* site content max width */ --max-width-text: 680px; /* body text max width (comfortable read) */ --nav-height: 72px; /* sticky nav height — keep consistent */ --radius-sm: 4px; /* subtle rounding — inputs, small tags */ --radius-md: 8px; /* cards, panels */ --radius-lg: 12px; /* larger cards, modals */ --radius-xl: 20px; /* pill buttons, rounded tags */ --radius-full: 9999px;/* fully round — circle avatars, badges */ /* -------------------------------------------------------- TRANSITIONS -------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* -------------------------------------------------------- SHADOWS All use espresso so they feel warm, not grey/blue. -------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(46, 31, 14, 0.08); --shadow-md: 0 4px 12px rgba(46, 31, 14, 0.10); --shadow-lg: 0 8px 28px rgba(46, 31, 14, 0.12); --shadow-xl: 0 16px 48px rgba(46, 31, 14, 0.14); } /* ============================================================ GLOBAL RESET & BASE STYLES ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; /* sets the rem base */ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-background); /* Improves text rendering on Mac/mobile */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); } /* ============================================================ TYPOGRAPHY — Heading styles ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } h4 { font-size: var(--text-md); font-weight: var(--weight-heading); } h5 { font-size: var(--text-base); font-weight: var(--weight-heading); } h6 { font-size: var(--text-sm); font-weight: var(--weight-semibold); } /* Hero display heading — for the main page headline */ .heading-display { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: var(--tracking-tight); } /* Italic serif — used for straplines, pull quotes, italic headings */ .heading-italic { font-family: var(--font-heading); font-style: italic; font-weight: 400; color: var(--color-primary); } /* Spaced uppercase label — for section eyebrows like "TREATMENTS" */ .label-spaced { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-primary); } /* Decorative brand name — for the "GINGERBREAD" wordmark in headers */ .wordmark { font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-primary); } p { max-width: var(--max-width-text); line-height: var(--leading-normal); } /* Lead paragraph — first intro paragraph on a page */ .lead { font-size: var(--text-md); font-weight: var(--weight-light); line-height: var(--leading-snug); color: var(--color-text-secondary); } /* Caption / small text */ .caption { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-loose); } /* ============================================================ LAYOUT UTILITIES ============================================================ */ /* Centred content wrapper */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; /* horizontally centred */ padding-inline: var(--space-6); /* side padding */ } /* Narrower wrapper for text-heavy sections */ .container-text { width: 100%; max-width: var(--max-width-text); margin-inline: auto; padding-inline: var(--space-6); } /* Section spacing — consistent vertical rhythm */ .section { padding-block: var(--space-20); /* top and bottom padding */ } .section-sm { padding-block: var(--space-12); } /* Alternating section background */ .section-tinted { background-color: var(--color-surface); } /* Gold rule divider — the decorative line used throughout */ .gold-rule { width: 60px; height: 1px; background-color: var(--color-primary); margin-block: var(--space-4); } .gold-rule-center { margin-inline: auto; } /* ============================================================ NAVIGATION Sticky top bar — pure CSS, no JavaScript needed. ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height); background-color: var(--espresso); border-bottom: 1px solid rgba(201, 168, 76, 0.3); display: flex; align-items: center; } .nav-inner { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } .nav-logo { font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold); text-decoration: none; white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: var(--space-8); list-style: none; } .nav-links a { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: rgba(255, 255, 255, 0.6); letter-spacing: var(--tracking-wide); transition: color var(--transition-fast); } .nav-links a:hover, .nav-links a.active { color: var(--gold); } /* ============================================================ BUTTONS Pure CSS — no JavaScript. ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-decoration: none; white-space: nowrap; padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .btn:active { transform: scale(0.98); } /* Primary — gold fill */ .btn-primary { background-color: var(--gold); color: var(--espresso); border-color: var(--gold); } .btn-primary:hover { background-color: var(--gold-dark); border-color: var(--gold-dark); color: var(--espresso); } /* Secondary — outlined gold */ .btn-secondary { background-color: transparent; color: var(--gold); border-color: var(--gold); } .btn-secondary:hover { background-color: var(--gold); color: var(--espresso); } /* Ghost — for use on dark backgrounds */ .btn-ghost { background-color: transparent; color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.3); } .btn-ghost:hover { color: #fff; border-color: rgba(255, 255, 255, 0.7); } /* Large button variant */ .btn-lg { font-size: var(--text-base); padding: var(--space-4) var(--space-8); } /* ============================================================ HERO SECTION Centred typographic hero — no photo needed. Swap background-color for background-image when you have a photo. ============================================================ */ .hero { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--champagne); padding: var(--space-20) var(--space-6); } .hero-inner { max-width: 720px; } .hero-eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-4); } .hero-heading { font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.5rem); /* fluid — scales with screen */ font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--espresso); margin-bottom: var(--space-4); } /* The italic gold word within the heading — e.g. "Reveal Your Best Skin" */ .hero-heading em { font-style: italic; color: var(--color-primary); } .hero-rule { width: 50px; height: 1px; background-color: var(--gold); margin: var(--space-5) auto; } .hero-subheading { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-light); color: var(--text-mid); margin-bottom: var(--space-8); max-width: 520px; margin-inline: auto; } .hero-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; } /* ============================================================ TREATMENT CARD Card grid — pure CSS Grid, no JavaScript. ============================================================ */ .treatment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); } .treatment-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); transition: box-shadow var(--transition-base), transform var(--transition-base); } .treatment-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Gold top accent bar */ .treatment-card::before { content: ''; display: block; width: 40px; height: 2px; background-color: var(--gold); margin-bottom: var(--space-5); } .treatment-card-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-heading); color: var(--espresso); margin-bottom: var(--space-2); } .treatment-card-desc { font-size: var(--text-sm); color: var(--text-mid); line-height: var(--leading-normal); margin-bottom: var(--space-5); } .treatment-card-price { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--gold); } /* ============================================================ FOOTER ============================================================ */ .footer { background-color: var(--espresso); color: rgba(255, 255, 255, 0.5); padding-block: var(--space-12); border-top: 1px solid rgba(201, 168, 76, 0.2); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-10); margin-bottom: var(--space-10); } .footer-brand { font-family: var(--font-heading); font-size: 1.1rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-3); } .footer-heading { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-4); } .footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .footer-links a { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.45); transition: color var(--transition-fast); } .footer-links a:hover { color: var(--gold); } .footer-bottom { border-top: 1px solid rgba(201, 168, 76, 0.1); padding-top: var(--space-6); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.25); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); } /* ============================================================ WHATSAPP FLOATING BUTTON One anchor tag — no JavaScript. Add to your HTML: ============================================================ */ .whatsapp-btn { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 200; width: 52px; height: 52px; border-radius: var(--radius-full); background-color: #25D366; color: white; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: transform var(--transition-fast), box-shadow var(--transition-fast); text-decoration: none; } .whatsapp-btn:hover { transform: scale(1.08); box-shadow: var(--shadow-xl); color: white; } /* WhatsApp icon — pure CSS (no emoji, no image needed) */ .whatsapp-btn::before { content: ''; width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } /* ============================================================ RESPONSIVE — Mobile adjustments ============================================================ */ @media (max-width: 768px) { /* Smaller headings on mobile */ h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-lg); } h3 { font-size: var(--text-md); } .heading-display { font-size: clamp(1.8rem, 8vw, 2.4rem); } /* Tighter section spacing on mobile */ .section { padding-block: var(--space-12); } .section-sm { padding-block: var(--space-8); } /* Container side padding */ .container, .container-text { padding-inline: var(--space-4); } /* Hero adjustments */ .hero { min-height: 70vh; padding: var(--space-16) var(--space-4); } /* Nav hides links on mobile — add your hamburger here later */ .nav-links { display: none; /* hide for now — add a hamburger menu when ready */ } /* Stack buttons vertically on small screens */ .hero-actions { flex-direction: column; align-items: center; } /* Single column treatment grid */ .treatment-grid { grid-template-columns: 1fr; } /* Footer stacks on mobile */ .footer-bottom { flex-direction: column; text-align: center; } } /* ============================================================ EXAMPLE HTML STRUCTURE Copy this to start a new page. ============================================================ Gingerbread Aesthetic

Gingerbread Aesthetic

Reveal Your Best Skin

Premium aesthetic treatments, expertly delivered by Natalia Niedźwiedź

Book a Treatment View Treatments

Our Treatments

What We Offer

RF Microneedling

Advanced radiofrequency microneedling for skin tightening, texture and tone.

from £80

Anti-Wrinkle Injections

Botox® treatments across 1, 2 or 3 areas. Natural, refreshed results.

from £180

Hydrafacial

Deep cleanse, exfoliation and hydration in one 60 or 90 minute treatment.

from £89

============================================================ */