/* Cross-Device & Processor Compatibility Enhancements */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } img { -webkit-user-drag: none; } button, a, input, select, textarea { touch-action: manipulation; } /* ============================================================= ISHA'S BOUTIQUE ÔÇö DESIGN SYSTEM v2 "SNITCH-STYLE" Jalgaon, Maharashtra ┬À Est. 15+ years ┬À Archana Patil REFERENCE: snitch.com ÔÇö bold D2C fashion retail. What we took from it, and how it's been made ours: 1. MONOCHROME GROUND, ONE HOT ACCENT Paper white + near-black, with a single loud accent used sparingly (badges, sale flags, hover states). Our accent is NOT borrowed ÔÇö it's lifted straight from the client's own logo mark: the red sun (#E4121F) and its yellow core (#FFB800). 2. TYPE AS THE GRAPHIC Huge uppercase display headlines, tightly tracked, set almost to the edge of the container. Micro-labels in wide tracking (0.18em+). Nothing decorative ÔÇö the words are the decoration. 3. ZERO RADIUS, ZERO SHADOW Sharp corners, 1px hairlines, flat surfaces. Depth comes from image scale and whitespace, never from blur. 4. FULL-BLEED PRODUCT IMAGERY Images run edge to edge, 3:4 portrait, no card chrome, no padding around the photo. Hover = image swap + zoom. 5. MOVING RETAIL FURNITURE Scrolling marquee ticker bars, announcement bar, category tiles with overlaid uppercase labels, service/trust strip. PALETTE --ink #101010 near-black ÔÇö text, buttons, footer --paper #FFFFFF primary ground --smoke #F4F2EF alternating band ground --accent #E4121F logo red ÔÇö badges, flags, hovers --accent-2 #FFB800 logo yellow ÔÇö highlight, ticker pops --line #E5E2DE hairline borders --muted #6E6A66 secondary copy TYPE Display -> 'Anton' single-weight condensed grotesque; the closest free match to the blocky retail display type the reference uses. UI/Body -> 'Archivo' neutral grotesque, 400ÔÇô800, handles both long copy and wide-tracked labels. ============================================================= */ /* Fonts are loaded from a in each page's , not with @import. @import here would hide the request behind this stylesheet: the browser would have to fetch and parse styles.css before it even learned the fonts existed, serialising two round trips and stranding the preconnects. */ :root{ --ink: #101010; --ink-soft: #2A2724; --paper: #FFFFFF; --smoke: #F4F2EF; --accent: #E4121F; --accent-2: #FFB800; --line: #E5E2DE; --line-dark: rgba(255,255,255,.14); --muted: #6E6A66; --display: 'Anton', 'Arial Black', Impact, sans-serif; --body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --container: 1440px; --gutter: 24px; --ease: cubic-bezier(.22,.68,.15,1); --header-h: 94px; --bar-h: 34px; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .marquee-track{ animation: none !important; } } html, body{ margin:0; padding:0; overflow-x: hidden; } body{ margin:0; padding:0; background: var(--paper); color: var(--ink); font-family: var(--body); font-weight: 400; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family: inherit; } ::selection{ background: var(--accent); color:#fff; } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } .wrap{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .wrap-bleed{ max-width:100%; padding: 0; } /* -------------------- Type scale -------------------- */ h1,h2,h3,h4{ font-family: var(--display); font-weight: 400; margin: 0; text-transform: uppercase; letter-spacing: -0.015em; line-height: .92; } h1{ font-size: clamp(2.9rem, 8.6vw, 7.4rem); } h2{ font-size: clamp(2rem, 4.6vw, 3.7rem); } h3{ font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: 0; } h4{ font-size: 1rem; } p{ margin:0; color: var(--ink-soft); } p + p{ margin-top: 1em; } .lede{ font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--muted); max-width: 52ch; } .eyebrow{ display:inline-block; font-family: var(--body); font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); } .eyebrow.accent{ color: var(--accent); } .micro{ font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } /* -------------------- Buttons -------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 16px 34px; border-radius: 0; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); white-space: nowrap; } .btn:hover{ background: var(--accent); border-color: var(--accent); color:#fff; } .btn-ghost{ background: transparent; color: var(--ink); } .btn-ghost:hover{ background: var(--ink); border-color: var(--ink); color:#fff; } .btn-light{ background: #fff; border-color:#fff; color: var(--ink); } .btn-light:hover{ background: var(--accent); border-color: var(--accent); color:#fff; } .btn-outline-light{ background: transparent; border-color: rgba(255,255,255,.55); color:#fff; } .btn-outline-light:hover{ background:#fff; border-color:#fff; color: var(--ink); } .btn-block{ width:100%; } .btn svg{ width:16px; height:16px; flex-shrink:0; } /* -------------------- Announcement bar + marquee -------------------- */ .announce{ position: relative; background: var(--ink); color: #fff; height: var(--bar-h); display:flex; align-items:center; overflow:hidden; } /* Ensure no white gap above announce due to browser bounce or rounding */ .announce::before { content: ""; position: absolute; top: -100px; left: 0; right: 0; height: 100px; background: var(--ink); z-index: -1; } .marquee{ display:flex; overflow:hidden; width:100%; user-select:none; } .marquee-track{ display:flex; flex-shrink:0; align-items:center; gap: 46px; padding-right: 46px; min-width:100%; animation: marquee 34s linear infinite; } .marquee-track span{ font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; } .marquee-track span b{ color: var(--accent-2); font-weight:700; } .marquee:hover .marquee-track{ animation-play-state: paused; } @keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-100%);} } /* big display marquee used as a section divider */ .marquee-band{ background: var(--accent); color:#fff; padding: 18px 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); } .marquee-band .marquee-track{ gap: 34px; padding-right: 34px; animation-duration: 26s; } .marquee-band .marquee-track span{ font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.6rem); letter-spacing: .01em; font-weight: 400; display:flex; align-items:center; gap: 34px; } .marquee-band .dot{ width: 12px; height:12px; background: var(--accent-2); display:inline-block; flex-shrink:0; } /* -------------------- Header -------------------- */ .site-header{ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; background: rgba(255, 255, 255, 0.97) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } body { padding-top: var(--header-h, 94px); } .site-header .wrap{ height: var(--header-h); display:flex; align-items:center; justify-content:space-between; gap: 20px; } /* === BRAND (header) === */ .brand{ display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; text-decoration: none; } .brand-badge{ width: 76px; height: 76px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .brand-badge img, .brand-badge svg{ width: 100%; height: 100%; object-fit: contain; display: block; } .brand-text-image{ height: 34px; width: auto; max-width: 200px; object-fit: contain; display: block; flex-shrink: 0; } /* === BRAND (footer) === */ .brand-footer{ gap: 14px; } .brand-badge-footer{ width: 82px; height: 82px; } .brand-text-image-footer{ height: 38px; width: auto; max-width: 220px; object-fit: contain; display: block; flex-shrink: 0; filter: none !important; } .nav-links{ display:flex; align-items:center; gap: 34px; } .nav-links a{ font-size:.73rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; position:relative; padding: 6px 0; transition: color .2s var(--ease); } .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--ink); transform: scaleX(0); transform-origin:left; transition: transform .3s var(--ease); } .nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); } .nav-links a.active{ color: var(--ink); } .nav-links a .flag{ position:absolute; top:-6px; right:-22px; font-size:.5rem; letter-spacing:.1em; background: var(--accent); color:#fff; padding: 1px 4px; } .header-actions{ display:flex; align-items:center; gap: 8px; } .icon-link{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; color: var(--ink); transition: color .2s var(--ease); } .icon-link:hover{ color: var(--accent); } .icon-link svg{ width:19px; height:19px; } .nav-toggle{ display:none; width:38px; height:38px; border:none; background:transparent; color: var(--ink); align-items:center; justify-content:center; cursor:pointer; } .nav-toggle svg{ width:22px; height:22px; } /* -------------------- HERO V5 — LUXURY SPLIT STUDIO SHOWCASE -------------------- */ .hero-v5 { position: relative; width: 100%; height: clamp(620px, calc(100vh - var(--header-h) - var(--bar-h)), 880px); background: #080808; overflow: hidden; isolation: isolate; } .hv5-slides-container { position: absolute; inset: 0; } .hv5-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s cubic-bezier(.22,.68,.15,1), visibility .7s ease; z-index: 1; } .hv5-slide.is-active { opacity: 1; visibility: visible; z-index: 2; } .hv5-grid { display: grid; grid-template-columns: 1fr 1fr; height: 100%; align-items: center; gap: 40px; } /* Left Copy Panel */ .hv5-left { display: flex; align-items: center; z-index: 5; padding-bottom: 60px; } .hv5-text-box { max-width: 580px; color: #fff; } /* Right Showcase Stage — 100% Uncropped Image View */ .hv5-right { height: 100%; display: flex; align-items: center; justify-content: center; z-index: 5; position: relative; padding-bottom: 60px; } .hv5-stage { position: relative; height: 86%; max-height: 640px; aspect-ratio: 3/4; border: 1px solid rgba(255,255,255,.18); background: #0d0d0d; box-shadow: 0 30px 80px rgba(0,0,0,.75); overflow: hidden; display: flex; align-items: center; justify-content: center; transition: transform .6s var(--ease); } .hv5-stage img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 6s ease-out; } .hv5-slide.is-active .hv5-stage img { transform: none; } .hv5-stage-badge { display: none !important; } @media (max-width: 900px) { .hero-v5 { height: 740px; } .hv5-grid { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px; height: 100%; padding-top: 20px; padding-bottom: 40px; } .hv5-left { padding-bottom: 0; width: 100%; text-align: center; } .hv5-text-box { margin: 0 auto; padding-bottom: 0 !important; text-align: center; } .hv5-text-box .hv3-cta { display: none !important; } .hv5-right { padding-bottom: 0; height: 560px; width: 100%; display: flex; justify-content: center; align-items: center; } .hv5-stage { height: 100%; max-height: 560px; width: 100%; border: none; background: transparent; box-shadow: none; display: flex; justify-content: center; } } /* Light Vignette so Imagery is Bright & Crystal Clear */ .hv4-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 60%, rgba(0,0,0,.75) 100%); pointer-events: none; } /* Text Box */ .hv4-text-box { max-width: 640px; color: #fff; padding-bottom: 78px; } .hv4-eyebrow { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 14px; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 6px 14px; border: 1px solid rgba(255,184,0,.3); } .hv4-title { font-family: var(--display); font-size: clamp(2.8rem, 6.2vw, 5.8rem); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: .92; color: #fff; margin-bottom: 16px; text-shadow: 0 4px 24px rgba(0,0,0,.6); } .hv4-lede { font-size: clamp(.92rem, 1.2vw, 1.1rem); color: rgba(255,255,255,.9); line-height: 1.6; max-width: 48ch; margin-bottom: 30px; text-shadow: 0 2px 10px rgba(0,0,0,.7); } /* Top Floating Badge */ .hv4-top-badge { position: absolute; top: 32px; right: clamp(24px, 4vw, 64px); z-index: 10; background: rgba(0,0,0,.75); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 10px 20px; border: 1px solid rgba(255,255,255,.18); color: var(--accent-2); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0,0,0,.4); } /* Slide Deck */ .hv3-slides-container { position: absolute; inset: 0; } .hv3-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s cubic-bezier(.22,.68,.15,1), visibility .8s ease; z-index: 1; } .hv3-slide.is-active { opacity: 1; visibility: visible; z-index: 2; } /* Background Image & Overlay */ .hv3-slide-bg { position: absolute; inset: 0; overflow: hidden; } .hv3-slide-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transform: scale(1.06); transition: transform 7s ease-out; } .hv3-slide.is-active .hv3-slide-bg img { transform: scale(1); } .hv3-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.75) 45%, rgba(8,8,8,.25) 100%); } /* Slide Content */ .hv3-content { position: relative; z-index: 4; height: 100%; display: flex; align-items: center; } .hv3-text-box { max-width: 580px; color: #fff; padding-bottom: 70px; } /* Badges & Tags */ .hv3-badge-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .hv3-tag { font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding: 5px 12px; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.15); } .hv3-tag.gold { background: rgba(255,184,0,.15); color: var(--accent-2); border-color: rgba(255,184,0,.35); } .hv3-badge-2003 { background: #000; color: #fff; padding: 5px 14px; font-family: var(--display); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.2); } /* Titles & Lede */ .hv3-title { font-family: var(--display); font-size: clamp(3.2rem, 7.5vw, 6.8rem); font-weight: 400; text-transform: uppercase; letter-spacing: -.02em; line-height: .9; color: #fff; margin-bottom: 24px; transform: translateY(30px); opacity: 0; transition: transform .7s var(--ease) .15s, opacity .7s var(--ease) .15s; } .hv3-slide.is-active .hv3-title { transform: translateY(0); opacity: 1; } .hv3-title em { font-style: normal; color: var(--accent-2); } .hv3-lede { font-size: clamp(.92rem, 1.2vw, 1.08rem); color: rgba(255,255,255,.72); line-height: 1.7; max-width: 48ch; margin-bottom: 34px; transform: translateY(24px); opacity: 0; transition: transform .7s var(--ease) .3s, opacity .7s var(--ease) .3s; } .hv3-slide.is-active .hv3-lede { transform: translateY(0); opacity: 1; } .hv3-lede strong { color: #fff; font-weight: 700; } /* CTAs */ .hv3-cta { display: flex; gap: 14px; flex-wrap: wrap; transform: translateY(20px); opacity: 0; transition: transform .7s var(--ease) .45s, opacity .7s var(--ease) .45s; } .hv3-slide.is-active .hv3-cta { transform: translateY(0); opacity: 1; } .hv3-btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 32px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: all .28s var(--ease); white-space: nowrap; text-decoration: none; border: 1.5px solid transparent; } .hv3-btn-primary { background: #fff; color: var(--ink); border-color: #fff; } .hv3-btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(228,18,31,.4); } .hv3-btn-ghost { background: transparent; color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.3); } .hv3-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; transform: translateY(-2px); } /* TOP RIGHT FLOATING STATS BAR (Unobstructed & Clean) */ .hv3-top-stats { position: absolute; top: 32px; right: clamp(24px, 4vw, 64px); z-index: 10; display: flex; align-items: center; gap: 18px; background: rgba(12,12,12,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 12px 24px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 40px rgba(0,0,0,.4); } .hv3-stat-box { text-align: center; } .hv3-stat-box strong { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 400; color: var(--accent-2); line-height: 1; } .hv3-stat-box span { display: block; font-size: .55rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 3px; } .hv3-stat-sep { width: 1px; height: 28px; background: rgba(255,255,255,.12); } /* CAROUSEL CONTROLS BAR */ .hv3-controls-wrap { position: absolute; bottom: 58px; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Counter & Progress Line */ .hv3-counter { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.7); font-size: .74rem; font-weight: 700; letter-spacing: .14em; } .hv3-counter-bar { width: 90px; height: 3px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; } .hv3-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; background: var(--accent-2); transition: width .4s var(--ease); } /* Arrow Buttons */ .hv3-arrows { display: flex; gap: 8px; } .hv3-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(12,12,12,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .25s var(--ease); } .hv3-arrow svg { width: 18px; height: 18px; } .hv3-arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08); } /* Thumbnail Navigation */ .hv3-thumbs { display: flex; gap: 10px; } .hv3-thumb { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; background: rgba(12,12,12,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1.5px solid rgba(255,255,255,.12); color: rgba(255,255,255,.6); cursor: pointer; transition: all .3s var(--ease); } .hv3-thumb img { width: 32px; height: 32px; object-fit: cover; border-radius: 2px; opacity: .7; transition: opacity .3s ease; } .hv3-thumb span { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .hv3-thumb:hover { border-color: rgba(255,255,255,.4); color: #fff; } .hv3-thumb:hover img { opacity: 1; } .hv3-thumb.is-active { border-color: var(--accent-2); background: rgba(12,12,12,.92); color: #fff; } .hv3-thumb.is-active img { opacity: 1; } /* Responsive adjustments */ @media (max-width: 1024px) { .hv3-thumbs { display: none; } .hv3-top-stats { top: 20px; right: 20px; padding: 8px 16px; } .hv3-stat-box strong { font-size: 1.1rem; } .hv4-top-badge { top: 20px; right: 20px; font-size: .6rem; padding: 8px 14px; } } @media (max-width: 680px) { .hv3-top-stats { display: none; } .hv3-text-box { max-width: 100%; } .hv3-title { font-size: clamp(2.6rem, 11vw, 3.8rem); } .hv3-controls-wrap { bottom: 52px; } .hv3-btn { justify-content: center; } .hv4-top-badge { display: none; } .hv4-title { font-size: clamp(2rem, 9vw, 3rem); margin-bottom: 2px !important; } .hv4-text-box { padding-bottom: 0 !important; } .hv4-lede { display: none; } } /* Bottom ticker band for hero (used by hv2-bottom-band in V4 section) */ @keyframes hv2-band { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hv2-bottom-band { position: absolute; bottom: 0; left: 0; right: 0; height: 42px; background: var(--accent); display: flex; align-items: center; overflow: hidden; z-index: 6; } .hv2-band-track { display: flex; flex-shrink: 0; align-items: center; gap: 0; white-space: nowrap; animation: hv2-band 28s linear infinite; } .hv2-band-track span { font-family: var(--display); font-size: clamp(.9rem, 1.4vw, 1.2rem); letter-spacing: .08em; color: #fff; text-transform: uppercase; padding: 0 28px; } .hv2-band-track i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); flex-shrink: 0; font-style: normal; } /* -------------------- Section furniture -------------------- */ section{ padding: 86px 0; } section.tight{ padding: 56px 0; } section.bleed{ padding: 86px 0; } .bg-smoke{ background: var(--smoke); } .bg-ink{ background: var(--ink); color:#fff; } .bg-ink h2, .bg-ink h3, .bg-ink .eyebrow{ color:#fff; } .bg-ink p{ color: rgba(255,255,255,.68); } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 30px; margin-bottom: 38px; flex-wrap:wrap; } .section-head .eyebrow{ display:block; margin-bottom: 12px; } .section-head h2{ max-width: 20ch; } .section-head .link-more{ font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 3px; white-space:nowrap; } .section-head .link-more:hover{ color: var(--accent); border-color: var(--accent); } .section-head.center{ flex-direction:column; align-items:center; text-align:center; } .section-head.center h2{ max-width: 24ch; } /* -------------------- Category tiles -------------------- */ .tiles{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .tiles.cols-2{ grid-template-columns: repeat(2, 1fr); } .tile{ position:relative; aspect-ratio: 3/4; overflow:hidden; background: var(--smoke); display:block; } .tile img{ width:100%; height:100%; object-fit:cover; object-position: center top; /* the studio flatlays ship with rounded white corners baked into the JPEG — a hair of scale crops them off so the grid stays sharp-edged */ transform: scale(1.05); transition: transform .8s var(--ease); } .tile:hover img{ transform: scale(1.11); } .tile::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(16,16,16,.66) 100%); } .tile-label{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 22px 20px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap: 12px; } .tile-label b{ font-family: var(--display); font-weight:400; font-size: clamp(1rem, 1.5vw, 1.35rem); text-transform:uppercase; letter-spacing:.01em; } .tile-label span{ font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.85; } /* -------------------- Product grid -------------------- */ .product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 30px 22px; } .product-grid.cols-3{ grid-template-columns: repeat(3, 1fr); } .product{ position:relative; } .product-media{ position:relative; aspect-ratio: 3/4; overflow:hidden; background: var(--smoke); display:block; margin-bottom: 14px; } .product-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center top; /* crops the rounded white corners baked into the studio flatlays */ transform: scale(1.05); transition: opacity .5s var(--ease), transform .8s var(--ease); } /* The crossfade only runs on cards carrying a genuine second photograph (.has-hover). Cards with a single image must never fade their main image out ÔÇö that would leave an empty grey box on hover. They still get the zoom. */ .product-media .img-alt{ opacity:0; } .product:hover .product-media.has-hover .img-main{ opacity:0; } .product:hover .product-media.has-hover .img-alt{ opacity:1; } .product:hover .product-media img{ transform: scale(1.09); } /* the campaign tile is vector artwork with intentional edge marks ÔÇö never crop it */ .product-media img[src$=".svg"], .product:hover .product-media img[src$=".svg"]{ transform: none; } .badge{ position:absolute; top:10px; left:10px; z-index:3; background: var(--ink); color:#fff; font-size:.58rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding: 5px 9px; } .badge.hot{ background: var(--accent); } .badge.gold{ background: var(--accent-2); color: var(--ink); } .product-media .quick{ position:absolute; left:0; right:0; bottom:0; z-index:3; background: var(--ink); color:#fff; text-align:center; padding: 13px 10px; font-size:.66rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; transform: translateY(100%); transition: transform .35s var(--ease); } .product:hover .quick{ transform: translateY(0); } .product-meta .cat{ font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); display:block; margin-bottom:5px; } .product-meta h3{ font-family: var(--body); font-size:.92rem; font-weight:600; letter-spacing:0; text-transform:none; line-height:1.35; margin-bottom: 5px; } .product-meta .price{ font-size:.82rem; font-weight:700; color: var(--ink); } .product-meta .price s{ color: var(--muted); font-weight:400; margin-right:7px; } .product-meta .price .off{ color: var(--accent); margin-left:7px; } /* swatch row */ .swatches{ display:flex; gap:6px; margin-top:9px; } .swatches i{ width:13px; height:13px; display:block; border:1px solid var(--line); } /* -------------------- Editorial split -------------------- */ .editorial{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; min-height: 560px; } .editorial.reverse .editorial-media{ order:2; } .editorial-media{ position:relative; overflow:hidden; background: var(--smoke); } .editorial-media img{ width:100%; height:100%; object-fit:cover; min-height: 420px; } .editorial-copy{ display:flex; flex-direction:column; justify-content:center; padding: 72px clamp(24px, 6vw, 92px); background: var(--smoke); } .editorial-copy.on-ink{ background: var(--ink); color:#fff; } .editorial-copy.on-ink h2{ color:#fff; } .editorial-copy.on-ink p{ color: rgba(255,255,255,.68); } .editorial-copy .eyebrow{ margin-bottom:16px; } .editorial-copy h2{ margin-bottom: 20px; } .editorial-copy .btn{ align-self:flex-start; margin-top: 30px; } .stat-row{ display:flex; gap: 40px; margin-top: 38px; flex-wrap:wrap; padding-top: 28px; border-top: 1px solid var(--line); } .on-ink .stat-row{ border-color: var(--line-dark); } .stat b{ display:block; font-family: var(--display); font-size: 2.1rem; line-height:1; margin-bottom:6px; } .stat span{ font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); } .on-ink .stat span{ color: rgba(255,255,255,.6); } /* -------------------- Service / trust strip (redesigned) -------------------- */ .trust{ margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); position: relative; overflow: hidden; } .trust::before{ content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, transparent, transparent 40px, rgba(228,18,31,.04) 40px, rgba(228,18,31,.04) 41px ); pointer-events: none; } .trust-item{ position: relative; padding: 40px 28px; text-align: left; border-right: 1px solid rgba(255,255,255,.08); transition: background .35s ease; overflow: hidden; } .trust-item:last-child{ border-right: none; } .trust-item::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.22,.68,.15,1); } .trust-item:hover::after{ transform: scaleX(1); } .trust-item:hover{ background: rgba(255,255,255,.04); } .trust-item svg{ width: 32px; height: 32px; margin-bottom: 18px; display: block; color: var(--accent); transition: transform .35s ease; } .trust-item:hover svg{ transform: scale(1.15) rotate(-6deg); } .trust-item b{ display: block; font-family: var(--display); font-size: clamp(.95rem, 1.4vw, 1.15rem); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin-bottom: 8px; } .trust-item span{ font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.5; letter-spacing: .04em; } /* Support for light-background trust blocks (e.g., Services page 'How It Works') */ .trust-light { background: #fff !important; } .trust-light::before { display: none; } .trust-light .trust-item { border-right-color: rgba(0,0,0,.1) !important; background: #fff !important; } .trust-light .trust-item b { color: var(--ink) !important; } .trust-light .trust-item span { color: var(--muted) !important; } .trust-light .trust-item:hover { background: rgba(0,0,0,.03) !important; } .trust-light .trust-item svg { color: var(--accent) !important; } /* -------------------- Lookbook mosaic -------------------- */ /* 6 items = tall(1x2) + wide(2x1) + 4 singles = exactly 8 cells = 4 cols x 2 rows. DOM order must be tall, wide, then the singles for it to tessellate; `dense` backfills anything the author reorders later. */ .mosaic{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; grid-auto-flow: row dense; gap: 2px; } .mosaic a{ position:relative; overflow:hidden; background: var(--smoke); display:block; } .mosaic img{ width:100%; height:100%; object-fit:cover; transform: scale(1.05); transition: transform .8s var(--ease); } .mosaic a:hover img{ transform: scale(1.11); } .mosaic .tall{ grid-row: span 2; } .mosaic .wide{ grid-column: span 2; } .mosaic .cap{ position:absolute; left:0; bottom:0; z-index:2; background: var(--ink); color:#fff; font-size:.6rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding: 8px 12px; transform: translateY(100%); transition: transform .3s var(--ease); } .mosaic a:hover .cap{ transform: translateY(0); } /* -------------------- Services list (numbered rows) -------------------- */ .svc-list{ border-top: 1px solid var(--line); } .svc-row{ display:grid; grid-template-columns: 80px 1.1fr 1.4fr auto; gap: 30px; align-items:center; padding: 30px 12px; border-bottom: 1px solid var(--line); transition: background .3s var(--ease), padding .3s var(--ease); } .svc-row:hover{ background: var(--smoke); padding-left: 24px; } .svc-row .n{ font-family: var(--display); font-size: 1.7rem; color: var(--line); } .svc-row:hover .n{ color: var(--accent); } .svc-row h3{ margin-bottom: 6px; } .svc-row .tags{ display:flex; flex-wrap:wrap; gap:7px; } .svc-row .tags i{ font-style:normal; font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line); padding: 5px 9px; color: var(--muted); } .svc-row .go{ font-size:1.5rem; line-height:1; color: var(--line); } .svc-row:hover .go{ color: var(--ink); } /* -------------------- Timeline -------------------- */ .timeline{ border-top: 1px solid var(--line); } .t-row{ display:grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 34px 0; border-bottom: 1px solid var(--line); } .t-row .t-label{ font-family: var(--display); font-size: 1.1rem; text-transform:uppercase; color: var(--accent); } .t-row h3{ margin-bottom: 8px; } .t-row p{ max-width: 62ch; color: var(--muted); } /* -------------------- Lookbook Portal -------------------- */ .lookbook-portal { padding: clamp(60px,8vw,100px) 0; } .lp-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .lp-text .eyebrow { display: block; margin-bottom: 12px; } .lp-text h2 { margin-bottom: 18px; } .lp-text p { color: var(--muted); max-width: 44ch; margin-bottom: 28px; } .btn-ink { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border: none; padding: 14px 28px; font-weight: 700; font-size: .88rem; letter-spacing: .08em; cursor: pointer; font-family: inherit; transition: background .3s, transform .3s; } .btn-ink:hover { background: #1a1a1a; transform: translateY(-2px); } .lp-preview { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 400px; } .lp-card { position: relative; overflow: hidden; display: block; } .lp-card img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: var(--smoke); border: 1px solid var(--line); transition: transform .5s var(--ease); } .lp-card:hover img { transform: scale(1.06); } .lp-more-overlay { position: absolute; inset: 0; background: rgba(8,8,8,.68); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 4px; } .lp-more-overlay span { font-size: 1.6rem; font-weight: 900; line-height: 1; } .lp-more-overlay small { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; } @media (max-width: 860px) { .lp-inner { grid-template-columns: 1fr; gap: 32px; } .lp-preview { height: 280px; } } /* -------------------- Trusted chips -------------------- */ .trusted-row { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .trusted-label { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .trusted-chips { display: flex; flex-wrap: wrap; gap: 8px; } .trusted-chip { padding: 6px 14px; border: 1px solid var(--line); font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: var(--ink); background: var(--smoke); } .trusted-chip.featured { background: var(--ink); color: var(--accent-2); border-color: var(--ink); font-weight: 800; letter-spacing: .07em; } /* -------------------- Reviews (Visual Client Cards) -------------------- */ .reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .review { background: var(--smoke); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); padding: 0; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .review:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.12); } .review-media { width: 100%; aspect-ratio: 4/5; overflow: hidden; position: relative; background: #f0f0f0; } .review-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s var(--ease); } .review:hover .review-media img { transform: scale(1.04); } .review-content { padding: 24px; display: flex; flex-direction: column; flex: 1; } .review .stars { color: var(--accent); letter-spacing: .18em; font-size: .85rem; margin-bottom: 12px; } .review p { font-size: .88rem; line-height: 1.6; color: var(--ink); flex: 1; margin-bottom: 16px; } .review .who { display: flex; flex-direction: column; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto; } .review .who span { display: block; color: var(--accent); font-weight: 700; margin-top: 4px; letter-spacing: .08em; font-size: .8em; } /* -------------------- Lightbox Modal -------------------- */ .gallery-modal { position: fixed; inset: 0; background: rgba(8,8,8,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } .gallery-modal.is-active { opacity: 1; visibility: visible; } .modal-close { position: absolute; top: 24px; right: 24px; background: none; border: none; color: #fff; cursor: pointer; padding: 10px; z-index: 1010; transition: transform .3s ease; } .modal-close:hover { transform: scale(1.1); } .modal-close svg { width: 28px; height: 28px; } .modal-stage { position: relative; width: 90%; max-width: 800px; height: 70vh; display: flex; align-items: center; justify-content: center; } .modal-img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .modal-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .3s, transform .3s; z-index: 1005; } .modal-arrow:hover { background: rgba(255,255,255,.18); transform: translateY(-50%) scale(1.05); } .modal-prev { left: -70px; } .modal-next { right: -70px; } .modal-caption-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 16px; z-index: 1005; } .modal-caption { color: #fff; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; text-align: center; max-width: 600px; } .modal-counter { margin-top: 6px; color: rgba(255,255,255,.5); font-size: .75rem; letter-spacing: .1em; } /* Modal Zoom Toolbar & Image Container */ .modal-zoom-bar { position: absolute; top: 24px; left: 24px; display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); padding: 6px 12px; border-radius: 30px; z-index: 1010; } .zoom-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .2s ease, transform .2s ease; } .zoom-btn:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } .zoom-btn svg { width: 18px; height: 18px; } .zoom-level-indicator { color: rgba(255, 255, 255, 0.85); font-size: 0.75rem; font-weight: 600; min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; border-left: 1px solid rgba(255, 255, 255, 0.2); padding-left: 8px; margin-left: 4px; } .modal-img-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; user-select: none; } .modal-img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.6); transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1); cursor: zoom-in; transform-origin: center center; } .modal-img.is-zoomed { cursor: grab; } .modal-img.is-dragging { cursor: grabbing; transition: none; } /* -------------------- Dedicated Gallery Page Styles -------------------- */ .gallery-hero { padding: 140px 0 40px; background: linear-gradient(180deg, #FBF9F5 0%, #F5F1E8 100%); border-bottom: 1px solid rgba(0,0,0,.06); } .gallery-hero-inner { max-width: 760px; margin: 0 auto; } .gallery-hero h1 { font-family: var(--font-heading, "Cormorant Garamond", serif); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.15; color: #1A1A1A; margin: 12px 0 16px; } .gallery-hero .lead { font-size: 1.05rem; line-height: 1.6; color: #555; } .gallery-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 32px; } .filter-btn { background: #FFF; border: 1px solid rgba(0,0,0,.12); color: #444; padding: 10px 22px; border-radius: 30px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 2px 6px rgba(0,0,0,.03); } .filter-btn:hover { border-color: #1A1A1A; color: #1A1A1A; transform: translateY(-1px); } .filter-btn.is-active { background: #1A1A1A; color: #FFF; border-color: #1A1A1A; box-shadow: 0 4px 12px rgba(0,0,0,.15); } .gallery-section { padding: 40px 0 90px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .gallery-grid > * { opacity: 1 !important; transform: none !important; } .gallery-card { background: #FFF; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.06); transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; display: flex; flex-direction: column; cursor: pointer; opacity: 1 !important; visibility: visible !important; } .gallery-card.is-hidden { display: none !important; } .gallery-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(0,0,0,.09); } .gallery-card-media { position: relative; width: 100%; height: 340px; overflow: hidden; background: #EFECE6; } .gallery-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, opacity 0.3s ease; } .gallery-card:hover .gallery-card-media img { transform: scale(1.06); } .gallery-card-badge { position: absolute; top: 14px; left: 14px; background: rgba(26,26,26,.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #FFF; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 12px; border-radius: 20px; z-index: 2; } .gallery-card-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; z-index: 3; } .gallery-card:hover .gallery-card-overlay { opacity: 1; } .gallery-card-zoom-icon { background: #FFF; color: #1A1A1A; padding: 10px 18px; border-radius: 25px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.2); transform: translateY(10px); transition: transform 0.3s ease; } .gallery-card:hover .gallery-card-zoom-icon { transform: translateY(0); } .gallery-card-info { padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } .gallery-card-title { font-family: var(--font-heading, "Cormorant Garamond", serif); font-size: 1.15rem; font-weight: 600; color: #1A1A1A; margin-bottom: 6px; line-height: 1.3; } .gallery-card-cat { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.08em; } /* Responsive Device Tweaks for Gallery */ @media (max-width: 1200px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } @media (max-width: 900px) { .gallery-hero { padding: 110px 0 30px; } .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .gallery-card-media { height: 280px; } } @media (max-width: 600px) { .gallery-hero { padding: 95px 0 20px; } .gallery-filters { gap: 6px; margin-top: 20px; } .filter-btn { padding: 7px 14px; font-size: 0.78rem; } .gallery-section { padding: 24px 0 60px; } .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .gallery-card-media { height: 210px; } .gallery-card-badge { font-size: 0.58rem; padding: 3px 8px; top: 8px; left: 8px; } .gallery-card-info { padding: 10px; } .gallery-card-title { font-size: 0.95rem; margin-bottom: 3px; } .gallery-card-cat { font-size: 0.68rem; } } @media (max-width: 400px) { .gallery-grid { grid-template-columns: 1fr; gap: 16px; } .gallery-card-media { height: 320px; } } @media (max-width: 1024px) { .modal-prev { left: 16px; } .modal-next { right: 16px; } .modal-stage { height: 60vh; } } /* -------------------- Client / trust strip -------------------- */ .client-strip{ display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .client-strip .c-item{ flex:1 1 auto; min-width: 180px; padding: 26px 22px; border-left:1px solid var(--line); text-align:center; } .client-strip .c-item:first-child{ border-left:none; } .client-strip .c-item b{ display:block; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .client-strip .c-item span{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } @media (max-width: 1023px){ .client-strip .c-item{ min-width: 50%; border-left:none; border-top:1px solid var(--line); } .client-strip .c-item:nth-child(odd){ border-right:1px solid var(--line); } .client-strip .c-item:nth-child(-n+2){ border-top:none; } } @media (max-width: 480px){ .client-strip .c-item{ min-width: 100%; border-right:none !important; } .client-strip .c-item:first-child{ border-top:none; } } /* -------------------- Big CTA band -------------------- */ .cta-band{ background: var(--ink); color:#fff; padding: clamp(56px, 8vw, 96px) 0; text-align:center; } .cta-band h2{ color:#fff; max-width: 18ch; margin: 0 auto 18px; } .cta-band p{ color: rgba(255,255,255,.66); max-width: 52ch; margin: 0 auto; } .cta-band .hero-cta{ justify-content:center; margin-top: 32px; } /* -------------------- Contact -------------------- */ .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2px; } .contact-panel{ background: var(--smoke); padding: clamp(30px, 4vw, 54px); } .contact-panel.dark{ background: var(--ink); color:#fff; } .contact-panel.dark h2, .contact-panel.dark h3, .contact-panel.dark .eyebrow{ color:#fff; } .contact-panel.dark p, .contact-panel.dark a{ color: rgba(255,255,255,.72); } .contact-panel.dark a:hover{ color: var(--accent-2); } .info-row{ display:flex; gap:16px; padding: 22px 0; border-top: 1px solid var(--line-dark); } .info-row:first-of-type{ border-top:none; padding-top: 8px; } .info-row .ic{ width:22px; flex-shrink:0; color: var(--accent-2); } .info-row .ic svg{ width:20px; height:20px; } .info-row h4{ font-family: var(--body); font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin-bottom:7px; color:#fff; } .info-row p{ font-size:.9rem; line-height:1.55; } .map-frame{ margin-top: 26px; border: 1px solid var(--line-dark); } .map-frame iframe{ width:100%; height: 240px; border:0; display:block; filter: grayscale(1) contrast(1.05); } .form-row{ margin-bottom: 18px; } .form-row label{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); margin-bottom: 8px; } .form-row input, .form-row select, .form-row textarea{ width:100%; background: var(--paper); border: 1px solid var(--line); border-radius: 0; color: var(--ink); padding: 14px 16px; font-family: var(--body); /* 16px is a hard floor, not a design choice: anything smaller makes iOS Safari zoom the whole page in on focus */ font-size: 16px; transition: border-color .2s var(--ease); } .form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color: var(--ink); } .form-row textarea{ resize: vertical; min-height: 120px; } .form-two{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-note{ font-size:.74rem; color: var(--muted); margin-top: 14px; } /* -------------------- New-arrivals opt-in -------------------- This was an email field whose address was never stored anywhere. It is now a plain WhatsApp opt-in, so nothing is collected that isn't actually used. */ .newsletter{ max-width: 460px; margin-top: 22px; } .newsletter p{ font-size:.8rem; color: rgba(255,255,255,.6); margin-bottom: 12px; } .newsletter a, .footer-col .newsletter a, .footer-col .newsletter a * { display:inline-flex !important; align-items:center !important; gap:9px !important; border:2px solid #fff !important; background:#fff !important; color: #101010 !important; padding: 12px 20px !important; font-size:.68rem !important; font-weight:800 !important; letter-spacing:.16em !important; text-transform:uppercase !important; text-decoration: none !important; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .newsletter a svg, .footer-col .newsletter a svg { width:15px; height:15px; flex-shrink:0; fill: #101010 !important; } .newsletter a:hover, .footer-col .newsletter a:hover, .footer-col .newsletter a:hover * { background: var(--accent, #25D366) !important; border-color: var(--accent, #25D366) !important; color:#fff !important; } .newsletter a:hover svg, .footer-col .newsletter a:hover svg { fill: #fff !important; } /* -------------------- Footer -------------------- */ .site-footer{ background: var(--ink); color: #fff; padding: 70px 0 26px; } .footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 50px; padding-bottom: 48px; border-bottom: 1px solid var(--line-dark); } .footer-brand .brand-word{ color:#fff; } .footer-brand .brand-word small{ color: rgba(255,255,255,.5); } .footer-brand p{ font-size:.86rem; color: rgba(255,255,255,.6); max-width: 34ch; margin-top: 18px; } .footer-social{ display:flex; gap: 6px; margin-top: 22px; } .footer-social .icon-link{ border:1px solid var(--line-dark); color:#fff; } .footer-social .icon-link:hover{ background:#fff; color: var(--ink); border-color:#fff; } .footer-col h4{ font-family: var(--body); font-size:.66rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color: #fff; margin-bottom: 20px; } .footer-col ul li{ margin-bottom: 11px; } .footer-col a{ font-size:.86rem; color: rgba(255,255,255,.6); transition: color .2s var(--ease); } .footer-col a:hover{ color:#fff; } .footer-bottom{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; padding-top: 24px; font-size:.78rem; letter-spacing:.04em; color: rgba(255,255,255,.5); } .footer-bottom-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .powered-by-sedrex { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); font-weight: 500; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; margin-top: 2px; } .powered-by-sedrex:hover { opacity: 1; transform: translateY(-1px); } .powered-by-sedrex img { height: 26px; width: auto; display: inline-block; vertical-align: middle; } @media (max-width: 600px) { .footer-bottom { flex-direction: column; text-align: center; align-items: center; gap: 12px; } .footer-bottom-left { align-items: center; } } /* -------------------- WhatsApp float -------------------- */ .wa-float{ position: fixed; right: 28px; bottom: 28px; z-index: 9999; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.40); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .wa-float:hover{ transform: translateY(-4px) scale(1.08); box-shadow: 0 10px 28px rgba(0,0,0,.50); } .wa-float svg{ width: 28px; height: 28px; } /* -------------------- Reveal -------------------- Only hidden when JS is confirmed running (html.js is set by an inline script in ). Without it the content stays visible rather than being stranded at opacity 0. */ .js .reveal{ opacity:0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.is-visible{ opacity:1; transform:none; } /* -------------------- Page hero (inner pages split) -------------------- */ .page-hero { background: var(--ink); color: #fff; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); } .page-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; } .page-hero-left { padding: clamp(48px, 6vw, 80px) 40px clamp(48px, 6vw, 80px) 0; z-index: 3; } .page-hero-right { position: relative; height: 100%; min-height: 380px; overflow: hidden; } .page-hero-right img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .page-hero-right::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, transparent 40%); pointer-events: none; } .page-hero h1{ color:#fff; max-width: 16ch; } .page-hero .eyebrow{ color: var(--accent-2); margin-bottom:16px; display: block; } .page-hero .lede{ color: rgba(255,255,255,.7); margin-top: 18px; max-width: 50ch; } .crumbs{ font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: rgba(255,255,255,.45); margin-bottom: 22px; } .crumbs a:hover{ color:#fff; } @media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; } .page-hero-left { padding: 48px 24px; } .page-hero-right { min-height: 280px; height: 280px; } .page-hero-right::after { background: linear-gradient(180deg, var(--ink) 0%, transparent 40%); } } /* ============================================================= RESPONSIVE ÔÇö four tiers, tuned to real device widths rather than round numbers: Ôëñ1180 Small laptop / narrow browser window Ôëñ1023 TABLET ÔÇö iPad portrait (768/834), Air (820), Android tablets (800/912) all land here. This is also where the hamburger nav takes over: the inline nav at full desktop width needs ~800px+ just for its own content (brand + 5 links + icons), so anything narrower than 1024 showed a cramped or wrapping header before this rule existed. Ôëñ680 PHONE ÔÇö portrait phones, incl. phablets Ôëñ400 Smallest phones (SE-class) ============================================================= */ @media (max-width: 1180px){ .product-grid{ grid-template-columns: repeat(3, 1fr); } .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 1023px){ :root{ --gutter: 20px; --bar-h: 0px; } .announce { display: none !important; } /* -- nav: hamburger takes over here, not at phone width -- */ .nav-toggle{ display:flex; } .nav-links{ position: fixed; top: calc(var(--header-h) + var(--bar-h)); left:0; right:0; background: var(--paper); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 20px 26px; border-bottom: 1px solid var(--line); transform: translateY(-140%); transition: transform .4s var(--ease); max-height: calc(100vh - var(--header-h) - var(--bar-h)); overflow-y: auto; z-index: 110; } .nav-links.open{ transform: translateY(0); } .nav-links a{ width:100%; padding: 18px 4px; border-bottom: 1px solid var(--line); font-size:1rem; } .nav-links a::after{ display:none; } .nav-links a .flag{ position:static; margin-left:8px; } .header-actions .desktop-only{ display:none; } /* -- grid reflows -- */ .product-grid, .product-grid.cols-3{ grid-template-columns: repeat(2, 1fr); gap: 26px 16px; } .tiles{ grid-template-columns: repeat(2, 1fr); } .editorial{ grid-template-columns: 1fr; } .editorial.reverse .editorial-media{ order:0; } .editorial-media img{ min-height: 320px; } .editorial-copy{ padding: 48px 24px; } .trust{ grid-template-columns: repeat(2,1fr); } .trust-item:nth-child(odd){ border-right: 1px solid rgba(255,255,255,.08); } .trust-item:nth-child(even){ border-right: none; } .trust-item:nth-child(3), .trust-item:nth-child(4){ border-top: 1px solid rgba(255,255,255,.08); } /* trust-light overrides for tablet */ .trust-light .trust-item:nth-child(odd){ border-right: 1px solid rgba(0,0,0,.08) !important; } .trust-light .trust-item:nth-child(even){ border-right: none !important; } .trust-light .trust-item:nth-child(3), .trust-light .trust-item:nth-child(4){ border-top: 1px solid rgba(0,0,0,.08) !important; } .mosaic{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } .mosaic .tall{ grid-row: auto; } .mosaic .wide{ grid-column: auto; } .reviews{ grid-template-columns: repeat(3,1fr); } .contact-grid{ grid-template-columns: 1fr; } .svc-row{ grid-template-columns: 44px 1fr; gap: 16px; padding: 26px 8px; } .svc-row:hover{ padding-left: 8px; } .svc-row .tags{ grid-column: 2; } .svc-row .go{ display:none; } .t-row{ grid-template-columns: 1fr; gap: 12px; } .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 680px){ /* Mobile header fixes */ .brand-badge { width: 50px !important; height: 50px !important; } .brand-text-image { height: 26px !important; } .brand { gap: 8px !important; } .site-header .wrap { padding: 0 14px !important; } .header-actions { gap: 6px !important; } .header-actions .icon-link svg { width: 20px; height: 20px; } :root { --gutter: 16px; } section{ padding: 52px 0; } section.tight{ padding: 40px 0; } .hero{ height: clamp(560px, 100svh - var(--header-h) - var(--bar-h), 760px); } .hero-content{ padding-bottom: 40px; } .hero-dots{ bottom: 18px; } .hero-cta{ gap:10px; } .hero-cta .btn{ flex: 1 1 auto; } .stat-row{ gap: 22px; } .form-two{ grid-template-columns: 1fr; } .footer-grid{ grid-template-columns: 1fr; gap: 36px; } .svc-row{ grid-template-columns: 1fr; } .svc-row .n{ display:none; } .svc-row .tags{ grid-column: auto; margin-top: 4px; } .section-head{ gap: 14px; } .section-head h2{ max-width: none; } /* announcement ticker: drop to one line of breathing room */ .announce{ height: 32px; } /* Reviews — horizontal scroll strip */ .reviews{ display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding-bottom: 14px; scrollbar-width: none; grid-template-columns: unset; } .reviews::-webkit-scrollbar{ display: none; } .review{ flex: 0 0 82vw; max-width: 310px; scroll-snap-align: start; min-width: 260px; } /* Client Strip — horizontal scroll strip */ .client-strip{ flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } .client-strip::-webkit-scrollbar{ display: none; } .c-item{ flex: 0 0 65vw; max-width: 240px; min-width: unset; scroll-snap-align: start; border-bottom: 1px solid var(--line); } /* Mosaic lookbook — horizontal scroll strip */ .mosaic{ display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 12px; scrollbar-width: none; grid-template-columns: unset; grid-auto-rows: unset; } .mosaic::-webkit-scrollbar{ display: none; } .mosaic a{ flex: 0 0 72vw; max-width: 280px; height: 260px; scroll-snap-align: start; grid-row: auto; grid-column: auto; } .mosaic .tall, .mosaic .wide{ grid-row: auto; grid-column: auto; flex: 0 0 72vw; } } @media (max-width: 400px){ .brand-word{ font-size: 1.15rem; } .brand-word small{ font-size: .58rem; } .newsletter a{ width:100%; justify-content:center; } } @media (max-width: 680px){ .trust{ display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 10px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .trust::-webkit-scrollbar { display: none; } .trust-item { flex: 0 0 260px; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.08) !important; padding: 24px 16px; background: rgba(255,255,255,.02); } .trust-light .trust-item { border: 1px solid rgba(0,0,0,.08) !important; background: rgba(0,0,0,.01); } .trusted-row { flex-direction: column; align-items: flex-start; gap: 10px; } .trusted-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .trusted-chips::-webkit-scrollbar { display: none; } } /* -------------------- Touch devices -------------------- */ /* hover-driven reveals (product quick-view, mosaic caption, tile zoom) never fire on touch ÔÇö show them by default instead of leaving them permanently hidden behind an unreachable :hover */ @media (hover: none){ .product-media .quick{ transform: translateY(0); } .mosaic .cap{ transform: translateY(0); } .svc-row .go{ color: var(--ink); } } /* -------------------- Accessibility -------------------- */ /* Lets keyboard and screen-reader users jump the header and marquee. Visually hidden until focused, then it drops into view. */ .skip-link{ position:absolute; left:12px; top:-100px; z-index:9999; background: var(--ink); color:#fff; padding: 12px 18px; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; transition: top .18s var(--ease); } .skip-link:focus{ top:12px; } /* A single visible focus ring for every interactive element. :focus-visible keeps it off mouse clicks, so the design is untouched for pointer users. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 1px; } /* On dark panels the red ring is low-contrast ÔÇö go white there. */ .site-header a:focus-visible, .site-header button:focus-visible, .site-footer a:focus-visible, .hero a:focus-visible, .hero button:focus-visible, .hero-dots button:focus-visible, .cta-band a:focus-visible, .contact-panel.dark a:focus-visible, .on-ink a:focus-visible{ outline-color: #fff; } /* Slideshow pause control (WCAG 2.2.2) */ .hero-pause{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; margin-left: 10px; padding:0; border:1px solid rgba(255,255,255,.55); border-radius:50%; background: rgba(0,0,0,.28); color:#fff; cursor:pointer; flex-shrink:0; transition: background .25s var(--ease), border-color .25s var(--ease); } .hero-pause svg{ width:12px; height:12px; } .hero-pause:hover{ background: rgba(0,0,0,.6); border-color:#fff; } /* -------------------- Form validation feedback -------------------- */ .form-row .opt{ color: var(--muted); font-weight:600; letter-spacing:.04em; text-transform:none; } .field-error{ display:block; min-height: 1em; margin-top: 7px; font-size:.74rem; font-weight:600; color: var(--accent); } .form-row input[aria-invalid="true"], .form-row select[aria-invalid="true"], .form-row textarea[aria-invalid="true"]{ border-color: var(--accent); } .form-status{ margin-top: 14px; font-size:.8rem; font-weight:600; line-height:1.5; } .form-status:empty{ margin-top:0; } .form-status.is-ok{ color: #1B7F4B; } .form-status.is-error{ color: var(--accent); } .form-status a{ text-decoration: underline; } /* ===================================================== CREATIVE ENHANCEMENTS — Premium Fashion Brand ===================================================== */ /* Keyframes */ @keyframes fadeUp{ from{ opacity:0; transform: translateY(32px); } to{ opacity:1; transform: translateY(0); } } /* Staggered reveal */ .reveal-stagger > *{ opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal-stagger.is-visible > *:nth-child(1){ opacity:1; transform:none; transition-delay:.05s; } .reveal-stagger.is-visible > *:nth-child(2){ opacity:1; transform:none; transition-delay:.15s; } .reveal-stagger.is-visible > *:nth-child(3){ opacity:1; transform:none; transition-delay:.25s; } .reveal-stagger.is-visible > *:nth-child(4){ opacity:1; transform:none; transition-delay:.35s; } .reveal-stagger.is-visible > *:nth-child(5){ opacity:1; transform:none; transition-delay:.45s; } .reveal-stagger.is-visible > *:nth-child(6){ opacity:1; transform:none; transition-delay:.55s; } .reveal-stagger.is-visible > *:nth-child(n+7){ opacity:1; transform:none; transition-delay:.65s; } /* Tile label expand on hover */ .tile-label b{ transition: letter-spacing .35s ease; } .tile:hover .tile-label b{ letter-spacing: .06em; } /* Product card hover glow */ .product-media::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(228,18,31,.12) 0%, transparent 60%); opacity: 0; z-index: 2; transition: opacity .4s ease; } .product:hover .product-media::before{ opacity: 1; } /* Focus pulse on buttons */ @keyframes btnPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(228,18,31,.4); } 50%{ box-shadow: 0 0 0 10px rgba(228,18,31,0); } } .btn:focus-visible{ animation: btnPulse 1.2s ease infinite; } /* Review card lift on hover */ .review{ transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .review:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.12); } /* CTA heading glow */ .cta-band h2{ text-shadow: 0 0 60px rgba(228,18,31,.25); } /* Marquee band gradient fade */ .marquee-band{ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } /* Button shine sweep */ .btn{ position: relative; overflow: hidden; } .btn::after{ content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.12); transform: translateX(-100%) skewX(-15deg); transition: transform .42s ease; pointer-events: none; } .btn:hover::after{ transform: translateX(120%) skewX(-15deg); } /* Brand logo — static, no movement */ .brand:hover .brand-badge img{ transform: none; } .brand-badge img{ transition: none; } /* Mobile scroll swipe hint */ .scroll-hint{ display: none; text-align: center; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; animation: scrollHintPulse 2s ease infinite; } @keyframes scrollHintPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } } @media (max-width: 680px){ .scroll-hint{ display: block; } } /* -------------------- HIGH CONTRAST VISIBLE FOOTER STYLES -------------------- */ .footer, .site-footer { background: #121212 !important; color: rgba(255, 255, 255, 0.88) !important; } .footer-col h4 { color: #FFFFFF !important; font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; margin-bottom: 18px !important; } .footer-col p, .footer-brand p, .brand-col p { color: rgba(255, 255, 255, 0.82) !important; font-size: 0.88rem !important; line-height: 1.6 !important; margin-top: 10px !important; margin-bottom: 10px !important; } .footer-col p strong { color: #FFFFFF !important; font-weight: 600 !important; } .footer-col ul li { margin-bottom: 10px !important; color: rgba(255, 255, 255, 0.85) !important; } .footer-col a { font-size: 0.88rem !important; color: rgba(255, 255, 255, 0.82) !important; transition: color 0.2s ease !important; } .footer-col a:hover { color: #FFFFFF !important; text-decoration: underline !important; } .footer-bottom, .footer-btm { border-top: 1px solid rgba(255, 255, 255, 0.12) !important; padding-top: 22px !important; margin-top: 24px !important; font-size: 0.78rem !important; letter-spacing: 0.04em !important; color: rgba(255, 255, 255, 0.85) !important; } .footer-bottom span, .footer-bottom p, .footer-btm p { color: rgba(255, 255, 255, 0.85) !important; } .powered-by-sedrex { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 0.95rem !important; color: rgba(255, 255, 255, 0.9) !important; font-weight: 500 !important; text-decoration: none !important; transition: opacity 0.2s ease, transform 0.2s ease !important; margin-top: 6px !important; } .powered-by-sedrex:hover { opacity: 1 !important; color: #FFFFFF !important; } .powered-by-sedrex img { height: 34px !important; width: auto !important; display: inline-block !important; vertical-align: middle !important; }