Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Aroma House | A Cozy Neighborhood Coffee Space</title> | |
| <meta name="description" | |
| content="Aroma House is a cozy neighborhood coffee space for meaningful conversations, quiet work, and handcrafted coffee with people you care about."> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" | |
| rel="stylesheet"> | |
| <!-- Lucide Icons --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['DM Sans', 'system-ui', 'sans-serif'], | |
| serif: ['Playfair Display', 'Georgia', 'serif'], | |
| }, | |
| colors: { | |
| coffee: { | |
| 50: '#faf6f1', | |
| 100: '#f0e6d8', | |
| 200: '#e0ccaf', | |
| 300: '#c8a878', | |
| 400: '#b08955', | |
| 500: '#9a6e3e', | |
| 600: '#7d5730', | |
| 700: '#5c4024', | |
| 800: '#3e2b18', | |
| 900: '#2a1d10', | |
| 950: '#1a1008', | |
| }, | |
| cream: { | |
| 50: '#fdfcfa', | |
| 100: '#faf6ef', | |
| 200: '#f5ece0', | |
| 300: '#ecdfc9', | |
| }, | |
| sage: { | |
| 100: '#e8ede6', | |
| 200: '#d1dcd0', | |
| 300: '#a8bfa4', | |
| 400: '#7a9a72', | |
| 500: '#5c7d54', | |
| }, | |
| amber: { | |
| warm: '#c9964b', | |
| deep: '#a3742e', | |
| } | |
| }, | |
| animation: { | |
| 'fade-up': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| 'fade-in': 'fadeIn 0.6s ease-out forwards', | |
| 'slide-right': 'slideRight 0.5s ease-out forwards', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'gentle-bounce': 'gentleBounce 2s ease-in-out infinite', | |
| 'reveal': 'reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| 'draw-line': 'drawLine 1.2s ease-out forwards', | |
| 'scale-in': 'scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| }, | |
| keyframes: { | |
| fadeUp: { | |
| '0%': { opacity: '0', transform: 'translateY(30px)' }, | |
| '100%': { opacity: '1', transform: 'translateY(0)' }, | |
| }, | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| slideRight: { | |
| '0%': { opacity: '0', transform: 'translateX(-20px)' }, | |
| '100%': { opacity: '1', transform: 'translateX(0)' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-8px)' }, | |
| }, | |
| gentleBounce: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-4px)' }, | |
| }, | |
| reveal: { | |
| '0%': { clipPath: 'inset(0 100% 0 0)', opacity: '0' }, | |
| '100%': { clipPath: 'inset(0 0% 0 0)', opacity: '1' }, | |
| }, | |
| drawLine: { | |
| '0%': { width: '0%' }, | |
| '100%': { width: '60px' }, | |
| }, | |
| scaleIn: { | |
| '0%': { opacity: '0', transform: 'scale(0.9)' }, | |
| '100%': { opacity: '1', transform: 'scale(1)' }, | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* ========================================= | |
| CSS CUSTOM PROPERTIES & DESIGN TOKENS | |
| ========================================= */ | |
| :root { | |
| --color-cream: #faf6ef; | |
| --color-coffee-50: #faf6f1; | |
| --color-coffee-100: #f0e6d8; | |
| --color-coffee-200: #e0ccaf; | |
| --color-coffee-300: #c8a878; | |
| --color-coffee-400: #b08955; | |
| --color-coffee-500: #9a6e3e; | |
| --color-coffee-600: #7d5730; | |
| --color-coffee-700: #5c4024; | |
| --color-coffee-800: #3e2b18; | |
| --color-coffee-900: #2a1d10; | |
| --color-coffee-950: #1a1008; | |
| --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); | |
| --ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| --shadow-card: 0 1px 3px rgba(26, 16, 8, 0.06), 0 8px 24px rgba(26, 16, 8, 0.08); | |
| --shadow-card-hover: 0 4px 12px rgba(26, 16, 8, 0.1), 0 16px 48px rgba(26, 16, 8, 0.12); | |
| --shadow-glow: 0 0 40px rgba(200, 168, 120, 0.15); | |
| } | |
| /* ========================================= | |
| GLOBAL BASE STYLES | |
| ========================================= */ | |
| *, | |
| *::before, | |
| *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| scroll-padding-top: 90px; | |
| } | |
| body { | |
| font-family: 'DM Sans', system-ui, sans-serif; | |
| background-color: var(--color-cream); | |
| color: var(--color-coffee-800); | |
| line-height: 1.7; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| ::selection { | |
| background-color: var(--color-coffee-300); | |
| color: var(--color-coffee-950); | |
| } | |
| ::-webkit-scrollbar { | |
| width: 7px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--color-cream); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--color-coffee-300); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--color-coffee-400); | |
| } | |
| /* ========================================= | |
| TYPOGRAPHY UTILITIES | |
| ========================================= */ | |
| .font-serif { | |
| font-family: 'Playfair Display', Georgia, serif; | |
| } | |
| /* Elegant text rendering */ | |
| .text-balance { | |
| text-wrap: balance; | |
| } | |
| /* ========================================= | |
| SCROLL REVEAL ANIMATIONS | |
| ========================================= */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(40px); | |
| transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth); | |
| } | |
| .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; | |
| } | |
| .reveal-delay-4 { | |
| transition-delay: 0.4s; | |
| } | |
| .reveal-delay-5 { | |
| transition-delay: 0.5s; | |
| } | |
| /* ========================================= | |
| SECTION DECORATIVE ELEMENTS | |
| ========================================= */ | |
| .section-label { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--color-coffee-400); | |
| margin-bottom: 1.25rem; | |
| } | |
| .section-label::before { | |
| content: ''; | |
| display: block; | |
| width: 24px; | |
| height: 1.5px; | |
| background: var(--color-coffee-300); | |
| border-radius: 1px; | |
| } | |
| .section-divider { | |
| width: 60px; | |
| height: 2px; | |
| background: var(--color-coffee-300); | |
| border-radius: 2px; | |
| margin: 0 auto; | |
| } | |
| /* ========================================= | |
| HERO VIDEO BACKGROUND | |
| ========================================= */ | |
| .hero-video-wrapper { | |
| position: absolute; | |
| inset: 0; | |
| overflow: hidden; | |
| border-radius: 0 0 48px 48px; | |
| } | |
| .hero-video-wrapper::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| linear-gradient(180deg, rgba(26, 16, 8, 0.55) 0%, rgba(26, 16, 8, 0.3) 40%, rgba(26, 16, 8, 0.65) 100%), | |
| linear-gradient(135deg, rgba(92, 64, 36, 0.2) 0%, transparent 50%); | |
| z-index: 1; | |
| } | |
| .hero-video-wrapper img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transform: scale(1.05); | |
| animation: slowZoom 20s ease-in-out infinite alternate; | |
| } | |
| @keyframes slowZoom { | |
| 0% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1.15); | |
| } | |
| } | |
| /* ========================================= | |
| GLASS MORPHISM EFFECTS | |
| ========================================= */ | |
| .glass { | |
| background: rgba(250, 246, 239, 0.75); | |
| backdrop-filter: blur(20px) saturate(1.3); | |
| -webkit-backdrop-filter: blur(20px) saturate(1.3); | |
| } | |
| .glass-dark { | |
| background: rgba(42, 29, 16, 0.8); | |
| backdrop-filter: blur(20px) saturate(1.3); | |
| -webkit-backdrop-filter: blur(20px) saturate(1.3); | |
| } | |
| /* ========================================= | |
| CARD STYLES | |
| ========================================= */ | |
| .card-luxe { | |
| background: #fff; | |
| border-radius: 20px; | |
| border: 1px solid rgba(200, 168, 120, 0.12); | |
| box-shadow: var(--shadow-card); | |
| transition: | |
| transform 0.5s var(--ease-smooth), | |
| box-shadow 0.5s var(--ease-smooth), | |
| border-color 0.4s ease; | |
| overflow: hidden; | |
| } | |
| .card-luxe:hover { | |
| transform: translateY(-6px); | |
| box-shadow: var(--shadow-card-hover); | |
| border-color: rgba(200, 168, 120, 0.25); | |
| } | |
| .card-luxe .card-img { | |
| transition: transform 0.7s var(--ease-smooth); | |
| } | |
| .card-luxe:hover .card-img { | |
| transform: scale(1.06); | |
| } | |
| /* ========================================= | |
| BUTTON STYLES | |
| ========================================= */ | |
| .btn-primary { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 0.9rem 2.2rem; | |
| background: var(--color-coffee-800); | |
| color: #fff; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| letter-spacing: 0.02em; | |
| border: none; | |
| cursor: pointer; | |
| overflow: hidden; | |
| transition: all 0.4s var(--ease-smooth); | |
| box-shadow: 0 4px 16px rgba(62, 43, 24, 0.25); | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: var(--color-coffee-700); | |
| transform: translateX(-101%); | |
| transition: transform 0.5s var(--ease-smooth); | |
| border-radius: 50px; | |
| } | |
| .btn-primary:hover::before { | |
| transform: translateX(0); | |
| } | |
| .btn-primary span, | |
| .btn-primary i { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .btn-primary:hover { | |
| box-shadow: 0 8px 30px rgba(62, 43, 24, 0.35); | |
| transform: translateY(-1px); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| box-shadow: 0 2px 8px rgba(62, 43, 24, 0.2); | |
| } | |
| .btn-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 0.85rem 2rem; | |
| background: transparent; | |
| color: var(--color-coffee-800); | |
| border: 1.5px solid rgba(200, 168, 120, 0.4); | |
| border-radius: 50px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| letter-spacing: 0.02em; | |
| cursor: pointer; | |
| transition: all 0.4s var(--ease-smooth); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--color-coffee-500); | |
| background: rgba(200, 168, 120, 0.08); | |
| transform: translateY(-1px); | |
| } | |
| /* ========================================= | |
| NAVIGATION STYLES | |
| ========================================= */ | |
| .nav-glass { | |
| background: rgba(250, 246, 239, 0.85); | |
| backdrop-filter: blur(24px) saturate(1.2); | |
| -webkit-backdrop-filter: blur(24px) saturate(1.2); | |
| } | |
| .nav-scrolled { | |
| box-shadow: 0 1px 0 rgba(200, 168, 120, 0.15), 0 4px 20px rgba(26, 16, 8, 0.06); | |
| } | |
| .nav-link { | |
| position: relative; | |
| color: var(--color-coffee-700); | |
| font-weight: 500; | |
| font-size: 0.88rem; | |
| padding: 0.4rem 0; | |
| transition: color 0.3s ease; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 1.5px; | |
| background: var(--color-coffee-500); | |
| border-radius: 1px; | |
| transition: width 0.35s var(--ease-smooth); | |
| } | |
| .nav-link:hover { | |
| color: var(--color-coffee-900); | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| /* ========================================= | |
| MOBILE MENU | |
| ========================================= */ | |
| .mobile-menu { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 100; | |
| background: rgba(250, 246, 239, 0.97); | |
| backdrop-filter: blur(30px); | |
| -webkit-backdrop-filter: blur(30px); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.4s ease, visibility 0.4s ease; | |
| } | |
| .mobile-menu.open { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .mobile-menu a { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.75rem; | |
| color: var(--color-coffee-800); | |
| opacity: 0; | |
| transform: translateY(12px); | |
| transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease; | |
| } | |
| .mobile-menu.open a { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .mobile-menu.open a:nth-child(1) { | |
| transition-delay: 0.1s; | |
| } | |
| .mobile-menu.open a:nth-child(2) { | |
| transition-delay: 0.15s; | |
| } | |
| .mobile-menu.open a:nth-child(3) { | |
| transition-delay: 0.2s; | |
| } | |
| .mobile-menu.open a:nth-child(4) { | |
| transition-delay: 0.25s; | |
| } | |
| .mobile-menu.open a:nth-child(5) { | |
| transition-delay: 0.3s; | |
| } | |
| .mobile-menu.open a:nth-child(6) { | |
| transition-delay: 0.35s; | |
| } | |
| .mobile-menu.open a:nth-child(7) { | |
| transition-delay: 0.4s; | |
| } | |
| .mobile-menu a:hover { | |
| color: var(--color-coffee-500); | |
| } | |
| /* ========================================= | |
| STICKY BOTTOM BAR (MOBILE) | |
| ========================================= */ | |
| .sticky-bar { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 50; | |
| padding: 0.6rem 1rem 0.8rem; | |
| background: rgba(250, 246, 239, 0.92); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-top: 1px solid rgba(200, 168, 120, 0.15); | |
| transform: translateY(100%); | |
| transition: transform 0.5s var(--ease-smooth); | |
| } | |
| .sticky-bar.visible { | |
| transform: translateY(0); | |
| } | |
| /* ========================================= | |
| FORM STYLES | |
| ========================================= */ | |
| .form-input { | |
| width: 100%; | |
| padding: 0.85rem 1.1rem; | |
| border: 1.5px solid rgba(200, 168, 120, 0.2); | |
| border-radius: 14px; | |
| background: #fff; | |
| color: var(--color-coffee-800); | |
| font-size: 0.9rem; | |
| font-family: inherit; | |
| transition: all 0.3s var(--ease-smooth); | |
| outline: none; | |
| } | |
| .form-input::placeholder { | |
| color: var(--color-coffee-300); | |
| } | |
| .form-input:hover { | |
| border-color: rgba(200, 168, 120, 0.4); | |
| } | |
| .form-input:focus { | |
| border-color: var(--color-coffee-400); | |
| box-shadow: 0 0 0 4px rgba(200, 168, 120, 0.12); | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--color-coffee-600); | |
| margin-bottom: 0.4rem; | |
| letter-spacing: 0.03em; | |
| text-transform: uppercase; | |
| } | |
| /* ========================================= | |
| MENU FILTER TABS | |
| ========================================= */ | |
| .menu-tab { | |
| position: relative; | |
| padding: 0.55rem 1.2rem; | |
| border-radius: 50px; | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| color: var(--color-coffee-600); | |
| background: transparent; | |
| border: 1.5px solid transparent; | |
| cursor: pointer; | |
| transition: all 0.35s var(--ease-smooth); | |
| white-space: nowrap; | |
| } | |
| .menu-tab:hover { | |
| background: rgba(200, 168, 120, 0.08); | |
| color: var(--color-coffee-700); | |
| } | |
| .menu-tab.active { | |
| background: var(--color-coffee-800); | |
| color: #fff; | |
| border-color: var(--color-coffee-800); | |
| box-shadow: 0 4px 14px rgba(62, 43, 24, 0.2); | |
| } | |
| /* ========================================= | |
| GALLERY MASONRY GRID | |
| ========================================= */ | |
| .gallery-masonry { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| grid-auto-rows: 200px; | |
| gap: 10px; | |
| } | |
| @media (max-width: 1024px) { | |
| .gallery-masonry { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .gallery-masonry { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| .gallery-item { | |
| position: relative; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| box-shadow: var(--shadow-card); | |
| } | |
| .gallery-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.7s var(--ease-smooth), filter 0.5s ease; | |
| } | |
| .gallery-item:hover img { | |
| transform: scale(1.08); | |
| filter: brightness(1.05); | |
| } | |
| .gallery-item .gallery-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(to top, rgba(26, 16, 8, 0.6) 0%, transparent 60%); | |
| opacity: 0; | |
| transition: opacity 0.4s ease; | |
| display: flex; | |
| align-items: flex-end; | |
| padding: 1rem; | |
| } | |
| .gallery-item:hover .gallery-overlay { | |
| opacity: 1; | |
| } | |
| .gallery-item.tall { | |
| grid-row: span 2; | |
| } | |
| .gallery-item.wide { | |
| grid-column: span 2; | |
| } | |
| /* ========================================= | |
| LIGHTBOX | |
| ========================================= */ | |
| .lightbox { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 200; | |
| background: rgba(10, 6, 3, 0.92); | |
| backdrop-filter: blur(12px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.4s ease, visibility 0.4s ease; | |
| } | |
| .lightbox.open { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .lightbox img { | |
| max-width: 90vw; | |
| max-height: 85vh; | |
| object-fit: contain; | |
| border-radius: 12px; | |
| transform: scale(0.92); | |
| transition: transform 0.5s var(--ease-smooth); | |
| } | |
| .lightbox.open img { | |
| transform: scale(1); | |
| } | |
| /* ========================================= | |
| TESTIMONIAL CARD | |
| ========================================= */ | |
| .testimonial-card { | |
| background: #fff; | |
| border-radius: 20px; | |
| padding: 2rem; | |
| border: 1px solid rgba(200, 168, 120, 0.1); | |
| box-shadow: var(--shadow-card); | |
| transition: all 0.5s var(--ease-smooth); | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-card-hover); | |
| } | |
| /* ========================================= | |
| LOYALTY CARD | |
| ========================================= */ | |
| .loyalty-stamp { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 50%; | |
| border: 2.5px dashed var(--color-coffee-200); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.5s var(--ease-bounce-soft); | |
| position: relative; | |
| } | |
| .loyalty-stamp.filled { | |
| background: var(--color-coffee-800); | |
| border-color: var(--color-coffee-800); | |
| box-shadow: 0 4px 14px rgba(62, 43, 24, 0.25); | |
| animation: stampPop 0.5s var(--ease-bounce-soft); | |
| } | |
| @keyframes stampPop { | |
| 0% { | |
| transform: scale(0.5); | |
| } | |
| 60% { | |
| transform: scale(1.15); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| /* ========================================= | |
| FEATURE ROW HOVER | |
| ========================================= */ | |
| .feature-row { | |
| transition: all 0.4s var(--ease-smooth); | |
| border-radius: 16px; | |
| padding: 1rem; | |
| margin: -1rem; | |
| } | |
| .feature-row:hover { | |
| background: rgba(200, 168, 120, 0.05); | |
| } | |
| /* ========================================= | |
| AMBIENCE IMAGE | |
| ========================================= */ | |
| .ambience-img { | |
| border-radius: 24px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 60px rgba(26, 16, 8, 0.15); | |
| position: relative; | |
| } | |
| .ambience-img::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 24px; | |
| box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); | |
| pointer-events: none; | |
| } | |
| /* ========================================= | |
| RATING STARS | |
| ========================================= */ | |
| .star-filled { | |
| color: #c9964b; | |
| } | |
| .star-empty { | |
| color: var(--color-coffee-200); | |
| } | |
| /* ========================================= | |
| MAP CONTAINER | |
| ========================================= */ | |
| .map-container { | |
| border-radius: 24px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-card); | |
| position: relative; | |
| } | |
| .map-container::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 24px; | |
| box-shadow: inset 0 0 0 1px rgba(200, 168, 120, 0.15); | |
| pointer-events: none; | |
| } | |
| /* ========================================= | |
| HOURS ROW | |
| ========================================= */ | |
| .hours-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid rgba(200, 168, 120, 0.12); | |
| transition: background 0.3s ease; | |
| } | |
| .hours-row:last-child { | |
| border-bottom: none; | |
| } | |
| .hours-row:hover { | |
| background: rgba(200, 168, 120, 0.04); | |
| margin: 0 -0.75rem; | |
| padding-left: 0.75rem; | |
| padding-right: 0.75rem; | |
| border-radius: 8px; | |
| } | |
| /* ========================================= | |
| RESPONSIVE IMAGE ASPECT RATIO | |
| ========================================= */ | |
| .img-aspect { | |
| aspect-ratio: 4 / 3; | |
| object-fit: cover; | |
| } | |
| /* ========================================= | |
| SUBTLE ANIMATED GRADIENT FOR HERO | |
| ========================================= */ | |
| .hero-gradient-animated { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 40%; | |
| background: linear-gradient(to top, rgba(250, 246, 239, 1) 0%, transparent 100%); | |
| z-index: 2; | |
| pointer-events: none; | |
| } | |
| /* ========================================= | |
| NOISE TEXTURE OVERLAY (subtle) | |
| ========================================= */ | |
| .noise-overlay { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 9999; | |
| opacity: 0.02; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| } | |
| /* ========================================= | |
| SMOOTH CURVE SECTION DIVIDERS | |
| ========================================= */ | |
| .curve-top { | |
| position: absolute; | |
| top: -1px; | |
| left: 0; | |
| right: 0; | |
| line-height: 0; | |
| } | |
| .curve-bottom { | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| right: 0; | |
| line-height: 0; | |
| transform: rotate(180deg); | |
| } | |
| /* ========================================= | |
| MENU ITEM CARD | |
| ========================================= */ | |
| .menu-item-card { | |
| display: flex; | |
| gap: 1rem; | |
| padding: 1.25rem; | |
| background: #fff; | |
| border-radius: 16px; | |
| border: 1px solid rgba(200, 168, 120, 0.1); | |
| transition: all 0.4s var(--ease-smooth); | |
| } | |
| .menu-item-card:hover { | |
| box-shadow: var(--shadow-card-hover); | |
| transform: translateY(-3px); | |
| border-color: rgba(200, 168, 120, 0.2); | |
| } | |
| .menu-item-img { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 12px; | |
| object-fit: cover; | |
| flex-shrink: 0; | |
| } | |
| /* ========================================= | |
| MARQUEE ANIMATION | |
| ========================================= */ | |
| .marquee-track { | |
| display: flex; | |
| gap: 2rem; | |
| animation: marquee 30s linear infinite; | |
| } | |
| .marquee-track:hover { | |
| animation-play-state: paused; | |
| } | |
| @keyframes marquee { | |
| 0% { | |
| transform: translateX(0); | |
| } | |
| 100% { | |
| transform: translateX(-50%); | |
| } | |
| } | |
| /* ========================================= | |
| STORY TIMELINE | |
| ========================================= */ | |
| .timeline-line { | |
| position: absolute; | |
| left: 24px; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(to bottom, var(--color-coffee-300), var(--color-coffee-200)); | |
| } | |
| .timeline-dot { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--color-coffee-800); | |
| border: 3px solid var(--color-cream); | |
| box-shadow: 0 0 0 3px var(--color-coffee-200); | |
| position: relative; | |
| z-index: 1; | |
| flex-shrink: 0; | |
| } | |
| /* ========================================= | |
| STATS COUNTER | |
| ========================================= */ | |
| .stat-number { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 3rem; | |
| font-weight: 600; | |
| color: var(--color-coffee-800); | |
| line-height: 1; | |
| } | |
| /* ========================================= | |
| FOOTER LINKS | |
| ========================================= */ | |
| .footer-link { | |
| color: var(--color-coffee-400); | |
| transition: color 0.3s ease, transform 0.3s ease; | |
| display: inline-block; | |
| } | |
| .footer-link:hover { | |
| color: var(--color-coffee-600); | |
| transform: translateX(4px); | |
| } | |
| /* ========================================= | |
| SOCIAL ICON | |
| ========================================= */ | |
| .social-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(200, 168, 120, 0.1); | |
| color: var(--color-coffee-600); | |
| transition: all 0.4s var(--ease-smooth); | |
| } | |
| .social-icon:hover { | |
| background: var(--color-coffee-800); | |
| color: #fff; | |
| transform: translateY(-3px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Subtle Noise Texture --> | |
| <div class="noise-overlay"></div> | |
| <!-- ========================================= | |
| NAVIGATION HEADER | |
| ========================================= --> | |
| <header id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500"> | |
| <div class="max-w-7xl mx-auto px-5 sm:px-8"> | |
| <nav class="flex items-center justify-between h-[70px]"> | |
| <!-- Logo --> | |
| <a href="#home" class="flex items-center gap-2.5 group"> | |
| <div | |
| class="w-9 h-9 rounded-xl bg-coffee-800 flex items-center justify-center transition-transform duration-300 group-hover:scale-105 group-hover:rotate-3"> | |
| <i data-lucide="coffee" class="w-[18px] h-[18px] text-cream-100"></i> | |
| </div> | |
| <span class="font-serif text-xl font-semibold text-coffee-900 tracking-tight">Aroma House</span> | |
| </a> | |
| <!-- Desktop Nav --> | |
| <div class="hidden lg:flex items-center gap-7"> | |
| <a href="#home" class="nav-link">Home</a> | |
| <a href="#menu" class="nav-link">Menu</a> | |
| <a href="#about" class="nav-link">About</a> | |
| <a href="#gallery" class="nav-link">Gallery</a> | |
| <a href="#reservations" class="nav-link">Reservations</a> | |
| <a href="#location" class="nav-link">Location</a> | |
| <a href="#contact" class="nav-link">Contact</a> | |
| </div> | |
| <!-- CTA + Mobile Toggle --> | |
| <div class="flex items-center gap-3"> | |
| <a href="#reservations" class="hidden sm:inline-flex btn-primary text-sm py-2.5 px-5"> | |
| <span>Book a Table</span> | |
| <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i> | |
| </a> | |
| <button id="mobileMenuBtn" class="lg:hidden w-10 h-10 rounded-xl border border-coffee-200/50 flex items-center justify-center transition-colors hover:bg-coffee-100/50" aria-label="Open menu"> | |
| <i data-lucide="menu" class="w-5 h-5 text-coffee-800"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu Overlay --> | |
| <div id="mobileMenu" class="mobile-menu"> | |
| <button id="mobileMenuClose" class="absolute top-5 right-5 w-11 h-11 rounded-full bg-coffee-100 flex items-center justify-center transition-colors hover:bg-coffee-200" aria-label="Close menu"> | |
| <i data-lucide="x" class="w-5 h-5 text-coffee-800"></i> | |
| </button> | |
| <a href="#home" class="mobile-menu-link">Home</a> | |
| <a href="#menu" class="mobile-menu-link">Menu</a> | |
| <a href="#about" class="mobile-menu-link">About</a> | |
| <a href="#gallery" class="mobile-menu-link">Gallery</a> | |
| <a href="#reservations" class="mobile-menu-link">Reservations</a> | |
| <a href="#location" class="mobile-menu-link">Location</a> | |
| <a href="#contact" class="mobile-menu-link">Contact</a> | |
| <a href="#reservations" class="btn-primary mt-4"> | |
| <span>Book a Table</span> | |
| </a> | |
| </div> | |
| <!-- ========================================= | |
| HERO SECTION | |
| ========================================= --> | |
| <section id="home" class="relative min-h-[100dvh] flex items-center justify-center overflow-hidden"> | |
| <div class="hero-video-wrapper"> | |
| <img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=1920&q=85&auto=format" alt="Cozy coffee shop interior with warm lighting and wooden furniture"> | |
| </div> | |
| <!-- Animated gradient at bottom --> | |
| <div class="hero-gradient-animated"></div> | |
| <div class="relative z-10 max-w-5xl mx-auto px-5 sm:px-8 text-center pt-20 pb-32"> | |
| <div | |
| class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/15 mb-8 animate-fade-in" | |
| style="animation-delay: 0.2s;"> | |
| <i data-lucide="sparkles" class="w-3.5 h-3.5 text-amber-warm"></i> | |
| <span class="text-white/90 text-xs font-medium tracking-wide">Crafted with care since 2018</span> | |
| </div> | |
| <h1 | |
| class="font-serif text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-medium text-white leading-[1.05] mb-6 animate-fade-up text-balance" | |
| style="animation-delay: 0.3s; text-shadow: 0 4px 30px rgba(0,0,0,0.3);"> | |
| Relax, Connect, and<br class="hidden sm:block"> Enjoy Coffee | |
| <em class="text-amber-warm not-italic">Together</em> | |
| </h1> | |
| <p class="text-base sm:text-lg text-white/75 max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-up text-balance" | |
| style="animation-delay: 0.5s; text-shadow: 0 2px 10px rgba(0,0,0,0.2);"> | |
| A cozy coffee space for meaningful conversations, quiet work sessions, weekend moments, and handcrafted coffee — | |
| shared with people you care about. | |
| </p> | |
| <div class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-up" | |
| style="animation-delay: 0.7s;"> | |
| <a href="#reservations" class="btn-primary text-base py-3.5 px-8"> | |
| <span>Reserve a Table</span> | |
| <i data-lucide="calendar" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#menu" | |
| class="btn-secondary text-base py-3.5 px-8 border-white/30 text-white hover:bg-white/10 hover:border-white/50"> | |
| <span>View Menu</span> | |
| <i data-lucide="utensils" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <!-- Trust indicators --> | |
| <div class="flex flex-wrap items-center justify-center gap-5 sm:gap-8 mt-14 animate-fade-up" | |
| style="animation-delay: 0.9s;"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center"> | |
| <i data-lucide="leaf" class="w-3.5 h-3.5 text-sage-300"></i> | |
| </div> | |
| <span class="text-white/70 text-xs sm:text-sm font-medium">Fresh Roasted</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center"> | |
| <i data-lucide="sofa" class="w-3.5 h-3.5 text-amber-warm"></i> | |
| </div> | |
| <span class="text-white/70 text-xs sm:text-sm font-medium">Cozy Seating</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center"> | |
| <i data-lucide="wifi" class="w-3.5 h-3.5 text-sage-300"></i> | |
| </div> | |
| <span class="text-white/70 text-xs sm:text-sm font-medium">Free Wi-Fi</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center"> | |
| <i data-lucide="heart" class="w-3.5 h-3.5 text-rose-300"></i> | |
| </div> | |
| <span class="text-white/70 text-xs sm:text-sm font-medium">Family Friendly</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ========================================= | |
| QUICK ROUTINE PROMPTS | |
| ========================================= --> | |
| <section class="py-16 px-5 sm:px-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4"> | |
| <div class="card-luxe p-6 text-center reveal reveal-delay-1 group cursor-default"> | |
| <div | |
| class="w-12 h-12 rounded-2xl bg-coffee-100 flex items-center justify-center mx-auto mb-4 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-6"> | |
| <i data-lucide="sunrise" class="w-5 h-5 text-coffee-600"></i> | |
| </div> | |
| <h3 class="font-serif text-lg font-medium text-coffee-800 mb-1.5">Morning Ritual</h3> | |
| <p class="text-xs text-coffee-500 leading-relaxed">Start your day with a perfect pour-over before work.</p> | |
| </div> | |
| <div class="card-luxe p-6 text-center reveal reveal-delay-2 group cursor-default"> | |
| <div | |
| class="w-12 h-12 rounded-2xl bg-sage-100 flex items-center justify-center mx-auto mb-4 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-6"> | |
| <i data-lucide="laptop" class="w-5 h-5 text-sage-500"></i> | |
| </div> | |
| <h3 class="font-serif text-lg font-medium text-coffee-800 mb-1.5">Work & Focus</h3> | |
| <p class="text-xs text-coffee-500 leading-relaxed">Quiet corners with power outlets and strong Wi-Fi.</p> | |
| </div> | |
| <div class="card-luxe p-6 text-center reveal reveal-delay-3 group cursor-default"> | |
| <div | |
| class="w-12 h-12 rounded-2xl bg-amber-100 flex items-center justify-center mx-auto mb-4 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-6"> |