:root { --primary: #06b6d4; --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Outfit', system-ui, sans-serif; --radius: 4px; --border: color-mix(in srgb, var(--primary) 25%, transparent); --surface: #fff; --bg: #fafafa; --text: #111; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; transition: color .2s, opacity .2s, transform .2s; } ul { list-style: none; margin: 0; padding: 0; } .container { width: min(100% - 2rem, 72rem); margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .65rem 1.35rem; border-radius: var(--radius, 4px); font-weight: 600; border: none; cursor: pointer; font-size: .9rem; } .btn-lg { padding: .9rem 1.75rem; font-size: 1rem; } .btn-block { width: 100%; } .section { padding: clamp(3rem, 8vw, 5.5rem) 0; } .section-head { margin-bottom: 2.5rem; } .section-head.center { text-align: center; max-width: 40rem; margin-inline: auto; margin-bottom: 2.5rem; } .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; margin: 0 0 .6rem; opacity: .85; } .section-head h2 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .75rem; font-size: clamp(1.75rem, 3.5vw, 2.6rem); } .section-lead { margin: 0; max-width: 38rem; opacity: .82; } [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } [data-reveal].is-visible { opacity: 1; transform: none; } .hero { position: relative; overflow: hidden; } .hero h1 { font-family: var(--font-display); line-height: 1.08; margin: 0 0 1rem; font-size: clamp(2.2rem, 6vw, 4rem); } .hero-lead { margin: 0 0 1.75rem; font-size: clamp(1rem, 2vw, 1.15rem); max-width: 36rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.25rem; } .hero-trust { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .82rem; opacity: .75; } .card-grid { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } .dish-card, .review-card, .event-card, .blog-card { border-radius: var(--radius); overflow: hidden; } .dish-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; } .dish-body { padding: 1.1rem 1.25rem; } .dish-price { font-weight: 700; font-size: 1.1rem; } .stars { letter-spacing: .08em; margin-bottom: .5rem; } .newsletter-band { padding: 3rem 0; } .newsletter-inner { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 768px) { .newsletter-inner { grid-template-columns: 1.2fr 1fr; } } .newsletter-form { display: flex; gap: .5rem; flex-wrap: wrap; } .newsletter-form input { flex: 1; min-width: 12rem; padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: inherit; } .footer-sitemap { display: grid; gap: 1.5rem; padding: 2.5rem 0 1.5rem; } @media (min-width: 640px) { .footer-sitemap { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .footer-sitemap { grid-template-columns: repeat(4, 1fr); } } .footer-sitemap h4 { margin: 0 0 .75rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; } .footer-sitemap a { display: block; padding: .2rem 0; font-size: .88rem; opacity: .78; } .footer-sitemap a:hover { opacity: 1; } .page-hero { padding: clamp(3rem, 10vw, 6rem) 0 2.5rem; } .page-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .75rem; } .page-hero p { margin: 0; max-width: 34rem; opacity: .82; } .inquiry-form label { display: block; margin-bottom: .85rem; font-size: .88rem; } .inquiry-form input, .inquiry-form select, .inquiry-form textarea { width: 100%; margin-top: .35rem; padding: .7rem .85rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: inherit; font: inherit; } .field-row { display: grid; gap: .85rem; } @media (min-width: 540px) { .field-row { grid-template-columns: 1fr 1fr; } } .form-success { padding: 1.5rem; border-radius: var(--radius); text-align: center; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; } @media (max-width: 767px) { .nav-toggle { display: flex; } .nav-links:not(.is-open) { display: none; } .nav-links.is-open { display: flex; flex-direction: column; width: 100%; } } :root { --cyan: #06b6d4; --purple: #a855f7; --bg: #0b1020; --surface: rgba(255,255,255,.06); --text: #e2e8f0; --border: rgba(6,182,212,.35); --radius: 16px; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; } body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 20% 20%, rgba(168,85,247,.15), transparent 50%), radial-gradient(ellipse at 80% 60%, rgba(6,182,212,.12), transparent 45%); pointer-events: none; z-index: -1; } .header-glass { position: sticky; top: 1rem; z-index: 50; margin: 0 1rem; } .nav-glass { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.25rem; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(16px); box-shadow: 0 0 30px rgba(6,182,212,.15); flex-wrap: wrap; } .nav-glass .brand { font-family: var(--font-display); font-size: 1.2rem; background: linear-gradient(90deg, var(--cyan), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .nav-glass .nav-links { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; } .nav-glass .nav-links a { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(226,232,240,.65); } .nav-glass .nav-links a:hover, .nav-glass .nav-links a.active { color: var(--cyan); text-shadow: 0 0 12px rgba(6,182,212,.6); } .hero-glass { padding: 5rem 0 4rem; } .hero-glass h1 { font-family: var(--font-display); background: linear-gradient(135deg, #fff, var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .glass-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; backdrop-filter: blur(12px); transition: box-shadow .25s, border-color .25s; } .glass-card:hover { box-shadow: 0 0 40px rgba(168,85,247,.25); border-color: var(--purple); } .btn-neon { background: linear-gradient(90deg, var(--cyan), var(--purple)); color: #0b1020; font-weight: 700; border-radius: var(--radius); } .btn-glass { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); } .pairing-grid { display: grid; gap: 1rem; } @media (min-width: 768px) { .pairing-grid { grid-template-columns: repeat(3, 1fr); } } .dish-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .dish-card, .review-card, .link-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .stars { color: var(--cyan); } .newsletter-band { background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.3); border-radius: var(--radius); margin: 2rem 1rem; padding: 2rem; } .footer { padding: 2rem 0; opacity: .65; font-size: .85rem; } .page-hero { padding-top: 3rem; } .glow-pulse { animation: glow 3s ease-in-out infinite; } @keyframes glow { 50% { box-shadow: 0 0 30px rgba(6,182,212,.35); } } .section-alt { background: color-mix(in srgb, var(--primary) 6%, var(--bg)); } .section-contrast { background: color-mix(in srgb, var(--primary) 12%, var(--bg)); } .split-grid { display: grid; gap: 2rem; align-items: center; } @media (min-width: 768px) { .split-grid { grid-template-columns: 1fr 1fr; } } .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0; } @media (min-width: 640px) { .stat-row { grid-template-columns: repeat(4, 1fr); } } .stat-cell { text-align: center; padding: 1rem; } .stat-cell strong { display: block; font-size: 1.75rem; font-family: var(--font-display); } .timeline { display: grid; gap: 1.25rem; } .timeline-item { padding-left: 1rem; border-left: 2px solid var(--border); } .contact-grid { display: grid; gap: 2rem; } @media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1.2fr; } } .faq-list { max-width: 42rem; } .faq-item { padding: 1rem 0; border-bottom: 1px solid var(--border); } .faq-item summary { cursor: pointer; font-weight: 600; } .gallery-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-grid img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: var(--radius); } .event-card { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); } .reserve-form .form-row { display: flex; flex-wrap: wrap; gap: .5rem; } .reserve-form input, .reserve-form select { padding: .7rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; } .chef-grid { display: grid; gap: 2rem; align-items: center; } @media (min-width: 768px) { .chef-grid { grid-template-columns: .9fr 1.1fr; } } .press-links a { margin-right: 1rem; font-size: .85rem; opacity: .75; } .careers-teaser { font-size: .88rem; opacity: .75; margin-top: 1rem; } .btn-gold { background: var(--primary); color: #fff; } .btn-outline { background: transparent; border: 1px solid var(--primary); color: inherit; } .blog-teaser { display: grid; gap: 1rem; } @media (min-width: 768px) { .blog-teaser { grid-template-columns: repeat(2, 1fr); } } .blog-card { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); } .link-tiles { display: grid; gap: 1rem; } @media (min-width: 640px) { .link-tiles { grid-template-columns: repeat(3, 1fr); } } .loyalty-strip { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); } .glass-card h3 { font-family: var(--font-display); margin: 0 0 .5rem; } .pairing-grid .glass-card { min-height: 10rem; } .nav-glass .btn-neon { margin-left: auto; } .hero-glass .btn-glass { margin-left: .5rem; } @media (min-width: 480px) { .hero-actions { gap: 1rem; } .section-head h2 { font-size: clamp(1.85rem, 3vw, 2.4rem); } } @media (min-width: 1024px) { .container { width: min(100% - 3rem, 76rem); } .dish-card:hover { opacity: .95; } .review-card { padding: 1.75rem; } } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } @media (min-width: 480px) { .hero-actions { gap: 1rem; } .section-head h2 { font-size: clamp(1.85rem, 3vw, 2.4rem); } } @media (min-width: 1024px) { .container { width: min(100% - 3rem, 76rem); } .dish-card:hover { opacity: .95; } .review-card { padding: 1.75rem; } } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { overflow-x: hidden; } .container, .section, main { max-width: 100%; } @media (max-width: 768px) { .btn, .nav-links a, .nav-pills a { min-height: 44px; align-items: center; } .section { padding-block: 3rem; } .form-panel, .form-card, .form-elegant, .inquiry-float { padding: 1.25rem; } .inquiry-sidebar { padding: 2rem 1.25rem; } .form-area { padding: 2rem 1.25rem; } .hero-split { min-height: auto; } .hero-panel { padding: 2.5rem 0; } .hero-visual { min-height: 40vh; } .hero-center { min-height: auto; padding: 6rem 0 2.5rem; } .hero-portal { min-height: auto; padding-bottom: 2rem; } .hero-top { padding-top: 3rem; } .hero-img-wrap img { height: 40vh; min-height: 220px; } .product-row--reverse .product-row-img, .product-row--reverse .product-row-body { order: unset; } .product-num { font-size: 2.5rem; } .stat-pill { min-width: calc(50% - 0.5rem); flex: 1 1 calc(50% - 0.5rem); } .nav-float { top: 0.5rem; } .page-wrap { padding-top: 4.75rem; } .tab-label { flex: 1 1 auto; text-align: center; border-radius: 8px !important; margin-bottom: 0.25rem; } .tab-row { gap: 0.35rem; } } @media (min-width: 1200px) { .container { width: min(100% - 3rem, var(--max)); } } .inquiry-form input, .inquiry-form select, .inquiry-form textarea { max-width: 100%; }