/* ========================================================================== VATRA — bistro românesc · demo IMESSA Two lights, one hearth: default is evening (candle-lit); [data-moment="zi"] on turns the room to daylight. ========================================================================== */ :root { /* — seara (default) — */ --bg: #191210; --bg-2: #211813; --bg-3: #2a1e17; --ink: #f1e5d3; --ink-soft: #c9b299; --ink-faint: #977f69; --line: #3d2f25; --ember: #e2833f; --flame: #f0a44a; --wine: #7a2d35; --wine-ink: #f4e8d8; --stone: #8a745f; --wood: #6e4f38; --focus: #f0a44a; --grain-alpha: .05; color-scheme: dark; } :root[data-moment="zi"] { /* — prânz — */ --bg: #f4ead9; --bg-2: #ecdfc8; --bg-3: #e4d4b8; --ink: #2e2018; --ink-soft: #5f4936; --ink-faint: #8d735c; --line: #d5c3a8; --ember: #b04f1c; --flame: #c96a24; --wine: #7c2934; --wine-ink: #f6ecdc; --stone: #a08966; --wood: #8a6647; --focus: #7c2934; --grain-alpha: .07; color-scheme: light; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Lora", Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: "Gloock", Georgia, serif; font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: .005em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; } svg { display: block; } ::selection { background: var(--ember); color: #1c120a; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; } .container { max-width: 1100px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; left: 1rem; top: -3.5rem; z-index: 100; padding: .6em 1.1em; background: var(--ink); color: var(--bg); border-radius: 999px; font-size: .9rem; text-decoration: none; transition: top .2s ease; } .skip-link:focus { top: 1rem; } .eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ember); } /* JS-dependent copy */ html:not(.js) .js-only { display: none; } html.js .nojs-only { display: none; } /* ---------- theme change: let the light move slowly ---------- */ @media (prefers-reduced-motion: no-preference) { html.theme-anim body, html.theme-anim .top, html.theme-anim .moment, html.theme-anim .moment-btn, html.theme-anim .btn, html.theme-anim .story, html.theme-anim .visit-cell, html.theme-anim .menu-note, html.theme-anim footer { transition: background-color .8s ease, color .8s ease, border-color .8s ease; } html.theme-anim .scene path, html.theme-anim .scene g, html.theme-anim .scene circle, html.theme-anim .scene rect, html.theme-anim .hero-arch, html.theme-anim .story-grain { transition: opacity .8s ease, fill .8s ease, stroke .8s ease, color .8s ease; } } /* ---------- header ---------- */ .top { position: sticky; top: 0; z-index: 50; background: var(--bg); background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--line); } .top-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; padding-block: .8rem; } .brand { display: inline-flex; align-items: center; gap: .55rem; font-family: "Gloock", Georgia, serif; font-size: 1.35rem; text-decoration: none; letter-spacing: .01em; } .brand-mark { color: var(--ember); } .top nav { display: flex; gap: clamp(1rem, 2.5vw, 1.8rem); font-size: .88rem; } .top nav a { text-decoration: none; color: var(--ink-soft); letter-spacing: .04em; padding-block: .2em; } .top nav a:hover { color: var(--ink); } /* — the moment switch — */ .moment { display: inline-flex; align-items: center; gap: .2rem; padding: .22rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); background: color-mix(in srgb, var(--bg-2) 70%, transparent); } html:not(.js) .moment { display: none; } .moment-btn { display: inline-flex; align-items: center; gap: .45em; border: 0; background: transparent; color: var(--ink-faint); font: 600 .78rem/1 "Lora", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; padding: .55em 1em; border-radius: 999px; cursor: pointer; } .moment-btn:hover { color: var(--ink); } .moment-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); } @media (max-width: 700px) { .top nav { flex-basis: 100%; justify-content: flex-start; padding-bottom: .3rem; } .top-row { padding-block: .7rem .1rem; row-gap: .35rem; } } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .hero-arch { position: absolute; inset: auto 0 0 0; margin-inline: auto; width: min(1200px, 130%); height: 92%; color: var(--ink); opacity: .06; pointer-events: none; } :root[data-moment="zi"] .hero-arch { opacity: .09; } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: clamp(4rem, 10vh, 7rem) clamp(3.5rem, 9vh, 6rem); } .hero h1 { font-size: clamp(2.75rem, 7.2vw, 5.1rem); margin-top: 1.1rem; max-width: 11ch; } .hero h1 em { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 500; color: var(--ember); } .lead { margin-top: 1.4rem; max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--ink-soft); } .hero-cta { margin-top: 2.2rem; display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: .6em; background: var(--wine); color: var(--wine-ink); text-decoration: none; font-weight: 600; font-size: .95rem; letter-spacing: .02em; padding: .9em 1.5em; border-radius: 999px; border: 1px solid var(--wine); border-color: color-mix(in srgb, var(--wine) 60%, var(--ember)); } .btn:hover { background: color-mix(in srgb, var(--wine) 82%, var(--ember)); } .cta-note { font-size: .8rem; font-style: italic; color: var(--ink-faint); } .hero-facts { display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; margin: 2.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); } .hero-facts dt { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); } .hero-facts dd { margin: .25rem 0 0; font-size: .95rem; color: var(--ink-soft); } /* — the hearth scene — */ .hero-scene { justify-self: center; width: 100%; max-width: 400px; } .scene { width: 100%; height: auto; } .scene-stone { color: var(--stone); } .scene-wood { color: var(--wood); } .scene-glow { opacity: 1; } :root[data-moment="zi"] .scene-glow { opacity: .25; } .scene-flame { transform-origin: 210px 352px; } :root[data-moment="zi"] .scene-flame { opacity: .14; } .scene-steam { opacity: 0; color: var(--stone); } :root[data-moment="zi"] .scene-steam { opacity: .6; } .scene-sparks { opacity: 1; } :root[data-moment="zi"] .scene-sparks { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .scene-flame { animation: flicker 3.4s ease-in-out infinite; } .spark { animation: rise 2.8s ease-in-out infinite; } .spark.s2 { animation-delay: .9s; } .spark.s3 { animation-delay: 1.7s; } } @keyframes flicker { 0%, 100% { transform: scaleX(1) scaleY(1); } 38% { transform: scaleX(.965) scaleY(1.045); } 72% { transform: scaleX(1.02) scaleY(.985); } } @keyframes rise { 0% { transform: translateY(6px); opacity: 0; } 35% { opacity: .9; } 100% { transform: translateY(-26px); opacity: 0; } } .scene-caption { margin-top: 1.1rem; text-align: center; font-style: italic; font-size: .88rem; color: var(--ink-faint); } .cap-zi { display: none; } :root[data-moment="zi"] .cap-zi { display: inline; } :root[data-moment="zi"] .cap-seara { display: none; } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-scene { max-width: 300px; } .hero h1 { max-width: none; } } /* ---------- sections ---------- */ .section-head { text-align: center; } .section-head h2 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-top: .9rem; } .section-sub { margin: 1rem auto 0; max-width: 52ch; color: var(--ink-soft); } /* ---------- meniul ---------- */ .menu { padding-block: clamp(4rem, 10vh, 7rem); scroll-margin-top: 4.5rem; } .menu-col { max-width: 720px; } .menu-block { margin-top: clamp(2.5rem, 6vh, 4rem); } html.js .menu-block { display: none; } html.js .menu-block.is-active { display: block; } @media (prefers-reduced-motion: no-preference) { html.js .menu-block.is-active { animation: menu-in .55s cubic-bezier(.22, 1, .36, 1); } } @keyframes menu-in { from { opacity: 0; transform: translateY(14px); } } /* without JS both menus stay readable, one after the other */ html:not(.js) .menu-block + .menu-block { border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 6vh, 4rem); } .menu-when { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); text-align: center; } .orn { flex: 0 1 56px; border-top: 1px solid var(--line); } .course { margin-top: clamp(2.75rem, 7vh, 4.25rem); } .course-head { text-align: center; } .course-no { font-family: "Gloock", Georgia, serif; font-size: .95rem; color: var(--ember); letter-spacing: .3em; } .course-head h3 { font-size: clamp(1.55rem, 3.2vw, 2rem); margin-top: .35rem; } .course-orn { width: 120px; height: 14px; margin: .9rem auto 0; color: var(--line); } .course-orn path:last-child { color: var(--ember); } .dishes { max-width: 620px; margin: 1.9rem auto 0; } .dish + .dish { margin-top: 1.5rem; } .dish-line { display: flex; align-items: baseline; gap: .65em; } .dish-name { font-family: "Gloock", Georgia, serif; font-size: clamp(1.02rem, 1.6vw, 1.14rem); line-height: 1.3; } .dish-dots { flex: 1 1 1.5em; min-width: 1.5em; border-bottom: 1px dotted var(--ink-faint); border-bottom-color: color-mix(in srgb, var(--ink-faint) 70%, transparent); transform: translateY(-.3em); } .dish-price { font-weight: 600; font-size: .92rem; color: var(--ember); font-variant-numeric: tabular-nums; white-space: nowrap; } .dish-desc { margin-top: .3rem; font-style: italic; font-size: .93rem; color: var(--ink-soft); max-width: 46ch; } .menu-note { display: flex; align-items: center; gap: 1.25rem; max-width: 620px; margin: clamp(3rem, 8vh, 4.5rem) auto 0; padding: 1.5rem 0; border-block: 1px solid var(--line); color: var(--ink-soft); font-size: .95rem; } .note-mark { flex: 0 0 auto; width: 44px; height: 44px; color: var(--ember); } .menu-note em { color: var(--ink); } /* ---------- povestea ---------- */ .story { position: relative; overflow: hidden; background: var(--bg-2); border-block: 1px solid var(--line); padding-block: clamp(4rem, 10vh, 6.5rem); scroll-margin-top: 4.5rem; } .story-grain { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--wood); opacity: var(--grain-alpha); pointer-events: none; } .story-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: start; } .pull { font-family: "Gloock", Georgia, serif; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.2; margin-top: 1.1rem; max-width: 14ch; } .story-text p + p { margin-top: 1.1rem; } .story-text { color: var(--ink-soft); max-width: 58ch; } .has-cap::first-letter { font-family: "Gloock", Georgia, serif; font-size: 3.4em; float: left; line-height: .78; padding: .06em .14em 0 0; color: var(--ember); } .story-sign { margin-top: 1.8rem !important; font-family: "Gloock", Georgia, serif; font-size: 1.15rem; color: var(--ink); } .story-sign span { display: block; font-family: "Lora", Georgia, serif; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-top: .3rem; } @media (max-width: 780px) { .story-grid { grid-template-columns: 1fr; } .pull { max-width: none; } } /* ---------- rezervări ---------- */ .visit { padding-block: clamp(4rem, 10vh, 7rem); scroll-margin-top: 4.5rem; } .visit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(2.5rem, 6vh, 4rem); } /* three arched niches, like the hearth itself */ .visit-cell { background: var(--bg-2); border: 1px solid var(--line); border-radius: 165px 165px 12px 12px; padding: clamp(2.75rem, 5vw, 3.75rem) clamp(1.25rem, 3vw, 2rem) 2rem; text-align: center; } .visit-cell h3 { font-size: 1.35rem; } .visit-cell > p { margin-top: .9rem; font-size: .95rem; color: var(--ink-soft); } .tel-big { display: inline-block; margin-top: 1.4rem; font-family: "Gloock", Georgia, serif; font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--ember); border-bottom-color: color-mix(in srgb, var(--ember) 45%, transparent); padding-bottom: .1em; } .tel-big:hover { border-bottom-color: var(--ember); } .visit-tel .cta-note { display: block; margin-top: .8rem; } .hours { margin-top: 1.3rem; text-align: left; } .hours li { display: flex; align-items: baseline; gap: .6em; font-size: .93rem; padding-block: .45em; } .hours li span:first-child { color: var(--ink); } .hours li span:last-child { color: var(--ink-soft); white-space: nowrap; } .hours-dots { flex: 1; border-bottom: 1px dotted var(--ink-faint); border-bottom-color: color-mix(in srgb, var(--ink-faint) 70%, transparent); transform: translateY(-.3em); } .hours-note { margin-top: 1rem; font-size: .84rem; font-style: italic; color: var(--ink-faint); text-align: left; } .addr { margin-top: 1.2rem !important; font-family: "Gloock", Georgia, serif; font-size: 1.2rem; color: var(--ink) !important; line-height: 1.4; } @media (max-width: 880px) { .visit-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } } /* ---------- footer ---------- */ footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: 2.25rem 2.75rem; } .foot-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .foot-brand { display: inline-flex; align-items: center; gap: .55rem; font-family: "Gloock", Georgia, serif; font-size: 1.05rem; } .foot-brand svg { color: var(--ember); } .foot-legal { font-size: .84rem; color: var(--ink-faint); text-align: right; } .foot-legal p + p { margin-top: .35rem; } .foot-legal a { color: var(--ink-soft); text-decoration-color: color-mix(in srgb, var(--ember) 60%, transparent); text-underline-offset: 3px; } .foot-legal a:hover { color: var(--ember); } @media (max-width: 600px) { .foot-row { flex-direction: column; } .foot-legal { text-align: left; } } /* ---------- reveals (JS adds .is-revealed; 2s safety net in script) ---------- */ @media (prefers-reduced-motion: no-preference) { html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); } html.js [data-reveal].is-revealed { opacity: 1; transform: none; } }