Spaces:
Running
Running
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --coral: #E4937A; | |
| --coral-light: #F5A88E; | |
| --crema: #FFF8F3; | |
| --chocolate: #4A2C2A; | |
| --dorado: #D4A574; | |
| --sombra: rgba(74, 44, 42, 0.1); | |
| --sombra-dark: rgba(74, 44, 42, 0.2); | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--crema); | |
| color: var(--chocolate); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(228,147,122,0.67) 0%, rgba(245,168,142,0.67) 100%); | |
| z-index: 1; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .brand-name { | |
| animation: pulse 3s ease-in-out infinite; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, transparent 20%, rgba(255,248,243,0.17) 70%); | |
| animation: float 20s infinite ease-in-out; | |
| z-index: 2; | |
| mix-blend-mode: soft-light; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(-10%, -10%) rotate(0deg); } | |
| 50% { transform: translate(10%, 10%) rotate(180deg); } | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 3; | |
| text-align: center; | |
| animation: fadeInUp 1s ease-out; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .brand-name { | |
| font-family: 'Dancing Script', cursive; | |
| font-size: 5rem; | |
| font-weight: 700; | |
| color: var(--chocolate); | |
| text-shadow: 2px 2px 4px rgba(255,255,255,0.5); | |
| margin-bottom: 1rem; | |
| } | |
| .tagline { | |
| font-size: 1.5rem; | |
| color: var(--chocolate); | |
| margin-bottom: 2rem; | |
| font-weight: 500; | |
| } | |
| .hero-description { | |
| margin: 2rem 0; | |
| } | |
| .hero-description p { | |
| font-size: 1.2rem; | |
| margin: 0.5rem 0; | |
| opacity: 0.9; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin-top: 2rem; | |
| } | |
| .btn-primary, .btn-secondary, .btn-order { | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| font-size: 1.1rem; | |
| font-weight: 500; | |
| text-decoration: none; | |
| display: inline-block; | |
| transition: all 0.3s ease; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .btn-primary { | |
| background-color: var(--chocolate); | |
| color: var(--crema); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--dorado); | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px var(--sombra); | |
| } | |
| .btn-secondary { | |
| background-color: transparent; | |
| color: var(--chocolate); | |
| border: 2px solid var(--chocolate); | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--chocolate); | |
| color: var(--crema); | |
| } | |
| .floating-desserts { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 2; | |
| } | |
| .dessert { | |
| position: absolute; | |
| font-size: 2rem; | |
| opacity: 0.22; | |
| animation: floatDessert 15s infinite ease-in-out; | |
| } | |
| .dessert-1 { top: 10%; left: 10%; animation-delay: 0s; } | |
| .dessert-2 { top: 20%; right: 15%; animation-delay: 3s; } | |
| .dessert-3 { bottom: 30%; left: 20%; animation-delay: 6s; } | |
| .dessert-4 { bottom: 20%; right: 10%; animation-delay: 9s; } | |
| .dessert-5 { top: 50%; left: 50%; animation-delay: 12s; } | |
| @keyframes floatDessert { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(180deg); } | |
| } | |
| /* Section Styles */ | |
| .products-section, .story-section, .testimonials-section, .location-section { | |
| padding: 5rem 0; | |
| } | |
| .section-title { | |
| font-family: 'Dancing Script', cursive; | |
| font-size: 3.5rem; | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| color: var(--coral); | |
| position: relative; | |
| } | |
| .section-title::after { | |
| content: '🍪'; | |
| display: block; | |
| font-size: 2rem; | |
| margin-top: 0.5rem; | |
| } | |
| /* Product Filters */ | |
| .product-filters { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 3rem; | |
| flex-wrap: wrap; | |
| } | |
| .filter-btn { | |
| background: white; | |
| color: var(--chocolate); | |
| border: 2px solid var(--coral); | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 25px; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .filter-btn:hover, | |
| .filter-btn.active { | |
| background: var(--coral); | |
| color: white; | |
| } | |
| /* Products Grid */ | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| @media (max-width: 1024px) { | |
| .products-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .products-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .product-card.hidden { | |
| display: none; | |
| } | |
| .product-card { | |
| background: white; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px var(--sombra); | |
| transition: all 0.3s ease; | |
| animation: fadeInUp 0.8s ease-out backwards; | |
| } | |
| .product-card:nth-child(1) { animation-delay: 0.1s; } | |
| .product-card:nth-child(2) { animation-delay: 0.2s; } | |
| .product-card:nth-child(3) { animation-delay: 0.3s; } | |
| .product-card:nth-child(4) { animation-delay: 0.4s; } | |
| .product-card:nth-child(5) { animation-delay: 0.5s; } | |
| .product-card:nth-child(6) { animation-delay: 0.6s; } | |
| .product-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px var(--sombra-dark); | |
| } | |
| .product-image { | |
| position: relative; | |
| height: 250px; | |
| overflow: hidden; | |
| } | |
| .product-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .product-card:hover .product-image img { | |
| transform: scale(1.1); | |
| } | |
| .product-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(74, 44, 42, 0.7); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .product-card:hover .product-overlay { | |
| opacity: 1; | |
| } | |
| .quick-view { | |
| color: white; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| padding: 0.8rem 1.5rem; | |
| background: var(--coral); | |
| border-radius: 25px; | |
| transition: all 0.3s ease; | |
| } | |
| .quick-view:hover { | |
| background: var(--dorado); | |
| transform: scale(1.05); | |
| } | |
| .product-badge { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: var(--dorado); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .product-info { | |
| padding: 2rem; | |
| } | |
| .product-name { | |
| font-size: 1.8rem; | |
| color: var(--chocolate); | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| .product-description { | |
| color: var(--chocolate); | |
| opacity: 0.8; | |
| margin-bottom: 1rem; | |
| line-height: 1.6; | |
| } | |
| .product-meta { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .product-tag, .product-time { | |
| font-size: 0.9rem; | |
| color: var(--coral); | |
| background: rgba(228, 147, 122, 0.1); | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 15px; | |
| font-weight: 500; | |
| } | |
| .product-price-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .product-price { | |
| font-size: 1.5rem; | |
| color: var(--coral); | |
| font-weight: 700; | |
| } | |
| .btn-order { | |
| background: var(--coral); | |
| color: white; | |
| padding: 0.8rem 1.5rem; | |
| font-size: 1rem; | |
| border-radius: 25px; | |
| } | |
| .btn-order:hover { | |
| background: var(--dorado); | |
| transform: scale(1.05); | |
| } | |
| /* Story Section */ | |
| .story-section { | |
| background: linear-gradient(135deg, var(--crema) 0%, rgba(228,147,122,0.1) 100%); | |
| } | |
| .story-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .story-paragraph { | |
| font-size: 1.2rem; | |
| line-height: 1.8; | |
| margin-bottom: 1.5rem; | |
| text-align: justify; | |
| } | |
| .story-quote { | |
| font-size: 1.5rem; | |
| font-style: italic; | |
| color: var(--coral); | |
| text-align: center; | |
| margin: 2rem 0; | |
| padding: 0 2rem; | |
| position: relative; | |
| } | |
| .story-quote::before, .story-quote::after { | |
| content: '"'; | |
| font-size: 3rem; | |
| position: absolute; | |
| opacity: 0.3; | |
| } | |
| .story-quote::before { | |
| left: 0; | |
| top: -10px; | |
| } | |
| .story-quote::after { | |
| right: 0; | |
| bottom: -20px; | |
| } | |
| .story-signature { | |
| text-align: right; | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| color: var(--chocolate); | |
| } | |
| .story-image img { | |
| width: 100%; | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px var(--sombra); | |
| } | |
| /* Testimonials */ | |
| .testimonials-section { | |
| background: white; | |
| } | |
| .testimonials-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .testimonial-card { | |
| background: var(--crema); | |
| padding: 2rem; | |
| border-radius: 20px; | |
| box-shadow: 0 5px 20px var(--sombra); | |
| transition: transform 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .testimonial-stars { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .testimonial-text { | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| margin-bottom: 1.5rem; | |
| font-style: italic; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .author-avatar { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| } | |
| .author-name { | |
| font-weight: 600; | |
| color: var(--chocolate); | |
| } | |
| .author-location { | |
| font-size: 0.9rem; | |
| color: var(--coral); | |
| } | |
| /* Location Section */ | |
| .location-section { | |
| background: linear-gradient(135deg, var(--coral-light) 0%, var(--crema) 100%); | |
| } | |
| .location-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| } | |
| .location-title { | |
| font-size: 1.5rem; | |
| color: var(--chocolate); | |
| margin-bottom: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .location-list { | |
| space-y: 1rem; | |
| } | |
| .location-item { | |
| padding: 0.8rem 0; | |
| border-bottom: 1px solid rgba(74, 44, 42, 0.1); | |
| font-size: 1.1rem; | |
| } | |
| .social-title { | |
| font-size: 1.5rem; | |
| color: var(--chocolate); | |
| margin-bottom: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .instagram-feed { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .instagram-post { | |
| aspect-ratio: 1; | |
| overflow: hidden; | |
| border-radius: 10px; | |
| } | |
| .instagram-post img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .instagram-post:hover img { | |
| transform: scale(1.1); | |
| } | |
| .social-link { | |
| display: inline-block; | |
| color: var(--coral); | |
| font-weight: 600; | |
| text-decoration: none; | |
| font-size: 1.2rem; | |
| } | |
| .social-link:hover { | |
| text-decoration: underline; | |
| } | |
| /* Footer */ | |
| .main-footer { | |
| background-color: var(--chocolate); | |
| color: var(--crema); | |
| padding: 3rem 0 1rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-title { | |
| font-family: 'Dancing Script', cursive; | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .footer-subtitle { | |
| font-size: 1.2rem; | |
| margin-bottom: 1rem; | |
| color: var(--dorado); | |
| } | |
| .footer-description { | |
| line-height: 1.6; | |
| opacity: 0.9; | |
| } | |
| .footer-contact a { | |
| color: var(--crema); | |
| text-decoration: none; | |
| } | |
| .footer-contact a:hover { | |
| color: var(--coral); | |
| } | |
| .footer-social { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .social-icon { | |
| color: var(--crema); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| color: var(--coral); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 2rem; | |
| border-top: 1px solid rgba(255,248,243,0.2); | |
| opacity: 0.8; | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 768px) { | |
| .brand-name { | |
| font-size: 3.5rem; | |
| } | |
| .hero-buttons { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .section-title { | |
| font-size: 2.5rem; | |
| } | |
| .story-content, | |
| .location-grid { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .story-quote { | |
| font-size: 1.2rem; | |
| padding: 0 1rem; | |
| } | |
| .products-grid, | |
| .testimonials-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .location-item { | |
| font-size: 1rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 0 15px; | |
| } | |
| .brand-name { | |
| font-size: 2.8rem; | |
| } | |
| .tagline { | |
| font-size: 1.2rem; | |
| } | |
| .hero-description p { | |
| font-size: 1rem; | |
| } | |
| .product-card, | |
| .testimonial-card { | |
| margin: 0 -10px; | |
| border-radius: 0; | |
| } | |
| .btn-primary, | |
| .btn-secondary, | |
| .btn-order { | |
| padding: 0.8rem 1.5rem; | |
| font-size: 1rem; | |
| } | |
| } |