/* ========================================================================== Flora Timișoara — styles Theme tokens switch on . ========================================================================== */ :root { --ease: cubic-bezier(.2, .7, .2, 1); --pad: clamp(20px, 4.2vw, 60px); --gap: clamp(12px, 1.6vw, 24px); --gapL: clamp(28px, 4.6vw, 72px); --h1: clamp(40px, 7vw, 84px); --h2: clamp(30px, 4.4vw, 54px); --h3: clamp(24px, 3.1vw, 38px); --body: clamp(14.5px, 1.05vw, 15.5px); --logo: clamp(24px, 2.2vw, 31px); --secY: clamp(52px, 6.6vw, 98px); --secYL: clamp(70px, 9vw, 132px); --cardPad: clamp(18px, 2.2vw, 30px); --railX: clamp(9px, 1.2vw, 22px); --navH: clamp(66px, 5vw, 78px); --headH: var(--navH); --heroBrass: #C7A86D; --err: #B4462F; --errInk: #D08A5E; --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --sans: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; } /* --- Themes ------------------------------------------------------------- */ :root, [data-mode="seara"] { --bg: #171916; --card: #1E211C; --ink: #F1EADF; --dim: rgba(241,234,223,.54); --dim2: rgba(241,234,223,.78); --line: rgba(241,234,223,.17); --accent: #B06A42; --brass: #C7A86D; --sage: #A9B49E; --phA: #2A2620; --phB: #141510; --phH: rgba(199,168,109,.18); --gridL: rgba(241,234,223,.07); --tableFill: rgba(241,234,223,.05); --seatBd: rgba(241,234,223,.34); --seatFill: rgba(241,234,223,.07); --heroPanel: #101109; --heroInk: #F6F1E7; --heroDim: rgba(246,241,231,.74); --heroLine: rgba(246,241,231,.28); --headBg: rgba(23,25,22,.9); --shellOut: #101109; color-scheme: dark; } [data-mode="zi"] { --bg: #F1EADF; --card: #FAF6EF; --ink: #171916; --dim: rgba(23,25,22,.54); --dim2: rgba(23,25,22,.74); --line: rgba(23,25,22,.16); --accent: #8F5133; --brass: #8A6C2E; --sage: #8C9A7C; --phA: #E4DACA; --phB: #CDC0AC; --phH: rgba(255,250,240,.6); --gridL: rgba(23,25,22,.09); --tableFill: rgba(23,25,22,.05); --seatBd: rgba(23,25,22,.34); --seatFill: rgba(23,25,22,.06); --heroPanel: #171916; --heroInk: #F6F1E7; --heroDim: rgba(246,241,231,.74); --heroLine: rgba(246,241,231,.3); --headBg: rgba(241,234,223,.9); --shellOut: #E6DDCF; color-scheme: light; } [data-mode="eveniment"] { --bg: #163527; --card: #1B4033; --ink: #F1EADF; --dim: rgba(241,234,223,.58); --dim2: rgba(241,234,223,.8); --line: rgba(241,234,223,.2); --accent: #C07A4C; --brass: #C7A86D; --sage: #A9B49E; --phA: #1E4A38; --phB: #0F2A20; --phH: rgba(199,168,109,.2); --gridL: rgba(241,234,223,.08); --tableFill: rgba(241,234,223,.06); --seatBd: rgba(241,234,223,.36); --seatFill: rgba(241,234,223,.08); --heroPanel: #0E2419; --heroInk: #F6F1E7; --heroDim: rgba(246,241,231,.76); --heroLine: rgba(246,241,231,.28); --headBg: rgba(22,53,39,.9); --shellOut: #0E2419; color-scheme: dark; } @media (max-width: 1099px) { :root { --navH: 62px; --headH: calc(62px + 45px); } } /* --- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; transition: background .66s var(--ease), color .66s var(--ease); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--brass); } input, textarea, select, button { font-family: var(--sans); } :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } ::selection { background: #C7A86D; color: #171916; } img { max-width: 100%; display: block; } [hidden] { display: none !important; } h1, h2, h3, p { margin: 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 500; background: var(--accent); color: #FFF8EE; padding: 12px 16px; border-radius: 2px; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; } .skip:focus { top: 12px; color: #FFF8EE; } /* --- Keyframes ---------------------------------------------------------- */ @keyframes fu { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes fi { from { opacity: 0; } to { opacity: 1; } } @keyframes mk { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes gl { from { opacity: .4; } to { opacity: .8; } } @keyframes sp { to { transform: rotate(360deg); } } @keyframes revIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes railGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes scrollCue { 0% { transform: scaleY(.2); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(.2); transform-origin: bottom; } } @supports (animation-timeline: view()) { [data-reveal] { animation: revIn .62s var(--ease) both; animation-timeline: view(); animation-range: entry 2% cover 26%; } [data-rail] { animation: railGrow 1s linear both; animation-timeline: scroll(root); transform-origin: top; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* --- Type primitives ---------------------------------------------------- */ .h1 { font: 400 var(--h1)/.98 var(--serif); letter-spacing: -.014em; text-wrap: balance; } .h2 { font: 400 var(--h2)/1.04 var(--serif); letter-spacing: -.012em; text-wrap: balance; } .h3 { font: 400 var(--h3)/1.12 var(--serif); text-wrap: balance; } .acc { font-style: italic; color: var(--accent); } .lead { font: 400 var(--body)/1.72 var(--sans); color: var(--dim2); text-wrap: pretty; } .eyebrow { font: 500 9.5px/1 var(--mono); letter-spacing: .22em; color: var(--dim); text-transform: uppercase; margin-bottom: 14px; } .kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .kicker::before { content: ""; width: 26px; height: 1px; background: var(--brass); } .kicker span { font: 500 9.5px/1 var(--mono); letter-spacing: .22em; color: var(--dim); text-transform: uppercase; } .mono-label { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .mono-sm { font: 500 9px/1 var(--mono); letter-spacing: .22em; color: var(--dim); text-transform: uppercase; } .mono-note { font: 400 10.5px/1.7 var(--mono); color: var(--dim); } .tag { font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim2); border: 1px solid var(--line); padding: 6px 8px; } /* --- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-align: center; transition: filter .26s var(--ease), transform .26s var(--ease), border-color .26s var(--ease), background .26s, color .26s; } .btn-primary { background: var(--accent); color: #FFF8EE; } .btn-primary:hover { color: #FFF8EE; filter: brightness(1.08); transform: translateY(-1px); } .btn-primary:disabled { opacity: .6; cursor: progress; transform: none; filter: none; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { color: var(--ink); border-color: var(--brass); } .btn-brass { background: var(--heroBrass); color: #171916; } .btn-brass:hover { color: #171916; filter: brightness(1.08); transform: translateY(-1px); } .btn-hero-ghost { background: transparent; color: var(--heroInk); border-color: var(--heroLine); } .btn-hero-ghost:hover { color: var(--heroInk); border-color: var(--heroBrass); transform: translateY(-1px); } .btn-md { min-height: 50px; padding: 0 20px; font-size: 11.5px; } .btn-sm { min-height: 48px; padding: 0 18px; font-size: 11.5px; } .btn-lg { min-height: 54px; padding: 0 26px; letter-spacing: .09em; } .btn-row { display: flex; flex-wrap: wrap; gap: 10px; } .link-under { display: inline-block; background: none; border: 0; border-bottom: 1px solid var(--brass); padding: 4px 0; cursor: pointer; font: 600 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } .link-under:hover { color: var(--brass); } .spinner { width: 13px; height: 13px; border: 1.5px solid rgba(255,248,238,.35); border-top-color: #FFF8EE; border-radius: 50%; display: block; animation: sp .7s linear infinite; } /* --- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--headBg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: background .6s ease, border-color .6s ease; } .head-row { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px); padding: 0 var(--pad); min-height: var(--navH); min-width: 0; } .logo { display: flex; align-items: baseline; gap: 9px; flex: none; } .logo-word { font: 400 var(--logo)/1 var(--serif); color: var(--ink); letter-spacing: .005em; } .logo-city { font: 500 8.5px/1 var(--mono); letter-spacing: .24em; color: var(--dim); text-transform: uppercase; } .logo:hover .logo-word { color: var(--ink); } .nav-wide { display: flex; align-items: center; gap: clamp(11px, 1.5vw, 24px); margin-left: auto; min-width: 0; } .nav-wide a { padding: 8px 0; font: 500 12.5px/1 var(--sans); letter-spacing: .03em; color: var(--dim2); border-bottom: 1px solid transparent; transition: color .24s, border-color .24s; } .nav-wide a:hover { color: var(--ink); } .nav-wide a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); } .mode-tabs { display: flex; } .mode-tabs button { display: flex; align-items: center; gap: 7px; border: 0; cursor: pointer; background: transparent; color: var(--dim2); font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: background .45s, color .45s; } .mode-tabs .dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; transition: background .45s; } .mode-tabs button[aria-selected="true"] { background: var(--accent); color: #FFF8EE; } .mode-tabs button[aria-selected="true"] .dot { background: #FFF8EE; } .mode-tabs--wide { align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 2px; flex: none; } .mode-tabs--wide button { height: 32px; padding: 0 11px; border-radius: 1px; } .mode-tabs--narrow { border-top: 1px solid var(--line); } .mode-tabs--narrow button { flex: 1; justify-content: center; min-height: 44px; border-right: 1px solid var(--line); } .mode-tabs--narrow button:last-child { border-right: 0; } .btn-head { flex: none; min-height: 44px; height: 44px; padding: 0 18px; font-size: 11.5px; letter-spacing: .09em; } .burger { margin-left: auto; width: 46px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; flex: none; } .burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .24s var(--ease); } .burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); } .mobile-nav { position: fixed; top: var(--headH); left: 0; right: 0; z-index: 70; max-height: calc(100dvh - var(--headH)); overflow-y: auto; background: var(--card); border-bottom: 1px solid var(--line); padding: 10px var(--pad) 22px; animation: fi .28s var(--ease); } .mobile-nav nav { display: flex; flex-direction: column; } .mobile-nav nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font: 400 26px/1 var(--serif); color: var(--ink); } .mobile-nav nav a:last-child { border-bottom: 0; } .mobile-nav nav a[aria-current="page"] { color: var(--brass); } .btn-pair { display: flex; gap: 10px; margin-top: 14px; } .btn-pair .btn-primary { flex: 1; min-height: 50px; } .btn-call { width: 120px; min-height: 50px; padding: 0; } .mode-tabs--narrow, .burger, .action-bar { display: none; } @media (max-width: 1099px) { .nav-wide, .mode-tabs--wide, .btn-head { display: none; } .burger, .mode-tabs--narrow { display: flex; } .action-bar { display: flex; } } @media (min-width: 1100px) { .mobile-nav { display: none !important; } } /* --- Stage / rail ------------------------------------------------------- */ /* overflow: clip (not hidden) so sticky descendants still stick to the viewport. */ .stage { position: relative; background: var(--bg); color: var(--ink); overflow: hidden; overflow: clip; transition: background .66s var(--ease), color .66s var(--ease); } .rail { position: absolute; left: var(--railX); top: 0; bottom: 0; width: 1px; background: var(--line); z-index: 1; pointer-events: none; } .rail--fill { height: 100%; background: linear-gradient(180deg, var(--brass), var(--sage)); transform-origin: top; z-index: 2; } #page { outline: none; position: relative; } .sec { padding: var(--secY) var(--pad); } .sec-top { border-top: 1px solid var(--line); } .sec-card { background: var(--card); transition: background .66s var(--ease); } .row { display: flex; flex-wrap: wrap; } /* Photo placeholders — swap for real once the shot list is delivered. */ .ph { background: radial-gradient(58% 62% at var(--hp, 58% 28%), var(--phH), transparent 70%), linear-gradient(var(--ang, 150deg), var(--phA), var(--phB)); border: 1px solid var(--line); } .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .62s var(--ease); } [data-mode="zi"] .layer--zi, [data-mode="seara"] .layer--seara, [data-mode="eveniment"] .layer--eveniment { opacity: 1; } .stripes { position: absolute; inset: 0; background: repeating-linear-gradient(126deg, rgba(241,234,223,.035) 0 10px, rgba(241,234,223,0) 10px 22px); } /* --- Hero --------------------------------------------------------------- */ .hero { display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--line); overflow: hidden; background: var(--heroPanel); animation: fi .7s var(--ease) both; } .hero-copy { flex: 1 1 clamp(300px, 34vw, 440px); min-height: clamp(360px, 46svh, 520px); background: var(--heroPanel); padding: clamp(24px, 3vw, 46px); display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(16px, 2vw, 26px); position: relative; z-index: 3; } .hero-kicker { display: flex; align-items: center; gap: 10px; animation: fu .6s .05s var(--ease) both; } .hero-kicker::before { content: ""; width: 22px; height: 1px; background: var(--heroBrass); } .hero-kicker span { font: 500 9.5px/1 var(--mono); letter-spacing: .26em; color: var(--heroBrass); text-transform: uppercase; } .hero h1 { font: 400 var(--h1)/.93 var(--serif); color: var(--heroInk); letter-spacing: -.012em; text-wrap: balance; animation: mk .8s .1s var(--ease) both; } .hero h1 em { font-style: italic; color: var(--heroBrass); } .hero-lead { max-width: 34ch; font: 400 var(--body)/1.68 var(--sans); color: var(--heroDim); text-wrap: pretty; animation: fu .7s .22s var(--ease) both; } .hero .btn-row { animation: fu .7s .3s var(--ease) both; } .hero-addr { font: 400 10.5px/1.7 var(--mono); color: var(--heroDim); animation: fu .7s .36s var(--ease) both; } .hero-visual { flex: 1.45 1 clamp(300px, 44vw, 760px); position: relative; min-height: clamp(320px, 52svh, 620px); overflow: hidden; } .hero-visual .layer--zi { background: radial-gradient(62% 70% at 66% 22%, rgba(255,246,232,.72), transparent 72%), linear-gradient(152deg, #EFE7DA, #C6B9A4); } .hero-visual .layer--seara { background: radial-gradient(58% 64% at 72% 26%, rgba(199,168,109,.38), transparent 70%), linear-gradient(152deg, #302A22, #141510); } .hero-visual .layer--eveniment { background: radial-gradient(60% 68% at 70% 20%, rgba(199,168,109,.3), transparent 70%), linear-gradient(152deg, #1E4A38, #0E2A20); } .hero-ring { position: absolute; right: clamp(20px, 4vw, 64px); top: 50%; transform: translateY(-50%); width: clamp(120px, 18vw, 230px); aspect-ratio: 1; border: 1px solid rgba(199,168,109,.5); border-radius: 50%; animation: gl 7s ease-in-out infinite alternate; } .hero-cue { position: absolute; left: 0; bottom: 0; padding: clamp(16px, 2vw, 26px); display: flex; align-items: center; gap: 10px; } .hero-cue::before { content: ""; display: block; width: 1px; height: 36px; background: linear-gradient(180deg, var(--heroBrass), transparent); animation: scrollCue 2.6s var(--ease) infinite; } .hero-cue span { font: 500 9px/1 var(--mono); letter-spacing: .2em; color: var(--heroDim); text-transform: uppercase; } /* --- Return ------------------------------------------------------------- */ .return { display: flex; flex-wrap: wrap; gap: var(--gapL); align-items: flex-start; } .return-copy { flex: 1 1 clamp(300px, 36vw, 460px); position: sticky; top: calc(var(--headH) + 26px); } .return-copy .lead { margin-top: 22px; max-width: 46ch; } .proofs { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid var(--line); } .proofs div { display: flex; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); } .proofs b { font: 400 20px/1.2 var(--serif); color: var(--ink); flex: 0 0 auto; min-width: 38%; } .proofs span { font: 400 12px/1.55 var(--sans); color: var(--dim); text-wrap: pretty; } .return-imgs { flex: 1 1 clamp(280px, 34vw, 520px); display: flex; flex-direction: column; gap: clamp(14px, 2vw, 26px); } @media (max-width: 700px) { .return-copy { position: static; } } /* --- Section heads ------------------------------------------------------ */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); } /* --- Moments ------------------------------------------------------------ */ .moments { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 26px); align-items: stretch; } .moment-img { flex: 1.25 1 clamp(280px, 38vw, 620px); position: relative; min-height: clamp(300px, 42svh, 480px); border: 1px solid var(--line); overflow: hidden; } .moment-img .layer--zi { background: radial-gradient(60% 64% at 40% 26%, rgba(255,246,232,.7), transparent 70%), linear-gradient(150deg, #EDE4D6, #C9BCA7); } .moment-img .layer--seara { background: radial-gradient(56% 60% at 62% 30%, rgba(199,168,109,.34), transparent 68%), linear-gradient(150deg, #2C2720, #15160F); } .moment-img .layer--eveniment { background: radial-gradient(58% 64% at 44% 24%, rgba(199,168,109,.26), transparent 70%), linear-gradient(150deg, #1F4C39, #102C21); } .img-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 2vw, 24px); background: linear-gradient(180deg, transparent, rgba(21,22,15,.62)); font: 400 clamp(20px, 2.2vw, 28px)/1.15 var(--serif); color: #F6F1E7; } .moment-card { flex: 1 1 clamp(280px, 30vw, 420px); border: 1px solid var(--line); background: var(--bg); padding: var(--cardPad); display: flex; flex-direction: column; transition: background .66s var(--ease); } .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; } .card-head b { font: 500 10px/1 var(--mono); letter-spacing: .16em; color: var(--brass); text-transform: uppercase; } .card-head span { font: 400 10px/1 var(--mono); color: var(--dim); } .mode-row { padding: 14px 0; border-bottom: 1px solid var(--line); } .mode-row b { display: block; font: 400 18px/1.3 var(--serif); color: var(--ink); } .mode-row span { display: block; margin-top: 4px; font: 400 12px/1.5 var(--sans); color: var(--dim); } .moment-card .btn-row { margin-top: auto; padding-top: 22px; } /* --- Dishes ------------------------------------------------------------- */ .dishes { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 22px); } .dish { min-width: min(100%, 240px); border: 1px solid var(--line); background: var(--card); overflow: hidden; transition: border-color .3s, transform .3s var(--ease); } .dish:hover { border-color: var(--brass); transform: translateY(-3px); } .dish-img { overflow: hidden; border: 0; border-bottom: 1px solid var(--line); transition: transform .42s var(--ease); } .dish:hover .dish-img { transform: scale(1.03); } .dish-body { padding: clamp(14px, 1.6vw, 22px); } .dish h3 { font: 400 clamp(19px, 1.7vw, 25px)/1.2 var(--serif); color: var(--ink); } .dish p { margin-top: 8px; max-width: 46ch; font: 400 12.5px/1.62 var(--sans); color: var(--dim); text-wrap: pretty; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } /* --- Atmosphere --------------------------------------------------------- */ .atm-wide { position: relative; width: 100%; min-height: clamp(300px, 54svh, 600px); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .atm-wide .layer--zi { background: radial-gradient(46% 70% at 30% 24%, rgba(255,247,234,.78), transparent 72%), linear-gradient(166deg, #EDE4D6, #CBBEA9); } .atm-wide .layer--seara { background: radial-gradient(44% 66% at 68% 30%, rgba(199,168,109,.36), transparent 70%), linear-gradient(166deg, #2E2822, #141510); } .atm-wide .layer--eveniment { background: radial-gradient(46% 68% at 36% 22%, rgba(199,168,109,.24), transparent 70%), linear-gradient(166deg, #204D3A, #102C21); } .atm-wide .img-caption { padding: clamp(18px, 2.4vw, 34px) var(--pad); font-size: clamp(22px, 2.6vw, 34px); } .ph-row { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 22px); } /* --- Shapes (event table layouts) --------------------------------------- */ .shapes { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 34px); align-items: stretch; } .shape-side { flex: 1 1 clamp(280px, 26vw, 340px); display: flex; flex-direction: column; gap: 8px; } .shape-opt { display: flex; align-items: center; gap: 14px; text-align: left; min-height: 58px; padding: 0 16px; background: transparent; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; transition: background .3s, border-color .3s; } .shape-opt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; } .shape-opt span { font: 400 17px/1.25 var(--serif); color: var(--dim2); } .shape-opt[aria-pressed="true"] { background: var(--bg); border-color: var(--brass); } .shape-opt[aria-pressed="true"]::before { background: var(--brass); } .shape-opt[aria-pressed="true"] span { color: var(--ink); } .shape-needs { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; } .shape-needs div { display: flex; gap: 12px; padding: 9px 0; font: 400 12.5px/1.6 var(--sans); color: var(--dim2); } .shape-needs div::before { content: "—"; color: var(--brass); } .shape-side .btn { margin-top: 14px; font-size: 11.5px; padding: 0 22px; } .shape-canvas { flex: 1.5 1 clamp(280px, 40vw, 660px); position: relative; aspect-ratio: 16/11; min-height: 260px; border: 1px solid var(--line); overflow: hidden; background: radial-gradient(70% 80% at 50% 18%, var(--phH), transparent 72%), linear-gradient(168deg, var(--phA), var(--phB)); } .shape-canvas::before { content: ""; position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(90deg, var(--gridL) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, var(--gridL) 0 1px, transparent 1px 44px); } .st { position: absolute; border: 1px solid var(--brass); background: var(--tableFill); transition: all .52s var(--ease); } .ss { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; border: 1px solid var(--seatBd); background: var(--seatFill); transition: all .52s var(--ease); } .shape-label { position: absolute; left: clamp(14px, 2vw, 22px); bottom: clamp(14px, 2vw, 22px); font: 500 9.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim2); } .steps { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 28px); border-top: 1px solid var(--line); padding-top: clamp(20px, 2.4vw, 32px); } .step { flex: 1 1 240px; display: flex; gap: 16px; } .step > span { font: 400 28px/1 var(--serif); color: var(--brass); flex: none; } .step b { display: block; font: 600 13px/1.35 var(--sans); color: var(--ink); } .step p { margin-top: 6px; font: 400 12.5px/1.6 var(--sans); color: var(--dim); text-wrap: pretty; } /* --- Reputation --------------------------------------------------------- */ .rating { flex: 1 1 clamp(260px, 24vw, 320px); border: 1px solid var(--line); padding: var(--cardPad); } .rating-num { display: flex; align-items: baseline; gap: 10px; } .rating-num b { font: 400 clamp(52px, 6vw, 84px)/.9 var(--serif); color: var(--ink); } .rating-num span { font: 400 14px/1 var(--mono); color: var(--dim); } .stars { display: flex; gap: 5px; margin: 16px 0 12px; } .stars span { width: 11px; height: 11px; background: var(--brass); } .stars span:last-child { opacity: .32; } .small { font: 400 12px/1.65 var(--sans); color: var(--dim2); } .small-link { display: inline-block; margin-top: 16px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--brass); padding-bottom: 3px; } .themes { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px); } .themes div { flex: 1 1 200px; border-top: 1px solid var(--line); padding-top: 14px; } .themes b { display: block; font: 500 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); } .themes p { margin-top: 10px; font: 400 15px/1.6 var(--sans); color: var(--dim2); text-wrap: pretty; } /* --- Map placeholder ---------------------------------------------------- */ .map { position: relative; min-height: clamp(260px, 36svh, 420px); border: 1px solid var(--line); background: linear-gradient(160deg, var(--phA), var(--phB)); overflow: hidden; } .map::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(72deg, var(--gridL) 0 1px, transparent 1px 58px), repeating-linear-gradient(160deg, var(--gridL) 0 1px, transparent 1px 78px); } .map::after { content: ""; position: absolute; left: 0; right: 0; top: 44%; height: 8px; background: var(--gridL); } .map-pin { position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 9px rgba(154,91,59,.2); z-index: 1; } .map-label { position: absolute; left: 52%; top: 50%; transform: translate(-50%, -100%); margin-top: -14px; z-index: 1; padding: 7px 10px; background: var(--bg); border: 1px solid var(--line); font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } /* --- Final CTA ---------------------------------------------------------- */ .final { padding: var(--secYL) var(--pad); position: relative; overflow: hidden; } .final::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 1px; height: clamp(40px, 7vw, 90px); background: linear-gradient(180deg, transparent, var(--brass)); } .final::after { content: ""; position: absolute; left: 50%; top: clamp(40px, 7vw, 90px); transform: translateX(-50%); width: clamp(240px, 40vw, 520px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; opacity: .9; } .final-inner { position: relative; z-index: 1; text-align: center; padding-top: clamp(40px, 6vw, 90px); } .final h2 { margin: 0 auto; max-width: 18ch; font: 400 var(--h1)/1.02 var(--serif); letter-spacing: -.014em; text-wrap: balance; } .final .btn-row { justify-content: center; gap: 12px; margin-top: clamp(26px, 3.4vw, 40px); } /* --- Menu page ---------------------------------------------------------- */ .menu-bar { position: sticky; top: var(--headH); z-index: 40; background: var(--headBg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px var(--pad); } .menu-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .menu-search { flex: 1 1 200px; min-height: 44px; padding: 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: 2px; color: var(--ink); font: 400 16px/1 var(--sans); outline: none; transition: border-color .24s; } .menu-search:focus { border-color: var(--brass); } .toggle { min-height: 44px; padding: 0 14px; background: transparent; color: var(--dim2); border: 1px solid var(--line); border-radius: 2px; cursor: pointer; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: background .26s, color .26s; } .toggle[aria-pressed="true"] { background: var(--sage); color: #171916; } .chips { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; scrollbar-width: thin; } .chip { flex: none; background: transparent; border: 1px solid var(--line); border-radius: 2px; min-height: 38px; padding: 0 12px; cursor: pointer; font: 500 11px/1 var(--sans); letter-spacing: .04em; color: var(--dim2); white-space: nowrap; transition: border-color .24s, color .24s; } .chip:hover { border-color: var(--brass); color: var(--ink); } .cat { padding: clamp(32px, 4vw, 52px) 0 0; } .cat-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; } .cat-star { font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); border: 1px solid var(--brass); padding: 6px 8px; } .empty { padding: 26px 0; font: 400 13px/1.7 var(--sans); color: var(--dim); } .item { padding: 20px 0; border-bottom: 1px solid var(--line); } .item-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .item h3 { font: 400 clamp(19px, 1.7vw, 23px)/1.25 var(--serif); color: var(--ink); } .item .tag { font-size: 8.5px; color: var(--brass); padding: 5px 7px; } .item p { margin-top: 8px; max-width: 56ch; font: 400 12.5px/1.62 var(--sans); color: var(--dim); text-wrap: pretty; } .no-results { padding: clamp(40px, 7vw, 80px) 0; text-align: center; } .no-results b { display: block; font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--serif); color: var(--ink); } .no-results p { margin-top: 10px; font: 400 13px/1.7 var(--sans); color: var(--dim); } .no-results .btn { margin-top: 18px; min-height: 46px; padding: 0 18px; font-size: 11px; } .menu-end { margin-top: clamp(34px, 4vw, 56px); border-top: 1px solid var(--line); padding-top: clamp(22px, 2.6vw, 34px); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .menu-end span { font: 400 clamp(18px, 2vw, 24px)/1.3 var(--serif); color: var(--ink); } /* --- Events page -------------------------------------------------------- */ .ev-hero { position: relative; min-height: clamp(300px, 50svh, 520px); display: flex; align-items: flex-end; border: 1px solid var(--line); border-top: 0; overflow: hidden; background: radial-gradient(56% 64% at 62% 24%, var(--phH), transparent 70%), linear-gradient(158deg, var(--phA), var(--phB)); } .ev-hero-copy { position: relative; padding: clamp(22px, 3vw, 44px); max-width: 36ch; } .ev-hero-copy .eyebrow { color: var(--brass); letter-spacing: .24em; } .ev-hero-copy .h1 em { font-style: italic; color: var(--brass); } .form-card { flex: 1.5 1 clamp(280px, 40vw, 660px); border: 1px solid var(--line); background: var(--card); padding: var(--cardPad); } .fields { display: flex; flex-wrap: wrap; gap: 14px; } .field { flex: 1 1 240px; display: flex; flex-direction: column; gap: 7px; } .field--full { flex-basis: 100%; margin-top: 14px; } .field > span:first-child { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .field input, .field select, .field textarea { min-height: 48px; padding: 0 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; color: var(--ink); font: 400 16px/1 var(--sans); outline: none; transition: border-color .24s; width: 100%; } .field textarea { padding: 12px; line-height: 1.6; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); } .field.is-invalid input, .field.is-invalid select { border-color: var(--err); } .field-err { font: 400 11.5px/1.5 var(--sans); color: var(--errInk); } .consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; cursor: pointer; } .consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: #9A5B3B; flex: none; } .consent > span { font: 400 12px/1.6 var(--sans); color: var(--dim2); } .consent .field-err { display: block; margin-top: 4px; font-size: 12px; } .form-actions { display: flex; gap: 12px; align-items: center; margin-top: 22px; flex-wrap: wrap; } .form-alert { margin-bottom: 18px; border: 1px solid var(--err); background: rgba(180,70,47,.12); padding: 12px 14px; font: 400 12.5px/1.6 var(--sans); color: var(--ink); } .success { padding: 14px 0; animation: fu .5s var(--ease) both; } .success-mark { width: 42px; height: 42px; border: 1px solid var(--brass); border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 400 20px/1 var(--serif); color: var(--brass); } .success h3 { margin-top: 18px; font: 400 clamp(24px, 2.8vw, 32px)/1.15 var(--serif); color: var(--ink); } .success p { margin-top: 12px; font: 400 13.5px/1.72 var(--sans); color: var(--dim2); text-wrap: pretty; } .success strong { font-weight: 600; color: var(--ink); } .success .btn { margin-top: 22px; min-height: 48px; padding: 0 18px; font-size: 11.5px; } /* --- Story -------------------------------------------------------------- */ .timeline { display: flex; flex-wrap: wrap; margin-top: clamp(30px, 4vw, 54px); border-top: 1px solid var(--line); } .timeline div { flex: 1 1 200px; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); } .timeline b { display: block; font: 500 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); } .timeline span { display: block; margin-top: 8px; font: 400 16px/1.4 var(--serif); color: var(--ink); } .chapter { display: flex; flex-wrap: wrap; gap: var(--gapL); padding-bottom: var(--secY); align-items: flex-start; } .chapter--rev { flex-wrap: wrap-reverse; } .chapter-copy { min-width: min(100%, 280px); } .chapter-copy > span { font: 500 9.5px/1 var(--mono); letter-spacing: .2em; color: var(--brass); text-transform: uppercase; } .chapter-copy h2 { margin-top: 14px; } .chapter-copy p { margin-top: 18px; max-width: 48ch; line-height: 1.76; } .chapter-img { min-width: min(100%, 260px); } .badge { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 8px 10px; } .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); } .badge span { font: 500 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim2); } .story-end { text-align: center; border-top: 1px solid var(--line); padding-top: var(--secY); } .story-end div { font: 400 clamp(22px, 2.6vw, 32px)/1.25 var(--serif); max-width: 22ch; margin: 0 auto 26px; text-wrap: balance; } /* --- Gallery ------------------------------------------------------------ */ .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: clamp(20px, 2.4vw, 30px); } .filters .toggle { min-height: 42px; } .gallery { padding: 0 var(--pad) var(--secY); display: flex; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 18px); } .gal-item { min-width: min(100%, 200px); cursor: pointer; padding: 0; transition: border-color .3s, transform .3s var(--ease); } .gal-item:hover { border-color: var(--brass); transform: translateY(-2px); } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(12,13,10,.95); display: flex; flex-direction: column; animation: fi .24s var(--ease); } .lb-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(241,234,223,.14); } .lb-counter { font: 400 11px/1 var(--mono); color: rgba(241,234,223,.72); letter-spacing: .08em; } .lb-btn { width: 46px; height: 46px; flex: none; background: transparent; border: 1px solid rgba(241,234,223,.26); color: #F1EADF; border-radius: 2px; cursor: pointer; font: 400 16px/1 var(--sans); } .lb-btn:hover { border-color: #C7A86D; } .lb-nav { width: 48px; height: 48px; font-size: 18px; } .lb-body { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 18px); padding: clamp(14px, 2.4vw, 26px); min-height: 0; } .lb-frame { flex: 1; max-width: 1000px; aspect-ratio: 3/2; max-height: 100%; background: radial-gradient(58% 62% at 56% 28%, rgba(199,168,109,.18), transparent 70%), linear-gradient(152deg, rgba(241,234,223,.1), rgba(241,234,223,.02)); border: 1px solid rgba(241,234,223,.18); } .lb-caption { padding: 0 20px 22px; font: 400 13px/1.6 var(--sans); color: rgba(241,234,223,.8); text-align: center; } /* --- Contact ------------------------------------------------------------ */ .info { padding: 16px 0; border-bottom: 1px solid var(--line); } .info:first-of-type { border-top: 1px solid var(--line); } .info:last-child { border-bottom: 0; } .info-val { margin-top: 10px; font: 400 clamp(16px, 1.6vw, 19px)/1.5 var(--serif); color: var(--ink); } .info-links { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font: 400 13.5px/1.6 var(--sans); } .services { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .services span { font: 400 11.5px/1 var(--sans); color: var(--dim2); border: 1px solid var(--line); padding: 9px 11px; } .social { margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; font: 400 13px/1 var(--sans); } .contact-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .contact-cta .btn { flex: 1 1 160px; font-size: 11.5px; padding: 0 18px; } /* --- Footer ------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); padding: var(--secY) var(--pad) clamp(30px, 4vw, 48px); background: var(--card); color: var(--ink); transition: background .66s var(--ease); } .foot-grid { display: flex; flex-wrap: wrap; gap: var(--gapL); } .foot-brand { flex: 1.4 1 280px; } .foot-logo { font: 400 clamp(30px, 3.4vw, 42px)/.9 var(--serif); color: var(--ink); margin-bottom: 10px; } .foot-addr { margin-top: 20px; font: 400 12.5px/1.8 var(--sans); color: var(--dim2); } .foot-col { flex: 1 1 160px; display: flex; flex-direction: column; gap: 10px; } .foot-col .mono-label { margin-bottom: 4px; } .foot-col a { font: 400 13px/1.6 var(--sans); } .foot-col:not(.foot-col--social) a { color: var(--dim2); } .foot-col:not(.foot-col--social) a:hover { color: var(--ink); } .foot-cta { flex: 1 1 200px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; } .foot-cta .btn { min-height: 50px; padding: 0 20px; font-size: 11.5px; } /* --- Mobile action bar -------------------------------------------------- */ .action-bar { position: sticky; bottom: 0; z-index: 50; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--headBg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); } .action-bar .btn-primary { flex: 1; min-height: 50px; } .action-bar .btn-call { width: 118px; }