/* ================================================================ YOUR BRAND — style.css HOW THIS FILE IS ORGANISED: 1. CSS Variables — colours, sizes used everywhere 2. Reset & Base — clears browser defaults 3. Utilities — reusable helpers (.sr-only, .reveal etc) 4. Navigation — fixed top nav + mobile drawer 5. Hero — full-screen slideshow 6. Category Grid — mosaic layout 7. Stats Panel — count-up numbers 8. Product Strip — infinite scroll row 9. About Us — two photos + text 10. Contact — form section 11. Get Social — Instagram grid 12. Footer — link columns + copyright 13. WhatsApp Float — fixed bottom-right button 14. Responsive — tablet (1024px) and mobile (700px) SEARCH TIP: jump to any section by searching its number, e.g. "6." ================================================================ */ /* ================================================================ 1. CSS VARIABLES ───────────────────────────────────────────────────────────── CSS variables (also called "custom properties") let you define a value ONCE and reuse it anywhere in this file. HOW TO READ THEM: --variable-name: value; ← definition (here in :root) color: var(--variable-name); ← how you USE it elsewhere WHY :root ? :root means "the very top of the page" — so every element in the whole site can see and use these variables. HOW TO CUSTOMISE: • Change --accent to any hex colour to update ALL green accents in one go (numbers, hover borders, icons, etc.) • Change --nav-height if you make the logo taller/shorter (it's also read by script.js for scroll offset maths) ================================================================ */ :root { --white: #ffffff; /* pure white — page background, card backgrounds */ --off-white: #f4f2ee; /* warm off-white — stats cards, about section bg */ --light-bg: #f0ede8; /* slightly darker warm bg — contact form wrapper */ --black: #0a0a0a; /* near-black — rarely used directly */ --text: #1a1a1a; /* main body text colour */ --mid: #666666; /* secondary/muted text — captions, sub-labels */ --border: #e0ddd8; /* light border lines between elements */ --accent: #78b728; /* ★ BRAND GREEN — change this to re-theme the whole site */ --wa-green: #25D366; /* WhatsApp's official green — don't change this */ --nav-height: 80px; /* height of the top navigation bar (also used in JS) */ } /* ───────────────────────────────────────────────────────────── SECRET DARK MODE ───────────────────────────────────────────────────────────── When JS adds the class "dark-mode" to , these variables OVERRIDE the ones above. Because every style in this file uses var(--white), var(--text), etc., swapping the variable values here instantly re-skins everything with no other CSS changes. HOW TO TRIGGER IT: Click the developer credit text in the footer. Resets on page refresh. (See Section 8 in script.js.) ─────────────────────────────────────────────────────────────── */ body.dark-mode { --white: #111111; --off-white: #1a1a1a; --light-bg: #161616; --black: #000000; --text: #e8e8e8; --mid: #999999; --border: #2a2a2a; } /* ================================================================ 2. RESET & BASE Removes browser default margins/padding. box-sizing: border-box means padding is included in width, not added to it. ================================================================ */ /* These 3 rules apply to EVERY element on the page. margin:0 / padding:0 → removes the default spacing browsers add. box-sizing: border-box → padding is counted INSIDE the width, not added to it. Without this, adding padding to a box would make it wider than expected. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Smooth scrolling is handled by script.js to avoid double-scroll on Safari */ /* Body styles apply to the whole page. font-family → the default text font (falls back to any sans-serif if Lato fails) background / color → use CSS variables from :root above (easy to change in one place) font-weight: 300 → thin/light text as default (bold is added per-element) overflow-x: hidden → hides any content that sticks out sideways (fixes mobile glitches) transition → smooth colour change when dark mode is toggled */ body { font-family: 'Lato', sans-serif; background: var(--white); color: var(--text); font-weight: 300; overflow-x: hidden; /* prevents horizontal scroll on mobile */ transition: background 0.6s ease, color 0.6s ease; } /* ================================================================ 3. UTILITIES Small reusable classes used across multiple sections. ================================================================ */ /* Visually hidden but readable by Google and screen readers. Used on section headings that shouldn't appear on screen. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip link — appears only when keyboard user presses Tab. Lets them jump straight to main content, bypassing the nav. */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--text); color: var(--white); padding: 8px 16px; font-size: 13px; z-index: 9999; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.2s; } .skip-link:focus { top: 0; } /* slides down into view on focus */ /* "Text ›" style CTA links used in About and Social sections */ .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--text); padding-bottom: 2px; transition: opacity 0.2s; } .link-arrow::after { content: '›'; font-size: 16px; } .link-arrow:hover { opacity: 0.5; } /* Small uppercase label above section headings — e.g. "ABOUT US" */ .about-eyebrow, .contact-eyebrow, .strip-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mid); margin-bottom: 12px; display: block; } /* Scroll reveal — elements start invisible and slide up. JS adds .visible when element enters the viewport. */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ================================================================ 4. NAVIGATION Fixed to top of screen. Transparent over hero, white on scroll. JS adds .nav-solid class to trigger the white background. ================================================================ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 300; display: flex; align-items: center; padding: 0 50px; /* left/right padding only — no vertical */ height: var(--nav-height); background: transparent; transition: background 0.35s ease, box-shadow 0.35s ease; } /* Added by JS on scroll or hover */ nav.nav-solid { background: var(--white); box-shadow: 0 1px 0 var(--border); } /* Logo pushed to the left via margin-right: auto */ .nav-logo-link { margin-right: auto; } .nav-logo-img { height: 70px; /* adjust to resize your logo */ width: auto; display: block; } /* Desktop nav links */ .nav-links { display: flex; gap: 40px; list-style: none; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--white); /* white over dark hero */ text-decoration: none; letter-spacing: 0.02em; transition: opacity 0.2s, color 0.35s; } /* When nav turns white, links turn dark */ nav.nav-solid .nav-links a { color: var(--text); } .nav-links a:hover { opacity: 0.55; } /* ── HAMBURGER BUTTON (mobile only) ── Three horizontal lines that animate into an X when open. display:none on desktop — shown via media query at bottom. */ .hamburger { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: none; border: none; cursor: pointer; padding: 0; margin-left: 16px; z-index: 400; } .hamburger span { display: block; width: 100%; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.3s, opacity 0.3s, background 0.35s; } nav.nav-solid .hamburger span { background: var(--text); } /* Animate into X when .is-open is added by JS */ .hamburger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ── MOBILE MENU DRAWER ── Full-screen overlay. Slides down from above. JS adds .open to bring it into view. */ .mobile-menu { position: fixed; inset: 0; background: var(--white); z-index: 250; display: flex; align-items: center; justify-content: center; transform: translateY(-100%); /* hidden above screen */ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .mobile-menu.open { transform: translateY(0); /* slides into view */ pointer-events: all; } .mobile-menu ul { list-style: none; text-align: center; } .mobile-menu li { margin-bottom: 32px; } .mobile-menu a { font-size: 28px; font-weight: 700; color: var(--text); text-decoration: none; transition: opacity 0.2s; } .mobile-menu a:hover { opacity: 0.5; } /* WhatsApp button inside the mobile menu */ .mobile-whatsapp { display: inline-flex !important; align-items: center; gap: 8px; background: var(--wa-green) !important; color: var(--white) !important; padding: 14px 32px !important; border-radius: 32px; font-size: 18px !important; } /* ================================================================ 5. HERO SECTION Full-screen slideshow. Slides stack on top of each other. Only the .active slide is visible (opacity: 1). JS switches the .active class to change slides. ================================================================ */ .hero { position: relative; width: 100%; height: 78vh; min-height: 520px; overflow: hidden; background: #1a1a18; /* dark fallback while images load */ } /* Each slide fills the entire hero */ .hero-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; /* text anchored to bottom-left */ padding: 72px 80px; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; /* only active slide is clickable */ } .hero-slide.active { opacity: 1; pointer-events: all; } /* Background image layer inside each slide. Replace gradients with real photos in .slide-bg-1/2/3 below. */ .hero-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1); transition: transform 7s ease; } /* Ken Burns: zoom in slowly when slide is active */ .hero-slide.active .hero-slide-bg { transform: scale(1.07); } /* ── SLIDE BACKGROUNDS ── Replace each gradient with: background-image: url('hero1.jpg'); */ .slide-bg-1 { background-image: url('resources/hero1.jpg');} .slide-bg-2 { background-image: url('resources/hero2.png'); } .slide-bg-3 { background-image: url('resources/hero3.png'); background-position: right center; } /* Dark gradient overlay — ensures white text is always readable regardless of the photo brightness */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 55%, transparent 100% ); } .hero-text { position: relative; z-index: 2; max-width: 500px; } /* Slide 1 uses a real H1. Slides 2 and 3 use .hero-h2 (a

tag) to avoid having multiple H1s — bad for SEO. Both look identical. */ .hero-text h1, .hero-text .hero-h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 700; color: #fff; line-height: 1.12; margin-bottom: 24px; letter-spacing: -0.01em; } /* "Explore ›" link on each slide */ .hero-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.55); padding-bottom: 3px; transition: border-color 0.2s; } .hero-link::after { content: '›'; font-size: 18px; } .hero-link:hover { border-color: #fff; } /* Dot indicators — bottom right of hero */ .hero-dots { position: absolute; bottom: 32px; right: 56px; display: flex; gap: 10px; z-index: 10; } .hero-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.65); background: transparent; cursor: pointer; transition: background 0.25s; padding: 0; } .hero-dot.active { background: rgba(255,255,255,0.85); } /* ================================================================ 6. CATEGORY MOSAIC GRID Uses explicit grid placement — no auto-flow. Desktop layout (3 cols, 3 rows): ┌──────────────────┬──────────┬──────────┐ │ Architectural │ Indoor │ Landscape│ ← row 1 (340px) │ (spans r1 + r2) ├──────────┼──────────┤ │ │ Outdoor │ Office │ ← row 2 (340px) ├───────────────────────────┬────────────┤ │ Commercial & Industrial │ Stadium │ ← row 3 (220px) └───────────────────────────┴────────────┘ ================================================================ */ .categories { padding: 80px 40px; background: var(--white); } .cat-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: 340px 340px 220px; gap: 10px; } /* Each cell placed explicitly */ .cat-tall-left { grid-column: 1; grid-row: 1 / 3; } /* Architectural: spans rows 1 & 2 */ .cat-bg-2 { grid-column: 2; grid-row: 1; } /* Indoor */ .cat-bg-3 { grid-column: 3; grid-row: 1; } /* Landscape */ .cat-tall-center { grid-column: 2; grid-row: 2; } /* Outdoor */ .cat-bg-5 { grid-column: 3; grid-row: 2; } /* Office */ .cat-wide-bottom-left { grid-column: 1 / 3; grid-row: 3; } /* Commercial & Industrial: cols 1–2 */ .cat-wide-bottom-right{ grid-column: 3; grid-row: 3; } /* Stadium: col 3 */ /* All cells share these base styles */ .cat-cell { position: relative; overflow: hidden; cursor: pointer; text-decoration: none; display: block; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 0.35s ease, box-shadow 0.35s ease; } .cat-cell:hover { outline-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 8px 32px rgba(120,183,40,0.22); } /* The background image — zooms on hover */ .cat-cell .cat-img-inner { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .cat-cell:hover .cat-img-inner { transform: scale(1.05); } /* ── CELL BACKGROUND IMAGES ── Place files in resources/ folder with these exact names: cat-architectural.png cat-indoor.png cat-landscape.png cat-outdoor.png cat-office.png cat-commercial.png cat-stadium.png */ .cat-bg-1 .cat-img-inner { background-image: url('resources/cat-architectural.jpeg'); } .cat-bg-2 .cat-img-inner { background-image: url('resources/cat-indoor.jpeg'); } .cat-bg-3 .cat-img-inner { background-image: url('resources/cat-landscape.jpeg'); } .cat-bg-4 .cat-img-inner { background-image: url('resources/cat-outdoor.jpeg'); } .cat-bg-5 .cat-img-inner { background-image: url('resources/cat-office.jpeg'); } .cat-bg-6 .cat-img-inner { background-image: url('resources/cat-commercial.jpeg'); } .cat-bg-7 .cat-img-inner { background-image: url('resources/cat-stadium.jpeg'); } /* Label overlay — gradient behind text for readability */ .cat-label-wrap { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 28px 28px; background: linear-gradient(transparent, rgba(0,0,0,0.65)); z-index: 2; } .cat-label { display: block; font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 4px; } .cat-sub { display: block; font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.6); letter-spacing: 0.08em; text-transform: uppercase; } /* ================================================================ 8. PRODUCT STRIP JS-driven infinite scroll. Cards have a dark bg for transparent product PNGs. Hover expands the card to reveal the info panel. Edge nav buttons appear when the strip section is hovered. ================================================================ */ .strip-section { background: var(--white); padding: 20px 0 60px; overflow: hidden; } .strip-heading { text-align: center; padding: 0 48px 40px; } .strip-heading h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 700; margin-top: 8px; margin-bottom: 0; } /* ───────────────────────────────────────────────────────────── .strip-hint — the small grey line under the heading that says "Hover any card to explore · Use arrows to browse". On desktop this is a useful hint so we keep it visible. On mobile (below 700px) we hide it — see the @media block at the bottom of this file. TO CHANGE THE TEXT: edit it in index.html, search for class="strip-hint" ─────────────────────────────────────────────────────────────── */ .strip-hint { font-size: 12px; color: var(--mid); letter-spacing: 0.05em; margin-top: 10px; opacity: 0.7; } /* Outer: positions the edge nav buttons */ .strip-outer { position: relative; } /* Clips the scrolling track */ .strip-wrapper { overflow: hidden; width: 100%; } .strip-track { display: flex; gap: 16px; width: max-content; padding: 8px 10px 48px; /* No CSS animation — JS drives this */ } /* Edge nav buttons — visible on desktop, shown on section hover */ .strip-nav { display: none; /* shown by hover rule below on desktop */ position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--white); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .strip-nav:hover { background: var(--text); color: var(--white); transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.18); } .strip-nav svg { pointer-events: none; } .strip-nav-prev { left: 12px; } .strip-nav-next { right: 12px; } /* Show buttons when user hovers the strip area on desktop */ .strip-outer:hover .strip-nav, .strip-outer:focus-within .strip-nav { display: flex; } /* ── PRODUCT CARD ── Dark bg on hover so transparent product PNGs and white text read cleanly. Flex column: image+info row on top, label bar at bottom full width. Info panel slides in from right on hover. */ /* anchor reset — card is now an tag, remove default link styles */ a.strip-card { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; } .strip-card { position: relative; flex-shrink: 0; width: 220px; height: 290px; background: var(--off-white); border-radius: 8px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.06); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; z-index: 1; } /* Hover-expand preview is desktop-only behaviour. (hover: hover) and (pointer: fine) excludes touchscreens entirely, regardless of viewport width — fixes cards getting "stuck" expanded on tap on phones/tablets between 701px and 1024px wide. */ @media (hover: hover) and (pointer: fine) { .strip-card:hover { width: 460px; border-color: rgba(120, 183, 40, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0,0,0,0.1); background: var(--off-white); z-index: 10; } } /* Left column: row container for image + info panel, fills above the label */ .strip-card-left { flex: 1; min-height: 0; display: flex; flex-direction: row; align-items: stretch; } /* Image area: fixed 220px wide */ .strip-card-img { flex: 0 0 220px; display: flex; align-items: center; justify-content: center; padding: 18px 16px 12px; } .strip-card-img img { max-width: 190px; max-height: 210px; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)); transition: transform 0.4s ease; display: block; } @media (hover: hover) and (pointer: fine) { .strip-card:hover .strip-card-img img { transform: scale(1.08) translateY(-4px); } } /* Name + category at card bottom */ .strip-card-label { flex-shrink: 0; padding: 10px 14px 13px; background: rgba(0, 0, 0, 0.08); border-top: 1px solid rgba(0, 0, 0, 0.08); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } .strip-label-text { min-width: 0; flex: 1; display: flex; flex-direction: column; } .strip-name { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; letter-spacing: 0.01em; } .strip-sub { font-size: 10px; font-weight: 400; color: var(--mid); letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .strip-info-hint { display: none; flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); white-space: nowrap; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .strip-card:hover .strip-info-hint { display: block; } } .strip-card.expanded .strip-info-hint { display: block; } .strip-info-hint:hover { text-decoration: underline; text-underline-offset: 3px; } /* Info panel: slides in from right on hover */ .strip-card-info { flex-shrink: 0; width: 260px; height: 100%; padding: 22px 22px 22px 20px; display: flex; flex-direction: column; justify-content: center; gap: 10px; opacity: 0; transform: translateX(14px); transition: opacity 0.25s ease 0s, transform 0.25s ease 0s; } @media (hover: hover) and (pointer: fine) { .strip-card:hover .strip-card-info { opacity: 1; transform: translateX(0); transition: opacity 0.3s ease 0.18s, transform 0.3s ease 0.18s; } } .strip-info-cat { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 0; } .strip-info-name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.25; margin: 0; letter-spacing: -0.01em; } .strip-info-desc { font-size: 12px; color: var(--mid); line-height: 1.65; margin: 0; } .strip-info-tags { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; } .strip-info-tags span { font-size: 11px; color: var(--text); background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px; padding: 4px 10px; display: inline-block; width: fit-content; letter-spacing: 0.02em; } /* ── FOOTER LOCATION ROW ── */ .footer-location-row { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 36px; padding: 0 0 32px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 40px; } .footer-loc-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.45); } .footer-loc-item svg { flex-shrink: 0; stroke: var(--accent); opacity: 0.75; } .footer-loc-item a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; } .footer-loc-item a:hover { color: #fff; } .footer-loc-map { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: none; transition: opacity 0.2s; white-space: nowrap; } .footer-loc-map:hover { opacity: 0.65; } /* ================================================================ 9. ABOUT US Image on the left (with padding so it floats), text on the right. TO ADD REAL PHOTO: .about-img-1 { background-image: url('factory.jpg'); } ================================================================ */ .about { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; background: var(--off-white); padding: 48px; gap: 0; } /* Photo container: has padding so image doesn't touch edges */ .about-images { display: block; overflow: hidden; } /* The image itself — rounded corners + shadow to feel "floating" */ .about-img { background-size: cover; background-position: center; height: 100%; min-height: 380px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.15); transition: transform 0.6s ease; } /* Placeholder gradient — replace with real photo */ .about-img-1 { background-image: url('resources/factory.png'); } /* Text side */ .about-text { padding: 80px 72px; display: flex; flex-direction: column; justify-content: center; gap: 24px; background: var(--off-white); } .about-text h2 { font-size: clamp(32px, 3.5vw, 52px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0; } .about-body { font-size: 15px; line-height: 1.85; color: var(--mid); max-width: 400px; margin: 0; } /* "Become a dealer" button */ .btn-about { display: inline-block; align-self: flex-start; padding: 14px 32px; background: var(--text); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: background 0.2s, transform 0.2s; margin-top: 8px; } .btn-about:hover { background: #333; transform: translateY(-2px); } /* ================================================================ 10. CONTACT SECTION ================================================================ */ .contact { background: var(--white); padding: 80px 24px 0; /* no bottom padding — location block sits flush */ } /* NEW OUTER BOX */ .contact-wrapper { max-width: 1200px; margin: 0 auto; background: var(--light-bg); /* same beige color */ border-radius: 36px; padding: 80px 70px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); } .contact-inner { max-width: 660px; margin: 0 auto; } .contact-inner h2 { font-size: clamp(30px, 3.5vw, 44px); font-weight: 700; margin-bottom: 12px; } .contact-sub { font-size: 15px; color: var(--mid); line-height: 1.7; margin-bottom: 48px; } /* Phone + WhatsApp quick-tap links above the form */ .contact-quick { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; } .contact-quick-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--white); border: 1px solid var(--border); padding: 10px 20px; border-radius: 24px; transition: border-color 0.2s, transform 0.2s; } .contact-quick-item:hover { border-color: var(--text); transform: translateY(-2px); } /* WhatsApp variant — green background */ .contact-quick-wa { background: var(--wa-green); color: var(--white); border-color: var(--wa-green); } .contact-quick-wa:hover { opacity: 0.9; border-color: var(--wa-green); } /* Name + Email side by side */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { display: flex; flex-direction: column; margin-bottom: 24px; } .form-group label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; } .optional { font-weight: 300; text-transform: none; letter-spacing: 0; color: var(--mid); } .form-group input, .form-group textarea { padding: 14px 16px; border: 1px solid var(--border); background: var(--white); font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 300; color: var(--text); outline: none; transition: border-color 0.2s; border-radius: 10px; } .form-group input:focus, .form-group textarea:focus { border-color: var(--text); } textarea { resize: vertical; } .btn-submit { display: inline-block; padding: 16px 48px; background: var(--text); color: var(--white); border: none; font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.25s, transform 0.2s; border-radius: 10px; } .btn-submit:hover { background: #333; transform: translateY(-2px); } /* Hidden until JS shows it after form submit */ .form-success { display: none; margin-top: 24px; font-size: 15px; color: #2a7a4a; } /* ================================================================ 11. GET SOCIAL Left panel: text. Right panel: photo grid. Grid layout: 1 tall photo + 2×2 photos (mirrors reference design). ================================================================ */ /* MAIN SOCIAL SECTION CONTAINER */ .social-section { /* sets the background color using a CSS variable */ background: var(--off-white); /* makes the section use CSS Grid layout */ display: grid; /* creates 2 columns: first column = 280px fixed width second column = remaining available space */ grid-template-columns: 280px 1fr; /* vertically centers items inside the grid */ align-items: center; /* adds spacing inside the section 48px top/bottom 70px left/right */ padding: 48px 70px; /* limits maximum width of section */ max-width: 100%; /* centers the section horizontally */ margin: 0 auto; /* space between left and right columns */ gap: 100px; } /* LEFT SIDE CONTENT */ .social-left { /* flexbox layout */ display: flex; /* stacks children vertically */ flex-direction: column; /* centers content vertically */ justify-content: center; /* space between children */ gap: 18px; /* slightly moves whole block upward */ transform: translateY(-8px); } /* MAIN HEADING */ .social-left h2 { /* responsive font size: minimum 38px preferred 4vw maximum 62px */ font-size: clamp(38px, 4vw, 62px); /* controls vertical spacing between text lines */ line-height: 0.92; /* squeezes letters slightly closer */ letter-spacing: -0.05em; /* bold text */ font-weight: 400; /* removes default margin */ margin: 0; transform: translateX(-9px); } /* INSTAGRAM HANDLE / SOCIAL LINK */ .social-handle { /* inline flex keeps it in one line */ display: inline-flex; /* vertically aligns icon and text */ align-items: center; /* space between icon and text */ gap: 5px; /* text size */ font-size: 14px; /* medium font thickness */ font-weight: 500; /* spacing between letters */ letter-spacing: 0.08em; /* uppercase text */ text-transform: uppercase; /* text color */ color: var(--text); /* removes underline */ text-decoration: none; } /* SVG ICON INSIDE HANDLE */ .social-handle svg { /* icon width */ width: 18px; /* icon height */ height: 18px; } /* "Follow us on social" link — uses .link-arrow utility defined in section 3 */ /* IMAGE GRID */ .social-grid { /* grid layout */ display: grid; /* creates 3 columns: first column bigger other two smaller */ grid-template-columns: 1.25fr 0.8fr 0.8fr; /* creates 2 rows each 250px tall */ grid-template-rows: 250px 250px; /* spacing between images */ gap: 18px; } /* LARGE TALL IMAGE */ .social-img-tall { /* makes image span from row 1 to row 3 meaning it covers both rows */ grid-row: 1 / 3; } /* IMAGE BOX */ .social-img { /* needed for absolute positioning inside */ position: relative; /* hides overflowing parts of image */ overflow: hidden; } /* INNER IMAGE LAYER */ .social-img-inner { /* absolute positioning relative to parent */ position: absolute; /* stretches to all sides */ inset: 0; /* makes background image cover full box */ background-size: cover; /* centers image */ background-position: center; /* smooth animation for scaling */ transition: transform 0.5s ease; } /* HOVER EFFECT */ .social-img:hover .social-img-inner { /* zooms image slightly on hover */ transform: scale(1.03); } /* Placeholder tones — replace with real images: describe it */ .social-ph-1 { background: linear-gradient(160deg, #2a2620 0%, #3e3428 100%); } .social-ph-2 { background: linear-gradient(160deg, #e8e4de 0%, #d0ccc4 100%); } .social-ph-3 { background: linear-gradient(160deg, #c8d0d4 0%, #b0bcc4 100%); } .social-ph-4 { background: linear-gradient(160deg, #d8d4cc 0%, #c0bab0 100%); } .social-ph-5 { background: linear-gradient(160deg, #dce0d8 0%, #c4c8bc 100%); } /* ================================================================ 12. FOOTER ================================================================ */ footer { background: var(--black); color: rgba(255,255,255,0.5); padding: 56px 48px 32px; } /* Logo + tagline strip at top */ .footer-top { display: flex; align-items: center; gap: 20px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.07); } .footer-logo { height: 44px; width: auto; opacity: 0.85; filter: brightness(0) invert(1); } .footer-tagline { font-size: 13px; color: rgba(255,255,255,0.3); font-weight: 300; letter-spacing: 0.02em; } .footer-cols { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.07); } .footer-col h3 { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 20px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 12px; } .footer-col a { font-size: 13px; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; } .footer-col a:hover { color: #fff; } /* Social icon + text links */ .footer-socials { display: flex; flex-direction: column; gap: 12px; } .footer-social-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s, gap 0.2s; } .footer-social-link:hover { color: #fff; gap: 13px; } .footer-social-link svg { flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s; } .footer-social-link:hover svg { opacity: 1; } /* Bottom bar */ .footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; } .footer-bottom > p { font-size: 11px; color: rgba(255,255,255,0.2); } /* Developer credit — plain-looking, secret dark mode trigger */ .footer-dev { font-size: 11px; color: rgba(255,255,255,0.18); } #devCredit { cursor: default; transition: color 0.2s; } #devCredit:hover { color: rgba(255,255,255,0.35); } .footer-dev-email { font-size: 11px; color: rgba(255,255,255,0.18); text-decoration: none; transition: color 0.2s; } .footer-dev-email:hover { color: rgba(255,255,255,0.4); } /* ================================================================ 13. FLOATING WHATSAPP BUTTON Fixed to bottom-right. Always visible. Pulse ring animates outward every 2.5 seconds. ================================================================ */ .whatsapp-float { position: fixed; bottom: 28px; right: 28px; width: 56px; height: 56px; background: var(--wa-green); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); z-index: 500; transition: transform 0.25s, box-shadow 0.25s; text-decoration: none; } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5); } /* Expanding ring animation */ .whatsapp-float::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--wa-green); opacity: 0; animation: waPulse 2.5s ease-out infinite; } @keyframes waPulse { 0% { inset: 0; opacity: 0.6; } 100% { inset: -14px; opacity: 0; } } /* ================================================================ 10b. LOCATION — embedded at the bottom of Contact section. Full-width, edge-to-edge. Info panel left, map right. No rounded container — bleeds to viewport edges like the original standalone version, but lives inside .contact. ================================================================ */ .contact-location { /* pull out of the contact's 24px side padding so it goes edge-to-edge */ margin: 64px -24px 0; width: calc(100% + 48px); } .contact-location-wrapper { display: grid; grid-template-columns: 1fr 1.6fr; min-height: 420px; } /* Left info panel — off-white background, generous padding */ .location-info-card { background: var(--off-white); padding: 64px 60px; display: flex; flex-direction: column; justify-content: center; gap: 24px; } .location-card-heading { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0; } .location-body { font-size: 14px; line-height: 1.85; color: var(--mid); margin: 0; max-width: 340px; } .location-details { display: flex; flex-direction: column; gap: 18px; } .location-detail-item { display: flex; align-items: flex-start; gap: 14px; } .location-detail-item svg { flex-shrink: 0; margin-top: 2px; stroke: var(--accent); } .location-detail-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); margin-bottom: 4px; } .location-detail-value { font-size: 14px; color: var(--text); line-height: 1.65; font-weight: 400; } a.location-link { text-decoration: none; color: var(--text); transition: color 0.2s; } a.location-link:hover { color: var(--accent); } .btn-directions { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: var(--text); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; padding: 12px 24px; text-decoration: none; border-radius: 4px; margin-top: 4px; transition: background 0.2s, transform 0.2s; } .btn-directions:hover { background: var(--accent); transform: translateY(-2px); } /* Right: map fills its cell completely */ /* Right: map in a padded, rounded container like the about photo */ .location-map { background: var(--off-white); padding: 32px; display: flex; align-items: stretch; } .location-map-iframe { flex: 1; border: 0; border-radius: 12px; min-height: 360px; display: block; box-shadow: 0 8px 40px rgba(0,0,0,0.12); filter: grayscale(15%); transition: filter 0.4s; } .location-map:hover .location-map-iframe { filter: grayscale(0%); } /* ================================================================ 14. RESPONSIVE STYLES ──────────────────────────────────────────────────────────────── @media (max-width: Xpx) means: "only apply these styles when the screen is X pixels wide or smaller." We have two breakpoints: • 1024px = tablets (iPad etc.) • 700px = mobile phones Styles inside these blocks OVERRIDE the desktop styles above. Only the properties listed here change — everything else stays. ★ TO CHANGE MOBILE FONT SIZE: edit the values inside @media (max-width: 700px) ★ TO CHANGE WHEN TABLET LAYOUT KICKS IN: change 1024px ================================================================ */ /* ── TABLET (max 1024px) ──────────────────────────────────────── */ @media (max-width: 1024px) { nav { padding: 0 28px; } /* Category grid: 2 equal columns, 3 rows */ .cat-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 260px); } /* Re-place all cells for 2-column layout */ .cat-tall-left { grid-column: 1; grid-row: 1; } .cat-bg-2 { grid-column: 2; grid-row: 1; } .cat-bg-3 { grid-column: 1; grid-row: 2; } .cat-tall-center{ grid-column: 2; grid-row: 2; } .cat-bg-5 { grid-column: 1; grid-row: 3; } .cat-wide-right { grid-column: 2; grid-row: 3; } /* About: stack image above text, keep the padding/rounded image */ .about { grid-template-columns: 1fr; padding: 36px 32px; } .about-images { padding: 0 0 24px 0; } .about-img { min-height: 300px; } .about-text { padding: 32px 8px 8px; } /* Location inside contact: stack on tablet, fix edge-to-edge margin */ .contact-location { margin: 48px -24px 0; width: calc(100% + 48px); } .contact-location-wrapper { grid-template-columns: 1fr; } .location-map { min-height: 300px; } /* Social: narrower left panel */ .social-section { grid-template-columns: 220px 1fr; } .social-left { padding: 56px 32px; } /* Footer: 2 columns instead of 4 */ .footer-cols { grid-template-columns: 1fr 1fr; } } /* ── MOBILE (max 700px) ───────────────────────────────────────── */ @media (max-width: 700px) { :root { --nav-height: 64px; } /* NAV: hide links, show hamburger */ nav { padding: 0 20px; height: var(--nav-height); } .nav-links { display: none; } .hamburger { display: flex; } .nav-logo-img { height: 55px; } /* HERO: full screen height on mobile */ .hero { height: 100svh; min-height: 480px; } .hero-slide { padding: 48px 24px; } .hero-text h1, .hero-text .hero-h2 { font-size: clamp(32px, 9vw, 48px); } .hero-dots { right: 24px; bottom: 24px; } /* CATEGORIES: horizontal swipe carousel Each card = 75vw wide so ~25% of next card peeks through */ .categories { padding: 40px 0; overflow: hidden; } .cat-grid { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 10px; padding-bottom: 16px; scrollbar-width: none; scroll-padding-left: 10px; } .cat-grid::-webkit-scrollbar { display: none; } /* Invisible spacers give the 20px left/right gap without breaking scroll */ .cat-grid::before, .cat-grid::after { content: ''; flex: 0 0 20px; height: 1px; } /* All 7 cells become equal swipeable cards */ .cat-tall-left, .cat-bg-2, .cat-bg-3, .cat-tall-center, .cat-bg-5, .cat-wide-bottom-left, .cat-wide-bottom-right { flex: 0 0 75vw; height: 300px; grid-column: unset; grid-row: unset; scroll-snap-align: start; border-radius: 4px; overflow: hidden; } /* PRODUCT STRIP: mobile fixes */ /* Hide the "Hover any card to explore" hint — hover doesn't exist on touch */ .strip-hint { display: none; } .strip-nav { display: none; } /* remove prev/next arrows on mobile */ .strip-wrapper { overflow: hidden; cursor: default; } .strip-card { width: 160px; height: 240px; } .strip-card:hover { width: 160px; } /* prevent desktop hover expanding on tablet */ /* Info panel and hint are desktop-only; keep them hidden on touch */ .strip-card-info { display: none; } .strip-info-hint { display: none; } .strip-card-left { flex-direction: row; } .strip-card-img { flex: 0 0 160px; width: 160px; display: flex; align-items: center; justify-content: center; padding: 14px; } .strip-card-img img { max-width: 130px; max-height: 140px; width: 100%; margin: 0 auto; } /* ABOUT: hide image on mobile, full-width text */ .about-images { display: none; } .about { grid-template-columns: 1fr; padding: 32px 20px; } .about-text { padding: 0; gap: 16px; } .about-text h2{ font-size: 28px; } .about-body { font-size: 14px; max-width: 100%; } /* LOCATION inside contact: stacked on mobile, fix margins for mobile padding */ .contact-location { margin: 32px -16px 0; width: calc(100% + 32px); } .contact-location-wrapper { grid-template-columns: 1fr; } .location-info-card { padding: 36px 24px; gap: 16px; } .location-map { min-height: 260px; } /* CONTACT: stack form fields */ .contact { padding: 40px 16px 0; } .btn-submit { width: 100%; } .contact-wrapper { padding: 40px 24px; border-radius: 24px; } .form-row { grid-template-columns: 1fr; } .contact-quick { flex-direction: column; } .contact-quick-item { justify-content: center; } /* SOCIAL: stack sections vertically, grid 2-col */ .social-section { width: 100%; grid-template-columns: 1fr; gap: 28px; padding: 32px 20px; } .social-left { padding: 48px 24px 40px; border-right: none; border-bottom: 1px solid var(--border); } .social-left h2 { font-size: 44px; } .social-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px 180px; gap: 6px; padding: 24px; } .social-img-tall { grid-row: 1 / 3; } /* FOOTER: 2 columns */ footer { padding: 40px 20px 24px; } .footer-top { gap: 12px; padding-bottom: 24px; margin-bottom: 24px; } .footer-logo { height: 36px; } .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; } .footer-bottom{ flex-direction: column; text-align: center; gap: 4px; } /* WHATSAPP FLOAT: slightly smaller on mobile */ .whatsapp-float { bottom: 20px; right: 20px; width: 50px; height: 50px; } } /* ── STRIP CARD LAYOUT FIXES ── Label bar now lives outside .strip-card-left so it spans full card width. .strip-card-left is a flex row: image (200px) + info panel. This ensures the grey bar always stretches edge-to-edge. */ /* Override label to be a proper bottom bar */ .strip-card-label { flex-shrink: 0 !important; width: 100% !important; background: rgba(0, 0, 0, 0.08) !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; } /* On hover, keep same subtle label */ @media (hover: hover) and (pointer: fine) { .strip-card:hover .strip-card-label { background: rgba(0, 0, 0, 0.1) !important; } } /* ================================================================ MOBILE PRODUCT BOTTOM-SHEET POPUP Created by JS on touch devices. Slides up from the bottom when a product card is tapped. ================================================================ */ .strip-popup { position: fixed; inset: 0; z-index: 500; visibility: hidden; pointer-events: none; } .strip-popup.open { visibility: visible; pointer-events: auto; } .strip-popup-bd { position: absolute; inset: 0; background: rgba(10,10,10,0.55); opacity: 0; transition: opacity 0.28s ease; } .strip-popup.open .strip-popup-bd { opacity: 1; } .strip-popup-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: var(--white); border-radius: 20px 20px 0 0; padding: 24px 20px 36px; transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 -4px 32px rgba(0,0,0,0.12); } .strip-popup.open .strip-popup-sheet { transform: translateY(0); } .strip-popup-sheet::before { content: ''; display: block; width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 20px; } .strip-popup-close { position: absolute; top: 18px; right: 16px; width: 32px; height: 32px; background: var(--off-white); border: none; border-radius: 50%; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--mid); transition: background 0.15s; } .strip-popup-close:active { background: var(--border); } .strip-popup-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; } .strip-popup-img-wrap { flex: 0 0 96px; height: 96px; background: var(--off-white); border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .strip-popup-img { max-width: 76px; max-height: 76px; object-fit: contain; display: block; } .strip-popup-meta { flex: 1; min-width: 0; padding-top: 2px; } .strip-popup-cat { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; } .strip-popup-name { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.01em; } .strip-popup-desc { font-size: 12px; color: var(--mid); line-height: 1.6; margin: 0 0 10px; } .strip-popup-tags { display: flex; flex-wrap: wrap; gap: 5px; } .strip-popup-tags span { font-size: 10px; color: var(--text); background: var(--off-white); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; } .strip-popup-btn { display: block; text-align: center; background: var(--accent); color: #fff; text-decoration: none; padding: 15px 24px; border-radius: 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; transition: opacity 0.15s; } .strip-popup-btn:active { opacity: 0.85; }