:root { /* ── Unified dark system ── */ --dark-primary: #111210; --dark-secondary: #151614; --dark-elevated: #191A17; --dark-border: rgba(255,255,255,0.08); --dark-text: #F5F3EE; --dark-muted: #A9A69F; /* Warm ivory / stone / beige palette */ --bg: #F7F5F1; --section-bg: #EEEAE3; --section-alt: #EEEAE3; --white: #FFFFFF; --charcoal: #111210; --dark-section: #151614; --dark: #20201E; --black: #20201E; /* Text */ --body: #20201E; --body-secondary: #6F6C66; --grey-dark: #20201E; --muted: #6F6C66; --grey-light: #DED9D0; --grey-mid: #6F6C66; --border: #DED9D0; /* Legacy aliases kept so existing references still work */ --stone: #F7F5F1; --stone-dark: #EEEAE3; --concrete: #EEEAE3; /* Header / footer — light neutral concrete system (logo-matched) */ --hf-base: #D9D9D9; --hf-light: #E2E2E2; --hf-mid: #D2D2D2; --hf-dark: #C5C5C5; --hf-highlight: #E8E8E8; --hf-text: rgba(32,32,30,0.86); --hf-text-soft: rgba(32,32,30,0.62); --hf-text-faint: rgba(32,32,30,0.46); --hf-border: rgba(32,32,30,0.14); /* extremely subtle fine-grain noise, generated inline — no external image asset */ --hf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* shared header/footer tonal variation — fixed px sizing so it reads identically regardless of the element's height (a tall footer vs a thin navbar), kept at ~5-10% opacity so the surface stays predominantly --hf-base */ --hf-texture: var(--hf-grain), radial-gradient(circle 420px at 12% 0%, rgba(232,232,232,0.10) 0%, transparent 70%), radial-gradient(circle 420px at 88% 100%, rgba(197,197,197,0.08) 0%, transparent 70%), radial-gradient(circle 520px at 50% 50%, rgba(210,210,210,0.05) 0%, transparent 75%); /* Accent copper */ --gold: #C97A3D; --gold-hover: #B86A2D; --gold-light: #D98A4D; --gold-pale: rgba(201,122,61,0.12); --accent: #C97A3D; --accent-light: #D98A4D; /* Cards */ --card-bg: #FFFFFF; --card-heading: #20201E; --card-body: #6F6C66; /* Shadows — lighter on light bg */ --shadow-soft: 0 2px 12px rgba(32,32,30,0.08); --shadow: 0 4px 20px rgba(32,32,30,0.10); --shadow-hover: 0 16px 48px rgba(32,32,30,0.16); --shadow-lg: 0 12px 40px rgba(32,32,30,0.14); --shadow-gold: 0 8px 32px rgba(201,122,61,0.35); --shadow-card: 0 1px 4px rgba(32,32,30,0.06), 0 4px 16px rgba(32,32,30,0.08); --radius: 4px; --radius-md: 8px; --radius-lg: 12px; --transition: all 0.38s cubic-bezier(0.25,0.46,0.45,0.94); /* same timing as --transition, for nav panels that must not transition visibility/pointer-events along with it (see .dropdown / .mega-menu) */ --panel-reveal: 0.38s cubic-bezier(0.25,0.46,0.45,0.94); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; padding-top: 90px; -moz-osx-font-smoothing: grayscale; } h1,h2,h3,h4,h5,h6 { font-family: 'DM Sans',sans-serif; font-weight:500; letter-spacing:-0.025em; color: var(--dark); line-height:1.1; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } .container { max-width: 1320px; margin: 0 auto; padding: 0 40px; } .section { padding: 120px 0; } .section-sm { padding: 80px 0; } /* ─── SCROLLBAR ─── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--stone); } ::-webkit-scrollbar-thumb { background: var(--gold); } /* ─── ANIMATIONS ─── */ @keyframes fadeUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes slideRight { from { transform:translateX(-100%); } to { transform:translateX(0); } } @keyframes shimmer { 0%,100% { opacity:0.5; } 50% { opacity:1; } } @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } } @keyframes spin { to { transform:rotate(360deg); } } .animate-fadeUp { animation: fadeUp 0.85s cubic-bezier(0.25,0.46,0.45,0.94) both; } .delay-1 { animation-delay: 0.12s; } .delay-2 { animation-delay: 0.24s; } .delay-3 { animation-delay: 0.36s; } .delay-4 { animation-delay: 0.48s; } /* ─── LOADER ─── */ #loader { position:fixed; inset:0; z-index:9999; background:var(--charcoal); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:28px; transition:opacity 0.8s, visibility 0.8s; } #loader.hidden { opacity:0; visibility:hidden; } .loader-logo { color:var(--white); font-family:'DM Sans',sans-serif; font-size:2.4rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; opacity:0; animation:fadeIn 0.8s 0.3s both; } .loader-logo .loader-mark { margin-right:0.12em; } .loader-line { width:140px; height:1px; background:rgba(255,255,255,0.12); position:relative; overflow:hidden; } .loader-line::after { content:''; position:absolute; inset-y:0; left:-100%; width:100%; background:linear-gradient(90deg,transparent,var(--gold-light),transparent); animation:slideRight 1.4s 0.5s ease both; } .loader-sub { color:var(--gold-light); font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; opacity:0; animation:fadeIn 0.6s 0.8s both; font-family:'Inter',sans-serif; } /* ─── NAVBAR ─── */ #navbar { position:fixed; top:0; left:0; right:0; width:100%; z-index:9999; background-color:var(--hf-base); background-image: var(--hf-texture); border-bottom:1px solid var(--hf-border); box-shadow:none; transition:box-shadow 0.4s ease, background-color 0.4s ease; } #navbar.scrolled { background-color:var(--hf-dark); box-shadow:0 4px 20px rgba(32,32,30,0.16); } .nav-inner { display:flex; align-items:center; justify-content:space-between; height:90px; gap:20px; } .nav-logo { display:flex; align-items:center; flex-shrink:0; } .nav-logo img { display:block; height:82px; width:auto; max-width:230px; object-fit:contain; object-position:left center; } .nav-menu { display:flex; align-items:center; gap:2px; list-style:none; } /* --mega-* is the single source of truth for the panel's horizontal box: the panel itself and the hover bridge below both read it, so they can never drift apart (see the 1024px breakpoint, which narrows both at once). */ .nav-menu > li { position:relative; --mega-left:-80px; --mega-width:640px; } /* Hover bridge — trigger → panel. * * The panel hangs 10px below the trigger (`top:calc(100% + 10px)`) and slides * in from another 10px lower, so between the
  • and the panel there was a * 20px band belonging to neither. Crossing it made `li:hover` false, which * hid the panel *and* started it sliding away — the pointer could never catch * up, and whether the menu survived depended on how fast the mouse moved. * * This transparent strip is a child of the
  • , so the hoverable region from * trigger to panel is continuous and no timer is involved. It is anchored to * the
  • rather than to the panel, so it stays put while the panel animates * in and spans the whole gap from the first frame of the transition. * * The height deliberately runs past the gap and overlaps the top of the panel: * a pointer moving fast enough to jump the gap within a single frame lands on * the bridge instead of falling through to the page behind. It must stay well * short of the panel's own height (318px at 3 columns, 471px at 2) so it never * sticks out below the panel; where the two overlap the panel wins the hit * test on z-index, so panel links are unaffected. * * It exists only while the item is hovered, carries no paint, and starts at * the exact bottom edge of the nav links (the CTA buttons end there too), so * it covers nothing and can never intercept a click on a trigger or a link. */ .nav-menu > li:has(.mega-menu, .dropdown):hover::before { content:''; position:absolute; top:100%; left:var(--mega-left); width:var(--mega-width); height:120px; } .nav-menu > li > a { display:block; padding:10px 20px; font-family:'DM Sans',sans-serif; font-size:0.8125rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:rgba(32,32,30,0.84); transition:var(--transition); position:relative; } .nav-menu > li > a::after { content:''; position:absolute; bottom:6px; left:20px; right:20px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; } .nav-menu > li > a:hover::after, .nav-menu > li > a.active::after { transform:scaleX(1); } .nav-menu > li > a:hover { color:var(--gold); } /* Panel reveal — shared by .dropdown and .mega-menu. * * `transition:all` used to cover `visibility` and `pointer-events` too. Both * are discrete properties, so they flipped at the halfway mark: for the first * ~190ms of the 0.38s reveal the panel was fading in on screen but still * `visibility:hidden` / `pointer-events:none`, i.e. not hit-testable. A pointer * arriving inside that window fell through to the page behind, `li:hover` went * false and the panel closed again — the "sometimes it works" half of the bug. * * Transitioning opacity and transform explicitly leaves the motion identical, * makes the panel interactive from the first frame of the reveal, and delays * only the closing `visibility:hidden` so the fade-out still plays. */ /* Dropdown */ .dropdown { position:absolute; top:calc(100% + 10px); left:0; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-lg); min-width:210px; border-radius:var(--radius-md); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity var(--panel-reveal), transform var(--panel-reveal), visibility 0s linear 0.38s; pointer-events:none; overflow:hidden; z-index:100; } .nav-menu > li:hover .dropdown { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity var(--panel-reveal), transform var(--panel-reveal), visibility 0s; } .dropdown a { display:block; padding:13px 22px; font-family:'Inter',sans-serif; font-size:0.8rem; letter-spacing:0.03em; color:var(--body); border-bottom:1px solid var(--border); transition:var(--transition); } .dropdown a:last-child { border-bottom:none; } .dropdown a:hover { background:var(--stone); color:var(--gold); padding-left:28px; } /* Mega Menu */ .mega-menu { position:absolute; top:calc(100% + 10px); left:var(--mega-left); background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-lg); width:var(--mega-width); border-radius:var(--radius-md); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity var(--panel-reveal), transform var(--panel-reveal), visibility 0s linear 0.38s; pointer-events:none; padding:32px; z-index:100; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .nav-menu > li:hover .mega-menu { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity var(--panel-reveal), transform var(--panel-reveal), visibility 0s; } .mega-col h5 { font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); } .mega-col a { display:block; padding:7px 0; font-family:'Inter',sans-serif; font-size:0.8rem; color:var(--body); transition:var(--transition); border-bottom:none; } .mega-col a:hover { color:var(--gold); padding-left:8px; } .nav-ctas { display:flex; align-items:center; gap:10px; flex-shrink:0; } .btn-cta { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:var(--radius); font-family:'DM Sans',sans-serif; font-size:0.8125rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; transition:var(--transition); cursor:pointer; border:none; } .btn-wa { background:#25D366; color:var(--white); } .btn-wa:hover { background:#1da851; transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,211,102,0.35); } .btn-call { background:var(--gold); color:var(--white); } .btn-call:hover { background:var(--gold-light); transform:translateY(-1px); box-shadow:var(--shadow-gold); } /* Hamburger */ .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; } .hamburger span { display:block; width:26px; height:1.5px; background:var(--dark); transition:var(--transition); } .hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity:0; } .hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); } /* Mobile Nav */ .mobile-nav { display:none; position:fixed; top:90px; left:0; right:0; bottom:0; background:var(--white); z-index:999; overflow-y:auto; padding:32px; flex-direction:column; gap:4px; transform:translateX(100%); transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94); } .mobile-nav.open { transform:translateX(0); display:flex; } .mobile-nav a { display:block; padding:16px 0; font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--dark); border-bottom:1px solid var(--border); transition:var(--transition); } .mobile-nav a:hover { color:var(--gold); padding-left:10px; } .mobile-nav-ctas { display:flex; gap:10px; margin-top:24px; } .mobile-nav-ctas .btn-cta { flex:1; justify-content:center; } /* ─── PAGES ─── */ .page { display:none; } .page.active { display:block; } /* ─── HERO SLIDER ─── */ /* * Layout zones (top → bottom): * [90px navbar + 28px gap] header clearance ← padding-top * [flex] hero content — centered here * [128px] dots zone + breathing room ← padding-bottom * * padding-top must always be >= the 90px fixed navbar, otherwise the top of * the hero brand block slides under the header and gets cut by overflow:hidden. * `safe center` keeps that true even when the content is taller than the * available space — overflow then falls out of the bottom, never the top. * * Font sizes use min(vw, vh) so the title never outgrows the * available vertical space regardless of viewport shape. */ .hero { position:relative; height:100vh; min-height:560px; overflow:hidden; display:flex; align-items:center; /* fallback for browsers without the `safe` keyword */ align-items:safe center; justify-content:center; margin-top:-90px; padding-top:118px; /* 90px navbar + 28px breathing room */ padding-bottom:128px; box-sizing:border-box; } .hero-slides { position:absolute; inset:0; } .hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 1.2s cubic-bezier(0.4,0,0.2,1); } .hero-slide.active { opacity:1; } .hero-overlay { position:absolute; inset:0; z-index:1; background:rgba(0,0,0,0.45); } /* ── ARROWS ── */ .hero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); background:rgba(0,0,0,0.28); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; color:#FFFFFF; font-size:1rem; cursor:pointer; transition:background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .hero-arrow:hover { background:var(--gold); border-color:var(--gold); transform:translateY(-50%) scale(1.08); } .hero-arrow-prev { left:28px; } .hero-arrow-next { right:28px; } /* ── DOTS ── */ .hero-dots { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:10; display:flex; align-items:center; gap:10px; } .hero-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.38); border:none; cursor:pointer; transition:background 0.35s ease, width 0.35s ease, border-radius 0.35s ease; padding:0; } .hero-dot.active { background:var(--gold); width:26px; border-radius:4px; } /* ── CONTENT ── */ .hero-content { position:relative; z-index:5; text-align:center; color:#FFFFFF; padding:0 100px; max-width:960px; width:100%; /* flex-shrink allows the block to compress if needed */ flex-shrink:1; min-height:0; } .hero-content.slide-anim .hero-brand { animation:heroTextUp 0.75s 0s both cubic-bezier(0.25,0.46,0.45,0.94); } .hero-content.slide-anim .hero-eyebrow { animation:heroTextUp 0.75s 0.05s both cubic-bezier(0.25,0.46,0.45,0.94); } .hero-content.slide-anim .hero-title { animation:heroTextUp 0.75s 0.18s both cubic-bezier(0.25,0.46,0.45,0.94); } .hero-content.slide-anim .hero-sub { animation:heroTextUp 0.75s 0.30s both cubic-bezier(0.25,0.46,0.45,0.94); } .hero-content.slide-anim .hero-btns { animation:heroTextUp 0.75s 0.42s both cubic-bezier(0.25,0.46,0.45,0.94); } @keyframes heroTextUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } } .hero-brand { display:flex; flex-direction:column; align-items:center; margin-bottom:clamp(24px, 4.2vh, 40px); } .hero-logo { display:flex; justify-content:center; margin-bottom:20px; } .hero-logo img { width:240px; height:auto; /* The logo asset carries "A unit of Mothi Ceramics" baked in under the wordmark. In the hero that duplicates .hero-brand-tag below the divider, so crop it off: the asset is 1182x353 with the wordmark in rows 1-261 and the subtitle in rows 303-352, and 1182x263 keeps the wordmark band only. `cover` + top alignment trims from the bottom without rescaling the wordmark, so it stays exactly the size it renders at today. */ aspect-ratio:1182 / 263; object-fit:cover; object-position:top center; /* recolors the real logo asset (same source as the header) to white for the dark hero backdrop */ filter:brightness(0) invert(1); } .hero-divider-line { width:170px; height:1px; background:rgba(255,255,255,0.2); margin-bottom:16px; } .hero-brand-tag { font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.21em; text-transform:uppercase; color:var(--gold-light); } .hero-eyebrow { display:inline-block; font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-light); margin-bottom:clamp(20px, 3.8vh, 36px); border-bottom:1px solid rgba(201,122,61,0.5); padding-bottom:12px; } .hero-title { font-family:'DM Sans',sans-serif; font-size:clamp(3.2rem, 5vw, 5.4rem); line-height:1.02; letter-spacing:-0.04em; color:#FFFFFF; margin-bottom:clamp(16px, 3.2vh, 32px); font-weight:500; } .hero-title em { font-style:normal; color:#FFFFFF; } .hero-title span{ color:var(--gold-light); } .hero-sub { font-family:'Inter',sans-serif; font-size:clamp(0.88rem, min(1.5vw, 2vh), 1rem); color:rgba(255,255,255,0.6); max-width:560px; margin-left:auto; margin-right:auto; margin-bottom:clamp(32px, 5.5vh, 52px); font-weight:400; letter-spacing:0; line-height:1.7; } /* CTA group — also the positioning context for the scroll indicator, which is a flex item sitting in the gap between the two buttons (see .hero-scroll). */ .hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:6; } .btn-primary { padding:15px 44px; background:#FFFFFF; color:#1A1D20; font-family:'DM Sans',sans-serif; font-size:0.8125rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; border:none; cursor:pointer; border-radius:var(--radius); transition:var(--transition); } .btn-primary:hover { background:var(--gold); color:#FFFFFF; transform:translateY(-2px); box-shadow:var(--shadow-gold); } .btn-outline-white { padding:15px 44px; background:transparent; color:#FFFFFF; font-family:'DM Sans',sans-serif; font-size:0.8125rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; border:1px solid rgba(255,255,255,0.5); cursor:pointer; border-radius:var(--radius); transition:var(--transition); } .btn-outline-white:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.85); transform:translateY(-2px); } /* ── SCROLL INDICATOR — flex item in the gap between the two CTA buttons ── * * It used to be `position:absolute; bottom:68px` against the hero, i.e. pinned * to the hero's bottom edge while the CTA row's position depends on the content * height vs the viewport. On shorter viewports the content grows past centre and * the button row descends into that bottom zone, so label and line landed on top * of the buttons. Horizontally it was centred on the hero, not on the real gap — * and the gap centre is offset whenever the two button labels differ in width * (both texts are CMS-editable, so that offset is not a fixed number). * * As a flex item between the two buttons it is always centred in the real gap * and always aligned to the row, at any viewport size and for any button text. * The label is the only in-flow part, so the row height — and therefore the * stretched button height — is unchanged; the line is absolutely positioned * below the label and adds no height. */ .hero-scroll { position:relative; flex:0 0 auto; align-self:center; /* centre the label on the button row */ margin:0 clamp(4px, 1vw, 14px); /* clearance around the label, on top of the row's 16px gap */ display:flex; flex-direction:column; align-items:center; opacity:0; animation:fadeIn 1s 2.4s both; pointer-events:none; } .hero-scroll span { font-family:'Inter',sans-serif; font-size:0.56rem; letter-spacing:0.38em; color:rgba(255,255,255,0.42); text-transform:uppercase; padding-left:0.38em; /* balances the trailing letter-space so the word is optically centred */ } .scroll-line { position:absolute; top:calc(100% + 10px); /* starts under the label, runs down past the row */ left:50%; transform:translateX(-50%); width:1px; height:40px; background:rgba(255,255,255,0.18); overflow:hidden; } .scroll-line::after { content:''; position:absolute; top:-100%; left:0; right:0; height:100%; background:var(--gold-light); animation:scrollDown 1.8s 2.4s ease-in-out infinite; } @keyframes scrollDown { from{top:-100%;} to{top:200%;} } /* ── RESPONSIVE ── */ @media(max-width:1200px) { .hero-content { padding:0 80px; } } @media(max-width:1024px) { .hero-content { padding:0 64px; } } @media(max-width:768px) { .hero { padding-top:110px; padding-bottom:80px; } /* 90px navbar + 20px */ .hero-content { padding:0 52px; } .hero-arrow { width:40px; height:40px; font-size:0.85rem; } .hero-arrow-prev { left:12px; } .hero-arrow-next { right:12px; } .hero-scroll { display:none; } .hero-dots { bottom:20px; } .hero-logo img { width:210px; height:auto; } .hero-divider-line { width:150px; } } @media(max-width:480px) { .hero { padding-top:106px; padding-bottom:70px; } /* 90px navbar + 16px */ .hero-content { padding:0 20px; } .hero-btns { flex-direction:column; align-items:center; gap:12px; } .hero-dots { bottom:18px; } .hero-logo img { width:180px; height:auto; } .hero-divider-line { width:130px; } .hero-brand-tag { font-size:0.7rem; letter-spacing:0.16em; } } /* Short viewports (landscape phones, small laptops). Kicks in at 640px so the compact spacing takes over *before* the content grows past the hero box — with the header clearance reserved at the top, anything that no longer fits would otherwise spill off the bottom. */ @media(max-height:640px) { .hero { padding-top:102px; padding-bottom:70px; } /* 90px navbar + 12px */ .hero-eyebrow { margin-bottom:8px; } .hero-brand { margin-bottom:16px; } .hero-logo img { width:190px; height:auto; } .hero-logo { margin-bottom:12px; } } @media(max-height:600px) { .hero-scroll { display:none; } } @media(max-height:500px) { .hero { padding-top:98px; padding-bottom:60px; } /* 90px navbar + 8px */ .hero-sub { display:none; } /* drop subheading on very short screens */ } /* ─── SECTION HEADER ─── */ .section-header { text-align:center; margin-bottom:72px; } .section-eyebrow { display:inline-block; font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; border-bottom:1px solid var(--gold-pale); padding-bottom:10px; } .section-title { font-family:'DM Sans',sans-serif; font-size:clamp(2.2rem,4vw,3.8rem); color:var(--dark); margin-bottom:20px; font-weight:500; letter-spacing:-0.025em; line-height:1.1; } .section-divider { width:1px; height:56px; background:linear-gradient(to bottom,transparent,var(--gold),transparent); margin:0 auto 24px; } .section-sub { font-family:'Inter',sans-serif; font-size:0.92rem; color:var(--body-secondary); max-width:500px; margin:0 auto; line-height:1.95; } /* ─── BRAND SHOWCASE ─── */ .brands-section { background:#111210; padding-bottom:80px; } /* Section heading overrides — dark background requires light text */ .brands-section .section-title { color:#FFFFFF; } .brands-section .section-sub { color:rgba(255,255,255,0.55); } .brands-section .section-eyebrow { color:var(--gold); border-bottom-color:rgba(201,122,61,0.35); } .brands-section .section-divider { background:linear-gradient(to bottom,transparent,var(--gold),transparent); } .brands-tabs { display:flex; justify-content:center; gap:6px; margin-bottom:52px; flex-wrap:wrap; } .brand-tab { padding:10px 26px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:40px; font-size:0.73rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.72); cursor:pointer; transition:var(--transition); } .brand-tab.active, .brand-tab:hover { background:var(--accent); color:var(--white); border-color:var(--accent); box-shadow:0 4px 16px rgba(201,122,61,0.3); } .brands-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; } .brand-logo { height: 118px; display: flex; align-items: center; justify-content: center; padding: 12px 14px; background: #EDE8DF; border-radius: 8px; margin-bottom: 12px; overflow: hidden; } .brand-logo img { width: 88%; height: 88%; object-fit: contain; object-position: center; background: transparent !important; transition: transform 0.4s ease; } .logo-light { filter: none; } .logo-normal { filter: none; } /* ─── BRAND-SPECIFIC ADJUSTMENTS ─── Sizing is generic (.brand-logo img above scales every logo to 88% of the container, preserving its own aspect ratio via object-fit:contain) so it adapts to any brand automatically. There are deliberately no per-brand colour filters left. `.brand-logo--artize` used to carry `contrast(1.3) brightness(0.78) saturate(1.2)` to darken a pale logo against the light card — but the thumbnail now comes from the CMS and Artize's is gold on black, so the filter was dimming an already-dark mark and making it harder to read, not easier. A filter keyed to a brand name outlives the artwork it was tuned for; correct the source image in the CMS instead. */ .brand-card { position:relative; overflow:hidden; background:#FFFFFF; min-height:200px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); transition:background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94); } /* Subtle warm copper shimmer on hover */ .brand-card::before { content:''; position:absolute; inset:0; background:linear-gradient(145deg, rgba(201,122,61,0.0) 0%, rgba(201,122,61,0.05) 100%); opacity:0; transition:opacity 0.35s ease; pointer-events:none; } /* Top copper accent line on hover */ .brand-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:0; transition:opacity 0.35s ease; } .brand-card:hover { background:#FDFAF6; border-color:rgba(201,122,61,0.35); box-shadow:0 8px 32px rgba(32,32,30,0.12), 0 0 0 1px rgba(201,122,61,0.12); transform:translateY(-4px); } .brand-card:hover::before { opacity:1; } .brand-card:hover::after { opacity:1; } .brand-card-text { position:relative; z-index:1; text-align:center; font-family:'DM Sans',sans-serif; padding:0 16px; } .brand-card-name { font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:500; letter-spacing:-0.01em; color:var(--dark); transition:color 0.3s ease; } .brand-card-cat { display:block; font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--body-secondary); margin-top:5px; line-height:1.4; transition:color 0.3s ease; } .brand-card:hover .brand-card-name { color:var(--gold); } .brand-card:hover .brand-card-cat { color:var(--body-secondary); } .brand-card:hover .brand-logo img { transform:scale(1.05); filter:none !important; } /* ─── PRODUCT CATEGORIES ─── */ .categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:2px; } .cat-card { position:relative; overflow:hidden; aspect-ratio:3/4; cursor:pointer; transition:var(--transition); } .cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 0.85s cubic-bezier(0.25,0.46,0.45,0.94); } .cat-card:hover img { transform:scale(1.09); } .cat-card-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(20,20,20,0.88) 0%, rgba(20,20,20,0.18) 55%, transparent 100%); } .cat-card-content { position:absolute; bottom:0; left:0; right:0; padding:40px 36px; transform:translateY(12px); transition:var(--transition); } .cat-card:hover .cat-card-content { transform:translateY(0); } .cat-card-title { font-family:'DM Sans',sans-serif; font-size:1.55rem; color:var(--white); font-weight:600; letter-spacing:-0.02em; } .cat-card-sub { font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.12em; color:rgba(255,255,255,0.62); text-transform:uppercase; margin-top:6px; } .cat-card-arrow { display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-size:0.7rem; color:var(--gold-light); margin-top:18px; letter-spacing:0.1em; text-transform:uppercase; opacity:0; transform:translateX(-12px); transition:var(--transition); } .cat-card:hover .cat-card-arrow { opacity:1; transform:translateX(0); } /* ─── WHY CHOOSE US ─── */ .why-section { background:#151614; color:var(--white); } .why-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px; } .why-card { text-align:center; padding:44px 28px; border:1px solid rgba(168,154,140,0.12); border-radius:var(--radius-lg); transition:var(--transition); position:relative; overflow:hidden; background:rgba(255,255,255,0.025); } .why-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(140,123,104,0.18),transparent 70%); opacity:0; transition:var(--transition); } .why-card:hover::before { opacity:1; } .why-card:hover { transform:translateY(-5px); border-color:rgba(168,154,140,0.35); box-shadow:0 12px 40px rgba(0,0,0,0.35); } .why-icon { width:60px; height:60px; border-radius:50%; border:1px solid rgba(168,154,140,0.35); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-size:1.4rem; color:var(--accent-light); transition:var(--transition); } .why-card:hover .why-icon { background:var(--accent); border-color:var(--accent); color:var(--white); } .why-title { font-family:'DM Sans',sans-serif; font-weight:600; font-size:1rem; letter-spacing:-0.02em; color:rgba(255,255,255,0.92); margin-bottom:10px; } .why-text { font-size:0.82rem; color:rgba(255,255,255,0.48); line-height:1.85; } /* ─── STATS ─── */ .stats-section { background:#151614; } /* auto-fit, not auto-fill: auto-fill keeps the tracks that no card occupies, so a 1240px container laid out six 206px tracks for four cards — the four sat left-aligned two tracks short of the grid's own top/left border, and each was 146-158px of usable width when 1240px was available. auto-fit collapses the empty tracks, so the four cards divide the full row, stay equal width, and a long value like 100000+ gets the room it needs at the display type size. */ .stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; } .stat-item { text-align:center; padding:56px 24px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); transition:var(--transition); } .stat-item:hover { background:rgba(255,255,255,0.05); } .stat-num { font-family:'DM Sans',sans-serif; font-size:3.4rem; font-weight:600; color:#FFFFFF; line-height:1; } .stat-suffix { font-family:'DM Sans',sans-serif; font-size:1.8rem; color:var(--accent); font-weight:600; } .stat-label { font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey-dark); margin-top:10px; } /* Stat values that are longer than the type size assumes — 100000+, 1,00,000+, 1000000+ — shrink to fit instead of the box growing to fit them. Every box keeps the same width and height; only the number's font-size moves. Opt-in via .stats-fit; the About and Home grids both take it. The digits and + form one unbreakable run (no whitespace between them), so it can never wrap; before this it simply ran past the content box and was cut off by .stat-item's overflow:hidden — 73px of "100000+" lost at 1024px, 27px at 360px. nowrap makes that one-line guarantee explicit, and min-width:0 stops the unbreakable run from forcing its 1fr grid track wider and buckling the row. fitStatNumbers() in about.html and index.html measures each value against its box and sets the final size — needed below ~380px, where two columns leave 111px for a value that wants 122px even after auto-fit has given the row everything it has. */ .stats-fit .stat-item { min-width:0; } .stats-fit .stat-num { white-space:nowrap; } /* ─── TESTIMONIALS ─── */ .testimonials-section { background:var(--bg); } .testimonials-track { overflow:hidden; } .testimonials-slider { display:flex; gap:24px; transition:transform 0.6s cubic-bezier(0.4,0,0.2,1); } .testimonial-card { flex:0 0 calc(33.333% - 16px); background:var(--white); border-radius:var(--radius-lg); padding:40px 36px; box-shadow:var(--shadow-card); border:1px solid var(--border); transition:var(--transition); } .testimonial-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-5px); border-color:rgba(201,122,61,0.3); } .test-stars { color:var(--accent); font-size:0.85rem; margin-bottom:16px; } .test-quote { font-family:'Inter',sans-serif; font-size:0.97rem; line-height:1.8; color:var(--dark); margin-bottom:24px; font-style:normal; } .test-quote::before { content:'"'; color:var(--accent-light); font-size:2rem; line-height:0; vertical-align:-0.4em; margin-right:4px; } .test-author { display:flex; align-items:center; gap:12px; } .test-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-light)); display:flex; align-items:center; justify-content:center; font-family:'DM Sans',sans-serif; font-weight:600; font-size:1.0rem; color:var(--white); } .test-name { font-weight:600; font-size:0.875rem; color:var(--dark); font-family:'DM Sans',sans-serif; letter-spacing:-0.01em; } .test-location { font-size:0.72rem; color:var(--body-secondary); } .test-controls { display:flex; justify-content:center; gap:8px; margin-top:36px; } .test-dot { width:8px; height:8px; border-radius:50%; background:var(--grey-mid); cursor:pointer; transition:var(--transition); } .test-dot.active { background:var(--accent); width:24px; border-radius:4px; } /* ─── GALLERY ─── */ .gallery-section { background:var(--section-bg); } .gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,180px); gap:4px; } .gallery-item { overflow:hidden; cursor:pointer; position:relative; } .gallery-item:nth-child(1) { grid-column:1/3; grid-row:1/3; } .gallery-item:nth-child(5) { grid-column:3/5; grid-row:2/4; } .gallery-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform 0.6s ease; } .gallery-item:hover img { transform:scale(1.08); } .gallery-item-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; transition:var(--transition); } .gallery-item:hover .gallery-item-overlay { background:rgba(0,0,0,0.35); } .gallery-item-overlay i { color:var(--white); font-size:1.8rem; opacity:0; transition:var(--transition); } .gallery-item:hover .gallery-item-overlay i { opacity:1; } /* Lightbox */ .lightbox { display:flex; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.95); align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.3s ease, visibility 0.3s ease; } .lightbox.open { opacity:1; visibility:visible; pointer-events:auto; } .lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:var(--radius); transition:transform 0.3s ease; } .prod-cat-img img { cursor:pointer; } .lightbox-close { position:absolute; top:20px; right:20px; color:var(--white); font-size:2rem; cursor:pointer; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,0.1); transition:var(--transition); } .lightbox-close:hover { background:rgba(255,255,255,0.2); } /* ─── MAP ─── */ .map-section { background:var(--section-bg); } .map-container { display:grid; grid-template-columns:1fr 2fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); } .map-info { background:#151614; color:var(--white); padding:48px 40px; } .map-info h3 { font-size:1.6rem; margin-bottom:8px; } .map-info .eyebrow { font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-light); margin-bottom:16px; display:block; } .map-info-items { margin-top:32px; display:flex; flex-direction:column; gap:20px; } .map-info-item { display:flex; gap:14px; align-items:flex-start; } /* `display:flex` above beats the `hidden` attribute's UA `display:none`, so the attribute needs restating here. #mapHoursItem ships hidden and the homepage script unhides it once the CMS hours arrive. */ .map-info-item[hidden] { display:none; } .map-info-icon { color:var(--accent-light); font-size:0.95rem; margin-top:2px; flex-shrink:0; } .map-info-text p { font-size:0.82rem; line-height:1.7; color:rgba(255,255,255,0.75); } .map-info-text a { color:var(--accent-light); } .map-embed iframe { width:100%; height:400px; border:none; display:block; } /* ─── FINAL CTA ─── */ .cta-section { background:#151614; text-align:center; padding:120px 24px; } .cta-eyebrow { font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-light); margin-bottom:16px; display:block; } .cta-title { font-family:'DM Sans',sans-serif; font-size:clamp(2rem,4.5vw,3.5rem); font-weight:500; letter-spacing:-0.025em; color:var(--white); margin-bottom:16px; } .cta-sub { font-size:0.95rem; color:rgba(255,255,255,0.6); margin-bottom:48px; max-width:440px; margin-left:auto; margin-right:auto; } .cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } /* ─── FOOTER ─── */ footer { background-color:var(--hf-base); background-image: var(--hf-texture); color:var(--hf-text); } .footer-main { padding:60px 0 44px; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr 1fr; gap:40px; } .footer-brand img { width:160px; height:auto; margin-bottom:16px; object-fit:contain; object-position:left center; display:block; } .footer-desc { font-size:0.875rem; line-height:1.75; color:var(--hf-text-soft); margin-top:0; } .footer-socials { display:flex; gap:10px; margin-top:20px; } .footer-social { width:36px; height:36px; border-radius:50%; border:1px solid var(--hf-border); display:flex; align-items:center; justify-content:center; color:var(--hf-text-soft); font-size:0.8rem; transition:var(--transition); } .footer-social:hover { background:var(--accent); border-color:var(--accent); color:var(--white); } .footer-col h5 { font-family:'DM Sans',sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:0.10em; text-transform:uppercase; color:#C97A3D; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--hf-border); } .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; } .footer-col ul li a { font-size:0.875rem; color:var(--hf-text-soft); transition:var(--transition); line-height:1.7; } .footer-col ul li a:hover { color:var(--accent-light); padding-left:6px; } .footer-contact-item { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; } .footer-contact-item i { color:#C97A3D; font-size:0.82rem; margin-top:3px; flex-shrink:0; } .footer-contact-item span { font-size:0.875rem; color:var(--hf-text-soft); line-height:1.7; } .footer-bottom { background-color:var(--hf-dark); border-top:1px solid var(--hf-border); padding:18px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; } .footer-copy { font-size:0.75rem; color:var(--hf-text-faint); } .footer-bottom-links { display:flex; gap:20px; } .footer-bottom-links a { font-size:0.72rem; color:var(--hf-text-faint); transition:var(--transition); } .footer-bottom-links a:hover { color:var(--accent-light); } /* ─── FLOATING BUTTONS ─── */ .floating-btns { position:fixed; bottom:32px; right:32px; z-index:900; display:flex; flex-direction:column; gap:12px; } .float-btn { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--white); cursor:pointer; box-shadow:0 4px 20px rgba(20,20,20,0.3); transition:var(--transition); border:none; animation:float 3s ease-in-out infinite; } .float-wa { background:#25D366; animation-delay:0s; } .float-wa:hover { background:#1da851; transform:scale(1.12); } .float-call { background:var(--gold); animation-delay:0.4s; } .float-call:hover { background:var(--gold-light); transform:scale(1.12); } .float-label { position:absolute; right:68px; background:var(--white); padding:6px 14px; border-radius:20px; font-family:'Inter',sans-serif; font-size:0.7rem; font-weight:600; color:var(--dark); white-space:nowrap; box-shadow:var(--shadow); opacity:0; transition:var(--transition); pointer-events:none; } .float-btn-wrap { position:relative; display:flex; align-items:center; } .float-btn-wrap:hover .float-label { opacity:1; } /* ─── INNER PAGES ─── */ .page-hero { position:relative; display:flex; align-items:flex-end; overflow:hidden; margin-top:0; width:100%; /* Never visible under a loaded cover — the image is inset:0 + object-fit:cover. It is what shows for the moment setHeroCover() hides the while the incoming cover decodes (see common.js), so that gap reads as a deliberate dark frame rather than a white flash. */ background:#111210; /* See "RESPONSIVE COVER SIZING" below — the height is derived from the cover's own ratio at every width, not pinned. */ height:auto; aspect-ratio:var(--cover-ar, 3.1304); min-height:400px; max-height:min(640px, 62vh); } .page-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; /* Centre is right for virtually every cover. --cover-focus exists so a single awkward image can be re-anchored from the CMS later without anyone adding a per-brand rule here. */ object-position:var(--cover-focus, 50% 50%); } /* ── RESPONSIVE COVER SIZING ────────────────────────────────────────────── Shared by every cover on the site: brand, category and product heroes plus the About/Products/Gallery heroes — they all use .page-hero > img. (Contact opts out: .cp-hero further down still pins its own height, as it always has.) At EVERY width the hero adopts the cover image's own aspect ratio (--cover-ar, a plain number published by setHeroCover()/initResponsiveCovers() in common.js from the decoded image), clamped at both ends. object-fit:cover then has only the clamp overshoot left to crop, so the composition an employee uploaded is what shows — with no per-brand CSS. Desktop used to pin height:460px. On a 1440px-wide full-bleed hero that is a 3.13:1 letterbox, which is fine for a landscape banner but destroys anything squarer: a 1200x1200 product cover had 68% of its height sliced away and the hero showed a featureless band out of the middle of the photo. That is what "the cover breaks when you open a product" was. The ratio-derived height now gives such a cover the full 640px/62vh instead, and a genuine panorama still settles on the 400px floor — close to the old banner. The clamps handle the extremes: min-height — a panorama would otherwise be too short for the overlaid logo/name/tagline, which would then spill over the breadcrumb below. The floor clears the tallest measured hero text at every width. NB: this cannot be `max-content`. On a box that has an aspect-ratio, max-content resolves *through* that ratio, so it returns the full ratio-derived height and silently beats max-height — a 2:3 cover ended up 2048px tall on a tablet. max-height — a tall portrait would otherwise swallow the whole screen. It is viewport-relative so a short laptop screen never loses the fold. Explicit width on the base rule is load-bearing: when max-height clamps a tall cover, an auto width would be re-derived from the ratio and the hero would shrink away from the screen edges, leaving blank bands beside it. Pinning the width keeps the cover full-bleed and sends the clamp to the height only. */ @media(max-width:1024px){ .page-hero{ /* Phones are portrait and the hero text is smaller, so the floor drops and the cap rises: a 4:3 cover fits end to end at 390px with nothing cropped. */ aspect-ratio:var(--cover-ar, 1.7778); min-height:clamp(250px, 30vh, 275px); max-height:min(76vh, 600px); } /* ...but a TEXTLESS hero has nothing for that floor to make room for. .hero-clean is the brand and collection cover (see the rule below): no eyebrow, no heading, no tagline — the uploaded banner is the entire hero. The floor above is sized to clear overlaid text, and on a phone it was the only thing still cropping these covers: the banners are 1920x700 (2.74:1), so at 390px the box wants to be 142px tall, the 250px floor overrode that, and object-fit:cover then scaled the artwork up until only ~57% of its width survived — "Hindware" rendered as "indwar". Releasing the floor lets the box keep the banner's own aspect ratio, which is what makes the whole banner visible at every phone width. Nothing else changes: the floor still applies to the product hero (which keeps its caption, so setHeroTextless(false) removes .hero-clean) and to the About/Products/Gallery heroes, none of which are .hero-clean. Above ~686px the floor was never binding for these covers, so tablet and desktop are untouched either way. */ .page-hero.hero-clean{ min-height:0; } } .page-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(20,20,20,0.78) 0%,rgba(20,20,20,0.18) 100%); } /* .hero-clean — a hero whose cover is the only content in it (brand and category pages). The gradient above is a readability scrim for overlaid text; with no text it only dims the artwork, so it is dropped and the uploaded banner shows exactly as uploaded. Set on the static markup and re-asserted by setHeroTextless() in brand-page.js, which clears it again for the product hero — that one still captions its cover. Sizing/cropping are untouched: the hero keeps the same --cover-ar box and object-fit:cover either way. */ .page-hero.hero-clean .page-hero-overlay { display:none; } /* --cover-safe-bottom is reserved by a cover whose artwork carries something at its bottom edge (see COVER_FOCUS in common.js). It is 0 for every other cover, so this is the same 56px it has always been unless a cover asks for room. */ .page-hero-content { position:relative; z-index:2; color:var(--white); padding:0 0 calc(56px + var(--cover-safe-bottom, 0px)) 0; } .page-hero-content .eyebrow { font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-light); display:block; margin-bottom:10px; } .page-hero-content h1 { font-family:'DM Sans',sans-serif; font-size:clamp(2rem,3.5vw,3.2rem); font-weight:500; letter-spacing:-0.025em; color:var(--white); } /* ─── ABOUT ─── */ /* align-items:stretch ensures the image column grows with the text column. The image is absolutely positioned inside to fill that height via object-fit:cover. min-height gives a sensible floor when the CMS text is very short. */ .about-intro { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:stretch; } .about-intro-img { position:relative; min-height:360px; /* floor: image never collapses for short text */ /* no overflow:hidden — the ::after decorator hangs -20px outside the box */ } /* image fills whatever height the grid assigns — no blank space ever */ .about-intro-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:var(--radius-lg); /* clips its own corners without overflow:hidden */ display:block; } .about-intro-img::after { content:''; position:absolute; bottom:-20px; right:-20px; width:60%; height:60%; border:1px solid var(--gold-pale); border-radius:var(--radius-lg); z-index:-1; pointer-events:none; } /* text column: top-aligned so short text never looks sunken */ .about-intro-text { align-self:start; padding-top:8px; } .about-intro-text .eyebrow { font-family:'Inter',sans-serif; color:var(--gold); font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; display:block; margin-bottom:14px; } .about-intro-text h2 { font-family:'DM Sans',sans-serif; font-weight:500; font-size:clamp(1.8rem,3.5vw,2.9rem); letter-spacing:-0.025em; margin-bottom:24px; } .about-intro-text p { font-family:'Inter',sans-serif; font-size:0.88rem; line-height:1.95; color:var(--body); margin-bottom:16px; } .vm-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; } .vm-card { background:var(--stone); padding:32px; border-radius:var(--radius-lg); border-left:3px solid var(--gold); box-shadow:var(--shadow); } .vm-card h4 { font-family:'DM Sans',sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:-0.02em; margin-bottom:12px; } .vm-card p { font-family:'Inter',sans-serif; font-size:0.82rem; line-height:1.85; color:var(--body); } .team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px; margin-top:48px; } .trust-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; } .trust-card { background:var(--white); padding:40px 32px; text-align:center; border-radius:var(--radius-lg); border:1px solid var(--border); transition:var(--transition); box-shadow:var(--shadow); } .trust-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:var(--gold-pale); } .trust-icon { font-size:1.9rem; color:var(--gold); margin-bottom:16px; } .trust-title { font-family:'DM Sans',sans-serif; font-weight:600; font-size:1.0rem; letter-spacing:-0.02em; margin-bottom:10px; } .trust-text { font-family:'Inter',sans-serif; font-size:0.82rem; color:var(--body); line-height:1.75; } /* ─── PRODUCTS ─── */ .products-sidebar { position:sticky; top:100px; background:var(--white); border-radius:var(--radius-lg); padding:24px 20px; box-shadow:var(--shadow-card); border:1px solid var(--border); } .products-layout { display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:start; } .sidebar-title { font-size:0.6875rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--grey-light); font-family:'Inter',sans-serif; } .sidebar-cat { margin-bottom:6px; } .sidebar-cat-title { font-size:0.78rem; font-weight:600; color:var(--dark); padding:11px 4px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); transition:var(--transition); letter-spacing:0.03em; font-family:'DM Sans',sans-serif; } .sidebar-cat-title:hover { color:var(--accent); } .sidebar-cat-title i { font-size:0.6rem; transition:transform 0.35s ease; color:var(--grey-mid); } .sidebar-brands { list-style:none; overflow:hidden; max-height:0; transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1); } .sidebar-brands.open { max-height:500px; } .sidebar-brands li a { display:block; padding:9px 14px; font-size:0.77rem; color:var(--body-secondary); border-bottom:1px solid rgba(222,217,208,0.5); transition:var(--transition); letter-spacing:0.02em; } .sidebar-brands li a:hover { color:var(--accent); background:rgba(201,122,61,0.05); padding-left:20px; } .sidebar-brands li a.active { color:var(--white); background:var(--accent); padding-left:20px; font-weight:600; position:relative; box-shadow:0 2px 10px rgba(201,122,61,0.25); } .sidebar-brands li a.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#151614; border-radius:0 2px 2px 0; } .product-panel { display:none; } .product-panel.active { display:block; padding-top:8px; } .product-brand-header { margin-bottom:44px; padding-bottom:28px; border-bottom:1px solid var(--grey-light); } .product-brand-header .eyebrow { color:var(--accent); font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; display:block; margin-bottom:12px; font-family:'Inter',sans-serif; } .product-brand-header h1 { font-size:clamp(2rem,4vw,3.2rem); margin-bottom:14px; color:var(--dark); line-height:1.1; letter-spacing:-0.025em; font-family:'DM Sans',sans-serif; font-weight:500; } .product-brand-header p { font-size:0.88rem; line-height:1.9; color:var(--grey-dark); max-width:580px; } #productContent { scroll-margin-top:106px; } .product-cats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; } .prod-cat-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:var(--transition); box-shadow:var(--shadow-card); display:flex; flex-direction:column; } .prod-cat-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-5px); border-color:rgba(201,122,61,0.4); } .prod-cat-img { aspect-ratio:4/3; overflow:hidden; background:var(--section-bg); display:flex; align-items:center; justify-content:center; } .prod-cat-img i { font-size:2.8rem; color:var(--grey-mid); } .prod-cat-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; } .prod-cat-card:hover .prod-cat-img img { transform:scale(1.06); } .prod-cat-info { padding:18px; display:flex; flex-direction:column; flex:1; } .prod-cat-info h4 { font-size:0.95rem; margin-bottom:6px; color:var(--dark); font-family:'DM Sans',sans-serif; font-weight:600; } .prod-cat-info span { font-size:0.75rem; color:var(--body-secondary); line-height:1.6; } .prod-cat-info .enquire-btn { margin-top:auto; } .enquire-btn { display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:9px 18px; background:var(--accent); color:var(--white); font-size:0.71rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; border:none; border-radius:var(--radius); cursor:pointer; transition:var(--transition); box-shadow:0 2px 8px rgba(140,123,104,0.25); } .enquire-btn:hover { background:#1A1A1A; transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,0.2); } /* ─── GALLERY PAGE ─── */ .gallery-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; } .gallery-filter-btn { padding:8px 20px; border:1px solid var(--border); background:var(--white); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--body-secondary); border-radius:30px; cursor:pointer; transition:var(--transition); } .gallery-filter-btn.active, .gallery-filter-btn:hover { background:var(--accent); color:var(--white); border-color:var(--accent); box-shadow:0 4px 14px rgba(140,123,104,0.3); } .gallery-page-grid { columns:3; gap:12px; } .gallery-page-item { break-inside:avoid; margin-bottom:12px; overflow:hidden; border-radius:var(--radius); cursor:pointer; position:relative; } .gallery-page-item img { width:100%; display:block; transition:transform 0.5s ease; } .gallery-page-item:hover img { transform:scale(1.04); } .gallery-page-item-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.3); opacity:0; transition:var(--transition); display:flex; align-items:center; justify-content:center; } .gallery-page-item:hover .gallery-page-item-overlay { opacity:1; } .gallery-page-item-overlay i { color:var(--white); font-size:1.6rem; } /* ─── CONTACT ─── */ .contact-layout { display:grid; grid-template-columns:2fr 3fr; gap:48px; } .contact-info-card { background:#151614; color:var(--white); padding:48px 40px; border-radius:var(--radius-lg); } .contact-info-card h3 { font-size:1.7rem; margin-bottom:8px; } .contact-info-card .eyebrow { font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-light); display:block; margin-bottom:12px; } .contact-info-card p { font-size:0.85rem; color:rgba(255,255,255,0.55); line-height:1.8; margin-bottom:32px; } .contact-items { display:flex; flex-direction:column; gap:24px; } .contact-item { display:flex; gap:14px; align-items:flex-start; } .contact-item-icon { width:40px; height:40px; border-radius:50%; border:1px solid rgba(140,123,104,0.4); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent-light); font-size:0.9rem; } .contact-item-text p { font-family:'Inter',sans-serif; font-size:0.82rem; color:rgba(255,255,255,0.58); line-height:1.75; } .contact-item-text a { color:var(--gold-light); } .contact-form-card { background:var(--white); padding:52px 48px; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--border); } .contact-form-card h3 { font-family:'DM Sans',sans-serif; font-weight:500; font-size:1.7rem; letter-spacing:-0.025em; margin-bottom:8px; } .contact-form-card .sub { font-family:'Inter',sans-serif; font-size:0.85rem; color:var(--body); margin-bottom:36px; } .form-group { margin-bottom:22px; } .form-label { display:block; font-family:'Inter',sans-serif; font-size:0.67rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--body); margin-bottom:10px; font-weight:600; } .form-input { width:100%; padding:15px 18px; border:1px solid var(--border); border-radius:var(--radius-md); font-family:'Inter',sans-serif; font-size:0.88rem; color:var(--dark); background:#F7F5F1; transition:var(--transition); outline:none; } .form-input:focus { border-color:var(--gold); background:var(--white); box-shadow:0 0 0 3px rgba(201,122,61,0.1); } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .form-submit { width:100%; padding:18px; background:var(--gold); color:var(--white); font-family:'DM Sans',sans-serif; font-size:0.8125rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; border:none; border-radius:var(--radius); cursor:pointer; transition:var(--transition); } .form-submit:hover { background:var(--gold-hover); transform:translateY(-1px); box-shadow:var(--shadow-gold); } .contact-wa-btns { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; } .contact-wa-btns .btn-cta { flex:1; justify-content:center; min-width:160px; } /* ─── ENQUIRY MODAL ─── */ .modal-overlay { display:none; position:fixed; inset:0; z-index:1500; background:rgba(20,20,20,0.7); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:24px; } .modal-overlay.open { display:flex; } .modal { background:var(--white); border-radius:var(--radius-lg); padding:48px; width:100%; max-width:460px; box-shadow:var(--shadow-lg); animation:fadeUp 0.4s both; position:relative; } .modal-close { position:absolute; top:18px; right:18px; background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--muted); transition:var(--transition); } .modal-close:hover { color:var(--dark); } .modal-eyebrow { font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; display:block; } .modal h3 { font-family:'DM Sans',sans-serif; font-weight:500; font-size:1.7rem; letter-spacing:-0.025em; margin-bottom:8px; } .modal .sub { font-family:'Inter',sans-serif; font-size:0.83rem; color:var(--body); margin-bottom:32px; } /* ─── SCROLL REVEAL ─── */ .reveal { opacity:0; transform:translateY(36px); transition:opacity 0.85s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.85s cubic-bezier(0.25,0.46,0.45,0.94); } .reveal.visible { opacity:1; transform:translateY(0); } /* ─── RESPONSIVE ─── */ @media(max-width:1024px) { .footer-grid { grid-template-columns:1fr 1fr; } .map-container { grid-template-columns:1fr; } .map-embed iframe { height:340px; } .about-intro { grid-template-columns:1fr; } /* stacked layout: give the image a pleasant fixed height — the abs-positioned img fills it */ .about-intro-img { min-height:0; height:340px; } .about-intro-text { align-self:auto; padding-top:0; } .about-intro-img::after { display:none; } .products-layout { grid-template-columns:1fr; } .products-sidebar { position:relative; top:0; } .contact-layout { grid-template-columns:1fr; } .gallery-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:auto; } .gallery-item:nth-child(1), .gallery-item:nth-child(5) { grid-column:auto; grid-row:auto; } .gallery-item { min-height:200px; } .testimonial-card { flex:0 0 calc(50% - 14px); } .gallery-page-grid { columns:2; } .nav-menu > li { --mega-width:480px; } /* keeps the hover bridge the same width as the panel */ .mega-menu { grid-template-columns:1fr 1fr; } .container { padding:0 24px; } .section { padding:88px 0; } } @media(max-width:768px) { .nav-menu, .nav-ctas { display:none; } .hamburger { display:flex; } .mobile-nav { display:flex; } .hero-title { font-size:2.8rem; } .stats-grid { grid-template-columns:1fr 1fr; } .footer-grid { grid-template-columns:1fr; gap:36px; } .gallery-grid { grid-template-columns:1fr 1fr; } .gallery-item:nth-child(1), .gallery-item:nth-child(5) { grid-column:auto; grid-row:auto; } .gallery-item { min-height:200px; } .testimonial-card { flex:0 0 100%; } .gallery-page-grid { columns:1; } .vm-grid { grid-template-columns:1fr; } .form-row { grid-template-columns:1fr; } .floating-btns { bottom:20px; right:18px; } .brands-grid { grid-template-columns:1fr 1fr; } .categories-grid { grid-template-columns:1fr 1fr; } .why-grid { grid-template-columns:1fr 1fr; } .section { padding:72px 0; } .container { padding:0 20px; } .product-cats-grid { grid-template-columns:1fr 1fr; } .products-sidebar { max-height:55vh; overflow-y:auto; } .brand-tabs { gap:6px; flex-wrap:wrap; } .brand-tab { font-size:0.7rem; padding:8px 12px; } .section-title { font-size:clamp(1.6rem,5vw,2.6rem); } /* .page-hero height is aspect-ratio driven — see RESPONSIVE COVER SIZING */ .page-hero-content { padding:0 0 calc(34px + var(--cover-safe-bottom, 0px)) 0; } .testimonial-card { padding:28px 22px; } .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; } .footer-bottom-links { flex-wrap:wrap; gap:10px; } .float-btn { width:46px; height:46px; font-size:1.1rem; } .nav-logo img { height:64px; width:auto; max-width:180px; } .brand-logo { height:104px; padding:10px 12px; } .brand-logo img { width:85%; height:85%; } .brand-card { min-height:185px; padding:12px; } .brand-card-text { padding:0 6px; } .brand-card-name { font-size:0.9rem; } .brands-grid { gap:10px; } .brand-card-cat { font-size:0.65rem; word-break:break-word; letter-spacing:0.14em; } /* Testimonials — no gap so 100%-wide cards align exactly to translateX steps */ .testimonials-track { overflow:hidden; width:100%; } .testimonials-slider { gap:0; } .testimonial-card { flex:0 0 100%; width:100%; max-width:100%; box-sizing:border-box; padding:28px 22px; margin:0; } } @media(max-width:480px) { .hero-btns { flex-direction:column; align-items:center; } .hero-title { font-size:2.2rem; } .stats-grid { grid-template-columns:1fr 1fr; } .gallery-grid { grid-template-columns:1fr; } .gallery-item { min-height:220px; } .categories-grid { grid-template-columns:1fr; } .why-grid { grid-template-columns:1fr; } .brands-grid { grid-template-columns:1fr 1fr; } .cta-btns { flex-direction:column; align-items:center; } .section { padding:60px 0; } .product-cats-grid { grid-template-columns:1fr; } .enquire-btn { width:100%; justify-content:center; } .page-hero-content { padding:0 0 calc(26px + var(--cover-safe-bottom, 0px)) 0; } .page-hero-content h1 { font-size:1.6rem; } .testimonial-card { padding:22px 18px; } .test-quote { font-size:0.92rem; } .footer-bottom { flex-direction:column; align-items:center; text-align:center; } .footer-bottom-links { justify-content:center; flex-wrap:wrap; } .nav-logo img { height:57px; width:auto; max-width:160px; } .brand-logo { height:92px; padding:8px 10px; } .brand-logo img { width:82%; height:82%; } .brand-card { min-height:172px; } .brand-card-name { font-size:0.85rem; } .brand-card-cat { font-size:0.6rem; letter-spacing:0.08em; } .brands-grid { gap:8px; } .stat-num { font-size:2rem; } } /* ═══════════════════════════════════════════════════════ PREMIUM LIGHT SHOWROOM — UNIFIED DESIGN SYSTEM v3 ═══════════════════════════════════════════════════════ */ /* ── KEYFRAMES ── */ @keyframes brandFadeUp { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:translateY(0);} } @keyframes brandFadeIn { from{opacity:0;} to{opacity:1;} } @keyframes cardStagger { from{opacity:0;transform:translateY(28px) scale(0.97);} to{opacity:1;transform:translateY(0) scale(1);} } @keyframes revealFadeUp { from{opacity:0;transform:translateY(36px);} to{opacity:1;transform:translateY(0);} } @keyframes goldPulse { 0%,100%{box-shadow:0 0 0 0 rgba(201,122,61,0);} 50%{box-shadow:0 0 0 8px rgba(201,122,61,0.12);} } .brand-header-anim .eyebrow { animation:brandFadeIn 0.4s 0.05s both ease-out; } .brand-header-anim h1 { animation:brandFadeUp 0.5s 0.10s both cubic-bezier(0.25,0.46,0.45,0.94); } .brand-header-anim p { animation:brandFadeUp 0.5s 0.18s both cubic-bezier(0.25,0.46,0.45,0.94); } .brand-card-anim { animation:cardStagger 0.5s both cubic-bezier(0.25,0.46,0.45,0.94); } /* ── STAGGER REVEAL ── */ .reveal-stagger > * { opacity:0; transform:translateY(28px); transition:opacity 0.65s ease, transform 0.65s ease; } .reveal-stagger.visible > *:nth-child(1) { transition-delay:0.04s; opacity:1; transform:none; } .reveal-stagger.visible > *:nth-child(2) { transition-delay:0.12s; opacity:1; transform:none; } .reveal-stagger.visible > *:nth-child(3) { transition-delay:0.20s; opacity:1; transform:none; } .reveal-stagger.visible > *:nth-child(4) { transition-delay:0.28s; opacity:1; transform:none; } .reveal-stagger.visible > *:nth-child(5) { transition-delay:0.36s; opacity:1; transform:none; } .reveal-stagger.visible > *:nth-child(6) { transition-delay:0.44s; opacity:1; transform:none; } /* ── MOBILE NAV — LIGHT ── */ .mobile-nav { background:#FFFFFF; border-right:1px solid var(--border); } .mobile-nav a { color:var(--dark); border-bottom-color:var(--border); font-size:0.88rem; letter-spacing:0.06em; font-family:'DM Sans',sans-serif; transition:all 0.3s ease; } .mobile-nav a:hover { color:var(--gold); padding-left:14px; background:rgba(201,122,61,0.04); } /* ── NAVBAR — light neutral concrete, matched to the logo's own background tone ── */ #navbar { background-color:var(--hf-base); background-image: var(--hf-texture); border-bottom:1px solid var(--hf-border); box-shadow:0 1px 0 rgba(197,197,197,0.5); } #navbar.scrolled { background-color:var(--hf-dark); border-bottom-color:var(--hf-border); box-shadow:0 4px 20px rgba(32,32,30,0.16); } /* ── MEGA MENU + DROPDOWN — light ── */ .dropdown { background:#FFFFFF; border:1px solid var(--border); box-shadow:0 8px 32px rgba(32,32,30,0.12); } .dropdown a { color:var(--dark); border-bottom-color:var(--border); padding:12px 22px; transition:all 0.25s ease; } .dropdown a:last-child { border-bottom:none; } .dropdown a:hover { background:rgba(201,122,61,0.06); color:var(--gold); padding-left:30px; } .mega-menu { background:#FFFFFF; border:1px solid var(--border); box-shadow:0 8px 40px rgba(32,32,30,0.14); } .mega-col h5 { color:var(--gold); border-bottom-color:rgba(201,122,61,0.2); font-size:0.6rem; letter-spacing:0.28em; } .mega-col a { color:var(--body-secondary); padding:8px 0; } .mega-col a:hover { color:var(--gold); padding-left:10px; } /* ── BRAND TABS — dark section context ── */ .brand-tab { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.14); color:rgba(255,255,255,0.7); } .brand-tab:hover { background:rgba(255,255,255,0.12); color:#FFFFFF; border-color:rgba(255,255,255,0.28); } .brand-tab.active { background:var(--gold); color:#FFFFFF; border-color:var(--gold); box-shadow:0 4px 16px rgba(201,122,61,0.3); } /* ── BRAND CARDS — all properties live in the base block above ── */ .brands-grid { background:transparent; gap:14px; } /* ── SECTION HEADERS ── */ .section-title { color:var(--dark); } .section-sub { color:var(--body-secondary); } .section-eyebrow{ color:var(--gold); border-bottom-color:rgba(201,122,61,0.2); } .section-divider{ background:linear-gradient(to bottom,transparent,var(--gold),transparent); } /* Section title on dark sections must stay white */ .why-section .section-title, .stats-section .section-title, .cta-section .cta-title { color:#FFFFFF; } .why-section .section-sub { color:rgba(255,255,255,0.55); } .why-section .section-eyebrow { color:var(--gold-light); } /* ── WHY SECTION — stays dark ── */ .why-section { background:#151614; } .why-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); padding:48px 32px; border-radius:var(--radius-lg); transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); position:relative; overflow:hidden; } .why-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity 0.4s ease; } .why-card:hover::after { opacity:1; } .why-card:hover { transform:translateY(-6px); background:rgba(255,255,255,0.05); border-color:rgba(201,122,61,0.3); box-shadow:0 20px 50px rgba(0,0,0,0.5); } .why-icon { width:64px; height:64px; border-radius:50%; font-size:1.5rem; border:1px solid rgba(201,122,61,0.28); background:rgba(201,122,61,0.08); color:var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; transition:all 0.4s ease; } .why-card:hover .why-icon { background:var(--gold); border-color:var(--gold); color:#FFFFFF; box-shadow:0 0 20px rgba(201,122,61,0.4); } .why-title { color:rgba(255,255,255,0.92); font-size:1.0rem; font-family:'DM Sans',sans-serif; font-weight:600; margin-bottom:12px; } .why-text { color:rgba(255,255,255,0.45); line-height:1.85; font-size:0.84rem; } /* ── TESTIMONIALS — light cards ── */ .testimonials-section { background:var(--bg); } .testimonial-card { background:var(--white); border:1px solid var(--border); transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); } .testimonial-card:hover { border-color:rgba(201,122,61,0.35); box-shadow:0 16px 48px rgba(32,32,30,0.12); transform:translateY(-5px); } .test-quote { color:var(--dark); font-style:normal; } .test-quote::before { color:var(--gold); } .test-name { color:var(--dark); font-weight:600; font-family:'DM Sans',sans-serif; } .test-location { color:var(--body-secondary); } .test-stars { color:var(--gold); letter-spacing:2px; } .test-avatar { background:linear-gradient(135deg,var(--gold),var(--gold-light)); } .test-dot { background:var(--border); } .test-dot.active { background:var(--gold); } /* ── GALLERY — premium grid ── */ .gallery-section { background:var(--section-bg); } .gallery-item { border-radius:8px; } .gallery-item:hover img { transform:scale(1.08); } .gallery-item-overlay { background:rgba(0,0,0,0) !important; } .gallery-item:hover .gallery-item-overlay { background:rgba(0,0,0,0.3) !important; } /* ── STATS — stays dark ── */ .stats-section { background:#151614; } .stats-grid { border-left:1px solid rgba(255,255,255,0.08); border-top:1px solid rgba(255,255,255,0.08); } .stat-item { border-right:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); position:relative; overflow:hidden; transition:background 0.3s ease; } .stat-item::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity 0.4s ease; } .stat-item:hover::after { opacity:1; } .stat-item:hover { background:rgba(201,122,61,0.04); } .stat-num { color:#FFFFFF; } .stat-suffix { color:var(--gold); } .stat-label { color:rgba(255,255,255,0.45); letter-spacing:0.2em; } /* ── MAP ── */ .map-section { background:var(--section-bg); } .map-info { background:#151614; border:none; } .map-info h3 { color:#FFFFFF; } .map-info .eyebrow { color:var(--gold); } .map-info-text p { color:rgba(255,255,255,0.65); line-height:1.8; } .map-info-text a { color:var(--gold); } .map-info-icon { color:var(--gold); } /* ── CTA SECTION — warm dark ── */ .cta-section { background:#151614; position:relative; overflow:hidden; } .cta-section::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:700px; background:radial-gradient(ellipse at center,rgba(201,122,61,0.07) 0%,transparent 65%); pointer-events:none; } .cta-eyebrow { color:var(--gold); } .cta-title { color:#FFFFFF; } .cta-sub { color:#B0B0B0; } /* ── FOOTER — light neutral concrete, unified with navbar ── */ footer { background-color:var(--hf-base); background-image: var(--hf-texture); border-top:1px solid var(--hf-border); } .footer-main { padding:60px 0 44px; } .footer-desc { color:var(--hf-text-soft); line-height:1.75; font-size:0.875rem; } .footer-col h5 { font-family:'DM Sans',sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:0.10em; text-transform:uppercase; color:#C97A3D; border-bottom:1px solid var(--hf-border); padding-bottom:10px; margin-bottom:18px; } .footer-col ul li a { color:var(--hf-text-soft); font-family:'Inter',sans-serif; font-size:0.875rem; font-weight:400; line-height:1.7; } .footer-col ul li a:hover { color:var(--gold); padding-left:8px; } .footer-contact-item i { color:#C97A3D; } .footer-contact-item span { color:var(--hf-text-soft); font-size:0.875rem; line-height:1.7; } .footer-copy { color:var(--hf-text-faint); } .footer-bottom { background-color:var(--hf-dark); border-top:1px solid var(--hf-border); } .footer-bottom-links a { color:var(--hf-text-faint); font-size:0.74rem; } .footer-bottom-links a:hover { color:var(--gold); } .footer-social { width:38px; height:38px; border:1px solid var(--hf-border); color:var(--hf-text-soft); transition:all 0.3s ease; } .footer-social:hover { background:var(--gold); border-color:var(--gold); color:#FFFFFF; transform:translateY(-2px); box-shadow:0 6px 18px rgba(201,122,61,0.38); } /* ── FLOAT LABEL ── */ .float-label { background:var(--white); color:var(--dark); border:1px solid var(--border); box-shadow:var(--shadow); } /* ── PAGE HERO ── */ /* The 460px desktop height now lives on the base .page-hero rule. It used to be repeated here, unconditionally and *after* the mobile media queries, which silently beat them on specificity ties — so every phone was rendering a 460px tall cover and object-fit:cover was throwing away ~46% of the image width. */ .page-hero-content h1 { color:#FFFFFF; font-size:clamp(2rem,3.5vw,3.2rem); } .page-hero-content .eyebrow { color:var(--gold); } /* ── ABOUT PAGE ── */ .about-intro-text h2 { color:var(--dark); } .about-intro-text p { color:var(--body-secondary); line-height:1.95; } .about-intro-text .eyebrow { color:var(--gold); } .about-intro-img::after { border-color:rgba(201,122,61,0.2); } /* ── ABOUT INTRO — LONG-FORM BODY COPY ───────────────────────────────────── The About description is the only long read on the site, so it gets rhythm the short blurbs elsewhere do not need: wider gaps between paragraphs and quiet gold section headings in the same key as the page's eyebrows. Type scale is unchanged — the paragraphs inherit .about-intro-text p — and every rule is scoped to .about-body, so no other page is affected. The measure cap only bites on desktop and tablet; below ~560px the column is already narrower than the cap, so nothing can overflow horizontally. */ /* Measure cap. Deliberately in rem rather than ch: `ch` is the width of "0", which is far wider than the average letter here, so a ch-based cap reads as a much shorter line than it actually sets. Measured on this copy at this size, 33rem lands at ~73 characters per line; the full 580px column ran to ~81, which is past comfortable for a read this long. */ .about-body { max-width:33rem; } .about-body p { margin-bottom:20px; } .about-body p:last-child { margin-bottom:0; } /* Opening line — carries the section, so it sits a step above body copy. */ .about-lead { font-size:0.95rem; line-height:1.85; font-weight:500; color:var(--dark); margin-bottom:26px; } /* Section headings. Same treatment as .eyebrow so they read as part of the existing type system rather than as a new heading level. */ .about-subhead { font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:32px 0 12px; } .about-body > .about-subhead:first-child { margin-top:0; } /* Closing sign-off line. */ .about-signoff { font-family:'DM Sans',sans-serif; font-size:0.95rem; font-weight:500; letter-spacing:-0.01em; line-height:1.6; color:var(--dark); margin-top:28px; padding-top:22px; border-top:1px solid var(--border); } .vm-grid { gap:20px; } .vm-card { background:var(--white); border-left:3px solid var(--gold); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-card); border:1px solid var(--border); transition:all 0.4s ease; } .vm-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:rgba(201,122,61,0.3); } .vm-card h4 { color:var(--dark); font-size:1.05rem; margin-bottom:14px; } .vm-card p { color:var(--body-secondary); font-size:0.84rem; line-height:1.9; } /* ── TRUST CARDS — light ── */ .trust-grid { gap:16px; } .trust-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px 28px; text-align:center; position:relative; overflow:hidden; transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); box-shadow:var(--shadow-card); } .trust-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity 0.4s ease; } .trust-card:hover::before { opacity:1; } .trust-card:hover { border-color:rgba(201,122,61,0.3); transform:translateY(-5px); box-shadow:var(--shadow-hover); } .trust-icon { width:56px; height:56px; border-radius:50%; font-size:1.4rem; background:rgba(201,122,61,0.08); border:1px solid rgba(201,122,61,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--gold); transition:all 0.4s ease; } .trust-card:hover .trust-icon { background:var(--gold); border-color:var(--gold); color:#FFFFFF; box-shadow:0 0 20px rgba(201,122,61,0.3); } .trust-title { color:var(--dark); font-size:0.97rem; margin-bottom:12px; } .trust-text { color:var(--body-secondary); font-size:0.82rem; line-height:1.8; } /* ── GALLERY PAGE ── */ .gallery-filter-btn { background:var(--white); border-color:var(--border); color:var(--body-secondary); padding:9px 22px; } .gallery-filter-btn:hover { background:rgba(201,122,61,0.07); color:var(--dark); border-color:rgba(201,122,61,0.3); } .gallery-filter-btn.active { background:var(--gold); color:#FFFFFF; border-color:var(--gold); box-shadow:0 4px 14px rgba(201,122,61,0.3); } .gallery-page-item { border-radius:var(--radius); overflow:hidden; } .gallery-page-item-overlay { background:rgba(0,0,0,0) !important; } .gallery-page-item:hover .gallery-page-item-overlay { background:rgba(0,0,0,0.3) !important; } /* ── PRODUCTS SIDEBAR — light ── */ .products-sidebar { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:24px 20px; } .sidebar-title { color:var(--gold); font-size:0.6875rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; font-family:'Inter',sans-serif; border-bottom:1px solid rgba(201,122,61,0.18); padding-bottom:14px; margin-bottom:20px; } .sidebar-cat { margin-bottom:2px; } .sidebar-cat-title { color:var(--dark); border-bottom:1px solid var(--border); padding:12px 6px; font-size:0.8rem; font-weight:600; letter-spacing:0.02em; transition:all 0.3s ease; border-radius:4px 4px 0 0; } .sidebar-cat-title:hover { color:var(--gold); background:rgba(201,122,61,0.04); padding-left:10px; } .sidebar-cat-title i { color:var(--body-secondary); font-size:0.58rem; transition:transform 0.35s ease; } .sidebar-brands li a { color:var(--body-secondary); border-bottom:1px solid rgba(222,217,208,0.5); padding:10px 14px; font-size:0.78rem; transition:all 0.25s ease; letter-spacing:0.02em; } .sidebar-brands li a:hover { color:var(--dark); background:rgba(201,122,61,0.05); padding-left:22px; } .sidebar-brands li a.active { background:var(--gold); color:#FFFFFF; font-weight:600; padding-left:22px; box-shadow:0 3px 12px rgba(201,122,61,0.3); } .sidebar-brands li a.active::before { background:#151614; } /* ── PRODUCT BRAND HEADER ── */ .product-brand-header { margin-bottom:48px; padding-bottom:32px; border-bottom:1px solid var(--border); position:relative; } .product-brand-header::after { content:''; position:absolute; bottom:-1px; left:0; width:80px; height:2px; background:var(--gold); } .product-brand-header .eyebrow { color:var(--gold); font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; display:block; margin-bottom:14px; text-transform:uppercase; font-family:'Inter',sans-serif; } .product-brand-header h1 { color:var(--dark); font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.08; letter-spacing:-0.025em; } .product-brand-header p { color:var(--body-secondary); font-size:0.9rem; line-height:1.9; max-width:580px; margin-top:14px; } /* ── PRODUCT CAT CARDS — light ── */ .product-cats-grid { gap:18px; } .prod-cat-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:all 0.38s cubic-bezier(0.25,0.46,0.45,0.94); box-shadow:var(--shadow-card); display:flex; flex-direction:column; } .prod-cat-card:hover { transform:translateY(-5px); box-shadow:0 20px 48px rgba(32,32,30,0.14); border-color:rgba(201,122,61,0.4); } .prod-cat-img { background:var(--section-bg); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; } .prod-cat-img i { font-size:2.8rem; color:var(--gold-pale); transition:all 0.4s ease; position:relative; z-index:1; } .prod-cat-card:hover .prod-cat-img i { color:var(--gold); transform:scale(1.12); } .prod-cat-info { padding:20px; display:flex; flex-direction:column; flex:1; } .prod-cat-info h4 { color:var(--dark); font-size:0.95rem; margin-bottom:8px; font-family:'DM Sans',sans-serif; font-weight:600; } .prod-cat-info span { color:var(--body-secondary); font-size:0.76rem; line-height:1.65; } .prod-cat-info .enquire-btn { margin-top:auto; } /* ── ENQUIRE BUTTON ── */ .enquire-btn { background:var(--gold); color:#FFFFFF; box-shadow:0 4px 14px rgba(201,122,61,0.32); padding:10px 20px; font-size:0.72rem; letter-spacing:0.1em; border-radius:var(--radius); border:none; cursor:pointer; transition:all 0.3s ease; display:inline-flex; align-items:center; gap:6px; } .enquire-btn:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,122,61,0.48); } /* ── BRAND ENQUIRY BLOCK — light ── */ .brand-enquiry-block { margin-top:48px; padding:36px 40px; background:var(--section-bg); border:1px solid var(--border); border-radius:var(--radius-lg); position:relative; overflow:hidden; } .brand-enquiry-block::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-light) 60%,transparent); } .brand-enquiry-block h3 { color:var(--dark); font-size:1.5rem; margin-bottom:12px; font-family:'DM Sans',sans-serif; font-weight:500; letter-spacing:-0.025em; } .brand-enquiry-block p { color:var(--body-secondary); font-size:0.88rem; margin-bottom:28px; line-height:1.8; } /* ── CONTACT INFO CARD — keep dark ── */ .contact-info-card { background:#151614; border:none; border-radius:var(--radius-lg); padding:48px 40px; box-shadow:0 12px 40px rgba(0,0,0,0.25); } .contact-info-card h3 { color:#FFFFFF; font-size:1.8rem; margin-bottom:8px; font-family:'DM Sans',sans-serif; font-weight:500; letter-spacing:-0.025em; } .contact-info-card .eyebrow{ color:var(--gold); } .contact-info-card > p { color:rgba(255,255,255,0.6); line-height:1.8; margin-bottom:32px; font-size:0.88rem; } .contact-item-icon { width:44px; height:44px; border-radius:50%; border:1px solid rgba(201,122,61,0.28); background:rgba(201,122,61,0.08); display:flex; align-items:center; justify-content:center; color:var(--gold); transition:all 0.3s ease; flex-shrink:0; } .contact-item:hover .contact-item-icon { background:var(--gold); border-color:var(--gold); color:#FFFFFF; box-shadow:0 0 16px rgba(201,122,61,0.38); } .contact-item-text p { color:rgba(255,255,255,0.62); font-size:0.84rem; line-height:1.75; } .contact-item-text a { color:var(--gold); transition:color 0.3s ease; } .contact-item-text a:hover { color:var(--gold-light); } .contact-item-text strong { color:#FFFFFF; font-size:0.84rem; display:block; margin-bottom:4px; } /* ── CONTACT FORM — light ── */ .contact-form-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:52px 48px; box-shadow:var(--shadow-card); } .contact-form-card h3 { color:var(--dark); font-size:1.8rem; margin-bottom:8px; } .contact-form-card .sub{ color:var(--body-secondary); font-size:0.87rem; margin-bottom:36px; } .form-label { color:var(--body-secondary); font-size:0.65rem; letter-spacing:0.16em; font-weight:600; text-transform:uppercase; display:block; margin-bottom:10px; } .form-input { background:var(--bg); border:1px solid var(--border); color:var(--dark); border-radius:var(--radius-md); padding:14px 18px; font-family:'Inter',sans-serif; font-size:0.88rem; width:100%; transition:all 0.3s ease; outline:none; } .form-input::placeholder { color:var(--body-secondary); opacity:0.6; } .form-input:focus { border-color:var(--gold); background:var(--white); box-shadow:0 0 0 3px rgba(201,122,61,0.1); } .form-input option { background:var(--white); color:var(--dark); } .form-submit { background:var(--gold); color:#FFFFFF; width:100%; padding:17px; font-family:'Inter',sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; border:none; border-radius:var(--radius); cursor:pointer; transition:all 0.35s ease; box-shadow:0 6px 24px rgba(201,122,61,0.32); } .form-submit:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 10px 32px rgba(201,122,61,0.48); } /* ── MODAL — light ── */ .modal-overlay { background:rgba(20,20,18,0.6); backdrop-filter:blur(10px); } .modal { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:48px; box-shadow:0 20px 60px rgba(32,32,30,0.18); position:relative; overflow:hidden; } .modal::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); } .modal h3 { color:var(--dark); font-size:1.7rem; } .modal .sub { color:var(--body-secondary); font-size:0.85rem; } .modal-eyebrow { color:var(--gold); font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; display:block; margin-bottom:10px; } .modal-close { color:var(--body-secondary); background:var(--section-bg); border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; } .modal-close:hover { color:var(--dark); background:var(--border); } .modal .form-label { color:var(--body-secondary); } .modal .form-input { background:var(--bg); color:var(--dark); border-color:var(--border); } .modal .form-input:focus { border-color:var(--gold); } /* ── CATEGORY CARDS ── */ .cat-card-title { color:#FFFFFF; font-size:1.65rem; } .cat-card-sub { color:rgba(255,255,255,0.58); } /* ── RESPONSIVE EXTRAS ── */ @media(max-width:1024px) { .contact-form-card { padding:40px 36px; } .contact-info-card { padding:40px 32px; } } @media(max-width:768px) { .contact-form-card { padding:32px 24px; } .contact-info-card { padding:32px 24px; } .modal { padding:36px 28px; } .brand-enquiry-block { padding:28px 24px; } .products-sidebar { padding:20px 16px; } .gallery-page-grid { columns:2; } } @media(max-width:480px) { .trust-grid { grid-template-columns:1fr; } .product-cats-grid { grid-template-columns:1fr; } .gallery-page-grid { columns:1; } } /* ═══════════════════════════════════════════════════════ CONTACT PAGE — PREMIUM REDESIGN ═══════════════════════════════════════════════════════ */ /* ── HERO ── */ .cp-hero { height:400px; } .cp-hero-content { padding-bottom:64px; } .cp-hero-sub { font-family:'Inter',sans-serif; font-size:0.95rem; color:rgba(255,255,255,0.6); margin-top:14px; font-weight:300; letter-spacing:0.04em; max-width:420px; } /* ── SECTION ── */ .cp-section { background:var(--bg); padding:80px 0 100px; } /* ── SHARED EYEBROW ── */ .cp-eyebrow { display:block; font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; } /* ── TWO-COLUMN GRID ── */ .cp-grid { display:grid; grid-template-columns:40% 60%; gap:28px; align-items:start; margin-bottom:64px; } /* ══════════════════════════ LEFT — CONTACT INFO CARD ══════════════════════════ */ .cp-info-card { background:#151614; border:none; border-radius:16px; padding:44px 36px; position:relative; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.4); height:100%; display:flex; flex-direction:column; } /* Subtle radial glow top-right */ .cp-info-card::after { content:''; position:absolute; top:-60px; right:-60px; width:220px; height:220px; background:radial-gradient(circle, rgba(201,122,61,0.12) 0%, transparent 70%); pointer-events:none; } .cp-info-accent-bar { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 60%, transparent 100%); border-radius:16px 16px 0 0; } .cp-info-title { font-family:'DM Sans',sans-serif; font-size:clamp(1.7rem,2.8vw,2.2rem); color:#FFFFFF; font-weight:500; letter-spacing:-0.025em; line-height:1.1; margin-bottom:14px; } .cp-info-desc { font-family:'Inter',sans-serif; font-size:0.86rem; color:#A8A8A8; line-height:1.8; flex-shrink:0; } .cp-divider { width:100%; height:1px; background:rgba(255,255,255,0.07); margin:28px 0; flex-shrink:0; } /* ── CONTACT ITEMS ── */ .cp-items { display:flex; flex-direction:column; gap:22px; flex:1; } .cp-item { display:flex; gap:16px; align-items:flex-start; } .cp-icon { width:42px; height:42px; border-radius:50%; background:rgba(201,122,61,0.1); border:1px solid rgba(201,122,61,0.25); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:0.88rem; flex-shrink:0; transition:all 0.35s ease; } .cp-item:hover .cp-icon { background:var(--gold); border-color:var(--gold); color:#FFFFFF; box-shadow:0 0 18px rgba(201,122,61,0.38); transform:scale(1.08); } .cp-item-body { flex:1; min-width:0; } .cp-item-label { display:block; font-family:'Inter',sans-serif; font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; font-weight:600; } .cp-item-text { font-family:'Inter',sans-serif; font-size:0.84rem; color:#C8C8C8; line-height:1.75; margin:0; } .cp-item-text a { color:#C8C8C8; transition:color 0.3s ease; } .cp-item-text a:hover { color:var(--gold); } /* ── ACTION BUTTONS ── */ .cp-action-btns { display:flex; gap:12px; flex-shrink:0; } .cp-btn-wa, .cp-btn-call { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 16px; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:0.8125rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; transition:all 0.35s ease; cursor:pointer; } .cp-btn-wa { background:#25D366; color:#FFFFFF; box-shadow:0 6px 20px rgba(37,211,102,0.22); } .cp-btn-wa:hover { background:#1da851; transform:translateY(-2px); box-shadow:0 10px 28px rgba(37,211,102,0.35); } .cp-btn-call { background:var(--gold); color:#FFFFFF; box-shadow:0 6px 20px rgba(201,122,61,0.28); } .cp-btn-call:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 10px 28px rgba(201,122,61,0.42); } /* ══════════════════════════ RIGHT — ENQUIRY FORM CARD ══════════════════════════ */ .cp-form-card { background:var(--white); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.4); display:flex; flex-direction:column; } .cp-form-header { padding:40px 44px 32px; border-bottom:1px solid var(--border); background:var(--section-bg); position:relative; } .cp-form-header::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold-light) 70%, transparent 100%); } .cp-form-title { font-family:'DM Sans',sans-serif; font-size:clamp(1.6rem,2.5vw,2rem); color:var(--dark); font-weight:500; letter-spacing:-0.025em; margin-bottom:8px; line-height:1.1; } .cp-form-sub { font-family:'Inter',sans-serif; font-size:0.85rem; color:var(--body-secondary); line-height:1.7; margin:0; } .cp-form-body { padding:36px 44px 44px; flex:1; } /* ── FORM ROW ── */ .cp-form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .cp-form-group { margin-bottom:20px; } .cp-form-group:last-child { margin-bottom:0; } /* ── LABELS ── */ .cp-label { display:block; font-family:'Inter',sans-serif; font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--body-secondary); font-weight:600; margin-bottom:9px; } .cp-required { color:var(--gold); margin-left:2px; } .cp-optional { color:#606060; font-weight:400; text-transform:none; letter-spacing:0; font-size:0.75em; } /* ── INPUTS ── */ .cp-input { display:block; width:100%; padding:13px 16px; background:var(--bg); border:1px solid var(--border); border-radius:8px; font-family:'Inter',sans-serif; font-size:0.88rem; color:var(--dark); outline:none; transition:border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; -webkit-appearance:none; appearance:none; } .cp-input::placeholder { color:var(--body-secondary); opacity:0.6; } .cp-input:focus { border-color:var(--gold); background:var(--white); box-shadow:0 0 0 3px rgba(201,122,61,0.1); } .cp-input:hover:not(:focus) { border-color:rgba(201,122,61,0.3); } .cp-select { cursor:pointer; } .cp-select option { background:var(--white); color:var(--dark); } .cp-textarea { resize:vertical; min-height:110px; line-height:1.65; } /* ── SUBMIT BUTTON ── */ .cp-submit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:16px 24px; margin-top:28px; background:var(--gold); color:#FFFFFF; border:none; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:0.8125rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:all 0.35s ease; box-shadow:0 8px 28px rgba(201,122,61,0.32); } .cp-submit:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 14px 40px rgba(201,122,61,0.48); } .cp-submit:active { transform:translateY(0); } /* ── MAP ── */ .cp-map-wrap { background:var(--white); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.4); } .cp-map-header { padding:32px 40px 24px; border-bottom:1px solid var(--border); background:var(--section-bg); } .cp-map-title { font-family:'DM Sans',sans-serif; font-size:1.4rem; color:var(--dark); font-weight:500; letter-spacing:-0.025em; margin:0; } .cp-map-embed { display:block; } .cp-map-embed iframe { display:block; filter:brightness(0.85) saturate(0.7); } /* ── RESPONSIVE ── */ @media(max-width:1024px) { .cp-grid { grid-template-columns:45% 55%; gap:24px; } .cp-form-header, .cp-form-body { padding-left:36px; padding-right:36px; } .cp-info-card { padding:38px 30px; } } @media(max-width:768px) { .cp-grid { grid-template-columns:1fr; gap:20px; } .cp-info-card { padding:36px 28px; } .cp-form-header { padding:32px 28px 24px; } .cp-form-body { padding:28px; } .cp-form-row { grid-template-columns:1fr; } .cp-section { padding:60px 0 80px; } .cp-map-header { padding:24px 28px 20px; } .cp-hero { height:340px; } .cp-hero-sub { display:none; } } @media(max-width:480px) { .cp-action-btns { flex-direction:column; } .cp-btn-wa, .cp-btn-call { flex:none; width:100%; } .cp-form-body { padding:24px 20px; } .cp-form-header { padding:28px 20px 20px; } .cp-info-card { padding:28px 20px; } .cp-map-header { padding:20px; } } /* ══════════════════════════════════════ OUR LOCATIONS — 3-SHOWROOM SECTION ══════════════════════════════════════ */ .cp-locations-section { background: var(--section-bg); padding: 80px 0 100px; } .cp-locs-header { text-align: center; margin-bottom: 60px; } .cp-locs-header .cp-eyebrow { font-size: 0.6875rem; letter-spacing: 0.16em; } .cp-locs-title { font-family: 'DM Sans', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--dark); font-weight: 500; letter-spacing: -0.025em; margin-top: 12px; line-height: 1.1; } /* — Location block — The section is built from the CMS list, so this has to hold for ANY number of locations and any length of text. Two rules carry that: minmax(0, 1fr) rather than 1fr — a grid track sized `1fr` has an automatic minimum of min-content, so one long unbroken word (a pasted maps URL, a long showroom name) pushes the track wider than its share and the card overflows the container, taking the page into horizontal scroll. The explicit 0 minimum lets the track actually shrink and the text wrap. no fixed height anywhere — the block is grid-auto height and the info panel is a column flexbox, so a card with a long address simply gets taller and the map beside it stretches to match. Nothing is clipped. */ .cp-loc-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 40px rgba(32,32,30,0.10); border: 1px solid var(--border); margin-bottom: 28px; } .cp-loc-block:last-child { margin-bottom: 0; } /* A location with no Google Maps embed: one full-width panel rather than an empty grey half. */ .cp-loc-block--nomap { grid-template-columns: minmax(0, 1fr); } /* Info panel */ .cp-loc-info { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; /* Flex/grid items default to min-width:auto, which is the other half of the overflow above — without this the panel refuses to go below its longest word even when the track allows it. */ min-width: 0; } /* Long values must wrap, not overhang the card. `anywhere` rather than `break-word` so a single unbroken token (an address with no spaces, a pasted link) breaks too, and it still prefers to break at spaces when it can. */ .cp-loc-name, .cp-loc-tagline, .cp-loc-specialty, .cp-loc-addr-text { overflow-wrap: anywhere; } .cp-loc-num { display: block; font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .cp-loc-name { font-family: 'DM Sans', sans-serif; font-size: clamp(1.4rem, 2.2vw, 1.75rem); color: var(--dark); font-weight: 500; letter-spacing: -0.025em; margin-bottom: 6px; line-height: 1.1; } /* Second line of a location's identity, between the name and the specialty — used where the showroom trades under a name plus a parent company, as Location 01 does. Only the cards that carry the element are affected. Sized between .cp-loc-name and .cp-loc-specialty so it reads as part of the name block rather than as another label, and left in sentence case because it is a company name, not a category. */ .cp-loc-tagline { font-family: 'Inter', sans-serif; font-size: 0.8125rem; font-weight: 400; color: var(--body-secondary); margin-bottom: 14px; line-height: 1.4; } .cp-loc-specialty { font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body-secondary); margin-bottom: 32px; } .cp-loc-addr-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 36px; min-width: 0; } .cp-loc-addr-row > i { color: var(--gold); font-size: 0.92rem; margin-top: 3px; flex-shrink: 0; } .cp-loc-addr-text { font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--body-secondary); line-height: 1.8; min-width: 0; } .cp-loc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; background: var(--gold); color: #FFFFFF; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: all 0.35s ease; align-self: flex-start; box-shadow: 0 6px 20px rgba(201,122,61,0.26); /* The button is the widest fixed-ish element in the panel; cap it and let the label wrap so a narrow phone column never pushes it past the card edge. */ max-width: 100%; text-align: center; overflow-wrap: anywhere; } .cp-loc-btn:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(201,122,61,0.40); color: #FFFFFF; } /* Map panel */ .cp-loc-map { min-height: 360px; position: relative; overflow: hidden; } .cp-loc-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: none; position: absolute; inset: 0; } /* Alternating layout (desktop only) */ @media(min-width: 769px) { .cp-loc-flip .cp-loc-map { order: -1; } } /* Responsive */ @media(max-width: 1024px) { .cp-loc-info { padding: 44px 40px; } } @media(max-width: 768px) { /* Stack: info above map on every card, including the flipped ones. The `order:-1` above is scoped to >=769px, so below it the DOM order (info, then map) wins and a phone always reads the address before the map. */ .cp-loc-block, .cp-loc-flip, .cp-loc-block--nomap { grid-template-columns: minmax(0, 1fr); } .cp-loc-info { padding: 36px 28px; } .cp-loc-map, .cp-loc-map iframe { min-height: 280px; position: relative; } .cp-loc-map iframe { position: static; height: 280px; } .cp-locations-section { padding: 60px 0 80px; } .cp-locs-header { margin-bottom: 40px; } } @media(max-width: 480px) { .cp-loc-info { padding: 28px 20px; } .cp-loc-specialty { margin-bottom: 24px; } .cp-loc-addr-row { margin-bottom: 28px; } } /* ═══════════════════════════════════════════════════════ GLOBAL SCROLL ANIMATIONS ═══════════════════════════════════════════════════════ */ .fade-up, .fade-left, .fade-right, .fade-in, .scale-in { opacity: 0; transition-property: opacity, transform; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity, transform; } .fade-up { transform: translateY(40px); } .fade-left { transform: translateX(-40px); } .fade-right { transform: translateX(40px); } .scale-in { transform: scale(0.93); } /* .fade-in has no transform — opacity only */ .fade-up.active, .fade-left.active, .fade-right.active, .fade-in.active, .scale-in.active { opacity: 1; transform: none; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .fade-up, .fade-left, .fade-right, .fade-in, .scale-in, .reveal, .reveal-stagger { opacity: 1 !important; transform: none !important; transition: none !important; } .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── FOOTER CREDIT ── */ .footer-credit { display: block; font-size: 0.68rem; color: var(--hf-text-faint); font-style: italic; letter-spacing: 0.06em; margin-top: 4px; } /* ═══════════════════════════════════════════════════════ 3-LEVEL PRODUCT CATALOGUE SYSTEM ═══════════════════════════════════════════════════════ */ /* ── BREADCRUMB ── */ .catalogue-breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:0.74rem; color:var(--body-secondary); margin-bottom:28px; font-family:'Inter',sans-serif; } .catalogue-breadcrumb a { color:var(--body-secondary); transition:color 0.2s ease; cursor:pointer; } .catalogue-breadcrumb a:hover { color:var(--gold); } .catalogue-breadcrumb .sep { color:var(--border); font-size:0.7rem; } .catalogue-breadcrumb .current { color:var(--dark); font-weight:600; } /* ── BACK BUTTON ── */ .catalogue-back { display:inline-flex; align-items:center; gap:8px; font-size:0.76rem; font-family:'DM Sans',sans-serif; font-weight:600; color:var(--body-secondary); cursor:pointer; margin-bottom:24px; letter-spacing:0.04em; text-transform:uppercase; transition:color 0.2s ease; } .catalogue-back:hover { color:var(--gold); } .catalogue-back i { font-size:0.7rem; } /* ── CATEGORY FILTER STRIP ── */ .brand-cat-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; overflow-x:auto; padding-bottom:4px; } .brand-cat-filter::-webkit-scrollbar { height:2px; } .brand-cat-filter::-webkit-scrollbar-thumb { background:var(--gold-pale); } .cat-filter-btn { padding:9px 22px; background:var(--white); border:1px solid var(--border); border-radius:40px; font-size:0.73rem; font-weight:600; font-family:'DM Sans',sans-serif; letter-spacing:0.06em; text-transform:uppercase; color:var(--body-secondary); cursor:pointer; transition:all 0.28s ease; white-space:nowrap; flex-shrink:0; } .cat-filter-btn:hover { background:rgba(201,122,61,0.07); color:var(--dark); border-color:rgba(201,122,61,0.3); } .cat-filter-btn.active { background:var(--gold); color:#FFFFFF; border-color:var(--gold); box-shadow:0 4px 14px rgba(201,122,61,0.28); } /* ── CATEGORY CARDS (Level 1 → 2) ── */ .brand-cats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; margin-bottom:48px; } .brand-cat-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94); box-shadow:var(--shadow-card); display:flex; flex-direction:column; } .brand-cat-card:hover { transform:translateY(-5px); border-color:rgba(201,122,61,0.4); box-shadow:0 16px 48px rgba(32,32,30,0.13); } .brand-cat-card-img { aspect-ratio:16/10; overflow:hidden; background:var(--section-bg); display:flex; align-items:center; justify-content:center; position:relative; } .brand-cat-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; } .brand-cat-card:hover .brand-cat-card-img img { transform:scale(1.06); } .brand-cat-card-img i { font-size:2.4rem; color:var(--gold-pale); } .brand-cat-card-body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; } .brand-cat-card-name { font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.97rem; letter-spacing:-0.01em; color:var(--dark); margin-bottom:6px; } .brand-cat-card-desc { font-family:'Inter',sans-serif; font-size:0.8rem; color:var(--body-secondary); line-height:1.7; flex:1; margin-bottom:16px; } .brand-cat-card-cta { display:inline-flex; align-items:center; gap:6px; font-size:0.6875rem; font-family:'DM Sans',sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); transition:gap 0.2s ease; } .brand-cat-card:hover .brand-cat-card-cta { gap:10px; } .brand-cat-card-cta i { font-size:0.65rem; } /* ── CATALOGUE HEADER (Level 2) ── */ .catalogue-header { margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid var(--border); } .catalogue-header h2 { font-family:'DM Sans',sans-serif; font-weight:500; font-size:clamp(1.6rem,3.5vw,2.4rem); letter-spacing:-0.025em; color:var(--dark); margin-bottom:10px; } .catalogue-header p { font-size:0.88rem; color:var(--body-secondary); line-height:1.85; max-width:560px; } /* ── PRODUCT GRID (Level 2 → cards) ── */ .product-catalogue-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:48px; } @media(max-width:1100px) { .product-catalogue-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:600px) { .product-catalogue-grid { grid-template-columns:1fr; } } /* ── PRODUCT CARD ── */ .product-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94); box-shadow:var(--shadow-card); } .product-card:hover { transform:translateY(-4px); border-color:rgba(201,122,61,0.35); box-shadow:0 14px 40px rgba(32,32,30,0.12); } .product-card-img { aspect-ratio:4/3; overflow:hidden; background:var(--section-bg); display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; } .product-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; } .product-card:hover .product-card-img img { transform:scale(1.05); } .product-card-img-placeholder { display:flex; flex-direction:column; align-items:center; gap:10px; } .product-card-img-placeholder i { font-size:2.2rem; color:var(--gold-pale); } .product-card-img-placeholder span { font-size:0.64rem; color:var(--body-secondary); letter-spacing:0.12em; text-transform:uppercase; } .product-card-zoom { position:absolute; bottom:10px; right:10px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; color:var(--dark); font-size:0.8rem; opacity:0; transition:opacity 0.25s ease; box-shadow:0 2px 8px rgba(0,0,0,0.12); } .product-card:hover .product-card-zoom { opacity:1; } .product-card-body { padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; } .product-card-name { font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.94rem; letter-spacing:-0.01em; color:var(--dark); margin-bottom:4px; } .product-card-model { font-size:0.6875rem; color:var(--gold); font-weight:600; font-family:'Inter',sans-serif; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; } .product-card-desc { font-family:'Inter',sans-serif; font-size:0.8rem; color:var(--body-secondary); line-height:1.7; flex:1; margin-bottom:16px; } .product-card-actions { display:flex; gap:10px; } .product-card-view { flex:1; padding:9px 14px; background:var(--section-bg); border:1px solid var(--border); border-radius:var(--radius); font-size:0.6875rem; font-family:'DM Sans',sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--dark); cursor:pointer; transition:all 0.25s ease; display:inline-flex; align-items:center; justify-content:center; gap:6px; } .product-card-view:hover { background:var(--border); color:var(--dark); } .product-card-enquire { flex:1; padding:9px 14px; background:var(--gold); border:none; border-radius:var(--radius); font-size:0.6875rem; font-family:'DM Sans',sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#FFFFFF; cursor:pointer; transition:all 0.25s ease; display:inline-flex; align-items:center; justify-content:center; gap:6px; } .product-card-enquire:hover { background:var(--gold-hover); transform:translateY(-1px); box-shadow:0 4px 14px rgba(201,122,61,0.3); } /* ── VIEW COLLECTION BUTTON (on category cards) ── */ .view-collection-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; background:transparent; border:1px solid var(--border); border-radius:var(--radius); font-size:0.6875rem; font-family:'DM Sans',sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--dark); cursor:pointer; transition:all 0.28s ease; margin-top:12px; } .view-collection-btn:hover { background:var(--gold); color:#FFFFFF; border-color:var(--gold); } /* ── PRODUCTS PAGE SECTION ── */ .products-page-section { background: #F5F1EA; } /* Backstop for the Products page's injected brand listing. #productContent ships empty and is filled once /api/public/brands resolves. The loader normally covers that wait (loaderWaitFor in common.js), but its 4s hard ceiling can lift it first on a very slow API — and then the footer would be sitting just under the hero, in view, ready to be shoved down when the grid lands. Reserving a viewport of height keeps the footer below the fold, so the grid arriving is never a visible jump. The rule stops applying the instant the container has children, which is why it costs nothing on a normal load. */ .products-page-section #productContent:empty { min-height: 100vh; } /* ── LEVEL 2/3 INNER PAGE WRAPPER ── */ .pb-inner-page { padding: 56px 0 80px; background: #F5F1EA; } /* ──────────────────────────────────────────────────────── LEVEL 1 — BRAND LISTING ──────────────────────────────────────────────────────── */ /* Intro */ .pb-intro { padding: 52px 0 28px; background: #F5F1EA; } .pb-intro h2 { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -0.025em; color: var(--dark); margin-bottom: 12px; } .pb-intro p { font-size: 0.9rem; color: var(--body-secondary); max-width: 540px; line-height: 1.85; } /* Category sections */ .pb-cat-section { padding: 64px 0; } .pb-cat-section--light { background: #F5F1EA; } .pb-cat-section--warm { background: #ECE6DC; } /* Category header */ .pb-cat-eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .pb-cat-title { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: clamp(1.3rem, 2.5vw, 1.75rem); letter-spacing: -0.025em; color: var(--dark); margin-bottom: 8px; line-height: 1.15; } .pb-cat-desc { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--body-secondary); max-width: 480px; line-height: 1.85; margin-bottom: 36px; } /* Brand cards grid — `grid-auto-rows: 1fr` equalises every row to the tallest one, so cards match in height across rows even when descriptions wrap to a different number of lines. */ .pb-brands-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; grid-auto-rows: 1fr; } /* Regular brand card */ .pb-brand-card { background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px; padding: 24px 16px 20px; text-align: center; cursor: pointer; transition: all 0.32s ease; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; min-height: 210px; justify-content: center; } .pb-brand-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity 0.32s ease; } .pb-brand-card:hover { transform: translateY(-4px); border-color: rgba(201,122,61,0.45); box-shadow: 0 14px 40px rgba(32,32,30,0.14), 0 0 0 1px rgba(201,122,61,0.1); } .pb-brand-card:hover::after { opacity: 1; } /* Logo area — one fixed-height box shared by every brand card. The logo is sized against this box only (max-width/max-height 100% + object-fit: contain), so any aspect ratio shrinks to fit without being cropped, stretched, or spilling onto the name/description below. `flex: none` stops the card's column flex from squashing the box, and `overflow: hidden` is the hard backstop. The inner padding also leaves room for the 1.06 hover zoom, so the zoom never reaches the edges. */ .pb-logo-area { height: 100px; flex: none; width: 100%; display: flex; align-items: center; justify-content: center; padding: 8px 10px; box-sizing: border-box; overflow: hidden; } .pb-logo-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 0.4s ease; } .pb-brand-card:hover .pb-logo-img { transform: scale(1.06); } /* No per-brand colour treatment here either — see the note on .brand-logo--artize above for why the one that used to live here was removed. */ /* Card text */ .pb-brand-name { font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--dark); transition: color 0.3s ease; margin-top: 4px; } .pb-brand-card:hover .pb-brand-name { color: var(--gold); } .pb-brand-sub { font-family: 'Inter', sans-serif; font-size: 0.7rem; color: var(--body-secondary); line-height: 1.4; } .pb-brand-cta { font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.22s ease; margin-top: 2px; } .pb-brand-card:hover .pb-brand-cta { opacity: 1; } /* Imported Ranges card */ .pb-imported-card { background: #111210; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 28px 20px 24px; text-align: center; cursor: pointer; transition: all 0.32s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.18); position: relative; overflow: hidden; min-height: 210px; } .pb-imported-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(201,122,61,0.1) 0%, transparent 65%); pointer-events: none; } .pb-imported-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.24); border-color: rgba(201,122,61,0.35); } .pb-imported-label { font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; } .pb-imported-title { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.2; } .pb-imported-sub { font-family: 'Inter', sans-serif; font-size: 0.7rem; color: rgba(255,255,255,0.42); line-height: 1.5; } .pb-imported-arrow { font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 8px; display: inline-block; transition: letter-spacing 0.25s ease, transform 0.25s ease; } .pb-imported-card:hover .pb-imported-arrow { letter-spacing: 0.2em; transform: translateX(2px); } /* ──────────────────────────────────────────────────────── LEVEL 2 — BRAND ITEMS (Category grid, image + name) ──────────────────────────────────────────────────────── */ .brand-page-header { margin-bottom:40px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .brand-page-logo { height:52px; display:flex; align-items:center; } .brand-page-logo img { max-width:120px; max-height:48px; width:auto; height:auto; object-fit:contain; } .brand-page-logo-text { font-family:'DM Sans',sans-serif; font-weight:600; font-size:1.8rem; letter-spacing:-0.025em; color:var(--dark); } .brand-page-info { flex:1; } .brand-page-info h1 { font-family:'DM Sans',sans-serif; font-weight:500; font-size:clamp(1.6rem,3.5vw,2.4rem); letter-spacing:-0.025em; color:var(--dark); margin-bottom:6px; } .brand-page-info p { font-size:0.87rem; color:var(--body-secondary); line-height:1.8; max-width:520px; } .brand-items-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:48px; } .brand-item-card { border-radius:12px; overflow:hidden; cursor:pointer; position:relative; aspect-ratio:4/3; background:var(--section-bg); transition:transform 0.32s ease, box-shadow 0.32s ease; box-shadow:var(--shadow-card); } .brand-item-card:hover { transform:translateY(-4px); box-shadow:0 14px 40px rgba(32,32,30,0.15); } .brand-item-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.48s ease; } .brand-item-card:hover img { transform:scale(1.07); } .brand-item-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:var(--gold-pale); } .brand-item-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(20,20,18,0.8) 0%, rgba(20,20,18,0.12) 55%, transparent 100%); z-index:1; } .brand-item-name { position:absolute; bottom:0; left:0; right:0; padding:16px 20px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:1.05rem; color:#FFFFFF; z-index:2; letter-spacing:-0.01em; } .brand-item-card:hover .brand-item-name { color:var(--gold-light); } /* ──────────────────────────────────────────────────────── RESPONSIVE ──────────────────────────────────────────────────────── */ @media(max-width:1100px) { .pb-brands-grid { grid-template-columns: repeat(3, 1fr); } .brand-items-grid { grid-template-columns:repeat(3,1fr); } .product-catalogue-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:768px) { .pb-brands-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .pb-cat-section { padding: 48px 0; } .pb-intro { padding: 36px 0 16px; } .pb-cat-desc { margin-bottom: 24px; } .brand-items-grid { grid-template-columns:repeat(2,1fr); gap:14px; } .product-catalogue-grid { grid-template-columns:repeat(2,1fr); gap:14px; } .brand-page-header { flex-direction:column; align-items:flex-start; gap:12px; } } @media(max-width:480px) { .pb-brands-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .pb-brand-card { padding: 18px 12px 16px; min-height: 180px; } .pb-logo-area { height: 80px; } .brand-items-grid { grid-template-columns:repeat(2,1fr); gap:10px; } .product-catalogue-grid { grid-template-columns:1fr; } .product-card-actions { flex-direction:column; gap:8px; } .brand-item-name { font-size:0.9rem; padding:12px 14px; } } /* ═══════════════════════════════════════════════════════ MULTI-PAGE PREMIUM ENHANCEMENTS v4 ═══════════════════════════════════════════════════════ */ /* Body base — premium ivory */ body { background: #F7F4EF; } /* Remove single-page display toggling — not needed in multi-page */ .page { display: block; } /* ── PREMIUM SECTION BACKGROUNDS ── */ .testimonials-section { background: #F3EFE8 !important; } .map-section { background: #EAE3D8 !important; } .cp-section { background: #F3EFE8 !important; } .cp-locations-section { background: #EEE8DE !important; } .pb-inner-page { background: #F5F1EA !important; } .pb-intro { background: #F5F1EA !important; } .pb-cat-section--light { background: #F5F1EA !important; } .pb-cat-section--warm { background: #ECE6DC !important; } .about-trust-section { background: #EEE8DE !important; } .brand-page-section { background: #F5F1EA !important; } .brand-related-section { background: #EEE8DE !important; } .brand-gallery-section { background: #EAE3D8 !important; } .brand-cat-section { background: #F3EFE8 !important; } .brand-cta-section { background: #151614; } .cat-page-section { background: #F7F4EF !important; } .cat-features-section { background: #EEE8DE !important; } /* ── LOGO VISIBILITY — DARK PREMIUM BACKGROUNDS ── */ .logo-bg-dark { background: linear-gradient(145deg, #1F1D1A 0%, #272420 100%) !important; box-shadow: inset 0 2px 8px rgba(0,0,0,0.18) !important; } .logo-bg-dark img { filter: brightness(1.12) !important; } /* ── ENHANCED CARD SYSTEM ── */ .brand-card { border-radius: 10px; box-shadow: 0 2px 8px rgba(32,32,30,0.07), 0 8px 24px rgba(32,32,30,0.09); border: 1px solid rgba(222,217,208,0.9); transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); } .brand-card:hover { box-shadow: 0 4px 12px rgba(32,32,30,0.08), 0 20px 56px rgba(32,32,30,0.14), 0 0 0 1px rgba(201,122,61,0.14); transform: translateY(-5px); } .trust-card { box-shadow: 0 2px 8px rgba(32,32,30,0.06), 0 8px 24px rgba(32,32,30,0.08); border: 1px solid rgba(222,217,208,0.8); } .trust-card:hover { box-shadow: 0 20px 56px rgba(32,32,30,0.14), 0 0 0 1px rgba(201,122,61,0.1); } .prod-cat-card { box-shadow: 0 2px 8px rgba(32,32,30,0.06), 0 8px 24px rgba(32,32,30,0.08); } .pb-brand-card { box-shadow: 0 2px 8px rgba(32,32,30,0.06), 0 8px 24px rgba(32,32,30,0.09); border: 1px solid rgba(222,217,208,0.9); } .pb-brand-card:hover { box-shadow: 0 20px 56px rgba(32,32,30,0.14), 0 0 0 1px rgba(201,122,61,0.12); } .brand-cat-card { box-shadow: 0 2px 8px rgba(32,32,30,0.06), 0 8px 24px rgba(32,32,30,0.08); } .brand-cat-card:hover { box-shadow: 0 20px 56px rgba(32,32,30,0.14); } .brand-item-card { box-shadow: 0 2px 8px rgba(32,32,30,0.07), 0 8px 24px rgba(32,32,30,0.09); } .brand-item-card:hover { box-shadow: 0 20px 56px rgba(32,32,30,0.15); } /* ── TYPOGRAPHY IMPROVEMENTS ── */ .section-title { letter-spacing: -0.03em; } .section-sub { line-height: 2.0; } h1, h2, h3 { letter-spacing: -0.03em; } p { line-height: 1.85; } /* ── FOOTER IMPROVEMENTS ── */ .footer-grid { gap: 40px; } .footer-col h5 { letter-spacing: 0.12em; margin-bottom: 22px; } .footer-col ul { gap: 12px; } .footer-contact-item { margin-bottom: 14px; } /* ── STAFF ACCESS BUTTON ── */ .footer-staff { } .footer-admin-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border:1px solid #C8924A; border-radius:8px; background:transparent; color:#C8924A; font-family:'DM Sans',sans-serif; font-size:0.775rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease; white-space:nowrap; cursor:pointer; margin-top:2px; } .footer-admin-btn:hover { background:#C8924A; color:#111210; transform:translateY(-2px); box-shadow:0 6px 20px rgba(200,146,74,0.28); } .footer-admin-btn i { font-size:0.8rem; } /* ── BREADCRUMB ── */ .page-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.76rem; color: var(--body-secondary); padding: 18px 0; font-family: 'Inter', sans-serif; border-bottom: 1px solid var(--border); margin-bottom: 28px; } .page-breadcrumb a { color: var(--body-secondary); transition: color 0.2s; } .page-breadcrumb a:hover { color: var(--gold); } .page-breadcrumb .sep { color: var(--border); font-size: 0.7rem; } .page-breadcrumb .current { color: var(--dark); font-weight: 600; } /* ── BRAND PAGE SPECIFIC ── */ .brand-hero-logo { display: inline-flex; align-items: center; justify-content: center; height: 64px; padding: 10px 20px; border-radius: 8px; margin-bottom: 14px; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); } .brand-hero-logo img { max-width: 160px; max-height: 44px; object-fit: contain; } .brand-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } /* Category page specific */ .cat-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(201,122,61,0.18); color: var(--gold-light); padding: 6px 16px; border-radius: 40px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; font-family: 'Inter', sans-serif; } .cat-features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 48px 0; } .cat-feature-card { background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px; padding: 28px 24px; text-align: center; box-shadow: 0 2px 8px rgba(32,32,30,0.06); transition: all 0.35s ease; } .cat-feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(32,32,30,0.12); border-color: rgba(201,122,61,0.3); } .cat-feature-icon { font-size: 1.6rem; color: var(--gold); margin-bottom: 14px; } .cat-feature-title { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; color: var(--dark); } .cat-feature-text { font-size: 0.8rem; color: var(--body-secondary); line-height: 1.7; } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .brand-related-grid { grid-template-columns: 1fr 1fr; } .cat-features-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .brand-related-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .cat-features-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════ UNIFIED WARM BACKGROUND — SINGLE CONSISTENT TONE Overrides all previous section-specific backgrounds. One premium warm beige (#EEEAE3) across every light section. Cards stay #FFFFFF. Dark sections stay as-is. ═══════════════════════════════════════════════════════ */ :root { --bg: #EEEAE3; --section-bg: #EEEAE3; --section-alt: #EEEAE3; --stone: #EEEAE3; --stone-dark: #EEEAE3; --concrete: #EEEAE3; } body { background: #EEEAE3; } .section { background: #EEEAE3; } .section-sm { background: #EEEAE3; } /* Section-specific overrides — all unified */ .testimonials-section { background: #EEEAE3 !important; } .gallery-section { background: #EEEAE3 !important; } .map-section { background: #EEEAE3 !important; } .about-trust-section { background: #EEEAE3 !important; } .cp-section { background: #EEEAE3 !important; } .cp-locations-section { background: #EEEAE3 !important; } .pb-inner-page { background: #EEEAE3 !important; } .pb-intro { background: #EEEAE3 !important; } .pb-cat-section--light { background: #EEEAE3 !important; } .pb-cat-section--warm { background: #EEEAE3 !important; } .brand-page-section { background: #EEEAE3 !important; } .brand-related-section { background: #EEEAE3 !important; } .brand-gallery-section { background: #EEEAE3 !important; } .brand-cat-section { background: #EEEAE3 !important; } .cat-page-section { background: #EEEAE3 !important; } .cat-features-section { background: #EEEAE3 !important; } .products-page-section { background: #EEEAE3 !important; } .gallery-page-section { background: #EEEAE3 !important; } /* Card backgrounds stay white — untouched */ .brand-card, .trust-card, .testimonial-card, .prod-cat-card, .pb-brand-card, .brand-cat-card, .brand-item-card, .cat-feature-card, .contact-form-card, .cp-form-card, .vm-card, .product-card { background: #FFFFFF; } /* ── DARK SECTION BACKGROUND RESTORE ────────────────────────────────────── The global `.section { background: #EEEAE3 }` rule above has the same CSS specificity as these per-section rules and appears later in the file, so it overrides them. Restoring here with !important so these dark sections keep their intended backgrounds and their white text stays visible. ─────────────────────────────────────────────────────────────────────────── */ .brands-section { background: #111210 !important; } .why-section { background: #151614 !important; } /* ══════════════════════════════════════════════════════ PRODUCT DETAIL PAGE — Level 4 ══════════════════════════════════════════════════════ */ .pd-page { padding: 0; } /* ── Main 2-column layout ── */ .pd-main { display: grid; grid-template-columns: 52% 1fr; gap: 56px; align-items: start; padding-bottom: 56px; } /* ── LEFT: Gallery Column ── */ .pd-gallery-col { position: sticky; top: 110px; } .pd-hero-img-wrap { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; position: relative; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; box-shadow: var(--shadow-card); } #pdHeroImg { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 0.25s ease; } .pd-fullimg-btn { position: absolute; bottom: 14px; right: 14px; background: rgba(17,18,16,0.72); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--radius); padding: 8px 16px; font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all 0.25s ease; display: flex; align-items: center; gap: 7px; } .pd-fullimg-btn:hover { background: var(--gold); border-color: var(--gold); } /* Thumbnails */ .pd-thumbs { display: flex; gap: 8px; flex-wrap: wrap; } .pd-thumb { width: 72px; height: 72px; border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--border); cursor: pointer; transition: all 0.22s ease; background: #FFFFFF; flex-shrink: 0; } .pd-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .pd-thumb:hover { border-color: rgba(201,122,61,0.5); } .pd-thumb.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,122,61,0.2); } /* ── RIGHT: Info Column ── */ .pd-brand-badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); background: rgba(201,122,61,0.1); border: 1px solid rgba(201,122,61,0.25); border-radius: 100px; padding: 5px 14px; margin-bottom: 12px; } .pd-cat-tag { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: var(--body-secondary); letter-spacing: 0.04em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .pd-cat-tag::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--border); flex-shrink: 0; } .pd-product-name { font-family: 'DM Sans', sans-serif; font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; color: var(--dark); line-height: 1.1; margin-bottom: 6px; } .pd-model-tag { font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } /* Action Buttons */ .pd-action-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .pd-btn-fullimg { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark); cursor: pointer; transition: all 0.25s ease; } .pd-btn-fullimg:hover { background: var(--section-bg); border-color: var(--dark); } .pd-btn-enquire { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; background: var(--gold); border: none; border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; cursor: pointer; transition: all 0.25s ease; } .pd-btn-enquire:hover { background: var(--gold-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,122,61,0.35); } .pd-btn-wa { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; background: #25D366; border: none; border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; cursor: pointer; transition: all 0.25s ease; text-decoration: none; } .pd-btn-wa:hover { background: #1daa52; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,211,102,0.35); } /* Description */ .pd-desc-text { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--body-secondary); line-height: 1.85; margin-bottom: 24px; } /* Features */ .pd-features { margin-bottom: 0; } .pd-features-label { font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark); margin-bottom: 14px; } .pd-feature-list { list-style: none; display: flex; flex-direction: column; gap: 11px; } .pd-feature-list li { display: flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--body); } .pd-feature-list li i { color: var(--gold); font-size: 0.8rem; flex-shrink: 0; } /* ── Product Information Table ── */ .pd-info-section { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 56px; box-shadow: var(--shadow-card); } .pd-info-section-header { padding: 22px 36px; border-bottom: 1px solid var(--border); background: var(--section-bg); } .pd-info-section-title { font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; color: var(--dark); margin: 0; } .pd-info-table { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 36px 4px; } .pd-info-row { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); } .pd-info-row:nth-last-child(-n+2) { border-bottom: none; } .pd-info-label { font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-secondary); min-width: 96px; flex-shrink: 0; } .pd-info-value { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--dark); font-weight: 500; } /* ── Related Products ── */ .pd-related-section { margin-bottom: 56px; } .pd-related-hd { margin-bottom: 28px; } .pd-related-eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; } .pd-related-title { font-family: 'DM Sans', sans-serif; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 500; letter-spacing: -0.025em; color: var(--dark); margin: 0; } .pd-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pd-related-grid .product-card-img img { object-fit: contain; } /* ── Bottom CTA ── */ .pd-cta-section { padding: 80px 0; } .pd-cta-inner { text-align: center; } .pd-cta-eyebrow { font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); display: block; margin-bottom: 16px; } .pd-cta-title { font-family: 'DM Sans', sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem); color: #FFFFFF; font-weight: 500; letter-spacing: -0.025em; margin-bottom: 10px; line-height: 1.15; } .pd-cta-sub { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: rgba(255,255,255,0.5); margin-bottom: 32px; max-width: 480px; margin-left: auto; margin-right: auto; } .pd-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Ensure CTA section stays dark */ .pd-cta-section { background: #151614 !important; } /* ── Responsive ── */ @media(max-width: 1100px) { .pd-main { grid-template-columns: 1fr 1fr; gap: 40px; } .pd-info-table { padding: 4px 28px 4px; } .pd-info-section-header { padding: 20px 28px; } } @media(max-width: 768px) { .pd-main { grid-template-columns: 1fr; gap: 28px; } .pd-gallery-col { position: static; } .pd-info-table { grid-template-columns: 1fr; padding: 0 20px 8px; } .pd-info-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); } .pd-info-row:last-child { border-bottom: none; } .pd-info-section-header { padding: 18px 20px; } .pd-related-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width: 480px) { .pd-related-grid { grid-template-columns: 1fr; } .pd-action-btns { flex-direction: column; } .pd-btn-fullimg, .pd-btn-enquire, .pd-btn-wa { width: 100%; justify-content: center; } .pd-thumbs { gap: 6px; } .pd-thumb { width: 60px; height: 60px; } } /* ── ABOUT PAGE: TIMELINE ─────────────────────────────────────────────────── */ .about-timeline { position: relative; max-width: 760px; margin: 0 auto; } .about-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border); transform: translateX(-50%); } .timeline-item { display: flex; position: relative; padding-bottom: 40px; } .timeline-item.timeline-left { justify-content: flex-end; padding-right: calc(50% + 28px); } .timeline-item.timeline-right { justify-content: flex-start; padding-left: calc(50% + 28px); } .timeline-dot { position: absolute; left: 50%; top: 8px; width: 14px; height: 14px; background: var(--gold); border-radius: 50%; transform: translateX(-50%); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--gold); flex-shrink: 0; } .timeline-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; max-width: 300px; } .timeline-year { font-size: 0.7rem; font-weight: 700; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; } .timeline-title { font-size: 0.95rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; } .timeline-desc { font-size: 0.82rem; color: var(--body-secondary); line-height: 1.55; } @media (max-width: 600px) { .about-timeline::before { left: 16px; } .timeline-item.timeline-left, .timeline-item.timeline-right { justify-content: flex-start; padding-left: 44px; padding-right: 0; } .timeline-dot { left: 16px; } } /* ── ABOUT PAGE: CERTIFICATES / AWARDS CARDS ──────────────────────────────── */ .cert-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: 10px; text-align: center; transition: transform 0.22s, box-shadow 0.22s; } .cert-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.09); } .cert-img { width: 80px; height: 80px; object-fit: contain; } .cert-icon-wrap { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; } .cert-info { display: flex; flex-direction: column; gap: 3px; } .cert-title { font-size: 0.88rem; font-weight: 700; color: var(--dark); } .cert-issuer { font-size: 0.78rem; color: var(--body-secondary); } .cert-year { font-size: 0.72rem; font-weight: 600; color: var(--gold); letter-spacing: 0.06em; margin-top: 3px; }