/* ============================================================ PROXY DESIGN STUDIO Landing page (/design-studio/) and per-platform studio routes. Built on styles.css tokens. The only new color is --ds-stage, sampled from the approved hardware-family render so the hero photograph sits seamlessly on its band. ============================================================ */ :root{ --ds-stage:#0D183A; } /* ---------- hero: the Design Studio, as a working environment ---------- Composition. A navy studio panel on the left holds the headline; on the right a warm canvas (the artboard) bleeds to the window edge and runs out of the bottom of the hero into the platform section, so choosing a platform reads as the next step on the same surface. COMBO sits on the canvas as the object being worked on: precision crop marks around it, a faint centre guide, a contact shadow and a champagne floor. Choreography (html.ds-motion only; the default rules below are the settled state, so no-JS and reduced motion show it at once): 1 neutral 0.15-1.0 s the raw, unlit device and the studio marks come up 2 transform 1.0-2.5 s a champagne line crosses the device; Violet Purple follows it, left to right, once 3 brand reveal 2.15-3.0 s the iridescent PX lights from the display, its glow kept inside the screen 4 settled 2.75-3.6 s label, swatches and colour settle; the marks fall back Swatch changes reuse the same line and wipe (hero.js), never a hard image swap. */ .ds-hero{--ds-champagne:#E2C68C;--ds-canvas:#F4EFE5;--ds-ink:var(--navy);--ds-mark:rgba(30,39,73,.42); --ds-curve:cubic-bezier(.66,0,.28,1); position:relative;background:var(--ds-stage);color:#fff;overflow:hidden;padding:0} .ds-hero-grid{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);min-height:clamp(640px,calc(100svh - 72px),780px)} .ds-hero-copy{align-self:center;padding:var(--s8) var(--s7) var(--s9) max(var(--s5),calc((100vw - var(--content-max))/2 + var(--s5)))} .ds-hero .eyebrow{display:flex;align-items:center;gap:14px;color:var(--ds-champagne);font-size:11px;letter-spacing:.26em;margin-bottom:var(--s6)} .ds-hero .eyebrow::before{content:"";width:28px;height:1px;background:var(--ds-champagne);opacity:.7} .ds-hero h1{font-size:88px;font-weight:800;letter-spacing:-.03em;line-height:.92;text-transform:uppercase;color:#fff;max-width:5.6em;margin-bottom:var(--s6)} .ds-hero h1 .dot{color:var(--gold)} .ds-hero p.sub{font-size:18px;line-height:1.5;letter-spacing:.005em;color:rgba(255,255,255,.66);margin:0 0 var(--s7)} .ds-hero .btn-gold{letter-spacing:.18em;font-weight:800;font-size:12.5px;padding:17px 30px} .ds-hero .btn-gold .arrow{display:inline-block;margin-left:4px;transition:transform var(--t-std) var(--ease)} .ds-hero .btn-gold:hover .arrow{transform:translateY(3px)} /* the canvas */ .ds-demo{position:relative;margin:var(--s7) 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:var(--s8) var(--s7) var(--s7);background:var(--ds-canvas);color:var(--ds-ink);isolation:isolate} /* soft daylight on the object, warm, never white */ .ds-demo::before{content:"";position:absolute;left:50%;top:44%;width:min(620px,92%);height:78%;transform:translate(-50%,-50%);z-index:-1; background:radial-gradient(closest-side,rgba(255,252,245,.95),rgba(255,252,245,.45) 55%,transparent);pointer-events:none} /* centre guide, the axis the object is aligned on */ .ds-cv-guide{position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:-1;transform-origin:50% 0;opacity:.5;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(30,39,73,.13) 14%,rgba(30,39,73,.13) 86%,transparent)} .ds-demo-stage{position:relative;display:flex;justify-content:center;padding:var(--s4) 0 var(--s8)} /* champagne floor line */ .ds-demo-stage::after{content:"";position:absolute;left:50%;bottom:calc(var(--s8) - 14px);width:240px;height:1px;transform:translateX(-50%);opacity:.55; background:linear-gradient(90deg,transparent,#C9A35A 30%,#C9A35A 70%,transparent);pointer-events:none} .ds-demo-device{position:relative;width:228px;aspect-ratio:358/718} /* contact shadow */ .ds-demo-device::before{content:"";position:absolute;left:10%;right:10%;bottom:-14px;height:20px;border-radius:50%; background:radial-gradient(closest-side,rgba(40,30,10,.28),transparent);filter:blur(2px)} /* the selection: four precision marks around the object */ .ds-demo-frame{position:absolute;inset:-30px -40px -34px;pointer-events:none;opacity:.5; background: linear-gradient(var(--ds-mark),var(--ds-mark)) left top/12px 1px no-repeat, linear-gradient(var(--ds-mark),var(--ds-mark)) left top/1px 12px no-repeat, linear-gradient(var(--ds-mark),var(--ds-mark)) right top/12px 1px no-repeat, linear-gradient(var(--ds-mark),var(--ds-mark)) right top/1px 12px no-repeat, linear-gradient(var(--ds-mark),var(--ds-mark)) left bottom/12px 1px no-repeat, linear-gradient(var(--ds-mark),var(--ds-mark)) left bottom/1px 12px no-repeat, linear-gradient(var(--ds-mark),var(--ds-mark)) right bottom/12px 1px no-repeat, linear-gradient(var(--ds-mark),var(--ds-mark)) right bottom/1px 12px no-repeat} .ds-demo-device img{position:absolute;inset:0;width:100%;height:100%;display:block} .ds-demo-device .ds-demo-raw{display:none;filter:grayscale(1) brightness(.8) contrast(1.02)} .ds-demo-final{position:absolute;inset:0} .ds-demo-device .ds-demo-img,.ds-demo-device .ds-demo-next{filter:saturate(1.04) contrast(1.03)} .ds-demo-next{clip-path:inset(-2% 100% -2% 0)} /* the PX signature: its own layer, constant across colours, lit from the display */ .ds-demo-device img.ds-demo-px{inset:auto;left:31.44%;top:59.33%;width:38.83%;height:22.28%;mix-blend-mode:screen;pointer-events:none} .ds-demo-glow{position:absolute;left:27%;top:56%;width:47%;height:29%;mix-blend-mode:screen;opacity:.55;pointer-events:none; background:radial-gradient(closest-side,rgba(168,140,255,.30),rgba(96,168,255,.10) 58%,transparent)} /* the design line: drawn across the object for the reveal and for every colour change */ .ds-demo-sweep{position:absolute;top:-5%;bottom:-5%;left:0;width:100%;pointer-events:none;opacity:0} .ds-demo-line{position:absolute;top:0;bottom:0;left:-1px;width:2px; background:linear-gradient(180deg,transparent,#D9B877 16%,#F3E2BC 50%,#D9B877 84%,transparent); box-shadow:0 0 10px 1px rgba(201,163,90,.45)} /* label, swatches and colour */ .ds-demo-panel{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:var(--s2)} .ds-demo-model{position:absolute;top:28px;left:36px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ds-ink)} .ds-demo-model span{font-weight:400;letter-spacing:.08em;text-transform:none;color:var(--muted);margin-left:10px} .ds-demo-swatches{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .ds-demo-swatches[hidden]{display:none} .ds-demo-swatches button{width:20px;height:20px;padding:0;border-radius:50%;cursor:pointer;background:var(--c);border:1px solid rgba(30,39,73,.14); transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease)} @media (hover:hover){.ds-demo-swatches button:hover{transform:scale(1.1);box-shadow:0 0 0 3px var(--ds-canvas),0 0 0 4px rgba(30,39,73,.32)}} .ds-demo-swatches button[aria-pressed="true"],.ds-demo-swatches button[aria-pressed="true"]:hover{box-shadow:0 0 0 3px var(--ds-canvas),0 0 0 4px var(--gold)} .ds-demo-swatches button:focus-visible{outline:2px solid var(--navy);outline-offset:4px} .ds-demo-color{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .ds-demo-color b{font-weight:500;color:var(--ds-ink);margin:0 12px 0 8px} .ds-demo-color .count{letter-spacing:.1em;color:var(--gold-text)} .ds-demo-color .pv{letter-spacing:.1em;text-transform:lowercase;color:var(--muted);margin-left:8px} /* the choreography */ .ds-motion .ds-demo-frame{animation:ds-marks 3600ms var(--ease) 150ms both} .ds-motion .ds-cv-guide{animation:ds-guide 3600ms var(--ds-curve) 150ms both} .ds-motion .ds-demo-device .ds-demo-raw{display:block;animation:ds-rise 850ms var(--ease) 250ms both} .ds-motion .ds-demo-final{animation:ds-wipe 1500ms var(--ds-curve) 1000ms both} .ds-motion .ds-demo-sweep{animation:ds-sweep 1500ms var(--ds-curve) 1000ms both} .ds-motion .ds-demo-device img.ds-demo-px{animation:ds-ignite 850ms var(--ease) 2150ms both} .ds-motion .ds-demo-glow{animation:ds-glowon 1100ms var(--ease) 2150ms both} .ds-motion .ds-demo::before{animation:ds-glow 1100ms var(--ease) 2300ms both} .ds-motion .ds-demo-stage::after{animation:ds-floor 1000ms var(--ease) 2400ms both} .ds-motion .ds-demo-device::before{animation:ds-glow 900ms var(--ease) 900ms both} .ds-motion .ds-demo-panel,.ds-motion .ds-demo-model{animation:ds-panel 800ms var(--ease) 2750ms both} @keyframes ds-marks{0%{opacity:0;transform:scale(1.03)}22%{opacity:.85;transform:none}78%{opacity:.85}100%{opacity:.5}} @keyframes ds-guide{0%{opacity:0;transform:scaleY(0)}22%{opacity:1;transform:scaleY(1)}78%{opacity:1}100%{opacity:.5}} @keyframes ds-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes ds-wipe{from{clip-path:inset(-2% 100% -2% 0)}to{clip-path:inset(-2% 0 -2% 0)}} @keyframes ds-sweep{0%{transform:translateX(0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translateX(100%);opacity:0}} @keyframes ds-ignite{0%{opacity:0;filter:blur(3px) brightness(.6)}55%{opacity:1;filter:blur(.5px) brightness(1.08)}100%{opacity:1;filter:none}} @keyframes ds-glowon{0%{opacity:0}45%{opacity:1}100%{opacity:.55}} @keyframes ds-glow{from{opacity:0}to{opacity:1}} @keyframes ds-floor{from{opacity:0;transform:translateX(-50%) scaleX(.2)}to{opacity:.55;transform:translateX(-50%) scaleX(1)}} @keyframes ds-panel{from{opacity:0;visibility:hidden;transform:translateY(6px)}to{opacity:1;visibility:visible;transform:none}} /* the canvas carries on into the platform section */ .ds-hero + .ds-platforms{background:linear-gradient(180deg,#F4EFE5 0,var(--cream) 320px)} /* ---------- platform selection ---------- */ .ds-platforms{padding:var(--s9) 0 var(--s10)} .ds-platforms .section-head{text-align:center;margin-bottom:var(--s7)} .ds-platforms .section-head .rule{margin:0 auto} .ds-group + .ds-group{margin-top:var(--s8)} .ds-group-label{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s5);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)} .ds-group-label::after{content:"";flex:1;height:1px;background:var(--line)} .ds-group-label .count{font-family:var(--mono);font-weight:400;letter-spacing:.08em;color:var(--gold-text)} .ds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)} /* all-in-ones: the five-device family as a deliberate 3 + 2, single tank over dual chamber. A six-column track with every card spanning two keeps the cards exactly as large as a three-across row and centres the second row. */ .ds-grid.three{grid-template-columns:repeat(6,1fr);gap:var(--s5)} .ds-grid.three>.ds-card{grid-column:span 2} /* a two-card second row (five cards) is centred; a full row of three is not */ .ds-grid.three>.ds-card:nth-child(4):nth-last-child(2){grid-column:2 / span 2} .ds-card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:inherit; transition:border-color var(--t-std) var(--ease),transform var(--t-std) var(--ease),box-shadow var(--t-std) var(--ease)} a.ds-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 14px 32px rgba(30,39,73,.10)} .ds-card-stage{position:relative;display:block;background:var(--white);overflow:hidden} .ds-card-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform 420ms var(--ease)} /* cartridges: quieter and technical; native 2:3, the full hardware always visible, minimal motion */ .ds-grid:not(.three) .ds-card-stage{aspect-ratio:2/3} .ds-grid:not(.three) a.ds-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(30,39,73,.07)} /* all-in-ones: square stage, device scaled into its own white margin */ .ds-grid.three .ds-card-stage{aspect-ratio:1/1} .ds-grid.three .ds-card-stage img{transform:scale(1.14)} .ds-grid.three a.ds-card:hover .ds-card-stage img{transform:scale(1.18)} .ds-grid.three .ds-card-body{padding:var(--s5) var(--s6) var(--s6)} .ds-grid.three .ds-card-name{font-size:21px} .ds-card-body{display:flex;flex-direction:column;gap:2px;padding:var(--s4) var(--s5) var(--s5);border-top:1px solid var(--line);flex:1} .ds-card-name{font-size:18px;font-weight:800;letter-spacing:.04em;color:var(--navy)} .ds-card-spec{font-family:var(--mono);font-size:11.5px;color:var(--muted);min-height:1.6em} .ds-card-cta{margin-top:var(--s3);font-size:14px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:8px} .ds-card-cta .arrow{color:var(--gold);transition:transform var(--t-std) var(--ease)} a.ds-card:hover .ds-card-cta .arrow{transform:translateX(4px)} /* listed but not yet customizable (Ceramic, Zirconia): not a link, product image untouched, a quieter status label in place of the Customize link */ .ds-card.is-soon{cursor:default} .ds-card-soon{margin-top:var(--s3);display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .ds-card-soon::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--gold-text);flex:none} /* ---------- platform selection, editorial pass ---------- The next step on the same canvas: a quiet step cue, a left-set heading, and the hardware shown as curated objects on white plinths rather than boxed shop cards. Names, specs, links and the Coming soon state are unchanged. */ .ds-platforms{padding:var(--s9) 0 var(--s10)} .ds-platforms .section-head{text-align:left;margin-bottom:var(--s8)} .ds-platforms .section-head .rule{margin:0;width:64px;height:1px} .ds-platforms .section-head h2{font-size:44px;letter-spacing:-.02em;margin-bottom:var(--s4)} .ds-step{display:flex;align-items:center;gap:14px;margin-bottom:var(--s4);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text)} .ds-step::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6} .ds-group-label{font-size:11px;letter-spacing:.24em} .ds-card{background:transparent;border:0;border-radius:0;overflow:visible} a.ds-card:hover,.ds-grid:not(.three) a.ds-card:hover{transform:none;box-shadow:none;border-color:transparent} .ds-card-stage{background:var(--white);border-radius:2px;box-shadow:0 0 0 1px rgba(30,39,73,.06);transition:box-shadow var(--t-std) var(--ease)} a.ds-card:hover .ds-card-stage{box-shadow:0 0 0 1px rgba(201,150,46,.6),0 18px 36px -24px rgba(30,39,73,.35)} .ds-card-body,.ds-grid.three .ds-card-body{border-top:0;padding:var(--s4) 2px 0;gap:4px} .ds-card-name,.ds-grid.three .ds-card-name{font-size:15px;font-weight:800;letter-spacing:.16em} .ds-grid.three .ds-card-name{font-size:17px} .ds-card-spec{font-size:10.5px;letter-spacing:.06em} .ds-card-cta{margin-top:var(--s3);font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase} .ds-card-cta .arrow{font-weight:400} .ds-card-soon{font-size:10.5px;letter-spacing:.2em} /* ---------- PROXY IQ cross-link (deliberately quieter than the product cards) ---------- */ .ds-iq{border-top:1px solid var(--line);padding:var(--s8) 0 var(--s9)} .ds-iq-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:end} .ds-iq .eyebrow{display:block;margin-bottom:var(--s3)} .ds-iq h2{font-size:28px;line-height:1.2} .ds-iq h2 span{display:block;color:var(--muted);font-weight:700} .ds-iq p{color:var(--muted);font-size:15.5px;margin-bottom:var(--s5);max-width:480px} .ds-iq .btn{letter-spacing:.12em;font-size:13px;font-weight:700} .ds-iq .btn .arrow{color:var(--gold);transition:transform var(--t-std) var(--ease)} .ds-iq .btn:hover .arrow{transform:translateX(4px)} /* ---------- per-platform studio route ---------- */ .ds-studio-head{padding:var(--s7) 0 var(--s6)} .ds-studio-head-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);flex-wrap:wrap} .ds-studio-head .eyebrow{display:block;margin-bottom:var(--s3)} .ds-studio-head h1{font-size:56px;font-weight:800;letter-spacing:.01em;line-height:1;margin-bottom:var(--s3)} .ds-studio-head .tagline{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text)} .ds-studio-links{display:flex;gap:var(--s5);flex-wrap:wrap} .ds-studio-links a{font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;display:inline-flex;gap:8px;align-items:center} .ds-studio-links .arrow{color:var(--gold);transition:transform var(--t-std) var(--ease)} .ds-studio-links a:first-child:hover .arrow{transform:translateX(-4px)} .ds-studio-links a:last-child:hover .arrow{transform:translateX(4px)} .ds-page #configure{scroll-margin-top:88px} .ds-page .build .btn-secondary{margin-top:var(--s3)} .ds-share-status{font-size:12.5px;color:var(--gold-text);text-align:center;margin-top:var(--s2);min-height:1em;overflow-wrap:anywhere} .ds-share-status:empty{display:none} .ds-request-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:var(--s3)} /* ---------- responsive ---------- */ @media(max-width:959px){ /* four cartridge columns get too narrow below ~960 px (long names clip): two columns, a slightly shorter stage; the render is contain-fitted so the whole cartridge shows */ .ds-grid:not(.three){grid-template-columns:repeat(2,minmax(0,1fr))} .ds-grid:not(.three) .ds-card-stage{aspect-ratio:4/5} /* stacked: the studio panel above, the canvas full-bleed beneath it */ .ds-hero-grid{grid-template-columns:1fr;min-height:0} .ds-hero-copy{padding:var(--s8) var(--s5) var(--s7);text-align:center} .ds-hero .eyebrow{justify-content:center} .ds-hero h1{font-size:68px;margin-left:auto;margin-right:auto} .ds-hero p.sub{margin-bottom:var(--s6)} .ds-demo{margin:0;padding:var(--s8) var(--s5) var(--s6)} .ds-platforms{padding:var(--s8) 0 var(--s9)} .ds-grid{gap:var(--s4)} .ds-iq-inner{grid-template-columns:1fr;gap:var(--s4)} .ds-studio-head h1{font-size:44px} } @media(max-width:639px){ .ds-hero-copy{padding:var(--s7) var(--s5) var(--s7)} .ds-hero .eyebrow{margin-bottom:var(--s5)} .ds-hero h1{font-size:50px;margin-bottom:var(--s5)} .ds-hero p.sub{font-size:16px} .ds-hero .btn-gold{width:100%;max-width:340px} /* the same four states, shorter; tap-only swatches */ .ds-demo{padding:var(--s8) var(--s4) var(--s6)} .ds-demo-device{width:160px} .ds-demo-frame{inset:-20px -26px -24px} .ds-demo-stage::after{width:190px} .ds-demo-model{top:20px;left:20px;font-size:9.5px} .ds-motion .ds-demo-frame,.ds-motion .ds-cv-guide{animation-delay:0ms;animation-duration:2600ms} .ds-motion .ds-demo-device .ds-demo-raw{animation-delay:0ms;animation-duration:500ms} .ds-motion .ds-demo-device::before{animation-delay:450ms} .ds-motion .ds-demo-final,.ds-motion .ds-demo-sweep{animation-delay:550ms;animation-duration:1000ms} .ds-motion .ds-demo-device img.ds-demo-px,.ds-motion .ds-demo-glow{animation-delay:1350ms;animation-duration:750ms} .ds-motion .ds-demo::before,.ds-motion .ds-demo-stage::after{animation-delay:1400ms} .ds-motion .ds-demo-panel,.ds-motion .ds-demo-model{animation-delay:1800ms;animation-duration:700ms} .ds-demo-stage{padding:var(--s3) 0 var(--s7)} .ds-demo-stage::after{bottom:calc(var(--s7) - 12px)} .ds-demo-swatches{gap:9px;flex-wrap:nowrap} .ds-demo-swatches button{width:24px;height:24px} .ds-grid.three{grid-template-columns:1fr} .ds-grid.three>.ds-card,.ds-grid.three>.ds-card:nth-child(4){grid-column:auto} .ds-grid:not(.three){grid-template-columns:repeat(2,1fr)} .ds-grid,.ds-grid.three{gap:var(--s3)} .ds-grid.three .ds-card-stage{aspect-ratio:4/3} .ds-card-body,.ds-grid.three .ds-card-body{padding:var(--s3) 2px 0} .ds-card-name{font-size:14px} .ds-grid:not(.three) .ds-card-name{font-size:13px;letter-spacing:.1em} .ds-grid.three .ds-card-name{font-size:16px} .ds-platforms .section-head h2{font-size:34px} .ds-studio-head{padding:var(--s6) 0 var(--s5)} .ds-studio-head h1{font-size:40px} } @media(max-width:374px){ .ds-grid:not(.three) .ds-card-name{font-size:12px;letter-spacing:.06em} } @media(max-width:359px){ .ds-grid,.ds-grid.three,.ds-grid:not(.three){grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .ds-card-stage img,.ds-card,.ds-card-cta .arrow,.ds-demo-swatches button{transition:none} }