/* Mobile-only section order and hero stability. Loaded after the Next.js stylesheet so these rules win. Desktop (>850px) is untouched. */ @media (max-width: 850px) { main { display: flex; flex-direction: column; } /* Never let a section shrink below its natural height in the flex column */ main > * { flex: 0 0 auto; } /* On mobile the visible flow is: video hero -> gallery -> story -> details -> wear -> order -> footer (.hero, .marquee and .film are display:none here already) */ /* main > * gives every child a default so a NEW section can never fall to order:0 and jump above the video hero. Class rules win on specificity. */ main > * { order: 6; } .mobile-video-hero { order: 1; } .gallery { order: 2; } .story { order: 3; } .details { order: 4; } .wear { order: 5; } .faq { order: 6; } .order { order: 7; } main > footer { order: 8; } /* Gallery now sits directly under the film, story follows it */ .gallery { border-top: 0; } .story { border-top: 4px solid #b79b88; margin-top: 0; padding-top: 90px; } .details { border-top: 8px solid #b79b88; margin-top: 0; } } /* Reserve the hero's height from first paint so nothing above it flashes in while the video is still loading. */ @media (max-width: 850px) { .mobile-video-hero { min-height: 640px; height: 100svh; background: #75665e; contain-intrinsic-size: 100svh; } } /* ---- Header: show the early-access CTA on mobile ---- */ @media (max-width: 850px) { .nav-cta { display: flex !important; align-items: center; gap: 7px; padding: 8px 0; font: 600 9px Manrope, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid rgba(36, 28, 26, 0.45); white-space: nowrap; flex: 0 0 auto; } .nav-cta svg { width: 13px; height: 13px; } nav .brand { flex: 0 1 auto; min-width: 0; } } @media (max-width: 380px) { .nav-cta { font-size: 8px; letter-spacing: 0.1em; gap: 5px; } .nav-cta svg { width: 11px; height: 11px; } } /* ---- Story: tighten the gap above "01 - THE MATERIAL" ---- */ @media (max-width: 850px) { .story { padding-top: 44px; } .story-number { display: block; margin-bottom: 20px; opacity: 0.75; } .story-copy .eyebrow { margin-bottom: 16px; } } /* ---- Hero video: poster covers the frame until the film is ready ---- */ @media (max-width: 850px) { .mobile-video-hero video { background: #75665e url("/campaign/hero-v2.webp") center / cover no-repeat; } } /* ---- UAE phone field: fixed +971 prefix ---- */ label:has(> input.uae-phone) { position: relative; display: block; } label:has(> input.uae-phone)::after { content: "+971"; position: absolute; left: 14px; bottom: 0; height: 100%; display: flex; align-items: flex-end; padding-bottom: 14px; font: 500 14px Manrope, sans-serif; color: #7d6a5e; pointer-events: none; } input.uae-phone { padding-left: 58px !important; } /* Fallback for browsers without :has() - the placeholder still carries the format */ @supports not selector(label:has(> input)) { input.uae-phone { padding-left: 14px !important; } } /* ---- Header: align "Join early access" text with the HIMALAYAN wordmark ---- The wordmark is a column: HIMALAYAN (13px) + 5px gap + WHOOP (6px). Its box centres on the nav, so HIMALAYAN sits 5.5px above centre. An 11px bottom margin (6 + 5) lifts the CTA by exactly half that. */ @media (max-width: 850px) { nav { align-items: center; } .nav-cta { align-self: center; margin-bottom: 11px; } } /* ================= Story section: 3D material stage ================= Card sits in normal flow with hard px bounds. Nothing is sized as a percentage of an ancestor, so it cannot blow out if a rule is beaten. */ .story{position:relative;display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(26px,4.5vw,68px);align-items:center; min-height:auto!important; padding:clamp(72px,8vw,120px) 5.5vw!important; background:linear-gradient(150deg,#3b302b,#5d4d44 55%,#7d6a5e)!important; color:#f7f2eb;overflow:hidden} .story-stage{position:relative!important;display:flex!important; align-items:center;justify-content:center; min-height:clamp(330px,34vw,430px);perspective:1200px;width:100%} .story-card{position:relative!important;z-index:2; width:min(72%,270px);max-width:270px;aspect-ratio:3/4;max-height:380px; border-radius:18px;overflow:hidden;transform-style:preserve-3d; box-shadow:0 30px 60px rgba(15,10,8,.55); animation:storyspin 11s ease-in-out infinite} .story-card img{width:100%!important;height:100%!important; max-width:100%;object-fit:cover;display:block} @keyframes storyspin{0%,100%{transform:rotateY(-17deg) rotateX(6deg) rotateZ(-3deg)} 50%{transform:rotateY(17deg) rotateX(-4deg) rotateZ(3deg)}} .sd{position:absolute;top:50%;left:50%;z-index:1; width:min(72%,270px);max-width:270px;aspect-ratio:3/4;max-height:380px; border-radius:18px;background:rgba(20,14,11,.42)} .sd2{transform:translate(-46%,-48%) rotate(5deg)} .sd3{transform:translate(-42%,-45%) rotate(10deg)} .sc-stitch{position:absolute;top:14px;bottom:14px;width:0;z-index:3; border-left:1.5px dashed rgba(255,255,255,.55)} .sc-stitch.l{left:14px}.sc-stitch.r{right:14px} .sc-sheen{position:absolute;top:-60%;left:-130%;width:55%;height:230%;z-index:4; transform:rotate(22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:storysheen 11s ease-in-out infinite} @keyframes storysheen{0%,100%{left:-130%}50%{left:160%}} .sfloat{position:absolute;z-index:5;background:rgba(28,20,17,.74); border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 14px; text-align:center;animation:storyfloat 6s ease-in-out infinite} .sfloat b{display:block;font:400 22px/1 "Playfair Display",Georgia,serif;color:#f5ede3} .sfloat span{font:500 9px Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#c3ad9b} .sf1{top:6%;right:2%}.sf2{bottom:8%;left:2%;animation-delay:2.8s} @keyframes storyfloat{50%{transform:translateY(-11px)}} .story-copy{min-width:0} .story-copy .story-number{color:#c3ad9b!important;margin-bottom:6px} .story-copy .eyebrow{color:#9b8371!important} .story-copy h2{color:#f7f2eb!important;margin-top:0} .story-copy h2 em{color:#dcc7b2;font-style:italic} .story-copy p{color:#e2d6ca!important;max-width:44ch} .palette{display:flex;height:9px;border-radius:5px;overflow:hidden;margin:24px 0 9px;max-width:330px} .palette i{flex:1;animation:palbreathe 7s ease-in-out infinite} .palette i:nth-child(1){background:#f3ece2} .palette i:nth-child(2){background:#d9cbbc;animation-delay:.5s} .palette i:nth-child(3){background:#a08d7d;animation-delay:1s} .palette i:nth-child(4){background:#6f6157;animation-delay:1.5s} @keyframes palbreathe{50%{flex-grow:1.5}} .palette-cap{font:500 10px Manrope,sans-serif!important;letter-spacing:.14em;text-transform:uppercase; color:#a8917f!important;margin:0} .craft-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .craft-chips span{font:500 10.5px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase; color:#e2d6ca;border:1px solid rgba(226,214,202,.32);border-radius:22px;padding:7px 14px} @media (max-width:850px){ .story{grid-template-columns:minmax(0,1fr)!important;gap:32px; padding:46px 22px 62px!important;text-align:left} .story-stage{min-height:300px;order:-1} .story-card,.sd{width:min(64%,220px);max-width:220px;max-height:300px} .story-copy h2{font-size:clamp(29px,8vw,42px)} .sf1{top:2%;right:0}.sf2{bottom:4%;left:0} } @media (prefers-reduced-motion:reduce){ .story-card,.sc-sheen,.sfloat,.palette i{animation:none!important} .story-card{transform:rotateY(-8deg) rotateX(3deg)} } /* ================= WHOOP model field ================= */ .model-field{position:relative} .model-label{display:flex;align-items:center;gap:8px} .model-help{width:17px;height:17px;min-width:17px;border-radius:50%;border:1px solid #a8917f; background:transparent;color:#8a7264;font:600 11px Manrope, "DM Sans", sans-serif;line-height:1;padding:0;cursor:pointer} .model-help:hover{background:#927867;border-color:#927867;color:#fff} .model-pop{margin-top:12px;background:#fff;border:1px solid #d9c9bd;border-left:3px solid #927867; padding:16px 18px;text-transform:none;letter-spacing:0} .model-pop[hidden]{display:none} .mp-h{margin:0 0 12px;font-size:13px;font-weight:600;color:#463a34} .mp-row{display:flex;gap:11px;margin-bottom:11px} .mp-n{width:19px;height:19px;min-width:19px;border-radius:50%;background:#efe6db;color:#7d6a5e; font-size:11px;display:flex;align-items:center;justify-content:center} .mp-row b{display:block;font-size:12.5px;font-weight:600;color:#463a34;margin-bottom:2px} .mp-row p{margin:0;font-size:12.5px;line-height:1.6;color:#6d5c52} .mp-f{margin:0;padding-top:10px;border-top:1px solid #eadfd4;font-size:12px;color:#8a7a70} /* ---- Founder credit in the footer ---- */ .founder-credit{margin:10px 0 0;font-size:11px;letter-spacing:.04em;color:#8a7a70} .founder-credit a{color:#7d6a5e;text-decoration:none;border-bottom:1px solid rgba(125,106,94,.4)} .founder-credit a:hover{color:#463a34;border-bottom-color:#463a34} /* ================= Stop sideways drag ================= Several decorative elements sit at negative offsets and .gallery .slider uses 100vw (which includes the scrollbar). overflow-x:clip contains them WITHOUT creating a scroll container, so sticky nav and scrollIntoView keep working - which overflow:hidden on body would break. */ html { overflow-x: clip; } body { overflow-x: clip; max-width: 100%; } .gallery, .details, .wear, .order, .story, .configure, .mobile-video-hero { overflow-x: clip; } .gallery .slider { width: 100% !important; } img, video, svg { max-width: 100%; } /* ---- Confirmation panel ---- */ .success { scroll-margin-top: 96px; scroll-margin-bottom: 96px; } .success-redirect { margin: 14px 0 0; font: 500 11px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #a08d7d; } /* ================= FAQ ================= Built on
/: native, keyboard accessible, and it works before React hydrates - no JS to fail. */ .faq{background:#f7f2eb;padding:clamp(72px,8vw,118px) 5.5vw} .faq-wrap{max-width:820px;margin:0 auto} .faq-head{margin-bottom:clamp(28px,3.5vw,44px)} .faq-head .eyebrow{color:#927867;margin:0 0 8px} .faq-head h2{margin:0 0 14px;color:#463a34} .faq-sub{margin:0;font-size:15px;line-height:1.7;color:#6d5c52;max-width:54ch} .faq-list{border-top:1px solid #ddd0c5} .faq-item{border-bottom:1px solid #ddd0c5} .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start; justify-content:space-between;gap:20px;padding:22px 0; font:400 clamp(16px,1.7vw,19px)/1.45 "Playfair Display",Georgia,serif;color:#463a34} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:#927867} .faq-item summary:focus-visible{outline:2px solid #927867;outline-offset:3px} .faq-mark{position:relative;flex:0 0 auto;width:15px;height:15px;margin-top:5px} .faq-mark::before,.faq-mark::after{content:"";position:absolute;background:#927867; transition:transform .22s ease,opacity .22s ease} .faq-mark::before{top:7px;left:0;width:15px;height:1.5px} .faq-mark::after{left:7px;top:0;width:1.5px;height:15px} .faq-item[open] .faq-mark::after{transform:rotate(90deg);opacity:0} .faq-a{padding:0 0 24px;max-width:64ch} .faq-a p{margin:0;font-size:14.5px;line-height:1.78;color:#6d5c52} @media (max-width:850px){ .faq{padding:52px 22px 62px} .faq-item summary{gap:14px;padding:19px 0} .faq-a p{font-size:14px} } @media (prefers-reduced-motion:reduce){ .faq-mark::before,.faq-mark::after{transition:none} } /* ================= Mobile hero layout ================= Previously the copy was absolutely positioned a fixed distance up from the hero's bottom edge, and the hero was sized in svh. Safari and Chrome resolve viewport units differently as the toolbar expands/collapses, so that bottom edge is not reliably where the visible area ends - the headline slid under the fixed bar in Safari. The hero is now a flex column that bottom-aligns its copy, with real padding reserving space for the bar. No viewport arithmetic, so both browsers agree. */ @media (max-width: 850px) { .mobile-video-hero { display: flex !important; flex-direction: column; justify-content: flex-end; height: 100svh; max-height: 100dvh; min-height: 520px; padding: 0 0 calc(118px + env(safe-area-inset-bottom)); box-sizing: border-box; } .mobile-video-copy { position: static !important; bottom: auto !important; left: auto !important; right: auto !important; padding: 0 22px; width: 100%; box-sizing: border-box; } .mobile-video-copy h1 { font-size: clamp(29px, 8.4vw, 41px) !important; line-height: 1.04 !important; } .mobile-video-copy > a { margin-top: 16px; } /* the cue sat at 28px - directly under the bar */ .mobile-video-scroll { bottom: calc(84px + env(safe-area-inset-bottom)) !important; } } /* Short screens: shrink rather than collide */ @media (max-width: 850px) and (max-height: 700px) { .mobile-video-hero { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } .mobile-video-copy h1 { font-size: clamp(26px, 7.4vw, 34px) !important; } .mobile-video-scroll { display: none; } } /* ================= Font normalisation ================= The build referenced Playfair Display, Manrope and DM Sans but never loaded them, and several rules named a family with no fallback at all - so each section resolved to a different system substitute. The families are now loaded in ; these rules give every one of them a consistent stack. */ :root{ --ff-display: "Playfair Display", Georgia, "Times New Roman", serif; --ff-label: "Manrope", "DM Sans", system-ui, -apple-system, sans-serif; --ff-body: "DM Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif; } body{font-family:var(--ff-body)} /* Display type */ h1,h2,h3, .story-copy h2,.faq-head h2,.mobile-video-copy h1, .order-intro h2,.wear-copy h2,.details-copy h2,.gallery-head h2,.film-copy h2, .success h3,.price{font-family:var(--ff-display)} /* Label / eyebrow type */ .eyebrow,.story-number,.nav-cta,.brand,.wordmark b,.wordmark small, .palette-cap,.craft-chips span,.sfloat span,.success-redirect, .form-head span,.mobile-video-copy p,.mobile-video-scroll, .mobile-video-brand span,.mobile-video-brand b,.gallery-head .autoplay-status, .slide span,.film-label,.launch-chip span,.hero-proof span, .compat,.model-label,.model-help,label{font-family:var(--ff-label)} /* Body copy */ p,li,input,select,textarea,button, .faq-a p,.faq-sub,.mp-h,.mp-row p,.mp-row b,.mp-f, .story-copy p,.details-intro,.spec p,.lead,.gallery-deck, .price-note,.early-note,.form-foot,.promise small,.promise b{font-family:var(--ff-body)} /* Serif accents inside display type stay serif */ .story-copy h2 em,.mobile-video-copy h1 em,.wear-copy h2 em, .faq-item summary{font-family:var(--ff-display)} /* ---- language switch + suggestion bar (both locales) ---- */ .nav-right { display: flex; align-items: center; gap: 16px; } .lang-switch { font: 500 10px "Manrope", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7d6a5e; text-decoration: none; border: 1px solid rgba(125,106,94,.4); border-radius: 20px; padding: 6px 12px; white-space: nowrap; } .lang-switch:hover { background: #927867; border-color: #927867; color: #fff; } @media (max-width: 850px) { .nav-right { gap: 10px; } .lang-switch { font-size: 9px; padding: 5px 9px; } } #lang-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 13px 18px calc(13px + env(safe-area-inset-bottom)); background: #241c1a; color: #f7f2eb; font: 400 13px "Tajawal", system-ui, sans-serif; } #lang-bar a { color: #f7f2eb; font-weight: 500; } #lang-bar button { background: none; border: 0; color: #a08d7d; cursor: pointer; font: 400 12px "Tajawal", system-ui, sans-serif; padding: 4px 6px; } /* keep the switcher grouped with the CTA rather than floating mid-nav */ nav { align-items: center; } nav .lang-switch { margin-inline-start: auto; margin-inline-end: 0; } @media (max-width: 850px) { /* wordmark stacks HIMALAYAN + 5px gap + WHOOP, so its first line sits 5.5px above the nav centre - an 11px bottom margin levels the two. */ nav .lang-switch { margin-bottom: 11px; align-self: center; } } /* ---- human check + guard messages ---- */ .guard-human { margin-top: 4px; } .guard-msg { margin: 12px 0; } [dir="rtl"] .guard-human span { font-size: 14.5px; } /* ================= iOS focus-zoom fix ================= iOS Safari zooms the page whenever a focused input's text is under 16px. The form used 14px, so tapping a field zoomed in and the page became wider than the screen - the sideways drift while typing. 16px is the threshold, so every field gets at least 16px. Pinch-zoom still works. */ input, select, textarea, .form-card input, .form-card select, .form-card textarea { font-size: 16px !important; } /* Belt and braces: nothing inside the form may exceed the viewport */ .form-card, .form-card form, .form-card label, .form-row, .form-card input, .form-card select { max-width: 100%; min-width: 0; box-sizing: border-box; } .form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } @media (max-width: 850px) { .form-row { grid-template-columns: minmax(0,1fr); } } /* the model help panel lives inside a label - keep it inside the card */ .model-pop { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; } /* ---- site link nav above the footer ---- */ /* Defensive: the site stylesheet styles the bare