/* ============================================================ ASH-HADU — White Design System Fear of God Essentials × Nike aesthetic on bone/white. Task 2: brand-remake branch ============================================================ */ :root { --paper: #ffffff; --paper-rgb: 255, 255, 255; /* channels for rgba() so opacity uses stay in sync with --paper */ --ink: #0a0a0a; --stone: #6b6b6b; --line: #e6e6e6; --accent: #1f5e46; --display: 'Archivo', system-ui, sans-serif; --body: 'Hanken Grotesk', system-ui, sans-serif; --pad: clamp(1.25rem, 5vw, 5rem); --maxw: 1360px; } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body.no-scroll { overflow: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } /* iOS Safari hardening. Safari's data detectors silently wrap anything that looks like a phone number, date or address in its own , which renders bright blue and ignores `a { color: inherit }` above because the element isn't in our markup at all. Killing the tint at the -webkit-text-fill-color level is the only reliable fix; the format-detection meta in each stops the detection happening in the first place. */ a[x-apple-data-detectors] { color: inherit !important; -webkit-text-fill-color: inherit !important; text-decoration: none !important; pointer-events: none; } /* stop Safari inflating type in landscape, and drop the grey tap flash */ html { -webkit-text-size-adjust: 100%; } a, button { -webkit-tap-highlight-color: transparent; } /* ============================================================ Layout helpers ============================================================ */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* ============================================================ Typography ============================================================ */ .eyebrow { font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--stone); } h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: .98; text-transform: uppercase; letter-spacing: -.015em; } /* ============================================================ Navigation ============================================================ */ .nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--pad); background: rgba(var(--paper-rgb), 0.80); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .nav.is-scrolled { background: rgba(var(--paper-rgb), 0.95); border-bottom-color: var(--line); } .nav__brand { font-family: var(--display); font-size: clamp(1rem, 3.4vw, 1.3rem); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .nav__links { display: flex; gap: clamp(1rem, 3vw, 2.6rem); align-items: center; margin-left: auto; } .nav__actions { display: flex; align-items: center; gap: 1.1rem; margin-left: clamp(1rem, 3vw, 2.6rem); position: relative; z-index: 6; /* keep bag + close button tappable above the open drawer */ } .nav__toggle { display: none; width: 26px; height: 18px; position: relative; background: none; border: 0; padding: 0; cursor: pointer; flex-direction: column; justify-content: space-between; } .nav__toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s; } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .nav__links a { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); transition: color .2s; } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); } .nav__bag { position: relative; display: inline-flex; align-items: center; color: var(--ink); line-height: 0; } .nav__bag-icon { display: block; } .nav__bag:hover { color: var(--stone); } [data-cart-count].nav__bag-count { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding-inline: 5px; line-height: 18px; /* vertical centre */ text-align: center; /* horizontal centre */ font-family: var(--body); font-size: .6rem; font-weight: 600; border-radius: 999px; background: var(--ink); color: var(--paper); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--paper); } [data-cart-count].is-empty { display: none; } /* announcement / trust bar above the nav */ .announce { background: var(--ink); color: var(--paper); text-align: center; font-family: var(--body); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; padding: .55rem 1rem; } .announce span { opacity: .85; } .announce b { font-weight: 600; opacity: 1; } /* rotating message — slides horizontally between promos */ .announce__text { display: inline-block; transition: opacity .45s ease, transform .45s ease; } .announce__text.is-out { opacity: 0; transform: translateX(-22px); } /* slides out left */ .announce__text.is-pre { opacity: 0; transform: translateX(22px); transition: none; } /* starts off-right */ /* shop collection filter pills — single row, centred, scrolls if it overflows */ .shop-filter { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: clamp(1.8rem, 3.5vw, 2.8rem) var(--pad); } .shop-filter::-webkit-scrollbar { display: none; } .shop-filter__inner { display: flex; gap: .6rem; width: max-content; /* natural width */ margin-inline: auto; /* centred when it fits; scrolls when it doesn't */ } .shop-filter__btn { flex: 0 0 auto; white-space: nowrap; font-family: var(--body); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); background: none; border: 1px solid var(--line); border-radius: 999px; padding: .65rem 1.4rem; cursor: pointer; transition: color .2s, border-color .2s, background .2s; } .shop-filter__btn:hover { color: var(--ink); border-color: var(--stone); } .shop-filter__btn.is-active { color: var(--paper); background: var(--ink); border-color: var(--ink); } /* "coming soon" placeholder for unreleased collections */ .coming-soon { text-align: center; border: 1px dashed var(--line); border-radius: 4px; padding: clamp(2.4rem, 6vw, 4.5rem) 1rem; color: var(--stone); font-family: var(--body); font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; } /* drop waitlist (coming-soon collections → GHL) */ .waitlist { max-width: 540px; margin: 0 auto; text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: clamp(1.8rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2.4rem); background: #faf9f7; } .waitlist__tag { font-family: var(--body); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); } .waitlist__lead { color: var(--stone); margin: .6rem auto 1.4rem; max-width: 40ch; line-height: 1.55; } /* GoHighLevel waitlist embed — form_embed.js sets the real height once loaded, min-height just stops the panel collapsing while it does. */ .waitlist__embed { display: block; width: 100%; min-height: 520px; border: 0; background: transparent; color-scheme: light; /* the GHL form is a light form; don't let dark mode invert it */ } .waitlist__form { display: grid; gap: .7rem; } .waitlist__row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } @media (max-width: 520px) { .waitlist__row { grid-template-columns: 1fr; } } .waitlist__input { width: 100%; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 4px; font-family: var(--body); font-size: .95rem; background: var(--paper); color: var(--ink); transition: border-color .2s; } .waitlist__input::placeholder { color: #a4a3a0; } .waitlist__input:focus { outline: none; border-color: var(--ink); } .waitlist__consent { display: flex; gap: .55rem; align-items: flex-start; text-align: left; font-family: var(--body); font-size: .72rem; line-height: 1.45; color: var(--stone); } .waitlist__consent input { margin-top: .15rem; flex: 0 0 auto; accent-color: var(--accent); } .waitlist__btn { width: 100%; margin-top: .2rem; } /* honeypot — hidden from people, tempting to bots (off-screen, not display:none) */ .waitlist__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .waitlist__msg { font-family: var(--body); font-size: .82rem; min-height: 1.1em; margin-top: .2rem; } .waitlist__msg.is-ok { color: var(--accent); } .waitlist__msg.is-err { color: #b3261e; } .waitlist.is-done .waitlist__form > *:not(.waitlist__msg) { display: none; } .waitlist.is-done .waitlist__lead { display: none; } /* phones: shrink the filter pills so all four sit on one tidy centred row */ @media (max-width: 560px) { .shop-filter { padding-block: clamp(1.4rem, 5vw, 2rem); padding-inline: clamp(.8rem, 4vw, 1.25rem); } .shop-filter__inner { gap: .4rem; } .shop-filter__btn { font-size: .62rem; letter-spacing: .08em; padding: .55rem .85rem; } } /* footer meta row — socials + accepted payments */ .footer__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.4rem 0; margin-top: 1.5rem; border-top: 1px solid var(--line); } .footer__social { display: flex; gap: 1.4rem; } .footer__social a { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); transition: color .2s; } .footer__social a:hover { color: var(--ink); } .footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .footer__pay img { height: 26px; width: auto; display: block; border-radius: 4px; } /* ---- Mobile nav: hamburger + slide-in drawer ---- */ /* scrim sits below the nav (so the bar + drawer stay above it) but above the page */ .nav-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(10,10,10,.42); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .nav-scrim.is-open { opacity: 1; visibility: visible; } body.nav-lock { overflow: hidden; } @media (max-width: 820px) { /* solid bar on mobile — backdrop-filter would trap the fixed drawer in the nav box */ .nav, .nav.is-scrolled { padding-block: .9rem; z-index: 50; background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } .nav__toggle { display: flex; } .nav__links { position: fixed; inset: 0 0 0 auto; width: min(82vw, 320px); margin-left: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.5rem; padding: calc(env(safe-area-inset-top, 0px) + 6.5rem) clamp(1.8rem, 7vw, 3rem) 3rem; background: var(--paper); box-shadow: -18px 0 50px rgba(0,0,0,.16); transform: translateX(100%); transition: transform .38s cubic-bezier(.2,.7,.2,1); z-index: 5; overflow-y: auto; } .nav__links.is-open { transform: translateX(0); } .nav__links a { font-size: 1.1rem; letter-spacing: .14em; color: var(--ink); } .nav__links .nav__account { margin-top: .4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); width: 100%; } } /* scrim only ever shows on the mobile breakpoint */ @media (min-width: 821px) { .nav-scrim { display: none; } } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--body); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: .95em 1.9em; border: 1px solid var(--ink); background: transparent; color: var(--ink); transition: background .22s, color .22s, border-color .22s; } .btn:hover { background: var(--ink); color: var(--paper); } .btn--solid { background: var(--ink); color: var(--paper); } .btn--solid:hover { background: transparent; color: var(--ink); } .btn[disabled] { opacity: .4; cursor: not-allowed; } /* ============================================================ Hero ============================================================ */ .hero { position: relative; background: #0a0a0a; color: #fff; min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(1.1rem, 2.6vw, 1.9rem); padding: var(--pad); overflow: hidden; } .hero__eyebrow { color: #8a8a8a; position: relative; z-index: 2; } /* fixed-height stage: reserves space so cycling never shifts layout or bleeds into the eyebrow, no matter which frame (tall Arabic / wrapping EN) */ .hero__stage { position: relative; z-index: 2; width: 100%; min-height: clamp(8rem, 30vw, 17rem); display: flex; align-items: center; justify-content: center; } .hero__word { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(3rem, 12vw, 9.5rem); line-height: .95; letter-spacing: -.01em; color: #fff; transition: opacity .4s ease; will-change: opacity; } /* Arabic frame = real calligraphy artwork (swap assets/img/ashhadu-ar.png for the final black version) */ .hero__word-img { display: inline-block; vertical-align: middle; height: clamp(5rem, 19vw, 13rem); width: auto; } .hero__tag { position: relative; z-index: 2; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: clamp(.78rem, 1.7vw, 1.05rem); letter-spacing: .16em; color: #fff; } /* light CTA on the black hero */ .hero .btn { position: relative; z-index: 2; background: #fff; color: #0a0a0a; border-color: #fff; } .hero .btn:hover { background: transparent; color: #fff; } /* WHITE hero variant (honors the "white website" brief) */ .hero--light { background: #fff; } .hero--light .hero__eyebrow { color: var(--stone); } .hero--light .hero__word, .hero--light .hero__tag { color: var(--ink); } .hero--light .btn { background: var(--ink); color: #fff; border-color: var(--ink); } .hero--light .btn:hover { background: transparent; color: var(--ink); } .hero--light .hero__video { opacity: .12; filter: grayscale(1) contrast(1.05) brightness(1.1); } /* IMAGE hero variant — full-bleed LIGHT studio campaign photo (outpainted to landscape so the two models + back prints sit centred on every screen) */ .hero--image { background: #d7d4cf; /* matches studio grey — any letterbox gap blends in */ justify-content: space-between; /* eyebrow top · slogan + CTA bottom */ padding-block: clamp(2.2rem, 6vh, 4.5rem); } /* On desktop the hero takes the image's exact shape, so the whole picture shows (headroom + heads + both back prints) — the same full crop the phone gets. */ @media (min-width: 760px) { /* fill exactly the screen below the sticky 69px nav — full bleed, CTA always in view, the image covers and 42% keeps heads + both prints framed */ .hero--image { min-height: 0; height: calc(100dvh - 69px); padding-bottom: clamp(1rem, 2.5vh, 1.8rem); /* drop the slogan/CTA lower, below the shirt print */ } } .hero--image .hero__foot { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 2.4vw, 1.6rem); } .hero--image .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; /* show a touch more hem at the bottom so the slogan clears the shirt print */ z-index: 0; } /* subtle DARK shade top & bottom so the all-white text reads over the light studio — middle stays clear so the back prints show */ .hero--image .hero__scrim { display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 60%, rgba(10,10,10,.55) 100%); } /* top group: kicker + cycling wordmark, sat above the back prints */ .hero--image .hero__top { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(.5rem, 1.4vw, 1rem); } .hero--image .hero__eyebrow { color: rgba(255,255,255,.92); font-size: clamp(.72rem, 1.5vw, 1.35rem); /* grows to fill the width on desktop */ letter-spacing: clamp(.34em, .9vw, .62em); font-weight: 500; text-shadow: 0 1px 18px rgba(0,0,0,.55); } /* cycling wordmark as a refined logotype — all white; the Arabic calligraphy artwork is inverted to white to match */ .hero--image .hero__stage { min-height: clamp(2.2rem, 4.8vw, 3.6rem); } .hero--image .hero__word { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.9rem); letter-spacing: .03em; text-shadow: 0 1px 20px rgba(0,0,0,.55); } .hero--image .hero__word-img { height: clamp(1.8rem, 4.2vw, 3.2rem); filter: invert(1); } /* slogan over the dark lower hoodies — white */ .hero--image .hero__tag { color: #fff; text-shadow: 0 1px 22px rgba(0,0,0,.5); } .hero--image .btn { background: #fff; color: #0a0a0a; border-color: #fff; } .hero--image .btn:hover { background: transparent; color: #fff; } /* optional darkened video layer (added only if a video source is present) */ .hero::after { content: none; } /* staggered entrance */ .hero__eyebrow, .hero__stage, .hero__tag, .hero .btn { opacity: 0; transform: translateY(16px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; } .hero__stage { animation-delay: .08s; } .hero__tag { animation-delay: .18s; } .hero .btn { animation-delay: .28s; } @keyframes rise { to { opacity: 1; transform: none; } } /* ============================================================ Scroll reveal — elements fade + rise as they enter the viewport. Only active when has .reveal-ready (added by an inline head script, and skipped under prefers-reduced-motion), so there's no flash and graceful no-JS / reduced-motion fallback. ============================================================ */ html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } html.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; } html.reveal-ready [data-reveal] img { backface-visibility: hidden; } /* ============================================================ Light sheen — a soft glint sweeps across photos on hover. Subtle, and disabled under prefers-reduced-motion. ============================================================ */ .tile, .lookbook figure, .brandshot__media, .story__media, .product-card__media { position: relative; } .tile::after, .lookbook figure::after, .brandshot__media::after, .story__media::after, .product-card__media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%); transform: translateX(-130%); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); } .tile:hover::after, .lookbook figure:hover::after, .brandshot__media:hover::after, .story__media:hover::after, .product-card__media:hover::after { transform: translateX(130%); } @media (prefers-reduced-motion: reduce) { .tile::after, .lookbook figure::after, .brandshot__media::after, .story__media::after, .product-card__media::after { display: none; } } /* ============================================================ Lightbox — full-screen gallery for clicking through photos ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; background: rgba(245,244,241,.97); /* paper, matching the site */ backdrop-filter: blur(6px); padding: clamp(1.2rem, 4vw, 3rem); opacity: 0; transition: opacity .35s ease; } .lightbox.is-open { display: grid; opacity: 1; } .lightbox__stage { display: grid; place-items: center; width: 100%; height: 100%; } .lightbox__img { max-width: min(90vw, 1000px); max-height: 82vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 28px 70px rgba(10,10,10,.20); /* soft lift on the light ground */ opacity: 0; transform: scale(.985); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); } .lightbox__img.is-shown { opacity: 1; transform: none; } .lightbox__close, .lightbox__nav { position: absolute; z-index: 2; background: transparent; border: 0; color: var(--ink); cursor: pointer; font-family: var(--display); line-height: 1; transition: color .2s, transform .2s; } .lightbox__close:hover, .lightbox__nav:hover { color: var(--stone); } .lightbox__close { top: clamp(.8rem, 3vw, 2rem); right: clamp(1rem, 4vw, 2.6rem); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 300; } .lightbox__nav { top: 50%; transform: translateY(-50%); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 300; padding: .2em .35em; } .lightbox__nav:hover { transform: translateY(-50%) scale(1.12); } .lightbox__prev { left: clamp(.2rem, 2vw, 1.5rem); } .lightbox__next { right: clamp(.2rem, 2vw, 1.5rem); } .lightbox__count { position: absolute; bottom: clamp(1.1rem, 3vw, 2.2rem); left: 50%; transform: translateX(-50%); color: var(--stone); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox__img { transition: none; } } /* ============================================================ Brand statement — split: full back-print photo | serif text ============================================================ */ .brandshot { display: grid; grid-template-columns: 0.82fr 1.18fr; /* narrower image column keeps the portrait frame from getting too tall */ align-items: stretch; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .brandshot__media { background: #c7c6c4; /* matches the photo's seamless grey */ overflow: hidden; aspect-ratio: 4 / 5; /* portrait frame → shows the full seated figure like mobile */ } .brandshot__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; /* head-to-feet in view */ } .brandshot__panel { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.2rem, 2.6vw, 2rem); padding: clamp(2.2rem, 6vw, 6rem); } .brandshot__eyebrow { font-family: var(--body); text-transform: uppercase; font-size: .78rem; letter-spacing: .3em; color: var(--stone); } .brandshot__lead { font-family: var(--display); text-transform: uppercase; font-weight: 700; line-height: 1.04; letter-spacing: -.015em; font-size: clamp(1.9rem, 3.8vw, 3.3rem); max-width: 18ch; color: var(--ink); } .brandshot__sub { font-family: var(--display); text-transform: uppercase; font-size: clamp(1rem, 1.8vw, 1.4rem); font-weight: 500; letter-spacing: .04em; color: var(--stone); max-width: 32ch; } /* stays side-by-side on phones too — taller frame so the image isn't stubby, and scaled text to fit the narrow column */ @media (max-width: 700px) { .brandshot { grid-template-columns: 1fr 1fr; } /* keep the even mobile split */ .brandshot__media { aspect-ratio: 3 / 4; } .brandshot__panel { padding: clamp(.8rem, 3.5vw, 1.6rem); gap: .5rem; } .brandshot__lead { font-size: clamp(1.05rem, 5.6vw, 2.2rem); } .brandshot__sub { font-size: clamp(.7rem, 2.5vw, 1rem); max-width: 26ch; } } /* ============================================================ Finger — full-bleed editorial split (icon | big slogan) ============================================================ */ .finger { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .finger__media { display: grid; place-items: center; padding: clamp(1.2rem, 3vw, 2.2rem); border-right: 1px solid var(--line); } .finger__media img, .finger__media video { width: 100%; max-width: 210px; height: auto; display: block; } .finger__line { font-family: var(--display); font-size: clamp(1.7rem, 3.8vw, 3.2rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.0; padding: clamp(1.4rem, 3vw, 2.6rem); /* reveal handled by the scroll-reveal system (data-reveal) */ } /* stays side-by-side on phones — icon left, slogan right */ @media (max-width: 760px) { .finger__media { padding: clamp(1rem, 4vw, 1.8rem); } .finger__media img, .finger__media video { max-width: 150px; } .finger__line { font-size: clamp(1.15rem, 5.6vw, 2.6rem); padding: clamp(1rem, 4.5vw, 2rem); } } /* ============================================================ Mission — LARGE bold statement over full-bleed lifestyle photo ============================================================ */ .mission { position: relative; display: grid; align-items: center; justify-items: center; text-align: center; min-height: 82vh; padding: clamp(4rem, 10vw, 8rem) var(--pad); overflow: hidden; background: #d3d1cd; } .mission__bg { position: absolute; inset: 0; z-index: 0; } .mission__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; /* keep his face in frame above the statement */ opacity: 1; filter: contrast(1.08) brightness(.95); /* slightly less hot, a touch more contrast so the print reads */ } /* light halo behind the text so it stays legible over the photo */ .mission::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(78% 52% at 50% 56%, rgba(243,242,239,.92) 0%, rgba(243,242,239,.6) 42%, rgba(243,242,239,0) 75%); } @media (max-width: 760px) { /* on phones the model fills the frame, so lift the text band more */ .mission::after { background: linear-gradient(180deg, rgba(243,242,239,0) 18%, rgba(243,242,239,.94) 42%, rgba(243,242,239,.94) 74%, rgba(243,242,239,0) 92%); } } .mission__inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; width: 100%; display: grid; justify-items: center; gap: clamp(1.4rem, 3vw, 2.2rem); transform: translateY(5vh); /* nudge the statement a touch below centre */ } .mission__eyebrow { color: #3a3a36; text-shadow: 0 1px 14px rgba(238,237,233,.7); } .mission p { font-family: var(--display); font-weight: 500; letter-spacing: -.005em; line-height: 1.4; font-size: clamp(1.15rem, 2.3vw, 1.9rem); color: var(--ink); text-shadow: 0 1px 18px rgba(238,237,233,.7); max-width: 30ch; } /* desktop: the photo is a 2:3 portrait, so letterboxing it across a wide screen left a narrow strip with the copy sitting on the model. Split it instead — statement on the left, full-bleed photo on the right (mirrors .brandshot / .story). */ @media (min-width: 761px) { .mission { grid-template-columns: 1fr 1fr; align-items: stretch; justify-items: stretch; text-align: left; min-height: 0; padding: 0; background: #f3f2ef; } .mission::after { display: none; } /* no halo needed — text is off the photo now */ .mission__bg { position: relative; inset: auto; order: 2; overflow: hidden; /* drives the row height — the photo fills whatever this resolves to, so the section always fits one screen instead of growing to the 2:3 photo height */ min-height: min(72vh, 640px); } .mission__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; /* head and back print stay in frame on the crop */ filter: contrast(1.04); } .mission__inner { order: 1; max-width: none; margin: 0; justify-items: start; align-content: center; transform: none; gap: clamp(1rem, 2vw, 1.5rem); padding: clamp(2.5rem, 4.5vw, 4rem) clamp(2rem, 4.5vw, 4.5rem); } .mission__eyebrow { text-shadow: none; } .mission p { max-width: 26ch; text-shadow: none; font-size: clamp(1.2rem, 1.75vw, 1.7rem); line-height: 1.35; } } /* ============================================================ Story — two-column founder block ============================================================ */ /* full-bleed founder row — image fills one edge, copy the other */ .story { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; border-top: 1px solid var(--line); } .story__media { overflow: hidden; background: var(--line); position: relative; /* image is absolute, so the COPY drives the row height (no dead space) */ } .story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; /* keep his face in frame in the shorter crop */ } .story__copy { display: grid; align-content: center; gap: 1.4rem; padding: clamp(2.5rem, 6vw, 6rem); } .story__copy h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); } .story__copy p { color: var(--stone); max-width: 46ch; font-size: 1.05rem; } /* stays side-by-side on phones — founder portrait left, scaled copy right. Give the copy the wider column so the paragraph reads at a comfortable size. */ @media (max-width: 760px) { .story { grid-template-columns: 0.78fr 1.22fr; } .story__media { min-height: 0; } .story__media img { object-position: center 18%; } .story__copy { padding: clamp(1.1rem, 4.5vw, 2.2rem); gap: .6rem; } .story__copy h2 { font-size: clamp(1.35rem, 6.2vw, 2.4rem); line-height: 1.05; } .story__copy p { font-size: clamp(.9rem, 3.6vw, 1.05rem); line-height: 1.5; max-width: none; } } /* ============================================================ Section heads ============================================================ */ .section { padding-block: clamp(2rem, 4.5vw, 4rem); } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; } .section__head h2 { font-size: clamp(2rem, 6vw, 4rem); } .section__head a { color: var(--stone); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; transition: color .2s; } .section__head a:hover { color: var(--ink); } /* ============================================================ Product grid ============================================================ */ .grid { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* phones: 2-up product grid instead of one giant column */ @media (max-width: 560px) { .grid { grid-template-columns: 1fr 1fr; gap: clamp(.7rem, 3vw, 1.1rem); } .product-card__body { padding-top: .75rem; gap: .25rem; } .product-card__title { font-size: .8rem; line-height: 1.25; } .product-card__price { font-size: .8rem; } .product-card .btn--add { font-size: .62rem; letter-spacing: .1em; padding: .85em .6em; margin-top: .55rem; } } .grid-empty { color: var(--stone); font-family: var(--display); font-size: 1.4rem; grid-column: 1 / -1; } /* ============================================================ Image-led collection — full-bleed tight grid of real photos ============================================================ */ .collection { padding-top: clamp(4.5rem, 10vw, 9rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); } .collection__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0 var(--pad); margin-bottom: clamp(2.4rem, 5vw, 4rem); max-width: var(--maxw); margin-inline: auto; } .collection__head h2 { font-size: clamp(2rem, 6vw, 4.4rem); letter-spacing: -.02em; } .collection__head a { color: var(--stone); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; transition: color .2s; } .collection__head a:hover { color: var(--ink); } /* curated, contained grid of uniformly-framed product shots */ .tilegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 1.4vw, 1.1rem); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .tile { position: relative; overflow: hidden; background: #ebe9e6; aspect-ratio: 4 / 5; display: block; } .tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; /* uniform framing — face/print in view across every shot */ transition: transform 1s cubic-bezier(.2,.7,.2,1); } .tile:hover img { transform: scale(1.05); } .tile__label { position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2vw, 1.5rem); color: var(--paper); background: linear-gradient(to top, rgba(10,10,10,.6), transparent); } .tile__name { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(.95rem, 1.6vw, 1.25rem); line-height: 1; } .tile__shop { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; padding-bottom: .15em; border-bottom: 1px solid rgba(var(--paper-rgb), .6); } @media (max-width: 900px) { .tilegrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .tilegrid { grid-template-columns: repeat(2, 1fr); } .collection__head h2 { font-size: clamp(2.4rem, 14vw, 4rem); } } .product-card { display: flex; flex-direction: column; } .product-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); display: block; width: 100%; border: 0; padding: 0; cursor: pointer; font: inherit; } .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .product-card:hover .product-card__media img { transform: scale(1.05); } .product-card__flag { position: absolute; top: 1rem; left: 1rem; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; background: var(--paper); color: var(--ink); padding: .35em .7em; } .product-card__body { padding-top: 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; /* fill the card so the button can anchor to the bottom */ } .product-card__title { font-family: var(--body); font-size: .98rem; font-weight: 600; letter-spacing: .01em; color: var(--ink); /* explicit: iOS Safari tints inherited text blue when its data detectors treat the string as tappable */ } .product-card__price { color: var(--stone); font-size: .95rem; margin-bottom: .8rem; } .product-card .btn--add { margin-top: auto; width: 100%; } /* ============================================================ Product detail modal — gallery + size picker + size guide ============================================================ */ .product-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; } .product-modal[hidden] { display: none; } .product-modal__overlay { position: absolute; inset: 0; background: rgba(10,10,10,.5); backdrop-filter: blur(3px); } .product-modal__panel { position: relative; z-index: 1; background: var(--paper); width: min(1080px, 94vw); max-height: 92vh; overflow: auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.2rem, 3vw, 2.6rem); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: 0 30px 90px rgba(10,10,10,.3); } .product-modal__close { position: absolute; top: .5rem; right: .8rem; z-index: 3; background: none; border: 0; cursor: pointer; font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--ink); } .product-modal__close:hover { color: var(--stone); } .pm-main { aspect-ratio: 4/5; overflow: hidden; background: #ebe9e6; } .pm-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } /* hover / tap to zoom into the product photo */ .pm-main--zoom { cursor: zoom-in; } .pm-main--zoom img.is-zoomed { transform: scale(2.3); cursor: zoom-out; } .pm-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; } .pm-thumb { width: 58px; aspect-ratio: 4/5; border: 1px solid var(--line); padding: 0; overflow: hidden; background: #ebe9e6; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; } .pm-thumb.is-active { opacity: 1; border-color: var(--ink); } .pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-modal__info { display: flex; flex-direction: column; gap: 1rem; align-self: start; } .pm-title { font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.05; } .pm-price { font-family: var(--display); font-size: 1.35rem; color: var(--ink); } .pm-sizes { display: flex; flex-wrap: wrap; gap: .5rem; } .pm-size { min-width: 3rem; padding: .6rem .9rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; letter-spacing: .05em; transition: border-color .2s, background .2s, color .2s; } .pm-size:hover:not(:disabled) { border-color: var(--ink); } .pm-size.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .pm-size:disabled, .pm-size.is-soldout { opacity: .35; cursor: not-allowed; text-decoration: line-through; } .pm-add { width: 100%; } .pm-add:disabled { opacity: .5; cursor: not-allowed; } .pm-sizeguide-toggle { align-self: flex-start; background: none; border: 0; padding: .1rem 0; cursor: pointer; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); border-bottom: 1px solid var(--line); } .pm-sizeguide-toggle:hover { color: var(--ink); } .pm-sizeguide img { width: 100%; max-width: 440px; border: 1px solid var(--line); margin-top: .4rem; display: block; } .pm-desc { font-size: .95rem; color: var(--stone); line-height: 1.65; } .pm-desc p { margin-bottom: .6rem; } .pm-desc strong { color: var(--ink); } @media (max-width: 760px) { .product-modal__panel { grid-template-columns: 1fr; max-height: 94vh; } .pm-thumbs { gap: .4rem; } .pm-thumb { width: 48px; } } /* PDP — Klarna, fit note, accordions, related */ .pm-klarna { font-size: .82rem; color: var(--stone); margin-top: -.4rem; } .pm-fitnote { font-size: .8rem; color: var(--ink); letter-spacing: .01em; } .pm-acc { border-top: 1px solid var(--line); margin-top: .4rem; } .pm-acc__item { border-bottom: 1px solid var(--line); } .pm-acc__item summary { list-style: none; cursor: pointer; padding: .9rem 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; justify-content: space-between; } .pm-acc__item summary::-webkit-details-marker { display: none; } .pm-acc__item summary::after { content: "+"; font-family: var(--display); font-size: 1.3rem; line-height: 0; color: var(--stone); } .pm-acc__item[open] summary::after { content: "–"; } .pm-acc__item > div, .pm-acc__item > p { font-size: .9rem; color: var(--stone); line-height: 1.65; padding-bottom: 1rem; } .pm-acc__item p { margin-bottom: .6rem; } .pm-related { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1.6rem; } .pm-related__title { font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; margin-bottom: 1rem; } .pm-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 1.4vw, 1rem); } .pm-related__card { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit; display: flex; flex-direction: column; gap: .5rem; } .pm-related__media { aspect-ratio: 4/5; overflow: hidden; background: #ebe9e6; display: block; } .pm-related__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .pm-related__card:hover .pm-related__media img { transform: scale(1.05); } .pm-related__name { font-size: .82rem; font-weight: 600; line-height: 1.2; } .pm-related__price { font-size: .82rem; color: var(--stone); } @media (max-width: 760px) { .pm-related__grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Editorial split — lookbook teaser ============================================================ */ .split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; align-items: stretch; } .split__media { background: var(--line); min-height: 70vh; } .split__media img { width: 100%; height: 100%; object-fit: cover; } .split__copy { padding: clamp(2rem, 6vw, 6rem); display: grid; align-content: center; gap: 1.4rem; } .split__copy h2 { font-size: clamp(2rem, 5vw, 3.6rem); } .split__copy p { color: var(--stone); max-width: 44ch; } @media (max-width: 800px) { .split { grid-template-columns: 1fr; } .split__media { min-height: 60vw; } } /* ============================================================ Newsletter band — intentional dark accent (only dark surface) ============================================================ */ .newsletter { background: var(--ink); color: var(--paper); padding-block: clamp(4rem, 9vw, 7rem); text-align: center; } .newsletter h2 { color: var(--paper); } .newsletter p { color: rgba(var(--paper-rgb), 0.65); margin-top: 1rem; max-width: 44ch; margin-inline: auto; } .newsletter__form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } .newsletter__form input { flex: 1; min-width: 220px; max-width: 360px; background: transparent; border: 1px solid rgba(var(--paper-rgb), 0.35); color: var(--paper); padding: .9em 1.1em; font-family: var(--body); font-size: 1rem; } .newsletter__form input::placeholder { color: rgba(var(--paper-rgb), 0.45); } .newsletter__form .btn { border-color: var(--paper); color: var(--paper); } .newsletter__form .btn:hover { background: var(--paper); color: var(--ink); } /* ============================================================ Cart drawer ============================================================ */ .cart-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(14, 14, 14, 0.45); backdrop-filter: blur(2px); } .cart-drawer { position: fixed; top: 0; right: 0; z-index: 70; width: min(440px, 92vw); height: 100dvh; background: var(--paper); border-left: 1px solid var(--line); color: var(--ink); display: flex; flex-direction: column; transform: translateX(102%); transition: transform .42s cubic-bezier(.2,.7,.2,1); } .cart-drawer.is-open { transform: none; } .cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); } .cart-drawer__head h2 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: -.01em; font-family: var(--display); } .cart-drawer__close { background: none; border: 0; color: var(--ink); font-size: 1.8rem; cursor: pointer; line-height: 1; } .cart-drawer__close:hover { color: var(--stone); } .cart-drawer__lines { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem; } .cart-empty { color: var(--stone); font-family: var(--display); font-size: 1.3rem; padding-top: 2rem; } .cart-line { display: grid; grid-template-columns: 76px 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .cart-line__media { aspect-ratio: 4/5; background: var(--line); overflow: hidden; } .cart-line__media img { width: 100%; height: 100%; object-fit: cover; } .cart-line__info { display: flex; flex-direction: column; min-width: 0; } .cart-line__title { font-weight: 600; font-size: .95rem; } .cart-line__variant { color: var(--stone); font-size: .82rem; } .cart-line__price { color: var(--stone); font-size: .9rem; margin-top: .15rem; } .cart-line__qty { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; } .cart-line__qty button { background: none; border: 1px solid var(--line); color: var(--ink); width: 1.9em; height: 1.9em; cursor: pointer; transition: border-color .2s; } .cart-line__qty button:hover { border-color: var(--ink); } .cart-line__remove { width: auto !important; border: 0 !important; color: var(--stone); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; margin-left: auto; transition: color .2s; cursor: pointer; background: none; } .cart-line__remove:hover { color: var(--ink); } .cart-drawer__foot { padding: 1.4rem 1.6rem; border-top: 1px solid var(--line); } .cart-drawer__subtotal { display: flex; justify-content: space-between; font-size: 1.05rem; margin-bottom: .5rem; } .cart-drawer__note { color: var(--stone); font-size: .8rem; margin-bottom: 1.1rem; } .btn--checkout { width: 100%; } /* ============================================================ Footer ============================================================ */ .footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem); } .footer__grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 2.5rem; } .footer h3, .footer h4 { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin-bottom: 1.1rem; font-family: var(--body); font-weight: 600; } .footer a { display: block; color: var(--stone); font-size: .92rem; padding: .25rem 0; transition: color .2s; } .footer a:hover { color: var(--ink); } .footer__brand { font-family: var(--display); font-size: 2rem; font-weight: 600; text-transform: uppercase; } .footer__sign { display: flex; gap: .6rem; margin-top: 1rem; } .footer__sign input { flex: 1; background: transparent; border: 1px solid var(--line); color: var(--ink); padding: .8em 1em; font-family: var(--body); transition: border-color .2s; } .footer__sign input:focus { outline: none; border-color: var(--stone); } .footer__sign input::placeholder { color: var(--stone); } .footer__bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: var(--stone); font-size: .8rem; } /* Name bar — Arabic → romanised → translation */ .name-bar { display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; font-family: var(--display); font-size: clamp(.9rem, 2vw, 1.1rem); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--stone); margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } .name-bar__divider { color: var(--line); font-weight: 400; letter-spacing: 0; } .name-bar [lang="ar"] { font-weight: 700; direction: rtl; unicode-bidi: embed; letter-spacing: 0; } @media (max-width: 1040px) and (min-width: 761px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } } /* ============================================================ Page header — interior pages ============================================================ */ .page-head { padding: clamp(1.6rem, 4.5vw, 3.5rem) var(--pad) clamp(1.6rem, 3.5vw, 2.6rem); border-bottom: 1px solid var(--line); } .page-head h1 { font-size: clamp(2.6rem, 8vw, 6rem); } .page-head p { color: var(--stone); margin-top: 1rem; max-width: 52ch; } /* ============================================================ Contact form ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); } .field { display: grid; gap: .5rem; margin-bottom: 1.3rem; } .field label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); } .field input, .field textarea { background: transparent; border: 1px solid var(--line); color: var(--ink); padding: .9em 1em; font-family: var(--body); font-size: 1rem; transition: border-color .2s; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); } @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } } /* ============================================================ Finger icon (isolated brand mark) — white bg drops out via multiply ============================================================ */ .finger__media--icon img { mix-blend-mode: multiply; max-width: 300px; margin-inline: auto; } /* ============================================================ Preloader / loading animation (the raised finger) ============================================================ */ .preloader { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; background: var(--paper); transition: opacity .7s ease, visibility .7s ease; } .preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .preloader__finger { width: clamp(110px, 16vw, 168px); height: auto; mix-blend-mode: multiply; /* white background → bone */ animation: fingerRise 1s cubic-bezier(.2,.7,.2,1) both, fingerBreathe 2.6s ease-in-out 1s infinite; } .preloader__line { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(.95rem, 2.4vw, 1.5rem); line-height: 1.05; color: var(--ink); text-align: center; max-width: 22ch; opacity: 0; transform: translateY(10px); animation: fadeUp .8s ease .5s forwards; } .preloader__bar { position: relative; width: 120px; height: 2px; background: var(--line); overflow: hidden; } .preloader__bar::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--accent); animation: barSlide 1.1s ease-in-out infinite; } @keyframes fingerRise { from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(14px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } } @keyframes fingerBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes fadeUp { to { opacity: 1; transform: none; } } @keyframes barSlide { 0% { left: -40%; } 100% { left: 120%; } } /* ============================================================ Shared closing CTA band (shipping / reviews / concept pages) ============================================================ */ .cta-band { text-align: center; background: #f6f5f2; border-top: 1px solid var(--line); padding: clamp(3rem, 7vw, 5.5rem) var(--pad); } .cta-band h2 { font-size: clamp(1.8rem, 4.5vw, 3rem); letter-spacing: -.015em; } .cta-band p { color: var(--stone); max-width: 46ch; margin: .8rem auto 1.6rem; line-height: 1.6; } .cta-band b { color: var(--ink); } /* ============================================================ Concept Pieces — unreleased designs the community votes on ============================================================ */ .concept__lead { max-width: 52ch; margin: -0.4rem auto clamp(1.8rem, 4vw, 2.8rem); text-align: center; color: var(--stone); line-height: 1.6; } .concept__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.7rem, 1.6vw, 1.2rem); } @media (max-width: 900px) { .concept__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .concept__grid { grid-template-columns: 1fr; } } .concept__card { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper); display: flex; flex-direction: column; transition: border-color .25s, box-shadow .25s, transform .25s; } .concept__card:hover { border-color: #d9d8d4; box-shadow: 0 16px 40px rgba(10,10,10,.06); transform: translateY(-3px); } .concept__media { position: relative; aspect-ratio: 4/5; background: #f2f1ee; display: grid; place-items: center; border-bottom: 1px solid var(--line); } .concept__media img { width: 100%; height: 100%; object-fit: cover; } /* placeholder shown until Ayman drops the real artwork in (swap for an ) */ .concept__ph { display: grid; justify-items: center; gap: .9rem; opacity: .55; } /* multiply drops the logo PNG's white ground into the tile instead of boxing it */ .concept__ph img { width: clamp(48px, 7vw, 72px); height: auto; object-fit: contain; mix-blend-mode: multiply; } .concept__ph span { font-family: var(--body); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--stone); } .concept__tag { position: absolute; top: .8rem; left: .8rem; background: rgba(var(--paper-rgb), .92); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; font-family: var(--body); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); } .concept__body { padding: clamp(1.1rem, 2.4vw, 1.5rem); display: grid; gap: .45rem; flex: 1; } .concept__name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; text-transform: uppercase; } .concept__desc { color: var(--stone); font-size: .88rem; line-height: 1.5; } .concept__vote { border-top: 1px solid var(--line); padding: .85rem clamp(1.1rem, 2.4vw, 1.5rem); display: flex; align-items: center; gap: .5rem; } .vote { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); padding: .45rem .85rem; font-family: var(--body); font-size: .78rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .vote:hover { border-color: var(--ink); } .vote svg { width: 15px; height: 15px; flex: 0 0 auto; } .vote--down svg { transform: rotate(180deg); } .vote__count { font-variant-numeric: tabular-nums; letter-spacing: .02em; } .vote.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); } .vote[disabled] { cursor: default; } .vote[disabled]:not(.is-on) { opacity: .5; } .vote[disabled]:not(.is-on):hover { border-color: var(--line); } .concept__thanks { margin-left: auto; font-family: var(--body); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity .25s; } .concept__card.is-voted .concept__thanks { opacity: 1; } /* "pitch us a design" note under the grid */ .concept__pitch { margin-top: clamp(1.6rem, 3.5vw, 2.4rem); border: 1px solid var(--line); border-radius: 6px; background: #faf9f7; padding: clamp(1.4rem, 3.5vw, 2.2rem); text-align: center; } .concept__pitch h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.5rem); text-transform: uppercase; letter-spacing: -.01em; } .concept__pitch p { color: var(--stone); max-width: 52ch; margin: .6rem auto 1.2rem; line-height: 1.6; } .concept__pitch-links { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; } /* A mailto: link does nothing at all for anyone without a default mail app — which is most people reading webmail in a browser — so the button can't be the only way to reach us. Show the address in full, selectable and copyable. */ .concept__pitch-mail { margin: .9rem auto 0; font-size: .88rem; color: var(--stone); } .concept__pitch-mail a { color: var(--ink); border-bottom: 1px solid var(--line); } .concept__pitch-mail a:hover { border-bottom-color: currentColor; } .concept__pitch-copied { color: var(--ink); font-weight: 600; } /* ============================================================ Shipping & Returns ============================================================ */ .ship-lede { max-width: 60ch; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; color: var(--stone); line-height: 1.65; } .ship-table { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .ship-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1.1rem, 3vw, 1.8rem); align-items: baseline; } .ship-row + .ship-row { border-top: 1px solid var(--line); } .ship-row--head { background: #faf9f7; font-family: var(--body); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); } .ship-row__name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; } .ship-row__note { display: block; font-family: var(--body); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--stone); font-size: .84rem; margin-top: .2rem; } .ship-row__time { font-family: var(--display); font-weight: 600; font-size: 1.05rem; } .ship-row__cost { color: var(--stone); font-size: .92rem; } @media (max-width: 620px) { .ship-row { grid-template-columns: 1fr; gap: .35rem; } .ship-row--head { display: none; } .ship-row__cost::before { content: "Cost — "; } } /* how an order travels: numbered rail */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 2vw, 1.6rem); counter-reset: step; } @media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } } .step { display: grid; gap: .6rem; align-content: start; } .step__num { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--ink); font-family: var(--display); font-weight: 700; font-size: .92rem; } .step h3 { font-family: var(--display); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: -.01em; } .step p { color: var(--stone); font-size: .9rem; line-height: 1.55; } .ship-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3rem); } @media (max-width: 800px) { .ship-split { grid-template-columns: 1fr; } } .ship-note { border-left: 2px solid var(--ink); padding-left: clamp(1rem, 2.5vw, 1.4rem); color: var(--stone); line-height: 1.65; } .ship-note h3 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; color: var(--ink); margin-bottom: .5rem; } .ship-list { list-style: none; display: grid; gap: .7rem; } .ship-list li { position: relative; padding-left: 1.3rem; color: var(--stone); line-height: 1.55; } .ship-list li::before { content: "—"; position: absolute; left: 0; color: var(--ink); } .ship-list b { color: var(--ink); font-weight: 600; } /* ============================================================ Reduced-motion override — must be last ============================================================ */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Contact aside headings. These were

straight after the page

, which skips two levels and fails the heading-order check; as

they'd inherit the big display treatment from the global h1,h2,h3 rule, so restyle them to match the footer's small-caps label instead. */ .contact-grid h3 { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); font-family: var(--body); font-weight: 600; line-height: 1.2; margin-bottom: .55rem; } .contact-grid h3 ~ h3 { margin-top: 1.6rem; } /* GoHighLevel contact embed. min-height stops the panel collapsing before form_embed.js reports the real height. Never add loading="lazy" here, and never wrap it in [data-reveal] — that pairing is what made the waitlist embed invisible on iOS Safari. */ .contact-embed__frame { display: block; width: 100%; min-height: 560px; border: 0; background: transparent; color-scheme: light; }