/* ---------- Design tokens ---------- */ :root{ --ink: #1a1a1a; --ink-soft: #6f6f6f; --paper: #ffffff; --line: #ece7db; --gold: #a9812f; --gold-deep: #8a6a24; --gold-tint: #f7f0de; --ff-script: "Parisienne", cursive; --ff-body: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif; --nav-h: 76px; --ease: cubic-bezier(.16,.84,.44,1); } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; font-family: var(--ff-body); font-weight: 300; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } h1,h2,h3,p{ margin: 0; } /* ---------- Nav ---------- */ .nav{ position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav__inner{ max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .nav__brand{ display: flex; align-items: center; transition: opacity .25s var(--ease); } .nav__brand-text{ font-family: var(--ff-body); font-size: 20px; font-weight: 500; letter-spacing: .04em; color: var(--ink); } .nav__brand:hover{ opacity: .65; } .nav__links{ display: flex; gap: 40px; } .nav__link{ font-size: 14px; font-weight: 400; letter-spacing: .03em; color: var(--ink-soft); position: relative; padding: 4px 0; transition: color .25s var(--ease); } .nav__link::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: right .3s var(--ease); } .nav__link:hover{ color: var(--ink); } .nav__link:hover::after, .nav__link.is-active::after{ right: 0; } .nav__link.is-active{ color: var(--ink); } .nav__toggle{ display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: 0; cursor: pointer; padding: 0; } .nav__toggle span{ display: block; height: 1.5px; width: 100%; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); } .nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); } /* ---------- Reveal-on-scroll ---------- Content is visible by default so it never depends on JS running. Only once script.js confirms it's ready (js-reveal class on ) do sections start hidden, to be faded in by the IntersectionObserver. */ .reveal{ opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } .js-reveal .reveal{ opacity: 0; transform: translateY(28px); } .js-reveal .reveal.is-visible{ opacity: 1; transform: translateY(0); } /* ---------- Hero ---------- */ .hero{ min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 24px; background: var(--paper); } .hero__inner{ max-width: 780px; } .hero__eyebrow{ font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 26px; } .hero__title{ font-family: var(--ff-script); font-size: clamp(3rem, 8vw, 6.2rem); line-height: 1.2; font-weight: 400; letter-spacing: 0; color: var(--gold-deep); } .hero__sub{ margin-top: 26px; font-size: 17px; font-weight: 300; color: var(--ink-soft); } .hero__cta{ display: inline-block; margin-top: 44px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 5px; transition: color .25s var(--ease), border-color .25s var(--ease); } .hero__cta:hover{ color: var(--gold-deep); border-color: var(--gold-deep); } /* ---------- Brand sections ---------- */ .brand{ padding: 140px 24px; background: var(--paper); } .brand + .brand{ border-top: 1px solid var(--line); } .brand__inner{ max-width: 1320px; margin: 0 auto; } .brand__header{ display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: center; margin-bottom: 64px; } .brand__header--reverse{ grid-template-columns: 1fr 380px; } .brand__header--reverse .brand__logo{ order: 2; justify-content: flex-end; } .brand__header--reverse .brand__copy{ order: 1; } .brand__logo{ display: flex; align-items: center; } .brand__logo img{ width: 100%; max-width: 300px; height: auto; display: block; } .brand__eyebrow{ font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .brand__title{ font-family: var(--ff-script); font-size: clamp(3rem, 6vw, 4.8rem); font-weight: 400; letter-spacing: 0; color: var(--ink); margin-bottom: 22px; } .brand__blurb{ font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--ink-soft); max-width: 56ch; } .brand__blurb em{ font-style: normal; color: #a8a5a0; font-size: 14px; } .brand__link{ display: inline-block; margin-top: 28px; font-size: 13px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-deep); padding-bottom: 4px; border-bottom: 1px solid var(--gold); transition: opacity .25s var(--ease); } .brand__link:hover{ opacity: .6; } /* Gallery runs on a 6-column track so each shot can take the width its orientation wants: wide campaign images span 4, portraits span 2, and a pair of portraits sharing a row splits it 3/3. Keeps every image near its natural crop instead of squeezing them all into one uniform tile. */ .brand__gallery{ display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 580px; gap: 18px; } /* Bandier's second row is a portrait pair, so it gets extra height. */ .brand__gallery--pair{ grid-auto-rows: 580px 740px; } .shot{ margin: 0; grid-column: span 2; overflow: hidden; background: var(--gold-tint); position: relative; cursor: pointer; } .shot--wide{ grid-column: span 4; } .shot--half{ grid-column: span 3; } /* Bias the crop upward so faces stay in frame on the wider portrait cells. */ .shot--half img{ object-position: center 18%; } .shot img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease), filter .5s var(--ease); } /* Hover: image drifts in, a thin gold frame draws itself over the top */ .shot::after{ content: ""; position: absolute; inset: 12px; border: 1px solid rgba(169,129,47,0); transition: border-color .45s var(--ease), inset .45s var(--ease); pointer-events: none; } .shot:hover img{ transform: scale(1.05); filter: brightness(1.04); } .shot:hover::after{ border-color: rgba(255,255,255,.75); inset: 18px; } @media (prefers-reduced-motion: reduce){ .shot img, .shot::after{ transition: none; } .shot:hover img{ transform: none; } } /* ---------- Placeholders ---------- */ .placeholder{ border: 1.5px dashed #d8cca4; border-radius: 2px; display: flex; align-items: center; justify-content: center; text-align: center; color: #b9ac82; background: var(--gold-tint); transition: border-color .25s var(--ease), transform .25s var(--ease); position: relative; } .placeholder::after{ content: attr(data-label); position: absolute; bottom: -26px; left: 0; right: 0; font-size: 11px; color: #b3ab8f; opacity: 0; transition: opacity .2s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .placeholder:hover{ border-color: var(--gold); transform: translateY(-2px); } .placeholder:hover::after{ opacity: 1; } .placeholder__text{ font-size: 13px; font-weight: 400; letter-spacing: .03em; padding: 8px; } .placeholder--product{ aspect-ratio: 3 / 4; } /* ---------- About ---------- */ .about{ padding: 100px 24px; background: var(--paper); color: var(--ink); text-align: center; border-top: 1px solid var(--line); } .about__inner{ max-width: 640px; margin: 0 auto; } .about__title{ font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; } .about__text{ font-size: 19px; font-weight: 300; line-height: 1.8; color: var(--ink-soft); } /* ---------- Footer ---------- */ .footer{ padding: 32px 24px; border-top: 1px solid var(--line); } .footer__inner{ max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .footer__copy{ font-size: 13px; font-weight: 300; color: var(--ink-soft); } /* ---------- Responsive ---------- */ @media (max-width: 1024px){ .brand__header{ grid-template-columns: 1fr; gap: 36px; } .brand__header--reverse{ grid-template-columns: 1fr; } .brand__header--reverse .brand__logo{ order: 1; justify-content: flex-start; } .brand__header--reverse .brand__copy{ order: 2; } .brand__logo img{ max-width: 240px; } /* Keep the 6-column structure so both galleries still fill exactly — just shorter rows. Collapsing to 2 columns would strand Bandier's odd third portrait in a half-empty row. */ .brand__gallery{ grid-auto-rows: 380px; gap: 14px; } .brand__gallery--pair{ grid-auto-rows: 380px 470px; } } @media (max-width: 640px){ .nav__links{ position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; gap: 0; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); } .nav__links.is-open{ max-height: 240px; } .nav__link{ padding: 16px 24px; width: 100%; } .nav__toggle{ display: flex; } .brand{ padding: 90px 20px; } /* Single column, natural heights — nothing gets cropped on a phone. */ .brand__gallery, .brand__gallery--pair{ grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; } .shot, .shot--wide, .shot--half{ grid-column: span 1; } .shot img{ height: auto; } .shot--half img{ object-position: center; } .hero{ padding: 60px 20px; } }