/* ════════ DESIGN SYSTEM & TOKENS ════════ */ :root { /* Primary Brand Palette */ --chamoisee: #a27b5c; --bone: #dcd7c9; /* Secondary Luxury Palette (From Screenshot) */ /* Off-white surfaces collapsed to three real values: --light (primary surface), --cream (warm raised surface), --bone (on-dark). --paper and --light-secondary were near-identical to --light and drifted warm/cool against it, so they now alias --light to keep every surface in register. */ --paper: var(--light); --light: #f4f5f1; --light-secondary: var(--light); --ink: #2C2622; --muted: #6B6258; --deep-muted: #3A342E; --line: #D8D2C8; --cream: #EDE6DA; --light-muted: #CFC7BD; --border-soft: #E0DBD3; --dark-bg: #241F1B; --dark-border: #5A5148; --espresso: #2A231E; /* warm near-black (hue ~25°), brand's deepest value */ /* Typography */ --font-display: 'Josefin Sans', sans-serif; --font-body: 'Quattrocento', serif; /* Spacing, Borders & Radius */ --radius-sm: 8px; --radius-md: 16px; --radius-pill: 9999px; --border-width: 1px; /* Motion — standardized hover-lift scale for content cards/tiles. (Buttons keep their own subtle lifts.) */ --lift-card: -6px; /* default lift for content cards on hover */ --lift-active: -4px; /* nudge for selected/active tiles */ /* Spacing & Padding Variables */ --padding-vertical-none: 0px; --padding-vertical-small: 80px; --padding-vertical-main: 112px; --padding-vertical-large: 160px; /* Spacing scale (rem-based, 8px grid) — canonical step values for gaps, padding and margins. Adopt incrementally: new/edited rules should use these instead of arbitrary px so spacing stays on a consistent rhythm. (Existing values were intentionally left unsnapped to avoid churn.) */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 2.5rem; /* 40px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 5rem; /* 80px */ } /* Padding Utilities */ [data-padding-top="none"] { padding-top: var(--padding-vertical-none); } [data-padding-bottom="none"] { padding-bottom: var(--padding-vertical-none); } [data-padding-top="small"] { padding-top: var(--padding-vertical-small); } [data-padding-bottom="small"] { padding-bottom: var(--padding-vertical-small); } [data-padding-top="main"] { padding-top: var(--padding-vertical-main); } [data-padding-bottom="main"] { padding-bottom: var(--padding-vertical-main); } [data-padding-top="large"] { padding-top: var(--padding-vertical-large); } [data-padding-bottom="large"] { padding-bottom: var(--padding-vertical-large); } /* Reset & Base Styles */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background-color: var(--light); color: var(--ink); /* 100% (not a fixed 16px) so every rem-based font-size scales with the visitor's browser font-size preference — the accessibility win. */ font-size: 100%; scrollbar-width: thin; scrollbar-color: var(--chamoisee) var(--dark-bg); } body { font-family: var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; /* Light is the site-wide default. Dark sections opt in via their own background, and the homepage hero opts in via an explicit dark background on (managed dynamically by the scroll theme observer in script.js). */ background-color: var(--light); /* No transition — instant body background swap prevents dark flash between sections */ } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--dark-bg); } ::-webkit-scrollbar-thumb { background: var(--chamoisee); } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; height: auto; } /* ════════ LAYOUT & SPACING ════════ */ .container { max-width: 1200px; margin: 0 auto; /* Fluid gutter: 40px on desktop, easing to 20px on small phones so content isn't squeezed by a fixed 80px of side padding on a 320–375px screen. */ padding: 0 clamp(20px, 5vw, 40px); position: relative; width: 100%; } .section-pad { padding: clamp(80px, 12vw, 160px) 0; } .label { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--chamoisee); margin-bottom: 24px; display: block; } .title-h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 5vw, 56px); line-height: 1.15; color: var(--ink); margin-bottom: 32px; letter-spacing: -1px; } .body-p { font-size: 1.0625rem; line-height: 1.65; color: var(--muted); margin-bottom: 32px; } /* ════════ GRAIN & LOADING OVERLAYS ════════ */ .grain-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); will-change: transform; transform: translate3d(0, 0, 0); } #loading-screen { position: fixed; inset: 0; background-color: var(--dark-bg); z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s; } #loading-screen.fade-out { opacity: 0; visibility: hidden; } .loader-logo { font-family: var(--font-body); font-size: 1.75rem; font-weight: 700; letter-spacing: 8px; color: var(--bone); text-transform: uppercase; margin-bottom: 24px; } .loader-bar-wrap { width: 120px; height: 1px; background-color: rgba(220, 215, 201, 0.15); position: relative; overflow: hidden; } .loader-bar { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background-color: var(--chamoisee); transition: width 0.4s ease; } /* ════════ STICKY NAVIGATION ════════ */ nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 1200px; height: 70px; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; background-color: rgba(36, 32, 29, 0.45); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05); /* backdrop-filter intentionally NOT transitioned — animating a blur forces a full re-raster of the backdrop layer on every section-boundary toggle, which was a primary source of scroll stutter. The blur stays static; only cheap paint props animate. */ transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, width 0.6s cubic-bezier(0.16, 1, 0.3, 1), top 0.6s ease, height 0.6s ease; } nav.scrolled { top: 12px; height: 60px; background-color: rgba(36, 32, 29, 0.7); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25); } /* Light Theme Nav State when scrolling light sections */ nav.light-nav { background-color: rgba(244, 245, 241, 0.85); border-color: rgba(44, 38, 34, 0.1); box-shadow: 0 4px 20px rgba(44, 38, 34, 0.08); } nav.light-nav.scrolled { background-color: rgba(244, 245, 241, 0.95); border-color: rgba(44, 38, 34, 0.15); box-shadow: 0 8px 30px rgba(44, 38, 34, 0.12); } nav.light-nav .logo-svg { fill: var(--chamoisee) !important; } nav.light-nav .nav-link, nav.light-nav .nav-link-sub { color: var(--ink); } nav.light-nav .mobile-menu-toggle svg { stroke: currentColor; } nav.light-nav .nav-link:hover, nav.light-nav .nav-link-sub:hover, nav.light-nav .nav-dropdown-wrapper:hover .dropdown-toggle { color: var(--chamoisee); } .nav-logo-wrap { display: flex; align-items: center; } /* Logo lockup: full NOKU wordmark at the top of the page. On scroll, the O-K-U letters slide left and fade while the lockup clips down to just the N mark. The wordmark's N is the same letterform as the standalone mark, so no swap is needed — what remains IS the mark. */ .nav-logo-wrap a { display: inline-block; overflow: hidden; width: 84px; /* full wordmark width */ height: 21px; transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .logo-svg { fill: var(--paper); width: 84px; height: 21px; flex-shrink: 0; display: block; transition: fill 0.2s ease; } /* O, K, U are the 2nd–4th glyphs in the SVG (N is first) */ .logo-svg > :nth-child(n + 2) { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } nav.scrolled .nav-logo-wrap a { width: 18px; /* collapse to the N mark */ } nav.scrolled .logo-svg > :nth-child(n + 2) { transform: translateX(-280px); opacity: 0; } .nav-links { display: flex; gap: 48px; list-style: none; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); } .nav-link, .nav-link-sub { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: var(--bone); transition: color 0.2s ease; position: relative; padding: 6px 0; display: inline-block; white-space: nowrap; } .nav-link::after, .nav-link-sub::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--chamoisee); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .nav-link:hover, .nav-link-sub:hover, .nav-dropdown-wrapper:hover .dropdown-toggle { color: var(--chamoisee); } .nav-link:hover::after, .nav-link-sub:hover::after, .nav-dropdown-wrapper:hover .dropdown-toggle::after { width: 100%; } /* ── Dropdown Menu Styling ── */ .nav-dropdown-wrapper { position: relative; } .dropdown-toggle { background: none; border: none; cursor: pointer; padding: 6px 0; display: flex; align-items: center; outline: none; } .dropdown-chevron { display: inline-block; font-size: 0.4375rem; margin-left: 6px; transition: transform 0.3s ease; vertical-align: middle; } .nav-dropdown-wrapper:hover .dropdown-chevron { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background-color: rgba(36, 32, 29, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 16px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 180px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); list-style: none; z-index: 1001; text-align: center; } /* Invisible bridge to prevent dropdown from closing when moving pointer from toggle to menu options */ .nav-dropdown::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; background: transparent; pointer-events: auto; } /* Light Theme dropdown colors */ nav.light-nav .nav-dropdown { background-color: rgba(244, 245, 241, 0.98); border: 1px solid rgba(44, 38, 34, 0.1); box-shadow: 0 10px 30px rgba(44, 38, 34, 0.08); } .nav-dropdown-wrapper:hover .nav-dropdown, .nav-dropdown-wrapper:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(4px); } /* Responsive Dropdown overrides for mobile drawer layout */ @media (max-width: 768px) { /* Flatten the "Menu" dropdown into the mobile list: drop the group label and surface Materials / Sustainability / About / Contact as plain top-level items, so the drawer is a single flat list of every page. The light-nav selector is needed to outrank `nav.light-nav .nav-link { display:block !important }`, which otherwise re-shows the toggle on light-themed pages/sections. */ .nav-dropdown-wrapper .dropdown-toggle, nav.light-nav .nav-dropdown-wrapper .dropdown-toggle { display: none !important; } .nav-dropdown { position: static !important; transform: none !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; /* match the centered main drawer items */ gap: 20px !important; /* match the .nav-links drawer gap */ opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; background: transparent !important; width: auto !important; } .nav-dropdown::before { display: none !important; } .dropdown-chevron { display: none !important; } /* Main links and sub-links now read identically in the drawer */ .nav-link, nav.light-nav .nav-link, .nav-link-sub, nav.light-nav .nav-link-sub { color: var(--ink) !important; display: block !important; padding: 0 !important; } .nav-link-sub:hover { color: var(--chamoisee) !important; } .nav-link::after, .nav-link-sub::after { display: none !important; } } .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--bone); /* Default color for dark background (index.html) */ transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu-toggle:hover { color: var(--chamoisee); transform: scale(1.05); } nav.light-nav .mobile-menu-toggle { color: var(--ink); /* Override color for light background pages */ } nav.light-nav .mobile-menu-toggle:hover { color: var(--chamoisee); } /* ════════ 3D SCROLL EXPERIENCE ZONE ════════ */ #three-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10; pointer-events: none; opacity: 1; transition: opacity 0.5s ease; } #three-canvas { width: 100%; height: 100%; display: block; } /* Scrollable panels sitting on top of fixed WebGL canvas */ .scroll-narrative { position: relative; z-index: 11; pointer-events: none; } .narrative-panel { min-height: 100vh; display: flex; align-items: center; /* Horizontal padding eases down on narrow screens so hero/story copy keeps usable width on mobile; vertical rhythm unchanged. */ padding: 100px clamp(24px, 5vw, 60px); } @media (min-width: 1025px) { #config-panel { height: 240vh; min-height: 240vh; display: block; padding: 0; } #config-panel .narrative-grid { position: sticky; top: 0; height: 100vh; align-items: center; box-sizing: border-box; padding: 0 60px; max-width: 1400px; grid-template-columns: 420px 1fr; gap: 80px; } } .default-variant-card-wrap { position: relative; z-index: 5; width: 100%; max-width: 800px; margin: 0 auto; opacity: 0; visibility: hidden; transition: opacity 0.1s linear, visibility 0.1s linear; } .default-variant-card-wrap.active { visibility: visible; } /* Naturally centered vertically by the grid's align-items: center */ #config-panel .empty-col { display: flex; justify-content: center; align-items: center; position: relative; max-width: 850px; width: 100%; /* Grid items default to min-width:auto, so the cushion-carousel's intrinsic width forced this 1fr track to ~800px and overflowed laptops (1025–1400px). min-width:0 lets the track shrink to its fr share; the max-width above still caps it on large screens. */ min-width: 0; } /* Narrative Panel Wood Selector and Selected Details Styles */ #config-panel .title-h2 { margin-bottom: 16px; } #config-panel .narrative-wood-selector { margin-top: 20px; margin-bottom: 20px; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 12px; } #config-panel .narrative-wood-selector .selector-label { color: var(--muted); font-family: var(--font-display); font-size: 1.125rem; font-style: italic; letter-spacing: 0.5px; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; } #config-panel .narrative-wood-selector .selected-wood-label { color: var(--bone); font-weight: 500; font-style: italic; text-transform: none; font-size: 1.125rem; } #config-panel .narrative-wood-selector .selected-cushion-label { color: var(--chamoisee); font-weight: 500; font-style: italic; text-transform: none; font-size: 1.125rem; } #config-panel .narrative-wood-selector .label-separator { color: var(--muted); font-family: var(--font-display); font-style: italic; font-weight: 400; margin: 0 6px; font-size: 1.125rem; } .narrative-wood-swatches .wood-swatch { color: var(--bone); border-color: rgba(244, 245, 241, 0.25); } .narrative-wood-swatches .wood-swatch:hover, .narrative-wood-swatches .wood-swatch.active { background-color: var(--bone); color: var(--dark-bg); border-color: var(--bone); } .model-frame-rect { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 500px; border: none; pointer-events: none; background-color: transparent; z-index: 1; } @media (max-width: 1024px) { .model-frame-rect { display: none; } } .narrative-panel * { pointer-events: auto; /* Re-enable pointer events for contents */ } /* Hero Section Panel */ .narrative-hero { position: relative; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; padding-top: clamp(110px, 14vh, 160px); padding-bottom: 60px; } .hero-content-wrap { position: relative; z-index: 10; max-width: 900px; margin: 0 auto; padding: 24px 32px; border-radius: 40px; /* No background or blur — model stays fully visible */ background: none; } .narrative-hero .hero-tagline { margin: 0 auto; } .narrative-hero .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); } .hero-eyebrow { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 300; letter-spacing: 8px; text-transform: uppercase; color: var(--chamoisee); /* Two stacked rows ("Collection 01" / "Of Stillness") with token spacing. */ display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); margin-bottom: clamp(12px, 2vh, 20px); opacity: 0; transform: translateY(20px); animation: fadeUpIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards; text-shadow: 0 0 20px rgba(12, 10, 8, 0.9), 0 2px 12px rgba(12, 10, 8, 0.8), 0 8px 32px rgba(12, 10, 8, 0.6); } .hero-title { font-family: var(--font-display); font-size: clamp(40px, 7vw, 78px); font-weight: 200; letter-spacing: 10px; text-transform: uppercase; line-height: 1.1; color: var(--paper); margin-bottom: clamp(16px, 3vh, 28px); opacity: 0; transform: translateY(30px); animation: fadeUpIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards; text-shadow: 0 0 40px rgba(10, 8, 6, 0.95), 0 2px 6px rgba(10, 8, 6, 0.9), 0 8px 24px rgba(10, 8, 6, 0.75), 0 20px 60px rgba(10, 8, 6, 0.55), 0 40px 100px rgba(10, 8, 6, 0.3); } body:not(.secondary-landing-page) .hero-title { font-size: clamp(32px, 5vw, 52px); } .hero-tagline { font-size: clamp(14px, 1.5vw, 17px); font-weight: 300; color: var(--bone); max-width: 520px; margin: 0 auto; line-height: 1.7; opacity: 0; transform: translateY(20px); animation: fadeUpIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards; text-shadow: 0 0 20px rgba(10, 8, 6, 0.9), 0 2px 12px rgba(10, 8, 6, 0.75), 0 12px 40px rgba(10, 8, 6, 0.55); } /* Scroll Prompt Indicator */ .scroll-indicator { display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; animation: fadeInOnly 1.5s ease-out 2s forwards; } .scroll-indicator span { font-family: var(--font-body); font-size: 0.5625rem; letter-spacing: 4px; text-transform: uppercase; color: var(--chamoisee); } .scroll-indicator-line { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--chamoisee) 50%, transparent); background-size: 100% 200%; background-position: top; animation: scrollLineAnimation 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; } /* Narrative Content Columns */ .narrative-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; width: 100%; max-width: 1200px; margin: 0 auto; } .narrative-col { display: flex; flex-direction: column; justify-content: center; max-width: 450px; width: 100%; } #specs-panel .narrative-col { margin-left: auto; } .panel-number { font-family: var(--font-display); font-size: clamp(3.5rem, 10vw, 7.5rem); font-weight: 200; line-height: 1; color: rgba(162, 123, 92, 0.08); margin-bottom: -10px; margin-left: -5px; } .narrative-panel .title-h2 { color: var(--paper); } .narrative-panel .body-p { color: var(--bone); opacity: 0.85; max-width: 440px; } /* Specification Table */ .spec-grid { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--dark-border); margin-top: 24px; } .spec-row { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--dark-border); } .spec-label { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--chamoisee); } .spec-val { font-family: var(--font-display); font-size: 1.0625rem; color: var(--paper); } /* ════════ MARQUEE / TICKER ════════ */ .ticker-container { background-color: var(--dark-bg); border-top: 1px solid rgba(244, 241, 236, 0.06); border-bottom: 1px solid rgba(244, 241, 236, 0.06); overflow: hidden; padding: 20px 0; position: relative; z-index: 13; } .ticker-track { display: flex; width: max-content; animation: tickerLoop 24s linear infinite; } .ticker-item { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 5px; text-transform: uppercase; color: var(--paper); white-space: nowrap; padding: 0 40px; display: flex; align-items: center; opacity: 0.9; } .ticker-dot { width: 5px; height: 5px; background-color: var(--chamoisee); border-radius: 50%; display: inline-block; margin-right: 40px; } /* ════════ CINEMATIC VIDEO SECTION ════════ */ .video-section { position: relative; height: 90vh; min-height: 600px; background-color: var(--dark-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; z-index: 13; } .video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; } .video-overlay { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(36, 31, 27, 0.1) 0%, rgba(36, 31, 27, 0.5) 90%); z-index: 1; } .video-content { position: relative; z-index: 2; text-align: center; padding: 0 40px; max-width: 760px; } .video-content .title-h2 { color: var(--paper); margin-bottom: 24px; } .video-control-btn { width: 72px; height: 72px; border: 1px solid rgba(220, 215, 201, 0.35); background: rgba(36, 31, 27, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-top: 32px; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .video-control-btn:hover { border-color: var(--chamoisee); background-color: var(--chamoisee); transform: scale(1.05); } .video-control-btn svg { fill: var(--paper); transition: transform 0.4s ease; } .video-control-btn:hover svg { transform: scale(1.1); } /* ════════ STUDIO INTRODUCTION ════════ */ .studio-intro { background-color: var(--paper); z-index: 13; position: relative; } .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; } .intro-img-wrap { position: relative; overflow: hidden; aspect-ratio: 1.15; border-radius: 8px; } .intro-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .intro-img-wrap::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; border-radius: 8px; } .intro-img-wrap:hover img { transform: scale(1.04); } /* ════════ FEATURED PRODUCTS GRID ════════ */ #products { /* Widened so the featured carousel can show four 320px cards at rest (4×320 + 3×32 gap = 1376px of track + nav-button padding). */ max-width: 1680px; scroll-margin-top: 80px; /* offset for sticky nav */ } .products-section { /* Reduced from 180px — the 3D canvas is hidden before this section is reached, so the extra top space served no visual purpose and looked like a loading hang after the quote section. */ padding-top: clamp(80px, 10vw, 120px); background-color: var(--light); position: relative; z-index: 13; border-top: none; border-bottom: 1px solid var(--line); } .products-header { display: flex; justify-content: space-between; align-items: flex-end; /* #products was widened for the 4-card carousel; keep the header at its original content width (old 1320 container − 80 padding = 1240) so the title and "View All" link don't drift apart. */ max-width: 1240px; margin: 0 auto 80px; } .products-header-left { max-width: 500px; } .products-header .title-h2 { margin-bottom: 0; color: var(--ink); } .view-collection-link { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--chamoisee); padding-bottom: 6px; transition: color 0.3s ease, border-color 0.3s ease; } .view-collection-link:hover { color: var(--chamoisee); border-color: var(--ink); } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } /* ── Gallery-plate product card — borderless, editorial ──── */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 32px; row-gap: 56px; } @media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 40px; } } .gcard { position: relative; text-decoration: none; color: inherit; display: block; } .gcard__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--cream); margin-bottom: 16px; display: block; } .gcard__media-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); } .gcard__media-inner img { width: 100%; height: 100%; object-fit: cover; } .gcard:hover .gcard__media-inner { transform: scale(1.05); } .gcard__add { position: absolute; bottom: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); background: rgba(244,245,241,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: var(--border-width) solid rgba(216,210,200,0.85); border-radius: var(--radius-pill); padding: 9px 16px; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.25s, color 0.25s, border-color 0.25s; } .gcard:hover .gcard__add { opacity: 1; transform: translateY(0); } .gcard__add:hover { background: var(--chamoisee); color: var(--light); border-color: var(--chamoisee); } .gcard__add:focus-visible { opacity: 1; transform: translateY(0); outline: 2px solid var(--chamoisee); outline-offset: 2px; } .gcard__cat { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.4; color: var(--chamoisee); margin-bottom: 11px; } .gcard__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.125rem, 2vw, 1.3125rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); display: inline-block; background-image: linear-gradient(var(--chamoisee), var(--chamoisee)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 3px; transition: background-size 0.45s cubic-bezier(0.16,1,0.3,1); } .gcard:hover .gcard__name { background-size: 100% 1px; } .gcard__price { font-family: var(--font-body); font-size: 0.875rem; color: var(--muted); margin-top: 13px; } .product-card { background-color: transparent; border: 1px solid rgba(44, 38, 34, 0.06); box-shadow: 0 4px 20px rgba(44, 38, 34, 0.03); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .product-card:hover { transform: translateY(var(--lift-card)); box-shadow: 0 20px 40px rgba(44, 38, 34, 0.08); border-color: rgba(162, 123, 92, 0.2); } .product-card-img-wrap { overflow: hidden; aspect-ratio: 2 / 2.5; margin: 0; border-radius: 12px 12px 0 0; background-color: var(--paper); display: flex; align-items: center; justify-content: center; transition: transform 0.4s ease; width: 100%; } .product-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .product-card:hover .product-card-img-wrap img { transform: scale(1.05); } .product-card-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; gap: 16px; } .product-card-header { display: flex; flex-direction: column; gap: 4px; } .product-name { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; color: var(--chamoisee); } .product-materials { font-family: var(--font-body); font-size: 0.8125rem; color: var(--muted); line-height: 1.4; } .product-card-header-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; } .product-card-footer-row { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 16px; margin-top: auto; } .product-card-footer-row .product-materials { margin-bottom: 0; } .product-card-footer-row .product-buy-row { margin-top: 0; flex-shrink: 0; } .product-buy-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .product-price { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--chamoisee); } .product-add-to-cart-btn, .product-inquire-btn { background-color: transparent; border: 1px solid var(--chamoisee); color: var(--chamoisee); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 6px; padding: 8px 16px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .product-add-to-cart-btn:hover, .product-inquire-btn:hover { background-color: var(--chamoisee); color: var(--paper); } .product-add-to-cart-btn:active, .product-inquire-btn:active { transform: translateY(0); } /* ════════ COLLECTIONS SECTION ════════ */ .collections-section { background-color: var(--light); z-index: 13; position: relative; } .collections-section.section-pad { padding: clamp(40px, 6vw, 80px) 0; } .collections-header { text-align: center; margin-bottom: 80px; } .collections-subtext { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--muted); max-width: 680px; margin: 16px auto 0 auto; } .collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .collection-card { display: flex; flex-direction: column; gap: 16px; width: 100%; border: 1px solid var(--line); border-radius: 18px; padding: 10px; background-color: transparent; text-decoration: none; position: relative; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .collection-card:hover { transform: translateY(var(--lift-card)); box-shadow: 0 20px 40px rgba(44, 38, 34, 0.08); border-color: rgba(162, 123, 92, 0.2); } .coll-card-img-wrap { width: 100%; height: 350px; border-radius: 8px; overflow: hidden; position: relative; flex-shrink: 0; background-color: var(--paper); } @media (max-width: 768px) { .coll-card-img-wrap { height: auto; aspect-ratio: 2 / 2.5; /* portrait, matching the product cards */ } } .coll-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; display: block; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .collection-card:hover .coll-card-img-wrap img { transform: scale(1.05); } .coll-card-content { padding: 10px 10px 18px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: min-content; position: relative; } .coll-card-eyebrow { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--chamoisee); margin: 0; } .coll-card-title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 600; color: var(--ink); margin: 0; transition: color 0.4s ease; } .collection-card:hover .coll-card-title { color: var(--chamoisee); } .coll-card-desc { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.6; color: var(--muted); margin: 0; } .coll-card-tag { font-family: var(--font-body); font-size: 0.625rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; /* Demoted off the accent — a tag is structural, not interactive. Quiet neutral chip lets chamoisee read as genuine emphasis elsewhere. */ color: var(--muted); border: 1px solid var(--line); padding: 4px 10px; border-radius: 4px; display: inline-block; margin-top: 8px; } /* ════════ MATERIALS PALETTE ════════ */ .materials-section { background-color: var(--light); z-index: 13; position: relative; border-top: 1px solid var(--line); } .materials-section.section-pad { padding: clamp(40px, 6vw, 80px) 0; } /* ─── Storytelling & Moodboard Collage Styles ─── */ .materials-story-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; } .materials-story-content { display: flex; flex-direction: column; } .story-divider { width: 60px; height: 1px; background-color: var(--chamoisee); margin: 24px 0; } .story-intro { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.6; font-weight: 300; color: var(--ink); margin-bottom: 24px; } .materials-story-content .body-p { margin-bottom: 20px; color: var(--muted); font-size: 0.9375rem; line-height: 1.8; } .materials-story-content .body-p strong { color: var(--ink); font-weight: 600; } .story-cta-wrap { margin-top: 16px; } .materials-cta-btn { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--chamoisee); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--chamoisee); padding-bottom: 4px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .materials-cta-btn .arrow { display: inline-block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .materials-cta-btn:hover { color: var(--ink); border-bottom-color: var(--ink); } .materials-cta-btn:hover .arrow { transform: translateX(6px); } /* Moodboard Collage */ .materials-moodboard { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; gap: 16px; width: 100%; max-width: 480px; justify-self: center; } .moodboard-item { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 16px 36px rgba(36, 31, 27, 0.08); border: 1px solid rgba(44, 38, 34, 0.06); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--paper); } .moodboard-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } /* Hover effects */ .moodboard-item:hover { z-index: 10 !important; transform: translateY(var(--lift-card)) scale(1.02); box-shadow: 0 20px 40px rgba(162, 123, 92, 0.15); } .moodboard-item:hover img { transform: scale(1.06); } /* Captions inside moodboard items */ .moodboard-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); color: var(--paper); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; z-index: 2; } .moodboard-item:hover .moodboard-caption { opacity: 1; transform: translateY(0); } /* Grid placement — 2×2 quadrant grid, every image an equal square */ .moodboard-item.item-large, .moodboard-item.item-square-1, .moodboard-item.item-square-2, .moodboard-item.item-medium { grid-column: auto; aspect-ratio: 1; } @media (max-width: 1200px) { .materials-story-grid { gap: 50px; } } /* Folded 991 (Webflow default) into the canonical 1024 tier so the materials story grid collapses to one column at the same breakpoint as everything else. */ @media (max-width: 1024px) { .materials-story-grid { grid-template-columns: 1fr; gap: 60px; } } @media (max-width: 768px) { .moodboard-item { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .moodboard-item.item-large { aspect-ratio: 1; /* stay square in the 2×2 quadrant grid */ } .moodboard-caption { opacity: 1; transform: translateY(0); background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); font-size: 0.625rem; padding: 8px 12px; } } .materials-grid-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 100px; align-items: center; } .swatches-block { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; } .swatch-card { aspect-ratio: 1.15; position: relative; overflow: hidden; cursor: pointer; display: flex; align-items: flex-end; padding: 16px; border-radius: 8px; border: 1px solid rgba(44, 38, 34, 0.08); box-shadow: 0 4px 12px rgba(44, 38, 34, 0.04); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .swatch-card::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(44, 54, 57, 0.08); pointer-events: none; z-index: 2; border-radius: 8px; transition: border-color 0.4s ease; } .swatch-card:hover, .swatch-card.active { transform: translateY(var(--lift-active)); } .swatch-card.active { border-color: var(--chamoisee); box-shadow: 0 12px 24px rgba(162, 123, 92, 0.2); } .swatch-card.active::after { border-color: var(--chamoisee); } .swatch-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1; } .swatch-card:hover .swatch-bg { transform: scale(1.05); } /* Custom Swatch Backgrounds representing real materials */ /* Wood Category */ .swatch-wood-teak { background-image: url('Resources/material%20images/Wood/Teak.png'), linear-gradient(135deg, #a27b5c 0%, #7d5a3e 50%, #5c3d24 100%); } .swatch-wood-honne { background-image: url('Resources/material%20images/Wood/Honne.png'), linear-gradient(135deg, #c18c5d 0%, #9e6b40 50%, #764b27 100%); } .swatch-wood-matti { background-image: url('Resources/material%20images/Wood/Bhilwara.png'), linear-gradient(135deg, #423629 0%, #2f251b 60%, #17110c 100%); } .swatch-wood-reclaimed-teak { background-image: url('Resources/material%20images/Wood/Reclaimed%20teak.jpg'), linear-gradient(135deg, #e3c193 0%, #cfa874 50%, #b88d56 100%); } /* Leather Category */ .swatch-leather-glory-honey { background-image: url('Resources/material%20images/Leather/Glory%20Honey.jpeg'), linear-gradient(135deg, #d49c6a 0%, #b57a46 50%, #8c5220 100%); } .swatch-leather-vagabond-cognac { background-image: url('Resources/material%20images/Leather/Vagabond%20Cognac.jpeg'), linear-gradient(135deg, #873e23 0%, #682c16 50%, #4a1908 100%); } .swatch-leather-montana-chestnut { background-image: url('Resources/material%20images/Leather/Montana%20Chestnut.jpg'), linear-gradient(135deg, #6c3b21 0%, #522913 50%, #381807 100%); } .swatch-leather-emperor-brick { background-image: url('Resources/material%20images/Leather/Emperor%20Brick.jpeg'), linear-gradient(135deg, #b04326 0%, #8e2f18 50%, #661807 100%); } .swatch-leather-eternity-olive { background-image: url('Resources/material%20images/Leather/Eternity%20Olive.jpeg'), linear-gradient(135deg, #5b5c47 0%, #464835 50%, #303221 100%); } /* Fabric Category */ .swatch-fabric-blush { background-image: url('Resources/material%20images/Fabric/Blush.jpeg'), linear-gradient(135deg, #e3c4bc 0%, #cca297 60%, #b58376 100%); } .swatch-fabric-rosebud { background-image: url('Resources/material%20images/Fabric/Rosebud.png'), linear-gradient(135deg, #d1a89c 0%, #b88d80 60%, #9e7163 100%); } .swatch-fabric-rubik-linen { background-image: url('Resources/material%20images/Fabric/Rubik%20Linen.jpg'), linear-gradient(135deg, #dfd8cf 0%, #c4baa9 60%, #aba18e 100%); } .swatch-fabric-silver { background-image: url('Resources/material%20images/Fabric/Silver.jpeg'), linear-gradient(135deg, #e3e4e6 0%, #c2c5c9 60%, #a4a7ab 100%); } .swatch-fabric-cloud { background-image: url('Resources/material%20images/Fabric/Cloud.jpg'), linear-gradient(135deg, #cfd3d6 0%, #afb4b8 60%, #8f9599 100%); } .swatch-fabric-opal { background-image: url('Resources/material%20images/Fabric/Opal.png'), linear-gradient(135deg, #7ba09b 0%, #57807b 60%, #3b5f5b 100%); } .swatch-fabric-vienna { background-image: url('Resources/material%20images/Fabric/Vienna%20Army.jpg'), linear-gradient(135deg, #636d59 0%, #4a5440 60%, #323c28 100%); } .swatch-fabric-flute { background-image: url('Resources/material%20images/Fabric/Flute.jpeg'), linear-gradient(135deg, #2b3a4a 0%, #192633 60%, #0d1721 100%); } .swatch-fabric-charcoal { background-image: url('Resources/material%20images/Fabric/Charcoal.png'), linear-gradient(135deg, #4a4d50 0%, #2f3133 60%, #191a1c 100%); } /* Cane Category */ .swatch-cane-woven-cane { background-image: url('https://cdn.prod.website-files.com/668005cedc17dd78060b98a8/68271f7b453b55e1b9a21c03_6684d13aa6725a68337cc74f_66784e83c198b5a75b916393_Cane%252520Weave.png'), linear-gradient(135deg, #e3c081 0%, #caa463 50%, #b08945 100%); } /* Metals Category */ .swatch-metals-brass { background-image: url('Resources/material%20images/Metals/Brass.jpg'), linear-gradient(135deg, #e3b856 0%, #cfa138 50%, #ad821f 100%); } .swatch-label { position: relative; z-index: 3; font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--paper); opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .swatch-card:hover .swatch-label, .swatch-card.active .swatch-label { opacity: 1; transform: translateY(0); } .materials-description .title-h2 { margin-bottom: 8px; } .material-subtitle { font-family: var(--font-body); font-size: 0.875rem; font-style: italic; color: var(--chamoisee); margin-bottom: 24px; display: block; } .category-header { margin-bottom: 16px; } .category-selector-wrap { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 32px; } .selector-label-small { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; display: block; } .materials-pills { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin-top: 16px; } .materials-pill { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); border: 1px solid var(--chamoisee); padding: 10px 20px; cursor: pointer; transition: all 0.4s ease; } .materials-pill:hover, .materials-pill.active { background-color: var(--chamoisee); color: var(--paper); } .material-preview-wrap { width: 100%; height: clamp(180px, 30vh, 280px); border-radius: 8px; overflow: hidden; margin-bottom: 24px; border: 1px solid rgba(44, 38, 34, 0.08); box-shadow: 0 8px 24px rgba(44, 38, 34, 0.05); background-color: var(--paper); position: relative; } .material-preview-wrap img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; } /* ════════ FOOTER ════════ */ footer { background-color: var(--light); border-top: none; padding: 80px 0 40px; position: relative; z-index: 13; } .footer-cta-line { margin-bottom: 64px; } .footer-cta-eyebrow { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .btn-cta-arrow { font-family: var(--font-display); font-size: clamp(28px, 4vw, 56px); font-weight: 400; letter-spacing: -0.02em; color: var(--chamoisee); background: none; border: none; display: inline-flex; align-items: center; gap: 16px; padding: 0; cursor: pointer; transition: gap 0.3s; text-decoration: none; } .btn-cta-arrow:hover { gap: 24px; } .btn-cta-arrow .arrow { display: inline-flex; font-size: 0.75em; transition: transform 0.3s; } .btn-cta-arrow:hover .arrow { transform: translate(4px, -4px); } /* Inline SVG arrow used in place of the ↗ glyph (which renders as a colour emoji on mobile). Sizes to the current font so it drops into any button. */ .ico-arrow { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; vertical-align: middle; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 64px; padding-top: 48px; border-top: var(--border-width, 1px) solid var(--line); margin-bottom: 80px; } .footer-wordmark { font-family: var(--font-display); font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 400; letter-spacing: -0.02em; color: var(--chamoisee); margin: 0; } .footer-col__heading { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 1px; color: var(--chamoisee); margin-bottom: 20px; text-transform: uppercase; } .footer-col__links { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; } .footer-col__links a { font-family: var(--font-body); font-size: 0.875rem; color: var(--muted); transition: color 0.2s; text-decoration: none; } .footer-col__links a:hover { color: var(--chamoisee); } .footer-legal { margin-top: 48px; padding-top: 20px; border-top: var(--border-width, 1px) solid var(--line); font-family: var(--font-body); font-size: 0.6875rem; color: var(--muted); opacity: 0.65; display: flex; justify-content: space-between; align-items: center; } /* ════════ REVEAL ON SCROLL INTERACTIVE EFFECTS ════════ */ .reveal-el { opacity: 0; transform: translateY(30px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-el.is-revealed { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: 0.15s; } .delay-2 { transition-delay: 0.3s; } .delay-3 { transition-delay: 0.45s; } .delay-4 { transition-delay: 0.6s; } /* ════════ KEYFRAMES & KEYBOARD / ACCESSIBILITY ════════ */ @keyframes fadeUpIn { to { opacity: 1; transform: translateY(0); } } @keyframes fadeInOnly { to { opacity: 1; } } @keyframes tickerLoop { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes scrollLineAnimation { 0% { background-position: top; transform: scaleY(0.4); opacity: 0.3; } 50% { background-position: center; transform: scaleY(1); opacity: 1; } 100% { background-position: bottom; transform: scaleY(0.4); opacity: 0.3; } } /* ════════ RESPONSIVE DESIGN BREAKPOINTS ════════ */ @media (max-width: 1024px) { nav { padding: 0 40px; } .nav-links { gap: 32px; } .split-grid, .materials-grid-layout, .narrative-grid { grid-template-columns: 1fr; gap: 60px; } .narrative-col.empty-col:empty { display: none; } .intro-img-wrap { order: -1; aspect-ratio: 1.5; } .products-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } .collections-grid { grid-template-columns: 1fr; gap: 24px; } .process-timeline { grid-template-columns: 1fr; gap: 40px; } .process-step::after { display: none; } .scatter-img { display: none; /* Simplify on tablets */ } /* ── Config panel (mobile): surface the cushion carousel ABOVE the wood selector + Buy Now (instead of hiding it). The two columns are dissolved with display:contents so every piece reflows into one ordered column: 03 → eyebrow → title → carousel → wood selector → Buy Now. ── */ #config-panel .narrative-grid { display: flex; flex-direction: column; gap: 28px; } #config-panel .narrative-col, #config-panel .narrative-col.empty-col { display: contents; } #config-panel .model-frame-rect { display: none !important; } #config-panel .default-variant-card-wrap { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; width: 100%; max-width: 500px; min-width: 0; margin: 0 auto; } #config-panel .panel-number { order: 1; } #config-panel .label { order: 2; } #config-panel .title-h2 { order: 3; } #config-panel .default-variant-card-wrap { order: 4; } #config-panel .narrative-wood-selector { order: 5; align-items: center !important; justify-content: center !important; margin: 20px auto !important; text-align: center !important; } #config-panel .narrative-wood-selector .selector-label { justify-content: center !important; text-align: center !important; } #config-panel .narrative-wood-swatches .wood-swatch { padding: 6px 12px; font-size: 0.5625rem; letter-spacing: 1.5px; border-radius: 4px; } #config-panel .buy-now-wrapper { order: 6; margin: 8px auto 0 auto; align-items: center; text-align: center; } /* carousel fits mobile width, leaving room for the nav arrows */ #config-panel .narrative-carousel-wrap { width: 100%; max-width: 100%; min-width: 0; padding: 0 58px; } #config-panel .narrative-carousel-wrap .carousel-nav-btn { width: 38px; height: 38px; } #config-panel .narrative-carousel-wrap .carousel-nav-btn svg { width: 16px; height: 16px; } #config-panel .narrative-carousel-wrap .prev-btn { left: 8px; } #config-panel .narrative-carousel-wrap .next-btn { right: 8px; } #config-panel .narrative-carousel-track-container { min-width: 0; } /* Mobile: the model sits in a top-anchored container that scrolls away with the hero (absolute, not fixed) and never overlaps the narrative grid. Horizontal drags spin it; touch-action: pan-y keeps vertical swipes scrolling the page. */ #three-container { position: absolute; overflow: hidden; /* clip the canvas (sized to window incl. scrollbar) so it doesn't add horizontal scroll now that it's absolute */ pointer-events: auto; touch-action: pan-y; } /* The 3D model now lives only in the hero, so the story/specs/config panels no longer need a full-viewport height to make room for it — size them to content with a tight gap between the 01 / 02 / 03 sections. The hero keeps its 100vh stage. */ .narrative-panel:not(.narrative-hero) { min-height: auto; padding-top: 40px; padding-bottom: 40px; } .narrative-grid { grid-template-columns: 1fr; } /* Sized down featured products carousel navigation buttons on mobile/tablet */ .featured-carousel-nav-btn { width: 38px; height: 38px; } .featured-carousel-nav-btn svg { width: 16px; height: 16px; } .featured-carousel-nav-btn.prev-btn { left: 16px; } .featured-carousel-nav-btn.next-btn { right: 16px; } .featured-carousel-outer-wrap { padding: 0 70px; } } @media (max-width: 768px) { nav { padding: 0 24px; } .nav-links { display: none; position: fixed; top: 80px; left: 20px; transform: none !important; width: calc(100% - 40px); background-color: var(--paper); border: 1px solid var(--line); border-radius: 12px; flex-direction: column; gap: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(44, 38, 34, 0.08); z-index: 1000; } .nav-links.active { display: flex; } .nav-links.active .nav-link { color: var(--ink) !important; } .mobile-menu-toggle { display: block !important; } /* With the centered nav-links hidden, the cart would sit mid-bar (space-between across logo · cart · hamburger). Push it right so it pairs with the menu. */ #cart-toggle { margin-left: auto; margin-right: 16px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-bottom { flex-direction: column; gap: 20px; text-align: center; } .swatches-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .products-grid { grid-template-columns: 1fr; } .swatches-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr 1fr; /* keep two columns on the smallest phones */ gap: 28px 24px; } .section-pad { padding: 60px 0; } } /* ════════ INTERACTIVE VARIANTS CAROUSEL CONFIGURATOR ════════ */ .variants-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; z-index: 2; /* Low z-index context to ensure quote_wrap (z-index 12) overlays it on scroll */ } .variants-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--light); z-index: 1; } .variants-section .container { position: relative; z-index: 3; max-width: 100%; padding: 0 80px; } .variants-section .carousel-outer-wrap { max-width: 100%; } .variants-header { text-align: center; margin-bottom: 40px; } .wood-selector { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 40px; margin-bottom: 0; } .selector-label { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: var(--muted); letter-spacing: 1px; } .wood-swatches { display: flex; gap: 16px; } .wood-swatch { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); background-color: transparent; border: 1px solid var(--border-soft); padding: 10px 20px; border-radius: 6px; cursor: pointer; transition: all 0.4s ease; } .wood-swatch:hover, .wood-swatch.active { background-color: var(--ink); color: var(--paper); border-color: var(--ink); } .carousel-outer-wrap { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; max-width: 1200px; margin: 0 auto; } .carousel-nav-btn { background-color: var(--paper); border: 1px solid var(--border-soft); color: var(--ink); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.4s ease; box-shadow: 0 4px 12px rgba(44, 38, 34, 0.05); position: absolute; } .carousel-nav-btn:hover { background-color: var(--ink); color: var(--paper); border-color: var(--ink); transform: scale(1.05); } .prev-btn { left: -60px; } .next-btn { right: -60px; } .carousel-track-container { width: 100%; overflow: hidden; padding: 20px 0; } .carousel-track { display: flex; gap: 32px; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .carousel-card { position: relative; flex: 0 0 320px; width: 320px; opacity: 0.4; transform: scale(0.92); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); background-color: #ffffff; border: 1px solid transparent; border-radius: 12px; padding: 16px; cursor: pointer; text-align: center; } .carousel-card.highlighted { opacity: 1.0; transform: scale(1.03); border-color: rgba(44, 38, 34, 0.1); box-shadow: 0 20px 40px rgba(44, 38, 34, 0.06); } .carousel-card.highlighted:hover { border-color: var(--chamoisee); box-shadow: 0 20px 40px rgba(162, 123, 92, 0.12); transform: scale(1.05); } .carousel-card.highlighted:hover .carousel-card-img-wrap img { transform: scale(1.06); } .carousel-card-img-wrap { width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: var(--paper); margin-bottom: 16px; } .carousel-card-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 0; margin: 0; transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .carousel-card-info { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 4px; box-sizing: border-box; } .add-to-cart-icon { color: var(--muted); opacity: 0.6; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; } .carousel-card:hover .add-to-cart-icon { color: var(--chamoisee); opacity: 1; transform: translateY(-1px) scale(1.1); } .add-to-cart-icon:hover { color: var(--ink) !important; transform: translateY(-2px) scale(1.15) !important; } .selected-details { text-align: center; margin-top: 40px; font-family: var(--font-display); font-size: 1.125rem; font-style: italic; color: var(--chamoisee); } .selected-wood-label, .selected-cushion-label { font-weight: 600; } @media (max-width: 768px) { #config-panel .narrative-carousel-wrap { padding: 0; } .carousel-card { flex: 0 0 calc(100% - 24px); width: calc(100% - 24px); } .prev-btn { left: 8px; z-index: 20; width: 32px !important; height: 32px !important; } .prev-btn svg { width: 12px !important; height: 12px !important; } .next-btn { right: 8px; z-index: 20; width: 32px !important; height: 32px !important; } .next-btn svg { width: 12px !important; height: 12px !important; } nav { top: 10px; width: calc(100% - 20px); padding: 0 20px; height: 60px; } nav.scrolled { top: 6px; height: 54px; } } /* ════════ SHOPPING CART & INTEGRATION STYLES ════════ */ /* Navigation Cart Button */ .cart-btn { background: none; border: none; cursor: pointer; padding: 6px; position: relative; display: flex; align-items: center; justify-content: center; margin-left: 20px; color: var(--bone); transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .cart-btn:hover { color: var(--chamoisee); transform: scale(1.05); } .cart-icon { stroke: currentColor; transition: stroke 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cart-count { position: absolute; top: -4px; right: -4px; background-color: var(--chamoisee); color: var(--paper); font-family: var(--font-display); font-size: 0.5625rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.4s ease, transform 0.4s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } /* Light Theme Navigation Adaptations */ nav.light-nav .cart-btn { color: var(--ink); } nav.light-nav .cart-btn:hover { color: var(--chamoisee); } /* Cart Overlay */ .cart-overlay { position: fixed; inset: 0; background-color: rgba(12, 10, 8, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cart-overlay.active { opacity: 1; pointer-events: auto; } /* Cart Drawer */ .cart-drawer { position: fixed; top: 0; right: 0; width: 100%; max-width: 440px; height: 100vh; background: rgba(244, 245, 241, 0.95); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-left: 1px solid rgba(44, 38, 34, 0.1); box-shadow: -15px 0 40px rgba(44, 38, 34, 0.08); z-index: 2001; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cart-drawer.active { transform: translateX(0); } /* Header */ .cart-header { padding: 30px 40px; border-bottom: 1px solid rgba(44, 38, 34, 0.08); display: flex; justify-content: space-between; align-items: center; } .cart-title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); } .cart-close-btn { background: none; border: none; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: color 0.4s ease, transform 0.4s ease; } .cart-close-btn:hover { color: var(--chamoisee); transform: rotate(90deg); } /* Items Container */ .cart-items-container { flex: 1; overflow-y: auto; padding: 40px; display: flex; flex-direction: column; gap: 30px; } .cart-items-container::-webkit-scrollbar { width: 4px; } .cart-items-container::-webkit-scrollbar-thumb { background: rgba(44, 38, 34, 0.15); } .cart-empty-message { font-family: var(--font-body); font-size: 0.9375rem; color: var(--muted); opacity: 0.8; text-align: center; margin-top: 40px; font-style: italic; } /* Cart Item */ .cart-item { display: flex; gap: 20px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid rgba(44, 38, 34, 0.06); } .cart-item-img-wrap { width: 80px; aspect-ratio: 2 / 2.5; background-color: transparent; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(44, 38, 34, 0.06); } .cart-item-img-wrap img { width: 100%; height: 100%; object-fit: contain; } .cart-item-details { flex: 1; display: flex; flex-direction: column; gap: 4px; } .cart-item-name { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--ink); } .cart-item-variants { font-family: var(--font-body); font-size: 0.75rem; color: var(--chamoisee); font-style: italic; } .cart-item-price { font-family: var(--font-display); font-size: 0.9375rem; color: var(--ink); margin-top: 4px; } .cart-item-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } /* Quantity Control */ .quantity-control { display: flex; align-items: center; border: 1px solid rgba(44, 38, 34, 0.15); border-radius: 4px; overflow: hidden; } .qty-btn { background: none; border: none; cursor: pointer; color: var(--muted); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; transition: background-color 0.3s, color 0.3s; } .qty-btn:hover { background-color: rgba(44, 38, 34, 0.05); color: var(--ink); } .qty-val { font-family: var(--font-display); font-size: 0.8125rem; color: var(--ink); width: 30px; text-align: center; } .cart-item-remove { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); opacity: 0.8; transition: opacity 0.3s, color 0.3s; } .cart-item-remove:hover { opacity: 1; color: #e57373; } /* Footer Section */ .cart-footer { padding: 30px 40px 40px; border-top: 1px solid rgba(44, 38, 34, 0.08); background-color: rgba(237, 230, 218, 0.3); } .cart-subtotal-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; } .subtotal-label { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--chamoisee); } .subtotal-price { font-family: var(--font-display); font-size: 1.375rem; color: var(--ink); } .checkout-btn { width: 100%; background-color: var(--chamoisee); color: var(--light); border: none; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; padding: 18px 0; border-radius: 8px; cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 15px rgba(162, 123, 92, 0.2); } .checkout-btn:hover:not(:disabled) { background-color: var(--ink); color: var(--light); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(44, 38, 34, 0.15); } .checkout-btn:active:not(:disabled) { transform: translateY(0); } .checkout-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } /* Customize Panel "Buy Now" Button styling */ .buy-now-wrapper { margin: 32px 0 0 0; /* left-aligned margin now that body is removed */ display: flex; flex-direction: column; align-items: flex-start; /* left-align the button */ text-align: left; gap: 12px; width: 100%; max-width: 440px; /* aligns with body-p width */ } @media (min-width: 1025px) { #config-panel { position: relative; min-height: 240vh; } #config-panel .buy-now-wrapper { position: static; transform: none; margin: 20px 0 0 0; /* left-aligned margin */ width: 100%; max-width: 100%; align-items: flex-start; /* left-align the button */ text-align: left; } } .buy-now-btn { background-color: var(--chamoisee); color: var(--paper); border: none; font-family: var(--font-display); font-size: 0.75rem; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; padding: 16px 40px; border-radius: 6px; cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 12px rgba(162, 123, 92, 0.2); } .buy-now-btn:hover { background-color: var(--paper); color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(244, 241, 236, 0.15); } .buy-now-btn:active { transform: translateY(0); } .buy-now-helper { font-family: var(--font-body); font-size: 0.6875rem; color: var(--bone); opacity: 0.6; letter-spacing: 1px; } .buy-now-scroll-indicator { font-family: var(--font-body); font-size: 0.6875rem; color: var(--bone); opacity: 0.45; letter-spacing: 1px; margin-top: -4px; /* bring it closer to the text above it */ } /* Responsive adjustment */ @media (max-width: 480px) { .cart-drawer { max-width: 100%; } .cart-header, .cart-items-container, .cart-footer { padding-left: 24px; padding-right: 24px; } } /* CORS Warning Banner for file:// protocol */ .cors-warning-banner { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--chamoisee); color: var(--paper); padding: 12px 24px; text-align: center; z-index: 100000; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35); display: flex; justify-content: center; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); animation: slideDownBanner 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes slideDownBanner { from { transform: translateY(-100%); } to { transform: translateY(0); } } .cors-warning-banner a { color: #FFFFFF; text-decoration: underline; font-weight: 600; transition: opacity 0.2s ease; } .cors-warning-banner a:hover { opacity: 0.85; } .cors-warning-banner .close-banner-btn { background: none; border: none; color: var(--paper); cursor: pointer; font-size: 1.25rem; line-height: 1; font-weight: 300; padding: 0 4px; opacity: 0.7; transition: opacity 0.2s ease, transform 0.2s ease; } .cors-warning-banner .close-banner-btn:hover { opacity: 1; transform: scale(1.1); } /* ════════ NOKU STUDIO UTILITY GRID & FLEX SYSTEM ════════ */ .u-grid-custom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap--main, 24px); width: 100%; } .u-grid-subgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap--main, 24px); grid-column: span 12; } .u-column-3 { grid-column: span 3; } .u-column-4 { grid-column: span 4; } .u-column-8 { grid-column: span 8; } .u-column-9 { grid-column: span 9; } .u-column-12 { grid-column: span 12; } /* Flex layouts */ .u-hflex-left-stretch { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; } .u-vflex-left-center { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .u-vflex-center-top { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .u-vflex-left-top { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .u-vflex-stretch-center { display: flex; flex-direction: column; justify-content: center; align-items: stretch; } /* Gap classes */ .u-gap-xsmall { gap: 8px; } .u-gap-small { gap: 16px; } .u-gap-medium { gap: 24px; } .u-gap-large { gap: 40px; } /* Visual wrapper styles */ .u-visual-wrap { position: relative; overflow: hidden; } .u-cover-absolute { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .u-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* ════════ NOKU STUDIO INDIVIDUAL PROJECT DETAIL PAGES ════════ */ .project_hero_wrap { position: relative; height: 100vh; /* Premium tall hero banner image matching Webflow */ min-height: 100vh; display: flex; align-items: flex-end; justify-content: flex-start; overflow: hidden; background-color: var(--dark-bg); } .project_hero_contain { position: relative; z-index: 3; width: 100%; } .project_hero_title { font-family: var(--font-display); font-size: clamp(38px, 6vw, 64px); font-weight: 600; color: var(--paper); text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); line-height: 1.1; opacity: 0; transform: translateY(24px); animation: projectTitleFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.15s; } @keyframes projectTitleFadeIn { to { opacity: 1; transform: translateY(0); } } .project_detail_wrap { padding: 100px 0; background-color: var(--light); } .project_detail_contain { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 60px; } .project_detail_top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 60px; grid-column: span 12; align-items: start; } .project_text_wrap { display: flex; flex-direction: column; } .project_info_wrap { display: flex; flex-direction: column; } .project_info_title { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--chamoisee); margin-bottom: 6px; } .project_info_text { font-size: 0.9375rem; color: var(--deep-muted); line-height: 1.6; } .project_description { font-size: 0.9375rem; color: var(--deep-muted); line-height: 1.7; } .project_img { width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: 0 15px 35px rgba(44, 38, 34, 0.04); display: block; } .project_img.u-column-4 { aspect-ratio: 2/3; height: 100%; object-fit: cover; } .project_info { display: flex; flex-direction: column; } .project_text { font-size: 0.9375rem; line-height: 1.8; color: var(--muted); } .project_detail_bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 60px; grid-column: span 12; align-items: end; margin-top: 80px; } /* ════════ MOBILE BREAKPOINT OVERRIDES FOR PROJECT DETAILS ════════ */ @media (max-width: 768px) { /* Hero Banner height adjustment */ .project_hero_wrap { height: 70vh; min-height: 480px; } /* Container Padding & Grid Gap */ .project_detail_wrap { padding: 60px 0; } .project_detail_contain { grid-template-columns: 1fr; gap: 48px; } .project_detail_contain > * { grid-column: auto !important; } /* Top 3-Column Grid Collapse */ .project_detail_top { grid-template-columns: 1fr; gap: 40px; } .project_detail_top > * { grid-column: auto !important; } /* Metadata Horizontal Layout */ .project_text_wrap .project_info_wrap.u-vflex-left-top { flex-direction: row; flex-wrap: wrap; gap: 16px 36px; } /* Adjust spacing between metadata block and Brief text on mobile */ .project_text_wrap.u-gap-large { gap: 28px; } /* Left-align third column content (image + text) on mobile */ .project_info.u-column-4 { align-items: flex-start; } /* Aspect Ratio & object-fit for top middle portrait image */ .project_img.u-column-4 { aspect-ratio: 4/5; height: auto; max-height: 500px; object-fit: cover; } /* Bottom 2-Column Grid Collapse */ .project_detail_bottom { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; align-items: start; } .project_detail_bottom > * { grid-column: auto !important; } .project_detail_bottom .project_img.u-column-8 { aspect-ratio: 3/2; height: auto; object-fit: cover; } } /* Prev/Next nav wrap */ /* ════════ PREV / NEXT NAVIGATION — EDITORIAL ════════ */ .prevnext_wrap { background-color: var(--light-secondary); border-top: 1px solid var(--line); padding: 0; } .prevnext_contain { display: flex; flex-direction: column; max-width: 100%; padding: 0; } .prevnext_layout { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; gap: 0; } /* Each half */ .prev_wrap, .next_wrap { display: flex; flex-direction: column; padding: 56px 72px; gap: 0; position: relative; cursor: pointer; transition: background-color 0.4s ease; text-decoration: none; overflow: hidden; } .prev_wrap { border-right: 1px solid var(--line); } .prev_wrap:hover, .next_wrap:hover { background-color: rgba(162, 123, 92, 0.035); } /* Make the entire card clickable — wrap links cover full area */ .featured_card { display: contents; } .featured_card_link { display: flex; flex-direction: column; gap: 0; text-decoration: none; color: inherit; height: 100%; } /* Direction eyebrow */ .prev_title, .next_title { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--chamoisee); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .prev_title::before { content: '←'; font-size: 0.875rem; font-weight: 300; letter-spacing: 0; } .next_title::after { content: '→'; font-size: 0.875rem; font-weight: 300; letter-spacing: 0; } .next_wrap .next_title { justify-content: flex-end; } /* Image thumbnail */ .project_img_holder { width: 100%; aspect-ratio: 16 / 7; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 24px; box-shadow: 0 8px 32px rgba(44, 38, 34, 0.07); flex-shrink: 0; } .card_img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); display: block; } .featured_card_link:hover .card_img { transform: scale(1.04); } /* Project name */ .card_title { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); margin-bottom: 6px; line-height: 1.15; transition: color 0.3s ease; } .featured_card_link:hover .card_title { color: var(--chamoisee); } .next_wrap .card_title { text-align: right; } /* Category */ .card_text { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); } .next_wrap .card_text { text-align: right; } /* Responsive */ @media (max-width: 768px) { .prevnext_layout { grid-template-columns: 1fr; } .prev_wrap { border-right: none; border-bottom: 1px solid var(--line); } .prev_wrap, .next_wrap { padding: 40px 24px; } } /* Hide fallback collection items unless needed */ .is-hidden { display: none !important; } /* ════════ PAGE TRANSITIONS ════════ */ .page-transition-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--light); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.8s cubic-bezier(0.86, 0, 0.07, 1); } .page-transition-overlay.active { opacity: 1; pointer-events: auto; } .transition-card { position: absolute; overflow: hidden; transition: all 1s cubic-bezier(0.86, 0, 0.07, 1); border-radius: var(--radius-sm); box-shadow: 0 20px 45px rgba(44, 38, 34, 0.08); z-index: 10000; } .transition-img { width: 100%; height: 100%; object-fit: cover; } /* Hide view all products link and inquire buttons in featured section */ .products-header .view-collection-link { display: none !important; } .featured-carousel-track .product-card .product-buy-row { display: none !important; } /* ════════ FEATURED PRODUCTS CAROUSEL ════════ */ .featured-carousel-outer-wrap { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; /* 1600 − 160 padding = 1440px visible track → fits four 320px cards (1376px) with comfortable peek room on either side. */ max-width: 1600px; margin: 0 auto; padding: 0 80px; box-sizing: border-box; } .featured-carousel-nav-btn { background-color: var(--paper); border: 1px solid var(--border-soft); color: var(--ink); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.4s ease; box-shadow: 0 4px 12px rgba(44, 38, 34, 0.05); position: absolute; } .featured-carousel-nav-btn:hover { background-color: var(--ink); color: var(--paper); border-color: var(--ink); transform: scale(1.05); } .featured-carousel-nav-btn.prev-btn { left: 15px; } .featured-carousel-nav-btn.next-btn { right: 15px; } .featured-carousel-track-container { width: 100%; overflow: hidden; padding: 20px 0; } .featured-carousel-track { display: flex; gap: 28px; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .featured-carousel-track .product-card { position: relative; flex: 0 0 300px; width: 300px; opacity: 1.0; transform: scale(0.92); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); background-color: transparent; border: 1px solid rgba(44, 38, 34, 0.06); border-radius: 12px; padding: 16px; cursor: pointer; box-shadow: none; display: flex; flex-direction: column; box-sizing: border-box; } .featured-carousel-track .product-card.highlighted { opacity: 1.0; transform: scale(1.03); border-color: rgba(44, 38, 34, 0.1); box-shadow: 0 20px 40px rgba(44, 38, 34, 0.06); } .featured-carousel-track .product-card.highlighted:hover { border-color: var(--chamoisee); box-shadow: 0 20px 40px rgba(162, 123, 92, 0.12); transform: scale(1.05); } .featured-carousel-track .product-card .product-card-img-wrap { width: 100%; aspect-ratio: 2 / 2.5; overflow: hidden; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: var(--paper); margin-bottom: 16px; } .featured-carousel-track .product-card .product-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0; transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .featured-carousel-track .product-card .product-card-body { padding: 0; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; gap: 16px; box-sizing: border-box; text-align: left; } .featured-carousel-track .product-card.highlighted:hover .product-card-img-wrap img { transform: scale(1.06); } @media (max-width: 768px) { .featured-carousel-outer-wrap { padding: 0; } .featured-carousel-track .product-card { flex: 0 0 calc(100% - 24px); width: calc(100% - 24px); } .featured-carousel-nav-btn.prev-btn { left: 8px; z-index: 20; width: 32px !important; height: 32px !important; } .featured-carousel-nav-btn.prev-btn svg { width: 12px !important; height: 12px !important; } .featured-carousel-nav-btn.next-btn { right: 8px; z-index: 20; width: 32px !important; height: 32px !important; } .featured-carousel-nav-btn.next-btn svg { width: 12px !important; height: 12px !important; } } /* Featured Section Animation Styles */ .products-sticky-wrapper { width: 100%; display: flex; flex-direction: column; box-sizing: border-box; padding-top: clamp(80px, 10vw, 120px); padding-bottom: clamp(60px, 8vw, 100px); } .featured-carousel-outer-wrap .there-is-more-text { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: clamp(24px, 3vw, 42px); font-weight: 300; color: var(--chamoisee); opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity 0.5s ease, transform 0.5s ease; letter-spacing: -0.02em; z-index: 15; } @media (min-width: 1025px) { .products-section { height: auto; } .products-sticky-wrapper { position: relative; height: auto; justify-content: flex-start; overflow: visible; padding-top: 0; padding-bottom: 0; } } .mobile-see-all-wrap { display: none; } .see-all-btn { display: inline-block; padding: 14px 36px !important; background-color: var(--chamoisee); color: var(--paper) !important; border-radius: 6px; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; border: none !important; border-bottom: none !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 12px rgba(162, 123, 92, 0.15); } .see-all-btn:hover { background-color: var(--ink); color: var(--paper) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(44, 38, 34, 0.15); } @media (max-width: 768px) { .featured-carousel-outer-wrap .there-is-more-text { font-size: clamp(20px, 5vw, 26px); top: -10px; transform: none; } .mobile-see-all-wrap { display: flex; justify-content: center; margin-top: 48px; margin-bottom: 48px; } }