/* ============================================================ Kukuduku 65 — Main Stylesheet kukuduku65.com ============================================================ */ /* ── Google Fonts are loaded in each HTML ── */ /* ── CSS Custom Properties ── */ :root { --primary: #ed1219; --secondary: #FFC300; --dark-accent: #1A1A1A; --dark-bg: #111111; --text-muted: rgba(255,255,255,0.4); --glass-bg: rgba(0,0,0,0.40); --glass-border: rgba(255,255,255,0.10); --radius-sm: 1rem; --radius-md: 1.5rem; --radius-lg: 2rem; --radius-xl: 3rem; --transition: 0.3s ease; } /* ── Base Reset ── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Be Vietnam Pro", sans-serif; background-color: var(--dark-accent); color: #f1f5f9; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; } /* ── Custom Scrollbar ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--dark-accent); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; } /* ============================================================ SHARED LAYOUT UTILITIES ============================================================ */ .section-pad { padding: 5rem 0; } @media (min-width: 768px) { .section-pad { padding: 8rem 0; } } .container { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 768px) { .container { padding: 0 1.5rem; } } /* ── Spice dot background pattern ── */ .spice-pattern { background-image: radial-gradient(var(--primary) 0.5px, transparent 0.5px); background-size: 40px 40px; opacity: 0.12; } /* ── Glass panel ── */ .glass-panel { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); } /* ============================================================ HEADER ============================================================ */ #main-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1rem 1.5rem; pointer-events: none; transition: background var(--transition), box-shadow var(--transition); } #main-header.scrolled { background: rgba(26,26,26,0.97); backdrop-filter: blur(20px); box-shadow: 0 4px 30px rgba(0,0,0,0.4); } #main-header .header-inner { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; pointer-events: auto; } #main-header .logo img { height: 52px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); text-decoration: none; } /* Desktop nav */ .desktop-nav { display: none; align-items: center; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; } @media (min-width: 1024px) { .desktop-nav { display: flex; } } .desktop-nav a { padding: 0.5rem 1.5rem; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; color: #f1f5f9; text-decoration: none; transition: color var(--transition); border-radius: 999px; } .desktop-nav a:hover { color: var(--secondary); } .desktop-nav a.active { color: var(--secondary); } .btn-nav-cta { background: var(--primary); color: white !important; padding: 0.5rem 2rem !important; border-radius: 999px; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; transition: transform 0.2s; text-decoration: none; } .btn-nav-cta:hover { transform: scale(1.05); } /* Mobile menu toggle button */ .mob-menu-btn { display: flex; background: var(--primary); color: white; padding: 0.5rem 1.25rem; border-radius: 999px; font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(237,18,25,0.3); } @media (min-width: 1024px) { .mob-menu-btn { display: none; } } /* ============================================================ MOBILE FULL-SCREEN MENU ============================================================ */ #mob-menu { position: fixed; inset: 0; background: rgba(26,26,26,0.98); backdrop-filter: blur(20px); z-index: 150; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; opacity: 0; pointer-events: none; transition: opacity 0.3s; } #mob-menu.open { opacity: 1; pointer-events: all; } #mob-menu .mob-close { position: absolute; top: 1.5rem; right: 1.5rem; background: rgba(255,255,255,0.1); border: none; color: white; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; } #mob-menu a { color: white; font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; transition: color var(--transition); } #mob-menu a:hover { color: var(--secondary); } #mob-menu .mob-cta { background: var(--primary); color: white; padding: 1rem 3rem; border-radius: 999px; font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.15em; text-decoration: none; margin-top: 1rem; border: none; cursor: pointer; } /* ============================================================ WHATSAPP FLOATING BUTTON ============================================================ */ #wa-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 99; background: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(37,211,102,0.4); cursor: pointer; border: none; transition: transform 0.2s, box-shadow 0.2s; } #wa-float:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(37,211,102,0.5); } /* ============================================================ TOAST NOTIFICATION ============================================================ */ #toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--primary); color: white; padding: 1rem 2rem; border-radius: 999px; font-weight: 800; font-size: 0.875rem; letter-spacing: 0.05em; z-index: 9999; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s; opacity: 0; white-space: nowrap; box-shadow: 0 20px 60px rgba(237,18,25,0.4); pointer-events: none; } #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* ============================================================ SCROLL REVEAL ANIMATION ============================================================ */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; font-family: "Be Vietnam Pro", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; border: none; cursor: pointer; text-decoration: none; transition: all var(--transition); border-radius: var(--radius-md); padding: 1.25rem 2.5rem; font-size: 1rem; } .btn-primary { background: var(--primary); color: white; box-shadow: 0 20px 60px rgba(237,18,25,0.35); } .btn-primary:hover { background: #c81016; } .btn-glass { background: var(--glass-bg); color: white; border: 1px solid var(--glass-border); backdrop-filter: blur(20px); } .btn-glass:hover { background: rgba(255,255,255,0.15); } .btn-dark { background: var(--dark-accent); color: white; } .btn-dark:hover { background: var(--primary); } .btn-green { background: #16a34a; color: white; } .btn-green:hover { background: #15803d; } /* ============================================================ FORM ELEMENTS ============================================================ */ .form-input { width: 100%; padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: #f8fafc; border: 2px solid transparent; font-family: "Be Vietnam Pro", sans-serif; font-weight: 700; font-size: 1rem; color: var(--dark-accent); outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .form-input:focus { border-color: rgba(237,18,25,0.3); box-shadow: 0 0 0 3px rgba(237,18,25,0.08); } .field-error { border-color: var(--primary) !important; } .form-label { display: block; font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: #94a3b8; margin-bottom: 0.375rem; } .err { display: none; color: var(--primary); font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; } /* ============================================================ CARDS ============================================================ */ /* Stat card */ .stat-card { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(20px); border-radius: 1.5rem; padding: 2rem; text-align: center; transition: border-color var(--transition); } .stat-card:hover { border-color: rgba(237,18,25,0.4); } .stat-card .stat-num { font-size: 3rem; font-weight: 900; display: block; margin-bottom: 0.5rem; } /* Feature card (dark hover) */ .feature-card { background: var(--dark-accent); color: white; border-radius: 1.5rem; padding: 2.5rem; transition: background 0.5s ease, transform 0.3s; box-shadow: 0 10px 40px rgba(0,0,0,0.3); } .feature-card:hover { background: var(--primary); transform: translateY(-4px); } .feature-card .card-icon { width: 4rem; height: 4rem; background: var(--primary); border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; transition: background 0.3s; } .feature-card:hover .card-icon { background: white; } .feature-card .card-icon .material-symbols-outlined { color: white; font-size: 1.75rem; } .feature-card:hover .card-icon .material-symbols-outlined { color: var(--primary); } .feature-card p { color: rgba(255,255,255,0.55); line-height: 1.7; transition: color 0.3s; } .feature-card:hover p { color: rgba(255,255,255,0.8); } /* Menu card */ .menu-card { position: relative; overflow: hidden; border-radius: 2rem; } .menu-card img { transition: transform 0.8s ease; width: 100%; height: 100%; object-fit: cover; } .menu-card:hover img { transform: scale(1.05); } .menu-card .menu-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.18) 55%, transparent 100%); } /* On mobile, remove the stagger offsets for menu cards */ @media (max-width: 1023px) { .menu-card.lg\:mt-8 { margin-top: 0 !important; } .menu-card.lg\:-mt-6 { margin-top: 0 !important; } .menu-card.lg\:mt-4 { margin-top: 0 !important; } } /* Review card */ .review-card { border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(20px); border-radius: 1.5rem; padding: 2rem; transition: background var(--transition); } .review-card:hover { background: rgba(255,255,255,0.08); } /* ============================================================ SECTION HEADINGS (shared pattern) ============================================================ */ .section-eyebrow { display: block; font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.4em; color: var(--primary); margin-bottom: 0.75rem; } .section-title { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 0.92; } /* ============================================================ OUTLET CARDS ============================================================ */ .outlet-card-inner { border: 2px solid #f1f5f9; border-radius: 1.5rem; padding: 2rem; transition: border-color var(--transition); } .outlet-card-inner:hover { border-color: var(--primary); } /* ============================================================ TESTIMONIAL / SHORT VIDEO CARDS ============================================================ */ .short-card { cursor: pointer; } .short-card .play-btn { transition: transform 0.3s; } .short-card:hover .play-btn { transform: scale(1.1); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--dark-accent); color: white; padding: 4rem 0; border-top: 1px solid rgba(255,255,255,0.05); } .footer-logo img { height: 56px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5)); } /* ============================================================ PAGE-SPECIFIC: HOMEPAGE ============================================================ */ /* Hero food bg parallax */ #hero-food { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: brightness(0.35) saturate(1.2); } /* Cart badge */ #cart-badge { position: absolute; top: -6px; right: -6px; background: var(--secondary); color: var(--dark-accent); font-size: 10px; font-weight: 900; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; } /* Cart bar */ #cart-bar { display: none; background: var(--primary); color: white; border-radius: 1.5rem; padding: 1rem 1.5rem; align-items: center; justify-content: space-between; font-weight: 900; font-size: 0.875rem; box-shadow: 0 10px 30px rgba(237,18,25,0.3); margin-bottom: 1.5rem; } /* ============================================================ PAGE-SPECIFIC: FRANCHISE ============================================================ */ .step-connector { width: 2px; flex: 1; background: rgba(255,255,255,0.2); margin-top: 1rem; } /* Progress bar */ #progress-bar { transition: width 0.5s ease; } /* ============================================================ PAGE-SPECIFIC: CONTACT ============================================================ */ .contact-channel-card { background: var(--dark-accent); color: white; border-radius: 1.5rem; padding: 2.5rem; text-align: center; cursor: pointer; transition: all 0.35s ease; box-shadow: 0 10px 40px rgba(0,0,0,0.3); } .contact-channel-card:hover { transform: translateY(-4px); } .contact-channel-card.red:hover { background: var(--primary); } .contact-channel-card.green:hover { background: #15803d; } .contact-channel-card .ch-icon { width: 4rem; height: 4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: background 0.3s; } /* Subject pills */ .subject-pill { padding: 0.5rem 1rem; border-radius: 999px; font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; user-select: none; border: none; transition: all 0.2s; } .subject-pill.active { background: var(--primary) !important; color: white !important; } .subject-pill:not(.active) { background: #f1f5f9; color: var(--dark-accent); } .subject-pill:not(.active):hover { background: #e2e8f0; } /* Outlet tabs */ .outlet-tab { padding: 0.5rem 1.25rem; border-radius: 999px; font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: white; transition: all 0.3s; } .outlet-tab:hover { border-color: var(--primary); } .outlet-tab.active { background: var(--primary); border-color: var(--primary); color: white; } /* Map pin animation */ @keyframes ripple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3); opacity: 0; } } .ping-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--primary); animation: ripple 2s ease-out infinite; } /* FAQ grid */ .faq-card { border: 2px solid #f1f5f9; border-radius: 1.5rem; padding: 2rem; transition: border-color var(--transition); } .faq-card:hover { border-color: var(--primary); } /* ============================================================ FAQ ACCORDION (franchise page) ============================================================ */ .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; } .faq-item.open .faq-body { max-height: 300px; padding-top: 0.75rem; } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-icon { transition: transform 0.3s; } /* ============================================================ MODAL OVERLAY ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); backdrop-filter: blur(8px); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .modal-overlay.active { opacity: 1; pointer-events: all; } .modal-box { background: var(--dark-accent); border: 1px solid var(--glass-border); border-radius: 2rem; padding: 2.5rem; max-width: 480px; width: 90%; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } .modal-overlay.active .modal-box { transform: scale(1); } /* ============================================================ UTILITY HELPERS ============================================================ */ .text-primary { color: var(--primary); } .text-secondary { color: var(--secondary); } .text-muted { color: var(--text-muted); } .bg-primary { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .font-black { font-weight: 900; } .uppercase { text-transform: uppercase; } .tracking-wide { letter-spacing: 0.1em; } .glow-primary { text-shadow: 0 0 60px rgba(237,18,25,0.5); } /* Glowing orbs (decorative bg blobs) */ .glow-blob { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }