/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #030d0f #2b2620 #faf6ee #145f6b #1a7a8a #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #faf6ee; --surface: #fdfbf7; --surface-2: #eeeae3; --border: #d7d5cf; --border-strong: #b0b0ab; --ink: #2b2620; --muted: #746f69; --accent: #145f6b; --accent-hover: #11515b; --accent-ink: #ffffff; --accent-text: #1a7a8a; --accent-strong: #145f6b; --accent-soft: #dae1dc; --accent-border: #93b2b3; --success: #15803d; --success-ink: #ffffff; --success-soft: #dfe8d9; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f2e2d3; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f2dcd5; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #030d0f; --surface: #1c2527; --surface-2: #10191b; --border: #262f31; --border-strong: #4f5657; --ink: #faf6ee; --muted: #979995; --accent: #145f6b; --accent-hover: #377781; --accent-ink: #ffffff; --accent-text: #48838c; --accent-strong: #578d95; --accent-soft: #071f23; --accent-border: #0b3238; --success: #15803d; --success-ink: #ffffff; --success-soft: #072619; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2a1c0e; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2b1012; --danger-strong: #d16969; } /* ==================================================================== * app.css — Maré, a Goan seafood restaurant site. * Breezy, sunlit, editorial: generous whitespace, soft rounded surfaces, * a single teal accent kept for the primary action, and monospaced * numerals wherever a price appears — a small nod to a printed menu card. * ==================================================================== */ :root { /* Softer, more generous rounding than the system default — the coastal, whitewashed-plaster feel the brief asked for. */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; /* A touch more room to breathe between sections on a page that is mostly reading and looking, not operating controls. */ --s-7: 36px; --s-9: 56px; } /* ---- In-page navigation ------------------------------------------------ A one-page site: anchor links should land below the sticky topbar, not half under it. */ html { scroll-behavior: smooth; } .hero, .section { scroll-margin-top: calc(60px + var(--s-4)); } /* ---- Section rhythm ------------------------------------------------- */ .eyebrow { display: block; font-size: var(--t-xs); font-weight: var(--fw-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); } .section-title { font-size: var(--t-3xl); font-weight: var(--fw-semi); letter-spacing: var(--track-tight); line-height: var(--lh-tight); } .section-sub { color: var(--muted); margin-top: var(--s-2); max-width: var(--measure); } .site-navlink { color: var(--muted); font-weight: var(--fw-medium); font-size: var(--t-sm); transition: color var(--dur-1) var(--ease); } .site-navlink:hover { color: var(--ink); } .form-narrow { max-width: 640px; margin-inline: auto; } /* ---- Hero ------------------------------------------------------------ A tall photographic band, rounded and lifted, with a scrim mixed from the page's OWN tokens rather than a fixed colour — see the two rules below, which pick a different (but always dark) token per theme so the overlay text stays legible whichever mode the visitor is in. */ .hero { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); min-height: clamp(420px, 62vh, 640px); box-shadow: var(--shadow-xl); } .hero-media { position: absolute; inset: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in srgb, var(--ink) 82%, transparent) 0%, color-mix(in srgb, var(--ink) 38%, transparent) 48%, color-mix(in srgb, var(--ink) 5%, transparent) 78% ); } html[data-theme="dark"] .hero-scrim { background: linear-gradient( to top, color-mix(in srgb, var(--canvas) 88%, transparent) 0%, color-mix(in srgb, var(--canvas) 42%, transparent) 48%, color-mix(in srgb, var(--canvas) 8%, transparent) 78% ); } .hero-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-8) var(--s-8) var(--s-9); } .hero-eyebrow { color: color-mix(in srgb, var(--accent-ink) 85%, transparent); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: var(--t-xs); font-weight: var(--fw-semi); margin-bottom: var(--s-3); } .hero-title { font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: var(--lh-tight); letter-spacing: var(--track-tight); font-weight: var(--fw-semi); color: var(--accent-ink); } .hero-sub { margin-top: var(--s-4); max-width: 52ch; font-size: var(--t-lg); color: color-mix(in srgb, var(--accent-ink) 92%, transparent); } .hero-ghost-btn { border: 1px solid color-mix(in srgb, var(--accent-ink) 55%, transparent); } .hero-ghost-btn:hover { background: color-mix(in srgb, var(--accent-ink) 16%, transparent); } @media (max-width: 640px) { .hero-content { padding: var(--s-6) var(--s-5) var(--s-7); } } /* ---- Menu ------------------------------------------------------------- Prices set in the mono face and aligned right, like a printed card. */ .menu-list { display: flex; flex-direction: column; } .menu-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); } .menu-row:first-child { padding-top: 0; } .menu-row:last-child { border-bottom: none; padding-bottom: 0; } .menu-row-main { flex: 1 1 auto; min-width: 0; } .menu-row-name { font-weight: var(--fw-semi); font-size: var(--t-md); color: var(--ink); } .menu-row-desc { color: var(--muted); font-size: var(--t-sm); margin-top: var(--s-1); max-width: 48ch; } .menu-row-price { font-family: var(--font-mono); font-weight: var(--fw-semi); white-space: nowrap; color: var(--ink); } /* ---- Chef's-pick dish cards -------------------------------------------- */ .dish-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .dish-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .dish-card-label { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-5); font-weight: var(--fw-semi); } .dish-card-label .nums { font-family: var(--font-mono); color: var(--accent-text); } /* ---- Map embed, sharing the .media frame ------------------------------ */ .media > iframe { width: 100%; height: 100%; border: 0; display: block; } /* ---- Footer ------------------------------------------------------------ */ .site-footer { margin-top: var(--s-9); padding: var(--s-7) 0 var(--s-6); border-top: 1px solid var(--border); } /* ---- Small screens ------------------------------------------------------ */ @media (max-width: 640px) { .grid-3, .grid-2, .split { gap: var(--s-4); } } @media (prefers-reduced-motion: reduce) { .dish-card { transition: none; } html { scroll-behavior: auto; } }