/* Optimize your design v6 — scoped under .uc-odx. NOT a port. This page has no Next.js source: it exists only in the retired design system as post 32755, so the copy and screenshots were lifted from there and the design is authored fresh in the v6 language. See tools/wp-migration/CLAIMS.md row 45. Every rule is wrapped in :where(.uc-odx) so nothing can match outside the page and the page's own cascade keeps the specificity it was written with. Class prefix is ox- throughout, checked against globals-classes.json: zero collisions with the old design system. No var() is read from anywhere but this file, so deleting #uichemy-globals or uichemy-old-globals.css cannot move a pixel here. */ @font-face{font-family:"Zalando Sans";src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Zalando Sans";src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Zalando Sans";src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Zalando Sans";src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap} /* ---------- scope root + page tokens ---------------------------------- */ .uc-odx{ --pg:#ffffff; --pg2:#f9f9fb; --mist:#f4f4f4; --tx:#0a0a0a; --txd:#525252; --txf:#a3a3a3; --acc:#fd6a35; --acc-fg:#cc4b23; --acc-soft:#fff1eb; --ok:#2ea343; --ok-fg:#0a842a; --ok-soft:#e7ffe7; --no:#f65258; --no-fg:#d12d37; --no-soft:#fff2ef; --line:#ebebeb; --cardbd:#e7e7ea; --ease:cubic-bezier(0.22,1,0.36,1); --r-chip:10px; --r-btn:8px; --r-card:16px; --r-xl:20px; --ox-max:1280px; --ox-gutter:40px; position:relative; font-size:16px; line-height:1.6; font-family:"Zalando Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--pg); color:var(--tx); overflow-x:clip; } /* Headings: (0,0,1) so a page utility could still win, and it beats nothing from old-globals except its own margin rule, which loads earlier. */ :where(.uc-odx) :is(h1,h2,h3,h4,h5,h6){margin:0} :where(.uc-odx) *,:where(.uc-odx) *::before,:where(.uc-odx) *::after{box-sizing:border-box} :where(.uc-odx) img{max-width:100%;height:auto} :where(.uc-odx) .ox-wrap{max-width:var(--ox-max);margin-inline:auto;padding-inline:var(--ox-gutter)} /* Document background. uichemy-old-globals.css paints `body{background:#020202}` from the retired palette, and nothing inside a page scope can reach . uichemy-header-fix.css carries a shared `html:has(.uc-X),body:has(.uc-X) {background-color:#FFFFFF!important}` rule, but its class list is PARTIAL and it is served without a cache buster, so a page that relies on it is relying on someone else's list and on a warm cache. Declared here instead: .uc-odx exists on page 34153 and nowhere else, so this cannot reach another page. Same pattern CLAUDE.md section 5 prescribes for document-level rules. */ html:has(.uc-odx),body:has(.uc-odx){background-color:#FFFFFF!important} /* reveal — gated on html.uicodx-js, set inline in by page code. If odx-page.js never loads the class never lands and everything stays visible, which is the whole point of gating it. */ html.uicodx-js :where(.uc-odx) .uc-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)} html.uicodx-js :where(.uc-odx) .uc-reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html.uicodx-js :where(.uc-odx) .uc-reveal{opacity:1;transform:none;transition:none} } /* ---------- hero ------------------------------------------------------ */ :where(.uc-odx) .ox-hero{padding:132px 0 72px;background:var(--pg)} :where(.uc-odx) .ox-hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:56px;align-items:center} :where(.uc-odx) .ox-eyebrow{ display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:999px; background:var(--mist);border:1px solid var(--cardbd); font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txd) } :where(.uc-odx) .ox-hero h1{ margin:22px 0 18px;max-width:660px; font-size:54px;line-height:58px;font-weight:500!important;letter-spacing:-.02em!important;color:var(--tx);text-wrap:balance } :where(.uc-odx) .ox-hero .ox-sub{max-width:560px;margin:0;color:var(--txd);font-size:18px;line-height:28px} :where(.uc-odx) .ox-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px} :where(.uc-odx) .ox-chip{ display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px; border-radius:999px;background:var(--pg);border:1px solid var(--cardbd); font-size:14px;font-weight:500;line-height:20px;color:var(--tx);text-decoration:none; transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease) } :where(.uc-odx) .ox-chip svg{width:18px;height:18px;flex:none} :where(.uc-odx) .ox-chip:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 6px 16px -8px rgba(10,10,10,.28)} :where(.uc-odx) .ox-hero-shot{ padding:26px;border-radius:var(--r-xl);background:var(--pg2);border:1px solid var(--cardbd) } :where(.uc-odx) .ox-hero-shot img{display:block;width:100%;height:auto} /* ---------- rules ----------------------------------------------------- */ :where(.uc-odx) .ox-rules-sec{padding:16px 0 96px;background:var(--pg)} :where(.uc-odx) .ox-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start} :where(.uc-odx) .ox-rail{position:sticky;top:104px} :where(.uc-odx) .ox-rail-ttl{ margin:0 0 14px;font-size:.6875rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--txf) } :where(.uc-odx) .ox-toc{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)} :where(.uc-odx) .ox-toc a{ display:flex;gap:12px;align-items:baseline;padding:10px 0 10px 16px;margin-left:-2px; border-left:2px solid transparent;text-decoration:none;color:var(--txd); font-size:15px;line-height:22px;transition:color .2s var(--ease),border-color .2s var(--ease) } :where(.uc-odx) .ox-toc-n{font-size:12px;font-weight:600;color:var(--txf);letter-spacing:.04em} :where(.uc-odx) .ox-toc a:hover{color:var(--tx)} :where(.uc-odx) .ox-toc li.is-current a{border-left-color:var(--acc);color:var(--tx);font-weight:500} :where(.uc-odx) .ox-toc li.is-current .ox-toc-n{color:var(--acc)} :where(.uc-odx) .ox-rules{display:flex;flex-direction:column;gap:88px} :where(.uc-odx) .ox-rule{scroll-margin-top:104px} :where(.uc-odx) .ox-num{ display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 11px; border-radius:999px;background:var(--acc-soft);color:var(--acc-fg); font-size:12px;font-weight:600;letter-spacing:.06em } :where(.uc-odx) .ox-head h2{ margin:16px 0 14px;max-width:820px; font-size:34px;line-height:42px;font-weight:500!important;letter-spacing:-.02em!important;color:var(--tx) } :where(.uc-odx) .ox-head .ox-sub{margin:0;max-width:860px;color:var(--txd);font-size:17px;line-height:28px} /* segmented control */ :where(.uc-odx) .ox-seg{ display:inline-flex;gap:4px;padding:4px;margin:26px 0 18px; border-radius:999px;background:var(--mist);border:1px solid var(--cardbd) } :where(.uc-odx) .ox-seg-btn{ appearance:none;border:0;background:transparent;cursor:pointer; padding:8px 20px;border-radius:999px; font-family:inherit;font-size:14px;font-weight:500;line-height:20px;color:var(--txd); transition:background-color .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease) } :where(.uc-odx) .ox-seg-btn:hover{color:var(--tx)} :where(.uc-odx) .ox-seg-btn.is-on[data-ox-state="bad"]{background:var(--no-soft);color:var(--no-fg);box-shadow:0 1px 2px rgba(10,10,10,.06)} :where(.uc-odx) .ox-seg-btn.is-on[data-ox-state="good"]{background:var(--ok-soft);color:var(--ok-fg);box-shadow:0 1px 2px rgba(10,10,10,.06)} :where(.uc-odx) .ox-seg-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px} :where(.uc-odx) .ox-pane{display:none} :where(.uc-odx) .ox-pane.is-active{display:block} :where(.uc-odx) .ox-card{ padding:26px;border-radius:var(--r-xl);background:var(--pg);border:1px solid var(--cardbd) } :where(.uc-odx) .ox-card.is-bad{background:linear-gradient(to bottom,var(--no-soft),var(--pg) 130px)} :where(.uc-odx) .ox-card.is-good{background:linear-gradient(to bottom,var(--ok-soft),var(--pg) 130px)} :where(.uc-odx) .ox-card h3{ display:flex;align-items:center;gap:11px;margin:0 0 22px; font-size:20px;line-height:28px;font-weight:500!important;letter-spacing:-.01em!important;color:var(--tx) } :where(.uc-odx) .ox-tone{ display:grid;place-items:center;width:26px;height:26px;border-radius:999px;flex:none;color:#fff } :where(.uc-odx) .ox-tone svg{width:15px;height:15px} :where(.uc-odx) .is-bad .ox-tone{background:var(--no)} :where(.uc-odx) .is-good .ox-tone{background:var(--ok)} :where(.uc-odx) .ox-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} :where(.uc-odx) .ox-cell{ display:flex;flex-direction:column; padding:16px;border-radius:var(--r-card);background:var(--pg2);border:1px solid var(--line) } :where(.uc-odx) .ox-tag{ display:inline-flex;align-items:center;gap:9px;margin-bottom:13px; font-size:13px;font-weight:500;line-height:18px;color:var(--txd) } :where(.uc-odx) .ox-tag span{ display:grid;place-items:center;width:26px;height:26px;flex:none; border-radius:8px;background:var(--pg);border:1px solid var(--cardbd);overflow:hidden } :where(.uc-odx) .ox-tag img{width:12px;height:12px;object-fit:contain} :where(.uc-odx) .ox-shot{ display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--pg) } :where(.uc-odx) .ox-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px} :where(.uc-odx) .ox-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:21px;color:var(--txd)} :where(.uc-odx) .ox-list svg{width:15px;height:15px;flex:none;margin-top:3px} :where(.uc-odx) .is-bad .ox-list svg{color:var(--no)} :where(.uc-odx) .is-good .ox-list svg{color:var(--ok)} :where(.uc-odx) .ox-p{margin:14px 0 0;font-size:14px;line-height:22px;color:var(--txd)} :where(.uc-odx) .ox-p + .ox-p{margin-top:10px} /* ---------- checklist ------------------------------------------------- */ :where(.uc-odx) .ox-check-sec{padding:0 0 96px;background:var(--pg)} :where(.uc-odx) .ox-check{ padding:40px;border-radius:24px;background:var(--pg2);border:1px solid var(--cardbd) } :where(.uc-odx) .ox-check-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap} :where(.uc-odx) .ox-check-top h2{font-size:32px;line-height:40px;font-weight:500!important;letter-spacing:-.02em!important;color:var(--tx)} :where(.uc-odx) .ox-check-top .ox-sub{margin:10px 0 0;color:var(--txd);font-size:17px;line-height:26px} :where(.uc-odx) .ox-count{ display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px; background:var(--pg);border:1px solid var(--cardbd); font-size:13px;font-weight:500;color:var(--txd);white-space:nowrap } :where(.uc-odx) .ox-count.is-done{background:var(--ok-soft);border-color:transparent;color:var(--ok-fg)} :where(.uc-odx) .ox-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:34px} :where(.uc-odx) .ox-group h3{ display:flex;align-items:center;gap:10px;margin:0 0 14px; font-size:15px;line-height:22px;font-weight:600!important;letter-spacing:normal!important;color:var(--tx) } :where(.uc-odx) .ox-gn{ display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 8px; border-radius:6px;background:var(--acc-soft);color:var(--acc-fg);font-size:11px;font-weight:700;letter-spacing:.06em } :where(.uc-odx) .ox-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} :where(.uc-odx) .ox-item > button{ display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;cursor:pointer; appearance:none;font-family:inherit; padding:13px 14px;border-radius:var(--r-card);background:var(--pg);border:1px solid var(--line); transition:border-color .2s var(--ease),box-shadow .2s var(--ease) } :where(.uc-odx) .ox-item > button:hover{border-color:var(--cardbd);box-shadow:0 4px 12px -8px rgba(10,10,10,.3)} :where(.uc-odx) .ox-item > button:focus-visible{outline:2px solid var(--acc);outline-offset:2px} :where(.uc-odx) .ox-box{ display:grid;place-items:center;width:20px;height:20px;flex:none;margin-top:1px; border-radius:6px;border:1.5px solid var(--cardbd);background:var(--pg);color:#fff; transition:background-color .2s var(--ease),border-color .2s var(--ease) } :where(.uc-odx) .ox-box svg{width:12px;height:12px;opacity:0;transition:opacity .2s var(--ease)} :where(.uc-odx) .ox-item > button[aria-pressed="true"] .ox-box{background:var(--acc);border-color:var(--acc)} :where(.uc-odx) .ox-item > button[aria-pressed="true"] .ox-box svg{opacity:1} :where(.uc-odx) .ox-tx{display:flex;flex-direction:column;gap:3px;min-width:0} :where(.uc-odx) .ox-ttl{font-size:14px;line-height:21px;font-weight:500;color:var(--tx)} :where(.uc-odx) .ox-det{font-size:13px;line-height:20px;color:var(--txd)} :where(.uc-odx) .ox-item > button[aria-pressed="true"] .ox-ttl{color:var(--txf);text-decoration:line-through} :where(.uc-odx) .ox-item > button[aria-pressed="true"] .ox-det{color:var(--txf)} :where(.uc-odx) .ox-foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} :where(.uc-odx) .ox-btn{ display:inline-flex;align-items:center;gap:9px;cursor:pointer;appearance:none; padding:11px 20px;border-radius:var(--r-btn); font-family:inherit;font-size:14px;font-weight:500;line-height:20px;text-decoration:none; transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease) } :where(.uc-odx) .ox-btn svg{width:16px;height:16px;flex:none} :where(.uc-odx) .ox-btn.is-primary{background:var(--acc);border:1px solid var(--acc);color:#fff} :where(.uc-odx) .ox-btn.is-primary:hover{background:var(--acc-fg);border-color:var(--acc-fg);transform:translateY(-1px)} :where(.uc-odx) .ox-btn.is-ghost{background:var(--pg);border:1px solid var(--cardbd);color:var(--tx)} :where(.uc-odx) .ox-btn.is-ghost:hover{border-color:var(--acc);transform:translateY(-1px)} :where(.uc-odx) .ox-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* ---------- closing note ---------------------------------------------- */ :where(.uc-odx) .ox-note-sec{padding:0 0 112px;background:var(--pg)} :where(.uc-odx) .ox-note{ padding:30px 34px;border-radius:var(--r-xl);background:var(--pg2); border:1px solid var(--cardbd);box-shadow:inset 3px 0 0 var(--acc) } :where(.uc-odx) .ox-note p{margin:0;font-size:16px;line-height:26px;color:var(--txd)} :where(.uc-odx) .ox-note p + p{margin-top:14px} :where(.uc-odx) .ox-note ol + p{margin-top:14px} :where(.uc-odx) .ox-note ol{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:9px} :where(.uc-odx) .ox-note li{font-size:16px;line-height:26px;color:var(--txd)} :where(.uc-odx) .ox-note li strong{color:var(--tx);font-weight:600} /* ---------- responsive ------------------------------------------------ */ @media (max-width:1160px){ :where(.uc-odx) .ox-grid{grid-template-columns:1fr;gap:34px} :where(.uc-odx) .ox-rail{position:static} :where(.uc-odx) .ox-toc{display:flex;flex-wrap:wrap;gap:8px;border-left:0} :where(.uc-odx) .ox-toc a{ border-left:0;padding:8px 14px;border-radius:999px; background:var(--mist);border:1px solid var(--cardbd) } :where(.uc-odx) .ox-toc li.is-current a{border-color:var(--acc);background:var(--acc-soft)} } @media (max-width:1024px){ :where(.uc-odx){--ox-gutter:28px} :where(.uc-odx) .ox-hero{padding:112px 0 56px} :where(.uc-odx) .ox-hero-row{grid-template-columns:1fr;gap:40px} :where(.uc-odx) .ox-hero h1{font-size:44px;line-height:50px} :where(.uc-odx) .ox-hero-shot{max-width:560px} :where(.uc-odx) .ox-head h2{font-size:30px;line-height:38px} :where(.uc-odx) .ox-check{padding:32px} :where(.uc-odx) .ox-groups{gap:26px} } @media (max-width:768px){ :where(.uc-odx){--ox-gutter:20px} :where(.uc-odx) .ox-hero{padding:96px 0 48px} :where(.uc-odx) .ox-hero h1{font-size:36px;line-height:43px} :where(.uc-odx) .ox-hero .ox-sub{font-size:16px;line-height:26px} :where(.uc-odx) .ox-rules{gap:64px} :where(.uc-odx) .ox-head h2{font-size:26px;line-height:34px} :where(.uc-odx) .ox-head .ox-sub{font-size:16px;line-height:26px} :where(.uc-odx) .ox-pair{grid-template-columns:1fr} :where(.uc-odx) .ox-card{padding:18px} :where(.uc-odx) .ox-check{padding:24px} :where(.uc-odx) .ox-check-top h2{font-size:26px;line-height:34px} :where(.uc-odx) .ox-groups{grid-template-columns:1fr;margin-top:28px} :where(.uc-odx) .ox-note{padding:24px} :where(.uc-odx) .ox-note p,:where(.uc-odx) .ox-note li{font-size:15px;line-height:25px} } @media (max-width:480px){ :where(.uc-odx) .ox-hero h1{font-size:31px;line-height:38px} :where(.uc-odx) .ox-chips{gap:8px} :where(.uc-odx) .ox-chip{padding:8px 13px 8px 10px;font-size:13px} :where(.uc-odx) .ox-seg{width:100%} :where(.uc-odx) .ox-seg-btn{flex:1;padding:8px 12px} :where(.uc-odx) .ox-foot .ox-btn{width:100%;justify-content:center} }