/* ============================================================ Blues Cafe — Main Stylesheet Plain HTML + CSS recreation of the JSX UI kit. Table of contents: 1. Design tokens (CSS variables) 2. Reset & base 3. Typography helpers 4. Wordmark / logo lockup 5. Navigation 6. Buttons 7. Badges 8. Hero section 9. Chalkboard section 10. Section headings 11. Menu cards & grids 12. Inside strip (photo pair) 13. Drinks band 14. Dog strip 15. Visit / Find us 16. Footer 17. Responsive breakpoints ============================================================ */ /* ============================================================ 1. Design tokens All colours, fonts, and layout values live here. Change a value once and it updates everywhere. ============================================================ */ :root { /* --- Brand blues --- */ --blue-sky: #8EC8E8; /* Primary brand fill — "BLUES" wordmark */ --blue-ink: #1E4E7A; /* Dark blue — outlines, headings, interactive */ --blue-ink-deep: #14324F; /* Deeper blue — active nav state */ /* --- Neutral surfaces --- */ --paper: #FDFBF5; /* Lightest surface — elevated cards */ --cream: #F6F1E4; /* Default page background (never pure white) */ --ink: #1C1A17; /* Body text — warm near-black */ --slate: #5A5B5E; /* Secondary text — captions, descriptions */ --border: #E4DCC5; /* Dividers and card borders */ /* --- Accent colours --- */ --butter: #F4D58D; /* Pastry yellow — used sparingly, max 10% of a surface */ --leaf: #6B8E5A; /* Green — "Open now" badge, success states */ --forest: #2E4A3A; /* Deep green — footer, dog strip background */ /* --- Chalkboard palette (signature surface) --- */ --chalkboard: #1A1F1C; /* Base chalkboard background */ --chalk-pink: #E87A9E; /* Drink names */ --chalk-yellow: #F2E06B; /* Price bubbles */ --chalk-mint: #7FD9C2; /* Wordmark on board, alt highlight */ --chalk-orange: #F4A968; /* Syrup options */ /* --- Typefaces --- Load order: Display → Script → Serif → Sans Google Fonts must be linked in for these to work. */ --font-display: 'Lilita One', sans-serif; /* Chunky rounded — headings */ --font-script: 'Pacifico', cursive; /* Brush script — accents */ --font-serif: 'Playfair Display', Georgia, serif; /* Editorial — subheadings */ --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* UI / nav / badges */ --font-body: 'Fraunces', Georgia, serif; /* Body & info text */ /* --- Layout --- */ --max-w: 1120px; /* Maximum content width — centred with .container */ } /* ============================================================ 2. Reset & base Minimal reset so browser defaults don't interfere. ============================================================ */ /* Apply border-box sizing to everything */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; /* Smoother text on macOS/iOS */ text-rendering: optimizeLegibility; } /* Prevent images from overflowing their container */ img { max-width: 100%; display: block; } /* Centred layout wrapper — wraps most page sections */ .container { max-width: var(--max-w); margin: 0 auto; padding-left: 32px; padding-right: 32px; } /* Default link style — no underline, brand blue */ a { color: var(--blue-ink); text-decoration: none; } /* ============================================================ 3. Typography helpers Shared heading defaults and utility classes for the eyebrow label and Pacifico script spans. ============================================================ */ /* All headings use the display font by default */ h1, h2, h3 { font-family: var(--font-display); color: var(--blue-ink); letter-spacing: 0.01em; line-height: 1.05; margin: 0; font-weight: 400; /* Lilita One is already heavy — no bold needed */ } /* Small-caps label used above section headings */ .eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-ink); } /* Pacifico script span — rotated slightly for handwritten feel */ .script { font-family: var(--font-script); color: var(--blue-ink); line-height: 1; display: inline-block; transform: rotate(-4deg); /* Default tilt — overridden per usage */ } /* Size variants for script spans */ .script-40 { font-size: 40px; } .script-56 { font-size: 56px; transform: rotate(-4deg); } /* Colour modifier — used on chalkboard and dog strip */ .script.mint, .mint { color: var(--chalk-mint); } /* ============================================================ 4. Wordmark / logo lockup The "BLUESCafe" logo mark. Two parts: .wm-blues — display font, sky-blue fill, ink stroke .wm-cafe — script font, rotated, overlaps slightly ============================================================ */ .wordmark { display: inline-flex; align-items: baseline; line-height: 1; user-select: none; /* Prevent text selection on click */ } /* "BLUES" — sky fill with ink outline */ .wm-blues { font-family: var(--font-display); font-size: 32px; color: var(--blue-sky); -webkit-text-stroke: 2px var(--blue-ink); paint-order: stroke fill; /* Draw stroke beneath fill so fill stays crisp */ letter-spacing: 0.01em; } /* "Cafe" — script, pulled left to visually tuck under "BLUES" */ .wm-cafe { font-family: var(--font-script); font-size: 26px; color: var(--blue-ink); margin-left: -6px; /* Overlap to close gap between words */ display: inline-block; transform: rotate(-4deg); } /* Inverse variant — used on dark backgrounds (footer, dog strip) */ .wordmark-inverse .wm-blues { /* Brand blue fill is unchanged on dark */ } .wm-cafe-inverse { color: var(--paper); -webkit-text-stroke: 1.5px var(--blue-ink); paint-order: stroke fill; } /* ============================================================ 5. Navigation Sticky bar at the top. Cream background with blur so content scrolls underneath without a hard edge. ============================================================ */ .nav { position: sticky; top: 0; z-index: 10; /* Above all page content */ display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; background: rgba(246, 241, 228, 0.82); /* Cream at 82% opacity */ backdrop-filter: blur(14px); /* Frosted glass effect */ -webkit-backdrop-filter: blur(14px); /* Safari prefix */ border-bottom: 1.5px solid var(--border); } /* Horizontal list of page links */ .nav-links { display: flex; gap: 28px; } .nav-links a { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--blue-ink); border-bottom: 2px solid transparent; padding-bottom: 2px; letter-spacing: 0.01em; transition: color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; } .nav-links a:hover { color: var(--blue-ink-deep); transform: translateY(-1px); } /* Active page link — deeper colour and underline */ .nav-links a.is-active { color: var(--blue-ink-deep); border-bottom-color: var(--blue-ink); } /* Instagram icon link in nav */ .nav-social { display: flex; align-items: center; gap: 14px; } .nav-insta { color: var(--blue-ink); display: inline-flex; align-items: center; transition: color 150ms ease, transform 150ms ease; } .nav-insta:hover { color: var(--blue-ink-deep); transform: scale(1.12); } /* Instagram badge in Find us section */ .insta-badge, .badge-outline.insta-badge { background: var(--blue-ink); color: var(--paper); border-color: var(--blue-ink); text-decoration: none; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); } .insta-badge:hover, .badge-outline.insta-badge:hover { transform: translateY(-2px); } /* ============================================================ 6. Buttons Base .btn class + size modifiers + colour variants. Always use border-radius: 999px for fully rounded pills. ============================================================ */ .btn { font-family: var(--font-sans); font-weight: 600; border-radius: 999px; /* Pill shape */ cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform 120ms cubic-bezier(0.2, 0.9, 0.2, 1); text-decoration: none; border: none; } /* Subtle press effect on click */ .btn:active { transform: translateY(1px); } /* Size variants */ .btn-sm { padding: 8px 16px; font-size: 13px; } .btn-lg { padding: 15px 28px; font-size: 17px; } /* Default (medium) — applied when neither .btn-sm nor .btn-lg is present */ .btn:not(.btn-sm):not(.btn-lg) { padding: 12px 22px; font-size: 15px; } /* Primary — solid ink blue, main CTA */ .btn-primary { background: var(--blue-ink); color: var(--paper); box-shadow: 0 6px 20px rgba(30, 78, 122, 0.12); } /* Ghost — transparent with ink border, secondary action */ .btn-ghost { background: transparent; color: var(--blue-ink); border: 1.5px solid var(--blue-ink); } /* ============================================================ 7. Badges Small pill labels used for status, tags, and info chips. Tone variants control background + text colour. ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; /* Pill */ font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1; } /* Optional status dot — colour inherits from badge text */ .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Colour variants */ .badge-leaf { background: var(--leaf); color: var(--paper); } /* "Open now" */ .badge-butter { background: var(--butter); color: var(--blue-ink); border: 1.5px solid var(--blue-ink); } /* "Fresh" */ .badge-sky { background: #C7E1F1; color: var(--blue-ink); } /* Info / neutral */ .badge-berry { background: #B64B4B; color: var(--paper); } /* "Sold out" */ .badge-outline { background: var(--paper); color: var(--blue-ink); border: 1.5px solid var(--border); } /* Subtle / label */ /* ============================================================ 8. Hero section Two-column layout: copy left, storefront photo right. Collapses to single column on tablet and below. ============================================================ */ .hero { width: 100%; padding: 96px 32px 96px; position: relative; overflow: hidden; /* Two radial gradients layered over the cream base: - Sky-blue glow top-right (behind the photo column) - Butter warmth bottom-left (anchors the copy column) Now spans full viewport width so gradients reach the edges. */ background: radial-gradient(ellipse 55% 70% at 88% 25%, rgba(142, 200, 232, 0.13) 0%, transparent 65%), radial-gradient(ellipse 50% 55% at 5% 90%, rgba(244, 213, 141, 0.16) 0%, transparent 60%), var(--cream); } /* Inner wrapper — centres the grid content without constraining the background */ .hero-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; /* Copy slightly wider than photo */ gap: 56px; align-items: center; } /* Giant ghost wordmark — barely visible texture behind the photo. Clipped by overflow: hidden so it never causes horizontal scroll. */ .hero::before { content: 'BLUES'; position: absolute; font-family: 'Lilita One', sans-serif; font-size: clamp(200px, 34vw, 420px); color: var(--blue-sky); opacity: 0.055; line-height: 1; top: 50%; right: -20px; transform: translateY(-52%); pointer-events: none; user-select: none; letter-spacing: 0.01em; white-space: nowrap; z-index: 0; } /* Soft blurred blob — warm light source anchoring the top-left. filter: blur creates the diffuse glow without a hard edge. */ .hero::after { content: ''; position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 213, 141, 0.22) 0%, transparent 70%); top: -180px; left: -140px; pointer-events: none; z-index: 0; filter: blur(48px); } /* Content must sit above the pseudo-element layer */ .hero-copy, .hero-media { position: relative; z-index: 1; } /* Large display headline */ .hero-copy h1 { font-size: 88px; margin: 16px 0 4px; } /* Script line ("French pastries.") — offset and rotated */ .hero-script { margin-left: 16px; margin-bottom: 20px; } .hero-script .script { font-size: 72px; transform: rotate(-5deg); } /* Lead paragraph — serif, generous size */ .lede { font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 1.6; color: var(--ink); max-width: 520px; margin: 0 0 28px; } /* Horizontal button group */ .button-row { display: flex; gap: 12px; flex-wrap: wrap; /* Wraps on narrow screens */ } /* Horizontal badge group below buttons */ .badge-row { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; } /* Right-hand photo column — relative so sticker can be positioned */ .hero-media { position: relative; } /* Storefront photo */ .hero-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; border: 1.5px solid var(--blue-ink); box-shadow: 0 18px 40px rgba(30, 78, 122, 0.18); } /* "Fresh today!" sticker — absolutely positioned over photo corner */ .fresh-sticker { position: absolute; bottom: -24px; /* Peeks below the photo */ left: -24px; /* Peeks left of the photo */ background: var(--butter); border: 1.5px solid var(--blue-ink); border-radius: 999px; padding: 14px 22px; box-shadow: 0 6px 20px rgba(30, 78, 122, 0.15); } .fresh-sticker .script { font-size: 28px; transform: rotate(-6deg); } /* ============================================================ 9. Chalkboard section Dark green-black background with a subtle dot-grid grain overlay to mimic a real chalkboard texture. Chalk bubble shapes use organic border-radius values. ============================================================ */ .chalkboard { padding: 88px 32px; background: var(--chalkboard); color: #F4F0E4; /* Off-white chalk text */ position: relative; /* Needed for .chalkboard-grain overlay */ } /* Dot-grid grain overlay — purely decorative */ .chalkboard-grain { position: absolute; inset: 0; /* Fills the entire section */ background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 4px 4px; pointer-events: none; /* Clicks pass through to content below */ } /* Content sits on top of the grain overlay */ .chalkboard-inner { position: relative; } /* Header row: wordmark left, tagline right */ .chalk-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 16px; } /* Tagline next to the wordmark */ .chalk-tagline { font-family: var(--font-script); font-size: 20px; color: rgba(244, 240, 228, 0.55); /* Faint — supporting detail */ line-height: 1; } /* "Blues cafe" logo on the board */ .chalk-wordmark { display: flex; align-items: baseline; gap: 12px; } .chalk-blues { font-family: var(--font-script); font-size: 64px; color: var(--chalk-mint); line-height: 1; } .chalk-cafe { font-family: var(--font-script); font-size: 28px; color: #F4F0E4; } /* CSS filter to tint the paw SVG to chalk-mint (#7FD9C2). brightness(0) first forces black, then colour filters build the hue. */ .chalk-paw { filter: brightness(0) saturate(100%) invert(78%) sepia(35%) saturate(480%) hue-rotate(118deg) brightness(108%) contrast(88%); margin-left: 8px; } /* Three-column grid — was two columns, now fills the width */ .chalk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; } /* Each column stacks its bubbles vertically */ .chalk-col { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } /* Small column label above each group — like chalk handwriting */ .chalk-col-label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 240, 228, 0.4); /* Very faint — structural, not decorative */ margin-bottom: 2px; } /* Bottom info strip — address and hours */ .chalk-footer { margin-top: 44px; border-top: 1.5px dashed rgba(244, 240, 228, 0.18); /* Subtle chalk line */ padding-top: 28px; display: flex; gap: 14px; align-items: center; justify-content: center; /* Centred across the full width */ flex-wrap: wrap; font-family: var(--font-script); font-size: 19px; color: rgba(244, 240, 228, 0.5); text-align: center; } /* Separator dots between footer items */ .chalk-sep { color: rgba(244, 240, 228, 0.25); } /* Organic "thought bubble" shape — hand-drawn feel */ .bubble { border-width: 2.5px; border-style: solid; /* Uneven values produce the wobbly organic outline */ border-radius: 80% 70% 85% 65% / 70% 80% 60% 80%; padding: 14px 22px; display: inline-block; font-family: var(--font-script); line-height: 1.35; text-align: center; } /* Strong tags inside bubbles use the display font */ .bubble strong { font-family: var(--font-display); display: block; margin-bottom: 4px; font-weight: 400; } /* Bubble size modifiers */ .b-size-16 { font-size: 16px; } .b-size-17 { font-size: 17px; } .b-size-18 { font-size: 18px; } .b-size-20 { font-size: 20px; } .b-size-22 { font-size: 22px; } /* List-style bubble — items stack vertically with space between */ .bubble-list { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 34px 46px; margin-left: -52px; } .bubble-list span { display: flex; justify-content: space-between; /* Name left, price right */ gap: 16px; } .bubble-list em { font-style: normal; opacity: 0.75; /* Prices slightly recede behind item names */ white-space: nowrap; } /* Small sub-text inside a bubble (e.g. "water bowl at the door") */ .bubble-sub { font-family: var(--font-sans); font-size: 13px; opacity: 0.75; display: block; margin-top: 4px; } /* Bubble colour variants — border and text match */ .bubble-pink { border-color: var(--chalk-pink); color: var(--chalk-pink); } .bubble-yellow { border-color: var(--chalk-yellow); color: var(--chalk-yellow); } .bubble-mint { border-color: var(--chalk-mint); color: var(--chalk-mint); } .bubble-orange { border-color: var(--chalk-orange); color: var(--chalk-orange); } .bubble-blue { border-color: var(--blue-sky); color: var(--blue-sky); } /* ============================================================ 10. Section headings Reusable heading block: eyebrow label + display title + optional script word on the same baseline row. ============================================================ */ /* Default section padding — override per section as needed */ .section { padding: 72px 32px; } /* Wrapper for the heading block */ .section-heading { margin-bottom: 32px; } /* Row that holds the h2 and optional script word side by side */ .section-title-row { display: flex; align-items: baseline; /* Align on text baseline, not box */ gap: 16px; margin-top: 6px; flex-wrap: wrap; /* Wraps on narrow screens */ } .section-title-row h2 { font-size: 56px; line-height: 1; } /* ============================================================ 11. Menu cards & grids Cards are used for both pastries and drinks. Grid classes control column count per section. ============================================================ */ /* Grid container — column count set by modifier class */ .menu-grid { display: grid; gap: 18px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } /* Pastries */ .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 14px; } /* Drinks */ /* ── Menu card base ────────────────────────────────────────── Shared structure — layout and typography skeleton only. Visual style is applied by the --pastry or --drink modifier. ─────────────────────────────────────────────────────────── */ .menu-card { border-radius: 16px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.9, 0.2, 1); } /* Name + price on the same row */ .menu-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .menu-name { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.2; } .menu-price { font-family: var(--font-display); font-size: 24px; white-space: nowrap; /* Price never wraps */ flex-shrink: 0; } .menu-desc { font-family: var(--font-body); font-size: 14px; font-style: italic; line-height: 1.55; flex: 1; } /* Tag row (Fresh / Sold out badges) */ .tag-row { display: flex; gap: 6px; flex-wrap: wrap; } /* ── Pastry card ───────────────────────────────────────────── Warm, editorial feel. Paper background with a bold left butter-yellow stripe and ink-blue shadow. ─────────────────────────────────────────────────────────── */ .menu-card--pastry { background: var(--paper); border: none; border-left: 5px solid var(--butter); /* Accent stripe — brand warmth */ box-shadow: 0 2px 10px rgba(30, 78, 122, 0.08); } .menu-card--pastry .menu-name { color: var(--ink); } .menu-card--pastry .menu-price { color: var(--blue-ink); } .menu-card--pastry .menu-desc { color: var(--slate); } /* ── Drink card ────────────────────────────────────────────── Inverted — deep ink-blue background, paper and sky text. Echoes the chalkboard section and stands out on the sky-blue drinks band behind it. ─────────────────────────────────────────────────────────── */ .menu-card--drink { background: var(--blue-ink); border: none; box-shadow: 0 4px 16px rgba(20, 50, 79, 0.25); } .menu-card--drink:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(20, 50, 79, 0.35); } .menu-card--drink .menu-name { color: var(--paper); font-style: italic; } .menu-card--drink .menu-price { color: var(--butter); } /* Yellow pops on dark blue */ .menu-card--drink .menu-desc { color: #C7E1F1; } /* Light sky — readable, not harsh white */ /* Butter button variant — used on drink cards */ .btn-butter { background: var(--butter); color: var(--blue-ink); border: 1.5px solid var(--blue-ink); } /* Small badge row at the bottom of each section */ .footnote-badges { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; } /* Footer note under the drinks grid */ .drinks-foot { font-family: var(--font-serif); color: var(--blue-ink-deep); margin-top: 20px; } /* ============================================================ 12. Inside strip Two photos side by side (pastry case + tea shelf) with a centred caption underneath. ============================================================ */ .inside-strip { margin-top: 72px; } /* Two equal columns */ .inside-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* Each photo — fixed aspect ratio so they stay level */ .inside-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 1.5px solid var(--border); } /* Caption below the photo pair */ .inside-caption { margin-top: 16px; text-align: center; font-family: var(--font-serif); font-size: 16px; color: var(--slate); } /* ============================================================ 13. Drinks band Sky-blue full-width section behind the drinks grid. ============================================================ */ .drinks-band { background: var(--blue-sky); padding: 88px 32px; margin-top: 48px; /* Gap after the pastry section */ } /* ============================================================ 14. Dog strip Deep forest-green panel with script headline and paw icon. Two-column: copy left, icon right. ============================================================ */ /* Outer wrapper handles the top margin */ .dog-wrap { margin-top: 80px; } /* Inner card — rounded with large shadow */ .dog-strip { background: var(--forest); color: #F4F0E4; border-radius: 24px; padding: 40px 48px; display: grid; grid-template-columns: 1fr auto; /* Copy fills space, icon takes what it needs */ align-items: center; gap: 32px; box-shadow: 0 18px 40px rgba(30, 78, 122, 0.18); } /* Body copy inside the strip */ .dog-copy { font-family: var(--font-body); font-size: 20px; line-height: 1.5; margin: 14px 0 0; color: #F4F0E4; max-width: 520px; } /* CSS filter to tint the large paw SVG to chalk-mint (#7FD9C2) — matches "Dogs welcome" script colour */ .paw-big { filter: brightness(0) saturate(100%) invert(78%) sepia(35%) saturate(480%) hue-rotate(118deg) brightness(108%) contrast(88%); } /* ============================================================ 15. Visit / Find us Two-column: address info + hours left, photo right. ============================================================ */ .visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 8px; /* Sits just below the eyebrow */ align-items: start; /* Both columns start at the same top edge */ } /* Left column — text info */ .visit-info { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--ink); } /* Large display-font address heading */ .visit-address { font-family: var(--font-display); font-size: 32px; color: var(--blue-ink); margin-bottom: 8px; line-height: 1.05; } /* Hours line — slightly smaller than the body */ .visit-hours { margin-top: 16px; font-size: 15px; } /* Badge row inside the visit block */ .visit-info .badge-row { margin-top: 20px; } /* Right column — storefront photo */ .visit-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 1.5px solid var(--border); } /* ============================================================ 16. Footer Deep forest-green, four-column grid. Contains wordmark, address, menu summary, social links. ============================================================ */ .footer { margin-top: 80px; padding: 56px 32px 40px; background: var(--forest); color: #F4F0E4; font-family: var(--font-sans); } /* Four-column layout: brand | visit | menu | social */ .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; /* Brand column slightly wider */ gap: 40px; } /* Tagline below the footer wordmark */ .footer-blurb { font-family: var(--font-body); margin-top: 14px; font-size: 14px; line-height: 1.55; color: #C7E1F1; /* Light sky blue — readable on forest */ max-width: 280px; } /* Column heading — small-caps, sky blue */ .footer-title { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-sky); font-weight: 600; margin-bottom: 10px; } /* Column body text */ .footer-body { font-family: var(--font-body); font-size: 14px; line-height: 1.7; } /* Legal line at the very bottom */ .footer-legal { margin-top: 40px; font-size: 12px; color: var(--blue-sky); border-top: 1px solid rgba(199, 225, 241, 0.2); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .footer-credit { color: var(--blue-sky); text-decoration: underline; text-underline-offset: 2px; opacity: 0.7; transition: opacity 200ms ease; } .footer-credit:hover { opacity: 1; } /* ============================================================ 17. Responsive breakpoints 960px — tablet: collapse two-column layouts, hide nav links 560px — mobile: further reduce font sizes, single columns ============================================================ */ /* --- Tablet (960px and below) --- */ @media (max-width: 960px) { /* Hero collapses to single column; reduce font sizes */ .hero { padding-top: 40px; } .hero-inner { grid-template-columns: 1fr; } .hero-copy h1 { font-size: 64px; } .hero-script .script { font-size: 52px; } /* Chalkboard drops to 2 columns on tablet */ .chalk-grid { grid-template-columns: 1fr 1fr; } .chalk-tagline { display: none; } /* Too cramped at this width */ /* Menu grids drop to 2 columns */ .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } /* Section heading shrinks */ .section-title-row h2 { font-size: 40px; } /* Inside strip stacks vertically */ .inside-grid { grid-template-columns: 1fr; } /* Dog strip stacks and gets less padding */ .dog-strip { grid-template-columns: 1fr; padding: 32px 28px; } /* Visit section stacks */ .visit-grid { grid-template-columns: 1fr; } /* Footer drops to 2 columns */ .footer-grid { grid-template-columns: 1fr 1fr; } /* Nav links hidden on tablet — could add a hamburger menu here later */ .nav-links { display: none; } } /* --- Mobile (560px and below) --- */ @media (max-width: 560px) { /* Further reduce hero heading */ .hero-copy h1 { font-size: 48px; } .hero-script .script { font-size: 38px; } /* Section heading further reduced */ .section-title-row h2 { font-size: 32px; } /* All grids go single column */ .grid-3, .grid-4, .chalk-grid { grid-template-columns: 1fr; } /* Footer goes single column */ .footer-grid { grid-template-columns: 1fr; } } /* ============================================================ 18. Motion & Animations ============================================================ */ /* ── Keyframes ───────────────────────────────────────────── */ /* Rise with fade — main entrance */ @keyframes enter { from { opacity: 0; transform: translateY(32px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Nav drops from above */ @keyframes nav-in { from { transform: translateY(-110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Nav links cascade in individually */ @keyframes link-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Floating sticker bobs gently */ @keyframes float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-9px) rotate(-2deg); } } /* Pulsing dot on "Open now" badge */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } } /* Hero image drifts up softly */ @keyframes drift-up { from { opacity: 0; transform: translateY(48px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Script text sweeps in from the left */ @keyframes sweep-in { from { opacity: 0; transform: translateX(-24px) rotate(-2deg); } to { opacity: 1; transform: translateX(0) rotate(0deg); } } /* ── Nav entrance ────────────────────────────────────────── */ .nav { animation: nav-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both; } .nav-links a:nth-child(1) { animation: link-in 500ms 200ms cubic-bezier(0.16, 1, 0.3, 1) both; } .nav-links a:nth-child(2) { animation: link-in 500ms 300ms cubic-bezier(0.16, 1, 0.3, 1) both; } .nav-links a:nth-child(3) { animation: link-in 500ms 400ms cubic-bezier(0.16, 1, 0.3, 1) both; } .nav-links a:nth-child(4) { animation: link-in 500ms 500ms cubic-bezier(0.16, 1, 0.3, 1) both; } /* ── Hero staggered entrance ─────────────────────────────── */ .hero-copy .eyebrow { animation: enter 800ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both; } .hero-copy h1 { animation: enter 950ms 280ms cubic-bezier(0.16, 1, 0.3, 1) both; } .hero-script { animation: sweep-in 900ms 480ms cubic-bezier(0.16, 1, 0.3, 1) both; } .lede { animation: enter 900ms 600ms cubic-bezier(0.16, 1, 0.3, 1) both; } .button-row { animation: enter 800ms 750ms cubic-bezier(0.16, 1, 0.3, 1) both; } .badge-row { animation: enter 800ms 900ms cubic-bezier(0.16, 1, 0.3, 1) both; } .hero-media { animation: drift-up 1200ms 300ms cubic-bezier(0.16, 1, 0.3, 1) both; } /* ── Floating sticker ────────────────────────────────────── */ .fresh-sticker { animation: float 3.5s ease-in-out infinite; } /* ── Open badge dot pulse ────────────────────────────────── */ .badge-leaf .dot { animation: pulse 2.2s ease-in-out infinite; } /* ── Scroll reveal system ────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(44px) scale(0.98); transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); } /* Users who prefer reduced motion get instant visibility, no animation */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .fresh-sticker, .badge-leaf .dot { animation: none; } .nav, .nav-links a, .hero-copy .eyebrow, .hero-copy h1, .hero-script, .lede, .button-row, .badge-row, .hero-media { animation: none; } } /* ── Button hover lift ───────────────────────────────────── */ .btn { transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), filter 250ms ease, box-shadow 250ms ease; } .btn:hover { transform: translateY(-2px); filter: brightness(1.07); } .btn:active { transform: translateY(1px); filter: none; } /* ── Image hover scale ───────────────────────────────────── */ .hero-img { transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .hero-img:hover { transform: scale(1.03); } .visit-img { transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 600ms ease; } .visit-img:hover { transform: scale(1.025); box-shadow: 0 14px 36px rgba(30, 78, 122, 0.16); } /* ── Menu card hover lift ────────────────────────────────── */ .menu-card--pastry, .menu-card--drink { transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1); }