/* ========================================================================== DETROITORANT — Design 1 "Editorial" (boutique / botanical-adjacent layout, inspired by the Sillage reference). Palette restricted to white, black, and navy per brand direction, with white as the dominant ground. MOBILE FIRST: base rules describe the phone layout, and `min-width` queries progressively add the wider treatments. Header photos are shown WHOLE on phones (native aspect ratio, no cover-crop) and only become full-bleed cropped banners once the viewport is wide enough that the crop costs almost nothing. ========================================================================== */ @font-face { font-family: 'Tanker'; /* Filenames on disk are lowercase; the previous mixed-case path 404'd on case-sensitive hosting, so the display font never loaded. */ src: url('assets/fonts/tanker-regular.woff2') format('woff2'), url('assets/fonts/tanker-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } :root { --c-white: #F8F6F2; --c-white-pure: #FFFFFF; --c-black: #0A0A0A; --c-navy: #0B1330; --c-navy-deep: #060914; --c-line-dark: rgba(10, 10, 10, 0.14); --c-line-light: rgba(248, 246, 242, 0.18); --c-muted: rgba(10, 10, 10, 0.6); --f-display: 'Tanker', 'Oswald', sans-serif; --f-body: 'Bitter', Georgia, 'Times New Roman', serif; --space-3xs: 0.4rem; --space-xs: 0.75rem; --space-sm: 1.25rem; --space-md: 2.5rem; /* The two largest steps start compact on phones and grow at 700px+ */ --space-lg: 3rem; --space-xl: 5rem; /* Space a page must leave for the nav. Zero on mobile, where the nav sits in the document flow; non-zero once it becomes a fixed overlay at 900px. */ --nav-offset: 0rem; --container: 1320px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--c-white); /* Kept on , not : overflow on body would turn it into a scroll container and silently break the sticky mobile nav. */ overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--f-body); color: var(--c-black); background: var(--c-white); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(11, 19, 48, 0.15); font-size: 1rem; line-height: 1.65; } img { max-width: 100%; display: block; } a { color: inherit; } /* Deep-linked anchors clear the sticky nav instead of hiding beneath it */ [id] { scroll-margin-top: 4.5rem; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 700px) { :root { --space-lg: 5rem; --space-xl: 9rem; } body { font-size: 1.05rem; line-height: 1.6; } .wrap { padding: 0 var(--space-md); } } @media (min-width: 900px) { :root { --nav-offset: 6.5rem; } [id] { scroll-margin-top: 7rem; } } .eyebrow { font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-navy); } .display { font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--f-display); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 0.85rem 1.6rem; /* Comfortable thumb target */ min-height: 46px; border-radius: 100px; border: 1.5px solid var(--c-black); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; cursor: pointer; background: none; } @media (min-width: 700px) { .btn { padding: 0.95rem 1.8rem; } } .btn--primary { background: var(--c-black); color: var(--c-white); } .btn--primary:hover { transform: translateY(-2px); background: var(--c-navy); } .btn--ghost { background: transparent; color: var(--c-black); } .btn--ghost:hover { transform: translateY(-2px); background: var(--c-black); color: var(--c-white); } .btn--on-dark { border-color: var(--c-white); color: var(--c-white); } .btn--on-dark.btn--primary { background: var(--c-white); color: var(--c-black); } .btn--on-dark.btn--primary:hover { background: var(--c-white-pure); } .btn--on-dark.btn--ghost:hover { background: var(--c-white); color: var(--c-black); } /* ---- Nav ----------------------------------------------------------------- */ /* Mobile: a solid bar IN the document flow that sticks to the top on scroll. It deliberately does not overlay the hero, so the header photo below it stays completely visible. The mix-blend-mode overlay nav is a desktop-only enhancement (see the 900px block at the end of this section). */ .site-nav { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.25rem; background: var(--c-navy-deep); color: var(--c-white); } .site-nav__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; /* Above the drawer scrim so the logo stays legible while the menu is open */ position: relative; z-index: 2; min-height: 44px; } .site-nav__brand img { height: 26px; filter: invert(1); } .site-nav__brand-word { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: 0.04em; } /* Slide-in drawer is the mobile default */ .site-nav__links { position: fixed; top: 0; right: -100%; height: 100vh; height: 100dvh; width: 78vw; max-width: 320px; background: var(--c-black); color: var(--c-white); display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; list-style: none; padding: 0 2rem; transition: right 0.35s ease; box-shadow: -20px 0 50px rgba(0, 0, 0, 0.35); z-index: 3; } .site-nav__links.is-open { right: 0; } .site-nav__links a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-family: var(--f-display); font-size: 1.25rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; transition: opacity 0.25s ease; } .site-nav__links a:hover, .site-nav__links a.is-active { opacity: 1; } /* Tap-outside-to-close scrim, present only while the drawer is open */ .site-nav.is-open::after { content: ''; position: fixed; inset: 0; background: rgba(6, 9, 20, 0.6); z-index: 1; } .site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2; min-height: 44px; min-width: 44px; padding: 0 0.25rem; background: none; border: 0; color: inherit; font-family: var(--f-display); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } /* Mobile: the JS-injected login button (assets/js/firebase-auth.js) is appended after .site-nav__links, which is position:fixed and out of flow, so it becomes the 3rd in-flow flex child sharing the bar with the logo and the Menu toggle. Its full label doesn't fit next to the logo on a phone, which caused the login pill to overlap/clip the logo and hide the Menu toggle. Pin the logo left and cluster the toggle + login button together on the right instead. */ @media (max-width: 899px) { .site-nav { justify-content: flex-start; } .site-nav__brand { margin-right: auto; } } @media (min-width: 900px) { /* Desktop: float the nav over the hero and invert it against the photo */ .site-nav { position: fixed; top: 2.4rem; left: 0; width: 100%; padding: 1.4rem var(--space-md); background: none; mix-blend-mode: difference; } .site-nav__brand img { height: 30px; } .site-nav__brand-word { font-size: 1.3rem; } .site-nav__links { position: static; height: auto; width: auto; max-width: none; flex-direction: row; gap: var(--space-md); background: none; padding: 0; box-shadow: none; transition: none; } .site-nav__links a { min-height: 0; font-size: 0.92rem; letter-spacing: 0.1em; } .site-nav__toggle { display: none; } .site-nav.is-open::after { display: none; } } /* ---- Hero / scroll motion ------------------------------------------------- */ /* Mobile: the header photo is shown WHOLE. It keeps its native 16:9 ratio and the headline/CTAs stack underneath on a dark panel, so a tall phone viewport crops nothing and the nav covers nothing. From 900px up the viewport is wide enough that a cover-crop loses almost nothing, so the hero returns to the full-bleed overlay treatment. */ .hero-motion { position: relative; display: flex; flex-direction: column; background: var(--c-navy-deep); } .hero-motion__bg { position: relative; width: 100%; z-index: 0; } .hero-motion__bg img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center; } /* The gradient scrim only exists to protect overlaid text; with the copy stacked below the photo on mobile there is nothing to protect. */ .hero-motion__overlay { display: none; } .hero-motion__stage { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; } .hero-motion__product { position: absolute; width: clamp(120px, 18vw, 230px); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35)); opacity: 0; will-change: transform, opacity; } .hero-motion__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--c-white); padding: 1.6rem 1.25rem 2.4rem; } .hero-motion__eyebrow { font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-white); opacity: 0.8; margin-bottom: 0.8rem; } .hero-motion__title { font-family: var(--f-display); font-size: clamp(2.1rem, 9vw, 7.5rem); letter-spacing: 0.01em; text-transform: uppercase; line-height: 0.98; } .hero-motion__tagline { font-family: var(--f-body); font-style: italic; font-size: clamp(1.05rem, 2vw, 1.6rem); margin-top: 0.8rem; color: var(--c-white); opacity: 0.92; } .hero-motion__cta { display: flex; gap: 0.75rem; margin-top: var(--space-sm); flex-wrap: wrap; justify-content: flex-start; } /* Two side-by-side pills get cramped on a phone; let them share the row */ .hero-motion__copy .hero-motion__cta .btn { flex: 1 1 12rem; } @media (max-width: 899px) { .hero-motion__copy { align-items: center; text-align: center; } .hero-motion__cta { justify-content: center; } } @media (min-width: 900px) { .hero-motion { display: block; height: 100vh; min-height: 560px; overflow: hidden; } .hero-motion__bg { position: absolute; inset: 0; } .hero-motion__bg img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 35%; } .hero-motion__overlay { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,9,20,0.55) 0%, rgba(6,9,20,0.25) 45%, rgba(6,9,20,0.75) 100%); opacity: 0.3; } .hero-motion__copy { height: 100%; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; } .hero-motion__title { line-height: 0.95; } .hero-motion__tagline { margin-top: 1rem; } .hero-motion__cta { gap: 1rem; margin-top: var(--space-md); justify-content: center; } .hero-motion__copy .hero-motion__cta .btn { flex: 0 0 auto; } } /* ---- Section shells -------------------------------------------------------- */ section { position: relative; } .section { padding: var(--space-xl) 0; } .section--tight { padding: var(--space-lg) 0; } .section--navy { background: var(--c-navy); color: var(--c-white); } .section--cream { background: #c8c0a8; } .section--black { background: var(--c-black); color: var(--c-white); } .section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); border-bottom: 1px solid var(--c-line-dark); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); } .section--navy .section-head, .section--black .section-head { border-bottom-color: var(--c-line-light); } .section-title { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2rem, 9vw, 4.6rem); line-height: 0.95; } .section-sub { max-width: 560px; color: var(--c-muted); text-align: center; margin: 0 auto; } .section--navy .section-sub, .section--black .section-sub { color: rgba(248,246,242,0.7); } @media (min-width: 700px) { .section-head { gap: var(--space-sm); margin-bottom: var(--space-lg); } .section-title { font-size: clamp(2.4rem, 5vw, 4.6rem); } } /* ---- Quiz ------------------------------------------------------------------ */ .quiz__card { background: var(--c-white-pure); color: var(--c-black); border: 1px solid var(--c-line-dark); border-radius: 18px; padding: var(--space-md) var(--space-sm); max-width: 720px; margin: 0 auto; } .quiz__progress { display: flex; gap: 0.4rem; margin-bottom: var(--space-sm); } .quiz__dot { width: 28px; height: 3px; background: var(--c-line-dark); border-radius: 2px; } .quiz__dot.is-active { background: var(--c-navy); } .quiz__eyebrow { font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-navy); margin-bottom: 0.6rem; } .quiz__prompt { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.4rem, 6vw, 2.2rem); margin-bottom: var(--space-sm); line-height: 1.05; color: var(--c-black); } .quiz__options { display: grid; gap: 0.85rem; } .quiz__option { display: flex; align-items: center; gap: 0.9rem; text-align: left; width: 100%; min-height: 52px; padding: 1rem 1.1rem; border: 1.5px solid var(--c-line-dark); background: transparent; border-radius: 12px; font-family: var(--f-body); font-size: 1rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .quiz__option:hover { border-color: var(--c-navy); background: rgba(11,19,48,0.04); transform: translateX(4px); } .quiz__option-mark { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-navy); flex-shrink: 0; } .quiz__result-main { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; } .quiz__result-image { width: 130px; border-radius: 12px; background: #efece6; padding: 1rem; } .quiz__result-copy { flex: 1; min-width: 200px; } .quiz__result-name { font-family: var(--f-display); text-transform: uppercase; font-size: 1.7rem; } .quiz__result-tagline { font-style: italic; margin-top: 0.3rem; color: var(--c-muted); } .quiz__result-desc { margin-top: 0.7rem; } .quiz__result-price { margin-top: 0.7rem; font-family: var(--f-display); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; } .quiz__result-actions { display: flex; gap: 0.8rem; margin-top: var(--space-sm); flex-wrap: wrap; } .quiz__cross-sell { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--c-line-dark); font-style: italic; color: var(--c-muted); } .quiz__cross-sell a { text-decoration: underline; } @media (min-width: 700px) { .quiz__card { padding: var(--space-lg) var(--space-md); } .quiz__prompt { margin-bottom: var(--space-md); } .quiz__result-main { gap: var(--space-md); } .quiz__result-image { width: 150px; } .quiz__result-copy { min-width: 220px; } .quiz__result-name { font-size: 1.9rem; } } /* ---- Featured spotlight ----------------------------------------------------- */ .feature { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; } .feature__image-wrap { position: relative; border-radius: 18px; overflow: hidden; } /* Whole product shot on mobile; cropped to fill its column on desktop */ .feature__image-wrap img { width: 100%; height: auto; } .feature__tag { position: absolute; top: 1.2rem; left: 1.2rem; background: var(--c-white-pure); color: var(--c-black); font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem 0.9rem; border-radius: 100px; } .feature__name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2rem, 8vw, 3.6rem); margin-bottom: 0.8rem; } .feature__desc { max-width: 480px; margin-bottom: var(--space-sm); } .feature__notes { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: var(--space-sm); } .feature__notes span { font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; /* Section sits on the light ground, so it needs the dark hairline */ border: 1px solid var(--c-line-dark); padding: 0.4rem 0.8rem; border-radius: 100px; } .feature__price { font-family: var(--f-display); font-size: 1.3rem; margin-bottom: var(--space-sm); } @media (max-width: 899px) { .feature { text-align: center; } .feature__desc { margin-left: auto; margin-right: auto; } .feature__notes { justify-content: center; } .feature .hero-motion__cta { justify-content: center !important; } } @media (min-width: 900px) { .feature { grid-template-columns: 0.85fr 1fr; gap: var(--space-xl); } .feature__image-wrap img { height: 100%; object-fit: cover; } .feature__name { font-size: clamp(2.2rem, 5vw, 3.6rem); } .feature__notes { margin-bottom: var(--space-md); } .feature__price { margin-bottom: var(--space-md); } } /* ---- Testimonials ------------------------------------------------------------ */ .testimonials { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } .testimonial { border-top: 1px solid var(--c-line-dark); padding-top: var(--space-sm); } .testimonial__stars { color: var(--c-navy); letter-spacing: 0.2em; margin-bottom: 0.8rem; } .testimonial__quote { font-style: italic; font-size: 1.05rem; line-height: 1.55; } .testimonial__name { margin-top: 0.9rem; font-family: var(--f-display); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 899px) { .testimonial { text-align: center; } } @media (min-width: 900px) { .testimonials { grid-template-columns: repeat(3, 1fr); } .testimonial__quote { font-size: 1.1rem; } } /* ---- About teaser / CTA banner ------------------------------------------------ */ .cta-banner { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; } .cta-banner__title { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.9rem, 7.5vw, 3.4rem); max-width: 620px; } @media (max-width: 699px) { .cta-banner { align-items: center; text-align: center; } } @media (min-width: 700px) { .cta-banner { flex-direction: row; align-items: center; gap: var(--space-md); } .cta-banner__title { font-size: clamp(2rem, 4.5vw, 3.4rem); } } /* ---- Footer ----------------------------------------------------------------- */ .site-footer { background: var(--c-black); color: var(--c-white); padding: var(--space-lg) 0 var(--space-md); } /* Mobile: brand blurb sits full-width up top, then Site/Shop/Contact run 3-across below it instead of stacking into one long scroll. */ .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md) 0.75rem; margin-bottom: var(--space-md); } .footer-grid > .footer-col:first-child { grid-column: 1 / -1; } .footer-col { display: flex; flex-direction: column; gap: 0.85rem; } .footer-col h4 { font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(248,246,242,0.55); margin-bottom: 0.4rem; } .footer-col a { color: var(--c-white); text-decoration: none; opacity: 0.85; transition: opacity 0.25s ease; padding: 0.15rem 0; } .footer-col a:hover { opacity: 1; } .footer-brand { font-family: var(--f-display); font-size: 1.8rem; text-transform: uppercase; margin-bottom: 0.6rem; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-sm); border-top: 1px solid var(--c-line-light); font-size: 0.78rem; color: rgba(248,246,242,0.55); flex-wrap: wrap; gap: 1rem; } .footer-socials { display: flex; gap: 1.25rem; } .footer-socials a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .footer-socials img { width: 20px; filter: invert(1); opacity: 0.7; transition: opacity 0.2s ease; } .footer-socials a:hover img { opacity: 1; } @media (max-width: 899px) { .footer-col { align-items: center; text-align: center; } .footer-bottom { justify-content: center; text-align: center; } .footer-socials { justify-content: center; } } .footer-credit { margin-top: 1.5rem; text-align: center; font-size: 0.72rem; letter-spacing: 0.03em; color: rgba(248,246,242,0.4); } .footer-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(248,246,242,0.35); opacity: 0.9; transition: opacity 0.2s ease; } .footer-credit a:hover { opacity: 1; } @media (min-width: 900px) { .site-footer { padding: var(--space-xl) 0 var(--space-md); } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); } .footer-grid > .footer-col:first-child { grid-column: auto; } .footer-bottom { padding-top: var(--space-md); } .footer-socials img { width: 18px; } } /* ---- Shop: editorial scent index (mobile-first) -------------------------------- */ /* --nav-offset is 0 on mobile because the nav is in-flow there; no dead space. */ .shop-hero { padding: calc(var(--nav-offset) + var(--space-md)) 0 var(--space-sm); text-align: center; background: var(--c-white); } .shop-hero__title { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.6rem, 11vw, 5.5rem); } .shop-hero__sub { max-width: 540px; margin: 1rem auto 0; color: var(--c-muted); } @media (min-width: 860px) { .shop-hero { padding: calc(var(--nav-offset) + var(--space-md)) 0 var(--space-lg); } } .product-grid { display: flex; flex-direction: column; counter-reset: shopindex; } .product-card { counter-increment: shopindex; position: relative; padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--c-line-dark); } .product-grid .product-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .product-card.is-highlighted { background: rgba(10,10,10,0.035); border-radius: 18px; padding: var(--space-sm); } .product-card__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #efece6; border-radius: 20px; margin-bottom: -2.6rem; } .product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0.6rem 0.6rem 2.8rem; cursor: zoom-in; } .product-card__img--front { transition: opacity 0.35s ease; z-index: 1; } .product-card__img--alt { opacity: 0; z-index: 2; transition: opacity 0.35s ease; } .product-card:hover .product-card__img--alt, .product-card:focus-within .product-card__img--alt { opacity: 1; } /* Muscle rub has no usable alt image — disable hover flip */ #muscle-rub .product-card__img--alt { opacity: 0 !important; pointer-events: none; } /* Muscle rub: tight crop fills the card cleanly, shifted right to show jar */ #muscle-rub .product-card__img { object-fit: cover; padding: 0; object-position: left center; } .product-card__media::before { content: counter(shopindex, decimal-leading-zero); position: absolute; top: 1rem; right: 1rem; z-index: 3; font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.08em; background: var(--c-white-pure); color: var(--c-black); padding: 0.35rem 0.6rem; border-radius: 100px; } .product-card__badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; background: var(--c-navy); color: var(--c-white); font-family: var(--f-display); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.7rem; border-radius: 100px; } .product-card__body { position: relative; z-index: 2; padding: 0 0.4rem; } .product-card__name { display: inline-block; background: var(--c-white); padding: 0.2rem 0.8rem 0.2rem 0; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.02; margin-bottom: 0.5rem; } .product-card__tagline { font-style: italic; color: var(--c-muted); margin-bottom: 0.7rem; font-size: 1.02rem; } .product-card__desc { font-size: 0.95rem; color: var(--c-muted); margin-bottom: 1rem; max-width: 480px; } .product-card__notes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.65rem; } .product-card__notes span { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--f-display); border: 1px solid var(--c-line-dark); padding: 0.3rem 0.6rem; border-radius: 100px; color: var(--c-muted); } .product-card__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: var(--space-sm); } .product-card__badges span { font-size: 0.68rem; letter-spacing: 0.05em; font-family: var(--f-display); color: var(--c-navy); border: 1.5px solid var(--c-navy); padding: 0.28rem 0.6rem; border-radius: 100px; } #muscle-rub .product-card__badges span { color: rgba(248,246,242,.85); border-color: rgba(248,246,242,.4); } .product-card__row { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: var(--space-sm); } .product-card__price { font-family: var(--f-display); font-size: 1.3rem; } .product-card__size { font-size: 0.78rem; color: var(--c-muted); } .product-card__cta { display: inline-flex; align-items: center; gap: 0.5rem; width: auto; justify-content: flex-start; background: none; border: none; border-bottom: 1.5px solid var(--c-black); border-radius: 0; padding: 0.3rem 0; min-height: 44px; font-family: var(--f-display); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.07em; color: var(--c-black); } .product-card__cta::after { content: '\2192'; transition: transform 0.25s ease; } .product-card__cta:hover { transform: none; background: none; } .product-card__cta:hover::after { transform: translateX(5px); } /* Muscle Rub breaks the rhythm — it's a different category, it should look like one */ #muscle-rub { background: var(--c-navy); color: var(--c-white); border-radius: 22px; border-bottom: none; padding: var(--space-sm); } #muscle-rub .product-card__media { background: rgba(248,246,242,0.08); } #muscle-rub .product-card__name { background: var(--c-navy); color: var(--c-white); } #muscle-rub .product-card__tagline, #muscle-rub .product-card__desc { color: rgba(248,246,242,0.75); } #muscle-rub .product-card__notes span { border-color: var(--c-line-light); color: rgba(248,246,242,0.75); } #muscle-rub .product-card__price { color: var(--c-white); } #muscle-rub .product-card__size { color: rgba(248,246,242,0.7); } #muscle-rub .product-card__cta { color: var(--c-white); border-bottom-color: var(--c-white); } #muscle-rub .product-card__badge { background: var(--c-white-pure); color: var(--c-black); } @media (min-width: 620px) { #muscle-rub { padding: var(--space-md); } } @media (min-width: 860px) { .product-card { display: flex; align-items: center; gap: var(--space-xl); } .product-card:nth-child(even):not(#muscle-rub) { flex-direction: row-reverse; } .product-card__media { flex: 0 0 44%; margin-bottom: 0; } .product-card__media::before { top: 1.2rem; right: 1.2rem; } .product-card__body { flex: 1; padding: 0; } .product-card__name { font-size: clamp(2.2rem, 3.4vw, 3rem); display: block; background: none; padding: 0; } .product-card__desc { max-width: 420px; } #muscle-rub { padding: var(--space-lg); } } /* ---- About page ---------------------------------------------------------------- */ /* Same mobile-first idea as the home hero: whole photo on phones, immersive cropped banner with overlaid copy from 900px up. */ .page-hero { position: relative; display: flex; flex-direction: column; background: var(--c-navy-deep); } .page-hero__media { position: relative; width: 100%; } .page-hero__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center; } .page-hero__copy { position: relative; z-index: 1; /* Longhands only, so .wrap keeps supplying the horizontal gutter */ padding-top: 1.6rem; padding-bottom: 2.2rem; text-align: left; } @media (max-width: 899px) { .page-hero__copy { text-align: center; } } .page-hero__copy .eyebrow { color: #E8B86D; display: block; margin-bottom: 0.45rem; letter-spacing: 0.18em; } .page-hero__copy h1 { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.1rem, 8.5vw, 5rem); line-height: 0.98; color: #E8B86D; margin: 0; } @media (min-width: 900px) { .page-hero { display: block; height: 70vh; max-height: 780px; min-height: 380px; overflow: hidden; } .page-hero__media { position: absolute; inset: 0; } .page-hero__media img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 70%; } .page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(6,9,20,0.72) 100%); pointer-events: none; } .page-hero__copy { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding-bottom: 2.5rem; } .page-hero__copy h1 { line-height: 0.95; text-shadow: 0 2px 18px rgba(0,0,0,0.45); } } .about-stats { padding: 2.25rem 0; border-bottom: 1px solid var(--c-line-dark); } /* Three-across from the smallest phone up: short, centered stat + label pairs read fine side by side even at ~100px per column. Desktop keeps its original left-aligned column look (below, at 700px+). */ .about-intro__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .about-intro__facts > div { display: flex; flex-direction: column; gap: 0.35rem; } .about-intro__facts > div span:last-child { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); } .about-intro__num { font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.4rem); } @media (max-width: 699px) { .about-intro__facts { text-align: center; } .about-intro__facts > div { align-items: center; } } @media (max-width: 420px) { .about-intro__facts > div span:last-child { font-size: 0.72rem; letter-spacing: 0.03em; } } @media (min-width: 700px) { .about-intro__facts { gap: var(--space-md); } } .about-story { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; } .about-story__quote { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.6rem, 7vw, 2.8rem); line-height: 1.08; } .about-story__body p { margin-bottom: 1.1rem; color: var(--c-muted); } .about-story__portrait { margin-top: var(--space-md); } .about-story__portrait img { width: 100%; max-width: 100%; aspect-ratio: 4 / 5; height: auto; border-radius: 18px; object-fit: cover; display: block; margin-bottom: 1rem; } .about-story__portrait p { font-size: 0.9rem; color: var(--c-muted); margin: 0; max-width: 300px; } .about-story__portrait-name { font-family: var(--f-body); font-weight: 700; font-size: 1rem; color: var(--c-black); margin: 0 0 0.15rem !important; max-width: none !important; } .about-story__portrait-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); margin: 0 0 0.75rem !important; max-width: none !important; } .about-story__heading { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.15; margin-bottom: 1.2rem; color: var(--c-black); } .about-story__tagline { font-family: var(--f-body); font-weight: 700; color: var(--c-black); margin-bottom: 0 !important; } @media (min-width: 900px) { .about-story { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } .about-story__quote { font-size: clamp(1.8rem, 3.6vw, 2.8rem); } .about-story__portrait { margin-top: var(--space-lg); } .about-story__portrait img { max-width: 380px; } } .standards { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); } .standards__item { border-top: 1px solid var(--c-line-light); padding-top: var(--space-sm); } .standards__item h4 { font-family: var(--f-display); text-transform: uppercase; font-size: 1.05rem; margin-bottom: 0.5rem; } .standards__item p { font-size: 0.92rem; color: rgba(248,246,242,0.7); } /* "Why It Works" sits on warm tan bg */ .section--cream .standards__item { border-top-color: rgba(10,10,10,0.25); } .section--cream .standards__item h4 { color: #1e1a14; } .section--cream .standards__item p { color: #3a3228; } .section--cream .section-title, .section--cream .section-sub { color: #1e1a14; } @media (min-width: 560px) { .standards { grid-template-columns: 1fr 1fr; gap: var(--space-md); } } @media (min-width: 900px) { .standards { grid-template-columns: repeat(4, 1fr); } } .gallery-strip { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } /* Mobile shows these lifestyle shots whole rather than cropping them to fill */ .gallery-strip img { width: 100%; height: auto; border-radius: 16px; } @media (max-width: 899px) { .gallery-strip > div { align-items: center; text-align: center; } .gallery-strip > div .btn { align-self: center !important; } } @media (min-width: 900px) { .gallery-strip { grid-template-columns: 1.2fr 1fr; } .gallery-strip img { height: 100%; object-fit: cover; } } .city-feature { position: relative; border-radius: 18px; overflow: hidden; } .city-feature img { width: 100%; height: auto; display: block; } .city-feature__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-lg) 1.25rem var(--space-sm); background: linear-gradient(to top, rgba(10,10,10,0.85), rgba(10,10,10,0) 80%); } .city-feature__line { font-family: var(--f-display); text-transform: uppercase; color: var(--c-white); font-size: clamp(1.8rem, 7vw, 3.6rem); line-height: 1.04; margin-bottom: 0.7rem; } .city-feature__sub { max-width: 420px; color: rgba(248,246,242,0.85); } @media (min-width: 900px) { .city-feature img { height: 620px; object-fit: cover; } .city-feature__copy { padding: var(--space-xl) var(--space-md) var(--space-md); } } /* ---- Contact page --------------------------------------------------------------- */ .contact-hero { padding: calc(var(--nav-offset) + var(--space-md)) 0 var(--space-md); text-align: center; } .contact-hero__title { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(2.4rem, 10vw, 5rem); } .contact-hero__sub { max-width: 560px; margin: 1rem auto 0; color: var(--c-muted); } .contact-reasons { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--c-line-dark); border: 1px solid var(--c-line-dark); margin-bottom: var(--space-lg); } .contact-reasons__item { background: var(--c-white); padding: var(--space-sm); text-align: center; } .contact-reasons__item h4 { font-family: var(--f-display); text-transform: uppercase; font-size: 0.95rem; margin-bottom: 0.5rem; } .contact-reasons__item p { font-size: 0.85rem; color: var(--c-muted); } @media (min-width: 560px) { .contact-reasons { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .contact-hero { padding: calc(var(--nav-offset) + var(--space-md)) 0 var(--space-lg); } .contact-reasons { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--space-xl); } .contact-reasons__item { padding: var(--space-md) var(--space-sm); } } .contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .contact-form { display: grid; gap: 1.1rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field label { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } .field input, .field select, .field textarea { font-family: var(--f-body); /* 16px minimum keeps iOS Safari from zooming the page on focus */ font-size: 1rem; width: 100%; min-height: 48px; padding: 0.85rem 1rem; border: 1.5px solid var(--c-line-dark); border-radius: 10px; background: var(--c-white-pure); color: var(--c-black); } .field textarea { min-height: 130px; resize: vertical; } .field.is-hidden { display: none; } .form-status { font-size: 0.85rem; color: var(--c-muted); min-height: 1.2em; opacity: 0; transition: opacity 0.2s ease; } .form-status.is-visible { opacity: 1; } .form-status.is-error { color: #b3433a; } .contact-side { display: flex; flex-direction: column; gap: var(--space-md); } .contact-side__block { border-top: 1px solid var(--c-line-dark); padding-top: var(--space-sm); } .contact-side__block h4 { font-family: var(--f-display); text-transform: uppercase; font-size: 0.9rem; margin-bottom: 0.5rem; } .contact-side__socials { display: flex; gap: 0.5rem; margin-top: 0.6rem; } .contact-side__socials a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .contact-side__socials img { width: 22px; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } } /* ========================================================================== TICKER ========================================================================== */ .ticker-wrap { background: var(--c-navy); color: var(--c-white); overflow: hidden; display: flex; font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0; position: relative; /* Below .site-nav (200) so the open drawer and its scrim cover the ticker rather than having it punch through while the menu is open. */ z-index: 100; } .ticker-track { display: flex; flex-shrink: 0; white-space: nowrap; will-change: transform; animation: ticker-scroll 32s linear infinite; } .ticker-wrap:hover .ticker-track { animation-play-state: paused; } .ticker-item { display: inline-block; padding: 0 1rem; } .ticker-item strong { color: #e07012; } @media (min-width: 700px) { .ticker-wrap { font-size: 0.78rem; letter-spacing: 0.1em; padding: 0.55rem 0; } .ticker-item { padding: 0 1.2rem; } } @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } /* ========================================================================== BENEFITS SECTION ========================================================================== */ .benefits-section { background: var(--c-white); } .benefits-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-sm); } .benefit-card { padding: var(--space-sm); border: 1.5px solid var(--c-line-dark); border-radius: 8px; } .benefit-card__icon { margin-bottom: 1rem; color: var(--c-navy); } .benefit-card h4 { font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--c-black); } .benefit-card p { font-size: 0.88rem; color: var(--c-muted); line-height: 1.6; margin: 0; } @media (min-width: 540px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-top: var(--space-md); } } @media (min-width: 900px) { .benefits-grid { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== HERO — no sliding products (stage removed) ========================================================================== */ .hero-motion__stage { display: none; } /* ========================================================================== PRODUCT IMAGE LIGHTBOX ========================================================================== */ .img-lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(10,10,10,0.88); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; cursor: zoom-out; } .img-lightbox.is-open { opacity: 1; pointer-events: all; } .img-lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 8px; transform: scale(0.94); transition: transform 0.25s ease; } .img-lightbox.is-open img { transform: scale(1); } .img-lightbox__close { position: absolute; top: 0.5rem; right: 0.5rem; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; } .img-lightbox__close:hover { opacity: 1; } @media (min-width: 700px) { .img-lightbox__close { top: 1.2rem; right: 1.4rem; } }