@property --h { syntax: ''; inherits: true; initial-value: #e2262f; } @property --hi { syntax: ''; inherits: true; initial-value: #b3141d; } @property --ho { syntax: ''; inherits: true; initial-value: #ffffff; } :root { --ink: #10172a; --navy: #121a33; --navy2: #1a2447; --paper: #f2f0ea; --paper2: #e7e4db; --card: #fbfaf6; --graphite: #2b2f3a; --mute: #545a6c; --line: rgba(16,23,42,.15); --tape: #f4c531; --gold: #d9a93a; --cream: #f3f1ea; --wrap: 1320px; --gut: clamp(20px, 4vw, 48px); --f: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --m: 'IBM Plex Mono', ui-monospace, Consolas, monospace; transition: --h .9s cubic-bezier(.4,0,.2,1), --hi .9s cubic-bezier(.4,0,.2,1), --ho .9s cubic-bezier(.4,0,.2,1); } :root[data-house=merah] { --h: #e2262f; --hi: #b3141d; --ho: #ffffff; } :root[data-house=biru] { --h: #1e56d6; --hi: #1a47b4; --ho: #ffffff; } :root[data-house=kuning] { --h: #ffc526; --hi: #8a6200; --ho: #10172a; } :root[data-house=hijau] { --h: #0c874b; --hi: #0a6e3d; --ho: #ffffff; } :root[data-house=ungu] { --h: #7a3cc8; --hi: #6a2fb3; --ho: #ffffff; } :root[data-house=jingga] { --h: #ff7417; --hi: #a84a05; --ho: #10172a; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } body { font-family: var(--f); font-size: 18px; line-height: 1.55; color: var(--ink); background: var(--paper); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } .skip { position: absolute; left: -9999px; top: 12px; z-index: 200; background: #fff; color: var(--ink); padding: 12px 16px; border-radius: 8px; font-weight: 700; } .skip:focus { left: 12px; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hide-s { display: inline; } .eyebrow { font-family: var(--m); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hi); display: flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 30px; border-top: 2px dashed currentColor; } h2 { font-weight: 850; font-stretch: 86%; font-size: clamp(40px, 5.6vw, 92px); line-height: .95; letter-spacing: -.028em; margin-top: 18px; text-wrap: balance; } h3 { text-wrap: balance; } .deck { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--mute); max-width: 44ch; margin-top: 22px; } .giant { font-size: clamp(58px, 10.8vw, 188px); font-stretch: 112%; font-weight: 900; line-height: .88; letter-spacing: -.04em; } .giant .to { font-stretch: 62%; font-weight: 300; letter-spacing: -.02em; } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 999px; font-weight: 750; font-size: 17px; font-stretch: 100%; text-decoration: none; white-space: nowrap; transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .3s, color .3s, box-shadow .3s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.98); } .wa-i { display: inline-flex; flex: none; } .wa-i svg { width: 20px; height: 20px; } .btn-solid { background: var(--ink); color: #fff; box-shadow: 0 14px 30px -14px rgba(16,23,42,.7); } .btn-line { border: 2px solid currentColor; } .btn-sm { height: 44px; padding: 0 16px; font-size: 15px; gap: 8px; } .btn-sm .wa-i svg { width: 18px; height: 18px; } .btn-wa { background: var(--h); color: var(--ho); } .btn-quiet { height: 52px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 15px; } .btn-xl { height: 74px; padding: 0 36px; font-size: 21px; } .btn-xl .wa-i svg { width: 24px; height: 24px; } .btn-block { width: 100%; } /* ---------- header ---------- */ .hdr { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; } .pill { pointer-events: auto; position: relative; display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); width: min(1260px, 100%); height: 64px; padding: 0 10px 0 18px; border-radius: 999px; background: rgba(251,250,246,.86); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(16,23,42,.08); box-shadow: 0 16px 40px -20px rgba(16,23,42,.5); } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-width: 0; } .mk { width: 30px; height: 30px; flex: none; } .bw { font-weight: 900; font-stretch: 125%; font-size: 19px; letter-spacing: .01em; text-transform: uppercase; line-height: 1; } .bt { font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); padding-left: 10px; border-left: 1px solid var(--line); line-height: 1.2; } .nav { display: flex; gap: 2px; } .nav a { display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 650; font-size: 15.5px; transition: background-color .2s; } .nav a:hover { background: rgba(16,23,42,.07); } .stitchbar { position: absolute; left: 34px; right: 34px; bottom: 7px; height: 2px; pointer-events: none; } .stitchbar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: repeating-linear-gradient(90deg, var(--h) 0 7px, transparent 7px 12px); } /* ---------- hero ---------- */ .hero { position: relative; z-index: 2; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--h); color: var(--ho); isolation: isolate; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%; } .cloth { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; touch-action: pan-y; } .cloth-fallback { position: absolute; inset: 0; z-index: 0; display: none; align-items: flex-start; justify-content: center; padding-top: 24vh; background: radial-gradient(circle at 25% 25%, rgba(0,0,0,.22) 0 1.2px, transparent 1.8px) 0 0 / 7px 7px, radial-gradient(circle at 75% 75%, rgba(0,0,0,.22) 0 1.2px, transparent 1.8px) 0 0 / 7px 7px, linear-gradient(115deg, rgba(255,255,255,.14), rgba(0,0,0,.18)), var(--h); } .cloth-fallback span { font-weight: 900; font-stretch: 125%; font-size: 15vw; letter-spacing: -.02em; text-transform: uppercase; color: var(--ho); opacity: .95; line-height: 1; } .no-gl .cloth { display: none; } .no-gl .cloth-fallback { display: flex; } .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(90% 60% at 0% 100%, color-mix(in oklab, var(--h) 78%, transparent) 0%, color-mix(in oklab, var(--h) 40%, transparent) 45%, transparent 75%); } .hero-in { position: absolute; z-index: 2; left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); bottom: clamp(36px, 7vh, 72px); width: min(780px, 58vw); } .kicker { font-family: var(--m); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; } .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .hero h1 { font-size: clamp(46px, min(6.4vw, 10vh), 112px); font-weight: 900; font-stretch: 90%; line-height: .92; letter-spacing: -.03em; word-spacing: .06em; margin-top: 18px; text-wrap: balance; text-shadow: 0 2px 30px color-mix(in oklab, var(--h) 60%, transparent); } .hero-deck { font-size: clamp(17px, 1.3vw, 20px); max-width: 46ch; margin-top: 22px; line-height: 1.5; font-weight: 500; } .hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; } .hero .btn-solid { background: var(--ho); color: var(--hi); box-shadow: 0 16px 34px -16px rgba(0,0,0,.55); } :root[data-house=kuning] .hero .btn-solid, :root[data-house=jingga] .hero .btn-solid { color: var(--h); } .hero .btn-line { color: var(--ho); } .houses { position: absolute; z-index: 2; right: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); bottom: clamp(36px, 7vh, 72px); } .houses-l { font-family: var(--m); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; text-align: right; } .houses-row { display: grid; grid-template-columns: repeat(6, auto); gap: 6px; padding: 8px; border-radius: 18px; background: color-mix(in oklab, var(--ho) 14%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hs { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 6px 5px 4px; border-radius: 12px; transition: transform .25s; } .hs:hover { transform: translateY(-3px); } .hs .sw { width: 46px; height: 46px; border-radius: 11px; background: radial-gradient(circle at 25% 25%, rgba(0,0,0,.28) 0 1px, transparent 1.6px) 0 0 / 6px 6px, radial-gradient(circle at 75% 75%, rgba(0,0,0,.28) 0 1px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(135deg, rgba(255,255,255,.28), rgba(0,0,0,.12)), var(--c); box-shadow: 0 0 0 2.5px rgba(255,255,255,.95), 0 8px 18px -8px rgba(0,0,0,.6); transition: transform .3s cubic-bezier(.2,.8,.2,1); } .hs[aria-checked=true] .sw { transform: scale(1.1); box-shadow: 0 0 0 2.5px rgba(255,255,255,.95), 0 0 0 5.5px var(--ink), 0 8px 18px -8px rgba(0,0,0,.6); } .hs-n { font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .04em; } .hs[data-house=merah] { --c: #e2262f; } .hs[data-house=biru] { --c: #1e56d6; } .hs[data-house=kuning] { --c: #ffc526; } .hs[data-house=hijau] { --c: #0c874b; } .hs[data-house=ungu] { --c: #7a3cc8; } .hs[data-house=jingga] { --c: #ff7417; } .cue { position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--m); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; } /* full strength on the house colour (Armin 19 Oct 2026) */ .cue i { width: 2px; height: 34px; background: repeating-linear-gradient(currentColor 0 5px, transparent 5px 9px); animation: cue 1.6s linear infinite; } @keyframes cue { to { background-position: 0 9px; } } /* ---------- why: swing tags ---------- */ .why { position: relative; background: var(--navy); color: var(--cream); margin-top: -12px; padding: clamp(120px, 14vw, 190px) 0 clamp(90px, 10vw, 140px); overflow: hidden; } .why .eyebrow, .range .eyebrow, .cta .eyebrow { color: color-mix(in oklab, var(--h) 62%, #fff); } .why .deck, .range .deck, .cta .deck { color: rgba(243,241,234,.74); } .rack { position: relative; margin-top: clamp(56px, 7vw, 90px); } .rail { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(#f1f3f6, #a9b1be 45%, #6c7584 90%); box-shadow: 0 8px 18px rgba(0,0,0,.4); } .tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 36px); max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } .tag { position: relative; padding-top: 62px; } .tag::before { content: ''; position: absolute; left: 50%; top: 4px; width: 2px; height: 80px; margin-left: -1px; background: linear-gradient(#e9e2cf, #cfc6ae); } .tag::after { content: ''; position: absolute; left: 50%; top: -3px; width: 16px; height: 20px; margin-left: -8px; border: 2px solid #e2dac4; border-radius: 50%; } .tag-card { position: relative; z-index: 0; transform-origin: 50% 23px; filter: drop-shadow(0 22px 26px rgba(0,0,0,.42)); color: var(--ink); padding: 52px 26px 24px; min-height: 360px; display: flex; flex-direction: column; cursor: grab; will-change: transform; } .tag-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--card); clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%, 0 24px); } .tag-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--h); z-index: -1; } .hole { position: absolute; left: 50%; top: 15px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px #c9ced6, 0 0 0 5px #9aa2ae, inset 0 2px 3px rgba(0,0,0,.7); } .tag-code { font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--mute); } .tag-big { font-weight: 900; font-stretch: 84%; font-size: clamp(30px, 2.6vw, 42px); line-height: .95; letter-spacing: -.03em; margin-top: 18px; } .tag-body { font-size: 16.5px; line-height: 1.45; margin-top: 14px; color: #2c3142; } .tag-foot { margin-top: auto; padding-top: 18px; font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hi); border-top: 1.5px dashed var(--line); padding-bottom: 12px; } /* ---------- the line ---------- */ .line { position: relative; background-color: var(--paper); background-image: radial-gradient(circle, rgba(16,23,42,.16) 1px, transparent 1.4px); background-size: 26px 26px; } .line-head { padding-top: clamp(100px, 12vw, 170px); padding-bottom: clamp(10px, 2vw, 30px); } .line-pin { position: relative; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 70px; } .line-grid { display: grid; grid-template-columns: minmax(300px, 4fr) 8fr; gap: clamp(24px, 4vw, 64px); align-items: center; } .line-stage { position: relative; } .line-stage .stage { width: 100%; height: auto; max-height: calc(100svh - 150px); margin: 0 auto; overflow: hidden; } .st-count { font-weight: 900; font-stretch: 118%; font-size: clamp(64px, 7vw, 124px); line-height: .8; letter-spacing: -.05em; color: var(--hi); display: flex; align-items: flex-start; gap: 10px; } .st-of { font-family: var(--m); font-size: 15px; font-weight: 600; letter-spacing: .1em; color: var(--mute); padding-top: 8px; } .st-list { margin-top: 30px; border-top: 1.5px solid var(--ink); } .st-list li { border-bottom: 1px solid var(--line); padding: 13px 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; color: #7b8092; transition: color .35s; } .st-list li.on { color: var(--ink); } .st-name { font-weight: 800; font-size: clamp(18px, 1.5vw, 22px); font-stretch: 94%; letter-spacing: -.01em; } .st-ms { font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; align-self: center; } .st-list li.on .st-ms { color: var(--hi); } .st-desc { grid-column: 1 / -1; max-height: 0; overflow: hidden; opacity: 0; font-size: 16.5px; line-height: 1.5; color: #2c3142; transition: max-height .5s cubic-bezier(.2,.8,.2,1), opacity .4s, margin .4s; } .st-list li.on .st-desc { max-height: 130px; opacity: 1; margin-top: 6px; } .line-prog { position: absolute; left: 0; right: 0; bottom: 26px; } .lp-track { position: relative; display: block; height: 2px; background: repeating-linear-gradient(90deg, rgba(16,23,42,.2) 0 7px, transparent 7px 12px); } .lp-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: repeating-linear-gradient(90deg, var(--h) 0 7px, transparent 7px 12px); } .line-static .line-pin { height: auto; padding: 40px 0 100px; } /* stage drawing */ .stage .pen { fill: none; stroke: var(--graphite); stroke-width: 1.5; stroke-linejoin: round; } .stage .fab { fill: var(--h); } .stage .plies path { fill: color-mix(in oklab, var(--h) 70%, #000); } .stage .grain path { fill: none; stroke: var(--graphite); stroke-width: 1.3; } .stage .blade circle { fill: #eef0f3; stroke: var(--ink); stroke-width: 2; } .stage .blade path { stroke: var(--ink); stroke-width: 1.6; } .stage .st-labels text { font-family: var(--m); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; fill: var(--graphite); text-anchor: middle; } .stage .st-block rect { fill: rgba(255,255,255,.55); stroke: var(--graphite); stroke-width: 1.2; } .stage .st-block path { stroke: var(--graphite); stroke-width: 1; fill: none; } /* The factory drawing's label sizes (11, 10, 5.4, 5.5 px in the SVG's own drawing units) are set on the elements in garments.js since 24 Oct 2026: inner pages carry this stylesheet verbatim and contain no drawing. */ .stage .st-block text { text-anchor: start; } .stage .st-block .k { fill: #6b7080; } .stage .st-rib-strip .fab { fill: color-mix(in oklab, var(--h) 86%, #000); } .stage .st-neck { fill: color-mix(in oklab, var(--h) 70%, #000); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; } .stage .st-outline { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; } .stage .st-rib path { fill: color-mix(in oklab, var(--h) 86%, #000); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; } .stage .st-seams path { fill: none; stroke: color-mix(in oklab, var(--ho) 70%, transparent); stroke-width: 1.4; stroke-dasharray: 4 3; } .stage .st-shadow { fill: rgba(16,23,42,.2); filter: blur(7px); } .stage .st-print text { fill: var(--ho); font-family: var(--f); font-weight: 900; font-stretch: 125%; } .stage .st-print .pt { font-size: 12px; letter-spacing: 5px; } .stage .st-print .pm { font-size: 40px; } .stage .st-print .ps { font-family: var(--m); font-weight: 600; font-stretch: 100%; letter-spacing: 2px; } .stage .cr-fill { fill: #f4f1e6; } .stage .cr-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; } .stage .sat { stroke: #d6cfb8; stroke-width: 1.4; } .stage .cr-star { fill: var(--h); } .stage .st-needle path { stroke: #8f98a6; stroke-width: 2.2; stroke-linecap: round; } .stage .st-needle circle { fill: var(--ink); } .stage .st-needle .thr { fill: none; stroke: var(--gold); stroke-width: 1.2; } .stage .st-screen .frame { fill: none; stroke: #8d96a3; stroke-width: 9; } .stage .st-screen .mesh { fill: rgba(246,222,140,.62); } .stage .st-screen .squeegee rect { fill: var(--ink); } .stage .st-press .plate { fill: #3b414e; } .stage .st-press .plate-top { fill: #596172; } .stage .st-press .plate-hd { fill: #1d222c; } .stage .st-press .plate-glow { fill: #ff7a2a; } .stage .st-tag .str { fill: none; stroke: #b9b2a0; stroke-width: 1.5; } .stage .st-tag path:not(.str) { fill: var(--card); stroke: var(--ink); stroke-width: 1.2; } .stage .st-tag circle { fill: var(--ink); } .stage .st-tag text { font-family: var(--f); font-weight: 900; font-stretch: 110%; letter-spacing: .3px; fill: var(--ink); } .stage .st-tag .t2 { font-family: var(--m); font-weight: 600; font-stretch: 100%; letter-spacing: .5px; } .stage.st-final .st-labels, .stage.st-final .st-rib-strip, .stage.st-final .pen, .stage.st-final .grain, .stage.st-final .plies, .stage.st-final .blade, .stage.st-final .st-screen, .stage.st-final .st-press, .stage.st-final .st-needle { display: none; } /* ---------- range ---------- */ .range { position: relative; color: var(--cream); padding: clamp(100px, 12vw, 160px) 0 clamp(100px, 12vw, 160px); background-color: var(--navy); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.085) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.085) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px; } .mat-ruler { position: absolute; top: 0; left: 0; right: 0; height: 28px; border-bottom: 1px solid rgba(255,255,255,.16); background: repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 1px, transparent 1px 8px) left bottom / 100% 7px no-repeat, repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 1px, transparent 1px 40px) left bottom / 100% 15px no-repeat; } .tp { margin-top: clamp(40px, 5vw, 64px); background: var(--card); color: var(--ink); border-radius: 4px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.2); overflow: clip; } .tp-top { display: flex; align-items: stretch; border-bottom: 1.5px solid var(--ink); } .tp-doc { font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 14px 22px; border-right: 1.5px solid var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 3px; white-space: nowrap; } .tp-docno { color: var(--mute); } .tp-tabs { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; } .tp-tabs::-webkit-scrollbar { display: none; } .tp-tabs [role=tab] { flex: 1 0 auto; padding: 20px 22px; text-align: left; font-weight: 800; font-size: 17px; font-stretch: 94%; border-right: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; transition: background-color .3s, color .3s; white-space: nowrap; } .tp-tabs [role=tab]:last-child { border-right: 0; } .tp-tabs [role=tab]:hover { background: rgba(16,23,42,.05); } .tp-tabs [aria-selected=true], .tp-tabs [aria-selected=true]:hover { background: var(--h); color: var(--ho); } .tn { font-family: var(--m); font-size: 12px; font-weight: 600; opacity: .7; } .tp-tabs [aria-selected=true] .tn { opacity: 1; } /* 70% white on the house colour read 2.9-3.9:1 (Armin 19 Oct 2026) */ .tp-body { display: grid; grid-template-columns: 7fr 5fr; } .tp-draw { position: sticky; top: 88px; align-self: start; padding: clamp(20px, 3vw, 44px); display: flex; flex-direction: column; min-height: min(660px, calc(100vh - 110px)); background-color: #fdfcf9; background-image: linear-gradient(rgba(16,23,42,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16,23,42,.05) 1px, transparent 1px); background-size: 20px 20px; } .tp-fig { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 0 20px; } .figbox { position: relative; width: min(100%, calc(min(540px, 100vh - 250px) * var(--ar, .95))); } .figsvg, .figsvg svg { width: 100%; height: 100%; } .figsvg svg { overflow: visible; filter: drop-shadow(0 18px 22px rgba(16,23,42,.14)); } .tp-spots { position: absolute; inset: 0; } .spot { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--m); font-size: 13px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 8px 16px -4px rgba(0,0,0,.35); transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s, color .25s, opacity .25s; } .spot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--ink); opacity: 0; animation: ping 2.4s ease-out infinite; } .spot:nth-child(2)::after { animation-delay: .6s; } .spot:nth-child(3)::after { animation-delay: 1.2s; } .spot:nth-child(4)::after { animation-delay: 1.8s; } @keyframes ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.1); opacity: 0; } } .spot.hot, .spot:hover { transform: scale(1.2); background: var(--h); color: var(--ho); } .spot.off, .fdot.off { opacity: 0; pointer-events: none; } .leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .leaders line { stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; transition: stroke .25s, opacity .25s; } .leaders line.hot { stroke: var(--hi); stroke-dasharray: none; stroke-width: 2; } .leaders line.off { opacity: 0; } .fdot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; pointer-events: none; } .tp-draw figcaption { display: flex; justify-content: space-between; font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); border-top: 1px dashed rgba(16,23,42,.3); padding-top: 12px; } .tp-draw { min-width: 0; } .tp-side { display: flex; flex-direction: column; min-width: 0; border-left: 1.5px solid var(--ink); } .tp-panel { padding: clamp(22px, 2.6vw, 36px); border-bottom: 1.5px solid var(--ink); } .tp-code { font-family: var(--m); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hi); } .tp-panel h3 { font-size: clamp(28px, 2.5vw, 38px); font-weight: 850; font-stretch: 88%; line-height: 1; letter-spacing: -.025em; margin-top: 8px; } .tp-desc { margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: var(--mute); } .tp-opts { margin-top: 22px; display: grid; gap: 18px; } .opt-l { display: flex; justify-content: space-between; gap: 10px; font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 9px; } .opt-v, .opt-hint { text-transform: none; letter-spacing: .02em; color: var(--ink); } .opt-hint { color: var(--mute); } .seg { display: flex; flex-wrap: wrap; gap: 6px; } .seg button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(16,23,42,.2); font-weight: 650; font-size: 15px; transition: background-color .2s, color .2s, border-color .2s; } .seg button:hover { border-color: var(--ink); } .seg button[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); } .chips { display: flex; flex-wrap: wrap; gap: 9px; } .chip { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%), var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); transition: transform .2s; } .chip:hover { transform: scale(1.1); } .chip[aria-pressed=true] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 3px var(--card), 0 0 0 5px var(--ink); } .fabrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .fab-sw { text-align: left; border: 1.5px solid rgba(16,23,42,.2); border-radius: 4px; padding: 8px 8px 10px; font-size: 14px; font-weight: 650; line-height: 1.25; transition: border-color .2s, box-shadow .2s; } .fab-sw:hover { border-color: var(--ink); } .fab-sw[aria-pressed=true] { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .fab-sw .tx { display: block; height: 46px; margin-bottom: 9px; background-color: var(--h); -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 51% repeat-x; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 51% repeat-x; } .tx-eyelet { background-image: radial-gradient(circle at 25% 25%, rgba(0,0,0,.34) 0 1.2px, transparent 1.8px), radial-gradient(circle at 75% 75%, rgba(0,0,0,.34) 0 1.2px, transparent 1.8px); background-size: 7px 7px; } .tx-interlock { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); } .tx-cotton { background-image: repeating-linear-gradient(62deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px), repeating-linear-gradient(-62deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px); } .txt-in { width: 100%; height: 46px; border: 1.5px solid rgba(16,23,42,.25); border-radius: 6px; padding: 0 14px; font: inherit; font-size: 16px; background: #fff; color: var(--ink); } .txt-in:focus { outline: 3px solid var(--h); outline-offset: 1px; border-color: var(--ink); } .tp-legend { margin-top: 22px; display: grid; gap: 4px; counter-reset: lg; border-top: 1px dashed rgba(16,23,42,.3); padding-top: 14px; } .tp-legend li { position: relative; display: block; font-size: 15.5px; line-height: 1.45; padding: 6px 8px 6px 42px; border-radius: 8px; transition: background-color .2s, opacity .2s; } .tp-legend li::before { counter-increment: lg; content: counter(lg); width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--m); font-size: 12px; font-weight: 600; display: grid; place-items: center; position: absolute; left: 8px; top: 5px; } .tp-legend li.hot { background: color-mix(in oklab, var(--h) 15%, transparent); } .tp-legend li.dim { opacity: .45; } .tp-order { padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 18px; background: #f6f4ee; flex: 1; } .to-l { display: flex; justify-content: space-between; gap: 10px; font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 9px; } .to-hint { text-transform: none; letter-spacing: .02em; } .qty { display: flex; gap: 8px; align-items: center; } .qty input { width: 110px; flex: none; height: 48px; border: 1.5px solid rgba(16,23,42,.25); border-radius: 8px; padding: 0 12px; font: inherit; font-weight: 800; font-size: 22px; text-align: center; background: #fff; color: var(--ink); -moz-appearance: textfield; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qb { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 22px; font-weight: 700; line-height: 1; } .qb:hover { background: var(--ink); color: #fff; } .qu { font-family: var(--m); font-size: 13px; font-weight: 600; color: var(--mute); margin-right: auto; } .presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .presets button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid rgba(16,23,42,.2); font-family: var(--m); font-size: 13px; font-weight: 600; } .presets button[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); } .qty input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--h) var(--f), rgba(16,23,42,.15) var(--f)); } .qty input::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(16,23,42,.15); } .qty input::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--h); } .qty input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); box-shadow: 0 4px 10px rgba(0,0,0,.2); } .qty input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); } .qty output { font-weight: 850; font-size: 21px; min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; } .tp-order select { width: 100%; height: 46px; border: 1.5px solid rgba(16,23,42,.25); border-radius: 6px; padding: 0 12px; font: inherit; font-size: 16px; background: #fff; color: var(--ink); } .to-sheet { display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; font-family: var(--m); font-size: 13.5px; line-height: 1.5; background: #fff; border: 1.5px solid var(--ink); padding: 14px 16px; border-radius: 3px; box-shadow: 4px 4px 0 var(--ink); } .to-sheet div { display: contents; } .to-sheet dt { color: var(--mute); } .to-sheet dd { font-weight: 600; overflow-wrap: anywhere; } .to-cta { display: grid; grid-template-columns: 1fr auto; gap: 10px; } .to-cta .btn-solid { background: var(--h); color: var(--ho); } .to-note { font-size: 14px; color: var(--mute); line-height: 1.45; } /* ---------- size run ---------- */ .sizes { position: relative; background: var(--h); color: var(--ho); padding: clamp(100px, 12vw, 170px) 0 clamp(80px, 9vw, 130px); overflow: hidden; } .sizes .eyebrow { color: var(--ho); } .sizes .deck { color: var(--ho); } /* was opacity .88: about 4:1 on the green house (Armin 19 Oct 2026) */ .sizes .giant { margin-top: 18px; } .ladder { display: flex; gap: clamp(14px, 2.4vw, 40px); margin-top: clamp(44px, 5vw, 70px); align-items: flex-end; } .lrow { flex: var(--w) 1 0; min-width: 0; } .lrungs { display: flex; align-items: flex-end; gap: clamp(4px, .8vw, 12px); } .rung { flex: var(--s) 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; } .rt { width: 100%; } .rt svg { width: 100%; height: auto; overflow: visible; } .rt .lt { fill: color-mix(in oklab, var(--ho) 94%, transparent); } .rt .ln { fill: color-mix(in oklab, var(--ho) 50%, var(--h)); } .rt .lr { fill: color-mix(in oklab, var(--ho) 80%, var(--h)); } .rt .ls { fill: none; stroke: var(--h); stroke-width: 3; stroke-dasharray: 6 5; opacity: .5; } .rung .lab { font-family: var(--m); font-size: 12px; font-weight: 600; margin-top: 12px; letter-spacing: .02em; white-space: nowrap; } .lkey { margin-top: 16px; padding-top: 12px; border-top: 2px solid currentColor; font-family: var(--m); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .ladder-key { display: none; } .lk2 { display: none; } /* size chart (George's own, 29 Sep) */ .sc-head { margin-top: clamp(70px, 8vw, 120px); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 40px; } .sc-h { font-size: clamp(36px, 4.4vw, 64px); font-weight: 900; font-stretch: 100%; line-height: .95; letter-spacing: -.035em; } .sc-sub { font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; max-width: 46ch; } /* full colour: at .88 it fell to 3.8:1 on the red and green houses (Armin 20 Oct 2026) */ .sc { margin-top: clamp(26px, 3vw, 40px); background: var(--card); color: var(--ink); border-radius: 4px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.2); overflow: clip; } .sc-top { display: flex; align-items: stretch; border-bottom: 1.5px solid var(--ink); } .sc-doc { font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 14px 22px; border-right: 1.5px solid var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 3px; white-space: nowrap; } .sc-docno { color: var(--mute); } .sc-tabs { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; } .sc-tabs::-webkit-scrollbar { display: none; } .sc-tabs [role=tab] { flex: 1 0 auto; padding: 18px 22px; text-align: left; font-weight: 800; font-size: 16.5px; font-stretch: 94%; border-right: 1px solid var(--line); white-space: nowrap; transition: background-color .3s, color .3s; } .sc-tabs [role=tab]:last-child { border-right: 0; } .sc-tabs [role=tab]:hover { background: rgba(16,23,42,.05); } .sc-tabs [aria-selected=true], .sc-tabs [aria-selected=true]:hover { background: var(--h); color: var(--ho); } .sc-panel { padding: clamp(8px, 1.4vw, 18px) clamp(14px, 2.4vw, 34px) 6px; } .sc-panel:focus-visible { outline: 3px solid var(--hi); outline-offset: -3px; } .sc-t { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; } .sc-t th, .sc-t td { padding: 11px 6px; text-align: center; border-bottom: 1px solid var(--line); } .sc-t thead th { font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); line-height: 1.3; vertical-align: bottom; border-bottom: 1.5px solid var(--ink); } .sc-t tbody th { font-weight: 850; font-size: 17px; font-stretch: 94%; } .sc-t td { font-family: var(--m); font-size: 15.5px; font-weight: 500; } .sc-t td.nil { color: var(--mute); } .sc-t tbody tr:last-child > * { border-bottom: 0; } .sc-t tbody tr:hover > * { background: color-mix(in oklab, var(--h) 13%, transparent); } .sc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 14px clamp(14px, 2.4vw, 34px); border-top: 1.5px solid var(--ink); background: #f6f4ee; font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .sc-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .sc-foot a:hover { color: var(--hi); } /* ---------- order: tape ---------- */ .order { position: relative; background-color: var(--paper); background-image: radial-gradient(circle, rgba(16,23,42,.16) 1px, transparent 1.4px); background-size: 26px 26px; padding: clamp(100px, 12vw, 170px) 0 clamp(60px, 7vw, 100px); overflow: hidden; } .tape-wrap { position: relative; margin-top: clamp(44px, 5vw, 70px); --tp: 100%; } .tape { position: relative; height: 66px; } .tape-band { position: absolute; inset: 0; background-color: var(--tape); clip-path: inset(0 calc(100% - var(--tp)) 0 0); box-shadow: 0 10px 20px -10px rgba(16,23,42,.5); background-image: repeating-linear-gradient(90deg, rgba(16,23,42,.75) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 30px), repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 60px), repeating-linear-gradient(90deg, rgba(16,23,42,.75) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 30px), repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 60px); background-size: 100% 9px, 100% 15px, 100% 22px, 100% 9px, 100% 15px, 100% 22px; background-position: 18px top, 18px top, 18px top, 18px bottom, 18px bottom, 18px bottom; background-repeat: no-repeat; } .tape-nums { position: absolute; inset: 0; } .tape-nums span { position: absolute; top: 50%; left: calc(18px + var(--i) * 60px); transform: translate(-50%, -50%); font-family: var(--m); font-weight: 600; font-size: 13px; color: var(--ink); } .tape-nums span:first-child { display: none; } .tape-tip { position: absolute; left: 0; top: -3px; bottom: -3px; width: 18px; border-radius: 2px; background: linear-gradient(90deg, #9aa2ae, #eef0f3 55%, #8d96a3); box-shadow: 1px 0 0 rgba(0,0,0,.3); } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 40px); } .step { position: relative; padding-top: 60px; } .step::before { content: ''; position: absolute; left: 6px; top: -8px; width: 2px; height: 56px; background: var(--ink); } .step::after { content: ''; position: absolute; left: 0; top: -14px; width: 14px; height: 14px; border-radius: 50%; background: var(--h); box-shadow: 0 0 0 2px var(--ink), 0 4px 8px rgba(0,0,0,.25); } .step-n { display: block; font-weight: 900; font-stretch: 125%; font-size: clamp(44px, 4.2vw, 68px); line-height: .9; letter-spacing: -.04em; color: var(--hi); } .step h3 { font-size: clamp(22px, 1.8vw, 27px); font-weight: 800; font-stretch: 92%; letter-spacing: -.015em; margin-top: 14px; line-height: 1.1; } .step p { font-size: 16.5px; color: #3a3f50; margin-top: 10px; line-height: 1.5; } .ship { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 80px); align-items: center; margin-top: clamp(80px, 9vw, 130px); padding-top: clamp(44px, 5vw, 64px); border-top: 2px dashed rgba(16,23,42,.25); } .ship-h { font-size: clamp(30px, 3.2vw, 50px); font-weight: 850; font-stretch: 88%; line-height: 1; letter-spacing: -.025em; } .hours { margin-top: 28px; border-top: 1.5px solid var(--ink); } .hours div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .hours dt { font-family: var(--m); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); align-self: center; } .hours dd { font-weight: 650; font-size: 17px; } .map { margin: 0; } .map svg { width: 100%; height: auto; overflow: visible; } .map .near { fill: rgba(16,23,42,.07); } .map .land { fill: #fff; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; } .map .route { fill: none; stroke: var(--hi); stroke-width: 2.2; stroke-dasharray: 7 6; stroke-linecap: round; animation: flow 1.2s linear infinite; } @keyframes flow { to { stroke-dashoffset: -13; } } .map .dest { fill: var(--ink); } .map .pin-dot { fill: var(--h); stroke: var(--ink); stroke-width: 2.5; } .map .pin-ring { fill: none; stroke: var(--h); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: pinping 2s ease-out infinite; } @keyframes pinping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } } .map .mlab { font-family: var(--m); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; fill: var(--ink); } .map .mlab.k { font-family: var(--f); font-weight: 900; font-stretch: 110%; font-size: 15px; letter-spacing: .02em; } .map .mlab.s { fill: var(--mute); font-size: 12px; } /* ---------- faq ---------- */ .faq { background: var(--paper); padding: clamp(50px, 6vw, 90px) 0 clamp(100px, 12vw, 160px); } .faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 5vw, 90px); align-items: start; } .faq-head { position: sticky; top: 110px; } .qa { border-top: 1.5px solid var(--ink); } .qa:last-child { border-bottom: 1.5px solid var(--ink); } .qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-weight: 800; font-size: clamp(19px, 1.6vw, 23px); font-stretch: 94%; letter-spacing: -.01em; line-height: 1.2; } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { color: var(--hi); } .qpm { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s; } .qpm::before, .qpm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; background: var(--ink); } .qpm::after { transform: rotate(90deg); } .qa[open] .qpm { transform: rotate(45deg); background: var(--h); border-color: var(--ink); } .qa .ans { padding: 0 60px 26px 0; max-width: 64ch; font-size: 17.5px; line-height: 1.55; color: #2c3142; } /* ---------- cta ---------- */ .cta { position: relative; background: var(--navy); color: var(--cream); padding: clamp(110px, 13vw, 190px) 0 clamp(90px, 10vw, 140px); overflow: hidden; } .cta-in { position: relative; z-index: 1; } .cta .giant { margin-top: 20px; max-width: 12ch; } .cta .btn-solid { background: var(--h); color: var(--ho); margin-top: 38px; box-shadow: 0 20px 44px -18px color-mix(in oklab, var(--h) 80%, #000); } .cta-mark { position: absolute; z-index: 0; right: -9vw; bottom: -18vw; width: min(50vw, 700px); opacity: .95; pointer-events: none; } .cta-mark svg { width: 100%; height: auto; } /* ---------- footer: woven label ---------- */ .foot { background: var(--navy); color: var(--cream); padding: 10px 0 64px; } .label { display: flex; align-items: stretch; max-width: 780px; margin: 0 auto; filter: drop-shadow(0 20px 26px rgba(0,0,0,.45)); } .label-in { flex: 1; text-align: center; padding: 30px 22px 28px; color: #1c2a52; font-family: var(--m); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; background-color: #f7f5ee; background-image: repeating-linear-gradient(90deg, rgba(28,42,82,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(28,42,82,.04) 0 1px, transparent 1px 2px), linear-gradient(rgba(255,255,255,.7), rgba(0,0,0,.03)); } .label-fold { width: 28px; flex: none; background: linear-gradient(90deg, #cfcabd, #efece3); } .label-fold.l { clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 94%); } .label-fold.r { background: linear-gradient(90deg, #efece3, #cfcabd); clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%); } .label-brand { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--f); font-weight: 900; font-stretch: 125%; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .04em; margin-bottom: 14px; } .label-brand .mk { width: 34px; height: 34px; } .label-line { margin-top: 7px; line-height: 1.5; } .label a { text-decoration: none; border-bottom: 1.5px solid currentColor; } .foot-note { text-align: center; margin-top: 30px; font-size: 14.5px; color: rgba(243,241,234,.62); } .foot-note.small { font-size: 12.5px; margin-top: 8px; font-family: var(--m); letter-spacing: .08em; text-transform: uppercase; } .tbc { color: rgba(243,241,234,.92); border-bottom: 1px dashed rgba(243,241,234,.6); } /* ---------- responsive ---------- */ @media (max-width: 1180px) { .hero-in { width: min(700px, 62vw); } .houses .hs-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* hidden, still the button's name (Armin 19 Oct 2026) */ .houses-row { gap: 4px; } } @media (max-width: 1060px) { .nav { display: none; } .tags { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } .tags .tag:nth-child(n+3)::before { height: 0; } .tags .tag:nth-child(n+3)::after { display: none; } .tags .tag:nth-child(n+3) { padding-top: 30px; } .tp-body { grid-template-columns: 1fr 1fr; } } @media (max-width: 899px) { body { font-size: 17px; } .bt, .hide-s { display: none; } .pill { height: 56px; padding: 0 7px 0 14px; } .bw { font-size: 17px; } .stitchbar { left: 24px; right: 24px; bottom: 5px; } .hero { min-height: 600px; } .hero-in { left: var(--gut); right: var(--gut); width: auto; bottom: 150px; } .hero h1 { font-size: clamp(42px, 11.4vw, 72px); } .hero-deck { font-size: 16.5px; margin-top: 16px; } .hero-cta { margin-top: 22px; } .hero-cta .btn { height: 50px; padding: 0 20px; font-size: 16px; } .houses { left: var(--gut); right: var(--gut); bottom: 30px; } .houses-l { text-align: left; margin-bottom: 8px; } .houses-row { grid-template-columns: repeat(6, 1fr); padding: 6px; } .hs { padding: 4px 2px; } .hs .sw { width: 100%; height: auto; aspect-ratio: 1; max-width: 50px; border-radius: 10px; } .cue { display: none; } .tags { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 30px; scrollbar-width: none; } .tags::-webkit-scrollbar { display: none; } .tag, .tags .tag:nth-child(n+3) { flex: 0 0 76%; scroll-snap-align: center; padding-top: 62px; } .tags .tag:nth-child(n+3)::before { height: 80px; } .tags .tag:nth-child(n+3)::after { display: block; } .tag-card { min-height: 330px; } .line-pin { padding-top: 64px; justify-content: center; } .line-grid { grid-template-columns: 1fr; gap: 6px; } .line-stage { order: -1; } .line-stage .stage { height: 46svh; max-height: none; } .st-count { font-size: 50px; } .st-of { font-size: 13px; padding-top: 4px; } .st-list { margin-top: 14px; } .st-list li { display: none; padding: 10px 0 0; border: 0; } .st-list li.on { display: grid; } .st-list { border-top-width: 1px; } .line-prog { bottom: 18px; } .line-static .st-list li { display: grid; } .tp-top { flex-direction: column; } .tp-doc { display: none; } .tp-tabs [role=tab] { padding: 16px 16px; font-size: 15.5px; flex: 0 0 auto; } .tp-body { grid-template-columns: 1fr; } .tp-draw { position: relative; top: 0; min-height: 0; padding: 18px 18px 14px; } .tp-side { border-left: 0; border-top: 1.5px solid var(--ink); } .figbox { width: min(100%, calc(30svh * var(--ar, .95))); } .tp-draw { position: sticky; top: 76px; z-index: 4; padding: 8px 18px 6px; box-shadow: 0 10px 18px -12px rgba(16,23,42,.45); border-bottom: 1.5px solid var(--ink); } .tp-draw figcaption { display: none; } .tp-fig { padding: 4px 0; } .tp-side { border-top: 0; } .spot { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 12px; } .fabrics { grid-template-columns: repeat(3, 1fr); } .fab-sw { font-size: 13px; } .to-cta { grid-template-columns: 1fr; } .ladder { flex-direction: column; align-items: stretch; gap: 40px; } .lrow { flex: none; } .lrungs { gap: 6px; } .rung .lab { font-size: 12px; } .rung .lf { display: none; } .lk2 { display: inline; } /* was opacity .8: 3.4:1 on the red house (Armin 19 Oct 2026) */ .sc-top { flex-direction: column; } .sc-doc { display: none; } .sc-tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; } .sc-tabs [role=tab] { padding: 14px 16px; font-size: 15px; white-space: normal; border-bottom: 1px solid var(--line); } .sc-tabs [role=tab]:nth-child(2n) { border-right: 0; } .sc-tabs [role=tab]:nth-child(n+3) { border-bottom: 0; } .sc-panel { padding: 4px 4px 2px; } .sc-t th, .sc-t td { padding: 9px 2px; } .sc-t thead th { font-size: 12px; letter-spacing: 0; -webkit-hyphens: auto; hyphens: auto; } .sc-t thead th:first-child { width: 11%; } .sc-t thead th:nth-child(4) { width: 19.5%; } /* Shoulder: its label is the widest word (Armin 19 Oct 2026) */ .sc-t tbody th { font-size: 15px; } .sc-t td { font-size: 14px; } .sc-foot { flex-direction: column; letter-spacing: .08em; } .tape-wrap { padding-left: 64px; } .tape { position: absolute; left: var(--gut); top: -10px; bottom: 0; width: 50px; height: auto; } .tape-band { clip-path: inset(0 0 calc(100% - var(--tp)) 0); background-image: repeating-linear-gradient(180deg, rgba(16,23,42,.75) 0 1px, transparent 1px 6px), repeating-linear-gradient(180deg, var(--ink) 0 1.5px, transparent 1.5px 30px), repeating-linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 60px), repeating-linear-gradient(180deg, rgba(16,23,42,.75) 0 1px, transparent 1px 6px), repeating-linear-gradient(180deg, var(--ink) 0 1.5px, transparent 1.5px 30px), repeating-linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 60px); background-size: 8px 100%, 13px 100%, 19px 100%, 8px 100%, 13px 100%, 19px 100%; background-position: left 18px, left 18px, left 18px, right 18px, right 18px, right 18px; } .tape-nums span { left: 50%; top: calc(18px + var(--i) * 60px); font-size: 12px; } .tape-tip { left: -3px; right: -3px; top: 0; bottom: auto; width: auto; height: 18px; background: linear-gradient(180deg, #9aa2ae, #eef0f3 55%, #8d96a3); } .steps { grid-template-columns: 1fr; gap: 34px; padding-left: calc(var(--gut) + 30px); padding-top: 18px; } .step { padding-top: 0; padding-left: 8px; } .step::before { left: -30px; top: 22px; width: 30px; height: 2px; } .step::after { left: -44px; top: 16px; } .ship { grid-template-columns: 1fr; } .faq-grid { grid-template-columns: 1fr; } .faq-head { position: static; } .qa .ans { padding-right: 0; } .cta .giant { font-size: clamp(44px, 12.4vw, 64px); font-stretch: 100%; } .btn-xl { width: 100%; height: 62px; padding: 0 18px; font-size: 17px; } .btn-xl .wa-i svg { width: 21px; height: 21px; } .cta-mark { right: -34vw; bottom: -30vw; width: 92vw; opacity: .5; } .label-brand { flex-direction: column; gap: 8px; font-size: 21px; } .label-in { font-size: 12px; letter-spacing: .12em; padding: 24px 12px; } .label-fold { width: 16px; } } @media (max-width: 420px) { .btn-sm { padding: 0 13px; } .hero h1 { font-size: 40px; } .hero-cta .btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } :root { transition: none; } } /* The header button is sized by its padding, not a fixed height: same 44px, but the design check reads a fixed-height button with no vertical padding as text wrapping onto two lines (5 Oct 2026). */ .hdr .btn-sm { height: auto; padding-top: 13px; padding-bottom: 13px; line-height: 1; } /* The headline runs to four lines since 6 Oct 2026 (track bottoms and trousers): on short laptop screens the font also follows the screen height (10vh above), so the kicker stays clear of the menu bar. */ /* Bahasa Melayu page (13 Oct 2026): its size heading "Tahun 1 hingga Tingkatan 6." is longer than the English "Standard 1 to Form 6.", so on phones it follows the screen width and "Tingkatan 6." stays on the screen. */ @media (max-width: 560px) { :lang(ms) #sizes-h { font-size: 11.4vw; } } /* EN | BM language switch in the header pill (13 Oct 2026, Dan: "do as he request, make it a toggle"). One source: build.py adds it to the homepage's styles and puts it in every guides page as