/* Corner & Bloom — Design tokens (--cvg-*) per DESIGN-TOKENS.md */ :root { --cvg-color-primary: #C1613C; /* terracotta — true brand swatch, large/decorative use only */ --cvg-color-secondary: #7D8C6E; /* sage — true brand swatch, large/decorative use only */ --cvg-color-bg: #F7F0E6; /* warm cream */ --cvg-color-text: #2B2622; /* deep charcoal */ --cvg-color-surface: #FFFDF9; --cvg-color-primary-tint: #C1613C1a; /* WCAG AA-safe darkened variants for small/normal-weight text and text-bearing backgrounds — the base swatches above fail 4.5:1 at UI text sizes (checked: terracotta-on-white buttons measured 4.10:1, terracotta links-on-cream measured 3.68:1, sage-background utility bar measured 3.53:1). Use these `-ink` tokens anywhere colour carries text; keep the base tokens for large decorative fills, borders, and swatches. */ --cvg-color-primary-ink: #9a4d30; /* 5.3-5.9:1 vs cream/white */ --cvg-color-secondary-ink: #647058; /* 5.2:1 vs white */ --cvg-font-display: "Fraunces", ui-serif, Georgia, serif; --cvg-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --cvg-font-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --cvg-space-1: 4px; --cvg-space-2: 8px; --cvg-space-3: 16px; --cvg-space-4: 24px; --cvg-space-5: 40px; --cvg-space-6: 64px; --cvg-space-7: 96px; --cvg-radius: 14px; --cvg-max: 1160px; } @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-variable.woff2") format("woff2-variations"), url("../fonts/fraunces-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-variable.woff2") format("woff2-variations"), url("../fonts/inter-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jbmono-variable.woff2") format("woff2-variations"), url("../fonts/jbmono-variable.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } /* Preload hint targets — see in per page */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cvg-color-bg); color: var(--cvg-color-text); font-family: var(--cvg-font-body); font-size: 1rem; line-height: 1.6; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--cvg-font-display); line-height: 1.15; margin: 0 0 var(--cvg-space-3); } h1 { font-size: clamp(2.1rem, 4vw + 1rem, 3.4rem); font-weight: 600; } h2 { font-size: clamp(1.6rem, 2.4vw + 1rem, 2.3rem); font-weight: 600; } h3 { font-size: 1.15rem; font-weight: 600; } p { margin: 0 0 var(--cvg-space-3); } .cvg-wrap { max-width: var(--cvg-max); margin-inline: auto; padding-inline: var(--cvg-space-4); } .cvg-data { font-family: var(--cvg-font-data); font-variant-numeric: tabular-nums; } /* Visible focus states — accessibility, non-negotiable */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--cvg-color-secondary); outline-offset: 2px; } .cvg-skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--cvg-color-text); color: var(--cvg-color-bg); padding: var(--cvg-space-2) var(--cvg-space-3); border-radius: 0 0 8px 0; } .cvg-skip-link:focus { left: 0; } .cvg-btn { display: inline-flex; align-items: center; gap: var(--cvg-space-2); font-family: var(--cvg-font-body); font-weight: 600; font-size: 0.95rem; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform 200ms ease-out, background 200ms ease-out; } .cvg-btn:hover { transform: translateY(-2px); } .cvg-btn--primary { background: var(--cvg-color-primary-ink); color: var(--cvg-color-surface); } .cvg-btn--primary:hover { background: #7d3e26; } .cvg-btn--ghost { background: transparent; border-color: currentColor; color: var(--cvg-color-text); } .cvg-btn--on-photo { background: var(--cvg-color-surface); color: var(--cvg-color-text); } /* ---------- utility-bar header ---------- */ .cvg-utility { background: var(--cvg-color-secondary-ink); color: var(--cvg-color-surface); font-size: 0.85rem; font-family: var(--cvg-font-data); } .cvg-utility__row { display: flex; align-items: center; justify-content: space-between; gap: var(--cvg-space-3); padding-block: 8px; flex-wrap: wrap; } .cvg-utility a { text-decoration: none; } .cvg-utility__hours { opacity: 0.95; } .cvg-utility__cta { background: var(--cvg-color-surface); color: var(--cvg-color-text); padding: 4px 14px; border-radius: 999px; font-weight: 700; font-family: var(--cvg-font-body); font-size: 0.8rem; } .cvg-header { background: var(--cvg-color-bg); border-bottom: 1px solid #2b26221a; position: sticky; top: 0; z-index: 20; } .cvg-header__row { display: flex; align-items: center; justify-content: space-between; padding-block: var(--cvg-space-3); } .cvg-wordmark { font-family: var(--cvg-font-display); font-weight: 700; font-size: 1.4rem; text-decoration: none; color: var(--cvg-color-text); letter-spacing: -0.01em; } .cvg-wordmark span { color: var(--cvg-color-primary); } .cvg-nav { display: flex; gap: var(--cvg-space-5); list-style: none; margin: 0; padding: 0; } .cvg-nav a { text-decoration: none; font-weight: 500; } .cvg-nav a[aria-current="page"] { color: var(--cvg-color-primary-ink); font-weight: 700; } .cvg-nav-toggle { display: none; } @media (max-width: 760px) { .cvg-nav { position: fixed; inset: 0 0 0 30%; background: var(--cvg-color-surface); flex-direction: column; padding: var(--cvg-space-6) var(--cvg-space-4); gap: var(--cvg-space-4); transform: translateX(100%); transition: transform 240ms ease-out; box-shadow: -8px 0 24px #0002; } .cvg-nav.cvg-is-open { transform: none; } .cvg-nav-toggle { display: block; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--cvg-color-text); padding: 4px 8px; } .cvg-utility__row { font-size: 0.78rem; } } /* ---------- hero: full-bleed-cinematic ---------- */ .cvg-hero { position: relative; min-height: min(88vh, 760px); display: flex; align-items: flex-end; color: var(--cvg-color-surface); overflow: hidden; } .cvg-hero picture, .cvg-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .cvg-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, #2b2622cc 0%, #2b262299 32%, transparent 62%); } .cvg-hero__content { position: relative; z-index: 2; max-width: 620px; padding: var(--cvg-space-7) var(--cvg-space-4); } .cvg-hero__eyebrow { font-family: var(--cvg-font-data); letter-spacing: 0.12em; font-size: 0.8rem; opacity: 0.9; } .cvg-hero h1 { color: var(--cvg-color-surface); } .cvg-hero__sub { font-size: 1.15rem; max-width: 46ch; } .cvg-hero__ctas { display: flex; gap: var(--cvg-space-3); flex-wrap: wrap; margin-top: var(--cvg-space-4); } /* ---------- card-stack ---------- */ .cvg-stack { padding-block: var(--cvg-space-7); } .cvg-stack__head { max-width: 60ch; margin-bottom: var(--cvg-space-5); } .cvg-stack__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cvg-space-4); } .cvg-stack__card { text-decoration: none; color: inherit; display: block; border-radius: var(--cvg-radius); overflow: hidden; background: var(--cvg-color-surface); box-shadow: 0 1px 3px #2b262214; } .cvg-stack__img-box { aspect-ratio: 4 / 3; overflow: hidden; } .cvg-stack__img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms ease-out; } .cvg-stack__card:hover .cvg-stack__img-box img { transform: scale(1.03); } .cvg-stack__body { padding: var(--cvg-space-4); } .cvg-stack__body h3 { margin-bottom: 6px; } .cvg-stack__body p { font-size: 0.92rem; margin-bottom: var(--cvg-space-2); } .cvg-stack__link { font-weight: 700; font-size: 0.85rem; color: var(--cvg-color-primary-ink); } @media (max-width: 900px) { .cvg-stack__grid { grid-template-columns: 1fr; } } /* ---------- split-cta ---------- */ .cvg-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--cvg-color-primary-tint); } .cvg-split__img { aspect-ratio: 1 / 1; overflow: hidden; } .cvg-split__img img { width: 100%; height: 100%; object-fit: cover; } .cvg-split__body { padding: var(--cvg-space-7) var(--cvg-space-6); display: flex; flex-direction: column; justify-content: center; gap: var(--cvg-space-3); } .cvg-split__body p { max-width: 42ch; } @media (max-width: 760px) { .cvg-split { grid-template-columns: 1fr; } .cvg-split__body { padding: var(--cvg-space-6) var(--cvg-space-4); order: 1; } .cvg-split__img { order: 0; } } /* ---------- 2-col-alternating ---------- */ .cvg-alt { padding-block: var(--cvg-space-7); display: flex; flex-direction: column; gap: var(--cvg-space-7); } .cvg-alt__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cvg-space-4); align-items: center; } .cvg-alt__row--reverse .cvg-alt__img { order: 1; } .cvg-alt__img { aspect-ratio: 4 / 3; border-radius: var(--cvg-radius); overflow: hidden; } .cvg-alt__img img { width: 100%; height: 100%; object-fit: cover; } .cvg-alt__body p { max-width: 46ch; } @media (max-width: 760px) { .cvg-alt__row, .cvg-alt__row--reverse { grid-template-columns: 1fr; } .cvg-alt__row--reverse .cvg-alt__img { order: 0; } } /* ---------- masonry gallery ---------- */ .cvg-gallery { padding-block: var(--cvg-space-7); } .cvg-gallery__head { max-width: 60ch; margin-bottom: var(--cvg-space-5); } .cvg-gallery__grid { columns: 3 220px; column-gap: var(--cvg-space-3); } .cvg-gallery__tile { break-inside: avoid; margin-bottom: var(--cvg-space-3); border-radius: var(--cvg-radius); overflow: hidden; position: relative; } .cvg-gallery__tile img { width: 100%; height: auto; display: block; } .cvg-gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--cvg-space-2) var(--cvg-space-3); background: linear-gradient(0deg, #2b2622cc, transparent); color: var(--cvg-color-surface); font-size: 0.8rem; } /* ---------- contact-heavy (footer + visit page) ---------- */ .cvg-contact-heavy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cvg-space-5); align-items: start; } .cvg-contact-heavy__map { aspect-ratio: 4 / 3; border-radius: var(--cvg-radius); background: var(--cvg-color-primary-tint); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--cvg-space-4); border: 2px dashed var(--cvg-color-secondary); font-size: 0.9rem; overflow: hidden; } .cvg-contact-heavy__map img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--cvg-radius) - 2px); } .cvg-hours-table { width: 100%; border-collapse: collapse; font-family: var(--cvg-font-data); font-size: 0.92rem; margin-block: var(--cvg-space-3); } .cvg-hours-table td { padding: 6px 0; border-bottom: 1px solid #2b262214; } .cvg-hours-table td:last-child { text-align: right; } .cvg-hours-table tr[data-today] td { font-weight: 700; color: var(--cvg-color-primary-ink); } /* Dark footer context: a darkened-terracotta TEXT colour fails contrast against charcoal (checked: 2.48:1), so highlight with a background wash instead of a text-colour change — the row keeps the footer's own light text colour, which is already verified safe (13.2:1) against the charcoal background. */ .cvg-footer .cvg-hours-table tr[data-today] td { color: inherit; background: #c1613c33; } .cvg-nap p { margin: 0 0 4px; } @media (max-width: 760px) { .cvg-contact-heavy { grid-template-columns: 1fr; } .cvg-contact-heavy__details { order: 0; } .cvg-contact-heavy__map { order: 1; } } .cvg-footer { background: var(--cvg-color-text); color: var(--cvg-color-bg); padding-block: var(--cvg-space-6) var(--cvg-space-4); } .cvg-footer a { color: var(--cvg-color-bg); } .cvg-footer .cvg-hours-table td { border-bottom-color: #f7f0e622; } .cvg-footer .cvg-contact-heavy__map { border-color: var(--cvg-color-secondary); color: var(--cvg-color-bg); } .cvg-footer__legal { margin-top: var(--cvg-space-6); padding-top: var(--cvg-space-4); border-top: 1px solid #f7f0e622; display: flex; justify-content: space-between; gap: var(--cvg-space-3); flex-wrap: wrap; font-size: 0.85rem; } .cvg-footer__badge { opacity: 0.85; } .cvg-footer__badge a { text-decoration: underline; } /* ---------- contact form ---------- */ .cvg-form { display: grid; gap: var(--cvg-space-3); max-width: 480px; } .cvg-form label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; } .cvg-form input, .cvg-form textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1.5px solid #2b262233; font-family: var(--cvg-font-body); font-size: 1rem; background: var(--cvg-color-surface); color: var(--cvg-color-text); } .cvg-form__note { font-size: 0.85rem; opacity: 0.75; } /* ---------- menu page ---------- */ .cvg-menu-section { padding-block: var(--cvg-space-6); border-top: 1px solid #2b262214; } .cvg-menu-section:first-of-type { border-top: none; } .cvg-menu-item { display: flex; justify-content: space-between; gap: var(--cvg-space-3); padding-block: var(--cvg-space-2); } .cvg-menu-item__name { font-weight: 700; } .cvg-menu-item__desc { font-size: 0.9rem; opacity: 0.85; max-width: 52ch; } .cvg-menu-item__price { font-family: var(--cvg-font-data); white-space: nowrap; } .cvg-tag { font-size: 0.7rem; font-family: var(--cvg-font-data); background: var(--cvg-color-secondary-ink); color: var(--cvg-color-surface); padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; } /* ---------- scroll reveal — cvg canonical (animation-style skill) ---------- */ .js .cvg-reveal-target { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease-out, transform 600ms ease-out; transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; } .js .cvg-reveal-target.cvg-is-visible { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .js .cvg-reveal-target, .js .cvg-reveal-target.cvg-is-visible { opacity: 1; transform: none; transition: none; transition-delay: 0ms; will-change: auto; } } .cvg-section-pad { padding-block: var(--cvg-space-7); }