/* ========================================================================== Bossa Nova Cafe — proposed section refinements (PREVIEW ONLY) -------------------------------------------------------------------------- Not linked from any page. Layered on top of style.css to preview changes before anything is committed to the live stylesheet. Scope, per the brief: · layout, buttons, symbols, spacing ONLY · header, footer, images and all copy are untouched ========================================================================== */ :root { /* One spacing scale, so sections stop each inventing their own rhythm. */ --sp-1: 0.5rem; --sp-2: 0.875rem; --sp-3: 1.25rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4.5rem; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; } /* ── Full-bleed sections ────────────────────────────────────────────────── is a column flexbox, so each section is a flex item sized partly by its max-content contribution. That means capping the width of ANY child (for a readable line length) silently shrinks the whole section — the 3-card grid collapsed 1274px -> 888px this way, and the split section 1274px -> 1087px. Pinning sections to 100% makes the measure caps below safe. Verified in the browser. */ body > section, body > main, body > div:not([id]) { width: 100%; } /* ── Header must never compress ─────────────────────────────────────────── The hamburger only appeared at 768px, but the inline nav needs ~1067px to sit on one line (measured: nav 684px natural + logo 228px + 48px gap, over 90% of the viewport after the 5% side padding). Between 768px and ~1067px the nav squeezed and "SUNDAY ROAST" stacked onto two lines inside a 60px- wide item, pushing the header to 97px tall. Switching to the hamburger at 1080px means the nav is either full size or collapsed — never mid-squeeze. Only the nav rules are lifted; the rest of the 768px mobile block is left alone so tablets keep their normal layout. */ /* Belt and braces: a nav label may never wrap internally at any width. */ .main-nav .nav-list li, .main-nav .nav-link { white-space: nowrap; } @media (max-width: 1080px) { .header-container { position: relative; } .menu-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; z-index: 1002; -webkit-tap-highlight-color: transparent; } .main-nav { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; padding: calc(5rem + env(safe-area-inset-top)) 1.5rem calc(2rem + env(safe-area-inset-bottom)); background: rgba(8, 8, 8, 0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: none; clip-path: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s ease; z-index: 1001; overflow-y: auto; -webkit-overflow-scrolling: touch; } .main-nav.active { opacity: 1; visibility: visible; pointer-events: auto; } .main-nav .nav-list { flex-direction: column; align-items: stretch; gap: 0.25rem; max-width: 320px; margin: 0 auto; } .main-nav .nav-link { font-size: 1.05rem; padding: 0.85rem 1rem; display: block; text-align: center; border-radius: 8px; } } /* ── Accessibility: visible keyboard focus ──────────────────────────────── The site currently has no focus ring, so keyboard and screen-reader users cannot see where they are. This is the single biggest usability gap. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .editorial-btn:focus-visible, .contact-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; } /* ── Buttons ────────────────────────────────────────────────────────────── The site has four separate button systems (.btn, .editorial-btn, .contact-btn, and raw Tailwind). They differ in height, radius, weight and letter-spacing, which is what makes the site feel slightly unfinished. These rules fold them onto one shape and one rhythm. */ .btn, .editorial-btn, .contact-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; /* 48px min height — comfortable tap target on mobile (was ~44px). */ min-height: 48px; padding: 0.95rem 2.4rem; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 50px; text-decoration: none; white-space: nowrap; } /* Primary: solid gold. One clear action per section. */ .btn-primary { background: var(--gold); color: #0a0a0a; border: 1px solid var(--gold); } .btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); box-shadow: 0 10px 30px rgba(204,168,118,0.22); } /* Secondary: outline. Sits beside primary without competing. */ .btn-outline { background: transparent; color: var(--gold); border: 1px solid var(--border-hover); } .btn-outline:hover { background: rgba(204,168,118,0.07); border-color: var(--gold); color: var(--gold); } /* Button pairs share a baseline and wrap cleanly on narrow screens. */ .button-group, .hero .button-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: stretch; } @media (max-width: 480px) { .button-group > .btn { flex: 1 1 100%; } } /* ── Section headings ───────────────────────────────────────────────────── The gradient-clipped heading is a stock "AI website" tell, and it renders as flat grey wherever background-clip is unsupported. Solid text plus a short gold rule reads more confident and is far more legible. */ .section-title { background: none; -webkit-text-fill-color: currentColor; color: var(--text-main); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: var(--sp-3); } .section-title::after { content: ''; display: block; width: 52px; height: 2px; margin: var(--sp-3) auto 0; background: var(--gold); opacity: 0.8; } .split-section .section-title::after, .split-content .section-title::after { margin-left: 0; margin-right: auto; } .section-subtitle { margin-bottom: var(--sp-5); max-width: 62ch; } /* ── Cards ──────────────────────────────────────────────────────────────── Consistent radius and a restrained hover. The current 1.03 image scale plus a translate reads as two competing motions. */ .card { border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-secondary); transition: transform 0.4s var(--ease-out-expo), border-color 0.4s ease, box-shadow 0.4s ease; } .card:hover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: 0 18px 45px rgba(0,0,0,0.45); } .card:hover .card-img { transform: none; } .card-title { letter-spacing: -0.01em; margin-bottom: var(--sp-1); } .card-text { line-height: 1.75; } /* ── Grids ──────────────────────────────────────────────────────────────── The 3-up grid currently jumps straight from three columns to one at 900px, so tablets get a single stacked column with a lot of dead space. Add a two-column stage in between. NOTE: do NOT use `repeat(auto-fit, minmax(...))` here. is a column flexbox, and auto-fit changes the grid's max-content contribution, which collapses the whole section from 1274px to 888px. Explicit column counts keep the section full-bleed. Verified in the browser. */ @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; gap: 1.25rem; } } /* ── Hero legibility ────────────────────────────────────────────────────── Measured: subtitle is #9a958d over a 60% scrim, sitting on the bright lamp-lit part of the photo. A stronger left-weighted scrim fixes contrast without touching the image itself. */ .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.72) 42%, rgba(8,8,8,0.25) 72%, rgba(8,8,8,0.1) 100%); pointer-events: none; z-index: 0; } .hero-content, .hero-image { position: relative; z-index: 1; } .hero-subtitle { color: #cfcac1; /* lifted from #9a958d for contrast over photo */ max-width: 52ch; line-height: 1.75; } .split-tag, .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.72rem; font-weight: 700; } /* ── Symbols / icon badges ──────────────────────────────────────────────── Icons currently sit as bare emoji at inconsistent sizes. A circular outlined badge gives them a common footprint and alignment. */ .card-icon, .contact-icon, .info-icon, .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-hover); background: rgba(204,168,118,0.06); font-size: 1.15rem; line-height: 1; flex: 0 0 auto; } /* ── Inner page heroes ──────────────────────────────────────────────────── Tighter vertical rhythm; the current padding pushes real content well below the fold on laptops. */ .page-hero { padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } .page-hero h1 { letter-spacing: -0.025em; line-height: 1.08; } .page-hero p { max-width: 60ch; margin-left: auto; margin-right: auto; line-height: 1.75; } /* ── Split sections ─────────────────────────────────────────────────────── Consistent gap and vertical centring; content columns get a readable measure instead of running the full width. */ .split-section { gap: clamp(var(--sp-4), 5vw, var(--sp-6)); align-items: center; } .split-content { max-width: 56ch; } /* ── Forms ──────────────────────────────────────────────────────────────── Consistent field height and radius across the catering form, contact form and roast booking form, which currently differ. */ .contact-form-panel input, .contact-form-panel select, .contact-form-panel textarea, .form-group input, .form-group select, .form-group textarea { min-height: 48px; border-radius: var(--radius-sm); padding: 0.8rem 1rem; } .contact-form-panel textarea, .form-group textarea { min-height: 120px; } /* ── Content pages (terms, FAQ) ─────────────────────────────────────────── Long legal copy at full width is hard to read; cap the measure. */ .content-page { max-width: 78ch; margin-left: auto; margin-right: auto; line-height: 1.85; } .content-page h2, .content-page h3 { margin-top: var(--sp-4); margin-bottom: var(--sp-2); } /* Motion: style.css already has a prefers-reduced-motion block (line ~830) that covers animations, transitions and .reveal. Nothing to add here. */