/* Customer-facing zone — warm brown/cream theme. Apply by adding class="site-theme" to . */ /* --- theme variable overrides --- */ body.site-theme { background: #FEF6EC; color: #3D1F0A; --bg: #FEF6EC; --card: #FFFFFF; --fg: #3D1F0A; --muted: #8B6E52; --primary: #C96A1F; --primary-dark: #A55519; --ok: #4E8A53; --bad: #C0392B; --line: #EDD9C8; } /* --- customer nav override --- */ body.site-theme .app-nav.site-nav { background: rgba(92, 40, 10, 0.97); border-bottom: 1px solid #7B3A12; } body.site-theme .site-nav .brand img { height: 36px; border-radius: 50%; } body.site-theme .site-nav .links a { color: #F5D9B8; } body.site-theme .site-nav .links a:hover { background: rgba(255,255,255,0.1); color: #fff; } body.site-theme .site-nav .links a.active { background: rgba(255,255,255,0.15); color: #FFCA7C; } /* --- hero banner --- */ .hero-banner { position: relative; width: 100%; max-height: 420px; overflow: hidden; margin-top: 56px; /* nav height */ } .hero-banner img { width: 100%; height: auto; display: block; object-fit: cover; object-position: center; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(30,10,0,0.55) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 32px 48px; gap: 12px; } @media (max-width: 640px) { .hero-banner { max-height: 240px; } .hero-overlay { padding: 16px 20px; flex-direction: row; align-items: flex-end; flex-wrap: wrap; } } /* --- shared btn --- */ .btn { display: inline-block; text-decoration: none; background: #C96A1F; color: #fff; font-weight: 800; padding: 13px 28px; border-radius: 99px; font-size: 1rem; transition: transform .1s, box-shadow .1s; border: 2px solid transparent; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(180,80,10,0.35); color: #fff; } .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.8); } .btn.ghost:hover { background: rgba(255,255,255,0.12); } .btn.brown { background: #5C2D0A; } /* --- CTA strip --- */ .cta-strip { background: linear-gradient(135deg, #5C2D0A 0%, #C96A1F 60%, #A55519 100%); padding: 36px 20px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .btn-cta { position: relative; display: inline-flex; align-items: center; gap: 14px; background: #fff; color: #5C2D0A; text-decoration: none; font-weight: 800; font-size: 1.6rem; padding: 20px 52px; border-radius: 99px; box-shadow: 0 6px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; white-space: nowrap; } .btn-cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 40px rgba(0,0,0,0.30); color: #5C2D0A; } .btn-cta:active { transform: translateY(0) scale(0.98); } .btn-cta-icon { font-size: 1.8rem; line-height: 1; } .btn-cta-text { letter-spacing: 0.01em; } /* gleam sweep */ .btn-cta::after { content: ''; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient( 105deg, transparent 30%, rgba(255,255,255,0.65) 50%, transparent 70% ); transform: translateX(-140%); animation: cta-gleam 3.5s ease-in-out infinite; } @keyframes cta-gleam { 0% { transform: translateX(-140%); } 40% { transform: translateX(320%); } 100% { transform: translateX(320%); } } .cta-sub { margin: 0; color: rgba(255,255,255,0.82); font-size: 0.92rem; letter-spacing: 0.03em; text-align: center; } @media (max-width: 480px) { .btn-cta { font-size: 1.25rem; padding: 18px 36px; gap: 10px; } .btn-cta-icon { font-size: 1.4rem; } } /* --- site wrap --- */ .site-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 64px; } /* --- sections --- */ .section { padding: 52px 0; } .section h2 { font-size: 1.75rem; text-align: center; color: #3D1F0A; margin: 0 0 6px; } .section .lead { color: #8B6E52; text-align: center; margin: 0 auto 36px; max-width: 560px; } .section .cat-label { display: inline-block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #C96A1F; border-bottom: 2px solid #C96A1F; padding-bottom: 2px; margin-bottom: 16px; } /* --- about image cards (flip cards) --- */ .about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } } @media (min-width: 721px) and (max-width: 960px) { .about-grid { grid-template-columns: repeat(3, 1fr); } } /* outer wrapper — perspective container */ .about-card { aspect-ratio: 3/4; perspective: 900px; cursor: pointer; } /* rotating inner */ .card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1), filter 0.3s ease; border-radius: 20px; box-shadow: 0 4px 16px rgba(120,60,10,0.15); } .about-card.flipped .card-inner { transform: translateY(-14px) rotateY(180deg); box-shadow: 0 18px 40px rgba(92,45,10,0.30); } /* shared face styles */ .card-front, .card-back { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* --- front face --- */ .card-front img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .about-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(30,10,0,0.88) 0%, rgba(30,10,0,0.55) 55%, transparent 100%); padding: 28px 18px 20px; color: #fff; } .about-tag { font-size: 1rem; font-weight: 800; margin-bottom: 6px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .about-overlay p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.88); text-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* --- back face --- */ .card-back { transform: rotateY(180deg); background: linear-gradient(160deg, rgba(92,45,10,0.82) 0%, rgba(61,31,10,0.88) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; padding: 18px 20px 22px; color: #F5D9B8; } /* close button */ .card-close { align-self: flex-end; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.30); color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, transform 0.15s; line-height: 1; } .card-close:hover { background: rgba(255,255,255,0.30); transform: scale(1.12); } /* back body content */ .card-back-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: hidden; } .card-back-icon { font-size: 2.8rem; line-height: 1; } .card-back-body h3 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #FFCA7C; line-height: 1.25; } .card-back-body > p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: rgba(245,217,184,0.90); } .card-back-body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; } .card-back-body ul li { font-size: 0.92rem; line-height: 1.4; color: #F5D9B8; padding-left: 14px; position: relative; } .card-back-body ul li::before { content: "–"; position: absolute; left: 0; color: #C96A1F; } /* --- channel strip --- */ .channel-strip { margin-top: 32px; background: #fff; border: 1px solid #EDD9C8; border-radius: 18px; padding: 20px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; box-shadow: 0 2px 8px rgba(120,60,10,0.07); } .channel-label { font-weight: 700; color: #5C2D0A; font-size: 0.95rem; white-space: nowrap; } .channel-pills { display: flex; gap: 10px; flex-wrap: wrap; } .channel-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 99px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: transform .1s, box-shadow .1s; white-space: nowrap; } .channel-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .channel-pill .ch-icon { font-size: 1.1rem; } .channel-pill.line { background: #06C755; color: #fff; } .channel-pill.facebook { background: #1877F2; color: #fff; } .channel-pill.discord { background: #5865F2; color: #fff; } .channel-pill.web { background: #5C2D0A; color: #F5D9B8; } /* --- divider --- */ .divider { border: 0; border-top: 2px dashed #EDD9C8; margin: 0; } /* --- product cards grid --- */ .product-section { margin-bottom: 36px; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .product-card { background: #fff; border: 1px solid #EDD9C8; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(120,60,10,0.08); transition: transform .15s, box-shadow .15s; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(120,60,10,0.15); } .product-card .card-top { height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .product-card .card-emoji { font-size: 2.8rem; line-height: 1; } .product-card .card-body { padding: 14px 14px 16px; } .product-card .card-name { font-weight: 700; font-size: 0.92rem; color: #3D1F0A; margin-bottom: 8px; } .product-card .card-price { display: inline-block; background: #FEF0E0; color: #C96A1F; font-weight: 800; font-size: 1rem; padding: 3px 12px; border-radius: 99px; border: 1px solid #F5D4AC; } /* --- menu poster --- */ .poster-row { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; margin-top: 28px; } @media (max-width: 820px) { .poster-row { grid-template-columns: 1fr; } } .poster-row .poster-img { border-radius: 18px; overflow: hidden; box-shadow: 0 4px 20px rgba(120,60,10,0.15); } .poster-row .poster-img img { width: 100%; height: auto; display: block; } .poster-cta { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 8px 0; } .poster-cta h3 { font-size: 1.4rem; color: #3D1F0A; margin: 0; } .poster-cta p { color: #8B6E52; margin: 0; line-height: 1.7; } /* --- footer --- */ .site-foot { background: #5C2D0A; color: #F5D9B8; text-align: center; padding: 36px 20px; font-size: 0.9rem; line-height: 1.8; } .site-foot a { color: #FFCA7C; text-decoration: none; } .site-foot a:hover { text-decoration: underline; } /* --- online order skeleton --- */ .order-layout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; } @media (max-width: 860px) { .order-layout { grid-template-columns: 1fr; } } .panel { background: #fff; border: 1px solid #EDD9C8; border-radius: 14px; padding: 20px; } .panel h3 { margin: 0 0 14px; color: #3D1F0A; } .placeholder { border: 1px dashed #EDD9C8; border-radius: 12px; padding: 28px; text-align: center; color: #8B6E52; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 0.85rem; color: #8B6E52; margin-bottom: 6px; } .field input, .field textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #EDD9C8; background: #FEF6EC; color: #3D1F0A; font-family: inherit; font-size: 0.95rem; } .field input:disabled, .field textarea:disabled { opacity: 0.55; }