/* themeShowcase — generated from preview HTML, color tokens only */
/* =====================================================
ROOT
===================================================== */
:root {
--brand-primary: #e95c2c;
--brand-primary-dark: color-mix(in srgb, var(--brand-primary) 78%, #000);
--brand-surface: #f5f1e8;
--ink: #111111;
--ink-soft: color-mix(in srgb, var(--ink) 88%, #fff);
--white: color-mix(in srgb, var(--brand-surface) 35%, #fff);
--gray: color-mix(in srgb, var(--ink) 48%, var(--brand-surface));
--border: color-mix(in srgb, var(--ink) 14%, var(--brand-surface));
--heading-font: "Oswald", sans-serif;
--body-font: "DM Sans", sans-serif;
--container: 1180px;
--radius-lg: 30px;
--radius-md: 22px;
--radius-sm: 14px;
}
/* =====================================================
RESET
===================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--body-font);
background: var(--brand-surface);
color: var(--ink);
line-height: 1.5;
overflow-x: hidden;
}
img {
display: block;
width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
}
.container {
width: min(
var(--container),
calc(100% - 40px)
);
margin-inline: auto;
}
/* =====================================================
BUTTON
===================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 20px;
border-radius: 100px;
border: 1px solid var(--ink);
font-size: 13px;
font-weight: 700;
transition:
transform .25s ease,
background .25s ease,
color .25s ease;
}
.btn:hover {
transform: translateY(-3px);
}
.btn-dark {
background: var(--ink);
color: white;
}
.btn-light {
background: var(--white);
color: var(--ink);
}
.btn-orange {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: white;
}
.btn-orange:hover {
background: var(--brand-primary-dark);
}
/* =====================================================
HEADER
===================================================== */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
padding: 17px 0;
background:
color-mix(in srgb, var(--brand-surface) 88%, transparent);
backdrop-filter: blur(18px);
border-bottom:
1px solid rgba(0,0,0,.06);
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: 11px;
white-space: nowrap;
}
.logo-mark {
width: 43px;
height: 43px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--ink);
color: white;
font-family: var(--heading-font);
font-size: 17px;
}
.logo-title {
display: block;
font-size: 14px;
font-weight: 800;
}
.logo-subtitle {
display: block;
margin-top: 1px;
color: var(--gray);
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Navigation */
.nav-links {
display: flex;
align-items: center;
gap: 28px;
font-size: 13px;
font-weight: 600;
}
.nav-links a {
position: relative;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 2px;
background: var(--brand-primary);
transition: width .2s ease;
}
.nav-links a:hover::after {
width: 100%;
}
/* Header actions */
.header-actions {
display: flex;
gap: 8px;
}
/* Mobile menu button */
.menu-toggle {
display: none;
width: 43px;
height: 43px;
border: none;
border-radius: 50%;
background: var(--ink);
color: white;
cursor: pointer;
font-size: 19px;
}
/* Mobile navigation */
.mobile-nav {
display: none;
position: fixed;
top: 78px;
left: 14px;
right: 14px;
z-index: 99;
padding: 20px;
border-radius: 20px;
background: var(--white);
box-shadow:
0 20px 50px rgba(0,0,0,.15);
}
.mobile-nav.active {
display: block;
}
.mobile-nav a {
display: block;
padding: 13px 0;
border-bottom:
1px solid var(--border);
font-size: 14px;
font-weight: 600;
}
.mobile-nav a:last-child {
border-bottom: none;
}
/* =====================================================
HERO
===================================================== */
.hero {
padding: 145px 0 80px;
}
.hero-grid {
display: grid;
grid-template-columns:
1fr
.95fr;
gap: 60px;
align-items: center;
}
.eyebrow {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
color: var(--brand-primary);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 28px;
height: 2px;
background: var(--brand-primary);
}
.hero h1 {
max-width: 700px;
font-family: var(--heading-font);
font-size:
clamp(65px, 8vw, 112px);
line-height: .91;
letter-spacing: -2px;
text-transform: uppercase;
}
.hero h1 span {
color: var(--brand-primary);
}
.hero-description {
max-width: 500px;
margin: 28px 0;
color: var(--gray);
font-size: 16px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.hero-info {
display: flex;
gap: 30px;
max-width: 520px;
margin-top: 32px;
padding-top: 22px;
border-top:
1px solid var(--border);
}
.hero-info-item strong {
display: block;
font-size: 13px;
}
.hero-info-item span {
display: block;
margin-top: 3px;
color: var(--gray);
font-size: 11px;
}
/* Hero image */
.hero-image-wrapper {
position: relative;
}
.hero-image {
height: 600px;
overflow: hidden;
border-radius:
var(--radius-lg);
background:
linear-gradient(
rgba(0,0,0,.08),
rgba(0,0,0,.25)
),
url(
"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=85"
)
center / cover;
}
.hero-badge {
position: absolute;
left: -25px;
bottom: 35px;
width: 120px;
height: 120px;
display: grid;
place-items: center;
padding: 15px;
border-radius: 50%;
background: var(--brand-primary);
color: white;
border:
6px solid var(--brand-surface);
font-family: var(--heading-font);
font-size: 15px;
line-height: 1.1;
text-align: center;
text-transform: uppercase;
transform: rotate(-10deg);
}
.hero-floating {
position: absolute;
right: -18px;
top: 30px;
padding: 10px 15px;
border-radius: 100px;
background: var(--white);
box-shadow:
0 15px 40px rgba(0,0,0,.15);
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
/* =====================================================
GENERAL SECTIONS
===================================================== */
section {
padding: 100px 0;
}
.section-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
margin-bottom: 40px;
}
.section-header h2 {
font-family: var(--heading-font);
font-size:
clamp(48px, 6vw, 76px);
line-height: .92;
letter-spacing: -1px;
text-transform: uppercase;
}
.section-header p {
max-width: 420px;
color: var(--gray);
font-size: 14px;
}
/* =====================================================
MENU
===================================================== */
.menu-section {
background: var(--ink);
color: white;
}
.menu-section
.section-header p {
color: #aaa;
}
.menu-list {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 18px;
}
.menu-category {
padding: 26px;
border:
1px solid #303030;
border-radius: 24px;
background: #181818;
transition:
transform .25s ease,
border-color .25s ease;
}
.menu-category:hover {
transform: translateY(-4px);
border-color: #555;
}
.menu-category-heading {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 20px;
border-bottom:
1px solid #303030;
}
.menu-category-number {
width: 34px;
height: 34px;
display: grid;
place-items: center;
flex-shrink: 0;
border-radius: 50%;
background: var(--brand-primary);
color: white;
font-size: 10px;
font-weight: 800;
}
.menu-category-heading h3 {
font-family: var(--heading-font);
font-size: 29px;
text-transform: uppercase;
}
.menu-items {
display: grid;
}
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px 0;
border-bottom:
1px dashed #363636;
}
.menu-item:last-child {
border-bottom: none;
}
.menu-item h4 {
font-size: 13px;
}
.menu-item p {
margin-top: 4px;
color: #888;
font-size: 10px;
}
.menu-item-price {
flex-shrink: 0;
color: var(--brand-primary);
font-size: 13px;
font-weight: 800;
}
.full-menu-button {
margin-top: 35px;
text-align: center;
}
/* =====================================================
ABOUT
===================================================== */
.about-grid {
display: grid;
grid-template-columns:
.9fr
1.1fr;
gap: 70px;
align-items: center;
}
.about-image {
height: 560px;
border-radius:
var(--radius-lg);
background:
url(
"https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&w=1000&q=85"
)
center / cover;
}
.about-content h2 {
margin-bottom: 25px;
font-family: var(--heading-font);
font-size:
clamp(52px, 6vw, 82px);
line-height: .9;
text-transform: uppercase;
}
.about-content > p {
max-width: 570px;
color: var(--gray);
font-size: 15px;
}
.stats {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 10px;
margin-top: 35px;
}
.stat {
padding: 20px;
border:
1px solid var(--border);
border-radius: 18px;
}
.stat strong {
display: block;
font-family: var(--heading-font);
font-size: 35px;
}
.stat span {
display: block;
margin-top: 3px;
color: var(--gray);
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
}
/* =====================================================
ACTIVITIES / SOCIAL
===================================================== */
.activities {
background: #e9e3d8;
}
.social-feed {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 16px;
}
.social-post {
min-height: 360px;
display: flex;
flex-direction: column;
padding: 24px;
overflow: hidden;
border-radius: 24px;
color: white;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.social-post:hover {
transform: translateY(-6px);
box-shadow:
0 20px 45px rgba(0,0,0,.15);
}
.social-post.instagram {
background:
linear-gradient(
145deg,
#5b2a86,
#d62976,
#f58529
);
}
.social-post.facebook {
background:
linear-gradient(
145deg,
#1877f2,
#145dcc
);
}
.social-post.tiktok {
background:
linear-gradient(
145deg,
#111,
#242424
);
}
.social-post-header {
display: flex;
align-items: center;
gap: 12px;
}
.social-icon {
width: 43px;
height: 43px;
display: grid;
place-items: center;
border-radius: 50%;
background:
rgba(255,255,255,.15);
font-size: 20px;
font-weight: 800;
}
.social-account strong {
display: block;
font-size: 13px;
}
.social-account span {
display: block;
margin-top: 2px;
opacity: .7;
font-size: 10px;
}
.social-arrow {
margin-left: auto;
font-size: 18px;
}
.social-post-content {
margin-top: auto;
}
.social-platform {
font-size: 9px;
font-weight: 800;
letter-spacing: 2px;
}
.social-post-content h3 {
margin-top: 10px;
font-family: var(--heading-font);
font-size: 34px;
line-height: .95;
text-transform: uppercase;
}
.social-post-content p {
max-width: 300px;
margin-top: 12px;
color:
rgba(255,255,255,.75);
font-size: 12px;
}
.social-post-footer {
margin-top: 25px;
padding-top: 16px;
border-top:
1px solid
rgba(255,255,255,.2);
font-size: 11px;
font-weight: 700;
}
/* =====================================================
REVIEWS
===================================================== */
.reviews {
background: var(--white);
}
.review-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 16px;
}
.review-card {
padding: 28px;
border:
1px solid var(--border);
border-radius: 22px;
background: white;
}
.review-stars {
margin-bottom: 20px;
color: var(--brand-primary);
letter-spacing: 3px;
}
.review-card p {
min-height: 105px;
font-size: 14px;
}
.review-person {
margin-top: 25px;
font-size: 13px;
font-weight: 800;
}
.review-person span {
display: block;
margin-top: 3px;
color: var(--gray);
font-size: 10px;
font-weight: 500;
}
/* =====================================================
GALLERY
===================================================== */
.gallery-grid {
display: grid;
grid-template-columns:
1.2fr
.8fr
.8fr;
grid-template-rows:
250px
250px;
gap: 12px;
}
.gallery-grid img {
height: 100%;
object-fit: cover;
border-radius: 20px;
transition:
transform .4s ease;
}
.gallery-grid img:hover {
transform: scale(.98);
}
.gallery-grid img:first-child {
grid-row: span 2;
}
.gallery-grid img:last-child {
grid-column: span 2;
}
/* =====================================================
VISIT / MAP
===================================================== */
.visit-section {
background: var(--ink);
color: white;
}
.visit-grid {
display: grid;
grid-template-columns:
.75fr
1.25fr;
gap: 30px;
}
.visit-content {
padding: 15px 0;
}
.visit-content h2 {
margin-bottom: 25px;
font-family: var(--heading-font);
font-size:
clamp(50px, 6vw, 80px);
line-height: .9;
text-transform: uppercase;
}
.contact-list {
display: grid;
gap: 20px;
margin: 30px 0;
}
.contact-item small {
display: block;
margin-bottom: 4px;
color: #888;
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.contact-item strong {
font-size: 14px;
}
.map {
min-height: 430px;
overflow: hidden;
border-radius: 28px;
background: #222;
}
.map iframe {
width: 100%;
height: 100%;
min-height: 430px;
border: 0;
filter:
grayscale(1)
contrast(1.05);
}
/* =====================================================
FOOTER
===================================================== */
footer {
padding: 50px 0 25px;
background: #090909;
color: white;
}
.footer-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding-bottom: 35px;
border-bottom:
1px solid #292929;
}
.footer-brand {
font-family: var(--heading-font);
font-size: 35px;
text-transform: uppercase;
}
.footer-brand span {
color: var(--brand-primary);
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 20px;
color: #aaa;
font-size: 12px;
}
.footer-links a:hover {
color: white;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 22px;
color: #666;
font-size: 10px;
}
/* =====================================================
MOBILE ORDER BUTTON
===================================================== */
.mobile-order {
display: none;
position: fixed;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 90;
padding: 15px;
border-radius: 100px;
background: var(--brand-primary);
color: white;
text-align: center;
font-size: 13px;
font-weight: 800;
box-shadow:
0 10px 35px rgba(0,0,0,.3);
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 950px) {
.nav-links {
display: none;
}
.header-actions {
display: none;
}
.menu-toggle {
display: block;
}
.hero-grid,
.about-grid,
.visit-grid {
grid-template-columns: 1fr;
}
.hero-image-wrapper {
order: -1;
}
.hero-image {
height: 480px;
}
.menu-list {
grid-template-columns: 1fr;
}
.about-image {
height: 450px;
}
.social-feed {
grid-template-columns:
repeat(2, 1fr);
}
.review-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.container {
width:
calc(100% - 28px);
}
section {
padding: 75px 0;
}
.hero {
padding-top: 110px;
}
.hero h1 {
font-size: 58px;
}
.hero-image {
height: 390px;
}
.hero-badge {
left: 10px;
}
.hero-floating {
right: 10px;
}
.hero-info {
gap: 15px;
}
.hero-info-item strong {
font-size: 11px;
}
.hero-info-item span {
font-size: 9px;
}
.section-header {
display: block;
}
.section-header p {
margin-top: 15px;
}
.menu-item {
align-items: flex-start;
}
.menu-item p {
max-width: 190px;
}
.social-feed {
grid-template-columns: 1fr;
}
.social-post {
min-height: 310px;
}
.stats {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns:
repeat(2, 1fr);
grid-template-rows:
180px
180px
180px;
}
.gallery-grid img:first-child {
grid-row: auto;
}
.gallery-grid img:last-child {
grid-column: auto;
}
.footer-top {
display: block;
}
.footer-links {
margin-top: 20px;
}
.footer-bottom {
display: block;
}
.footer-bottom span {
display: block;
margin-top: 7px;
}
.mobile-order {
display: block;
}
}
img.logo-mark {
width: 43px;
height: 43px;
object-fit: cover;
padding: 0;
border-radius: 50%;
}
/* Online ordering */
.order-page .order-layout {
display: grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 28px;
align-items: start;
margin-top: 28px;
}
.order-page .order-menu .menu-item.orderable {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.order-page .order-item-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.order-page .order-cart {
position: sticky;
top: 110px;
padding: 22px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: var(--radius-md, 18px);
background: #fff;
color: var(--ink, #111);
box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 8%, transparent);
}
.order-page .order-cart h2,
.order-page .order-cart strong,
.order-page .order-cart label,
.order-page .order-cart legend,
.order-page .order-cart .cart-total-line,
.order-page .order-cart .order-status,
.order-page .order-cart .checkout-field,
.order-page .order-cart .muted {
color: var(--ink, #111);
}
.order-page .order-cart .muted,
.order-page .order-cart .order-status {
color: color-mix(in srgb, var(--ink, #111) 62%, transparent);
opacity: 1;
}
.order-page .order-cart .cart-line {
color: var(--ink, #111);
border-bottom: 1px dashed color-mix(in srgb, var(--ink, #111) 16%, transparent);
padding: 10px 0;
}
.order-page .order-cart .btn {
color: #fff;
}
.order-page .order-cart .btn-sm.dec {
color: var(--ink, #111);
background: #fff;
border: 1px solid color-mix(in srgb, var(--ink, #111) 22%, transparent);
}
.order-page .order-cart label,
.order-page .checkout-field {
display: flex;
flex-direction: column;
gap: 6px;
margin: 12px 0;
font-size: 0.92rem;
}
.order-page .order-cart input,
.order-page .order-cart select,
.order-page .order-cart textarea {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px 12px;
font: inherit;
color: var(--ink);
background: #fff;
}
.order-page .payment-methods {
border: 0;
margin: 14px 0;
padding: 0;
display: grid;
gap: 8px;
}
.order-page .payment-methods legend {
font-weight: 600;
margin-bottom: 4px;
}
.order-page .fonepay-qr-box {
margin: 12px 0;
text-align: center;
}
.order-page .fonepay-qr-box img {
margin-top: 8px;
border-radius: 12px;
}
.order-page .order-status {
margin-top: 12px;
font-size: 0.9rem;
color: var(--ink-soft);
}
.order-page .hidden { display: none !important; }
@media (max-width: 900px) {
.order-page .order-layout { grid-template-columns: 1fr; }
.order-page .order-cart { position: static; }
}
/* CMS live menu polish (Web++ sections) */
body.theme-showcase .cms-section.cms-menu {
--line: var(--border);
--card: var(--white);
--soft: color-mix(in srgb, var(--brand-surface) 70%, #fff);
--radius: 18px;
}
body.theme-showcase .cms-section.cms-menu .section-head h2 {
font-family: var(--heading-font);
font-size: clamp(1.8rem, 3vw, 2.4rem);
letter-spacing: -.02em;
}
body.theme-showcase .cms-menu.list .cms-menu-item {
background: color-mix(in srgb, var(--white) 88%, var(--brand-surface));
}
body.theme-showcase .cms-menu-price {
color: var(--brand-primary);
font-family: var(--heading-font);
}
body.theme-showcase .cms-menu .cms-add-item {
background: var(--ink);
color: #fff;
border-color: var(--ink);
border-radius: 999px;
padding: 6px 14px;
}
body.theme-showcase .cms-menu .cms-add-item:hover {
background: var(--brand-primary);
border-color: var(--brand-primary);
}
body.theme-showcase .cms-order-cta {
border-radius: 999px;
}
body.theme-showcase .alphid-site-cart-dock-inner {
background: var(--ink);
}
body.theme-showcase .alphid-site-cart-dock .btn {
background: var(--brand-primary);
border-color: var(--brand-primary);
}
/* CMS rich text intro — match showcase section energy */
body.theme-showcase .cms-section.cms-rich_text {
position: relative;
overflow: hidden;
}
body.theme-showcase .cms-section.cms-rich_text::before {
content: "";
position: absolute;
inset: auto -8% -35% auto;
width: min(420px, 55vw);
height: min(420px, 55vw);
border-radius: 50%;
background: radial-gradient(
circle,
color-mix(in srgb, var(--brand-primary) 22%, transparent),
transparent 68%
);
pointer-events: none;
}
body.theme-showcase .cms-rich_text .cms-rich-intro-lead h2 {
font-family: var(--heading-font);
text-transform: uppercase;
letter-spacing: -1px;
line-height: .9;
font-size: clamp(3rem, 7vw, 5.5rem);
}
body.theme-showcase .cms-rich_text .cms-rich-intro-body {
background: color-mix(in srgb, var(--white) 70%, var(--brand-surface));
border-left-color: var(--brand-primary);
font-family: var(--body-font);
box-shadow: 0 16px 40px color-mix(in srgb, var(--ink) 6%, transparent);
}
body.theme-showcase .cms-rich_text .cms-rich-intro-lead .eyebrow {
font-family: var(--body-font);
}
/* Design settings chrome (Look & layout Management controls) */
body.theme-showcase {
--container: 1180px;
--chrome-radius: 18px;
--section-pad-y: clamp(2.5rem, 6vw, 5rem);
--heading-scale: 1;
}
body.theme-showcase.heading-sm { --heading-scale: 0.86; }
body.theme-showcase.heading-md { --heading-scale: 1; }
body.theme-showcase.heading-lg { --heading-scale: 1.14; }
body.theme-showcase.heading-sm h1,
body.theme-showcase.heading-sm h2,
body.theme-showcase.heading-lg h1,
body.theme-showcase.heading-lg h2,
body.theme-showcase.heading-md h1,
body.theme-showcase.heading-md h2 {
font-size: calc(1em * var(--heading-scale));
}
body.theme-showcase.heading-sm .hero h1 { font-size: clamp(48px, 7vw, 84px); }
body.theme-showcase.heading-md .hero h1 { font-size: clamp(65px, 8vw, 112px); }
body.theme-showcase.heading-lg .hero h1 { font-size: clamp(72px, 9vw, 128px); }
body.theme-showcase.heading-sm .section-header h2,
body.theme-showcase.heading-sm .cms-rich_text .cms-rich-intro-lead h2 {
font-size: clamp(2.2rem, 5vw, 3.4rem);
}
body.theme-showcase.heading-lg .section-header h2,
body.theme-showcase.heading-lg .cms-rich_text .cms-rich-intro-lead h2 {
font-size: clamp(3.2rem, 8vw, 6rem);
}
body.theme-showcase.radius-none {
--chrome-radius: 0;
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
}
body.theme-showcase.radius-md {
--chrome-radius: 14px;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 22px;
}
body.theme-showcase.radius-lg {
--chrome-radius: 28px;
--radius-sm: 14px;
--radius-md: 22px;
--radius-lg: 36px;
}
body.theme-showcase.radius-none .btn,
body.theme-showcase.radius-md .btn,
body.theme-showcase.radius-lg .btn {
border-radius: var(--chrome-radius);
}
body.theme-showcase.radius-none .cms-menu.list .cms-menu-item,
body.theme-showcase.radius-md .cms-menu.list .cms-menu-item,
body.theme-showcase.radius-lg .cms-menu.list .cms-menu-item {
border-radius: var(--chrome-radius);
}
body.theme-showcase.btn-outline .btn-dark {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
body.theme-showcase.btn-outline .btn-dark:hover {
background: var(--ink);
color: #fff;
}
body.theme-showcase.btn-soft .btn-dark {
background: color-mix(in srgb, var(--brand-primary) 16%, #fff);
color: var(--brand-primary-dark, var(--ink));
border-color: transparent;
}
body.theme-showcase.btn-solid .btn-dark {
background: var(--ink);
color: #fff;
}
body.theme-showcase.space-sm .cms-section { padding: 1.75rem 0; }
body.theme-showcase.space-sm .menu-section,
body.theme-showcase.space-sm .hero { padding-block: clamp(2rem, 5vw, 3.5rem); }
body.theme-showcase.space-md .cms-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
body.theme-showcase.space-lg .cms-section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
body.theme-showcase.space-lg .menu-section,
body.theme-showcase.space-lg .hero { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
body.theme-showcase.width-narrow { --container: 860px; }
body.theme-showcase.width-standard { --container: 1080px; }
body.theme-showcase.width-wide { --container: 1280px; }
body.theme-showcase.header-static .header {
position: absolute;
background: color-mix(in srgb, var(--brand-surface) 92%, transparent);
}
body.theme-showcase.header-sticky .header {
position: fixed;
}
body.theme-showcase.header-transparent .header {
position: fixed;
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
}
body.theme-showcase.header-transparent.is-scrolled .header,
body.theme-showcase.header-transparent .header.is-solid {
background: color-mix(in srgb, var(--brand-surface) 90%, transparent);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(0,0,0,.06);
}
body.theme-showcase .footer.footer-minimal .footer-top {
flex-direction: column;
align-items: center;
text-align: center;
}
body.theme-showcase .footer.footer-minimal .footer-links {
justify-content: center;
}
body.theme-showcase .footer.footer-split .footer-top {
align-items: flex-start;
}
body.theme-showcase .footer.footer-bold {
background: var(--ink);
color: #fff;
}
body.theme-showcase .footer.footer-bold .footer-brand span,
body.theme-showcase .footer.footer-bold .footer-links a,
body.theme-showcase .footer.footer-bold .footer-bottom {
color: rgba(255,255,255,.78);
}
body.theme-showcase .footer.footer-bold .footer-links a:hover {
color: #fff;
}