/** * VALASTRO DESIGN SYSTEM * Design moderno, minimalista e di classe per ristorante fine dining * Versione: 2.0.0 (Light Theme - Menu Inspired) * Data: 21 Dicembre 2025 */ /* ============================================================================= RESET & BASE ============================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--color-bg-main); color: var(--color-text-main); overflow-x: hidden; line-height: 1.6; } /* ============================================================================= TYPOGRAPHY ============================================================================= */ /* Font Imports - Da includere nel */ /* */ @font-face { font-family: 'Lovelo Black'; src: url('../fonts/LoveloBlack.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } :root { /* Font Families */ --font-serif: 'Lovelo Black', Georgia, serif; /* Usato per Titoli */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Usato per Testo */ --font-display: 'Lovelo Black', sans-serif; --font-body: 'Inter', sans-serif; /* Font Sizes - Mobile First con clamp() */ --fs-h1: clamp(4rem, 12vw, 8rem); --fs-h2: clamp(2.5rem, 5vw, 4rem); --fs-h3: clamp(1.5rem, 3vw, 1.8rem); --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-body-sm: 0.875rem; --fs-caption: 0.75rem; /* Font Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* Line Heights */ --lh-tight: 1.2; --lh-base: 1.6; --lh-relaxed: 1.8; } /* Heading Styles */ h1, h2, h3 { font-family: var(--font-serif); font-weight: var(--fw-regular); color: var(--color-valastro-blue); } h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.02em; } h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); } h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); } /* Body Text */ p { font-size: var(--fs-body-lg); font-weight: var(--fw-light); line-height: var(--lh-relaxed); } /* Small Text */ small { font-size: var(--fs-body-sm); } /* ============================================================================= COLOR SYSTEM ============================================================================= */ :root { /* Brand Colors - Valastro Identity */ --color-valastro-blue: #0E2841; /* Deep Navy Blue */ --color-valastro-gold: #C5A059; /* Muted Gold */ --color-valastro-gold-light: #E5C575; /* Semantic Colors */ --color-primary: var(--color-valastro-blue); --color-accent: var(--color-valastro-gold); /* Base Colors */ --color-black: #0a0a0a; --color-white: #ffffff; /* Backgrounds & Text */ --color-bg-main: #FFFFFF; --color-bg-alt: #F8F8F8; --color-bg-card: #FFFFFF; --color-text-main: #2D2D2D; --color-text-muted: #666666; --color-text-light: #888888; /* Grays - Light Theme Optimized */ --color-gray-900: #1a1a1a; --color-gray-800: #2d2d2d; --color-gray-700: #404040; --color-gray-600: #666666; --color-gray-500: #808080; --color-gray-400: #999999; --color-gray-300: #b3b3b3; --color-gray-200: #e0e0e0; --color-gray-100: #f5f5f5; --color-gray-50: #fafafa; /* Border Colors */ --color-border: rgba(0, 0, 0, 0.1); --color-border-hover: rgba(0, 0, 0, 0.2); /* Opacity Variants (Adapted for Light Theme usage) */ --color-white-90: rgba(255, 255, 255, 0.9); --color-white-80: rgba(255, 255, 255, 0.8); --color-white-70: rgba(255, 255, 255, 0.7); --color-white-60: rgba(255, 255, 255, 0.6); --color-white-50: rgba(255, 255, 255, 0.5); --color-white-40: rgba(255, 255, 255, 0.4); --color-white-30: rgba(255, 255, 255, 0.3); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-15: rgba(255, 255, 255, 0.15); --color-white-10: rgba(255, 255, 255, 0.1); --color-black-90: rgba(0, 0, 0, 0.9); --color-black-80: rgba(0, 0, 0, 0.8); --color-black-70: rgba(0, 0, 0, 0.7); --color-black-60: rgba(0, 0, 0, 0.6); --color-black-50: rgba(0, 0, 0, 0.5); --color-black-40: rgba(0, 0, 0, 0.4); --color-black-30: rgba(0, 0, 0, 0.3); --color-black-20: rgba(0, 0, 0, 0.2); --color-black-10: rgba(0, 0, 0, 0.1); --color-black-05: rgba(0, 0, 0, 0.05); } /* ============================================================================= SPACING SYSTEM ============================================================================= */ :root { /* Spacing Scale */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 8rem; /* 128px */ --space-5xl: 10rem; /* 160px */ /* Section Padding */ --section-padding: var(--space-5xl) var(--space-lg); --section-padding-mobile: var(--space-3xl) var(--space-md); } /* ============================================================================= LAYOUT CONTAINERS ============================================================================= */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); } .container-sm { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 var(--space-lg); } .container-xs { width: 100%; max-width: 700px; margin: 0 auto; padding: 0 var(--space-lg); } /* Section Base */ section { padding: var(--section-padding); } @media (max-width: 768px) { section { padding: var(--section-padding-mobile); } } /* ============================================================================= BUTTONS ============================================================================= */ .btn { display: inline-block; padding: 1rem 2.5rem; font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; border: 1px solid; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-align: center; } /* Button Variants */ .btn-primary { background: var(--color-valastro-blue); color: var(--color-white); border-color: var(--color-valastro-blue); } .btn-primary:hover { background: transparent; color: var(--color-valastro-blue); } .btn-secondary { background: transparent; color: var(--color-valastro-blue); border-color: var(--color-valastro-blue); } .btn-secondary:hover { border-color: var(--color-valastro-blue); background: var(--color-black-05); color: var(--color-valastro-blue); } .btn-danger { background: #8B0000; color: var(--color-white); border-color: #8B0000; } .btn-danger:hover { background: #A00000; border-color: #A00000; } .btn-outline { background: transparent; color: var(--color-valastro-blue); border-color: var(--color-black-60); } .btn-outline:hover { background: var(--color-valastro-blue); color: var(--color-white); border-color: var(--color-valastro-blue); } /* Button Sizes */ .btn-sm { padding: 0.75rem 1.5rem; font-size: var(--fs-caption); } .btn-lg { padding: 1.25rem 3rem; font-size: var(--fs-body); } /* ============================================================================= CARDS ============================================================================= */ .card { background: var(--color-bg-card); border: 1px solid var(--color-border); transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .card:hover { border-color: var(--color-valastro-gold); transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0,0,0,0.1); } .card-padding { padding: var(--space-xl) var(--space-lg); } /* Card with Icon */ .card-icon { width: clamp(56px, 10vw, 72px); height: clamp(56px, 10vw, 72px); color: var(--color-valastro-blue); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: var(--space-lg); } .card-icon svg { width: clamp(32px, 6vw, 40px); height: clamp(32px, 6vw, 40px); padding: 5px; } /* ============================================================================= GRIDS ============================================================================= */ .grid { display: grid; gap: var(--space-lg); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* Auto-fit responsive grids */ .grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Grid Gaps */ .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .gap-xl { gap: var(--space-xl); } .gap-2xl { gap: var(--space-2xl); } .gap-3xl { gap: var(--space-3xl); } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ============================================================================= VIDEO BACKGROUNDS ============================================================================= */ .video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -2; } .video-background video { width: 100%; height: 100%; object-fit: cover; } .video-overlay { position: absolute; inset: 0; background: var(--color-black-50); z-index: -1; } .video-overlay-dark { background: var(--color-black-70); } .video-overlay-light { background: var(--color-black-30); } /* ============================================================================= HERO SECTIONS ============================================================================= */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-content { position: relative; z-index: 2; text-align: center; padding: var(--space-lg); max-width: 900px; } /* Scroll Down Indicator */ .scroll-down { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); z-index: 2; writing-mode: vertical-rl; font-size: var(--fs-caption); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; cursor: pointer; transition: opacity 0.3s; } .scroll-down:hover { opacity: 1; } .scroll-down::after { content: ''; display: block; width: 1px; height: 50px; background: currentColor; margin: 1rem auto 0; animation: scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0%, 100% { height: 50px; opacity: 1; } 50% { height: 30px; opacity: 0.5; } } /* ============================================================================= BORDERS & DIVIDERS ============================================================================= */ .border-top { border-top: 1px solid var(--color-border); } .border-bottom { border-bottom: 1px solid var(--color-border); } .border-all { border: 1px solid var(--color-border); } .divider { height: 1px; background: var(--color-border); margin: var(--space-xl) 0; } /* ============================================================================= TEXT UTILITIES ============================================================================= */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } .text-light { font-weight: var(--fw-light); } .text-regular { font-weight: var(--fw-regular); } .text-medium { font-weight: var(--fw-medium); } .text-semibold { font-weight: var(--fw-semibold); } .text-muted { color: var(--color-text-muted); } .text-muted-more { color: var(--color-text-light); } .text-gold { color: var(--color-valastro-gold); } .text-blue { color: var(--color-valastro-blue); } .letter-spacing-sm { letter-spacing: 0.05em; } .letter-spacing-md { letter-spacing: 0.1em; } .letter-spacing-lg { letter-spacing: 0.2em; } .letter-spacing-xl { letter-spacing: 0.3em; } /* ============================================================================= SPACING UTILITIES ============================================================================= */ /* Margins */ .m-0 { margin: 0; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); } .mt-3xl { margin-top: var(--space-3xl); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .mb-2xl { margin-bottom: var(--space-2xl); } .mb-3xl { margin-bottom: var(--space-3xl); } /* Paddings */ .p-0 { padding: 0; } .pt-sm { padding-top: var(--space-sm); } .pt-md { padding-top: var(--space-md); } .pt-lg { padding-top: var(--space-lg); } .pt-xl { padding-top: var(--space-xl); } .pb-sm { padding-bottom: var(--space-sm); } .pb-md { padding-bottom: var(--space-md); } .pb-lg { padding-bottom: var(--space-lg); } .pb-xl { padding-bottom: var(--space-xl); } /* ============================================================================= ANIMATIONS ============================================================================= */ @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Animation Classes */ .animate-fadeIn { animation: fadeIn 1s ease-out; } .animate-fadeInUp { animation: fadeInUp 0.8s ease-out; } .animate-slideInLeft { animation: slideInLeft 0.8s ease-out; } .animate-slideInRight { animation: slideInRight 0.8s ease-out; } .animate-scaleIn { animation: scaleIn 0.6s ease-out; } /* Scroll Reveal Animation */ .scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .scroll-reveal.revealed { opacity: 1; transform: translateY(0); } .scroll-reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .scroll-reveal-left.revealed { opacity: 1; transform: translateX(0); } .scroll-reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .scroll-reveal-right.revealed { opacity: 1; transform: translateX(0); } .scroll-reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .scroll-reveal-scale.revealed { opacity: 1; transform: scale(1); } /* Stagger delays for multiple elements */ .scroll-reveal.delay-1 { transition-delay: 0.1s; } .scroll-reveal.delay-2 { transition-delay: 0.2s; } .scroll-reveal.delay-3 { transition-delay: 0.3s; } .scroll-reveal.delay-4 { transition-delay: 0.4s; } .scroll-reveal.delay-5 { transition-delay: 0.5s; } .scroll-reveal.delay-6 { transition-delay: 0.6s; } /* ============================================================================= FOOTER ============================================================================= */ .footer { padding: 4rem 2rem; background: var(--color-valastro-blue); color: var(--color-white); border-top: 4px solid var(--color-valastro-gold); } .footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; } .footer-section h4 { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.5rem; opacity: 0.8; color: var(--color-valastro-gold); } .footer-section p, .footer-section a { font-size: var(--fs-body); font-weight: var(--fw-light); color: var(--color-white-80); text-decoration: none; display: block; margin-bottom: 0.5rem; transition: color 0.3s; } .footer-section a:hover { color: var(--color-valastro-gold); } .footer-brand h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-white); margin: 0; } .footer-payments { max-width: 1200px; margin: 2rem auto 0; padding-top: 2rem; border-top: 1px solid var(--color-white-10); text-align: center; } .footer-payments p { font-size: var(--fs-body-sm); color: var(--color-white-60); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; } .payment-icons { display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .payment-icon { font-size: 0.85rem; color: var(--color-white-80); padding: 0.5rem 0.75rem; background: var(--color-white-10); border-radius: 4px; border: 1px solid var(--color-white-10); } .footer-bottom { max-width: 1200px; margin: 2rem auto 0; padding-top: 2rem; border-top: 1px solid var(--color-white-10); text-align: center; font-size: var(--fs-body-sm); color: var(--color-white-50); } .footer-bottom p { text-align: center; } .footer-links { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; text-align: center; } .footer-links a { color: var(--color-white-60); text-decoration: none; transition: color 0.3s ease; } .footer-links a:hover { color: var(--color-valastro-gold); } @media (max-width: 768px) { .footer-container { grid-template-columns: 1fr; gap: 2rem; } } /* ============================================================================= RESPONSIVE BREAKPOINTS ============================================================================= */ /* Mobile First Approach - Mobile: < 768px (default) - Tablet: 768px - 1024px - Desktop: > 1024px - Large Desktop: > 1400px */ /* Hero buttons responsive wrapper */ .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } @media (max-width: 768px) { :root { --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; } /* Containers mobile */ .container, .container-sm, .container-xs { padding: 0 var(--space-md); } /* Hero section mobile */ .hero { min-height: 90vh; } .hero-content { padding: var(--space-md); } .hero-content h1 { font-size: clamp(2.5rem, 10vw, 4rem); } .hero-buttons { flex-direction: column; align-items: center; width: 100%; } .btn { width: 100%; max-width: 300px; } .scroll-down { bottom: 2rem; font-size: 0.7rem; } /* Grid responsive */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--space-lg); } /* Card spacing mobile */ .card-padding { padding: var(--space-lg); } /* Footer mobile */ .footer { padding: 3rem 1.5rem; } .footer-container { grid-template-columns: 1fr; gap: 2rem; } .footer-section { text-align: center; } .footer-links { flex-direction: column; gap: 0.75rem; } } @media (max-width: 480px) { :root { --space-3xl: 3rem; --space-4xl: 4rem; --space-5xl: 6rem; } /* Typography mobile small */ .hero-content h1 { font-size: clamp(2rem, 10vw, 3rem); } /* Buttons mobile small */ .btn { padding: 0.875rem 2rem; font-size: 0.8rem; } .btn-sm { padding: 0.625rem 1.25rem; font-size: 0.7rem; } /* Card icon mobile */ .card-icon { width: 48px; height: 48px; } .card-icon svg { width: 28px; height: 28px; } } @media (min-width: 769px) and (max-width: 1024px) { .container { max-width: 900px; } .grid-4 { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================= ACCESSIBILITY ============================================================================= */ /* Focus States */ a:focus, button:focus, .btn:focus { outline: 2px solid var(--color-white); outline-offset: 2px; } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================= PRINT STYLES ============================================================================= */ @media print { body { background: white; color: black; } .video-background, .btn, .scroll-down { display: none; } }