/* Print My File — upload / quote / checkout. BEM, theme tokens with fallbacks. */ .tdc-od-hero { --od-ink: var(--color-dark, #0a0a14); --od-cyan: var(--color-neon-cyan, #00f0ff); --od-pink: var(--color-neon-pink, #ff2d78); --od-cta: var(--color-cta, #ff5c5c); --od-on-cta: var(--color-on-cta, #0a0a14); } .tdc-od-hero .landing-hero__content { position: relative; z-index: 1; } .tdc-od-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl, 32px); align-items: center; } @media (min-width: 1024px) { .tdc-od-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-3xl, 48px); } } .tdc-od-hero__from { margin-top: var(--space-lg, 24px); font-size: var(--text-sm, 14px); color: var(--color-text-on-dark-muted, rgba(240, 240, 255, .75)); } .tdc-od-hero::after { content: ''; position: absolute; inset: auto 0 0 auto; width: 55%; height: 100%; background: radial-gradient(ellipse at 75% 45%, rgba(0, 240, 255, .10) 0%, transparent 60%); pointer-events: none; } .tdc-od-chips li { white-space: nowrap; } /* App shell */ .tdc-od { position: relative; } .tdc-od [hidden], .tdc-od__studio[hidden], .tdc-od__progress[hidden] { display: none !important; } .tdc-od__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } /* PMF-02: the sticky upload control exists only on phones (see the 599px block); off everywhere else. print-my-file.js moves it from #tdc-od-app to on phones so it escapes the hero's z-index:1 stacking context, so these rules must not depend on its ancestry. */ .tdc-od-sticky { display: none; } /* Drop zone */ .tdc-od__drop { position: relative; display: block; min-height: 260px; padding: var(--space-xl, 32px); border: 2px dashed rgba(0, 240, 255, .45); border-radius: var(--radius-xl, 24px); background: linear-gradient(160deg, rgba(20, 20, 36, .92), rgba(10, 10, 20, .88)); box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .04); color: var(--color-text-on-dark, #f0f0ff); cursor: pointer; text-align: center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .tdc-od__drop:hover, .tdc-od__drop:focus-visible { border-color: var(--od-cyan, #00f0ff); box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 0 0 4px rgba(0, 240, 255, .18); outline: none; } .tdc-od__drop.is-over { border-style: solid; border-color: var(--od-cyan, #00f0ff); transform: scale(1.01); background: linear-gradient(160deg, rgba(0, 240, 255, .12), rgba(10, 10, 20, .9)); } .tdc-od__drop.is-busy { cursor: progress; } .tdc-od__drop.is-busy .tdc-od__drop-inner { opacity: .35; } .tdc-od__drop-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm, 8px); } .tdc-od__drop-icon { display: inline-flex; width: 72px; height: 72px; align-items: center; justify-content: center; border-radius: 50%; color: var(--od-cyan, #00f0ff); background: rgba(0, 240, 255, .08); box-shadow: 0 0 0 1px rgba(0, 240, 255, .25), 0 0 32px rgba(0, 240, 255, .18); margin-bottom: var(--space-xs, 4px); } .tdc-od__drop.is-over .tdc-od__drop-icon { animation: tdc-od-bob .8s ease-in-out infinite; } @keyframes tdc-od-bob { 50% { transform: translateY(-6px); } } .tdc-od__drop-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.01em; } .tdc-od__drop-or { font-size: var(--text-sm, 14px); opacity: .6; } .tdc-od__browse { pointer-events: none; } .tdc-od__drop-formats { font-size: 13px; opacity: .65; margin-top: var(--space-xs, 4px); } .tdc-od__progress { position: absolute; inset: auto var(--space-xl, 32px) var(--space-lg, 24px); } .tdc-od__progress-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; } .tdc-od__progress-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--od-pink, #ff2d78), var(--od-cyan, #00f0ff)); transition: width .15s linear; } .tdc-od__progress-label { display: block; margin-top: var(--space-sm, 8px); font-size: 14px; font-weight: 600; } .tdc-od__msg { margin: var(--space-md, 16px) 0 0; padding: 12px 16px; border-radius: 12px; font-size: 15px; line-height: 1.45; } .tdc-od__msg.is-error { background: rgba(255, 92, 92, .14); color: #ffb4b4; border: 1px solid rgba(255, 92, 92, .4); } .tdc-od__msg.is-info { background: rgba(0, 240, 255, .1); color: #bff8ff; border: 1px solid rgba(0, 240, 255, .35); } .tdc-od__msg.is-ok { background: rgba(0, 229, 160, .12); color: #a8ffe0; border: 1px solid rgba(0, 229, 160, .4); } /* Studio: light print-bed surface, full width under the hero */ .tdc-od__studio { margin-top: var(--space-xl, 32px); padding: var(--space-lg, 24px); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg, 24px); background: var(--color-white, #fff); color: var(--color-text-on-canvas, #1a1a1f); border-radius: var(--radius-xl, 24px); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); } /* PMF-H1: with a job loaded the hero copy collapses to a compact page title. Hiding the whole block left the page with NO

at all, and because the resumed state is restored from sessionStorage a shopper can sit in it for a whole session. Keep the kicker and the

; drop the subtitle, the chips and the price line under them. The grid stays one column, copy first and app second in DOM order, so the studio still runs the full content width under the title. / .tdc-od-herogrid:has(.has-job) { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg, 24px); } .tdc-od-herogrid:has(.has-job) .landing-herosubtitle, .tdc-od-herogrid:has(.has-job) .tdc-od-chips, .tdc-od-herogrid:has(.has-job) .tdc-od-herofrom { display: none; } .tdc-od-herogrid:has(.has-job) .landing-herotitle { font-size: clamp(24px, 3vw, 32px); margin-bottom: 0; } / With a job loaded the drop zone does NOT disappear — it becomes a compact strip under the studio, so replacing the file is always one visible control away. `order` moves it below the studio without moving it in the DOM, which keeps the file input the drop zone owns exactly where the app expects it. / .tdc-od.has-job { display: grid; grid-template-columns: minmax(0, 1fr); } .tdc-od.has-job .tdc-odmsg { order: 1; } .tdc-od.has-job .tdc-odstudio { order: 2; } .tdc-od.has-job .tdc-oddrop { order: 3; min-height: 104px; margin-top: var(--space-md, 16px); padding: var(--space-md, 16px) var(--space-lg, 24px); border-radius: 16px; display: flex; align-items: center; justify-content: center; } .tdc-oddrop-compact { display: none; } .tdc-od.has-job .tdc-oddrop-inner { display: none; } .tdc-od.has-job .tdc-oddrop-compact { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center; } .tdc-od.has-job .tdc-oddrop.is-busy .tdc-oddrop-compact { opacity: .35; } .tdc-od.has-job .tdc-odprogress { inset: auto var(--space-lg, 24px) 10px; } .tdc-oddrop-compact-icon { display: inline-flex; flex: none; color: var(--od-cyan, #00f0ff); } @media (min-width: 900px) { .tdc-odstudio { grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); padding: var(--space-xl, 32px); } } .tdc-odstage { display: flex; flex-direction: column; gap: var(--space-md, 16px); } .tdc-odviewer { position: relative; aspect-ratio: 4 / 3; min-height: 260px; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #1c1c30 0%, #0a0a14 75%); } .tdc-odviewer canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; } .tdc-odviewer.is-loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(0, 240, 255, .25); border-top-color: #00f0ff; animation: tdc-od-spin .9s linear infinite; } .tdc-odviewer-hud { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 8px; background: rgba(10, 10, 20, .7); color: #f0f0ff; font-size: 13px; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); } .tdc-odviewer-fail { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--space-lg, 24px); color: #c9c9dd; text-align: center; font-size: 14px; } .tdc-odfile { display: flex; flex-wrap: wrap; gap: var(--space-sm, 8px) var(--space-lg, 24px); align-items: baseline; } .tdc-odfile-name { flex: 1 1 100%; font-size: 17px; word-break: break-all; } .tdc-odfile-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm, 8px) var(--space-lg, 24px); margin: 0; } .tdc-odfile-meta div { display: flex; flex-direction: column; } .tdc-odfile-meta dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-on-canvas-muted, #5e5e6b); } .tdc-odfile-meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; } .tdc-odpill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(180, 74, 255, .12); color: #6a2fc4; font-size: 12px; font-weight: 600; } .tdc-odwarn { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; background: #fff4de; color: #6b4600; border: 1px solid #ffd58a; } .tdc-odwarn.is-info { background: #e8fbff; color: #005a66; border-color: #9fe8f2; } / Two ways out of a loaded job. Both are quiet on the white studio card so the only accent stays on Continue to checkout. Colours are set here rather than inherited from .btn--outline, whose `color: var(--color-text)` is near-white on this page's ink palette and would vanish on the white card. / .tdc-odactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm, 8px); align-self: flex-start; } .tdc-odaction { min-height: 44px; padding: 10px 18px; font-size: 14.5px; border-radius: 10px; border: 1.5px solid; cursor: pointer; } .tdc-odaction.tdc-odnewfile { background: transparent; color: var(--color-blueprint-on-canvas, #007a8a); border-color: var(--color-blueprint-on-canvas, #007a8a); } .tdc-odaction.tdc-odnewfile:hover, .tdc-odaction.tdc-odnewfile:focus-visible { background: var(--color-blueprint-on-canvas, #007a8a); color: #fff; } .tdc-odaction--cancel { background: transparent; color: var(--color-text-on-canvas-muted, #5e5e6b); border-color: #dcdce6; } .tdc-odaction--cancel:hover, .tdc-odaction--cancel:focus-visible { color: #8a1c1c; border-color: #e2a3a3; background: #fff6f6; } .tdc-odaction--danger { background: #8a1c1c; color: #fff; border-color: #8a1c1c; } .tdc-odaction--danger:hover, .tdc-odaction--danger:focus-visible { background: #6d1414; border-color: #6d1414; } .tdc-odaction:focus-visible { outline: 2px solid var(--color-focus, #00f0ff); outline-offset: 2px; } .tdc-odconfirm { align-self: flex-start; padding: 12px 14px; border: 1.5px solid #e2a3a3; border-radius: 12px; background: #fff6f6; } .tdc-odconfirm-q { margin: 0 0 10px; font-size: 14.5px; font-weight: 600; color: var(--color-text-on-canvas, #1a1a1f); } .tdc-odconfirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm, 8px); } / Configurator / .tdc-odconfig { display: flex; flex-direction: column; gap: var(--space-md, 16px); } .tdc-odgroup { border: 0; padding: 0; margin: 0; min-width: 0; } .tdc-odgroup legend { padding: 0; margin-bottom: var(--space-sm, 8px); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-on-canvas-muted, #5e5e6b); } .tdc-odcolour-name { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--color-text-on-canvas, #1a1a1f); } .tdc-odmaterials { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-sm, 8px); } .tdc-odmaterial { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1.5px solid #dcdce6; border-radius: 12px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .tdc-odmaterial input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .tdc-odmaterial:has(input:checked) { border-color: var(--color-blueprint-on-canvas, #007a8a); box-shadow: 0 0 0 3px rgba(0, 122, 138, .15); } .tdc-odmaterial:has(input:focus-visible) { outline: 2px solid var(--color-focus, #00f0ff); outline-offset: 2px; } .tdc-odmaterial-name { font-weight: 700; } .tdc-odmaterial-desc { font-size: 12.5px; line-height: 1.35; color: var(--color-text-on-canvas-muted, #5e5e6b); } .tdc-odswatches { display: flex; flex-wrap: wrap; gap: 8px; } .tdc-odswatch { width: 36px; height: 36px; padding: 0; border: 2px solid rgba(0, 0, 0, .08); border-radius: 50%; background: var(--dot, #888); cursor: pointer; box-shadow: inset 0 0 0 2px #fff; transition: transform .12s ease, box-shadow .12s ease; } .tdc-odswatch:hover { transform: scale(1.08); } .tdc-odswatch.is-selected { box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px var(--color-blueprint-on-canvas, #007a8a); } .tdc-odswatch:focus-visible { outline: 2px solid var(--color-focus, #00f0ff); outline-offset: 3px; } .tdc-odrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm, 8px) var(--space-md, 16px); } .tdc-odfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .tdc-odfield > span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-on-canvas-muted, #5e5e6b); } .tdc-odfield select, .tdc-odfield textarea, .tdc-odqty input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid #dcdce6; border-radius: 10px; background: #fff; color: inherit; font: inherit; } .tdc-odfield select:focus-visible, .tdc-odfield textarea:focus-visible, .tdc-odqty input:focus-visible { outline: 2px solid var(--color-focus, #00f0ff); outline-offset: 1px; border-color: var(--color-blueprint-on-canvas, #007a8a); } .tdc-odqty { display: grid; grid-template-columns: 44px 1fr 44px; } .tdc-odqty button { min-height: 44px; border: 1.5px solid #dcdce6; background: #f4f4f9; font-size: 20px; cursor: pointer; } .tdc-odqty button:first-child { border-radius: 10px 0 0 10px; border-right: 0; } .tdc-odqty button:last-child { border-radius: 0 10px 10px 0; border-left: 0; } .tdc-odqty input { border-radius: 0; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .tdc-odqty input::-webkit-inner-spin-button, .tdc-odqty input::-webkit-outer-spin-button { -webkit-appearance: none; } .tdc-odtoggle { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; cursor: pointer; } .tdc-odtoggle input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--color-blueprint-on-canvas, #007a8a); } .tdc-odtoggle--rights { padding: 12px 14px; border-radius: 12px; background: #f4f4f9; } / Price card / .tdc-odprice { padding: var(--space-md, 16px) var(--space-lg, 24px); border-radius: 16px; background: var(--color-dark, #0a0a14); color: var(--color-text-on-dark, #f0f0ff); box-shadow: inset 0 0 0 1px rgba(0, 240, 255, .18); } .tdc-odprice-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 6px; } .tdc-odbadge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255, 176, 32, .18); color: #ffd27a; } .tdc-odbadge.is-precise { background: rgba(0, 229, 160, .16); color: #7dffd2; } .tdc-odslicing { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #bff8ff; } .tdc-odspinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0, 240, 255, .3); border-top-color: #00f0ff; animation: tdc-od-spin .9s linear infinite; } @keyframes tdc-od-spin { to { transform: rotate(360deg); } } .tdc-odtotal { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; transition: opacity .15s ease; } .tdc-odtotal small { font-size: 14px; font-weight: 600; opacity: .7; margin-left: 4px; } .is-quoting .tdc-odtotal { opacity: .45; } .tdc-odlines, .tdc-odbreakdown dl { margin: var(--space-sm, 8px) 0 0; } .tdc-odlines div, .tdc-odbreakdown dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; } .tdc-odlines dt, .tdc-odbreakdown dt { opacity: .8; } .tdc-odlines dd, .tdc-odbreakdown dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; } .tdc-odbreakdown { margin-top: var(--space-sm, 8px); font-size: 14px; } .tdc-odbreakdown summary { cursor: pointer; color: #bff8ff; } .tdc-odhint { margin: var(--space-sm, 8px) 0 0; font-size: 13px; color: #bff8ff; } .tdc-odhint:empty { display: none; } .tdc-odtaxes { margin: 6px 0 0; font-size: 12px; opacity: .6; } .tdc-odcheckout { width: 100%; justify-content: center; } .tdc-odconfig .tdc-odmsg.is-error { background: #ffecec; color: #8a1c1c; border-color: #ffb4b4; } .tdc-odconfig .tdc-odhint { color: var(--color-text-on-canvas-muted, #5e5e6b); } / Page sections / .tdc-od-materials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg, 24px); } .tdc-od-material { padding: var(--space-lg, 24px); } .tdc-od-materialname { margin: 0 0 6px; font-size: 22px; } .tdc-od-materialdesc { margin: 0 0 var(--space-md, 16px); opacity: .85; } .tdc-od-materialcolours { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; } .tdc-od-materialcolours li { display: inline-flex; align-items: center; gap: 6px; } .tdc-od-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } .tdc-od-pricerows { display: grid; gap: var(--space-md, 16px); margin: 0; padding: 0; list-style: none; } .tdc-od-pricerow { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; } .tdc-od-pricerowicon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(0, 122, 138, .1); color: var(--color-blueprint-on-canvas, #007a8a); } .tdc-od-pricerow p { margin: 2px 0 0; color: inherit; opacity: .78; } .tdc-od-trustgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg, 24px); } .tdc-od-trustitem h3 { margin: var(--space-sm, 8px) 0 6px; font-size: 18px; } .tdc-od-trustitem p { margin: 0; opacity: .8; } .tdc-od-trusticon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; color: #00f0ff; background: rgba(0, 240, 255, .08); box-shadow: 0 0 0 1px rgba(0, 240, 255, .25); } .tdc-od-faq { display: grid; gap: 10px; } .tdc-od-faqitem { padding: 14px 18px; border: 1px solid #e3e3ec; border-radius: 12px; background: #fff; color: var(--color-text-on-canvas, #1a1a1f); } .tdc-od-faqitem summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--color-text-on-canvas, #1a1a1f); } .tdc-od-faqitem summary::-webkit-details-marker { display: none; } .tdc-od-faqitem summary::after { content: '+'; font-weight: 400; color: var(--color-blueprint-on-canvas, #007a8a); } .tdc-od-faqitem[open] summary::after { content: '−'; } .tdc-od-faqitem p { margin: 10px 0 0; color: var(--color-text-on-canvas-muted, #5e5e6b); line-height: 1.55; } .tdc-od-cta { text-align: center; } .tdc-od-ctaother-title { margin: var(--space-2xl, 32px) 0 var(--space-md, 16px); font-size: 18px; } .tdc-od-ctaother { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md, 16px); text-align: left; } .tdc-od-ctacard { display: flex; flex-direction: column; gap: 4px; padding: var(--space-md, 16px) var(--space-lg, 24px); text-decoration: none; color: inherit; } .tdc-od-ctacard span { font-size: 14px; color: inherit; opacity: .75; } / Account / .tdc-od-accountlede { margin-bottom: var(--space-md, 16px); } .tdc-od-accountactions { white-space: nowrap; } .tdc-od-accountdelete { margin-left: 6px; } .tdc-od-cart-thumb { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 10px; background: #0a0a14; color: #00f0ff; } @media (prefers-reduced-motion: reduce) { .tdc-oddrop, .tdc-odmaterial, .tdc-odswatch, .tdc-odtotal { transition: none; } .tdc-oddrop.is-over .tdc-oddrop-icon { animation: none; } } @media (max-width: 599px) { .tdc-odstudio { padding: var(--space-md, 16px); border-radius: 16px; } .tdc-odtotal { font-size: 32px; } / ─── PMF-02 ───────────────────────────────────────────────────────────── The upload door has to be in the first screen AND clear of the consent toast in every state the toast has. Two changes do that, and neither needs a fallback control to rescue it: 1. On phones the app follows the H1 instead of the whole copy block. The copy wrapper goes transparent to the hero grid so its children and the app share the one column and can be ordered. DOM order (kicker, H1, subtitle, chips, from, app) is untouched, so the

is still the first heading, and PMF-H1's :has(.has-job) rules target these same children directly so they keep working through `display: contents`. The grid's row-gap is zeroed because, once the wrapper is transparent, it stacks on top of every child's own margin. That line is load-bearing, not cosmetic: measured on the live page at 390x844 with only that declaration removed, the H1 drops 48px (244.2..317.8 -> 292.2..365.8) and the door drops 96px to 471.8..523.8 — back inside the expanded consent panel, which starts at 508.3. The margins below carry the rhythm instead. 2. Inside the zone the door LEADS. On a touch device there is no drag, so the 72px drop icon and the "or" that connects dropping to browsing are decoration sitting on top of the only real control; the button goes first and the title and formats become its caption. Desktop keeps all of it. Measured on the live page at 390x844 with (1) kept and only this group removed, the door is at 538.2..590.2 EN / 575..627 FR and overlaps the expanded consent panel by 9,339.2 / 11,076 px^2, with elementFromPoint returning a consent-toast button. So this group is worth 162.4px EN / 162.4px FR of door position, and it is the half of the change that clears the panel — (1) on its own does not. / .tdc-od-herogrid { row-gap: 0; } .tdc-od-herocopy { display: contents; } .tdc-od-herocopy > .figurine-kicker { order: 0; } .tdc-od-herocopy > .landing-herotitle { order: 1; } .tdc-od-heroapp { order: 2; margin-top: var(--space-md, 16px); } .tdc-od-herocopy > .landing-herosubtitle { order: 3; margin-top: var(--space-lg, 24px); } .tdc-od-herocopy > .tdc-od-chips { order: 4; } .tdc-od-herocopy > .tdc-od-herofrom { order: 5; } / Replaces the old phone sizing (min-height: 220px; padding: 24px 16px), which this rule overrode in full and would otherwise have left behind as a dead declaration. The zone hugs its content now, so nothing below it is pushed off screen by 60px of empty box, and the vertical padding comes down with it: the door is the first thing inside, so every pixel above it is a pixel of the shopper's first screen. `.tdc-od.has-job .tdc-oddrop` is three classes and still wins, so PMF-RESUME's compact strip keeps its own 104px / 16px 24px sizing. / .tdc-oddrop { min-height: 0; padding: var(--space-md, 16px); } .tdc-oddrop-inner { gap: 10px; } .tdc-oddrop-icon, .tdc-oddrop-or { display: none; } / The base rule is `pointer-events: none`, which lets a tap on the button fall through to the zone's own click handler — the same handler either way, but it also means document.elementFromPoint over the button can never return the button. Take the tap here on phones: e.target becomes the button, `.closest('input')` is still null, so the drop zone's click handler opens the same file input, and the control a shopper aims at is the control the hit test reports. / .tdc-odbrowse { order: 1; width: 100%; pointer-events: auto; } .tdc-oddrop-title { order: 2; font-size: var(--text-sm, 14px); font-weight: 600; opacity: .72; } .tdc-od__drop-formats { order: 3; margin-top: 0; } / Plugin-owned sticky upload control, for after the zone has scrolled away. print-my-file.js clears [hidden] only while the drop zone is entirely outside the part of the screen nothing is covering, and this pill is positioned inside that same part — so it can never be drawn over the zone it is a shortcut to. Clearance above the consent toast comes from --tdc-consent-h, which the THEME writes on (inc/cookie-consent.php): innerHeight minus the toast's top plus 8px while it carries .cookie-toast--visible, and 0px otherwise. Its writer watches the toast with a MutationObserver ({attributes, subtree, attributeFilter: class/hidden/style}), a ResizeObserver, resize and transitionend, so it already tracks the "Customize" panel (#cookiePreferences[hidden]) that buried this pill in round 2 — the plugin must not grow a second copy of that logic. .sticky-cta, .pdp-sticky-bar and .back-to-top consume the same variable. The 0px fallback is load-bearing: on a page with no toast at all the theme's writer returns before setting anything. Colours reuse the theme's .btn--accent tokens. / .tdc-od-sticky:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--tdc-consent-h, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 95; display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0; padding: .875rem 1.5rem; border: 2px solid var(--color-cta, #ff5c5c); border-radius: var(--radius-full, 9999px); background: var(--color-cta, #ff5c5c); color: var(--color-on-cta, #0a0a14); font-family: inherit; font-size: var(--text-base, 16px); font-weight: var(--weight-semibold, 600); line-height: 1; letter-spacing: var(--tracking-wide, .05em); white-space: nowrap; text-decoration: none; box-shadow: 0 8px 30px rgba(0, 0, 0, .4), var(--glow-cta-md, 0 4px 20px rgba(255, 92, 92, .4)); cursor: pointer; } .tdc-od-sticky:not([hidden]):focus-visible { outline: 2px solid var(--color-focus, #00f0ff); outline-offset: 3px; } / The theme's floating cart is fixed at right: var(--space-md) (16px), 44px wide, bottom: calc(80px + 52px). With the consent toast up the pill sits at bottom 12px + 123px and the two boxes cross (measured: 41px x 44px). Pull the pill's right edge in to 390 - 68 = 322px, clear of the cart's 330px left edge by 8px, only while the cart is actually showing itself. / :root:has(.floating-cart[aria-hidden="false"]) .tdc-od-sticky:not([hidden]) { right: 68px; } / With a job loaded the studio owns the screen, so the control goes away. print-my-file.js is the primary here — it sets [hidden] from the same has-job class — so an engine without :has() still gets the suppression. */ :root:has(.tdc-od.has-job) .tdc-od-sticky { display: none; } }