/* Marvans — v2 "like Apple": white / light-gray / black tiles, big centered type, thin translucent nav, one accent colour (Marvans magenta), lots of space. 1 base · 2 type · 3 buttons + links · 4 global nav · 5 local nav · 6 tiles · 7 tile grid 8 story (pinned) · 9 explore the inside · 10 sections · 11 features · 12 steps · 13 store 14 repairs page · 15 faq · 16 accessories · 17 contact · 18 footer · 19 dock · 20 reveal · 21 check mode */ /* ---------- 1 base ---------- */ /* (Oct 31, "like dialedweb", light version: Sir wants WHITE kept) white / light-gray base, dark text, Apple blue links, burgundy accent. Added: light frosted-glass tokens (white glass fill, shiny silver edge, soft shadows) used by css/dialed.css. dialedweb measured (reference-dialedweb/NOTES.md): glass ring 1px, inner glow 72px, card radius 25 (15 phones). */ :root{ --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#86868b; --line:#d2d2d7; --white:#fff; --gray:#f5f5f7; --black:#000; --dark-ink:#f5f5f7; --dark-ink-2:#a1a1a6; --mag:#800020; --mag-hover:#5E0018; --mag-dark:#B8324F; /* magenta on light / on black */ --link:#0066cc; --link-dark:#2997ff; --focus:#0071e3; /* Apple blue: text links + focus rings (Sir, Oct 24) */ --card-dark:#1c1c1e; --line-dark:rgba(235,235,245,.16); --ink-on-dark:#f5f5f7; /* Apple deep grays */ --glass-fill:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.66)); --glass-ring:inset 0 0 0 1px rgba(255,255,255,.9); --glass-glow:inset 0 1px 0 #fff,inset 0 0 72px rgba(255,255,255,.55); --glass-shadow:var(--glass-glow),0 1px 2px rgba(0,0,0,.04),0 18px 40px -22px rgba(0,0,0,.22); --glass-shadow-h:var(--glass-glow),0 2px 4px rgba(0,0,0,.05),0 28px 56px -24px rgba(128,0,32,.32); --glass-edge:linear-gradient(135deg,#fff 0%,#c3c8d1 18%,#f4f5f8 34%,#9ea5b1 52%,#e9ebef 68%,#aeb4bf 84%,#fff 100%); --glass-edge-hot:linear-gradient(135deg,#fff 0%,#d9a3b1 20%,#f6eef0 36%,#800020 54%,#efe3e6 70%,#c27a8d 86%,#fff 100%); --glass-edge-dark:linear-gradient(150deg,rgba(255,255,255,.32),rgba(255,255,255,.07) 30%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.16)); --glass-r:25px; --font:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif; --ease:cubic-bezier(.28,.11,.32,1); /* Apple's gentle ease */ --spring:cubic-bezier(.22,1,.36,1); --w:1024px; --gut:22px; --gnav:48px; --lnav:52px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--lnav) + 12px)} html.lenis,html.lenis body{height:auto} body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.022em; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit} h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0} ul,ol{padding:0;list-style:none} ::selection{background:rgba(128,0,32,.2)} :focus-visible{outline:2px solid var(--mag);outline-offset:3px;border-radius:6px} .skip{position:absolute;left:12px;top:-60px;z-index:999;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px} .skip:focus{top:8px} .wrap{width:100%;max-width:calc(var(--w) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)} .center{text-align:center} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- 2 type ---------- */ .t-hero{font-size:clamp(40px,6.2vw,80px);line-height:1.05;font-weight:600;letter-spacing:-.015em;text-wrap:balance} .t-h1{font-size:clamp(40px,5vw,56px);line-height:1.07;font-weight:600;letter-spacing:-.005em;text-wrap:balance} .t-h2{font-size:clamp(32px,4vw,48px);line-height:1.08;font-weight:600;letter-spacing:-.003em;text-wrap:balance} .t-h3{font-size:clamp(24px,2.4vw,28px);line-height:1.14;font-weight:600;letter-spacing:.004em} .t-sub{font-size:clamp(21px,2.2vw,28px);line-height:1.14;font-weight:400;letter-spacing:.007em;margin-top:6px;text-wrap:balance} .t-body{font-size:clamp(17px,1.6vw,21px);line-height:1.38;color:var(--ink-2);letter-spacing:.011em;text-wrap:pretty} .t-eyebrow{font-size:clamp(17px,1.6vw,21px);font-weight:600;color:var(--mag);letter-spacing:.01em} .t-small{font-size:14px;color:var(--ink-2);letter-spacing:-.016em} .dark .t-body,.dark .t-small{color:var(--dark-ink-2)} .dark .t-eyebrow{color:var(--mag-dark)} .muted{color:var(--ink-2)} .dark .muted{color:var(--dark-ink-2)} /* ---------- 3 buttons + text links ---------- */ .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:22px} .ctas.left{justify-content:flex-start} .pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:30px;height:44px;padding:0 22px;border-radius:980px; background:var(--mag);color:#fff;font-size:17px;font-weight:400;letter-spacing:-.022em;border:1px solid var(--mag);white-space:nowrap;cursor:pointer; transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .12s ease-out} .pill svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .pill:active{transform:scale(.97)} .pill-line{background:transparent;color:var(--mag)} .dark .pill-line{color:#f5f5f7;border-color:#f5f5f7} /* audit Oct 24: #B8324F on black ~3.6:1 */ .pill-sm{height:32px;padding:0 15px;font-size:14px} @media (hover:hover){.pill:hover{background:var(--mag-hover);border-color:var(--mag-hover)} .pill-line:hover{background:var(--mag);color:#fff;border-color:var(--mag)} .dark .pill-line:hover{background:#f5f5f7;color:#000;border-color:#f5f5f7}} .more{display:inline-flex;align-items:baseline;gap:.28em;color:var(--mag);font-size:inherit} .more::after{content:"›";font-size:1.15em;line-height:0;transform:translateY(.02em);transition:transform .25s var(--ease)} .dark .more{color:var(--mag-dark)} @media (hover:hover){.more:hover{text-decoration:underline;text-underline-offset:.18em}.more:hover::after{transform:translate(2px,.02em)}} .links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin-top:18px;font-size:clamp(17px,1.6vw,21px)} .links.left{justify-content:flex-start} /* ---------- 4 global nav (thin, translucent) ---------- */ .gnav{position:relative;z-index:70;height:var(--gnav);background:rgba(8,8,8,.94);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:#e8e8ed} .home .gnav{position:sticky;top:0} .gnav-in{height:100%;max-width:calc(var(--w) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut);display:grid;grid-template-columns:1fr auto 1fr;align-items:center} .brand{justify-self:start;display:flex;align-items:center;height:100%} .brand img{width:88px;height:auto} .gnav-links{display:flex;gap:clamp(24px,3.4vw,44px)} .gnav-links a{font-size:12px;letter-spacing:-.01em;color:#e8e8ed;opacity:.8;transition:opacity .2s} .gnav-links a[aria-current]{opacity:1} @media (hover:hover){.gnav-links a:hover{opacity:1}} .gnav-cta{justify-self:end;width:44px;height:44px;margin-right:-12px;display:grid;place-items:center;color:#e8e8ed;opacity:.85} .gnav-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .burger{display:none;justify-self:end;width:44px;height:44px;margin-right:-12px;border:0;background:none;position:relative;cursor:pointer} .burger i{position:absolute;left:14px;right:14px;height:1.2px;background:#e8e8ed;border-radius:1px;transition:transform .3s var(--ease)} .burger i:first-child{top:18px}.burger i:last-child{top:25px} .menu-open .burger i:first-child{transform:translateY(3.5px) rotate(45deg)} .menu-open .burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)} .menu{position:fixed;inset:var(--gnav) 0 0;z-index:69;background:rgba(8,8,8,.98);color:#e8e8ed;padding:20px 40px calc(30px + env(safe-area-inset-bottom)); display:flex;flex-direction:column;justify-content:space-between;opacity:0;transition:opacity .3s var(--ease)} .menu-open .menu{opacity:1} .menu[hidden]{display:none} /* closed menu must not sit invisibly over the page and eat clicks */ .menu nav{display:flex;flex-direction:column;gap:6px} .menu nav a{font-size:28px;font-weight:600;letter-spacing:.007em;line-height:1.4;opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)} .menu-open .menu nav a{opacity:1;transform:none} .menu nav a:nth-child(2){transition-delay:.03s}.menu nav a:nth-child(3){transition-delay:.06s}.menu nav a:nth-child(4){transition-delay:.09s}.menu nav a:nth-child(5){transition-delay:.12s} .menu-foot{font-size:14px;color:#86868b} .menu-open .gnav{position:fixed;inset:0 0 auto;background:rgba(8,8,8,.98)} @media (max-width:833px){ .gnav-links,.gnav-cta{display:none} .burger{display:block} .gnav-in{grid-template-columns:1fr auto;padding-inline:16px} } /* ---------- 5 local nav (inner pages, sticks to the top) ---------- */ .localnav{position:sticky;top:0;z-index:60;height:var(--lnav);background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.16)} .localnav-in{height:100%;max-width:calc(var(--w) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;gap:24px} .ln-title{font-size:21px;font-weight:600;letter-spacing:.011em;margin-right:auto;white-space:nowrap} .ln-links{display:flex;gap:24px} .ln-links a{font-size:12px;color:var(--ink);opacity:.88;letter-spacing:-.01em} @media (hover:hover){.ln-links a:hover{color:var(--mag);opacity:1}} .ln-btn{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:980px;background:var(--mag);color:#fff;font-size:12px;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s} @media (hover:hover){.ln-btn:hover{background:var(--mag-hover)}} @media (max-width:833px){.ln-links{display:none}.ln-title{font-size:19px}.localnav-in{padding-inline:16px}} /* ---------- 6 full-width tiles ---------- */ .tile{position:relative;overflow:hidden;text-align:center;padding:56px var(--gut) 0;background:var(--gray)} .tile.white{background:var(--white)} .tile.dark{background:var(--black);color:var(--dark-ink)} .home main{display:flex;flex-direction:column;gap:12px;padding-bottom:12px} .tile-copy{position:relative;z-index:2;max-width:820px;margin-inline:auto} .tile.hero{padding-top:clamp(48px,6vw,64px)} @media (max-width:734px){.tile{padding-top:44px}} /* ---------- 7 tile grid (Apple homepage style) ---------- */ .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-inline:12px} .gt{position:relative;overflow:hidden;text-align:center;background:var(--gray);height:580px;padding:50px 20px 0;display:flex;flex-direction:column;align-items:center} .gt.dark{background:var(--black);color:var(--dark-ink)} .gt.white{background:var(--white)} .gt h3{font-size:clamp(32px,3.4vw,40px);line-height:1.1;font-weight:600;letter-spacing:0} .gt p{font-size:clamp(17px,1.6vw,21px);line-height:1.24;margin-top:6px;letter-spacing:.011em} .gt .links{margin-top:14px;font-size:17px} @media (max-width:734px){.grid{grid-template-columns:1fr}.gt{height:500px;padding-top:44px}} /* ---------- 8 the story: closed → apart → fixed (pinned, cross-fade, no WebGL) ---------- */ .story{position:relative;background:#000;color:var(--dark-ink)} .js .story{height:330svh} .cap{grid-area:1/1} .js .cap{opacity:0;visibility:hidden} .js .cap.on{visibility:visible} .js .cap:first-child{opacity:1;visibility:visible} .cap .t-body{margin-top:12px;max-width:560px;margin-inline:auto} .shot{position:absolute;inset:0;opacity:0;will-change:opacity,transform} .shot:first-child{opacity:1} .shot picture{display:contents} .shot img{height:100%;width:auto;max-width:100%;aspect-ratio:3/4;object-fit:cover;margin-inline:auto; -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 74%,transparent 100%)} .story-dots{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:10px;padding:10px 14px;border-radius:980px;background:rgba(66,66,69,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .story-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:background-color .3s var(--ease),width .4s var(--spring)} .story-dots i.on{background:#fff;width:24px;border-radius:4px} /* ---------- 9 explore the inside (hotspots) ---------- */ .explore{background:#000;color:var(--dark-ink);padding:clamp(80px,10vw,120px) 0} .explore .head{text-align:center;margin-bottom:40px} .hot{position:absolute;left:var(--x);top:var(--y);width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:0;padding:0;cursor:pointer; background:rgba(232,232,237,.92);color:#1d1d1f;display:grid;place-items:center;box-shadow:0 2px 12px rgba(0,0,0,.4);transition:transform .35s var(--spring),background-color .25s} .hot svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .35s var(--spring)} .hot::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,255,255,.35);animation:ring 2.6s var(--ease) infinite} @keyframes ring{0%{transform:scale(.8);opacity:0}40%{opacity:1}100%{transform:scale(1.35);opacity:0}} .hot[aria-pressed=true]{background:var(--mag);color:#fff} .hot[aria-pressed=true] svg{transform:rotate(45deg)} .hot[aria-pressed=true]::before{animation:none;opacity:0} @media (hover:hover){.hot:hover{transform:scale(1.08)}} .ex-card{max-width:560px;margin:22px auto 0;padding:0 var(--gut);text-align:center;min-height:120px} .ex-card h3{font-size:24px;font-weight:600} .ex-card p{color:var(--dark-ink-2);margin-top:6px;font-size:17px} .ex-card .more{margin-top:10px;font-size:17px} .ex-card.swap{animation:swap .45s var(--ease)} @keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------- 10 plain sections ---------- */ .sec{padding:clamp(80px,11vw,140px) 0} .sec.gray{background:var(--gray)} .sec.dark{background:#000;color:var(--dark-ink)} /* ---------- 11 feature row (why Marvans) ---------- */ /* ---------- 12 steps strip ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .step{background:var(--white);border-radius:18px;padding:30px 26px 32px} .step .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);font-size:15px;font-weight:600;margin-bottom:20px} .step:first-child .n{background:var(--mag);border-color:var(--mag);color:#fff} .step h3{font-size:21px;font-weight:600;letter-spacing:.011em} .step p{color:var(--ink-2);margin-top:6px} @media (max-width:1068px){.steps{grid-template-columns:1fr 1fr}} @media (max-width:540px){.steps{grid-template-columns:1fr}} /* ---------- 13 visit the store ---------- */ .store{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center} .store h2{margin-bottom:16px} .hours{display:grid;grid-template-columns:auto auto;justify-content:start;gap:2px 28px;color:var(--ink-2);margin:0} .hours dd{margin:0;font-variant-numeric:tabular-nums} .today{color:var(--ink)!important;font-weight:600} .store .links{font-size:17px;margin-top:30px} .map{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/1;background:#e8e8ed} .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media (max-width:833px){.store{grid-template-columns:1fr}.map{aspect-ratio:4/3}} /* ---------- 14 page heroes + repairs page ---------- */ .p-hero{padding:clamp(64px,9vw,110px) 0 clamp(56px,7vw,90px);text-align:center} .p-hero .t-body{max-width:680px;margin:18px auto 0} .p-hero.gray{background:var(--gray)} .p-hero.dark{background:#000;color:var(--dark-ink)} .devices{display:flex;flex-wrap:wrap;justify-content:center;gap:12px clamp(20px,4vw,48px);margin-top:48px} .devices a{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14px;color:var(--ink);width:84px} .devices svg{width:52px;height:52px;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s} @media (hover:hover){.devices a:hover{color:var(--mag)}.devices a:hover svg{stroke:var(--mag)}} .rrow{display:grid;grid-template-columns:5fr 7fr;gap:24px 64px;padding:48px 0;border-bottom:1px solid var(--line)} .rrow .t-small{margin-top:6px} .rrow .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px} .chip{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:980px;background:var(--gray);font-size:12px;color:var(--ink-2);letter-spacing:-.01em} .rrow dl{display:grid;gap:18px} .rrow dt{font-size:14px;font-weight:600;margin-bottom:4px;letter-spacing:-.016em} .rrow dd{color:var(--ink-2)} @media (max-width:734px){.rrow{grid-template-columns:1fr;padding:36px 0}} .card{background:var(--white);border-radius:18px;padding:32px 30px;display:flex;flex-direction:column;gap:8px} .gray .card{background:var(--white)} .white .card,.sec:not(.gray) .card{background:var(--gray)} .card svg{width:40px;height:40px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px} .card h3{font-size:21px;font-weight:600;letter-spacing:.011em} .card p{color:var(--ink-2)} .card .more{margin-top:auto;padding-top:10px} /* ---------- 15 faq ---------- */ /* ---------- 16 accessories ---------- */ .shop{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .shop .card{padding:36px 32px 34px;scroll-margin-top:calc(var(--lnav) + 16px)} .shop .card ul{margin-top:8px;display:grid;gap:4px} .shop .card li{color:var(--ink-2)} @media (max-width:1068px){.shop{grid-template-columns:1fr 1fr}} @media (max-width:640px){.shop{grid-template-columns:1fr}} /* ---------- 17 contact ---------- */ .reach{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .reach a{background:var(--gray);border-radius:18px;padding:34px 30px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;transition:transform .35s var(--spring)} .reach svg{width:44px;height:44px;fill:none;stroke:var(--mag);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px} .reach b{font-size:21px;font-weight:600;letter-spacing:.011em} .reach span{color:var(--ink-2)} .reach .more{margin-top:8px;color:var(--mag)} @media (hover:hover){.reach a:hover{transform:scale(1.015)}} @media (max-width:833px){.reach{grid-template-columns:1fr}} .composer{max-width:760px;margin-inline:auto;background:var(--white);border-radius:18px;padding:clamp(28px,4vw,48px);display:grid;gap:30px} .field{display:grid;border:0;padding:0;margin:0;min-width:0} .field legend,.field>label{font-size:17px;font-weight:600;padding:0;margin-bottom:14px} .opts{display:flex;flex-wrap:wrap;gap:10px} .opt{position:relative} .opt input{position:absolute;opacity:0;width:1px;height:1px} .opt span{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--ink-3);font-size:17px;cursor:pointer; transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .12s ease-out} .opt span:active{transform:scale(.97)} .opt input:checked + span{border-color:var(--mag);box-shadow:inset 0 0 0 1px var(--mag)} .opt input:focus-visible + span{outline:2px solid var(--mag);outline-offset:3px} .text-in{width:100%;height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--ink-3);background:#fff;font-size:17px} .text-in:focus{outline:none;border-color:var(--mag);box-shadow:0 0 0 3px rgba(128,0,32,.18)} .preview{padding:18px 20px;border-radius:12px;background:var(--gray);color:var(--ink);white-space:pre-line} .preview b{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px;letter-spacing:0} .composer .ctas{margin-top:0;justify-content:flex-start} /* ---------- 18 footer (small grey text, columns, breadcrumbs) ---------- */ .foot{background:var(--gray);color:var(--ink-2);font-size:12px;line-height:1.33;letter-spacing:-.01em;padding:17px 0 calc(21px + env(safe-area-inset-bottom))} .foot-in{max-width:calc(var(--w) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)} .foot-note{padding-bottom:17px;border-bottom:1px solid var(--line)} .crumbs{display:flex;align-items:center;gap:10px;padding:16px 0;color:var(--ink)} .crumbs img{width:14px;height:auto} .crumbs span[aria-hidden]{color:var(--ink-3);font-size:14px;line-height:1} .foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:4px 0 20px;border-bottom:1px solid var(--line)} .foot-cols div{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .foot-cols h3{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:2px} .foot-cols a{color:var(--ink-2)} @media (hover:hover){.foot-cols a:hover,.foot-base a:hover{color:var(--ink);text-decoration:underline}} .foot-base{display:grid;grid-template-columns:1fr auto 1fr;gap:10px 24px;padding-top:16px;align-items:center} .foot-base nav{display:flex;gap:0} .foot-base nav a{padding:0 9px;border-left:1px solid var(--line)} .foot-base nav a:first-child{border-left:0} .foot-base>:last-child{text-align:right} @media (max-width:833px){ .foot-cols{grid-template-columns:1fr 1fr;gap:28px 24px} .foot-base{grid-template-columns:1fr;justify-items:start} .foot-base nav a:first-child{padding-left:0} .foot-base>:last-child{text-align:left} } /* ---------- 19 phone dock ---------- */ .dock{position:fixed;z-index:50;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));display:none;gap:8px;padding:6px;border-radius:980px; background:rgba(255,255,255,.78);border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 30px rgba(0,0,0,.18);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px); transform:translate(-50%,calc(100% + 30px));transition:transform .5s var(--spring)} .dock .pill{height:44px;min-width:136px} .dock.show{transform:translate(-50%,0)} @media (max-width:833px){.dock{display:flex}.foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}} /* ---------- 20 reveal on scroll (soft rise, like Apple) ---------- */ .js [data-in]{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .js [data-in].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js [data-in]{opacity:1;transform:none;transition:none} .hot::before{animation:none} *{scroll-behavior:auto!important} } /* pictures that are still loading stay clear, then js/main.js fades them in (their space is kept by width/height, so nothing moves). html.mv-imgs is set by main.js itself, so without the script every picture simply shows. Zero specificity: any page rule wins. */ :where(.mv-imgs main img:not(.mv-ld):not(#fix img)){opacity:0} /* (Nov 1) hero card photos never wait on the fade: see js/main.js */ @media print{:where(.mv-imgs main img){opacity:1!important}} /* ---------- 21 check mode: add ?check to the address to see what dad must still confirm ---------- */ .check [data-confirm]{outline:1.5px dashed var(--mag);outline-offset:4px;position:relative} .check [data-confirm]::after{content:"CONFIRM: " attr(data-confirm);position:absolute;left:0;top:-20px;font:600 10px/1 var(--font);letter-spacing:.04em;background:var(--mag);color:#fff;padding:4px 6px;border-radius:4px;white-space:nowrap;z-index:5} /* Sir: top bar white with black text */ .gnav,.menu-open .gnav{background:rgba(255,255,255,.85);color:#1d1d1f;border-bottom:1px solid rgba(0,0,0,.08)} .gnav-links a,.gnav-cta{color:#1d1d1f} .burger i{background:#1d1d1f} .menu{background:rgba(255,255,255,.98);color:#1d1d1f} /* ---------- 22 top-bar bag + store (v2.1) ---------- */ .gnav-end{justify-self:end;display:flex;align-items:center;margin-right:-12px} .gnav-end .gnav-cta{margin-right:0} .gnav-bag{position:relative;width:44px;height:44px;display:grid;place-items:center;color:inherit;opacity:.85} .gnav-bag svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round} .bag-n{position:absolute;top:7px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--mag);color:#fff;font-size:10px;font-weight:600;line-height:16px;text-align:center;letter-spacing:0} .bag-n[hidden]{display:none} @media (max-width:833px){ .gnav-in{grid-template-columns:1fr auto auto} .gnav-end{display:flex;margin-right:0} .gnav-end .gnav-cta{display:none} } .foot-cols{grid-template-columns:repeat(5,1fr)} @media (max-width:833px){.foot-cols{grid-template-columns:1fr 1fr}} .cat{display:flex;flex-direction:column;align-items:center;gap:10px;width:96px;border:0;background:none;padding:0;cursor:pointer;font-size:14px;line-height:1.2;color:var(--ink);text-align:center} .cat[aria-pressed=true]{font-weight:600} /* phones: one swipeable row, like Apple's store chips */ @media (max-width:734px){ .cat{flex:none;width:84px;scroll-snap-align:start} } .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media (max-width:1068px){.pgrid{grid-template-columns:repeat(3,1fr)}} @media (max-width:734px){.pgrid{grid-template-columns:1fr 1fr;gap:12px}} .pimg{width:100%;aspect-ratio:1/1;display:grid;place-items:center;margin-bottom:10px} .pimg img{width:88%;height:88%;object-fit:contain} .fly{position:fixed;z-index:200;pointer-events:none;object-fit:contain;transform-origin:center} /* bag drawer: slides in from the right on computers, up from the bottom on phones */ .bag-scrim{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.32);opacity:0;transition:opacity .4s var(--ease)} .bag-open .bag-scrim{opacity:1} .bag{position:fixed;z-index:160;top:0;right:0;bottom:0;width:min(420px,100%);background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px); display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.14);transform:translateX(105%);transition:transform .5s var(--spring);visibility:hidden} .bag-open .bag{transform:none;visibility:visible} .bag-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 12px} .bag-head h2{font-size:28px;font-weight:600;letter-spacing:.007em} .bag-x{width:36px;height:36px;border-radius:50%;border:0;background:var(--gray);display:grid;place-items:center;cursor:pointer} .bag-x svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;transform:rotate(45deg)} .bag-body{flex:1;overflow-y:auto;padding:4px 24px 20px;overscroll-behavior:contain} .bag-list li{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)} .bag-list img{width:56px;height:56px;border-radius:12px;background:var(--gray);object-fit:contain;padding:4px} .bi-t{display:flex;flex-direction:column;min-width:0} .bi-t b{font-size:15px;font-weight:600;line-height:1.25} .bi-t span{font-size:13px;color:var(--ink-2)} .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:980px;height:34px} .qty button{width:34px;height:34px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--ink)} .qty output{min-width:18px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums} .bag-empty{color:var(--ink-2);padding:24px 0} .bag-form{display:grid;gap:20px;margin-top:22px} .bag-form .field>span,.bag-form legend{font-size:14px;font-weight:600;margin-bottom:8px;display:block} .bag-form .opt span{height:40px;font-size:15px;padding:0 14px} .bag-foot{padding:16px 24px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:10px;text-align:center} .bag-send{width:100%} .bag-send.off{opacity:.4;pointer-events:none} @media (max-width:734px){ .bag{top:auto;width:100%;height:min(86svh,680px);border-radius:18px 18px 0 0;transform:translateY(105%);box-shadow:0 -20px 60px rgba(0,0,0,.18)} .bag-open .dock{transform:translate(-50%,calc(100% + 30px))} } .ln-bag{gap:6px} html.check{overflow-x:clip} /* ---------- 23 home: iPhone Duo hero (first tile, light, Apple homepage style) ---------- */ .duo-tile{background:#F6F5F8;color:#1d1d1f;padding-top:clamp(32px,4.2vw,48px);padding-bottom:0} .duo-h{font-size:clamp(40px,4vw,56px);line-height:1.02;letter-spacing:-.02em} .duo-tile .t-sub{margin-top:10px} .duo-gray{margin-top:10px;font-size:clamp(15px,1.4vw,17px);color:var(--ink-2)} .duo-tile .ctas{margin-top:24px} /* size matched to apple.com's Duo hero at 1440x900: device 420px wide (29.2vw), max 33.8vh tall, 48px under the buttons */ .duo-stage{position:relative;width:30vw;margin:48px auto 0;padding-bottom:64px;container-type:inline-size;perspective:1700px;perspective-origin:50% 0%} .duo-fine{position:relative;z-index:3;margin:0 auto;padding:0 16px 18px;font-size:12px;color:#86868b;letter-spacing:-.01em} @media (max-width:734px){.duo-stage{width:61vw;margin-top:60px;padding-bottom:48px}} /* apple.com phone: 61vw, 60px under the buttons */ /* the drawn device (replaced by img/duo-open.webp automatically when that file exists) */ .duo-photo{display:block;width:100%;height:auto} /* ---------- 24 the drawn iPhone Duo, to scale (164.6 x 117.8 mm open; see ../DUO.md) ---------- 1 mm = --mm. Graphite #3C4042. Book fold: the left half swings open around the vertical hinge. Closed: only the right half shows (with the left half folded on top, back side out), centred. Opening: the left half turns 180 -> 0 deg while the whole device glides from right-of-centre to centre. */ .duo-stage{perspective:1900px;perspective-origin:50% 40%} .duo3{--mm:calc(100cqw / 164.6);--R:calc(10.5 * var(--mm));--T:calc(5.2 * var(--mm));--t:3.2s;--e:cubic-bezier(.45,0,.2,1);position:relative;width:100%;aspect-ratio:164.6/117.8;transform-style:preserve-3d} .d-glide{position:absolute;inset:0;transform-style:preserve-3d;transition:transform var(--t) var(--e)} .d-half{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d} .d-right{right:0} .d-left{left:0;transform-origin:100% 50%;transition:transform var(--t) var(--e)} .d-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d} .d-front{transform:translateZ(.01px)} /* outside of the turning half: graphite frame around the 5.4-inch cover screen (77.1 x 112.2 mm), no camera */ .d-back{transform:translateZ(calc(-1 * var(--T))) rotateY(180deg) translateZ(.01px);border-radius:0 var(--R) var(--R) 0; background:linear-gradient(270deg,#5a5f62 0,#3C4042 calc(1.6*var(--mm)),#2a2d2f 60%,#3C4042);box-shadow:inset 0 calc(.6*var(--mm)) 0 -.2px #5a5f62,inset 0 calc(-.6*var(--mm)) 0 -.2px #5a5f62} .d-back::before{content:"";position:absolute;inset:calc(.9*var(--mm)) calc(.9*var(--mm)) calc(.9*var(--mm)) calc(.5*var(--mm));background:#050505; border-radius:calc(3*var(--mm)) calc(var(--R) - .9*var(--mm)) calc(var(--R) - .9*var(--mm)) calc(3*var(--mm))} .d-cover{position:absolute;left:calc(2.6*var(--mm));right:calc(2.6*var(--mm));top:calc(2.8*var(--mm));bottom:calc(2.8*var(--mm));border-radius:calc(7*var(--mm));overflow:hidden; background:#fff} .d-island{position:absolute;right:calc(8*var(--mm));top:calc(4*var(--mm));width:calc(4.6*var(--mm));aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#141a28 0 16%,#07090e 17% 28%,#202226 29% 32%,#030304 33%);box-shadow:0 0 0 calc(.35*var(--mm)) #111,inset 0 0 0 calc(.3*var(--mm)) #1a1a1c} .d-island::before{content:"";position:absolute;left:28%;top:24%;width:22%;height:22%;border-radius:50%;background:radial-gradient(circle,rgba(170,190,230,.4),transparent 70%)} .d-cover-logo{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:grid;justify-items:center;gap:calc(3*var(--mm))} .d-cover-logo span{font-size:calc(2.3*var(--mm));font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);white-space:nowrap} .d-cover-logo img{width:calc(60*var(--mm));height:auto;display:block} /* thickness: 12 stacked layers fill the 5.2 mm depth behind each half's screen */ .d-layer{position:absolute;inset:0;transform:translateZ(calc(-1 * var(--k) * var(--T)))} .d-left .d-layer{border-radius:var(--R) 0 0 var(--R)} .d-right .d-layer{border-radius:0 var(--R) var(--R) 0} /* graphite frame: light edges, darker body */ .d-frame{position:absolute;inset:0} .d-left .d-frame{border-radius:var(--R) 0 0 var(--R);background:linear-gradient(90deg,#5a5f62 0,#3C4042 calc(2*var(--mm)),#2a2d2f 100%)} .d-right .d-frame{border-radius:0 var(--R) var(--R) 0;background:linear-gradient(270deg,#5a5f62 0,#3C4042 calc(2*var(--mm)),#2a2d2f 100%)} .d-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#5a5f62,transparent calc(1.4*var(--mm)),transparent calc(100% - 1.4*var(--mm)),#5a5f62)} .d-bez{position:absolute;background:#050505} .d-left .d-bez{inset:calc(.9*var(--mm)) 0 calc(.9*var(--mm)) calc(.9*var(--mm));border-radius:calc(var(--R) - .9*var(--mm)) 0 0 calc(var(--R) - .9*var(--mm))} .d-right .d-bez{inset:calc(.9*var(--mm)) calc(.9*var(--mm)) calc(.9*var(--mm)) 0;border-radius:0 calc(var(--R) - .9*var(--mm)) calc(var(--R) - .9*var(--mm)) 0} /* inner display 157.5 x 110.8 mm, centred; each half shows its own side of one continuous screen */ .d-scr{position:absolute;top:calc(3.5*var(--mm));bottom:calc(3.5*var(--mm));overflow:hidden} .d-left .d-scr{left:calc(3.55*var(--mm));right:0;border-radius:calc(7*var(--mm)) 0 0 calc(7*var(--mm))} .d-right .d-scr{right:calc(3.55*var(--mm));left:0;border-radius:0 calc(7*var(--mm)) calc(7*var(--mm)) 0} .d-scr-in{position:absolute;top:0;bottom:0;width:calc(157.5*var(--mm))} .d-scr-in.s-left{left:0}.d-scr-in.s-right{right:0} .d-glare{position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.07) 26%,transparent 27%,transparent 62%,rgba(255,255,255,.06) 63%,transparent 78%)} .d-notch{position:absolute;width:calc(.9*var(--mm));height:calc(1.2*var(--mm));background:#1d1f20} .d-left .d-notch{right:0}.d-right .d-notch{left:0} .d-n1{top:0}.d-n2{bottom:0} .d-shadow{position:absolute;left:4%;right:4%;bottom:-9%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(29,29,31,.32),transparent);filter:blur(8px); transform:translateZ(-2px) scaleX(.5);opacity:.7;transition:transform var(--t) var(--e),opacity var(--t) var(--e)} /* closed (start) state */ .js .duo3 .d-glide{transform:translateX(-25%)} .js .duo3 .d-left{transform:translateZ(calc(.9*var(--mm))) rotateY(180deg)} /* open */ .duo3.open .d-glide,.duo3.open .d-left{transform:none} .duo3.open .d-shadow{transform:translateZ(-2px) scaleX(1);opacity:1} html:not(.js) .duo3 .d-left,html:not(.js) .duo3 .d-glide{transform:none} @media (prefers-reduced-motion:reduce){.js .duo3 .d-left,.js .duo3 .d-glide{transform:none;transition:none}.d-shadow{transition:none;transform:translateZ(-2px)}} /* ---------- 25 Duo screens: laid out like apple.com's Duo home screen, Marvans content (Oct 22) ---------- */ .d-paper{position:absolute;inset:0;background: radial-gradient(70% 34% at 78% 104%,#b88796 0 55%,transparent 75%), radial-gradient(95% 40% at 18% 108%,#d4aab6 0 55%,transparent 76%), radial-gradient(85% 30% at 62% 80%,#e6cdd4 0 50%,transparent 75%), radial-gradient(60% 24% at 30% 66%,#efdfe2 0 45%,transparent 72%), linear-gradient(180deg,#a9b4cb 0%,#c9cad9 26%,#e6dde3 56%,#efe2e1 100%)} .d-cover{background:#ece3e6} .d-cover-logo span{color:rgba(29,29,31,.6)} .d-w{position:absolute;overflow:hidden;color:#fff;line-height:1.1;box-shadow:0 calc(.6*var(--mm)) calc(2.4*var(--mm)) rgba(60,20,35,.18)} .d-w b,.d-w em,.d-w span{display:block;font-style:normal} .d-w-photo{left:calc(10.5*var(--mm));top:calc(11.8*var(--mm));width:calc(55.1*var(--mm));height:calc(87*var(--mm));border-radius:calc(4.4*var(--mm));background:#120610} .d-w-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%} .d-w-photo b{position:absolute;left:calc(3.2*var(--mm));bottom:calc(6.6*var(--mm));font-size:calc(3.4*var(--mm));font-weight:700} .d-w-photo span{position:absolute;left:calc(3.2*var(--mm));bottom:calc(3.4*var(--mm));font-size:calc(1.7*var(--mm));font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.85} .d-playb{position:absolute;right:calc(3.2*var(--mm));bottom:calc(3.4*var(--mm));width:calc(7*var(--mm));aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.3)} .d-playb::after{content:"";position:absolute;left:40%;top:30%;border-left:calc(2.2*var(--mm)) solid #fff;border-top:calc(1.4*var(--mm)) solid transparent;border-bottom:calc(1.4*var(--mm)) solid transparent} .d-w-bat,.d-w-fix{top:calc(11.8*var(--mm));width:calc(26.3*var(--mm));height:calc(26.3*var(--mm));border-radius:calc(4.4*var(--mm));padding:calc(2.6*var(--mm)) calc(2.8*var(--mm));box-sizing:border-box} .d-w-bat{left:calc(77*var(--mm));background:linear-gradient(160deg,#b0123f,#6e001b)} .d-w-bat span{font-size:calc(2.2*var(--mm));font-weight:600} .d-w-bat b{font-size:calc(7*var(--mm));font-weight:300;letter-spacing:-.02em;margin-top:calc(.6*var(--mm))} .d-w-bat em,.d-w-fix em{position:absolute;left:calc(2.8*var(--mm));right:calc(2.8*var(--mm));bottom:calc(2.6*var(--mm));font-size:calc(1.9*var(--mm));font-weight:600;opacity:.85} .d-w-fix{left:calc(106.7*var(--mm));background:#fff;color:#1d1d1f} .d-tick{display:block;width:calc(7.4*var(--mm));aspect-ratio:1;border-radius:50%;background:#34c759;position:relative} .d-tick::after{content:"";position:absolute;left:36%;top:20%;width:22%;height:44%;border:solid #fff;border-width:0 calc(.8*var(--mm)) calc(.8*var(--mm)) 0;transform:rotate(45deg)} .d-w-fix b{font-size:calc(4*var(--mm));font-weight:700;margin-top:calc(1.6*var(--mm))} .d-w-fix em{color:#6e6e73} .d-app{position:relative;display:grid;place-items:center;width:calc(11.3*var(--mm));aspect-ratio:1;border-radius:calc(2.6*var(--mm));overflow:hidden;box-shadow:0 calc(.3*var(--mm)) calc(1*var(--mm)) rgba(60,20,35,.16)} .d-app svg{width:62%;height:62%;position:relative} .d-cal{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;font-size:calc(5.4*var(--mm));font-weight:300;color:#1d1d1f;line-height:1;font-style:normal} .d-cal em{font-size:calc(1.6*var(--mm));font-weight:600;color:#e2342f;font-style:normal;margin-bottom:calc(.3*var(--mm))} .d-time{position:absolute;left:calc(146.2*var(--mm));width:calc(6.6*var(--mm));text-align:center;top:calc(4.2*var(--mm));line-height:1;font-size:calc(2.5*var(--mm));font-weight:600;color:#fff;letter-spacing:0} .d-wifi,.d-search{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7)} .d-wifi{display:grid;place-items:center;left:calc(146.2*var(--mm));top:calc(8.6*var(--mm));width:calc(6.6*var(--mm));aspect-ratio:1} .d-search{display:grid;place-items:center;left:calc(145.6*var(--mm));top:calc(98.8*var(--mm));width:calc(7.8*var(--mm));aspect-ratio:1} .d-dots{position:absolute;left:calc(102.6*var(--mm));top:calc(105*var(--mm));display:flex;gap:calc(1.4*var(--mm))} .d-dots i{width:calc(1.3*var(--mm));aspect-ratio:1;border-radius:50%;background:#fff} .d-dots i+i{opacity:.5} .d-cover .d-glare,.d-scr .d-glare{opacity:.5} .d-left .d-scr{right:-1px}.d-right .d-scr{left:-1px} .d-ad{left:calc(77*var(--mm));top:calc(42.2*var(--mm));width:calc(56.2*var(--mm));height:calc(56.6*var(--mm));border-radius:calc(4.4*var(--mm));box-sizing:border-box;padding:calc(5*var(--mm)) calc(4.6*var(--mm)); background:radial-gradient(120% 80% at 100% 0%,#c4164f,transparent 60%),linear-gradient(160deg,#800020,#3a000f)} .d-ad em{font-size:calc(1.9*var(--mm));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ff9ab8} .d-ad b{font-size:calc(5.6*var(--mm));font-weight:700;letter-spacing:-.02em;line-height:1.05;margin-top:calc(2.4*var(--mm))} .d-ad span{font-size:calc(2.4*var(--mm));font-weight:500;color:rgba(255,255,255,.8);margin-top:calc(2.4*var(--mm));line-height:1.3} .d-ad i{position:absolute;left:calc(4.6*var(--mm));bottom:calc(5*var(--mm));padding:calc(1.5*var(--mm)) calc(3.4*var(--mm));border-radius:99px;background:#fff;color:#800020;font-size:calc(2.2*var(--mm));font-weight:600;font-style:normal} .d-w{text-align:left} .d-wifi svg{width:58%;height:58%} .d-search svg{width:52%;height:52%} /* Apple's Duo headline trick: the line starts as "Unfolds big." centred, then slides left as "Protect it bigger." fades in, timed with the unfold */ .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .duo-sub .ds-l{display:inline-block;white-space:pre} .duo-sub .ds-r{display:inline-block;white-space:pre} .js .duo-sub .ds-l{transform:translateX(var(--ds,0px));transition:transform .9s cubic-bezier(.4,0,.2,1)} .js .duo-sub .ds-r{opacity:0;transform:translateX(16px);transition:opacity .5s ease,transform .9s cubic-bezier(.4,0,.2,1)} .js .duo-tile:has(.duo3.open) .duo-sub .ds-l{transform:none;transition-delay:1.5s} .js .duo-tile:has(.duo3.open) .duo-sub .ds-r{opacity:1;transform:none;transition:opacity .9s ease 1.7s,transform .9s cubic-bezier(.4,0,.2,1) 1.5s} @media (max-width:734px){.js .duo-sub .ds-r{transform:translateX(12px)}} @media (prefers-reduced-motion:reduce){.js .duo-sub .ds-l,.js .duo-sub .ds-r{transform:none;opacity:1;transition:none}} /* glass effect on unfold: a light reflection sweeps across the glass as it opens, and the cards get Liquid Glass edges */ .d-sheen{position:absolute;inset:-10% -40%;pointer-events:none;opacity:0; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.12) 44%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.12) 56%,transparent 62%); transform:translateX(-55%)} .duo3.open .d-sheen{animation:dSheen 2.6s cubic-bezier(.45,0,.2,1) .7s both} @keyframes dSheen{0%{opacity:0;transform:translateX(-55%)}25%{opacity:1}80%{opacity:.8}100%{opacity:0;transform:translateX(55%)}} .d-cover .d-sheen{display:none} .d-w,.d-wifi,.d-search{box-shadow:inset calc(.25*var(--mm)) calc(.25*var(--mm)) 0 rgba(255,255,255,.55),inset calc(-.2*var(--mm)) calc(-.2*var(--mm)) calc(.6*var(--mm)) rgba(0,0,0,.12),0 calc(.6*var(--mm)) calc(2.4*var(--mm)) rgba(60,20,35,.18)} .d-w::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.12))} .d-wifi,.d-search{background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px) saturate(160%);backdrop-filter:blur(6px) saturate(160%)} .d-ad i{box-shadow:inset 0 calc(.2*var(--mm)) 0 rgba(255,255,255,.9),0 calc(.4*var(--mm)) calc(1.2*var(--mm)) rgba(0,0,0,.25)} @media (prefers-reduced-motion:reduce){.duo3.open .d-sheen{animation:none}} /* ====================================================================== 23 STORE PAGE v3 (Oct 22) — apple.com/store layout, Marvans touches. Everything here is prefixed .st- and only used on store.html. Burgundy #800020 = the logo star. Pink pills = the site's .pill. ====================================================================== */ .storepage{--st-bur:#800020;--st-bg:#f5f5f7;--st-out:cubic-bezier(.23,1,.32,1); --st-edge:max(var(--gut),calc((100% - var(--w)) / 2)); --st-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='28 28 191 191'%3E%3Cpath d='M88.2,218.8 87.7,217.2 87.2,215.6 86.5,210.2 84.8,201.4 82.6,193.8 81.7,191.0 80.7,188.0 77.7,181.0 75.2,176.0 72.5,171.7 69.7,167.8 68.5,166.2 67.2,164.8 65.8,163.0 61.7,159.0 56.8,155.0 55.2,153.9 53.8,152.9 50.5,151.0 48.2,149.8 41.5,146.8 39.2,146.0 37.2,145.5 33.4,144.2 33.1,144.0 33.5,143.6 34.0,143.3 34.5,143.2 40.2,143.1 44.2,143.2 102.5,143.1 104.2,143.3 104.8,143.5 105.2,143.9 105.4,144.2 105.4,145.0 105.0,147.2 103.7,153.0 102.9,156.0 101.9,161.0 100.0,169.0 99.0,174.2 98.2,177.2 97.8,179.5 96.2,185.9 95.6,189.2 93.2,199.2 92.6,203.0 92.2,204.2 90.7,211.0 90.2,212.6 89.5,216.3 88.5,218.8Z'/%3E%3Cpath d='M118.0,142.8 115.5,142.6 111.2,142.6 110.0,142.4 109.0,142.1 108.2,141.6 107.8,141.1 107.0,140.0 106.6,138.8 106.6,137.0 107.0,134.0 108.0,128.0 108.4,125.2 109.2,122.2 109.7,118.0 110.7,112.2 111.0,110.2 111.5,104.2 113.0,96.7 113.4,93.2 114.0,90.2 114.3,87.2 115.2,81.2 115.7,77.2 116.0,76.2 116.4,75.0 116.7,74.0 117.1,70.0 117.9,65.0 118.4,61.2 118.8,59.1 119.2,55.8 120.0,51.0 120.7,45.2 121.6,42.2 121.9,39.2 122.2,37.0 123.2,33.5 124.5,29.9 125.2,28.6 125.5,28.4 126.2,28.2 126.5,28.2 126.8,28.5 127.2,29.0 127.4,29.2 129.2,34.4 130.1,38.0 130.7,42.2 131.7,45.0 132.2,47.2 133.1,50.2 134.8,54.0 135.3,55.2 136.1,59.0 138.1,65.2 139.5,68.0 141.3,71.2 141.7,72.2 142.4,74.2 142.8,75.0 144.0,77.0 144.7,79.0 145.2,80.2 146.1,81.5 147.5,83.1 148.2,84.2 151.2,90.2 153.2,93.0 154.3,95.0 155.0,96.0 157.7,99.0 161.1,103.8 164.5,107.4 166.5,110.2 171.0,114.2 175.4,118.0 180.0,122.0 181.2,123.0 184.5,124.7 187.7,127.2 191.2,129.4 193.2,130.4 200.2,133.3 206.5,136.5 209.2,137.8 211.5,138.7 212.2,139.1 213.5,140.0 213.8,140.2 214.3,141.0 214.3,141.2 213.3,142.0 212.2,142.4 211.2,142.5 203.2,142.7 198.2,142.8 166.5,142.7 161.5,142.8Z'/%3E%3C/svg%3E"); background:var(--st-bg)} @media (max-width:734px){.storepage{--gut:16px}} .st{background:var(--st-bg);padding-bottom:clamp(64px,8vw,96px)} .st-star{fill:var(--st-bur);display:inline-block} /* hero: big "Store" left, tagline right */ /* round category icons */ .st-cat{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.016em;color:var(--ink);text-align:center} .st-cat.is-on{color:var(--st-bur)} @media (max-width:734px){.st-cat{font-size:12px;gap:10px}} /* section headings: bold part + gray part, a tiny star after the bold part (like the logo) */ /* sideways shelves */ .st-shelf{padding-top:clamp(40px,5vw,64px)} .st-arrow{width:36px;height:36px;border-radius:50%;border:0;padding:0;background:rgba(210,210,215,.64);color:var(--ink);display:grid;place-items:center;cursor:pointer; transition:background-color .25s ease,opacity .25s ease,transform .12s ease-out} .st-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .st-arrow[data-dir="-1"] svg{transform:scaleX(-1)} .st-arrow:active{transform:scale(.94)} .st-arrow:disabled{opacity:.36;cursor:default} @media (hover:hover){.st-arrow:not(:disabled):hover{background:rgba(210,210,215,.9);color:var(--st-bur)}} .st-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--st-edge);padding:24px var(--st-edge) 40px; scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .st-track::-webkit-scrollbar{display:none} .st-track > *{flex:none;scroll-snap-align:start} @media (max-width:734px){.st-track{gap:12px;padding-top:20px;padding-bottom:32px}.st-arrow{width:32px;height:32px}} /* cards (white, soft shadow, burgundy glow on hover, star in the corner) */ .st-card{position:relative;background:#fff;border-radius:18px;box-shadow:2px 4px 12px rgba(0,0,0,.08); transition:transform .45s var(--st-out),box-shadow .45s var(--st-out)} .st-corner{position:absolute;top:20px;right:20px;width:12px;height:12px;opacity:.5;transition:opacity .35s ease,transform .6s var(--st-out)} @media (hover:hover) and (pointer:fine){ .st-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(128,0,32,.08),0 18px 40px -14px rgba(128,0,32,.32),2px 4px 12px rgba(0,0,0,.06)} .st-card:hover .st-corner{opacity:1;transform:rotate(90deg) scale(1.15)}} .st-eye{font-size:12px;line-height:1.33;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--st-bur)} .st-card h3{color:var(--ink)} /* product cards */ .st-prod{display:flex;flex-direction:column;align-items:flex-start;padding:24px} .st-prod h3{font-size:17px;line-height:1.235;font-weight:600;letter-spacing:-.022em;margin-top:4px} .st-price{font-size:14px;line-height:1.43;color:var(--ink-2);letter-spacing:-.016em;margin-top:4px} .st-pimg{width:100%;aspect-ratio:1/1;display:grid;place-items:center} .st-pimg img{width:84%;height:84%;object-fit:contain} .st-add{align-self:stretch;min-width:0;margin-top:16px} .st-add.added{background:var(--ink);border-color:var(--ink)} /* big "latest" cards: text on top, picture under it */ .st-prod-big{width:320px;height:460px;padding:30px} .st-prod-big .st-eye{order:1} .st-prod-big h3{order:2;font-size:24px;line-height:1.167;letter-spacing:.009em;margin-top:6px;padding-right:20px} .st-prod-big .st-price{order:3;font-size:17px;margin-top:6px} .st-prod-big .st-pimg{order:4;flex:1;min-height:0;aspect-ratio:auto} .st-prod-big .st-pimg img{width:auto;height:100%;max-height:220px;max-width:88%} .st-prod-big .st-add{order:5;align-self:flex-start;margin-top:0} @media (max-width:734px){.st-prod-big{width:min(280px,76vw);height:420px;padding:26px}.st-prod-big h3{font-size:21px}} /* service + reason cards */ /* the Marvans difference: 4 even cards */ /* accessories grid + filter chips */ .st-chip{position:relative;height:36px;padding:0 16px;border-radius:980px;border:0;background:#fff;color:var(--ink);font-size:14px;letter-spacing:-.016em;cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);display:inline-flex;align-items:center;gap:7px; transition:box-shadow .25s ease,color .25s ease,transform .12s ease-out} .st-chip::before{content:"";width:0;height:9px;background:var(--st-bur);-webkit-mask:var(--st-star) center/contain no-repeat;mask:var(--st-star) center/contain no-repeat;margin-right:-7px;transition:width .3s var(--st-out),margin .3s var(--st-out)} .st-chip:active{transform:scale(.97)} .st-chip[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--st-bur);color:var(--st-bur);font-weight:600} .st-chip[aria-pressed=true]::before{width:9px;margin-right:0} @media (hover:hover){.st-chip[aria-pressed=false]:hover{box-shadow:inset 0 0 0 1px rgba(128,0,32,.4)}} .st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px} @media (max-width:1068px){.st-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:734px){ .st-chip{flex:none} .st-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:20px} .st-prod:not(.st-prod-big){padding:16px} .st-prod:not(.st-prod-big) h3{font-size:15px} .st-prod:not(.st-prod-big) .st-corner{top:14px;right:14px;width:10px;height:10px} .st-prod:not(.st-prod-big) .st-add{height:36px;padding:0 10px} } /* WhatsApp help strip + how ordering works */ @media (prefers-reduced-motion:reduce){ .st-card,.st-corner,.st-chip,.st-chip::before{transition:none} .st-card:hover{transform:none!important} .st-card:hover .st-corner{transform:none!important} } /* ---------- end 23 store page ---------- */ /* 23b store fixes: level titles, "something else" tile fills the last grid row */ .st-prod-big h3{min-height:2.334em} .st-prod:not(.st-prod-big) h3{min-height:2.47em} .st-more-card{min-height:180px;padding:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px} .st-more-card b{font-size:21px;line-height:1.19;font-weight:600;letter-spacing:.011em;color:var(--ink)} .st-more-card span{font-size:17px;color:var(--ink-2)} .st-more-card .more{font-style:normal;margin-top:10px;font-size:17px} .st-more-card::before{content:"";width:14px;height:14px;margin-bottom:8px;background:var(--st-bur);-webkit-mask:var(--st-star) center/contain no-repeat;mask:var(--st-star) center/contain no-repeat} @media (max-width:734px){.st-more-card{min-height:0;padding:22px 16px}.st-more-card b{font-size:17px}.st-more-card span{font-size:14px}.st-more-card .more{font-size:14px}} /* 23c store, real products (Oct 22): 8 device groups, type chips, variant chips */ .st-prod:not(.st-prod-big) .st-eye{margin-bottom:4px} .st-prod:not(.st-prod-big) .st-price{margin-top:auto;padding-top:10px} .st-vars{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .st-var{height:28px;padding:0 11px;border-radius:980px;border:0;background:var(--st-bg);color:var(--ink);font-size:12px;letter-spacing:-.01em;cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:box-shadow .2s ease,color .2s ease,background-color .2s ease,transform .12s ease-out} .st-var:active{transform:scale(.96)} .st-var[aria-pressed=true]{background:#fff;color:var(--st-bur);font-weight:600;box-shadow:inset 0 0 0 1.5px var(--st-bur)} @media (hover:hover){.st-var[aria-pressed=false]:hover{box-shadow:inset 0 0 0 1px rgba(128,0,32,.4)}} .st-prod-big .st-vars{order:5;margin:0 0 14px} .st-prod-big .st-pimg img{max-height:200px} .st-types{margin-top:12px;min-height:32px} .st-chip-sm{height:32px;padding:0 14px;font-size:13px;background:transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} .st-chip-sm[aria-pressed=true]{background:#fff} .bi-v{display:block;font-style:normal;font-size:13px;color:var(--st-bur,#800020)} @media (max-width:734px){.st-var{height:26px;padding:0 9px;font-size:11px}.st-vars{gap:5px}} .st-prod-big .st-pimg{flex:none;height:200px;margin-top:18px} .st-prod-big .st-pimg img{max-height:200px} .st-prod-big .st-vars{margin-top:auto} .st-prod-big .st-add{margin-top:auto} .st-prod-big .st-vars ~ .st-add{margin-top:0} @media (max-width:734px){.st-prod-big .st-pimg{height:170px}.st-prod-big .st-pimg img{max-height:170px}} .st-prod-big{height:490px} .st-prod-big .st-pimg{height:180px}.st-prod-big .st-pimg img{max-height:180px} @media (max-width:734px){.st-prod-big{height:470px}.st-prod-big .st-pimg{height:160px}.st-prod-big .st-pimg img{max-height:160px}} /* ---------- 26 home: iPhone 18 Pro accessories tile (apple.com Pro tile layout + Awanex-style bling) ---------- */ .pro-tile{background:#000;color:#f5f5f7;overflow:hidden;padding-bottom:clamp(40px,6vw,80px)} .pro-h span{white-space:nowrap} .pro-stage{position:relative;width:min(92vw,1180px);margin:clamp(36px,6vw,80px) auto 0;container-type:inline-size;aspect-ratio:1180/420} .pro-word{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none} .pro-word span{display:block;font-size:19.5cqw;font-weight:800;letter-spacing:-.01em;line-height:.8;color:transparent; background:linear-gradient(100deg,#6b6b72 0%,#f4f4f6 14%,#a9aab2 26%,#ffffff 36%,#c9b8a6 44%,#8fb0d8 52%,#f2f2f4 60%,#9b9ca4 72%,#ffffff 84%,#7a7a82 100%) 0 0/220% 100%; -webkit-background-clip:text;background-clip:text; filter:drop-shadow(0 0 .02em rgba(255,255,255,.35)) drop-shadow(0 .06em .12em rgba(128,0,32,.55)); -webkit-box-reflect:below -.06em linear-gradient(transparent 55%,rgba(0,0,0,.22)); animation:proSheen 6s cubic-bezier(.45,0,.2,1) infinite} @keyframes proSheen{0%{background-position:110% 0}55%,100%{background-position:-10% 0}} .pro-phone{position:absolute;left:50%;top:50%;width:80cqw;translate:-50% -36%;filter:drop-shadow(0 3cqw 4cqw rgba(0,0,0,.7)) drop-shadow(0 0 5cqw rgba(160,10,50,.28))} .pro-phone img{display:block;width:100%;height:auto} /* feature tags with a line and a glowing burgundy dot, like the Awanex 3D show */ .pro-tag{position:absolute;top:calc(50% + var(--y));display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap} .pro-tag b{font-weight:500;padding:8px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(10,10,10,.55); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 22px rgba(196,22,79,.28)} .pro-tag i{display:block;height:1px;width:56px;background:linear-gradient(90deg,rgba(255,255,255,.7),#ff2f6d);position:relative} .pro-tag i::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:#ff2f6d;box-shadow:0 0 12px #ff2f6d} .pro-tag.l{right:calc(100% - 9cqw)}.pro-tag.l i::after{right:-3px} .pro-tag.r{left:calc(100% - 9cqw)}.pro-tag.r i{background:linear-gradient(270deg,rgba(255,255,255,.7),#ff2f6d)}.pro-tag.r i::after{left:-3px} @media (max-width:1100px){.pro-tag{display:none}} /* entrance: letters rise and brighten, the phone glides in from the right and settles, tags draw in */ .js .pro-tile .pro-word span{opacity:0;transform:translateY(6cqw) scale(.94);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.22,1,.36,1)} .js .pro-tile .pro-phone{opacity:0;transform:translateX(30cqw);transition:opacity 1s ease .35s,transform 2s cubic-bezier(.22,1,.36,1) .35s} .js .pro-tile .pro-tag{opacity:0;transition:opacity .8s ease 1.6s} .js .pro-tile .pro-tag i{width:0;transition:width .9s cubic-bezier(.22,1,.36,1) 1.7s} .pro-tile.in-view .pro-word span{opacity:1;transform:none} .pro-tile.in-view .pro-phone{opacity:1;transform:none} .pro-tile.in-view .pro-tag{opacity:1} .pro-tile.in-view .pro-tag i{width:56px} @media (prefers-reduced-motion:reduce){.js .pro-tile :is(.pro-word span,.pro-phone,.pro-tag){opacity:1;transform:none;transition:none;animation:none}.js .pro-tile .pro-tag i{width:56px;transition:none}} .pro-h{font-size:clamp(40px,4vw,56px);line-height:1.07} .pro-stage{width:min(80vw,1000px)} .pro-phone{width:64cqw;translate:-50% -30%} .pro-tag.l{right:calc(100% + 10px)}.pro-tag.r{left:calc(100% + 10px)} @media (max-width:1320px){.pro-tag{display:none}} @media (max-width:734px){.pro-stage{width:calc(100vw - 32px)}.pro-phone{width:70cqw}} @media (max-width:734px){.st-prod-big{height:450px}} /* 23d store v4 (Oct 22, night): real 3D product pictures, apple.com/store numbers measured live (category card 136x148 · image 120x78 · label 14/20 600 · latest card 400x500 r18 p28 · grid tile r28 p28 · paddles 56px) */ .st-cat{display:block;padding:18px 8px 16px;text-align:center;gap:0} @media (max-width:734px){.st-cat{padding:16px 4px}} /* paddles: 56px, rgba(210,210,215,.64), 18px in from the edge, centred on the row; the back one hides at the start */ .st-arrow{position:absolute;top:50%;z-index:3;width:56px;height:56px;margin-top:-28px;border-radius:50%;background:rgba(210,210,215,.64);color:rgba(0,0,0,.56); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .5s cubic-bezier(.15,0,.2,1) .1s,background-color .2s ease,color .2s ease,transform .12s ease-out} .st-arrow svg{width:36px;height:36px;stroke-width:2.4} .st-arrow:disabled{opacity:0;pointer-events:none} @media (hover:hover){.st-arrow:not(:disabled):hover{background:hsla(240,7%,88%,.698);color:rgba(0,0,0,.64)}} .st-shelf.no-scroll .st-arrow{display:none} @media (max-width:734px),(hover:none){.st-arrow{display:none}} /* "The latest." cards: 400x500 (phone 309x450), r18, p28, shadow 2 4 12 .08; hover 2 4 16 .16 + scale 1.01 */ .st-card{box-shadow:2px 4px 12px rgba(0,0,0,.08);transition:transform .3s cubic-bezier(0,0,.5,1),box-shadow .3s cubic-bezier(0,0,.5,1)} @media (hover:hover) and (pointer:fine){.st-card:hover{transform:scale(1.01);box-shadow:2px 4px 16px rgba(0,0,0,.16),0 0 0 1px rgba(128,0,32,.08),0 14px 36px -18px rgba(128,0,32,.35)}} .st-prod-big{width:400px;height:500px;padding:28px} .st-prod-big .st-eye{font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.12px;text-transform:none} .st-prod-big h3{font-size:28px;line-height:32px;font-weight:600;letter-spacing:.196px;min-height:64px;margin-top:8px} .st-prod-big .st-price{font-size:14px;line-height:18px;color:var(--ink);margin-top:8px} .st-prod-big .st-pimg{height:220px;margin-top:12px} .st-prod-big .st-pimg img{max-height:220px;max-width:100%} @media (max-width:734px){.st-prod-big{width:309px;height:450px;padding:28px}.st-prod-big h3{font-size:21px;line-height:25px;min-height:50px}.st-prod-big .st-pimg{height:190px}.st-prod-big .st-pimg img{max-height:190px}} /* product grid tiles: r28, p28, no shadow, square picture, eyebrow 12/16, title 17/21, price 14/18 (phone p20, 14/18, 12/16) */ .st-prod:not(.st-prod-big){border-radius:28px;padding:28px;box-shadow:none} .st-prod:not(.st-prod-big) .st-pimg{order:-1;margin-bottom:16px} .st-prod:not(.st-prod-big) .st-pimg img{width:100%;height:100%} .st-prod:not(.st-prod-big) .st-eye{font-size:12px;line-height:16px;letter-spacing:-.12px;text-transform:none;margin-bottom:6px} .st-prod:not(.st-prod-big) h3{font-size:17px;line-height:21px;font-weight:600;min-height:42px;margin-top:0} .st-prod:not(.st-prod-big) .st-price{font-size:14px;line-height:18px;color:var(--ink)} @media (hover:hover) and (pointer:fine){.st-prod:not(.st-prod-big):hover{box-shadow:2px 4px 16px rgba(0,0,0,.08),0 14px 36px -18px rgba(128,0,32,.3)}} @media (max-width:734px){.st-grid{gap:11px}.st-prod:not(.st-prod-big){padding:20px}.st-prod:not(.st-prod-big) h3{font-size:14px;line-height:18px;min-height:36px}.st-prod:not(.st-prod-big) .st-price{font-size:12px;line-height:16px}.st-more-card{border-radius:28px}} .st-more-card{border-radius:28px;box-shadow:none} @media (prefers-reduced-motion:reduce){.st-card:hover{transform:none}} /* ---------- end 23d ---------- */ /* iPhone 18 Pro tile, rebuilt to apple.com's measured numbers (1440 viewport): tile 692 tall, top padding 56, headline 56/60 w600, sub 28/32 +6, buttons +17; art = letters 992x244 at top 332, phone 825 wide at top 400 */ .pro-tile{height:692px;box-sizing:border-box;padding:56px var(--gut) 0} .pro-tile .pro-h{font-size:56px;line-height:60px;font-weight:600;letter-spacing:-.28px} .pro-tile .t-sub{font-size:28px;line-height:32px;margin-top:6px;letter-spacing:.196px} .pro-tile .ctas{margin-top:17px;gap:17px} .pro-tile .pro-stage{position:absolute;left:50%;top:332px;width:992px;height:244px;margin:0;aspect-ratio:auto;translate:-50% 0;container-type:normal} .pro-word{position:absolute;inset:0} .pro-svg{display:block;width:100%;height:100%;overflow:visible} .pro-svg text{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:340.4px} .pro-fill{fill:url(#proChrome)} /* border bling: a pink-white light runs along the letter edges now and then */ .pro-run{fill:none;stroke:#ff4f86;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:140 2600;stroke-dashoffset:0;opacity:.95;animation:proRun 5.5s linear infinite} @keyframes proRun{from{stroke-dashoffset:2740}to{stroke-dashoffset:0}} .pro-tile .pro-word span{display:none} .pro-tile .pro-phone{left:50%;top:68px;width:825px;translate:-50% 0;filter:drop-shadow(0 22px 30px rgba(0,0,0,.75))} .js .pro-tile .pro-word{opacity:0;transform:translateY(40px) scale(.96);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.22,1,.36,1)} .pro-tile.in-view .pro-word{opacity:1;transform:none} .js .pro-tile .pro-phone{transform:translateY(140px)} /* rises up into place (Sir, Oct 23); was a slide in from the right */ .pro-tile.in-view .pro-phone{transform:none} .pro-tile .pro-tag{top:var(--ty)} .pro-tile .pro-tag.l{right:calc(100% + 8px)}.pro-tile .pro-tag.r{left:calc(100% + 8px)} .pro-tile .pro-tag b{font-size:11px;letter-spacing:.12em;padding:7px calc(11px - .12em) 7px 11px} .pro-tile .pro-tag i,.pro-tile.in-view .pro-tag i{width:28px} @media (max-width:1300px){.pro-tile .pro-tag{display:none}} /* longer labels (Screen protector / Lens protector, Oct 23): on narrower screens the pills go to two lines so they never run off the left/right edge; below 1340px there is no room beside the phones, so the tags hide */ .pro-tile .pro-tag b br{display:none} /* two-line break only on narrower screens */ @media (max-width:1500px){ .pro-tile .pro-tag b{line-height:1.35;border-radius:14px;text-align:center} .pro-tile .pro-tag b br{display:inline} .pro-tile .pro-tag i,.pro-tile.in-view .pro-tag i{width:20px} } @media (max-width:1340px){.pro-tile .pro-tag{display:none}} /* apple.com medium (735-1068): tile 650, headline 48/52, sub 24/28 +4, buttons +16; art 710x176 at top 298 */ @media (max-width:1068px){ .pro-tile{height:650px;padding-top:61px} .pro-tile .pro-h{font-size:48px;line-height:52px;letter-spacing:-.096px} .pro-tile .t-sub{font-size:24px;line-height:28px;margin-top:4px;letter-spacing:.216px} .pro-tile .ctas{margin-top:16px} .pro-tile .pro-stage{top:298px;width:710px;height:176px} .pro-tile .pro-phone{top:49px;width:590px} } @media (max-width:734px){ .pro-tile{height:auto;padding:52px 16px 56px} .pro-tile .pro-h{font-size:32px;line-height:36px} .pro-tile .t-sub{font-size:19px;line-height:23px} .pro-tile .pro-stage{position:relative;left:auto;top:auto;translate:none;width:100%;height:auto;aspect-ratio:992/244;margin:44px auto 0} .pro-tile .pro-phone{top:27.9%;width:83.2%} } @media (prefers-reduced-motion:reduce){.pro-run{animation:none;display:none}} .pro-fill{stroke:rgba(255,255,255,.6);stroke-width:3;paint-order:stroke;stroke-linejoin:round} .pro-run{stroke-width:5} /* RECEPTIONIST-style bling on MARVANS (from the Awanex 3D show): a pink-white light sweeps through the letters, a soft burgundy glow, and a mirror reflection under them */ .pro-word{-webkit-box-reflect:below 6px linear-gradient(transparent 40%,rgba(0,0,0,.28));filter:drop-shadow(0 0 18px rgba(232,39,79,.35))} .pro-sweep{fill:url(#proSweep);mix-blend-mode:screen} @media (prefers-reduced-motion:reduce){.pro-sweep{display:none}} /* ===== HOME TEAM SECTIONS (Oct 22) ===== */ /* --- home-pm --- */ /* ===== Marvans promise (home "pm") — final. Base: draft B; grafts from A and C (see home-pm.md). Every number cites builder/parts/APPLE_SPEC.md (section numbers in comments) or a measurement of apple.com/iphone/ (Oct 22, see home-pm.md "Fixes"). Values marked BORROWED / NOT MEASURED are flagged in home-pm.md. ===== */ .hpm{--hpm-bur:#800020;--hpm-ink:#1d1d1f; background:#f5f5f7;color:var(--hpm-ink);padding:160px 0;overflow:clip} /* §1.4, §4.6, §4.1 */ .hpm-in{width:min(1260px,87.5%);margin:0 auto} /* §1.14 */ .hpm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* screen-reader-only text */ /* header — §4.3 headline, §1.29 eyebrow, §1.24 subhead */ .hpm-head{max-width:75%} /* §4.3 */ .hpm-eyebrow{display:flex;align-items:center;gap:6px;padding-bottom:8px; /* §1.29; 6px gap NOT MEASURED (borrowed from §6.4 dot spacing) */ font-size:12px;line-height:16px;letter-spacing:-.12px;font-weight:600;color:var(--hpm-bur)} /* 12 = eyebrow size; img/logo-star.svg path */ .hpm-h{font-size:56px;line-height:60px;letter-spacing:-.28px;font-weight:600;text-wrap:balance} /* §1.21 / §4.3 */ .hpm-copy{margin-top:6px;font-size:21px;line-height:25px;letter-spacing:.231px;font-weight:400; /* §3.9, §1.24 */ color:var(--hpm-ink);text-wrap:pretty} /* §1.24 lists no gray */ .hpm-copy strong{font-weight:600} /* "No delay." — one burgundy-to-pink light pass when the headline appears; starts and ends in ink. Only where background-clip:text works; otherwise the words stay plain ink. */ @supports ((background-clip:text) or (-webkit-background-clip:text)){ .hpm-shine{background:linear-gradient(100deg,var(--hpm-ink) 0 38%,var(--hpm-bur) 46%,var(--mag,#800020) 50%,var(--hpm-bur) 54%,var(--hpm-ink) 62% 100%); background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent; -webkit-box-decoration-break:clone;box-decoration-break:clone} .hpm-js .hpm-h.hpm-on .hpm-shine{animation:hpm-sweep 1.6s var(--ease,cubic-bezier(.28,.11,.32,1)) .5s 1 both} } @keyframes hpm-sweep{from{background-position:100% 0}to{background-position:0 0}} /* actions — §2.9 row (pill + text links, gap 34px, margin-top 40px), §2.1 pill, §2.8 link + chevron */ .hpm-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;margin-top:40px} /* §2.9; row-gap 14 BORROWED from §2.5 M (only used when it wraps) */ .hpm-pill{display:inline-flex;align-items:center;height:44px;padding:11px 21px;border-radius:980px; /* §2.1 */ border:1px solid transparent;background:var(--mag,#800020);color:#fff; /* §2.2 */ font-size:17px;line-height:20px;letter-spacing:-.374px;white-space:nowrap; transition:background-color .1s linear} /* BORROWED from §5.25 (carousel arrows); §2.3 gives no timing */ /* link colour: --mag-hover (#5E0018, 5.2:1 on #f5f5f7). Plain --mag #800020 is only 4.3:1 = fails AA for 17/14px text. */ .hpm-link{color:var(--mag-hover,#5E0018);font-size:17px;line-height:25px;letter-spacing:-.374px;white-space:nowrap} /* §2.8 */ /* chevron — measured on apple.com/iphone/ (SF Pro Icons U+F301 inside .icon-after): 0.24em gap before the glyph advance, ink box 0.296em wide x 0.518em tall, 0.073em left bearing, sits on the baseline, stroke ~0.075em with round ends. At 17px: 4.08px gap + 7.14px glyph = the 11.2px-wide icon of §2.8. Drawn here as an svg sized to the ink box. */ .hpm-link svg{display:inline-block;vertical-align:baseline;width:.296em;height:.518em;margin-left:.313em; /* .313 = .24 gap + .073 bearing */ fill:none;stroke:currentColor;stroke-width:12.7;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){ .hpm-pill:hover{background:var(--mag-hover,#5E0018)} /* §2.3 */ .hpm-link:hover{text-decoration:underline;text-underline-offset:.18em} } /* proof cards — §5: white, radius 28, no shadow, padding 32, gap 20/24, on #f5f5f7; header -> cards 60px (§4.5). Each card is a 3-row subgrid (label / value / body) so values line up across a row even when one label wraps. */ .hpm-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:24px 20px;margin-top:48px} /* §5.3; header -> content 48 = measured /iphone/ section-header padding-bottom (was 60) */ .hpm-card{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start; background:#fff;border-radius:28px;padding:32px;box-shadow:none} /* §5.6–5.9 */ /* burgundy four-point star (img/logo-star.svg path scaled to 12px), right at the 32px padding line, centred on the label's first line: 32 + (21 - 12) / 2 = 36.5 */ .hpm-card::after{content:"";position:absolute;top:36.5px;right:32px;width:12px;height:12px;background:var(--hpm-bur); clip-path:path("M 3.78,11.99 3.75,11.89 3.72,11.79 3.68,11.45 3.57,10.89 3.43,10.42 3.37,10.24 3.31,10.05 3.12,9.61 2.97,9.30 2.80,9.03 2.62,8.78 2.54,8.68 2.46,8.59 2.37,8.48 2.12,8.23 1.81,7.98 1.71,7.91 1.62,7.85 1.41,7.73 1.27,7.65 0.85,7.46 0.70,7.41 0.58,7.38 0.34,7.30 0.32,7.29 0.35,7.26 0.38,7.24 0.41,7.24 0.77,7.23 1.02,7.24 4.68,7.23 4.79,7.24 4.83,7.26 4.85,7.28 4.86,7.30 4.86,7.35 4.84,7.49 4.76,7.85 4.71,8.04 4.64,8.36 4.52,8.86 4.46,9.19 4.41,9.37 4.39,9.52 4.28,9.92 4.25,10.13 4.10,10.76 4.06,10.99 4.03,11.07 3.94,11.50 3.91,11.60 3.86,11.83 3.80,11.99 Z M 5.65,7.21 5.50,7.20 5.23,7.20 5.15,7.19 5.09,7.17 5.04,7.14 5.01,7.11 4.96,7.04 4.94,6.96 4.94,6.85 4.96,6.66 5.03,6.28 5.05,6.11 5.10,5.92 5.13,5.65 5.20,5.29 5.21,5.16 5.25,4.79 5.34,4.32 5.37,4.10 5.40,3.91 5.42,3.72 5.48,3.34 5.51,3.09 5.53,3.03 5.55,2.95 5.57,2.89 5.60,2.64 5.65,2.32 5.68,2.09 5.70,1.95 5.73,1.75 5.78,1.45 5.82,1.08 5.88,0.89 5.90,0.70 5.92,0.57 5.98,0.35 6.06,0.12 6.11,0.04 6.13,0.03 6.17,0.01 6.19,0.01 6.21,0.03 6.23,0.06 6.25,0.08 6.36,0.40 6.41,0.63 6.45,0.89 6.52,1.07 6.55,1.21 6.60,1.39 6.71,1.63 6.74,1.71 6.79,1.95 6.92,2.34 7.01,2.51 7.12,2.71 7.14,2.78 7.19,2.90 7.21,2.95 7.29,3.08 7.33,3.20 7.36,3.28 7.42,3.36 7.51,3.46 7.55,3.53 7.74,3.91 7.87,4.08 7.94,4.21 7.98,4.27 8.15,4.46 8.36,4.76 8.58,4.99 8.70,5.16 8.98,5.42 9.26,5.65 9.55,5.91 9.63,5.97 9.83,6.08 10.03,6.23 10.25,6.37 10.38,6.43 10.82,6.62 11.21,6.82 11.38,6.90 11.53,6.95 11.57,6.98 11.65,7.04 11.67,7.05 11.70,7.10 11.70,7.11 11.64,7.16 11.57,7.19 11.51,7.19 11.01,7.21 10.69,7.21 8.70,7.21 8.39,7.21 Z")} .hpm-l{padding-right:24px;font-size:17px;line-height:21px;letter-spacing:-.374px;font-weight:600;color:var(--hpm-ink)} /* §1.26 (no gray given); 24 = 12 star + 12 */ .hpm-v{margin-top:14px;font-size:28px;line-height:32px;letter-spacing:.196px;font-weight:600;color:var(--hpm-ink)} /* §5.10 14px, §1.25 */ .hpm-b{margin-top:13.6px;font-size:17px;line-height:21px;letter-spacing:-.374px;font-weight:400;color:var(--hpm-ink)} /* §5.10, §1.27 */ /* proof cards as a card stack (Sir, Oct 23: "like this" = a wallet-style stack): the front card sits big in the middle, the next and previous cards peek out behind it, smaller and darker. Bank-card shape 1.586:1. Dots = APPLE_SPEC §7.4-7.7 (8px dot, current dot grows into a 32x8 pill with a 3000ms timer fill); arrows = §5b. */ .hpm{--hpm-cw:420px} .hpm-stack{position:relative;height:calc(var(--hpm-cw) / 1.586 + 40px);margin-top:56px;outline:none;touch-action:pan-y; -webkit-user-select:none;user-select:none} .hpm-stack:focus-visible .hpm-card[data-pos="0"]{outline:2px solid var(--mag,#800020);outline-offset:4px} .hpm-cards{display:block;position:relative;height:100%;margin:0;padding:0;list-style:none} .hpm-card{--x:0;--s:1;position:absolute;left:50%;top:20px;width:var(--hpm-cw);height:calc(var(--hpm-cw) / 1.586); margin-left:calc(var(--hpm-cw) / -2);display:block;padding:0;background:none;border-radius:20px; transform:translateX(calc(var(--x) * var(--hpm-cw))) scale(var(--s)); transition:transform .6s var(--ease,cubic-bezier(.28,.11,.32,1)),opacity .6s var(--ease,cubic-bezier(.28,.11,.32,1)),filter .6s var(--ease,cubic-bezier(.28,.11,.32,1))} .hpm-card[data-pos="0"]{z-index:3;box-shadow:0 22px 44px -14px rgba(0,0,0,.42)} .hpm-card[data-pos="1"],.hpm-card[data-pos="-1"]{--s:.78;z-index:2;filter:brightness(.78) saturate(.9);cursor:pointer; box-shadow:0 14px 30px -14px rgba(0,0,0,.35)} .hpm-card[data-pos="1"]{--x:.5} .hpm-card[data-pos="-1"]{--x:-.5} .hpm-card[data-pos="2"],.hpm-card[data-pos="-2"],.hpm-card[data-pos="9"]{--s:.6;z-index:1;opacity:0;pointer-events:none} .hpm-card[data-pos="2"]{--x:.8} .hpm-card[data-pos="-2"]{--x:-.8} .hpm:not(.hpm-stack-on) .hpm-card[data-pos="9"]{position:relative;left:auto;margin:0 auto 20px;opacity:1;transform:none} /* no JS: plain list */ .hpm:not(.hpm-stack-on) .hpm-stack{height:auto} /* the card face (Sir, Oct 23: "like the Apple credit card, with chrome"): brushed metal finishes, a chrome bevel edge, a chrome Marvans logo (mask over a chrome gradient, same stops as the MARVANS chrome word on the 18 Pro tile), an embedded chip, laser-etched small text and a chrome value. */ .hpm{--hpm-chrome:linear-gradient(180deg,#434a52 3%,#757d88 13%,#cbdfe9 23%,#eceee8 28%,#e4cdb6 33%,#b79a87 38%,#8e7e71 43%,#7f756c 50%,#949491 68%,#b0b0ae 78%,#c6c6c6 88%,#f8f7f7 98%)} .hpm-face{position:relative;height:100%;border-radius:20px;overflow:hidden;padding:26px 28px;display:flex;flex-direction:column; color:var(--hpm-ink,#fff);isolation:isolate;border:1.5px solid transparent; background:linear-gradient(118deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 62%,rgba(255,255,255,.10) 78%,rgba(255,255,255,0) 92%) padding-box, repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.03) 1px 2px,transparent 2px 4px) padding-box, var(--hpm-bg) padding-box, linear-gradient(135deg,#f8f7f7,#8e939a 22%,#eceee8 42%,#6d727a 62%,#e4e2dd 80%,#9aa0a8) border-box; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.35)} .hpm-face::before,.hpm-face::after{content:none} .hpm-bur{--hpm-bg:linear-gradient(135deg,#a3122f 0%,#800020 45%,#4f0014 100%)} .hpm-ti{--hpm-bg:linear-gradient(135deg,#fbfbfa 0%,#e9e8e4 45%,#cfcdc7 100%);--hpm-ink:#2a2a2c;--hpm-etch:rgba(0,0,0,.55);--hpm-etch-hi:rgba(255,255,255,.8)} .hpm-graphite{--hpm-bg:linear-gradient(135deg,#4a4a4f 0%,#2a2a2d 55%,#121214 100%)} .hpm-wine{--hpm-bg:linear-gradient(135deg,#5a1a2b 0%,#3a0f1c 55%,#1e050c 100%)} .hpm-silver{--hpm-bg:linear-gradient(135deg,#c9ccd1 0%,#9da2a9 50%,#6f747c 100%);--hpm-ink:#1d1d1f;--hpm-etch:rgba(0,0,0,.6);--hpm-etch-hi:rgba(255,255,255,.55)} .hpm-card::after{display:none} .hpm-logo{display:block;width:132px;height:37px;flex:none; background:linear-gradient(180deg,#ffffff 0%,#f1f3f5 40%,#c9cfd6 55%,#ffffff 80%,#e6e9ec 100%); -webkit-mask:url(../img/logo-old-allwhite.svg) left center/contain no-repeat;mask:url(../img/logo-old-allwhite.svg) left center/contain no-repeat; filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))} .hpm-ti .hpm-logo,.hpm-silver .hpm-logo{background:linear-gradient(180deg,#3a3d42 0%,#111214 55%,#2a2c30 100%);filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))} /* dark chrome on the light metals */ /* gold icon where a card chip would be, one per card: calendar / shop / phone / laser / thumbs-up (Sir, Oct 23) */ .hpm-chip{display:block;flex:none;width:54px;height:54px;margin-top:14px; background:linear-gradient(150deg,#fff4cf 0%,#e9c25a 28%,#fff0b8 50%,#b8861e 75%,#ecc463 100%); -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat; filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,214,120,.35))} .hpm-ti .hpm-chip,.hpm-silver .hpm-chip{background:linear-gradient(150deg,#d6a43a 0%,#8f6512 45%,#c39130 70%,#6e4c0c 100%); filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))} /* laser-etched small text; chrome big value */ .hpm-face .hpm-l{margin-top:auto;padding-right:0;font-size:13px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;font-weight:600; color:var(--hpm-etch,rgba(255,255,255,.62));text-shadow:0 1px 0 var(--hpm-etch-hi,rgba(0,0,0,.45))} .hpm-face .hpm-v{margin-top:6px;font-size:48px;line-height:52px;letter-spacing:-.4px;color:#fff; background:var(--hpm-chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))} .hpm-ti .hpm-v,.hpm-silver .hpm-v{background:linear-gradient(180deg,#5b5f66 0%,#1d1d1f 55%,#3a3d42 100%);-webkit-background-clip:text;background-clip:text; filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))} .hpm-face .hpm-b{margin-top:6px;font-size:14px;line-height:18px;color:var(--hpm-etch,rgba(255,255,255,.7));text-shadow:0 1px 0 var(--hpm-etch-hi,rgba(0,0,0,.45))} @media (hover:hover){ .hpm-card[data-pos="1"]:hover,.hpm-card[data-pos="-1"]:hover{filter:brightness(.9) saturate(.95)} } /* controls: ‹ • • ━ • • › centred under the stack */ .hpm-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:28px} .hpm-nav[hidden]{display:none} .hpm-dots{display:flex;align-items:center;height:24px;padding:0 4px} /* §7.4 */ .hpm-dot{display:flex;align-items:center;justify-content:center;height:24px;min-width:24px;padding:8px;border:0;background:none;cursor:pointer} /* §7.5 */ .hpm-dot i{position:relative;display:block;width:8px;height:8px;border-radius:999px;overflow:hidden; /* §7.6 */ background:rgba(0,0,0,.48);transition:width .25s linear,background-color .12s linear} /* §7.7 */ .hpm-dot.is-on i{width:32px;background:rgba(0,0,0,.24)} .hpm-dot.is-on i::after{content:"";position:absolute;inset:0;background:#000;border-radius:inherit;transform-origin:left;transform:scaleX(1)} .hpm-stack-on.hpm-auto .hpm-dot.is-on i::after{animation:hpm-timer var(--hpm-t,3000ms) linear both} @keyframes hpm-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}} .hpm-dot:focus-visible{outline:2px solid var(--mag,#800020);outline-offset:0;border-radius:999px} .hpm-pad{width:36px;height:36px;border:0;border-radius:36px;padding:0;cursor:pointer;flex:none; /* §5.20 */ background:rgba(210,210,215,.64);color:rgba(0,0,0,.56); /* §5.22 */ transition:background-color .1s linear,color .1s linear,opacity .1s linear} /* §5.25 */ .hpm-pad svg{display:block;width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .hpm-pad:focus-visible{outline:2px solid var(--mag,#800020);outline-offset:3px} @media (hover:hover){ .hpm-dot:hover i{background:rgba(0,0,0,.72)} .hpm-dot.is-on:hover i{background:rgba(0,0,0,.24)} .hpm-pad:hover{background:rgba(223,223,227,.6976);color:rgba(0,0,0,.64)} .hpm-pad:active{background:rgba(193,193,198,.6544)} } @media (max-width:734px){ .hpm{--hpm-cw:min(300px,calc(100vw - 70px))} /* audit Oct 24: 260 wide cut off the last line */ .hpm-stack{margin-top:36px} .hpm-face{padding:16px 18px} .hpm-logo{width:96px;height:27px} .hpm-chip{width:32px;height:32px;margin-top:8px} .hpm-face .hpm-l{font-size:11px;line-height:14px} .hpm-face .hpm-b{font-size:12px;line-height:16px} .hpm-face .hpm-v{margin-top:3px;font-size:30px;line-height:34px} .hpm-pad{display:none} /* phones: swipe + dots */ } @media (prefers-reduced-motion:reduce){ .hpm-card,.hpm-dot i{transition:none} } /* reveal — §12: 30px rise, opacity .9s, move .7s, .15s stagger (delay set in JS). Hidden only when JS ran (§12.7). */ .hpm-js .hpm-r{opacity:0;transform:translateY(30px); transition:opacity .9s var(--ease,cubic-bezier(.28,.11,.32,1)),transform .7s var(--ease,cubic-bezier(.28,.11,.32,1))} .hpm-js .hpm-r.hpm-on{opacity:1;transform:none} /* medium 735–1068 (§0): header full width */ @media (max-width:1068px){ .hpm-head{max-width:none} } /* small ≤734 (§0): §4.1 96/96, 16px gutters (Sir), phone type */ @media (max-width:734px){ .hpm{padding:96px 0} .hpm-in{width:auto;margin:0 16px} .hpm-h{font-size:28px;line-height:32px;letter-spacing:.196px} /* §4.3 M */ .hpm-copy{margin-top:4px;font-size:19px;line-height:23px;letter-spacing:.228px} /* §3.9 M, §1.24 M */ .hpm-cta{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:27px;row-gap:14px} /* pill on its own row, both links together below */ .hpm-pill{grid-column:1/-1;justify-self:start} /* measured: apple.com/iphone/ product-tile row at 390px = gap 27px, margin-top 40px */ .hpm-pill{height:36px;padding:8px 15px;font-size:14px;line-height:18px;letter-spacing:-.224px} /* §2.1 M */ .hpm-link{font-size:14px;line-height:20px;letter-spacing:-.224px} /* §2.8 M (chevron scales in em) */ .hpm-l{font-size:14px;line-height:18px;letter-spacing:-.224px} /* §1.26 M */ .hpm-v{font-size:21px;line-height:25px;letter-spacing:.231px} /* §5.10 M / §1.25 M */ .hpm-b{margin-top:11.2px;font-size:14px;line-height:18px;letter-spacing:-.224px} /* §5.10 M, §1.27 M */ } /* reduced motion — §12.7: everything shown, no movement, no light pass */ @media (prefers-reduced-motion:reduce){ .hpm-js .hpm-r{opacity:1;transform:none;transition:none} .hpm-js .hpm-h.hpm-on .hpm-shine{animation:none} .hpm-pill{transition:none} } /* --- home-sy --- */ /* ===== home-sy: repair story carousel (10% -> opened -> 100%). Final, judged from draft-sy-a/b/c. Numbers in [brackets] = builder/parts/APPLE_SPEC.md sections. "DRAW" = our own illustration proportions (not an Apple measurement; listed in home-sy.md). ===== */ .hsy{ --hsy-ink:#f5f5f7; /* [1.3] text on dark */ --hsy-ink-2:var(--dark-ink-2,#a1a1a6); /* site token: secondary on dark. NOT MEASURED (APPLE_SPEC has only #6e6e73 for light) */ --hsy-pink:var(--mag-dark,#B8324F); /* [0] Marvans pink on black */ --hsy-star:#c4164f; /* Marvans star on dark = img/logo-star-white.svg (brief says #800020; Sir to OK) */ --hsy-ease:var(--ease,cubic-bezier(.28,.11,.32,1)); /* site ease; [12.6] NOT MEASURED */ --hsy-move:.7s; /* [12.3] */ --hsy-fade:.9s; /* [12.2] */ position:relative;background:#000;color:var(--hsy-ink); /* [1.5] */ padding:53px 0 63px; /* top [7.1]; bottom borrowed from [3.2] dark full tile, §7 bottom NOT MEASURED */ overflow:clip;text-align:center } .hsy-in{max-width:1292px;margin:0 auto;padding:0 16px} /* [1.14] 1260 content + 2x16 gutter (border-box) */ /* ---- captions: all three in one grid cell, so the block never jumps ---- */ .hsy-caps{display:grid} .hsy-cap{grid-area:1/1} .hsy-h{font-size:56px;line-height:60px;font-weight:600;letter-spacing:-.28px;color:var(--hsy-ink)} /* [7.1][1.21] */ .hsy-p{margin-top:6px;font-size:28px;line-height:32px;letter-spacing:.196px;color:var(--hsy-ink-2);text-wrap:pretty} /* [3.9] full, [1.23] full tile */ .hsy-p strong{color:var(--hsy-ink);font-weight:400} /* [1.23] weight 400 */ .js .hsy-cap{opacity:0;visibility:hidden;transform:translateY(30px); /* [12.1] */ transition:opacity var(--hsy-fade) var(--hsy-ease),transform var(--hsy-move) var(--hsy-ease),visibility 0s linear var(--hsy-fade)} .js .hsy-cap.is-on{opacity:1;visibility:visible;transform:none; transition:opacity var(--hsy-fade) var(--hsy-ease),transform var(--hsy-move) var(--hsy-ease),visibility 0s} html:not(.js) .hsy-caps{gap:40px} /* NOT MEASURED: no-JS fallback only */ html:not(.js) .hsy-cap{grid-area:auto} /* ---- stage: 930 x 523 [7.2], square corners [7.3]; header -> content 60px [4.5] ---- */ .hsy-stage{position:relative;width:min(930px,100%);aspect-ratio:930/523;margin:60px auto 0; overflow:hidden;display:grid;place-items:center;touch-action:pan-y;user-select:none;-webkit-user-select:none} /* our own drawing of a plain phone (no logo, no notch, no brand shape). Colours = spec greys only */ /* DRAW */ /* DRAW */ /* [1.1], rgb(66,66,69) [5.23] */ /* [1.5], [1.2] */ /* DRAW (radius too) */ /* DRAW radius */ /* rgb(134,134,139) [9.3] */ /* DRAW */ /* DRAW */ /* DRAW */ /* swap .4s [10.5] */ .hsy-pct{font-size:21px;line-height:25px;font-weight:600;letter-spacing:.231px;color:var(--hsy-pink); font-variant-numeric:tabular-nums;transition:color .4s ease-in-out} /* [1.24] size */ /* step 1 = 10% · step 2 = opened, battery out · step 3 = 100% */ /* DRAW */ .hsy[data-step="2"] .hsy-pct{color:var(--hsy-ink)} /* ---- controls [7.4]-[7.9]; full width so play sits 12px from the screen edge [7.9] ---- */ .hsy-ctl{position:relative;display:flex;justify-content:center;align-items:center;margin:12px 0;padding:0 16px} /* [7.4] */ .hsy:not(.is-ready) .hsy-ctl{visibility:hidden} /* controls only once JS works */ html:not(.js) .hsy-ctl{display:none} .hsy-nav{display:flex;align-items:center;height:56px;padding:0 16px;border-radius:999px} /* [7.8] */ .hsy-dot{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:8px;cursor:pointer;display:block; border-radius:999px;-webkit-tap-highlight-color:transparent} /* 24x24 hit [7.5] */ .hsy-dot i{position:relative;display:block;width:8px;height:8px;border-radius:999px;overflow:hidden; background:rgba(255,255,255,.48);transition:width .25s linear,background-color .12s linear} /* [7.6][7.7], greys mirrored for black */ .hsy-dot.is-on i{width:32px} /* [7.7] pill */ .hsy-dot i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--hsy-ink); transform-origin:left center;transform:scaleX(0)} .hsy-dot.is-done i::after{transform:scaleX(1)} /* steps already seen stay filled */ .hsy-dot.is-on.is-t i::after{animation:hsy-timer 3000ms linear forwards} /* [7.7] 3000ms */ .hsy.is-paused .hsy-dot.is-on i::after,.hsy.is-hold .hsy-dot.is-on i::after{animation-play-state:paused} .hsy.is-stopped .hsy-dot.is-on i::after{animation:none;transform:scaleX(1)} @keyframes hsy-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (hover:hover){.hsy-dot:not(.is-on):hover i{background:rgba(255,255,255,.72)}} /* [7.6] */ .hsy-dot:focus-visible{outline:none} .hsy-dot:focus-visible i{outline:2px solid var(--hsy-pink);outline-offset:3px} /* play / pause: 24px circle [7.9], dark-section colours [5.23], transition [5.25] */ .hsy-play{position:absolute;right:12px;top:50%;margin-top:-12px;width:24px;height:24px;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(66,66,69,.72);color:rgba(255,255,255,.8);transition:background .1s linear,color .1s linear; -webkit-tap-highlight-color:transparent} .hsy-play::before{content:"";position:absolute;inset:-10px} /* 44px touch area [5.13] */ .hsy-dot{position:relative} .hsy-dot::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px} /* 44px tall finger target, look unchanged */ .hsy-play svg{position:absolute;inset:0;width:24px;height:24px;fill:currentColor} @media (hover:hover){.hsy-play:hover{background:rgba(73,73,76,.7256);color:#fff}} /* [5.23] hover */ .hsy-play:focus-visible{outline:2px solid var(--hsy-pink);outline-offset:2px;border-radius:50%} /* [1.12] */ /* ---- scroll reveal [12.1]-[12.4]: only hidden after JS is ready, so a failed script never hides content ---- */ .hsy.is-ready:not(.is-in) .hsy-rv{opacity:0;transform:translateY(30px)} .hsy.is-ready .hsy-rv{transition:opacity var(--hsy-fade) var(--hsy-ease),transform var(--hsy-move) var(--hsy-ease); transition-delay:calc(var(--hsy-i,0) * .15s)} .hsy-stage{--hsy-i:1} .hsy-ctl{--hsy-i:2} /* ---- phones ≤734 ---- */ @media (max-width:734px){ .hsy{padding:39px 0 43px} /* [3.2] M */ .hsy-h{font-size:32px;line-height:36px;letter-spacing:.128px} /* [7.1] M */ .hsy-p{margin-top:4px;font-size:19px;line-height:23px;letter-spacing:.228px} /* [3.9][1.23] M */ .hsy-stage{width:min(275px,100%);aspect-ratio:275/496;margin-top:32px} /* [7.2] M, [4.5] M */ /* DRAW */ /* DRAW: both halves fit 275px */ .hsy-pct{font-size:17px;line-height:21px;letter-spacing:-.374px} /* [1.26] size */ .hsy-play{right:16px} /* Sir's 16px gutter */ } /* ---- reduced motion: no moving parts, no reveal, fades only, no autoplay (JS) ---- */ @media (prefers-reduced-motion:reduce){ .js .hsy-cap,.js .hsy-cap.is-on{transform:none;transition:opacity .2s linear,visibility 0s linear .2s} .js .hsy-cap.is-on{transition:opacity .2s linear,visibility 0s} .hsy-dot i{transition:none} .hsy.is-ready:not(.is-in) .hsy-rv{opacity:1;transform:none} .hsy.is-ready .hsy-rv{transition:none} } /* --- home-grid --- */ /* ===== Repairs grid (home "grid") — judged final. Base = draft A (apple.com home half tiles), grafts from B (burgundy star in the eyebrow slot, minmax columns, overflow fallback, print safety) and C (price line "Ask for price", site reveal trigger line). Every number: builder/parts/APPLE_SPEC.md. ===== */ /* §3.4 2 columns, 12px gap, 12px outer side padding; §3.3 12px below comes from .home main gap:12px (no own margin, or it doubles to 24) */ .hgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 12px;margin:0; background:var(--white,#fff);font-family:var(--font,system-ui,-apple-system,sans-serif);overflow:hidden;overflow:clip} /* §3.5 580px tall, §3.6 padding 53px top / 60px bottom, §3.7 radius 0, §3.11 centered copy */ .hgrid-tile{position:relative;overflow:hidden;overflow:clip;height:580px;padding-top:53px;padding-bottom:60px;border-radius:0; display:flex;flex-direction:column;align-items:center;text-align:center;isolation:isolate} .hgrid-light{background:#f5f5f7;color:#1d1d1f} /* §3.8 + §1.4 + §1.1 */ .hgrid-dark{background:#000;color:#f5f5f7} /* §3.8 + §1.5 + §1.3 */ /* §3.13 whole tile is a link (to Learn more); the pills sit above it */ .hgrid-cover{position:absolute;inset:0;z-index:1} .hgrid-copy{position:relative;z-index:2;max-width:100%;padding:0 16px;pointer-events:none} .hgrid-copy a{pointer-events:auto} /* Marvans star (img/logo-star.svg path) in the eyebrow slot: §1.29 12px size on a 16px line, 8px below. Burgundy #800020 on light; on black it uses --mag-dark (burgundy would vanish on #000). */ /* §1.22 half-tile headline 40/44 600, letter-spacing normal */ .hgrid-title{margin:0;font-size:40px;line-height:44px;font-weight:600;letter-spacing:normal} /* §1.24 half-tile subhead 21/25 400 .231px; §3.9 half 0-3px -> 3px */ .hgrid-sub{margin:3px 0 0;font-size:21px;line-height:25px;font-weight:400;letter-spacing:.231px} /* §1.28 tile callout 19/23 .228px #6e6e73; §3.10 9px under the subhead. Dark tile callout color is NOT MEASURED -> uses the measured text-on-dark §1.3 (see home-grid.md). */ .hgrid-callout{margin:9px 0 0;font-size:19px;line-height:23px;font-weight:400;letter-spacing:.228px;color:#6e6e73} .hgrid-dark .hgrid-callout{color:#f5f5f7} /* §2.6 pills 12px under copy (half tile); §2.5 14px gap (half tile) */ .hgrid-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:12px} /* §2.7 half-tile pill: 14/18, padding 8px 15px, 36px; §2.1 radius 980px, 1px transparent border, min-width 26px; §1.11 -.224px */ .hgrid-pill{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:36px;min-width:26px; padding:8px 15px;border:1px solid transparent;border-radius:980px;font-size:14px;line-height:18px;font-weight:400; letter-spacing:-.224px;white-space:nowrap;text-decoration:none;background:var(--mag,#800020);color:#fff; /* §2.2 */ transition:background-color .1s linear,color .1s linear,border-color .1s linear} /* §5.25 */ .hgrid-pill-2{background:transparent;border-color:var(--mag,#800020);color:var(--mag,#800020)} /* §2.4 */ .hgrid-dark .hgrid-pill-2{border-color:#f5f5f7;color:#f5f5f7} /* audit Oct 24: #B8324F on black was ~3.4:1, too faint */ .hgrid-light .hgrid-pill-2{border-color:var(--mag-hover,#5E0018);color:var(--mag-hover,#5E0018)} /* contrast: #800020 on #f5f5f7 = 4.30:1 (fails 4.5); --mag-hover = 5.21:1 */ @media (hover:hover){ .hgrid-pill:hover{background:var(--mag-hover,#5E0018);color:#fff} /* §2.3 */ .hgrid-pill-2:hover,.hgrid-dark .hgrid-pill-2:hover{background:var(--mag-hover,#5E0018);border-color:var(--mag-hover,#5E0018);color:#fff} /* §2.4 */ } .hgrid-pill:active{background:var(--mag-hover,#5E0018);border-color:var(--mag-hover,#5E0018);color:#fff} .hgrid-pill:focus-visible{outline:2px solid var(--mag,#800020);outline-offset:3px} .hgrid-dark .hgrid-pill:focus-visible{outline-color:var(--mag-dark,#B8324F)} .hgrid-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* §3.12 picture fills the tile under the copy. Our renders are cut-outs on black, so contain + the approved live .gt-pic.feather.pad values (86% tall, 7% up, same mask). 24px gap above (phone 20px) is BORROWED from §6.3 (product-tile image box): Apple's half tile has no copy-to-image gap — its image is absolute behind the copy (measured at 900/1060px too). See home-grid.md. */ .hgrid-pic{position:relative;flex:1;width:100%;min-height:0;margin-top:24px} .hgrid-pic img{position:absolute;left:50%;bottom:7%;height:86%;width:auto;max-width:92%;transform:translateX(-50%); object-fit:contain;object-position:bottom; --hgrid-m:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 82%,transparent); -webkit-mask-image:var(--hgrid-m);mask-image:var(--hgrid-m);-webkit-mask-composite:source-in;mask-composite:intersect} /* line drawings: same values as the live .gt-art rule */ /* sized by HEIGHT with the same box as .hgrid-pic img, so both drawings share top + bottom lines */ /* §12 reveal: opacity 0 + 30px -> shown; opacity .9s, move .7s, .15s stagger (JS sets --hgrid-d). §12.6 easing NOT MEASURED -> the site's --ease. Only hidden once JS has run (no JS = shown, §12.7). */ .hgrid.hgrid-js [data-hgrid-in]{opacity:0;transform:translateY(30px); transition:opacity .9s var(--ease,cubic-bezier(.28,.11,.32,1)) var(--hgrid-d,0s),transform .7s var(--ease,cubic-bezier(.28,.11,.32,1)) var(--hgrid-d,0s)} .hgrid.hgrid-js [data-hgrid-in].hgrid-in{opacity:1;transform:none} /* medium (Apple 735-1068px), measured on apple.com home half tiles at 900px and 1060px viewports (Oct 22): tile 490px tall, padding 44px top / 48px bottom, 12px gap + 12px sides (unchanged), headline 32/36 .064px, subhead 19/23 .228px 4px below, pills 12px below copy (unchanged), pill 14/36 (unchanged). Callout + star at medium NOT MEASURED -> keep the desktop values. */ @media (min-width:735px) and (max-width:1068px){ .hgrid-tile{height:490px;padding-top:44px;padding-bottom:48px} .hgrid-title{font-size:32px;line-height:36px;letter-spacing:.064px} .hgrid-sub{margin-top:4px;font-size:19px;line-height:23px;letter-spacing:.228px; min-height:46px} /* row alignment (ours, not Apple): reserve 2 x the 23px line so pills line up in a row */ } /* phone (Apple small <=734px): §3.4 1 column full bleed, 12px gap; §3.5 500px; §3.6 padding-top 39px */ @media (max-width:734px){ .hgrid{grid-template-columns:minmax(0,1fr);padding:0} .hgrid-tile{height:500px;padding-top:39px;padding-bottom:43px} /* §3.5 M, §3.6 M */ .hgrid-copy{padding:0 16px} /* Sir's 16px gutter */ .hgrid-title{font-size:32px;line-height:36px;letter-spacing:.128px} /* §1.22 M */ .hgrid-sub{margin-top:4px;font-size:19px;line-height:23px;letter-spacing:.228px} /* §1.24 M, §3.9 M */ .hgrid-callout{margin-top:8px;font-size:14px;line-height:18px;letter-spacing:-.224px} /* §1.28 M, §3.10 M */ .hgrid-pills{margin-top:11px} /* §2.6 M */ .hgrid-pic{margin-top:20px} /* borrowed §6.3 M */ } /* §12.7 reduced motion: shown at once, no movement */ @media (prefers-reduced-motion:reduce){ .hgrid.hgrid-js [data-hgrid-in]{opacity:1;transform:none;transition:none} .hgrid-pill{transition:none} } /* --- home-explore --- */ /* ===== Home: Explore the inside (final, judged from drafts a/b/c) ===== Every number has its APPLE_SPEC.md section in the comment. Blue -> Marvans pink per §0. Burgundy star = img/logo-star.svg path, sized/placed exactly like the approved store headline star (.st-h2 b::after). */ .hexplore{ --hx-ink:#1d1d1f; --hx-ink-2:#6e6e73; --hx-line:#d2d2d7; /* §1.1 §1.2 §1.8 */ --hx-burg:#800020; --hx-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='28 28 191 191'%3E%3Cpath d='M88.2,218.8 87.7,217.2 87.2,215.6 86.5,210.2 84.8,201.4 82.6,193.8 81.7,191.0 80.7,188.0 77.7,181.0 75.2,176.0 72.5,171.7 69.7,167.8 68.5,166.2 67.2,164.8 65.8,163.0 61.7,159.0 56.8,155.0 55.2,153.9 53.8,152.9 50.5,151.0 48.2,149.8 41.5,146.8 39.2,146.0 37.2,145.5 33.4,144.2 33.1,144.0 33.5,143.6 34.0,143.3 34.5,143.2 40.2,143.1 44.2,143.2 102.5,143.1 104.2,143.3 104.8,143.5 105.2,143.9 105.4,144.2 105.4,145.0 105.0,147.2 103.7,153.0 102.9,156.0 101.9,161.0 100.0,169.0 99.0,174.2 98.2,177.2 97.8,179.5 96.2,185.9 95.6,189.2 93.2,199.2 92.6,203.0 92.2,204.2 90.7,211.0 90.2,212.6 89.5,216.3 88.5,218.8Z'/%3E%3Cpath d='M118.0,142.8 115.5,142.6 111.2,142.6 110.0,142.4 109.0,142.1 108.2,141.6 107.8,141.1 107.0,140.0 106.6,138.8 106.6,137.0 107.0,134.0 108.0,128.0 108.4,125.2 109.2,122.2 109.7,118.0 110.7,112.2 111.0,110.2 111.5,104.2 113.0,96.7 113.4,93.2 114.0,90.2 114.3,87.2 115.2,81.2 115.7,77.2 116.0,76.2 116.4,75.0 116.7,74.0 117.1,70.0 117.9,65.0 118.4,61.2 118.8,59.1 119.2,55.8 120.0,51.0 120.7,45.2 121.6,42.2 121.9,39.2 122.2,37.0 123.2,33.5 124.5,29.9 125.2,28.6 125.5,28.4 126.2,28.2 126.5,28.2 126.8,28.5 127.2,29.0 127.4,29.2 129.2,34.4 130.1,38.0 130.7,42.2 131.7,45.0 132.2,47.2 133.1,50.2 134.8,54.0 135.3,55.2 136.1,59.0 138.1,65.2 139.5,68.0 141.3,71.2 141.7,72.2 142.4,74.2 142.8,75.0 144.0,77.0 144.7,79.0 145.2,80.2 146.1,81.5 147.5,83.1 148.2,84.2 151.2,90.2 153.2,93.0 154.3,95.0 155.0,96.0 157.7,99.0 161.1,103.8 164.5,107.4 166.5,110.2 171.0,114.2 175.4,118.0 180.0,122.0 181.2,123.0 184.5,124.7 187.7,127.2 191.2,129.4 193.2,130.4 200.2,133.3 206.5,136.5 209.2,137.8 211.5,138.7 212.2,139.1 213.5,140.0 213.8,140.2 214.3,141.0 214.3,141.2 213.3,142.0 212.2,142.4 211.2,142.5 203.2,142.7 198.2,142.8 166.5,142.7 161.5,142.8Z'/%3E%3C/svg%3E"); background:#fff; color:var(--hx-ink); /* §4.6 white (why. after it is #f5f5f7) */ padding:160px 0; /* §4.1 D */ overflow-x:clip; /* no sideways page scroll */ } /* §1.14 */ /* ---- header: §4.2 flex row, space-between; §4.3 headline; §4.4 link on the right; §4.5 60px to content ---- */ /* measured /iphone/ 1440: .section-header padding-bottom 48px, content starts right after (was 60) */ /* measured /iphone/ 1440 (Oct 22): the header link's 25px line box sits on the headline's LAST line, its top 30.5px below a 60px headline (icon-copy top +33px, 20px tall; same offset under a 2-line 120px headline: +93). Not centred, so §4.4 'centred' is corrected here. */ /* §4.3 */ /* §1.21 / §4.3 */ /* §1.24, same as .hhow-sub / .hvisit-sub size; 6px = §3.9 */ /* ---- text link with 11px chevron: §2.8 ---- */ /* measured /iphone/ 'Compare all models': icon span margin-left 0, right after the text; the 11.22px icon box holds the chevron with its own .24em lead-in, like our path starting at x3.5 */ /* same chevron as .hpm-link (measured) */ /* ---- body: §10.1 list 350px. Gap re-measured on /iphone/ at 1440 (Oct 22): list ends x530, picture area starts x620 -> 90px (the spec's 'x578 / 50px' was the hidden per-item image box at x580, not the picture column). align-items:start so the list never re-centres (jumps) when a part with more lines opens. ---- */ /* ---- picture panel: measured /iphone/ accordion card at 1440 (Oct 22): 784px tall, 28px radius. Apple's card is #f5f5f7; ours stays #000 because our render is on black (a #f5f5f7 card would show a black box) — FLAGGED for Sir in home-explore.md ---- */ /* 588 = 784 x 3/4 (image is 1080x1440) */ /* same feather as live .gt-pic.feather.pad */ /* ---- "+" hotspots: §5.13 44px hit area, 36px circle, 15px plus, 0.1s linear. COLOUR SWAP, FLAGGED FOR SIR: §5.13's #1d1d1f circle is almost invisible on our #000 panel, so the dots use the measured §5.23 dark-section control colours instead. Needs Sir's OK (see home-explore.md). ---- */ .hexplore-hot{position:absolute;left:var(--hexplore-x);top:var(--hexplore-y);width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent} /* §5.23 colours (flagged swap) / §5.13 transition */ /* §0 blue -> --mag */ .hexplore-hot[aria-pressed=true] svg{transform:rotate(45deg)} /* "+" -> "x", §10.5 0.4s ease-in-out */ .hexplore-hot:focus-visible{outline:none} /* ---- accordion: §10.2 dividers, §10.3 titles, §10.4 text, §10.5 0.4s ease-in-out ---- */ .hexplore-item+.hexplore-item{border-top:1px solid var(--hx-line)} .hexplore-h{margin:0;font:inherit} .hexplore-btn{display:block;width:100%;margin:0;padding:28px 0 0;border:0;background:none;color:var(--hx-ink);text-align:left;cursor:pointer; font-family:inherit;font-size:28px;line-height:32px;font-weight:600;letter-spacing:.216px;transition:padding .4s ease-in-out;-webkit-tap-highlight-color:transparent} .hexplore-item[data-open=false] .hexplore-btn{padding-bottom:28px} .hexplore-btn:focus-visible{outline:2px solid var(--mag,#800020);outline-offset:3px;border-radius:6px} /* Marvans star after the open title, like the star after "Marvans" in the logo. Size/offset = the approved store headline star (.st-h2 b::after: .34em, .08em, .62em). Always laid out, so nothing shifts. */ .hexplore-btn::after{content:"";display:inline-block;width:.34em;height:.34em;margin-left:.08em;vertical-align:baseline;position:relative;bottom:.62em;background:var(--hx-burg); -webkit-mask:var(--hx-star) center/contain no-repeat;mask:var(--hx-star) center/contain no-repeat;opacity:0;transition:opacity .4s ease-in-out} .hexplore-item[data-open=true] .hexplore-btn::after{opacity:1} .hexplore-tray{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-in-out} /* §10.5 height */ .hexplore-item[data-open=false] .hexplore-tray{grid-template-rows:0fr} .hexplore-in{min-height:0;overflow:hidden;padding-bottom:37px} /* measured /iphone/ 1440: .accordion-content padding-bottom 37px */ /* inset ring: overflow:hidden would clip a 3px offset */ .hexplore-item[data-open=false] .hexplore-in{padding-bottom:0} .hexplore-p{margin:21px 0 0;max-width:83.3333%;font-size:17px;line-height:25px;font-weight:400;letter-spacing:-.374px} /* §10.4; max-width measured 83.3333% (= 292px of 350) at every width */ /* §9.8 link 13px under body */ /* ---- "Also at the shop." shelf: §8.13 67px gap (BORROWED: Apple's store card-bottom -> next shelf headline gap, used after our accordion), §8.3 headline with gray half, §8.4 24px to row, §8.14 136x148 chips ---- */ /* = .st-h2 b::after */ /* row measured on apple.com/store at 1440 (Oct 22): platter padding 16px top / 40px bottom, 5px between chips (item margin-right). margin-left:-8px pulls the row out by the chip's 8px side padding so the first image and label start on the headline's left edge (Apple's own chip box starts on the headline, its content 8px in — changed on purpose for Sir's alignment rule). */ /* chip measured on apple.com/store at 1440: content padding 18px top / 8px sides / 16px bottom, label block padding-top 11px, label 14/20 600 left-aligned at the 8px edge. Image box 120x78 (§8.14). The image's place above the label is from Apple's markup order; its exact offset could only be read with Apple's scripts off, so it is flagged in home-explore.md. */ /* apple.com/store .rf-productnav-card-title: block, 120px wide = image, text-align:center (measured Oct 22) */ /* ---- §12 reveal: opacity 0 + 30px, opacity 0.9s, move 0.7s, 0.15s stagger (JS adds the class). §12.6 easing not measured -> site --ease ---- */ .hexplore.hexplore-js [data-hexplore-in]{opacity:0;transform:translateY(30px); transition:opacity .9s var(--ease,cubic-bezier(.28,.11,.32,1)),transform .7s var(--ease,cubic-bezier(.28,.11,.32,1));transition-delay:var(--hexplore-d,0s)} .hexplore.hexplore-js [data-hexplore-in].hexplore-shown{opacity:1;transform:none} /* ---- medium 735-1068 (§0 breakpoint): picture on top, list under it; §5.2 medium 628px ---- */ /* ---- small <=734: §4.1 96px, 16px gutters (Sir), §4.2 column + 8px gap + 32px bottom, §4.3 M ---- */ @media (max-width:734px){ .hexplore{padding:96px 0} /* §4.4 M: under the headline */ /* §1.24 M, same as .hhow-sub M; 4px = §3.9 M */ /* §2.8 M */ /* §4.5 M */ /* §10.6 phone accordion MEASURED Oct 22 on /iphone/ in a 390px-wide frame with Apple's scripts running: title 21/25 600 .228px, padding 21px, text 14/20 -.224px 16px down, tray bottom 40px */ .hexplore-btn{padding-top:21px;font-size:21px;line-height:25px;letter-spacing:.228px} .hexplore-item[data-open=false] .hexplore-btn{padding-bottom:21px} .hexplore-p{margin-top:16px;font-size:14px;line-height:20px;letter-spacing:-.224px} .hexplore-in{padding-bottom:40px} /* §8.3 M */ /* bleeds to the screen edge; 8px start = 16px gutter - chip's 8px padding, so content lines up with the headline */ /* §8.14 M */ /* phone chip image NOT MEASURED (Apple's store would not lay out its phone chips in a frame): image keeps 120x78 and shrinks to fit via max-width:100% (100px chip - 16px padding = 84px wide). Flagged in home-explore.md. */ } /* ---- reduced motion: §12.7 shown, no movement ---- */ @media (prefers-reduced-motion:reduce){ .hexplore-btn,.hexplore-btn::after,.hexplore-tray{transition:none} .hexplore.hexplore-js [data-hexplore-in]{opacity:1;transform:none;transition:none} } /* --- home-why --- */ /* ===== Why Marvans (home "why") — final, judged Oct 22. Classes: hwhy-*. Every number cites builder/parts/APPLE_SPEC.md (§) ===== */ .hwhy{background:#f5f5f7;color:#1d1d1f;padding:160px 0;overflow:hidden;overflow:clip} /* §1.4/§5.7 gray, §4.1 160/160; clip = no page sideways scroll */ /* header row — §4.2–§4.5 */ .hwhy-head{width:min(1260px,87.5%);margin:0 auto;padding-bottom:48px; /* §1.14; §4.5 header block 108 - 60px line = 48 */ display:flex;justify-content:space-between;align-items:flex-start;gap:20px} /* §4.2 */ .hwhy-head>.hwhy-link{margin-top:30.5px} /* same measured offset as .hexplore-head link (apple.com/iphone Oct 22) */ .hwhy-h{max-width:75%;font-size:56px;line-height:60px;letter-spacing:-.28px;font-weight:600;color:#1d1d1f;text-wrap:balance} /* §4.3 */ /* burgundy four-point star after the headline: same size/place as the approved site headline star (.st-h2 b::after in css/style.css, .hexplore-btn::after) */ /* relative top, not vertical-align: keeps the 60/32px line box */ .hwhy-link{flex:none;display:inline-block;color:var(--mag-hover,#5E0018); font-size:17px;line-height:25px;letter-spacing:-.374px;white-space:nowrap} /* §2.8; colour = site --mag-hover (5.21:1 on #f5f5f7, AA) */ .hwhy-link svg{display:inline-block;vertical-align:baseline;width:.296em;height:.518em;margin-left:.313em;fill:none;stroke:currentColor;stroke-width:12.7;stroke-linecap:round;stroke-linejoin:round} /* same chevron as .hpm-link (measured) */ @media (hover:hover){.hwhy-link:hover{text-decoration:underline;text-underline-offset:.18em}} /* card row — §5.4 first card on the 1260 edge, §5.5 snap; scrolls inside itself only */ .hwhy-scroller{--hwhy-in:calc(50% - .5*min(1260px,87.5%));overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-padding-inline:var(--hwhy-in);overscroll-behavior-x:contain; scrollbar-width:none;-webkit-overflow-scrolling:touch} .hwhy-scroller::-webkit-scrollbar{display:none} .hwhy-scroller:focus-visible{outline:2px solid var(--mag,#800020);outline-offset:-2px;border-radius:28px} .hwhy-track{display:flex;gap:20px;width:max-content;margin:0;padding:0 var(--hwhy-in);list-style:none} /* §5.3 */ .hwhy-card{position:relative;flex:none;width:372px;height:523px;box-sizing:border-box; /* §5.1, §5.2 "Why Apple" 523 */ padding:32px 32px 0;background:#fff;border-radius:28px;box-shadow:none;overflow:hidden; /* §5.9, §5.6, §5.7, §5.8 */ scroll-snap-align:start} /* §5.5 (no hover grow: cards are not links) */ .hwhy-label{margin:0;font-size:17px;line-height:21px;letter-spacing:-.374px;font-weight:600;color:#1d1d1f} /* §1.26 */ .hwhy-title{margin:14px 0 0;font-size:28px;line-height:32px;letter-spacing:.196px;font-weight:600;color:#1d1d1f;text-wrap:balance} /* §5.10, §1.25 */ .hwhy-body{margin:13.6px 0 0;font-size:17px;line-height:21px;letter-spacing:-.374px;font-weight:400;color:#1d1d1f;text-wrap:pretty} /* §5.10, §1.27 */ .hwhy-ic{position:absolute;left:32px;bottom:32px;line-height:0} /* §5.9 32px inset */ .hwhy-ic svg{width:48px;height:48px;fill:none;stroke:#800020;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* site .feat icon 48px / 1.5, Marvans burgundy */ /* paddlenav — §5b, mouse/trackpad only (JS unhides) */ .hwhy-nav{width:min(1260px,87.5%);margin:36px auto 0;display:flex;justify-content:flex-end;gap:18px} /* §5.21 */ .hwhy-nav[hidden]{display:none} .hwhy-paddle{width:36px;height:36px;padding:0;border:0;border-radius:36px;cursor:pointer; /* §5.20 */ display:grid;place-items:center;background:rgba(210,210,215,.64);color:rgba(0,0,0,.56); /* §5.22 */ transition:background .1s linear,color .1s linear,opacity .1s linear} /* §5.25 */ .hwhy-paddle svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){.hwhy-paddle:hover{background:rgba(223,223,227,.6976);color:rgba(0,0,0,.64)}} /* §5.22 hover */ .hwhy-paddle:active{background:rgba(193,193,198,.6544)} /* §5.22 active */ .hwhy-paddle:disabled{opacity:.42;pointer-events:none} /* §5.24 */ /* reveal — §12: 30px rise, opacity .9s, move .7s, .15s stagger (delay set by JS). Ease = site --ease (§12.6 NOT MEASURED) */ .hwhy-js .hwhy-r,.hwhy-js .hwhy-card{opacity:0;transform:translateY(30px); transition:opacity .9s var(--ease,cubic-bezier(.28,.11,.32,1)),transform .7s var(--ease,cubic-bezier(.28,.11,.32,1))} .hwhy-js .hwhy-on,.hwhy-js .hwhy-track.hwhy-on .hwhy-card{opacity:1;transform:none} /* medium 735–1068 (§0): card 344 (§5.1) */ @media (max-width:1068px){.hwhy-card{width:344px}} /* small ≤734 (§0): §4.1 96/96, 16px gutters (Sir's rule, §5.4), phone type */ @media (max-width:734px){ .hwhy{padding:96px 0 48px} /* audit Oct 24: 96+96 white gap into How it works */ .hwhy-head{width:auto;margin:0 16px;padding-bottom:32px;flex-direction:column;align-items:flex-start;gap:8px} /* §4.2 M, §4.5 M */ .hwhy-head>.hwhy-link{margin-top:0} .hwhy-h{max-width:none;font-size:28px;line-height:32px;letter-spacing:.196px} /* §4.3 M */ .hwhy-link{font-size:14px;line-height:20px;letter-spacing:-.224px} /* §2.8 M, §4.4 M */ .hwhy-scroller{--hwhy-in:16px} /* §5.4 Marvans 16px */ .hwhy-card{width:280px;height:auto;min-height:360px;padding:24px 24px 0} /* audit Oct 24: 480 left a big empty block under short text */ /* §5.1 M, §5.2 M, §5.9 M */ .hwhy-label{font-size:14px;line-height:18px;letter-spacing:-.224px} /* §5.10 M */ .hwhy-title{font-size:21px;line-height:25px;letter-spacing:.231px} /* §5.10 M, §1.25 M */ .hwhy-body{margin-top:11.2px;font-size:14px;line-height:18px;letter-spacing:-.224px} /* §5.10 M */ .hwhy-ic{left:24px;bottom:24px} /* §5.9 M 24px */ .hwhy-nav{display:none} /* §5.20 swipe on phones */ } @media (prefers-reduced-motion:reduce){ /* §12.7 */ .hwhy-js .hwhy-r,.hwhy-js .hwhy-card{opacity:1;transform:none;transition:none} .hwhy-scroller{scroll-behavior:auto} } /* ===== end .hwhy ===== */ /* --- home-how --- */ /* ===== How it works (home "how") — final. Base: draft A; grafts from B and C (see home-how.md). Every number cites builder/parts/APPLE_SPEC.md (section numbers in comments). ===== */ .hhow{--hhow-bur:#800020;--hhow-ink:#1d1d1f;--hhow-ink2:#6e6e73; background:#fff;color:var(--hhow-ink);padding:160px 0;overflow:clip} /* §4.6 white (why = gray), §4.1 160/160; clip = no sideways scroll */ .hhow-in{width:min(1260px,87.5%);margin:0 auto} /* §1.14 */ .hhow-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* header row — §4.2 flex space-between, §4.5 60px header -> cards */ .hhow-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:0 0 48px} /* measured /iphone/ 1440: section-header padding-bottom 48 (was 60) */ .hhow-titles{max-width:75%} /* §4.3 */ .hhow-h{margin:0;font-size:56px;line-height:60px;letter-spacing:-.28px;font-weight:600;color:var(--hhow-ink);text-wrap:balance} /* §1.21 / §4.3 */ .hhow-sub{margin:6px 0 0;font-size:21px;line-height:25px;letter-spacing:.231px;font-weight:400;color:var(--hhow-ink2);text-wrap:pretty} /* §3.9 6px, §1.24, §1.2 */ /* right-side link — §4.4 / §2.8: 17/25 pink + chevron; padding-top 17.5 = (60 - 25) / 2 centres it on the headline line */ .hhow-link{flex:none;display:inline-block;padding-top:30.5px;white-space:nowrap; /* 30.5 = measured apple.com/iphone offset, same as .hexplore-head link */ font-size:17px;line-height:25px;letter-spacing:-.374px;color:var(--mag,#800020);text-decoration:none} /* chevron — identical to home-pm's .hpm-link svg (measured on apple.com/iphone/ "Compare all models >", see home-pm.md Fixes 2-3): 0.24em gap + 0.073em bearing = margin-left .313em, ink box .296em x .518em, baseline, stroke ~.075em round. Scales in em (14px on phone). */ .hhow-link svg{display:inline-block;vertical-align:baseline;width:.296em;height:.518em;margin-left:.313em; fill:none;stroke:currentColor;stroke-width:12.7;stroke-linecap:round;stroke-linejoin:round} .hhow-link:focus-visible{outline:2px solid var(--mag,#800020);outline-offset:3px;border-radius:6px} @media (hover:hover){.hhow-link:hover{text-decoration:underline;text-underline-offset:.18em}} /* steps — §5 "Get to know" cards: #f5f5f7 on white, radius 28, no shadow, padding 32, gaps 20/24 */ .hhow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;row-gap:24px} /* §5.3 */ .hhow-card{position:relative;margin:0;background:#f5f5f7;border-radius:28px;box-shadow:none;padding:32px;display:flex;flex-direction:column} /* §5.6–5.9 (bottom 32 = top: Apple's bottom is an image, not measured) */ .hhow-n{display:block;font-size:17px;line-height:21px;letter-spacing:-.374px;font-weight:600;color:var(--hhow-ink);font-variant-numeric:tabular-nums} /* §5.10 card label = §1.26 17/21 600 */ .hhow-first .hhow-n{color:var(--mag-hover,#5E0018)} /* 5.21:1 on #f5f5f7 (AA); #800020 was 4.30:1 */ /* step 1 = the action, pink like the link above (live site marks step 1 too) */ .hhow-t{margin:14px 0 0;font-size:28px;line-height:32px;letter-spacing:.196px;font-weight:600;color:var(--hhow-ink)} /* §5.10 14px, §1.25 */ .hhow-p{margin:13.6px 0 0;font-size:17px;line-height:21px;letter-spacing:-.374px;font-weight:400;color:var(--hhow-ink);text-wrap:pretty} /* §5.10, §1.27 */ /* step 4 = done: burgundy Marvans star (img/logo-star.svg path at 12px), top-right, centred on the 21px label line: 32 + (21-12)/2 = 36.5 */ .hhow-done::after{content:"";position:absolute;top:36.5px;right:32px;width:12px;height:12px;background:var(--hhow-bur); clip-path:path("M 3.78,11.99 3.75,11.89 3.72,11.79 3.68,11.45 3.57,10.89 3.43,10.42 3.37,10.24 3.31,10.05 3.12,9.61 2.97,9.30 2.80,9.03 2.62,8.78 2.54,8.68 2.46,8.59 2.37,8.48 2.12,8.23 1.81,7.98 1.71,7.91 1.62,7.85 1.41,7.73 1.27,7.65 0.85,7.46 0.70,7.41 0.58,7.38 0.34,7.30 0.32,7.29 0.35,7.26 0.38,7.24 0.41,7.24 0.77,7.23 1.02,7.24 4.68,7.23 4.79,7.24 4.83,7.26 4.85,7.28 4.86,7.30 4.86,7.35 4.84,7.49 4.76,7.85 4.71,8.04 4.64,8.36 4.52,8.86 4.46,9.19 4.41,9.37 4.39,9.52 4.28,9.92 4.25,10.13 4.10,10.76 4.06,10.99 4.03,11.07 3.94,11.50 3.91,11.60 3.86,11.83 3.80,11.99 Z M 5.65,7.21 5.50,7.20 5.23,7.20 5.15,7.19 5.09,7.17 5.04,7.14 5.01,7.11 4.96,7.04 4.94,6.96 4.94,6.85 4.96,6.66 5.03,6.28 5.05,6.11 5.10,5.92 5.13,5.65 5.20,5.29 5.21,5.16 5.25,4.79 5.34,4.32 5.37,4.10 5.40,3.91 5.42,3.72 5.48,3.34 5.51,3.09 5.53,3.03 5.55,2.95 5.57,2.89 5.60,2.64 5.65,2.32 5.68,2.09 5.70,1.95 5.73,1.75 5.78,1.45 5.82,1.08 5.88,0.89 5.90,0.70 5.92,0.57 5.98,0.35 6.06,0.12 6.11,0.04 6.13,0.03 6.17,0.01 6.19,0.01 6.21,0.03 6.23,0.06 6.25,0.08 6.36,0.40 6.41,0.63 6.45,0.89 6.52,1.07 6.55,1.21 6.60,1.39 6.71,1.63 6.74,1.71 6.79,1.95 6.92,2.34 7.01,2.51 7.12,2.71 7.14,2.78 7.19,2.90 7.21,2.95 7.29,3.08 7.33,3.20 7.36,3.28 7.42,3.36 7.51,3.46 7.55,3.53 7.74,3.91 7.87,4.08 7.94,4.21 7.98,4.27 8.15,4.46 8.36,4.76 8.58,4.99 8.70,5.16 8.98,5.42 9.26,5.65 9.55,5.91 9.63,5.97 9.83,6.08 10.03,6.23 10.25,6.37 10.38,6.43 10.82,6.62 11.21,6.82 11.38,6.90 11.53,6.95 11.57,6.98 11.65,7.04 11.67,7.05 11.70,7.10 11.70,7.11 11.64,7.16 11.57,7.19 11.51,7.19 11.01,7.21 10.69,7.21 8.70,7.21 8.39,7.21 Z")} /* medium 735–1068 (§0): 2 x 2 */ @media (max-width:1068px){ .hhow-steps{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:20px} /* equal gaps all round in 2x2 (§5.3's 24px row gap was a one-row carousel) */ } /* small ≤734 (§0): §4.1 96/96, 16px gutters (Sir), header stacks (§4.2), phone type */ @media (max-width:734px){ .hhow{padding:96px 0} .hhow-in{width:auto;margin:0 16px} .hhow-head{flex-direction:column;gap:8px;margin:0;padding-bottom:32px} /* §4.2, §4.5 M */ .hhow-titles{max-width:none} .hhow-h{font-size:28px;line-height:32px;letter-spacing:.196px} /* §4.3 M */ .hhow-sub{margin-top:4px;font-size:19px;line-height:23px;letter-spacing:.228px} /* §3.9 M, §1.24 M */ .hhow-link{padding-top:0;font-size:14px;line-height:20px;letter-spacing:-.224px} /* §4.4 M, §2.8 M */ .hhow-steps{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:20px} /* §5.3 M; 1fr rows = all 4 cards the height of the tallest (deviation, see home-how.md) */ .hhow-card{padding:24px} /* §5.9 M */ .hhow-done::after{top:27px;right:24px} /* 24 + (18-12)/2 */ .hhow-n{font-size:14px;line-height:18px;letter-spacing:-.224px} /* §5.10 M label 14/18 */ .hhow-t{font-size:21px;line-height:25px;letter-spacing:.231px} /* §5.10 M, §1.25 M */ .hhow-p{margin-top:11.2px;font-size:14px;line-height:18px;letter-spacing:-.224px} /* §5.10 M, §1.27 M */ } /* reveal — §12: 30px rise, opacity .9s, move .7s, .15s stagger (delay set in JS). Hidden only when JS ran (§12.7). Ease = site --ease token because §12.6 was not measured. */ .hhow-js .hhow-r{opacity:0;transform:translateY(30px); transition:opacity .9s var(--ease,cubic-bezier(.28,.11,.32,1)),transform .7s var(--ease,cubic-bezier(.28,.11,.32,1))} .hhow-js .hhow-r.hhow-on{opacity:1;transform:none} /* reduced motion — §12.7: everything shown, no movement */ @media (prefers-reduced-motion:reduce){ .hhow-js .hhow-r{opacity:1;transform:none;transition:none} } /* --- home-acc --- */ /* ===== Accessories tile (home "acc") — judged final. Base = draft A (pure apple.com §3 dark full tile, type-only Store groups row). Grafts: B (nav landmark, :active pill state), C (#accessories anchor, hover only on a real mouse), home-grid (star colour on black, callout colour, overflow fallback, site reveal line, print safety). Every number cites builder/parts/APPLE_SPEC.md. ===== */ /* §3.1 692px tall (M 500), §3.2 padding 56/63, §3.8 + §1.5 #000, §1.3 text #f5f5f7, §3.11 centered */ .hacc{position:relative;overflow:hidden;overflow:clip;box-sizing:border-box;display:flex;flex-direction:column;align-items:center; min-height:692px;padding:56px 0 63px;background:#000;color:#f5f5f7;text-align:center; font-family:var(--font,system-ui,-apple-system,sans-serif)} .hacc *{box-sizing:border-box} /* §1.14, §4.5 */ /* §1.29 eyebrow 12/16 600 -0.12px, 8px below. Star = img/logo-star.svg path at the 12px eyebrow size, 6px from the word (same as home-pm, §6.4). Block flex (not inline-flex) so no 25px body line box adds to the 8px gap. On black it uses --mag-dark: #800020 vanishes on #000 (same rule as home-grid) -> listed under 'Needs Sir' in home-acc.md. */ /* §1.21 */ /* §1.23, §3.9 */ /* §1.28 callout 19/23 .228px, §3.10 9px. Dark-tile callout colour NOT MEASURED -> §1.3 text on dark (as home-grid) */ /* pills §2.1 (44px, 11/21, 17/20, r980, 1px transparent border, min-width 26), §2.5 gap 17, §2.6 top 17 */ /* §5.25 */ /* §2.4 on black */ /* §2.3 active -> --mag-hover */ /* site rule, css/style.css :focus-visible */ /* tap feedback on phones */ /* Store groups row: pushed to the tile bottom; §1.14 width, §5.3 gaps 24/20 */ /* §5.25 */ /* §1.26 */ /* §1.27 */ /* medium 735–1068 (§0): 2 rows of 3 */ /* small ≤734: §3.1 500px, §3.2 39/43, §1.21 M home tile 32/36, §1.23 M, §3.9/§3.10 M, §2.1/§2.5/§2.6 M, 16px gutters */ @media (max-width:734px){ .hacc{min-height:500px;padding:39px 0 43px} /* §4.5 M */ /* §1.28 M */ /* §5.3 M */ /* §5.10 M */ /* §1.26 M, §1.27 M */ } /* §12 reveal: rise 30px, opacity .9s, move .7s, .15s stagger. Easing NOT MEASURED (§12.6) -> site --ease. Hidden state exists only after home-acc.js runs and the tile is still below the screen. */ /* --- home-visit --- */ /* ===== Visit the shop (home "visit") — final. Base: draft A; grafts from B and C (see home-visit.md). Apple /retail/ wide cards. Every number cites builder/parts/APPLE_SPEC.md (section numbers in comments). ===== */ .hvisit{--hvisit-bur:#800020;--hvisit-ink:#1d1d1f;--hvisit-line:#d2d2d7; background:#f5f5f7;color:var(--hvisit-ink);padding:108px 0 160px;overflow:clip} /* §9.1; §9.4 132 to headline = 108 + 24 eyebrow (16 line + 8 pb); §4.1 160 bottom */ .hvisit-head{width:min(882px,87.5%);margin:0 auto;text-align:center} /* §9.4 max 882, centered; §1.14 87.5% */ .hvisit-eyebrow{margin:0;padding-bottom:8px;display:flex;justify-content:center;align-items:center;gap:6px; /* §1.29 block = exactly 16+8; same as .hpm-eyebrow; §6.4 6px */ font-size:12px;line-height:16px;letter-spacing:-.12px;font-weight:600;color:var(--hvisit-bur)} /* same eyebrow as home-pm */ /* 12 = eyebrow size; img/logo-star.svg path */ .hvisit-h{margin:0;font-size:40px;line-height:44px;letter-spacing:normal;font-weight:600;text-wrap:balance} /* §9.4 / §1.22 */ .hvisit-sub{margin:26px 0 0;font-size:21px;line-height:25px;letter-spacing:.231px;font-weight:600;text-wrap:balance} /* §9.5 / §1.31 */ /* wide cards — §9.6 – §9.9 */ .hvisit-cards{width:min(980px,87.5%);margin:60px auto 0;display:grid;gap:40px} /* §9.6; §4.5 60; §9.9 40 */ .hvisit-card{display:grid;grid-template-columns:1fr 1fr;min-height:394px; /* §9.7 980x394, 490/490 */ background:#fff;border-radius:18px;overflow:hidden;box-shadow:none} /* §9.7 */ .hvisit-card--split .hvisit-copy+.hvisit-copy{border-left:1px solid var(--hvisit-line)} /* §1.8 */ .hvisit-copy{min-width:0;padding:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center} /* §9.7 */ .hvisit-card--split .hvisit-copy{justify-content:flex-start;padding-top:111.6px} /* both halves share one top line: (394 - 170.8 taller block) / 2 */ .hvisit-label{margin:0;font-size:19.89px;line-height:29.25px;letter-spacing:-.374px;font-weight:600;color:var(--hvisit-ink)} /* §9.8; tracking measured on apple.com/retail/ card eyebrow 22 Oct: -0.374px */ .hvisit-title{margin:4px 0 0;font-size:28px;line-height:36px;letter-spacing:.196px;font-weight:600;color:var(--hvisit-ink);text-wrap:balance;overflow-wrap:anywhere} /* §9.8 */ .hvisit-body{margin:13.6px 0 0;max-width:430px;font-size:17px;line-height:25px;letter-spacing:-.374px; /* §9.8, §1.10; 430 = 490 - 2x30 */ font-weight:400;font-style:normal;color:var(--hvisit-ink);text-wrap:pretty} .hvisit-tel{color:inherit;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap} .hvisit-links{margin:13px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:31.61px} /* §9.8 mt 13; link-to-link 31.61 measured on apple.com/apple-tv-app/ (li margins .8em x2 at 17px + space); same row gap so wrapped links don't touch */ .hvisit-link{position:relative;display:inline-block;color:var(--mag,#800020);text-decoration:none; font-size:17px;line-height:25px;letter-spacing:-.374px;white-space:nowrap} /* §2.8; gap 3.13 = measured text-to-chevron ink 4.38px (3.36 pad + 1.02 glyph bearing) - our path's 1.25px ink inset */ .hvisit-link::before{content:"";position:absolute;inset:-10px -8px} /* finger target 45px tall (25 + 2x10), no layout change */ .hvisit-link svg{display:inline-block;vertical-align:baseline;width:.296em;height:.518em;margin-left:.313em;fill:none;stroke:currentColor;stroke-width:12.7;stroke-linecap:round;stroke-linejoin:round} /* same chevron as .hpm-link (measured) */ @media (hover:hover){ .hvisit-link:hover{text-decoration:underline;text-underline-offset:.18em} .hvisit-tel:hover{color:var(--mag,#800020)} } .hvisit-link:focus-visible,.hvisit-tel:focus-visible,.hvisit-maptap:focus-visible{outline:2px solid var(--mag,#800020);outline-offset:3px;border-radius:6px} /* map half — §9.7 image side */ .hvisit-map{position:relative;min-height:394px;background:#f5f5f7} /* §1.7 while it loads */ .hvisit-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .hvisit-maptap{display:none} /* touch screens: the map never catches the page scroll; one tap opens Google Maps */ @media (hover:none){ .hvisit-map iframe{pointer-events:none} .hvisit-maptap{display:block;position:absolute;inset:0;z-index:1} } /* medium 735–1068: same layout; widths already min(…,87.5%) (§1.14) */ /* small ≤734 (§0) — 16px gutters (Sir) */ @media (max-width:734px){ .hvisit{padding:94px 0 96px} /* §9.4 M 118 to headline = 94 + 24 eyebrow; §4.1 M 96 */ .hvisit-head,.hvisit-cards{width:auto;margin-inline:16px} .hvisit-h{font-size:32px;line-height:36px;letter-spacing:.128px} /* §9.4 M / §1.22 M */ .hvisit-sub{font-size:19px;line-height:23px;letter-spacing:.228px} /* §9.5 M */ .hvisit-cards{margin-top:32px} /* §4.5 M */ .hvisit-card{grid-template-columns:minmax(0,1fr);min-height:490px} /* §9.7 M stacked, 490 tall */ .hvisit-card--split{min-height:0} .hvisit-card--split .hvisit-copy{justify-content:center;padding-top:30px} .hvisit-card--split .hvisit-copy+.hvisit-copy{border-left:0;border-top:1px solid var(--hvisit-line)} .hvisit-map{min-height:0;aspect-ratio:341.25/274.39;order:-1} /* measured apple.com/retail/ at 390: image 341.25x274.39 (padding-top 80.41%), image on top (order 1, copy order 2) */ } /* reveal — §12: 30px rise, opacity .9s, move .7s, .15s stagger. Hidden only after the JS arms it */ .hvisit.hvisit-armed .hvisit-r{opacity:0;transform:translateY(30px); transition:opacity .9s var(--ease,cubic-bezier(.28,.11,.32,1)),transform .7s var(--ease,cubic-bezier(.28,.11,.32,1)); transition-delay:calc(var(--hvisit-i,0) * .15s)} .hvisit.hvisit-armed.hvisit-on .hvisit-r{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .hvisit.hvisit-armed .hvisit-r{opacity:1;transform:none;transition:none} /* §12.7 */ } /* link finger targets 44px tall, look unchanged (.hvisit-link already has ::before) */ .hpm-link,.hwhy-link,.hhow-link{position:relative} .hpm-link::after,.hwhy-link::after{content:"";position:absolute;left:-8px;right:-8px;top:-12px;bottom:-12px} .hhow-link::after{content:"";position:absolute;left:-8px;right:-8px;bottom:-12px;top:calc(100% - 37px)} /* padding-top sits above the text: target = text line +-12 */ @media (max-width:734px){.hhow-link::after{top:-12px}} /* global nav — §1.13: 44px at D (48 at M), rgba(255,255,255,.8), no hairline. Menu-open look unchanged */ @media (min-width:735px){:root{--gnav:44px}} .gnav{background:rgba(255,255,255,.8);border-bottom:0} /* footer — §11 */ .foot{line-height:16px;color:rgba(0,0,0,.56)} /* §11.3 */ .foot-in{max-width:calc(980px + var(--gut)*2)} /* §11.2 */ .foot-note{padding-bottom:11px;border-bottom-color:rgba(0,0,0,.16)} /* §11.4 */ .foot-cols div{gap:9.6px} /* §11.7 item margin-bottom 9.6 */ .foot-cols h3{font-weight:400;color:rgba(0,0,0,.88);margin-bottom:0} /* §11.6 */ .foot-cols a,.foot-cols p{color:rgba(0,0,0,.72)} /* §11.7 */ .foot-base{padding-top:37px} /* §11.8 */ @media (min-width:834px){ .foot-cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding-top:20px} /* §11.5 5 x 196 at 980 */ .foot{padding-bottom:calc(11px + env(safe-area-inset-bottom))} /* §11.8 11 bottom */ } @media (max-width:734px){.foot-in{padding-inline:16px}} /* §11.2 M, Sir's 16px */ /* ---- final recheck: 44px finger targets (look unchanged), Accessories gap, dock vs story ---- */ @media (hover:none),(max-width:734px){.hsy-dot{padding:18px}} /* 44x44 button, same 8px dot / 32x8 pill; desktop keeps 24px §7.5 */ .hgrid-pill,.hpm-pill{position:relative} .hgrid-pill::after,.hpm-pill::after{content:"";position:absolute;inset:-5px -1px} /* 36px pill §2.1 M / §2.7 -> 44px hit area (inset counts from inside the 1px border) */ .hvisit-tel{position:relative} .hvisit-tel::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)} .gnav-links a{position:relative} .gnav-links a::after{content:"";position:absolute;inset:-13px -8px} /* 18px link -> 44px hit area, bar stays 44px */ .menu nav a{min-height:44px;display:flex;align-items:center} @media (max-width:734px){ .foot a,.foot .foot-base nav a{display:inline-block;padding-top:14px;padding-bottom:14px} /* 16px line + 28 = 44px rows (§11.5 M) */ .foot-cols div{gap:0} /* rows sit exactly 44px apart; desktop keeps 9.6 gap §11.7 */ .foot .crumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;padding:0;margin-right:-30px} /* star stays put, crumb text stays put */ } @media (min-width:735px){ .hacc{min-height:0} /* no image to fill §3.12 space */ /* §4.5 60px is copy-to-image; no image, so pills-to-row = 40 */ /* §2.9 */ } .dock{transition:transform .5s var(--spring),opacity .2s linear} .dock.is-sy{opacity:0;pointer-events:none;transform:translate(-50%,16px)} /* hidden while the story fills the screen */ @media (prefers-reduced-motion:reduce){.dock{transition:none}} /* ===== END HOME TEAM SECTIONS (Oct 22) ===== */ /* hsy-3d: old, unused (Oct 31: no 3D-model pictures on the site) */ /* hsy video version: the 8 s battery-swap animation fills the stage; captions swap only after the old one has faded out */ .hsy[data-hsy-init="video"] .hsy-cap{transition:opacity .4s var(--hsy-ease),transform .4s var(--hsy-ease)} /* Duo tile text = apple.com iPhone Duo tile, measured Oct 22 at 1440: headline 56/60 600 -0.28px; sub 28/32 +6 .196px; callout 19/23 +9 .228px #6e6e73; buttons +17; tile top padding 56 */ .duo-tile{padding-top:56px} .duo-tile .duo-h{font-size:56px;line-height:60px;letter-spacing:-.28px} .duo-tile .duo-sub{font-size:28px;line-height:32px;letter-spacing:.196px;margin-top:6px} .duo-tile .duo-gray{font-size:19px;line-height:23px;letter-spacing:.228px;color:#6e6e73;margin-top:9px} .duo-tile .ctas{margin-top:17px} @media (max-width:1068px){.duo-tile .duo-h{font-size:48px;line-height:52px;letter-spacing:-.144px}.duo-tile .duo-sub{font-size:24px;line-height:28px;letter-spacing:.216px;margin-top:4px}} @media (max-width:734px){.duo-tile .duo-h{font-size:40px;line-height:44px;letter-spacing:0}.duo-tile .duo-sub{font-size:21px;line-height:25px;letter-spacing:.231px}.duo-tile .duo-gray{font-size:17px;line-height:21px;letter-spacing:-.374px}} .duo-tile .ctas{margin-top:14px} /* measured: apple callout bottom 186 -> buttons 200 */ /* "Twice the care." rises in from below like the other lines (Sir), while "Twice the screen." slides left to make room */ .js .duo-sub .ds-r{transform:translateY(.7em)} @media (max-width:734px){.js .duo-sub .ds-r{transform:translateY(.7em)}} .js .duo-tile:has(.duo3.open) .duo-sub .ds-r{transform:none} @media (prefers-reduced-motion:reduce){.js .duo-sub .ds-r{transform:none}} /* "Twice the screen." also rises in from below on load, then slides left when the Duo unfolds */ .js .duo-sub .ds-l{opacity:0;transform:translate(var(--ds,0px),.7em);transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .6s ease} .js .duo-sub.in .ds-l{opacity:1;transform:translate(var(--ds,0px),0);transition:transform .9s cubic-bezier(.4,0,.2,1) .1s,opacity .6s ease .1s} .js .duo-tile:has(.duo3.open) .duo-sub.in .ds-l{transform:none;transition:transform .9s cubic-bezier(.4,0,.2,1) 1.5s,opacity .6s ease} @media (prefers-reduced-motion:reduce){.js .duo-sub .ds-l{opacity:1;transform:none;transition:none}} /* keep the line centred at every moment: "Twice the care." appears exactly while "Twice the screen." slides (same 1.5s start, same .9s curve); when the Duo folds back, both return together */ .js .duo-sub .ds-r{transition:opacity .9s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1)} .js .duo-tile:has(.duo3.open) .duo-sub .ds-r{transition:opacity .9s cubic-bezier(.4,0,.2,1) 1.5s,transform .9s cubic-bezier(.4,0,.2,1) 1.5s} .js .duo-sub.in .ds-l{transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .6s ease .1s} /* "Twice the screen." rises WITH "iPhone Duo" and the gray line (it rides the line's own data-in reveal, no extra rise); it only slides left when the Duo unfolds. "Twice the care." still rises in during the unfold. */ .js .duo-sub .ds-l,.js .duo-sub.in .ds-l{opacity:1;transform:translateX(var(--ds,0px));transition:transform .9s cubic-bezier(.4,0,.2,1)} .js .duo-tile:has(.duo3.open) .duo-sub .ds-l,.js .duo-tile:has(.duo3.open) .duo-sub.in .ds-l{transform:none;transition:transform .9s cubic-bezier(.4,0,.2,1) 1.5s} /* no sliding until the centre position is measured (stops "Twice the screen." gliding in from the left on load) */ .js .duo-sub:not(.ds-ready) .ds-l,.js .duo-sub:not(.ds-ready) .ds-r{transition:none!important} /* "Twice the care." waits until "Twice the screen." has fully slid left (slide = 1.5s + .9s), then rises in */ .js .duo-tile:has(.duo3.open) .duo-sub .ds-r{transition:opacity .6s cubic-bezier(.4,0,.2,1) 2.4s,transform .6s cubic-bezier(.4,0,.2,1) 2.4s} /* Duo photo card plays the battery-swap animation */ .d-w-photo .d-w-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;background:#000} /* smaller and centred in the card (above the "Fixed today" caption) */ .d-w-photo .d-w-vid{inset:auto;left:50%;top:44%;width:80%;height:72%;transform:translate(-50%,-50%);object-fit:contain;background:transparent;border-radius:calc(2.4*var(--mm))} .d-w-photo{background:#000} /* same black as the battery-swap clip (measured #000000) */ .duo-fine a{color:inherit;text-decoration:underline} .d-w-photo{background:#97999B} /* Sport Grey, same as the take-apart clip */ .d-w-photo{background:#fff} .d-w-photo::after{display:none} /* no glass shine on the video card: one flat white, no two tones */ .d-w-photo .d-w-vid{background:#fff} .d-w-photo{color:#1d1d1f} .d-w-photo span{color:#6e6e73;opacity:1} .d-w-photo .d-playb{background:rgba(0,0,0,.08)} .d-w-photo .d-playb::after{border-left-color:#1d1d1f} /* ---- home repair story, SCROLL version (Sir, Oct 23): spinning burgundy iPhone scrubbed by scroll ---- 500vh tall section; the inside sticks to the screen for the scroll, the canvas shows 1 of 345 story frames. */ .hsy.hsy-spin-on{height:560vh;padding:0;overflow:visible} /* 385 frames (was 500vh for 345) */ .hsy-spin-on .hsy-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center; padding-top:44px;overflow:hidden} /* 44 = global nav height */ .hsy-spin-on .hsy-stage{width:auto;height:min(56vh,620px);aspect-ratio:9/16;margin:24px auto 0;overflow:visible} .hsy-spin-on .hsy-spin{display:block;width:100%;height:100%} .hsy-spin-on .hsy-ctl{visibility:visible} .hsy-spin-on .hsy-dot i::after{animation:none!important;transition:transform .3s ease} .hsy-spin-on .hsy-dot.is-on i::after,.hsy-spin-on .hsy-dot.is-done i::after{transform:scaleX(1)} @media (max-width:734px){ .hsy-spin-on .hsy-stage{height:min(50vh,520px);margin-top:16px} } /* Apple Watch tile on black (Sir, Oct 23): a soft burgundy glow behind the dark watch so it doesn't sink into the black */ .hgrid-glow .hgrid-pic::before{content:"";position:absolute;left:50%;bottom:16%;width:min(78%,440px);aspect-ratio:1;transform:translateX(-50%); background:radial-gradient(closest-side,rgba(184,50,79,.42),rgba(128,0,32,.18) 55%,rgba(128,0,32,0));pointer-events:none} .hgrid-glow .hgrid-pic img{-webkit-mask-image:none;mask-image:none;height:66%;bottom:12%} /* watch case only (no band): nothing to fade out */ /* ===== Why Marvans on black (Sir, Oct 23): dark cards, glossy burgundy icon badges ===== */ .hwhy{background:#000;color:#f5f5f7} .hwhy-h{color:#f5f5f7} .hwhy-link{color:var(--mag-dark,#B8324F)} .hwhy-card{background:linear-gradient(180deg,#1d1d1f 0%,#141416 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:hidden} .hwhy-card::before{content:"";position:absolute;left:-30%;bottom:-35%;width:90%;aspect-ratio:1;pointer-events:none; background:radial-gradient(closest-side,rgba(128,0,32,.30),rgba(128,0,32,0))} /* soft burgundy light behind the icon */ .hwhy-label{color:#a1a1a6} .hwhy-title{color:#f5f5f7} .hwhy-body{color:#c7c7cc} /* icon: a glossy burgundy badge (gradient + top highlight + gloss + glow), white line icon on it */ .hwhy-ic{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;isolation:isolate; background:linear-gradient(160deg,#c43556 0%,#8f0a2c 42%,#800020 60%,#4a0013 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 4px rgba(0,0,0,.35),0 10px 24px -6px rgba(184,50,79,.55),0 2px 6px rgba(0,0,0,.5)} .hwhy-ic::after{content:"";position:absolute;inset:2px 2px 50% 2px;border-radius:16px 16px 40% 40% / 16px 16px 14px 14px;z-index:-1; background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0))} /* glass gloss on the top half */ .hwhy-ic svg{width:34px;height:34px;stroke:#fff;stroke-width:1.7;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))} @media (hover:hover){ .hwhy-card{transition:box-shadow .3s ease,transform .3s cubic-bezier(0,0,.5,1)} .hwhy-card:hover{box-shadow:inset 0 0 0 1px rgba(184,50,79,.45),0 18px 40px -18px rgba(184,50,79,.45)} } .hwhy-paddle{background:rgba(66,66,69,.72);color:rgba(255,255,255,.8)} /* §5.23 dark */ @media (hover:hover){.hwhy-paddle:hover{background:rgba(73,73,76,.7256);color:#fff}} .hwhy-paddle:active{background:rgba(54,54,57,.7)} .hwhy-scroller:focus-visible{outline-color:var(--mag-dark,#B8324F)} @media (max-width:734px){.hwhy-ic{width:52px;height:52px;border-radius:15px}.hwhy-ic svg{width:28px;height:28px}} /* ===== Visit: contact + hours card on black (Sir, Oct 23) ===== */ .hvisit-card--dark{background:linear-gradient(180deg,#141416 0%,#000 100%);color:#f5f5f7;--hvisit-ink:#f5f5f7;--hvisit-line:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .hvisit-card--dark .hvisit-copy{justify-content:center;padding:56px 40px} .hvisit-card--dark .hvisit-label{color:#a1a1a6;font-size:17px;line-height:21px;display:flex;align-items:center;gap:10px;justify-content:center} .hvisit-card--dark .hvisit-big{margin-top:10px;font-size:40px;line-height:44px;letter-spacing:-.2px} .hvisit-card--dark .hvisit-body{color:#a1a1a6} .hvisit-card--dark .hvisit-tel:hover{color:#fff} .hvisit-card--dark .hvisit-link{color:var(--mag-dark,#B8324F)} .hvisit-pills{margin:26px 0 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .hvisit-pill{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:980px;text-decoration:none; font-size:17px;letter-spacing:-.374px;color:#fff;background:var(--mag,#800020);border:1px solid var(--mag,#800020);transition:background-color .1s linear} .hvisit-pill-line{background:transparent;color:#f5f5f7;border-color:#f5f5f7} @media (hover:hover){.hvisit-pill:hover{background:var(--mag-hover,#5E0018);border-color:var(--mag-hover,#5E0018);color:#fff}} .hvisit-pill:focus-visible{outline:2px solid var(--mag-dark,#B8324F);outline-offset:3px} /* hours as a clean two-row table; today's row lights up (main.js marks [data-day] with .today) */ .hvisit-hours{margin:16px 0 0;width:min(100%,360px)} .hvisit-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 16px;border-radius:12px; font-size:21px;line-height:25px;letter-spacing:.231px} .hvisit-row dt{color:#a1a1a6;font-weight:400} .hvisit-row dd{margin:0;color:#f5f5f7;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .hvisit-row.today{background:rgba(184,50,79,.16);box-shadow:inset 0 0 0 1px rgba(184,50,79,.4)} .hvisit-row.today dt{color:#f5f5f7} .hvisit-open{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;padding:3px 9px;border-radius:999px} .hvisit-open.is-open{color:#30d158;background:rgba(48,209,88,.14)} .hvisit-open.is-closed{color:#ff6b81;background:rgba(255,107,129,.14)} @media (max-width:734px){ .hvisit-card--dark .hvisit-copy{padding:40px 22px} .hvisit-card--dark .hvisit-big{font-size:28px;line-height:32px} .hvisit-row{font-size:17px;line-height:21px;padding:10px 12px} } /* shop + map card on black (Sir, Oct 23): dark map (invert + hue turn keeps the red pin red), left column aligned left */ .hvisit-card--shop .hvisit-copy{align-items:flex-start;text-align:left;padding:56px 48px} .hvisit-card--shop .hvisit-label{justify-content:flex-start} .hvisit-card--shop .hvisit-big{font-size:32px;line-height:38px} .hvisit-card--shop .hvisit-body{font-style:normal;margin-top:12px} .hvisit-card--shop .hvisit-pills{justify-content:flex-start} .hvisit-facts{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;line-height:20px;color:#c7c7cc} .hvisit-facts li{display:flex;align-items:center;gap:10px} .hvisit-dot{width:6px;height:6px;border-radius:50%;background:var(--mag-dark,#B8324F);box-shadow:0 0 8px rgba(184,50,79,.7);flex:none} .hvisit-card--shop .hvisit-map{background:#111;border-left:1px solid rgba(255,255,255,.08)} .hvisit-card--shop .hvisit-map iframe{filter:invert(.92) hue-rotate(180deg) saturate(.6) brightness(.95) contrast(.95)} .hvisit-card--shop .hvisit-map::after{content:"";position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 60px rgba(0,0,0,.55)} /* soft dark edge so the map sits in the card */ @media (max-width:734px){ .hvisit-card--shop .hvisit-copy{padding:32px 22px 36px} .hvisit-card--shop .hvisit-big{font-size:24px;line-height:29px} .hvisit-card--shop .hvisit-map{border-left:0;border-bottom:1px solid rgba(255,255,255,.08)} } /* ===== footer on black (Sir, Oct 23) ===== */ .foot{background:#080808;color:rgba(255,255,255,.56)} .foot-note{border-bottom-color:rgba(255,255,255,.16)} .foot-cols{border-bottom-color:rgba(255,255,255,.16)} .foot-cols h3{color:rgba(255,255,255,.9)} .foot-cols a,.foot-cols p{color:rgba(255,255,255,.66)} .foot a{color:rgba(255,255,255,.72)} .foot-base nav a{border-left-color:rgba(255,255,255,.2)} .foot .crumbs{color:rgba(255,255,255,.72)} /* audit Oct 24: crumb text was dark ink on black */ .foot .crumbs span[aria-hidden]{color:rgba(255,255,255,.4)} @media (hover:hover){.foot a:hover{color:#fff}} .foot a:focus-visible{outline:2px solid var(--mag-dark,#B8324F);outline-offset:2px} /* ===== How it works: step boxes on black (Sir, Oct 23) ===== */ .hhow-card{background:linear-gradient(180deg,#1d1d1f 0%,#111113 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:hidden} .hhow-card .hhow-t{color:#f5f5f7} .hhow-card .hhow-p{color:#a1a1a6} .hhow-card .hhow-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%; color:#fff;font-size:16px;background:linear-gradient(160deg,#c43556 0%,#800020 55%,#4a0013 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -4px rgba(184,50,79,.6)} /* glossy burgundy number, like the Why badges */ .hhow-first .hhow-n{color:#fff} .hhow-done::after{background:#fff} @media (hover:hover){ .hhow-card{transition:box-shadow .3s ease} .hhow-card:hover{box-shadow:inset 0 0 0 1px rgba(184,50,79,.45),0 18px 40px -18px rgba(184,50,79,.45)} } /* Why Marvans: white section, black cards (Sir, Oct 23 - second pass) */ .hwhy{background:#fff;color:#1d1d1f} .hwhy-h{color:#1d1d1f} .hwhy-link{color:var(--mag-hover,#5E0018)} .hwhy-card{box-shadow:0 18px 40px -24px rgba(0,0,0,.45)} .hwhy-paddle{background:rgba(210,210,215,.64);color:rgba(0,0,0,.56)} /* §5.22 light */ @media (hover:hover){.hwhy-paddle:hover{background:rgba(223,223,227,.6976);color:rgba(0,0,0,.64)} .hwhy-card:hover{box-shadow:inset 0 0 0 1px rgba(184,50,79,.45),0 22px 44px -22px rgba(128,0,32,.55)}} .hwhy-paddle:active{background:rgba(193,193,198,.6544)} /* ===== top menu bar on black (Sir, Oct 23) ===== */ .gnav,.menu-open .gnav{background:rgba(8,8,8,.94);color:#f5f5f7;border-bottom:0} .gnav-links a,.gnav-cta,.gnav-bag{color:#f5f5f7} .gnav-links a[aria-current="page"]{opacity:1} .burger i{background:#f5f5f7} .menu{background:#080808;color:#f5f5f7} /* audit Oct 24: solid, the page showed through */ /* ===== Audit Oct 24: Apple's 44pt minimum tap size for small text links on touch screens. Padding grows the tap area; the negative margin keeps the layout exactly where it was. ===== */ @media (pointer:coarse){ .stx-more,.hpm-link,.hwhy-link,.hhow-link,.bk-link,.abv-tel,.hvisit-tel,.bk-crumb a{display:inline-block;padding-block:13px;margin-block:-13px} } .bag-form[hidden]{display:none} /* ===== Home "Visit the shop": real shop photo above the cards (Sir, Oct 24) ===== */ .hvisit-photo{position:relative;margin:0;border-radius:28px;overflow:hidden;background:#111} .hvisit-photo img{display:block;width:100%;height:560px;object-fit:cover;object-position:50% 0%} .hvisit-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 32px 24px;color:#f5f5f7;font-size:17px;line-height:24px; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.78) 100%)} .hvisit-photo figcaption b{display:block;font-size:24px;line-height:28px;font-weight:600} @media (max-width:734px){ .hvisit-photo{border-radius:18px}.hvisit-photo img{height:auto;aspect-ratio:4/3.4} .hvisit-photo figcaption{padding:36px 18px 16px;font-size:14px;line-height:19px}.hvisit-photo figcaption b{font-size:19px;line-height:23px} } /* ===== Apple colour system (Sir, Oct 24): neutral whites, deep grays, subtle blues. Burgundy stays for buttons and the brand. ===== whites #fff / #f5f5f7 · text #1d1d1f / #6e6e73 · lines #d2d2d7 · dark cards #1c1c1e · text links #0066cc (on black #2997ff) · focus #0071e3 */ .more,.hpm-link,.hhow-link,.hvisit-link{color:var(--link)} .hwhy-link{color:var(--link)} .dark .more,.hvisit-card--dark .hvisit-link{color:var(--link-dark)} @media (hover:hover){ .more:hover,.hpm-link:hover,.hhow-link:hover,.hvisit-link:hover,.hwhy-link:hover{text-decoration:underline;text-underline-offset:3px} } :focus-visible{outline-color:var(--focus)!important} .text-in:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(0,113,227,.2)} /* deep grays for cards on black */ .hhow-card{background:var(--card-dark);box-shadow:inset 0 0 0 1px var(--line-dark)} .hvisit-card--dark{background:var(--card-dark)} .foot{color:rgba(235,235,245,.6)} .foot-cols a,.foot-cols p{color:rgba(235,235,245,.68)} .foot-note,.foot-cols{border-bottom-color:var(--line-dark)} /* ===== Store bag: "Reserve for pickup" + "Reserved" screen (Sir, Oct 24) ===== */ .bag [hidden]{display:none!important} .bag .bk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .bag-form .gap{gap:14px} .bag-form{gap:14px} .bag-form .text-in[aria-invalid="true"]{border-color:var(--mag);box-shadow:0 0 0 1px var(--mag)} .bag-error{padding:10px 12px;border-radius:10px;background:#fdf0f3;color:var(--mag);font-size:14px;line-height:19px} .bag-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .bag-send.is-busy{opacity:.6;cursor:progress} .bag-done{padding:28px 4px 8px;text-align:center} .bag-done-ic{display:inline-grid;color:var(--mag)} .bag-done-ic svg{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .bag-done:not([hidden]) .bag-done-ic{animation:bag-pop .5s cubic-bezier(.34,1.56,.64,1) both} @keyframes bag-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}} .bag-done-eye{margin-top:8px;font-size:15px;font-weight:600;color:var(--mag)} .bag-done-h{margin-top:2px;font-size:26px;line-height:32px;font-weight:700;color:var(--ink)} .bag-done-num{margin-top:6px;font-size:15px;color:var(--ink-2)} .bag-done-num b{color:var(--ink)} .bag-done-items{margin:16px 0 0;padding:12px 14px;list-style:none;border-radius:12px;background:var(--gray);text-align:left;font-size:14px;line-height:20px;color:var(--ink)} .bag-done-items li+li{margin-top:4px} .bag-done-p{margin-top:14px;font-size:15px;line-height:21px;color:var(--ink-2)} .bag-done-p b{color:var(--ink)} .bag-done-wa{margin-top:10px;font-size:14px;color:var(--ink-2)} .bag-done-wa a{color:var(--link)} @media (prefers-reduced-motion:reduce){.bag-done:not([hidden]) .bag-done-ic{animation:none}} /* (Sir, Nov 2) a card with more than one photo: swipe sideways, dots below */ .mv-gal{position:relative;display:block;overflow:hidden} .mv-gal-track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} .mv-gal-track::-webkit-scrollbar{display:none} html body .mv-gal .mv-gal-track img:not(#_a){position:relative;inset:auto;flex:0 0 100%;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;scroll-snap-align:center;padding:8%;transform:none;animation:none} .mv-gal-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:2px} .mv-gal-dots button{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center} .mv-gal-dots button::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(128,128,128,.45);transition:transform .2s,background .2s} .mv-gal-dots button[aria-current]::before{background:#111;transform:scale(1.25)} /* (Nov 2) iPhone zooms the page when a text box under 16px is tapped: phones get 16px boxes */ @media (hover:none) and (pointer:coarse){ html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):not(#_a):not(#_b){font-size:16px} }