/* ============================================================ BASE.CSS — Lafrizi Painting v2 Design tokens, reset, typography, layout utilities ============================================================ */ /* ---------------------------------------- GOOGLE FONTS Loaded via in each page — no @import needed here. ---------------------------------------- */ /* ---------------------------------------- DESIGN TOKENS ---------------------------------------- */ :root { /* Brand Colors — derived from Lafrizi Painting logo */ /* Deep chocolate brown (outer badge ring) */ --color-navy: #3B1F0D; --color-navy-dark: #27130A; --color-navy-light: #52280F; /* Rich amber gold (decorative lines & icon) */ --color-teal: #C4900A; --color-teal-light: #D4A520; --color-teal-ultra: #FAF0D7; /* Warm sienna (secondary accent) */ --color-orange: #A0540A; --color-orange-light: #B86515; --color-orange-ultra: #F5E8CE; /* Warm brown tertiary */ --color-green: #7A5A3A; --color-green-light: #8A6A4A; /* Neutrals */ --color-bg-light: #F9F3E8; --color-bg-section: #F2E8D0; --color-text: #1A0800; --color-text-muted: #7A5A3A; --color-border: #E0CBA8; --color-white: #FFFFFF; /* Social */ --color-whatsapp: #25D366; --color-facebook: #1877F2; --color-instagram: #E1306C; /* Gradients */ --gradient-teal: linear-gradient(135deg, #C4900A 0%, #D4A520 100%); --gradient-orange: linear-gradient(135deg, #A0540A 0%, #B86515 100%); --gradient-navy: linear-gradient(135deg, #3B1F0D 0%, #27130A 100%); --gradient-brand: linear-gradient(90deg, #27130A 0%, #C4900A 50%, #27130A 100%); --gradient-hero: linear-gradient(135deg, rgba(39,19,10,0.90) 0%, rgba(59,31,13,0.78) 60%, rgba(196,144,10,0.35) 100%); /* Typography */ --font-heading: 'Poppins', Arial, sans-serif; --font-body: 'Inter', Arial, sans-serif; /* Spacing */ --section-padding: 5rem 0; --section-padding-sm: 3rem 0; --container-max: 1200px; --container-pad: 0 1.5rem; /* Components */ --radius-card: 14px; --radius-btn: 8px; --radius-pill: 50px; --shadow-card: 0 4px 24px rgba(59, 31, 13, 0.10); --shadow-hover: 0 12px 40px rgba(59, 31, 13, 0.20); --shadow-nav: 0 2px 20px rgba(59, 31, 13, 0.12); /* Transitions */ --transition-fast: 0.18s ease; --transition-normal: 0.3s ease; --transition-slow: 0.55s ease; /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.5); --glass-blur: blur(14px); /* Z-index layers */ --z-float: 100; --z-navbar: 200; --z-overlay: 300; --z-splash: 400; --z-loader: 500; } /* ---------------------------------------- RESET & BASE ---------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); color: var(--color-text); background: var(--color-white); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; font-family: var(--font-body); border: none; background: none; } input, textarea, select { font-family: var(--font-body); font-size: 1rem; } /* ---------------------------------------- TYPOGRAPHY ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.25; color: var(--color-navy); } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); } h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); } h4 { font-size: 1.2rem; } p { color: var(--color-text-muted); line-height: 1.75; } /* ---------------------------------------- LAYOUT UTILITIES ---------------------------------------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: var(--container-pad); } .section { padding: var(--section-padding); } .section--alt { background: var(--color-bg-light); } .section--dark { background: var(--gradient-navy); color: var(--color-white); } .section-header { text-align: center; margin-bottom: 3.5rem; } .section-header h2 { margin-bottom: 0.75rem; } .section-header p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; } /* Section heading accent underline */ .section-header h2::after { content: ''; display: block; width: 60px; height: 4px; background: var(--gradient-brand); border-radius: 2px; margin: 0.75rem auto 0; } /* ---------------------------------------- BUTTONS ---------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.8rem; border-radius: var(--radius-btn); font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast); cursor: pointer; border: none; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--gradient-teal); color: var(--color-white); box-shadow: 0 4px 16px rgba(14, 142, 142, 0.3); } .btn-primary:hover { box-shadow: 0 8px 28px rgba(14, 142, 142, 0.45); } .btn-secondary { background: var(--gradient-orange); color: var(--color-white); box-shadow: 0 4px 16px rgba(232, 118, 26, 0.3); } .btn-secondary:hover { box-shadow: 0 8px 28px rgba(232, 118, 26, 0.45); } .btn-outline { background: transparent; color: var(--color-white); border: 2px solid rgba(255, 255, 255, 0.6); } .btn-outline:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--color-white); } .btn-navy { background: var(--gradient-navy); color: var(--color-white); box-shadow: 0 4px 16px rgba(27, 46, 107, 0.25); } .btn-lg { padding: 1rem 2.2rem; font-size: 1.05rem; } /* ---------------------------------------- SCROLL PROGRESS BAR ---------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--gradient-brand); z-index: var(--z-loader); transition: width 0.1s linear; border-radius: 0 2px 2px 0; } /* ---------------------------------------- ANIMATIONS ---------------------------------------- */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } .fade-in-left.visible { opacity: 1; transform: translateY(0); } .fade-in-right { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } .fade-in-right.visible { opacity: 1; transform: translateY(0); } /* Staggered delays for grid children */ .stagger-1 { transition-delay: 0.1s; } .stagger-2 { transition-delay: 0.2s; } .stagger-3 { transition-delay: 0.3s; } .stagger-4 { transition-delay: 0.4s; } /* ---------------------------------------- LOADING OVERLAY ---------------------------------------- */ .loading-overlay { position: fixed; inset: 0; background: var(--color-white); z-index: var(--z-loader); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-normal); } .loading-overlay.active { opacity: 1; pointer-events: all; } /* ---- Brush paint loader ---- */ .brush-loader { display: flex; flex-direction: column; align-items: center; gap: 14px; } .brush-loader-svg { width: 52px; height: 52px; fill: #e8670a; animation: brush-swing 0.65s ease-in-out infinite alternate; transform-origin: 82% 82%; filter: drop-shadow(0 4px 10px rgba(232, 103, 10, 0.35)); } @keyframes brush-swing { from { transform: rotate(-22deg) translate(-5px, -2px); } to { transform: rotate(8deg) translate(5px, 2px); } } .brush-loader-track { width: 100px; height: 4px; background: rgba(232, 103, 10, 0.12); border-radius: 2px; overflow: hidden; } .brush-loader-bar { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #e8670a, #ff9f45); animation: brush-stroke 0.65s ease-in-out infinite alternate; } @keyframes brush-stroke { from { width: 15%; margin-inline-start: 0; } to { width: 65%; margin-inline-start: 35%; } } /* ---- Custom SVG icon utility ---- */ .kp-icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; vertical-align: -0.125em; overflow: visible; } /* ---------------------------------------- RESPONSIVE BREAKPOINTS ---------------------------------------- */ @media (max-width: 1024px) { :root { --section-padding: 4rem 0; --container-pad: 0 1.25rem; } } @media (max-width: 768px) { :root { --section-padding: 3rem 0; --container-pad: 0 1rem; } .section-header { margin-bottom: 2.5rem; } } @media (max-width: 480px) { :root { --section-padding: 2.5rem 0; } }