/* ============================================================ BEURRE PATISSERIE — Colour & Type Foundations Handcrafted French pastries · Lytham St Annes ------------------------------------------------------------ FONT NOTE: Brand face is Bahnschrift (DIN-style geometric grotesque), self-hosted from fonts/bahnschrift.ttf — the closest match to the BEURRE wordmark. Cormorant Garamond (Google Fonts CDN) is the elegant editorial serif ("the modern twist on traditional French"). Swap for the licensed brand faces if/when provided. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap'); /* Self-hosted brand face — Bahnschrift (DIN-style geometric grotesque), the closest match to the BEURRE wordmark. Variable TTF, full weight range. */ @font-face { font-family: 'Bahnschrift'; src: url('../fonts/bahnschrift.ttf') format('truetype'); font-weight: 300 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; } :root { /* ---------- BRAND CORE ---------- */ --gold: #C0974B; /* primary metallic accent — foil, CTAs, rules */ --gold-deep: #A87C33; /* pressed / hover gold */ --gold-light: #E3B164; /* logo gold, highlights */ --gold-leaf: #CBA14E; /* gold-leaf detailing tone */ --champagne: #EFE3CC; /* pale gold wash, soft fills */ --ink: #1D1B18; /* warm near-black — wordmark, primary text */ --ink-soft: #2C2A26; /* ---------- BLUSH / ROSE ---------- */ --blush: #FBE9EA; /* lightest pastel pink — section backgrounds */ --blush-50: #FDF4F4; /* barely-there pink tint */ --rose: #F6D8DA; /* signature box pink */ --rose-mid: #E8B9BC; /* dusty rose */ --rose-deep: #C98A8E; /* muted rose for accents / borders */ --rose-ink: #8E565A; /* deep rose text on pale grounds */ /* ---------- NEUTRALS / PAPER ---------- */ --paper: #FDFBF8; /* warm off-white — default page ground */ --cream: #F7F1E8; /* warm cream panel */ --white: #FFFFFF; --line: #ECE4D9; /* hairline on cream */ --line-rose: #F0DCDD; /* hairline on blush */ /* ---------- TEXT ROLES ---------- */ --fg1: var(--ink); /* primary */ --fg2: #5A554C; /* secondary / body muted */ --fg3: #908A7E; /* tertiary / captions, meta */ --fg-on-gold: #FFFFFF; --fg-on-dark: #F7F1E8; /* ---------- SEMANTIC SURFACES ---------- */ --bg: var(--paper); --bg-alt: var(--blush); --bg-dark: #211F1B; /* charcoal footer / dramatic sections */ --surface: var(--white); /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Bahnschrift', 'DIN Alternate', system-ui, sans-serif; /* headings, eyebrows, UI labels */ --font-body: 'Karla', system-ui, sans-serif; /* body, lead & meta — humanist warmth */ --font-serif: 'Cormorant Garamond', Georgia, serif; /* editorial accent */ /* ---------- TYPE SCALE (1.250 major-third-ish, fluid) ---------- */ --text-xs: 0.75rem; /* 12 — micro labels */ --text-sm: 0.875rem; /* 14 — meta, captions */ --text-base: 1rem; /* 16 — body */ --text-md: 1.125rem; /* 18 — lead body */ --text-lg: 1.375rem; /* 22 */ --text-xl: 1.75rem; /* 28 */ --text-2xl: 2.25rem; /* 36 */ --text-3xl: 3rem; /* 48 */ --text-4xl: 4rem; /* 64 */ --text-5xl: 5.5rem; /* 88 — hero */ /* ---------- TRACKING ---------- */ --track-tight: -0.01em; --track-normal: 0; --track-wide: 0.08em; --track-wider: 0.18em; /* the "PATISSERIE" label spacing */ --track-eyebrow: 0.28em; /* ---------- RADII ---------- */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* ---------- ELEVATION (soft, warm-tinted) ---------- */ --shadow-sm: 0 1px 2px rgba(46,38,28,0.06), 0 1px 3px rgba(46,38,28,0.05); --shadow-md: 0 4px 14px rgba(46,38,28,0.08), 0 2px 6px rgba(46,38,28,0.05); --shadow-lg: 0 18px 48px rgba(46,38,28,0.12), 0 6px 16px rgba(46,38,28,0.07); --shadow-rose:0 16px 40px rgba(154,96,99,0.16); /* ---------- SPACING (4px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ SEMANTIC TYPE PRESETS ============================================================ */ /* Eyebrow / kicker — wide-tracked uppercase, the brand's signature "PATISSERIE" treatment. Often gold. */ .t-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--gold); } /* Display heading — heavy geometric, like the BEURRE wordmark */ .t-display { font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); line-height: 1.02; letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--fg1); } h1, .t-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1.06; letter-spacing: var(--track-tight); color: var(--fg1); } h2, .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.12; letter-spacing: var(--track-tight); color: var(--fg1); } h3, .t-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.2; color: var(--fg1); } /* Serif editorial — elegant, for French phrases, quotes, prices */ .t-serif { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-2xl); line-height: 1.2; letter-spacing: var(--track-normal); color: var(--fg1); } .t-serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 500; } p, .t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: 1.68; color: var(--fg2); } .t-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--text-md); line-height: 1.6; color: var(--fg2); } .t-meta { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg3); } .t-price { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-lg); color: var(--gold-deep); }