/* ========================================= LUCEMI — styles.css ========================================= */ /* Google Fonts loaded via */ /* ========================================= CUSTOM PROPERTIES ========================================= */ :root { --color-bg: #F2EDE6; --color-dark: #1A1A1A; --color-white: #FFFFFF; --color-gold: #C9A47A; --color-ocean: #1B2D3E; --color-text: #1A1A1A; --font-display: 'Helvetica Neue', 'Helvetica', Arial, sans-serif; --font-ui: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --nav-height: 64px; --transition-nav: background 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* ========================================= RESET & BASE ========================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-ui); font-weight: 300; line-height: 1.5; overflow-x: hidden; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } /* ========================================= NAVIGATION ========================================= */ .nav { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height); z-index: 100; border-bottom: 1px solid transparent; transition: var(--transition-nav); } .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; padding: 0 40px; } .nav__left { display: flex; align-items: center; gap: 32px; } /* ========================================= MEGA MENU ========================================= */ .megamenu { position: fixed; top: var(--nav-height); left: 0; width: 100%; background: rgba(10,10,10,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 98; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.22s ease, transform 0.22s ease; border-bottom: 1px solid rgba(255,255,255,0.06); } .megamenu.is-open { opacity: 1; pointer-events: all; transform: translateY(0); } .megamenu__inner { display: flex; align-items: center; padding: 24px 40px; gap: 0; } .megamenu__section { display: flex; align-items: center; gap: 32px; padding: 0 40px; } .megamenu__section:first-child { padding-left: 0; } .megamenu__col-label { font-family: var(--font-ui); font-weight: 200; font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: rgba(255,255,255,0.25); white-space: nowrap; } .megamenu__link { font-family: var(--font-ui); font-weight: 200; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.15s ease; white-space: nowrap; } .megamenu__link:hover { color: var(--color-white); } .megamenu__divider { width: 1px; height: 20px; background: rgba(255,255,255,0.1); flex-shrink: 0; } .nav__center { display: flex; align-items: center; justify-content: center; } .nav__right { display: flex; align-items: center; justify-content: flex-end; } .nav__wordmark { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: 17px; letter-spacing: 0.45em; color: var(--color-white); transition: color 0.35s ease; text-transform: uppercase; } .nav__link { font-family: var(--font-ui); font-weight: 300; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-white); transition: color 0.35s ease, opacity 0.2s ease; } .nav__link { position: relative; } .nav__link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); } .nav__link:hover::after { width: 100%; } .nav__label { font-family: var(--font-ui); font-weight: 300; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-white); transition: color 0.35s ease; } /* Scrolled state */ .nav.scrolled { background: var(--color-bg); border-bottom-color: rgba(0, 0, 0, 0.1); } .nav.scrolled .nav__wordmark, .nav.scrolled .nav__link, .nav.scrolled .nav__label { color: var(--color-dark); } /* ========================================= HERO ========================================= */ .hero { position: relative; height: 100vh; width: 100%; overflow: hidden; } .hero__bg { position: absolute; inset: 0; } .hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 50%); } .hero__content { position: absolute; bottom: 0; left: 0; padding: 48px 56px; color: var(--color-white); } .hero__headline { font-family: var(--font-display); font-weight: 200; font-style: normal; font-size: clamp(22px, 3vw, 42px); letter-spacing: 0.35em; line-height: 1.0; text-transform: uppercase; color: var(--color-white); } .hero__whisper { font-family: var(--font-display); font-weight: 200; font-style: normal; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 16px; } /* ========================================= SECTIONS — SHARED ========================================= */ .section { width: 100%; } .section__intro { text-align: center; padding: clamp(80px, 10vw, 140px) 40px clamp(40px, 5vw, 80px); max-width: 680px; margin: 0 auto; } .section__heading { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(28px, 4vw, 56px); letter-spacing: 0.01em; line-height: 1.15; color: inherit; margin-bottom: 24px; } .section__body { font-family: var(--font-ui); font-weight: 300; font-size: 14px; letter-spacing: 0.04em; line-height: 1.8; color: inherit; opacity: 0.75; } /* ========================================= WOMEN'S SECTION ========================================= */ .section--women { background: var(--color-white); color: var(--color-dark); } /* ========================================= COLLAGE GRID ========================================= */ .collage { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 120px; gap: 0; padding: 0 0 clamp(80px, 10vw, 140px); } .collage__item { overflow: hidden; outline: 6px solid var(--color-white); outline-offset: 0; } .collage__item img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .collage__item--empty { background: #EDE8E1; } /* Grid placements — varied sizes */ .collage__item--a { grid-column: 1 / 5; grid-row: 1 / 5; } /* large portrait left */ .collage__item--b { grid-column: 5 / 8; grid-row: 1 / 3; } /* medium portrait top-center */ .collage__item--c { grid-column: 8 / 13; grid-row: 1 / 4; } /* large portrait right */ .collage__item--d { grid-column: 5 / 7; grid-row: 3 / 5; } /* small square */ .collage__item--e { grid-column: 7 / 10; grid-row: 3 / 6; } /* medium tall center */ .collage__item--f { grid-column: 10 / 13; grid-row: 4 / 6; } /* medium portrait */ .collage__item--g { grid-column: 1 / 4; grid-row: 5 / 8; } /* tall portrait */ .collage__item--h { grid-column: 4 / 7; grid-row: 5 / 7; } /* medium */ .collage__item--i { grid-column: 7 / 10; grid-row: 6 / 8; } /* medium */ .collage__item--j { grid-column: 10 / 13; grid-row: 6 / 8; } /* medium */ .collage__item--k { grid-column: 4 / 8; grid-row: 7 / 10; } /* wide portrait */ .collage__item--l { grid-column: 1 / 4; grid-row: 8 / 10; } /* medium */ .collage__item--m { grid-column: 8 / 11; grid-row: 8 / 10; } /* small */ .collage__item--n { grid-column: 11 / 13; grid-row: 7 / 10; } /* tall narrow */ @media (max-width: 768px) { .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; gap: 4px; padding: 0 4px clamp(60px, 12vw, 100px); } .collage__item--a { grid-column: 1 / 2; grid-row: 1 / 3; } .collage__item--b { grid-column: 2 / 3; grid-row: 1 / 2; } .collage__item--c { grid-column: 2 / 3; grid-row: 2 / 3; } .collage__item--d { grid-column: 1 / 2; grid-row: 3 / 4; } .collage__item--e { grid-column: 2 / 3; grid-row: 3 / 5; } .collage__item--f { grid-column: 1 / 2; grid-row: 4 / 5; } .collage__item--g { grid-column: 1 / 3; grid-row: 5 / 6; } .collage__item--h { grid-column: 1 / 2; grid-row: 6 / 7; } .collage__item--i { grid-column: 2 / 3; grid-row: 6 / 7; } } /* ========================================= PRODUCT GRID ========================================= */ .product-grid { display: grid; gap: 16px; padding: 0 40px clamp(80px, 10vw, 140px); } .product-grid--three { grid-template-columns: repeat(3, 1fr); } .product-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; } /* ========================================= PRODUCT CARD — IMAGE ========================================= */ .product-card { cursor: pointer; } .product-card__image-wrap { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--color-bg); transform: scale(1); transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } .product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: opacity 0.5s ease; } .product-card__img--default { opacity: 1; } .product-card__img--hover { opacity: 0; } .product-card:hover .product-card__img--default { opacity: 0; } .product-card:hover .product-card__img--hover { opacity: 1; } .product-card:hover .product-card__image-wrap { transform: scale(1.015); } .product-card__name { font-family: var(--font-ui); font-weight: 300; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-dark); margin-top: 14px; } /* ========================================= MEN'S SECTION ========================================= */ .section--men { background: var(--color-bg); color: var(--color-dark); } /* ========================================= PRODUCT CARD — CAP ========================================= */ .product-card--cap .product-card__image-wrap { display: none; } .product-card--cap { display: flex; flex-direction: column; } .product-card__cap-inner { height: 400px; display: flex; align-items: center; justify-content: center; } .product-card--vert .product-card__cap-inner { background-color: #2C3B2D; } .product-card--sable .product-card__cap-inner { background-color: #D4C4A0; } .product-card__cap-label { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 24px; letter-spacing: 0.04em; text-align: center; color: var(--color-white); } .product-card__cap-label--dark { color: var(--color-dark); } .product-card__name--light { color: var(--color-dark); } /* ========================================= ABOUT SECTION ========================================= */ .section--about { background: var(--color-dark); color: var(--color-white); padding: clamp(80px, 10vw, 140px) 40px; } .about__inner { max-width: 700px; margin: 0 auto; } .about__eyebrow { font-family: var(--font-ui); font-weight: 300; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 40px; } .about__body { font-family: var(--font-display); font-weight: 300; font-size: clamp(18px, 2.5vw, 28px); line-height: 1.7; color: var(--color-white); } /* ========================================= FOOTER ========================================= */ .footer { background: var(--color-dark); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 40px; } .footer__inner { display: flex; align-items: center; justify-content: space-between; } .footer__tagline, .footer__copy { font-family: var(--font-ui); font-weight: 300; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-white); opacity: 0.65; } /* ========================================= RESPONSIVE — MOBILE ========================================= */ @media (max-width: 768px) { .nav__inner { padding: 0 24px; } .nav__left { gap: 20px; } .hero__content { padding: 32px 24px; } .section__intro { padding: clamp(60px, 12vw, 100px) 24px clamp(32px, 6vw, 60px); } .product-grid { padding: 0 24px clamp(60px, 12vw, 100px); gap: 12px; } .product-grid--three { grid-template-columns: 1fr; } .product-grid--two { grid-template-columns: 1fr; max-width: 100%; } .product-card__cap-inner { height: 280px; } .section--about { padding: clamp(60px, 12vw, 100px) 24px; } .footer { padding: 32px 24px; } .footer__inner { flex-direction: column; gap: 12px; align-items: flex-start; } } @media (max-width: 480px) { .nav__label { display: none; } .hero__headline { font-size: clamp(40px, 11vw, 64px); } } /* ========================================= TABLET ========================================= */ @media (min-width: 769px) and (max-width: 1024px) { .product-grid--three { grid-template-columns: repeat(3, 1fr); } .product-grid--two { grid-template-columns: repeat(2, 1fr); } } /* ========================================= HERO ENTRANCE ANIMATIONS ========================================= */ @keyframes heroHeadlineIn { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroSubtextIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .hero__headline--animate { animation: heroHeadlineIn 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s both; } .hero__whisper--animate { animation: heroSubtextIn 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s both; } .hero__cta { display: inline-block; margin-top: 28px; font-family: var(--font-ui); font-weight: 200; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--color-white); border: 1px solid rgba(255,255,255,0.4); padding: 13px 36px; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease; } .hero__cta:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); } .hero__cta--animate { animation: heroSubtextIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.35s both; } /* ========================================= PRODUCT GALLERY ========================================= */ .product-gallery { display: flex; flex-direction: column; gap: 6px; } .gallery__main { position: relative; overflow: hidden; background: #F0EDE8; cursor: zoom-in; aspect-ratio: 4 / 3; } .gallery__main-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.25s ease; } .gallery__main-img.is-switching { opacity: 0; } .gallery__nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.35); color: white; border: none; width: 40px; height: 40px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; z-index: 2; } .gallery__nav-btn:hover { background: rgba(0,0,0,0.6); } .gallery__nav-btn--prev { left: 12px; } .gallery__nav-btn--next { right: 12px; } .gallery__thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .gallery__thumbs::-webkit-scrollbar { display: none; } .gallery__thumb { flex: 0 0 calc((100% - 36px) / 7); aspect-ratio: 1; overflow: hidden; background: #F0EDE8; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s ease; min-width: 60px; } .gallery__thumb.is-active { border-color: var(--color-dark); } .gallery__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.4s ease; } .gallery__thumb:hover img { transform: scale(1.05); } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .lightbox.is-open { opacity: 1; pointer-events: all; } .lightbox__img { max-width: 90vw; max-height: 90vh; object-fit: contain; display: block; user-select: none; } .lightbox__close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: rgba(255,255,255,0.7); font-size: 28px; cursor: pointer; transition: color 0.2s ease; line-height: 1; } .lightbox__close:hover { color: white; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.7); width: 48px; height: 48px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease; } .lightbox__nav:hover { background: rgba(255,255,255,0.15); color: white; } .lightbox__nav--prev { left: 20px; } .lightbox__nav--next { right: 20px; } /* Qty selector */ .qty-selector { display: flex; align-items: center; gap: 0; border: 1px solid rgba(26,26,26,0.2); width: fit-content; } .qty-btn { background: none; border: none; width: 40px; height: 40px; font-size: 18px; cursor: pointer; color: var(--color-dark); display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; font-weight: 200; } .qty-btn:hover { background: rgba(26,26,26,0.05); } .qty-input { width: 40px; height: 40px; border: none; border-left: 1px solid rgba(26,26,26,0.2); border-right: 1px solid rgba(26,26,26,0.2); text-align: center; font-family: var(--font-ui); font-size: 12px; font-weight: 300; color: var(--color-dark); background: none; -moz-appearance: textfield; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; } /* ========================================= SCROLL REVEAL ========================================= */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .hero__image { will-change: transform; } /* ========================================= CAP PRODUCT SECTION ========================================= */ .cap-product { display: flex; flex-direction: column; gap: 0; padding: 0 0 80px; } .cap-product__images { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .cap-product__image-cell { aspect-ratio: 1.14; overflow: hidden; background: #F5F3EF; } .cap-product__img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } .cap-product__image-cell:hover .cap-product__img { transform: scale(1.03); } .cap-product__info { padding: 32px 40px 0; display: flex; flex-direction: column; gap: 12px; } .cap-product__eyebrow { font-family: var(--font-ui); font-weight: 200; font-size: 9px; letter-spacing: 0.45em; text-transform: uppercase; color: var(--color-gold); } .cap-product__name { font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif; font-weight: 200; font-size: clamp(18px, 2vw, 28px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-dark); } .cap-product__detail { font-family: var(--font-ui); font-weight: 300; font-size: 12px; letter-spacing: 0.05em; color: rgba(26,26,26,0.5); line-height: 1.8; } .cap-product__badge { display: inline-block; font-family: var(--font-ui); font-weight: 200; font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--color-dark); border: 1px solid rgba(26,26,26,0.25); padding: 8px 16px; width: fit-content; } @media (max-width: 600px) { .cap-product__images { grid-template-columns: repeat(2, 1fr); } .cap-product__info { padding: 24px 24px 0; } } /* ========================================= ABOUT SECTION — RULE ========================================= */ .about__rule { width: 40px; height: 1px; background: var(--color-gold); margin: 32px 0; } /* ========================================= CAP CARDS — ENHANCED ========================================= */ .product-card--cap { transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); } .product-card--cap:hover { transform: translateY(-6px); } .product-card--cap .product-card__cap-inner { transition: box-shadow 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); } .product-card--vert:hover .product-card__cap-inner { box-shadow: 0 24px 64px rgba(44, 59, 45, 0.35); } .product-card--sable:hover .product-card__cap-inner { box-shadow: 0 24px 64px rgba(180, 160, 120, 0.4); } .cap-card__content { display: flex; flex-direction: column; align-items: center; gap: 12px; } .cap-card__eyebrow { font-family: var(--font-ui); font-weight: 300; font-size: 9px; letter-spacing: 0.45em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .cap-card__eyebrow--dark { color: rgba(26, 26, 26, 0.45); } .cap-card__badge { font-family: var(--font-ui); font-weight: 300; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 14px; margin-top: 8px; } .cap-card__badge--dark { color: rgba(26, 26, 26, 0.4); border-color: rgba(26, 26, 26, 0.2); } /* ========================================= FOOTER — LOGO WATERMARK ========================================= */ .footer__logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 40px 0; } .footer__logo { width: 56px; height: auto; filter: brightness(0) invert(1); opacity: 0.18; } .footer__wordmark { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: 13px; letter-spacing: 0.55em; text-transform: uppercase; color: var(--color-white); opacity: 0.25; } /* ========================================= PRODUCT NAME HOVER ========================================= */ .product-card__name { transition: opacity 0.25s ease; } .product-card:hover .product-card__name { opacity: 0.55; } /* ========================================= SHOP BUTTON ========================================= */ .btn-shop { display: inline-block; font-family: var(--font-ui); font-weight: 200; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--color-dark); border: 1px solid rgba(26,26,26,0.3); padding: 14px 40px; text-decoration: none; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; width: fit-content; margin-top: 4px; } .btn-shop:hover { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); } /* Subtle inline link on dark/shoot pages */ .shoot-shop-link { display: inline-block; margin-top: 22px; font-family: var(--font-ui); font-weight: 200; font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,255,255,0.45); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease; } .shoot-shop-link:hover { color: var(--color-white); border-color: rgba(255,255,255,0.55); } /* ========================================= PAGE INTRO — inner pages (Men / Women) ========================================= */ .page-intro { padding: calc(var(--nav-height) + 80px) 40px 64px; max-width: 680px; margin: 0 auto; text-align: center; } .page-intro__eyebrow { font-family: var(--font-ui); font-weight: 200; font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 24px; } .page-intro__heading { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(28px, 4vw, 52px); letter-spacing: 0.01em; line-height: 1.15; color: var(--color-dark); margin-bottom: 20px; } .page-intro__body { font-size: 14px; letter-spacing: 0.04em; line-height: 1.8; color: var(--color-dark); opacity: 0.65; } /* Force nav dark on light-bg inner pages */ .page--light #nav { background: var(--color-bg); border-bottom-color: rgba(0,0,0,0.08); } .page--light #nav .nav__wordmark, .page--light #nav .nav__link, .page--light #nav .nav__label { color: var(--color-dark); } /* ========================================= SHOP PAGE — product detail ========================================= */ .shop-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: calc(var(--nav-height) + 40px) 0 80px; } .shop-gallery__main { aspect-ratio: 1; overflow: hidden; background: #F5F3EF; } .shop-gallery__thumbs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; } .shop-gallery__thumb { overflow: hidden; background: #F5F3EF; aspect-ratio: 1; } .shop-gallery__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } .shop-gallery__main:hover .shop-gallery__img, .shop-gallery__thumb:hover .shop-gallery__img { transform: scale(1.04); } .shop-info { grid-column: 1 / -1; padding: 48px 40px 0; display: flex; flex-direction: column; gap: 16px; max-width: 560px; } .shop-info__eyebrow { font-family: var(--font-ui); font-weight: 200; font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--color-gold); } .shop-info__name { font-family: var(--font-display); font-weight: 200; font-size: clamp(22px, 2.5vw, 36px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-dark); } .shop-info__detail { font-family: var(--font-ui); font-weight: 300; font-size: 13px; letter-spacing: 0.05em; line-height: 1.9; color: rgba(26,26,26,0.55); } .shop-info__notice { font-family: var(--font-ui); font-weight: 200; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(26,26,26,0.35); padding-top: 8px; } @media (max-width: 768px) { .shop-wrap { grid-template-columns: 1fr; } .shop-info { padding: 36px 24px 0; } .page-intro { padding: calc(var(--nav-height) + 48px) 24px 48px; } } /* ========================================= AUSTRALIA DUFFEL DROP ========================================= */ .duffel-drop { position: relative; width: 100%; } .duffel-drop__frame { position: relative; width: 100%; } .duffel-drop__img { width: 100%; height: auto; display: block; transition: transform 8s cubic-bezier(0.25, 0.1, 0.25, 1); } .duffel-drop.is-visible .duffel-drop__img { transform: scale(1.04); } .duffel-drop__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 45%, transparent 70% ); } .duffel-drop__content { position: absolute; bottom: 0; left: 0; padding: 48px 56px; color: var(--color-white); } .duffel-drop__eyebrow { font-family: var(--font-ui); font-weight: 200; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; } .duffel-drop__headline { font-family: var(--font-display); font-weight: 200; font-size: clamp(22px, 3vw, 42px); letter-spacing: 0.35em; text-transform: uppercase; color: var(--color-white); line-height: 1; margin-bottom: 16px; } .duffel-drop__detail { font-family: var(--font-ui); font-weight: 200; font-size: 12px; letter-spacing: 0.08em; line-height: 1.85; color: rgba(255,255,255,0.55); margin-bottom: 28px; } .duffel-drop__actions { display: flex; align-items: center; gap: 36px; } .duffel-drop__shoot-link { font-family: var(--font-ui); font-weight: 200; font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.45); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease; } .duffel-drop__shoot-link:hover { color: var(--color-white); border-color: rgba(255,255,255,0.55); } @media (max-width: 600px) { .duffel-drop__content { padding: 32px 24px; } .duffel-drop__actions { flex-direction: column; align-items: flex-start; gap: 20px; } }