/* CSS RESET & NORMALIZE */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd { margin: 0; padding: 0; font-weight: normal; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
body { min-height: 100vh; background: #F9F6F2; color: #3A3227; font-family: 'Lato', Arial, sans-serif; line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; }
/* FONT FACE: Google Fonts (assume already loaded in ) */
:root {
--color-primary: #3A3227;
--color-secondary: #B47D46;
--color-accent: #F9F6F2;
--color-bg: #F9F6F2;
--color-bg-card: #fff6eb;
--color-shadow: rgba(186, 163, 128, 0.12);
--color-shadow-strong: rgba(186, 163, 128, 0.22);
--color-dark: #2D251B;
--color-focus: #EAC296;
--border-radius: 16px;
--border-radius-small: 8px;
--shadow: 0 3px 12px var(--color-shadow);
--shadow-strong: 0 8px 32px var(--color-shadow-strong);
--font-sans: 'Lato', Arial, sans-serif;
--font-display: 'Merriweather', Georgia, serif;
}
/* BASE TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--color-primary);
font-weight: 700;
letter-spacing: 0.01em;
}
h1 { font-size: 2.5rem; line-height: 1.15; margin-bottom: 20px; }
h2 { font-size: 2rem; line-height: 1.2; margin-bottom: 18px; }
h3 { font-size: 1.5rem; line-height: 1.25; margin-bottom: 14px; }
h4 { font-size: 1.25rem; line-height: 1.33; margin-bottom: 10px; }
p, ul, ol, li, dl, dd, dt, blockquote, cite { font-family: var(--font-sans); font-size: 1rem; color: var(--color-primary); }
p { margin-bottom: 16px; }
b, strong { font-weight: bold; }
blockquote { font-style: italic; color: var(--color-dark); opacity: 0.93; margin: 8px 0 4px 0; }
cite { display: block; font-size: 0.97em; margin-top: 8px; color: var(--color-secondary); font-style: normal; letter-spacing: 0.02em; }
/* CONTAINER */
.container {
width: 100%;
max-width: 1150px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
.content-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.section {
margin-bottom: 60px;
padding: 40px 20px;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
margin-bottom: 20px;
position: relative;
background: var(--color-bg-card);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 32px;
transition: box-shadow 0.26s, transform 0.18s;
}
.card:hover, .card:focus-within {
box-shadow: var(--shadow-strong);
transform: translateY(-4px) scale(1.015);
}
.content-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
.text-image-section {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
.testimonial-card {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: #fff;
border-radius: var(--border-radius-small);
box-shadow: var(--shadow);
margin-bottom: 20px;
max-width: 700px;
}
.feature-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
background: var(--color-bg-card);
border-radius: var(--border-radius-small);
box-shadow: var(--shadow);
padding: 28px 22px;
flex: 1 1 250px;
min-width: 220px;
transition: box-shadow 0.22s, transform 0.16s;
}
.feature-item:hover, .feature-item:focus-within {
box-shadow: var(--shadow-strong);
transform: translateY(-4px) scale(1.015);
}
.feature-item img {
width: 44px;
height: 44px;
object-fit: contain;
}
/* HEADER & NAVIGATION */
header {
background: #fff;
border-bottom: 2px solid #f1e6d3;
box-shadow: 0 2px 10px 0 rgba(186, 163, 128, 0.065);
position: relative;
z-index: 100;
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
padding-bottom: 16px;
}
.logo img { height: 48px; width: auto; border-radius: var(--border-radius-small); }
.main-nav {
display: flex;
gap: 28px;
align-items: center;
}
.main-nav a {
color: var(--color-primary);
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 500;
padding: 6px 0;
border-radius: 6px;
transition: background 0.2s, color 0.2s;
position: relative;
}
.main-nav a:hover, .main-nav a:focus {
background: var(--color-focus);
color: var(--color-secondary);
outline: none;
}
.btn-primary, .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-small);
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: 0.04em;
padding: 11px 30px;
font-size: 1rem;
transition: background 0.22s, box-shadow 0.15s, color 0.18s, transform 0.13s;
cursor: pointer;
margin-left: 16px;
text-align: center;
box-shadow: var(--shadow);
}
.btn-primary {
background: var(--color-secondary);
color: #fff;
border: none;
}
.btn-primary:hover, .btn-primary:focus {
background: #A36927; color: #fff; box-shadow: var(--shadow-strong);
}
.btn-secondary {
background: #fff;
color: var(--color-secondary);
border: 2px solid var(--color-secondary);
}
.btn-secondary:hover, .btn-secondary:focus {
background: var(--color-secondary);
color: #fff;
box-shadow: var(--shadow-strong);
}
/* MOBILE NAVIGATION */
.mobile-menu-toggle {
display: none;
background: var(--color-secondary);
color: #fff;
width: 46px;
height: 46px;
border-radius: 50%;
font-size: 2rem;
align-items: center;
justify-content: center;
z-index: 201;
position: absolute;
top: 22px;
right: 16px;
border: none;
box-shadow: var(--shadow);
transition: background .2s;
}
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus { background: #A36927; outline: 2px solid var(--color-focus); }
.mobile-menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100vw;
background: #fff;
transform: translateX(100%);
transition: transform 0.33s cubic-bezier(.65,.05,.36,1);
box-shadow: -2px 0 22px 0 rgba(186, 163, 128, 0.15);
z-index: 3001;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 34px 36px 36px 32px;
overflow-y: auto;
}
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-close {
align-self: flex-end;
background: var(--color-bg-card);
color: var(--color-primary);
border: none;
padding: 10px 16px;
font-size: 2rem;
border-radius: var(--border-radius-small);
margin-bottom: 12px;
cursor: pointer;
box-shadow: var(--shadow);
transition: background .18s, color .15s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus { background: var(--color-focus); color: var(--color-secondary); outline: 2px solid var(--color-focus); }
.mobile-nav { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-top: 14px; }
.mobile-nav a {
padding: 14px 0 13px 8px;
color: var(--color-primary);
font-size: 1.13rem;
border-radius: var(--border-radius-small);
transition: background 0.17s, color 0.19s;
}
.mobile-nav a:hover, .mobile-nav a:focus { background: var(--color-focus); color: var(--color-secondary); outline: none; }
.header .btn-primary { margin-left: 0; }
@media (max-width: 900px) {
.main-nav { gap: 16px; }
}
@media (max-width: 768px) {
.main-nav {
display: none;
}
.btn-primary { display: none; }
.mobile-menu-toggle { display: flex; }
}
/* HERO / INTRO SECTIONS */
.hero-section {
background: linear-gradient(110deg, #fff6eb 70%, #f6e0c8 100%);
min-height: 340px;
display: flex;
align-items: center;
padding: 40px 0 36px 0;
}
.hero-section .content-wrapper {
align-items: flex-start;
gap: 20px;
}
.hero-section h1 { font-size: 2.2rem; margin-bottom: 8px; }
.hero-section p { font-size: 1.13rem; margin-bottom: 12px; }
.hero-section .btn-primary { margin-top: 14px; }
/* FEATURES GRID */
.features-section h2 { text-align: center; }
.features-section .feature-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 32px;
}
/* SERVICES PREVIEW & CATALOG PREVIEW */
.services-preview, .catalog-preview {
background: var(--color-bg-card);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
margin-bottom: 45px;
padding: 38px 20px;
}
.services-preview h2, .catalog-preview h2 { margin-bottom: 10px; }
.services-preview ul, .catalog-preview ul {
margin-bottom: 20px;
padding-left: 24px;
color: var(--color-dark);
}
.services-preview ul li, .catalog-preview ul li { margin-bottom: 8px; list-style: disc; }
/* TESTIMONIALS */
.testimonials-section {
background: #fff;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 38px 18px 44px 18px;
}
.testimonials-section h2 { text-align: left; margin-bottom: 18px; }
.testimonials-section .content-wrapper {
display: flex;
flex-direction: column;
gap: 26px;
}
.testimonial-card {
background: #fff;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 24px 28px;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 260px;
font-size: 1.09rem;
color: var(--color-primary);
margin-bottom: 16px;
transition: box-shadow .18s, transform .14s;
}
.testimonial-card:hover {
box-shadow: var(--shadow-strong);
transform: translateY(-3px) scale(1.01);
}
.testimonial-card blockquote { color: var(--color-dark); opacity: 0.96; font-size: 1.05em; margin-bottom: 6px; }
.testimonial-card cite { color: var(--color-secondary); font-style: normal; }
/* TEXT IMAGE SECTIONS */
.text-section, .brand-details {
background: #fff;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 38px 18px 44px 18px;
margin-bottom: 48px;
}
.text-section h1, .text-section h2 { margin-bottom: 16px; }
.text-section ul {
margin-left: 20px;
margin-bottom: 12px;
}
.text-section ul li { list-style: disc; margin-bottom: 7px; }
.text-section a { color: var(--color-secondary); text-decoration: underline dotted; transition: text-decoration-color .15s; }
.text-section a:hover, .text-section a:focus { color: #A36927; text-decoration: underline solid; }
/* SPECIAL CARD & GRID LAYOUTS */
.product-list-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 28px;
margin-bottom: 36px;
}
.product-item {
flex: 1 1 220px;
min-width: 200px;
background: var(--color-bg-card);
border-radius: var(--border-radius-small);
box-shadow: var(--shadow);
padding: 22px 16px;
margin-bottom: 20px;
transition: box-shadow 0.17s, transform .13s;
}
.product-item:hover, .product-item:focus-within {
box-shadow: var(--shadow-strong);
transform: translateY(-2px) scale(1.02);
}
.catalog-filters {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 20px;
}
.catalog-filters input, .catalog-filters select {
padding: 10px 12px;
border-radius: var(--border-radius-small);
border: 1px solid #dcc2a7;
font-size: 1rem;
font-family: var(--font-sans);
background: #fff;
box-shadow: 0 1.5px 4px rgba(186, 163, 128, .06);
transition: border 0.17s;
}
.catalog-filters input:focus, .catalog-filters select:focus {
border: 1.5px solid var(--color-secondary);
outline: none;
}
/* SERVICES PAGE */
.services-list .service-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 32px;
}
.service-item {
background: var(--color-bg-card);
border-radius: var(--border-radius-small);
box-shadow: var(--shadow);
flex: 1 1 250px;
min-width: 200px;
padding: 26px 18px 20px 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
transition: box-shadow 0.14s, transform 0.13s;
}
.service-item:hover, .service-item:focus-within { box-shadow: var(--shadow-strong); transform: translateY(-2px) scale(1.02); }
.service-item img { width: 38px; height: 38px; object-fit: contain; }
.service-price { font-size: 1.07rem; color: var(--color-secondary); font-weight: 700; margin-top: 4px; }
.service-cta { background: #fff6eb; border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 36px 18px 40px 18px; margin-bottom: 48px; text-align: center; }
.service-cta .btn-primary { margin-top: 14px; }
.faqs dl { width: 100%; max-width: 780px; margin: 0 auto; }
.faqs dt { font-family: var(--font-display); font-weight: 700; font-size: 1.13rem; color: var(--color-primary); margin-top: 30px; }
.faqs dd { margin-left: 0; padding: 10px 0 14px 0; color: var(--color-dark); }
/* CONTACT SECTION */
.contact-section .contact-details {
background: var(--color-bg-card);
border-radius: var(--border-radius-small);
padding: 18px 16px;
margin-bottom: 18px;
box-shadow: var(--shadow);
}
.map-placeholder {
background: #f6e0c8;
border-radius: var(--border-radius-small);
color: var(--color-dark);
font-weight: 700;
font-size: 1rem;
padding: 15px 0;
}
.cta-section { background: var(--color-bg-card); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 34px 18px 37px 18px; margin-bottom: 60px; text-align: center; }
.cta-section .btn-primary { margin-top: 14px; }
/* THANK YOU PAGE */
.notification-section .btn-primary { margin-top: 19px; }
/* FOOTER */
footer {
background: #fff;
border-top: 2px solid #f1e6d3;
margin-top: 60px;
}
.footer-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 0 14px 0;
border-bottom: 1px solid #edd0a3;
}
.footer-top img { width: 57px; height: 57px; }
.footer-nav {
display: flex;
gap: 20px;
}
.footer-nav a {
color: var(--color-secondary);
font-size: 0.96rem;
padding: 4px 0;
border-radius: 5px;
transition: background 0.14s, color 0.14s;
}
.footer-nav a:hover, .footer-nav a:focus { background: var(--color-focus); color: var(--color-primary); text-decoration: underline dotted; }
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
justify-content: space-between;
padding: 18px 0 28px 0;
font-size: 0.98rem;
}
.footer-bottom p, .footer-bottom a { color: var(--color-primary); }
.credit {
flex-basis: 100%;
font-size: 0.93rem;
color: #adadad;
margin-top: 6px;
}
/* COOKIE CONSENT BANNER */
.cookie-consent-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 4200;
background: #fff6eb;
border-top: 2px solid #edd0a3;
box-shadow: 0 -2px 24px rgba(186, 163, 128, 0.10);
padding: 24px 16px 18px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font-size: 1rem;
animation: fadeInUp .44s cubic-bezier(.68,.15,.44,1);
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(100px); }
to { opacity: 1; transform: translateY(0); }
}
.cookie-consent-banner .cookie-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.cookie-consent-banner button {
font-family: var(--font-sans);
font-weight: 700;
padding: 9px 22px;
border-radius: var(--border-radius-small);
border: none;
cursor: pointer;
box-shadow: var(--shadow);
transition: background .18s, color .14s;
}
.cookie-consent-banner .accept {
background: var(--color-secondary);
color: #fff;
}
.cookie-consent-banner .accept:hover, .cookie-consent-banner .accept:focus { background: #A36927; outline: 2px solid var(--color-focus); }
.cookie-consent-banner .reject {
background: #fff;
color: var(--color-secondary);
border: 2px solid var(--color-secondary);
}
.cookie-consent-banner .reject:hover, .cookie-consent-banner .reject:focus { background: var(--color-focus); color: var(--color-secondary); }
.cookie-consent-banner .settings {
background: transparent;
color: var(--color-primary);
border: 2px solid #eed5b0;
}
.cookie-consent-banner .settings:hover, .cookie-consent-banner .settings:focus { background: var(--color-focus); color: var(--color-secondary); }
/* COOKIE PREFERENCES MODAL */
.cookie-modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(58, 50, 39, 0.58);
z-index: 4250;
display: flex;
align-items: center;
justify-content: center;
animation: fadeInModal .33s cubic-bezier(.7,.1,.34,1);
}
@keyframes fadeInModal {
from { opacity: 0; }
to { opacity: 1; }
}
.cookie-modal {
background: #fff6eb;
border-radius: var(--border-radius);
max-width: 430px;
width: 97vw;
padding: 36px 24px 30px 24px;
box-shadow: var(--shadow-strong);
display: flex;
flex-direction: column;
align-items: flex-start;
animation: modalPop .36s cubic-bezier(.68,.16,.45,1);
}
@keyframes modalPop {
from { transform: scale(0.91); opacity: 0.5; }
to { transform: scale(1); opacity: 1; }
}
.cookie-modal h2 {
font-size: 1.3rem;
color: var(--color-primary);
margin-bottom: 14px;
}
.cookie-category {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
font-size: 0.98rem;
color: var(--color-primary);
}
.cookie-category label {
font-weight: 500;
}
.cookie-category input[type="checkbox"] {
accent-color: var(--color-secondary);
width: 19px;
height: 19px;
}
.cookie-category.essential label {
color: var(--color-secondary);
}
.cookie-modal .cookie-modal-buttons {
flex: 1 0 auto;
display: flex;
flex-wrap: wrap;
gap: 17px;
margin-top: 20px;
}
.cookie-modal .cookie-modal-buttons button {
font-family: var(--font-sans);
font-weight: 700;
padding: 10px 26px;
border-radius: var(--border-radius-small);
border: none;
cursor: pointer;
transition: background .18s, color .14s;
box-shadow: var(--shadow);
}
.cookie-modal .save {
background: var(--color-secondary);
color: #fff;
}
.cookie-modal .save:hover, .cookie-modal .save:focus { background: #A36927; outline: 2px solid var(--color-focus); }
.cookie-modal .cancel {
background: #fff;
color: var(--color-secondary);
border: 2px solid var(--color-secondary);
}
.cookie-modal .cancel:hover, .cookie-modal .cancel:focus { background: var(--color-focus); color: var(--color-secondary); }
/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
.container { max-width: 94vw; }
.main-nav { gap: 12px; }
}
@media (max-width: 900px) {
.container { max-width: 97vw; }
.features-section .feature-grid, .services-list .service-grid, .product-list-grid {
gap: 16px;
}
.feature-item, .service-item { min-width: 175px; }
}
@media (max-width: 768px) {
.container { padding-left: 10px; padding-right: 10px; }
.content-grid { flex-direction: column; gap: 22px; }
.feature-grid, .service-grid, .card-container, .product-list-grid { flex-direction: column; gap: 19px; }
.card, .feature-item, .service-item, .product-item { min-width: 90%; }
.hero-section, .services-preview, .catalog-preview, .testimonials-section, .text-section, .brand-details, .cta-section, .service-cta {
padding: 32px 12px 32px 12px;
margin-bottom: 36px;
}
.footer-top { flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 0 18px 0; }
.testimonial-card { padding: 18px 12px; }
.main-nav { display: none; }
.btn-primary { display: none; }
.mobile-menu-toggle { display: flex; }
.text-image-section { flex-direction: column; gap: 20px; align-items: flex-start; }
.section { padding: 24px 5px; margin-bottom: 30px; }
.testimonials-section { padding: 14px 5px 18px 5px; }
.cookie-consent-banner { flex-direction: column; align-items: flex-start; gap: 17px; padding: 19px 7px 13px 9px; }
}
@media (max-width: 500px) {
h1{font-size: 1.58rem;} h2{font-size:1.17rem;} h3{font-size:1rem;}
.hero-section{padding:22px 0 15px 0;}
.footer-top img { width: 48px; height: 48px; }
.footer-nav { gap: 10px; flex-wrap: wrap; }
}
/* MICRO-INTERACTIONS & FOCUS */
a, button, input, select {
outline: none;
transition: box-shadow 0.14s, border 0.13s, background 0.12s, color 0.13s;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
outline: 2.5px solid var(--color-focus);
outline-offset: 2px;
}
/* Hide default number input arrows */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance:textfield; }
/* Hide scrollbars for mobile menu overlay */
.mobile-menu::-webkit-scrollbar { width: 0px; background: transparent; }
.mobile-menu { -ms-overflow-style: none; scrollbar-width: none; }
/* Hide visually, remain accessible */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* End of CSS */