into a scrolling container, which breaks the `position:sticky` sections below. ============================================================ */ #topbar, #navbar, #mobile-menu, main, footer { max-width: 100%; overflow-x: clip; } /* Subtle grain texture on body */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; mix-blend-mode: multiply; } /* Ensure content sits above grain */ body>* { position: relative; z-index: 1 } h1, h2, h3, h4, h5, h6 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -0.015em; text-shadow: 0 1px 0 rgba(27, 24, 19, 0.05); } ::selection { background: var(--clay); color: #FAF6EE } ::-webkit-scrollbar { width: 10px } ::-webkit-scrollbar-track { background: var(--cream) } ::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--cream) } ::-webkit-scrollbar-thumb:hover { background: var(--clay) } img { display: block; max-width: 100% } button { cursor: pointer } /* Eyebrow kicker */ .eyebrow { font-size: 11px; letter-spacing: .30em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; display: inline-flex; align-items: center; gap: .75rem; } .eyebrow::before { content: ''; width: 2rem; height: 2px; background: var(--clay); flex: none; box-shadow: 0 0 6px rgba(184, 92, 42, 0.35); } .eyebrow-light { color: rgba(250, 246, 238, .65) } .eyebrow-light::before { background: var(--clay) } /* ============================================================ TOP CONTACT BAR ============================================================ */ :root { --topbar-h: 2.5rem; /* 40px desktop */ --topbar-h-sm: 2rem; /* 32px mobile */ } #topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; /* sits above #navbar (z-50) */ height: var(--topbar-h); background: var(--ink); border-bottom: 1px solid rgba(250, 246, 238, 0.08); display: flex; align-items: center; will-change: transform, opacity; /* Hide/show MUST be instant — no fade/slide — so the top bar cannot linger and leave a visible gap while it collapses. */ transition: none; } /* Hide topbar when user scrolls down, reveal when scrolling up (snaps instantly) */ #topbar.topbar-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } .topbar-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; overflow: hidden; } /* Individual contact items */ .topbar-item { display: inline-flex; align-items: center; gap: .5rem; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: rgba(250, 246, 238, .72); text-decoration: none; white-space: nowrap; transition: color .25s ease; } .topbar-item:hover { color: var(--clay) } .topbar-item i { font-size: 10px; color: var(--clay); opacity: .85; flex-shrink: 0; } /* Divider between items */ .topbar-divider { width: 1px; height: 14px; background: rgba(250, 246, 238, .14); flex-shrink: 0; } /* Right-side social micro-icons */ .topbar-social { display: inline-flex; align-items: center; gap: .6rem; } .topbar-social a { color: rgba(250, 246, 238, .5); font-size: 11px; transition: color .25s ease; } .topbar-social a:hover { color: var(--clay) } /* Hide less-important items below 640 px (keep only phone) */ @media (max-width:639px) { #topbar { height: var(--topbar-h-sm); } .topbar-hide-sm { display: none !important; } } /* WhatsApp item — glows green on hover */ .topbar-whatsapp:hover { color: #25D366 !important; } .topbar-whatsapp i { color: #25D366 !important; opacity: 1; } /* Keep both fixed layers adjacent while the topbar collapses. */ #navbar { top: var(--topbar-h); /* `top` is intentionally NOT transitioned so the navbar snaps to top:0 the instant the topbar disappears — no slide, no gap. Only the frosted background/shadow still ease. */ transition: background .4s ease, box-shadow .4s ease; } #navbar.topbar-collapsed { top: 0; } @media (max-width:639px) { #navbar { top: var(--topbar-h-sm); } #navbar.topbar-collapsed { top: 0; } } /* Mobile menu sits below navbar which already sits below topbar */ #mobile-menu { top: calc(var(--topbar-h) + 4rem); } #mobile-menu.topbar-collapsed { top: 4rem; } @media (max-width:639px) { #mobile-menu { top: calc(var(--topbar-h-sm) + 4rem); } #mobile-menu.topbar-collapsed { top: 4rem; } } /* ============================================================ REVEAL ON SCROLL ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1) } .reveal.delay-1 { transition-delay: .12s } .reveal.delay-2 { transition-delay: .24s } .reveal.is-visible { opacity: 1; transform: none } @media (prefers-reduced-motion:reduce) { .reveal { opacity: 1; transform: none; transition: none } } /* ============================================================ NAVIGATION ============================================================ */ #navbar { background: rgb(250, 246, 238); will-change: top; /* `top` is never transitioned (instant snap), keep background/shadow easing. */ transition: background .4s ease, box-shadow .4s ease } #navbar.scrolled { background: rgba(250, 246, 238, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line), 0 4px 24px -4px rgba(27, 24, 19, 0.11); } .nav-link { position: relative } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--clay); transition: width .3s ease; box-shadow: 0 0 6px rgba(184, 92, 42, 0.4); } .nav-link:hover::after, .nav-link.active::after { width: 100% } .nav-link.active { color: var(--clay) } .nav-link-mobile.active { color: var(--clay) } /* Site logo image — unified */ .site-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; outline-offset: 4px; } .site-logo-img { display: block; height: 48px; /* fits comfortably in 64px navbar */ width: auto; max-width: 180px; object-fit: contain; object-position: left center; transition: opacity .3s ease; } @media (min-width: 1024px) { .site-logo-img { height: 56px; /* slightly taller in lg navbar (h-20 = 80px) */ } } .site-logo-link:hover .site-logo-img { opacity: 0.85; } /* Footer variant — blend away the white PNG background on dark surface */ .site-logo-footer .site-logo-img { mix-blend-mode: lighten; filter: brightness(1.15); } /* Enquiry nav button polish */ .enquiry-nav-btn { box-shadow: var(--shadow-xs); } .enquiry-nav-btn:hover { box-shadow: var(--shadow-btn-ink) !important; } /* Mobile menu - full-width, viewport-bounded dropdown panel */ #mobile-menu { position: fixed; top: calc(var(--topbar-h) + 4rem); left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(27, 24, 19, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; overflow: hidden; /* `top` is NOT transitioned so a topbar collapse while the menu is open snaps it flush with no transient gap; open/close fade still animates. */ transition: opacity .3s ease, visibility .3s ease; } #mobile-menu.is-open { opacity: 1; visibility: visible } .mobile-menu-panel { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 32px 64px -24px rgba(27, 24, 19, .50); max-height: calc(100vh - 4rem); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateY(-12px); opacity: 0; transition: transform .34s cubic-bezier(.22, .61, .36, 1), opacity .3s ease; } #mobile-menu.is-open .mobile-menu-panel { transform: none; opacity: 1 } .mobile-menu-inner { padding: .375rem 1.25rem 1.5rem } .mobile-menu-inner a.nav-link-mobile { display: flex; align-items: center; min-height: 3.375rem; padding: 0 .25rem; font-size: 1rem; font-weight: 500; letter-spacing: .01em; color: var(--ink); border-bottom: 1px solid rgba(27, 24, 19, .08); -webkit-tap-highlight-color: transparent; transition: color .25s ease, padding-left .25s ease, background .25s ease; } .mobile-menu-inner a.nav-link-mobile:active { background: var(--cream) } .mobile-menu-inner a.nav-link-mobile:hover { color: var(--clay); padding-left: .5rem } .mobile-menu-inner a.nav-link-mobile.active { color: var(--clay); padding-left: .5rem } .mobile-menu-inner a.nav-link-mobile.active::before { content: '\203A'; font-weight: 600; margin-right: .5rem; color: var(--clay) } .mobile-enquiry { margin-top: 1.25rem; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.1rem; border: 1px solid var(--ink); color: var(--ink); font-size: .95rem; font-weight: 600; letter-spacing: .02em; background: transparent; box-shadow: var(--shadow-xs); transition: background .3s ease, color .3s ease, box-shadow .3s ease; } .mobile-enquiry:hover { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-btn-ink) } body.menu-open { overflow: hidden } @media (prefers-reduced-motion:reduce) { #mobile-menu, #mobile-menu .mobile-menu-panel { transition: none; transform: none } } /* ============================================================ LOGO DIAMOND ============================================================ */ .rotate-45 { transform: rotate(45deg) } .-rotate-45 { transform: rotate(-45deg) } .group:hover .rotate-45 { transform: rotate(135deg) } /* ============================================================ SERVICES SECTION ============================================================ */ .service-row { will-change: transform; transition: box-shadow .3s ease } .service-row:hover { box-shadow: inset 3px 0 0 var(--clay); } .service-row.on>span:first-child { color: var(--clay) } /* Service tags - stronger presence */ .service-tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid rgba(27, 24, 19, 0.2); transition: border-color .25s ease, color .25s ease, background .25s ease; } .service-row:hover .service-tag { border-color: rgba(184, 92, 42, 0.35); color: var(--clay); background: rgba(184, 92, 42, 0.04); } /* Services preview image panel */ #services-preview { box-shadow: var(--shadow-xl); outline: 1px solid var(--line); outline-offset: -1px; } /* ============================================================ HERO SECTION ============================================================ */ /* Hero stamp seal depth */ .hero-stamp { box-shadow: var(--shadow-md); outline: 1px solid rgba(27, 24, 19, 0.12); outline-offset: 3px; } /* ---------- hero section slider (full-bleed) ---------- */ .hero-slider { position: relative; width: 100%; min-height: 72vh; overflow: hidden; background: var(--ink); } /* Crossfading stacked slides - each fills the hero */ .hero-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* Reserve the FIXED header zone (scroll bar + main navbar) so the centered content can never climb up under / overlap the top bar. Flex items are aligned within the padded box, so content stays below this offset. */ padding-top: calc(var(--topbar-h) + 5rem); /* ≈ 40px + 80px navbar */ padding-bottom: 6.5rem; /* clearance above dots/stat strip */ text-align: center; opacity: 0; visibility: hidden; transform: scale(1.05); transition: opacity 1s ease, transform 1.1s ease, visibility 1s; } .hero-slide.active { opacity: 1; visibility: visible; transform: scale(1); } /* Full-bleed background image + dark overlay for text contrast */ .hero-slide-bg { position: absolute; inset: 0; z-index: 0; /* Warm placeholder tone while the image streams in, so the hero never renders as an empty black box (especially on slow connections). */ background: linear-gradient(180deg, #2f281e 0%, var(--ink) 100%); } .hero-slide-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-slide-overlay { position: absolute; inset: 0; background: radial-gradient(120% 95% at 50% 18%, rgba(27, 24, 19, 0.16) 0%, rgba(27, 24, 19, 0.55) 100%); } /* Centered intro content (text + buttons) on every slide */ .hero-slide-content { position: relative; z-index: 2; width: 100%; max-width: 48rem; margin: 0 auto; /* Vertical clearance is handled by `.hero-slide` padding; here we only keep small top spacing so the eyebrow never sits flush against the region edge. */ padding: 1rem 1.25rem; text-align: center; } .hero-slide-content .eyebrow { color: #E29A6C; } .hero-title { margin-top: 1.5rem; font-family: 'Fraunces', serif; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; font-weight: 300; letter-spacing: -0.015em; color: #FAF6EE; text-wrap: balance; } .hero-title em { font-style: italic; font-weight: 400; color: #E29A6C; } .hero-lead { margin: 1.75rem auto 0; max-width: 40rem; font-size: 1.125rem; line-height: 1.65; color: rgba(250, 246, 238, 0.82); } .hero-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; } .hero-cta { display: inline-flex; align-items: center; gap: .75rem; padding: .9rem 1.6rem; background: #FAF6EE; color: #1B1813; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .04em; transition: background .3s ease, color .3s ease; } .hero-cta:hover { background: #B85C2A; color: #FAF6EE; } .hero-cta i { transition: transform .25s ease; } .hero-cta:hover i { transform: translateX(3px); } .hero-call { display: inline-flex; align-items: center; gap: .8rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .875rem; font-weight: 500; letter-spacing: .03em; color: #FAF6EE; transition: color .3s ease; } .hero-call:hover { color: #E29A6C; } .hero-call-phone { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid rgba(250, 246, 238, 0.5); transition: border-color .3s ease; } .hero-call:hover .hero-call-phone { border-color: #E29A6C; } /* Slider arrow buttons */ .hero-slide-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: rgba(250, 246, 238, 0.92); border: 1px solid rgba(27, 24, 19, 0.14); color: var(--ink); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } .hero-slide-btn-prev { left: 1rem; } .hero-slide-btn-next { right: 1rem; } .hero-slide-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: var(--shadow-btn-ink); } /* Slider dots */ .hero-slider-dots { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 3; display: flex; gap: .5rem; } .hdot { width: 1.5rem; height: .375rem; border: 0; background: rgba(250, 246, 238, 0.45); cursor: pointer; transition: all .3s ease; padding: 0; } .hdot.active { width: 2.9rem; background: #E29A6C; box-shadow: 0 0 8px rgba(226, 154, 108, 0.4); } @media (min-width: 1024px) { .hero-slider { min-height: 100vh; } } /* Reduced motion: no crossfade, just swap */ @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; transform: none; } } /* ---------- mobile responsive adjustments ---------- */ /* Hide left/right navigation buttons on touch viewports (tablets and mobile) */ @media (max-width: 1023px) { .hero-slide-btn { display: none !important; } } /* Reduce spacing, font sizes, and dots position on mobile viewports */ @media (max-width: 767px) { /* Give the hero enough height on phones so the centered (stacked) content always fits without being squeezed up toward the fixed header. */ .hero-slider { min-height: 100vh; min-height: 100svh; /* dynamic-viewport, avoids the iOS URL-bar overlap */ } .hero-slide { /* Mobile header = 32px top bar + 64px navbar = 6rem */ padding-top: calc(var(--topbar-h-sm) + 4rem); padding-bottom: 6rem; } .hero-slide-content { padding: 0.75rem 1.25rem; } .hero-title { font-size: clamp(1.9rem, 7.5vw, 2.5rem); line-height: 1.1; margin-top: 1rem; } .hero-lead { margin-top: 1rem; font-size: 0.95rem; line-height: 1.55; } .hero-actions { margin-top: 1.5rem; gap: 1rem; } .hero-call-phone { width: 2.25rem; height: 2.25rem; } .hero-slider-dots { bottom: 3.5rem; } } /* Stack action buttons and tighten stats strip padding on small devices */ @media (max-width: 639px) { .hero-actions { flex-direction: column; align-items: center; width: 100%; } .hero-cta { width: 100%; max-width: 280px; justify-content: center; text-align: center; } .hero-call { width: 100%; max-width: 280px; justify-content: center; } .stat-strip-item { padding: 1.5rem 1rem; } } /* Stat strip numbers - optical weight & premium typography */ .stat-num { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--ink) 45%, var(--clay) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ ABOUT SECTION ============================================================ */ /* ---- Image wrapper — clips the hover-scale so it never bleeds outside ---- */ .about-img-wrap { position: relative; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-md); transition: box-shadow 0.5s ease; display: block; /* make it a block so height:100% works on the img */ } .about-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1); } .about-img-wrap:hover { box-shadow: var(--shadow-lg); } .about-img-wrap:hover img { transform: scale(1.04); } /* First (landscape) image gets a slightly larger radius */ .about-img-wrap:first-child { border-radius: var(--r-lg); } /* Legacy .about-img (direct — kept for back-compat if used outside a wrap) */ .about-img { box-shadow: var(--shadow-md); transition: box-shadow .5s ease, transform .5s ease; } .about-img:hover { box-shadow: var(--shadow-lg); transform: scale(1.01); } /* ---- Stat card inside the collage ---- */ .about-stat-card { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow-card-hover); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; } .about-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--clay), var(--clay-deep)); } /* ---- About collage container (single stacked column; inner rows use their own grids) ---- */ .about-collage { display: block; width: 100%; } .about-collage-wide { grid-column: 1 / -1; /* span full width */ } .about-collage-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; grid-column: 1 / -1; } @media (min-width: 640px) { .about-collage { gap: 1rem; } .about-collage-bottom { gap: 1rem; } } /* ---- Principles list ---- */ .principle-row { transition: background 0.3s ease, box-shadow 0.3s ease; padding-left: 0.25rem; border-left: 2px solid transparent; transition: background 0.3s ease, border-color 0.3s ease; } .principle-row:hover { background: rgba(184, 92, 42, 0.03); border-left-color: var(--clay); } .principle-index { font-size: .875rem; color: var(--clay); opacity: .7; transition: opacity .3s ease; flex-shrink: 0; min-width: 1.75rem; } .principle-row:hover .principle-index { opacity: 1; } /* ---- Reviews / ratings bar inside about ---- */ .about-reviews-bar { position: relative; overflow: hidden; } .about-reviews-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--clay), var(--clay-deep)); } .about-review-platform { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .about-review-stars { display: flex; gap: 2px; color: var(--clay); font-size: 10px; } /* ---- About eyebrow with clay rule ---- */ .about-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; font-size: 12px; color: var(--clay); } .about-eyebrow-rule { display: inline-block; width: 2rem; height: 2px; flex-shrink: 0; background: linear-gradient(90deg, var(--clay), rgba(184, 92, 42, 0.15)); border-radius: 2px; } /* ---- About stat row (shared by home teaser + About Us section) ---- */ .about-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ---- About collage — decorative offset frame behind the hero image ---- */ .about-collage-framed { position: relative; } .about-collage-framed::before { content: ''; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; z-index: 0; border: 1px solid rgba(184, 92, 42, 0.30); border-radius: var(--r-lg); pointer-events: none; } .about-collage-framed > .about-img-wrap { position: relative; z-index: 1; } /* --- Collage image safety nets: never stretch or overflow any frame --- */ .about-collage .about-img-wrap, .about-collage .about-img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ---- #home-about — mirror the #about .bg-ink behaviour for the home teaser ---- */ #home-about .about-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--clay), var(--clay-deep)); } /* ============================================================ PORTFOLIO SECTION ============================================================ */ .portfolio-grid { columns: 2; column-gap: .75rem } .portfolio-card { break-inside: avoid; break-inside: avoid-column; margin-bottom: .75rem; box-shadow: var(--shadow-sm); transition: box-shadow .4s ease; } .portfolio-card:hover { box-shadow: var(--shadow-xl); } @media (min-width:640px) { .portfolio-grid { column-gap: 1rem } .portfolio-card { margin-bottom: 1rem } } @media (min-width:1024px) { .portfolio-grid { columns: 4 } } /* Portfolio top arrow badge */ .portfolio-badge { background: rgba(250, 246, 238, 0.95) !important; box-shadow: var(--shadow-sm); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ============================================================ TESTIMONIALS SECTION ============================================================ */ .testimonial-avatar { box-shadow: 0 0 0 3px rgba(184, 92, 42, 0.18), var(--shadow-sm) !important; } /* Testimonial quote mark background */ .testimonial-quote-bg { position: relative; } .testimonial-quote-bg::before { content: '\201C'; font-family: 'Fraunces', serif; font-size: 14rem; line-height: 1; color: rgba(27, 24, 19, 0.04); position: absolute; top: -2rem; left: -1rem; pointer-events: none; user-select: none; z-index: 0; } .testimonial-quote-bg>* { position: relative; z-index: 1 } /* Testimonial nav controls */ .tprev, .tnext { box-shadow: var(--shadow-xs); transition: background .25s ease, color .25s ease, box-shadow .25s ease; } .tprev:hover, .tnext:hover { box-shadow: var(--shadow-btn-ink) !important; } /* Testimonial dots */ .tdot { width: 1.5rem; height: .375rem; border: 0; background: var(--line); cursor: pointer; transition: all .3s ease; padding: 0 } .tdot.active { width: 2.9rem; background: var(--clay); box-shadow: 0 0 8px rgba(184, 92, 42, 0.35) } /* ============================================================ FEATURES / DESIGN PRINCIPLES SECTION ============================================================ */ .feature-card { transition: background .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1); } .feature-card:hover { background: var(--cream) !important; box-shadow: var(--shadow-md); transform: translateY(-2px); z-index: 2; position: relative; } .feature-icon { box-shadow: var(--shadow-xs); transition: box-shadow .3s ease, background .3s ease, border-color .3s ease; } .feature-card:hover .feature-icon { box-shadow: var(--shadow-ring-clay); border-color: rgba(184, 92, 42, 0.4) !important; background: rgba(184, 92, 42, 0.05); } /* ============================================================ ESTIMATE / PROCESS SECTION ============================================================ */ .process-card { transition: background .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1); } .process-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); z-index: 2; position: relative; } .process-icon { box-shadow: var(--shadow-sm); transition: box-shadow .3s ease; } .process-card:hover .process-icon { box-shadow: var(--shadow-md); } /* Package (pricing) cards */ .package-card { transition: background .3s ease, box-shadow .35s ease, transform .3s cubic-bezier(.22, .61, .36, 1); } .package-card:hover { background: var(--cream) !important; box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Package icon */ .package-icon { box-shadow: var(--shadow-xs); transition: box-shadow .3s ease, border-color .3s ease; } .package-card:hover .package-icon { box-shadow: var(--shadow-ring-clay); border-color: rgba(184, 92, 42, 0.35) !important; } /* ============================================================ CTA SECTION ============================================================ */ .cta-vignette { background: radial-gradient(ellipse at 70% 50%, transparent 30%, rgba(27, 24, 19, 0.55) 100%); } .cta-heading { text-shadow: 0 2px 12px rgba(27, 24, 19, 0.35); } /* ============================================================ FOOTER / CONTACT ============================================================ */ footer input:focus { outline: none } .social-icon { box-shadow: 0 0 0 1px rgba(250, 246, 238, 0.06), var(--shadow-xs); transition: border-color .3s ease, color .3s ease, box-shadow .3s ease; } .social-icon:hover { box-shadow: 0 0 0 1px rgba(184, 92, 42, 0.4), var(--shadow-ring-clay) !important; } /* ============================================================ BUTTON SYSTEM — Premium shadows ============================================================ */ /* bg-ink primary buttons */ .btn-primary { box-shadow: var(--shadow-btn-ink); transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .2s ease !important; } .btn-primary:hover { box-shadow: var(--shadow-glow-clay) !important; } .btn-primary:active { transform: translateY(1px) } /* bg-clay CTA button */ .btn-clay { box-shadow: var(--shadow-btn-clay); transition: background .3s ease, box-shadow .3s ease !important; } .btn-clay:hover { box-shadow: 0 8px 32px -6px rgba(143, 69, 30, 0.55), 0 2px 8px rgba(184, 92, 42, 0.25) !important; } /* Border/outline buttons */ .btn-outline-paper { transition: border-color .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease !important; } .btn-outline-paper:hover { box-shadow: 0 0 0 1px rgba(250, 246, 238, 0.5), var(--shadow-sm) !important; } /* ============================================================ MARQUEE ============================================================ */ .marquee { display: flex; width: max-content; animation: marquee 34s linear infinite; will-change: transform; white-space: nowrap } .marquee:hover { animation-play-state: paused } .marquee-group { display: flex; align-items: center; white-space: nowrap } .marquee-word { padding: 0 1.25rem; font-weight: 400; color: rgba(27, 24, 19, 0.65); transition: color .3s ease; } .marquee-word:hover { color: var(--ink) } .marquee-sep { color: var(--clay); padding: 0 .25rem; opacity: 0.8 } @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } .marquee-track { position: relative; overflow: hidden } .marquee-track::before, .marquee-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none } .marquee-track::before { left: 0; background: linear-gradient(to right, #FAF6EE, transparent) } .marquee-track::after { right: 0; background: linear-gradient(to left, #FAF6EE, transparent) } /* ============================================================ ACCESSIBLE FOCUS ============================================================ */ a:focus-visible, button:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; box-shadow: var(--shadow-ring-clay) } /* ============================================================ ENQUIRY MODAL ============================================================ */ #enquiry-modal { transition: opacity .3s ease } #enquiry-modal.hidden { display: none } #enquiry-modal.open { display: block; opacity: 1; animation: fadeIn .3s ease } #enquiry-modal:not(.open):not(.hidden) { opacity: 0; pointer-events: none } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } .enquiry-panel { transform: translateY(0); transition: transform .35s cubic-bezier(.22, .61, .36, 1); box-shadow: var(--shadow-2xl) !important; } #enquiry-modal.open .enquiry-panel { animation: panelIn .35s cubic-bezier(.22, .61, .36, 1) } @keyframes panelIn { from { transform: translateY(18px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } /* Form fields (match editorial style) */ .enquiry-input { width: 100%; background: transparent; border: 1px solid rgba(27, 24, 19, 0.22); padding: .7rem .9rem; font-size: 15px; color: var(--ink); transition: border-color .3s ease, box-shadow .3s ease; } .enquiry-input::placeholder { color: rgba(110, 103, 92, .5) } .enquiry-input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(184, 92, 42, 0.12); } .enquiry-input:focus-visible { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(184, 92, 42, 0.12); } select.enquiry-input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; } .enquiry-input::-ms-expand { display: none } input.enquiry-input:valid:not(:placeholder-shown), textarea.enquiry-input:valid:not(:placeholder-shown), select.enquiry-input:valid:not([value=""]) { border-color: var(--clay) } button.enquiry-input:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px } body.modal-open { overflow: hidden } /* Enquiry modal close button */ #enquiry-close { box-shadow: var(--shadow-xs); transition: background .25s ease, color .25s ease, box-shadow .25s ease; } #enquiry-close:hover { box-shadow: var(--shadow-btn-ink); } /* Enquiry submit button */ button[type="submit"].enquiry-input { box-shadow: var(--shadow-btn-ink); transition: background .3s ease, color .3s ease, box-shadow .3s ease !important; } button[type="submit"].enquiry-input:hover { box-shadow: var(--shadow-glow-clay) !important; } /* ============================================================ ENQUIRY STATUS ============================================================ */ .enquiry-status { margin-top: 1rem; padding: .85rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--clay); font-size: 14px; line-height: 1.5; color: var(--ink); display: flex; align-items: flex-start; gap: .7rem; border-radius: 0; box-shadow: var(--shadow-xs); } .enquiry-status:empty { display: none } .enquiry-status.is-sending { animation: enquiryPulse .9s ease-in-out infinite } @keyframes enquiryPulse { from { opacity: .5 } to { opacity: 1 } } .enquiry-status.is-success { border-color: rgba(70, 84, 60, .3); border-left-color: var(--moss); background: #EEF1E8; color: #33432B } .enquiry-status.is-error { border-color: rgba(184, 92, 42, .4); border-left-color: var(--clay-deep); background: #FBF1E7; color: #8A4B22 } /* ============================================================ FLOATING CTA (Call + WhatsApp) Stacked at the bottom-right, fixed so it stays visible while scrolling on both mobile and desktop. ============================================================ */ .floating-cta-stack { /* Critical positioning is baked in here (with !important) so the buttons reliably stay pinned bottom-right on EVERY page, even if the Tailwind CDN utility classes are slow to load or missing. z-index sits above the fixed navbar (z-50) but below the enquiry modal (z-[100]). */ position: fixed !important; right: 1rem !important; bottom: 1.25rem !important; z-index: 70 !important; display: flex; flex-direction: column; align-items: center; gap: .75rem; } @media (min-width: 640px) { .floating-cta-stack { right: 1.5rem !important; } } /* On larger screens nudge the buttons up a little so they clear the footer/bottom bar content area nicely without overlapping it. */ @media (min-width: 1024px) { .floating-cta-stack { bottom: 1.75rem !important; } } .floating-cta { box-shadow: 0 8px 32px -4px rgba(27, 24, 19, 0.35), 0 2px 8px rgba(27, 24, 19, 0.18) !important; transition: background .3s ease, box-shadow .3s ease, transform .2s ease !important; -webkit-tap-highlight-color: transparent; will-change: transform; } .floating-cta:hover { box-shadow: var(--shadow-glow-clay) !important; transform: scale(1.05); } .floating-cta:active { transform: scale(0.97); } /* Hardened sizing/layout for the buttons themselves (not just the stack). The site loads Tailwind via the Play CDN, which compiles utility classes asynchronously in the browser. On the very first page load (cold start on shared hosting) the CDN may still be fetching, so the Tailwind classes that size the buttons (w-14 h-14 rounded-full flex items-center justify-center) may not exist yet — without these rules the collapses to 0x0 and the Call/WhatsApp buttons are invisible until a later visit has cached Tailwind. Baking the sizing in here (with !important, matching .floating-cta-stack above) makes the buttons visible on the immediate first paint, every time. */ .floating-cta-call, .floating-cta-whatsapp { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto; width: 3.5rem !important; /* = w-14 */ height: 3.5rem !important; /* = h-14 */ border-radius: 9999px !important; /* = rounded-full */ } /* Keep the icon glyph vertically centred even before Tailwind applies its own line-height/alignment defaults during first-paint. */ .floating-cta i { line-height: 1; } /* Call button — brand ink, glows clay on hover */ .floating-cta-call { background: var(--ink); color: var(--paper); } .floating-cta-call:hover { background: var(--clay); color: var(--paper); } /* WhatsApp button — recognisable green */ .floating-cta-whatsapp { background: #25D366; color: #ffffff; } .floating-cta-whatsapp:hover { background: #1ebe5b; color: #ffffff; box-shadow: 0 10px 28px -6px rgba(37, 211, 102, 0.55) !important; } /* Hide the floating CTAs while the mobile menu is open so they never overlap the menu panel or its dimmed backdrop. */ body.menu-open .floating-cta-stack { display: none !important; } /* ============================================================ PRINT ============================================================ */ @media print { #navbar, .marquee-track, #mobile-menu, body::before { display: none !important } #enquiry-modal { display: none !important } } /* ============================================================ SMALL SCREENS ============================================================ */ @media (max-width:640px) { .marquee-track::before, .marquee-track::after { width: 36px } .eyebrow { font-size: 10px } } /* ============================================================ ENQUIRY MODAL – MOBILE (single-screen, centred, no scroll) ============================================================ */ @media (max-width:640px) { /* Centre the panel within the real (browser-chrome-aware) viewport so it is never pushed too high, and keep a little breathing room. */ #enquiry-modal .enquiry-wrap { height: 100dvh; min-height: 100dvh; padding: .7rem; align-items: center; justify-content: center; } /* Panel sizes to its content – no internal scrollbar. */ #enquiry-modal .enquiry-panel { max-height: none !important; overflow: visible !important; } /* Compact the panel padding. */ #enquiry-modal .enquiry-body { padding: 1.1rem 1.15rem 1.4rem; } /* Slightly tighten the header. */ #enquiry-modal .enquiry-body .eyebrow { font-size: 10px; } #enquiry-modal #enquiry-title { font-size: 1.3rem; margin-top: .5rem; } #enquiry-modal #enquiry-form { margin-top: .8rem; } /* Keep Name/Phone and Email/Service two-up on small screens to save vertical space (avoids stacking into tall rows). */ #enquiry-modal #enquiry-form .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } /* Tighten the vertical rhythm between the form's fields. */ #enquiry-modal #enquiry-form .space-y-3> :not([hidden])~ :not([hidden]) { margin-top: .45rem !important; } /* Compact the inputs. */ #enquiry-modal .enquiry-input { padding: .55rem .7rem; font-size: 14px; } /* Smaller close button. */ #enquiry-modal #enquiry-close { top: .65rem; right: .65rem; width: 2.5rem; height: 2.5rem; } /* Status message and footer links tightened. */ #enquiry-modal #enquiry-status { margin-top: .5rem; } #enquiry-modal .enquiry-body>div:last-child { margin-top: .7rem; } } /* ============================================================ UI POLISH — MODERN PREMIUM REFRESH ============================================================ */ :root { --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 18px; --r-xl: 24px; --shadow-card: 0 1px 2px rgba(27, 24, 19, 0.04), 0 12px 40px -12px rgba(27, 24, 19, 0.16), 0 2px 8px rgba(27, 24, 19, 0.05); --shadow-card-hover: 0 2px 6px rgba(27, 24, 19, 0.06), 0 20px 60px -16px rgba(27, 24, 19, 0.26), 0 6px 16px rgba(27, 24, 19, 0.08); } body { background-color: var(--paper); } .eyebrow { gap: .6rem; } .eyebrow::before { width: 1.75rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--clay), var(--clay-deep)); box-shadow: 0 0 8px rgba(184, 92, 42, 0.3); } /* ---------- BUTTON SYSTEM ---------- */ .enquiry-btn, .hero-cta, .btn-primary, .btn-clay, .btn-outline-paper, .hero-call-phone { border-radius: var(--r-sm); } .enquiry-btn, .hero-cta, .btn-primary { box-shadow: 0 1px 2px rgba(27, 24, 19, 0.06), 0 6px 20px -6px rgba(27, 24, 19, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .enquiry-btn, .hero-cta, .btn-primary { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.04)); } .btn-clay { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.06)); } .enquiry-btn:hover, .hero-cta:hover, .btn-primary:hover, .btn-clay:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(27, 24, 19, 0.10), 0 16px 44px -10px rgba(143, 69, 30, 0.40), 0 4px 12px rgba(184, 92, 42, 0.20) !important; } .btn-primary:active, .btn-clay:active, .enquiry-btn:active, .hero-cta:active { transform: translateY(0); } .btn-outline-paper { box-shadow: 0 1px 2px rgba(27, 24, 19, 0.05); } .btn-outline-paper:hover { transform: translateY(-2px); box-shadow: 0 6px 24px -6px rgba(27, 24, 19, 0.35) !important; } .hero-cta { border-radius: var(--r-md); padding: .95rem 1.7rem; box-shadow: 0 6px 24px -8px rgba(27, 24, 19, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); } .hero-cta:hover { background: linear-gradient(180deg, #C56A38, #A85124); } /* ---------- Navigation ---------- */ .enquiry-nav-btn { border-radius: 999px; padding-left: 1.35rem; padding-right: 1.35rem; } .enquiry-nav-btn:hover { box-shadow: 0 6px 24px -8px rgba(184, 92, 42, 0.45), 0 2px 8px rgba(27, 24, 19, 0.14) !important; } #navbar.scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 28px -8px rgba(27, 24, 19, 0.14); } .mobile-menu-panel { border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 40px 80px -24px rgba(27, 24, 19, 0.42), 0 12px 32px -12px rgba(27, 24, 19, 0.22); } .mobile-enquiry { border-radius: var(--r-sm); } /* ---------- Hero ---------- */ .hero-slide-content .eyebrow { color: #E8A37B; } .hero-slide-btn { border-radius: 999px; box-shadow: 0 6px 20px -6px rgba(27, 24, 19, 0.3); } .hero-slider-dots { gap: .45rem; } .hdot, .hdot.active { border-radius: 99px; } /* ============================================================ HERO STAT STRIP — Floating Premium Card & Responsive Grid ============================================================ */ .stat-strip-container { position: relative; z-index: 20; margin-top: -2.25rem; /* Mobile overlap */ transition: margin-top 0.4s ease; } @media (min-width: 640px) { .stat-strip-container { margin-top: -3.5rem; /* Tablet overlap */ } } @media (min-width: 1024px) { .stat-strip-container { margin-top: -4.5rem; /* Desktop overlap */ } } .stat-strip-card { background: rgba(250, 246, 238, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(27, 24, 19, 0.12); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.85); overflow: hidden; transition: box-shadow 0.3s ease, border-color 0.3s ease; } .stat-strip-card:hover { box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.95); border-color: rgba(27, 24, 19, 0.2); } .stat-strip-grid { display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .stat-strip-grid { grid-template-columns: repeat(3, 1fr); } } .stat-strip-item { padding: 2.25rem 1.5rem; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: background-color 0.3s ease; } .stat-strip-item:hover { background-color: rgba(184, 92, 42, 0.025); } /* Vertical borders on mobile, horizontal on desktop */ .stat-strip-item:not(:last-child) { border-bottom: 1px solid rgba(27, 24, 19, 0.08); } @media (min-width: 768px) { .stat-strip-item { padding: 3rem 2rem; } .stat-strip-item:not(:last-child) { border-bottom: none; border-right: 1px solid rgba(27, 24, 19, 0.08); } } .stat-num-wrapper { display: flex; align-items: baseline; justify-content: center; } .stat-strip-item:hover .stat-num { transform: scale(1.05); } .stat-label { margin-top: 0.75rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.22em; line-height: 1.4; text-align: center; transition: color 0.3s ease; } .stat-strip-item:hover .stat-label { color: var(--clay); } /* ---------- About ---------- */ .about-img { border-radius: var(--r-md); } .about-img:first-child { border-radius: var(--r-lg); } #about .bg-ink { border-radius: var(--r-lg); box-shadow: var(--shadow-card-hover); position: relative; overflow: hidden; } #about .bg-ink::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--clay), var(--clay-deep)); } .principle-row { border-radius: var(--r-sm); } /* ---------- Services ---------- */ .service-row { border-radius: var(--r-sm); padding-left: .5rem; padding-right: .5rem; } .service-row>span:last-child { border-radius: var(--r-sm); } .service-row:hover { background: linear-gradient(90deg, rgba(184, 92, 42, 0.05), rgba(184, 92, 42, 0.01)); box-shadow: inset 3px 0 0 var(--clay), inset 0 0 40px -30px rgba(184, 92, 42, 0.35); } .service-tag { border-radius: 999px; } #services-preview { border-radius: var(--r-lg); box-shadow: var(--shadow-card-hover); } /* Package price emphasis */ .package-card .md\:text-right p.font-display.text-3xl, .package-card p.font-display.text-3xl { letter-spacing: -0.02em; color: var(--clay-deep); } /* Section heading accent word = clay gradient */ h2 em, h1 em, h3 em, .hero-title em { background: linear-gradient(120deg, var(--clay), var(--clay-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Keep hero em on light text legible (override back to solid warm tone) */ .hero-title em { -webkit-text-fill-color: #E8A37B; background: none; } /* ---------- Portfolio ---------- */ .portfolio-card { border-radius: var(--r-md); box-shadow: var(--shadow-card); } .portfolio-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); } .portfolio-card img { border-radius: var(--r-md); } .portfolio-badge { border-radius: 999px; } /* ---------- Features / Process / Pricing ---------- */ .feature-card, .process-card, .package-card { border-radius: var(--r-md); box-shadow: var(--shadow-card); } .feature-card, .process-card { overflow: hidden; } .feature-card:hover, .process-card:hover, .package-card:hover { box-shadow: var(--shadow-card-hover); } .package-card[class*="bg-moss"] { border-color: rgba(184, 92, 42, 0.28) !important; } /* Featured package ribbon */ .package-ribbon { border-radius: var(--r-pill, 999px); z-index: 2; } .feature-icon, .process-icon, .package-icon { border-radius: var(--r-sm); } .package-icon, .feature-icon { background: linear-gradient(180deg, rgba(184, 92, 42, 0.06), rgba(184, 92, 42, 0.0)); } /* ---------- Testimonials ---------- */ .tprev, .tnext, .testimonial-avatar { border-radius: 999px; } /* ---------- CTA ---------- */ .btn-clay, .btn-outline-paper { border-radius: var(--r-sm); } /* ---------- Footer ---------- */ .social-icon { border-radius: var(--r-sm); } #contact .social-icon { border-radius: 999px; } /* ---------- Forms & modal ---------- */ .enquiry-panel { border-radius: var(--r-lg); box-shadow: 0 40px 120px -20px rgba(27, 24, 19, 0.55), 0 12px 32px -12px rgba(27, 24, 19, 0.28); } .enquiry-input { border-radius: var(--r-sm); } .enquiry-input:focus, .enquiry-input:focus-visible { border-color: var(--clay); box-shadow: 0 0 0 4px rgba(184, 92, 42, 0.14), 0 2px 8px rgba(184, 92, 42, 0.06); } #enquiry-close { border-radius: 999px; } button[type="submit"].enquiry-input { border-radius: var(--r-sm); } .enquiry-status { border-radius: var(--r-sm); } /* ============================================================ RESPONSIVE / MOBILE POLISH ============================================================ */ @media (max-width:1023px) { .service-row { gap: 1rem; } .service-row>span:last-child { width: 2.5rem; height: 2.5rem; } } @media (max-width:639px) { .package-card { padding: 1.25rem; } .portfolio-grid { column-gap: .5rem; } .portfolio-card { margin-bottom: .5rem; } .hero-actions { gap: .75rem; } .hero-cta, .hero-call { flex: 1 1 100%; justify-content: center; } } section[id], #home, #about, #services, #portfolio, #estimate, #contact { scroll-margin-top: 6.5rem; } /* ============================================================ PAGE HERO — compact banner for inner pages (About, Services, etc.) ============================================================ */ .page-hero { position: relative; overflow: hidden; /* clips the absolutely-positioned */ isolation: isolate; /* self-contained z-index stacking context */ padding-top: calc(var(--topbar-h) + 4rem + 4rem); padding-bottom: 5rem; background: linear-gradient(160deg, var(--cream) 0%, var(--paper) 60%); } .page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231B1813' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--line), transparent); } .page-hero-inner { position: relative; max-width: 88rem; margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 640px) { .page-hero-inner { padding: 0 1.5rem; } } @media (min-width: 1024px) { .page-hero-inner { padding: 0 2.5rem; } } .page-hero-title { margin-top: 1.25rem; font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); } .page-hero-subtitle { margin-top: 1.5rem; max-width: 44rem; font-size: 1.125rem; line-height: 1.7; color: var(--ink-soft); } @media (max-width: 639px) { .page-hero { padding-top: calc(var(--topbar-h-sm) + 4rem + 3rem); padding-bottom: 3rem; } } /* ============================================================ HOME — WHY CHOOSE US FEATURE CARDS ============================================================ */ .home-feature-card { background: var(--paper); border: 1px solid rgba(27, 24, 19, 0.08); border-radius: 0.875rem; padding: 1.75rem; box-shadow: 0 1px 3px rgba(27,24,19,0.05), 0 8px 24px -8px rgba(27,24,19,0.10); transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease; } .home-feature-card:hover { box-shadow: 0 2px 6px rgba(27,24,19,0.06), 0 20px 40px -12px rgba(27,24,19,0.18); transform: translateY(-3px); border-color: rgba(184, 92, 42, 0.18); } .home-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: rgba(184, 92, 42, 0.08); border: 1px solid rgba(184, 92, 42, 0.15); border-radius: 0.625rem; color: var(--clay); font-size: 1rem; } /* ============================================================ HOME — SERVICES SECTION BACKGROUND ============================================================ */ .home-services-bg { background: var(--cream); } /* ============================================================ HOME — SERVICE TEASER CARDS ============================================================ */ .home-service-card { display: flex; flex-direction: column; background: var(--paper); border-radius: 0.875rem; overflow: hidden; border: 1px solid rgba(27, 24, 19, 0.07); box-shadow: 0 1px 3px rgba(27,24,19,0.04), 0 8px 24px -8px rgba(27,24,19,0.10); text-decoration: none; transition: box-shadow 0.4s ease, transform 0.4s ease; } .home-service-card:hover { box-shadow: 0 4px 12px rgba(27,24,19,0.08), 0 24px 48px -12px rgba(27,24,19,0.22); transform: translateY(-4px); } .home-service-img-wrap { position: relative; width: 100%; height: 14rem; overflow: hidden; background: var(--cream); } .home-service-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,24,19,0.35) 0%, transparent 60%); } .home-service-index { position: absolute; top: 0.875rem; left: 0.875rem; font-family: 'Fraunces', Georgia, serif; font-size: 0.75rem; color: rgba(250, 246, 238, 0.9); background: rgba(27, 24, 19, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 0.25rem 0.625rem; border-radius: 999px; letter-spacing: 0.08em; } .home-service-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .home-service-more { display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 600; color: var(--clay); letter-spacing: 0.03em; margin-top: auto; } /* ============================================================ HOME — ABOUT SECTION BACKGROUND ============================================================ */ .home-about-bg { background: var(--paper); position: relative; } .home-about-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 10% 50%, rgba(184, 92, 42, 0.04) 0%, transparent 70%); pointer-events: none; } /* ============================================================ HOME — PORTFOLIO TEASER CARDS ============================================================ */ .home-portfolio-card img { width: 100%; } /* ============================================================ PROCESS & FEATURE CARDS — radius + shadow polish ============================================================ */ .process-card, .feature-card { border-radius: 0.875rem; box-shadow: 0 1px 3px rgba(27,24,19,0.04), 0 4px 16px -6px rgba(27,24,19,0.10); transition: box-shadow 0.3s ease, transform 0.3s ease; } .process-card:hover, .feature-card:hover { box-shadow: 0 2px 8px rgba(27,24,19,0.06), 0 16px 40px -10px rgba(27,24,19,0.18); transform: translateY(-2px); } /* Remove the gap-px + bg-line grid borders, replace with card-style */ .lg\:col-span-8 > .grid.gap-px.bg-line, .sm\:grid-cols-2.gap-px.bg-line { background: transparent !important; gap: 1rem !important; } .package-card { border-radius: 0.875rem; box-shadow: 0 1px 3px rgba(27,24,19,0.04), 0 6px 20px -8px rgba(27,24,19,0.10); transition: box-shadow 0.3s ease; } .package-card:hover { box-shadow: 0 2px 8px rgba(27,24,19,0.06), 0 16px 40px -10px rgba(27,24,19,0.18); } /* ============================================================ CONTACT PAGE — DETAIL CARDS ============================================================ */ .contact-detail-card { display: flex; align-items: center; gap: 1.125rem; background: var(--paper); border: 1px solid rgba(27, 24, 19, 0.08); border-radius: 0.875rem; padding: 1.25rem 1.5rem; text-decoration: none; box-shadow: 0 1px 3px rgba(27,24,19,0.04), 0 6px 20px -8px rgba(27,24,19,0.08); transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } .contact-detail-card:hover { box-shadow: 0 2px 8px rgba(27,24,19,0.06), 0 16px 40px -10px rgba(27,24,19,0.16); transform: translateY(-2px); border-color: rgba(184, 92, 42, 0.2); } .contact-detail-icon { flex-shrink: 0; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: rgba(27, 24, 19, 0.06); border: 1px solid rgba(27, 24, 19, 0.08); border-radius: 0.75rem; color: var(--clay); font-size: 1rem; } .contact-detail-icon-whatsapp { background: rgba(37, 211, 102, 0.08); border-color: rgba(37, 211, 102, 0.15); color: #25D366; } .contact-detail-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); font-weight: 600; } .contact-detail-value { font-family: 'Fraunces', Georgia, serif; font-size: 1.125rem; color: var(--ink); margin-top: 0.125rem; } .contact-cta-box { position: relative; background: var(--paper); border: 1px solid rgba(27, 24, 19, 0.09); border-radius: 0.875rem; padding: 2.5rem; box-shadow: 0 4px 16px -6px rgba(27,24,19,0.12), 0 1px 3px rgba(27,24,19,0.06); } /* ============================================================ ABOUT SECTION — principle rows polish (no outer border) ============================================================ */ .principle-row:first-child { border-top: none; } /* Ensure the border-left doesn't collapse the row width on first row */ .principle-row:first-child { padding-top: 0; } /* ============================================================ SERVICES PAGE — enquiry button links to enquiry modal, not #estimate ============================================================ */ /* ============================================================ ACTIVE NAV LINK — mobile menu ============================================================ */ .nav-link-mobile.active { color: var(--clay) !important; font-weight: 600; } /* ============================================================ RESPONSIVE TWEAKS FOR NEW COMPONENTS ============================================================ */ @media (max-width: 639px) { .home-service-img-wrap { height: 11rem; } .page-hero-title { font-size: 2.25rem; } .contact-cta-box { padding: 1.75rem 1.25rem; } } /* ============================================================ ENQUIRY BUTTON — unified interaction & variant scoping Every "Enquiry" trigger gets one consistent pointer + focus layer. Solid CTAs keep the premium shadow/sheen (via .btn-primary); underline text-link variants (.enquiry-link) are kept clean and never inherit the solid-button lift/glow, which read as broken. ============================================================ */ .enquiry-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; } .enquiry-btn:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: var(--r-sm); } /* Text-link enquiry triggers (underline links) — strip the solid CTA sheen and the hover lift/glow applied by the generic .enquiry-btn rules defined earlier in the BUTTON SYSTEM section. */ .enquiry-link:not(.btn-primary) { background-image: none; box-shadow: none; } .enquiry-link:not(.btn-primary):hover { transform: none; box-shadow: none !important; }