Preview de mixed.css
/* MIXED CSS PACK */
/* Template: lixxie.com.pe/index.php */
/* Template mtime: 2025-12-30 14:39:10 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--accent: <?= h($ACCENT) ?>;
--accent-light: rgba(203, 159, 68, 0.12);
--accent-dark: #a87c2a;
--text: #111111;
--text-muted: #5b5b5b;
--light-bg: #faf9f7;
--border: rgba(0,0,0,0.08);
--shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
--shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.12);
--transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
--radius: 20px;
--radius-large: 30px;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background-color: var(--light-bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
}
h1, .display-1, .display-2, .display-3 {
font-family: 'Playfair Display', serif;
}
.section-padding {
padding: 120px 0;
}
@media (max-width: 991.98px) {
.section-padding {
padding: 80px 0;
}
}
@media (max-width: 767.98px) {
.section-padding {
padding: 60px 0;
}
}
/* Navbar */
.navbar-main {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 20px 0;
transition: var(--transition);
}
.navbar-main.scrolled {
padding: 12px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.navbar-brand {
font-family: 'Playfair Display', serif;
font-size: 28px;
font-weight: 700;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
}
.navbar-brand span {
background: var(--accent);
color: #111;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
}
.nav-link {
font-weight: 600;
color: var(--text) !important;
padding: 10px 16px !important;
border-radius: 10px;
transition: var(--transition);
position: relative;
}
.nav-link:hover, .nav-link.active {
color: var(--accent) !important;
background-color: var(--accent-light);
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: var(--accent);
bottom: 0;
left: 16px;
border-radius: 2px;
transition: var(--transition);
}
.nav-link:hover::after, .nav-link.active::after {
width: calc(100% - 32px);
}
/* Buttons */
.btn-accent {
background: var(--accent);
border: 2px solid var(--accent);
color: #111;
font-weight: 700;
padding: 14px 28px;
border-radius: 12px;
transition: var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
letter-spacing: 0.3px;
}
.btn-accent:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
color: #111;
}
.btn-outline-accent {
background: transparent;
border: 2px solid var(--accent);
color: var(--accent);
font-weight: 700;
padding: 14px 28px;
border-radius: 12px;
transition: var(--transition);
}
.btn-outline-accent:hover {
background: var(--accent);
border-color: var(--accent);
color: #111;
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
/* Hero Section */
.hero-section {
padding-top: 160px;
padding-bottom: 120px;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(203, 159, 68, 0.08) 0%, rgba(203, 159, 68, 0) 70%);
top: -200px;
right: -200px;
z-index: 0;
border-radius: 50%;
}
.hero-content {
position: relative;
z-index: 2;
}
.eyebrow {
display: inline-block;
padding: 10px 20px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--border);
color: var(--text);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}
.hero-title {
font-size: 4rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 30px;
background: linear-gradient(135deg, #111 0%, #333 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@media (max-width: 991.98px) {
.hero-title {
font-size: 3rem;
}
}
@media (max-width: 767.98px) {
.hero-title {
font-size: 2.5rem;
}
}
.hero-card {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-large);
padding: 40px;
backdrop-filter: blur(20px);
box-shadow: var(--shadow);
transition: var(--transition);
}
.hero-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.feature-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
font-weight: 500;
}
.feature-list li i {
color: var(--accent);
font-size: 18px;
}
.hero-image-container {
position: relative;
border-radius: var(--radius-large);
overflow: hidden;
box-shadow: var(--shadow);
transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
transition: var(--transition);
}
.hero-image-container:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.hero-image {
width: 100%;
height: 600px;
object-fit: cover;
object-position: center;
}
/* Cards */
.card-elegant {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: var(--transition);
height: 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.card-elegant:hover {
transform: translateY(-15px);
box-shadow: var(--shadow-hover);
border-color: rgba(203, 159, 68, 0.3);
}
.product-image-wrapper {
aspect-ratio: 1 / 1;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
overflow: hidden;
position: relative;
}
.product-image {
width: 100%;
height: 100%;
object-fit: contain;
transition: var(--transition);
}
.card-elegant:hover .product-image {
transform: scale(1.05);
}
.product-price {
font-size: 1.5rem;
font-weight: 800;
color: var(--text);
}
.product-category {
display: inline-block;
background: var(--accent-light);
color: var(--accent-dark);
padding: 6px 14px;
border-radius: 100px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
border: 1px solid rgba(203, 159, 68, 0.2);
}
/* Section Headers */
.section-header {
text-align: center;
margin-bottom: 70px;
}
.section-title {
font-size: 3rem;
margin-bottom: 20px;
background: linear-gradient(135deg, #111 0%, #333 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@media (max-width: 767.98px) {
.section-title {
font-size: 2.5rem;
}
}
.section-subtitle {
font-size: 1.2rem;
color: var(--text-muted);
max-width: 700px;
margin: 0 auto;
}
/* Service Cards */
.service-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px 30px;
height: 100%;
transition: var(--transition);
text-align: center;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow);
border-color: var(--accent);
}
.service-card i {
font-size: 3rem;
color: var(--accent);
margin-bottom: 25px;
display: block;
}
/* Why Choose Us */
.feature-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 30px;
height: 100%;
transition: var(--transition);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow);
}
.feature-card i {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 20px;
display: block;
}
/* Gallery */
.gallery-section {
background: #fff;
border-radius: var(--radius-large);
overflow: hidden;
padding: 80px 0;
margin: 60px 0;
box-shadow: var(--shadow);
}
.gallery-carousel {
max-width: 1000px;
margin: 0 auto;
}
.gallery-frame {
height: 500px;
border-radius: var(--radius);
overflow: hidden;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.gallery-img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
transition: transform 0.5s ease;
}
.carousel-control-prev, .carousel-control-next {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 1;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.carousel-control-prev:hover, .carousel-control-next:hover {
background: var(--accent);
}
.carousel-control-prev {
left: 20px;
}
.carousel-control-next {
right: 20px;
}
/* FAQ */
.faq-accordion .accordion-item {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius) !important;
overflow: hidden;
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}
.faq-accordion .accordion-button {
background: #fff;
color: var(--text);
font-weight: 700;
font-size: 1.1rem;
padding: 25px 30px;
border: none;
box-shadow: none;
}
.faq-accordion .accordion-button:not(.collapsed) {
background: var(--accent-light);
color: var(--text);
border-bottom: 1px solid var(--border);
}
.faq-accordion .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: scale(1.2);
}
.faq-accordion .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.faq-accordion .accordion-body {
padding: 25px 30px;
color: var(--text-muted);
font-size: 1.05rem;
}
/* Contact Form */
.contact-form .form-control {
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px 20px;
font-size: 1rem;
transition: var(--transition);
}
.contact-form .form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(203, 159, 68, 0.2);
}
.contact-form label {
font-weight: 600;
margin-bottom: 10px;
color: var(--text);
}
/* Footer */
.footer-main {
background: #111;
color: #fff;
padding: 100px 0 40px;
}
.footer-main a {
color: #fff;
text-decoration: none;
transition: var(--transition);
opacity: 0.8;
}
.footer-main a:hover {
color: var(--accent);
opacity: 1;
}
.footer-logo {
font-family: 'Playfair Display', serif;
font-size: 32px;
font-weight: 700;
color: #fff;
margin-bottom: 25px;
display: block;
}
.footer-heading {
color: #fff;
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
}
.footer-heading::after {
content: '';
position: absolute;
width: 40px;
height: 3px;
background: var(--accent);
bottom: 0;
left: 0;
border-radius: 2px;
}
.footer-links li {
margin-bottom: 15px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
margin-top: 60px;
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 0.95rem;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* WhatsApp Float */
.whatsapp-float {
position: fixed;
width: 70px;
height: 70px;
bottom: 30px;
right: 30px;
background-color: #25d366;
color: #FFF;
border-radius: 50%;
text-align: center;
font-size: 30px;
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
animation: pulse 2s infinite;
}
.whatsapp-float:hover {
background-color: #128c7e;
transform: scale(1.1);
box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4);
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
/* Loading Spinner for Products */
.loading-spinner {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid rgba(203, 159, 68, 0.3);
border-radius: 50%;
border-top-color: var(--accent);
animation: spin 1s ease-in-out infinite;
margin: 50px auto;
display: block;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Divider */
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
margin: 80px auto;
max-width: 1200px;
}
/* Responsive Adjustments */
@media (max-width: 991.98px) {
.hero-section {
padding-top: 120px;
padding-bottom: 80px;
}
.hero-image-container {
transform: none;
margin-top: 50px;
}
.section-title {
font-size: 2.5rem;
}
}
@media (max-width: 767.98px) {
.hero-title {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.hero-card, .card-elegant, .service-card, .feature-card {
padding: 25px;
}
.whatsapp-float {
width: 60px;
height: 60px;
bottom: 20px;
right: 20px;
font-size: 25px;
}
}